/* KENYON PROPERTIES YORKSHIRE LTD — "Stone, kept".
   Every section is a course laid over the one before it, offset like bonded masonry, so the page
   is a wall going up as it is read. Prefix stk- (stone, kept). Hex values live in :root only. */

@font-face { font-family: "Trirong"; src: url("fonts/trirong-500.woff2?v=211a695a1f") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Trirong"; src: url("fonts/trirong-600.woff2?v=fa7522d3b0") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Trirong"; src: url("fonts/trirong-700.woff2?v=c14067788c") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("fonts/caladea-400.woff2?v=367a4c4dd4") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("fonts/caladea-400i.woff2?v=6d439cdc4d") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("fonts/caladea-700.woff2?v=6a6549b8ec") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  --stk-bg: #121411;
  --stk-panel: #1C1F1A;
  --stk-ink: #EEF0E8;
  --stk-muted: #9EA493;
  --stk-moss: #72B57E;
  --stk-ochre: #CFA25A;
  --stk-shade: #000000;
  --stk-honey: #A88A5C;

  --stk-panel-up: color-mix(in oklab, var(--stk-panel) 86%, var(--stk-ink));
  --stk-panel-deep: color-mix(in oklab, var(--stk-bg) 72%, var(--stk-shade));
  --stk-ink-soft: color-mix(in oklab, var(--stk-ink) 84%, var(--stk-bg));
  --stk-lime-joint: color-mix(in oklab, var(--stk-ink) 26%, transparent);
  --stk-lime-dim: color-mix(in oklab, var(--stk-ink) 34%, var(--stk-panel));
  --stk-ochre-deep: color-mix(in oklab, var(--stk-ochre) 34%, var(--stk-panel));
  --stk-ochre-lift: color-mix(in oklab, var(--stk-ochre) 86%, var(--stk-ink));
  --stk-moss-deep: color-mix(in oklab, var(--stk-moss) 30%, var(--stk-panel));
  --stk-moss-lift: color-mix(in oklab, var(--stk-moss) 80%, var(--stk-ink));
  --stk-shadow: color-mix(in oklab, var(--stk-shade) 78%, transparent);
  --stk-shadow-soft: color-mix(in oklab, var(--stk-shade) 45%, transparent);
  --stk-limewash: color-mix(in oklab, var(--stk-ink) 92%, var(--stk-ochre));
  --stk-limewash-ink: color-mix(in oklab, var(--stk-bg) 92%, var(--stk-ochre));
  --stk-limewash-soft: color-mix(in oklab, var(--stk-bg) 70%, var(--stk-limewash));

  --stk-display: "Trirong", "Iowan Old Style", Georgia, serif;
  --stk-text: "Caladea", Cambria, Georgia, serif;

  --stk-edge: clamp(0.75rem, 3.4vw, 2.5rem);
  --stk-bond: clamp(0.55rem, 6vw, 6.5rem);
  --stk-lap: clamp(0.9rem, 2.4vw, 2.2rem);
  --stk-pad-y: clamp(1.7rem, 4.2vw, 3.6rem);
  --stk-pad-x: clamp(1.15rem, 4vw, 3.8rem);
  --stk-measure: 38rem;
  --stk-ease: cubic-bezier(0.25, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- reset, low specificity */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, figure, dl, dd, ol, ul, blockquote) { margin: 0; }
:where(ol, ul)[class] { list-style: none; padding: 0; }
:where(img, svg) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(input, button, select) { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- ground: the stone itself */
html {
  background-color: var(--stk-bg);
  background-image: url("images/ground-sandstone.webp?v=6fa6cee6be");
  background-repeat: repeat;
  background-size: 448px 448px;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  color: var(--stk-ink);
  font-family: var(--stk-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
@media (min-width: 64rem) { body { font-size: 1.125rem; } }

h1, h2, h3 { font-family: var(--stk-display); font-weight: 500; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.05rem); letter-spacing: -0.006em; }
h3 { font-size: clamp(1.22rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 600; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 700; }

a { color: var(--stk-ochre-lift); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 160ms var(--stk-ease), text-decoration-color 160ms var(--stk-ease); }
a:hover { color: var(--stk-ink); text-decoration-color: var(--stk-moss); }
:focus-visible { outline: 3px solid var(--stk-moss-lift); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--stk-moss-deep); color: var(--stk-ink); }

.stk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stk-skip {
  position: absolute; left: var(--stk-edge); top: -4rem; z-index: 60;
  padding: 0.8rem 1.1rem; border-radius: 4px;
  background: var(--stk-ochre); color: var(--stk-bg); font: 600 1rem/1 var(--stk-display);
  text-decoration: none; transition: top 160ms var(--stk-ease);
}
.stk-skip:focus { top: 0.75rem; color: var(--stk-bg); }

/* ---------------------------------------------------------------- masthead: name, then the mark on its right */
.stk-mast {
  position: relative; z-index: 40;
  max-width: 84rem; margin: 0 auto;
  padding: 0.9rem var(--stk-edge) 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.stk-brand {
  display: inline-flex; align-items: center; gap: clamp(0.55rem, 1.6vw, 1rem);
  min-height: 52px; padding: 0.3rem 0;
  color: var(--stk-ink); text-decoration: none;
}
.stk-word { width: clamp(8.4rem, 31vw, 14.5rem); height: auto; }
.stk-brand-mark { width: clamp(2.5rem, 8.5vw, 3.7rem); height: auto; transition: transform 260ms var(--stk-ease); }
.stk-brand:hover .stk-brand-mark { transform: translateY(-2px); }
.stk-brand:hover { color: var(--stk-ink); }

/* the Contents tree: a native disclosure, open and shut with no script at all */
.stk-contents { position: relative; flex: none; }
.stk-contents > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 48px; padding: 0 1rem 0 1.05rem;
  border-radius: 4px; border: 2px solid var(--stk-ochre-deep);
  background: var(--stk-panel-up); color: var(--stk-ink);
  font: 600 0.92rem/1 var(--stk-display); letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: background-color 180ms var(--stk-ease), border-color 180ms var(--stk-ease), color 180ms var(--stk-ease);
}
.stk-contents > summary::-webkit-details-marker { display: none; }
.stk-contents > summary:hover { border-color: var(--stk-ochre); background: var(--stk-ochre-deep); }
.stk-contents[open] > summary { background: var(--stk-ochre); border-color: var(--stk-ochre); color: var(--stk-bg); }
.stk-caret { width: 0.85rem; height: 0.85rem; transition: transform 200ms var(--stk-ease); }
.stk-contents[open] .stk-caret { transform: rotate(180deg); }

.stk-tree {
  position: absolute; right: 0; top: calc(100% + 0.55rem);
  width: min(25.5rem, calc(100vw - 2 * var(--stk-edge)));
  padding: 1.05rem 1.1rem 1.25rem;
  border-radius: 6px;
  background: var(--stk-panel);
  box-shadow: 0 28px 56px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre-deep);
}
.stk-tree-head { margin-bottom: 0.7rem; color: var(--stk-muted); font: italic 0.95rem/1.35 var(--stk-text); }
.stk-tree-root > li + li { margin-top: 0.5rem; }
.stk-twig > summary {
  list-style: none; display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.3rem; cursor: pointer;
  color: var(--stk-ochre-lift); font: 600 0.86rem/1 var(--stk-display); letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 160ms var(--stk-ease);
}
.stk-twig > summary::-webkit-details-marker { display: none; }
.stk-twig > summary:hover { color: var(--stk-ink); }
.stk-twig > summary::before {
  content: ""; width: 0.6rem; height: 0.6rem; flex: none;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms var(--stk-ease);
}
.stk-twig[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.stk-twig > ul { position: relative; list-style: none; margin: 0.15rem 0 0.25rem 0.75rem; padding-left: 1.15rem; }
.stk-twig > ul::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; bottom: 1.6rem; width: 4px; border-radius: 2px;
  background: var(--stk-lime-dim);
}
.stk-twig > ul > li { position: relative; margin: 0.42rem 0; }
.stk-twig > ul > li::before {
  content: ""; position: absolute; left: -1.15rem; top: 50%; width: 1.15rem; height: 4px; margin-top: -2px;
  border-radius: 0 2px 2px 0; background: var(--stk-lime-dim);
}
.stk-row {
  display: inline-flex; flex-direction: column; justify-content: center;
  width: fit-content; max-width: 100%; min-height: 50px; padding: 0.42rem 1rem 0.46rem;
  border-radius: 4px; background: var(--stk-panel-up); color: var(--stk-ink); text-decoration: none;
  transition: background-color 170ms var(--stk-ease), transform 170ms var(--stk-ease), box-shadow 170ms var(--stk-ease);
}
.stk-row-name { font: 600 1.04rem/1.18 var(--stk-display); }
.stk-row-note { color: var(--stk-muted); font: italic 0.88rem/1.3 var(--stk-text); }
.stk-row:hover, .stk-row:focus-visible { background: var(--stk-ochre-deep); color: var(--stk-ink); transform: translateX(4px); }
.stk-row[aria-current="page"] { background: var(--stk-moss-deep); box-shadow: inset 5px 0 0 var(--stk-moss); }
.stk-row[aria-current="page"] .stk-row-note { color: var(--stk-ink-soft); }
.stk-row--home { margin-bottom: 0.15rem; }

/* ---------------------------------------------------------------- the wall: courses laid over courses */
.stk-wall { max-width: 84rem; margin: 0 auto; padding: 0.4rem var(--stk-edge) 4.5rem; overflow-x: clip; }
.stk-wall:focus { outline: none; }
.stk-course {
  position: relative;
  margin-top: calc(-1 * var(--stk-lap));
  padding: var(--stk-pad-y) var(--stk-pad-x) calc(var(--stk-pad-y) + var(--stk-lap));
  border-radius: 5px;
  background: var(--stk-panel);
  box-shadow: 0 -26px 44px -30px var(--stk-shadow), inset 0 4px 0 var(--stk-lime-joint);
}
.stk-course:first-child { margin-top: 0; }
.stk-course:last-child { padding-bottom: var(--stk-pad-y); }
.stk-course--l { margin-right: var(--stk-bond); }
.stk-course--r { margin-left: var(--stk-bond); }
.stk-course--deep { background: var(--stk-panel-deep); }
.stk-course p + p { margin-top: 0.9rem; }

.stk-state {
  display: block; margin-bottom: 0.2rem;
  color: var(--stk-ochre); font: 600 0.95rem/1.2 var(--stk-display); letter-spacing: 0.24em; text-transform: uppercase;
}
.stk-lede { max-width: var(--stk-measure); color: var(--stk-ink-soft); font-size: 1.12em; }
.stk-measure { max-width: var(--stk-measure); }
.stk-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; min-height: 46px; padding: 0 1.15rem; border-radius: 4px; background: var(--stk-moss-deep); color: var(--stk-ink); font: 600 1rem/1.2 var(--stk-display); text-decoration: none; transition: background-color 170ms var(--stk-ease), transform 170ms var(--stk-ease); }
.stk-more::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg); transition: transform 170ms var(--stk-ease); }
.stk-more:hover { background: var(--stk-moss); color: var(--stk-bg); }
.stk-more:hover::after { transform: translateX(3px) rotate(45deg); }
.stk-credit { margin-top: 0.7rem; color: var(--stk-muted); font: italic 0.86rem/1.4 var(--stk-text); }

/* ---------------------------------------------------------------- opening course: terrace, the title in the storm sky */
.stk-open { padding: 0; }
.stk-open-fig { position: relative; overflow: clip; border-radius: 5px 5px 0 0; }
.stk-open-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 100%; }
.stk-open-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--stk-bg) 52%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 30%, transparent) 26%, transparent 46%); }
.stk-open-sky { position: absolute; z-index: 1; left: 0; top: 0; right: 0; padding: clamp(1.15rem, 2.6vw, 2.6rem) var(--stk-pad-x) 0; }
.stk-open-kick { max-width: 21rem; color: var(--stk-ochre-lift); font: 600 0.82rem/1.4 var(--stk-display); letter-spacing: 0.16em; text-transform: uppercase; }
.stk-open h1 { margin-top: 0.35rem; font-size: clamp(3.1rem, 1.3rem + 5.8vw, 6.2rem); font-weight: 500; letter-spacing: -0.012em; line-height: 0.98; }
.stk-open-foot {
  display: grid; grid-template-areas: "card" "lede"; gap: 1.3rem;
  padding: 0 var(--stk-pad-x);
}
.stk-open-lede { grid-area: lede; max-width: 40rem; color: var(--stk-ink-soft); font-size: 1.14em; line-height: 1.55; }
.stk-open-stone {
  grid-area: card; position: relative; z-index: 2;
  margin-top: -3.2rem; justify-self: end;
  width: min(25rem, 100%);
  padding: 1.3rem 1.35rem 1.4rem;
  border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 22px 40px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-moss);
}
.stk-open-stone h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.15rem); font-weight: 600; line-height: 1.08; }
.stk-open-stone p { margin-top: 0.55rem; color: var(--stk-ink-soft); }
.stk-open .stk-credit { padding: 1rem var(--stk-pad-x) var(--stk-pad-y); margin: 0; }

@media (min-width: 46rem) {
  .stk-open-img { aspect-ratio: 16 / 11; object-position: 50% 100%; }
  .stk-open-kick { max-width: none; }
  .stk-open-foot { grid-template-areas: "lede card"; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); align-items: start; gap: 2.2rem; }
  .stk-open-lede { padding-top: 1.6rem; }
  .stk-open-stone { margin-top: -6rem; }
}
@media (min-width: 72rem) {
  .stk-open-lede { font-size: 1.24em; }
}

/* ---------------------------------------------------------------- laid: the first months as stones in one course */
.stk-laid-steps { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.55rem; counter-reset: stk-laid; }
.stk-laid-steps > li {
  flex: 1 1 15rem; position: relative;
  padding: 1.05rem 1.1rem 1.15rem; border-radius: 4px;
  background: var(--stk-panel-up);
  transition: background-color 200ms var(--stk-ease), transform 200ms var(--stk-ease);
}
.stk-laid-steps > li:nth-child(2n) { flex-basis: 19rem; }
.stk-laid-steps > li:nth-child(3n) { flex-basis: 12.5rem; }
.stk-laid-steps > li:hover { background: var(--stk-ochre-deep); transform: translateY(-3px); }
.stk-laid-steps h3 { color: var(--stk-ink); }
.stk-laid-steps p { margin-top: 0.35rem; color: var(--stk-ink-soft); font-size: 0.97em; }

/* ---------------------------------------------------------------- weathered: four seasons set as a bonded quartet */
.stk-weather { display: grid; gap: 1.6rem; }
.stk-seasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.stk-seasons > div { padding: 0.95rem 1rem 1.05rem; border-radius: 4px; background: var(--stk-panel); transition: background-color 200ms var(--stk-ease); }
.stk-seasons > div:hover { background: var(--stk-panel-up); }
.stk-seasons > div:nth-child(1) { grid-column: 1 / span 2; }
.stk-seasons > div:nth-child(4) { grid-column: 1 / span 2; }
.stk-seasons dt { color: var(--stk-ochre-lift); font: 600 0.95rem/1.25 var(--stk-display); letter-spacing: 0.08em; text-transform: uppercase; }
.stk-seasons dd { margin-top: 0.3rem; color: var(--stk-ink-soft); font-size: 0.97em; }
@media (min-width: 56rem) {
  .stk-weather { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 2.4rem; }
  .stk-seasons { margin-top: 0.4rem; }
}

/* ---------------------------------------------------------------- opened up: the eight steps, in limewash (the one light course) */
.stk-course--lime { background: var(--stk-limewash); color: var(--stk-limewash-ink); box-shadow: 0 -26px 44px -30px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre); }
.stk-course--lime .stk-state { color: var(--stk-limewash-ink); opacity: 0.86; }
.stk-course--lime a { color: var(--stk-limewash-ink); text-decoration-color: var(--stk-ochre); }
.stk-course--lime a:hover { color: var(--stk-bg); text-decoration-color: var(--stk-bg); }
.stk-course--lime .stk-lede { color: var(--stk-limewash-ink); }
.stk-chain { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.45rem; counter-reset: stk-chain; }
.stk-chain > li {
  counter-increment: stk-chain; position: relative;
  padding: 0.85rem 0.95rem 0.95rem 3rem; border-radius: 4px;
  background: color-mix(in oklab, var(--stk-limewash) 80%, var(--stk-ochre));
}
.stk-chain > li::before {
  content: counter(stk-chain); position: absolute; left: 0.85rem; top: 0.72rem;
  font: 600 1.35rem/1 var(--stk-display); color: var(--stk-limewash-ink); opacity: 0.55;
}
.stk-chain b { display: block; font: 600 1.06rem/1.2 var(--stk-display); }
.stk-chain span { display: block; margin-top: 0.2rem; font-size: 0.94em; line-height: 1.45; }
.stk-damp { margin-top: 1.5rem; max-width: 46rem; }
.stk-course--lime .stk-more { background: var(--stk-limewash-ink); color: var(--stk-limewash); }
.stk-course--lime .stk-more:hover { background: var(--stk-bg); color: var(--stk-ink); }

/* ---------------------------------------------------------------- repointed: a macro of the joint, then the wall face kept */
.stk-repoint { padding-top: 0; }
.stk-joint-fig { position: relative; margin: 0 calc(-1 * var(--stk-pad-x)); }
.stk-joint-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 30% 60%; border-radius: 5px 5px 0 0; }
.stk-joint-words { position: absolute; left: 0; top: 0; padding: clamp(1.2rem, 4vw, 3.2rem) var(--stk-pad-x); max-width: 36rem; }
.stk-joint-words h2 { color: var(--stk-ink); }
.stk-joint-words .stk-state { color: var(--stk-ochre-lift); }
.stk-joint-stone {
  position: relative; z-index: 2;
  margin: -2.2rem 0 0 0; width: min(31rem, 100%);
  padding: 1.15rem 1.25rem 1.25rem; border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 20px 38px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre);
}
.stk-joint-stone p { color: var(--stk-ink-soft); }
@media (max-width: 32rem) {
  .stk-joint-img { aspect-ratio: 4 / 5; object-position: 18% 40%; }
}

.stk-run { position: relative; margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.stk-face-hold { margin: 0; }
.stk-face {
  position: relative; width: 100%; max-width: 34rem; aspect-ratio: 4 / 3;
  border-radius: 4px; overflow: clip;
  background: var(--stk-panel-deep);
  box-shadow: 0 24px 46px -24px var(--stk-shadow);
}
.stk-face > * { position: absolute; }
.stk-blk {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 3px;
  background-color: var(--stk-honey);
  background-image: url("images/stone-face.webp?v=5136568a69");
  background-size: 300px 300px;
  background-position: var(--bx, 0) var(--by, 0);
  box-shadow: inset 0 -7px 12px -6px var(--stk-shadow), inset 0 6px 10px -8px var(--stk-limewash), inset 0 0 0 1px var(--stk-shadow-soft);
}
.stk-soot {
  inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 30% 18%, var(--stk-shadow) 0%, transparent 62%),
    radial-gradient(90% 60% at 82% 70%, var(--stk-shadow) 0%, transparent 58%),
    linear-gradient(180deg, var(--stk-shadow) 0%, transparent 70%);
  opacity: 0.14;
}
.stk-spall {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  /* a flake gone from the face: fresh, paler stone in a shallow scar, its upper lip in shadow */
  background-image: linear-gradient(180deg, var(--stk-shadow) 0%, transparent 34%), url("images/stone-face.webp?v=5136568a69");
  background-size: auto, 180px 180px;
  background-color: color-mix(in oklab, var(--stk-honey) 70%, var(--stk-ink));
  background-blend-mode: normal, luminosity;
  clip-path: polygon(6% 14%, 22% 3%, 41% 8%, 58% 0%, 79% 10%, 100% 31%, 93% 52%, 98% 70%, 82% 88%, 60% 100%, 37% 93%, 15% 97%, 4% 76%, 0% 49%);
  opacity: 0.1;
}
.stk-frost {
  left: 0; right: 0; top: var(--y); height: 9%;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--stk-ink) 34%, transparent) 30%, color-mix(in oklab, var(--stk-ink) 82%, transparent) 50%, color-mix(in oklab, var(--stk-ink) 30%, transparent) 70%, transparent 100%);
  transform-origin: 0 50%;
  opacity: 0;
}
.stk-jt { left: var(--x); top: var(--y); width: var(--w); height: var(--h); background: var(--stk-panel-deep); border-radius: 2px; }
.stk-jt > i { position: absolute; inset: 0; border-radius: 2px; }
.stk-l0 { background: var(--stk-limewash); opacity: 0; }
.stk-cm { background: linear-gradient(180deg, color-mix(in oklab, var(--stk-muted) 55%, var(--stk-bg)), color-mix(in oklab, var(--stk-muted) 38%, var(--stk-bg))); opacity: 0; }
.stk-l1 { background: linear-gradient(180deg, var(--stk-limewash), color-mix(in oklab, var(--stk-limewash) 84%, var(--stk-ochre))); }
.stk-face-cap { margin-top: 0.7rem; color: var(--stk-muted); font: italic 0.9rem/1.45 var(--stk-text); max-width: 34rem; }

.stk-beats { display: grid; gap: 0.8rem; counter-reset: stk-beat; }
.stk-beats > li { counter-increment: stk-beat; }
.stk-beats--still > li, .stk-beat { padding: 1rem 1.15rem 1.1rem; border-radius: 4px; background: var(--stk-panel-deep); }
.stk-beats b { display: block; margin-bottom: 0.25rem; color: var(--stk-ochre-lift); font: 600 0.92rem/1.2 var(--stk-display); letter-spacing: 0.16em; text-transform: uppercase; }
.stk-beats b::before { content: counter(stk-beat) " \00B7  "; color: var(--stk-muted); letter-spacing: 0; }
.stk-beats p { color: var(--stk-ink-soft); }
.stk-beats--still { margin-top: 1.4rem; }
@media (min-width: 56rem) {
  .stk-beats--still { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .stk-beats--still > li:nth-child(4n+2), .stk-beats--still > li:nth-child(4n+3) { background: var(--stk-panel-up); }
  .stk-beats--still > li:nth-child(odd) { margin-right: 1.2rem; }
  .stk-beats--still > li:nth-child(even) { margin-left: -1.2rem; margin-top: 1.4rem; margin-bottom: -1.4rem; }
}

/* the face, block by block: a crop of a bigger wall, so the courses run off every edge */
.stk-b1 { --x: -7%;   --y: -9%;   --w: 40.6%; --h: 31.4%; --bx: 0;      --by: 0; }
.stk-b2 { --x: 36%;   --y: -9%;   --w: 36.8%; --h: 31.4%; --bx: -90px;  --by: -40px; }
.stk-b3 { --x: 75.2%; --y: -9%;   --w: 33%;   --h: 31.4%; --bx: -160px; --by: -120px; }
.stk-b4 { --x: -4%;   --y: 25.2%; --w: 22%;   --h: 31.4%; --bx: -40px;  --by: -200px; }
.stk-b5 { --x: 20.4%; --y: 25.2%; --w: 40.8%; --h: 31.4%; --bx: -210px; --by: -60px; }
.stk-b6 { --x: 63.6%; --y: 25.2%; --w: 41%;   --h: 31.4%; --bx: -120px; --by: -180px; }
.stk-b7 { --x: -6%;   --y: 59.4%; --w: 36%;   --h: 31.4%; --bx: -60px;  --by: -90px; }
.stk-b8 { --x: 32.4%; --y: 59.4%; --w: 35.4%; --h: 31.4%; --bx: -230px; --by: -10px; }
.stk-b9 { --x: 70.2%; --y: 59.4%; --w: 36%;   --h: 31.4%; --bx: -20px;  --by: -150px; }
.stk-b10 { --x: -3%;  --y: 93.6%; --w: 26%;   --h: 31.4%; --bx: -140px; --by: -60px; }
.stk-b11 { --x: 25.4%; --y: 93.6%; --w: 38%;  --h: 31.4%; --bx: -70px;  --by: -230px; }
.stk-b12 { --x: 65.8%; --y: 93.6%; --w: 40%;  --h: 31.4%; --bx: -190px; --by: -100px; }
/* bed joints run the width; perpends sit between the blocks of each course */
.stk-j1  { --x: 0%;    --y: 22.4%; --w: 100%;  --h: 2.8%; }
.stk-j2  { --x: 0%;    --y: 56.6%; --w: 100%;  --h: 2.8%; }
.stk-j9  { --x: 0%;    --y: 90.8%; --w: 100%;  --h: 2.8%; }
.stk-j3  { --x: 33.6%; --y: 0%;    --w: 2.4%;  --h: 22.4%; }
.stk-j4  { --x: 72.8%; --y: 0%;    --w: 2.4%;  --h: 22.4%; }
.stk-j5  { --x: 18%;   --y: 25.2%; --w: 2.4%;  --h: 31.4%; }
.stk-j6  { --x: 61.2%; --y: 25.2%; --w: 2.4%;  --h: 31.4%; }
.stk-j7  { --x: 30%;   --y: 59.4%; --w: 2.4%;  --h: 31.4%; }
.stk-j8  { --x: 67.8%; --y: 59.4%; --w: 2.4%;  --h: 31.4%; }
.stk-j10 { --x: 23%;   --y: 93.6%; --w: 2.4%;  --h: 6.4%; }
.stk-j11 { --x: 63.4%; --y: 93.6%; --w: 2.4%;  --h: 6.4%; }
.stk-sp1 { --x: 6%;  --y: 66%; --w: 15%; --h: 17%; }
.stk-sp2 { --x: 41%; --y: 32%; --w: 12%; --h: 15%; }
.stk-sp3 { --x: 82%; --y: 4%;  --w: 11%; --h: 13%; }
.stk-frost { --y: 52.6%; }

@media (min-width: 60rem) {
  .stk-run { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 2.6rem; }
}

/* ---------------------------------------------------------------- sound again: the stairwell, a course crossing its corner */
.stk-sound { display: grid; gap: 0; }
.stk-stair-fig { position: relative; }
.stk-stair-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; border-radius: 4px; }
.stk-stair-fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: radial-gradient(64% 40% at 100% 0%, color-mix(in oklab, var(--stk-limewash) 78%, transparent) 0%, color-mix(in oklab, var(--stk-limewash) 52%, transparent) 50%, transparent 100%);
}
.stk-stair-line {
  position: absolute; z-index: 1; right: 0; top: 0; width: 34%;
  padding: 1.1rem 1rem 0 0; color: var(--stk-limewash-ink);
  font: 600 clamp(1.05rem, 0.9rem + 0.8vw, 1.45rem)/1.25 var(--stk-display);
}
.stk-sound-stone {
  position: relative; z-index: 2;
  margin: -3.2rem 0 0 auto; width: min(36rem, 94%);
  padding: 1.3rem 1.35rem 1.4rem; border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 -18px 40px -20px var(--stk-shadow), inset 0 4px 0 var(--stk-moss);
}
.stk-sound-stone h3 { margin-top: 1.05rem; color: var(--stk-moss-lift); }
.stk-sound-stone h3:first-of-type { margin-top: 0.9rem; }
.stk-sound-stone p { margin-top: 0.3rem; color: var(--stk-ink-soft); }
@media (min-width: 56rem) {
  .stk-sound { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: end; margin-top: 1.4rem; }
  .stk-stair-img { aspect-ratio: 2 / 3; }
  .stk-sound-stone { margin: 0 0 -1.8rem -6rem; width: auto; }
}

/* ---------------------------------------------------------------- next look: where and how to begin */
.stk-next { display: grid; gap: 1.6rem; }
.stk-places { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.stk-places li { padding: 0.36rem 0.75rem; border-radius: 3px; background: var(--stk-panel-deep); color: var(--stk-ink-soft); font: 400 0.95rem/1.4 var(--stk-text); }
.stk-places li:first-child { background: var(--stk-moss-deep); color: var(--stk-ink); }
.stk-write {
  align-self: start; padding: 1.35rem 1.4rem 1.45rem; border-radius: 4px;
  background: var(--stk-panel-deep); box-shadow: inset 0 4px 0 var(--stk-ochre);
}
.stk-write p + p { margin-top: 0.7rem; }
.stk-write-mail { display: inline-block; padding: 0.5rem 0; margin-top: 0.2rem; font: 600 clamp(1rem, 0.9rem + 0.35vw, 1.16rem)/1.35 var(--stk-display); overflow-wrap: break-word; }
@media (min-width: 56rem) { .stk-next { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 2.6rem; } }

/* ---------------------------------------------------------------- footer: the mark at full size, and the registered details */
.stk-foot { max-width: 84rem; margin: 0 auto; padding: 0 var(--stk-edge) 3rem; }
.stk-foot-in {
  display: grid; gap: 1.6rem; padding: 2rem var(--stk-pad-x) 2.2rem;
  border-radius: 5px; background: var(--stk-panel-deep);
  box-shadow: inset 0 4px 0 var(--stk-lime-joint);
}
.stk-foot-mark { width: clamp(8.5rem, 34vw, 12.5rem); height: auto; }
.stk-foot-h { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.8rem; }
.stk-reg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1.4rem; }
.stk-reg dt { margin-top: 0.55rem; color: var(--stk-muted); font: 600 0.78rem/1.3 var(--stk-display); letter-spacing: 0.14em; text-transform: uppercase; }
.stk-reg dd { color: var(--stk-ink); overflow-wrap: anywhere; }
.stk-foot-note { margin-top: 1.1rem; color: var(--stk-muted); font: italic 0.9rem/1.45 var(--stk-text); max-width: 46rem; }
@media (min-width: 52rem) {
  .stk-foot-in { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2.6rem; }
  .stk-reg { grid-template-columns: max-content minmax(0, 1fr); }
  .stk-reg dt { margin-top: 0.12rem; }
}

/* ---------------------------------------------------------------- sub-page shapes */
.stk-page-open { display: grid; gap: 1.2rem; }
.stk-page-open h1 { font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em; }
.stk-page-open .stk-lede { margin-top: 0.4rem; }

.stk-art { position: relative; }
.stk-art-img { width: 100%; height: auto; border-radius: 4px; }
.stk-art-over { position: absolute; z-index: 1; padding: clamp(1rem, 3.6vw, 2.6rem); }
.stk-art--shade::after, .stk-art--mist::after, .stk-art--window::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px; }
.stk-art--shade::after { background: linear-gradient(180deg, color-mix(in oklab, var(--stk-bg) 66%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 40%, transparent) 34%, transparent 60%); }
@media (min-width: 46rem) {
  .stk-art--window::after { background: linear-gradient(262deg, color-mix(in oklab, var(--stk-limewash) 74%, transparent) 0%, color-mix(in oklab, var(--stk-limewash) 52%, transparent) 28%, transparent 44%); }
}
.stk-art--mist::after { background: linear-gradient(100deg, color-mix(in oklab, var(--stk-limewash) 46%, transparent) 0%, color-mix(in oklab, var(--stk-limewash) 24%, transparent) 34%, transparent 58%); }
.stk-art-over--tl { left: 0; top: 0; max-width: 34rem; }
.stk-art-over--bl { left: 0; bottom: 0; max-width: 36rem; }
.stk-art-over--tr { position: static; padding: 1.1rem 0 0; }
.stk-art--window .stk-art-over--tr .stk-state { color: var(--stk-ochre); }
@media (min-width: 46rem) {
  .stk-art-over--tr { position: absolute; right: 0; top: 0; width: 33%; padding: clamp(1rem, 2.6vw, 2rem) clamp(1rem, 2.6vw, 2rem) 0 0; color: var(--stk-limewash-ink); }
  .stk-art--window .stk-art-over--tr .stk-state { color: var(--stk-limewash-ink); opacity: 0.82; }
  .stk-art-over--tr h2 { font-size: clamp(1.7rem, 0.9rem + 1.9vw, 2.6rem); }
}
.stk-art-over h1, .stk-art-over h2 { color: inherit; }
.stk-art--mist .stk-art-over--tl { position: static; padding: 1.1rem 0 0; color: var(--stk-ink); }
.stk-art--mist + .stk-art-stone, .stk-art--window + .stk-art-stone { margin-top: 0.9rem; }
.stk-art--mist .stk-art-over--tl .stk-state { color: var(--stk-ochre); opacity: 1; }
.stk-art-line { margin-top: 0.4rem; font: italic 1.05rem/1.4 var(--stk-text); }
@media (min-width: 46rem) {
  .stk-art--mist .stk-art-over--tl { position: absolute; padding: clamp(1rem, 3.6vw, 2.6rem); color: var(--stk-limewash-ink); }
  .stk-art--mist + .stk-art-stone, .stk-art--window + .stk-art-stone { margin-top: -2.4rem; }
  .stk-art--mist .stk-art-over--tl .stk-state { color: var(--stk-limewash-ink); opacity: 0.8; }
}
.stk-art-stone {
  position: relative; z-index: 2;
  margin: -2.4rem var(--stk-pad-x) 0 auto; width: min(30rem, 92%);
  padding: 1.15rem 1.25rem 1.25rem; border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 22px 40px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre);
}
.stk-art-stone--left { margin-left: var(--stk-pad-x); margin-right: auto; box-shadow: 0 22px 40px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-moss); }
.stk-art-stone p { color: var(--stk-ink-soft); }
.stk-art-stone p + p { margin-top: 0.6rem; }

.stk-split { display: grid; gap: 1.4rem; margin-top: 1.3rem; }
@media (min-width: 56rem) { .stk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6rem; align-items: start; } }
.stk-split h3 { margin-top: 1.2rem; }
.stk-split h3:first-child { margin-top: 0; }

.stk-rules { display: grid; gap: 0.6rem; margin-top: 1.4rem; }
.stk-rules > div { padding: 1.05rem 1.15rem 1.15rem; border-radius: 4px; background: var(--stk-panel-deep); }
.stk-rules > div:nth-child(odd) { margin-right: clamp(0rem, 3vw, 2.5rem); }
.stk-rules > div:nth-child(even) { margin-left: clamp(0rem, 3vw, 2.5rem); }
.stk-rules dt { color: var(--stk-ochre-lift); font: 600 1.12rem/1.25 var(--stk-display); }
.stk-rules dd { margin-top: 0.35rem; color: var(--stk-ink-soft); }
.stk-rules dd + dd { margin-top: 0.5rem; }
.stk-src { color: var(--stk-muted); font-size: 0.9em; font-style: italic; }

.stk-quartet { display: grid; gap: 0.5rem; margin-top: 1.4rem; grid-template-columns: minmax(0, 1fr); }
.stk-quartet > div { padding: 1rem 1.1rem 1.1rem; border-radius: 4px; background: var(--stk-panel-up); }
.stk-quartet h3 { color: var(--stk-moss-lift); }
.stk-quartet p { margin-top: 0.35rem; color: var(--stk-ink-soft); }
@media (min-width: 44rem) {
  .stk-quartet { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .stk-quartet > div:nth-child(4n+2), .stk-quartet > div:nth-child(4n+3) { transform: translateX(0); }
  .stk-quartet > div:nth-child(2) { grid-column: 2; }
  .stk-quartet > div:nth-child(3) { grid-column: 1 / span 1; }
}

.stk-said { margin-top: 1.2rem; padding: 1.2rem 1.3rem 1.3rem 1.5rem; border-radius: 4px; background: var(--stk-moss-deep); box-shadow: inset 5px 0 0 var(--stk-moss); }
.stk-said p { font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.4rem)/1.42 var(--stk-display); color: var(--stk-ink); }
.stk-said p + p { margin-top: 0.6rem; font: italic 0.95rem/1.45 var(--stk-text); color: var(--stk-ink-soft); }

.stk-list { margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.stk-list > li { position: relative; padding-left: 1.4rem; }
.stk-list > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 4px; border-radius: 2px; background: var(--stk-ochre); }
.stk-sources { margin-top: 1rem; display: grid; gap: 0.35rem; font-size: 0.95em; }
.stk-sources a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the tool: safety-check due dates */
.stk-due { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.stk-due-form { display: grid; gap: 0.9rem; align-content: start; }
.stk-field { display: grid; gap: 0.35rem; }
.stk-field label { font: 600 1rem/1.3 var(--stk-display); color: var(--stk-ink); }
.stk-field small { color: var(--stk-muted); font: italic 0.88rem/1.35 var(--stk-text); }
.stk-field input {
  min-height: 48px; width: 100%; max-width: 20rem; padding: 0.5rem 0.75rem;
  border-radius: 4px; border: 2px solid var(--stk-lime-dim); background: var(--stk-panel-deep);
  color: var(--stk-ink); font: 400 1.05rem/1.2 var(--stk-text);
  color-scheme: dark;
  transition: border-color 160ms var(--stk-ease), background-color 160ms var(--stk-ease);
}
.stk-field input:hover { border-color: var(--stk-ochre-deep); }
.stk-field input:focus-visible { border-color: var(--stk-moss); outline-offset: 2px; }
.stk-field input[aria-invalid="true"] { border-color: var(--stk-ochre); }
.stk-go {
  justify-self: start; min-height: 50px; padding: 0 1.4rem; margin-top: 0.3rem;
  border: 0; border-radius: 4px; background: var(--stk-moss); color: var(--stk-bg);
  font: 600 1.06rem/1 var(--stk-display); cursor: pointer;
  box-shadow: inset 0 -4px 0 var(--stk-moss-deep);
  transition: background-color 160ms var(--stk-ease), transform 160ms var(--stk-ease);
}
.stk-go:hover { background: var(--stk-moss-lift); transform: translateY(-2px); }
.stk-go:active { transform: translateY(1px); }
.stk-go--quiet { background: var(--stk-panel-up); color: var(--stk-ink); box-shadow: inset 0 -4px 0 var(--stk-panel-deep); margin-top: 0; }
.stk-go--quiet:hover { background: var(--stk-ochre-deep); }
.stk-due-out { padding: 1.2rem 1.25rem 1.35rem; border-radius: 4px; background: var(--stk-panel-deep); box-shadow: inset 0 4px 0 var(--stk-ochre-deep); min-height: 12rem; }
.stk-due-out h3 { font-size: 1.25rem; }
.stk-due-idle { color: var(--stk-muted); font-style: italic; }
.stk-soon { margin-top: 0.7rem; padding: 0.75rem 0.9rem; border-radius: 4px; background: var(--stk-ochre-deep); color: var(--stk-ink); }
.stk-soon--clear { background: var(--stk-moss-deep); }
.stk-soon--late { background: color-mix(in oklab, var(--stk-ochre) 58%, var(--stk-panel)); color: var(--stk-ink); }
.stk-dates { margin-top: 1rem; display: grid; gap: 0.7rem; }
.stk-dates > div { padding-left: 0.95rem; box-shadow: inset 4px 0 0 var(--stk-moss); }
.stk-dates > div.is-late { box-shadow: inset 4px 0 0 var(--stk-ochre); }
.stk-dates dt { font: 600 1rem/1.3 var(--stk-display); color: var(--stk-ink); }
.stk-dates dd { color: var(--stk-ink-soft); }
.stk-dates .stk-when { color: var(--stk-ink); font-weight: 700; }
.stk-err { margin-top: 0.4rem; color: var(--stk-ochre-lift); font-weight: 700; }
.stk-strip { margin-top: 1.4rem; }
.stk-strip h4 { font: 600 0.86rem/1.3 var(--stk-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stk-muted); }
.stk-years { position: relative; margin-top: 0.6rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.stk-years > span { padding: 0.45rem 0.4rem 1.9rem; border-radius: 3px; background: var(--stk-panel-up); color: var(--stk-muted); font: 600 0.8rem/1 var(--stk-display); text-align: center; }
.stk-years > span:nth-child(even) { background: color-mix(in oklab, var(--stk-panel-up) 70%, var(--stk-panel-deep)); }
.stk-ticks { position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 1.2rem; }
.stk-tick { position: absolute; bottom: 0; left: var(--at); width: 6px; height: 1.15rem; margin-left: -3px; border-radius: 2px; background: var(--stk-moss); }
.stk-tick--eicr { background: var(--stk-ochre); height: 0.9rem; }
.stk-tick--epc { background: var(--stk-ink); height: 0.7rem; }
.stk-key { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--stk-ink-soft); font-size: 0.92em; }
.stk-key span::before { content: ""; display: inline-block; width: 6px; height: 0.9em; margin-right: 0.4rem; border-radius: 2px; vertical-align: -0.1em; background: var(--stk-moss); }
.stk-key .k-eicr::before { background: var(--stk-ochre); }
.stk-key .k-epc::before { background: var(--stk-ink); }
.stk-events { margin-top: 0.9rem; display: grid; gap: 0.25rem; font-size: 0.95em; color: var(--stk-ink-soft); }
.stk-strip-note { margin-top: 0.8rem; color: var(--stk-muted); font: italic 0.88rem/1.45 var(--stk-text); }
@media (min-width: 60rem) { .stk-due { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 2.4rem; } }

/* ---------------------------------------------------------------- 404 */
.stk-lost h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.2rem); }
.stk-lost-mark { width: min(26rem, 80%); height: auto; margin-bottom: 1.6rem; }

/* ================================================================= motion — only for visitors who have not asked for less.
   With nothing below applied the page is already in its finished state: every course laid, the wall
   face repointed and clean. Scroll-driven where the browser has it; nothing at all where it does not. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes stk-mark-set { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .stk-brand-mark { animation: stk-mark-set 700ms 120ms var(--stk-ease) both; }

  @keyframes stk-open-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .stk-open h1, .stk-page-open h1, .stk-arrive h1, .stk-dueopen h1, .stk-feather h1 { animation: stk-open-rise 900ms 80ms var(--stk-ease) both; }
  .stk-open-kick { animation: stk-open-rise 700ms 20ms var(--stk-ease) both; }

  @keyframes stk-tree-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .stk-contents[open] .stk-tree { animation: stk-tree-drop 220ms var(--stk-ease) both; }

  @keyframes stk-out-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .stk-due-out.is-fresh > * { animation: stk-out-in 380ms var(--stk-ease) both; }
  .stk-due-out.is-fresh > *:nth-child(2) { animation-delay: 60ms; }
  .stk-due-out.is-fresh > *:nth-child(3) { animation-delay: 120ms; }
  .stk-due-out.is-fresh > *:nth-child(4) { animation-delay: 180ms; }

  @supports (animation-timeline: view()) {
    /* each course is laid from the side its bond steps out to */
    @keyframes stk-lay-l { from { opacity: 0.2; transform: translate(-34px, 26px); } to { opacity: 1; transform: none; } }
    @keyframes stk-lay-r { from { opacity: 0.2; transform: translate(34px, 26px); } to { opacity: 1; transform: none; } }
    /* laid within the first 240px of arrival, whatever the course's height: nobody reads a half-laid course */
    .stk-course--l:not(:first-child) { animation: stk-lay-l linear both; animation-timeline: view(); animation-range: entry 0% entry 240px; }
    .stk-course--r:not(:first-child) { animation: stk-lay-r linear both; animation-timeline: view(); animation-range: entry 0% entry 240px; }

    /* the opening terrace drifts a little inside its frame */
    @keyframes stk-open-drift { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.06) translateY(3%); } }
    .stk-open-img { animation: stk-open-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }

    /* the set-piece: a wall face weathers, is opened up, repointed joint by joint, and stands kept */
    .stk-run { view-timeline: --stk-run block; }
    .stk-run .stk-beats > li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
    .stk-run .stk-beats > li:last-child { min-height: 48vh; }
    .stk-face-hold { position: sticky; top: 5.5rem; z-index: 1; }
    @media (max-width: 59.99rem) {
      .stk-face-hold { top: 0; padding: 0.7rem 0 0.7rem; background: var(--stk-panel); box-shadow: 0 14px 18px -14px var(--stk-shadow); }
      .stk-face { max-width: 24rem; margin: 0 auto; }
      .stk-face-cap { display: none; }
      .stk-run .stk-beats > li { min-height: 52vh; }
    }

    @keyframes stk-soot { 0% { opacity: 0; } 28% { opacity: 0.66; } 76% { opacity: 0.66; } 100% { opacity: 0.14; } }
    .stk-soot { animation: stk-soot linear both; animation-timeline: --stk-run; animation-range: contain 2% contain 98%; }

    @keyframes stk-spall { 0% { opacity: 0; transform: scale(0.55); } 100% { opacity: 0.92; transform: none; } }
    @keyframes stk-spall-dress { from { opacity: 0.92; } to { opacity: 0.1; } }
    .stk-spall { animation: stk-spall linear both, stk-spall-dress linear forwards; animation-timeline: --stk-run, --stk-run; }
    .stk-sp1 { animation-range: contain 16% contain 22%, contain 84% contain 92%; }
    .stk-sp2 { animation-range: contain 20% contain 26%, contain 85% contain 93%; }
    .stk-sp3 { animation-range: contain 23% contain 29%, contain 86% contain 94%; }

    @keyframes stk-frost { 0% { opacity: 0.95; transform: scaleX(0); } 60% { opacity: 0.95; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
    .stk-frost { animation: stk-frost linear both; animation-timeline: --stk-run; animation-range: contain 18% contain 36%; }

    /* the first lime gives way to an old cement repair */
    @keyframes stk-l0-go { from { opacity: 1; } to { opacity: 0; } }
    @keyframes stk-cm-on { from { opacity: 0; } to { opacity: 1; } }
    .stk-l0 { animation: stk-l0-go linear both; animation-timeline: --stk-run; animation-range: contain 11% contain 13%; }
    /* raked out, one joint after another */
    @keyframes stk-rake { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
    @keyframes stk-rake-v { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
    .stk-cm { animation: stk-cm-on linear both, stk-rake linear both; animation-timeline: --stk-run, --stk-run; }
    .stk-j3 .stk-cm, .stk-j4 .stk-cm, .stk-j5 .stk-cm, .stk-j6 .stk-cm, .stk-j7 .stk-cm, .stk-j8 .stk-cm, .stk-j10 .stk-cm, .stk-j11 .stk-cm { animation-name: stk-cm-on, stk-rake-v; }
    /* and repointed, one joint after another */
    @keyframes stk-point { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes stk-point-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
    .stk-l1 { animation: stk-point linear both; animation-timeline: --stk-run; }
    .stk-j3 .stk-l1, .stk-j4 .stk-l1, .stk-j5 .stk-l1, .stk-j6 .stk-l1, .stk-j7 .stk-l1, .stk-j8 .stk-l1, .stk-j10 .stk-l1, .stk-j11 .stk-l1 { animation-name: stk-point-v; }

    .stk-j1 .stk-cm { animation-range: contain 9% contain 13%,  contain 38% contain 44%; }
    .stk-j2 .stk-cm { animation-range: contain 9% contain 13%,  contain 41% contain 47%; }
    .stk-j9 .stk-cm { animation-range: contain 9% contain 13%,  contain 43% contain 49%; }
    .stk-j3 .stk-cm { animation-range: contain 10% contain 13%, contain 44% contain 47%; }
    .stk-j4 .stk-cm { animation-range: contain 10% contain 13%, contain 45% contain 48%; }
    .stk-j5 .stk-cm { animation-range: contain 10% contain 13%, contain 47% contain 50%; }
    .stk-j6 .stk-cm { animation-range: contain 10% contain 13%, contain 48% contain 51%; }
    .stk-j7 .stk-cm { animation-range: contain 10% contain 13%, contain 50% contain 53%; }
    .stk-j8 .stk-cm { animation-range: contain 10% contain 13%, contain 51% contain 54%; }
    .stk-j10 .stk-cm, .stk-j11 .stk-cm { animation-range: contain 10% contain 13%, contain 52% contain 55%; }

    .stk-j1 .stk-l1 { animation-range: contain 56% contain 63%; }
    .stk-j3 .stk-l1 { animation-range: contain 60% contain 64%; }
    .stk-j4 .stk-l1 { animation-range: contain 62% contain 66%; }
    .stk-j2 .stk-l1 { animation-range: contain 64% contain 71%; }
    .stk-j9 .stk-l1 { animation-range: contain 76% contain 82%; }
    .stk-j5 .stk-l1 { animation-range: contain 68% contain 72%; }
    .stk-j6 .stk-l1 { animation-range: contain 70% contain 74%; }
    .stk-j7 .stk-l1 { animation-range: contain 73% contain 77%; }
    .stk-j8 .stk-l1 { animation-range: contain 75% contain 79%; }
    .stk-j10 .stk-l1 { animation-range: contain 79% contain 82%; }
    .stk-j11 .stk-l1 { animation-range: contain 80% contain 83%; }

    /* the beat being told is lit; the rest wait */
    @keyframes stk-beat { 0% { opacity: 0.5; } 30%, 70% { opacity: 1; } 100% { opacity: 0.5; } }
    .stk-run .stk-beats > li { animation: stk-beat linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
  }
}

/* ---------------------------------------------------------------- in-date: the five-year cadence, drawn in HTML (real type, no money) */
.stk-cadence {
  position: relative; z-index: 2; margin: 0;
  padding: 1rem 1.1rem 1.15rem; border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 22px 40px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre);
}
.stk-cadence-cap { color: var(--stk-ink-soft); font: italic 0.92rem/1.4 var(--stk-text); max-width: 34rem; }
.stk-cadence-scale, .stk-lane-track { margin-right: 0.45rem; }
.stk-cadence-scale { position: relative; height: 1.2rem; margin-top: 0.8rem; color: var(--stk-muted); font: 600 0.74rem/1 var(--stk-display); letter-spacing: 0.06em; }
.stk-cadence-scale > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.stk-cadence-scale > span:nth-child(1) { left: 0; transform: none; }
.stk-cadence-scale > span:nth-child(2) { left: 20%; }
.stk-cadence-scale > span:nth-child(3) { left: 40%; }
.stk-cadence-scale > span:nth-child(4) { left: 60%; }
.stk-cadence-scale > span:nth-child(5) { left: 80%; }
.stk-cadence-scale > span:nth-child(6) { left: 100%; transform: translateX(-100%); }
.stk-lanes { margin-top: 0.3rem; display: grid; gap: 0.7rem; }
.stk-lane { display: grid; gap: 0.3rem; }
.stk-lane-name { color: var(--stk-ink); font: 600 0.98rem/1.25 var(--stk-display); }
.stk-lane-name em { display: block; color: var(--stk-muted); font: italic 0.84rem/1.35 var(--stk-text); }
.stk-lane-track {
  position: relative; height: 1.1rem; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--stk-lime-dim) 0 1px, transparent 1px 20%), var(--stk-panel-deep);
}
.stk-lane-track > * { position: absolute; top: 0; bottom: 0; }
.stk-lane-track .stk-tick { width: 5px; margin-left: -5px; border-radius: 2px; }
.stk-lane--gas .stk-tick { background: var(--stk-moss); }
.stk-lane--gas .stk-tick:nth-of-type(1) { left: 20%; }
.stk-lane--gas .stk-tick:nth-of-type(2) { left: 40%; }
.stk-lane--gas .stk-tick:nth-of-type(3) { left: 60%; }
.stk-lane--gas .stk-tick:nth-of-type(4) { left: 80%; }
.stk-lane--gas .stk-tick:nth-of-type(5) { left: 100%; }
/* the early window: two months before each anniversary = 2/60 of the strip */
.stk-win { width: 3.333%; background: color-mix(in oklab, var(--stk-moss) 52%, var(--stk-panel-deep)); }
.stk-win:nth-of-type(1) { left: 16.667%; }
.stk-win:nth-of-type(2) { left: 36.667%; }
.stk-win:nth-of-type(3) { left: 56.667%; }
.stk-win:nth-of-type(4) { left: 76.667%; }
.stk-win:nth-of-type(5) { left: 96.667%; }
.stk-lane--eicr .stk-tick { left: 100%; width: 7px; margin-left: -7px; background: var(--stk-ochre); }
.stk-run-on { left: 0; right: -0.45rem; background: linear-gradient(90deg, color-mix(in oklab, var(--stk-ink) 44%, transparent), color-mix(in oklab, var(--stk-ink) 70%, transparent)); clip-path: polygon(0 32%, calc(100% - 0.7rem) 32%, calc(100% - 0.7rem) 0, 100% 50%, calc(100% - 0.7rem) 100%, calc(100% - 0.7rem) 68%, 0 68%); }
@media (min-width: 46rem) {
  .stk-lane { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .stk-cadence-scale { margin-left: 16rem; }
}

/* ---------------------------------------------------------------- ackworth: arrival — the picture fills the course, the words stand in its sky */
.stk-arrive { padding: 0; }
.stk-arrive-stack { display: grid; grid-template-areas: "pic" "lede"; position: relative; }
.stk-arrive-img { grid-area: pic; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% 50%; border-radius: 5px 5px 0 0; }
.stk-arrive-stack::after {
  content: ""; grid-area: pic; pointer-events: none; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--stk-bg) 48%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 22%, transparent) 30%, transparent 46%);
}
.stk-arrive-words { display: contents; }
.stk-arrive h1 {
  grid-area: pic; align-self: start; position: relative; z-index: 1;
  padding: clamp(1.2rem, 4.4vw, 3.2rem) var(--stk-pad-x) 0; max-width: 30rem;
  font-size: clamp(2.35rem, 1.4rem + 3.9vw, 4.5rem); line-height: 1.02; letter-spacing: -0.01em;
}
.stk-arrive-lede { grid-area: lede; padding: 1.2rem var(--stk-pad-x) 0; max-width: 40rem; color: var(--stk-ink-soft); font-size: 1.12em; line-height: 1.55; }
.stk-arrive-credit { margin: 0; padding: 0.9rem var(--stk-pad-x) var(--stk-pad-y); }
@media (min-width: 46rem) {
  .stk-arrive-stack { grid-template-areas: "pic"; }
  .stk-arrive-img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .stk-arrive-stack::after { background: linear-gradient(115deg, color-mix(in oklab, var(--stk-bg) 52%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 26%, transparent) 34%, transparent 56%); }
  .stk-arrive-words {
    display: block; grid-area: pic; align-self: start; position: relative; z-index: 1;
    padding: clamp(1.4rem, 3.4vw, 3rem) var(--stk-pad-x) 0; max-width: min(42rem, 60%);
  }
  .stk-arrive h1 { padding: 0; max-width: none; }
  .stk-arrive-lede { padding: 0; margin-top: 1rem; color: var(--stk-ink); }
}

/* ---------------------------------------------------------------- in-date: split — words left, the cupboard right, the cadence crossing its foot */
.stk-dueopen-grid { display: grid; grid-template-areas: "head" "pic" "strip" "lede"; }
.stk-dueopen h1 { grid-area: head; font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 1rem; }
.stk-dueopen-img { grid-area: pic; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; border-radius: 4px; }
.stk-dueopen .stk-cadence { grid-area: strip; margin: -2.4rem 0.6rem 0; }
.stk-dueopen-lede { grid-area: lede; margin-top: 1.3rem; max-width: var(--stk-measure); }
.stk-dueopen .stk-credit { margin-top: 1.1rem; }
@media (min-width: 56rem) {
  .stk-dueopen-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-areas: "head pic" "lede pic" "strip strip";
    column-gap: 2.2rem;
  }
  .stk-dueopen h1 { align-self: end; margin-bottom: 0; }
  .stk-dueopen-lede { align-self: start; margin-top: 1.1rem; padding-bottom: 3.6rem; }
  /* size containment: the picture adds nothing to the rows, then fills both — so the strip below always crosses its foot */
  .stk-dueopen-img { contain: size; height: 100%; min-height: 24rem; aspect-ratio: auto; object-position: 30% 50%; }
  .stk-dueopen .stk-cadence { margin: -3rem 14% 0 0; }
}

/* ---------------------------------------------------------------- shared-stone: feathered — no frame, the entrance melts into the course */
.stk-feather-stack { display: grid; grid-template-areas: "pic" "lede"; }
.stk-feather-img {
  grid-area: pic; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 74% 50%;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, black 22%, black 94%, transparent 100%);
  mask-image: linear-gradient(0deg, transparent 0%, black 22%, black 94%, transparent 100%);
}
.stk-feather-stack::before {
  content: ""; grid-area: pic; position: relative; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in oklab, var(--stk-panel) 78%, transparent) 0%, color-mix(in oklab, var(--stk-panel) 40%, transparent) 26%, transparent 44%);
}
.stk-feather-words { display: contents; }
.stk-feather h1 {
  grid-area: pic; align-self: start; position: relative; z-index: 2; padding-top: 0.2rem; max-width: 62%;
  font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.01em;
}
.stk-feather-lede { grid-area: lede; margin-top: -1.6rem; position: relative; z-index: 2; max-width: var(--stk-measure); color: var(--stk-ink-soft); font-size: 1.12em; line-height: 1.55; }
.stk-feather .stk-credit { margin-top: 1rem; }
@media (min-width: 46rem) {
  .stk-feather-stack { grid-template-areas: "pic"; }
  .stk-feather-img {
    aspect-ratio: 16 / 10; object-position: 50% 42%;
    /* feathered on all four sides — a hard top or right edge reads as a crop, not a fade */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 38%, black 93%, transparent 100%), linear-gradient(0deg, transparent 0%, black 18%, black 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, black 38%, black 93%, transparent 100%), linear-gradient(0deg, transparent 0%, black 18%, black 90%, transparent 100%);
    mask-composite: intersect;
  }
  /* the fade alone left the lit bin store under the end of the lede: deepen the zone the words stand in */
  .stk-feather-stack::before { background: linear-gradient(90deg, color-mix(in oklab, var(--stk-panel) 80%, transparent) 0%, color-mix(in oklab, var(--stk-panel) 72%, transparent) 34%, color-mix(in oklab, var(--stk-panel) 34%, transparent) 48%, transparent 60%); }
  .stk-feather-words { display: block; grid-area: pic; align-self: center; position: relative; z-index: 2; max-width: min(30rem, 44%); }
  .stk-feather h1 { padding-top: 0; max-width: none; }
  .stk-feather-lede { margin-top: 1.1rem; color: var(--stk-ink); }
}

/* ---------------------------------------------------------------- the keep: the owners' and residents' portal */
.stk-keep-open h1 { margin-top: 0.15rem; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stk-keep-open .stk-lede { margin-top: 1rem; }

.stk-keep-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: -0.3rem 0 1.5rem; }
.stk-keep-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem;
  border: 0; border-radius: 4px; background: var(--stk-panel-up); color: var(--stk-ink);
  font: 600 0.95rem/1 var(--stk-display); text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--stk-ease), box-shadow 160ms var(--stk-ease);
}
.stk-keep-tab:hover { background: var(--stk-ochre-deep); color: var(--stk-ink); }
.stk-keep-tab[aria-current="page"] { background: var(--stk-moss-deep); box-shadow: inset 0 -4px 0 var(--stk-moss); }
.stk-keep-out { display: inline-flex; margin: 0; }
.stk-keep-who { flex-basis: 100%; color: var(--stk-muted); font: italic 0.9rem/1.3 var(--stk-text); overflow-wrap: anywhere; }
@media (min-width: 52rem) { .stk-keep-who { flex-basis: auto; margin-left: auto; } }

.stk-keep-note { margin-top: 1.1rem; max-width: 44rem; padding: 0.8rem 1rem; border-radius: 4px; background: var(--stk-moss-deep); color: var(--stk-ink); box-shadow: inset 4px 0 0 var(--stk-moss); }
.stk-keep-alert { padding: 0.85rem 1rem; border-radius: 4px; background: var(--stk-ochre-deep); color: var(--stk-ink); box-shadow: inset 4px 0 0 var(--stk-ochre); }
.stk-keep-alert ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.stk-keep-alert a { color: var(--stk-ink); }
.stk-keep-alert-h { font-weight: 700; }
.stk-keep-alert--hard { margin-top: 1.2rem; max-width: 46rem; }
.stk-keep-honest { margin-top: 1.4rem; max-width: 46rem; padding: 0.9rem 1rem; border-radius: 4px; background: var(--stk-panel-deep); color: var(--stk-ink-soft); box-shadow: inset 4px 0 0 var(--stk-ochre-deep); }
.stk-keep-small { color: var(--stk-ink-soft); font-size: 0.95em; }

.stk-keep-pair { display: grid; gap: 1.8rem; }
@media (min-width: 56rem) { .stk-keep-pair { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.6rem; align-items: start; } }
.stk-keep-form { display: grid; gap: 0.9rem; align-content: start; max-width: 30rem; }
.stk-keep-form--wide { max-width: 42rem; }
.stk-keep-form h2 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
.stk-keep-form h3 { font-size: 1.3rem; }
.stk-keep-form .stk-field input { max-width: 100%; }
.stk-keep-form .stk-go { justify-self: start; }
.stk-keep-aside { padding: 1.2rem 1.25rem 1.35rem; border-radius: 4px; background: var(--stk-panel); box-shadow: inset 0 4px 0 var(--stk-moss); }
.stk-keep-aside h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.stk-keep-aside p { margin: 0.5rem 0 0; color: var(--stk-ink-soft); }

.stk-field textarea {
  width: 100%; min-height: 8rem; padding: 0.6rem 0.75rem; resize: vertical;
  border-radius: 4px; border: 2px solid var(--stk-lime-dim); background: var(--stk-panel-deep);
  color: var(--stk-ink); font: 400 1.05rem/1.45 var(--stk-text);
  transition: border-color 160ms var(--stk-ease);
}
.stk-field textarea:hover { border-color: var(--stk-ochre-deep); }
.stk-field textarea:focus-visible { border-color: var(--stk-moss); outline-offset: 2px; }
.stk-field textarea[aria-invalid="true"] { border-color: var(--stk-ochre); }

.stk-keep-choices { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.stk-keep-choices legend { margin-bottom: 0.4rem; padding: 0; color: var(--stk-ink); font: 600 1rem/1.3 var(--stk-display); }
.stk-keep-choices > small { display: block; margin: -0.1rem 0 0.2rem; color: var(--stk-muted); font: italic 0.88rem/1.4 var(--stk-text); }
.stk-keep-choice {
  display: flex; align-items: flex-start; gap: 0.7rem; min-height: 44px; padding: 0.65rem 0.8rem;
  border-radius: 4px; background: var(--stk-panel-up); cursor: pointer;
  transition: background-color 160ms var(--stk-ease), box-shadow 160ms var(--stk-ease);
}
.stk-keep-choice:hover { background: var(--stk-ochre-deep); }
.stk-keep-choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--stk-moss); }
.stk-keep-choice b { font: 600 1rem/1.3 var(--stk-display); }
.stk-keep-choice em { color: var(--stk-ink-soft); font-size: 0.94em; }
.stk-keep-choice:has(input:checked) { background: var(--stk-moss-deep); box-shadow: inset 4px 0 0 var(--stk-moss); }
.stk-keep-consent { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem; }
.stk-keep-consent input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--stk-moss); }
.stk-keep-consent label { flex: 1 1 14rem; }
.stk-keep-consent .stk-err { flex-basis: 100%; margin-top: 0; }
.stk-keep-consent.is-invalid input { outline: 2px solid var(--stk-ochre); outline-offset: 2px; }

.stk-keep-danger { max-width: 40rem; padding: 1.1rem 1.2rem 1.25rem; border-radius: 4px; background: var(--stk-panel-deep); box-shadow: inset 4px 0 0 var(--stk-ochre); }
.stk-keep-danger p { color: var(--stk-ink-soft); }
.stk-keep-inline { margin-top: 1.4rem; }
.stk-keep-inline-btn { margin: 1rem 0 1.4rem; }

/* buildings and homes: stones laid in a course of their own */
.stk-keep-stones { margin: 1.1rem 0 1.2rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.stk-keep-stones a {
  display: grid; gap: 0.25rem; min-height: 44px; padding: 0.9rem 1rem 1rem; border-radius: 4px;
  background: var(--stk-panel-up); color: var(--stk-ink); text-decoration: none;
  transition: background-color 170ms var(--stk-ease), transform 170ms var(--stk-ease);
}
.stk-keep-stones a:hover { background: var(--stk-ochre-deep); color: var(--stk-ink); transform: translateY(-2px); }
.stk-keep-stones b { font: 600 1.12rem/1.25 var(--stk-display); overflow-wrap: anywhere; }
.stk-keep-stones span { color: var(--stk-ink-soft); font-size: 0.94em; }
.stk-keep-stones li.is-late a { box-shadow: inset 4px 0 0 var(--stk-ochre); }

.stk-keep-due { margin-top: 1rem; display: grid; gap: 0.45rem; }
.stk-keep-due li { display: grid; gap: 0.15rem 1rem; padding: 0.75rem 0.95rem; border-radius: 4px; background: var(--stk-panel); box-shadow: inset 4px 0 0 var(--stk-moss); }
.stk-keep-due li.is-late { box-shadow: inset 4px 0 0 var(--stk-ochre); }
.stk-keep-due-when { font: 700 1rem/1.3 var(--stk-display); }
.stk-keep-due-what em { color: var(--stk-muted); }
.stk-keep-due a { overflow-wrap: anywhere; }
@media (min-width: 52rem) { .stk-keep-due li { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }

.stk-keep-faults { margin: 1rem 0 1.2rem; display: grid; gap: 0.45rem; }
.stk-keep-faults li { display: grid; gap: 0.25rem; padding: 0.8rem 0.95rem; border-radius: 4px; background: var(--stk-panel-up); }
.stk-keep-faults a { color: var(--stk-ink); font: 600 1.05rem/1.35 var(--stk-display); overflow-wrap: anywhere; }
.stk-keep-faults span { color: var(--stk-ink-soft); font-size: 0.93em; }
.stk-keep-step, .stk-keep-flag, .stk-keep-status b {
  justify-self: start; padding: 0.15rem 0.55rem; border-radius: 3px; background: var(--stk-moss-deep); color: var(--stk-ink);
  font: 600 0.8rem/1.45 var(--stk-display); letter-spacing: 0.08em; text-transform: uppercase;
}
.stk-keep-flag { background: var(--stk-ochre-deep); }
.stk-keep-flag--soon { background: var(--stk-moss-deep); }
.stk-keep-status { margin-top: 1.1rem; color: var(--stk-ink-soft); font: 600 1rem/1.4 var(--stk-display); }
.stk-keep-status b { margin-left: 0.3rem; font-size: 0.9rem; }

.stk-keep-split { display: grid; gap: 1.6rem; margin-top: 1rem; }
@media (min-width: 60rem) { .stk-keep-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.4rem; align-items: start; } }
.stk-keep-worked { padding: 1.1rem 1.2rem 1.3rem; border-radius: 4px; background: var(--stk-panel); box-shadow: inset 0 4px 0 var(--stk-ochre-deep); }
.stk-keep-strip-h { color: var(--stk-muted); font: 600 0.86rem/1.3 var(--stk-display); letter-spacing: 0.14em; text-transform: uppercase; }
.stk-keep-code { margin: 0.8rem 0 0.6rem; color: var(--stk-ochre-lift); font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.1 var(--stk-display); letter-spacing: 0.12em; overflow-wrap: anywhere; }

.stk-keep-said { margin-top: 1rem; display: grid; gap: 0.7rem; max-width: 46rem; }
.stk-keep-said > div { padding-left: 0.95rem; box-shadow: inset 4px 0 0 var(--stk-lime-dim); }
.stk-keep-said dt { color: var(--stk-muted); font: 600 0.82rem/1.3 var(--stk-display); letter-spacing: 0.12em; text-transform: uppercase; }
.stk-keep-said dd { color: var(--stk-ink); overflow-wrap: anywhere; white-space: pre-line; }

/* the eight steps: the current one is laid, the rest wait their turn */
.stk-keep-route { margin: 1.2rem 0; display: grid; gap: 0.4rem; counter-reset: stk-route; }
.stk-keep-route li {
  counter-increment: stk-route; position: relative; display: grid; gap: 0.15rem;
  padding: 0.7rem 0.95rem 0.75rem 3rem; border-radius: 4px; background: var(--stk-panel-deep); color: var(--stk-muted);
}
.stk-keep-route li::before { content: counter(stk-route); position: absolute; left: 0.95rem; top: 0.62rem; font: 600 1.25rem/1 var(--stk-display); color: var(--stk-muted); }
.stk-keep-route b { color: var(--stk-ink-soft); font: 600 1.02rem/1.3 var(--stk-display); }
.stk-keep-route li.is-now { background: var(--stk-moss-deep); color: var(--stk-ink); box-shadow: inset 5px 0 0 var(--stk-moss); }
.stk-keep-route li.is-now b, .stk-keep-route li.is-now::before { color: var(--stk-ink); }
@media (min-width: 52rem) { .stk-keep-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the index course that leads to it */
.stk-keep-call-in { display: grid; gap: 1.4rem; }
.stk-keep-call-in p { max-width: var(--stk-measure); margin-top: 0.8rem; }
.stk-keep-call-doors { display: grid; gap: 0.6rem; align-content: start; justify-items: start; }
.stk-keep-call-doors .stk-more { margin-top: 0; }
.stk-more--plain { background: transparent; box-shadow: inset 0 0 0 2px var(--stk-moss-deep); }
.stk-more--plain:hover { background: var(--stk-moss-deep); color: var(--stk-ink); }
@media (min-width: 56rem) { .stk-keep-call-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 2.4rem; align-items: end; } }

/* the five-year strip drawn by the server: one class per month step, so the markup carries no style attribute */
.stk-mo-0 { --at: 0%; }
.stk-mo-1 { --at: 1.667%; }
.stk-mo-2 { --at: 3.333%; }
.stk-mo-3 { --at: 5%; }
.stk-mo-4 { --at: 6.667%; }
.stk-mo-5 { --at: 8.333%; }
.stk-mo-6 { --at: 10%; }
.stk-mo-7 { --at: 11.667%; }
.stk-mo-8 { --at: 13.333%; }
.stk-mo-9 { --at: 15%; }
.stk-mo-10 { --at: 16.667%; }
.stk-mo-11 { --at: 18.333%; }
.stk-mo-12 { --at: 20%; }
.stk-mo-13 { --at: 21.667%; }
.stk-mo-14 { --at: 23.333%; }
.stk-mo-15 { --at: 25%; }
.stk-mo-16 { --at: 26.667%; }
.stk-mo-17 { --at: 28.333%; }
.stk-mo-18 { --at: 30%; }
.stk-mo-19 { --at: 31.667%; }
.stk-mo-20 { --at: 33.333%; }
.stk-mo-21 { --at: 35%; }
.stk-mo-22 { --at: 36.667%; }
.stk-mo-23 { --at: 38.333%; }
.stk-mo-24 { --at: 40%; }
.stk-mo-25 { --at: 41.667%; }
.stk-mo-26 { --at: 43.333%; }
.stk-mo-27 { --at: 45%; }
.stk-mo-28 { --at: 46.667%; }
.stk-mo-29 { --at: 48.333%; }
.stk-mo-30 { --at: 50%; }
.stk-mo-31 { --at: 51.667%; }
.stk-mo-32 { --at: 53.333%; }
.stk-mo-33 { --at: 55%; }
.stk-mo-34 { --at: 56.667%; }
.stk-mo-35 { --at: 58.333%; }
.stk-mo-36 { --at: 60%; }
.stk-mo-37 { --at: 61.667%; }
.stk-mo-38 { --at: 63.333%; }
.stk-mo-39 { --at: 65%; }
.stk-mo-40 { --at: 66.667%; }
.stk-mo-41 { --at: 68.333%; }
.stk-mo-42 { --at: 70%; }
.stk-mo-43 { --at: 71.667%; }
.stk-mo-44 { --at: 73.333%; }
.stk-mo-45 { --at: 75%; }
.stk-mo-46 { --at: 76.667%; }
.stk-mo-47 { --at: 78.333%; }
.stk-mo-48 { --at: 80%; }
.stk-mo-49 { --at: 81.667%; }
.stk-mo-50 { --at: 83.333%; }
.stk-mo-51 { --at: 85%; }
.stk-mo-52 { --at: 86.667%; }
.stk-mo-53 { --at: 88.333%; }
.stk-mo-54 { --at: 90%; }
.stk-mo-55 { --at: 91.667%; }
.stk-mo-56 { --at: 93.333%; }
.stk-mo-57 { --at: 95%; }
.stk-mo-58 { --at: 96.667%; }
.stk-mo-59 { --at: 98.333%; }
.stk-mo-60 { --at: 100%; }

/* checkboxes and radio buttons drawn as part of the page (a native one paints no surface of its own here) */
.stk-keep-choice input, .stk-keep-consent input {
  appearance: none; -webkit-appearance: none; display: inline-block; flex: none;
  width: 1.3rem; height: 1.3rem; margin: 0.12rem 0 0; border: 2px solid var(--stk-moss); border-radius: 3px;
  background: var(--stk-panel-deep); cursor: pointer;
  transition: background-color 140ms var(--stk-ease), box-shadow 140ms var(--stk-ease);
}
.stk-keep-choice input[type="radio"] { border-radius: 50%; }
.stk-keep-choice input:checked, .stk-keep-consent input:checked { background: var(--stk-moss); box-shadow: inset 0 0 0 3px var(--stk-panel-deep); }
.stk-keep-choice input:hover, .stk-keep-consent input:hover { border-color: var(--stk-moss-lift); }

/* a field no person sees or fills in: off the page, hidden from screen readers, out of the tab order */
.stk-keep-trap { position: absolute; left: -10000px; top: auto; opacity: 0; pointer-events: none; }

/* ================================================================= the company frame (realism round, 2026-11-13)
   Contact, privacy, terms, complaints, accessibility and questions are courses of the same wall. Each
   opener places its picture its own way: a full band with a card on its corner (contact), the words in
   the picture's dark wall (privacy), a picture set apart with air (terms), a band of stone with the
   title in its shadow (complaints), a card across a picture's corner (accessibility), a narrow upright
   beside the words (questions). */

/* ---------------------------------------------------------------- footer: the small print, as stones you can press */
.stk-print { margin-bottom: 1.4rem; }
.stk-print ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stk-print a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
  border-radius: 4px; background: var(--stk-panel); color: var(--stk-ink); text-decoration: none;
  font: 600 0.95rem/1.2 var(--stk-display);
  box-shadow: inset 0 -3px 0 var(--stk-panel-up);
  transition: background-color 160ms var(--stk-ease), transform 160ms var(--stk-ease);
}
.stk-print a:hover { background: var(--stk-ochre-deep); color: var(--stk-ink); transform: translateY(-2px); }
.stk-print a[aria-current="page"] { background: var(--stk-moss-deep); box-shadow: inset 0 -3px 0 var(--stk-moss); }

/* ---------------------------------------------------------------- contact: the letterplate band, the address card on its corner */
.stk-letter { padding: 0; }
/* on a phone only the title stands on the door; the lede follows the picture */
.stk-letter-fig { display: grid; grid-template-areas: "pic" "lede"; margin: 0; overflow: clip; border-radius: 5px 5px 0 0; }
.stk-letter-img { grid-area: pic; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; }
.stk-letter-fig::after {
  content: ""; grid-area: pic; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--stk-bg) 66%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 46%, transparent) 28%, transparent 46%);
}
.stk-letter-words { display: contents; }
.stk-letter h1 {
  grid-area: pic; align-self: start; position: relative; z-index: 1;
  padding: clamp(1.2rem, 4vw, 3rem) var(--stk-pad-x) 0;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 9em;
}
.stk-letter-lede { grid-area: lede; padding: 1.2rem var(--stk-pad-x) 0; max-width: 34rem; color: var(--stk-ink-soft); font-size: 1.08em; line-height: 1.5; }
.stk-letter-post {
  position: relative; z-index: 2;
  margin: 1.3rem var(--stk-pad-x) 0; width: auto;
  padding: 1.15rem 1.25rem 1.25rem; border-radius: 4px;
  background: var(--stk-panel-up);
  box-shadow: 0 24px 44px -18px var(--stk-shadow), inset 0 4px 0 var(--stk-ochre);
}
.stk-letter-post-h { color: var(--stk-ochre-lift); font: 600 0.86rem/1.2 var(--stk-display); letter-spacing: 0.2em; text-transform: uppercase; }
.stk-letter-post p:last-child { margin-top: 0.4rem; color: var(--stk-ink-soft); font-size: 0.95em; }
.stk-letter .stk-credit { padding: 0.9rem var(--stk-pad-x) var(--stk-pad-y); margin: 0; }
@media (min-width: 46rem) {
  .stk-letter-fig { grid-template-areas: "pic"; }
  .stk-letter-img { aspect-ratio: 16 / 10; object-position: 50% 50%; }
  /* the lit door frame runs down the middle of the picture: the shade reaches past it */
  .stk-letter-fig::after { background: linear-gradient(90deg, color-mix(in oklab, var(--stk-bg) 66%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 54%, transparent) 36%, color-mix(in oklab, var(--stk-bg) 30%, transparent) 50%, transparent 60%); }
  .stk-letter-words { display: block; grid-area: pic; align-self: center; position: relative; z-index: 1; max-width: min(30rem, 44%); padding: 0 0 0 var(--stk-pad-x); }
  .stk-letter h1 { padding: 0; }
  .stk-letter-lede { padding: 0; margin-top: 0.8rem; max-width: 26rem; color: var(--stk-ink); }
  .stk-letter-post { margin: -2.6rem var(--stk-pad-x) 0 auto; width: min(24rem, calc(100% - 2 * var(--stk-pad-x))); }
}
@media (min-width: 64rem) { .stk-letter-post { margin-top: -6.5rem; } }

.stk-subjects { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.stk-subjects > div { display: grid; gap: 0.2rem 1rem; padding: 0.75rem 0.95rem 0.8rem; border-radius: 4px; background: var(--stk-panel); }
.stk-subjects dt { justify-self: start; padding: 0.12rem 0.55rem; border-radius: 3px; background: var(--stk-moss-deep); color: var(--stk-ink); font: 600 0.88rem/1.45 var(--stk-display); letter-spacing: 0.06em; }
.stk-subjects dd { color: var(--stk-ink-soft); }
@media (min-width: 40rem) { .stk-subjects > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; } }
.stk-write h3 { font-size: 1.3rem; }
.stk-hours { margin-top: 0.8rem; display: grid; gap: 0.75rem; }
.stk-hours dt { color: var(--stk-ochre-lift); font: 600 0.86rem/1.3 var(--stk-display); letter-spacing: 0.12em; text-transform: uppercase; }
.stk-hours dd { margin-top: 0.15rem; color: var(--stk-ink-soft); }
.stk-calls { margin-top: 1.2rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.stk-calls > div { padding: 1rem 1.1rem 1.1rem; border-radius: 4px; background: var(--stk-panel); box-shadow: inset 0 4px 0 var(--stk-ochre); }
.stk-calls dt { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--stk-display); color: var(--stk-ink); }
.stk-calls dd { margin-top: 0.35rem; color: var(--stk-ink-soft); }
.stk-calls + .stk-measure { margin-top: 1.1rem; }
.stk-postal { font-style: normal; font: 600 clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem)/1.45 var(--stk-display); color: var(--stk-ink); overflow-wrap: anywhere; }
.stk-postal + .stk-more { margin-top: 1rem; }

/* ---------------------------------------------------------------- privacy: the title stands in the room's dark wall */
.stk-shut { padding: 0; }
.stk-shut-fig { position: relative; margin: 0; overflow: clip; border-radius: 5px 5px 0 0; }
/* on a phone the window stays in the frame and the title takes the dark wall beside it */
.stk-shut-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 72% 50%; }
.stk-shut-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, color-mix(in oklab, var(--stk-bg) 40%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 22%, transparent) 46%, transparent 56%); }
.stk-shut-words { position: absolute; z-index: 1; left: 47%; top: 0; right: 0; padding: clamp(1.1rem, 4vw, 3rem) var(--stk-pad-x) 0 0; }
.stk-shut h1 { font-size: clamp(2.1rem, 1.2rem + 5vw, 5.4rem); line-height: 1; letter-spacing: -0.012em; }
.stk-shut-foot { padding: 1.3rem var(--stk-pad-x) 0; }
.stk-shut-date { margin-top: 0.8rem; color: var(--stk-ochre-lift); font: 600 0.92rem/1.3 var(--stk-display); letter-spacing: 0.08em; }
.stk-shut .stk-credit { padding: 0.6rem var(--stk-pad-x) var(--stk-pad-y); margin: 0; }
@media (min-width: 46rem) {
  .stk-shut-img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .stk-shut-fig::after { background: linear-gradient(270deg, color-mix(in oklab, var(--stk-bg) 34%, transparent) 0%, transparent 46%); }
  .stk-shut-words { left: auto; right: 0; top: 50%; transform: translateY(-50%); width: 40%; padding: 0 var(--stk-pad-x) 0 0; }
  .stk-shut-img { aspect-ratio: 3 / 2; }
}
.stk-reg--wide { margin-top: 1.2rem; max-width: 52rem; }
@media (min-width: 52rem) { .stk-reg--wide { grid-template-columns: max-content minmax(0, 1fr); } .stk-reg--wide dt { margin-top: 0.12rem; } }

/* the table of what is kept: a real table on a wide screen, a stack of stones on a phone */
.stk-held-wrap { margin-top: 1.3rem; }
.stk-held { width: 100%; border-collapse: separate; border-spacing: 0 0.4rem; font-size: 0.97em; }
.stk-held thead th { padding: 0 0.9rem 0.3rem; color: var(--stk-muted); font: 600 0.82rem/1.3 var(--stk-display); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.stk-held tbody th, .stk-held tbody td { padding: 0.85rem 0.9rem; vertical-align: top; background: var(--stk-panel-deep); color: var(--stk-ink-soft); text-align: left; }
.stk-held tbody th { color: var(--stk-ink); font: 600 1.02rem/1.3 var(--stk-display); border-radius: 4px 0 0 4px; width: 14%; }
.stk-held tbody td:last-child { border-radius: 0 4px 4px 0; }
.stk-held code { display: inline-block; margin-top: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: var(--stk-moss-deep); color: var(--stk-ink); font: 600 0.82rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.stk-held--cookies tbody th code { margin-top: 0; }
@media (max-width: 52rem) {
  .stk-held, .stk-held tbody, .stk-held tr, .stk-held th, .stk-held td { display: block; width: auto; }
  .stk-held thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stk-held tr { margin-bottom: 0.5rem; border-radius: 4px; background: var(--stk-panel-deep); }
  .stk-held tbody th { border-radius: 4px 4px 0 0; padding-bottom: 0.3rem; width: auto; }
  .stk-held tbody td { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .stk-held tbody td:last-child { border-radius: 0 0 4px 4px; padding-bottom: 0.9rem; }
  .stk-held tbody td::before { content: attr(data-th); display: block; color: var(--stk-ochre-lift); font: 600 0.78rem/1.3 var(--stk-display); letter-spacing: 0.12em; text-transform: uppercase; }
}

/* ---------------------------------------------------------------- terms: words, and a picture set apart with air */
.stk-entry { display: grid; gap: 1.8rem; }
.stk-entry h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em; }
.stk-entry .stk-lede { margin-top: 1rem; }
.stk-entry-jump { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stk-entry-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: 4px;
  background: var(--stk-panel-up); color: var(--stk-ink); font: 600 0.95rem/1.2 var(--stk-display); text-decoration: none;
  transition: background-color 160ms var(--stk-ease);
}
.stk-entry-jump a:hover { background: var(--stk-ochre-deep); color: var(--stk-ink); }
.stk-entry-fig { margin: 0; justify-self: center; width: min(19rem, 72%); }
.stk-entry-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; box-shadow: 0 30px 50px -26px var(--stk-shadow), 0 0 0 10px var(--stk-panel-deep); }
.stk-entry-fig .stk-credit { margin-top: 1.1rem; }
@media (min-width: 56rem) {
  .stk-entry { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; gap: 3.4rem; }
  .stk-entry-fig { width: min(20rem, 100%); justify-self: end; margin: 1.6rem 1rem 1.6rem 0; transform: rotate(-1.2deg); }
}
.stk-terms-list { margin-top: 1.3rem; list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.stk-terms-list > li { padding: 1rem 1.1rem 1.1rem; border-radius: 4px; background: var(--stk-panel-up); color: var(--stk-ink-soft); }
.stk-terms-list b { display: block; margin-bottom: 0.25rem; color: var(--stk-moss-lift); font: 600 1.08rem/1.25 var(--stk-display); }

/* ---------------------------------------------------------------- complaints: a band of stone, the title in its shadow */
.stk-mend { padding: 0; }
.stk-mend-fig { position: relative; margin: 0; overflow: clip; border-radius: 5px 5px 0 0; }
.stk-mend-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; }
.stk-mend-fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--stk-bg) 86%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 76%, transparent) 34%, color-mix(in oklab, var(--stk-bg) 22%, transparent) 60%, transparent 74%);
}
.stk-mend-words { position: absolute; z-index: 1; left: 0; top: 0; right: 0; padding: clamp(1.2rem, 4vw, 3rem) var(--stk-pad-x) 0; }
.stk-mend h1 { font-size: clamp(2.5rem, 1.4rem + 4.8vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em; }
.stk-mend-lede { padding: 1.3rem var(--stk-pad-x) 0; }
.stk-mend .stk-credit { padding: 0.6rem var(--stk-pad-x) var(--stk-pad-y); margin: 0; }
@media (min-width: 46rem) {
  .stk-mend-img { aspect-ratio: 2 / 1; object-position: 50% 50%; }
  .stk-mend-fig::after { background: linear-gradient(98deg, color-mix(in oklab, var(--stk-bg) 82%, transparent) 0%, color-mix(in oklab, var(--stk-bg) 66%, transparent) 36%, color-mix(in oklab, var(--stk-bg) 12%, transparent) 62%, transparent 74%); }
  .stk-mend-words { right: auto; max-width: 48%; }
}
.stk-stages { margin-top: 1.4rem; list-style: none; padding: 0; display: grid; gap: 0.5rem; counter-reset: stk-stage; }
.stk-stages > li { counter-increment: stk-stage; position: relative; display: grid; gap: 0.2rem 1.2rem; padding: 1.05rem 1.15rem 1.15rem 3.4rem; border-radius: 4px; background: var(--stk-panel-deep); }
.stk-stages > li::before { content: counter(stk-stage); position: absolute; left: 1.05rem; top: 0.82rem; color: var(--stk-ochre); font: 700 1.6rem/1 var(--stk-display); }
.stk-stages b { font: 600 1.2rem/1.25 var(--stk-display); color: var(--stk-ink); }
.stk-stage-when { justify-self: start; padding: 0.1rem 0.55rem; border-radius: 3px; background: var(--stk-moss-deep); color: var(--stk-ink); font: 600 0.86rem/1.5 var(--stk-display); letter-spacing: 0.04em; }
.stk-stages p { color: var(--stk-ink-soft); }
@media (min-width: 56rem) {
  .stk-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .stk-stages > li { align-content: start; }
  .stk-stages > li:nth-child(2) { margin-top: 1.4rem; margin-bottom: -1.4rem; }
}

/* ---------------------------------------------------------------- accessibility: a card laid across the picture's corner */
.stk-rail { display: grid; }
.stk-rail-fig { margin: 0; }
.stk-rail-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; border-radius: 4px; }
.stk-rail-card {
  position: relative; z-index: 2; margin: -3rem 0.6rem 0; padding: 1.3rem 1.35rem 1.4rem; border-radius: 4px;
  background: var(--stk-panel-up); box-shadow: 0 26px 46px -20px var(--stk-shadow), inset 0 4px 0 var(--stk-moss);
}
.stk-rail h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; }
.stk-rail-card p { margin-top: 0.8rem; color: var(--stk-ink-soft); max-width: 34rem; }
.stk-rail-credit { margin-top: 1rem; }
@media (min-width: 56rem) {
  .stk-rail { grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); grid-template-areas: "card pic" "credit credit"; align-items: center; }
  .stk-rail-fig { grid-area: pic; }
  .stk-rail-card { grid-area: card; margin: 0 -6rem 0 0; }
  .stk-rail-credit { grid-area: credit; justify-self: end; }
}

/* ---------------------------------------------------------------- questions: a narrow upright beside the words */
.stk-tagopen { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 1.2rem; align-items: start; }
.stk-tagopen-fig { margin: 0; }
.stk-tagopen-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 60% 60%; border-radius: 4px; }
.stk-tagopen-words { min-width: 0; }
.stk-tagopen h1 { font-size: clamp(1.9rem, 1.1rem + 3.8vw, 4.4rem); line-height: 1.04; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
.stk-tagopen .stk-lede { margin-top: 0.9rem; }
.stk-tagopen-jump { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.stk-tagopen-chip {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0 0.95rem; border-radius: 4px;
  background: var(--stk-moss-deep); color: var(--stk-ink); font: 600 0.98rem/1.2 var(--stk-display); text-decoration: none;
  transition: background-color 160ms var(--stk-ease);
}
.stk-tagopen-chip span { padding: 0.05rem 0.45rem; border-radius: 3px; background: var(--stk-panel-deep); font-size: 0.85em; }
.stk-tagopen-chip:hover { background: var(--stk-moss); color: var(--stk-bg); }
.stk-tagopen-credit { grid-column: 1 / -1; margin: 0; }
@media (max-width: 34rem) {
  .stk-tagopen { grid-template-columns: minmax(0, 1fr); }
  .stk-tagopen-fig { width: 62%; }
  .stk-tagopen .stk-lede { font-size: 1.05em; }
}
@media (min-width: 56rem) { .stk-tagopen { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.8rem; align-items: center; } }
.stk-qa { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.stk-qa > div { padding: 1.05rem 1.15rem 1.15rem; border-radius: 4px; background: var(--stk-panel-up); }
.stk-course--deep .stk-qa > div { background: var(--stk-panel); }
.stk-qa dt { color: var(--stk-ink); font: 600 clamp(1.08rem, 1rem + 0.35vw, 1.28rem)/1.3 var(--stk-display); }
.stk-qa dd { margin-top: 0.4rem; color: var(--stk-ink-soft); max-width: 46rem; }
@media (min-width: 64rem) {
  .stk-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .stk-qa > div:nth-child(odd) { margin-right: 0.6rem; }
  .stk-qa > div:nth-child(even) { margin-left: -0.6rem; margin-top: 1.2rem; margin-bottom: -1.2rem; }
}

/* ---------------------------------------------------------------- opened up: the three classes, as three stones in the limewash course */
.stk-classes { margin-top: 1.5rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.stk-class { padding: 1.05rem 1.1rem 1.15rem; border-radius: 4px; background: color-mix(in oklab, var(--stk-limewash) 80%, var(--stk-ochre)); }
.stk-class h3 { font-size: 1.45rem; }
.stk-class--emergency { box-shadow: inset 0 5px 0 var(--stk-limewash-ink); }
.stk-class > p { margin-top: 0.35rem; font-size: 0.95em; line-height: 1.45; }
.stk-class dl { margin-top: 0.8rem; display: grid; gap: 0.45rem; }
.stk-class dt { font: 600 0.86rem/1.3 var(--stk-display); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.86; }
.stk-class dd { font: 600 1.02rem/1.35 var(--stk-display); }
.stk-classes-note { margin-top: 1.2rem; max-width: 52rem; font-size: 0.95em; }

/* ---------------------------------------------------------------- the keep: classes, targets, the route and the trail */
.stk-keep-classes { margin-top: 1.1rem; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.stk-keep-class { padding: 1rem 1.05rem 1.1rem; border-radius: 4px; background: var(--stk-panel-up); }
.stk-keep-class--emergency { box-shadow: inset 0 4px 0 var(--stk-ochre); }
.stk-keep-class--urgent { box-shadow: inset 0 4px 0 var(--stk-ochre-deep); }
.stk-keep-class--routine { box-shadow: inset 0 4px 0 var(--stk-moss-deep); }
.stk-keep-class h3 { font-size: 1.3rem; }
.stk-keep-class > p { margin-top: 0.3rem; color: var(--stk-ink-soft); font-size: 0.94em; }
.stk-keep-class dl { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.stk-keep-class dt { color: var(--stk-muted); font: 600 0.8rem/1.3 var(--stk-display); letter-spacing: 0.1em; text-transform: uppercase; }
.stk-keep-class dd { color: var(--stk-ink); font: 600 0.98rem/1.35 var(--stk-display); }
.stk-keep-classes + .stk-keep-small { margin-top: 1rem; max-width: 52rem; }

.stk-keep-targets { margin: 1.1rem 0; list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.stk-keep-targets li { display: grid; gap: 0.15rem 1rem; padding: 0.8rem 0.95rem; border-radius: 4px; background: var(--stk-panel-deep); box-shadow: inset 4px 0 0 var(--stk-lime-dim); }
.stk-keep-targets b { font: 600 1.05rem/1.3 var(--stk-display); color: var(--stk-ink); }
.stk-keep-targets span { color: var(--stk-ink-soft); font-size: 0.94em; }
.stk-keep-targets em { font-style: normal; color: var(--stk-ink); }
.stk-keep-targets li.is-met { box-shadow: inset 4px 0 0 var(--stk-moss); }
.stk-keep-targets li.is-open { box-shadow: inset 4px 0 0 var(--stk-ochre-deep); }
.stk-keep-targets li.is-missed, .stk-keep-targets li.is-late { box-shadow: inset 4px 0 0 var(--stk-ochre); }
.stk-keep-targets li.is-missed em, .stk-keep-targets li.is-late em { color: var(--stk-ochre-lift); font-weight: 700; }
.stk-keep-targets li.is-waits em, .stk-keep-targets li.is-off em { color: var(--stk-muted); font-style: italic; }
@media (min-width: 52rem) { .stk-keep-targets li { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; } }

.stk-keep-route li.is-done { color: var(--stk-ink-soft); box-shadow: inset 5px 0 0 var(--stk-moss-deep); }
.stk-keep-route li.is-done b, .stk-keep-route li.is-done::before { color: var(--stk-ink); }
.stk-keep-trail-h { margin-top: 1.6rem; font-size: 1.25rem; }
.stk-keep-trail { margin: 0.7rem 0 1.2rem; list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.stk-keep-trail li { display: grid; gap: 0.1rem 1rem; padding: 0.65rem 0.9rem; border-radius: 4px; background: var(--stk-panel); overflow-wrap: anywhere; }
.stk-keep-trail b { color: var(--stk-ochre-lift); font-family: var(--stk-display); font-weight: 600; }
.stk-keep-when { color: var(--stk-muted); font: 600 0.88rem/1.4 var(--stk-display); }
@media (min-width: 52rem) { .stk-keep-trail li { grid-template-columns: 17rem minmax(0, 1fr); align-items: baseline; } }
.stk-keep-ref { letter-spacing: 0.08em; margin-right: 1rem; }
.stk-keep-status span { color: var(--stk-muted); font-weight: 400; font-style: italic; }
.stk-keep-step--off { background: var(--stk-panel-up) !important; color: var(--stk-ink-soft) !important; }
.stk-keep-ics { margin-top: 1.2rem; display: grid; gap: 0.5rem; justify-items: start; }
.stk-keep-ics .stk-more { margin-top: 0; }
.stk-keep-ics span { color: var(--stk-ink-soft); font-size: 0.93em; max-width: 40rem; }
.stk-keep-desk-forms { margin-top: 1.2rem; display: grid; gap: 2rem; }
@media (min-width: 60rem) { .stk-keep-desk-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; align-items: start; } }

@media (prefers-reduced-motion: no-preference) {
  .stk-letter h1, .stk-shut h1, .stk-entry h1, .stk-mend h1, .stk-rail h1, .stk-tagopen h1 { animation: stk-open-rise 900ms 80ms var(--stk-ease) both; }
}
/* the note under a Contents row stays above 4.5:1 on the hover colour too */
.stk-row:hover .stk-row-note, .stk-row:focus-visible .stk-row-note { color: var(--stk-ink-soft); }
h2 + .stk-keep-pair { margin-top: 1.3rem; }