/* ===== About page — editorial long-read layout =====
   Inherits palette + fonts from styles.css. This stylesheet only adds
   page-specific layout (max-width column, drop cap, pull quote, portrait
   frame, low-prominence legal footer). */

body.page-about {
  height: auto;
  min-height: 100vh;
  display: block;
  padding-bottom: 80px;
}

/* Topbar — slimmer than the main app's. Just brand + back link. */
.about-topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}
.about-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-link {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.brand-link:hover .brand-mark { color: var(--accent); }
.about-nav { display: flex; gap: 12px; }

/* Main layout — generous reading column, like a magazine longread */
.about {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 28px 40px;
}

/* ===== Lede ===== */
.about-lede { margin-bottom: 56px; }

.kicker {
  font-family: var(--serif);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--accent);
  margin: 0 0 18px;
  font-weight: 600;
}
.kicker::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent-soft);
  margin-left: 12px;
  vertical-align: middle;
}

.about-lede h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 28px;
  color: var(--text-strong);
}
.about-lede h1 em {
  font-style: italic;
  color: var(--accent);
}

.about-lede .dek {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 450;
  margin: 0 0 28px;
  max-width: 60ch;
}

/* Drop cap on the lede — gives the longread feel */
.about-lede .dek::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--accent);
  font-weight: 400;
}

.byline {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.byline-name {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
}
.byline-role { font-style: italic; color: var(--text-mute); }
.byline-loc { color: var(--text-faint); }
.byline-dot { color: var(--accent-soft); }

/* ===== Portrait (the Jeff photograph) ===== */
.about-portrait {
  margin: 0 -28px 56px;
}
.about-portrait figure {
  margin: 0;
  position: relative;
}
.about-portrait img {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}
.about-portrait figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 14px;
  padding: 0 28px;
}

/* ===== Body sections ===== */
.about-section { margin-bottom: 56px; }
.about-section h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-strong);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.about-section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--accent);
}

/* "Story list" — the WHY bullets. Numbered to read like chapters. */
.story-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: story;
}
.story-list li {
  counter-increment: story;
  position: relative;
  padding: 14px 0 14px 56px;
  border-bottom: 1px dashed var(--rule-soft);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}
.story-list li:last-child { border-bottom: none; }
.story-list li::before {
  content: counter(story, decimal-leading-zero);
  position: absolute;
  left: 0; top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 500;
}
.story-list li strong { color: var(--text-strong); font-weight: 600; }
.story-list li em { color: var(--accent-soft); font-style: italic; }

/* "Point list" — non-numbered bullets used in differentiators / future */
.point-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.point-list li {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  padding: 12px 0 12px 22px;
  position: relative;
}
.point-list li::before {
  content: "▸";
  position: absolute;
  left: 0; top: 12px;
  color: var(--accent);
  font-size: 14px;
}
.point-list li strong { color: var(--text-strong); font-weight: 600; }

/* ===== Pull quote ===== */
.pull-quote {
  margin: 56px -28px;
  padding: 36px 56px;
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(212,174,106,0.06) 0%, transparent 70%),
    var(--bg);
  position: relative;
}
.pull-quote::before {
  content: "“";
  font-family: var(--serif-display);
  font-size: 110px;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.5;
  position: absolute;
  top: 30px;
  left: 18px;
  font-style: italic;
}
.pull-quote p {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
  padding-left: 44px;
  max-width: 56ch;
  letter-spacing: -0.2px;
}

/* ===== Links inside body prose ===== */
.about a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(229,188,115,0.4);
  text-underline-offset: 3px;
}
.about a:hover { color: #F0CB85; text-decoration-color: var(--accent); }

/* ===== Footer ===== */
.about-footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-fine {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}
.legal-link {
  color: var(--text-faint) !important;
  text-decoration-color: var(--text-faint) !important;
  font-style: italic;
}
.legal-link:hover { color: var(--text-mute) !important; }

/* ===== Mobile pass ===== */
@media (max-width: 720px) {
  .about-topbar-inner { padding: 12px 20px; }
  .brand-sub { display: none; }
  .about { padding: 36px 22px 30px; }
  .about-portrait { margin: 0 -22px 36px; }
  .about-portrait figcaption { padding: 0 22px; }
  .about-section { margin-bottom: 40px; }
  .about-lede { margin-bottom: 36px; }
  .about-lede h1 { font-size: 36px; letter-spacing: -0.5px; }
  .about-lede .dek { font-size: 18px; }
  .about-lede .dek::first-letter { font-size: 3.4em; padding-right: 8px; }
  .pull-quote { margin: 36px -22px; padding: 28px 30px; }
  .pull-quote::before { font-size: 80px; left: 10px; top: 22px; }
  .pull-quote p { padding-left: 28px; font-size: 19px; }
  .story-list li { padding-left: 42px; font-size: 16px; }
  .point-list li { font-size: 15.5px; }
  .byline { font-size: 12.5px; gap: 6px; }
  .byline-dot { display: none; }
}

/* ===== About link in the main app's topbar ===== */
.about-link {
  font-style: italic;
}
.about-link:hover { color: var(--accent) !important; }