/* =====================================================================
   三神生殖中心 ｜ cinematic v2 ｜ light / orange / serif-editorial
   Accessibility pass 2026-05-13: all body text +1px, all micro-labels
   bumped to 12px minimum (was as low as 9px), letter-spacing trimmed
   to compensate where bumps would otherwise look loose.
   Accessibility pass 2 — 2026-05-17 (v=20): another +2px across all
   uppercase mono labels (12→14, 13→15, 11→13 mobile) plus body
   18→19 desktop / 17→18 mobile. Letter-spacing trimmed another notch
   on the bumped labels so they don't look stretched at the larger size.
   Accessibility pass 3 — 2026-05-17 (v=21): user said pass 2 still
   too small. Pushed uppercase mono labels into the 16-18px range
   on desktop and 15-17px on mobile (near body size). Letter-spacing
   cut further (.2em→.14em typical) since at this size heavy tracking
   reads as decorative rather than readable.
   ===================================================================== */

:root{
  --cream:#fff8f0;
  --ivory:#ffffff;
  --ember:#ff7a3d;
  --persimmon:#c9461a;
  --peach:#ffd4b3;
  --blossom:#ffb9a3;
  --ink:#2b1b10;
  --smoke:#6b5142;
  --line:rgba(43,27,16,0.10);
  --line-strong:rgba(43,27,16,0.22);
  --serif:"Noto Serif TC","Source Han Serif TC",serif;
  --latin:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-weight:400;-webkit-font-smoothing:antialiased}
body{cursor:none;overflow-x:hidden;font-size:19px;line-height:1.7}
@media (hover:none){ body{cursor:auto} }
a{color:inherit;text-decoration:none}
em{font-family:var(--latin);font-style:italic;font-weight:300;letter-spacing:.01em}

/* paper grain — pure CSS, no images */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:.18;
  background-image:radial-gradient(rgba(201,70,26,.12) 1px,transparent 1px),radial-gradient(rgba(43,27,16,.05) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;background-position:0 0,1px 1px;
}

/* =========== LOADER =========== */
.loader{position:fixed;inset:0;background:var(--cream);z-index:200;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Returners (sessionStorage flag set on first visit) skip the loader entirely. */
html[data-returning] .loader{display:none !important}
.loader-stage{position:absolute;inset:0;width:100%;height:100%}
.ldot{transform-box:fill-box;transform-origin:center}
.lmerged{transform-origin:400px 300px;transform:scale(0);opacity:0}
.loader-brand{position:relative;z-index:2;text-align:center;color:var(--ivory);mix-blend-mode:normal;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lb-logo{width:380px;height:380px;max-width:64vmin;max-height:64vmin;display:block;opacity:0;transform:scale(.92);filter:drop-shadow(0 8px 30px rgba(255,122,61,0));overflow:visible}
.lb-logo path{fill:none;stroke:#ff7a3d;stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.loader.done{pointer-events:none}

/* =========== CURSOR =========== */
.cursor-halo{position:fixed;left:0;top:0;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,61,.55) 0%,rgba(255,122,61,.18) 38%,transparent 72%);filter:blur(10px);pointer-events:none;transform:translate(-50%,-50%);z-index:9998;mix-blend-mode:multiply;will-change:transform}
.cursor-fix{position:fixed;left:0;top:0;width:14px;height:14px;pointer-events:none;transform:translate(-50%,-50%) scale(0);z-index:9999;opacity:0;will-change:transform}
.cursor-fix::before,.cursor-fix::after{content:"";position:absolute;background:var(--persimmon)}
.cursor-fix::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.cursor-fix::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.cursor-active .cursor-fix{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-active .cursor-halo{width:120px;height:120px}

/* =========== HEADER / CHROME =========== */
.chrome{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;background:linear-gradient(to bottom,var(--cream) 60%,transparent);backdrop-filter:blur(2px);border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:18px}
.brand-logo{width:84px;height:84px;object-fit:contain;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.brand:hover .brand-logo{transform:rotate(-6deg) scale(1.04)}
.brand-glyph{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ember);color:var(--ivory);font-weight:900;font-size:20px;letter-spacing:0}
.brand-stack{display:flex;flex-direction:column;line-height:1}
.brand-zh{font-weight:700;letter-spacing:.12em;font-size:18px}
.brand-lat{font-family:var(--latin);font-style:italic;font-weight:300;font-size:15px;color:var(--smoke);margin-top:4px;letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;gap:28px}
.nav a{font-size:16px;letter-spacing:.14em;color:var(--ink);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.nav a:hover::after{transform:scaleX(1)}
.cta-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid var(--persimmon);border-radius:999px;color:var(--persimmon);font-size:16px;letter-spacing:.1em;background:transparent;transition:background .4s,color .4s}
.cta-pill:hover{background:var(--ember);color:var(--ivory);border-color:var(--ember)}

/* =========== HERO ｜ 序章 =========== */
.hero{position:relative;min-height:100vh;padding:120px 60px 60px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.cosmos{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cosmos .orbit{stroke:var(--ember);stroke-width:.5;stroke-dasharray:1 6;opacity:.35}
.cosmos .sun{transform-origin:600px 450px}
.cosmos .sun-a{transform:translate(420px,330px)}
.cosmos .sun-b{transform:translate(780px,330px)}
.cosmos .sun-c{transform:translate(600px,620px)}
.cosmos .spark{transform:translate(600px,450px)}

.hero-eyebrow{position:relative;z-index:2;font-family:var(--mono);font-size:17px;letter-spacing:.2em;color:var(--persimmon);text-transform:uppercase;margin-bottom:34px}
.hero-title{position:relative;z-index:2;font-weight:900;font-size:clamp(48px,9vw,144px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);max-width:14ch}
.hl-line{display:block;overflow:hidden}
.hl-line .ch{display:inline-block;transform:translateY(110%);will-change:transform;backface-visibility:hidden}
.hero-sub{position:relative;z-index:2;margin-top:32px;font-size:18px;color:var(--smoke);max-width:46ch}
.hero-sub em{color:var(--persimmon)}

.hero-rail{position:absolute;top:50%;right:42px;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:flex;align-items:center;gap:24px;z-index:2;font-family:var(--mono);font-size:16px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase}
.rail-zh{font-family:var(--serif);font-weight:500;letter-spacing:.5em;color:var(--ink);text-transform:none}
.rail-divider{width:1px;height:60px;background:var(--line-strong)}

.hero-scrollcue{position:absolute;left:60px;bottom:34px;display:flex;align-items:center;gap:14px;z-index:2;font-family:var(--mono);font-size:16px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase}
.hero-scrollcue svg{stroke:var(--persimmon)}

/* =========== PHILOSOPHY ｜ 致旅人 =========== */
.philosophy{position:relative;padding:200px 60px 200px;text-align:center;background:linear-gradient(to bottom,var(--cream),var(--ivory) 60%,var(--cream))}
.chap-mark{display:inline-block;font-family:var(--mono);font-size:17px;letter-spacing:.18em;color:var(--persimmon);text-transform:uppercase;margin-bottom:48px}
.poem{display:flex;flex-direction:column;gap:34px;align-items:center;max-width:24ch;margin:0 auto}
.poem-line{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.6;color:var(--ink);filter:blur(8px);opacity:.25}
.poem-line.is-clear{filter:blur(0);opacity:1}
.poem-emphasis em{font-family:var(--latin);font-style:italic;font-weight:300;color:var(--ember);font-size:1.1em}
.poem-attr{margin-top:64px;font-family:var(--mono);font-size:17px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase}

/* =========== CYCLE ｜ 週期之圓 =========== */
.cycle-wrap{position:relative;min-height:100vh;background:var(--cream)}
/* loader scroll-lock — toggled by inline head script + removed by app.js after loader finishes */
html.is-loading,html.is-loading body{overflow:hidden!important;height:100%!important;touch-action:none}
.cycle-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding:120px 60px 60px;overflow:hidden}
.cycle-head{max-width:600px;margin-bottom:40px}
.cycle-head h2{font-weight:900;font-size:clamp(40px,5vw,72px);line-height:1.15;color:var(--ink);margin:18px 0 16px}
.cycle-head p{color:var(--smoke);font-size:16px;max-width:42ch}
.cycle-track{position:relative;flex:1;width:200vw;display:flex;align-items:center;will-change:transform}
.cycle-arc{position:absolute;left:0;top:50%;transform:translateY(-50%);width:200vw;height:360px;pointer-events:none;opacity:.7}
.cycle-arc path{stroke-dasharray:6000;stroke-dashoffset:6000}
.cycle-stops{list-style:none;display:flex;align-items:center;gap:0;padding-left:8vw;width:100%}
.cycle-stops li{flex:0 0 28vw;padding:0 4vw;position:relative}
.cycle-stops li::before{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:var(--ember);transform:translate(-50%,0)}
.cs-num{display:block;font-family:var(--serif);font-weight:300;font-size:90px;line-height:1;color:var(--peach);margin-top:30px;letter-spacing:0}
.cycle-stops h3{font-weight:700;font-size:30px;color:var(--ink);margin:14px 0 10px;letter-spacing:.12em}
.cycle-stops p{font-size:16px;color:var(--smoke);max-width:22ch}
.cs-meta{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:var(--persimmon);text-transform:uppercase;padding:5px 10px;border:1px solid var(--line-strong);border-radius:2px}

/* =========== DOCTOR ｜ 張醫師 =========== */
.doctor{position:relative;padding:160px 60px 180px;display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);gap:40px;background:var(--ivory);border-top:1px solid var(--line)}
.doc-glyph{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:30px}
.doc-glyph span{font-family:var(--serif);font-weight:900;font-size:clamp(220px,28vw,460px);line-height:.85;color:var(--ember);letter-spacing:0;background:linear-gradient(180deg,var(--ember) 0%,var(--persimmon) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* doctor portrait variant — same footprint as the giant 張 glyph */
.doc-glyph--photo{padding-top:0;align-items:center}
.doc-glyph--photo img{display:block;width:clamp(220px,28vw,460px);height:auto;-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 38%,#000 58%,transparent 92%);mask-image:radial-gradient(ellipse 62% 70% at 50% 38%,#000 58%,transparent 92%);filter:drop-shadow(0 22px 56px rgba(255,122,61,.22))}
.doc-body{padding-right:6vw}
.doc-body .chap-mark{margin-bottom:30px}
.doc-name{font-weight:900;font-size:clamp(48px,5.6vw,86px);line-height:1.05;color:var(--ink);margin-bottom:12px}
.doc-name-en{display:block;font-family:var(--latin);font-style:italic;font-weight:300;font-size:.32em;color:var(--smoke);margin-top:14px;letter-spacing:.16em;text-transform:uppercase}
.doc-quote{font-family:var(--latin);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.6;color:var(--persimmon);margin:34px 0 30px;border-left:2px solid var(--ember);padding-left:24px;max-width:38ch}
.doc-coming{font-family:var(--mono);font-size:17px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;border-top:1px solid var(--line-strong);padding-top:24px;margin-top:30px;max-width:38ch}
.doc-quote em{font-family:var(--serif);font-style:normal;font-weight:500;color:var(--ink);font-size:1em;letter-spacing:.02em}
.doc-cv{list-style:none;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-strong);padding-top:30px;margin-bottom:60px}
.doc-cv > li{display:grid;grid-template-columns:90px 1fr;gap:24px;align-items:baseline;font-size:16px;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line)}
.doc-cv > li > span{font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase}
.doc-cv-sub{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.doc-cv-sub li{display:block;position:relative;padding:0 0 0 18px;border:none;font-size:16px;line-height:1.55;color:var(--ink);letter-spacing:.01em}
.doc-cv-sub li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ember)}
.doc-numbers{display:flex;align-items:flex-end;gap:8%;flex-wrap:wrap;border-top:1px solid var(--line-strong);padding-top:40px}
.dn{display:flex;flex-direction:column;gap:8px}
.dn-fig{font-family:var(--latin);font-weight:900;font-size:clamp(70px,7.5vw,140px);line-height:.9;color:var(--ember);letter-spacing:-.02em;font-feature-settings:"tnum"}
.dn-unit{font-family:var(--serif);font-weight:500;font-size:.4em;color:var(--persimmon);margin-left:6px;display:inline-block}
.dn-fig + .dn-unit{display:inline}
.dn-label{font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;line-height:1.5}

/* =========== CARE / SERVICES =========== */
.care{position:relative;padding:160px 60px;background:var(--cream);border-top:1px solid var(--line)}
.care-head{max-width:800px;margin-bottom:80px}
.care-head h2{font-weight:900;font-size:clamp(40px,5vw,72px);line-height:1.15;color:var(--ink);margin-top:18px}
.care-list{list-style:none;border-top:1px solid var(--line-strong)}
.care-item{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s cubic-bezier(.6,0,.2,1)}
.care-item:hover{padding-left:30px;padding-top:46px;padding-bottom:46px}
.care-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ember);transition:width .5s cubic-bezier(.6,0,.2,1)}
.care-item:hover::before{width:6px}
.ci-num{font-family:var(--latin);font-style:italic;font-weight:300;font-size:32px;color:var(--ember);letter-spacing:.04em}
.ci-main h3{font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.25;color:var(--ink);letter-spacing:.04em}
.ci-en{display:block;font-family:var(--latin);font-style:italic;font-weight:300;font-size:15px;color:var(--smoke);margin-top:8px;letter-spacing:.12em}
.ci-detail{font-size:16px;line-height:1.75;color:var(--smoke);max-width:42ch;opacity:.55;transform:translateY(4px);transition:opacity .5s,transform .5s,color .5s}
.care-item:hover .ci-detail{opacity:1;transform:translateY(0);color:var(--ink)}

/* =========== CONVERGENCE ｜ 三神之合 =========== */
.converge-wrap{position:relative;height:300vh;background:var(--cream)}
.converge-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#fff3e0 0%,var(--cream) 60%,#fff0e2 100%)}
.converge-stage{position:absolute;inset:0;width:100%;height:100%}
.cg-orbit{transform-origin:600px 400px}
.converge-text{position:relative;z-index:2;text-align:center;max-width:30ch;padding:0 30px}
.converge-text .chap-mark{margin-bottom:30px}
.cv-line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;font-size:clamp(38px,5.4vw,80px);line-height:1.15;color:var(--ink);width:max-content;opacity:0;letter-spacing:.04em}
.cv-line br{display:block}
.cv-1{color:var(--persimmon)}
.cv-3{color:var(--ember);font-size:clamp(44px,6.4vw,96px)}

/* =========== Q&A PAGE · 醫師解答 =========== */
/* page hero (qa.html only) */
.qa-hero{position:relative;padding:200px 60px 120px;background:radial-gradient(1100px 720px at 50% 38%,rgba(255,213,178,.55),transparent 70%),var(--cream);text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.qa-hero .chap-mark{display:inline-block;margin-bottom:36px}
.qa-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(56px,8vw,128px);line-height:1.05;color:var(--ink);margin:0 auto 36px;letter-spacing:.01em;max-width:18ch}
.qa-hero h1 .hl-em{color:var(--ember);font-style:normal;letter-spacing:.04em}
.qa-hero h1 .ch{display:inline-block;transform:translateY(110%);will-change:transform;backface-visibility:hidden}
.qa-hero h1 .hl-line{display:block;overflow:hidden}
.qa-hero-sub{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.8vw,26px);line-height:1.85;color:var(--smoke);max-width:38ch;margin:0 auto 60px;opacity:0}
.qa-hero-cue{display:inline-block;font-family:var(--mono);font-size:17px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase;opacity:0}
.qa-hero-cue::before{content:"↓";display:block;margin:0 auto 12px;font-size:18px;color:var(--ember);animation:qaCue 2.4s ease-in-out infinite}
@keyframes qaCue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
.qa-hero .qh-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;pointer-events:none}
.qa-hero .qh-orb-a{width:340px;height:340px;background:radial-gradient(circle,var(--ember),transparent 70%);top:-80px;left:8%}
.qa-hero .qh-orb-b{width:300px;height:300px;background:radial-gradient(circle,var(--blossom),transparent 70%);bottom:-60px;right:10%;opacity:.45}

/* list */
.qa{position:relative;padding:140px 60px 160px;background:var(--cream)}
.qa-list{list-style:none;max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.qa-item{position:relative;padding:80px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(40px);will-change:opacity,transform}
.qa-item.is-in{opacity:1;transform:translateY(0);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.qa-item:last-child{border-bottom:1px solid var(--line)}
.qa-num{font-family:var(--mono);font-size:18px;letter-spacing:.14em;color:var(--ember);text-transform:uppercase;display:block;margin-bottom:28px}
.qa-item h3{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1.35;color:var(--ink);margin:0 0 44px;letter-spacing:.01em;max-width:24ch}
.qa-ans{padding-left:48px;border-left:2px solid var(--ember);max-width:56ch;position:relative}
.qa-ans::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;background:var(--persimmon);transition:height 1.2s cubic-bezier(.22,1,.36,1) .2s}
.qa-item.is-in .qa-ans::before{height:100%}
.qa-ans .qa-lede{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.7;color:var(--persimmon);margin:0 0 36px}
.qa-ans ul{list-style:none;display:flex;flex-direction:column;gap:24px}
.qa-ans ul li{display:grid;grid-template-columns:110px 1fr;gap:28px;align-items:baseline;font-size:19px;line-height:1.85;color:var(--ink);padding-bottom:22px;border-bottom:1px dashed var(--line)}
.qa-ans ul li:last-child{border-bottom:none;padding-bottom:0}
.qa-ans ul li span{font-family:var(--mono);font-size:17px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;line-height:1.6}
.qa-ans ul li em{font-style:normal;font-family:var(--mono);font-size:16px;letter-spacing:.12em;color:var(--ember);margin-left:8px;text-transform:uppercase}

/* tail CTA at bottom of QA list */
.qa-tail{max-width:980px;margin:120px auto 0;padding-top:90px;border-top:1px solid var(--line);text-align:center;opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.qa-tail.is-in{opacity:1;transform:translateY(0)}
.qa-tail p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.55;color:var(--smoke);margin-bottom:28px}
.qa-tail-cta{display:inline-flex;align-items:center;gap:14px;padding:18px 36px;border:1px solid var(--persimmon);border-radius:999px;color:var(--persimmon);font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.4vw,19px);letter-spacing:.14em;background:transparent;transition:background .4s,color .4s}
.qa-tail-cta:hover{background:var(--ember);color:var(--ivory);border-color:var(--ember)}

/* current-page indicator on the nav (qa.html only) */
.nav a.nav-qa.is-current{color:var(--ember)}
.nav a.nav-qa.is-current::after{transform:scaleX(1)}

/* =========== BOOKING =========== */
.booking{position:relative;padding:160px 60px 140px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;background:var(--ivory);border-top:1px solid var(--line)}
.bk-left h2{font-weight:900;font-size:clamp(40px,5.4vw,80px);line-height:1.15;color:var(--ink);margin:18px 0 50px}
.bk-map{display:block;width:100%;max-width:420px;height:260px;margin:24px 0 50px;border:1px solid var(--line-strong);background:var(--cream);border-radius:2px;filter:saturate(0.85) contrast(0.96);transition:filter .35s ease}
.bk-map:hover{filter:saturate(1) contrast(1)}
.bk-meta{display:flex;flex-direction:column;gap:18px}
.bk-meta div{display:grid;grid-template-columns:80px 1fr;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bk-meta dt{font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase}
.bk-meta dd{font-size:18px;color:var(--ink)}

.bk-card{background:var(--cream);border:1px solid var(--line-strong);padding:42px 38px;border-radius:2px;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.6,0,.2,1),box-shadow .5s}
.bk-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ember),var(--persimmon),var(--blossom))}
.bk-card:hover{box-shadow:0 30px 60px -30px rgba(201,70,26,.4)}
.bk-card-eyebrow{display:inline-block;font-family:var(--mono);font-size:16px;letter-spacing:.16em;color:var(--persimmon);text-transform:uppercase;margin-bottom:16px}
.bk-card h3{font-weight:900;font-size:42px;color:var(--ink);margin-bottom:14px}
.bk-card header p{font-size:15px;color:var(--smoke);line-height:1.7}
.bk-slots{margin:38px 0 30px;border-top:1px solid var(--line-strong);padding-top:24px}
.slot-label{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase;margin-bottom:18px}
.bk-slots ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.bk-slots li{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;transition:background .3s}
.bk-slots li:hover:not(.full){background:rgba(255,212,179,.4);padding-left:8px}
.bk-slots .sd{color:var(--ink);font-weight:500}
.bk-slots .st{font-family:var(--mono);color:var(--persimmon);letter-spacing:.1em}
.bk-slots .sf{font-family:var(--mono);font-size:16px;color:var(--smoke);letter-spacing:.1em;text-transform:uppercase}
.bk-slots .full .sd,.bk-slots .full .st,.bk-slots .full .sf{color:var(--smoke);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.bk-go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px;background:var(--ember);color:var(--ivory);border-radius:2px;font-size:16px;letter-spacing:.3em;transition:background .4s}
.bk-go:hover{background:var(--persimmon)}
.bk-card-foot{display:block;text-align:center;margin-top:18px;font-family:var(--mono);font-size:17px;letter-spacing:.1em;color:var(--smoke)}
.bk-card-foot a{color:var(--persimmon);border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:color .3s,border-color .3s}
.bk-card-foot a:hover{color:var(--ember);border-color:var(--ember)}

/* =========== CLICKER · 生育率 +1 =========== */
.clicker{position:relative;padding:140px 60px 160px;background:radial-gradient(900px 600px at 50% 60%,rgba(255,213,178,.45),transparent 70%),var(--ivory);border-top:1px solid var(--line);text-align:center;overflow:hidden}
.clicker .chap-mark{display:inline-block;margin-bottom:30px}
.ck-h{font-family:var(--serif);font-weight:900;font-size:clamp(36px,4.6vw,68px);line-height:1.18;color:var(--ink);margin:0 auto 20px;max-width:22ch;letter-spacing:.01em}
.ck-sub{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(17px,1.4vw,20px);color:var(--smoke);margin:0 auto 60px;max-width:32ch}

.ck-stage{position:relative;display:inline-block;margin:0 auto 50px;width:220px;height:220px}
.ck-btn{position:relative;width:100%;height:100%;border:none;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s cubic-bezier(.34,1.6,.64,1)}
.ck-btn:active{transform:scale(.94)}
.ck-btn img{position:relative;z-index:2;width:62%;height:auto;object-fit:contain;pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 8px 24px rgba(255,122,61,.25))}
.ck-btn:hover img{transform:scale(1.04) rotate(-3deg)}
.ck-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,122,61,.45),rgba(255,122,61,.12) 50%,transparent 72%);transition:transform .4s,opacity .4s;z-index:1}
.ck-btn:hover .ck-glow{transform:scale(1.12);opacity:1}
.ck-btn.is-pulsing .ck-glow{animation:ckGlowPulse .55s ease-out}
@keyframes ckGlowPulse{0%{transform:scale(1);opacity:1}60%{transform:scale(1.45);opacity:.6}100%{transform:scale(1.55);opacity:0}}
.ck-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--ember);opacity:.5;pointer-events:none;z-index:0}
.ck-btn:hover .ck-ring{animation:ckRingSpin 12s linear infinite}
@keyframes ckRingSpin{to{transform:rotate(360deg)}}

.ck-floaters{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.ck-floater{position:absolute;left:50%;top:28%;transform:translateX(-50%);font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.4vw,30px);color:var(--ember);white-space:nowrap;letter-spacing:.04em;text-shadow:0 4px 18px rgba(255,122,61,.35);will-change:transform,opacity;pointer-events:none;opacity:0}
.ck-floater em{font-family:var(--latin);font-style:italic;font-weight:500;font-size:.78em;color:var(--persimmon);margin-left:8px;letter-spacing:.08em}

.ck-counter{display:inline-flex;align-items:baseline;gap:14px;margin:0 auto 36px;padding:24px 44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ck-counter-num{font-family:var(--latin);font-weight:900;font-size:clamp(60px,7vw,108px);color:var(--ember);line-height:.95;letter-spacing:-.02em;font-feature-settings:"tnum";display:inline-block;will-change:transform}
.ck-counter-num.is-bump{animation:ckBump .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes ckBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.ck-counter-label{font-family:var(--mono);font-size:17px;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase}
.ck-foot{font-family:var(--mono);font-size:17px;letter-spacing:.12em;color:var(--smoke);text-transform:uppercase;line-height:1.9;margin:0 auto;max-width:42ch}

@media (prefers-reduced-motion:reduce){
  .ck-floater{transition:none}
  .ck-counter-num.is-bump,.ck-btn.is-pulsing .ck-glow,.ck-btn:hover .ck-ring{animation:none}
}

/* =========== FOOTER =========== */
.foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px;padding:80px 60px 50px;border-top:1px solid var(--line-strong);background:var(--cream)}
.foot-left{display:flex;flex-direction:column;gap:18px}
.foot-logo{width:88px;height:88px;object-fit:contain;display:block;margin-bottom:4px}
.foot-mark{font-family:var(--serif);font-weight:900;font-size:46px;color:var(--ember);letter-spacing:.16em;line-height:1}
.foot-tag{font-family:var(--latin);font-style:italic;font-weight:300;color:var(--smoke);font-size:16px;max-width:32ch}
.foot-live{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:17px}
.live-row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding-bottom:10px;border-bottom:1px dashed var(--line-strong);letter-spacing:.18em}
.lk{color:var(--smoke);text-transform:uppercase;font-size:16px;letter-spacing:.16em}
.lv{color:var(--ink);font-size:18px;font-feature-settings:"tnum"}
.lv.pulse{color:var(--ember);position:relative}
.lv.pulse::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember);margin-right:8px;vertical-align:middle;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.foot-meta{font-size:17px;color:var(--smoke);line-height:1.7}
.foot-meta .copy{margin-top:18px;font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase}

/* =========== REVEAL SYSTEM ===========
   Lightweight pop-in driven by IntersectionObserver. The JS toggles
   .is-revealed on any [data-reveal] element when it scrolls into view.
   Pure CSS transitions — no gsap.from() patterns that can leave mobile
   Safari elements stuck at opacity:0 on URL-bar resize / scroll-restore.
   Variants: default (up), left, right, scale. Stagger via data-reveal-delay
   (the JS reads the attribute and sets transition-delay inline). */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
[data-reveal="left"]{transform:translate(-32px,0)}
[data-reveal="right"]{transform:translate(32px,0)}
[data-reveal="scale"]{transform:scale(.92);transform-origin:center}
[data-reveal="fade"]{transform:none}
[data-reveal].is-revealed{opacity:1;transform:translate(0,0) scale(1)}

/* =========== RESPONSIVE — TABLET =========== */
@media (max-width:1100px){
  .chrome{padding:18px 28px}
  .nav{gap:20px}
  .hero{padding:120px 36px 60px}
  .philosophy,.care,.booking,.qa{padding-left:36px;padding-right:36px}
  .cycle-pin{padding:110px 36px 50px}
  .doctor{grid-template-columns:minmax(0,32%) minmax(0,68%);padding:120px 36px 140px;gap:30px}
  .doc-glyph span{font-size:clamp(180px,24vw,320px)}
  .booking{gap:60px}
  .foot{padding:70px 36px 50px;gap:40px}
}

/* =========== RESPONSIVE — MOBILE =========== */
@media (max-width:760px){
  body{cursor:auto;font-size:18px}
  .cursor-halo,.cursor-fix{display:none}
  /* iOS GPU relief: drop heavy paint layers on phones */
  body::before{display:none}
  .cosmos circle[filter],.cosmos .sun circle{filter:none}
  .cosmos .orbit{display:none}
  /* keep loader dots crisp + larger so they're impossible to miss on phone */
  .ldot{filter:none !important}
  .ldot-a,.ldot-b,.ldot-c{r:60}
  .lmerged{r:70}

  /* sticky chrome — slim, with mini CTA */
  .chrome{padding:14px 18px;gap:10px}
  .brand-glyph{width:34px;height:34px;font-size:17px}
  .brand-logo{width:62px;height:62px}
  .brand-zh{font-size:16px;letter-spacing:.08em}
  .brand-lat{display:none}
  .lb-logo{width:160px;height:160px;margin-bottom:20px}
  .foot-logo{width:72px;height:72px}
  .nav{display:flex;gap:0;flex:0 0 auto}
  .nav a{display:none}
  .nav a.nav-qa{display:inline-block;font-size:15px;letter-spacing:.1em;color:var(--persimmon);padding:8px 12px;border:1px solid var(--persimmon);border-radius:999px;margin-right:6px}
  .nav a.nav-qa::after{display:none}
  .nav a.nav-qa.is-current{background:var(--ember);color:var(--ivory);border-color:var(--ember)}
  .cta-pill{padding:9px 14px;font-size:15px;letter-spacing:.08em;gap:6px}
  .cta-pill svg{width:11px;height:11px}

  /* hero — title leads, art shrinks */
  .hero{padding:96px 22px 60px;min-height:92vh}
  .cosmos{opacity:.85;transform:scale(1.4) translateY(-6%)}
  .hero-eyebrow{font-size:16px;letter-spacing:.14em;margin-bottom:22px}
  .hero-title{font-size:clamp(38px,11vw,60px);line-height:1.12;max-width:100%}
  .hero-sub{font-size:17px;margin-top:22px;line-height:1.7}
  .hero-rail{display:none}
  .hero-scrollcue{left:22px;bottom:18px;font-size:15px;letter-spacing:.12em}
  .hero-scrollcue svg{width:10px;height:28px}

  /* poem — tighter rhythm */
  .philosophy{padding:110px 22px}
  .chap-mark{font-size:16px;letter-spacing:.12em;margin-bottom:32px}
  .poem{gap:24px;max-width:none}
  .poem-line{font-size:clamp(22px,6.6vw,30px);line-height:1.6;filter:blur(5px)}
  .poem-attr{margin-top:46px;font-size:16px;letter-spacing:.12em}

  /* cycle — convert horizontal pin to vertical stack on mobile.
     The JS detects this breakpoint and skips the horizontal pin. */
  .cycle-wrap{height:auto !important}
  .cycle-pin{position:relative !important;height:auto !important;padding:90px 22px 60px;display:block}
  .cycle-head{margin-bottom:36px}
  .cycle-head h2{font-size:32px;line-height:1.2}
  .cycle-head p{font-size:15px}
  .cycle-track{position:relative;width:100%;flex-direction:column;align-items:flex-start;gap:6px;transform:none !important}
  .cycle-arc{display:none}
  .cycle-stops{flex-direction:column;padding-left:0;width:100%;border-left:1px dashed var(--line-strong);padding-left:22px;margin-left:8px}
  .cycle-stops li{flex:0 0 auto;padding:18px 0 28px;width:100%}
  .cycle-stops li::before{left:-26px;top:38px;width:11px;height:11px}
  .cs-num{font-size:54px;margin-top:0}
  .cycle-stops h3{font-size:24px;margin:8px 0 6px}
  .cycle-stops p{font-size:15px;max-width:none}
  .cs-meta{margin-top:14px;font-size:15px;letter-spacing:.12em}

  /* doctor — stack, glyph as banner */
  .doctor{grid-template-columns:1fr;padding:90px 22px 100px;gap:0}
  .doc-glyph{padding-top:0;margin:0 -22px 24px;justify-content:flex-start;overflow:hidden}
  .doc-glyph span{font-size:62vw;line-height:.8;margin-left:-4vw}
  .doc-glyph--photo{margin:0 0 24px;justify-content:center;overflow:visible}
  .doc-glyph--photo img{width:min(72vw,360px);margin-left:0}
  .doc-body{padding-right:0}
  .doc-name{font-size:clamp(40px,10vw,56px)}
  .doc-name-en{font-size:.34em;letter-spacing:.12em}
  .doc-quote{font-size:21px;padding-left:16px;margin:24px 0 36px}
  .doc-cv{padding-top:24px;margin-bottom:46px;gap:10px}
  .doc-cv > li{grid-template-columns:70px 1fr;gap:14px;font-size:17px;padding-bottom:12px}
  .doc-cv > li > span{font-size:15px;letter-spacing:.12em}
  .doc-cv-sub{gap:8px}
  .doc-cv-sub li{font-size:17px;line-height:1.6;padding-left:14px}
  .doc-cv-sub li::before{width:4px;height:4px;top:.75em}
  .doc-numbers{flex-direction:column;align-items:flex-start;gap:30px;padding-top:30px}
  .dn-fig{font-size:clamp(64px,18vw,96px)}
  .dn-label{font-size:15px;letter-spacing:.12em}

  /* care list — collapse to 2-row item, detail always visible */
  .care{padding:90px 22px}
  .care-head{margin-bottom:48px}
  .care-head h2{font-size:30px}
  .care-list{border-top-width:1px}
  .care-item{grid-template-columns:38px 1fr;gap:14px;padding:24px 0;align-items:start}
  .care-item:hover{padding-left:8px;padding-top:24px;padding-bottom:24px}
  .care-item:hover::before{width:3px}
  .ci-num{font-size:24px}
  .ci-main h3{font-size:22px;letter-spacing:.02em}
  .ci-en{font-size:15px;margin-top:4px}
  .care-item .ci-detail{grid-column:1/-1;margin-top:10px;opacity:1;transform:none;color:var(--ink);font-size:15px;line-height:1.7}

  /* Q&A page — mobile */
  .qa-hero{padding:130px 22px 80px}
  .qa-hero .chap-mark{margin-bottom:24px;font-size:16px;letter-spacing:.12em}
  .qa-hero h1{font-size:clamp(34px,9.4vw,52px);line-height:1.18;margin-bottom:28px;max-width:100%}
  .qa-hero-sub{font-size:17px;line-height:1.75;margin-bottom:40px;max-width:30ch}
  .qa-hero-sub br{display:none}
  .qa-hero-cue{font-size:16px;letter-spacing:.12em}
  .qa-hero .qh-orb-a{width:200px;height:200px;left:-60px;top:-40px}
  .qa-hero .qh-orb-b{width:180px;height:180px;right:-50px}
  .qa{padding:60px 22px 80px}
  .qa-item{padding:44px 0}
  .qa-num{font-size:17px;letter-spacing:.12em;margin-bottom:18px}
  .qa-item h3{font-size:24px;line-height:1.45;margin-bottom:28px;max-width:none}
  .qa-item h3 br{display:none}
  .qa-ans{padding-left:18px;max-width:none}
  .qa-ans .qa-lede{font-size:19px;line-height:1.65;margin-bottom:24px}
  .qa-ans .qa-lede br{display:none}
  .qa-ans ul{gap:18px}
  .qa-ans ul li{grid-template-columns:1fr;gap:6px;font-size:19px;line-height:1.75;padding-bottom:18px}
  .qa-ans ul li span{font-size:16px;letter-spacing:.12em;color:var(--ember)}
  .qa-tail{margin-top:60px;padding-top:60px}
  .qa-tail p{font-size:19px;margin-bottom:22px}
  .qa-tail-cta{padding:14px 26px;font-size:14px;letter-spacing:.12em}

  /* convergence — keep the scrub but shrink + lower height for mobile */
  /* svh = small viewport height — constant regardless of iOS URL-bar state */
  .converge-wrap{height:240svh}
  .converge-pin{height:100svh}
  .converge-stage{transform:scale(1.05)}
  .cv-line{font-size:clamp(28px,8.2vw,40px) !important;line-height:1.2;width:90%;letter-spacing:.02em}
  .cv-3{font-size:clamp(34px,9.4vw,46px) !important}

  /* booking — single column, full-width card */
  .booking{grid-template-columns:1fr;gap:48px;padding:90px 22px 80px}
  .bk-left h2{font-size:clamp(32px,9vw,46px);margin:14px 0 36px}
  .bk-map{margin:18px 0 36px}
  .bk-meta div{grid-template-columns:78px 1fr;gap:14px;font-size:16px;padding-bottom:10px}
  .bk-meta dt{font-size:15px;letter-spacing:.12em}
  .bk-meta dd{font-size:17px}
  .bk-card{padding:30px 22px;border-radius:3px}
  .bk-card-eyebrow{font-size:15px;letter-spacing:.12em}
  .bk-card h3{font-size:34px}
  .bk-card header p{font-size:14px}
  .bk-slots{margin:28px 0 22px;padding-top:18px}
  .bk-slots li{grid-template-columns:1fr auto;row-gap:4px;font-size:14px;padding:10px 0}
  .bk-slots .sf{grid-column:2;text-align:right;font-size:11px}
  .bk-slots .st{font-size:14px}
  .bk-go{padding:16px;font-size:14px;letter-spacing:.22em}
  .bk-card-foot{font-size:12px;letter-spacing:.14em;margin-top:14px}

  /* clicker — tighter for mobile */
  .clicker{padding:80px 22px 90px}
  .ck-h{font-size:clamp(26px,7.4vw,36px);line-height:1.25;margin-bottom:14px}
  .ck-h br{display:none}
  .ck-sub{font-size:15px;margin-bottom:42px}
  .ck-stage{width:160px;height:160px;margin-bottom:36px}
  .ck-floater{font-size:20px;top:32%}
  .ck-counter{padding:18px 28px;gap:10px;margin-bottom:26px}
  .ck-counter-num{font-size:clamp(54px,18vw,76px)}
  .ck-counter-label{font-size:12px;letter-spacing:.22em}
  .ck-foot{font-size:12px;letter-spacing:.16em;line-height:1.85}

  /* footer — single column, ticker compact */
  .foot{grid-template-columns:1fr;gap:30px;padding:56px 22px 40px}
  .foot-mark{font-size:36px;letter-spacing:.12em}
  .foot-tag{font-size:15px}
  .live-row{grid-template-columns:96px 1fr;gap:10px;padding-bottom:8px}
  .lk{font-size:15px;letter-spacing:.12em}
  .lv{font-size:13px}
  .foot-meta{font-size:16px;line-height:1.65}
  .foot-meta .copy{font-size:15px;letter-spacing:.12em;margin-top:14px}
}

/* very narrow phones (≤380) */
@media (max-width:380px){
  .chrome{padding:12px 14px}
  .cta-pill span{display:none}
  .cta-pill{padding:9px 11px}
  .hero{padding:88px 18px 50px}
  .hero-title{font-size:clamp(34px,12vw,52px)}
  .doc-glyph span{font-size:72vw}
}

/* ---------- LINE FAB · floating "add us on LINE" button ---------- */
.line-fab{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;overflow:hidden;
  z-index:9000;
  box-shadow:0 12px 28px -10px rgba(6,199,85,.45),0 4px 12px -4px rgba(15,16,18,.18);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,opacity .4s ease;
  -webkit-tap-highlight-color:transparent
}
.line-fab svg,.line-fab img{width:100%;height:100%;display:block;object-fit:cover}
.line-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 18px 36px -10px rgba(6,199,85,.55),0 6px 16px -4px rgba(15,16,18,.22)}
.line-fab:active{transform:scale(.96)}
.line-fab:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* hide while loader is up so it doesn't pop in over the cinematic intro */
body.is-loading .line-fab{opacity:0;pointer-events:none;transform:translateY(8px) scale(.9)}
@media (max-width:760px){
  .line-fab{width:50px;height:50px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));border-radius:13px}
}

/* respect reduced-motion: still cinematic, just calmer */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .cosmos .sun,.cosmos .spark,.cosmos .orbit{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}