/* Lana Neill Estates — "Completion day: three households, one chain".
   One Friday in Llanelli, read as a timetable: three households run across the page as lanes,
   the hours are columns. Prefix cmp- (completion). Mobile first; every colour lives in :root. */

@font-face { font-family: "Bellefair"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bf-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Bellefair"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bf-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+A720-A7FF; }
@font-face { font-family: "Afacad"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/af-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Afacad"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/af-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --cmp-bg: #120E18;
  --cmp-panel: #1D1726;
  --cmp-ink: #F1ECF6;
  --cmp-muted: #A49AB4;
  --cmp-accent: #B37EDC;
  --cmp-warm: #E9B98A;

  --cmp-panel-up: color-mix(in srgb, var(--cmp-panel) 84%, var(--cmp-accent));
  --cmp-rim: color-mix(in srgb, var(--cmp-accent) 46%, var(--cmp-panel));
  --cmp-rim-soft: color-mix(in srgb, var(--cmp-accent) 22%, var(--cmp-bg));
  --cmp-lane: color-mix(in srgb, var(--cmp-accent) 34%, transparent);
  --cmp-glow-warm: color-mix(in srgb, var(--cmp-warm) 11%, transparent);
  --cmp-glow-cool: color-mix(in srgb, var(--cmp-accent) 13%, transparent);
  --cmp-sun: color-mix(in srgb, var(--cmp-warm) 42%, transparent);
  --cmp-veil: color-mix(in srgb, var(--cmp-bg) 78%, transparent);
  --cmp-veil-deep: color-mix(in srgb, var(--cmp-bg) 90%, transparent);
  --cmp-veil-mid: color-mix(in srgb, var(--cmp-bg) 62%, transparent);
  --cmp-on-accent: var(--cmp-bg);
  --cmp-fail: color-mix(in srgb, var(--cmp-warm) 70%, #ff7a7a);

  --cmp-display: "Bellefair", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cmp-text: "Afacad", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cmp-gutter: clamp(16px, 4.2vw, 44px);
  --cmp-max: 1240px;
  --cmp-read: 64ch;
  --cmp-x: 0;
}

/* --- reset, written for this site --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
input, select, textarea, button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

html { background: var(--cmp-bg); scroll-padding-top: 24px; }
body {
  min-height: 100vh;
  color: var(--cmp-ink);
  background: var(--cmp-bg);
  font-family: var(--cmp-text);
  font-size: 1.125rem;
  line-height: 1.62;
  font-synthesis: none;
  overflow-x: clip;
}
/* the ground: dusk light, two soft sources, nothing tiled */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 92% 4%, var(--cmp-glow-cool), transparent 70%),
    radial-gradient(60% 45% at 4% 102%, var(--cmp-glow-warm), transparent 72%);
}

h1, h2, h3 { font-family: var(--cmp-display); font-weight: 400; line-height: 1.08; letter-spacing: .055em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 7.4vw, 5.1rem); letter-spacing: .045em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.05rem); }
h3 { font-size: clamp(1.32rem, 2.4vw, 1.62rem); letter-spacing: .07em; line-height: 1.18; }
p, li, dd, dt { text-wrap: pretty; }
strong, b { font-weight: 650; }
:focus-visible { outline: 3px solid var(--cmp-warm); outline-offset: 3px; border-radius: 6px; }

.cmp-wrap { width: min(100%, var(--cmp-max)); margin-inline: auto; padding-inline: var(--cmp-gutter); }
.cmp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cmp-skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 18px; border-radius: 999px;
  background: var(--cmp-warm); color: var(--cmp-on-accent); font-weight: 650; text-decoration: none; }
.cmp-skip:focus { top: 12px; }

.cmp-eyebrow { font: 650 .82rem/1.3 var(--cmp-text); letter-spacing: .16em; text-transform: uppercase; color: var(--cmp-warm); }
.cmp-lede { font-size: clamp(1.15rem, 2.1vw, 1.38rem); line-height: 1.5; max-width: 44ch; }
.cmp-prose { max-width: var(--cmp-read); }
.cmp-prose > * + * { margin-top: 1em; }
.cmp-prose a:not(.cmp-btn), .cmp-inline { color: var(--cmp-warm); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cmp-note { font-size: .95rem; color: var(--cmp-muted); max-width: 60ch; }

/* --- buttons: a link of chain, at rest already a surface --- */
.cmp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cmp-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 3px solid var(--cmp-warm); border-radius: 999px; background: var(--cmp-warm);
  color: var(--cmp-on-accent); font: 650 1rem/1 var(--cmp-text); letter-spacing: .02em; text-decoration: none; cursor: pointer;
}
.cmp-btn svg { width: 18px; height: 18px; flex: none; }
.cmp-btn:hover { background: var(--cmp-ink); border-color: var(--cmp-ink); }
.cmp-btn--quiet { background: var(--cmp-veil-deep); color: var(--cmp-ink); border-color: var(--cmp-rim); }
.cmp-btn--quiet:hover { background: var(--cmp-panel-up); color: var(--cmp-ink); border-color: var(--cmp-warm); }

/* ============ masthead: wordmark, the chain line, the mark straddling it ============ */
.cmp-mast { position: relative; z-index: 6; padding-top: 18px; }
.cmp-mast__top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp-word { display: block; width: min(232px, 64vw); color: var(--cmp-ink); text-decoration: none; padding: 6px 0; }
.cmp-word svg { width: 100%; height: auto; }
.cmp-word .w2 { fill: var(--cmp-accent); }
.cmp-mast__where { font: 600 .74rem/1.2 var(--cmp-text); letter-spacing: .18em; text-transform: uppercase; color: var(--cmp-muted); }
.cmp-mast__rule { position: relative; height: 64px; margin-top: 6px; }
.cmp-mast__rule::before {
  content: ""; position: absolute; left: var(--cmp-gutter); right: var(--cmp-gutter); top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--cmp-rim) 14%, var(--cmp-rim) 86%, transparent);
}
.cmp-mast__mark { position: absolute; left: 50%; top: 50%; width: 112px; height: auto; transform: translate(-50%, -50%);
  padding: 0 14px; background: var(--cmp-bg); box-sizing: content-box; }

/* the pages are links of a chain */
.cmp-chain { margin-top: 2px; padding-bottom: 8px; }
.cmp-chain__links { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 9px; }
.cmp-chain__links > li { position: relative; display: flex; }
.cmp-chain__links > li + li::before {
  content: ""; position: absolute; z-index: 2; left: -15px; top: 50%; width: 21px; height: 11px; margin-top: -5.5px;
  border: 3px solid var(--cmp-rim); border-radius: 8px; background: var(--cmp-bg);
}
.cmp-chain__links > li:nth-child(5)::before { display: none; }
.cmp-chain__links a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 6px 6px;
  border: 3px solid var(--cmp-rim); border-radius: 22px; background: var(--cmp-panel);
  font: 650 .86rem/1.15 var(--cmp-text); letter-spacing: .01em; text-align: center; text-decoration: none; color: var(--cmp-ink);
}
.cmp-chain__links a:hover { border-color: var(--cmp-warm); background: var(--cmp-panel-up); }
.cmp-chain__links a[aria-current="page"] { background: var(--cmp-accent); border-color: var(--cmp-accent); color: var(--cmp-on-accent); }
.cmp-chain__lang { gap: 0; }
.cmp-chain__lang a { min-width: 0; font-size: .82rem; letter-spacing: .12em; }
.cmp-chain__lang a:first-child { border-radius: 22px 0 0 22px; border-right-width: 2px; }
.cmp-chain__lang a:last-child { border-radius: 0 22px 22px 0; border-left-width: 2px; }
.cmp-chain__lang a[aria-current="true"] { background: var(--cmp-warm); border-color: var(--cmp-warm); color: var(--cmp-on-accent); }

@media (min-width: 768px) {
  .cmp-mast__top { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .cmp-word { width: 286px; }
  .cmp-mast__rule { height: 76px; margin-top: 4px; }
  .cmp-mast__mark { width: 132px; }
  .cmp-chain__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 19px; }
  .cmp-chain__links > li + li::before { left: -21px; width: 25px; }
  .cmp-chain__links > li:nth-child(5)::before { display: block; }
  .cmp-chain__links a { min-height: 48px; padding: 0 18px; border-radius: 999px; font-size: .95rem; white-space: nowrap; }
  .cmp-chain__lang a { padding: 0 15px; }
  .cmp-chain__lang a:first-child { border-radius: 999px 0 0 999px; }
  .cmp-chain__lang a:last-child { border-radius: 0 999px 999px 0; }
}
@media (min-width: 1100px) {
  .cmp-mast__mark { left: 50%; }
  .cmp-chain__links { justify-content: center; }
}

/* ============ the opener: dusk over the street, type in the sky ============ */
.cmp-dusk { position: relative; isolation: isolate; min-height: min(118vw, 760px); display: grid; align-items: start; }
.cmp-dusk__art { position: absolute; inset: 0; z-index: -1; overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 70%, transparent 100%); }
.cmp-dusk__art img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.cmp-dusk__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cmp-veil) 0%, transparent 26%, transparent 34%, var(--cmp-veil) 52%, var(--cmp-veil-deep) 70%); }
.cmp-dusk__copy { padding-top: clamp(28px, 8vw, 92px); padding-bottom: 40px; }
.cmp-dusk__copy h1 { max-width: 9.4em; font-size: clamp(2.2rem, 7vw, 4.25rem); text-shadow: 0 2px 22px var(--cmp-bg); }
.cmp-dusk__copy .cmp-lede { margin-top: 18px; text-shadow: 0 1px 14px var(--cmp-bg); }
.cmp-dusk__note { margin-top: 18px; font-size: .9rem; color: var(--cmp-ink); max-width: 40ch; text-shadow: 0 1px 10px var(--cmp-bg); }
@media (min-width: 768px) {
  .cmp-dusk { min-height: min(68vw, 820px); }
  .cmp-dusk__copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: clamp(40px, 5vw, 70px); }
  .cmp-dusk__copy h1 { max-width: 9.4em; }
  .cmp-dusk__copy .cmp-lede, .cmp-dusk__note { max-width: 36ch; }
  .cmp-dusk__copy .cmp-actions { justify-content: flex-end; }
  .cmp-dusk__art { -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 9%, black 74%, transparent 100%), linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, black 9%, black 74%, transparent 100%), linear-gradient(to right, transparent 0, black 7%, black 93%, transparent 100%); mask-composite: intersect; }
  .cmp-dusk__art img { object-position: 50% 55%; }
  .cmp-dusk__art::after { background: linear-gradient(270deg, var(--cmp-veil-deep) 0%, var(--cmp-veil) 30%, transparent 56%), linear-gradient(200deg, var(--cmp-veil) 0%, transparent 40%); }
}

/* ============ sub-page openers: feathered picture, title over its quiet part ============ */
.cmp-head { position: relative; isolation: isolate; min-height: 430px; display: grid; align-items: end; }
.cmp-head__art { position: absolute; inset: 0; z-index: -1; overflow: clip;
  -webkit-mask-image: radial-gradient(130% 92% at 50% 30%, black 52%, transparent 100%);
          mask-image: radial-gradient(130% 92% at 50% 30%, black 52%, transparent 100%); }
.cmp-head__art img { width: 100%; height: 100%; object-fit: cover; }
.cmp-head__art::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 26%, var(--cmp-veil) 52%, transparent 80%); }
.cmp-head__wash { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--cmp-sun), transparent); mix-blend-mode: soft-light; transform: translateX(-40%); }
.cmp-head__copy { padding-top: 120px; padding-bottom: 34px; }
.cmp-head__copy h1 { font-size: clamp(2.05rem, 6.2vw, 4.2rem); max-width: 11em; text-shadow: 0 2px 18px var(--cmp-bg); }
.cmp-head__copy .cmp-lede { margin-top: 14px; text-shadow: 0 1px 12px var(--cmp-bg); }
.cmp-head--chain .cmp-head__art img { object-position: 22% 50%; }
.cmp-head--tape .cmp-head__art img { object-position: 40% 4%; }
.cmp-head--van .cmp-head__art img { object-position: 30% 60%; }
.cmp-head--harbour .cmp-head__art img { object-position: 52% 18%; }
.cmp-head--hall .cmp-head__art img { object-position: 50% 55%; }
@media (min-width: 900px) {
  .cmp-head { min-height: 540px; align-items: center; }
  .cmp-head__copy { padding-top: 60px; padding-bottom: 60px; }
  .cmp-head--chain .cmp-head__copy, .cmp-head--harbour .cmp-head__copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .cmp-head--chain .cmp-head__art::before { background: linear-gradient(270deg, var(--cmp-veil) 0%, transparent 62%); }
  .cmp-head--harbour .cmp-head__copy { align-items: flex-start; text-align: left; justify-content: flex-start; align-self: start; }
  .cmp-head--harbour .cmp-head__art::before { background: linear-gradient(180deg, var(--cmp-veil) 0%, transparent 46%); }
  .cmp-head--tape .cmp-head__copy, .cmp-head--van .cmp-head__copy, .cmp-head--hall .cmp-head__copy { align-self: start; }
  .cmp-head--tape .cmp-head__art::before { background: linear-gradient(180deg, var(--cmp-veil-deep) 0%, var(--cmp-veil) 30%, transparent 64%); }
  .cmp-head--hall .cmp-head__art::before { background: linear-gradient(180deg, var(--cmp-veil) 0%, transparent 52%); }
  .cmp-head--van .cmp-head__art::before { background: linear-gradient(90deg, var(--cmp-veil) 0%, transparent 58%); }
}

/* ============ sections ============ */
.cmp-band { padding-block: clamp(56px, 9vw, 112px); }
.cmp-band > .cmp-wrap > h2, .cmp-band__h { margin-bottom: 22px; }
.cmp-kicker { display: block; margin-bottom: 12px; }

/* who is in the chain — split, the three households on lanes */
.cmp-cast__grid { display: grid; gap: 34px; }
.cmp-cast__list { list-style: none; display: grid; gap: 14px; }
.cmp-cast__list li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start;
  padding: 18px 18px 18px 14px; border-radius: 18px; background: var(--cmp-panel); }
.cmp-cast__list li::after { content: ""; position: absolute; left: 86px; right: 18px; top: 0; height: 3px; border-radius: 3px; background: var(--cmp-lane); }
.cmp-cast__list svg { width: 58px; height: 46px; color: var(--cmp-accent); }
.cmp-cast__list b { display: block; font-size: 1.05rem; color: var(--cmp-warm); }
@media (min-width: 900px) { .cmp-cast__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } }

/* ============ the day: lanes figure + hours ============ */
.cmp-day { position: relative; padding-top: clamp(40px, 7vw, 90px); }
.cmp-day__head { margin-bottom: 26px; }
.cmp-lanes { position: relative; z-index: 4; margin: 0 auto; padding: 10px var(--cmp-gutter) 14px; width: min(100%, var(--cmp-max)); }
.cmp-lanes svg { width: 100%; height: auto; overflow: visible; }
.cmp-lanes__wide { display: none; }
.cmp-lanes__cap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 8px; font-size: .9rem; color: var(--cmp-muted); }
.cmp-lanes__now { font: 400 1.6rem/1 var(--cmp-display); color: var(--cmp-warm); letter-spacing: .06em; }
@media (min-width: 820px) { .cmp-lanes__wide { display: block; } .cmp-lanes__narrow { display: none; } }

/* drawing inside the lanes figure */
.cmp-lanes .ax { fill: var(--cmp-muted); font: 600 15px var(--cmp-text); letter-spacing: .06em; }
.cmp-lanes__narrow .ax { font-size: 21px; }
.cmp-lanes .tick { stroke: var(--cmp-rim-soft); stroke-width: 1; }
.cmp-lanes .lane { stroke: var(--cmp-lane); stroke-width: 3; stroke-linecap: round; }
.cmp-lanes .house { fill: var(--cmp-panel); stroke: var(--cmp-accent); stroke-width: 2.4; stroke-linejoin: round; }
.cmp-lanes .roof { fill: var(--cmp-panel-up); stroke: var(--cmp-accent); stroke-width: 2.4; stroke-linejoin: round; }
.cmp-lanes .door { fill: var(--cmp-bg); stroke: var(--cmp-accent); stroke-width: 2; }
.cmp-lanes .win { fill: var(--cmp-bg); stroke: var(--cmp-rim); stroke-width: 1.6; }
.cmp-lanes .lit { fill: var(--cmp-warm); opacity: 1; }
.cmp-lanes .who { fill: var(--cmp-ink); font: 650 16px var(--cmp-text); }
.cmp-lanes .who2 { fill: var(--cmp-muted); font: 500 14px var(--cmp-text); }
.cmp-lanes .ev { fill: var(--cmp-warm); stroke: var(--cmp-bg); stroke-width: 2; opacity: 1; }
.cmp-lanes .link { fill: none; stroke: var(--cmp-warm); stroke-width: 5; opacity: 1; transform-box: fill-box; transform-origin: 50% 50%; }
.cmp-lanes .cursor { stroke: var(--cmp-warm); stroke-width: 2; opacity: 0; }
.cmp-lanes .sun { opacity: 0; }
.cmp-lanes .sunstop { stop-color: var(--cmp-warm); }

/* the hours, each sitting where the three lanes cross it */
.cmp-hours { display: grid; gap: clamp(64px, 9vw, 120px); padding-top: 28px; padding-bottom: clamp(60px, 9vw, 110px); }
.cmp-hour { scroll-margin-top: 260px; }
.cmp-hour__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 14px; }
.cmp-hour__clock { position: relative; font: 400 clamp(2.6rem, 8vw, 4.6rem)/1 var(--cmp-display); letter-spacing: .04em; color: var(--cmp-warm); }
.cmp-hour__head h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
.cmp-hour__body { max-width: var(--cmp-read); }
.cmp-hour__body > * + * { margin-top: .9em; }
.cmp-hour__we { padding: 14px 18px; border-radius: 16px; background: var(--cmp-panel); }
.cmp-hour__we b { color: var(--cmp-accent); margin-right: 6px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }

.cmp-cross { list-style: none; margin-top: 26px; display: grid; gap: 4px; }
.cmp-cross > li { position: relative; padding-top: 14px; }
.cmp-cross > li::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; border-radius: 3px; background: var(--cmp-lane); }
.cmp-cross__cell { position: relative; display: block; max-width: 100%; padding: 10px 14px 12px; border-radius: 14px; background: var(--cmp-panel); font-size: 1rem; line-height: 1.45; }
.cmp-cross__cell::before { content: ""; position: absolute; left: 14px; top: -16px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--cmp-warm); box-shadow: 0 0 0 3px var(--cmp-bg); }
.cmp-cross__who { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-accent); }
.cmp-hour--a { --cmp-x: .02; } .cmp-hour--b { --cmp-x: .14; } .cmp-hour--c { --cmp-x: .36; }
.cmp-hour--d { --cmp-x: .42; } .cmp-hour--e { --cmp-x: .62; } .cmp-hour--f { --cmp-x: .96; }
@media (min-width: 768px) {
  .cmp-cross__cell { width: min(25rem, 100%); margin-left: calc(var(--cmp-x) * (100% - min(25rem, 100%))); }
}

/* art inside the day: feathered, type set on its quiet part */
.cmp-glimpse { position: relative; isolation: isolate; margin-top: 30px; min-height: 340px; display: grid; align-items: center; }
.cmp-glimpse__art { position: absolute; inset: 0; z-index: -1; overflow: clip; border-radius: 0;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, black 48%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 50%, black 48%, transparent 100%); }
.cmp-glimpse__art img { width: 100%; height: 100%; object-fit: cover; }
.cmp-glimpse__say { position: relative; max-width: 12.5em; padding: 22px; font: 400 clamp(1.5rem, 3.4vw, 2.3rem)/1.15 var(--cmp-display);
  letter-spacing: .05em; text-transform: uppercase; color: var(--cmp-ink); }
.cmp-glimpse__say small { display: block; margin-bottom: 8px; font: 650 .8rem/1.2 var(--cmp-text); letter-spacing: .16em; color: var(--cmp-warm); }
.cmp-glimpse--van .cmp-glimpse__art img { object-position: 22% 50%; }
.cmp-glimpse--van .cmp-glimpse__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cmp-veil) 0%, transparent 52%); }
.cmp-glimpse--keys .cmp-glimpse__art img { object-position: 30% 50%; }
.cmp-glimpse--keys .cmp-glimpse__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cmp-veil) 0%, transparent 46%); }
@media (min-width: 768px) {
  .cmp-glimpse { min-height: 470px; }
  .cmp-glimpse__say { margin-left: 4%; }
  .cmp-glimpse--van .cmp-glimpse__say { margin-left: 6%; margin-top: -40px; }
  .cmp-glimpse--van .cmp-glimpse__art img { object-position: 40% 55%; }
}

/* ============ the weeks before, strung as links ============ */
.cmp-weeks__links { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 26px 0 30px; }
.cmp-weeks__links li { position: relative; padding: 9px 16px; border-radius: 999px; background: var(--cmp-panel); border: 3px solid var(--cmp-rim-soft);
  font-size: .98rem; font-weight: 600; }
.cmp-weeks__links li + li::before { content: ""; position: absolute; left: -15px; top: 50%; width: 15px; height: 3px; margin-top: -1.5px; background: var(--cmp-rim); }
.cmp-weeks__links li:last-child { background: var(--cmp-warm); border-color: var(--cmp-warm); color: var(--cmp-on-accent); }

/* ============ a sentence that is also a duty ============ */
.cmp-pull { position: relative; padding: clamp(26px, 5vw, 54px); border-radius: 28px; background: var(--cmp-panel); }
.cmp-pull blockquote p { font: 400 clamp(1.8rem, 4.6vw, 3.3rem)/1.12 var(--cmp-display); letter-spacing: .04em; text-transform: uppercase; max-width: 13em; }
.cmp-pull blockquote p em { font-style: normal; color: var(--cmp-warm); }
.cmp-pull__grid { display: grid; gap: 20px; margin-top: 28px; }
.cmp-pull__grid p { max-width: 46ch; }
.cmp-pull__grid b { display: block; color: var(--cmp-accent); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
@media (min-width: 900px) { .cmp-pull__grid { grid-template-columns: repeat(3, 1fr); gap: 34px; } }

/* ============ closing: the first visit, and the mark at its real size ============ */
.cmp-close { display: grid; gap: 30px; align-items: center; }
.cmp-close__mark { width: min(360px, 78vw); justify-self: center; }
@media (min-width: 900px) { .cmp-close { grid-template-columns: 1.2fr .8fr; gap: 60px; } }

/* ============ tools ============ */
.cmp-tool { margin-top: 30px; padding: clamp(18px, 3.6vw, 34px); border-radius: 26px; background: var(--cmp-panel); }
.cmp-tool h3 { margin-bottom: 8px; }
.cmp-tool__row { display: grid; gap: 14px; margin-top: 18px; }
.cmp-field { display: grid; gap: 6px; }
.cmp-field > span, .cmp-legend { font-size: .82rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--cmp-muted); }
.cmp-input, .cmp-select, .cmp-area {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 3px solid var(--cmp-rim); border-radius: 14px;
  background: var(--cmp-bg); color: var(--cmp-ink); font-size: 1.05rem;
}
.cmp-area { min-height: 130px; resize: vertical; line-height: 1.45; }
.cmp-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--cmp-warm) 50%), linear-gradient(135deg, var(--cmp-warm) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.cmp-input:hover, .cmp-select:hover, .cmp-area:hover { border-color: var(--cmp-accent); }
.cmp-input:focus-visible, .cmp-select:focus-visible, .cmp-area:focus-visible { outline: 3px solid var(--cmp-warm); outline-offset: 2px; border-color: var(--cmp-warm); }
.cmp-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
.cmp-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cmp-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cmp-seg label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px;
  border: 3px solid var(--cmp-rim); border-radius: 999px; background: var(--cmp-bg); cursor: pointer; font-weight: 600; font-size: .98rem; }
.cmp-seg input { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 3px solid var(--cmp-rim); border-radius: 50%; background: var(--cmp-panel); }
.cmp-seg input:checked { background: var(--cmp-warm); border-color: var(--cmp-warm); box-shadow: inset 0 0 0 3px var(--cmp-bg); }
.cmp-seg label:has(input:checked) { border-color: var(--cmp-warm); background: var(--cmp-panel-up); }
.cmp-seg label:has(input:focus-visible) { outline: 3px solid var(--cmp-warm); outline-offset: 3px; }
.cmp-check { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.cmp-check input { appearance: none; width: 26px; height: 26px; margin: 2px 0 0; flex: none; border: 3px solid var(--cmp-rim); border-radius: 8px; background: var(--cmp-bg); cursor: pointer; }
.cmp-check input:checked { background: var(--cmp-warm) linear-gradient(135deg, transparent 44%, var(--cmp-bg) 44%, var(--cmp-bg) 56%, transparent 56%); border-color: var(--cmp-warm); }
.cmp-check input:focus-visible { outline: 3px solid var(--cmp-warm); outline-offset: 2px; }
.cmp-tool__out { margin-top: 22px; }
.cmp-tool__sum { font-weight: 600; color: var(--cmp-warm); min-height: 1.6em; }
.cmp-convention { margin-top: 16px; font-size: .95rem; color: var(--cmp-muted); }
@media (min-width: 768px) { .cmp-tool__row--two { grid-template-columns: 1fr 1fr; } .cmp-tool__row--three { grid-template-columns: 1.2fr 1fr auto; align-items: end; } }

/* the back-planner's dated steps: one lane, walked backwards */
.cmp-plan { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.cmp-plan li { display: grid; grid-template-columns: 7.2rem 1fr; gap: 4px 14px; padding: 12px 14px; border-radius: 14px; background: var(--cmp-bg); align-items: baseline; }
.cmp-plan time { font: 400 1.22rem/1.1 var(--cmp-display); letter-spacing: .04em; color: var(--cmp-warm); }
.cmp-plan .cmp-plan__rel { grid-column: 2; font-size: .88rem; color: var(--cmp-muted); }
.cmp-plan li.is-past { opacity: .62; }
.cmp-plan li.is-past time { color: var(--cmp-muted); }
.cmp-plan li.is-day { background: var(--cmp-accent); color: var(--cmp-on-accent); }
.cmp-plan li.is-day time, .cmp-plan li.is-day .cmp-plan__rel { color: var(--cmp-on-accent); }
.cmp-plan__more { margin-top: 14px; }
.cmp-static { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.cmp-static li { padding: 10px 14px; border-radius: 12px; background: var(--cmp-bg); }
.cmp-static b { color: var(--cmp-warm); margin-right: 6px; }

/* floor area: rooms as rows, totals underneath */
.cmp-rooms { display: grid; gap: 12px; margin-top: 16px; }
.cmp-room { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--cmp-bg); }
.cmp-room__dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-room__imp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmp-room__part { padding-top: 8px; }
.cmp-room__res { font-weight: 600; color: var(--cmp-warm); }
.cmp-room__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-mini-btn { min-height: 44px; padding: 0 14px; border: 3px solid var(--cmp-rim); border-radius: 999px; background: var(--cmp-panel); color: var(--cmp-ink); font-weight: 600; font-size: .92rem; cursor: pointer; }
.cmp-mini-btn:hover { border-color: var(--cmp-warm); }
.cmp-total { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--cmp-bg); }
.cmp-total strong { font: 400 2rem/1 var(--cmp-display); color: var(--cmp-warm); letter-spacing: .03em; }
@media (min-width: 768px) {
  .cmp-room { grid-template-columns: 1.1fr 2fr auto; align-items: end; }
  .cmp-room__part { grid-column: 1 / -1; }
}

/* ============ tables of plain facts ============ */
.cmp-facts { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.cmp-facts th, .cmp-facts td { text-align: left; vertical-align: top; padding: 12px 14px; background: var(--cmp-panel); }
.cmp-facts th { width: 34%; font-size: .86rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--cmp-accent); border-radius: 12px 0 0 12px; }
.cmp-facts td { border-radius: 0 12px 12px 0; }
@media (max-width: 600px) {
  .cmp-facts, .cmp-facts tbody, .cmp-facts tr, .cmp-facts th, .cmp-facts td { display: block; width: auto; }
  .cmp-facts th { border-radius: 12px 12px 0 0; padding-bottom: 2px; }
  .cmp-facts td { border-radius: 0 0 12px 12px; padding-top: 4px; }
}

/* stage blocks on the sale page */
.cmp-stages { display: grid; gap: 18px; margin-top: 28px; }
.cmp-stage { padding: 22px; border-radius: 22px; background: var(--cmp-panel); }
.cmp-stage h3 { margin-bottom: 10px; }
.cmp-stage dl { display: grid; gap: 10px; margin-top: 12px; }
.cmp-stage dt { font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-accent); }
.cmp-stage dd { margin-top: 2px; }
@media (min-width: 860px) { .cmp-stages--two { grid-template-columns: 1fr 1fr; } }
.cmp-run { list-style: none; display: grid; gap: 0; margin-top: 26px; }
.cmp-run > li { position: relative; padding: 0 0 26px 40px; }
.cmp-run > li::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: -4px; width: 3px; background: var(--cmp-lane); }
.cmp-run > li:last-child::before { display: none; }
.cmp-run > li::after { content: ""; position: absolute; left: 0; top: 4px; width: 21px; height: 13px; border: 3px solid var(--cmp-warm); border-radius: 8px; background: var(--cmp-bg); }
.cmp-run h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-bottom: 6px; }
.cmp-split { display: grid; gap: 28px; }
@media (min-width: 900px) { .cmp-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .cmp-split--wide-left { grid-template-columns: 1.3fr .7fr; } }
.cmp-aside { padding: 22px; border-radius: 22px; background: var(--cmp-panel-up); }
.cmp-aside h3 { margin-bottom: 10px; }
.cmp-tick { list-style: none; display: grid; gap: 10px; }
.cmp-tick li { position: relative; padding-left: 28px; }
.cmp-tick li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 13px; height: 8px; border: 3px solid var(--cmp-warm); border-radius: 6px; }
.cmp-districts { display: grid; gap: 10px; margin-top: 18px; }
.cmp-districts div { display: grid; grid-template-columns: 4.4rem 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cmp-panel); }
.cmp-districts dt { font: 400 1.35rem/1.1 var(--cmp-display); color: var(--cmp-warm); letter-spacing: .05em; }
.cmp-districts dd { margin: 0; }

/* ============ the first-visit form ============ */
.cmp-form { margin-top: 26px; padding: clamp(18px, 3.6vw, 34px); border-radius: 26px; background: var(--cmp-panel); display: grid; gap: 18px; }
.cmp-form__row { display: grid; gap: 14px; }
@media (min-width: 768px) { .cmp-form__row { grid-template-columns: 1fr 1fr; } }
.cmp-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cmp-form__say { min-height: 1.5em; font-weight: 600; }
.cmp-form__say.is-ok { padding: 16px 18px; border-radius: 16px; background: var(--cmp-accent); color: var(--cmp-on-accent); }
.cmp-form__say.is-bad { color: var(--cmp-fail); }
.cmp-req { color: var(--cmp-warm); }

/* ============ footer: the registered details, the mark at its real size ============ */
.cmp-foot { margin-top: clamp(40px, 7vw, 80px); padding-block: 46px 40px; background: var(--cmp-panel); }
.cmp-foot__grid { display: grid; gap: 30px; }
.cmp-foot__brand { display: grid; gap: 18px; justify-items: start; }
.cmp-foot__brand img { width: min(320px, 72vw); }
.cmp-foot__brand .cmp-word { width: min(260px, 70vw); }
.cmp-reg { display: grid; gap: 6px; font-size: .98rem; }
.cmp-reg dt { font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-muted); }
.cmp-reg dd { margin: 0 0 8px; }
.cmp-reg a { color: var(--cmp-warm); }
.cmp-foot__small { margin-top: 24px; font-size: .9rem; color: var(--cmp-muted); }
.cmp-foot__small a { color: var(--cmp-ink); }
@media (min-width: 900px) { .cmp-foot__grid { grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; } .cmp-reg { grid-template-columns: 1fr 1fr; column-gap: 34px; } }

/* 404 */
.cmp-lost { min-height: 52vh; display: grid; align-content: center; gap: 18px; padding-block: 60px; }

/* ============ the day, live: starts at dawn and is lit by scrolling ============ */
.cmp-live .cmp-lanes { position: sticky; top: 0; padding-bottom: 20px; background: linear-gradient(180deg, var(--cmp-bg) calc(100% - 14px), transparent); }
@media (max-width: 819px) { .cmp-live .cmp-lanes__help { display: none; } }
.cmp-live .cmp-lanes .lit, .cmp-live .cmp-lanes .ev, .cmp-live .cmp-lanes .link { opacity: 0; }
.cmp-live .cmp-lanes .lit.is-on, .cmp-live .cmp-lanes .ev.is-on { opacity: 1; }
.cmp-live .cmp-lanes .link.is-on { opacity: 1; }
.cmp-live .cmp-lanes .cursor { opacity: .9; }
.cmp-live .cmp-lanes .sun { opacity: 1; }
.cmp-live .cmp-hour__clock::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 3px;
  background: var(--cmp-warm); transform: scaleX(0); transform-origin: 0 50%; }
.cmp-live .cmp-hour.is-now .cmp-hour__clock::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .cmp-dusk__copy > * { animation: cmp-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .cmp-dusk__copy > :nth-child(2) { animation-delay: .12s; }
  .cmp-dusk__copy > :nth-child(3) { animation-delay: .24s; }
  .cmp-dusk__copy > :nth-child(n+4) { animation-delay: .36s; }
  .cmp-head__copy > * { animation: cmp-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .cmp-head__copy > :nth-child(2) { animation-delay: .1s; }
  .cmp-head__copy > :nth-child(3) { animation-delay: .2s; }
  .cmp-chain__links > li { animation: cmp-settle .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .cmp-chain__links > li:nth-child(2) { animation-delay: .05s; } .cmp-chain__links > li:nth-child(3) { animation-delay: .1s; }
  .cmp-chain__links > li:nth-child(4) { animation-delay: .15s; } .cmp-chain__links > li:nth-child(5) { animation-delay: .2s; }
  .cmp-chain__links > li:nth-child(6) { animation-delay: .25s; } .cmp-chain__links > li:nth-child(7) { animation-delay: .3s; }
  .cmp-chain__links a, .cmp-btn, .cmp-mini-btn, .cmp-seg label { transition: transform .22s ease, opacity .22s ease; }
  .cmp-chain__links a:hover, .cmp-btn:hover, .cmp-mini-btn:hover { transform: translateY(-2px); }
  .cmp-chain__links a:active, .cmp-btn:active { transform: translateY(1px) scale(.98); }
  .cmp-seg label:hover { transform: translateY(-1px); }
  .cmp-live .cmp-lanes .lit, .cmp-live .cmp-lanes .ev { transition: opacity .55s ease; }
  .cmp-live .cmp-lanes .link.is-on { animation: cmp-click .32s cubic-bezier(.3, 1.8, .45, 1) both; }
  .cmp-live .cmp-lanes .sun, .cmp-live .cmp-lanes .cursor { transition: opacity .4s ease; }
  .cmp-live .cmp-hour__clock::after { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .cmp-head__wash { will-change: transform; }
  .cmp-plan li, .cmp-room__res, .cmp-total { animation: cmp-fade .45s ease both; }
  .cmp-glimpse__art img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
  .cmp-glimpse:hover .cmp-glimpse__art img { transform: scale(1.03); }
}
@keyframes cmp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cmp-settle { 0% { opacity: 0; transform: translateY(-10px) rotate(-4deg); } 70% { opacity: 1; transform: translateY(2px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes cmp-click { 0% { opacity: 0; transform: translateY(-16px) scale(1.25) rotate(-12deg); } 60% { opacity: 1; transform: translateY(2px) scale(.94) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes cmp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cmp-head__wash { display: none; }
}

/* small house drawings beside each household */
.cmp-ico .house { fill: var(--cmp-panel-up); stroke: var(--cmp-accent); stroke-width: 4; stroke-linejoin: round; }
.cmp-ico .roof { fill: var(--cmp-panel); stroke: var(--cmp-accent); stroke-width: 4; stroke-linejoin: round; }
.cmp-ico .door { fill: var(--cmp-bg); stroke: var(--cmp-accent); stroke-width: 3; }
.cmp-ico .win { fill: var(--cmp-bg); stroke: var(--cmp-rim); stroke-width: 3; }
.cmp-ico .lit { fill: var(--cmp-warm); }

/* metric and imperial inputs share a row; the form says which is showing */
.cmp-room__side { display: grid; gap: 6px; align-content: start; }
[data-units="m"] .cmp-imp, [data-units="ft"] .cmp-met { display: none; }
.cmp-room__part { display: grid; gap: 8px; }
.cmp-room__part[hidden] { display: none; }

/* what goes in the first-night box: a row of things, not a list of rules */
.cmp-box { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.cmp-box li { padding: 12px 18px; border-radius: 14px; background: var(--cmp-panel); border-bottom: 4px solid var(--cmp-warm); font-weight: 600; }
.cmp-pull--small { padding: 24px; }
.cmp-pull--small h3 { margin-bottom: 8px; }
.cmp-pull--small p { max-width: 70ch; }

/* the town in four figures */
.cmp-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 30px; }
.cmp-figures div { padding: 18px; border-radius: 18px; background: var(--cmp-panel); }
.cmp-figures dt { font: 400 clamp(1.9rem, 5vw, 2.8rem)/1 var(--cmp-display); color: var(--cmp-warm); letter-spacing: .03em; }
.cmp-figures dd { margin: 8px 0 0; font-size: .98rem; color: var(--cmp-muted); }
@media (min-width: 900px) { .cmp-figures { grid-template-columns: repeat(4, 1fr); } .cmp-stages--three { grid-template-columns: repeat(3, 1fr); } }

/* two more openers: the dusk street (sky upper right) and the hallway (dark wall upper right) */
.cmp-head--street .cmp-head__art img { object-position: 62% 40%; }
@media (min-width: 900px) {
  .cmp-head--street .cmp-head__copy, .cmp-head--hall .cmp-head__copy { align-self: start; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .cmp-head--street .cmp-head__art::before, .cmp-head--hall .cmp-head__art::before { background: linear-gradient(250deg, var(--cmp-veil) 0%, transparent 55%); }
  .cmp-head--hall .cmp-head__art img { object-position: 50% 40%; }
}

/* ---- measured scrims (contrast.cjs): a dark pool centred on each opener's copy, full strength
   across the whole text box, so the rest of the picture keeps its light ---- */
.cmp-head__art::before { background: linear-gradient(0deg, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 60%, var(--cmp-veil) 78%, transparent 97%); }
.cmp-head__copy { padding-top: 190px; }
@media (min-width: 900px) {
  .cmp-head__copy { padding-top: 60px; }
  .cmp-head--chain .cmp-head__art::before { background: radial-gradient(70% 95% at 84% 50%, var(--cmp-veil-deep) 0%, var(--cmp-veil) 46%, transparent 76%); }
  .cmp-head--tape .cmp-head__art::before { background: radial-gradient(82% 100% at 18% 20%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 30%, var(--cmp-veil) 56%, transparent 84%); }
  .cmp-head--tape .cmp-head__copy .cmp-lede { max-width: 36ch; }
  .cmp-head--harbour .cmp-head__art::before { background: radial-gradient(72% 100% at 20% 26%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 36%, var(--cmp-veil) 60%, transparent 84%); }
  .cmp-head--street .cmp-head__art::before { background: radial-gradient(70% 90% at 80% 24%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 24%, var(--cmp-veil) 50%, transparent 80%); }
  .cmp-head--hall .cmp-head__art::before { background: radial-gradient(70% 95% at 82% 26%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 34%, var(--cmp-veil) 58%, transparent 84%); }
  .cmp-head--hall .cmp-head__copy h1 { max-width: 9.2em; }
}
/* the day's two pictures: the line sits on its own translucent plate */
.cmp-glimpse__say { border-radius: 20px; background: linear-gradient(100deg, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 60%, var(--cmp-veil) 100%); margin: 18px; }

/* ============ openers below 900px: the title on the picture's quiet top, the subject in its own clear
   row, the lede beneath on the page ground. (Copy set over a bottom scrim covered every subject:
   these renders keep sky and wall above, terrace, lighthouse, tape and door below.) ============ */
.cmp-head__art picture { display: block; width: 100%; height: 100%; }
@media (max-width: 899px) {
  .cmp-head {
    --cmp-head-subject: clamp(230px, 64vw, 330px);
    min-height: 0; align-items: start;
    grid-template-columns: var(--cmp-gutter) minmax(0, 1fr) var(--cmp-gutter);
    grid-template-rows: auto auto var(--cmp-head-subject) auto;
  }
  .cmp-head__copy { display: contents; }
  .cmp-head__copy > * { grid-column: 2; }
  .cmp-head__copy .cmp-eyebrow { grid-row: 1; padding-top: 26px; }
  .cmp-head__copy h1 { grid-row: 2; margin-top: 8px; }
  .cmp-head__copy .cmp-lede { grid-row: 4; margin-top: 2px; padding-bottom: 10px; max-width: 40ch; text-shadow: none; }
  .cmp-head__art { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 1 / 4; align-self: stretch;
    -webkit-mask-image: linear-gradient(to bottom, black 0, black 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0, black 84%, transparent 100%); }
  .cmp-head__art picture { position: absolute; inset: 0; }
  .cmp-head .cmp-head__art::before { background: none; }
  .cmp-head .cmp-head__art img { object-position: 50% 100%; }
  /* the scrim tracks the title rows exactly, however long the language makes them */
  .cmp-head::after { content: ""; position: relative; z-index: -1; pointer-events: none;
    grid-column: 1 / -1; grid-row: 1 / 3; align-self: stretch; margin-bottom: -56px;
    background: linear-gradient(180deg, var(--cmp-veil) 0%, var(--cmp-veil-mid) calc(100% - 56px), transparent 100%); }
  .cmp-head--chain::after, .cmp-head--hall::after { background: linear-gradient(180deg, var(--cmp-veil-deep) 0%, var(--cmp-veil) calc(100% - 56px), transparent 100%); }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* tablets get the landscape render: its whole height shows, so choose the slice and keep the
     desktop's side for the title (the quiet part of these three pictures is on the right) */
  .cmp-head--street .cmp-head__art img, .cmp-head--harbour .cmp-head__art img { object-position: 50% 50%; }
  .cmp-head--tape .cmp-head__art img { object-position: 18% 50%; }
  .cmp-head--hall .cmp-head__art img { object-position: 40% 50%; }
  .cmp-head--chain .cmp-head__art img { object-position: 0% 50%; }
  .cmp-head--chain .cmp-head__copy > *, .cmp-head--street .cmp-head__copy > *, .cmp-head--hall .cmp-head__copy > * { justify-self: end; text-align: right; }
}

@media (min-width: 1400px) {
  /* wide screens scale the render by width and cut its bottom: lower the slice so the tape shows */
  .cmp-head--tape .cmp-head__art img { object-position: 40% 50%; }
}

/* ============ the mover's account ============ */
.cmp-mover + .cmp-mover { padding-top: 0; }
.cmp-mover__intro { display: grid; gap: 30px; }
@media (min-width: 900px) { .cmp-mover__intro { grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: start; } }
.cmp-mover__top { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.cmp-mover__out { display: flex; flex-wrap: wrap; gap: 10px; }
.cmp-mover__h3 { font-size: clamp(1.32rem, 2.4vw, 1.62rem); margin-bottom: 12px; }
.cmp-mover__form { display: grid; gap: 16px; align-content: start; }
.cmp-mover__sum { font-size: 1.05rem; margin-bottom: 6px; }
.cmp-mover__sum b { color: var(--cmp-warm); font-weight: 600; }
.cmp-mover__ours { margin-top: 30px; }
.cmp-mover__ours h3 { margin-bottom: 8px; }
.cmp-mover__close { border: 3px solid var(--cmp-fail); }
.cmp-mover__jump { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cmp-mover__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 3px solid var(--cmp-rim); border-radius: 999px;
  background: var(--cmp-panel); font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--cmp-ink); }
.cmp-mover__jump a:hover { border-color: var(--cmp-warm); }
.cmp-mover code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--cmp-panel); }

/* one-line outcomes of an action, said in place */
.cmp-flash { margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; border-left: 5px solid var(--cmp-accent); background: var(--cmp-panel-up); font-weight: 600; max-width: 70ch; }
.cmp-flash--bad { border-left-color: var(--cmp-fail); }
.cmp-btn--stop { background: var(--cmp-fail); border-color: var(--cmp-fail); color: var(--cmp-on-accent); }
.cmp-btn--stop:hover { background: var(--cmp-ink); border-color: var(--cmp-ink); }

/* the chain tracker: each stage a link; a ticked one closes */
.cmp-track { display: grid; gap: 18px; margin-top: 18px; }
.cmp-track__set { padding: 18px; border-radius: 22px; background: var(--cmp-panel); }
.cmp-track__legend { float: left; width: 100%; font: 400 clamp(1.25rem, 2.2vw, 1.45rem)/1.2 var(--cmp-display); letter-spacing: .07em; text-transform: uppercase; padding: 0 0 6px; }
/* phones: the stages hang as one chain, joined top to bottom; wider: a grid of links, no joins to break across rows */
.cmp-track__links { clear: both; list-style: none; display: grid; gap: 12px; margin-top: 10px; }
.cmp-track__links li { position: relative; }
.cmp-track__links li + li::before { content: ""; position: absolute; left: 21px; top: -12px; width: 3px; height: 12px; background: var(--cmp-rim); }
.cmp-track__links li:has(input:checked) + li:has(input:checked)::before { background: var(--cmp-warm); }
@media (min-width: 700px) {
  .cmp-track__links { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .cmp-track__links li + li::before { display: none; }
}
.cmp-track__links label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 50px; padding: 6px 16px 6px 10px;
  border: 3px solid var(--cmp-rim); border-radius: 999px; background: var(--cmp-bg); cursor: pointer; font-weight: 600; }
.cmp-track__links input { appearance: none; width: 26px; height: 16px; margin: 0; border: 3px solid var(--cmp-rim); border-radius: 9px; background: var(--cmp-panel); cursor: pointer; }
.cmp-track__links input:checked { background: var(--cmp-warm); border-color: var(--cmp-warm); }
.cmp-track__links input:focus-visible { outline: 3px solid var(--cmp-warm); outline-offset: 3px; }
.cmp-track__links label:has(input:checked) { border-color: var(--cmp-warm); background: var(--cmp-panel-up); }
.cmp-track__links small { grid-column: 2; font-size: .8rem; font-weight: 500; color: var(--cmp-muted); }
.cmp-track__links small:empty { display: none; }

/* first-visit requests raised from the account */
.cmp-asks { list-style: none; display: grid; gap: 10px; margin: 14px 0; }
.cmp-asks li { display: grid; gap: 4px 16px; padding: 14px 16px; border-radius: 16px; background: var(--cmp-panel); }
.cmp-asks__ref { font: 400 1.2rem/1.1 var(--cmp-display); letter-spacing: .06em; color: var(--cmp-warm); }
.cmp-asks__state { justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--cmp-panel-up); border: 2px solid var(--cmp-accent); font-size: .85rem; font-weight: 650; }
@media (min-width: 700px) { .cmp-asks li { grid-template-columns: auto 1fr auto; align-items: center; } .cmp-asks__state { justify-self: end; } }
@media (prefers-reduced-motion: no-preference) {
  .cmp-track__links label, .cmp-mover__jump a { transition: transform .2s ease; }
  .cmp-track__links label:hover, .cmp-mover__jump a:hover { transform: translateY(-2px); }
  .cmp-track__links input:checked { animation: cmp-click .32s cubic-bezier(.3, 1.8, .45, 1) both; }
  .cmp-flash { animation: cmp-fade .4s ease both; }
}

/* ============ realism round: the company frame and the seller's pack ============ */

/* four more openers. door: plum door on the right, the stone wall left is quiet enough under a deep pool.
   folder: the table things lower right, dark wall above left. keys: the bay window right, wall left.
   van: the van left under a bright dawn sky, so the title goes right, over the dark house front. */
.cmp-head--door .cmp-head__art img { object-position: 72% 50%; }
.cmp-head--folder .cmp-head__art img { object-position: 64% 60%; }
.cmp-head--keys .cmp-head__art img { object-position: 66% 50%; }
.cmp-head--van .cmp-head__art img { object-position: 40% 60%; }
@media (min-width: 900px) {
  .cmp-head--door .cmp-head__copy, .cmp-head--folder .cmp-head__copy, .cmp-head--keys .cmp-head__copy { align-self: start; }
  .cmp-head--door .cmp-head__art::before { background: radial-gradient(72% 100% at 20% 34%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 38%, var(--cmp-veil) 62%, transparent 86%); }
  .cmp-head--folder .cmp-head__art::before { background: radial-gradient(74% 96% at 18% 26%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 28%, var(--cmp-veil) 54%, transparent 82%); }
  .cmp-head--keys .cmp-head__art::before { background: radial-gradient(70% 100% at 16% 28%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 34%, var(--cmp-veil) 58%, transparent 84%); }
  .cmp-head--van .cmp-head__copy { align-self: start; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .cmp-head--van .cmp-head__art::before { background: radial-gradient(66% 96% at 84% 26%, var(--cmp-veil-deep) 0%, var(--cmp-veil-deep) 34%, var(--cmp-veil) 58%, transparent 84%); }
  .cmp-head--door .cmp-head__copy h1 { max-width: 10em; }
  .cmp-head--keys .cmp-head__copy h1 { max-width: 10em; }
  .cmp-head--folder .cmp-head__copy .cmp-lede, .cmp-head--door .cmp-head__copy .cmp-lede { max-width: 36ch; }
}
@media (max-width: 899px) {
  .cmp-head--door::after, .cmp-head--van::after { background: linear-gradient(180deg, var(--cmp-veil-deep) 0%, var(--cmp-veil) calc(100% - 56px), transparent 100%); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cmp-head--door .cmp-head__art img { object-position: 80% 50%; }
  .cmp-head--folder .cmp-head__art img { object-position: 70% 50%; }
  .cmp-head--keys .cmp-head__art img { object-position: 64% 50%; }
  .cmp-head--van .cmp-head__art img { object-position: 30% 50%; }
}

/* the foot: the small print as a row of chain links, each one a surface at rest */
.cmp-fine { margin-top: 34px; padding-top: 26px; border-top: 3px solid var(--cmp-rim-soft); }
.cmp-fine__h { font: 650 .78rem/1.3 var(--cmp-text); letter-spacing: .16em; text-transform: uppercase; color: var(--cmp-warm); margin-bottom: 12px; }
.cmp-fine__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cmp-fine__links a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 3px solid var(--cmp-rim); border-radius: 999px;
  background: var(--cmp-bg); color: var(--cmp-ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
.cmp-fine__links a:hover { border-color: var(--cmp-warm); }
.cmp-fine__links a[aria-current="page"] { background: var(--cmp-accent); border-color: var(--cmp-accent); color: var(--cmp-on-accent); }
.cmp-fine .cmp-foot__small { margin-top: 18px; }

/* contact */
.cmp-mailto { margin: 6px 0 22px; }
.cmp-mailto a { display: inline-block; font: 400 clamp(1.35rem, 4.4vw, 2.3rem)/1.15 var(--cmp-display); letter-spacing: .04em; color: var(--cmp-warm);
  text-decoration: none; overflow-wrap: anywhere; padding: 8px 0; border-bottom: 3px solid var(--cmp-rim); }
.cmp-mailto a:hover { border-bottom-color: var(--cmp-warm); }
.cmp-subjects { margin-top: 14px; }
.cmp-subjects th { width: 28%; }
.cmp-routes div { grid-template-columns: 6.4rem 1fr; }
.cmp-run--wide { max-width: 76ch; }
.cmp-ends { margin: 6px 0 24px; }

/* questions: the group on the left with its own jump list, the answers on the right */
.cmp-qa + .cmp-qa { padding-top: 0; }
.cmp-qa__grid { display: grid; gap: 22px; }
.cmp-qa__side h2 { margin-bottom: 14px; }
.cmp-qa__jump { list-style: none; display: grid; gap: 6px; counter-reset: q; }
.cmp-qa__jump a { display: block; padding: 8px 0 8px 18px; border-left: 3px solid var(--cmp-rim); color: var(--cmp-muted); text-decoration: none; font-size: .96rem; line-height: 1.35; }
.cmp-qa__jump a:hover { color: var(--cmp-ink); border-left-color: var(--cmp-warm); }
.cmp-qa__list { display: grid; gap: 14px; }
.cmp-qa__item { padding: 22px 24px; border-radius: 22px; background: var(--cmp-panel); scroll-margin-top: 24px; }
.cmp-qa__item h3 { font-size: clamp(1.18rem, 2vw, 1.38rem); margin-bottom: 10px; }
.cmp-qa__item p { max-width: 68ch; }
.cmp-qa__item:target { outline: 3px solid var(--cmp-warm); outline-offset: 3px; }
@media (min-width: 900px) {
  .cmp-qa__grid { grid-template-columns: .8fr 1.5fr; gap: 56px; align-items: start; }
  .cmp-qa__side { position: sticky; top: 24px; }
}

/* the seller's pack, public: one card per group */
.cmp-pack__cards { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 860px) { .cmp-pack__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cmp-pack__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cmp-pack__card { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 22px; background: var(--cmp-panel); border-top: 5px solid var(--cmp-accent); }
.cmp-pack__card--lease { border-top-color: var(--cmp-warm); }
.cmp-pack__card h3 { font-size: clamp(1.2rem, 2.1vw, 1.42rem); }
.cmp-pack__count { font-size: .82rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--cmp-muted); }
.cmp-pack__card .cmp-tick li { font-size: 1rem; }
.cmp-pack__card .cmp-tick li.is-if::before { border-style: dashed; }
.cmp-pack__card .cmp-tick small { color: var(--cmp-muted); font-size: .85rem; white-space: nowrap; }
.cmp-pack__src { padding-top: 12px; border-top: 2px solid var(--cmp-rim-soft); font-size: .92rem; }
.cmp-pack__src b { display: block; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cmp-accent); margin-bottom: 4px; }
.cmp-pack__src ul { list-style: none; display: grid; gap: 4px; }

/* the seller's pack, in the account: the summary beside the intro, then each group as a panel of chain links */
.cmp-pack__top { display: grid; gap: 22px; margin-bottom: 22px; }
@media (min-width: 900px) { .cmp-pack__top { grid-template-columns: 1.4fr .8fr; gap: 56px; align-items: end; } }
.cmp-pack__sum { padding: 22px; border-radius: 22px; background: var(--cmp-panel-up); display: grid; gap: 10px; }
.cmp-pack__sum-h { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.cmp-pack__sum b { color: var(--cmp-warm); font-weight: 650; font-size: 1.15em; }
.cmp-pack__bar { display: block; height: 12px; border-radius: 999px; background: var(--cmp-bg); border: 2px solid var(--cmp-rim); overflow: hidden; }
.cmp-pack__bar span { display: block; height: 100%; width: var(--cmp-done, 0%); background: linear-gradient(90deg, var(--cmp-accent), var(--cmp-warm)); }
.cmp-pack { display: grid; gap: 16px; }
.cmp-pack__tenure { padding: 18px 20px; border-radius: 22px; background: var(--cmp-panel); }
.cmp-pack__group { margin: 0; padding: 20px; border: 0; border-radius: 22px; background: var(--cmp-panel); min-width: 0; }
.cmp-pack__legend { float: left; width: 100%; padding: 0 0 4px; font: 400 clamp(1.2rem, 2.1vw, 1.42rem)/1.2 var(--cmp-display); letter-spacing: .07em; text-transform: uppercase; }
.cmp-pack__legend small { display: block; margin-top: 4px; font: 650 .8rem/1.3 var(--cmp-text); letter-spacing: .1em; color: var(--cmp-muted); }
.cmp-pack__legend small:empty { display: none; }
.cmp-pack__why { clear: both; font-size: .98rem; color: var(--cmp-muted); max-width: 72ch; margin-bottom: 12px; }
.cmp-pack__items { list-style: none; display: grid; gap: 10px; }
@media (min-width: 900px) { .cmp-pack__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-pack__items li { display: grid; gap: 6px; align-content: start; }
.cmp-pack__have { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; min-height: 52px; padding: 10px 16px 10px 12px;
  border: 3px solid var(--cmp-rim); border-radius: 18px; background: var(--cmp-bg); cursor: pointer; font-weight: 600; line-height: 1.35; font-size: 1rem; }
.cmp-pack__have input { appearance: none; width: 26px; height: 16px; margin: 3px 0 0; border: 3px solid var(--cmp-rim); border-radius: 9px; background: var(--cmp-panel); cursor: pointer; }
.cmp-pack__have input:checked { background: var(--cmp-warm); border-color: var(--cmp-warm); }
.cmp-pack__have input:focus-visible, .cmp-pack__na input:focus-visible { outline: 3px solid var(--cmp-warm); outline-offset: 3px; }
.cmp-pack__have:has(input:checked) { border-color: var(--cmp-warm); background: var(--cmp-panel-up); }
.cmp-pack__have small { grid-column: 2; font-size: .8rem; font-weight: 500; color: var(--cmp-muted); }
.cmp-pack__have small:empty { display: none; }
.cmp-pack__na { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; margin-left: 14px;
  border: 2px dashed var(--cmp-rim); border-radius: 999px; font-size: .9rem; color: var(--cmp-muted); cursor: pointer; }
.cmp-pack__na input { appearance: none; width: 20px; height: 20px; margin: 0; border: 3px solid var(--cmp-rim); border-radius: 6px; background: var(--cmp-bg); cursor: pointer; }
.cmp-pack__na input:checked { background: var(--cmp-muted); border-color: var(--cmp-muted); box-shadow: inset 0 0 0 3px var(--cmp-bg); }
.cmp-pack__na:has(input:checked) { color: var(--cmp-ink); border-style: solid; }
.cmp-pack__save { position: sticky; bottom: 12px; z-index: 3; display: flex; justify-content: flex-start; }
.cmp-pack__save .cmp-btn { box-shadow: 0 6px 24px var(--cmp-bg); }

/* the pack on the home page: the picture beside the list */
.cmp-teaser__grid { display: grid; gap: 28px; }
.cmp-teaser__art { margin: 0; border-radius: 26px; overflow: hidden; background: var(--cmp-panel); }
.cmp-teaser__art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; object-position: 70% 70%; }
.cmp-teaser__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin: 4px 0; }
@media (min-width: 900px) { .cmp-teaser__grid { grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; } .cmp-teaser__art img { aspect-ratio: 4 / 3; object-position: 80% 82%; } }

/* the privacy notice: record cards, and the one cookie */
.cmp-kept .cmp-stage dd { font-size: 1rem; }
.cmp-cookie code, .cmp-prose code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--cmp-panel-up); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .cmp-pack__have, .cmp-fine__links a { transition: transform .2s ease, border-color .2s ease; }
  .cmp-pack__have:hover, .cmp-fine__links a:hover { transform: translateY(-2px); }
  .cmp-pack__have input:checked { animation: cmp-click .32s cubic-bezier(.3, 1.8, .45, 1) both; }
  .cmp-pack__bar span { transition: width .4s ease; }
}
/* paper: the seller's pack and the small print are the pages people print. Light ink on a dark ground
   would print white on white, so print flattens everything to black on paper and drops the art. */
@media print {
  .cmp-mast, .cmp-fine, .cmp-foot__brand, .cmp-pack__save, .cmp-skip, .cmp-head__art, .cmp-teaser__art, .cmp-actions, body::before { display: none !important; }
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .cmp-head { min-height: 0; display: block; }
  .cmp-band { padding-block: 18px; }
  .cmp-pack__card, .cmp-stage, .cmp-qa__item, .cmp-aside { border: 1px solid #999; break-inside: avoid; }
}

/* the narrowest phones (320 px): one long Welsh word in a title ("Mewngofnodi") was 6 px wider than the screen;
   titles step down a size below 360 px instead of breaking a word in half */
@media (max-width: 359px) {
  h1 { font-size: 2.02rem; letter-spacing: .03em; }
  .cmp-split > *, .cmp-mover__intro > * { min-width: 0; }
}