/* ---------- fonts ---------- */
@font-face { font-family:'Bricolage';
  src:url('fonts/BricolageGrotesque-600.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader';
  src:url('fonts/Newsreader-400.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader';
  src:url('fonts/Newsreader-400i.woff2') format('woff2'); font-weight:400;
  font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat';
  src:url('fonts/Montserrat.woff2') format('woff2'); font-weight:400 700;
  font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono';
  src:url('fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight:400;
  font-style:normal; font-display:swap; }
@font-face { font-family:'PlexMono';
  src:url('fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight:500;
  font-style:normal; font-display:swap; }

@font-face { font-family:'JetBrains Mono';
  src:url('fonts/JetBrainsMono.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap; }

/* ---------- tokens ---------- */
:root {
  --paper:#FDFCFF;
  --panel:#F3F0FC;
  --ink:#17131F;
  --muted:#6C5DBE;
  --accent:#5646C8;
  --accent-soft:#C9BFF2;
  --line:#E5E0F5;
  --tape:rgba(185,172,230,.38);
  --kills:#C03B36;
  --work:#9A6B10;
  --shelf:#251F38;
  --f-display:'Bricolage', 'Avenir Next', sans-serif;
  --f-body:'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-mono:'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light dark;
}
:root[data-font="gotham"] {
  --f-display:'Montserrat', 'Avenir Next', sans-serif;
  --f-body:'Montserrat', sans-serif;
  --f-mono:'Montserrat', sans-serif;
}
:root[data-font="gotham"] body { font-size:1.02rem; }
:root[data-font="mono"] {
  --f-display:'JetBrains Mono', monospace;
  --f-body:'JetBrains Mono', monospace;
  --f-mono:'JetBrains Mono', monospace;
}
:root[data-font="mono"] body { font-size:.95rem; line-height:1.75; }
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#110E1A; --panel:#1B1728; --ink:#F4F2FC; --muted:#9D8FE0;
    --accent:#A99BFF; --accent-soft:#453A78; --line:#322A50;
      --tape:rgba(169,155,255,.22);
    --kills:#FF5C55; --work:#D9A03C; --shelf:#0B0914;
  }
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}
body {
  margin:0; overflow-x:clip; background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:1.125rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:66rem; margin:0 auto; padding:0 1.5rem; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px;
  border-radius:2px; }
::selection { background:var(--accent-soft); color:var(--ink); }
img { max-width:100%; height:auto; }
.mono { font-family:var(--f-mono); }
p, li, blockquote, .d, .after { text-wrap:pretty; }

/* ---------- nav ---------- */
nav.top {
  display:flex; justify-content:space-between; align-items:baseline;
    gap:1rem;
  padding:1.4rem 0 1.2rem;
}
nav.top .links {
  border-bottom:1px solid var(--line); padding-bottom:.9rem;
}
nav.top .sig {
  font-family:var(--f-body); font-weight:500;
  font-size:1.3rem; letter-spacing:0;
  text-decoration:none; position:relative;
  display:inline-block;
}
nav.top .sig::after {
  content:''; position:absolute; left:-2px; right:-8px;
  bottom:-7px; height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent) 0%,
    var(--accent) 55%, var(--accent-soft) 100%);
  transform:rotate(-1.6deg) skewX(-18deg);
  transform-origin:left center;
}
nav.top .sig:hover::after {
  transform:rotate(-2.4deg) skewX(-18deg);
  transition:transform .18s ease;
}
nav.top .links { display:flex; gap:1.3rem; flex-wrap:wrap;
  justify-content:flex-end; }
nav.top .links a {
  font-family:var(--f-mono); font-size:.88rem;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .15s;
}
nav.top .links a:hover, nav.top .links a:focus-visible,
  nav.top .links a.here { color:var(--accent); }


/* ---------- hero / about (home) ---------- */
header.hero { padding:2.2rem 0 1rem; }
.hero .eyebrow {
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em;
    text-transform:uppercase;
  color:var(--accent); margin:0 0 1.2rem;
}
.hero h1 {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.7rem, 7.5vw, 5rem); line-height:1;
    letter-spacing:-.025em;
  margin:0 0 1.4rem; text-wrap:balance;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p.lede {
  font-size:clamp(1.15rem, 2.1vw, 1.4rem); line-height:1.5; max-width:36ch;
    margin:0;
}
.about-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem;
  align-items:start; margin-top:3.5rem; }
.about-copy p { margin:0 0 1.2em;  }
.about-copy a {
  color:var(--accent);
  text-decoration-color:var(--accent-soft);
  text-underline-offset:3px;
}
.about-copy a:hover { text-decoration-color:var(--accent); }
.about-copy p:last-of-type { margin-bottom:0; }
.facts { margin:2.2rem 0 0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:.55rem; }
.facts li { font-family:var(--f-mono); font-size:.8rem; color:var(--muted);
  display:flex; gap:.8rem; }
.facts li b { font-weight:500; color:var(--accent); min-width:7.5rem; }
.prints { display:flex; flex-direction:column; gap:2.6rem;
  padding-top:.4rem; }
.print { position:relative; transition:transform .2s ease; }
.print:nth-child(1) { transform:rotate(-1.6deg); }
.print:nth-child(2) { transform:rotate(1.3deg); align-self:flex-end;
  width:88%; }
.print:nth-child(3) { transform:rotate(-1.1deg); width:92%; }
.print .ph {
  background:var(--panel); padding:10px 10px 12px; border-radius:2px;
  box-shadow:0 10px 28px rgba(10,8,20,.16), 0 2px 6px rgba(10,8,20,.10);
}
.print img { display:block; width:100%; border-radius:1px; }

/* ---------- photo strip (landing) ---------- */
.photo-strip {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-top:3rem;
}
.photo-strip img {
  width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block;
  border-radius:8px;
}
.photo-strip img.face-up { object-position:50% 18%; }

/* ---------- quick links (landing, mobile only) ---------- */
.quick-links {
  display:none; flex-wrap:wrap; gap:1rem 2.4rem;
  padding:2.4rem 0 4rem;
}
.quick-links a {
  font-family:var(--f-mono); font-size:.92rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:var(--accent); transition:color .15s;
}
.quick-links a::after { content:' →'; }
.quick-links a:hover, .quick-links a:focus-visible {
  color:var(--ink);
}

/* ---------- landing directory ---------- */
.dir { padding:3.6rem 0 4.2rem; border-bottom:1px solid var(--line); }
.dir-label {
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase;
  color:var(--accent); margin:0 0 1.4rem;
}
.dir-row {
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
    column-gap:2rem;
  padding:1.5rem 0; border-top:1px solid var(--line); text-decoration:none;
}
.dir-row .t {
  font-family:var(--f-display); font-weight:600;
    font-size:clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing:-.02em; line-height:1.1; transition:color .15s;
}
.dir-row .t::after { content:' →'; color:var(--accent-soft);
  transition:color .15s; }
.dir-row:hover .t, .dir-row:focus-visible .t { color:var(--accent); }
.dir-row:hover .t::after { color:var(--accent); }
.dir-row .d { grid-column:1; color:var(--muted); font-style:italic;
  font-size:1rem; max-width:50ch; }
.dir-row .m {
  grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right;
  font-family:var(--f-mono); font-size:.75rem; color:var(--muted);
    white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------- sections (home) ---------- */
section { padding:4.2rem 0 4.6rem; border-bottom:1px solid var(--line); }
.sect-head { display:flex; align-items:baseline; gap:1rem;
  margin-bottom:2.2rem; }
.sect-head .tag {
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em;
    text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
}
.sect-head h2 {
  font-family:var(--f-display); font-weight:600; font-size:1.9rem;
    letter-spacing:-.02em;
  margin:0; line-height:1.1;
}
.sect-head .rule { flex:1; height:1px; background:var(--line);
  align-self:center; }
.sect-note { font-family:var(--f-mono); font-size:.78rem;
  color:var(--muted); margin:1.6rem 0 0; }

/* ---------- bookshelf ---------- */
.shelf-wrap { position:relative; }
.shelf-wrap::before, .shelf-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:42px;
  z-index:1; pointer-events:none;
}
.shelf-wrap::before {
  left:0;
  background:linear-gradient(90deg, var(--paper), transparent);
}
.shelf-wrap::after {
  right:0;
  background:linear-gradient(270deg, var(--paper), transparent);
}
.shelf-nav {
  position:absolute; top:42%; z-index:2;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line);
  color:var(--accent); font-size:1rem; cursor:pointer;
  transition:opacity .2s, border-color .15s;
}
.shelf-nav:hover { border-color:var(--accent); }
.shelf-nav.prev { left:-8px; }
.shelf-nav.next { right:-8px; }
.shelf-nav[disabled] { opacity:0; visibility:hidden;
  pointer-events:none; }
.shelf-scroll {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.shelf-scroll::-webkit-scrollbar { display:none; }
.shelf-inner { width:max-content; min-width:100%; }
.shelf {
  display:flex; align-items:flex-end; gap:5px; flex-wrap:nowrap;
  padding:14px 1rem 0; min-height:280px;
}
.book {
  position:relative; display:flex; align-items:center;
  justify-content:center; text-align:center;
  writing-mode:vertical-rl; cursor:pointer;
  font-family:var(--f-mono); font-size:.76rem;
  letter-spacing:.04em; line-height:1.55;
  border-radius:2px 2px 0 0; padding:1rem 6px;
  box-shadow:inset -2px 0 0 rgba(0,0,0,.18),
    inset 2px 0 0 rgba(255,255,255,.07);
  transition:transform .18s ease;
  flex:none; overflow:hidden;
}
.book:hover, .book:focus-visible { transform:translateY(-9px); }
.book.active {
  transform:translateY(-11px);
  box-shadow:0 0 0 2px var(--accent),
    0 8px 22px rgba(86,70,200,.35);
}
.book.active:hover { transform:translateY(-11px); }
.book.lean { transform:rotate(7deg) translateY(2px);
  transform-origin:bottom left; margin-left:14px; margin-right:6px; }
.book.lean:hover { transform:rotate(7deg) translateY(-7px); }
.shelf-board { height:10px; background:var(--shelf); border-radius:2px;
  box-shadow:0 3px 0 rgba(0,0,0,.12); }
.flat-stack { display:flex; align-items:center; gap:.75rem;
  margin:1.1rem 1rem 0; flex-wrap:wrap; }
.flat-book {
  height:26px; display:flex; align-items:center; padding:0 1rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em;
  border-radius:2px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
}
.flat-label { font-family:var(--f-mono); font-size:.72rem;
  color:var(--muted); }

/* ---------- book log ---------- */
.book-log { padding-top:1rem; }
.entry { border-top:1px solid var(--line); }
.entry:last-child { border-bottom:1px solid var(--line); }
.entry summary {
  display:grid; grid-template-columns:1fr auto auto;
  align-items:baseline; column-gap:1.4rem;
  padding:1.05rem 0; cursor:pointer; list-style:none;
}
.entry summary::-webkit-details-marker { display:none; }
.entry summary::after {
  content:'+'; font-family:var(--f-mono); font-size:1rem;
  color:var(--accent);
}
.entry[open] summary::after { content:'−'; }
.entry .bt {
  font-family:var(--f-body); font-weight:500; font-size:1.25rem;
  line-height:1.3; transition:color .15s;
}
.entry summary:hover .bt { color:var(--accent); }
.entry .ba {
  font-family:var(--f-mono); font-size:.8rem;
  letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; white-space:nowrap;
}
.binfo {
  display:flex; gap:1.5rem; align-items:flex-start;
  padding:.4rem 0 1.2rem;
}
.cover {
  width:96px; flex:none; border-radius:3px;
  border:1px solid var(--line);
}
.entry .notes { max-width:120ch; }

/* bio/hook: its own group with a purple header */
.entry .notes > p:first-child::before {
  content:'About'; display:block;
  font-family:var(--f-mono); font-weight:500;
  font-size:.85rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.4rem;
}
.entry .notes > p:first-child {
  margin-bottom:2.2rem;
}

/* lesson lead: mono chip + statement */
.entry .notes > p:has(> strong:first-child) {
  margin:2.2rem 0 .5rem; font-size:1.15rem; line-height:1.5;
  font-weight:700;
}
.entry .notes > p > strong {
  display:block; font-family:var(--f-mono); font-weight:500;
  font-size:.85rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.3rem; font-style:normal;
}

/* story paragraph sits close under its lesson */
.entry .notes > p:has(> strong:first-child) + p {
  margin-top:.9rem;
}
.entry .notes p {
  margin:0 0 .8em; font-size:1.05rem; line-height:1.65;
  color:var(--ink);
  text-align:justify; hyphens:auto;
}
.entry .notes > p:first-child,
.entry .notes > p:has(> strong:first-child) {
  text-align:left; hyphens:none;
}

.book-log.shelf-mode .entry { border:none; }
.book-log.shelf-mode .entry:not([open]) { display:none; }
.book-log.shelf-mode summary {
  pointer-events:none; padding-bottom:1rem;
}
.book-log.shelf-mode .bt { font-size:1.7rem; }
.book-log.shelf-mode summary::after { content:''; }
.book-log.shelf-mode .entry[open] {
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:1.4rem 3.2rem 1.8rem;
}
.book-log.shelf-mode summary {
  border-bottom:1px solid var(--line); margin-bottom:1.4rem;
}

/* ---------- essay index ---------- */
.essay-list { display:flex; flex-direction:column; }
.essay {
  display:grid; grid-template-columns:1fr auto; column-gap:2rem;
    row-gap:.15rem;
  padding:1.35rem 0; border-top:1px solid var(--line); text-decoration:none;
}
.essay:first-child { border-top:none; }
.essay .t {
  font-family:var(--f-body); font-weight:500; font-size:1.45rem;
    letter-spacing:-.01em;
  transition:color .15s; line-height:1.25;
}
.essay:hover .t, .essay:focus-visible .t { color:var(--accent); }
.essay .d { grid-column:1; color:var(--ink); font-size:1rem;
  font-style:italic; max-width:52ch; }
.essay .m {
  grid-column:2; grid-row:1 / span 2; align-self:center;
  font-family:var(--f-mono); font-size:.75rem; color:var(--muted);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* ---------- poem index ---------- */
/* a single-column list, same shape as the essay index, so the
   count of poems never leaves the last one stranded in a grid.
   Two-column grid per row (title+preview, then a meta column)
   matches .essay so a per-row icon can sit where "3 MIN" sits. */
.poems { display:flex; flex-direction:column; }
.poem-card {
  display:grid; grid-template-columns:1fr auto; column-gap:2rem;
    row-gap:.45rem;
  text-decoration:none;
  padding:1.35rem 0; border-top:1px solid var(--line);
  transition:border-color .15s;
}
.poem-card:first-child { border-top:none; }
.poem-card h3 {
  grid-column:1;
  font-family:var(--f-mono); font-weight:500; font-size:1.05rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0;
  transition:color .15s;
}
.poem-card:hover h3, .poem-card:focus-visible h3 { color:var(--accent); }
.poem-card pre {
  grid-column:1;
  font-family:var(--f-body); font-style:italic; font-size:1.15rem;
  line-height:1.6; margin:0; white-space:pre-wrap; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
}

/* ---------- standup ---------- */
.premises { display:grid;
  grid-template-columns:repeat(auto-fill, minmax(16.5rem, 1fr)); gap:1.2rem;
  }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column;
    gap:.8rem;
  transition:transform .16s ease;
}
.card:nth-child(odd) { transform:rotate(-.5deg); }
.card:nth-child(even) { transform:rotate(.4deg); }
.card:hover { transform:rotate(0deg) translateY(-3px); }
.chip {
  align-self:flex-start; font-family:var(--f-mono); font-size:.68rem;
    font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.18rem .55rem; border-radius:99px; border:1px solid currentColor;
}
.chip.kills { color:var(--kills); }
.chip.work  { color:var(--work); }
.chip.new   { color:var(--accent); }
.chip.retired { color:var(--muted); }
.card p { margin:0; font-family:var(--f-mono); font-size:.88rem;
  line-height:1.6; }
.card.retired p { color:var(--muted); }

/* ---------- article & poem pages ---------- */
.page-head { padding:3.8rem 0 2.6rem; }
.page-head .crumb {
  font-family:var(--f-mono); font-size:.95rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
}
.page-head .crumb:hover { text-decoration:underline; }
.page-head h1 {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.2rem, 5.5vw, 3.4rem); line-height:1.05;
    letter-spacing:-.02em;
  margin:.9rem 0 .9rem; text-wrap:balance;
}
.page-head .meta {
  font-family:var(--f-mono); font-size:.95rem;
  letter-spacing:.08em; color:var(--muted);
  text-transform:uppercase;
}
.prose { max-width:62ch; padding-bottom:4rem; }
.prose p { margin:0 0 1.35em; text-align:justify;
  -webkit-hyphens:auto; hyphens:auto; }
.prose a {
  color:var(--accent);
  text-decoration-color:var(--accent-soft);
  text-underline-offset:3px;
}
.prose a:hover { text-decoration-color:var(--accent); }
.prose h2 {
  font-family:var(--f-mono); font-size:1.1rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  margin:2.6rem 0 1rem;
}
.prose mjx-container { overflow-x:auto; overflow-y:hidden; }
.gol {
  margin:2.4rem 0 .7rem; border:1px solid var(--line);
  border-radius:6px; overflow:hidden; line-height:0;
}
.gol canvas { display:block; }
.gol-cap {
  font-family:var(--f-mono); font-size:.78rem;
  color:var(--muted); margin:0 0 2.2rem;
}
.prose p.opener::first-letter {
  font-family:var(--f-display); font-weight:700; font-size:3.1em;
    line-height:.85;
  float:left; padding:.06em .12em 0 0; color:var(--accent);
}
.prose blockquote {
  margin:2.2rem 0; padding:0 0 0 1.5rem;
    border-left:2px solid var(--accent-soft);
  font-style:italic; font-size:1.3rem; line-height:1.55; color:var(--muted);
}
.prose blockquote:first-child { margin-top:.5rem; }
.poem-solo { max-width:38rem; padding:1rem 0 4rem; }
.poem-solo pre {
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(1.3rem, 2.6vw, 1.55rem); line-height:1.9;
    white-space:pre-wrap; margin:0;
}
.poem-solo .after {
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(1.3rem, 2.6vw, 1.55rem); line-height:1.9;
  margin:2.4rem 0 0;
}
.pn {
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:1.6rem 0 0; border-top:1px solid var(--line); margin-bottom:4rem;
}
.pn a {
  font-family:var(--f-mono); font-size:.95rem;
  letter-spacing:.06em; color:var(--muted);
  text-decoration:none;
}
.pn a:hover { color:var(--accent); }

/* ---------- footer ---------- */
footer { padding:2.4rem 0 3.2rem; display:flex;
  justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
footer p { margin:0; font-family:var(--f-mono); font-size:.75rem;
  color:var(--muted); }
footer a { color:var(--muted); }
footer a:hover { color:var(--accent); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  body { font-size:1.06rem; }
  .wrap { padding:0 2.25rem; }
  nav.top { flex-direction:column; gap:2.1rem; align-items:flex-start; }
  nav.top .links { justify-content:flex-start; gap:1rem 1.2rem; }
  nav.top .links { display:none; }
  header.hero { padding:1.8rem 0 2.4rem; }
  .page-head { padding-top:4rem; }
  section { padding:3.2rem 0 3.6rem; }
  .about-grid { grid-template-columns:1fr; gap:2.8rem; }
  .about-copy p { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
  .photo-strip { gap:6px; margin-top:2.4rem; }
  .photo-strip img { border-radius:6px; }
  .quick-links {
    display:flex; flex-wrap:nowrap; justify-content:flex-start;
    gap:1.4rem; padding:2rem 0 3rem;
  }
  .quick-links a {
    font-size:.95rem; letter-spacing:.05em; white-space:nowrap;
  }
  .cover { width:74px; }
  .binfo { gap:1rem; }
  .entry summary { grid-template-columns:1fr auto; row-gap:.1rem; }
  .entry .bt { grid-column:1; font-size:1.1rem; }
  .entry .ba {
    grid-column:1; grid-row:2; white-space:normal;
  }
  .entry summary::after { grid-column:2; grid-row:1 / span 2; }
  .essay { grid-template-columns:1fr; }
  .essay .m { display:none; }
  .page-head .meta .tag { display:none; }
  .dir-row { grid-template-columns:1fr; }
  .dir-row .m { grid-column:1; grid-row:auto; text-align:left;
    margin-top:.3rem; }
    .shelf-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .shelf-scroll::-webkit-scrollbar { display:none; }
  .shelf-inner { width:max-content; min-width:100%; }
  .shelf { flex-wrap:nowrap; padding:0 .25rem; }
  .flat-stack { margin-left:.25rem; }
}