/* ============ Al Malath — botanical stationery theme ============ */
@font-face{font-family:Script;src:url('/assets/script.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Script;src:url('/assets/script-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Editorial;src:url('/assets/editorial.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Editorial;src:url('/assets/editorial-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Body;src:url('/assets/body.ttf') format('truetype');font-display:swap}

:root{
  --cream:#fbf2e3;--cream-2:#f6e8d3;--paper:#fffaf1;
  --red:#b9392a;--red-deep:#8f2b1e;--rust:#93301f;
  --sage:#8c9a7f;--sage-deep:#6e7d62;--sage-soft:#dfe3d2;
  --pink:#f5d0ca;--pink-deep:#eebab2;
  --ink:#4b2b23;--muted:#8b6a5d;--line:#e8d5bb;
  --ease:cubic-bezier(.22,1,.36,1);
  --site-max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#2a2018;color:var(--ink);font:15px/1.95 Body,Tahoma,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button,a{touch-action:manipulation}
a{color:inherit}
button:disabled{cursor:default;opacity:.4}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
[hidden]{display:none!important}
h1,h2,h3{font-family:Editorial,serif;font-weight:400;margin:0}

/* ---------- Backdrop & framed site ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 12% 20%,#e98a5f55,transparent 70%),
  radial-gradient(50% 45% at 90% 15%,#f1e4cf40,transparent 70%),
  radial-gradient(55% 55% at 8% 85%,#9b6b9a55,transparent 70%),
  radial-gradient(50% 50% at 92% 80%,#f3d9b555,transparent 70%),
  linear-gradient(160deg,#2f2a1e,#1f1a14);background-size:cover;background-position:center}
.backdrop.loaded{filter:saturate(1.05)}
.backdrop.loaded::after{content:'';position:absolute;inset:0;background:#1b140f2e}
.site{position:relative;max-width:var(--site-max);margin:56px auto;background:var(--cream);box-shadow:0 40px 120px #0008,0 0 0 1px #ffffff1a;animation:siteIn 1.1s var(--ease) both}
.chrome{height:34px;border:2px solid #fff;border-bottom-width:1px;background:#ffffff14;backdrop-filter:blur(6px);display:flex;align-items:center;gap:8px;padding:0 16px;position:absolute;top:-36px;right:0;left:0;direction:ltr}
.chrome i{width:13px;height:13px;border:1.5px solid #fff;border-radius:50%}
.site{margin-top:92px}

/* ---------- Shared type helpers ---------- */
.caps{font-family:Editorial,serif;font-size:13px;color:var(--red);margin:0;word-spacing:.35em}
.caps.light{color:#fbeee0}
.muted{color:var(--muted)}
.inkLink{font-size:13px;color:var(--red);border-bottom:1px solid currentColor;padding:2px 0;transition:opacity .25s}
.inkLink:hover{opacity:.65}
.pill{display:inline-block;background:var(--pink);color:var(--red-deep);font:700 14px/1 Editorial,serif;padding:12px 34px 10px;border:1px solid var(--pink-deep);transition:transform .35s var(--ease),background .3s,box-shadow .3s}
.pill:hover{background:#f9dcd6;transform:translateY(-2px);box-shadow:0 10px 24px #b9392a22}
.pill.solid{background:var(--red);border-color:var(--red);color:#fff6ea}
.pill.solid:hover{background:var(--red-deep)}
.scriptKicker{display:inline-flex;align-items:center;gap:8px;font:400 30px/1.2 Script,serif;color:var(--ink)}
.scriptKicker svg{width:34px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.scriptKicker.light{color:#fbeee0;font-size:40px}
.boldTitle{font:700 44px/1.3 Editorial,serif;color:var(--red-deep)}

/* ---------- Header ---------- */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:40px 7% 34px;gap:24px;position:relative;z-index:6}
.masthead nav{display:contents}
.navGroup{grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.navStart{grid-column:1}
.navEnd{grid-column:3;align-items:flex-end}
.navGroup button{font:400 13.5px/1.9 Editorial,serif;color:var(--red);position:relative;padding:0 2px}
.navGroup button::after{content:'';position:absolute;right:0;bottom:3px;height:1px;width:0;background:currentColor;transition:width .35s var(--ease)}
.navGroup button:hover::after{width:100%}
.brand{grid-column:2;grid-row:1;text-decoration:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.brandMark{font:700 78px/1 Script,serif;color:var(--red);display:block;padding-top:8px;text-shadow:0 1px 0 #fff6}
.brandLatin{font:400 10px/1 Editorial,serif;letter-spacing:.42em;color:var(--red);margin-top:12px;direction:ltr}
.menuButton{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:6px}
.menuButton i{display:block;height:1.5px;background:var(--red);transition:transform .3s,opacity .3s}
.menuButton[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menuButton[aria-expanded="true"] i:nth-child(2){opacity:0}
.menuButton[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Photo slots (user photos drop into /assets/photos) ---------- */
.ph{margin:0;position:relative;background-color:#e9d6c0;background-size:cover;background-position:center;overflow:hidden}
.ph[data-tone="blush"]{background-image:linear-gradient(155deg,#f6d6cc,#e7a99b 55%,#cf7c68)}
.ph[data-tone="sage"]{background-image:linear-gradient(160deg,#dfe4d3,#a9b59a 55%,#7d8b6f)}
.ph[data-tone="cream"]{background-image:linear-gradient(150deg,#fbf0de,#ead3b2 60%,#d6b58e)}
.ph[data-tone="wine"]{background-image:linear-gradient(165deg,#d98a74,#b9392a 55%,#7c2418)}
.ph::after{content:attr(data-photo);position:absolute;inset:auto 0 8px;text-align:center;font:9px/1 Editorial,serif;letter-spacing:.25em;color:#fff9;direction:ltr;text-transform:uppercase}
.ph.loaded::after{display:none}

/* ---------- Collage hero ---------- */
.collage{position:relative;margin:0 4% 0;height:clamp(440px,50vw,620px)}
.collage>*{position:absolute}
.collage .ph{box-shadow:0 14px 30px #4b2b2318}
.c1{inset-inline-start:15%;top:5%;width:16%;height:42%}
.c2{inset-inline-start:2%;top:43%;width:14%;height:35%}
/* Note + photo share one column so wrapped text pushes the photo down instead of overlapping it */
.collageStack{inset-inline-start:17%;top:50%;width:18%;height:50%;display:flex;flex-direction:column;align-items:center;gap:12px}
.collageNote{text-align:center;font-size:11.5px;line-height:1.95;flex-shrink:0}
.c3{position:relative;width:68%;flex:1;min-height:70px}
.collageNote p{margin:0 0 6px}
.noteLinks{display:flex;justify-content:center;gap:8px;color:var(--red);font-size:12px;margin-top:6px}
.noteLinks{flex-wrap:wrap}
.noteLinks .inkLink{font-size:12px;white-space:nowrap}
.heroPanel{inset-inline-start:36%;top:0;width:28%;height:91%}
.cMain{position:absolute;inset:0}
.heroPanel::before{content:'';position:absolute;inset:0 0 auto;height:34%;z-index:1;background:linear-gradient(180deg,#3a1410c4,#3a141055 60%,transparent);pointer-events:none}
.heroCaps{position:absolute;top:5.5%;inset-inline:0;text-align:center;font:700 16px/1.55 Editorial,serif;color:#fff7ea;word-spacing:.3em;z-index:2;text-shadow:0 1px 12px #0006}
.heroSign{position:absolute;bottom:-9%;inset-inline:0;text-align:center;font:400 34px/1 Script,serif;color:var(--ink);z-index:2;white-space:nowrap}
.c4{inset-inline-start:66.5%;top:3%;width:14.5%;height:39%}
.c5{inset-inline-start:81%;top:11%;width:14.5%;height:49%}
.heroScript{inset-inline-start:61%;top:44%;width:32%;font:700 38px/1.35 Script,serif;text-shadow:0 0 18px var(--cream),0 0 6px var(--cream);color:var(--ink);transform:rotate(-11deg);text-align:center;z-index:3;pointer-events:none}
.heroScript span{display:block;margin-inline-start:22%;color:var(--red)}
.c6{inset-inline-start:71%;top:62%;width:14.5%;height:38%}

/* Reveal motion */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.collageStack .reveal:last-child{transition-delay:.2s}
.collage .reveal:nth-child(2){transition-delay:.08s}.collage .reveal:nth-child(3){transition-delay:.16s}
.collage .reveal:nth-child(4){transition-delay:.24s}.collage .reveal:nth-child(5){transition-delay:0s}
.collage .reveal:nth-child(6){transition-delay:.12s}.collage .reveal:nth-child(7){transition-delay:.2s}
.collage .reveal:nth-child(8){transition-delay:.45s}.collage .reveal:nth-child(9){transition-delay:.3s}
.heroScript.reveal{transform:rotate(-11deg) translateY(20px)}
.heroScript.reveal.in{transform:rotate(-11deg)}
.collage .ph.reveal.in{transition:opacity 1s var(--ease),transform .8s var(--ease)}
.collage>.ph.in:hover{transform:translateY(-6px) rotate(-1deg)}

/* ---------- Whisper ---------- */
.whisper{margin:110px 0 0;padding:70px 12% 80px;text-align:center;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bow{width:64px;height:52px;fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 14px}
.bow path,.bow circle{stroke-dasharray:420;stroke-dashoffset:420}
.whisper.in .bow path,.whisper.in .bow circle,dialog[open] .bow path,dialog[open] .bow circle,#sentState:not([hidden]) .bow path,#sentState:not([hidden]) .bow circle{animation:draw 2.2s var(--ease) .2s forwards}
.whisper blockquote{max-width:620px;margin:16px auto 10px;font:400 17px/2.1 Editorial,serif;color:var(--ink)}
.signature{display:block;font:400 26px/1 Script,serif;color:var(--muted)}
.privacyLine{margin-top:28px;font-size:12px;color:var(--muted)}
.privacyLine em{font-style:normal;color:var(--red);border-bottom:1px solid currentColor}

/* ---------- Meet / letter intro ---------- */
.meet{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:90px 13% 100px;background:var(--cream)}
.meetDesk{position:relative;background:var(--cream-2);aspect-ratio:.86;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 18px 40px #4b2b231a;padding:30px}
.meetDesk::before{content:'';position:absolute;inset:12px;border:1px solid var(--line);pointer-events:none}
.heroEnvelope{position:relative;display:block;width:100%;aspect-ratio:1.18}
.heroEnvelope img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .75s,transform .85s var(--ease);filter:drop-shadow(0 16px 18px #60412622)}
.heroClosed{transform:rotate(-7deg)}
.heroOpen{opacity:0;transform:translateY(25px) scale(.96)}
.heroEnvelope:hover .heroClosed{transform:rotate(-2deg) translateY(-10px)}
.heroEnvelope.opened .heroClosed{opacity:0;transform:translateY(25px)}
.heroEnvelope.opened .heroOpen{opacity:1;transform:translateY(-10px) scale(1)}
.deskHint{font:400 20px/1.5 Script,serif;color:var(--red);margin-top:10px;text-align:center}
.meetText p{font-size:13.5px;color:var(--ink);margin:0 0 12px;max-width:420px}
.meetText .boldTitle{margin:4px 0 18px}
.meetText .pill{margin-top:18px}

/* ---------- Wine band ---------- */
.band{position:relative;background:var(--rust);padding:34px 6% 40px;text-align:center;overflow:hidden;isolation:isolate}
.bandPhoto{position:absolute;inset:0;z-index:-1;opacity:.28;mix-blend-mode:luminosity}
.bandPhoto::after{display:none}
.band::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 140% at 50% 0,#c4513b55,transparent 70%)}
.bandRooms{display:flex;justify-content:center;align-items:center;gap:clamp(24px,6vw,80px);margin-top:16px;flex-wrap:wrap}
.bandRoom{color:#fff6ea;display:flex;flex-direction:column;align-items:center;transition:transform .4s var(--ease)}
.bandRoom:hover{transform:translateY(-4px)}
.bandRoom small{font-size:11px;opacity:0;transform:translateY(-4px);transition:.4s var(--ease);color:#f7d9cf}
.bandRoom:hover small,.bandRoom:focus-visible small{opacity:1;transform:none}
.r1 b{font:700 34px/1.3 Script,serif}
.r2 b{font:400 24px/1.4 Editorial,serif;border-top:1px solid #fff6;border-bottom:1px solid #fff6;padding:0 6px}
.r3 b{font:400 30px/1.3 Script,serif;font-style:italic}
.r4 b{font:700 26px/1.3 Editorial,serif;background:#fff6ea;color:var(--rust);padding:0 10px}

/* ---------- Sage spaces ---------- */
.spaces{background:var(--sage);display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:4%;padding:70px 7% 80px;position:relative}
.polaroids{position:relative;min-height:470px}
.polaroid{position:absolute;background:#fff;padding:10px 10px 44px;box-shadow:0 14px 34px #2a33201f;transition:transform .5s var(--ease),box-shadow .5s}
.polaroid .ph{width:100%;height:100%}
.p1 .ph{background-position:center 30%}
.p2 .ph{background-position:center 22%}
.polaroid>span{position:absolute;inset-inline:10px;bottom:9px;text-align:center;font:700 21px/1.2 Script,serif;color:var(--red);z-index:1}
.polaroid:hover{transform:rotate(0) translateY(-8px)!important;box-shadow:0 26px 50px #2a33202e}
.p1{inset-inline-start:0;top:0;width:78%;height:52%;transform:rotate(1.5deg);z-index:1}
.p2{inset-inline-start:14%;top:56%;width:62%;height:44%;transform:rotate(-2deg);z-index:2}
.p3.tall{position:relative;width:88%;aspect-ratio:.72;justify-self:center;transform:rotate(1deg)}
.polaroid.reveal{opacity:0}
.polaroid.reveal.in{opacity:1}
.spacesText{text-align:center;color:#fbeee0}
.spacesText .caps{margin:8px 0 14px}
.ruled{font:700 30px/1.5 Editorial,serif;color:#fff8ee;display:flex;flex-direction:column;align-items:center;gap:4px}
.ruled span{border-bottom:1.5px solid #fbeee0cc;padding:0 10px 4px}
.spacesLead{font-size:13px;line-height:2;margin:22px auto 26px;max-width:340px;color:#f6efe1}

/* ---------- Footer ---------- */
.foot{display:grid;grid-template-columns:auto 1.4fr 1fr;gap:36px;align-items:center;padding:40px 7% 18px;background:var(--cream)}
.footBrand{display:flex;flex-direction:column;align-items:center}
.footBrand .brandMark{font-size:92px}
.footInfo p{font-size:12px;color:var(--red-deep);margin:0;line-height:1.9;max-width:360px}
.footMeta{display:flex;gap:40px;margin-top:12px}
.footMeta p{font-size:11.5px}
.footNav{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;border-inline-start:1px solid var(--line);padding-inline-start:30px}
.footNav button{text-align:start;font:400 13px/1.9 Editorial,serif;color:var(--red)}
.footNav button:hover{text-decoration:underline}
.copy{grid-column:1/-1;text-align:center;font-size:10.5px;color:var(--red);margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- Keyframes ---------- */
@keyframes siteIn{from{opacity:0;transform:translateY(40px) scale(.985)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes paperReveal{from{opacity:0;transform:translateY(30px) rotate(-1deg)}to{opacity:1;transform:none}}

/* ---------- Tablet ---------- */
@media (max-width:1050px){
  .site{margin:70px 3% 40px}
  .brandMark{font-size:64px}
  .heroScript{font-size:26px}
  .heroSign{font-size:28px}
  .collageNote{font-size:10.5px}
  .meet{padding:70px 7%}
  .spaces{grid-template-columns:1fr 1fr;padding:60px 6%}
  .spaces .p3{display:none}
  .foot{grid-template-columns:auto 1fr}
  .footNav{grid-column:1/-1;border:0;padding:0;grid-template-columns:repeat(4,auto);justify-content:center}
}

/* ---------- Phone ---------- */
@media (max-width:720px){
  body{background:var(--cream)}
  .backdrop,.chrome{display:none}
  .site{margin:0;box-shadow:none;animation:none}
  .masthead{grid-template-columns:38px 1fr 38px;padding:18px 16px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fbf2e3f2;backdrop-filter:blur(10px)}
  .brand{grid-column:2;align-items:center}
  .brandMark{font-size:46px}
  .brandLatin{font-size:7.5px;margin-top:6px;letter-spacing:.32em}
  .menuButton{display:flex;grid-column:3;grid-row:1;justify-self:end}
  .masthead nav{display:none}
  .masthead nav.open{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--cream);border-bottom:1px solid var(--line);padding:14px 22px 20px;box-shadow:0 20px 30px #4b2b2314;animation:arrive .35s var(--ease)}
  .masthead nav.open .navGroup{align-items:flex-start}
  .navGroup button{font-size:17px;line-height:2.3}

  /* Phone collage: sky first, then an even two-column gallery of framed photos */
  .collage{height:auto;margin:0;padding:20px 16px 8px;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
    grid-template-areas:"main main" "script script" "c1 c4" "c2 c5" "c3 c6" "note note"}
  .collage>*,.collageStack>*{position:relative;inset:auto!important;width:auto!important;height:auto!important;top:auto!important;margin:0!important}
  .collageStack{display:contents}
  .heroPanel{grid-area:main;aspect-ratio:4/5;margin-bottom:30px!important}
  .heroCaps{font-size:17px}
  .heroSign{font-size:28px;bottom:-40px}
  .heroScript{grid-area:script;transform:rotate(-4deg)!important;font-size:33px;margin:4px 0 10px!important;text-align:center}
  .heroScript span{margin:0}
  .c1{grid-area:c1}.c2{grid-area:c2}.c3{grid-area:c3}.c4{grid-area:c4}.c5{grid-area:c5}.c6{grid-area:c6}
  .collage figure.ph:not(.cMain){aspect-ratio:4/5;flex:none;min-height:0;border:6px solid #fff;box-shadow:0 10px 24px #4b2b231c}
  .collage .c1,.collage .c5,.collage .c3{transform:rotate(-1.2deg)}
  .collage .c4,.collage .c2,.collage .c6{transform:rotate(1.2deg)}
  .collageNote{grid-area:note;font-size:14px;padding:18px 8px 6px}
  .noteLinks .inkLink{font-size:13.5px}

  .whisper{margin-top:40px;padding:50px 22px 56px}
  .whisper blockquote{font-size:16px}
  .meet{grid-template-columns:1fr;padding:50px 20px 60px;gap:40px;text-align:center}
  .meetText p{margin-inline:auto}
  .meetDesk{aspect-ratio:1.2;padding:20px 16px}
  .heroEnvelope{width:86%}
  .deskHint{font-size:18px;margin-top:4px}
  .boldTitle{font-size:38px}
  .band{padding:28px 16px 32px}
  .bandRooms{display:grid;grid-template-columns:1fr 1fr;gap:18px 10px}
  .bandRoom small{opacity:.85;transform:none;margin-top:4px}
  .spaces{grid-template-columns:1fr;padding:50px 20px 60px;gap:40px}
  .spacesText{order:-1}
  .polaroids{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
  .polaroids .polaroid{position:relative;inset:auto;width:auto;height:auto;padding:7px 7px 38px}
  .polaroids .polaroid .ph{aspect-ratio:4/5;height:auto}
  .polaroids .polaroid>span{font-size:18px;bottom:8px}
  .p1{transform:rotate(-1.5deg)}.p2{transform:rotate(1.5deg);margin-top:22px}
  .ruled{font-size:26px}
  .foot{grid-template-columns:1fr;text-align:center;padding:36px 20px 16px;gap:22px}
  .footInfo p{margin:auto}
  .footMeta{justify-content:center}
  .footNav{grid-template-columns:1fr 1fr;justify-items:center}
  .footNav button{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .bow path,.bow circle{stroke-dashoffset:0}
}