/* ============================================================================
   EXTERA — base (v3): reset, elite type, editorial layout, scroll-reveal
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-body);background:var(--surface-page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01";overflow-x:hidden;
}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--action);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sky);color:var(--deepwater)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

.skip{position:absolute;left:14px;top:-64px;z-index:200;background:var(--deepwater);color:#fff;
  padding:11px 18px;border-radius:var(--radius-md);font-weight:700;font-size:var(--fs-small);transition:top var(--dur) var(--ease)}
.skip:focus{top:14px;color:#fff}

/* --- Layout primitives ------------------------------------------------- */
.shell{width:100%;max-width:var(--shell-max);margin-inline:auto;padding-inline:var(--shell-pad)}
.shell--narrow{max-width:var(--shell-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(3rem,2rem + 4vw,5rem)}
.band-white{background:var(--surface-page);color:var(--text-body)}
.band-paper{background:var(--paper);color:var(--text-body)}
.band-soft{background:var(--surface-soft);color:var(--text-body)}
.band-dark{background:var(--deepwater);color:var(--text-on-dark)}
.band-abyss{background:var(--deepwater-2);color:var(--text-on-dark)}
.band-dark a,.band-abyss a{color:#fff}

.grid{display:grid;gap:var(--space-6)}
.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1040px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-content:start}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

/* --- Grain / depth ----------------------------------------------------- */
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  background-size:180px;opacity:.05;pointer-events:none;mix-blend-mode:overlay;z-index:1}
.band-dark.grain::after,.band-abyss.grain::after{opacity:.07}

/* --- Type utilities ---------------------------------------------------- */
.display{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  line-height:var(--lh-display);text-transform:uppercase;letter-spacing:var(--tk-display);
  color:var(--text-heading);text-wrap:pretty;overflow-wrap:break-word;max-width:100%}
.d1{font-size:var(--fs-d1)} .d2{font-size:var(--fs-d2)}
.h2{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:var(--fs-h2);line-height:var(--lh-tight);text-transform:uppercase;
  letter-spacing:var(--tk-display);color:var(--text-heading);text-wrap:pretty;overflow-wrap:break-word;max-width:100%}
.h3{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:700;
  font-size:var(--fs-h3);line-height:1.14;text-transform:uppercase;letter-spacing:.015em;color:var(--text-heading)}
.on-dark,.on-dark .display,.on-dark .h2,.on-dark .h3,
.band-dark .display,.band-dark .h2,.band-dark .h3,
.band-abyss .display,.band-abyss .h2,.band-abyss .h3,
.phero .display,.phero .h2,.phero .h3{color:#fff}

/* One boxed word per composition */
.boxed{display:inline-block;background:var(--deepwater);color:#fff;padding:.015em .18em .06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.on-dark .boxed,.band-dark .boxed,.band-abyss .boxed{background:#fff;color:var(--deepwater)}
/* Steel outline word — an alternative accent for one word */
.mark{color:var(--steel)}

.eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--fs-eyebrow);
  letter-spacing:var(--tk-eyebrow);text-transform:uppercase;color:var(--steel);
  display:inline-flex;align-items:center;gap:.6rem}
.band-dark .eyebrow,.band-abyss .eyebrow,.on-dark .eyebrow{color:var(--sky)}
.eyebrow::before{content:attr(data-n);font-variant-numeric:tabular-nums;color:var(--text-muted);
  font-weight:700}
.band-dark .eyebrow::before,.on-dark .eyebrow::before{color:var(--text-on-dark-3)}
.eyebrow[data-n]::after{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.4}

.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-secondary);max-width:54ch;font-weight:400}
.band-dark .lead,.band-abyss .lead,.on-dark .lead{color:var(--text-on-dark-2)}
.muted{color:var(--text-muted)} .small{font-size:var(--fs-small)} .fine{font-size:var(--fs-fine)}
.center{text-align:center} .measure{max-width:60ch}

.sec-head{display:grid;gap:var(--space-5);max-width:60ch}
.sec-head--center{margin-inline:auto;justify-items:center;text-align:center}
.rule{height:1px;background:var(--hairline);border:none}
.band-dark .rule,.band-abyss .rule{background:var(--line-dark)}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Scroll reveal (scoped to .js so content is always visible without JS) */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.08s}
.js [data-reveal="3"]{transition-delay:.16s}
.js [data-reveal="4"]{transition-delay:.24s}