:root{
  --paper:#F2EDE2; --ink:#2B2721; --ink-2:#5C5449; --ink-3:#8E8577; --ink-faint:#A79D8D;
  --seal:#A8442F; --moon:#C9A461; --tea:#33453A; --line:#D9CFBB;
  --serif:"Fraunces","Noto Serif TC",Georgia,serif;
  --han:"Noto Serif TC",serif;
  --zhuyin:"Noto Sans TC",system-ui,sans-serif;
  --sans:"Inter","Noto Serif TC",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-weight:400;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; border:0; background:transparent; cursor:pointer; color:inherit}
::selection{background:rgba(43,39,33,.85); color:var(--paper)}

.ground{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url(img/ground.jpg) center top / cover no-repeat; opacity:.8}
.ground:after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(242,237,226,.2) 0%,rgba(242,237,226,.68) 54%,var(--paper) 86%)}
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px); position:relative}
.wrap.narrow{max-width:720px}

/* page-to-page fade — a multipage site shouldn't blink white between clicks */
body{opacity:0; animation:pgin .5s var(--ease) forwards}
@keyframes pgin{to{opacity:1}}
body.leaving{opacity:0; transition:opacity .28s ease}

.rv{opacity:0; transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important; transform:none!important; transition:none!important}
  body{opacity:1!important; animation:none!important}
  body.leaving{opacity:1!important}
  html{scroll-behavior:auto} .hero-img{animation:none!important}
  .hero-zh rt{opacity:1!important; animation:none!important}
  .stamp{opacity:.95!important; transform:rotate(-8deg)!important}
}

.label{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}
h2.big{font-size:clamp(29px,4.3vw,46px); line-height:1.1; letter-spacing:-.014em; font-weight:300; max-width:20ch}
h2.zh{font-family:var(--han); font-weight:400; font-size:clamp(21px,2.9vw,30px); line-height:1.55; letter-spacing:.06em; color:var(--ink-2)}
.lede{font-size:clamp(17px,1.9vw,20px); line-height:1.68; color:var(--ink-2); max-width:56ch; font-weight:300}
.zh-body{font-family:var(--han); font-weight:300; font-size:16px; line-height:2.05; letter-spacing:.03em; color:var(--ink-2); max-width:32ch}

.top{position:fixed; top:0; left:0; right:0; z-index:500; display:flex; flex-direction:column; align-items:center;
  gap:11px; padding:18px clamp(16px,4vw,48px) 64px; pointer-events:none; text-align:center}
.top>*{pointer-events:auto}
/* The blur itself is MASKED so the bar dissolves instead of ending on a hard
   line — without this the backdrop-filter runs full height and leaves a visible
   edge where it stops, which is the tell that separated mine from the reference. */
.top:before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(242,237,226,.99),rgba(242,237,226,.97) 56%,rgba(242,237,226,.62) 76%,rgba(242,237,226,0));
  -webkit-backdrop-filter:blur(14px) saturate(.95); backdrop-filter:blur(14px) saturate(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);
  mask-image:linear-gradient(180deg,#000 70%,transparent)}
.brand{font-size:clamp(24px,2.4vw,30px); font-weight:300; letter-spacing:.02em; line-height:1; color:var(--ink); white-space:nowrap}
.brand-zh{font-family:var(--han); font-size:12.5px; font-weight:400; letter-spacing:.28em;
  text-indent:.28em; color:#4A4239; margin-top:5px}
/* Nav sits in the SAME serif as the page at weight 300, tracked out — a
   separate sans here is what made the old bar read as app UI instead of editorial. */
.topnav{display:flex; align-items:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap; justify-content:center}
.topnav a{font-family:var(--serif); font-size:15.5px; font-weight:400; letter-spacing:.024em;
  color:#4A4239; display:flex; align-items:center; min-height:36px; transition:color .22s ease}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--seal)}
.topnav .sep{width:1px; height:14px; background:#BFB29A; margin-left:2px}
.topnav .lang{font-family:var(--serif); font-size:14.5px; font-weight:400; letter-spacing:.07em;
  color:#443D34; padding-left:clamp(10px,1.4vw,16px); border-left:1px solid #BFB29A}

/* ─── the menu ────────────────────────────────────────────────────────────────
   Below 820px the seven links no longer fit: laid out in a row they measure
   704px against a 390px viewport, so four of them sat off-screen behind a
   scrollbar that was deliberately hidden — Journal was sliced mid-word and
   Contact was unreachable. They also straddled the bar's own mask fade, which
   dies at 70% of its height, so every word had cream behind its top half and a
   photograph behind its bottom half. Both problems disappear once the links
   leave the bar: the masthead keeps the row to itself, and the links move onto
   a full page of flat paper where nothing is competing with them. */
.menu-btn,.menu{display:none}
.menu-btn{background:transparent; padding:0}
.menu-btn .bar{display:block; width:21px; height:2px; border-radius:1px; background:var(--ink)}
.menu-btn .bar+.bar{margin-top:4px}

@media (max-width:820px){
  .top{padding:13px 0 26px; gap:5px}
  .brand{font-size:23px}
  /* was 9.5px at .42em: Han strokes that fine render as hairlines and measured
     1.82:1 against the paper no matter what colour was declared. */
  .brand-zh{font-size:11.5px; letter-spacing:.24em; text-indent:.24em; color:#443D34}
  .topnav{display:none}
  .menu-btn{display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:absolute; top:13px; right:7px; width:46px; height:46px; color:var(--ink)}

  .menu{display:block; position:fixed; inset:0; z-index:3; overflow-y:auto;
    overscroll-behavior:contain; background:var(--paper);
    opacity:0; visibility:hidden;
    transition:opacity .34s var(--ease), visibility 0s linear .34s}
  .menu[data-open]{opacity:1; visibility:visible; transition-delay:0s}
  /* the same paper texture the pages carry, so the menu reads as part of the
     site rather than a panel dropped on top of it */
  .menu:before{content:""; position:absolute; inset:0; pointer-events:none;
    background:url(img/ground.jpg) center top / cover no-repeat; opacity:.5}
  .menu:after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,rgba(242,237,226,.72) 0%,rgba(242,237,226,.93) 52%,var(--paper) 88%)}
  .menu-inner{position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column;
    text-align:left; padding:13px 24px calc(30px + env(safe-area-inset-bottom))}
  .menu-top{display:flex; align-items:center; justify-content:space-between; min-height:46px}
  .menu-brand{font-size:23px; font-weight:300; letter-spacing:.02em; line-height:1; color:var(--ink)}
  .menu-x{display:grid; place-items:center; width:46px; height:46px; margin-right:-11px; color:var(--ink)}
  .menu-x svg{display:block}
  .menu-seal{display:block; margin:0 auto 12px; opacity:.4}

  .menu-nav{flex:1; display:flex; flex-direction:column; justify-content:center;
    padding:18px 0 24px}
  .menu-nav a{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:19px 2px; border-bottom:1px solid rgba(196,183,159,.7);
    opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease) var(--d,0ms), transform .5s var(--ease) var(--d,0ms), color .2s ease}
  .menu[data-open] .menu-nav a{opacity:1; transform:none}
  .menu-nav .en{font-family:var(--serif); font-size:clamp(17.5px,5.5vw,24px); font-weight:300;
    letter-spacing:-.004em; line-height:1.15; color:var(--ink); min-width:0}
  .menu-nav .zh{font-family:var(--han); font-size:13px; font-weight:400; letter-spacing:.11em;
    text-indent:.11em; color:var(--ink-2); white-space:nowrap}
  .menu-nav a[aria-current="page"] .en,.menu-nav a[aria-current="page"] .zh{color:var(--seal)}
  .menu-nav a[aria-current="page"]{border-bottom-color:rgba(168,68,47,.42)}

  .menu-foot{text-align:center; padding-top:6px; margin-top:auto;
    opacity:0; transition:opacity .5s var(--ease) .34s}
  .menu[data-open] .menu-foot{opacity:1}
  .menu-foot .zh{display:block; font-family:var(--han); font-size:14px; font-weight:400;
    letter-spacing:.24em; text-indent:.24em; color:#443D34}
  .menu-foot .en{display:block; margin-top:9px; font-family:var(--sans); font-size:10px;
    font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}

  body.menu-open{overflow:hidden}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .menu,.menu-nav a,.menu-foot{transition:none!important}
  .menu-nav a{opacity:1!important; transform:none!important}
  .menu-foot{opacity:1!important}
}

.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 44%; animation:kb 30s var(--ease) forwards}
@keyframes kb{from{transform:scale(1.09)} to{transform:scale(1)}}
.hero-veil{position:absolute; inset:0; background:
  linear-gradient(102deg,rgba(26,19,12,.88) 0%,rgba(26,19,12,.7) 28%,rgba(26,19,12,.3) 56%,rgba(26,19,12,0) 80%),
  linear-gradient(to top,rgba(26,19,12,.6) 0%,rgba(26,19,12,.1) 38%,rgba(26,19,12,0) 64%,rgba(26,19,12,.34) 100%)}
@media (max-width:760px){ .hero-veil{background:linear-gradient(to top,rgba(26,19,12,.93) 14%,rgba(26,19,12,.7) 54%,rgba(26,19,12,.44) 100%)} .hero-img{object-position:62% 68%} }
.hero-inner{position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px) clamp(56px,8vh,84px)}
.hero .label{color:#CBB489}
.hero-zh{font-family:var(--han); font-weight:400; color:#fff; font-size:clamp(30px,5.2vw,56px); line-height:1.9; letter-spacing:.07em; margin:18px 0 6px}
.hero-en{font-size:clamp(28px,4.5vw,52px); line-height:1.07; letter-spacing:-.012em; font-weight:200; color:#fff; max-width:16ch}
.hero-sub{font-weight:300; color:#DDD4C6; font-size:clamp(16px,1.9vw,19px); line-height:1.6; max-width:44ch; margin-top:20px}

/* inner-page header — a shorter photographic band, same family as the hero */
.phead{position:relative; min-height:clamp(340px,52vh,470px); display:flex; align-items:flex-end; overflow:hidden}
.phead img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phead .veil{position:absolute; inset:0; background:
  linear-gradient(102deg,rgba(26,19,12,.88) 0%,rgba(26,19,12,.68) 34%,rgba(26,19,12,.22) 68%,rgba(26,19,12,.05) 92%),
  linear-gradient(to top,rgba(26,19,12,.5),rgba(26,19,12,0) 56%)}
.phead .inner{position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px) clamp(34px,5vh,56px); color:#fff}
.phead .label{color:#CBB489}
.phead h1{font-size:clamp(30px,4.6vw,50px); font-weight:200; line-height:1.08; letter-spacing:-.014em; margin-top:14px; max-width:20ch}
.phead .zh{font-family:var(--han); font-weight:400; font-size:clamp(18px,2.3vw,25px); letter-spacing:.06em; color:#DCD3C4; margin-top:12px}

.acts{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:32px}
.act{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.03em; display:inline-flex;
  align-items:center; min-height:44px; position:relative; color:#fff}
.act:after{content:""; position:absolute; left:0; right:0; bottom:11px; height:1px; background:currentColor;
  opacity:.4; transition:opacity .35s var(--ease), transform .45s var(--ease); transform-origin:left}
.act:hover:after{opacity:1; transform:scaleX(1.03)}
.act.dark{color:var(--ink)}
.act .arw{margin-left:9px; transition:transform .4s var(--ease)}
.act:hover .arw{transform:translateX(5px)}
ruby{ruby-position:over}
rt{font-family:var(--zhuyin); font-size:.25em; font-weight:400; color:#CBB489; line-height:1}
.hero-zh rt{opacity:0; animation:zin .8s var(--ease) forwards}
@keyframes zin{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

.sec{padding:clamp(70px,10vh,124px) 0; position:relative}
.sec.tight{padding:clamp(48px,7vh,84px) 0}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent); max-width:1120px; margin:0 auto}
.rule.short{max-width:260px}
.grid2{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,5vw,68px); align-items:start}
@media (max-width:880px){ .grid2{grid-template-columns:1fr; gap:26px} }

/* seal as a section ornament — sparingly, and only where work is "finished" */
.chop{display:block; width:34px; margin:0 auto clamp(20px,3vh,34px); opacity:.9}

.plates{margin-top:clamp(28px,5vh,48px)}
.plate{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(14px,3vw,30px); align-items:baseline;
  padding:clamp(16px,2.3vh,23px) 0; border-top:1px solid var(--line); transition:opacity .4s ease}
.plate:last-child{border-bottom:1px solid var(--line)}
.plate .n{font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint)}
.plate .t{font-size:clamp(19px,2.3vw,25px); font-weight:300; letter-spacing:-.01em}
.plate .t .zh{font-family:var(--han); font-weight:400; font-size:.7em; color:var(--ink-2); margin-left:12px}
.plate .q{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(14px,1.6vw,17px); color:var(--seal); text-align:right; max-width:30ch}
.plates:hover .plate{opacity:.4}
.plates .plate:hover{opacity:1}
@media (max-width:760px){ .plate{grid-template-columns:auto 1fr; gap:12px} .plate .q{grid-column:2; text-align:left; margin-top:6px} }

.plate-img{position:relative; margin:clamp(56px,8vh,96px) 0; overflow:hidden}
.plate-img img{width:100%; height:clamp(340px,58vh,560px); object-fit:cover}
.plate-img .veil{position:absolute; inset:0; background:linear-gradient(100deg,rgba(24,17,10,.86) 0%,rgba(24,17,10,.6) 40%,rgba(24,17,10,.08) 82%)}
.plate-img .cap{position:absolute; left:0; right:0; bottom:0; padding:clamp(26px,5vh,54px) clamp(20px,4vw,58px); color:#fff}
.plate-img .cap .label{color:#CBB489}
.plate-img h3{font-size:clamp(23px,3.2vw,36px); font-weight:200; line-height:1.16; letter-spacing:-.012em; margin-top:14px; max-width:24ch}
.plate-img p{font-weight:300; color:#DCD3C4; font-size:16px; line-height:1.6; max-width:46ch; margin-top:14px}

.ways{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,54px); margin-top:clamp(28px,5vh,50px)}
@media (max-width:840px){ .ways{grid-template-columns:1fr; gap:32px} }
.way{border-top:1px solid var(--line); padding-top:22px}
.way h3{font-size:22px; font-weight:300; line-height:1.2}
.way .zh{font-family:var(--han); font-weight:300; font-size:14px; color:var(--ink-3); margin-top:5px; letter-spacing:.05em}
.way p{font-weight:300; font-size:15.5px; line-height:1.62; color:var(--ink-2); margin-top:14px}
.way .go{display:inline-flex; align-items:center; min-height:40px; margin-top:12px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--seal)}
.way .go .arw{margin-left:8px; transition:transform .4s var(--ease)}
.way:hover .go .arw{transform:translateX(5px)}

.beats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,42px); margin-top:clamp(28px,5vh,48px)}
@media (max-width:820px){ .beats{grid-template-columns:1fr 1fr; gap:28px} }
.beat{border-top:1px solid var(--line); padding-top:20px}
.beat .zh{font-family:var(--han); font-size:clamp(23px,2.6vw,29px); font-weight:400; letter-spacing:.06em}
.beat .en{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px}
.beat p{font-weight:300; font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-top:12px}

.stamp{position:absolute; width:clamp(56px,6.5vw,86px); opacity:0; transform:scale(1.5) rotate(-19deg);
  transition:opacity .3s ease-out,transform .55s cubic-bezier(.2,1.5,.4,1); overflow:hidden}
.stamp.in{opacity:.95; transform:scale(1) rotate(-8deg)}
.sheet{position:relative; padding:clamp(28px,4vw,42px); background:rgba(255,252,244,.66); overflow:hidden}
.sheet .line{font-family:var(--han); font-weight:300; font-size:clamp(18px,2.2vw,24px); line-height:2.3}
.sheet .line u{text-decoration:none; border-bottom:1px solid #C8BAA0; padding:0 clamp(22px,4vw,42px)}
.sheet .en{font-style:italic; font-weight:300; font-size:14.5px; color:var(--ink-3); margin-top:14px; line-height:1.5}

.fields{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px}
.fields .full{grid-column:1/-1}
@media (max-width:640px){ .fields{grid-template-columns:1fr} }
/* ─── the contact form ────────────────────────────────────────────────────────
   Until 2026-08-25 this was a PICTURE of a form: <div>s styled to look like fields
   and a "Send →" that was an <a href="contact"> back to the same page. Every CTA on
   all six pages pointed here, so the site could not convert at all. These are real
   inputs now, posting to /api/coachers/leads.
   Only name, email and message are required — everything else is marked optional,
   because each required field a parent has to fill is another place they stop. */
.fld{border-bottom:1px solid #CFC4B0; padding-bottom:9px; position:relative;
  transition:border-color .3s var(--ease)}
.fld .l{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); transition:color .3s var(--ease)}
.fld .opt{font-size:9.5px; letter-spacing:.1em; color:#B3A995; text-transform:none; margin-left:7px}
.fld .v{font-size:15px; font-weight:300; color:var(--ink-3); min-height:30px; display:flex; align-items:flex-end}
/* the focus rule grows from the left rather than switching on — the one place the
   page confirms it heard you before you have typed anything */
.fld:after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--seal); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease)}
.fld:focus-within:after{transform:scaleX(1)}
.fld:focus-within .l{color:var(--seal)}

.fld input,.fld select,.fld textarea{width:100%; display:block; border:0; outline:0; background:transparent;
  font-family:var(--serif); font-size:16px; font-weight:300; line-height:1.5; color:var(--ink);
  padding:6px 0 2px; margin:0; min-height:34px; border-radius:0; -webkit-appearance:none; appearance:none}
.fld textarea{resize:vertical; min-height:96px}
.fld input::placeholder,.fld textarea::placeholder{color:#B3A995; font-style:italic}
.fld select{color:var(--ink); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8E8577 50%),linear-gradient(135deg,#8E8577 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:24px}
.fld.bad{border-bottom-color:var(--seal)}
.fld.bad .l{color:var(--seal)}
.fld.bad{animation:nudge .42s var(--ease)}
@keyframes nudge{0%,100%{transform:translateX(0)} 22%{transform:translateX(-5px)} 55%{transform:translateX(4px)} 80%{transform:translateX(-2px)}}
.fld .err{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.02em;
  color:var(--seal); margin-top:6px; min-height:0}

.cform-foot{display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin-top:8px}
.cform button.act{border:0; background:transparent; cursor:pointer; padding:0}
.cform button.act[disabled]{cursor:progress; opacity:.55}
.cform button.act:active{transform:translateY(1px)}
.cform .spin{display:none; width:13px; height:13px; margin-left:9px; border-radius:50%;
  border:1.5px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite}
.cform.sending .spin{display:inline-block}
.cform.sending .arw{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.cform-note{font-family:var(--sans); font-size:11.5px; line-height:1.6; color:var(--ink-3); max-width:42ch}
.form-error{font-family:var(--sans); font-size:12.5px; color:var(--seal); margin-top:12px}

/* the confirmation replaces the form in place — a parent who has just typed about
   their child should get an answer on the same spot, not a page they have to find */
.cform-done{display:none}
.cform-done.on{display:block; animation:doneIn .6s var(--ease) both}
@keyframes doneIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.cform-done .seal-mark{display:block; margin-bottom:20px; animation:zin .7s var(--ease) .12s both}
.cform-done h2{font-size:clamp(24px,3.4vw,32px); font-weight:300; line-height:1.2; letter-spacing:-.012em}
.cform-done p{margin-top:14px; font-size:16px; font-weight:300; line-height:1.7; color:var(--ink-2); max-width:44ch}
.cform-done .zh{font-family:var(--han); font-size:14px; letter-spacing:.1em; color:var(--ink-2); margin-top:8px}

/* ─── mid-article invitation ───────────────────────────────────────────────── */
.midcta{margin:44px 0; padding:26px 28px; background:rgba(217,207,187,.22);
  border-left:2px solid var(--moon); border-radius:2px}
.midcta .k{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3)}
.midcta .t{font-family:var(--serif); font-size:clamp(17px,2vw,20px); font-weight:300;
  line-height:1.5; color:var(--ink); margin-top:10px; max-width:36ch}
.midcta .act{margin-top:16px}
@media (max-width:600px){ .midcta{padding:22px 20px; margin:34px 0} }

/* ─── tap feedback ──────────────────────────────────────────────────────────
   Every CTA had hover-only motion, so on a phone — where nearly all of this
   site's traffic reads — tapping a link gave no acknowledgement whatsoever
   until the next page painted. */
.act,.postrow,.way,.menu-nav a{-webkit-tap-highlight-color:transparent}
.act{transition:transform .18s var(--ease), opacity .18s ease}
.act:active{transform:scale(.972); opacity:.75}
.act:active .arw{transform:translateX(5px)}
.postrow{transition:background-color .2s ease, padding-left .25s var(--ease)}
.postrow:active{background-color:rgba(217,207,187,.3)}
.menu-nav a{transition:opacity .16s ease, transform .16s var(--ease), color .2s ease}
.menu-nav a:active{opacity:.6}
@media (prefers-reduced-motion:reduce){
  .act,.act:active,.postrow,.menu-nav a,.menu-nav a:active{transition:none!important; transform:none!important}
}
.hold{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--seal); opacity:.75}

/* ── the sketchbook ── */
.sb-wrap{margin-top:clamp(32px,6vh,60px); perspective:2100px}
/* arrow · book · arrow as flex siblings, so the chevrons sit OUTSIDE the
   artwork rather than floating on top of it */
.sb-stage{position:relative; max-width:1020px; margin:0 auto; display:flex; align-items:center;
  gap:clamp(4px,1.2vw,18px); transform-style:preserve-3d}
.sb-3d{position:relative; flex:1 1; min-width:0; max-width:920px; transform-style:preserve-3d}
.sb-arrow{flex:none; display:inline-flex; align-items:center; justify-content:center; padding:6px 2px;
  color:var(--ink-faint); transition:color .22s ease, transform .35s var(--ease); z-index:8;
  -webkit-tap-highlight-color:transparent}
.sb-arrow:hover{color:var(--ink)}
.sb-arrow.left:hover{transform:translateX(-3px)}
.sb-arrow.right:hover{transform:translateX(3px)}
@media (max-width:760px){
  .sb-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:70; padding:12px 6px}
  .sb-arrow.left{left:-4px} .sb-arrow.right{right:-4px}
  .sb-arrow.left:hover{transform:translateY(-50%) translateX(-3px)}
  .sb-arrow.right:hover{transform:translateY(-50%) translateX(3px)}
}
.sb-book{position:relative; width:100%; aspect-ratio:1180/831; transform-style:preserve-3d; z-index:1; touch-action:pan-y}
.sb-cast{position:absolute; pointer-events:none; z-index:0}
.sb-cast.ambient{left:4%; right:4%; top:24%; bottom:-2%;
  background:radial-gradient(50% 50% at 50% 58%,rgba(58,44,26,.30) 0%,rgba(58,44,26,.17) 40%,rgba(58,44,26,0) 74%);
  filter:blur(28px); opacity:calc(1 - var(--shade,0) * .42)}
.sb-cast.contact{left:9%; right:9%; top:60%; bottom:4%;
  background:radial-gradient(50% 44% at 50% 42%,rgba(44,32,14,.36) 0%,rgba(44,32,14,.15) 48%,rgba(44,32,14,0) 78%);
  filter:blur(12px); opacity:calc(1 - var(--shade,0) * .5)}
.sb-cast.hair{left:13%; right:13%; top:69%; bottom:11%;
  background:radial-gradient(50% 52% at 50% 40%,rgba(40,28,10,.30) 0%,rgba(40,28,10,0) 76%);
  filter:blur(5px); opacity:calc(1 - var(--shade,0) * .62)}
.sb-full{position:absolute; inset:0}
.sb-full img{width:100%; height:auto}
.sb-half{position:absolute; top:0; bottom:0; width:50%; overflow-x:clip; overflow-y:visible}
.sb-half.left{left:0} .sb-half.right{left:50%}
.sb-half-img{width:200%; max-width:none; height:auto}
.sb-half-img.right{margin-left:-100%}
.gutter-shade{position:absolute; top:6%; bottom:6%; width:46%; pointer-events:none; opacity:calc(var(--shade,0) * .6);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.gutter-shade.left{right:0; background:linear-gradient(270deg,rgba(52,38,20,.28),rgba(52,38,20,0) 82%)}
.gutter-shade.right{left:0; background:linear-gradient(90deg,rgba(52,38,20,.22),rgba(52,38,20,0) 82%)}
.curl{position:absolute; top:0; height:100%; width:calc(var(--bw,0px) * var(--span)); transform-style:preserve-3d; z-index:6}
.curl.next{left:50%; transform-origin:left center; transform:rotateY(calc(-1 * var(--tt,0deg)))}
.curl.prev{right:50%; transform-origin:right center; transform:rotateY(var(--tt,0deg))}
.strip{position:absolute; top:0; height:100%; width:calc(var(--bw,0px) * var(--span) / var(--n)); transform-style:preserve-3d}
.curl.next .strip{transform-origin:left center}
.curl.prev .strip{transform-origin:right center}
.curl.next>.strip{left:0}
.curl.prev>.strip{right:0; left:auto}
.curl.next .strip .strip{left:100%; transform:rotateY(var(--td,0deg))}
.curl.prev .strip .strip{right:100%; transform:rotateY(calc(-1 * var(--td,0deg)))}
.face{position:absolute; top:0; bottom:0; left:0; right:-1.1px; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; background-repeat:no-repeat; background-size:var(--bw,0px) auto}
.face.back{transform:rotateY(180deg)}
.face .sh,.face .gl{position:absolute; left:0; right:0; top:6%; bottom:6%; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.curl.next .face.front .sh,.curl.prev .face.back .sh{background:linear-gradient(90deg,rgba(58,43,20,var(--a1,0)),rgba(58,43,20,var(--a2,0)))}
.curl.next .face.back .sh,.curl.prev .face.front .sh{background:linear-gradient(90deg,rgba(58,43,20,var(--a2,0)),rgba(58,43,20,var(--a1,0)))}
.face .gl{background:#fffaf0; opacity:calc(var(--shade,0) * var(--lit,1) * var(--lit,1) * .2)}
.sb-zone{position:absolute; top:0; bottom:0; width:50%; z-index:20; background:transparent}
.sb-zone.prev{left:0; cursor:w-resize} .sb-zone.next{right:0; cursor:e-resize}
.sb-meta{margin-top:clamp(20px,3vh,32px); text-align:center}
.sb-cap{font-size:15.5px; font-weight:300; color:var(--ink-2); min-height:1.6em; position:relative}
.sb-cap span.line{display:block}
.sb-cap span.line.live{position:absolute; left:0; right:0; top:0}
.sb-cap .zh{font-family:var(--han); color:var(--ink)}
.sb-dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.sb-dots i{width:5px; height:5px; border-radius:99px; background:#C4B79F; transition:all .45s var(--ease)}
.sb-dots i.on{background:var(--seal); width:19px}
.sb-hint{text-align:center; margin-top:12px; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}


/* ══ character composition — the second signature move ══
   The site's first theme asks "what makes a place home?" and the writing system
   answers it: 家 is a roof (宀) with a pig (豕) beneath. Chinese LEADS here at
   display size with English demoted, which is the one place the bilingual
   weighting inverts — everywhere else English leads. */
.hanzi{padding:clamp(70px,10vh,120px) 0; position:relative; overflow:hidden}
.hanzi-stage{display:flex; align-items:center; justify-content:center; gap:clamp(12px,3vw,40px);
  flex-wrap:nowrap; margin-top:clamp(30px,5vh,52px)}
.hz{display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto}
.hz .glyph{font-family:var(--han); font-weight:300; line-height:1;
  font-size:clamp(52px,11vw,132px); color:var(--ink); transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
.hz .rd{font-family:var(--zhuyin); font-size:11px; letter-spacing:.14em; color:var(--seal)}
.hz .gl{font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.hz-op{font-family:var(--serif); font-weight:200; font-size:clamp(26px,5vw,58px); color:var(--moon);
  line-height:1; flex:0 0 auto; transition:opacity .9s var(--ease); opacity:0}
.hanzi.in .hz-op{opacity:1}
.hz.part .glyph{opacity:0}
.hanzi.in .hz.part .glyph{opacity:1}
.hz.part.a .glyph{transform:translateX(26px)}
.hz.part.b .glyph{transform:translateX(-26px)}
.hanzi.in .hz.part .glyph{transform:none}
.hz.result .glyph{font-weight:400; color:var(--seal); opacity:0; transform:scale(.86)}
.hanzi.in .hz.result .glyph{opacity:1; transform:none; transition-delay:.55s}
.hz.result .rd,.hz.result .gl{opacity:0; transition:opacity .8s var(--ease) .75s}
.hanzi.in .hz.result .rd,.hanzi.in .hz.result .gl{opacity:1}
.hanzi-note{text-align:center; margin-top:clamp(26px,4vh,44px); font-weight:300;
  font-size:clamp(16px,1.9vw,19px); line-height:1.62; color:var(--ink-2); max-width:46ch;
  margin-left:auto; margin-right:auto}
@media (prefers-reduced-motion:reduce){
  .hz .glyph,.hz-op,.hz.result .rd,.hz.result .gl{opacity:1!important; transform:none!important; transition:none!important}
}
@media (max-width:560px){ .hanzi-stage{gap:6px} .hz .gl{font-size:9px; letter-spacing:.12em} }


/* ══ Journal index — browsable at 177 posts ══
   A flat 177-row list is an archive, not an index. Live search + a topic filter,
   and two columns on desktop so the page is half as tall. */
.jtools{position:sticky; top:var(--barh,120px); z-index:40; padding:14px 0 16px;
  background:linear-gradient(180deg,var(--paper) 72%,rgba(242,237,226,0)); margin-bottom:6px}
.jsearch{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:11px}
.jsearch svg{flex:0 0 auto; color:var(--ink-faint)}
.jsearch input{flex:1 1 auto; border:0; background:transparent; outline:none; font-family:var(--serif);
  font-size:clamp(17px,2.1vw,21px); font-weight:300; color:var(--ink); min-width:0; padding:4px 0}
.jsearch input::placeholder{color:var(--ink-faint)}
.jsearch .clear{flex:0 0 auto; color:var(--ink-faint); font-size:20px; line-height:1; padding:6px; display:none}
.jsearch.has .clear{display:block}
.jsearch .clear:hover{color:var(--seal)}
.jchips{display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; align-items:center}
.jchip{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.04em;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2);
  background:transparent; transition:all .25s var(--ease); min-height:34px}
.jchip:hover{border-color:var(--ink-3)}
.jchip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.jcount{font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-left:auto}
.postlist{margin-top:clamp(18px,3vh,30px); columns:2; column-gap:clamp(30px,5vw,64px)}
@media (max-width:820px){ .postlist{columns:1} }
.postrow{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid}
.jempty{padding:44px 0; text-align:center; color:var(--ink-3); font-weight:300; display:none}
.jempty.on{display:block}
.jgrouphead{break-inside:avoid}

/* ── blog ── */
.postlist{margin-top:clamp(26px,4vh,44px)}
.postrow{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(14px,3vw,30px); align-items:baseline;
  padding:clamp(18px,2.6vh,26px) 0; border-top:1px solid var(--line); transition:opacity .4s ease}
.postrow:last-child{border-bottom:1px solid var(--line)}
.postrow .n{font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint)}
.postrow .t{font-size:clamp(19px,2.2vw,24px); font-weight:300; line-height:1.24; letter-spacing:-.01em}
.postrow .t .zh{font-family:var(--han); font-weight:400; font-size:.66em; color:var(--ink-2); margin-left:12px}
.postrow .m{font-family:var(--sans); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap}
.postlist:hover .postrow{opacity:.4}
.postlist .postrow:hover{opacity:1}
@media (max-width:700px){ .postrow{grid-template-columns:auto 1fr} .postrow .m{grid-column:2; margin-top:7px} }

article.post{padding:clamp(40px,6vh,72px) 0 0}
.post .measure{max-width:660px; margin:0 auto}
.post h1{font-size:clamp(30px,4.4vw,46px); font-weight:300; line-height:1.12; letter-spacing:-.016em}
.post .meta{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:20px}
.post .lead{font-size:clamp(18px,2.1vw,21px); line-height:1.62; font-weight:300; color:var(--ink-2); margin-top:26px}
.post .body{margin-top:34px; font-size:17.5px; line-height:1.78; font-weight:400}
.post .body p{margin:0 0 1.15em}
.post .body h2{font-size:clamp(21px,2.5vw,27px); font-weight:400; line-height:1.24; margin:2em 0 .6em; letter-spacing:-.01em}
.post .body h3{font-size:18.5px; font-weight:500; margin:1.7em 0 .5em}
.post .body ul,.post .body ol{margin:0 0 1.2em; padding-left:1.3em}
.post .body li{margin-bottom:.5em}
.post .body strong{font-weight:600}
.post .body .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.4em 0; max-width:100%}
.post .body table{width:100%; min-width:0; border-collapse:collapse; font-size:16px}
.post .body td,.post .body th{overflow-wrap:anywhere}
.post .body th,.post .body td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); font-weight:400}
.post .body th{font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.post .body .han{font-family:var(--han)}
.pullquote{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(21px,2.6vw,27px);
  line-height:1.36; color:var(--seal); margin:1.8em 0; padding-left:22px; border-left:1px solid var(--seal); max-width:34ch}
.post-end{text-align:center; margin:clamp(44px,6vh,68px) 0 0}
.post-end img{width:38px; margin:0 auto; opacity:.9}
.postnav{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:clamp(38px,5vh,58px); padding-top:26px; border-top:1px solid var(--line)}
@media (max-width:640px){ .postnav{grid-template-columns:1fr} }
.postnav a{display:block}
.postnav .k{font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.postnav .t{font-size:17px; font-weight:300; line-height:1.3; margin-top:7px; color:var(--ink-2); transition:color .3s ease}
.postnav a:hover .t{color:var(--seal)}
.postnav .right{text-align:right}

.foot{padding:clamp(48px,7vh,78px) 0; text-align:center}
.foot .brand{font-size:23px}
.footnav{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.footnav a{font-family:var(--sans); font-size:12.5px; color:var(--ink-3); transition:color .3s ease}
.footnav a:hover{color:var(--seal)}