/* GARIB PROPERTY LIMITED - warm stone and brass. One walk through a house. */

:root {
  --gpw-bg: #16130F;
  --gpw-panel: #221D16;
  --gpw-ink: #F2EBDF;
  --gpw-muted: #A89980;
  --gpw-brass: #C8894A;
  --gpw-sage: #7FA08A;

  --gpw-ink-soft: rgba(242, 235, 223, 0.74);
  --gpw-ink-faint: rgba(242, 235, 223, 0.46);
  --gpw-line: rgba(242, 235, 223, 0.13);
  --gpw-line-warm: rgba(200, 137, 74, 0.32);
  --gpw-raise: rgba(242, 235, 223, 0.05);
  --gpw-raise-2: rgba(242, 235, 223, 0.085);
  --gpw-sink: rgba(0, 0, 0, 0.34);
  --gpw-brass-wash: rgba(200, 137, 74, 0.13);
  --gpw-sage-wash: rgba(127, 160, 138, 0.14);

  --gpw-ring: var(--gpw-sage);
  --gpw-ring-halo: rgba(127, 160, 138, 0.28);

  /* Condensed display over a WIDE body. Not a decorative choice: a display serif over a
     humanist sans is the formula four sibling sites arrived at independently, which makes the
     pairing a batch fingerprint however good each family is (A14). Encode Sans Condensed is
     signwriter-narrow; Archivo is loaded at font-stretch 112%, so the running text is genuinely
     WIDE rather than merely not-condensed, and the two read as different species at a glance. */
  --gpw-display: "Encode Sans Condensed", "Arial Narrow", "Haettenschweiler", sans-serif;
  --gpw-body: "Archivo", "Segoe UI", system-ui, sans-serif;
  /* Archivo's faces are served at 112%; naming it here keeps every element on the loaded width
     instead of letting the browser synthesise a 100% one. */
  --gpw-wide: 112%;

  --gpw-step: 1.0625rem;
  --gpw-lead: 1.2rem;
  --gpw-small: 0.84rem;
  --gpw-micro: 0.78rem;

  --gpw-gap: 1.15rem;
  --gpw-gap-l: 2.1rem;
  --gpw-gap-xl: 3.4rem;
  --gpw-shadow-soft: 0 1.4rem 2.6rem rgba(0, 0, 0, 0.42);
  --gpw-shadow-tile: 0 0.12rem 0 rgba(0, 0, 0, 0.3), inset 0 0.06rem 0 rgba(242, 235, 223, 0.05);
  --gpw-ease: cubic-bezier(0.2, 0.72, 0.22, 1);
}

/* reset: :where() keeps every rule here at zero specificity, so a component
   rule later in the file always wins without resorting to !important. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, address) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(address) { font-style: normal; }
:where(table) { border-collapse: collapse; }
:where(a) { color: inherit; }

html {
  background: var(--gpw-bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

.gpw-body {
  margin: 0;
  min-height: 100%;
  background: var(--gpw-bg);
  color: var(--gpw-ink);
  font-family: var(--gpw-body);
  font-size: var(--gpw-step);
  font-weight: 400;
  line-height: 1.62;
  font-stretch: var(--gpw-wide);
  letter-spacing: 0.001em;
  /* clip, never hidden: `hidden` silently turns the body into a scroll container, and every
     `animation-timeline: view()` on the page then resolves against it and freezes mid-travel. */
  overflow-x: clip;
}

/* The ground is LIGHT, not geometry (A11). What was here was two tiled dot fields at 7px and
   13px - a halftone, i.e. the thing a program draws when it has no picture of the surface. This
   is the light a house actually has: one warm source low on the left as if through the open front
   door, one cold one high on the right as if off the street, and the floor falling into shadow.
   Nothing repeats, so there is no tile for an eye to find. */
.gpw-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 74% at 6% 102%, rgba(200, 137, 74, 0.15), rgba(0, 0, 0, 0) 54%),
    radial-gradient(86% 58% at 96% -6%, rgba(127, 160, 138, 0.10), rgba(0, 0, 0, 0) 58%),
    linear-gradient(176deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.30) 100%);
}

.gpw-skip {
  position: absolute;
  left: 0.75rem;
  top: -7rem;
  z-index: 40;
  padding: 0.85rem 1.3rem;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  background: var(--gpw-brass);
  color: var(--gpw-bg);
  font-weight: 700;
  font-size: var(--gpw-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--gpw-shadow-soft);
  transition: top 170ms var(--gpw-ease);
}

.gpw-skip:focus-visible { top: 0.75rem; }

.gpw-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1.1rem;
}

/* ------------------------------------------------- masthead and the street */

/* A21 - the lockup. The mark does not sit BESIDE the name: the baseline rule that carries
   the wordmark BREAKS, and the house stands in the break with its feet on the line, so the
   rule is anchored by the mark rather than decorated with it. The wordmark is hand-set in
   SVG in the site's own condensed display face. The masthead carries the BRAND; "LIMITED"
   belongs in the registered-details block at the foot, not here. */
.gpw-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem 1.6rem;
  padding: 1.5rem 0 1.15rem;
}

.gpw-lockup {
  display: block;
  width: min(21rem, 78vw);
  height: auto;
  /* no clipping ancestor, no bleed off an edge: a cropped photograph is a crop, a cropped
     mark reads as an image that failed to load (A22). */
  overflow: visible;
}

.gpw-lock-word {
  font-family: var(--gpw-display);
  font-weight: 700;
  font-size: 62px;
  letter-spacing: 0.012em;
  fill: var(--gpw-ink);
}

.gpw-lock-rule { fill: var(--gpw-brass); }
.gpw-lock-house { fill: var(--gpw-brass); }

.gpw-mast-where {
  max-width: 21rem;
  font-size: var(--gpw-micro);
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--gpw-muted);
}

.gpw-mast-where b {
  display: block;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gpw-brass);
}

/* --- the street: the four pages as a TERRACE, not a stack of equal rows.
   A16 bans the numbered index menu, and the operator was explicit that the row-button is as
   much the pattern as the digits - so the digits are gone AND the row is gone. Each page is a
   house front sized to its own name, standing on a shared pavement, with its own roofline and
   its own lit doorstep. The widths are ragged because the names are different lengths and the
   heights are ragged because terraces are; nothing here can be mistaken for a list. */
.gpw-street {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.3rem;
  margin: 0 0 1.5rem;
}

.gpw-house {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 3.1rem;
  padding: 0.55rem 0.85rem 0.6rem;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(242, 235, 223, 0.085), rgba(242, 235, 223, 0.02) 58%),
    var(--gpw-panel);
  border-top: 0.3rem solid var(--gpw-muted);
  border-bottom: 0.26rem solid var(--gpw-line-warm);
  box-shadow: var(--gpw-shadow-tile);
  transition: background-color 190ms var(--gpw-ease), border-color 190ms var(--gpw-ease),
    transform 190ms var(--gpw-ease);
}

/* the ragged skyline. Five fronts, five eaves heights - the signal that this is not a list. */
.gpw-street > :nth-child(1) .gpw-house { min-height: 4.5rem; }
.gpw-street > :nth-child(2) .gpw-house { min-height: 3.5rem; }
.gpw-street > :nth-child(3) .gpw-house { min-height: 4.1rem; }
.gpw-street > :nth-child(4) .gpw-house { min-height: 3.2rem; }
.gpw-street > :nth-child(5) .gpw-house { min-height: 3.8rem; }

.gpw-house-name {
  font-family: var(--gpw-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.012em;
  color: var(--gpw-ink-soft);
  white-space: nowrap;
  transition: color 190ms var(--gpw-ease);
}

.gpw-house-sub {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gpw-muted);
  white-space: nowrap;
}

.gpw-house:hover {
  background: linear-gradient(180deg, rgba(200, 137, 74, 0.2), rgba(200, 137, 74, 0.05) 60%), var(--gpw-panel);
  border-top-color: var(--gpw-brass);
  transform: translateY(-0.1rem);
}

.gpw-house:hover .gpw-house-name { color: var(--gpw-ink); }

/* the lit one: the house you are standing in has its door open */
.gpw-house.is-here {
  background: linear-gradient(180deg, rgba(200, 137, 74, 0.26), rgba(200, 137, 74, 0.06) 62%), var(--gpw-panel);
  border-top-color: var(--gpw-brass);
  border-bottom-color: var(--gpw-brass);
}

.gpw-house.is-here .gpw-house-name { color: var(--gpw-ink); }
.gpw-house.is-here .gpw-house-sub { color: var(--gpw-brass); }

/* --- where you are standing: a slim bar that follows you down the page */
.gpw-standing {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin-bottom: 0.9rem;
  padding: 0.62rem 0.9rem 0.68rem;
  background: rgba(27, 23, 18, 0.93);
  backdrop-filter: blur(7px);
  box-shadow: var(--gpw-shadow-tile);
}

.gpw-standing-k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gpw-brass);
}

.gpw-standing-v {
  font-family: var(--gpw-display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.012em;
  color: var(--gpw-ink);
  transition: color 240ms var(--gpw-ease), opacity 240ms var(--gpw-ease);
}

.gpw-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.2rem;
  overflow: clip;
}

.gpw-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gpw-brass), var(--gpw-sage));
  transform: scaleX(var(--gpw-walked, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
}

/* --- the thresholds on this page. A third construction again, so the page never repeats a
   shape: no panel, no roofline - a tick hung from a lintel line, each label as wide as its
   own words. */
.gpw-rooms-k {
  margin: 0 0 0.35rem;
  font-size: var(--gpw-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gpw-muted);
}

.gpw-thresholds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-bottom: 0.4rem;
}

.gpw-room {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.6rem 0.72rem 0.55rem;
  background: var(--gpw-raise-2);
  font-size: var(--gpw-small);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gpw-ink-soft);
  text-decoration: none;
  transition: background-color 180ms var(--gpw-ease), color 180ms var(--gpw-ease);
}

/* the lintel over each opening */
.gpw-room::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.18rem;
  background: var(--gpw-line-warm);
  transition: background-color 180ms var(--gpw-ease);
}

.gpw-room:hover { background: var(--gpw-brass-wash); color: var(--gpw-ink); }
.gpw-room:hover::before { background: var(--gpw-brass); }

.gpw-room.is-here {
  background: var(--gpw-sage-wash);
  color: var(--gpw-ink);
  font-weight: 700;
}

.gpw-room.is-here::before { background: var(--gpw-sage); }

/* ------------------------------------------------------------- the walk */

.gpw-walk { padding: 0.6rem 0 0; }

.gpw-sec {
  padding: var(--gpw-gap-l) 0;
  max-width: 58rem;
}

.gpw-sec + .gpw-sec { border-top: 0.18rem solid var(--gpw-line); }

.gpw-last { padding-bottom: var(--gpw-gap-xl); }

.gpw-eyebrow {
  margin-bottom: 1rem;
  font-size: var(--gpw-micro);
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gpw-muted);
}

.gpw-dot {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin: 0 0.42rem;
  vertical-align: 0.14em;
  background: var(--gpw-brass);
  border-radius: 50%;
  flex: 0 0 auto;
}

.gpw-h1 {
  font-family: var(--gpw-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.4vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: 0.002em;
  color: var(--gpw-ink);
  text-wrap: balance;
}

.gpw-h2 {
  max-width: 36rem;
  font-family: var(--gpw-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: 0.004em;
  margin-bottom: 0.9rem;
  color: var(--gpw-ink);
  text-wrap: pretty;
}

.gpw-h3 {
  font-family: var(--gpw-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gpw-ink);
}

/* The step numeral numbers CONTENT, which A16 explicitly leaves alone - it is the order the
   walk happens in, not a menu. It is not a link and sits on no nav container. */
.gpw-num {
  font-family: var(--gpw-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gpw-brass);
}

.gpw-rule {
  height: 0.2rem;
  width: 100%;
  max-width: 13rem;
  margin: 0.5rem 0 1.1rem;
  background: linear-gradient(90deg, var(--gpw-brass), rgba(200, 137, 74, 0));
  transform-origin: left center;
}

.gpw-sec p + p { margin-top: 0.95rem; }

.gpw-lead {
  font-size: var(--gpw-lead);
  line-height: 1.48;
  color: var(--gpw-ink);
}

.gpw-threshold .gpw-lead { margin-top: 1.3rem; }

.gpw-sec p { color: var(--gpw-ink-soft); max-width: 40rem; }
.gpw-sec .gpw-lead { color: var(--gpw-ink); }

.gpw-aside {
  margin-top: 1.25rem;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 0.2rem solid var(--gpw-line-warm);
  font-size: var(--gpw-small);
  color: var(--gpw-ink-faint);
}

/* the opener: a threshold slab the page steps over */

.gpw-threshold {
  padding-top: 2.6rem;
  max-width: none;
}

.gpw-threshold-grid { display: grid; gap: var(--gpw-gap-l); margin-top: 1.4rem; }

.gpw-threshold-words { max-width: 40rem; }

.gpw-threshold-sub .gpw-lead { max-width: 38rem; }

.gpw-list {
  max-width: 48rem;
  display: grid;
  gap: 0.55rem;
  margin: 1.3rem 0;
}

.gpw-list li {
  padding: 0.75rem 0.95rem;
  background: var(--gpw-raise);
  font-size: var(--gpw-small);
  color: var(--gpw-ink-soft);
  box-shadow: inset 0.18rem 0 0 rgba(200, 137, 74, 0.45);
  transition: background-color 200ms var(--gpw-ease), box-shadow 200ms var(--gpw-ease);
}

.gpw-list li:hover {
  background: var(--gpw-brass-wash);
  box-shadow: inset 0.3rem 0 0 var(--gpw-brass);
}

.gpw-li-k {
  display: block;
  font-weight: 700;
  color: var(--gpw-ink);
  letter-spacing: 0.015em;
}

.gpw-dl {
  margin: 1.3rem 0;
  display: grid;
  gap: 0.2rem;
}

.gpw-dl dt {
  padding: 0.7rem 0.9rem 0.2rem;
  background: var(--gpw-panel);
  font-weight: 700;
  font-size: var(--gpw-small);
  color: var(--gpw-ink);
}

.gpw-dl dd {
  padding: 0 0.9rem 0.8rem;
  background: var(--gpw-panel);
  font-size: var(--gpw-small);
  color: var(--gpw-ink-soft);
}

.gpw-dl dd + dt { margin-top: 0.55rem; }

.gpw-contact { margin: 1.3rem 0 1.1rem; }

/* ------------------------------------------------------- figures and art */

/* FEATHERED is this site's assigned placement (A14): every photograph is faded into the page
   ground with mask-image and carries no frame, no border and no caption bar. A box with a
   caption under it is the placement fingerprint four sibling sites arrived at independently. */
.gpw-art {
  position: relative;
  margin: 1.6rem 0 1.2rem;
  /* clip, not hidden - `hidden` makes this a scroll container and every scroll-linked
     animation inside it then resolves against the frame and freezes (A18). */
  overflow: clip;
}

.gpw-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the feather itself: opaque in the middle, gone at every edge */
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 24%, #000 70%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 17%, #000 83%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 24%, #000 70%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 17%, #000 83%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

/* the hero: the headline is SET ON the picture, in its empty sky (A15). The sky measures
   15:1 against the page ink at the worst pixel across the whole upper-left quarter, mapped
   on a 10x7 grid before anything was placed - so no scrim is doing the work here, the
   commissioned negative space is. The soft wash below is for the 390px crop, where the
   frame tightens and the roofline climbs into the text box. */
.gpw-hero {
  position: relative;
  margin: 0 0 1.5rem;
  overflow: clip;
  isolation: isolate;
}

.gpw-hero-pic {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gpw-hero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
  display: block;
  -webkit-mask-image: linear-gradient(185deg, #000 54%, rgba(0,0,0,0) 97%),
    linear-gradient(90deg, #000 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(185deg, #000 54%, rgba(0,0,0,0) 97%),
    linear-gradient(90deg, #000 86%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

.gpw-hero-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(22, 19, 15, 0.95) 0%, rgba(22, 19, 15, 0.9) 34%,
    rgba(22, 19, 15, 0.62) 52%, rgba(22, 19, 15, 0) 82%);
}

/* The hero eyebrow carries the site's STONE, not its brass. Brass measured 4.03:1 at the worst
   pixel over the scrimmed picture - true but under the line - because #C8894A is a mid tone and
   the ground beneath it is a photograph, not a flat panel. The stone is three times brighter and
   clears it at 10:1; the brass stays on the separator dot, where it reads as an accent. */
.gpw-hero .gpw-eyebrow { color: var(--gpw-ink); }

.gpw-hero-words {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 21rem;
  padding: 7.5rem 0 1.6rem;
  max-width: 34rem;
}

.gpw-figure {
  margin: 0;
  padding: 1rem;
  background: var(--gpw-panel);
  box-shadow: var(--gpw-shadow-soft);
}

.gpw-cap {
  margin-top: 0.9rem;
  font-size: var(--gpw-micro);
  line-height: 1.5;
  color: var(--gpw-muted);
  max-width: 30rem;
}

.gpw-plan, .gpw-plot, .gpw-dia { width: 100%; height: auto; overflow: visible; }

.gpw-d {
  fill: none;
  stroke: rgba(242, 235, 223, 0.66);
  stroke-width: 3.4;
  stroke-linecap: square;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;
}

.gpw-swing { stroke: var(--gpw-brass); stroke-width: 2.2; stroke-dasharray: 100 100; }
.gpw-stair { stroke: var(--gpw-muted); stroke-width: 1.9; }
.gpw-win { stroke: var(--gpw-sage); stroke-width: 6; }

.gpw-plan-t, .gpw-pl-t, .gpw-dia-t {
  font-family: var(--gpw-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--gpw-muted);
}

.gpw-plan-l {
  font-family: var(--gpw-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--gpw-ink-soft);
}

.gpw-plan-v { writing-mode: vertical-rl; }
.gpw-plan-up { fill: var(--gpw-brass); letter-spacing: 0.2em; }
.gpw-pl-t-acc, .gpw-dia-t-acc { fill: var(--gpw-brass); }

.gpw-pl-ground { fill: rgba(242, 235, 223, 0.06); }
.gpw-pl-pave { fill: var(--gpw-muted); }
.gpw-pl-house { fill: rgba(200, 137, 74, 0.1); stroke: var(--gpw-ink-faint); stroke-width: 2; }
.gpw-pl-add { fill: rgba(127, 160, 138, 0.12); stroke: var(--gpw-ink-faint); stroke-width: 2; }
.gpw-pl-roof, .gpw-pl-addroof { fill: rgba(242, 235, 223, 0.08); stroke: var(--gpw-muted); stroke-width: 2; }
.gpw-pl-win { fill: var(--gpw-sage-wash); stroke: var(--gpw-sage); stroke-width: 1.6; }
.gpw-pl-door { fill: var(--gpw-brass-wash); stroke: var(--gpw-brass); stroke-width: 1.6; }
.gpw-pl-wall { fill: var(--gpw-muted); }
.gpw-pl-fall { fill: none; stroke: var(--gpw-sage); stroke-width: 2; stroke-dasharray: 6 5; }
.gpw-pl-gut { fill: none; stroke: var(--gpw-brass); stroke-width: 3; }
.gpw-pl-here { fill: var(--gpw-brass); }

.gpw-dia-soil { fill: rgba(168, 153, 128, 0.22); }
.gpw-dia-wall { fill: rgba(242, 235, 223, 0.1); stroke: var(--gpw-ink-faint); stroke-width: 2; }
.gpw-dia-floor { fill: rgba(200, 137, 74, 0.28); }
.gpw-dia-dpc { fill: none; stroke: var(--gpw-brass); stroke-width: 4; }
.gpw-dia-tide { fill: none; stroke: var(--gpw-sage); stroke-width: 2; stroke-dasharray: 7 6; }
.gpw-dia-step { fill: none; stroke: var(--gpw-ink-soft); stroke-width: 2.4; }
.gpw-dia-string { fill: none; stroke: var(--gpw-muted); stroke-width: 1.4; stroke-dasharray: 5 5; }
.gpw-dia-mark { fill: var(--gpw-brass); }

.gpw-split { display: grid; gap: var(--gpw-gap-l); }
.gpw-split-words { min-width: 0; }

/* --- type set ON the pictures (A15), handled a DIFFERENT way on each one, because one
   device repeated three times is its own fingerprint. The hall gets a scrim and light ink;
   the back wall gets DARK ink straight onto a bright evening sky, which the 10x7 map reads
   at 8.7:1 at its worst pixel, so nothing is laid over the picture at all. */

.gpw-pane { position: relative; margin: 1.7rem 0 1.3rem; overflow: clip; isolation: isolate; }

.gpw-pane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hall: the ink is at the FOOT on a scrim, so the picture may fade on all four sides. */
.gpw-pane--scrim img,
.gpw-pane--scrim::after {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 74%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 74%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

/* back wall: DARK ink sits on the bright sky at the top left, so that corner must stay at full
   strength - fading it would dim the only ground the ink has and send the measured contrast
   through the floor. The picture is therefore feathered from an origin inside the type area
   outwards: opaque where the words are, gone at the far edges. */
.gpw-pane--sky img,
.gpw-pane--sky::before {
  -webkit-mask-image: radial-gradient(118% 132% at 24% 26%, #000 0%, #000 54%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 8%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(118% 132% at 24% 26%, #000 0%, #000 54%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 8%, #000 100%);
  mask-composite: intersect;
}

.gpw-pane-words {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

/* hall: the plaster wall measures 3.2-4.9:1 against either ink - calm to the eye and a FAIL
   on the number, which is exactly the trap the recipe warns about. So the ink is carried on
   a ramp that reaches full strength well before the text box starts. */
.gpw-pane--scrim { min-height: 23rem; display: flex; align-items: flex-end; }

.gpw-pane--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(8deg, rgba(14, 12, 9, 0.97) 0%, rgba(14, 12, 9, 0.95) 42%,
    rgba(14, 12, 9, 0.64) 62%, rgba(14, 12, 9, 0) 84%);
}

.gpw-pane--scrim .gpw-pane-words { padding: 0 1.4rem 2.1rem 1.9rem; }

.gpw-pane--scrim .gpw-pane-lead {
  font-family: var(--gpw-display);
  font-size: clamp(1.5rem, 4.1vw, 2.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.006em;
  color: var(--gpw-ink);
}

/* Solid, not the 74%-alpha soft ink. Over a flat panel the soft ink is a nice second voice;
   over a PHOTOGRAPH it is two-thirds background, and the same line measured 5.04:1 on the index
   and 3.90:1 on /inside purely because the two panes are different heights. A caption that is
   legible only on some pages is a caption that was never measured. */
.gpw-pane--scrim .gpw-pane-note {
  font-size: var(--gpw-small);
  line-height: 1.5;
  color: var(--gpw-ink);
}

/* back wall: dark ink on the bright sky, no overlay of any kind */
.gpw-pane--sky { min-height: 24rem; display: flex; align-items: flex-start; }

/* z-index 1, ABOVE the picture. A ::before is generated as the element's FIRST child, so with
   both at z-index auto the wash painted underneath the absolutely-positioned <img> and did
   nothing at all - the 390 screenshot showed dark ink straight on lit brickwork while the
   stylesheet said otherwise. */
.gpw-pane--sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(152deg, rgba(240, 231, 214, 0.86) 0%, rgba(240, 231, 214, 0.78) 34%,
    rgba(240, 231, 214, 0.34) 56%, rgba(240, 231, 214, 0) 76%);
}

.gpw-pane--sky .gpw-pane-words { padding: 3rem 1.4rem 0 1.9rem; max-width: 20rem; }

.gpw-pane--sky .gpw-pane-lead {
  font-family: var(--gpw-display);
  font-size: clamp(1.45rem, 3.9vw, 2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: #16130F;
}

.gpw-pane--sky .gpw-pane-note {
  font-size: var(--gpw-small);
  font-weight: 500;
  line-height: 1.5;
  color: #241D14;
}

/* --- the enquiry desk (A17). Real inputs, visible at rest (A6), validated here and again in
   the Worker. Nothing on this form asks about money and nothing it returns mentions any. */
.gpw-desk {
  margin: 1.6rem 0 0.6rem;
  padding: 1.25rem 1.1rem 1.35rem;
  background: var(--gpw-panel);
  box-shadow: var(--gpw-shadow-tile);
  border-top: 0.3rem solid var(--gpw-brass);
}

.gpw-fields { display: grid; gap: 0.95rem; margin-top: 1.1rem; }

.gpw-field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }

.gpw-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gpw-muted);
}

.gpw-label span { text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--gpw-ink-faint); }

.gpw-in {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.7rem;
  background: var(--gpw-sink);
  color: var(--gpw-ink);
  border: 0.14rem solid var(--gpw-line);
  border-radius: 0;
  font-size: var(--gpw-step);
  font-family: var(--gpw-body);
  font-stretch: var(--gpw-wide);
}

select.gpw-in { appearance: none; background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, var(--gpw-brass) 50%), linear-gradient(135deg, var(--gpw-brass) 50%, rgba(0,0,0,0) 50%); background-position: right 1.1rem center, right 0.75rem center; background-size: 0.38rem 0.38rem, 0.38rem 0.38rem; background-repeat: no-repeat; padding-right: 2rem; }

textarea.gpw-in { min-height: 6.5rem; resize: vertical; line-height: 1.5; }

.gpw-in:hover { border-color: var(--gpw-line-warm); }
.gpw-in:focus-visible { outline: 0.18rem solid var(--gpw-ring); outline-offset: 0.12rem; border-color: var(--gpw-ring); }
.gpw-in[aria-invalid="true"] { border-color: var(--gpw-brass); background: rgba(200, 137, 74, 0.14); }

.gpw-err { font-size: var(--gpw-micro); color: var(--gpw-brass); min-height: 0; }

/* The honeypot. Off-screen rather than display:none, so a bot that reads the computed style
   still fills it in; never shown to anybody and never announced.
   NO overflow:hidden and no 1px box: that combination made it a CLIPPING ancestor of real text,
   which is exactly what the A12 check looks for, and the gate cannot tell off-screen text from a
   label cut in half. Being nine thousand pixels to the left is enough to hide it; clipping it as
   well only confused the one instrument that would catch the real bug. */
.gpw-trap { position: absolute; left: -9999px; top: 0; }

.gpw-desk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.2rem; }

.gpw-desk-note { flex: 1 1 14rem; font-size: var(--gpw-micro); line-height: 1.5; color: var(--gpw-muted); }

.gpw-reply {
  margin-top: 1.1rem;
  padding: 0.85rem 0.95rem;
  font-size: var(--gpw-small);
  line-height: 1.55;
  background: var(--gpw-sage-wash);
  border-left: 0.3rem solid var(--gpw-sage);
  color: var(--gpw-ink);
}

.gpw-reply.is-wrong { background: var(--gpw-brass-wash); border-left-color: var(--gpw-brass); }
.gpw-reply[hidden] { display: none; }
.gpw-ref { font-family: var(--gpw-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--gpw-brass); }

/* --- the mark, once, at a real size (A19). Not a 20px glyph in a header: the house stands
   at the foot of the walk at the size it was drawn to be read. */
.gpw-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.3rem 1.8rem;
  margin: var(--gpw-gap-xl) 0 0;
  padding-top: 1.8rem;
  border-top: 0.18rem solid var(--gpw-line);
}

.gpw-closing-mark { width: auto; height: 8.5rem; flex: 0 0 auto; }
.gpw-closing-words { flex: 1 1 16rem; min-width: 0; }

.gpw-closing-line {
  font-family: var(--gpw-display);
  font-size: clamp(1.3rem, 3.3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--gpw-ink);
}

.gpw-closing-sub { margin-top: 0.5rem; font-size: var(--gpw-small); color: var(--gpw-muted); }

/* --------------------------------------------------- the measuring tool */

.gpw-tool {
  margin: 1.7rem 0 0.4rem;
  background: var(--gpw-panel);
  box-shadow: var(--gpw-shadow-soft);
}

.gpw-tool-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.05rem;
  background: linear-gradient(90deg, rgba(200, 137, 74, 0.16), rgba(34, 29, 22, 0));
}

.gpw-tool-scroll { overflow-x: auto; }

/* On a phone the walk is read as stacked rooms, not as a table that has to be
   dragged sideways: the answer column is the whole point of the tool, so it
   must never be the part that falls off the screen. */
.gpw-table { width: 100%; display: block; font-variant-numeric: tabular-nums; }

.gpw-table-cap {
  caption-side: top;
  display: block;
  padding: 0 1.05rem 0.9rem;
  text-align: left;
  font-size: var(--gpw-micro);
  line-height: 1.5;
  color: var(--gpw-muted);
}

.gpw-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gpw-table tbody, .gpw-table tfoot { display: block; }

.gpw-table tbody tr, .gpw-table tfoot tr {
  display: block;
  padding: 0.75rem 1.05rem 0.9rem;
}

.gpw-table tbody tr + tr, .gpw-table tfoot tr { box-shadow: inset 0 0.12rem 0 var(--gpw-line); }
.gpw-table tfoot tr { box-shadow: inset 0 0.12rem 0 var(--gpw-line-warm); }

.gpw-table tbody th, .gpw-table tfoot th {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  text-align: left;
}

.gpw-table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.2rem 0;
  text-align: left;
}

.gpw-table td::before {
  content: attr(data-k);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gpw-muted);
}

.gpw-table th, .gpw-table td { vertical-align: middle; }
.gpw-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gpw-muted);
  white-space: nowrap;
}

.gpw-table tbody th {
  font-weight: 700;
  color: var(--gpw-ink);
}

.gpw-tr { transition: background-color 180ms var(--gpw-ease); }
.gpw-tr:hover { background: rgba(242, 235, 223, 0.035); }

.gpw-input {
  width: 5.4rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  background: rgba(22, 19, 15, 0.72);
  color: var(--gpw-ink);
  border: 0.08rem solid var(--gpw-line);
  font-size: var(--gpw-small);
  font-variant-numeric: tabular-nums;
  transition: border-color 170ms var(--gpw-ease), background-color 170ms var(--gpw-ease),
    box-shadow 170ms var(--gpw-ease);
}

.gpw-input:hover { border-color: var(--gpw-line-warm); }

/* The halo alone was the whole indicator here, and `outline: none` threw away the one thing
   that survives forced-colors mode - where box-shadow is dropped and the cell would focus with
   no visible sign at all. The outline is back; the halo stays because it is what makes the
   focused cell obvious among ten identical ones. */
.gpw-input:focus-visible {
  outline: 0.17rem solid var(--gpw-ring);
  outline-offset: 0.1rem;
  border-color: var(--gpw-brass);
  box-shadow: 0 0 0 0.2rem var(--gpw-ring-halo);
}

.gpw-input.is-wrong { border-color: var(--gpw-brass); background: rgba(200, 137, 74, 0.14); }

.gpw-out {
  display: inline-block;
  min-width: 3.6rem;
  font-size: var(--gpw-small);
  font-weight: 700;
  color: var(--gpw-ink);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--gpw-ease);
}

.gpw-out-soft { font-weight: 500; color: var(--gpw-muted); }

.gpw-out-big { font-family: var(--gpw-display); font-size: 1.3rem; font-weight: 400; color: var(--gpw-brass); }
.gpw-out-big.gpw-out-soft { color: var(--gpw-sage); }

.gpw-total th { color: var(--gpw-ink); }
.gpw-total-note { font-size: var(--gpw-micro); color: var(--gpw-muted); }
.gpw-total-note::before { content: none; }
.gpw-total-note { justify-content: flex-start; }

.gpw-tool-foot {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1.05rem 1.15rem;
}

.gpw-tool-note, .gpw-noscript {
  font-size: var(--gpw-micro);
  line-height: 1.5;
  color: var(--gpw-muted);
  max-width: 34rem;
}

.gpw-noscript { display: block; padding: 0 1.05rem 1.15rem; }

.gpw-btn {
  justify-self: start;
  min-height: 3rem;
  padding: 0.7rem 1.15rem;
  background: var(--gpw-brass);
  color: var(--gpw-bg);
  border: none;
  font-size: var(--gpw-small);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0.16rem 0 rgba(0, 0, 0, 0.36);
  transition: background-color 180ms var(--gpw-ease), transform 180ms var(--gpw-ease),
    box-shadow 180ms var(--gpw-ease);
}

.gpw-btn:hover { background: var(--gpw-ink); transform: translateY(-0.1rem); box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.42); }
.gpw-btn:active { transform: translateY(0.04rem); box-shadow: 0 0.06rem 0 rgba(0, 0, 0, 0.36); }

.gpw-btn-ghost {
  background: rgba(242, 235, 223, 0.07);
  color: var(--gpw-ink);
  box-shadow: inset 0 0 0 0.08rem var(--gpw-line);
}

.gpw-btn-ghost:hover { background: var(--gpw-brass-wash); color: var(--gpw-ink); }

.gpw-row-drop {
  min-height: 2.6rem;
  padding: 0.35rem 0.7rem;
  background: rgba(242, 235, 223, 0.06);
  color: var(--gpw-muted);
  border: none;
  font-size: var(--gpw-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 170ms var(--gpw-ease), color 170ms var(--gpw-ease);
}

.gpw-row-drop:hover { background: var(--gpw-brass-wash); color: var(--gpw-ink); }

/* ------------------------------------------------------- links and focus */

.gpw-link, .gpw-mail, .gpw-foot-link {
  color: var(--gpw-brass);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  transition: color 170ms var(--gpw-ease), text-decoration-color 170ms var(--gpw-ease);
}

.gpw-link:hover, .gpw-mail:hover, .gpw-foot-link:hover { color: var(--gpw-ink); }

.gpw-mail-big {
  font-family: var(--gpw-display);
  font-size: clamp(1.25rem, 3.4vw, 1.85rem);
  letter-spacing: 0.002em;
  word-break: break-word;
}

:focus-visible {
  outline: 0.19rem solid var(--gpw-ring);
  outline-offset: 0.18rem;
}

.gpw-house:focus-visible, .gpw-room:focus-visible {
  outline-offset: 0.1rem;
  background: var(--gpw-sage-wash);
}

/* --------------------------------------------------------------- footer */

.gpw-foot {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  padding: 2.4rem 1.1rem 3rem;
  background: var(--gpw-panel);
  box-shadow: inset 0 0.2rem 0 var(--gpw-line-warm);
}

.gpw-foot-in { width: 100%; max-width: 74rem; margin: 0 auto; }

.gpw-foot-line {
  font-family: var(--gpw-display);
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--gpw-ink);
  max-width: 28rem;
  margin-bottom: 1.4rem;
}

.gpw-addr {
  font-size: var(--gpw-small);
  line-height: 1.75;
  color: var(--gpw-ink);
  margin-bottom: 1rem;
}

.gpw-reg {
  font-size: var(--gpw-micro);
  line-height: 1.7;
  color: var(--gpw-muted);
}

/* --------------------------------------------------------------- motion */

@keyframes gpw-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes gpw-arrive {
  from { opacity: 0.34; transform: translate3d(0, 0.85rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes gpw-rule-out {
  from { transform: scaleX(0.04); }
  to { transform: scaleX(1); }
}

@keyframes gpw-threshold-settle {
  from { opacity: 0; transform: translate3d(0, 1.2rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes gpw-mark-breathe {
  0%, 100% { r: 6; opacity: 0.85; }
  50% { r: 8.5; opacity: 1; }
}

/* The pictures DRIFT inside their own frames as the page is walked - the only motion on this
   site, and the one assigned to it. transform only, never layout; the frames are overflow:
   clip so nothing can escape sideways, which a static overflow check cannot see anyway
   (A18: measure it WHILE SCROLLING, which the shooter does). */
@keyframes gpw-drift {
  from { transform: scale(1.085) translate3d(0, -2.6%, 0); }
  to   { transform: scale(1.085) translate3d(0, 2.6%, 0); }
}

@keyframes gpw-drift-across {
  from { transform: scale(1.07) translate3d(1.6%, -1.1%, 0); }
  to   { transform: scale(1.07) translate3d(-1.6%, 1.1%, 0); }
}

@keyframes gpw-stand-up {
  from { opacity: 0.18; transform: translate3d(0, 1.6rem, 0) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes gpw-standing-swap {
  from { opacity: 0.25; transform: translate3d(-0.3rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .gpw-plan .gpw-d { animation: gpw-draw 980ms var(--gpw-ease) both; }
  .gpw-d1 { animation-delay: 60ms; }
  .gpw-d2 { animation-delay: 150ms; }
  .gpw-d3 { animation-delay: 240ms; }
  .gpw-d4 { animation-delay: 300ms; }
  .gpw-d5 { animation-delay: 390ms; }
  .gpw-d6 { animation-delay: 480ms; }
  .gpw-d7 { animation-delay: 560ms; }
  .gpw-d8 { animation-delay: 640ms; }
  .gpw-d9 { animation-delay: 700ms; }
  .gpw-d10 { animation-delay: 760ms; }
  .gpw-d11 { animation-delay: 800ms; }
  .gpw-d12 { animation-delay: 840ms; }
  .gpw-d13 { animation-delay: 880ms; }
  .gpw-d14 { animation-delay: 920ms; }
  .gpw-d15 { animation-delay: 980ms; }
  .gpw-d16 { animation-delay: 1020ms; }
  .gpw-d17 { animation-delay: 1060ms; }
  .gpw-d18 { animation-delay: 1100ms; }
  .gpw-d19 { animation-delay: 1140ms; }

  .gpw-threshold-words { animation: gpw-threshold-settle 720ms var(--gpw-ease) both; }
  .gpw-threshold .gpw-eyebrow { animation: gpw-threshold-settle 560ms var(--gpw-ease) both; }
  .gpw-threshold .gpw-h1 { animation: gpw-threshold-settle 640ms 90ms var(--gpw-ease) both; }
  .gpw-pl-here { animation: gpw-mark-breathe 3.6s ease-in-out 1.4s infinite; }
  .gpw-standing-v.is-swapping { animation: gpw-standing-swap 320ms var(--gpw-ease) both; }

  @supports (animation-timeline: view()) {
    .gpw-art img,
    .gpw-pane img {
      animation: gpw-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    .gpw-hero-pic img {
      animation: gpw-drift-across linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    .gpw-closing-mark {
      animation: gpw-stand-up linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 34%;
    }
  }

  /* the walk reveals itself on the scroll timeline - no observers anywhere */
  @supports (animation-timeline: view()) {
    .gpw-step {
      animation: gpw-arrive linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }

    .gpw-step .gpw-rule {
      animation: gpw-rule-out linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 22%;
    }
  }

  @supports (animation-timeline: scroll()) {
    .gpw-progress-bar {
      width: 100%;
      transform: scaleX(0);
      animation: gpw-progress-walk linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes gpw-progress-walk {
  from { transform: scaleX(0.015); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The narrow crop is a different picture, and it gets its own scrim geometry. Measured, not
   assumed: at 390 the hero headline read 1.27:1 with the wide-screen ramp. */
@media (max-width: 51.99rem) {
  .gpw-hero-pic::after {
    background: linear-gradient(1deg, rgba(22, 19, 15, 0.97) 0%, rgba(22, 19, 15, 0.93) 38%,
      rgba(22, 19, 15, 0.66) 58%, rgba(22, 19, 15, 0.22) 86%);
  }

  .gpw-pane--scrim::after {
    background: linear-gradient(4deg, rgba(14, 12, 9, 0.98) 0%, rgba(14, 12, 9, 0.96) 52%,
      rgba(14, 12, 9, 0.7) 70%, rgba(14, 12, 9, 0) 90%);
  }

  .gpw-pane--sky { min-height: 27rem; }
  .gpw-pane--sky img { object-position: 76% 42%; }

  /* The two NOTE lines are the only things still short of 4.5:1 on the narrow crop, and both
     for the same reason: they are the quiet, translucent member of their pair, sitting lower
     in the frame where each ground is weakest. They go to full strength here - a note that
     cannot be read is not restrained, it is missing. */
  .gpw-pane--sky .gpw-pane-note { color: #16130F; }

  .gpw-pane--sky::before {
    background: linear-gradient(160deg, rgba(240, 231, 214, 0.93) 0%, rgba(240, 231, 214, 0.9) 42%,
      rgba(240, 231, 214, 0.46) 62%, rgba(240, 231, 214, 0) 82%);
  }
}

/* ----------------------------------------------------------- wider rooms */

@media (min-width: 36rem) {
  .gpw-frame { padding: 0 1.6rem; }
  .gpw-foot { padding: 2.8rem 1.6rem 3.4rem; }
  .gpw-tool-foot { grid-template-columns: auto 1fr; align-items: center; gap: 1.2rem; }
  .gpw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gpw-dl { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.2rem 0.2rem; }
  .gpw-dl dt { padding: 0.85rem 0.9rem; }
  .gpw-dl dd { padding: 0.85rem 0.9rem; }
  .gpw-dl dd + dt { margin-top: 0; }

  /* room enough for the real thing: the stacked rooms go back to being a table */
  .gpw-table { display: table; }
  .gpw-table-cap { display: table-caption; }
  .gpw-table tbody tr + tr, .gpw-table tfoot tr { box-shadow: none; }
  .gpw-table thead { position: static; width: auto; height: auto; clip-path: none; display: table-header-group; }
  .gpw-table tbody { display: table-row-group; }
  .gpw-table tfoot { display: table-footer-group; }
  .gpw-table tbody tr, .gpw-table tfoot tr { display: table-row; padding: 0; box-shadow: none; }
  .gpw-table th, .gpw-table td { display: table-cell; padding: 0.5rem 0.6rem; }
  .gpw-table td::before { content: none; }
  .gpw-table thead th { border-bottom: 0.14rem solid var(--gpw-line); }
  .gpw-table tbody th {
    font-size: var(--gpw-small);
    font-weight: 500;
    min-width: 8.5rem;
    margin-bottom: 0;
  }
  .gpw-total th, .gpw-total td {
    border-top: 0.14rem solid var(--gpw-line-warm);
    padding-top: 0.8rem;
    padding-bottom: 0.9rem;
  }
  .gpw-total th { font-size: var(--gpw-small); font-weight: 700; }
}

@media (min-width: 52rem) {
  .gpw-threshold-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; }
  .gpw-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
  .gpw-sec { padding: var(--gpw-gap-xl) 0; }
}

/* No side rail at any width. What was here was the A16 shape in its purest form: at 62rem the
   tile strip became a VERTICAL STACK of five identical rows each carrying 00/01/02/03/04. The
   street is horizontal at every width and simply has more room to stand in. */
@media (min-width: 62rem) {
  .gpw-frame { padding: 0 2.4rem; }
  .gpw-mast { padding: 2.4rem 0 1.4rem; }
  .gpw-street { gap: 0.36rem; margin-bottom: 1.9rem; }
  .gpw-house { padding: 0.65rem 1.15rem 0.7rem; }
  .gpw-house-name { font-size: 1.22rem; }
  .gpw-street > :nth-child(1) .gpw-house { min-height: 5.3rem; }
  .gpw-street > :nth-child(2) .gpw-house { min-height: 3.9rem; }
  .gpw-street > :nth-child(3) .gpw-house { min-height: 4.7rem; }
  .gpw-street > :nth-child(4) .gpw-house { min-height: 3.5rem; }
  .gpw-street > :nth-child(5) .gpw-house { min-height: 4.3rem; }
  .gpw-standing { padding: 0.72rem 1.15rem 0.8rem; }
  .gpw-hero-words { min-height: 30rem; padding-top: 11rem; max-width: 38rem; }
  .gpw-pane--scrim { min-height: 30rem; }
  .gpw-pane--sky { min-height: 33rem; }
  .gpw-pane-words { max-width: 27rem; }
  .gpw-pane--scrim .gpw-pane-words { padding: 0 2.2rem 2.8rem 3rem; }
  .gpw-pane--sky .gpw-pane-words { padding: 3.9rem 2.2rem 0 3rem; max-width: 24rem; }
  .gpw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1.1rem; }
  .gpw-field--wide { grid-column: 1 / -1; }
  .gpw-desk { padding: 1.6rem 1.6rem 1.7rem; }
  .gpw-walk { padding-top: 0.4rem; }
}

@media (min-width: 78rem) {
  .gpw-hero-words { min-height: 33rem; }
  .gpw-closing-mark { height: 11rem; }
}

/* A visitor who prefers light pages still gets a dark house: the painted
   ground does not change, only the warmth of the mid tones lifts slightly. */


@media print {
  .gpw-body::before, .gpw-street, .gpw-standing, .gpw-progress, .gpw-desk { display: none; }
  .gpw-body { background: #ffffff; color: #000000; }
  .gpw-frame { display: block; max-width: none; padding: 0; }
  .gpw-figure, .gpw-tool { box-shadow: none; }
  .gpw-sec { padding: 1rem 0; }
}


/* gcf:theme-pinned */
:root { color-scheme: dark; }