/* ============================================================
   TMG SECURITY — RESOURCES HUB + ARTICLE PAGES
   Loads with tmg-home.css (tokens, header, footer) and
   tmg-services.css (shared section furniture).

   Visual language: A TECHNICAL PUBLICATION.
   The other standalone pages are spatial — you travel through
   them. This one is editorial: a research network up top, then
   type, rhythm and reading comfort take over. Motion recedes as
   you go down the page, because the job below the fold is
   reading, not spectacle.

   Prefixes: rs- (hub chrome), rnet- (hero network), rf- (featured),
   mar- (marquee), rc- (article card), asx- (attack surface),
   rt- (terminal), arc- (archive), nl- (newsletter),
   art- (article page), toc- (contents).
   ============================================================ */

.rs{
  --acc:var(--cyan); --acc2:var(--violet);
  --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42);
  --glow:0 0 38px rgba(79,216,234,.17);
}

.rs-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(79,216,234,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,234,.04) 1px, transparent 1px);
  background-size:62px 62px;
  transform:translate3d(0, var(--gy,0px), 0);
  mask-image:radial-gradient(ellipse 92% 66% at 50% 26%, #000 16%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 92% 66% at 50% 26%, #000 16%, transparent 74%);
}
.rs > *{ position:relative; z-index:1; }

.rs-cap{ font-family:var(--mono); font-size:8px; letter-spacing:1.7px; color:var(--fog); text-align:center; margin-top:var(--s4); }
.rs-chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--acc);
  border:1px solid var(--acc-line); background:var(--acc-soft); border-radius:8px; padding:5px 9px;
}
.rs-chip.muted{ color:var(--fog); border-color:var(--line2); background:transparent; }

/* ============================================================
   01 — HERO: RESEARCH INTELLIGENCE NETWORK
   ============================================================ */
.rhero{ padding-top:var(--s7); padding-bottom:var(--s6); }
.rhero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:var(--s6); align-items:center; }
.rhero-h{
  font-family:var(--display); font-size:clamp(31px,4.5vw,56px); font-weight:700;
  line-height:1.05; letter-spacing:-1.7px; margin:18px 0 20px; text-wrap:balance;
}
.rhero-h .accent{
  background:linear-gradient(96deg, var(--cyan), var(--violet) 64%, var(--hyper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rhero-lead{ font-size:16.5px; color:var(--ice); line-height:1.68; max-width:600px; margin-bottom:var(--s4); }
.rhero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.rnet-stage{ position:relative; width:100%; max-width:540px; margin:0 auto; aspect-ratio:1/1; perspective:1300px; }
.rnet-rig{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(var(--nz,0px)) rotateX(var(--nrx,10deg)) rotateY(var(--nry,-6deg));
  transition:transform .45s var(--ease);
}
.rnet-plane{ position:absolute; inset:0; transform-style:preserve-3d; }
.rnet-back{ transform:translateZ(-130px); }
.rnet-mid { transform:translateZ(-42px); }
.rnet-front{ transform:translateZ(50px); }

.rnet-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rnet-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.rnet-ring.dash{ stroke:var(--line); stroke-dasharray:2 9; }
.rnet-link{
  stroke:rgba(140,165,225,.22); stroke-width:1; fill:none;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.1s var(--ease), stroke .5s;
}
.rhero.on .rnet-link{ stroke-dashoffset:0; }
.rnet-link.lit{ stroke:var(--acc-line); }

.rnet-dust{ position:absolute; inset:0; pointer-events:none; }
.rnet-dust i{
  position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%;
  background:var(--acc); opacity:.22;
  animation:rsDrift var(--d,10s) var(--ease) infinite alternate; animation-delay:var(--dl,0s);
}
@keyframes rsDrift{ to{ transform:translate3d(var(--tx,10px), var(--ty,-14px), 24px); opacity:.52; } }

.rnet-core{
  position:absolute; top:50%; left:50%; width:156px; height:156px;
  transform:translate(-50%,-50%) translateZ(30px); transform-style:preserve-3d;
}
.rnet-shell{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line2); }
.rnet-shell.s1{
  inset:15%; border-color:rgba(79,216,234,.48);
  background:radial-gradient(circle at 42% 36%, rgba(79,216,234,.26), rgba(13,20,36,.96) 68%);
  box-shadow:0 0 56px rgba(79,216,234,.2), inset 0 0 30px rgba(79,216,234,.13);
}
.rnet-shell.s2{ inset:0; border-color:rgba(124,92,250,.3); transform:translateZ(-14px) rotateX(74deg); }
.rnet-shell.s3{ inset:-15%; border-style:dashed; border-color:var(--line); transform:translateZ(-26px); }
.rnet-core.spin .rnet-shell.s2{ animation:rsSpin 26s linear infinite; }
.rnet-core.spin .rnet-shell.s3{ animation:rsSpin 40s linear infinite reverse; }
@keyframes rsSpin{ to{ transform:translateZ(-14px) rotateX(74deg) rotateZ(360deg); } }

.rnet-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateZ(22px); text-align:center; width:150px; pointer-events:none; }
.rnet-mark b{ display:block; font-family:var(--display); font-size:15px; font-weight:700; color:var(--white); line-height:1.14; }
.rnet-mark span{ display:block; font-family:var(--mono); font-size:7px; letter-spacing:2.2px; color:var(--acc); margin-top:5px; }

.rnet-node{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(var(--ax,-50%),-50%) translateZ(var(--dz,0px));
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--mono); font-size:8px; letter-spacing:1.3px; color:var(--fog);
  background:rgba(4,6,12,.9); border:1px solid var(--line2); border-radius:20px; padding:6px 11px;
  transition:border-color .45s, color .45s, box-shadow .45s;
}
.rnet-node i{ width:5px; height:5px; border-radius:50%; background:var(--line3); flex:none; transition:background .45s, box-shadow .45s; }
.rnet-node[data-side="e"]{ --ax:-100%; }
.rnet-node[data-side="w"]{ --ax:0%; }
.rnet-node.lit{ border-color:var(--acc-line); color:var(--white); box-shadow:var(--glow); }
.rnet-node.lit i{ background:var(--acc); box-shadow:0 0 8px var(--acc); }

@media (max-width:1000px){
  .rhero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .rnet-stage{ max-width:420px; order:-1; }
  .rnet-back{ transform:translateZ(-80px); }
  .rnet-node{ font-size:7px; letter-spacing:.9px; padding:5px 9px; gap:6px; }
}
@media (max-width:430px){
  .rnet-stage{ max-width:308px; }
  .rnet-core{ width:112px; height:112px; }
  .rnet-mark b{ font-size:13px; } .rnet-mark span{ font-size:6px; }
  .rnet-dust{ display:none; }
}
@media (max-width:340px){ .rnet-node{ font-size:6px; letter-spacing:.4px; padding:3px 6px; gap:4px; } }

/* ============================================================
   02 — FEATURED RESEARCH
   ============================================================ */
.rf{
  position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(150deg, rgba(18,27,48,.55), rgba(6,9,17,.9));
  transition:border-color .4s, box-shadow .4s;
}
.rf:hover{ border-color:var(--acc-line); box-shadow:0 26px 70px rgba(0,0,0,.5), var(--glow); }
.rf-media{ position:relative; overflow:hidden; min-height:340px; }
.rf-media img{
  position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover;
  transform:translate3d(var(--px,0px), var(--py,0px), 0) scale(1.02);
  transition:transform .5s var(--ease);
}
.rf-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 40%, rgba(6,9,17,.72) 88%),
             linear-gradient(0deg, rgba(6,9,17,.5), transparent 55%);
}
.rf-tag{
  position:absolute; top:18px; left:18px; z-index:2;
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--white);
  border:1px solid var(--acc); background:rgba(4,6,12,.85); border-radius:9px; padding:6px 11px;
}
.rf-body{ padding:var(--s5); display:flex; flex-direction:column; justify-content:center; }
.rf-t{ font-family:var(--display); font-size:clamp(23px,2.9vw,33px); font-weight:700; letter-spacing:-.9px; line-height:1.16; margin:12px 0 14px; text-wrap:balance; }
.rf-t a{ color:inherit; }
.rf-t a::after{ content:''; position:absolute; inset:0; z-index:3; }
.rf-s{ font-size:14.5px; color:var(--ice); line-height:1.7; margin-bottom:var(--s4); }
.rf-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); margin-bottom:var(--s4); }
.rf-go{ font-family:var(--mono); font-size:11px; letter-spacing:1.8px; color:var(--acc); display:inline-flex; align-items:center; gap:9px; min-height:44px; }
.rf-go span{ transition:transform .3s var(--ease); }
.rf:hover .rf-go span{ transform:translateX(5px); }
@media (max-width:900px){ .rf{ grid-template-columns:1fr; } .rf-media{ min-height:0; aspect-ratio:16/9; } .rf-media img{ inset:0; width:100%; height:100%; } }

/* ============================================================
   03 — HORIZONTAL TOPIC MARQUEE
   Scroll-linked, clipped so it can never widen the page.
   ============================================================ */
.mar{ overflow:hidden; border-block:1px solid var(--line); padding:26px 0; }
.mar-track{
  display:flex; gap:52px; width:max-content; will-change:transform;
  transform:translate3d(var(--mx,0px),0,0);
}
.mar-track span{
  font-family:var(--display); font-size:clamp(26px,4vw,52px); font-weight:700;
  letter-spacing:-1.4px; color:transparent; -webkit-text-stroke:1px rgba(140,165,225,.32);
  white-space:nowrap;
}
.mar-track span.on{ color:var(--ice); -webkit-text-stroke:1px transparent; }
.mar-track i{ align-self:center; width:7px; height:7px; border-radius:50%; background:var(--acc); opacity:.55; flex:none; }

/* ============================================================
   04/06 — ARTICLE CARD SYSTEM
   One component. Content varies; treatment never does.
   ============================================================ */
.rc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rc-grid.trending{ grid-template-columns:repeat(3,1fr); }

.rc{
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--deep);
  transform-style:preserve-3d;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s, opacity .5s, filter .5s;
  opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px);
}
.rc.in{ opacity:1; transform:none; filter:none; }
.rc:hover, .rc:focus-within{ border-color:var(--acc-line); box-shadow:0 22px 58px rgba(0,0,0,.45), var(--glow); }
.rc::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:var(--pl,0);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(79,216,234,.12), transparent 66%);
  transition:opacity .35s;
}
.rc-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--void); flex:none; }
.rc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.rc:hover .rc-media img{ transform:scale(1.045); }
.rc-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,20,36,.7), transparent 58%); }
.rc-cat{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--mono); font-size:7.5px; letter-spacing:1.6px; color:var(--white);
  border:1px solid var(--acc-line); background:rgba(4,6,12,.86); border-radius:8px; padding:5px 9px;
}
.rc-body{ display:flex; flex-direction:column; flex:1; padding:20px 20px 22px; }
.rc-t{ font-family:var(--display); font-size:17.5px; font-weight:600; letter-spacing:-.4px; line-height:1.28; margin-bottom:9px; }
.rc-t a{ color:inherit; }
.rc-t a::after{ content:''; position:absolute; inset:0; z-index:3; }
.rc-s{ font-size:12.8px; color:var(--fog); line-height:1.68; margin-bottom:14px; flex:1; }
.rc-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:13px; }
.rc-tags li{ font-family:var(--mono); font-size:7.5px; letter-spacing:.9px; color:var(--fog); border:1px solid var(--line2); border-radius:7px; padding:4px 7px; }
.rc-meta{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
  font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog);
  border-top:1px solid var(--line); padding-top:13px; margin-top:auto;
}
.rc-go{ margin-left:auto; color:var(--acc); display:inline-flex; align-items:center; gap:6px; }
.rc-go span{ transition:transform .3s var(--ease); }
.rc:hover .rc-go span{ transform:translateX(4px); }
/* highlight driven by the attack-surface map */
.rc.flag{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc-line), var(--glow); }
.rc.hide{ display:none; }

@media (max-width:1050px){ .rc-grid, .rc-grid.trending{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .rc-grid, .rc-grid.trending{ grid-template-columns:1fr; } }

/* ============================================================
   05 — SEARCH + FILTERS
   ============================================================ */
.rs-tools{ display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:14px; align-items:start; margin-bottom:var(--s5); }
.rs-search{ position:relative; }
.rs-search input{
  width:100%; min-height:52px; padding:14px 16px 14px 44px; border-radius:var(--r-md);
  border:1px solid var(--line2); background:var(--void); color:var(--white);
  font-family:var(--mono); font-size:12px; letter-spacing:.9px;
  transition:border-color .25s, box-shadow .25s;
}
.rs-search input::placeholder{ color:var(--fog); letter-spacing:1.3px; }
.rs-search input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.rs-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--fog); pointer-events:none; }
.rs-filters{ display:flex; flex-wrap:wrap; gap:7px; }
.rs-f{
  min-height:44px; padding:11px 14px; border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--line2); background:var(--deep); color:var(--fog);
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px;
  transition:background .28s, border-color .28s, color .28s, transform .28s var(--ease);
}
.rs-f:hover{ color:var(--ice); background:var(--panel); transform:translateY(-1px); }
.rs-f[aria-pressed="true"]{ border-color:var(--acc-line); background:var(--acc-soft); color:var(--acc); }
.rs-count{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); margin-bottom:var(--s3); }
.rs-none{
  border:1px dashed var(--line2); border-radius:var(--r-lg); padding:var(--s6) var(--s4);
  text-align:center; background:rgba(8,12,24,.5); display:none;
}
.rs-none.on{ display:block; }
.rs-none b{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:2.4px; color:var(--ice); margin-bottom:10px; }
.rs-none p{ font-size:13px; color:var(--fog); line-height:1.7; }
@media (max-width:820px){ .rs-tools{ grid-template-columns:1fr; } }

/* ============================================================
   07 — ATTACK SURFACE
   ============================================================ */
.asx{ display:grid; grid-template-columns:300px 1fr; gap:var(--s5); align-items:start; }
.asx-nodes{ display:flex; flex-direction:column; gap:7px; }
.asx-n{
  display:flex; align-items:center; gap:12px; min-height:50px; width:100%;
  padding:13px 16px; border-radius:var(--r-md); cursor:pointer; text-align:left;
  border:1px solid var(--line); background:var(--deep); color:var(--ice);
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px;
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.asx-n i{ width:6px; height:6px; border-radius:50%; background:var(--line3); flex:none; transition:background .3s, box-shadow .3s; }
.asx-n:hover, .asx-n[aria-pressed="true"]{ border-color:var(--acc-line); background:var(--panel); transform:translateX(3px); box-shadow:var(--glow); }
.asx-n:hover i, .asx-n[aria-pressed="true"] i{ background:var(--acc); box-shadow:0 0 8px var(--acc); }
.asx-n .n{ margin-left:auto; color:var(--fog); font-size:8px; }
.asx-out{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 28px; background:var(--deep); min-height:220px; }
.asx-out h3{ font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:8px; }
.asx-out p{ font-size:13px; color:var(--fog); line-height:1.7; margin-bottom:var(--s4); }
.asx-list{ display:flex; flex-direction:column; gap:6px; }
.asx-list a{
  display:flex; align-items:center; gap:12px; min-height:46px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line2); color:var(--ice); font-size:13px;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.asx-list a:hover{ background:var(--acc-soft); border-color:var(--acc-line); transform:translateX(3px); }
.asx-list a .k{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.2px; color:var(--acc); margin-left:auto; }
@media (max-width:900px){ .asx{ grid-template-columns:1fr; } }

/* ============================================================
   08 — TERMINAL
   ============================================================ */
.rt{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--void); overflow:hidden; max-width:860px; margin:0 auto; }
.rt-bar{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--deep); }
.rt-dot{ width:8px; height:8px; border-radius:50%; background:var(--line3); }
.rt-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--fog); margin-left:4px; }
.rt-tag{ margin-left:auto; font-family:var(--mono); font-size:7.5px; letter-spacing:1.4px; color:var(--warn); border:1px solid rgba(245,180,78,.34); border-radius:8px; padding:3px 8px; }
.rt-body{ padding:20px 20px 24px; font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--ice); min-height:322px; }
.rt-line{ display:block; white-space:pre-wrap; }
.rt-line .pfx{ color:var(--acc); }
.rt-cursor{ display:inline-block; width:7px; height:14px; background:var(--acc); vertical-align:-2px; margin-left:3px; animation:rsCaret 1s steps(1) infinite; }
@keyframes rsCaret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.rt-foot{ padding:12px 16px; border-top:1px solid var(--line); background:var(--deep); font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--fog); }
@media (max-width:560px){ .rt-body{ font-size:11px; min-height:250px; padding:16px 15px 20px; } }

/* ============================================================
   09/10 — ARCHIVE + NEWSLETTER
   ============================================================ */
.arc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.arc{ display:flex; flex-direction:column; gap:10px; padding:24px 22px 26px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--deep); transition:border-color .35s, transform .35s var(--ease); }
.arc:hover{ border-color:var(--acc-line); transform:translateY(-3px); }
.arc-k{ font-family:var(--mono); font-size:8px; letter-spacing:1.8px; color:var(--acc); }
.arc-t{ font-family:var(--display); font-size:16px; font-weight:600; line-height:1.25; }
.arc-d{ font-size:12.5px; color:var(--fog); line-height:1.7; flex:1; }
.arc-s{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--warn); border-top:1px solid var(--line); padding-top:13px; }
@media (max-width:1000px){ .arc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .arc-grid{ grid-template-columns:1fr; } }

.nl{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center;
  border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s5);
  background:linear-gradient(150deg, rgba(18,27,48,.6), rgba(6,9,17,.85));
}
.nl::before{ content:''; position:absolute; top:-40%; right:-12%; width:52%; aspect-ratio:1; background:radial-gradient(circle, rgba(124,92,250,.14), transparent 66%); pointer-events:none; }
.nl-h{ font-family:var(--display); font-size:clamp(23px,3vw,32px); font-weight:700; letter-spacing:-.8px; line-height:1.16; margin-bottom:12px; }
.nl-p{ font-size:14px; color:var(--ice); line-height:1.72; }
.nl-form{ position:relative; z-index:1; display:flex; flex-direction:column; gap:11px; }
.nl-row{ display:flex; gap:11px; flex-wrap:wrap; }
.nl-row input{
  flex:1 1 220px; min-height:50px; padding:13px 15px; border-radius:11px;
  border:1px solid var(--line2); background:var(--void); color:var(--white);
  font-family:var(--body); font-size:14px; transition:border-color .25s, box-shadow .25s;
}
.nl-row input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.nl-row input[aria-invalid="true"]{ border-color:var(--crit); }
.nl-err{ font-family:var(--mono); font-size:9px; letter-spacing:.8px; color:var(--crit); min-height:12px; }
.nl-hint{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.2px; color:var(--fog); line-height:1.7; }
.nl-done{ display:none; padding:20px 22px; border-radius:var(--r-lg); border:1px solid var(--ok); background:rgba(63,224,176,.07); }
.nl-done.on{ display:block; }
.nl-done b{ display:block; font-family:var(--display); font-size:16px; font-weight:600; color:var(--white); margin-bottom:8px; }
.nl-done p{ font-size:13px; color:var(--ice); line-height:1.7; }
@media (max-width:900px){ .nl{ grid-template-columns:1fr; gap:var(--s4); } }

/* ============================================================
   ARTICLE PAGE
   Reading comfort is the priority below the hero.
   ============================================================ */
.art-hero{ padding-top:var(--s6); padding-bottom:var(--s5); }
.art-kicker{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.art-h1{
  font-family:var(--display); font-size:clamp(29px,4.1vw,50px); font-weight:700;
  line-height:1.08; letter-spacing:-1.6px; margin-bottom:16px; max-width:16ch; text-wrap:balance;
  max-width:none;
}
.art-sub{ font-size:17px; color:var(--ice); line-height:1.66; max-width:760px; margin-bottom:var(--s4); }
.art-meta{ display:flex; flex-wrap:wrap; gap:9px 22px; font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); }
.art-figure{ margin-top:var(--s5); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.art-figure img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transform:translate3d(0,var(--iy,0px),0) scale(1.04); }

.art-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 262px; gap:var(--s6); align-items:start; }
/* Grid children default to min-width:auto, so the table's min-width pushed
   this column open instead of letting .art-tablewrap scroll — the body ended
   up 522px wide inside a 320px viewport. */
.art-body{ min-width:0; max-width:820px; font-size:16.5px; line-height:1.82; color:var(--ice); }
.art-body > *{ max-width:100%; }
.art-body p{ margin-bottom:22px; }
.art-body h2{
  font-family:var(--display); font-size:clamp(22px,2.5vw,29px); font-weight:700; letter-spacing:-.7px;
  line-height:1.24; margin:52px 0 18px; scroll-margin-top:110px; color:var(--white);
}
.art-body h2::before{
  content:''; display:block; width:44px; height:2px; margin-bottom:16px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
}
.art-body h3{ font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.3px; margin:32px 0 12px; color:var(--white); }
.art-body ul, .art-body ol{ margin:0 0 24px; padding-left:0; display:flex; flex-direction:column; gap:11px; }
.art-body li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.74; color:var(--ice); }
.art-body ul li::before{
  content:''; position:absolute; left:3px; top:11px; width:7px; height:7px; border-radius:2px;
  border:1px solid var(--acc-line); background:var(--acc-soft); transform:rotate(45deg);
}
.art-body ol{ counter-reset:artol; }
.art-body ol li{ counter-increment:artol; }
.art-body ol li::before{
  content:counter(artol,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:10.5px; color:var(--acc); letter-spacing:.5px;
}
.art-body b, .art-body strong{ color:var(--white); font-weight:600; }
.art-body a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.art-body a:hover{ color:var(--white); }
.art-body code{
  font-family:var(--mono); font-size:.86em; color:var(--ice);
  background:var(--panel); border:1px solid var(--line2); border-radius:6px; padding:2px 6px;
}
.art-code{
  max-width:100%; margin:0 0 26px; padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--void); overflow-x:auto;
}
.art-code pre{ font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--ice); white-space:pre; }
.art-note{
  margin:0 0 28px; padding:22px 24px; border-radius:var(--r-md);
  border:1px solid var(--line2); border-left:2px solid var(--acc);
  background:linear-gradient(100deg, rgba(79,216,234,.055), rgba(13,20,36,.5));
}
.art-note b{ display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:2.2px; color:var(--acc); margin-bottom:11px; }
.art-note p{ margin:0; font-size:15px; line-height:1.74; color:var(--ice); }
.art-tablewrap{ margin:0 0 28px; overflow-x:auto; max-width:100%; border:1px solid var(--line); border-radius:var(--r-md); }
.art-table{ width:100%; border-collapse:collapse; min-width:520px; }
.art-table th, .art-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.6; }
.art-table th{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--acc); background:var(--deep); font-weight:400; }
.art-table td{ color:var(--fog); }
.art-table tr:last-child td{ border-bottom:0; }

/* --- contents --- */
.toc{ position:sticky; top:96px; }
.toc-h{ font-family:var(--mono); font-size:8.5px; letter-spacing:2.2px; color:var(--fog); margin-bottom:14px; }
.toc-list{ display:flex; flex-direction:column; gap:1px; border-left:1px solid var(--line2); }
.toc-list a{
  display:block; padding:8px 0 8px 15px; margin-left:-1px; border-left:1px solid transparent;
  font-size:12.5px; line-height:1.5; color:var(--fog); transition:color .25s, border-color .25s;
}
.toc-list a:hover{ color:var(--ice); }
.toc-list a.on{ color:var(--acc); border-left-color:var(--acc); }
.toc-toggle{ display:none; }

@media (max-width:1050px){
  .art-wrap{ grid-template-columns:1fr; gap:var(--s4); }
  .toc{ position:static; order:-1; border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); }
  .toc-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    min-height:52px; padding:14px 17px; background:none; border:0; cursor:pointer;
    font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--ice);
  }
  .toc-toggle .chev{ width:8px; height:8px; border-right:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc); transform:rotate(45deg); transition:transform .3s var(--ease); }
  .toc-toggle[aria-expanded="true"] .chev{ transform:rotate(-135deg); }
  .toc-h{ display:none; }
  .toc-list{ display:none; padding:0 17px 15px; border-left:0; }
  .toc-list.on{ display:flex; }
  .toc-list a{ border-left:1px solid var(--line2); }
  .art-body{ font-size:16px; }
}
@media (max-width:520px){
  .art-body{ font-size:15.5px; line-height:1.78; }
  .art-body h2{ margin:40px 0 15px; }
  .art-note, .art-code{ padding:17px 16px; }
}

/* --- article footer --- */
.art-foot{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); }
.art-by{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); margin-bottom:var(--s5); }
.art-by b{ color:var(--ice); font-weight:400; }
.art-rel{ display:flex; flex-direction:column; gap:8px; }
.art-rel a{
  display:flex; align-items:center; gap:14px; min-height:56px; padding:14px 17px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep); transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.art-rel a:hover{ border-color:var(--acc-line); background:var(--panel); transform:translateX(3px); }
.art-rel .k{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.4px; color:var(--acc); flex:none; width:96px; }
.art-rel .t{ font-family:var(--display); font-size:14.5px; font-weight:600; color:var(--ice); }
.art-rel .go{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--acc); }
@media (max-width:560px){ .art-rel .k{ width:auto; } .art-rel a{ flex-wrap:wrap; gap:6px 12px; } }

/* ============================================================
   REVEALS + REDUCED MOTION
   ============================================================ */
.rs [data-rv], .art [data-rv]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rs [data-rv].in, .art [data-rv].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rs *, .rs *::before, .rs *::after,
  .art *, .art *::before, .art *::after{ animation:none !important; transition-duration:.01ms !important; }
  .rs [data-rv], .art [data-rv]{ opacity:1; transform:none; }
  .rs-grid{ transform:none; }
  .rnet-link{ stroke-dashoffset:0; }
  .rnet-dust{ display:none; }
  .rc{ opacity:1; transform:none; filter:none; }
  .mar-track{ transform:none; }
  .art-figure img, .rf-media img{ transform:none; }
}

/* 44px minimum on every control these pages own. */
.rs .cta-btn, .rs .cta-ghost, .art .cta-btn, .art .cta-ghost{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }