/* ============================================================================
   review.com.im — folio.css
   The whole site's stylesheet. One file; and, since 2026-09-23, one script,
   which is a counter and nothing else — Google Analytics 4, property
   G-WWF8X0NK08, this journal's own and no other's. An essay that asks a reader
   for twenty minutes ought not to also ask them to run something, and the
   sentence that used to sit on this line said so absolutely. It cannot now, so
   here is the weaker claim that is true and still worth making: the journal
   does not depend on the tag. Serve these pages with the counter refused — as
   was done on 2026-09-23 — and the essays set, read and link exactly as they
   do with it, this sheet applied, one h1, 14 links, nothing missing but the
   page view.

   House convention, so that it stays readable a year from now:
     every class begins with `folio-`, and every part of a block is spelled
     `folio-<block>-<part>`, lowercase, hyphens only. No BEM double underscores,
     no utility classes, no abbreviations. If a rule needs a name it gets a
     whole word.

   The journal sets one column at a generous measure in a serif the reader's
   own machine already owns — nothing is fetched from a font service, and
   nothing but that one counter is fetched from anywhere but this host.
   ========================================================================= */

:root {
  --folio-paper:      #f2f0ea;
  --folio-paper-deep: #eae7dd;
  --folio-ink:        #22201c;
  --folio-ink-soft:   #57534a;
  --folio-rule:       #cfc9b8;
  --folio-accent:     #1f5d5b;
  --folio-accent-lit: #14403f;
  --folio-flag:       #8a3324;

  --folio-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
                 Palatino, "Times New Roman", serif;
  --folio-sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;

  --folio-measure: 34rem;
  --folio-step-label: 0.78rem;
  --folio-step-small: 0.94rem;
  --folio-step-body:  1.1875rem;
  --folio-step-lede:  1.375rem;
  --folio-step-head:  1.55rem;
  --folio-step-title: clamp(2.05rem, 5.4vw, 3.1rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --folio-paper:      #191a18;
    --folio-paper-deep: #21231f;
    --folio-ink:        #e8e5dc;
    --folio-ink-soft:   #a8a496;
    --folio-rule:       #3a3b36;
    --folio-accent:     #7fc4bd;
    --folio-accent-lit: #a5dbd5;
    --folio-flag:       #e0917f;
  }
}

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

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

body.folio-body {
  margin: 0;
  background: var(--folio-paper);
  color: var(--folio-ink);
  font-family: var(--folio-serif);
  font-size: var(--folio-step-body);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

/* --- the one thing every keyboard reader meets first --------------------- */

.folio-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--folio-ink);
  color: var(--folio-paper);
  font-family: var(--folio-sans);
  font-size: var(--folio-step-small);
  padding: 0.7rem 1.1rem;
  z-index: 10;
}
.folio-skip:focus { left: 0.6rem; top: 0.6rem; }

a {
  color: var(--folio-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 120ms ease, text-decoration-thickness 120ms ease;
}
a:hover { color: var(--folio-accent-lit); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--folio-accent);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

/* --- masthead ------------------------------------------------------------ */

.folio-mast {
  border-bottom: 1px solid var(--folio-rule);
  padding: 1.6rem 1.25rem 1.3rem;
}
.folio-mast-inner {
  max-width: var(--folio-measure);
  margin: 0 auto;
}
.folio-mast-name {
  margin: 0;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.folio-mast-name a { color: var(--folio-ink); text-decoration: none; }
.folio-mast-name a:hover { color: var(--folio-accent); text-decoration: underline; }
.folio-mast-line {
  margin: 0.45rem 0 0;
  color: var(--folio-ink-soft);
  font-size: var(--folio-step-small);
  font-style: italic;
}

/* --- the sheet ----------------------------------------------------------- */

.folio-main { padding: 0 1.25rem; }

.folio-essay,
.folio-index,
.folio-page {
  max-width: var(--folio-measure);
  margin: 0 auto;
  padding: 3rem 0 1rem;
}

.folio-dateline {
  margin: 0 0 1.4rem;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--folio-ink-soft);
}
.folio-kicker { color: var(--folio-flag); font-weight: 700; }
.folio-dateline-sep { padding: 0 0.35em; }

.folio-title {
  margin: 0 0 1rem;
  font-size: var(--folio-step-title);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.folio-standfirst {
  margin: 0 0 2.2rem;
  font-size: var(--folio-step-lede);
  line-height: 1.5;
  color: var(--folio-ink-soft);
}

/* --- the single plate ---------------------------------------------------- */

.folio-plate {
  margin: 0 0 2.4rem;
  /* the one element allowed out past the measure */
  width: min(52rem, calc(100vw - 2.5rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.folio-plate img {
  display: block;
  width: 100%;
  border: 1px solid var(--folio-rule);
  background: #ffffff;
}
.folio-plate-caption {
  margin: 0.7rem 0 0;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-small);
  line-height: 1.55;
  color: var(--folio-ink-soft);
}

/* --- prose --------------------------------------------------------------- */

.folio-prose p { margin: 0 0 1.35rem; }
.folio-prose h2 {
  margin: 2.8rem 0 1rem;
  font-size: var(--folio-step-head);
  line-height: 1.25;
  font-weight: 600;
}
.folio-prose blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.3rem;
  border-left: 3px solid var(--folio-accent);
  font-style: italic;
  color: var(--folio-ink-soft);
}
.folio-prose blockquote p:last-child { margin-bottom: 0; }
.folio-prose ul { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.folio-prose li { margin: 0 0 0.6rem; }
.folio-figure-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- the shortcoming block: every essay carries one ---------------------- */

.folio-flag-block {
  margin: 2.6rem 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--folio-rule);
  border-left: 4px solid var(--folio-flag);
  background: var(--folio-paper-deep);
}
.folio-flag-head {
  margin: 0 0 0.6rem;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--folio-flag);
}
.folio-flag-block p { margin: 0 0 0.9rem; font-size: 1.0625rem; line-height: 1.66; }
.folio-flag-block p:last-child { margin-bottom: 0; }

/* --- the verdict: the last paragraph, set apart -------------------------- */

.folio-verdict {
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--folio-ink);
  font-size: var(--folio-step-lede);
  line-height: 1.5;
}

/* --- endnote ------------------------------------------------------------- */

.folio-endnote {
  margin: 3.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--folio-rule);
  font-family: var(--folio-sans);
  font-size: var(--folio-step-small);
  line-height: 1.62;
  color: var(--folio-ink-soft);
}
.folio-endnote-head {
  margin: 0 0 0.9rem;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--folio-ink);
}
.folio-measures { margin: 0 0 1.4rem; }
.folio-measures dt {
  font-weight: 600;
  color: var(--folio-ink);
  margin-top: 0.75rem;
}
.folio-measures dd {
  margin: 0.15rem 0 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.folio-notice {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--folio-rule);
  color: var(--folio-ink);
}

/* --- front page index ---------------------------------------------------- */

.folio-index-stance {
  margin: 0 0 3rem;
  font-size: var(--folio-step-lede);
  line-height: 1.55;
}
.folio-index-list { list-style: none; margin: 0; padding: 0; }
.folio-index-entry {
  padding: 2rem 0;
  border-top: 1px solid var(--folio-rule);
}
.folio-index-entry:last-child { border-bottom: 1px solid var(--folio-rule); }
.folio-index-title {
  margin: 0.5rem 0 0.6rem;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 600;
}
.folio-index-title a { color: var(--folio-ink); text-decoration-color: var(--folio-rule); }
.folio-index-title a:hover { color: var(--folio-accent); text-decoration-color: currentColor; }
.folio-index-blurb { margin: 0 0 0.9rem; color: var(--folio-ink-soft); }
.folio-index-flag {
  margin: 0;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-small);
  line-height: 1.6;
}
.folio-index-flag b { color: var(--folio-flag); }

/* --- plain page (disclosure) --------------------------------------------- */

.folio-page h2 {
  margin: 2.6rem 0 0.9rem;
  font-size: var(--folio-step-head);
  line-height: 1.25;
  font-weight: 600;
}
.folio-page p { margin: 0 0 1.35rem; }
.folio-page ul { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.folio-page li { margin: 0 0 0.6rem; }

/* --- colophon ------------------------------------------------------------ */

.folio-colophon {
  margin-top: 4rem;
  border-top: 1px solid var(--folio-rule);
  padding: 2rem 1.25rem 3.5rem;
  font-family: var(--folio-sans);
  font-size: var(--folio-step-small);
  line-height: 1.66;
  color: var(--folio-ink-soft);
}
.folio-colophon-inner { max-width: var(--folio-measure); margin: 0 auto; }
.folio-colophon p { margin: 0 0 0.8rem; }
.folio-colophon p:last-child { margin-bottom: 0; }
.folio-colophon-links a { margin-right: 1.1rem; }

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 34rem) {
  :root { --folio-step-body: 1.125rem; --folio-step-lede: 1.25rem; }
  .folio-essay, .folio-index, .folio-page { padding-top: 2.2rem; }
  .folio-plate { width: 100%; margin-left: 0; transform: none; }
}

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- print -------------------------------------------------------------- */

@media print {
  body.folio-body { background: #fff; color: #000; }
  .folio-skip, .folio-colophon-links { display: none; }
  .folio-plate { width: 100%; margin-left: 0; transform: none; }
}