@font-face {
  font-family: "Gilda Display";
  src: url("fonts/gilda-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

/* The sky sets this on :root; the registered type lets the flip from ivory to navy fade. */
@property --sky-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef0f2;
}

:root {
  --ivory: #eef0f2;
  --navy: #0e1a3d;
  --night: #0a1330;
  --sun-gold: #f2b45c;
  --display: "Gilda Display", "Didot", "Bodoni 72", serif;
  --sans: "Jost", "Futura", "Century Gothic", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gl: 128px;
  --gr: clamp(24px, 5vw, 80px);
  --cg: clamp(16px, 2vw, 32px);
  --row-gap: clamp(88px, 14vh, 168px);
  --ink: var(--navy);
  transition: --sky-ink 0.7s var(--ease);
  scrollbar-color: color-mix(in srgb, var(--sky-ink) 50%, transparent) transparent;
  scrollbar-width: thin;
  background: #0f1d45;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  caret-color: var(--sun-gold);
  overflow-x: clip;
}

::selection { background: rgba(242, 180, 92, 0.6); color: var(--navy); }

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

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

h1,
h2,
h3,
h4 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }

p,
ul,
ol,
blockquote,
figure { margin: 0; }

:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gr);
  top: 16px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--ivory);
  color: var(--navy);
  transform: translateY(-160%);
}

.skip:focus-visible { transform: none; }

/* Sky ground: one fixed canvas, painted by main.js. Each section carries its own sky as a CSS fallback. */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
}

.sky-live .sky { display: block; }

main,
.foot { position: relative; z-index: 1; }

.hero,
.sec,
.foot { color: var(--ink); }

.sky-hero,
.sky-editorial { --ink: var(--ivory); background: linear-gradient(#0f1d45, #1d3367 60%, #2f4d8d); }
.sky-published { --ink: var(--ivory); background: linear-gradient(#12224f, #24407a 60%, #3a5896); }
.sky-brands { background: linear-gradient(#6c98d4, #a9c6e8 55%, #e3ecf5); }
.sky-food { background: linear-gradient(#a6c4e6, #e4edf6 50%, #f8f9f7); }
.sky-people { background: linear-gradient(#95b5dc, #e2eaf1 50%, #f6eedf); }
.sky-also { background: linear-gradient(#8eaed6, #e5e6e4 50%, #f5e3c4); }
.sky-about { background: linear-gradient(#8ea8cf, #ebdfcd 50%, #f4d3a2); }
.sky-kind-words { background: linear-gradient(#9fa9c6, #efd6b2 50%, #f1c27f); }
.sky-clients { background: linear-gradient(#b4abbc, #f1cb94 50%, #eeb15e); }
.sky-inquiry { background: linear-gradient(#aaa1b7, #dd9443 50%, #f2b45c); }
.sky-footer { background: linear-gradient(#a39ab2, #d98a3d 50%, #e8a24f); }

.sky-live :is(.hero, .sec, .foot) { --ink: var(--sky-ink); background: none; }

/* Without the sky script, the afterglow sits on a still horizon at 88vh, with the hidden sun glowing through it. */
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28vh;
  background:
    linear-gradient(rgba(135, 99, 56, 0), rgba(152, 112, 63, 0.8) 30%, rgba(233, 180, 106, 0.88) 56.8%, #1b2f63 57.2%, #0f1d45);
}

/* The band brightens toward the sun's place on the horizon, fading upward into the sky. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 12vh;
  height: 12vh;
  background: linear-gradient(90deg, rgba(255, 199, 115, 0) calc(var(--sun-x, 94%) - 30%), rgba(255, 210, 140, 0.7) var(--sun-x, 94%), rgba(255, 199, 115, 0) calc(var(--sun-x, 94%) + 30%));
  mask-image: linear-gradient(transparent, #000);
}

.sky-live .hero::before,
.sky-live .hero::after { display: none; }

/* Sun elevation readout: the rail's 0° tick sits on the sky's horizon at 88vh, so −4° reads on the water below it. */
.readout { display: none; }

.sky-live .readout {
  position: fixed;
  left: 32px;
  bottom: calc(12vh - 46vh * 6 / 66);
  z-index: 2;
  display: block;
  width: 84px;
  height: 46vh;
  color: var(--sky-ink);
  pointer-events: none;
  --pos: 0.03;
}

.readout-rail {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, currentColor 45%, transparent);
}

.readout-horizon {
  position: absolute;
  left: -5px;
  bottom: calc(6 / 66 * 100%);
  width: 11px;
  height: 1px;
  background: currentColor;
}

.readout-sun {
  position: absolute;
  left: -5px;
  bottom: calc(var(--pos) * 100%);
  width: 11px;
  height: 11px;
  margin-bottom: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #ffe7b8, var(--sun-gold) 60%, #d98a35);
}

.readout-value {
  position: absolute;
  left: 22px;
  bottom: calc(var(--pos) * 100%);
  display: grid;
  transform: translateY(50%);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.readout-deg { font-family: var(--display); font-size: 1.375rem; }

.readout-phase { font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 400; }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: clamp(120px, 26vh, 260px) var(--gr) 0 var(--gl); }

.all-concepts {
  position: absolute;
  top: 18px;
  right: var(--gr);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.all-concepts:hover span { text-decoration: underline; }

.hero-copy { position: relative; z-index: 2; max-width: 44vw; }

.hero h1 { font-size: clamp(3.25rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: 0.06em; text-transform: uppercase; }

.hero h1 span { display: block; }

.role {
  margin-top: 28px;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-angle { display: none; }

/* Set like the inquiry's mail link, resting on the afterglow above the horizon. */
.cta {
  position: absolute;
  left: var(--gl);
  bottom: 24vh;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-family: var(--display);
  font-size: 1.625rem;
  line-height: 1.2;
  text-decoration: none;
}

.ico { flex: none; transition: transform 0.5s var(--ease); }

:is(.cta, .mail):hover .ico { transform: translateX(5px); }

.hero-fig { position: absolute; right: 12vw; bottom: 0; z-index: 1; }

/* Cut flush at the fold, so the gown runs off the bottom of the first screen. */
.hero-fig .frame { height: 92vh; width: auto; }

/* Sections */
.sec { padding-top: clamp(120px, 20vh, 240px); }

.wrap { padding-left: var(--gl); padding-right: var(--gr); }

.sec-head { display: grid; justify-items: start; gap: 12px; }

.sec-head h2 { max-width: 20ch; font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.08; }

.angle,
.hero-angle,
.foot-angle {
  flex: none;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.angle-phase { margin-left: 0.5em; }

.lede { max-width: 44ch; margin-top: 28px; font-size: 1.25rem; line-height: 1.55; }

.pull {
  max-width: 28ch;
  margin-top: 40px;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.4;
  text-wrap: balance;
}

/* Photo rows */
.rows {
  display: grid;
  row-gap: var(--row-gap);
  margin-top: clamp(64px, 10vh, 120px);
  padding-left: var(--gl);
  padding-right: var(--gr);
}

.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; }

.row-plate { margin-right: calc(-1 * var(--gr)); }

.row-plate .fig { grid-column: 1 / -1; }
.row-plate figcaption { padding-right: var(--gr); }
.row-lead .fig:nth-child(1) { grid-column: 1 / 8; }
.row-lead .fig:nth-child(2) { grid-column: 9 / 13; align-self: end; }
.row-pair .fig:nth-child(1) { grid-column: 2 / 7; }
.row-pair .fig:nth-child(2) { grid-column: 8 / 12; margin-top: 16vh; }
.row-trio .fig:nth-child(1) { grid-column: 1 / 5; }
.row-trio .fig:nth-child(2) { grid-column: 5 / 9; margin-top: 12vh; }
.row-trio .fig:nth-child(3) { grid-column: 9 / 13; margin-top: 5vh; }
.row-quad .fig:nth-child(1) { grid-column: 1 / 4; }
.row-quad .fig:nth-child(2) { grid-column: 4 / 7; }
.row-quad .fig:nth-child(3) { grid-column: 7 / 10; }
.row-quad .fig:nth-child(4) { grid-column: 10 / 13; }
.row-duo .fig:nth-child(1) { grid-column: 1 / 7; }
.row-duo .fig:nth-child(2) { grid-column: 7 / 13; margin-top: 10vh; }
.row-single .fig { grid-column: 3 / 11; }
.row-solo .fig { grid-column: 6 / 11; }

.shot { display: block; text-decoration: none; }

.frame { position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); }

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

.frame.is-cropped img {
  position: absolute;
  left: var(--il);
  top: var(--it);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}

/* A glint of low sun crosses the print on hover. */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 230, 182, 0.26) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}

.shot:is(:hover, :focus-visible) .frame::after { transform: translateX(130%); transition: transform 1.2s var(--ease); }

figcaption { display: grid; gap: 2px; max-width: 56ch; margin-top: 14px; }

.cap-t { font-family: var(--display); font-size: 1.0625rem; line-height: 1.35; }

.cap-c { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.02em; }

/* Published in */
.pubs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  row-gap: var(--row-gap);
  margin-top: clamp(64px, 10vh, 120px);
}

.pub:nth-child(1) { grid-column: 1 / 8; }
.pub:nth-child(2) { grid-column: 9 / 13; align-self: end; }
.pub:nth-child(3) { grid-column: 2 / 6; }
.pub:nth-child(4) { grid-column: 7 / 13; margin-top: 14vh; }

.pub-text { margin-top: 22px; max-width: 52ch; }

.pub h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }

.pub-work { margin-top: 6px; }

.pub-credit { margin-top: 10px; font-size: 0.8125rem; font-weight: 400; line-height: 1.55; }

/* Design, video and websites */
.also-group { margin-top: clamp(72px, 11vh, 128px); }

.also-group h3 { margin-bottom: 28px; font-size: clamp(1.5rem, 2.2vw, 2rem); }

.boards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--cg); }

.reel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px var(--cg);
  padding: 0;
  list-style: none;
}

.reel-link { display: grid; gap: 4px; text-decoration: none; }

.reel-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 16 / 9;
}

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

.reel-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 230, 182, 0.26) 50%, transparent 62%);
  transform: translateX(-130%);
}

.reel-link:is(:hover, :focus-visible) .reel-thumb::after { transform: translateX(130%); transition: transform 1.2s var(--ease); }

.reel-link:hover .reel-t { text-decoration: underline; }

.reel-t { font-family: var(--display); font-size: 1.0625rem; line-height: 1.35; }

.reel-c { font-size: 0.8125rem; font-weight: 400; }

.reel-more { max-width: 70ch; margin-top: 48px; font-size: 0.9375rem; }

/* About */
.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  row-gap: var(--row-gap);
  margin-top: clamp(64px, 10vh, 120px);
}

.about-photo { grid-column: 1 / 5; }
.about-text { grid-column: 6 / 12; max-width: 62ch; }
.about-set { grid-column: 2 / 8; }

.about-text p + p,
.about-text h3 + p { margin-top: 20px; }

.about-text h3 { margin-top: 48px; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }

.edu { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.04em; }

.about-text .edu { margin-top: 32px; }

.pull-sm { margin-top: 48px; font-size: clamp(1.5rem, 2.4vw, 2.125rem); }

/* Kind words */
.words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vh, 80px) clamp(32px, 6vw, 112px);
  margin-top: clamp(64px, 10vh, 112px);
  padding: 0;
  list-style: none;
}

.words li { padding-top: 28px; border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent); }

.words blockquote p { max-width: 40ch; font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; }

.who { margin-top: 18px; font-weight: 400; font-size: 0.9375rem; }

.who span { margin-left: 0.75em; font-weight: 300; }

/* Golden hour: body copy steps up a weight on the warm ground. */
:is(.sky-clients, .sky-inquiry, .foot) { font-weight: 400; }

/* Clients */
.clients {
  display: flex;
  flex-wrap: wrap;
  max-width: 64rem;
  margin-top: clamp(56px, 8vh, 96px);
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  line-height: 1.6;
}

/* The dot rides on the end of each name, so a wrapped line never opens with one. */
.clients li { white-space: nowrap; }

.clients li:not(:last-child)::after { content: "\00b7"; margin: 0 0.45em; }

/* Inquiry */
.sec-inquiry { padding-bottom: clamp(96px, 14vh, 160px); }

.sec-inquiry .sec-head h2 { max-width: 24ch; }

.inquiry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  row-gap: 72px;
  margin-top: clamp(56px, 8vh, 96px);
}

.inq-main { grid-column: 1 / 8; }
.invites { grid-column: 9 / 13; }

.inq-message { max-width: 58ch; font-size: 1.1875rem; line-height: 1.6; }

.mail {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  margin-top: 48px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-family: var(--display);
  font-size: clamp(1.3rem, 5.4vw, 3rem);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}

:is(.cta, .mail) .ico { width: 0.8em; height: 0.8em; }

.asks { margin-top: 56px; }

.asks h3,
.invites h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.25; }

.asks ol { display: grid; gap: 6px; margin-top: 18px; padding-left: 1.6em; }

.asks li::marker { font-family: var(--display); }

.social { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 48px; }

.social a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; }

.invites ul {
  display: grid;
  gap: 36px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.invites h4 { font-size: 1.25rem; line-height: 1.3; }

.invites p { margin-top: 8px; font-size: 1rem; line-height: 1.6; }

/* Footer */
.foot { padding: clamp(96px, 16vh, 180px) 0 48px; }

.foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 48px; }

.foot-name { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; }

.foot-copy { flex: 1 1 32ch; max-width: 64ch; font-size: 0.875rem; font-weight: 400; }

/* Viewer */
.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--night);
  color: var(--ivory);
  --ink: var(--ivory);
}

.viewer::backdrop { background: rgba(8, 14, 36, 0.85); }

.viewer-stage { display: grid; place-items: center; height: 100%; padding: 72px 88px 32px; }

.viewer-figure { display: grid; justify-items: center; gap: 18px; }

.viewer-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 0.6667);
  width: min(calc(100vw - 176px), calc((100dvh - 230px) * var(--ar, 0.6667)));
}

.viewer-img { position: absolute; max-width: none; object-fit: cover; }

.viewer-cap {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 72ch;
  margin: 0;
  text-align: center;
}

.viewer-title { font-family: var(--display); font-size: 1.25rem; }

.viewer-credit,
.viewer-count { font-size: 0.8125rem; font-weight: 400; }

.viewer-count { font-variant-numeric: tabular-nums; }

.v-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ivory) 50%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.v-btn:hover { background: color-mix(in srgb, var(--ivory) 14%, transparent); }

.v-close { top: 16px; right: 16px; }
.v-prev { left: 20px; top: 50%; margin-top: -24px; }
.v-next { right: 20px; top: 50%; margin-top: -24px; }

/* Between phone and desktop the readout steps aside; headings carry the angle. */
@media (min-width: 1024px) {
  .sky-live .sec-head .angle { display: none; }
}

@media (max-width: 1023px) {
  :root { --gl: var(--gr); }
  .sky-live .readout { display: none; }
}

@media (max-width: 899px) {
  .hero { padding-top: 104px; }

  .hero-copy { max-width: none; }

  .hero-angle { display: block; margin-top: 14px; }

  .cta { position: relative; left: auto; bottom: auto; margin-top: 28px; }

  .hero-fig { right: var(--gr); }

  .hero-fig .frame { height: 48svh; }
}

@media (max-width: 759px) {
  :root { --gr: 20px; --row-gap: 72px; }

  .hero { --sun-x: 10%; }

  .row { row-gap: 40px; }

  .row .fig { grid-column: 1 / -1 !important; margin-top: 0 !important; }

  .row-plate { margin-left: calc(-1 * var(--gr)); }

  .row-plate figcaption { padding: 0 var(--gr); }

  .row-quad .fig:nth-child(odd),
  .row-trio .fig:nth-child(2) { grid-column: 1 / 7 !important; }

  .row-quad .fig:nth-child(even),
  .row-trio .fig:nth-child(3) { grid-column: 7 / 13 !important; }

  .pubs,
  .about,
  .inquiry { grid-template-columns: minmax(0, 1fr); }

  .pub:nth-child(n),
  .about > *,
  .inq-main,
  .invites { grid-column: 1 / -1; margin-top: 0; }

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

  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--cg); }

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

  .viewer-stage { padding: 72px 16px 88px; }

  .viewer-frame { width: min(calc(100vw - 32px), calc((100dvh - 290px) * var(--ar, 0.6667))); }

  .v-prev,
  .v-next { top: auto; bottom: 20px; margin-top: 0; }

  .v-prev { left: calc(50% - 64px); }
  .v-next { right: calc(50% - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .frame::after,
  .reel-thumb::after { display: none; }

  .ico { transition: none; }
}