/* ---------------------------------------------------------------
   Cranston v4 — five colour themes.
   Every theme is set on :root via data-theme so the switcher on the
   index page can change all three designs without a rebuild.

   Palette rule: the FINISHES are the only saturated thing on the page.
   Backgrounds stay in plaster territory — chalk, sand, putty, lime,
   slate. If a theme starts competing with a photograph of a wall,
   it's wrong.
   --------------------------------------------------------------- */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 62ch;
}

/* 1. LIME WASH — warm chalk. The safest and most "finished plaster". */
[data-theme='lime'] {
  --bg: #efece6;
  --bg-2: #e5e0d8;
  --surface: #f7f5f1;
  --ink: #1f1d1b;
  --ink-2: #5d574f;
  --line: #d3cdc3;
  --accent: #7d6a52;
  --accent-ink: #ffffff;
  --theme-name: 'Lime Wash';
}

/* 2. MORTEX — sand and deep charcoal. Closest to his actual micro cement. */
[data-theme='mortex'] {
  --bg: #e8e3dc;
  --bg-2: #d8d1c7;
  --surface: #f2efea;
  --ink: #22201d;
  --ink-2: #635c53;
  --line: #c9c1b5;
  --accent: #3f3a34;
  --accent-ink: #f2efea;
  --theme-name: 'Mortex';
}

/* 3. SLATE — cool grey-blue. Reads more architectural / commercial. */
[data-theme='slate'] {
  --bg: #e7e9ea;
  --bg-2: #d7dbdd;
  --surface: #f3f5f6;
  --ink: #191d20;
  --ink-2: #545c61;
  --line: #c2c8cb;
  --accent: #33454f;
  --accent-ink: #f3f5f6;
  --theme-name: 'Slate';
}

/* 4. UMBER — warm earth. The heritage / lime-plaster end of his work. */
[data-theme='umber'] {
  --bg: #efe8e0;
  --bg-2: #e2d7cb;
  --surface: #f8f4ef;
  --ink: #241c16;
  --ink-2: #6a5a4c;
  --line: #d5c6b6;
  --accent: #8a5a3b;
  --accent-ink: #fdfbf8;
  --theme-name: 'Umber';
}

/* 5. NIGHT — dark. Makes the finishes glow; strongest for micro cement,
      but hardest to keep friendly, so the body copy is deliberately warm. */
[data-theme='night'] {
  --bg: #171614;
  --bg-2: #201e1b;
  --surface: #262320;
  --ink: #f0ece5;
  --ink-2: #a79e91;
  --line: #3a352f;
  --accent: #c9a882;
  --accent-ink: #171614;
  --theme-name: 'Night';
}

/* --- primitives shared by all three designs --------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Portrait framing: eyes land on the upper-third line.
   The generated portraits are square with his head high-left, so
   50% 22% puts the eyeline at roughly a third down in a 4:5 or 3:4 box. */
.portrait { object-fit: cover; object-position: 50% 22%; width: 100%; height: 100%; }
.portrait--work { object-fit: cover; object-position: 62% 26%; width: 100%; height: 100%; }

/* --- the scroll device ------------------------------------------
   A "skim reveal": content wipes upward behind a soft edge, the way
   plaster is drawn up a wall. Deliberately slow and almost subliminal —
   a trowel pull, not a slide-in.
   Everything degrades to plain visible content without JS and is
   disabled entirely under prefers-reduced-motion.
   ---------------------------------------------------------------- */

.skim {
  --skim-shift: 26px;
  opacity: 0;
  transform: translateY(var(--skim-shift));
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
  will-change: opacity, transform;
}
.skim.is-in { opacity: 1; transform: none; }
.skim[data-delay='1'] { transition-delay: 0.08s; }
.skim[data-delay='2'] { transition-delay: 0.16s; }
.skim[data-delay='3'] { transition-delay: 0.24s; }

/* Image reveal: the photo is uncovered by a moving edge rather than faded. */
.skim-img { position: relative; overflow: hidden; }
.skim-img > img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease), clip-path 1.4s var(--ease);
  clip-path: inset(0 0 100% 0);
}
.skim-img.is-in > img { transform: scale(1); clip-path: inset(0 0 0 0); }

/* Scroll-linked parallax on hero media. --p is written by scroll.js. */
.parallax { will-change: transform; transform: translate3d(0, calc(var(--p, 0) * 1px), 0); }

/* Reading-progress hairline, used by all three designs. */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  background: var(--accent); transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
}

@media (prefers-reduced-motion: reduce) {
  .skim, .skim-img > img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .parallax { transform: none !important; }
}