:root { --pine:#143329; --ink:#17221f; --bone:#f3efe5; --paper:#fbfaf6; --line:#cfd3c8; --gold:#c8974c; --rust:#9e5b46; --moss:#61756a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font:inherit; }
.shell { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.hero { min-height:620px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:end; gap:64px; padding:92px 0 78px; }
.hero-copy { max-width:760px; }
.language-link { display:inline-block; margin-bottom:22px; color:var(--moss); font-size:11px; font-weight:800; letter-spacing:.12em; text-decoration:none; }
.language-link:hover, .language-link:focus-visible { color:var(--gold); }
.eyebrow, .note-label, .participant-role, .state, .boundary-grid span { margin:0; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow { color:var(--gold); }
h1,h2 { margin:0; font-family: Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.045em; line-height:.98; }
h1 { margin-top:25px; max-width:850px; font-size:clamp(3rem, 7vw, 6.7rem); color:var(--pine); }
h1 em,h2 em { color:var(--gold); font-style:normal; }
.lede { max-width:600px; margin:30px 0 0; font-size:18px; line-height:1.6; color:#52615a; }
.proof-strip { display:flex; flex-wrap:wrap; gap:0; margin-top:46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.proof-strip span { padding:15px 20px 15px 0; margin-right:20px; border-right:1px solid var(--line); font-size:11px; font-weight:700; color:var(--pine); }
.proof-strip span:last-child { border:0; }
.hero-note { align-self:center; border-left:2px solid var(--gold); padding-left:24px; }
.note-label { color:var(--gold); }
.hero-note > p:nth-child(2) { margin:18px 0 24px; font:400 26px/1.13 Georgia, serif; color:var(--pine); }
.note-small { max-width:235px; margin:0; color:#7a867e; font-size:12px; line-height:1.55; }
.reveal-section { padding:96px 0 124px; border-top:1px solid var(--line); display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; }
h2 { font-size:clamp(2.5rem, 4.5vw, 4.6rem); color:var(--pine); }
.section-intro h2, .objective-heading h2 { margin-top:18px; }
.section-intro > p:not(.eyebrow):not(.action-hint), .objective-heading > p:not(.eyebrow) { margin:24px 0 0; color:#64736b; font-size:15px; line-height:1.7; }
.action-row { display:flex; align-items:center; gap:14px; margin-top:30px; }
.primary-action { padding:15px 18px; border:1px solid var(--pine); background:var(--pine); color:var(--bone); cursor:pointer; text-align:left; font-weight:750; transition:background .2s, color .2s; }
.primary-action:hover, .primary-action:focus-visible { background:var(--gold); border-color:var(--gold); color:var(--pine); }
.stage-count { color:var(--moss); font-size:10px; font-weight:800; letter-spacing:.15em; }
.action-hint { margin-top:12px; color:var(--moss); font-size:11px; line-height:1.5; }
.participant-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); align-self:start; }
.participant { min-height:185px; padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:background .35s, color .35s, transform .35s; }
.participant.is-reclassified { background:var(--pine); color:var(--bone); }
.participant.is-hold { background:#f3eae2; color:var(--ink); }
.participant-top { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.participant h3 { margin:10px 0 0; font-size:18px; line-height:1.2; }
.participant-role { color:var(--moss); }
.is-reclassified .participant-role { color:#e8be77; }
.participant p { margin:15px 0 0; font-size:12px; line-height:1.55; color:#6e7a73; }
.is-reclassified p { color:#d4ded8; }
.state { color:var(--rust); }
.participant .reveal-detail { opacity:0; max-height:0; overflow:hidden; transform:translateY(5px); transition:opacity .35s, max-height .35s, transform .35s; }
.participant.is-reclassified .reveal-detail, .participant.is-hold .reveal-detail { opacity:1; max-height:80px; transform:none; }
.objective-section { padding:100px 0; background:var(--bone); display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; }
.objective-panel { border:1px solid var(--pine); background:var(--paper); }
.objective-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--pine); }
.objective-tab { min-height:78px; padding:14px 18px; border:0; border-right:1px solid var(--pine); background:transparent; color:var(--pine); cursor:pointer; text-align:left; font-weight:750; }
.objective-tab:last-child { border-right:0; }
.objective-tab span { display:block; margin-bottom:8px; color:var(--gold); font-size:11px; letter-spacing:.12em; }
.objective-tab.is-active { background:var(--pine); color:var(--bone); }
.priority-result { min-height:265px; padding:30px; }
.result-label { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.priority-result h3 { margin:15px 0 0; color:var(--pine); font:400 clamp(2rem,3.4vw,3.5rem)/.98 Georgia, serif; letter-spacing:-.04em; }
.priority-result p { max-width:560px; margin:18px 0 0; color:#627068; font-size:14px; line-height:1.65; }
.next-question { margin-top:24px; padding-top:17px; border-top:1px solid var(--line); color:var(--pine); font-size:13px; font-weight:700; }
.next-question span { display:block; margin-bottom:7px; color:var(--gold); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.closing-section { padding:126px 0 130px; }
.closing-rule { width:80px; height:3px; margin-bottom:28px; background:var(--gold); }
.closing-section h2 { max-width:700px; margin-top:18px; font-size:clamp(3rem, 6vw, 6rem); }
.closing-copy { max-width:600px; margin:28px 0 0; color:#58675f; font-size:18px; line-height:1.6; }
.closing-copy strong { color:var(--pine); }
.boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:760px; margin-top:62px; padding-top:20px; border-top:1px solid var(--line); }
.boundary-grid span { color:var(--gold); }
.boundary-grid p { margin:10px 0 0; color:#68766e; font-size:13px; line-height:1.6; }
.disclosure { margin:72px 0 0; color:#8a948e; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.journey-links { display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:28px; font-size:13px; line-height:1.6; }
.journey-links a { max-width:100%; color:var(--pine); text-underline-offset:4px; overflow-wrap:anywhere; }
.journey-links a:hover { text-decoration-thickness:2px; }
.journey-links a:focus-visible { outline:2px solid var(--pine); outline-offset:5px; }
/* Keep the approved Chinese copy intact; break between phrases, not inside 買方. */
:lang(zh-Hant) :is(h1,h2) { letter-spacing:0; line-height:1.2; text-wrap:balance; }
:lang(zh-Hant) #closing-title { word-break:keep-all; }
:lang(zh-Hant) .zh-phrase { white-space:nowrap; }
:lang(zh-Hant) :is(h3,h4,b,strong,button,.language-link,.eyebrow,.note-label,.participant-role,.state,.proof-strip span,.stage-count,.result-label,.next-question,.boundary-grid span) { font-weight:600; }
@media (max-width: 760px) { .shell { width:min(100% - 28px, 600px); } .hero { min-height:auto; display:block; padding:64px 0 72px; } h1 { font-size:clamp(3rem, 15vw, 5rem); } .lede { font-size:16px; } .proof-strip { display:block; margin-top:34px; } .proof-strip span { display:block; padding:12px 0; margin:0; border-right:0; border-bottom:1px solid var(--line); } .hero-note { margin-top:54px; } .reveal-section, .objective-section { display:block; padding:70px 0 76px; } .reveal-section .section-intro, .objective-heading { margin-bottom:42px; } .participant-grid { grid-template-columns:1fr; } .participant { min-height:156px; } .action-row { align-items:stretch; flex-direction:column; gap:10px; } .stage-count { line-height:1.5; } .objective-tabs { grid-template-columns:1fr; } .objective-tab { border-right:0; border-bottom:1px solid var(--pine); } .objective-tab:last-child { border-bottom:0; } .priority-result { min-height:290px; padding:24px; } .boundary-grid { grid-template-columns:1fr; gap:20px; margin-top:46px; } .closing-section { padding:80px 0 90px; } .disclosure { margin-top:54px; line-height:1.6; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }
