/* theconsumerhypocrisy.com — "The Overlap" identity.
 *
 * The book is about what sits in the gap between what people say and what they
 * do, so the system is built on the one place two positions overlap: the mark
 * is two circles with only their lens filled, and the highlighter is the accent.
 *
 * Yellow never carries text. It sits behind it, the way a marker does — at
 * 1.4:1 against paper it would fail every contrast threshold as a text colour.
 *
 * Deliberately clear of the rest of the estate: Siftbox owns teal, The Data
 * Human terracotta, GradMark navy and purple, andrewko.ca green. No Inter
 * either — it sets every other property, so keeping it here would have undone
 * most of the separation before the palette got a chance.
 */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  --ink: #14161a;
  --ink-2: #6b7078;
  --ink-3: #9aa0a6;
  --paper: #f5f6f6;
  --surface: #ffffff;
  --highlight: #efe34a;
  /* Fixed in every theme. The swipe is always yellow, so the text on it is
     always dark — flipping this with the theme would make it unreadable. */
  --on-highlight: #14161a;
  --rule: rgba(20, 22, 26, 0.13);
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  padding: clamp(3rem, 11vh, 7rem) 1.5rem clamp(2.5rem, 8vh, 5rem);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { max-width: var(--measure); margin: 0 auto; }

p { text-wrap: pretty; }
cite { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 1.05em; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink-3); }

/* The swipe rides the inline box with em-scaled padding, so one rule holds from
   captions up to the headline. box-decoration-break keeps it intact when a
   highlighted phrase wraps across two lines. */
.hl {
  display: inline;
  background-color: var(--highlight);
  color: var(--on-highlight);
  padding: 0.02em 0.16em;
  border-radius: 0.14em 0.5em 0.2em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.mark {
  display: block;
  width: 3.5rem;
  height: auto;
  margin-bottom: 1.75rem;
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.deck {
  margin: 1.25rem 0 0;
  font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink);
}

.lede { margin: 1.1rem 0 0; color: var(--ink-2); font-size: 1rem; }

/* ---- signup ---- */

.signup {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.field { display: flex; gap: 0.5rem; max-width: 26rem; }

input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

input[type="email"]::placeholder { color: var(--ink-3); }

input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.1);
}

button[type="submit"] {
  flex: none;
  padding: 0.65rem 1.25rem;
  font-family: 'Plex Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: background 130ms ease;
}

button[type="submit"]:hover:not(:disabled) { background: #2b2f36; }
button[type="submit"]:disabled { opacity: 0.5; cursor: default; }

.status { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.status:not(:empty) { margin-top: 0.6rem; }
.status[data-state="error"] { color: #a8342c; }
.status[data-state="ok"] { color: var(--ink); }

.fineprint {
  margin: 0.6rem 0 0;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- blocks ---- */

.block { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.block p { margin: 0 0 0.9rem; color: var(--ink-2); }
.block p:last-child { margin-bottom: 0; }

.section-label {
  margin: 0 0 1.1rem;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pull {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.4rem, 3.6vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
}

.covers { list-style: none; margin: 0; padding: 0; }

.covers li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.5rem;
  align-items: baseline;
}
.covers li:first-child { border-top: 1px solid var(--rule); }
/* The next section supplies its own top rule, so the list's final border would
   stack into a double line with a hairline gap. */
.covers li:last-child { border-bottom: 0; }

/* The book has chapters, so the numbering is real sequence rather than
   decoration — it is the order the argument is made in. */
.covers .n {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- foot ---- */

.foot { margin-top: 3.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.foot p { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }

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

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

@media (max-width: 24rem) {
  .field { flex-direction: column; }
  button[type="submit"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }