/* ==========================================================================
   THE COASTAL CREAMERY
   Colors and type are taken from Jhon's source vectors and menu boards.
   Everything you'd want to tune lives in :root below.
   ========================================================================== */

:root {
  /* --- brand palette (sampled from the supplied SVGs) --- */
  --cream:      #fff8f1;
  --brown:      #634d3d;
  --aqua:       #84c0c9;
  --pink-pale:  #f7a8b6;   /* stripes + the Scoop lockup */
  --pink-hot:   #eb3f7c;   /* subheads */
  --ink:        #231f20;   /* toppings board */

  /* --- typography --- */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;  /* Neulis stand-in, CAPS only */
  --serif:   "Source Serif 4", Georgia, serif;               /* item names + prices */
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;   /* descriptions, small copy */

  /* --- dials you may actually want to move --- */
  --hero-width:   52vw;    /* Scoop artwork as a share of viewport width */
  --hero-max:     1000px;
  --hero-reserve: calc(236px + 2.1vw);  /* header + descriptor + info + buttons */
  --stripe-pitch: 18.51vw; /* back_lines.svg pitch: 18.51% of width */
  --board-max:    1020px;
  --cat-size:     clamp(21px, 2vw, 31px);  /* category headings */

  /* menu type scale — four sizes, no others */
  --fs-name:      clamp(15px, 1.3vw, 19px);    /* sundae + build-your-own titles */
  --fs-item:      clamp(14px, 1.12vw, 17px);   /* item names and every price */
  --fs-body:      clamp(11.5px, 0.9vw, 13px);  /* descriptions, toppings, notes */
  --fs-micro:     clamp(9px, 0.72vw, 10.5px);  /* subheads and labels */
  --price-gap:    clamp(20px, 2.2vw, 34px);
  --frame-w:      48px;    /* keyline corner scale */

  /* the artwork is 1.0652:1, so height is the real constraint on a short screen.
     this keeps the hero as large as the viewport allows without pushing the
     business info below the fold. */
  --hero-w: min(var(--hero-width),
                calc((100vh - var(--hero-reserve)) * 1.0652),
                var(--hero-max));
}

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

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

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--brown);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ==========================================================================
   HEADER  — logo upper left, nav upper right. Cream bar on both pages so the
   logo always sits on its own ground.
   ========================================================================== */

.site-head {
  position: relative;
  z-index: 2;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(11px, 1.25vh, 15px) clamp(20px, 3.4vw, 52px);
}

.brand { display: block; flex: none; }
.brand img { height: clamp(30px, 2.9vw, 42px); width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover { color: var(--pink-hot); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--aqua); }

.nav-social {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 17px);
  margin-left: clamp(2px, 0.6vw, 8px);
}

/* masked, not <img>, so the glyph takes currentColor and hovers with the nav */
.icon {
  display: block;
  width: clamp(17px, 1.35vw, 19px);
  aspect-ratio: 1;
  border-bottom: 0;
  padding-bottom: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: background-color 0.15s;
}
.icon:hover { background-color: var(--pink-hot); }
.icon-ig { -webkit-mask-image: url("../assets/instagram.svg"); mask-image: url("../assets/instagram.svg"); }
.icon-fb { -webkit-mask-image: url("../assets/facebook.svg");  mask-image: url("../assets/facebook.svg"); }

/* ==========================================================================
   HOME
   ========================================================================== */

.page-home {
  background-image: url("../assets/sprinkles.svg");
  background-repeat: repeat;
  background-size: 1600px 1000px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4px, 1vh, 18px) clamp(20px, 3.4vw, 52px) clamp(28px, 4.4vh, 58px);
}

/* --- the hero. This is the whole page. --- */
.hero {
  width: var(--hero-w);
  min-width: 300px;
  margin: 0;
}
.hero img { width: 100%; height: auto; }

/* --- descriptor, snug under the artwork --- */
.descriptor {
  margin: clamp(5px, 0.8vh, 12px) auto 0;
  max-width: var(--hero-w);
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(9.5px, 0.9vw, 13px);
  letter-spacing: 0.12em;
  line-height: 1.62;
  text-transform: uppercase;
  color: var(--brown);
}
.descriptor .dot { color: var(--aqua); }
.descriptor > span { white-space: nowrap; }

/* --- VISIT / HOURS / CALL, on its own cream band --- */
.home-info {
  background: var(--cream);
  padding: clamp(16px, 2.2vh, 28px) clamp(20px, 3.4vw, 52px) clamp(13px, 1.7vh, 21px);
}

.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 3.2vw, 48px);
  margin-top: 0;
}

.info-block { min-width: 0; }

.info-label {
  margin: 0 0 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--pink-hot);
}

.info-value {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.36;
}
.info-value a { text-decoration: none; }
.info-value a:hover { color: var(--pink-hot); }

/* --- buttons --- */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 9px;
}

.btn {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid transparent;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-solid { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--brown); border-color: var(--aqua); }
.btn-ghost:hover { background: var(--aqua); border-color: var(--aqua); }

/* ==========================================================================
   MENU  — pink stripes are the page ground; the board sits on top of them.
   Stripe pitch and duty cycle are back_lines.svg's own geometry (18.51% pitch,
   40.31% stripe), expressed in vw so the stripe COUNT matches the source file
   at any viewport and only their length changes.
   ========================================================================== */

.page-menu {
  min-height: 100vh;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
      90deg,
      var(--pink-pale) 0,
      var(--pink-pale) calc(var(--stripe-pitch) * 0.4031),
      transparent        calc(var(--stripe-pitch) * 0.4031),
      transparent        var(--stripe-pitch));
}

.menu-wrap { padding: clamp(72px, 7.5vh, 110px) clamp(16px, 2.6vw, 44px) clamp(96px, 11vh, 156px); }

/* --- ONE board. No cards, no shadows, no per-category frames. --- */
.board {
  position: relative;
  max-width: var(--board-max);
  margin: 0 auto;
  background: var(--cream);
  padding: clamp(34px, 3.4vw, 48px) clamp(30px, 3.2vw, 46px) clamp(38px, 3.8vw, 52px);
}

/* the notched aqua keyline, as one continuous frame around the whole board.
   drawn as an overlay so it never constrains the content grid. */
.board::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.8vw, 12px);
  border: var(--frame-w) solid transparent;
  border-image: url("../assets/frame.svg") 60 stretch;
  pointer-events: none;
}

/* Every priced list in a column shares one set of tracks, so the prices line
   up down the whole quadrant instead of each list sizing itself. The third
   track is filler, so headings, descriptions and the toppings list still get
   the full column width. */
.col {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: var(--price-gap);
  align-content: start;
}
.col > *,
.cat > * { grid-column: 1 / -1; }
.cat { display: grid; grid-template-columns: subgrid; column-gap: var(--price-gap); }
.rows, .plaque { display: grid; grid-template-columns: subgrid; grid-column: 1 / 3; }
.rows { row-gap: 6px; }
.rows .row, .plaque .row { display: contents; }
.price { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Two across, two down, divided by a cross in the same aqua keyline as the
   board frame. The gutters are padding rather than grid gap so the rules land
   dead centre between the columns, and the quadrants read as one divided board
   instead of four things sharing a page.
   Line hierarchy: board frame > this cross > section rules > heading rules. */
.board-grid {
  --gut-x: clamp(22px, 2.6vw, 40px);
  --gut-y: clamp(26px, 2.8vw, 42px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.col { min-width: 0; }
.col:nth-child(odd)  { padding-right: var(--gut-x); border-right: 2px solid var(--pink-pale); }
.col:nth-child(even) { padding-left:  var(--gut-x); }
.col--top    { padding-bottom: var(--gut-y); }
.col--bottom { padding-top:    var(--gut-y); border-top: 2px solid var(--pink-pale); }

/* stacked categories inside a quadrant get their own, lighter division */
.cat + .cat { margin-top: clamp(22px, 2.4vw, 34px); }
.cat + .cat::before {
  content: "";
  grid-column: 1 / -1;
  justify-self: start;
  width: min(100%, 360px);
  height: 0;
  border-top: 1px solid var(--pink-pale);
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

/* Rule alignment. Only the FIRST heading in each column needs to line up with
   its neighbour across the row, so only that one gets a reserved height — and
   only as much as that row actually needs, so nothing else opens a gap.
   Top row headings are one line plus a subhead; bottom row is Sundaes at two
   lines against Toppings at one. If you add or remove a subhead up there,
   these two numbers are what to adjust. */
.cat-head { min-height: 0; padding-bottom: 9px; }
.col--top    > .cat:first-child .cat-head { min-height: calc(var(--cat-size) + 34px); }
.col--bottom > .cat:first-child .cat-head { min-height: calc(var(--cat-size) * 2 + 9px); }

.cat-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--cat-size);
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--aqua);
}

.cat-sub {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink-hot);
}

/* the dot-line-dot divider from the physical boards */
.rule {
  width: clamp(46px, 4.6vw, 66px);
  height: 6px;
  margin: 0 0 15px;
  background-image:
    radial-gradient(circle at 3px 50%, var(--aqua) 3px, transparent 3.1px),
    radial-gradient(circle at calc(100% - 3px) 50%, var(--aqua) 3px, transparent 3.1px),
    linear-gradient(var(--aqua), var(--aqua));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 1.5px;
  background-position: 0 0, 0 0, 0 center;
}

/* --- priced rows ---
   The price sits in its own column, sized to the widest price and set right
   next to the longest item name, so the pair reads as one line instead of a
   name and a number at opposite ends of the column. The list shrinks to its
   own content and leaves the air on the right, which is how the physical
   boards are set. */
.rows {
  display: grid;
  font-family: var(--serif);
  font-size: var(--fs-item);
  line-height: 1.26;
}

.note {
  margin: 1px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.3;
}

.addon-label {
  margin: 15px 0 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink-hot);
}


/* the little notched plaque around Pint, as on the board */
.plaque {
  position: relative;
  margin-top: 16px;
  margin-right: -15px;
  padding: 8px 15px;
  font-family: var(--serif);
  font-size: var(--fs-item);
  font-weight: 700;
  line-height: 1.26;
}
.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 20px solid transparent;
  border-image: url("../assets/frame-sm.svg") 20 stretch;
  pointer-events: none;
}


/* --- signature sundaes --- */
.sundae { margin-top: clamp(16px, 1.7vw, 24px); }
.sundae:first-of-type { margin-top: 0; }

.sundae-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: clamp(280px, 29vw, 400px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: 1.14;
}
.sundae-head .price { font-weight: 400; font-size: var(--fs-item); }

.sundae-body { display: flex; gap: 13px; align-items: flex-start; margin-top: 5px; }
.sundae-icon { flex: none; width: clamp(32px, 3vw, 44px); }
.sundae-icon img { width: 100%; height: auto; }

.sundae-desc {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.byo { margin-top: clamp(20px, 2.2vw, 32px); }
/* the build-your-own line is a different kind of item to the named sundaes
   above it, so it gets the same quiet division as everything else */
.col--bottom .byo {
  padding-top: clamp(20px, 2.2vw, 32px);
  border-top: 1px solid var(--pink-pale);
}
.byo-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: 1.14;
}
.byo-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 2.6vw, 40px);
  max-width: 400px;
}
.byo-line p {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.byo-line .price {
  font-family: var(--serif);
  font-size: var(--fs-item);
}

/* --- toppings. These are add-ons, not headline items, so this is the quietest
   block on the board: same cream ground as everything else, set in the body
   face rather than the display face, flowed into columns so it reads as one
   compact field instead of a long commanding list. --- */
.topping-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(18px, 2vw, 32px);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.82;
  color: var(--brown);
}
.topping-list li { break-inside: avoid; }

.topping-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(18px, 1.9vw, 26px);
  padding-top: clamp(18px, 1.9vw, 26px);
  border-top: 1px solid var(--pink-pale);
}
.topping-split .topping-list { columns: 1; }

.topping-group-title {
  margin: 0 0 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink-hot);
}

.order-cta {
  margin-top: clamp(30px, 3.2vw, 46px);
  padding-top: clamp(26px, 2.8vw, 40px);
  border-top: 1px solid var(--pink-pale);
  text-align: center;
}

/* --- footer --- */
.site-foot {
  padding: clamp(32px, 3.8vh, 54px) clamp(20px, 3.4vw, 52px) clamp(44px, 5.4vh, 76px);
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--brown);
  background: var(--cream);
}
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--pink-hot); }
.site-foot .sep { color: var(--aqua); padding: 0 8px; }
.foot-inner { display: inline-block; }

/* ==========================================================================
   RESPONSIVE  — 2x2 -> single column. Stripes hold their proportion throughout.
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --frame-w: 44px; }
  :root { --fs-item: clamp(14.5px, 1.7vw, 17px); --fs-body: clamp(12px, 1.35vw, 13.5px); }
  .topping-list { columns: 2; }
}

@media (max-width: 820px) {
  :root { --frame-w: 40px; }

  /* single column: the cross collapses to horizontal divisions only */
  .board-grid { grid-template-columns: 1fr; }
  .col:nth-child(odd)  { padding-right: 0; border-right: 0; }
  .col:nth-child(even) { padding-left: 0; }
  .col--top    { padding-bottom: 0; }
  .col--bottom { padding-top: 0; border-top: 0; }
  .col + .col  { margin-top: 30px; padding-top: 30px; border-top: 2px solid var(--pink-pale); }
  .col--top > .cat:first-child .cat-head,
  .col--bottom > .cat:first-child .cat-head { min-height: 0; padding-bottom: 9px; }
  .board { padding: 42px 34px 46px; }

  /* hero stays big — scaled, not shrunk to a logo */
  .hero { width: 88vw; }
  .descriptor { max-width: 90vw; font-size: 11px; letter-spacing: 0.11em; }

  .info { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 320px; margin-top: 4px; }
  .btn { text-align: center; }

  .site-head { padding: 14px 20px; }
  .site-nav { gap: 14px; font-size: 11px; letter-spacing: 0.12em; }
  .nav-social { gap: 11px; }

  :root { --cat-size: 26px; --fs-item: 17px; --fs-name: 19px; --fs-body: 14px; }
}

@media (max-width: 560px) {
  .topping-list { columns: 2; column-gap: 12px; font-size: 12.5px; line-height: 1.7; }
  .topping-split { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

@media (max-width: 400px) {
  .site-nav { gap: 12px; font-size: 10px; }
  .brand img { height: 26px; }
  .board { padding: 40px 24px 44px; }
  .topping-list { font-size: 12px; }
}

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