:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #5c5c5c;
  --ink-3: #8a8a8a;
  --rule: #d9d9d9;
  --edge: #a9a9a9;
  --ground: #f0f0f0;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111111; --ink: #f2f2f2; --ink-2: #a3a3a3; --ink-3: #7a7a7a; --rule: #2c2c2c; --edge: #555555; --ground: #1d1d1d;
  }
}
:root[data-theme="dark"] {
  --paper: #111111; --ink: #f2f2f2; --ink-2: #a3a3a3; --ink-3: #7a7a7a; --rule: #2c2c2c; --edge: #555555; --ground: #1d1d1d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:is(a, button, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
svg { display: block; }

/* ================= the pot: the original drawing ================= */
.pot { position: relative; }
.pot > img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pot > img, :root:not([data-theme="light"]) .mark-pot { filter: invert(1); }
}
:root[data-theme="dark"] .pot > img, :root[data-theme="dark"] .mark-pot { filter: invert(1); }

/* ================= screen 1 ================= */
/* Sizes are the original mockup's, measured at its native 1536 × 1024. */
#ask { position: relative; min-height: 84vh; }
.top { position: fixed; top: 22px; left: 18px; z-index: 60; }
.top .mark-pot { display: none; }  /* at the top: text only, never the icon (owner, 25 Aug) */
body.scrolled .top .mark-pot { display: block; }  /* scrolled: the icon replaces the text */
body.scrolled .top .mark span { display: none; }  /* scrolled: the icon replaces the text (owner, 25 Aug; restored 29 Aug) */
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 13px/1 var(--sans); letter-spacing: .04em; }
.mark-pot { display: block; width: 30px; height: auto; }
.hero { min-height: 84vh; width: 100%; display: grid; grid-template-columns: minmax(0, 100%); place-content: center; justify-items: center; text-align: center; padding: 0 24px 6vh; }  /* the box sits just above the middle of the screen */
.hero .pot { width: 57px; margin-bottom: 28px; }   /* 65 % of the drawing */
.say { margin: 0 0 36px; font-size: 18px; line-height: 1.4; }
.box { width: min(444px, 100%); margin: 0 0 64px; }  /* more air under the box (owner, 25 Aug) */
.box input {
  width: 100%; height: 49px; padding: 0 17px;
  color: var(--ink); background: transparent;
  border: 1px solid var(--edge); border-radius: 7px;
  font: 400 17px/1 var(--sans);
}
.box input::placeholder { color: var(--ink-3); }
.box input:read-only { color: var(--ink-2); cursor: default; }
.brew {
  height: 34px; min-width: 92px; padding: 0 16px; margin: 0; background: #0f5e96;  /* the dark blue, same as the favicon and the M (owner, 29 Aug 2026) */
  border: 1.5px solid #0f5e96; border-radius: 7px; color: #fff;
  font: 500 15px/1 var(--sans);
  transition: background 300ms, color 300ms;
}
/* no hover colour (owner, 29 Aug 2026): the button is the dark blue at rest */
/* The pressed button holds its dark blue; the repeating dots alone say it is working (owner, 29 Aug 2026). */
.brew.in { background: #0f5e96; border-color: #0f5e96; color: var(--paper); cursor: default; min-width: 122px; text-align: left; }  /* room for "Brewing..." so the button does not twitch */
.tag { margin: 0; font-size: 14px; line-height: 1.55; }
/* Error line under the tagline; "Brewing…" itself shows inside the box. */
.note { margin: 18px 0 0; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.note:empty { display: none; }

/* ================= screen 2 ================= */
#results { display: none; font: 400 16px/1.5 var(--body); }
#results.on { display: block; }
.col { width: 55%; margin: 0 auto; padding: 72px 0 96px; }  /* 55 of the screen (owner, 29 Aug 2026; was 50, then 60) */
.asked { margin: 0 0 6px; font: italic 20px/1.3 var(--display); color: var(--ink-2); }
.asked b { font-weight: 400; color: var(--ink); }
#results .asked { margin: 0 0 30px; font: 400 13px/1.55 var(--sans); letter-spacing: 0; }
#results .asked .asked-label { display: block; margin-bottom: 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
#results .asked .asked-query { display: block; margin: 0; font: 500 clamp(14.4px, 1.28vw, 17.6px)/1.35 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; color: var(--ink); }
#results .asked .asked-query::first-letter { text-transform: uppercase; }
.count-top { display: none; }  /* Hide perspective ranges without changing result counts or pagination. */
.count-top:empty { display: none; }

.card { display: grid; grid-template-columns: 160px 1fr; gap: 36px; padding: 48px 0; border-top: 1px solid var(--rule); align-items: start; }
.card.is-arriving { animation: arrive .5s ease-out both; }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.card > .figure { position: static; }
.photo { background: var(--ground); width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.photo.has-image { background-image: none; } /* Never show the coffee-cup fallback behind a real image, including transparent PNGs. */
.photo svg { width: 100%; height: 100%; }
.photo .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.photo .fill { fill: var(--ink); }
.gone { margin: 10px 0 0; font: italic 15px/1.4 var(--display); color: var(--ink-2); }

.info { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.info .meet { margin: 0 0 6px; font: 400 14px/1.4 var(--mono); color: var(--ink-2); }
.info h2 { margin: 0; font: 400 clamp(34px, 3.2vw, 46px)/1.02 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.reviewed-by { margin: 8px 0 0; font: 400 13px/1.45 var(--mono); letter-spacing: .06em; color: var(--ink-2); }
.links { margin: 10px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
.links:empty { display: none; }
.links a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.links a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.info .date { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 0; }
.info .date .title { font: italic 17px/1.4 var(--display); color: var(--ink); }
.info .date .when { font: 400 14px/1.4 var(--mono); color: var(--ink-2); }
.quotes { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 0; padding: 0; }
/* The quote is the page. 34px at desktop; change the middle value to resize. */
.quotes blockquote { margin: 0; font: italic 34px/1.3 var(--display); letter-spacing: -.005em; }
.info .read { align-self: flex-start; font: 500 16px/1.3 var(--body); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.info .read:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px 0 0; border-top: 1px solid var(--rule); font: 400 15px/1 var(--body); }
.pager[hidden] { display: none; }
.pager button { padding: 6px 0; border-bottom: 1px solid transparent; }
.pager button:hover { border-bottom-color: var(--ink); }
.pager button:disabled { cursor: wait; color: var(--ink-3); }
.pager #next, .pager #pgNext { justify-self: end; }
.pager #prev { justify-self: start; }  /* sized to its words, so the hover underline covers the words alone (owner, 29 Aug 2026) */
.pager .count { margin: 0; color: var(--ink-2); }

.empty { margin: 48px 0; font: italic 20px/1.4 var(--display); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card.is-arriving { animation: none; }
}
@media (max-width: 960px) { .col { width: 84%; } }
@media (max-width: 560px) {
  .top { top: 20px; left: 20px; }
  .hero .pot { width: 72px; }
  .say, .tag, .note, .box input { font-size: 15px; }
  .brew { font-size: 13px; }
  .hero { padding: 0 20px 10vh; }
  .say { margin-bottom: 28px; }
  .box { margin-bottom: 36px; }
  .col { width: 88%; padding-top: 56px; }
  .card { gap: 22px; padding: 36px 0; }
  .info h2 { font-size: 30px; }
  .links { font-size: 16px; }
  .pager { font-size: 14px; }
  .card { grid-template-columns: 1fr; }
  .card > .figure { position: static; width: 50%; }
  .quotes blockquote { font-size: 26px; }
}

/* ================= /log — what people ask ================= */
.log { width: min(1100px, 82%); margin: 0 auto; padding: 64px 0 96px; font: 400 15px/1.5 var(--sans); }
.log h1 { margin: 0 0 6px; font: 400 34px/1.1 var(--display); }
.log .sub { margin: 0 0 40px; color: var(--ink-2); }
.log h2 { margin: 40px 0 12px; font: 400 22px/1.2 var(--display); }
.log .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin: 0; }
.log .stats div { border-top: 1px solid var(--rule); padding-top: 10px; }
.log .stats dt { color: var(--ink-2); font-size: 14px; }
.log .stats dd { margin: 2px 0 0; font: 400 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.log table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log th { text-align: left; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding: 0 10px 8px 0; }
.log td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.log td.n, .log th.n { text-align: right; padding-right: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log .wrap { overflow-x: auto; }
@media (max-width: 960px) { .log { width: 84%; } }
.log td.n, .log th.n { padding-left: 22px; }

/* ================= /about ================= */
.about { width: 50%; margin: 0 auto; padding: 40px 0 96px; font: 400 16px/1.6 var(--body); color: var(--ink); }
.about h1 { margin: 0 0 10px; font: 400 34px/1.1 var(--display); }
.about .lede { margin: 0 0 28px; font: italic 22px/1.35 var(--display); color: var(--ink); }
.about h2 { margin: 28px 0 12px; font: 400 22px/1.2 var(--display); }
.about p { margin: 0 0 14px; }
.about ol, .about ul { margin: 0 0 14px; padding-left: 22px; }
.about li { margin: 0 0 8px; }
.about li b { font-weight: 500; }
.about .mono { font: 400 14px/1 var(--mono); color: var(--ink); }
.about .brews { list-style: none; padding: 0; }
.about .brews li { padding: 10px 0; border-top: 1px solid var(--rule); }
.about .brews li:last-child { border-bottom: 1px solid var(--rule); }
.about .brews a { font: italic 19px/1.3 var(--display); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.about .brews a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.about .end { margin: 56px 0 12px; font: 400 17px/1.55 var(--sans); }
.about .try { display: inline-block; font: 500 16px/1.3 var(--body); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.about .try:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
@media (max-width: 960px) { .about { width: 84%; } }
@media (max-width: 560px) { .about { padding-top: 96px; } }

/* /about — comparison table */
.about .wrap { overflow-x: auto; margin: 0 0 14px; }
.about table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.about thead th { text-align: left; font: 400 19px/1.2 var(--display); border-bottom: 1px solid var(--ink); padding: 0 14px 10px 0; }
.about thead th:last-child { font-style: italic; }
.about tbody th { text-align: left; font-weight: 500; color: var(--ink); padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.about td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.about td:last-child, .about tbody th:last-child { padding-right: 0; }
@media (max-width: 560px) { .about table { font-size: 14px; min-width: 560px; } }

/* photos alternate: left, right, left… */
.card.side-right { grid-template-columns: 1fr 160px; }
.card.side-right > .figure { order: 2; }
.card.side-right > .info { order: 1; }
@media (max-width: 560px) {
  .card.side-right { grid-template-columns: 1fr; }
  .card.side-right > .figure { order: 0; }
}

/* ================= /about laid out as a brew ================= */
.brew-page { font: 400 16px/1.5 var(--body); }
.brew-page .col { padding-top: 120px; }
.brew-page .photo.pot-box { display: grid; place-items: center; }
.brew-page .photo .pot-img { width: 44%; height: auto; filter: none; }
.brew-page .read.none { color: var(--ink-3); border-bottom-color: transparent; }
.brew-page .words { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); font: 400 16px/1.6 var(--body); }
.brew-page .words h2 { margin: 44px 0 12px; font: 400 22px/1.2 var(--display); }
.brew-page .words h2:first-child { margin-top: 0; }
.brew-page .words p { margin: 0 0 14px; }
.brew-page .words ol, .brew-page .words ul { margin: 0 0 14px; padding-left: 22px; }
.brew-page .words li { margin: 0 0 8px; }
.brew-page .words .mono { font: 400 14px/1 var(--mono); color: var(--ink-2); }
.brew-page .words .brews { list-style: none; padding: 0; }
.brew-page .words .brews li { padding: 10px 0; border-top: 1px solid var(--rule); }
.brew-page .words .brews li:last-child { border-bottom: 1px solid var(--rule); }
.brew-page .words .brews a { font: italic 19px/1.3 var(--display); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.brew-page .words .brews a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.brew-page .words .end { margin: 56px 0 12px; font: 400 17px/1.55 var(--sans); }
.brew-page .words .try { display: inline; font: 500 16px/1.3 var(--body); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.brew-page .words .try:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brew-page .pot-img { filter: invert(1); } }
:root[data-theme="dark"] .brew-page .pot-img { filter: invert(1); }
@media (max-width: 560px) { .brew-page .col { padding-top: 96px; } }
.log h3 { margin: 28px 0 10px; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.log .hint { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.log .stats + .wrap, .log .stats + .hint { margin-top: 24px; }
.log .alerts { list-style: none; margin: 0 0 8px; padding: 0; }
.log .alerts li { padding: 10px 14px; margin: 0 0 8px; border: 1px solid var(--ink); border-radius: 7px; font-weight: 500; }
.log .alerts li.ok { border-color: var(--rule); color: var(--ink-2); font-weight: 400; }

/* ================= tabs: writers / videos ================= */
.tabs { display: flex; gap: 28px; margin: 4px 0 26px; font: 400 19px/1.3 var(--sans); }
.tabs[hidden] { display: none; }
.tab { color: var(--ink-2); padding: 0 0 4px; border-bottom: 1.5px solid var(--ink-2); }
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--ink); }
#results.videos #cards, #results.videos #countTop, #results.videos #pager { display: none; }
#results:not(.videos) #videos { display: none; }
.card.video .photo img { object-position: center; }  /* video stills sit in the same frame as a writer's photograph */
@media (max-width: 560px) { .card.video > .figure { width: 100%; } }

/* ================= About link, brew pages, the brewing list ================= */
.about-link { position: absolute; top: 34px; right: 37px; font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.about-link:hover { color: var(--ink-2); }
.page-col { padding-top: 120px; }
.page-title { margin: 0 0 28px; font: 400 14px/1.4 var(--mono); color: var(--ink-2); }
.pager.page-links { display: flex; gap: 28px; flex-wrap: wrap; }
.pager.page-links a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.pager.page-links a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.brewing { padding: 24px 0 96px; }
.brewing .col { padding: 0; }
.brewing h2 { margin: 0 0 14px; font: 400 22px/1.2 var(--display); }
.brewing ul { list-style: none; margin: 0; padding: 0; }
.brewing li { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--rule); }
.brewing li:last-child { border-bottom: 1px solid var(--rule); }
.brewing a { font: italic 19px/1.3 var(--display); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.brewing a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.brewing .who { font: 400 13px/1.5 var(--mono); color: var(--ink-2); align-self: center; }
#results.on + .brewing { padding-top: 0; }
@media (max-width: 560px) { .about-link { top: 27px; right: 20px; } .page-col { padding-top: 96px; } .brewing li { flex-direction: column; gap: 4px; } }
.end { margin: 40px 0 8px; font: italic 20px/1.4 var(--display); color: var(--ink-2); }
.end .again { font: inherit; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.end .again:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.page-note { margin: 28px 0 0; font: 400 13px/1.5 var(--mono); color: var(--ink-3); max-width: 60ch; }

/* Reading pages (About, /brew/…): the header is a white bar that stays at the top while you read. */
body.reading .top { position: sticky; top: 0; left: 0; width: 100%; margin: 0; padding: 18px 37px; background: var(--paper); border-bottom: 1px solid var(--rule); z-index: 5; box-sizing: border-box; }
body.reading .top .about-link { top: 26px; right: 37px; }
body.reading .page-col { padding-top: 40px; }
@media (max-width: 560px) { body.reading .top { padding: 20px; } body.reading .top .about-link { top: 27px; right: 20px; } body.reading .about, body.reading .page-col { padding-top: 32px; } }
.say .caret { display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: var(--ink); vertical-align: -0.15em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .say .caret { display: none; } }
.actions { display: flex; align-items: center; justify-content: center; gap: 16px; }  /* margin lives ONLY in the canonical hero block below */
.stop { font: 500 14px/1 var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.stop:hover { color: var(--ink); }
.stop[hidden] { display: none; }

/* ================= ChatGPT vs Moka Pot ================= */
.compare-col { width: min(1180px, 86%); margin: 0 auto; padding: 40px 0 96px; }
.compare-head h1 { margin: 0 0 10px; font: 400 34px/1.15 var(--display); text-wrap: balance; }
.compare-head .asked { margin: 0 0 6px; }
.compare-head .asked a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.compare-head .intro { margin: 0 0 40px; max-width: 62ch; font: italic 19px/1.45 var(--display); color: var(--ink); }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; align-items: start; }
.compare h2.side { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font: 700 26px/1.2 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.gpt { padding: 22px 24px; border: 1px solid var(--rule); border-radius: 7px; background: var(--ground); font: 400 16px/1.6 var(--body); color: var(--ink); }
.gpt p { margin: 0 0 12px; } .gpt ul { margin: 0 0 12px; padding-left: 20px; } .gpt li { margin: 0 0 6px; }
.gpt .meta { margin: 16px 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.compare .card { grid-template-columns: 120px 1fr; gap: 22px; padding: 26px 0; }
.compare .card.side-right { grid-template-columns: 1fr 120px; }
.compare .card:first-child { border-top: 0; padding-top: 0; }
.compare .info h2 { font-size: 30px; }
.compare .quotes blockquote { font-size: 24px; }
.compare .pager { margin-top: 8px; }
.compare-list { padding-top: 0; }
@media (max-width: 960px) { .compare { grid-template-columns: 1fr; gap: 40px; } .compare .card, .compare .card.side-right { grid-template-columns: 1fr; } }
.compare-form label { display: block; margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.compare-form input, .compare-form textarea, .compare-form select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 7px; background: transparent; color: var(--ink); font: 400 14px/1.5 var(--sans); }
.compare-form button { margin: 4px 0 10px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 7px; font: 500 14px/1 var(--sans); }
.compare-form button:hover { background: var(--ink); color: var(--paper); }
.what { margin: -8px 0 18px; font: italic 15px/1.4 var(--display); color: var(--ink-2); }
.others { margin: 22px 0 0; font: 400 17px/1.4 var(--display); font-style: italic; }
.others a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.others a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.others[hidden] { display: none; }
@media (max-width: 560px) { .tabs { font-size: 17px; gap: 22px; } }
.note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.note a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.page-question { margin: 0 0 8px; font: 400 34px/1.15 var(--display); text-wrap: balance; }
.about .pairs.five th, .about .pairs.five td { font-size: 14px; padding: 10px 10px 10px 0; }
.about .pairs.five thead th { font-size: 17px; }
@media (max-width: 960px) { .about .pairs.five { min-width: 760px; } }
.about .small { font-size: 13px; color: var(--ink-2); margin: -4px 0 20px; }
.ask-inline { margin: 8px 0 36px; }
.ask-inline label { display: block; margin: 0 0 8px; font: italic 17px/1.3 var(--display); }
.ask-row { display: flex; gap: 10px; align-items: center; }
.ask-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 7px; background: transparent; color: var(--ink); font: 400 16px/1 var(--sans); }
.ask-row input::placeholder { color: var(--ink-3); }
.ask-row .brew { margin: 0; height: 44px; }
.card.small-still .photo { aspect-ratio: 16 / 9; }
.card.small-still .photo img { image-rendering: auto; }

/* hand-drawn marks on the comparison pages */
.circled { position: relative; display: inline; padding: 0 .12em; }
.circled .ring { position: absolute; left: -0.45em; top: -0.4em; width: calc(100% + .9em); height: calc(100% + .8em); pointer-events: none; overflow: visible; }
.stance { display: inline-block; vertical-align: middle; margin-left: 10px; line-height: 0; }
.stance .mark { width: 30px; height: 30px; }
.legend { margin: -6px 0 16px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); }
.legend .stance { margin: 0 2px 0 0; } .legend .mark { width: 22px; height: 22px; }
.compare .info h2 .stance .mark { width: 28px; height: 28px; }
.compare .head-mark { display: inline-block; line-height: 0; } .compare .head-mark .mark { width: 34px; height: 34px; }
.compare .strap { margin: 0 0 16px; font: italic 19px/1.3 var(--display); color: var(--ink); }
.compare .legend { margin-top: -4px; }
.compare-head .verdict { margin: 0 0 10px; font: 400 20px/1.45 var(--sans); color: var(--ink); max-width: 70ch; }
.compare-head .verdict .hedge { color: #e8731a; font-style: italic; }
.log .mark-btn { padding: 5px 10px; border: 1px solid var(--ink); border-radius: 7px; font: 500 12px/1 var(--sans); white-space: nowrap; }
.log .mark-btn:hover { background: var(--ink); color: var(--paper); }

/* ================= the evidence on the front page ================= */
.evidence { padding: 0; }
.evidence .col { padding: 0; }
.evidence-head { margin: 0 0 18px; font: 700 22px/1.35 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.evidence-q { margin: 0 0 22px; font: 400 30px/1.15 var(--display); text-wrap: balance; }
.evidence-q a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.evidence .side-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 17px/1.2 var(--sans); }
.evidence .side-label .head-mark .mark { width: 24px; height: 24px; }
.evidence .gpt-text { margin: 0; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 7px; background: var(--ground); font: 400 15px/1.55 var(--body); }
.evidence .people { list-style: none; margin: 0; padding: 0; }
.evidence .people li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--rule); font: 400 15px/1.4 var(--body); }
.evidence .people li:last-child { border-bottom: 1px solid var(--rule); }
.evidence .people .who { font: 400 19px/1.2 var(--display); }
.evidence .people .what { flex-basis: 100%; font: italic 14px/1.35 var(--display); color: var(--ink-2); }
.evidence .people .stance .mark { width: 22px; height: 22px; }
.evidence .side-note { margin: 10px 0 0; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.evidence-more { margin: 22px 0 0; display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 760px) { .evidence-grid { grid-template-columns: 1fr; gap: 26px; } .evidence-head { font-size: 19px; } }
.circled.green .ring path { stroke: #2e9e4f; }
.circled.block { display: inline; }
.evidence-title { margin: 0 0 6px; font: 400 30px/1.15 var(--display); }
.evidence .example { padding: 26px 0 8px; border-top: 1px solid var(--rule); margin-top: 18px; }
.evidence .example:first-of-type { border-top: 0; margin-top: 6px; }
.evidence .example-n { margin: 0 0 4px; font: 700 15px/1 var(--sans); color: var(--ink-2); letter-spacing: .04em; }
.evidence .evidence-q { font-size: 26px; margin: 0 0 16px; }
.evidence .story { margin: 0 0 8px; font: italic 21px/1.35 var(--display); }
.evidence .story .circled.green { display: inline; }
.evidence .story-by { margin: 0 0 12px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.evidence .people-line { margin: 0; font: 400 15px/1.7 var(--body); }
.evidence .people-line .stance .mark { width: 20px; height: 20px; margin-left: 4px; }
.evidence .side-note a { color: var(--ink); }
.evidence .col { padding: 30px 0 30px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.evidence .evidence-head { margin: 0 0 14px; font: 700 18px/1.45 var(--sans); }
.evidence-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evidence-links a { font: italic 19px/1.35 var(--display); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.evidence-links a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.evidence-links .n { font: 700 14px/1 var(--sans); font-style: normal; letter-spacing: .04em; margin-right: 6px; }
.brewing { padding-top: 30px; }

/* comparison page: question centred, two columns with a rule between */
.compare-head.centred { text-align: center; margin: 0 auto 34px; max-width: 76ch; }
.compare-head.centred h1 { margin: 6px 0 12px; font: 400 38px/1.15 var(--display); text-wrap: balance; }
.compare-head.centred .asked { margin: 0; display: inline-block; }
.compare-head.centred .same { margin: 0; font: italic 19px/1.45 var(--display); color: var(--ink); }
.compare.split { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.25fr); gap: 0 40px; }
.compare.split::before { content: ""; grid-column: 2; align-self: stretch; width: 1px; background: var(--rule); }
.compare.split .gpt-side { grid-column: 1; }
.compare.split .moka-side { grid-column: 3; }
.compare .strap .hedge { color: #e8731a; }
@media (max-width: 960px) { .compare.split { grid-template-columns: 1fr; gap: 40px; } .compare.split::before { display: none; } .compare.split .gpt-side, .compare.split .moka-side { grid-column: auto; } }
.evidence .col { text-align: center; }
.evidence-links { align-items: center; }
.evidence-links li { display: flex; align-items: baseline; gap: 8px; }
.evidence-links .n { margin-right: 0; }
.difference { margin: 30px auto 0; padding: 22px 0 0; border-top: 1px solid var(--rule); max-width: 64ch; }
.difference h2 { margin: 0 0 10px; font: 700 18px/1.3 var(--sans); }
.difference .story { margin: 0; font: 400 20px/1.5 var(--display); color: var(--ink); }
.difference .story-note { margin: 10px 0 0; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
/* highlighter marks: wrap like text, never overflow */
mark.hl { color: inherit; background: transparent; padding: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl.orange { background: linear-gradient(transparent 58%, rgba(232,115,26,.32) 58%); text-decoration: underline; text-decoration-color: #e8731a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
mark.hl.green { background: linear-gradient(transparent 58%, rgba(46,158,79,.28) 58%); text-decoration: underline; text-decoration-color: #2e9e4f; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.compare .quotes blockquote mark.hl.green { text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
/* Freehand underline, no colour wash (owner, 22 Aug, late): the words stay as readable as the rest. */
mark.hl, mark.hl.orange, mark.hl.green, .compare .quotes blockquote mark.hl.green { background-color: transparent; text-decoration: none; padding-bottom: .14em; background-repeat: repeat-x; background-position: 0 100%; background-size: 120px 8px; }
mark.hl.orange { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 4.6 C 18 2.4, 34 6.1, 52 4 S 86 2.2, 104 4.7 S 114 5.6, 119 4.2' fill='none' stroke='%23e8731a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
mark.hl.green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 4.2 C 16 6, 36 2.3, 54 4.4 S 84 6, 102 3.6 S 114 2.6, 119 4.4' fill='none' stroke='%232e9e4f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Highlighter marks (owner, 22 Aug, late): a flat freehand band, no gradient, painted on every line the words cross.
   yellow = the writer's own opinion, the human voice; grey = the sentence of ChatGPT's we point at. */
mark.hl, mark.hl.yellow, mark.hl.grey, mark.hl.orange, mark.hl.green, .compare .quotes blockquote mark.hl.green {
  color: inherit; text-decoration: none; padding: .04em .18em; margin: 0 -.08em; border-radius: 0;
  background-color: transparent; background-repeat: repeat-x; background-position: 0 50%; background-size: auto 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.hl.yellow, mark.hl.green, .compare .quotes blockquote mark.hl.green {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C 30 5, 70 9, 110 6 S 190 9, 240 7 L 240 33 C 200 35, 160 31, 120 34 S 40 31, 0 33 Z' fill='%23ffe94a' fill-opacity='.55'/%3E%3C/svg%3E");
}
mark.hl.grey, mark.hl.orange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C 40 6, 80 10, 120 7 S 200 10, 240 8 L 240 32 C 200 34, 150 30, 110 33 S 40 30, 0 32 Z' fill='%23b9b9b9' fill-opacity='.45'/%3E%3C/svg%3E");
}
/* About, on a phone: the comparison table stacks — label, then each column with its own small heading —
   instead of a third column hidden off the right edge (preview check, 22 Aug, late). */
@media (max-width: 560px) {
  .about .pairs:not(.five) { display: block; width: 100%; }
  .about .pairs:not(.five) thead { display: none; }
  .about .pairs:not(.five) tbody, .about .pairs:not(.five) tr { display: block; }
  .about .pairs:not(.five) tr { padding: 12px 0; border-bottom: 1px solid var(--rule, #ddd); }
  .about .pairs:not(.five) th, .about .pairs:not(.five) td { display: block; width: auto; padding: 2px 0; border: 0; font-size: 15px; line-height: 1.45; }
  .about .pairs:not(.five) th[scope="row"] { font-weight: 600; margin-bottom: 2px; }
  .about .pairs:not(.five) td::before { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .04em; color: #666; margin-top: 8px; }
  .about .pairs:not(.five) td:nth-child(2)::before { content: "ChatGPT / Claude"; }
  .about .pairs:not(.five) td:nth-child(3)::before { content: "Moka Pot"; }
}
@media (max-width: 560px) {
  .about .wrap { overflow: visible; }
  .about .pairs:not(.five), .about .pairs:not(.five) tbody, .about .pairs:not(.five) tr, .about .pairs:not(.five) th, .about .pairs:not(.five) td { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; box-sizing: border-box; }
}
/* The first screen is empty but for the pot, the line, the box and Brew; the rest arrives once the line has typed itself (owner, 22 Aug, late). */
.evidence, .brewing, .hero .what, .hero .tag { transition: opacity .8s ease; }
body.settling .evidence, body.settling .brewing, body.settling .hero .what, body.settling .hero .tag { opacity: 0; visibility: hidden; }
/* Categories (owner, 22 Aug, late): a row of links with counts on the home page, a page each. */
.categories { padding: 8px 0 48px; }
.categories .col { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.categories h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #555; margin: 0 0 14px; }
.categories .cats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; font: 400 16px/1.4 var(--sans); }
.categories .cats a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.categories .cats a .n { font: 400 12px var(--mono); color: #777; margin-left: 5px; }
.filed { font: 400 13px/1.4 var(--mono); color: #555; margin: -8px 0 22px; }
.filed a { color: var(--ink); }
/* One treatment on both sides (owner, 22 Aug, late): ChatGPT's sentence gets the same yellow as the writers' words. */
mark.hl.grey, mark.hl.orange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C 30 5, 70 9, 110 6 S 190 9, 240 7 L 240 33 C 200 35, 160 31, 120 34 S 40 31, 0 33 Z' fill='%23ffe94a' fill-opacity='.55'/%3E%3C/svg%3E");
}
/* The examples under "ChatGPT might do a better job": heading centred, the numbered questions left-aligned (owner, 22 Aug, late). */
.evidence-links { align-items: stretch; text-align: left; }
.evidence-links li { justify-content: flex-start; }
.evidence-links .n { min-width: 2.4em; text-align: right; flex: 0 0 auto; }
/* Every question, not just the latest (owner, 22 Aug, late): a link under the home list, and /questions with a pager. */
.brewing .all { margin: 14px 0 0; font: 400 15px/1.5 var(--body); }
.brewing .all a { color: var(--ink); }
.pager-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 0; font: 400 15px/1.5 var(--body); }
.pager-line a { color: var(--ink); }
.pager-line .where { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
/* About: the table now follows The mission and How it works; give it room (owner, 22 Aug, night). */
.about .wrap { margin-top: 34px; }
/* The header band (owner, 22 Aug, night): light grey, stays put when you scroll, About inside it on the right.
   The pot hangs half below the band's lower edge; the word MOKAPOT sits inside the band. */
.top, body.reading .top {
  position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 0 37px;
  height: 56px; display: flex; align-items: center; background: #eaeaea; border-bottom: 0; z-index: 20;  /* the Farfaraway grey (owner, 25 Aug) */
}
.top .mark { gap: 12px; align-items: center; }
.top .mark-pot, body.reading .top .mark-pot { width: 46px; height: 64px; position: relative; top: 22px; }
.top .about-link, body.reading .top .about-link { position: absolute; top: 50%; right: 37px; transform: translateY(-50%); margin: 0; }
.hero { min-height: calc(84vh - 56px); }
@media (max-width: 560px) {
  .top, body.reading .top { padding: 0 20px; height: 50px; }
  .top .mark-pot, body.reading .top .mark-pot { width: 38px; height: 53px; top: 18px; }
  .top .about-link, body.reading .top .about-link { right: 20px; top: 50%; }
  .hero { min-height: calc(84vh - 50px); }
}
/* Always white (owner, 22 Aug, night): no automatic dark theme. The light palette wins whatever the device says. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --paper: #ffffff; --ink: #111111; --ink-2: #5c5c5c; --ink-3: #8a8a8a; --rule: #d9d9d9; --edge: #a9a9a9; --ground: #f0f0f0;
}
html, body { background: #ffffff; color-scheme: light only; }
.pot > img, .mark-pot, .brew-page .pot-img { filter: none !important; }
/* The word sits dead centre in the band (owner, 29 Aug: "you have to center it"). */
.top .mark span { position: relative; top: 0; }
@media (max-width: 560px) { .top .mark span { top: 0; } }
/* The top-left pot at 80% of before (owner, 22 Aug, night); still hanging half below the band. */
.top .mark-pot, body.reading .top .mark-pot { width: 37px; height: 51px; top: 16px; }
@media (max-width: 560px) { .top .mark-pot, body.reading .top .mark-pot { width: 30px; height: 42px; top: 13px; } }
/* The examples come straight after the tagline (owner, 22 Aug, night): no empty stretch; three comparisons visible on the first screen. */
.hero, body .hero { min-height: 0; padding: 56px 24px 72px; }  /* more air after the tagline, separator pushed down (owner, 25 Aug) */
/* replaced by the 29 Aug rule at the end of this file */
@media (max-width: 560px) { .hero, body .hero { min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); padding: 36px 20px 26px; } }  /* the first mobile screen belongs to the hero; Why not ChatGPT waits below (owner, 25 Aug) */
#ask { min-height: 0; }
/* Initials where there is no photograph (speed plan item 1, 22 Aug night): the writer's initials in the photo frame; no cup, no line. */
.photo .initials { width: 100%; height: 100%; display: grid; place-items: center; background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font: 400 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: .02em; }
.compare .photo .initials { font-size: 40px; }
/* Skeletons: five grey shapes the moment Brew is pressed; each is replaced by a writer as they arrive. */
.card.skeleton { pointer-events: none; animation: none; opacity: .7; }  /* still, not vibrating (owner, 30 Aug 2026) */
.card.skeleton .sk { background: var(--ground); border-radius: 2px; }
.card.skeleton .sk-name { height: 34px; width: 60%; margin-bottom: 14px; }
.card.skeleton .sk-links { height: 14px; width: 30%; margin-bottom: 22px; }
.card.skeleton .sk-title { height: 16px; width: 75%; }
.card.skeleton .sk-quote { height: 30px; width: 100%; margin-bottom: 12px; }
.card.skeleton .sk-quote.short { width: 55%; }
.card.skeleton .sk-read { height: 14px; width: 36%; margin-top: 6px; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .card.skeleton { animation: none; opacity: .7; } }
/* /log §6 — the people ledger: paste a picture address, press Set (owner, 22 Aug night). */
.log .set-picture { display: flex; gap: 6px; align-items: center; }
.log .set-picture input { width: 220px; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--rule); }
.log .set-picture button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--ink); background: transparent; cursor: pointer; }
/* The footer band (owner, 23 Aug): the header's grey, at the very bottom, after a breath of space, so the page looks complete. */
.foot { margin-top: 96px; padding: 0 37px; height: 56px; display: flex; align-items: center; background: #eaeaea; font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink-2); }
body.settling .foot { opacity: 0; visibility: hidden; }
.foot { transition: opacity .8s ease; }
@media (max-width: 560px) { .foot { padding: 0 20px; height: 50px; margin-top: 64px; } }
/* About, readable (owner, 23 Aug): all text black, titles bold, one size up. */
.about, .about p, .about li, .about td, .about th, .about .lede, .about .end, .about .mono, .about .small, .about a, .about .brews a { color: var(--ink); }
.about { font-size: 17px; }
.about h2 { font-weight: 700; }
/* The comparison list (owner, 23 Aug): a plain list — the question, and under it "ChatGPT vs" every name as it is. */
.compare-list li { display: block; }
.compare-list .who { display: block; margin-top: 8px; text-align: left; }
/* Readability (owner, 23 Aug): the big quotes stay italic; every smaller italic goes upright with a little more air, and the small headings get letter-spacing. */
.asked, .gone, .info .date .title, .empty, .about .lede, .about .brews a, .brew-page .words .brews a, .brewing a, .end, .compare-head .intro, .what, .others, .ask-inline label, .compare .strap, .evidence .people .what, .evidence .story, .evidence-links a, .compare-head.centred .same, .about thead th:last-child { font-style: normal; letter-spacing: .015em; }
.about .lede { font-size: 23px; }
.info .date .title { font-size: 18px; }
.brewing a, .evidence-links a, .about .brews a { font-size: 20px; }
.about h2, .brew-page .words h2, .compare-head h1, .log h2 { letter-spacing: .02em; }
.about h2 { font-size: 24px; }
/* The comparison index keeps the site's column: half the width, a quarter each side (owner, 23 Aug). */
.col.compare-col { width: 50%; }
@media (max-width: 960px) { .col.compare-col { width: 84%; } }
@media (max-width: 560px) { .col.compare-col { width: 88%; } }
/* The examples wait a breath after the box has loaded (owner, 23 Aug). */
body.holding .evidence { opacity: 0; visibility: hidden; }
/* The owner's "Search as" row under Brew (owner, 23 Aug): their browser only. */
/* Owner-only country row: pinned LEFT beside the lettering (owner, 25 Aug night), clear of Your brews. */
.top .from-row { position: absolute; left: 170px; top: 50%; transform: translateY(-50%); margin: 0; text-align: left; font: 400 13px/1.6 var(--mono); color: var(--ink-2); }
.from-row button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0 2px; cursor: pointer; border-bottom: 1px solid transparent; }
.from-row button.on { color: var(--ink); border-bottom-color: var(--ink); }
.from-row a { font: inherit; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--ink-2); }
.from-row a:hover { color: var(--ink); border-bottom-color: var(--ink); }
body.settling .from-row, body.settling .asks { opacity: 0; visibility: hidden; }
/* The waiting slot says what it is doing (owner, 23 Aug: "this is stuck"). */
.card.skeleton:first-child .info::before, .card:not(.skeleton) + .card.skeleton .info::before { content: "Looking for a perspective"; display: block; animation: lookdots 1.6s steps(1, end) infinite; margin: 0 0 14px; font: 400 14px/1.4 var(--mono); color: var(--ink-2); }
/* The new hero (owner, 23 Aug): the pot, then "Human perspectives on anything" big — typed like a line being
   written — the box, then a small "Ask as you might ChatGPT", then Brew. */
/* =========================================================================================
   THE HERO, CANONICAL (owner, 25 Aug: "ZERO overriding rules"). Five days of iterated blocks
   collapsed into ONE definition per selector — the exact values the page renders today.
   Never append a new hero block below this; edit THESE rules.
   ========================================================================================= */
/* THE FLOW (owner, 25 Aug): MOKAPOT alone first, a beat of oddness. Then the pot and the H1
   sort of appear, then the box, then the ask line, and Brew closes the flow. */
h1.say { margin: 0 0 32px; font: 700 clamp(30px, 4.2vw, 50px)/1.12 "Instrument Serif Hero", var(--display); letter-spacing: -.012em; max-width: none; white-space: nowrap; animation: appear .5s ease-out .5s both; }
.hero .pot { animation: appear .5s ease-out .5s both; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
#asks li:not(.dealt) { visibility: hidden; }  /* one set of chips, ever (owner, 29 Aug): only deck-dealt chips exist on screen */
@media (max-width: 560px) { h1.say { font-size: 27px; white-space: normal; } }
.hero .box, form.box { margin-bottom: 0; animation: appear .5s ease-out .8s both; }  /* original tightness to the ask line (owner, 25 Aug) */
.ask-line { margin: 12px 0 0; font: 400 15px/1.4 var(--body); color: var(--ink); animation: appear .5s ease-out 1.1s both; }
/* Five pointers under the box (owner, 25 Aug): what can be asked, one per big theme. */
.asks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 620px; animation: appear .5s ease-out 1.1s both; }
.asks .ask-eg { margin: 0; padding: 6px 12px; background: var(--ground); border: 0; border-radius: 15px; font: 400 13px/1 var(--body); color: var(--ink); cursor: pointer; }  /* a shade darker (owner, 29 Aug 2026; was --ink-2) */
.asks .ask-eg:hover { color: var(--ink); background: #e2e2e2; }
.actions { margin: 42px 0 0; animation: appear .5s ease-out 1.4s both; }  /* the breath above Brew, trimmed (owner, 29 Aug 2026; was 48px) */
.tag { margin: 12px 0 0; font-weight: 700; animation: appear .5s ease-out 1.7s both; }
@media (prefers-reduced-motion: reduce) { h1.say, .hero .pot, .hero .box, form.box, .ask-line, .asks, .actions, .tag, .brew.in { animation: none; } }
/* Your brews: a quiet dropdown in the header next to About (owner, 25 Aug night). */
.yours-top { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); }
.yours-top button { font: 500 13px/1 var(--sans); color: var(--ink-2); background: none; border: 0; cursor: pointer; letter-spacing: .04em; }
.yours-top button:hover { color: var(--ink); }
.your-drop { position: absolute; right: 0; top: calc(100% + 12px); margin: 0; padding: 10px 16px; list-style: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; min-width: 260px; max-width: 340px; max-height: 60vh; overflow: auto; z-index: 80; text-align: left; }
.your-drop li { padding: 6px 0; }
.your-drop a { font: 400 14px/1.45 var(--body); color: var(--ink); text-decoration: none; }
.your-drop a:hover { text-decoration: underline; }
.quote-label { margin: 0 0 6px; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.evidence .evidence-head { font-weight: 400; font-size: 16px; }
@media (max-width: 560px) { .evidence .evidence-head { font-size: 15px; } }
.evidence-head strong { font-weight: 700; }
/* The owner's "Search as" row lives in the header, left of About (owner, 23 Aug: it distracted the view below the box). */
/* (the old right-pinned from-row rule lived here; it collided with Your brews — owner, 25 Aug night) */
@media (max-width: 560px) { .top .from-row { left: 120px; font-size: 11px; } }
/* One pot at a time (owner, 23 Aug): the header pot appears only once the hero pot has scrolled away. */
.top .mark-pot { transition: opacity .35s ease; }
body.hero-pot-on .top .mark-pot { opacity: 0; }
/* Theme pages (owner, 23 Aug): the tabs, the plain article rows, the blogger rows. */
.theme-tabs { display: flex; gap: 26px; margin: 26px 0 6px; border-bottom: 1px solid var(--rule); }
.theme-tabs a { font: 500 15px/1 var(--sans); text-decoration: none; color: var(--ink-2); padding: 0 2px 12px; border-bottom: 2px solid transparent; }
.theme-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.t-meta { font: 400 13px/1.5 var(--mono); color: var(--ink-2); margin: 0 0 6px; }
.theme-row { padding: 22px 0; border-top: 1px solid var(--rule); }
.theme-list > :first-child { border-top: 0; }
.t-title { margin: 0 0 8px; font: 400 21px/1.35 var(--display); }
.t-title a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.t-title a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
.theme-carded { padding-top: 22px; border-top: 1px solid var(--rule); }
.theme-carded .card { border-top: 0; padding-top: 10px; }
.writer-row { display: grid; grid-template-columns: 34px 92px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--rule); align-items: start; }
.writer-row .w-rank { font: 400 15px/1 var(--mono); color: var(--ink-2); margin: 6px 0 0; }
.writer-row .w-photo { width: 92px; }
.writer-row .w-photo .initials { font-size: 28px; }
.writer-row h2 { margin: 0 0 4px; font: 400 24px/1.1 var(--display); }
.writer-row .links { margin: 4px 0 0; font-size: 15px; }
.theme-pager { margin-top: 26px; }
@media (max-width: 560px) { .writer-row { grid-template-columns: 22px 72px 1fr; gap: 12px; } }
/* The mark on the quote (the brief + owner's design, 24 Aug): one rough hand-drawn orange line under the
   writer's stance — 4 to 10 of their own words. Not a colour wash, not the neat line links use; ink enough
   to notice at a glance. ChatGPT's grey band stays grey. */
mark.hl.yellow, mark.hl.green, .compare .quotes blockquote mark.hl.green {
  padding: .04em .08em .26em; margin: 0 -.04em;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C14 6.2 25 9.1 40 7.4 C53 5.9 67 8.8 82 7.1 C98 5.5 110 9.2 127 7.5 C144 6.1 156 8.9 174 6.9 C189 5.8 204 8.7 220 7.3 C229 6.7 234 8 238 7.5' fill='none' stroke='%23F87D30' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% .44em;
}
/* The cup lives in the frame itself (owner, 24 Aug: content first, the picture next): it is there the
   instant the card is, the photograph simply covers it when it arrives, and it stays when there is none. */
.photo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M27 60 L32 102 H68 L73 60' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='50' cy='60' rx='23' ry='6' fill='%23111111'/%3E%3Cpath d='M73 66 C92 66 92 92 70 94' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 110 H82' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 82%;
}
/* The Authors tab (owner, 24 Aug): 4-6 lines about the writer, in their own About-page words. */
.writer-row .w-about { margin: 8px 0 2px; font: italic 400 17px/1.5 var(--display); color: var(--ink); max-width: 62ch; }
/* Shelf 2 (owner, 24 Aug): the bigger titles sit under one quiet heading, never hidden, never first. */
.shelf-head { margin: 44px 0 -8px; font: italic 400 19px/1.4 var(--display); color: var(--ink-2); text-align: center; }
/* The three-second shelf (owner, 24 Aug night): related perspectives from the database while the pot digs. */
.related-head { margin: 30px 0 -6px; font: italic 400 17px/1.5 var(--display); color: var(--ink-2); text-align: center; }

/* THE WHITE STRIP (owner, 29 Aug 2026): the perspectives sit on a white column; the flanks go the
   light grey of the house (--ground, the lighter cousin of the top rule) so the eye falls on the words. */
body.reading { background: var(--ground); }
body.reading .page-col, body.reading .about { background: var(--paper); padding-left: 44px; padding-right: 44px; box-sizing: border-box; }
body.scrolled:has(#results.on) { background: var(--ground); }  /* grey only once the reader scrolls down into the perspectives (owner, 29 Aug 2026) */
body:has(#results.on) .col { background: var(--paper); padding-left: 44px; padding-right: 44px; box-sizing: border-box; }

/* THE OPENING SCREEN STAYS ENTIRELY WHITE (owner, 29 Aug 2026): only the results stretch wears the grey flanks. */
body:has(#results.on) #ask { background: var(--paper); }

/* The picture is a door to the article (owner, 29 Aug 2026). */
.photo .photo-door { display: block; height: 100%; line-height: 0; }





/* Why not ChatGPT sits lower on the opening screen, inside its 55 with real side margins (owner, 29 Aug 2026). */
.evidence .col { padding-top: 64px; padding-left: 44px; padding-right: 44px; box-sizing: border-box; }





/* The orange line under "perspectives" in the hero (owner, 30 Aug 2026, mockup N approved): his
   hand-underline in one gesture - the full line, the return merging against it stopping past the
   middle, the third short pass nested into the right end. The emphasis gathers on the right. */
.hl-perspectives { padding: .04em .22em .12em; margin: 0 -.18em; background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% .36em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M4 8.1 C30 7.4 62 7.9 96 7.4 C128 7 160 7.8 192 7.2 C210 6.9 224 7.3 231 7.1 C236 7.1 236 8.3 230 8.6 C214 9.2 192 8.7 168 9.2 C148 9.6 122 9 102 9.5 C97 9.6 94 9.7 93 9.9 C89 10.3 91 11 98 11.1 C118 11.4 140 10.8 162 11.1 C178 11.3 194 11 203 11.2' fill='none' stroke='%23F87D30' stroke-width='3.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M120 7.5 C156 7.3 190 7.2 214 7' fill='none' stroke='%23F87D30' stroke-width='4.9' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M204 8.9 C180 9.2 152 9.2 126 9.4' fill='none' stroke='%23F87D30' stroke-width='4.6' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M132 11.1 C152 11 172 11 190 11.1' fill='none' stroke='%23F87D30' stroke-width='4.3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E"); }

/* The band never leaves (owner, 30 Aug 2026: "the top header should always be there, even when we
   are scrolling"). Fixed instead of sticky - sticky died at its section's edge - and the body
   steps down the band's height so nothing hides beneath it. */
.top, body.reading .top { position: fixed; }
body { padding-top: 56px; }
@media (max-width: 560px) { body { padding-top: 50px; } }

/* Compare pages sit on white (owner, 30 Aug 2026: "the compare pages should have a white
   background"). The grey reading-flanks stay for the perspectives and About; compare is all paper. */
body.reading:has(main.compare-col) { background: var(--paper); }

/* The blue Brew button as a LINK, for the page endings (owner, 30 Aug 2026: the compare and
   question pages "should simply end with the brew button - Brew something new"). */
a.brew-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-bottom: 0; }

/* The waiting line counts its dots, none to three, around and around (owner, 30 Aug 2026). */
@keyframes lookdots {
  0% { content: "Looking for a perspective"; }
  25% { content: "Looking for a perspective."; }
  50% { content: "Looking for a perspective.."; }
  75% { content: "Looking for a perspective..."; }
}
@media (prefers-reduced-motion: reduce) {
  .card.skeleton:first-child .info::before, .card:not(.skeleton) + .card.skeleton .info::before { animation: none; content: "Looking for a perspective…"; }
}

/* The ending's blue button (owner, 31 Aug 2026, mockup A): under the closing line, breathing room above. */
.end-brew { margin: 4px 0 8px; }

/* THE ENDING SITS CENTERED (owner, 31 Aug 2026: "keep it centered") - the closing line and
   the Brew something new button, results column only. */
#cards .end { text-align: center; }
#cards .end-brew { display: block; margin: 4px auto 8px; }

/* Keep the next-page action below the page number; search behaviour is unchanged. */
#pager #next { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0; font-weight: 400; white-space: nowrap; }


/* sandbox AI-summaries evidence, 3 Sep 2026 */
.evidence-proof { max-width: 760px; margin: 24px 0 44px; }
.evidence-proof blockquote { margin: 0 0 26px; font: italic 400 clamp(28px, 3.2vw, 42px)/1.25 var(--display); text-wrap: pretty; }
.evidence-proof .proof-article { margin: 0 0 5px; font: 400 21px/1.35 var(--display); }
.evidence-proof .proof-domain { margin: 0 0 24px; font: 400 17px/1.35 var(--sans); }
.evidence-proof .proof-domain a, .evidence-proof .proof-read { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.evidence-proof p:last-child { margin: 0; }
.evidence-examples { margin: 0 0 18px; font: 500 17px/1.4 var(--sans); }
@media (max-width: 700px) {
  .evidence-proof { margin-bottom: 36px; }
  .evidence-proof blockquote { font-size: 28px; }
}


/* sandbox newspaper evidence, 3 Sep 2026 */
.ai-summary-cutout { margin: 0 0 38px; }
.ai-summary-image { position: relative; width: 100%; max-width: 1166px; margin: 0 auto; line-height: 0; aspect-ratio: 1712 / 1045; overflow: hidden; }
.ai-summary-image img { display: block; width: 100%; height: auto; }
.ai-summary-underline { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1712 / 1152; pointer-events: none; overflow: visible; }
.ai-summary-underline path { fill: none; stroke: #F87D30; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ai-summary-cutout figcaption { margin-top: 18px; text-align: center; }
.ai-summary-read { display: inline-block; color: var(--ink); font: 500 16px/1.4 var(--sans); text-decoration: none; border-bottom: 1px solid var(--ink); }
@media (max-width: 700px) {
  .ai-summary-image { width: calc(100% + 22px); margin-left: -11px; }
  .ai-summary-underline path { stroke-width: 3.2; }
  .ai-summary-cutout figcaption { margin-top: 14px; }
}