/* ============================================================================
   شروحات (Shorohat) — Arabic, right to left
   ----------------------------------------------------------------------------
   Design brief: simple, no unusual colours, images carry the interest.

   So: white surfaces, a faintly tinted page, thin grey borders, and one
   restrained teal used only for links and primary buttons. No accent bars, no
   offset shadows, no background pattern, no gradients.

   RTL is done with logical properties throughout -- margin-inline-start,
   padding-inline, inset-inline, border-inline-start. There is deliberately not a
   single `left:` or `right:` in the layout, so direction is decided once by the
   `dir` attribute and every component follows. Physical properties would each
   need their own RTL override, which is how mirrored layouts end up subtly wrong.
   ========================================================================= */

/* These tokens are the real palette. `site.brand` in the config feeds only the mark and
   the favicon, so changing a colour there and not here leaves the logo one colour and
   every link another. The two are kept in step by hand; if they ever disagree, this file
   is what the visitor sees. */
:root {
  --ink: #14181c;
  --ink-2: #454e55;
  --ink-3: #75808a;
  --paper: #ffffff;
  --surface: #f5f8f8;
  --surface-2: #eaf0f0;
  --line: #dde5e5;
  --line-2: #c7d3d3;

  /* Teal, deliberately far from the sister site's violet. Both sites cover the same
     game, so a neighbouring hue would make them read as one operation with two front
     ends and devalue both. It is also not #2563eb -- Tailwind's blue-600 is the single
     most used accent on the web and the reason a clean layout still reads as a template
     somebody dropped content into.
     Contrast on white: 5.5:1 for --accent, 7.6:1 for --accent-dark, both AA for body text.
     --highlight is orange and is NOT AA on white: mark and small details only, never text. */
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-wash: #f0fdfa;
  --highlight: #f97316;
  --ok: #157347;
  --warn-bg: #fff8e6;
  --warn-line: #e0b400;

  --radius: 10px;
  --radius-sm: 6px;

  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gap: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.8 var(--font);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { line-height: 1.35; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--paper);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus { inset-inline-start: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

.head-row { display: flex; align-items: center; gap: 14px; min-height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

/* The mark is an inline SVG now, so this is a frame around it and nothing more. It used
   to be the logo itself -- a bare accent-coloured square, which is the placeholder every
   unfinished site ships with. */
.brand-mark {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: block;
}

.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-text { font-size: 19px; font-weight: 700; }

.main-nav {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.main-nav a:hover { background: var(--surface); color: var(--ink); }
.main-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-dark); font-weight: 600; }

.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  flex: 0 0 auto;
  padding: 0;
}

.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.nav-toggle { display: none; }

.search-bar { display: none; padding-bottom: 14px; }
.search-bar.is-open { display: block; }

.search-bar input,
.search-page input {
  width: 100%;
  font: 16px var(--font);
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: inherit;
}

.search-bar input:focus,
.search-page input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* -------------------------------------------------------------------- cards */

.chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-dark);
  text-decoration: none;
  align-self: flex-start;
}

.chip.is-quiet { background: var(--surface-2); color: var(--ink-2); }

.meta {
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--gap);
}

.card,
.lead-card,
.mini {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.card:hover,
.lead-card:hover,
.mini:hover {
  border-color: var(--line-2);
  box-shadow: 0 2px 10px rgba(26, 29, 33, .07);
}

.card { display: flex; flex-direction: column; }

/* Covers are authored 16:9, so the ratio is declared and the image fills it
   without cropping.

   Only where the width is the known side. In .card and .lead-card the image spans the
   full card width, so the ratio derives its height -- which is the intended direction.
   .mini is the exception and is corrected below. */
.card .shot,
.lead-card .shot,
.mini .shot { aspect-ratio: 16 / 9; background: var(--surface-2); }
.card .shot img,
.lead-card .shot img,
.mini .shot img { width: 100%; height: 100%; object-fit: cover; }

.card .body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.card h3 { font-size: 17px; margin: 0; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.lead-card { display: block; }
.lead-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.lead-card h2 { font-size: clamp(21px, 2.4vw, 27px); margin: 0; }
.lead-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.mini { display: grid; grid-template-columns: 132px 1fr; gap: 0; align-items: stretch; }

/* The image column takes its width from the track and its height from the row.
   
   `aspect-ratio` has to be switched off here, and this is the one place in the file where
   it is actively wrong. The row is as tall as the wrapped title, and `align-items:
   stretch` makes that height definite -- so the ratio computed the *width* from it:
   122px tall x 16/9 = 217px, inside a 132px track. The image grew 85px sideways over the
   text column, and because the body is later in the DOM the title and the chip painted on
   top of it. Two symptoms, one cause.
   
   With the ratio off, both sides are definite (track width, row height) and object-fit on
   the img does the cropping. */
.mini .shot {
  aspect-ratio: auto;
  height: 100%;
  border-inline-end: 1px solid var(--line);
}

/* A grid item's default `min-width: auto` refuses to shrink below its longest word, which
   would push this track wider than its share and overflow the card the same way. These
   titles are long and contain Latin runs like "Blox Fruits" that do not break. */
.mini-body {
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.mini h3 { font-size: 15.5px; margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- hero */

.hero { padding: 26px 0 6px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.hero-side { display: grid; gap: 12px; }

/* The lead card and the ad under it are one grid cell, so the ad sits below the big
   article in both layouts: under it in the wide column on desktop, and directly under
   it on mobile where the grid collapses to a single column. Placing the ad as its own
   grid child instead would drop it into the second column on desktop. */
.hero-lead { display: grid; gap: 12px; align-content: start; }

/* ------------------------------------------------- start here (categories) */

/* Sits on the tinted page rather than on a white card, so the strip reads as a band
   separating the lead story from the article grids instead of as another row of cards. */
.start-strip {
  padding: 26px 0 4px;
}

.start-title { font-size: 19px; margin: 0 0 4px; }

.start-lede {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 62ch;
}

/* auto-fit, not auto-fill: with four panels and a wide viewport auto-fill leaves an empty
   phantom track and the row looks unbalanced. 210px is the width at which the longest
   category blurb still wraps to three lines rather than four. */
.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

/* The inline-start border is the one piece of accent colour in the block. Logical, not
   `border-left`, so it lands on the correct side under `dir="rtl"` without an override. */
.start-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.start-card:hover {
  border-color: var(--line-2);
  border-inline-start-color: var(--accent-dark);
  box-shadow: 0 2px 10px rgba(20, 24, 28, .07);
}

.start-card h3 { margin: 0; font-size: 16.5px; }

/* The blurb carries the weight here, so it is not truncated. A clamped explanation is
   worse than none: it invites a click without answering what the section contains. */
.start-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

/* Pushed to the bottom so the counts line up across panels whose blurbs differ in
   length -- ragged badges made the row look broken. */
.start-count {
  margin-block-start: auto;
  padding-block-start: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------ section head */

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 36px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sec-head h2 { font-size: 19px; margin: 0; }
.sec-head .more { font-size: 14px; font-weight: 600; text-decoration: none; }
.sec-head .more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ layout */

.page-body { padding: 24px 0 56px; }

/* 336px, not 300: the sidebar ad unit accepts 336x280, and a 300px column would
   force that size to be dropped for no reason other than 36 pixels. */
.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 30px;
  align-items: start;
}

.rail { display: grid; gap: 18px; position: sticky; top: 80px; }

.rail-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rail-box h2 {
  font-size: 15px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.rail-box ol { margin: 0; padding: 10px 16px 14px; padding-inline-start: 34px; }
.rail-box li { margin: 10px 0; font-size: 14.5px; }
.rail-box a { text-decoration: none; color: var(--ink); }
.rail-box a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ----------------------------------------------------------------- article */

.article-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px 30px;
}

.crumbs {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* The trailing item is the current page, so it is not a link and should not read
   as one. */
.crumbs > span:last-child {
  color: var(--ink-2);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb-sep { color: var(--line-2); }

.article-head h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 12px 0 12px;
}

.lede { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }

.article-head .meta { margin: 0 0 22px; }

.cover {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cover img { width: 100%; height: auto; }
.cover figcaption {
  font-size: 13px;
  color: var(--ink-3);
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.prose { font-size: 16.5px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 21px; margin-top: 1.8em; }
.prose h3 { font-size: 18px; margin-top: 1.5em; }
.prose ul, .prose ol { padding-inline-start: 26px; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  direction: ltr;
  display: inline-block;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
}

.prose blockquote p { margin: 0; }

.spec-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--paper);
}

.spec-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th,
.spec-table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.spec-table th { background: var(--surface); font-weight: 600; font-size: 14px; }
.spec-table tr:last-child td { border-bottom: 0; }

/* Codes are Latin strings inside Arabic prose: forced LTR so the characters do
   not reorder, which would make a code unusable. */
.code-cell { direction: ltr; text-align: start; font-family: "SFMono-Regular", Consolas, monospace; }

/* --------------------------------------------------------------- ad slots */

.ad-slot {
  --ad-h: 280px;
  --ad-h-mobile: 280px;
  display: block;
  margin: 26px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Height reserved before the ad loads, so the page does not shift. Layout
     stability is also what keeps a slot viewable, which is what CPM is priced
     against. */
  min-height: calc(var(--ad-h) + 24px);
}

.ad-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 10px 0;
}

.ad-body { min-height: var(--ad-h); display: grid; place-items: center; }

.ad-slot.is-placeholder { background: var(--surface); border-style: dashed; }
.ad-placeholder-label { font-size: 13px; color: var(--ink-3); }

/* A slot the exchange did not fill. Set by app.js from GPT's slotRenderEnded event.
   Without this the reserved height stays behind as a bordered empty box with an
   "advertisement" label on it, which reads as a broken layout rather than as no ad. */
.ad-slot[data-ad-empty] { display: none; }

.ad-slot.is-sticky { position: sticky; top: 80px; }
.ad-slot.is-mobile-only { display: none; }

/* A 300x600 has no mobile form worth bidding on, so it is dropped rather than
   squeezed into a shape no advertiser buys. */
.ad-slot.is-desktop-only { display: block; }

.ad-anchor {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  margin: 0;
  min-height: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  /* Shown at every width, not phones only: the Ad Manager anchor unit carries 728x90
     and 970x90 alongside the phone sizes, and the size mapping in app.js hands each
     viewport only the widths it can take. */
  display: block;
}

/* Pulled while a download control is within the configured clearance of the bar.
   Set by app.js on scroll, because this is the one slot whose distance to the button
   changes as the reader moves down the page. */
.ad-anchor[data-ad-near-download] { display: none; }

/* The bar is fixed, so it overlays the bottom of the page instead of occupying it.
   This keeps it off the last of the footer -- and it is applied only once an ad has
   actually rendered into the bar, so a page the anchor did not fill has no dead strip
   at the end of it. 120px covers the tallest form the unit accepts (100) plus the
   label and border. */
body.has-anchor-ad { padding-bottom: 120px; }

.ad-anchor .ad-body { min-height: 60px; }

.ad-anchor .ad-dismiss {
  position: absolute;
  inset-inline-end: 6px;
  top: -28px;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  background: var(--paper);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font: 500 12px var(--font);
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 16px var(--font);
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.btn:hover { background: var(--accent-dark); color: #fff; }
.btn.is-wide { width: 100%; }
.btn.is-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn.is-ghost:hover { background: var(--surface); color: var(--ink); }

.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------- call to action */

/* Separated from any ad above it by a labelled divider and enforced clearance.
   The placement policy prohibits ads that could be mistaken for a download link,
   so the real control sits in its own panel and looks like nothing else. */
.dl-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.dl-sep::before, .dl-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.dl-panel {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}

.dl-panel h2 { font-size: 19px; margin: 0 0 6px; }
.dl-panel .dl-note { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }

.dl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.dl-facts div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.dl-facts dt { font-size: 12px; color: var(--ink-3); margin: 0; }
.dl-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }

.dl-clear { height: 120px; }

/* ------------------------------------------------------ step (interstitial) */

.step-wrap { max-width: 720px; margin-inline: auto; }

.steps { display: flex; gap: 8px; margin-bottom: 22px; }

.step-pip {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.step-pip.is-done { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-wash); }
.step-pip.is-now { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.step-card h1 { font-size: clamp(21px, 2.8vw, 27px); margin: 0 0 10px; }

.countdown-row { display: flex; align-items: center; gap: 16px; margin: 18px 0; }

.countdown {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
}

.countdown-row p { margin: 0; font-size: 15px; color: var(--ink-2); }

.step-back { margin: 18px 0 0; font-size: 14.5px; }
.step-back a { text-decoration: none; }
.step-back a::before { content: "\2039\00a0"; }
.step-back a:hover { text-decoration: underline; }

/* The destination URL is Latin text inside an Arabic page: forced LTR so it reads
   correctly and can be checked before it is followed. */
.dest {
  direction: ltr;
  text-align: start;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13.5px;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--ink-2);
}

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14.5px;
  margin: 18px 0 0;
}

/* --------------------------------------------------------------- comments */

.comments { margin-top: 34px; }

.comment-count {
  display: inline-block;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  vertical-align: 2px;
}

.comment-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }

.comment {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
}

/* The anchor a #comment-N link lands on. Without the offset the targeted comment sits
   flush against the top edge of the viewport with no context above it. */
.comment { scroll-margin-top: 20px; }

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comment-who { font-weight: 600; font-size: 15px; }
.comment-head time { font-size: 13px; color: var(--ink-3); }

.comment-text { font-size: 15.5px; color: var(--ink-2); }
.comment-text p { margin: 0; }
.comment-text p + p { margin-top: 0.8em; }

.comment-empty {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 26px;
  font-size: 15px;
}

.comment-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}

.comment-form h3 { font-size: 17px; margin: 0 0 16px; }

.cf-field { display: block; margin-bottom: 14px; }
.cf-field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.cf-field input,
.cf-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.cf-field textarea { resize: vertical; min-height: 108px; line-height: 1.7; }

.cf-field input:focus-visible,
.cf-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* The honeypot. Moved out of view rather than hidden with `display:none`, because a
   script that reads computed styles skips a field it can see is hidden. Off-canvas in
   the inline direction so it cannot widen the page in either writing direction, and
   sized to nothing so it cannot be reached by pointer either. */
.cf-trap {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cf-actions .btn { flex: 0 0 auto; }
.cf-note { margin: 0; font-size: 13.5px; color: var(--ink-3); flex: 1 1 240px; }

.cf-msg { margin-top: 14px; font-size: 14.5px; }
.cf-msg:empty { display: none; }

.cf-msg.is-ok {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink);
}

.cf-msg.is-err {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink);
}

/* The receipt page a no-JavaScript submit lands on. */
.comment-result { max-width: 620px; margin-inline: auto; text-align: center; }
.comment-result .lede { margin-inline: auto; max-width: 44ch; }
.comment-result.is-error h1 { color: var(--ink); }

/* ------------------------------------------------------------------ footer */

.site-foot {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 36px;
}

.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.foot-brand { font-size: 17px; margin: 0 0 10px; }
.foot-grid h3 { font-size: 15px; margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 8px 0; font-size: 14.5px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--accent-dark); text-decoration: underline; }
.foot-blurb { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; }

.foot-base {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ pager */

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 34px 0 0; flex-wrap: wrap; }

.pager a, .pager span {
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink);
}

.pager a:hover { background: var(--surface); }
.pager .is-current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pager .is-off { color: var(--ink-3); background: var(--surface); }

/* ----------------------------------------------------------------- search */

.search-page { max-width: 760px; }
.search-results { display: grid; gap: 12px; margin-top: 20px; }

.search-hit {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
}

.search-hit:hover { border-color: var(--line-2); }
.search-hit .chip { margin-bottom: 8px; }
.search-hit h3 { font-size: 16.5px; margin: 0 0 5px; }
.search-hit p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.search-none { color: var(--ink-2); }

/* ------------------------------------------------------------------ 404 */

.not-found { text-align: center; padding: 60px 0; }
.not-found .meta { justify-content: center; }
.not-found h1 { font-size: clamp(28px, 5vw, 46px); margin: 12px 0 14px; }
.not-found .lede { margin-inline: auto; max-width: 46ch; }
.not-found p:last-child { margin-top: 24px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ad-slot.is-sticky,
  .ad-slot.is-desktop-only { display: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .head-row { flex-wrap: wrap; }
  .main-nav { display: none; width: 100%; margin: 0; }
  .main-nav.is-open { display: grid; padding-bottom: 12px; }
  .nav-toggle { display: grid; margin-inline-start: auto; }
  .article-card { padding: 20px; }
  .ad-slot.is-mobile-only { display: block; }
  .dl-clear { height: 90px; }
}

@media (max-width: 560px) {
  .mini { grid-template-columns: 108px 1fr; }
  .step-card, .dl-panel { padding: 17px; }
  .countdown { font-size: 34px; }
  .comment-form { padding: 16px; }
  /* Full-width button: at this width the note wraps under it anyway, and a narrow
     button beside wrapped text reads as an afterthought. */
  .cf-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .ad-slot, .site-head, .site-foot, .rail, .dl-panel, .skip,
  .comment-form { display: none !important; }
}

/* ---------------------------------------------------- overlay ad container
   Holder for AdsKeeper formats that draw themselves over the page: the
   click-triggered interstitial, exit pop-up, and in-site notification.

   These get no reserved box, unlike .ad-slot. An interstitial does not occupy a
   position in the document flow -- the widget positions itself -- so reserving
   space for one would leave a visible empty gap in the article for something
   that renders somewhere else entirely.

   Zero-sized rather than display:none, because a container the browser has
   collapsed entirely is one the widget script cannot measure or attach to. The
   widget's own markup escapes this box through overflow:visible. */
.ad-overlay {
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}