/* Sea Salt & Butter, "A note to Chelle" (25 Oct 2026, in her own colours 26 Oct).
   The colours are her shop's: the navy of her sign and painted cladding, the butter yellow of the lettering on it,
   the soft blue of the chalk on her welcome board, and the pale pine she lined the inside with (img/cladding.webp
   draws that wall from her photo of it): the opening's photo hangs on it, and Made with love's photos too.
   Brygada 1918 for anything in her voice or yours, Familjen Grotesk for the plain bits. Butter yellow is spent on
   the one thing to press: the Order button to her Lightspeed ordering page. */
:root {
  --white: #FFFFFF;
  --wash: #EAF1F5;      /* the pale stripe of her awning */
  --navy: #1A3552;      /* her sign and shopfront */
  --navy-2: #24476B;
  --soft: #55667A;
  --rule: #E1E8ED;
  --edge: #C9D4DC;
  --butter: #F1DD6C;    /* the letters on her sign */
  --butter-hi: #F7E68E;
  --chalk: #329BBE;     /* "Sea Salt" in chalk on her board; only for big words, it's too light for small ones */
  --sea: #23739A;       /* the same blue, deep enough for small words */
  --err: #B03A2E;
  --display: 'Brygada 1918', Georgia, 'Times New Roman', serif;
  --text: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gut: clamp(16px, 4vw, 56px);
  /* her pine wall (img/cladding.webp, drawn by tools/cladding.py: long boards, fine grooves, a few small knots),
     with soft daylight falling across it from the top left */
  --wood: #EFDFC4;
  --wood-img: url(img/cladding.webp);
  --wood-size: 2400px 1152px;
  --daylight: radial-gradient(ellipse 120% 90% at 0% 0%, rgba(255, 252, 243, .62), rgba(255, 252, 243, .22) 42%, rgba(255, 252, 243, 0) 72%),
    linear-gradient(150deg, rgba(110, 76, 40, 0) 40%, rgba(110, 76, 40, .1));
  /* light from the top left, so anything hanging on the wall throws its shadow down and to the right */
  --hang: 14px 22px 34px -14px rgba(84, 56, 26, .42), 3px 4px 8px rgba(84, 56, 26, .16);
  /* a scatter of sea salt flakes, for bakes that don't have a photo yet */
  --flakes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Cpath d='M22 30l6-2 2 5-5 3z' opacity='.55'/%3E%3Cpath d='M70 12l4 1-1 4-4-1z' opacity='.35'/%3E%3Cpath d='M118 40l7 1-2 5-6-2z' opacity='.5'/%3E%3Cpath d='M180 22l5 2-3 4-3-3z' opacity='.4'/%3E%3Cpath d='M40 84l4-2 3 4-5 2z' opacity='.3'/%3E%3Cpath d='M96 96l6 2-3 5-4-3z' opacity='.55'/%3E%3Cpath d='M160 78l4 0 0 4-4 1z' opacity='.35'/%3E%3Cpath d='M204 112l5-1 1 5-5 1z' opacity='.45'/%3E%3Cpath d='M14 150l6 1-2 5-5-2z' opacity='.4'/%3E%3Cpath d='M66 138l3-2 3 3-4 3z' opacity='.5'/%3E%3Cpath d='M132 152l7-1 0 5-6 1z' opacity='.35'/%3E%3Cpath d='M186 170l4 2-2 4-4-2z' opacity='.55'/%3E%3Cpath d='M48 196l5 0 0 4-5 1z' opacity='.45'/%3E%3Cpath d='M104 204l4-2 2 4-4 2z' opacity='.3'/%3E%3Cpath d='M150 116l3 1-1 3-3-1z' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
/* anything switched off stays off, whatever display its class gives it (the header's Order button, Christmas) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
main { overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--navy); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
h1, h2, h3, p, li, dd, dt, summary, a { overflow-wrap: break-word; }
/* her words can run to more than one paragraph anywhere */
.love__text p + p, .notts__text p + p, .visit__words p + p, .reply__text p + p, .faq details p + p, .mast__intro p + p,
.soda__about p + p, .soc__about p + p, .post__text p + p { margin-top: .8em; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.wrap { width: min(1280px, 100% - 2 * var(--gut)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; z-index: 99; }
.skip:focus { top: 12px; }
.small { font-size: 14px; color: var(--soft); }
.preview-note { margin: 0; text-align: center; font-size: 13px; color: var(--soft); background: var(--wash); padding: 7px 16px; }

/* buttons: plain words, an arrow that moves when you point at it */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--navy); color: var(--white); border: 0; border-radius: 4px; padding: 15px 22px; font: 600 15.5px/1 var(--text); text-decoration: none; transition: background .2s; white-space: nowrap; }
.btn::after { content: '\2192'; transition: transform .3s var(--ease); }
.btn:hover { background: var(--navy-2); }
.btn:hover::after { transform: translateX(4px); }
/* the ones to press, in the yellow of her sign: every Order button */
.btn--butter { background: var(--butter); color: var(--navy); }
.btn--butter:hover { background: var(--butter-hi); }
/* no ordering page yet: it says so, and goes nowhere */
.btn--soon, .btn--soon:hover { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1px var(--edge); cursor: default; }
.btn--soon::after { content: none; }
.notts .btn--soon, .events .btn--soon, .glass--deep .btn--soon { color: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
/* a quieter one beside the main button */
.btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.btn--line:hover { background: var(--wash); }
.kicker { font: 600 14px/1.2 var(--text); color: var(--sea); margin-bottom: 14px; }

/* the top */
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 0 18px; }
.logo { font: 600 25px/1 var(--display); text-decoration: none; letter-spacing: -.005em; }
.logo span { display: block; }
.logo small { display: block; font: 500 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-top: 6px; }
.top__order { padding: 12px 16px; font-size: 14.5px; }
/* the four pages as tabs, lettered in butter yellow on a navy band like her sign; the page you're on is cut out of the
   band in white, so it runs straight into the page below it */
.tabs { background: var(--navy); }
.tabs__in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; padding-top: 10px; }
.tabs a { display: flex; align-items: center; min-height: 48px; padding: 12px 18px 13px; border-radius: 4px 4px 0 0; color: var(--butter); font: 600 17px/1.15 var(--display); letter-spacing: .005em; text-decoration: none; transition: background .2s; }
.tabs a:hover { background: rgba(255, 255, 255, .09); }
.tabs a[aria-current="page"] { background: var(--white); color: var(--navy); }
.tabs a:focus-visible { outline-color: var(--butter); outline-offset: -5px; }
.tabs a[aria-current="page"]:focus-visible { outline-color: var(--sea); }

/* ---------- the opening: a note to Chelle, and her reply ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-areas: "ct photo" "h1 photo" "reply photo" "go photo" "cb cb";
  grid-template-rows: auto auto auto 1fr auto; column-gap: clamp(28px, 5.5vw, 96px);
  min-height: min(calc(100svh - 170px), 980px); padding: clamp(18px, 4vh, 48px) 0 18px; }
.hero__words { display: contents; }
.corners { display: flex; justify-content: space-between; gap: 16px; font: 500 12.5px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.corners--top { grid-area: ct; align-self: start; }
.corners--bottom { grid-area: cb; padding-top: 26px; }
.live { color: var(--sea); display: inline-flex; align-items: center; gap: 8px; }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.4s ease-in-out infinite; }
.live.closed::before { animation: none; opacity: .5; }
@keyframes pulse { 50% { opacity: .25; } }
.hero h1 { grid-area: h1; align-self: end; font: 500 clamp(46px, 6.5vw, 108px)/.98 var(--display); letter-spacing: -.018em; margin-top: clamp(20px, 6vh, 70px); }
.hero__ask { display: block; }
.hero__typed { display: block; color: var(--chalk); min-height: 1.96em; }
.caret { display: inline-block; width: .05em; height: .74em; background: currentColor; margin-left: .05em; vertical-align: -.04em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* her wood runs from the top of the opening to the edge of the screen, and the photo hangs on it like a print */
.hero { --bleed: calc((min(1280px, 100vw - 2 * var(--gut)) - 100vw) / 2); --mount: clamp(24px, 4.4vw, 76px); }
.hero::before { content: ''; grid-area: photo; margin-right: var(--bleed); border-radius: 6px 0 0 6px; background: var(--daylight), var(--wood-img) 0 0 / var(--wood-size) var(--wood); }
.hero__photo { grid-area: photo; align-self: stretch; position: relative; z-index: 1; min-height: 520px; margin: var(--mount) calc(var(--bleed) + var(--mount)) var(--mount) var(--mount); overflow: hidden; border-radius: 4px; background: var(--wash); box-shadow: var(--hang); }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.1s ease; }
.hero__photo img.on { opacity: 1; animation: drift 8s ease-out forwards; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.hero__tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: var(--white); color: var(--navy); font: 600 13.5px/1 var(--text); padding: 10px 12px; border-radius: 4px; transition: opacity .4s; }
.hero__go { grid-area: go; align-self: start; margin-top: clamp(22px, 3.4vh, 34px); }

/* her reply: a face, "Chelle", the dots while she's typing, then her words */
.reply { grid-area: reply; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 600px; margin-top: clamp(18px, 3vh, 30px); opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--ease); }
.reply.typing, .reply.said, .reply--in { opacity: 1; transform: none; }
.reply__face { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.reply__who { font: 600 13px/1 var(--text); letter-spacing: .03em; color: var(--sea); margin: 4px 0 8px; }
.reply__dots { display: none; gap: 5px; padding: 8px 0; }
.reply__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); opacity: .35; animation: dot 1.1s ease-in-out infinite; }
.reply__dots i:nth-child(2) { animation-delay: .15s; }
.reply__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: .8; } }
.reply.typing .reply__dots { display: flex; }
.reply.typing .reply__text { display: none; }
.reply__text { font: 400 clamp(18px, 1.45vw, 22px)/1.45 var(--display); }
.reply.said .reply__text { animation: said .6s var(--ease); }
@keyframes said { from { opacity: 0; transform: translateY(6px); } }
.sig { color: var(--sea); white-space: nowrap; }

/* ---------- this week's bakes ---------- */
.bakes { padding-top: clamp(60px, 10vh, 120px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--navy); padding-top: 16px; margin-bottom: clamp(22px, 3vw, 36px); }
.sec-head h2 { font: 500 clamp(34px, 3.8vw, 58px)/1.04 var(--display); letter-spacing: -.012em; }
.sec-head p { color: var(--soft); max-width: 44ch; text-align: right; font-size: 15.5px; }
.sec-head b { color: var(--navy); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3vw, 44px) clamp(14px, 1.8vw, 26px); }
.card { position: relative; display: flex; flex-direction: column; transition: opacity .45s ease; }
@media (hover: hover) { .grid.pointing .card:not(.hot) { opacity: .42; } }
.card--pick { grid-column: span 2; grid-row: span 2; }
.card__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--wash); transition: background .5s; }
.card.hot .card__frame:not(.no-photo) { background: var(--flav, var(--navy)); }
.card--pick .card__frame { flex: 1; aspect-ratio: auto; min-height: 440px; }
.card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 10%; transition: transform .7s var(--ease), border-radius .7s var(--ease), filter .5s, opacity .5s; }
.card.hot .card__frame img { transform: scale(.72); border-radius: 4px; }
.card__made { position: absolute; left: 9%; right: 9%; bottom: 4.5%; color: #fff; font: 500 13.5px/1.35 var(--text); opacity: 0; transform: translateY(10px); transition: opacity .45s .12s, transform .45s .12s var(--ease); }
.card__made b { display: block; font: 600 11.5px/1 var(--text); letter-spacing: .09em; text-transform: uppercase; opacity: .78; margin-bottom: 5px; }
.card--pick .card__made { font-size: 16px; left: 9%; right: 9%; }
.card.hot .card__made { opacity: 1; transform: none; }
.card__chip { position: absolute; top: 12px; z-index: 2; font: 600 12.5px/1 var(--text); padding: 8px 10px; border-radius: 3px; }
.card__chip--pick { left: 12px; background: var(--white); color: var(--navy); }
.card h3 { font: 600 clamp(19px, 1.5vw, 23px)/1.18 var(--display); margin: 14px 0 4px; }
.card--pick h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; }
.card .desc { font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.card--pick .desc { font: 400 clamp(17px, 1.3vw, 20px)/1.45 var(--display); color: var(--navy); max-width: 40ch; }
.card__row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.price { font: 600 16px/1 var(--text); font-variant-numeric: tabular-nums; }
.left { font-size: 13.5px; color: var(--soft); }
.soldout { margin-left: auto; font: 600 14px/1 var(--text); color: var(--soft); }
.card.out .card__frame img { filter: grayscale(1); opacity: .7; }
.closed-note { margin-left: auto; font: 500 13.5px/1.3 var(--text); color: var(--soft); text-align: right; }
/* bakes without a photo yet: her navy, a scatter of sea salt, the name in yellow like her sign */
.card__frame.no-photo { background: var(--navy) var(--flakes) 0 0 / 124px 124px; display: flex; flex-direction: column; justify-content: flex-end; padding: 8% 9%; }
.card__frame.no-photo { container-type: inline-size; }
.card__frame.no-photo strong { font: 500 clamp(26px, 2.4vw, 36px)/1.05 var(--display); font-size: min(clamp(26px, 2.4vw, 36px), 17cqi); color: var(--butter); overflow-wrap: anywhere; }
.card--pick .card__frame.no-photo strong { font-size: clamp(40px, 4vw, 64px); font-size: min(clamp(40px, 4vw, 64px), 17cqi); }
.card__frame.no-photo small { font: 500 12.5px/1 var(--text); color: rgba(255,255,255,.6); margin-top: 10px; }
.card__frame.no-photo .card__made { position: static; opacity: 1; transform: none; margin-top: 12px; color: rgba(255,255,255,.85); }
.card__frame.no-photo .card__made b { display: none; }

/* things come into focus as you reach them */
.js [data-reveal], .js .card { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity .9s ease, transform .9s var(--ease), filter .9s ease; transition-delay: var(--d, 0s); }
.js [data-reveal].in, .js .card.in { opacity: 1; transform: none; filter: none; }
.js .card.in { transition: opacity .45s ease, transform .9s var(--ease), filter .9s ease; transition-delay: 0s; }

/* ---------- made with love: her photos on her own wood, either side of her tagline, near ones drifting faster than far ones ---------- */
.love { position: relative; background: var(--daylight), var(--wood-img) 0 0 / var(--wood-size) var(--wood); margin-top: clamp(90px, 14vh, 170px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 34vw, 600px)) minmax(0, 1fr); grid-template-areas: "a words b"; align-items: center; gap: clamp(28px, 3vw, 64px); padding: clamp(80px, 11vh, 130px) var(--gut); overflow: hidden; }
.love__side { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 2; }
.love__side--a { grid-area: a; justify-self: end; }
.love__side--b { grid-area: b; justify-self: start; }
.love__side figure { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--r, 0deg)); will-change: transform; }
.love__side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; box-shadow: 9px 14px 22px -9px rgba(84, 56, 26, .38), 2px 3px 6px rgba(84, 56, 26, .15); }
.love__side .wide img { aspect-ratio: 4 / 3; }
.love__side .far { z-index: 1; }
.love__side .far img { box-shadow: 4px 7px 12px -5px rgba(84, 56, 26, .34), 1px 2px 4px rgba(84, 56, 26, .14); }
.love__side .mid { z-index: 2; }
.love__side .near { z-index: 3; }
.love__side .near img { box-shadow: 18px 28px 40px -16px rgba(84, 56, 26, .42), 3px 5px 10px rgba(84, 56, 26, .14); }
.love__words { grid-area: words; position: relative; z-index: 4; text-align: center; }
.love h2 { font: 500 clamp(44px, 4.6vw, 80px)/.96 var(--display); letter-spacing: -.02em; margin-bottom: 26px; text-wrap: balance; }
.love p { font-size: clamp(16.5px, 1.25vw, 19px); }
.love .sig { display: block; font: 400 32px/1 var(--display); margin-top: 22px; }

/* ---------- Nottingham: the painted navy boards of her shopfront ---------- */
.notts { position: relative; background: var(--navy); color: var(--white); padding: clamp(80px, 13vh, 150px) 0; overflow: hidden; }
/* each board catches the light along its top edge and goes into shadow under the next one */
.notts::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px, rgba(0, 0, 0, .1) 46px, rgba(0, 0, 0, .26) 46px 48px); }
.notts__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 110px); }
.notts .kicker { color: var(--butter); }
.notts h2 { font: 500 clamp(44px, 5.6vw, 94px)/.98 var(--display); letter-spacing: -.018em; }
.notts h2 span { color: var(--butter); }
.notts__text { margin-top: 26px; max-width: 48ch; color: rgba(255,255,255,.86); font-size: 17.5px; }
.notts__when { align-self: end; }
.notts__date { font: 500 clamp(52px, 6vw, 100px)/1 var(--display); letter-spacing: -.015em; margin-bottom: 26px; }
.notts__date.tbc { font-size: clamp(38px, 4vw, 64px); color: rgba(255,255,255,.92); }
.notts__when .btn { margin-top: 26px; }
.notts__quote { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.2); padding-top: 34px; margin-top: clamp(20px, 4vh, 50px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.notts__quote p { font: 400 clamp(26px, 2.7vw, 42px)/1.22 var(--display); max-width: 34ch; }
.notts__quote cite { font: 500 14.5px/1 var(--text); font-style: normal; color: var(--butter); white-space: nowrap; }

/* facts set as a quiet table */
.facts { border-top: 1px solid var(--navy); }
.facts div { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 600 14px/1.5 var(--text); color: var(--soft); }
.facts dd { font-size: 16.5px; }
.facts a { text-decoration-color: var(--chalk); text-underline-offset: 4px; }
.facts--dark { border-top-color: rgba(255,255,255,.6); }
.facts--dark div { border-bottom-color: rgba(255,255,255,.16); }
.facts--dark dt { color: var(--butter); }

/* ---------- Christmas ---------- */
.xmas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 110px); align-items: center; padding: clamp(80px, 13vh, 150px) 0; }
.xmas h2 { font: 500 clamp(40px, 5vw, 82px)/1 var(--display); letter-spacing: -.016em; margin-bottom: 30px; }
.xmas .reply { max-width: 620px; }
.menu { margin-top: 30px; border-top: 1px solid var(--navy); }
.menu li { font: 500 clamp(19px, 1.6vw, 23px)/1.3 var(--display); padding: 13px 0; border-bottom: 1px solid var(--rule); }
.xmas__go { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.xmas__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }

.next { padding: 0 0 clamp(60px, 10vh, 120px); }
.next h2 { font: 500 clamp(36px, 4vw, 64px)/1 var(--display); margin-bottom: 16px; }

/* ---------- visit ---------- */
.visit { padding-top: clamp(20px, 4vh, 50px); }
.visit__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 100px); border-top: 1px solid var(--navy); padding-top: 18px; align-items: start; }
.visit .facts { border-top: 0; margin-top: -13px; }
.visit h2 { font: 500 clamp(40px, 4.6vw, 76px)/1 var(--display); letter-spacing: -.016em; margin-bottom: 18px; }
.visit__words p { max-width: 36ch; color: var(--soft); }

/* ---------- questions, grouped by topic, with her beside them ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(30px, 6vw, 100px); padding: clamp(80px, 13vh, 150px) 0; }
.faq__side { align-self: start; position: sticky; top: 30px; }
.faq h2 { font: 500 clamp(36px, 4vw, 64px)/1.02 var(--display); letter-spacing: -.014em; }
.faq__side img { width: min(300px, 70%); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; margin-top: 28px; }
.faq__group { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--navy); padding-top: 14px; margin-bottom: 26px; }
.faq__group h3 { font: 600 14px/1.6 var(--text); color: var(--sea); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child summary { padding-top: 2px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 12px 0 14px; font: 500 clamp(19px, 1.6vw, 23px)/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 24px/1 var(--text); color: var(--sea); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 58ch; color: var(--soft); }
.faq details p:last-child { padding-bottom: 18px; }

/* ---------- the footer: Spanish City, then her name, salted, in the colours of her sign ---------- */
.foot { position: relative; background: var(--navy); color: var(--white); padding-top: clamp(60px, 9vh, 100px); overflow: hidden; }
.foot a { color: var(--white); text-decoration-color: var(--butter); text-underline-offset: 4px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.city { width: 100%; height: auto; overflow: visible; }
.city path { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.city .city__ribs path { stroke: rgba(255,255,255,.13); }
.city .fill { fill: var(--navy); }
.city .city__windows .frame { fill: var(--navy); stroke: var(--butter); stroke-width: 2; }
.city .city__windows .glaze { stroke: rgba(50, 155, 190, .6); stroke-width: 1; }
.city .city__shop .fill { fill: var(--navy-2); }
.city .city__sign .fill { stroke: rgba(255,255,255,.85); }
.city text { fill: var(--butter); font: 600 9px/1 var(--display); letter-spacing: .16em; }
.city .city__tables path { stroke: rgba(255,255,255,.8); stroke-width: 1.4; }
.city .city__ground { stroke: rgba(255,255,255,.4); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: 24px; font-size: 15px; line-height: 1.6; }
.foot__cols a { overflow-wrap: anywhere; }
.foot .kicker { color: var(--butter); margin-bottom: 8px; }
.foot__mark { position: relative; margin-top: clamp(40px, 7vh, 80px); }
.foot__mark canvas { display: block; width: 100%; height: clamp(110px, 20vw, 330px); }
.foot__name { display: block; width: 100%; height: auto; overflow: hidden; }
.foot__name text { font: 600 108px var(--display); fill: var(--butter); }
.js .foot__name { display: none; }
.no-salt .foot__name { display: block; }
html:not(.js) .foot__mark canvas, html:not(.js) .pinch, .no-salt .foot__mark canvas, .no-salt .pinch { display: none; }
.pinch { position: absolute; right: var(--gut); top: -14px; background: none; border: 1px solid rgba(255,255,255,.3); color: var(--white); border-radius: 4px; padding: 8px 12px; font: 500 13.5px/1 var(--text); }
.pinch:hover { border-color: var(--butter); color: var(--butter); }
.foot__small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0 30px; font-size: 13.5px; color: rgba(255,255,255,.65); border-top: 1px solid rgba(255,255,255,.14); }

/* ---------- your note to Chelle, at the end of the bakes: her reply says when to order by and collect ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 90px); align-items: end; margin-top: clamp(56px, 9vh, 100px); background: var(--wash); border-radius: 8px; padding: clamp(28px, 4.4vw, 64px); }
.order__ask { font: 500 clamp(34px, 3.8vw, 58px)/1.04 var(--display); letter-spacing: -.014em; text-wrap: balance; }
.order .reply { margin-top: clamp(20px, 2.6vw, 30px); max-width: 640px; }
.order__menu { font: 400 clamp(17px, 1.3vw, 19.5px)/1.5 var(--display); margin-bottom: 26px; }
.order__btn .btn { padding: 18px 26px; font-size: 16.5px; }
.order .small { margin-top: 12px; }

/* ---------- on every page: small labels, and the other pages in Chelle's own words above the footer ---------- */
.tag { display: inline-block; font: 600 11.5px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px 4px; border-radius: 3px; background: var(--wash); color: var(--sea); }
.tag--eg { background: none; box-shadow: inset 0 0 0 1px var(--edge); color: var(--soft); }
.more { padding: clamp(56px, 9vh, 100px) 0 clamp(64px, 10vh, 110px); }
.more__h { font: 600 14px/1.2 var(--text); color: var(--sea); margin-bottom: 16px; }
.more__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.more__item { display: grid; align-content: start; gap: 10px; padding: 20px 0 8px; border-top: 1px solid var(--navy); text-decoration: none; }
.more__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 clamp(26px, 2.4vw, 38px)/1.06 var(--display); letter-spacing: -.01em; }
.more__name::after { content: '\2192'; flex: none; font: 400 22px/1 var(--text); transition: transform .3s var(--ease); }
.more__item:hover .more__name::after { transform: translateX(5px); }
.more__about { color: var(--soft); font-size: 15.5px; max-width: 42ch; }
.more__tag { font: 400 clamp(18px, 1.4vw, 21px)/1.35 var(--display); color: var(--sea); }
.more--dark { color: var(--white); background: linear-gradient(180deg, #1D5679, var(--navy)); }
.more--dark .more__h { color: var(--butter); }
.more--dark .more__item { border-top-color: rgba(255, 255, 255, .5); }
.more--dark .more__about { color: rgba(255, 255, 255, .84); }
.more--dark .more__tag { color: #9CD3E6; }

/* ---------- The Butter Report: her newsletter's name set big like a paper's masthead, then her posts, newest
   first, with the month of the one you're reading standing in the margin and rolling over to the next ---------- */
.mast { padding-top: clamp(26px, 5vh, 56px); }
.mast .corners { padding-bottom: 12px; }
.mast__name { font: 500 clamp(50px, 9.6vw, 150px)/.94 var(--display); letter-spacing: -.03em; margin: clamp(10px, 1.6vw, 22px) 0 clamp(18px, 2.6vw, 34px); text-wrap: balance; }
.mast__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; border-top: 1px solid var(--navy); padding-top: 18px; }
.mast__intro { font: 400 clamp(18px, 1.5vw, 22px)/1.45 var(--display); max-width: 50ch; }
.mast__tools { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: flex-end; }
.filter { display: inline-flex; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--navy); }
.filter button { background: none; border: 0; border-radius: 4px; padding: 11px 16px; font: 600 14.5px/1 var(--text); }
.filter button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.follow { font: 600 14.5px/1.3 var(--text); color: var(--sea); text-decoration-color: var(--chalk); text-underline-offset: 4px; }
.posts { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 96px); padding: clamp(44px, 8vh, 90px) 0 clamp(40px, 6vh, 70px); }
.rail { position: sticky; top: 30px; }
.rail__month { display: grid; overflow: hidden; font: 500 clamp(44px, 4.8vw, 80px)/1.08 var(--display); letter-spacing: -.02em; color: var(--chalk); }
.rail__month span { grid-area: 1 / 1; }
.rail__year { font: 600 14px/1 var(--text); letter-spacing: .1em; color: var(--soft); margin-top: 10px; }
.in-up { animation: in-up .65s var(--ease) both; }
.out-up { animation: out-up .65s var(--ease) both; }
.in-down { animation: in-down .65s var(--ease) both; }
.out-down { animation: out-down .65s var(--ease) both; }
@keyframes in-up { from { transform: translateY(75%); opacity: 0; } }
@keyframes out-up { to { transform: translateY(-75%); opacity: 0; } }
@keyframes in-down { from { transform: translateY(-75%); opacity: 0; } }
@keyframes out-down { to { transform: translateY(75%); opacity: 0; } }
.post { border-top: 1px solid var(--navy); padding: 18px 0 clamp(60px, 9vh, 100px); }
.post__month { display: none; }
.post__date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 14px/1.3 var(--text); color: var(--soft); }
.post__title { font: 500 clamp(32px, 3.4vw, 54px)/1.06 var(--display); letter-spacing: -.014em; margin: 14px 0 22px; max-width: 24ch; text-wrap: balance; }
.post__text { max-width: 62ch; font-size: 17.5px; line-height: 1.65; }
.post__text p:first-child { font: 400 clamp(19.5px, 1.6vw, 23px)/1.5 var(--display); }
.posts__empty, .build__empty, .events__empty { font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--display); padding: 18px 0; border-top: 1px solid currentColor; }
/* her photos in one row at one shared height, each at its own shape */
.photos { display: flex; gap: 12px; margin-top: 30px; }
.photos figure { flex: 1 1 0; min-width: 0; }
.photos img { width: 100%; height: auto; border-radius: 4px; background: var(--wash); }
.photos.one figure { flex: none; max-width: 100%; }
.photos.one img { width: auto; max-width: 100%; max-height: min(72vh, 620px); }
.post__sig { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.post__sig img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.post__sig b { display: block; font: 600 13px/1 var(--text); color: var(--sea); letter-spacing: .03em; margin-bottom: 5px; }
.post__sig .sig { font: 400 22px/1 var(--display); }

/* ---------- The Sea Salt & Soda Bar: the page is the glass. It starts white like the foam on top of her Sea Foam
   Soda and deepens through her blues as you go down, into the navy of the footer ---------- */
.glass--foam { background: linear-gradient(180deg, var(--white) 30%, #E4F0F5); }
.glass--rise { --soft: #3E5266; background: linear-gradient(180deg, #E4F0F5, #BCDCEA); }
.glass--deep { color: var(--white); background: linear-gradient(180deg, #BCDCEA 0, #329BBE 150px, #23739A 400px, #1D5679); }
[data-build-section][hidden] + .glass--deep { background: linear-gradient(180deg, #E4F0F5 0, #329BBE 150px, #23739A 400px, #1D5679); }
.soda { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 6vw, 110px); align-items: center; padding: clamp(36px, 7vh, 80px) 0 clamp(60px, 10vh, 110px); }
.soda__name { font: 500 clamp(46px, 6.2vw, 104px)/.96 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.soda__status { font: 500 clamp(30px, 3.6vw, 58px)/1.02 var(--display); letter-spacing: -.012em; color: var(--chalk); margin-top: clamp(14px, 2vw, 24px); }
.soda__tag { font: 400 clamp(21px, 1.9vw, 29px)/1.3 var(--display); color: var(--sea); margin-top: clamp(22px, 3vw, 36px); }
.soda__about { margin-top: 14px; max-width: 46ch; font-size: 17.5px; color: var(--soft); }
.soda__go, .soc__go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vw, 36px); }
.soda__photo { position: relative; aspect-ratio: 3 / 4; max-width: 480px; width: 100%; justify-self: end; overflow: hidden; border-radius: 4px; background: var(--wash); box-shadow: 14px 22px 34px -16px rgba(26, 53, 82, .4); }
.soda__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.soda__photo img.on { opacity: 1; }
.photo-tag { position: absolute; left: 14px; bottom: 14px; background: var(--white); color: var(--navy); font: 600 13.5px/1 var(--text); padding: 10px 12px; border-radius: 4px; }
.build { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 96px); padding: clamp(60px, 10vh, 120px) 0 clamp(40px, 7vh, 80px); }
.build__head h2 { font: 500 clamp(38px, 4.4vw, 72px)/1 var(--display); letter-spacing: -.016em; text-wrap: balance; }
.build__head p { margin-top: 16px; color: var(--soft); max-width: 30ch; }
.build .post { padding-bottom: 30px; }
.build .tag { background: rgba(255, 255, 255, .6); }
.build__more { border-top: 1px solid var(--navy); padding-top: 18px; }
.build__more ul { margin-bottom: 26px; }
.build__more li a { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid rgba(26, 53, 82, .16); text-decoration: none; }
.build__more time { font: 600 14px/1.5 var(--text); color: var(--soft); }
.build__more li span { font: 500 19px/1.35 var(--display); text-decoration: underline; text-decoration-color: rgba(26, 53, 82, .3); text-underline-offset: 4px; }
.build__more li a:hover span { text-decoration-color: currentColor; }
.board { padding: clamp(150px, 22vh, 210px) 0 clamp(80px, 12vh, 130px); }
.board__head h2 { font: 500 clamp(44px, 5.6vw, 92px)/.98 var(--display); letter-spacing: -.018em; text-wrap: balance; }
.board__head p { margin-top: 14px; color: rgba(255, 255, 255, .9); max-width: 46ch; }
.board__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(36px, 6vw, 110px); margin-top: clamp(44px, 7vh, 80px); }
.board__group h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 600 14px/1.3 var(--text); letter-spacing: .09em; text-transform: uppercase; color: var(--butter); border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 12px; }
.board__group h3 span { color: rgba(255, 255, 255, .85); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.drink { padding: 16px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.drink__line { display: flex; align-items: baseline; gap: 10px; font: 500 clamp(21px, 1.8vw, 27px)/1.2 var(--display); }
.drink__name { min-width: 0; }
.drink__line i { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(255, 255, 255, .45); transform: translateY(-.25em); }
.drink__price { flex: none; font: 600 17px/1 var(--text); font-variant-numeric: tabular-nums; }
.drink__desc { margin-top: 6px; color: rgba(255, 255, 255, .92); font-size: 15.5px; max-width: 46ch; }
.event .tag--eg { color: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); }

/* ---------- The Butter Social: her own words big, then what's on, on the painted navy boards of her shopfront: the
   event in the middle of the screen lights up and its photo shows in the frame beside the list ---------- */
.soc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(30px, 6vw, 110px); align-items: center; padding: clamp(36px, 7vh, 80px) 0 clamp(60px, 10vh, 110px); }
.soc__name { font: 600 clamp(22px, 2.2vw, 32px)/1.1 var(--display); color: var(--sea); }
.soc__tag { font: 500 clamp(46px, 6vw, 100px)/.96 var(--display); letter-spacing: -.022em; margin-top: clamp(14px, 2vw, 22px); text-wrap: balance; }
.soc__tag span { color: var(--chalk); }
.soc__about { margin-top: clamp(22px, 3vw, 34px); max-width: 48ch; font: 400 clamp(18px, 1.45vw, 21px)/1.5 var(--display); }
.soc__photo { justify-self: end; width: 100%; max-width: 380px; }
.soc__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; box-shadow: 14px 22px 34px -16px rgba(26, 53, 82, .4); }
.events { position: relative; background: var(--navy); color: var(--white); padding: clamp(80px, 12vh, 140px) 0; }
.events::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px, rgba(0, 0, 0, .1) 46px, rgba(0, 0, 0, .26) 46px 48px); pointer-events: none; }
.events > .wrap { position: relative; }
.events__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px 40px; }
.events__head h2 { font: 500 clamp(44px, 5.6vw, 92px)/.98 var(--display); letter-spacing: -.018em; }
.events__head p { color: rgba(255, 255, 255, .88); max-width: 40ch; }
.events__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(30px, 5vw, 90px); align-items: start; margin-top: clamp(36px, 6vh, 60px); }
.events__list { list-style: none; padding: 0; border-top: 1px solid rgba(255, 255, 255, .55); }
.event { display: grid; grid-template-columns: clamp(84px, 8vw, 120px) minmax(0, 1fr); gap: 24px; padding: 30px 0 34px; border-bottom: 1px solid rgba(255, 255, 255, .16); transition: opacity .45s ease; }
.event__when { display: grid; align-content: start; }
.event__day { font: 500 clamp(56px, 5.4vw, 88px)/.9 var(--display); color: var(--butter); letter-spacing: -.02em; }
.event__mon { font: 600 14.5px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; }
.event__wd { font-size: 14px; color: rgba(255, 255, 255, .8); }
.event__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 13.5px/1.3 var(--text); letter-spacing: .03em; color: var(--butter); }
.event h3 { font: 500 clamp(26px, 2.6vw, 40px)/1.08 var(--display); letter-spacing: -.01em; margin: 10px 0; }
.event__line { color: rgba(255, 255, 255, .9); max-width: 50ch; }
.event__photo { display: none; }
.event__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.event__price { font: 600 17px/1 var(--text); }
.event__left { font-size: 14.5px; color: rgba(255, 255, 255, .84); }
.event__full { font: 600 14.5px/1 var(--text); color: rgba(255, 255, 255, .8); }
.event__row .btn, .event__full { margin-left: auto; }
.events__frame { position: sticky; top: 12vh; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--navy-2); }
.events__frame > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.events__frame > .on { opacity: 1; }
.no-photo { display: flex; align-items: flex-end; padding: 9%; background: var(--navy-2) var(--flakes) 0 0 / 124px 124px; }
.no-photo strong { font: 500 clamp(28px, 2.6vw, 40px)/1.05 var(--display); color: var(--butter); }
@media (min-width: 901px) { .js .event:not(.lit) { opacity: .6; } }
.party { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 110px); align-items: end; padding: clamp(80px, 13vh, 150px) 0 0; }
.party h2 { font: 500 clamp(40px, 5vw, 82px)/1 var(--display); letter-spacing: -.016em; margin-bottom: 30px; text-wrap: balance; }
.party .reply { max-width: 640px; }
.party__facts dd a { font: 500 19px/1.4 var(--display); }

/* ---------- in-between widths and phones ---------- */
@media (max-width: 1100px) {
  /* the words first, then both sets of photos side by side as one */
  .love { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "words words" "a b"; gap: 48px 0; padding: 70px var(--gut) 64px; }
  .love__side { max-width: 440px; }
  .love__words { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ct" "h1" "photo" "reply" "go" "cb"; grid-template-rows: none; min-height: 0; }
  .hero h1 { margin-top: 18px; }
  .hero__typed { min-height: 2.94em; }
  .hero { --mount: clamp(26px, 6vw, 48px); }
  .hero::before { margin: 18px calc(var(--gut) * -1) 0; border-radius: 0; }
  .hero__photo { aspect-ratio: 5 / 4; min-height: 0; margin: calc(18px + var(--mount)) calc(var(--mount) - var(--gut)) var(--mount); }
  .corners--bottom { flex-direction: column; gap: 6px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--pick { grid-row: span 1; }
  .card--pick .card__frame { aspect-ratio: 4 / 3; min-height: 0; flex: none; }
  .sec-head { flex-direction: column; gap: 8px; }
  .sec-head p { text-align: left; }
  .notts__in, .xmas, .visit__in, .faq, .foot__top, .order { grid-template-columns: minmax(0, 1fr); }
  .notts__quote { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .xmas__photo { order: -1; }
  .xmas__photo img { aspect-ratio: 4 / 3; object-position: 50% 70%; }
  .faq__side { position: static; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
  .faq__side img { width: 120px; margin: 0; }
}
@media (max-width: 600px) {
  :root { --wood-size: 1800px 864px; --hang: 8px 13px 20px -9px rgba(84, 56, 26, .42), 2px 3px 6px rgba(84, 56, 26, .15); }
  .corners--top { flex-direction: column; gap: 6px; }
  .card__row { flex-wrap: wrap; gap: 8px 10px; }
  .soldout, .closed-note { margin-left: 0; width: 100%; text-align: left; }
  .card .desc { display: none; }
  /* on a phone the photo fades back into its own colour and the ingredients sit on top */
  .card.hot .card__frame img { transform: none; opacity: .16; }
  .card__made, .card--pick .card__made { left: 10px; right: 10px; bottom: 10px; font-size: 13px; }
  .card--pick .desc { display: block; font-size: 16px; }
  .faq__group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .logo { font-size: 21px; }
  .logo small { font-size: 11px; }
  .top__row { gap: 12px; padding: 16px 0 14px; }
  .top__order { padding: 11px 13px; font-size: 14px; gap: 8px; }
  .order { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 28px; }
  .order__btn .btn { width: 100%; justify-content: center; }
  .pinch { position: static; display: block; margin: 0 auto 10px; }
  /* one set of photos above her words, one below */
  .love { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "words" "b"; gap: 40px; padding: 56px var(--gut); }
  .love__words { width: 100%; }
  .love__side, .love__side--a, .love__side--b { justify-self: center; max-width: 420px; aspect-ratio: 5 / 8; }
  .love__side .far:not(.wide) { display: none; }
}
/* the tabs and the new pages, between widths and on phones */
@media (max-width: 1000px) {
  .tabs__in { flex-wrap: nowrap; gap: 3px; }
  .tabs a { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 11px 8px 12px; font-size: 16px; }
}
@media (max-width: 900px) {
  .more__list { grid-template-columns: minmax(0, 1fr); }
  .more__item { padding-bottom: 24px; }
  .mast__foot { grid-template-columns: minmax(0, 1fr); }
  .mast__tools { justify-content: flex-start; }
  .posts, .build { grid-template-columns: minmax(0, 1fr); }
  .posts__rail { display: none; }
  .post__month { display: block; font: 500 clamp(38px, 9vw, 60px)/1 var(--display); letter-spacing: -.02em; color: var(--chalk); margin-bottom: 14px; }
  .post__month span { font: 600 14px/1 var(--text); letter-spacing: .1em; color: var(--soft); vertical-align: .5em; margin-left: 6px; }
  .build .post__month { display: none; }
  .soda, .soc, .party { grid-template-columns: minmax(0, 1fr); }
  .soda__photo { justify-self: start; max-width: 420px; aspect-ratio: 4 / 5; }
  .soc__photo { justify-self: start; max-width: 340px; }
  .board__groups { grid-template-columns: minmax(0, 1fr); }
  .events__body { grid-template-columns: minmax(0, 1fr); }
  .events__frame { display: none; }
  .event__photo { display: block; margin: 16px 0 4px; max-width: 460px; }
  .event__photo img, .event__photo .no-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
}
@media (max-width: 600px) {
  .tabs__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 8px 0; }
  .tabs a { border-radius: 4px; font-size: 15.5px; padding: 9px 10px; }
  .event { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 24px 0 28px; }
  .event__when { display: flex; align-items: baseline; gap: 10px; }
  .event__day { font-size: 52px; }
  .event__mon { margin-top: 0; }
  .event__row .btn, .event__full { margin-left: 0; }
  .event__row .btn { width: 100%; justify-content: center; }
  .build__more li a { grid-template-columns: minmax(0, 1fr); }
  .photos { gap: 8px; }
  .soda__go .btn, .soc__go .btn { flex: 1 1 auto; justify-content: center; }
  .btn { max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
  .top__order { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .card { opacity: 1; transform: none; filter: none; }
  .love__side figure { --ty: 0px !important; }
}