/* speakwithdaniel.com — design tokens and layout.
   The 2026-08-12 wall system: every case section owns a ground color and, at
   desktop width, a hand-placed scatter of work tiles at different sizes,
   depths (drift rate, z, shadow) and slight rotations. The page background
   gradiates between section grounds as you scroll (script in base.html);
   without JS each section simply holds its solid ground. Below 1100px the
   scatter folds back into the packed calm grid. Hero and About stay on the
   theme paper so the color story opens and closes at home. */

:root {
  --paper: #f7f5f2;
  --ink: #17161a;
  --muted: #6b6963;
  --line: #e4e1da;
  --accent: #d8482b;
  --tile: #edeae4;
  --max: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141416;
    --ink: #ecebe8;
    --muted: #97948e;
    --line: #26262a;
    --accent: #ff6b4a;
    --tile: #1d1d20;
  }
}

/* Section grounds: committed colors derived from each case's own work —
   they do not follow the OS theme. Ink/muted pairs are contrast-checked
   against their ground (all inks >= 11:1, muteds >= 4.5:1). */
.case--skreened { --g: #2b1210; --gi: #f5e9e4; --gm: #cfa89e; }
.case--dizzy    { --g: #0f3a3d; --gi: #eaf4f2; --gm: #a3c9c5; }
.case--unfold   { --g: #efe4cf; --gi: #201d16; --gm: #635b48; }
.case--posters  { --g: #2e2620; --gi: #f2ede4; --gm: #c4b6a3; }
.case--banker   { --g: #e7d3cc; --gi: #2a1f1e; --gm: #684e48; }
.case--identity { --g: #171d2a; --gi: #e9edf5; --gm: #9aa4b8; }
.case--photo    { --g: #eceae5; --gi: #1b1a18; --gm: #5f5d57; }
.case--earlier  { --g: #e4e1da; --gi: #1d1c1a; --gm: #5c5a54; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

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

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem 1.25rem 0;
}
.wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-head nav { display: flex; gap: 1.1rem; }
.site-head nav a { text-decoration: none; color: var(--muted); font-size: 0.95rem; }
.site-head nav a:hover { color: var(--accent); }

main { margin: 0 auto; }
.shell { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

.site-foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.site-foot p { margin: 0.15rem 0; }

/* ---- hero ---- */

.hero { padding: 5rem 0 16vh; }
.hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero .lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.5;
}
.hero .hero-meta {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.hero .hero-links { margin: 0.4rem 0 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0; list-style: none; }

/* ---- case sections ---- */

.case {
  padding: 24vh 0 20vh;
  background: var(--g, var(--paper));
  color: var(--gi, var(--ink));
  overflow: clip;
}
/* with the gradiating body layer live, sections go clear and the blend
   happens in the tall padding gaps where nothing readable sits */
.wall-live .case { background: transparent; }

.case-head { max-width: 44em; margin-bottom: 3rem; }
.case-head h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.case-head h3 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.05; }
.case-meta {
  margin: 0 0 1rem;
  color: var(--gm, var(--muted));
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.case-note { margin: 0; font-size: 1.05rem; max-width: 38em; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  margin: 0 0 1.4rem;
}
.grid figure { margin: 0; }
.grid a.shot { display: block; text-decoration: none; }
.frame {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tile);
  border: 1px solid color-mix(in oklab, var(--gi, var(--ink)) 14%, transparent);
}
.frame.tall { aspect-ratio: 3 / 4; }
.frame.wide { aspect-ratio: 16 / 9; }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.grid figcaption {
  margin-top: 0.45rem;
  color: var(--gm, var(--muted));
  font-size: 0.86rem;
}
.grid .feature { grid-column: span 2; }
@media (max-width: 640px) {
  .grid .feature { grid-column: span 1; }
}

/* The scatter: at desktop width each case grid becomes a 12-column canvas
   and every tile takes its authored place (--c/--cs), vertical stagger
   (--dy, negative values overlap the row above), depth (--z, shadow scales
   with it) and drift rate (--d, read by the script). Images sit square:
   rotation was tried and rejected (Daniel, 2026-08-12) — never tilt them. */
@media (min-width: 1100px) {
  .case .grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 0 1.25rem;
    margin-bottom: 3rem;
  }
  .case .grid figure {
    grid-column: var(--c, auto) / span var(--cs, 4);
    margin-top: var(--dy, 0rem);
    /* --jx (rem) is horizontal jitter, composed into the drift transform by the
       engine so BOTH edges leave the grid lines; margins would pin the right edge */
    position: relative;
    z-index: var(--z, 1);
    will-change: transform;
  }
  .case .grid .feature { grid-column: var(--c, auto) / span var(--cs, 6); }
  .case .grid .frame {
    box-shadow: 0 calc(var(--z, 1) * 7px) calc(var(--z, 1) * 22px)
      color-mix(in oklab, var(--g, #000) 55%, rgb(0 0 0 / 0.45));
  }
}

/* The ghost plane: a few of the section's own images, echoed far behind the
   scatter — heavily faded, blurred, and drifting slowest of all, pure
   texture. Absolutely positioned inside the grid (--gx/--gy/--gw as
   percentages) so they overlap the real tiles and add ZERO layout height:
   ghosts renting their own rows read as dead air (Daniel, 2026-08-12).
   Decorative only (empty alt, no links) and absent below desktop width. */
.ghost { display: none; }
@media (min-width: 1100px) {
  .case .grid { position: relative; }
  .case .grid figure.ghost {
    display: block;
    position: absolute;
    left: var(--gx, 10%);
    top: var(--gy, 10%);
    width: var(--gw, 50%);
    margin: 0;
    z-index: 0;
    opacity: 0.13;
    filter: blur(13px) saturate(1.15);
    pointer-events: none;
    user-select: none;
  }
  .ghost img { width: 100%; height: auto; display: block; border-radius: 10px; }
}

/* photographs sit frameless (Daniel 2026-08-13) — the design cases keep
   their hairlines, the photo wall floats bare on the gallery ground */
.case--photo .frame { border: none; background: transparent; }

/* small strip (engine garment layer) — stays a quiet row under the scatter */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}
.strip .frame { aspect-ratio: 7 / 9; border-radius: 4px; }
.strip-caption { color: var(--gm, var(--muted)); font-size: 0.86rem; margin: 0 0 1.4rem; }

/* identity sub-blocks */
.sub-case { margin: 0 0 16vh; }
.sub-case:last-child { margin-bottom: 0; }

/* ---- about + contact ---- */

.about { padding: 18vh 0 1rem; }
.about h2 { margin: 0 0 0.8rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }
.about p { max-width: 40em; margin: 0 0 1rem; }

.contact { padding: 1rem 0 14vh; }
.contact h2 { margin: 0 0 0.8rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }
.contact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; }