/* ==========================================================================
   Holiday 2026 · 12 Days of Caviar  (/holiday only; loaded after style.css)
   Palette and type from Nisha's walkthrough. Gold is darkened wherever it is text.
   ========================================================================== */
.holiday{
  /* Holiday page now uses the site palette and type. Names kept so the rest of the sheet reads the same. */
  --h-red:var(--oxblood); --h-ox:var(--oxblood); --h-blush:var(--pink-100); --h-blush-deep:var(--pink-200); --h-ivory:var(--pink-50);
  --h-gold:var(--brass); --h-gold-soft:var(--brass-soft); --h-gold-text:var(--burgundy); --h-ink:var(--ink); --h-muted:var(--burgundy);
  --h-card:#FFFFFF;
  background:var(--pink-50); color:var(--burgundy); font-weight:300;
}
.holiday h1, .holiday h2, .holiday h3{font-family:var(--font-display); font-weight:400; color:var(--ink); letter-spacing:-0.01em}
.holiday h1 em, .holiday h2 em{color:var(--oxblood); font-weight:400}

.holiday a:focus-visible, .holiday button:focus-visible, .holiday input:focus-visible, .holiday summary:focus-visible{outline:3px solid var(--h-ox); outline-offset:3px}
.holiday .tile input:focus-visible + span{outline:3px solid var(--h-ox); outline-offset:3px}
.holiday .site-footer{background:var(--h-ox)}

.holiday [hidden]{display:none !important}
.kick{font-family:var(--font-text); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--h-gold-text); margin:0}
.kick.ox{color:var(--h-ox)}
.hbtn{display:inline-block; background:var(--oxblood); color:var(--pink-100); font-family:var(--font-text); font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; padding:17px 36px; border:1px solid var(--h-ox); cursor:pointer; text-align:center; transition:background .25s ease, color .25s ease}
.hbtn:hover{background:var(--oxblood-deep)}
.hbtn.light{background:var(--pink-100); color:var(--oxblood); border-color:var(--pink-100); padding:13px 26px; font-size:12px}
.hbtn.light:hover{background:#fff}
.hbtn.ghost{background:transparent; color:var(--h-ox)}
.hbtn.ghost:hover{background:var(--h-ox); color:var(--h-ivory)}
.hbtn.full{display:block; width:100%}

/* header photos + red band */
.hphotos{position:relative; display:grid; grid-template-columns:1fr 1fr .66fr; grid-template-rows:minmax(0,1fr); gap:4px; height:clamp(300px, 38vw, 560px); overflow:hidden; background:var(--h-ivory)}
.hphotos img{width:100%; height:100%; min-height:0; object-fit:cover}
.hphotos .p1{object-position:50% 62%} .hphotos .p2{object-position:42% 50%} .hphotos .p3{object-position:50% 45%}
.hband{background:var(--oxblood-deep); color:var(--pink-50); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 34px; padding:18px var(--gutter); text-align:center}
.hband p{margin:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 26px}
.hband .k{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:500}
.hband em{font-family:var(--font-display); font-size:clamp(21px, 2vw, 28px); font-weight:500; line-height:1.2}
@media (max-width: 760px){
  .hphotos{grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto}
  .hphotos .p2{grid-column:1 / -1; order:-1; aspect-ratio:4/3.4}
  .hphotos .p1, .hphotos .p3{aspect-ratio:1/1}
}

.hoverlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px var(--gutter); pointer-events:none; background:radial-gradient(60% 55% at 50% 50%, rgba(94,10,10,.62) 0%, rgba(94,10,10,.46) 55%, rgba(94,10,10,0) 100%)}
.hoverlay h1{color:var(--pink-50); font-size:clamp(44px, 6.6vw, 84px); line-height:1; margin:0 0 12px; text-shadow:0 4px 24px rgba(42,20,19,.45)}
.hoverlay .hlede{color:var(--pink-100); font-size:clamp(18px, 2.2vw, 28px); text-shadow:0 2px 14px rgba(42,20,19,.5); max-width:30ch}
@media (max-width: 760px){ .hoverlay{background:radial-gradient(70% 40% at 50% 50%, rgba(94,10,10,.66) 0%, rgba(94,10,10,.5) 55%, rgba(94,10,10,0) 100%)} }
/* 12 days */
.hdays{background:var(--h-blush); text-align:center; padding-block:clamp(48px, 6vw, 84px) clamp(52px, 6vw, 88px)}
.hdays h1{font-size:clamp(44px, 6.4vw, 72px); line-height:1.02; margin:12px 0 10px}
.hdays h1 em{font-style:italic}
.hlede{font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--burgundy); font-size:clamp(20px, 2.6vw, 28px); margin:0}
.hint{font-family:var(--font-display); font-style:italic; font-size:clamp(20px, 2.2vw, 26px); color:var(--burgundy); margin:12px 0 0}
.hnote{font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--oxblood); font-size:clamp(22px, 2.6vw, 30px); margin:0 0 22px}
.hgrid{list-style:none; padding:0; margin:30px auto 34px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 18px; max-width:460px; align-items:start}
@media (min-width: 640px){ .hgrid{grid-template-columns:repeat(4, minmax(0,1fr)); max-width:760px; gap:26px 28px} }
@media (min-width: 1180px){ .hgrid{grid-template-columns:repeat(6, minmax(0,1fr)); max-width:1120px} }
.slot{position:relative; display:flex; flex-direction:column; gap:8px; min-width:0}
.slot.is-open{z-index:1}
.cap{font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--burgundy); font-size:clamp(14px, 1.2vw, 16px); line-height:1.15; margin:0; text-wrap:balance}
.cell{position:relative; aspect-ratio:3/4; container-type:inline-size; perspective:900px; border-radius:48% 48% 6px 6px / 30% 30% 6px 6px; background:linear-gradient(145deg,#E6D2A6,#B99260 55%,#DCC48F); box-shadow:0 6px 14px rgba(94,10,10,.16)}
.inside, .door{position:absolute; inset:5px; border-radius:46% 46% 4px 4px / 28% 28% 4px 4px; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; width:auto}
.inside{overflow:hidden; background:#FDFAF0; box-shadow:inset 0 3px 10px rgba(42,20,19,.18); display:block}
.inside .sk{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22% 6% 8%}
.inside .sk.myst{background:var(--pink-100); padding:18% 2% 4%}
.inside .sk.photo{padding:0}
.inside .sk.photo img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.inside .sk img{width:100%; height:auto; object-fit:contain; transform:scale(1.08); transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.slot.is-open .inside .sk img{transform:none}
.door{background:transparent; transform-style:preserve-3d; transform-origin:left center; transition:transform 1s cubic-bezier(.55,.05,.25,1); z-index:2}
.door .face{position:absolute; inset:0; border-radius:inherit; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; align-items:center; justify-content:center}
.door.redd .front{background:linear-gradient(170deg,#9E0A0A,#840000 70%); color:#F5CDD7}
.door.pinkd .front{background:linear-gradient(170deg,#FCE6EC,#F5CDD7 70%); color:#840000}
.door:hover .front{filter:brightness(1.05)}
.door .panel{position:absolute; inset:8%; border:1px solid currentColor; border-radius:44% 44% 3px 3px / 26% 26% 3px 3px}
.door.redd .panel{border-color:rgba(245,205,215,.7)} .door.pinkd .panel{border-color:rgba(185,146,96,.85)}
.ornw{position:absolute; left:8%; right:8%; top:10%}
.orn{display:block; width:100%; height:auto}
.ornw .n{position:absolute; left:0; right:0; top:59.5%; transform:translateY(-50%); text-align:center; font-family:var(--font-display); font-weight:500; line-height:1; font-size:26px; font-size:17.5cqw}
.door .dt{position:absolute; left:0; right:0; bottom:9%; text-align:center; font-family:var(--font-text); font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:9px; font-size:clamp(8.5px, 6.2cqw, 12px)}
.door .knob{position:absolute; right:5%; top:56%; width:9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFF1C9,#C9A35C 55%,#8A6A2E)}
.door .back{transform:rotateY(180deg); background:linear-gradient(170deg,#FCE6EC,#F5CDD7); color:#840000; flex-direction:column; gap:4px; border:1px solid var(--h-gold-soft)}
.door .back .n{font-family:var(--font-display); font-weight:500; font-size:20px; font-size:14cqw; line-height:1}
.door .back .bowsm{width:40%; height:auto}
.slot.is-open .door{transform:rotateY(-72deg); pointer-events:none}
.holiday .door:focus-visible, .holiday .inside:focus-visible{outline-offset:6px}


/* hold my date */
.hhold{background:var(--h-ivory); padding-block:clamp(52px, 7vw, 100px)}
.holdgrid{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(28px, 5vw, 72px); align-items:start}
.holdcopy h2{font-size:clamp(42px, 5vw, 64px); line-height:1; margin:12px 0 14px}
.holdcopy p{font-size:16.5px}
.next{list-style:none; counter-reset:n; padding:0; margin:14px 0 0; display:grid; gap:14px}
.next li{counter-increment:n; position:relative; padding-left:38px; font-size:15.5px; line-height:1.5}
.next li::before{content:counter(n); position:absolute; left:0; top:-4px; font-family:var(--font-display); font-size:30px; color:var(--rose-deep)}
.next b{color:var(--oxblood); font-weight:500}
.holdcard{background:#fff; border:1px solid var(--brass-soft); padding:clamp(20px, 3vw, 40px)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
.field{border:0; padding:0; margin:0 0 20px; min-width:0}
.field label, .field legend, .field .lab{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; letter-spacing:.03em; margin:0 0 9px; padding:0; color:var(--h-ink)}
.field i{font-style:normal; flex:none; width:24px; height:24px; border-radius:50%; background:var(--h-ox); color:var(--h-ivory); font-size:12px; display:grid; place-items:center}
.field small{font-size:12.5px; color:var(--h-muted); font-weight:400}
.field > small{display:block; margin-top:7px}
.holdcard input[type=text], .holdcard input[type=tel], .holdcard input[type=email], .holdcard input[type=date], .holdcard input[type=number]{width:100%; height:50px; border:1px solid #CDB2AE; background:var(--h-ivory); padding:0 14px; font:inherit; font-size:16px; color:var(--h-ink); border-radius:0}
.stepper{display:grid; grid-template-columns:50px 1fr 50px; border:1px solid #CDB2AE; background:var(--h-ivory)}
.stepper button{border:0; background:transparent; font-size:22px; color:var(--h-ox); cursor:pointer; height:48px}
.stepper input[type=number]{border:0; height:48px; text-align:center; -moz-appearance:textfield; padding:0}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.tiles{display:grid; gap:8px} .tiles.t5{grid-template-columns:repeat(5, 1fr)} .tiles.t4{grid-template-columns:repeat(4, 1fr)}
.field .tile{display:block; margin:0; cursor:pointer; position:relative}
.tile input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.tile span{display:grid; place-items:center; width:100%; min-height:54px; padding:8px 6px; border:1px solid #CDB2AE; background:var(--h-ivory); text-align:center; font-size:13.5px; line-height:1.25}
.tile b{font-weight:400}
.tile input:checked + span{background:var(--h-blush); border-color:var(--h-ox); box-shadow:inset 0 0 0 1px var(--h-ox); color:var(--h-ox)}
.tile input:checked + span b{font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:6px; min-height:36px; align-items:center}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--h-blush); color:var(--h-ox); font-size:13.5px; font-weight:500; padding:7px 6px 7px 11px}
.chip button{border:0; background:none; color:var(--h-ox); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px}
.chips .empty{font-size:13.5px; color:var(--h-muted)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fine{font-size:13px; color:var(--h-muted); text-align:center; margin:14px 0 0}
.formerr{background:#FDE8E5; border-left:3px solid var(--h-ox); color:var(--h-ox); padding:12px 14px; font-size:14.5px; margin:0 0 18px}
.holdcard [aria-invalid="true"]{border-color:var(--h-red) !important; box-shadow:0 0 0 1px var(--h-red)}
.held{text-align:center; padding:clamp(10px, 2vw, 28px)}
.held h3{font-size:clamp(34px, 4vw, 48px); margin:10px 0 18px}
.held dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; text-align:left; max-width:440px; margin:0 auto 22px; border-top:1px solid #E8C9D0; padding-top:18px}
.held dt{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--h-gold-text); padding-top:3px}
.held dd{margin:0; font-size:16px}
.held:focus{outline:none}
@media (max-width: 960px){ .holdgrid{grid-template-columns:1fr} }
@media (max-width: 640px){ .row2{grid-template-columns:1fr} .tiles.t5, .tiles.t4{grid-template-columns:1fr 1fr} }

/* gold band */
.hgold{display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 7fr); background:var(--pink-100); align-items:center}
.hgold img{width:100%; height:100%; min-height:170px; max-height:240px; object-fit:cover}
.hgold > div{padding:26px clamp(22px, 4vw, 60px)}
.hgold .big{font-family:var(--font-display); font-weight:400; font-size:clamp(24px, 2.8vw, 36px); color:var(--h-ox); line-height:1.2; margin:8px 0 0}
@media (max-width: 760px){ .hgold{grid-template-columns:1fr} }

/* rather talk */
.htalk{background:var(--h-ivory); text-align:center; padding:clamp(52px, 7vw, 96px) var(--gutter); display:grid; justify-items:center; gap:12px}
.htalk h2{font-size:clamp(34px, 4vw, 50px); margin:0 0 4px}
.htalk .num{font-family:var(--font-display); font-weight:400; font-size:clamp(38px, 5vw, 60px); color:var(--h-ox); line-height:1.1}
.htalk .alt{font-size:15px; margin:10px 0 0} .htalk .alt a{border-bottom:1px solid var(--h-gold)}
.xoxo{font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--oxblood); margin:16px 0 0}

/* the card */
dialog.hcard{border:0; padding:0; background:var(--cream); color:var(--burgundy); width:min(880px, 92vw); max-width:none; max-height:88dvh; overflow:auto; opacity:0; transform:translateY(14px) scale(.97); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); box-shadow:0 40px 90px -30px rgba(42,20,19,.6)}
dialog.hcard[open]{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
dialog.hcard.on{opacity:1; transform:none}
dialog.hcard::backdrop{background:rgba(42,20,19,.55); opacity:0; transition:opacity .35s ease}
dialog.hcard.on::backdrop{opacity:1}
.hcard .art{position:relative; background:var(--pink-100); display:flex; align-items:center; justify-content:center; padding:0; min-height:460px; overflow:hidden}
.hcard .art::after{content:""; position:absolute; inset:12px; border:1px solid rgba(250,246,240,.7); pointer-events:none}
.hcard .art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.hcard.is-myst .art{padding:34px}
.hcard.is-myst .art img{position:static; width:100%; height:auto; max-height:100%; object-fit:contain}
.hcard .tx{padding:34px 30px 26px; display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0}
.hcard .dayline{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--h-gold-text); margin:0}
.hcard .lbl{font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--h-muted); margin:0}
.hcard h2{font-size:clamp(32px, 4vw, 44px); line-height:1.05; margin:-4px 0 4px; text-wrap:balance; color:var(--oxblood)}
.hcard .occl{font-family:var(--font-display); font-style:italic; font-size:clamp(17px, 1.5vw, 21px); color:var(--burgundy); margin:-2px 0 6px}
.hcard .my{font-size:15.5px; line-height:1.5; margin:0}
.hcard .hbtn{padding:16px 14px; letter-spacing:.16em; line-height:1.5}
.hcard.is-myst .hbtn.ghost{background:var(--oxblood); color:var(--pink-100)}
.hcard.is-myst .hbtn.ghost:hover{background:var(--oxblood-deep)}
.hcard .nav2{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px}
.hcard .nav2 button{background:none; border:0; font:inherit; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--h-ox); cursor:pointer; padding:10px 0; min-height:44px}
.hcard .nav2 button:disabled{color:#755b57; cursor:default}
.hcard .nav2 span{font-size:12px; letter-spacing:.14em; color:var(--h-muted)}
.hcard .x{position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:50%; border:1px solid var(--oxblood); background:var(--cream); color:var(--oxblood); font-size:24px; line-height:1; cursor:pointer; z-index:2}
@media (max-width: 759px){
  dialog.hcard{width:100%; margin:auto 0 0; max-height:92dvh; transform:translateY(40px); padding-bottom:env(safe-area-inset-bottom, 0px)}
  dialog.hcard[open]{grid-template-columns:1fr}
  .hcard .art{min-height:0; aspect-ratio:4/3; padding:0}
  .hcard.is-myst .art{padding:24px}
  .hcard .tx{padding:22px 20px 18px}
}
@media (prefers-reduced-motion: reduce){
  .door{transition:opacity .3s !important}
  .slot.is-open .door{transform:none !important; opacity:0}
  .inside .sk img{transition:none !important; transform:none !important}
  dialog.hcard{transition:opacity .2s !important; transform:none !important}
}