/* ============================================================
   עו״ד שאול חלפון · v2 design system
   grammar: one brand ground, giant display type, pill controls, grain, precise motion
   display: Suez One · ledes/quotes: Frank Ruhl Libre · body/ui: Heebo
   ============================================================ */
:root{
  --ink:#0F2038; --ink-deep:#0A1628; --ink-2:#17325C; --ink-3:#233F6E;
  --paper:#F6F3EC; --paper-2:#ECE7DC; --paper-3:#E2DCCD; --white:#FFFFFF;
  --text:#14202F; --muted:#545E6C;   /* 4.28:1 on paper-3 before; 4.81 now */
  --line:rgba(15,32,56,.14); --line-2:rgba(15,32,56,.26);
  --gold:#C9A227; --gold-2:#D9B53A; --gold-ink:#7E6010;   /* 4.42:1 on paper-2 before; 4.76 now */
  --on-ink:#D5DEEA; --on-ink-muted:#9FB0C6; --on-ink-line:rgba(213,222,234,.22);
  --ok:#1E7E45; --ok-bg:#E3F1E7; --notice-bg:#F9F0D3; --notice-fg:#6E5200; --error:#B3402E;

  --display:"Bellefair","Secular One",Georgia,serif;   /* Secular One, not Suez One: it is already loaded and also has the gershayim Bellefair lacks */
  --serif:"Bellefair","Frank Ruhl Libre",Georgia,serif;
  --sans:"Secular One","Heebo","Arial Hebrew",Arial,sans-serif;

  --giant:clamp(60px,13.5vw,210px);
  --h1:clamp(46px,7.6vw,116px);
  --h2:clamp(36px,5.2vw,76px);
  --h3:clamp(26px,2.4vw,34px);
  --lede:clamp(19px,1.55vw,23px);

  --r-pill:999px; --r-xl:32px; --r-lg:24px; --r-md:14px; --r-sm:8px;
  --gutter:clamp(20px,3vw,48px); --container:1360px;
  --sec:clamp(80px,10vw,150px);
  --nav-h:76px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --t-fast:160ms; --t-ui:240ms; --t-slow:600ms;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Bellefair, Secular One and Gveret Levin ship a single 400 cut, and the sheets ask
   for 500-800 in 58 places. Let the real letterforms show rather than a smeared
   fake bold; size, colour and spacing carry the hierarchy instead. */
html{font-synthesis-weight:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
/* Two rings, because one colour cannot carry both grounds: the gold sits at
   2..5px and the dark halo at 5..8px. On paper the halo is 12:1; on the navy
   sections it disappears and the gold is 6.8:1. Whichever ground is behind
   the control, one of the two rings is always well over 3:1. */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 8px rgba(15,32,56,.92)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the skip-link is the first Tab stop on every page; a sighted keyboard user
   needs to see focus land on it, so reveal it instead of leaving it clipped */
.sr-only:focus{position:fixed;top:8px;inset-inline-start:8px;width:auto;height:auto;padding:10px 16px;clip:auto;overflow:visible;white-space:normal;background:var(--ink);color:var(--white);z-index:200;border-radius:8px}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
.giant{font-family:var(--display);font-size:var(--giant);line-height:.92;letter-spacing:-.01em;color:var(--ink)}
h1,.h1{font-family:var(--display);font-size:var(--h1);line-height:.98;letter-spacing:-.01em;color:var(--ink)}
h2,.h2{font-family:var(--display);font-size:var(--h2);line-height:1.02;letter-spacing:-.005em;color:var(--ink)}
h3,.h3{font-family:var(--display);font-size:var(--h3);line-height:1.12;color:var(--ink)}
h4,.h4{font-family:var(--sans);font-size:20px;line-height:1.3;font-weight:700;color:var(--ink)}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,.on-ink .giant{color:var(--white)}
.lede{font-family:var(--serif);font-size:var(--lede);line-height:1.55;font-weight:400;color:var(--text);max-width:34em}
.on-ink .lede{color:var(--on-ink)}
/* Deck: the one-line descriptor under a name. Set as a written phrase in the
   serif, never as a tracked keyword list: Hebrew has no capitals, so tracking
   it out only breaks the word shapes. Gold on ink, deep gold on paper. */
.deck{font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);line-height:1.4;font-weight:400;letter-spacing:0;color:var(--gold-ink);display:block;text-wrap:balance}
.on-ink .deck{color:var(--gold)}
p{margin:0}
.body{font-size:17px;line-height:1.7}
.small{font-size:14px;line-height:1.55}
.muted{color:var(--muted)}
.on-ink{color:var(--on-ink)}
.on-ink .muted{color:var(--on-ink-muted)}
.label{font-family:var(--sans);font-size:14px;line-height:1.2;font-weight:700;letter-spacing:.02em;color:var(--gold-ink);display:inline-flex;align-items:center;gap:10px}
.on-ink .label{color:var(--gold)}
.label::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.hand{font-family:"Gveret Levin","Amatic SC",cursive;font-size:clamp(24px,2.2vw,34px);line-height:1.1;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.on-ink .hand{color:var(--gold)}
/* Long-form reading text takes the family Shaul picked for it. The intake form
   promised his "טקסט לקריאה" choice would set paragraphs, FAQ answers and article
   bodies, but those inherit --sans from body, which is the button and menu face.
   Pointing them at --serif is what makes the site match what he was shown. */
.prose,.acc-panel-inner{font-family:var(--serif)}
.prose{max-width:760px}
.prose > * + *{margin-top:18px}
.prose h2{margin-top:64px;margin-bottom:20px;font-size:clamp(30px,3.4vw,44px)}
.prose h3{margin-top:44px;margin-bottom:12px}
.prose ul{padding-inline-start:22px}
.prose li + li{margin-top:8px}
.measure{max-width:62ch}
.gold{color:var(--gold)}
.gold-ink{color:var(--gold-ink)}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:calc(var(--sec)*.6)}
.ground-ink{background:var(--ink);color:var(--on-ink);position:relative}
.ground-deep{background:var(--ink-deep);color:var(--on-ink);position:relative}
.ground-paper2{background:var(--paper-2)}
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:var(--grain);background-size:180px;mix-blend-mode:overlay;z-index:0}
.grain > *{position:relative;z-index:1}
.ground-ink.grain::before{opacity:.09}
.hairline{border:0;border-top:1px solid var(--line);margin:0}
.on-ink .hairline{border-color:var(--on-ink-line)}
.grid{display:grid;gap:var(--gutter)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media (min-width:900px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.split{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.split{grid-template-columns:5fr 7fr;gap:80px}.split.rev > :first-child{order:2}}
.stack > * + *{margin-top:16px}
.flex{display:flex}.center{align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-96{margin-top:96px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}.mb-64{margin-bottom:64px}
.hide-desktop{display:block}@media (min-width:1000px){.hide-desktop{display:none}}
.hide-phone{display:none}@media (min-width:1000px){.hide-phone{display:block}}

/* ---------- icons ---------- */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- pill controls ---------- */
.pill{--pill-bg:var(--ink);--pill-fg:var(--white);--dot-bg:var(--gold);--dot-fg:var(--ink);
  display:inline-flex;align-items:center;gap:12px;min-height:52px;padding-block:6px;padding-inline:6px 22px;border-radius:var(--r-pill);
  background:var(--pill-bg);color:var(--pill-fg);font-family:var(--sans);font-size:16px;font-weight:700;line-height:1;white-space:nowrap;
  border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--ease-soft),background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.pill:active{transform:scale(.98)}
.pill .dot{width:40px;height:40px;border-radius:50%;background:var(--dot-bg);color:var(--dot-fg);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.pill .dot .ico{width:18px;height:18px;transition:transform var(--t-ui) var(--ease-out)}
.pill.no-dot{padding-inline:22px}
@media (hover:hover) and (pointer:fine){
  .pill:hover .dot{transform:rotate(-45deg)}
  .pill-ink:hover{background:var(--ink-2)}
  .pill-gold:hover{background:var(--gold-2)}
  .pill-ghost:hover{background:rgba(15,32,56,.08)}
  .on-ink .pill-ghost:hover{background:rgba(255,255,255,.14)}
  .pill-paper:hover{background:var(--white)}
}
.pill-gold{--pill-bg:var(--gold);--pill-fg:var(--ink);--dot-bg:var(--ink);--dot-fg:var(--gold)}
.pill-paper{--pill-bg:var(--paper);--pill-fg:var(--ink);--dot-bg:var(--ink);--dot-fg:var(--white)}
.pill-ghost{--pill-bg:rgba(15,32,56,.06);--pill-fg:var(--ink);--dot-bg:var(--ink);--dot-fg:var(--white);border-color:var(--line)}
.on-ink .pill-ghost{--pill-bg:rgba(255,255,255,.08);--pill-fg:var(--white);--dot-bg:var(--white);--dot-fg:var(--ink);border-color:var(--on-ink-line)}
.pill-lg{min-height:60px;font-size:17px;padding-inline-end:26px}
.pill-lg .dot{width:48px;height:48px}
.pill-sm{min-height:42px;font-size:15px;padding-block:4px;padding-inline:4px 16px}
.pill-sm .dot{width:34px;height:34px}
.pill-block{width:100%;justify-content:space-between}
.textlink{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:8px;position:relative;padding:10px 0;min-height:44px}
.textlink::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--gold);transform-origin:right;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover){.textlink:hover::after{transform:scaleX(.3)}}
.on-ink .textlink,.menu .textlink{color:var(--white)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* chips */
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:14px;font-weight:600;border:1px solid var(--line-2);color:var(--ink);background:transparent;white-space:nowrap}
.chip-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.chip-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip-notice{background:var(--notice-bg);color:var(--notice-fg);border-color:transparent}
.chip-muted{background:var(--paper-2);color:var(--muted);border-color:transparent}
.on-ink .chip{color:var(--on-ink);border-color:var(--on-ink-line)}

/* ---------- surfaces ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,40px)}
.card-ink{background:var(--ink);color:var(--on-ink);border-color:transparent}
.card-paper2{background:var(--paper-2);border-color:transparent}
.notice{background:var(--notice-bg);color:var(--notice-fg);border-radius:var(--r-md);padding:14px 18px;font-size:15px;line-height:1.55;font-weight:500}
.ok-strip{background:var(--ok-bg);color:var(--ok);border-radius:var(--r-md);padding:14px 18px;font-size:16px;font-weight:700;display:flex;gap:10px;align-items:center}

/* photos: one cool, quiet grade across the site */
.ph{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--ink-2);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.06) brightness(.94);transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.ph::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:color;opacity:.55;pointer-events:none}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,40,.45),rgba(10,22,40,0) 55%);z-index:1;pointer-events:none;opacity:0}
.ph.scrim::before{opacity:1}
.ph .cap{position:absolute;inset-inline-start:18px;bottom:16px;z-index:2;color:var(--white);font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
@media (hover:hover){.ph-hover:hover img{transform:scale(1.0)}}
.portrait{aspect-ratio:3/4;border-radius:var(--r-xl);background:var(--paper-2);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.portrait::before{content:"";position:absolute;inset:16px;border-radius:calc(var(--r-xl) - 12px);border:1px solid var(--line)}
.portrait .label-in{position:absolute;inset-inline-start:28px;bottom:24px;font-size:14px;color:var(--muted);font-weight:600}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- lists ---------- */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows > li{border-bottom:1px solid var(--line);padding:22px 0}
.on-ink .rows,.on-ink .rows > li{border-color:var(--on-ink-line)}
.row-kv{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:640px){.row-kv{grid-template-columns:160px 1fr;gap:24px}}
.row-k{color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.04em;padding-top:4px}
/* A value in one of these rows is often a phone or an email link. On a phone it has
   to be a real target, not a 25px line of text. The about page solved this for its
   own rows; every row gets it now. */
.row-kv a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;font-weight:700;color:var(--ink)}
.input{min-height:58px;padding:14px 20px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--white);width:100%;transition:border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(201,162,39,.35)}
textarea.input{min-height:140px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314202F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center;padding-inline-end:20px}
.field.is-error .input{border-color:var(--error)}
.field-error{display:none;color:var(--error);font-size:14px;font-weight:600}
.field.is-error .field-error{display:block}
.check{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:15px;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--ink);margin:0}

/* segmented pills */
.seg{display:inline-flex;background:rgba(15,32,56,.06);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;gap:4px;max-width:100%;overflow-x:auto}
.seg button{border-radius:var(--r-pill);min-height:44px;padding:0 20px;font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.on-ink .seg{background:rgba(255,255,255,.06);border-color:var(--on-ink-line)}
.on-ink .seg button{color:var(--on-ink-muted)}
.on-ink .seg button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}

/* ---------- accordion ---------- */
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.acc > li{border-bottom:1px solid var(--line)}
.acc-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:72px;padding:18px 0;text-align:start;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.3;font-weight:500;color:var(--ink)}
.acc-chev{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--white);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui)}
.acc-btn[aria-expanded="true"] .acc-chev{transform:rotate(180deg);background:var(--gold);color:var(--ink)}
/* max-height:0 hides a panel from the eye and from nobody else: a screen
   reader read all nine answers while every button said "closed". visibility
   takes it out of the accessibility tree, and is delayed on the way open so
   the height transition still has something to animate. */
.acc-panel{overflow:hidden;max-height:0;visibility:hidden;transition:max-height var(--t-slow) var(--ease-out),visibility 0s var(--t-slow)}
.acc-panel.is-open{visibility:visible;transition:max-height var(--t-slow) var(--ease-out),visibility 0s}
.acc-panel-inner{padding:0 0 26px;max-width:64ch;font-size:17px;line-height:1.75}

/* ---------- nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:80;height:var(--nav-h);display:flex;align-items:center;pointer-events:none;transition:transform var(--t-slow) var(--ease-out)}
.nav > .container{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}
.nav .brand{font-family:var(--display);font-size:22px;line-height:1;color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:44px;padding:4px 0}
.nav .brand small{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
.nav .links{display:none;align-items:center;gap:6px;padding:5px;border-radius:var(--r-pill);background:rgba(246,243,236,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
@media (min-width:1000px){.nav .links{display:flex}}
.nav .links a{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:var(--r-pill);font-size:15px;font-weight:600;color:var(--ink);transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui)}
@media (hover:hover){.nav .links a:hover{background:rgba(15,32,56,.08)}}
.nav .links a[aria-current="page"]{background:var(--ink);color:var(--white)}
/* One tap, and it shows the language you are NOT reading, so there is nothing to
   decode. It stays in the header at every width: an English reader should never
   have to reach the footer to get out of a Hebrew page. */
/* language switch + CTA (+ menu button on phones) travel together as one bar at the end of the nav */
.nav-tools{display:flex;align-items:center;gap:8px}
.nav .lang a{height:44px;font-weight:700}
.nav.is-ink .lang{background:rgba(255,255,255,.1);border-color:var(--on-ink-line)}
.nav.is-ink .lang a{color:var(--on-ink-muted)}
.nav.is-ink .lang a[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
/* on phones only the other language shows in the nav, as one clear word; the menu carries both */
@media (max-width:999px){.nav .lang a[aria-pressed="true"]{display:none}.nav .lang a{padding:0 12px}}
.nav .cta{display:none}
@media (min-width:1000px){.nav .cta{display:inline-flex}}
.nav .menu-btn{display:inline-flex}
@media (min-width:1000px){.nav .menu-btn{display:none}}
.nav.is-ink .brand{color:var(--white)}
.nav.is-ink .brand small{color:var(--on-ink-muted)}
.nav.is-ink .links{background:rgba(15,32,56,.55);border-color:var(--on-ink-line)}
.nav.is-ink .links a{color:var(--white)}
.nav.is-ink .links a[aria-current="page"]{background:var(--gold);color:var(--ink)}
.nav.is-ink .pill-ghost{--pill-bg:rgba(255,255,255,.1);--pill-fg:var(--white);--dot-bg:var(--white);--dot-fg:var(--ink);border-color:var(--on-ink-line)}
.nav.is-hidden{transform:translateY(-110%)}

/* full-screen menu (phone) */
.menu{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--on-ink);display:flex;flex-direction:column;padding:0 var(--gutter) 28px;transform:translateY(-4%);opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.menu.is-open{opacity:1;transform:none;pointer-events:auto}
.menu-head{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.menu-links{list-style:none;margin:auto 0;padding:0}
.menu-links a{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--display);font-size:clamp(40px,9vw,64px);line-height:1.15;color:var(--white);padding:6px 0}
.menu-links a small{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.1em}
.menu-links a[aria-current="page"]{color:var(--gold)}
.menu-foot{display:flex;flex-direction:column;gap:14px}
.menu-foot-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lang{display:inline-flex;background:rgba(15,32,56,.06);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:8px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border-radius:var(--r-pill);font-size:14px;font-weight:800;color:var(--muted);transition:background-color var(--t-ui),color var(--t-ui)}
.lang a[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.on-ink .lang,.menu .lang{background:rgba(255,255,255,.08);border-color:var(--on-ink-line)}
.on-ink .lang a,.menu .lang a{color:var(--on-ink-muted)}
.on-ink .lang a[aria-pressed="true"],.menu .lang a[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
/* the full-screen menu has no .on-ink class of its own, so its close button
   (.pill.pill-ghost) fell through to the light-theme pill-ghost colors —
   dark navy text/background on the menu's own dark navy ground, effectively
   invisible except for its icon glyph. Give it the same on-ink treatment
   the header nav already gets when it's sitting on a dark section. */
.menu .pill-ghost{--pill-bg:rgba(255,255,255,.08);--pill-fg:var(--white);--dot-bg:var(--white);--dot-fg:var(--ink);border-color:var(--on-ink-line)}

/* phone call bar */
.callbar{position:fixed;inset-inline:16px;bottom:14px;z-index:70;height:60px;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-pill);padding:6px;gap:8px;box-shadow:0 12px 40px rgba(15,32,56,.28)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;color:var(--white);border-radius:var(--r-pill);transition:background-color var(--t-ui)}
.callbar a:first-child{background:var(--gold);color:var(--ink)}
@media (min-width:1000px){.callbar{display:none}}
body.has-callbar{padding-bottom:90px}
@media (min-width:1000px){body.has-callbar{padding-bottom:0}}

/* ---------- page top (non-home pages) ---------- */
.page-head{padding-top:calc(var(--nav-h) + clamp(48px,8vw,120px));padding-bottom:clamp(40px,6vw,80px)}
.page-head .lede{margin-top:24px}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:22px 0;border-block:1px solid var(--line);font-family:var(--display);font-size:clamp(26px,3.4vw,48px);line-height:1;color:var(--ink)}
.on-ink .marquee{border-color:var(--on-ink-line);color:var(--white)}
.marquee .track{display:inline-flex;gap:0;will-change:transform}
.marquee .track span{padding-inline:.6em;display:inline-flex;align-items:center;gap:.6em}
.marquee .track span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--gold);display:inline-block}
.arc-band{position:relative;overflow:hidden}
.arc-band svg{width:130vw;margin-inline:-15vw;display:block;overflow:visible}
.arc-band text{font-family:var(--display);font-size:64px;fill:var(--ink);letter-spacing:.02em}
.on-ink .arc-band text{fill:var(--white)}

/* ---------- footer ---------- */
/* .footer paints the dark ground but carries no .on-ink class, so the muted
   colour meant for light backgrounds was landing on navy at 2.77:1. */
.footer{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;padding:calc(var(--sec)*.8) 0 0}
.footer .muted{color:var(--on-ink-muted)}
.footer-grid{display:grid;gap:40px;padding-bottom:64px}
@media (min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}}
.footer h3{color:var(--white);font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-weight:800}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:4px 0}
.footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:6px 0;color:var(--on-ink);transition:color var(--t-ui)}
@media (hover:hover){.footer a:hover{color:var(--gold)}}
.footer-legal{border-top:1px solid var(--on-ink-line);padding:22px 0;font-size:14px;color:var(--on-ink-muted);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.footer-mark{font-family:var(--display);font-size:clamp(88px,22vw,360px);line-height:.8;color:var(--white);opacity:.07;white-space:nowrap;text-align:center;margin:0 -10vw -.14em;pointer-events:none;user-select:none}

/* ---------- motion helpers ---------- */
.split-line{display:block;overflow:hidden}
.split-line > *{display:block}
[data-reveal]{opacity:0;transform:translateY(22px)}
html.no-js [data-reveal],html.reduced [data-reveal]{opacity:1;transform:none}
.will{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .marquee .track{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- timeline (about) ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;border-inline-start:2px solid var(--ink);padding-inline-start:32px}
.timeline > li{position:relative;padding:4px 0 32px}
.timeline > li::before{content:"";position:absolute;inset-inline-start:-40px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--paper)}
.timeline > li:last-child{padding-bottom:0}

/* ---------- article ---------- */
.pull{border-inline-start:4px solid var(--gold);padding-inline-start:24px;margin:48px 0;font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.35;font-weight:500;color:var(--ink)}
.art-row{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:900px){.art-row{grid-template-columns:72px 1fr auto;gap:28px;align-items:start}}
.art-row .idx{font-family:var(--display);font-size:40px;line-height:1;color:var(--gold-ink);opacity:.9}
.art-row .meta{font-size:14px;color:var(--muted);margin-top:8px}
.art-row h3{font-size:clamp(22px,2.2vw,30px)}
.art-row h3 a{display:flex;align-items:center;min-height:44px;transition:color var(--t-ui)}
@media (hover:hover){.art-row h3 a:hover{color:var(--gold-ink)}}

/* A <picture> wrapper must not introduce a box: the design sizes images with
   percentage heights against their container, and an inline wrapper between the
   two would collapse them. */
picture{display:contents}

/* Brand marks are filled glyphs, not stroke drawings, so they need the opposite
   of the .ico defaults or they render as a hollow outline. */
.ico-brand{fill:currentColor;stroke:none}