/* 24 St Stephens Gardens. Drawing-office look: paper, ink, ruled frame,
   mono labels and one red-orange accent. */

:root {
  --paper: #f5f5ed;
  --ink: #282828;
  --mid: #72726f;
  --rule: #b3b3af;
  --accent: #fa3600;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut: 8px;
  --bar: 56px;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* The ruled frame round the page, and the line under the nav */
.frame {
  position: fixed; inset: var(--gut); border: 1px solid var(--rule);
  pointer-events: none; z-index: 30;
}
.frame::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bar) - var(--gut));
  border-top: 1px solid var(--rule);
}

.nav {
  position: fixed; top: var(--gut); left: var(--gut); right: var(--gut); height: calc(var(--bar) - var(--gut));
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  background: var(--paper); z-index: 20;
  font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.brand { text-decoration: none; }
.nav nav { display: flex; gap: 22px; align-items: center; }
.nav-link { text-decoration: none; }
.nav-link.accent { color: var(--accent); }
.nav-link.quiet { color: var(--mid); }
.nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── The story: a sticky stage with the sketch, chapters scrolling past ── */
.story { position: relative; --p: 0; }
.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  padding: calc(var(--bar) + 24px) 32px 40px;
}
.sheet {
  position: absolute; left: 50%; top: calc(var(--bar) + 20px); bottom: 64px;
  width: min(86vw, calc((100vh - var(--bar) - 84px) * 0.97));
  transform: translateX(calc(-50% - var(--p) * 22vw)) scale(calc(1 - var(--p) * 0.06));
  transform-origin: 50% 60%;
}
.sheet svg { width: 100%; height: 100%; display: block; overflow: visible; }

.house path { stroke: var(--ink); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.house .thin { stroke-width: 1; }
.house .heavy { stroke-width: 2.2; }
.house .faint { stroke: var(--rule); }
.house .below { stroke: var(--mid); }
.house .hatch { stroke: var(--rule); }

/* Floors the story lights up */
.house .hatch-line { stroke: var(--accent); stroke-width: 1.6; }
.house .zone { fill: url(#hatch); opacity: 0; transition: opacity .7s ease, fill .7s ease; }
.house .stair { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; opacity: 0; transition: opacity .7s ease; vector-effect: non-scaling-stroke; }
.house .tag { opacity: 0; transition: opacity .6s ease; }
.house .tag line { stroke: var(--accent); stroke-width: 1.5; }
.house .tag text { fill: var(--accent); font: 22px var(--mono); letter-spacing: .1em; text-anchor: end; }

.story[data-ch="1"] .zone[data-zone="basement"],
.story[data-ch="2"] .zone[data-zone="basement"],
.story[data-ch="3"] .zone[data-zone="ground"],
.story[data-ch="4"] .zone,
.story[data-ch="5"] .zone { opacity: .55; }
.story[data-ch="2"] .zone[data-zone="basement"] { opacity: .9; }
.story[data-ch="3"] .zone[data-zone="basement"] { opacity: .18; }
.story[data-ch="5"] .zone { opacity: .22; }
.story[data-ch="1"] .tag[data-zone="basement"],
.story[data-ch="2"] .tag[data-zone="basement"],
.story[data-ch="3"] .tag[data-zone="ground"],
.story[data-ch="4"] .tag,
.story[data-ch="5"] .tag { opacity: 1; }
.story[data-ch="4"] .stair,
.story[data-ch="5"] .stair { opacity: 1; }

/* Hero copy sits over the stage and fades as the sketch slides aside */
.hero-copy {
  position: absolute; left: 32px; top: calc(var(--bar) + 28px); max-width: 340px;
  opacity: calc(1 - var(--p) * 2.2); z-index: 2;
}
.eyebrow { font: 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mid); margin: 0 0 10px; }
.eyebrow b { color: var(--accent); font-weight: 400; }
h1, h2 { font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; margin: 0 0 22px; }
h1 { font-size: clamp(30px, 3.4vw, 50px); }
h2 { font-size: clamp(30px, 3.6vw, 54px); padding-bottom: 18px; border-bottom: 1px solid var(--ink); }

.spec { margin: 0; font: 11.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.spec div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.spec dt { color: var(--mid); }
.spec dt::after { content: ":"; }
.spec dd { margin: 0; }
.spec .tbc { color: var(--rule); }

.hero-meter {
  position: absolute; right: 32px; bottom: 30px; display: flex; gap: 12px; align-items: center;
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mid);
  opacity: calc(1 - var(--p) * 3);
}
.meter-bar { width: 120px; height: 1px; background: var(--rule); position: relative; }
.meter-bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--accent); }
.meter-num { color: var(--accent); min-width: 4ch; }
.scroll-cue {
  position: absolute; left: 32px; bottom: 30px; margin: 0;
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mid);
  opacity: 0; transition: opacity .8s ease;
}
.drawn .scroll-cue { opacity: calc(1 - var(--p) * 3); }
.scroll-cue span { color: var(--accent); display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* Chapters run down the right-hand side */
.track { position: relative; margin-top: -100vh; z-index: 3; pointer-events: none; }
.hero-space { height: 100vh; }
.chapter {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  margin-left: 58%; padding: 80px 56px 80px 0; max-width: 620px; pointer-events: auto;
  opacity: .15; transition: opacity .6s ease;
}
.chapter.on { opacity: 1; }
.chapter > p:not(.eyebrow) { font-size: 17px; color: #4a4a48; max-width: 44ch; margin: 0 0 26px; }
.pill {
  align-self: flex-start; display: inline-flex; gap: 10px; padding: 12px 20px; border: 1px solid var(--accent);
  border-radius: 999px; color: var(--accent); text-decoration: none;
  font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.pill:hover { background: var(--accent); color: var(--paper); }

.foot {
  display: flex; justify-content: space-between; padding: 28px 32px 34px; border-top: 1px solid var(--rule);
  margin: 0 var(--gut) var(--gut); font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mid);
}

/* Phones: the sketch rides along the top, chapters pass underneath */
@media (max-width: 800px) {
  .stage { padding: calc(var(--bar) + 16px) 24px 24px; }
  .sheet {
    width: min(92vw, 62vh); top: calc(var(--bar) + 150px); bottom: auto; aspect-ratio: 1260 / 1300;
    transform: translateX(-50%) translateY(calc(var(--p) * -120px)) scale(calc(1 - var(--p) * 0.12));
  }
  .hero-copy { left: 24px; right: 24px; top: calc(var(--bar) + 18px); }
  .hero-copy .spec { display: none; }
  .chapter {
    margin: 0 16px; padding: 0; max-width: none; min-height: 100vh; justify-content: flex-end; padding-bottom: 36px;
  }
  .chapter > * { background: var(--paper); }
  .chapter .eyebrow, .chapter h2, .chapter > p, .chapter .spec { margin-bottom: 0; padding: 0 4px 12px; }
  .hero-meter { right: 24px; bottom: 20px; }
  .scroll-cue { left: 24px; bottom: 20px; }
  .nav .brand { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
  .scroll-cue span { animation: none; }
}

/* Plain pages (guide, owners) until they're built */
.plain { min-height: 100vh; padding: calc(var(--bar) + 12vh) 32px 80px; max-width: 760px; }
.plain > p:not(.eyebrow) { font-size: 17px; color: #4a4a48; max-width: 52ch; }

/* Small fixes: labels stay legible over the drawing; the phone nav fits on one line */
.house .tag text { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
.house .soft { stroke: var(--mid); }
.nav-link { white-space: nowrap; }
.brand .short { display: none; }
@media (max-width: 800px) {
  .brand .long { display: none; }
  .brand .short { display: inline; }
  .nav nav { gap: 14px; }
  .meter-label, .meter-bar { display: none; }
  .house .tag text { font-size: 34px; }
}
@media (max-width: 400px) {
  .nav { padding: 0 14px; }
  .nav nav { gap: 11px; }
}

/* ── Guest Guide: contents down the left, the guide on the right ── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide-page { scroll-behavior: smooth; }
html:has(.guide-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.guide-page) { scroll-behavior: auto; } }

.g-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); padding: var(--bar) var(--gut) 0; }
.g-index {
  position: sticky; top: var(--bar); align-self: start; height: calc(100vh - var(--bar) - var(--gut));
  overflow-y: auto; padding: 28px 22px 40px 20px; border-right: 1px solid var(--rule);
}
.g-index-head { display: flex; justify-content: space-between; align-items: baseline; }
.g-close { display: none; }
.g-search input {
  width: 100%; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink); font: 12px/1.2 var(--mono); letter-spacing: .04em;
}
.g-search input::placeholder { color: var(--mid); }
.g-search input:focus { outline: none; border-color: var(--accent); }
.g-group { margin: 18px 0 4px; font: 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mid); }
#gToc a {
  display: flex; gap: 12px; padding: 6px 0; text-decoration: none;
  font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
#gToc a b { color: var(--rule); font-weight: 400; }
#gToc a:hover b, #gToc a.on, #gToc a.on b { color: var(--accent); }
#gToc a.on { position: relative; }
#gToc a.on::before { content: ""; position: absolute; left: -20px; top: 5px; bottom: 5px; width: 2px; background: var(--accent); }
#gToc .g-sos b { color: var(--accent); }
#gToc [hidden] { display: none; }
.g-none { font: 12px/1.5 var(--mono); color: var(--mid); }
.g-bar { display: none; }

.g-main { padding: 0 56px 0; max-width: 860px; min-width: 0; }
.g-hero { padding: 10vh 0 64px; }
.g-hero h1 { font-size: clamp(40px, 5.4vw, 78px); margin-bottom: 28px; }
.g-hero > .spec { max-width: 440px; }
.g-hero .spec a, .g-sec .spec a { color: var(--accent); text-decoration: none; }
.g-quick-label { margin-top: 48px; }
.g-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-quick a {
  display: grid; gap: 6px; padding: 16px 16px 18px; border: 1px solid var(--rule); text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.g-quick b { font: 11px/1 var(--mono); color: var(--accent); font-weight: 400; letter-spacing: .08em; }
.g-quick span { font-size: 24px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; }
.g-quick i { font: 10.5px/1.3 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--mid); }
.g-quick a:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.g-quick a:hover b, .g-quick a:hover i { color: var(--paper); }

.g-sec { padding: 64px 0 56px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--bar) + 8px); }
.g-sec h2 { font-size: clamp(30px, 3.2vw, 46px); }
.g-sec h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 34px 0 10px;
  font: 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; font-weight: 400;
}
.g-sec h3 span {
  font-size: 10px; letter-spacing: .1em; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 8px 3px;
}
.g-sec p { font-size: 17px; color: #4a4a48; max-width: 60ch; margin: 0 0 16px; }
.g-sec .spec { max-width: 620px; margin: 4px 0 20px; }
.g-sec .spec div { grid-template-columns: 110px 1fr; }
.g-sec .spec dd { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }
.g-sec .spec.g-keyed dt { color: var(--accent); }
.g-sec a { text-underline-offset: 3px; }
.g-link { color: var(--accent); text-decoration: none; font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

.g-steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; max-width: 620px; }
.g-steps li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-top: 1px solid var(--rule); font-size: 16px; }
.g-steps li:last-child { border-bottom: 1px solid var(--rule); }
.g-steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font: 12px/1 var(--mono); color: var(--accent); letter-spacing: .06em;
}
.g-list, .g-check { list-style: none; margin: 0 0 18px; padding: 0; max-width: 620px; }
.g-list li, .g-check li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--rule); font-size: 16px; }
.g-list li:last-child, .g-check li:last-child { border-bottom: 1px solid var(--rule); }
.g-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.g-check li::before { content: ""; position: absolute; left: 0; top: 14px; width: 13px; height: 13px; border: 1px solid var(--ink); }

.g-note, .g-warn { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; font-size: 16px !important; }
.g-warn { background: rgba(250, 54, 0, .07); padding: 10px 14px; }
.g-note b, .g-warn b { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 400; margin-right: 6px; }
.g-model { font: 11px/1.5 var(--mono) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--mid) !important; }
.g-model a { color: var(--accent); text-decoration: none; }

.g-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.g-card { border: 1px solid var(--rule); padding: 18px 20px 6px; }
.g-card h3 { margin-top: 0; }
.g-card .spec { margin-bottom: 12px; }
.g-card .spec div { grid-template-columns: 76px 1fr; }
.g-card p:not(.eyebrow) { font-size: 15px; }
.g-card code, .g-sec code { font: 14px/1 var(--mono); color: var(--ink); letter-spacing: .04em; }
.g-copy {
  margin-left: 8px; padding: 4px 9px; border: 1px solid var(--accent); border-radius: 999px; background: none;
  color: var(--accent); font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
}
.g-copy:hover { background: var(--accent); color: var(--paper); }

.g-split { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
.g-split > div > h3:first-child { margin-top: 0; }
.g-split + h3, .g-split + .g-box { margin-top: 34px; }
.g-sec figure { margin: 0; }
.g-sec figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.g-sec figcaption { padding-top: 8px; font: 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mid); }
.g-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 18px; max-width: 620px; }
.g-photos img { aspect-ratio: 4 / 5; object-fit: cover; }

.g-box { border: 1px solid var(--ink); padding: 20px 22px 6px; margin: 28px 0; max-width: 620px; }
.g-box .eyebrow b { margin-right: 4px; }
.g-box p { font-size: 15px; }

.g-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; padding: 0; }
.g-tags li { padding: 7px 12px 6px; border: 1px solid var(--rule); border-radius: 999px; font-size: 14px; line-height: 1.2; }
.g-acc { border-bottom: 1px solid var(--rule); margin-top: 20px; }
.g-acc details { border-top: 1px solid var(--rule); }
.g-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 0;
  font: 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.g-acc summary::-webkit-details-marker { display: none; }
.g-acc summary span { color: var(--mid); font-size: 10.5px; }
.g-acc summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 18px; line-height: 1; }
.g-acc details[open] summary::after { content: "−"; }
.g-acc summary:hover { color: var(--accent); }
.g-sub { margin-top: 6px; }

.g-sos-sec h2 { color: var(--accent); border-bottom-color: var(--accent); }
.g-big dd { font-size: 15px !important; }
.g-big div { padding: 12px 0; }
.g-end { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; padding: 48px 0 64px; border-top: 1px solid var(--rule); }
.g-end p { margin: 0; font-size: 17px; color: #4a4a48; }

/* Guide on tablets and phones: contents become a sheet behind a bar */
@media (max-width: 900px) {
  .g-wrap { grid-template-columns: 1fr; padding-top: calc(var(--bar) + 44px); }
  .g-bar {
    position: fixed; top: var(--bar); left: var(--gut); right: var(--gut); height: 44px; z-index: 19;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px;
    background: var(--paper); border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); cursor: pointer;
    font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  }
  .g-bar-now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-bar-now b { color: var(--accent); font-weight: 400; }
  .g-bar-open { color: var(--accent); white-space: nowrap; }
  .g-open .g-bar-open span { display: inline-block; transform: rotate(180deg); }
  .g-index {
    position: fixed; top: calc(var(--bar) + 44px); left: var(--gut); right: var(--gut); bottom: var(--gut); height: auto;
    z-index: 25; background: var(--paper); border-right: 0; padding: 16px 20px 40px; align-self: stretch;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .g-open .g-index { opacity: 1; transform: none; pointer-events: auto; }
  .g-open { overflow: hidden; }
  .g-close {
    display: inline-block; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent);
    font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  }
  #gToc { columns: 2; column-gap: 24px; }
  #gToc a, .g-group { break-inside: avoid; }
  #gToc a { padding: 9px 0; }
  #gToc a.on::before { display: none; }
  .g-search input { font-size: 16px; }
  .g-main { padding: 0 16px; }
  .g-hero { padding: 40px 0 48px; }
}
@media (max-width: 600px) {
  #gToc { columns: 1; }
  .g-quick { grid-template-columns: repeat(2, 1fr); }
  .g-quick span { font-size: 20px; }
  .g-cards, .g-split { grid-template-columns: 1fr; }
  .g-split figure { max-width: 300px; }
  .g-sec { padding: 48px 0 40px; }
  .g-sec .spec div { grid-template-columns: 92px 1fr; }
  .g-sec p { font-size: 16px; }
}