/* ==========================================================================
   anhtusam.net — shared stylesheet
   Single source of truth for tokens, base styles and prose.
   Page-specific styles stay in each page's own <style> block.
   ========================================================================== */

:root {
  /* colour */
  --paper:#F7F2E9;
  --panel:#FFFDF8;
  --ink:#15140F;
  --body:#322E27;
  --mute:#6E6860;
  --line:#E2D9CA;
  --tint:#FBE3D9;
  --ember:#E04A28;
  --navy:#1F4E6B;

  /* type families */
  --font-display:'Noto Serif',Georgia,serif;
  --font-sans:'Noto Sans',system-ui,sans-serif;
  --font-mono:'Noto Sans Mono',ui-monospace,monospace;

  /* type scale */
  --t-label:0.7rem;
  --t-small:0.875rem;
  --t-ui:1rem;
  --t-body:1.125rem;
  --t-lead:1.375rem;
  --t-h2:1.75rem;
  --t-h1:clamp(2.5rem, 6vw, 3.75rem);

  /* line height */
  --leading-tight:1.15;
  --leading-normal:1.5;
  --leading-prose:1.75;
}

/* --------------------------------------------------------------- base --- */

html {
  scroll-behavior:smooth;
  /* always reserve the scrollbar gutter so short pages (essays.html) don't
     shift centred content sideways relative to long ones */
  scrollbar-gutter:stable;
}

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
}

::selection { background:var(--tint); color:var(--ink); }

/* paper grain */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Content is serif, chrome is sans, labels are mono. */
header, footer, nav, button, [data-cal-link] { font-family:var(--font-sans); }

/* ------------------------------------------------------------ layout --- */

/* Page container. Defined here, NOT via Tailwind arbitrary values, so it
   applies at first paint instead of waiting for the Tailwind CDN runtime
   to generate it — otherwise the nav renders full-width then snaps inward. */
.wrap {
  max-width:1240px;
  margin-inline:auto;
  padding-inline:1.5rem;
}
@media (min-width:640px) { .wrap { padding-inline:2.5rem; } }

/* ---------------------------------------------------- type utilities --- */

.display { font-family:var(--font-display); }
.ital    { font-style:italic; }
.mono    { font-family:var(--font-mono); }
.num     { font-family:var(--font-display); font-variant-numeric:tabular-nums; }

.label {
  font-family:var(--font-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.rule { border-top:1px solid var(--line); }

/* animated underline on hover */
.ulink {
  background-image:linear-gradient(var(--ember),var(--ember));
  background-size:0% 1.5px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1);
  padding-bottom:2px;
}
.ulink:hover { background-size:100% 1.5px; }

/* -------------------------------------------------------------- prose --- */

.prose { font-size:var(--t-body); line-height:var(--leading-prose); color:var(--body); }
.prose p { margin-top:1.5rem; }

.prose h2 {
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-h2); line-height:var(--leading-tight);
  color:var(--ink); letter-spacing:-.01em;
  margin-top:3rem; margin-bottom:.25rem;
}
.prose h3 {
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-lead); color:var(--ink);
  margin-top:2.2rem;
}

.prose strong { color:var(--ink); font-weight:600; }
.prose em     { font-style:italic; }
.prose a      { color:var(--ember); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

.prose .lead { font-size:var(--t-lead); line-height:var(--leading-normal); color:var(--ink); }

.prose ul { margin-top:1.4rem; padding-left:0; list-style:none; }
.prose ul li { position:relative; padding-left:1.6rem; margin-top:.7rem; }
.prose ul li::before {
  content:""; position:absolute; left:.1rem; top:.72em;
  width:.4rem; height:.4rem; background:var(--ember); border-radius:9999px;
}

.prose blockquote { margin:2.4rem 0; padding-left:1.4rem; border-left:2px solid var(--ember); }
.prose blockquote p {
  font-family:var(--font-display); font-style:italic;
  font-size:var(--t-lead); line-height:1.35; color:var(--ink); margin:0;
}

.prose hr { border:0; border-top:1px solid var(--line); margin:3rem 0; }

/* ------------------------------------------------------------ chrome --- */

.nav-link { color:var(--mute); transition:color .25s; position:relative; }
.nav-link:hover, .nav-link.active { color:var(--ink); }
.nav-link.active::before {
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:9999px; background:var(--ember);
}

.btn-ember {
  background:var(--ember); color:#fff; font-weight:600;
  transition:transform .25s, box-shadow .25s, background .25s;
  box-shadow:0 10px 30px -12px rgba(224,74,40,.6);
}
.btn-ember:hover { background:#cc3f20; transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(224,74,40,.7); }

.btn-line { border:1px solid var(--ink); color:var(--ink); font-weight:600; transition:background .25s, color .25s, transform .25s; }
.btn-line:hover { background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ------------------------------------------------------------ social --- */

.social { display:inline-flex; align-items:center; gap:14px; }
.social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9999px;
  color:inherit; transition:color .25s, background .25s;
}
.social a:hover { color:var(--paper); background:rgba(247,242,233,.10); }
.social svg { width:18px; height:18px; fill:currentColor; display:block; }

/* --------------------------------------------------- essay list rows --- */

.essay { transition:background .3s; }
.essay:hover { background:var(--panel); }
.essay:hover .essay-title { color:var(--ember); }
.essay-arrow { transition:transform .3s, opacity .3s; opacity:0; transform:translateX(-6px); }
.essay:hover .essay-arrow { opacity:1; transform:none; }

/* ------------------------------------------------------- mobile menu --- */

/* Solid dark panel. Defined here rather than via Tailwind opacity utilities
   so it is genuinely opaque and never lets the page show through. */
#mobileMenu {
  /* Fully opaque. Identical on every page regardless of what sits behind it. */
  background:#15140F;
  transition:opacity .35s, visibility .35s;
}
#mobileMenu.closed { opacity:0; visibility:hidden; pointer-events:none; }

#mobileMenu .mobile-link { color:var(--paper); }
#mobileMenu .mobile-link:hover { color:var(--ember); }
#mobileMenu .rule { border-top-color:rgba(247,242,233,.22); }
#mobileMenu .btn-ember { color:#fff; }

/* ------------------------------------------------------------ motion --- */

@keyframes revealIn { from { transform:translateY(16px); } to { transform:none; } }
.reveal { animation:revealIn .8s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}