/* ==========================================================================
   FLOWBLOG - waterfall / masonry editorial skin for DCR CMS
   --------------------------------------------------------------------------
   This skin deliberately breaks the page architecture of the other skins in
   this project. They are all built as:

       centred container  >  hero band  >  uniform grid (+ sidebar)

   FLOWBLOG instead is built as:

       full-bleed vertical stream  >  true masonry columns  >  hairline rules

   There is no sidebar anywhere, no uniform card grid, and no card chrome:
   article blocks are separated by hairline rules and background shifts rather
   than borders, shadows and rounded boxes.

   Key techniques used here and nowhere else in this project:
     - real CSS multi-column masonry for the article stream
     - JS column balancing with absolutely positioned items (for auto-loading)
     - weight classes that make individual items tall, wide or text-only, so a
       column never lines up in a uniform rhythm
     - a full-screen overlay navigation instead of a nav bar or rail
     - a fixed reading-progress hairline on article pages
     - fluid clamp() type scale with an oversized masthead

   Contents
     01 Tokens                08 Article blocks (masonry item)
     02 Reset and type        09 Article reading page
     03 Utilities             10 Forms
     04 Topbar and overlay    11 Pager and auto-load
     05 Masthead              12 Directory
     06 Stream / masonry      13 Custom blocks and news
     07 Section rules         14 Footer, utilities, responsive
   ========================================================================== */

/* ===== 01. Tokens ======================================================= */
:root {
  --f-bg: #101014;
  --f-bg-2: #17171d;
  --f-bg-3: #1f1f27;
  --f-ink: #f4f4f6;
  --f-ink-2: #c9c9d2;
  --f-body: #a9a9b6;
  --f-mute: #6f6f7e;
  --f-rule: #2a2a35;
  --f-rule-2: #22222b;

  --f-accent: #d8ff3e;
  --f-accent-2: #ff6a3d;
  --f-accent-3: #59e0ff;
  --f-on-accent: #101014;

  --f-width: 1560px;
  --f-gap: clamp(20px, 2.2vw, 36px);
  --f-pad: clamp(16px, 2.6vw, 44px);

  --f-display: "Haettenschweiler", "Arial Narrow", "Oswald", "Impact",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --f-ease: cubic-bezier(.19, 1, .22, 1);
}

/* ===== 02. Reset and type ============================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body.f-body {
  margin: 0;
  padding: 0;
  background: var(--f-bg);
  color: var(--f-body);
  font-family: var(--f-text);
  font-size: clamp(15.5px, .4vw + 14.4px, 17px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.f-body img { max-width: 100%; height: auto; border: 0; display: block; }
body.f-body a { color: var(--f-ink); text-decoration: none; }
body.f-body a:hover { color: var(--f-accent); }
body.f-body ul, body.f-body ol { list-style: none; margin: 0; padding: 0; }
body.f-body table { border-collapse: collapse; }

body.f-body button:not([class]),
body.f-body input:not([class]),
body.f-body select:not([class]),
body.f-body textarea:not([class]) { font: inherit; color: var(--f-ink); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--f-ink);
  font-family: var(--f-display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  word-wrap: break-word;
}
h1 { font-size: clamp(2.6rem, 9vw, 8rem); }
h2 { font-size: clamp(1.7rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.75rem); line-height: 1.06; }
h4 { font-size: 1.06rem; letter-spacing: .02em; }
h5, h6 {
  font-family: var(--f-text);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.5;
}
p { margin: 0 0 1.05em; }

::selection { background: var(--f-accent); color: var(--f-on-accent); }
:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }

/* ===== 03. Utilities =================================================== */
.f-wrap { padding-inline: var(--f-pad); width: 100%; }
.f-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.f-skip {
  position: fixed; top: -100px; left: 50%; z-index: 200;
  transform: translateX(-50%);
  padding: 14px 24px;
  background: var(--f-accent); color: var(--f-on-accent);
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  transition: top .22s var(--f-ease);
}
.f-skip:focus { top: 0; color: var(--f-on-accent); }

.f-rule { height: 1px; border: 0; margin: 0; background: var(--f-rule); }

.f-label {
  font-family: var(--f-text);
  font-size: .66rem; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--f-mute);
}
.f-label--accent { color: var(--f-accent); }

.f-ico { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-ico--sm { width: 15px; height: 15px; }

.f-nowrap { white-space: nowrap; }
.f-full { grid-column: 1 / -1; }

/* ===== 04. Topbar and overlay navigation =============================== */
.f-topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 16px;
  min-height: 58px;
  padding-inline: var(--f-pad);
  background: color-mix(in srgb, var(--f-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--f-rule);
}
.f-topbar__brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 0;
  font-family: var(--f-display);
  font-size: 1.3rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--f-ink);
}
.f-topbar__brand img { max-height: 26px; width: auto; }
.f-topbar__mark {
  width: 22px; height: 22px; flex: 0 0 22px;
  background: var(--f-accent);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.f-topbar__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.f-topbar__act {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--f-rule);
  background: transparent;
  color: var(--f-ink-2);
  font-family: var(--f-text);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: all .18s var(--f-ease);
}
.f-topbar__act:hover { border-color: var(--f-accent); color: var(--f-accent); }
.f-topbar__act--solid { background: var(--f-accent); border-color: var(--f-accent); color: var(--f-on-accent); }
.f-topbar__act--solid:hover { background: var(--f-accent-2); border-color: var(--f-accent-2); color: var(--f-on-accent); }

.f-progress {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 2px; width: 0;
  background: var(--f-accent);
  transition: width .1s linear;
}

/* full-screen overlay menu - no nav bar, no rail, no dropdowns */
.f-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--f-bg);
  transform: translateY(-101%);
  transition: transform .48s var(--f-ease);
  overflow: hidden;
}
.f-overlay.is-open { transform: none; }
.f-overlay__top {
  display: flex; align-items: center; gap: 16px;
  min-height: 58px;
  padding-inline: var(--f-pad);
  border-bottom: 1px solid var(--f-rule);
}
.f-overlay__close {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--f-rule);
  background: transparent; color: var(--f-ink-2);
  font-family: var(--f-text); font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.f-overlay__close:hover { border-color: var(--f-accent-2); color: var(--f-accent-2); }
.f-overlay__body { overflow-y: auto; padding: clamp(24px, 5vw, 64px) var(--f-pad); }

.f-mega {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(18px, 2.4vw, 40px) clamp(24px, 4vw, 72px);
}
.f-mega__group { min-width: 0; }
.f-mega__parent {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--f-ink);
  margin: 0 0 14px;
}
.f-mega__parent a {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--f-ink);
}
.f-mega__parent a:hover { color: var(--f-accent); }
.f-mega__count { margin-left: auto; font-family: var(--f-text); font-size: .62rem; letter-spacing: .2em; color: var(--f-mute); white-space: nowrap; }
.f-mega__list { columns: 1; }
.f-mega__list li { break-inside: avoid; }
.f-mega__list a {
  display: block;
  padding: 7px 0;
  color: var(--f-body);
  font-size: .92rem;
  border-bottom: 1px solid var(--f-rule-2);
}
.f-mega__list a:hover { color: var(--f-accent); padding-left: 6px; }
.f-mega__list li:last-child a { border-bottom: 0; }

.f-overlay__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding: 18px var(--f-pad);
  border-top: 1px solid var(--f-rule);
  font-family: var(--f-text);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--f-mute);
}
.f-overlay__foot a { color: var(--f-ink-2); }
.f-overlay__foot a:hover { color: var(--f-accent); }

/* search sheet */
.f-sheet {
  position: fixed; inset-inline: 0; top: 0; z-index: 140;
  padding: clamp(20px, 4vw, 46px) var(--f-pad);
  background: var(--f-bg-2);
  border-bottom: 1px solid var(--f-rule);
  transform: translateY(-102%);
  transition: transform .4s var(--f-ease);
}
.f-sheet.is-open { transform: none; }
.f-sheet__form { display: flex; align-items: center; gap: 14px; max-width: 1100px; }
.f-sheet__form input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 4px;
  border: 0; border-bottom: 2px solid var(--f-rule);
  background: transparent;
  color: var(--f-ink);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  text-transform: uppercase;
  outline: 0;
}
.f-sheet__form input:focus { border-bottom-color: var(--f-accent); }
.f-sheet__form button {
  flex: 0 0 auto;
  padding: 14px 24px;
  border: 0; cursor: pointer;
  background: var(--f-accent); color: var(--f-on-accent);
  font-family: var(--f-text); font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}
.f-sheet__hint { margin: 14px 0 0; font-size: .78rem; color: var(--f-mute); letter-spacing: .06em; }

/* ===== 05. Masthead =================================================== */
.f-masthead {
  position: relative;
  padding-block: clamp(34px, 6vw, 96px) clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--f-rule);
  overflow: hidden;
}
.f-masthead__title {
  margin: 0;
  font-size: clamp(3rem, 15vw, 15rem);
  line-height: .82;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--f-ink);
}
.f-masthead__title span { color: var(--f-accent); }
.f-masthead__sub {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px clamp(20px, 4vw, 60px);
  align-items: end;
  margin-top: clamp(18px, 2.6vw, 38px);
}
.f-masthead__lede { margin: 0; max-width: 68ch; font-size: clamp(1rem, 1vw + .8rem, 1.25rem); color: var(--f-ink-2); }
.f-masthead__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  border-top: 1px solid var(--f-rule);
  padding-top: 16px;
}
.f-fact b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: var(--f-ink);
  text-transform: uppercase;
}
.f-fact span { font-family: var(--f-text); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--f-mute); }

/* keyword marquee: a horizontal band of topics, purely typographic */
.f-marquee {
  position: relative;
  border-bottom: 1px solid var(--f-rule);
  background: var(--f-bg-2);
  overflow: hidden;
}
.f-marquee__track {
  display: flex; align-items: center; gap: 30px;
  padding: 12px 0;
  white-space: nowrap;
  animation: f-slide 46s linear infinite;
  will-change: transform;
}
.f-marquee:hover .f-marquee__track { animation-play-state: paused; }
.f-marquee__track a {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  text-transform: uppercase;
  color: var(--f-mute);
  letter-spacing: .02em;
}
.f-marquee__track a:hover { color: var(--f-accent); }
.f-marquee__track i { color: var(--f-accent-2); font-style: normal; }
@keyframes f-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .f-marquee__track { animation: none; }
}

/* ===== 06. Stream / masonry =========================================== */
.f-stream {
  padding-block: clamp(22px, 3vw, 44px);
}
.f-stream__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--f-ink);
  margin-bottom: var(--f-gap);
}
.f-stream__head h2 { margin: 0; }
.f-stream__note { margin: 0; color: var(--f-mute); font-size: .9rem; }
.f-stream__side { margin-left: auto; font-family: var(--f-text); font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--f-accent); }
.f-stream__side:hover { color: var(--f-accent-2); }

/* CSS masonry fallback: always works, no JS required */
.f-masonry {
  --f-cols: 4;
  column-count: var(--f-cols);
  column-gap: var(--f-gap);
}
.f-masonry > .f-item {
  break-inside: avoid;
  /* height-based spacing, because the measured layout positions items and a
     bottom margin would not be part of the measured height */
  padding-bottom: clamp(24px, 2.6vw, 44px);
}
/* JS-enhanced mode: measured columns with absolutely positioned items */
.f-masonry.is-measured {
  column-count: auto;
  position: relative;
}
.f-masonry.is-measured > .f-item {
  position: absolute;
  padding-bottom: 0;
  margin: 0;
  width: var(--f-col-w);
  transform: translate3d(var(--f-x), var(--f-y), 0);
  transition: transform .5s var(--f-ease), opacity .5s var(--f-ease);
}
.f-masonry.is-measured > .f-item.is-new { opacity: 0; }
.f-masonry.is-measured > .f-item.is-in { opacity: 1; }

/* ===== 07. Section rules ============================================== */
.f-band { border-top: 1px solid var(--f-rule); padding-block: clamp(26px, 3.4vw, 52px); }
.f-band--flip { background: var(--f-bg-2); }
.f-band--accent { background: var(--f-accent); color: var(--f-on-accent); }
.f-band--accent h2, .f-band--accent h3 { color: var(--f-on-accent); }
.f-band--accent a { color: var(--f-on-accent); text-decoration: underline; }

/* ===== 08. Article blocks (masonry item) ============================== */
.f-item { min-width: 0; }

.f-block {
  display: block;
  border-top: 1px solid var(--f-rule);
  padding-top: 14px;
}
.f-block__media {
  position: relative;
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--f-bg-3);
}
.f-block__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--f-ease), filter .4s var(--f-ease);
  filter: saturate(.92);
}
.f-block:hover .f-block__media img { transform: scale(1.045); filter: saturate(1.05); }
.f-block__index {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 8px;
  background: var(--f-bg);
  color: var(--f-accent);
  font-family: var(--f-mono);
  font-size: .66rem; letter-spacing: .1em;
}
/* spacing between media and title comes from .f-block__media margin-bottom */
.f-block__body { padding-top: 0; }
.f-block__title {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.7vw, 1.95rem);
}
.f-block__title a {
  color: var(--f-ink);
  display: block;
}
.f-block:hover .f-block__title a { color: var(--f-accent); }
.f-block__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--f-rule-2);
}
.f-block__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-text);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--f-accent-2);
}
.f-block__more::after { content: "\2197"; transition: transform .24s var(--f-ease); }
.f-block:hover .f-block__more::after { transform: translate(3px, -3px); }
.f-block__meta { font-family: var(--f-mono); font-size: .66rem; color: var(--f-mute); letter-spacing: .06em; }

/* weight variants - the position rhythm is generated with :nth-child so the
   stream never falls into a uniform card grid, and it works with JS disabled.
   The core emits one identical block per article, so variation has to come
   from the item's position rather than from its markup. */
.f-masonry > .f-item .f-block__media { aspect-ratio: 4 / 3; }

/* every 7th item is a tall portrait block */
.f-masonry > .f-item:nth-child(7n + 2) .f-block__media { aspect-ratio: 3 / 4; }
.f-masonry > .f-item:nth-child(7n + 2) .f-block__title { font-size: clamp(1.25rem, 2vw, 2.1rem); }

/* every 5th item drops its image entirely and becomes a text-only entry */
.f-masonry > .f-item:nth-child(5n + 4) .f-block__media { display: none; }
.f-masonry > .f-item:nth-child(5n + 4) .f-block {
  border-top-color: var(--f-accent);
  padding-top: 16px;
}
.f-masonry > .f-item:nth-child(5n + 4) .f-block__title { font-size: clamp(1.2rem, 1.9vw, 1.95rem); }
.f-masonry > .f-item:nth-child(5n + 4) .f-block__title a::after {
  content: "\2197";
  margin-left: 10px;
  color: var(--f-accent-2);
  font-size: .8em;
}

/* The first article of the stream is a normal-sized block, matching every other
   block on the page. Only an explicit .f-item--lead (added by hand, or by
   flow.js for a block that asks for it) spans the full width. */
.f-masonry > .f-item:first-child .f-block { padding-top: 16px; }
.f-masonry > .f-item:first-child .f-block__media { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.f-masonry > .f-item:first-child .f-block__title { font-size: clamp(1.15rem, 1.7vw, 1.95rem); }

/* explicit modifiers, kept for pages that want to force a weight */
/* Explicit escape hatch: only a block that carries .f-item--lead spans all
   columns. Nothing else breaks the grid rhythm. */
.f-item--lead .f-block { border-top: 3px solid var(--f-ink); padding-top: 20px; }
.f-item--lead .f-block__title { font-size: clamp(1.7rem, 3.4vw, 3rem); }
.f-item--lead .f-block__media { aspect-ratio: 21 / 9; }
.f-item--tall .f-block__media { aspect-ratio: 3 / 4; }
.f-item--wide .f-block__media { aspect-ratio: 21 / 9; }
.f-item--standard .f-block__media { aspect-ratio: 4 / 3; }
.f-item--bare .f-block__media { display: none; }
.f-item--bare .f-block__title { font-size: clamp(1rem, 1.2vw, 1.3rem); }
.f-item--quote .f-block {
  border-top: 0;
  border-left: 3px solid var(--f-accent);
  padding: 4px 0 4px 18px;
}
.f-item--quote .f-block__media { display: none; }
.f-item--quote .f-block__title { font-size: clamp(1.1rem, 1.6vw, 1.6rem); }

/* ===== 09. Article reading page ======================================= */
.f-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(26px, 4vw, 68px);
  padding-block: clamp(26px, 3.6vw, 60px);
  align-items: start;
}
.f-article__main { min-width: 0; }
.f-article__rail { min-width: 0; position: sticky; top: 78px; display: grid; gap: 20px; }

.f-article__head { padding-bottom: clamp(18px, 2.4vw, 34px); border-bottom: 1px solid var(--f-rule); margin-bottom: clamp(20px, 2.6vw, 40px); }
.f-article__title {
  margin: 10px 0 0;
  font-size: clamp(2rem, 5.4vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.008em;
}
.f-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--f-mute);
}
.f-article__meta a { color: var(--f-mute); }
.f-article__meta a:hover { color: var(--f-accent); }
.f-article__sep { color: var(--f-rule); }

.f-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.f-gallery img {
  width: 100%; height: 90px;
  object-fit: cover;
  cursor: pointer;
  opacity: .72;
  filter: saturate(.7);
  transition: opacity .22s var(--f-ease), filter .22s var(--f-ease);
}
.f-gallery img:hover { opacity: 1; filter: saturate(1.1); }
.f-gallery img:first-child {
  grid-column: 1 / -1;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin-inline: auto;
  object-fit: contain;
  background: var(--f-bg-2);
  opacity: 1; filter: none; cursor: default;
}

.f-prose {
  font-size: clamp(1.02rem, .4vw + .95rem, 1.2rem);
  line-height: 1.78;
  color: var(--f-ink-2);
  max-width: 78ch;
}
.f-prose > *:first-child { margin-top: 0; }
.f-prose h2 { margin: 1.5em 0 .5em; font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.f-prose h3 { margin: 1.4em 0 .45em; }
.f-prose h4 { margin: 1.2em 0 .4em; font-family: var(--f-text); font-weight: 800; text-transform: none; }
.f-prose p { margin-bottom: 1.1em; }
.f-prose img { margin: 1.7em 0; }
.f-prose a { color: var(--f-accent); text-decoration: underline; text-underline-offset: 3px; }
.f-prose a:hover { color: var(--f-accent-2); }
.f-prose ul, .f-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.f-prose ul { list-style: square; }
.f-prose ol { list-style: decimal; }
.f-prose li { margin-bottom: .5em; }
.f-prose li::marker { color: var(--f-accent); }
.f-prose blockquote {
  margin: 1.7em 0;
  padding: 6px 0 6px 24px;
  border-left: 3px solid var(--f-accent);
  color: var(--f-ink);
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1.16;
  text-transform: uppercase;
}
.f-prose blockquote p:last-child { margin-bottom: 0; }
.f-prose code {
  padding: 2px 6px;
  background: var(--f-bg-3);
  color: var(--f-accent-3);
  font-family: var(--f-mono);
  font-size: .9em;
}
.f-prose pre { padding: 18px 20px; overflow-x: auto; background: var(--f-bg-3); color: var(--f-ink-2); }
.f-prose pre code { background: none; color: inherit; padding: 0; }
.f-prose hr { height: 1px; margin: 2.2em 0; border: 0; background: var(--f-rule); }
.f-prose table { width: 100%; margin-bottom: 1.5em; font-size: .95em; }
.f-prose th, .f-prose td { padding: 10px 12px; border: 1px solid var(--f-rule); text-align: left; }
.f-prose th { background: var(--f-bg-2); font-family: var(--f-text); font-size: .8em; text-transform: uppercase; letter-spacing: .1em; }
.f-prose figcaption { margin-top: 10px; color: var(--f-mute); font-size: .85em; }
.f-prose iframe { max-width: 100%; }

.f-article__tags {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--f-rule);
}
.f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f-tags a, #prohref a {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--f-rule);
  color: var(--f-body);
  font-family: var(--f-text);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.f-tags a:hover, #prohref a:hover { border-color: var(--f-accent); color: var(--f-accent); }

.f-rail {
  border-top: 1px solid var(--f-rule);
  padding-top: 14px;
}
.f-rail__title { margin: 0 0 12px; color: var(--f-ink); }
.f-rail p { font-size: .9rem; color: var(--f-mute); }
.f-rail__links { display: grid; }
.f-rail__links a {
  padding: 10px 0;
  border-bottom: 1px solid var(--f-rule-2);
  color: var(--f-body);
  font-size: .88rem;
  display: flex; align-items: baseline; gap: 10px;
}
.f-rail__links a::before { content: "\2197"; color: var(--f-accent-2); font-size: .8rem; }
.f-rail__links a:hover { color: var(--f-accent); }
.f-rail__contact { font-size: .9rem; line-height: 1.7; }
.f-rail__contact a { color: var(--f-accent); }

.f-comments { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--f-rule); }
#review { font-size: .96rem; color: var(--f-ink-2); }
#review > * { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--f-rule-2); }
#review b, #review strong { color: var(--f-ink); }
#review img { border-radius: 50%; }

/* ===== 10. Forms ===================================================== */
.f-form { display: grid; gap: 18px; max-width: 620px; margin-top: 22px; }
.f-field { display: grid; gap: 7px; }
.f-field > label {
  font-family: var(--f-text);
  font-size: .66rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--f-mute);
}
.f-field em, .f-field .required { color: var(--f-accent-2); font-style: normal; }
.f-input,
.f-form input[type="text"],
.f-form input[type="email"],
.f-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--f-rule);
  background: var(--f-bg-2);
  color: var(--f-ink);
  font-family: var(--f-text);
  font-size: .96rem;
  transition: border-color .18s var(--f-ease);
}
.f-input:focus, .f-form input:focus, .f-form textarea:focus { outline: 0; border-color: var(--f-accent); }
textarea.f-input { min-height: 150px; resize: vertical; }
.f-hint { font-size: .8rem; color: var(--f-mute); }

.f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--f-accent);
  background: var(--f-accent);
  color: var(--f-on-accent) !important;
  font-family: var(--f-text);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--f-ease), border-color .18s var(--f-ease), color .18s var(--f-ease);
}
.f-btn:hover { background: var(--f-accent-2); border-color: var(--f-accent-2); color: var(--f-on-accent) !important; }
.f-btn--ghost { background: transparent; border-color: var(--f-rule); color: var(--f-ink) !important; }
.f-btn--ghost:hover { background: transparent; border-color: var(--f-accent); color: var(--f-accent) !important; }
.f-btn--wide { width: 100%; }

.f-notice {
  display: grid; gap: 16px; justify-items: start;
  max-width: 720px;
  padding: clamp(28px, 5vw, 60px) 0;
}
.f-notice p { color: var(--f-mute); max-width: 52ch; }

/* ===== 11. Pager and auto-load ======================================= */
.f-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: clamp(20px, 2.6vw, 40px); font-size: 0; }
.f-pager > font {
  flex: 0 0 100%; display: block; margin-bottom: 12px;
  font-family: var(--f-text); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--f-mute);
}
.f-pager > font font { color: var(--f-accent); font-size: inherit; }
.f-pager select {
  height: 40px; padding: 0 30px 0 14px;
  border: 1px solid var(--f-rule); background: var(--f-bg-2); color: var(--f-ink-2);
  font-family: var(--f-text); font-size: .78rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--f-mute) 50%),
                    linear-gradient(135deg, var(--f-mute) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.f-pager li { list-style: none; font-size: .84rem; }
.f-pager li a, .f-pager li span, .f-pager a, .f-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--f-rule);
  color: var(--f-body);
  font-family: var(--f-text);
  font-size: .8rem; font-weight: 700;
  transition: all .18s var(--f-ease);
}
.f-pager li a:hover, .f-pager a:hover { border-color: var(--f-accent); color: var(--f-accent); }
.f-pager .current a, .f-pager .current span,
.f-pager li.active a, .f-pager li.active span, .f-pager .thisclass {
  background: var(--f-ink); border-color: var(--f-ink); color: var(--f-bg);
}

.f-autoload {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--f-rule);
}
.f-autoload__state {
  font-family: var(--f-text); font-size: .7rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--f-mute);
}
.f-autoload__bar { flex: 1 1 120px; height: 2px; background: var(--f-rule); overflow: hidden; }
.f-autoload__bar i { display: block; height: 100%; width: 0; background: var(--f-accent); transition: width .3s var(--f-ease); }

/* ===== 12. Directory ================================================ */
.f-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 16px;
  font-family: var(--f-text); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--f-mute);
}
.f-crumbs > * { display: inline-flex; align-items: center; }
.f-crumbs a { color: var(--f-mute); }
.f-crumbs a:hover { color: var(--f-accent); }
.f-crumbs i, .f-crumbs .fa { margin-right: 5px; color: var(--f-accent); }
.f-crumbs .divider { color: var(--f-rule); }

.f-pagehead {
  padding-block: clamp(22px, 3.4vw, 52px) clamp(14px, 2vw, 26px);
  border-bottom: 1px solid var(--f-rule);
}
.f-pagehead h1 { margin: 6px 0 0; }
.f-pagehead__sub { margin: 14px 0 0; max-width: 62ch; color: var(--f-mute); }

.f-dir {
  columns: 3;
  column-gap: clamp(24px, 3.4vw, 64px);
  padding-block: clamp(22px, 3vw, 44px);
}
.f-dir__group { break-inside: avoid; margin: 0 0 clamp(26px, 3vw, 46px); }
.f-dir__parent {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--f-ink);
}
.f-dir__parent a {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--f-ink);
}
.f-dir__parent a:hover { color: var(--f-accent); }
.f-dir__count { margin-left: auto; font-family: var(--f-text); font-size: .6rem; letter-spacing: .2em; color: var(--f-mute); white-space: nowrap; }
.f-dir__children { display: block; }
.f-dir__children li { break-inside: avoid; }
.f-dir__children a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--f-rule-2);
  color: var(--f-body);
  font-size: .9rem;
}
.f-dir__children a::before { content: "\2014"; color: var(--f-rule); }
.f-dir__children a:hover { color: var(--f-accent); }
.f-dir__children a:hover::before { color: var(--f-accent-2); }
.f-dir__solo { display: block; padding: 8px 0; font-size: .9rem; }
.f-dir__note {
  margin-top: 26px; padding: 20px 22px;
  background: var(--f-bg-2);
  border-left: 3px solid var(--f-accent);
  color: var(--f-ink-2); font-size: .92rem;
}

/* legacy flat category output fallback */
.f-catlist { columns: 3; column-gap: clamp(20px, 2.6vw, 46px); }
.f-catlist > a, .f-catlist > div, .f-catlist ul li { break-inside: avoid; }
.f-catlist > a, .f-catlist > div > a, .f-catlist ul li a {
  display: block; margin: 0; padding: 8px 0;
  border-bottom: 1px solid var(--f-rule-2);
  color: var(--f-body); font-size: .9rem;
}
.f-catlist > a:hover, .f-catlist > div > a:hover, .f-catlist ul li a:hover { color: var(--f-accent); }
.f-catlist a font { color: inherit !important; }
.f-catlist ul { display: contents; }

/* ===== 13. Custom blocks and news =================================== */
.f-code { padding-block: clamp(24px, 3.4vw, 52px); }
.f-code h1, .f-code h2, .f-code h3 { color: var(--f-ink); }
.f-code p { color: var(--f-ink-2); }
.f-code a { color: var(--f-accent); text-decoration: underline; }
.f-code ul, .f-code ol { margin-bottom: 16px; padding-left: 22px; color: var(--f-ink-2); }
.f-code ul { list-style: square; }
.f-code ol { list-style: decimal; }
.f-code img { margin-block: 14px; }
.f-code table { width: 100%; }
.f-code td, .f-code th { padding: 10px 12px; border: 1px solid var(--f-rule); }

/* ---------------------------------------------------------------------------
   Admin-supplied two-column promo block (the index_code_mid field).

   The markup that gets pasted in is built from .adaptive-container,
   .left-column and .right-column, and it used to arrive with its own inline
   stylesheet. Those rules are reproduced here so the block lays out as an
   image-left / text-right promo on desktop without any inline CSS, and stacks
   on small screens instead of overflowing.
   --------------------------------------------------------------------------- */
.f-code .adaptive-container {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.4vw, 58px);
  width: 100% !important;
  max-width: 100%;
  float: none !important;
  margin-inline: auto;
}
.f-code .adaptive-container::after { content: ""; display: table; clear: both; }
.f-code .left-column {
  flex: 0 0 40%;
  max-width: 40%;
  float: none !important;
}
.f-code .right-column {
  flex: 1 1 auto;
  min-width: 0;
  float: none !important;
}
.f-code .left-column img {
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
  object-fit: cover;
}
.f-code .right-column > *:first-child { margin-top: 0; }
.f-code .right-column > *:last-child { margin-bottom: 0; }
.f-code .right-column h2 {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  margin-bottom: .5em;
}
.f-code .right-column p { margin-bottom: .9em; }
.f-code .right-column br { line-height: 2; }

@media (max-width: 860px) {
  .f-code .adaptive-container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .f-code .left-column,
  .f-code .right-column {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .f-code .left-column img { max-height: 62vw; }
}

.f-news { columns: 2; column-gap: var(--f-gap); }
.f-news .item, .f-news li {
  break-inside: avoid;
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--f-rule);
}
.f-news .thumb img { width: 100%; height: auto; margin-bottom: 12px; }
.f-news h3, .f-news h2 { font-size: 1.15rem; margin-bottom: 8px; }
.f-news h3 a, .f-news h2 a { color: var(--f-ink); }
.f-news h3 a:hover, .f-news h2 a:hover { color: var(--f-accent); }
.f-news .desc { color: var(--f-mute); font-size: .9rem; }

/* ===== 14. Footer, floating, responsive ============================= */
.f-footer {
  margin-top: clamp(40px, 5vw, 90px);
  border-top: 2px solid var(--f-ink);
  padding-block: clamp(28px, 4vw, 58px) 0;
}
.f-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
  padding-bottom: clamp(26px, 3vw, 46px);
}
.f-footer h2 { color: var(--f-mute); margin-bottom: 14px; }
.f-footer__brand {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: .9; text-transform: uppercase;
  color: var(--f-ink);
  display: inline-block;
  margin-bottom: 14px;
}
.f-footer p { font-size: .9rem; color: var(--f-mute); }
.f-footer__list a { display: block; padding: 7px 0; border-bottom: 1px solid var(--f-rule-2); color: var(--f-body); font-size: .9rem; }
.f-footer__list a:hover { color: var(--f-accent); }
.f-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 18px;
  border-top: 1px solid var(--f-rule);
  font-family: var(--f-text); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--f-mute);
}
.f-footer__bottom p { margin: 0; }
.f-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.f-footer__code { padding-bottom: 18px; font-size: .8rem; }

.f-float { position: fixed; right: 14px; bottom: 84px; z-index: 70; display: grid; gap: 8px; }
.f-float img { max-width: 46px; height: auto; }
.f-top {
  position: fixed; right: 14px; bottom: 18px; z-index: 85;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--f-rule);
  background: var(--f-bg-2); color: var(--f-ink);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: all .26s var(--f-ease);
}
.f-top.is-on { opacity: 1; visibility: visible; }
.f-top:hover { background: var(--f-accent); border-color: var(--f-accent); color: var(--f-on-accent); }

@media (max-width: 1280px) {
  .f-masonry { --f-cols: 3; }
  .f-dir { columns: 2; }
  .f-article { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
}
@media (max-width: 980px) {
  .f-masonry { --f-cols: 2; }
  .f-article { grid-template-columns: minmax(0, 1fr); }
  .f-article__rail { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .f-masthead__sub { grid-template-columns: minmax(0, 1fr); }
  .f-news { columns: 1; }
  .f-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  /* phones keep two columns side by side, per the layout brief */
  .f-masonry { --f-cols: 2; }
  .f-dir { columns: 1; }
  .f-topbar { gap: 10px; }
  .f-topbar__act span { display: none; }
  .f-topbar__act { padding: 9px 11px; }
  .f-stream__head { flex-direction: column; align-items: flex-start; }
  .f-stream__side { margin-left: 0; }
  .f-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .f-footer__bottom { flex-direction: column; align-items: flex-start; }
  .f-gallery { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .f-gallery img { height: 68px; }
  .f-float { display: none; }
}
@media (max-width: 430px) {
  /* below this a two-column stream would be unreadable */
  .f-masonry { --f-cols: 1; }
  .f-dir { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .f-masonry.is-measured > .f-item { transition: none; }
}

@media print {
  .f-topbar, .f-overlay, .f-sheet, .f-progress, .f-marquee,
  .f-top, .f-float, .f-footer, .f-article__rail, .f-autoload { display: none !important; }
  body.f-body { background: #fff; color: #111; }
  .f-masonry { column-count: 2; }
  .f-masonry.is-measured > .f-item { position: static !important; transform: none !important; width: auto !important; }
  .f-prose { font-size: 11pt; color: #111; }
}

@media (forced-colors: active) {
  .f-block, .f-rail, .f-pager, .f-btn { border-color: CanvasText; }
  .f-block__media img { filter: none; }
}