/* Club typography and accessibility: one source for iframe and local HTML. */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/PretendardVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-club: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --type-heading: clamp(2.375rem, 4.8vw, 5.5rem);
  --type-lead: clamp(1.25rem, 1.7vw, 1.875rem);
  --type-body: clamp(1.125rem, 1.35vw, 1.5rem);
  --type-small: clamp(.9375rem, 1.05vw, 1.125rem);
  --bone: #f1f5f2;
  --bone-dim: #c7d0ca;
  --muted: #aab7ae;
  --line-soft: rgba(223,231,224,.16);
}
html body, h1, h2, h3, .display, .jp { font-family: var(--font-club); }
html body { font-weight: 400; overflow-wrap: anywhere; }
.h-hero { font-size: clamp(2.125rem, 4.15vw, 4.25rem); }
.h-sec { font-size: var(--type-heading); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.body, .body-lg, .hero-sub, .lead, .gate-copy .lead, .tech-copy .lead {
  font-size: var(--type-lead); font-weight: 400; line-height: 1.75; color: #e1e8e3;
}
.hero-sub { font-size: clamp(1.125rem, 1.45vw, 1.5rem); }
.eyebrow, .pre-meta, .sec-head .k, .wellness-tag, .tech-index { font-size: var(--type-small); }
.hero-side .v { font-family: var(--font-club) !important; }
.wellness-result b { font-size: clamp(1.375rem, 1.8vw, 2rem); font-weight: 600; }
.wellness-result p, .wellness-note, .course-detail p, .tech-result, .tech-list span {
  font-size: var(--type-body); line-height: 1.8; color: #d6dfd9; font-weight: 400;
}
.wellness-chapter .gate-copy { background: rgba(5,11,10,.94); }
.wellness-result { background: linear-gradient(135deg,rgba(183,255,0,.11),rgba(5,11,10,.92)); }
.wellness-note { background: rgba(4,9,8,.88); }
.gate-stats div b { font-size: clamp(2.5rem, 3.4vw, 3.75rem); font-weight: 500; }
.gate-stats div span { font-size: var(--type-small); color: #d9e2dc; letter-spacing: .015em; }
body[data-layout-story="b"] .gate-stats div { background: rgba(4,9,8,.85); }
.gate-copy .arrowlink, .evidence-source a, .tech-source, .tech-start span:last-child { font-size: .9375rem; }
.course-detail h3, .tech-list b, .card-lab b { font-size: clamp(1.375rem,1.7vw,1.875rem); font-weight: 500; }
.card-meta, .card-lab span, .course-detail .num, .les .t { font-size: var(--type-small); color: #d6dfd9; }
.course-detail .num { color: var(--vermilion); }
.card-lab { background: linear-gradient(transparent,rgba(3,8,7,.94)); }
.les h3 { font-size: clamp(1.375rem,1.7vw,1.875rem); }
.les p, .foot-brand p, .foot-grid li a { font-size: var(--type-body); color: #d6dfd9; }
.kit, .foot-grid { background: rgba(4,9,8,.88); }
.kit b { font-size: clamp(1.125rem,1.35vw,1.5rem); font-weight: 500; }
.kit small, #join .kit-intro p { font-size: var(--type-small); color: #d6dfd9; }
.foot-base, .foot-grid h4 { font-size: .9375rem; }
#grain { opacity: .018; }
/* Visible lines stay light; the hit area is larger and fits short screens. */
.rail { gap: 0; right: 8px; max-height: 90svh; }
.rail button { width: 44px; height: clamp(24px,4.3svh,34px); flex-shrink: 0; }
.rail button::before { right: 44px; font-size: .875rem; letter-spacing: .04em; }
.rail button.on i { background: var(--vermilion); }
.nav.hide { visibility: hidden; pointer-events: none; }
.nav-link, .nav-link span { font-size: .875rem; height: 22px; line-height: 22px; letter-spacing: .08em; }
.nav-links { gap: clamp(16px,2vw,32px); }
.nav-burger { min-width: 44px; min-height: 44px; }
.brand-logo { width: clamp(230px,22vw,310px); height: auto; }
.pre-mark { width: min(500px,78vw); }
body[data-layout-footer="b"] .foot-brand .foot-logo { max-width: 480px; }
.nav-burger i:nth-child(1) { top: 16px; }
.nav-burger i:nth-child(2) { top: 24px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 5px; }
.sec, #hero { scroll-margin-top: 32px; }
.sec:focus, #hero:focus { outline: none; }
.render-notice {
  position: fixed; bottom: 20px; left: 20px; z-index: 80; max-width: min(440px,calc(100vw - 40px));
  padding: 16px 20px; background: #101b14; color: #f1f5f2; border: 1px solid #b7ff00;
  font: 400 16px/1.6 var(--font-club);
}
.render-notice[hidden] { display: none; }
.render-controls { position:relative; margin-top:24px; }
.render-controls button { padding:12px 16px; border:1px solid var(--line-soft); font-size:16px; color:var(--bone-dim); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
.reduce-motion #cursor { display:none; }
.render-notice button { text-decoration: underline; margin-left: 12px; }
.no-webgl #gl { visibility: hidden; }
@media (max-width:1080px) {
  .wellness-chapter .gate-grid > h2 { position: static; }
  .tech-grid { gap: 32px; }
}
@media (max-width:820px) {
  .brand-logo { width: min(210px,60vw); }
  .nav-link, .nav-link span { height: auto; line-height: 1.4; }
  .nav-link { font-size: clamp(1.5rem,6vw,2rem); }
  .nav-link span { font-size: inherit; }
  .nav-link .alt { font-size: .875rem; }
  .wellness-chapter .gate-copy { padding: 22px; }
  .wellness-result { padding: 22px; }
  .tech-list { padding: 0; }
  .tech-list li { padding: 16px; }
  .hero-top { max-width: 100% !important; }
  .foot-grid { padding: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #cursor { display: none; }
}