/* Dark is the default. Light is opt-in and remembered. */
:root {
  --bg: #0A0C09;
  --surface: #121510;
  --raised: #1A1E17;
  --line: #2A2F26;
  --ink: #E9EFE4;
  --muted: #9BA894;
  --olive: #A3BE5C;
  --mint: #7DDCA8;
  --pastel: #BFE3C8;
  --pastel2: #DCE8B0;
  --tintm: #101A15;
  --tinto: #161A0E;
  --orange: #F2A057;
  --cta: #F2A057;
  --ctaink: #141007;
  --danger: #F08A7A;
  --warn: #E5C05A;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F6F8F3;
  --raised: #FFFFFF;
  --line: #DEE4D6;
  --ink: #14180F;
  --muted: #5A6553;
  --olive: #4F6321;
  --mint: #1F7A52;
  --pastel: #2F6B44;
  --pastel2: #5A6B22;
  --tintm: #E8F4EC;
  --tinto: #F1F4E2;
  --orange: #A34F0E;
  --cta: #1F7A52;
  --ctaink: #FFFFFF;
  --danger: #A32C1C;
  --warn: #7A5A0A;
  color-scheme: light;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}

/* Focus is visible everywhere. Keyboard users must never wonder where they are. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mint);outline-offset:2px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--olive);color:var(--bg);
  padding:.7rem 1.1rem;z-index:200;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ----------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:100;background:var(--bg);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.top .bar{max-width:1400px;margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  font-weight:800;letter-spacing:-.01em;flex:0 0 auto}
.brand svg{width:26px;height:26px;flex:0 0 26px}
.brand small{display:block;font-weight:400;font-size:.68rem;color:var(--muted);
  letter-spacing:.02em;margin-top:1px}
.brand b{font-size:1.02rem}
.top nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;font-size:.88rem;padding:.45rem .7rem;
  border-radius:7px;opacity:.85}
.top nav a:hover{background:var(--raised);opacity:1}
.top nav a[aria-current]{color:var(--olive);opacity:1;font-weight:650}
.cta{background:var(--cta);color:var(--ctaink)!important;font-weight:750;
  opacity:1!important;padding:.5rem .95rem!important}
.cta:hover{filter:brightness(1.08)}
.iconbtn{background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:20px;padding:.35rem .75rem;font:inherit;font-size:.78rem;cursor:pointer;
  font-weight:600}
.iconbtn:hover{border-color:var(--olive);color:var(--olive)}
.menubtn{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.srch{position:relative}
.srch input{width:9.5rem;padding:.35rem .7rem;border-radius:16px;font:inherit;
  font-size:.8rem;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.srch input:focus{width:14rem;border-color:var(--olive)}
.qres{position:absolute;right:0;top:2.3rem;width:26rem;max-width:80vw;z-index:150;
  background:var(--tintm);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);overflow:hidden}
.qres a{display:block;padding:.6rem .85rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.qres a:last-child{border-bottom:0}
.qres a:hover,.qres a.on{background:var(--raised)}
.qres a b{display:block;font-size:.9rem;color:var(--olive)}
.qres a span{display:block;font-size:.79rem;color:var(--muted);margin-top:.15rem;
  line-height:1.45}
.qnone{margin:0;padding:.75rem .85rem;font-size:.83rem;color:var(--muted)}

/* ---------------------------------------------------------------- layout */
.shell{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:16.5rem minmax(0,1fr) 14rem;gap:2.5rem;padding:0 1.25rem}
.shell.plain{grid-template-columns:minmax(0,1fr)}
main{min-width:0;padding:2.25rem 0 4.5rem}

/* --------------------------------------------------------------- sidebar */
.side{position:sticky;top:3.6rem;align-self:start;max-height:calc(100vh - 4rem);
  overflow-y:auto;padding:2rem .5rem 3rem 0;font-size:.9rem}
.side h2{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:1.5rem 0 .5rem;font-weight:750}
.side h2:first-child{margin-top:0}
.side ul{list-style:none;margin:0;padding:0}
.side li{margin:1px 0}
.side a{display:block;color:var(--ink);text-decoration:none;padding:.36rem .7rem;
  border-radius:7px;opacity:.82;border-left:2px solid transparent}
.side a:hover{background:var(--raised);opacity:1}
.side a[aria-current="page"]{background:var(--raised);color:var(--olive);
  border-left-color:var(--mint);opacity:1;font-weight:650}

/* ------------------------------------------------------------- on this page */
.toc{position:sticky;top:3.6rem;align-self:start;padding:2.4rem 0 3rem;font-size:.83rem}
.toc h2{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  margin:0 0 .6rem;font-weight:750}
.toc ul{list-style:none;margin:0;padding:0}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:.22rem 0 .22rem .7rem;
  border-left:2px solid var(--line);line-height:1.45}
.toc a:hover{color:var(--olive);border-left-color:var(--olive)}

/* ---------------------------------------------------------------- content */
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:1.1rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--olive);text-decoration:underline}
h1{font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1.15;margin:0 0 .7rem;
  letter-spacing:-.022em;font-weight:800}
.lede{font-size:1.1rem;color:var(--muted);margin:0 0 2rem;max-width:62ch;line-height:1.6}
h2{font-size:1.42rem;margin:2.6rem 0 .8rem;letter-spacing:-.014em;font-weight:750;
  scroll-margin-top:5rem;position:relative;padding-left:.85rem}
/* A short mint rule to the left of every section title. Colour in the heading without
   tinting the words themselves, which keeps the h1 the strongest thing on the page. */
main h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:3px;
  border-radius:2px;background:linear-gradient(var(--mint),var(--olive))}
/* Nav and card headings are not section titles and take no marker. */
.side h2,.toc h2,footer h2,.card h2{padding-left:0}
.side h2::before,.toc h2::before,footer h2::before,.card h2::before{display:none}
h3{font-size:1.08rem;margin:1.9rem 0 .55rem;color:var(--mint);font-weight:700;
  scroll-margin-top:5rem}
h4{font-size:.95rem;margin:1.4rem 0 .4rem;font-weight:700;
  color:var(--olive);scroll-margin-top:5rem}
p{margin:0 0 1.05rem;max-width:70ch}
main ul,main ol{max-width:70ch;padding-left:1.35rem}
li{margin-bottom:.42rem}
a{color:var(--olive);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--mint)}
strong,b{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.anchor{color:var(--muted);text-decoration:none;opacity:0;margin-left:.4rem;font-weight:400}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}

/* ------------------------------------------------------------------ cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:1.15rem 1.3rem;margin:0 0 1rem;transition:border-color .15s ease}
.card:hover{border-color:color-mix(in srgb,var(--mint) 42%,var(--line))}
.card h3{margin-top:0}
/* The 0-5 ladder alternates pastel panels: low levels on the olive pastel, the
   levels that require evidence on the mint pastel. Colour carries the same
   distinction the text makes, for readers who scan before they read. */

.hero-time{margin:.2rem 0 1.4rem;font-size:1.02rem;max-width:60ch}
.hero-time strong{color:var(--olive)}
.depth{border-top:2px solid color-mix(in srgb,var(--olive) 50%,transparent);
  background:var(--tinto)}
.grid > .depth:nth-child(2){background:var(--tintm);
  border-top-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.depth .dmeta{font-size:.82rem;color:var(--muted);margin:.1rem 0 .8rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.depth p{font-size:.92rem;margin:0 0 .6rem}
.depth p:last-child{margin-bottom:0}
.depth .muted{color:var(--muted);font-size:.86rem;font-style:italic}
/* Section-index cards are the top-level sections of their page, so they are h2 in the
   document outline — h3 there skipped a level and broke screen-reader navigation. They
   keep the h3 appearance deliberately: the heading level is a semantic statement about
   structure, not an instruction about type size. */
.card h2{margin:0 0 .35rem;font-size:1.08rem;color:var(--olive);font-weight:700;
  letter-spacing:0}
/* Alternating the accent stops a grid of cards reading as one flat olive block. */
.grid > .card:nth-child(even) h2{color:var(--mint)}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.filters{background:var(--tintm);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.15rem;margin:0 0 1.6rem;position:sticky;top:3.6rem;z-index:20}
.filters .fl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:750;margin-bottom:.45rem}
.filters input[type=search]{width:100%;padding:.55rem .8rem;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;
  font-size:.92rem}
.filters .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.fchip{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:16px;padding:.25rem .7rem;font:inherit;font-size:.78rem;cursor:pointer;
  font-weight:600}
.fchip:hover{border-color:var(--olive);color:var(--olive)}
.fchip.on{background:var(--olive);border-color:var(--olive);color:var(--bg)}
.fcount{margin:.7rem 0 0;font-size:.8rem;color:var(--muted)}
.permalink{color:var(--muted);text-decoration:none;opacity:0;margin-left:.4rem;
  font-weight:400}
.subcap:hover .permalink,.permalink:focus{opacity:1}
[hidden]{display:none!important}
/* Share links. Plain anchors — no third-party widget, so nothing loads until a
   reader deliberately clicks. Styled as quiet text, not as call-to-action buttons:
   the page's job is the assessment, not its own distribution. */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:3rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line);font-size:.83rem}
.share span{color:var(--muted);font-weight:650;text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;margin-right:.2rem}
.share a{color:var(--muted);text-decoration:none;border:1px solid var(--line);
  border-radius:16px;padding:.25rem .75rem}
.share a:hover{color:var(--mint);border-color:var(--mint)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:var(--tintm);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.1rem;border-top:2px solid color-mix(in srgb,var(--mint) 55%,transparent)}
.kpi .v{font-size:1.85rem;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--mint)}
.kpi .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin-top:.45rem;font-weight:650}
.kpi .n{font-size:.82rem;color:var(--muted);margin-top:.4rem}

/* ------------------------------------------------------------------ table */
.tw{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--surface)}
th{text-align:left;padding:.7rem .85rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:750;white-space:nowrap;
  background:var(--tinto);
  border-bottom:2px solid color-mix(in srgb,var(--olive) 45%,var(--line))}
td{padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tinto)}
td code,th code{white-space:nowrap}

/* ------------------------------------------------------------------ code */
code{background:var(--tintm);color:var(--pastel);padding:.1rem .38rem;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em}
pre{background:var(--tintm);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.15rem;overflow-x:auto;font-size:.85rem;line-height:1.6;margin:0 0 1.3rem}
pre code{background:none;padding:0;color:var(--ink)}

/* ------------------------------------------------------------------ notes */
.note{border-left:3px solid var(--mint);background:var(--tintm);padding:.9rem 1.1rem;
  border-radius:0 10px 10px 0;margin:0 0 1.3rem}
.note.warn{border-left-color:var(--warn)}
.note.key{border-left-color:var(--orange);background:var(--tinto)}
.note p:last-child{margin-bottom:0}
.note strong:first-child{color:var(--olive)}
.note.warn strong:first-child{color:var(--warn)}
.note.key strong:first-child{color:var(--orange)}

/* ------------------------------------------------------------------ pills */
.pill{display:inline-block;font-size:.7rem;font-weight:700;padding:.16rem .6rem;
  border:1px solid color-mix(in srgb,var(--mint) 30%,transparent);
  background:var(--tintm);color:var(--pastel);
  border-radius:20px;background:var(--raised);color:var(--muted);letter-spacing:.01em;
  white-space:nowrap}
.pill.olive{background:var(--tinto);color:var(--pastel2);
  border-color:color-mix(in srgb,var(--olive) 34%,transparent);background:color-mix(in srgb,var(--olive) 18%,transparent);color:var(--olive)}
.pill.mint{background:color-mix(in srgb,var(--mint) 16%,transparent);color:var(--mint)}
.pill.orange{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}

/* --------------------------------------------------------------- level bar */
.levels{display:grid;gap:.5rem;margin:0 0 1.4rem}
.lvl{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:.9rem;
  padding:.7rem .9rem;background:var(--tinto);border:1px solid var(--line);
  border-radius:10px}
/* Levels 3 to 5 are the ones an assessor scores against and the ones that require
   evidence, so they sit on the mint pastel and 0 to 2 on the olive pastel. The
   colour carries the same distinction the text makes, for readers who scan first. */
.lvl:nth-child(n+4){background:var(--tintm)}
.lvl b{font-size:.72rem;color:var(--pastel2);letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-bottom:.15rem}
/* Levels 3 to 5 are the ones an assessor scores against and the ones that need
   evidence. They sit on the mint pastel; 0 to 2 on the olive pastel. */
.lvl:nth-child(n+4) b{color:var(--pastel)}
.lvl p{margin:0;font-size:.9rem}

/* ----------------------------------------------------------------- subcap */
.subcap{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;
  margin:0 0 1.1rem;background:var(--surface);scroll-margin-top:5rem}
.subcap header{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.3rem}
.subcap header b{font-size:1rem;color:var(--olive)}
.subcap .q{color:var(--muted);margin:.35rem 0 .9rem;font-size:.94rem}
.subcap .ev{font-size:.85rem;color:var(--muted);margin-top:.9rem}
.subcap .ev b{color:var(--ink);display:block;margin-bottom:.25rem;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em}

/* -------------------------------------------------------------- prev/next */
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:3.5rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.pn a{display:block;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);background:var(--surface)}
.pn a:hover{border-color:var(--olive)}
.pn span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:.2rem;font-weight:700}
.pn .next{text-align:right}

/* ------------------------------------------------------------------- hero */
/* Two greens, not one. The olive alone read as khaki against the black; adding a
   mint wash from the opposite corner is what makes the page recognisably part of the
   same family as UTIOM and TIR-CMM, while the orange stays reserved for action. */
.hero{border-bottom:1px solid var(--line);position:relative;
  background:
    radial-gradient(1100px 420px at 12% -10%,
      color-mix(in srgb,var(--olive) 16%,transparent),transparent 68%),
    radial-gradient(900px 380px at 88% 0%,
      color-mix(in srgb,var(--mint) 12%,transparent),transparent 66%),
    var(--bg)}
/* A hairline of the family palette along the bottom edge of the hero. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--olive),var(--pastel2) 28%,var(--mint) 62%,var(--pastel))}
.hero .in{max-width:1400px;margin:0 auto;padding:4rem 1.25rem 3.2rem}
.hero h1{max-width:19ch;font-size:clamp(2.1rem,5vw,3.35rem)}
.hero .lede{font-size:clamp(1.02rem,1.7vw,1.22rem);max-width:60ch;color:var(--ink);opacity:.86}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.9rem}
.btn{display:inline-block;padding:.78rem 1.4rem;border-radius:10px;text-decoration:none;
  font-weight:750;font-size:.95rem;border:1px solid transparent}
.btn.primary{background:var(--cta);color:var(--ctaink)}
/* Keep the token on hover: hardcoding dark text here would drop the light
   theme's white-on-mint to 3.40:1 the moment a pointer touched it. */
.btn.primary:hover{filter:brightness(1.06);color:var(--ctaink)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn.ghost:hover{border-color:var(--olive);color:var(--olive)}
.meta{font-size:.85rem;color:var(--muted);margin-top:1.7rem;max-width:75ch}

/* ------------------------------------------------------------------- misc */
.dl{display:flex;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.dl:last-child{border-bottom:0}
.dl .ico{flex:0 0 3rem;height:3rem;border-radius:10px;background:var(--raised);
  color:var(--olive);display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:.68rem;letter-spacing:.03em}
.dl .tx{flex:1;min-width:15rem}
.dl .tx b{display:block;font-size:.98rem}
.dl .tx span{font-size:.86rem;color:var(--muted)}
footer{border-top:1px solid var(--line);background:var(--surface);margin-top:auto}
footer /* Author credit under the footer brand. Sized between the brand and the body
   text so it reads as attribution, not as another navigation link. */
.byline{margin:.45rem 0 0;font-size:.86rem}
.byline a{color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 40%,transparent)}
.byline a:hover{border-bottom-color:var(--mint)}
.slogan{margin:.7rem 0 0;font-style:italic;letter-spacing:.01em;
  color:var(--olive);font-size:.92rem}
footer .in{max-width:1400px;margin:0 auto;padding:2.4rem 1.25rem;font-size:.86rem;
  color:var(--muted);display:grid;gap:1.6rem;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}
footer .in h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 .6rem;font-weight:750}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.35rem}
footer a{color:var(--ink);text-decoration:none;opacity:.82}
footer a:hover{opacity:1;color:var(--olive)}
.legal{border-top:1px solid var(--line);padding:1.2rem 1.25rem 2.4rem;font-size:.79rem;
  color:var(--muted);max-width:1400px;margin:0 auto;line-height:1.55}

/* ------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .shell{grid-template-columns:15rem minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:900px){
  .menubtn{display:inline-block}
  .shell{grid-template-columns:minmax(0,1fr);gap:0}
  .side{position:fixed;inset:3.4rem auto 0 0;width:min(20rem,84vw);background:var(--surface);
    border-right:1px solid var(--line);padding:1.4rem 1rem 3rem;z-index:90;
    transform:translateX(-102%);transition:transform .18s ease;max-height:none;height:100%}
  .side[data-open="true"]{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
  .top nav a:not(.cta):not(.iconbtn){display:none}
  /* Search stays available on small screens — hiding it removed the feature for
     phone and tablet entirely. The section links are already in the drawer, so the
     bar has room; the input just gets narrower and the results panel goes full width. */
  .srch{flex:1 1 auto;min-width:0;margin-left:auto}
  .srch input{width:100%}
  .srch input:focus{width:100%}
  .qres{right:auto;left:0;width:calc(100vw - 2.5rem);max-width:none}
  footer .in{grid-template-columns:1fr 1fr}
  /* A sticky filter with an input and thirteen chips eats most of a phone screen. */
  .filters{position:static}
  .filters .chips{gap:.3rem}
  .fchip{padding:.22rem .6rem;font-size:.74rem}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn .next{text-align:left}
  footer .in{grid-template-columns:1fr}
  .lvl{grid-template-columns:minmax(0,1fr);gap:.25rem}
}

@media print{
  .share{display:none}
  .top,.side,.toc,.pn,footer,.skip,.btnrow{display:none!important}
  .shell{grid-template-columns:minmax(0,1fr);max-width:none}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}