/* effing.tech — "The Descent": shared tokens, header, field, spine, gauge, hero and contact.
   Page chapters live in home-v1.css and work-v1.css. Direction and rules: docs/DESIGN.md */
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
  /* brand */
  --navy:#06080f;--abyss:#03050b;--ice:#eef4ff;--cobalt:#0a84ff;--cobalt-hi:#5cb0ff;--cobalt-deep:#0650b0;
  --surface:#0d1829;--panel:#132035;--steel:#64748b;--signal:#e8192c;
  /* derived */
  --rule:color-mix(in srgb,var(--ice) 18%,transparent);
  --ice-soft:color-mix(in srgb,var(--ice) 82%,transparent);
  --cobalt-line:color-mix(in srgb,var(--cobalt) 50%,transparent);
  --cobalt-glow:color-mix(in srgb,var(--cobalt) 60%,transparent);
  --cobalt-haze:color-mix(in srgb,var(--cobalt) 16%,transparent);
  --cobalt-mist:color-mix(in srgb,var(--cobalt) 7%,transparent);
  --glass:color-mix(in srgb,var(--surface) 58%,transparent);--glass-solid:color-mix(in srgb,var(--surface) 90%,transparent);
  --glass-edge:color-mix(in srgb,var(--cobalt-hi) 38%,transparent);
  --navy-line:color-mix(in srgb,var(--navy) 35%,transparent);
  --navy-ghost:color-mix(in srgb,var(--navy) 9%,transparent);
  --abyss-veil:color-mix(in srgb,var(--abyss) 72%,transparent);
  --sheen:color-mix(in srgb,var(--ice) 22%,transparent);
  /* type */
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --body:1rem;--small:.875rem;--micro:.75rem;--lead:clamp(1.125rem,1.5vw,1.375rem);
  --display:clamp(3rem,7.4vw,7.5rem);--heading:clamp(2.5rem,4.6vw,4.5rem);--subheading:clamp(1.6rem,2.4vw,2.25rem);--step-title:clamp(1.25rem,1.8vw,1.6rem);
  --mark:clamp(9rem,24vw,25rem);--mobile-mark:6rem;--numeral:clamp(3.5rem,6vw,5.5rem);--core-mark:clamp(18rem,48vw,46rem);
  --tight:1.02;--heading-leading:1.06;--body-leading:1.7;--copy-leading:1.35;--quote-leading:1.5;
  --display-tracking:-.045em;--heading-tracking:-.035em;--word-gap:.1em;--mark-tracking:-.12em;--label-tracking:.14em;--wordmark-tracking:.03em;
  /* space */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;--space-10:9rem;
  --gutter:clamp(1.25rem,5vw,5rem);--shell:80rem;--chapter-space:clamp(5rem,11vw,10rem);--gap:clamp(2rem,6vw,6rem);
  --measure:52ch;--hero-measure:38ch;
  /* shape */
  --hairline:1px;--beam:2px;--focus-width:3px;--focus-offset:5px;--radius:.5rem;--radius-lg:1.25rem;
  --touch:2.75rem;--header-height:5.5rem;--logo:2.75rem;--wordmark:1.0625rem;--node:.875rem;
  --button-height:3.5rem;--route-height:3.75rem;--gauge-h:38vh;--stack-step:4.75rem;
  --spine-offset:clamp(1rem,3vw,2.75rem);
  --blur:16px;--glow:0 0 1.5rem var(--cobalt-glow);--lift:0 2rem 4rem -1.5rem var(--abyss);
  /* motion */
  --fast:180ms;--med:420ms;--slow:1100ms;--ease:cubic-bezier(.2,.8,.2,1);
  --approach-measure:34ch;--figure-measure:30ch;--tilt-x:8deg;--tilt-y:6deg;--perspective:1400px;
  --delay-1:120ms;--delay-2:260ms;--delay-3:380ms;--delay-4:520ms;
  --rise:2.5rem;--swing-x:4rem;--swing-y:6rem;--swing-y-late:9rem;--swing-z:-10rem;--swing-angle:28deg;--land-y:4rem;--land-z:-6rem;--land-angle:-32deg;--drift-in:-12%;--drift-x:-8%;--drift-y:8%;
  /* glows and halos */
  --glow-line:0 0 .4rem var(--cobalt);--glow-head:0 0 1rem var(--cobalt),0 0 3rem var(--cobalt);
  --glow-button:0 .75rem 2.5rem -.75rem var(--cobalt-glow);--glow-button-hover:0 0 0 .4rem var(--cobalt-haze),0 1rem 3rem -.5rem var(--cobalt-glow);
  --glow-mark:0 0 2rem var(--cobalt-glow),0 0 6rem var(--cobalt-haze);--glow-panel:0 0 6rem -1rem var(--cobalt-glow);--glow-numeral:0 0 2rem var(--cobalt-haze);
  --glass-inner:inset 0 0 4rem var(--cobalt-mist);--panel-shade:inset 0 -1rem 3rem -1rem var(--cobalt-deep);--core-shade:inset 0 -6rem 8rem -6rem var(--cobalt-deep);
  --halo:0 0 .25rem var(--navy),0 0 .75rem var(--navy),0 0 1.5rem var(--navy);
  /* component sizes */
  --spine-fade:6rem;--card-pad:clamp(1.75rem,3.5vw,3.25rem);--step-pad:clamp(1.5rem,3vw,2.5rem);--step-min:17rem;--end-mark:clamp(6rem,12vw,11rem);--mobile-node:.625rem;
  --numeral-tracking:-.06em;--title-tracking:-.02em;--lead-tracking:-.03em;--marker-top:1.15em;--core-mark-drop:-.18em;--core-mark-bleed:-4vw;--numeral-leading:.9;
}

*{box-sizing:border-box}
html{scroll-padding-top:var(--header-height);background:var(--navy)}
body{margin:0;background:radial-gradient(120% 70% at 85% 0%,var(--cobalt-mist),transparent 60%),var(--navy);color:var(--ice);font-family:var(--sans);font-size:var(--body);line-height:var(--body-leading);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:url("/assets/grain-v1.svg");opacity:.05}
h1,h2,h3,p,blockquote{margin:0}
h1,h2,h3{font-weight:800;text-wrap:balance;word-spacing:var(--word-gap)}
h1{font-size:var(--display);line-height:var(--tight);letter-spacing:var(--display-tracking);max-width:11ch}
h2{font-size:var(--heading);line-height:var(--heading-leading);letter-spacing:var(--heading-tracking)}
h3{font-size:var(--subheading);line-height:var(--heading-leading);letter-spacing:var(--heading-tracking)}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:var(--space-1);text-decoration-thickness:var(--hairline)}
a:focus-visible{outline:var(--focus-width) solid var(--ice);outline-offset:var(--focus-offset);border-radius:var(--space-1)}
img{display:block;max-width:100%}
.shell{width:min(calc(100% - var(--gutter)*2),var(--shell));margin-inline:auto}
.accent{color:var(--cobalt)}

.skip-link{position:fixed;top:var(--space-4);left:var(--space-4);z-index:30;padding:var(--space-3) var(--space-5);background:var(--ice);color:var(--navy);font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}

/* ---- the field (WebGL) and instruments --------------------------------- */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity var(--slow) var(--ease)}
.gl-on .field{opacity:1}
.gauge{position:fixed;right:var(--space-4);top:50%;z-index:9;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-2) var(--space-4) var(--space-3);border-radius:999px;background:var(--abyss-veil);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));translate:0 -50%;pointer-events:none}
.gauge-track{position:relative;display:block;width:var(--beam);height:var(--gauge-h);background:repeating-linear-gradient(to bottom,var(--cobalt-line) 0 var(--hairline),transparent var(--hairline) 25%),var(--rule)}
.gauge-fill{position:absolute;inset:0;background:var(--cobalt);box-shadow:var(--glow);transform-origin:top;transform:scaleY(var(--p,0))}
.gauge-dot{position:absolute;left:50%;top:0;width:var(--space-3);height:var(--space-3);margin:calc(var(--space-3)/-2) 0 0 calc(var(--space-3)/-2);border-radius:50%;background:var(--signal);box-shadow:0 0 0 var(--space-1) var(--navy);translate:0 calc(var(--p,0)*var(--gauge-h))}
.gauge-label{writing-mode:vertical-rl;font-family:var(--mono);font-weight:700;font-size:var(--micro);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--cobalt)}

/* ---- header ------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:10;background:var(--abyss-veil);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);backdrop-filter:blur(var(--blur)) saturate(1.4);border-bottom:var(--hairline) solid var(--rule)}
.header-inner{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;font-size:var(--wordmark);font-weight:800;letter-spacing:var(--wordmark-tracking);white-space:nowrap}
.brand img{width:var(--logo);height:var(--logo)}
.brand-tld{color:var(--cobalt)}
.site-header nav{display:flex;align-items:center;gap:var(--space-6)}
.site-header nav a{position:relative;display:flex;align-items:center;min-height:var(--touch);font-size:var(--small);font-weight:600;text-decoration:none}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:var(--space-2);height:var(--beam);background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform var(--med) var(--ease)}
.site-header nav a:focus-visible::after{transform:scaleX(1)}
.nav-contact{padding-inline:var(--space-4);border:var(--hairline) solid var(--cobalt-line);border-radius:999px;color:var(--cobalt)}
.nav-contact::after{display:none}

/* ---- the spine ----------------------------------------------------------- */
main{position:relative;z-index:2;outline:none;overflow-x:clip}
.spine{position:absolute;z-index:3;top:0;bottom:0;left:max(var(--space-2),calc((100% - min(100% - var(--gutter)*2,var(--shell)))/2 - var(--spine-offset)));width:var(--beam);pointer-events:none}
.spine-line{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--cobalt) var(--spine-fade),var(--cobalt-hi) 50%,var(--cobalt));box-shadow:var(--glow);transform-origin:top;transform:scaleY(var(--beam-p,1))}
.spine-head{position:absolute;top:0;left:50%;width:var(--space-4);height:var(--space-4);margin-left:calc(var(--space-4)/-2);border-radius:50%;background:var(--ice);box-shadow:var(--glow-head);opacity:0;transform:translateY(var(--beam-y,0))}
.js-spine .spine-head{opacity:1}
.chapter-label{position:relative;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);font-family:var(--mono);font-weight:700;font-size:var(--micro);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--cobalt)}
.chapter-label span{color:var(--ice-soft)}
.chapter-label::before{content:"";position:absolute;left:calc(-1*var(--spine-offset) - var(--node)/2 + var(--beam)/2);top:50%;width:var(--node);height:var(--node);margin-top:calc(var(--node)/-2);border-radius:50%;background:var(--navy);border:var(--beam) solid var(--cobalt);box-shadow:var(--glow)}

/* ---- buttons and links -------------------------------------------------- */
.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:var(--button-height);padding:var(--space-3) var(--space-6);background:var(--cobalt);color:var(--navy);font-weight:800;border-radius:999px;text-decoration:none;box-shadow:0 0 0 0 var(--cobalt-glow),var(--glow-button);transition:box-shadow var(--med) var(--ease),transform var(--fast) var(--ease)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,var(--sheen) 50%,transparent 70%);transform:translateX(-110%)}
.button:active{transform:scale(.97)}
.button:focus-visible{outline-color:var(--ice)}

/* ---- 00 surface ---------------------------------------------------------- */
.hero{min-height:calc(100svh - var(--header-height));display:flex;align-items:center;padding-block:var(--space-8) var(--space-9)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--gap);align-items:end}
.home-mark{display:inline-block;font-family:var(--mono);font-weight:700;font-size:var(--mark);line-height:1;letter-spacing:var(--mark-tracking);color:var(--cobalt);text-shadow:var(--glow-mark);transition:color var(--slow) var(--ease),text-shadow var(--slow) var(--ease)}
.gl-on .home-mark{color:transparent;text-shadow:none}
.hero-side .home-mark{margin-bottom:var(--space-6)}

/* ---- 04 home ------------------------------------------------------------- */
.home{padding-block:var(--chapter-space)}
.home-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--gap);align-items:end}
.home h2{font-size:var(--display);line-height:var(--tight);letter-spacing:var(--display-tracking)}
.home-mark-end{display:block;width:fit-content;margin-bottom:var(--space-6);font-size:var(--end-mark)}
.contact-copy>p{font-size:var(--lead);max-width:var(--hero-measure);margin-bottom:var(--space-6);color:var(--ice-soft)}
.email-address{display:flex;align-items:center;width:fit-content;min-height:var(--touch);margin-top:var(--space-4);font-family:var(--mono);font-weight:700;color:var(--cobalt)}

.site-footer{position:relative;z-index:2;background:var(--abyss);border-top:var(--hairline) solid var(--cobalt-line);padding-block:var(--space-6)}
.footer-inner{display:flex;justify-content:space-between;gap:var(--space-5);align-items:center;font-size:var(--small)}
.footer-inner a{min-height:var(--touch);display:flex;align-items:center}

/* lead lines speak in the light cobalt tint (8.7:1 on navy); a halo keeps copy legible over the field */
.contact-copy>p{color:var(--cobalt-hi)}
.chapter-label,.contact-copy>p,.home h2{text-shadow:var(--halo)}

/* ---- pointer states ------------------------------------------------------- */
@media (hover:hover){
  .site-header nav a:hover::after{transform:scaleX(1)}
  .nav-contact:hover{background:var(--cobalt);color:var(--navy)}
  .button:hover{box-shadow:var(--glow-button-hover)}
  .email-address:hover,.footer-inner a:hover{text-decoration:underline;text-decoration-thickness:var(--beam)}
}

/* ---- motion: everything below only when the reader has not asked for less ---- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @media (hover:hover){.button:hover::before{transform:translateX(110%);transition:transform var(--slow) var(--ease)}}
  .hero-copy>*{animation:rise var(--slow) var(--ease) both}
  .hero-copy>h1,.hero-side>*{animation-name:rise-soft;animation-delay:0s}
  .hero-copy>:nth-child(2){animation-delay:var(--delay-1)}
  .hero-copy>:nth-child(3){animation-delay:var(--delay-2)}
  .hero-copy>:nth-child(4){animation-delay:var(--delay-3)}
  .hero-side>*{animation:rise var(--slow) var(--ease) both;animation-delay:var(--delay-4)}
  .spine-line{transition:transform var(--fast) linear}

  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@keyframes rise-soft{from{translate:0 var(--rise)}to{translate:0 0}}
@keyframes rise{from{opacity:0;translate:0 var(--rise);clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(-50% -50% -50% -50%)}}
@keyframes flood{from{clip-path:circle(0% at 0% 0%)}to{clip-path:circle(150% at 0% 0%)}}

/* ---- layout breakpoints ------------------------------------------------- */
@media (max-width:1279px){.gauge{display:none}}
@media (max-width:850px){
  :root{--header-height:auto;--spine-offset:calc(var(--gutter)*.55)}
  .site-header{position:static}
  .header-inner{flex-wrap:wrap;padding-block:var(--space-4);gap:var(--space-3)}
  .site-header nav{width:100%;justify-content:space-between;gap:var(--space-3)}
  .hero{min-height:auto}
  .home-grid{grid-template-columns:1fr;align-items:start}
}
@media (max-width:620px){
  :root{--gap:var(--space-7);--chapter-space:var(--space-9);--node:var(--mobile-node)}
  .hero-grid{grid-template-columns:1fr}
  .chapter-label{padding-left:var(--space-3)}
  .site-header nav{flex-wrap:wrap;justify-content:flex-start;column-gap:var(--space-5);row-gap:0}
  .site-header nav a{font-size:var(--micro)}
  .nav-contact{padding-inline:var(--space-3)}
  .hero{padding-block:var(--space-7) var(--space-8)}
  .hero-side{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-5);align-items:center}
  .hero-side .home-mark{font-size:var(--mobile-mark);margin:0}
  .home-mark-end{font-size:var(--mobile-mark)}
  .footer-inner{display:block}
  .footer-inner>p+p{margin-top:var(--space-2)}
  .footer-inner>a{margin-top:var(--space-3)}
}