/* =====================================================
   V4 article pages (venues, guides, privacy, terms).
   Generated markup: gen-pages.mjs. Mobile first; the
   desktop composition starts at 1024px.
   Palette and fonts follow /wedding-magician-toronto/_brand.css.
   ===================================================== */
:root {
  --pearl: #efece3;
  --paper: #e8e1d3;
  --paper-deep: #ddd3c0;
  --wine: #580e11;
  --wine-deep: #3e0a0c;
  --wine-ink: #24060a;
  --champagne: #d3c181;
  --gold-hi: #efe2b0;
  --gold-lo: #a88c45;
  --ink: #2b211a;
  --ink-soft: rgba(43, 33, 26, 0.72);
  --rule: rgba(168, 140, 69, 0.5);
  --ff-display: "Italiana", "Cormorant Garamond", serif;
  --ff-script: "Pinyon Script", cursive;
  --ff-serif: "Cormorant Garamond", Georgia, serif;
  --ff-sans: "Jost", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 20px;
  --wrap: 1240px;
  --tex-paper: url("tex/paper-cream.jpg");
  --tex-velvet: url("tex/velvet-wine.jpg");
  --velvet-hero:
    radial-gradient(130% 90% at 0% 0%, rgba(120, 22, 28, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(20, 3, 5, 0.5), rgba(20, 3, 5, 0) 38%),
    var(--wine-deep) var(--tex-velvet) center / cover;
  /* opaque enough that header links stay >= 4.5:1 even over a white sky */
  --nav-pill: rgba(36, 6, 10, 0.86);
}

@media (min-width: 768px) {
  :root { --gutter: clamp(32px, 5vw, 72px); }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper) var(--tex-paper) top center / 1400px auto repeat;
  color: var(--ink);
  font: 400 1.125rem / 1.62 var(--ff-serif);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--wine); color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* Lenis (same rules as lenis/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- thin gold reading-progress line ---- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 2px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--champagne) 55%, var(--gold-hi));
  box-shadow: 0 0 10px rgba(211, 193, 129, 0.6);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- site header (build/chrome.mjs + css/header.css) ----
   On the home the header floats over the dark film. Article pages scroll
   onto cream paper, so the bar carries its own velvet ground to keep the
   pearl menu links readable everywhere. */
.page .hdr {
  /* no backdrop-filter: it would make .hdr the containing block of the
     fixed Book button and the fixed overlay menu on phones */
  background: linear-gradient(180deg, rgba(36, 6, 10, 0.96), rgba(36, 6, 10, 0.9));
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.8);
}
.page .progress { z-index: 31; }

/* ---- hero: velvet text band + photo ---- */
.hero { position: relative; }
.hero__text {
  position: relative;
  padding: 128px var(--gutter) calc(30vw + 40px);
  color: var(--pearl);
  background: var(--velvet-hero);
}
.hero--plain .hero__text,
.hero--legal .hero__text { padding-bottom: 64px; }

.crumbs {
  font: 400 0.64rem / 1.9 var(--ff-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 236, 227, 0.72);
}
/* links stay >= 44px tall (touch targets); the underline sits on the text */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: rgba(211, 193, 129, 0.4);
  text-underline-offset: 5px;
  transition: color 0.3s;
}
.crumbs a:hover { color: var(--gold-hi); }
.crumbs__sep { margin: 0 0.3em; color: var(--champagne); }
.crumbs [aria-current] { color: var(--gold-hi); }

.kicker { margin-top: 30px; font: 400 2.5rem / 1 var(--ff-script); color: var(--champagne); }
.hero__title {
  margin-top: 8px;
  font: 400 clamp(2.3rem, 1.2rem + 4.8vw, 5.4rem) / 1.02 var(--ff-display);
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.h1-main { display: block; }
.h1-sub {
  display: block;
  margin-top: 0.5em;
  font: italic 400 max(1.25rem, 0.4em) / 1.25 var(--ff-serif);
  color: var(--gold-hi);
}
.lead {
  max-width: 34em;
  margin-top: 24px;
  font: italic 400 clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem) / 1.45 var(--ff-serif);
  color: rgba(239, 236, 227, 0.9);
}
.back { font: 400 0.7rem / 1 var(--ff-sans); letter-spacing: 0.22em; text-transform: uppercase; }
.back a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--champagne); }
.back a:hover { color: var(--gold-hi); }
.hero--legal .hero__title { margin-top: 28px; }
.updated { margin-top: 18px; font: italic 400 1.15rem / 1.4 var(--ff-serif); color: rgba(239, 236, 227, 0.8); }

/* hero photo, mobile: a framed square pulled up into the velvet */
.hero__media { position: relative; z-index: 1; margin: -30vw var(--gutter) 0; }
.fig--hero .frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wine-ink);
  box-shadow: 0 30px 60px -28px rgba(36, 6, 10, 0.75);
}
.fig--hero .frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(239, 226, 176, 0.55);
  pointer-events: none;
}
.fig--hero img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}
/* landscape photos (3:2 and wider): a 4:3 print. The photo rests on the
   frame's bottom edge (page.js only lets it drift down), so what sits low in
   the picture, like the card in a guest's hand, stays in view. */
.hero--wide .fig--hero .frame { aspect-ratio: 4 / 3; }
.hero--wide .fig--hero img { top: -8%; height: 108%; }

/* ---- figures in the text ---- */
.fig figcaption {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
  font: 300 0.8rem / 1.55 var(--ff-sans);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.fig figcaption a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: color 0.3s, border-color 0.3s; }
.fig figcaption a:hover { color: var(--wine); border-color: var(--wine); }

.art__body .fig { margin-inline: calc(-1 * var(--gutter)); }
.art__body .fig figcaption { margin-inline: var(--gutter); }
.art__body .frame { position: relative; overflow: hidden; }
.art__body .frame img { width: 100%; transition: transform 1.6s var(--ease); }
.art__body .fig:hover .frame img { transform: scale(1.03); }

/* ---- "Photo coming soon": empty frame until the client adds a photo ---- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 180px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(239, 236, 227, 0.92), rgba(221, 211, 192, 0.9) 75%),
    var(--paper-deep);
  box-shadow: inset 0 0 0 1px rgba(168, 140, 69, 0.35), inset 0 0 80px rgba(88, 14, 17, 0.07);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(168, 140, 69, 0.45);
  outline: 1px solid rgba(168, 140, 69, 0.18);
  outline-offset: 5px;
  pointer-events: none;
}
.ph__label {
  font: 400 0.7rem / 1 var(--ff-sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ph .ornament { width: 84px; margin: 0; }
.fig--hero .ph { position: absolute; inset: 0; height: 100%; }

.ornament { display: block; width: 120px; height: 12px; margin: 0 auto 20px; overflow: visible; }
.ornament path { fill: none; stroke: var(--gold-lo); stroke-width: 1; }
.ornament path + path { fill: var(--champagne); stroke: none; }

/* ---- article body ---- */
.art__body {
  display: grid;
  gap: 64px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
}
.sec__title {
  font: 400 clamp(1.85rem, 1.3rem + 1.8vw, 2.8rem) / 1.08 var(--ff-display);
  letter-spacing: 0.01em;
  color: var(--wine);
  text-wrap: balance;
}
.sec__title::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--gold-lo);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease) 0.1s;
}
.sec__text { margin-top: 20px; }
.sec__text p { max-width: 36em; font-size: clamp(1.14rem, 1.04rem + 0.4vw, 1.34rem); line-height: 1.66; }
.sec__text p + p { margin-top: 1em; }
.sec__text a { color: var(--wine); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.dropcap::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  font: 400 3.5em / 0.8 var(--ff-display);
  color: var(--wine);
}

/* headings rest fully visible; JS only dims the ones still below the
   fold (.is-pending) and lets them settle as they scroll in */
.reveal {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), letter-spacing 1.4s var(--ease);
}
.reveal.is-pending { opacity: 0.22; transform: translateY(18px); letter-spacing: 0.05em; }
.reveal.is-pending::before { transform: scaleX(0.2); }

/* ---- Google Maps block: title + external link (no iframe) ---- */
.map-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(239, 236, 227, 0.6);
}
.map-card__art { display: block; width: 100%; height: 150px; background: rgba(239, 236, 227, 0.85); }
.map-card__art .st { fill: none; stroke: rgba(88, 14, 17, 0.18); stroke-width: 1.2; }
.map-card__art .st--river { stroke: rgba(168, 140, 69, 0.45); stroke-width: 7; stroke-linecap: round; }
.map-card__art .st--avenue { stroke-width: 2.6; }
.map-card__art .pin path { fill: var(--wine); }
.map-card__art .pin circle { fill: var(--champagne); }
.map-card__title { padding: 26px 24px 30px; }
.map-card__title a {
  font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem) / 1.2 var(--ff-display);
  color: var(--wine);
  text-decoration: none;
  background: linear-gradient(var(--gold-lo), var(--gold-lo)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease);
}
.map-card__title a::after { content: "\2197"; margin-left: 0.35em; font: 400 0.7em / 1 var(--ff-sans); color: var(--gold-lo); }
.map-card__title a:hover,
.map-card__title a:focus-visible { background-size: 100% 1px; }

/* ---- booking call to action ---- */
.cta {
  position: relative;
  margin: 40px calc(-1 * var(--gutter)) 0;
  padding: 72px 24px 56px;
  text-align: center;
  color: var(--pearl);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(140, 30, 36, 0.35), transparent 65%),
    var(--wine-deep) var(--tex-velvet) center / cover;
}
.cta::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(211, 193, 129, 0.35); pointer-events: none; }
.cta__seal {
  position: absolute;
  top: -38px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 35% 30%, #8a2028, var(--wine-deep) 72%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.2), inset 0 -4px 7px rgba(0, 0, 0, 0.5);
}
.cta__seal img { width: 40px; opacity: 0.85; }
.cta__title { font: 400 clamp(2rem, 1.4rem + 2.2vw, 3.3rem) / 1.08 var(--ff-display); color: var(--pearl); }
.cta p { max-width: 30em; margin: 18px auto 0; font: italic 400 clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem) / 1.5 var(--ff-serif); color: rgba(239, 236, 227, 0.9); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 32px;
  padding: 0.9rem 2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 0.76rem / 1.2 var(--ff-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.4s, color 0.4s, transform 0.45s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--champagne { background: var(--champagne); border-color: var(--champagne); color: var(--wine-deep); }
.btn--champagne:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

/* ---- legal note ---- */
.note { padding-top: 22px; border-top: 1px solid var(--rule); }
.note p { max-width: 38em; font: italic 400 1.08rem / 1.55 var(--ff-serif); color: var(--ink-soft); }

/* ---- more from the journal ---- */
.related {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 24px var(--gutter) 120px;
  text-align: center;
}
.related__title { font: 400 clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem) / 1.1 var(--ff-display); color: var(--wine); }
.related__grid { display: grid; margin-top: 36px; text-align: left; }
.rel {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.rel__img { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-deep); }
.rel__img img, .rel__img .ph { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform 1.4s var(--ease); }
.rel:hover .rel__img img { transform: scale(1.05); }
.rel h3 { font: 400 1.45rem / 1.1 var(--ff-display); color: var(--wine); }
.rel p { margin-top: 8px; font: 400 0.66rem / 1.6 var(--ff-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- footer (shared chrome) ---- */
.foot {
  padding: 64px var(--gutter) calc(104px + env(safe-area-inset-bottom));
  color: var(--pearl);
  background: linear-gradient(180deg, rgba(20, 3, 5, 0.55), rgba(20, 3, 5, 0.8)), var(--wine-ink) var(--tex-velvet) center / cover;
}
.foot__inner { display: grid; justify-items: center; gap: 22px; max-width: var(--wrap); margin: 0 auto; text-align: center; }
.foot__logo { width: 70px; opacity: 0.9; }
.foot__copy { font: italic 400 1.1rem / 1.4 var(--ff-serif); color: rgba(239, 236, 227, 0.85); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; font: 400 0.68rem / 1.4 var(--ff-sans); letter-spacing: 0.2em; text-transform: uppercase; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); text-decoration: none; transition: color 0.3s; }
.foot__links a:hover { color: var(--gold-hi); }
/* "More from Roman Royss": the network block, same links as the home footer */
.foot__net { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(211, 193, 129, 0.25); width: 100%; }
.foot__net-title { font: 400 0.68rem / 1.4 var(--ff-sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239, 236, 227, 0.7); }
.foot__net .more-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; list-style: none; font: italic 400 1rem / 1.4 var(--ff-serif); }
.foot__net .more-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); text-decoration: none; transition: color 0.3s; }
.foot__net .more-links a:hover { color: var(--gold-hi); }

/* ---- phones: larger, lighter footer text (owner request, 2026-10-05). Desktop
   (the 1024px composition) and tablets above 767px keep the rules above. The
   bottom padding keeps the last link clear of the fixed Book button and of the
   cookie notice that a first-time visitor sees at the foot of the screen. ---- */
@media (max-width: 767px) {
  .foot { padding-top: 56px; padding-bottom: calc(136px + env(safe-area-inset-bottom)); }
  .foot__inner { gap: 20px; }
  .foot__logo { width: 84px; opacity: 1; }
  .foot__copy { font-size: 1.25rem; line-height: 1.35; color: var(--pearl); text-wrap: balance; }
  .foot__links { gap: 0 24px; font-size: 0.95rem; letter-spacing: 0.14em; }
  .foot__links a { color: var(--gold-hi); }
  .foot__net-title { font-size: 0.92rem; letter-spacing: 0.16em; color: var(--pearl); }
  .foot__net .more-links { gap: 0 20px; font-size: 1.25rem; line-height: 1.3; }
  .foot__net .more-links a { color: var(--gold-hi); text-align: center; text-wrap: balance; }
}

/* ---- tablet: calmer overlap ---- */
@media (min-width: 600px) and (max-width: 1023px) {
  .hero__text { padding-bottom: calc(20vw + 48px); }
  .hero__media { margin-top: -20vw; }
  .fig--hero .frame { aspect-ratio: 4 / 3; }
}

/* =====================================================
   Desktop composition: split hero (velvet text left,
   full-height photo right, credit on the photo), hanging
   section headings, figures alternating left and right.
   ===================================================== */
@media (min-width: 1024px) {
  .hero:not(.hero--plain):not(.hero--legal) {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    min-height: min(100svh, 980px);
  }
  .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 150px clamp(40px, 5vw, 96px) 88px max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  }
  .hero--plain .hero__text,
  .hero--legal .hero__text { min-height: 54vh; padding-right: var(--gutter); }
  .hero__media { margin: 0; }
  .fig--hero { position: relative; height: 100%; }
  .fig--hero .frame { height: 100%; aspect-ratio: auto; box-shadow: none; }
  .fig--hero .frame::after { inset: 18px; z-index: 2; }
  .fig--hero .frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20, 3, 5, 0.55), transparent 22%, transparent 60%, rgba(20, 3, 5, 0.82));
    pointer-events: none;
  }
  .fig--hero figcaption {
    position: absolute;
    z-index: 3;
    left: 44px;
    right: 44px;
    bottom: 40px;
    margin: 0;
    border-left-color: rgba(211, 193, 129, 0.65);
    color: rgba(239, 236, 227, 0.9);
  }
  .fig--hero figcaption a { border-color: rgba(211, 193, 129, 0.6); }
  .fig--hero figcaption a:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

  /* framed hero: velvet across the page, the photo hung as a 4:3 print in
     the right column (about 0.7x of the source, so it stays sharp) with
     its credit underneath on the velvet */
  .hero.hero--wide { align-items: end; background: var(--velvet-hero); }
  .hero--wide .hero__text { background: none; }
  .hero--wide .hero__media { padding: 150px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 88px 0; }
  .hero--wide .fig--hero { height: auto; }
  .hero--wide .fig--hero .frame {
    height: auto;
    aspect-ratio: 4 / 3;
    outline: 1px solid rgba(211, 193, 129, 0.3);
    outline-offset: 12px;
    box-shadow: 0 44px 80px -40px rgba(0, 0, 0, 0.8);
  }
  .hero--wide .fig--hero .frame::before { content: none; }
  .hero--wide .fig--hero figcaption { position: static; margin-top: 30px; }

  .art__body { gap: 104px; padding-top: 120px; padding-bottom: 128px; }
  .sec,
  .map-card,
  .note {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }
  .sec__text { margin-top: 0; padding-top: 22px; }
  .dropcap::first-letter { font-size: 4.2em; }
  .note p { grid-column: 2; }
  .art__body .fig { width: 76%; margin-inline: 0; }
  .art__body .fig figcaption { margin-inline: 0; }
  .art__body .fig--right { margin-left: auto; }
  .map-card { align-items: stretch; }
  .map-card__art { height: 100%; min-height: 200px; }
  .map-card__title { align-self: center; padding: 44px 44px 44px 0; }
  .cta { margin: 56px 0 0; padding: 104px 64px 80px; }

  .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .rel { display: block; padding: 0; border: 0; }
  .rel__body { padding-top: 20px; }
  .rel h3 { font-size: 1.75rem; }

  .foot { padding-bottom: 64px; }
  .foot__inner { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: 40px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-pending { opacity: 1; transform: none; letter-spacing: 0.01em; }
  .reveal.is-pending::before { transform: none; }
  [data-parallax] { transform: none !important; }
}