/* ==========================================================================
   UX MOUNTAIN — DESIGN SYSTEM
   Direction A "Alpenglow Editorial" · archival / draftsman.
   Field Notes and Monocle, never scrapbook: texture and typography carry the
   craft. No handwriting faces, no rotated or taped elements.

   CONTENTS
     1  Tokens          6  Buttons          11  Quote & testimonial
     2  Font faces      7  Cards & grids    12  FAQ
     3  Base            8  Navigation       13  Timeline
     4  Layout          9  Tables & lists   14  Engravings
     5  Typography     10  Forms            15  Utilities, print, motion
   ========================================================================== */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* Ink & ground */
  --paper:#FAF8F4;
  --paper-deep:#F1ECE1;
  --ink:#2C2C2C;
  --ink-deep:#26282A;
  --forest:#33503F;
  --forest-deep:#2A4234;

  /* Text — every value below clears WCAG AA (4.5:1) on its intended ground.
     The previous --muted (#8A8272) and --gold-deep (#A87D0C) sat at 3.59 and
     3.53, so every kicker, caption and inline link on the site failed. */
  --body:#4a4a4a;          /* 8.36 on paper  */
  --muted:#787163;         /* 4.56 on paper  */
  --muted-deep:#716a5d;    /* 4.55 on paper-deep */
  --link:#926c0a;          /* 4.53 on paper  */

  /* Gold — decorative. 2.24 on paper, so it is never used for small text:
     rules, underlines, numerals at display size, and reversed on dark only. */
  --gold:#D4A012;
  --gold-ink:#A87D0C;      /* large text and iconography only */
  --alpenglow:#FB923C;

  /* Lines */
  --line:#E8E4DA;
  --rule:rgba(44,44,44,.28);
  --rule-soft:rgba(44,44,44,.12);

  /* Type */
  --display:'Prata',Georgia,'Times New Roman',serif;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* American Typewriter is macOS-only; the stack below keeps the slab-ish,
     wide-tracked feel on Windows and Linux instead of collapsing to Courier. */
  --type:'American Typewriter','Iowan Old Style','Rockwell','Courier New',
         ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type scale — 1.25 minor third, clamped for fluidity */
  --t-xs:.72rem;
  --t-sm:.86rem;
  --t-base:1rem;
  --t-md:1.08rem;
  --t-lg:clamp(1.15rem,.9rem + .6vw,1.3rem);
  --t-xl:clamp(1.4rem,1.1rem + 1vw,1.75rem);
  --t-2xl:clamp(1.7rem,1.25rem + 1.9vw,2.15rem);
  --t-3xl:clamp(2.1rem,1.4rem + 3vw,3.3rem);

  /* Spacing — a 4px-rooted scale. Before this the stylesheet used thirty
     unrelated pixel values, so nothing aligned by construction. */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px;  --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px; --s-14:56px; --s-16:64px; --s-20:80px;
  --s-24:96px; --s-32:128px;

  /* Geometry */
  --wrap:1080px;
  --wrap-narrow:760px;
  --radius:6px;
  --radius-sm:3px;
  --shadow-card:2px 3px 0 rgba(44,44,44,.05);
  --shadow-frame:3px 4px 0 rgba(44,44,44,.06);

  /* Motion */
  --ease:cubic-bezier(.32,.72,.35,1);
  --fast:.16s;
  --slow:.28s;
}

/* ── 2 · FONT FACES ─────────────────────────────────────────────────────── */
/* Self-hosted and subset to 7KB. Previously loaded from Google Fonts, which
   made the page render differently anywhere that host is blocked — not what
   you want from a document standing as evidence. */
@font-face{
  font-family:'Prata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/prata-subset.woff2') format('woff2');
}

/* ── 3 · BASE ───────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  font-size:var(--t-base);
  background:var(--paper);
  color:var(--body);
  line-height:1.7;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Paper grain — above everything, catches no clicks */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:rgba(212,160,18,.22)}
img,svg{max-width:100%}
img{height:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:var(--s-3) var(--s-5);z-index:1000;font-family:var(--sans);
  font-size:var(--t-sm);text-decoration:none}
.skip:focus{left:var(--s-3);top:var(--s-3)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}

/* ── 4 · LAYOUT ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-6)}
.narrow{max-width:var(--wrap-narrow)}
section.block{padding:var(--s-24) 0}
section.block.tight{padding:var(--s-16) 0}

section.block.deep{
  background:var(--paper-deep);
  background-image:linear-gradient(rgba(44,44,44,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(44,44,44,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
section.block.ledger{
  background:var(--paper-deep);
  background-image:linear-gradient(rgba(44,44,44,.055) 1px,transparent 1px);
  background-size:100% 30px;
}
section.block.dotted,.dotted{
  background-image:radial-gradient(rgba(44,44,44,.12) 1px,transparent 1.15px);
  background-size:22px 22px;
}
section.block.deep .card,section.block.ledger .card{background:#fff}

/* Text sitting directly on --paper-deep needs darker values: --muted drops to
   4.11 and --link to 4.08 there, both under AA. Cards inside these bands are
   repainted #fff, so they keep the lighter tokens. */
section.block.deep,section.block.ledger{--muted:#716a5d;--link:#896509}
section.block.deep .card,section.block.ledger .card,
section.block.deep .facts,section.block.ledger .facts,
section.block.deep .route,section.block.ledger .route,
section.block.deep .step,section.block.ledger .step,
section.block.deep .testimonial,section.block.ledger .testimonial{
  --muted:#787163;--link:#926c0a}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.split{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--s-14);align-items:start}
.split.centered{align-items:center}
.split.even{grid-template-columns:1fr 1fr}

/* Axis-with-ticks divider — the inner-page section break */
.axis{display:block;width:100%;height:22px}

/* ── 5 · TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--ink);font-weight:400;letter-spacing:-.01em}
h1,h2{font-family:var(--display)}
h1{font-size:var(--t-3xl);line-height:1.14}
h2{font-size:var(--t-2xl);line-height:1.24}
h3{font-family:var(--sans);font-weight:600;font-size:var(--t-md);line-height:1.4}
/* A small slab label. It is a LOOK, not a heading level — used as a class so
   markup can carry the structurally correct h3 and still look like this. */
h4,.lbl{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.2em;
   text-transform:uppercase;color:var(--link);font-weight:400;line-height:1.6}
/* Type specimen on the style guide: looks like h1, is not one. */
.specimen-h1{font-family:var(--display);font-weight:400;font-size:var(--t-3xl);
   line-height:1.14;color:var(--ink);letter-spacing:-.01em}

.kicker{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
.lede{font-size:var(--t-lg);line-height:1.6}
.fig{font-family:var(--serif);font-style:italic;font-size:var(--t-sm);color:var(--muted)}
.sans{font-family:var(--sans);font-size:var(--t-sm)}
.sec-head{max-width:680px;margin-bottom:var(--s-12)}
.sec-head h2{margin-bottom:var(--s-3)}
.sec-head p{font-size:var(--t-md)}
p + p{margin-top:var(--s-4)}

/* Crisp double gold rule under a keyword */
/* Two gold rules under the emphasised phrase — a thick one over a hairline.
   This was an SVG with a 240x10 viewBox stretched across the phrase with
   preserveAspectRatio="none", which squashed both strokes to sub-pixel heights
   and rendered them as broken, patchy lines. Painted as backgrounds at whole
   pixel heights instead, so they stay crisp at any type size. */
.uline{white-space:nowrap;padding-bottom:.3em;
  background-repeat:no-repeat;
  background-image:linear-gradient(var(--gold),var(--gold)),
                   linear-gradient(var(--gold),var(--gold));
  background-size:100% 3px,100% 1px;
  background-position:0 calc(100% - 6px),0 100%}

.textlink{color:var(--link);text-decoration:none;font-family:var(--sans);
  font-size:var(--t-sm);border-bottom:1px solid rgba(146,108,10,.4);
  transition:border-color var(--fast) var(--ease)}
.textlink:hover{border-bottom-color:var(--link)}
a{color:var(--link)}

/* ── 6 · BUTTONS ────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:var(--t-sm);letter-spacing:.02em;padding:var(--s-3) var(--s-8);
  border-radius:var(--radius-sm);text-decoration:none;border:none;cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             transform var(--fast) var(--ease)}
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--gold)}
.btn.primary:hover{background:#1e2021;transform:translateY(-1px)}
.btn.ghost{border:1px solid rgba(44,44,44,.65);color:var(--ink);background:none}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.gold{background:var(--gold);color:var(--ink-deep);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.btn.gold:hover{background:#e0ad20;transform:translateY(-1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:var(--s-4);flex-wrap:wrap}

/* ── 7 · CARDS, STATS, STEPS ────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-8) var(--s-6);box-shadow:var(--shadow-card)}
.card h3{margin-bottom:var(--s-2)}
.card p{font-size:var(--t-sm);font-family:var(--sans)}
.card .ico{margin-bottom:var(--s-5);display:block}
.stage{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--link);margin-bottom:var(--s-3)}

.proof{background:var(--forest);
  background-image:radial-gradient(rgba(0,0,0,.22) 1px,transparent 1.15px);
  background-size:22px 22px}
/* Three stats, not four: the column stands where the fourth used to be. The
   right padding is what keeps the third stat clear of it. */
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);
  padding:var(--s-12) var(--s-6)}
/* The column is anchored to the viewport, the stats sit in a centred 1080px
   wrap, so a fixed percentage over-reserves as the screen widens. This is the
   overlap solved algebraically: wrapRight - columnLeft + a 40px gap. Past about
   2200px the column clears the wrap entirely and it collapses to the minimum. */
@media(min-width:901px){
  .proof .wrap{padding-right:clamp(var(--s-6),
    calc(580px - 49vw + min(38vw,580px) + var(--s-10)),52%)}
  }
.stat{text-align:center}
.stat .n{font-family:var(--display);font-size:var(--t-2xl);color:var(--gold);line-height:1.2}
.stat .l{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(237,239,224,.85);margin-top:var(--s-2);line-height:1.7}

.step{padding:var(--s-8) var(--s-6);border-radius:var(--radius);background:#fff;
  border:1px solid var(--rule);box-shadow:var(--shadow-card)}
.step .num{font-family:var(--display);font-size:var(--t-xl);color:var(--gold-ink)}
.step .num::after{content:"";display:block;width:30px;height:1.5px;
  background:var(--gold);margin-top:var(--s-2)}
.step h3{margin:var(--s-3) 0 var(--s-2)}
.step p{font-family:var(--sans);font-size:var(--t-sm)}

/* Portrait plate */
.portrait{background:#fff;border:1px solid rgba(44,44,44,.5);padding:var(--s-3);
  box-shadow:var(--shadow-frame)}
.portrait .inner{border:1px solid rgba(44,44,44,.25);padding:var(--s-10) var(--s-6) var(--s-8);
  text-align:center}
.portrait .ph{width:150px;height:150px;border-radius:50%;background:var(--paper-deep);
  border:1.5px solid var(--gold);margin:0 auto var(--s-5);display:block;
  object-fit:cover;filter:saturate(.82) contrast(1.03)}
.portrait .nm{font-family:var(--display);font-size:var(--t-lg);color:var(--ink)}
.portrait .rl{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s-2);line-height:1.7}

/* Facts panel */
.facts{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-8);box-shadow:var(--shadow-card)}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s-6)}
.facts dt{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);white-space:nowrap}
.facts dd{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.facts dl > *:nth-last-child(-n+2){border-bottom:none}

/* ── 8 · NAVIGATION ────────────────────────────────────────────────────── */
main:focus{outline:none}
#main{scroll-margin-top:72px}
nav.site{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);min-height:64px;position:relative}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;flex-shrink:0}
.brand .mark{width:44px;color:var(--ink);display:block}
.brand .mark svg,.brand .mark img{width:100%;height:auto;display:block}
.brand span{font-family:var(--display);font-size:var(--t-md);color:var(--ink);white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:var(--s-6);list-style:none;
  font-family:var(--sans);font-size:var(--t-sm)}
.navlinks a{color:var(--body);text-decoration:none;padding:var(--s-1) 0;
  border-bottom:1.5px solid transparent}
.navlinks a:hover{color:var(--ink)}
.navlinks a:not(.btn)[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.navlinks .btn{padding:9px var(--s-5);font-size:var(--t-xs);border-bottom:none}
.navlinks .btn:hover{border-bottom:none}
.navtoggle{display:none;background:none;border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3);font-family:var(--type);
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);cursor:pointer}

.pagehead{padding:var(--s-20) 0 var(--s-16);
  background-image:radial-gradient(rgba(44,44,44,.12) 1px,transparent 1.15px);
  background-size:22px 22px;border-bottom:1px solid var(--line)}
.pagehead .wrap{max-width:820px}
.pagehead h1{margin-bottom:var(--s-5)}
.pagehead p{font-size:var(--t-lg);max-width:640px}

/* Plated page head: the section's painting on the right, copy on paper at the
   left. The paintings are already graded with an open field on one side, so all
   this has to do is mask that side into the paper. Same mask-on-the-box
   approach as the home hero, for the same reason — the plate is cover-cropped,
   so a fade baked into the file would be trimmed off at some viewport widths. */
.pagehead.plated{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehead.plated picture{display:contents}
.pagehead.plated .head-plate{position:absolute;top:0;right:0;width:54%;height:100%;
  object-fit:cover;object-position:center;z-index:0;pointer-events:none;opacity:.95;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);
  mask-image:linear-gradient(to right,transparent 0,#000 42%)}
.pagehead.plated .wrap{position:relative;z-index:2;max-width:var(--wrap)}
.pagehead.plated .head-copy{max-width:min(560px,48%)}
.pagehead.plated .head-copy p{max-width:none}

@media(max-width:900px){
  /* Too narrow to sit side by side. The plate becomes a band under the copy at
     its own proportion, matching how the home hero degrades. */
  .pagehead.plated{display:flex;flex-direction:column;padding-bottom:0}
  .pagehead.plated .wrap{order:1}
  .pagehead.plated picture{order:2;display:block;margin-top:var(--s-12)}
  .pagehead.plated .head-plate{position:static;width:100%;height:auto;
    -webkit-mask-image:none;mask-image:none}
  .pagehead.plated .head-copy{max-width:none}
  }

.crumbs{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);
  margin-bottom:var(--s-4);list-style:none;display:flex;gap:var(--s-2);flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"/";margin-right:var(--s-2);color:var(--rule)}

/* Summit / CTA band */
.summit{background:var(--ink-deep);color:var(--paper);text-align:center;
  padding:var(--s-20) 0 0;position:relative;
  background-image:radial-gradient(rgba(250,248,244,.06) 1px,transparent 1.15px);
  background-size:22px 22px}
.summit h2{color:var(--paper)}
.summit p{max-width:560px;margin:0 auto var(--s-8);color:#c9c4b8}
.summit .kicker{color:#9a9384}
.summit .fig{color:#a89c78;margin-top:var(--s-5)}
.summit .pan{display:block;width:100%;margin-top:var(--s-14);
  height:clamp(130px,20vw,290px);overflow:hidden;color:rgba(250,248,244,.14)}
.summit .pan svg,.summit .pan img{width:100%;height:100%;object-fit:cover;
  object-position:center top;display:block}
@media(max-width:640px){.summit .pan{height:110px;margin-top:var(--s-10)}}

footer.site{padding:var(--s-12) 0 var(--s-14);border-top:1px solid var(--line);
  background:var(--paper)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-10);
  margin-bottom:var(--s-8)}
footer.site .fb{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
footer.site .fb .mark{width:36px;color:var(--ink)}
footer.site .fb span{font-family:var(--display);font-size:var(--t-base);color:var(--ink)}
footer.site h2{margin-bottom:var(--s-3);color:var(--muted);font-family:var(--type);
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:400}
footer.site ul{list-style:none;font-family:var(--sans);font-size:var(--t-sm)}
footer.site ul li{margin-bottom:var(--s-1)}
footer.site ul a{display:inline-block;padding:var(--s-2) 0}
footer.site a{color:var(--body);text-decoration:none}
footer.site a:hover{color:var(--link)}
footer.site p{font-family:var(--sans);font-size:var(--t-sm);color:var(--muted)}
footer.site .base{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-5);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s-6)}

/* ── 9 · TABLES & LISTS ─────────────────────────────────────────────────── */
.ledgerlist{width:100%;min-width:560px;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-sm)}
.ledgerlist th{text-align:left;font-family:var(--type);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400;
  padding:0 var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--rule)}
.ledgerlist td{padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.ledgerlist td:first-child{color:var(--ink);font-family:var(--serif);font-size:var(--t-base)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.creds{font-family:var(--sans);font-size:var(--t-sm);color:var(--body);list-style:none}
.creds li{padding:var(--s-3) 0;border-bottom:1px solid var(--line);display:flex;
  gap:var(--s-3);align-items:baseline}
.creds li::before{content:"";width:14px;height:1.5px;background:var(--gold);
  flex-shrink:0;transform:translateY(-4px)}

.ticks{list-style:none;font-family:var(--sans);font-size:var(--t-sm)}
.ticks li{padding:var(--s-2) 0 var(--s-2) var(--s-5);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:1.5px;
  background:var(--link)}

.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-10);
  border-top:1px solid var(--rule)}
.roster .row{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.roster .nm{font-family:var(--display);font-size:var(--t-md);color:var(--ink);line-height:1.35}
.roster .what{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);
  text-align:right;flex-shrink:0;max-width:52%}
.roster .row.past .nm{color:var(--body)}

/* Case-study cards */
.route{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card)}
.chartwrap{position:relative;background:var(--paper);border-bottom:1px solid rgba(44,44,44,.18)}
.chartwrap svg.chart{display:block;width:100%}
.route .body{padding:var(--s-5) var(--s-6) var(--s-8)}
.route .res{font-family:var(--display);font-size:var(--t-xl);color:var(--ink);line-height:1.25}
.route .res .u{font-size:var(--t-base);color:var(--muted);font-family:var(--serif)}
.route .who{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:var(--s-2) 0 var(--s-3)}
.route p{font-family:var(--sans);font-size:var(--t-sm)}
.caserow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-5)}
.caserow > div{border-top:1px solid var(--line);padding-top:var(--s-3)}
.caserow h3{margin-bottom:var(--s-2)}
.caserow p{font-family:var(--sans);font-size:var(--t-sm)}

/* ── 10 · FORMS ─────────────────────────────────────────────────────────── */
.field{margin-bottom:var(--s-6)}
.field label{display:block;font-family:var(--type);font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
.field .hint{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);
  margin-top:var(--s-2)}
input[type=text],input[type=email],input[type=url],input[type=tel],textarea,select{
  /* 16px minimum: below it, mobile Safari zooms the viewport on focus and does
     not zoom back out on blur, stranding the visitor mid-form. */
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4);transition:border-color var(--fast) var(--ease),
  box-shadow var(--fast) var(--ease)}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(212,160,18,.18)}
input::placeholder,textarea::placeholder{color:#a9a293}
.field.invalid input,.field.invalid textarea{border-color:#9d3a2c}
.field .err{font-family:var(--sans);font-size:var(--t-xs);color:#9d3a2c;margin-top:var(--s-2)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-5) var(--s-6) var(--s-6)}
legend{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);padding:0 var(--s-2)}

.notice{border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:var(--s-4) var(--s-5);background:#fff;
  font-family:var(--sans);font-size:var(--t-sm)}
.notice.good{border-left-color:var(--forest)}
.notice.bad{border-left-color:#9d3a2c}

/* ── 11 · QUOTE & TESTIMONIAL ───────────────────────────────────────────── */
.quote{border-left:2px solid var(--gold);padding-left:var(--s-6);margin:var(--s-8) 0}
.quote p{font-family:var(--display);font-size:var(--t-lg);line-height:1.5;
  color:var(--ink)}
.quote{margin-top:var(--s-8)}
.quote cite{display:block;margin-top:var(--s-4);font-family:var(--type);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-style:normal}
.testimonial{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-8) var(--s-6);box-shadow:var(--shadow-card);position:relative}
.testimonial .mk{color:var(--gold);font-family:var(--display);font-size:2.4rem;
  line-height:.6;display:block;margin-bottom:var(--s-3)}
.testimonial{margin:0;display:flex;flex-direction:column}
.testimonial blockquote{margin:0}
.testimonial p{font-family:var(--serif);font-size:var(--t-sm);line-height:1.7;color:var(--ink)}
.testimonial figcaption{margin-top:auto;padding-top:var(--s-5);
  border-top:1px solid var(--line);font-family:var(--type);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.testimonial figcaption cite{font-style:normal;color:var(--ink)}
.testimonial + .testimonial{margin-top:0}

/* ── 12 · FAQ ───────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-5) var(--s-8) var(--s-5) 0;
  font-family:var(--display);font-size:var(--t-md);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--s-2);top:50%;
  width:10px;height:10px;border-right:1.5px solid var(--link);
  border-bottom:1.5px solid var(--link);transform:translateY(-70%) rotate(45deg);
  transition:transform var(--slow) var(--ease)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq summary:hover{color:var(--link)}
.faq .answer{padding:0 var(--s-8) var(--s-6) 0;font-family:var(--sans);font-size:var(--t-sm)}

/* ── 13 · TIMELINE ──────────────────────────────────────────────────────── */
.timeline{list-style:none;position:relative;padding-left:var(--s-8)}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;
  width:1.5px;background:var(--rule-soft)}
.timeline li{position:relative;padding-bottom:var(--s-8)}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s-8) + 1px);
  top:7px;width:11px;height:11px;border-radius:50%;background:var(--paper);
  border:2px solid var(--gold)}
.timeline .yr{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.2em;
  color:var(--link);display:block;margin-bottom:var(--s-1)}
.timeline h3{margin-bottom:var(--s-1)}
.timeline p{font-family:var(--sans);font-size:var(--t-sm)}

/* ── 14 · ENGRAVINGS ────────────────────────────────────────────────────── */
/* Library assets are single paths with fill="currentColor" and no background,
   so colour is inherited. These helpers only handle size and tone. */
.engraving{display:block;color:var(--ink)}
.engraving svg,.engraving img{width:100%;height:auto;display:block}
.engraving.xs{width:40px}
.engraving.sm{width:64px}
.engraving.md{width:110px}
.engraving.lg{width:180px}
.engraving.xl{width:280px}
.engraving.soft{color:var(--rule)}
.engraving.gold{color:var(--gold-ink)}
.engraving.reverse{color:var(--paper)}
.engraving.center{margin-inline:auto}

/* Home hero: copy left, plate right.
   The plate sits in normal flow at its native 2877:1405 and is never cropped or
   rescaled — the crop in the file IS the composition, and the hero takes its
   height from it. The copy is then laid over the empty left field the plate was
   cut to leave. Earlier versions fitted it into a box sized by the copy, which
   meant every viewport width re-cropped the picture differently. */
/* The painting is split across two layers that straddle the header/proof
   boundary. The background lives inside the header; the foreground column is
   anchored to the bottom of this stage, so it stands in the green band and
   rises out of it over the header. The stage is what lets one element cross
   that edge; it clips the column at the bottom of the green. */
/* The STAGE is what fills the first screen, not the header — so the green strip
   and the column standing in it are always above the fold. The header then
   takes whatever height the proof band leaves. */
.hero-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:calc(100vh - 65px);min-height:calc(100svh - 65px)}
.hero-fg{position:absolute;right:1%;bottom:0;z-index:5;pointer-events:none;
  width:min(38%,580px);line-height:0}
.hero-fg img{display:block;width:100%;height:auto}

/* Fills the stage minus the proof band. The floor keeps it from collapsing on
   a short window, where scrolling is the lesser evil. */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  flex:1 1 auto;min-height:400px;padding:var(--s-14) 0}
.hero picture{display:contents}
/* The background layer fills the whole header and is anchored right, so the
   city stays put as the viewport changes and the water runs off the left. The
   blend into the paper is a CSS mask on the box, not a feather baked into the
   file: cover-cropping would trim a baked-in one away and leave a hard edge. */
.hero .hero-plate{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:right center;z-index:0;pointer-events:none;
  opacity:.95;
  -webkit-mask-image:linear-gradient(to right,transparent 6%,#000 46%);
  mask-image:linear-gradient(to right,transparent 6%,#000 46%)}
/* The dot grid every other page head carries. It has to be painted OVER the
   plate — the plate is opaque and would cover a background-image on .hero. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(44,44,44,.12) 1px,transparent 1.15px);
  background-size:22px 22px}
.hero .wrap{position:relative;z-index:2;width:100%}
/* Capped short of half the wrap: the citadel starts around 55% across, and copy
   running under it is the one thing that makes the plate look like a mistake. */
.hero-copy{max-width:min(600px,50%)}
/* Smaller than a page-head h1. Those carry a full sentence; this is three words,
   and at --t-3xl it read as a shout. */
/* The underline's own padding-bottom hangs below the h1 line box and eats most
   of this margin, so the visible gap between the gold rule and the lede is much
   smaller than the number suggests. Sized against the rule, not the text. */
.hero-copy h1{font-size:clamp(1.7rem,1.35rem + 1.2vw,2.3rem);margin-bottom:var(--s-10)}
/* The quoted headline is longer than the old three-word one. Where it must
   wrap, clone gives each line its own gold rules instead of one broken pair. */
.hero-copy .uline{white-space:normal;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-copy .lede{margin-bottom:var(--s-8)}
/* A shorter measure than the copy column, so the lede reads as a tighter block
   under the headline. Desktop only — narrowing it on a phone would just cramp
   an already narrow column. */
@media(min-width:901px){.hero-copy .lede{max-width:75%}}

/* The plate is 2.048:1, so the hero gets shorter as the viewport narrows while
   the copy does not. Around 900px they cross and the copy no longer clears the
   picture, so the plate stops being a ground and becomes a band under the copy —
   still at its native proportion. */
@media(max-width:900px){
  /* No full height here: a full-height panel beside the copy needs the width to
     put them side by side. The plate returns to flow as a band under the copy,
     which is why the picture wrapper goes back to being a real box. */
  .hero-stage{display:block;min-height:0}
  .hero{display:flex;flex-direction:column;align-items:stretch;
    flex:none;min-height:0;padding:var(--s-16) 0 0}
  .hero .wrap{order:1}
  .hero picture{order:2;display:block;margin-top:var(--s-12)}
  .hero .hero-plate{position:static;width:100%;height:auto;
    -webkit-mask-image:none;mask-image:none}
  .hero-copy{max-width:none}
  /* At this width the column no longer reaches out of the green band — it just
     sits in a corner of it as an ornament. The stacked hero crop already shows
     the pedestal and the architect, so drop the duplicate. */
  .hero-fg{display:none}
  }

/* Hero band: the massif full-bleed beneath the hero copy. Height is capped and
   the art is cropped to its peaks, so the headline and CTAs stay above the fold
   instead of being pushed down by a 560px-tall image. */
.hero-band{width:100%;height:clamp(160px,26vw,380px);overflow:hidden;
  display:flex;margin-top:var(--s-12)}
/* cover crops ~36% of the massif's height at this ratio; anchor to the TOP so
   that slice is the skyline. Anchoring lower showed the middle of the rock face,
   which reads as texture rather than as a mountain. */
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block}
/* The band is a flex container; without this the <picture> becomes the flex item
   and the img sizes to 100% of an intrinsically-sized wrapper, not of the band. */
.hero-band picture{display:contents}
@media(max-width:640px){.hero-band{height:150px;margin-top:var(--s-8)}}

/* Photographic plate variant. Two differences from the engraving: the top third
   of the plate is empty sky, so the crop is anchored to the Acropolis rather
   than the top edge; and a plate is a warmer, denser grey than the paper, so the
   bottom is faded out to keep the band from ending on a hard horizontal edge. */
.hero-band.photo{height:clamp(220px,32vw,460px)}
.hero-band.photo img{object-position:center 44%;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
/* Under 640px the full plate scales down until the Acropolis is unreadable, so
   <picture> swaps in a tighter crop. That file is already framed and feathered
   to the paper, hence no re-centring and no second mask. */
@media(max-width:640px){
  .hero-band.photo{height:210px}
  .hero-band.photo img{object-position:center center;
    -webkit-mask-image:none;mask-image:none}
  }

/* A decorative engraving bleeding behind content */
.plate{position:relative;overflow:hidden}
.plate > .bleed{position:absolute;pointer-events:none;color:rgba(44,44,44,.07);
  z-index:0}
.plate > *:not(.bleed){position:relative;z-index:1}

figure.plate-fig{margin:var(--s-8) 0;text-align:center}
figure.plate-fig figcaption{margin-top:var(--s-3);font-family:var(--serif);
  font-style:italic;font-size:var(--t-sm);color:var(--muted)}

/* The fresco band: Alma-Tadema's garland-hangers on a Pompeian red wall as a
   full-bleed layer, copy set on the flat wall like a painted inscription.
   Reversed text on a saturated ground gets the full compensation set: a
   shorter measure (560px, near 60 characters), one size step up on body and
   note, a touch more leading, an even paragraph cadence, and NO translucent
   text. Alpha-dimmed smalls fell to 3.5:1 on the lightest stones
   (srgb 197,109,69); solid paper holds 4.67:1 there under the scrim, and
   the display sizes sit near 5:1. Mobile deepens the scrim to 5.1:1+. */
section.block.fresco{position:relative;overflow:hidden;color:var(--paper)}
.fresco picture{display:contents}
.fresco .fresco-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;z-index:0;pointer-events:none}
.fresco::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(20,8,4,.36) 0,rgba(20,8,4,.30) 40%,
    rgba(20,8,4,.12) 70%,rgba(20,8,4,.10) 100%)}
.fresco .wrap{position:relative;z-index:2}
.fresco h2,.fresco .bigq{color:#fff}
.fresco .kicker{color:var(--paper)}
.fresco .sec-head{max-width:560px;margin-bottom:var(--s-6)}
.fresco .wrap > p{max-width:560px;font-size:var(--t-md);line-height:1.75}
.fresco .wrap > p + p{margin-top:var(--s-6)}
.fresco .sans{font-size:var(--t-base);color:var(--paper);margin-top:var(--s-4)}
@media(max-width:900px){
  .fresco::before{background:rgba(20,8,4,.38)}
  }

/* The one-question diagnostic, displayed large. */
.bigq{font-family:var(--display);font-size:var(--t-2xl);line-height:1.3;
  color:var(--ink);max-width:24ch;margin:var(--s-12) 0 var(--s-3)}

/* Cornerstone line on registry cards. */
.route .built{font-family:var(--type);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--link);margin:2px 0 var(--s-2)}

/* The Agrippa inscription, set like the carving: the credit line small,
   FECIT large. Two spans so it never has to break mid-line on a phone. */
.inscription{margin:var(--s-6) 0 var(--s-6)}
.inscription span{display:block;font-family:var(--display);color:var(--ink)}
.inscription .l1{font-size:clamp(.82rem,.6rem + 1.1vw,1.35rem);letter-spacing:.14em}
.inscription .l2{font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);letter-spacing:.3em;
  margin-top:var(--s-2);color:var(--gold-ink)}

/* ── 15 · UTILITIES, PRINT, MOTION ──────────────────────────────────────── */
.center{text-align:center}
.strong-ink{color:var(--ink)}
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--s-4)}.mb-8{margin-bottom:var(--s-8)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.flow{display:block;width:100%}

@media(max-width:980px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid2,.split,.split.even{grid-template-columns:1fr}
  .split{gap:var(--s-10)}
  .proof .wrap{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-5)}
  .roster{grid-template-columns:1fr;gap:0}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:var(--s-8)}
}
@media(max-width:820px){
  .navtoggle{display:block}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(44,44,44,.07);
    padding:var(--s-2) var(--s-6) var(--s-5);margin:0 calc(-1 * var(--s-6))}
  .navlinks.open{display:flex}
  .navlinks li{border-bottom:1px solid var(--line)}
  .navlinks li:last-child{border-bottom:none;padding-top:var(--s-4)}
  .navlinks a{display:block;padding:var(--s-3) 0;font-size:var(--t-base)}
  .navlinks a:not(.btn)[aria-current="page"]{border-bottom-color:transparent;color:var(--link)}
  .navlinks .btn{display:inline-block;padding:var(--s-3) var(--s-6);font-size:var(--t-sm)}
}
@media(max-width:640px){
  section.block{padding:var(--s-16) 0}
  .pagehead{padding:var(--s-14) 0 var(--s-12)}
  .grid4{grid-template-columns:1fr}
  .caserow{grid-template-columns:1fr;gap:0}
  .facts dl{grid-template-columns:1fr;gap:0}
  .facts dt{padding:var(--s-3) 0 2px;border-bottom:none}
  .facts dd{padding:0 0 var(--s-3)}
  .roster .row{flex-direction:column;gap:var(--s-1)}
  .roster .what{text-align:left;max-width:100%}
  footer.site .cols{grid-template-columns:1fr}
  }

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  body::after,nav.site,.summit .pan,.flow,.navtoggle{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  section.block{padding:var(--s-6) 0;break-inside:avoid}
  .card,.route,.step,.facts{break-inside:avoid;box-shadow:none}
  .summit{background:#fff;color:#000}
  .summit h2,.summit p{color:#000}
}