/* ==========================================================================
   what-can-be-created.css — "What Can Be Created?" page
   Hinsch Portrait Studio

   Reuses the light "editorial" chrome established on about.html /
   how-it-works.html / start-with-a-photo.html (same .story-page-header /
   .story-footer pattern) — kept self-contained here per the pattern used
   across every other page-specific CSS file in this project (no shared
   base stylesheet exists sitewide; see project handover).

   DEVIATIONS FROM THE APPROVED "Design Final.png" COMP, FLAGGED PER
   PROJECT CONVENTION (flag rather than silently redesign):
   1. The comp's header shows the WCBC_1 "Hinsch Logo top" mark and a
      gold "START WITH A PHOTO" button inside the nav bar. The site's
      real, already-locked header is the simple text wordmark used on
      every other light-chrome page, with no header CTA button. Kept
      that established pattern instead of introducing a third header
      treatment (same call made previously for How It Works — see that
      page's HTML comment).
   2. The comp's footer shows Explore/About/Studio link columns and a
      second logo mark (WCBC_16). The site's real, already-locked footer
      is the simpler brand/monogram/connect layout used on every other
      light-chrome page. Kept that instead of building a new footer
      layout for one page.
   3. The comp's top hero has a soft painterly landscape wash bleeding
      in from the left. No such texture file was supplied among the 17
      numbered WCBC assets (only a still-life "Pastiche bottom" image
      for the CTA section), so this is approximated with a CSS gradient
      in the site's existing gold/olive palette rather than fabricating
      a stand-in artwork.
   ========================================================================== */

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

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

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

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

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

/* ==========================================================================
   HEADER (light chrome — same pattern as about.html / how-it-works.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 { display: flex; }

.story-page-header__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  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;
  white-space: nowrap;
}

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

/* ==========================================================================
   PAGE HERO / INTRO
   ========================================================================== */

.wcbc-hero {
  position: relative;
  padding: 72px 24px 56px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 620px 420px at 0% 15%, rgba(169, 130, 47, 0.16), transparent 70%),
    linear-gradient(120deg, rgba(66, 58, 44, 0.10) 0%, transparent 42%),
    var(--color-cream);
}

.wcbc-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.wcbc-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--color-text);
  margin: 0;
}

.wcbc-hero__rule {
  display: inline-block;
  width: 92px;
  height: 14px;
  margin: 20px auto 22px;
  color: var(--color-gold);
}

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

.wcbc-hero__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-gold);
  margin: 0 0 22px;
}

.wcbc-hero__lead br { display: block; }

.wcbc-hero__copy {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 58ch;
  margin: 0 auto;
}

/* ==========================================================================
   EXAMPLE SECTIONS — shared elements
   ========================================================================== */

.wcbc-examples { padding: 8px 0 0; }

.wcbc-example {
  padding: 56px 0;
  border-top: 1px solid rgba(43, 28, 20, 0.14);
}

.wcbc-example__heading {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 28px;
  line-height: 1.5;
}

.wcbc-example__heading .arrow {
  color: var(--color-gold);
  padding: 0 4px;
}

.wcbc-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.wcbc-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 14px 0 0;
  max-width: 42ch;
}

.wcbc-frame img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(43, 28, 20, 0.14);
  background: var(--color-cream-alt);
}

/* ---------- Example 1 — featured / large case study ---------- */

.wcbc-featured {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}

.wcbc-featured__sources {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.wcbc-featured__final .wcbc-frame img {
  box-shadow: 0 18px 40px -18px rgba(20, 14, 8, 0.4);
}

/* ---------- Two-column example rows ---------- */

.wcbc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.wcbc-case__pair {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  align-items: start;
}

/* case 2 has an extra sketch stacked under the source headshots */
.wcbc-case__pair--triple {
  grid-template-columns: 1fr 1.3fr;
}

.wcbc-case__source-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Pet section — full-width horizontal ---------- */

.wcbc-pet {
  padding: 60px 0 64px;
  border-top: 1px solid rgba(43, 28, 20, 0.14);
  /* Unified to the same cream tone as the example rows above (was
     --color-cream-alt) — the slight tone shift at this boundary read as
     an unintended color mismatch rather than an intentional "chapter"
     divider, so it's been removed for a seamless transition. */
  background: var(--color-cream);
}

.wcbc-pet__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.wcbc-pet__copy {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}

.wcbc-pet__final .wcbc-frame img {
  box-shadow: 0 18px 40px -18px rgba(20, 14, 8, 0.4);
}

/* ==========================================================================
   PHILOSOPHY QUOTE BAND
   ========================================================================== */

.wcbc-quote {
  background: var(--color-cream-alt);
  border-top: 1px solid rgba(43, 28, 20, 0.14);
  border-bottom: 1px solid rgba(43, 28, 20, 0.14);
  padding: 72px 24px;
  text-align: center;
}

.wcbc-quote__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-gold);
  display: block;
  margin-bottom: 4px;
}

.wcbc-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.4;
  color: var(--color-text);
  max-width: 720px;
  margin: 0 auto 22px;
}

.wcbc-quote__rule {
  display: inline-block;
  width: 92px;
  height: 14px;
  margin: 0 auto;
  color: var(--color-gold);
}

.wcbc-quote__rule svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   FINAL CTA SECTION
   ========================================================================== */

.wcbc-cta {
  padding: 0;
}

.wcbc-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.wcbc-cta__art {
  height: 100%;
  min-height: 360px;
}

.wcbc-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Left-anchored: the production asset now includes a huge flat-color
     buffer (2000+px) painted in the site's exact --color-cream, appended
     after the artwork's real fade. Anchoring left keeps the still-life
     artwork itself fully visible; any crop overflow on the right lands
     in that flat buffer, which is pixel-identical to the page background
     — so the seam is invisible at any container width, instead of
     depending on the fade always landing exactly at the crop edge. */
  object-position: left center;
  border: none;
}

.wcbc-cta__copy {
  padding: 64px 56px;
  max-width: 480px;
}

.wcbc-cta__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--color-text);
  margin: 0 0 16px;
}

.wcbc-cta__rule {
  display: inline-block;
  width: 74px;
  height: 12px;
  margin: 0 0 20px;
  color: var(--color-gold);
}

.wcbc-cta__rule svg { width: 100%; height: 100%; display: block; }

.wcbc-cta__body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 30px;
}

/* ==========================================================================
   BUTTONS (scoped to this page, matching the pattern used on every other
   page-specific stylesheet in the project — no shared button system exists)
   ========================================================================== */

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

.wcbc-page .btn--gold {
  background: var(--color-gold);
  color: var(--color-ivory);
  border-color: var(--color-gold);
}

.wcbc-page .btn--gold:hover {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-gold);
}

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

.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: 18px; }
  .story-page-header__nav a { font-size: 0.8rem; }

  .wcbc-featured { grid-template-columns: 1fr; }
  .wcbc-featured__sources { flex-direction: row; }
  .wcbc-featured__sources > div { flex: 1; }

  .wcbc-row { grid-template-columns: 1fr; gap: 0; }
  .wcbc-row .wcbc-example { border-top: 1px solid rgba(43, 28, 20, 0.14); }
  .wcbc-row .wcbc-example:first-child { border-top: none; padding-top: 0; }

  .wcbc-pet__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .wcbc-pet__copy { max-width: 52ch; margin: 0 auto; }

  .wcbc-cta__grid { grid-template-columns: 1fr; }
  .wcbc-cta__art { min-height: 280px; order: 2; }
  .wcbc-cta__copy { padding: 48px 32px; max-width: none; text-align: center; order: 1; }
  .wcbc-cta__rule { margin: 0 auto 20px; }

  .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) {
  .wcbc-page .container { padding: 0 24px; }
  .story-page-header .header-inner { padding: 20px 24px; }
  .wcbc-hero { padding: 56px 20px 44px; }

  .wcbc-example { padding: 44px 0; }

  .wcbc-case__pair,
  .wcbc-case__pair--triple {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wcbc-case__source-stack { flex-direction: row; }
  .wcbc-case__source-stack > div { flex: 1; }
}

@media (max-width: 640px) {
  .wcbc-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; }

  .wcbc-hero__title { font-size: 2.2rem; }

  .wcbc-featured__sources { flex-direction: column; }

  .wcbc-case__source-stack { flex-direction: column; }

  .wcbc-pet { padding: 44px 0 48px; }

  .wcbc-quote { padding: 52px 20px; }

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