/* ==========================================================================
   Driftwood — a quiet theme
   Dark warm void · amber accent · serif italic display · slow easing · grain
   Drop this stylesheet into any static site. No dependencies, no build step.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* color — photos/content carry the color; the shell stays a warm near-black */
  --bg: oklch(0.19 0.004 95);
  --surface: oklch(0.24 0.006 95);
  --ink: oklch(0.93 0.006 80);
  --muted: oklch(0.68 0.014 80);
  --amber: oklch(0.78 0.13 80);
  --amber-dim: oklch(0.78 0.13 80 / 0.35);
  --amber-ink: oklch(0.18 0.02 80);      /* text on amber fills */
  --line: oklch(1 0 0 / 0.14);
  --line-strong: oklch(1 0 0 / 0.28);
  --scrim: oklch(0.1 0 0 / 0.55);

  /* secondary glow hues (decorative only, never text) */
  --glow-dusk: oklch(0.45 0.07 265);
  --glow-blush: oklch(0.6 0.08 350);

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape */
  --radius-s: 0.625rem;
  --radius-m: 1.25rem;
  --radius-pill: 999px;

  /* motion — nothing moves fast */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-quick: 0.25s;
  --t-soft: 0.4s;
  --t-slow: 1.4s;

  /* z scale */
  --z-raised: 1;
  --z-sticky: 5;
  --z-chrome: 10;
  --z-overlay: 20;
  --z-toast: 30;
}

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

* { box-sizing: border-box; margin: 0; }

/* bg lives on html so the fixed .atmosphere layer can sit behind the body */
html { color-scheme: dark; background: var(--bg); }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p { max-width: 65ch; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: oklch(1 0 0 / 0.25);
  transition: text-decoration-color var(--t-quick) var(--ease-out);
}

a:hover { text-decoration-color: var(--amber); }

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

::selection { background: var(--amber-dim); }

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

.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

h1, .display-xl { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: 1.25rem; }

.lede {
  color: var(--muted);
  font-size: 1.0625rem;
}

.caption {
  color: var(--muted);
  font-size: 0.8125rem;
}

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--muted);
  text-decoration: none;
}

.wordmark:hover { color: var(--ink); }

/* ---------- buttons ---------- */

.button {
  display: inline-block;
  font: inherit;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.125rem;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out),
              background-color var(--t-quick) var(--ease-out);
}

.button.solid {
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 500;
}

.button.solid:hover {
  background: oklch(0.83 0.12 80);
  border-color: oklch(0.83 0.12 80);
}

.button.ghost {
  border: 1px solid var(--line);
  background: oklch(0.1 0 0 / 0.4);
  color: var(--muted);
}

.button.ghost:hover { color: var(--ink); border-color: var(--line-strong); }

.button:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.linklike {
  font: inherit;
  font-size: 0.875rem;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: oklch(1 0 0 / 0.25);
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-out);
}

.linklike:hover { color: var(--ink); }

/* ---------- chips (filters, tags, quiet nav) ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: var(--radius-pill);
  background: oklch(0.1 0 0 / 0.45);
  width: fit-content;
}

.chip {
  font: inherit;
  font-size: 0.8125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.875rem;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.chip:hover { color: var(--ink); }

.chip[aria-pressed="true"],
.chip.active {
  color: var(--amber);
  border-color: var(--amber-dim);
}

/* ---------- panels ---------- */

.panel {
  padding: 2rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: inset 0 0 60px oklch(1 0 0 / 0.03);
  transition: border-color var(--t-soft) var(--ease-out),
              box-shadow var(--t-soft) var(--ease-out);
}

.panel.inviting { cursor: pointer; }

.panel.inviting:hover,
.panel.inviting.over {
  border-color: var(--amber-dim);
  box-shadow: inset 0 0 60px oklch(0.78 0.13 80 / 0.06);
}

/* ---------- forms ---------- */

.field {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: oklch(0.1 0 0 / 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--t-quick) var(--ease-out);
}

.field::placeholder { color: var(--muted); }

.field:hover { border-color: var(--line-strong); }

.field:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-color: transparent;
}

.label {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
}

/* ---------- atmosphere: grain + glow ---------- */

/* Film grain over everything. Add <div class="grain" aria-hidden="true"></div>
   once, as the last child of <body>. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Full-page ambient layer. Put <div class="atmosphere" aria-hidden="true">
   with .glow children as the FIRST child of <body>; it stays behind
   everything and never clips against section edges. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Slow ambient color, the lava-lamp memory of the app. Use inside
   .atmosphere, or inside any position:relative section — decorative only. */
.glow {
  position: absolute;
  width: 44rem;
  height: 44rem;
  max-width: 120vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(20px);
  opacity: 0.5;
  background: radial-gradient(circle, var(--glow-color, var(--amber)) 0%, transparent 62%);
  animation: glow-drift 52s var(--ease-out) infinite alternate;
}

.glow.dusk { --glow-color: var(--glow-dusk); animation-duration: 67s; }
.glow.blush { --glow-color: var(--glow-blush); animation-duration: 59s; }

@keyframes glow-drift {
  from { transform: translate(-6%, -4%) scale(1); }
  to { transform: translate(6%, 5%) scale(1.12); }
}

/* ---------- entrances & reveals ---------- */

/* One-shot entrance for above-the-fold content. Stagger with .rise-2/-3/-4. */
@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
}

.rise { animation: rise 0.9s var(--ease-out) backwards; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }
.rise-4 { animation-delay: 0.36s; }

/* Scroll reveals, progressive: elements are fully visible by default and are
   only hidden once the enhance script confirms JS + motion are available.
   Pair with the IntersectionObserver snippet in index.html. */
html.enhance .reveal {
  opacity: 0;
  transform: translateY(1rem);
}

html.enhance .reveal.revealed {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

/* ---------- chrome that dissolves ---------- */

/* Give headers/footers .chrome; toggle body.idle from JS after inactivity. */
.chrome { transition: opacity var(--t-slow) var(--ease-out); }

body.idle .chrome {
  opacity: 0;
  pointer-events: none;
}

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

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: clamp(4rem, 10vh, 7rem); }

.stack-s > * + * { margin-top: 0.75rem; }
.stack-m > * + * { margin-top: 1.5rem; }
.stack-l > * + * { margin-top: 3rem; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .rise { animation: none; }
  html.enhance .reveal { opacity: 1; transform: none; transition: none; }
  .chrome { transition-duration: 0.15s; }
  *, *::before, *::after {
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
}