/* langleylinks.com /history/ pages + the homepage "From Langley's history" strip.
   Built by linkslangley/site/build.mjs (copied in as history.<hash>.css). Tokens match the homepage :root.
   Page-wide rules are scoped to body.hpage so loading this on the homepage changes nothing but the strip. */
.hpage, .hstrip {
  --bg: #0e0e0c; --dark: #141412; --mid: #1c1c1a; --border: #2c2c28;
  --cream: #ede8df; --cream-muted: #908880; --teal: #2dd4c0; --teal-dark: #1fb8a6;
  --teal-dim: rgba(45, 212, 192, 0.07); --teal-border: rgba(45, 212, 192, 0.2);
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', sans-serif;
}
.hpage *, .hpage *::before, .hpage *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hpage {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(45, 212, 192, 0.06), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(196, 151, 90, 0.04), transparent 60%),
    #0e0e0c;
  color: var(--cream); font: 300 1.0625rem/1.75 var(--sans); -webkit-font-smoothing: antialiased;
}
.hpage a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-border); }
.hpage a:hover { border-bottom-color: var(--teal); }
.hpage em { font-style: italic; color: var(--teal); }
.hpage strong { font-weight: 500; color: #fff; }
.hpage .label {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
  font: 500 0.65rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal);
}
.hpage .label::after { content: ''; width: 32px; height: 1px; background: var(--teal); opacity: 0.35; }

/* nav: same feel as the homepage bar */
.hnav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 2.5rem; background: rgba(14, 14, 12, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.hpage .hnav-brand { display: flex; align-items: center; gap: 0.75rem; border: 0; color: var(--cream);
  font: 400 1.15rem/1 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; }
.hnav-brand img { border-radius: 50%; }
.hnav ul { display: flex; gap: 2.25rem; list-style: none; }
.hpage .hnav ul a { border: 0; color: var(--cream-muted); font: 400 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.hpage .hnav ul a:hover, .hpage .hnav ul a.on { color: var(--cream); }
.hpage .hnav ul a.cta { color: var(--teal); }

/* article */
.article { padding-bottom: 2rem; }
.ahead { max-width: 760px; margin: 0 auto; padding: 4.5rem 1.5rem 2.5rem; }
.hpage .crumbs { font: 400 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-muted); }
.hpage .crumbs a { color: var(--cream-muted); border: 0; }
.hpage .fig-label { margin-top: 2.5rem; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-muted); }
.hpage .fig { font: italic 500 clamp(4.5rem, 14vw, 8.5rem)/0.95 var(--serif); color: var(--teal); letter-spacing: -0.02em; }
.hpage h1 { margin-top: 0.75rem; font: 400 clamp(2.4rem, 6vw, 4rem)/1.05 var(--serif); color: var(--cream); text-wrap: balance; }
.hpage .lede { margin-top: 1.5rem; font-size: 1.2rem; line-height: 1.7; color: #d9d3c9; max-width: 640px; }
.hpage figure { margin: 2rem 0; }
.hpage figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.hpage figcaption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--cream-muted); }
.hpage figcaption a { color: var(--cream-muted); border-bottom-color: var(--border); }
.hpage figure.hero { max-width: 1100px; margin: 0 auto 1rem; padding: 0 1.5rem; }
.hpage figure.hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.prose { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.prose section { padding: 3.5rem 0 0; }
.prose section + section { border-top: 1px solid var(--border); margin-top: 3.5rem; }
.hpage .prose h2 { font: 400 clamp(2rem, 4.5vw, 2.8rem)/1.1 var(--serif); color: var(--cream); margin-bottom: 1.25rem; text-wrap: balance; }
.hpage .prose p + p { margin-top: 1.1rem; }
.hpage .deep h3 { font: 400 clamp(1.5rem, 3vw, 1.9rem)/1.15 var(--serif); color: var(--cream); margin: 2.5rem 0 1rem; text-wrap: balance; }
.hpage .deep h3:first-of-type { margin-top: 0.5rem; }
.hpage .deep figure { margin: 0 0 1.25rem; }
.hpage ol.three { list-style: none; counter-reset: n; display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.hpage ol.three li { counter-increment: n; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; }
.hpage ol.three li::before { content: counter(n); font: italic 500 2.4rem/1 var(--serif); color: var(--teal); }
.hpage .twist { position: relative; }
.hpage .visit h2 { margin-bottom: 0.5rem; }
.hpage .addr { font-size: 1.05rem; }
.hpage .sources ul { list-style: none; display: grid; gap: 0.6rem; font-size: 0.92rem; }
.hpage .back { padding: 3.5rem 0 1rem; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }

/* follow band + footer */
.follow { max-width: 760px; margin: 4rem auto 0; padding: 2.5rem 1.5rem; text-align: center; border-top: 1px solid var(--border); }
.follow .label { justify-content: center; }
.follow .label::after { display: none; }
.hpage .follow .days { font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--serif); color: var(--cream); margin-bottom: 0.75rem; }
.hfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 2.5rem;
  border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--cream-muted); }
.hpage .hfoot a { color: var(--cream-muted); border: 0; }

/* index */
.ihead { max-width: 1100px; margin: 0 auto; padding: 5rem 1.5rem 2.5rem; }
.hpage .ihead h1 { font-size: clamp(3rem, 8vw, 5.5rem); }
.hpage .ihead .lede { max-width: 620px; }
.index .grid { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.hpage .empty { color: var(--cream-muted); }

/* cards (index + homepage strip) */
.hpage .grid, .hstrip .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.hpage a.card, .hstrip a.card { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--dark); color: var(--cream); text-decoration: none; transition: border-color .25s, transform .25s; }
.hpage a.card:hover, .hstrip a.card:hover { border-color: var(--teal-border); transform: translateY(-2px); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.card-fig { padding: 1.25rem 1.4rem 0; font: italic 500 2.2rem/1 var(--serif); color: var(--teal); }
.card-title { padding: 0.5rem 1.4rem 0; font: 400 1.45rem/1.2 'Cormorant Garamond', Georgia, serif; }
.card-date { padding: 0.75rem 1.4rem 1.4rem; margin-top: auto; font: 400 0.68rem/1 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-muted); }
.hstrip { padding: 5rem 2.5rem; background: radial-gradient(800px 500px at 90% 0%, rgba(45, 212, 192, 0.05), transparent 60%), var(--bg); }
.hstrip-more { margin-top: 2.5rem; }

@media (max-width: 760px) {
  .hnav { padding: 0.9rem 1rem; }
  .hnav ul { gap: 1rem; }
  .hpage .hnav ul li:nth-child(n+2):not(:last-child) { display: none; }
  .hpage .hnav-brand span { display: none; }
  .ahead, .ihead { padding-top: 3rem; }
  .hpage figure.hero { padding: 0; }
  .hpage figure.hero figcaption { padding: 0 1.5rem; }
  .hfoot { padding: 1.75rem 1.5rem; }
  .hstrip { padding: 4rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .hpage a.card, .hstrip a.card { transition: none; } }