/* thelangers.com v3 base stylesheet
   Implements Adam West's v3 vision (2026-05-05) and Tom's IA wireframes (2026-05-06).
   No card grids. No editorial-stream feeds. One ownable color: cranberry.
   Typographic links only on heroes. Restraint is the brand.
*/

/* Tokens. Source: vision section 2.2 palette, 2.3 type, 2.4 motion. */
:root {
  /* Palette */
  --paper: #F5F0E6;       /* warm off-white ground, dominant page surface */
  --ink: #1A1714;         /* near-black with warmth, body text */
  --cranberry: #8B1F2E;   /* ownable color, single signal */
  --brass: #A8824A;       /* aged brass, dividers and frame edges only */

  /* Welly section dark ground (vision section 6) */
  --ground-dark: #14110E;
  --paper-on-dark: #F5F0E6;

  /* Type scale, desktop. Vision section 2.3 */
  --fs-h1: 72px;
  --fs-hero: 96px;        /* Home hero only, vision section 3 */
  --fs-h2: 44px;
  --fs-h3: 24px;
  --fs-body: 18px;
  --fs-sub: 22px;
  --fs-small: 14px;
  --fs-drop: 28px;        /* drop number on hero */

  /* Line heights */
  --lh-hero: 1.0;
  --lh-h1: 1.05;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-body: 1.6;
  --lh-small: 1.5;

  /* Spacing rhythm (8 px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* Container */
  --container-max: 1200px;
  --container-pad: 32px;

  /* Motion. Vision section 2.4 */
  --ease-in: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;
}

/* Self-hosted faces. Vision section 2.3: do not use Google Fonts.
   Phase 1 stub: real woff2 files dropped into /assets/fonts/ later.
   Until they ship, fall back chains read close to the target.
   Display direction: Canela / Tiempos Headline / GT Sectra.
   Text direction: Soehne / Inter Tight / National 2.
*/
@font-face {
  font-family: 'Langer Display';
  src: local('Tiempos Headline'), local('GT Sectra'), local('Canela');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Langer Display';
  src: local('Tiempos Headline Italic'), local('GT Sectra Italic'), local('Canela Italic');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Langer Text';
  src: local('Inter Tight'), local('National 2'), local('Soehne');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Reset, light. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* Document */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Langer Text', Georgia, serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* Subtle paper texture sense. The texture file ships in Phase 1.5; until then,
     a hint of warmth via a low-contrast layered gradient. Replaced when Bruce
     supplies a real paper texture asset. */
  background-image:
    radial-gradient(at 20% 10%, rgba(168, 130, 74, 0.04) 0, transparent 40%),
    radial-gradient(at 80% 90%, rgba(139, 31, 46, 0.03) 0, transparent 40%);
  background-attachment: fixed;
}

/* Type primitives */
.serif {
  font-family: 'Langer Display', 'Tiempos Headline', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.text { font-family: 'Langer Text', sans-serif; }
.small {
  font-size: var(--fs-small);
  letter-spacing: 0.05em;     /* +20 tracking, vision section 2.3 */
  font-weight: 500;
  line-height: var(--lh-small);
}

/* Drop number. Vision section 2.3 type detail and section 3 hero. */
.drop {
  font-family: 'Langer Display', Georgia, serif;
  color: var(--cranberry);
  font-size: var(--fs-drop);
  font-weight: 500;
  line-height: 1;
  display: inline-block;
}
.drop--lg {
  font-size: 64px;            /* on Article and Section landing top-left */
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Global nav. Tom IA section 2: text-only, no icons, no search, no CTA button. */
.nav {
  border-bottom: 1px solid rgba(26, 23, 20, 0.08);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav__inner {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-3) var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}
.nav__mark {
  font-family: 'Langer Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav__mark:hover { color: var(--cranberry); }
.nav__list {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list--right { margin-left: auto; }
.nav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-in), color var(--dur-fast) var(--ease-in);
}
.nav__link:hover { color: var(--cranberry); }
.nav__link--active { border-color: var(--cranberry); color: var(--ink); }

.nav__menu-toggle { display: none; }

/* Mobile nav. Tom IA section 2 mobile rules. */
@media (max-width: 768px) {
  .nav__list { display: none; }
  .nav__menu-toggle {
    display: inline-block;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ink);
    font-family: 'Langer Text', sans-serif;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
  }
  .nav__list--right { display: flex; margin-left: var(--s-3); }
  .nav__inner.is-open .nav__list {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px;
    right: 0;
    height: calc(100vh - 56px);
    width: 80vw;
    max-width: 360px;
    background: var(--paper);
    padding: var(--s-5);
    border-left: 1px solid rgba(26, 23, 20, 0.08);
  }
}

/* Breadcrumbs. Tom IA section 2. */
.crumbs {
  padding: var(--s-3) 0;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: rgba(26, 23, 20, 0.7);
}
.crumbs a { color: rgba(26, 23, 20, 0.7); text-decoration: none; }
.crumbs a:hover { color: var(--cranberry); }
.crumbs__sep { color: var(--brass); padding: 0 var(--s-2); }

/* Hero block. Vision section 3. */
.hero {
  min-height: 88vh;             /* 85 to 90 vh, vision section 3 */
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7) 0;
  position: relative;
}
.hero__drop {
  position: absolute;
  top: var(--s-5);
  left: 0;
}
.hero__title {
  font-family: 'Langer Display', Georgia, serif;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 500;
  margin: 0 0 var(--s-5) 0;
  letter-spacing: -0.015em;
}
.hero__sub {
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: 1.45;
  max-width: 60ch;
  margin: 0 0 var(--s-6) 0;
  color: rgba(26, 23, 20, 0.85);
}
.hero__cta {
  font-size: var(--fs-sub);
  color: var(--cranberry);
  text-decoration: none;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 4px;
  font-family: 'Langer Display', Georgia, serif;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-in);
}
.hero__cta:hover { color: var(--ink); border-bottom-color: var(--cranberry); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-5); min-height: auto; padding: var(--s-6) 0; }
  .hero__title { font-size: 56px; }
}

/* Section landing hero variant. Vision section 3 last paragraph: 50 vh. */
.hero--section {
  min-height: 50vh;
  padding: var(--s-6) 0 var(--s-5) 0;
}
.hero--section .hero__title { font-size: var(--fs-h1); }

/* Type-only hero variant. v3-strip homepage. No right-column image track. */
.hero--type-only {
  grid-template-columns: 1fr;
}

/* Framed print. Vision section 2.5 image direction. */
.frame {
  border: 1px solid var(--brass);
  padding: 6px;
  background: var(--paper);
  display: inline-block;
  max-width: 100%;
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame__caption {
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: rgba(26, 23, 20, 0.7);
  margin-top: var(--s-2);
  font-weight: 500;
}
.frame--placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(168, 130, 74, 0.08),
      rgba(168, 130, 74, 0.08) 10px,
      rgba(168, 130, 74, 0.04) 10px,
      rgba(168, 130, 74, 0.04) 20px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 23, 20, 0.4);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.frame--3-2 { aspect-ratio: 3 / 2; }
.frame--1-1 { aspect-ratio: 1 / 1; }

/* Home entry block. Tom IA section 3 page type 1.
   Six rows. Typographic. No tiles. No thumbnails. */
.entry-block { padding: var(--s-7) 0 var(--s-9); }
.entry-block__title {
  font-family: 'Langer Display', Georgia, serif;
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-6) 0;
  font-weight: 500;
}
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entry-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid rgba(168, 130, 74, 0.3);
  align-items: baseline;
}
.entry-row:last-child { border-bottom: none; }
.entry-row__num {
  font-family: 'Langer Display', Georgia, serif;
  font-size: 36px;
  color: var(--cranberry);
  font-weight: 500;
  line-height: 1;
}
.entry-row__title {
  font-family: 'Langer Display', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 var(--s-2) 0;
  line-height: 1.1;
}
.entry-row__title a { color: var(--ink); text-decoration: none; }
.entry-row__title a:hover { color: var(--cranberry); }
.entry-row__note {
  font-size: var(--fs-body);
  color: rgba(26, 23, 20, 0.75);
  margin: 0;
}

/* Section nav (under section hero). Tom IA section 2. */
.section-nav {
  border-top: 1px solid rgba(168, 130, 74, 0.3);
  border-bottom: 1px solid rgba(168, 130, 74, 0.3);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-6);
}
.section-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.section-nav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.section-nav__link:hover { color: var(--cranberry); }
.section-nav__link--active { border-color: var(--cranberry); }

@media (max-width: 768px) {
  .section-nav__list { flex-wrap: nowrap; overflow-x: auto; }
}

/* Curated entry block on section landings. Tom IA section 3 page type 2.
   Three to five hand-picked entries. Editorial order. No thumbnails. */
.curated { padding: var(--s-6) 0; }
.curated__heading {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(26, 23, 20, 0.5);
  margin: 0 0 var(--s-4) 0;
}
.curated__index-link {
  display: inline-block;
  margin-top: var(--s-5);
  color: var(--cranberry);
  text-decoration: none;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 3px;
  font-family: 'Langer Display', Georgia, serif;
  font-size: var(--fs-h3);
}

/* Three-peer-room block on /local/. Tom IA section 6. */
.peers { padding: var(--s-6) 0 var(--s-9); }
.peer-row {
  display: grid;
  grid-template-columns: 80px 1fr 320px;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid rgba(168, 130, 74, 0.3);
  align-items: start;
}
.peer-row:last-child { border-bottom: none; }
.peer-row__num {
  font-family: 'Langer Display', Georgia, serif;
  font-size: 36px;
  color: var(--cranberry);
  font-weight: 500;
  line-height: 1;
}
.peer-row__title {
  font-family: 'Langer Display', Georgia, serif;
  font-size: 40px;
  font-weight: 500;
  margin: 0 0 var(--s-3) 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.peer-row__note {
  font-size: var(--fs-body);
  margin: 0 0 var(--s-4) 0;
  color: rgba(26, 23, 20, 0.85);
}
.peer-row__link {
  color: var(--cranberry);
  text-decoration: none;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 3px;
  font-family: 'Langer Display', Georgia, serif;
  font-size: var(--fs-body);
}

@media (max-width: 900px) {
  .peer-row { grid-template-columns: 60px 1fr; }
  .peer-row .frame { grid-column: 1 / -1; max-width: 100%; }
}

/* Footer. Tom IA section 2 footer rules. */
.footer {
  border-top: 1px solid rgba(168, 130, 74, 0.4);
  padding: var(--s-7) 0 var(--s-6);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: rgba(26, 23, 20, 0.7);
}
.footer__line { margin: 0 0 var(--s-3) 0; }
.footer__links { margin: 0 0 var(--s-5) 0; }
.footer__links a { color: var(--ink); text-decoration: none; margin: 0 var(--s-2); }
.footer__links a:hover { color: var(--cranberry); }
.footer__sep { color: var(--brass); padding: 0 var(--s-2); }
.footer__end {
  font-family: 'Langer Display', Georgia, serif;
  color: var(--cranberry);
  font-size: var(--fs-h3);
  letter-spacing: 0.1em;
}

/* Welly section dark ground variant. Vision section 6. */
body.dark-ground {
  background: var(--ground-dark);
  color: var(--paper-on-dark);
  background-image:
    radial-gradient(at 20% 10%, rgba(168, 130, 74, 0.06) 0, transparent 40%),
    radial-gradient(at 80% 90%, rgba(139, 31, 46, 0.05) 0, transparent 40%);
}
body.dark-ground .nav,
body.dark-ground .nav__inner.is-open .nav__list {
  background: var(--ground-dark);
  border-bottom-color: rgba(245, 240, 230, 0.1);
}
body.dark-ground .nav__mark,
body.dark-ground .nav__link,
body.dark-ground .crumbs,
body.dark-ground .crumbs a,
body.dark-ground .entry-row__note,
body.dark-ground .hero__sub {
  color: var(--paper-on-dark);
}
body.dark-ground .crumbs,
body.dark-ground .crumbs a { color: rgba(245, 240, 230, 0.7); }
body.dark-ground .frame {
  background: var(--ground-dark);
}
body.dark-ground .footer {
  border-top-color: rgba(168, 130, 74, 0.5);
  color: rgba(245, 240, 230, 0.7);
}
body.dark-ground .footer__links a { color: var(--paper-on-dark); }

/* Welly motion variant: 220 ms entry timings. Vision section 6 motion paragraph.
   Implemented as a class hook for any reveal animation; reveal logic ships in
   nav.js. */
body.dark-ground { --dur-base: 220ms; }

/* Containment ground swap on entry. Vision section 6 containment rule.
   Body class is set immediately on page load; the transition is the nav crossfade.
   On nav click, nav.js fades out, navigates, page loads with new ground class. */
body { transition: background-color var(--dur-base) var(--ease-in); }

/* Visually-hidden utility */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Reduce motion respect. Vision section 2.4 reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}