/* ============================================================
   STORY HARD — an anti-agency manifesto. A TRUERY show.
   Paper, ink, and one tracked change. The writing does the work.
   Theme is token-driven: add  html[data-theme="dark"]  to flip.
   ============================================================ */

:root {
  /* paper (default) */
  --paper:      #f4f0e7;
  --paper-edge: #ece5d8;
  --ink:        #1c1916;
  --ink-soft:   #574f43;
  --ink-faint:  #95897a;
  --rule:       rgba(28, 25, 22, 0.14);
  --accent:     #b4541f;   /* burnt sienna, used sparingly */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --measure: 39rem;        /* the reading column */
}

html[data-theme="dark"] {
  --paper:      #0b0a09;
  --paper-edge: #131210;
  --ink:        #efe9dd;
  --ink-soft:   #b1a899;
  --ink-faint:  #7b7264;
  --rule:       rgba(239, 233, 221, 0.13);
  --accent:     #e0863f;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: 1.6rem; }

/* ---------- masthead (running head) ---------- */

.masthead {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s ease;
}
.masthead.scrolled { border-bottom-color: var(--rule); }
.masthead__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: 1.05rem;
}
.brand {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.06rem; letter-spacing: 0.005em;
  color: var(--ink); text-decoration: none;
}
.brand__tag {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- the document ---------- */

.doc { padding-bottom: 8vh; }

.mv {
  position: relative;
  max-width: var(--measure); margin-inline: auto;
  padding-inline: 1.6rem;
  margin-top: 16vh;
}
.mv--lede { margin-top: 10vh; }
.mv--ask { margin-top: 18vh; }

/* faint editorial wayfinding number in the margin */
.mv::before {
  content: attr(data-mv);
  position: absolute; left: -2.4rem; top: 0.5rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; color: var(--ink-faint);
  opacity: 0.7;
}

.mv p {
  font-weight: 400;
  font-size: clamp(1.18rem, 1rem + 0.9vw, 1.42rem);
  line-height: 1.62;
  letter-spacing: 0.001em;
  max-width: 33ch;
  text-wrap: pretty;
}

/* the opening line carries the weight — quietly bold */
.mv--lede p {
  font-size: clamp(1.7rem, 1.1rem + 3vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  max-width: 18ch;
  font-weight: 380;
}

/* ---------- the tracked change: inevitable -> hard ---------- */
/* default (no JS) shows the finished edit so meaning always survives */

.edit { white-space: nowrap; }
.edit__old {
  position: relative;
  color: var(--ink-soft);
}
.edit__old::after {
  content: ""; position: absolute; left: -0.02em; right: -0.02em; top: 0.58em;
  height: 0.055em; background: currentColor;
  transform: scaleX(1); transform-origin: left center;
}
.edit__new {
  color: var(--accent);
  font-style: italic;
  margin-left: 0.32em;
}

/* when JS is on, hold the edit closed until it scrolls into view */
html.js .edit__old { color: var(--ink); }
html.js .edit__old::after {
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
html.js .edit__new {
  opacity: 0;
  margin-left: 0; max-width: 0; overflow: hidden;
  display: inline-block; vertical-align: bottom;
  transition: opacity 0.5s ease 0.35s, max-width 0.5s ease 0.3s, margin-left 0.5s ease 0.3s;
}
html.js .edit.done .edit__old { color: var(--ink-soft); }
html.js .edit.done .edit__old::after { transform: scaleX(1); }
html.js .edit.done .edit__new { opacity: 1; max-width: 6ch; margin-left: 0.32em; }

/* ---------- the ask ---------- */

.ask__lead { margin-bottom: 2.2rem; }

.join { max-width: 30rem; }
.join__field {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.7rem;
  transition: border-color 0.4s ease;
}
.join__field:focus-within { border-color: var(--accent); }

.join input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--ink);
  font-family: var(--mono); font-size: 0.96rem; letter-spacing: 0.005em;
}
.join input::placeholder { color: var(--ink-faint); }

.join__go {
  flex: none; display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  padding: 0.2rem 0;
  transition: color 0.3s ease, gap 0.3s ease;
}
.join__go:hover { color: var(--accent); gap: 0.75em; }
.join__go svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.join__go:hover svg { transform: translateX(2px); }

.status {
  margin-top: 1.1rem; min-height: 1em;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0; transition: opacity 0.5s ease;
}
.status.show { opacity: 1; }
.status.err { color: var(--accent); }

.join.done .join__field { display: none; }
.join.done .status { font-size: 0.82rem; color: var(--ink); }

/* ---------- footer ---------- */

.foot { margin-top: 12vh; border-top: 1px solid var(--rule); }
.foot__row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.6rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.foot__truery {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--ink-faint); text-decoration: none;
  transition: color 0.3s ease;
}
.foot__truery:hover { color: var(--ink-soft); }
/* white wordmark asset -> invert to ink on paper (TRUERY brand rule) */
.foot__truery img { height: 8px; width: auto; filter: invert(1); opacity: 0.62; transform: translateY(0.5px); }
html[data-theme="dark"] .foot__truery img { filter: none; opacity: 0.7; }

/* ---------- scroll reveal (progressive, never hides content w/o JS) ---------- */

html.js .mv { opacity: 0; transform: translateY(15px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 1, 0.36, 1); }
html.js .mv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 700px) {
  .mv::before { left: 1.6rem; top: -1.6rem; }
  .mv { margin-top: 13vh; }
  .mv--lede { margin-top: 8vh; }
}

/* ---------- reduced motion: everything still, edit shown finished ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js .mv { opacity: 1; transform: none; transition: none; }
  html.js .edit__old { color: var(--ink-soft); }
  html.js .edit__old::after { transform: scaleX(1); transition: none; }
  html.js .edit__new { opacity: 1; max-width: 6ch; margin-left: 0.32em; transition: none; }
  .join__go svg, .join__go { transition: none; }
  .masthead { transition: none; }
}