/* ═══════════════════════════════════════════════════════════════════
   PlateDiary — the homepage (2026-10-19 redesign, "Tonight's table").

   Loaded after css/pages.css, which supplies the Cobalt tokens, the fonts,
   the base element rules (body.pd-page), .pill, the shared header and the
   menu-board footer. This file is the homepage only: the table you snap in
   the hero, then the app served as a dinner in numbered courses.

   House rules: flat fills (no outlines, no dashes), Fredoka / Handlee /
   Instrument Sans, and motion that rides the app's springs — either
   js/spring.js (transform and opacity only) or CSS transitions on the
   --peel / --snap / --soft linear() samples. No easing curves.
   ═══════════════════════════════════════════════════════════════════ */

/* Registered so the Look try-on can transition the page's room. */
@property --surface { syntax: '<color>'; inherits: true; initial-value: #EEF0F7; }
@property --sheet { syntax: '<color>'; inherits: true; initial-value: #FBFCFF; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #131A2E; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #2F4FA0; }

:root {
  --gut: clamp(16px, 4vw, 48px);
  --page: min(1180px, 100% - 2 * var(--gut));
  transition: --surface var(--t-soft) var(--soft), --sheet var(--t-soft) var(--soft),
    --ink var(--t-soft) var(--soft), --accent var(--t-soft) var(--soft);
}

.pd-home {
  font-size: 17px;
}

.pd-home main {
  display: block;
  overflow-x: clip;
}

.i--sm {
  width: 16px;
  height: 16px;
}

/* ═══ 01 · the hero: the table you snap ═════════════════════════════ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas:
    "copy stage"
    "more stage";
  column-gap: clamp(24px, 5vw, 80px);
  width: var(--page);
  min-height: min(100svh, 960px);
  margin-inline: auto;
  padding: 108px 0 64px;
  isolation: isolate;
}

.hero__copy {
  grid-area: copy;
  align-self: end;
  padding-bottom: 22px;
}

.hero__more {
  grid-area: more;
  align-self: start;
}

.release-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font: 600 14px/1.2 var(--font-ui);
  text-decoration: none;
  transition: translate var(--t-snap) var(--snap);
}

.release-chip:hover {
  translate: 0 -2px;
}

.release-chip b {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.release-chip span {
  min-width: 0;
}

.hero__title {
  margin-top: 26px;
  font: 600 clamp(48px, 6.3vw, 92px)/0.94 var(--font-display);
  letter-spacing: -0.035em;
}

.hero__kicker {
  display: block;
  margin-bottom: 18px;
  font: 600 14px/1.3 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__line {
  display: block;
}

.hero__line.hand {
  margin-top: 0.12em;
  font-size: 0.74em;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  rotate: -2deg;
  transform-origin: 0 50%;
}

.hero__lede {
  max-width: 31em;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.hero .store-row,
.store-row--plain {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero .store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 22px 0 18px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  box-shadow: var(--shadow-float);
  transition: translate var(--t-snap) var(--snap), opacity 120ms var(--snap);
}

.hero .store-btn:hover {
  translate: 0 -3px;
}

.hero .store-btn:active {
  opacity: 0.72;
}

.hero .store-btn__label {
  display: grid;
  gap: 1px;
}

.hero .store-btn__kicker {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 1.4px;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.75;
}

.hero .store-btn__name {
  font: 600 19px/1.15 var(--font-display);
  white-space: nowrap;
}

.hero__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 18px;
  font: 500 14px/1.4 var(--font-ui);
  color: var(--ink-muted);
}

.hero__fine > * + *::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 10px 3px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.hero__fine a {
  color: var(--accent-text);
  font-weight: 600;
}

/* ── the stage: a placemat, the photo, the saves ── */

.hero__stage {
  grid-area: stage;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 470px, calc((100svh - 180px) * 0.75));
  min-width: 280px;
}

/* a big flat plate behind the table */
.hero__stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0 60%, color-mix(in oklab, var(--accent-soft) 55%, var(--surface)) 60.5% 100%);
  z-index: -1;
}

.table {
  position: relative;
  aspect-ratio: 780 / 1040;
}

.table__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 34px;
  background: #5B3A22;
  box-shadow: var(--shadow-lift);
  rotate: -1.5deg;
}

.table__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.table__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(142, 167, 236, 0) 0%, rgba(142, 167, 236, 0.45) 78%, rgba(255, 255, 255, 0.95) 100%);
  opacity: 0;
  pointer-events: none;
}

.table__flash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
}

.table__chip {
  position: absolute;
  left: 50%;
  top: 16px;
  translate: -50% 0;
  display: grid;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(13, 17, 32, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font: 500 14px/1.2 var(--font-ui);
  white-space: nowrap;
  z-index: 3;
}

.table__chip > span {
  grid-area: 1 / 1;
  transition: opacity var(--t-snap) var(--snap);
}

.table__hint {
  font-size: 16px;
}

.table__done {
  opacity: 0;
}

.is-snapped .table__hint {
  opacity: 0;
}

.is-snapped .table__done {
  opacity: 1;
}

.shutter {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 4;
  transition: scale var(--t-snap) var(--snap), opacity var(--t-snap) var(--snap);
}

.shutter span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: scale 140ms var(--snap);
}

.shutter:active span {
  scale: 0.86;
}

.is-snapped .shutter {
  scale: 0.72;
  opacity: 0.85;
}

/* the saves, laid exactly over their dishes in the photo */
.saves {
  position: absolute;
  inset: 0;
  rotate: -1.5deg;
  pointer-events: none;
  z-index: 5;
}

.save {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  translate: -50% -50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  opacity: 0;
  visibility: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.is-live .save {
  visibility: visible;
  pointer-events: auto;
}

.save.is-top {
  z-index: 2;
}

.save.is-held {
  z-index: 3;
}

.save:active {
  cursor: grabbing;
}

.save img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.save:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 18px;
}

.save__tag {
  position: absolute;
  left: 50%;
  top: 88%;
  translate: -50% 0;
  padding: 5px 11px 4px;
  border-radius: 9px;
  background: var(--die);
  color: #131A2E;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.45);
  rotate: calc(var(--r) * -0.5deg);
  opacity: 0;
  transition: opacity var(--t-soft) var(--soft);
  pointer-events: none;
}

.is-named .save__tag {
  opacity: 1;
}

.hero__throw {
  position: absolute;
  right: -2%;
  bottom: -44px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  color: var(--accent-text);
  rotate: -3deg;
  opacity: 0;
  transition: opacity var(--t-soft) var(--soft);
}

.hero__throw svg {
  flex: none;
  scale: -1 -1;
}

.is-named .hero__throw {
  opacity: 1;
}

/* ═══ the courses ═══════════════════════════════════════════════════ */

.course,
.panel {
  width: var(--page);
  margin-inline: auto;
  padding-top: clamp(80px, 10vw, 136px);
}

.course__head {
  max-width: 700px;
}

.course__no {
  display: flex;
  align-items: center;
  gap: 12px;
}

.course__no b {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sheet) 0 57%, var(--accent-soft) 59% 100%);
  color: var(--accent-text);
  font: 600 20px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.course__no .hand {
  font-size: 21px;
  line-height: 1.2;
  color: var(--accent-text);
  rotate: -1.5deg;
}

.pd-home h2 {
  margin: 18px 0 18px;
  font: 600 clamp(36px, 4.8vw, 60px)/1.02 var(--font-display);
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.course__head > p:not(.course__no) {
  max-width: 36em;
  font-size: clamp(17px, 1.45vw, 19px);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.course__head > p:not(.course__no) + p {
  margin-top: 14px;
}

.course--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font: 600 15px/1.4 var(--font-ui);
  color: var(--accent-text);
}

.tier--quiet {
  display: block;
  max-width: 46em;
  font-weight: 500;
  color: var(--ink-muted);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: 400 20px/1.2 var(--font-hand);
  text-decoration: none;
  cursor: pointer;
}

.more-link::after {
  content: '→';
  font-family: var(--font-ui);
  transition: translate var(--t-snap) var(--snap);
}

.more-link:hover::after {
  translate: 4px 0;
}

/* a short list, each point a little plate */
.facts {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.facts li {
  position: relative;
  padding-left: 34px;
  color: var(--ink-muted);
}

.facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0 40%, var(--accent) 42% 100%);
}

.facts b {
  color: var(--ink);
}

/* the reveal: sections rise in once, on the soft spring. Only when
   landing.js is running (it sets .rise-ready), so a blocked script can
   never leave the page blank. */
.rise-ready [data-rise] {
  opacity: 0;
  translate: 0 32px;
  transition: opacity var(--t-soft) var(--soft), translate var(--t-peel) var(--peel);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.rise-ready [data-rise].is-in {
  opacity: 1;
  translate: 0 0;
}

/* ═══ 02 · three seconds ════════════════════════════════════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
  padding: 0;
  list-style: none;
}

.step {
  padding: 16px 16px 26px;
  border-radius: 30px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 8px 8px;
  font: 600 22px/1.2 var(--font-display);
}

.step p {
  margin: 0 8px;
  font-size: 16px;
  color: var(--ink-muted);
}

.step__n {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 400 18px/1 var(--font-hand);
}

.step__art {
  position: relative;
  height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: var(--sunken);
}

.vf {
  position: relative;
  width: 116px;
  height: 154px;
  overflow: hidden;
  border-radius: 16px;
  rotate: -3deg;
  box-shadow: var(--shadow-float);
}

.vf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* viewfinder corners, drawn as fills */
.vf::after {
  content: '';
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(#FFF 0 0) 0 0 / 16px 3px, linear-gradient(#FFF 0 0) 0 0 / 3px 16px,
    linear-gradient(#FFF 0 0) 100% 0 / 16px 3px, linear-gradient(#FFF 0 0) 100% 0 / 3px 16px,
    linear-gradient(#FFF 0 0) 0 100% / 16px 3px, linear-gradient(#FFF 0 0) 0 100% / 3px 16px,
    linear-gradient(#FFF 0 0) 100% 100% / 16px 3px, linear-gradient(#FFF 0 0) 100% 100% / 3px 16px;
  background-repeat: no-repeat;
}

.vf__shutter {
  position: absolute;
  bottom: 14px;
  right: calc(50% - 98px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sheet) 0 58%, var(--ink-faint) 62% 100%);
}

.lift__save {
  width: 128px;
  rotate: -6deg;
  transition: translate var(--t-peel) var(--peel), rotate var(--t-peel) var(--peel), scale var(--t-peel) var(--peel);
  transition-delay: 600ms;
}

.is-in .lift__save {
  translate: 0 -10px;
  rotate: 5deg;
  scale: 1.08;
}

.lift__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 30%, transparent) 80%, color-mix(in oklab, var(--accent) 70%, var(--sheet)));
  translate: 0 -110%;
  opacity: 0.9;
  transition: translate 1100ms var(--soft), opacity 400ms var(--soft) 900ms;
  transition-delay: 300ms, 1000ms;
}

.is-in .lift__band {
  translate: 0 260%;
  opacity: 0;
}

.step__art--keep {
  align-content: center;
  gap: 18px;
}

.keepbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 18px/1 var(--font-display);
  box-shadow: var(--shadow-capture);
}

.watch {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font: 600 15px/1 var(--font-ui);
  color: var(--ink-muted);
}

.watch .i {
  align-self: center;
  color: var(--accent-text);
}

.watch b {
  font: 600 34px/1 var(--font-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.watch .hand {
  margin-left: 6px;
  font-size: 17px;
}

#how > .tier {
  margin-top: 28px;
}

/* ═══ 03 · the AI read ══════════════════════════════════════════════ */

.readcard {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 34px;
  background: var(--sheet);
  box-shadow: var(--shadow-lift);
}

.readcard__title {
  font: 600 28px/1.1 var(--font-display);
}

.aibar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--accent-soft);
}

.aibar__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0 34%, var(--accent) 36% 100%);
  transition: scale var(--t-peel) var(--peel);
}

.is-reading .aibar__mark {
  scale: 1.18;
}

.is-read .aibar__mark {
  scale: 1;
}

.aibar__words {
  display: grid;
  gap: 2px;
  font-size: 15px;
}

.aibar__words b {
  font: 600 16px/1.2 var(--font-display);
}

.aibar__sub {
  display: grid;
  color: var(--ink-muted);
}

.aibar__sub > span {
  grid-area: 1 / 1;
  transition: opacity var(--t-snap) var(--snap);
}

.aibar__busy,
.aibar__done,
.is-reading .aibar__idle,
.is-read .aibar__idle,
.is-read .aibar__busy {
  opacity: 0;
}

.is-reading .aibar__busy,
.is-read .aibar__done {
  opacity: 1;
}

/* without the script, the card shows the finished read */
html:not(.rise-ready) .aibar__idle {
  opacity: 0;
}

html:not(.rise-ready) .aibar__done {
  opacity: 1;
}

.cells {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.cell {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 6px;
  border-radius: 18px;
  background: var(--sunken);
}

.cell__art {
  position: relative;
  grid-row: span 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--sheet);
}

.cell__art img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.cell__art i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 45%, transparent) 85%, var(--sheet));
  translate: 0 -110%;
  transition: translate 700ms var(--soft) calc(var(--i) * 240ms);
}

.is-reading .cell__art i,
.is-read .cell__art i {
  translate: 0 110%;
}

.cell b {
  align-self: end;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
}

.cell small {
  align-self: start;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.rise-ready .cell b,
.rise-ready .cell small {
  transition: opacity var(--t-soft) var(--soft) calc(var(--i) * 240ms + 200ms), translate var(--t-peel) var(--peel) calc(var(--i) * 240ms + 200ms);
}

.rise-ready .readcard:not(.is-read) .cell:not(.cell--yours) b,
.rise-ready .readcard:not(.is-read) .cell small {
  opacity: 0;
  translate: 8px 0;
}

.cell__chip {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.keepbtn--wide {
  width: 100%;
}

/* ═══ 04 · a moment, and the five views ═════════════════════════════ */

#moment {
  grid-template-areas:
    "card head"
    "views views";
  row-gap: 56px;
}

#moment > .course__head { grid-area: head; }
#moment > .momentcard { grid-area: card; }
#moment > .views { grid-area: views; }

.momentcard {
  display: grid;
  gap: 14px;
  width: min(100%, 470px);
  justify-self: center;
  padding: 22px;
  border-radius: 34px;
  background: var(--sheet);
  box-shadow: var(--shadow-lift);
  rotate: -1deg;
}

.momentcard__when {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.momentcard__name {
  margin-top: 4px;
  font: 600 30px/1.1 var(--font-display);
}

.momentcard__with {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.momentcard__with .hand {
  margin-left: 10px;
  font-size: 17px;
  color: var(--ink-muted);
}

.ava {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) calc(30% + var(--h) * 25%), var(--sheet));
  color: var(--on-accent);
  font: 600 14px/1 var(--font-display);
  box-shadow: 0 0 0 3px var(--sheet);
}

.ava + .ava {
  margin-left: -8px;
}

.momentcard__table {
  position: relative;
  aspect-ratio: 1.3;
  border-radius: 24px;
  background: var(--sunken);
}

.momentcard__table img {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  rotate: var(--r);
  cursor: pointer;
}

.momentcard__count {
  font-size: 14px;
  color: var(--ink-muted);
}

.lasttime {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--accent-soft);
}

.lasttime__h {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.lasttime p + p {
  margin-top: 4px;
}

.lasttime .hand {
  font-size: 18px;
}

.views__h {
  font: 600 22px/1.2 var(--font-display);
}

.views__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.view {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 12px 18px;
  border-radius: 24px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.view > b {
  margin: 8px 6px 0;
  font: 600 19px/1.2 var(--font-display);
}

.view > span:last-child {
  margin: 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.view__art {
  position: relative;
  height: 112px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sunken);
}

.view__art--moment img {
  position: absolute;
  width: 58%;
}

.view__art--moment img:nth-child(1) { left: 6%; top: 10%; rotate: -8deg; }
.view__art--moment img:nth-child(2) { right: 4%; top: 6%; width: 46%; rotate: 9deg; }

.view__art--month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-content: center;
  padding: 12px;
}

.view__art--month i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 10%, var(--surface));
}

.view__art--month i.on {
  background: var(--accent);
}

.view__art--list,
.view__art--places {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 10px 12px;
}

.view__art--list i,
.view__art--places i {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 10px;
  background: var(--sheet);
  font: 400 13px/1.25 var(--font-hand);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view__art--list em {
  font: 600 12px/1.25 var(--font-ui);
  color: var(--accent-text);
}

.view__art--places i::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  margin: 3px 2px 0 0;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  rotate: -45deg;
}

.view__art--places i {
  justify-content: flex-start;
}

.view__art--companions::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sheet) 0 55%, var(--accent-soft) 58% 100%);
}

.view__art--companions i {
  position: absolute;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) calc(35% + var(--a) * 14%), var(--sheet));
  color: var(--on-accent);
  font: 600 13px/1 var(--font-display);
  font-style: normal;
  transform: rotate(calc(var(--a) * 72deg - 90deg)) translate(40px) rotate(calc(var(--a) * -72deg + 90deg));
}

/* ═══ 05 · the menu ═════════════════════════════════════════════════ */

.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(28px, 5vw, 64px);
  margin-top: 44px;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 36px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.menu__course + .menu__course {
  margin-top: 30px;
}

.menu__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  background: radial-gradient(circle 1.5px, var(--ink-faint) 96%, #0000) 0 100% / 8px 4px repeat-x;
  font: 600 26px/1.1 var(--font-display);
}

.menu__h .hand {
  font-size: 19px;
  color: var(--accent-text);
}

.menu ul {
  display: grid;
  padding: 0;
  list-style: none;
}

.mline {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  padding: 9px 0;
}

.mline > a,
.mline > span {
  font: 500 18px/1.3 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.mline > a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.mline > a:hover {
  color: var(--accent-text);
}

.mline > i {
  height: 4px;
  align-self: end;
  margin-bottom: 6px;
  background: radial-gradient(circle 1.5px, var(--ink-faint) 96%, #0000) 0 50% / 8px 4px repeat-x;
}

.mline > small {
  grid-column: 1 / -1;
  margin-top: 2px;
  font: 400 16px/1.35 var(--font-hand);
  color: var(--ink-muted);
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 9%, var(--sheet));
  color: var(--ink-muted);
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--p {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tag--ai {
  background: var(--accent);
  color: var(--on-accent);
}

.menu__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 8px;
  margin-top: 30px;
  font-size: 14px;
  color: var(--ink-muted);
}

.menu__key .tag + .tag,
.menu__key .tag {
  margin-left: 8px;
}

.menu__key .tag:first-child {
  margin-left: 0;
}

/* the chef's special: try a room on */
.special {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 40px;
  margin-top: 28px;
  padding: 52px clamp(22px, 4vw, 48px) 32px;
  border-radius: 32px;
  background: var(--accent);
  color: var(--on-accent);
}

.special__tag {
  position: absolute;
  top: -14px;
  left: clamp(18px, 4vw, 44px);
  padding: 8px 14px 7px;
  border-radius: 10px;
  background: var(--die);
  color: #131A2E;
  font-size: 19px;
  line-height: 1;
  rotate: -3deg;
  box-shadow: var(--shadow-float);
}

.special h3 {
  font: 600 clamp(26px, 3vw, 34px)/1.1 var(--font-display);
}

.special p {
  max-width: 34em;
  margin-top: 8px;
  opacity: 0.9;
}

.rooms {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 10px;
}

.room {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--r-surface) 0 50%, var(--r-accent) 50% 100%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--on-accent) 30%, transparent);
  cursor: pointer;
  transition: scale var(--t-snap) var(--snap), box-shadow var(--t-snap) var(--snap);
}

.room:hover {
  scale: 1.1;
}

.room[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--on-accent), 0 0 0 6px color-mix(in oklab, var(--on-accent) 30%, transparent);
}

.special .more-link {
  grid-column: 1 / -1;
  margin-top: 0;
  color: var(--on-accent);
}

/* ═══ 06 · ask, and served ══════════════════════════════════════════ */

#ask {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "head served"
    "ask served"
    "facts facts"
    "tier tier";
  column-gap: clamp(32px, 6vw, 88px);
}

#ask > .course__head { grid-area: head; }
#ask > .ask { grid-area: ask; }
#ask > .served { grid-area: served; }
#ask > .facts { grid-area: facts; }
#ask > .tier { grid-area: tier; }

.ask {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  padding: 26px;
  border-radius: 32px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.ask__q {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  rotate: -1deg;
  transform-origin: 0 50%;
}

.ask__look {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-muted);
}

.dots {
  display: inline-flex;
  gap: 4px;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}

.dots i:nth-child(2) { opacity: 0.7; }
.dots i:nth-child(3) { opacity: 1; }

.ask__a {
  font-size: 18px;
  line-height: 1.5;
}

.ask__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  background: var(--sunken);
}

.acard > b {
  font: 600 16px/1.2 var(--font-display);
}

.acard > b.hand {
  font: 400 19px/1.2 var(--font-hand);
}

.acard > small {
  grid-column: 2;
  font-size: 13px;
  color: var(--ink-muted);
}

.acard__pin,
.acard__plate {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.acard__plate {
  border-radius: 50%;
  background: radial-gradient(circle, var(--sheet) 0 54%, var(--accent) 57% 100%);
  font: 400 18px/1 var(--font-hand);
}

.facts--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  margin-top: 48px;
}

#ask > .tier {
  margin-top: 22px;
}

/* the story: four pages in a fanned stack; tap to deal the next */
.served {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 300px);
  margin-top: 40px;
}

.stories {
  position: relative;
  margin-right: 48px;
  aspect-ratio: 9 / 16;
  padding: 0;
  list-style: none;
}

.story {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border-radius: 28px;
  box-shadow: var(--shadow-lift);
  z-index: calc(10 - var(--pos));
  translate: calc(var(--pos) * 16px) calc(var(--pos) * 6px);
  rotate: calc(var(--pos) * 4deg - 1deg);
  transition: translate var(--t-peel) var(--peel), rotate var(--t-peel) var(--peel), opacity var(--t-snap) var(--snap);
  cursor: pointer;
}

.story.is-out {
  translate: -70% 30px;
  rotate: -18deg;
  opacity: 0;
}

.story__kick {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.story__big {
  margin-top: auto;
  font: 600 38px/1.02 var(--font-display);
  letter-spacing: -0.02em;
}

.story__mid {
  margin-top: 8px;
  font-size: 32px;
  line-height: 1.1;
  text-align: center;
}

.story__small {
  margin-top: 14px;
  font-size: 15px;
  opacity: 0.85;
}

.story__plate {
  width: 62%;
  aspect-ratio: 1;
  margin: auto auto 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 54%, color-mix(in oklab, var(--accent) 22%, var(--paper)) 56% 100%);
  color: var(--accent);
  font: 400 64px/1 var(--font-hand);
  box-shadow: var(--shadow-float);
}

.story--accent { background: var(--accent); color: var(--on-accent); }
.story--sheet { background: var(--sheet); color: var(--ink); text-align: center; }
.story--ink { background: var(--ink); color: var(--surface); }
.story--paper { background: var(--die); color: #131A2E; }

.story__letter {
  margin-top: 20px;
  font-size: 22px;
  line-height: 1.4;
}

.story--paper .story__small {
  margin-top: auto;
}

.stories__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
}

.served:has(.stories__next:not([hidden])) {
  display: grid;
}

/* ═══ 07 · yours: an ink band ═══════════════════════════════════════ */

.course--ink {
  width: auto;
  margin: clamp(80px, 10vw, 136px) clamp(8px, 2vw, 24px) 0;
  padding: clamp(56px, 8vw, 104px) var(--gut);
  border-radius: 40px;
  background: var(--ink);
  color: var(--surface);
}

.privacy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 88px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

.course--ink .course__no b {
  background: radial-gradient(circle, color-mix(in oklab, var(--surface) 14%, var(--ink)) 0 57%, color-mix(in oklab, var(--accent) 35%, var(--ink)) 59% 100%);
  color: var(--surface);
}

.course--ink .course__no .hand,
.course--ink .plane__note {
  color: color-mix(in oklab, var(--accent) 55%, var(--surface));
}

.plane {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 360px);
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--surface) 10%, var(--ink));
  font: 600 17px/1 var(--font-ui);
}

.plane .i {
  color: color-mix(in oklab, var(--accent) 60%, var(--surface));
}

.plane__switch {
  position: relative;
  width: 52px;
  height: 32px;
  margin-left: auto;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 70%, var(--surface));
}

.plane__switch i {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
}

.plane__note {
  margin-top: 14px;
  font-size: 19px;
}

.quiet-facts {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.quiet-facts li {
  position: relative;
  padding: 14px 0 14px 34px;
  background: linear-gradient(color-mix(in oklab, var(--surface) 12%, transparent), color-mix(in oklab, var(--surface) 12%, transparent)) 0 100% / 100% 1px no-repeat;
  color: color-mix(in oklab, var(--surface) 84%, var(--ink));
}

.quiet-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 38%, color-mix(in oklab, var(--accent) 60%, var(--surface)) 41% 100%);
}

.more-link--light {
  grid-column: 2;
  color: color-mix(in oklab, var(--accent) 55%, var(--surface));
}

/* ═══ 08 · the bill ═════════════════════════════════════════════════ */

.receipt {
  position: relative;
  isolation: isolate;
  width: min(100%, 410px);
  justify-self: center;
  padding: 40px 30px 34px;
  color: #131A2E;
  rotate: 1.8deg;
  filter: drop-shadow(0 22px 26px rgba(13, 17, 32, 0.22));
}

/* the paper, with a torn zigzag top and bottom */
.receipt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--die);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
}

.receipt__head {
  display: grid;
  gap: 4px;
  text-align: center;
  font: 600 28px/1 var(--font-display);
}

.receipt__head span {
  font: 600 11px/1.3 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.receipt__lines {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  font: 500 15px/1.35 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.receipt__lines li {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(16px, 1fr) minmax(0, max-content);
  align-items: baseline;
  column-gap: 6px;
  padding: 6px 0;
}

.receipt__lines i {
  height: 4px;
  align-self: end;
  margin-bottom: 5px;
  background: radial-gradient(circle 1.2px, rgba(19, 26, 46, 0.45) 96%, #0000) 0 50% / 6px 4px repeat-x;
}

.receipt__lines b {
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.receipt__lines .receipt__rule {
  display: block;
  height: 10px;
  padding: 0;
  background: linear-gradient(rgba(19, 26, 46, 0.22), rgba(19, 26, 46, 0.22)) 0 50% / 100% 2px no-repeat;
}

.receipt__total {
  font: 600 20px/1.2 var(--font-display);
}

.receipt__total b {
  font: 600 20px/1.2 var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  color: #2F4FA0;
}

.receipt__foot {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
}

.receipt__foot .hand {
  font-size: 20px;
  opacity: 1;
}

/* ═══ 09 · more from the kitchen ════════════════════════════════════ */

.kitchen {
  margin-top: 40px;
}

.kitchen .pd-card__cut ~ .pd-card__name {
  padding-right: 52px;
}

.lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 40px;
  color: var(--ink-muted);
  font-size: 15px;
}

.lang a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font: 500 17px/1 var(--font-display);
  text-decoration: none;
}

/* ═══ FAQ and the feedback note ═════════════════════════════════════ */

.faqwrap,
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.faqwrap > .course__head {
  position: sticky;
  top: 96px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font: 600 18px/1.3 var(--font-display);
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex: none;
  color: var(--accent-text);
  transition: rotate var(--t-snap) var(--snap);
}

.faq-item[open] .faq-item__icon {
  rotate: 180deg;
}

.faq-item__a {
  padding: 0 22px 20px;
  color: var(--ink-muted);
}

.contact-more {
  margin-top: 18px;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 30px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.contact-form__field {
  display: grid;
  gap: 8px;
}

.contact-form label {
  font: 600 14px/1.2 var(--font-ui);
}

.contact-form__optional {
  font-weight: 500;
  color: var(--ink-muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--sunken);
  color: var(--ink);
  font: 400 17px/1.4 var(--font-ui);
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-faint);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.contact-form .pill {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.pd-home .site-foot {
  margin-top: clamp(120px, 12vw, 160px);
}

/* ═══ tablets and phones ════════════════════════════════════════════ */

@media (max-width: 1060px) {
  .views__list {
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gut));
    padding: 4px var(--gut) 18px;
    scroll-padding-inline: var(--gut);
  }

  .view {
    scroll-snap-align: start;
  }

  .special {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "stage"
      "more";
    min-height: 0;
    padding: 84px 0 32px;
  }

  .hero__copy {
    padding-bottom: 28px;
  }

  .hero__title {
    margin-top: 20px;
  }

  .hero__stage {
    width: min(100%, 360px);
    min-width: 0;
    margin-bottom: 70px;
  }

  .hero__throw {
    right: 50%;
    translate: 50% 0;
    white-space: nowrap;
    font-size: 17px;
  }

  .course--split,
  #moment,
  #ask,
  .privacy,
  .faqwrap,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  #moment {
    grid-template-areas:
      "head"
      "card"
      "views";
    row-gap: 40px;
  }

  #ask {
    grid-template-areas:
      "head"
      "ask"
      "served"
      "facts"
      "tier";
  }

  .course--split > .course__head + * {
    margin-top: 40px;
  }

  #moment > .course__head + * {
    margin-top: 0;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step__art {
    height: 190px;
  }

  .menu {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu__col + .menu__col {
    margin-top: 30px;
  }

  .facts--grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .served {
    width: min(78%, 290px);
    margin: 48px auto 0;
  }

  .quiet-facts {
    margin-top: 28px;
  }

  .more-link--light {
    grid-column: 1;
  }

  .faqwrap > .course__head {
    position: static;
    margin-bottom: 24px;
  }

  .contact-form {
    margin-top: 28px;
  }
}

@media (max-width: 520px) {
  .pd-home h2 {
    font-size: 34px;
  }

  .hero__title {
    font-size: clamp(44px, 13.4vw, 60px);
  }

  .hero__kicker {
    font-size: 12px;
  }

  .hero .store-btn {
    flex: 1 1 150px;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
  }

  .hero .store-btn__kicker {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .rooms {
    grid-template-columns: repeat(7, minmax(0, 36px));
    gap: 8px;
  }

  .room {
    width: 36px;
    height: 36px;
  }

  .mline {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mline > i {
    display: none;
  }

  .receipt {
    padding-inline: 22px;
  }

  .ask {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise-ready [data-rise] {
    opacity: 1;
    translate: 0 0;
  }

  .story,
  .lift__save,
  .lift__band {
    transition: none;
  }
}

/* `hidden` wins over the display rules above (the Look reset, the Served
   button), and the shutter only shows when the script can run it */
.pd-home [hidden] {
  display: none !important;
}

html:not(.rise-ready) .shutter {
  display: none;
}