/* ============================================================
   Artificial Natural Tit — $ANT
   Desktop-first poster campaign. Three scenes + footer.
   ============================================================ */

:root{
  --orange:#ED5928;
  --orange-deep:#C8431B;
  --char:#292929;
  --char-deep:#1A1A1A;
  --ivory:#FFF5E9;
  --silver:#BFC4CC;
  --red:#FF3B2F;

  --head:'Archivo Black',Impact,sans-serif;
  --ui:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* measured from banner.png: flat orange runs 0–32%, she sits 55–82% */
  --col:30vw;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--orange);color:var(--ivory);
  font-family:var(--ui);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
code{font-family:var(--mono)}

/* ---------- shared controls ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ui);font-weight:900;font-size:.95rem;letter-spacing:.06em;
  padding:.85em 1.3em;border:2px solid var(--char-deep);border-radius:4px;
  background:linear-gradient(176deg,#3A3A3A 0%,var(--char) 46%,#1F1F1F 100%);
  color:var(--ivory);cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:5px 5px 0 var(--char-deep), inset 0 1px 0 rgba(255,255,255,.28);
  transition:box-shadow .16s, transform .16s, background .16s;
  overflow:hidden;
}
.btn::after{ /* light streak */
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform .5s;
}
.btn:hover{box-shadow:2px 2px 0 var(--char-deep), inset 0 1px 0 rgba(255,255,255,.3);transform:translate(3px,3px)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--char-deep)}
.btn:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}
.btn--copy{background:linear-gradient(176deg,#FF7A4A 0%,var(--orange) 48%,#C8431B 100%);color:#2A1206;border-color:#7E2C0E;box-shadow:5px 5px 0 #7E2C0E, inset 0 1px 0 rgba(255,255,255,.5)}
.btn--copy:hover{box-shadow:2px 2px 0 #7E2C0E, inset 0 1px 0 rgba(255,255,255,.5)}
.btn--copy:active{box-shadow:0 0 0 #7E2C0E}
.btn--x span{transition:transform .16s;display:inline-block}
.btn--x:hover span{transform:translate(3px,-3px)}
.btn--lg{font-size:1.1rem;padding:1em 1.7em}
.btn.ok{background:linear-gradient(176deg,#6FE08A,#2FA94F);color:#07240F;border-color:#176B2C;box-shadow:5px 5px 0 #176B2C}

/* ============================================================
   SCENE 1 — THE NATURAL ANOMALY
   ============================================================ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--orange);display:flex;align-items:center;
  isolation:isolate;
}

/* the delivered banner is 3:1 and flattened — it moves as one image */
.hero__art{position:absolute;inset:0;z-index:1}
.hero__banner{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:68% 18%;  /* she sits x 55-82%, face upper-right */
  transform:scale(1.02);
  animation:bannerIn 1s .15s cubic-bezier(.2,.8,.25,1) both, drift 22s 1.2s ease-in-out infinite;
}
@keyframes bannerIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1.02)}}
@keyframes drift{0%,100%{transform:scale(1.02) translate(0,0)}
  50%{transform:scale(1.05) translate(-.6%,-.5%)}}

/* printed-poster texture */
.hero__grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.3;
  background-image:radial-gradient(circle at 1px 1px, rgba(90,30,8,.55) 1px, transparent 1.6px);
  background-size:4px 4px;
}
.hero__art::after{ /* halftone shadow + scanning sweep bed */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(120,40,10,.42) 0%, rgba(120,40,10,.14) 26%, transparent 46%),
    linear-gradient(0deg, rgba(40,12,2,.34), transparent 42%);
}

/* giant cropped $ANT across the lower background */
.hero__ant{
  position:absolute;left:-4vw;bottom:-9vh;z-index:2;
  font-family:var(--head);font-size:40vw;line-height:.74;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:4px rgba(41,41,41,.42);
  pointer-events:none;user-select:none;white-space:nowrap;
  animation:antIn 1.1s .5s ease-out both;
}
@keyframes antIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

.hero__wrap{position:relative;z-index:4;width:100%;padding:0 clamp(28px,4vw,72px) 7rem}
.hero__col{width:var(--col);min-width:430px;max-width:620px}

/* tilted label */
.tag{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.17em;padding:.5em .85em;background:var(--char);color:var(--ivory);
  border-left:4px solid var(--red);margin-bottom:1.1rem;
}
.tag--tilt{transform:rotate(-2.4deg)}

/* stacked title */
.title{position:relative;margin:0 0 1.6rem;font-family:var(--head);
  font-size:clamp(3.2rem,7.3vw,8rem);line-height:.82;letter-spacing:-.022em}
.title__l{display:block;color:var(--ivory);text-shadow:4px 5px 0 rgba(41,41,41,.34)}
.title__l--dark{color:var(--char);text-shadow:3px 4px 0 rgba(255,245,233,.26)}
/* thin chrome outline layer sitting slightly behind */
.title__ghost{
  position:absolute;top:-.055em;left:.055em;z-index:-1;display:block;
  color:transparent;-webkit-text-stroke:1.5px rgba(191,196,204,.82);
  pointer-events:none;user-select:none;
}

/* contract plate — a removable chrome equipment plate */
.plate{
  position:relative;padding:1rem 1.15rem 1.15rem;border-radius:8px;
  background:linear-gradient(168deg,#E9ECF0 0%,#C3C8D0 38%,#9FA6B0 62%,#D6DAE0 100%);
  border:2px solid #6E747E;
  box-shadow:7px 8px 0 rgba(26,26,26,.62), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(0,0,0,.2);
}
.plate__rivets i{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8A9099 62%,#5E636B);}
.plate__rivets i:nth-child(1){top:8px;left:8px}
.plate__rivets i:nth-child(2){top:8px;right:8px}
.plate__rivets i:nth-child(3){bottom:8px;left:8px}
.plate__rivets i:nth-child(4){bottom:8px;right:8px}

.plate__head{display:flex;align-items:center;gap:.6em;margin:0 0 .6rem;padding-left:.2rem}
.plate__label{font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.2em;color:#3C424B}
.plate__led{width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 7px var(--red);animation:led 2.6s ease-in-out infinite}
@keyframes led{0%,88%,100%{opacity:1}92%{opacity:.18}}

.plate__row{display:flex;flex-direction:column;gap:.75rem}
.plate__ca{
  display:block;background:var(--char-deep);color:#FFCDA8;
  font-size:.86rem;letter-spacing:.02em;padding:.75em .85em;border-radius:4px;
  border:1px solid #000;word-break:break-all;line-height:1.45;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65);
}
.plate__btns{display:flex;gap:.7rem}
.plate__btns .btn--x{padding:.85em 1.05em}

.console{
  margin:1.05rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;
  color:rgba(41,41,41,.8);
}
.console::before{content:'› ';color:var(--red)}

/* vertical edge label */
.hero__edge{
  position:absolute;right:14px;top:50%;z-index:4;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.42em;
  color:rgba(255,245,233,.72);pointer-events:none;
}

/* targeting brackets over her shoulder mechanics (x 55–82% of frame) */
.brackets{position:absolute;inset:0;z-index:3;pointer-events:none}
.bracket{position:absolute;width:58px;height:58px;border:2px solid rgba(255,245,233,.6)}
.bracket--a{left:57%;top:62%;border-right:0;border-bottom:0;animation:brk 4s ease-in-out infinite}
.bracket--b{left:76%;top:68%;border-left:0;border-top:0;animation:brk 4s .9s ease-in-out infinite}
@keyframes brk{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}

/* entrance sequence */
.a-1,.a-2,.a-3,.a-4,.a-5{opacity:0;animation:snapIn .46s cubic-bezier(.2,.9,.3,1) forwards}
.a-1{animation-delay:.42s}
.a-2{animation-delay:.56s}
.a-3{animation-delay:.66s}
.a-4{animation-delay:.76s}
.a-5{animation-delay:.9s;animation-name:plateIn;animation-duration:.55s}
@keyframes snapIn{from{opacity:0;transform:translateX(-46px) skewX(-7deg)}to{opacity:1;transform:none}}
@keyframes plateIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}

/* faint scanning sweep behind the text */
.hero__wrap::before{
  content:'';position:absolute;left:0;top:0;width:var(--col);min-width:430px;height:100%;
  pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(255,245,233,.14),transparent);
  animation:scan 7s 1.8s linear infinite;
}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ============================================================
   TICKER STRIPS
   ============================================================ */
.strips{position:relative;z-index:6;margin:-3.4rem 0 0;pointer-events:none;overflow:hidden}
.strip{overflow:hidden;width:112%;margin-left:-6%}
.strip--main{background:var(--char);transform:rotate(-2.1deg);padding:.6rem 0;
  box-shadow:0 8px 0 rgba(26,26,26,.28)}
.strip--ghost{transform:rotate(1.4deg);margin-top:-.7rem;padding:.35rem 0;
  border-top:2px solid rgba(237,89,40,.9);border-bottom:2px solid rgba(237,89,40,.9)}
.strip__track{display:flex;width:max-content;animation:marq 26s linear infinite}
.strip__track--rev{animation:marqRev 34s linear infinite}
.strip__track span{font-family:var(--head);font-size:2.3rem;letter-spacing:.015em;color:var(--ivory)}
.strip--ghost .strip__track span{font-size:1.5rem;color:transparent;-webkit-text-stroke:1.2px var(--orange)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ============================================================
   SCENE 2 — INSIDE THE ANOMALY
   ============================================================ */
.anomaly::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--char) 14%,rgba(41,41,41,.86) 34%,rgba(41,41,41,0) 56%)}
.anomaly{
  position:relative;background:var(--char);overflow:hidden;
  display:grid;align-items:center;
  min-height:0;padding:0;isolation:isolate;
}
.anomaly__circle{
  position:absolute;right:-22vw;top:50%;transform:translateY(-50%);
  width:72vw;height:72vw;border-radius:50%;background:var(--orange);
  z-index:0;opacity:.9;
}
.anomaly__art{position:relative;grid-area:1/1;margin:0;z-index:2;
  width:100%}
.anomaly__art img,.anomaly__art .standin{width:100%;height:100%;display:block;
  object-fit:cover;object-position:72% 50%;aspect-ratio:2800/1500}
.anomaly__art .standin svg{width:100%;height:auto}
/* sweeping light mask reveal */
.sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sweep::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,245,233,.55) 50%,transparent 60%);
  transform:translateX(-130%);
}
.anomaly.in .sweep::before{animation:sweep 1.25s .25s ease-out forwards}
@keyframes sweep{to{transform:translateX(130%)}}

.anomaly__art img,.anomaly__art .standin{clip-path:inset(0 100% 0 0)}
.anomaly.in .anomaly__art img,.anomaly.in .anomaly__art .standin{animation:unmask 1.05s .15s cubic-bezier(.3,.85,.3,1) forwards}
@keyframes unmask{to{clip-path:inset(0 0 0 0)}}

.anomaly__text{grid-area:1/1;position:relative;z-index:3;
  width:min(46%,640px);padding:3rem 2rem 3rem clamp(28px,4vw,72px);justify-self:start}

.h-big{margin:0 0 1rem;font-family:var(--head);
  font-size:clamp(2.6rem,5.4vw,5.6rem);line-height:.88;letter-spacing:-.02em;color:var(--ivory)}
.h-big--dark{color:var(--char)}
/* one restrained chrome highlight travelling across the heading */
.shine{background:linear-gradient(100deg,var(--ivory) 42%,#fff 48%,var(--silver) 52%,var(--ivory) 60%);
  background-size:260% 100%;background-position:110% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.anomaly.in .shine{animation:shine 1.6s 1.1s ease-out forwards}
@keyframes shine{to{background-position:-40% 0}}

.annot{margin:0 0 1.4rem;font-family:var(--mono);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;color:var(--orange)}
.body{margin:0 0 2.1rem;font-size:1.04rem;line-height:1.65;max-width:34ch;
  color:rgba(255,245,233,.84)}

.diag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.diag__i{position:relative;font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;
  color:var(--silver);opacity:0;transform:translateX(-14px)}
.diag__i b{color:var(--ivory);font-weight:700}
/* fine lines drawn outward toward the mechanical details */
.diag__line{position:absolute;left:calc(100% + 14px);top:50%;height:1px;width:0;
  background:var(--orange);box-shadow:0 0 5px rgba(237,89,40,.8)}
.diag__line::after{content:'';position:absolute;right:-4px;top:-3.5px;
  width:8px;height:8px;border-radius:50%;background:var(--orange);opacity:0;transition:opacity .3s}
.anomaly.in .diag__i{animation:diagIn .5s forwards}
.anomaly.in .diag__i:nth-child(1){animation-delay:.9s}
.anomaly.in .diag__i:nth-child(2){animation-delay:1.05s}
.anomaly.in .diag__i:nth-child(3){animation-delay:1.2s}
.anomaly.in .diag__line{animation:lineOut .6s cubic-bezier(.2,.8,.3,1) forwards}
.anomaly.in .diag__i:nth-child(1) .diag__line{animation-delay:.75s}
.anomaly.in .diag__i:nth-child(2) .diag__line{animation-delay:.9s}
.anomaly.in .diag__i:nth-child(3) .diag__line{animation-delay:1.05s}
.anomaly.in .diag__line::after{opacity:1;transition-delay:1.3s}
@keyframes diagIn{to{opacity:1;transform:none}}
@keyframes lineOut{to{width:clamp(30px,4.5vw,80px)}}

/* ============================================================
   SCENE 3 — NATURAL MODE ACTIVATED
   ============================================================ */
.natural{
  position:relative;background:var(--orange);overflow:hidden;
  min-height:0;padding:6rem 0 5rem;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.natural__ant{
  position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:1;
  display:flex;gap:2vw;pointer-events:none;user-select:none;
}
.natural__ant span{font-family:var(--head);font-size:19vw;line-height:.8;
  color:transparent;-webkit-text-stroke:3px rgba(41,41,41,.42)}

.natural__art{position:relative;z-index:3;margin:0 auto;width:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  opacity:0;transform:translateY(40px)}
.natural.in .natural__art{animation:artUp .9s .1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes artUp{to{opacity:1;transform:none}}
.natural__art img,.natural__art .standin{width:100%;display:block}
.natural__art .standin svg{width:100%;height:auto}

/* overlapping charcoal poster fragments */
.frag{position:absolute;z-index:2;background:var(--char);pointer-events:none}
.frag--a{left:4vw;top:24%;width:17vw;height:30vh;transform:rotate(-6deg);opacity:.9}
.frag--b{right:3vw;top:40%;width:13vw;height:24vh;transform:rotate(7deg);
  background:transparent;border:3px solid var(--char)}

/* ivory warning tape */
.tape{position:absolute;z-index:4;left:-6vw;top:6%;width:112vw;
  transform:rotate(-4deg);background:var(--ivory);padding:.45rem 0;overflow:hidden;
  box-shadow:0 6px 0 rgba(41,41,41,.2)}
.tape span{display:block;white-space:nowrap;font-family:var(--head);font-size:1.25rem;
  letter-spacing:.06em;color:var(--char)}

/* certification stamp */
.stamp{
  position:absolute;z-index:6;right:7vw;bottom:16%;
  width:clamp(160px,15vw,230px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;
  border:5px solid var(--char);color:var(--char);
  background:rgba(255,245,233,.14);
  font-family:var(--head);font-size:clamp(.9rem,1.25vw,1.4rem);line-height:1.08;
  letter-spacing:.03em;text-align:center;
  opacity:0;transform:rotate(-26deg) scale(2.1);
}
.natural.in .stamp{animation:stampIn .5s .95s cubic-bezier(.25,1.5,.4,1) forwards}
@keyframes stampIn{to{opacity:.92;transform:rotate(-12deg) scale(1)}}
.stamp__ripple{position:absolute;inset:-5px;border-radius:50%;border:4px solid var(--char);opacity:0}
.natural.in .stamp__ripple{animation:ripple .7s 1.42s ease-out forwards}
@keyframes ripple{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

.natural__text{position:relative;z-index:7;margin-top:3rem;padding:0 clamp(28px,5vw,80px);
  display:flex;flex-direction:column;align-items:flex-start}
.sub{margin:.6rem 0 1.8rem;font-family:var(--mono);font-size:.84rem;letter-spacing:.11em;
  color:rgba(41,41,41,.85)}
.natural__btns{display:flex;gap:.9rem}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative;z-index:8;background:var(--char);color:var(--ivory);
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem clamp(28px,5vw,80px);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
}
.foot__mark{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.foot__name{flex:1}
.foot__name b{color:var(--orange)}
.foot__x{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--orange);
  padding-bottom:1px;transition:color .15s}
.foot__x:hover{color:var(--orange)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  background:var(--char-deep);color:var(--ivory);border:2px solid var(--orange);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;
  padding:.8em 1.3em;border-radius:5px;opacity:0;pointer-events:none;z-index:99;
  transition:opacity .22s, transform .22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- scroll reveal base ---------- */
.rv{opacity:0;transition:opacity .6s}
.rv.in{opacity:1}

/* ---------- SVG stand-ins (until the art lands) ---------- */
img[data-art]{background:transparent}
img[data-art]:not([src]){display:none}
.standin{width:100%;display:block}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .a-1,.a-2,.a-3,.a-4,.a-5,.diag__i,.natural__art,.stamp{opacity:1;transform:none}
  .anomaly__art img{clip-path:none}
  .diag__line{width:clamp(40px,7vw,120px)}
}

/* ============================================================
   SCENE — ASSEMBLED, NOT BORN  (charcoal, mirror of .anomaly)
   ============================================================ */
.origin{
  position:relative;background:var(--char-deep);overflow:hidden;
  display:grid;align-items:center;min-height:0;padding:0;isolation:isolate;
}
.origin::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--char-deep) 14%,rgba(26,26,26,.86) 34%,rgba(26,26,26,0) 56%)}
.origin__art{position:relative;grid-area:1/1;margin:0;z-index:1;width:100%}
.origin__art img,.origin__art .standin{width:100%;height:100%;display:block;
  object-fit:cover;object-position:72% 50%;aspect-ratio:2800/1500}
.origin__art img,.origin__art .standin{clip-path:inset(0 100% 0 0)}
.origin.in .origin__art img,.origin.in .origin__art .standin{
  animation:unmask 1.05s .15s cubic-bezier(.3,.85,.3,1) forwards}
.origin.in .sweep::before{animation:sweep 1.25s .25s ease-out forwards}
.origin__text{grid-area:1/1;position:relative;z-index:3;
  width:min(46%,640px);padding:3rem 2rem 3rem clamp(28px,4vw,72px);justify-self:start}
.origin.in .shine{animation:shine 1.6s 1.1s ease-out forwards}
.origin.in .diag__i{animation:diagIn .5s forwards}
.origin.in .diag__i:nth-child(1){animation-delay:.9s}
.origin.in .diag__i:nth-child(2){animation-delay:1.05s}
.origin.in .diag__i:nth-child(3){animation-delay:1.2s}
.origin.in .diag__line{animation:lineOut .6s cubic-bezier(.2,.8,.3,1) forwards}
.origin.in .diag__i:nth-child(1) .diag__line{animation-delay:.75s}
.origin.in .diag__i:nth-child(2) .diag__line{animation-delay:.9s}
.origin.in .diag__i:nth-child(3) .diag__line{animation-delay:1.05s}
.origin.in .diag__line::after{opacity:1;transition-delay:1.3s}

.kicker{margin:0 0 .9rem;font-family:var(--mono);font-weight:700;font-size:.68rem;
  letter-spacing:.24em;color:var(--orange)}
.kicker--dark{color:var(--char)}
.kicker::before{content:'';display:inline-block;width:26px;height:2px;
  background:var(--orange);vertical-align:middle;margin-right:.7em}
.kicker--dark::before{background:var(--char)}

/* ============================================================
   SCENE — FACIAL RECOGNITION FAILED  (orange, 4-up run)
   ============================================================ */
.faces{position:relative;background:var(--orange);overflow:hidden;
  padding:6rem clamp(28px,4vw,72px) 4rem;isolation:isolate}
.faces__head{max-width:1600px;margin:0 auto 3rem}
.annot--dark{color:var(--char)}
.faces__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
  max-width:1600px;margin:0 auto}
.face{margin:0;position:relative;opacity:0;transform:translateY(30px)}
.faces.in .face{animation:faceIn .55s cubic-bezier(.2,.8,.3,1) forwards}
.faces.in .face:nth-child(1){animation-delay:.05s}
.faces.in .face:nth-child(2){animation-delay:.17s}
.faces.in .face:nth-child(3){animation-delay:.29s}
.faces.in .face:nth-child(4){animation-delay:.41s}
@keyframes faceIn{to{opacity:1;transform:none}}
.face img,.face .standin{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:3px solid var(--char);background:var(--char-deep);
  box-shadow:7px 8px 0 rgba(26,26,26,.5);transition:transform .25s, box-shadow .25s}
.face:hover img,.face:hover .standin{transform:translate(3px,3px);
  box-shadow:3px 4px 0 rgba(26,26,26,.5)}
.face figcaption{margin-top:.7rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.17em;color:var(--char)}

/* ============================================================
   SCENE — SPECIMEN: NATURAL  (orange, diagram overlays)
   ============================================================ */
.spec{position:relative;background:var(--orange);overflow:hidden;
  padding:6rem clamp(28px,4vw,72px) 6rem;isolation:isolate;
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;
  align-items:center;gap:0 2rem}
.spec__grid{position:absolute;inset:0;z-index:0;opacity:.17;pointer-events:none;
  background-image:linear-gradient(var(--char) 1px,transparent 1px),
                   linear-gradient(90deg,var(--char) 1px,transparent 1px);
  background-size:64px 64px}
.spec__head{grid-column:1/-1;grid-row:1;position:relative;z-index:3;
  max-width:1600px;margin:0 auto 2.5rem;width:100%}
.spec__art{grid-column:2;grid-row:2;position:relative;z-index:2;margin:0 auto;
  width:min(430px,34vw);opacity:0;transform:scale(.96)}
.spec.in .spec__art{animation:specIn .8s .1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes specIn{to{opacity:1;transform:none}}
.spec__art img,.spec__art .standin{width:100%;display:block}
/* corner brackets around the figure */
.spec__brk{position:absolute;width:40px;height:40px;border:3px solid var(--char);opacity:0}
.spec.in .spec__brk{animation:brkIn .4s .7s forwards}
@keyframes brkIn{to{opacity:.85}}
.spec__brk--tl{top:-16px;left:-16px;border-right:0;border-bottom:0}
.spec__brk--tr{top:-16px;right:-16px;border-left:0;border-bottom:0}
.spec__brk--bl{bottom:-16px;left:-16px;border-right:0;border-top:0}
.spec__brk--br{bottom:-16px;right:-16px;border-left:0;border-top:0}
/* measurement callouts either side */
.spec__calls{grid-column:1/-1;grid-row:2;list-style:none;margin:0;padding:0;
  position:relative;z-index:3;pointer-events:none;align-self:stretch}
.spec__call{position:absolute;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.11em;color:var(--char);white-space:nowrap;opacity:0;
  background:rgba(255,245,233,.72);padding:.45em .7em;border-left:3px solid var(--char)}
.spec__call b{display:block;font-size:.62rem;letter-spacing:.2em;opacity:.65;font-weight:700}
.spec.in .spec__call{animation:callIn .45s forwards}
.spec.in .spec__call--a{animation-delay:.85s}
.spec.in .spec__call--b{animation-delay:.97s}
.spec.in .spec__call--c{animation-delay:1.09s}
.spec.in .spec__call--d{animation-delay:1.21s}
@keyframes callIn{to{opacity:1}}
.spec__call--a{left:6%;top:20%}
.spec__call--b{left:4%;top:64%}
.spec__call--c{right:6%;top:34%}
.spec__call--d{right:4%;top:76%}

/* ============================================================
   SCENE — CLOSER
   ============================================================ */
.finale{position:relative;background:var(--char);overflow:hidden;
  padding:0 0 5rem;isolation:isolate;display:grid}
.finale__halo{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  width:min(780px,62vw);aspect-ratio:1;border-radius:50%;background:var(--orange);
  z-index:0}
.finale__word{position:absolute;left:50%;top:4%;transform:translateX(-50%);z-index:1;
  font-family:var(--head);font-size:26vw;line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:3px rgba(255,245,233,.2);
  pointer-events:none;user-select:none;white-space:nowrap}
.finale__art{grid-area:1/1;position:relative;z-index:2;margin:0;width:100%;
  opacity:0;transform:translateY(36px);
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
.finale.in .finale__art{animation:artUp .9s .1s cubic-bezier(.2,.8,.3,1) forwards}
.finale__art img,.finale__art .standin{width:100%;display:block}
.finale::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;
  pointer-events:none;background:linear-gradient(0deg,var(--char) 34%,rgba(41,41,41,.82) 60%,rgba(41,41,41,0) 100%)}
.finale__text{grid-area:1/1;align-self:end;position:relative;z-index:4;
  padding:0 clamp(28px,5vw,80px);display:flex;flex-direction:column;align-items:flex-start;
  max-width:760px}
.sub--light{color:rgba(255,245,233,.82)}
.plate--wide{width:100%;max-width:640px;margin-top:1.6rem}

/* ============================================================
   MOBILE — new sections
   ============================================================ */
@media (max-width:900px){
  .origin{grid-template-columns:1fr;grid-template-rows:auto auto;padding:0 0 3.5rem;gap:0}
  .origin::after{display:none}
  .origin__art{grid-area:1/1;width:100%}
  .origin__art img,.origin__art .standin{height:auto;aspect-ratio:auto;object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
  .origin__text{grid-area:2/1;width:100%;justify-self:stretch;padding:1.5rem 24px 0}

  .faces{padding:3.5rem 24px}
  .faces__grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .faces__head{margin-bottom:1.8rem}

  .spec{grid-template-columns:1fr;padding:3.5rem 24px;gap:0}
  .spec__head{grid-column:1;grid-row:1;margin-bottom:1.5rem}
  .spec__art{grid-column:1;grid-row:2;width:min(300px,62vw);margin:0 auto}
  .spec__calls{grid-column:1;grid-row:3;position:static;display:flex;flex-wrap:wrap;
    gap:.6rem;justify-content:center;margin-top:1.8rem}
  .spec__call{position:static;opacity:1;animation:none!important}
  .spec.in .spec__call{animation:none!important}

  .finale{padding:0 0 3rem}
  .finale__word{font-size:34vw}
  .finale__halo{width:86vw;top:20%}
  .finale__text{padding:0 24px;max-width:none}
  .plate--wide{max-width:none}
  .finale__text .plate__btns{flex-wrap:wrap}
  .finale__text .plate__btns .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   MOBILE — stack text around the artwork, keep her readable
   ============================================================ */
@media (max-width:900px){
  :root{--col:100%}
  .hero{min-height:100svh;align-items:flex-start;padding-top:46vh}
  .hero__banner{width:auto;height:46vh;min-width:0;top:0;left:50%;
    transform:translateX(-50%);object-fit:cover;object-position:72% 28%;
    animation:bannerInM 1s .15s ease-out both}
  @keyframes bannerInM{from{opacity:0}to{opacity:1}}
  .hero__art::after{background:linear-gradient(0deg,rgba(237,89,40,.96) 50%,transparent 72%)}
  .hero__col{width:100%;min-width:0;max-width:none}
  .hero__wrap::before{width:100%;min-width:0}
  .title{font-size:clamp(2.6rem,13vw,4.6rem)}
  .hero__ant{font-size:58vw;bottom:-2vh}
  .hero__edge{display:none}
  .brackets{display:none}
  .plate__btns{flex-wrap:wrap}
  .plate__btns .btn{flex:1 1 auto;justify-content:center}

  .strips{margin-top:-2rem}
  .strip__track span{font-size:1.5rem}
  .strip--ghost .strip__track span{font-size:1.05rem}

  .anomaly{grid-template-columns:1fr;grid-template-rows:auto auto;
    min-height:0;padding:0 0 3.5rem;gap:0}
  .anomaly::after{display:none}
  .anomaly__art{grid-area:1/1;width:100%}
  .anomaly__art img,.anomaly__art .standin{height:auto;aspect-ratio:auto;
    object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
  .anomaly__text{grid-area:2/1;width:100%;justify-self:stretch;padding:1.5rem 24px 0}
  .anomaly__circle{right:-34vw;top:6%;width:100vw;height:100vw;transform:none;opacity:.85}
  .anomaly__text .annot{color:var(--char);background:var(--ivory);
    display:inline-block;padding:.35em .6em}
  .diag__line{display:none}
  .body{max-width:none}

  .natural{min-height:0;padding:4rem 0 3rem}
  .natural__art{width:100%}
  .natural__ant span{font-size:26vw}
  .frag,.tape{display:none}
  .stamp{right:4vw;bottom:auto;top:4%;width:120px;border-width:4px;font-size:.78rem}
  .natural__text{padding:0 24px;margin-top:2rem}
  .h-big{font-size:clamp(2.2rem,10vw,3.4rem)}
  .natural__btns{width:100%}
  .natural__btns .btn{flex:1;justify-content:center}

  .foot{flex-wrap:wrap;gap:.6rem;font-size:.7rem;padding:1rem 24px}
}

/* ---------- visitor count ----------
   The hosted counter unhides #website_visits_aaron and writes the number into
   it once it resolves. Until then it stays hidden, so nothing flashes. */
#website_visits_aaron{
  position:absolute;right:14px;bottom:18px;z-index:5;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(255,245,233,.6);pointer-events:none;
}
#website_visits_aaron:not([hidden])::before{content:'VISITS ';opacity:.7}
@media (max-width:900px){#website_visits_aaron{display:none}}