/* Clotr's website (D81). Brand: signal orange #FF6700 for marks and the button, #B84A0C for orange text
   (5:1), ink text; the mind map's warm line runs down the page and each section hangs off it as a node.
   The look (D135, the same tokens as Clotr's own pages): warm paper, surfaces lit from the top, an orange sheen on the
   button. The one bold thing is the wall of everyday messages, each with the detail Clotr caught marked.
   Atkinson Hyperlegible is bundled (fonts/OFL.txt); nothing is loaded from other sites. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fbf8f5;
  --dot: #e8e0d8;
  --surface: #ffffff;
  --surface-2: #fffaf6;
  --ink: #0b0b0b;
  --ink-2: #534e49;
  --line: #9c958e;
  --faint: #ebe4dc;
  --ring: rgba(80, 45, 15, 0.12);
  --peach: #fff0e6;
  --signal: #ff6700;
  --orange-text: #b84a0c;
  --on-signal: #0b0b0b; /* 7:1 on #FF6700 */
  --rail: color-mix(in srgb, #ff6700 38%, #e3e5e9);
  --shadow: 0 1px 2px rgba(60, 30, 10, 0.06), 0 24px 50px -22px rgba(120, 60, 20, 0.28);
  --lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(60, 30, 10, 0.06), 0 14px 36px -18px rgba(120, 60, 20, 0.16);
  --sheen: linear-gradient(180deg, #ff8a3d, #ff6700 60%, #f25f00);
  --sheen-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    0 8px 16px -10px rgba(255, 103, 0, 0.65);
  --glow: rgba(255, 103, 0, 0.12);
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #16130f;
    --dot: #2a241e;
    --surface: #1f1b17;
    --surface-2: color-mix(in srgb, #ff6700 5%, #1f1b17);
    --ink: #f6f2ee;
    --ink-2: #cbc3ba;
    --line: #7d756d;
    --faint: #2f2923;
    --ring: rgba(255, 230, 205, 0.1);
    --peach: #33200f;
    --orange-text: #ff8a3d; /* 7:1 on the dark paper */
    --rail: color-mix(in srgb, #ff6700 38%, #2f2923);
    --shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
    --lift: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 36px -24px rgba(0, 0, 0, 0.8);
    --glow: rgba(255, 103, 0, 0.14);
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  color: var(--ink);
  font:
    400 1.125rem/1.6 "Atkinson Hyperlegible",
    system-ui,
    sans-serif;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--orange-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--signal);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}
code {
  font-size: 0.9em;
  background: var(--faint);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--surface);
  padding: 8px 12px;
  z-index: 2;
}
.skip:focus {
  top: 12px;
}

/* Header and footer */
.top,
.bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.top nav,
.bottom nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.top nav a,
.bottom nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1rem;
}
.top nav a:hover,
.bottom nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

/* Hero */
main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: center;
  padding: 48px 0 72px;
}
h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 14ch;
}
.lede {
  font-size: 1.25rem;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0 0 28px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 0 0 18px;
}
.button {
  display: inline-block;
  background: var(--signal);
  background-image: var(--sheen);
  color: var(--on-signal);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 14px;
  box-shadow: var(--sheen-shadow);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--sheen-shadow),
    0 12px 24px -10px rgba(255, 103, 0, 0.55);
}
.button:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}
.quiet {
  color: var(--ink);
  font-weight: 700;
  text-decoration-color: var(--signal);
}
.fine {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0;
}
/* The one glow on the page: warm light behind the map. */
.hero-map {
  margin: 0;
  position: relative;
}
.hero-map::before {
  content: "";
  position: absolute;
  inset: -6% -4% -6% 18%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
}

/* The spine: a slate line down the page; each section's heading is a node on it. */
.branches {
  position: relative;
  padding: 0 0 48px 56px;
}
.branches::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 48px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--signal), var(--rail) 18%, var(--faint));
}
.branches section {
  padding: 8px 0 64px;
  scroll-margin-top: 24px;
}
h2 {
  position: relative;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
h2::before {
  content: "";
  position: absolute;
  left: -56px;
  top: 0.12em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--rail);
  box-shadow: 0 0 0 5px var(--paper);
}
h2::after {
  /* the twig from the node to the heading */
  content: "";
  position: absolute;
  left: -26px;
  top: calc(0.12em + 11px);
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--rail);
}
.branches p,
.steps,
.promises {
  max-width: var(--measure);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: start;
}
figure {
  margin: 0;
}
.split figure img {
  border-radius: 14px;
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--ring);
}

/* A real sequence, so numbers. */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 18px 48px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--signal);
  background-image: var(--sheen);
  box-shadow: var(--sheen-shadow);
  color: var(--on-signal);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

/* What it catches: plain pairs, two columns. */
.catches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  margin: 0;
  max-width: 60rem;
}
.catches dt {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 4px;
  padding-left: 22px;
  position: relative;
}
.catches dt::before {
  /* a small bandage, like on the map */
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 9px;
  height: 20px;
  border-radius: 5px;
  background: var(--ink);
  box-shadow:
    inset 0 0 0 2.5px var(--ink),
    inset 0 0 0 9px var(--signal);
  transform: rotate(-18deg);
}
.catches dd {
  margin: 0;
  padding-left: 22px;
  color: var(--ink-2);
}

.promises {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 8px 0 14px;
}

/* Wherever you type something private: everyday messages in three places, the caught detail marked in each. */
.places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 32px;
  margin: 28px 0 8px;
  max-width: 68rem;
}
.branches .place {
  padding: 0; /* not a spine section: no gap below it */
}
.moment {
  margin: 0 0 26px;
}
.moment figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--ink-2);
}
.moment figcaption b {
  color: var(--ink);
}
.app {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--signal) 9%, var(--faint));
}
.bubble {
  margin: 0;
  padding: 13px 16px;
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:
    var(--lift),
    inset 0 0 0 1px var(--ring);
  font-size: 1.05rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.bubble mark {
  color: inherit;
  background: var(--peach);
  border-radius: 5px;
  padding: 0 3px;
  text-decoration: underline wavy var(--signal) 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.caught {
  position: relative;
  margin: 10px 0 0;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.caught::before {
  /* the bandage from the map, small */
  content: "";
  position: absolute;
  left: 5px;
  top: 0.1em;
  width: 9px;
  height: 20px;
  border-radius: 5px;
  background: var(--ink);
  box-shadow:
    inset 0 0 0 2.5px var(--ink),
    inset 0 0 0 9px var(--signal);
  transform: rotate(-18deg);
}
.branches .where {
  display: grid;
  gap: 14px;
  margin: 8px 0 14px;
  padding: 18px 20px;
  max-width: 68rem;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:
    var(--lift),
    inset 0 0 0 1px var(--ring);
}
.where div {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
}
.where dt {
  font-weight: 700;
}
.where dd {
  margin: 0;
  line-height: 2;
  color: var(--ink-2);
}
.promises li {
  padding: 0 0 16px;
}

.bottom {
  border-top: 1px solid var(--faint);
  padding-top: 28px;
  padding-bottom: 40px;
}
.bottom p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
}

@media (max-width: 1000px) {
  .places {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--measure);
  }
}

/* Narrow screens: the map moves under the text, sections stack. */
@media (max-width: 820px) {
  .where div {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    padding: 24px 0 48px;
  }
  /* Keep the map's labels readable: it scrolls sideways in its own frame instead of shrinking. */
  .hero-map {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .hero-map img {
    width: 560px;
    max-width: none;
  }
  .catches {
    grid-template-columns: minmax(0, 1fr);
  }
  .branches {
    padding-left: 40px;
  }
  .branches::before {
    left: 7px;
  }
  h2::before {
    left: -40px;
    width: 22px;
    height: 22px;
  }
  h2::after {
    left: -18px;
    top: calc(0.12em + 9px);
    width: 10px;
  }
}

/* The one-page guide to print (guide.html): large type, black on white on paper whatever the screen's theme. */
.guide-sheet {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 24px 64px;
}
.guide {
  background: var(--surface);
  border: 2px solid var(--faint);
  border-radius: 16px;
  padding: 28px 32px;
  font-size: 1.2rem;
  line-height: 1.55;
}
.guide-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.guide h1 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  margin: 0;
  max-width: none;
}
.guide h2 {
  font-size: 1.3rem;
  margin: 22px 0 4px;
}
.guide h2::before,
.guide h2::after {
  display: none;
}
.guide p,
.guide ul {
  margin: 0 0 8px;
}
.guide-scam {
  margin-top: 18px !important;
  padding: 12px 14px;
  border-left: 6px solid var(--signal);
  border-radius: 4px 12px 12px 4px;
  background: var(--faint);
}
.guide-fill {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px !important;
  font-weight: 700;
}
.guide-fill .blank {
  flex: 1;
  min-height: 1.4em;
  border-bottom: 2px solid var(--ink-2);
}
@media print {
  .no-print,
  .skip {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .guide-sheet {
    padding: 0;
  }
  .guide {
    border: none;
    padding: 0;
    background: #fff;
    font-size: 15pt;
  }
  .guide,
  .guide * {
    color: #000 !important;
  }
  .guide-scam {
    background: #fff;
    border-left-color: #000;
  }
  .guide-fill .blank {
    border-bottom-color: #000;
  }
}