/* ============================================================
   The Maroon-and-Gold Monograph — nilay.io
   Wine cloth (#96213e) + antique-gold foil. One humanist-grotesque
   (Bricolage Grotesque, variable, self-hosted). Vanilla CSS; the only
   JS is the light/dark toggle (system default + persisted override).
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens. light-dark() resolves against the element's color-scheme,
        which the toggle flips via [data-theme] below. ---- */
:root {
  color-scheme: light dark;

  --bg:       light-dark(oklch(0.992 0.004 20),  oklch(0.178 0.018 18));
  --surface:  light-dark(oklch(0.963 0.008 28),  oklch(0.224 0.020 18));
  --ink:      light-dark(oklch(0.235 0.022 25),  oklch(0.925 0.010 45));
  --muted:    light-dark(oklch(0.470 0.034 22),  oklch(0.680 0.030 40));
  --rule:     light-dark(oklch(0.888 0.013 28),  oklch(0.300 0.020 24));

  /* wine — the identity (#96213e in light) */
  --wine:     light-dark(oklch(0.449 0.152 12),  oklch(0.660 0.150 14));
  --wine-deep:light-dark(oklch(0.390 0.150 11),  oklch(0.720 0.150 15));

  /* antique gold — the foil accent */
  --gold:     light-dark(oklch(0.640 0.108 79),  oklch(0.800 0.110 84));
  --gold-soft:light-dark(oklch(0.760 0.090 82),  oklch(0.700 0.100 82));

  --measure: 40rem;
  --wrap:    46rem;
  --pad-x:   clamp(1.25rem, 5vw, 2.75rem);
  --pad-top: clamp(3rem, 9vh, 6rem);

  --body:    1.0625rem;
  --label:   0.82rem;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --t:       180ms;

  --z-toggle: 10;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-size: var(--body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

/* the cloth cover + a foil hairline, peeking at the top edge */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--wine);
  border-bottom: 1px solid var(--gold);
  z-index: var(--z-toggle);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--pad-top) var(--pad-x) clamp(2.5rem, 7vh, 4rem);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---- Type ---- */
h1, h2, h3 { line-height: 1.08; text-wrap: balance; margin: 0; color: var(--wine); }

.name {
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--wine);
}
/* the foil stamp: a short gold rule under the masthead */
.masthead { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.masthead .rule {
  width: 3.25rem; height: 3px; margin-top: 1.1rem;
  background: var(--gold);
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink);
  max-width: var(--measure);
  margin: 1.15rem 0 0;
  text-wrap: balance;
}

p { max-width: var(--measure); text-wrap: pretty; }
.bio { color: var(--ink); margin: 0 0 clamp(2.25rem, 6vh, 3.5rem); font-size: 1.1rem; }

.label { font-size: var(--label); font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--surface);
  padding: 0.1em 0.36em;
  border-radius: 4px;
}

/* ---- Links ---- */
a {
  color: var(--wine);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
a:hover { background-size: 100% 2px; color: var(--wine-deep); }
.prose a, .bio a { background-size: 100% 1.5px; }     /* discoverable in prose */
.prose a:hover, .bio a:hover { background-size: 100% 2px; }
a:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 2px; }

/* ---- Home: editorial index (replaces the arrow links) ---- */
.index { display: grid; margin: 0; }
.entry {
  display: grid;
  gap: 0.2rem;
  padding: clamp(1rem, 3vh, 1.35rem) 0;
  border-top: 1px solid var(--rule);
  background-image: none;             /* opt out of the link underline */
}
.index .entry:last-child { border-bottom: 1px solid var(--rule); }
.entry-title {
  font-size: clamp(1.5rem, 4vw, 1.85rem);
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -0.015em;
  color: var(--wine);
  width: max-content;
  max-width: 100%;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.entry:hover .entry-title,
.entry:focus-visible .entry-title { background-size: 100% 2px; color: var(--wine-deep); transform: translateX(3px); }
.entry:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; border-radius: 4px; }

/* ---- Inner pages ---- */
.topbar { margin-bottom: clamp(2rem, 5vh, 3rem); }
.home-link { font-size: var(--label); font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }
.home-link:hover { color: var(--wine); }
.page-title {
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-weight: 800; font-stretch: 90%; letter-spacing: -0.025em;
  margin-top: clamp(1.25rem, 3.5vh, 2rem);
}
.page-intro { color: var(--muted); margin: 0.8rem 0 0; max-width: var(--measure); font-size: 1.05rem; }

/* ---- Projects ---- */
.work { margin: clamp(1.75rem, 5vh, 2.75rem) 0 0; padding: 0; list-style: none; display: grid; }
.work-item { display: grid; gap: 0.3rem; padding: clamp(1.5rem, 4vh, 2rem) 0; border-top: 1px solid var(--rule); }
.work-item:last-child { border-bottom: 1px solid var(--rule); }
.work-name { font-size: clamp(1.4rem, 3.6vw, 1.7rem); font-weight: 700; font-stretch: 90%; letter-spacing: -0.015em; }
.work-name a { background-size: 0% 2px; }
.work-name a:hover { background-size: 100% 2px; }
.work-desc { color: var(--ink); margin: 0.15rem 0 0; }
.work-meta { margin-top: 0.55rem; }
.work-meta .tag::after { content: " · "; color: var(--gold); }
.work-meta .tag:last-child::after { content: ""; }

/* ---- Writing prose ---- */
.prose { margin-top: clamp(1.75rem, 5vh, 2.75rem); }
.prose p { font-size: 1.1rem; }
.prose p + p { margin-top: 1.15rem; }

/* ---- Article (rendered markdown post) ---- */
.post-date { margin-top: 0.85rem; }
.article { max-width: var(--measure); margin-top: clamp(1.75rem, 5vh, 2.5rem); }
.article > * + * { margin-top: 1.15rem; }
.article h2 { font-size: clamp(1.5rem, 3.6vw, 1.95rem); font-weight: 700; font-stretch: 90%; letter-spacing: -0.015em; color: var(--wine); margin-top: 2.4rem; }
.article h3 { font-size: 1.3rem; font-weight: 600; color: var(--wine); margin-top: 1.8rem; }
.article p, .article li { font-size: 1.1rem; line-height: 1.72; }
.article ul, .article ol { padding-left: 1.4rem; }
.article li + li { margin-top: 0.4rem; }
.article a { background-size: 100% 1.5px; }
.article a:hover { background-size: 100% 2px; }
.article img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.article blockquote { margin-inline: 0; padding: 0.85rem 1.15rem; border-radius: 8px; background: var(--surface); color: var(--muted); }
.article pre { background: var(--surface); padding: 1rem 1.15rem; border-radius: 10px; overflow-x: auto; font-size: 0.92rem; line-height: 1.55; }
.article pre code { background: none; padding: 0; font-size: inherit; }
.article hr { border: 0; border-top: 1px solid var(--rule); margin: 2.25rem 0; }

/* ---- Writing index list ---- */
.post-list { list-style: none; margin: clamp(1.75rem, 5vh, 2.75rem) 0 0; padding: 0; display: grid; }
.post-row { padding: clamp(1.1rem, 3vh, 1.5rem) 0; border-top: 1px solid var(--rule); }
.post-list .post-row:last-child { border-bottom: 1px solid var(--rule); }
.post-row-link { background-image: none; display: inline-block; }
.post-row-title {
  font-size: clamp(1.4rem, 3.6vw, 1.75rem); font-weight: 600; font-stretch: 90%;
  letter-spacing: -0.015em; color: var(--wine);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.post-row-link:hover .post-row-title,
.post-row-link:focus-visible .post-row-title { background-size: 100% 2px; color: var(--wine-deep); }
.post-row-date { margin-top: 0.35rem; }
.post-row-summary { color: var(--muted); margin-top: 0.3rem; max-width: var(--measure); }

/* ---- Footer + colophon ---- */
.site-footer {
  margin-top: auto;
  padding-top: clamp(2.5rem, 7vh, 4rem);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.site-footer .social { display: flex; gap: 1.5rem; }
.site-footer a { color: var(--muted); font-size: var(--label); font-weight: 500; letter-spacing: 0.02em; }
.site-footer a:hover { color: var(--wine); }

/* ---- Theme toggle: a labelled pill (icon + the current setting, in words) ----
   Minimal and mobile-first: the word names the state so there's no hover-to-discover.
   Cycles System -> Light -> Dark on click; typography does the work. */
.theme-toggle {
  position: fixed; top: clamp(0.9rem, 2.5vh, 1.5rem); right: clamp(0.9rem, 4vw, 1.75rem);
  z-index: var(--z-toggle);
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.75rem 0.4rem 0.65rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--wine); cursor: pointer;
  font: inherit;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); color: var(--wine-deep); }
.theme-toggle:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.tlabel {
  font-size: var(--label); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1;
}
/* Icon + word both name the current SETTING, keyed off one attribute set pre-paint
   + by theme.js. No @media in the cascade. No-JS / pre-paint shows System. */
.theme-toggle .ticon { display: none; }
:root:not([data-setting]) .theme-toggle .icon-system,
:root[data-setting="system"] .theme-toggle .icon-system,
:root[data-setting="light"] .theme-toggle .icon-sun,
:root[data-setting="dark"] .theme-toggle .icon-moon { display: block; }
.tlabel::after { content: "System"; }
:root[data-setting="light"] .tlabel::after { content: "Light"; }
:root[data-setting="dark"] .tlabel::after { content: "Dark"; }

/* ---- Motion: a restrained, staggered settle on load ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  [data-anim] { animation: rise 0.55s var(--ease) both; }
  [data-anim="2"] { animation-delay: 0.07s; }
  [data-anim="3"] { animation-delay: 0.14s; }
  [data-anim="4"] { animation-delay: 0.21s; }
  [data-anim="5"] { animation-delay: 0.28s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .entry:hover .entry-title { transform: none; }
  .theme-toggle:hover { transform: none; }
}