/* The Places You Will Go & The People You Know — one page, two siblings.
   Shared cream paper; the Places half borrows the route card's red ink and
   Limelight, the People half borrows the watercolor theme's terracotta and Caveat. */

:root {
  --paper: #FBF6EA;
  --paper-deep: #F2E9D3;
  --card: #FFFDF7;
  --ink: #2F2418;
  --ink-soft: #4C3D2C;
  --muted: #7A6A52;
  --rule: #DCCCA8;

  /* The Places You Will Go — Air Mail 1934 */
  --rouge: #B8371F;
  --rouge-deep: #8E2814;
  --brass: #A8823C;
  --chart: #F4E7C8;

  /* The People You Know — Aqua */
  --terra: #C26D50;
  --terra-deep: #7A4A32;
  --sage: #A9BD97;
  --sky: #7E9EB5;
  --wash: #FAF6EE;

  --f-body: "Crimson Pro", "Iowan Old Style", Palatino, Georgia, serif;
  --f-ui: "Josefin Sans", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --f-places: Limelight, "Josefin Sans", Impact, sans-serif;
  --f-type: "Special Elite", "Courier New", ui-monospace, monospace;
  --f-people: Caveat, "Marker Felt", "Comic Sans MS", cursive;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge); text-underline-offset: 2px; }
a:hover { color: var(--rouge-deep); }
code { font-family: var(--f-type); font-size: .9em; background: rgba(168,130,60,.14); padding: .05em .35em; border-radius: 3px; }
strong { color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  max-width: 1040px; margin: 0 auto; padding: 14px 24px;
  font-family: var(--f-ui); font-size: .8rem; letter-spacing: .06em;
}
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--rouge); }
.topbar__sites { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── hero ────────────────────────────────────────────────── */
.hero { max-width: 1040px; margin: 0 auto; padding: 18px 24px 8px; text-align: center; }
.kicker {
  font-family: var(--f-ui); font-weight: 700; font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
}
.hero h1 { margin: 14px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.t-places {
  font-family: var(--f-places); font-weight: 400; text-transform: uppercase;
  color: var(--rouge); font-size: clamp(2rem, 6.2vw, 3.6rem); letter-spacing: .02em; line-height: 1.05;
}
.amp { font-family: var(--f-body); font-style: italic; font-weight: 400; color: var(--muted); font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.1; }
.t-people {
  font-family: var(--f-people); font-weight: 700; color: var(--terra-deep);
  font-size: clamp(2.5rem, 7.6vw, 4.5rem); line-height: .95;
}
.deck { max-width: 42rem; margin: 10px auto 26px; font-size: 1.2rem; color: var(--ink-soft); }

.hero__art { margin: 0 auto 28px; max-width: 920px; }
.hero__art img {
  width: 100%; border-radius: 10px; border: 1px solid var(--rule);
  box-shadow: 0 2px 4px rgba(60,40,10,.08), 0 14px 34px rgba(60,40,10,.12);
}

.pitches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.pitch {
  position: relative; padding: 24px 24px 22px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--rule); display: flex; flex-direction: column;
}
.pitch p { margin: 0 0 12px; }
.pitch h2 { margin: 6px 0 10px; }
.pitch__label { font-family: var(--f-ui); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pitch__price { font-family: var(--f-type); font-size: .88rem; color: var(--muted); margin-top: auto !important; }
.pitch__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pitch--places { background: var(--chart) var(--grain); border-color: #D8BF8C; border-top: 4px solid var(--rouge); }
.pitch--places .pitch__label { color: var(--rouge); }
.pitch--places h2 { font-family: var(--f-places); font-weight: 400; text-transform: uppercase; font-size: 1.55rem; color: var(--ink); }
.pitch--people {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(126,158,181,.22), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(169,189,151,.28), transparent 55%),
    var(--wash);
  border-top: 4px solid var(--terra);
}
.pitch--people .pitch__label { color: var(--terra); }
.pitch--people h2 { font-family: var(--f-people); font-size: 2.15rem; color: var(--terra-deep); }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-ui); font-weight: 700; font-size: .86rem; letter-spacing: .06em;
  border: 2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(60,40,10,.15); }
.btn--places { background: var(--rouge); color: #FFF6E6; text-transform: uppercase; border-radius: 4px; }
.btn--places:hover { background: var(--rouge-deep); color: #FFF6E6; }
.btn--people { background: var(--terra); color: #FFFDF8; }
.btn--people:hover { background: var(--terra-deep); color: #FFFDF8; }
.btn--ghost { border-color: currentColor; color: var(--ink-soft); background: transparent; }
.btn--ghost:hover { color: var(--ink); background: rgba(255,255,255,.5); }

/* ── jump nav ────────────────────────────────────────────── */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 6px; }
.jump a {
  font-family: var(--f-ui); font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
}
.jump a:hover { color: var(--rouge); border-color: var(--brass); }

/* ── bands (neutral sections) ────────────────────────────── */
.band { padding: 64px 0; border-top: 1px solid var(--rule); }
.band--plain { background: var(--paper-deep); }
.band__title {
  font-family: var(--f-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: 1.35rem; text-align: center;
}
.band__lede { text-align: center; color: var(--muted); font-style: italic; margin: 8px 0 30px; font-size: 1.15rem; }

/* ── comparison ──────────────────────────────────────────── */
.compare { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--card); }
.compare__row { display: grid; grid-template-columns: 11rem 1fr 1fr; }
.compare__row + .compare__row { border-top: 1px solid var(--rule); }
.compare__row > div { padding: 13px 18px; }
.compare__k {
  font-family: var(--f-ui); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-deep); padding-top: 16px !important;
}
.compare .c-places { background: rgba(244,231,200,.55); }
.compare .c-people { background: rgba(250,246,238,.9); border-left: 1px solid var(--rule); }
.compare__head > div { padding: 16px 18px; }
.compare__head .c-places { font-family: var(--f-places); text-transform: uppercase; color: var(--rouge); font-size: 1.05rem; background: var(--chart); border-bottom: 3px solid var(--rouge); }
.compare__head .c-people { font-family: var(--f-people); font-weight: 700; color: var(--terra-deep); font-size: 1.6rem; line-height: 1; background: var(--wash); border-bottom: 3px solid var(--terra); }
.compare__head > div:first-child { background: var(--paper-deep); }

/* ── which one ───────────────────────────────────────────── */
.which { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.which__card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 22px; }
.which__if { margin: 0 0 12px; font-style: italic; font-size: 1.12rem; color: var(--ink); }
.which__if::before { content: "If\00a0"; font-family: var(--f-ui); font-style: normal; font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }
.which__then { margin: 0; }
.which__card--places { border-top: 4px solid var(--rouge); }
.which__card--people { border-top: 4px solid var(--terra); }
.which__card--both { background: linear-gradient(90deg, var(--rouge), var(--terra)) top / 100% 4px no-repeat, var(--card); padding-top: 25px; }

/* ── site sections ───────────────────────────────────────── */
.site { padding: 72px 0 76px; position: relative; }
.site__masthead { position: relative; text-align: center; margin-bottom: 24px; }
.site__url { font-family: var(--f-type); font-size: .9rem; color: var(--muted); }
.site__masthead h2 { margin: 6px 0 4px; }
.site__tag { margin: 0; font-style: italic; color: var(--muted); }
.site__lede { max-width: 44rem; margin: 0 auto 30px; font-size: 1.22rem; text-align: center; }

.stamp {
  position: absolute; top: -40px; right: 0; transform: rotate(7deg);
  font-family: var(--f-ui); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px; border: 2.5px solid; border-radius: 4px; opacity: .85;
}
.stamp--places { color: var(--rouge); border-color: var(--rouge); box-shadow: inset 0 0 0 2px rgba(184,55,31,.25); }
.stamp--people { color: var(--terra); border-color: var(--terra); border-style: dashed; border-radius: 999px; transform: rotate(-6deg); font-family: var(--f-people); font-size: 1.1rem; letter-spacing: .03em; text-transform: none; }

.site--places {
  background-color: var(--chart); background-image: var(--grain); background-size: 240px 240px;
  border-top: 6px double var(--rouge); border-bottom: 1px solid #D8BF8C;
}
.site--places .site__masthead h2 {
  font-family: var(--f-places); font-weight: 400; text-transform: uppercase; color: var(--rouge);
  font-size: clamp(2rem, 5.6vw, 3.1rem); letter-spacing: .02em;
}
.site--people {
  background:
    radial-gradient(ellipse 60% 40% at 92% 6%, rgba(126,158,181,.20), transparent 70%),
    radial-gradient(ellipse 50% 35% at 4% 40%, rgba(169,189,151,.22), transparent 70%),
    radial-gradient(ellipse 55% 35% at 96% 82%, rgba(194,109,80,.12), transparent 70%),
    var(--wash);
  border-bottom: 1px solid var(--rule);
}
.site--people .site__masthead h2 {
  font-family: var(--f-people); font-weight: 700; color: var(--terra-deep); font-size: clamp(2.6rem, 7vw, 4rem);
}
.site--people .site__tag { font-family: var(--f-people); font-style: normal; font-size: 1.4rem; }

.sub {
  margin: 52px 0 20px; text-align: center; font-family: var(--f-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; font-size: 1rem;
  display: flex; align-items: center; gap: 14px;
}
.sub::before, .sub::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.site--places .sub { color: var(--rouge-deep); }
.site--people .sub { color: var(--terra-deep); font-family: var(--f-people); text-transform: none; letter-spacing: .02em; font-size: 1.75rem; }

/* screenshots and art */
.shot { margin: 30px auto; max-width: 920px; }
.shot img { width: 100%; border-radius: 8px; }
.shot--framed img { border: 1px solid rgba(60,40,10,.18); box-shadow: 0 2px 4px rgba(60,40,10,.08), 0 12px 28px rgba(60,40,10,.12); }
.shot figcaption { margin-top: 10px; font-size: .98rem; color: var(--muted); font-style: italic; text-align: center; }
.site--people .shot figcaption { font-style: normal; font-family: var(--f-people); font-size: 1.3rem; color: var(--ink-soft); line-height: 1.3; }

/* what it is / isn't */
.isnt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 920px; margin: 0 auto; }
.isnt__item { background: rgba(255,253,247,.75); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; }
.isnt__no, .isnt__yes { display: block; font-family: var(--f-ui); font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.isnt__no { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; }
.site--people .isnt__no { text-decoration-color: var(--terra); }
.isnt__item--yes { background: var(--card); border: 2px solid var(--rouge); }
.isnt__item--yes .isnt__yes { color: var(--rouge); }
.site--people .isnt__item--yes { border-color: var(--terra); }
.site--people .isnt__item--yes .isnt__yes { color: var(--terra-deep); }

/* feature grid (Places) */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { background: rgba(255,253,247,.7); border: 1px solid #D8BF8C; border-radius: 6px; padding: 18px; }
.feature h4 { font-family: var(--f-ui); font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--rouge-deep); margin-bottom: 6px; }
.feature p { margin: 0; font-size: 1.02rem; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.steps li { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.steps li > img { width: 132px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.steps h4 { font-family: var(--f-ui); font-weight: 700; font-size: 1.02rem; margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; }
.steps p { margin: 0; font-size: 1.02rem; }
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .82rem; flex: none; }
.steps--places .n { background: var(--rouge); color: var(--chart); }
.steps--places li { border-color: #D8BF8C; }
.steps--people li { grid-template-columns: 96px 1fr; }
.step__icon { width: 96px; height: 96px; }
.steps--people .n { background: var(--terra); color: var(--wash); font-family: var(--f-people); font-size: 1.15rem; }
.steps--people h4 { font-family: var(--f-people); font-size: 1.55rem; font-weight: 700; color: var(--terra-deep); }

/* two-column panels */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.panel { background: var(--card); border: 1px solid #D8BF8C; border-radius: 10px; padding: 22px 24px; }
.panel__title { font-family: var(--f-places); font-weight: 400; text-transform: uppercase; color: var(--rouge); font-size: 1.3rem; margin-bottom: 10px; }
.panel ul { margin: 0; padding-left: 1.1rem; }
.panel li { margin-bottom: 9px; }
.panel li::marker { color: var(--rouge); }
.panel p { margin: 0 0 10px; }
.panel__art { width: 120px; float: right; margin: -4px 0 6px 12px; border-radius: 6px; }
.panel__fine { font-size: .95rem; color: var(--muted); font-style: italic; margin-bottom: 0 !important; }
.panel--people { border-color: var(--rule); background: rgba(255,253,248,.85); }
.panel--people .panel__title { font-family: var(--f-people); font-weight: 700; text-transform: none; color: var(--terra-deep); font-size: 2rem; }

/* callouts */
.callout { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 24px 26px; border-radius: 10px; }
.callout p { margin: 4px 0 0; }
.callout__label { font-family: var(--f-ui); font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rouge); }
.callout__actions { display: flex; flex-direction: column; gap: 10px; flex: none; }
.callout--places { background: var(--card); border: 2px dashed var(--rouge); }

/* the promise (People) */
.promise { max-width: 720px; margin: 44px auto 0; background: var(--card); border: 2px dashed var(--terra); border-radius: 16px; padding: 24px 28px; text-align: center; }
.promise__title { font-family: var(--f-people); font-weight: 700; color: var(--terra-deep); font-size: 2.1rem; }
.promise ul { list-style: none; margin: 10px 0 18px; padding: 0; text-align: left; display: inline-block; }
.promise li { margin: 8px 0; display: flex; gap: 10px; }
.promise li span { flex: none; }
.promise__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── together flow ───────────────────────────────────────── */
.flow { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0; align-items: stretch; }
.flow__card { border-radius: 10px; padding: 18px 20px 20px; border: 1px solid var(--rule); }
.flow__card h3 { font-family: var(--f-ui); font-size: 1.1rem; margin: 4px 0 6px; }
.flow__card p { margin: 0; font-size: 1.02rem; }
.flow__art { width: 100%; max-width: 220px; margin: 0 auto 10px; }
.flow__label { font-family: var(--f-ui); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.flow__card--places { background: var(--chart) var(--grain); border-color: #D8BF8C; }
.flow__card--places .flow__label { color: var(--rouge); }
.flow__card--people { background: var(--wash); }
.flow__card--people .flow__label { color: var(--terra); }
.flow__gate { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.flow__arrow { font-size: 1.8rem; color: var(--muted); flex: none; line-height: 1; }
.gate { flex: 1; background: var(--card); border: 2px solid var(--ink-soft); border-radius: 8px; padding: 14px 16px; }
.gate__label { font-family: var(--f-type); text-align: center; font-size: .92rem; color: var(--ink); border-bottom: 1px dashed var(--rule); padding-bottom: 8px; margin-bottom: 10px; }
.gate__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gate__h { font-family: var(--f-ui); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.gate__h--yes { color: #2D7A45; }
.gate__h--no { color: var(--rouge); }
.gate__list { list-style: none; margin: 0; padding: 0; font-size: .95rem; line-height: 1.35; }
.gate__list li { margin: 5px 0; padding-left: 20px; position: relative; }
.gate__list--yes li::before { content: "✓"; position: absolute; left: 0; color: #2D7A45; font-weight: 700; }
.gate__list--no li::before { content: "✕"; position: absolute; left: 0; color: var(--rouge); font-weight: 700; }
.together__note { max-width: 44rem; margin: 30px auto 0; text-align: center; font-size: 1.12rem; }

/* ── questions ───────────────────────────────────────────── */
details { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; margin: 10px 0; padding: 0 18px; }
details[open] { padding-bottom: 14px; }
summary { cursor: pointer; padding: 14px 0; font-family: var(--f-ui); font-weight: 700; font-size: 1rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--rouge); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 0; }

/* ── footer ──────────────────────────────────────────────── */
.foot { text-align: center; padding: 48px 24px 64px; border-top: 1px solid var(--rule); }
.foot__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.foot p { margin: 0; font-family: var(--f-ui); font-size: .85rem; }
.foot p a { color: var(--muted); text-decoration: none; }

/* made-stamp (injected under the h1 by _gen_stamps.py; same look as the homepage) */
.made-stamp { font-family: var(--f-type); font-size: .82rem; color: var(--muted); margin: 4px 0 0; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .which { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow__gate { flex-direction: column; padding: 4px 0; }
  .flow__arrow { transform: rotate(90deg); }
  .gate { width: 100%; }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .wrap, .hero, .topbar { padding-left: 16px; padding-right: 16px; }
  .pitches, .isnt, .steps, .twocol { grid-template-columns: 1fr; }
  .stamp { position: static; display: inline-block; margin-top: 12px; }
  .band { padding: 48px 0; }
  .site { padding: 52px 0 56px; }
  .callout { flex-direction: column; align-items: stretch; }
  .callout__actions { flex-direction: row; flex-wrap: wrap; }

  /* the comparison table becomes one stacked card per question */
  .compare__head { display: none !important; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__row > div { padding: 10px 14px; }
  .compare__k { padding-top: 12px !important; }
  .compare .c-people { border-left: 0; border-top: 1px dashed var(--rule); }
  .compare [data-site]::before {
    display: block; font-family: var(--f-ui); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px;
  }
  .compare .c-places::before { content: "The Places You Will Go"; color: var(--rouge); }
  .compare .c-people::before { content: "The People You Know"; color: var(--terra); }
}
@media (max-width: 520px) {
  .features { grid-template-columns: 1fr; }
  .steps li, .steps--people li { grid-template-columns: 1fr; }
  .steps li > img { width: 100%; aspect-ratio: 16 / 9; }
  .step__icon { width: 72px; height: 72px; }
  .gate__cols { grid-template-columns: 1fr; }
  .panel__art { width: 96px; }
}