/* SAGEAEYE v4 · one face (Archivo), two fields: the light (the label) and the dark (the lab). */
:root{
  --void:#0B0B0B; --char:#141413; --cream:#EEE8DC; --cream-soft:#B9B4AA;
  --bone:#F4F4F1; --bone-2:#E6E6E1; --ink:#0B0B0B; --ink-soft:#4E4E49;
  --m:clamp(16px,2.6vw,36px);
  --gap:clamp(120px,14vw,200px);
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* five sizes */
  --s-xl:clamp(60px,15.2vw,260px);
  --s-l:clamp(34px,4.6vw,72px);
  --s-m:clamp(22px,2.3vw,34px);
  --s-b:clamp(16px,1.15vw,18px);
  --s-s:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--void);color:var(--cream);font-family:var(--f);font-size:var(--s-b);line-height:1.55;font-variation-settings:'wdth' 100}
img,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--cream);color:var(--void)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-60px;z-index:50;background:var(--cream);color:var(--void);padding:10px 14px}
.skip:focus{top:10px}

/* ---- type ---- */
.h1x,.h2,.h3,.h4,.wordmark{margin:0;font-weight:800;letter-spacing:-.03em;line-height:.95}
.h1x{font-size:var(--s-xl);font-variation-settings:'wdth' 112}
.h2{font-size:var(--s-l);font-variation-settings:'wdth' 108}
.h3{font-size:var(--s-m);letter-spacing:-.02em;line-height:1.05;font-variation-settings:'wdth' 104}
.h4{font-size:var(--s-b);letter-spacing:0;line-height:1.3;font-weight:800}
.statement{font-size:var(--s-m);line-height:1.22;letter-spacing:-.015em;font-weight:500;margin:0;max-width:24ch}
.body,.lede{max-width:52ch;margin:0}
.note{font-size:var(--s-s);line-height:1.5;margin:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-weight:700;font-size:var(--s-b);text-decoration:none;border-radius:0;transition:transform .18s var(--ease),background-color .18s,color .18s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-cream{background:var(--cream);color:var(--void)}
.btn-cream:hover{background:#fff}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:#2a2a28}
.btn-wide{width:100%}
.tlink{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;transition:text-underline-offset .18s}
.tlink:hover{text-underline-offset:8px}

/* ---- bar ---- */
.bar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:32px;padding:20px var(--m);color:var(--cream)}
.mark{font-weight:800;text-decoration:none;letter-spacing:.32em;font-variation-settings:'wdth' 125;font-size:var(--s-s)}
.bar nav{display:flex;gap:28px;margin-left:auto}
.bar nav a{text-decoration:none;font-size:var(--s-s);font-weight:600;opacity:1;transition:opacity .15s}
.bar nav a:hover{text-decoration:underline;text-underline-offset:5px}
.bar-cta{min-height:40px;font-size:var(--s-s);padding:0 16px}

/* ---- hero ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px var(--m) 64px;background:var(--void);text-align:center;overflow:hidden}
.stage{position:relative;width:min(46vw,64svh);aspect-ratio:1;cursor:grab;touch-action:pan-y}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-fallback{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;transition:opacity .2s}
.stage.live .stage-fallback{display:none}
.stage-read{position:absolute;left:0;right:0;bottom:2%;margin:0;font-size:var(--s-s);color:var(--cream-soft)}
.wordmark{font-size:var(--s-l);letter-spacing:.38em;margin-right:-.38em;font-variation-settings:'wdth' 125;line-height:1;margin-top:clamp(8px,1.5vw,20px);white-space:nowrap}
.hero-line{margin:28px auto 0;max-width:30ch;text-align:center}
.hero-row{display:flex;align-items:center;gap:48px;margin-top:36px;font-size:var(--s-s);color:var(--cream-soft)}

/* ---- light field ---- */
.light{background:var(--bone);color:var(--ink)}
.light ::selection{background:var(--ink);color:var(--bone)}

/* drop: object on a disc */
.drop{overflow:clip;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:var(--gap) var(--m) 0;min-height:100svh;align-items:center}
.drop-text{position:relative;z-index:2;grid-column:1/6;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:28px}
.disc-wrap{grid-column:6/13;grid-row:1;position:relative;overflow:clip;height:min(72vh,760px);display:grid;place-items:center}
.disc{position:absolute;width:min(64vh,46vw);aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-40%,-50%);background:var(--bone-2);transition:background-color .5s}
.disc.is-white{background:#D2D2CC}
.tee{position:absolute;width:108%;max-width:none;left:50%;top:50%;transform:translate(-44%,-52%);mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.06);opacity:0;transition:opacity .3s}
.tee.on{opacity:1}
.disc-fact{position:absolute;right:0;bottom:4%;margin:0;max-width:16ch;text-align:right;font-weight:600}
.variants{list-style:none;margin:0;padding:0}
.variants button{display:block;text-align:left;font-size:var(--s-m);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-soft);padding:2px 0;transition:color .2s,transform .2s var(--ease)}
.variants button:hover{color:var(--ink);transform:translateX(6px)}
.variants button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.claim{display:flex;flex-direction:column;gap:16px}
.sizes{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sizes legend{font-weight:700;margin-bottom:8px;padding:0}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sizes span{display:grid;place-items:center;min-width:52px;height:44px;padding:0 10px;background:var(--bone-2);font-weight:700;transition:background-color .15s,color .15s}
.sizes label:hover span{background:#d9d9d3}
.sizes input:checked+span{background:var(--ink);color:var(--bone)}
.sizes input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.claim-row{display:flex;gap:8px;flex-wrap:wrap}
.claim-row input{flex:1 1 220px;min-height:48px;padding:0 14px;font:inherit;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:0}
.claim .note{color:var(--ink-soft);max-width:46ch}
.ok{font-weight:700;font-size:var(--s-m);line-height:1.2;margin:0}

/* cast: one frame, contents change */
.cast{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:var(--gap) var(--m) 0;align-items:start}
.frame-col{grid-column:1/6}
.frame{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;cursor:pointer}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:0;transition:opacity .6s}
.frame img.on{opacity:1}
.cap{margin:16px 0 0;font-size:var(--s-s);font-weight:600}
.cast-text{grid-column:7/13;display:flex;flex-direction:column;gap:28px;padding-top:4vw}
.cast-text .statement{max-width:28ch}
.monsters{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.monsters figure{margin:0}
.monsters img{width:100%;aspect-ratio:4/3;object-fit:cover;mix-blend-mode:multiply}
.monsters figcaption{font-size:var(--s-s);margin-top:10px;font-weight:600}

/* faq: questions beside a tall photograph */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;padding:var(--gap) var(--m) var(--gap);align-items:start}
.faq-text{grid-column:1/6;display:flex;flex-direction:column;gap:28px}
.facts{list-style:none;margin:0;padding:0;font-size:var(--s-b);font-weight:600}
.facts li+li{margin-top:4px}
.qs details{padding:14px 0}
.qs summary{list-style:none;cursor:pointer;font-size:var(--s-b);font-weight:700;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:44px}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.qs details[open] summary::after{transform:rotate(-135deg)}
.qs p{margin:10px 0 0;color:var(--ink-soft);font-size:var(--s-b);max-width:52ch}
.faq-act{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.faq-pics{grid-column:7/13;position:relative;margin-top:calc(var(--gap) * -.5)}
.faq-pics .tall{width:100%;aspect-ratio:3/4;object-fit:cover}
.faq-pics .sq{position:absolute;left:-40px;bottom:-40px;width:36%;aspect-ratio:1;object-fit:cover;object-position:50% 40%;outline:12px solid var(--bone)}

/* ---- dark field ---- */
.dark{background:var(--void);color:var(--cream)}
.lab-intro{padding:var(--gap) var(--m) 72px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.lab-intro .h1x{grid-column:1/13;white-space:nowrap}
.lab-intro .statement{grid-column:8/13;color:var(--cream)}

/* work: oversized visual, small cluster */
.work{display:flex;flex-direction:column;gap:140px;overflow:hidden}
.job{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-right:var(--m);align-items:end}
.job-big{grid-column:1/8;height:80svh;overflow:hidden}
.job-b .job-big{height:62svh}
.job-c .job-big{height:88svh}
.job-d .job-big{height:70svh}
.job-e .job-big{height:76svh}
.job-big img[src*='/web/']{object-position:left top}
.job-big img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease)}
.job:hover .job-big img{transform:scale(1.16)}
.job-side{grid-column:9/13;display:flex;flex-direction:column;gap:28px}
.teaser{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--char)}
.job-txt{display:grid;grid-template-columns:1fr;gap:14px}
.job-txt p{margin:0 0 14px;font-size:var(--s-b);max-width:60ch;line-height:1.55;color:var(--cream)}
.play{font-size:var(--s-s);text-align:left}

/* reels: Instagram strips */
.reels{padding:var(--gap) var(--m) 0}
.reels-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:24px}
.reels-head .h2{grid-column:1/8}
.reels-head .statement{grid-column:8/13}
.rgroup{margin-top:72px}
.rgroup .h3{margin-bottom:24px}
.rstrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:32px 16px}
.rstrip li{scroll-snap-align:start}
.reel{display:flex;flex-direction:column;gap:12px;text-align:left;width:100%}
.reel img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--char);transition:transform .35s var(--ease),filter .35s}
.reel:hover img,.reel:focus-visible img{transform:scale(1.03)}
.reel span{display:flex;flex-direction:column;gap:2px}
.reel b{font-size:var(--s-s);font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel i{font-style:normal;font-size:var(--s-s);color:var(--cream-soft)}
.reels>.btn{margin-top:56px}
#playerI{grid-column:1/3;width:100%;max-height:78svh;object-fit:contain;object-position:top;background:#000}
#playerF{grid-column:1/3;width:100%;height:min(74svh,640px);border:0;background:#fff}
dialog.is-reel{width:min(440px,94vw)}
.player-ig{grid-column:1/3;font-size:var(--s-s)}

/* archive: list with photo bullets */
.archive{padding:var(--gap) var(--m) 0}
.cat{margin-top:96px}
.cat:first-of-type{margin-top:64px}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px}
.cat-head span{font-size:var(--s-b);color:var(--cream-soft)}
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:32px 64px}
.rt b{font-size:var(--s-b)}
.row{display:grid;grid-template-columns:clamp(112px,13vw,200px) 1fr;grid-template-rows:auto auto;column-gap:20px;text-align:left;text-decoration:none;width:100%;align-items:start}
.row img{grid-row:1/3;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;filter:grayscale(1);transition:filter .3s,transform .3s var(--ease)}
.row:hover img,.row:focus-visible img{filter:none;transform:scale(1.04)}
.rt{display:flex;justify-content:space-between;gap:16px;font-size:var(--s-b)}
.rt i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--cream-soft);font-size:var(--s-s)}
.rc{font-size:var(--s-s);color:var(--cream-soft)}
.row:hover b{text-decoration:underline;text-underline-offset:4px}

.onyx{padding:var(--gap) var(--m) 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.onyx-pic{grid-column:1/8;overflow:hidden}
.onyx-pic img{width:100%;aspect-ratio:16/9.7;object-fit:cover;object-position:left bottom}
.onyx-txt{grid-column:8/13;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.steps{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:10px;font-size:var(--s-b);line-height:1.5}
.steps .copy{font-size:var(--s-s);margin-left:4px}
.onyx-txt .note{color:var(--cream-soft)}

/* about: inset panel, eye-shaped picture */
.about{padding:var(--gap) 20px 0}
.panel{background:var(--char);min-height:110svh;overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:56px calc(var(--m) + 20px) 0 56px;position:relative}
.panel-left{grid-column:1/8;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.h2.pale{color:var(--cream)}
.almond{width:min(38vw,620px);aspect-ratio:1.45;clip-path:ellipse(50% 50% at 50% 50%);overflow:hidden;margin-bottom:-6%;align-self:flex-start}
.almond img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.panel-right{grid-column:8/13;display:flex;flex-direction:column;gap:40px;align-items:flex-start;padding-bottom:64px}
.blk p,.blk li{margin:0;font-size:var(--s-b);line-height:1.55;max-width:60ch}
.blk .h4{margin-bottom:10px}
.make{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nums{display:flex;flex-direction:column;gap:6px}
.nums b{font-size:var(--s-m);letter-spacing:-.02em;margin-right:8px}

/* contact: card on a photograph */
.contact{position:relative;min-height:112svh;margin-top:var(--gap);padding:60px var(--m)}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.card{position:relative;max-width:460px;background:var(--bone);color:var(--ink);padding:32px;display:flex;flex-direction:column;gap:16px}
.card-sub{margin:0;font-size:var(--s-b)}
#hire{display:flex;flex-direction:column;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:6px;font-size:var(--s-s);font-weight:600}
.f input,.f select,.f textarea{font:inherit;font-size:var(--s-b);font-weight:400;min-height:46px;padding:10px 12px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:0;width:100%}
.f textarea{resize:vertical;min-height:90px}
.card .note{color:var(--ink-soft)}

/* footer: name across the last photograph */
.foot{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:32px var(--m) 32px;overflow:hidden;color:var(--cream);background:var(--void)}
.foot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:brightness(.62)}
.foot-top{position:relative;display:flex;justify-content:space-between;gap:24px}
.foot-top ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.foot-top p{margin:0;text-align:right}
.foot-mark{position:relative;margin:auto 0 0;font-weight:800;font-size:var(--s-xl);line-height:.8;letter-spacing:-.04em;font-variation-settings:'wdth' 100;white-space:nowrap;text-align:center}
.legal{position:relative;margin:16px 0 0;font-size:var(--s-s);text-align:center}

/* player */
dialog{border:0;padding:0;background:var(--void);color:var(--cream);width:min(1100px,94vw);max-height:92svh}
dialog::backdrop{background:rgba(0,0,0,.86)}
.player-in{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px}
.player-t{margin:0;font-weight:700;align-self:center}
.player-x{font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px}
#playerV{grid-column:1/3;width:100%;max-height:78svh;background:#000}

/* ---- entrances (script adds .js; without it everything shows) ---- */
.js [data-rise]{opacity:.35;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-rise].in{opacity:1;transform:none}

/* ---- tablet ---- */
@media (max-width:1000px){
  .bar nav{display:none}
  .bar-cta{margin-left:auto}
  .drop,.cast,.faq{grid-template-columns:minmax(0,1fr)}
  .drop-text,.cast-text,.faq-text{min-width:0}
  .disc-wrap,.drop-text,.frame-col,.cast-text,.faq-text,.faq-pics{grid-column:1;grid-row:auto}
  .drop{row-gap:24px}
  .drop-text{display:contents}
  .drop-text .h2{order:0}.drop-text .lede{order:1}
  .disc-wrap{height:min(104vw,720px);order:2}
  .variants{order:3}.claim{order:4}
  .disc{width:86vw;max-width:640px;top:46%;transform:translate(-50%,-50%)}
  .tee{width:112%;top:46%;transform:translate(-50%,-52%)}
  .disc-fact{z-index:2;left:0;right:auto;bottom:0;text-align:left;max-width:none;background:var(--bone);padding:6px 12px 0 0}
  .frame-col{width:min(100%,560px)}
  .cast-text{order:-1;padding:0 0 48px}
  .faq-pics{order:-1;margin:0 0 48px;width:min(100%,560px)}
  .faq-pics .sq{left:auto;right:-8px;bottom:-24px;width:38%}
  .lab-intro{grid-template-columns:1fr}
  .lab-intro .h1x,.lab-intro .statement{grid-column:1}
  .job{grid-template-columns:1fr;padding-right:0}
  .job-big,.job-side{grid-column:1}
  .onyx{grid-template-columns:minmax(0,1fr)}
  .onyx-pic,.onyx-txt{grid-column:1}
  .reels-head{grid-template-columns:1fr}
  .reels-head .h2,.reels-head .statement{grid-column:1}
  .job-big,.job-b .job-big,.job-c .job-big,.job-d .job-big,.job-e .job-big{height:auto;aspect-ratio:4/5;width:110%}
  .job-side{padding:0 var(--m)}
  .job-txt{grid-template-columns:1fr}
  .job-txt p{font-size:15px}
  .work{gap:88px}
  .rows{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr;padding:40px 24px 0}
  .panel-left,.panel-right{grid-column:1}
  .panel-left{display:contents}
  .panel .h2.pale{order:0}
  .panel-right{order:1;padding-bottom:16px}
  .almond{order:2;width:86vw;max-width:560px;align-self:center;margin-bottom:-12%}
}
/* ---- phone ---- */
@media (max-width:640px){
  .bar{padding:16px var(--m)}
  .mark{font-size:13px;letter-spacing:.22em}
  .hero{padding-top:84px}
  .stage{width:86vw}
  .wordmark{font-size:8vw;letter-spacing:.3em;margin-right:-.3em}
  
  .hero-row{flex-direction:column;gap:14px;width:100%}
  .hero-row .btn{width:100%}
  .variants{display:flex;gap:24px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .variants button{white-space:nowrap;font-size:22px}
  .claim-row .btn{width:100%}
  .monsters{grid-template-columns:1fr 1fr}
  .rstrip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62vw;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);margin:0 calc(var(--m) * -1);padding:0 var(--m) 8px}
  .about{padding:var(--gap) 10px 0}
  .nums{grid-template-columns:1fr 1fr}
  .contact{min-height:0;padding:0;margin-top:var(--gap);display:flex;flex-direction:column}
  .contact-bg{position:relative;height:70svh}
  .card{margin:-80px 16px 0;padding:24px}
  .two{grid-template-columns:1fr}
  .foot{min-height:88svh}
  .foot-top{flex-direction:column}
  .foot-top p{text-align:left}
  .foot-mark{font-size:15vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js [data-rise]{opacity:1;transform:none}
}

/* multiply needs a ground inside its own stacking group */
.disc-wrap,.frame,.monsters figure{background:var(--bone)}