@charset "UTF-8";
:root {
  --paper:#f3f1eb; --ink:#243a31; --text:#303e35; --muted:#607066; --line:#d1d6cc; --accent:#ae7c46;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --pad:clamp(15px,4vw,72px); --header-size:clamp(55px,9dvh,84px);
}
* {box-sizing:border-box}
html,body {margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--text);font:15px/1.55 var(--sans)}
body {overscroll-behavior:none}
[hidden] {display:none!important}
a {color:inherit;text-decoration:none} button,input {font:inherit} button {cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible {outline:2px solid #a47436;outline-offset:-2px}
img {display:block;max-width:100%} h1,h2,h3,p,figure {margin:0}
.site-shell {height:100%;height:100dvh;display:grid;grid-template-rows:calc(var(--header-size) + env(safe-area-inset-top)) minmax(0,1fr);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.app-header {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 var(--pad);padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line)}
.signature {display:flex;align-items:center;gap:9px} .signature b {font:700 clamp(23px,2.3vw,35px)/1 var(--serif);letter-spacing:.08em}
.signature i {width:21px;height:24px;border:1.3px solid var(--ink);background:linear-gradient(90deg,transparent 33%,var(--ink) 33% 38%,transparent 38%),linear-gradient(transparent 42%,var(--ink) 42% 48%,transparent 48%)}
.signature>span {border-left:1px solid var(--line);padding-left:15px;margin-left:5px;font-size:12px;color:var(--muted);letter-spacing:.12em}
.global-nav {display:flex;gap:clamp(7px,2vw,35px);align-items:center}
.global-nav a {min-height:42px;padding:10px 3px;position:relative;display:grid;align-items:center;font-size:14px}
.global-nav a[aria-current]::after {content:"";position:absolute;bottom:6px;left:3px;right:3px;height:2px;background:var(--accent)}
.main-view {height:100%;min-height:0;min-width:0;position:relative;outline:none}
.main-view>section {min-width:0}
.landing-screen {height:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);gap:clamp(18px,4vw,80px);align-items:center;padding:clamp(16px,4dvh,48px) var(--pad)}
.landing-copy {min-width:0}
.company {font-size:clamp(12px,1vw,15px);letter-spacing:.1em;color:var(--muted)}
.landing-copy h1 {font:400 clamp(40px,5.2vw,86px)/1.18 var(--serif);letter-spacing:-.04em;color:var(--ink);margin:clamp(8px,2dvh,24px) 0 clamp(14px,4dvh,40px)}
.landing-copy h1 span {color:var(--accent)}
.landing-entries {width:min(100%,310px);display:grid}
.landing-entries a {min-height:44px;display:flex;justify-content:space-between;align-items:center;padding:clamp(8px,1.65dvh,18px) 12px;border-bottom:1px solid var(--line);font-size:15px}
.landing-entries a:hover {background:#e5e8df}
.landing-entries .main-entry {color:var(--paper);background:var(--ink);border:0;padding-inline:16px}
.landing-entries .main-entry:hover {background:#385244}
.landing-feature {width:100%;height:min(100%,680px);display:grid;grid-template-rows:minmax(0,1fr) 48px;min-height:0;background:#22372c;color:#fff}
.landing-image {position:relative;min-height:0;isolation:isolate}
.landing-image>img {width:100%;height:100%;object-fit:cover}
.landing-image::before {content:"";position:absolute;inset:40% 0 0;z-index:1;background:linear-gradient(transparent,#0e1d14b8);pointer-events:none}
.landing-image::after {content:"";position:absolute;top:17px;left:17px;width:21px;height:21px;border-top:1px solid #fffd;border-left:1px solid #fffd;pointer-events:none}
.landing-caption {position:absolute;z-index:2;bottom:clamp(15px,3dvh,36px);left:clamp(16px,3vw,38px);right:clamp(16px,3vw,38px);display:flex;align-items:end;justify-content:space-between;gap:12px}
.landing-caption small {font-size:12px;letter-spacing:.12em}.landing-caption strong {display:block;font:400 clamp(25px,3.8vw,60px)/1.18 Georgia,var(--serif);overflow-wrap:anywhere}
.landing-caption>span {white-space:nowrap;padding:5px 11px;border:1px solid #fff8;border-radius:22px;font-size:12px;background:#18251e65}
.landing-switches {display:grid;grid-template-columns:repeat(3,1fr)}
.landing-switches button {background:none;border:0;color:#d4ddd7;font-size:13px}
.landing-switches button::before {content:"";display:inline-block;width:8px;height:2px;margin:0 7px 3px 0;background:#85998a;transition:width .25s}
.landing-switches button[aria-pressed=true] {color:#fff}
.landing-switches button[aria-pressed=true]::before {background:#e4bc89;width:20px}
.case-screen {height:100%;padding:clamp(8px,2dvh,24px) var(--pad);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(5px,1.3dvh,16px)}
.case-heading {display:flex;align-items:center;gap:8px 18px;justify-content:space-between}
.case-heading h1 {font:400 clamp(18px,2.7vw,42px)/1.25 var(--serif);overflow-wrap:anywhere}
.case-back,.case-details {background:none;border:1px solid var(--line);font-size:13px;white-space:nowrap;min-height:36px;padding:5px 12px;display:inline-flex;align-items:center;justify-content:center}
.case-back:hover,.case-details:hover {background:#e5e9df}
.case-heading-text {flex:1;min-width:0}
.case-photo {position:relative;min-height:0;width:100%;border:0;padding:0;cursor:zoom-in;display:block;background:#1d2a23;overflow:hidden}
.case-photo img {width:100%;height:100%;object-fit:contain}
.case-photo .zoom-mark {position:absolute;bottom:9px;right:12px;font:12px/1.6 var(--sans);color:white;background:#14231acf;padding:3px 9px}
.case-controls {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 15px}
.case-caption {font-size:clamp(11px,1vw,15px);line-height:1.45}
.case-controls nav {display:flex;align-items:center;gap:6px}
.case-controls nav button {width:40px;height:38px;background:none;border:1px solid #acb6aa;font-size:21px}
.case-controls output {min-width:46px;text-align:center;font:12px/1.6 Consolas,monospace}
.case-info {grid-row:2;align-self:center;justify-self:center;width:min(690px,100%);display:grid;gap:clamp(6px,2dvh,20px);color:var(--ink)}
.case-info p {line-height:1.7}.case-info dl {display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin:0}.case-info dt {color:var(--muted)}.case-info dd {margin:0}
.case-info a {text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px) and (orientation:portrait) {
  .signature>span {display:none}.global-nav {gap:13px}.global-nav a {font-size:13px}
  .landing-screen {grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:clamp(9px,2.6dvh,22px);padding-block:clamp(9px,2dvh,18px)}
  .landing-copy h1 {font-size:clamp(30px,5.8dvh,49px);margin:5px 0 clamp(8px,1.5dvh,15px)}
  .landing-entries {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
  .landing-entries a,.landing-entries .main-entry {font-size:13px;padding:7px 8px;min-height:39px}
  .landing-feature {grid-template-rows:minmax(0,1fr) 43px;height:100%}
  .case-heading {flex-wrap:wrap;gap:5px 10px}
  .case-heading-text {order:3;flex-basis:100%}.case-heading h1 {font-size:clamp(18px,5.2vw,28px)}
  .case-controls {grid-template-columns:1fr}.case-controls nav {justify-self:center}
  .case-info {font-size:14px}
}
@media(max-height:490px) and (orientation:landscape) {
  :root {--header-size:40px;--pad:clamp(12px,2.7vw,34px)}
  .signature b {font-size:22px}.signature i {height:19px;width:17px}.global-nav a {min-height:34px;padding-block:3px}
  .landing-screen {padding-block:9px}.landing-copy h1 {font-size:clamp(27px,7.2dvh,42px);margin:6px 0 10px}
  .landing-entries a {min-height:31px;padding-block:3px}.landing-feature {grid-template-rows:minmax(0,1fr) 33px}
  .case-heading h1 {font-size:22px}.case-back,.case-details {min-height:28px}.case-controls nav button {height:30px}
  .case-info {font-size:12px;gap:4px}.case-info p {line-height:1.4}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important}}