:root {
  --gutter: 12px;
  --text: #111;
  --bg: #fff;
  --reel-bg: #e5e5e5;
  --small: 14px;
  --accent: #FF6B18;
}

/* PP Neue Montreal Medium, loaded from the project folder.
   woff2 is smallest; woff is a fallback for older browsers. */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("Neue%20Montreal/PPNeueMontreal-Medium.woff2") format("woff2"),
       url("Neue%20Montreal/PPNeueMontreal-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("Neue%20Montreal/PPNeueMontreal-Bold.woff2") format("woff2"),
       url("Neue%20Montreal/PPNeueMontreal-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--small);
  font-weight: 700;
  line-height: 1.15;
}

p { margin: 0; }

/* Layout: two equal columns. Text blocks at the top of each half,
   video fills the left half and sits at the bottom of the screen. */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "brand info"
    "reel  .";
  column-gap: var(--gutter);
  /* Minimum, not locked: a locked height made Chrome on iPhone zoom in after
     rotating. svh = visible area with toolbars showing; vh is the fallback. */
  min-height: 100vh;
  min-height: 100svh;
  /* The page extends under the iPhone's notch zones (viewport-fit=cover in
     index.html), so the enlarged video can reach every edge. Text keeps
     clear of those zones: padding is the gutter or the zone, whichever is bigger. */
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--gutter), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

/* Text blocks sit above the expanded video (z-index 10) */
.brand { grid-area: brand; position: relative; z-index: 20; text-align: center; }
.info  { grid-area: info; position: relative; z-index: 20; text-align: center; }
.reel  { grid-area: reel; align-self: end; }

/* Email, clock and notice in capitals, like the reference */
.info p + p { text-transform: uppercase; }

/* Notice replaces the clock line while Work/About is hovered or focused
   (or tapped on touch screens, via .show-notice from script.js) */
.notice { display: none; }
.info.show-notice .clock-line { display: none; }
.info.show-notice .notice { display: block; }
@media (hover: hover) {
  .info:has([data-in-progress]:hover) .clock-line { display: none; }
  .info:has([data-in-progress]:hover) .notice { display: block; }
}
.info:has([data-in-progress]:focus-visible) .clock-line { display: none; }
.info:has([data-in-progress]:focus-visible) .notice { display: block; }

/* Hover zone: 20px of padding around the title widens the detection area.
   Negative margin cancels it out so the title stays in place visually.
   Not positioned, so the statement measures from .brand instead. */
.hover-zone {
  display: inline-block;
  padding: 20px;
  margin: -20px;
  outline: none;
}

.title { transition: opacity 0.2s ease; }

/* Statement (h3): large bold headline just under the title, from the left
   page margin across the full screen width. Size scales with the window
   so line 1 breaks after "communication," like the reference. */
.statement {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  /* Full width between the page's left and right padding (see .page) */
  width: calc(100vw
    - max(var(--gutter), env(safe-area-inset-left))
    - max(var(--gutter), env(safe-area-inset-right)));
  margin: 0;
  font-size: clamp(24px, 3.1vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
  opacity: 0;
  pointer-events: none;   /* hovering the statement itself doesn't keep it open */
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* Mouse users: show on hover. Keyboard users: show on focus. */
@media (hover: hover) {
  .hover-zone:hover .title { opacity: 0.5; }
  .hover-zone:hover .statement { opacity: 1; }
}
.hover-zone:focus-visible .title,
.hover-zone.is-open .title { opacity: 0.5; }
.hover-zone:focus-visible .statement,
.hover-zone.is-open .statement { opacity: 1; }

/* About tagline: same look as the studio tagline, 8px below the info block.
   The info block ends at the right page margin, so right: 0 plus full width
   makes it start at the left page margin. */
.info p { transition: opacity 0.2s ease; }
.about-statement {
  left: auto;
  right: 0;
  font-size: clamp(12px, 1.55vw, 40px);   /* half the studio tagline */
}
@media (hover: hover) {
  .info:has(.about-link:hover) > p { opacity: 0.5; }
  .info:has(.about-link:hover) .about-statement { opacity: 1; }
}
.info:has(.about-link:focus-visible) > p,
.info.about-open > p { opacity: 0.5; }
.info:has(.about-link:focus-visible) .about-statement,
.info.about-open .about-statement { opacity: 1; }

/* Touch: an open tagline can be tapped to hide it */
.hover-zone.is-open .statement,
.info.about-open .about-statement { pointer-events: auto; }

/* Links and link-styled buttons look like plain text */
.link {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
/* Mouse only: phones keep :hover stuck after a tap until something else is touched */
@media (hover: hover) {
  .link:hover { color: var(--accent); }
}
/* Touch: accent while a link's content is open, or while the finger is on it */
@media (hover: none) {
  .link:active,
  .info.show-notice [data-in-progress],
  .info.about-open .about-link { color: var(--accent); }
}

/* Showreel: fills its column, 16:9, rounded corners */
#reel {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: var(--reel-bg);
  cursor: pointer;
}

/* Clicked/tapped video fills the browser window edge to edge, behind the
   text (class set by script.js). Cover crops whatever doesn't fit.
   dvh follows the phone's visible area as its toolbars show and hide. */
#reel.is-expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  z-index: 10;
}

/* Phones: name at top, video centered, info at bottom */
@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "brand"
      "reel"
      "info";
  }
  .reel { align-self: center; }
  /* Info block is at the bottom on phones, so the about tagline opens upward */
  .about-statement { top: auto; bottom: calc(100% + 8px); font-size: 15px; }
}