@font-face{
  font-family:"Noto Serif SC";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("static/fonts/NotoSerifSC-Latin-Variable.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --ink:#ffffff;        /* soft beige ground */
  --ink-soft:#f7f4f0;
  --paper:#0d1a2e;      /* deep navy */
  --paper-dim:#2d4a6a;  /* muted navy */
  --paper-faint:#6a8aaa;/* faint blue-gray */
  --line:#b0c4d8;       /* blue hairline */
  --accent:#0d1a2e;
  --pad-x:6%;
  --pad-y:clamp(3rem,5vh,5rem);
  /* ── x-pattern knobs ── */
  --x-size:4;           /* half-length of each stroke (px) */
  --x-stroke:0.4;       /* line thickness (px) */
  --x-spread:15;        /* tile / spacing between x's (px) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;cursor:none}
.circle{position:fixed;top:0;left:0;width:12px;height:12px;background:#fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:exclusion}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
/* x-pattern drawn on canvas */
#xCanvas{position:fixed;inset:0;pointer-events:none;z-index:1}
/* film grain */
body::after{
  content:"";
  position:fixed;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:2;
  opacity:0.35;
  mix-blend-mode:multiply;
}
.wrap{position:relative;z-index:3}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:2.346rem 5%;color:var(--paper);transition:padding .3s ease,background .3s ease,box-shadow .3s ease}
nav.scrolled{background:rgba(255,255,255,0.55);backdrop-filter:blur(4.8px);-webkit-backdrop-filter:blur(4.8px);padding:1.673rem 5%;box-shadow:0 1px 0 var(--line)}
nav.scrolled .mark .logo-inline{height:1.630rem}
nav .mark{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:700;font-size:1rem;letter-spacing:.35em;text-transform:uppercase}
nav .idx{font-size:.88rem;letter-spacing:.3em;color:var(--paper-dim);text-transform:uppercase;font-weight:600}

section{position:relative;padding:0 var(--pad-x);max-width:1600px;margin:0 auto}
.sp{height:200px;background:transparent}
.label-r{flex-direction:row-reverse}
.x-zone{flex:0 0 225px;width:225px;height:225px;pointer-events:none;border:1px solid var(--line);display:block}
.x-zone-wrap{flex:1;display:flex;justify-content:center;align-items:center}
#tree-01{width:600px;height:450px;border:none}
#maze-02{width:410px;height:410px;flex:0 0 410px;margin-left:2rem;border:none}
.content{display:flex;align-items:center;flex-wrap:wrap;gap:4rem;width:100%}
.content-center{justify-content:center}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:100vh;padding:0 var(--pad-x)}
.hero .eyebrow{font-size:1.4rem;letter-spacing:.55em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:2.4rem}
.hero h1{
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:700;
  font-size:clamp(2.2rem,6.6vw,5.5rem);
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.logo-inline{display:inline-block;height:1.1em;vertical-align:middle}
.logo-inline svg,.logo-inline img{height:100%;width:auto;display:block}
nav .mark{display:flex;align-items:center}
nav .mark .logo-inline{height:2.061rem;transition:height .3s ease}
.closing .logo-inline{height:clamp(8.4rem,19.6vw,15.4rem)}
.hero .rule{width:1px;height:0;background:var(--paper-faint);margin:2.2rem auto}
.hero .tag{
  max-width:34rem;
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  letter-spacing:.05em;
  color:var(--paper-dim);
  line-height:1.9;
}
.hero .tag em{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-style:italic;color:var(--paper);font-size:.95rem}
.scrollcue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);font-size:.72rem;letter-spacing:.4em;color:var(--paper-faint);text-transform:uppercase}
.scrollcue span{display:block;text-align:center;margin-top:.6rem;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

/* generic content section */
.label{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:0}
.label .num{font-size:.88rem;letter-spacing:.3em;color:var(--paper-faint);font-weight:600}
.label .name{font-size:.92rem;letter-spacing:.45em;text-transform:uppercase;color:var(--paper-dim);font-weight:600}
.label .ln{flex:1;height:1px;background:var(--line)}

.statement{flex:1 1 18rem;max-width:54rem}
.statement h2{
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:500;
  font-size:clamp(2rem,5.5vw,4.2rem);
  line-height:1.04;
  letter-spacing:.01em;
  margin-bottom:2.2rem;
}
.statement h2 .it{font-style:italic;color:var(--paper-dim)}
.statement p{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.95;
  color:var(--paper-dim);
  max-width:40rem;
  font-weight:400;
}
.statement p strong{color:var(--paper);font-weight:700}

/* split: heading left, body right on same row */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;max-width:72rem;margin:0 auto;width:100%}
.split h2{
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:500;
  font-size:clamp(2rem,5.5vw,4.2rem);
  line-height:1.04;
  letter-spacing:.01em;
}
.split h2 .it{font-style:italic;color:var(--paper-dim)}
.split p{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.95;
  color:var(--paper-dim);
  font-weight:400;
  padding-top:.6rem;
}
.split p strong{color:var(--paper);font-weight:700}

/* centered-statement: big centered heading, small centered body */
.centered{text-align:center;max-width:54rem;margin:0 auto}
.centered h2{
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:500;
  font-size:clamp(2rem,5.5vw,4.2rem);
  line-height:1.04;
  letter-spacing:.01em;
  margin-bottom:2.2rem;
}
.centered h2 .it{font-style:italic;color:var(--paper-dim)}
.centered p{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.95;
  color:var(--paper-dim);
  font-weight:400;
  max-width:32rem;
  margin:0 auto;
}
.centered p strong{color:var(--paper);font-weight:700}

/* sec-03 flanking border containers */
.sec-03 .content{flex-wrap:nowrap;align-items:stretch}
.sec-03 .centered{padding-block:4rem}
.flanker{flex:1 1 0;min-width:8rem;background:
  linear-gradient(var(--paper-dim),var(--paper-dim)) top left/20px 1.5px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) top left/1.5px 20px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) top right/20px 1.5px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) top right/1.5px 20px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) bottom left/20px 1.5px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) bottom left/1.5px 20px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) bottom right/20px 1.5px no-repeat,
  linear-gradient(var(--paper-dim),var(--paper-dim)) bottom right/1.5px 20px no-repeat}

/* right-aligned statement */
.statement-right{flex:1 1 18rem;max-width:54rem;text-align:right}
.statement-right .label{justify-content:flex-end}
.statement-right h2{
  font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;
  font-weight:500;
  font-size:clamp(2rem,5.5vw,4.2rem);
  line-height:1.04;
  letter-spacing:.01em;
  margin-bottom:2.2rem;
}
.statement-right h2 .it{font-style:italic;color:var(--paper-dim)}
.statement-right p{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.95;
  color:var(--paper-dim);
  font-weight:400;
  max-width:40rem;
  margin-left:auto;
}
.statement-right p strong{color:var(--paper);font-weight:700}

/* triptych */
.trip-head{text-align:center;margin-bottom:1rem}
.trip-head .num{font-size:.88rem;letter-spacing:.3em;color:var(--paper-faint);font-weight:600}
.trip-head h2{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:.02em;margin-top:.6rem}
.trip-head .sub{font-size:.92rem;letter-spacing:.4em;text-transform:uppercase;color:var(--paper-dim);font-weight:600;margin-top:1rem}
.triptych{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0;background:transparent}
.trip-num{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 .8rem;font-size:.88rem;letter-spacing:.3em;color:var(--paper-faint);font-weight:600}
.trip-resolve{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;border:1px solid var(--line);margin-top:-1px;padding:3.2rem 2.8rem;width:100%;text-align:left}
.trip-resolve h2{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;letter-spacing:.01em;margin:0}
.trip-resolve h2 .it{font-style:italic;color:var(--paper-dim)}
.trip-resolve p{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.85;color:var(--paper-dim);font-weight:400;margin:0}
.panel{padding:0 2.5rem 3.5rem;background:transparent;min-height:28rem;display:flex;flex-direction:column;text-align:center}
.panel .pnum{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-style:italic;font-size:4rem;color:var(--paper-faint);margin-bottom:1.4rem;line-height:1}
.panel h3{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:.01em;margin-bottom:1.4rem}
.panel p{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.85;color:var(--paper-dim);font-weight:400}
.panel .resolve{margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.88rem;line-height:1.8;color:var(--paper);font-style:normal}
.panel .resolve::before{content:"↳ ";color:var(--paper-faint)}

/* counterweight band */
.counterweight-band{min-height:auto;margin-top:0;margin-bottom:0;max-width:100%;padding:0;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.counterweight-inner{background:var(--paper);color:var(--ink);text-align:center;padding:clamp(4rem,8vh,7rem) var(--pad-x);}
.counterweight-inner h2{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:.01em;margin-bottom:2rem;color:var(--ink)}
.counterweight-inner h2 .it{font-style:italic;color:var(--line)}
.counterweight-inner p{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.9;color:var(--line);max-width:57rem;margin:0 auto}
.counterweight-inner p strong{color:var(--ink-soft);font-weight:700}

/* craft */
.craft-wrap{display:flex;flex-direction:column;gap:3.5rem;width:100%}
.craft-h2{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(2rem,5.5vw,4.2rem);line-height:1.04;letter-spacing:.01em;margin:0 auto;width:100%;max-width:64rem}
.craft-h2 .it{font-style:italic;color:var(--paper-dim)}
.craft-split{display:flex;gap:4rem;width:100%;max-width:64rem;align-items:stretch;margin:0 auto}
.craft-list{display:flex;flex-direction:column;gap:0;flex-shrink:0;border-right:1px solid var(--line);padding-right:3rem;text-align:center}
.craft-link{padding:1.2rem 0;cursor:pointer;border-bottom:1px solid var(--line)}
.craft-link:first-child{border-top:1px solid var(--line)}
.craft-link h3{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:500;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:.02em;color:var(--paper-dim);transition:color .3s}
.craft-link:hover h3{color:var(--paper)}
.craft-display{flex:1;display:grid;grid-template-areas:"stack";align-items:center}
.craft-text{grid-area:stack;opacity:0;transition:opacity .4s;font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.85;color:var(--paper-dim);font-weight:400}
.craft-text.active{opacity:1}

/* closing */
.coda-group{display:flex;flex-direction:column;height:100vh}
.closing{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:0 var(--pad-x);flex:1;min-height:0}
.closing .eyebrow{font-size:.88rem;letter-spacing:.5em;text-transform:uppercase;color:#16130d;font-weight:600;margin-bottom:2.4rem}
.closing h2{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-weight:700;font-size:clamp(2rem,7vw,5.5rem);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.closing .creed{display:flex;gap:2.4rem;justify-content:center;margin-top:2.8rem;flex-wrap:wrap}
.closing .creed span{font-family:"Noto Serif SC","SimSun","宋体","Songti SC",serif;font-style:italic;font-size:1.1rem;letter-spacing:.08em;color:#16130d}
.closing .creed span::before{content:""}
footer{padding:2.4rem 6%;text-align:center;font-size:.84rem;letter-spacing:.35em;text-transform:uppercase;color:var(--paper);font-weight:600;border-top:1px solid var(--line)}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

@media(max-width:760px){
  nav{padding:2.746rem 4%}
  nav .idx{display:none}
  section{padding:0 4%}
  .split{grid-template-columns:1fr;gap:1.6rem}
  .triptych{grid-template-columns:1fr}
  .trip-resolve{grid-template-columns:1fr;gap:1.6rem}
  .panel{min-height:auto}
  .closing .creed{gap:.4rem;flex-direction:column}
  .closing .creed span::before{content:""}
  .craft-split{flex-direction:column;gap:2rem}
  .craft-list{border-right:none;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:1rem}
  .craft-display{min-height:8rem}
  .craft-text{transition:none}
  .content{flex-direction:column;gap:2rem}
  .flanker{min-height:8rem;min-width:100%}
  .statement-right{text-align:left}
  .x-zone-wrap{width:100%}
  #tree-01{width:100%;height:300px}
  #maze-02{flex:none;width:205px;height:205px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scrollcue span{animation:none}
  html{scroll-behavior:auto}
}