/* =====================================================================
   STYLE.CSS
   Colours and fonts are set once at the top (section 1),
   so changing them there changes the whole site.

   Sections in this file:
   1. Fonts and colours
   2. Base
   3. Header and menu
   4. Opening still (main page)
   5. Showreel
   6. Video grid
   7. Video player and video details
   8. Section pages
   9. About
   10. Footer
   11. Small helpers
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. FONTS AND COLOURS
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #1c1b1a;          /* page background */
  --surface: #2b2a28;     /* empty video boxes */
  --text: #eceae5;        /* main text */
  --muted: #a09d97;       /* softer text */
  --line: #3a3936;        /* thin lines */
  --on-image: #f2efe9;    /* text on top of the opening still */

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --side: clamp(1.25rem, 4vw, 3rem);   /* space at the left and right edges */
  --max: 1240px;                       /* widest the content gets */

  color-scheme: dark;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

main {
  outline: none;
}

/* space between the last thing on a page and the footer */
main > .wrap {
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--side);
}

/* bold capitals used for names, titles and the menu */
.caps {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}


/* ---------------------------------------------------------------------
   3. HEADER AND MENU
   --------------------------------------------------------------------- */
/* The header stays at the top while scrolling. It spans the full width
   (so the glass reaches both edges), but its content lines up with the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) max(var(--side), calc((100% - var(--max)) / 2 + var(--side))) 1rem;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

/* On the main page the header sits on top of the opening still */
.is-home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  color: var(--on-image);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* "Scroll for work" target on the main page: leave room for the header */
#work {
  scroll-margin-top: 6rem;
}

/* Glass effect, added by js/site.js once the page is scrolled */
.site-header.is-scrolled {
  background-color: rgba(28, 27, 26, 0.22);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  text-shadow: none;
}

.name-block {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem clamp(1rem, 2vw, 1.75rem);
}

.menu a {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.8;
}

.menu a:hover,
.menu a[aria-current="page"] {
  opacity: 1;
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

/* "Menu" button, only shown on phones */
.menu-toggle {
  display: none;
  border: 0;
  padding: 0.25rem 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 820px) {
  .menu-toggle {
    display: block;
  }

  /* the menu opens as a full panel below the header */
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--side) 1.5rem;
    background: var(--bg);
    text-shadow: none;
  }

  .menu.is-open {
    display: flex;
  }

  .menu a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    color: var(--text);
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------
   4. OPENING STILL (main page)
   --------------------------------------------------------------------- */
.opening {
  position: relative;
  height: 100vh;
  height: 100svh;   /* fits phone screens with browser bars */
  min-height: 480px;
  overflow: hidden;
  background: var(--surface);
}

.opening img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;   /* keeps the street and lit windows in view on phones */
}

/* soft darkening at top and bottom so the text stays readable */
.opening::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(28, 27, 26, 0.8) 100%);
  pointer-events: none;
}

.scroll-cue {
  position: absolute;
  z-index: 1;
  right: var(--side);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  border: 0;
  padding: 0.5rem 0;
  background: none;
  color: var(--on-image);
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}


/* ---------------------------------------------------------------------
   5. SHOWREEL
   --------------------------------------------------------------------- */
.showreel {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.home-heading {
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
}

/* "Selected work" sits right under its heading */
.home-heading + .grid {
  margin-top: 1.25rem;
}

/* big links to the four sections at the bottom of the main page */
.section-links {
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

.section-links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.section-links li:last-child a {
  border-bottom: 1px solid var(--line);
}

.section-links a span {
  color: var(--muted);
  transition: transform 0.25s ease;
}

.section-links a:hover span {
  color: var(--text);
  transform: translateX(0.3em);
}


/* ---------------------------------------------------------------------
   6. VIDEO GRID
   Wide videos: 1 column on phones, 2 on bigger screens.
   Vertical videos (Shorts): 2 columns on phones, 4 on bigger screens.
   --------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.grid--vertical {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 0.75rem;
}

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1rem;
  }

  .grid--vertical {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* one card = title + playable video + role/year */
.card > a {
  display: block;
  text-decoration: none;
}

.player img {
  transition: transform 0.6s ease;
}

.player:hover img {
  transform: scale(1.03);
}

/* vertical Shorts inside the wide grid: whole picture, dark bars at the sides */
.player.player--short {
  background: #111;
}

.player.player--short img {
  object-fit: contain;
}

.card-meta a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}

.card-meta a:hover {
  text-decoration-color: var(--text);
}

.card-title {
  margin: 0 0 0.6rem;
  min-height: 1.1em;
}

/* under the video: role · year on the left, "Details" link on the right */
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.5rem;
}

.card-foot .card-meta {
  margin: 0;
}

.card-details {
  flex-shrink: 0;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.card-details:hover {
  opacity: 1;
}

.card-meta {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* the picture box; keeps the video's shape */
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}

.frame--vertical {
  aspect-ratio: 9 / 16;
}

.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.card a:hover .frame img {
  transform: scale(1.03);
}

/* grey tones for boxes without a picture */
.tone-0 { background: linear-gradient(160deg, #4a4843, #23221f); }
.tone-1 { background: linear-gradient(160deg, #3d3c38, #1f1e1c); }
.tone-2 { background: linear-gradient(160deg, #55524c, #262522); }
.tone-3 { background: linear-gradient(160deg, #363532, #1d1c1a); }



/* ---------------------------------------------------------------------
   7. VIDEO PLAYER AND VIDEO DETAILS
   --------------------------------------------------------------------- */
.back-link {
  display: inline-block;
  margin: 0.5rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
}

.back-link:hover {
  color: var(--text);
}

/* one video on a section page = player + details */
.work {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: 7rem;   /* room for the sticky header */
}

.work + .work {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* the player box: cover picture first, the video loads when pressed */
.player {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  color: var(--on-image);
  text-decoration: none;
}

.player--vertical,
.player--plays-vertical.is-playing {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(80svh * 9 / 16));
  margin: 0 auto;
}

/* .player--plays-vertical: wide cover picture like the other videos,
   but turns tall once the vertical video starts playing */

.player img,
.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.player iframe {
  background: #000;
}

.video-info {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

@media (min-width: 800px) {
  .video-info {
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
  }
}

.video-info h2 {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.video-info p {
  max-width: 62ch;
  margin: 0;
}

.facts {
  margin: 0;
}

/* client / role / year and credits: small, so the videos stay the focus */
.facts div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.credits-title {
  margin: 1.5rem 0 0.4rem;
  font-size: 0.7rem;
  color: var(--muted);
}

/* credits: wider role column so longer roles fit */
@media (max-width: 600px) {
  .facts div {
    grid-template-columns: 7rem 1fr;
    font-size: 0.75rem;
    padding: 0.3rem 0;
  }
}

/* Shorts heading on the Brand content page */
.shorts-title {
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.shorts-title + .grid {
  margin-top: 1.25rem;
}


/* ---------------------------------------------------------------------
   8. SECTION PAGES (Films, Brand content, ...)
   --------------------------------------------------------------------- */
.page-title {
  margin: clamp(1rem, 4vw, 2.5rem) 0 0;
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.empty-note {
  margin-top: 2rem;
  color: var(--muted);
}


/* ---------------------------------------------------------------------
   9. ABOUT
   --------------------------------------------------------------------- */
.about {
  display: grid;
  gap: 2rem;
  margin-top: clamp(1rem, 4vw, 2.5rem);
}

@media (min-width: 800px) {
  .about {
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
}

.about-drawing img {
  width: min(70%, 320px);
  height: auto;
  margin: 0 auto;
  filter: invert(1) brightness(0.92);   /* pencil drawing shown as light lines */
}

.about .page-title {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.about p {
  max-width: 62ch;
  margin: 0 0 1em;
}

.about h2.caps,
.about h3 {
  margin: 2.5rem 0 0.75rem;
}

.about ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

/* business details under the contact email */
.about .business-details {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--side) calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.site-footer a + a {
  margin-left: 1rem;
}

.site-footer a:hover {
  border-color: var(--text);
}

/* email + Instagram icon side by side */
.footer-contact {
  display: flex;
  align-items: center;
}

.site-footer .footer-icon {
  display: inline-flex;
  border-bottom: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.site-footer .footer-icon:hover {
  opacity: 1;
}

.footer-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.footer-note {
  flex-basis: 100%;
  font-size: 0.85rem;
}


/* ---------------------------------------------------------------------
   11. SMALL HELPERS
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* format line under a video title (Feature documentary, Music video ...) */
.video-info .video-type {
  color: var(--muted);
  font-size: 0.875rem;
}