/* Stet.
 *
 * The world is a galley proof: paper, a copy editor's marks, and the non-photo blue pencil that
 * printers could not see. That blue is the accent, red is deletion, and neither is decoration:
 * they are the two colours the craft actually uses.
 *
 * Deliberately not the warm-cream-and-terracotta look every generated landing page arrives in.
 * Paper is cool white here, the way a proof is, and the accent is a colour nobody picks.
 */

:root {
  --paper: #fbfbf9;
  --paper-edge: #f1f1ec;
  --ink: #16161a;
  --ink-soft: #55555f;
  --ink-faint: #8b8b95;
  --rule: #e2e2db;

  /* Non-photo blue. The pencil a copy editor marks with, chosen because the camera could not see
     it. Nothing else on the web uses it, which is the point. */
  --pencil: #2c6d9e;
  --pencil-wash: #eaf2f8;
  --strike: #c0392b;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14141a;
    --paper-edge: #1b1b22;
    --ink: #eeeef0;
    --ink-soft: #a9a9b4;
    --ink-faint: #74747f;
    --rule: #2b2b34;
    --pencil: #7db8e0;
    --pencil-wash: #1b2733;
    --strike: #e07a6e;
  }
}
:root[data-theme="dark"] {
  --paper: #14141a;
  --paper-edge: #1b1b22;
  --ink: #eeeef0;
  --ink-soft: #a9a9b4;
  --ink-faint: #74747f;
  --rule: #2b2b34;
  --pencil: #7db8e0;
  --pencil-wash: #1b2733;
  --strike: #e07a6e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.measure { max-width: var(--measure); }

/* --- masthead ------------------------------------------------------------ */

.top {
  display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.75rem 0 0;
}
.mark {
  font-family: var(--mono); font-size: 1rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}
.mark b { font-weight: 400; border-bottom: 2px solid var(--pencil); padding-bottom: 2px; }
.top nav { margin-left: auto; display: flex; gap: 1.5rem; }
.top nav a {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.top nav a:hover { color: var(--ink); border-bottom-color: var(--pencil); }

/* --- the proof ------------------------------------------------------------ */

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -0.021em; font-weight: 400;
  margin: 0 0 1.5rem; text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--ink-soft); margin: 0 0 2.75rem; }

/* The demonstration. A page of proof with one sentence struck out and restored by a margin mark. */
.proof {
  position: relative;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem)
           clamp(4.5rem, 11vw, 7.5rem);
  font-size: 1.02rem; line-height: 1.85;
}
.proof p { margin: 0 0 .9rem; color: var(--ink-soft); }
.proof p:last-child { margin-bottom: 0; }

.proof .kept { color: var(--ink); position: relative; }
/* The strike is drawn rather than a line-through, so it can be animated and so it sits where a
   pencil would put it rather than where the font metrics would. */
.proof .kept::after {
  content: ""; position: absolute; left: -.1em; right: -.1em; top: 52%;
  height: 2px; background: var(--strike); transform-origin: left; transform: scaleX(0);
  animation: strike 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes strike {
  0%, 8%    { transform: scaleX(0); }
  22%, 58%  { transform: scaleX(1); }
  72%, 100% { transform: scaleX(0); }
}

.margin-mark {
  position: absolute; left: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pencil); opacity: 0;
  animation: mark 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.margin-mark::after {
  content: ""; display: block; height: 1px; background: var(--pencil); margin-top: .35rem;
}
@keyframes mark {
  0%, 26%   { opacity: 0; transform: translateY(-50%) translateX(-.4rem); }
  38%, 62%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  78%, 100% { opacity: 0; transform: translateY(-50%) translateX(-.4rem); }
}

.proof-note {
  margin: .9rem 0 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .proof .kept::after, .margin-mark { animation: none; }
  .proof .kept::after { transform: scaleX(1); }
  .margin-mark { opacity: 1; transform: translateY(-50%); }
}

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

section { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--rule); }

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 400; letter-spacing: -0.014em;
  margin: 0 0 1.75rem; text-wrap: balance;
}
h3 { font-size: 1.12rem; font-weight: 400; margin: 0 0 .4rem; }
p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pencil); margin: 0 0 .9rem;
}

.failures { display: grid; gap: 2.25rem; }
@media (min-width: 52rem) { .failures { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.failure { border-top: 2px solid var(--strike); padding-top: 1rem; }
.failure:nth-child(2) { border-top-color: var(--pencil); }
.failure:nth-child(3) { border-top-color: var(--ink-faint); }
.failure p { font-size: .96rem; color: var(--ink-soft); margin: 0; }

/* The three states, as a proof sheet rather than a table of features. */
.states { border-top: 1px solid var(--rule); }
.state {
  display: grid; gap: .25rem 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) { .state { grid-template-columns: 9rem 1fr; } }
.state dt {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; color: var(--pencil);
}
.state dd { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.state dd b { color: var(--ink); font-weight: 400; }

pre {
  background: var(--paper-edge); border: 1px solid var(--rule);
  padding: 1.1rem 1.25rem; overflow-x: auto; margin: 0 0 1.15rem;
  font-family: var(--mono); font-size: .84rem; line-height: 1.7; color: var(--ink-soft);
}
pre b { color: var(--ink); font-weight: 400; }
code { font-family: var(--mono); font-size: .88em; color: var(--pencil); }

.cmds { display: grid; gap: 1.75rem; }
@media (min-width: 44rem) { .cmds { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 3rem; } }
.cmd h3 { font-family: var(--mono); font-size: .9rem; letter-spacing: .04em; color: var(--ink); }
.cmd p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.foot {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 4rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-faint);
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline;
}
.foot a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--ink); border-bottom-color: var(--pencil); }
.foot .right { margin-left: auto; }

/* --- the voice library ---------------------------------------------------- */

.mark a { color: inherit; text-decoration: none; }

.hero-voices { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* The finding the whole library rests on, set as a pulled quote on the proof stock. */
.finding {
  max-width: calc(var(--measure) + 4rem);
  background: var(--paper-edge); border-left: 3px solid var(--pencil);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.9rem);
  max-width: 40rem;
}
.hero-voices .proof-note { max-width: calc(var(--measure) + 4rem); }
.finding p { margin: 0; font-size: 1.02rem; line-height: 1.75; }
.finding .cite {
  margin-top: .8rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-faint);
}
.finding .cite i { font-style: italic; }

.voices { display: grid; gap: 2.75rem; }
@media (min-width: 56rem) { .voices { grid-template-columns: repeat(2, 1fr); gap: 3rem 3.5rem; } }

.voice {
  border-top: 2px solid var(--pencil); padding-top: 1.1rem; scroll-margin-top: 2rem;
  display: flex; flex-direction: column;
}
.voice details { margin-top: auto; }
.voice > header { margin-bottom: 1rem; }
.voice h3 {
  font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 .45rem;
}
.voice .desc { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* The counts, as a spec strip. Every figure here came out of a real text. */
.measured {
  display: flex; flex-wrap: wrap; gap: .1rem 1.9rem; margin: 0 0 1.1rem;
  padding: .55rem 0 .5rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.measured > div { padding: .25rem 0; }
.measured dt {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .12rem; white-space: nowrap;
}
.measured dd {
  margin: 0; font-family: var(--mono); font-size: .95rem; color: var(--pencil);
  font-variant-numeric: tabular-nums;
}

.onerule { font-size: .97rem; color: var(--ink-soft); margin: 0 0 1rem; }
.onerule b { color: var(--ink); font-weight: 400; }

.unresearched {
  font-size: .88rem; color: var(--ink-soft); margin: 0 0 1rem;
  border-left: 2px solid var(--strike); padding-left: .85rem;
}

/* Eased disclosure. Chrome animates ::details-content once sizes interpolate; elsewhere it opens
   plainly, which is correct rather than broken. */
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

.voice details { border-top: 1px solid var(--rule); }
.voice summary {
  list-style: none; cursor: pointer; padding: .7rem 0;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pencil); transition: color 200ms ease;
  display: flex; align-items: center; gap: .5rem;
}
.voice summary::-webkit-details-marker { display: none; }
.voice summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.voice details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.voice summary:hover { color: var(--ink); }

.voice details::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease,
              content-visibility 320ms allow-discrete;
}
.voice details[open]::details-content { block-size: auto; opacity: 1; }

.detail { padding-bottom: 1.25rem; }
.fold { margin-bottom: 1.35rem; }
.fold h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 400; margin: 0 0 .5rem;
}
.fold ul { margin: 0; padding: 0; list-style: none; }
.fold li {
  font-size: .89rem; color: var(--ink-soft); line-height: 1.6; padding: .22rem 0 .22rem .95rem;
  position: relative;
}
.fold li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: .4rem; height: 1px;
  background: var(--rule);
}
.fold li b { color: var(--ink); font-weight: 400; }
.never li::before { background: var(--strike); }
.tells li::before { background: var(--pencil); }

.detect, .sources, .filelink { font-size: .84rem; color: var(--ink-soft); margin: .7rem 0 0; }
.detect span, .sources span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: .4rem;
}
.sources { color: var(--ink-faint); }
.filelink a { color: var(--pencil); text-decoration: none; border-bottom: 1px solid var(--rule); }
.filelink a:hover { border-bottom-color: var(--pencil); }

/* The cross-cutting index. Set as a proof list: the failure on the left, its source in the margin. */
.telldex { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.telldex li {
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: .62rem 0; border-bottom: 1px solid var(--rule); font-size: .93rem;
}
.telldex li span { color: var(--ink-soft); }
.telldex li span b { color: var(--ink); font-weight: 400; }
.telldex li a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none; white-space: nowrap; flex: none;
  border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease;
}
.telldex li a:hover { color: var(--pencil); border-bottom-color: var(--pencil); }

@media (prefers-reduced-motion: reduce) {
  .voice summary::after, .voice details::details-content { transition: none; }
}

.more {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pencil); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.more:hover { border-bottom-color: var(--pencil); color: var(--ink); }
.more::after { content: " \2192"; }

/* What a register is for. Above the rules, because the rules only make sense as a means to it. */
.feeling { font-size: .93rem; color: var(--ink); margin: .55rem 0 0; }
.feeling span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pencil); margin-right: .45rem;
}