/* Marrow: an example butcher site by Lightplan.
   One bench seen from directly above. The page is the bench, everything on it
   is an object, and one steak travels down it in the right-hand lane. */

:root {
  --sc-canvas:     #13231D;
  --sc-surface:    #1B2F27;
  --sc-ink:        #F1EADF;
  --sc-ink-soft:   #B3BEB4;
  --sc-accent:     #F0A48E;
  --sc-accent-ink: #13231D;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;

  --paper: #F3EEE5;
  --paper-ink: #1A2A23;
  --paper-soft: #56635B;
  --twine-red: #B8463F;

  /* the steak's lane, and the content lane beside it */
  --lane-w: 36vw;
  --r: 4px;
  --obj-shadow: 0 1px 2px rgb(5 12 9 / .28), 10px 18px 30px rgb(5 12 9 / .42);
  --obj-shadow-sm: 0 1px 1px rgb(5 12 9 / .22), 5px 9px 16px rgb(5 12 9 / .32);
}

/* ---- the bench --------------------------------------------------------- */
body {
  background-color: var(--sc-canvas);
  /* big glazed tiles, barely there */
  background-image:
    linear-gradient(rgb(241 234 223 / .03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(241 234 223 / .03) 1px, transparent 1px);
  background-size: 152px 152px;
  background-position: -1px -1px;
  overflow-x: clip;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
img { max-width: 100%; }

/* Late window light raking across the bench. Above everything, soft-light, so
   it falls on the steak, the prints and the type alike. */
.sun {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  mix-blend-mode: soft-light; overflow: hidden;
}
.sun i {
  position: absolute; top: -30vh; height: 160vh;
  background: linear-gradient(180deg, rgb(255 238 210 / 0) 0%, rgb(255 236 206 / .62) 28%, rgb(255 236 206 / .62) 72%, rgb(255 238 210 / 0) 100%);
  filter: blur(30px);
  transform: skewX(-30deg);
  animation: sun-drift 28s ease-in-out infinite alternate;
}
.sun i:nth-child(1) { left: 2vw;  width: 15vw; }
.sun i:nth-child(2) { left: 21vw; width: 7vw; }
.sun i:nth-child(3) { left: 33vw; width: 15vw; }
.sun i:nth-child(4) { left: 52vw; width: 6vw; }
.sun::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 20%, transparent 55%, rgb(0 0 0 / .55) 100%);
}
@keyframes sun-drift { to { translate: 7vw 0; } }

/* ---- small chrome ------------------------------------------------------ */
.note {
  position: relative; z-index: 5; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  padding: 11px var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + 230px);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  background: rgb(4 10 7 / .34);
  border-bottom: 1px solid rgb(241 234 223 / .08);
}
.note a { color: var(--sc-ink); text-underline-offset: 3px; }
.note__back { font-weight: 600; }

.mark {
  /* a small enamel shop sign */
  position: fixed; z-index: 60; top: 14px; left: calc(var(--sc-gutter) - 14px);
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 14px 10px; border-radius: var(--r);
  background: rgb(15 29 23 / .9); box-shadow: 0 0 0 1px rgb(241 234 223 / .14) inset, 0 6px 18px rgb(4 10 7 / .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--sc-ink); text-decoration: none;
  opacity: 0; translate: 0 -6px; pointer-events: none;
  transition: opacity 260ms var(--sc-ease-out), translate 260ms var(--sc-ease-out);
}
.mark.is-on, .mark:focus-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.mark__word {
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.6rem;
  font-variation-settings: "wdth" 78, "opsz" 48; letter-spacing: -0.03em; line-height: 1;
}
.mark__status { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.mark__status b { color: var(--sc-ink); font-weight: 600; }
.mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 2px; }

/* The docket: an order slip clipped to the top edge of the bench. */
.docket {
  position: fixed; z-index: 60; top: 0; right: clamp(16px, 3vw, 44px);
  width: 214px; color: var(--paper-ink);
  filter: drop-shadow(0 2px 2px rgb(4 10 7 / .25)) drop-shadow(6px 12px 18px rgb(4 10 7 / .35));
}
.docket__panel {
  background: var(--paper);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .5), transparent 40%);
}
.docket__tab {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 20px 16px 16px; color: var(--paper-ink);
  background: var(--paper) linear-gradient(180deg, rgb(255 255 255 / .5), transparent 40%);
  font: 600 0.78rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase;
  /* torn bottom edge, only while closed */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 12px 6px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 12px 6px repeat-x;
  transition: translate 140ms var(--sc-ease-out);
}
.docket__tab::before {
  /* the bulldog clip */
  content: ""; position: absolute; top: -2px; left: 50%; width: 46px; height: 12px; translate: -50% 0;
  background: linear-gradient(180deg, #4b5650, #2b332f); border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 3px rgb(0 0 0 / .3);
}
.docket[data-open] .docket__tab { -webkit-mask: none; mask: none; }
@media (hover: hover) and (pointer: fine) { .docket__tab:hover { translate: 0 2px; } }
.docket__tab:active { translate: 0 3px; }
.docket__tab:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.docket__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px; background: var(--paper-ink); color: var(--paper);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.docket__count.is-bump { animation: bump 420ms var(--sc-ease-out); }
@keyframes bump { 30% { scale: 1.28; } 100% { scale: 1; } }
.docket__panel {
  padding: 4px 16px 18px; font-size: var(--sc-t-sm);
  border-top: 1px dashed rgb(26 42 35 / .25);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 12px 6px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / 12px 6px repeat-x;
}
.docket__panel[hidden] { display: none; }
.docket__links { list-style: none; margin: 0; padding: 10px 0 12px; border-bottom: 1px dashed rgb(26 42 35 / .25); }
.docket__links a {
  display: block; padding: 7px 0; color: var(--paper-ink); text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem; font-variation-settings: "wdth" 85;
}
.docket__links a:hover { color: #8E3A33; }
.docket__links a:focus-visible, .docket__panel a:focus-visible, .docket__panel button:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.docket__items { list-style: none; margin: 0; padding: 10px 0 0; }
.docket__items li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 6px 0; }
.docket__items .n { font-weight: 600; }
.docket__items .u { grid-column: 1; font-size: var(--sc-t-xs); color: var(--paper-soft); }
.docket__items .q { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 2px; }
.docket__items .q button {
  all: unset; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r);
}
.docket__items .q button:hover { background: rgb(26 42 35 / .08); }
.docket__items .q svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.docket__items output { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.docket__empty { margin: 12px 0 0; color: var(--paper-soft); font-size: var(--sc-t-xs); }
.docket__total { margin: 10px 0 14px; padding-top: 10px; border-top: 1px solid rgb(26 42 35 / .2); display: flex; justify-content: space-between; }
.docket__total[hidden] { display: none; }
.docket__total b { font-variant-numeric: tabular-nums; }
.docket .btn { margin-top: 12px; }

/* ---- buttons and links ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border: 0; border-radius: var(--r);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 2px 3px rgb(4 10 7 / .25), 4px 10px 18px rgb(4 10 7 / .25);
  cursor: pointer;
  transition: translate 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { translate: 0 -1px; background: #F5B4A2; } }
.btn:active { translate: 0 1px; scale: 0.98; }
.btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.btn--block { width: 100%; box-sizing: border-box; }
.docket .btn { background: var(--paper-ink); color: var(--paper); box-shadow: none; }
.docket .btn:hover { background: #24382f; }
.docket .btn:focus-visible { outline-color: var(--paper-ink); }

.link {
  all: unset; cursor: pointer; color: var(--sc-ink); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgb(241 234 223 / .45);
  transition: color 140ms var(--sc-ease-out), text-decoration-color 140ms var(--sc-ease-out);
}
.link:hover { color: var(--sc-accent); text-decoration-color: currentColor; }
.link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }

/* ---- type ---------------------------------------------------------------- */
.h2 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 650;
  font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.025em;
  font-variation-settings: "wdth" 84, "opsz" 72;
  text-wrap: balance;
}
.lane p { color: var(--sc-ink-soft); line-height: 1.62; text-wrap: pretty; max-width: 34rem; }

/* every content lane leaves the right-hand side of the bench to the steak */
.lane {
  position: relative; z-index: 1;
  box-sizing: border-box; width: calc(100% - var(--lane-w));
  padding-left: var(--sc-gutter); padding-right: 2vw;
}

/* objects lying on the bench */
.print {
  position: relative; z-index: 1; margin: 0;
  box-sizing: border-box; padding: 10px 10px 36px;
  background: #F6F2EA; box-shadow: var(--obj-shadow);
}
.print img { display: block; width: 100%; height: auto; }
.print figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  font-size: 0.8rem; font-style: italic; color: var(--paper-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* pads: invisible places on the bench where the steak comes to rest */
.pad { aspect-ratio: 1200 / 1179; pointer-events: none; }
.pad__rest {
  display: block; width: 100%; height: auto;
  rotate: var(--rot, 0deg);
  filter: drop-shadow(8px 14px 14px rgb(5 12 9 / .45));
  opacity: 0; visibility: hidden;
}
html:not(.js) .pad__rest, .rm .pad__rest { opacity: 1; visibility: visible; }

/* ---- the carried steak --------------------------------------------------- */
.cut { display: none; }
.js:not(.rm) .cut {
  display: block; position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 0; pointer-events: none; will-change: transform;
}
.js:not(.rm) .cut.is-top { z-index: 2; }
.cut.is-handed { visibility: hidden; }
.cut__body, .cut__shadow {
  position: absolute; left: 0; top: 0; max-width: none; height: auto;
  width: var(--cut-w, 460px);
  will-change: transform;
  transform-origin: 50% 50%;
}
.cut__shadow { filter: brightness(0) blur(14px); opacity: 0.5; }

/* ---- 1 · the block -------------------------------------------------------- */
.hero { position: relative; height: calc(100svh - var(--note-h, 0px)); min-height: 600px; max-height: 1200px; overflow: clip; }
.hero__scene { position: absolute; inset: 0; }
.hp { position: absolute; display: block; max-width: none; height: auto; will-change: transform; }
.hp--block { left: 51vw; top: max(26vh, 180px); width: min(38vw, 64vh); }
.block { display: block; width: 100%; height: auto; filter: drop-shadow(4px 6px 4px rgb(4 10 7 / .35)) drop-shadow(16px 30px 34px rgb(4 10 7 / .5)); }
.pad--hero { position: absolute; left: 50%; top: 50%; width: 88%; translate: -50% -52%; }
.hp--garlic { left: 42vw; top: 66vh; width: 7vw; rotate: -18deg; filter: drop-shadow(5px 9px 9px rgb(4 10 7 / .45)); }
.hp--twine { right: -2.5vw; top: 13vh; width: 10vw; rotate: 30deg; filter: drop-shadow(6px 10px 10px rgb(4 10 7 / .45)); }
.hp--rosemary {
  right: 3vw; bottom: -14vh; width: 19vw; z-index: 1; rotate: 26deg;
  filter: blur(1.6px) drop-shadow(18px 30px 18px rgb(4 10 7 / .45));
}
.hero__word {
  position: absolute; left: calc(var(--sc-gutter) - 0.04em); top: clamp(36px, 7vh, 80px); margin: 0;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(6.5rem, 19vw, 21rem); line-height: 0.82; letter-spacing: -0.045em;
  font-variation-settings: "wdth" 76, "opsz" 96;
  color: var(--sc-ink);
  will-change: transform;
}
.hero__copy {
  position: absolute; z-index: 1; left: var(--sc-gutter); bottom: max(9vh, 56px);
  width: min(27rem, 40vw);
}
.hero__line { margin: 0 0 26px; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.hero__acts { display: flex; align-items: center; gap: 26px; margin: 0; }

/* ---- 2 · no rush ---------------------------------------------------------- */
.intro { position: relative; padding-block: 20vh 16vh; }
.intro__copy > * + * { margin-top: 18px; }
.intro__copy .h2 { margin-bottom: 26px; max-width: 13ch; }
.print--hands { width: min(29vw, 440px); margin: 9vh 0 0 14vw; rotate: -2.5deg; }
.pad--intro { position: absolute; right: 9vw; top: 34%; width: min(25vw, 380px); }

/* ---- 3 · the cold room ----------------------------------------------------- */
.cold__copy { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.cold__copy .h2 { margin-bottom: 26px; }
.cold__lines { display: grid; max-width: min(30rem, 40vw); }
.cold__lines > p { grid-area: 1 / 1; margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }
.facts { display: flex; flex-wrap: wrap; gap: 14px 34px; max-width: min(30rem, 40vw); margin: 38px 0 0; padding-top: 22px; border-top: 1px solid rgb(241 234 223 / .16); }
.facts dt { font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.facts dd { margin: 6px 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; font-variation-settings: "wdth" 85; }
.print--cold {
  position: absolute; right: 8vw; top: 50%; translate: 0 -50%;
  width: min(25vw, 48vh); rotate: 2deg;
}
.pad--cold {
  position: absolute; top: 50%; translate: 0 -50%;
  width: min(21vw, 330px);
  left: calc(100% - 8vw - min(25vw, 48vh) - min(14vw, 210px));
}

/* ---- 4 · the counter ------------------------------------------------------- */
.counter { position: relative; padding-block: 16vh 12vh; }
.counter__head { margin-bottom: 7vh; }
.counter__head p { margin: 18px 0 0; }
.slab {
  position: relative; margin-inline: var(--sc-gutter);
  padding: clamp(28px, 4vw, 64px);
  background: #E9E6E1 url("/marrow/img/marble-1920.webp") center / cover;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .55) inset, 0 -4px 0 rgb(0 0 0 / .08) inset,
              0 2px 3px rgb(4 10 7 / .35), 18px 34px 60px rgb(4 10 7 / .5);
}
.slab__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(28px, 3.4vw, 56px) clamp(20px, 3vw, 48px);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  grid-template-areas: "scotch lamb snags tomahawk" "porchetta porchetta chicken tomahawk";
}
.item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.item--scotch { grid-area: scotch; }
.item--lamb { grid-area: lamb; }
.item--snags { grid-area: snags; }
.item--porchetta { grid-area: porchetta; }
.item--chicken { grid-area: chicken; }
.item--tomahawk { grid-area: tomahawk; justify-content: center; }
.item__img {
  display: block; width: 100%; max-width: 280px; height: auto;
  filter: drop-shadow(3px 5px 3px rgb(60 45 38 / .3)) drop-shadow(10px 18px 18px rgb(60 45 38 / .3));
}
.item--scotch .item__img { rotate: -6deg; }
.item--lamb .item__img { rotate: 4deg; }
.item--snags .item__img { max-width: 230px; rotate: 12deg; }
.item--porchetta .item__img { max-width: 480px; rotate: -3deg; }
.item--chicken .item__img { max-width: 210px; rotate: 6deg; }
.pad--counter { width: min(100%, 22vw, 360px); }

.ticket {
  position: relative; box-sizing: border-box; width: min(100%, 250px);
  padding: 12px 14px 12px 28px;
  background: var(--paper); color: var(--paper-ink);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgb(60 45 38 / .25), 4px 8px 14px rgb(60 45 38 / .22);
  rotate: -1.5deg;
  z-index: 1; /* the steak slides under the tickets */
}
.ticket::before {
  /* punched hole */
  content: ""; position: absolute; left: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%;
  background: #CFCBC4; box-shadow: inset 0 1px 2px rgb(0 0 0 / .35);
}
.item:nth-child(2n) .ticket { rotate: 1.5deg; }
.ticket h3 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 650; font-size: 1.22rem; line-height: 1.1;
  font-variation-settings: "wdth" 84;
}
.ticket p { margin: 5px 0 0; font-size: 0.84rem; line-height: 1.4; color: var(--paper-soft); }
.ticket .ticket__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ticket__price { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.3rem; color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.ticket__price small { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.78rem; color: var(--paper-soft); }
.ticket__add {
  all: unset; cursor: pointer; box-sizing: border-box;
  padding: 8px 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r); background: var(--paper-ink); color: var(--paper);
  font: 600 0.82rem/1 var(--sc-font-text);
  transition: background-color 140ms var(--sc-ease-out), scale 120ms var(--sc-ease-out);
}
.ticket__add:hover { background: #2a4036; }
.ticket__add:active { scale: 0.96; }
.ticket__add:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.ticket__add[data-n]:not([data-n="0"])::after {
  content: attr(data-n); display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--sc-accent); color: var(--paper-ink); font-size: 0.72rem;
}
.ticket--big { width: min(100%, 270px); rotate: 1deg; }

/* ---- 5 · come by ----------------------------------------------------------- */
.visit { position: relative; padding-block: 16vh 12vh; }
.visit__lane { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4vw; align-items: end; }
.print--shop { rotate: -1.6deg; }
.visit__info .h2 { margin-bottom: 24px; }
.hours { margin: 0 0 22px; display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid rgb(241 234 223 / .14); }
.hours dt { color: var(--sc-ink-soft); }
.hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.visit__info p { margin: 0 0 16px; }
.visit__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pad--visit { position: absolute; right: 9vw; top: 46%; width: min(22vw, 340px); }

/* ---- 6 · quiet --------------------------------------------------------------- */
.quiet { position: relative; min-height: 96vh; display: grid; align-items: center; }
.quiet__line {
  position: relative; z-index: 1; margin: 0; padding-left: var(--sc-gutter);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.05;
  letter-spacing: -0.02em; font-variation-settings: "wdth" 84; max-width: 11ch;
}
.pad--quiet { position: absolute; right: 16vw; top: 50%; translate: 0 -50%; width: min(27vw, 420px); }

/* ---- 7 · the paper ------------------------------------------------------------ */
.wrap__stage { isolation: isolate; }
.wrap__copy { position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: 2; }
.wrap__copy .h2 { font-size: var(--sc-t-3xl); max-width: 9ch; }
.wrap__lede { margin: 20px 0 30px; }
.wrap__sheet {
  position: absolute; z-index: 0; left: 50vw; top: -8vh; width: 62vw; height: 118vh;
  background: var(--paper) url("/marrow/img/paper-1920.webp") 30% 50% / cover;
  rotate: -3deg;
  box-shadow: -2px 3px 4px rgb(4 10 7 / .3), -22px 30px 50px rgb(4 10 7 / .45);
}
.parcel {
  --P: min(30vw, 58vh);
  position: absolute; z-index: 1; left: 74vw; top: 50%; width: var(--P); height: var(--P);
  translate: -50% -50%; perspective: 1400px;
}
.pad--wrap { position: absolute; left: 50%; top: 50%; width: 82%; translate: -50% -50%; }
.parcel.has-steak .pad__rest { opacity: 1; visibility: visible; }
.parcel::before {
  /* the raised body of the finished parcel */
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  box-shadow: 0 2px 3px rgb(40 30 25 / .25), 14px 22px 30px rgb(40 30 25 / .32);
  opacity: var(--body, 0);
}
.flaps { position: absolute; inset: 0; transform-style: preserve-3d; }
.flap {
  position: absolute; box-sizing: border-box;
  background: #EEE9E0 url("/marrow/img/paper-flat.webp") center / 480px;
  backface-visibility: visible;
  opacity: var(--o, 0);
  box-shadow: 0 0 0 1px rgb(120 105 90 / .08), 2px 3px 6px rgb(40 30 25 / .18);
}
.flap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--sa, 90deg), rgb(30 22 16 / .5), rgb(30 22 16 / .05));
  opacity: var(--shade, 0);
}
.flap--l { left: 0; top: 0; width: 57%; height: 100%; transform-origin: 0 50%; --sa: 270deg;
  transform: rotateY(calc((1 - var(--f, 0)) * -180deg)) translateZ(1px); }
.flap--r { right: 0; top: 0; width: 57%; height: 100%; transform-origin: 100% 50%; --sa: 90deg;
  transform: rotateY(calc((1 - var(--f, 0)) * 180deg)) translateZ(2px); }
.flap--b { left: 0; bottom: 0; width: 100%; height: 57%; transform-origin: 50% 100%; --sa: 0deg;
  transform: rotateX(calc((1 - var(--f, 0)) * -180deg)) translateZ(3px); }
.flap--t { left: 0; top: 0; width: 100%; height: 57%; transform-origin: 50% 0; --sa: 180deg;
  transform: rotateX(calc((1 - var(--f, 0)) * 180deg)) translateZ(4px); }

.twine {
  position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; overflow: visible; pointer-events: none;
  transform: translateZ(6px);
  filter: drop-shadow(1px 2px 1.5px rgb(40 30 25 / .4));
}
.twine__m { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 1 1; }
.twine__m--h { stroke-dashoffset: var(--th, 1); }
.twine__m--v { stroke-dashoffset: var(--tv, 1); }
.twine__s { fill: none; stroke: #F6F1E8; stroke-width: 0.9; stroke-linecap: round; }
.twine__c { fill: none; stroke: var(--twine-red); stroke-width: 0.9; stroke-dasharray: 1.1 1.1; stroke-linecap: butt; }
.twine__bow { opacity: var(--bow, 0); transform-origin: 49% 51%; transform-box: view-box; scale: calc(0.7 + var(--bow, 0) * 0.3); }

.tag {
  position: absolute; left: 47%; top: 56%; width: 50%; box-sizing: border-box;
  padding: 12px 14px 13px 30px; border-radius: 3px;
  display: grid; gap: 3px;
  background: #F8F4ED; color: var(--paper-ink);
  box-shadow: 0 1px 1px rgb(40 30 25 / .25), 6px 12px 18px rgb(40 30 25 / .3);
  transform: translateZ(8px) translateY(calc((1 - var(--tag, 0)) * -40px)) rotate(calc(9deg - (1 - var(--tag, 0)) * 14deg)) scale(calc(1.15 - var(--tag, 0) * 0.15));
  opacity: var(--tag, 0);
}
.tag::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #D8D2C8; box-shadow: inset 0 1px 2px rgb(0 0 0 / .35);
}
.tag__shop { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-soft); }
.tag__for { font-family: var(--sc-font-display); font-weight: 650; font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1.1; font-variation-settings: "wdth" 82; overflow-wrap: anywhere; }
.tag__when, .tag__items { font-size: 0.8rem; color: var(--paper-ink); }
.tag__items { color: var(--paper-soft); }

/* the order form, on the bench beside the parcel */
.order { display: grid; gap: 20px; max-width: 30rem; }
.order__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 7px; margin: 0; min-width: 0; }
.field > span, .field legend { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field--note { grid-column: 1 / -1; }
.field input, .field select {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 16px/1.2 var(--sc-font-text); color: var(--sc-ink);
  background: rgb(4 10 7 / .28); border: 1px solid rgb(241 234 223 / .26); border-radius: var(--r);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field select option { color: #13231D; }
.field input::placeholder { color: rgb(179 190 180 / .62); }
.field input:hover, .field select:hover { border-color: rgb(241 234 223 / .45); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: var(--sc-accent); }
.field--when { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.field--when legend { grid-column: 1 / -1; padding: 0; margin-bottom: 7px; }
.field--when label { position: relative; }
.field--when input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.field--when span {
  display: grid; place-items: center; min-height: 48px; box-sizing: border-box;
  border: 1px solid rgb(241 234 223 / .26); color: var(--sc-ink-soft); font-weight: 500;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.field--when label:first-of-type span { border-radius: var(--r) 0 0 var(--r); }
.field--when label:last-of-type span { border-radius: 0 var(--r) var(--r) 0; border-left: 0; }
.field--when input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.field--when input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.order__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.order__sum { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 18rem; }
.order__err { margin: 0; color: var(--sc-accent); font-size: var(--sc-t-sm); }
.order__err[hidden], .order__done[hidden], .order[hidden] { display: none; }
.order__done { max-width: 28rem; padding: 22px 24px; border: 1px solid rgb(241 234 223 / .22); border-radius: var(--r); background: rgb(4 10 7 / .24); }
.order__done:focus { outline: none; }
.order__done-title { margin: 0 0 8px !important; font-family: var(--sc-font-display); font-weight: 650; font-size: 1.5rem; color: var(--sc-ink) !important; font-variation-settings: "wdth" 84; }
.order__done p { margin: 0 0 14px; }

.order-mobile { display: none; }

/* ---- footer ------------------------------------------------------------------ */
.foot { position: relative; z-index: 1; padding: 9vh var(--sc-gutter) 5vh; border-top: 1px solid rgb(241 234 223 / .1); background: rgb(4 10 7 / .22); }
.foot__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; align-items: start; }
.foot__row p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.foot__row a { color: var(--sc-ink); text-underline-offset: 3px; }
.foot__word {
  font-family: var(--sc-font-display); font-weight: 700; font-size: 3.4rem !important; line-height: 0.8 !important;
  letter-spacing: -0.045em; color: var(--sc-ink) !important; font-variation-settings: "wdth" 76, "opsz" 96;
}
.foot__note { margin: 6vh 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot__note a { color: var(--sc-ink); }

/* ---- phones ---------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --lane-w: 0px; }
  .note { padding-right: var(--sc-gutter); }
  .mark { top: 14px; }
  .mark__word { font-size: 1.35rem; }
  .docket { top: auto; bottom: 0; right: 14px; width: min(260px, calc(100vw - 28px)); display: flex; flex-direction: column-reverse; }
  .docket__tab { padding: 15px 16px 18px; -webkit-mask: none; mask: none; border-radius: 4px 4px 0 0; }
  .docket__tab::before { display: none; }
  .docket__panel { -webkit-mask: none; mask: none; border-top: 0; border-bottom: 1px dashed rgb(26 42 35 / .25); border-radius: 4px 4px 0 0; max-height: 64vh; overflow: auto; }
  .docket:not([data-open]) { width: auto; }
  .docket:not([data-open]) .docket__tab { gap: 14px; }

  .lane { width: 100%; padding-inline: var(--sc-gutter); }
  .lane p { max-width: none; }

  .hero { min-height: 560px; }
  .hero__word { top: 5svh; font-size: 28vw; }
  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); bottom: auto; top: calc(5svh + 28vw * 0.86 + 14px); width: auto; }
  .hero__line { font-size: 1.04rem; margin-bottom: 18px; }
  .hero__acts { gap: 22px; }
  .btn { padding: 14px 20px; }
  .hp--block { left: 7vw; top: auto; bottom: max(4svh, 26px); width: 86vw; }
  .hp--garlic { display: none; }
  .hp--twine { display: none; }
  .hp--rosemary { right: -8vw; bottom: -12svh; width: 40vw; }

  .intro { padding-block: 12vh 8vh; }
  .print--hands { width: 78vw; margin: 6vh 0 0 4vw; }
  .pad--intro { position: relative; right: auto; top: auto; width: 60vw; margin: 7vh auto 0; }

  .cold__copy { top: 9svh; translate: none; }
  .cold__copy .h2 { margin-bottom: 14px; }
  .cold__lines { max-width: none; }
  .cold__lines > p { font-size: 1.05rem; }
  .facts { margin-top: 18px; padding-top: 14px; gap: 10px 22px; }
  .facts dd { font-size: 1rem; }
  .print--cold { right: 6vw; top: auto; bottom: 7svh; translate: none; width: 44vw; }
  .pad--cold { left: 6vw; width: 50vw; top: 60%; }

  .counter { padding-block: 12vh 8vh; }
  .slab { margin-inline: 3vw; padding: 26px 18px; }
  .slab__grid { grid-template-columns: 1fr; grid-template-areas: none; gap: 34px; }
  .item, .item--scotch, .item--lamb, .item--snags, .item--porchetta, .item--chicken, .item--tomahawk { grid-area: auto; }
  .item { flex-direction: row; align-items: center; gap: 14px; }
  .item--tomahawk { order: -1; flex-direction: column; }
  .item__img { width: 42%; flex: none; }
  .item--porchetta .item__img { width: 46%; }
  .ticket { flex: 1; width: auto; }
  .pad--counter { width: 62vw; }
  .ticket--big { width: 100%; }

  .visit { padding-block: 12vh 4vh; }
  .visit__lane { grid-template-columns: 1fr; gap: 6vh; }
  .pad--visit { position: relative; right: auto; top: auto; width: 56vw; margin: 6vh auto 0; }

  .quiet { min-height: 90svh; align-items: start; padding-top: 14svh; box-sizing: border-box; }
  .pad--quiet { right: 50%; translate: 50% -50%; top: 60%; width: 66vw; }

  .wrap__copy { top: 6svh; translate: none; }
  .wrap__copy .h2 { font-size: 2.4rem; max-width: none; }
  .wrap__lede { margin: 12px 0 0; font-size: 0.98rem; }
  .wrap__sheet { left: -10vw; top: 34svh; width: 120vw; height: 80svh; rotate: -4deg; }
  .parcel { --P: min(76vw, 44svh); left: 50%; top: 62%; }
  .wrap__formslot[data-moved] { display: none; }
  .order-mobile { display: block; position: relative; z-index: 1; padding: 8vh var(--sc-gutter) 10vh; }
  .order__fields { grid-template-columns: 1fr; }
  .order__foot { flex-direction: column; align-items: stretch; }
  .order__foot .btn { width: 100%; }

  .foot { padding-bottom: 96px; }
  .foot__row { grid-template-columns: 1fr 1fr; }
  .foot__word { grid-column: 1 / -1; }
}

/* ---- motion off --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sun i { animation: none; }
}
.rm .parcel { --body: 1; }
.rm .flap { --f: 1; --o: 1; }
.rm .twine { --th: 0; --tv: 0; --bow: 1; }
.rm .tag { --tag: 1; }
/* with motion off there is nothing to hold the wrap for, so it takes one screen */
.rm .wrap { height: auto !important; }