/* ==========================================================================
   Mila Prints Design — shared.css
   Shared component styles. Load after colors_and_type.css on every page.
   Page-specific rules live in each page's own <style> block.
   ========================================================================== */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BODY BASE ── */
body {
  background: var(--mpd-ivory);
  color: var(--mpd-ink);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  overflow-x: hidden;
}
/* Custom cursor only where a real pointer exists */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
}

/* ── CUSTOM CURSOR ──
   mix-blend-mode: difference so the dot inverts against any background
   (forest, ivory, ink-deep, photos) and stays visible across the entire page. */
#mpd-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.35s ease, height 0.35s ease, opacity 0.25s ease;
  mix-blend-mode: difference;
}
#mpd-cursor.expand {
  width: 48px; height: 48px;
  background: transparent;
  border: 0.5px solid #ffffff;
  mix-blend-mode: difference;
}
#mpd-cursor.hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  #mpd-cursor { display: none; }
}

/* ── NAV — smart-sticky behavior ──
   Hidden on load (translateY(-100%)). Reveals on upward scroll with an
   ivory background. Hides on downward scroll. Background is always
   ivory when visible (contrasts every section). Mobile menu open
   forces the nav visible. */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px var(--grid-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.32s var(--ease-standard), background 0.3s ease, border-bottom 0.3s ease;
}
#site-nav.is-visible { transform: translateY(0); }
#site-nav.scrolled {
  background: var(--mpd-ivory);
  border-bottom: 0.5px solid var(--mpd-ink-mute);
}
body.nav-open #site-nav { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  #site-nav { transition: background 0.3s ease, border-bottom 0.3s ease; }
}
.nav-logo {
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mpd-ivory);
  line-height: 1;
  transition: color 0.3s ease;
}
.nav-logo .nav-logo-accent { color: inherit; }
#site-nav.scrolled .nav-logo { color: var(--mpd-ink); }
.nav-links {
  flex: 1;
  justify-content: center;
  display: flex;
  gap: clamp(10px, 1.5vw, 32px);
  list-style: none;
  font-family: var(--font-micro);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.nav-links li { flex-shrink: 0; }
.nav-links a {
  white-space: nowrap;
  color: var(--mpd-ivory);
  text-decoration: none;
  opacity: 0.85;
  position: relative;
  transition: opacity 0.2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 0.5px;
  background: currentColor;
  transition: width 200ms cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { opacity: 1; padding-bottom: 2px; }
.nav-links a.active::after { width: 100%; }
#site-nav.scrolled .nav-links a { color: var(--mpd-ink); }
.nav-cta {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-micro);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--mpd-ivory);
  border: 0.5px solid rgba(246,242,236,0.5);
  padding: 8px 20px;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.nav-cta:hover { background: var(--mpd-ivory); border-color: var(--mpd-ivory); color: var(--mpd-forest); }
.nav-cta:active { background: var(--mpd-rose); border-color: var(--mpd-rose); color: var(--mpd-forest-deep); }
.nav-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mpd-rose); }
#site-nav.scrolled .nav-cta { color: var(--mpd-ink); border-color: var(--mpd-ink); }
#site-nav.scrolled .nav-cta:hover { background: var(--mpd-forest); border-color: var(--mpd-forest); color: var(--mpd-ivory); }
#site-nav.scrolled .nav-cta:active { background: var(--mpd-forest-deep); border-color: var(--mpd-forest-deep); color: var(--mpd-ivory); }
#site-nav.scrolled .nav-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mpd-forest); }
.nav-mobile-toggle { display: none; background: none; border: none; cursor: none; }

/* ════════════════════════════════════════════
   CTA SYSTEM — Mila Prints DS v2
   01 Primary · 02 Editorial · 03 Inline · 04 Micro
   Light · Color · Dark surfaces
   States: default · hover · active · focus · disabled
════════════════════════════════════════════ */

/* ── 01 · PRIMARY CTA — Futura Heavy ghost border ── */
.mpd-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--mpd-ink);
  background: transparent;
  color: var(--mpd-ink);
  border-radius: 0;
  padding: 14px 32px;
  cursor: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease, transform 0.22s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
  white-space: nowrap;
}
.mpd-cta:hover { background: var(--mpd-forest); border-color: var(--mpd-forest); color: var(--mpd-ivory); transform: translateY(-1px); }
.mpd-cta:active { background: var(--mpd-forest-deep); border-color: var(--mpd-forest-deep); color: var(--mpd-ivory); }
.mpd-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mpd-forest); }
.mpd-cta[disabled], .mpd-cta[aria-disabled="true"], .mpd-cta.is-disabled {
  border-color: var(--mpd-ink-mute); color: var(--mpd-ink-mute);
  background: transparent; pointer-events: none; opacity: 0.5;
}

/* On DARK surface */
.mpd-cta.on-dark, .on-dark .mpd-cta { border-color: var(--mpd-ivory); color: var(--mpd-ivory); }
.mpd-cta.on-dark:hover, .on-dark .mpd-cta:hover { background: var(--mpd-ivory); border-color: var(--mpd-ivory); color: var(--mpd-forest); }
.mpd-cta.on-dark:active, .on-dark .mpd-cta:active { background: var(--mpd-rose); border-color: var(--mpd-rose); color: var(--mpd-forest-deep); }
.mpd-cta.on-dark:focus-visible, .on-dark .mpd-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mpd-rose); }
.mpd-cta.on-dark[disabled], .mpd-cta.on-dark[aria-disabled="true"], .mpd-cta.on-dark.is-disabled,
.on-dark .mpd-cta[disabled], .on-dark .mpd-cta[aria-disabled="true"], .on-dark .mpd-cta.is-disabled {
  border-color: rgba(246,242,236,0.25); color: rgba(246,242,236,0.25); opacity: 1;
}

/* On COLOR surface */
.mpd-cta.on-color, .on-color .mpd-cta { border-color: var(--mpd-ivory); color: var(--mpd-ivory); }
.mpd-cta.on-color:hover, .on-color .mpd-cta:hover { background: var(--mpd-ivory); border-color: var(--mpd-ivory); color: var(--mpd-forest); }
.mpd-cta.on-color:active, .on-color .mpd-cta:active { background: var(--mpd-rose); border-color: var(--mpd-rose); color: var(--mpd-forest-deep); }
.mpd-cta.on-color:focus-visible, .on-color .mpd-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--mpd-rose); }
.mpd-cta.on-color[disabled], .mpd-cta.on-color[aria-disabled="true"], .mpd-cta.on-color.is-disabled,
.on-color .mpd-cta[disabled], .on-color .mpd-cta[aria-disabled="true"], .on-color .mpd-cta.is-disabled {
  border-color: rgba(246,242,236,0.25); color: rgba(246,242,236,0.25); opacity: 1;
}

/* ── 02 · EDITORIAL CTA — Bodoni italic, underline slides from left on hover ── */
.mpd-cta-editorial {
  display: inline-block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--mpd-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 0.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color 0.22s cubic-bezier(.22,1,.36,1), opacity 0.22s cubic-bezier(.22,1,.36,1), background-size 280ms cubic-bezier(.16,1,.3,1);
  cursor: none;
  padding: 0 0 3px;
}
.mpd-cta-editorial:hover { color: var(--mpd-forest); background-size: 100% 0.5px; }
.mpd-cta-editorial:active { color: var(--mpd-berry); background-size: 100% 0.5px; }
.mpd-cta-editorial:focus-visible { outline: 1px solid var(--mpd-forest); outline-offset: 4px; }
.mpd-cta-editorial[aria-disabled="true"], .mpd-cta-editorial.is-disabled {
  color: var(--mpd-ink-mute); border-bottom-color: var(--mpd-ink-mute); pointer-events: none; opacity: 0.5;
}
.mpd-cta-editorial.on-dark, .mpd-cta-editorial.on-color,
.on-dark .mpd-cta-editorial, .on-color .mpd-cta-editorial { color: var(--mpd-ivory); }
.mpd-cta-editorial.on-dark:hover, .mpd-cta-editorial.on-color:hover,
.on-dark .mpd-cta-editorial:hover, .on-color .mpd-cta-editorial:hover { color: var(--mpd-rose); background-size: 100% 0.5px; }
.mpd-cta-editorial.on-dark:active, .mpd-cta-editorial.on-color:active,
.on-dark .mpd-cta-editorial:active, .on-color .mpd-cta-editorial:active { color: var(--mpd-burnt); background-size: 100% 0.5px; }
.mpd-cta-editorial.on-dark:focus-visible, .mpd-cta-editorial.on-color:focus-visible,
.on-dark .mpd-cta-editorial:focus-visible, .on-color .mpd-cta-editorial:focus-visible { outline-color: var(--mpd-rose); }

/* ── 03 · INLINE LINK — Futura Book, hairline ── */
.mpd-link {
  font-family: var(--font-body);
  font-size: inherit;
  color: var(--mpd-forest);
  text-decoration: none;
  border-bottom: 0.5px solid var(--mpd-forest);
  padding-bottom: 1px;
  cursor: none;
  transition: color 0.2s ease, border-color 0.2s ease, border-bottom-width 0.2s ease;
}
.mpd-link:hover { color: var(--mpd-forest-deep); border-bottom-color: var(--mpd-forest-deep); border-bottom-width: 1px; }
.mpd-link:active { color: var(--mpd-berry); border-bottom-color: var(--mpd-berry); }
.mpd-link:focus-visible { outline: 1px solid var(--mpd-forest); outline-offset: 3px; }
.mpd-link[aria-disabled="true"], .mpd-link.is-disabled {
  color: var(--mpd-ink-mute); border-bottom-color: var(--mpd-ink-mute); pointer-events: none;
}
.on-dark .mpd-link, .on-color .mpd-link { color: var(--mpd-rose); border-bottom-color: var(--mpd-rose); }
.on-dark .mpd-link:hover, .on-color .mpd-link:hover { color: var(--mpd-ivory); border-bottom-color: var(--mpd-ivory); }
.on-dark .mpd-link:active, .on-color .mpd-link:active { color: var(--mpd-burnt); border-bottom-color: var(--mpd-burnt); }
.on-dark .mpd-link:focus-visible, .on-color .mpd-link:focus-visible { outline-color: var(--mpd-rose); }

/* ── 04 · MICRO-LABEL CTA — Helvetica Light, all caps ── */
.mpd-cta-micro {
  display: inline-block;
  font-family: var(--font-micro);
  font-weight: 300;
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--mpd-ink-mute);
  text-decoration: none;
  cursor: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  padding: 0;
  background: none;
  border: 0;
}
.mpd-cta-micro:hover { color: var(--mpd-forest); }
.mpd-cta-micro:active { color: var(--mpd-forest-deep); }
.mpd-cta-micro:focus-visible { outline: 1px solid var(--mpd-forest); outline-offset: 4px; }
.mpd-cta-micro[aria-disabled="true"], .mpd-cta-micro.is-disabled { opacity: 0.35; pointer-events: none; }
.mpd-cta-micro.on-dark, .mpd-cta-micro.on-color,
.on-dark .mpd-cta-micro, .on-color .mpd-cta-micro { color: var(--mpd-rose); }
.mpd-cta-micro.on-dark:hover, .mpd-cta-micro.on-color:hover,
.on-dark .mpd-cta-micro:hover, .on-color .mpd-cta-micro:hover { color: var(--mpd-ivory); }
.mpd-cta-micro.on-dark:focus-visible, .mpd-cta-micro.on-color:focus-visible,
.on-dark .mpd-cta-micro:focus-visible, .on-color .mpd-cta-micro:focus-visible { outline-color: var(--mpd-rose); }

/* ── MAGNETIC BUTTON ── */
.magnetic-btn { display: inline-flex; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }

/* ── SECTION BASE ── */
section { position: relative; }
.section-inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 120px var(--grid-margin);
}
@media (max-width: 900px) { .section-inner { padding: 80px 40px; } }
@media (max-width: 600px) { .section-inner { padding: 60px 24px; } }

/* ── SCROLL REVEAL — 3-group stagger ──
   Group 1 (0ms):   eyebrow + folio meta — snaps in first.
   Group 2 (90ms):  display headline.
   Group 3 (280ms): Bodoni deck + body + CTA — breath gap before landing. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Group 1 — eyebrow, folio, section-label */
.reveal-1, .reveal-delay-1 { transition-delay: 0ms; }

/* Group 2 — display headline */
.reveal-2, .reveal-delay-2 { transition-delay: 90ms; }

/* Group 3 — deck + body + CTA; starts from y:12 for added depth */
.reveal-3,
.reveal-delay-3, .reveal-delay-4, .reveal-delay-5,
.reveal-delay-6, .reveal-delay-7 { transition-delay: 280ms; }
.reveal-3 { transform: translateY(12px); }

/* reveal-bleed — was an editorial clip-path "wipe" opened by the
   IntersectionObserver. Both that observer and a load-time animation START
   from a hidden (fully clipped) state, so if either never runs — the observer
   fails to fire for a clipped element, a tab is throttled, a device is slow —
   the image stays INVISIBLE. That is exactly the bug that left the Challenge
   photo blank. Any reveal that begins hidden is fragile, so on a client-facing
   page the image is now simply always visible (no clip, no gating animation).
   `.reveal-bleed.visible` is kept as a harmless no-op for existing markup. */
.reveal-bleed,
.reveal-bleed.visible {
  clip-path: none;
  opacity: 1;
  transform: none;
  animation: none;
}

/* ── SECTION LABEL — eyebrow with hairline rule ──
   Promoted to a real section marker (Edu, May 2026 — round 2):
   even bigger and stronger. Heroes don't use .section-label
   (they use .hero-eyebrow), so this never bleeds into a hero. */
.section-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
  color: var(--mpd-ink);
}
.section-label::before {
  content: '';
  display: block;
  width: 72px;
  height: 0;
  border-top: 1.25px solid currentColor;
  opacity: 1;
  transition: width 360ms cubic-bezier(.7,0,.2,1);
}
/* Opt-in: add .animate-rule so IntersectionObserver triggers the grow-in */
.section-label.animate-rule::before { width: 0; }
.section-label.animate-rule.visible::before { width: 72px; }

.section-label.on-dark  { color: var(--mpd-ivory); }
.section-label.on-dark::before  { opacity: 0.85; }
.section-label.on-color { color: var(--mpd-ivory); }
.section-label.on-color::before { opacity: 0.85; }

/* ── IMG HOVER ── */
.img-hover {
  overflow: hidden;
  position: relative;
}
.img-hover::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 0.5px solid rgba(246,242,236,0.7);
  border-left: 0.5px solid rgba(246,242,236,0.7);
  transition: width var(--dur-image) var(--ease-standard), height var(--dur-image) var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}
.img-hover:hover::after { width: 48px; height: 48px; }
.img-hover .photo-inner { transition: transform var(--dur-image) var(--ease-standard); }
.img-hover:hover .photo-inner { transform: scale(1.03); }
.photo-inner { width: 100%; height: 100%; }

/* ── MUSEUM FIGCAPTION — italic Bodoni print name + Futura micro spec ── */
.photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px 16px;
  background: linear-gradient(to top, rgba(14,27,25,0.75) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft);
  pointer-events: none;
  z-index: 3;
}
.photo-caption-rule {
  display: block;
  width: 28px; height: 0;
  border-top: 0.5px solid rgba(246,242,236,0.5);
  margin-bottom: 10px;
}
.photo-caption-name {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--mpd-ivory);
  display: block;
  margin-bottom: 4px;
}
.photo-caption-meta {
  font-family: var(--font-micro);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.6);
  display: block;
}
.img-hover:hover .photo-caption { opacity: 1; transform: translateY(0); }

/* ── MARQUEE ── */
.marquee-strip {
  background: var(--mpd-forest);
  overflow: hidden;
  padding: 21px 0;
  border-top: 0.5px solid rgba(246,242,236,0.15);
}
.marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 20s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mpd-ivory);
  padding: 0 48px;
  opacity: 0.9;
}
.marquee-track .dot { color: var(--mpd-rose); padding: 0; opacity: 1; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── FOOTER ── */
footer {
  background: var(--mpd-ink-deep);
  color: var(--mpd-ivory);
}
.footer-top {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 80px var(--grid-margin) 64px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  border-top: 0.5px solid rgba(246,242,236,0.12);
  border-bottom: 0.5px solid rgba(246,242,236,0.15);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } }
/* Unified footer typography — Futura family only, no Helvetica Neue.
   Same size + color + tracking across every micro label and bottom row,
   so the brand column, link columns and bottom row read as one system. */
.footer-logo {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mpd-ivory);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.footer-logo .footer-logo-accent { color: inherit; }
.footer-tagline {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(246,242,236,0.6);
  max-width: 300px;
  /* Tightened (Edu, round 3): the "Born in Argentina…" credential was removed
     from the brand column, so the remaining items pull closer together to keep
     this column the same height as the three link columns next to it. */
  margin-bottom: 18px;
}
.footer-email {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mpd-rose);
  text-decoration: none;
}
.footer-credential {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.5);
  line-height: 1.6;
  margin: 0 0 22px 0;
}
/* Social row that lives in the brand column directly under Email us.
   Rose accent — matches Email us; replaces the old centered .footer-social
   row in the bottom bar. */
.footer-social-inline {
  list-style: none;
  padding: 0;
  /* Tightened (Edu, round 3): credential removed, so socials sit closer
     to Email us to keep the brand column height in line with the link columns. */
  margin: 14px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-social-inline a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mpd-rose);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-social-inline a:hover { color: var(--mpd-ivory); }
.footer-col-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.45);
  margin-bottom: 20px;
  line-height: 1;
}
.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-links a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(246,242,236,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: var(--mpd-ivory); }
.footer-bottom {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 24px var(--grid-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom .footer-copy { text-align: left; }
.footer-bottom .footer-updated { margin-left: auto; text-align: right; }
/* Bottom row — every line shares the same micro-label spec */
.footer-copy,
.footer-bottom .mpd-micro,
.footer-bottom .footer-updated,
.footer-social a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.45);
  line-height: 1.4;
  margin: 0;
}
.footer-bottom .mpd-micro { /* beat the inline mpd-ink-mute color overrides */
  color: rgba(246,242,236,0.45) !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  margin-top: 4px !important;
}
.footer-social { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.footer-social a { text-decoration: none; transition: color 0.2s; }
.footer-social a:hover { color: var(--mpd-ivory); }

/* ── NAV PADDING — tighter margins at mid-desktop so 7 items always fit single-line ── */
@media (min-width: 1281px) and (max-width: 1440px) {
  #site-nav { padding-left: 40px; padding-right: 40px; }
}

/* ── MOBILE NAV — collapses at 1280px so 7 items never overflow on laptops ── */
@media (max-width: 1280px) {
  .nav-links { display: none; }
  .nav-mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    width: 36px; height: 36px;
    align-items: center;
  }
  .nav-mobile-toggle span {
    display: block;
    width: 22px;
    height: 0.5px;
    background: var(--mpd-ivory);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  }
  #site-nav.scrolled .nav-mobile-toggle span { background: var(--mpd-ink); }
  body.nav-open .nav-mobile-toggle span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
  body.nav-open .nav-mobile-toggle span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); }
  .nav-cta { display: none; }
}

/* ── MOBILE MENU OVERLAY ── */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--mpd-ink-deep);
  color: var(--mpd-ivory);
  display: flex;
  flex-direction: column;
  padding: 100px 32px 48px;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: none;
  visibility: hidden;
}
body.nav-open #mobile-menu {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
  flex: 1;
}
.mobile-menu-list a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mpd-ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.mobile-menu-list a.active { color: var(--mpd-rose); }
.mobile-menu-list .mm-num {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--mpd-rose);
  text-transform: none;
}
.mobile-menu-footer {
  border-top: 0.5px solid rgba(246,242,236,0.15);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu-footer a {
  font-family: var(--font-micro);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mpd-rose);
  text-decoration: none;
}
.mobile-menu-footer .mm-tagline {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(246,242,236,0.7);
}
@media (min-width: 1025px) {
  #mobile-menu { display: none !important; }
}

/* ══════════════════════════════════════════
   TEXT-ONLY PAGE HERO — shared component
   Dark background, 2-col grid, no imagery.
   Pages: bespoke-portfolio, faq,
          get-in-touch, journal
══════════════════════════════════════════ */
.text-hero {
  background: var(--mpd-ink-deep);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.text-hero-inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 160px var(--grid-margin) 96px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: 80px;
  align-items: end;
}
.text-hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mpd-rose);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.text-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 0;
  border-top: 0.5px solid var(--mpd-rose);
  opacity: 0.6;
  flex-shrink: 0;
}
.text-hero-deck {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(246,242,236,0.65);
  margin-top: 24px;
  max-width: 420px;
}
.text-hero-deck a {
  color: var(--mpd-rose);
  text-decoration: none;
  border-bottom: 0.5px solid var(--mpd-rose);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.text-hero-deck a:hover { color: var(--mpd-ivory); border-color: var(--mpd-ivory); }
.text-hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.8vw, 6.25rem);
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--mpd-ivory);
}
.text-hero-headline .accent { color: var(--mpd-rose); }
.text-hero-rhs {
  display: flex;
  flex-direction: column;
  align-self: end;
  padding-bottom: 8px;
}
.text-hero-subhead {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  line-height: 1.5;
  color: rgba(246,242,236,0.85);
  padding-left: 24px;
  border-left: 0.5px solid var(--mpd-rose);
  max-width: 440px;
}
.text-hero-microbar {
  border-top: 0.5px solid rgba(246,242,236,0.15);
  padding: 22px var(--grid-margin);
  max-width: var(--grid-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-micro);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.45);
}
.text-hero-microbar .crumb { display: inline-flex; align-items: center; gap: 12px; }
.text-hero-microbar .crumb a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.text-hero-microbar .crumb a:hover { color: var(--mpd-ivory); }
.text-hero-microbar .crumb .sep { opacity: 0.5; }
.text-hero-microbar .badge { color: var(--mpd-rose); }

@media (max-width: 900px) {
  .text-hero-inner {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding: 140px 32px 80px;
  }
  .text-hero-rhs { padding-bottom: 0; }
  .text-hero-subhead {
    padding-left: 0;
    border-left: 0;
    border-top: 0.5px solid var(--mpd-rose);
    padding-top: 20px;
    max-width: 28em;
  }
}
@media (max-width: 600px) {
  .text-hero-inner { padding: 120px 24px 60px; }
  .text-hero-microbar { padding: 20px 24px; }
}
@media (max-width: 480px) {
  .footer-bottom { flex-wrap: wrap; gap: 16px; }
}
body.nav-open { overflow: hidden; }

/* ════════════════════════════════════════════
   SECTION-TYPE LIBRARY — 9 variants
   Mix ~5 per page; never repeat the same type twice in a row.
════════════════════════════════════════════ */

/* type-editorial-block: current default — eyebrow + headline + deck + body + CTA */
.type-editorial-block .section-inner {
  padding-top: var(--rhythm-default);
  padding-bottom: var(--rhythm-default);
}

/* type-pull-quote-bleed: Bodoni quote at 4–6rem on Forest, no headline */
.type-pull-quote-bleed {
  background: var(--mpd-forest);
  color: var(--mpd-ivory);
}
.type-pull-quote-bleed .section-inner {
  padding-top: var(--rhythm-monumental);
  padding-bottom: var(--rhythm-monumental);
  max-width: 960px;
}
.type-pull-quote-bleed .pull-quote-text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(2.4rem, 4.5vw, 5.5rem);
  line-height: 1.15;
  color: var(--mpd-ivory);
  letter-spacing: -0.01em;
}
.type-pull-quote-bleed .pull-quote-attr {
  font-family: var(--font-micro);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.5);
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.type-pull-quote-bleed .pull-quote-attr::before {
  content: '';
  display: inline-block;
  width: 40px;
  border-top: 0.5px solid rgba(246,242,236,0.35);
}

/* type-archive-row: numbered list with hover-reveal thumbnail */
.type-archive-row .section-inner {
  padding-top: var(--rhythm-tight);
  padding-bottom: var(--rhythm-tight);
}
.archive-list { list-style: none; }
.archive-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 0.5px solid var(--mpd-ink-mute);
  cursor: none;
  position: relative;
  transition: color 0.2s;
}
.archive-item:first-child { border-top: 0.5px solid var(--mpd-ink-mute); }
.archive-item-num {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mpd-rose);
  letter-spacing: 0.04em;
}
.archive-item-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mpd-ink);
  transition: color 0.2s;
}
.archive-item:hover .archive-item-title { color: var(--mpd-forest); }
.archive-item-meta {
  font-family: var(--font-micro);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mpd-ink-mute);
  text-align: right;
}
.archive-item-thumb {
  position: absolute;
  right: 140px; top: 50%;
  transform: translateY(-50%);
  width: 120px; height: 80px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(.16,1,.3,1);
}
.archive-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.archive-item:hover .archive-item-thumb { opacity: 1; }

/* type-photo-marquee: horizontal-scroll editorial strip */
.type-photo-marquee .section-inner {
  padding-top: var(--rhythm-default);
  padding-bottom: var(--rhythm-default);
}
.photo-marquee-track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: ew-resize;
  -webkit-overflow-scrolling: touch;
}
.photo-marquee-track::-webkit-scrollbar { display: none; }
.photo-marquee-item {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 400px);
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.photo-marquee-item img { width: 100%; height: 100%; object-fit: cover; }

/* type-stat-anchor: one big Futura numeral, one Bodoni clause */
.type-stat-anchor .section-inner {
  padding-top: var(--rhythm-monumental);
  padding-bottom: var(--rhythm-monumental);
  text-align: center;
}
.stat-anchor-numeral {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-monument);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--mpd-forest);
  display: block;
}
.stat-anchor-clause {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  color: var(--mpd-ink-soft);
  margin-top: 24px;
  display: block;
}

/* type-credit-colophon: Italian credit-page typography as section opener */
.type-credit-colophon .section-inner {
  padding-top: var(--rhythm-tight);
  padding-bottom: var(--rhythm-tight);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.credit-colophon-title {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  color: var(--mpd-ink-mute);
  letter-spacing: 0.08em;
}
.credit-colophon-body {
  font-family: var(--font-micro);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mpd-ink-mute);
  line-height: 1.8;
}

/* type-split-diptych: two images, no copy */
.type-split-diptych .section-inner {
  padding: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* type-typographic-only: headline + 1 sentence, generous negative space */
.type-typographic-only .section-inner {
  padding-top: var(--rhythm-overhang);
  padding-bottom: var(--rhythm-overhang);
}
.type-typographic-only .tpo-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-monument);
  letter-spacing: 0.04em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--mpd-ink);
}
.type-typographic-only .tpo-sentence {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  color: var(--mpd-ink-soft);
  max-width: 42ch;
  margin-top: 40px;
}

/* type-hero-* scaffolding */
.type-hero-lens, .type-hero-text, .type-hero-photo { min-height: 100svh; }

/* ════════════════════════════════════════════
   FORM STATES — pending + success (D9)
════════════════════════════════════════════ */

/* is-submitting: hairline fills button L→R over 700ms */
.contact-form.is-submitting .form-submit {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.contact-form.is-submitting .form-submit::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--mpd-rose);
  animation: btn-fill 700ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-fill { to { width: 100%; } }
.contact-form.is-submitting label { opacity: 0.6; transition: opacity 0.3s; }
.contact-form.is-submitting .submit-label { display: none; }
.contact-form.is-submitting .submit-label-sending { display: inline; }
.submit-label-sending { display: none; }

/* is-success: ivory wash + Bodoni line lands */
.contact-form.is-success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: var(--mpd-ivory);
  transition: background 0.4s;
}
.form-success-message {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  color: var(--mpd-ink);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms cubic-bezier(.16,1,.3,1) 80ms,
              transform 480ms cubic-bezier(.16,1,.3,1) 80ms;
}
.contact-form.is-success .form-success-message { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════
   CLOSING CTA STRIP — shared component
   (moved from faq.html — applies to all pages that use #closing)
══════════════════════════════════════════ */
#closing {
  background: var(--mpd-plum);
}
.closing-inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 120px var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.closing-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.5vw, 4.5rem);
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--mpd-ivory);
}
.closing-headline em {
  display: block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mpd-rose);
  margin-top: 20px;
  line-height: 1.4;
}
.closing-ctas {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: flex-end;
}
.closing-cta-block {
  border-top: 0.5px solid rgba(246,242,236,0.15);
  padding-top: 32px;
}
.closing-cta-label {
  font-family: var(--font-micro);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,242,236,0.35);
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .closing-inner { grid-template-columns: 1fr; gap: 56px; padding: 80px 24px; }
}