/* cc.pcdev.info: County Control's pages in the pcdev network world.
   Same ground as pcdev.info (home.css): black and white, hairline rules, Schibsted Grotesk
   for words, IBM Plex Mono only for measured readouts and commands. The only colour on the
   page is the County Control logo image. No glow, no gradients, no cards. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0b0c; --bg-2:#0f0f11; --ink:#ededef; --ink-2:#a1a1a8; --ink-3:#8b8b94;
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.055); --rule-3:rgba(255,255,255,.035);
  --sans:'Schibsted Grotesk','Schibsted Grotesk Fallback',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,5vw,64px); --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Motion: a critically damped spring (no overshoot, ~0.35s response) for anything that
     appears or moves; presses are instant and short. */
  --spring:cubic-bezier(.2,.9,.25,1); --t-move:.34s; --t-press:100ms;
  --bar-bg:rgba(11,11,12,.72);
  color-scheme:dark;interpolate-size:allow-keywords;
}
html{scroll-behavior:smooth;scrollbar-color:#2c2c31 var(--bg);-webkit-text-size-adjust:100%;caret-color:var(--ink);accent-color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto;letter-spacing:0;overflow-x:clip}
::selection{background:var(--ink);color:var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2c31;border:3px solid var(--bg);border-radius:10px}
::placeholder{color:var(--ink-3)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img,video,svg{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}
p,li,summary,dd{text-wrap:pretty}
code,kbd{font-family:var(--mono);font-size:.9em;font-variant-numeric:tabular-nums}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px;text-decoration:none}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- nav */
/* The bar is a translucent layer the page scrolls under. Its hairline is a scroll edge: it only
   appears once there is content beneath it (the menu script sets .is-scrolled). */
nav.bar{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;background:var(--bar-bg);
  -webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);transition:border-color .2s var(--ease)}
nav.bar.is-scrolled{border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:28px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand img{width:26px;height:26px}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-size:0.875rem;color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
/* where you are: the current page (or, on the home page, the section on screen) is underlined */
.nav-links a[aria-current]:not(.nav-cta){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.55em}
.nav-links .nav-cta{color:var(--bg);background:var(--ink);padding:8px 14px;border-radius:2px;font-weight:500}
.nav-links .nav-cta:hover{color:var(--bg);background:#fff}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:2px;
  font:500 0.9375rem/1 var(--sans);text-decoration:none;border:1px solid var(--rule);color:var(--ink);background:transparent;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .2s var(--spring)}
.btn:hover{border-color:rgba(255,255,255,.32)}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{background:#fff;border-color:#fff}
.btn .arr{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{min-height:38px;padding:0 15px;font-size:0.875rem}
.quiet{color:var(--ink-2);font-size:0.90625rem}
.quiet:hover{color:var(--ink)}
.doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.doors+.quiet{display:inline-block;margin-top:18px}

/* ---------------------------------------------------------------- hero: words + the map */
.hero{position:relative;padding:clamp(40px,7vh,84px) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.claim{font-size:clamp(3.125rem,6.6vw,5.75rem);line-height:.92;letter-spacing:-.045em;font-weight:700}
.claim span{display:block}
.claim .dim{color:var(--ink-3)}
.claim-sm{font-size:clamp(2.75rem,5.2vw,4.75rem)}
.pitch{margin-top:26px;max-width:46ch;font-size:clamp(1rem,1.25vw,1.125rem);color:var(--ink-2);line-height:1.6}
.pitch strong{color:var(--ink);font-weight:600}
.fine{margin-top:14px;font-size:0.875rem;color:var(--ink-3);max-width:52ch}

/* The map: a measured instrument, not an illustration. */
.map{position:relative;aspect-ratio:7/6;width:100%;border:1px solid var(--rule);background:
  linear-gradient(var(--rule-3) 1px,transparent 1px) 0 0/calc(100%/14) calc(100%/12),
  linear-gradient(90deg,var(--rule-3) 1px,transparent 1px) 0 0/calc(100%/14) calc(100%/12)}
.map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .rd{position:absolute;font:500 0.75rem/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase;pointer-events:none;font-variant-numeric:tabular-nums}
.map .rd b{color:var(--ink);font-weight:500}
.rd.tl{top:10px;left:12px}.rd.tr{top:10px;right:12px;text-align:right}
.rd.bl{bottom:10px;left:12px}.rd.br{bottom:10px;right:12px;text-align:right}
.map-focus{position:absolute;left:12px;right:12px;top:30px;font:500 0.75rem/1.3 var(--mono);color:var(--ink);letter-spacing:.02em;
  min-height:1.3em;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.map.is-focus .map-focus{opacity:1}
.beam{fill:none;stroke:rgba(237,237,239,.13);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s var(--ease),opacity .3s var(--ease)}
.trunk{fill:none;stroke:rgba(237,237,239,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.srv{fill:var(--ink);opacity:.55;transition:opacity .3s var(--ease)}
.node rect{fill:var(--bg);stroke:rgba(237,237,239,.55);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s var(--ease)}
.node text{fill:var(--ink);font:600 15px var(--sans);letter-spacing:-.015em}
.node text.sub{fill:var(--ink-3);font:500 11px var(--mono);letter-spacing:.04em}
.node{cursor:pointer;outline:none}
.node:focus-visible rect,.node:hover rect{stroke:var(--ink)}
.hw{cursor:default}
.hw rect{fill:var(--ink);stroke:none}
.hw text{fill:var(--bg);font:600 13px var(--mono);letter-spacing:.04em}
.pulse{fill:#fff}
.map.is-focus .beam{stroke:rgba(237,237,239,.42)}
.map.is-focus .srv{opacity:.9}
.map.is-col .beam,.map.is-col .srv{opacity:.14}
.map.is-col .lit{opacity:1}
.map.is-col .beam.lit{stroke:rgba(237,237,239,.7)}
.map .drawn{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.map .drawn{animation:none;stroke-dashoffset:0}}

/* ---------------------------------------------------------------- readout strip */
.readout{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding:18px 0}
.readout .lede{max-width:56ch;font-size:0.9375rem}
.figs{display:flex;gap:clamp(18px,3vw,40px)}
.fig{display:grid;gap:2px}
.fig b{font:500 clamp(1.375rem,2.2vw,1.75rem)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig span{font:0.75rem/1.3 var(--sans);color:var(--ink-3)}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(72px,10vw,128px) 0 0}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6;max-width:62ch}
.lede a{color:var(--ink)}

/* features as rows on one rule; the right column is the real command that does it */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule);align-items:start;transition:background-color .3s var(--ease)}
.row:hover{background:rgba(255,255,255,.018)}
.row h3{font-size:clamp(1.375rem,2.2vw,1.875rem);letter-spacing:-.02em;line-height:1.1;font-weight:700}
.row h3 small{display:block;margin-top:8px;font:500 0.8125rem/1.3 var(--sans);letter-spacing:.01em;color:var(--ink-3)}
.row p{color:var(--ink-2);max-width:58ch}
.row ul{list-style:none;margin-top:12px;display:grid;gap:6px}
.row li{color:var(--ink-2);font-size:0.90625rem;padding-left:16px;position:relative}
.row li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ink-3)}
.row .more{display:inline-block;margin-top:14px;font-size:0.90625rem;color:var(--ink)}
.cmds-proof{display:grid;gap:0;border-top:1px solid var(--rule-2);align-content:start}
.cmds-proof div{display:grid;gap:2px;padding:9px 0;border-bottom:1px solid var(--rule-2)}
.cmds-proof code{font:500 0.84375rem/1.3 var(--mono);color:var(--ink)}
.cmds-proof span{font-size:0.8125rem;color:var(--ink-3);line-height:1.4}

/* proof: a real panel, drawn in the page's own ink */
.film{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.film figure{border:1px solid var(--rule);background:var(--bg-2)}
.film figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--rule);font:0.75rem/1.4 var(--mono);color:var(--ink-3)}
.film .lede+.lede{margin-top:16px}
.dc{padding:clamp(16px,2.4vw,26px);font-size:0.90625rem;line-height:1.45}
.dc .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dc .who img{width:36px;height:36px;border-radius:50%}
.dc .who b{font-weight:600}
.dc .who .app{font:600 0.6875rem/1 var(--sans);letter-spacing:.04em;padding:3px 5px;border-radius:2px;background:var(--ink);color:var(--bg)}
.dc .who time{font:0.75rem var(--mono);color:var(--ink-3)}
.dc .box{margin-left:46px;border:1px solid var(--rule);padding:14px 16px;display:grid;gap:10px;max-width:520px}
.dc .box .t{font-size:0.96875rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.dc .box p{color:var(--ink-2)}
.dc .box p b{color:var(--ink);font-weight:600}
.dc .ping{color:var(--ink);background:rgba(255,255,255,.08);padding:0 3px;border-radius:2px}
.dc .chips{display:flex;flex-wrap:wrap;gap:6px}
.dc .chips span{font:500 0.78125rem/1 var(--mono);padding:6px 8px;border:1px solid var(--rule);color:var(--ink);font-variant-numeric:tabular-nums}
.dc pre{font:600 0.9375rem/1 var(--mono);padding:10px 12px;background:var(--bg);border:1px solid var(--rule-2);letter-spacing:.06em}
.dc .btns{display:flex;flex-wrap:wrap;gap:8px}
.dc .btns span{font:500 0.8125rem/1 var(--sans);padding:9px 12px;border-radius:2px;border:1px solid var(--rule)}
.dc .btns span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* setup: four steps on one rule (the order matters, so they are numbered) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);position:relative}
.step{padding:26px clamp(16px,2.4vw,32px) 0 0;position:relative}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--ink)}
.step .n{font:500 0.75rem/1 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.step h3{margin-top:12px;font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.1;font-weight:700}
.step p{margin-top:10px;color:var(--ink-2);max-width:40ch;font-size:0.9375rem}
.step code{color:var(--ink)}
.after{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,40px)}

/* the small things: a ruled list in two columns */
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:1px solid var(--rule)}
.list div{padding:18px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:16px;align-items:baseline}
.list h3{font-size:1.1875rem;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.list p{color:var(--ink-2);font-size:0.9375rem}
.list code{color:var(--ink)}

/* questions */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;background:
  linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform var(--t-move) var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--ink-2);max-width:64ch}
/* The answer opens and closes as a height transition, so a second click mid-way reverses it from
   where it is. Browsers without ::details-content just open it at once. */
.faq details::details-content{block-size:0;overflow:clip;opacity:0;
  transition:block-size var(--t-move) var(--spring),opacity .24s var(--ease),content-visibility var(--t-move) allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}
.faq .a a{color:var(--ink)}

/* the close */
.close{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(48px,7vw,88px) 0}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end}
.close h2{font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-.04em;line-height:1}
.close .lede{margin-top:18px}
.close .doors{margin-top:0}

footer{padding:36px 0 48px}
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:0.875rem;color:var(--ink-3)}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .spacer{flex:1}

/* ---------------------------------------------------------------- commands reference (Read) */
.page-head{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(24px,3vw,36px)}
.page-head h1{font-size:clamp(2.75rem,5.6vw,4.75rem);line-height:.96;letter-spacing:-.045em;font-weight:700}
.page-head .lede{margin-top:20px}
.tools{position:sticky;top:58px;z-index:20;background:var(--bar-bg);-webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tools .shell{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding-top:12px;padding-bottom:12px}
.search{flex:1 1 260px;min-height:42px;background:var(--bg-2);border:1px solid var(--rule);border-radius:2px;color:var(--ink);font:0.9375rem var(--sans);padding:0 14px;transition:border-color .2s var(--ease)}
.search:focus{outline:none;border-color:var(--ink)}
.search::-webkit-search-cancel-button{filter:invert(1)}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{min-height:34px;padding:0 12px;border-radius:2px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);font:500 0.84375rem/1 var(--sans);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.filters button:hover{color:var(--ink);border-color:rgba(255,255,255,.32)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.group{padding-top:clamp(40px,5vw,64px)}
.group>h2{font-size:clamp(1.625rem,2.8vw,2.25rem)}
.group>p{margin-top:10px;color:var(--ink-2);max-width:62ch}
.cmds{margin-top:20px;border-top:1px solid var(--rule)}
.cmd{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px clamp(16px,3vw,40px);padding:18px 0;border-bottom:1px solid var(--rule)}
.cmd .top-line{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;grid-row:span 2}
.cmd .n{font:600 1rem/1.3 var(--mono);color:var(--ink)}
.cmd .args{font:0.8125rem/1.4 var(--mono);color:var(--ink-3)}
.cmd .aud{font-size:0.78125rem;color:var(--ink-3);border:1px solid var(--rule);padding:3px 7px;border-radius:2px;white-space:nowrap}
.cmd p{color:var(--ink-2);font-size:0.9375rem}
.subs{display:grid;border-top:1px solid var(--rule-2);margin-top:6px}
.sub-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:0.875rem}
.sub-row:last-child{border-bottom:0}
.sub-row>code{color:var(--ink);font-size:0.8125rem}
.sub-row span{color:var(--ink-2)}
.sub-row .args{display:block;margin-top:2px;font-size:0.78125rem}
.none{padding:40px 0;color:var(--ink-2)}

/* ---------------------------------------------------------------- reveal, visible by default */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------- narrow */
@media (max-width:980px){
  .hero-grid,.sec-head,.film,.close-grid{grid-template-columns:1fr}
  .row{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--rule);margin-left:3px}
  .step{padding:0 0 28px 24px}
  .step::before{top:4px;left:-4px}
  .cmd{grid-template-columns:1fr}
  .cmd .top-line{grid-row:auto}
}
@media (max-width:720px){
  .list{grid-template-columns:1fr}
  .list div{grid-template-columns:1fr;gap:4px}
  .sub-row{grid-template-columns:1fr;gap:2px}
  .dc .box{margin-left:0}
}
@media (max-width:640px){
  .readout{grid-template-columns:1fr}
  .figs{justify-content:space-between}
  .rd.tr,.rd.br{display:none}
  .doors .btn{flex:1 1 100%}
  .tools{top:58px}
}

/* ---------------------------------------------------------------- mobile menu (pcd-menu-v2 script) */
.pcd-burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--rule);border-radius:2px;
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.pcd-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-move) var(--spring),opacity .15s}
html.pcd-menu-open .pcd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.pcd-menu-open .pcd-burger span:nth-child(2){opacity:0}
html.pcd-menu-open .pcd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .pcd-burger{display:flex}
  .pcd-menu{position:fixed;left:0;right:0;top:var(--pcd-bar,59px);z-index:60;display:flex!important;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px var(--gut) 16px;background:var(--bg);border-bottom:1px solid var(--rule);
    /* the panel unrolls down out of the bar and rolls back up into it; both are transitions on the
       same properties, so tapping the button mid-way reverses it from where it is */
    clip-path:inset(0 0 100% 0);transform:translateY(-6px);opacity:0;visibility:hidden;pointer-events:none;
    transition:clip-path var(--t-move) var(--spring),transform var(--t-move) var(--spring),opacity .2s var(--ease),visibility 0s linear var(--t-move)}
  html.pcd-menu-open .pcd-menu{clip-path:inset(0 0 -1px 0);transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .pcd-menu a{display:flex!important;min-height:48px;align-items:center;font-size:1rem;padding:0 4px;border-bottom:1px solid var(--rule-2);color:var(--ink-2)}
  .pcd-menu a:last-child{border-bottom:0}
  .pcd-menu .nav-cta{margin-top:10px;justify-content:center;border-bottom:0;color:var(--bg)}
}
.row .more-note{margin-top:14px;font-size:0.90625rem;color:var(--ink-3)}
.row .more-note a{color:var(--ink)}

/* /cad/: a product screen beside the claim, and the four facts as one ruled line */
.film-fig{border:1px solid var(--rule);background:var(--bg-2)}
.facts{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts div{display:grid;gap:4px;padding:18px clamp(12px,2vw,24px) 18px 0}
.facts div+div{padding-left:clamp(12px,2vw,24px);border-left:1px solid var(--rule)}
.facts b{font-weight:650;letter-spacing:-.015em}
.facts span{font-size:0.875rem;color:var(--ink-2)}
@media (max-width:720px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--rule)}
}
/* a longer claim than "We build.": the words get half the hero, and the type steps down to fit */
.hero-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-even .claim{font-size:clamp(2.875rem,5.4vw,5rem)}
@media (max-width:980px){.hero-even{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- response
   Everything you can press answers on the press itself, not on release. Buttons sink a little;
   rows, tabs and text links dim. touch-action:manipulation drops the double-tap-zoom wait. */
a,button,summary,input,[role="button"],.node{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active,.nav-links .nav-cta:active,.pcd-burger:active{transform:scale(.97);transition:transform var(--t-press) ease-out}
.pcd-burger{transition:transform .2s var(--spring),border-color .2s var(--ease)}
.nav-links .nav-cta{transition:color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--spring)}
.nav-links a:not(.nav-cta):active,.foot a:active,.quiet:active,.lede a:active,.row .more:active,.row .more-note a:active,.faq .a a:active,.brand:active{opacity:.6;transition:opacity var(--t-press) ease-out}
.filters button:active{transform:scale(.96);transition:transform var(--t-press) ease-out}
.filters button{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--spring)}
.faq summary{transition:opacity .2s var(--ease)}
.faq summary:active{opacity:.6;transition-duration:var(--t-press)}
.node{transform-box:fill-box;transform-origin:center;transition:transform .2s var(--spring)}
.node:not(.hw):active{transform:scale(.97);transition-duration:var(--t-press)}
@media (max-width:820px){.pcd-menu a:not(.nav-cta):active{background:rgba(255,255,255,.04);opacity:1}}

/* small text reads better with a touch of positive tracking */
.fig span,.cmds-proof span,.cmd .aud,.sub-row .args,.film figcaption,.dc .who time{letter-spacing:.01em}

/* ---------------------------------------------------------------- reduced motion
   Slides, scales and draws become short cross-fades. Feedback stays; only the travel goes. */
@media (prefers-reduced-motion:reduce){
  .js .rv{transform:none;transition:opacity .2s ease}
  .btn:active,.nav-links .nav-cta:active,.pcd-burger:active,.filters button:active,.node:not(.hw):active{transform:none;opacity:.7}
  .btn .arr,.btn:hover .arr{transform:none}
  .pcd-menu{transform:none!important;clip-path:none!important;transition:opacity .18s ease,visibility 0s linear .18s!important}
  html.pcd-menu-open .pcd-menu{transition-delay:0s!important}
  .pcd-burger span{transition:opacity .15s ease}
  .faq details::details-content{transition:opacity .18s ease,content-visibility .18s allow-discrete}
  .faq summary::after{transition:none}
}

/* ---------------------------------------------------------------- reduced transparency, more contrast */
@media (prefers-reduced-transparency:reduce){
  nav.bar,.tools{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:var(--ink);--rule:rgba(255,255,255,.34);--rule-2:rgba(255,255,255,.22);--rule-3:rgba(255,255,255,.12);--bar-bg:var(--bg)}
  nav.bar,.tools{-webkit-backdrop-filter:none;backdrop-filter:none}
  nav.bar{border-bottom-color:var(--rule)}
  .btn{border-color:rgba(255,255,255,.6)}
  .beam{stroke:rgba(237,237,239,.3)}
}