:root{
  --ink:#241f1a; --ink-2:#5b534b; --ink-3:#766c64;  /* was #8a8078 — 3.77:1 on --paper, under AA */
  --paper:#fdfcfa; --paper-2:#f5f1ea; --line:#e0d8cc;
  --accent:#8b5d2e; --accent-2:#b8763a;
  --hero-bg:#f0e9de; --hero-ink:#241f1a; --hero-ink-2:#5b534b;
  --hero-ink-over:#fdfcfa; --hero-ink-over-2:#ece7e0;
  --hero-scrim:rgba(28,22,16,.56);   /* .46 left bright patches of the photo at 3.86:1 under the subtitle */
  --tag-bg:#ece3d5; --tag-ink:#6b5233;
  color-scheme:light;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Source Sans 3',system-ui,sans-serif;
}
/* DARK MODE IS OFF ON PURPOSE — light only for now.
   The shell flipped correctly, but the Kjemhus and McGregor pages carry their
   own hardcoded light palettes (47 and 18 hex values, in their <style> blocks),
   so their headings kept rendering dark blue on the shell's dark brown. Turning
   the shell dark while the page bodies stay light produces unreadable pages.

   Re-enable by deleting the comment markers below, but only AFTER those two
   pages are converted to these tokens. The values are tuned and all pass AA —
   they are kept here because they are otherwise unrecoverable.

@media (prefers-color-scheme:dark){
  :root{--ink:#ece7e0;--ink-2:#b3aaa0;--ink-3:#8a8078;
        --paper:#191614;--paper-2:#221e1a;--line:#38312a;--accent:#d09a5e;--accent-2:#e0b077;
        --hero-bg:#221e1a;--hero-ink:#ece7e0;--hero-ink-2:#b3aaa0;
        --hero-scrim:rgba(10,8,6,.55);
        --tag-bg:#2c251d;--tag-ink:#c9a877;}
}
*/
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.25}

.site-head{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px 28px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.site-brand{font-family:var(--serif);font-size:21px;font-weight:600;text-decoration:none}
.site-brand span{color:var(--accent)}
.site-head nav{display:flex;gap:22px}
.site-head nav a{font-size:15px;text-decoration:none;color:var(--ink-2)}
.site-head nav a:hover{color:var(--accent)}

main{max-width:1080px;margin:0 auto;padding:0 28px}
.hero-plain{padding:64px 0 28px;max-width:720px}
.hero-plain h1{font-size:clamp(34px,5vw,54px);margin:0 0 18px}
.lede{font-size:19px;color:var(--ink-2);margin:0 0 14px}
.note{font-size:15px;color:var(--ink-3);margin:0}

.lines{display:grid;grid-template-columns:1fr;gap:20px;padding:24px 0 56px}
/* Four lines, so two columns rather than auto-fit's three-plus-an-orphan. */
@media(min-width:720px){.lines{grid-template-columns:1fr 1fr}}
.line{background:var(--paper-2);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;text-decoration:none;display:flex;flex-direction:column}
.line--live:hover{border-color:var(--accent);background:var(--paper)}
.line--soon{border-style:dashed}   /* was opacity:.66 — that dimmed already-muted text below readable contrast */
.line h2{font-size:26px;margin:0 0 4px}
.where{font-size:14px;color:var(--accent);margin:0 0 14px}
.blurb{font-size:16px;color:var(--ink-2);margin:0 0 18px;flex:1}
.cta{font-size:15px;font-weight:500;border-bottom:1px solid var(--accent);
  align-self:flex-start;padding-bottom:2px}
.cta--muted{color:var(--ink-3);border-bottom-color:var(--line)}

.about{border-top:1px solid var(--line);padding:40px 0 56px;max-width:720px}
.about h2{font-size:24px;margin:0 0 14px}
.about p{color:var(--ink-2);margin:0 0 14px}
.byline{font-size:15px;color:var(--ink-3)}

.site-foot{border-top:1px solid var(--line);margin-top:32px;padding:28px;
  font-size:14px;color:var(--ink-3);text-align:center}
.site-foot p{margin:0 auto 6px;max-width:640px}
.foot-meta{font-size:13px}

.mcgregor-saga,.kjemhus-story{padding:40px 0 56px}
.mcgregor-saga img,.kjemhus-story img{max-width:100%;height:auto}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---- Page hero -------------------------------------------------------
   One component for all three pages. With .page-hero--image it lays a scrim
   over a photograph; without one it falls back to a flat band, so a page that
   has no hero image yet still reads as a titled page rather than a headless
   one. Every colour here is a token — see :root above. */
.page-hero{position:relative;background:var(--hero-bg);
  border-bottom:1px solid var(--line);
  padding:clamp(52px,9vw,104px) 28px;text-align:center}
.page-hero--image{background-color:var(--hero-bg);background-size:cover;
  background-position:center;border-bottom:none}
.page-hero--image::before{content:"";position:absolute;inset:0;
  background:var(--hero-scrim)}
/* Illustration layer, not evidence: a generated scene of the right kind of
   Lowland cottage, not a photograph of the McGregor cottage, which is not
   known to survive in any image. The filename says so because filenames
   become permanent URLs and travel with the file. */
.page-hero--mcgregor{background-image:url("/media/hero-lowland-cottage-reconstruction.webp")}
.page-hero > *{position:relative}
.page-hero h1{font-size:clamp(32px,6vw,58px);margin:0 0 10px;color:var(--hero-ink)}
.hero-sub{font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,2.4vw,21px);line-height:1.45;
  margin:0 auto;max-width:46ch;color:var(--hero-ink-2)}
/* Text sits over a photograph here, so it stays light in both themes.
   Must come after the base rules above — same specificity, source order decides. */
.page-hero--image h1{color:var(--hero-ink-over)}
.page-hero--image .hero-sub{color:var(--hero-ink-over-2)}

/* ---- Home page ------------------------------------------------------- */
.purpose{padding:52px 0 8px;max-width:680px}
.purpose h2{font-size:26px;margin:0 0 16px}
.purpose p{color:var(--ink-2);margin:0 0 16px}
.purpose p:last-child{margin-bottom:0}

.lines-head{border-top:1px solid var(--line);margin-top:48px;padding-top:40px}
.lines-head h2{font-size:26px;margin:0 0 6px}
.lines-head p{color:var(--ink-3);font-size:15px;margin:0}

.tag{display:inline-block;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--tag-bg);color:var(--tag-ink);
  border-radius:2px;padding:3px 8px;margin-bottom:12px;align-self:flex-start}
.line--soon .tag{background:transparent;color:var(--ink-3);
  border:1px solid var(--line)}