/* ==========================================================================
   about.css — About Bill page
   Hinsch Portrait Studio

   NOTE ON CHROME (header/footer): the original story.css/styles.css files
   from the prior static-HTML session were not present in the recovery
   package supplied for this build (only an earlier-stage Vite/React WIP
   snapshot with a different header/footer structure was recoverable).
   The header and footer below are reconstructed from scratch to match
   the approved TARGET_about_bill_page.png pixel-for-pixel and the design
   tokens documented in the project handover, using the same class-naming
   spirit (.story-page-header / .story-footer) so they can be merged
   cleanly into the real story.css if/when it resurfaces. Flagged here,
   not silently presented as recovered code.
   ========================================================================== */

:root {
  --color-brown-dark: #3a2f24;
  --color-brown-darker: #241c15;
  --color-olive-brown: #423a2c;
  --color-cream: #ede4d3;
  --color-cream-alt: #f2ead9;
  --color-black-strip: #191510;
  --color-red-seal: #7c1c20;
  --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;
}

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

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

.about-page img {
  max-width: 100%;
  display: block;
}

.about-page a {
  text-decoration: none;
}

a {
  color: inherit;
}

.about-page :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   HEADER (light "editorial" chrome — reconstructed, see note above)
   ========================================================================== */

.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 {
  display: flex;
}

.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);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.ab-hero {
  display: grid;
  grid-template-columns: minmax(320px, 38%) 1fr;
  align-items: stretch;
  background: var(--color-cream);
}

.ab-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px 64px 40px;
}

.ab-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}

.ab-hero__rule {
  width: 92px;
  height: 14px;
  margin: 18px 0 20px;
  color: var(--color-gold);
}

.ab-hero__rule svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ab-hero__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--color-gold);
  margin: 0 0 22px;
  max-width: 22ch;
}

.ab-hero__intro {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 34ch;
  margin: 0;
}

.ab-hero__image {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.ab-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ==========================================================================
   BIOGRAPHY SECTION
   ========================================================================== */

.ab-bio {
  padding: 84px 0 88px;
  background: var(--color-cream);
}

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

.ab-bio__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 26px;
  max-width: 18ch;
}

.ab-bio__body p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 20px;
}

.ab-bio__signature {
  margin-top: 28px;
}

.ab-bio__signature img {
  height: 56px;
  width: auto;
}

.ab-bio__image {
  align-self: start;
}

.ab-bio__image img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(43, 28, 20, 0.12);
}

/* ==========================================================================
   FOUR-VALUE CREDIBILITY STRIP
   ========================================================================== */

.ab-values {
  background: var(--color-cream-alt);
  border-top: 1px solid rgba(43, 28, 20, 0.12);
  border-bottom: 1px solid rgba(43, 28, 20, 0.12);
  padding: 56px 0;
}

.ab-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ab-values__item {
  padding: 0 32px;
  text-align: center;
  border-left: 1px solid var(--color-gold-light);
}

.ab-values__item:first-child {
  border-left: none;
}

.ab-values__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
}

.ab-values__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ab-values__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--color-text);
  margin: 0 0 10px;
  line-height: 1.3;
}

.ab-values__copy {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

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

.ab-cta {
  position: relative;
  background-color: var(--color-brown-darker);
  background-image: url('../images/about/about-bill-cta-brushwork.jpg');
  background-size: cover;
  background-position: center;
  padding: 84px 24px;
  text-align: center;
}

.ab-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 7, 0.32);
}

.ab-cta__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.ab-cta__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--color-ivory);
  margin: 0 0 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ab-cta__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-gold-light);
  margin: 0 0 34px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

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

.ab-cta .btn--gold-outline:hover {
  background: var(--color-gold);
  color: var(--color-brown-darker);
}

/* ==========================================================================
   FOOTER (light chrome — reconstructed, see note at top of file)
   ========================================================================== */

.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-page-header__nav ul {
    gap: 22px;
  }

  .ab-hero {
    grid-template-columns: 1fr;
  }

  .ab-hero__copy {
    padding: 48px 32px 36px;
  }

  .ab-hero__image {
    min-height: 360px;
  }

  .ab-bio__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ab-values__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .ab-values__item:nth-child(3) {
    border-left: none;
  }

  .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) {
  .about-page .container {
    padding: 0 24px;
  }

  .story-page-header .header-inner {
    padding: 20px 24px;
  }

  .story-page-header__nav {
    display: none;
  }

  .story-page-header__menu-toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .about-page .container {
    padding: 0 20px;
  }

  .story-page-header .header-inner {
    padding: 18px 20px;
  }

  .story-page-header .wordmark {
    font-size: 1.25rem;
  }

  .story-page-header .wordmark-flourish {
    width: 110px;
  }
}

@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; }
}

@media (max-width: 640px) {
  .ab-hero__copy {
    padding: 40px 20px 30px;
  }

  .ab-hero__title {
    font-size: 2.6rem;
  }

  .ab-hero__image {
    min-height: 280px;
  }

  .ab-bio {
    padding: 56px 0 60px;
  }

  .ab-values {
    padding: 44px 0;
  }

  .ab-values__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .ab-values__item {
    border-left: none;
    border-top: 1px solid var(--color-gold-light);
    padding: 28px 12px 0;
  }

  .ab-values__item:first-child {
    border-top: none;
    padding-top: 0;
  }

  .ab-cta {
    padding: 60px 20px;
  }

  .story-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}