/* ---------- Tokens ---------- */
  :root{
    --paper:#E9E3D6;          /* warm putty paper — pushed dustier than the usual cream */
    --paper-2:#E2DBCB;        /* slightly deeper tint for rhythm */
    --ink:#1C1A16;            /* warm near-black */
    --muted:#5C5645;          /* warm taupe, secondary text */
    --accent:#27324E;         /* fountain-pen ink blue */
    --navy-bg:#191F30;        /* deep ink for dark bands */
    --on-dark:#E9E3D6;        /* paper text on dark */
    --muted-dark:#9AA3B8;     /* cool ink-grey on dark */
    --accent-dark:#AEBAD9;    /* light periwinkle highlight on dark */
    --line:rgba(28,26,22,.16);
    --line-dark:rgba(233,227,214,.18);
    /* 인생원작, the one product: its wordmark and cover keep their own ink, paper and gold */
    --brand-ink:#26251F;
    --brand-paper:#F5F2EB;
    --gold:#C98A1C;           /* the wordmark's full stop on paper */

    --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --font-brand:'Hahmlet', var(--font-display);
    --font-body:'Pretendard Variable','Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-ui:'Pretendard Variable','Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --wrap:1080px;
    --measure:60ch;
    --pad-y:clamp(4.75rem, 11vh, 9rem);
  }
  /* Each static language page loads its own CJK fonts. */
  html.lang-ko{ --font-display:'Noto Serif KR','Fraunces',serif; word-break:keep-all; }
  html.lang-ja{ --font-display:'Shippori Mincho','Fraunces',serif; --font-body:'Noto Sans JP','Pretendard Variable',sans-serif; --font-ui:'Noto Sans JP','Pretendard Variable',sans-serif; }
  html.lang-zhHans{ --font-display:'Noto Serif SC','Fraunces',serif; --font-body:'Noto Sans SC','Pretendard Variable',sans-serif; --font-ui:'Noto Sans SC','Pretendard Variable',sans-serif; }
  html.lang-zhHant{ --font-display:'Noto Serif TC','Fraunces',serif; --font-body:'Noto Sans TC','Pretendard Variable',sans-serif; --font-ui:'Noto Sans TC','Pretendard Variable',sans-serif; }

  /* CJK + Korean: widen Latin-tuned ch measures (these glyphs are ~2x wider per ch) so headings wrap at sensible points */
  html.lang-ko .hero h1, html.lang-ja .hero h1, html.lang-zhHans .hero h1, html.lang-zhHant .hero h1{ max-width:26ch; }
  html.lang-ko .proof .lead, html.lang-ja .proof .lead, html.lang-zhHans .proof .lead, html.lang-zhHant .proof .lead{ max-width:32ch; }
  html.lang-ko .why .statement, html.lang-ja .why .statement, html.lang-zhHans .why .statement, html.lang-zhHant .why .statement{ max-width:32ch; }
  html.lang-ko .close h2, html.lang-ja .close h2, html.lang-zhHans .close h2, html.lang-zhHant .close h2{ max-width:26ch; }
  /* CJK display glyphs read heavier at the same px — ease the big headings down */
  html.lang-ko .statement, html.lang-ja .statement, html.lang-zhHans .statement, html.lang-zhHant .statement{ font-size:clamp(1.45rem,1rem + 1.8vw,2.25rem); }
  /* Prose measures count full-width glyphs. ch is a Latin zero, about half a Hangul or Han glyph, so 30ch left an
     18-character column; these em widths match the English columns and hold some 25–28 characters a line. */
  html.lang-ko .why .prose, html.lang-ja .why .prose, html.lang-zhHans .why .prose, html.lang-zhHant .why .prose{ max-width:27em; }
  html.lang-ko .proof .prose, html.lang-ja .proof .prose, html.lang-zhHans .proof .prose, html.lang-zhHant .proof .prose{ max-width:29em; }
  /* Browsers that can find Japanese phrases (文節) wrap the prose between them; others keep the usual character breaks */
  html.lang-ja .prose{ word-break:auto-phrase; }
  /* Japanese and Chinese may wrap between any two characters, which split words such as 人生 and 一生 in headings.
     Display copy marks its phrase boundaries with <wbr>, and only those and punctuation end a line. */
  html:is(.lang-ja, .lang-zhHans, .lang-zhHant) :is(.hero h1, .hero-sub, .statement, .lead, .proof-bridge, .studio-tagline, .close h2, .format-name){ word-break:keep-all; }
  /* Whole phrases need a little more room: the bridge keeps to two lines, and on small phones the Chinese title's
     opening (让一个人的一生，) and the Japanese closing line's (あなたの物語には、) each still fit on one line. */
  html.lang-ja .proof-bridge, html.lang-zhHans .proof-bridge, html.lang-zhHant .proof-bridge{ max-width:16em; }
  html.lang-zhHans .hero h1, html.lang-zhHant .hero h1{ font-size:clamp(2.1rem, min(1.4rem + 5.6vw, 10.5vw), 5.5rem); }
  html.lang-ja .close h2{ font-size:clamp(1.85rem, 1.3rem + 3vw, 3.4rem); }
  /* Display copy keeps phrases whole (Korean and English bind their words with &nbsp;). On a screen too narrow for
     a whole phrase, the phrase breaks inside rather than running off the page. */
  :is(.hero h1, .hero-sub, .statement, .lead, .proof-bridge, .studio-tagline, .close h2){ overflow-wrap:anywhere; }

  /* ---------- Base ---------- */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    /* The original paper grain is baked once; it scrolls with the page without filters or blending. */
    background-image:url('/assets/paper-grain.png'); background-size:160px 160px;
    font-family:var(--font-body); font-optical-sizing:auto;
    font-size:clamp(1.04rem,.55rem + .55vw,1.16rem); line-height:1.74;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
    line-break:strict; text-wrap:pretty;
  }
  a{ color:inherit; }
  ::selection{ background:rgba(39,50,78,.16); }
  img,svg{ display:block; max-width:100%; }

  .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.75rem); position:relative; z-index:1; }
  .band{ padding-block:var(--pad-y); position:relative; scroll-margin-top:5rem; }
  .band--dark{ background:var(--navy-bg); color:var(--on-dark); }
  .band--tint{ background:var(--paper-2); }

  .eyebrow{
    font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.22em;
    text-transform:uppercase; color:var(--muted); margin:0 0 1.35rem;
    max-width:none; /* not the 60ch paragraph measure, which pinned it left of centered sections */
  }
  .band--dark .eyebrow{ color:var(--muted-dark); }

  h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-.01em; text-wrap:balance; }
  em{ font-style:italic; }
  /* CJK has no italic — emphasis becomes accent color instead */
  html.lang-ko em, html.lang-ja em, html.lang-zhHans em, html.lang-zhHant em{ font-style:normal; color:var(--accent); }
  .band--dark em, html.lang-ko .band--dark em, html.lang-ja .band--dark em,
  html.lang-zhHans .band--dark em, html.lang-zhHant .band--dark em{ color:var(--accent-dark); }

  .lead{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,1rem + 2.1vw,2.5rem); line-height:1.24; letter-spacing:-.012em; text-wrap:balance; }
  .statement{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.55rem,1.05rem + 2.1vw,2.55rem); line-height:1.22; letter-spacing:-.013em; max-width:21ch; text-wrap:balance; }
  p{ margin:0 0 1.15em; max-width:var(--measure); }
  .prose p:last-child{ margin-bottom:0; }

  /* ---------- ornament (mini life-curve, the recurring motif) ---------- */
  .ornament{ width:62px; height:14px; color:var(--accent); opacity:.6; margin:0 0 1.6rem; }
  .ornament--center{ margin-inline:auto; }
  .band--dark .ornament{ color:var(--accent-dark); }

  /* ---------- Header ---------- */
  .site-head{
    position:fixed; inset:0 0 auto 0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.05rem clamp(1.25rem,5vw,2.75rem);
    background:rgba(233,227,214,.86); /* Keep navigation readable on dark bands without JavaScript. */
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  .site-head.scrolled{ background:rgba(233,227,214,.86); backdrop-filter:saturate(140%) blur(9px); box-shadow:0 1px 0 var(--line); padding-block:.7rem; }
  .brand{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
  .brand .dot{ color:var(--accent); }
  .head-right{ display:flex; align-items:center; gap:1.1rem; }
  .langs{ display:flex; gap:.1rem; background:rgba(28,26,22,.05); border:1px solid var(--line); border-radius:999px; padding:.2rem; }
  .scrolled .langs{ background:rgba(28,26,22,.04); }
  .lang-btn{
    font-family:var(--font-ui); font-size:.74rem; font-weight:600; letter-spacing:.02em;
    display:inline-block; text-decoration:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
    padding:.32rem .55rem; border-radius:999px; line-height:1; transition:color .2s, background .2s;
  }
  .lang-btn:hover{ color:var(--ink); }
  .lang-btn[aria-current="page"]{ background:var(--accent); color:var(--paper); }
  .nav-contact{ font-family:var(--font-ui); font-size:.82rem; font-weight:600; letter-spacing:.02em; text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .2s; }
  .nav-contact:hover{ border-color:var(--ink); }
  @media (max-width:560px){ .nav-contact{ display:none; } .brand{ font-size:1.2rem; } .langs{ gap:0; } .lang-btn{ padding:.3rem .42rem; font-size:.7rem; } }
  @media (max-width:560px), (hover:none){
    /* Touch scrolling needs one stable toolbar, without re-filtering moving content behind it. */
    .site-head, .site-head.scrolled{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; padding-block:1.05rem; }
    .site-head{ transition:box-shadow .2s ease; }
  }

  /* ---------- Hero ---------- */
  .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:7.5rem 4rem; text-align:center; }
  .hero .wrap{ display:flex; flex-direction:column; align-items:center; }
  .hero h1{ font-size:clamp(2.7rem,1.4rem + 5.6vw,5.5rem); line-height:1.03; max-width:16ch; }
  .hero-sub{ margin:1.6rem auto 0; max-width:40ch; color:var(--muted); font-size:clamp(1.08rem,1rem + .4vw,1.3rem); line-height:1.55; text-wrap:balance; }
  .tlink{ font-family:var(--font-ui); font-size:.92rem; font-weight:600; letter-spacing:.01em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:.45em; }
  .tlink .arr{ transition:transform .25s ease; }
  .tlink:hover .arr{ transform:translateX(4px); }
  .tlink--accent{ color:var(--accent); }

  /* life-curve signature — one life, its highs and lows, written out to a full stop */
  .lifecurve{ width:min(92%,720px); height:auto; margin:2.9rem auto .4rem; overflow:visible; }
  .lc-path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .lc-life{ stroke:var(--ink); stroke-width:2; opacity:.9; }
  .lc-stop{ fill:var(--gold); }
  .lc-pulse{ fill:none; stroke:var(--gold); stroke-width:1.6; opacity:.35; }
  .lc-stop, .lc-pulse{ transform-box:fill-box; transform-origin:center; }
  /* On phones the curve renders at a third of its size; thicken the line and the stop so both still read. */
  @media (max-width:560px){ .lc-life{ stroke-width:4; } .lc-stop{ r:13px; } .lc-pulse{ r:26px; stroke-width:3; } }

  @media (prefers-reduced-motion: no-preference){
    /* 1 — the life draws in */
    .lc-life{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.9s cubic-bezier(.5,.05,.2,1) .3s forwards; }
    /* 2 — the full stop lands and ripples once */
    .lc-stop{ opacity:0; animation:pop .5s ease 2.1s forwards; }
    .lc-pulse{ opacity:0; animation:settle 1.1s ease-out 2.2s forwards; }
    .hero h1{ opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) .05s forwards; }
    .hero-sub{ opacity:0; transform:translateY(12px); animation:rise .9s cubic-bezier(.2,.7,.2,1) .9s forwards; }
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
  @keyframes settle{ from{ opacity:.7; transform:scale(.4); } to{ opacity:.35; transform:scale(1); } }
  @keyframes rise{ to{ opacity:1; transform:none; } }

  /* ---------- Why (vision + argument, merged) ---------- */
  .why{ text-align:center; }
  .why .statement{ max-width:24ch; margin:0 auto 1.9rem; }
  .why .prose{ max-width:46ch; margin-inline:auto; }

  /* ---------- Proof (dark) ---------- */
  .proof{ text-align:center; }
  .proof .lead{ max-width:20ch; margin-inline:auto; }
  .proof .prose{ max-width:50ch; margin:1.8rem auto 0; }
  /* the repository name stays whole instead of breaking at its hyphens */
  .proof .prose a.ilink{ color:var(--accent-dark); text-decoration:none; border-bottom:1px solid rgba(174,186,217,.45); transition:border-color .2s; white-space:nowrap; }
  .proof .prose a.ilink:hover{ border-color:var(--accent-dark); }
  .stats{ display:flex; flex-wrap:wrap; gap:0; margin:3rem 0 2.4rem; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
  .stat{ flex:1 1 180px; padding:1.5rem 1.6rem 1.55rem; }
  .stat + .stat{ border-left:1px solid var(--line-dark); }
  @media (max-width:600px){ .stat{ flex-basis:100%; } .stat + .stat{ border-left:0; border-top:1px solid var(--line-dark); } }
  .stat-num{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,1.2rem + 2vw,2.8rem); line-height:1; letter-spacing:-.02em; color:var(--on-dark); }
  .stat-lab{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.04em; color:var(--muted-dark); margin-top:.55rem; }
  .proof-link{ font-family:var(--font-ui); font-size:.9rem; font-weight:600; color:var(--accent-dark); text-decoration:none; display:inline-flex; align-items:center; gap:.5em; }
  .proof-link .arr{ transition:transform .25s ease; }
  .proof-link:hover .arr{ transform:translateX(4px); }
  .proof-bridge{ font-family:var(--font-display); font-size:clamp(1.25rem,.9rem + 1.3vw,1.7rem); line-height:1.3; max-width:24ch; margin:3.2rem auto 0; padding-top:2.4rem; border-top:1px solid var(--line-dark); text-wrap:balance; }

  /* ---------- Product (인생원작 — the one product, shown through its first work as a book) ---------- */
  .product{ text-align:center; }
  .product .wrap{ display:flex; flex-direction:column; align-items:center; }
  .product-mark{ font-family:var(--font-brand); font-weight:800; font-size:clamp(2.35rem,1.9rem + 1vw,2.875rem); line-height:1.1; letter-spacing:.02em; color:var(--brand-ink); }
  .product-stop{ color:var(--gold); }
  .product-genre{ margin:.875rem auto 0; padding-left:.32em; /* offsets the trailing letter-space so the line stays centered */ font-family:var(--font-ui); font-size:.75rem; font-weight:500; letter-spacing:.32em; line-height:1.5; color:var(--muted); }

  .book{ position:relative; display:block; width:320px; max-width:72vw; aspect-ratio:320 / 454; margin-top:3.25rem; overflow:hidden; border-radius:3px 6px 6px 3px; background:#B59E78; text-align:left; text-decoration:none; box-shadow:0 1px 2px rgba(28,26,22,.22), 0 26px 52px -18px rgba(28,26,22,.55); transition:transform .3s ease, box-shadow .3s ease; }
  @media (hover:hover) and (pointer:fine){
    .book:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(28,26,22,.22), 0 32px 60px -18px rgba(28,26,22,.6); }
  }
  /* the spine: a shaded band and a highlight line, as on a bound cover */
  .book::before, .book::after{ content:""; position:absolute; top:0; bottom:0; z-index:1; }
  .book::before{ left:0; width:8px; background:rgba(28,26,22,.18); }
  .book::after{ left:10px; width:1px; background:rgba(255,255,255,.32); }
  .book picture, .book-art{ position:absolute; inset:0; width:100%; height:100%; }
  .book-art{ max-width:none; object-fit:cover; object-position:50% 50%; }
  .book-label{ position:absolute; left:22px; right:22px; bottom:22px; z-index:2; display:flex; flex-direction:column; gap:9px; padding:16px 18px 13px; background:var(--brand-paper); }
  .book-title{ font-family:var(--font-brand); font-weight:800; font-size:1.375rem; line-height:1.25; letter-spacing:-.02em; color:var(--brand-ink); }
  .book-title span{ display:block; }
  /* The cover is a Korean object on every locale page: keep its small type in one Hangul-capable face. */
  .book-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-family:'Pretendard Variable','Pretendard',system-ui,sans-serif; font-size:.72rem; line-height:1.4; color:#6B675E; }
  .book-imprint{ font-family:var(--font-brand); font-weight:800; font-size:.72rem; letter-spacing:.02em; color:var(--brand-ink); }

  .product-formats{ display:flex; flex-direction:column; align-items:center; width:100%; }
  /* the work is finished: one line says so, and every format opens the whole work */
  .work-status{ margin:1.75rem auto 0; font-family:var(--font-ui); font-size:.8125rem; font-weight:500; letter-spacing:.04em; line-height:1.5; color:var(--muted); }
  .formats{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 3rem; margin-top:.875rem; }
  .format{ display:grid; grid-template-columns:auto auto; grid-template-areas:"name arrow"; justify-content:center; align-items:center; column-gap:.45em; min-height:48px; padding:0 4px; font-family:var(--font-ui); color:var(--accent); text-decoration:none; }
  .format-name{ grid-area:name; font-size:.94rem; font-weight:600; letter-spacing:.01em; line-height:1.5; }
  .format .arr{ grid-area:arrow; font-size:.94rem; transition:transform .25s ease; }
  .format:hover .arr{ transform:translateX(4px); }

  .studio{ display:flex; align-items:center; justify-content:space-between; gap:.75rem 1.5rem; width:100%; max-width:640px; margin-top:3.5rem; padding-top:1.375rem; border-top:1px solid var(--line); text-align:left; }
  .studio-text{ flex:1 1 auto; min-width:0; }
  .studio-text p{ margin:0; }
  .studio-label{ font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.04em; line-height:1.5; color:var(--muted); }
  .studio-text .studio-tagline{ margin-top:.25rem; font-family:var(--font-brand); font-size:1.19rem; font-weight:500; line-height:1.4; color:var(--ink); text-wrap:balance; }
  .studio-cta{ flex:none; min-height:44px; }

  @media (max-width:560px){
    .book{ width:236px; margin-top:2.25rem; }
    .book-label{ left:16px; right:16px; bottom:16px; gap:7px; padding:12px 14px 10px; }
    .book-title{ font-size:1.03rem; }
    .book-meta{ font-size:.6875rem; }
    .book-imprint{ font-size:.63rem; }
    .work-status{ margin-top:1.5rem; }
    /* formats become full-width rows: name, arrow */
    .formats{ flex-direction:column; flex-wrap:nowrap; gap:0; width:100%; margin-top:1rem; border-bottom:1px solid var(--line); }
    .format{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name arrow"; justify-content:stretch; column-gap:12px; min-height:60px; border-top:1px solid var(--line); text-align:left; }
    .format-name{ font-size:1rem; color:var(--ink); }
    .format .arr{ font-size:1rem; }
    .studio{ flex-wrap:wrap; margin-top:2.5rem; padding-top:1.125rem; }
    .studio-text .studio-tagline{ font-size:1.06rem; }
  }

  /* ---------- Close (dark) ---------- */
  .close{ text-align:center; padding-bottom:clamp(3rem,6vh,4.5rem); }
  .close .wrap{ display:flex; flex-direction:column; align-items:center; }
  .close h2{ font-size:clamp(2rem,1.3rem + 3vw,3.4rem); line-height:1.1; max-width:18ch; }
  .close-email{ margin-top:2.2rem; font-family:var(--font-ui); font-size:1rem; color:var(--muted-dark); }
  .close-email a{ color:var(--accent-dark); text-decoration:none; border-bottom:1px solid rgba(174,186,217,.4); }

  /* ---------- Footer (centered sign-off — continues the closing band) ---------- */
  .foot{ background:var(--navy-bg); color:var(--on-dark); text-align:center; padding-block:0 clamp(2.75rem,5vh,3.75rem); }
  .foot .wrap{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
  .foot-brand{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; }
  .foot-brand .dot{ color:var(--accent-dark); }
  .foot-tag{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:.95rem; color:var(--muted-dark); margin:0; } /* brand signature — stays English in every locale */
  .foot-rights{ margin-top:2rem; padding-top:1.7rem; border-top:1px solid var(--line-dark); width:min(100%,440px); font-family:var(--font-ui); font-size:.78rem; color:var(--muted-dark); letter-spacing:.02em; }

  /* Body content stays visible and stationary relative to the document during scrolling. */

  /* Korean headings keep their available width; connected prose wraps naturally between words. */
  html.lang-ko :is(.hero h1, .hero-sub, .why .statement, .proof .lead, .proof-bridge, .studio-tagline, .close h2){
    max-width:100%; text-wrap:wrap; word-break:keep-all; overflow-wrap:normal;
  }
  html.lang-ko .hero h1{ font-size:clamp(1.5rem,7.5vw,4.25rem); line-height:1.25; letter-spacing:-.025em; }
  html.lang-ko .hero-sub{ font-size:clamp(1rem,.95rem + .35vw,1.25rem); line-height:1.7; }
  html.lang-ko .why .statement{ font-size:clamp(1.2rem,5.3vw,2.25rem); line-height:1.5; }
  html.lang-ko .proof .lead{ font-size:clamp(1.2rem,5.3vw,2.5rem); line-height:1.5; }
  html.lang-ko :is(.why, .proof) .prose{ width:100%; max-width:40em; }
  html.lang-ko :is(.why, .proof) .prose p{ max-width:none; line-height:1.85; white-space:pre-line; text-wrap:pretty; }
  html.lang-ko .proof .prose a.ilink{ white-space:normal; }
  html.lang-ko .book-title span{ display:inline; }
  html.lang-ko .proof-bridge{ width:100%; max-width:none; font-size:clamp(1rem,4.3vw,1.625rem); line-height:1.7; }
  html.lang-ko .close h2{ font-size:clamp(1.2rem,5.3vw,3rem); line-height:1.5; }
  html.lang-ko br.mobile-break{ display:none; }
  @media (max-width:560px){
    html.lang-ko body{ font-size:1rem; }
    html.lang-ko br.mobile-break{ display:inline; }
    html.lang-ko .studio{ display:grid; grid-template-columns:minmax(0,1fr); gap:.8rem; }
    html.lang-ko .studio-cta{ justify-self:start; }
  }

  /* ---------- Focus ---------- */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
  .band--dark a:focus-visible, .close a:focus-visible{ outline-color:var(--accent-dark); }