@font-face {
  font-family: Barlow Condensed;
  src: url('/assets/barlow-condensed-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #201e19;
  --tangerine: #ff7847;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.sheet { max-width: 1720px; margin: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 0 clamp(14px,3vw,54px); }
.masthead, footer { display: flex; align-items: center; justify-content: space-between; }
.masthead { min-height: clamp(64px,10svh,98px); }
.opening-nav { display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.opening-nav a { color:inherit; font-size:.85rem; font-weight:600; text-underline-offset:.22em; }
.wordmark { color: inherit; display: inline-flex; align-items: center; font-weight: 800; font-size: 1.7rem; text-decoration: none; letter-spacing: -.085em; line-height: 1; }
.wordmark img { margin-right: .44em; border-radius: 25%; }
.wordmark span { font-weight: 400; letter-spacing: -.075em; margin-left: .13em; }
.status,.eyebrow,footer,.screening-head p { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.status { display: inline-flex; align-items: center; gap: .68em; padding: 8px 13px; border: 1px solid #c9c3b8; border-radius: 24px; font-size: .71rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #d94a1e; position: relative; }
.status i::after { position: absolute; inset: -4px; border: 1px solid #d94a1e; opacity: 0; border-radius: 50%; content: ''; animation: signal 1.8s ease-out 2; }
main { flex: 1; display: flex; }
.hero { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: clamp(540px,77svh,860px); display: grid; align-items: center; background: #1c1512; color: var(--paper); }
.art,.art::after,.portrait { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.art { z-index: -1; overflow: hidden; }
.portrait { object-fit: cover; object-position: 50% 0%; animation: develop 4.2s cubic-bezier(.17,.73,.25,1) both; }
.art::after { content: ''; background: linear-gradient(90deg,rgba(22,16,14,.94) 0%,rgba(22,16,14,.77) 25%,rgba(22,16,14,.15) 55%,transparent 78%),linear-gradient(0deg,rgba(22,16,14,.4),transparent 32%); }
.story { padding: clamp(55px,7vw,120px) 0 clamp(54px,6vw,104px) clamp(34px,6.2vw,105px); max-width: 62%; }
.eyebrow { margin: 0 0 clamp(18px,2.2vw,35px); display:flex; align-items:center; gap: .8em; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; font-size: clamp(.63rem,.82vw,.8rem); }
.eyebrow span { background: var(--tangerine); width: 25px; height: 2px; }
h1 { margin: 0; font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(5.2rem,8.85vw,9.45rem); letter-spacing: -.037em; line-height: .86; font-weight: 700; }
h1 em { display: inline-block; color: #ff986a; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.081em; font-size: .79em; padding: .07em .09em .05em 0; }
.description { max-width: 34ch; font-size: clamp(.99rem,1.15vw,1.17rem); line-height: 1.55; color: #e9e1d6; margin: clamp(22px,2.4vw,38px) 0 1.55em; }
.preview-link { display: inline-flex; align-items: center; gap: .72em; min-height: 46px; padding: 9px 19px 9px 10px; border: 1px solid #b5a594; color: #fff9ee; text-decoration: none; border-radius: 32px; font-size: .81rem; font-weight: 600; background: #251e1a9c; transition: background .2s, border-color .2s; }
.preview-link:hover { background: #463126; border-color: #ffad85; }
.play-icon { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; background: var(--tangerine); }
.play-icon::after { content: ''; margin-left: 2px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #231813; }
:focus-visible { outline: 3px solid #eb602b; outline-offset: 4px; }
.viewfinder { position:absolute; z-index:1; width: 19px; height:19px; opacity:.69; color:#ffe2bd; }
.viewfinder.top { top:24px; right:24px; border-top:1px solid; border-right:1px solid; }
.viewfinder.bottom { bottom:24px; right:24px; border-bottom:1px solid; border-right:1px solid; }
.soundprint { position:absolute; right:52px; bottom:24px; width:clamp(110px,17vw,240px); height:31px; z-index:1; display:flex; gap:2px; align-items:center; opacity:.84; }
.soundprint i { flex:1; height:var(--height); background:#ffe5c3; transform-origin:center; animation: meter .94s ease-in-out var(--delay) 3 alternate; }
footer { min-height: clamp(48px,7svh,74px); font-size:.68rem; color: #534f46; }
.domain { letter-spacing:.09em; }
.cookie-choice:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:13px 3px; border-bottom:1px solid #d7d1c6; }
.cookie-choice strong { font-size:.87rem; }
.cookie-choice p { font-size:.8rem; line-height:1.45; max-width:75ch; margin:3px 0 0; }
.cookie-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-actions button { color:var(--ink); background:transparent; font:600 .78rem Arial,sans-serif; border:1px solid #8d867b; padding:9px 15px; min-height:38px; cursor:pointer; border-radius:24px; }
.cookie-actions button:hover { background:#e7e1d6; }
.cookie-settings { color:inherit; border:0; background:none; font:inherit; text-decoration:underline; text-underline-offset:3px; padding:8px; cursor:pointer; }
@media(max-width:680px) {
  .cookie-choice:not([hidden]) { align-items:flex-start; flex-direction:column; gap:9px; }
}
@keyframes develop { from { transform:scale(1.055) translateX(.5%); } to { transform:scale(1); } }
@keyframes signal { from { transform:scale(.55); opacity:.8; } to { transform:scale(1.45); opacity:0; } }
@keyframes meter { from { transform:scaleY(.42); } to { transform:scaleY(1); } }
dialog { background:#211c19; color:var(--paper); border:1px solid #5a4941; border-radius:14px; padding:14px; width:min(360px,calc(100% - 28px)); max-height:94svh; overflow:auto; box-shadow:0 24px 95px #0009; }
dialog::backdrop { background:#100d0ccf; }
body:has(dialog[open]) { overflow:hidden; }
.screening-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }
.screening-head p { margin:0 0 3px; font-size:.62rem; color:#ffac83; text-transform:uppercase; letter-spacing:.1em; }
.screening-head h2 { font:700 1.75rem/1 'Barlow Condensed',sans-serif; margin:0; }
.close { border:1px solid #68594f; color:#f7f2e9; background:transparent; font:400 24px/1 Arial,sans-serif; border-radius:50%; min-width:42px; height:42px; cursor:pointer; }
video { display:block; width:100%; height:auto; max-height:calc(92svh - 90px); background:#12100e; border-radius:5px; }
@media(max-width: 680px) {
  .sheet { padding:0 12px; }
  .masthead { min-height:62px; padding:0 3px; }
  .wordmark { font-size:1.4rem; }
  .wordmark img { width:29px; height:29px; }
  .status { font-size:.66rem; padding:7px 10px; }
  .hero { align-items:end; min-height:clamp(604px,calc(100svh - 111px),790px); }
  .portrait { height:78%; width:120%; max-width:none; inset:0 0 auto auto; object-position:74% 12%; }
  .art::after { background:linear-gradient(0deg,#1c1512 12%,rgba(28,21,18,.97) 29%,rgba(28,21,18,.78) 47%,rgba(28,21,18,.14) 67%,transparent 84%); }
  .story { padding:clamp(205px,30svh,330px) 23px 35px; max-width:100%; }
  .eyebrow { margin-bottom:13px; }
  h1 { font-size:clamp(4.2rem,15.5vw,6rem); }
  .description { max-width:30ch; margin:17px 0; font-size:.95rem; }
  .viewfinder.top { right:14px; top:14px; }
  .viewfinder.bottom { bottom:15px; right:14px; }
  .soundprint { width:66px; height:17px; bottom:15px; right:38px; }
  footer { min-height:47px; padding:0 3px; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::after { animation:none !important; transition:none !important; }
}