/* Ilan Nest — cold to warm.
   One stylesheet for the whole site, written small-screen first. Every colour is a token in :root;
   every movement lives inside `prefers-reduced-motion: no-preference`, so the reduced state is the
   finished state and nothing waits on an animation to be read. */

@layer reset, ground, type, frame, ways, art, gauge, tools, foot, motion;

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Castoro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/castoro-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Castoro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/castoro.woff2") format("woff2");
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/host-grotesk.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  --inw-ground: #15100D;
  --inw-panel: #211914;
  --inw-panel-2: #2C211A;
  --inw-panel-3: #372A21;
  --inw-ink: #F3E9DD;
  --inw-muted: #AA9A8C;
  --inw-amber: #E59D4F;
  --inw-amber-soft: #F0B97A;
  --inw-cool: #8EA7BA;
  --inw-brick: #B34C29;
  --inw-cool-deep: #1B2227;
  --inw-warm-deep: #3B2516;
  --inw-wet: #0E171E;
  --inw-room: #1D272E;
  --inw-masonry: #4A2618;
  --inw-timber: #3B2A1F;
  --inw-slate: #2A211C;
  --inw-earth: #19120F;
  --inw-night: #1C2731;
  --inw-ok: #A9C7A0;

  --inw-shaft-0: rgb(21 16 13 / 0);
  --inw-shaft-1: rgb(229 157 79 / 0.035);
  --inw-shaft-2: rgb(229 157 79 / 0.075);
  --inw-shaft-rail: rgb(21 16 13 / 0.05);
  --inw-veil: rgb(21 16 13 / 0.86);
  --inw-veil-soft: rgb(21 16 13 / 0.55);
  --inw-veil-deep: rgb(21 16 13 / 0.92);
  --inw-veil-mid: rgb(21 16 13 / 0.74);
  --inw-veil-light: rgb(21 16 13 / 0.38);
  --inw-mist: rgb(243 233 221 / 0.42);
  --inw-mist-strong: rgb(243 233 221 / 0.58);
  --inw-mist-none: rgb(243 233 221 / 0);
  --inw-veil-none: rgb(21 16 13 / 0);
  --inw-hush: rgb(243 233 221 / 0.1);
  --inw-hush-2: rgb(243 233 221 / 0.16);
  --inw-amber-hush: rgb(229 157 79 / 0.16);
  --inw-cool-hush: rgb(142 167 186 / 0.18);
  --inw-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.9);

  --inw-serif: "Castoro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --inw-sans: "Host Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --inw-gutter: 20px;
  --inw-wide: 1240px;
  --inw-text: 64ch;
  --inw-ease: cubic-bezier(.2, .7, .15, 1);
  --inw-ring: var(--inw-amber);
}

@media (min-width: 700px) {
  :root { --inw-gutter: 5vw; }
}

/* ------------------------------------------------------------------ reset (only what this site uses) */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  input, select, button, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  /* author display rules (.inw-go is inline-flex) must not un-hide what the page hides */
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ ground: one window's light across the floor */
@layer ground {
  html { background: var(--inw-ground); scrollbar-color: var(--inw-panel-3) var(--inw-ground); }
  body {
    min-height: 100vh;
    background-color: var(--inw-ground);
    color: var(--inw-ink);
    font-family: var(--inw-sans);
    font-size: 1.0625rem;
    line-height: 1.62;
    font-weight: 400;
    overflow-x: clip;
  }
  /* A single shaft of evening light falling in from the upper left, as from one sash window,
     with the faint shadow of its meeting rail. One gradient, no repeat, nailed to the window. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(112deg,
        var(--inw-shaft-0) 18%,
        var(--inw-shaft-1) 31%,
        var(--inw-shaft-2) 40%,
        var(--inw-shaft-rail) 41.6%,
        var(--inw-shaft-2) 43.2%,
        var(--inw-shaft-1) 54%,
        var(--inw-shaft-0) 67%);
  }
  ::selection { background: var(--inw-amber); color: var(--inw-ground); }
  :focus-visible { outline: 2px solid var(--inw-ring); outline-offset: 3px; border-radius: 2px; }
}

/* ------------------------------------------------------------------ type */
@layer type {
  h1, h2 {
    font-family: var(--inw-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.35rem, 1.15rem + 4.1vw, 4.7rem); line-height: 1.02; }
  h2 { font-size: clamp(1.85rem, 1.2rem + 1.95vw, 3.05rem); line-height: 1.08; }
  h3 {
    font-family: var(--inw-sans);
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.005em;
  }
  p { max-width: var(--inw-text); }
  p + p { margin-top: 0.95em; }
  strong { font-weight: 650; }
  a { color: var(--inw-amber-soft); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { color: var(--inw-ink); }
  .inw-label {
    display: block;
    font-family: var(--inw-sans);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--inw-muted);
  }
  .inw-lede { font-size: clamp(1.12rem, 1rem + 0.45vw, 1.32rem); line-height: 1.55; }
  .inw-quiet { color: var(--inw-muted); font-size: 0.92rem; }
  .inw-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); white-space: nowrap; overflow: clip;
  }
}

/* ------------------------------------------------------------------ frame: skip link, masthead, page width */
@layer frame {
  .inw-skip {
    position: absolute; left: 12px; top: -80px; z-index: 50;
    padding: 12px 18px; min-height: 44px;
    background: var(--inw-amber); color: var(--inw-ground); font-weight: 650;
    text-decoration: none; border-radius: 3px;
  }
  .inw-skip:focus { top: 12px; }

  .inw-wrap { width: min(100% - 2 * var(--inw-gutter), var(--inw-wide)); margin-inline: auto; }

  /* stacked, centred lockup: the brand, not the legal entity */
  .inw-mast { padding: clamp(22px, 4vw, 40px) var(--inw-gutter) clamp(14px, 2.2vw, 22px); text-align: center; }
  .inw-lockup {
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--inw-ink); text-decoration: none; padding: 6px 10px;
  }
  .inw-lockup__mark { width: clamp(52px, 4.6vw, 66px); height: auto; }
  .inw-lockup__word { height: clamp(26px, 2.3vw, 32px); width: auto; fill: currentColor; }
  .inw-mast__line {
    margin: 8px auto 0; max-width: none;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--inw-muted);
  }

  .inw-go {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 20px;
    background: var(--inw-amber); color: var(--inw-ground);
    font-weight: 650; font-size: 1rem; text-decoration: none;
    border-radius: 3px 3px 14px 3px;
  }
  .inw-go:hover { background: var(--inw-amber-soft); color: var(--inw-ground); }
  .inw-go svg { width: 18px; height: 18px; flex: none; }
  .inw-go--quiet { background: var(--inw-panel-2); color: var(--inw-ink); }
  .inw-go--quiet:hover { background: var(--inw-panel-3); color: var(--inw-ink); }
  .inw-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
}

/* ------------------------------------------------------------------ the ways through: inline contents + return tab */
@layer ways {
  .inw-ways {
    width: min(100% - 2 * var(--inw-gutter), var(--inw-wide));
    margin: clamp(40px, 7vw, 84px) auto clamp(30px, 5vw, 60px);
    scroll-margin-top: 16px;
  }
  .inw-ways__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 22px; }
  .inw-ways__head p { color: var(--inw-muted); }
  .inw-ways__run { display: flex; flex-wrap: wrap; gap: 10px; }
  .inw-ways__run + .inw-ways__run { margin-top: 18px; }
  .inw-ways__run--pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .inw-ways__run--pages .inw-way--out { height: 100%; align-items: flex-start; justify-content: space-between; padding: 12px 12px 12px 14px; }
  .inw-ways__run--pages .inw-way--out svg { margin-top: 3px; }
  @media (min-width: 700px) {
    .inw-ways__run--pages { display: flex; flex-wrap: wrap; gap: 10px; }
    .inw-ways__run--pages .inw-way--out { height: auto; align-items: center; justify-content: flex-start; padding: 10px 18px; }
    .inw-ways__run--pages .inw-way--out svg { margin-top: 0; }
  }
  .inw-way {
    --t: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 66px; padding: 12px 18px 12px 16px;
    text-decoration: none; color: var(--inw-ink);
    background: color-mix(in oklab, var(--inw-cool-deep) calc(100% - var(--t) * 100%), var(--inw-warm-deep));
    box-shadow: inset 0 3px 0 color-mix(in oklab, var(--inw-cool) calc(100% - var(--t) * 100%), var(--inw-amber));
    border-radius: 2px 2px 16px 2px;
  }
  .inw-way b {
    font-family: var(--inw-serif); font-style: italic; font-weight: 400;
    font-size: 1.24rem; line-height: 1.15;
  }
  .inw-way span { font-size: 0.82rem; color: var(--inw-muted); line-height: 1.3; }
  .inw-way:hover { color: var(--inw-ink); background: color-mix(in oklab, var(--inw-panel-3) 70%, var(--inw-warm-deep)); }
  .inw-way--out {
    flex-direction: row; align-items: center; gap: 12px;
    min-height: 54px; padding: 10px 18px;
    background: var(--inw-panel-2); box-shadow: none;
    border-radius: 2px;
  }
  .inw-way--out b { font-family: var(--inw-sans); font-style: normal; font-weight: 600; font-size: 0.98rem; }
  .inw-way--out svg { width: 16px; height: 16px; flex: none; color: var(--inw-amber); }
  .inw-way[aria-current="page"] { background: var(--inw-panel-3); box-shadow: inset 0 0 0 2px var(--inw-amber); }
  .inw-way[aria-current="page"] svg { display: none; }
  .inw-ways__lead { margin-bottom: 12px; }
  .inw-ways__run--stages li:nth-child(2) .inw-way { --t: 0.17; }
  .inw-ways__run--stages li:nth-child(3) .inw-way { --t: 0.33; }
  .inw-ways__run--stages li:nth-child(4) .inw-way { --t: 0.5; }
  .inw-ways__run--stages li:nth-child(5) .inw-way { --t: 0.67; }
  .inw-ways__run--stages li:nth-child(6) .inw-way { --t: 0.83; }
  .inw-ways__run--stages li:nth-child(7) .inw-way { --t: 1; }

  .inw-return { position: fixed; right: 14px; bottom: 14px; z-index: 40; }
  .inw-return a {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 46px; padding: 0 18px 0 14px;
    background: var(--inw-panel-3); color: var(--inw-ink);
    font-weight: 650; font-size: 0.95rem; text-decoration: none;
    border-radius: 23px 23px 6px 23px;
    box-shadow: var(--inw-shadow);
  }
  .inw-return a:hover { background: var(--inw-warm-deep); color: var(--inw-ink); }
  .inw-return svg { width: 14px; height: 14px; color: var(--inw-amber); }
  .js .inw-return[data-away="no"] { opacity: 0; visibility: hidden; transform: translateY(14px); }
}

/* ------------------------------------------------------------------ art: small pictures with a lot of air, words set on their quiet parts */
@layer art {
  .inw-view { position: relative; margin: clamp(34px, 6vw, 70px) auto; overflow: clip; border-radius: 2px; }
  .inw-view img { width: 100%; }
  .inw-view--story { width: min(100%, 640px); }
  .inw-view--offset { margin-left: 0; }

  /* the opener: the street at dusk, inset with air all round; the headline in its sky */
  .inw-dusk { width: min(100% - 2 * var(--inw-gutter), 1060px); margin: clamp(10px, 3vw, 40px) auto 0; }
  .inw-dusk .inw-view { margin: 0; }
  .inw-dusk__over {
    position: absolute; inset: 0;
    padding: clamp(22px, 5vw, 64px) clamp(20px, 5vw, 66px) 0;
    background:
      radial-gradient(ellipse 72% 88% at 18% 30%, var(--inw-veil-mid) 0%, var(--inw-veil-light) 58%, var(--inw-veil-none) 100%);
  }
  .inw-dusk__over h1 { font-size: clamp(2.05rem, 1.1rem + 3.6vw, 4.2rem); }
  .inw-line { display: block; }
  .inw-dusk__over .inw-label { color: var(--inw-ink); margin-bottom: 14px; }
  .inw-dusk__below { width: min(100%, 860px); margin: clamp(26px, 4vw, 44px) auto 0; }
  .inw-note { margin-top: 18px; font-size: 0.84rem; color: var(--inw-muted); }

  /* words over the quiet part of a picture: below 700px they step down under it */
  .inw-view__words { padding: 18px 2px 0; }
  .inw-view__words p { font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.25; }
  @media (min-width: 700px) {
    .inw-view--words-right .inw-view__words {
      position: absolute; top: 0; right: 0; bottom: 0; width: 27%;
      display: flex; align-items: center; padding: 0 3.5% 0 0;
    }
    .inw-view--words-right .inw-view__words p { font-size: clamp(1.1rem, .8rem + .7vw, 1.4rem); }
    .inw-view--words-right .inw-view__words { z-index: 1; }
    .inw-view--words-right::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(270deg, var(--inw-veil-deep) 0%, var(--inw-veil-mid) 27%, var(--inw-veil-none) 52%);
    }
    .inw-view--words-dark::after { display: none; }
    .inw-view--words-dark .inw-view__words p { color: var(--inw-ground); }
    .inw-view--words-wall .inw-view__words {
      position: absolute; top: 9%; right: 6%; width: 40%; padding: 0;
    }
    .inw-view--words-wall::after,
    .inw-view--words-top::after,
    .inw-view--words-low::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
    }
    .inw-view--words-wall::after { background: linear-gradient(270deg, var(--inw-veil-soft) 0%, var(--inw-veil-none) 62%); }
    .inw-view--words-wall .inw-view__words { z-index: 1; }
    .inw-view--words-sky .inw-view__words {
      position: absolute; inset: 0 0 auto 0; z-index: 1; padding: 5% 6% 0 36%;
    }
    .inw-view--words-sky .inw-view__words p { color: var(--inw-ground); font-size: clamp(1.05rem, .7rem + .75vw, 1.4rem); }
    .inw-view--words-sky::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 70% 62% at 66% 14%, var(--inw-mist) 0%, var(--inw-mist-none) 100%);
    }
    .inw-view--words-top .inw-view__words {
      position: absolute; inset: 0 34% auto 0; z-index: 1; padding: 6% 0 0 7%;
    }
    .inw-view--words-top::after { background: linear-gradient(180deg, var(--inw-veil-deep) 0%, var(--inw-veil-mid) 42%, var(--inw-veil-none) 72%); }
    .inw-view--words-low .inw-view__words {
      position: absolute; inset: auto 0 0 0; z-index: 1; padding: 0 7% 6%;
    }
    .inw-view--words-low::after { background: linear-gradient(0deg, var(--inw-veil-deep) 0%, var(--inw-veil-mid) 38%, var(--inw-veil-none) 70%); }
  }
}

/* ------------------------------------------------------------------ the story and its thermometer */
@layer gauge {
  .inw-story { position: relative; width: min(100% - 2 * var(--inw-gutter), var(--inw-wide)); margin: 0 auto; }
  .inw-gauge {
    position: sticky; top: 0; z-index: 5;
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: 4px 14px;
    margin: 0 calc(-1 * var(--inw-gutter));
    padding: 10px var(--inw-gutter) 12px;
    background: linear-gradient(180deg, var(--inw-ground) 94%, var(--inw-veil-none));
  }
  .inw-gauge svg { width: 100%; height: auto; max-height: 31vh; }
  .inw-gauge__read { min-width: 0; }
  .inw-gauge__name { font-family: var(--inw-serif); font-style: italic; font-size: 1.22rem; line-height: 1.15; }
  .inw-gauge__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 6px; font-size: 0.78rem; }
  .inw-gauge__nums div { display: flex; flex-direction: column; }
  .inw-gauge__nums dt { color: var(--inw-muted); line-height: 1.2; }
  .inw-gauge__nums dd { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
  .inw-v-long { display: none; }
  .inw-gauge__verdict { margin-top: 6px; font-size: 0.8rem; font-weight: 650; color: var(--inw-cool); }
  .inw-gauge__verdict[data-wet="no"] { color: var(--inw-amber); }
  .inw-gauge__cap { display: none; }
  .inw-gauge .inw-g-room-name { display: none; }

  .inw-stage { padding: clamp(46px, 9vh, 96px) 0 clamp(36px, 6vh, 64px); min-height: 66vh; scroll-margin-top: 34vh; }
  .inw-stage > .inw-label { color: var(--inw-amber); margin-bottom: 10px; }
  .inw-stage h2 { margin-bottom: 18px; }
  .inw-stage__aside {
    margin-top: 24px; padding: 16px 18px; max-width: 58ch;
    background: var(--inw-panel); border-radius: 2px 2px 14px 2px;
    font-size: 0.95rem;
  }

  /* drawing parts — colours only here; movement is set by the script as transforms and opacity */
  .inw-g-sky { fill: url(#inw-night); }
  .inw-g-nightpaint { color: var(--inw-night); }
  .inw-g-shell { fill: var(--inw-room); }
  .inw-g-roof { fill: var(--inw-slate); }
  .inw-g-wall { fill: var(--inw-masonry); }
  .inw-g-floor { fill: var(--inw-timber); }
  .inw-g-earth { fill: var(--inw-earth); }
  .inw-g-cold { fill: var(--inw-cool); opacity: 0.06; }
  .inw-g-warm { fill: url(#inw-warmth); opacity: 0.62; }
  .inw-g-warmpaint { color: var(--inw-amber); }
  .inw-g-wet { fill: var(--inw-wet); opacity: 0; }
  .inw-g-wetpaint { color: var(--inw-wet); }
  .inw-g-glass { fill: var(--inw-cool-deep); }
  .inw-g-lit { fill: var(--inw-amber); opacity: 0.6; }
  .inw-g-air { fill: none; stroke: var(--inw-cool); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.27; }
  .inw-g-air-head { fill: var(--inw-cool); }
  .inw-g-dew { stroke: var(--inw-cool); stroke-width: 2.4; stroke-dasharray: 5 4; }
  .inw-g-face { stroke: var(--inw-amber); stroke-width: 2.6; }
  .inw-g-band { fill: var(--inw-cool); opacity: 0; }
  .inw-g-text { font-family: var(--inw-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
                paint-order: stroke; stroke: var(--inw-ground); stroke-width: 3px; stroke-linejoin: round; }
  .inw-g-text--dew { fill: var(--inw-cool); }
  .inw-g-text--face { fill: var(--inw-amber); }
  .inw-g-text--room { fill: var(--inw-ink); font-weight: 500; opacity: .8; }
  .inw-g-detail { fill: var(--inw-panel); }
  .inw-g-sash { fill: var(--inw-panel-3); }
  .inw-g-bead { fill: var(--inw-cool); opacity: 0; }
  .inw-g-washpaint { color: var(--inw-amber); }
  .inw-g-lead { stroke: var(--inw-muted); stroke-width: 1.2; fill: none; stroke-dasharray: 2 3; }
  .inw-g-wash { opacity: 0.7; }

  @media (min-width: 700px) {
    .inw-gauge { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); }
    .inw-gauge svg { max-height: 33vh; }
    .inw-gauge__nums { font-size: 0.86rem; }
  }

  @media (min-width: 1100px) {
    .inw-story {
      display: grid;
      grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
      column-gap: clamp(36px, 4.5vw, 80px);
    }
    .inw-gauge {
      grid-column: 1; grid-row: 1 / span 7; align-self: start;
      top: 18px; height: calc(100vh - 36px);
      display: flex; flex-direction: column; justify-content: center; gap: 14px;
      margin: 0; padding: 0;
      background: none;
    }
    .inw-gauge svg { max-height: 66vh; }
    .inw-gauge__read { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; }
    .inw-gauge__name { grid-column: 1 / -1; font-size: 1.5rem; }
    .inw-gauge__nums { grid-template-columns: repeat(4, auto); gap: 0 18px; margin-top: 0; font-size: 0.86rem; }
    .inw-gauge__nums div { display: flex; flex-direction: column; }
    .inw-gauge__nums dd { font-size: 1.06rem; }
    .inw-gauge__verdict { grid-column: 1 / -1; margin-top: 0; font-size: 0.92rem; }
    .inw-v-long { display: inline; }
    .inw-v-short { display: none; }
    .inw-gauge__cap { display: block; font-size: 0.8rem; color: var(--inw-muted); max-width: 46ch; }
    .inw-gauge .inw-g-room-name { display: inline; }
    .inw-stage { grid-column: 2; min-height: 76vh; scroll-margin-top: 18px; padding: 12vh 0 8vh; }
    .inw-stage:first-of-type { padding-top: 10vh; }
  }
}

/* ------------------------------------------------------------------ blocks after the story */
@layer frame {
  .inw-band { width: min(100% - 2 * var(--inw-gutter), var(--inw-wide)); margin: clamp(60px, 10vw, 130px) auto; }
  .inw-band--ours { display: grid; gap: 28px; }
  .inw-band--ours .inw-lede { font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem); line-height: 1.24; max-width: 30ch; }
  .inw-split { display: grid; gap: 22px; }
  .inw-split > div { max-width: 60ch; }
  .inw-figure-pair { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 22px; }
  .inw-figure-pair div { display: flex; flex-direction: column; }
  .inw-figure-pair b { font-family: var(--inw-serif); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; color: var(--inw-amber); }
  .inw-figure-pair span { font-size: 0.86rem; color: var(--inw-muted); max-width: 26ch; }

  .inw-write { display: grid; gap: 14px; margin-top: 26px; }
  .inw-letter {
    display: flex; flex-direction: column; gap: 6px;
    min-height: 120px; padding: 20px 22px 22px;
    background: var(--inw-panel); color: var(--inw-ink); text-decoration: none;
    border-radius: 2px 2px 22px 2px;
    box-shadow: inset 4px 0 0 var(--inw-amber);
  }
  .inw-letter b { font-family: var(--inw-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
  .inw-letter span { color: var(--inw-muted); font-size: 0.95rem; }
  .inw-letter em { font-style: normal; color: var(--inw-amber-soft); font-weight: 600; margin-top: auto; }
  .inw-letter:hover { background: var(--inw-panel-2); color: var(--inw-ink); }

  @media (min-width: 900px) {
    .inw-band--ours { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: 6vw; }
    .inw-split { grid-template-columns: 1fr 1fr; column-gap: 5vw; }
    .inw-write { grid-template-columns: 1fr 1fr; }
  }
}

/* ------------------------------------------------------------------ sub-page openers and bodies */
@layer frame {
  .inw-open { width: min(100% - 2 * var(--inw-gutter), var(--inw-wide)); margin: clamp(8px, 2vw, 24px) auto 0; }
  .inw-open__intro { max-width: 62ch; }
  .inw-open__intro .inw-label { color: var(--inw-amber); margin-bottom: 12px; }
  .inw-open__intro h1 { margin-bottom: 20px; }
  .inw-open--side { display: grid; gap: 30px; align-items: center; }
  .inw-open--side .inw-view { margin: 0; }
  @media (min-width: 980px) {
    .inw-open--side { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 5vw; }
    .inw-open--side.inw-open--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .inw-open--side.inw-open--flip .inw-view { order: -1; }
  }

  .inw-open .inw-view--opener { margin: 0 auto; width: min(100%, 1060px); }
  .inw-view--opener img { aspect-ratio: 2 / 1; object-fit: cover; }
  .inw-view--words-top.inw-view--opener img { object-position: 50% 6%; }
  .inw-view--words-low.inw-view--opener img { object-position: 50% 78%; }
  .inw-open__intro--under { margin: clamp(24px, 4vw, 40px) auto 0; width: min(100%, 860px); }
  .inw-open--brand { display: grid; gap: 26px; align-items: center; justify-items: start; }
  .inw-open__mark { width: clamp(150px, 22vw, 240px); }
  .inw-open--lost { padding: clamp(30px, 8vw, 90px) 0; }
  @media (min-width: 860px) {
    .inw-open--brand { grid-template-columns: auto minmax(0, 1fr); column-gap: 5vw; }
  }
  .inw-body { width: min(100% - 2 * var(--inw-gutter), 1120px); margin: 0 auto; }
  .inw-trio { display: grid; gap: 0; }
  @media (min-width: 980px) {
    .inw-part--split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 5vw; align-items: start; }
    .inw-part--split > .inw-label, .inw-part--split > h2 { grid-column: 1; }
    .inw-part--split > h2 { grid-row: 2 / span 8; }
    .inw-part--split > :not(.inw-label):not(h2) { grid-column: 2; }
    .inw-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3vw; }
    .inw-trio .inw-part { padding-top: clamp(40px, 5vw, 64px); }
    .inw-trio h2 { font-size: clamp(1.45rem, 1.05rem + 0.95vw, 2rem); }
    .inw-trio p { font-size: 0.98rem; }
  }
  .inw-part { padding: clamp(44px, 7vw, 84px) 0 0; scroll-margin-top: 18px; }
  .inw-part > .inw-label { color: var(--inw-amber); margin-bottom: 10px; }
  .inw-part h2 { margin-bottom: 18px; max-width: 22ch; }
  .inw-part h3 { margin: 26px 0 8px; }

  .inw-steps { display: grid; gap: 12px; margin-top: 24px; counter-reset: inw-step; }
  .inw-steps li {
    position: relative; padding: 16px 18px 16px 62px;
    background: var(--inw-panel); border-radius: 2px 2px 14px 2px;
  }
  .inw-steps li::before {
    counter-increment: inw-step; content: counter(inw-step);
    position: absolute; left: 18px; top: 12px;
    font-family: var(--inw-serif); font-size: 1.9rem; line-height: 1; color: var(--inw-amber);
  }
  .inw-steps h3 { margin: 0 0 4px; }
  .inw-steps p { font-size: 0.97rem; }
  .inw-steps .inw-wait {
    display: inline-block; margin-top: 8px; padding: 3px 10px;
    background: var(--inw-cool-hush); color: var(--inw-cool);
    font-size: 0.8rem; font-weight: 600; border-radius: 10px;
  }

  .inw-three { display: grid; gap: 14px; margin-top: 22px; }
  .inw-three > div { padding: 18px 20px; background: var(--inw-panel); border-radius: 2px 2px 16px 2px; }
  .inw-three dt { font-family: var(--inw-serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; margin-bottom: 6px; }
  .inw-three dd { font-size: 0.97rem; }
  .inw-three dd + dd { margin-top: 8px; color: var(--inw-muted); font-size: 0.9rem; }
  @media (min-width: 860px) { .inw-three { grid-template-columns: repeat(3, 1fr); } }

  .inw-year { display: grid; gap: 10px; margin-top: 24px; }
  .inw-year > div {
    display: grid; gap: 4px 18px; padding: 16px 18px;
    background: color-mix(in oklab, var(--inw-cool-deep) calc(100% - var(--t, 0) * 100%), var(--inw-warm-deep));
    border-radius: 2px;
  }
  .inw-year dt { font-family: var(--inw-serif); font-style: italic; font-size: 1.3rem; }
  .inw-year dd { font-size: 0.97rem; }
  .inw-year > div:nth-child(2) { --t: 0.35; }
  .inw-year > div:nth-child(3) { --t: 0.85; }
  .inw-year > div:nth-child(4) { --t: 0.6; }
  @media (min-width: 760px) { .inw-year > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }

  .inw-facts { display: grid; gap: 0; margin-top: 18px; }
  .inw-facts > div { display: grid; gap: 2px 20px; padding: 12px 0; box-shadow: 0 1px 0 var(--inw-hush); }
  .inw-facts dt { color: var(--inw-muted); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.03em; }
  .inw-facts dd { font-size: 1rem; }
  @media (min-width: 700px) { .inw-facts > div { grid-template-columns: 13rem 1fr; } }

  .inw-quote {
    margin-top: 22px; padding: 18px 22px; max-width: 62ch;
    background: var(--inw-panel); border-radius: 2px 2px 18px 2px;
    box-shadow: inset 4px 0 0 var(--inw-brick);
  }
  .inw-quote p { font-family: var(--inw-serif); font-style: italic; font-size: 1.18rem; line-height: 1.4; }
  .inw-quote footer { margin-top: 8px; font-size: 0.84rem; color: var(--inw-muted); }

  .inw-bars { display: grid; gap: 14px; margin-top: 22px; max-width: 640px; }
  .inw-bar { display: grid; gap: 6px; }
  .inw-bar__track { height: 14px; background: var(--inw-panel-2); border-radius: 7px; overflow: clip; }
  .inw-bar__fill { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--inw-brick); border-radius: 7px; }
  .inw-bar__fill--b { background: var(--inw-amber); }
  .inw-bar__fill--halliwell { --v: 48.3; }
  .inw-bar__fill--bolton { --v: 33.2; }
  .inw-bar b { font-weight: 650; }

  .inw-words { display: grid; gap: 10px; margin-top: 20px; }
  .inw-words > div { padding: 14px 18px; background: var(--inw-panel); border-radius: 2px; }
  .inw-words dt { font-family: var(--inw-serif); font-style: italic; font-size: 1.25rem; }
  .inw-words dd { font-size: 0.95rem; color: var(--inw-ink); }
  @media (min-width: 760px) { .inw-words { grid-template-columns: 1fr 1fr; } }

  .inw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .inw-chips li { padding: 6px 14px; background: var(--inw-panel-2); border-radius: 16px; font-size: 0.92rem; }

  .inw-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 0.95rem; }
  .inw-table caption { text-align: left; color: var(--inw-muted); font-size: 0.86rem; padding-bottom: 8px; }
  .inw-table th, .inw-table td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; box-shadow: 0 1px 0 var(--inw-hush); }
  .inw-table th { font-weight: 650; }
  .inw-table td:last-child { color: var(--inw-muted); }
}

/* ------------------------------------------------------------------ tools: the wall check and the notice dates */
@layer tools {
  .inw-check { display: grid; gap: 22px; margin-top: 26px; }
  .inw-check__in { display: grid; gap: 14px; align-content: start; }
  .inw-field { display: grid; gap: 6px; }
  .inw-field label, .inw-field legend { font-size: 0.9rem; font-weight: 650; }
  .inw-field small { color: var(--inw-muted); font-size: 0.82rem; }
  .inw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .inw-num {
    display: flex; align-items: center; gap: 8px;
    background: var(--inw-panel-2); border-radius: 2px 2px 10px 2px; padding: 0 12px 0 0;
  }
  .inw-num input, .inw-sel select, .inw-date input {
    width: 100%; min-height: 48px; padding: 8px 12px;
    background: var(--inw-panel-2); color: var(--inw-ink);
    border: 0; border-radius: 2px 2px 10px 2px;
    font-variant-numeric: tabular-nums; font-size: 1.05rem;
  }
  .inw-num input { padding-right: 0; }
  .inw-num span { color: var(--inw-muted); font-size: 0.9rem; white-space: nowrap; }
  .inw-sel select { appearance: none; padding-right: 36px; background-image: none; }
  .inw-sel { position: relative; }
  .inw-sel::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--inw-amber); border-bottom: 2px solid var(--inw-amber);
    transform: rotate(45deg); pointer-events: none;
  }
  .inw-num:focus-within, .inw-sel select:focus-visible, .inw-date input:focus-visible { outline: 2px solid var(--inw-ring); outline-offset: 2px; }
  .inw-num input:focus-visible { outline: none; }
  .inw-check__go { justify-self: start; border: 0; }
  .inw-notice + .inw-quiet { margin-top: 22px; }

  .inw-check__out {
    display: grid; gap: 16px; align-content: start;
    padding: clamp(18px, 3vw, 28px);
    background: var(--inw-panel); border-radius: 2px 2px 26px 2px;
  }
  .inw-verdict { font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.15; }
  .inw-verdict[data-wet="yes"] { color: var(--inw-cool); }
  .inw-verdict[data-wet="no"] { color: var(--inw-amber); }
  .inw-readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
  .inw-readings div { display: flex; flex-direction: column; }
  .inw-readings dt { font-size: 0.82rem; color: var(--inw-muted); }
  .inw-readings dd { font-family: var(--inw-serif); font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .inw-readings dd small { font-family: var(--inw-sans); font-size: 0.85rem; color: var(--inw-muted); margin-left: 3px; }
  .inw-advice { font-size: 0.97rem; }
  .inw-advice li { margin-top: 6px; }
  .inw-sum { font-size: 0.84rem; color: var(--inw-muted); }

  .inw-wall svg { width: 100%; height: auto; max-height: 320px; }
  .inw-w-room { fill: var(--inw-amber); opacity: 0.85; }
  .inw-w-brick { fill: var(--inw-brick); }
  .inw-w-out { fill: var(--inw-cool); opacity: 0.4; }
  .inw-w-glass { fill: var(--inw-cool); opacity: 0.75; }
  .inw-w-frame { fill: var(--inw-panel-3); }
  .inw-w-line-dew { stroke: var(--inw-cool); stroke-width: 2.5; stroke-dasharray: 6 4; }
  .inw-w-line-wall { stroke: var(--inw-amber); stroke-width: 3; }
  .inw-w-line-glass { stroke: var(--inw-ink); stroke-width: 2; stroke-dasharray: 2 3; }
  .inw-w-text { font-family: var(--inw-sans); font-size: 12px; font-weight: 600; fill: var(--inw-ink); }
  .inw-w-text--dew { fill: var(--inw-cool); }
  .inw-w-text--wall { fill: var(--inw-amber); }
  .inw-w-bar, .inw-w-mould { transform-box: fill-box; transform-origin: 50% 100%; }
  .inw-w-bead { fill: var(--inw-ink); }
  .inw-w-bead-set { opacity: 1; }
  .inw-w-mould { fill: var(--inw-cool); opacity: 0.45; }

  @media (min-width: 900px) {
    .inw-check { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4vw; align-items: start; }
  }

  .inw-notice { display: grid; gap: 18px; margin-top: 24px; }
  .inw-notice__in { display: grid; gap: 14px; }
  .inw-notice__out { padding: 18px 20px; background: var(--inw-panel); border-radius: 2px 2px 22px 2px; }
  .inw-dates { display: grid; gap: 10px; margin-top: 4px; }
  .inw-dates > div { display: grid; gap: 2px; padding: 10px 0 10px 16px; box-shadow: inset 3px 0 0 var(--inw-cool); }
  .inw-dates > div:nth-child(2) { box-shadow: inset 3px 0 0 var(--inw-amber); }
  .inw-dates > div:nth-child(3) { box-shadow: inset 3px 0 0 var(--inw-brick); }
  .inw-dates dt { font-size: 0.86rem; color: var(--inw-muted); }
  .inw-dates dd { font-family: var(--inw-serif); font-size: 1.35rem; line-height: 1.2; }
  @media (min-width: 900px) { .inw-notice { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4vw; } }
}

/* ------------------------------------------------------------------ registered details and foot */
@layer foot {
  .inw-foot {
    margin-top: clamp(70px, 11vw, 150px);
    padding: clamp(40px, 6vw, 70px) 0 clamp(80px, 9vw, 110px);
    background: var(--inw-panel);
  }
  .inw-foot__in { width: min(100% - 2 * var(--inw-gutter), var(--inw-wide)); margin: 0 auto; display: grid; gap: 30px; }
  .inw-foot__mark { width: clamp(112px, 12vw, 150px); }
  .inw-foot h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: 10px; }
  .inw-reg { display: grid; gap: 0; }
  .inw-reg > div { display: grid; gap: 1px 18px; padding: 9px 0; box-shadow: 0 1px 0 var(--inw-hush); }
  .inw-reg dt { color: var(--inw-muted); font-size: 0.84rem; font-weight: 600; }
  .inw-reg dd { font-size: 0.97rem; }
  .inw-foot__mail { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
  .inw-foot__small { color: var(--inw-muted); font-size: 0.84rem; max-width: 70ch; }
  @media (min-width: 760px) { .inw-reg > div { grid-template-columns: 12rem 1fr; } }
  @media (min-width: 1000px) {
    .inw-foot__in { grid-template-columns: auto minmax(0, 1fr); column-gap: 5vw; align-items: start; }
  }
}

/* ------------------------------------------------------------------ motion: all of it, and only here */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    .inw-way, .inw-letter, .inw-go, .inw-return a { transition: background-color .35s var(--inw-ease), transform .35s var(--inw-ease), color .25s ease; }
    .inw-way:hover, .inw-letter:hover { transform: translateY(-3px); }
    .inw-go:hover { transform: translateY(-1px); }
    a { transition: color .2s ease; }
    .inw-num, .inw-sel select { transition: background-color .25s ease; }
    .inw-num:hover, .inw-sel select:hover { background-color: var(--inw-panel-3); }
    .inw-num:hover input { background-color: var(--inw-panel-3); }
    .inw-return { transition: opacity .45s var(--inw-ease), transform .45s var(--inw-ease), visibility .45s; }

    /* the opener arrives: the mark settles first, the words over the dusk follow */
    .inw-lockup__mark { animation: inw-settle 1.1s var(--inw-ease) both; }
    .inw-lockup__word { animation: inw-settle 1.1s var(--inw-ease) .18s both; }
    .inw-dusk__over > * { animation: inw-dawn 1.4s var(--inw-ease) both; }
    .inw-dusk__over > :nth-child(2) { animation-delay: .25s; }

    /* rises, ticked by the scroll handler */
    .js [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--inw-ease), transform 1.15s var(--inw-ease); }
    .js [data-rise].is-risen { opacity: 1; transform: none; }

    /* the drawing: the script sets transforms and opacity every frame; these smooth the steps */
    .inw-gauge.is-live :is(.inw-g-warm, .inw-g-cold, .inw-g-wet, .inw-g-lit, .inw-g-bead, .inw-g-band, .inw-g-wash) { transition: opacity .5s ease; }
    .inw-gauge.is-live .inw-g-line { transition: transform .5s var(--inw-ease); }
    .inw-w-move { transition: transform .55s var(--inw-ease); }
    .inw-w-bead-set, .inw-w-mould { transition: opacity .45s ease; }
    /* the travelling wash keeps drifting across the house once the heat stays */
    .inw-gauge[data-kept="yes"] .inw-g-wash-drift { animation: inw-wash 9s ease-in-out infinite alternate; }
    /* moving air does move */
    .inw-g-air { animation: inw-breeze 3.2s ease-in-out infinite alternate; }
    /* a drop running down the cold glass */
    .inw-g-run { animation: inw-run 4.6s ease-in infinite; }
    .inw-w-bead--run { animation: inw-run 3.8s ease-in infinite; }
  }

  @keyframes inw-settle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  @keyframes inw-dawn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes inw-wash { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
  @keyframes inw-breeze { from { transform: translateX(-3px); } to { transform: translateX(4px); } }
  @keyframes inw-run { 0% { transform: translateY(0); } 70% { transform: translateY(14px); } 100% { transform: translateY(14px); opacity: 0; } }
}

/* ------------------------------------------------------------------ putting a house forward */
@layer art {
  @media (min-width: 700px) {
    /* words set in the page's own dark ink, straight onto the plain plaster of the picture */
    .inw-view--words-plaster .inw-view__words {
      position: absolute; inset: 0 0 0 auto; width: 39%; z-index: 1;
      display: flex; flex-direction: column; justify-content: center; padding: 0 4% 0 0;
    }
    .inw-view--words-plaster .inw-view__words h1 { font-size: clamp(2.2rem, 1rem + 2.9vw, 3.9rem); }
    .inw-view--words-plaster .inw-view__words h1,
    .inw-view--words-plaster .inw-view__words .inw-label { color: var(--inw-ground); }
  }
}

@layer tools {
  .inw-fwd { display: grid; gap: 20px; margin-top: 22px; }
  .inw-fwd__about { color: var(--inw-muted); }

  /* the four steps as a rail of words, cold to warm like the house itself */
  .inw-fwd__rail { display: flex; flex-wrap: wrap; gap: 8px; }
  .inw-fwd__rail button {
    --t: 0;
    min-height: 46px; padding: 8px 16px; border: 0;
    border-radius: 2px 2px 14px 2px;
    background: color-mix(in oklab, var(--inw-cool-deep) calc(100% - var(--t) * 100%), var(--inw-warm-deep));
    box-shadow: inset 0 3px 0 color-mix(in oklab, var(--inw-cool) calc(100% - var(--t) * 100%), var(--inw-amber));
    color: var(--inw-ink);
    font-family: var(--inw-serif); font-style: italic; font-size: 1.12rem;
  }
  .inw-fwd__rail button:nth-child(2) { --t: 0.33; }
  .inw-fwd__rail button:nth-child(3) { --t: 0.66; }
  .inw-fwd__rail button:nth-child(4) { --t: 1; }
  .inw-fwd__rail button[aria-current="step"] { background: var(--inw-panel-3); box-shadow: inset 0 0 0 2px var(--inw-amber); }
  @media (max-width: 459px) { .inw-fwd__rail { gap: 6px; } .inw-fwd__rail button { flex: 1 1 auto; padding: 8px 10px; font-size: 1rem; } }

  .inw-fwd__step {
    min-width: 0; margin: 0; border: 0;
    padding: clamp(18px, 3vw, 30px);
    background: var(--inw-panel); border-radius: 2px 2px 26px 2px;
    display: grid; gap: 18px;
  }
  .inw-fwd.is-stepped .inw-fwd__step.is-folded { display: none; }
  /* a floated legend is ordinary content, so it sits inside the panel's padding */
  .inw-fwd__step > legend, .inw-pick > legend { float: left; width: 100%; padding: 0; }
  .inw-fwd__legend { font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.15rem); line-height: 1.1; }
  .inw-fwd__legend .inw-label { font-family: var(--inw-sans); font-style: normal; color: var(--inw-amber); margin-bottom: 8px; }
  .inw-fwd__legend:focus-visible { outline-offset: 6px; }
  .inw-fwd__lead { color: var(--inw-muted); max-width: 62ch; }

  .inw-field { display: grid; gap: 6px; min-width: 0; }
  .inw-field label { font-size: 0.92rem; font-weight: 650; }
  .inw-field small { color: var(--inw-muted); font-weight: 400; }
  .inw-field--short { max-width: 28rem; }
  .inw-text {
    width: 100%; min-height: 48px; padding: 10px 12px;
    background: var(--inw-panel-2); color: var(--inw-ink);
    border: 0; border-radius: 2px 2px 10px 2px; font-size: 1.05rem;
  }
  textarea.inw-text { resize: vertical; line-height: 1.5; min-height: 110px; }
  .inw-text::placeholder { color: var(--inw-muted); }
  .inw-text:focus-visible { outline: 2px solid var(--inw-ring); outline-offset: 2px; }
  .inw-fwd__pc { display: flex; flex-wrap: wrap; gap: 10px; }
  .inw-fwd__pc .inw-text { flex: 1 1 9rem; text-transform: uppercase; }
  .inw-fwd__pc .inw-go, .inw-fwd__moves .inw-go, .inw-look .inw-go { border: 0; }

  .inw-wardline {
    max-width: 62ch; padding: 12px 14px 12px 17px;
    background: var(--inw-panel-2); border-radius: 2px 2px 12px 2px;
    box-shadow: inset 3px 0 0 var(--inw-muted); font-size: 0.97rem;
  }
  .inw-wardline[data-verdict="inside"] { box-shadow: inset 3px 0 0 var(--inw-amber); }
  .inw-wardline[data-verdict="outside-wards"] { box-shadow: inset 3px 0 0 var(--inw-brick); }
  .inw-wardline[data-verdict="outside-bolton"], .inw-wardline[data-verdict="not-found"] { box-shadow: inset 3px 0 0 var(--inw-cool); }

  /* one choice per question: tiles that are the radio's own label */
  .inw-pick { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
  .inw-pick > legend { font-weight: 650; font-size: 1rem; }
  /* tiles sized to how many choices there are, so a last one never sits alone on a row */
  .inw-pick__set { --n: 4; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .inw-pick__set:not(:has(> :nth-child(4))) { --n: 3; }
  .inw-pick__set:not(:has(> :nth-child(3))) { --n: 2; }
  @media (min-width: 360px) {
    .inw-pick__set:has(> :nth-child(4)), .inw-pick__set:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 760px) {
    .inw-pick:not(.inw-pick--layer) .inw-pick__set { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  }
  .inw-pick__opt {
    display: flex; align-items: flex-start; gap: 10px;
    min-height: 48px; padding: 12px 14px;
    background: var(--inw-panel-2); border-radius: 2px 2px 12px 2px;
    line-height: 1.35; font-size: 0.97rem; cursor: pointer;
  }
  .inw-pick__opt:has(input:checked) { background: var(--inw-warm-deep); box-shadow: inset 0 0 0 2px var(--inw-amber); }
  .inw-pick__opt:has(input:focus-visible) { outline: 2px solid var(--inw-ring); outline-offset: 2px; }
  .inw-pick--layer .inw-pick__opt:has(input[value="tired"]:checked) { box-shadow: inset 0 0 0 2px var(--inw-brick); }
  .inw-pick--layer .inw-pick__opt:has(input[value="failed"]:checked) { background: var(--inw-cool-deep); box-shadow: inset 0 0 0 2px var(--inw-cool); }
  .inw-pick--layer .inw-pick__opt:has(input[value="unknown"]:checked) { background: var(--inw-panel-3); box-shadow: inset 0 0 0 2px var(--inw-muted); }

  .inw-fwd__pair { display: grid; gap: 22px; }
  .inw-fwd__layers { display: grid; gap: 20px; min-width: 0; }
  .inw-fwd__two { display: grid; gap: 14px; }
  .inw-fwd__moves { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
  .inw-fwd__moves > :last-child { margin-left: auto; }
  .inw-fwd__say { color: var(--inw-amber-soft); font-weight: 600; }
  .inw-fwd__say:empty { display: none; }
  .inw-consent {
    display: flex; align-items: flex-start; gap: 12px; max-width: 64ch;
    padding: 14px 16px; background: var(--inw-panel-2); border-radius: 2px 2px 12px 2px; cursor: pointer;
  }
  .inw-consent:has(input:focus-visible) { outline: 2px solid var(--inw-ring); outline-offset: 2px; }
  /* the choices are drawn in the site's own colours: a ring at rest, amber when chosen */
  .inw-pick__opt input, .inw-consent input {
    appearance: none; -webkit-appearance: none;
    flex: none; width: 20px; height: 20px; margin: 1px 0 0;
    background: var(--inw-ground); border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--inw-muted);
    cursor: pointer;
  }
  .inw-consent input { border-radius: 4px; margin-top: 2px; }
  .inw-pick__opt input:checked, .inw-consent input:checked {
    background: var(--inw-amber);
    box-shadow: inset 0 0 0 2px var(--inw-amber), inset 0 0 0 5px var(--inw-ground);
  }
  .inw-pick__opt input:focus-visible, .inw-consent input:focus-visible { outline: none; }
  @media (forced-colors: active) {
    .inw-pick__opt input, .inw-consent input { appearance: auto; -webkit-appearance: auto; }
  }
  .inw-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: clip; opacity: 0; }

  /* the house, drawn in section, colouring in as it is described */
  .inw-fwd__house {
    margin: 0; padding: 12px; display: grid; gap: 10px; align-content: start;
    background: var(--inw-ground); border-radius: 2px 2px 20px 2px;
  }
  .inw-h { width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
  .inw-h-sky { fill: none; }
  .inw-h-earth { fill: var(--inw-earth); }
  .inw-h-room { fill: var(--inw-room); }
  .inw-h-fill { fill: var(--inw-panel-3); }
  .inw-h-line { fill: none; stroke: var(--inw-panel-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .inw-h [data-state="sound"] .inw-h-fill { fill: var(--inw-amber); }
  .inw-h [data-state="sound"] .inw-h-line { stroke: var(--inw-amber); }
  .inw-h [data-state="tired"] .inw-h-fill { fill: var(--inw-brick); }
  .inw-h [data-state="tired"] .inw-h-line { stroke: var(--inw-brick); }
  .inw-h [data-state="failed"] .inw-h-fill { fill: var(--inw-cool); }
  .inw-h [data-state="failed"] .inw-h-line { stroke: var(--inw-cool); }
  .inw-h [data-state="unknown"] .inw-h-fill { fill: none; stroke: var(--inw-muted); stroke-width: 2; stroke-dasharray: 5 4; }
  .inw-h [data-state="unknown"] .inw-h-line { stroke: var(--inw-muted); stroke-dasharray: 5 4; }
  .inw-h [data-layer="damp"][data-state="blank"] .inw-h-fill { fill: none; }
  .inw-h [data-layer="damp"][data-state="sound"] { opacity: 0.3; }
  .inw-h [data-layer="damp"][data-state="tired"] { opacity: 0.55; }
  .inw-h-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--inw-muted); }
  .inw-h-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border-radius: 3px; background: var(--inw-panel-3); }
  .inw-h-swatch[data-state="sound"] { background: var(--inw-amber); }
  .inw-h-swatch[data-state="tired"] { background: var(--inw-brick); }
  .inw-h-swatch[data-state="failed"] { background: var(--inw-cool); }
  .inw-h-swatch[data-state="unknown"] { background: none; outline: 2px dashed var(--inw-muted); outline-offset: -2px; }
  .inw-fwd__house figcaption { font-size: 0.82rem; }

  @media (max-width: 979px) {
    /* on a phone the drawing rides at the top of the layers while they are answered */
    .inw-fwd__house {
      order: -1; position: sticky; top: 0; z-index: 2;
      grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px;
      box-shadow: 0 10px 18px -12px var(--inw-ground);
    }
    .inw-fwd__house .inw-h { width: auto; height: 22vh; max-height: 170px; margin: 0; }
    .inw-fwd__house .inw-h-key { flex-direction: column; gap: 3px; }
    .inw-fwd__house figcaption { grid-column: 1 / -1; }
  }
  @media (min-width: 700px) { .inw-fwd__two { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 980px) {
    .inw-fwd__pair { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
    .inw-fwd__house { position: sticky; top: 18px; padding: 18px; }
    .inw-fwd__two { grid-template-columns: repeat(3, 1fr); }
  }

  /* what happens next: four stages, cold to warm */
  .inw-next { display: grid; gap: 10px; margin-top: 22px; counter-reset: inw-next; }
  .inw-next__stage {
    --t: 0;
    position: relative; display: grid; gap: 5px; align-content: start;
    padding: 16px 18px 18px 62px;
    background: color-mix(in oklab, var(--inw-cool-deep) calc(100% - var(--t) * 100%), var(--inw-warm-deep));
    border-radius: 2px 2px 16px 2px;
  }
  .inw-next__stage::before {
    counter-increment: inw-next; content: counter(inw-next);
    position: absolute; left: 20px; top: 12px;
    font-family: var(--inw-serif); font-size: 1.9rem; line-height: 1;
    color: color-mix(in oklab, var(--inw-cool) calc(100% - var(--t) * 100%), var(--inw-amber));
  }
  .inw-next__stage b { font-family: var(--inw-serif); font-style: italic; font-weight: 400; font-size: 1.32rem; line-height: 1.15; }
  .inw-next__stage em { font-style: normal; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inw-muted); }
  .inw-next__stage span { font-size: 0.96rem; }
  .inw-next__stage[data-at="now"] { box-shadow: inset 0 0 0 2px var(--inw-amber); }
  .inw-next__stage[data-at="now"] em { color: var(--inw-amber-soft); }
  .inw-next__stage[data-at="ahead"] span { color: var(--inw-muted); }

  /* checking a house, and the pages the Worker draws */
  .inw-look { display: grid; gap: 14px; max-width: 34rem; }
  .inw-look .inw-go { justify-self: start; }
  .inw-held .inw-body { padding-bottom: 10px; }
  .inw-held h1 { margin: 6px 0 18px; }
  .inw-held__ref { font-style: normal; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .inw-held .inw-lede + .inw-quiet { margin-top: 14px; }
  .inw-stored {
    margin-bottom: 16px; padding: 12px 16px; max-width: 64ch;
    background: var(--inw-warm-deep); box-shadow: inset 3px 0 0 var(--inw-amber); border-radius: 2px 2px 12px 2px;
  }
  .inw-said { display: grid; gap: 22px; margin-top: 18px; }
  .inw-said .inw-fwd__house { position: static; order: 0; display: grid; grid-template-columns: none; }
  .inw-said .inw-fwd__house .inw-h { height: auto; width: 100%; max-height: none; margin: 0 auto; }
  .inw-said .inw-fwd__house .inw-h-key { flex-direction: row; }
  .inw-asks { display: grid; gap: 8px; margin: 6px 0 18px; padding-left: 1.2em; font-size: 1.04rem; }
  .inw-chips--plain li { border-radius: 2px 2px 10px 2px; }
  .inw-fwd--change, .inw-fwd--withdraw { margin-top: 18px; max-width: 900px; }
  .inw-ways--short { margin-top: clamp(30px, 5vw, 60px); }
  @media (min-width: 900px) {
    .inw-said { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .inw-h-fill, .inw-h-line, .inw-h-layer { transition: fill .45s var(--inw-ease), stroke .45s var(--inw-ease), opacity .45s ease; }
    .inw-pick__opt, .inw-fwd__rail button { transition: background-color .25s ease, box-shadow .25s ease; }
    .inw-pick__opt:not(:has(input:checked)):hover { background-color: var(--inw-panel-3); }
    .inw-fwd.is-stepped .inw-fwd__step:not(.is-folded) { animation: inw-dawn .5s var(--inw-ease) both; }
  }
}

/* ------------------------------------------------------------------ the company's small print (realism round) */
@layer art {
  @media (min-width: 700px) {
    /* the opener words for the new pages: each set on the picture's own quiet part */
    .inw-view--words-glass .inw-view__words,
    .inw-view--words-dusk .inw-view__words { position: absolute; z-index: 1; padding: 0; }
    .inw-view--words-glass::after,
    .inw-view--words-dusk::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
    .inw-view--words-glass h1, .inw-view--words-dusk h1 { font-size: clamp(2.2rem, 1rem + 2.9vw, 3.9rem); }
    .inw-view--words-dusk .inw-label { color: var(--inw-ink); margin-bottom: 10px; }

    /* the misted pane: dark words on the clear glass above the beads, lifted by a little mist */
    .inw-view--words-glass .inw-view__words { inset: 0 0 auto 37%; padding: 5% 6% 0 0; }
    .inw-view--words-glass h1, .inw-view--words-glass .inw-label { color: var(--inw-ground); }
    .inw-view--words-glass .inw-label { margin-bottom: 10px; }
    .inw-view--words-glass::after { background: radial-gradient(ellipse 64% 74% at 64% 15%, var(--inw-mist-strong) 0%, var(--inw-mist) 40%, var(--inw-mist-none) 100%); }

    /* the finished back bedroom: words high on the warm wall, the dusk window left alone */
    .inw-view--words-dusk .inw-view__words { inset: 0 0 auto 46%; padding: 6% 6% 0 0; }
    .inw-view--words-dusk::after { background: radial-gradient(ellipse 66% 78% at 82% 16%, var(--inw-veil-deep) 0%, var(--inw-veil-mid) 46%, var(--inw-veil-none) 100%); }
  }
}

@layer frame {
  /* a word in passing that matters: set apart, not shouted */
  .inw-aside { margin-top: 22px; padding: 16px 18px; max-width: 62ch; background: var(--inw-panel); border-radius: 2px 2px 16px 2px; box-shadow: inset 3px 0 0 var(--inw-cool); }
  .inw-aside p { font-size: 0.97rem; }
  .inw-aside b { font-weight: 650; }

  .inw-address { margin: 4px 0 18px; font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.45rem, 1rem + 1.8vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
  .inw-address a { text-decoration-thickness: 2px; }

  @media (min-width: 700px) { .inw-facts--hours > div { grid-template-columns: 9rem 1fr; } }

  .inw-three dd + dd a { font-weight: 600; }

  /* numbered steps without numbers, for things that are not a sequence */
  .inw-steps--plain li { padding-left: 18px; box-shadow: inset 3px 0 0 var(--inw-amber); }
  .inw-steps--plain li::before { content: none; }

  /* chips that are whole sentences */
  .inw-chips--lines { display: grid; gap: 8px; }
  .inw-chips--lines li { padding: 10px 16px; border-radius: 2px 2px 12px 2px; font-size: 0.97rem; line-height: 1.4; max-width: 60ch; }
  @media (min-width: 760px) { .inw-chips--lines { grid-template-columns: 1fr 1fr; } }

  /* tables that stack into blocks on a narrow screen instead of scrolling sideways */
  .inw-table small { display: block; margin-top: 3px; font-weight: 400; font-size: 0.8rem; color: var(--inw-muted); }
  .inw-table code { font-family: var(--inw-sans); font-size: 0.8rem; color: var(--inw-amber-soft); }
  .inw-table--stack td:last-child { color: var(--inw-ink); }
  .inw-table--kept td:last-child, .inw-table--tested td:last-child { color: var(--inw-amber-soft); }
  @media (max-width: 699px) {
    .inw-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
    .inw-table--stack, .inw-table--stack tbody, .inw-table--stack tr, .inw-table--stack th, .inw-table--stack td { display: block; }
    .inw-table--stack caption { display: block; width: 100%; }
    .inw-table--stack tr { padding: 12px 0; box-shadow: 0 1px 0 var(--inw-hush); }
    .inw-table--stack th, .inw-table--stack td { padding: 3px 0; box-shadow: none; }
    .inw-table--stack th { font-size: 1.02rem; }
  }
  @media (min-width: 700px) {
    .inw-table--kept th:first-child { width: 13rem; }
    .inw-table--kept td:last-child { width: 14rem; }
    .inw-table--tested th:first-child { width: 9rem; }
    .inw-table--tested td:last-child { width: 40%; }
    .inw-table--rights th:first-child { width: 15rem; }
  }

  /* the questions sellers ask */
  .inw-asks-run { display: grid; gap: 12px; margin-top: 20px; }
  .inw-ask { padding: 18px 20px 20px; background: var(--inw-panel); border-radius: 2px 2px 18px 2px; }
  .inw-ask dt { font-family: var(--inw-serif); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.2; margin-bottom: 8px; }
  .inw-ask dd { font-size: 0.99rem; }
  .inw-ask dd p + p { margin-top: 0.6em; }
  @media (min-width: 900px) {
    .inw-part--asks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 5vw; align-items: start; }
    .inw-part--asks > .inw-label, .inw-part--asks > h2 { grid-column: 1; }
    .inw-part--asks > h2 { position: sticky; top: 18px; }
    .inw-part--asks > .inw-asks-run { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  }
}

@layer tools {
  /* the stages, as a path: each one says what moves it on, joined by a rail cold to warm */
  .inw-next { max-width: 860px; }
  .inw-next__stage::after {
    content: ""; position: absolute; left: 29px; top: 46px; bottom: -10px; width: 2px;
    background: color-mix(in oklab, var(--inw-cool) calc(100% - var(--t) * 100%), var(--inw-amber)); opacity: 0.45;
  }
  .inw-next__stage:last-child::after { content: none; }
  .inw-next__moves { display: block; margin-top: 6px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--inw-hush); color: var(--inw-ink); }
  .inw-next__moves i { font-style: normal; font-weight: 650; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inw-amber-soft); margin-right: 8px; }
  .inw-next__stage[data-at="done"] { box-shadow: inset 3px 0 0 var(--inw-amber); }
  .inw-next__stage[data-at="ahead"] .inw-next__moves { color: var(--inw-muted); }
  .inw-next__stage[data-at="closed"] { box-shadow: inset 0 0 0 2px var(--inw-cool); }
  @media (min-width: 900px) {
    .inw-next { max-width: none; }
    .inw-next__stage { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 30px; row-gap: 4px; }
    .inw-next__stage > b { grid-column: 1; grid-row: 1; }
    .inw-next__stage > em { grid-column: 1; grid-row: 2; }
    .inw-next__stage > span { grid-column: 2; grid-row: 1; }
    .inw-next__stage > .inw-next__moves { grid-column: 2; grid-row: 2; margin-top: 2px; }
  }

  /* the list: wards are ticks, not one choice */
  .inw-pick__opt input[type="checkbox"] { border-radius: 4px; }
  .inw-pick--wards .inw-pick__set { --n: 3; }
  .inw-pick > legend small { font-weight: 400; color: var(--inw-muted); font-size: 0.86rem; }
  @media (min-width: 980px) { .inw-fwd__two.inw-fwd__two--pair { grid-template-columns: 1fr 1fr; } }
  .inw-list .inw-fwd__step { gap: 22px; }
}

@layer foot {
  .inw-fine { margin-top: 28px; }
  .inw-fine__head {
    margin: 0 0 12px; font-family: var(--inw-sans); font-size: 0.76rem; font-weight: 650;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--inw-muted);
  }
  .inw-fine__run { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 760px) { .inw-fine__run { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .inw-fine__go {
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    height: 100%; min-height: 58px; padding: 9px 14px 10px;
    background: var(--inw-panel-2); color: var(--inw-ink); text-decoration: none;
    border-radius: 2px 2px 12px 2px; box-shadow: inset 3px 0 0 var(--inw-brick);
  }
  .inw-fine__go b { font-weight: 650; font-size: 0.95rem; line-height: 1.25; }
  .inw-fine__go span { font-size: 0.8rem; color: var(--inw-muted); line-height: 1.3; }
  .inw-fine__go:hover { background: var(--inw-panel-3); color: var(--inw-ink); }
  .inw-fine__go[aria-current="page"] { background: var(--inw-panel-3); box-shadow: inset 0 0 0 2px var(--inw-amber); }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .inw-fine__go { transition: background-color .3s var(--inw-ease); }
  }
}

@layer frame {
  /* a split section's label and heading share the first column's top: the heading sits under its
     label instead of waiting for the first paragraph beside it to end */
  @media (min-width: 980px) {
    .inw-part--split > .inw-label { grid-row: 1; }
    .inw-part--split > h2 { grid-row: 1 / span 9; margin-top: calc(0.76rem * 1.62 + 10px); }
    .inw-part--asks > h2 { margin-top: calc(0.76rem * 1.62 + 10px); }
    .inw-part--asks > .inw-label { grid-row: 1; }
    .inw-part--asks > h2 { grid-row: 1 / span 3; }
  }
  /* air after a block, before the words that follow it */
  .inw-part > :is(dl, ol, ul, table, form, figure, .inw-write, .inw-aside) + :is(p, ul.inw-chips) { margin-top: 20px; }
  .inw-part > p + :is(.inw-look, form, .inw-facts, .inw-three, .inw-words) { margin-top: 18px; }
  .inw-foot__small { margin-top: 18px; }
}