:root{
  --bg:#F7F5F0; --ink:#2B2B2B; --faint:#6B655C; --rule:rgba(43,43,43,.12);
  --accent:#A6402F;
  --serif:"Noto Serif TC",ui-serif,Georgia,serif;
  --sans:"Instrument Sans","Noto Sans TC",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#26241F; --ink:#E8E4DC; --faint:#9A938A; --rule:rgba(232,228,220,.14);
    --accent:#C9705E;
  }
}
:root[data-theme="dark"]{
  --bg:#26241F; --ink:#E8E4DC; --faint:#9A938A; --rule:rgba(232,228,220,.14);
  --accent:#C9705E;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:64rem; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem)}
.measure{max-width:34rem}

/* ---------- nav ---------- */
nav{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:2.2rem 0 2rem; border-bottom:1px solid var(--rule); flex-wrap:wrap;
}
.brand{font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.02em}
.brand a{color:inherit; text-decoration:none}
.links{display:flex; gap:clamp(1.1rem,3vw,2.2rem); font-family:var(--sans); font-size:.86rem}
.links a{color:var(--faint); text-decoration:none}
.links a:hover,.links a:focus-visible{color:var(--ink)}
.links a[aria-current]{color:var(--ink)}
.lang{font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; display:flex; gap:.45rem}
.lang a{color:var(--faint); text-decoration:none}
.lang a:hover,.lang a:focus-visible{color:var(--ink)}
.lang [aria-current]{color:var(--accent)}
.lang .sep{color:var(--rule)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:1px solid var(--accent); outline-offset:3px}

/* ---------- rhythm ---------- */
main{display:block; padding:clamp(4.5rem,11vw,8rem) 0 clamp(6rem,14vw,10rem)}
main>*+*{margin-top:clamp(5rem,12vw,9rem)}
/* a page title belongs to the text under it, not a section away from it */
main>h1+*{margin-top:2.4rem}
main>.intro+ul{margin-top:2.4rem}
main>ul+form{margin-top:4.5rem}
h1{font-size:clamp(1.5rem,4vw,1.95rem); font-weight:600; letter-spacing:.05em;
   margin:0; text-wrap:balance}
h2{font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.16em;
   text-transform:uppercase; color:var(--faint);
   margin:0 0 2rem; padding-bottom:1rem; border-bottom:1px solid var(--rule)}
h3{font-size:1.05rem; font-weight:600; letter-spacing:.12em; margin:0 0 1.2rem}
p{margin:0 0 1.5rem}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.2rem,3.2vw,1.55rem); line-height:1.8; max-width:30rem; margin:0}
.intro{font-size:1.08rem; line-height:2.05}
em{font-style:italic}

/* ---------- the mark ---------- */
.mark{display:flex; flex-direction:column; align-items:center; gap:clamp(2.5rem,6vw,3.5rem)}
.mark svg{width:100%; max-width:20rem; height:auto; display:block}
.o{fill:none; stroke:var(--ink); stroke-width:1.6;
   vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.ops{margin:0; font-size:1.05rem; letter-spacing:.36em; text-indent:.36em; text-align:center}
html[lang="en"] .ops{letter-spacing:.2em; text-indent:.2em; font-size:.82rem;
                           text-transform:uppercase; color:var(--faint); font-family:var(--sans)}

/* ---------- three operations ---------- */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.three>div{padding:2.2rem 1.8rem 2.2rem 0; border-top:1px solid var(--rule)}
.three>div+div{padding-left:1.8rem; border-left:1px solid var(--rule)}
.three h3{margin:0 0 1rem; font-size:1.05rem}
.three p{margin:0 0 1.4rem; font-size:.95rem; line-height:1.95}
.more{font-family:var(--sans); font-size:.8rem; color:var(--accent);
      text-decoration:none; border-bottom:1px solid transparent}
.more:hover,.more:focus-visible{border-bottom-color:var(--accent)}
@media (max-width:44rem){
  .three{grid-template-columns:1fr}
  .three>div{padding:2rem 0}
  .three>div+div{padding-left:0; border-left:0}
}

/* ---------- prose sections ---------- */
.claim p{font-size:1.08rem; line-height:2.05}
.closing{font-size:clamp(1.3rem,3.6vw,1.75rem); line-height:1.85; margin:0; max-width:32rem}
blockquote{margin:2.5rem 0 0; padding-left:1.8rem; border-left:1px solid var(--rule);
           color:var(--faint); font-size:.98rem; line-height:2}
.principles{display:flex; flex-direction:column; gap:1.3rem; margin:0 0 2rem}
.principles div{padding-left:0}
.principles b{font-weight:600}
.practice-block{scroll-margin-top:2rem}
.practice-block+.practice-block{margin-top:clamp(4rem,10vw,7rem)}
.work div{margin:0 0 2rem}
.work div:last-child{margin-bottom:0}
.withheld{font-family:var(--sans); font-size:.82rem; color:var(--faint); margin-top:2.5rem}

/* ---------- writing ---------- */
.empty{font-size:1.08rem; color:var(--faint)}

/* ---------- form ---------- */
form{display:flex; flex-direction:column; gap:2.4rem; max-width:32rem}
.field{display:flex; flex-direction:column; gap:.7rem}
label,legend{font-family:var(--sans); font-size:.78rem; letter-spacing:.1em;
             text-transform:uppercase; color:var(--faint); padding:0}
input[type=text],input[type=email],textarea{
  font:inherit; color:var(--ink); background:none; border:0;
  border-bottom:1px solid var(--rule); padding:.5rem 0; border-radius:0;
}
input[type=text]:focus,input[type=email]:focus,textarea:focus{
  border-bottom-color:var(--accent); outline:none}
textarea{resize:vertical; min-height:8rem; line-height:1.9}
fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem}
.radios{display:flex; gap:1.8rem; flex-wrap:wrap; font-size:.95rem}
.radios label{font-family:var(--serif); font-size:.95rem; letter-spacing:0;
              text-transform:none; color:var(--ink);
              display:flex; align-items:center; gap:.5rem; cursor:pointer}
html[lang="en"] .radios label{font-family:var(--sans)}
input[type=radio]{accent-color:var(--accent); margin:0}
button[type=submit]{
  font-family:var(--sans); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  background:none; color:var(--ink); border:0; border-bottom:1px solid var(--ink);
  padding:.5rem 0; cursor:pointer; align-self:flex-start;
}
button[type=submit]:hover{color:var(--accent); border-bottom-color:var(--accent)}
.hp{position:absolute; left:-9999px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule); padding:2.4rem 0 3.5rem;
       font-family:var(--sans); font-size:.8rem; color:var(--faint);
       display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}

/* ---------- English tree ---------- */
/* Each page ships in one language only; /en/* carries lang="en" on <html>. */
html[lang="en"] body{font-family:var(--sans)}
html[lang="en"] h1,html[lang="en"] h3{letter-spacing:.02em}

/* ---------- lists ---------- */
main ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem}
main ul li{padding-left:1.5rem; position:relative}
main ul li::before{content:"—"; position:absolute; left:0; color:var(--faint)}