/* The Gushi Journal. Ink on paper.

   The palette is the site's (apps/web/public/assets/tokens.css), copied by
   value because the blog is its own Vercel project and cannot link the site's
   file without a cross-origin request. If a hex changes there, change it here.

   One seal red, used sparingly: the chop, the one button, the marks that say
   "this is the answer" and "this is where it stops".

   The layout follows what the research in business/blog/SEO.md found on the
   best review pages: the answer before the fold, the picks under it, every
   entry a card with the same two facts, dates and the author up top. */

:root {
  --paper: #F4F1E9;
  --paper-sunken: #EDE9DF;
  --paper-card: #FFFDF8;
  --paper-raised: #F1ECE0;
  --fg: #1A1813;
  --fg-2: #5B5546;
  --muted: #6F685B;
  --hair: rgba(26, 24, 19, .14);
  --hair-soft: rgba(26, 24, 19, .08);
  --seal: #C8452E;
  --seal-press: #D8512F;
  --seal-text: #A83A25;
  --seal-soft: rgba(200, 69, 46, .07);
  --ink: #15140F;
  --ink-card: #1F1D17;
  --ink-fg: #ECE6D8;
  --ink-fg-2: #A39B8B;
  --t1: #D85C50; --t2: #E0A23C; --t3: #5FA86A; --t4: #5B8BC9; --t5: #8C857A;
  --ok: #3F7F4B;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --hz: 'Noto Serif SC', 'Songti SC', 'STSong', serif;

  --pad: clamp(18px, 4vw, 56px);
  --maxw: 1280px;
  --measure: 41rem;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(26, 24, 19, .04), 0 24px 48px -36px rgba(26, 24, 19, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Paper grain: an inline SVG noise, no request. Barely there, on purpose. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .07  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }
[lang|="zh"] { font-family: var(--hz); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 4px; }

/* ── The bar ─────────────────────────────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--seal); transform-origin: 0 50%; transform: scaleX(0); }
.home .progress, .page .progress { display: none; }

.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.chop {
  width: 28px; height: 28px; border-radius: 7px; background: var(--seal);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.chop span { font: 600 11px/1.02 var(--hz); color: #F4EEE0; text-align: center; }
.brand { font: 500 20px/1 var(--serif); letter-spacing: -.01em; font-variation-settings: 'opsz' 40; }
.brand em { color: var(--fg-2); font-weight: 400; }
.bar-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.bar-nav a { color: var(--fg-2); text-decoration: none; transition: color .16s ease; }
.bar-nav a:hover { color: var(--fg); }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-sunken); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lang a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 999px; }
.lang a:hover { color: var(--fg); }
.lang a[aria-current] { color: var(--fg); background: var(--paper-card); box-shadow: 0 1px 2px rgba(26, 24, 19, .1); }
.bar-app {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--fg); text-decoration: none;
  font: 600 14px/1 var(--sans); transition: background .18s ease, color .18s ease;
}
.bar-app:hover { background: var(--fg); color: var(--paper); }
@media (max-width: 860px) {
  .bar { gap: 12px; }
  .bar-nav { display: none; }
  .lang { margin-left: auto; }
  .brand em { display: none; }
}
@media (max-width: 420px) { .bar-app { display: none; } }

/* ── Labels with a rule ──────────────────────────────────────────────────── */
.label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2);
}
.label::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.no { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--seal-text); }

/* ── The index: masthead and numbers ─────────────────────────────────────── */
.mast {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) var(--pad) clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end;
}
.mast-line {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  margin: 0 0 clamp(22px, 3vw, 36px); padding: 9px 0;
  border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
.mast-v { font: 600 13px/1 var(--hz); letter-spacing: .5em; text-transform: none; color: var(--fg); }
.mast h1 {
  margin: 0; max-width: 16ch; text-wrap: balance;
  font: 300 clamp(40px, 6.2vw, 92px)/.98 var(--serif);
  letter-spacing: -.035em; font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.mast h1 em { color: var(--seal-text); font-weight: 400; }
.mast-lead { max-width: 34rem; margin: 20px 0 0; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--serif); color: var(--fg-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips a {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper-card);
  font: 500 13.5px/1 var(--sans); text-decoration: none; color: var(--fg-2); transition: border-color .2s ease, color .2s ease;
}
.chips a:hover { border-color: var(--fg); color: var(--fg); }

.nums { padding: 22px 24px 20px; border-radius: var(--radius); background: var(--paper-card); border: 1px solid var(--hair-soft); box-shadow: var(--shadow); }
.nums-k { margin: 0 0 14px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--seal-text); }
.nums dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.nums dl > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hair-soft); }
.nums dl > div:nth-child(odd) { padding-right: 14px; }
.nums dl > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--hair-soft); }
.nums dt { font-size: 13px; color: var(--muted); line-height: 1.3; }
.nums dd { margin: 0; font: 300 clamp(30px, 2.8vw, 40px)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
.nums a { display: inline-block; margin-top: 10px; font: 600 13.5px/1.3 var(--sans); text-decoration: none; }
.nums a:hover { color: var(--seal-text); }
@media (max-width: 900px) { .mast { grid-template-columns: 1fr; align-items: start; } }

/* ── The index: lead story and rail ──────────────────────────────────────── */
.lead {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start;
}
.feat { display: flex; flex-direction: column; gap: 22px; text-decoration: none; }
.feat-pic { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-sunken); }
.feat-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: sepia(.18) saturate(.85); transition: transform 1.2s var(--ease); }
.feat:hover .feat-pic img { transform: scale(1.03); }
.feat-text { display: flex; flex-direction: column; gap: 14px; }
.feat-h {
  font: 400 clamp(30px, 3.6vw, 52px)/1.04 var(--serif); letter-spacing: -.025em; font-variation-settings: 'opsz' 120;
  text-wrap: balance; transition: color .2s ease;
}
.feat:hover .feat-h { color: var(--seal-text); }
.feat-p { font-size: clamp(16px, 1.15vw, 17.5px); color: var(--fg-2); max-width: 40rem; }
.more-link { font: 600 14px/1 var(--sans); letter-spacing: .02em; display: inline-flex; gap: 8px; align-items: center; }
.more-link span { transition: transform .25s var(--ease); }
.feat:hover .more-link span { transform: translateX(5px); }

.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li + li { border-top: 1px solid var(--hair-soft); }
.rail li a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; text-decoration: none; }
.rail-hz {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--paper-card); border: 1px solid var(--hair-soft);
  font-size: 34px; line-height: 1; transition: transform .4s var(--ease);
}
.rail li a:hover .rail-hz { transform: rotate(-4deg); }
.rail-t { display: flex; flex-direction: column; gap: 6px; }
.rail-h { font: 400 20px/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; transition: color .2s ease; }
.rail li a:hover .rail-h { color: var(--seal-text); }
.tools { margin-top: 28px; display: grid; gap: 8px; }
.tools .label { margin-bottom: 8px; }
.tools a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 12px;
  background: var(--paper-raised); text-decoration: none; font: 500 15px/1.2 var(--sans); transition: background .2s ease;
}
.tools a::after { content: '↗'; margin-left: auto; color: var(--muted); }
.tools a:hover { background: var(--paper-sunken); }
.tools a span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--paper-card); font-size: 17px; }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr; } }

/* ── The index: by topic ─────────────────────────────────────────────────── */
.topics { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--pad) 0; }
.topic { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: 28px 0; border-top: 1px solid var(--hair-soft); scroll-margin-top: 80px; }
.topic:first-of-type { border-top: 0; padding-top: 4px; }
.topic h2 { margin: 0; font: 300 clamp(28px, 3vw, 40px)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
@media (max-width: 760px) { .topic { grid-template-columns: 1fr; } }
.lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px clamp(24px, 3vw, 40px); }
.line a { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; text-decoration: none; }
.line h3 { margin: 0; font: 400 clamp(21px, 1.8vw, 25px)/1.18 var(--serif); letter-spacing: -.015em; text-wrap: balance; transition: color .2s ease; }
.line a:hover h3 { color: var(--seal-text); }
.line p { margin: 0; color: var(--fg-2); font-size: 15px; }

/* ── The character tile, the blog's one picture of its own ───────────────── */
.tile {
  display: grid; place-items: center; align-content: center; gap: 6px;
  aspect-ratio: 1; border-radius: 14px; background: var(--paper-card);
  box-shadow: 0 1px 2px rgba(26, 24, 19, .05), 0 22px 40px -30px rgba(26, 24, 19, .45);
  border: 1px solid var(--hair-soft);
}
.tile-hz { font: 400 clamp(56px, 6vw, 92px)/1 var(--hz); color: var(--fg); }
.tile-py { font: italic 500 16px/1 var(--serif); }
.tile-gl { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tile-on { position: absolute; left: 16px; bottom: 16px; width: clamp(88px, 9vw, 120px); backdrop-filter: blur(6px); background: rgba(255, 253, 248, .92); }
.tile-on .tile-hz { font-size: clamp(38px, 3.8vw, 54px); }
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.card a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.card .tile { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-raised); box-shadow: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card .tile > :not(.tile-wash) { position: relative; }
.card .tile-hz { font-size: clamp(72px, 7vw, 116px); }
.card .tile-py { font-size: 18px; }
.tile-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.card a:hover .tile { transform: translateY(-3px); box-shadow: 0 26px 50px -36px rgba(26, 24, 19, .55); }
.card a:hover .tile-wash { opacity: .26; transform: scale(1.04); }
.card h3 { margin: 0; font: 400 clamp(21px, 1.8vw, 25px)/1.18 var(--serif); letter-spacing: -.015em; text-wrap: balance; transition: color .2s ease; }
.card a:hover h3 { color: var(--seal-text); }
.card p { margin: 0; color: var(--fg-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── The article head ────────────────────────────────────────────────────── */
.post-head {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(28px, 4.5vw, 64px) var(--pad) clamp(8px, 2vw, 24px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center;
}
.post-head.solo { grid-template-columns: minmax(0, 1fr); }
.crumbs { display: flex; gap: 10px; margin: 0 0 22px; font: 500 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--fg-2); }
.crumbs a:hover { color: var(--fg); }
.post-head h1 {
  margin: 0; max-width: 20ch;
  font: 300 clamp(36px, 4.8vw, 70px)/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-wrap: balance;
}
.post-lead { max-width: 38rem; margin: 20px 0 0; font: italic 400 clamp(17px, 1.4vw, 21px)/1.45 var(--serif); color: var(--fg-2); }
.byline { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; font-size: 14px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-card); border: 1px solid var(--hair); }
.byline > span { display: flex; flex-direction: column; gap: 2px; }
.byline a { text-decoration: none; }
.byline a:hover b { text-decoration: underline; }
.byline b { font-weight: 600; }
.byline span span { color: var(--muted); }
.ph-pic { margin: 0; }
.cover-img { width: 100%; aspect-ratio: 4 / 5; max-height: 460px; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); filter: sepia(.18) saturate(.85); }
.ph-pic figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .post-head { grid-template-columns: 1fr; gap: 20px; }
  .cover-img { aspect-ratio: 16 / 9; max-height: 220px; }
}

/* ── The article body: contents, prose, side ─────────────────────────────── */
.post-grid {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(24px, 3.5vw, 48px) var(--pad) 0;
  display: grid; grid-template-columns: 210px minmax(0, var(--measure)) 230px; justify-content: space-between; gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.post-grid.solo { grid-template-columns: minmax(0, var(--measure)); justify-content: start; padding-bottom: 24px; }
.toc, .side { position: sticky; top: 88px; }
.toc { max-height: calc(100vh - 110px); overflow: auto; }
.toc p { margin: 0 0 12px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.toc a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.toc .sub a { padding-left: 26px; font-size: 13px; }
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--seal); font-weight: 500; }

.side { display: flex; flex-direction: column; gap: 16px; }
.side-card { padding: 20px; border-radius: var(--radius); background: var(--paper-card); border: 1px solid var(--hair-soft); text-align: center; }
.side-card p { margin: 0; }
.side-k { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.side-hz { margin: 8px 0 4px !important; font: 400 88px/1.1 var(--hz); }
.side-py { font: italic 500 20px/1 var(--serif); }
.side-gl { margin-top: 6px !important; color: var(--fg-2); font-size: 14px; }
.side-app { text-align: left; background: var(--ink); color: var(--ink-fg); border: 0; }
.side-h { font: 400 22px/1.15 var(--serif); margin-bottom: 8px !important; }
.side-app p:not(.side-h) { color: var(--ink-fg-2); font-size: 14.5px; }
.side-app a { display: inline-block; margin-top: 14px; color: #E9A08F; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.side-app a:hover { text-decoration: underline; }

.toc-m { display: none; margin: 0 0 .6em; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper-card); font-family: var(--sans); }
.toc-m summary { cursor: pointer; list-style: none; padding: 13px 16px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); display: flex; justify-content: space-between; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: '+'; font: 300 20px/.6 var(--sans); color: var(--seal-text); }
.toc-m[open] summary::after { content: '−'; }
.toc-m ol { list-style: none; margin: 0; padding: 0 16px 12px; }
.prose .toc-m li { padding: 0; }
.prose .toc-m li::before { display: none; }
.prose .toc-m li + li { margin-top: 0; }
.toc-m a { display: block; padding: 7px 0; border-top: 1px solid var(--hair-soft); font-size: 15px; line-height: 1.35; text-decoration: none; color: var(--fg); }
.toc-m .sub a { padding-left: 14px; color: var(--fg-2); }

@media (max-width: 1180px) {
  .post-grid { grid-template-columns: minmax(0, var(--measure)) 230px; justify-content: center; }
  .toc { display: none; }
  .toc-m { display: block; }
}
@media (max-width: 860px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
}

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose { font: 400 clamp(17.5px, 1.15vw, 19px)/1.7 var(--serif); font-variation-settings: 'opsz' 18; color: var(--fg); min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
:where(.prose) p { margin: 0; }
.prose > p + p { margin-top: .9em; }
.prose a { color: var(--seal-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(168, 58, 37, .35); transition: text-decoration-color .2s ease; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; }
.prose h2 {
  margin: 2.2em 0 0; padding-top: 1em; border-top: 1px solid var(--hair);
  font: 400 clamp(25px, 2.2vw, 33px)/1.14 var(--serif); letter-spacing: -.02em; font-variation-settings: 'opsz' 72; text-wrap: balance;
}
.prose h2 + * { margin-top: .75em; }

.prose ul { list-style: none; padding: 0; margin-left: 0; }
.prose li { position: relative; padding-left: 1.5em; }
.prose li + li { margin-top: .5em; }
.prose li::before { content: ''; position: absolute; left: .25em; top: .72em; width: 6px; height: 6px; background: var(--seal); transform: rotate(45deg); border-radius: 1px; }

/* The short answer: the one paragraph an AI answer or a hurried reader takes. */
.answer {
  position: relative; margin: 0; padding: 22px 26px 22px 28px;
  background: var(--paper-card); border-radius: var(--radius); border: 1px solid var(--hair-soft); box-shadow: var(--shadow);
}
.answer::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: var(--seal); border-radius: 0 3px 3px 0; }
.answer-k { margin: 0 0 8px !important; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--seal-text); }
.answer p:last-child { font-size: 1.01em; line-height: 1.62; }

/* Our picks: every entry in one glance, each a jump to its card. */
.picks { margin-top: 1em !important; border-radius: var(--radius); border: 1px solid var(--hair); background: var(--paper-card); overflow: hidden; font-family: var(--sans); }
.picks-k { margin: 0 !important; padding: 13px 18px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); background: var(--paper-raised); border-bottom: 1px solid var(--hair-soft); }
.picks ol { list-style: none; margin: 0; padding: 0; }
.prose .picks li { padding: 0; }
.prose .picks li::before { display: none; }
.prose .picks li + li { margin-top: 0; border-top: 1px solid var(--hair-soft); }
.picks a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 18px; text-decoration: none !important; color: var(--fg) !important; transition: background .2s ease;
}
.picks a:hover { background: var(--paper-raised); }
.pk-n { font: italic 400 20px/1 var(--serif); color: var(--seal-text); }
.pk-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-t b { font-size: 15.5px; font-weight: 600; }
.pk-t span { font-size: 13.5px; color: var(--fg-2); line-height: 1.35; }
.pk-c { max-width: 13rem; text-align: right; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.picks li.pk-ours a { background: var(--seal-soft); }
@media (max-width: 560px) { .picks a { grid-template-columns: 28px minmax(0, 1fr); } .pk-c { display: none; } }

/* An entry: a card with its number, its name, what it is best for, and the
   same two facts every time. */
.pick {
  margin-top: 2em !important; padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius); border: 1px solid var(--hair-soft); background: var(--paper-card);
  scroll-margin-top: 84px;
}
.pick > * + * { margin-top: .9em; }
.pick + .pick { margin-top: 1.25em !important; }
.prose .pick h2 { margin: 0; padding: 0; border: 0; }
.prose h2.entry { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.prose h2 .num { font: italic 300 clamp(42px, 3.6vw, 56px)/.9 var(--serif); color: var(--seal-text); letter-spacing: -.03em; font-variation-settings: 'opsz' 144; }
.entry-t { display: flex; flex-direction: column; gap: 4px; }
.entry-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 400 clamp(25px, 2.2vw, 32px)/1.1 var(--serif); }
.entry-best { font: 500 14.5px/1.35 var(--sans); letter-spacing: 0; color: var(--fg-2); }
.badge { padding: 4px 9px; border-radius: 999px; background: var(--seal-soft); color: var(--seal-text); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pick-ours { border-color: rgba(200, 69, 46, .28); }
.fact {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding-top: .85em; border-top: 1px solid var(--hair-soft); font-size: .95em;
}
.fact + .fact { margin-top: .85em !important; }
.fact-k { font: 600 11.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact-stop .fact-k { color: var(--seal-text); }
.fact-stop .fact-k::before { content: '−'; margin-right: 6px; font-weight: 700; }
.fact-cost .fact-v { font-family: var(--sans); font-size: .9em; }
@media (max-width: 560px) { .fact { grid-template-columns: 1fr; gap: 4px; } }

/* Screenshots from our own use, side by side inside an entry. */
.shots { margin: 1.2em 0 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shots img { width: 100%; height: auto; aspect-ratio: 9 / 13; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--hair); background: var(--paper-sunken); }
.shots figcaption { grid-column: 1 / -1; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }

/* Tables: scroll sideways on a phone with the first column held. */
.table { margin: 1.5em 0 !important; overflow-x: auto; border-radius: 14px; border: 1px solid var(--hair); background: var(--paper-card); }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14.5px/1.45 var(--sans); }
.prose th, .prose td { padding: 12px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair-soft); }
.prose thead th { font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); background: var(--paper-raised); white-space: nowrap; }
.prose tbody th { position: sticky; left: 0; z-index: 1; font-weight: 600; white-space: nowrap; background: var(--paper-card); box-shadow: inset -1px 0 0 var(--hair-soft); }
.prose thead th:first-child { position: sticky; left: 0; z-index: 2; }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose tr.ours > * { background: #FBF0EA; }
.prose tr.ours th { color: var(--seal-text); }
.prose td.yes { color: var(--ok); font-weight: 600; }
.prose td.yes::before { content: '✓ '; }
.prose td.no { color: var(--muted); }
.prose td.no::before { content: '– '; }
.prose td:not(:first-child) { font-variant-numeric: tabular-nums; }

.faq { border-bottom: 1px solid var(--hair); }
.prose h2 + .faq { margin-top: .8em; }
.prose .faq + .faq { margin-top: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 17px 0; font: 500 clamp(18px, 1.35vw, 20px)/1.3 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 26px/1 var(--sans); color: var(--seal-text); transition: transform .3s var(--ease); flex: none; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 20px; color: var(--fg-2); }

/* About this article: who wrote it, what it is based on, how to correct it. */
.about {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start;
  margin-top: 3em !important; padding: 22px 24px; border-radius: var(--radius); background: var(--paper-raised);
  font: 400 14.5px/1.6 var(--sans); color: var(--fg-2);
}
.about img { width: 56px; height: 56px; border-radius: 50%; background: var(--paper-card); border: 1px solid var(--hair); }
.about p { margin: 0; }
.about p + p { margin-top: 8px; }
.about-k { font: 600 11.5px/1 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--fg) !important; margin-bottom: 8px !important; }
.about a { font-weight: 600; }

.keep { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--pad) 0; }

/* ── The ink band ────────────────────────────────────────────────────────── */
.cta { margin-top: clamp(64px, 8vw, 120px); background: var(--ink); color: var(--ink-fg); overflow: hidden; }
.cta-in {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
}
.cta-k { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 500 20px/1 var(--serif); }
.cta h2 { margin: 0; font: 300 clamp(36px, 5vw, 72px)/1 var(--serif); letter-spacing: -.03em; font-variation-settings: 'opsz' 144; }
.cta h2 em { color: #E9A08F; font-weight: 400; }
.cta p { max-width: 34rem; margin: 20px 0 0; color: var(--ink-fg-2); font-size: clamp(16px, 1.2vw, 18px); }
.button {
  display: inline-flex; align-items: center; margin-top: 28px; padding: 16px 26px; border-radius: 999px;
  background: var(--seal); color: #fff; font: 600 15.5px/1 var(--sans); text-decoration: none;
  box-shadow: 0 12px 30px -14px rgba(200, 69, 46, .8); transition: background .2s ease, transform .2s ease;
}
.button:hover { background: var(--seal-press); transform: translateY(-1px); }
.cta-mascot { width: clamp(180px, 20vw, 290px); height: auto; }
@media (max-width: 760px) { .cta-in { grid-template-columns: 1fr; } .cta-mascot { width: 170px; justify-self: end; margin-top: -20px; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--ink-fg-2); border-top: 1px solid rgba(236, 230, 216, .1); }
.foot-in {
  max-width: var(--maxw); margin: 0 auto; padding: 44px var(--pad) 36px;
  display: grid; grid-template-columns: 1.1fr .8fr .8fr 1.4fr; gap: 32px; font-size: 14px;
}
.foot .brand { color: var(--ink-fg); }
.foot .brand em { color: var(--ink-fg-2); }
.foot-v { margin: 18px 0 0; font: 400 15px/1 var(--hz); letter-spacing: .4em; color: var(--ink-fg-2); }
.foot-links { display: grid; gap: 10px; align-content: start; }
.foot a { color: var(--ink-fg); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-credits p { margin: 0 0 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.foot-credits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.foot-credits a { color: var(--ink-fg-2); text-decoration: underline; text-decoration-color: rgba(236, 230, 216, .25); }
.foot-fine { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid rgba(236, 230, 216, .1); font-size: 13px; }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand, .foot-credits { grid-column: 1 / -1; } }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.lost { max-width: var(--maxw); margin: 0 auto; padding: 80px var(--pad) 120px; text-align: center; }
.lost h1 { margin: 0 auto; font: 300 clamp(36px, 5vw, 64px)/1.05 var(--serif); }
.lost .mast-lead { margin-left: auto; margin-right: auto; }
.lost-hz { margin: 0; font: 400 160px/1 var(--hz); color: var(--seal-text); }

/* ── Arrival ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .mast h1, .mast-lead, .post-head h1, .post-lead, .byline { animation: rise .9s var(--ease) both; }
  .mast-lead, .post-lead { animation-delay: .08s; }
  .byline { animation-delay: .16s; }
  .ph-pic, .nums { animation: fade 1.2s ease both .15s; }
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

@media print {
  .bar, .progress, .toc, .toc-m, .side, .cta, .foot, body::before { display: none !important; }
  .pick, .answer, .picks { box-shadow: none; break-inside: avoid; }
}

/* ── Feedback (owner, 2026-11-07): the website's button and dialog
   (apps/web/public/assets/site.css), in the Journal's tokens. Bottom right:
   the site keeps the right for its cookie question, the Journal has none, and
   on the left the button sat on the table of contents. Ink on paper, so it
   never competes with the seal red. */
.fb-open {
  position: fixed; right: 18px; bottom: 18px; z-index: 69;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--fg); color: var(--paper); font: 600 13.5px/1 var(--sans);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .45);
}
.fb-open:hover { background: #000; }
.fb-open[hidden] { display: none; }
.fb-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--hair);
  border-radius: 16px; background: var(--paper-card); color: var(--fg); font-family: var(--sans);
}
.fb-dialog.wide { width: min(980px, calc(100vw - 32px)); }
.fb-dialog::backdrop { background: rgba(20, 18, 14, .45); }
#feedback-body { display: grid; gap: 12px; padding: 22px; font-size: 14.5px; line-height: 1.5; }
#feedback-body h2 { margin: 0; font: 500 22px/1.25 var(--serif); }
#feedback-body .fine { margin: 0; color: var(--muted); font-size: 13.5px; }
.fb-label { font-size: 13.5px; font-weight: 600; }
#fb-msg {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--paper); color: var(--fg); resize: vertical;
}
#fb-msg:focus { outline: 2px solid var(--seal-soft); border-color: var(--seal); }
.fb-shot { display: flex; gap: 10px; align-items: center; }
.fb-thumb { padding: 0; border: 1px solid var(--hair); border-radius: 8px; background: none; cursor: pointer; flex: none; }
.fb-thumb img { display: block; width: 96px; height: auto; border-radius: 7px; }
.fb-row { display: flex; gap: 8px; justify-content: flex-end; }
.fb-paper { max-height: 70vh; overflow: auto; border: 1px solid var(--hair); border-radius: 10px; }
.fb-paper canvas { display: block; width: 100%; cursor: crosshair; touch-action: none; }
#feedback-body .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--hair); background: var(--paper-card); color: var(--fg); font: 600 13.5px/1 var(--sans); cursor: pointer; }
#feedback-body .btn-primary { background: var(--seal); border-color: var(--seal); color: #fff; }
#feedback-body .btn-primary:hover { background: var(--seal-press); }
@media print { .fb-open, .fb-dialog { display: none !important; } }