/* ==========================================================================
   Dr. Ashwin Nithish — personal site
   Palette : "Midnight & Brass" — midnight navy / warm ivory / brass gold
   Type    : Fraunces (display) / Karla (body) / IBM Plex Mono (utility)
   Layout  : mobile-first. Breakpoints 400 / 560 / 640 / 820 / 940 / 1120 / 1600
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #091642;
  --ink-2:      #0E2263;
  --deep:       #122A7E;
  --paper:      #F4F6FB;
  --paper-2:    #FFFFFF;

  --gold:       #F6BA1E;
  --gold-l:     #FFD45C;
  --gold-d:     #8A6108;
  --steel:      #3355B5;

  --slate:      #2E3A5C;
  --slate-soft: #616E92;
  --on-dark:    #C8D3F0;
  --on-dark-2:  #93A3CE;

  --line:        rgba(9,22,66,.12);
  --line-strong: rgba(9,22,66,.24);
  --line-dark:   rgba(244,246,251,.16);
  --line-dark-2: rgba(244,246,251,.28);

  --gold-rgb:  246,186,30;
  --steel-rgb: 51,85,181;
  --ink-rgb:   9,22,66;
  --paper-rgb: 244,246,251;

  --whatsapp:   #1FA855;
  --whatsapp-d: #18904A;
  --danger:     #A63B2B;
  --danger-bg:  #FDF5F3;
  --online:     #46B87A;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.25rem);
  --header-h: 74px;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s--1: clamp(.795rem, .77rem + .11vw, .865rem);
  --s-0:  clamp(1rem,   .968rem + .14vw, 1.07rem);
  --s-1:  clamp(1.1rem, 1.03rem + .3vw,  1.28rem);
  --s-2:  clamp(1.35rem,1.19rem + .7vw,  1.9rem);
  --s-3:  clamp(1.75rem,1.45rem + 1.35vw,2.75rem);
  --s-4:  clamp(2.15rem,1.65rem + 2.4vw, 3.9rem);
  --s-5:  clamp(2.5rem, 1.78rem + 3.5vw, 5.1rem);

  --sp-sec:   clamp(3.5rem, 8vw, 7rem);
  --sp-sec-s: clamp(2.5rem, 5.5vw, 4.5rem);
  --gap:      clamp(1rem, 2.2vw, 1.5rem);
  --gap-lg:   clamp(2rem, 5vw, 4rem);

  --r-sm: 5px;
  --r-md: 12px;
  --r-lg: 20px;

  --shadow-1: 0 1px 2px rgba(9,22,66,.05), 0 8px 24px -14px rgba(9,22,66,.3);
  --shadow-2: 0 2px 4px rgba(9,22,66,.06), 0 28px 54px -26px rgba(9,22,66,.45);
  --shadow-3: 0 40px 80px -40px rgba(3,8,28,.8);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:var(--f-body);
  font-size:var(--s-0);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100vh;
}
img,svg,video,canvas{max-width:100%;display:block;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;margin:0;}
button{background:none;border:0;}
h1,h2,h3,h4{
  margin:0;font-family:var(--f-display);color:var(--ink);
  font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;
}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
::selection{background:var(--gold);color:var(--ink);}

/* ---------- 3. Layout utilities ---------- */
.wrap{width:min(100% - (var(--gutter) * 2), var(--wrap));margin-inline:auto;}
.wrap-narrow{width:min(100% - (var(--gutter) * 2), var(--wrap));margin-inline:auto;}
.wrap-narrow > *{max-width:780px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);padding:.8rem 1.2rem;
  font-family:var(--f-mono);font-size:var(--s--1);border-radius:var(--r-sm);
}
.skip:focus{left:.75rem;top:.75rem;}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:3px;}

/* ---------- 4. Type helpers ---------- */
/* The eyebrow marker hangs ABOVE the label rather than beside it. An inline
   dot pushed every eyebrow ~20px right of the heading it introduced, so no
   section label ever shared a left edge with its own H2. A rule on top keeps
   the text flush with the heading, the body copy and the grid. */
.eyebrow{
  display:block;position:relative;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--steel);margin:0 0 1.05rem;padding-top:1.15rem;
  font-weight:500;line-height:1.5;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:0;
  width:28px;height:2px;border-radius:2px;background:var(--gold);
}
.hero .eyebrow{color:var(--on-dark-2);}
.phead .eyebrow{color:var(--on-dark-2);}
.section-dark .eyebrow{color:var(--on-dark-2);}
.section-deep .eyebrow{color:var(--on-dark-2);}

.h1{font-size:var(--s-4);}
.h2{font-size:var(--s-3);}
.h3{font-size:var(--s-2);}
.h4{font-size:var(--s-1);letter-spacing:-.008em;line-height:1.25;}
.lede{font-size:var(--s-1);line-height:1.6;color:var(--slate);max-width:60ch;}
.hero .lede{color:var(--on-dark);}
.section-dark .lede{color:var(--on-dark);}
.section-deep .lede{color:var(--on-dark);}
.muted{color:var(--slate-soft);}
.serif-em{font-family:var(--f-display);font-style:italic;font-weight:400;}
.mark{
  background:linear-gradient(to top, rgba(var(--gold-rgb),.38) 0 .42em, transparent .42em);
  padding-inline:.05em;
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;line-height:1;text-align:center;white-space:nowrap;
  min-height:50px;padding:0 1.55rem;border-radius:var(--r-sm);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn svg{width:15px;height:15px;flex:0 0 15px;transition:transform .35s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:var(--gold);color:#1A1206;border-color:var(--gold);
  box-shadow:0 10px 26px -14px rgba(var(--gold-rgb),.95);
}
.btn-primary:hover{background:var(--gold-l);border-color:var(--gold-l);}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.hero .btn-ghost{border-color:var(--line-dark-2);color:var(--paper);}
.hero .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.phead .btn-ghost{border-color:var(--line-dark-2);color:var(--paper);}
.phead .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.section-dark .btn-ghost{border-color:var(--line-dark-2);color:var(--paper);}
.section-dark .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.section-deep .btn-ghost{border-color:var(--line-dark-2);color:var(--paper);}
.section-deep .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-dark:hover{background:#050F30;border-color:#050F30;}
.btn-block{width:100%;}

.textlink{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--f-mono);font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);font-weight:500;min-height:34px;
  border-bottom:1.5px solid var(--gold);padding-bottom:.3rem;
  transition:gap .3s var(--ease), color .3s;
}
.textlink svg{width:14px;height:14px;flex:0 0 14px;transition:transform .3s var(--ease);}
.textlink:hover{gap:.9rem;color:var(--gold-d);}
.textlink:hover svg{transform:translateX(3px);}
.hero .textlink{color:var(--paper);}
.section-dark .textlink{color:var(--paper);}
.section-deep .textlink{color:var(--paper);}
.hero .textlink:hover{color:var(--gold-l);}
.section-dark .textlink:hover{color:var(--gold-l);}
.section-deep .textlink:hover{color:var(--gold-l);}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), border-color .45s;
}
.hdr.is-stuck{
  background:rgba(9,22,66,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-dark);
}
.hdr-in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--paper);flex:0 0 auto;}
.brand-mark{
  display:block;height:42px;width:auto;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(3,8,28,.5));
}
@media (max-width:380px){ .brand-mark{height:36px;} }
.brand-name{
  display:block;font-family:var(--f-display);font-size:1.02rem;font-weight:600;
  letter-spacing:-.018em;line-height:1.15;color:var(--paper);white-space:nowrap;
}
.brand-sub{
  display:block;font-family:var(--f-mono);font-size:.575rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-2);margin-top:.22rem;white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:.05rem;}
.nav a{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:.705rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark);padding:.7rem .62rem;border-radius:var(--r-sm);
  transition:color .28s;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:.62rem;right:.62rem;bottom:.36rem;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav a:hover{color:#fff;}
.nav a:hover::after{transform:scaleX(1);}
.nav a.is-active{color:#fff;}
.nav a.is-active::after{transform:scaleX(1);}
.nav-cta{
  margin-left:.7rem;min-height:44px;padding:0 1.1rem;
  background:var(--gold);font-weight:600;letter-spacing:.1em;
  transition:background-color .3s, transform .3s var(--ease);
}
.nav .nav-cta{color:#1A1206;}
.nav .nav-cta::after{display:none;}
.nav .nav-cta:hover{background:var(--gold-l);color:#1A1206;transform:translateY(-1px);}

.burger{
  display:none;width:46px;height:46px;flex:0 0 46px;
  border:1px solid var(--line-dark-2);border-radius:var(--r-sm);
  cursor:pointer;padding:0;place-items:center;
}
.burger span{
  display:block;width:19px;height:1.6px;background:var(--paper);
  margin:3.7px auto;transition:transform .35s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.3px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.3px) rotate(-45deg);}

/* contact block at the foot of the mobile drawer */
.nav-foot{display:none;}

@media (max-width: 1179px){
  .burger{display:grid;}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw, 380px);
    background:var(--ink);border-left:1px solid var(--line-dark);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--header-h) + 1.6rem) var(--gutter) 2.5rem;
    transform:translateX(102%);transition:transform .46s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-34px 0 70px -34px rgba(0,0,0,.7);
  }
  .nav.is-open{transform:translateX(0);}
  .nav a{
    padding:1.1rem .15rem;font-size:.82rem;letter-spacing:.13em;min-height:56px;
    border-bottom:1px solid var(--line-dark);border-radius:0;
  }
  .nav a::after{display:none;}
  .nav a.is-active{color:var(--gold);}
  .nav .nav-cta{
    margin:1.5rem 0 0;border-bottom:0;border-radius:var(--r-sm);
    justify-content:center;min-height:52px;
  }
  .nav-foot{
    display:grid;gap:.55rem;margin-top:2rem;padding-top:1.5rem;
    border-top:1px solid var(--line-dark);
    font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;
    color:var(--on-dark-2);line-height:1.7;
  }
  .nav-foot a{color:var(--on-dark);transition:color .28s;}
  .nav-foot a:hover{color:var(--gold);}
}
@media (max-width: 380px){
  .brand-name{font-size:.94rem;}
  .brand-sub{font-size:.53rem;letter-spacing:.18em;}
  .brand-mark{width:36px;height:36px;flex:0 0 36px;font-size:.9rem;}
}

.scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(4,10,30,.6);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s;
}
.scrim.is-open{opacity:1;visibility:visible;}
body.is-locked{overflow:hidden;}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--on-dark);
  padding:calc(var(--header-h) + clamp(2.5rem,7vw,5rem)) 0 clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 78% at 88% 6%, rgba(51,85,181,.34), transparent 58%),
    radial-gradient(88% 68% at 2% 98%,  rgba(246,186,30,.13), transparent 60%);
}
.hero-grid{
  position:relative;display:grid;gap:clamp(3rem,7vw,4.5rem);
  grid-template-columns:1fr;align-items:center;
}
.hero h1{
  color:var(--paper);font-size:var(--s-5);letter-spacing:-.028em;
  font-weight:500;line-height:1.04;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold);}
.hero-lede{
  margin-top:1.5rem;font-size:var(--s-1);color:var(--on-dark);
  max-width:52ch;line-height:1.62;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;}
.hero-roles{
  display:flex;flex-wrap:wrap;gap:.45rem 1.35rem;
  margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);font-size:.685rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.hero-roles li{display:flex;align-items:center;gap:.6rem;}
.hero-roles li::before{
  content:"";width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:var(--gold);
}

.hero-figure{position:relative;z-index:1;width:100%;max-width:430px;margin-inline:auto;}
.portrait{
  position:relative;z-index:2;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-dark-2);box-shadow:var(--shadow-3);
  aspect-ratio:4/5;background:var(--deep);
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(9,22,66,.66), transparent 46%);
}
.portrait-tag{
  position:absolute;left:1rem;bottom:1rem;z-index:3;
  font-family:var(--f-mono);font-size:.615rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper);background:rgba(9,22,66,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-dark-2);padding:.5rem .8rem;border-radius:var(--r-sm);
}
.hero-frame{
  position:absolute;z-index:0;inset:auto -14px -14px auto;width:56%;height:56%;
  border:1.5px solid rgba(246,186,30,.45);border-radius:var(--r-lg);
}
@media (min-width:940px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(3rem,5vw,5rem);}
  .hero-figure{max-width:none;margin-inline:0;}
}

/* ---------- 8. Signature: the 24-hour dial ---------- */
.dial{
  position:absolute;z-index:4;right:-.5rem;bottom:-1rem;
  width:clamp(118px,26vw,148px);aspect-ratio:1;
  background:rgba(9,22,66,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-dark-2);border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.85);
}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.dial-track{fill:none;stroke:rgba(244,246,251,.14);stroke-width:2.5;}
.dial-arc{
  fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:295;stroke-dashoffset:295;
  transition:stroke-dashoffset 2.6s cubic-bezier(.2,.7,.25,1);
}
.dial.is-on .dial-arc{stroke-dashoffset:0;}
.dial-tick{stroke:rgba(244,246,251,.3);stroke-width:1.2;}
.dial-core{position:relative;text-align:center;line-height:1;}
.dial-num{
  display:block;font-family:var(--f-display);font-size:clamp(1.65rem,5vw,2.2rem);
  font-weight:600;color:var(--paper);letter-spacing:-.04em;
}
.dial-lab{
  display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin-top:.4rem;
}
.dial-sub{
  display:block;font-family:var(--f-mono);font-size:.45rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-2);margin-top:.24rem;
}
@media (min-width:940px){
  .dial{
    left:clamp(-1.5rem,-2vw,-1rem);right:auto;bottom:clamp(-1.5rem,-2vw,-1rem);
    width:clamp(148px,13vw,178px);
  }
}

/* ---------- 9. Stat band ---------- */
.statband{background:var(--ink-2);border-top:1px solid var(--line-dark);}
.statband-grid{display:grid;grid-template-columns:repeat(2,1fr);}
.stat{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,3.5vw,2.4rem) clamp(1rem,2.2vw,1.7rem);
  border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.stat:nth-child(2n){border-right:0;}
.stat:nth-last-child(-n+2){border-bottom:0;}
/* The outermost cells lose their inner padding so the figures line up with the
   page gutter — and therefore with every heading above and below the band. */
.stat:nth-child(2n+1){padding-left:0;}
.stat:nth-child(2n){padding-right:0;}
.stat-n{
  font-family:var(--f-display);font-size:var(--s-3);font-weight:600;
  color:var(--gold);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat-l{
  font-family:var(--f-mono);font-size:.655rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-2);margin-top:.75rem;line-height:1.65;
}
@media (min-width:820px){
  .statband-grid{grid-template-columns:repeat(4,1fr);}
  .stat{border-bottom:0;padding-inline:clamp(1rem,2.2vw,1.7rem);}
  .stat:nth-child(2n){border-right:1px solid var(--line-dark);}
  .stat:last-child{border-right:0;}
  .stat:first-child{padding-left:0;}
  .stat:last-child{padding-right:0;}
}

/* ---------- 10. Sections ---------- */
.section{padding:var(--sp-sec) 0;position:relative;}
.section-tight{padding:var(--sp-sec-s) 0;}
.section-paper2{background:var(--paper-2);}
.section-dark{background:var(--ink);color:var(--on-dark);}
.section-deep{background:var(--deep);color:var(--on-dark);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--paper);}
.section-deep h1,.section-deep h2,.section-deep h3,.section-deep h4{color:var(--paper);}
.section-dark strong{color:var(--paper);font-weight:600;}
.section-deep strong{color:var(--paper);font-weight:600;}
.hero strong{color:var(--paper);font-weight:600;}

.sec-grid{display:grid;gap:var(--gap-lg);grid-template-columns:1fr;align-items:start;}
@media (min-width:940px){
  .sec-grid{grid-template-columns:minmax(230px,300px) 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
  .sec-aside{position:sticky;top:calc(var(--header-h) + 1.5rem);}
}
.sec-head{max-width:34ch;}
.sec-head h2{margin-bottom:0;}
.sec-note{
  font-family:var(--f-mono);font-size:.685rem;line-height:1.95;letter-spacing:.04em;
  color:var(--slate-soft);border-top:1px solid var(--line);
  padding-top:1rem;margin-top:1.4rem;
}
.section-dark .sec-note{color:var(--on-dark-2);border-top-color:var(--line-dark);}
.section-deep .sec-note{color:var(--on-dark-2);border-top-color:var(--line-dark);}

.sec-head-row{
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;
  align-items:flex-end;justify-content:space-between;margin-bottom:2.2rem;
}

.horizon{display:block;line-height:0;margin-top:var(--gap-lg);margin-bottom:-1px;}
.strata{display:block;width:100%;height:clamp(36px,5vw,60px);}
.strata path{stroke:none;}

/* ---------- 11. Grids and cards ---------- */
.grid{display:grid;gap:var(--gap);}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:980px){ .grid-3{grid-template-columns:repeat(3,1fr);} }

.card{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.45rem,3vw,2rem);position:relative;overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s, background-color .45s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--line-strong);}
.card:hover::before{transform:scaleY(1);}
.card h3{margin-bottom:.65rem;}
.card p{font-size:.965rem;line-height:1.62;}
.card-idx{
  display:block;font-family:var(--f-mono);font-size:.645rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.95rem;line-height:1.4;
}
/* pins the "see more" link to the bottom so links align across a row */
.card-more{margin:1.5rem 0 0;padding-top:.2rem;}
.card > .card-more{margin-top:auto;}

.section-dark .card{background:rgba(244,246,251,.045);border-color:var(--line-dark);}
.section-deep .card{background:rgba(244,246,251,.045);border-color:var(--line-dark);}
.section-dark .card p{color:var(--on-dark);}
.section-deep .card p{color:var(--on-dark);}
.section-dark .card-idx{color:var(--on-dark-2);}
.section-deep .card-idx{color:var(--on-dark-2);}
.section-dark .card:hover{background:rgba(244,246,251,.075);border-color:var(--line-dark-2);}
.section-deep .card:hover{background:rgba(244,246,251,.075);border-color:var(--line-dark-2);}

/* ---------- 12. Flip cards ---------- */
.flipgrid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media (min-width:560px){ .flipgrid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .flipgrid{grid-template-columns:repeat(4,1fr);} }

.flip{
  display:block;width:100%;padding:0;text-align:left;cursor:pointer;font:inherit;
  perspective:1600px;background:none;border:0;
}
.flip-in{
  display:block;position:relative;width:100%;min-height:250px;
  transform-style:preserve-3d;transition:transform .78s var(--ease);
}
.flip:hover .flip-in{transform:rotateY(180deg);}
.flip:focus-visible .flip-in{transform:rotateY(180deg);}
.flip.is-flipped .flip-in{transform:rotateY(180deg);}
.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem;overflow:hidden;
}
.flip-front{background:var(--paper-2);}
.flip-back{
  background:var(--ink);color:var(--on-dark);
  transform:rotateY(180deg);border-color:transparent;
}
.flip-back h3{color:var(--paper);margin-bottom:.5rem;}
.flip-back p{font-size:.875rem;line-height:1.58;color:var(--on-dark);}
.flip h3{font-size:var(--s-1);}
.flip-hint{
  display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);line-height:1.4;
}
.flip-back .flip-hint{color:var(--gold);}
@media (max-width:559px){ .flip-in{min-height:206px;} }
@media (min-width:560px) and (max-width:999px){ .flip-in{min-height:226px;} }

/* ---------- 13. Figures ---------- */
.figure{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--deep);
}
.figure img{width:100%;height:100%;object-fit:cover;}
.figure-tall{aspect-ratio:4/5;}
.figure-wide{aspect-ratio:16/10;}
.figure-sq{aspect-ratio:1;}
.figure-poster{aspect-ratio:9/8;}
.figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.7rem 1.05rem .85rem;
  background:linear-gradient(to top, rgba(9,22,66,.88), transparent);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper);line-height:1.5;
}
.section-dark .figure{border-color:var(--line-dark);}
.section-deep .figure{border-color:var(--line-dark);}
.figure.img-failed img{display:none;}
.figure.img-failed{
  background:
    radial-gradient(90% 70% at 22% 14%, rgba(246,186,30,.26), transparent 62%),
    linear-gradient(152deg, var(--deep), var(--ink) 72%);
}
.figure.img-failed::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,246,251,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,246,251,.16) 1px, transparent 1px);
  background-size:36px 36px;opacity:.55;
}

.split{display:grid;gap:var(--gap-lg);grid-template-columns:1fr;align-items:center;}
.split-media{min-width:0;}
@media (min-width:940px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
  .split-media-first .split-media{order:-1;}
}

/* ---------- 14. Lists ---------- */
.ticks{display:grid;gap:.8rem;margin-top:1.5rem;}
.ticks li{position:relative;padding-left:1.75rem;font-size:.98rem;line-height:1.62;}
/* marker centred on the cap-height of the first line, not floating below it */
.ticks li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--gold);
}
.section-dark .ticks li{color:var(--on-dark);}
.section-deep .ticks li{color:var(--on-dark);}

.timeline{border-left:1px solid var(--line);margin-top:1.4rem;}
.section-dark .timeline{border-left-color:var(--line-dark);}
.section-deep .timeline{border-left-color:var(--line-dark);}
.tl-item{position:relative;padding:0 0 2rem 1.85rem;}
.tl-item:last-child{padding-bottom:0;}
/* node centres on the kicker line so the dot, the label and the rule agree */
.tl-item::before{
  content:"";position:absolute;left:-5.5px;top:.23rem;width:10px;height:10px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--gold);
}
.section-paper2 .tl-item::before{background:var(--paper-2);}
.section-dark .tl-item::before{background:var(--ink);}
.section-deep .tl-item::before{background:var(--deep);}
.tl-k{
  display:block;font-family:var(--f-mono);font-size:.645rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.45rem;
}
.section-dark .tl-k{color:var(--on-dark-2);}
.section-deep .tl-k{color:var(--on-dark-2);}
.tl-item h3{font-size:var(--s-1);margin-bottom:.4rem;line-height:1.3;}
.tl-item p{font-size:.965rem;line-height:1.62;}

.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.pill{
  display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--f-mono);font-size:.655rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:100px;padding:0 1rem;
  color:var(--ink);cursor:pointer;
  transition:background-color .3s, color .3s, border-color .3s;
}
.pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pill.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.section-dark .pill{border-color:var(--line-dark-2);color:var(--on-dark);}
.section-deep .pill{border-color:var(--line-dark-2);color:var(--on-dark);}
.section-dark .pill:hover{background:var(--gold);color:#1A1206;border-color:var(--gold);}
.section-deep .pill:hover{background:var(--gold);color:#1A1206;border-color:var(--gold);}
.section-dark .pill.is-on{background:var(--gold);color:#1A1206;border-color:var(--gold);}
.section-deep .pill.is-on{background:var(--gold);color:#1A1206;border-color:var(--gold);}

/* ---------- 15. Gallery ---------- */
.gal{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(2,1fr);}
@media (min-width:560px){ .gal{grid-template-columns:repeat(3,1fr);} }
@media (min-width:900px){ .gal{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1200px){ .gal{grid-template-columns:repeat(5,1fr);} }
.gal-item{
  position:relative;display:block;width:100%;padding:0;cursor:zoom-in;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-2);aspect-ratio:9/8;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;filter:saturate(.95);
}
.gal-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);z-index:2;}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.06);}
.gal-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--gold);transition:box-shadow .35s;
}
.gal-item:hover::after{box-shadow:inset 0 0 0 2px var(--gold);}

.lightbox{
  position:fixed;inset:0;z-index:120;
  background:rgba(4,10,30,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;
  padding:clamp(3.5rem,8vw,4.5rem) clamp(1rem,5vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s;
}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox img{
  max-width:min(100%,920px);max-height:74vh;object-fit:contain;
  border-radius:var(--r-md);border:1px solid var(--line-dark);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;display:grid;place-items:center;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:1.2rem;line-height:1;
  background:rgba(244,246,251,.1);border:1px solid var(--line-dark-2);color:var(--paper);
  transition:background-color .3s, color .3s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--gold);color:#1A1206;}
.lb-close{top:clamp(.9rem,3vw,2rem);right:clamp(.9rem,3vw,2rem);}
.lb-prev{left:clamp(.5rem,3vw,2rem);top:50%;transform:translateY(-50%);}
.lb-next{right:clamp(.5rem,3vw,2rem);top:50%;transform:translateY(-50%);}
.lb-cap{
  position:absolute;bottom:clamp(1rem,4vw,2rem);
  left:clamp(1rem,5vw,3rem);right:clamp(1rem,5vw,3rem);
  margin:0;text-align:center;font-family:var(--f-mono);font-size:.665rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);line-height:1.6;
}
@media (max-width:559px){
  .lb-prev,.lb-next{width:42px;height:42px;}
  .lightbox img{max-height:62vh;}
}

/* ---------- 16. Quote ---------- */
/* the quote is a centred measure, not a left-hugging column — it was stranded
   against the left edge of a full-bleed band with a void to its right */
.wrap-narrow.quote{width:min(100% - (var(--gutter) * 2), 860px);}
.wrap-narrow.quote > *{max-width:none;}
.quote{position:relative;padding-top:clamp(2.2rem,5vw,3rem);}
.quote::before{
  content:"\201D";position:absolute;top:clamp(-1.9rem,-3vw,-1rem);left:-.06em;
  font-family:var(--f-display);font-size:clamp(4.5rem,11vw,8rem);line-height:1;
  color:var(--gold);opacity:.4;pointer-events:none;
}
.quote blockquote{
  margin:0;font-family:var(--f-display);font-size:var(--s-2);line-height:1.45;
  font-weight:400;font-style:italic;color:var(--paper);letter-spacing:-.012em;
}
.quote cite{
  display:block;margin-top:1.7rem;font-family:var(--f-mono);font-style:normal;
  font-size:.685rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
}

/* ---------- 17. Book ---------- */
.bookshot{
  position:relative;width:min(100%,290px);aspect-ratio:3/4.3;margin-inline:auto;
  border-radius:3px 10px 10px 3px;overflow:hidden;
  background:linear-gradient(158deg, #122A7E 0%, #091642 62%, #0E2263 100%);
  box-shadow:var(--shadow-3), inset 14px 0 22px -18px rgba(0,0,0,.9);
  border:1px solid rgba(246,186,30,.3);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.6rem,4vw,2.1rem) clamp(1.2rem,3vw,1.5rem);
}
.bookshot::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg, rgba(0,0,0,.45), transparent);
}
.book-top{
  position:relative;z-index:2;font-family:var(--f-mono);font-size:.575rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-2);
}
.book-body{position:relative;z-index:2;}
.book-title{
  display:block;font-family:var(--f-display);font-size:clamp(2rem,7vw,2.5rem);
  font-weight:600;color:var(--paper);line-height:.95;letter-spacing:-.03em;
}
.book-title span{display:block;color:var(--gold);}
.book-rule{display:block;width:44px;height:1.5px;background:var(--gold);margin:1rem 0;}
.book-by{
  display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-2);line-height:1.7;
}
.book-globe{
  position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;z-index:1;
  border-radius:50%;border:1.5px solid rgba(246,186,30,.28);
}
.book-globe::before{
  content:"";position:absolute;inset:16px;border-radius:50%;
  border:1px solid rgba(246,186,30,.18);
}

/* ---------- 18. Forms ---------- */
.form{display:grid;gap:1.15rem;}
.field{display:grid;gap:.45rem;align-content:start;min-width:0;}
.field label{
  font-family:var(--f-mono);font-size:.645rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);
}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:.85rem 1rem;font-size:.98rem;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color .3s, box-shadow .3s, background-color .3s;
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
                   linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6;}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-soft);opacity:.75;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 3px rgba(246,186,30,.2);
}
.field .err{
  font-family:var(--f-mono);font-size:.645rem;letter-spacing:.05em;
  color:var(--danger);min-height:1.1em;line-height:1.4;
}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{
  border-color:var(--danger);background:var(--danger-bg);
}
.form-row{display:grid;gap:1.15rem;grid-template-columns:1fr;}
@media (min-width:640px){ .form-row{grid-template-columns:1fr 1fr;} }
.form-ok{
  display:none;border:1px solid var(--steel);background:rgba(51,85,181,.09);
  border-radius:var(--r-md);padding:1.15rem 1.3rem;font-size:.95rem;line-height:1.6;
}
.form-ok.is-on{display:block;}

.info-list{display:grid;margin-top:1.6rem;}
.info-item{display:grid;gap:.3rem;padding:1.05rem 0;border-bottom:1px solid var(--line-dark);}
.info-item:first-child{border-top:1px solid var(--line-dark);}
.info-k{
  font-family:var(--f-mono);font-size:.635rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.info-v{font-size:1.01rem;color:var(--paper);line-height:1.6;}
.info-v a{transition:color .3s;}
.info-v a:hover{color:var(--gold);}

/* ---------- 19. CTA band ---------- */
.ctaband{background:var(--gold);}
.ctaband .wrap{padding:clamp(2.6rem,6vw,4.4rem) 0;}
.ctaband h2{color:#1A1206;max-width:22ch;}
.ctaband p{color:#4C3A12;max-width:54ch;margin-top:1rem;}
.cta-in{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr;}
@media (min-width:860px){
  .cta-in{grid-template-columns:1.5fr auto;gap:3rem;}
  .cta-act{justify-self:end;}
}

/* ---------- 20. Footer ---------- */
.ftr{background:var(--ink);color:var(--on-dark-2);padding:clamp(3rem,6vw,4.4rem) 0 1.7rem;}
.ftr-grid{display:grid;gap:2.4rem;grid-template-columns:1fr;}
@media (min-width:560px){ .ftr-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:940px){ .ftr-grid{grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:2rem;} }
.ftr-brand{grid-column:1 / -1;}
@media (min-width:940px){ .ftr-brand{grid-column:auto;} }
.ftr h4{
  color:var(--paper);font-family:var(--f-mono);font-size:.635rem;letter-spacing:.19em;
  text-transform:uppercase;font-weight:500;margin-bottom:1.15rem;
}
.ftr a{transition:color .28s;}
.ftr a:hover{color:var(--gold);}
.ftr-links{display:grid;gap:.65rem;font-size:.94rem;}
.ftr-links li{line-height:1.5;}
.ftr-blurb{font-size:.94rem;line-height:1.75;max-width:40ch;margin-top:1.15rem;}
.ftr-bottom{
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:.635rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-2);line-height:1.7;
}
.social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem;}
.social a{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line-dark-2);border-radius:50%;
  transition:background-color .3s, border-color .3s, color .3s, transform .3s;
}
.social a:hover{background:var(--gold);border-color:var(--gold);color:#1A1206;transform:translateY(-3px);}
.social svg{width:16px;height:16px;}

/* ---------- 21. Floating actions ---------- */
.wa{
  position:fixed;right:clamp(.85rem,2.5vw,1.5rem);z-index:70;
  bottom:clamp(.85rem,2.5vw,1.5rem);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--whatsapp);color:#fff;
  box-shadow:0 14px 30px -12px rgba(31,168,85,.9);
  transition:transform .35s var(--ease), background-color .3s;
}
.wa:hover{transform:scale(1.08);background:var(--whatsapp-d);}
.wa svg{width:27px;height:27px;}
.wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--whatsapp);animation:pulse 2.8s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .wa::after{animation:none;opacity:0;} }

.chat-btn{
  position:fixed;right:clamp(.85rem,2.5vw,1.5rem);z-index:70;
  bottom:calc(clamp(.85rem,2.5vw,1.5rem) + 64px);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--line-dark-2);cursor:pointer;box-shadow:var(--shadow-2);
  transition:transform .35s var(--ease), background-color .3s;
}
.chat-btn:hover{transform:scale(1.08);background:var(--deep);}
.chat-btn svg{width:23px;height:23px;}

.chat{
  position:fixed;z-index:75;
  right:clamp(.85rem,2.5vw,1.5rem);
  bottom:calc(clamp(.85rem,2.5vw,1.5rem) + 128px);
  width:min(calc(100vw - 1.7rem), 348px);
  background:var(--paper-2);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.chat.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.chat-head{background:var(--ink);color:var(--paper);padding:1rem 1.15rem;display:flex;align-items:center;gap:.7rem;}
.chat-avatar{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line-dark-2);
}
.chat-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.chat-title{display:block;font-family:var(--f-display);font-size:.97rem;color:var(--paper);line-height:1.2;}
.chat-status{
  display:flex;align-items:center;gap:.4rem;margin-top:.2rem;
  font-family:var(--f-mono);font-size:.555rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.chat-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--online);}
.chat-x{
  margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  color:var(--on-dark-2);cursor:pointer;font-size:1.35rem;line-height:1;
  transition:color .3s, background-color .3s;
}
.chat-x:hover{color:var(--paper);background:rgba(244,246,251,.1);}
.chat-body{
  padding:1.15rem;display:grid;gap:.8rem;
  max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain;
}
.chat-bubble{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md) var(--r-md) var(--r-md) 3px;
  padding:.85rem 1rem;font-size:.89rem;line-height:1.6;
}
.chat-body input,.chat-body textarea{
  width:100%;min-height:46px;padding:.7rem .85rem;font-size:.9rem;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color .3s, box-shadow .3s;
}
.chat-body textarea{min-height:82px;resize:vertical;}
.chat-body input:focus,.chat-body textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,186,30,.18);
}
.chat-note{
  font-family:var(--f-mono);font-size:.585rem;letter-spacing:.06em;
  color:var(--slate-soft);line-height:1.65;
}
.chat-send{background:var(--whatsapp);color:#fff;border-color:var(--whatsapp);}
.chat-send:hover{background:var(--whatsapp-d);border-color:var(--whatsapp-d);}
@media (max-width:400px){
  .wa{width:50px;height:50px;}
  .chat-btn{width:50px;height:50px;bottom:calc(.85rem + 60px);}
  .chat{bottom:calc(.85rem + 120px);}
}

/* ---------- 22. Inner page header ---------- */
.phead{
  position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);
  padding:calc(var(--header-h) + clamp(2.2rem,6vw,4.5rem)) 0 clamp(2.6rem,6vw,4.4rem);
}
.phead::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(100% 90% at 92% 0%, rgba(51,85,181,.34), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(246,186,30,.11), transparent 62%);
}
.phead-in{position:relative;max-width:none;}
.phead-in h1{max-width:16ch;}
.phead h1{color:var(--paper);font-size:var(--s-4);font-weight:500;letter-spacing:-.026em;line-height:1.06;}
.phead p{margin-top:1.3rem;font-size:var(--s-1);color:var(--on-dark);max-width:56ch;line-height:1.6;}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.4rem;
  font-family:var(--f-mono);font-size:.635rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.crumbs a{transition:color .28s;}
.crumbs a:hover{color:var(--gold);}
.crumbs span{color:var(--steel);}

/* ---------- 23. Reveal ---------- */
/* Reveal-on-scroll is progressive enhancement only. Without the `js` class —
   no JavaScript, a blocked script, a 404 — everything stays fully visible. */
.js [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .js [data-reveal]{opacity:1;transform:none;} }

/* ---------- 24. Prose (legal pages) ---------- */
.prose h2{font-size:var(--s-2);margin:2.5rem 0 .85rem;}
.prose h2:first-of-type{margin-top:1.6rem;}
.prose h3{font-size:var(--s-1);margin:1.8rem 0 .55rem;}
.prose p,.prose li{font-size:1rem;line-height:1.75;}
.prose ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.5rem;margin:0 0 1.1rem;}
.prose a{color:var(--gold-d);border-bottom:1px solid var(--line-strong);transition:border-color .3s;}
.prose a:hover{border-bottom-color:var(--gold-d);}

/* ---------- 25. 404 ---------- */
.err-wrap{
  display:grid;place-items:center;text-align:center;
  min-height:72vh;padding:calc(var(--header-h) + 3rem) 0 4rem;
}
.err-wrap .eyebrow{text-align:center;}
.err-wrap .eyebrow::before{left:50%;transform:translateX(-50%);}
.err-wrap .hero-cta{justify-content:center;}
.err-wrap .hero-lede{margin-inline:auto;}
.err-code{
  margin:0;font-family:var(--f-display);font-size:clamp(4.5rem,17vw,10rem);
  line-height:.85;color:var(--gold);letter-spacing:-.05em;font-weight:600;
}

/* ---------- 26. Wide screens ---------- */
@media (min-width:1600px){
  :root{--gutter:clamp(3rem,6vw,5rem);}
}

/* ---------- 28. Per-page 3D models ---------- */
/* Stacking inside .hero / .phead:
   0  background gradients (::before)
   1  the WebGL canvas
   2  legibility veil (::after)
   3  the actual content                                        */

.scene3d{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:block;
  pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.scene3d.is-live{opacity:1;}
/* the banner model can be grabbed and spun; vertical scroll is preserved */
.scene3d.is-grab{pointer-events:auto;cursor:grab;touch-action:pan-y;}
.scene3d.is-grab:active{cursor:grabbing;}

.hero::after,
.phead::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(9,22,66,.90) 0%, rgba(9,22,66,.68) 32%,
    rgba(9,22,66,.22) 60%, rgba(9,22,66,0) 100%);
}

/* content rides above the veil */
.hero > .wrap,
.phead > .wrap{position:relative;z-index:3;}

/* let a drag land on the canvas everywhere except the real controls */
.hero > .wrap{pointer-events:none;}
.hero > .wrap a,
.hero > .wrap button{pointer-events:auto;}

@media (max-width:939px){
  /* model is centred on narrow screens, so the veil is vertical and stronger */
  .hero::after,
  .phead::after{
    background:linear-gradient(180deg,
      rgba(9,22,66,.90) 0%, rgba(9,22,66,.72) 45%, rgba(9,22,66,.88) 100%);
  }
  .scene3d.is-live{opacity:.62;}
}
@media (max-width:559px){
  .scene3d.is-live{opacity:.5;}
}

/* ---------- 29. THE EARTH — 3D flip-book ---------- */
.fb{--fb-page:min(34vw, 320px);display:grid;justify-items:center;gap:1.6rem;outline:none;}
.fb-stage{
  position:relative;perspective:2600px;
  width:calc(var(--fb-page) * 2);aspect-ratio:2 / 1.42;
  filter:drop-shadow(0 34px 54px rgba(3,8,28,.55));
}
.fb-board{
  position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(160deg,#122A7E,#091642 70%);
  border:1px solid var(--line-dark-2);
}
.fb-board-l{left:0;border-radius:10px 3px 3px 10px;}
.fb-board-r{right:0;border-radius:3px 10px 10px 3px;}

.fb-leaf{
  position:absolute;top:0;right:0;width:50%;height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform .82s cubic-bezier(.32,.06,.24,1);
}
.fb-leaf.is-turned{transform:rotateY(-180deg);}

.fb-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,2.4vw,1.7rem);cursor:pointer;overflow:hidden;
  background:var(--paper-2);border:1px solid rgba(9,22,66,.18);
}
.fb-front{border-radius:3px 10px 10px 3px;}
.fb-back{transform:rotateY(180deg);border-radius:10px 3px 3px 10px;}
/* the paper edge */
.fb-front::after,.fb-back::after{
  content:"";position:absolute;top:0;bottom:0;width:14px;
}
.fb-front::after{left:0;background:linear-gradient(90deg,rgba(9,22,66,.16),transparent);}
.fb-back::after{right:0;background:linear-gradient(270deg,rgba(9,22,66,.16),transparent);}

.fb-kicker{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);
}
.fb-face h3{font-size:clamp(1rem,2.2vw,1.35rem);line-height:1.2;margin:.6rem 0 .5rem;}
.fb-face p{font-size:clamp(.78rem,1.5vw,.92rem);line-height:1.55;color:var(--slate);}
.fb-num{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-soft);
}

/* the cover */
.fb-cover{
  background:linear-gradient(158deg,#122A7E 0%,#091642 62%,#0E2263 100%);
  border-color:rgba(246,186,30,.34);color:var(--on-dark);
}
.fb-cover h3,.fb-cover .fb-title{color:var(--paper);}
.fb-cover .fb-kicker{color:var(--on-dark-2);}
.fb-title{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,4.4vw,2.3rem);line-height:.96;letter-spacing:-.03em;color:var(--paper);
}
.fb-title span{display:block;color:var(--gold);}
.fb-rule{display:block;width:38px;height:1.5px;background:var(--gold);margin:.85rem 0;}
.fb-cover p{color:var(--on-dark-2);}
.fb-cover .fb-num{color:var(--on-dark-2);}

/* the closing page */
.fb-end{background:linear-gradient(158deg,#122A7E 0%,#091642 70%);border-color:rgba(246,186,30,.3);}
.fb-end h3{color:var(--paper);}
.fb-end p{color:var(--on-dark);}
.fb-end .fb-kicker{color:var(--gold);}

.fb-bar{display:flex;align-items:center;gap:1rem;}
.fb-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-dark-2);color:var(--paper);cursor:pointer;
  font-size:1.25rem;line-height:1;background:rgba(244,246,251,.06);
  transition:background-color .3s,color .3s,opacity .3s;
}
.fb-btn:hover:not(:disabled){background:var(--gold);color:#1A1206;border-color:var(--gold);}
.fb-btn:disabled{opacity:.32;cursor:not-allowed;}
.fb-count{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);min-width:12ch;text-align:center;
}

/* one page at a time on small screens */
@media (max-width:760px){
  .fb{--fb-page:min(78vw, 330px);}
  .fb-stage{width:var(--fb-page);aspect-ratio:1 / 1.42;}
  .fb-leaf{width:100%;}
  .fb-board-l{display:none;}
  .fb-board-r{width:100%;border-radius:6px;}
  .fb-front,.fb-back{border-radius:6px;}
}
@media (prefers-reduced-motion: reduce){
  .fb-leaf{transition:none;}
}

/* ---------- 30. Banner finish ---------- */
/* No panel behind the copy and no card behind the portrait — the headline sits
   directly on the scene, and the photograph stands on its own. What remains is
   the legibility veil (already defined above) plus a fine film grain.        */

/* fine film grain over both banner types */
.hero::after,
.phead::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(100deg,
      rgba(9,22,66,.90) 0%, rgba(9,22,66,.68) 32%,
      rgba(9,22,66,.22) 60%, rgba(9,22,66,0) 100%);
  background-repeat:repeat, no-repeat;
  background-size:140px 140px, cover;
}

/* page headers keep a soft wash on the reading side, for legibility over the 3D */
.phead::before{
  background:
    radial-gradient(100% 90% at 92% 0%, rgba(51,85,181,.34), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(246,186,30,.11), transparent 62%),
    radial-gradient(58% 130% at 0% 30%, rgba(9,22,66,.72), transparent 70%);
}

@media (max-width:939px){
  .hero::after,
  .phead::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
      linear-gradient(180deg,
        rgba(9,22,66,.90) 0%, rgba(9,22,66,.72) 45%, rgba(9,22,66,.88) 100%);
  }
}

/* flip-book: sane stacking before JS assigns it */
.fb-leaf:nth-child(3){z-index:4;}
.fb-leaf:nth-child(4){z-index:3;}
.fb-leaf:nth-child(5){z-index:2;}
.fb-leaf:nth-child(6){z-index:1;}

/* ---------- 31. Home: the room photograph ---------- */
.roomshot{aspect-ratio:16 / 9;}
.roomshot img{object-position:50% 42%;}
.roomshot figcaption{
  padding:2.2rem clamp(1rem,2.4vw,1.6rem) clamp(.9rem,2vw,1.2rem);
  font-size:.66rem;
}
@media (max-width:760px){ .roomshot{aspect-ratio:4 / 3;} }

/* footer logo lockup — sized to sit level with the column headings rather than
   towering over them, which was throwing the whole footer row out of balance */
.ftr-logo{height:84px;width:auto;margin:0 0 .2rem -2px;}
@media (max-width:559px){ .ftr-logo{height:72px;} }
/* the link columns start on the same optical line as the brand lockup */
@media (min-width:940px){ .ftr-grid > div:not(.ftr-brand){padding-top:.35rem;} }

/* ==========================================================================
   32. White header and navigation
   The logo's monogram is royal blue; on a navy bar it disappeared. A white
   header lets the full lockup read, and frames the dark hero cleanly.
   ========================================================================== */
.hdr{
  background:#FFFFFF;
  border-bottom:1px solid rgba(9,22,66,.10);
  transition:box-shadow .4s var(--ease), border-color .4s;
}
.hdr.is-stuck{
  background:#FFFFFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:rgba(9,22,66,.14);
  box-shadow:0 6px 24px -14px rgba(9,22,66,.35);
}

.brand{color:var(--ink);}
.brand-mark{filter:none;}
.brand-name{color:var(--ink);}
.brand-sub{color:var(--slate-soft);}

.nav a{color:var(--slate);}
.nav a:hover{color:var(--ink);}
.nav a.is-active{color:var(--ink);}
.nav .nav-cta{color:#1A1206;}
.nav .nav-cta:hover{color:#1A1206;}

.burger{border-color:rgba(9,22,66,.22);}
.burger span{background:var(--ink);}

@media (max-width:1179px){
  .nav{
    background:#FFFFFF;
    border-left:1px solid rgba(9,22,66,.12);
    box-shadow:-34px 0 70px -34px rgba(9,22,66,.28);
  }
  .nav a{border-bottom:1px solid rgba(9,22,66,.10);}
  .nav a.is-active{color:var(--gold-d);}
  .nav-foot{
    border-top:1px solid rgba(9,22,66,.12);
    color:var(--slate-soft);
  }
  .nav-foot a{color:var(--slate);}
  .nav-foot a:hover{color:var(--gold-d);}
}

/* the hero sits directly beneath an opaque bar now, so its own top
   gradient no longer needs to allow for a transparent header */
.hero{padding-top:calc(var(--header-h) + clamp(2rem,6vw,4.2rem));}
.phead{padding-top:calc(var(--header-h) + clamp(1.8rem,5vw,3.8rem));}

/* ==========================================================================
   33. Alignment pass — shared rhythm utilities
   Section-to-section spacing was previously set with one-off inline styles
   (1.1 / 1.2 / 1.3 / 1.9 / 2.1 / 2.2rem). Those are now a four-step scale, so
   the gap under a paragraph is the same gap on every page.
   ========================================================================== */
.mt-1{margin-top:1.1rem;}
.mt-2{margin-top:1.6rem;}
.mt-3{margin-top:2.1rem;}
.mt-4{margin-top:2.8rem;}
/* a full section-sized gap, used between stacked blocks inside one section */
.mt-sec{margin-top:clamp(2.6rem,6vw,4.4rem);}
.pb-0{padding-bottom:0;}

/* a trailing link sits on the heading's baseline, not below its descenders */
.sec-head-row .textlink{margin-bottom:.2rem;}

/* ==========================================================================
   34. Home — "invited by" credibility rail
   Real host institutions, pulled from the speaking record. A quiet mono rail
   directly under the statistics band: it earns trust without a logo wall.
   ========================================================================== */
.hosts{background:var(--paper-2);border-bottom:1px solid var(--line);}
.hosts-in{
  display:grid;grid-template-columns:1fr;gap:1.3rem;
  padding:clamp(1.7rem,3.6vw,2.4rem) 0;
}
@media (min-width:940px){
  .hosts-in{grid-template-columns:minmax(230px,300px) 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
}
.hosts-k{
  position:relative;padding-top:1.15rem;margin:0;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--slate-soft);line-height:1.5;
}
.hosts-k::before{
  content:"";position:absolute;left:0;top:0;width:28px;height:2px;
  border-radius:2px;background:var(--gold);
}
.hosts-list{
  display:flex;flex-wrap:wrap;gap:.55rem 0;
  font-family:var(--f-mono);font-size:.695rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);line-height:1.75;
}
.hosts-list li{position:relative;padding-right:1.75rem;}
.hosts-list li::after{
  content:"";position:absolute;right:.78rem;top:50%;margin-top:-1.5px;
  width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.8;
}
.hosts-list li:last-child{padding-right:0;}
.hosts-list li:last-child::after{display:none;}

/* ==========================================================================
   35. Home — THE EARTH, presented as an object
   The cover was a flat rectangle floating in half a column. It now has a
   fore-edge, a spine and a resting tilt, so it reads as a book on a shelf.
   ========================================================================== */
.split-media{perspective:1500px;}
.bookshot{
  width:min(100%,330px);
  transform:rotateY(-11deg) rotateX(3deg);
  transition:transform .75s var(--ease), box-shadow .75s var(--ease);
  will-change:transform;
}
.split-media:hover .bookshot{transform:rotateY(-3deg) rotateX(1deg) translateY(-8px);}
/* the fore-edge — stacked paper on the opening side */
.bookshot::before{
  content:"";position:absolute;right:0;top:7px;bottom:7px;width:8px;z-index:3;
  border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(to right,
    rgba(246,248,252,.92) 0 1px, rgba(158,170,200,.55) 1px 2px);
  box-shadow:inset -1px 0 2px rgba(9,22,66,.35);
}
@media (prefers-reduced-motion: reduce){
  .bookshot{transform:none;}
  .split-media:hover .bookshot{transform:none;}
}
@media (max-width:939px){
  .bookshot{transform:none;}
  .split-media:hover .bookshot{transform:translateY(-6px);}
}

/* ==========================================================================
   36. Home — archive posters
   ========================================================================== */
.figure-poster{background:var(--ink);}
.figure-poster img{transition:transform .85s var(--ease), filter .5s;filter:saturate(.96);}
.figure-poster:hover img{transform:scale(1.045);filter:saturate(1.05);}
.figure-poster::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--gold);transition:box-shadow .38s var(--ease);
}
.figure-poster:hover::after{box-shadow:inset 0 0 0 2px var(--gold);}

/* ==========================================================================
   37. Home — hero refinements
   ========================================================================== */
.hero-roles{row-gap:.6rem;}
/* the dial never breaks the page gutter on small screens */
@media (max-width:939px){
  .dial{right:0;bottom:-.75rem;}
}

/* the rail is long on a phone — tighten it rather than truncate the record */
@media (max-width:559px){
  .hosts-list{font-size:.66rem;letter-spacing:.08em;gap:.45rem 0;line-height:1.62;}
  .hosts-list li{padding-right:1.4rem;}
  .hosts-list li::after{right:.6rem;}
}

/* ---------- 38. Studio credit ---------- */
.ftr-by{color:var(--on-dark-2);opacity:.85;}
.ftr-by a{
  color:var(--on-dark);border-bottom:1px solid transparent;
  transition:color .28s, border-color .28s;
}
.ftr-by a:hover{color:var(--gold);border-bottom-color:var(--gold);}
/* three items in the bottom rail: keep them from crowding on mid widths */
@media (max-width:820px){
  .ftr-bottom{justify-content:flex-start;gap:.6rem 1.2rem;}
}

/* ---------- 39. Map embed ---------- */
.mapbox{
  position:relative;width:100%;aspect-ratio:16/10;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--deep);box-shadow:var(--shadow-1);
}
.mapbox iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  /* the embed is a bright surface in a navy-and-gold page; settle it slightly */
  filter:saturate(.92) contrast(1.02);
}
.section-dark .mapbox,.section-deep .mapbox{border-color:var(--line-dark);}
@media (max-width:559px){ .mapbox{aspect-ratio:4/3;} }

/* ==========================================================================
   40. Home banner — smooth 3D float
   The portrait, its gold frame and the 24-hour dial move together as one
   object, so nothing drifts out of register. The animation lives on an inner
   wrapper: `data-reveal` owns the transform on .hero-figure itself, and two
   transforms on one element would cancel each other out.
   ========================================================================== */
.hero-float{
  position:relative;width:100%;
  transform-style:preserve-3d;
  animation:heroFloat 13s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform;
}
/* the tilt is small, but a rotated raster edge still needs smoothing */
.hero-float .portrait{backface-visibility:hidden;-webkit-backface-visibility:hidden;}

@keyframes heroFloat{
  0%   {transform:perspective(1500px) rotateY(-1.5deg) rotateX(.6deg)  translate3d(0,0,0);}
  25%  {transform:perspective(1500px) rotateY(.8deg)   rotateX(-.5deg) translate3d(0,-7px,0);}
  50%  {transform:perspective(1500px) rotateY(1.6deg)  rotateX(.35deg) translate3d(0,-3px,0);}
  75%  {transform:perspective(1500px) rotateY(-.5deg)  rotateX(-.7deg) translate3d(0,-9px,0);}
  100% {transform:perspective(1500px) rotateY(-1.5deg) rotateX(.6deg)  translate3d(0,0,0);}
}

/* A soft cast shadow so the portrait reads as lifted off the banner rather
   than painted onto it. It lives on .hero-figure, NOT on the rotating
   wrapper: a shadow on the ground should stay put while the object above it
   tilts, and a negative z-index inside a preserve-3d context is unreliable. */
.hero-figure::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:10%;right:10%;bottom:-24px;height:40px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(3,8,28,.6), transparent 72%);
  filter:blur(9px);
  animation:heroShadow 13s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes heroShadow{
  0%,100%{transform:scale(1);opacity:.7;}
  25%    {transform:scale(.94);opacity:.5;}
  75%    {transform:scale(.92);opacity:.44;}
}

/* gentler on phones, where the banner fills the screen and the motion is
   nearer the eye */
@media (max-width:939px){
  .hero-float{animation-duration:15s;}
  @keyframes heroFloat{
    0%   {transform:perspective(1200px) rotateY(-.9deg) rotateX(.35deg) translate3d(0,0,0);}
    25%  {transform:perspective(1200px) rotateY(.5deg)  rotateX(-.3deg) translate3d(0,-4px,0);}
    50%  {transform:perspective(1200px) rotateY(1deg)   rotateX(.2deg)  translate3d(0,-2px,0);}
    75%  {transform:perspective(1200px) rotateY(-.3deg) rotateX(-.4deg) translate3d(0,-5px,0);}
    100% {transform:perspective(1200px) rotateY(-.9deg) rotateX(.35deg) translate3d(0,0,0);}
  }
}

/* motion is decoration here: switch it off entirely, don't just speed it up */
@media (prefers-reduced-motion: reduce){
  .hero-float,.hero-figure::after{animation:none!important;transform:none!important;}
  .hero-figure::after{opacity:.6;}
}

/* ---------- 41. Home polish ---------- */
/* A gold hairline around the portrait. An inset directional rim was tried
   first and was invisible — 1.5px at 28% over a busy photograph reads as
   nothing. A ring on the outer edge sits against the navy banner instead of
   against the image, so it actually registers, and it ties the portrait to
   the gold used everywhere else. */
.portrait{
  box-shadow:var(--shadow-3),
             0 0 0 1px rgba(246,186,30,.30),
             0 0 34px -6px rgba(246,186,30,.14);
}

/* the auditorium photograph picks up the same slow zoom as the poster grid,
   so every image on the page behaves the same way under the cursor */
.roomshot img{transition:transform 1.15s var(--ease);}
.roomshot:hover img{transform:scale(1.035);}

/* ==========================================================================
   42. Mobile menu — burger, close button, drawer
   The drawer overlays the header, so the burger underneath it was covered and
   could not be clicked: once open, the only way out was the 47px strip of
   scrim beside the panel. A dedicated close button now sits ABOVE the drawer,
   pinned to the header. It is deliberately not inside .nav — the drawer
   scrolls on short screens, and a close button that scrolls away is worse
   than no close button at all.
   ========================================================================== */

/* ---- the hamburger ---- */
.burger{
  display:none;width:46px;height:46px;flex:0 0 46px;
  border:1px solid rgba(9,22,66,.16);border-radius:10px;
  background:transparent;cursor:pointer;padding:0;place-items:center;
  transition:background-color .28s, border-color .28s, opacity .3s var(--ease);
}
.burger:hover{background:rgba(9,22,66,.045);border-color:rgba(9,22,66,.30);}
.burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
  margin:0;transition:transform .3s var(--ease);
}
.burger span + span{margin-top:4px;}
/* a small tell that the bars are a control, not an ornament */
.burger:hover span:nth-child(1){transform:translateX(2px);}
.burger:hover span:nth-child(3){transform:translateX(-2px);}
/* the morph is retired: the pinned X below replaces it, and running both
   would have put two close affordances in the same 46px of screen */
.burger[aria-expanded="true"] span:nth-child(1),
.burger[aria-expanded="true"] span:nth-child(2),
.burger[aria-expanded="true"] span:nth-child(3){transform:none;opacity:1;}

/* ---- the close button ---- */
/* Sits at exactly the burger's coordinates, so one crossfades into the other
   in place rather than appearing somewhere new. */
.nav-x{
  display:none;position:fixed;z-index:95;
  top:calc((var(--header-h) - 46px) / 2);right:var(--gutter);
  width:46px;height:46px;border-radius:10px;
  place-items:center;cursor:pointer;color:var(--ink);
  border:1px solid rgba(9,22,66,.16);background:#fff;
  opacity:0;transform:scale(.85);pointer-events:none;visibility:hidden;
  /* visibility is stepped, not eased: it flips to visible the instant the
     menu opens (so the button can take focus immediately) and waits for the
     fade to finish before going hidden again. Transitioning it like a normal
     property leaves it computing as `hidden` at progress 0, and a hidden
     element silently refuses .focus(). */
  transition:opacity .3s var(--ease), transform .35s var(--ease),
             background-color .28s, border-color .28s,
             visibility 0s linear .3s;
}
.nav-x svg{width:19px;height:19px;}
.nav-x:hover{background:rgba(9,22,66,.045);border-color:rgba(9,22,66,.32);}

@media (max-width:1179px){
  .burger{display:grid;}
  .nav-x{display:grid;}
  /* crossfade: burger out, X in, same spot. Driven off body.is-locked — the
     X sits BEFORE .nav in the DOM, so a sibling selector cannot reach it. */
  body.is-locked .nav-x{opacity:1;transform:scale(1);pointer-events:auto;visibility:visible;
    transition:opacity .3s var(--ease), transform .35s var(--ease),
               background-color .28s, border-color .28s, visibility 0s linear 0s;}
  body.is-locked .burger{opacity:0;pointer-events:none;}

  /* Off-canvas links were still focusable — tabbing walked into a menu that
     was not on screen. visibility takes them out of the tab order. */
  .nav{
    visibility:hidden;
    padding-bottom:calc(2.5rem + env(safe-area-inset-bottom, 0px));
    /* same stepped-visibility technique as .nav-x above */
    transition:transform .46s var(--ease), visibility 0s linear .46s;
  }
  .nav.is-open{
    visibility:visible;
    transition:transform .46s var(--ease), visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-x{transform:none;}
}

/* ==========================================================================
   43. Mobile responsive corrections
   ========================================================================== */

/* ---- 43a. The logo was being squashed into a square ----
   An earlier rule set the monogram to 36x36 below 380px. The artwork is
   320x245, so on most phones the mark was distorted. Height only; the width
   follows the aspect ratio. */
@media (max-width:380px){
  .brand-mark{height:36px;width:auto;flex:0 0 auto;}
}

/* ---- 43b. Header overflowed the page gutter at 320px ----
   Brand lockup + burger could not fit in 280px, so the burger sat 8px past
   the wrap edge and no longer lined up with the content below it. The
   tagline is the longest and least load-bearing part, so it goes first. */
@media (max-width:359px){
  .brand-sub{display:none;}
  .brand{gap:.55rem;}
  .brand-name{font-size:.98rem;}
}

/* ---- 43c. Touch targets ----
   `.textlink` sat at 34px. Apple and Google both put the comfortable minimum
   at 44px; on a pointer device the smaller box is fine, so this is scoped to
   coarse pointers rather than applied everywhere. */
@media (pointer:coarse){
  .textlink{min-height:44px;}
  .crumbs a{display:inline-flex;align-items:center;min-height:34px;}
  .ftr-links a{display:inline-flex;align-items:center;min-height:36px;}
}

/* ---- 43d. Notched and gesture-bar phones ----
   The floating actions sat in the home-indicator strip on iPhones. */
.wa{bottom:calc(clamp(.85rem,2.5vw,1.5rem) + env(safe-area-inset-bottom, 0px));}
.chat-btn{bottom:calc(clamp(.85rem,2.5vw,1.5rem) + 64px + env(safe-area-inset-bottom, 0px));}
.chat{bottom:calc(clamp(.85rem,2.5vw,1.5rem) + 128px + env(safe-area-inset-bottom, 0px));}
@media (max-width:400px){
  .chat-btn{bottom:calc(.85rem + 60px + env(safe-area-inset-bottom, 0px));}
  .chat{bottom:calc(.85rem + 120px + env(safe-area-inset-bottom, 0px));}
}

/* ---- 43e. Drawer on short screens ----
   Landscape phones are ~375px tall: the menu must scroll without the close
   button going with it (it is pinned in the header, outside .nav). */
@media (max-width:1179px) and (max-height:520px){
  .nav a{min-height:46px;padding-block:.75rem;}
  .nav .nav-cta{min-height:46px;margin-top:1rem;}
  .nav-foot{margin-top:1.2rem;padding-top:1rem;}
}

/* ---- 43f. The genuinely undersized targets ----
   The footer's legal row, the studio credit and the chat close button were
   11-12px and 31px tall — below even WCAG 2.5.8's 24px minimum. The footer
   link columns are left at 36px: with the 10px row gap that is a ~46px pitch,
   which is comfortable in practice. */
@media (pointer:coarse){
  .ftr-bottom a{display:inline-flex;align-items:center;min-height:40px;}
  .ftr-by a{display:inline-flex;align-items:center;min-height:40px;}
  .chat-x{width:40px;height:40px;}
}

/* ---- 43g. List and contact links ----
   The sitemap index and the contact page's tap-to-call / tap-to-email links
   were 19-20px tall. Inline links inside running prose are exempt from
   WCAG 2.5.8 and are left alone; these are list and data links, which are
   not. */
@media (pointer:coarse){
  .ticks li a{display:inline-flex;align-items:center;min-height:36px;}
  .info-v a{display:inline-flex;align-items:center;min-height:36px;}
}