/* ==========================================================================
   Marisol Patisserie -- portfolio example (fictional business)
   Adapted from a real Starter build for a Pembroke Pines bakery prospect
   that declined to move forward. Same layout and structure kept, but every
   photo was swapped for curated stock photography (not the real prospect's
   own photos, to avoid any appearance of reusing a declined business's
   real images without permission), recolored from the original's dusty
   rose into a distinct terracotta palette, and every real-world
   identifying detail (address, phone, owner name, reviewer names,
   specific founding story) rewritten as clearly fictional, consistent with
   every other page in this portfolio gallery.
   Archetype: H2 (full-bleed scrim hero) + C4 (masonry/varied span offerings)
   + N3 (minimal wordmark, always-drawer nav). See ../LAYOUT-ARCHETYPES.md
   for what these mean; this page itself carries no sfd-archetype marker
   since it's a published example, not a prospect build for that rotation
   system to track.
   ========================================================================== */

:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Caveat', cursive;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --color-paper: #FBF1E5;
  --color-ink: #2A2016;
  --color-ink-2: rgba(42, 32, 22, 0.72);
  --color-ink-3: rgba(42, 32, 22, 0.55);
  --color-rose: #C97C52;
  --color-rose-deep: #A85A35;
  --color-rose-pale: #F3DCC8;
  --rule-hair: 1px;
  --rule-color: rgba(42, 32, 22, 0.12);

  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --max-w: 72rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}
p { margin: 0 0 var(--space-md); }
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--page-gutter); }

/* ---------- Example-gallery notice (published examples only) ---------- */
.demo-notice {
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--rule-color);
  padding: 10px 0;
  font-size: 13px;
  color: var(--color-ink-2);
  text-align: center;
}
.demo-notice a { color: var(--color-rose-deep); font-weight: 600; }
.demo-notice a:hover { text-decoration: underline; }
.demo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus {
  left: var(--space-md);
  top: var(--space-md);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
  margin-bottom: var(--space-sm);
  font-variant-numeric: lining-nums;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.btn-solid { background: var(--color-rose-deep); color: #fff; }
.btn-solid:hover { background: var(--color-ink); }
.btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }
.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); }

/* ---------- Nav: N3, minimal wordmark, always a drawer (no desktop
   inline-links state -- see LAYOUT-ARCHETYPES.md's N3 entry). The shared
   /css/nav-toggle.css hides .nav-toggle by default expecting a per-site
   media query to reveal it below some breakpoint; here it's shown
   unconditionally instead, and data-menu-break is set absurdly high so
   nav-menu.js never force-closes it at a "desktop" width that doesn't
   apply to this nav. ---------- */
.nav-min {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--rule-color);
}
.nav-row.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark span { color: var(--color-rose-deep); }
.nav-toggle { display: flex; color: var(--color-ink); }
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--page-gutter) var(--space-lg);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--rule-color);
}
.nav-drawer a { text-decoration: none; padding: 0.35rem 0; }
.nav-drawer-cta { align-self: flex-start; margin-top: var(--space-xs); }
details.nav-menu[open] + .nav-drawer { display: flex; }

/* ---------- Hero: H2, full-bleed photo at every breakpoint, copy over a
   bottom-weighted scrim. No side-column width formula competing with the
   photo for space, so this needs no separate mobile treatment, just
   font-size scaling. ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 44rem);
  overflow: hidden;
  background: var(--color-ink);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,32,22,0.10) 0%, rgba(42,32,22,0.42) 55%, rgba(42,32,22,0.88) 100%);
}
.hero-stage {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xl) var(--page-gutter) var(--space-2xl);
}
.hero-copy { max-width: 34rem; min-width: 0; color: #fff; }
.hero-copy .eyebrow { color: var(--color-rose-pale); }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(2.5rem, 2vw + 2.1rem, 3.75rem);
  margin-bottom: var(--space-sm);
}
.script-line {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1vw + 1.3rem, 2rem);
  color: var(--color-rose-pale);
  margin: 0 0 var(--space-md);
}
.hero-copy .lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  max-width: 30rem;
}
.hero-copy .btn-outline { border-color: #fff; color: #fff; }
.hero-copy .btn-outline:hover { background: #fff; color: var(--color-ink); }

@media (max-width: 47.99rem) {
  .hero { min-height: min(82vh, 38rem); }
  .hero-stage { padding: var(--space-xl) var(--page-gutter); }
  .hero-copy h1 { font-size: clamp(2.1rem, 6vw + 1rem, 2.75rem); }
  .hero-copy .lead { font-size: 1.02rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--color-rose-deep);
  color: #fff;
  padding-block: var(--space-sm);
}
.trust-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- Shared section rhythm ---------- */
.text-fold { padding-block: var(--space-2xl); }
.text-fold.alt { background: var(--color-rose-pale); }
.text-fold h2 { font-size: clamp(1.75rem, 1.4vw + 1.4rem, 2.4rem); }
.text-fold > .wrap > p:not(.eyebrow) { max-width: 40rem; color: var(--color-ink-2); }

/* ---------- Story ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}
.story-copy p { color: var(--color-ink-2); }
.story-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.5rem;
}
.story-media {
  position: relative;
}
.story-media::before {
  content: "";
  display: block;
  padding-top: 125%; /* 4:5 fallback if aspect-ratio isn't honored */
}
.story-media img {
  position: absolute;
  inset: 0;
}
@media (max-width: 55rem) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { order: -1; max-width: 26rem; margin-inline: auto; width: 100%; }
}

/* ---------- What We Bake: C4 masonry, one flagship spanning two columns.
   5 cards total: flagship(span 2) + 1 = row of 3 units; remaining 3 cards
   fill the next row of 3 units exactly, at every column count used below,
   so there's never a leftover partial row to center. ---------- */
.bake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.bake-flagship { grid-column: span 2; }
.bake-card {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--rule-color);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bake-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bake-card { position: relative; }
.bake-card:not(.bake-card-text)::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 fallback if aspect-ratio isn't honored */
}
.bake-card:not(.bake-card-text) img { position: absolute; inset: 0; }
.bake-card.bake-flagship:not(.bake-card-text)::before { padding-top: 56.25%; } /* wider flagship photo, 16:9 */
.bake-flagship img { aspect-ratio: 16 / 9; }
.bake-body { padding: var(--space-md); position: relative; }
.bake-flagship .bake-body,
.bake-card:not(.bake-card-text) .bake-body { margin-top: 0; }
.bake-card:not(.bake-card-text) { padding-top: 0; }
.bake-card:not(.bake-card-text) .bake-body { position: static; }
.bake-card h3 { font-size: 1.1rem; margin-bottom: var(--space-xs); }
.bake-card p { color: var(--color-ink-2); font-size: 0.92rem; margin: 0; }
.bake-card-text { justify-content: center; background: var(--color-rose-deep); border-color: var(--color-rose-deep); }
.bake-card-text .bake-body { padding: var(--space-lg) var(--space-md); }
.bake-card-text h3 { color: #fff; }
.bake-card-text p { color: rgba(255,255,255,0.88); }

@media (max-width: 63.99rem) {
  .bake-grid { grid-template-columns: repeat(2, 1fr); }
  .bake-flagship { grid-column: span 2; }
}
@media (max-width: 30rem) {
  .bake-grid { grid-template-columns: 1fr; }
  .bake-flagship { grid-column: auto; }
}

/* ---------- Reviews: exactly 2 cards, auto-fit collapses cleanly to 1-up,
   no partial-row risk possible with a 2-item grid. ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.review-card {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--rule-color);
  border-radius: 0.5rem;
}
.review-card .stars { color: var(--color-rose-deep); letter-spacing: 0.15em; margin-bottom: var(--space-sm); }
.review-card p:not(.stars) { color: var(--color-ink-2); font-style: italic; }
.review-card cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
  margin-top: var(--space-sm);
}

/* ---------- Visit ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}
.visit-copy p { color: var(--color-ink-2); }
.hours {
  margin: 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--rule-color);
  border-radius: 0.5rem;
  padding: var(--space-md) var(--space-lg);
}
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.5rem;
  border-bottom: var(--rule-hair) solid var(--rule-color);
  font-variant-numeric: lining-nums;
}
.hours div:last-child { border-bottom: none; }
.hours dt { font-weight: 600; color: var(--color-ink); }
.hours dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 48rem) {
  .visit-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.foot-statement {
  padding: var(--space-2xl) var(--page-gutter);
  text-align: center;
  background: var(--color-ink);
  color: rgba(255,255,255,0.85);
}
.foot-statement .line {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.foot-statement .credit { font-size: 0.85rem; margin: 0; }
.foot-statement .credit a { color: var(--color-rose-pale); text-decoration: none; }


/* --- Accessibility baseline (Web Interface Guidelines) --- */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(-200%);
}
.skip-link:focus { outline: none; }
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
[id] {
  scroll-margin-top: calc(5.5rem + env(safe-area-inset-top, 0px));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Safe-area gutters on sticky chrome; contain scroll chaining in drawers/overlays */
.nav, .nav-min, .masthead, .bar {
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}
.nav-drawer {
  overscroll-behavior: contain;
}

/* --- Web Interface Guidelines extras --- */
a, button, summary, input, select, textarea, label, [role="button"], [role="tab"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
h1, h2, h3 { text-wrap: pretty; }