/* ===========================================================================
   HMG Hotels — Canada
   hmghotels.ca · static site · Cloudflare Pages

   Design lineage: the palette, the eyebrow rhythm, the bordered stat band and
   the six-stage rail all come from the parent site (hmg.ge). The typography is
   a single grotesque throughout, which is also what hmg.ge resolves to in
   English — it deliberately maps Latin headings to its sans file.

   Fonts are self-hosted. No third-party stylesheet blocks the first paint.
   =========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2?v=65850a37') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The wordmark is the parent company's own lettering, served from this site so
   the two properties read as one brand. Both faces are subset to Latin letters
   and a space — they set nine words of logotype and nothing else. */
@font-face{
  font-family:'HMG Logo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/hmg-logo.woff2?v=7ff95d2f') format('woff2');
  unicode-range:U+0020,U+0041-005A,U+0061-007A;
}
@font-face{
  font-family:'HMG Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/hmg-sans-lat.woff2?v=5d012562') format('woff2');
  unicode-range:U+0020,U+0041-005A,U+0061-007A;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --bg:#FAF9F7; --bg-2:#F2F0EB; --white:#fff;
  --ink:#16181C; --ink-soft:#2E3238; --txt:#4A4F57; --muted:#666C76;
  --line:#E3E0DA; --line-2:#D3CFC7;
  --gold:#A8873E; --gold-lt:#D9BE7E; --gold-soft:#F3EEE1; --gold-deep:#8A6D2C;
  /* --gold is the brand gold and is used for rules, borders, tick marks and
     large numerals. It only reaches 3.2:1 on the cream ground, so small text
     and solid buttons use the deeper --gold-ink instead: same hue family,
     5.3:1, which is what WCAG AA — and therefore AODA — asks for. */
  --gold-ink:#7E6427; --gold-btn:#8A6D2C; --gold-btn-h:#7A6025;
  /* the italic accent inside a heading is large text, so 3:1 is the bar;
     the brand gold sits at 2.97 on the tinted ground and this clears it */
  --gold-display:#9C7C33;
  --dark:#141210; --dark-2:#1E1B18;

  /* One family, front to back. Helvetica is the brief; Inter is Helvetica's
     screen-native descendant — same skeleton, wider language coverage, and it
     holds its shape at 11 px as well as at 58 px. Helvetica Neue and Helvetica
     sit right behind it in the stack for anyone without the webfont. */
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:var(--sans);

  --wrap:1280px; --pad:32px; --hh:78px;
  --r:3px;
}

/* --- Reset ---------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);
     scrollbar-gutter:stable;scroll-padding-top:calc(var(--hh) + 20px)}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);
     font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
/* height:auto is load-bearing: the width/height attributes on every <img>
   (kept for layout stability) act as presentational hints, and without
   this both dimensions are set, which makes the browser ignore every
   aspect-ratio below. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold-soft);color:var(--ink)}

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:500;
            line-height:1.18;letter-spacing:-.022em;
            /* keeps a two-line headline from leaving one orphan word */
            text-wrap:balance}
h1{font-size:clamp(31px,4.7vw,54px);font-weight:600;letter-spacing:-.03em;margin-bottom:20px}
h2{font-size:clamp(25px,3.4vw,40px);font-weight:600;letter-spacing:-.028em;margin-bottom:18px}
h3{font-size:clamp(18px,1.85vw,22px);font-weight:600;line-height:1.35;letter-spacing:-.018em;margin-bottom:12px}
h4{font-size:16px;font-weight:600;line-height:1.45;margin-bottom:10px}
h1:last-child,h2:last-child,h3:last-child,h4:last-child{margin-bottom:0}
em.g{font-style:normal;color:var(--gold-display);font-weight:600}
p{margin-bottom:18px}
p:last-child{margin-bottom:0}

.eyebrow{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
         letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px}
.lead{font-size:clamp(17px,1.55vw,19px);font-weight:300;color:var(--txt);max-width:62ch;
      text-wrap:pretty}
.small{font-size:13.5px;color:var(--muted);line-height:1.7}
.pull{border-left:2px solid var(--gold);padding:14px 0 14px 26px;
      font-size:19px;line-height:1.6;color:var(--ink-soft);margin:28px 0;
      letter-spacing:-.012em}

/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
section{padding:clamp(64px,8vw,104px) 0}
/* A second ground, for when two sections of the same weight sit next to
   each other and the page needs a seam between them. */
section.alt{background:var(--bg-2);border-top:1px solid var(--line);
            border-bottom:1px solid var(--line)}
.tinted{background:var(--bg-2)}
.inked{background:var(--ink);color:#C9C6C0}
.inked h2,.inked h3{color:#fff}
.inked .lead,.inked p{color:#C9C6C0}
/* --gold-ink is tuned for the cream ground and falls under 4.5:1 on the dark
   one; on dark sections the link takes the light gold instead. */
.inked .arrow-link{color:var(--gold-lt)}
.inked .arrow-link:hover{border-color:var(--gold-lt)}
.inked .eyebrow{color:var(--gold-lt)}
.sec-head{max-width:70ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{margin-bottom:18px}
.hr{height:1px;background:var(--line);border:0}

/* --- Skip link + focus ---------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;
      padding:12px 20px;border-radius:0 0 var(--r) 0;font-size:14px;font-weight:500}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     padding:14px 26px;min-height:47px;font-size:13.5px;font-weight:600;letter-spacing:.02em;
     border-radius:var(--r);border:1px solid transparent;cursor:pointer;
     transition:background .22s,color .22s,border-color .22s,transform .22s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:#2A2E35;border-color:#2A2E35}
.btn-gold{background:var(--gold-btn);color:#fff;border-color:var(--gold-btn)}
.btn-gold:hover{background:var(--gold-btn-h);border-color:var(--gold-btn-h)}
.btn-line{border-color:var(--line-2);color:var(--ink-soft);background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(20,18,16,.24);
           backdrop-filter:blur(5px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.arrow-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
            color:var(--gold-ink);border-bottom:1px solid transparent;transition:.2s;padding-bottom:1px}
.arrow-link:hover{border-color:var(--gold-ink)}
.arrow-link::after{content:'→';transition:transform .2s}
.arrow-link:hover::after{transform:translateX(3px)}

/* --- Header --------------------------------------------------------------- */
.hd{position:sticky;top:0;z-index:60;height:var(--hh);background:rgba(250,249,247,.92);
    backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hd.on-dark{background:transparent;border-bottom-color:rgba(255,255,255,.14)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
/* The wordmark is set in type rather than shipped as an image: it stays crisp
   at any density and takes its colour from the header, so the same mark works
   on the cream header and over a dark hero. This is the parent site's own
   treatment of the logo. */
.logo{display:block;line-height:1;white-space:nowrap;flex:0 0 auto;color:var(--ink)}
.logo b{display:block;font-size:23px;font-weight:600;
        font-family:'HMG Logo',Georgia,'Times New Roman',serif;
        letter-spacing:.14em;line-height:1}
.logo i{display:block;font-style:normal;font-family:'HMG Sans',var(--sans);font-size:7.2px;
        letter-spacing:.2em;font-weight:600;margin-top:5px;opacity:.66;line-height:1}
.hd.on-dark .logo{color:#fff}
@media(max-width:420px){.logo b{font-size:21px;letter-spacing:.1em}.logo i{display:none}}
.brand .ca{font-size:9.5px;font-weight:600;letter-spacing:.2em;padding:3px 8px;
           border:1px solid var(--line-2);color:var(--muted);border-radius:2px;white-space:nowrap}
.hd.on-dark .brand .ca{border-color:rgba(255,255,255,.42);color:rgba(255,255,255,.86)}
/* The row takes the whole space between the wordmark and the button and
   spreads the links across it, so the header reads as one filled band
   rather than a cluster in the middle. space-evenly keeps every interval
   identical, including the two at the ends; the gap is only a floor, so
   on a narrow laptop the links close up instead of colliding. Below
   900px the row is replaced by the drawer and none of this applies. */
.nav{display:flex;align-items:center;flex:1 1 auto;justify-content:space-evenly;
     gap:clamp(20px,2vw,34px);margin:0 clamp(14px,2vw,40px)}
.nav a{font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:6px 0;
       border-bottom:1.5px solid transparent;transition:.2s;white-space:nowrap}
.nav a:hover{color:var(--gold-ink)}
.nav a[aria-current="page"]{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.hd.on-dark .nav a{color:rgba(255,255,255,.82)}
.hd.on-dark .nav a:hover,.hd.on-dark .nav a[aria-current="page"]{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}
.hd-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hd .btn{padding:10px 19px;min-height:39px;font-size:12.5px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;
        border-radius:var(--r);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:1.5px;background:var(--ink)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.hd.on-dark .burger{border-color:rgba(255,255,255,.34)}
.hd.on-dark .burger span,.hd.on-dark .burger span::before,.hd.on-dark .burger span::after{background:#fff}

/* mobile drawer */
.drawer{position:fixed;inset:var(--hh) 0 0;background:var(--bg);z-index:55;padding:26px var(--pad) 40px;
        overflow-y:auto;display:none;flex-direction:column;gap:2px}
.drawer.open{display:flex}
.drawer a{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
          padding:15px 0;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:22px;font-family:var(--sans);font-size:13.5px;border-bottom:0}
body.locked{overflow:hidden}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;
      min-height:clamp(520px,86vh,860px);display:flex;align-items:center;
      margin-top:calc(var(--hh) * -1);padding-top:var(--hh)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
             filter:saturate(.98) contrast(1.1) brightness(.62)}
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(120deg,rgba(24,20,12,.34),rgba(14,20,28,.3)),
  linear-gradient(100deg,rgba(12,14,18,.93) 0%,rgba(12,14,18,.74) 42%,
                  rgba(12,14,18,.3) 76%,rgba(12,14,18,.5) 100%)}
.hero-bg::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,#A8873E,#2B3A4A);mix-blend-mode:color;opacity:.1}
.hero .wrap{position:relative;z-index:3;padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(64px,8vw,104px)}
.hero h1{color:#fff;font-weight:600;max-width:19ch;letter-spacing:-.032em;
         text-shadow:0 2px 30px rgba(0,0,0,.42);margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--gold-lt);font-weight:600}
.hero .lead{color:#D3D1CC;text-shadow:0 1px 14px rgba(0,0,0,.55);max-width:56ch}
.hero .eyebrow{color:var(--gold-lt)}
.hero .btn-row{margin-top:34px}
.hero-note{margin-top:30px;font-size:12.5px;color:rgba(255,255,255,.56);letter-spacing:.04em}

/* compact hero for interior pages */
.hero-sm{min-height:clamp(340px,52vh,480px)}
.hero-sm h1{max-width:22ch;margin-bottom:16px}

/* breadcrumb */
.crumb{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:22px;letter-spacing:.04em}
.crumb a{border-bottom:1px solid rgba(255,255,255,.26)}
.crumb a:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.crumb span{margin:0 7px;opacity:.5}

/* --- Stat band ------------------------------------------------------------ */
.stats{background:var(--white);border-bottom:1px solid var(--line);
       display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(30px,4vw,46px) 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(27px,3.3vw,42px);
        color:var(--ink);font-weight:600;line-height:1;letter-spacing:-.03em}
.stat span{display:block;font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.05em}
.hero-stats{display:flex;gap:34px 46px;flex-wrap:wrap;margin-top:36px;padding-top:30px;
            border-top:1px solid rgba(255,255,255,.17)}
.hero-stats b{display:block;font-size:clamp(26px,3.1vw,38px);
              color:var(--gold-lt);font-weight:600;line-height:1;letter-spacing:-.03em}
.hero-stats span{display:block;font-size:11.5px;color:#B6B4AF;letter-spacing:.09em;
                 text-transform:uppercase;margin-top:9px;line-height:1.55}

/* --- Grids & cards -------------------------------------------------------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,70px);align-items:center}
.split.rev>*:first-child{order:2}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:30px 28px;transition:border-color .22s,box-shadow .22s,transform .22s;
      display:flex;flex-direction:column;height:100%}
.card:hover{border-color:var(--line-2);box-shadow:0 14px 34px rgba(22,24,28,.07);transform:translateY(-2px)}
.card .num{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--gold-ink);
           letter-spacing:.06em;margin-bottom:14px;display:block}
.card h3{margin-bottom:11px}
.card p{font-size:14.8px;line-height:1.7;color:var(--txt)}
.card .meta{margin-top:auto;padding-top:18px;font-size:12px;color:var(--muted);letter-spacing:.05em}
.card-link:hover{border-color:var(--gold-lt)}
a.card{color:inherit}

/* framed image */
.figure{position:relative}
.figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.figure.wide img{aspect-ratio:16/10}
.figure::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,#A8873E,#2B3A4A);mix-blend-mode:color;opacity:.1}
.figure::after{content:'';position:absolute;inset:-14px;border:1px solid var(--line-2);pointer-events:none}
.figure figcaption{margin-top:24px;font-size:12px;color:var(--muted);letter-spacing:.04em}

/* --- Checklist ------------------------------------------------------------ */
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:26px;font-size:15px;line-height:1.65}
.ticks li::before{content:'';position:absolute;left:0;top:9px;width:11px;height:6px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
.inked .ticks li::before{border-color:var(--gold-lt)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tags li{font-size:12px;letter-spacing:.05em;color:var(--ink-soft);background:var(--white);
         border:1px solid var(--line);padding:7px 13px;border-radius:100px}
.inked .tags li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#DAD7D1}

/* --- Process rail --------------------------------------------------------- */
.pframe{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
        box-shadow:0 22px 60px rgba(22,24,28,.07)}
.pframe-top{padding:26px 26px 20px}
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative}
.rail::before{content:'';position:absolute;top:27px;left:8.333%;right:8.333%;height:1.5px;background:var(--line-2)}
.rail .prog{position:absolute;top:27px;left:8.333%;height:1.5px;background:var(--gold);
            transition:width .45s cubic-bezier(.4,0,.2,1);width:0}
.node{position:relative;z-index:2;background:transparent;border:1px solid transparent;border-radius:11px;
      cursor:pointer;padding:10px 6px 12px;display:flex;flex-direction:column;align-items:center;
      text-align:center;min-width:0;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.node .num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);font-size:13px;
  font-weight:600;color:#6E6A60;letter-spacing:.02em;transition:.3s cubic-bezier(.4,0,.2,1);margin-bottom:10px}
.node .nm{font-size:13px;font-weight:600;color:var(--muted);line-height:1.4;transition:.25s}
.node .du{font-size:11.5px;color:#6B6A66;margin-top:3px;font-weight:300;line-height:1.4}
.node:hover{background:var(--white);border-color:var(--line);transform:translateY(-2px)}
.node:hover .num{border-color:var(--gold);color:var(--gold-ink)}
.node.done .num{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-soft)}
.node.on{background:var(--white);border-color:#DCCDA4;box-shadow:0 10px 24px rgba(22,24,28,.08)}
.node.on .num{background:var(--gold-btn);border-color:var(--gold-btn);color:#fff;box-shadow:0 0 0 5px var(--gold-soft)}
.node.on .nm{color:var(--ink)}
.node.on .du{color:var(--txt)}
.stagebox{border-top:1px solid var(--line)}
.panel{display:none}
.panel.on{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph{position:relative;overflow:hidden;padding:44px 44px 48px;color:#fff;background:var(--ink)}
.ph::before{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 90% at 0% 0%,rgba(168,135,62,.26),transparent 62%)}
.ph>*{position:relative;z-index:1}
.ph .st{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:16px}
.ph h3{color:#fff;font-size:clamp(19px,2.1vw,25px);margin-bottom:15px;font-weight:600;
       letter-spacing:-.022em}
.ph p{color:#C3C0BA;font-size:15px;line-height:1.72}
.pd{padding:40px 44px 44px;background:var(--white);display:grid;gap:26px;align-content:start}
.pd h4{font-size:11.5px;font-family:var(--sans);letter-spacing:.16em;text-transform:uppercase;
       color:var(--gold-ink);margin-bottom:13px;font-weight:600}

/* --- Projects ------------------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pcard{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink);display:block}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);
           filter:saturate(.98) contrast(1.04)}
.pcard:hover img{transform:scale(1.045)}
.pcard::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(14,13,11,.84) 100%)}
.pcard .cap{position:absolute;left:22px;right:22px;bottom:19px;z-index:2;color:#fff}
.pcard .cap b{display:block;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.pcard .cap span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
                 color:rgba(255,255,255,.66);margin-top:6px}

/* --- Accordion ------------------------------------------------------------ */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
             font-size:clamp(16.5px,1.7vw,19px);font-weight:600;letter-spacing:-.015em;
             color:var(--ink);line-height:1.45}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'';position:absolute;right:6px;top:33px;width:9px;height:9px;
  border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s}
.acc details[open] summary::after{transform:rotate(-135deg);top:36px}
.acc summary:hover{color:var(--gold-ink)}
.acc .body{padding:0 60px 26px 0;font-size:15.2px;line-height:1.75;color:var(--txt)}
.acc .body p{margin-bottom:14px}

/* --- Forms ---------------------------------------------------------------- */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(26px,3.4vw,40px)}
.field{margin-bottom:20px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em;
             color:var(--ink-soft);margin-bottom:8px}
.field .hint{font-weight:400;color:var(--muted);letter-spacing:0}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);
  border-radius:var(--r);padding:13px 14px;font-size:15px;background:var(--bg);
  color:var(--ink);transition:border-color .2s,background .2s}
.field textarea{min-height:132px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  background:var(--white);box-shadow:0 0 0 3px var(--gold-soft)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B4453C}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;
         color:var(--muted);margin-bottom:22px}
.consent input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}
.consent a{color:var(--gold-ink);border-bottom:1px solid var(--gold-btn)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:16px;font-size:14px;padding:13px 16px;border-radius:var(--r);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--gold-soft);color:#6B5518;border:1px solid var(--gold-lt)}
.form-msg.err{background:#FBEDEC;color:#8E332B;border:1px solid #E3B7B2}
.form button[type=submit][disabled]{opacity:.6;cursor:progress}

/* --- Footer --------------------------------------------------------------- */
.ft{background:var(--ink);color:#9A9791;padding:clamp(48px,6vw,72px) 0 30px;font-size:14px}
.ft a:hover{color:var(--gold-lt)}
/* Five columns on one grid: the three link lists are identical in width so
   the lists read as a set, and the two text columns either side get the
   extra room they need. minmax(0,…) keeps a long label from widening its
   own column and throwing the row out. */
.ft-top{display:grid;
        grid-template-columns:1.45fr repeat(3,minmax(0,1fr)) 1.35fr;
        gap:clamp(22px,2.4vw,38px);align-items:start;
        padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand .logo{color:#fff;margin-bottom:18px}
.ft-brand .logo b{font-size:26px}
.ft-brand .logo i{opacity:.6}
.ft-brand p{font-size:13.5px;line-height:1.75;color:#8C8983;max-width:34ch}
.ft-top>div{min-width:0}
.ft ul li{text-wrap:pretty}
.ft .addr{text-wrap:pretty}
.ft h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
       color:#fff;font-weight:600;margin-bottom:18px;line-height:1.4}
.ft ul{list-style:none;display:grid;gap:10px}
.ft ul a{font-size:13.5px;color:#9A9791;transition:color .2s}
.ft .addr{font-size:13.5px;line-height:1.85;color:#9A9791}
.ft .addr b{color:#D6D3CD;font-weight:500}
/* .small is tuned for the cream ground; on the dark footer it drops to
   3.4:1, so it takes the footer's own body colour there. */
.ft .small{color:#9A9791}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:22px;
        flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:#8E8B85}
.ft-bot a{border-bottom:1px solid rgba(255,255,255,.2)}
.soc{display:flex;gap:16px;margin-top:20px}
.soc a{color:#8C8983;transition:color .2s}
.soc a:hover{color:var(--gold-lt)}
.soc svg{width:19px;height:19px;fill:currentColor;display:block}

/* --- Cookie banner -------------------------------------------------------- */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;background:var(--white);
    border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;
    box-shadow:0 18px 50px rgba(22,24,28,.17);display:none;gap:22px;
    align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:940px;margin:0 auto}
.ck.show{display:flex}
.ck p{font-size:13.3px;line-height:1.65;color:var(--txt);max-width:62ch;margin:0}
.ck p a{color:var(--gold-ink);border-bottom:1px solid var(--gold-btn)}
.ck .btn{padding:11px 20px;min-height:40px;font-size:12.5px}

/* --- Notice / callout ----------------------------------------------------- */
.note{background:var(--gold-soft);border:1px solid var(--gold-lt);border-radius:var(--r);
      padding:20px 24px;font-size:14.5px;line-height:1.7;color:#5F4B15}
.note b{color:#4A3A0F}

/* --- Legal prose ---------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(21px,2.3vw,27px);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:28px 0 10px}
.prose p,.prose li{font-size:15.4px;line-height:1.78}
.prose ul,.prose ol{margin:0 0 18px 22px;display:grid;gap:8px}
.prose a{color:var(--gold-ink);border-bottom:1px solid var(--gold-btn)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--bg-2);font-weight:600;color:var(--ink)}
.tablewrap{overflow-x:auto}



/* --- Nav submenu ---------------------------------------------------------- */
/* Drawn from the header's own materials: the same ground, a hairline, and a
   gold edge along the top so it reads as an extension of the bar rather than
   a system menu floating above the page. No white card, no drop shadow, no
   rounded corners the rest of the site does not use. */
.navgrp{position:relative;display:flex;align-items:center}
.navgrp>a{display:inline-flex;align-items:center;gap:5px;margin-right:-4px}
.navgrp .caret{width:9px;height:9px;flex:0 0 auto;opacity:.55;transition:transform .2s,opacity .2s}
.navgrp:hover .caret,.navgrp:focus-within .caret{opacity:1;transform:translateY(1px)}
.navgrp.has-current>a{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.hd.on-dark .navgrp.has-current>a{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}

.navsub{position:absolute;top:calc(100% + 1px);left:-16px;z-index:70;
        min-width:max-content;padding:2px 0 0;
        background:var(--bg);border:1px solid var(--line);border-top:2px solid var(--gold);
        opacity:0;visibility:hidden;transform:translateY(-3px);
        transition:opacity .16s ease,transform .16s ease,visibility .16s}
.navgrp:hover .navsub,.navgrp:focus-within .navsub{opacity:1;visibility:visible;transform:none}
.navsub a{display:block;padding:12px 20px;font-size:13.5px;font-weight:500;line-height:1.35;
          color:var(--ink-soft);border-bottom:0;white-space:nowrap}
.navsub a:hover{color:var(--gold-ink);background:var(--bg-2)}
.navsub a[aria-current="page"]{color:var(--gold-ink)}

/* Over a dark hero the panel keeps the hero's own darkness instead of
   punching a white hole in it. */
.hd.on-dark .navsub{background:rgba(18,17,15,.94);border-color:rgba(255,255,255,.16);
                    backdrop-filter:saturate(1.3) blur(10px)}
.hd.on-dark .navsub a{color:rgba(255,255,255,.86)}
.hd.on-dark .navsub a:hover{color:var(--gold-lt);background:rgba(255,255,255,.06)}
.hd.on-dark .navsub a[aria-current="page"]{color:var(--gold-lt)}

/* In the drawer the same child is simply indented under its parent. */
.drawer a.sub{font-size:15.5px;font-weight:500;letter-spacing:0;color:var(--txt);
              padding:13px 0 13px 20px;position:relative}
.drawer a.sub::before{content:'';position:absolute;left:0;top:50%;width:11px;height:1px;
                      background:var(--gold)}
.drawer a.sub[aria-current="page"]{color:var(--gold-ink)}


/* --- Project rail --------------------------------------------------------- */
/* One row, four cards visible, the remaining eighteen a swipe or a click away.
   Native scroll with snap rather than a slider library: it works with a
   trackpad, a touch screen, the arrow keys and no JavaScript at all, and the
   buttons below only move the same scroller. */
.rail-wrap{position:relative}
.prail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 22px) / 4);
       gap:22px;overflow-x:auto;scroll-snap-type:x proximity;
       -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
       scrollbar-width:none;padding-bottom:4px}
.prail::-webkit-scrollbar{display:none}
.prail>.pcard{scroll-snap-align:start}
.prail:focus-visible{outline:2px solid var(--gold-btn);outline-offset:6px}

.rail-btn{position:absolute;top:calc(50% - 26px);z-index:3;width:52px;height:52px;
          display:flex;align-items:center;justify-content:center;cursor:pointer;
          color:var(--ink);background:rgba(255,255,255,.94);border:1px solid var(--line-2);
          border-radius:50%;box-shadow:0 8px 26px rgba(22,24,28,.16);
          transition:opacity .2s,color .2s,border-color .2s,transform .2s}
.rail-btn svg{width:12px;height:20px}
.rail-btn:hover{color:var(--gold-ink);border-color:var(--gold-btn)}
.rail-btn.prev{left:-16px}
.rail-btn.next{right:-16px}
@media(max-width:1180px){.rail-btn.prev{left:6px}.rail-btn.next{right:6px}}
@media(max-width:900px){
  .prail{grid-auto-columns:calc((100% - 22px) / 2);
         scroll-padding-left:0}
  .rail-btn{display:none}
}
@media(max-width:620px){
  .ft-top{grid-template-columns:1fr;gap:30px}
.prail{grid-auto-columns:82%}}

/* --- Open roles ----------------------------------------------------------- */
/* Two columns of cards rather than a list: a role is scanned for the title and
   the discipline, and only then read. The apply link carries the role name so
   the form below can be pre-filled from it. */
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.role{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
      padding:28px 26px;display:flex;flex-direction:column;
      transition:border-color .22s,box-shadow .22s,transform .22s}
.role:hover{border-color:var(--line-2);box-shadow:0 14px 34px rgba(22,24,28,.07);
            transform:translateY(-2px)}
.role-head{display:flex;align-items:baseline;justify-content:space-between;
           gap:14px;margin-bottom:12px}
.role h3{font-size:18px;line-height:1.3}
.role .tag{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.13em;
           text-transform:uppercase;color:var(--gold-ink);
           background:var(--gold-soft);border-radius:999px;padding:5px 11px}
.role p{font-size:14.6px;line-height:1.7;color:var(--txt);margin-bottom:18px}
.role .role-loc{display:flex;align-items:center;gap:7px;margin-top:-4px;
                margin-bottom:14px;font-size:13px;color:var(--muted);
                letter-spacing:.02em}
.role .role-loc svg{flex:0 0 auto;color:var(--gold)}
.role .arrow-link{margin-top:auto}
@media(max-width:760px){.roles{grid-template-columns:1fr}}

/* --- Journal cover -------------------------------------------------------- */
/* The blog opens on type rather than a photograph. Every other page of the site
   is introduced by a picture of a building; a page whose subject is writing is
   better served by a masthead and a contents list — it tells the reader what
   this page is before a word of the article is read, and it stops the blog
   borrowing a hotel photograph that has nothing to do with the piece. */
.journal{background:var(--bg-2);border-bottom:1px solid var(--line);
         padding:clamp(46px,6vw,76px) 0 clamp(52px,6vw,80px)}
.journal .crumb{color:var(--muted);margin-bottom:clamp(30px,4vw,46px)}
.journal .crumb a{color:var(--txt);border-bottom:1px solid var(--line-2)}
.journal .crumb a:hover{color:var(--gold-ink);border-color:var(--gold-btn)}
.journal .crumb span{margin:0 7px;opacity:.5}

.journal-grid{display:grid;grid-template-columns:1.25fr .75fr;
              gap:clamp(36px,5vw,72px);align-items:start}
/* A rule between the masthead and the contents, the way a front page carries
   one. It is drawn on the aside so it disappears with it when the two stack. */
.journal-latest{border-left:1px solid var(--line);padding-left:clamp(26px,3vw,44px)}

.journal-mast h1{font-size:clamp(34px,5vw,60px);line-height:1.06;
                 letter-spacing:-.034em;max-width:16ch;margin-bottom:20px;
                 text-wrap:balance}
.journal-mast h1 em{font-style:normal;color:var(--gold-display);font-weight:600}
.journal-mast .lead{max-width:54ch;color:var(--txt)}
.journal-mast .eyebrow{color:var(--gold-ink);margin-bottom:18px;display:block}

.journal-latest h2{font-size:11.5px;font-weight:600;letter-spacing:.17em;
                   text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.latest{list-style:none;counter-reset:none;margin:0;padding:0}
.latest li+li{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.latest a{display:block;color:var(--ink)}
.latest .d{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
           color:var(--muted);margin-bottom:6px}
.latest .t{display:block;font-size:15.5px;font-weight:500;line-height:1.4;
           letter-spacing:-.012em;transition:color .2s}
.latest a:hover .t{color:var(--gold-ink)}

@media(max-width:860px){
  .journal-grid{grid-template-columns:1fr;gap:34px}
  .journal-latest{border-left:0;padding-left:0;border-top:1px solid var(--line);
                  padding-top:28px}
}

/* --- Blog ----------------------------------------------------------------- */
/* The list is type and rules rather than cards with pictures: the pieces are
   read for what they say, and a row of stock thumbnails would say nothing.
   Filtering is done in the page — seven articles do not need a round trip. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4vw,44px)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
      font:inherit;font-size:13px;font-weight:500;color:var(--txt);cursor:pointer;
      background:var(--white);border:1px solid var(--line);border-radius:999px;
      transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.62)}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px)}
.post{display:flex;flex-direction:column;color:var(--ink);
      grid-column:span 1}
.post[hidden]{display:none}

/* The newest piece runs the width of the page with the picture beside the
   text, so the list opens on one article rather than on nine equal thumbnails. */
.post.feature{grid-column:1 / -1;display:grid;
              grid-template-columns:1.15fr .85fr;align-items:center;
              gap:clamp(26px,3vw,46px);
              padding-bottom:clamp(26px,3vw,40px);
              border-bottom:1px solid var(--line);
              margin-bottom:clamp(6px,1vw,14px)}
.post.feature .post-im{order:2}
.post.feature .post-bd{order:1}

.post-im{display:block;overflow:hidden;border-radius:var(--r);
         background:var(--bg-2);margin-bottom:18px}
.post-im img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
             transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.post:hover .post-im img{transform:scale(1.04)}
.post.feature .post-im{margin-bottom:0}
.post.feature .post-im img{aspect-ratio:4/3}

.post-bd{display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
           font-size:11px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--muted);margin-bottom:12px}
.post-meta .tag{color:var(--gold-ink);font-weight:600}
.post-h{display:block;font-family:var(--sans);font-weight:600;
        font-size:18.5px;line-height:1.32;letter-spacing:-.02em;
        margin-bottom:10px;text-wrap:balance;transition:color .2s}
.post:hover .post-h{color:var(--gold-ink)}
.post.feature .post-h{font-size:clamp(24px,2.8vw,34px);line-height:1.18;
                      letter-spacing:-.03em;margin-bottom:14px}
.post-p{display:block;font-size:14.6px;line-height:1.7;color:var(--txt);
        margin-bottom:16px}
.post.feature .post-p{font-size:16px;max-width:52ch}
.post .arrow-link{margin-top:auto}
.posts-note{margin-top:clamp(28px,3vw,40px);color:var(--muted);max-width:66ch}

@media(max-width:1100px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .post.feature{grid-template-columns:1fr;gap:20px}
  .post.feature .post-im{order:1}
  .post.feature .post-bd{order:2}
}
@media(max-width:620px){.posts{grid-template-columns:1fr}}

/* --- File field ----------------------------------------------------------- */
/* The native control is left in place — it is the only one a screen reader and
   a phone both understand — and only the button inside it is restyled. */
.form input.file{padding:11px 14px;background:var(--white);cursor:pointer}
.form input.file::file-selector-button{font:inherit;font-size:13px;font-weight:500;
  margin-right:14px;padding:8px 14px;color:var(--ink);cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px}
.form input.file::file-selector-button:hover{border-color:var(--gold-btn);color:var(--gold-ink)}
.form .file-name{margin-top:9px;font-size:12.5px;color:var(--muted)}
.form .file-name.over{color:#A12C2C}

/* --- Photographic hero ---------------------------------------------------- */
/* The default hero darkens its picture to 62% so white type can sit anywhere
   on it. When the photograph is the point — a mountain, a colour, a building
   worth actually looking at — that treatment throws the picture away. This
   variant keeps the image at full strength and pays for the type with a scrim
   that covers only the column the type occupies, plus a short one under the
   header so the navigation stays readable. The right two thirds of the frame
   are untouched. */
.hero-photo .hero-bg img{filter:none;object-position:center 58%}
.hero-photo .hero-bg::before{opacity:0}
.hero-photo .hero-bg::after{background:
  linear-gradient(180deg,rgba(10,12,14,.62) 0%,rgba(10,12,14,.16) 130px,rgba(10,12,14,0) 220px),
  linear-gradient(100deg,rgba(10,12,14,.84) 0%,rgba(10,12,14,.66) 30%,
                  rgba(10,12,14,.22) 58%,rgba(10,12,14,0) 78%)}
.hero-photo h1,.hero-photo .lead{text-shadow:0 2px 24px rgba(0,0,0,.55)}
/* The homepage photograph is bright and full of detail, so it keeps all of its
   luminance and none of the 62% darkening the default hero applies. The type is
   paid for by a scrim that runs out at roughly two thirds of the frame: the
   left column reads as a dark ground for white type, the right two thirds are
   the photograph itself. */
.hero-photo.hero-open{background:var(--bg-2)}
.hero-photo.hero-open .hero-bg img{filter:none;object-position:70% 45%}
.hero-photo.hero-open .hero-bg::after{background:
  linear-gradient(180deg,rgba(8,10,12,.55) 0%,rgba(8,10,12,.12) 160px,rgba(8,10,12,0) 260px),
  linear-gradient(95deg,rgba(8,10,12,.93) 0%,rgba(8,10,12,.9) 34%,rgba(8,10,12,.55) 50%,
                  rgba(8,10,12,.08) 64%,rgba(8,10,12,0) 72%)}

@media(max-width:900px){
  /* No room for a side scrim on a phone, so the picture takes a light,
     even veil instead and the type keeps its contrast. */
  .hero-photo .hero-bg img{filter:brightness(.66)}
  .hero-photo .hero-bg::after{background:
    linear-gradient(180deg,rgba(10,12,14,.6) 0%,rgba(10,12,14,.2) 140px,
                    rgba(10,12,14,.35) 60%,rgba(10,12,14,.6) 100%)}
  .hero-photo.hero-open .hero-bg img{filter:brightness(.62);object-position:60% 45%}
  .hero-photo.hero-open .hero-bg::after{background:
    linear-gradient(180deg,rgba(10,12,14,.6) 0%,rgba(10,12,14,.22) 140px,
                    rgba(10,12,14,.38) 60%,rgba(10,12,14,.62) 100%)}
}

/* --- Intro without a photograph ------------------------------------------- */
/* Some pages open on type rather than an image. Same rhythm as the others; the
   dark ground and the header treatment come from .hero unchanged. */
.hero-plain{min-height:0;padding-bottom:clamp(52px,6vw,76px)}
.hero-plain .wrap{padding-top:clamp(64px,8vw,96px);padding-bottom:0}
.hero-plain h1{max-width:24ch}

/* --- Stat band: word figures ---------------------------------------------- */
/* "UNESCO 2013" is a figure in the same slot as "8,000 yrs" but twice the
   length; it steps down rather than breaking across the token. */
.stat b.txt{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.018em;white-space:nowrap}

/* --- Pillars -------------------------------------------------------------- */
.pillars{display:grid}
.pillar{display:grid;grid-template-columns:minmax(190px,22%) minmax(0,1fr);
        gap:clamp(24px,4vw,56px);padding:clamp(28px,3.4vw,40px) 0;
        border-top:1px solid var(--line)}
.pillar:first-child{border-top:0;padding-top:6px}
.pillar-head{display:flex;flex-direction:column;gap:10px}
.pnum{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gold-ink);
      font-variant-numeric:tabular-nums;margin:0}
.pillar-head h2{font-size:clamp(21px,2.4vw,27px);margin:0}
.pillar-body p{font-size:16.5px;line-height:1.72}
.pillar-body p:last-child{margin-bottom:0}
.pillar-body em[lang]{font-style:italic;color:var(--ink)}


/* --- Georgia: alternating image rows -------------------------------------- */
/* Each idea on this page is carried by a picture as much as by the sentence,
   so the rows are half image, half argument, and they alternate so the eye
   crosses the page instead of running down one gutter. */
.ge-rows{display:grid;gap:clamp(52px,6vw,88px)}
.ge-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:clamp(28px,4.4vw,64px);align-items:center}
.ge-fig,.ge-txt{min-width:0}
.ge-row:nth-child(even) .ge-fig{order:2}
.ge-fig{position:relative;margin:0}
/* One ratio for all five rows, so the column reads as a set rather than a
   pile of odd sizes. 16:10 sits close to the sources — three are 3:2 and
   one is 16:9, so they lose a few per cent — which keeps the uniformity
   without the heavy crop a squarer box would force. */
.ge-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;
            display:block}
/* The Tbilisi frame is a 2.2:1 panorama; hold the fortress in view. */
.ge-fig.pano img{object-position:center 34%}
.ge-fig::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,#A8873E,#2B3A4A);mix-blend-mode:color;opacity:.09}
.ge-fig figcaption{margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.ge-txt .pnum{margin-bottom:14px}
.ge-txt h2{font-size:clamp(24px,3vw,34px);margin-bottom:16px}
.ge-txt p{font-size:16.8px;line-height:1.72}
.ge-txt p:last-child{margin-bottom:0}
.ge-txt em[lang]{font-style:italic;color:var(--ink)}

/* --- Full-bleed statement band -------------------------------------------- */
.ge-band{position:relative;min-height:clamp(300px,42vw,460px);display:flex;
         align-items:center;background:var(--dark);overflow:hidden}
.ge-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             filter:saturate(.9) contrast(1.06) brightness(.44)}
.ge-band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,14,18,.86) 0%,rgba(12,14,18,.55) 55%,rgba(12,14,18,.7) 100%)}
.ge-band .wrap{position:relative;z-index:2}
.ge-band p{font-size:clamp(24px,3.4vw,42px);line-height:1.22;letter-spacing:-.028em;
           font-weight:600;color:#fff;max-width:20ch;margin:0}
.ge-band p em{font-style:normal;color:var(--gold-lt)}

@media(max-width:900px){
  .ge-row{grid-template-columns:1fr;gap:22px}
  .ge-row:nth-child(even) .ge-fig{order:0}
}

/* --- The argument aside --------------------------------------------------- */
/* Set apart by a rule and space, not by a fill — it is a considered aside in
   the middle of an argument, not a badge. */
.aside{border-left:2px solid var(--gold);padding:4px 0 4px 26px;margin:34px 0}
.aside h3{font-size:17px;margin-bottom:10px}
.aside p{font-size:16px;line-height:1.7}
.aside p:last-child{margin-bottom:0}

.col{max-width:70ch}
/* CC BY and CC BY-SA both require the credit to be visible, so it sits on
   the page rather than only in the repository. */
.credits{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
         font-size:12.5px;line-height:1.7;max-width:78ch;
         margin-left:auto;margin-right:auto;text-align:left}
.credits a{color:var(--gold-ink);border-bottom:1px solid var(--gold-btn)}
/* Two plain sections in a row would run together; the rule keeps the pair
   legible without introducing a second background tone. */
.rule-top{border-top:1px solid var(--line)}
/* A statement beside body copy belongs at the top of its column, not floating
   in the middle of it. */
.split.split-top{align-items:start}
.split.split-top .pull-line{margin-top:0}
.proposition .sec-head h2{max-width:30ch}

/* --- Single emphasised line ------------------------------------------------ */
.pull-line{font-size:clamp(19px,2vw,23px);line-height:1.45;letter-spacing:-.018em;
           color:var(--ink);font-weight:500;max-width:34ch;margin:30px 0}

@media(max-width:900px){
  .navsub{display:none}
  .pillar{grid-template-columns:1fr;gap:14px}
  .pillar-head{flex-direction:row;align-items:baseline;gap:12px}
}
@media(max-width:620px){
  .stat b.txt{font-size:22px}
  .aside{padding-left:18px}
}

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:1080px){
  .nav{gap:22px}
  .nav a{font-size:13px}
  .ft-top{grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:30px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:900px){
  :root{--pad:22px}
  .nav,.hd-cta .btn{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev>*:first-child{order:0}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .panel.on{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .rail::before,.rail .prog{display:none}
  .ph,.pd{padding:32px 26px}
  .figure::after{inset:-9px}
}
@media(max-width:620px){
  .g2,.g3,.g4,.pgrid,.two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:26px 18px}
  .stat:last-child{border-bottom:0}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .ft-brand{grid-column:1 / -1}
  .hero-stats{gap:24px 32px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc summary{padding-right:34px}
  .acc .body{padding-right:0}
  .ck{flex-direction:column;align-items:flex-start;gap:14px}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto}
}

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

@media print{
  .hd,.drawer,.ck,.ft,.btn,.burger{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero{min-height:auto;background:#fff;color:#000;margin-top:0;padding-top:0}
  .hero-bg{display:none}
  .hero h1,.hero .lead{color:#000;text-shadow:none}
  /* Owners print these. The light gold that carries the accent on a dark hero
     is invisible on paper, so on paper the accent is weight, not colour. */
  .hero h1 em,.hero .eyebrow,.eyebrow{color:#000}
  .hero .lead{color:#222}
  .crumb,.crumb a{color:#555}
  .pillar,.card,.acc details{break-inside:avoid}
  .aside{border-left-color:#999}
  .stats{border-bottom:1px solid #999}
  .stat{border-right-color:#bbb}
  a{color:#000;text-decoration:underline}
  section{padding:18px 0;break-inside:avoid}
}