@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-italic-latin.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('fonts/IBMPlexSans-latin.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-Regular-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-Medium-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/IBMPlexMono-SemiBold-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --bone:#F1EEE4;
  --ink:#0C0C0A;
  --phos:#3AF08A;            /* phosphor emerald — on dark ground only */
  --phos-deep:#0E6B3F;       /* accessible emerald for small text on bone */
  --rule:#0C0C0A;
  --rule-soft:rgba(12,12,10,.16);
  --rule-inv:rgba(241,238,228,.22);
  --ink-dim:rgba(12,12,10,.62);
  --bone-dim:rgba(241,238,228,.62);
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Plex Sans',system-ui,-apple-system,sans-serif;
  --disp:'Fraunces',Georgia,serif;
  --gutter:clamp(20px,3.4vw,48px);
  --maxw:1600px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--phos)}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.product :focus-visible,.site-footer :focus-visible{outline-color:var(--phos)}

/* ---------- exposed hairline grid ---------- */
.gridlines{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:0 var(--gutter);
}
.gridlines span{border-left:1px solid var(--rule-soft)}
.gridlines span:last-child{border-right:1px solid var(--rule-soft)}
@media (max-width:720px){.gridlines{grid-template-columns:repeat(2,1fr)}.gridlines span:nth-child(n+3){display:none}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:stretch;justify-content:space-between;min-height:56px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.22em;
}
.brand svg{width:24px;height:24px}
.header-nav{display:flex;align-items:stretch}
.header-nav a{
  display:flex;align-items:center;
  padding:0 clamp(12px,1.8vw,28px);
  border-left:1px solid var(--rule);
  text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.header-nav a:hover{background:var(--ink);color:var(--phos)}
.header-nav .nav-home{display:flex;align-items:center;justify-content:center;padding-inline:16px}
.header-nav .lang{background:var(--ink);color:var(--bone)}
.header-nav .lang:hover{background:var(--phos);color:var(--ink)}
@media (max-width:720px){
  .header-nav a{padding:0 10px;font-size:11px}
  .brand{letter-spacing:.16em;font-size:13px}
}
@media (max-width:480px){
  .site-header .wrap{min-height:48px}
  .header-nav a{padding:0 7px;font-size:9.5px;letter-spacing:.05em}
  .header-nav .nav-home{padding-inline:9px}
  .brand .word{letter-spacing:.14em}
}
@media (max-width:440px){
  .brand .word{display:none}
  .header-nav a{padding:0 5px;font-size:9px;letter-spacing:.03em}
  .header-nav .nav-home{padding-inline:7px}
  .header-nav .nav-home svg{width:13px;height:13px}
  .brand{gap:7px}
}
@media (max-width:340px){
  .header-nav a{padding:0 4px;letter-spacing:0}
}

/* ---------- mono metalines (instrument telemetry) ---------- */
.metaline{
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
}
.metaline .dim{color:var(--ink-dim)}
.metaline .em{color:var(--phos-deep);font-weight:600}
@media (max-width:720px){
  .metaline{font-size:10px;letter-spacing:.1em}
  .metaline .dim{display:none}
}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--rule);position:relative}
.hero h1{
  font-family:var(--disp);
  font-weight:560;
  font-variation-settings:'opsz' 144;
  font-size:clamp(44px,9.2vw,146px);
  line-height:1.04;
  letter-spacing:-0.028em;
  margin:clamp(28px,5vh,56px) 0 clamp(28px,5vh,48px);
}
.hero h1 .l{display:block}
.hero h1 .l2{padding-left:clamp(0px,8vw,140px)}
.hero h1 .l3{padding-left:clamp(0px,3vw,40px)}
.hero h1 em{font-style:italic;font-weight:420;font-variation-settings:'opsz' 144;margin-right:.14em}
.hero h1 .no{
  background:var(--ink);color:var(--phos);
  padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
@media (max-width:720px){
  .hero h1{font-size:clamp(46px,13.4vw,146px);line-height:1.08}
  .hero h1 .l2,.hero h1 .l3{padding-left:0}
}
.hero-top{position:relative}
.hero-badge{
  position:absolute;top:-17px;right:28px; /* equal 28px margins to the metaline rule and right hairline */
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-align:right;
  color:var(--ink-dim);
}
.hero-badge svg{width:clamp(64px,6.4vw,96px);height:clamp(64px,6.4vw,96px)}
@media (max-width:1120px){.hero-badge{display:none}}
.hero-foot{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,470px);
  gap:clamp(24px,4vw,72px);
  border-top:1px solid var(--rule);
  padding:clamp(24px,4vh,44px) 0 clamp(32px,5vh,56px);
  align-items:stretch;
}
.hero-foot .lede{
  font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:30em;
}
.hero-meta{
  margin-top:clamp(28px,5vh,56px);
  display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,40px);
  justify-content:flex-start;
}
.hero-foot>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.hero-foot>div:first-child>*{width:100%}
.hero-verbs{margin-top:auto;padding-top:44px;flex-direction:column;gap:16px}
.hero-meta .k{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.hero-meta .v{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em}
@media (max-width:980px){
  .hero-foot{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:1fr;gap:14px;margin-top:28px}
}

/* ---------- ring instrument figure ---------- */
.instrument{
  border:1px solid var(--rule);
  background:var(--bone);
  display:flex;flex-direction:column;
  position:relative;
}
.instrument::before,.instrument::after{
  content:'';position:absolute;width:10px;height:10px;
  border:2px solid var(--phos-deep);z-index:3;
}
.instrument::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.instrument::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.inst-head,.inst-foot{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 14px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.inst-head{border-bottom:1px solid var(--rule)}
.inst-foot{border-top:1px solid var(--rule)}
.inst-head .em,.inst-foot .em{color:var(--phos-deep)}
.inst-head .dim,.inst-foot .dim{color:var(--ink-dim);font-weight:500}
.inst-plot{
  flex:1;position:relative;
  padding:clamp(12px,1.4vw,18px);
  
}
.inst-plot svg{width:100%;height:100%;max-height:440px;margin:0 auto}
.rings path{fill:none;stroke:rgba(12,12,10,.42);stroke-width:.8;vector-effect:non-scaling-stroke}
.rings path.hl{stroke:var(--phos-deep);stroke-width:1.2}
.rings-axis line{stroke:rgba(12,12,10,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.rings-axis .tick{stroke:rgba(12,12,10,.55)}
.rings-core{fill:var(--phos-deep)}
/* Rings must not be transformed independently of the effect layers. */
@media (max-width:980px){.inst-plot{aspect-ratio:1/1}}


/* ---------- ring milestone interaction ---------- */
.hits path{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}
.rings path.ms{transition:stroke-width .18s}
.inst-plot{position:relative}
.ring-tip{
  position:absolute;pointer-events:none;z-index:6;opacity:0;
  background:#0C0C0A;color:#F1EEE4;border:1px solid rgba(58,240,138,.45);
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:9px 12px;line-height:1.5;
  transition:opacity .12s;white-space:nowrap;
}
.ring-tip .go{display:block;color:var(--phos);margin-top:3px;font-weight:500}

.mslabels g{opacity:0;animation:msLabel 8s linear infinite;cursor:pointer;pointer-events:auto}
.mslabels g:nth-child(1){animation-delay:0s}
.mslabels g:nth-child(2){animation-delay:2s}
.mslabels g:nth-child(3){animation-delay:4s}
.mslabels g:nth-child(4){animation-delay:6s}
.mslabels g.on{opacity:1;animation-play-state:paused}
@keyframes msLabel{0%{opacity:0}4%{opacity:1}22%{opacity:1}32%{opacity:0}100%{opacity:0}}
.mslabels line{stroke:rgba(14,107,63,.5);stroke-width:1}
.mslabels circle{fill:var(--phos-deep)}
.mslabels text{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.09em;fill:var(--phos-deep)}
@media (prefers-reduced-motion: reduce){.mslabels g{animation:none;opacity:.9}}

.sparks path{fill:none;stroke:var(--phos);stroke-width:3;stroke-linecap:round;opacity:0}
.sparks .s0{animation:spark0 8s linear infinite}
.sparks .s1{animation:spark1 8s linear infinite;animation-delay:2s}
.sparks .s2{animation:spark2 8s linear infinite;animation-delay:4s}
.sparks .s3{animation:spark3 8s linear infinite;animation-delay:6s}
@keyframes spark0{0%{stroke-dashoffset:718.7;opacity:0}2%{opacity:.95}20%{opacity:.95}25%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}@keyframes spark1{0%{stroke-dashoffset:1020.6;opacity:0}2%{opacity:.95}20%{opacity:.95}25%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}@keyframes spark2{0%{stroke-dashoffset:1358.4;opacity:0}2%{opacity:.95}20%{opacity:.95}25%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}@keyframes spark3{0%{stroke-dashoffset:1437.3;opacity:0}2%{opacity:.95}20%{opacity:.95}25%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
.rings path.ms.on,.rings path.hl.on{stroke-width:3 !important}
@media (prefers-reduced-motion: reduce){.sparks path{animation:none;opacity:0}}
/* ---------- marquee claims band ---------- */
.marquee{
  background:var(--ink);color:var(--phos);
  border-bottom:1px solid var(--rule);
  overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;
  padding:12px 0;
}
.marquee .track{display:inline-flex;gap:0;will-change:transform}
.marquee span{padding:0 18px}
.marquee .sep{color:var(--bone-dim)}
.js .marquee .track{animation:mq 32s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.js .marquee .track{animation:none}}

/* ---------- section scaffolding: indexed rails ---------- */
.section{border-bottom:1px solid var(--rule)}
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.sec-head .rail{color:var(--phos-deep)}
.sec-head .ctr{color:var(--ink-dim);font-weight:500}
@media (max-width:720px){.sec-head{font-size:10px;letter-spacing:.12em}.sec-head .ctr{display:none}}
h2.sec-title{
  font-family:var(--disp);font-weight:500;
  font-variation-settings:'opsz' 100;
  font-size:clamp(28px,3.6vw,52px);
  line-height:1.05;letter-spacing:-0.02em;
  padding:clamp(28px,4vh,48px) 0 clamp(20px,3vh,36px);
  max-width:20em;text-wrap:balance;
}

/* ---------- principles: editorial rows + BELEG readouts ---------- */
.principle{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 2fr 1.4fr;
  gap:var(--gutter);
  border-top:1px solid var(--rule);
  padding:clamp(28px,4.5vh,56px) 0;
}
.principle .num{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(58px,8vw,132px);
  line-height:.85;letter-spacing:-0.03em;
}
.principle .num sub{
  display:block;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--phos-deep);
  vertical-align:baseline;line-height:1.4;
}
.principle h3{
  font-family:var(--disp);font-weight:560;
  font-variation-settings:'opsz' 120;
  font-size:clamp(26px,3.1vw,46px);
  line-height:1.06;letter-spacing:-0.018em;
  margin-bottom:18px;max-width:14em;
}
.principle .body{font-size:16.5px;line-height:1.62;max-width:36em}
.proof{
  border:1px dashed rgba(12,12,10,.5);
  padding:18px 20px;
  font-family:var(--mono);font-size:12.5px;line-height:1.7;
  align-self:start;color:#3d3f39;
}
.proof strong{
  display:block;margin-bottom:10px;
  color:var(--phos-deep);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;
}
@media (max-width:980px){
  .principle{grid-template-columns:1fr;gap:20px}
  .principle .num{font-size:clamp(52px,13vw,96px)}
  .principle .num sub{margin-top:8px}
}

/* ---------- projects: archival record rows ---------- */
.sec-lede{
  font-size:clamp(16px,1.4vw,19px);line-height:1.6;max-width:36em;
  margin:-6px 0 clamp(24px,4vh,44px);
}
.project{
  display:grid;
  grid-template-columns:minmax(170px,1fr) 2.6fr;
  gap:var(--gutter);
  border-top:1px solid var(--rule);
  padding:clamp(26px,4vh,46px) 0;
}
.project .sector{
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--phos-deep);line-height:1.7;
}
.project .sector .rec{color:var(--ink-dim);font-weight:500}
.project h3{
  font-family:var(--disp);font-weight:560;
  font-variation-settings:'opsz' 120;
  font-size:clamp(23px,2.5vw,37px);
  line-height:1.1;letter-spacing:-0.016em;
  margin-bottom:14px;max-width:18em;
}
.project .body{font-size:16px;line-height:1.62;max-width:44em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  border:1px solid rgba(12,12,10,.45);padding:5px 10px;color:#33352f;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.chips span:hover{background:var(--ink);color:var(--phos);border-color:var(--ink)}
@media (max-width:820px){
  .project{grid-template-columns:1fr;gap:14px}
  .project .sector{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:6px 16px}
  .chips span{white-space:normal}
}

/* ---------- THERIAK: inverted act + spec sheet ---------- */
.product{background:var(--ink);color:var(--bone)}
.product .sec-head{border-color:var(--rule-inv)}
.product .sec-head .rail{color:var(--phos)}
.product .sec-head .ctr{color:var(--bone-dim)}
.product-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:clamp(28px,5vh,60px) 0 clamp(16px,3vh,32px);
}
.product-name{
  font-family:var(--disp);font-weight:600;
  font-variation-settings:'opsz' 144;
  font-size:clamp(58px,14.6vw,250px);
  line-height:.84;letter-spacing:-0.035em;
  color:var(--phos);
  margin-left:-0.04em;
}
.product-slide{position:relative;padding-right:38px}
.product-tag{
  position:absolute;right:0;top:clamp(28px,5vh,60px);
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-dim);
  border-left:1px solid var(--rule-inv);
  padding-left:12px;white-space:nowrap;
}
@media (max-width:720px){.product-tag{display:none}}
@media (max-width:720px){.product .sec-head .ctr.slider-ctr{display:flex}}
.product-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,440px);
  gap:clamp(24px,4vw,72px);
  border-top:1px solid var(--rule-inv);
  padding:clamp(24px,4vh,44px) 0 clamp(36px,6vh,64px);
}
.product-grid .desc{font-size:clamp(16px,1.4vw,19px);line-height:1.62;max-width:32em}
.product-more{
  margin-top:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);
}
.spec{border:1px solid var(--rule-inv);align-self:start;display:flex;flex-direction:column}
.spec-cap{
  padding:10px 16px;border-bottom:1px solid var(--rule-inv);
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
}
.spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--rule-inv);
  font-family:var(--mono);font-size:12px;
}
.spec-row .sk{color:var(--bone-dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.spec-row .sv{text-align:right}
.sv--phos{color:var(--phos);font-weight:600}
.btn-theriak{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 16px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-decoration:none;text-transform:uppercase;
  color:var(--ink);background:var(--phos);
  transition:background .2s;
}
.btn-theriak:hover{background:#7cf7b4}
.btn-theriak .arr{transition:transform .2s}
.btn-theriak:hover .arr{transform:translateX(4px)}
.products-slider{overflow:hidden}
.products-track{display:block}
html.js .products-track{display:flex;align-items:stretch;transition:transform .55s cubic-bezier(.22,1,.36,1)}
html.js .product-slide{flex:0 0 100%;min-width:100%}
html.js .product-slide .product-name{margin-left:2px}
html.js .products-track .product-tag{transition:opacity .2s}
html.js .products-track.moving .product-tag{opacity:0}
.slider-ctr{display:flex;align-items:center;gap:14px}
.snav{background:none;border:1px solid var(--rule-inv);color:var(--phos);
  font-family:var(--mono);font-size:14px;line-height:1;padding:6px 14px;cursor:pointer;
  transition:background .15s,color .15s}
.snav:hover,.snav:focus-visible{background:var(--phos);color:var(--ink);outline:none}
html:not(.js) .snav{display:none}
.product .product-more{padding-bottom:clamp(28px,4vh,48px)}
@media (prefers-reduced-motion: reduce){html.js .products-track{transition:none}}
@media (max-width:900px){.product-grid{grid-template-columns:1fr}}

/* ---------- about ---------- */
.about-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gutter);
  padding:0 0 clamp(36px,6vh,64px);
  align-items:start;
}
.about-side{display:flex;flex-direction:column;gap:clamp(24px,3vh,36px);align-items:flex-end;padding-top:6px}
.about-side .name-note{max-width:26em}
.about-side .portrait{max-width:300px}
.portrait{margin:0}
.portrait img{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%);mask-image:linear-gradient(to right,transparent 0%,#000 30%)}
.portrait{width:min(300px,100%)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:552/674}
.about-grid .body p{font-size:clamp(16px,1.4vw,19px);line-height:1.62;max-width:32em}
.about-grid .body p+p{margin-top:1.1em}
.name-note{
  font-family:var(--disp);font-style:italic;font-weight:420;
  font-variation-settings:'opsz' 100;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.35;
  border-left:3px solid var(--phos-deep);
  padding-left:clamp(20px,2vw,28px);
}
.name-note .etym{
  display:block;margin-top:18px;
  font-family:var(--mono);font-style:normal;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-lede{font-size:clamp(16px,1.4vw,19px);max-width:30em}
.contact-mail{
  display:block;width:fit-content;max-width:100%;
  font-family:var(--disp);font-weight:540;
  font-variation-settings:'opsz' 144;
  font-size:clamp(34px,8.4vw,134px);
  letter-spacing:-0.025em;line-height:1.05;
  text-decoration:none;
  margin:clamp(24px,4vh,48px) 0 clamp(28px,5vh,56px);
  overflow-wrap:anywhere;
  border-bottom:3px solid var(--phos-deep);
  padding-bottom:.06em;
}
.contact-mail .at{color:var(--phos-deep)}
.contact-mail:hover{background:var(--ink);color:var(--phos)}
.contact-mail:hover .at{color:var(--phos)}

/* ---------- status strip + footer ---------- */
.site-footer{background:var(--ink);color:var(--bone)}
.footer-status{
  border-bottom:1px solid var(--rule-inv);
  padding:13px 0;
  display:flex;gap:clamp(16px,3vw,32px);flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase;
}
.footer-status .dot{color:var(--phos);margin-right:8px}
.footer-main{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;
  padding:30px 0 36px;
}
.fb{display:flex;align-items:center;gap:13px;font-family:var(--mono)}
.fb svg{width:26px;height:26px;flex:none}
.fb .w{font-weight:600;letter-spacing:.22em;font-size:13px;display:block}
.fb .l{font-size:11px;color:var(--bone-dim);letter-spacing:.1em;display:block;margin-top:3px}
.footer-nav{display:flex;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{color:var(--phos)}
.footer-mail{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-decoration:none}
.footer-mail:hover{color:var(--phos)}

@media print{
  .js .rv{opacity:1 !important;transform:none !important}
  .sparks,.msglow{display:none}
}
/* ---------- reveal (JS only) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}