/* ─────────────────────────────────────────────────────────────
   Lamp and Ledger — shared design system
   A lit sheet of newsprint on a dark deck.
   The dark is a frame. Body copy never sits on it.
   ───────────────────────────────────────────────────────────── */

:root{
  --deck:      #1A1E1D;   /* lifted black, luma ~29 — matches the measured film floor of 26 */
  --gutter:    #242926;
  /* Warmed 2026-09-08 (colour.html option 5). The old stock was grey-cast, which
     read as bland rather than as restrained. This is the same paper, warmer. */
  --newsprint: #E6DDC7;   /* stock, not stationery */
  --paper2:    #DCD1B7;   /* a second, dimmer paper */
  --ink:       #221F19;
  --soft:      rgba(34,31,25,.62);
  --hair:      rgba(34,31,25,.24);
  /* Two structural colours, added with the warm stock. Both are checked against
     the paper: teal 5.7:1, ochre 5.1:1, so each passes AA at label size. The
     ochre is deliberately darker than it looked in the study — the brighter one
     came out at 3.2:1 and would have failed as small type. */
  --teal:      #2C5A55;   /* section labels, and the ledger band's ground */
  --ochre:     #7A5310;   /* numerals only */
  --sage:      #A7B8B4;   /* brightest pixel measured in the reference film */
  --mark:      #9FD8CC;   /* the only accent. marks text, never colours it.
                             Cool against warm newsprint, so it separates without shouting —
                             which is why it can sit this quiet and still read.
                             Replaced the amber #EFAF12 on 2026-09-04. */
  --stamp:     #D0006F;   /* restricted second ink — stamps and focus only */
  color-scheme: dark;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--deck); color:var(--sage);
  /* Charis SIL — Carter's Charter, drawn for low-res output. Sturdier at 19px
     for aging eyes than Newsreader, and effectively unused on the web. */
  font:400 19px/1.62 "Charis SIL", Charter, Georgia, serif;
}

/* ── the dark room ──────────────────────────────────────────── */
.room{ padding:3.5rem 1.5rem 5rem; }
@media (max-width:46rem){ .room{ padding:0 12px 3rem; } }  /* dark collapses to an edge */

/* ── the lit plane ──────────────────────────────────────────── */
/* 76rem chosen 2026-09-04 against 64 and 88 at 2000px: the headline settles to
   three lines and the supporting column stays inside a comfortable measure. */
.sheet{
  max-width:76rem; margin:0 auto; position:relative;
  background:var(--newsprint); color:var(--ink);
  box-shadow:0 2px 0 rgba(0,0,0,.5), 0 26px 60px -20px rgba(0,0,0,.85);
}
/* lamp falloff — a vignette on the paper, not a gradient on the background */
.sheet::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(115% 85% at 50% 22%, rgba(0,0,0,0) 62%, rgba(26,30,29,.10) 100%);
}
.sheet::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheet > *{ position:relative; z-index:1; }

/* Horizontal padding lives on .pad and NEVER on a shorthand `padding` of a
   child, or it silently wipes the side margins. Vertical spacing uses
   padding-block for the same reason. */
.pad{ padding-inline:clamp(1.4rem, 4vw, 3.2rem); }

/* ── masthead ───────────────────────────────────────────────── */
.bar{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.5rem;
  padding-block:1.5rem 1.2rem;
  font:500 .78rem/1 "Archivo Narrow", sans-serif;
}
.bar .mark{ font-weight:600; font-size:.86rem; letter-spacing:.14em;
            color:var(--ink); text-decoration:none; }
.bar .where{ color:var(--soft); letter-spacing:.08em; }
.bar nav{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-left:auto; }
.bar nav a{ color:var(--soft); text-decoration:none; border-bottom:1px solid transparent;
            padding-bottom:2px; }
.bar nav a:hover, .bar nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--ink); }

/* ── rules ──────────────────────────────────────────────────── */
.rule{ border:0; border-top:1.5px solid var(--ink); margin:0; }
.hair{ border:0; border-top:1px solid var(--hair); margin:0; }

/* ── type ───────────────────────────────────────────────────── */
/* Newsreader's TEXT optical cut held at display size — blunter, more newspaper.
   The Display cut turns pretty and reads as magazine serif. Weight capped at 500. */
/* Option C from hero.html, chosen 2026-09-05: cap raised to 4.75rem, leading
   closed to .99, tracking tightened. Fills the column instead of trailing off. */
h1{ font-family:Newsreader, serif; font-weight:500;
    font-size:clamp(2.3rem, 6vw, 4.75rem); line-height:.99; letter-spacing:-.024em;
    margin:0; max-width:15ch; }
h2{ font-family:Newsreader, serif; font-weight:500;
    font-size:clamp(1.4rem, 2.6vw, 1.95rem); line-height:1.16; letter-spacing:-.01em;
    margin:0 0 1.4rem; max-width:24ch; }
h3{ font:600 .72rem/1 "Archivo Narrow", sans-serif; letter-spacing:.16em;
    color:var(--teal); margin:0 0 1rem; text-transform:uppercase; }
p{ margin:0 0 1.4rem; max-width:60ch; }
p:last-child{ margin-bottom:0; }
.quiet{ color:var(--soft); }
a{ color:var(--ink); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px; }

/* The highlighter mark was retired 2026-09-09 at Clarke's instruction: no
   highlighting and no underlining anywhere on the site. The token stays defined
   in case it is ever wanted back, but nothing renders it. */
mark{ color:inherit; background:none; padding:0; border:0; }

/* ── hero ───────────────────────────────────────────────────── */
.hero{ padding-block:3.4rem 3rem; }
/* Vertically centred, 2026-09-05. Bottom-aligning floated the headline down and
   left dead space above it; top-aligning moved the same gap below. Centring
   splits it, so whichever column is shorter sits balanced against the other. */
.hgrid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
@media (min-width:60rem){ .hgrid{ grid-template-columns:1.5fr 1fr; gap:3rem; } }
.hero .side p{ margin:0 0 1rem; font-size:.98rem; line-height:1.58; color:var(--soft); }
.hero .side p:last-child{ margin:0; }

/* ── booking ────────────────────────────────────────────────── */
.ctarow{ padding-block:1.2rem; display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.book{ display:inline-block; text-decoration:none; background:var(--ink); color:var(--newsprint);
       padding:.8rem 1.2rem; font:500 .9rem/1 "Archivo Narrow", sans-serif; }
.book:hover, .book:focus-visible{ background:var(--stamp); color:#fff; }
.aside{ margin:0; font:400 .86rem/1.5 "Archivo Narrow", sans-serif; color:var(--soft); }

/* ── ledger band ────────────────────────────────────────────── */
/* Reaches the edges of the paper, never the edges of the screen. That is the
   accepted cost of the dark field. */
/* The one saturated surface on a page. It holds four short facts rather than
   reading copy, which is why colour can go here and not behind body text. */
.ledger{ background:var(--teal); border-top:1px solid #1E3F3B; border-bottom:1px solid #1E3F3B; }
.facts{ display:grid; grid-template-columns:1fr 1fr; }
@media (min-width:60rem){ .facts{ grid-template-columns:repeat(4,1fr); } }
/* Centred, one measure per cell. Chosen 2026-09-04 from the eight-way study in
   band.html (option G). The cell is a centred flex column so an odd line count
   in one fact still reads as balanced against the others. */
/* justify-content stays flex-start: the labels are the thing that must align
   across all four cells. Centring the cell vertically drifts them apart, which
   is what sank option D in the study. */
.fact{ padding:1.7rem 1.2rem 1.8rem; border-left:1px solid var(--hair);
       display:flex; flex-direction:column; align-items:center;
       justify-content:flex-start; text-align:center; }
.fact{ border-left-color:rgba(230,221,199,.22); }
.fact:first-child{ border-left:0; }
@media (max-width:60rem){ .fact:nth-child(3){ border-left:0; } }
.fact .k{ font:600 .66rem/1 "Archivo Narrow", sans-serif; letter-spacing:.16em;
          color:rgba(230,221,199,.88); margin:0 0 .85rem; }
.fact .v{ font-family:Newsreader, serif; font-size:1.18rem; line-height:1.32;
          margin:0; max-width:21ch; color:#EFE8D6; }

/* ── sections ───────────────────────────────────────────────── */
.section{ padding-block:3rem; border-top:1px solid var(--hair); }
.section:first-of-type{ border-top:0; }
.cols{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:60rem){ .cols{ grid-template-columns:1fr 1.5fr; gap:3rem; align-items:start; } }
/* Two equal columns, for a section where both sides carry content rather than
   a label and a body. At 1fr 1.5fr the record's long rows wrapped to two lines
   and it ran 100px past the prose; at 1fr 1fr they unwrap and the two columns
   land within a couple of pixels of each other. */
@media (min-width:60rem){ .cols.even{ grid-template-columns:1fr 1fr; } }

/* ── footer ─────────────────────────────────────────────────── */
.foot{ padding-block:2rem 2.4rem; border-top:1.5px solid var(--ink);
       display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; align-items:center;
       font:400 .82rem/1.5 "Archivo Narrow", sans-serif; color:var(--soft); }

/* ─────────────────────────────────────────────────────────────
   Interior pages — About, Criteria, Process
   Added 2026-09-04. Every rule below uses padding-block, never a
   `padding` shorthand on a child of .pad.
   ───────────────────────────────────────────────────────────── */

/* Opening paragraph under an interior h1, when the hero has no side column. */
.lede{ font-size:1.12rem; line-height:1.55; max-width:52ch; }

/* ── banner statement ───────────────────────────────────────── */
/* An alternative to the two-column hero: one statement at intermediate size
   running the full width of the sheet. Still the page's h1, so the measure is
   deliberately long — this is a standfirst, not body copy. */
.banner{ padding-block:3.6rem 3.6rem; }
.banner h1{ font-size:clamp(1.5rem, 2.95vw, 2.35rem); line-height:1.24;
            letter-spacing:-.014em; max-width:none; text-align:left; }
/* For a banner that ends on a turn, set the closing line off on its own. */
.banner h1 span{ display:block; margin-top:1.05rem; }

/* Named paragraph. The lead-in carries the point; the sentence explains it. */
.named b{ font-weight:700; }

/* ── record / buy-box list ──────────────────────────────────── */
/* A dl on the dimmer paper. Used for the About record and the
   broker-and-lender box on Criteria. */
.panel{ background:var(--paper2); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
        padding-block:1.5rem 1.6rem; }
.panel > *{ padding-inline:clamp(1.4rem, 4vw, 3.2rem); }
.panel h3{ margin-bottom:1.1rem; }
.dl{ margin:0; display:grid; grid-template-columns:1fr; gap:.9rem 1.6rem; }
@media (min-width:44rem){ .dl{ grid-template-columns:11rem 1fr; gap:.85rem 1.6rem; } }
.dl dt{ font:600 .68rem/1.35 "Archivo Narrow", sans-serif; letter-spacing:.14em;
        text-transform:uppercase; color:var(--soft); padding-top:.32em; }
.dl dd{ margin:0; font-size:.98rem; line-height:1.5; max-width:46ch; }

/* ── the record ─────────────────────────────────────────────── */
/* Sits in the left column beside the prose, so it is set for a ~400px measure:
   label over value, hairline between rows. Option A from record.html,
   chosen 2026-09-05. */
.rec dl{ margin:0; }
/* .55rem, not .85rem: the record carries five rows against three paragraphs of
   prose, and the looser padding pushed it 145px past the column beside it. */
.rec .row{ padding-block:.55rem; border-top:1px solid var(--hair); }
.rec .row:first-child{ border-top:0; padding-top:0; }
.rec dt{ font:600 .66rem/1 "Archivo Narrow", sans-serif; letter-spacing:.16em;
         text-transform:uppercase; color:var(--soft); margin:0 0 .4rem; }
.rec dd{ margin:0; font-size:1.06rem; line-height:1.5; }
/* A record row carries one more level than a prose column: h3, then the field
   label, then the value. A prose column goes h3 straight to text, so its first
   line lands a label-height too high. dt is .66rem/1 plus a .4rem margin, which
   is exactly 1.06rem — drop the neighbouring prose by that and the first line
   of each column sits on the same baseline. */
.cols .rec + .say > p:first-of-type{ margin-top:1.06rem; }

/* ── narrative with a picture ───────────────────────────────── */
/* Text left, picture right. align-items:stretch plus a height:100% shotbox
   keeps the picture exactly as tall as the passage beside it, at any width
   and through any copy edit. Chosen 2026-09-05 from how4.html. */
.narr{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:60rem){
  .narr{ grid-template-columns:1.5fr 1fr; gap:3.4rem; align-items:stretch; }
  .narr .shot{ height:100%; }
  .narr .shotbox{ height:100%; aspect-ratio:auto; }
}
/* One reading size for every column of prose on an interior page: the record,
   the work, the narrative and the cards all sit at 1.06rem/1.56. Body copy on
   Home, Criteria and Process keeps the 19px default. */
.say p{ font-family:Newsreader, serif; font-weight:400; font-size:1.06rem;
        line-height:1.56; max-width:none; margin:0 0 1rem; }
.say p:last-child{ margin-bottom:0; }

/* ── a photograph in a section's label column ───────────────── */
/* Home's sections carry a label on the left and prose on the right, which left
   the left column empty below the label. The photograph fills it and its height
   is locked to the passage beside it. */
/* The label now sits over the prose, so the photograph starts level with it
   rather than a label's height below. */
.cols .shot{ margin:0; }
.cols .shot img{ width:100%; display:block; }
.cols .shot figcaption{ font:600 .64rem/1.4 "Archivo Narrow", sans-serif; letter-spacing:.14em;
                        text-transform:uppercase; color:var(--soft); margin-top:.6rem; }

/* .pic — the photograph takes whatever height the passage beside it needs, so
   neither column is left with dead space under it. .flip puts the picture on
   the other side; alternate them down the page. */
@media (min-width:60rem){
  .cols.pic{ align-items:stretch; }
  .cols.pic > div{ display:flex; flex-direction:column; }
  .cols.pic .shot{ flex:1; display:flex; flex-direction:column; }
  /* The frame takes the leftover height and the image is pulled out of flow
     inside it. An in-flow <img> contributes its intrinsic height even under
     flex:1, which made the photograph drive the row instead of the prose. */
  .cols.pic .shot .frame{ flex:1; position:relative; min-height:15rem; }
  .cols.pic .shot .frame img{ position:absolute; inset:0; width:100%; height:100%;
                              object-fit:cover; object-position:50% 26%; }
  .cols.pic.flip{ grid-template-columns:1.5fr 1fr; }
  .cols.pic.flip > *:nth-child(1){ order:2; }
  .cols.pic.flip > *:nth-child(2){ order:1; }
}

/* ── log entries ────────────────────────────────────────────── */
/* Newest first. One .entry per post; the date sits with the headline on one
   line and the body runs underneath at reading width. */
.entry{ padding-block:1.9rem; border-top:1px solid var(--hair); }
.entry:first-of-type{ border-top:0; }
.ehead{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; margin-bottom:.9rem; }
.ehead h2{ font-size:clamp(1.25rem, 2vw, 1.6rem); line-height:1.22; margin:0; max-width:38ch; }
.when{ font:600 .68rem/1 "Archivo Narrow", sans-serif; letter-spacing:.16em;
       text-transform:uppercase; color:var(--ochre); white-space:nowrap; }
/* Full width: an entry is the page's content, not a column within it. */
.entry p{ font-size:1.06rem; line-height:1.56; max-width:none; margin:0 0 .9rem; }
.entry p:last-child{ margin-bottom:0; }
.ehead h2{ max-width:none; }
/* the empty-state slot, so the shape is visible before anything is written */
.slot{ border:1px dashed var(--hair); padding:.9rem 1rem; color:var(--soft);
       font:400 .84rem/1.5 "Archivo Narrow", sans-serif; max-width:none; }

/* ── worked examples ────────────────────────────────────────── */
/* Two-up cards: verb-first headline, the situation, the outcome in bold.
   Chosen 2026-09-05 from cases.html (layout C) and cases2.html. */
.grid{ display:grid; grid-template-columns:1fr; gap:2.6rem 3.4rem; }
@media (min-width:60rem){ .grid{ grid-template-columns:1fr 1fr; } }
/* Option B, chosen 2026-09-08 from titles.html: a hairline across the top of
   every card. It separates card from card rather than title from body, which
   was the actual complaint, and it reuses the rule already used everywhere on
   the site instead of inventing a device. */
.card{ border-top:1px solid var(--hair); padding-top:1.1rem; }
.card .num{ font:600 .7rem/1 "Archivo Narrow", sans-serif; letter-spacing:.18em;
            color:var(--ochre); display:block; margin:0 0 .55rem; }
.card h4{ font-family:Newsreader, serif; font-weight:500; font-size:1.3rem;
          line-height:1.24; margin:0 0 .9rem; max-width:26ch; }
.card p{ max-width:none; margin:0 0 .9rem; font-size:1.06rem; line-height:1.56; }

/* A two-line title on one side of a row and a one-line title on the other put
   the two bodies on different baselines. Subgrid hands every card in a row the
   same title row, so the body copy starts on the same line across the page and
   keeps doing so through any copy edit. */
@media (min-width:60rem){
  .grid.sync{ grid-auto-rows:auto; }
  /* A subgrid overrides the parent's gutters with its own, so zero the row gap
     here or the grid's 2.6rem row spacing opens up between title and body. */
  .grid.sync .card{ display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0; }
  .grid.sync .card > p:last-child{ margin-bottom:0; }
}
.card .out{ font-weight:700; margin-bottom:0; }

/* ── process steps ──────────────────────────────────────────── */
/* Layout L3 from steps.html, chosen 2026-09-08. Number and title on one line,
   the time pushed to the right edge, body and cost side by side underneath.
   The seller's cost and the seller's time end up on the same axis down the
   page, which is what the page is actually arguing. */
.instep{ padding-block:1.7rem; border-top:1px solid var(--hair); }
.ihead{ display:flex; align-items:baseline; gap:1.4rem; margin-bottom:1rem; }
.ihead h4{ font-family:Newsreader, serif; font-weight:500; font-size:1.44rem; line-height:1.2;
           margin:0; max-width:none; display:flex; align-items:baseline; gap:.9rem; }
.inum{ font:600 .78rem/1 "Archivo Narrow", sans-serif; letter-spacing:.14em; color:var(--ochre); }
.itime{ font:600 .66rem/1 "Archivo Narrow", sans-serif; letter-spacing:.13em;
        text-transform:uppercase; color:var(--soft); margin-left:auto; white-space:nowrap; }
.icols p{ margin:0; font-size:1.06rem; line-height:1.56; max-width:none; }
@media (min-width:60rem){ .icols{ display:grid; grid-template-columns:1.6fr 1fr; gap:3rem; } }
.cost{ font-size:.98rem; line-height:1.55; color:var(--soft); border-left:2px solid var(--hair);
       padding-inline-start:.9rem; max-width:54ch; }

/* ── map ────────────────────────────────────────────────────── */
/* Real projected geographic data. Do not redraw it. */
.map{ margin:1.8rem 0 1.4rem; }
.map svg{ display:block; width:100%; height:auto; }
.map .states path{ fill:rgba(34,31,25,.11); stroke:var(--newsprint); stroke-width:1.1;
                   stroke-linejoin:round; }
/* The pins use the restricted second ink, so the aqua mark stays unique per page. */
.map .ring{ fill:var(--stamp); fill-opacity:.09; stroke:var(--stamp); stroke-width:1.2; }
.map .dot { fill:var(--stamp); }
/* SVG text scales with the viewBox, so these are user units, not pixels. The map
   sits in the 1.5fr column (~630px at 1440), where 25 units renders at ~15px. */
.map .label{ font:600 25px "Archivo Narrow", sans-serif; fill:var(--ink); }
.map .dist { font:500 21px "Archivo Narrow", sans-serif; fill:var(--soft); }
/* Below 60rem the column is too narrow for legible in-map type at any size that
   still fits the viewBox. The legend takes over. */
.maplegend{ display:none; }
@media (max-width:60rem){
  .map .label, .map .dist{ display:none; }
  .maplegend{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:.9rem 0 0;
              font:500 .82rem/1.5 "Archivo Narrow", sans-serif; color:var(--soft); }
  .maplegend b{ font-weight:600; color:var(--ink); }
}

/* ── image placeholder ──────────────────────────────────────── */
/* Type-first: every page must be complete with no image. These hold the
   three briefed shots and nothing depends on them. */
.shot{ margin:0; }
/* A real photograph fills the slot the placeholder held: same box, cropped to
   fill, focal point high so the face stays in frame as the column resizes. */
.shot img{ display:block; width:100%; height:100%; object-fit:cover;
           object-position:50% 22%; }
.narr .shot img{ min-height:100%; }
.shotbox{ position:relative; background:rgba(34,31,25,.07); border:1px solid var(--hair);
          aspect-ratio:16/9; display:flex; align-items:flex-end; }
.shotbox.tall{ aspect-ratio:4/5; }
.slug{ margin:0; padding:1rem 1.1rem; font:400 .78rem/1.45 "Archivo Narrow", sans-serif;
       color:var(--soft); max-width:40ch; }
.slug b{ font-weight:600; letter-spacing:.1em; color:var(--ink); }
.shot figcaption{ margin-top:.6rem; font:400 .78rem/1.45 "Archivo Narrow", sans-serif;
                  color:var(--soft); }