/* MACHA 07 · MEET — "the page is the shopfront"
   wall (grey-green) → sign → oak beam → noren → inside (paper, tile) → back out to the wall.
   Colours are sampled from the real shop (Google Maps listing photos, 2026-10) and the winter menu v2.
   Default CSS = the finished, static state. Scroll-scrubbed motion only runs under .js:not(.static). */

:root {
  --wall: #38593F;        /* the wall green — greener than the real grey-green wall (Kenji 2026-10-07) */
  --wall-2: #304F38;
  --wall-deep: #1E3124;   /* night wall, footer */
  --tile: #253A2E;        /* inner glazed tile */
  --tile-2: #2F4A3A;
  --paper: #EFE7DA;       /* menu paper */
  --paper-2: #F6F1E8;
  --noren: #F4EFE4;       /* noren cloth */
  --oak: #D8C3A0;
  --oak-2: #C3A87E;
  --ink: #1E2B21;
  --ink-2: #2B4430;       /* menu green */
  --mute: #5E5B52;
  --line: rgba(30, 43, 33, .14);
  --cream: #F1EBDF;
  --matcha: #7FA33A;
  --soft: #A8C34A;        /* the soft-serve model */
  --seal: #B5313A;
  --hot: #C65F2B;
  --ice: #2C6A80;
  --sign: #24427A;        /* inner blue sign */
  --berry: #F3E2DA;

  --sans: 'Jost', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --gothic: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --display: var(--serif);
  --body: var(--serif);
  --body-size: 18px;
  --gutter: clamp(16px, 4.4vw, 56px);
  --maxw: 1240px;
  --nav-h: 60px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.077 24.3%, 1.073 26.1%, 1.012 33.8%, .996 38.4%, .997 46%, 1);
}
:root:lang(ja) { --display: var(--mincho); --body: var(--gothic); --body-size: 16px; }
:root:lang(ko) { --display: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', serif; --body: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; --body-size: 16px; }
:root:lang(zh-Hant) { --display: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; --body: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; --body-size: 16px; }
:root:lang(zh-Hans) { --display: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; --body: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif; --body-size: 16px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); background: var(--wall-deep); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--body-size)/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
:root:not(:lang(en)) body { line-height: 1.9; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h2 { font: 500 clamp(34px, 8.2vw, 66px)/1.06 var(--display); letter-spacing: -.012em; text-wrap: balance; }
:root:not(:lang(en)) h2 { font-weight: 600; font-size: clamp(27px, 6.8vw, 52px); line-height: 1.38; letter-spacing: .04em; }
/* display lines carry phrase breaks (U+200B, from phrases.mjs): wrap only there — works in iPhone Safari too */
.ph:lang(ja), .ph:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 359px) { .desc.ph { word-break: normal; } }   /* tiny phones: the menu column is ~135px, phrase-only wrapping would run 4–5 lines */
:root:lang(ko) { word-break: keep-all; }
[lang="ja"], [lang="zh-Hant"], [lang="zh-Hans"] { word-break: normal; }
.name { overflow-wrap: anywhere; }
p { text-wrap: pretty; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i18n-pending [data-i18n] { visibility: hidden; }
:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 999px; font: 500 14px var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

.kicker { font: 500 12.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
:root:not(:lang(en)) .kicker { letter-spacing: .14em; font-size: 13px; }
.kicker-light { color: rgba(241, 235, 223, .72); }

/* buttons */
.btn { --b: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--b); background: transparent; font: 500 15px/1 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
:root:not(:lang(en)) .btn { font-family: var(--body); letter-spacing: .02em; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .ico-out { width: 14px; height: 14px; opacity: .8; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink-2); color: #fff; }
.btn-line { color: var(--ink-2); }
.btn-light { --b: #fff; background: #fff; color: var(--ink); }
.btn-ghost-light { --b: rgba(255, 255, 255, .55); color: #fff; }
.btn-big { min-height: 56px; padding: 0 26px; font-size: 16px; }
@media (hover: hover) {
  .btn-dark:hover { background: #1F3424; }
  .btn-line:hover { background: rgba(43, 68, 48, .08); }
  .btn-light:hover { background: var(--cream); }
  .btn-ghost-light:hover { background: rgba(255, 255, 255, .1); }
}
.btn-text { background: none; border: 0; padding: 12px 4px; font: 500 14px/1.2 var(--sans); letter-spacing: .03em; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; min-height: 44px; }
:root:not(:lang(en)) .btn-text { font-family: var(--body); }

/* ───────── NAV ───────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; transition: background-color .35s, color .35s, box-shadow .35s; }
.nav.dark { background: rgba(48, 79, 56, .76); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.nav.solid { background: rgba(244, 239, 228, .82); color: var(--ink); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.nav-brand img { width: 30px; height: 30px; transition: filter .35s; }
.nav.solid .nav-brand img { filter: brightness(.25) sepia(.4) hue-rotate(60deg); }
.nav-word { font: 600 17px/1 var(--sans); letter-spacing: .2em; }
.nav-kanji { font: 600 13px/1 var(--mincho); letter-spacing: .1em; opacity: .7; white-space: nowrap; }
@media (max-width: 419px) { .nav-kanji { display: none; } }
.nav-links { display: none; gap: 30px; font: 500 14px/1 var(--sans); letter-spacing: .08em; }
:root:not(:lang(en)) .nav-links { font-family: var(--body); letter-spacing: .04em; }
.nav-links a { text-decoration: none; padding: 12px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
@media (hover: hover) { .nav-links a:hover::after { transform: scaleX(1); } }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.lang { position: relative; }
.lang-btn, .nav-map { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-decoration: none; cursor: pointer; border-color: color-mix(in srgb, currentColor 42%, transparent); }
.nav-map { background: #fff; color: var(--ink); border-color: #fff; }
.nav.solid .nav-map { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.lang-btn svg, .nav-map svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
:root:not(:lang(en)) .nav-map span { font-family: var(--body); letter-spacing: .02em; }
.lang-list { inset: auto; margin: 0; position: fixed; top: calc(var(--nav-h) + env(safe-area-inset-top) - 4px); right: var(--gutter); border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: var(--paper-2); color: var(--ink); box-shadow: 0 18px 50px rgba(20, 30, 24, .22); min-width: 180px; }
.lang-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; border-radius: 9px; font-size: 15px; cursor: pointer; min-height: 44px; }
.lang-list button[aria-current="true"] { background: rgba(43, 68, 48, .1); font-weight: 600; }
@media (hover: hover) { .lang-list button:hover { background: rgba(43, 68, 48, .07); } }
.lang-list:popover-open { opacity: 1; transform: none; }
@starting-style { .lang-list:popover-open { opacity: 0; transform: translateY(-6px); } }
.lang-list { transition: opacity .2s, transform .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete; }
@media (min-width: 900px) { .nav-links { display: flex; } }
@media (max-width: 359px) { .nav-kanji { display: none; } .nav-word { letter-spacing: .14em; } .lang-btn, .nav-map { padding: 0 10px; } }

/* ───────── 1 · THE WALL ───────── */
.hero { background: var(--wall); color: #fff; position: relative; }
.wall { position: relative; min-height: 86vh; min-height: 86svh; padding: calc(var(--nav-h) + env(safe-area-inset-top) + 28px) var(--gutter) 34px; display: grid; grid-template-rows: 1fr auto; gap: 30px; overflow: hidden; isolation: isolate; }
.wall::before { /* matte plaster */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wall::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18)); }
.lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lights i { position: absolute; top: -6%; width: 60vw; height: 85%; left: calc(var(--x) - 30vw); opacity: var(--lit, .55); background: radial-gradient(50% 60% at 50% 0%, rgba(255, 236, 200, .26), rgba(255, 236, 200, .08) 45%, transparent 70%); }
.lights i:nth-child(1) { --x: 12%; } .lights i:nth-child(2) { --x: 50%; } .lights i:nth-child(3) { --x: 88%; }
[data-daypart="day"] .lights i { --lit: .38; }
[data-daypart="night"] .lights i { --lit: .9; }

.sign { align-self: start; margin-top: 4vh; display: grid; gap: clamp(10px, 2.4vw, 22px); }
.sign-row { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 20px); }
.disc { width: clamp(58px, 15vw, 104px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 26px rgba(0, 0, 0, .25), 0 0 46px rgba(255, 246, 220, .18); flex: none; }
.disc img { width: 88%; }
.wm-kanji { font: 700 clamp(30px, 8.6vw, 62px)/1 var(--mincho); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0, 0, 0, .14), 0 8px 18px rgba(0, 0, 0, .2); }
.place { margin-left: auto; font: 500 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .82; text-align: right; max-width: 9em; }
:root:not(:lang(en)) .place { font-family: var(--body); letter-spacing: .12em; font-size: 13px; }
.wordmark { margin: 0; }
.wm { display: flex; justify-content: space-between; font: 600 clamp(80px, 25vw, 330px)/.8 var(--sans); letter-spacing: 0; margin: 0 -.03em; color: #fff;
  text-shadow: 0 1px 0 #E3E7E2, 0 2px 0 #C9D0CA, 0 3px 0 #AEB8B1, 0 4px 0 #94A098, 0 5px 1px rgba(0, 0, 0, .25), 0 14px 26px rgba(0, 0, 0, .3), 0 0 60px rgba(255, 248, 228, .14); }
.wm span { display: block; }
.hero-copy { display: grid; gap: 10px; justify-items: start; }
.hero-line { font: italic 500 clamp(32px, 9vw, 70px)/1.04 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
:root:not(:lang(en)) .hero-line { font: 600 clamp(26px, 7.4vw, 54px)/1.32 var(--display); font-style: normal; letter-spacing: .05em; }
.hero-sub { font-size: 15px; opacity: .78; }
.hero-sub:lang(ja) { font-family: var(--mincho); font-weight: 600; letter-spacing: .1em; }
.hero-sub:lang(en) { font: italic 500 18px/1.3 var(--serif); }
.clock { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: rgba(0, 0, 0, .08); }
:root:not(:lang(en)) .clock-label { font-family: var(--body); letter-spacing: .06em; }
.clock-time { font: 500 15px/1 var(--sans); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.clock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 0 rgba(168, 195, 74, .6); }

/* first screen: live status, proof points, the two actions, three cups */
.status { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .14); border: 1px solid rgba(255, 255, 255, .22); font: 500 13.5px/1 var(--sans); letter-spacing: .02em; }
:root:not(:lang(en)) .status { font-family: var(--body); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9AA39C; flex: none; }
.status.open .status-dot { background: var(--soft); box-shadow: 0 0 0 0 rgba(168, 195, 74, .6); }
.status-clock { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font: 500 13px/1 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.proof { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13.5px; opacity: .92; }
.proof li { display: inline-flex; align-items: center; gap: 6px; }
.proof svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; flex: none; }
:root:lang(en) .proof { font: 500 13px/1.3 var(--sans); letter-spacing: .02em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hero-cta .btn { min-height: 50px; }
.hero-cta .btn svg { width: 15px; height: 15px; }
.hero-cups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; width: 100%; max-width: 420px; }
.hero-cups a { display: grid; justify-items: center; gap: 5px; text-decoration: none; text-align: center; padding: 10px 4px 9px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .hero-cups a:hover { background: rgba(255, 255, 255, .14); } }
.hero-cups img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.hc-name { font-size: 11.5px; line-height: 1.3; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.hc-name:lang(ja), :root:lang(ja) .hc-name { font-family: var(--mincho); font-weight: 600; }
.hero-cups b { font: 500 14px/1 var(--sans); }

@media (min-width: 900px) {
  .wall { min-height: 88vh; min-height: 88svh; grid-template-columns: 1fr minmax(300px, 30vw); grid-template-rows: 1fr auto; padding-bottom: 46px; }
  .sign { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding-top: 0; margin-top: 0; }
  .wm { font-size: clamp(110px, 15.5vw, 290px); justify-content: flex-start; gap: .02em; }
  .place { margin-left: 0; max-width: none; text-align: left; }
  .sign-row { gap: 22px; }
  .hero-copy { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .wall { grid-template-columns: 1fr minmax(360px, 34vw); }
}

/* oak beam */
.beam { height: clamp(16px, 2.6vw, 30px); background: repeating-linear-gradient(90deg, rgba(120, 90, 50, .06) 0 2px, transparent 2px 9px, rgba(120, 90, 50, .04) 9px 10px, transparent 10px 23px), linear-gradient(180deg, #E4D3B4, var(--oak) 40%, var(--oak-2)); box-shadow: 0 10px 18px rgba(0, 0, 0, .28); position: relative; z-index: 3; }

/* noren stage */
.stage { position: relative; background: var(--wall-deep); }
.stage-sticky { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.stage-photo, .stage-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-photo img { object-fit: cover; object-position: 50% 62%; }
.stage-sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 21, .1) 30%, rgba(20, 24, 21, .62)); pointer-events: none; }
.stage-words { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(40px + env(safe-area-inset-bottom)); color: #fff; }
.stage-words p { font: 500 clamp(30px, 8.4vw, 72px)/1.06 var(--display); letter-spacing: -.01em; text-wrap: balance; max-width: 13em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.stage-words .rv-1 { font-style: italic; font-size: clamp(20px, 5vw, 34px); margin-bottom: 8px; opacity: .9; }
:root:not(:lang(en)) .stage-words p { font-weight: 600; font-size: clamp(25px, 6.8vw, 54px); line-height: 1.4; letter-spacing: .05em; font-style: normal; }
:root:not(:lang(en)) .stage-words .rv-1 { font-size: clamp(17px, 4.2vw, 26px); }
.noren { position: absolute; inset: 0 0 auto 0; height: 22%; z-index: 3; pointer-events: none; transform-origin: 50% 0; }
.rod { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(#1A1E1C, #2B302D); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); z-index: 2; }
.cloth { position: absolute; inset: 6px clamp(0px, 3vw, 60px) 0; display: flex; gap: clamp(3px, .6vw, 8px); }
.cloth::before { /* the sewn-together top of the noren (no slits here) */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 17%; background: linear-gradient(180deg, #E9E2D3, var(--noren)); box-shadow: 0 1px 0 rgba(60, 50, 30, .12); }
.panel { flex: 1; position: relative; transform-origin: 50% 0; border-radius: 0 0 2px 2px;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255, 236, 196, .55), transparent 70%),
    linear-gradient(90deg, rgba(60, 50, 30, .12), transparent 16%, transparent 46%, rgba(60, 50, 30, .06) 60%, transparent 78%, rgba(60, 50, 30, .14)),
    linear-gradient(180deg, transparent 80%, rgba(60, 50, 30, .10) 94%, rgba(60, 50, 30, .2)),
    var(--noren);
  box-shadow: 0 14px 24px rgba(0, 0, 0, .3); }
.panel::after { /* cotton weave */ content: ""; position: absolute; inset: 0; opacity: .4; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .035) 0 1px, transparent 1px 3px); }
.p3 { flex: 1.7; }
@media (max-width: 599px) { .p1, .p5 { display: none; } .cloth { inset-inline: 0; gap: 3px; } .p3 { flex: 1.5; } }
.noren-print { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; color: var(--ink-2); z-index: 2; }
.noren-print img { width: clamp(44px, 15vw, 96px); opacity: .9; }
.noren-print b { font: 700 clamp(18px, 5.4vw, 34px)/1 var(--mincho); letter-spacing: .14em; margin-right: -.14em; }
.noren-print small { font: 600 clamp(8px, 2vw, 12px)/1 var(--sans); letter-spacing: .3em; margin-right: -.3em; }
.stage-hint { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 12px 16px; }
:root:not(:lang(en)) .stage-hint { font-family: var(--body); letter-spacing: .1em; font-size: 13px; }
.stage-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ───────── 2 · THE NAME ───────── */
.origin { background: var(--noren); color: var(--ink); position: relative; }
.origin-sticky { min-height: 92svh; align-content: center; display: grid; place-content: center; justify-items: center; text-align: center; padding: 90px var(--gutter) 40px; gap: 6px; }
.compose { --mx: 1.5em; --my: 0em; position: relative; display: flex; width: 5em; font: 600 clamp(54px, 16.4vw, 190px)/1 var(--mincho); color: var(--ink); }
.compose .k { display: block; width: 1em; height: 1.1em; text-align: center; }
.k-ma { transform: translate(var(--mx), var(--my)); }
.k-r { opacity: 0; }
.k-cha { position: absolute; left: 2.5em; top: 0; }
.compose-roman { position: absolute; left: 0; right: 0; top: 100%; margin-top: .5em; text-align: center; font: 600 .2em/1 var(--sans); letter-spacing: .5em; text-indent: .5em; color: var(--ink-2); }
@media (max-width: 699px) {
  .compose { --mx: 0em; --my: 1.5em; flex-direction: column; width: 1em; height: 5.5em; font-size: min(12.5svh, 24vw, 112px); }
  .compose .k { height: 1.1em; }
  .k-cha { left: 0; top: 2.75em; }
  .k-ma { transform: translate(0, 1.65em); --my: 1.65em; }
  .compose-roman { left: 100%; right: auto; top: 39%; margin: 0 0 0 10px; writing-mode: vertical-rl; text-indent: 0; letter-spacing: .42em; font-size: .17em; }
}
.glosses { position: relative; display: grid; margin-top: clamp(40px, 6vh, 64px); min-height: 3.4em; width: min(100%, 30em); }
.glosses .g { grid-area: 1 / 1; font: italic 400 clamp(17px, 4.4vw, 22px)/1.45 var(--serif); color: var(--mute); text-wrap: balance; }
:root:not(:lang(en)) .glosses .g { font: 500 clamp(15px, 4vw, 19px)/1.7 var(--body); font-style: normal; }
.glosses .g1, .glosses .g2 { opacity: 0; }
.origin-copy { max-width: 36rem; margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 14vw, 150px); text-align: center; display: grid; gap: 22px; justify-items: center; }
.origin-copy p { font-size: calc(var(--body-size) + 1px); color: #34392F; }
.spell { display: inline-flex; align-items: center; gap: 14px; font: 500 14px/1.4 var(--sans) !important; letter-spacing: .06em; color: var(--mute) !important; padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: 999px; }
:root:not(:lang(en)) .spell { font-family: var(--body) !important; }
.spell-t { position: relative; font: 600 24px/1 var(--sans); color: var(--ink-2); width: 28px; text-align: center; }
.spell-t::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--seal); transform: rotate(-24deg); }

/* ───────── 3 · THE MENU ───────── */
.menu { background: var(--paper); padding: clamp(84px, 12vw, 140px) var(--gutter) 70px; position: relative; }
.menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.menu > * { position: relative; max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sec-head { margin-bottom: clamp(30px, 6vw, 56px); }
.sec-head h2 { max-width: 12em; }
.sec-note { margin-top: 16px; color: var(--mute); font-size: 15px; }

.item { position: relative; }
.item-hit { all: unset; box-sizing: border-box; display: grid; width: 100%; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.item-hit:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 6px; }
.item-photo { position: relative; display: block; overflow: hidden; border-radius: 6px; background: #E6DCCB; aspect-ratio: 1; }
.item-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) { .item-hit:hover .item-photo img { transform: scale(1.035); } }
.photo-tag { position: absolute; left: 8px; bottom: 8px; background: rgba(30, 43, 33, .78); color: #fff; font: 500 10.5px/1 var(--sans); letter-spacing: .06em; padding: 5px 7px; border-radius: 3px; }
:root:not(:lang(en)) .photo-tag { font-family: var(--body); }
.item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 12px; min-width: 0; }
.num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; background: var(--ink-2); color: #fff; font: 500 13px/1 var(--sans); letter-spacing: .04em; margin-bottom: 6px; }
.num-set { background: var(--seal); letter-spacing: .14em; font-size: 11.5px; }
.name { font: 700 clamp(19px, 4.9vw, 26px)/1.3 var(--mincho); letter-spacing: .04em; color: var(--ink); }
.name-en { font: 500 15.5px/1.3 var(--serif); color: var(--ink-2); }
.name-local { font: 600 14px/1.4 var(--display); color: var(--ink-2); opacity: .9; }
.name-local:empty { display: none; }
.desc { font-size: 14px; line-height: 1.6; color: var(--mute); margin-top: 6px; }
:root:lang(en) .desc { font-size: 15.5px; }
.temps { display: flex; gap: 6px; margin-top: 10px; }
.temps b { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 999px; border: 1.3px solid; }
:root:not(:lang(en)) .temps b { font-family: var(--body); letter-spacing: .06em; font-size: 11.5px; }
.t-hot { color: #fff; background: var(--hot); border-color: var(--hot) !important; }
.t-ice { color: var(--ice); border-color: var(--ice); }
.price { font: 500 clamp(26px, 6.6vw, 38px)/1 var(--sans); letter-spacing: .01em; margin-top: 12px; font-variant-numeric: lining-nums; }
.price-off { color: var(--seal); }

.pair { display: grid; gap: 34px; }
.item-lg .item-hit { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 16px; align-items: center; }
.item-lg .item-body { padding-top: 0; }
.item-lg + .item-lg { padding-top: 34px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .pair { grid-template-columns: 1fr 1fr; gap: 0; }
  .item-lg + .item-lg { padding-top: 0; border-top: 0; padding-left: 40px; border-left: 1px solid var(--line); }
  .item-lg:first-child { padding-right: 40px; }
  .item-lg .item-hit { gap: 26px; }
}

.custom { margin-top: 44px; border-block: 1px solid var(--line); padding: 20px 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.custom-h { font: 500 12.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold, #8E6E33); }
:root:not(:lang(en)) .custom-h { font-family: var(--body); letter-spacing: .1em; font-size: 13px; }
.sweet { display: grid; gap: 10px; justify-items: center; }
.sweet > p { font-size: 15px; }
.drops { display: flex; gap: clamp(16px, 5vw, 30px); font: 500 13px/1 var(--sans); }
.drops li { display: grid; justify-items: center; gap: 6px; position: relative; }
.drops small { position: absolute; top: 100%; margin-top: 3px; font-size: 10.5px; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
.drop { width: 16px; height: 16px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); border: 1.4px solid var(--ink-2); background: linear-gradient(-45deg, var(--ink-2) var(--f), transparent var(--f)); }
.d0 { --f: 0%; } .d50 { --f: 46%; } .d70 { --f: 64%; } .d100 { --f: 100%; }
.drops .std { color: var(--ink-2); font-weight: 600; }
.oat { display: flex; gap: 10px; align-items: baseline; font-size: 15px; margin-top: 10px; }
.oat b { font: 500 22px/1 var(--sans); }
@media (min-width: 900px) {
  .custom { grid-template-columns: auto 1fr auto; justify-items: stretch; text-align: left; align-items: center; gap: 40px; padding: 22px 8px; }
  .sweet { grid-template-columns: auto auto; gap: 26px; align-items: center; }
  .oat { margin-top: 0; }
}

.season { margin-top: 54px !important; max-width: none !important; margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; padding: 34px var(--gutter) 40px; background: var(--berry); position: relative; }
.season::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23C9928A' stroke-width='.8'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E"); }
.season > * { position: relative; max-width: var(--maxw); margin: 0 auto; }
.season-tag { display: flex; align-items: baseline; gap: 14px; color: var(--seal); font: 600 14px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; }
:root:not(:lang(en)) .season-tag { font-family: var(--display); letter-spacing: .1em; font-size: 17px; }
.season-ja { font: 700 22px/1 var(--mincho); letter-spacing: .14em; text-transform: none; }
:root:lang(ja) .season-ja { display: none; }
.season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.item-set .name { font-size: clamp(16px, 4.2vw, 22px); }
@media (min-width: 900px) {
  .season-grid { gap: 40px; }
  .item-md .item-hit { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 24px; align-items: center; }
  .item-md .item-body { padding-top: 0; }
}

.more { margin-top: 56px; }
.more-h { font: 600 14px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.more-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
:root:not(:lang(en)) .more-h { font-family: var(--display); letter-spacing: .1em; font-size: 17px; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }
.item-sm .name { font-size: clamp(16px, 4.3vw, 20px); }
.item-sm .price { font-size: clamp(22px, 5.6vw, 28px); }
@media (min-width: 900px) { .more-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
.menu-foot { margin-top: 50px; font-size: 12.5px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ───────── 4 · THE COUNTER ───────── */
.counter { position: relative; overflow: hidden; background: var(--tile); color: var(--cream); padding: clamp(84px, 12vw, 150px) var(--gutter); isolation: isolate; }
.tiles { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 70%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 120px),
    linear-gradient(90deg, var(--tile), var(--tile-2) 30%, var(--tile) 60%, #2A4234);
  -webkit-mask: linear-gradient(90deg, #000, #000); }
.tiles::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 120px); transform: translateX(60px); clip-path: inset(0); -webkit-mask: repeating-linear-gradient(0deg, transparent 0 36px, #000 36px 72px); mask: repeating-linear-gradient(0deg, transparent 0 36px, #000 36px 72px); }
.blue-sign { position: absolute; top: clamp(80px, 10vw, 130px); right: var(--gutter); display: grid; justify-items: center; gap: 2px; padding: 10px 7px 8px; background: var(--sign); color: #fff; border-radius: 2px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.blue-sign b { font: 700 clamp(18px, 4.4vw, 26px)/1.1 var(--mincho); }
.blue-sign small { font: 600 7px/1 var(--sans); letter-spacing: .2em; margin-top: 4px; }
.counter-grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 26px; grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "main main" ". side"; }
.c-copy { grid-area: copy; max-width: 30rem; padding-right: 60px; }
.c-copy h2 { color: #fff; margin-bottom: 18px; }
.c-copy p { color: rgba(241, 235, 223, .86); }
.c-cap { margin-top: 18px; font: italic 400 16px/1.4 var(--serif); color: var(--soft) !important; }
:root:not(:lang(en)) .c-cap { font: 500 14px/1.6 var(--body); }
.c-main { grid-area: main; }
.c-main img, .c-side img { border-radius: 4px; width: 100%; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.c-side { grid-area: side; margin-top: -90px; position: relative; }
.c-side img { border: 6px solid var(--cream); border-radius: 2px; }
@media (min-width: 900px) {
  .counter-grid { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "main copy" "main side"; column-gap: clamp(36px, 5vw, 80px); row-gap: 40px; align-items: start; }
  .c-copy { padding: 40px 0 0; }
  .c-side { margin-top: 0; width: 66%; justify-self: end; }
}

/* ───────── 5 · THE MEET-UP ───────── */
.meet { background: var(--noren); padding: clamp(84px, 12vw, 150px) var(--gutter); position: relative; }
.meet-grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 40px; }
.meet-intro h2 { margin-bottom: 18px; }
.meet-intro > p { max-width: 30rem; color: #34392F; }
.meet-photo { margin-top: 28px; width: 62%; max-width: 330px; position: relative; }
.meet-photo img { border-radius: 4px; box-shadow: 0 24px 50px rgba(30, 40, 30, .18); }
.meet-photo::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 70px; height: 70px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); opacity: .35; }
@media (min-width: 900px) {
  .meet-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
  .meet-intro { position: sticky; top: calc(var(--nav-h) + 30px); }
  .meet-photo { width: 64%; }
}

.maker { display: grid; gap: 22px; }
.f-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-row legend { padding: 0; margin-bottom: 10px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
:root:not(:lang(en)) .f-row legend { font-family: var(--body); letter-spacing: .08em; font-size: 13px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(43, 68, 48, .08); }
.seg label, .chips label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg input, .chips input[type="radio"], .cups input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; padding: 0 20px; border-radius: 999px; font: 500 15px/1 var(--sans); transition: background-color .2s, color .2s, box-shadow .2s; }
:root:not(:lang(en)) .seg span, :root:not(:lang(en)) .chips > .rel > span { font-family: var(--body); }
.seg label:has(input:checked) span { background: #fff; color: var(--ink-2); box-shadow: 0 2px 8px rgba(30, 40, 30, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips > .rel > span { display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.3px solid rgba(43, 68, 48, .32); font: 500 15px/1 var(--sans); transition: background-color .2s, color .2s, border-color .2s; }
.chips > .rel:has(input:checked) > span { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.seg label:has(input:focus-visible) span, .chips > .rel:has(input:focus-visible) > span, .cups label:has(input:focus-visible) .cup-img { outline: 2px solid var(--soft); outline-offset: 2px; }
/* day strip (next 7 days) + "other date"; time chips + "set a time" */
.days { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.days::-webkit-scrollbar { display: none; }
.day { position: relative; flex: none; scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day input, .pick > input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day span { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 64px; height: 58px; padding: 0 12px; border-radius: 16px; border: 1.3px solid rgba(43, 68, 48, .28); background: rgba(255, 255, 255, .35); transition: background-color .2s, color .2s, border-color .2s; }
.day b { font: 600 14px/1 var(--body); }
.day small { font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--mute); font-variant-numeric: tabular-nums; }
.day:has(input:checked) span { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.day:has(input:checked) small { color: rgba(255, 255, 255, .8); }
.day:has(input:focus-visible) span { outline: 2px solid var(--soft); outline-offset: 2px; }
.pick { position: relative; flex: none; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-face { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.3px dashed rgba(43, 68, 48, .45); font: 500 15px/1 var(--body); color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; white-space: nowrap; }
:root:lang(en) .pick-face { font-family: var(--sans); }
.pick-face svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; flex: none; }
.pick-value { font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pick-value:empty { display: none; }
.pick.has-value .pick-label { display: none; }
.pick:has(> input[type="radio"]:checked) .pick-face { background: var(--ink-2); border: 1.3px solid var(--ink-2); color: #fff; }
.pick:has(input:focus-visible) .pick-face { outline: 2px solid var(--soft); outline-offset: 2px; }
.day-pick .pick-face { height: 58px; border-radius: 16px; }
/* the real date/time input lies invisibly over the chip, so a tap opens the system picker (iOS wheels, Android dialog) */
.pick .native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; z-index: 2; cursor: pointer; font-size: 16px; -webkit-appearance: none; appearance: none; background: transparent; color: transparent; }
.pick .native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.not-today .rel { display: none; }
.maker-past { font-size: 13px; color: var(--hot); margin-top: 8px; }
.maker-past + .maker-past { margin-top: 2px; }
.cups { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.cups::-webkit-scrollbar { display: none; }
.cup { flex: none; width: 82px; display: grid; justify-items: center; gap: 7px; text-align: center; scroll-snap-align: start; position: relative; cursor: pointer; }
.cup-img { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: #E6DCCB; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .35s var(--spring); }
.cup-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35) translateY(4%); }
.cup-img svg { width: 30px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; }
.cup-name { font: 600 11.5px/1.3 var(--mincho); color: var(--ink); text-wrap: balance; word-break: auto-phrase; }
.cup-none .cup-name { font: 500 11.5px/1.3 var(--body); }
.cup:has(input:checked) .cup-img { box-shadow: 0 0 0 2.5px var(--ink-2), 0 0 0 5px var(--noren), 0 0 0 6.5px rgba(43, 68, 48, .35); transform: scale(1.04); }

/* the ticket */
/* the two notches at the perforation are real holes (a mask), so the ticket also works over the green hero */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) 72px; border-radius: 12px; overflow: hidden; position: relative; color: var(--ink);
  -webkit-mask: var(--notch); mask: var(--notch); }
.t-main { position: relative; padding: 0 20px 18px; background:
  repeating-radial-gradient(circle at 100% 120%, rgba(43, 68, 48, .055) 0 1px, transparent 1px 7px),
  linear-gradient(180deg, #FBF8F0, #F6F0E2); }
.t-title { margin: 0 -20px 14px; padding: 12px 20px 11px; background: var(--ink-2); color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; white-space: nowrap; font: 700 17px/1 var(--mincho); letter-spacing: .14em; }
.t-title-en { font: 500 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
:root:not(:lang(en)) .t-title-en { font-family: var(--body); letter-spacing: .08em; font-size: 11.5px; }
:root:lang(ja) .t-title-en { display: none; }
.ticket dl { display: grid; gap: 12px; }
.ticket dl div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ticket dt { font: 500 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
:root:not(:lang(en)) .ticket dt { font-family: var(--body); letter-spacing: .06em; font-size: 12px; }
.ticket dd { font: 500 16px/1.35 var(--display); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.t-when { font: 500 clamp(24px, 6.6vw, 32px)/1.1 var(--sans) !important; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.t-when small { display: block; font: 500 13px/1.4 var(--body); letter-spacing: .02em; color: var(--mute); margin-top: 4px; }
.t-look { display: flex; align-items: center; gap: 10px; }
.t-look img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.t-look span:lang(ja), .t-look [lang="ja"] { font-family: var(--mincho); font-weight: 700; }
.t-find { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(30, 43, 33, .25); font: italic 500 15px/1.3 var(--serif); color: var(--ink-2); }
:root:not(:lang(en)) .t-find { font: 600 14px/1.4 var(--display); font-style: normal; }
.t-stub { position: relative; background: linear-gradient(180deg, #F3EBDA, #EDE3CF); display: grid; justify-items: center; align-content: space-between; padding: 14px 0; border-left: 2px dashed rgba(30, 43, 33, .22); }
.t-no { font: 500 10px/1 var(--sans); letter-spacing: .1em; color: var(--mute); writing-mode: vertical-rl; }
.t-no b { font-weight: 600; color: var(--ink); letter-spacing: .14em; }
.t-seal { width: 30px; transform: rotate(-6deg); opacity: .92; }
.t-word { font: 600 11px/1 var(--sans); letter-spacing: .4em; writing-mode: vertical-rl; color: var(--ink-2); }
.ticket.stamped .t-seal { animation: stamp .55s var(--spring); }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: .92; } }
.ticket.updated .t-when { animation: tick .45s var(--ease); }
@keyframes tick { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.maker-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.maker-actions .btn-dark { flex: 1 1 100%; min-height: 54px; font-size: 16px; }
.maker-actions .btn-line { flex: 1 1 140px; }
.maker-actions .btn svg { width: 17px; height: 17px; }
.btn-line-app::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #06C755; }
.maker-actions .btn-text { flex: 1 1 100%; text-align: center; }
@media (min-width: 560px) { .maker-actions .btn-dark { flex: 0 0 auto; padding: 0 30px; } .maker-actions .btn-line { flex: 0 0 auto; } .maker-actions .btn-text { flex: 0 0 auto; } }
.maker-note { font-size: 13px; color: var(--mute); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font: 500 14px/1 var(--sans); transition: opacity .25s, transform .35s var(--spring); white-space: nowrap; }
:root:not(:lang(en)) .toast { font-family: var(--body); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ───────── invite (incoming meet-up link): the recipient's own holo ticket ───────── */
.invite { position: relative; z-index: 5; margin-bottom: 4px; max-width: 460px; }
.invite[hidden] { display: none; }
.invite-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-right: -10px; }
.invite-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
:root:not(:lang(en)) .invite-kicker { font-family: var(--body); letter-spacing: .08em; font-size: 13px; }
.invite-count { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(168, 195, 74, .3); font: 500 12.5px/1 var(--sans); letter-spacing: .02em; text-transform: none; }
.invite-count[hidden] { display: none; }
:root:not(:lang(en)) .invite-count { font-family: var(--body); }
.invite .ticket-stage { margin-top: 4px; }
.invite-past { margin-top: 10px; font-size: 13px; color: #FFD9A8; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.invite-actions .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.invite-actions .btn-text { color: #fff; }
.invite-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #fff; flex: none; }
.invite-x svg, .sheet-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* the back of the ticket (only seen while it is dealt) */
.ticket-back { position: absolute; inset: 0; z-index: 2; border-radius: 12px; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 6px; color: #F4EFE4;
  background: radial-gradient(120% 95% at 28% 18%, #4A7A3E 0%, #2B4430 52%, #1B2C20 100%);
  --notch-back: radial-gradient(circle at 71px 0, #0000 9px, #000 9.5px) 0 0 / 100% 51% no-repeat, radial-gradient(circle at 71px 100%, #0000 9px, #000 9.5px) 0 100% / 100% 51% no-repeat;
  -webkit-mask: var(--notch-back); mask: var(--notch-back); }   /* seen from behind, the perforation is on the left */
.ticket-back[hidden] { display: none; }
.ticket-back::before { content: ""; position: absolute; inset: 0; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23F4EFE4' stroke-width='1.6'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 26px 45px; }
.ticket-back::after { content: ""; position: absolute; inset: 7px; border-radius: 8px; border: 1px solid rgba(233, 205, 132, .5); box-shadow: inset 0 0 0 3px rgba(233, 205, 132, .08);
  background: linear-gradient(110deg, transparent 35%, rgba(255, 246, 220, .22) 48%, rgba(255, 246, 220, .05) 56%, transparent 65%) 120% 0 / 300% 100% no-repeat; animation: back-sheen 1.4s var(--ease) .5s both; }
@keyframes back-sheen { to { background-position: -20% 0; } }
.ticket-back img { position: relative; width: 64px; height: 64px; }
.tb-word { position: relative; font: 600 15px/1 var(--sans); letter-spacing: .5em; margin-right: -.5em; }
.tb-sub { position: relative; font: 600 11px/1 var(--mincho); letter-spacing: .3em; opacity: .7; }

/* dealt: the ticket slides in face down, turns over (out → in, the same flip as changing drinks), and the foil flashes */
.ticket-flip.dealing { animation: deal .9s var(--ease) .25s both; }
.invite.dealing .invite-actions, .invite.dealing .invite-past { opacity: 0; }
.invite.dealt .invite-actions, .invite.dealt .invite-past { animation: rise .7s var(--ease) both; }
.invite.dealt .invite-actions { animation-delay: .12s; }
@keyframes deal { from { opacity: 0; transform: translateY(46px) rotate(-5deg) scale(.92); } to { opacity: 1; transform: none; } }
.ticket::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .95) 47%, #fff 50%, rgba(255, 255, 255, .9) 53%, transparent 70%) 130% 0 / 320% 100% no-repeat; }
.ticket.shine::after { animation: shine 1s var(--ease) both; }
@keyframes shine { 0% { opacity: 1; background-position: 130% 0; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
.has-invite .wall { grid-template-rows: auto 1fr auto; }
@media (min-width: 900px) {   /* desktop: the recipient's ticket heads the right column, in view on arrival; the picks step aside (the ticket names the drink) */
  .has-invite .wall { grid-template-rows: auto 1fr; }
  .has-invite .invite { grid-column: 2; grid-row: 1; align-self: start; width: 100%; }
  .has-invite .hero-copy { grid-row: 2; }
  .has-invite .hero-cups { display: none; }
}

/* ───────── 6 · FIND THE GREEN WALL ───────── */
.find { background: var(--wall); color: #fff; padding: clamp(84px, 12vw, 150px) var(--gutter) clamp(100px, 12vw, 150px); position: relative; overflow: hidden; isolation: isolate; }
.find::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light; background-image: inherit; }
.find-grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 44px; align-items: center; }
.facade { max-width: 440px; width: 86%; margin: 0 auto; position: relative; }
.facade img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); transition: filter 1.6s var(--ease); }
.js:not(.static) .facade:not(.lit) img { filter: brightness(.62) saturate(.75); }
.facade-cap { position: absolute; right: 10px; bottom: 8px; font: 500 10.5px/1 var(--sans); letter-spacing: .04em; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
:root:not(:lang(en)) .facade-cap { font-family: var(--body); }
.find-copy h2 { color: #fff; margin-bottom: 18px; }
.find-copy > p { color: rgba(255, 255, 255, .86); max-width: 30rem; }
.find-facts { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); max-width: 34rem; }
.find-facts div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); align-items: baseline; }
.find-facts dt { font: 500 11.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
:root:not(:lang(en)) .find-facts dt { font: 500 13px/1.5 var(--body); letter-spacing: .04em; }
.find-facts dd { font-size: 15.5px; line-height: 1.5; }
.find-open { display: inline-block; margin-left: 6px; font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
:root:not(:lang(en)) .find-open { font-family: var(--body); }
.find-open:empty { display: none; }
.find-open.open { background: rgba(168, 195, 74, .25); }
.find-addr-ja { display: block; font-size: 13px; opacity: .7; margin-top: 2px; }
.addr-copy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: none; color: #fff; font: 500 13px/1 var(--sans); cursor: pointer; }
:root:not(:lang(en)) .addr-copy { font-family: var(--body); }
.addr-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (hover: hover) { .addr-copy:hover { background: rgba(255, 255, 255, .1); } }
:root:lang(ja) .find-addr-ja { display: none; }
.find-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.find-actions .btn-big { flex: 1 1 100%; }
.find-actions .btn-ghost-light { flex: 1 1 calc(50% - 6px); white-space: nowrap; }
@media (max-width: 400px) { .find-actions .btn-ghost-light { flex-basis: 100%; } }
@media (min-width: 560px) { .find-actions .btn-big, .find-actions .btn-ghost-light { flex: 0 0 auto; } }
.find-hours { margin-top: 18px; font-size: 14px; opacity: .8; }
.find-clock { margin-top: 6px; font: 500 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.find-clock time { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
:root:not(:lang(en)) .find-clock span { font-family: var(--body); letter-spacing: .06em; }
@media (min-width: 900px) { .find-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(50px, 7vw, 120px); } .facade { width: 100%; margin: 0; justify-self: end; } }

/* ───────── FOOTER ───────── */
.foot { background: var(--wall-deep); color: var(--cream); padding: 70px var(--gutter) calc(110px + env(safe-area-inset-bottom)); display: grid; gap: 34px; justify-items: center; text-align: center; }
.foot-brand { display: grid; gap: 8px; justify-items: center; }
.foot-brand img { width: 56px; opacity: .9; }
.foot-word { font: 600 22px/1 var(--sans); letter-spacing: .3em; margin-right: -.3em; margin-top: 8px; }
.foot-word span { font: 600 16px/1 var(--mincho); letter-spacing: .1em; margin-left: .3em; opacity: .7; }
.foot-tag { font: 600 16px/1.6 var(--mincho); letter-spacing: .12em; margin-top: 10px; }
.foot-tagt { font: italic 400 15px/1.4 var(--serif); opacity: .7; }
.foot-tagt:empty { display: none; }
.foot-tools { display: grid; gap: 14px; justify-items: center; }
.foot-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.foot-langs button { border: 0; background: none; padding: 10px 12px; min-height: 44px; font-size: 14px; color: rgba(241, 235, 223, .7); cursor: pointer; border-radius: 8px; }
.foot-langs button[aria-current="true"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.motion { border: 1px solid rgba(241, 235, 223, .35); background: none; border-radius: 999px; min-height: 44px; padding: 0 18px; font: 500 13px/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
:root:not(:lang(en)) .motion { font-family: var(--body); }
.foot-top { font-size: 13px; opacity: .7; padding: 10px; }
.foot-small { font-size: 12px; opacity: .6; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
@media (min-width: 900px) { .foot { padding-bottom: 70px; } }

/* ───────── DOCK (phones) ───────── */
.dock { position: fixed; z-index: 45; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translate(-50%, calc(100% + 140px)); display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(247, 243, 235, .66); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 10px 34px rgba(20, 30, 24, .22);
  transition: transform .5s var(--spring); }
.dock.on { transform: translate(-50%, 0); }
.host-badge .dock { bottom: calc(76px + env(safe-area-inset-bottom)); }
.host-badge .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.dock a { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 15px; border-radius: 999px; text-decoration: none; color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; }
:root:not(:lang(en)) .dock a { font-family: var(--body); }
.dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dock .dock-map { background: var(--wall); color: #fff; padding-right: 18px; }
@media (min-width: 900px) { .dock { display: none; } }

/* ───────── SHEET ───────── */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 92svh; border-radius: 22px 22px 0 0; background: var(--paper-2); color: var(--ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 -20px 60px rgba(0, 0, 0, .25); }
.sheet::backdrop { background: rgba(20, 26, 22, .5); }
.sheet[open] { animation: sheet-in .45s var(--spring); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sheet-inner { position: relative; display: grid; }
.sheet-x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .86); display: grid; place-items: center; cursor: pointer; }
.sheet-photo { position: relative; }
.sheet-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; max-height: 52svh; }
.sheet-photo .photo-tag:empty { display: none; }
.sheet-body { padding: 18px 22px calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sheet-body .name { font-size: 26px; }
.sheet-body .desc { font-size: 15.5px; }
.opts { width: 100%; display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.opt[hidden] { display: none; }
.opt-h { font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
:root:not(:lang(en)) .opt-h { font: 500 13px/1 var(--body); letter-spacing: .04em; }
.opt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-row label { position: relative; cursor: pointer; }
.opt-row input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt-row span { display: grid; place-items: center; min-height: 42px; min-width: 56px; padding: 0 14px; border-radius: 999px; border: 1.3px solid rgba(43, 68, 48, .3); font: 500 14.5px/1 var(--sans); }
:root:not(:lang(en)) .opt-row span { font-family: var(--body); }
.opt-row label:has(input:checked) span { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.opt-row label:has(input:focus-visible) span, .opt-oat:has(input:focus-visible) { outline: 2px solid var(--soft); outline-offset: 2px; }
.opt-oat { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.opt-oat input { width: 22px; height: 22px; accent-color: var(--ink-2); margin: 0; }
.sheet-actions { width: 100%; display: grid; gap: 10px; margin-top: 20px; }
.sheet-actions .btn { width: 100%; min-height: 52px; }
.sheet-body .temps:empty { display: none; }
@media (min-width: 760px) {
  .sheet { margin: auto; width: min(880px, 92vw); border-radius: 18px; }
  .sheet-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .sheet-photo img { max-height: none; }
  .sheet-body { padding: 30px 34px; }
  .sheet-actions { grid-template-columns: 1fr 1fr; }
}
.order { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--noren); color: var(--ink); }
.order::backdrop { background: var(--noren); }
.order[open] { animation: sheet-in .4s var(--spring); }
.order-inner { min-height: 100%; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 24px 0; max-width: 640px; margin: 0 auto; }
.order-top { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--mincho); letter-spacing: .14em; padding-bottom: 14px; border-bottom: 2px solid var(--ink-2); }
.order-top img { width: 40px; }
.order-x { margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.order-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.order-ask { margin-top: clamp(14px, 6vh, 64px); font: 600 clamp(20px, 5.6vw, 28px)/1.4 var(--gothic); letter-spacing: .04em; color: var(--mute); }
.order-item { margin-top: 10px; font: 700 clamp(34px, 10vw, 60px)/1.25 var(--mincho); letter-spacing: .02em;
  font-size: max(30px, min(clamp(34px, 10vw, 60px), calc((min(100vw, 640px) - 48px) / (var(--n, 8) * 1.04)))); }   /* one line when it can */
.order-item span { display: inline-block; }      /* …and if not, it breaks between phrases only */
.order-mods { margin-top: 22px; display: grid; gap: 10px; }
.order-mods li { font: 700 clamp(22px, 6.4vw, 34px)/1.3 var(--gothic); padding-left: 18px; border-left: 5px solid var(--ink-2); }
.order-total { margin-top: 26px; font: 600 clamp(26px, 7vw, 40px)/1 var(--gothic); }
.order-item:focus { outline: none; }          /* it takes the dialog's first focus (no ring on the close button) */
.order-local { margin-top: 22px; font-size: 15px; color: var(--mute); }
.order-local:empty { display: none; }
.order-hint { margin-top: 6px; font-size: 14px; color: var(--mute); }
/* the photo: an arched window at the foot of the card, its sill on the screen's bottom edge. It takes the space left
   (container units): at least square, up to a little taller than wide on tall phones; the cup always stays whole */
.order-photo { flex: 1 1 0; min-height: 170px; margin: 18px 0 0; container-type: size; display: grid; justify-items: center; align-items: end; }
.order-photo[hidden] { display: none; }
.order-arch { position: relative; width: min(100cqw, calc(100cqh - 8px), 420px); height: min(calc(100cqh - 8px), min(100cqw, 420px) * 1.18); border-radius: 999px 999px 0 0;
  outline: 1.5px solid var(--ink-2); outline-offset: 6px; background: #E9DFCF; }
.order-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; border-radius: inherit; display: block; }   /* square photo; a taller arch crops only the sides */
.order-arch figcaption { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; font: 500 10.5px/1 var(--gothic); letter-spacing: .12em; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(60, 35, 10, .55); }
.order[open] .order-arch { animation: arch-rise .7s var(--ease) .12s both; }
@keyframes arch-rise { from { opacity: 0; transform: translateY(24px); } }

::view-transition-group(item-photo) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ───────── EFFECTS ───────── */
/* 1 · the cup in the nav fills with matcha as you read */
.sip { display: grid; place-items: center; width: 28px; height: 40px; }
.sip svg { width: 22px; height: 26px; overflow: visible; }
.sip-cup { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sip-fill { fill: var(--soft); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--page, 0)); }
.nav.solid .sip-fill { fill: var(--matcha); }
@media (max-width: 359px) { .sip { display: none; } }
/* 2 · warm spotlight that follows the pointer across the wall (desktop) */
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s; background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 30%), rgba(255, 238, 205, .17), rgba(255, 238, 205, .05) 45%, transparent 70%); }
.wall.lit-pointer .spot { opacity: 1; }
.wall.lit-pointer .wm { text-shadow: calc(var(--lx, 0) * -1px) 1px 0 #E3E7E2, calc(var(--lx, 0) * -2px) 2px 0 #C9D0CA, calc(var(--lx, 0) * -3px) 3px 0 #AEB8B1, calc(var(--lx, 0) * -4px) 4px 0 #94A098, calc(var(--lx, 0) * -6px) 5px 1px rgba(0, 0, 0, .25), calc(var(--lx, 0) * -14px) 14px 26px rgba(0, 0, 0, .3), 0 0 60px rgba(255, 248, 228, .14); }
/* 4 · the red seal stamps onto section heads */
.sec-head, .meet-intro { position: relative; }
.sec-seal { position: absolute; right: 0; top: -6px; width: 34px; height: auto; transform: rotate(-8deg); opacity: .9; }
.js:not(.static) .sec-seal { opacity: 0; }
.js:not(.static) .in-view > .sec-seal, .js:not(.static) .sec-seal.in-view { animation: stamp-in .6s var(--spring) .15s both; }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(2.2) rotate(-24deg); } 55% { opacity: 1; } 100% { opacity: .9; transform: scale(1) rotate(-8deg); } }
/* 5 · menu photos tilt and catch the light under the pointer (desktop) */
@media (hover: hover) and (pointer: fine) {
  .js:not(.static) .item-photo { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); will-change: transform; }
  .js:not(.static) .item-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glare, 0); transition: opacity .4s; background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), transparent 60%); mix-blend-mode: soft-light; }
}
/* 7 · the sign glows a little brighter while the shop is open */
.is-open .disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 26px rgba(0, 0, 0, .25), 0 0 70px rgba(255, 246, 220, .38); }


/* ───────── HOLO TICKET (foil per drink; tilt = pointer / gyroscope / slow idle orbit) ─────────
   --mx/--my light position on the ticket, --rx/--ry tilt, --bx/--by foil band position, --hyp distance from centre */
.ticket-stage { perspective: 1000px; margin-top: 6px; position: relative;
  --notch: radial-gradient(circle at calc(100% - 71px) 0, #0000 9px, #000 9.5px) 0 0 / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 71px) 100%, #0000 9px, #000 9.5px) 0 100% / 100% 51% no-repeat; }
.ticket-flip { position: relative; perspective: 1000px; filter: drop-shadow(0 18px 30px rgba(30, 40, 30, .16)); }   /* shadow here: the ticket's mask would cut it */
.ticket { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --bx: 50%; --by: 50%; --hyp: .35;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .9s var(--ease); }
.ticket.live { transition: none; }
.t-sparkle, .t-foil, .t-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; }
.t-glare { mix-blend-mode: overlay; opacity: calc(.25 + var(--hyp) * .55);
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .9) 4%, rgba(255, 255, 255, .35) 22%, rgba(0, 0, 0, .32) 88%); }
.t-foil { mix-blend-mode: hard-light; opacity: .62; background-size: 320% 320%; background-position: var(--bx) var(--by);
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .12) 75%);
  mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .12) 75%); }
.t-sparkle { mix-blend-mode: color-dodge; opacity: .85; background-position: calc(var(--bx) * .3) calc(var(--by) * .3); }

/* the rarity mark on the ticket */
.t-find { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.t-rarity { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 var(--sans); letter-spacing: .16em; color: var(--ink-2); font-style: normal; white-space: nowrap; }
.t-rarity svg { width: 10px; height: 10px; fill: currentColor; }
.t-rarity b { font: 700 11.5px/1 var(--mincho); letter-spacing: .08em; }
.t-rarity i { font-style: normal; opacity: .75; }

/* 麻の葉 data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E — not decided: the brand pattern, iridescent where the light falls */
.ticket[data-foil="asanoha"] .t-sparkle { mix-blend-mode: multiply; opacity: .14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 26px 45px; }
.ticket[data-foil="asanoha"] .t-foil { opacity: 1; background-image: repeating-linear-gradient(115deg, #3FBF5A 0%, #2FB0C0 5%, #8A78F0 10%, #F0B040 15%, #3FBF5A 20%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 55%, transparent 90%); -webkit-mask-size: 26px 45px, 100% 100%; -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M26 0v30M0 15l26 15 26-15M0 15v30M52 15v30M0 45l26-15 26 15M26 30v30M0 75l26-15 26 15M0 45v30M52 45v30M26 60v30M0 75l26 15 26-15'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 55%, transparent 90%); mask-size: 26px 45px, 100% 100%; mask-composite: intersect; }
/* 金屏風 KINBYOBU — 01, the top cup (named for the stub; not 金箔, which reads as gold leaf on the drink). 料紙装飾 + 金屏風 (img/make_byobu.py): the stub is laid with gold-leaf squares,
   砂子・切箔・野毛 drift out of it in 霞 bands along the top (蒔絵 on the green header) and the bottom; the title is gold-stamped.
   Light: a soft sheen travels across the gold (.t-sparkle); each leaf and grain has its own facet (kin-*-f.webp, one grey per piece)
   and only the pieces whose facet matches the tilt (--fk) flash — |facet − fk| (background-blend difference), then a steep
   contrast curve turns "close to fk" into a glint (.t-foil). */
.ticket[data-foil="byobu"] { --kin-img: url(img/foil/kin-top.webp), url(img/foil/kin-bottom.webp), url(img/foil/kin-stub.webp); --kin-pos: right 72px top 0, right 72px bottom 0, right 0 top 0; --kin-size: 260px auto, 260px auto, 72px auto; --kin-rep: no-repeat, no-repeat, repeat-y; }
.ticket[data-foil="byobu"] .t-main { background:
  url(img/foil/kin-top.webp) right top / 260px auto no-repeat, url(img/foil/kin-bottom.webp) right bottom / 260px auto no-repeat,
  linear-gradient(180deg, #FBF7EC, #F5EEDD); }
.ticket[data-foil="byobu"] .t-title { background: url(img/foil/kin-top.webp) right top / 260px auto no-repeat, linear-gradient(90deg, #1C2E21, #24392A 60%, #2B4430); }
.ticket[data-foil="byobu"] .t-title > span:first-child {
  background: linear-gradient(100deg, #A9792C 0%, #D8B05E 28%, #FFF0C4 46%, #F3D58C 54%, #C99A45 74%, #9C6D24 100%) var(--bx) 50% / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket[data-foil="byobu"] .t-rarity b, .ticket[data-foil="byobu"] .t-rarity i {         /* on cream: a deeper gold so it reads */
  background: linear-gradient(100deg, #7A5518 0%, #9C7026 35%, #D9B262 50%, #9C7026 65%, #7A5518 100%) var(--bx) 50% / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket[data-foil="byobu"] .t-title-en { color: #E9D7A6; opacity: 1; text-shadow: 0 1px 2px rgba(10, 20, 12, .8); }
.ticket[data-foil="byobu"] .t-rarity svg { fill: #B08A3A; }
.ticket[data-foil="byobu"] .t-stub { background: #EBDDBA url(img/foil/kin-stub.webp) 0 0 / 72px auto repeat-y; background-origin: border-box; border-left-color: rgba(70, 46, 12, .38); }
.ticket[data-foil="byobu"] .t-stub > * { position: relative; z-index: 5; }          /* ink and seal sit on the gold, above its light */
.ticket[data-foil="byobu"] .t-no { color: #5E4520; } .ticket[data-foil="byobu"] .t-no b { color: #3B2A10; }
.ticket[data-foil="byobu"] .t-word { color: #3B2A10; }
/* sheen: warm, never white — lit gold stays gold */
.ticket[data-foil="byobu"] .t-sparkle { mix-blend-mode: overlay; opacity: 1;
  background: linear-gradient(118deg, rgba(74, 42, 6, .52) 0%, rgba(84, 48, 8, .42) 34%, transparent 43%, rgba(255, 214, 140, .85) 48%, rgba(255, 230, 172, 1) 50%, rgba(255, 206, 128, .8) 52%, transparent 57%, rgba(84, 48, 8, .42) 66%, rgba(74, 42, 6, .52) 100%) var(--bx) var(--by) / 300% 300%;
  -webkit-mask-image: var(--kin-img); -webkit-mask-position: var(--kin-pos); -webkit-mask-size: var(--kin-size); -webkit-mask-repeat: var(--kin-rep);
  mask-image: var(--kin-img); mask-position: var(--kin-pos); mask-size: var(--kin-size); mask-repeat: var(--kin-rep); }
/* glints: ::before = |facet − fk| through a steep curve (white where the piece faces the light), ::after tints it amber;
   the layer colour-dodges onto the gold — black does nothing, amber lifts the gold to its brightest */
.ticket[data-foil="byobu"] .t-foil { mix-blend-mode: color-dodge; opacity: calc(.7 + var(--hyp) * .3); background: none;
  -webkit-mask-image: var(--kin-img); -webkit-mask-position: var(--kin-pos); -webkit-mask-size: var(--kin-size); -webkit-mask-repeat: var(--kin-rep);
  mask-image: var(--kin-img); mask-position: var(--kin-pos); mask-size: var(--kin-size); mask-repeat: var(--kin-rep); }
.ticket[data-foil="byobu"] .t-foil::before, .ticket[data-foil="byobu"] .t-foil::after { content: ""; position: absolute; inset: 0; }
.ticket[data-foil="byobu"] .t-foil::before {
  background: url(img/foil/kin-top-f.webp), url(img/foil/kin-bottom-f.webp), url(img/foil/kin-stub-f.webp) hsl(0 0% var(--fk, 50%));
  background-position: var(--kin-pos); background-size: var(--kin-size); background-repeat: var(--kin-rep); background-blend-mode: difference;
  filter: invert(1) brightness(.514) contrast(30); }   /* lit when |facet − fk| < ~.06 */
.ticket[data-foil="byobu"] .t-foil::after { background: rgb(126, 68, 10); mix-blend-mode: multiply; }
.ticket[data-foil="byobu"] .t-glare { opacity: calc(.12 + var(--hyp) * .28); }
/* 抹茶オーロラ AURORA — 02: a green-leaning rainbow */
.ticket[data-foil="aurora"] .t-foil { background-image: repeating-linear-gradient(115deg, #5FBF6A 0%, #3FB8A8 5%, #6E9CEB 10%, #B78BE0 15%, #E8C46A 20%, #9BD46A 25%, #5FBF6A 30%); }
.ticket[data-foil="aurora"] .t-sparkle { background: url(img/foil/glitter.webp) 0 0 / 160px 160px; }
/* 苺プリズム ICHIGO — 03: pink prism */
.ticket[data-foil="ichigo"] .t-foil { background-image: repeating-linear-gradient(115deg, #F07A92 0%, #F6A6B8 5%, #FFD6A0 10%, #E86A8A 15%, #C77ADB 20%, #F07A92 25%); }
.ticket[data-foil="ichigo"] .t-sparkle { background: url(img/foil/glitter.webp) 0 0 / 120px 120px; }
.ticket[data-foil="ichigo"] { --pinktint: 1; }
.ticket[data-foil="ichigo"] .t-title { background: linear-gradient(90deg, var(--ink-2), #6E3346); }
/* 焙じブロンズ BRONZE — 04: brushed copper */
.ticket[data-foil="bronze"] .t-foil { mix-blend-mode: soft-light; opacity: 1; background-image: repeating-linear-gradient(90deg, rgba(90, 50, 20, .35) 0 1px, rgba(255, 220, 180, .25) 1px 3px), linear-gradient(115deg, #8A5426 0%, #C98A52 30%, #F3D0A2 46%, #A8692F 56%, #6E3E18 100%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--bx) var(--by); -webkit-mask-image: none; mask-image: none; }
.ticket[data-foil="bronze"] .t-title { background: linear-gradient(90deg, #5B3A1E, #8A5A2E); }
/* 星屑 COSMOS — 05: a night sky with stars */
.ticket[data-foil="cosmos"] .t-title { background: linear-gradient(90deg, #1E2A44, #2B4430); }
.ticket[data-foil="cosmos"] .t-sparkle { background: url(img/foil/stars.webp) 0 0 / 240px 240px; opacity: 1; }
.ticket[data-foil="cosmos"] .t-foil { background-image: radial-gradient(60% 50% at 30% 40%, #6D5BD0 0%, transparent 70%), radial-gradient(50% 60% at 70% 65%, #2FA6A0 0%, transparent 70%), repeating-linear-gradient(115deg, #7C6BE0 0%, #3FB8C8 8%, #B88BE0 16%, #7C6BE0 24%); background-size: 100% 100%, 100% 100%, 320% 320%; background-position: 0 0, 0 0, var(--bx) var(--by); opacity: .55; }
/* 氷晶 ICE — 06: cracked-ice prism */
.ticket[data-foil="ice"] .t-sparkle { mix-blend-mode: soft-light; opacity: 1; background: url(img/foil/ice.webp) 0 0 / 260px 260px; background-position: calc(var(--bx) * .15) calc(var(--by) * .15); }
.ticket[data-foil="ice"] .t-foil { background-image: repeating-linear-gradient(115deg, #49B8E8 0%, #8E7CF0 6%, #E8F4FF 12%, #3FC0A8 18%, #49B8E8 24%);
  -webkit-mask-image: url(img/foil/ice.webp), radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, transparent 75%); -webkit-mask-size: 260px 260px, 100% 100%; -webkit-mask-composite: source-in;
  mask-image: url(img/foil/ice.webp), radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, transparent 75%); mask-size: 260px 260px, 100% 100%; mask-composite: intersect; mask-mode: luminance; opacity: 1; }

/* drawing a new card: the flip */
.ticket-flip.out { transition: transform .16s ease-in; transform: rotateY(90deg); }
.ticket-flip.in { animation: card-in .55s var(--spring); }
@keyframes card-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }


/* ticket image preview (share / long-press save / download) */
.saveimg { border: 0; padding: 0; margin: auto; width: min(440px, 94vw); max-height: 94svh; background: transparent; overflow: visible; }
.saveimg::backdrop { background: rgba(14, 22, 16, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.saveimg[open] { animation: sheet-in .4s var(--spring); }
.saveimg-inner { display: grid; justify-items: center; gap: 12px; color: #fff; text-align: center; }
.saveimg-title { font: 600 15px/1.4 var(--display); letter-spacing: .06em; }
.saveimg-img { width: auto; max-width: 100%; max-height: 68svh; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); -webkit-touch-callout: default; user-select: auto; }
.saveimg-hint { font-size: 13px; opacity: .85; }
.saveimg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; }
.saveimg-actions .btn-text { color: #fff; }

/* ───────── HERO 「注ぐ」 (experimental, ?hero=pour) ───────── */
.hero-pour .hero { background: #2E4A27; }
.hero-pour .wall { background: radial-gradient(130% 70% at 50% -5%, #6E9C3E 0%, #4C7A2E 38%, #2F5023 72%, #1E3418 100%); }
.hero-pour .wall::before, .hero-pour .wall::after, .hero-pour .lights, .hero-pour .spot { display: none; }
.pour-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity .25s ease; touch-action: pan-y; }
.pour-canvas.on { opacity: 1; }
.hero-pour .wm { color: #F4F0E4; text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 3px 2px rgba(20, 40, 15, .18), 0 14px 30px rgba(10, 25, 8, .35); }
.hero-pour .wm span { animation: none !important; }
.hero-pour.js:not(.static):not(.pour-fail) .wm span { opacity: 0; }       /* the milk pours them in */
.hero-pour .disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 12px 30px rgba(10, 25, 8, .35); }
.hero-pour .clock, .hero-pour .status { background: rgba(10, 25, 8, .28); }
.hero-pour .hero-cups a { background: rgba(10, 25, 8, .22); border-color: rgba(255, 255, 255, .16); }
.hero-pour .nav.dark { background: rgba(38, 64, 32, .78); }

/* ───────── MOTION (only with JS and not paused / reduced) ───────── */
.js:not(.static) .lights i { animation: lights-on 1.6s steps(1) .2s both; }
@keyframes lights-on { 0% { opacity: 0; } 18% { opacity: var(--lit); } 24% { opacity: .1; } 34% { opacity: var(--lit); } 100% { opacity: var(--lit); } }
.js:not(.static) .wm span { animation: letter-on .9s var(--ease) both; animation-delay: calc(.35s + var(--i) * .09s); }
@keyframes letter-on { from { opacity: 0; transform: translateY(.12em); text-shadow: none; } }
.js:not(.static) .disc { animation: disc-on 1s var(--ease) .2s both; }
@keyframes disc-on { from { opacity: 0; transform: scale(.9); } }
.js:not(.static) .hero-copy > * { animation: rise .9s var(--ease) both; animation-delay: calc(.9s + var(--d, 0s)); }
.js:not(.static) .hero-copy > :nth-child(2) { --d: .1s; } .js:not(.static) .hero-copy > :nth-child(3) { --d: .2s; } .js:not(.static) .hero-copy > :nth-child(4) { --d: .3s; } .js:not(.static) .hero-copy > :nth-child(5) { --d: .4s; } .js:not(.static) .hero-copy > :nth-child(6) { --d: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sip-fill { from { transform: scaleY(.06); } to { transform: scaleY(1); } }
.js:not(.static) .status.open .status-dot { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 195, 74, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(168, 195, 74, 0); } }

/* scroll-scrubbed stages. Keyframes span the whole stage; native: scroll timeline, fallback: JS sets --p and we seek via negative delay. */
.js:not(.static) .stage { height: 175vh; height: 175svh; }
.js:not(.static) .stage-sticky { position: sticky; top: 0; }
.js:not(.static) .noren { height: 64%; }
.js:not(.static) .stage-hint { display: inline-flex; }
.js:not(.static) .origin-stage { height: 195vh; height: 195svh; }
.js:not(.static) .origin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }

.js:not(.static) [data-scrub] .scrub,
.js:not(.static) .stage .panel-wrap,
.js:not(.static) .stage .cloth > .panel,
.js:not(.static) .stage .stage-photo img,
.js:not(.static) .stage .stage-words,
.js:not(.static) .stage .stage-hint,
.js:not(.static) .origin-stage .k,
.js:not(.static) .origin-stage .compose-roman,
.js:not(.static) .origin-stage .g {
  animation-timing-function: linear; animation-fill-mode: both; animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
}
.js:not(.static) .stage .cloth > .p1 { animation-name: part1; }
.js:not(.static) .stage .cloth > .p2 { animation-name: part2; }
.js:not(.static) .stage .cloth > .p3 { animation-name: part3; }
.js:not(.static) .stage .cloth > .p4 { animation-name: part4; }
.js:not(.static) .stage .cloth > .p5 { animation-name: part5; }
.js:not(.static) .stage .noren { animation-name: lift; }
.js:not(.static) .stage .stage-photo img { animation-name: photo-in; }
.js:not(.static) .stage .stage-words { animation-name: words-in; }
.js:not(.static) .stage .stage-hint { animation-name: hint-out; }
@keyframes part1 { 0%, 4% { transform: none; } 46%, 100% { transform: translateX(-70%) rotate(9deg); } }
@keyframes part2 { 0%, 4% { transform: none; } 46%, 100% { transform: translateX(-34%) rotate(5deg); } }
@keyframes part3 { 0%, 4% { transform: none; } 46%, 100% { transform: translateY(-14%) scaleY(.9); } }
@keyframes part4 { 0%, 4% { transform: none; } 46%, 100% { transform: translateX(34%) rotate(-5deg); } }
@keyframes part5 { 0%, 4% { transform: none; } 46%, 100% { transform: translateX(70%) rotate(-9deg); } }
@keyframes lift { 0%, 30% { transform: none; } 74%, 100% { transform: translateY(-104%); } }
@keyframes photo-in { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes words-in { 0%, 52% { opacity: 0; transform: translateY(26px); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes hint-out { 0% { opacity: 1; } 14%, 100% { opacity: 0; } }

.js:not(.static) .origin-stage .k-ma { animation-name: k-ma; }
.js:not(.static) .origin-stage .k-r1 { animation-name: k-r1; }
.js:not(.static) .origin-stage .k-r2 { animation-name: k-r2; }
.js:not(.static) .origin-stage .k-r3 { animation-name: k-r3; }
.js:not(.static) .origin-stage .k-r4 { animation-name: k-r4; }
.js:not(.static) .origin-stage .k-cha { animation-name: k-cha; }
.js:not(.static) .origin-stage .compose-roman { animation-name: roman; }
.js:not(.static) .origin-stage .g1 { animation-name: g1; }
.js:not(.static) .origin-stage .g2 { animation-name: g2; }
.js:not(.static) .origin-stage .g3 { animation-name: g3; }
@keyframes k-ma { 0%, 34% { transform: none; } 58%, 100% { transform: translate(var(--mx), var(--my)); } }
@keyframes k-r1 { 0%, 24% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes k-r2 { 0%, 26% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes k-r3 { 0%, 28% { opacity: 1; transform: none; } 42%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes k-r4 { 0%, 30% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes k-cha { 0%, 50% { opacity: 0; transform: translateY(.35em); } 64%, 100% { opacity: 1; transform: none; } }
@keyframes roman { 0%, 66% { opacity: 0; transform: translateY(10px); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes g1 { 0%, 22% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes g2 { 0%, 34% { opacity: 0; } 42%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes g3 { 0%, 70% { opacity: 0; } 80%, 100% { opacity: 1; } }

@supports (animation-timeline: view()) {
  .js:not(.static) .sip-fill { animation: sip-fill linear both; animation-timeline: scroll(root block); }
  .js:not(.static) .stage { view-timeline: --stage block; }
  .js:not(.static) .origin-stage { view-timeline: --origin block; }
  .js:not(.static) .stage .cloth > .panel, .js:not(.static) .stage .noren, .js:not(.static) .stage .stage-photo img, .js:not(.static) .stage .stage-words, .js:not(.static) .stage .stage-hint {
    animation-play-state: running; animation-delay: 0s; animation-duration: auto; animation-timeline: --stage; animation-range: contain 0% contain 100%;
  }
  .js:not(.static) .origin-stage .k, .js:not(.static) .origin-stage .compose-roman, .js:not(.static) .origin-stage .g {
    animation-play-state: running; animation-delay: 0s; animation-duration: auto; animation-timeline: --origin; animation-range: contain 0% contain 100%;
  }
  .js:not(.static) .reveal-up { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
}

/* static (no JS, reduced motion, or paused): finished states */
.static .noren, .no-js .noren { height: 20%; }
.static .stage-words p, .no-js .stage-words p { opacity: 1; }
.static .k-ma, .no-js .k-ma { transform: translate(var(--mx), var(--my)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }