:root {
  --paper: #fff;
  --black: #000;
  /*
    Theo, 2026-09-20: the page runs black with white type all the way down, and
    only the closing grid stays white. So black is the default here and the white
    is the exception — see .closing-grid. (Before this the page was white with
    #363638 type, and the greys were #c7c7c8 and #efefef.)
  */
  font-family: akzidenz-grotesk-next-pro, "Helvetica Neue", Arial, sans-serif;
  color: var(--paper);
  background: var(--black);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }

.home-mark {
  position: fixed;
  z-index: 4;
  left: 15px;
  top: 50%;
  width: 39px;
  height: 39px;
  transform: translateY(-50%);
  border: 1px solid var(--theo-red);
  display: grid;
  place-items: center;
  mix-blend-mode: difference;
}

.home-mark span { width: 14px; height: 14px; border-top: 1px solid var(--theo-red); border-left: 1px solid var(--theo-red); transform: rotate(-45deg) translate(2px, 2px); }

.hero-film { min-height: 81vh; padding: 3px; background: var(--black); }
.hero-film video { width: 100%; height: calc(81vh - 6px); object-fit: cover; background: var(--black); }

.title-panel { min-height: 76vh; padding: clamp(78px, 13vw, 205px) 5vw 10vw; display: grid; align-content: end; background: var(--black); }
.role, .eyebrow { margin: 0; font-size: clamp(10px, .94vw, 16px); line-height: 1.1; letter-spacing: -.025em; font-weight: 400; }
.title-panel h1 { max-width: 11.8ch; margin: 12px 0 0; font-size: clamp(65px, 10.2vw, 172px); font-weight: 700; line-height: .76; letter-spacing: -.085em; }
.title-panel h1 span { display: block; }

.brief-panel { min-height: 122vh; padding: 11vw 5vw 9vw; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.35fr); gap: 8vw; align-items: center; background: var(--black); }
.brief-copy { max-width: 530px; }
.brief-copy .eyebrow, .chapter-intro .eyebrow, .pillar-copy .eyebrow { margin-bottom: clamp(28px, 4vw, 70px); }
.brief-copy h2, .chapter-intro h2, .pillar-copy h2 { margin: 0 0 clamp(28px, 5vw, 76px); font-size: clamp(52px, 8.1vw, 130px); line-height: .77; letter-spacing: -.09em; font-weight: 700; }
h2 i { font-family: Georgia, "Times New Roman", serif; font-size: .87em; font-weight: 400; letter-spacing: -.08em; }
.brief-copy > p:not(.eyebrow), .chapter-intro > p:not(.eyebrow), .pillar-copy > p:not(.eyebrow) { max-width: 39ch; margin: 0 0 1.35em; font-size: clamp(17px, 1.55vw, 25px); line-height: 1.14; letter-spacing: -.035em; }
.brief-copy > p:last-child { max-width: 43ch; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.35; }
.proposal-film { width: min(100%, 1050px); justify-self: end; }
.proposal-film video { width: 100%; max-height: 76vh; object-fit: cover; }

.chapter { background: var(--black); }
.first-chapter { padding: 13vw 5vw 11vw; display: grid; grid-template-columns: minmax(240px, .65fr) minmax(450px, 1.4fr); gap: 9vw; align-items: start; }
.chapter-intro { max-width: 510px; }
.chapter-intro h2, .pillar-copy h2 { font-size: clamp(48px, 6vw, 104px); margin-bottom: clamp(26px, 3.7vw, 58px); }
.chapter-intro > p:not(.eyebrow), .pillar-copy > p:not(.eyebrow) { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.35; }
.arrival-grid { display: grid; grid-template-columns: 1.1fr .78fr; gap: 11px; align-items: start; }
.asset { overflow: hidden; background: var(--black); }
.asset img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.asset:hover img { transform: scale(1.025); }
.concept { grid-row: span 2; aspect-ratio: .76; }
.portrait { aspect-ratio: .78; }
.pour { aspect-ratio: 1.04; }

.pillar-section { padding: 8vw 5vw 12vw; display: grid; grid-template-columns: 1fr 1.1fr .72fr; grid-template-rows: auto auto; gap: 11px; align-items: end; background: var(--black); }
.pillar-copy { grid-row: span 2; padding: 9vw 3vw 4vw 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.pillar-film { min-height: 46vw; }
.pillar-film video { width: 100%; height: 100%; object-fit: cover; }
.room { aspect-ratio: 1.35; }
.scene { grid-column: 2; aspect-ratio: 1.18; }

.taking-home { padding: 13vw 5vw; display: grid; grid-template-columns: 1.04fr .76fr .8fr; gap: 8vw; align-items: center; }
.taking-home .chapter-intro { order: 2; }
.story { aspect-ratio: .96; }
.artist { aspect-ratio: .75; margin-top: 14vw; }

.closing-grid { padding: 0 5vw 12vw; display: grid; grid-template-columns: 1.25fr .86fr 1.1fr; gap: 11px; align-items: start; background: var(--paper); }
.closing-grid .asset { background: var(--paper); }
.treatment { aspect-ratio: 1.18; }
.bottle { aspect-ratio: .78; margin-top: 16vw; }
.event { aspect-ratio: 1.03; margin-top: 5vw; }
.closing-film { margin: 0 3px 3px; background: var(--black); }
.closing-film video { width: 100%; min-height: 73vh; object-fit: cover; }

@media (max-width: 760px) {
  .home-mark { left: 10px; width: 33px; height: 33px; }
  .hero-film { min-height: 65svh; padding: 2px; }
  .hero-film video { height: calc(65svh - 4px); }
  .title-panel { min-height: 58svh; padding: 45px 20px 55px; }
  .role, .eyebrow { font-size: 10px; }
  .title-panel h1 { max-width: none; margin-top: 13px; font-size: clamp(49px, 13.5vw, 84px); line-height: .79; }
  .brief-panel { min-height: auto; padding: 22vw 20px 14vw; display: block; }
  .brief-copy h2 { font-size: clamp(55px, 16vw, 88px); }
  .brief-copy > p:not(.eyebrow) { font-size: 20px; }
  .brief-copy > p:last-child { font-size: 15px; }
  .proposal-film { margin-top: 15vw; }
  .proposal-film video { max-height: none; aspect-ratio: .87; object-fit: cover; }
  .first-chapter { padding: 19vw 20px 15vw; display: block; }
  .chapter-intro h2, .pillar-copy h2 { font-size: clamp(54px, 15vw, 82px); }
  .chapter-intro > p:not(.eyebrow), .pillar-copy > p:not(.eyebrow) { font-size: 17px; }
  .arrival-grid { margin-top: 15vw; grid-template-columns: 1.07fr .93fr; gap: 6px; }
  .pillar-section { padding: 14vw 10px; grid-template-columns: 1.15fr .85fr; gap: 6px; }
  .pillar-copy { grid-column: 1 / -1; grid-row: auto; padding: 10vw 10px 14vw; }
  .pillar-film { min-height: 74vw; }
  .room { aspect-ratio: .82; }
  .scene { grid-column: 1 / -1; aspect-ratio: 1.1; }
  .taking-home { padding: 18vw 20px 14vw; grid-template-columns: 1fr; gap: 14vw; }
  .taking-home .chapter-intro { order: 0; }
  .story { aspect-ratio: 1; }
  .artist { width: 69%; justify-self: end; margin-top: 0; }
  .closing-grid { padding: 0 10px 15vw; grid-template-columns: 1fr 1fr; gap: 6px; }
  .treatment { grid-column: 1 / -1; }
  .bottle { margin-top: 0; }
  .event { margin-top: 16vw; }
  .closing-film { margin: 0 2px 2px; }
  .closing-film video { min-height: 55svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .asset img { transition: none; }
}

/* Embedded in the Profile page's glass tray (?embed): only the page itself is transparent,
   so the glass shows at the edges; every section keeps its own solid colour. (Sections used
   to be faded to 85% here, which greyed the whites — removed 2026-09-20 at Theo's request.) */
html.is-embed, html.is-embed body { background: transparent; }
.is-embed .home-mark, .is-embed .site-footer { display: none; }