:root{
  --navy:#2a315e;
  --navy-deep:#1C223F;
  --gold:#e1be5a;
  --gold-soft:#e2bf5a;
  --cream:#FBF8F1;
  --cream-edge:#EDE6D8;
  --paper:#ffffff;
  --ink:#2a315e;
  --ink-soft:#4a5078;
  --rule:#D9D2C2;
  --white:#ffffff;
  --script:"Yellowtail",cursive;
  --display:"Quicksand","Trebuchet MS",sans-serif;
  --body:"Heebo","Helvetica Neue",Arial,sans-serif;
  --rail:1180px;
  --pad:20px;
  --gap-s:20px;
  --gap-m:50px;
  --gap-l:72px;
  --gap-xl:100px;
  --round:14px;
  --round-lg:26px;
  --pill:94px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--body);
  font-size:15px;
  font-weight:300;
  line-height:1.75;
}

img{max-width:100%;display:block;border:0;}

a{color:var(--gold);text-decoration:none;transition:color .25s ease,background-color .25s ease,border-color .25s ease;}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.2;}

p{margin:0 0 18px;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.rail{width:100%;max-width:var(--rail);margin:0 auto;padding:0 var(--pad);}

.site-head{
  background:var(--navy-deep);
  position:sticky;
  top:0;
  z-index:50;
}

.head-inner{
  max-width:var(--rail);
  margin:0 auto;
  padding:12px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
}

.head-logo img{height:44px;width:auto;}

.head-burger{width:26px;height:16px;position:relative;cursor:pointer;}

.head-burger span{
  position:absolute;left:0;width:100%;height:2px;background:var(--gold);
  transition:transform .25s ease,opacity .25s ease;
}

.head-burger .b1{top:0;}
.head-burger .b2{top:7px;}
.head-burger .b3{bottom:0;}

.burger-on .b1{top:7px;transform:rotate(45deg);}
.burger-on .b2{opacity:0;}
.burger-on .b3{bottom:auto;top:7px;transform:rotate(-45deg);}

.head-nav{
  display:none;
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--navy-deep);
  padding:6px var(--pad) 20px;
}

.head-nav.nav-on{display:block;}

.head-nav a{
  display:block;
  padding:9px 0;
  color:var(--white);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.head-nav a:hover,.head-nav .here{color:var(--gold);}

.banner-frame{position:relative;}

.banner-frame img{width:100%;height:280px;object-fit:cover;}

.banner-frame::after{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}

.tagline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:var(--gap-m) var(--pad);
  text-align:center;
}

.tagline h1,.tagline h2{
  color:var(--gold);
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.8;
}

.star-rule{flex:0 0 auto;width:74px;height:14px;stroke:var(--gold);fill:none;stroke-width:1;}

.gold-head{
  text-align:center;
  color:var(--gold);
  font-size:20px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:0 var(--pad) var(--gap-s);
}

.card-wrap{padding:0 var(--pad) var(--gap-l);}

.card{
  max-width:var(--rail);
  margin:0 auto;
  background:var(--cream);
  border-radius:var(--round-lg);
  padding:28px 20px 40px;
  color:var(--ink-soft);
}

.card-top-pair{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:38px;
}

.card-top-pair img{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:var(--round);
}

.chapter{margin:0 0 46px;}

.chapter-title{
  font-family:var(--script);
  color:var(--navy);
  font-size:32px;
  line-height:1.1;
  font-weight:400;
  margin:0 0 20px;
}

.chapter-note{
  font-size:13px;
  font-style:italic;
  margin:0 0 22px;
}

.chapter p{font-size:14px;}

.menu-block{
  display:flex;
  gap:14px;
  align-items:stretch;
  margin-bottom:26px;
}

.menu-tab{
  flex:0 0 32px;
  background:var(--navy);
  color:var(--gold);
  border-radius:var(--pill);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 0;
}

.menu-tab span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
}

.menu-list{flex:1 1 auto;min-width:0;}

.menu-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:9px 0 4px;
}

.menu-desc{
  margin:0 0 6px;
  padding-bottom:9px;
  border-bottom:1px dashed var(--rule);
  font-size:12.5px;
  font-style:italic;
  line-height:1.55;
}

.menu-no{
  color:var(--navy);
  font-family:var(--display);
  font-size:13px;
  font-weight:500;
  flex:0 0 auto;
}

.menu-name{
  color:var(--navy);
  font-family:var(--display);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.menu-dots{flex:1 1 auto;border-bottom:1px dotted var(--rule);transform:translateY(-3px);}

.menu-price{
  color:var(--navy);
  font-family:var(--display);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

.thumb-strip{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:18px 0 0;
}

.thumb-strip img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:10px;
}

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
  margin-bottom:46px;
}

.split img{width:100%;height:240px;object-fit:cover;border-radius:var(--round);}

.split-copy h3{
  font-family:var(--script);
  color:var(--navy);
  font-size:28px;
  font-weight:400;
  margin-bottom:16px;
}

.split-copy p{font-size:14px;}

.numbered{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:10px;
}

.numbered-item{
  border-top:1px solid var(--rule);
  padding-top:14px;
}

.num{
  font-family:var(--display);
  font-weight:500;
  color:var(--gold);
  background:var(--navy);
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  margin-bottom:12px;
}

.numbered-item h4{
  color:var(--navy);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.numbered-item p{font-size:13.5px;margin:0;}

.icon-set{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

.icon-cell svg{
  width:26px;height:26px;
  stroke:var(--navy);
  fill:none;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:10px;
}

.icon-cell h4{
  color:var(--navy);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.icon-cell p{font-size:13.5px;margin:0;}

.pull{
  text-align:center;
  padding:var(--gap-m) var(--pad);
}

.pull blockquote{
  margin:0 auto 12px;
  max-width:640px;
  font-family:var(--script);
  color:var(--gold);
  font-size:23px;
  line-height:1.5;
}

.pull .who{
  margin:0;
  color:var(--white);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.mosaic{padding:0 var(--pad) var(--gap-l);}

.mosaic-grid{
  max-width:var(--rail);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:86px;
  gap:12px;
}

.mosaic-grid img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:var(--round);
}

.m-a{grid-column:span 2;grid-row:span 2;}
.m-b{grid-column:span 2;grid-row:span 1;}
.m-c{grid-column:span 1;grid-row:span 2;}
.m-d{grid-column:span 1;grid-row:span 1;}
.m-e{grid-column:span 2;grid-row:span 2;}
.m-f{grid-column:span 4;grid-row:span 2;}

.info-pill{
  max-width:var(--rail);
  margin:0 auto var(--gap-s);
  background:var(--cream);
  border-radius:var(--pill);
  padding:20px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  color:var(--navy);
  font-size:13px;
}

.info-pill a{color:var(--navy);}
.info-pill a:hover{color:var(--ink-soft);}

.allergy-note{
  max-width:820px;
  margin:0 auto;
  background:rgba(255,255,255,.08);
  border-radius:var(--round);
  padding:16px 22px;
  text-align:center;
  font-size:11.5px;
  font-style:italic;
  letter-spacing:.04em;
  color:var(--white);
}

.strip-cta{
  text-align:center;
  padding:var(--gap-l) var(--pad);
}

.strip-cta h3{
  color:var(--gold);
  font-size:15px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:22px;
}

.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--navy);
  border:1px solid var(--white);
  border-radius:var(--pill);
  padding:12px 32px;
  font-family:var(--display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.btn:hover{background:var(--navy-deep);color:var(--gold);}

.legal-body{
  max-width:820px;
  margin:0 auto;
  padding:0 var(--pad) var(--gap-l);
}

.legal-body h1{
  color:var(--gold);
  font-size:26px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
  text-align:center;
}

.legal-stamp{
  text-align:center;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:34px;
}

.legal-text{
  background:var(--cream);
  border-radius:var(--round-lg);
  padding:30px 24px;
  color:var(--ink-soft);
}

.legal-text p{font-size:14px;}
.legal-text p:last-child{margin-bottom:0;}

.site-foot{
  background:var(--navy-deep);
  padding:var(--gap-l) var(--pad) 34px;
  text-align:center;
}

.foot-logo img{height:64px;width:auto;margin:0 auto 26px;}

.foot-lines{
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:26px;
}

.foot-lines p{margin:0 0 6px;}

.foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  margin-bottom:26px;
}

.foot-nav a{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white);
}

.foot-nav a:hover{color:var(--gold);}

.foot-base{
  font-size:10.5px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}

.foot-base p{margin:0;}

@media (min-width:600px){
  .card-top-pair{grid-template-columns:1fr 1fr;}
  .thumb-strip{grid-template-columns:repeat(4,1fr);}
  .icon-set{grid-template-columns:repeat(2,1fr);}
  .numbered{grid-template-columns:repeat(2,1fr);gap:26px;}
  .banner-frame img{height:380px;}
  .mosaic-grid{grid-auto-rows:110px;}
  .info-pill{flex-direction:row;justify-content:center;gap:32px;}
}

@media (min-width:900px){
  body{font-size:16px;}
  .head-burger{display:none;}
  .head-nav{
    display:flex;
    position:static;
    background:none;
    padding:0;
    gap:28px;
    align-items:center;
  }
  .head-nav a{padding:0;font-size:10.5px;}
  .banner-frame img{height:560px;}
  .banner-frame::after{inset:26px;}
  .tagline{padding:var(--gap-l) var(--pad);gap:28px;}
  .tagline h1,.tagline h2{font-size:16px;}
  .star-rule{width:150px;height:18px;}
  .gold-head{font-size:24px;padding-bottom:var(--gap-m);}
  .card{padding:46px 54px 60px;}
  .card-top-pair img{height:280px;}
  .chapter{margin-bottom:64px;}
  .chapter-title{font-size:40px;}
  .menu-tab{flex-basis:38px;}
  .split{grid-template-columns:1fr 1fr;gap:44px;margin-bottom:64px;}
  .split img{height:400px;}
  .split-copy h3{font-size:34px;}
  .numbered{grid-template-columns:repeat(4,1fr);}
  .icon-set{grid-template-columns:repeat(4,1fr);gap:28px;}
  .mosaic-grid{grid-auto-rows:128px;}
  .pull{padding:var(--gap-l) var(--pad);}
  .pull blockquote{font-size:29px;}
  .legal-text{padding:48px 54px;}
  .legal-body h1{font-size:32px;}
  .site-foot{padding-top:var(--gap-xl);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

.hero{
  background:var(--navy);
  padding:34px var(--pad) var(--gap-m);
}

.hero-inner{
  max-width:var(--rail);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}

.hero-shot{position:relative;}

.hero-shot img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:var(--round-lg);
}

.hero-shot::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:16px;
  pointer-events:none;
}

.hero-eyebrow{
  color:var(--gold);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.hero-copy h1{
  color:var(--white);
  font-size:32px;
  line-height:1.15;
  margin-bottom:18px;
}

.hero-line{
  color:rgba(255,255,255,.82);
  font-size:15px;
  max-width:48ch;
  margin-bottom:20px;
}

.hero-stars{margin-bottom:26px;}

.hero-stars .star-rule{width:150px;}

@media (min-width:900px){
  .hero{padding:var(--gap-m) var(--pad) var(--gap-l);}
  .hero-inner{grid-template-columns:1fr 1fr;gap:56px;}
  .hero-copy h1{font-size:46px;}
  .hero-line{font-size:16px;}
}