/* ============================================================
   THANKSGIVING — /thanksgiving-2026
   Page-scoped. The house palette in autumn: harvest cream, rust,
   copper and the burgundy. The centre of the page is the menu list:
   an invitation card that, once you are on it, folds itself into
   an envelope and takes a wax seal.
   ============================================================ */
.tg{--harvest:#F6EEDF;--harvest-2:#EFE3CE;--rust:#9C4A26;--copper:#B8743A;--hair:rgba(156,74,38,.22);
  background:var(--harvest)}
.tg .kicker{color:var(--rust)}
.tg .kicker.light{color:var(--gold-light)}
.tg .display em{color:var(--burgundy);font-style:italic}
.tg .btn{border-color:var(--ink)}
.tg .btn.solid{background:var(--burgundy);border-color:var(--burgundy)}

/* ---------- hero ---------- */
.tg-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 46px + clamp(40px,6vw,80px)) 0 clamp(60px,8vw,110px);
  background:radial-gradient(80% 70% at 85% 30%,rgba(184,116,58,.12),transparent 60%),var(--harvest)}
.tg-bot{position:absolute;pointer-events:none;width:clamp(240px,30vw,460px);height:auto;opacity:.8}
.tg-bot.tl{left:-60px;top:calc(var(--nav-h) + 20px)}
.tg-bot.br{right:-70px;bottom:-60px}
.tg-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,6vw,100px);align-items:center}
.tg-title{margin:18px 0 0;font-weight:400;line-height:.95}
.tg-title .a{display:block;font-family:'Pinyon Script',cursive;color:var(--burgundy);font-size:clamp(70px,10vw,156px);
  line-height:1.05;padding-bottom:.08em}
.tg-title .b{display:block;margin-top:6px;font-family:var(--sans);font-size:clamp(12px,1.2vw,15px);font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink)}
.tg-hero .lede{margin-top:24px;max-width:38ch}
.tg-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.tg-cta.center{justify-content:center}
.tg-hero-art{justify-self:center;width:100%;max-width:440px}
.tg-hero-art img{display:block;width:100%;height:auto;transform:rotate(1.6deg);
  box-shadow:0 40px 70px -34px rgba(78,21,25,.5);outline:1px solid rgba(156,74,38,.18);outline-offset:-1px;
  transition:transform .8s var(--ease)}

/* ---------- the menu list: an invitation card ---------- */
.tg-list{position:relative;padding:clamp(70px,9vw,130px) 0;background:
  linear-gradient(180deg,var(--harvest) 0%,var(--harvest-2) 100%);scroll-margin-top:calc(var(--hdr-sc) + 10px)}
.tg-card{position:relative;max-width:640px;margin:0 auto;background:#FFFBF4;border:1px solid var(--rust);
  border-radius:300px 300px 4px 4px;padding:clamp(70px,9vw,110px) clamp(26px,6vw,70px) clamp(40px,5vw,60px);text-align:center;
  box-shadow:0 50px 80px -50px rgba(78,21,25,.45)}
.tg-card::after{content:'';position:absolute;inset:8px;border:1px solid rgba(184,116,58,.4);border-radius:292px 292px 2px 2px;pointer-events:none}
.tg-card h2.display{margin:14px 0 0;font-size:clamp(36px,4.6vw,60px)}
.tg-sub{margin:16px auto 0;max-width:42ch;font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:var(--ink-soft)}
.tg-form{position:relative;z-index:1;margin:30px auto 0;max-width:420px;display:grid;gap:14px;text-align:left}
.tg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tg-field{position:relative}
.tg-field input{width:100%;height:58px;padding:22px 16px 6px;border:1px solid rgba(43,26,22,.28);border-radius:2px;
  background:#fff;font:400 16px/1 var(--sans);color:var(--ink);outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.tg-field label{position:absolute;left:16px;top:19px;font:400 15px/1 var(--sans);color:#8A7B6C;pointer-events:none;
  transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s var(--ease);transform-origin:left top}
.tg-field label small{font-size:.85em;opacity:.8}
.tg-field input:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(156,74,38,.12)}
.tg-field input:focus+label,.tg-field input:not(:placeholder-shown)+label{transform:translateY(-11px);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.tg-field.bad input{border-color:#A3352F;box-shadow:0 0 0 3px rgba(163,53,47,.1)}
.tg-go{position:relative;overflow:hidden;height:58px;border:0;border-radius:2px;background:var(--burgundy);color:#FFF8EE;
  font:400 12.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tg-go::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--rust);transform:translateY(101%);transition:transform .5s var(--ease)}
.tg-go:hover{transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(78,21,25,.7)}
.tg-go:hover::after{transform:none}
.tg-go:disabled{opacity:.7;cursor:wait}
.tg-go.busy span::after{content:'';display:inline-block;width:12px;height:12px;margin-left:10px;vertical-align:-1px;
  border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tgspin .8s linear infinite}
@keyframes tgspin{to{transform:rotate(360deg)}}
.tg-msg{margin:2px 0 0;min-height:20px;font-size:14px;color:var(--ink-soft);text-align:center}
.tg-msg.bad{color:#A3352F}
.tg-fine{margin:16px auto 0;max-width:40ch;font-size:12.5px;line-height:1.5;color:#8A7B6C}
.tg-card-in.out{animation:tgout .5s var(--ease) forwards}
@keyframes tgout{to{opacity:0;transform:translateY(-14px) scale(.98)}}

/* ---------- once you are on the list: the envelope ---------- */
.tg-done{animation:tgin .7s var(--ease) both}
@keyframes tgin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tg-done h2.display{margin:26px 0 0;font-size:clamp(34px,4.4vw,56px)}
.tg-env{position:relative;width:220px;height:150px;margin:0 auto;perspective:700px}
.tg-env .back{position:absolute;inset:0;background:#E7CFA9;border-radius:4px;box-shadow:0 24px 40px -24px rgba(78,21,25,.5)}
.tg-env .letter{position:absolute;left:14px;right:14px;top:-70px;height:130px;background:#FFFDF8;border:1px solid rgba(156,74,38,.3);
  border-radius:2px;text-align:center;padding-top:16px;animation:tgletter 1.1s .2s var(--ease) both}
.tg-env .letter span{display:block;font-family:'Pinyon Script',cursive;font-size:30px;color:var(--burgundy);line-height:1}
.tg-env .letter i{display:block;height:2px;margin:9px 26px 0;background:rgba(156,74,38,.2);border-radius:2px}
@keyframes tgletter{0%{transform:translateY(-30px);opacity:0}25%{opacity:1}100%{transform:translateY(62px)}}
.tg-env .front{position:absolute;inset:0;border-radius:4px;z-index:2;
  background:linear-gradient(135deg,transparent 49.5%,#DDBF94 50%) left/50% 100% no-repeat,
             linear-gradient(225deg,transparent 49.5%,#DDBF94 50%) right/50% 100% no-repeat,
             linear-gradient(0deg,#E3C79D 0 52%,transparent 52%)}
.tg-env .flap{position:absolute;left:0;right:0;top:0;height:86px;z-index:3;transform-origin:top center;
  background:linear-gradient(180deg,#D7B585,#CFA978);clip-path:polygon(0 0,100% 0,50% 100%);
  transform:rotateX(180deg);animation:tgflap .7s 1.2s var(--ease) forwards;backface-visibility:visible}
@keyframes tgflap{to{transform:rotateX(0)}}
.tg-env .seal{position:absolute;left:50%;top:62px;z-index:4;width:48px;height:48px;margin-left:-24px;border-radius:50%;
  display:grid;place-items:center;font:600 12px/1 'Cormorant Garamond',serif;letter-spacing:.12em;color:#F6E2C8;
  background:radial-gradient(circle at 38% 34%,#9A2A31,#6E1F24 55%,#4E1519);box-shadow:0 0 0 3px rgba(110,31,36,.25),0 6px 12px -4px rgba(0,0,0,.4);
  transform:scale(0);animation:tgseal .55s 1.85s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes tgseal{0%{transform:scale(2.2) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}

/* ---------- what we know ---------- */
.tg-sec{background:var(--harvest)}
.tg-knows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px);margin-top:40px}
.tg-know{background:#FFFBF4;border:1px solid var(--hair);padding:34px 28px 30px;text-align:center}
.tg-know .ic{display:block;width:46px;height:46px;margin:0 auto 16px;color:var(--rust)}
.tg-know .ic svg{width:100%;height:100%}
.tg-know b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;color:var(--ink)}
.tg-know span:last-child{display:block;margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* ---------- the room ---------- */
.tg-band{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:center;overflow:hidden;background:var(--dark);color:var(--cream)}
.tg-band-img{position:absolute;inset:0}
.tg-band-img img{width:100%;height:100%;object-fit:cover;opacity:.55}
.tg-band::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,14,.75) 0%,rgba(20,17,14,.2) 70%)}
.tg-band-c{position:relative;z-index:1}
.tg-band-c h2.display{margin:14px 0 0;font-size:clamp(38px,5vw,72px);color:var(--cream)}
.tg-band-c h2 em{color:var(--gold-light)!important}
.tg-band-c p{margin:16px 0 26px;max-width:44ch;font-family:var(--serif);font-size:20px;line-height:1.5;color:rgba(247,244,237,.85)}

/* ---------- questions ---------- */
.tg-faq{margin-top:34px;border-top:1px solid var(--hair)}
.tg-faq details{border-bottom:1px solid var(--hair)}
.tg-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-family:var(--serif);font-size:clamp(20px,2vw,24px);color:var(--ink)}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary i{flex:none;width:14px;height:14px;position:relative}
.tg-faq summary i::before,.tg-faq summary i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rust);transition:transform .4s var(--ease)}
.tg-faq summary i::after{transform:rotate(90deg)}
.tg-faq details[open] summary i::after{transform:rotate(0)}
.tg-faq details p{margin:0;padding:0 4px 22px;max-width:62ch;font-size:16px;line-height:1.65;color:var(--ink-soft)}

@media (max-width:900px){
  .tg-hero-in{grid-template-columns:1fr;text-align:center}
  .tg-hero .lede{margin-inline:auto}
  .tg-cta{justify-content:center}
  .tg-hero-art{max-width:min(78vw,360px);order:2}
  .tg-knows{grid-template-columns:1fr}
  .tg-bot.tl{left:-90px;opacity:.55}
}
@media (max-width:560px){
  .tg-card{border-radius:180px 180px 4px 4px;padding-top:64px}
  .tg-card::after{border-radius:172px 172px 2px 2px}
  .tg-cta .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .tg-env .letter,.tg-env .flap,.tg-env .seal,.tg-done,.tg-card-in.out{animation:none!important}
  .tg-env .letter{transform:translateY(62px)}
  .tg-env .flap{transform:none}
  .tg-env .seal{transform:rotate(-8deg)}
}