/* ============================================================
   Ink & paper: shared tokens and chrome for every page
   ============================================================ */
:root{
  --paper:     #F3EDE1;
  --paper-2:   #EAE2D3;
  --card:      #FBF7EF;
  --ink:       #1B1916;
  --ink-2:     #423D36;
  --muted:     #766E62;
  --line:      rgba(27,25,22,.14);
  --line-soft: rgba(27,25,22,.07);
  --seal:      #C23B22;
  --seal-dk:   #9A2C17;
  --seal-sf:   #F3DCD2;
  --mind:      #31507F;
  --mind-sf:   #DCE3EE;
  --scroll-paper: #F7F1E4;
  --rod:       #3B2A1E;

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --cjk-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --cjk-sans: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-cam: cubic-bezier(.65,0,.25,1);
  --pad: clamp(16px, 5vw, 64px);
  --maxw: 1120px;

  /* Old token names, kept so the chat widget and the about page restyle for free */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --accent: var(--seal);
  --accent-dk: var(--seal-dk);
  --accent-sf: var(--seal-sf);

  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14120F; --paper-2:#1C1915; --card:#221E19;
    --ink:#EEE7DA; --ink-2:#CFC6B6; --muted:#9C9283;
    --line:rgba(238,231,218,.15); --line-soft:rgba(238,231,218,.07);
    --seal:#E0563A; --seal-dk:#C23B22; --seal-sf:#3A1E16;
    --mind:#8FAEDD; --mind-sf:#1D2636;
    --scroll-paper:#EDE4D2; --rod:#0B0907;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#14120F; --paper-2:#1C1915; --card:#221E19;
  --ink:#EEE7DA; --ink-2:#CFC6B6; --muted:#9C9283;
  --line:rgba(238,231,218,.15); --line-soft:rgba(238,231,218,.07);
  --seal:#E0563A; --seal-dk:#C23B22; --seal-sf:#3A1E16;
  --mind:#8FAEDD; --mind-sf:#1D2636;
  --scroll-paper:#EDE4D2; --rod:#0B0907;
  color-scheme: dark;
}

/* Cross-document handoff (Chrome, Safari 18.2+): the page we're leaving is mostly paper by the
   time we go, so it just fades off the top of the new one, which is already in place. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-fade .28s ease both; }
::view-transition-new(root){ animation:none; }
@keyframes vt-fade{ to{ opacity:0; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Faint paper fibre, drawn once and tiled */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--seal); color:#fff}
:focus-visible{outline:2px solid var(--seal); outline-offset:3px; border-radius:4px}
[lang="zh-Hans"]{font-family:var(--cjk-serif)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--paper); padding:12px 18px}
.skip:focus{left:0}

/* ---------- top bar ---------- */
.topbar{
  position:relative; z-index:50;
  display:flex; align-items:center; gap:24px;
  max-width:var(--maxw); margin-inline:auto; padding:18px var(--pad);
}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.seal{
  display:inline-grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:6px;
  background:var(--seal); color:#FBF3EA;
  font:600 19px/1 var(--cjk-serif);
  box-shadow:inset 0 0 0 2px rgba(251,243,234,.35);
}
.brand-name{font:500 21px/1 var(--display); letter-spacing:.01em}
.nav{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.nav a{
  position:relative; text-decoration:none; font-size:14px; color:var(--ink-2);
  padding-block:4px; transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:var(--seal); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:560px){
  .topbar{gap:14px; padding-block:14px}
  .brand-name{display:none}
  .nav{gap:16px}
  .nav a{font-size:13.5px}
}
@media (max-width:360px){
  .nav{gap:11px}
  .nav a{font-size:12.5px}
  .seal{width:30px; height:30px; font-size:17px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font:500 14.5px/1.2 var(--sans); text-decoration:none; cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px); border-color:var(--ink-2)}
.btn svg{width:15px; height:15px; flex:none}
.btn-seal{background:var(--seal); border-color:var(--seal); color:#fff}
.btn-seal:hover{background:var(--seal-dk); border-color:var(--seal-dk)}

/* ---------- inner-page header (about, projects) ---------- */
.zoom-out{
  display:inline-flex; align-items:center; gap:8px;
  font:500 13px/1 var(--sans); letter-spacing:.02em; color:var(--ink-2); text-decoration:none;
  padding:9px 14px 9px 11px; border:1px solid var(--line); border-radius:999px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.zoom-out:hover{color:var(--ink); border-color:var(--ink-2)}
.zoom-out svg{width:15px; height:15px}
.kicker{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--seal);
}
.kicker .glyph{font:600 30px/1 var(--cjk-serif); letter-spacing:0; color:var(--ink)}
.page-head{max-width:var(--maxw); margin-inline:auto; padding:clamp(28px,6vh,64px) var(--pad) clamp(28px,5vh,48px)}
.page-head h1{
  font:500 clamp(2.6rem,7vw,4.6rem)/1 var(--display); letter-spacing:-.02em; margin:18px 0 16px;
}
.page-head h1 em{font-style:italic; color:var(--seal)}
.page-head .lede{max-width:52ch; margin:0; color:var(--ink-2); font-size:1.08rem}

/* Arrival: inner pages carry on the zoom, settling from slightly too close.
   (Opacity and transform only; "backwards" so it never pins styles after it ends.) */
.arrive{animation:arrive .9s cubic-bezier(.16,1,.3,1) backwards; transform-origin:50% 20vh}
@keyframes arrive{from{opacity:0; transform:scale(1.045)}}

/* Zoom out: the page pulls away before the portrait comes back */
.leaving main,.leaving .site-foot{
  opacity:0; transform:scale(.94); transform-origin:50% 30vh;
  transition:opacity .3s ease, transform .32s cubic-bezier(.4,0,.9,.5);
}

footer.site-foot{
  max-width:var(--maxw); margin-inline:auto; padding:30px var(--pad) 40px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:13px; color:var(--muted); border-top:1px solid var(--line-soft);
}
footer.site-foot a{color:var(--ink-2); text-decoration:none}
footer.site-foot a:hover{color:var(--seal)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}