:root{
  --bg:#120d16;--bg2:#1b1420;--surface:#241b2b;
  --gold:#c99a5b;--gold-soft:rgba(201,154,91,.28);--hair:rgba(201,154,91,.18);
  --green:#0f8a63;--red:#c8202f;--brown:#7a4a22;
  --ink:#f2ece4;--muted:#a99fae;
  --display:"Crimson Pro",Georgia,serif;--sans:"Work Sans",system-ui,sans-serif;--mono:"Red Hat Mono",ui-monospace,monospace;
  --gut:clamp(16px,4vw,56px);--max:1320px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em,i{font-style:italic}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:12px;background:var(--surface);padding:8px 14px;z-index:100}
.skip:focus{left:16px}
.mono{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.muted{color:var(--muted)}

/* progress hairline */
.progress{position:fixed;inset:0 0 auto 0;height:1px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brown),var(--gold));transform-origin:0 50%;transform:scaleX(0)}

/* header */
.masthead{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:32px;padding:16px var(--gut);transition:background .5s var(--ease),border-color .5s var(--ease)}
.masthead.solid{background:rgba(18,13,22,.72);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:12px;font:400 21px/1 var(--display);letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:50%}
.masthead nav{margin-left:auto;display:flex;gap:32px}
.masthead nav a,.language{font:400 14px/1 var(--sans);color:var(--muted);transition:color .3s}
.masthead nav a:hover,.language:hover{color:var(--ink)}
.language{letter-spacing:.08em}
.language strong{color:var(--gold);font-weight:500}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.hero-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 70% at 72% 50%,rgba(18,13,22,.35),rgba(18,13,22,.85) 70%),
  linear-gradient(180deg,rgba(18,13,22,.7) 0%,rgba(27,20,32,.55) 45%,var(--bg) 100%)}
.grain{position:absolute;inset:-50%;opacity:.09;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.hero-inner{width:100%;max-width:var(--max);margin:0 auto;padding:120px var(--gut) 96px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.28em;color:var(--gold);margin:0 0 28px}
h1{margin:0;font:300 clamp(56px,9vw,148px)/.88 var(--display);letter-spacing:-.035em}
h1 .the{display:block;font-style:italic;font-size:.42em;letter-spacing:-.01em;color:var(--gold);margin-bottom:.12em}
h1 .name{display:block}
.hero-line{margin:32px 0 0;font:300 clamp(26px,3vw,40px)/1.15 var(--display);letter-spacing:-.015em}
.hero-line em{color:var(--gold)}
.intro{margin:20px 0 0;color:var(--muted);max-width:34ch;font-size:16px}
.hero-link{display:inline-flex;align-items:center;gap:14px;margin-top:40px;padding:15px 24px;border:1px solid var(--gold-soft);font:400 14px/1 var(--sans);letter-spacing:.04em;transition:border-color .4s var(--ease),background .4s var(--ease)}
.hero-link .arrow{color:var(--gold);transition:transform .4s var(--ease)}
.hero-link:hover{border-color:var(--gold);background:rgba(201,154,91,.06)}
.hero-link:hover .arrow{transform:translate(3px,-3px)}
.hero-emblem{position:relative;justify-self:center;width:min(100%,560px);aspect-ratio:1;will-change:transform}
.hero-emblem img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(201,154,91,.28),rgba(201,154,91,.06) 55%,transparent 72%);filter:blur(30px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:scale(1.05)}}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:32px;padding:20px var(--gut);border-top:1px solid var(--hair);color:var(--muted)}
.motion-control{margin-left:auto;display:inline-flex;gap:10px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.motion-control:hover{color:var(--ink)}
.motion-control:disabled{opacity:.5;cursor:default}
.pause-icon{color:var(--gold)}
body[data-motion="paused"] .grain,body[data-motion="paused"] .glow{animation-play-state:paused}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:clamp(96px,14vw,180px) var(--gut) 0}
.section-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(48px,7vw,96px)}
.section-head .index{color:var(--gold)}
.section-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent)}
.display{margin:0;font:300 clamp(48px,7.4vw,112px)/.95 var(--display);letter-spacing:-.035em}
.display em{color:var(--gold)}
.lead{margin:28px 0 0;font:300 clamp(24px,2.4vw,32px)/1.25 var(--display);letter-spacing:-.01em}
.body{margin:20px 0 0;color:var(--muted);max-width:44ch}

/* sound */
.sound-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:end}
.text-button{display:inline-flex;align-items:center;gap:14px;margin-top:40px;font:400 15px/1 var(--sans);padding:12px 0;border-bottom:1px solid var(--gold-soft);transition:border-color .4s var(--ease)}
.text-button:hover{border-color:var(--gold)}
.play-sm{width:0;height:0;border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent}
.film-card{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hair);background:var(--surface);text-align:left}
.film-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(.85) brightness(.8)}
.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,22,.25),rgba(18,13,22,.1) 40%,rgba(18,13,22,.9))}
.film-kicker{position:absolute;top:24px;left:24px;color:var(--gold)}
.film-play{position:absolute;top:50%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(242,236,228,.5);background:rgba(18,13,22,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-left:4px;transition:transform .6s var(--ease),border-color .6s var(--ease),background .6s var(--ease)}
.film-foot{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:var(--muted)}
.film-name{font:300 clamp(34px,4vw,56px)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.film-name i{color:var(--gold)}
.film-card:hover img{transform:scale(1.06);filter:saturate(1) brightness(.9)}
.film-card:hover .film-play{transform:scale(1.08);border-color:var(--gold);background:rgba(201,154,91,.18)}

/* art */
.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:end}
.art-copy .lead{margin-top:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin:clamp(56px,8vw,112px) 0 0}
.frame{margin:0}
.frame:nth-child(2){transform:translateY(48px)}
.canvas{aspect-ratio:3/4.4;border:1px solid var(--hair);outline:1px solid rgba(201,154,91,.08);outline-offset:10px;position:relative;overflow:hidden;transition:border-color .6s var(--ease)}
.canvas::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(242,236,228,.06) 50%,transparent 70%);transform:translateX(-100%);transition:transform 1.4s var(--ease)}
.frame:hover .canvas{border-color:var(--gold-soft)}
.frame:hover .canvas::after{transform:translateX(100%)}
.c1{background:radial-gradient(ellipse at 30% 20%,rgba(15,138,99,.22),transparent 60%),linear-gradient(180deg,var(--surface),var(--bg2))}
.c2{background:radial-gradient(ellipse at 60% 70%,rgba(201,154,91,.18),transparent 60%),linear-gradient(180deg,var(--bg2),var(--surface))}
.c3{background:radial-gradient(ellipse at 50% 30%,rgba(122,74,34,.3),transparent 60%),radial-gradient(ellipse at 70% 90%,rgba(200,32,47,.1),transparent 50%),linear-gradient(180deg,var(--surface),var(--bg2))}
.frame figcaption{margin-top:22px;color:var(--muted)}
.gallery-note{margin:88px 0 0;text-align:center;color:var(--gold)}

/* brotherhood */
.brother-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,96px);align-items:center}
.story{font-size:18px}
.seal{margin:0;justify-self:center;text-align:center}
.seal img{width:min(320px,70vw);height:auto;border-radius:50%;box-shadow:0 0 0 1px var(--hair),0 40px 120px rgba(201,154,91,.12)}
.seal figcaption{margin-top:28px;color:var(--muted)}

/* footer */
.footer{max-width:var(--max);margin:clamp(120px,16vw,200px) auto 0;padding:32px var(--gut) 40px;display:flex;align-items:center;gap:32px;border-top:1px solid var(--hair)}
.footer-brand{display:flex;align-items:center;gap:12px;font:400 20px/1 var(--display)}
.footer-brand img{border-radius:50%}
.to-top{margin-left:auto;color:var(--gold);font-size:14px}

/* dialog */
dialog{width:min(960px,calc(100vw - 32px));padding:0;border:1px solid var(--hair);background:var(--bg2);color:var(--ink)}
dialog::backdrop{background:rgba(10,7,12,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--hair)}
.dialog-head h2{margin:0;font:300 26px/1 var(--display);font-style:italic}
.dialog-head button{font-size:28px;line-height:1;color:var(--muted);transition:color .3s}
.dialog-head button:hover{color:var(--ink)}
dialog video{width:100%;background:#000}
dialog p{margin:0;padding:14px 20px}

/* reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .frame.reveal.in:nth-child(2){transform:translateY(48px)}

/* responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding-top:104px;padding-bottom:120px;gap:24px}
  .hero-emblem{order:-1;width:min(62vw,340px)}
  .sound-grid,.art-grid,.brother-grid{grid-template-columns:1fr}
  .seal{justify-self:start}
}
@media (max-width:640px){
  :root{--gut:20px}
  .masthead{gap:16px;padding:12px var(--gut)}
  .masthead nav{display:none}
  .language{margin-left:auto}
  .brand{font-size:18px}
  .hide-sm,.section-head .muted{display:none}
  .gallery{grid-template-columns:1fr 1fr}
  .frame:nth-child(2),.js .frame.reveal.in:nth-child(2){transform:none}
  .frame:nth-child(3){grid-column:1/-1}
  .frame:nth-child(3) .canvas{aspect-ratio:16/10}
  .film-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .film-foot{flex-direction:column;gap:8px;left:18px;bottom:16px}
  .film-kicker{top:16px;left:18px}
  .footer{flex-wrap:wrap;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.glow{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* qa fixes 2026-10-27: round emblem (no square plum box), no sideways scroll on phones */
html,body{max-width:100%;overflow-x:clip}
.hero-inner>*{min-width:0}
.hero-emblem{filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-emblem img{filter:none;border-radius:50%}
@media (max-width:900px){.hero-inner{grid-template-columns:minmax(0,1fr)}.hero-emblem{justify-self:center;margin-inline:auto;width:min(64vw,320px)}.masthead{max-width:100vw}.language{flex:none}}
.seal img,.brand img,.footer-brand img{border-radius:50%}