/* ==========================================================================
   Rockaway Con Canela, v2 design system
   Display: Fraunces  ·  Body/UI: Figtree
   ========================================================================== */
:root{
  --cream:#EFE4CE;
  --sage-block:#E9EDE2;
  --blush-block:#F5E0D4;
  --white:#FFFFFF;
  --umber:#70230E;
  --umber-body:#5A1C0B;
  --terracotta:#96503A;          /* links + primary actions ONLY */
  --terracotta-accent:#B5654A;   /* large display accents ONLY */
  --sage-dark:#55624A;           /* eyebrows, tags, qty labels, step numbers */
  --cream-ink:#FBF6E9;
  --umber-eyebrow:#E0B39E;       /* eyebrows + step numbers on umber */

  --max:1120px;
  --radius:10px;
  --nav-offset:96px;             /* sticky nav clearance for in-page anchors */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

/* every in-page anchor target clears the sticky nav */
[id]{scroll-margin-top:var(--nav-offset);}

body{
  margin:0;
  background:var(--cream);
  color:var(--umber-body);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.68;
  overflow-x:hidden;
}
body.has-sticky-cta{padding-bottom:78px;}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-optical-sizing:auto;
  color:var(--umber);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,5vw,3.1rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem);}
h3{font-size:1.28rem;font-weight:600;}
p{margin:0 0 1.1em;}
a{color:var(--terracotta);text-decoration-thickness:1.5px;text-underline-offset:3px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:3px solid var(--umber);outline-offset:2px;
}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.narrow{max-width:720px;margin-left:auto;margin-right:auto;}
.center{text-align:center;}

/* --- announcement bar ------------------------------------------------------ */
.announce{
  background:var(--umber);color:var(--cream-ink);
  text-align:center;padding:9px 14px;
  font-family:'Figtree',sans-serif;font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}

/* --- eyebrow + lede -------------------------------------------------------- */
.eyebrow{
  display:block;
  font-family:'Figtree',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;
  color:var(--sage-dark);
  margin-bottom:.9em;
}
.lede{font-size:1.1rem;color:var(--umber-body);max-width:600px;}
.center .lede,.page-head .lede{margin-left:auto;margin-right:auto;}

/* --- text link ------------------------------------------------------------- */
.text-link{
  display:inline-block;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--umber);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px;padding:6px 2px;
}
.text-link:hover{color:var(--terracotta);}

/* --- roll icon (inline svg) ------------------------------------------------ */
.roll{display:inline-block;vertical-align:-.18em;}
.roll svg{display:block;}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.06em;
  padding:15px 34px;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .14s ease,background .18s ease,color .18s ease;
  cursor:pointer;min-height:44px;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--terracotta);color:var(--cream-ink);border-color:var(--terracotta);}
.btn-primary:hover{background:var(--umber);border-color:var(--umber);}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;}
.btn:disabled:hover,.btn[disabled]:hover{transform:none;background:var(--terracotta);border-color:var(--terracotta);}
.btn-cream{background:var(--white);color:var(--umber);border-color:var(--white);}
.btn-cream:hover{background:var(--cream-ink);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.center .btn-row{justify-content:center;}

/* --- nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(239,228,206,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(112,35,14,.10);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:24px;
}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;}
.nav-logo img{height:36px;width:auto;}
.wordmark{display:flex;flex-direction:column;line-height:1;}
.wordmark .wm-a{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.84rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--umber);
}
.wordmark .wm-b{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:.92rem;
  color:var(--umber);margin-top:3px;
}
.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--umber);text-decoration:none;
}
.nav-links a:hover{color:var(--terracotta);}
.nav-links a.active{
  color:var(--terracotta);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:5px;
}
.nav-cta{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;
  background:var(--terracotta);color:var(--cream-ink);text-decoration:none;
  padding:11px 24px;border-radius:999px;white-space:nowrap;
}
.nav-cta:hover,.nav-cta.active{background:var(--umber);color:var(--cream-ink);}

/* --- sections ------------------------------------------------------------- */
section{padding:96px 0;}
.sec-cream{background-color:var(--cream);}
.sec-white{background-color:var(--white);}
.sec-sage{background-color:var(--sage-block);}
.sec-blush{background-color:var(--blush-block);}
.sec-umber{background-color:var(--umber);color:var(--cream-ink);}
.sec-umber h1,.sec-umber h2,.sec-umber h3{color:var(--cream-ink);}
.sec-umber p{color:#e8dccd;}
.sec-umber .lede{color:#e8dccd;}
.sec-umber .eyebrow{color:var(--umber-eyebrow);}
.sec-umber .card{background:var(--white);}
.sec-umber .card h3{color:var(--umber);}
.sec-umber .card p{color:var(--umber-body);}
.sec-umber .note{background:var(--white);}
.sec-umber .note h3{color:var(--umber);}
.sec-umber .note p{color:var(--umber-body);}

/* --- page head (inner pages) --------------------------------------------- */
.page-head{
  padding:64px 0 56px;
  text-align:center;
  background-color:var(--sage-block);
}
.page-head h1{font-size:clamp(1.95rem,4.6vw,2.7rem);}

/* --- grids & cards -------------------------------------------------------- */
.grid{display:grid;gap:40px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{background:var(--white);border-radius:var(--radius);padding:30px 26px;}
.card h3{margin-bottom:.35em;}
.card p{margin-bottom:0;color:var(--umber-body);font-size:.97rem;}
.card .pill{margin-bottom:.7em;}

/* photography-led product card, borderless */
.pcard{text-align:left;}
.pcard .photo{
  background:linear-gradient(135deg,#F0C18C 0%,#F4D5AC 100%);
  border-radius:var(--radius);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  color:var(--umber);margin-bottom:20px;
}
.pcard .photo .roll svg{width:44px;height:44px;}
.pcard h3{margin-bottom:.25em;}
.pcard .tag{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--sage-dark);
  display:block;margin-bottom:.5em;
}
.pcard p{color:var(--umber-body);font-size:.96rem;margin-bottom:0;}

/* --- price, borderless ---------------------------------------------------- */
.price{
  text-align:center;background:var(--white);border-radius:var(--radius);
  padding:38px 22px;position:relative;
}
.price .qty{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--sage-dark);
}
.price .amt{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:2.6rem;color:var(--umber);line-height:1;margin:.3em 0 .15em;
}
.price .each{font-size:.86rem;color:var(--umber-body);}
.price .flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--umber);color:var(--cream-ink);
  font-family:'Figtree',sans-serif;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
}

/* --- pills / chips -------------------------------------------------------- */
.pills{display:flex;gap:10px;flex-wrap:wrap;}
.center .pills{justify-content:center;}
.pill{
  display:inline-block;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;
  background:transparent;color:var(--umber);
  border:1.5px solid var(--umber);border-radius:999px;padding:7px 16px;
  text-decoration:none;
}
a.pill:hover{background:var(--umber);color:var(--cream-ink);}

.badge{
  display:inline-block;
  font-family:'Figtree',sans-serif;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  background:var(--white);color:var(--umber);
  padding:6px 14px;border-radius:999px;
}

/* --- definition rows ------------------------------------------------------ */
.rows{border-top:1.5px solid rgba(112,35,14,.16);}
.row{
  display:flex;justify-content:space-between;gap:20px;
  padding:17px 4px;border-bottom:1.5px solid rgba(112,35,14,.16);
}
.row dt{font-family:'Fraunces',serif;font-weight:600;color:var(--umber);margin:0;}
.row dd{margin:0;color:var(--umber-body);text-align:right;}
.sec-umber .rows{border-top-color:rgba(255,255,255,.22);}
.sec-umber .row{border-color:rgba(255,255,255,.22);}
.sec-umber .row dt{color:var(--cream-ink);}
.sec-umber .row dd{color:#e8dccd;}

/* --- numbered steps ------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:26px;}
.step{display:flex;gap:20px;align-items:flex-start;}
.step::before{
  counter-increment:step;content:counter(step);
  flex:0 0 auto;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;
  color:var(--sage-dark);
  width:40px;
}
.step h3{margin-bottom:.2em;}
.step p{margin-bottom:0;color:var(--umber-body);font-size:.97rem;}
.sec-umber .step p{color:#e8dccd;}
.sec-umber .step::before{color:#E0B39E;}

/* --- note (not a numbered step) ------------------------------------------ */
.note{
  background:var(--white);border-radius:var(--radius);
  padding:28px 26px;max-width:640px;margin:0 auto;text-align:center;
}
.note h3{margin-bottom:.3em;}
.note p:last-child{margin-bottom:0;}

/* --- photography --------------------------------------------------------- */
.photo-fig{margin:0;}
.photo-frame{border-radius:16px;overflow:hidden;background:var(--blush-block);}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center;}
.ph-4x5{aspect-ratio:4/5;}
.ph-3x2{aspect-ratio:3/2;}
.photo-frame img.ph-top{object-position:center 20%;}
.photo-fig figcaption{
  margin-top:10px;font-family:'Figtree',sans-serif;font-size:.85rem;
  color:var(--umber-body);text-align:center;
}
.sec-umber .photo-fig figcaption{color:#e8dccd;}
.hero-logo{width:min(340px,72vw);height:auto;margin:0 auto 22px;}
.hero-photo{max-width:700px;margin:38px auto 0;}
.photo-sm{max-width:340px;width:100%;margin-left:auto;margin-right:auto;}

/* --- menu step one (heading / photo / list reflow) ----------------------- */
.menu-step-one{
  display:grid;gap:24px 48px;align-items:start;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"head photo" "list photo";
}
.mso-head{grid-area:head;}
.mso-list{grid-area:list;display:grid;gap:22px;}
.mso-photo{grid-area:photo;align-self:center;max-width:400px;margin-left:auto;margin-right:auto;width:100%;}

/* --- forms --------------------------------------------------------------- */
.form{display:grid;gap:18px;}
.field{display:grid;gap:7px;}
.field label{
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--umber);
}
.field input,.field textarea,.field select{
  font-family:'Figtree',sans-serif;font-size:1rem;color:var(--umber-body);
  background:#fff;
  border:1.5px solid rgba(112,35,14,.25);border-radius:var(--radius);
  padding:13px 16px;width:100%;
  transition:border-color .16s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--umber);box-shadow:0 0 0 3px rgba(112,35,14,.14);
}
.field textarea{min-height:140px;resize:vertical;}
.field .hint{font-size:.83rem;color:var(--umber-body);}
.hp{position:absolute;left:-9999px;}
.opt-details summary{
  cursor:pointer;font-family:'Figtree',sans-serif;font-weight:600;font-size:.86rem;
  color:var(--terracotta);text-transform:uppercase;letter-spacing:.06em;
}
/* hero email field: bigger, and clears the nav plus its own label on scroll */
#po-email{font-size:1.1rem;padding:15px 18px;scroll-margin-top:124px;}

/* --- sticky mobile CTA (preorder pages) --------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--white);
  padding:10px 16px;display:flex;justify-content:center;
  box-shadow:0 -6px 20px rgba(112,35,14,.14);
}
.sticky-cta .btn{width:100%;justify-content:center;min-height:48px;}
@media (min-width:760px){.sticky-cta{display:none;}body.has-sticky-cta{padding-bottom:0;}}

/* --- footer -------------------------------------------------------------- */
footer{
  background:var(--umber);color:var(--cream-ink);
  padding:60px 0 40px;text-align:center;font-size:.92rem;
}
footer .flogo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px;}
footer .flogo img{height:60px;width:auto;}
footer .flogo span{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.3rem;
  color:var(--cream-ink);letter-spacing:-.01em;
}
footer .flinks{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
footer .flinks a{
  color:var(--cream-ink);text-decoration:none;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;
}
footer .flinks a:hover{color:#F0C18C;}
footer .fsocial a{
  display:inline-block;color:var(--cream-ink);text-decoration:none;
  font-family:'Figtree',sans-serif;font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;
  border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 24px;
  transition:background .16s ease;
}
footer .fsocial a:hover{background:rgba(255,255,255,.12);}
footer .legal{
  max-width:640px;margin:30px auto 0;
  color:#d7b997;font-size:.79rem;line-height:1.75;
}
footer .legal p{margin:.3em 0;}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:860px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  section{padding:68px 0;}
  .row{flex-direction:column;gap:2px;}
  .row dd{text-align:left;}
  /* photo drops BELOW the step heading, above the flavor list */
  .menu-step-one{grid-template-columns:1fr;grid-template-areas:"head" "photo" "list";}
  .mso-photo{max-width:420px;margin-left:auto;margin-right:auto;width:100%;}
}

@media (max-width:640px){
  body{font-size:16px;}

  /* mobile chrome diet: announcement bar off, nav to two compact rows */
  .announce{display:none;}
  .nav-inner{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"logo cta" "links links";
    align-items:center;column-gap:12px;row-gap:5px;
    padding:8px 16px;
  }
  .nav-logo{grid-area:logo;margin-right:0;gap:9px;}
  .nav-logo img{height:32px;}
  .wordmark .wm-a{font-size:.72rem;letter-spacing:.13em;}
  .wordmark .wm-b{font-size:.8rem;margin-top:2px;}
  .nav-cta{grid-area:cta;padding:9px 16px;font-size:.7rem;letter-spacing:.08em;}
  .nav-links{grid-area:links;display:flex;justify-content:space-between;gap:4px;}
  .nav-links a{font-size:.68rem;letter-spacing:.07em;padding:9px 2px;}

  section{padding:56px 0;}
  .page-head{padding:28px 0 40px;}
  .grid{gap:26px;}

  /* photos: 4:5 crop, capped height */
  .photo-frame{aspect-ratio:4/5;max-height:420px;}
  .hero-logo{width:min(258px,74vw);margin-bottom:18px;}
  .hero-photo{max-width:400px;margin-top:30px;}

  /* pricing: compact single-column rows, not three tall cards */
  .grid.pricing{gap:10px;}
  .price{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:14px;row-gap:0;text-align:left;padding:14px 18px;
  }
  .price .flag{position:static;transform:none;grid-column:1;grid-row:1;justify-self:start;margin-bottom:5px;}
  .price .qty{grid-column:1;}
  .price .each{grid-column:1;}
  .price .amt{grid-column:2;grid-row:1 / -1;align-self:center;font-size:1.85rem;margin:0;}
}