/* Public pages: a newspaper page. News serif for reading, mono for data and labels, grain over everything. */
@font-face { font-family: 'Newsreader'; font-weight: 400; font-display: swap; src: url(/vendor/newsreader-400.woff2) format('woff2'), url(/vendor/newsreader-400.woff) format('woff'); }
@font-face { font-family: 'Newsreader'; font-weight: 400; font-style: italic; font-display: swap; src: url(/vendor/newsreader-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-weight: 500; font-display: swap; src: url(/vendor/newsreader-500.woff2) format('woff2'), url(/vendor/newsreader-500.woff) format('woff'); }
@font-face { font-family: 'Newsreader'; font-weight: 600; font-display: swap; src: url(/vendor/newsreader-600.woff2) format('woff2'), url(/vendor/newsreader-600.woff) format('woff'); }
@font-face { font-family: 'Newsreader'; font-weight: 700; font-display: swap; src: url(/vendor/newsreader-700.woff2) format('woff2'), url(/vendor/newsreader-700.woff) format('woff'); }
:root { --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; }
body { font-family: var(--serif); font-size: 17px; }
.sheet {
  max-width: 460px; margin: 0 auto; background: var(--paper); min-height: 100vh; min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 14px calc(var(--bar-h) + 20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
body { background: var(--paper); }
/* No card: the content sits straight on the paper-colored page. */
@media (min-width: 500px) { .sheet { padding-top: 28px; padding-left: 20px; padding-right: 20px; } }

/* ---------- Columns: one on phones, two on wide screens (with a newspaper column rule) ---------- */
.cols, .col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 880px) {
  .sheet.two-col { max-width: 1000px; padding-left: 28px; padding-right: 28px; }
  .two-col .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 0; align-items: stretch; }
  .two-col .col-main { padding-right: 28px; }
  .two-col .col-side { padding-left: 28px; border-left: 1px solid var(--hair); }
  .two-col .col-side > .section-label:first-child { margin-top: 0; }
}
@media (min-width: 1100px) { .two-col .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }

/* ---------- Paper: grain and/or faint graph lines (Settings: Paper texture) ---------- */
body[data-paper=grid], body[data-paper=both] {
  background-image: linear-gradient(rgba(155, 147, 132, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 147, 132, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Sits above everything (bars, menus, the game, dialogs) so every part of every page is printed on the same paper. */
body[data-paper=grain]::before, body[data-paper=both]::before {
  content: ''; position: fixed; inset: 0; z-index: 2500; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.37 0 0 0 0 0.33 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.41 0 0 0 0 0.35 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.sheet > * { scroll-margin-top: 12px; }
.loading { color: var(--muted); text-align: center; padding: 40vh 0 0; font: 400 13px var(--mono); text-transform: uppercase; }

/* ---------- Masthead (profile + links) ---------- */
.mast-toggle { min-height: 0; width: 26px; height: 22px; padding: 0; border: 1px solid var(--ink); background: transparent; }
.mast-toggle .chev { transition: transform 0.15s; transform: rotate(180deg); }
.masthead.collapsed .mast-toggle .chev { transform: none; }
.nameplate { position: relative; text-align: center; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 8px 34px 7px; margin-bottom: 12px; }
.nameplate-link { display: inline-flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.nameplate-title { font: 700 clamp(30px, 8.5vw, 50px)/1.02 var(--serif); letter-spacing: -0.025em; }
.nameplate-sub { margin-top: 3px; font: 600 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.nameplate .mast-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.article .headline { margin: 2px 0 12px; font: 700 clamp(28px, 7vw, 40px)/1.08 var(--serif); letter-spacing: -0.02em; }

/* Rubber stamp beside the name (Settings: Stamp) */
.profile { position: relative; }
/* Under the social icons on phones; top right of the profile on wider screens. */
.stamp {
  display: inline-block; margin-top: 12px; transform: rotate(-7deg); transform-origin: left center;
  border: 2px solid var(--stamp, var(--accent)); color: var(--stamp, var(--accent)); padding: 3px 7px 2px;
  font: 600 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; opacity: 0.88;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

.ticker { overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--paper); font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 0; margin: -4px 0 12px; }
.ticker-track { display: inline-flex; animation: tape 28s linear infinite; }
.ticker .tape { padding-left: 12px; }
.ticker .up { color: #6fd38a; font-weight: 600; }
.ticker .down { color: #ff7b72; font-weight: 600; }
@keyframes tape { to { transform: translateX(-50%); } }

.profile { display: flex; gap: 12px; align-items: center; }
.avatar { width: 84px; height: 84px; flex: none; border: 1px solid var(--ink); background: var(--paper); }
@media (min-width: 880px) { .avatar { width: 96px; height: 96px; } }
body[data-photo=newsprint] .avatar img, body[data-photo=newsprint] .page-brand-avatar img { filter: grayscale(1) contrast(1.12) brightness(1.04); mix-blend-mode: multiply; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { display: grid; place-items: center; height: 100%; font: 600 22px var(--mono); }
.profile-text { min-width: 0; flex: 1; }
.profile-name { margin: 0; font: 700 30px/1.05 var(--serif); letter-spacing: -0.02em; word-break: break-word; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font: 400 12px var(--mono); color: var(--muted); }
.profile-text .socials { margin-top: 7px; }
.profile-tagline { margin: 12px 0 0; font: italic 400 17px/1.4 var(--serif); white-space: pre-line; color: var(--ink-2); }
.socials { display: flex; gap: 4px; }
.social { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); color: var(--ink); background: var(--card); }

/* Key data: a two-column grid of small cells, like a stock's key stats */
.kd { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.kd-cell { padding: 5px 8px 6px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-width: 0; }
.kd dt { font: 500 9.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kd dd { margin: 1px 0 0; font: 500 12.5px/1.35 var(--mono); overflow-wrap: anywhere; }
.kd-cell.up dd { color: var(--up); text-transform: uppercase; }
.kd-cell.down dd { color: var(--down); text-transform: uppercase; }
.kd b.up { color: var(--up); }
.kd b.down { color: var(--down); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-right: 5px; vertical-align: 1px; animation: blink 1.6s steps(1) infinite; }

/* ---------- Boxes for links and sections (Settings → Look and layout → Box style) ----------
   Both styles share a plain newsprint box. "flag" adds a label bar across the top (like a newspaper section flag);
   "press" adds a solid ink offset under the box (like a printing block); "both" does both. */
:root { --box: #f7f2e8; }
.links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; position: relative;
  padding: 10px 12px; border: 1px solid var(--ink); background: var(--box); color: var(--ink); text-decoration: none;
}
/* Icon tiles: a cream two-tone icon on a solid ink tile (--tile, set per item; ink by default). */
.row-icon, .fold-icon { flex: none; display: grid; place-items: center; background: var(--tile, var(--ink)); color: var(--paper); transition: transform 0.18s ease; }
.row-icon { width: 34px; height: 34px; }
.row-icon .duo, .fold-icon .duo { opacity: 0.4; }
.row-icon.thumb { background: var(--card); border: 1px solid var(--ink); }
.row-icon.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-icon.logo { background: #fff; border: 1px solid var(--hair); }
.row-icon.logo img { width: 22px; height: 22px; object-fit: contain; display: block; }
.row-link:hover .row-icon, .fold-head:hover .fold-icon { transform: rotate(-7deg) scale(1.06); }
.row-link.featured .row-icon { background: var(--tag-bg, var(--paper)); color: var(--feat, var(--ink)); }
.row-link.featured .row-icon .duo { opacity: 0.25; }
.row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-title { font: 700 18px/1.15 var(--serif); letter-spacing: -0.005em; }
.row-sub { font: italic 400 15px/1.3 var(--serif); color: var(--ink-2); margin-top: 2px; }
.row-go { flex: none; display: grid; place-items: center; }
/* Featured rows: every color is set per link (--feat box, --feat-text, --tag-bg, --tag-text, --feat-arrow). */
.row-link.featured { background: var(--feat, var(--ink)); border-color: var(--feat, var(--ink)); color: var(--feat-text, var(--paper)); }
.row-link.featured .row-sub { color: inherit; opacity: 0.78; }
.row-link.featured .row-go { color: var(--feat-arrow, var(--amber)); }
.row-link.featured.custom .row-go { color: var(--feat-arrow, var(--feat-text, var(--paper))); }
.row-link.featured .badge { background: var(--tag-bg, var(--paper)); color: var(--tag-text, var(--feat, var(--ink))); animation: none; }
.badge { font: 600 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 5px; background: var(--accent); color: #fff; flex: none; }

.section-label { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }
.section-label::before, .section-label::after { content: ''; flex: 1; border-top: 1px solid var(--ink); }

/* ---------- Folds (open in place: Show ▾ / Hide ▴) ---------- */
.fold { --bar: var(--ink); --code: var(--accent); border: 1px solid var(--ink); background: var(--box); position: relative; }
.fold.tinted { --bar: var(--tint); --code: var(--tint); }
.fold-head {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; background: transparent; color: var(--ink);
  text-align: left; text-transform: none; letter-spacing: 0; font: inherit;
}
.fold-head:active { transform: none; }
.fold-head:focus-visible { outline-offset: -3px; }
.fold-icon { width: 36px; height: 36px; }
.fold-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fold-title { font: 700 19px/1.15 var(--serif); letter-spacing: -0.01em; }
.fold-sub { font: 400 11px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-sub b { color: var(--code); font-weight: 600; }
.fold-cta {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px;
  border: 1px solid var(--ink); background: transparent; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
}
.fold-cta .chev { transition: transform 0.15s; }
.fold.open > .fold-head { border-bottom: 1px solid var(--rule); }
.fold.open > .fold-head .fold-cta { background: var(--ink); color: var(--paper); }
.fold.open > .fold-head .fold-cta .chev { transform: rotate(180deg); }
.fold-body { padding: 12px 12px 14px; }
.fold-body[hidden] { display: none; }

/* Sections inside "See all tools" are smaller so the nesting reads clearly. */
.nested-list { display: flex; flex-direction: column; gap: 10px; }
.fold.nested { background: var(--paper); }
.fold.nested > .fold-head { min-height: 52px; padding: 8px 10px; }
.fold.nested .fold-icon { width: 30px; height: 30px; }
.fold.nested .fold-title { font-size: 16.5px; }

/* Each box carries its own style (set per box in the admin, or the site default from Appearance → Box style). */
/* Style D: section flag, a label bar across the top (the section's accent color on sections). */
:is(.row-link, .fold):is(.bx-flag, .bx-both)::before {
  content: attr(data-flag); display: block; height: 17px; padding: 0 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--ink); color: var(--paper); font: 600 9.5px/17px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.row-link:is(.bx-flag, .bx-both) { padding-top: 27px; }
.row-link:is(.bx-flag, .bx-both)::before { position: absolute; top: 0; left: 0; right: 0; }
.row-link.featured:is(.bx-flag, .bx-both)::before { color: var(--amber); }
.fold:is(.bx-flag, .bx-both)::before { background: var(--bar); }
.fold.nested:is(.bx-flag, .bx-both)::before { height: 14px; font-size: 8.5px; line-height: 14px; }

/* Style E: letterpress block, a solid ink offset under each box that presses in when tapped. */
:is(.row-link, .fold):is(.bx-press, .bx-both) { border-width: 1.5px; box-shadow: 4px 4px 0 var(--ink); margin-right: 4px; margin-bottom: 4px; transition: transform 0.08s, box-shadow 0.08s; }
.fold.nested:is(.bx-press, .bx-both) { box-shadow: 3px 3px 0 var(--ink); margin-right: 3px; margin-bottom: 3px; }
.row-link:is(.bx-press, .bx-both):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
/* Letterpress sections show their accent color as a top edge, unless the box hides its bar. */
.fold.tinted.bx-press:not(.no-bar) { border-top: 5px solid var(--bar); }

/* Tools inside a hub */
.hub-intro { font-size: 16px; line-height: 1.5; margin: 0 0 10px; color: var(--ink-2); }
.hub-intro .para { margin: 0 0 6px; }
.hub-intro .para:last-child { margin: 0; }
.tools { display: flex; flex-direction: column; }
/* Tools read like a classifieds column: bold name, italic line, rules between. */
.tool { padding: 12px 0; border-bottom: 1px solid var(--rule); position: relative; }
.tool:first-child { padding-top: 2px; }
.tool:last-child { border-bottom: 0; padding-bottom: 0; }
.tool-head { display: flex; align-items: center; gap: 10px; }
.tool.featured-tool .row-title { color: var(--feat, var(--accent)); }
.tool-desc { font-size: 16px; line-height: 1.45; margin: 8px 0 0 42px; color: var(--ink-2); }
.tool-desc .para { margin: 0 0 6px; }
.tool-desc .para:last-child { margin: 0; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 42px; }
.tool-actions .btn.default .ico { color: var(--amber); }
.chev-right { transform: rotate(-90deg); }
.hub-empty { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- About ---------- */
.doc { font-size: 17px; line-height: 1.55; word-break: break-word; }
/* Drop cap on the first paragraph of the bio. */
.bio .para:first-child::first-letter { float: left; font: 700 3.3em/0.82 var(--serif); margin: 5px 7px 0 0; color: var(--ink); }
.bio .para { margin: 0 0 10px; }
.bio .para:last-child { margin-bottom: 0; }
.doc-heading { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); }
.doc > .doc-heading:first-child { margin-top: 0; }
.beliefs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.beliefs li { display: flex; gap: 10px; }
.belief-num { font: 600 12px/1.6 var(--mono); color: var(--accent); flex: none; }
.belief-title { font-weight: 600; margin: 0; }
.belief-body { margin: 2px 0 0; color: var(--ink-2); }
.jobs { list-style: none; margin: 0; padding: 0; }
.job { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.job:first-child { padding-top: 0; }
.job:last-child { border-bottom: 0; }
.job-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.job-role { font-weight: 600; }
.job-dates { font: 400 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.job-org { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 0.02em; }
.job-org a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.job-summary { margin: 3px 0 0; color: var(--ink-2); }

.footer {
  margin-top: auto; padding-top: 10px;
  text-align: center; color: var(--muted); font: 400 11px/1.55 var(--mono); text-transform: uppercase; letter-spacing: 0.03em;
}
.footer .disclosure { margin-top: 8px; font-size: 10px; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.footer .safe { color: var(--ink-2); text-transform: none; letter-spacing: 0; font: italic 400 14px var(--serif); }
.footer a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 2px; }

/* ---------- Function bar (bottom): paper and ink, like the page ---------- */
.fnbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: var(--paper); color: var(--ink); border-top: 3px double var(--ink);
  display: flex; align-items: center; gap: 6px; font-family: var(--mono);
}
.fnbar button { min-height: 0; height: 32px; padding: 0 12px; font-size: 12px; }
.menu-key { background: transparent; color: var(--ink); border-color: var(--ink); font: 600 16px var(--serif); text-transform: none; letter-spacing: 0; padding: 0 14px; }
.menu-key.active { background: var(--ink); color: var(--paper); }
.fn-spacer { flex: 1; }
.tray { display: flex; align-items: center; gap: 4px; flex: none; font-size: 12px; }
.tray button { background: transparent; border: 0; color: var(--muted); padding: 0 6px; }
.tray button[aria-pressed=true] { color: var(--up); }
#clock { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }

.start-menu {
  position: fixed; left: 8px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 6px); z-index: 600;
  width: min(300px, calc(100vw - 16px)); background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(27, 27, 27, 0.18);
}
.start-menu[hidden] { display: none; }
.start-head { display: flex; justify-content: space-between; gap: 10px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0 10px; padding: 6px 0 5px; font: 600 11px var(--mono); text-transform: uppercase; }
.start-head span:last-child { color: var(--accent); }
.start-menu ul { list-style: none; margin: 0; padding: 4px 0 6px; }
.start-menu li button {
  width: 100%; min-height: 40px; border: 0; background: none; justify-content: flex-start;
  gap: 10px; padding: 4px 14px; text-transform: none; letter-spacing: 0;
}
.start-menu li button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-label { flex: 1; text-align: left; font: 500 16px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-menu li.sep { height: 0; margin: 4px 12px; border-top: 1px solid var(--hair); }

/* ---------- Opening ("going to press") + end of session: printed on the same paper ---------- */
.boot { position: fixed; inset: 0; z-index: 2000; background: var(--paper); color: var(--ink); font: 500 13px/1.8 var(--mono); padding: 28px 20px; cursor: pointer; text-transform: uppercase; }
.boot[hidden] { display: none; }
.boot .line { white-space: pre; overflow: hidden; color: var(--ink-2); }
.boot .line:first-child { color: var(--ink); font-weight: 600; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.boot .splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--paper); padding: 0 20px; }
.boot .splash-logo { font: 700 clamp(34px, 10vw, 60px)/1.02 var(--serif); letter-spacing: -0.025em; text-transform: none; text-align: center; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 10px 6px 8px; }
.boot .progress { width: min(260px, 70vw); height: 3px; background: var(--hair); }
.boot .progress i { display: block; height: 100%; width: 0; background: var(--ink); animation: fill 1s steps(20) forwards; }
@keyframes fill { to { width: 100%; } }
.boot .skip { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }

.shutdown { position: fixed; inset: 0; z-index: 2000; background: var(--paper); color: var(--ink); display: grid; place-items: center; text-align: center; padding: 24px; font: 700 30px/1.3 var(--serif); cursor: pointer; }
.shutdown[hidden] { display: none; }
.shutdown small { display: block; margin-top: 18px; color: var(--muted); font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Forms (mailing list + contact) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-intro { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.signup-row { display: flex; }
.signup-row input { flex: 1; min-width: 0; border-right: 0; padding: 8px 10px; }
.signup-row button { flex: none; }
.form-done { display: flex; gap: 10px; align-items: center; border: 1px solid var(--up); background: var(--paper); padding: 10px 12px; font-size: 14px; }
.form-done .ico { color: var(--up); }
.form-done b { font: 600 12px var(--mono); text-transform: uppercase; color: var(--up); }
.contact-form { display: flex; flex-direction: column; gap: 8px; }
.form-line { display: flex; align-items: center; gap: 10px; }
.form-line label { width: 60px; flex: none; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.form-line input, .form-line select { flex: 1; min-width: 0; }
.contact-form textarea { min-height: 110px; }
.mail-toolbar { order: 10; display: flex; justify-content: flex-end; }

/* ---------- Custom pages ---------- */
.page-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); font-size: 15px; }
.page-brand-avatar { width: 40px; height: 40px; flex: none; border: 1px solid var(--ink); display: grid; place-items: center; background: var(--card); }
.page-brand-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-brand > span:last-child { display: flex; flex-direction: column; }
.page-brand-handle { font: 400 12px var(--mono); color: var(--muted); }
.page-body { display: flex; flex-direction: column; gap: 14px; }
.page-h { margin: 2px 0 0; font: 700 26px/1.12 var(--serif); letter-spacing: -0.015em; }
.page-text .para { margin: 0 0 10px; font-size: 17.5px; line-height: 1.6; }
.page-text .para:last-child { margin-bottom: 0; }
.page-img { margin: 0; }
.page-img .frame { border: 1px solid var(--ink); }
.page-img img { display: block; width: 100%; height: auto; }
.page-img figcaption { font: 400 12px var(--mono); color: var(--muted); margin-top: 6px; text-transform: uppercase; }
.page-video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid var(--ink); }
.page-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.page-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--hair); }
.page-bullets li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.page-bullets li::before { content: '\25B8'; color: var(--accent); flex: none; font-family: var(--mono); }
.page-btn { min-height: 52px; }
.page-quote { margin: 0; border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; font-size: 15px; line-height: 1.55; }
.page-quote .para { margin: 0 0 6px; }
.page-quote cite { font: 600 11px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.page-form { padding-top: 16px; }
.page-spacer { height: 6px; }

/* Tool reviews: a newspaper review with a kicker, standfirst, drop cap, numbered points and a boxed verdict. */
.rv-kicker { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rv-kicker b { color: var(--accent); font-weight: 700; }
.rv-cat { color: var(--muted); }
.rv-cat::before { content: '\00B7'; margin: 0 7px; color: var(--rule); }
.rv-logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--ink); }
.rv-logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.article .headline + .rv-headline { margin-top: -4px; }
.rv-headline { margin: 0 0 8px; font: italic 500 clamp(20px, 5vw, 24px)/1.22 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.rv-deck { margin: 0 0 14px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.review { display: flex; flex-direction: column; gap: 20px; }
.rv-main { display: flex; flex-direction: column; gap: 16px; }
/* Desktop: title across the top, the review on the left, the verdict and button on the right (stays in view). */
/* Desktop: title across the top, the article on the left, the button card on the right (always in view). */
@media (min-width: 900px) {
  .sheet.wide-page { max-width: 1040px; padding-left: 28px; padding-right: 28px; }
  .wide-page .rv-deck { max-width: 62ch; }
  .wide-page .review { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'main side' 'note side'; gap: 20px 44px; }
  .wide-page .rv-main { grid-area: main; max-width: 680px; }
  .wide-page .rv-cta { grid-area: side; align-self: start; position: sticky; top: 24px; }
  .wide-page .rv-note { grid-area: note; }
}
}
.rv-sec { display: flex; flex-direction: column; gap: 8px; }
.rv-label { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.rv-label::after { content: ''; flex: 1; border-top: 1px solid var(--ink); }
.rv-drop .para:first-child::first-letter { float: left; font: 700 3.3em/0.82 var(--serif); margin: 0.07em 0.08em 0 0; color: var(--accent); }
.rv-benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rv-benefits li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.rv-benefits p { margin: 0; font-size: 16px; line-height: 1.5; }
.rv-benefits b { display: block; font-family: var(--serif); font-size: 17.5px; line-height: 1.3; margin-bottom: 1px; }
.rv-num { flex: none; width: 24px; font: 700 13px var(--mono); color: var(--accent); }
.rv-verdict { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; margin-top: 8px; background: var(--card); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.rv-verdict-text .para { margin: 0; font: 500 19px/1.4 var(--serif); }
.rv-facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.rv-fact { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.45; }
.rv-fact dt { flex: none; width: 84px; font: 600 10.5px/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rv-fact dd { margin: 0; }
.rv-note { margin: 0; font: 400 11.5px/1.5 var(--mono); color: var(--muted); }

/* Button card: name, my rating, one line, the button, and who it's for. */
.rv-cta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--card); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.rv-cta-head { display: flex; align-items: center; gap: 12px; }
.rv-cta-logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--ink); }
.rv-cta-logo img { width: 28px; height: 28px; object-fit: contain; display: block; }
.rv-cta-name { display: block; font: 700 21px/1.15 var(--serif); }
.rv-cta-rating { display: flex; align-items: center; gap: 8px; margin-top: 3px; font: 500 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rv-cta-text { margin: 0; font-size: 15.5px; line-height: 1.45; }
.rv-cta-fact { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.rv-cta-fact span { display: block; font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.rv-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; color: var(--hair); white-space: nowrap; }
.rv-stars::before { content: '\2605\2605\2605\2605\2605'; }
.rv-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--accent); }
.rv-stars-fill::before { content: '\2605\2605\2605\2605\2605'; }

/* Long-review sections */
.rv-h { margin: 18px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font: 700 clamp(23px, 5.4vw, 28px)/1.15 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.rv-text a, .rv-list a, .rv-qa a, .rv-callout a, .rv-table a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.rv-main > .rv-text:first-child .para:first-child::first-letter { float: left; font: 700 3.3em/0.82 var(--serif); margin: 0.07em 0.08em 0 0; color: var(--accent); }
.rv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 16.5px; line-height: 1.5; }
.rv-list li { position: relative; padding-left: 20px; }
.rv-list li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }
.rv-callout { padding: 12px 14px 13px; background: var(--card); border: 1px solid var(--hair); border-left: 3px solid var(--accent); font-size: 15.5px; line-height: 1.5; }
.rv-callout-title { display: block; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.rv-callout p { margin: 0 0 6px; }
.rv-callout ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.rv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rv-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 14px; }
.rv-steps li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; border-left: 1px dashed var(--rule); }
.rv-step-num { flex: none; width: 29px; height: 29px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 13px var(--mono); }
.rv-steps b { display: block; font: 700 17.5px/1.3 var(--serif); margin-top: 3px; }
.rv-steps p { margin: 2px 0 0; font-size: 16px; line-height: 1.5; }
.rv-scores { margin: 0; padding: 14px 16px; border: 1px solid var(--ink); background: var(--card); }
.rv-scores figcaption { font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.rv-score-rows { display: flex; flex-direction: column; gap: 9px; }
.rv-score { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 14.5px; }
.rv-score-track { height: 10px; background: var(--hair); }
.rv-score-fill { display: block; height: 100%; background: var(--accent); }
.rv-score-num { font: 700 13px var(--mono); text-align: right; }
.rv-vs, .rv-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .rv-vs, .rv-pc { grid-template-columns: 1fr; } }
.rv-vs-col, .rv-pc-col { padding: 12px 14px; border: 1px solid var(--hair); background: var(--card); }
.rv-vs-new { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.rv-vs-col > b, .rv-pc-col > b { display: block; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.rv-vs-col ul, .rv-pc-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 15px; line-height: 1.45; }
.rv-vs-col li, .rv-pc-col li { position: relative; padding-left: 20px; }
.rv-vs-col li::before, .rv-pc-col li::before { position: absolute; left: 0; font-weight: 700; }
.rv-vs-old li::before, .rv-cons li::before { content: '\2715'; color: #8a2d26; }
.rv-vs-new li::before, .rv-pros li::before { content: '\2713'; color: #2d5a40; }
.rv-vs-old { color: var(--ink-2); }
.rv-table { margin: 0; }
.rv-table-scroll { overflow-x: auto; border: 1px solid var(--ink); background: var(--card); }
.rv-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; min-width: 520px; }
.rv-table caption { caption-side: top; text-align: left; padding: 10px 12px 0; font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rv-table th, .rv-table td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--hair); }
.rv-table thead th { font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.rv-table tbody th { font: 700 15px var(--serif); }
.rv-table tr:last-child th, .rv-table tr:last-child td { border-bottom: 0; }
.rv-faq { display: flex; flex-direction: column; }
.rv-qa { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.rv-qa:first-child { padding-top: 4px; }
.rv-qa h3 { margin: 0 0 4px; font: 700 18px/1.3 var(--serif); }
.rv-qa .para { font-size: 16px; }
.rv-final { margin-top: 2px; }

/* Phones: the slim button bar that takes the bottom bar's place while reading. */
.fnbar { transition: transform 0.22s ease; }
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 510;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--paper); text-decoration: none; font: 700 17px var(--serif);
  border-top: 3px double var(--paper); transform: translateY(110%); transition: transform 0.22s ease;
}
.cta-dock .ico { color: var(--accent); }
body.dock-on .cta-dock { transform: none; }
body.dock-on .fnbar { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .fnbar, .cta-dock { transition: none; } }

/* The search-engine copy of a review, shown only until the page script draws the real one. */
.ssr-review, .ssr-home { font-size: 17px; line-height: 1.6; }
.ssr-review table { border-collapse: collapse; }
.ssr-review th, .ssr-review td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--hair); }
.status-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.notfound { min-height: 60vh; display: grid; align-items: center; }

.nf-text { color: var(--muted); margin: 0 0 16px; }

/* ---------- In-app browser tip ---------- */
.notice { position: relative; border: 1px dashed var(--ink); background: var(--card); padding: 8px 36px 8px 12px; font-size: 14px; line-height: 1.45; }
.notice > b:first-of-type { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.notice p { margin: 2px 0 0; }
.notice button:not(.notice-x) { margin-top: 8px; min-height: 34px; }
.notice-x { position: absolute; top: 6px; right: 6px; min-height: 0; width: 26px; height: 26px; padding: 0; border: 0; background: none; font-size: 13px; }

/* ---------- Game ---------- */
.game-window { width: min(640px, 100%); padding: 0 14px 12px; border: 1px solid var(--ink); }
.game-frame { border: 1px solid var(--ink); background: var(--card); }
.game-canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
#game-layer { z-index: 900; }
body.game-open { overflow: hidden; }
.game-window.flappy { width: min(360px, 100%); }
.flappy .game-frame { position: relative; }
.game-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(243, 237, 226, 0.6); }
.game-over[hidden] { display: none; }
.game-over-box { background: var(--paper); border: 1px solid var(--ink); border-top: 3px solid var(--ink); padding: 12px 16px 16px; width: 84%; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.game-over-title { font: 600 14px var(--mono); letter-spacing: 0.1em; color: var(--down); }
.game-over-score { font: 400 12px var(--mono); text-transform: uppercase; color: var(--muted); }
.game-over-score b { font: 700 36px/1.1 var(--serif); display: block; color: var(--ink); }
.game-over-best { font: 400 12px var(--mono); text-transform: uppercase; margin-bottom: 4px; }
.game-cta { font-size: 12px; min-height: 40px; text-transform: none; }

/* Form fields read in the news serif too. */
.sheet input[type=text], .sheet input[type=email], .sheet textarea { font-family: var(--serif); font-size: 17px; }
@media (min-width: 520px) { .profile-text .stamp { position: absolute; top: 2px; right: 0; margin: 0; transform-origin: center; } }