@font-face{font-family:"Young Serif";font-display:block;src:url("/assets/fonts/young-serif-regular.woff2") format("woff2")}
@font-face{font-family:"Lora";font-display:block;src:url("/assets/fonts/lora-regular.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-display:block;src:url("/assets/fonts/lora-regular-italic.woff2") format("woff2")}
@font-face{font-family:"Lora";font-weight:700;font-display:block;src:url("/assets/fonts/lora-bold.woff2") format("woff2")}
@font-face{font-family:"Brand Type";font-display:block;src:url("/assets/fonts/brand-type-regular.woff2") format("woff2")}

  
  
  
  
  :root{--ink:#000;--red:#673527;--kraft-dark:#4E3310;--toffee:#664B28;--cream:#8B704E;--ivory:#EFE6D4;--ivory-soft:#cdbd9f}
  *{box-sizing:border-box}html,body{margin:0;padding:0}
  body{font-family:"Lora",Georgia,serif;color:var(--ivory);background:#120b04;-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* ---------------- NAV ---------------- */
  nav{position:absolute;top:0;left:0;right:0;z-index:6;max-width:1240px;margin:0 auto;width:100%;
    display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.6vw,26px) clamp(22px,4vw,48px)}
  .brand{font-family:"Lora";font-weight:700;letter-spacing:.34em;text-transform:uppercase;font-size:clamp(13px,1.7vw,16px);color:var(--ivory);text-decoration:none}
  .navlinks{display:flex;align-items:center;gap:24px;font-size:13.5px}
  .navlinks a{color:var(--ivory-soft);text-decoration:none}.navlinks a:hover{color:var(--ivory)}
  /* active-page underline lives in the shared /assets/css/nav.css component */
  .navlinks a[aria-disabled]{color:#6f5c40;cursor:default}.navlinks a[aria-disabled]:hover{color:#6f5c40}
  .navlinks .pill{border:1.5px solid var(--ivory-soft);color:var(--ivory);padding:8px 16px;letter-spacing:.03em;cursor:pointer}
  .navlinks .pill:hover{border-color:var(--ivory)}

  /* ---------------- HERO (dark candy box, toffee leads) ---------------- */
  .hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:clamp(96px,12vh,130px) clamp(20px,4vw,40px) clamp(40px,6vh,64px);gap:clamp(10px,1.5vw,15px);
    background:radial-gradient(115% 78% at 50% 40%, #3c2a11 0%, #251808 40%, #130c05 78%, #0a0502 100%)}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.4;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>")}
  .shot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;perspective:1200px}
  .shot .glow{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:68%;max-width:660px;aspect-ratio:1.5/1;
    background:radial-gradient(closest-side, rgba(255,206,140,.40), rgba(255,176,104,.12) 52%, transparent 74%);filter:blur(6px)}
  .tofsettle{position:relative;opacity:0;transform:translateY(12px) scale(.975);animation:settle .8s cubic-bezier(.2,.7,.2,1) .12s forwards}
  @keyframes settle{to{opacity:1;transform:none}}
  .toftilt{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .12s ease-out}
  .toftilt img{display:block;width:auto;height:min(44vh,420px);max-width:92vw;object-fit:contain;
    filter:drop-shadow(0 30px 34px rgba(0,0,0,.62)) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
  .toftilt img.bitten{position:absolute;left:0;top:0;opacity:0;transition:opacity .55s ease}
  .toftilt .duo{display:flex;align-items:center;justify-content:center;gap:min(3vw,32px)}
  .toftilt .duo .cell{display:block;width:auto;height:min(32vh,300px);max-width:30vw;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
  .floaty{animation:settle .8s cubic-bezier(.2,.7,.2,1) .12s forwards, float 6.5s ease-in-out 1s infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  .hero .eyebrow{position:relative;z-index:2;font-style:italic;font-size:clamp(12.5px,1.6vw,14.5px);color:var(--ivory-soft);letter-spacing:.04em;margin:0}
  .hero h1{position:relative;z-index:2;font-family:"Young Serif",serif;font-weight:400;color:var(--ivory);
    font-size:clamp(32px,4.6vw,56px);line-height:1.1;letter-spacing:-.005em;margin:0;max-width:20ch;text-wrap:balance}
  .hero .sub{position:relative;z-index:2;font-size:clamp(14px,1.7vw,16.5px);line-height:1.55;color:var(--ivory);max-width:46ch;margin:2px 0 6px}
  .joinbtn{position:relative;z-index:2;font-family:"Lora";font-weight:700;font-size:clamp(14px,1.7vw,15.5px);letter-spacing:.06em;
    color:var(--ivory);background:var(--red);border:none;padding:16px 34px;border-radius:2px;cursor:pointer;text-decoration:none;
    box-shadow:0 3px 0 #3f2013,0 8px 18px rgba(0,0,0,.5);transition:transform .08s,box-shadow .08s}
  .joinbtn:hover{transform:translateY(1px);box-shadow:0 2px 0 #3f2013,0 6px 13px rgba(0,0,0,.5)}
  .joinbtn:active{transform:translateY(3px);box-shadow:0 0 0 #3f2013}
  .joinbtn:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}
  .herodone{position:relative;z-index:2;display:none;font-style:italic;font-size:16px;color:var(--ivory);margin:6px 0 0}
  .scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;font-style:italic;font-size:11.5px;color:var(--ivory-soft);opacity:.7;letter-spacing:.08em}

  /* ---------------- STORY / WHY IT MATTERS (parchment) ---------------- */
  .story{position:relative;background:radial-gradient(120% 130% at 30% 0%, #98815c 0%, var(--cream) 34%, #80653f 82%, #6d5430 100%);color:#1a1006;
    padding:clamp(56px,9vw,108px) clamp(22px,5vw,48px)}
  .story::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>")}
  .storywrap{position:relative;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,6vw,72px);align-items:center}
  .storytext .kicker{font-family:"Lora";font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:12px;color:#3a2410;margin:0 0 16px}
  .storytext h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(27px,3.7vw,44px);line-height:1.06;margin:0 0 20px;color:var(--ink)}
  .storytext p{font-size:clamp(15px,1.8vw,17.5px);line-height:1.65;margin:0 0 16px;color:#1c1206;max-width:42ch}
  .storytext p:last-child{margin-bottom:0}
  .storytext .em{font-style:italic}

  .listcard{position:relative;background:linear-gradient(#efe6d4,#e7dcc4);border:1px solid rgba(40,24,8,.3);border-radius:2px;
    box-shadow:0 22px 44px rgba(0,0,0,.4);padding:clamp(24px,3vw,34px) clamp(22px,3vw,32px) clamp(20px,3vw,28px)}
  .listcard .lt{font-family:"Lora";font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:11.5px;color:#1a1006;
    padding-bottom:8px;border-bottom:1.5px solid rgba(20,12,4,.8);margin:0 0 2px;display:flex;justify-content:space-between;align-items:baseline}
  .listcard .lt .since{font-weight:400;font-style:italic;letter-spacing:0;text-transform:none;font-size:11px;opacity:.7}
  .roll{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .ln{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0 5px;border-bottom:1px solid rgba(20,12,4,.16)}
  .ln .nm{font-size:14.5px;color:#15100a}
  .ln .yr{font-style:italic;font-size:11.5px;color:#2a1a0a;opacity:.6}
  .listcard .more{text-align:center;font-style:italic;font-size:11.5px;color:#2a1a0a;opacity:.65;margin:9px 0 0}

  /* ---------------- INVITATION (closing) ---------------- */
  .invite{position:relative;background:radial-gradient(110% 90% at 50% 20%, #2a1c0b 0%, #160d05 60%, #0a0502 100%);
    padding:clamp(64px,10vw,120px) clamp(22px,5vw,48px);text-align:center;color:var(--ivory)}
  .invitecard{max-width:560px;margin:0 auto}
  .invite .kicker{font-family:"Lora";font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--ivory-soft);margin:0 0 18px}
  .invite h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(26px,3.6vw,40px);line-height:1.12;margin:0 0 16px;color:var(--ivory)}
  .invite p{font-size:clamp(15px,1.8vw,17px);line-height:1.6;color:var(--ivory);margin:0 0 12px;max-width:42ch;margin-left:auto;margin-right:auto}
  .invite .small{font-style:italic;color:var(--ivory-soft);font-size:14px;margin:0 0 28px}
  .invite .gift{margin-top:22px;font-size:13.5px;color:var(--ivory-soft)}
  .invite .gift a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}

  footer{background:#0a0502;color:var(--ivory-soft);text-align:center;padding:30px 20px;font-size:12px;letter-spacing:.06em}
  footer .canon{color:var(--ivory);letter-spacing:.04em}

  /* ---------------- MODAL ---------------- */
  .overlay{position:fixed;inset:0;z-index:20;background:rgba(8,4,1,.72);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;padding:22px}
  .overlay.open{display:flex}
  .modal{position:relative;width:100%;max-width:430px;border-radius:3px;text-align:center;
    background:radial-gradient(130% 120% at 50% 0%, #f3ebda 0%, #ece1c9 45%, #e0d2b5 100%);color:#1a1006;
    border:1px solid rgba(40,24,8,.35);box-shadow:0 40px 80px rgba(0,0,0,.6);
    padding:clamp(30px,5vw,44px) clamp(26px,5vw,40px) clamp(28px,4vw,36px);
    transform:translateY(10px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .28s}
  .overlay.open .modal{transform:none;opacity:1}
  .modal .x{position:absolute;top:12px;right:14px;border:none;background:transparent;font-size:22px;line-height:1;color:#1a1006;opacity:.55;cursor:pointer}
  .modal .x:hover{opacity:1}
  .modal .kicker{font-family:"Lora";font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#3a2410;margin:0 0 12px}
  .modal h3{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(24px,5vw,30px);margin:0 0 10px;color:var(--ink)}
  .modal .ms{font-style:italic;font-size:14.5px;color:#2a1a0a;margin:0 0 22px}
  .field{text-align:left;margin:0 0 16px}
  .field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#3a2410;margin:0 0 6px}
  .field input{width:100%;border:none;border-bottom:1.5px solid rgba(26,16,6,.7);background:transparent;outline:none;
    font-family:"Lora",serif;font-size:17px;color:#15100a;padding:0 0 8px}
  .field input:focus{border-bottom-color:var(--red)}
  .addmine{width:100%;font-family:"Lora";font-weight:700;font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--ivory);
    background:var(--ink);border:none;padding:15px;border-radius:2px;cursor:pointer;margin-top:8px;
    box-shadow:0 2px 0 rgba(0,0,0,.5);transition:transform .08s}
  .addmine:hover{transform:translateY(1px)} .addmine:active{transform:translateY(2px)}
  .addmine:focus-visible{outline:3px solid var(--red);outline-offset:3px}
  .modal .fine{font-style:italic;font-size:12px;color:#2a1a0a;opacity:.8;margin:14px 0 0}

  .meaning{position:relative;z-index:1;max-width:600px;margin:0 auto clamp(40px,6vw,66px);text-align:center}
  .meaning .kicker{font-family:"Lora";font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:12px;color:#3a2410;margin:0 0 16px}
  .meaning h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(27px,3.7vw,44px);line-height:1.08;margin:0 0 22px;color:var(--ink)}
  .meaning p{font-size:clamp(15px,1.85vw,18px);line-height:1.7;margin:0 0 16px;color:#1c1206}
  .meaning p:last-child{margin-bottom:0}
  .meaning .em{font-style:italic}
  .invitecard2{position:relative;z-index:1;max-width:520px;margin:0 auto;text-align:center;
    background:linear-gradient(#efe6d4,#e7dcc4);border:1px solid rgba(40,24,8,.3);border-radius:2px;
    box-shadow:0 22px 44px rgba(0,0,0,.4);padding:clamp(34px,5vw,52px) clamp(28px,5vw,44px)}
  .invitecard2 .ck{font-family:"Lora";font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:11.5px;color:#3a2410;margin:0 0 16px}
  .invitecard2 h3{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(24px,3.4vw,36px);line-height:1.12;margin:0 0 14px;color:var(--ink)}
  .invitecard2 .im{font-size:clamp(14px,1.8vw,16px);line-height:1.55;color:#1c1206;margin:0 0 26px;max-width:34ch;margin-left:auto;margin-right:auto}
  .invitecard2 .joined{display:none;font-style:italic;font-size:15px;color:#1c1206;margin:0;line-height:1.5}
  .gifting{position:relative;background:radial-gradient(125% 100% at 38% 30%,#3a2811 0%,#251808 45%,#180f06 100%);
    padding:clamp(56px,9vw,104px) clamp(22px,5vw,48px)}
  .giftwrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.85fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
  .giftimg{display:flex;justify-content:center}
  .giftimg img{width:100%;max-width:420px;height:auto;display:block;
    filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
  .gifttext .pourbrow{font-style:italic;font-size:clamp(13px,1.6vw,15px);color:var(--ivory-soft);letter-spacing:.02em;margin:0 0 16px}
  .gifttext .poursub{font-style:italic;font-size:13.5px;color:var(--ivory-soft);margin:16px 0 0}
  .gifttext .gk{font-family:"Lora";font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:12px;color:var(--ivory-soft);margin:0 0 16px}
  .gifttext h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.08;margin:0 0 18px;color:var(--ivory)}
  .gifttext p{font-size:clamp(15px,1.8vw,17px);line-height:1.62;color:var(--ivory);margin:0 0 26px;max-width:40ch}
  @media(max-width:820px){
    .giftwrap{grid-template-columns:1fr;gap:26px;text-align:center}
    .gifttext p{margin-left:auto;margin-right:auto}
    .giftimg img{max-width:300px}
  }
  .reveal{position:relative;background:radial-gradient(120% 100% at 50% 18%,#2c1d0c 0%,#190f06 55%,#0e0804 100%);
    padding:clamp(56px,9vw,104px) clamp(22px,5vw,48px);text-align:center}
  .revealwrap{max-width:640px;margin:0 auto}
  .reveal .rk{font-family:"Lora";font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:12px;color:var(--ivory-soft);margin:0 0 16px}
  .reveal h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(24px,3.4vw,38px);line-height:1.1;margin:0 0 28px;color:var(--ivory)}
  .revealimg img{width:100%;max-width:460px;height:auto;display:block;margin:0 auto;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
  .reveal .rcap{font-style:italic;font-size:14px;line-height:1.55;color:var(--ivory-soft);margin:24px auto 0;max-width:42ch}
  @media (prefers-reduced-motion:reduce){
    .tofsettle,.floaty{opacity:1;transform:none;animation:none}
    .toftilt{transition:none}.modal{transition:none}
  }
  @media(max-width:820px){
    /* mobile nav handled by the shared /assets/css/nav.css menu */
    .storywrap{grid-template-columns:1fr;gap:34px}
    .toftilt img{height:auto;width:min(82vw,380px)}
    .toftilt .duo{flex-direction:column;gap:16px}
    .toftilt .duo .cell{height:auto;width:min(72vw,300px);max-width:72vw}
  }


.brand{font-family:"Brand Type" !important;font-weight:400 !important;text-transform:none !important;letter-spacing:.005em !important;font-size:clamp(17px,2.1vw,21px) !important;color:var(--ivory) !important}
.storytext .kicker,.meaning .kicker,.invite .kicker,.modal .kicker,.invitecard2 .ck,.gifttext .gk,.reveal .rk,.listcard .lt{font-family:"Lora",serif !important;font-weight:400 !important;font-style:italic !important;text-transform:none !important;letter-spacing:.04em !important;font-size:clamp(12.5px,1.6vw,14.5px) !important}
.navlinks .pill{background:var(--red) !important;color:var(--ivory) !important;border:1.5px solid var(--red) !important;border-radius:2px !important;box-shadow:0 2px 0 #3f2013,0 5px 12px rgba(0,0,0,.4) !important;font-weight:700 !important}
.hero .giftcue{position:relative;z-index:2;margin:14px 0 0;font-style:italic;font-size:clamp(12.5px,1.5vw,14px);color:var(--ivory-soft);letter-spacing:.03em}

.brand{line-height:1 !important;display:inline-block !important;text-align:center}
a.brand,a.brand:link,a.brand:visited,a.brand:hover,a.brand:active,a.brand:focus{color:inherit;text-decoration:none;outline:none}
.brand .brandtag{display:block;font-family:"Brand Type";color:var(--red);text-transform:none;font-weight:400;font-size:clamp(8.5px,1vw,10.5px);letter-spacing:.32em;margin-top:4px;text-indent:.32em}

.brand .brandtag{font-weight:700 !important;font-size:clamp(11px,1.3vw,13px) !important;letter-spacing:.2em !important;text-indent:.2em !important;margin-top:5px !important}

.brand{font-size:clamp(21px,2.5vw,27px) !important}
.brand .brandtag{font-size:clamp(12.5px,1.5vw,15px) !important}

.brand{text-align:center !important}
.brand .brandtag{font-family:"Lora",serif !important;font-style:italic !important;font-weight:700 !important;letter-spacing:.01em !important;text-indent:0 !important;font-size:clamp(14px,1.7vw,17px) !important;margin-top:6px !important;text-shadow:none !important}

.howto{position:relative;background:radial-gradient(120% 120% at 50% 0%,#2a1b0c 0%,#1c1107 62%,#150d05 100%);
  padding:clamp(56px,9vw,100px) clamp(22px,5vw,48px);text-align:center}
.howwrap{max-width:1000px;margin:0 auto}
.howk{font-family:"Lora",serif;font-style:italic;font-size:clamp(12.5px,1.6vw,14.5px);letter-spacing:.04em;color:var(--ivory-soft);margin:0 0 14px}
.howto h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.1;color:var(--ivory);margin:0 0 clamp(34px,5vw,54px)}
.howsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,50px);text-align:left}
.howstep{display:flex;flex-direction:column}
.hownum{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--red);color:var(--ivory);font-family:"Lora",serif;font-weight:700;font-size:16px;margin:0 0 18px}
.howstep h3{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(18px,2vw,22px);color:var(--ivory);margin:0 0 9px}
.howstep p{font-family:"Lora",serif;font-size:clamp(14px,1.55vw,16px);line-height:1.62;color:var(--ivory-soft);margin:0}
@media(max-width:760px){.howsteps{grid-template-columns:1fr;gap:26px}.howstep{flex-direction:row;gap:16px;align-items:flex-start}.hownum{margin:0;flex:0 0 auto}}

.footlinks{display:block;margin:0 0 14px;font-size:12px;letter-spacing:.08em}
.footlinks a{color:var(--ivory-soft);text-decoration:none;margin:0 3px}
.footlinks a:hover{color:var(--ivory)}
.footlinks a[aria-disabled]{color:#5d4c34;cursor:default}
.footlinks a[aria-disabled]:hover{color:#5d4c34}
.foottrad{display:block;color:#9c8666;font-size:11.5px;letter-spacing:.1em}

/* ---------------- SHARED CLOSING / INVITATION CARD ----------------
   Parchment card on dark ground. Used by Our Story and Gifting closing
   sections so the invitation reads identically across the site. */
.card{position:relative;max-width:560px;margin:0 auto;background:var(--ivory);color:#1a1006;
  border:1px solid var(--ivory-soft);border-radius:4px;text-align:center;
  padding:clamp(38px,6vw,60px) clamp(26px,5vw,52px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.card .ck{font-family:"Lora",serif;font-style:italic;font-size:clamp(12.5px,1.6vw,14.5px);letter-spacing:.04em;
  color:var(--red);margin:0 0 16px}
.card h2{font-family:"Young Serif",serif;font-weight:400;font-size:clamp(23px,3.4vw,33px);line-height:1.16;
  margin:0 0 18px;color:#1a1006}
.card .cm{font-size:clamp(14.5px,1.8vw,16px);line-height:1.64;color:#4a3826;margin:0 auto 28px;max-width:42ch}
.card .fine{margin:18px 0 0;font-size:12.5px;color:#6d5430;letter-spacing:.01em}