/* core.css — design tokens + shared chrome. ONE change here changes every page.
   System: "Quiet Manual" (Jul 2026) — white canvas, ink, hairlines, vermilion as
   the ONLY color. Brutalist accents: exposed hairline scaffolding, ruled
   ledgers, press-down buttons — NO shadows (Dinesh removed them, Jul 2026).
   Motion is GSAP-driven (see js/site.js): one verb —
   blur-resolve — plus Lenis inertia scroll. Never reintroduce background washes. */
:root {
  --paper: #ffffff; --paper-deep: #f5f4f2;
  --ink: #0d0d0d; --ink-soft: #55524b; --stone: #7d7a72;
  --line: rgba(13, 13, 13, 0.10); --line-strong: rgba(13, 13, 13, 0.24);
  --accent: #D93A2B; --accent-ink: #B02F22; --seal-text: #ffffff;
  --card: #ffffff;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
}
:root[data-theme="dark"] {
  --paper: #101010; --paper-deep: #191816;
  --ink: #f4f2ee; --ink-soft: #b5b1a8; --stone: #8b877e;
  --line: rgba(244, 242, 238, 0.13); --line-strong: rgba(244, 242, 238, 0.30);
  --accent: #E4513F; --accent-ink: #F07862; --seal-text: #ffffff;
  --card: #181715;
}
:root[data-theme="light"] {
  --paper: #ffffff; --paper-deep: #f5f4f2;
  --ink: #0d0d0d; --ink-soft: #55524b; --stone: #7d7a72;
  --line: rgba(13, 13, 13, 0.10); --line-strong: rgba(13, 13, 13, 0.24);
  --accent: #D93A2B; --accent-ink: #B02F22;
  --card: #ffffff;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  background: var(--paper); color: var(--ink); margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 450; font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.serif { font-family: "IBM Plex Serif", Georgia, serif; }
.mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; }
::selection { background: var(--accent); color: #ffffff; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #ffffff; padding: 10px 18px; font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; font-weight: 600; }
.skip:focus { left: 0; }

/* nav */
header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .seal { width: 30px; height: 30px; border-radius: 0; background: var(--accent); color: var(--seal-text); display: grid; place-items: center; font-size: 16px; font-weight: 600; }
.brand .wm { font-family: "IBM Plex Serif", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { font-family: "IBM Plex Mono", monospace; color: var(--ink-soft); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; }
.nav-links a.active { color: var(--accent-ink); }
.nav-links a:hover { color: var(--accent-ink); text-decoration: none; }
@media (max-width: 680px) { .nav-links { display: none; } }
.theme-toggle, .menu-btn { appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink-soft); cursor: pointer; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; transition: color .15s, border-color .15s, transform .1s; }
.theme-toggle:hover, .menu-btn:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle:active, .menu-btn:active { transform: translateY(1px); }
.theme-toggle svg, .menu-btn svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.menu-btn { display: none; }
@media (max-width: 680px) { .menu-btn { display: grid; } }
.mobile-nav { display: none; border-top: 1px solid var(--line); }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 24px; border-bottom: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.mobile-nav a:hover { color: var(--accent-ink); text-decoration: none; }

/* shared atoms */
.annot { font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--stone); margin: 0 0 1rem; }
.rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* buttons — flat ink, vermilion on press; a quiet 1px dip instead of a shadow */
.btn {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 0.82rem;
  padding: 14px 25px; background: var(--ink); color: var(--paper); border-radius: 0;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 100ms ease, background 120ms ease;
}
.btn:hover { background: var(--accent-ink); color: #ffffff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.textlink { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.textlink:hover { color: var(--accent-ink); text-decoration: none; }

/* plates & figures — ruled sheets: hairline frame, nothing cast */
.plate-frame, .drawing-frame, .fig {
  border: 1px solid var(--line-strong); background: var(--card);
  position: relative;
}
.plate-frame::after, .drawing-frame::after, .fig::after { display: none; }

/* deep band — neutral, seated by hairlines */
.band-deep { background: var(--paper-deep); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }

/* footer */
footer.ft { border-top: 1px solid var(--line); padding: 34px 0 48px; }
.ft-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.ft-social a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--ink-soft);
  border: 1px solid var(--line-strong); padding: 8px 13px; border-radius: 0;
  transition: transform 100ms ease, color .15s, border-color .15s;
}
.ft-social a svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.ft-social a:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.ft-social a:active { transform: translateY(1px); }
.ft-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--stone); }
.ft-inner .arrow { color: var(--accent-ink); }

/* contact rows with logos */
.contacts { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 560px; }
.contacts li { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.contacts li:last-child { border-bottom: 1px solid var(--line); }
.contacts .p { display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.contacts .p svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.contacts a { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; color: var(--ink); }
.contacts a:hover { color: var(--accent-ink); text-decoration: none; }

/* motion —
   .rise (above-the-fold load sequence): pure CSS, starts at first paint, no JS
   dependency — keeps LCP fast and content visible even if CDNs fail.
   .reveal (scroll entrances): GSAP blur-resolve; hidden only under html.js. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: riseIn .8s cubic-bezier(.19, 1, .22, 1) backwards; }
  .rise.r2 { animation-delay: .1s; }
  .rise.r3 { animation-delay: .2s; }
  .rise.r4 { animation-delay: .32s; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } }
}
html.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(10px); will-change: opacity, transform, filter; }
html.js .reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}