/* Velin Bakehouse — styles
   One family (EB Garamond). Plaster ground, plum ink, olive once.
   Motion: slow, eased, reversible. Nothing bounces. */

:root {
  --plaster: #F1EDE4;
  --plaster-2: #EBE6DB;
  --linen: #E6E0D3;
  --cream: #EEF0DE;
  --oak: #C08A55;
  --oak-2: #A8763F;
  --olive: #83914A;
  --olive-2: #6F7C3B;
  --plum: #36272D;
  --plum-2: #2A1D22;
  --ink: var(--plum);
  --ink-2: #5E4F55;
  --hair: rgba(54, 39, 45, .16);
  --hair-2: rgba(54, 39, 45, .08);

  --m: 5vw;
  --nav: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --serif: "EB Garamond", "Cormorant Garamond", Garamond, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

.h2 {
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.h2--light { color: var(--plaster); }

/* Tracked caps — the BAKEHOUSE register. Used only for labels that are labels. */
.caps, .item__name, .strip__k, .counter__num, .creds__k {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px;
  border-radius: 999px;
  font-size: 17px; line-height: 1;
  border: 1px solid transparent;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
  white-space: nowrap;
}
.btn--olive { background: var(--olive); color: var(--plaster); border-color: var(--olive); }
.btn--olive:hover { background: var(--olive-2); border-color: var(--olive-2); }
.btn--line { border-color: var(--hair); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--plaster { background: var(--plaster); color: var(--plum); border-color: var(--plaster); }
.btn--plaster:hover { background: var(--cream); }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav);
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.top::after {
  content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px;
  background: var(--hair); opacity: 0; transition: opacity .6s var(--ease);
}
.top__progress {
  position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(var(--sp, 0)); transform-origin: left;
  opacity: 0; transition: opacity .6s var(--ease);
  z-index: 1;
}
.top.is-scrolled .top__progress { opacity: 1; }
.top.is-scrolled { background: rgba(241, 237, 228, .94); }
.top.is-scrolled::after { opacity: 1; }
.top.is-dark { color: var(--plaster); }
.top.is-dark.is-scrolled { background: rgba(54, 39, 45, .94); }
.top.is-dark::after { background: rgba(241, 237, 228, .16); }
.top.is-dark .top__menu span { background: var(--plaster); }
.top__in {
  height: 100%; padding: 0 var(--m);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.brand { display: inline-flex; }
.brand__mark {
  display: block; width: 118px; height: auto; aspect-ratio: 2304.28 / 709.88;
  fill: currentColor; overflow: visible;
}
.top__links { display: flex; gap: 40px; font-size: 18px; }
.top__links a, .top__ig {
  position: relative; padding: 6px 0;
}
.top__links a::after, .top__ig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.top__links a:hover::after, .top__ig:hover::after { transform: scaleX(1); transform-origin: left; }
.top__right { justify-self: end; display: flex; align-items: center; gap: 28px; }
.top__status { font-style: italic; color: var(--ink-2); font-size: 17px; white-space: nowrap; }
.top.is-dark .top__status { color: rgba(241, 237, 228, .7); }
.top__ig { font-size: 18px; }
.top__menu {
  display: none; justify-self: end;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.top__menu span { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .5s var(--ease); }
.top__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.top__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: var(--plaster);
  padding: calc(var(--nav) + 6vh) var(--m) 6vh;
}
.sheet[hidden] { display: none; }
.sheet__in { display: flex; flex-direction: column; gap: 6px; }
.sheet__in a { font-size: 42px; line-height: 1.2; }
.sheet__ig { margin-top: 18px; font-size: 24px !important; color: var(--ink-2); }
.sheet__status { margin-top: auto; padding-top: 8vh; font-style: italic; font-size: 20px; }
.sheet__status:empty { display: none; }
.sheet__hours { margin-top: 10px; color: var(--ink-2); font-size: 17px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--plaster);
  overflow: hidden;
}
/* the sheer-curtain light: a static wash from the top right, like every photo they own */
.hero__light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 84% 8%, rgba(255, 250, 238, .95), rgba(255, 250, 238, 0) 70%),
    radial-gradient(45% 40% at 10% 90%, rgba(214, 199, 176, .35), rgba(214, 199, 176, 0) 70%);
}
.hero__in {
  position: relative; z-index: 2;
  flex: 1;
  padding: calc(var(--nav) + 9vh) var(--m) 0;
}
.hero__word {
  --word-size: 18.4vw;
  position: relative;
  will-change: transform;
  display: flex; justify-content: space-between;
  font-size: var(--word-size);
  line-height: .8;
  font-weight: 400;
  margin: 0 -.02em;      /* the T's serif and the N's overhang the side bearings; pull them onto the margin */
  color: var(--ink);
  perspective: 1400px;
  user-select: none;
}
.hero__l {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hero.is-ready .hero__l {
  animation: roll 1.1s var(--ease) both;
  animation-delay: calc(.15s + var(--i) * .09s);
}
@keyframes roll {
  from { transform: rotateX(88deg) translateY(.06em); opacity: 0; }
  40% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

.hero__obj {
  position: absolute; z-index: 3;
  margin: 0;
  left: 59%;
  top: var(--obj-top, 42%);
  height: var(--obj-h, clamp(260px, 47vh, 500px));
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease) 1s, transform 1.4s var(--ease) 1s;
}
.hero.is-ready .hero__obj { opacity: 1; transform: none; }
.hero__obj img {
  height: 100%; width: auto;
  position: relative; z-index: 2;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform 1.2s var(--ease);
  filter: drop-shadow(0 2px 3px rgba(54, 39, 45, .12));
}
.hero__shadow {
  position: absolute; left: 12%; right: 12%; bottom: -3%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(54, 39, 45, .22), rgba(54, 39, 45, 0) 72%);
  filter: blur(6px);
  z-index: 1;
}

.hero__copy {
  position: relative; z-index: 4;
  margin-top: 6vh;
  max-width: 34ch;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.2s var(--ease) 1.3s, transform 1.2s var(--ease) 1.3s;
}
.hero.is-ready .hero__copy { opacity: 1; transform: none; }
.hero__lede { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.45; color: var(--ink); }
.hero__acts { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* the scroll cue: a hairline with a segment sliding down it, gone the moment you move */
.cue {
  position: absolute; z-index: 4;
  left: var(--m); bottom: 4vh;
  display: flex; align-items: center; gap: 14px;
  opacity: 0;
  transition: opacity 1.2s var(--ease) 2.1s;
}
.hero.is-ready .cue { opacity: 1; }
.cue.is-gone { opacity: 0; transition: opacity .5s var(--ease) 0s; }
.cue__line { position: relative; display: block; width: 1px; height: 44px; background: var(--hair); overflow: hidden; }
.cue__seg {
  position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--ink);
  animation: cue 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue {
  0% { transform: translateY(-16px); }
  55%, 100% { transform: translateY(46px); }
}
.cue__label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }

.hero__strip {
  position: relative; z-index: 4;
  margin: 8vh var(--m) 0;
  border-top: 1px solid var(--hair);
  opacity: 0;
  transition: opacity 1.2s var(--ease) 1.6s;
}
.hero.is-ready .hero__strip { opacity: 1; }
.hero__strip-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 20px 0 24px;
}
.strip__cell { display: flex; flex-direction: column; gap: 6px; padding-right: 24px; }
.strip__cell + .strip__cell { border-left: 1px solid var(--hair-2); padding-left: 24px; }
.strip__k { color: var(--ink-2); }
.strip__v { font-size: 20px; line-height: 1.2; }
.strip__cell--addr { justify-self: end; text-align: right; padding-right: 0; }
.strip__cell--addr .strip__k { text-transform: none; letter-spacing: 0; font-size: 20px; color: var(--ink); font-weight: 400; }
.strip__cell--addr .strip__v { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }

/* ---------- statement: one sentence, read word by word on the way down ---------- */
.statement {
  padding: 24vh var(--m) 22vh;
  background: var(--plaster);
}
.statement__p {
  font-size: clamp(34px, 5vw, 80px);
  line-height: 1.14;
  letter-spacing: -.012em;
  max-width: 21ch;
}
.w { opacity: .14; transition: opacity .35s linear; }

/* ---------- the counter ---------- */
.counter {
  position: relative;
  background: var(--linen);
  --shelf: 70vh;                 /* where the objects stand */
}
.counter__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.counter__head {
  position: absolute; z-index: 3;
  top: calc(var(--nav) + 4vh); left: var(--m); right: var(--m);
  pointer-events: none;
}
.counter__note { margin-top: 10px; max-width: 34ch; color: var(--ink-2); font-size: 18px; }

.counter__track {
  position: absolute; left: 0; top: 0; height: 100%;
  display: flex; align-items: flex-start;
  padding-left: var(--m);
  will-change: transform;
  background: linear-gradient(rgba(192, 138, 85, .6), rgba(192, 138, 85, .6)) 0 var(--shelf) / 100% 1px repeat-x;
  background-attachment: local;
}
.item {
  position: relative;
  flex: 0 0 auto;
  width: 33vw;
  height: 100vh; height: 100svh;
}
.item--intro { width: 36vw; }
.item--end { width: 46vw; padding-right: var(--m); }
.item__intro {
  position: absolute; left: 0; bottom: calc(100vh - var(--shelf) + 4vh);
  max-width: 22ch;
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.3;
}
.item--end .item__intro { bottom: calc(100vh - var(--shelf) + 12vh); }
.item--end .btn { position: absolute; left: 0; bottom: calc(100vh - var(--shelf) + 3vh); }
.item__obj {
  position: absolute; left: 0; bottom: calc(100vh - var(--shelf));
  height: var(--h, 40vh);
}
.item__obj img { filter: drop-shadow(0 2px 3px rgba(54, 39, 45, .12)); }
.item__obj img { height: 100%; width: auto; position: relative; z-index: 2; }
.item__obj::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -2.5%; height: 8%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(54, 39, 45, .2), rgba(54, 39, 45, 0) 72%);
  filter: blur(5px);
}
.item__name {
  position: absolute; left: 0; top: calc(var(--shelf) + 26px);
  font-family: var(--serif);
}
.item__sub {
  position: absolute; left: 0; top: calc(var(--shelf) + 52px);
  font-style: italic; color: var(--ink-2); font-size: 18px; max-width: 24ch;
}
.counter__foot {
  position: absolute; z-index: 3;
  left: var(--m); right: var(--m); bottom: 5vh;
  display: flex; align-items: center; gap: 24px;
}
.counter__num { color: var(--ink-2); white-space: nowrap; }
.counter__bar { flex: 1; height: 1px; background: var(--hair); position: relative; }
.counter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); }

/* ---------- cakes: a circle that grows into an arched window ---------- */
.cakes {
  position: relative;
  height: 200vh;
  background: var(--plaster);
}
.cakes__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.cakes__title {
  position: absolute; z-index: 2;
  inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--m) + 9vw);
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1;
  letter-spacing: -.015em;
  pointer-events: none;
}
.cakes__w { display: block; white-space: nowrap; will-change: transform; }
.cakes__w--b { font-style: italic; }
.cakes__media {
  position: absolute; z-index: 1;
  left: 31vw; right: 31vw; top: calc(var(--nav) + 3vh); bottom: 9vh;
  clip-path: inset(var(--ct, 26%) var(--cx, 20%) var(--ct, 26%) var(--cx, 20%) round var(--cr, 40vw) var(--cr, 40vw) var(--cb, 40vw) var(--cb, 40vw));
  will-change: clip-path;
}
.cakes__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform: scale(var(--cs, 1.22));
  transform-origin: 50% 55%;
  will-change: transform;
}
.cakes__cap {
  position: absolute; z-index: 3;
  left: var(--m); bottom: 9vh;
  max-width: 24ch;
  opacity: var(--co, 0);
  transform: translateY(calc((1 - var(--co, 0)) * 14px));
  font-size: clamp(18px, 1.35vw, 21px); line-height: 1.45;
  color: var(--ink);
}
.cakes__cap .btn { margin-top: 20px; }

/* ---------- story ---------- */
.story { background: var(--plaster); }
.story__pin {
  display: grid; grid-template-columns: 46% 54%;
  align-items: start;
  height: 280vh;
}
.story__text {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: calc(var(--nav) + 6vh) var(--m) 8vh;
  display: flex; flex-direction: column;
}
.story__h2 { margin-bottom: 8vh; }
.story__steps { position: relative; flex: 1; }
.story__step {
  position: absolute; left: 0; top: 0; max-width: 40ch;
  opacity: 0; transform: translateY(24px);
  will-change: opacity, transform;
}
.story__step h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; margin-bottom: 18px; }
.story__step p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--ink); }
.story__dots { display: flex; gap: 10px; }
.story__dots span { width: 22px; height: 1px; background: var(--hair); transition: background-color .6s var(--ease); }
.story__dots span.is-on { background: var(--ink); }
.story__imgs {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.story__img {
  position: absolute; inset: 0;
  will-change: clip-path, transform;
}
.story__img:nth-child(1) { z-index: 3; }
.story__img:nth-child(2) { z-index: 2; }
.story__img:nth-child(3) { z-index: 1; }
.story__img img { width: 100%; height: 100%; object-fit: cover; }

.creds { padding: 10vh var(--m) 14vh; }
.creds__in {
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding-top: 24px;
}
.creds__in p { display: flex; flex-direction: column; gap: 8px; }
.creds__k { color: var(--ink-2); }
.creds__v { font-size: 20px; line-height: 1.35; max-width: 34ch; }

/* ---------- gallery ---------- */
.gallery {
  position: relative;
  height: 160vh;
  background: var(--linen);
}
.gallery__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: 1200px;
}
.gallery__handle {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 2vw, 30px); font-style: italic;
  padding: 10px 18px;
}
.gallery__handle::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.gallery__handle:hover::after { transform: scaleX(1); transform-origin: left; }
.tile {
  position: absolute; margin: 0;
  top: var(--top); left: var(--left); width: var(--w);
  transform: translate(-50%, calc(-50% + var(--ty, 0px))) translateZ(var(--tz, 0px));
  will-change: transform;
}
.tile img { width: 100%; height: auto; box-shadow: 0 20px 40px -20px rgba(54, 39, 45, .35); }

/* ---------- visit ---------- */
.visit {
  position: relative;
  background: var(--plum);
  color: var(--plaster);
}
.visit__bg { position: absolute; inset: 0; }
.visit__in {
  position: relative; z-index: 2;
  padding: 16vh var(--m) 14vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6vw;
  align-items: start;
}
.visit__addr { margin-top: 28px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.25; }
.visit__note { margin-top: 20px; max-width: 36ch; color: rgba(241, 237, 228, .72); font-size: 19px; }
.visit__acts { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.visit__ig { font-style: italic; font-size: 20px; border-bottom: 1px solid rgba(241, 237, 228, .35); padding-bottom: 2px; }
.visit__ig:hover { border-color: var(--plaster); }
.hours {
  width: 100%; border-collapse: collapse;
  font-size: clamp(22px, 2vw, 30px);
  margin-top: 8px;
}
.hours th, .hours td { padding: 14px 0; border-bottom: 1px solid rgba(241, 237, 228, .14); font-weight: 400; }
.hours th { text-align: left; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 1px solid rgba(241, 237, 228, .14); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--cream); }
.hours tr.is-today th::after { content: "  · today"; font-style: italic; font-size: .7em; color: rgba(241, 237, 228, .6); }

/* ---------- footer ---------- */
.foot { background: var(--plum-2); color: var(--plaster); }
.foot__in {
  padding: 10vh var(--m) 6vh;
  display: grid; grid-template-columns: auto 1fr; gap: 40px 8vw; align-items: start;
}
.foot__brand { display: inline-flex; color: var(--plaster); }
.foot__brand .brand__mark { width: 150px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 40px; justify-content: start; font-size: 18px; color: rgba(241, 237, 228, .8); }
.foot__cols a { border-bottom: 1px solid rgba(241, 237, 228, .3); }
.foot__cols a:hover { border-color: var(--plaster); }
.foot__fine { grid-column: 1 / -1; font-size: 15px; color: rgba(241, 237, 228, .5); padding-top: 6vh; }

/* ---------- no JS: everything readable, nothing hidden ---------- */
.no-js .w { opacity: 1; }
.no-js .hero__l { animation: none; }
.no-js .hero__obj, .no-js .hero__copy, .no-js .hero__strip, .no-js .cue { opacity: 1; transform: none; }
.no-js .story__step:first-child { opacity: 1; transform: none; }
.no-js .cakes__cap { --co: 1; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .hero__l { animation: none; }
  .cue__seg { animation: none; top: 15px; }
  .hero__obj, .hero__copy, .hero__strip { transition: none; }
  .hero__obj img { transition: none; transform: none !important; }
  .w { transition: none; }
  .btn { transition: none; }
}

/* ---------- short desktop viewports: lift the word, give the pedestal room ---------- */
@media (min-width: 901px) and (max-height: 760px) {
  .hero__in { padding-top: calc(var(--nav) + 3vh); }
  .hero__word { --word-size: 16.5vw; }
  .hero__copy { margin-top: 4vh; }
  .hero__strip { margin-top: 4vh; }
}

/* ---------- ≤ 1100 ---------- */
@media (max-width: 1100px) {
  .top__links { gap: 28px; }
  .counter__note { display: none; }
  .item { width: 42vw; }
  .item--intro { width: 46vw; }
  .item--end { width: 60vw; }
  .story__pin { grid-template-columns: 50% 50%; }
}

/* ---------- ≤ 900: the page relaxes; pinned sections unpin ---------- */
@media (max-width: 900px) {
  :root { --nav: 64px; --m: 6vw; }
  body { font-size: 18px; }
  .top__links, .top__right { display: none; }
  .top__in { grid-template-columns: 1fr auto; }
  .top__menu { display: flex; }
  .brand__mark { width: 100px; }

  .hero__in { padding-top: calc(var(--nav) + 6vh); }
  .hero__word { --word-size: 19vw; }
  .hero__obj {
    left: 50%; transform: translate(-50%, 24px);
    height: var(--obj-h, clamp(220px, 38vh, 360px));
  }
  .hero.is-ready .hero__obj { transform: translate(-50%, 0); }
  .hero__copy { margin-top: var(--copy-gap, 40vh); max-width: none; }
  .cue { position: static; margin-top: 5vh; }
  .hero__strip { margin-top: 5vh; }
  .hero__strip-in { grid-template-columns: 1fr 1fr; gap: 18px 0; padding: 18px 0 22px; }
  .strip__cell { padding-right: 16px; }
  .strip__cell + .strip__cell { padding-left: 16px; }
  .strip__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip__cell--addr { justify-self: start; text-align: left; }
  .strip__v { font-size: 18px; }

  .statement { padding: 14vh var(--m) 12vh; }
  .statement__p { font-size: clamp(30px, 8.6vw, 44px); max-width: none; }

  /* counter: a native strip instead of a pin */
  .counter { --shelf: 270px; }
  .counter__pin { position: static; height: auto; overflow: visible; padding-top: calc(var(--nav) + 4vh); }
  .counter__head { position: static; display: block; padding: 0 var(--m) 6vh; }
  .counter__track {
    position: relative; height: auto;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--m);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--m);
    transform: none !important;
  }
  .counter__track::-webkit-scrollbar { display: none; }
  .item { width: 72vw; height: 400px; scroll-snap-align: start; margin-right: 10vw; }
  .item--intro { width: 78vw; }
  .item--end { width: 82vw; margin-right: 0; padding-right: 0; }
  .item__obj { bottom: calc(400px - var(--shelf)); height: calc(var(--h, 40vh) * .62); }
  .item__intro { bottom: calc(400px - var(--shelf) + 16px); font-size: 24px; }
  .item--end .item__intro { bottom: calc(400px - var(--shelf) + 78px); }
  .item--end .btn { bottom: calc(400px - var(--shelf) + 12px); }
  .counter__foot { display: none; }
  .counter__track { padding-bottom: 10vh; }

  .cakes { height: auto; }
  .cakes__pin { position: static; height: auto; overflow: visible; padding: 8vh 0 0; }
  .cakes__title { position: static; display: flex; gap: 12px; padding: 0 var(--m) 24px; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; }
  .cakes__w { transform: none !important; }
  .cakes__media { position: relative; inset: auto; margin: 0 auto; width: 78vw; height: 96vw; clip-path: inset(0 round 39vw 39vw 0 0) !important; }
  .cakes__media img { transform: none !important; }
  .cakes__cap { position: relative; inset: auto; padding: 24px var(--m) 0; opacity: 1 !important; transform: none !important; max-width: none; }
  .cakes::after { content: ""; display: block; height: 10vh; }

  .story__pin { height: auto; display: grid; grid-template-columns: 1fr; gap: 0; padding: 4vh 0 0; }
  .story__text, .story__steps, .story__imgs { display: contents; }
  .story__h2 { order: 0; padding: 0 var(--m); margin-bottom: 5vh; }
  .story__step { position: static; opacity: 1 !important; transform: none !important; max-width: none; padding: 0 var(--m); }
  .story__step:nth-child(1) { order: 1; }
  .story__step:nth-child(2) { order: 3; }
  .story__step:nth-child(3) { order: 5; }
  .story__img { position: static; clip-path: none !important; transform: none !important; padding: 24px var(--m) 6vh; }
  .story__img:nth-child(1) { order: 2; }
  .story__img:nth-child(2) { order: 4; }
  .story__img:nth-child(3) { order: 6; padding-bottom: 2vh; }
  .story__img img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .story__img:nth-child(2) img { aspect-ratio: 1; }
  .story__dots { display: none; }
  .creds { padding: 8vh var(--m) 10vh; }
  .creds__in { grid-template-columns: 1fr; gap: 28px; }

  .gallery { height: auto; }
  .gallery__pin { position: static; height: auto; overflow: visible; perspective: none; padding: 8vh var(--m) 10vh; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .gallery__handle { position: static; transform: none; grid-column: 1 / -1; justify-self: center; margin-bottom: 4vh; }
  .tile { position: static; width: auto; transform: none !important; }
  .tile:nth-of-type(3), .tile:nth-of-type(6) { grid-column: 1 / -1; }
  .tile img { aspect-ratio: 4 / 5; object-fit: cover; }
  .tile:nth-of-type(3) img, .tile:nth-of-type(6) img { aspect-ratio: 16 / 10; }

  .visit__in { grid-template-columns: 1fr; gap: 6vh; padding: 12vh var(--m) 10vh; }
  .hours { font-size: 21px; }
  .foot__in { grid-template-columns: 1fr; gap: 32px; }
  .foot__cols { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 520px) {
  .hero__word { --word-size: 19.5vw; }
  .hero__strip-in { grid-template-columns: 1fr; }
  .strip__cell + .strip__cell { border-left: 0; padding-left: 0; }
  .strip__cell { flex-direction: row; justify-content: space-between; align-items: baseline; padding-right: 0; }
  .strip__cell--addr { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 6px; }
  .hero__acts .btn { flex: 1; }
  .item { width: 80vw; }
  .cakes__title { font-size: 44px; }
}