/* ==========================================================================
   story.css — Memorial Story detail pages
   Hinsch Portrait Studio

   Shared by all four /stories/*.html pages. Reuses the light "editorial"
   chrome established on about.html (same header/footer pattern), kept
   self-contained here per the pattern used across the other page-specific
   CSS files in this rebuild.
   ========================================================================== */

:root {
  --color-brown-dark: #3a2f24;
  --color-brown-darker: #241c15;
  --color-olive-brown: #423a2c;
  --color-cream: #ede4d3;
  --color-cream-alt: #f2ead9;
  --color-gold: #a9822f;
  --color-gold-light: #cdb173;
  --color-ivory: #f7f2e7;
  --color-text: #2c2419;
  --color-text-muted: #5a5041;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body: 'EB Garamond', Garamond, Georgia, serif;
  --font-label: 'Barlow Condensed', sans-serif;

  --max-width: 1360px;
}

.story-page {
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.story-page .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.story-page img { max-width: 100%; display: block; }
.story-page a { text-decoration: none; }
a { color: inherit; }
.story-page :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ==========================================================================
   HEADER (light chrome — same pattern as about.html)
   ========================================================================== */

.story-page-header {
  background: var(--color-cream);
  border-bottom: 1px solid rgba(43, 28, 20, 0.15);
  position: relative;
  z-index: 40;
}

.story-page-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  gap: 24px;
}

.story-page-header .wordmark-block { display: flex; flex-direction: column; gap: 6px; }

.story-page-header .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.story-page-header .wordmark-flourish { width: 150px; height: 10px; color: var(--color-gold); }
.story-page-header .wordmark-flourish svg { width: 100%; height: 100%; display: block; }

.story-page-header__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.story-page-header__nav a {
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.story-page-header__nav a:hover { color: var(--color-gold); }
.story-page-header__nav li.is-active a { color: var(--color-gold); border-bottom-color: var(--color-gold); }

.story-page-header__menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-text);
  border-radius: 2px;
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.story-page-header__menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-text); }

.story-page-header__mobile-nav {
  display: none;
  background: var(--color-cream);
  border-top: 1px solid rgba(43, 28, 20, 0.15);
}

.story-page-header__mobile-nav.is-open { display: block; }

.story-page-header__mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
}

.story-page-header__mobile-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid rgba(43, 28, 20, 0.08);
}

.story-page-header__mobile-nav li.is-active a { color: var(--color-gold); }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.story-breadcrumb {
  padding: 26px 0 0;
}

.story-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.story-breadcrumb a:hover { color: var(--color-gold); }
.story-breadcrumb li[aria-current] { color: var(--color-text); }

/* ==========================================================================
   STORY HERO (portrait left / story right)
   ========================================================================== */

.story-hero {
  padding: 40px 0 84px;
}

.story-hero__grid {
  display: grid;
  grid-template-columns: minmax(320px, 46%) 1fr;
  gap: 64px;
  align-items: start;
}

.story-hero__image img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(43, 28, 20, 0.1);
}

.story-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 18px;
}

.story-hero__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--color-gold);
  line-height: 1.4;
  margin: 0 0 28px;
}

.story-hero__body p {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 22px;
}

.story-hero__metadata {
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 26px;
}

.story-hero__closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(169, 130, 47, 0.3);
}

/* ==========================================================================
   RELATED STORIES
   ========================================================================== */

.story-related {
  background: var(--color-cream-alt);
  border-top: 1px solid rgba(43, 28, 20, 0.1);
  padding: 72px 0;
}

.story-related__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px;
}

.story-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.story-related__card img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  margin-bottom: 16px;
  border: 1px solid rgba(43, 28, 20, 0.08);
}

.story-related__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 8px;
}

.story-related__card-link {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.story-related__card-link:hover { border-bottom-color: var(--color-gold); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.story-cta {
  background: var(--color-olive-brown);
  padding: 76px 24px;
  text-align: center;
}

.story-cta__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: var(--color-ivory);
  margin: 0 0 14px;
}

.story-cta__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-gold-light);
  margin: 0 0 30px;
}

.story-cta .btn--gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brown-darker);
  background: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 16px 34px;
  transition: background 0.2s ease;
}

.story-cta .btn--gold:hover { background: var(--color-gold-light); }

/* ==========================================================================
   FOOTER (light chrome — same pattern as about.html)
   ========================================================================== */

.story-footer {
  background: var(--color-brown-darker);
  color: var(--color-ivory);
  padding: 60px 0 0;
}

.story-footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}

.story-footer__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-gold-light);
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.story-footer__brand-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(247, 242, 231, 0.78);
  margin: 0;
  max-width: 30ch;
}

.story-footer__monogram { display: flex; justify-content: center; }
.story-footer__monogram img { width: 90px; height: 90px; object-fit: contain; }

.story-footer__connect { text-align: right; }

.story-footer__connect-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 242, 231, 0.65);
  margin-bottom: 14px;
}

.story-footer__connect-icons { display: flex; gap: 12px; justify-content: flex-end; }

.story-footer__connect-icons a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-light);
  transition: background 0.2s ease, color 0.2s ease;
}

.story-footer__connect-icons a:hover { background: var(--color-gold); color: var(--color-brown-darker); }
.story-footer__connect-icons svg { width: 16px; height: 16px; }

.story-footer__divider { border: none; border-top: 1px solid rgba(247, 242, 231, 0.15); margin: 0; }

.story-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(247, 242, 231, 0.6);
}

.story-footer__legal-links { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.story-footer__legal-links a:hover { color: var(--color-gold-light); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Nav collapses to the mobile menu earlier than other breakpoints because
   the 7-item nav (after adding "What Can Be Created?") needs more horizontal
   room than the site's standard 1080px tablet breakpoint provides. Verified
   empirically against the widest label in the set. Isolated in its own query
   so it doesn't shift any other 1080px layout rules earlier than intended. */
@media (max-width: 1900px) {
  .story-page-header__nav { display: none; }
  .story-page-header__menu-toggle { display: flex; }
}

@media (max-width: 1080px) {
  .story-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .story-related__grid { grid-template-columns: 1fr; gap: 36px; }

  .story-footer__top { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .story-footer__connect { text-align: center; }
  .story-footer__connect-icons { justify-content: center; }
}

@media (max-width: 860px) {
  .story-page .container { padding: 0 24px; }
  .story-page-header .header-inner { padding: 20px 24px; }
  .story-hero { padding: 28px 0 60px; }
  .story-related { padding: 52px 0; }
}

@media (max-width: 640px) {
  .story-page .container { padding: 0 20px; }
  .story-page-header .header-inner { padding: 18px 20px; }
  .story-page-header .wordmark { font-size: 1.25rem; }

  @media (max-width: 380px) {
    .story-page-header .wordmark { font-size: 1.05rem; }
    .story-page-header .wordmark-flourish { display: none; }
    .story-page-header .header-inner { padding: 16px 14px; gap: 12px; }
  }
  .story-page-header .wordmark-flourish { width: 110px; }

  .story-cta { padding: 56px 20px; }
  .story-footer__bottom { flex-direction: column; text-align: center; }
}