:root{--paper:#f1eceb;--paper2:#f2e8da;--paper2-rgb:242,232,218;--landscape-tone:grayscale(1) sepia(.35) saturate(.6) brightness(1.08);--ink:#4b4242;--accent:#7b351f;--line:#6f6958;--hero-tone:saturate(.65) sepia(.08);--hero-opacity:1;--hero-wash:246,239,229;--hero-light:250,244,235;--heading:#765b32;--label:#625348;--nav-ink:#554a42;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--script-stack:'Snell Roundhand','Apple Chancery','URW Chancery L',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper2);color:var(--ink);font-family:var(--serif);font-variant-numeric:lining-nums}.hero{height:88svh;min-height:560px;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--paper2)}.hero-static{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--hero-wash),.1),rgba(var(--hero-wash),.1)),url('assets/hero-fallback.png?v=hero-clean-3');background-size:cover;background-position:center;filter:var(--hero-tone);opacity:var(--hero-opacity);--hero-edge-fade:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.12) 92%,transparent 100%);-webkit-mask-image:var(--hero-edge-fade);mask-image:var(--hero-edge-fade)}.hero-static:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(var(--hero-light),.2),transparent 40%)}.nav{position:absolute;z-index:8;right:6%;top:34px;display:flex;gap:34px}.nav a{text-decoration:none;color:var(--nav-ink);font:500 12px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.24em}.hero-copy{position:relative;z-index:6;text-align:center;margin-top:4vh;color:var(--accent)}.eyebrow{font:500 12px/1.4 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.42em;margin:0 0 26px;color:var(--label)}.hero h1{font-family:var(--script,var(--script-stack));font-weight:400;font-size:calc(clamp(64px,8.2vw,142px) * var(--script-scale,1));line-height:.8;margin:0;letter-spacing:-.04em}.hero h1 span{font-size:.75em}.stem{height:46px;width:1px;background:currentColor;margin:28px auto 28px;opacity:.25}.date,.place{font:var(--meta-weight,600) var(--date-size,20px)/1.4 var(--serif);font-variant-numeric:lining-nums;letter-spacing:var(--meta-tracking,.2em);margin:0}.place{font-size:var(--place-size,16px);margin-top:17px}.place span{white-space:nowrap}

/* Shared atmospheric transition: the illustration begins before the hero visually ends. */
.hero-to-landscape{transform:translateY(var(--hero-mountain-offset,140px));position:relative;height:42vh;min-height:280px;margin-top:-42vh;z-index:5;pointer-events:none;overflow:hidden;background:linear-gradient(to bottom,rgba(var(--paper2-rgb),0) 0%,rgba(var(--paper2-rgb),.04) 18%,rgba(var(--paper2-rgb),.26) 42%,rgba(var(--paper2-rgb),.72) 72%,var(--paper2) 100%)}.hero-to-landscape:before{content:"";position:absolute;inset:0;background:url('assets/mountains.png') center bottom/cover no-repeat;mix-blend-mode:multiply;opacity:.24;filter:var(--landscape-tone);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 14%,rgba(0,0,0,.36) 42%,rgba(0,0,0,.78) 76%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 14%,rgba(0,0,0,.36) 42%,rgba(0,0,0,.78) 76%,#000 100%)}.hero-to-landscape:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(var(--paper2-rgb),.06) 30%,rgba(var(--paper2-rgb),.42) 72%,var(--paper2) 100%)}

.welcome-section{position:relative;min-height:740px;background:var(--paper2);overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:0;padding:60px 0 140px}.mountains{position:absolute;inset:-2px 0 0;background:url('assets/mountains.png') center bottom/cover no-repeat;opacity:.24;mix-blend-mode:multiply;filter:var(--landscape-tone);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.16) 0%,rgba(0,0,0,.38) 16%,rgba(0,0,0,.75) 38%,#000 62%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.16) 0%,rgba(0,0,0,.38) 16%,rgba(0,0,0,.75) 38%,#000 62%)}.welcome-section:after{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:28%;background:linear-gradient(to bottom,var(--paper2) 0%,rgba(var(--paper2-rgb),.84) 28%,rgba(var(--paper2-rgb),.35) 66%,transparent 100%);pointer-events:none}@media(max-width:720px){.nav{display:none}.hero{min-height:520px}.hero-static{background-position:58% center}.hero h1{font-size:calc(clamp(58px,17vw,90px) * var(--script-scale,1));max-width:94vw}.date{font-size:var(--date-size-m,16px)}.place{font-size:var(--place-size-m,15px)}.hero-to-landscape{height:34vh;min-height:230px;margin-top:-34vh}.hero-to-landscape:before{background-size:auto 100%;background-position:center bottom}.welcome-section{min-height:640px;padding:40px 0 120px}.mountains{background-size:auto 72%;background-position:center bottom}}

/* Dedicated portrait composition keeps foliage at the edges on phones. */
@media(max-width:720px) and (orientation:portrait) {
  .hero-static {
    background-image:linear-gradient(rgba(var(--hero-wash),.1),rgba(var(--hero-wash),.1)),url('assets/hero-mobile.png?v=hero-clean-3');
    background-position:center;
  }
}

/* Whole-page palette studies. The warm option uses the original root tokens. */
:root[data-palette="ivory"] {
  --paper2:#f7f4ee;
  --paper2-rgb:247,244,238;
  --hero-tone:saturate(.22) brightness(1.06);
  --hero-opacity:.8;
  --hero-wash:247,244,238;
  --hero-light:255,253,249;
  --landscape-tone:grayscale(1) sepia(.12) saturate(.5) brightness(1.04);
  --ink:#4b4742;
  --accent:#765044;
  --heading:#655c4e;
  --label:#625d55;
  --nav-ink:#57524b;
}
:root[data-palette="porcelain"] {
  --paper2:#faf9f6;
  --paper2-rgb:250,249,246;
  --hero-tone:grayscale(.95) brightness(1.1);
  --hero-opacity:.72;
  --hero-wash:250,249,246;
  --hero-light:255,255,253;
  --landscape-tone:grayscale(1) brightness(1.035);
  --ink:#484846;
  --accent:#66524c;
  --heading:#565a52;
  --label:#5d5e59;
  --nav-ink:#51534e;
}
:root[data-palette="pearl"] {
  --paper2:#f5f3f5;
  --paper2-rgb:245,243,245;
  --hero-tone:grayscale(1) brightness(1.08);
  --hero-opacity:.68;
  --hero-wash:245,243,245;
  --hero-light:253,251,255;
  --landscape-tone:grayscale(1) brightness(1.035);
  --ink:#4b474d;
  --accent:#71525c;
  --heading:#605761;
  --label:#645c65;
  --nav-ink:#59525a;
}

/* Temporary design comparison controls, separate from wedding navigation. */
.palette-preview {
  position:fixed;
  z-index:20;
  right:20px;
  bottom:max(20px,env(safe-area-inset-bottom));
  max-width:calc(100% - 32px);
  padding:13px 15px;
  background:#ffffffed;
  color:#494744;
  border:1px solid #dedbd5;
  border-radius:12px;
  box-shadow:0 4px 24px #302b2210;
  font:12px/1.4 Arial,sans-serif;
}
.palette-preview[hidden] { display:none; }
.palette-label { margin:0 0 9px; font-size:9px; letter-spacing:.18em; }
.palette-label span { margin-left:9px; color:#77726c; letter-spacing:0; }
.palette-options { display:flex; flex-wrap:wrap; gap:5px; }
.palette-options button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.palette-options button:hover { background:#f5f4f1; }
.palette-options button[aria-pressed="true"] { border-color:#77716a; background:#f2f1ee; }
.palette-options button:focus-visible { outline:2px solid #554d44; outline-offset:2px; }
.swatch { width:15px; height:15px; flex:none; border:1px solid #bdb7af; border-radius:50%; }
.swatch-ivory { background:#f7f4ee; }
.swatch-porcelain { background:#faf9f6; }
.swatch-pearl { background:#f5f3f5; }
.swatch-warm { background:#f2e8da; }
@media(max-width:480px) {
  .palette-preview { right:16px; left:16px; padding:10px; }
  .palette-options { gap:2px; }
  .palette-options button { flex:1; padding:6px 3px; font-size:11px; }
}

/* Clear the landscape behind the teaser photograph without editing the artwork. */
.welcome-section .mountains {
  --photo-clearing:radial-gradient(ellipse calc(68vw * var(--clearing-width-scale,1)) calc(650px * var(--clearing-height-scale,1)) at 49% 40%,transparent 0%,transparent var(--clearing-core,65%),#000 100%);
  --ridge-fade:linear-gradient(to bottom,rgba(0,0,0,.16) 0%,rgba(0,0,0,.38) 16%,rgba(0,0,0,.75) 38%,#000 62%);
  -webkit-mask-image:var(--photo-clearing),var(--ridge-fade);
  -webkit-mask-composite:source-in;
  mask-image:var(--photo-clearing),var(--ridge-fade);
  mask-composite:intersect;
}
/* Postage stamp. Lengths in design px are multiplied by --u, which is 1px at the
   340px desktop width and shrinks with the stamp, so mobile keeps the same proportions. */
.stamp {
  --mount-paper:color-mix(in srgb,var(--paper2) 78%,white);
  --stamp-ink:color-mix(in srgb,var(--ink) var(--ink-strength,30%),var(--paper2));
  --u:calc(100cqw / 340);
  position:relative;
  z-index:6;
  width:min(340px,72vw);
  margin:0;
  container-type:inline-size;
  isolation:isolate;
  transform:translateY(20px) rotate(var(--stamp-tilt,0deg));
}
/* Paper mode adds a fill, grain and shadow; the shadow is on a wrapper so it follows the perforations instead of being masked away. */
.stamp-sheet { position:relative; z-index:1; }
.stamp[data-paper="on"] .stamp-sheet { filter:drop-shadow(0 1px 1px #302b221c) drop-shadow(0 3px 4px #302b220a); }
.stamp-paper {
  --perf-r:calc(var(--perf-size,6.5) * var(--u));
  --perf-step:calc(var(--perf-gap,19) * var(--u));
  --line:var(--line-width,1px);
  --hole:#0000 var(--perf-r),#000 calc(var(--perf-r) + .5px);
  --ink:#0000 calc(var(--perf-r) - .5px),var(--stamp-ink) var(--perf-r) calc(var(--perf-r) + var(--line)),#0000 calc(var(--perf-r) + var(--line) + .6px);
  --row:var(--perf-step) 100%;
  --col:100% var(--perf-step);
  position:relative;
  display:grid;
  aspect-ratio:4/5;
  padding:calc(var(--stamp-pad,var(--stamp-margin,11)) * var(--u));
  border:var(--line) solid var(--stamp-ink);
  /* Each edge is tiled with one hole at each end of every tile; tiles round to a whole number
     per edge, so holes are evenly spaced, a quarter hole lands in every corner, and each hole
     is completed by the two tiles that meet at it. The ink rings plus the border between
     holes draw one continuous line. */
  background:
    radial-gradient(circle at 0 0,var(--ink)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--ink)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--ink)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 100% 100%,var(--ink)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--ink)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 100%,var(--ink)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 0 0,var(--ink)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--ink)) 0 0 / var(--col) no-repeat round,
    var(--paper-fill,transparent);
  background-origin:border-box;
  -webkit-mask:
    radial-gradient(circle at 0 0,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 100% 100%,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 100%,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 0 0,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--hole)) 0 0 / var(--col) no-repeat round;
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle at 0 0,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 0,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 100% 100%,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 100% 100%,var(--hole)) 0 0 / var(--row) round no-repeat,
    radial-gradient(circle at 0 0,var(--hole)) 0 0 / var(--col) no-repeat round,
    radial-gradient(circle at 0 100%,var(--hole)) 0 0 / var(--col) no-repeat round;
  mask-composite:intersect;
}
.stamp-paper::before { content:""; position:absolute; z-index:0; pointer-events:none; }
.stamp[data-paper="on"] .stamp-paper { --paper-fill:var(--mount-paper); }
.stamp[data-paper="on"] .stamp-paper::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:url('assets/paper-grain.svg') repeat;
  mix-blend-mode:multiply;
  opacity:.1;
  pointer-events:none;
}
.stamp-photo { position:relative; z-index:1; min-height:0; overflow:hidden; background:var(--mount-paper); }
/* Any portrait or landscape image fits this photo slot; the paper is independent. */
.stamp-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--photo-position,50% 50%);
  filter:grayscale(1) contrast(.82) brightness(1.06);
  mix-blend-mode:multiply;
}

/* Grabado: thick-and-thin rule around a band of hatching, like the shading on the ridges. */
.stamp[data-stamp="grabado"] { --stamp-pad:calc(var(--stamp-margin,11) + var(--band,4)); }
.stamp[data-stamp="grabado"] .stamp-paper::before {
  inset:calc(var(--stamp-margin,11) * var(--u));
  border:1.25px solid var(--stamp-ink);
  box-shadow:inset 0 0 0 1.6px var(--paper-fill,var(--paper2)),inset 0 0 0 2.3px var(--stamp-ink);
  background:repeating-linear-gradient(var(--hatch-angle,30deg),color-mix(in srgb,var(--stamp-ink) 60%,transparent) 0 .7px,transparent .7px var(--hatch-gap,2.5px));
}
.stamp[data-stamp="grabado"] .stamp-photo { box-shadow:0 0 0 .75px var(--stamp-ink); }

/* Botánico and Matasellos: an inner rule halfway into the margin, in the outline's weight. */
.stamp:is([data-stamp="botanico"],[data-stamp="matasellos"]) .stamp-paper::before {
  inset:calc(var(--stamp-margin,11) * var(--u) / 2);
  border:var(--line) solid var(--stamp-ink);
}

/* Botánico: the plants are masks, so they take the stamp ink of whichever palette is active. */
.stamp-plant,.stamp-postmark { display:none; position:absolute; pointer-events:none; mix-blend-mode:multiply; }
.stamp[data-stamp="botanico"] .stamp-plant { display:block; }
.stamp-plant {
  z-index:2;
  bottom:calc(var(--plant-drop,7) * -1cqw);
  height:calc(var(--plant-size,46) * 1cqw);
  background:var(--stamp-ink);
  opacity:var(--plant-opacity,.85);
  -webkit-mask:var(--plant) center / contain no-repeat;
  mask:var(--plant) center / contain no-repeat;
}
.stamp[data-plants="behind"] .stamp-plant { z-index:0; }
.stamp-plant-left { --plant:url('assets/stamp-plant-left.png'); left:calc(var(--plant-spread,14) * -1cqw); aspect-ratio:1; }
.stamp-plant-right { --plant:url('assets/stamp-plant-right.png'); right:calc(var(--plant-spread,14) * -1cqw); aspect-ratio:420/340; }

/* Matasellos: a cancellation mark over the top-right corner. */
.stamp[data-stamp="matasellos"] .stamp-postmark { display:block; }
.stamp-postmark {
  z-index:3;
  top:calc(var(--postmark-y,-9) * 1cqw);
  right:calc(var(--postmark-out,30) * -1cqw);
  width:calc(var(--postmark-size,118) * 1cqw);
  overflow:visible;
  color:var(--stamp-ink);
  opacity:var(--postmark-opacity,.75);
  transform:rotate(var(--postmark-rotate,-8deg));
}
.stamp-postmark .wave:nth-of-type(n+5) { display:none; }
.postmark-text { font-family:var(--serif); font-weight:600; font-variant-numeric:lining-nums; }
/* Continues the hero's stem line above the photograph. */
.welcome-copy { position:relative; z-index:6; margin:80px 0 104px; padding:0 24px; text-align:center; color:var(--accent); }
.welcome-copy p { max-width:54ch; margin:0 auto; text-wrap:balance; color:var(--heading); font:500 clamp(20px,2.3vw,24px)/1.5 var(--serif); font-variant-numeric:lining-nums; }
.welcome-copy .welcome-signature { margin-top:18px; font-family:var(--signature-script,var(--script-stack)); font-weight:400; font-size:calc(clamp(28px,3.2vw,36px) * var(--signature-scale,1)); line-height:1.3; }
@media(max-width:720px) {
  .welcome-section .mountains {
    --photo-clearing:radial-gradient(ellipse calc(85vw * var(--clearing-width-scale,1)) calc(540px * var(--clearing-height-scale,1)) at 49% 40%,transparent 0%,transparent var(--clearing-core,65%),#000 100%);
    background-size:auto 85%;
  }
  .stamp { --plant-spread:8; --postmark-out:16; }
  .welcome-copy { margin-top:56px; }
}

.landscape-controls { margin-top:10px; border-top:1px solid #dedbd5; padding-top:10px; }
.landscape-controls summary { cursor:pointer; padding:5px 0; }
.landscape-controls p { max-width:34ch; margin:8px 0 12px; color:#6b655e; font-size:11px; }
.landscape-controls label { display:flex; justify-content:space-between; gap:16px; }
.landscape-controls output { font-variant-numeric:tabular-nums; }
.landscape-controls input { display:block; width:100%; min-height:28px; margin:2px 0 10px; accent-color:#77716a; cursor:pointer; }
.clearing-reset { min-height:36px; padding:7px 12px; border:1px solid #bdb7af; border-radius:6px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.landscape-controls :focus-visible { outline:2px solid #554d44; outline-offset:3px; }
.palette-preview { max-height:calc(100svh - 40px); overflow-y:auto; }
.type-tune { margin-top:0; border-top:0; padding-top:0; }
.type-tune select { display:block; width:100%; min-height:36px; margin:4px 0 12px; padding:4px 8px; border:1px solid #bdb7af; border-radius:6px; background:#fff; color:inherit; font:inherit; }

/* The still stays underneath while a muted, seamless shadow loop loads. */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  pointer-events:none;
}
.hero-static[data-video-ready] .hero-video { opacity:1; }
.hero-static[data-video-ready]::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(var(--hero-wash),.1);
  pointer-events:none;
}
.hero-static::after { z-index:2; }
.hero-motion-toggle {
  position:absolute;
  z-index:8;
  left:6%;
  bottom:22px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--nav-ink);
  font:11px/1.4 Arial,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
}
.hero-motion-toggle:hover { border-color:currentColor; }
.hero-motion-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.hero-motion-toggle[hidden] { display:none; }
@media(max-width:720px) and (orientation:landscape) {
  .hero-video { object-position:58% center; }
}