/* 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-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);

  --gpw-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --gpw-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --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-rail-w: 16.5rem;
  --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;
  letter-spacing: 0.004em;
  overflow-x: hidden;
}

/* paper grain: two offset dot fields, fixed so the texture does not travel
   with the content, and transparent to the pointer. */
.gpw-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(242, 235, 223, 0.035) 1px, rgba(0, 0, 0, 0) 1px),
    radial-gradient(rgba(200, 137, 74, 0.03) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 4px 5px;
}

.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;
}

/* ---------------------------------------------------------------- the rail */

.gpw-rail {
  position: relative;
  padding: 1.1rem 0 0.4rem;
}

.gpw-standing {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.7rem 0.9rem 0.75rem;
  background: var(--gpw-panel);
  box-shadow: var(--gpw-shadow-tile);
}

.gpw-standing-k {
  font-size: 0.7rem;
  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.32rem;
  line-height: 1.16;
  color: var(--gpw-ink);
  transition: color 240ms var(--gpw-ease), opacity 240ms var(--gpw-ease);
}

.gpw-progress {
  position: relative;
  height: 0.28rem;
  margin: 0.4rem 0 0.9rem;
  background: var(--gpw-raise);
  overflow: hidden;
}

.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;
}

.gpw-tiles {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.45rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

/* the list item is the flex item, not the anchor: without this the tiles are
   squeezed and their labels break onto three lines in the phone strip. */
.gpw-tiles > li {
  display: flex;
  flex: 0 0 auto;
  max-width: 15rem;
}

.gpw-rooms-k {
  margin: 1rem 0 0.5rem;
  font-size: var(--gpw-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gpw-muted);
}

.gpw-tile,
.gpw-room {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  min-height: 3.1rem;
  text-decoration: none;
  background: var(--gpw-panel);
  border-left: 0.25rem solid rgba(200, 137, 74, 0);
  box-shadow: var(--gpw-shadow-tile);
  transition: background-color 190ms var(--gpw-ease), border-color 190ms var(--gpw-ease),
    transform 190ms var(--gpw-ease), color 190ms var(--gpw-ease);
}

.gpw-tile {
  flex: 0 0 auto;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  max-width: 14rem;
}

.gpw-tile-n {
  font-family: var(--gpw-display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gpw-brass);
}

.gpw-tile-t {
  font-size: var(--gpw-small);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--gpw-ink-soft);
}

.gpw-room {
  flex: 0 0 auto;
  padding: 0.6rem 0.9rem;
  font-size: var(--gpw-small);
  font-weight: 500;
  color: var(--gpw-ink-soft);
}

.gpw-tile:hover,
.gpw-room:hover {
  background: var(--gpw-brass-wash);
  border-left-color: var(--gpw-brass);
  transform: translateY(-0.09rem);
}

.gpw-tile:hover .gpw-tile-t,
.gpw-room:hover { color: var(--gpw-ink); }

.gpw-tile.is-here,
.gpw-room.is-here {
  background: linear-gradient(90deg, rgba(200, 137, 74, 0.2), var(--gpw-panel) 72%);
  border-left-color: var(--gpw-brass);
}

.gpw-tile.is-here .gpw-tile-t { color: var(--gpw-ink); }
.gpw-room.is-here { color: var(--gpw-ink); font-weight: 700; }

.gpw-rooms .gpw-room.is-here { background: linear-gradient(90deg, var(--gpw-sage-wash), var(--gpw-panel) 68%); border-left-color: var(--gpw-sage); }

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

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

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

.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: 400;
  font-size: clamp(2.15rem, 7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--gpw-ink);
  text-wrap: balance;
}

.gpw-h2 {
  font-family: var(--gpw-display);
  font-weight: 400;
  font-size: clamp(1.62rem, 3.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin-bottom: 0.9rem;
  color: var(--gpw-ink);
  text-wrap: pretty;
}

.gpw-h3 {
  font-family: var(--gpw-body);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gpw-ink);
}

.gpw-num {
  font-family: var(--gpw-display);
  font-size: 1.5rem;
  line-height: 1;
  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 {
  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 */

.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; }

/* --------------------------------------------------- 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); }

.gpw-input:focus-visible {
  outline: none;
  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-tile: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; }
}

@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; }

  /* 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; }
}

/* ----------------------------------------------------------- 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; }
}

/* the permanent rail: at this width the walk gets a side rail that stays put */
@media (min-width: 62rem) {
  .gpw-frame {
    display: grid;
    grid-template-columns: var(--gpw-rail-w) minmax(0, 1fr);
    gap: 3.2rem;
    align-items: start;
    padding: 0 2rem;
  }

  .gpw-rail {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 2.6rem 0 1.6rem;
  }

  .gpw-tiles {
    flex-direction: column;
    gap: 0.3rem;
    overflow: visible;
    padding-bottom: 0;
  }

  .gpw-tiles > li { max-width: none; width: 100%; }
  .gpw-tile, .gpw-room { max-width: none; width: 100%; }

  .gpw-progress {
    position: absolute;
    left: -1.1rem;
    top: 2.6rem;
    bottom: 1.6rem;
    width: 0.28rem;
    height: auto;
    margin: 0;
  }

  .gpw-progress-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--gpw-brass), var(--gpw-sage));
    transform: scaleY(var(--gpw-walked, 0));
    transform-origin: center top;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .gpw-progress-bar {
        transform: scaleY(0);
        animation-name: gpw-progress-walk-v;
      }
    }
  }

  .gpw-walk { padding-top: 2.6rem; }
  .gpw-sec + .gpw-sec { border-top-width: 0.16rem; }
}

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

@media (min-width: 78rem) {
  .gpw-frame { gap: 4rem; --gpw-rail-w: 17.5rem; }
  .gpw-h1 { font-size: 3.5rem; }
}

/* 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-rail, .gpw-progress { 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; }