@import url('tokens.css');

/* Sitewide display face: Manifold Extd CF, the licensed face the brand
   guide calls for — served via Adobe Fonts web project (Regular/400 only,
   the only weight the site actually uses). Wide extended sans, hence the
   smaller sizes and looser leading relative to a standard-width face. */
:root {
  --font-display: 'manifold-extd-cf', 'Inter', sans-serif;
  --text-display-xl-size: clamp(1.75rem, 3.2vw, 3.25rem);
  --text-display-lg-size: clamp(1.35rem, 2.2vw, 2rem);
  --text-display-md-size: clamp(1.1rem, 1.7vw, 1.5rem);
  --text-display-sm-size: 1.05rem;
  --text-display-xl: 400 var(--text-display-xl-size)/1.22 var(--font-display);
  --text-display-lg: 400 var(--text-display-lg-size)/1.26 var(--font-display);
  --text-display-md: 400 var(--text-display-md-size)/1.32 var(--font-display);
  --text-display-sm: 400 var(--text-display-sm-size)/1.3 var(--font-display);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--text-body-md);
}

a { color: var(--text-body); }

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

[data-reveal] { opacity: 0; transition: opacity 700ms var(--ease-standard); }
[data-reveal].is-visible { opacity: 1; }
[data-reveal="hero"] { opacity: 1; }

@keyframes ck-scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Text link — signature underline-slide hover, no default blue link */
.textlink {
  position: relative;
  display: inline-block;
  color: var(--text-body);
  text-decoration: none;
  font-family: var(--font-body);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent-primary), var(--accent-primary));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size var(--duration-standard) var(--ease-standard),
              color var(--duration-standard) var(--ease-standard);
}
.textlink:hover { background-size: 100% 1px; }

/* Nav — quiet, in-flow, seated on the warm card surface for separation */
.site-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter-page);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.navbar__brand {
  font: var(--text-display-sm);
  letter-spacing: 0.04em;
  color: var(--text-body);
  text-decoration: none;
}

.navbar__links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.navbar__link {
  font: var(--text-nav);
  letter-spacing: var(--text-nav-letterspace);
  text-decoration: none;
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-standard);
}
.navbar__link:hover,
.navbar__link[aria-current="page"] { color: var(--accent-primary); }

/* Hero — full-bleed featured story */
.hero {
  position: relative;
  height: calc(100vh - 96px);
  min-height: 560px;
  overflow: hidden;
}

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17,18,19,0.15) 0%, rgba(17,18,19,0) 30%, rgba(17,18,19,0) 45%, rgba(17,18,19,0.78) 100%);
}

.hero__content {
  position: absolute;
  left: var(--gutter-page);
  right: var(--gutter-page);
  bottom: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.hero__copy { max-width: 720px; }

.hero__eyebrow {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--color-warm-white);
  opacity: 0.75;
  margin-bottom: 12px;
}

.hero__title {
  font: var(--text-display-xl);
  color: var(--color-warm-white);
  margin: 0 0 16px;
  max-width: 24ch;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero__tagline {
  font: var(--text-body-sm);
  color: var(--color-cool-gray);
  max-width: 46ch;
}

.hero__cta { padding-bottom: 6px; }

.hero__scrollcue {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 56px;
  background: var(--color-warm-white);
  opacity: 0.4;
  animation: ck-scroll-cue 2.6s var(--ease-standard) infinite;
  pointer-events: none;
}

/* Portrait hero — for a tall/portrait source image instead of a wide,
   full-bleed one. Flat dark background, image anchored right at full
   height (its own aspect ratio, not stretched), text block on the left. */
.hero--portrait {
  background: var(--surface-page);
}
.hero--portrait .hero__media {
  position: absolute;
  right: var(--gutter-page);
  bottom: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: bottom right;
}
.hero--portrait .hero__scrim { display: none; }
.hero--portrait .hero__content {
  display: block;
  right: auto;
  max-width: 50%;
}
.hero--portrait .hero__cta { margin-top: var(--space-5); padding-bottom: 0; }

@media (max-width: 860px) {
  .hero--portrait {
    height: auto;
    min-height: 0;
    padding: var(--space-7) var(--gutter-page) var(--space-8);
  }
  .hero--portrait .hero__media {
    position: static;
    width: 60%;
    max-width: 280px;
    height: auto;
    margin: 0 auto var(--space-6);
  }
  .hero--portrait .hero__content { position: static; max-width: none; }
  .hero--portrait .hero__scrollcue { display: none; }
}

/* Statement — one editorial line, lots of dark-space */
.statement {
  padding: var(--space-section) var(--gutter-page);
  max-width: var(--space-content-max);
  margin: 0 auto;
}

.statement__grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 640px) {
  .statement__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.statement__label {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 14px;
}

.statement__text {
  font: var(--text-display-md);
  color: var(--text-body);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}

/* Two gallery entry points — asymmetric, offset */
.work {
  padding: 0 var(--gutter-page) var(--space-section);
  max-width: var(--space-content-max);
  margin: 0 auto;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.entry {
  display: block;
  text-decoration: none;
  color: var(--text-body);
  transition: color var(--duration-standard) var(--ease-standard);
}
.entry:hover { color: var(--accent-primary); }

.entry--stories { grid-column: 1 / span 7; }
.entry--campaigns { grid-column: 8 / span 5; margin-top: var(--space-10); }

.entry__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-card);
  margin-bottom: 20px;
}

.entry__media img { width: 100%; height: 100%; object-fit: cover; }

/* For a photo whose own aspect ratio should drive the frame's shape,
   rather than being cropped or letterboxed into the fixed 16:10 box. */
.entry__media--auto { aspect-ratio: auto; }
.entry__media--auto img { width: 100%; height: auto; object-fit: initial; }

.entry__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-disabled);
  font: var(--text-body-sm);
}

.entry__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: 10px;
}

.entry__index {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
}

.entry__title {
  font: var(--text-display-lg);
  margin: 0;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entry__desc {
  font: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 16px;
}
.entry--stories .entry__desc { max-width: 52ch; }

.entry__list {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-disabled);
  line-height: 2;
}

/* Social strip — small frames linking out to Instagram */
.social-strip {
  padding: 0 var(--gutter-page) var(--space-section);
  max-width: var(--space-content-max);
  margin: 0 auto;
}

.social-strip__inner {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-7);
}

.social-strip__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.social-lede {
  font: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.social-tile {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-card);
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.social-tile:hover { opacity: 0.82; }

.social-tile img { width: 100%; height: 100%; object-fit: cover; }

.social-tile--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-disabled);
  font: var(--text-body-sm);
}

/* Listing pages (Campaigns, Stories, ...) — page hero title + alternating
   video/text rows. Shared by any page that lists entries this way. */
.page-hero-title {
  font: var(--text-display-xl);
  color: var(--text-body);
  margin: 0 0 var(--space-5);
  max-width: 16ch;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.page-lede {
  margin: 0 0 var(--space-6);
  font: var(--text-body-md);
  color: var(--text-muted);
  max-width: 52ch;
}

.page-note {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-5);
  max-width: 52ch;
}

.page-note p {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--text-muted);
}

.alt-rows {
  max-width: var(--space-content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-page) var(--space-section);
  display: grid;
  gap: var(--space-section);
}

.alt-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: end;
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-7);
}

.alt-row--a .alt-row__video { grid-column: 1 / span 8; }
.alt-row--a .alt-row__text { grid-column: 9 / span 4; }
.alt-row--b .alt-row__video { grid-column: 5 / span 8; }
.alt-row--b .alt-row__text { grid-column: 1 / span 4; }

.alt-row__video { grid-row: 1; }

.alt-row__posternote,
.media-caption {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-disabled);
  margin-top: 12px;
}

.alt-row__text {
  grid-row: 1;
  padding-bottom: var(--space-6);
}

.alt-row__index {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.alt-row__title {
  font: var(--text-display-md);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.alt-row__blurb {
  margin: 0 0 var(--space-4);
  font: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 40ch;
}

.alt-row__role {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-body);
}

.video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-card);
}

/* Reset for when the frame is a real <button> (clickable, has a video) */
button.video-frame {
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: opacity var(--duration-standard) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.video-frame:hover img {
  opacity: 0.85;
  transform: scale(1.015);
}

.video-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-disabled);
  font: var(--text-body-sm);
}

/* Photo gallery — a stills-only alt-row entry (no video), a small contact-sheet
   grid instead of one big frame. Static, not clickable. */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.photo-gallery__item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-card);
}

.photo-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}

/* Crosslink to the next page — a big display-weight link, not a button */
.next-link {
  max-width: var(--space-content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-page) var(--space-section);
}

.next-link__row {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-7);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.next-link__title {
  font: var(--text-display-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-body);
  transition: color var(--duration-standard) var(--ease-standard);
}
.next-link__title:hover { color: var(--accent-primary); }

@media (max-width: 860px) {
  .alt-row { display: block; }
  .alt-row__text { padding-bottom: 0; margin-top: var(--space-5); }
}

.caption {
  display: inline-block;
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Plain CSS triangle-in-circle — the brand's one interactive glyph, per the
   design system's iconography rules (no icon font, no SVG set, no emoji). */
.play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.play-badge__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-warm-white);
  background: rgba(17, 18, 19, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.video-frame:hover .play-badge__circle { border-color: var(--accent-primary); }

.play-badge__triangle {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--color-warm-white);
}

.tag {
  display: inline-flex;
  align-items: center;
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-tag);
  padding: 3px 8px;
}
.tag--teal { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.tag--rust { color: var(--accent-primary); border-color: var(--accent-primary); }

/* About page — title + portrait, bio copy, credits list, handoff */
.about-hero {
  padding: var(--space-section) var(--gutter-page) 0;
  max-width: var(--space-content-max);
  margin: 0 auto;
}

.about-hero__intro {
  margin-bottom: var(--space-7);
}
.about-hero__intro .page-hero-title { max-width: none; }

/* flow-root contains the float's height, so the section background/next
   sibling doesn't ignore it — the modern, margin-safe clearfix */
.about-hero__body {
  display: flow-root;
  padding-bottom: var(--space-section);
}

.about-portrait-float {
  float: right;
  width: 340px;
  max-width: 42%;
  margin: 0 0 var(--space-6) var(--space-7);
}

.about-bio { max-width: 640px; }
.about-bio p { margin: 0 0 var(--space-5); font: var(--text-body-md); color: var(--text-body); }
.about-bio p:last-child { margin-bottom: 0; }

.about-portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-card);
}
.about-portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

.credits {
  padding: var(--space-section) var(--gutter-page);
  max-width: var(--space-content-max);
  margin: 0 auto;
}

.credits__grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: start;
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-7);
}

.credit-list {
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.credit-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 14px;
}

.credit-row__title { font: var(--text-body-md); color: var(--text-body); }

.credit-row__role {
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letterspace);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.handoff {
  padding: 0 var(--gutter-page) var(--space-section);
  max-width: var(--space-content-max);
  margin: 0 auto;
}

@media (max-width: 860px) {
  .about-portrait-float { float: none; width: 100%; max-width: 360px; margin: 0 0 var(--space-6); }
}

@media (max-width: 640px) {
  .credits__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .credit-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Contact page — one quiet centered section, no form */
.contact-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-section) var(--gutter-page);
  max-width: var(--space-content-max);
  margin: 0 auto;
  width: 100%;
}
.contact-hero .statement__grid { width: 100%; }
.contact-hero .page-hero-title { max-width: 18ch; }
.contact-hero .page-lede { max-width: 48ch; margin-bottom: var(--space-7); }

.contact-list {
  display: grid;
  gap: 18px;
  max-width: 480px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 16px;
}

.contact-row__value {
  font: var(--text-body-md);
  color: var(--text-body);
}

/* Video modal — click-to-play lightbox. Simple opacity fade only, no
   scale-pop, per the brand's understated motion language. */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--gutter-page);
  background: rgba(17, 18, 19, 0.92);
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.video-modal.is-open {
  display: flex;
  opacity: 1;
}

.video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: var(--color-charcoal-900);
}

/* Episode-picker mode — series with more than one video show a list first;
   the dialog drops its fixed 16:9 shape while the list is showing. */
.video-modal__dialog.is-list {
  aspect-ratio: unset;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}

.video-modal__frame {
  width: 100%;
  height: 100%;
}

.video-modal__episodes {
  padding: var(--space-6);
}

.video-modal__episodes-caption {
  margin-bottom: var(--space-4);
}

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

.episode-list__item + .episode-list__item {
  border-top: 1px solid var(--border-hairline);
}

.episode-list__button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-4) 0;
  color: var(--text-body);
  font: var(--text-body-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.episode-list__button:hover { color: var(--accent-primary); }

.episode-list__index {
  font: var(--text-caption);
  color: var(--text-muted);
  margin-right: var(--space-4);
}

.video-modal__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  padding: 0;
  font: var(--text-display-sm);
  color: var(--color-warm-white);
  cursor: pointer;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-standard);
}
.video-modal__close:hover { color: var(--accent-primary); }

.video-modal__back {
  position: absolute;
  top: -40px;
  left: 0;
  color: var(--color-warm-white);
}
.video-modal__back[hidden] { display: none; }

/* Footer — quiet, text-only */
.site-footer {
  background: var(--surface-card);
  padding: var(--space-8) var(--gutter-page) var(--space-7);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__copy {
  font: var(--text-body-sm);
  color: var(--text-muted);
}

.site-footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.site-footer__email {
  font: var(--text-body-sm);
  color: var(--text-body);
  text-decoration: none;
}
.site-footer__email:hover { color: var(--accent-primary); }

.site-footer__social {
  font: var(--text-body-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer__social:hover { color: var(--accent-primary); }

@media (max-width: 860px) {
  .work__grid { display: block; }
  .entry--stories, .entry--campaigns { grid-column: unset; margin-top: 0; }
  .entry--campaigns { margin-top: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scrollcue { animation: none; }
  [data-reveal] { transition: none; opacity: 1; }
}