* { box-sizing: border-box; }
html { scroll-padding-top: 20px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.8 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
p, h1, h2, h3, h4, ol, ul, dl, dd, figure { margin: 0; }
button, a, summary { color: inherit; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; } button, summary { cursor: pointer; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 4px; }
.sr-only { position: absolute; clip-path: inset(50%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; }
.skip { position: absolute; top: -5em; left: 1em; z-index: 5; background: var(--ink); color: var(--white); padding: .6em 1em; }
.skip:focus { top: 1em; }
.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--outer); }
.mast-row, nav, .end, .end>div { display: flex; align-items: center; }
.brand { display: block; flex-shrink: 0; line-height: 0; }
nav { gap: clamp(14px,2.6vw,40px); }
nav a { font-size: 15px; padding: 10px 0; white-space: nowrap; }
nav a:hover { color: var(--teal); }
.hero h1 { font: 600 clamp(34px,3.85vw,64px)/1.28 var(--serif); letter-spacing: -.052em; }
.hero-sub { max-width: 29em; margin-top: 24px; color: var(--secondary); font-size: clamp(16px,1.22vw,19px); line-height: 1.85; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:min(100%,23em); margin-top:30px; }
@container (min-width:31em) {
  .hero-actions { grid-template-columns:1fr 1fr 1.2fr 1fr; width:min(100%,38em); }
}
.action { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; padding:9px clamp(10px,1.2vw,18px); border-radius:3px; color:var(--white); font-size:15px; font-weight:550; white-space:nowrap; }
.action-intro { background:var(--entry-forest); }
.action-business { background:var(--entry-jade); }
.action-partner { background:var(--entry-seaglass); color:var(--entry-dark-ink); }
.action-about { background:var(--entry-mint); color:var(--entry-dark-ink); }
.action:hover { filter:brightness(.93); }
.hero-actions i { font: normal 17px/1 var(--sans); }
.region { padding-block: var(--region-space); }
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: var(--teal); font-size: 14px; font-weight: 600; letter-spacing: .10em; }
.label::before { content: ""; width: 28px; height: 3px; background: currentColor; }
h2 { font: 600 clamp(31px,3.05vw,50px)/1.28 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.minor { font: 600 clamp(22px,1.95vw,32px)/1.45 var(--serif); letter-spacing: -.03em; }
h4 { font: 600 19px/1.55 var(--sans); }
.lead { color: var(--secondary); }
.lead { margin-top: 18px; max-width: 48em; }
.work-grid { display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(32px,6.2vw,96px); }
.work-grid .minor { margin-bottom: 18px; }
.records,.guardrails { border-top: 1px solid var(--line-strong); }
.records details,.guardrails li { border-bottom: 1px solid var(--line); }
.records summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 13px 0; cursor: pointer; list-style: none; font-weight: 550; }
.records summary::-webkit-details-marker { display: none; }
.records summary:hover { color: var(--teal); }
.plus { position: relative; width: 16px; height: 16px; flex: none; color: var(--teal); }
.plus::before,.plus::after { content: ""; position: absolute; top: 7px; left: 1px; right: 1px; height: 1.5px; background: currentColor; }
.plus::after { transform: rotate(90deg); } details[open]>summary .plus::after { display: none; }
.detail-body { padding: 0 18px 18px 0; }
.ways,.guardrails { list-style:none; margin:0; padding:0; }
.guardrails p { font-size:16px; }
.ways { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,2.8vw,40px); }
.ways li { border-top: 2px solid var(--teal); padding-top: 14px; }
.ways p,.guardrails p { margin-top: 7px; }
.ways h3 { font-size: clamp(19px,1.55vw,25px); }
@media(min-width:721px) {
  .work .ways { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.work-grid { margin-top: clamp(42px,4.8vw,74px); }
.guardrails li { padding-block: 13px; }
.guardrails h3 { font-size: 16px; }
.contact { align-self: start; border-top: 1px solid var(--line-strong); padding-top: 12px; }
.contact dl { margin-top: 14px; }
.contact dl>div { display: grid; grid-template-columns: 80px 1fr; border-bottom: 1px solid var(--line); padding-block: 10px; }
.end { border-top: 1px solid var(--line); min-height: 70px; justify-content: space-between; gap: 10px; font-size: 13px; }
.end>div { gap: 20px; flex-wrap: wrap; }
.review-only,.editor-note,.draft-note { display: none; }
.todo:has(>.draft-note)::before { content: "待补充"; color: var(--secondary); font-size: .9em; }
.team ul { padding-left: 1.4em; }
@media(max-width:900px) {
  .mast-row { min-height: 76px; }
  .hero h1 { font-size: clamp(29px,4.1vw,40px); }
  .work-grid { gap: 32px; }
}
@media(max-width:720px) {
  .mast-row { min-height: 67px; gap: 10px; }
  nav { gap: clamp(8px,2vw,15px); }
  nav a { min-height: 48px; display: flex; align-items: center; font-size: clamp(14px,4.25vw,17px); }
  .hero { display: flex; flex-direction: column; }
  .hero h1 { font-size: clamp(30px,7.65vw,48px); }
  .hero-sub { margin-top: 17px; }
  .hero-actions { margin-top:20px; }
  .work-grid { grid-template-columns: minmax(0,1fr); }
  .work-grid { gap:38px; }
  .ways { grid-template-columns: 1fr; gap: 15px; }
  .ways li { padding-top: 10px; }
  .label { margin-bottom: 10px; }
  .records summary { min-height: 53px; }
  .end>div { gap: 12px; }
}
@media(max-width:410px) {
  .hero-sub { font-size: 15px; }
}
@media(prefers-reduced-motion:no-preference) { .records summary { transition:color .16s,background .16s; } .action { transition:filter .16s; } }
/* A single visible view; hash links also work as basic navigation without script. */
[hidden] { display: none !important; }
html:not(.routing) main:has(> .view:target) > .view:not(:target),
html:not(.routing) main:not(:has(> .view:target)) > .view:not(#top) { display:none; }
body[data-tone="mist"] .end { display:none; }
html:not(.routing) body:has(main > .region:target) .end { display:flex; }
html { scroll-padding-top: var(--mast-height); scrollbar-gutter: stable; }
html.routing { scroll-padding-top: 0; }
html.routing main > .view { scroll-margin-top:var(--mast-height); }
main:focus, .view h1:focus { outline:none; }
.ink-filters { position:absolute; pointer-events:none; }
.mast { position:sticky; z-index:5; top:0; background:var(--paper); border:0; }
.mast-row { min-height:var(--mast-height); justify-content:space-between; gap:18px; }
.brand { width:clamp(150px,14vw,202px); position:relative; mix-blend-mode:multiply; }
.brand .brand-type { width:100%; height:auto; clip-path:inset(0 0 0 32.053422%); }
.brand-symbol {
  position:absolute; inset:0 auto 0 0; width:32.053422%;
  background:url("../assets/tidephase-mist-zh02.png") left center / 311.979167% 100% no-repeat;
  filter:var(--mark-filter,none);
}
/* On the home view all four links sit below the introduction. */
:is(html.routing body[data-tone="mist"], html:not(.routing) body:not(:has(main > .region:target))) {
  --section-links-display:none;
  --compact-mast-height:68px;
}
.section-links { display:var(--section-links-display,flex); }
nav a { position:relative; }
nav a[aria-current="page"] { color:var(--deep); font-weight:650; }
nav a[aria-current="page"]::after { content:""; position:absolute; right:0; left:0; bottom:5px; height:2px; background:var(--sea); }
.hero, .view-opening { position:relative; isolation:isolate; overflow:hidden; background:var(--paper); }
.hero-art, .view-art { pointer-events:none; position:absolute; z-index:-1; inset:0 0 0 32%; }
.hero-art img, .view-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:55% 57%; }
/* Fade the painting itself. Curved, independently placed top and bottom edges
   ease into the original pigment instead of meeting it along two straight lines. */
.hero-art, .view-art {
  --outer-edge: #000 64%, rgb(0 0 0 / .993) 66%, rgb(0 0 0 / .960) 69%,
    rgb(0 0 0 / .898) 72%, rgb(0 0 0 / .812) 75%, rgb(0 0 0 / .697) 78%,
    rgb(0 0 0 / .565) 81%, rgb(0 0 0 / .430) 84%, rgb(0 0 0 / .300) 87%,
    rgb(0 0 0 / .184) 90%, rgb(0 0 0 / .095) 93%, rgb(0 0 0 / .032) 96%,
    rgb(0 0 0 / .008) 98%, transparent 100%;
  --side-edge: transparent, rgb(0 0 0 / .016) 6%, rgb(0 0 0 / .08) 14%,
    rgb(0 0 0 / .23) 23%, rgb(0 0 0 / .50) 34%, rgb(0 0 0 / .77) 45%,
    rgb(0 0 0 / .92) 54%, rgb(0 0 0 / .984) 62%, #000 68%;
  --left-fade: linear-gradient(to right, var(--side-edge));
  --top-fade: radial-gradient(ellipse 134% 100% at 89% 100%, var(--outer-edge));
  --art-mask: var(--left-fade), var(--top-fade);
  -webkit-mask-image: var(--art-mask);
  mask-image: var(--art-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-inner { min-height:calc(100vh - var(--mast-height)); min-height:calc(100svh - var(--mast-height)); display:flex; align-items:center; }
.hero-type { container-type:inline-size; width:min(57%,760px); padding-block:clamp(42px,6vw,95px); }
.hero-sub { max-width:28em; }
.region { padding:0 0 var(--region-space); background:var(--paper); color:var(--ink); }
.view-opening { display:flex; align-items:center; min-height:clamp(275px,30vw,438px); }
.opening-copy { position:relative; width:min(54%,640px); padding-block:clamp(40px,5vw,76px); }
.opening-copy h1 { font:600 clamp(34px,3.55vw,57px)/1.24 var(--serif); letter-spacing:-.045em; text-wrap:balance; }
.view-art {
  left:38%;
  --bottom-fade: radial-gradient(ellipse 157% 100% at 61% 0%, var(--outer-edge));
  --art-mask: var(--left-fade), var(--top-fade), var(--bottom-fade);
}
/* Keep the violet sky and blue diagonal visible in the rain painting. */
.about .view-art img { object-position:55% 36%; }
.about .view-art {
  --rim: 24%;
  --outer-edge: #000 calc(100% - var(--rim)),
    rgb(0 0 0 / .98) calc(100% - .90 * var(--rim)),
    rgb(0 0 0 / .90) calc(100% - .78 * var(--rim)),
    rgb(0 0 0 / .71) calc(100% - .63 * var(--rim)),
    rgb(0 0 0 / .50) calc(100% - .50 * var(--rim)),
    rgb(0 0 0 / .29) calc(100% - .37 * var(--rim)),
    rgb(0 0 0 / .10) calc(100% - .22 * var(--rim)),
    rgb(0 0 0 / .02) calc(100% - .10 * var(--rim)), transparent 100%;
  --side-edge: transparent, rgb(0 0 0 / .025) 5%, rgb(0 0 0 / .13) 10%,
    rgb(0 0 0 / .31) 15%, rgb(0 0 0 / .54) 20%, rgb(0 0 0 / .76) 25%,
    rgb(0 0 0 / .92) 31%, rgb(0 0 0 / .985) 37%, #000 42%;
}
.view-opening .lead { max-width:32em; }
.region .page-body { padding-top:clamp(26px,3.5vw,56px); }
/* Long-form reading measure for the factory introduction. */
.intro-body { padding-top:clamp(28px,4vw,64px); }
.intro-section {
  display:grid;
  grid-template-columns:minmax(13rem,18rem) minmax(0,38em);
  gap:clamp(32px,5vw,80px);
  justify-content:space-between;
  max-width:1120px;
  margin-inline:auto;
  padding-block:clamp(32px,4.4vw,64px);
  border-top:1px solid var(--line);
  font-size:clamp(17px,1.3vw,19px);
  line-height:1.9;
}
.intro-section:last-child { padding-bottom:0; }
.intro-section h2 {
  font:600 clamp(23px,2vw,31px)/1.45 var(--serif);
  letter-spacing:-.025em;
  text-wrap:balance;
}
.intro-paragraphs p + p { margin-top:1em; }
@media (max-width:900px) {
  .intro-section { grid-template-columns:minmax(0,1fr); max-width:38em; gap:16px; }
}
/* Shared spacing for the fourth-edition content. */
.report-body { padding-top:clamp(30px,4.3vw,68px); }
.report-block + .report-block, .about .contact { margin-top:clamp(42px,5.8vw,84px); }
.block-title { max-width:30em; margin-bottom:clamp(20px,2.5vw,38px); font:600 clamp(25px,2.6vw,40px)/1.38 var(--serif); }
.report-steps { list-style:decimal-leading-zero; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,46px); padding:0; counter-reset:steps; }
.report-steps li { display:block; border-top:1px solid var(--line-strong); padding-top:12px; counter-increment:steps; }
.report-steps h3::before { content:counter(steps,decimal-leading-zero); color:var(--teal); font:500 14px var(--sans); margin-right:10px; }
.report-body h3 { text-wrap:balance; }
.report-steps h3 { font-weight:600; font-size:clamp(18px,1.6vw,24px); }
.report-steps p { margin-top:8px; }
.casebook { max-width:68rem; }
.factory-case {
  display:grid;
  grid-template-columns:minmax(14rem, 1fr) minmax(0, 39em);
  column-gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.factory-case + .factory-case {
  margin-top:clamp(32px, 3.5vw, 54px);
  padding-top:clamp(32px, 3.5vw, 54px);
  border-top:1px solid var(--line);
}
.factory-case h3 { font:600 clamp(22px, 1.9vw, 29px)/1.45 var(--serif); }
.case-story { line-height:1.9; }
.case-story p + p { margin-top:.85em; }
@media(max-width:1050px) {
  .report-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .factory-case { grid-template-columns:minmax(0,39em); row-gap:14px; }
}
@media(max-width:720px) {
  .report-steps { grid-template-columns:1fr; gap:15px; }
}
.hero-phrase { display:inline-block; }
.heading-latin { position:relative; top:.08em; }
.about .contact { max-width:43em; }
.about .page-body { min-height:200px; }
.end { background:var(--paper); }
@media(max-width:900px) {
  :root { --mast-height:76px; }
  .hero h1 { font-size:clamp(32px,4.1vw,40px); }
}
@media(max-width:720px) {
  :root { --mast-height:78px; }
  .mast-row { min-height:var(--mast-height); }
  .brand { width:116px; }
  nav { gap:clamp(8px,2vw,14px); }
  .hero, .hero-inner { display:flex; }
  .hero { flex-direction:column; }
  .hero-inner { align-items:flex-start; flex:1; }
  .hero-type { width:100%; padding:clamp(38px,7svh,78px) 0 clamp(190px,35svh,350px); }
  .hero h1 { font-size:clamp(30px,7.4vw,48px); }
  .hero-art { position:absolute; inset:28% 0 0; }
  .hero-art { --top-fade:linear-gradient(to bottom,var(--side-edge)); }
  .view-opening { flex-direction:column; align-items:stretch; min-height:0; }
  .opening-copy { width:100%; padding-block:31px 0; }
  .opening-copy h1 { font-size:clamp(30px,7.1vw,40px); }
  .view-opening .lead { margin-top:14px; }
  .view-art { position:relative; order:2; inset:auto; height:clamp(125px,28vw,200px); margin-top:10px; z-index:0; }
  .hero-art, .view-art { --left-fade:linear-gradient(to right, rgb(0 0 0 / .60), rgb(0 0 0 / .82) 35%, rgb(0 0 0 / .98) 65%, #000 77%); }
  .about .view-art {
    --left-fade: linear-gradient(to right, rgb(0 0 0 / .86), rgb(0 0 0 / .94) 13%, #000 30%);
  }
  .region .page-body { padding-top:25px; }
}
@media(max-width:550px) {
  body { --mast-height:var(--compact-mast-height,132px); }
  .mast-row {
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
    padding-block:22px 6px;
    padding-inline:clamp(16px,5vw,24px);
  }
  .brand { width:126px; }
  .section-links { justify-content:space-between; gap:0; }
  .section-links a { justify-content:center; min-width:44px; }
}
@media(max-width:450px) {
  .hero-sub { text-wrap:balance; }
  .hero-actions .action { gap:6px; padding-inline:10px; font-size:14px; }
  .hero-actions i { font-size:15px; }
}
@media(max-height:520px) and (max-width:900px) {
  .mast { position:relative; }
  .hero-type { padding-block:26px; }
  .hero-art { inset:0 0 0 34%; }
}
@media(prefers-reduced-motion:no-preference) {
  .section-links { view-transition-name:tide-sections; animation:nav-arrive 280ms var(--page-ease) both; }
  ::view-transition-new(tide-sections):only-child { animation:nav-arrive 300ms var(--page-ease) both; }
  ::view-transition-old(tide-sections):only-child { animation:nav-arrive 160ms ease-in reverse both; }
  @keyframes nav-arrive { from {opacity:0;transform:translateY(-6px);} to {opacity:1;transform:translateY(0);} }
  .mast { view-transition-name:tide-header; }
  .brand-symbol { view-transition-name:tide-symbol; }
  ::view-transition { pointer-events:none; }
  ::view-transition-group(*) { animation-duration:360ms; animation-timing-function:var(--page-ease); }
  ::view-transition-old(root) { animation:tide-recede 210ms ease-in both; }
  ::view-transition-new(root) { animation:tide-arrive 360ms var(--page-ease) both; }
  ::view-transition-old(tide-header) { animation:none; opacity:0; }
  ::view-transition-new(tide-header) { animation:none; }
  @keyframes tide-recede { to {opacity:0;transform:translateX(-5px);} }
  @keyframes tide-arrive { from {opacity:0;transform:translateX(10px);} }
}