/* The Lost Travelers Club
   Palette and type read from the live Wix site on 2026-08-04.
   Fahkwang and Work Sans are the site's actual faces and are both on Google
   Fonts, so these are exact matches rather than substitutes. The latin subset
   URLs were pulled from the Google Fonts API rather than guessed. */

@font-face {
  font-family: 'Fahkwang';
  font-style: normal; font-weight: 500; font-display: swap;
  src: local('Fahkwang'), url(https://fonts.gstatic.com/s/fahkwang/v18/Noa26Uj3zpmBOgbNpOJ7m6lWHCtTkBjw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal; font-weight: 300 500; font-display: swap;
  src: local('Work Sans'), url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  --parchment:   #fff8eb;
  --parchment-2: #f7edda;
  --brown:       #3d3228;
  --brown-soft:  #6b5b4a;
  --navy:        #0e1f58;
  --red:         #8b2635;
  --red-deep:    #6d1c28;
  --rule:        #e2d5bd;
  --white:       #ffffff;

  --measure: 66ch;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --stack: clamp(3rem, 7vw, 5.5rem);

  --display: 'Fahkwang', 'Georgia', serif;
  --body: 'Work Sans', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1.02rem, 0.45vw + 0.95rem, 1.15rem);
  line-height: 1.7;
  color: var(--brown);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
a:hover { color: var(--red-deep); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 500;
  line-height: 1.14; margin: 0 0 0.5em; color: var(--brown);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.38rem); }
p { margin: 0 0 1.2em; max-width: var(--measure); }

.wrap { width: min(1120px, 100% - (var(--pad) * 2)); margin-inline: auto; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.sm { font-size: 0.58em; vertical-align: super; line-height: 0; }

.skip {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--brown); color: var(--parchment); padding: 0.75rem 1.25rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- crisis notice, present on every page ---------- */
.crisis {
  background: var(--brown); color: var(--parchment);
  font-size: 0.86rem; line-height: 1.5;
  padding-block: 0.6rem;
}
.crisis p { margin: 0; max-width: none; text-align: center; }
.crisis a { color: #f3d9a4; text-decoration: underline; text-underline-offset: 2px; }
.crisis a:hover { color: var(--white); }
.crisis strong { font-weight: 500; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--parchment); }
.header-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem; padding-block: 1rem; text-align: center;
}
@media (min-width: 1000px) {
  .header-inner {
    flex-direction: row; justify-content: space-between;
    text-align: left; padding-block: 1.1rem;
  }
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand-mark { font-size: 1.5rem; color: var(--red); line-height: 1; }
.brand-name {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.1; letter-spacing: 0.01em;
}
.brand-tag {
  display: block; font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brown-soft); margin-top: 0.2rem;
}

.nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.1rem 1.15rem; list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--brown); font-size: 0.94rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
@media (min-width: 1000px) { .nav a { min-height: 0; padding-block: 0.35rem; } }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--red); color: var(--parchment);
  text-decoration: none; font-weight: 500; font-size: 0.97rem;
  padding: 0.72rem 1.55rem; border: 2px solid var(--red); border-radius: 2px;
  transition: background .18s ease, color .18s ease; max-width: 100%; text-align: center;
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--parchment); }
.btn-ghost { background: transparent; color: var(--red); }
.btn-ghost:hover { background: var(--red); color: var(--parchment); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.75rem, 7vw, 5rem); border-bottom: 1px solid var(--rule); }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero .tagline {
  font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: var(--red); margin-bottom: 1.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.9rem; }

/* ---------- sections ---------- */
.section { padding-block: var(--stack); }
.section--tint { background: var(--parchment-2); }
.section + .section { border-top: 1px solid var(--rule); }
.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brown-soft); margin: 0 0 0.7rem; font-weight: 500;
}
.lede { font-size: 1.13em; color: var(--brown-soft); max-width: 54ch; }
.prose > p { max-width: var(--measure); }

.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { border-radius: 2px; }

.pull { margin: 2.5rem 0; padding: 0; }
.pull blockquote {
  margin: 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--red);
  font-family: var(--display); font-size: 1.24em; line-height: 1.42;
  color: var(--navy); max-width: 44ch;
}
.pull figcaption { margin-top: 0.85rem; padding-left: 1.75rem; font-size: 0.9rem; color: var(--brown-soft); }

/* ---------- the monthly calendar ---------- */
.calendar { background: var(--parchment-2); border: 1px solid var(--rule); border-radius: 2px; padding: 1.6rem 1.5rem; }
.calendar h3 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.calendar ul { list-style: none; margin: 0; padding: 0; }
.calendar li { padding: 0.35rem 0 0.35rem 1.2rem; position: relative; font-size: 0.97rem; }
.calendar li::before { content: '\2726'; position: absolute; left: 0; color: var(--red); font-size: 0.8em; top: 0.55em; }

/* ---------- journal / blog ---------- */
.posts { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.posts li { background: var(--parchment); }
.posts a { display: block; padding: 1.35rem 1.5rem; text-decoration: none; color: inherit; }
.posts a:hover { background: var(--parchment-2); }
.posts .post-title { font-family: var(--display); font-size: 1.13rem; color: var(--brown); display: block; margin-bottom: 0.3rem; line-height: 1.3; }
.posts a:hover .post-title { color: var(--red); }
.posts .post-meta { font-size: 0.84rem; color: var(--brown-soft); }

.post-page { padding-block: clamp(2rem, 5vw, 3.5rem) var(--stack); }
.post-page .eyebrow a { color: var(--brown-soft); text-decoration: none; }
.post-page .eyebrow a:hover { color: var(--red); }
.post-page h1 { max-width: 22ch; }
.post-body { max-width: var(--measure); }
.post-body h2 { margin-top: 2rem; }
.post-body img { margin: 2rem 0; border-radius: 2px; }
.post-nav { margin-top: var(--stack); padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--brown); color: #e8dcc8;
  padding-block: 3rem 2rem; font-size: 0.93rem; margin-top: var(--stack);
}
.footer-grid {
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,248,235,0.18);
}
.site-footer h2 {
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--parchment); margin-bottom: 0.85rem; font-family: var(--body); font-weight: 500;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.1rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a { color: var(--parchment); text-decoration: none; border-bottom: 1px solid rgba(255,248,235,0.3); }
.site-footer a:hover { border-bottom-color: var(--parchment); color: var(--white); }
.site-footer p { max-width: 32ch; }
.gladd { font-size: 0.86rem; opacity: 0.85; margin-top: 1rem; }
.colophon { padding-top: 1.5rem; font-size: 0.84rem; opacity: 0.75; max-width: none; }

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

/* ---------- manifesto ---------- */
.manifesto { counter-reset: m; list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 62ch; }
.manifesto li {
  counter-increment: m; position: relative;
  padding: 0 0 1.1rem 3rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.manifesto li:last-child { border-bottom: 0; }
.manifesto li::before {
  content: counter(m); position: absolute; left: 0; top: -0.1em;
  font-family: var(--display); font-size: 1.5rem; color: var(--red); line-height: 1;
}

/* ---------- post extras ---------- */
.post-meta { font-size: 0.88rem; color: var(--brown-soft); display: block; }
.post-page .post-meta { margin-bottom: 1.75rem; }
/* min() not a bare 640px: a plain max-width here overrides the global
   img{max-width:100%} and left the lead image 640px wide on a 375px phone,
   pushing the whole page sideways by 285px. */
.post-lead { margin: 0 0 2rem; border-radius: 2px; max-width: min(640px, 100%); }
.post-body blockquote {
  margin: 1.75rem 0; padding-left: 1.3rem; border-left: 3px solid var(--rule);
  font-family: var(--display); color: var(--navy);
}
.post-body ul { max-width: var(--measure); }
.post-body li { margin-bottom: 0.4rem; }

.post-tag {
  display: inline-block; font-family: var(--body); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle;
  background: var(--parchment-2); border: 1px solid var(--rule);
  color: var(--brown-soft); padding: 0.1rem 0.45rem; margin-left: 0.5rem;
}

/* Third-party article notice. These posts reproduce someone else's work, so
   only an excerpt is shown and the reader is sent to the original publisher. */
.thirdparty {
  margin-top: 2rem; padding: 1.2rem 1.4rem;
  background: var(--parchment-2); border-left: 3px solid var(--navy);
}
.thirdparty p { margin: 0; font-size: 0.95rem; }

.pull--wide blockquote { max-width: 58ch; }

/* Long bare URLs pasted into prose (up to 63 characters with no break point)
   have no wrap opportunity and push the page sideways on a phone. This lets
   them break rather than overflow. Applied to text containers only, so it
   cannot affect layout elements. */
p, li, h1, h2, h3, blockquote, .post-body, .prose, td { overflow-wrap: break-word; }