/* ============================================================
   MIRA BEINART PHOTOGRAPHY — SITE STYLESHEET
   ------------------------------------------------------------
   Theme: "Editorial Punch" — cream + ink base, amber primary accent,
   teal secondary accent, punch red (#E71D36 / #A3122A text-safe) used
   sparingly: the nav's active-page underline, and the emphasis words
   "like you." (hero) and "camera" (about) via --font-accent em color.

   Type system:
     --font-display  Bold Souls Sans Round (self-hosted, licensed)  — headlines
     --font-body     Instrument Sans (Google Fonts)                 — body/UI
     --font-accent   Bold Souls Script (self-hosted, licensed)      — emphasis words, signature

   Everything is driven off the CSS variables in :root and the
   @font-face block below — further theme tweaks should happen here
   rather than in index.html / pricing.html / portfolio.html / contact.html.
   ============================================================ */

/* -------------------- RESET -------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* -------------------- SELF-HOSTED HEADLINE FONT --------------------
   Bold Souls Sans Round — purchased with a web license. Only ships as a
   single static weight, so nothing below should ask it for a bold/light
   variant (the browser would fake it and it looks rough) — font-weight
   stays "normal" everywhere --font-display is used. */
@font-face {
  font-family: 'Bold Souls Sans Round';
  src: url('fonts/BoldSoulsSansRound-Regular.woff2') format('woff2'),
       url('fonts/BoldSoulsSansRound-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bold Souls Script — same licensed family, script companion used for
   --font-accent (emphasis words inside headlines, the signature line). */
@font-face {
  font-family: 'Bold Souls Script';
  src: url('fonts/BoldSoulsScript-Regular.woff2') format('woff2'),
       url('fonts/BoldSoulsScript-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

a { color: inherit; }

ul { list-style: none; }

button { font: inherit; cursor: pointer; }

/* -------------------- THEME TOKENS -------------------- */
:root {
  /* core palette — "Editorial Punch": cream + ink, amber primary accent,
     teal secondary accent. Punch red is finalized as a rare, special-use
     highlight only — the nav's active-page underline, and exactly two
     emphasis words site-wide ("like you." on Home, "camera" on About).
     Don't extend it to other pages' header emphasis words (About's "full",
     Contact's "something beautiful.", Portfolio's "love.", Pricing's
     "transparent", Travel's "lifestyle.") — those stay amber (--accent-deep)
     by design, confirmed 2026-09-03. */
  --bg:            #FBF7EF;  /* cream */
  --surface:       #F3EDE0;  /* deeper warm cream, for placeholder blocks/panels */
  --surface-dark:  #0E1A26;  /* ink, for dark sections (investment, book-band) */
  --accent:        #FF9F1C;  /* amber — primary accent */
  --accent-deep:   #B5560C;  /* darker amber — text-safe on cream (labels, links, em) */
  --accent-2:      #2EC4B6;  /* teal — secondary accent */
  --accent-2-deep: #1C8A80;  /* darker teal — text-safe on cream, if needed */
  --punch:         #E71D36;  /* punch red — used sparingly, see comment at top */
  --punch-deep:    #A3122A;  /* darker punch red — text-safe on cream */
  --line:          #E4DFD0;  /* warm neutral border */
  --ink:           #0E1A26;  /* ink navy-black, primary text */
  --ink-light:     #5B6672;  /* muted navy-grey, secondary text */
  --on-dark:       #FBF7EF;  /* cream text on dark surfaces */

  /* type */
  --font-display: 'Bold Souls Sans Round', 'Helvetica Neue', Arial, sans-serif; /* headline */
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;       /* secondary — body/UI */
  --font-accent:  'Bold Souls Script', 'Brush Script MT', cursive;             /* tertiary — emphasis, signature */
  --tracking-display: 0.02em; /* slightly opened-up letter-spacing for the bold headline font */

  /* layout */
  --page-max: 1200px;
  --gutter: 5rem;
  --gutter-sm: 1.5rem;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}

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

/* -------------------- NAV -------------------- */
#nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
#nav.scrolled {
  background: rgba(251,247,239,0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Same full wordmark as the footer — kept short so the two-line mark
   never crowds the sticky nav, which stays visible while scrolling. */
.nav-logo-img { height: 34px; width: auto; display: block; }
.nav-links {
  display: flex;
  gap: 2.4rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }
.nav-links a.active { border-bottom: 1px solid var(--punch); padding-bottom: 2px; } /* punch red — keeper */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
}
.nav-toggle span {
  width: 22px; height: 1px;
  background: var(--ink);
  display: block;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Hamburger morphs into an X while the mobile menu is open (.nav-toggle
   gets .open alongside .nav-links, toggled together in js/main.js) — top
   and bottom bars rotate to cross at center, middle bar fades out. Same
   button doubles as the close control. */
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------- BUTTONS -------------------- */
.btn-primary,
.btn-outline,
.btn-light {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.22s;
  border: 1px solid transparent;
}
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

.btn-outline {
  border-color: var(--line);
  color: var(--ink-light);
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }

.btn-light {
  border-color: rgba(251,247,239,0.35);
  color: var(--on-dark);
}
.btn-light:hover { background: var(--on-dark); color: var(--surface-dark); }

/* -------------------- SECTION LABELS / TITLES -------------------- */
.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.16;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.section-title em { font-family: var(--font-accent); font-style: normal; color: var(--punch-deep); } /* punch red — "camera" in the about section */
.deco-line { width: 40px; height: 1px; background: var(--line); margin: 0 auto 1.5rem; }

/* -------------------- HERO (index.html) -------------------- */
.hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hero-text-side {
  padding: 4rem var(--gutter);
}
.hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.4rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 2rem;
}
.hero-title em { font-family: var(--font-accent); font-style: normal; color: var(--punch-deep); } /* punch red — "like you." in the hero */
.hero-sub {
  font-size: 1.05rem;
  color: var(--ink-light);
  max-width: 380px;
  margin-bottom: 2.4rem;
}
.hero-image-side {
  position: relative;
  min-height: 68vh;
  background: var(--bg);
}
.hero-image-side img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-block {
  width: 100%; height: 100%; min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--ink-light);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

/* -------------------- ABOUT (index.html) -------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* Insets the whole row so the image isn't flush against the page's top,
     left, and bottom edges. Right is 0 on purpose — .about-text-side
     already has its own right-hand padding (var(--gutter)) below, so adding
     more here would double it up. */
  padding: 3rem 0 3rem var(--gutter);
}
.about-image-side {
  min-height: 580px;
  background: var(--bg);
}
.about-image-side img { width: 100%; height: 100%; object-fit: cover; }
.about-text-side { padding: 5rem var(--gutter); }
.about-text-side p {
  color: var(--ink-light);
  font-size: 1.02rem;
  max-width: 440px;
  margin-bottom: 1.2rem;
}
.about-sig {
  margin-top: 1.6rem;
  font-family: var(--font-accent);
  font-size: 1.8rem;
  font-style: normal;
  color: var(--accent-deep);
}
.about-more-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.about-more-link:hover { color: var(--ink); }

/* -------------------- ABOUT PAGE (about.html) -------------------- */
/* Rebuilt from scratch (2026-08-27), modeled on sarahmadden.co.uk: a single
   portrait photo on the left, intro copy on the right. Photo/text are grid
   siblings with the default align-items: stretch — no min-height override
   on the row itself, so the photo's height comes purely from matching
   however tall the text column naturally is (the same fix that solved the
   earlier stretch bug: let stretch do the work, don't fight it with
   align-items: center). The text column now ends at the email link — the
   "Tidbits" facts (below) moved back out into their own standalone section,
   so the photo stops there too instead of running the whole page. */
.about-profile {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  gap: 4rem;
  padding: 1rem var(--gutter) 3rem;
}
.about-profile-photo { background: var(--bg); min-height: 480px; overflow: hidden; }
.about-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15); /* crops in tighter than object-fit: cover alone — bump/reduce this to adjust */
}
.about-profile-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-profile-text p {
  color: var(--ink-light);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
.about-profile-subhead {
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--accent-deep);
  margin: 0.6rem 0 1rem;
}
.about-profile-email {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 2.6rem;
}
.about-profile-email:hover { color: var(--accent-deep); }

/* TIDBITS (about.html) — restored to its original standalone, full-width
   style: centered column, surface background, border-top as the section
   divider. Was "Off Camera" before Mira renamed it. */
.fun-facts {
  background: var(--surface);
  padding: 5rem var(--gutter);
  border-top: 1px solid var(--line);
}
.fun-facts-inner { max-width: var(--page-max); margin: 0 auto; }
.fun-facts-intro {
  color: var(--ink-light);
  font-size: 1.02rem;
  max-width: 480px;
  margin-bottom: 2.6rem;
}
/* All four tidbits in one row, each with a photo underneath. Real photos
   are in now (images/about/more/) — .fun-facts-photo has a fixed height
   (see below) so all four render the same size no matter how many lines
   a given column's dt/dd text wraps to; an empty .placeholder-block (for
   a future fifth item, say) instead flexes to fill the row like before. */
.fun-facts-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
}
.fun-facts-list > div {
  display: flex;
  flex-direction: column;
}
.fun-facts-list dt {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.5rem;
}
.fun-facts-list dd {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
}
/* Real photo state — fixed height (not flex:1) so all four are the same
   size regardless of how much each column's dt/dd text wraps. margin-top:
   auto (rather than a fixed gap) pushes each photo to the bottom of its
   column — since every column is stretched to the same grid row height,
   that pins all four photos to the same line, gap above varying instead
   of the photos themselves drifting. Adjust the crop per photo with an
   inline object-position on the <img> (same "zoom percent" pattern used
   for the portfolio/pricing photos). */
.fun-facts-photo {
  margin-top: auto;
  padding-top: 1.2rem;
  height: 260px;
  overflow: hidden;
  box-sizing: content-box;
}
.fun-facts-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fun-facts-photo.placeholder-block {
  flex: 1;
  height: auto;
  min-height: 100px;
  font-size: 0.68rem;
}

/* -------------------- FEATURED WORK TEASER (index.html) -------------------- */
.teaser-section {
  padding: 6rem var(--gutter);
  background: var(--surface);
  text-align: center;
}
/* Horizontal scrolling strip — built to hold more photos than fit on
   screen at once (Mira's adding more soon). Each photo is a fixed width so
   adding items just makes the strip longer/more scrollable rather than
   squeezing existing photos smaller. scroll-snap makes it settle on a
   photo rather than stopping mid-scroll. Still swipeable/draggable on its
   own — the arrows (#teaserGrid scroll handling in js/main.js) are just a
   click-friendly alternative. */
.teaser-scroll {
  position: relative;
  max-width: var(--page-max);
  margin: 3rem auto 0;
}
.teaser-grid {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.teaser-photo {
  flex: 0 0 auto;
  width: min(320px, 78vw);
  height: 320px;
  background: var(--bg);
  overflow: hidden;
  scroll-snap-align: start;
}
.teaser-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teaser-arrow {
  position: absolute;
  top: calc(50% - 0.25rem); /* nudge up to sit centered over the photos, not the scrollbar gutter */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(15,13,11,0.12);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.teaser-arrow:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.teaser-arrow svg { width: 18px; height: 18px; }
.teaser-arrow-prev { left: 0.75rem; }
.teaser-arrow-next { right: 0.75rem; }
.teaser-cta { margin-top: 3rem; }
.teaser-cta p { color: var(--ink-light); margin-bottom: 1rem; }

/* -------------------- GENERIC PAGE HEADER (pricing / portfolio / contact) -------------------- */
.page-header {
  padding: 8rem var(--gutter) 4rem;
  border-bottom: 1px solid var(--line);
}
.page-header--flush { border-bottom: none; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin-bottom: 0.8rem;
}
.page-header h1 em { font-family: var(--font-accent); font-style: normal; color: var(--accent-deep); }
.page-header p {
  color: var(--ink-light);
  font-size: 1.05rem;
  max-width: 520px;
  margin-top: 1rem;
}
.page-header p a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
/* Pricing's header wraps its blurb paragraphs in .page-header-text (the
   other pages' single paragraph sits straight in .page-header) — widened
   here since two paragraphs made the shared 520px cap wrap too early. */
.page-header-text p { max-width: 680px; }

/* Pricing page's "Book a Session" header button (.page-header--with-cta
   modifier — only pricing.html uses it, so About/Portfolio/Contact/Around
   the World's plain .page-header is untouched). Normal block flow puts
   it right after .page-header-text on every screen size, i.e. right below
   the header paragraphs, same as Home's hero button after its sub-text.
   (A top-right desktop placement was tried and looked off, so this is
   intentionally the same on mobile and desktop.) */
.page-header-cta { margin-top: 2rem; }

/* -------------------- PRICING QUICK LINKS (pricing.html) --------------------
   Jump links to each client-type section on the page, plus FAQs. */
.pricing-quick-links {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  padding: 2rem var(--gutter) 0;
}
.pricing-quick-links a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pricing-quick-links a:hover { color: var(--ink); border-color: var(--accent-deep); }

/* Without this, jumping to any of the quick-links targets lands them flush
   with the very top of the viewport — which is exactly where the sticky
   #nav sits, so it covers the heading/first package. scroll-margin-top adds
   breathing room above the target when the browser scrolls to it (nav
   height is ~76px). */
#umd-grads, #faqs {
  scroll-margin-top: 100px;
}

/* -------------------- PRICING (pricing.html) -------------------- */
.pricing-section {
  padding: 3.5rem var(--gutter) 6rem;
}
/* Tighter gap between the College Graduates "Book Your Session" button and
   the Add-Ons & FAQs section right below it — .pricing-section's default
   padding (6rem bottom + 3.5rem top) stacked into a big gap now that
   Add-Ons & FAQs is the very next section. These two overrides shrink
   just that seam, not the section's other edges (top of College
   Graduates, bottom of Add-Ons & FAQs above the footer). */
.pricing-section:first-of-type { padding-bottom: 3rem; }
#faqs { padding-top: 1.5rem; }

/* Standalone divider between the two sections above — same 1px line used
   elsewhere on the site (e.g. .pricing-item's border-top), just as its
   own full-width element here rather than attached to a row. */
.pricing-divider {
  border-top: 1px solid var(--line);
  margin: 0 var(--gutter);
}

.pricing-list { display: flex; flex-direction: column; }
/* Big alternating photo/text rows — flex (not grid) so nth-child(even) can
   simply reverse the row direction to flip photo/text sides, rather than
   juggling grid-column/order per child. align-items: flex-start (rather
   than center) keeps each row's text column flush with the top of its
   photo. */
.pricing-item {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}
.pricing-item:first-child { border-top: none; }
.pricing-item:nth-child(even) { flex-direction: row-reverse; }
.pricing-photo {
  flex: 0 0 45%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}
.pricing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder-block's own min-height (320px, for standalone use elsewhere)
   would otherwise overflow .pricing-photo's fixed 3:2 box and get clipped —
   this lets it fill exactly 100% of the slot instead, for any package row
   that doesn't have a real photo yet. */
.pricing-photo .placeholder-block { min-height: 0; }
.pricing-text { flex: 1; min-width: 0; }
/* Inset the text column on whichever side is away from the photo, so it
   wraps a bit sooner instead of running flush to the page edge — and so
   the same inset applies on both row orientations: photo-left rows get the
   inset on the right (where the text would otherwise hit the page edge),
   photo-right rows get it on the left (where the text starts), keeping the
   margin visually consistent either way. */
.pricing-item:nth-child(odd) .pricing-text { padding-right: 3rem; }
.pricing-item:nth-child(even) .pricing-text { padding-left: 3rem; }
.pricing-name {
  font-family: var(--font-display);
  font-weight: normal;
  /* No forced uppercase: Bold Souls Sans Round is missing true capital
     X/Y/Z glyphs, so a package name with one of those letters (spelled
     normally) never hits the fallback font. It still reads as a bold
     caps-style headline because of how this font is drawn. */
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.pricing-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.65em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
/* A real CSS circle instead of a Unicode bullet character — the "•" glyph
   rendered too small/dot-like at this bold, uppercase size in Instrument
   Sans, so this guarantees an actual round dot regardless of font
   rendering. currentColor keeps it matching whatever color the meta text
   ends up being. */
.pricing-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pricing-copy p {
  color: var(--ink-light);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.pricing-copy p:last-child { margin-bottom: 0; }
/* Bulleted list — replaces plain <p> description lines. Custom dash marker
   via ::before since the site-wide reset strips default list markers. */
.pricing-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pricing-bullets li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--ink-light);
  font-size: 1rem;
  line-height: 1.6;
}
.pricing-bullets li::before {
  /* A real CSS circle rather than a Unicode bullet character, same reason
     as .pricing-meta-dot above — guarantees an actual round dot regardless
     of how small/dot-like the font renders "•". */
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.pricing-cta { margin-top: 3rem; text-align: center; }

/* Compact card row — was used by the High School Seniors section (removed
   from pricing.html per Mira). Left in place unused in case a similar
   side-by-side card row is needed again; safe to delete if not. Base is
   3-up; .pricing-cards-2 splits that width evenly (not 45/55) so package
   photos render at the same size. */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.pricing-cards.pricing-cards-2 {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;
}
.pricing-cards.pricing-cards-2 > .pricing-card { flex: 1; min-width: 0; }
.pricing-card { display: flex; flex-direction: column; }
.pricing-card .pricing-name {
  /* Original clamp was sized for the wide alternating-row text column —
     too large for a narrow 1-of-3 card, so scaled down here. */
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.8rem;
}
.pricing-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 1.2rem;
}
.pricing-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pricing-card-photo .placeholder-block { width: 100%; height: 100%; min-height: 0; }

/* ADD-ONS & FAQs — two-column layout (Add-Ons left, a static price list;
   FAQs right, dropdowns — see further down). Full width of the page to
   match the package rows above (no extra max-width cap). Stacks to one
   column (Add-Ons on top) under 900px — see the media query further
   down. */
.faq-columns {
  display: flex;
  gap: 4rem;
  margin-top: 2.5rem;
}
.faq-col { flex: 1; min-width: 0; }
.faq-col-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-align: center;
  margin-bottom: 1rem;
}
/* Add-Ons price list (left column) — grouped into .addons-group blocks
   ("Additional Images", "Session Upgrades", etc.), each a small caps label
   above a list of Label · Price rows. Reuses .pricing-meta-dot (defined
   with the package rows above) for the round separator dot. */
.addons-group + .addons-group { margin-top: 2.2rem; }
.addons-subhead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.6rem;
}
.addons-list { list-style: none; margin: 0; padding: 0; padding-left: 1.2rem; }
.addons-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.addons-list li:first-child { border-top: none; padding-top: 0; }
.addons-note {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-light);
}

.faq-list { margin: 0; }
.faq-item {
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
}
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  margin-bottom: 0.6rem;
}
.faq-answer {
  color: var(--ink-light);
  font-size: 1rem;
  line-height: 1.65;
}

/* FAQ dropdowns (right column only — Add-Ons on the left stays a plain
   static list). Each .faq-item is a native <details>, so the browser
   handles the expand/collapse — this just strips the default triangle
   marker and draws a +/− toggle instead. */
.faq-list-dropdown .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.faq-list-dropdown .faq-question::-webkit-details-marker { display: none; }
.faq-list-dropdown details[open] .faq-question { margin-bottom: 0.6rem; }
.faq-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.faq-toggle::before, .faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent-deep);
  transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 14px; height: 2px; }
.faq-toggle::after { width: 2px; height: 14px; transition: transform 0.2s ease, opacity 0.2s ease; }
.faq-list-dropdown details[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* -------------------- PORTFOLIO (portfolio.html) -------------------- */
.filter-bar {
  display: flex;
  gap: 0.6rem;
  padding: 2rem var(--gutter);
  align-items: center;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-right: 0.5rem;
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.35rem 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--ink);
}

.portfolio-grid {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  padding: 0 var(--gutter) 1rem;
  align-items: flex-start;
}
.portfolio-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.8rem;
}
.port-item {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.port-item:hover { border-color: var(--ink); }
.port-item img { width: 100%; display: block; }
.port-item .placeholder-block { min-height: 240px; }

/* -------------------- PORTFOLIO LIGHTBOX -------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15,13,11,0.94); /* neutral warm black, not the navy --ink */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 4rem 2rem;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content { max-width: 90vw; max-height: 85vh; }
.lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--on-dark);
  padding: 0.6rem;
  transition: opacity 0.2s, color 0.2s;
  opacity: 0.75;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; color: var(--accent); }
.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg { display: block; }
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-prev svg, .lightbox-next svg { width: 26px; height: 26px; }
.lightbox-close { top: 1.5rem; right: 2rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .lightbox { padding: 5rem 1rem; }
  .lightbox-prev svg, .lightbox-next svg { width: 22px; height: 22px; }
}

/* -------------------- SHOW MORE (portfolio.html grid) -------------------- */
.portfolio-grid-wrap {
  max-height: 1400px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.portfolio-grid-wrap.expanded {
  max-height: none;
}
.show-more-wrap {
  text-align: center;
  padding: 2rem 0 4rem;
}

/* -------------------- WHAT ELSE I DO teaser (portfolio.html) -------------------- */
.shoot-teaser {
  padding: 4rem var(--gutter) 5rem;
  text-align: center;
}
.shoot-line {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.shoot-line:hover { color: var(--accent-deep); }

/* -------------------- AROUND THE WORLD location sections (travel-lifestyle.html) -------------------- */
.location-section {
  padding: 3.5rem var(--gutter) 1rem;
}
.location-section:first-of-type {
  padding-top: 1rem;
}
.location-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.location-date {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-light);
}
.coming-soon-block {
  font-family: var(--font-accent);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  color: var(--accent-deep);
  text-align: center;
}

.book-band {
  background: var(--surface-dark);
  padding: 5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.book-band h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--on-dark);
  max-width: 420px;
  line-height: 1.2;
}
.book-band h2 em { font-family: var(--font-accent); font-style: normal; color: var(--accent); }

/* -------------------- CONTACT (contact.html) -------------------- */
.contact-section {
  padding: 5rem var(--gutter) 7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-heading {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin-bottom: 1rem;
}
.contact-text p {
  color: var(--ink-light);
  max-width: 400px;
  margin-bottom: 1.6rem;
}
.contact-detail { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1.6rem; }
.contact-detail span {
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-light);
}
.contact-detail a,
.contact-detail .contact-detail-value {
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
}
.contact-detail a:hover { color: var(--accent-deep); }

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
  font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-light);
}
.required-mark { color: var(--punch-deep); margin-left: 0.15em; }
.form-field input,
.form-field textarea,
.form-field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: var(--ink); }
.form-field textarea { min-height: 90px; resize: none; line-height: 1.6; }

#thank-you {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--accent-deep);
  font-size: 1.15rem;
  font-style: italic;
}

/* -------------------- FOOTER -------------------- */
footer {
  background: var(--surface);
  padding: 2.6rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo { display: flex; align-items: center; }
/* Full wordmark — footer has more breathing room than the nav, so it can
   carry the full name instead of just the monogram. */
.footer-logo-img { height: 34px; width: auto; display: block; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-light);
  text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--ink); }
.footer-copy { font-size: 0.78rem; color: var(--ink-light); opacity: 0.7; }

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 900px) {
  :root { --gutter: 1.5rem; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-left: 1px solid var(--line);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: flex; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image-side { min-height: 90vw; }
  /* .page-header's 8rem top padding (set for desktop) left a much bigger
     gap under the nav on mobile than the home page's hero has — hero's
     mobile gap comes from .hero-text-side's 4rem padding once the hero
     stacks to one column above. Matching that value here brings About,
     Portfolio, Pricing, Contact, and Around the World in line with
     Home on mobile. */
  .page-header { padding-top: 4rem; }
  .about { grid-template-columns: 1fr; }
  .about-image-side { min-height: 420px; padding-right: var(--gutter); }
  .fun-facts-list { grid-template-columns: 1fr; }
  .about-profile { grid-template-columns: 1fr; gap: 2rem; }
  .about-profile-photo { min-height: 340px; order: -1; }
  .pricing-item, .pricing-item:nth-child(even) { flex-direction: column; gap: 1.2rem; padding: 2.5rem 0; align-items: stretch; }
  .pricing-photo { flex: 0 0 auto; }
  .pricing-item:nth-child(odd) .pricing-text,
  .pricing-item:nth-child(even) .pricing-text { padding-left: 0; padding-right: 0; }
  .pricing-cards { grid-template-columns: 1fr; gap: 2.5rem; }
  .pricing-cards.pricing-cards-2 { flex-direction: column; gap: 2.5rem; }
  .pricing-cards.pricing-cards-2 > .pricing-card:first-child,
  .pricing-cards.pricing-cards-2 > .pricing-card:last-child { flex: 1 1 auto; }
  .faq-columns { flex-direction: column; gap: 3rem; }
  .contact-section { grid-template-columns: 1fr; }
  .book-band { flex-direction: column; text-align: center; }
  footer { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .portfolio-grid-wrap { max-height: 1100px; }
}
@media (max-width: 560px) {
  .portfolio-grid { flex-direction: column; }
}