:root {
  --paper: #f2f1ed;
  --ink: #111111;
  --line: rgba(17,17,17,.23);
  --accent: #f04b43;
  --pad: clamp(18px, 3vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.22; }
a { color: inherit; text-decoration: none; }
.serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.nav { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 18px var(--pad); mix-blend-mode: difference; color: #fff; pointer-events: none; }
.nav a,.nav button { pointer-events: auto; }
.wordmark { width: max-content; font-size: 16px; font-weight: 900; line-height: .78; letter-spacing: -.05em; }
.nav nav { display: flex; gap: 24px; text-transform: lowercase; font-size: 14px; }
.nav nav a { position: relative; }
.nav nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: currentColor; transition: right .25s ease; }
.nav nav a:hover::after,.nav nav a:focus-visible::after { right: 0; }
.menu { display: none; justify-self: end; border: 0; padding: 0; color: inherit; background: none; font: inherit; }
.hero { min-height: 100svh; position: relative; display: grid; grid-template-columns: 1.3fr .7fr; grid-template-rows: auto 1fr auto; gap: 20px; padding: 92px var(--pad) 28px; overflow: hidden; }
.eyebrow { grid-column: 1; align-self: start; margin: 0; font-size: clamp(24px, 3vw, 48px); line-height: .92; }
.hero h1 { grid-column: 1 / -1; align-self: center; margin: 0; font-size: clamp(82px, 17vw, 270px); line-height: .73; letter-spacing: -.082em; font-weight: 950; }
.hero-note { position: absolute; right: var(--pad); top: 80px; margin: 0; text-align: right; font-size: clamp(22px, 3vw, 46px); line-height: .93; }
.hero-copy { grid-column: 2; justify-self: end; align-self: end; max-width: 410px; padding-bottom: 4px; }
.hero-copy span { display: block; margin-bottom: 15px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.hero-copy p { margin: 0; font-size: clamp(22px, 2.3vw, 36px); letter-spacing: -.03em; }
.hero-mark { position: absolute; z-index: -1; left: 51%; top: 14%; width: min(32vw, 450px); aspect-ratio: 1; transform: rotate(9deg); }
.hero-mark span { position: absolute; display: block; width: 29%; aspect-ratio: 1; border-radius: 10%; background: var(--accent); }
.hero-mark span:nth-child(1) { top: 0; left: 35%; }
.hero-mark span:nth-child(2) { top: 35%; left: 0; }
.hero-mark span:nth-child(3) { top: 35%; left: 35%; border-radius: 50%; }
.hero-mark span:nth-child(4) { top: 35%; right: 0; }
.hero-mark span:nth-child(5) { bottom: 0; left: 35%; }
.scroll-cue { grid-column: 1; align-self: end; width: max-content; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.scroll-cue span { display: inline-block; margin-left: 9px; transition: transform .2s; }
.scroll-cue:hover span { transform: translateY(4px); }
.vision,.formats { padding: 46px var(--pad) 100px; border-top: 1px solid var(--line); }
.section-index { margin-bottom: 70px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.vision-statement { display: grid; grid-template-columns: 1.35fr .65fr; gap: 6vw; align-items: end; }
.vision h2,.formats h2 { margin: 0; font-size: clamp(60px, 10.5vw, 180px); line-height: .78; letter-spacing: -.07em; }
.vision-statement > p { max-width: 490px; margin: 0 0 8px; font-size: clamp(26px, 3.1vw, 48px); line-height: 1; }
.vision-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 5vw; margin-top: 115px; padding-top: 24px; border-top: 1px solid var(--line); }
.vision-grid p { margin: 0; max-width: 440px; }
.vision-grid .lead { font-size: clamp(26px, 3vw, 45px); line-height: 1.04; letter-spacing: -.035em; }
.formats { background: var(--ink); color: var(--paper); }
.formats-head { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-bottom: 60px; }
.formats-head .section-index { margin-bottom: 40px; }
.formats-head > p { justify-self: end; margin: 0; text-align: right; font-size: clamp(26px, 3vw, 48px); line-height: .95; }
.format-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(242,241,237,.35); border-left: 1px solid rgba(242,241,237,.35); }
.format-card { min-height: 470px; display: grid; grid-template-columns: 1fr .9fr; gap: 24px; padding: clamp(22px,3vw,42px); border-right: 1px solid rgba(242,241,237,.35); border-bottom: 1px solid rgba(242,241,237,.35); overflow: hidden; }
.format-card.wide { grid-column: 1 / -1; grid-template-columns: .55fr 1fr; }
.card-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.number { font-size: 13px; font-weight: 700; }
.format-card h3 { margin: 10px 0 14px; font-size: clamp(36px,4vw,66px); line-height: .83; letter-spacing: -.055em; }
.format-card p { max-width: 400px; margin: 0 0 20px; }
.format-card .meta { font-size: 14px; font-weight: 700; }
.format-card em { margin-top: auto; font-family: Georgia,serif; font-size: 30px; }
.icon { position: relative; align-self: center; justify-self: stretch; aspect-ratio: 1; max-width: 330px; color: var(--accent); }
.vinyl { border: 54px solid currentColor; border-radius: 50%; }
.vinyl::before { content: ''; position: absolute; width: 16px; aspect-ratio: 1; left: 50%; top: 50%; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%); }
.vinyl i { position: absolute; width: 10px; height: 58%; right: -34px; top: -38px; background: currentColor; transform: rotate(18deg); transform-origin: top; }
.vinyl b { position: absolute; width: 48px; height: 24px; right: -19px; bottom: 10px; background: currentColor; transform: rotate(-42deg); }
.still { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.still i { height: 25%; border-radius: 0 0 999px 999px; background: currentColor; }
.eye::before { content:''; position:absolute; inset: 25% 0; border-radius: 100% 0; background: currentColor; transform: rotate(45deg); }
.eye i { position:absolute; z-index:2; width: 33%; aspect-ratio:1; left:50%; top:50%; border-radius:50%; background:var(--ink); border:20px solid var(--paper); transform:translate(-50%,-50%); }
.eye b { position:absolute; left:10%; right:10%; top:5%; height:10%; background:repeating-radial-gradient(circle,currentColor 0 5px,transparent 6px 15px); }
.quote { display:flex; align-items:center; justify-content:center; font-family:Arial,sans-serif; font-size: clamp(220px,28vw,430px); font-weight:900; line-height:.55; }
.frame { border: 28px solid currentColor; aspect-ratio: .92; max-width: 275px; }
.frame::before { content:''; position:absolute; width:16px; height:16px; left:50%; top:-56px; border-radius:50%; background:currentColor; }
.frame::after { content:''; position:absolute; width:84px; height:4px; left:50%; top:-32px; background:currentColor; transform:translateX(-50%); }
.frame i { position:absolute; width:28%; aspect-ratio:1; left:18%; top:20%; border-radius:50%; background:currentColor; }
.frame b { position:absolute; width:48%; aspect-ratio:1; right:12%; bottom:12%; background:linear-gradient(135deg,transparent 49%,currentColor 50%); }
.table i { position:absolute; width:42%; aspect-ratio:1; left:29%; top:29%; border-radius:50%; background:currentColor; }
.table i:nth-child(2),.table i:nth-child(3),.table i:nth-child(4),.table i:nth-child(5) { width:19%; }
.table i:nth-child(2) { top:2%; left:40.5%; }.table i:nth-child(3) { top:40.5%; left:2%; }.table i:nth-child(4) { top:40.5%; left:79%; }.table i:nth-child(5) { top:79%; left:40.5%; }
.film { max-width: 290px; background: currentColor; }
.film::before,.film::after { content:''; position:absolute; top:5%; bottom:5%; width:15%; background:repeating-linear-gradient(to bottom,var(--ink) 0 10%,currentColor 10% 20%); }
.film::before { left:4%; }.film::after { right:4%; }
.film i { position:absolute; inset:27% 24%; background:var(--ink); }
.closing { min-height: 90svh; display:flex; flex-direction:column; justify-content:space-between; padding: 70px var(--pad) 34px; }
.closing > p { align-self:center; margin:auto; text-align:center; font-size:clamp(54px,9vw,145px); line-height:.88; }
.closing-meta { display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid var(--line); text-transform:uppercase; font-size:12px; letter-spacing:.17em; }
footer { display:grid; grid-template-columns:repeat(4,1fr); padding:24px var(--pad); border-top:1px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
footer span:last-child { text-align:right; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@media (max-width: 800px) {
  body { font-size:16px; }
  .nav { grid-template-columns:1fr 1fr; }
  .nav nav { position:fixed; inset:0; z-index:-1; display:none; flex-direction:column; justify-content:center; align-items:center; gap:20px; background:var(--ink); font-size:34px; }
  .nav.open nav { display:flex; }
  .menu { display:block; }
  .hero { grid-template-columns:1fr; padding-top:92px; }
  .hero h1 { grid-column:1; font-size:clamp(70px,22vw,126px); align-self:end; }
  .hero-note { top:90px; }
  .hero-mark { left:46%; top:23%; width:62vw; opacity:.9; }
  .hero-copy { grid-column:1; max-width:280px; margin-left:auto; }
  .vision-statement,.vision-grid,.formats-head { grid-template-columns:1fr; }
  .vision-statement { gap:40px; }
  .vision-grid { gap:32px; margin-top:70px; }
  .formats-head { gap:55px; }
  .formats-head > p { justify-self:start; text-align:left; }
  .format-grid { grid-template-columns:1fr; }
  .format-card,.format-card.wide { grid-column:auto; grid-template-columns:1fr .7fr; min-height:390px; }
  .format-card h3 { font-size:42px; }
  .quote { font-size:220px; }
  footer { grid-template-columns:1fr 1fr; gap:16px; }
  footer span:last-child { text-align:left; }
}
@media (max-width: 520px) {
  .hero-note { font-size:21px; }
  .eyebrow { font-size:23px; }
  .format-card,.format-card.wide { grid-template-columns:1fr; min-height:auto; }
  .icon { width:70%; margin:35px auto 10px; }
  .format-card em { margin-top:24px; }
  .vision,.formats { padding-bottom:70px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } }