@font-face{
  font-family:"KTF Rublena";
  src:url("fonts/KTFRublena-Solid.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Xanh Mono";
  src:url("fonts/XanhMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Xanh Mono";
  src:url("fonts/XanhMono-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════
   MARK TAN — shared system
   Palette taken from the materials: etching paper, gallery
   wall, warm black ink, printer's registration red.
   Two families, both self-hosted: KTF Rublena Solid carries every
   heading, Xanh Mono carries body and all catalogue metadata.
   Xanh has one weight and an italic, no bold — hierarchy below the
   headings is therefore made with size, colour and italic, never
   with weight, so nothing is ever faux-bolded.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#E9E6DE; --paper-deep:#DAD5C9;
  --wall-hi:#FAF9F7; --wall-lo:#E7E4DE;
  --ink:#17140F; --ink-soft:#5C564C; --ink-faint:#8C857A;
  --reg:#C7332B;          /* printer's red — the plan/map only */
  --accent:#292929;       /* everything else */
  --hair:rgba(23,20,15,.20); --hair-soft:rgba(23,20,15,.10);
  --display:"KTF Rublena","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Xanh Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:"Xanh Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit}

/* paper tooth over everything */
.tooth{
  position:fixed;inset:0;pointer-events:none;z-index:80;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

/* ── chrome ───────────────────────────────────────────────── */
.masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);padding-bottom:11px;
}
.wordmark{
  font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.5vw,30px);letter-spacing:.01em;
  line-height:.95;text-decoration:none;display:inline-block;
}
.masthead nav{display:flex;gap:clamp(10px,2.1vw,24px);flex-wrap:wrap}
.masthead nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px;
}
.masthead nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a:focus-visible,
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.mono{font-family:var(--mono)}
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.rule{border:0;border-top:1px solid var(--hair)}

.colophon{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* registration marks, used as page furniture */
.regmark{width:18px;height:18px;opacity:.5}
.regmark path,.regmark circle{stroke:var(--accent);stroke-width:.9;fill:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Page arrival: everything below the masthead fades up, so the wordmark
   reads as fixed furniture across navigations rather than a new element. */
@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.arrive{animation:arrive .5s cubic-bezier(.2,.9,.2,1) both}
.masthead{animation:none}