/* ==========================================================================
   FLAT DESIGN — one page. Loaded on a/flat-design.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A mosaic of solid tiles on an 8px gutter, one flat hue and one flat icon
   each. The shell (rail, top bar, community drawer) is never restyled:
   every rule here is scoped to .fd-hero or .fd-rec.

   THE ABSOLUTE ZERO (our purist reading; iOS 7 itself kept translucent
   layers). This stylesheet is audited at build time by its own
   renderer (flat-design.ts): a single shadow, gradient, blur or text shadow
   declaration anywhere in this file fails the build. Hierarchy is colour
   weight and size only. This page's motion is position and colour only.

   Palette, in the order the record's "as built" swatches read it:
   #009688 teal · #F4762E orange · #22364A navy · #F7C948 yellow
   #F5F6F4 paper · #1D2A36 ink · #FFFFFF white · #53606C slate
   Teal is a surface, never a text ground: white on it is 3.7:1. Tiles that
   carry text use the deep teal #00695F (white 6.6:1). Ink on orange 5.2,
   ink on yellow 9.3, white on navy 12.4, slate on white 6.5.
   ========================================================================== */
@font-face {
  font-family: "SchibstedX";
  src: url("fonts/schibsted.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}

.fd-page {
  --fd-teal: #009688;
  --fd-or: #F4762E;
  --fd-navy: #22364A;
  --fd-yel: #F7C948;
  --fd-off: #F5F6F4;
  --fd-ink: #1D2A36;
  --fd-w: #FFFFFF;
  --fd-slate: #53606C;
  --fd-dteal: #00695F;
  --fd-face: "SchibstedX", "Helvetica Neue", Arial, sans-serif;
  --fd-pad: clamp(22px, 4vw, 48px);
}
.fd-page main { background: var(--fd-off); color: var(--fd-ink); }

/* ---- shared register: both roots, nothing outside them ---------------- */
.fd-hero, .fd-rec {
  font: 400 18px/1.55 var(--fd-face);
  color: var(--fd-ink);
  font-synthesis: style;
  overflow-wrap: break-word;
}
.fd-hero *, .fd-rec * { box-sizing: border-box; }
.fd-rec a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fd-hero :focus-visible, .fd-rec :focus-visible { outline: 4px solid var(--fd-yel); outline-offset: 0; }
.fd-or:focus-visible, .fd-yel:focus-visible, .fd-wh:focus-visible,
.fd-or :focus-visible, .fd-yel :focus-visible, .fd-wh :focus-visible { outline-color: var(--fd-ink); }

/* ---- hues -------------------------------------------------------------- */
.fd-teal { background: var(--fd-teal); color: var(--fd-w); }
.fd-dteal { background: var(--fd-dteal); color: var(--fd-w); }
.fd-or { background: var(--fd-or); color: var(--fd-ink); }
.fd-navy { background: var(--fd-navy); color: var(--fd-w); }
.fd-yel { background: var(--fd-yel); color: var(--fd-ink); }
.fd-wh { background: var(--fd-w); color: var(--fd-ink); }
.fd-ink { background: var(--fd-ink); color: var(--fd-w); }

.fd-ic { width: 48px; height: 48px; display: block; flex: 0 0 auto; }
.fd-lab { display: block; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.fd-big { display: block; font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.01em; }
.fd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero: the teal slab ----------------------------------------------- */
.fd-hero { padding: 8px 8px 0; }
.fd-slab {
  background: var(--fd-teal);
  color: var(--fd-w);
  min-height: clamp(300px, 40vw, 460px);
  padding: clamp(16px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.fd-h1 { margin: 0; font-weight: 900; font-size: clamp(56px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.03em; }
/* Bold and at least 19px: large text, so white on teal clears 3:1. */
.fd-lead { margin: 16px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.3; max-width: 28ch; }

/* ---- tiles ------------------------------------------------------------- */
.fd-t {
  padding: clamp(16px, 2.4vw, 28px);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
a.fd-t { color: inherit; }
.fd-rec a.fd-t { text-decoration: none; }
/* A tile's own colour beats the link reset above. */
.fd-rec a.fd-teal, .fd-rec a.fd-dteal, .fd-rec a.fd-navy, .fd-rec a.fd-ink { color: var(--fd-w); }
.fd-rec a.fd-or, .fd-rec a.fd-yel, .fd-rec a.fd-wh { color: var(--fd-ink); }
a.fd-t:hover { transform: translateX(6px); }
a.fd-t.fd-or:hover { background: var(--fd-yel); }
a.fd-t.fd-yel:hover { background: var(--fd-or); }
a.fd-t.fd-navy:hover, a.fd-t.fd-ink:hover { background: var(--fd-dteal); }
a.fd-t.fd-dteal:hover { background: var(--fd-navy); }
a.fd-t.fd-wh:hover { background: var(--fd-yel); }

.fd-meta { margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fd-meta dt { margin: 0 0 4px; }
.fd-meta dd { margin: 0; }
/* A short last row fills the width rather than leaving a hole in the mosaic. */
.fd-meta > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.fd-meta > :last-child:nth-child(3n + 2) { grid-column: span 2; }

.fd-tiles { margin: 0; padding: 0 8px 8px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fd-s3 { grid-column: span 3; }
.fd-s6 { grid-column: span 6; }
.fd-tiles .fd-big { margin: 4px 0 8px; }
.fd-mach { min-height: 0; }
.fd-mach p { margin: 0; }
.fd-mach a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- the findings row under the slab: three tiles, same mosaic ---------- */
.fd-found { padding: 8px 0 0; }
.fd-s2 { grid-column: span 2; }
.fd-found p { margin: 0; font-size: 17px; line-height: 1.45; }
.fd-found .fd-lab { margin-bottom: 6px; }
.fd-theme { display: flex; gap: 8px; }
.fd-theme span { width: 56px; height: 56px; padding: 10px; display: flex; align-items: flex-end; }
.fd-theme i { display: block; width: 18px; height: 18px; }
.fd-found p.fd-bar { display: flex; gap: 28px; font-size: 20px; font-weight: 500; color: var(--fd-slate); }
.fd-bar b { color: var(--fd-dteal); font-weight: 800; }

/* ---- blocks ------------------------------------------------------------ */
.fd-block { margin: 0 8px 8px; padding: var(--fd-pad); }
.fd-inner { max-width: 900px; }
.fd-block h2 {
  margin: 0 0 18px;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fd-block h2 .fd-ic { width: 44px; height: 44px; }
.fd-block p { margin: 0 0 14px; }
.fd-block p:last-child { margin-bottom: 0; }
.fd-claim { margin-bottom: 14px; }
.fd-refuse { background: var(--fd-or); color: var(--fd-ink); padding: 14px 18px; }
.fd-dx { background: var(--fd-yel); color: var(--fd-ink); padding: 16px 20px; font-weight: 700; font-size: 22px; line-height: 1.35; }
.fd-block .fd-dx { margin: 18px 0; }
.fd-sl { color: var(--fd-slate); }

/* what carries the look */
.fd-ct { width: 100%; border-collapse: collapse; }
.fd-ct th, .fd-ct td { padding: 10px 8px; border-bottom: 3px solid var(--fd-off); text-align: left; vertical-align: top; }
.fd-ct th { width: 34%; }
.fd-ct th a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.fd-ct small { display: block; font-size: 13px; font-weight: 700; color: var(--fd-dteal); }
.fd-nl { color: var(--fd-slate); }
.fd-tags { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fd-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.fd-swatch { display: flex; flex-wrap: wrap; gap: 4px; }
.fd-swatch span { width: 78px; padding: 30px 5px 4px; font-size: 11px; font-weight: 700; }
.fd-rec .fd-asbuilt { margin: 6px 0 0; color: var(--fd-slate); }

/* rules */
.fd-flush { background: var(--fd-off); padding-left: 0; padding-right: 0; }
.fd-flush > h2, .fd-flush > p { padding: 0 var(--fd-pad); }
.fd-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fd-rules article { padding: 18px; }
.fd-rules h3 { margin: 8px 0 2px; font-weight: 900; font-size: 24px; line-height: 1.15; }
.fd-k { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fd-rules p { margin: 6px 0 0; }
.fd-rules small { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; }

/* what stands behind it: teal frame, white card */
.fd-card { background: var(--fd-w); color: var(--fd-ink); padding: clamp(18px, 3vw, 32px); }
.fd-tw { overflow-x: auto; margin-top: 18px; }
.fd-rt { width: 100%; border-collapse: collapse; }
.fd-rt th, .fd-rt td { padding: 8px; text-align: left; vertical-align: top; border-bottom: 3px solid var(--fd-navy); }
.fd-rt thead th { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-yes { background: var(--fd-yel); color: var(--fd-ink); padding: 0 8px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .fd-t { transition: none; }
  a.fd-t:hover { transform: none; }
}

@media (max-width: 900px) {
  .fd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-meta > :last-child:nth-child(3n + 1), .fd-meta > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .fd-meta > :last-child:nth-child(odd) { grid-column: span 2; }
  .fd-tiles { grid-template-columns: 1fr; }
  .fd-s2, .fd-s3, .fd-s6 { grid-column: auto; }
  .fd-rules { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .fd-meta { grid-template-columns: 1fr; }
  .fd-meta > :last-child:nth-child(odd) { grid-column: auto; }
  .fd-page { --fd-pad: 16px; }
  .fd-block h2 { font-size: 30px; gap: 12px; }
  .fd-block h2 .fd-ic { width: 32px; height: 32px; }
  .fd-card { padding: 16px; }
  .fd-ct th { width: auto; }
  .fd-ct, .fd-ct tbody, .fd-ct tr, .fd-ct th, .fd-ct td { display: block; }
  .fd-ct th { border-bottom: 0; padding-bottom: 0; }
  .fd-dx { font-size: 19px; }
  .fd-rt th, .fd-rt td { padding: 6px 4px; font-size: 15px; }
}