/* ============================================================
   CARLSON GRACIE AMSTERDAM — DESIGN TOKENS v3.0 — FINAL PALETTE
   Black · Cream · Red — the academy patch's own three colours
   Two structural greys from the new tatami. No navy. No green.
   ============================================================ */
:root{
  --ink:#141414; --ink-900:#1C1B19; --ink-700:#2E2C29;
  --gray-70:#4A4744;  /* body on cream — 8.1:1 */
  --gray-50:#6B6763;  /* muted — 4.9:1 */
  --hair-c:#D9D3C8; --hair:1px solid var(--hair-c);
  --cream:#F4F0E8; --cream-dim:#EBE5D9; --paper:#FBF9F5;
  --mat-light:#E7E5DF; --mat-grey:#6E7378;
  --red:#C2181E; --red-dim:#9E1218; --red-lt:#F08A8E;  /* derived from the logo's #ED2127 */
  --logo-red:#ED2127; /* the logo's own red — lives inside the artwork, never painted */
  --on-ink:#B9B4AB;
  --on-ink-strong:#FFFFFF;  /* type on ink at full strength */
  --on-ink-muted:#8C877F;   /* meta on ink — 4.82:1 on --ink-900, AA */
  --on-ink-link:#E4E0D8;    /* links on ink — 13.07:1 */

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --fs-display:clamp(2.4rem,5.2vw,3.9rem);
  --fs-h2:clamp(1.8rem,3.2vw,2.6rem);
  --fs-h3:clamp(1.18rem,1.8vw,1.42rem);
  --fs-lead:clamp(1.06rem,1.45vw,1.24rem);
  --fs-body:1.0625rem; --fs-label:.75rem;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --maxw:1200px; --prose:66ch; --radius:2px; --radius-card:3px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-size:var(--fs-body);line-height:1.7}
h1,h2,h3,h4,.sans{font-family:var(--sans)}
h1,h2,h3{line-height:1.12;letter-spacing:-0.015em;margin:0;font-weight:600}
p{margin:0 0 1.1em} a{color:inherit} img{max-width:100%;display:block}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:var(--radius)}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--on-ink-strong)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.prose{max-width:var(--prose)}
section{padding:var(--s9) 0}
@media(max-width:700px){section{padding:var(--s8) 0}}
.s-cream{background:var(--cream)} .s-paper{background:var(--paper)}
.s-mat{background:var(--mat-light)} .s-ink{background:var(--ink);color:var(--cream)}
.s-ink h2,.s-ink h3{color:var(--cream)}

/* Eyebrow — ink, not red. Red is reserved for action. */
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  margin:0 0 var(--s4);display:block}
.s-ink .eyebrow{color:var(--cream)}

.xxx{display:flex;gap:7px;align-items:center;margin:0 0 var(--s5)}
.xxx svg{width:12px;height:12px;display:block}

/* Buttons — red is the action colour, and the only place it lives */
.btn{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 var(--s6);border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red);color:var(--on-ink-strong);border-color:var(--red)}
.btn-primary:hover{background:var(--red-dim);border-color:var(--red-dim)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.on-dark .btn-ghost{color:var(--cream);border-color:rgba(244,240,232,.5)}
.on-dark .btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* Links — ink, underlined; red on hover. The page is black on cream;
   red appears only where you can act. */
.body-link,.prose a{color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--hair-c);transition:color .15s,text-decoration-color .15s}
.body-link:hover,.prose a:hover{color:var(--red);text-decoration-color:var(--red)}
.s-ink .prose a,.s-ink .body-link{color:var(--cream);text-decoration-color:rgba(244,240,232,.45)}
/* A body link on any dark section: red, and the light red of the palette —
   the standard red is 2.2:1 on near-black and cannot be read. This was black
   on black in the closing band of the homepage. */
.on-dark .body-link,.on-dark .prose a{color:var(--red-lt);text-decoration-color:var(--red-lt)}
.on-dark .body-link:hover,.on-dark .prose a:hover{color:var(--on-ink-strong);text-decoration-color:var(--on-ink-strong)}
.s-ink .prose a:hover,.s-ink .body-link:hover{color:var(--red-lt);text-decoration-color:var(--red-lt)}

.mockup-bar{background:#0B0B0B;color:#8A857D;font-family:var(--sans);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;text-align:center}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:var(--hair)}
.hdr-in{display:flex;align-items:center;gap:var(--s6);min-height:76px}
.lockup{display:flex;align-items:center;gap:var(--s4);text-decoration:none}
.lockup img{flex:none;width:52px;height:52px}
@media(max-width:520px){.lockup img{width:44px;height:44px}}
.wordmark{font-family:var(--sans);text-decoration:none;line-height:1;display:block}
.wordmark b{display:block;font-weight:700;font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase}
.wordmark span{display:block;font-weight:500;font-size:.7rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gray-50);margin-top:4px}
.nav{margin-left:auto;display:flex;gap:clamp(15px,1.55vw,32px);align-items:center}
.nav a{font-family:var(--sans);font-size:.9rem;font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--red)}
.hdr .btn{min-height:44px;padding:0 var(--s5);font-size:.875rem}
.burger{display:none;margin-left:auto;background:none;border:var(--hair);border-radius:var(--radius);
  min-height:44px;min-width:44px;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.1em}
/* Header actions. Two tiers, never two primaries: "Sign up" is a bordered
   button so it outranks every text link in the nav, while red stays reserved
   for the single primary action the site is built around. */
.hdr-cta{display:flex;align-items:center;gap:var(--s3);flex:none}
/* The drawer takes over below 1000px. Measured: with seven nav links and two
   buttons the header still fits at 1001px and only overflows below ~900px, so
   this keeps a 100px safety margin and gives tablets the full navigation. */
/* Raised from 1000px on 1 Nov 2026: the Dutch navigation words are longer
   than the English ones and, with the language control beside them, the
   header overflowed at ~1100px. Collapsing to the drawer keeps every link
   reachable; hiding a button instead would not, because above this width
   the drawer cannot be opened. */
@media(max-width:1120px){.nav{display:none}.burger{display:inline-flex}.hdr-cta{margin-left:var(--s3)}}
@media(max-width:560px){.hdr-cta .btn-ghost{display:none}}
/* Below 430px the two buttons go, but the language control stays: it is
   small, and a visitor who cannot find their own language leaves. */
@media(max-width:430px){.hdr-cta .btn-primary{display:none}}
/* In the drawer the two actions stack full width, primary first. */
.drawer-panel .btn{width:100%}
.drawer-panel .btn + .btn{margin-top:var(--s3)}

/* ===== HERO — the real room behind, the mat panel in front ===== */
.hero{position:relative;background:var(--ink);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.70) 46%,rgba(20,20,20,.40) 100%)}
.hero-in{position:relative;padding:var(--s9) 0}
@media(max-width:700px){.hero-in{padding:var(--s7) 0}}
.mat{background:var(--mat-light);position:relative;max-width:70ch;
  padding:clamp(26px,3.4vw,46px)}
.mat::before{content:'';position:absolute;inset:clamp(12px,1.4vw,18px);
  border:clamp(9px,1.1vw,14px) solid var(--mat-grey);pointer-events:none}
.mat-in{position:relative;padding:clamp(22px,2.8vw,38px)}
/* Mobile measure: the mat stripe already shrinks by clamp; the padding must too,
   or a 390px screen is left with a 33-character line. This recovers ~34px. */
@media(max-width:700px){
  .mat{padding:16px}
  .mat::before{inset:8px;border-width:7px}
  .mat-in{padding:14px}
}
.hero h1{font-size:var(--fs-display);font-weight:700;letter-spacing:-0.028em;max-width:13ch;color:var(--ink)}
.hero .lead{font-size:var(--fs-lead);line-height:1.62;margin-top:var(--s5);color:var(--gray-70)}
.hero .lead + .lead{margin-top:0}
.hero .lead strong{color:var(--ink);font-weight:600}
/* The two hero actions sit on the same two-column grid as the quiet block
   beneath them, with the same gap — otherwise content-width buttons leave a
   ragged right edge against a grid that has a straight one. */
.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.hero-cta .btn{width:100%}
.hero-meta{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(20,20,20,.16);
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);font-family:var(--sans);font-size:.85rem;color:var(--gray-70)}
.hero-meta b{color:var(--ink);font-weight:700}

.sec-head{max-width:60ch;margin-bottom:var(--s7)}
.sec-head h2{font-size:var(--fs-h2);font-weight:700}
.sec-head .sub{font-family:var(--sans);color:var(--gray-50);margin-top:var(--s4);font-size:1rem}
.s-ink .sec-head .sub{color:var(--on-ink)}
.h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:var(--s5)}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:860px){.doors{grid-template-columns:1fr}}
.door{background:var(--paper);border:var(--hair);border-radius:var(--radius-card);
  padding:var(--s6);display:flex;flex-direction:column;border-top:3px solid var(--ink);
  transition:border-top-color .15s}
.door:hover{border-top-color:var(--red)}
.door--ext{border-top-color:var(--mat-grey)}
.door h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:var(--s4)}
.door p{color:var(--gray-70);margin-bottom:var(--s5)}
.door .links{margin-top:auto;padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s4);
  font-family:var(--sans);font-size:.9rem;font-weight:600}
.door .links a{text-decoration:none;border-bottom:2px solid var(--hair-c);padding-bottom:2px;transition:border-color .15s,color .15s}
.door .links a:hover{color:var(--red);border-bottom-color:var(--red)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--s7)}}

.facts-list{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.facts-list li{display:flex;justify-content:space-between;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:var(--hair);font-family:var(--sans);font-size:.95rem}
.facts-list li span:last-child{color:var(--gray-50);text-align:right}
@media(max-width:520px){.facts-list li{flex-direction:column;gap:2px}
  .facts-list li span:last-child{text-align:left}}

.claim{font-family:var(--sans);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:600;
  line-height:1.28;letter-spacing:-0.015em;max-width:24ch;margin:0 0 var(--s6);color:var(--on-ink-strong)}
/* The patch column holds more than one mark now — space them. */
.patch-fig{margin:0}
.patch-fig + .patch-fig{margin-top:var(--s7)}
.patch-fig img{width:100%;height:auto;max-width:250px;margin:0 auto}
.patch-fig figcaption{font-family:var(--sans);font-size:.8rem;color:var(--on-ink-muted);text-align:center;
  margin:var(--s4) auto 0;max-width:250px;line-height:1.5}
.rank-line{font-family:var(--sans);font-weight:600;font-size:1.06rem;color:var(--on-ink-strong);
  border-left:3px solid var(--red);padding-left:var(--s5);margin:var(--s6) 0 0}
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid rgba(244,240,232,.2)}
@media(max-width:700px){.figures{grid-template-columns:1fr}}
.figure b{display:block;font-family:var(--sans);font-size:clamp(1.55rem,2.9vw,2rem);
  font-weight:700;color:var(--on-ink-strong);line-height:1.1}
.figure span{display:block;font-family:var(--sans);font-size:.875rem;color:var(--on-ink);margin-top:var(--s2)}

.keys{border-left:4px solid var(--mat-grey);padding-left:var(--s6)}
@media(max-width:700px){.keys{padding-left:var(--s5)}}

.sched-list{list-style:none;margin:0;padding:0}
.sched-list li{display:grid;grid-template-columns:180px 1fr;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:var(--hair);align-items:baseline}
@media(max-width:640px){.sched-list li{grid-template-columns:1fr;gap:2px}}
.sched-list b{font-family:var(--sans);font-size:.95rem;font-weight:600}
.sched-list span{color:var(--gray-70);font-size:.98rem}
.tag{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius);
  background:var(--ink);color:var(--cream);vertical-align:2px;margin-left:var(--s2)}
.tag.tag-red,.tag-red{background:var(--red);color:#fff;border-color:var(--red)}
.note{background:var(--cream-dim);border-left:4px solid var(--ink);
  padding:var(--s5) var(--s6);font-size:1rem;margin-top:var(--s6)}
.note strong{font-family:var(--sans)}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-bottom:var(--s6)}
@media(max-width:760px){.prices{grid-template-columns:1fr}}
.price{background:var(--paper);border:var(--hair);border-radius:var(--radius-card);padding:var(--s6)}
.price b{display:block;font-family:var(--sans);font-size:2rem;font-weight:700;line-height:1;margin-bottom:var(--s3)}
.price span{display:block;font-family:var(--sans);font-size:.92rem;color:var(--gray-70)}
.price .who{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:var(--s4)}
.stamp{font-family:var(--sans);font-size:.85rem;color:var(--gray-50)}

.addr{font-family:var(--sans);font-size:1.05rem;line-height:1.65;margin:0 0 var(--s5)}
.addr b{display:block;font-size:1.15rem;font-weight:700}
.map-ph{background:var(--mat-light);border:var(--hair);border-radius:var(--radius-card);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--sans);font-size:.9rem;color:var(--gray-50);padding:var(--s6)}

.slots{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:860px){.slots{grid-template-columns:1fr}}
.slot{border:2px dashed var(--hair-c);border-radius:var(--radius-card);padding:var(--s6);background:var(--paper)}
.slot .who{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray-50);margin-bottom:var(--s4)}
.slot p{color:var(--gray-50);font-style:italic;margin:0;font-size:.98rem}

.faq details{border-bottom:var(--hair)}
.faq details:first-of-type{border-top:var(--hair)}
/* 48px minimum touch target: the padding lives on summary, not on details */
.faq summary{font-family:var(--sans);font-size:1.06rem;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s5);align-items:center;
  min-height:48px;padding:var(--s5) 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'—';color:var(--red);font-weight:700;flex:none}
.faq details:not([open]) summary::after{content:'+'}
.faq .a{padding:0 0 var(--s5);max-width:var(--prose);color:var(--gray-70)}
.faq .a p{margin:0}

.final{background:var(--ink);color:var(--cream);text-align:center}
.final h2{font-size:var(--fs-h2);font-weight:700;color:var(--on-ink-strong);max-width:18ch;margin:0 auto var(--s5)}
.final p{color:var(--on-ink);max-width:52ch;margin:0 auto var(--s7)}
.final .row{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}

.ftr{background:var(--ink-900);color:var(--on-ink);font-family:var(--sans);font-size:.92rem;padding:var(--s8) 0 var(--s6)}
.ftr a{color:var(--on-ink-link);text-decoration:none;border-bottom:1px solid rgba(228,224,216,.3)}
.ftr a:hover{color:var(--red-lt);border-bottom-color:var(--red-lt)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);
  padding-bottom:var(--s7);border-bottom:1px solid rgba(244,240,232,.14)}
@media(max-width:820px){.ftr-grid{grid-template-columns:1fr;gap:var(--s6)}}
.ftr h4{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-muted);margin:0 0 var(--s4)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ftr .bottom{padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;font-size:.85rem;color:var(--on-ink-muted)}
.ftr .wordmark b{color:var(--cream)} .ftr .wordmark span{color:var(--on-ink-muted)}

/* ===== Skip link ===== */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:600;
  font-size:.9rem;padding:14px 20px;text-decoration:none;border-radius:var(--radius)}
.skip:focus{left:var(--s5);top:var(--s3)}

/* ===== Mobile navigation drawer =====
   No entrance animation, deliberately: Design 01 permits 150ms colour transitions
   and nothing else. A drawer that appears instantly is honest to that rule and is
   never the thing a user waits for. Everything below is behaviour, not motion. */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer[data-open]{display:block}
.drawer-scrim{position:absolute;inset:0;background:rgba(20,20,20,.55)}
.drawer-panel{position:absolute;inset:0 0 0 auto;width:min(88vw,380px);
  background:var(--cream);border-left:var(--hair);
  display:flex;flex-direction:column;padding:var(--s5);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:56px;margin-bottom:var(--s4)}
.drawer-title{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gray-50)}
.drawer-close{background:none;border:var(--hair);border-radius:var(--radius);
  min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:1.1rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background-color .15s,color .15s}
.drawer-close:hover{background:var(--ink);color:var(--cream)}
.drawer nav ul{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.drawer nav a{display:flex;align-items:center;min-height:56px;
  font-family:var(--sans);font-size:1.06rem;font-weight:600;text-decoration:none;
  border-bottom:var(--hair);transition:color .15s}
.drawer nav a:hover{color:var(--red)}
.drawer nav a[aria-current="page"]{color:var(--red)}
.drawer .btn{width:100%;margin-top:var(--s6)}
.drawer-foot{margin-top:auto;padding-top:var(--s6);font-family:var(--sans);font-size:.92rem}
.drawer-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:48px}
body[data-drawer-open]{overflow:hidden}
@media(min-width:961px){.drawer{display:none!important}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- site notice --------------------------------------------------- */
.notice{background:var(--cream-dim);border-bottom:var(--hair)}
.notice-in{display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s3);padding-bottom:var(--s3)}
.notice p{margin:0;font-family:var(--sans);font-size:.95rem;line-height:1.5;flex:1}
.notice-close{appearance:none;background:none;border:0;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--gray-70);
  min-width:48px;min-height:48px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--radius)}
.notice-close:hover{color:var(--ink)}

/* ---- generated page content ----------------------------------------- */
.table-wrap{overflow-x:auto;margin:var(--s5) 0}
.table-wrap table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.95rem}
.table-wrap th,.table-wrap td{text-align:left;padding:var(--s3) var(--s4);border-bottom:var(--hair);vertical-align:top}
.table-wrap th{font-weight:700;white-space:nowrap}
main h2{font-size:var(--fs-h2);margin:var(--s8) 0 var(--s5)}
/* Each generated section already opens with 96px of padding. An h2 that is the
   first thing in that section was adding another 64px on top of it — 304px of
   nothing between one paragraph and the next heading. The margin is right when
   an h2 follows text inside a block; it is redundant when the section boundary
   has already done the spacing. Same for a rule or a heading that ends a
   section: the tone change below it is the separator. */
main .prose > h2:first-child,
main .prose > h3:first-child{margin-top:0}
main .prose > *:last-child{margin-bottom:0}
main .prose > hr:last-child{display:none}
main h3{font-size:var(--fs-h3);margin:var(--s6) 0 var(--s3)}
main section:first-child h1{font-size:var(--fs-display);margin:0 0 var(--s5)}
main .prose ul,main .prose ol{padding-left:1.2em}
main .prose li{margin:0 0 .5em}
main blockquote{margin:var(--s5) 0;padding:var(--s4) var(--s5);
  background:var(--paper);border-left:3px solid var(--red)}
main blockquote p{margin:0}
/* A pull-quote can carry more than one paragraph. Space them, or four
   paragraphs read as one wall of text. */
main blockquote p + p{margin-top:var(--s4)}
main hr{border:0;border-top:var(--hair);margin:var(--s7) 0}

/* ---- embeds & CTA rows ---------------------------------------------- */
.gymdesk-embed{margin:var(--s6) 0;min-height:120px}
/* Two buttons in a row need a gap and need to wrap on a narrow screen;
   until now every cta-row held exactly one button, so neither was set. */
.cta-row{margin:var(--s6) 0;display:flex;flex-wrap:wrap;gap:var(--s3)}
main .prose .btn{text-decoration:none}

/* ---- map block ------------------------------------------------------ */
.map-block{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s6);
  margin:var(--s6) 0;align-items:start}
.map-embed{position:relative;padding-top:56%;border:var(--hair);border-radius:var(--radius-card);overflow:hidden}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%}
.map-address{font-family:var(--sans);line-height:1.6}
.map-note{font-family:var(--sans);font-size:.9rem}
@media(max-width:760px){.map-block{grid-template-columns:1fr}.map-embed{padding-top:75%}}

/* ---- full-bleed embed ------------------------------------------------ */
.wrap-wide{max-width:1600px;margin:0 auto;padding:0 var(--s5)}
.gymdesk-full{padding-top:var(--s6);padding-bottom:var(--s6)}
.gymdesk-embed--wide{width:100%;margin:0}
.gymdesk-embed--wide iframe,.gymdesk-embed--wide table{width:100%!important;max-width:none!important}
@media(max-width:700px){.wrap-wide{padding:0 var(--s4)}}


/* ---- announcements --------------------------------------------------- */
.ann-section{margin:0 0 var(--s8)}
.ann-empty{background:var(--paper);border:var(--hair);border-radius:var(--radius-card);
  padding:var(--s6);font-family:var(--sans);font-size:.98rem;color:var(--gray-70)}
.ann-item{border-bottom:var(--hair);padding:var(--s5) 0}
.ann-item:first-of-type{border-top:var(--hair)}
.ann-date{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-50);display:block;margin-bottom:var(--s2)}
.ann-item h3{margin:0 0 var(--s2)}
.ann-item p{margin:0}

/* ── Quick navigation ─────────────────────────────────────────────────
   The secondary destinations, grouped under the primary hero actions.
   Ghost buttons in the quiet variant only: the hero has exactly one
   primary action and none of these is it. Two columns at every width —
   the four labels are short enough to hold a 48px target at 390px, and
   two columns keep five stacked buttons from doubling the hero's height
   on a phone. The full-width row leads the group. */
.quicknav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.quicknav .btn{width:100%;padding:0 var(--s4)}
.quicknav .btn-wide{grid-column:1 / -1}

/* A quieter third tier, for a different audience: instructors, not students.
   Findable, not competing with the trial. */
.btn-quiet{background:transparent;border-color:var(--hair-c);color:var(--gray-70);font-weight:500}
.btn-quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ── Figures ──────────────────────────────────────────────────────────
   A document figure: sized so it reads as a citation beside the text that
   states its contents, not as decoration. */
.fig{margin:var(--s6) 0}
.fig img{width:100%;height:auto;display:block}
.fig figcaption{font-family:var(--sans);font-size:.85rem;line-height:1.5;
  color:var(--gray-50);margin-top:var(--s3);max-width:62ch}
.fig-doc img{max-width:380px;border:1px solid var(--hair-c)}
.fig-doc figcaption{max-width:380px}
@media(max-width:700px){.fig-doc img,.fig-doc figcaption{max-width:none}}

/* The IBJJF block. The names and the document belong side by side — the text
   states what the certificate says, the certificate shows it. Below 860px the
   two stack, text first, because the names are the readable version. */
.cert-row{display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:var(--s8);align-items:start}
.cert-text{max-width:62ch}
.cert-text h2{margin-top:0}
.cert-row .fig{margin:0}
.cert-row .fig-doc img,.cert-row .fig-doc figcaption{max-width:100%}
@media(max-width:860px){
  .cert-row{grid-template-columns:1fr;gap:var(--s6)}
  .cert-row .fig-doc img{max-width:380px}
}
@media(max-width:700px){.cert-row .fig-doc img{max-width:none}}

/* A photograph inside the prose column: it takes the measure's full width and
   no more, so text and image share one left edge. */
.fig-photo img{max-width:100%}
/* The 1997 certificate is a small scan of a small document. Shown at its own
   size rather than enlarged into blur — the copy beside it carries the words. */
.fig-cert-1997 img{max-width:386px}
.fig-cert-1997 figcaption{max-width:386px}
@media(max-width:460px){.fig-cert-1997 img,.fig-cert-1997 figcaption{max-width:none}}

/* Text left, picture right. The figure is lifted out of the prose measure and
   given its own column, so the text keeps a readable line length instead of
   being squeezed to 200px by a floated image. Below 860px the two stack. */
.side-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:var(--s8);align-items:start}
.side-row .prose{max-width:62ch}
.side-row .fig{margin:0}
.side-row .fig img,.side-row .fig figcaption{max-width:100%}
@media(max-width:860px){
  .side-row{grid-template-columns:1fr;gap:var(--s6)}
  .side-row .fig img{max-width:380px}
}
@media(max-width:460px){.side-row .fig img{max-width:none}}

/* The schedule page is tables and short blocks, not long-form reading. It uses
   the full content width so the weekly timetable has room to breathe. */
.prose-wide{max-width:none}

/* More than one picture beside a block: they stack in the figure column. */
.side-figs{display:flex;flex-direction:column;gap:var(--s6)}
.side-figs .fig{margin:0}
/* Paragraphs keep a readable measure; tables and lists take the whole column. */
.side-row .prose{max-width:none}
.side-row .prose > p,.side-row .prose > ul,.side-row .prose > ol,
.side-row .prose > blockquote{max-width:62ch}

/* ---- The weekly schedule table (P0-2) ------------------------------------
   Four real columns in the HTML, because an extracted row has to carry the
   day, the time, the class and who may join it without the surrounding prose.
   Under 760px those four columns become one stacked block per session: a
   four-column grid at phone width squeezes "Who can join" into a sliver and
   pushes the table into its own horizontal scroll, which is where the most
   important column goes to hide. */
.prose .quicknav{margin-bottom:var(--s5)}
.table-wrap caption{caption-side:top;text-align:left;font-family:var(--sans);
  font-size:.85rem;color:var(--gray-50);padding:0 0 var(--s3)}
.sched-table td[data-c="time"]{white-space:nowrap}
.sched-table td[data-c="who"]{color:var(--gray-50)}
@media(max-width:760px){
  .sched-wrap{overflow-x:visible}
  .sched-table,.sched-table tbody,.sched-table tr,
  .sched-table th,.sched-table td{display:block;width:auto}
  .sched-table thead{display:none}
  .sched-table caption{display:block;width:auto}
  .sched-table tr{padding:var(--s4) 0;border-bottom:var(--hair)}
  .sched-table tr:last-child{border-bottom:0}
  .sched-table th,.sched-table td{border:0;padding:0;white-space:normal}
  .sched-table th[scope="row"]{display:inline;font-weight:700}
  .sched-table th[scope="row"]::after{content:" · ";font-weight:400;color:var(--gray-50)}
  .sched-table td[data-c="time"]{display:inline;color:var(--gray-50)}
  .sched-table td[data-c="class"]{margin-top:var(--s2);font-weight:600}
  .sched-table td[data-c="who"]{margin-top:2px;font-size:.92rem}
}

/* ---- Editorial two-column sections ---------------------------------------
   The body copy used to sit in a 66ch column inside a 1200px page, which left
   more than half the width empty on every section of every long page. The
   section heading now takes a column of its own beside the text instead of
   stacking on top of that emptiness, so the section fills the page while the
   reading line stays a readable length.

   This is pure CSS and needs no wrapper in the markup: the heading is pinned
   to column 1 and spans the rows, everything else lands in column 2 by normal
   grid auto-placement. That matters because announcements.html is edited by
   hand — it gets this layout without gaining a structure that a future edit
   could break. row-gap stays 0 on purpose: the row span would otherwise
   multiply the gap across two hundred empty implicit rows.

   Below 1040px the grid is not declared at all and every page renders exactly
   as it did before. */
@media(min-width:1040px){
  main .wrap > .prose{display:grid;align-items:start;max-width:none;
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    column-gap:clamp(2.5rem,5.5vw,6rem);row-gap:0}
  main .wrap > .prose > *{grid-column:2;min-width:0}
  main .wrap > .prose > hr{grid-column:1 / -1}
  main .wrap > .prose > h1:first-of-type,
  main .wrap > .prose > h2:first-of-type{grid-column:1;grid-row:auto / span 200;
    align-self:start;position:sticky;top:6.5rem;margin:0;text-wrap:balance}
  main .wrap > .prose > p,
  main .wrap > .prose > ul,
  main .wrap > .prose > ol,
  main .wrap > .prose > blockquote{max-width:72ch}

  /* The page opener carries display type and needs room to breathe, so it
     splits closer to half and half and does not stick. */
  main .wrap > .prose.is-lede{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  main .wrap > .prose.is-lede > h1:first-of-type{position:static}
  main .wrap > .prose.is-lede > p{max-width:64ch}
}

/* Instructor column on the weekly schedule. Gymdesk leads on this page, so the
   table carries the names it carries — muted, because the class and the
   eligibility rule are what a reader is scanning for. */
.sched-table td[data-c="prof"]{color:var(--gray-50)}
@media(max-width:760px){
  .sched-table td[data-c="prof"]{margin-top:2px;font-size:.92rem;font-style:italic}
}

/* The weekly schedule table breaks out of the text column and takes the full
   page width. Five columns carrying Gymdesk's own class names do not fit a
   reading measure — inside the text column every row wrapped to four lines. */
@media(min-width:1040px){
  main .wrap > .prose > .sched-wrap{grid-column:1 / -1}
}

/* A page's H1 never sticks. On /schedule/ the table spans both columns, so a
   sticky H1 floats over the rows as you scroll — it was covering the first
   column of the timetable. Section H2s still follow their own section. */
@media(min-width:1040px){
  main .wrap > .prose > h1:first-of-type{position:static}
}

/* ---- /visit/ opening block --------------------------------------------
   The address paragraph belongs under its own heading, not beside it, and
   the map earns the whole right column: at 1.6fr/1fr inside half a page it
   was a postage stamp with a sidebar. Map on top, address and directions
   under it, both the full width of the column. */
@media(min-width:1040px){
  main .wrap > .prose.visit-lede{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  main .wrap > .prose.visit-lede > .vl-text{grid-column:1}
  main .wrap > .prose.visit-lede > .map-block{grid-column:2;margin:0}
  .visit-lede .vl-text > h1{margin:0 0 var(--s5)}
  .visit-lede .vl-text p{max-width:60ch}
  .visit-lede .map-block{grid-template-columns:1fr;gap:var(--s5)}
}

/* A photograph that runs the full measure of an editorial section.
   Added 18 Oct 2026 for the seminar group photograph on /lineage/. */
.fig-wide img{width:100%;max-width:none;height:auto}
@media(min-width:1040px){
  main .wrap > .prose > .fig-wide{grid-column:1 / -1}
}

/* Date stamp under a price table. Added 1 Nov 2026 — it replaces a line
   that shipped with its own editing instruction printed in front of it. */
.stamp{font-family:var(--sans);font-size:.85rem;color:var(--gray-50)}

/* Language control. No automatic redirection by IP or browser language:
   the visitor chooses, and the choice is visible rather than guessed. */
.lang{display:inline-flex;align-items:center;gap:.15rem;font-family:var(--sans);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-right:var(--s3)}
.lang a,.lang .lang-on{padding:.35rem .5rem;border-radius:4px;text-decoration:none;
  min-width:2.4rem;min-height:2.75rem;display:inline-flex;align-items:center;
  justify-content:center}
.lang .lang-on{color:var(--ink)}
.lang a{color:var(--gray-50)}
.lang a:hover,.lang a:focus-visible{color:var(--ink);background:rgba(0,0,0,.05)}
.drawer-panel .lang{margin:var(--s4) 0 0}

/* Phones: the language control gets tighter so it can stay in the header
   next to the wordmark. Height stays at 44px — the touch target is not
   what gets traded away. */
@media(max-width:430px){
  .hdr-cta{margin-left:var(--s3)}
  .hdr-cta .lang{margin-right:0;gap:0}
  .hdr-cta .lang a,.hdr-cta .lang .lang-on{padding:.35rem .35rem;min-width:2rem}
}

/* The header gained a third control, so the two buttons step aside
   earlier than they used to. Both are repeated inside the drawer, so
   nothing is lost — and the language control stays reachable at every
   width, which the buttons do not need to be. */
@media(max-width:760px){.hdr-cta .btn-ghost{display:none}}
@media(max-width:620px){.hdr-cta .btn-primary{display:none}}
@media(max-width:380px){.lockup .wordmark{display:none}}

/* A grid or flex child defaults to min-width:auto, so a wide table inside
   one pushes the whole column past the viewport instead of scrolling in
   its own .table-wrap. The Dutch roster found this: its rank column is
   longer than the English one. */
.side-row > *,.split > *{min-width:0}
.table-wrap{max-width:100%}