/* effing.tech /work — "The Descent", continued. Loaded after descent-base-v1.css,
   which carries the shared tokens, header, spine, field, gauge and contact.
   Direction and rules: docs/DESIGN.md */
:root{
  --work-display:clamp(2.75rem,6.2vw,6.25rem);
  --figure-num:clamp(3rem,6.5vw,6.5rem);
  --theme-numeral:clamp(4rem,9vw,8.5rem);
  --index-numeral:clamp(1.75rem,2.6vw,2.5rem);
  --work-title-measure:14ch;--group-title-measure:22ch;--theme-title-measure:24ch;
  --figure-pad:clamp(.5rem,1.2vw,1rem);--index-pad:clamp(1.25rem,2.2vw,1.75rem);
  --figure-start-opacity:.4;--figure-tilt:18deg;--figure-rise:5rem;--figure-depth:-8rem;--index-rise:2rem;
  --work-step-leading:1.45;--lift-hover:-.375rem;--lift-depth:2rem;
  --glow-figure:0 2rem 5rem -2rem var(--cobalt-glow);
  --glance-shade:inset 0 -5rem 7rem -5rem var(--cobalt-deep);
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.site-header nav a[aria-current=page]{color:var(--cobalt)}
.site-header nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---- 00 ~/work ------------------------------------------------------------- */
.work-hero h1{font-size:var(--work-display);max-width:var(--work-title-measure)}
.work-intro{max-width:var(--measure);margin-top:var(--space-7);font-size:var(--lead);line-height:var(--quote-leading);color:var(--ice-soft);text-shadow:var(--halo)}
.work-intro p:first-child{color:var(--cobalt-hi)}
.work-intro p+p{margin-top:var(--space-5)}
.work-hero .hero-grid{align-items:center}

/* ---- 01 at a glance: the cobalt band -------------------------------------- */
.glance{position:relative;background:radial-gradient(90% 90% at 0% 0%,var(--cobalt-hi),var(--cobalt) 70%);box-shadow:var(--glance-shade);color:var(--navy);padding-block:var(--chapter-space)}
.glance .chapter-label,.glance .chapter-label span{color:var(--navy);text-shadow:none}
.glance .chapter-label::before{background:var(--cobalt);border-color:var(--navy);box-shadow:none}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--gap);margin:0}
.figures div{display:flex;flex-direction:column-reverse;justify-content:flex-end;border-top:var(--beam) solid var(--navy-line);padding-top:var(--space-5)}
.figures dd{margin:0;font-size:var(--figure-num);font-weight:800;line-height:1;letter-spacing:var(--display-tracking)}
.figures dt{margin-top:var(--space-3);max-width:var(--figure-measure);font-weight:600;line-height:var(--copy-leading)}

/* ---- 02 index: twelve strata ------------------------------------------------ */
.theme-index{padding-block:var(--chapter-space) var(--space-9)}
.index-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5);perspective:var(--perspective)}
.index-list a{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-5);align-content:start;height:100%;padding:var(--index-pad);border-radius:var(--radius-lg);background:var(--glass-solid);border:var(--hairline) solid var(--cobalt-line);box-shadow:inset 0 var(--hairline) 0 var(--glass-edge);text-decoration:none;transition:transform var(--med) var(--ease),box-shadow var(--med) var(--ease),border-color var(--med) var(--ease)}
.index-num{grid-row:span 2;font-family:var(--mono);font-weight:700;font-size:var(--index-numeral);line-height:1;color:transparent;-webkit-text-stroke:var(--beam) var(--cobalt)}
.index-title{font-weight:800;font-size:var(--step-title);line-height:var(--copy-leading);letter-spacing:var(--title-tracking)}
.index-card{margin-top:var(--space-2);font-size:var(--small);line-height:var(--copy-leading);color:var(--cobalt-hi)}
.index-list a:focus-visible{outline-offset:var(--space-1)}

/* ---- group headings ------------------------------------------------------- */
.group-heading{padding-top:var(--chapter-space)}
.group-heading h2{max-width:var(--group-title-measure);text-shadow:var(--halo)}
.group-intro{max-width:var(--measure);margin-top:var(--space-6);margin-left:auto;font-size:var(--lead);line-height:var(--quote-leading);color:var(--ice-soft);text-shadow:var(--halo)}
.group-intro p:first-child{color:var(--cobalt-hi)}
.group-intro p+p{margin-top:var(--space-5)}

/* ---- the themes ------------------------------------------------------------- */
.theme{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:'head head' 'fig fig' '. body';gap:var(--space-7) var(--gap);padding-block:var(--chapter-space) 0;perspective:var(--perspective)}
.theme-head{grid-area:head;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-6);align-items:start}
.theme-num{position:relative;grid-row:span 2;font-family:var(--mono);font-weight:700;font-size:var(--theme-numeral);line-height:var(--numeral-leading);letter-spacing:var(--numeral-tracking);color:transparent;-webkit-text-stroke:var(--beam) var(--cobalt);text-shadow:var(--glow-numeral)}
.theme-num::before{content:"";position:absolute;left:calc(-1*var(--spine-offset) - var(--node)/2 + var(--beam)/2);top:var(--space-6);width:var(--node);height:var(--node);border-radius:50%;background:var(--navy);border:var(--beam) solid var(--cobalt);box-shadow:var(--glow)}
.theme-head h3{max-width:var(--theme-title-measure);text-shadow:var(--halo)}
.standfirst{margin-top:var(--space-5);font-size:var(--lead);line-height:var(--copy-leading);max-width:var(--hero-measure);color:var(--cobalt-hi);text-shadow:var(--halo)}
.theme-figure{grid-area:fig;margin:0;min-width:0;padding:var(--figure-pad);border-radius:var(--radius-lg);background:var(--glass-solid);border:var(--hairline) solid var(--cobalt-line);box-shadow:var(--lift),var(--glow-figure),inset 0 var(--hairline) 0 var(--glass-edge);transform-origin:50% 0}
.theme-figure img{width:100%;height:auto;border-radius:var(--radius)}
.theme-figure figcaption{margin-top:var(--space-2);padding-inline:var(--space-2);font-size:var(--small)}
.theme-figure figcaption a{display:inline-flex;align-items:center;min-height:var(--touch);color:var(--cobalt-hi);font-weight:700}
.theme-body{grid-area:body;max-width:var(--measure);color:var(--cobalt-hi);text-shadow:var(--halo)}
.theme-body strong{color:var(--cobalt)}
.theme-body>p+p,.theme-body>ul+p{margin-top:var(--space-5)}
.theme-body h4{font-size:var(--step-title);line-height:var(--work-step-leading);margin-top:var(--space-6);color:var(--cobalt)}
.theme-body ul{list-style:none;margin:var(--space-4) 0 0;padding:0}
.theme-body li{position:relative;padding:var(--space-3) 0 var(--space-3) var(--space-6);border-top:var(--hairline) solid var(--rule)}
.theme-body li::before{content:"";position:absolute;left:0;top:var(--marker-top);width:var(--space-3);height:var(--space-3);border-radius:50%;border:var(--beam) solid var(--cobalt)}
.theme-body code{font-family:var(--mono);font-size:var(--small);color:var(--cobalt-hi);overflow-wrap:anywhere}
.theme-body .useful-if{margin-top:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--cobalt-haze);border:var(--hairline) solid var(--cobalt-line);color:var(--ice);text-shadow:var(--halo)}
.useful-if strong{color:var(--cobalt-hi)}
.work-group-earlier{padding-bottom:var(--space-9)}
.closing-line{margin-top:var(--space-7);font-family:var(--mono);font-weight:700;color:var(--cobalt)}

@media (hover:hover) and (min-width:1280px){
  .index-list a{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
}
@media (hover:hover){
  .index-list a:hover{transform:translate3d(0,var(--lift-hover),var(--lift-depth));border-color:var(--cobalt);box-shadow:var(--lift),var(--glow-panel)}
  .theme-figure figcaption a:hover{text-decoration-thickness:var(--beam)}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .glance{animation:flood linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    .figures div{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    .index-list li{animation:index-in linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    .group-heading h2,.theme-head{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
    .theme-figure{animation:figure-land linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes index-in{from{translate:0 var(--index-rise)}to{translate:0 0}}
@keyframes figure-land{from{opacity:var(--figure-start-opacity);rotate:x var(--figure-tilt);translate:0 var(--figure-rise) var(--figure-depth)}to{opacity:1;rotate:x 0deg;translate:0 0 0}}

@media (max-width:850px){
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'fig' 'body'}
  .group-intro{margin-left:0}
  .index-list{grid-template-columns:1fr}
}
@media (max-width:620px){
  .figures{gap:var(--space-6) var(--space-5)}
  .theme-head{grid-template-columns:1fr}
  .theme-num{grid-row:auto;margin-bottom:var(--space-3)}
  .theme-num::before{top:var(--space-4)}
}