/* ============================================================
   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)}
.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:var(--s6);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;
  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}
@media(max-width:960px){.nav{display:none}.burger{display:inline-flex}.hdr .btn-primary{margin-left:var(--s3)}}
@media(max-width:520px){.hdr .btn-primary{display:none}}

/* ===== 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,.93) 0%,rgba(20,20,20,.80) 46%,rgba(20,20,20,.55) 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}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
.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)}
.patch-fig{margin:0}
.patch-fig img{width:100%;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)}
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}
main hr{border:0;border-top:var(--hair);margin:var(--s7) 0}

/* ---- embeds & CTA rows ---------------------------------------------- */
.gymdesk-embed{margin:var(--s6) 0;min-height:120px}
.cta-row{margin:var(--s6) 0}
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}