/* wallprintscale.com — global layer (_DESIGN-SYSTEM.md §0). Section styles live in each page. */
:root{
  --ink:#153B50; --ink-2:#0E2B3B; --mist:#E7F1F1; --paper:#F6F8F7; --white:#FFFFFF;
  --copper:#C7782B; --copper-ink:#9A5A1C; --line:rgba(21,59,80,.16); --muted:#4F6470;
  --radius:2px;
  --f-head:"Barlow Semi Condensed",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-body:1.0625rem; --fs-h3:1.2rem; --fs-lead:1.5rem;
  --fs-h2:clamp(1.7rem,2.6vw,2.35rem); --fs-num:clamp(2.2rem,3.4vw,2.9rem); --fs-h1:clamp(2.4rem,4.4vw,3.9rem);
  --py:88px; --cut:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.65;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--f-head);font-weight:700;line-height:1.12;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2);line-height:1.3} h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25}
p{margin:0 0 1em;text-wrap:pretty;max-width:70ch}
::selection{background:var(--copper);color:#fff}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
html{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.mono{font-family:var(--f-mono);font-weight:500}

/* containers: 1320 wide · 1160 standard · 920 narrow · full-bleed */
.wrap{width:min(100%,1160px);margin-inline:auto}
.wrap--wide{width:min(100%,1320px);margin-inline:auto}
.wrap--narrow{width:min(100%,920px);margin-inline:auto}

/* sections: every light section carries the 1px sheet border on top (drawing-sheet edge) */
.sec{position:relative;padding:var(--py) 16px;background-color:var(--paper);
  background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-size:100% 1px;background-position:top}
.sec--mist{background-color:var(--mist)}
.sec--white{background-color:var(--white)}
.sec--ink{background-color:var(--ink);background-image:none;color:#E7F1F1;isolation:isolate}
.sec--ink h2,.sec--ink h3,.sec--ink p,.sec--ink li{color:#F6F8F7}

/* shape dividers — only on dark⇄light edges, on the upper section */
.cut{z-index:2;padding-bottom:144px}
.cut + .sec{margin-top:-56px;padding-top:144px}
.cut--slant{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.cut--slant-r{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--cut)))}
.cut--notch{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),50% 100%,0 calc(100% - var(--cut)))}
.cut--step{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),64% calc(100% - var(--cut)),64% 100%,0 100%)}

/* photo bands: ink section + photo layer + scrim */
.band-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.band-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,43,59,.92) 0%,rgba(14,43,59,.84) 48%,rgba(14,43,59,.55) 100%)}

/* buttons — square corners, ink */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.3em;border-radius:var(--radius);font-family:var(--f-body);font-weight:600;font-size:var(--fs-body);text-decoration:none;border:1px solid var(--ink);line-height:1.2;transition:background-color .2s,color .2s,transform .2s}
.btn--p{background:var(--ink);color:#fff}
.btn--p:hover{background:var(--ink-2)}
.btn--s{background:transparent;color:var(--ink)}
.btn--s:hover{background:var(--ink);color:#fff}
.sec--ink .btn--p{background:var(--copper-ink);border-color:var(--copper-ink);color:#fff}
.sec--ink .btn--p:hover{background:#7E4915;border-color:#7E4915}
.sec--ink .btn--s{color:#fff;border-color:#E7F1F1}
.tlink{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--copper)}
.tlink::after{content:" \2192"}
.tlink:hover{color:var(--copper-ink)}
.sec--ink .tlink{color:#fff}

/* figure caption = drawing number box (FIG. xx) */
.fig{position:relative;margin:0}
.fig img{width:100%;border-radius:var(--radius)}
.figno{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-xs);letter-spacing:.04em;color:var(--muted);margin-top:.5em;display:block}
.figno b{color:var(--copper-ink);font-weight:500}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:var(--white);font-size:var(--fs-sm)}
.tbl th,.tbl td{border:1px solid var(--line);padding:.7em .9em;text-align:left;vertical-align:top}
.tbl thead th{background:var(--mist);font-family:var(--f-head);font-size:var(--fs-body);font-weight:600}

/* ruler divider (母题 刻度尺) */
.ruler{height:14px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 50px) bottom/100% 14px no-repeat;opacity:.35}

/* reveal (scroll-driven, falls back to visible) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:wps-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  }
}
@keyframes wps-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:768px){
  :root{--py:56px;--cut:32px}
  .cut{padding-bottom:88px}
  .cut + .sec{margin-top:-32px;padding-top:88px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 无图片 logo：移动端保留文字 wordmark（插件默认隐藏）— director 2026-11-03 */
@media (max-width:1279px){.dm-menu .dm-logo-text{display:inline!important;font-size:1.2rem;color:var(--ink)}}