/* ============================================================
   Bitgil landing page (/bitgil). Self-contained: loads nothing from the
   main site and nothing from any third party. Spec: bitgil repo,
   docs/claude-code-bitgil-page.md.
   Fonts: Cormorant Garamond for headings (24px and up only), Literata for
   prose, Inter for UI only, Gowun Batang for 빛길 only.
   ============================================================ */

/* ---------- Fonts (SIL OFL 1.1, see fonts/LICENSE-OFL.txt) ----------
   Cormorant and Inter are variable files, so one file covers each weight range. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/CormorantGaramond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/CormorantGaramond-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Literata-400.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Literata-600.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Literata-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Gowun Batang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GowunBatang-400.woff2") format("woff2");
  unicode-range: U+AE38, U+BE5B; /* 길 빛 */
}

/* Metric-matched fallbacks so the swap doesn't shift the layout */
@font-face{ font-family:"Cormorant fallback"; src:local("Georgia"); size-adjust:88.77%; ascent-override:104.09%; descent-override:32.33%; line-gap-override:0.00% }
@font-face{ font-family:"Literata fallback"; src:local("Georgia"); size-adjust:108.31%; ascent-override:108.67%; descent-override:28.44%; line-gap-override:0.00% }
@font-face{ font-family:"Inter fallback"; src:local("Arial"); size-adjust:107.48%; ascent-override:90.13%; descent-override:22.44%; line-gap-override:0.00% }

/* ---------- Tokens (CXO, verbatim; lamplight omitted in v1) ---------- */
:root{ /* middle school = base */
  --c-parchment:#F5F1E8; --c-parchment-raised:#FBF9F4; --c-rule:#D9D3C4; --c-hairline:#8A8170;
  --c-ink:#1F2937; --c-ink-soft:#4B5563; --c-navy:#111827;
  --c-blue:#0A4F8A; --c-blue-deep:#083D6B; --c-blue-tint:#E3EDF6;
  --c-gold:#C9A96E;      /* DECORATIVE ONLY (1.99:1) */
  --c-gold-ink:#6B5320;  /* gold-family TEXT (6.46:1) */
  --c-celadon-ink:#2E5E50; --c-celadon:#7FA99B;
  --c-error:#8B3A2F; --c-success:#1F6B45;
  --c-seal:#9E2B25;      /* colophon only */
  --bg:var(--c-parchment); --text:var(--c-ink); --link:var(--c-blue); --focus:var(--c-blue);
  --action-bg:var(--c-blue); --action-fg:#FFFFFF; --radius:2px; --shadow:none;
  --f-display:"Cormorant Garamond",Georgia,serif; --f-ui:"Inter",system-ui,sans-serif;
  --f-read:"Literata",Georgia,serif; --f-hangul:"Gowun Batang","Noto Serif KR",serif;
}
:root{ --tex-strength:1 }
@media (forced-colors:active), print{ :root{ --tex-strength:0 } }

/* Page-level tokens */
:root{
  --f-display:"Cormorant Garamond","Cormorant fallback",Georgia,serif;
  --f-read:"Literata","Literata fallback",Georgia,serif;
  --f-ui:"Inter","Inter fallback",system-ui,sans-serif;
  --measure:66ch;
  --gutter:16px;
  --rail:28px;          /* left margin the path-of-light line runs down */
  --wrap:1180px;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
}
@media (min-width:768px){ :root{ --gutter:32px; --rail:56px } }
@media (min-width:1100px){ :root{ --gutter:48px; --rail:72px } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
/* scroll-padding keeps the whole focus ring on screen when focus or an anchor scrolls the page */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-block:var(--s-6) }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-read);
  font-size:1.125rem;
  line-height:1.6;
  overflow-wrap:break-word;
}
/* Hanji paper texture: decorative, behind everything, off in forced colours and print */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url("assets/hanji.svg") repeat;
  opacity:calc(.55 * var(--tex-strength));
}
body, p, li, blockquote, .faq-answer{ font-family:var(--f-read) }
h1,h2,h3{ font-family:var(--f-display); font-weight:500; color:var(--c-navy); line-height:1.1; margin:0 }
[lang="ko"]{ font-family:var(--f-hangul); font-style:normal }
p{ margin:0 0 var(--s-4) }
img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:var(--link); text-underline-offset:.18em; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
main:focus{ outline:none }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:10;
  padding:var(--s-3) var(--s-4);
  background:var(--c-navy); color:#fff;
  font-family:var(--f-ui); font-size:1rem; font-weight:600;
}
.skip-link:focus{ top:var(--s-2) }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Header (not sticky, so it never hides focus) ---------- */
.site-header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-5);
  padding-block:var(--s-4);
  border-bottom:1px solid var(--c-rule);
}
.mark{ display:inline-block; color:var(--c-navy); padding:var(--s-2) 0 }
.mark svg{ width:128px; height:48px }
@media (min-width:768px){ .mark svg{ width:160px; height:60px } }
.site-nav ul{ display:flex; flex-wrap:wrap; gap:0 var(--s-2); margin:0; padding:0; list-style:none }
.site-nav a{
  display:inline-block;
  padding:var(--s-3) var(--s-2);
  font-family:var(--f-ui); font-size:1rem; font-weight:500;
  color:var(--c-ink); text-decoration:none;
}
.site-nav a:hover{ color:var(--c-blue); text-decoration:underline }

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--f-ui); font-size:.875rem; font-weight:600;
  letter-spacing:.08em; line-height:1.5;
  color:var(--c-gold-ink);
  margin:0 0 var(--s-4);
}
.eyebrow .caps{ text-transform:uppercase }
.eyebrow [lang="ko"]{ font-size:1.0625rem; letter-spacing:0 }
.section-title{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-bottom:var(--s-6) }
.microcopy{
  font-family:var(--f-ui); font-size:.9375rem;
  color:var(--c-ink-soft);
  margin:var(--s-3) 0 0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:var(--s-3) var(--s-5);
  border:2px solid var(--action-bg); border-radius:var(--radius);
  background:var(--action-bg); color:var(--action-fg);
  font-family:var(--f-ui); font-size:1.0625rem; font-weight:600; line-height:1.3;
  text-align:center; text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background:var(--c-blue-deep); border-color:var(--c-blue-deep) }
.btn[aria-disabled="true"]{
  background:var(--c-rule); border-color:var(--c-hairline); color:var(--c-ink-soft);
  cursor:not-allowed;
}

/* ---------- Path of light (decorative, static) ----------
   A hairline down the left margin, lit gold from the hero into section 2. */
.lead{ position:relative }
.lead > .wrap{ padding-left:calc(var(--gutter) + var(--rail)) }
.path{
  position:absolute;
  top:var(--s-7); bottom:0;
  left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  width:calc(var(--rail) - var(--s-3));
  pointer-events:none;
}
.path::before{
  content:""; position:absolute; top:0; bottom:0; left:5px;
  width:1px; background:var(--c-rule);
}
.path::after{
  content:""; position:absolute; top:0; left:4px;
  width:3px; height:72%;
  background:var(--c-gold);
}

/* ---------- 1. Hero ---------- */
.hero{
  display:grid;
  gap:var(--s-7);
  padding-block:var(--s-8) var(--s-8);
}
.hero h1{
  font-size:clamp(2.75rem, 1.6rem + 5.4vw, 5rem);
  line-height:1.02;
  letter-spacing:-.01em;
  max-width:12ch;
  margin-bottom:var(--s-5);
}
.hero .sub{ font-size:1.25rem; line-height:1.55; max-width:36em; margin-bottom:var(--s-6) }
.hero .sub strong{ font-weight:600; color:var(--c-navy) }
.hero .cta{ margin:0 }
.hero-art{ justify-self:start; width:100%; max-width:360px }
.hero-art img{ width:100%; border:1px solid var(--c-rule) }
@media (min-width:768px){
  .hero{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; padding-block:var(--s-9) }
  /* Off-centre: the study drops below the headline line and hangs toward the edge */
  .hero-art{ justify-self:end; max-width:440px; margin-top:var(--s-9) }
}
@media (min-width:1100px){
  .hero-art{ margin-right:calc(-1 * var(--gutter)) }
}

/* ---------- 2. How it works (bojagi: seams are the 1px gaps) ---------- */
.how{ padding-block:0 var(--s-9) }
.steps{
  counter-reset:step;
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--c-rule);
  border:1px solid var(--c-rule);
}
/* Small screens: icon above the text so the prose keeps its width */
.step{
  counter-increment:step;
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2);
  align-content:start;
  padding:var(--s-5) var(--s-4);
  background:var(--c-parchment-raised);
}
.step .icon{ width:56px; height:56px; color:var(--c-ink); margin-left:-8px }
@media (min-width:480px){
  .step{ grid-template-columns:56px minmax(0,1fr); column-gap:var(--s-4) }
  .step .icon{ grid-row:span 2; margin-left:0 }
}
.step h3{ font-size:1.5rem; font-weight:600; line-height:1.15; align-self:end }
.step h3::before{
  content:counter(step) ". " / "";
  color:var(--c-gold-ink);
}
.step p{ margin:0; max-width:var(--measure) }
/* Step 3 is the parent review gate: the one panel that runs the full width */
.step.gate{ background:var(--c-blue-tint) }
.step.gate h3{ color:var(--c-blue-deep) }
@media (min-width:768px){
  .steps{ grid-template-columns:repeat(12, minmax(0,1fr)) }
  .step{ padding:var(--s-6); grid-template-columns:64px minmax(0,1fr) }
  .step .icon{ width:64px; height:64px }
  .step:nth-child(1){ grid-column:span 7 }
  .step:nth-child(2){ grid-column:span 5 }
  .step:nth-child(3){ grid-column:span 12; padding-block:var(--s-7) }
  .step:nth-child(4){ grid-column:span 5 }
  .step:nth-child(5){ grid-column:span 7 }
  .step.gate h3{ font-size:2rem }
  .step.gate p{ font-size:1.25rem }
}

/* ---------- Sections after the lead ---------- */
.band{ padding-block:var(--s-8); border-top:1px solid var(--c-rule) }
@media (min-width:768px){ .band{ padding-block:var(--s-9) } }

/* 3. Teach me another way */
.another{ display:grid; gap:var(--s-5) }
.another .icon{ width:96px; height:96px; color:var(--c-ink) }
.another .lede{ font-size:1.25rem; line-height:1.55; max-width:34em; margin:0 }
@media (min-width:768px){
  .another{ grid-template-columns:minmax(0,3fr) minmax(0,8fr); column-gap:var(--s-7); align-items:start }
  .another .icon{ width:160px; height:160px; justify-self:end; margin-top:var(--s-3) }
  .another .section-title{ margin-bottom:var(--s-5) }
}

/* 4. For every stage */
.stages{ display:grid; gap:var(--s-7) }
.stage-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-rule) }
.stage-list li{ padding:var(--s-4) 0; border-bottom:1px solid var(--c-rule); max-width:var(--measure) }
.stage-list strong{ font-weight:600; color:var(--c-navy) }
.stages-art img{ width:100%; border:1px solid var(--c-rule) }
@media (min-width:768px){
  .stages{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:var(--s-7); align-items:end }
}
@media (min-width:1100px){
  .stages-art{ margin-right:calc(-1 * var(--gutter)) }
}

/* 5. Founder note */
.founder{ margin:0; max-width:40em }
.founder blockquote{
  margin:0;
  padding-left:var(--s-5);
  border-left:3px solid var(--c-gold);
  font-style:italic;
  font-size:1.3125rem;
  line-height:1.55;
  color:var(--c-navy);
}
.founder blockquote p{ margin:0 }
.founder figcaption{
  margin-top:var(--s-4); padding-left:calc(var(--s-5) + 3px);
  font-family:var(--f-ui); font-size:.9375rem; color:var(--c-ink-soft);
}
@media (min-width:1100px){ .founder{ margin-left:16.66% } }

/* 6. Our promises to families (shown only when SHOW_PROMISES=true) */
.promises{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--c-rule); border:1px solid var(--c-rule) }
.promises li{ background:var(--c-parchment-raised); padding:var(--s-5); max-width:none }
@media (min-width:768px){ .promises{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }

/* ---------- 7. Waitlist ---------- */
.waitlist{ display:grid; gap:var(--s-6) }
@media (min-width:768px){
  .waitlist{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:var(--s-8); align-items:start }
}
.form{
  background:var(--c-parchment-raised);
  border:1px solid var(--c-rule);
  border-radius:var(--radius);
  padding:var(--s-5) var(--s-4);
}
@media (min-width:768px){ .form{ padding:var(--s-6) } }
.notice{
  margin:0 0 var(--s-5);
  padding:var(--s-3) var(--s-4);
  border-left:4px solid var(--c-blue);
  background:var(--c-blue-tint);
  font-family:var(--f-ui); font-size:1rem; font-weight:500; color:var(--c-navy);
}
.field{ margin-bottom:var(--s-5) }
.field label, .check label{
  display:block;
  margin-bottom:var(--s-2);
  font-family:var(--f-ui); font-size:1rem; font-weight:600; color:var(--c-ink);
}
.optional{ font-weight:400; color:var(--c-ink-soft) }
.hint{ display:block; margin:0 0 var(--s-2); font-family:var(--f-ui); font-size:.9375rem; color:var(--c-ink-soft) }
input[type="text"], input[type="email"], select{
  display:block; width:100%;
  min-height:48px;
  padding:var(--s-3);
  border:1px solid var(--c-hairline); border-radius:var(--radius);
  background:#fff; color:var(--c-ink);
  font-family:var(--f-ui); font-size:1.0625rem; line-height:1.4;
}
.check{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--s-3); align-items:start; margin:var(--s-6) 0 }
.check input{ width:24px; height:24px; margin:0; accent-color:var(--c-blue) }
.check label{ margin:0; font-weight:500 }
.status{ margin:var(--s-4) 0 0; font-family:var(--f-ui); font-size:1rem; color:var(--c-navy) }
.status:empty{ display:none }
.field-error{
  margin:0 0 var(--s-2);
  font-family:var(--f-ui); font-size:.9375rem; font-weight:600;
  color:var(--c-error);
}
.check + .field-error{ margin:calc(-1 * var(--s-4)) 0 var(--s-5) }
[aria-invalid="true"]{ border-color:var(--c-error); border-width:2px }
.form-error{ margin:var(--s-4) 0 0; font-family:var(--f-ui); font-size:1rem; font-weight:600; color:var(--c-error) }
.form-error:empty{ display:none }
.form-note{ margin:var(--s-5) 0 0; font-family:var(--f-ui); font-size:.9375rem; color:var(--c-ink-soft) }
.form-note a{ display:inline-block; padding:var(--s-1, 4px) 0 }
.confirm{
  margin:0; padding:var(--s-6) var(--s-5);
  background:var(--c-parchment-raised); border:1px solid var(--c-rule); border-left:4px solid var(--c-success);
  font-size:1.3125rem; line-height:1.5; color:var(--c-navy);
}
/* Honeypot: off-screen for people, aria-hidden for screen readers */
.botcheck{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

/* ---------- 8. FAQ ---------- */
.faq{ max-width:48em; border-top:1px solid var(--c-rule) }
.faq details{ border-bottom:1px solid var(--c-rule) }
.faq summary{
  padding:var(--s-4) 0;
  cursor:pointer;
  font-family:var(--f-read); font-weight:600; font-size:1.1875rem; line-height:1.4;
  color:var(--c-navy);
}
.faq summary:hover{ color:var(--c-blue) }
.faq-answer{ padding:0 0 var(--s-5) }
.faq-answer p{ margin:0; max-width:var(--measure) }

/* ---------- 9. Footer ---------- */
.colophon{
  border-top:1px solid var(--c-rule);
  padding-block:var(--s-7);
  font-family:var(--f-ui); font-size:.9375rem; color:var(--c-ink-soft);
}
.colophon .wrap{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-2) var(--s-5); align-items:start }
.colophon .seal{ width:48px; height:48px; color:var(--c-seal); grid-row:span 4 }
.colophon p{ margin:0; font-family:var(--f-ui) }
.colophon .name{ color:var(--c-ink); font-weight:600 }
.colophon .contact{ display:flex; flex-wrap:wrap; gap:0 var(--s-4) }
.colophon a{ display:inline-block; padding:var(--s-2) 0; color:var(--c-ink-soft) }
.colophon a:hover{ color:var(--c-blue) }

/* ---------- Icons ---------- */
.icon{ flex:none }
.lit{ fill:var(--c-gold) }

/* ---------- Print ---------- */
@media print{
  .site-nav, .path, .skip-link, .form{ display:none }
  body{ background:#fff }
  .faq details > .faq-answer{ display:block }
}

/* ---------- Forced colours (spec §10, verbatim) ---------- */
@media (forced-colors:active){
  .btn,.btn.sec,.chip,.toggle{border:2px solid ButtonText;color:ButtonText;background:ButtonFace}
  .chip[aria-checked=true],.toggle[aria-pressed=true]{background:Highlight;color:HighlightText;border:2px solid Highlight;outline:2px solid CanvasText}
  .btn.quiet,a{color:LinkText}
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
  .path{forced-color-adjust:none} .path::before{background:CanvasText} .path::after{background:Highlight}
  .badge,.blk,.panel,.toast{border:1px solid CanvasText}
  .lit{fill:currentColor}
  input,select,textarea{border:2px solid CanvasText} summary{color:LinkText} .eyebrow,.microcopy{color:CanvasText} [aria-invalid=true]{outline:2px solid Mark}
  button[aria-disabled=true]{color:GrayText;border-color:GrayText}
}
/* Page-specific additions for forced colours (the page's own selectors are more
   specific than the spec block above, so they are restated here) */
@media (forced-colors:active){
  input[type="text"],input[type="email"],select{border:2px solid CanvasText}
  .btn[aria-disabled="true"]{color:GrayText;border-color:GrayText;background:ButtonFace}
  .icon,.step .icon,.another .icon,.colophon .seal{color:CanvasText} /* inline SVG colour isn't forced by the browser */
  .notice,.form,.step.gate,.confirm{border:1px solid CanvasText}
  .steps,.promises{border:1px solid CanvasText}
  .step{border:1px solid CanvasText}
}

/* ---------- Text pages (privacy notice, joined, try again) ---------- */
.doc{ padding-block:var(--s-8) var(--s-9); max-width:calc(44em + 2 * var(--gutter)); margin-inline:0 }
@media (min-width:1100px){ .doc{ margin-left:max(0px, calc((100% - var(--wrap)) / 2)) } }
.doc h1{ font-size:clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); margin-bottom:var(--s-5) }
.doc h2{ font-size:1.625rem; font-weight:600; margin:var(--s-6) 0 var(--s-3) }
.doc p{ max-width:var(--measure) }
.doc .lede{ font-size:1.25rem; line-height:1.55 }
.doc .back{ margin-top:var(--s-7); font-family:var(--f-ui) }