/* ═══════════════════════════════════════════════════════════════════
   Theme: Sofia — public-facing design tokens + site styles
   Source of truth for palette/type/spacing (per Claude Design mockup).

   This file is the PUBLIC look: everything Vanessa (a totally different
   Y2K it-girl theme) would need to change to become a different site.
   Admin/composer styling is theme-agnostic and lives in css/site.css —
   see themes/sofia/theme.json for the manifest (fonts, file list) and
   docs/admin-restructure-plan.md for the split rationale.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --paper: #F2F1ED;
  --ink: #161616;
  --accent: #840018;
  --accent-bright: #C0183A;
  --wine: #4B1F2E;
  --blush: #ECD5CC;
  --box-bg: #FBFAF7;
  --img-dark: #1a1014;
  --text-body: #2a2622;
  --text-2: #4a423d;
  --text-3: #6b625c;
  --text-4: #9a9089;
  --ph-caption: #8a6b66;
  --hairline: rgba(22, 22, 22, .13);
  --hairline-soft: rgba(22, 22, 22, .08);
  --hairline-dark: rgba(242, 241, 237, .14);
  --cream-50: rgba(242, 241, 237, .5);
  --cream-62: rgba(242, 241, 237, .62);

  /* Type */
  --font-display: 'Bodoni Moda', serif;      /* headings, logo */
  --font-post: 'Cormorant Garamond', serif;  /* post titles, drop caps, pull quotes */
  --font-body: 'EB Garamond', serif;         /* body, deks, captions */
  --font-ui: 'Hanken Grotesk', sans-serif;   /* nav, labels, buttons */
  --font-mono: ui-monospace, Menlo, monospace;

  /* Layout */
  --maxw: 1180px;
  --gutter: 40px;
  --radius: 2px;
  --shadow-photo: 0 40px 80px -52px rgba(75, 4, 14, .5);
  --shadow-photo-sm: 0 30px 70px -54px rgba(75, 4, 14, .5);
}

/* ── Shared micro-typography ─────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.micro {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-4);
}

.dek {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-2);
}

.divider-bar {
  width: 54px;
  height: 2px;
  background: var(--accent);
}

.btn-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 9px 18px;
  border-radius: var(--radius);
  transition: opacity .3s;
}
.btn-pill:hover { opacity: .85; }

.btn-dark {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 30px;
  font-size: 11px;
}

.btn-light {
  background: var(--paper);
  color: var(--ink);
  padding: 14px 30px;
  font-size: 11px;
}

/* ── Tagline bar ─────────────────────────────────────────────────── */

.tagline-bar {
  background: var(--ink);
  text-align: center;
  padding: 9px 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cream-62);
}

/* ── Nav ─────────────────────────────────────────────────────────── */

.site-nav {
  z-index: 50;
  background: rgba(242, 241, 237, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
}

.logo { cursor: pointer; }

.logo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 96;
  font-size: 23px;
  letter-spacing: .15em;
  color: var(--ink);
}

.logo-sub {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  gap: 34px;
}

.nav-links a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: var(--paper);
}

/* Pages whose content isn't a full-bleed band breathe before the footer;
   full-bleed bands (home teaser, studio commissions) sit flush against it. */
main.wrap { padding-bottom: 90px; }

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 58px var(--gutter) 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline-dark);
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: .15em;
}

.footer-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  color: var(--cream-62);
  max-width: 340px;
  margin-top: 14px;
  line-height: 1.55;
}

.footer-cols { display: flex; gap: 70px; }

.footer-col h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream-50);
  margin-bottom: 16px;
}

.footer-col a, .footer-col span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-3);
  color: var(--cream-62);
  margin-bottom: 10px;
  transition: color .3s;
}
.footer-col a:hover { color: var(--paper); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 26px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-50);
}

/* ── Image placeholder ───────────────────────────────────────────── */

.photo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--img-dark);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(22, 22, 22, .04) 0 1px, transparent 1px 9px),
    var(--blush);
}
.ph svg { stroke: var(--accent); opacity: .55; }
.ph-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ph-caption);
}

.caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  margin-top: 12px;
}

/* ── Home: hero ──────────────────────────────────────────────────── */

.hero { padding-top: 50px; }

/* Photo-centric: the featured photo owns three quarters of the row */
.hero-grid {
  display: grid;
  grid-template-columns: .5fr 1.5fr;
  gap: 48px;
  align-items: center;
}

.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 6px 13px;
  border-radius: var(--radius);
  margin-bottom: 26px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 14;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: .01em;
}

.hero-dek {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 20px;
  max-width: 440px;
}

.hero .divider-bar { margin: 30px 0 26px; }

.read-link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-photo .photo-frame {
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-photo);
}

.caption-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
}

.idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}

/* ── Home: journal section / cards ───────────────────────────────── */

.section { padding-top: 84px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 40;
  font-size: 40px;
  margin-top: 12px;
}

.view-all {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px 36px;
}

/* A short row (1–2 posts — e.g. a brand-new blog) would otherwise leave a card
   stranded in the rigid 3-col grid. Match the track count to the card count and
   center, so it still reads as an intentional row. Below 761px the grid stacks. */
@media (min-width: 761px) {
  .card-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 400px); justify-content: center; }
  .card-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
}

.card { cursor: pointer; position: relative; }

/* Stretched-link overlay: the whole card is still one click target (the
   title/photo), while the engagement row's own buttons sit above it and
   stay independently clickable — a <button> can never be a descendant of
   an <a>, so the link lives here instead of wrapping the card. */
.card-link-cover { position: absolute; inset: 0; z-index: 1; }

.card .photo-frame { aspect-ratio: 16 / 9; margin-bottom: 20px; background: var(--blush); }

.card-cat {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: 25px;
  line-height: 1.2;
  margin: 12px 0 10px;
  transition: color .3s;
}
.card:hover h3 { color: var(--accent); }

.blog-grid .card h3 { font-size: 28px; }

.card-dek {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* Card engagement (heart/share): sits in the meta row, above the card's
   stretched-link overlay so its own buttons stay independently clickable. */
.card-engagement {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-engagement .icon-btn-plain { padding: 4px; }

/* ── Home: quote band ────────────────────────────────────────────── */

.quote-band {
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  padding: 76px var(--gutter);
  margin-top: 84px;
}

.quote-band .eyebrow { color: rgba(242, 241, 237, .82); }

.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: 48px;
  line-height: 1.22;
  max-width: 900px;
  margin: 28px auto 24px;
}

/* ── Page headers (Blog / Studio / About) ────────────────────────── */

.page-head { padding: 60px 0 44px; }

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 14;
  font-size: 60px;
  line-height: 1.06;
  margin: 14px 0 18px;
}

.page-head h1 em, .hero-title em, .section-head em { font-style: italic; }

.page-head .dek { font-size: 19px; }

/* ── Blog: filters ───────────────────────────────────────────────── */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 48px;
}

.filter-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-right: 10px;
}

.chip {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid rgba(22, 22, 22, .25);
  border-radius: var(--radius);
  padding: 7px 15px;
  background: transparent;
  transition: all .3s;
}
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Active tag filter chip: dismissable, with an inline ✕ */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: .04em;
}
.tag-chip svg { stroke: currentColor; }

/* Post sidebar: tag links under "Tagged" */
.tag-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent);
  transition: opacity .3s;
}
.tag-link:hover { opacity: .7; text-decoration: underline; }

/* ── Post page ───────────────────────────────────────────────────── */

.post-head { padding-top: 60px; margin-bottom: 48px; }
.post-head .divider-bar { width: 42px; margin-bottom: 22px; }

.post-title {
  font-family: var(--font-post);
  font-weight: 600;
  font-size: 76px;
  line-height: 1.02;
  margin: 16px 0 20px;
}

.post-head .dek { font-size: 21px; max-width: 620px; }

/* Magazine lead: the photo runs the full content width, above the columns */
.post-lead { margin: 0 0 56px; }
.post-lead .lead-photo { aspect-ratio: 16 / 9; }

.post-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  border-top: 1px solid var(--hairline);
}

.post-sidebar {
  border-right: 1px solid var(--hairline);
  padding: 40px 32px 0 0;
}

.author-card { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blush);
  flex-shrink: 0;
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.author-name { font-family: var(--font-body); font-style: italic; font-size: 17px; }
.author-handle {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--text-4);
  margin-top: 3px;
}

.meta-item { margin-bottom: 20px; }
.meta-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.meta-value { font-family: var(--font-body); font-size: 16px; }
.meta-value.accent { color: var(--accent); font-style: italic; }

.sidebar-rule { border: none; border-top: 1px solid var(--hairline-soft); margin: 26px 0; }

.post-content { padding: 40px 0 0 56px; min-width: 0; }

/* Custom pages (Phase 5C): reuses .post-content's article typography but
   sits directly under .page-head (no .post-layout sidebar grid to offset),
   so it drops the left/top padding entirely — page-head's own bottom
   padding is the single source of dek→content spacing here, matching
   Blog/Studio/Packages. */
.custom-page-content { padding: 0; }

.lead-photo { aspect-ratio: 16 / 9; box-shadow: var(--shadow-photo-sm); }

.post-body { margin-top: 40px; }

/* Narrow magazine measure for prose; images span the full column */
.post-body p {
  font-size: 20px;
  line-height: 1.75;
  color: var(--text-body);
  margin-top: 26px;
  max-width: 680px;
}

/* Drop cap via CSS: the first letter of the first paragraph of the first
   text block. Markdown renders each text block into a .md wrapper. */
.post-body .md:first-of-type > p:first-child::first-letter {
  float: left;
  font-family: var(--font-post);
  font-weight: 600;
  font-size: 64px;
  line-height: .72;
  margin: 7px 14px 0 0;
  color: var(--accent);
}

/* ── Markdown body (.md wraps each rendered text block) ──────────────
   Paragraph typography inherits .post-body p; these style the inline
   markdown extras: headings, links, images, code, lists, quotes. */
.md h2, .md h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 40px 0 8px;
  max-width: 680px;
}
.md h2 { font-size: 34px; }
.md h3 { font-size: 26px; }

.md a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
  margin: 52px 0;
}

.md code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--box-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 1px 6px;
}

.md ul, .md ol { margin: 22px 0 22px 1.3em; max-width: 680px; }
.md li {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-body);
  margin-top: 8px;
}
.md blockquote {
  font-family: var(--font-post);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--text-2);
  border-left: 2px solid var(--accent);
  padding-left: 22px;
  margin: 28px 0;
  max-width: 680px;
}

.pullquote {
  font-family: var(--font-post);
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.25;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin: 32px 0;
  max-width: 760px;
}

.img-block { margin-top: 52px; margin-bottom: 52px; }
.img-block .photo-frame { aspect-ratio: 16 / 9; }

.img-grid { display: grid; gap: 12px; margin-top: 52px; }
.img-grid.duo { grid-template-columns: repeat(2, 1fr); }
.img-grid.trio { grid-template-columns: repeat(3, 1fr); }
.img-grid .photo-frame { aspect-ratio: 3 / 4; }
.img-grid.trio .photo-frame { aspect-ratio: 1 / 1; }

/* Video block: 16:9 frame matching the photo treatment. iframe/video fill it. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--img-dark);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  background: var(--img-dark);
}

/* ── Credits box ─────────────────────────────────────────────────── */

.credits-box {
  border: 1px solid rgba(22, 22, 22, .14);
  border-radius: var(--radius);
  background: var(--box-bg);
  padding: 30px 32px;
  margin-top: 40px;
}

.credits-box h3 {
  font-family: var(--font-post);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 16px;
}

.credit-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.credit-row:last-child { border-bottom: none; }

.credit-slot {
  flex: 0 0 88px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-4);
}

.credit-brand { font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--accent); }
.credit-brand a:hover { text-decoration: underline; }
.credit-item { font-family: var(--font-body); font-size: 17px; }

.credit-at {
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8078;
  text-align: right;
}
.credit-at a:hover { color: var(--accent); }

/* ── Related posts ───────────────────────────────────────────────── */

.related { margin-top: 70px; padding-top: 40px; border-top: 1px solid var(--hairline); }

.related h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 26px;
}

.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.related-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: 21px;
  line-height: 1.25;
  margin: 10px 0 8px;
  transition: color .3s;
}
.related-card:hover h4 { color: var(--accent); }

/* ── Studio ──────────────────────────────────────────────────────── */
/* Phase 5C: the header dropped the side-by-side studio-head variant in
   favor of the shared .page-head stack (Blog/Studio/Packages/Custom pages
   now share one eyebrow/heading/dek rhythm) — see .page-head above. */

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px 36px;
  margin-top: 50px;
}

.studio-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
}
a.studio-item { cursor: pointer; }
a.studio-item:hover .studio-item-name { color: var(--accent); }
.studio-item-name { transition: color .3s; }

.studio-item .photo-frame { aspect-ratio: 1 / 1; background: var(--blush); }

.studio-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
}

.studio-item-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: 21px;
}

.studio-item-price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}

.studio-item-sub {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 6px 0 10px;
}

.studio-item-desc { font-style: italic; font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* ── Portfolio product detail styles ─────────────────────────────────
   Shared by the composer's studio-item live preview (src/admin.jsx) and
   the public studio detail modal (.studio-modal-body, above) — the
   standalone /portfolio/:slug page these were written for is gone as of
   Phase 5B (folded into the modal), but the classes live on as the common
   "product detail" look both surfaces render. ─────────────────────── */

.product-lead .product-lead-photo { aspect-ratio: 1 / 1; background: var(--blush); max-width: 560px; margin: 0 auto; }

.product-layout { max-width: 680px; margin: 0 auto; }

.product-desc {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-body);
}

.product-price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  margin: 28px 0 20px;
}

.specs-box {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.specs-box h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 16px;
}
.specs-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-body);
  font-size: 15px;
}
.specs-row:last-child { border-bottom: none; }
.specs-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* Full-bleed band in the brand red (matches the home quote band) */
.cta-band {
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  padding: 70px var(--gutter);
  margin-top: 84px;
}

.cta-band .eyebrow { color: var(--cream-62); }

.cta-band h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 40;
  font-size: 36px;
  margin: 20px 0 30px;
}

/* ── Packages ────────────────────────────────────────────────────── */

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  /* Phase 5C: page-head's own bottom padding (44px) is the one source of
     dek→content spacing shared by Blog/Studio/Packages/Custom pages — no
     extra top margin here, so it doesn't stack on top of that padding. */
  align-items: stretch;
}

/* 4th/5th tier (rare) wrap onto a second row rather than squeeze a 4th
   column — keeps cards legible instead of turning into a spreadsheet.
   Scoped to wide screens: :has() outranks the plain selector in the
   narrow-viewport media queries below, so an unscoped version would pin
   3 columns at every width. */
@media (min-width: 961px) {
  .package-grid:has(.package-card:nth-child(4)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.package-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--box-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.package-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-photo-sm); }

.package-card .photo-frame { aspect-ratio: 16 / 9; background: var(--blush); }

.package-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 34px 32px 32px;
}

.package-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 40;
  font-size: 27px;
  line-height: 1.15;
}

.package-tagline {
  margin-top: 8px;
  font-size: 15px;
}

.package-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}

.package-price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .01em;
  color: var(--accent);
}

.package-features {
  list-style: none;
  margin: 22px 0 0;
  flex: 1;
}

.package-features li {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.package-features li:first-child { padding-top: 0; }

.package-cta {
  align-self: flex-start;
  margin-top: 28px;
}

@media (max-width: 960px) {
  .package-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .package-grid { grid-template-columns: 1fr; }
}

/* ── About ───────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: .78fr 1fr;
  gap: 70px;
  align-items: start;
  padding-top: 60px;
}

.portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 300px 300px 3px 3px;
  overflow: hidden;
  background: var(--img-dark);
  box-shadow: var(--shadow-photo);
}
/* BS.Photo wraps the image in its own .photo-frame; without a height it
   collapses and the portrait shows as just the dark frame background. Make it
   fill the aspect-ratio'd portrait-frame so the image (and placeholder) show. */
.portrait-frame .photo-frame { position: absolute; inset: 0; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.portrait-frame .ph { border-radius: 300px 300px 3px 3px; }

.about-text h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 14;
  font-size: 54px;
  line-height: 1.08;
  margin: 14px 0 26px;
}
.about-text h1 em { font-style: italic; }

.about-text > p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 20px;
}

.about-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
  border-top: 1px solid var(--hairline);
  padding-top: 30px;
  margin-top: 34px;
}

/* .meta-item's own margin-bottom (shared with the post sidebar/portfolio
   modal) would otherwise stack on top of this grid's row-gap, doubling the
   space between facts — the grid gap alone is the right amount here. */
.about-meta .meta-item { margin-bottom: 0; }

.signature {
  font-family: var(--font-post);
  font-style: italic;
  font-size: 26px;
  color: var(--accent);
}

/* Phase 5C: the gap above the signature adapts to what precedes it — a
   full gap following the facts grid (.about-meta, which already carries
   its own top border/padding), a smaller one when the owner has removed
   every fact and the signature sits directly after a paragraph (whose own
   20px margin-bottom already provides some of the breathing room). */
.about-meta + .signature { margin-top: 34px; }
.about-text > p + .signature { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   Phase 5A — Engagement (icon-only heart/share, share modal, views)
   Shared between the post-page sidebar and every post-card (home + blog
   index). Anonymous/approximate counters — see docs/editing-guide.md.
   ═══════════════════════════════════════════════════════════════════ */

.engagement-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Icon-only control base: no border/pill (unlike the admin .icon-btn) —
   just an icon with a subtle count beside it. Used for heart + share on
   both the post page and post cards. */
.icon-btn-plain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  transition: color .3s;
}
.icon-btn-plain:hover { color: var(--accent); }
.icon-btn-plain svg { stroke: currentColor; }

.engagement-count {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-4);
}

.heart-btn.hearted { color: var(--accent); }
.heart-btn.hearted svg { fill: var(--accent); }
.heart-btn.pulse svg { transform: scale(1.35); }
.heart-btn svg { transition: transform .2s ease; }

.share-control { position: relative; }

/* ── Share modal (BS.ShareModal) — reuses .modal-overlay/.modal-box,
   same visual language as .contact-modal. ─────────────────────────── */

.share-modal {
  text-align: center;
  padding: 44px 38px 40px;
}

.share-modal-heading {
  font-family: var(--font-post);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  margin: 16px 0 30px;
}

.share-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: all .3s;
}
.share-option:hover { color: var(--accent); border-color: var(--accent); }
.share-option svg { stroke: currentColor; }

.share-permalink-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}

.permalink-url {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-3);
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 2 — Discovery (search box · date filter · pagination)
   ═══════════════════════════════════════════════════════════════════ */

/* Search + date controls sit at the right end of the .filter-row, so the
   category chips keep the left. Pushed right on wide screens; wraps below
   the chips on narrow ones. */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.filter-select,
.filter-search-input {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 7px 12px;
  transition: border-color .3s;
}
.filter-select { text-transform: none; cursor: pointer; }
.filter-select:focus,
.filter-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-search { margin: 0; }
.filter-search-input { width: 180px; }
.filter-search-input::placeholder { color: var(--text-4); }

/* Prev / next + "Page N of M". Hairline-topped band, UI-font. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.page-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity .3s;
}
.page-link:hover { opacity: .65; }
.page-link.disabled { color: var(--text-4); pointer-events: none; }
.page-status {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-4);
}

@media (max-width: 760px) {
  .filter-controls { margin-left: 0; width: 100%; }
  .filter-search { flex: 1; }
  .filter-search-input { width: 100%; }
}

/* ── Lightbox (original-size photo viewer) ───────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 17, 18, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}

.lightbox-close, .modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--paper);
  padding: 8px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .3s;
  z-index: 2;
}
.lightbox-close:hover, .modal-close:hover { opacity: 1; }

/* ── Studio detail modal ─────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 17, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.modal-box {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px 30px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
}

.modal-close { color: var(--text-3); top: 12px; right: 12px; }
.modal-close:hover { color: var(--accent); }

.modal-photo { aspect-ratio: 1 / 1; background: var(--blush); margin-bottom: 12px; }

.modal-thumbs { display: flex; gap: 8px; margin-bottom: 16px; }
.modal-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  opacity: .75;
  transition: all .3s;
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-thumb:hover { opacity: 1; }
.modal-thumb.active { border-color: var(--accent); opacity: 1; }

.modal-details {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 14px 0 22px;
}

/* Portfolio detail modal (Phase 5B — reuses .modal-photo/.modal-thumbs/
   .modal-details above, plus .product-price/.specs-box/.specs-row/
   .specs-label and .tag-links from the post/product styles below).
   Redesigned for information density (Phase 6): a wide two-column layout —
   image + thumbnails fixed on the left, text content scrolling on the
   right — instead of the old single narrow stacked column, so specs/tags/
   description are legible without the whole modal growing very tall. */
.studio-modal {
  max-width: 920px;
  padding: 0;
  overflow: hidden;
  max-height: 88vh;
}

.studio-modal-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: stretch;
  max-height: 88vh;
}

.studio-modal-media {
  padding: 28px 24px 28px 28px;
  overflow-y: auto;
}
.studio-modal-media .modal-photo { margin-bottom: 12px; }

.studio-modal-body {
  padding: 28px 30px 30px 24px;
  border-left: 1px solid var(--hairline);
  overflow-y: auto;
}

.studio-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
  font-size: 26px;
  line-height: 1.2;
  margin: 8px 0 4px;
}

.studio-modal-body .product-price { margin: 16px 0 18px; }
.studio-modal-body .specs-box { margin-top: 28px; padding-top: 22px; }

/* Actions row: the in-world link pill + the text-only Share control
   sit side by side. */
.studio-modal-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Text-only button (no icon) — used for Share in the portfolio modal,
   set beside a .btn-pill so it reads as a secondary, quieter action. */
.text-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: opacity .3s;
}
.text-btn:hover { opacity: .7; }

/* ── Contact modal ("Get in touch") ──────────────────────────────── */

/* Phase 5C: a touch wider than the default 460px .modal-box so 5 equal
   columns (see .contact-links) have room to breathe. */
.contact-modal {
  text-align: center;
  padding: 44px 30px 46px;
  max-width: 520px;
}

.contact-heading {
  font-family: var(--font-post);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  margin: 16px 0 34px;
}

/* Phase 5C: all 5 in one row (5 equal columns) by default — grid instead
   of flex-wrap, so the row doesn't wrap until the viewport actually forces
   it (see the responsive block below for the narrow-width step-down). */
.contact-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  gap: 30px 20px;
}

.contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  color: var(--accent);
  transition: opacity .3s, transform .3s;
}
.contact-link span {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.contact-link:hover { transform: translateY(-2px); }
.contact-link:hover span { color: var(--accent); }
.contact-link.disabled { opacity: .3; cursor: default; }
.contact-link.disabled:hover { transform: none; }
.contact-link.disabled:hover span { color: var(--text-3); }

/* ── Responsive ──────────────────────────────────────────────────── */

/* Home edge case: with a single post the "From the Blog" grid is hidden, so
   the last block before the footer can be the "From the Blog" section (handled
   already) OR — with no studio teaser either — the hero itself, which has no
   bottom padding of its own and would otherwise sit flush against the footer.
   Give whichever section lands last its breathing room. (The studio band owns
   its own margin, so it needs nothing here.) */
main > .section:last-child,
main > .hero:last-child { padding-bottom: 90px; }

@media (max-width: 960px) {
  .hero-title { font-size: 38px; }
  .post-title { font-size: 54px; }
  .page-head h1 { font-size: 46px; }
  .quote-band blockquote { font-size: 34px; }
  .card-grid, .studio-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-links { grid-template-columns: repeat(3, 1fr); }
  /* Portfolio detail modal: stack image-over-text instead of side-by-side
     once the two-column layout no longer has room to breathe. */
  .studio-modal { max-width: 460px; }
  .studio-modal-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: auto;
  }
  .studio-modal-media, .studio-modal-body { overflow-y: visible; }
  .studio-modal-body { border-left: none; border-top: 1px solid var(--hairline); }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 14px; padding: 14px 22px; min-width: 0; }
  /* The nav can now carry any number of items (packages, custom pages) —
     on small screens it becomes a swipeable row instead of overflowing. */
  .nav-links {
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; }
  .nav-right { display: none; }
  .hero-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-title { font-size: 36px; }
  .post-title { font-size: 40px; }
  .page-head h1 { font-size: 36px; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { border-right: none; border-bottom: 1px solid var(--hairline); padding: 30px 0 26px; }
  .post-content { padding-left: 0; }
  .post-body p { font-size: 18px; }
  .card-grid, .studio-grid, .related-grid { grid-template-columns: 1fr; }
  .img-grid.duo, .img-grid.trio { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .pullquote { font-size: 26px; }
  .quote-band blockquote { font-size: 27px; }
  .contact-links { grid-template-columns: repeat(2, 1fr); }
}