/* ============================================================================
   Kid Games. Component layer for the activity library: the library index, the
   activity template, the editorial guides and the taxonomy hubs.

   Reads house tokens and defines NO tokens of its own. Every value below is
   either a token reference or a value that is genuinely local to one component
   (an aspect-ratio, a gradient stop, a column count).

   Loaded after tokens.css, theme.css and base.css. See research/page-format.md.
   ========================================================================= */

@layer components {

  /* ---------------------------------------------------------------- chrome */
  .skip-link{position:absolute;left:var(--sp-4);top:var(--sp-4);z-index:20;
background:var(--surface-2);color:var(--ink);border:1px solid var(--ink);
border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);
font-size:var(--t-sm);line-height:var(--lh-sm);text-decoration:none;
transform:translateY(-200%)}
  .skip-link:focus{transform:none}

  .nav{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--surface) 84%,transparent);
backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
max-width:var(--max-content);margin-inline:auto;padding:var(--sp-4) var(--margin)}
  .wordmark{font-family:var(--font-display);font-size:var(--t-h4);line-height:var(--lh-h4);
font-weight:var(--w-medium);letter-spacing:-0.02em;color:var(--ink);text-decoration:none}
  .wordmark span{color:var(--ink-3);font-weight:var(--w-regular)}
  .nav-links{display:none;gap:var(--sp-6);font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm);color:var(--ink-2)}
  @media(min-width:768px){.nav-links{display:flex}}
  .nav-links a{text-decoration:none;padding-block:var(--sp-1);border-bottom:1px solid transparent;
transition:border-color var(--dur-1) var(--ease-standard)}
  .nav-links a:hover{border-bottom-color:var(--ink)}

  .btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--ink);
background:transparent;color:var(--ink);font:inherit;font-size:var(--t-sm);
line-height:var(--lh-sm);font-weight:var(--w-medium);letter-spacing:var(--tr-sm);
padding:calc(var(--sp-3) + 1px) var(--sp-5) var(--sp-3);border-radius:var(--r-pill);
cursor:pointer;text-decoration:none;
transition:background var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard)}
  .btn:hover{background:var(--surface-2)}
  .btn-primary{background:var(--fill);color:var(--on-fill)}
  .btn-primary:hover{background:var(--fill-h);color:var(--on-fill)}
  .btn-quiet{border-color:var(--rule);color:var(--ink-2)}
  .btn-quiet:hover{border-color:var(--ink-3)}

  /* Every small uppercase label is --ink-3, never --ink-4. Per the 2026-09-08
     theme revision, --ink-4 is 2.93:1 and is a non-text token: small caps need
     MORE contrast than body, not less. */
  .micro,.glance dt,.spec dt{font-family:var(--font-mono);font-size:var(--t-micro);
line-height:var(--lh-micro);letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3)}
  .glance dt,.spec dt{color:var(--ink-3)}
  .ital{font-family:var(--font-accent);font-style:italic;font-weight:var(--w-regular)}

  /* ------------------------------------------------------------- structure */
  .wrap{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--margin)}
  .col{max-width:var(--max-text)}
  .sec-h{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
  .sub-h{font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4)}
  .lede{color:var(--ink-2);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
letter-spacing:var(--tr-body-lg);max-width:52ch}
  .tx{color:var(--ink-2)}.t3{color:var(--ink-3)}
  .small{font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm)}
  .row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
  .m1{margin-top:var(--sp-1)}.m2{margin-top:var(--sp-2)}.m3{margin-top:var(--sp-3)}
  .m4{margin-top:var(--sp-4)}.m5{margin-top:var(--sp-5)}.m6{margin-top:var(--sp-6)}
  .m7{margin-top:var(--sp-7)}.m8{margin-top:var(--sp-8)}
  .band{background:var(--tint-petrol)}
  .band-2{background:var(--tint-moss)}
  .band-3{background:var(--surface-alt)}

  /* breadcrumb. Four items, the canonical parent chain, per interlinking.json */
  .breadcrumb{padding-block:var(--sp-5) 0}
  .breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0;
font-size:var(--t-caption);line-height:var(--lh-caption);letter-spacing:var(--tr-caption);
color:var(--ink-3)}
  .breadcrumb li+li::before{content:"/";margin-right:var(--sp-2);color:var(--ink-3)}
  .breadcrumb a{text-decoration:none;border-bottom:1px solid var(--rule)}
  .breadcrumb a:hover{border-bottom-color:var(--ink-3)}

  /* ------------------------------------------------- zone A, above the fold */
  .act{padding-block:var(--sp-6) var(--sp-8)}
  .act h1{font-family:var(--font-display);font-size:2.25rem;line-height:2.5rem;
letter-spacing:-0.026em;font-weight:var(--w-medium);max-width:18ch}
  @media(min-width:768px){.act h1{font-size:2.75rem;line-height:3rem;letter-spacing:-0.028em}}
  .one-line{margin-top:var(--sp-4);color:var(--ink-2);font-size:var(--t-body-lg);
line-height:var(--lh-body-lg);letter-spacing:var(--tr-body-lg);max-width:46ch}

  /* the six-fact strip. A dl, so it reflows to one column and prints as a box. */
  .glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
margin:var(--sp-6) 0 0;padding:1px;background:var(--rule);border-radius:var(--r-2);
overflow:hidden;max-width:var(--max-content)}
  @media(min-width:768px){.glance{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(min-width:1024px){.glance{grid-template-columns:repeat(6,minmax(0,1fr))}}
  .glance>div{padding:var(--sp-4);background:var(--surface-2)}
  .glance dd{margin:var(--sp-2) 0 0;font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm);color:var(--ink)}

  /* Media boxes. No photography exists, so every box is a CSS stand-in with an
     explicit aspect-ratio, sized exactly as the real photograph will be. */
  .shot{position:relative;overflow:hidden;border-radius:var(--r-3);background:var(--surface-2);
border:1px solid var(--rule);--c1:var(--vivid-vermilion);--c2:var(--vivid-petrol);
--c3:var(--vivid-ochre);--u:58px}
  .shot::after{content:"";position:absolute;inset:0;
background:
linear-gradient(var(--c1),var(--c1)) 36% 62% /var(--u) var(--u) no-repeat,
linear-gradient(var(--c2),var(--c2)) 64% 62% /var(--u) var(--u) no-repeat,
radial-gradient(circle at 50% 100%,var(--c3) 0 calc(var(--u) / 2),transparent 51%)
50% 34% /var(--u) calc(var(--u) / 2) no-repeat,
radial-gradient(58% 7% at 50% 76%,rgb(27 36 82 / .17),transparent 70%),
linear-gradient(#FDFCF9,#F4F2EC)}
  /* Hero: 3:2, capped at 42vh so it can never evict the glance strip. */
  .hero-box{aspect-ratio:3/2;max-height:42vh;--u:96px}
  .step-box{aspect-ratio:4/3;--u:44px}
  .card-box{aspect-ratio:4/3;--u:40px}
  .v-water{--c1:var(--vivid-petrol);--c2:var(--vivid-moss);--c3:var(--vivid-petrol)}
  .v-room{--c1:var(--vivid-ochre);--c2:var(--vivid-vermilion);--c3:var(--vivid-moss)}
  .v-tape{--c1:var(--vivid-ochre);--c2:var(--vivid-petrol);--c3:var(--vivid-vermilion)}
  .v-map{--c1:var(--vivid-moss);--c2:var(--vivid-ochre);--c3:var(--vivid-petrol)}
  .v-soap{--c1:var(--vivid-vermilion);--c2:var(--vivid-ochre);--c3:var(--vivid-moss)}
  figure{margin:0}
  figcaption{margin-top:var(--sp-3)}

  /* facet chips. Anchor text is the hub label, unmodified. */
  .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
  .hub{border:1px solid var(--rule);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);
font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm);color:var(--ink-2);
text-decoration:none;background:var(--surface-2);
transition:border-color var(--dur-1) var(--ease-standard)}
  .hub:hover{border-color:var(--ink-3)}
  .chip{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);
border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--t-caption);
line-height:var(--lh-caption);color:var(--ink-2);background:var(--surface-2)}

  /* ---------------------------------------------------- zone B, the utility */
  .body-h2{margin-top:var(--sp-8);font-size:var(--t-h3);line-height:var(--lh-h3);
letter-spacing:var(--tr-h3);scroll-margin-top:5rem}
  .body-h3{margin-top:var(--sp-5);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
letter-spacing:var(--tr-body-lg);font-weight:var(--w-medium);scroll-margin-top:5rem}

  .materials{list-style:none;margin:var(--sp-5) 0 0;padding:0;max-width:var(--max-text)}
  .materials li{border-top:1px solid var(--rule);padding:var(--sp-4) 0}
  .materials li:last-child{border-bottom:1px solid var(--rule)}
  .materials .item{font-weight:var(--w-medium)}
  .materials .qty{font-family:var(--font-mono);font-size:var(--t-micro);
letter-spacing:0.07em;color:var(--ink-3);margin-left:var(--sp-3)}
  .materials .sub,.materials .why{display:block;margin-top:var(--sp-2);color:var(--ink-3);
font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm)}

  .setup{margin:var(--sp-5) 0 0;padding:0;list-style:none;counter-reset:s;max-width:var(--max-text)}
  .setup>li{counter-increment:s;border-top:1px solid var(--rule);padding:var(--sp-4) 0;
display:grid;grid-template-columns:2rem 1fr;gap:var(--sp-4);scroll-margin-top:5rem}
  .setup>li:last-child{border-bottom:1px solid var(--rule)}
  .setup>li::before{content:counter(s);font-family:var(--font-mono);font-size:var(--t-sm);
line-height:var(--lh-body);color:var(--ink-3)}
  .setup .secs{display:block;margin-top:var(--sp-1);font-family:var(--font-mono);
font-size:var(--t-micro);letter-spacing:0.07em;color:var(--ink-3)}

  .say{display:grid;gap:var(--sp-5);margin-top:var(--sp-5)}
  @media(min-width:768px){.say{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .say>div{border-top:1px solid var(--rule);padding-top:var(--sp-4)}
  .say .lbl{font-family:var(--font-mono);font-size:var(--t-micro);line-height:var(--lh-micro);
letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-regular)}
  .say ul{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);color:var(--ink-2)}
  .say li{margin-top:var(--sp-2)}
  .say q{font-style:normal;color:var(--ink)}

  .working{margin:var(--sp-5) 0 0;padding-left:var(--sp-5);color:var(--ink-2);
max-width:var(--max-text)}
  .working li{margin-top:var(--sp-2)}
  /* .marklist puts the tower in the inline start padding of the item, so the
     list does not need an indent of its own on top of it. */
  .working.marklist{padding-left:0}

  .print-button{margin-top:var(--sp-6)}

  /* ------------------------------------------------------- zone C, trust */
  .expect{margin-top:var(--sp-4)}
  .expect .ageblock{border-top:1px solid var(--rule);padding-top:var(--sp-4);margin-top:var(--sp-5)}
  .expect .body{max-width:var(--max-text)}
  .expect .lasts{margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--t-micro);
letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3)}

  .problems>div{border-top:1px solid var(--rule);padding-top:var(--sp-4);margin-top:var(--sp-5)}
  .problems .cause{margin-top:var(--sp-3);color:var(--ink-3)}
  .problems .fix{margin-top:var(--sp-3);color:var(--ink-2)}

  .ladder{counter-reset:r}
  .ladder .rung{border-top:1px solid var(--rule);padding-top:var(--sp-4);margin-top:var(--sp-5);
scroll-margin-top:5rem}
  .ladder .rung .body{max-width:var(--max-text)}
  .ladder dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);
margin:var(--sp-3) 0 0;max-width:var(--max-text)}
  .ladder dt{font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.45rem;
letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
  .ladder dd{margin:0;color:var(--ink-2)}
  .ladder .ready{color:var(--ink)}
  .rung-age{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:0.07em;
text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--sp-2)}

  .safety{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-6);
margin-top:var(--sp-5);max-width:var(--max-text);background:var(--surface-2)}
  .safety ul{margin:var(--sp-4) 0 0;padding-left:var(--sp-5);color:var(--ink-2)}
  .safety li{margin-top:var(--sp-2)}
  .safety .flags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

  .why{max-width:var(--max-text)}
  .why p+p{margin-top:var(--sp-4)}
  .grade{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);
border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-family:var(--font-mono);
font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:0.07em;
text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
  .not{border-left:2px solid var(--rule);padding-left:var(--sp-5);margin-top:var(--sp-5);
color:var(--ink-2);max-width:var(--max-text)}

  /* -------------------------------------------- zone D, conversion and nav */
  .follow{border:1px solid var(--rule);border-radius:var(--r-3);padding:var(--sp-6);
margin-top:var(--sp-8);background:var(--surface-2);max-width:var(--max-text)}
  .product{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-6);
margin-top:var(--sp-5);background:var(--surface-alt);max-width:var(--max-text)}
  .spec{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-4);
margin:var(--sp-4) 0 0}
  .spec dd{margin:0;color:var(--ink-2);font-size:var(--t-caption);line-height:var(--lh-caption);
letter-spacing:var(--tr-caption)}
  .code{font-family:var(--font-mono);font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:0.08em;border:1px dashed var(--rule);border-radius:var(--r-1);
padding:var(--sp-2) var(--sp-3);cursor:pointer;background:transparent;color:var(--ink)}
  .toast{position:fixed;left:50%;bottom:var(--sp-7);translate:-50% 0;background:var(--surface-inv);
color:#F9F8F3;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
font-size:var(--t-sm);line-height:var(--lh-sm);opacity:0;pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out)}
  .toast[data-on]{opacity:1}

  .faq>div{border-top:1px solid var(--rule);padding-top:var(--sp-4);margin-top:var(--sp-5);
max-width:var(--max-text)}

  .related{display:grid;gap:var(--sp-7) var(--gutter);margin-top:var(--sp-5);
grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
  .related h3{font-family:var(--font-mono);font-size:var(--t-micro);line-height:var(--lh-micro);
letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-regular)}
  .related ul{list-style:none;margin:var(--sp-3) 0 0;padding:0}
  .related li{margin-top:var(--sp-2)}
  .related a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
  .related a:hover{border-bottom-color:var(--ink-3);color:var(--ink)}

  /* ---------------------------------------------------------- card listings */
  .cards{display:grid;gap:var(--sp-7) var(--gutter);margin-top:var(--sp-6);
grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
  .card{display:flex;flex-direction:column;gap:var(--sp-4);text-decoration:none;color:inherit}
  .card h3{font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4)}
  .card p{color:var(--ink-2);font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm)}
  .card .facts{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--t-micro);
line-height:var(--lh-micro);letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3)}
  a:hover>.shot::after{transform:scale(1.02);transition:transform var(--dur-3) var(--ease-out)}

  .axis{border-top:1px solid var(--rule);padding-top:var(--sp-5);margin-top:var(--sp-6)}
  .axis h3{font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4)}
  .axis .count{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:0.07em;
text-transform:uppercase;color:var(--ink-3);margin-left:var(--sp-3)}
  .axes{display:grid;gap:var(--sp-6) var(--gutter);
grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

  .rows{list-style:none;margin:var(--sp-5) 0 0;padding:0;max-width:var(--max-content)}
  .rows li{border-top:1px solid var(--rule)}
  .rows li:last-child{border-bottom:1px solid var(--rule)}
  .rows a{display:grid;gap:var(--sp-1) var(--sp-5);padding:var(--sp-4) 0;text-decoration:none;
color:inherit;align-items:baseline}
  @media(min-width:768px){.rows a{grid-template-columns:minmax(0,20rem) 1fr auto}}
  .rows a:hover .rt{border-bottom-color:var(--ink)}
  .rt{font-weight:var(--w-medium);border-bottom:1px solid transparent}
  .rd{color:var(--ink-3);font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm)}
  /* nowrap only once the row is a real three-column grid. Below that breakpoint the
     row is one column, and this line ("No setup / 10 to 20 min / paper only") set the
     column's max-content width to 324px, which scrolled a 320px viewport sideways. */
  .rf{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:0.07em;
text-transform:uppercase;color:var(--ink-3)}
  @media(min-width:768px){.rf{white-space:nowrap}}

  /* ------------------------------------------------------ editorial guides */
  .guide h1{font-family:var(--font-display);font-size:2.25rem;line-height:2.5rem;
letter-spacing:-0.026em;font-weight:var(--w-medium);max-width:20ch}
  @media(min-width:768px){.guide h1{font-size:2.75rem;line-height:3rem;letter-spacing:-0.028em}}
  .guide .answer{margin-top:var(--sp-5);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
letter-spacing:var(--tr-body-lg);color:var(--ink);max-width:50ch}
  .guide p{margin-top:var(--sp-4);color:var(--ink-2)}
  .guide ul,.guide ol{margin-top:var(--sp-4);padding-left:var(--sp-5);color:var(--ink-2);
max-width:var(--max-text)}
  .guide li{margin-top:var(--sp-2)}
  .toc{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-5);
margin-top:var(--sp-6);max-width:var(--max-text);background:var(--surface-2)}
  .toc ol{list-style:none;margin:var(--sp-3) 0 0;padding:0;
columns:2;column-gap:var(--sp-6)}
  .toc li{margin-top:var(--sp-2);break-inside:avoid;font-size:var(--t-sm);
line-height:var(--lh-sm);letter-spacing:var(--tr-sm)}
  .toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
  .finding{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-6);
margin-top:var(--sp-6);max-width:var(--max-text);background:var(--tint-ochre)}
  .finding p:first-child{margin-top:0}
  cite{display:block;margin-top:var(--sp-4);font-style:normal;font-size:var(--t-sm);
line-height:var(--lh-sm);letter-spacing:var(--tr-sm);color:var(--ink-3);
border-left:2px solid var(--rule);padding-left:var(--sp-4);max-width:var(--max-text)}
  cite a{color:var(--ink-2)}
  blockquote{margin:var(--sp-5) 0 0;padding-left:var(--sp-5);
border-left:2px solid var(--ink-3);max-width:var(--max-text);color:var(--ink);
font-family:var(--font-accent);font-style:italic;font-size:var(--t-body-lg);
line-height:var(--lh-body-lg)}
  .evidence-note{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-6);
margin-top:var(--sp-6);max-width:var(--max-text)}
  .evidence-note dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3) var(--sp-5);
margin:var(--sp-4) 0 0}
  .evidence-note dt{font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.45rem;
letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3)}
  .evidence-note dd{margin:0;color:var(--ink-2);font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm)}

  /* --------------------------------------------------------------- footers */
  .note{border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-6);
max-width:var(--max-text)}
  .foot{border-top:1px solid var(--rule);margin-top:var(--sp-8)}
  .foot-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
display:flex;flex-wrap:wrap;gap:var(--sp-7) var(--gutter);justify-content:space-between;
font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm);color:var(--ink-3)}
  /* A footer is a way out of the page, not a signature. Three columns of real
     routes, same chip-and-rule language as the rest of the library. */
  .foot-brand{flex:1 1 17rem;max-width:30rem}
  .foot-nav{flex:4 1 30rem;display:grid;gap:var(--sp-6) var(--gutter);
grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
  .foot-nav ul{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
  .foot-nav li{margin:0}
  .foot-nav a{color:var(--ink-2);text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard)}
  .foot-nav a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
  .foot-place{flex:1 1 100%;border-top:1px solid var(--rule);padding-top:var(--sp-5);
display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}
  .print-footer{display:none}
}

/* A library route that has not shipped yet. Shown so the shape of the
   collection reads, not linked so nothing 404s. No apology copy: the
   muted state carries it. */
.hub-soon{opacity:.45;cursor:default}