/* ============================================================
   PubX Core v2 — shared engineering for five trade publications.
   Colour and type live in the child theme. Everything here is
   structure, motion and behaviour, identical across all five.
   ============================================================ */

:root{
  /* --- structure --- */
  --wrap:1280px; --measure:45rem;
  --gutter:clamp(1.15rem,4.4vw,4.5rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* --- fluid type (Utopia method, 400px -> 1440px) --- */
  --t-xs:clamp(.6875rem,.665rem + .09vw,.75rem);
  --t-sm:clamp(.8125rem,.784rem + .115vw,.875rem);
  --t-base:clamp(1rem,.966rem + .135vw,1.0625rem);
  --t-lg:clamp(1.125rem,1.06rem + .26vw,1.3125rem);
  --t-xl:clamp(1.3125rem,1.19rem + .5vw,1.625rem);
  --t-2xl:clamp(1.5rem,1.26rem + .96vw,2.125rem);
  --t-3xl:clamp(1.875rem,1.44rem + 1.73vw,3rem);
  --t-4xl:clamp(2.375rem,1.63rem + 2.98vw,4.3125rem);
  --t-5xl:clamp(2.75rem,1.58rem + 4.69vw,5.8125rem);

  /* --- motion: three curves, six durations. Do not add more. --- */
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.7,0,.84,0);
  --ease-move:cubic-bezier(.65,0,.35,1);
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:240ms;
  --dur-medium:360ms; --dur-slow:520ms; --dur-glacial:800ms;
  --stagger:40ms;

  /* --- neutral fallbacks so the parent alone never renders unstyled --- */
  --ink:#12151A; --ink-2:#333B45; --ink-3:#525B67; --ink-4:#767F8B; --ink-5:#9BA3AE;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F6;
  --brand:#12151A; --accent:#12151A; --accent-2:#12151A; --on-accent:#FFFFFF;
  --line:#DCDFE4; --line-2:#EBEDF0; --focus:currentColor;
  --r:0px; --r-lg:0px;
  --ff-display:Georgia,serif; --ff-body:system-ui,sans-serif;
  --ff-ui:system-ui,sans-serif; --ff-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --hero-ink:var(--ink);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);
  font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-synthesis-weight:none;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.1;margin:0;text-wrap:balance}
p{margin:0 0 var(--s4);text-wrap:pretty}
figure{margin:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:2px;
  transition:outline-offset var(--dur-instant) var(--ease-move)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* Visually hidden, still read aloud. Used for the heading that names a list of
   cards: without it the page jumps h1 -> h3, because a card title is an h3 and
   these templates have no section heading of their own. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand);color:#fff;
  padding:.8rem 1.3rem;font-family:var(--ff-ui);font-size:var(--t-sm)}
.skip:focus{left:0}

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.wrap--measure{width:min(100% - (var(--gutter) * 2),var(--measure))}
.kicker{font-family:var(--ff-ui);font-size:var(--t-xs);letter-spacing:.17em;
  text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 var(--s3);display:block}
.meta{font-family:var(--ff-ui);font-size:var(--t-sm);color:var(--ink-4)}
.tnum{font-variant-numeric:tabular-nums}

/* ============================================================
   MOTION
   Baseline is the reduced version. Travel is added only under
   prefers-reduced-motion: no-preference, and scroll-linked
   progress only where animation-timeline actually exists.
   ============================================================ */

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes wipeX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipeY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* Anything not yet reached stays fully visible unless we can animate it properly. */
.rv,.rv-rule,.rv-stack > *{opacity:1;transform:none}

@media (prefers-reduced-motion:no-preference){

  /* ---- above the fold: a short, time-based entrance on load ---- */
  .hero-in{animation:settle var(--dur-slow) var(--ease-enter) both}
  /* The LCP headline never starts transparent — it only travels. */
  .hero-lcp{animation:lcpRise var(--dur-slow) var(--ease-enter) both}
  @keyframes lcpRise{from{transform:translateY(12px)}to{transform:none}}
  .hero-in--1{animation-delay:calc(var(--stagger) * 1)}
  .hero-in--2{animation-delay:calc(var(--stagger) * 2)}
  .hero-in--3{animation-delay:calc(var(--stagger) * 3)}
  .hero-in--4{animation-delay:calc(var(--stagger) * 4)}
  .hero-in--5{animation-delay:calc(var(--stagger) * 5)}

  /* ---- below the fold: scroll-linked, compositor only ---- */
  @supports (animation-timeline:view()){
    .rv{opacity:0;animation:rise linear both;
        animation-timeline:view();animation-range:entry 4% cover 24%}
    .rv-rule{transform:scaleX(0);transform-origin:left center;
        animation:wipeX linear both;
        animation-timeline:view();animation-range:entry 10% cover 30%}
    .rv-stack > *{opacity:0;animation:rise linear both;
        animation-timeline:view();animation-range:entry 2% cover 26%}
    .rv-stack > *:nth-child(2){animation-range:entry 4% cover 28%}
    .rv-stack > *:nth-child(3){animation-range:entry 6% cover 30%}
    .rv-stack > *:nth-child(4){animation-range:entry 8% cover 32%}
    .rv-stack > *:nth-child(n+5){animation-range:entry 10% cover 34%}
    .rv-media img{animation:mediaSettle linear both;
        animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes mediaSettle{from{transform:scale(1.045)}to{transform:scale(1)}}
  }

  /* ---- Firefox and anything else without view timelines ---- */
  @supports not (animation-timeline:view()){
    html.js .rv,html.js .rv-stack > *{opacity:0}
    html.js .rv-rule{transform:scaleX(0);transform-origin:left center}
    html.js .is-in.rv,html.js .is-in .rv{animation:rise var(--dur-slow) var(--ease-enter) both}
    html.js .is-in.rv-rule{animation:wipeX var(--dur-slow) var(--ease-enter) both}
    html.js .is-in.rv-stack > *{animation:rise var(--dur-slow) var(--ease-enter) both}
    html.js .is-in.rv-stack > *:nth-child(2){animation-delay:var(--stagger)}
    html.js .is-in.rv-stack > *:nth-child(3){animation-delay:calc(var(--stagger)*2)}
    html.js .is-in.rv-stack > *:nth-child(4){animation-delay:calc(var(--stagger)*3)}
    html.js .is-in.rv-stack > *:nth-child(n+5){animation-delay:calc(var(--stagger)*4)}
  }
}

/* Cross-document navigation. Both documents must carry this, so it is global. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
#wpadminbar{view-transition-name:wp-admin-bar}
::view-transition-old(root){animation:none;opacity:1}
::view-transition-new(root){animation:fade var(--dur-base) var(--ease-enter) both}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);view-transition-name:site-head}
@supports (backdrop-filter:blur(1px)){
  .site-head{background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:saturate(180%) blur(14px)}
}
.site-head__bar{display:flex;align-items:center;gap:var(--s4);min-height:72px;position:relative}
.wordmark{display:inline-flex;align-items:center;color:var(--ink);
  transition:color var(--dur-base) var(--ease-move)}
.wordmark:hover{color:var(--accent)}
.wordmark svg{height:34px;width:auto;display:block}
.site-head__tools{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex:0 0 auto}
/* At the narrowest phone widths (320px) the wordmark's intrinsic width plus the
   44px search button overflowed the wrap by 2px, giving a horizontal scrollbar.
   A flex item will not shrink below its content, and an SVG with width:auto has
   a genuine intrinsic width, so the fix is to scale the wordmark rather than to
   hope it shrinks. min-width:0 on the bar's children is the safety net. */
.site-head__bar>*{min-width:0}
@media (max-width:420px){
  .site-head__bar{gap:var(--s3)}
  .wordmark svg{height:26px}
}
.site-head__date{font-family:var(--ff-ui);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
@media (max-width:860px){.site-head__date{display:none}}
.searchtoggle,.navtoggle{background:none;border:0;cursor:pointer;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:var(--r);
  transition:color var(--dur-base) var(--ease-move)}
.searchtoggle:hover,.navtoggle:hover{color:var(--accent)}
.searchtoggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navtoggle{display:none;flex-direction:column;gap:4px}
.navtoggle span{display:block;width:19px;height:1.6px;background:currentColor;
  transition:transform var(--dur-base) var(--ease-move),opacity var(--dur-fast) var(--ease-move)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.nav{border-top:1px solid var(--line-2)}
.nav__list{display:flex;gap:var(--s6);list-style:none;margin:0;padding:.85rem 0;
  flex-wrap:wrap;align-items:center}
.nav__list a{font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);position:relative;
  padding-block:.35rem;display:inline-block;
  transition:color var(--dur-base) var(--ease-move)}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--dur-base) var(--ease-move)}
.nav__list a:hover{color:var(--ink)}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left center}
.nav__list .current-menu-item > a,.nav__list .current-cat > a{color:var(--ink)}
.nav__list .current-menu-item > a::after,.nav__list .current-cat > a::after{transform:scaleX(1)}

@media (max-width:860px){
  .navtoggle{display:inline-flex;order:-1;margin-left:calc(var(--s2) * -1)}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--line);display:none;padding-inline:var(--gutter)}
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;gap:0;align-items:stretch;padding:var(--s3) 0 var(--s5)}
  .nav__list a{padding-block:.85rem;font-size:var(--t-base);letter-spacing:.06em}
  .nav__list a::after{display:none}
}

.site-search{border-top:1px solid var(--line-2);padding-block:var(--s5)}
.searchform{display:flex;gap:var(--s3)}
.searchform input[type=search]{flex-grow:1;min-width:0;height:52px;padding:0 var(--s4);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--ff-ui);font-size:var(--t-base);border-radius:var(--r)}
.searchform button{height:52px;padding:0 var(--s6);border:0;background:var(--accent);
  color:var(--on-accent);font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.06em;cursor:pointer;border-radius:var(--r);
  transition:opacity var(--dur-base) var(--ease-move)}
.searchform button:hover{opacity:.88}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{border-top:1px solid var(--ink);margin-top:var(--s9);padding-block:var(--s8) var(--s7)}
.site-foot__grid{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:860px){.site-foot__grid{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}}
.site-foot__brand svg{height:30px;width:auto;color:var(--ink);margin-bottom:var(--s4)}
.site-foot p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-3);max-width:40ch}
.site-foot h2{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 var(--s3)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:block;padding:.34rem 0;font-family:var(--ff-ui);font-size:var(--t-sm);
  color:var(--ink-3);transition:color var(--dur-base) var(--ease-move)}
.site-foot li a:hover{color:var(--accent)}
.site-foot__mail{display:inline-block;padding-block:.3rem;
  font-family:var(--ff-ui);font-size:var(--t-sm);color:var(--accent);
  border-bottom:1px solid currentColor;padding-bottom:1px}
.colophon{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4)}
.colophon a{color:var(--ink-3);border-bottom:1px solid var(--line);
  /* 24px minimum pointer target (WCAG 2.5.8). These sit in a separated list,
     not inside a sentence, so the inline exception does not cover them. */
  display:inline-block;padding-block:.34rem}
.colophon a:hover{color:var(--accent)}

/* ------------------------------------------------------------ wordmarks */
.wm{display:inline-flex;align-items:center;gap:.65rem;line-height:1}
.wm__stack{display:flex;flex-direction:column;gap:.3rem}
.wm__row{display:flex;align-items:center;gap:.7rem}
.wm__name{font-family:var(--ff-display);white-space:nowrap}
.wm__sub{font-family:var(--ff-ui);white-space:nowrap}

.pub-docketjournal .wm__name{font-size:1.72rem;font-weight:600;letter-spacing:-.026em;
  font-variation-settings:'opsz' 48}
.pub-docketjournal .wm__rule{display:block;height:2px;background:var(--accent);
  transform-origin:left center}
.pub-docketjournal .wm__rail{height:38px;width:10px;flex-shrink:0}

.pub-siteworkjournal .wm{flex-direction:column;align-items:flex-start;gap:.34rem}
.pub-siteworkjournal .wm__name{font-size:1.62rem;font-weight:800;letter-spacing:-.012em;
  text-transform:uppercase;font-variation-settings:'wdth' 115,'wght' 800;line-height:.94}
/* .66rem rendered at 10.56px and .68rem at 10.88px, both under the 11px
   floor the mobile pass checks for. Nudged to .7rem (11.2px): six percent
   on a wide-tracked secondary word is invisible next to the primary name,
   and it keeps the masthead out of the 'too small to read' bucket. */
.pub-siteworkjournal .wm__sub{font-size:.7rem;font-weight:500;letter-spacing:.4em;
  text-transform:uppercase;color:var(--ink-2);font-variation-settings:'wdth' 100}
@media (max-width:620px){.pub-siteworkjournal .wm__dim{display:none}}

.pub-servicecallwire .wm{flex-direction:column;align-items:flex-start;gap:.12rem}
.pub-servicecallwire .wm__name{font-size:1.62rem;font-weight:600;letter-spacing:-.02em;
  font-variation-settings:'opsz' 96,'SOFT' 42,'WONK' 1;line-height:1.02}
.pub-servicecallwire .wm__sub{font-size:1rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
@media (max-width:620px){.pub-servicecallwire .wm__thread{display:none}}

.pub-throughputjournal .wm{flex-direction:column;align-items:flex-start;gap:.34rem}
/* .62rem rendered at 9.92px, the smallest text anywhere in the five sites
   and well under the 11px floor. Raised to .7rem to match the other two
   masthead sub-labels, which were nudged for the same reason. */
.pub-throughputjournal .wm__bay{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.pub-throughputjournal .wm__row{align-items:baseline}
.pub-throughputjournal .wm__name{font-size:1.56rem;font-weight:600;letter-spacing:-.022em;
  font-variation-settings:'opsz' 48}
.pub-throughputjournal .wm__bar{width:1px;align-self:stretch;background:var(--line)}
.pub-throughputjournal .wm__sub{font-family:var(--ff-mono);font-size:1rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

.pub-headcountjournal .wm__name{font-size:1.6rem;font-weight:600;letter-spacing:-.024em;
  font-variation-settings:'opsz' 48;line-height:1}
.pub-headcountjournal .wm__sub{font-size:.7rem;font-weight:600;letter-spacing:.44em;
  text-transform:uppercase;color:var(--ink-3)}
.pub-headcountjournal .wm__tally{flex-shrink:0}

.site-foot__brand .wm{margin-bottom:var(--s4)}
@media (prefers-reduced-motion:no-preference){
  .site-head .pub-docketjournal .wm__rule,.pub-docketjournal .site-head .wm__rule{
    animation:wipeX var(--dur-slow) var(--ease-enter) .1s both}
}

/* ============================================================
   SECTIONS AND CARDS
   ============================================================ */
.section{padding-block:var(--s8)}
.section--tight{padding-block:var(--s7)}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3) var(--s5);padding-bottom:var(--s3);border-bottom:2px solid var(--ink);margin-bottom:var(--s6)}
.section__title{font-size:var(--t-2xl);letter-spacing:-.02em;color:var(--ink)}
.section__title a{transition:color var(--dur-base) var(--ease-move)}
.section__title a:hover{color:var(--accent)}
.section__count{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.section__more{font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.45rem;
  transition:color var(--dur-base) var(--ease-move)}
.section__more:hover{color:var(--accent)}
.section__more span{transition:transform var(--dur-base) var(--ease-move)}
.section__more:hover span{transform:translateX(4px)}

.grid{display:grid;gap:var(--s6)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:680px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{display:flex;flex-direction:column;gap:var(--s3);min-width:0;
  container-type:inline-size;container-name:card}
.card__media{overflow:hidden;background:var(--surface-2);border-radius:var(--r);
  aspect-ratio:16/10;margin-bottom:var(--s2)}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-move)}
.card:hover .card__media img{transform:scale(1.03)}
.card__title{font-size:var(--t-xl);line-height:1.2;letter-spacing:-.018em;color:var(--ink)}
.card__title a{display:block;transition:color var(--dur-base) var(--ease-move)}
.card:hover .card__title a{color:var(--accent)}
.card__excerpt{font-size:var(--t-sm);line-height:1.58;color:var(--ink-3);margin:0}
.card__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);margin-top:auto;padding-top:var(--s2)}
.card--lead .card__title{font-size:var(--t-3xl);letter-spacing:-.026em}
.card--lead .card__excerpt{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2)}
.card--std .card__media{display:none}
.card--std .card__title{font-size:var(--t-lg)}
@container card (min-width: 460px){
  .card--wide .card__title{font-size:var(--t-xl)}
}
.archive-list > .card{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.archive-list > .card:first-child{padding-top:0}

.lead-block{display:grid;gap:var(--s7);padding-block:var(--s7)}
@media (min-width:980px){.lead-block{grid-template-columns:minmax(0,1.6fr) minmax(0,.92fr);gap:var(--s8)}}
.lead-block__rail{display:flex;flex-direction:column;gap:var(--s5)}
.lead-block__rail-head{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:var(--s3);border-bottom:2px solid var(--ink)}

/* Long archives: let the browser skip what is off screen. */
.archive-list > .card,.grid--3 > .card{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ============================================================
   ARTICLE
   ============================================================ */
.article__head{padding-block:var(--s7) var(--s5)}
.article__title{font-size:var(--t-4xl);letter-spacing:-.032em;color:var(--ink);max-width:19ch}
.article__dek{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);max-width:56ch;
  margin:var(--s5) 0 0;font-weight:400}
.article__byline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-family:var(--ff-ui);font-size:var(--t-sm)}
.article__byline strong{font-weight:600;color:var(--ink-2)}
.article__byline time,.article__byline span{color:var(--ink-4)}
/* THE LEAD PHOTOGRAPH.
   It used to inherit .wrap's full 1280px while every word on the page sat in a
   720px column, so the article had three different left edges: image at 260,
   caption at 260, text at 540. Measured on a live article on 18 Sep 2026 — it
   read as unfinished, and at 1280x720 the photograph filled an entire laptop
   screen on its own. Clamping the figure to the measure gives the whole page a
   single alignment axis: headline, photograph, credit and body all begin at the
   same point. The front pages keep their own, deliberately different treatments
   — that is where each title's character belongs. */
.article__figure{margin-block:var(--s6);max-width:var(--measure)}
/* The ring matters more than it looks. siteworkjournal-lead-2 is an aerial of
   pale concrete; against that title's warm paper its lower edge simply
   dissolved, and the photograph appeared to stop 200px above its own bottom.
   A 1px ring guarantees every lead has a defined edge whatever is in it, and
   as a box-shadow it costs no layout. */
.article__figure img{width:100%;border-radius:var(--r);display:block;
  box-shadow:0 0 0 1px var(--line-2)}
.article__figure figcaption{font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);
  margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line-2);max-width:60ch}
.article__figure figcaption b{font-weight:600;color:var(--ink-3)}
.article__body{font-size:var(--t-lg);line-height:1.72;color:var(--ink)}
.article__body > *{max-width:var(--measure);margin-inline:auto}
.article__body p{margin:0 auto 1.35em}
.article__body h2{font-size:var(--t-2xl);letter-spacing:-.02em;margin:2.4em auto .7em}
.article__body h3{font-size:var(--t-xl);letter-spacing:-.014em;margin:2em auto .5em}
.article__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:text-decoration-color var(--dur-base) var(--ease-move)}
.article__body a:hover{text-decoration-color:transparent}

/* TAP TARGETS ON A PHONE. A link sitting alone in its own paragraph — the
   contact addresses, and the "read the editorial policy" style pointers — is a
   destination, not a word inside a sentence, and a thumb has to land on it.
   Measured 18 Sep 2026: they were 21px tall, against the 44px a finger wants.
   Vertical padding on an INLINE box grows the hit area without changing the
   line box, so nothing on the page moves by a single pixel; these links carry
   no background, only an underline, so nothing repaints either. Links inside a
   sentence are deliberately NOT touched: padding them would overlap the hit
   areas of the lines above and below, which is worse than a small target. */
/* The category link above an article title was 18px tall with no vertical
   padding at all — the smallest real tap target on the site, on the page the
   owner will publish to most. There were no posts when the rest of the mobile
   pass ran, so this template had never been rendered; it was measured on
   18 Sep 2026 against a reconstructed article using the live stylesheet.
   Padding grows the target to ~38px; the negative top margin and the trimmed
   bottom margin put the headline back exactly where it was. Scoped to the
   article head on purpose: .kicker is also used for card and hero eyebrows,
   some of which carry inline margins that this would fight. */
@media (max-width:720px){
  .article__head a.kicker{padding-block:.62rem;margin-top:-.62rem;
    margin-bottom:calc(var(--s3) - .62rem)}
}
@media (max-width:720px){
  .article__body > p > a:only-child,
  .article__body > p > strong:only-child > a:only-child,
  .article__body > p > em:only-child > a:only-child{
    padding-block:.62rem}
}
.article__body ul,.article__body ol{padding-left:1.3em;margin:0 auto 1.35em}
.article__body li{margin-bottom:.5em}
.article__body blockquote{border-left:3px solid var(--accent);padding-left:1.3rem;margin:2em auto;
  font-family:var(--ff-display);font-size:var(--t-xl);line-height:1.42;color:var(--ink);font-style:normal}
.article__body blockquote p:last-child{margin-bottom:0}
.article__body hr{border:0;border-top:1px solid var(--line);margin:2.6em auto}
.article__body table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:2em auto;
  font-variant-numeric:tabular-nums}
.article__body th,.article__body td{padding:.72rem .8rem;border-bottom:1px solid var(--line-2);text-align:left}
.article__body th{background:var(--surface-2);font-family:var(--ff-ui);text-transform:uppercase;
  letter-spacing:.07em;font-size:var(--t-xs);color:var(--ink-2)}
.article__body code{font-family:var(--ff-mono);font-size:.9em;background:var(--surface-2);
  padding:.14em .38em;border-radius:2px}
.article__body img{border-radius:var(--r)}
.article__body figure{margin:var(--s6) auto}
.article__body figcaption{font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);margin-top:var(--s2)}
.article__body .alignwide{max-width:min(100%,1040px)}
.article__body .alignfull{max-width:none;width:100%}

.sponsor-disclosure{max-width:var(--measure);margin:0 auto var(--s6);padding:var(--s4) var(--s5);
  border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);
  font-family:var(--ff-ui);font-size:var(--t-sm);line-height:1.58;color:var(--ink-2)}
.sponsor-disclosure__tag{display:block;color:var(--accent);text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--t-xs);font-weight:600;margin-bottom:.45rem}
.sponsor-disclosure p{margin:0}
.sponsor-disclosure a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.badge--sponsored{background:var(--accent-2)}

.pagination{display:flex;gap:var(--s2);flex-wrap:wrap;padding-block:var(--s7);
  font-family:var(--ff-ui);font-size:var(--t-sm)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .7rem;border:1px solid var(--line);
  border-radius:var(--r);color:var(--ink-2);transition:border-color var(--dur-base) var(--ease-move),
  color var(--dur-base) var(--ease-move)}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.signup{background:var(--brand);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.9rem,4.2vw,2.9rem) clamp(1.4rem,4vw,3rem);margin-block:var(--s8);
  display:grid;gap:var(--s6)}
@media (min-width:900px){.signup{grid-template-columns:minmax(0,1fr) 25rem;
  gap:var(--s8);align-items:center}}
/* CONTRAST ON THE SIGN-UP PANEL — measured 18 Sep 2026, do not lower these.
   The panel background is per-publication (--accent-2 or --brand), and the
   darkest one, Docket Journal's #1B3A5C, was always fine. Service Call Wire's
   #2C5F5D is the lightest, and against it the old values failed:
       eyebrow + label  white .66  ->  4.19:1   (needs 4.5)
       note             white .62  ->  3.90:1   (needs 4.5)
       input border     white .34  ->  2.24:1   (needs 3.0 for a UI edge)
       placeholder      white .50  ->  3.11:1
   White at .72 is the lowest alpha that clears 4.5 on EVERY panel in the set
   (4.66 on the worst), and .52 clears 3.0 for the border. The filled value
   stays solid #fff, so a typed address still reads darker than the hint. */
.signup__eyebrow{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:var(--s3)}
.signup__title{font-size:var(--t-2xl);line-height:1.16;letter-spacing:-.022em;max-width:22ch}
.signup__desc{margin:var(--s3) 0 0;font-size:var(--t-sm);line-height:1.56;
  color:rgba(255,255,255,.8);max-width:54ch}
.signup__form{display:flex;flex-direction:column;gap:var(--s3)}
/* Honeypot. Off-screen rather than display:none, because some bots skip fields
   that are display:none — and aria-hidden plus tabindex="-1" on the input keeps
   it away from anyone using a keyboard or a screen reader. */
.signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__result{font-family:var(--ff-ui);font-size:var(--t-sm);line-height:1.5}
.signup__result--ok{align-self:start;max-width:32ch;font-weight:600}
.signup__result--err{opacity:.95;font-weight:600}
.signup__form label{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.signup__row{display:flex;gap:var(--s3);flex-wrap:wrap}
.signup__form input{flex:1 1 12rem;min-width:0;height:50px;padding:0 var(--s4);
  border:1px solid rgba(255,255,255,.52);background:rgba(255,255,255,.08);color:#fff;
  font-family:var(--ff-ui);font-size:var(--t-base);border-radius:var(--r)}
.signup__form input::placeholder{color:rgba(255,255,255,.72)}
.signup__form button{height:50px;padding:0 var(--s6);border:0;background:#fff;color:var(--brand);
  font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;letter-spacing:.05em;cursor:pointer;
  border-radius:var(--r);transition:transform var(--dur-base) var(--ease-move),opacity var(--dur-base) var(--ease-move)}
.signup__form button:hover{opacity:.9}
.signup__form button:active{transform:translateY(1px)}
.signup__note{font-family:var(--ff-ui);font-size:var(--t-xs);color:rgba(255,255,255,.72)}

/* ============================================================
   LAUNCH STATE / 404 / RELATED
   ============================================================ */
/* THE LAUNCH-STATE PHOTOGRAPHS.
   Same ring as the article lead, for the same reason: a pale frame against a
   pale paper has no edge of its own. These carry their credit line underneath,
   set in the same quiet UI face as an article's. The pair collapses to one
   column below 900px rather than shrinking to postage stamps. */
.stock{margin:0}
.stock img{width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:0 0 0 1px var(--line-2)}
.stock figcaption{font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);
  margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line-2);max-width:60ch}
.stock--lead{margin-block:var(--s2)}
.stock__pair{display:grid;gap:var(--s6);margin-top:var(--s7);
  padding-top:var(--s7);border-top:1px solid var(--line-2)}
@media (min-width:900px){.stock__pair{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.launch{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(1.7rem,4vw,3rem)}
.launch__title{font-size:var(--t-2xl);max-width:22ch;margin:0 0 var(--s3)}
.launch__sub{color:var(--ink-2);max-width:56ch;margin:0 0 var(--s6);font-size:var(--t-sm)}
.launch__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.launch__list li{padding:var(--s4) 0;border-bottom:1px solid var(--line-2);display:grid;gap:.2rem}
@media (min-width:760px){.launch__list li{grid-template-columns:16rem 1fr;align-items:baseline;gap:var(--s5)}}
.launch__list a{font-family:var(--ff-display);font-size:var(--t-lg);color:var(--ink);
  transition:color var(--dur-base) var(--ease-move)}
.launch__list a:hover{color:var(--accent)}
.launch__list span{color:var(--ink-4);font-size:var(--t-sm)}

.related{border-top:2px solid var(--ink);padding-top:var(--s5);margin-top:var(--s8)}

/* ============================================================
   PAGE HEADS, TAGS, BREADCRUMBS, SPONSORED
   ============================================================ */
.page-head{padding-block:var(--s7) var(--s5);border-bottom:2px solid var(--ink);margin-bottom:var(--s6)}
.page-head__title{font-size:var(--t-3xl);letter-spacing:-.028em;max-width:22ch}
.page-head__desc{margin-top:var(--s4);color:var(--ink-2);max-width:56ch;font-size:var(--t-base)}
.page-head__desc p:last-child{margin-bottom:0}
.page-head__count{margin:var(--s4) 0 0;font-family:var(--ff-ui);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.page-head__search{margin-top:var(--s5);max-width:34rem}
.page__updated{font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);
  max-width:var(--measure);margin:var(--s7) auto 0;padding-top:var(--s4);border-top:1px solid var(--line-2)}
.empty{padding-block:var(--s7);color:var(--ink-3)}

.crumbs{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;padding-top:var(--s5);
  font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);list-style:none;margin:0;padding-left:0}
.crumbs li{display:flex;align-items:center;gap:.6rem}
.crumbs li+li::before{content:"/";color:var(--ink-5)}
/* A 24px pointer target (WCAG 2.5.8). Breadcrumb links sit in a trail of text so
   the inline exception is arguable, but padding costs nothing and the trail is
   the main way back on a phone. */
.crumbs a{color:var(--ink-3);display:inline-block;padding-block:.25rem;
  transition:color var(--dur-base) var(--ease-move)}
.crumbs a:hover{color:var(--accent)}

.tags{max-width:var(--measure);margin:var(--s7) auto 0;padding-top:var(--s4);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline}
.tags span{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}
.tags a{font-family:var(--ff-ui);font-size:var(--t-sm);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);padding:.3rem .7rem;
  transition:border-color var(--dur-base) var(--ease-move),color var(--dur-base) var(--ease-move)}
.tags a:hover{border-color:var(--accent);color:var(--accent)}

.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-ui);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent);padding:.28rem .6rem;border-radius:var(--r);margin-bottom:var(--s4)}
.article--sponsored .article__title{margin-top:var(--s2)}
.e404{padding-block:var(--s9);text-align:left}
.e404 h1{font-size:var(--t-4xl);letter-spacing:-.03em;margin-bottom:var(--s4)}
.e404 p{color:var(--ink-2);max-width:52ch}

/* ============================================================
   1 · DOCKET JOURNAL — the docket rail
   A numbered left margin. No photography above the fold.
   ============================================================ */
.pub-docketjournal .hero{padding-block:var(--s8) var(--s7)}
.pub-docketjournal .hero__grid{display:grid;gap:var(--s7)}
@media (min-width:980px){.pub-docketjournal .hero__grid{grid-template-columns:minmax(0,1.62fr) minmax(0,.9fr);gap:var(--s8)}}
.pub-docketjournal .rail{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s6);min-width:0}
.pub-docketjournal .rail__line{width:1px;background:var(--accent);transform-origin:top center}
.pub-docketjournal .rail__index{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.pub-docketjournal .rail__index b{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;
  color:var(--ink-5);font-variant-numeric:tabular-nums}
.pub-docketjournal .hero__title{font-size:var(--t-5xl);font-weight:700;line-height:1.02;
  letter-spacing:-.034em;max-width:17ch;font-variation-settings:'opsz' 60}
.pub-docketjournal .hero__dek{font-size:var(--t-xl);line-height:1.48;color:var(--ink-2);
  max-width:52ch;margin:var(--s5) 0 0;font-variation-settings:'opsz' 20}
.pub-docketjournal .filed{list-style:none;margin:0;padding:0}
.pub-docketjournal .filed li{display:grid;grid-template-columns:1.6rem 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line-2)}
.pub-docketjournal .filed b{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:600;
  color:var(--ink-5);font-variant-numeric:tabular-nums;padding-top:.28rem}
.pub-docketjournal .card__title,.pub-docketjournal .section__title{font-weight:600}
.pub-docketjournal .signup{background:var(--accent-2)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pub-docketjournal .rail__line{animation:dj-rail linear both;
      animation-timeline:view();animation-range:entry 0% cover 22%}
    @keyframes dj-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .pub-docketjournal .filed li{opacity:0;animation:dj-slide linear both;
      animation-timeline:view();animation-range:entry 2% cover 26%}
    @keyframes dj-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  }
}

/* ============================================================
   2 · SITEWORK JOURNAL — the drawing sheet
   Title block, dimension lines, hard borders, no radius.
   ============================================================ */
.pub-siteworkjournal .titleblock{border-bottom:1px solid var(--ink);background:var(--surface);
  display:flex;flex-wrap:wrap;overflow:hidden}
.pub-siteworkjournal .titleblock div{padding:.5rem var(--s4);border-right:1px solid var(--ink);
  display:flex;gap:.6rem;align-items:baseline;white-space:nowrap}
.pub-siteworkjournal .titleblock dt{font-family:var(--ff-mono);font-size:var(--t-xs);
  letter-spacing:.13em;color:var(--ink-4);margin:0}
.pub-siteworkjournal .titleblock dd{font-family:var(--ff-mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--ink-2);margin:0}
/* The title block is a drafting-sheet motif: four cells, each with a rule on
   its right separating it from the next. On a phone the last two cells are
   hidden, which left cell two's right-hand rule standing on its own with 93px
   of empty strip after it — a line pointing at nothing. Measured at 390px on
   18 Sep 2026. Hiding the cells is right; the rule has to go with them. */
@media (max-width:700px){
  .pub-siteworkjournal .titleblock div:nth-child(n+3){display:none}
  .pub-siteworkjournal .titleblock div:nth-child(2){border-right:0}
}
.pub-siteworkjournal .hero{padding-block:var(--s7) 0}
.pub-siteworkjournal .hero__frame{border:1px solid var(--ink)}
.pub-siteworkjournal .hero__media{aspect-ratio:21/9;border-bottom:1px solid var(--ink);
  overflow:hidden;background:var(--surface-2)}
.pub-siteworkjournal .hero__media img{width:100%;height:100%;object-fit:cover}
.pub-siteworkjournal .hero__body{padding:clamp(1.4rem,3.4vw,2.2rem) clamp(1.2rem,3vw,2.4rem)
  clamp(1.7rem,3.6vw,2.4rem);background:var(--surface)}
.pub-siteworkjournal .hero__title{font-size:var(--t-4xl);font-weight:800;line-height:1.02;
  letter-spacing:-.024em;max-width:20ch;font-variation-settings:'wdth' 108,'wght' 800}
.pub-siteworkjournal .hero__cols{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:860px){.pub-siteworkjournal .hero__cols{grid-template-columns:minmax(0,1fr) 15rem;gap:var(--s7)}}
.pub-siteworkjournal .hero__dek{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);
  max-width:52ch;margin:0}
.pub-siteworkjournal .hero__specs{border-left:1px solid var(--line);padding-left:var(--s5);
  display:flex;flex-direction:column;gap:.45rem;font-family:var(--ff-mono);font-size:var(--t-xs);
  letter-spacing:.07em;color:var(--ink-4)}
.pub-siteworkjournal .hero__specs b{color:var(--ink-2);font-weight:400}
.pub-siteworkjournal .dimline{display:flex;align-items:center;gap:var(--s4);margin-block:var(--s7)}
.pub-siteworkjournal .dimline i{flex-grow:1;height:9px;position:relative;display:block}
.pub-siteworkjournal .dimline i::before{content:"";position:absolute;left:0;right:0;top:4px;
  height:1px;background:var(--accent);transform:scaleX(1);transform-origin:var(--dim-o,left center)}
.pub-siteworkjournal .dimline i::after{content:"";position:absolute;top:0;bottom:0;width:1.4px;
  background:var(--accent)}
.pub-siteworkjournal .dimline i:first-child{--dim-o:right center}
.pub-siteworkjournal .dimline i:first-child::after{left:0}
.pub-siteworkjournal .dimline i:last-child::after{right:0}
.pub-siteworkjournal .dimline span{font-family:var(--ff-mono);font-size:var(--t-xs);
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.pub-siteworkjournal .card{border:1px solid var(--ink);gap:0}
.pub-siteworkjournal .card__media{border-radius:0;margin:0;border-bottom:1px solid var(--ink);aspect-ratio:4/3}
.pub-siteworkjournal .card__body{padding:var(--s4) var(--s5) var(--s5);display:flex;
  flex-direction:column;gap:var(--s3);flex-grow:1}
.pub-siteworkjournal .card__meta{font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  border-top:1px solid var(--line);margin-top:auto;padding-top:var(--s3)}
.pub-siteworkjournal .card--std,.pub-siteworkjournal .card--lead{border:0}
.pub-siteworkjournal .card--std .card__body,.pub-siteworkjournal .card--lead .card__body{padding:0}
.pub-siteworkjournal .kicker,.pub-siteworkjournal .meta{font-family:var(--ff-mono);letter-spacing:.13em}
.pub-siteworkjournal .section__title{text-transform:uppercase;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pub-siteworkjournal .dimline i::before{transform:scaleX(0);animation:sw-dim linear both;
      animation-timeline:view();animation-range:entry 12% cover 30%}
    @keyframes sw-dim{to{transform:scaleX(1)}}
    .pub-siteworkjournal .dimline span{opacity:0;animation:fade linear both;
      animation-timeline:view();animation-range:entry 22% cover 36%}
  }
}

/* ============================================================
   3 · SERVICE CALL WIRE — the wire
   One continuous line the length of the page; sections hang off it.
   ============================================================ */
.pub-servicecallwire .wire{position:fixed;left:max(1.1rem,calc((100vw - var(--wrap)) / 2 - 3.4rem));
  top:0;height:100vh;width:74px;pointer-events:none;z-index:0;overflow:visible}
.pub-servicecallwire .wire path{stroke:var(--accent);stroke-width:2;fill:none;
  stroke-linecap:round;opacity:.3;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--wire-len,1600);stroke-dashoffset:0}
@media (max-width:1240px){.pub-servicecallwire .wire{display:none}}
.pub-servicecallwire .site-main,.pub-servicecallwire .site-head,
.pub-servicecallwire .site-foot{position:relative;z-index:1}
.pub-servicecallwire .node{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.pub-servicecallwire .node::before{content:"";width:15px;height:15px;border-radius:99px;
  background:var(--bg);border:3px solid var(--accent);flex-shrink:0;
  margin-left:-1.85rem;transform:scale(1)}
@media (max-width:1080px){.pub-servicecallwire .node::before{margin-left:0}}
.pub-servicecallwire .node span{font-family:var(--ff-ui);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pub-servicecallwire .hero__grid{display:grid;gap:var(--s6)}
@media (min-width:1000px){.pub-servicecallwire .hero__grid{grid-template-columns:minmax(0,1fr) 27rem;
  gap:var(--s8);align-items:start}}
.pub-servicecallwire .hero__title{font-size:var(--t-5xl);font-weight:700;line-height:1.02;
  letter-spacing:-.032em;max-width:16ch;font-variation-settings:'opsz' 120,'SOFT' 46,'WONK' 1}
.pub-servicecallwire .hero__dek{font-size:var(--t-xl);line-height:1.52;color:var(--ink-2);
  max-width:50ch;margin:var(--s5) 0 0}
.pub-servicecallwire .hero__media{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2)}
.pub-servicecallwire .hero__media img{width:100%;height:100%;object-fit:cover}
.pub-servicecallwire .card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-move),border-color var(--dur-base) var(--ease-move)}
.pub-servicecallwire .card:hover{transform:translateY(-3px);border-color:var(--accent)}
.pub-servicecallwire .card__media{border-radius:0;margin:0}
.pub-servicecallwire .card__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex-grow:1}
.pub-servicecallwire .card--std{background:none;border:0;border-radius:0;padding-bottom:var(--s4);
  border-bottom:1px solid var(--line)}
.pub-servicecallwire .card--std .card__body,.pub-servicecallwire .card--lead .card__body{padding:0}
.pub-servicecallwire .card--std:hover,.pub-servicecallwire .card--lead:hover{transform:none}
.pub-servicecallwire .card--lead{background:none;border:0}
.pub-servicecallwire .kicker{color:var(--accent-2)}
.pub-servicecallwire .signup{background:var(--accent-2)}
.pub-servicecallwire .signup__form button{background:var(--accent);color:var(--on-accent)}
@media (prefers-reduced-motion:no-preference){
  .pub-servicecallwire .node::before{transition:transform var(--dur-fast) var(--ease-enter)}
  @supports (animation-timeline:scroll()){
    .pub-servicecallwire .wire path{stroke-dashoffset:var(--wire-len,3000);
      animation:scw-draw linear both;
      animation-timeline:scroll(root block);animation-range:0% 88%}
    @keyframes scw-draw{to{stroke-dashoffset:0}}
  }
  @supports (animation-timeline:view()){
    .pub-servicecallwire .node::before{transform:scale(0);animation:scw-node linear both;
      animation-timeline:view();animation-range:entry 6% entry 84%}
    @keyframes scw-node{to{transform:scale(1)}}
  }
}

/* ============================================================
   4 · WAREHOUSE BRIEF — the bay
   Dark by design. Aisle rules, bay codes, tabular figures.
   ============================================================ */
.pub-throughputjournal{color-scheme:dark}
.pub-throughputjournal .aisles{position:fixed;inset:0;display:flex;justify-content:space-between;
  padding-inline:var(--gutter);pointer-events:none;z-index:0}
.pub-throughputjournal .aisles i{width:1px;background:var(--line-2);transform-origin:bottom center}
@media (max-width:820px){.pub-throughputjournal .aisles i:nth-child(n+6){display:none}}
.pub-throughputjournal .site-main,.pub-throughputjournal .site-head,
.pub-throughputjournal .site-foot{position:relative;z-index:1}
.pub-throughputjournal .baycode{font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--accent);white-space:nowrap}
.pub-throughputjournal .hero{padding-block:var(--s7)}
.pub-throughputjournal .hero__grid{display:grid;gap:var(--s7)}
@media (min-width:1000px){.pub-throughputjournal .hero__grid{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s8)}}
.pub-throughputjournal .hero__title{font-size:var(--t-4xl);font-weight:600;line-height:1.05;
  letter-spacing:-.03em;max-width:17ch;font-variation-settings:'opsz' 60}
.pub-throughputjournal .hero__dek{font-size:var(--t-lg);line-height:1.52;color:var(--ink-2);
  max-width:52ch;margin:var(--s5) 0 0;font-variation-settings:'opsz' 18}
.pub-throughputjournal .hero__media{aspect-ratio:21/9;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:var(--s6);background:var(--surface-2)}
.pub-throughputjournal .hero__media img{width:100%;height:100%;object-fit:cover}
.pub-throughputjournal .figrail{border-top:1px solid var(--accent);padding-top:var(--s2)}
.pub-throughputjournal .figrail h2{font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3)}
.pub-throughputjournal .figrail dl{margin:0;display:flex;flex-direction:column}
.pub-throughputjournal .figrail div{padding:var(--s3) 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:.28rem}
.pub-throughputjournal .figrail dt{font-family:var(--ff-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4)}
.pub-throughputjournal .figrail dd{margin:0;font-family:var(--ff-mono);font-size:var(--t-xl);
  color:var(--accent-2);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pub-throughputjournal .figrail p{margin:0;font-size:var(--t-xs);line-height:1.45;color:var(--ink-3)}
.pub-throughputjournal .kicker,.pub-throughputjournal .meta,.pub-throughputjournal .card__meta,
.pub-throughputjournal .section__count,.pub-throughputjournal .section__more,
.pub-throughputjournal .nav__list a,.pub-throughputjournal .site-head__date{font-family:var(--ff-mono);letter-spacing:.12em}
.pub-throughputjournal .section__head{border-bottom-color:var(--accent);border-bottom-width:1px}
.pub-throughputjournal .card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;gap:0}
.pub-throughputjournal .card__media{border-radius:0;margin:0}
.pub-throughputjournal .card__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex-grow:1}
.pub-throughputjournal .card--std,.pub-throughputjournal .card--lead{background:none;border:0}
.pub-throughputjournal .card--std .card__body,.pub-throughputjournal .card--lead .card__body{padding:0}
.pub-throughputjournal .signup{background:var(--surface);border:1px solid var(--accent)}
.pub-throughputjournal .signup__title,.pub-throughputjournal .signup__desc{color:var(--ink)}
.pub-throughputjournal .signup__desc{color:var(--ink-2)}
.pub-throughputjournal .signup__eyebrow,.pub-throughputjournal .signup__form label,
.pub-throughputjournal .signup__note{color:var(--ink-3)}
.pub-throughputjournal .signup__form input{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.pub-throughputjournal .signup__form button{background:var(--accent);color:var(--on-accent)}
.pub-throughputjournal .article__body th{background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pub-throughputjournal .figrail div{opacity:0;animation:rise linear both;
      animation-timeline:view();animation-range:entry 4% cover 28%}
  }
}

/* ============================================================
   5 · HEADCOUNT JOURNAL — the roster
   Stories are ledger rows, never tiles. A count in every header.
   ============================================================ */
.pub-headcountjournal .roster{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.pub-headcountjournal .roster > li{display:grid;gap:var(--s3) var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);position:relative}
@media (min-width:900px){
  .pub-headcountjournal .roster > li{grid-template-columns:3.2rem minmax(0,1fr) 19rem 6rem}
}
.pub-headcountjournal .roster__n{font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-5);font-variant-numeric:tabular-nums}
.pub-headcountjournal .roster__sub{font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);margin:0}
.pub-headcountjournal .roster__read{font-family:var(--ff-ui);font-size:var(--t-xs);color:var(--ink-4);
  font-variant-numeric:tabular-nums}
@media (min-width:900px){.pub-headcountjournal .roster__read{text-align:right}}
.pub-headcountjournal .hero{padding-block:var(--s7) 0}
.pub-headcountjournal .hero__row{display:grid;gap:var(--s6);align-items:start;
  padding-bottom:var(--s7);border-bottom:2px solid var(--ink)}
@media (min-width:1000px){
  .pub-headcountjournal .hero__row{grid-template-columns:3.2rem minmax(0,1fr) 24rem;gap:var(--s6)}
}
.pub-headcountjournal .hero__n{font-family:var(--ff-ui);font-size:var(--t-sm);font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:.5rem}
.pub-headcountjournal .hero__title{font-size:var(--t-5xl);font-weight:600;line-height:1.05;
  letter-spacing:-.034em;max-width:17ch;font-variation-settings:'opsz' 60}
.pub-headcountjournal .hero__dek{font-size:var(--t-xl);line-height:1.5;color:var(--ink-2);
  max-width:52ch;margin:var(--s5) 0 0}
.pub-headcountjournal .hero__media{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2)}
.pub-headcountjournal .hero__media img{width:100%;height:100%;object-fit:cover}
.pub-headcountjournal .signup{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.pub-headcountjournal .signup__title{color:var(--ink)}
.pub-headcountjournal .signup__desc{color:var(--ink-2)}
.pub-headcountjournal .signup__eyebrow{color:var(--accent)}
.pub-headcountjournal .signup__form label,.pub-headcountjournal .signup__note{color:var(--ink-3)}
.pub-headcountjournal .signup__form input{background:var(--bg);border-color:var(--line);color:var(--ink)}
.pub-headcountjournal .signup__form button{background:var(--accent);color:var(--on-accent)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pub-headcountjournal .roster > li{opacity:0;animation:hc-row linear both;
      animation-timeline:view();animation-range:entry 3% cover 26%}
    @keyframes hc-row{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  }
}