/* Licensed, locally served webfonts. The subset notices travel with the files. */
@font-face{font-family:"Manrope";src:url("./fonts/manrope-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0020-024F,U+2000-206F,U+20AC}
@font-face{font-family:"JK Text";src:url("./fonts/jk-text.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{--sans:"Manrope","JK Text","Microsoft YaHei","PingFang SC",sans-serif;--mono:"Manrope","JK Text",sans-serif;--display:"JK Text","Microsoft YaHei","PingFang SC",sans-serif}
body{font-synthesis:none;letter-spacing:.012em}
.mark{display:inline-block;flex-shrink:0;width:auto;min-width:48px;height:auto;background:none;color:var(--ink);padding:0;font-family:"Manrope",sans-serif;font-size:36px;font-weight:800;letter-spacing:-.07em;line-height:1.2;border-radius:0}
.brand-dot{color:var(--accent)}
.wordmark{gap:14px;font-weight:600;letter-spacing:.025em}
.site-header nav{font-weight:500;letter-spacing:.035em}
.scene-headline h1{font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-weight:900;letter-spacing:-.08em}
/* Keep native text metrics, draw its outline through the SVG vector renderer. */
.scene-headline{will-change:auto}
.scene-headline h1 .hero-outline{position:relative;-webkit-text-stroke:0}
.hero-outline-source{visibility:hidden}
.hero-outline svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-outline text{font:inherit;letter-spacing:inherit;fill:none;stroke:var(--hero-outline-color,#bac5af);stroke-width:1.3px;stroke-linejoin:round;paint-order:stroke;shape-rendering:geometricPrecision;text-rendering:geometricPrecision;-webkit-text-stroke:0}
[data-theme=light]{--hero-outline-color:#637159}
[data-theme=blueprint]{--hero-outline-color:#1746ef}
h2{font-family:var(--display);font-weight:750;letter-spacing:-.04em;line-height:1.3;padding-bottom:.08em}
.story-copy h2{font-size:clamp(30px,3.4vw,40px);font-weight:750;line-height:1.3;letter-spacing:-.035em;margin-bottom:15px;padding-bottom:.04em}
.story-copy p{font-size:14px;line-height:1.95;letter-spacing:.025em}
.scene-topline>span:first-child{letter-spacing:.06em}
.scene-topline>span:last-child,.story-aside>span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em}
.mono,.eyebrow,.project-actions a,footer{font-family:var(--mono)}
.project-meta,.stack-tags,.dialog-meta{letter-spacing:.025em}
.eyebrow{font-weight:600;letter-spacing:.15em}
.project-card h3,#ability-panel h3{letter-spacing:-.025em}
.handoff-statement,.storage-statement{font-family:var(--display);font-weight:750;letter-spacing:-.03em;line-height:1.35}
.about h2{font-weight:750;line-height:1.35}
.about-signature{gap:24px}
.oversize-mark{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.07em;line-height:1.2;margin-left:0;padding-bottom:.03em;white-space:nowrap}
.signature-dot{display:inline-block;width:.115em;height:.115em;margin-left:.045em;margin-bottom:.025em;border-radius:50%;background:var(--accent);font-size:1em;line-height:0;overflow:hidden;color:transparent;vertical-align:baseline}
.journey-entry{display:flex;justify-content:space-between;gap:20px;font-size:13px;border-top:1px solid var(--line);padding:17px 7px 10px;margin-top:13px;color:var(--ink)}
.journey-entry span{color:var(--accent)}
.story-link.direct-work{display:block;width:max-content;margin-top:12px;font-size:11px;color:var(--muted);border-color:transparent}
.about-signature .mono{margin-left:0}
.story-navigation,[data-theme] .story-navigation{width:410px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;bottom:29px}
.story-navigation button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:48px;padding:13px 0 8px;border-radius:0;background:none;font-size:14px;letter-spacing:.08em;color:var(--muted)}
.story-navigation button::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line);transition:background .25s}
.story-navigation button::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.story-navigation button:hover{color:var(--ink)}
.story-navigation button:hover::before{background:var(--accent)}
.story-navigation button.active{color:var(--ink);background:none;font-weight:600}
.story-navigation button.active::after{transform:scaleX(1)}
.phase-number{font:500 11px/1.2 "Manrope",sans-serif;letter-spacing:.02em;color:var(--muted)}
.story-navigation button.active .phase-number{color:var(--accent)}
@media(max-width:1100px) and (min-width:768px){.story-copy{max-width:330px}.story-copy h2{font-size:33px}}
@media(max-width:767px){
  .mark{font-size:33px;min-width:43px;line-height:1.25}
  .scene-topline{top:93px;font-size:12px}
  .scene-headline{top:16%;left:22px}
  .scene-headline h1{line-height:.95;letter-spacing:-.075em}
  .story-copy{bottom:100px;max-width:260px}
  .story-copy h2{font-size:28px;line-height:1.3;margin-bottom:9px}
  .story-copy p{font-size:13px;line-height:1.8;margin-bottom:12px}
  .story-navigation,[data-theme] .story-navigation{width:calc(100% - 44px);bottom:23px;gap:17px}
  .story-navigation button{gap:8px;padding:12px 0 8px;min-height:48px;font-size:13px;letter-spacing:.035em}
  .phase-number{font-size:10px}
  .story-aside{bottom:112px}
  .story-aside button{font-size:11px}
  .about h2{font-size:30px}
  .about-signature{gap:22px;align-items:center}
  .about-signature .mono{margin-bottom:0}
  .story-stage::before{content:"";position:absolute;z-index:1;top:63%;left:20%;width:60%;height:5%;background:radial-gradient(ellipse,#0b1a0c25,transparent 68%);pointer-events:none}
}
@media(max-width:360px){.site-header nav{gap:13px;font-size:13px}.story-navigation,[data-theme] .story-navigation{gap:11px}.story-navigation button{gap:6px}.story-copy h2{font-size:26px}.story-copy{max-width:235px}.story-aside{bottom:101px}}
@media(max-height:680px) and (max-width:767px){.scene-topline{top:85px}.scene-headline{top:19%}.story-copy h2{font-size:27px}.story-copy p{font-size:12px}.story-copy{bottom:89px}.story-aside{bottom:90px}.story-navigation,[data-theme] .story-navigation{bottom:18px}}
@media(prefers-reduced-motion:reduce){.story-navigation button::before,.story-navigation button::after{transition:none}}