/* ============================================================
   Michael & Sophia — Hanalei, Kaua'i — September 25, 2027

   COLOR STRATEGY: red and green never share equal weight side by side.
   Cream and the soft tints carry most of the page, deep wine and forest
   are used as occasional anchors (separated by lighter sections), and
   ember + brass are the warm accents. Botanicals are tonal (wine on wine,
   sage on forest) so they never read as red-against-green.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Libre+Franklin:wght@300;400;500;600&family=Pinyon+Script&display=swap');

/* ---- Burgues Script ------------------------------------------------
   Burgues Script is a commercial font, so it can't be bundled for you.
   If you own a web license, drop the files into /fonts and uncomment:

   @font-face {
     font-family: 'Burgues Script';
     src: url('../fonts/BurguesScript.woff2') format('woff2');
     font-display: swap;
   }
   Until then, Pinyon Script (free) is the stand-in.
   ------------------------------------------------------------------ */

:root {
  /* your palette */
  --forest:   #25452F;
  --fern:     #3E5C3E;
  --wine:     #641C28;
  --anthurium:#9B2436;
  --ember:    #D26A33;
  --cream:    #F6F1E7;
  --brass:    #A77A3D;

  /* soft tints mixed from the palette, for lighter sections */
  --sand:   #EDE4D0;   /* warm cream, a step deeper */
  --blush:  #EBD3C8;   /* anthurium / ember, very light */
  --sage:   #D3DAC8;   /* fern, very light */
  --wood:   #2B1D18;   /* dark wood: footer and deep text */

  --ink: #2B1D18;

  --script: 'Burgues Script', 'Pinyon Script', cursive;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Libre Franklin', system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--anthurium); color: var(--cream); }

/* ---- type ---------------------------------------------------- */
.eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 1.4rem; }
.script { font-family: var(--script); font-weight: 400; line-height: 1; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.8rem, 7vw, 6.2rem); line-height: .95; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; }
p { margin: 0 0 1.1em; }
em, .it { font-style: italic; }
.rule { width: 56px; height: 1px; background: currentColor; opacity: 0.5; margin: 1.6rem 0; border: 0; }
.center { text-align: center; }
.center .rule { margin-inline: auto; }
.small { font-size: .9em; opacity: .85; }

/* ---- layout & section colors --------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; padding-block: clamp(72px, 11vw, 150px); overflow: hidden; }
.light  { background: var(--cream);  color: var(--ink); }
.sand   { background: var(--sand);   color: var(--ink); }
.blush  { background: var(--blush);  color: var(--wine); }
.sage   { background: var(--sage);   color: var(--forest); }
.dark   { background: var(--wine);   color: var(--cream); }
.forest { background: var(--forest); color: var(--cream); }
.accent { color: var(--anthurium); }
.blush .accent { color: var(--wine); }
.sage .accent  { color: var(--fern); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- header -------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); color: var(--cream);
  transition: background .4s, padding .4s;
}
.site-header.on-light { color: var(--wood); }
.site-header.scrolled { background: rgba(43, 29, 24, 0.96); color: var(--cream); backdrop-filter: blur(6px); padding-block: 12px; }
.brand { font-family: var(--script); font-size: 1.9rem; text-decoration: none; line-height: 1; }
.nav { display: flex; gap: clamp(12px, 1.9vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500; white-space: nowrap;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .25s;
}
.nav a:hover, .nav a[aria-current="page"] { border-color: currentColor; }
.menu-btn { display: none; background: none; border: 0; color: inherit; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1020px) {
  .menu-btn { display: block; position: relative; z-index: 3; }
  .brand { position: relative; z-index: 3; }
  .nav {
    position: fixed; inset: 0; background: var(--wood); color: var(--cream); z-index: 2;
    flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.2,1);
  }
  .nav.open { transform: none; }
  .nav a { font-size: 0.8rem; }
  .site-header.menu-open { color: var(--cream); background: transparent; }
}

/* ---- editorial layer ------------------------------------------ */
:root { --gold: #D8B27A; }
html, body { overflow-x: clip; }

/* fine film grain for the dark color fields */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* florals: cutout illustrations, cropped by the page edge, drifting slightly as you scroll */
.fl {
  position: absolute; z-index: 1; max-width: none; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)) scale(var(--flip, 1), 1);
  filter: drop-shadow(0 8px 14px rgba(20, 4, 8, .16));
}
.fl.front { z-index: 4; }
.fl.moody { filter: brightness(.46) saturate(.8); opacity: .95; }
.fl.soft  { filter: none; }

/* hairline label: a small caps label that runs out into a rule */
.eyebrow.line { display: flex; align-items: center; gap: 1.1rem; }
.eyebrow.line::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .32; }

/* ---- hero (home): a magazine cover ----------------------------- */
.hero { position: relative; z-index: 3; min-height: 100svh; background: var(--wine); color: var(--cream); overflow-x: clip; overflow-y: visible; padding: 0; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 55% at 48% 40%, rgba(165, 52, 68, .30), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, rgba(12, 2, 6, .62), transparent 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(12, 2, 6, .5), transparent 70%);
}
.hero .inner { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 96px; }
.names { margin: 0; font-weight: 300; text-transform: uppercase; font-size: clamp(3.6rem, 15.5vw, 15rem); line-height: .8; letter-spacing: -.015em; }
.names span { display: block; }
.names .n1 { text-align: left;  padding-left: clamp(0px, 3vw, 60px); }
.names .n2 { text-align: right; padding-right: clamp(0px, 3vw, 60px); }
.names .amp { font-family: var(--script); text-transform: none; letter-spacing: 0; color: var(--gold); font-size: .46em; line-height: .55; text-align: center; margin: .04em 0 .1em; }
.hero .meta { text-align: center; margin-top: clamp(3rem, 6.5vw, 5.4rem); }
.hero .when { font-family: var(--sans); font-weight: 400; letter-spacing: .42em; text-transform: uppercase; font-size: clamp(.74rem, 1.2vw, .95rem); margin: 0; }
.hero .where { font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: .12em; margin: .5rem 0 0; opacity: .92; }

/* ---- inner-page headers: big type, florals cropped at the edge ---- */
.page-hero { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: clamp(440px, 64vh, 680px); padding: 150px 0 clamp(44px, 6vw, 88px); overflow-x: clip; overflow-y: visible; }
.page-hero .wrap { position: relative; z-index: 3; width: 100%; max-width: 1500px; }
.page-hero .eyebrow { margin-bottom: 1.6rem; max-width: 560px; }
.page-hero h1 { font-weight: 300; text-transform: uppercase; font-size: clamp(3rem, 8.6vw, 8.5rem); line-height: .86; letter-spacing: -.015em; }
.page-hero h1 em { font-weight: 300; }
.page-hero .lede { max-width: 30em; margin: 1.8rem 0 0; font-style: italic; font-size: 1.2em; opacity: .92; }
.ph-wine   { background: var(--wine);   color: var(--cream); }
.ph-forest { background: var(--forest); color: var(--cream); }
.ph-sage   { background: var(--sage);   color: var(--forest); }
.ph-blush  { background: var(--blush);  color: var(--wine); }
.ph-sand   { background: var(--sand);   color: var(--wood); }
.ph-wine::before, .ph-forest::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 20% 100%, rgba(10, 2, 5, .45), transparent 70%); }

/* ---- section layouts ------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 110px); align-items: end; }
.split-p { margin: 0; font-size: 1.12em; max-width: 30em; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; align-items: start; } }

.welcome-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 100px); align-items: start; position: relative; z-index: 2; }
.welcome-grid h2 { font-size: clamp(3rem, 8vw, 7.4rem); }
.w-photo { margin-top: clamp(0px, 7vw, 120px); }
.caption { font-family: var(--sans); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; margin: .9rem 0 0; opacity: .7; }
@media (max-width: 800px) { .welcome-grid { grid-template-columns: 1fr; } .w-photo { margin-top: 0; } }

.duo { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(14px, 2.4vw, 36px); margin-top: clamp(3rem, 6vw, 5rem); align-items: end; position: relative; z-index: 2; }
.duo .photo:first-child { aspect-ratio: 16 / 10; }
.duo .photo:last-child  { aspect-ratio: 3 / 4; }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } }

/* contents list */
.toc { list-style: none; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0; border-top: 1px solid rgba(100, 28, 40, .38); }
.toc a { display: grid; grid-template-columns: 1fr auto 2.4rem; gap: 1.5rem; align-items: baseline; padding: clamp(.9rem, 2vw, 1.5rem) 0; border-bottom: 1px solid rgba(100, 28, 40, .38); text-decoration: none; transition: padding-left .35s, color .35s; }
.toc a:hover, .toc a:focus-visible { padding-left: 1.4rem; color: var(--anthurium); }
.toc-t { font-size: clamp(2.3rem, 6.4vw, 5.6rem); font-weight: 300; line-height: .98; letter-spacing: -.015em; }
.toc a:hover .toc-t { font-style: italic; }
.toc-d { font-family: var(--sans); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; opacity: .78; text-align: right; }
.toc-a { font-family: var(--sans); font-size: 1.1rem; text-align: right; }
@media (max-width: 700px) { .toc a { grid-template-columns: 1fr 2rem; } .toc-d { display: none; } }

.cal .cal-date { font-size: clamp(3.2rem, 9.4vw, 9rem); margin: .1em 0 .2em; }
.cal .wrap { position: relative; z-index: 3; }

/* ---- photos & collages --------------------------------------- */
.photo {
  position: relative; aspect-ratio: 4 / 5; width: 100%;
  background:
    var(--img, none) center / cover no-repeat,
    linear-gradient(170deg, #6d8288 0%, #34505a 48%, #232f2b 100%);
  display: flex; align-items: flex-end;
}
.photo.wide { aspect-ratio: 16 / 10; }
.photo.sq   { aspect-ratio: 1; }
.photo span { font-family: var(--sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,241,231,.78); padding: 12px 14px; }
.photo.has-img span { display: none; }
.frame { padding: 14px; border: 1px solid currentColor; }


/* ---- schedule ------------------------------------------------ */
.day { display: grid; grid-template-columns: minmax(180px, 1fr) 2.2fr; gap: clamp(24px, 5vw, 80px); }
.day + .day { margin-top: clamp(64px, 9vw, 120px); }
.day .when h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
@media (max-width: 800px) { .day { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid currentColor; align-items: baseline; }
.timeline .t { font-family: var(--sans); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; }
.timeline h3 { margin-bottom: .3rem; }
.timeline p { margin: 0; opacity: .88; }
.timeline, .timeline li { border-color: rgba(43,29,24,.28); }
.sage .timeline, .sage .timeline li { border-color: rgba(37,69,47,.3); }
.blush .timeline, .blush .timeline li { border-color: rgba(100,28,40,.3); }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: .4rem; } }

/* ---- cards, link grids, codes -------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: rgba(43,29,24,.22); border: 1px solid rgba(43,29,24,.22); margin-top: 3rem; }
.card { background: var(--cream); color: var(--ink); padding: 2.2rem 2rem 2rem; }
.sand .card { background: var(--sand); }
.card .eyebrow { font-size: .62rem; color: var(--anthurium); margin-bottom: 1rem; }
.card h3 { margin-bottom: .7rem; }
.card p, .card li { font-size: .95em; }
.card ul { margin: 0; padding-left: 1.1em; }
.card li { margin-bottom: .4em; }
.card a.link, a.link { font-family: var(--sans); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; }

.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(100,28,40,.3); border: 1px solid rgba(100,28,40,.3); margin-top: 3rem; }
.linkgrid a { background: var(--blush); padding: 2.2rem 1.8rem; text-decoration: none; display: block; transition: background .3s; }
.linkgrid a:hover { background: var(--cream); }
@media (max-width: 900px) { .linkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .linkgrid { grid-template-columns: 1fr; } }
.linkgrid .eyebrow { font-size: .62rem; margin-bottom: .8rem; opacity: .75; }
.linkgrid h3 { margin-bottom: .4rem; }
.linkgrid p { margin: 0; font-size: .9em; opacity: .85; }

.code {
  display: inline-flex; gap: 1.1rem; align-items: baseline; cursor: pointer;
  font-family: var(--sans); font-size: .85rem; letter-spacing: .28em; text-transform: uppercase;
  padding: .95rem 1.3rem; border: 1px dashed currentColor; background: transparent; color: inherit;
}
.code small { font-size: .56rem; letter-spacing: .22em; opacity: .65; }
.code:hover small { opacity: 1; }
.todo { background: rgba(210,106,51,.22); outline: 1px dashed var(--ember); padding: 0 .25em; }

/* ---- faq ----------------------------------------------------- */
.faq details { border-bottom: 1px solid rgba(43,29,24,.25); }
.faq details:first-of-type { border-top: 1px solid rgba(43,29,24,.25); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; padding: 1.7rem 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); font-weight: 300; font-size: 1.4rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.8rem; max-width: 46em; opacity: .92; }

/* ---- buttons ------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; text-decoration: none;
  padding: 1.1rem 2.4rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--cream); color: var(--wine); }
.light .btn:hover, .sand .btn:hover, .blush .btn:hover, .sage .btn:hover { background: var(--wine); color: var(--cream); }
.btn.solid { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.btn.solid:hover { background: transparent; color: var(--wine); }

/* ---- footer ---------------------------------------------------- */
.site-footer { position: relative; background: var(--wood); color: var(--cream); padding: clamp(70px, 10vw, 140px) var(--gutter) 46px; overflow: hidden; }
.site-footer .sf-big { font-size: clamp(2.2rem, 6vw, 5.4rem); font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: -.015em; }
.site-footer .sf-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2.4rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid rgba(246,241,231,.3); }
.site-footer .script { font-size: 2.4rem; }
.site-footer p { font-family: var(--sans); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; opacity: .75; margin: 0; }
.signout { margin-top: 2rem; background: none; border: 0; color: var(--cream); opacity: .4; font-family: var(--sans); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
.signout:hover { opacity: .8; }

/* ---- visibility switches ------------------------------------- */
html:not(.wp) .wp-only { display: none !important; }          /* welcome-party guests only */
html:not(.rsvp-on) [data-rsvp] { display: none !important; }  /* RSVP off until you flip it in config.js */

/* ---- password gate ------------------------------------------- */
html.locked body > :not(.gate) { display: none !important; }
html.locked body { background: var(--wine); }
.gate { position: fixed; inset: 0; z-index: 999; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; overflow: hidden; }
.gate::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 20% 90%, rgba(246,241,231,.10), transparent 70%),
  radial-gradient(50% 40% at 85% 12%, rgba(210,106,51,.16), transparent 70%),
  radial-gradient(80% 60% at 50% 115%, rgba(20,6,10,.55), transparent 70%); }
.gate .box { position: relative; z-index: 2; max-width: 520px; }
.gate .script { font-size: clamp(3.4rem, 12vw, 6rem); margin-bottom: .6rem; }
.gate form { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; }
.gate input { width: min(320px, 100%); background: transparent; border: 0; border-bottom: 1px solid var(--cream); color: var(--cream); text-align: center; font-family: var(--sans); font-size: .9rem; letter-spacing: .3em; text-transform: uppercase; padding: .8rem 0; outline: none; }
.gate input::placeholder { color: rgba(246,241,231,.5); }
.gate .err { min-height: 1.4em; font-style: italic; color: #f0b5a0; margin: 0; }

/* ---- reveal -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---- music pill ---------------------------------------------- */
.music { position: fixed; left: 18px; bottom: 18px; z-index: 40; }
.music[hidden] { display: none; }
.music button { display: flex; align-items: center; gap: .9rem; cursor: pointer; background: rgba(43,29,24,.88); color: var(--cream); border: 1px solid rgba(246,241,231,.5); padding: .7rem 1.2rem .7rem 1rem; font-family: var(--sans); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; backdrop-filter: blur(6px); }
.music button:hover { background: var(--wine); }
.music .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.music .bars i { width: 2px; height: 4px; background: currentColor; display: block; }
.music.playing .bars i { animation: eq 0.9s ease-in-out infinite; }
.music.playing .bars i:nth-child(2) { animation-delay: .2s; }
.music.playing .bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 3px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .music.playing .bars i { animation: none; height: 8px; } }

/* ---- things to do carousel ----------------------------------- */
.tcar-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline-offset: 6px; }
.tcar-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box;
  display: grid; align-content: center; align-items: center;
  grid-template-columns: 1fr 1.25fr; grid-template-areas: "head list";
  gap: clamp(24px, 5vw, 80px); min-height: clamp(380px, 44vw, 520px); padding: 0 2px;
}
.slide.has-photo { grid-template-columns: 1.05fr 1fr; grid-template-areas: "photo head" "photo list"; grid-template-rows: auto auto; row-gap: 1.6rem; }
.slide-photo { grid-area: photo; display: none; width: 100%; height: 100%; min-height: 340px; background: center / cover no-repeat; }
.slide.has-photo .slide-photo { display: block; }
.slide-head { grid-area: head; align-self: end; }
.slide.has-photo .slide-head { align-self: end; }
.slide-head h3 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 300; line-height: .98; }
.slide-list { grid-area: list; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(43,29,24,.28); align-self: start; }
.slide:not(.has-photo) .slide-list { align-self: center; }
.slide-list li { padding: 1.15rem 0; border-bottom: 1px solid rgba(43,29,24,.28); }
.slide-list strong { display: block; font-weight: 500; font-size: 1.15em; }
.slide-list span { display: inline-block; margin-top: .25rem; font-size: .92em; }
@media (max-width: 800px) {
  .slide, .slide.has-photo { grid-template-columns: 1fr; grid-template-areas: "photo" "head" "list"; min-height: 0; padding-bottom: .5rem; }
  .slide:not(.has-photo) { grid-template-areas: "head" "list"; }
  .slide-photo { min-height: 0; aspect-ratio: 3 / 2; }
}
.tcar-ui { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(43,29,24,.28); }
.tcar-count { font-family: var(--sans); font-size: .66rem; letter-spacing: .26em; min-width: 4.5rem; }
.tcar-dots { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.tcar-dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--wood); background: transparent; padding: 0; cursor: pointer; }
.tcar-dots button[aria-current="true"] { background: var(--wood); }
.tcar-arrows { display: flex; gap: .6rem; min-width: 4.5rem; justify-content: flex-end; }
.tcar-arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--wood); background: transparent; color: var(--wood); font-size: 1.15rem; cursor: pointer; transition: background .25s, color .25s; }
.tcar-arrows button:hover:not(:disabled) { background: var(--wood); color: var(--cream); }
.tcar-arrows button:disabled { opacity: .28; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tcar-track { scroll-behavior: auto; } }

/* ---- attire: stacked, slowly scrolling strips ---------------- */
.attire-main { display: flex; flex-direction: column; }
.attire-main .page-hero { order: -2; }
html.wp .attire-main .wp-only { order: -1; }   /* welcome party first, for welcome-party guests */
.strip-block + .wrap .strip-note, .strip-note { margin: 1rem 0 0; }
.strip-block { margin-top: 2.6rem; }
.strip-block .eyebrow { margin-bottom: 1rem; }
.strip { --h: clamp(190px, 25vw, 340px); height: var(--h); overflow: hidden; position: relative; }
.strip-track { display: flex; width: max-content; height: 100%; animation: strip-scroll var(--dur, 70s) linear infinite; will-change: transform; }
.strip.rev .strip-track { animation-direction: reverse; }
.strip:hover .strip-track, .strip:focus-within .strip-track { animation-play-state: paused; }
.strip .set { display: flex; flex: none; gap: 8px; padding-right: 8px; height: 100%; }
.strip img, .strip .tile { height: 100%; width: auto; flex: none; display: block; max-width: none; }
.strip .tile { aspect-ratio: var(--r, 3 / 4); position: relative; display: flex; align-items: flex-end; }
.strip .tile span { font-family: var(--sans); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,241,231,.8); padding: 12px 14px; }
.strip .tile:nth-child(3n+1) { background: linear-gradient(160deg, #7a3a44, #4a1620); }
.strip .tile:nth-child(3n+2) { background: linear-gradient(160deg, #8a9a86, #4a5f4b); }
.strip .tile:nth-child(3n)   { background: linear-gradient(160deg, #c99a82, #8c5a3f); }
@keyframes strip-scroll { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip-track { animation: none; }
}

.gate .fl { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fl { transform: rotate(var(--rot, 0deg)) scale(var(--flip, 1), 1); } }

/* a soft shadow behind the menu so cream links stay readable over pale flowers */
.site-header:not(.on-light):not(.scrolled):not(.menu-open)::before {
  content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(14, 3, 6, .62), rgba(14, 3, 6, 0));
}

/* phones: florals are sized in screen width, so give them more presence */
/* =====================================================================
   BRAND SYSTEM v1  (documented in brand-guide.html; follow it exactly)
   Grounds: wine, forest, cream, blush (+ ink for the footer).
   Accents: wine on light, gold on dark. Nothing else.
   Type: Cormorant Garamond (display + body, italic for emphasis),
         Libre Franklin (labels + UI), Pinyon Script (wordmark only).
   Florals: flat, no shadows, one per section.
   ===================================================================== */
:root {
  --wine:#641C28; --forest:#25452F; --cream:#F6F1E7; --blush:#EBD3C8; --brass:#A77A3D; --gold:#D8B27A; --ink:#2B1D18;
  --sand:var(--cream); --sage:var(--blush); --anthurium:var(--wine); --wood:var(--ink);
  --fs-display: clamp(3.4rem, 12vw, 12rem);
  --fs-h1: clamp(2.6rem, 6vw, 5.5rem);
  --fs-h2: clamp(2.1rem, 4.4vw, 3.9rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.7rem);
}
.ph-sage { background: var(--forest); color: var(--cream); }
.ph-sand { background: var(--blush); color: var(--wine); }
.sand .card, .sage .card { background: var(--cream); }

.fl, .fl.soft { filter: none; }
.fl.moody { filter: brightness(.46) saturate(.8); }

.names { font-size: var(--fs-display); line-height: .84; }
.names .amp { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--gold); font-size: .42em; line-height: .8; margin: .06em 0 .1em; }
.page-hero h1 { font-size: var(--fs-h1); line-height: .95; }
h2, .welcome-grid h2, .day .when h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); }
h1 em, h2 em, h3 em, .page-hero h1 em, .sf-big em {
  font-family: var(--serif); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0;
  font-size: 1em; line-height: inherit; color: inherit; padding: 0; margin: 0; display: inline;
}
.cal .cal-date { font-size: var(--fs-h1); font-weight: 300; margin: .1em 0 .3em; }
.site-footer .sf-big { font-size: var(--fs-h2); text-transform: none; line-height: 1.1; letter-spacing: -.01em; }
.site-footer .sf-big em { display: inline; }

/* music pill: cream, hard to miss, pulses until first use */
.music { left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.music button { background: var(--cream); color: var(--wine); border: 0; padding: .95rem 1.5rem .95rem 1.25rem; font-size: .68rem; font-weight: 500; letter-spacing: .22em; box-shadow: none; }
.music button:hover { background: var(--blush); }
.music:not(.played) button { animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(246,241,231,.55); } 70%,100% { box-shadow: 0 0 0 16px rgba(246,241,231,0); } }
.music:not(.playing) .bars { display: none; }
.music:not(.playing) button::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (prefers-reduced-motion: reduce) { .music:not(.played) button { animation: none; } }
.toc-t { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
@media (max-width: 700px) { .page-hero { overflow-y: clip; } }

/* flat grounds: no vignettes or scrims */
.hero::before, .ph-wine::before, .ph-forest::before, .gate::before { display: none; }
.site-header:not(.on-light):not(.scrolled):not(.menu-open)::before { display: none; }
.ph-cream { background: var(--cream); color: var(--forest); }
.ph-clip { overflow: clip; }
/* page titles: title case, not all caps. Caps stay for the hero names and small labels. */
.page-hero h1 { text-transform: none; line-height: 1; }

.site-footer { display: flex; flex-direction: column; min-height: clamp(380px, 30vw, 480px); }
.site-footer .sf-meta { margin-top: auto; }
/* home: flowers sit behind photos, and the hero crops its own flowers */
.hero { overflow: clip; }
.w-photo { position: relative; z-index: 3; }
.names .n2 { padding-right: clamp(0px, 9vw, 160px); }
.site-footer { padding-bottom: 104px; }
.strip-track.multiply { mix-blend-mode: multiply; }

/* bigger footer lei, with room above the divider so it never crosses it */
.site-footer { min-height: clamp(440px, 36vw, 600px); }
.site-footer .fl { width: clamp(150px, 19vw, 340px) !important; }

/* ---- phones: flowers live in a zone above the text, never behind it ---- */
@media (max-width: 700px) {
  .page-hero { min-height: 600px; }
  .page-hero .fl { top: 64px !important; bottom: auto !important; left: auto !important; right: -8vw !important; width: auto !important; height: 290px !important; }
  .page-hero .wrap { margin-top: auto; }
  .hero .fl { width: auto !important; }
  .hero .fl[src*="red-orchid"] { top: 60px !important; right: -8vw !important; height: 250px !important; }
  .hero .fl[src*="plumeria"] { bottom: -6vh !important; right: -12vw !important; height: 52vw !important; }
  .hero .inner { padding-top: 330px; justify-content: flex-start; }
  .names { font-size: clamp(3rem, 15vw, 4.6rem); }
  .site-footer .fl { top: -4vw !important; right: -2vw !important; width: 34vw !important; }
  .site-footer .sf-big { max-width: 62%; }
  .ph-blush .fl { top: 58px !important; height: 235px !important; }
  .music button { padding: .75rem 1.1rem .75rem 1rem; font-size: .6rem; }
  .welcome .fl, .setting .fl { opacity: .9; }
}

/* phone menu: a blurred header becomes the containing block for the fixed menu, which clips it and leaves links peeking out */
@media (max-width: 1020px) {
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
  .nav:not(.open) { visibility: hidden; transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s .5s; }
  .nav.open { visibility: visible; transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s; }
}

/* ---- RSVP form ---- */
.rsvp-wrap { max-width: 860px; }
.rsvp-card h2 { margin-bottom: 1.6rem; }
.rsvp-find, .rsvp-form { display: grid; gap: 1.6rem; margin-top: 2rem; }
.rsvp-find input, .fld input, .fld textarea, .fld select {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); padding: .7rem 0; border-radius: 0; outline: none;
}
.fld textarea { border: 1px solid var(--ink); padding: .7rem .8rem; resize: vertical; }
.fld select { appearance: none; background: transparent; }
.fld input:focus, .fld textarea:focus, .fld select:focus, .rsvp-find input:focus { border-color: var(--wine); box-shadow: 0 1px 0 var(--wine); }
.fld { display: grid; gap: .3rem; }
.fld .eyebrow { margin: 0; }
.rsvp-person { border: 0; border-top: 1px solid rgba(43,29,24,.3); padding: 1.4rem 0 .4rem; margin: 0; display: grid; gap: 1.4rem; }
.rsvp-person legend { font-family: var(--serif); font-size: var(--fs-h3); padding-right: 1rem; }
.rsvp-person .q p.eyebrow { margin-bottom: .7rem; }
.choices { display: flex; flex-wrap: wrap; gap: .7rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; border: 1px solid var(--ink); padding: .8rem 1.3rem; font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.choice input:checked + span { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.choice input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }
.details { display: grid; gap: 1.4rem; }
.details[hidden] { display: none; }
.rsvp-card .err { min-height: 1.4em; font-style: italic; color: var(--wine); margin: 0; }
.rsvp-note { font-style: italic; }
.rsvp-summary { list-style: none; padding: 0; margin: 1.6rem 0; border-top: 1px solid rgba(43,29,24,.3); }
.rsvp-summary li { padding: .9rem 0; border-bottom: 1px solid rgba(43,29,24,.3); }