/* =============================================================================
   fossilsaustralia.com  --  "Strata"
   Plain CSS. No framework, no build step. Edit this file directly.

   The three period colours are the real International Commission on
   Stratigraphy (ICS/CGMW) chart colours, so they read correctly to anyone
   who knows the geology. Do not swap them for arbitrary brand colours.
       Silurian       #B3E1B6
       Carboniferous  #67A599
       Permian        #F04028
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  /* period colours (ICS) -- identical in both themes, they are data */
  --sil:#b3e1b6;
  --car:#67a599;
  --per:#f04028;
  /* readable variants of the above, per theme */
  --sil-ink:#7dbf84;
  --car-ink:#3f7f72;
  --per-ink:#c53a1f;

  /* dark is the site's own identity; light is the courtesy for daylight */
  --ground:#171815;
  --ground-2:#1e201d;
  --ground-3:#262924;
  --ink:#e9e7df;
  --ink-2:#a1a79b;
  --ink-3:#787e73;
  --rule:#2d302b;
  --rule-2:#3a3e37;
  --focus:#b3e1b6;

  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-name:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --font-data:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"DejaVu Sans Mono",monospace;

  --wrap:1180px;
  --pad:clamp(16px,4vw,34px);
  --r:3px;
}

/* light theme: the ICS colours were designed for printed charts on white,
   so they need almost no adjustment -- only the neutrals flip. */
@media (prefers-color-scheme:light){
  :root{
    --ground:#f4f3ee; --ground-2:#eceae2; --ground-3:#e2e0d5;
    --ink:#1c1e1a; --ink-2:#5c6157; --ink-3:#828779;
    --rule:#d8d6ca; --rule-2:#c4c2b4;
    --sil-ink:#3f7a46; --car-ink:#2f6f62; --per-ink:#bd3319;
    --focus:#2f6f62;
  }
}
:root[data-theme="light"]{
  --ground:#f4f3ee; --ground-2:#eceae2; --ground-3:#e2e0d5;
  --ink:#1c1e1a; --ink-2:#5c6157; --ink-3:#828779;
  --rule:#d8d6ca; --rule-2:#c4c2b4;
  --sil-ink:#3f7a46; --car-ink:#2f6f62; --per-ink:#bd3319;
  --focus:#2f6f62;
}
:root[data-theme="dark"]{
  --ground:#171815; --ground-2:#1e201d; --ground-3:#262924;
  --ink:#e9e7df; --ink-2:#a1a79b; --ink-3:#787e73;
  --rule:#2d302b; --rule-2:#3a3e37;
  --sil-ink:#7dbf84; --car-ink:#3f7f72; --per-ink:#c53a1f;
  --focus:#b3e1b6;
}

/* ---------- reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;text-wrap:balance}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.3em}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ground-2);color:var(--ink);
      padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:74ch}

/* ---------- header ------------------------------------------------------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--ground);
           position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
                 gap:14px 26px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex-shrink:0}
.brand b{font-family:var(--font-name);font-weight:400;font-size:20px;letter-spacing:.005em}
.brand span{font-family:var(--font-data);font-size:9.5px;letter-spacing:.18em;
            text-transform:uppercase;color:var(--ink-3)}
.site-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.site-nav a{font-family:var(--font-data);font-size:11px;letter-spacing:.13em;
            text-transform:uppercase;color:var(--ink-2);text-decoration:none;
            padding:7px 10px;border-radius:var(--r)}
.site-nav a:hover{color:var(--ink);background:var(--ground-2)}
.site-nav a[aria-current]{color:var(--ink);background:var(--ground-2)}

/* ---------- deep-time rail ---------------------------------------------- */
/* Oldest at the bottom, exactly as a rock column reads. */
.rail{display:flex;flex-direction:column-reverse;gap:4px;margin:0;padding:0;list-style:none}
.rail a{display:block;text-decoration:none;background:var(--ground-2);
        border-left:4px solid var(--rule-2);padding:11px 13px;border-radius:0 var(--r) var(--r) 0;
        transition:background .13s ease}
.rail a:hover{background:var(--ground-3)}
.rail a[aria-current]{background:var(--ground-3)}
.rail b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.005em}
.rail i{display:block;font-family:var(--font-data);font-style:normal;font-size:10px;
        color:var(--ink-3);letter-spacing:.06em;margin-top:2px;font-variant-numeric:tabular-nums}
.rail .n{float:right;font-family:var(--font-data);font-size:10.5px;color:var(--ink-3);
         font-variant-numeric:tabular-nums}
.rail .p-sil{border-left-color:var(--sil)}
.rail .p-car{border-left-color:var(--car)}
.rail .p-per{border-left-color:var(--per)}
.rail .p-und{border-left-color:var(--rule-2)}

/* on narrow screens the column lies down and scrolls sideways */
@media(max-width:820px){
  .rail{flex-direction:row;overflow-x:auto;gap:7px;padding-bottom:5px;
        scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rail li{flex:0 0 auto;min-width:132px}
  .rail a{border-left:0;border-top:4px solid var(--rule-2);border-radius:0 0 var(--r) var(--r);
          height:100%}
  .rail .p-sil{border-top-color:var(--sil);border-left-color:transparent}
  .rail .p-car{border-top-color:var(--car);border-left-color:transparent}
  .rail .p-per{border-top-color:var(--per);border-left-color:transparent}
  .rail .p-und{border-top-color:var(--rule-2);border-left-color:transparent}
  .rail .n{float:none;display:block;margin-top:2px}
}

/* ---------- two-column layout: rail + content --------------------------- */
.cols{display:grid;grid-template-columns:186px minmax(0,1fr);gap:clamp(20px,3.4vw,42px);
      align-items:start;padding-top:30px;padding-bottom:60px}
.cols > aside{position:sticky;top:74px}
@media(max-width:820px){
  .cols{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:20px}
  .cols > aside{position:static}
}

/* ---------- page headings ------------------------------------------------ */
.eyebrow{font-family:var(--font-data);font-size:10.5px;letter-spacing:.17em;
         text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.page-h{font-size:clamp(27px,4.4vw,40px);letter-spacing:-.014em;margin:0 0 10px}
.page-sub{color:var(--ink-2);max-width:66ch;margin:0 0 26px;font-size:16.5px}

/* period-tinted headings */
.t-sil .eyebrow{color:var(--sil-ink)}
.t-car .eyebrow{color:var(--car-ink)}
.t-per .eyebrow{color:var(--per-ink)}

/* ---------- specimen grid ------------------------------------------------ */
.grid{display:grid;gap:clamp(13px,1.8vw,20px);list-style:none;margin:0;padding:0;
      grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:block;text-decoration:none;color:inherit}
.card .shot{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ground-2);
            aspect-ratio:1;border:1px solid var(--rule)}
.card .shot img{width:100%;height:100%;object-fit:cover;
                transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.card:hover .shot img,.card:focus-visible .shot img{transform:scale(1.035)}
.card h3{font-family:var(--font-name);font-weight:400;font-size:16.5px;line-height:1.28;
         margin:10px 0 0;letter-spacing:.004em}
.card .meta{display:flex;align-items:center;gap:7px;margin-top:5px;
            font-family:var(--font-data);font-size:10px;letter-spacing:.08em;
            text-transform:uppercase;color:var(--ink-3)}
.tick{display:inline-block;width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.tick.p-sil{background:var(--sil)}
.tick.p-car{background:var(--car)}
.tick.p-per{background:var(--per)}
.tick.p-und{background:var(--rule-2)}
.card .no{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* ---------- specimen page ------------------------------------------------ */
.spec{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
      gap:clamp(22px,3.6vw,46px);align-items:start;padding-top:28px}
@media(max-width:880px){.spec{grid-template-columns:minmax(0,1fr);gap:22px}}
.plate{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
       background:var(--ground-2)}
.plate img{width:100%;height:auto}
.plate figcaption{font-family:var(--font-data);font-size:10.5px;letter-spacing:.08em;
                  text-transform:uppercase;color:var(--ink-3);padding:9px 13px;
                  border-top:1px solid var(--rule)}
.spec h1{font-family:var(--font-name);font-weight:400;font-size:clamp(26px,3.8vw,36px);
         letter-spacing:-.005em;line-height:1.14;margin:0 0 14px}

/* the reading rule: a specimen's period, stated as a coloured band */
.band{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r);
      background:var(--ground-2);border-left:4px solid var(--rule-2);margin:0 0 20px}
.band.p-sil{border-left-color:var(--sil)}
.band.p-car{border-left-color:var(--car)}
.band.p-per{border-left-color:var(--per)}
.band.p-und{border-left-color:var(--rule-2)}
.band b{font-size:14.5px}
.band i{font-family:var(--font-data);font-style:normal;font-size:10.5px;color:var(--ink-3);
        letter-spacing:.06em;margin-left:auto;font-variant-numeric:tabular-nums;
        text-align:right}

.facts{margin:0 0 22px;border-top:1px solid var(--rule)}
.facts div{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule);
           font-size:14.5px;align-items:baseline}
.facts dt{font-family:var(--font-data);font-size:10px;letter-spacing:.12em;
          text-transform:uppercase;color:var(--ink-3);flex:0 0 92px}
.facts dd{margin:0;color:var(--ink)}
.facts dd a{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none}
.chips a{display:inline-block;font-family:var(--font-data);font-size:10px;letter-spacing:.09em;
         text-transform:uppercase;padding:5px 10px;border:1px solid var(--rule-2);
         border-radius:99px;color:var(--ink-2);text-decoration:none}
.chips a:hover{border-color:var(--ink-3);color:var(--ink)}

.prose{font-size:16.5px;color:var(--ink)}
.prose a{color:var(--ink);text-decoration-color:var(--ink-3);text-underline-offset:2px}
.prose a:hover{text-decoration-color:currentColor}
.prose h2{font-size:1.32em;margin:1.9em 0 .5em;letter-spacing:-.008em}
.prose h3{font-size:1.12em;margin:1.6em 0 .4em}
.prose figure{margin:1.7em 0}
.prose figure img{border:1px solid var(--rule);border-radius:var(--r);width:100%}
.prose figcaption{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.prose em,.prose i{font-style:italic}
.prose .fig-note{font-size:14.5px;color:var(--ink-2);border-left:2px solid var(--rule-2);
                 padding-left:14px;margin:-.4em 0 1.6em}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}

/* ---------- prev / next -------------------------------------------------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:44px 0 0;
       border-top:1px solid var(--rule);padding-top:22px}
@media(max-width:560px){.pager{grid-template-columns:1fr}}
.pager a{text-decoration:none;padding:13px 15px;background:var(--ground-2);
         border-radius:var(--r);display:block}
.pager a:hover{background:var(--ground-3)}
.pager span{display:block;font-family:var(--font-data);font-size:9.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.pager b{font-family:var(--font-name);font-weight:400;font-size:15.5px}
.pager .nx{text-align:right}

/* ---------- home --------------------------------------------------------- */
.hero{padding:clamp(38px,7vw,84px) 0 clamp(30px,5vw,52px);border-bottom:1px solid var(--rule)}
.hero h1{font-family:var(--font-name);font-weight:400;font-size:clamp(31px,6vw,58px);
         line-height:1.06;letter-spacing:-.018em;margin:0 0 18px;max-width:17ch}
.hero p{font-size:clamp(16.5px,2.1vw,19px);color:var(--ink-2);max-width:60ch;margin:0 0 26px}
.btn{display:inline-block;font-family:var(--font-data);font-size:11px;letter-spacing:.14em;
     text-transform:uppercase;text-decoration:none;padding:12px 20px;border-radius:var(--r);
     background:var(--ink);color:var(--ground);font-weight:600}
.btn:hover{opacity:.87}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.btn.ghost:hover{background:var(--ground-2);opacity:1}
.btns{display:flex;gap:10px;flex-wrap:wrap}

.section{padding:clamp(38px,6vw,66px) 0;border-bottom:1px solid var(--rule)}
.section:last-of-type{border-bottom:0}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
           flex-wrap:wrap;margin-bottom:22px}
.section-h h2{font-size:clamp(21px,2.9vw,27px);letter-spacing:-.012em}
.section-h a{font-family:var(--font-data);font-size:10.5px;letter-spacing:.13em;
             text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.section-h a:hover{color:var(--ink)}

/* period cards on the home page: the column, at full size */
.column{display:grid;gap:10px}
.column a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
          text-decoration:none;background:var(--ground-2);padding:18px 20px;
          border-left:5px solid var(--rule-2);border-radius:0 var(--r) var(--r) 0}
.column a:hover{background:var(--ground-3)}
.column .p-sil{border-left-color:var(--sil)}
.column .p-car{border-left-color:var(--car)}
.column .p-per{border-left-color:var(--per)}
.column b{font-size:19px;display:block}
.column i{font-family:var(--font-data);font-style:normal;font-size:11px;color:var(--ink-3);
          letter-spacing:.06em;display:block;margin-top:3px;font-variant-numeric:tabular-nums}
.column em{font-style:normal;color:var(--ink-2);font-size:14.5px;display:block;margin-top:7px;
           max-width:52ch}
.column .cnt{font-family:var(--font-data);font-size:23px;color:var(--ink-2);
             font-variant-numeric:tabular-nums}

/* ---------- video -------------------------------------------------------- */
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
     border:1px solid var(--rule);background:var(--ground-2)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}

/* ---------- footer ------------------------------------------------------- */
.site-foot{border-top:1px solid var(--rule);padding:34px 0 46px;color:var(--ink-2);
           font-size:14.5px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px 34px;flex-wrap:wrap}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.site-foot .cols2{display:flex;gap:18px;flex-wrap:wrap}
.site-foot small{font-family:var(--font-data);font-size:10.5px;letter-spacing:.06em;
                 color:var(--ink-3)}

/* ---------- theme toggle ------------------------------------------------- */
/* Hidden until JS confirms it works -- no dead control for no-JS visitors. */
.theme-btn{display:none;background:transparent;border:1px solid var(--rule-2);
           color:var(--ink-2);font-family:var(--font-data);font-size:10px;
           letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;
           border-radius:var(--r);cursor:pointer}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.js .theme-btn{display:inline-block}

/* ---------- lightbox ----------------------------------------------------- */
.lb{position:fixed;inset:0;background:rgba(10,11,9,.94);z-index:200;display:none;
    align-items:center;justify-content:center;padding:22px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:88vh;width:auto;border-radius:var(--r)}
.lb-close{position:absolute;top:14px;right:16px;background:transparent;border:0;
          color:#e9e7df;font-size:30px;line-height:1;cursor:pointer;padding:9px 13px}
.lb-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#a1a79b;
        font-family:var(--font-data);font-size:11px;letter-spacing:.08em;padding:0 20px}

/* ---------- reveal (progressive enhancement only) ------------------------ */
/* Two safety catches, because "the whole site is blank" already shipped once
   on the sister site:
     1. .js  -- nothing is hidden unless scripts are confirmed running.
     2. .reveal-armed -- nothing is hidden until main.js has confirmed the
        IntersectionObserver is actually delivering callbacks. If it never
        does, main.js drops this class and every specimen simply appears.
   Hiding content and hoping something later un-hides it is not safe on its
   own. Do not collapse these two conditions into one. */
.js.reveal-armed .reveal{opacity:0;transform:translateY(9px)}
.js .reveal{transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js.reveal-armed .reveal{opacity:1;transform:none}
  .card:hover .shot img{transform:none}
}

/* ---------- misc --------------------------------------------------------- */
.note{background:var(--ground-2);border-left:3px solid var(--rule-2);padding:14px 17px;
      border-radius:0 var(--r) var(--r) 0;color:var(--ink-2);font-size:15px;margin:0 0 1.4em}
.count{font-family:var(--font-data);font-size:11px;letter-spacing:.1em;color:var(--ink-3);
       text-transform:uppercase;font-variant-numeric:tabular-nums}
.center{text-align:center}
.mt{margin-top:34px}
table{border-collapse:collapse;width:100%;font-size:15px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- contents list on the long reference pages -------------------- */
.toc{max-width:74ch;margin:0 0 34px;padding:18px 22px;background:var(--ground-2);
     border-left:4px solid var(--rule-2);border-radius:0 var(--r) var(--r) 0}
.toc .eyebrow{margin:0 0 10px}
.toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:30px}
@media(max-width:620px){.toc ol{columns:1}}
.toc li{margin:0 0 6px;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none;font-size:14.5px;line-height:1.4;
       display:inline-block}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.prose h2{scroll-margin-top:78px}

/* ---------- catalogue record --------------------------------------------
   The facts list is a specimen record, so ranks and numbers line up and the
   scientific names keep their italics.
   ------------------------------------------------------------------------ */
.facts dd i,.card h3 i,.page-h i,.prose i{font-style:italic}
.facts .num{font-family:var(--font-data);font-size:12.5px;color:var(--ink-3);
            letter-spacing:.04em;font-variant-numeric:tabular-nums}
.facts .unrec{color:var(--ink-3);font-style:italic}
.facts dt{flex:0 0 96px}

/* observations and cautions on a specimen */
.obs{background:var(--ground-2);border-left:3px solid var(--rule-2);
     padding:15px 18px;border-radius:0 var(--r) var(--r) 0;margin:1.6em 0}
.obs p{margin:0}
.obs p + p{margin-top:.55em}
.obs-h{font-family:var(--font-data);font-size:10px;letter-spacing:.14em;
       text-transform:uppercase;color:var(--ink-3)}
.obs.caution{border-left-color:var(--per)}
.obs.caution .obs-h{color:var(--per-ink)}
.also{font-size:14px;color:var(--ink-2);margin:18px 0 0;line-height:1.7}
.also a{font-family:var(--font-data);font-size:12px;color:var(--ink-2);
        text-decoration:none;border-bottom:1px solid var(--rule-2);
        font-variant-numeric:tabular-nums}
.also a:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- group index -------------------------------------------------- */
.glist{list-style:none;margin:0;padding:0;display:grid;gap:10px;
       grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.glist a{display:grid;grid-template-columns:1fr auto;align-items:start;
         column-gap:16px;text-decoration:none;background:var(--ground-2);
         padding:17px 19px;border-radius:var(--r);height:100%;
         border-left:3px solid var(--rule-2)}
.glist a:hover{background:var(--ground-3);border-left-color:var(--ink-3)}
.g-n{font-family:var(--font-name);font-size:19px;line-height:1.2}
.g-p{grid-column:1;font-family:var(--font-data);font-size:9.5px;letter-spacing:.14em;
     text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.g-b{grid-column:1;font-size:14px;color:var(--ink-2);margin-top:9px;line-height:1.5}
.g-c{grid-row:1;grid-column:2;font-family:var(--font-data);font-size:20px;
     color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- corrections list --------------------------------------------- */
.corr{list-style:none;margin:30px 0 0;padding:0;max-width:74ch;
      counter-reset:corr;display:grid;gap:2px}
.corr li{background:var(--ground-2);padding:17px 20px;border-left:3px solid var(--rule-2)}
.corr li:first-child{border-radius:var(--r) var(--r) 0 0}
.corr li:last-child{border-radius:0 0 var(--r) var(--r)}
.c-k{font-family:var(--font-data);font-size:9.5px;letter-spacing:.14em;
     text-transform:uppercase;color:var(--ink-3)}
.corr h3{font-size:16.5px;font-weight:600;margin:5px 0 6px;letter-spacing:-.005em}
.corr h3 i{font-style:italic}
.corr p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.6}

/* ---------- definition list on the about page ---------------------------- */
.defs{margin:1.2em 0 1.6em;border-top:1px solid var(--rule)}
.defs div{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:11px 0;
          border-bottom:1px solid var(--rule)}
@media(max-width:600px){.defs div{grid-template-columns:1fr;gap:3px}}
.defs dt{font-family:var(--font-name);font-size:15.5px}
.defs dt i{font-style:italic}
.defs dd{margin:0;font-size:15px;color:var(--ink-2)}

/* ---------- superseded categories and keywords --------------------------- */
.legacy{margin-top:52px;padding-top:26px;border-top:1px solid var(--rule);
        max-width:74ch}
.legacy h2{font-size:19px;margin:0 0 8px;letter-spacing:-.008em}
.legacy > p{color:var(--ink-2);font-size:14.5px;margin:0 0 16px;line-height:1.6}
.lg-h{font-family:var(--font-data);font-size:9.5px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px !important}
.lg{display:flex;flex-wrap:wrap;gap:5px;margin:0 !important}
.lg a{font-size:12.5px;color:var(--ink-3);text-decoration:none;
      border:1px solid var(--rule);padding:3px 9px;border-radius:99px}
.lg a:hover{color:var(--ink);border-color:var(--ink-3)}