/* ==========================================================================
   SCANDINAVIAN MINIMALISM — one page. Loaded on a/scandinavian-minimalism.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   Warm, full and balanced: pale linen ground, oak as the one warm accent
   (decoration and underlines only, never text), every corner rounded,
   content in even panels two to a row. The opposite build to Japanese
   Minimalism next door (one small off-centre block per void). The shell
   (rail, top bar, community drawer) is never restyled: every rule here is
   scoped to .sn-hero-w or .sn-rec, bar the room ground on main.

   Type scale, one ratio (1.15) on an 18px base:
   s0 15.7 · s1 18 · s2 20.7 · s3 23.9 · s4 27.7 · s5 37.1 · hero 49.3px.
   One family, Familjen Grotesk (variable), 400 and 600.

   Contrast (every text pair AA or better):
   ink  #2F2B27 on ground #F5F1EA 12.5 · on card #FBF8F3 13.3 · on linen-2 #ECE5D9 11.2
   mute #5E574F on ground 6.3 · on card 6.7 · on linen-2 5.7 · on cool #EEF1F4 6.3
   oak-ink #6B5237 on ground 6.5 · on card 6.9 · on linen-2 5.8
   oak #C9A27C / #B48A63, sage #8E9A86: decoration and underlines only.

   Motion: none. The dials move only under the reader's hand, instantly;
   there is no transition to switch off.
   ========================================================================== */

@font-face {
  font-family: "Familjen X";
  src: url("fonts/familjen.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

.sn-page {
  --sn-bg: #F5F1EA;
  --sn-bg2: #ECE5D9;
  --sn-card: #FBF8F3;
  --sn-oak: #C9A27C;
  --sn-oak2: #B48A63;
  --sn-oak-ink: #6B5237;
  --sn-ink: #2F2B27;
  --sn-mut: #5E574F;
  --sn-sage: #8E9A86;
  --sn-line: #E3D7C4;
  --sn-r: 14px;
  --sn-s0: 15.66px; --sn-s1: 18px; --sn-s2: 20.7px; --sn-s3: 23.94px; --sn-s4: 27.7px; --sn-s5: 37.08px;
  --sn-sans: "Familjen X", "Seravek", "Segoe UI", "Trebuchet MS", sans-serif;
}
.sn-page main { background: var(--sn-bg); color: var(--sn-ink); overflow-x: hidden; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.sn-hero-w, .sn-rec { font: 400 var(--sn-s1)/1.65 var(--sn-sans); color: var(--sn-ink); }
.sn-hero-w h2, .sn-rec h2 { margin: 0 0 12px; font: 600 var(--sn-s4)/1.25 var(--sn-sans); }
.sn-rec h3 { margin: 0 0 6px; font: 600 var(--sn-s2)/1.3 var(--sn-sans); }
.sn-rec p { margin: 0 0 12px; }
.sn-rec p:last-child { margin-bottom: 0; }
.sn-rec em { font-synthesis: style; }
.sn-rec a {
  color: var(--sn-ink);
  text-decoration: underline 2px var(--sn-oak);
  text-underline-offset: 3px;
  border-radius: 4px;
}
.sn-rec a:hover { background: var(--sn-bg2); }
.sn-hero-w :focus-visible, .sn-rec :focus-visible { outline: 2px solid var(--sn-ink); outline-offset: 3px; border-radius: 6px; }

.sn-k { display: block; font-size: var(--sn-s0); line-height: 1.5; color: var(--sn-mut); }

/* ---- hero: title and sill beside the drawn room ------------------------ */
.sn-hero-w { max-width: 1000px; margin-inline: auto; padding: 40px 28px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.sn-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.sn-kick, .sn-aka { margin: 0; font-size: var(--sn-s0); color: var(--sn-mut); }
.sn-h1 { margin: 0; font: 600 calc(var(--sn-s5) * 1.33)/1.12 var(--sn-sans); color: var(--sn-ink); overflow-wrap: break-word; }
.sn-lede { margin: 12px 0 8px; font-size: var(--sn-s3); line-height: 1.45; color: var(--sn-mut); }
.sn-sill {
  height: 14px; margin-top: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sn-oak), var(--sn-oak2) 40%, var(--sn-oak) 70%, #D2AE8A);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.sn-room { aspect-ratio: 4 / 3; border-radius: var(--sn-r); background: linear-gradient(180deg, #FBF8F3, #EFE8DC 70%); position: relative; overflow: hidden; }
.sn-room > div { position: absolute; }
.sn-room__win { left: 12%; top: 10%; width: 34%; height: 52%; border-radius: 10px; background: linear-gradient(160deg, #fff, #E9EEF0); box-shadow: 0 0 0 8px #F9F6F0; }
.sn-room__light { left: 10%; top: 62%; width: 60%; height: 30%; background: radial-gradient(ellipse at 30% 0%, rgba(255, 250, 235, .9), transparent 70%); }
.sn-room__shadow { right: 8%; bottom: 10%; width: 52%; height: 4%; border-radius: 50%; background: rgba(47, 43, 39, .10); filter: blur(4px); }
.sn-room__table { right: 10%; bottom: 14%; width: 46%; height: 8%; border-radius: 999px; background: linear-gradient(90deg, var(--sn-oak), var(--sn-oak2)); }
.sn-room__leg { bottom: 0; width: 3%; height: 14%; border-radius: 4px; background: var(--sn-oak2); }
.sn-room__leg--a { right: 48%; }
.sn-room__leg--b { right: 14%; }
.sn-room__vase { right: 26%; bottom: 22%; width: 8%; height: 14%; border-radius: 40% 40% 20% 20%; background: var(--sn-sage); }

.sn-where blockquote { margin: 0; font-size: var(--sn-s3); line-height: 1.5; }
.sn-where blockquote p { margin: 0; }

/* ---- the record: warm panels, stacked on one even measure --------------- */
.sn-w { max-width: 1000px; margin-inline: auto; padding: 56px 28px 70px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.sn-w > *, .sn-hero-w > *, .sn-hero > *, .sn-two > *, .sn-cal__row > *, .sn-dims > *, .sn-meta > *, .sn-use > * { min-width: 0; }
.sn-card { background: var(--sn-card); border-radius: var(--sn-r); padding: 28px; }
.sn-claim { margin: 0 0 20px; font-size: var(--sn-s3); line-height: 1.5; }
.sn-claim p { margin: 0; }
.sn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sn-costs { margin: 0 0 8px; padding: 0; list-style: none; }
.sn-costs li::before { content: "·"; margin-right: .5em; color: var(--sn-oak2); }

.sn-dx { padding: 14px 18px; border-radius: 12px; background: var(--sn-bg2); font-weight: 600; }

/* the demonstration: one specimen, two dials (no transition: motion none) */
.sn-cal__row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: start; margin-top: 16px; }
.sn-spec {
  --t: 0; --f: 0;
  min-height: 300px; padding: 28px; position: relative; overflow: hidden;
  background: color-mix(in oklab, #F7F2EA calc(100% - var(--t) * 100%), #EEF1F4);
  border-radius: calc(var(--sn-r) * (1 - var(--t)));
  border: 1px solid color-mix(in oklab, #E5DCCD, #C9CFD6 calc(var(--t) * 100%));
}
.sn-spec__body { position: relative; left: calc(var(--f) * 28%); top: calc(var(--f) * 50px); max-width: calc(100% - var(--f) * 40%); }
.sn-rec .sn-spec__t { margin: 0; font-weight: 600; font-size: var(--sn-s4); line-height: 1.2; }
.sn-rec .sn-spec__d { margin: 8px 0 0; color: var(--sn-mut); opacity: calc(1 - var(--f)); max-height: calc((1 - var(--f)) * 6em); overflow: hidden; }
.sn-spec__chips { display: flex; gap: 8px; margin-top: 14px; opacity: calc(1 - var(--f)); }
.sn-spec__chips span { width: 44px; height: 44px; border-radius: calc(22px * (1 - var(--t)) + 2px); background: color-mix(in oklab, var(--sn-oak), #9AA5B1 calc(var(--t) * 100%)); }
.sn-dials label { display: block; font-weight: 600; margin-top: 14px; }
.sn-dials label:first-child { margin-top: 0; }
.sn-dials input { width: 100%; height: 44px; margin: 0; accent-color: var(--sn-ink); }
.sn-ends { display: flex; justify-content: space-between; gap: 8px; font-size: var(--sn-s0); color: var(--sn-mut); }
.sn-rec .sn-verdict { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--sn-bg2); font-weight: 600; }

/* what carries the look: a card per dimension, two to a row */
.sn-dims { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sn-dim { background: var(--sn-card); border-radius: 12px; padding: 14px 16px; }
.sn-dim dt { font-weight: 600; }
.sn-dim dd { margin: 4px 0 0; }
.sn-dim dd.sn-none { color: var(--sn-mut); }
.sn-rec .sn-k--c { display: inline-block; margin-left: 10px; padding: 0 10px; border-radius: 999px; background: var(--sn-bg2); color: var(--sn-oak-ink); font-weight: 600; }
.sn-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sn-swatch { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; }
.sn-sw__i { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sn-s0); color: var(--sn-mut); }
.sn-sw__i i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(47, 43, 39, .18); }

/* neighbours, rules, refusals: one rounded row each */
.sn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sn-list li { background: var(--sn-card); border-radius: 12px; padding: 12px 16px; }
.sn-list li > b { font-weight: 600; }
.sn-list li > b + .sn-k { display: inline; margin-left: 8px; }
.sn-list__t { display: block; }
.sn-n { color: var(--sn-mut); font-weight: 400; }

/* the facts */
.sn-meta { margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sn-meta > div { background: var(--sn-card); border-radius: 12px; padding: 12px 14px; }
.sn-meta > .sn-meta__w { grid-column: 1 / -1; }
.sn-meta dt { font-size: var(--sn-s0); color: var(--sn-mut); }
.sn-meta dd { margin: 2px 0 0; }
.sn-quiet { font-size: var(--sn-s0); color: var(--sn-mut); }
.sn-rec p.sn-quiet { margin: 12px 0; }
.sn-tw { overflow-x: auto; border-radius: var(--sn-r); background: var(--sn-card); }
.sn-res { width: 100%; border-collapse: collapse; font-size: var(--sn-s0); }
.sn-res th, .sn-res td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--sn-line); }
.sn-res thead th { color: var(--sn-mut); font-weight: 600; }
.sn-res tbody th { font-weight: 600; }
.sn-res tbody tr:last-child > * { border-bottom: 0; }

/* use it: rounded tiles, two to a row */
.sn-use { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sn-rec a.sn-tile { display: block; min-height: 44px; padding: 18px; border-radius: var(--sn-r); background: var(--sn-card); color: var(--sn-ink); text-decoration: none; }
.sn-use > .sn-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sn-rec a.sn-tile:hover { background: var(--sn-bg2); }
.sn-tile b { display: block; font-size: var(--sn-s2); font-weight: 600; text-decoration: underline 2px var(--sn-oak); text-underline-offset: 3px; }

@media (max-width: 820px) {
  .sn-hero, .sn-two, .sn-cal__row, .sn-dims, .sn-meta, .sn-use { grid-template-columns: 1fr; }
  .sn-hero-w { padding: 28px 16px 0; gap: 40px; }
  .sn-w { padding: 40px 16px 56px; gap: 40px; }
  .sn-card { padding: 20px; }
  .sn-h1 { font-size: var(--sn-s5); }
  .sn-spec { min-height: 240px; padding: 20px; }
}

/* ---- seen in the objects (Design Completion Campaign, 2026-09-29) --------
   What research found in the mid-century objects, three even cards. The
   figures are abstract diagrams (a softened corner, few members); the
   patterned craft object is a placeholder, since no licensed photograph is
   held. Oak and sage stay decoration; every sentence is ink on card. */
.sn-rec .sn-k--in { display: inline; }
.sn-seen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sn-seen__f { margin: 0; background: var(--sn-card); border-radius: var(--sn-r); padding: 18px; display: grid; gap: 12px; align-content: start; }
.sn-seen__f b { font-weight: 600; }
.sn-seen__f figcaption { font-size: var(--sn-s0); line-height: 1.55; }
.sn-seen__v { height: 120px; border-radius: 12px; background: var(--sn-bg2); position: relative; }
.sn-seen__v--round i { position: absolute; bottom: 22px; height: 46px; background: var(--sn-oak); border-radius: 23px; }
.sn-seen__v--round i:first-child { left: 18%; width: 34%; }
.sn-seen__v--round i:last-child { left: 58%; width: 24%; height: 70px; border-radius: 35px 35px 12px 12px; background: var(--sn-oak2); }
.sn-seen__v--few i:first-child { position: absolute; left: 30%; top: 30px; width: 40%; height: 14px; border-radius: 7px; background: var(--sn-oak2); }
.sn-seen__v--few i:last-child { position: absolute; left: calc(50% - 5px); top: 38px; width: 10px; height: 64px; border-radius: 5px 5px 0 0; background: var(--sn-oak); }
.sn-seen__ph { display: grid; place-items: center; padding: 12px; text-align: center; border: 2px dashed var(--sn-mut); background: transparent; font-size: 13px; line-height: 1.5; color: var(--sn-mut); letter-spacing: 0.02em; }
@media (max-width: 860px) { .sn-seen { grid-template-columns: 1fr; } }