/* ============================================================
   ÓRBITA — estúdio, Lisboa
   Dez mundos, um método. The frame never outshines the worlds.
   Constitution: /studio/DESIGN-SYSTEM.md
   ============================================================ */

:root{
  /* palette — closed set */
  --void:      #0B0B0D;   /* the field */
  --void-2:    #121216;   /* raised panels */
  --paper:     #ECEAE6;   /* primary ink */
  --paper-60:  rgba(236,234,230,.62);
  --paper-40:  rgba(236,234,230,.42);
  --paper-24:  rgba(236,234,230,.24);
  --line:      rgba(236,234,230,.14);   /* structural hairlines */
  --line-soft: rgba(236,234,230,.07);   /* sub-hairlines */
  --acid:      #E8FF47;   /* annotation ink — never a surface */
  --acid-24:   rgba(232,255,71,.24);

  /* type */
  --display: "Cabinet Grotesk", sans-serif;
  --body:    "Archivo", sans-serif;
  --mono:    "Space Mono", monospace;

  /* rhythm */
  --gutter: clamp(20px, 4.5vw, 72px);
  --sect-y: clamp(6rem, 14vh, 11rem);

  /* motion */
  --ease-orbit: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hard:  cubic-bezier(0.83, 0, 0.17, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--void); }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
body{
  background:var(--void); color:var(--paper);
  font:400 1rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--acid); color:var(--void); }
:focus-visible{ outline:1px solid var(--acid); outline-offset:3px; }
a{ color:inherit; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---- shared primitives ---------------------------------- */

.lbl{
  font:400 0.6875rem/1.6 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-40);
}
.lbl b{ font-weight:400; color:var(--acid); }
.en{ color:var(--paper-40); }
.en::before{ content:"— "; color:var(--paper-24); }

.sect{ padding:var(--sect-y) var(--gutter); position:relative; }
.sect-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--line);
  padding:1rem 0 clamp(2.5rem, 6vh, 4.5rem);
}
.sect-head .no{ color:var(--acid); }
.sect-head .note{ text-align:right; }

.h2{
  font:700 clamp(2.1rem, 5.2vw, 4.6rem)/1.02 var(--display);
  letter-spacing:-0.02em;
  max-width:20ch;
}
.h2 em{ font-style:normal; color:var(--acid); }
.lead{
  color:var(--paper-60); max-width:38rem;
  font-size:clamp(0.98rem, 1.15vw, 1.1rem);
}
.lead strong{ color:var(--paper); font-weight:500; }

/* ---- nav -------------------------------------------------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.1rem var(--gutter);
  pointer-events:none;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(11,11,13,.86), rgba(11,11,13,0));
  opacity:0; transition:opacity .5s var(--ease-orbit);
}
body.scrolled .nav::before{ opacity:1; }
.nav > *{ pointer-events:auto; }
.nav-brand{
  font:800 1.05rem/1 var(--display); letter-spacing:.06em;
  text-decoration:none; display:flex; align-items:center; gap:.6rem;
}
.nav-brand i{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--acid); position:relative; font-style:normal;
}
.nav-brand i::after{
  content:""; position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--acid); top:-2px; left:50%; margin-left:-1px;
}
.nav-links{ display:flex; gap:clamp(1rem, 2.4vw, 2.2rem); }
.nav-links a{
  font:400 0.6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-60); text-decoration:none; padding:.85rem 0;
  transition:color .3s var(--ease-orbit);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a em{ font-style:normal; color:var(--acid); margin-right:.45em; }
.nav-clock{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.nav-burger{ display:none; }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-clock b{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    padding:.8rem .2rem .8rem .9rem;
  }
  .nav-burger span{ width:22px; height:1px; background:var(--paper); transition:transform .35s var(--ease-orbit); }
  html.menu-open .nav-burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
  html.menu-open .nav-burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
}
.site-menu{
  position:fixed; inset:0; z-index:90;
  background:rgba(11,11,13,.97);
  display:flex; align-items:center; padding:0 var(--gutter);
}
.site-menu[hidden]{ display:none; }
.site-menu nav{ display:flex; flex-direction:column; gap:1.5rem; }
.site-menu a{
  font:700 clamp(1.8rem, 7vw, 2.6rem)/1 var(--display); letter-spacing:-0.01em;
  color:var(--paper); text-decoration:none;
}
.site-menu a em{
  font:400 0.75rem/1 var(--mono); font-style:normal; color:var(--acid);
  letter-spacing:.16em; margin-right:.9rem; vertical-align:.35em;
}

/* ---- orbital hero ---------------------------------------- */

.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-field{ position:absolute; inset:0; }

/* star field (canvas) */
#stars{ position:absolute; inset:0; width:100%; height:100%; opacity:.8; }

/* the sun: the wordmark */
.hero-mark{
  position:absolute; left:50%; top:44%; translate:-50% -50%;
  z-index:5; pointer-events:none;
  font:800 clamp(4rem, 11.5vw, 11.5rem)/0.86 var(--display);
  letter-spacing:-0.015em; text-align:center; white-space:nowrap;
  color:var(--paper);
}
.hero-mark span{ display:inline-block; }

/* orbit rings (SVG) */
.orbit-rings{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.orbit-rings ellipse{ fill:none; stroke:var(--line-soft); stroke-width:1; }
.orbit-rings .ring-tick{ fill:var(--paper-24); }

/* bodies */
.body{
  position:absolute; left:0; top:0;
  width:var(--bw, 168px);
  padding:0; text-align:left;
  will-change:transform;
}
.body-screen{
  position:relative; aspect-ratio:1200/630; overflow:hidden;
  background:var(--void-2); border:1px solid var(--line);
  transition:border-color .35s var(--ease-orbit);
}
.body-screen img{ width:100%; height:100%; object-fit:cover; }
.body-screen video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top;
  pointer-events:none; background:var(--void-2);
  /* crossfade-on-ready: invisible over the og.jpg until JS says the
     loop has PAINTED; CSS owns this opacity, GSAP never */
  opacity:0; transition:opacity .25s var(--ease-orbit);
}
.body-screen video.is-on{ opacity:1; }
.body-tag{
  display:flex; justify-content:flex-start; align-items:baseline; gap:.6rem;
  margin-top:.55rem;
  font:400 0.625rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-40);
  opacity:var(--tagop, 1);
}
.body-tag em{ font-style:normal; color:var(--acid); }
.body-tag i{ margin-left:auto; font-style:normal; }
.body-tag > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.body:hover .body-screen, .body:focus-visible .body-screen{ border-color:var(--acid-24); }
.body.is-live .body-tag{ color:var(--paper-60); }
.body.is-live .body-tag i{ font-style:normal; color:var(--acid); }

/* hero foot */
.hero-foot{
  position:relative; z-index:6;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  padding:0 var(--gutter) clamp(1.4rem, 4vh, 2.6rem);
}
.hero-foot .cue{ display:flex; align-items:center; gap:.8rem; }
.cue .t-mobile{ display:none; }
@media (max-width:820px), (pointer:coarse){
  .cue .t-desktop{ display:none; }
  .cue .t-mobile{ display:inline; }
}
.cue-line{ width:1px; height:34px; background:var(--paper-24); position:relative; overflow:hidden; }
.cue-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--acid); animation:cuedrop 2.6s var(--ease-orbit) infinite;
}
@keyframes cuedrop{ 0%{ top:-100%; } 55%{ top:100%; } 100%{ top:100%; } }
.hero-kicker{
  position:absolute; z-index:6; bottom:clamp(4.6rem, 11vh, 6.4rem);
  left:50%; translate:-50% 0; text-align:center; width:max-content; max-width:60vw;
}

/* mobile constellation */
.constellation{ display:none; }

@media (max-width:820px), (pointer:coarse){
  .hero{ min-height:auto; padding-top:clamp(6.5rem, 18vh, 9rem); }
  .hero-field, .orbit-rings{ position:absolute; }
  .hero-mark{
    position:relative; left:auto; top:auto; translate:none;
    font-size:clamp(4rem, 19vw, 7rem);
  }
  .hero-kicker{ position:relative; top:auto; bottom:auto; left:auto; translate:none; margin:1.2rem auto 0; max-width:90vw; }
  .orbit-stage{ display:none; }
  .constellation{
    display:block; position:relative; z-index:6;
    padding:clamp(3rem, 8vh, 5rem) var(--gutter) 0;
  }
  .const-line{
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:var(--line-soft);
  }
  .const-item{ position:relative; padding:0 0 3.2rem; }
  .const-item::before{
    content:""; position:absolute; left:50%; top:-1.35rem; margin-left:-2.5px;
    width:5px; height:5px; border-radius:50%;
    background:var(--paper-24); transition:background .4s var(--ease-orbit);
  }
  .const-item.is-live::before{ background:var(--acid); }
  .const-item .body{ position:relative; width:100%; --bw:100%; display:block; }
  .hero-foot{ position:relative; padding-top:1rem; }
  .hero-foot .coords{ display:none; }
}

/* ---- world modal ------------------------------------------ */

.modal{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(11,11,13,.92);
}
.modal.open{ display:flex; flex-direction:column; }
.modal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem var(--gutter);
  border-bottom:1px solid var(--line);
  background:var(--void);
}
.modal-bar .m-name{ font:700 1rem/1 var(--display); letter-spacing:.02em; }
.modal-bar .m-meta{ display:none; }
@media (min-width:700px){ .modal-bar .m-meta{ display:block; } }
.modal-enter{
  font:400 0.6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--void); background:var(--acid); text-decoration:none;
  padding:.8rem 1.1rem; transition:opacity .25s;
}
.modal-enter:hover{ opacity:.85; }
.modal-close{
  font:400 0.6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-60); padding:.8rem .2rem .8rem 1rem;
}
.modal-close:hover{ color:var(--paper); }
.modal-frame{ flex:1; position:relative; background:var(--void-2); overflow:hidden; }
.modal-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  /* optical focus: the world settles from blur over 300ms on open */
  transition:filter .3s var(--ease-orbit), transform .3s var(--ease-orbit);
}
.modal-frame iframe.is-settling{ filter:blur(14px); transform:scale(1.02); }

/* ---- selected works bands --------------------------------- */

.bands{ display:flex; flex-direction:column; gap:2px; }
.band{
  position:relative; height:clamp(24rem, 78vh, 46rem); overflow:hidden;
  display:block; text-decoration:none; background:var(--void-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band-screen{ position:absolute; inset:0; overflow:hidden; }
.band-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.band-screen video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top;
  pointer-events:none; background:var(--void-2);
  opacity:0; transition:opacity .6s var(--ease-orbit);
}
.band.is-live .band-screen video{ opacity:1; }
.band-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,11,13,.88) 0%, rgba(11,11,13,.25) 34%, rgba(11,11,13,0) 55%);
  pointer-events:none;
}
.band-cap{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(1.2rem, 4vh, 2.4rem);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.band-name{
  font:700 clamp(2rem, 4.6vw, 4rem)/1 var(--display); letter-spacing:-0.02em;
  color:var(--paper);
}
.band-cap .lbl{ margin-top:.5rem; }
.band-enter{
  font:400 0.6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); white-space:nowrap;
  border-bottom:1px solid var(--acid); padding-bottom:.45rem;
  transition:color .3s var(--ease-orbit);
}
.band:hover .band-enter{ color:var(--acid); }

/* ---- method ------------------------------------------------ */

.acts{ display:flex; flex-direction:column; gap:clamp(4rem, 10vh, 7.5rem); }
.act{
  display:grid; grid-template-columns:minmax(0, 5rem) minmax(0, 1fr);
  gap:clamp(1rem, 4vw, 4rem);
  border-top:1px solid var(--line-soft); padding-top:1.4rem;
}
.act-no{ font:400 0.75rem/2 var(--mono); letter-spacing:.16em; color:var(--acid); }
.act h3{
  font:600 clamp(1.7rem, 3.6vw, 3.1rem)/1.05 var(--display); letter-spacing:-0.015em;
  margin-bottom:1.1rem; max-width:22ch;
}
.act .lead{ margin-bottom:1.6rem; }
@media (max-width:700px){
  .act{ grid-template-columns:1fr; gap:.6rem; }
}

/* régua list */
.regua{ border-top:1px solid var(--line-soft); max-width:44rem; }
.regua li{
  list-style:none; display:grid;
  grid-template-columns:minmax(7rem, 12rem) auto 1fr;
  align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
  font:400 0.75rem/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
}
.regua li b{ font-weight:400; color:var(--paper); }
.regua li i{ font-style:normal; color:var(--acid); }
.regua li span{ color:var(--paper-40); }
@media (max-width:560px){
  .regua li{ grid-template-columns:1fr; gap:.15rem; }
  .regua li i{ display:none; }
}

/* proof figures (before/after artifacts) */
.proofs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap:clamp(1.4rem, 3vw, 2.5rem); margin-top:2.4rem;
}
.proof{ border:1px solid var(--line); background:var(--void-2); padding:1.1rem; }
.proof-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.proof-shot{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border:1px solid var(--line-soft);
}
.proof-shot .tag{
  position:absolute; top:.5rem; left:.5rem; z-index:3;
  font:400 0.575rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-60); background:rgba(11,11,13,.7); padding:.3rem .45rem;
}
.proof-cap{
  margin-top:.9rem;
  font:400 0.6875rem/1.7 var(--mono); letter-spacing:.06em;
  color:var(--paper-60); text-transform:none;
}
.proof-cap b{ font-weight:400; color:var(--acid); text-transform:uppercase; letter-spacing:.14em; }

/* albacora artifact internals */
.fig-alb{ background:linear-gradient(to bottom, #123249 0%, #0B2233 42%, #06141F 100%); }
.fig-alb .horizon{
  position:absolute; left:0; right:0; top:42%; height:1px; background:#FAF8F2;
}
.fig-alb .plate{
  position:absolute; left:18%; right:18%; top:56%; bottom:14%;
  border:1px solid rgba(200,169,126,.35);
}
.fig-alb .boat{ position:absolute; width:5px; height:5px; border-radius:50%; background:#E4572E; left:30%; top:41%; margin-top:-2px; }
.fig-alb.is-broken .horizon{ opacity:.09; }

/* casa-almeida artifact internals */
.fig-ca{ background:#F6F3EC; }
.fig-ca .lot{
  position:absolute; inset:12% 10% auto; height:30%;
  border:1px solid rgba(20,18,16,.2);
}
.fig-ca .lot::after{
  content:"LOTE 07"; position:absolute; left:8%; top:30%;
  font:400 .55rem var(--mono); letter-spacing:.2em; color:#141210;
}
.fig-ca .lot{ background:#F6F3EC; z-index:2; }
.fig-ca .menu{
  position:absolute; inset:0 45% 0 0; background:#141210; z-index:4;
}
.fig-ca .menu i{
  position:absolute; left:14%; height:1px; background:rgba(246,243,236,.7); font-style:normal;
}
.fig-ca .menu i:nth-child(1){ top:24%; width:40%; }
.fig-ca .menu i:nth-child(2){ top:38%; width:52%; }
.fig-ca .menu i:nth-child(3){ top:52%; width:34%; }
.fig-ca .reddot{ position:absolute; right:16%; bottom:18%; width:7px; height:7px; border-radius:50%; background:#C22E22; }
.fig-ca.is-broken .menu{ z-index:1; opacity:.85; }  /* the trap: menu opens BEHIND the catalogue */
.proof-shot .tag{ z-index:6; }

/* typed constitution excerpt */
.typed{
  margin-top:2.6rem; border-left:1px solid var(--acid-24);
  padding:0.4rem 0 0.4rem clamp(1rem, 3vw, 2rem);
  max-width:46rem;
}
.typed pre{
  font:400 clamp(0.72rem, 1.05vw, 0.82rem)/1.9 var(--mono);
  color:var(--paper-60); white-space:pre-wrap; word-break:break-word;
}
.typed pre em{ font-style:normal; color:var(--acid); }
.typed .src{ display:block; margin-top:1rem; }

/* transparency statement */
.statement{
  padding:var(--sect-y) var(--gutter);
  border-top:1px solid var(--line);
}
.statement .big{
  font:600 clamp(1.6rem, 3.8vw, 3.4rem)/1.18 var(--display); letter-spacing:-0.015em;
  max-width:26ch;
}
.statement .big em{ font-style:normal; color:var(--acid); }
.statement .lead{ margin-top:1.6rem; }

/* ---- offer ------------------------------------------------- */

.offer-title{
  font:800 clamp(2.4rem, 7vw, 6.4rem)/0.98 var(--display); letter-spacing:-0.025em;
  max-width:14ch;
}
.offer-list{ margin:clamp(2.5rem, 6vh, 4rem) 0 0; max-width:52rem; }
.offer-list li{
  list-style:none; display:grid;
  grid-template-columns:minmax(6rem, 10rem) 1fr;
  gap:clamp(1rem, 3vw, 2.5rem);
  padding:1.5rem 0; border-top:1px solid var(--line-soft);
}
.offer-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.offer-list h4{ font:600 1.05rem/1.4 var(--display); letter-spacing:.01em; }
.offer-list h4 .lbl{ display:block; margin-top:.2rem; }
.offer-list p{ color:var(--paper-60); font-size:.95rem; max-width:34rem; }
@media (max-width:600px){
  .offer-list li{ grid-template-columns:1fr; gap:.4rem; }
}
.offer-contact{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 3rem;
}
.offer-mail{
  font:700 clamp(1.5rem, 4.4vw, 3.6rem)/1.1 var(--display); letter-spacing:-0.01em;
  color:var(--paper); text-decoration:none;
  background:linear-gradient(var(--acid), var(--acid)) left bottom / 0% 2px no-repeat;
  transition:background-size .6s var(--ease-hard), color .3s;
  overflow-wrap:anywhere;
}
.offer-mail:hover{ background-size:100% 2px; color:var(--acid); }

/* ---- footer ------------------------------------------------ */

footer{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap:2.5rem; margin-bottom:3rem;
}
.foot-grid h5{ margin-bottom:1rem; font-weight:400; }
.foot-grid a{
  color:var(--paper-60); text-decoration:none;
  font:400 0.75rem/2.1 var(--mono); letter-spacing:.08em;
  transition:color .25s;
}
.foot-grid a:hover{ color:var(--acid); }
.foot-grid ul{ list-style:none; columns:2; column-gap:2rem; }
.foot-bot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2.5rem;
  border-top:1px solid var(--line-soft); padding-top:1.6rem;
}
.foot-bot a{ color:var(--paper-60); text-decoration:none; border-bottom:1px solid var(--acid-24); }
.foot-bot a:hover{ color:var(--acid); }

/* ---- case pages (/studio/work/<slug>/) --------------------- */

.case-head{ padding:clamp(7rem, 16vh, 10rem) var(--gutter) 0; }
.case-title{
  font:800 clamp(3rem, 11vw, 10rem)/0.9 var(--display); letter-spacing:-0.025em;
  margin:1.2rem 0 1.6rem;
}
.case-embed{
  position:relative; margin:clamp(2.5rem, 6vh, 4rem) var(--gutter) 0;
  height:clamp(22rem, 74vh, 44rem);
  border:1px solid var(--line); overflow:hidden; background:var(--void-2);
}
.case-embed iframe{
  position:absolute; top:0; left:0; border:0;
  width:1440px; height:2000px;
  transform:scale(var(--fs,1)); transform-origin:0 0;
  background:var(--void-2);
}
.case-embed .enter{
  position:absolute; right:1.2rem; bottom:1.2rem; z-index:3;
  font:400 0.6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--void); background:var(--acid); text-decoration:none;
  padding:.85rem 1.2rem;
}
.case-embed .enter:hover{ opacity:.88; }
@media (pointer:coarse){ .case-embed iframe{ pointer-events:none; } }

.spec-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap:clamp(2rem, 5vw, 4rem);
}
.chips{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.4rem; }
.chip{ text-align:left; }
.chip i{
  display:block; width:clamp(3.4rem, 6vw, 4.6rem); height:clamp(3.4rem, 6vw, 4.6rem);
  border-radius:50%; border:1px solid var(--line); margin-bottom:.6rem;
}
.chip .lbl{ letter-spacing:.1em; }
.specimen{ margin-top:1.4rem; display:flex; flex-direction:column; gap:1.1rem; }
.specimen .sp{ border-top:1px solid var(--line-soft); padding-top:1rem; }
.specimen .sp p{ font-size:clamp(1.4rem, 2.6vw, 2.2rem); line-height:1.15; }
.case-note{
  border:1px solid var(--line); background:var(--void-2);
  padding:clamp(1.4rem, 3vw, 2.2rem); max-width:44rem; margin-top:2.4rem;
}
.case-note .lbl{ margin-bottom:.8rem; display:block; }
.case-note p{ color:var(--paper-60); font-size:.95rem; }
.case-nav{
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line); margin-top:var(--sect-y);
  padding:2rem var(--gutter) 0;
}
.case-nav a{
  text-decoration:none; color:var(--paper-60);
  font:600 clamp(1.2rem, 2.6vw, 2rem)/1.2 var(--display);
  transition:color .3s;
}
.case-nav a:hover{ color:var(--acid); }
.case-nav a .lbl{ display:block; margin-bottom:.4rem; }

/* ---- method page ------------------------------------------- */

.method-hero{ padding:clamp(8rem, 20vh, 12rem) var(--gutter) 0; }
.method-hero h1{
  font:800 clamp(2.6rem, 8vw, 7rem)/0.95 var(--display); letter-spacing:-0.025em;
  max-width:14ch; margin:1.2rem 0 1.8rem;
}
.method-hero h1 em{ font-style:normal; color:var(--acid); }
.prose{ max-width:40rem; }
.prose p{ color:var(--paper-60); margin-bottom:1.3rem; font-size:clamp(0.98rem, 1.15vw, 1.08rem); }
.prose p strong{ color:var(--paper); font-weight:500; }
.pull{
  font:600 clamp(1.4rem, 3vw, 2.4rem)/1.25 var(--display); letter-spacing:-0.01em;
  color:var(--paper); margin:2.2rem 0; max-width:30ch;
}
.pull em{ font-style:normal; color:var(--acid); }

/* ---- scroll hygiene: below-fold sections render on approach --
   content-visibility:auto skips layout/paint for offscreen
   sections; `auto <estimate>` keeps the scrollbar honest until
   the first render, then remembers the real height. JS refreshes
   ScrollTrigger once per section on first un-skip. */
#metodo, .statement, #contacto, footer{ content-visibility:auto; }
#metodo{ contain-intrinsic-size:auto 2600px; }
.statement{ contain-intrinsic-size:auto 640px; }
#contacto{ contain-intrinsic-size:auto 1200px; }
footer{ contain-intrinsic-size:auto 480px; }

/* ---- reveals (fail-open: visible by default) ---------------- */
[data-reveal]{ will-change:transform, opacity; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}