/* 古脈今聲 (Gumai Jinsheng) — legal page stylesheet
   Matches the paper/cinnabar identity used for 古脈譯 (the Translation App)
   on the main DaoGrove Labs site, since Gumai Jinsheng is that product. */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+TC:wght@400;600;900&display=swap');

:root{
  color-scheme: only light;
  --paper:#FDFCF9;
  --ink:#1B1A17;
  --ink-faded:#5C5952;
  --cinnabar:#C13A2B;
  --cinnabar-wash:rgba(193,58,43,.07);
  --hairline:rgba(27,26,23,.14);
  --serif:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
  --han:'Noto Serif TC','Noto Serif SC',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:300;line-height:1.7;font-size:17px}
a{color:var(--cinnabar)}
a:hover{text-decoration:none}
::selection{background:var(--cinnabar);color:var(--paper)}
:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}

.wrap{max-width:760px;margin:0 auto;padding:0 5vw}

header.legal{padding:28px 5vw;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark .seal{font-family:var(--han);font-weight:900;color:var(--paper);background:var(--cinnabar);font-size:14px;line-height:1;padding:6px 6px;letter-spacing:.1em}
.wordmark-img{width:30px;height:30px;display:block;border-radius:7px;border:1px solid var(--hairline)}
.wordmark .name{font-family:var(--serif);font-weight:400;font-size:18px}
.legal-nav{display:flex;gap:22px;flex-wrap:wrap}
.legal-nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faded);text-decoration:none}
.legal-nav a:hover,.legal-nav a.active{color:var(--cinnabar)}

.hero.legal{padding:9vh 5vw 6vh;border-bottom:1px solid var(--hairline)}
.hero.legal .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faded);margin-bottom:16px}
.hero.legal .label .dot{color:var(--cinnabar)}
.hero.legal h1{font-family:var(--han);font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.2;margin-bottom:10px}
.hero.legal .updated{font-family:var(--mono);font-size:12.5px;color:var(--ink-faded)}
.lang-jump{margin-top:20px;display:flex;gap:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

.glance{border:1px solid var(--hairline);background:var(--cinnabar-wash);padding:28px 5vw;margin:0}
.glance .wrap h2{font-family:var(--han);font-weight:600;font-size:20px;margin-bottom:6px}
.glance .lead{color:var(--ink-faded);font-size:14px;max-width:60ch;margin-bottom:18px}
table.nutrition{width:100%;border-collapse:collapse;font-size:13.5px}
table.nutrition th,table.nutrition td{text-align:left;padding:10px 12px;border:1px solid var(--hairline);vertical-align:top}
table.nutrition th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faded);background:rgba(27,26,23,.03)}
.pill-row{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--cinnabar);color:var(--cinnabar);padding:5px 12px;border-radius:999px}

.callout{border-left:3px solid var(--cinnabar);background:var(--cinnabar-wash);padding:20px 24px;margin:26px 0;font-size:15.5px}
.callout strong{font-family:var(--han)}

article.legal{padding:8vh 5vw 12vh}
article.legal section{margin-bottom:5vh}
article.legal h2{font-family:var(--han);font-weight:600;font-size:23px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
article.legal h3{font-family:var(--serif);font-weight:500;font-size:16.5px;margin:20px 0 8px}
article.legal p,article.legal li{color:var(--ink);font-size:16px;margin-bottom:10px}
article.legal ul,article.legal ol{padding-left:22px;margin-bottom:12px}
article.legal .muted{color:var(--ink-faded);font-size:14px}
article.legal table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
article.legal th,article.legal td{text-align:left;padding:10px 12px;border:1px solid var(--hairline);vertical-align:top}
article.legal th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faded)}
.lang-block{padding-top:4px}
.lang-divider{margin:10vh 0 6vh;border-top:2px solid var(--ink);padding-top:6vh}
.lang-divider .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faded);margin-bottom:14px}
.lang-divider h1{font-family:var(--han);font-weight:600;font-size:clamp(26px,3.8vw,38px)}

details.faq{border:1px solid var(--hairline);padding:16px 20px;margin-bottom:10px}
details.faq summary{font-family:var(--serif);font-weight:500;font-size:16px;cursor:pointer;list-style:none;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"＋ ";color:var(--cinnabar)}
details.faq[open] summary::before{content:"－ "}
details.faq p{margin-top:10px;color:var(--ink-faded);font-size:15px}

.contact-box{border:1px solid var(--hairline);padding:24px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:8px}
.contact-box .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faded)}
.contact-box .email{font-family:var(--serif);font-size:19px;color:var(--ink)}
.contact-box a.btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--paper);background:var(--ink);padding:11px 20px}
.contact-box a.btn:hover{background:var(--cinnabar)}

footer.legal{padding:6vh 5vw;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faded)}
footer.legal a{color:var(--ink-faded)}
footer.legal a:hover{color:var(--cinnabar)}

@media(max-width:640px){
  header.legal{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}