/* ============================================================================
   base.css · tokens, reset, type scale
   ----------------------------------------------------------------------------
   LOAD ORDER MATTERS AND IS DELIBERATE:
     base.css  ->  desktop.css  ->  mobile.css
   mobile.css is last and is wrapped in (max-width: 899px), so on a phone it
   wins every collision without needing !important. Do not reorder these links
   in index.html without re-reading what breaks.
   ----------------------------------------------------------------------------
   Every colour below was sampled out of the actual renders of this building
   (see analysis/REFERENCE-TEARDOWN.md §3). None of them were chosen from a
   palette generator. The building is the source.
   ========================================================================== */

:root {
  /* --- ground & ink ------------------------------------------------------ */
  --bone:        #EDE6DC;   /* limestone, the primary light ground          */
  --bone-lift:   #F6F1E9;   /* raised bone, cards and insets                */
  --bone-sink:   #E1D8CB;   /* recessed bone, rules and wells               */
  --shadow:      #17120F;   /* deepest warm black, from render shadow       */
  --shadow-2:    #241D18;   /* lifted shadow, dark section grounds          */
  --umber:       #503C31;   /* structural brown                             */

  /* --- accents (all sampled) -------------------------------------------- */
  --twilight:    #3B5787;   /* night sky indigo                             */
  --twilight-2:  #566D9D;
  --rose:        #DDAFA6;   /* sunset rose on white plaster                 */
  --amber:       #C19A64;   /* interior lamplight                           */
  --amber-deep:  #8A6338;
  --sand:        #A98C6C;

  /* --- semantic ---------------------------------------------------------- */
  --ink:         var(--shadow);
  --ink-soft:    color-mix(in oklab, var(--shadow) 62%, var(--bone));
  --ink-faint:   color-mix(in oklab, var(--shadow) 57%, var(--bone));
  --ground:      var(--bone);
  --rule:        color-mix(in oklab, var(--umber) 22%, transparent);

  /* --- type -------------------------------------------------------------- */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid scale · clamp(min, preferred, max) ------------------------------ */
  --t-hero:   clamp(3.4rem, 11.5vw, 13rem);
  --t-xl:     clamp(2.6rem, 6.2vw, 6rem);
  --t-lg:     clamp(2rem, 4vw, 3.6rem);
  --t-md:     clamp(1.35rem, 2.1vw, 1.9rem);
  --t-body:   clamp(1rem, 1.08vw, 1.125rem);
  --t-small:  clamp(0.8rem, 0.86vw, 0.9rem);
  --t-label:  clamp(0.66rem, 0.72vw, 0.76rem);

  /* --- rhythm ------------------------------------------------------------ */
  --gutter:   clamp(1.25rem, 4.2vw, 5.5rem);
  --stack:    clamp(4rem, 11vh, 10rem);
  --measure:  62ch;

  /* --- motion ------------------------------------------------------------ */
  /* Named after what they do, so a call site reads as intent, not numbers.  */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);   /* arrivals, power4-ish out */
  --ease-lift:   cubic-bezier(0.7, 0, 0.84, 0);   /* departures, in           */
  --ease-swing:  cubic-bezier(0.65, 0, 0.35, 1);  /* symmetric moves          */
  --dur-in:      1.15s;     /* ceremony: things arriving                     */
  --dur-out:     0.42s;     /* dispatch: things leaving                      */
  --dur-tap:     0.22s;

  --z-curtain: 900;
  --z-nav:     700;
  --z-cursor:  1000;
}

/* ---------------------------------------------------------------------------
   reset · only what is actually needed
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

/* Focus rings via box-shadow, never outline — an outline cannot follow a
   border-radius on every engine and clips against overflow hidden. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--amber);
  border-radius: 2px;
}

::selection { background: var(--amber); color: var(--shadow); }

/* ---------------------------------------------------------------------------
   type primitives
   ------------------------------------------------------------------------- */

/* Display serif. Light weight, tight tracking, optical sizing on.
   Cormorant at large sizes needs NEGATIVE tracking or it falls apart. */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* Wide grotesque for labels — the Halvar Breitschrift role. Archivo carries a
   real width axis, so this is one family doing two jobs rather than two
   families pretending to be a system. */
.label {
  font-family: var(--sans);
  font-variation-settings: "wdth" 118, "wght" 500;
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.2;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.42;
  font-weight: 300;
  max-width: 28ch;
}

.body { max-width: var(--measure); }
.body p + p { margin-top: 1.1em; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   layout primitives
   ------------------------------------------------------------------------- */
.shell { padding-inline: var(--gutter); }

.section {
  position: relative;
  padding-block: var(--stack);
}

.section--dark {
  background: var(--shadow-2);
  --ink: var(--bone);
  --ink-soft: color-mix(in oklab, var(--bone) 68%, var(--shadow-2));
  --ink-faint: color-mix(in oklab, var(--bone) 56%, var(--shadow-2));
  --ground: var(--shadow-2);
  --rule: color-mix(in oklab, var(--bone) 20%, transparent);
  color: var(--ink);
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* An accessible name that is available to a screen reader and to nothing else.
   1x1 + clip-path, not display:none, not width:0 — both of those get dropped
   from the accessibility tree by at least one engine. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link that is off-screen until focused, and then is a real control. */
.skip {
  position: fixed; top: 0; left: 0;
  transform: translateY(-120%);
  z-index: 1100;
  background: var(--shadow);
  color: var(--bone);
  padding: 0.9rem 1.4rem;
  transition: transform var(--dur-tap) var(--ease-settle);
}
.skip:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   reduced motion · a chosen still, never t = 0
   Anything that animates must also be legible and composed when it does not.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Honeypot. Not display:none — some bots skip hidden fields, and some
   password managers ignore them. Off-canvas and out of the tab order instead. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================================
   RAG CONTROL
   ----------------------------------------------------------------------------
   Measured, not guessed: an instrument walks the rendered line boxes at each
   breakpoint and reports single-word last lines, stub rags and bad measure.
   These three rules cleared every finding it raised.

   `pretty` asks the engine to avoid widows and short last lines in running
   text; `balance` evens the line lengths of short headings. Both degrade to
   normal wrapping where unsupported, so nothing depends on them.
   ========================================================================== */
p, li, dd, figcaption, .body, .lin__p, .note__p, .piece__d, .bay__copy {
  text-wrap: pretty;
}

h1, h2, h3, h4, .display, .sec-head, .note__h, .storey__t {
  text-wrap: balance;
}

/* The lede was set to 28ch, which measured 26-29 characters a line at desktop
   - tight enough that the eye ladders down the left edge instead of reading. */
.lede {
  max-width: 34ch;
  text-wrap: pretty;
}

/* ============================================================================
   MEASURE
   ----------------------------------------------------------------------------
   Caught at 768px: the phone stylesheet applies up to 899px, but a tablet is
   nearly twice a phone's width, so single-column body copy was running to 114
   characters a line - well past the ~75 where the eye reliably finds the next
   line. These caps are in `ch`, so they bind on a tablet and are simply wider
   than the container on a phone. Nothing to maintain per breakpoint.
   ========================================================================== */
.note__p,
.lin__p,
.bay__copy,
.plate__note,
.storey__d,
.form__fine,
.address__caveat { max-width: 62ch; }

.piece__d,
.chart__s,
.chart__src { max-width: 58ch; }

/* ============================================================================
   PLANS · the drawings
   ----------------------------------------------------------------------------
   The sheets arrive on their own paper (#F2EDE5, from the print collateral),
   which is a half-step warmer than this page's bone. That difference is the
   point: a drawing is a different KIND of object from a photograph, and the
   page should say so without a border or a caption having to.

   Level order is ground up. The sheets print top-down because a printed sheet
   is read as a stack of pages; on screen the reader has just climbed the
   building in the ascent section, so the plans climb too.
   ========================================================================== */

.plans { background: var(--bone); }

/* This section is measured to the DRAWING, not to the page. The rest of the
   site runs edge to edge because it is carrying photographs, which get better
   the wider they are. A plan does not: past ~1180px the hairlines thin out and
   the eye travels too far between a room tag and its dimension string. So the
   whole section - tabs, ledger, paper and drawing - sits on one column at the
   drawing's own width. At 1877px that reads as a deliberate measure instead of
   a band stretched to fit. */
.plans .shell { max-width: 1240px; margin-inline: auto; }

/* --- residence tabs ------------------------------------------------------ */
.plans__tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.plans__tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: clamp(0.9rem, 1.6vw, 1.35rem) clamp(0.7rem, 1.3vw, 1.2rem);
  display: flex; flex-direction: column; gap: 0.3rem;
  text-align: left; color: var(--ink-soft);
  position: relative;
  transition: color var(--dur-tap) var(--ease-swing),
              background var(--dur-tap) var(--ease-swing);
}
.plans__tabs button:first-child { border-left: 1px solid var(--rule); }

/* the selected marker is a rule that grows from the left, not a fill —
   a fill at this size reads as a button, and these are a table of contents */
.plans__tabs button::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--amber-deep); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-tap) var(--ease-swing);
}
.plans__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.plans__tabs button[aria-selected="true"] { color: var(--ink); background: var(--bone-lift); }
@media (hover: hover) {
  .plans__tabs button:hover { color: var(--ink); background: var(--bone-lift); }
}
.plans__tabs button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--amber-deep);
}
.plans__tn { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1; color: var(--amber-deep); }
.plans__ta { font-size: var(--t-label); letter-spacing: 0.16em; }
.plans__ts { font-size: var(--t-label); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- panel head ---------------------------------------------------------- */
.plans__panel[hidden] { display: none; }

.plans__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.8rem, 4vh, 3rem) 0 clamp(1.5rem, 3vh, 2.2rem);
  align-items: start;
}
.plans__addr {
  font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 0.95; margin: 0 0 0.5rem;
  font-variant-numeric: lining-nums;
}
.plans__addr span {
  display: block; font-family: var(--sans); font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 0.55rem; font-weight: 500;
}
.plans__h { font-family: var(--serif); font-size: var(--t-md); line-height: 1.15; margin: 0 0 0.35rem; }
.plans__sub { font-size: var(--t-label); color: var(--amber-deep); letter-spacing: 0.16em; margin: 0 0 1rem; }
.plans__line { font-size: var(--t-small); color: var(--ink-soft); margin: 0; max-width: 46ch; line-height: 1.6; }

.plans__ledger { margin: 0; }
.plans__ledger > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.5rem 0; border-top: 1px solid var(--rule);
}
.plans__ledger > div:last-child { border-bottom: 1px solid var(--rule); }
.plans__ledger dt { font-size: var(--t-label); letter-spacing: 0.14em; color: var(--ink-faint); margin: 0; }
.plans__ledger dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
.plans__ledger--t dd {
  font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1;
}
.plans__ledger--t dt { color: var(--ink); }

/* --- a single plan ------------------------------------------------------- */
.plan { margin: 0 0 clamp(1.6rem, 4vh, 3rem); }
.plan__cap {
  display: flex; align-items: baseline; gap: clamp(0.6rem, 1.6vw, 1.4rem);
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.plan__lv { font-size: var(--t-label); letter-spacing: 0.18em; color: var(--ink); }
.plan__ht { font-size: var(--t-label); color: var(--amber-deep); font-variant-numeric: tabular-nums; }
.plan__wh {
  margin-left: auto; font-size: var(--t-label); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}

/* The drawing keeps the paper it was drawn on.
   Capped, because a floor plan does not get better by getting bigger: past
   about 1180px the line weights thin out against the field and the eye has to
   travel further between a room tag and its dimension string. The paper runs
   full bleed; the drawing sits centred on it. */
.plan__sheet {
  background: #F2EDE5;
  padding: clamp(0.7rem, 1.8vw, 1.6rem);
}
.plan__sheet img { width: 100%; height: auto; display: block; }

/* --- download ------------------------------------------------------------ */
.plans__dl {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.3rem; border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  transition: border-color var(--dur-tap) var(--ease-swing), background var(--dur-tap) var(--ease-swing);
}
.plans__dl svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.plans__dl .num { color: var(--ink-faint); letter-spacing: 0.1em; text-transform: none; }
@media (hover: hover) { .plans__dl:hover { border-color: var(--ink); background: var(--bone-lift); } }
.plans__dl:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--amber-deep); }

.plans__note {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-label); line-height: 1.7; color: var(--ink-faint);
  max-width: 76ch; letter-spacing: 0.06em; text-transform: none;
}