/* =========================================================================
   Hearth — tokens
   A warm, dark, editorial design system. Cocoa-pit page with two
   terracotta radial glows wandering slowly over a drifting topography
   texture, glass panels, Inter Tight typography, one accent.

   Two-layer architecture: primitives (raw hex, theme-agnostic) at the
   bottom, semantic tokens on top. Components MUST consume the semantic
   layer only.

   Single theme. There is no light variant — the design is intentionally
   one-mood. If you need a light palette, fork the system.

   Derived from the noelkleen.com /projects page.
   ========================================================================= */


/* ---- Fonts (Inter Tight, variable weight 100–900, latin + latin-ext) ---- */
/* Self-hosted under fonts/. If you move tokens.css to a different location,
   adjust the relative paths below or override the @font-face src in your
   own stylesheet. The font files are OFL 1.1 — see fonts/OFL.txt. */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---- Primitives (raw scale — do not consume from components) ----------- */
:root {
  /* Cocoa ramp — warm dark grounds */
  --hex-cocoa-pit:    #1a1108;   /* page bg, deepest */
  --hex-cocoa-glow:   #3a1d10;   /* radial glow overlay */
  --hex-cocoa:        #261b14;   /* opaque equivalent of surface */
  --hex-cocoa-lift:   #32231a;   /* opaque equivalent of surface hover */

  /* Cream ramp — text on cocoa */
  --hex-cream:        #f3ebe1;
  --hex-stone:        #b8a99a;

  /* Terracotta — the single accent */
  --hex-clay:         #d97757;
  --hex-clay-soft:    #cc785c;

  /* Translucent surface and border values.
     Surfaces are rgba over warm-brown ink so the page glow bleeds through.
     Borders are rgba over terracotta so the hairline catches the accent. */
  --hex-surface:        rgba(38, 27, 20, 0.86);
  --hex-surface-lift:   rgba(50, 35, 26, 0.94);
  --hex-border:         rgba(204, 120, 92, 0.18);
  --hex-border-strong:  rgba(217, 119, 87, 0.45);
}


/* ---- Semantic tokens --------------------------------------------------- */
:root {
  /* Surface */
  --bg-page:           var(--hex-cocoa-pit);
  --bg-glow:           var(--hex-cocoa-glow);
  --bg-surface:        var(--hex-surface);
  --bg-surface-hover:  var(--hex-surface-lift);

  /* Text */
  --fg-primary:  var(--hex-cream);
  --fg-muted:    var(--hex-stone);

  /* Borders — translucent terracotta hairlines */
  --border-soft:    var(--hex-border);
  --border-strong:  var(--hex-border-strong);

  /* Brand accent */
  --accent:       var(--hex-clay);
  --accent-soft:  var(--hex-clay-soft);

  /* Focus ring — accent, picks up the warmth */
  --ring: var(--hex-clay);

  /* Shadows — used at rest on cards. The hover shadow stacks a hairline
     in --border-strong so the glow border and the lift land together. */
  --shadow:        0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-hover:  0 12px 32px rgba(0, 0, 0, 0.6),
                   0 0 0 1px var(--border-strong);

  color-scheme: dark;
}


/* ---- Type, radii, spacing, motion -------------------------------------- */
:root {
  /* Inter Tight is the single primary face. System sans fallback only
     if the woff2 fails to load. Mono is for code blocks. */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", SFMono-Regular,
               Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:  0.85rem;
  --fs-sm:  0.9rem;
  --fs-md:  0.95rem;
  --fs-base: 1rem;
  --fs-lg:  1.1rem;
  --fs-xl:  1.2rem;
  /* Display is fluid: 2.25 → 3.25rem between 480px and 1200px viewports. */
  --fs-display: clamp(2.25rem, 4.5vw, 3.25rem);

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --radius:        14px;
  --radius-small:  8px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  --motion-fast: 140ms;
  --ease:        ease;
}


/* ---- Base elements ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Page colour lives on html so body's pseudo-elements can layer the
   animated topography + glow above it without occluding each other. */
html { background-color: var(--bg-page); }

body {
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---- Animated backdrop ------------------------------------------------
   Two layers behind content, both fixed:
     1. body::before — the topography texture, drifting + scaling slowly
     2. body::after  — two warm radial glows wandering at different rates
   The composite reads as light moving slowly through the room. The
   foreground stays calm; the breath happens behind. Reduced-motion users
   get the still composite via the prefers-reduced-motion rule at the
   bottom of the file. Texture ships at images/topography.jpg. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

body::before {
  background: url("images/topography.jpg") center / cover no-repeat;
  opacity: 0.65;
  animation: backdrop-drift 10s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(ellipse 1100px 800px at 75% 70%,
                    rgba(217, 119, 87, 0.20) 0%,
                    rgba(58, 36, 27, 0) 55%),
    radial-gradient(ellipse 700px 500px at 18% 22%,
                    rgba(224, 139, 111, 0.13) 0%,
                    rgba(58, 36, 27, 0) 55%);
  background-size: 100% 100%, 100% 100%;
  animation: glow-wander 6s ease-in-out infinite alternate,
             glow-shift 4s ease-in-out infinite alternate;
}

@keyframes backdrop-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-0.8deg); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.10) rotate(0.8deg); }
}

@keyframes glow-wander {
  0%   { transform: translate3d(-3%, 2%, 0) scale(1.0); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.15); }
}

@keyframes glow-shift {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 4% -3%, -5% 4%; }
}

::selection {
  background: var(--accent);
  color: var(--bg-page);
}

::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease);
}

a:hover { color: var(--accent-soft); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.93em;
}

code {
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-small);
}

pre code {
  padding: 0;
  background: transparent;
}

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: inherit;
}


/* ---- Type utilities ---------------------------------------------------- */

.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  margin: 0;
}

.t-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  font-style: italic;
  color: var(--fg-muted);
  max-width: 62ch;
  margin: 0;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-muted);
  margin: 0;
}

.t-mono   { font-family: var(--font-mono); }
.t-muted  { color: var(--fg-muted); }


/* ---- Card -------------------------------------------------------------
   The signature panel. Warm-brown glass surface — mostly opaque but
   backdrop-blurred so the wandering glow and the drifting texture
   underneath read softly through the edge. Hairline border in
   translucent terracotta. Soft shadow at rest, deeper shadow + glow
   border on hover with a single-pixel settle.
   --------------------------------------------------------------------- */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}

a.card:hover,
a.card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  outline: none;
}

.card-image {
  aspect-ratio: 16 / 9;
  background-color: #2a1810;
  background-image: linear-gradient(135deg, #3a1f12 0%, #1f120a 100%);
  background-size: cover;
  background-position: center;
}

.card-body {
  padding: 18px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
}

.card-desc {
  margin: 0;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.card-link {
  margin-top: var(--space-4);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
}


/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}