/* The Dessert Party · Cocoa identity · September 2026.
   Core templates retain the existing page structure and photography. */
:root{
  --tdp-cocoa:#6D3F28;--tdp-espresso:#895129;--tdp-toffee:#A56E3E;
  --tdp-linen:#F4EEE5;--tdp-white:#FFFFFF;
  /* Supporting ink: cocoa softened 16% toward linen. Not a new brand colour -
     the same ink held quieter, per the kit's rule that supporting text stays
     visibly quieter than the name it sits under. 5.13:1 on linen, 5.92:1 on
     white, so it clears WCAG AA for body text on both surfaces. */
  --tdp-cocoa-soft:#835B46;
  --cream:var(--tdp-linen);--linen:var(--tdp-linen);--white:var(--tdp-white);
  --clay:var(--tdp-cocoa);--clay-dk:var(--tdp-espresso);--esp:var(--tdp-cocoa);
  --taupe:var(--tdp-cocoa-soft);--ink:var(--tdp-cocoa);--brown:var(--tdp-cocoa);
  --tan:var(--tdp-cocoa);--gold:var(--tdp-linen);--tan2:var(--tdp-linen);
  --sand:rgba(109,63,40,.24);--hair:rgba(109,63,40,.3);
  --header-height:96px;
}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
body{background:var(--tdp-linen);color:var(--tdp-cocoa)}
::selection{background:var(--tdp-cocoa);color:var(--tdp-linen)}
button,input,select,textarea{accent-color:var(--tdp-cocoa)}
button,a,input,select,textarea{-webkit-tap-highlight-color:rgba(109,63,40,.12)}
.site-header{background:rgba(244,238,229,.97);border-bottom:1px solid var(--sand);box-shadow:none}
.nav-bar{padding:12px 24px;min-height:var(--header-height)}
.logo{display:inline-flex;align-items:center;gap:12px;line-height:1;text-align:center;margin:0;flex-shrink:0}
/* Header: the supplied horizontal lockup, complete with HANDMADE DESSERTS /
   SINCE 2015. Artwork rather than CSS type, so the proportions are the
   designer's. Sized as large as the header allows - the descriptor is small in
   CSS pixels but renders at double that on the 2x screens most visitors use,
   and it reads as brand texture rather than something anyone needs to parse. */
.brand-lockup-img{display:block;width:auto;height:66px}

/* Footer mark: the primary oval logo, whole and legible, with no wordmark
   beside it. This is the one formal placement the full logo gets. */
.brand-oval{display:block;flex-shrink:0}
.brand-oval img{display:block;width:auto;height:150px;mix-blend-mode:multiply}
.logo:focus-visible{outline-offset:7px}
.nav-group a,.nav-sub-btn{letter-spacing:.1em}
.nav-sub-menu{box-shadow:0 10px 24px rgba(109,63,40,.08);background:var(--white);border-color:var(--sand)}
.nav-sub-menu a{min-height:44px}
.nav-sub-menu a:hover{background:var(--linen)}
.nav-group a.btn-order,.hdr-order,.btn{border-radius:3px}
.hdr-order{min-height:44px}
.btn{font-size:13px;letter-spacing:.13em;min-height:48px}
.btn-solid{color:var(--white)}
.btn-solid:hover{color:var(--white)}
.btn-gold{background:var(--linen);color:var(--clay)}
.btn-gold:hover{background:var(--white);color:var(--clay)}
.btn-outline-gold:hover{background:var(--linen);color:var(--clay)}
.btn:disabled{opacity:.6;cursor:wait}
.section{border-color:var(--sand)}
.kicker{font-size:11px;letter-spacing:.2em}
.hero{gap:40px;padding:40px 24px 52px;border-bottom:1px solid var(--sand)}
.hero h1.display{font-size:clamp(34px,4.3vw,60px);line-height:1.17;max-width:850px;letter-spacing:-.025em}
.hero .lede{max-width:540px;font-size:17px}
.hero .small-note{font-size:13px;letter-spacing:0;max-width:550px}
.hero .arch{border-radius:48% 48% 3px 3px;height:500px}
.hero .float-card{box-shadow:none;border:1px solid var(--sand);padding:14px 20px;bottom:-16px}
.hero .float-card .big{font-size:20px}
.stats{gap:22px 40px;margin-bottom:24px;padding-top:18px}
.stat .n{font-size:23px}
.stat .l{font-size:10px;letter-spacing:.1em}
.diet{font-size:11px;letter-spacing:.1em}
.diet .dot{color:var(--tdp-toffee)}
.ticker{background:var(--white);font-size:11px;letter-spacing:.12em}
.brand-illustration-strip{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,64px);min-height:126px;padding:14px 24px;border-bottom:1px solid var(--sand);background:var(--white);color:var(--tdp-cocoa);font-family:Karla,system-ui,sans-serif;font-size:10px;letter-spacing:.22em;text-align:center}
.brand-illustration-strip img{width:auto;height:108px;object-fit:contain;mix-blend-mode:multiply;opacity:.92}
.brand-illustration-strip .brand-baker-art{max-width:92px}
.brand-illustration-strip .brand-motifs-art{max-width:246px}
.brand-event-illustration{display:flex;align-items:center;justify-content:center;gap:24px;padding:14px 24px;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);background:var(--white);color:var(--tdp-cocoa);font-family:Karla,system-ui,sans-serif;font-size:10px;letter-spacing:.22em;text-align:center}
.brand-event-illustration img{width:min(600px,58vw);height:130px;object-fit:contain;mix-blend-mode:multiply;opacity:.92}
/* Supporting illustration used as a quiet accent - one per page at most, and
   never on a page that already carries an illustration strip. Decorative, so
   it stays aria-hidden and out of the accessibility tree. */
.motif{display:block;margin:0 auto;width:auto;mix-blend-mode:multiply;opacity:.9}
.motif-sm{height:56px}
.motif-md{height:76px}
/* Small mark closing out sparse confirmation pages. */
.mono-mark{display:block;margin:0 auto 18px;width:auto;height:64px;mix-blend-mode:multiply;opacity:.92}
.h-rule h2{font-size:clamp(26px,3vw,34px)}
.imgw{border-radius:3px}
.pcard .ptag{letter-spacing:.12em}
.prow{align-items:start;flex-wrap:wrap;gap:6px 12px}
.prow .name{font-size:19px;line-height:1.4;flex:1 1 65%;min-width:0}
.prow .price{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.035em}
.prow .cta{white-space:normal;font-size:11px;line-height:1.5}
.pdesc{font-size:15px;line-height:1.65}
.pdp{gap:32px}
.pdp h1{letter-spacing:-.025em}
.pdp-price{font-family:Karla,system-ui,sans-serif;font-size:23px;font-weight:600;letter-spacing:.025em}
.pdp-media img{border-radius:4px}
.answer{background:var(--white);border-width:1px;padding:18px 22px}
.pdp-info .answer{font-size:15px;line-height:1.7}
.pdp-body p{font-size:16px;line-height:1.8}
.price-panel,.pkg,.pk,.order-panel,.embed,.qr-card{box-shadow:none}
.price-panel{border:1px solid var(--sand)}
.bg-dark{background:var(--tdp-cocoa)}
.bg-dark .kicker,.bg-dark .small-note,.bg-dark a:not(.btn){color:var(--tdp-linen)}
.bg-dark .btn-gold{color:var(--tdp-cocoa)}
.stars{color:var(--tdp-cocoa)}
.quote{font-size:clamp(23px,3vw,32px)}
.quiz-strip{background:var(--white)}
.qi-pill,.status,.chip,.fl{border-radius:4px}
.chip,.fl{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.qi-orb{box-shadow:none;border:1px solid var(--sand)}
.q-opt:hover{box-shadow:none}
.dotlive{background:var(--tdp-cocoa);box-shadow:0 0 0 3px rgba(109,63,40,.12)}
.script,.f-script,.flash-strip .psst,.qr-mark{font-family:Prata,Georgia,serif;letter-spacing:-.035em}
.f-script{font-size:30px;line-height:1.2}
.flash-strip .psst{font-size:23px;font-style:italic}
.site-footer{border-top:1px solid var(--sand)}
/* Centred, per request. The blurb centres with it so the column reads as one
   deliberate block rather than a centred mark over left-aligned text. */
.footer-brand{display:flex;gap:22px;align-items:center;justify-content:center}
.footer-brand+.f-blurb{margin-left:auto;margin-right:auto;text-align:center}
.f-blurb{max-width:355px;margin-top:20px}
.f-col a{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.f-head{font-size:11px;letter-spacing:.18em}
.f-bottom{font-size:11px}
.f-col{line-height:2.7}
/* Full-opacity supporting ink rather than faded cocoa: .7 opacity measured
   3.44:1 on linen, which fails AA. This reads as placeholder but stays legible. */
.field input::placeholder,.field textarea::placeholder{color:var(--tdp-cocoa-soft);opacity:1}
.field select{background-image:none;appearance:auto;-webkit-appearance:menulist}
.field-hint{font-size:13px;letter-spacing:0}
.buybar{background:rgba(244,238,229,.98)}
.nlp-back{background:rgba(109,63,40,.34)}
.nlp{box-shadow:0 14px 40px rgba(109,63,40,.12);border:1px solid var(--sand)}
.nlp-close:hover{background:var(--linen)}
.nlp-fine{font-size:13px}
.hide{display:none!important}
.payment-note,.order-intent{padding:18px 22px;border:1px solid var(--sand);background:var(--white);max-width:1100px;margin:0 auto 22px;font-size:15px;line-height:1.7}
.payment-note a,.order-intent a{text-decoration:underline;text-underline-offset:3px}
.order-intent[hidden]{display:none}
.order-intent h2{font-size:24px;margin-bottom:8px}
.content-reviewed{font-size:12px;letter-spacing:.04em;color:var(--brown);margin:16px 0 24px}
.brand-event-note{display:flex;align-items:center;gap:15px}
.brand-event-note svg{width:54px;height:54px;flex-shrink:0}
.form-status{font-size:14px;line-height:1.6;color:var(--tdp-cocoa)}
@media(min-width:1020px){
 .nav-bar{padding:10px 32px;grid-template-columns:1fr 255px 1fr;gap:22px}
 .logo{grid-area:1/2;justify-content:center}
 .nav-group{gap:20px}
 .nav-group a,.nav-sub-btn{font-size:11px}
 .hero{grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);padding:44px 56px 60px;gap:60px;min-height:calc(100svh - var(--header-height))}
 .hero .arch{height:clamp(440px,66vh,620px)}
 .pdp-media{top:calc(var(--header-height) + 18px)}
}
@media(min-width:1440px){.nav-bar{padding-left:56px;padding-right:56px}.hero{gap:80px}.nav-group{gap:24px}}
@media(max-width:1019px){
 :root{--header-height:86px}
 .nav-bar{padding:8px 20px}
 .logo{margin:0;gap:9px}
 .brand-lockup-img{height:58px}
 .menu-toggle{top:24px;right:18px}
 .nav-menu{max-height:calc(100svh - 92px);overflow-y:auto}
 .nav-group a,.nav-sub-btn{font-size:12px}
 .hero{grid-template-columns:1fr 1fr;align-items:center;gap:26px}
 .hero .arch{height:470px}
 .hero h1.display{font-size:40px}
 .hero .lede{font-size:16px}
 .hero .stats{gap:14px}
}
@media(max-width:719px){
 .nav-bar{padding:8px 14px}
 .brand-lockup-img{height:50px}
 .brand-oval img{height:120px}
 .logo{gap:7px}
 .hdr-order{padding:0 13px;margin-right:6px;font-size:11px}
 .menu-toggle{right:14px}
 .hero{display:flex;flex-direction:column;align-items:stretch;padding:30px 22px 44px;gap:34px;min-height:0}
 .hero h1.display{font-size:38px;line-height:1.18}
 .hero .lede{font-size:16px;line-height:1.7}
 .hero .kicker{font-size:10px;letter-spacing:.14em}
 .hero .stats{gap:26px}
 .hero .arch{height:390px;max-height:110vw}
 .hero .float-card{left:12px;bottom:-12px}
 .section{padding:44px 22px}
 .prow .name{font-size:18px}
 .cols-4,.cols-5{gap:30px 16px}
 .cols-4 .prow .name,.cols-5 .prow .name{flex-basis:100%;font-size:16px}
 .cols-4 .prow .price,.cols-5 .prow .price{font-size:14px}
 .cols-4 .pdesc,.cols-5 .pdesc{font-size:13px}
 .pdp{padding:20px 22px 40px}
 .pdp-media{max-width:500px;margin:0 auto;width:100%}
 .pdp h1.display{font-size:36px}
 .pdp-info .btn-row{flex-direction:row}
 .pdp-info .btn-row .btn{width:100%}
 .f-signup .signup input[type=email]{min-width:0;width:100%}
 .footer-brand{gap:18px}
 .f-grid{gap:30px}
 .brand-illustration-strip{gap:12px;min-height:96px;padding:10px 14px;font-size:8px;letter-spacing:.16em}
 .brand-illustration-strip img{height:76px}
 .brand-illustration-strip .brand-baker-art{max-width:62px}
 .brand-illustration-strip .brand-motifs-art{max-width:168px}
 .brand-event-illustration{gap:12px;padding:10px 16px;font-size:8px;letter-spacing:.15em}
 .brand-event-illustration img{height:92px;width:min(600px,64vw)}
 .nlp-body{padding:42px 22px 26px}
 .nlp input[type=email]{min-width:0;width:100%}
 .notice{font-size:14px;text-align:left;align-items:flex-start}
 .order-panel{max-width:100%;padding:24px}
 .payment-note,.order-intent{padding:18px}
}
@media(max-width:359px){
 .brand-lockup-img{height:42px}
 .brand-oval img{height:104px}
 .hdr-order{padding:0 10px}
 .hero h1.display{font-size:34px}
 .hero .diet{font-size:10px;gap:8px}
 .hero .diet-link{gap:6px 9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .arch img,.btn,.pcard .imgw img{transition:none}}

/* The ORDER pill sits outside the nav underline system (it has its own padding,
   and forcing padding-bottom on it dropped the label to the bottom of the
   button). It still needs a current-page cue, so draw one outside the pill
   where it cannot disturb the box. */
@media(min-width:1020px){
  .nav-group a.btn-order{position:relative}
  .nav-group a.btn-order.active::after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;
    height:1.5px;background:var(--tdp-cocoa);border-radius:1px}
}

/* Cococart is cross-origin, so the frame cannot measure its own content and
   auto-size. A fixed 940px frame is taller than most laptop viewports, which
   pushed the top or bottom of the order form off-screen. Fit the frame to the
   viewport and let it scroll internally, so the whole form stays reachable. */
.embed iframe{height:min(940px,calc(100vh - var(--header-height) - 104px));min-height:540px}