/* 日影珈琲 — SAMPLE 01 · ESSENTIAL (Novaia Labs, self-initiated, fictional shop).
   One distinctive motion: the pinned stage "3:30" (scroll = brew time). Everything else is typographic and quiet. */
:root { --oat: #efe7da; --paper: #f6f0e6; --esp: #2a1c14; --esp-2: #6a5a4d; --crema: #b9691c; --line: rgba(42, 28, 20, .22);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; --mono: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --gut: clamp(18px, 3.3vw, 48px); --p: 0; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--oat); color: var(--esp); font: 400 16px/1.9 var(--sans); letter-spacing: .05em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--crema); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--esp); color: var(--oat); }
.skip:focus { top: 12px; }

.top { position: fixed; z-index: 30; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 2.2vw, 30px) var(--gut); font: 500 12px/1 var(--mono); letter-spacing: .14em; pointer-events: none; mix-blend-mode: normal; }
.top a, .top nav { pointer-events: auto; }
.top nav { display: flex; gap: clamp(16px, 2.2vw, 32px); font: 500 13px/1 var(--sans); letter-spacing: .12em; }
.top nav a { position: relative; padding: .8em 0; }
.top nav a::after { content: ""; position: absolute; left: 0; right: .12em; bottom: .3em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .55s cubic-bezier(.65, 0, .25, 1); }
.top nav a:hover::after, .top nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.top .shop { display: inline-flex; align-items: baseline; gap: 12px; color: var(--esp); }
.top .shop b { font: 800 clamp(17px, 1.5vw, 22px)/1 var(--serif); letter-spacing: .12em; }
.top .shop span { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(239, 231, 218, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.top.bar::before { opacity: 1; }
/* over the photo (right 44 %) the nav must stay legible: it sits on a soft veil only in the pinned layout */
.top nav { padding: 6px 12px; margin-right: -12px; border-radius: 99px; background: rgba(239, 231, 218, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ───────── stage: 0:00 → 3:30 ───────── */
.stage { position: relative; }
.js .stage { height: 440vh; }
.pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.js .pin { position: sticky; top: 0; }
.ph { position: absolute; right: 0; top: 0; width: 44vw; height: 100%; overflow: hidden; background: #cdb594; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; will-change: opacity, transform; }
.ph img:last-child { opacity: 1; } /* no-JS / reduced motion: the finished cup */
.js .ph img { opacity: 0; } .js .ph img:first-child { opacity: 1; }
.tl { position: absolute; z-index: 5; right: calc(44vw - 1px); top: 15vh; bottom: 15vh; width: 1px; background: var(--line); }
.tl i { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--p) * 100%); background: var(--esp); }
.tl b { position: absolute; right: 0; width: 14px; height: 1px; background: var(--esp); opacity: .3; transition: opacity .5s; }
.tl b.on { opacity: 1; } .tl b:last-child { margin-top: -1px; }
.kind { position: absolute; z-index: 5; left: var(--gut); top: clamp(58px, 9.2vh, 96px); font: 500 clamp(13px, 1vw, 15px)/1.6 var(--sans); letter-spacing: .14em; color: var(--esp-2); }
.time { position: absolute; z-index: 4; left: var(--gut); top: 14vh; font: 800 clamp(120px, 24vw, 380px)/.86 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time em { font-style: normal; color: var(--crema); }
.steps { position: absolute; z-index: 5; align-items: start; left: var(--gut); top: calc(14vh + clamp(120px, 24vw, 380px) * .86 + 5.5vh); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(20px, 2.6vw, 44px); width: min(calc(56vw - 2 * var(--gut)), 40em); }
.steps li { display: grid; justify-items: start; gap: 6px; }
.steps small { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; color: var(--esp-2); }
.steps b { display: inline-block; font: 500 clamp(22px, 2.4vw, 38px)/1 var(--serif); letter-spacing: .14em; color: var(--esp-2); padding-bottom: 12px; border-bottom: 1px solid transparent; transition: color .7s, border-color .7s; }
.steps li.on b { color: var(--esp); font-weight: 800; border-color: var(--crema); }
.fact { position: absolute; left: 0; top: 100%; width: min(34em, 56vw - 2 * var(--gut)); margin-top: 18px; word-break: auto-phrase; font: 400 14px/1.9 var(--sans); letter-spacing: .06em; color: var(--esp-2); opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; pointer-events: none; }
.steps li.on .fact { opacity: 1; transform: none; transition: opacity .7s .28s, transform .7s .28s; } /* the old line leaves first, then the new one arrives (no overlapping ghost text) */
.head { position: absolute; z-index: 5; left: var(--gut); bottom: 8.5vh; font: 500 clamp(19px, 1.8vw, 28px)/1.8 var(--serif); letter-spacing: .12em; }
.head small { display: block; font: 400 14px/1.9 var(--sans); letter-spacing: .14em; color: var(--esp-2); }
.price { position: absolute; z-index: 6; right: var(--gut); bottom: 8.5vh; text-align: right; color: #fff; text-shadow: 0 1px 14px rgba(42, 28, 20, .45); opacity: 0; transition: opacity 1.2s ease .2s; }
.price b { display: block; font: 500 clamp(20px, 1.8vw, 28px)/1.4 var(--serif); letter-spacing: .1em; }
.price span { font: 400 12px/1.6 var(--mono); letter-spacing: .14em; }
.stage.done .price { opacity: 1; }
.hint { position: absolute; z-index: 5; left: calc(var(--gut) + 0px); bottom: 3.2vh; font: 500 12px/1 var(--mono); letter-spacing: .16em; display: flex; align-items: center; gap: 14px; color: var(--esp-2); transition: opacity .6s; }
.hint i { width: 36px; height: 1px; background: currentColor; transform-origin: left; animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }
.stage.moved .hint, .stage.done .hint { opacity: 0; }
/* no JS / reduced motion: the finished state, all three steps and facts readable */
html:not(.js) .stage .steps { grid-template-columns: 1fr; row-gap: 6px; }
html:not(.js) .stage .steps li b { color: var(--esp); }
html:not(.js) .stage .fact { position: static; opacity: 1; transform: none; margin: 4px 0 8px; }
html:not(.js) .stage .price { opacity: 1; }
html:not(.js) .stage .time { top: 13vh; }
html:not(.js) .stage .steps { top: calc(11vh + clamp(120px, 24vw, 380px) * .86 + 4vh); }
html:not(.js) .stage .hint { display: none; }

/* ───────── sections ───────── */
.sec { padding: clamp(88px, 11vw, 190px) var(--gut) 0; max-width: 1480px; margin: 0 auto; }
.sec--end { padding-bottom: clamp(72px, 9vw, 140px); }
.sh { display: flex; align-items: baseline; gap: 1.6em; padding-top: 16px; border-top: 1px solid var(--line); font: 500 clamp(26px, 3vw, 46px)/1.3 var(--serif); letter-spacing: .12em; margin-bottom: clamp(36px, 4.4vw, 72px); }
.no { font: 500 12px/1 var(--mono); letter-spacing: .2em; color: var(--esp-2); }
.lead { font: 500 clamp(26px, 3.4vw, 54px)/1.55 var(--serif); letter-spacing: .1em; margin-bottom: clamp(32px, 4vw, 64px); }
.lead--s { font-size: clamp(22px, 2.2vw, 34px); margin-bottom: 20px; }
.menu { list-style: none; padding: 0; max-width: 56em; }
.menu li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 500 clamp(17px, 1.5vw, 22px)/1.6 var(--serif); letter-spacing: .1em; }
.menu i { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--esp-2); transform: translateY(-5px); }
.menu b { font: 500 clamp(19px, 1.7vw, 26px)/1 var(--serif); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.menu b::after { content: "円"; margin-left: .3em; font: 400 .6em var(--sans); }
.fine { margin-top: 20px; font-size: 13px; color: var(--esp-2); }
.beans { width: 100%; max-width: 62em; border-collapse: collapse; }
.beans th, .beans td { padding: 18px 12px 18px 0; text-align: left; border-top: 1px solid var(--line); vertical-align: baseline; font-weight: 400; }
.beans thead th { font: 500 12px/1.5 var(--mono); letter-spacing: .14em; color: var(--esp-2); padding-bottom: 10px; border-top: 0; }
.beans tbody th { font: 500 clamp(18px, 1.6vw, 24px)/1.5 var(--serif); letter-spacing: .1em; }
.beans td:last-child, .beans th:last-child { text-align: right; font-family: var(--serif); font-size: 1.15em; font-variant-numeric: tabular-nums; padding-right: 0; }
.beans tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.big8 { display: flex; align-items: baseline; gap: .12em; margin-bottom: 8px; font: 800 clamp(120px, 15vw, 240px)/.8 var(--serif); letter-spacing: -.04em; }
.big8 span { font: 500 clamp(22px, 2.4vw, 36px)/1 var(--serif); letter-spacing: .12em; }
.seatmap .stool circle { transition: none; }
.js .seatmap .stool circle { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .5s calc(var(--i) * 85ms), transform .6s cubic-bezier(.2, .7, .1, 1) calc(var(--i) * 85ms); }
.js .seatmap.in .stool circle { opacity: 1; transform: none; }
.two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.seatmap svg, .map svg { width: 100%; height: auto; display: block; }
.seatmap text, .map text { font: 500 12px var(--sans); letter-spacing: .1em; fill: var(--esp-2); }
.cnt { fill: none; stroke: var(--esp); stroke-width: 1.5; } .stool circle { fill: none; stroke: var(--esp); stroke-width: 1.5; } .win { stroke: var(--esp); stroke-width: 1.5; stroke-dasharray: 2 5; }
.road { fill: none; stroke: var(--line); stroke-width: 1.5; } .alley { fill: none; stroke: var(--esp); stroke-width: 1.5; } .walk { fill: none; stroke: var(--crema); stroke-width: 2; stroke-dasharray: 5 6; }
.st { fill: var(--oat); stroke: var(--esp); stroke-width: 1.5; } .me { fill: var(--crema); }
.map figcaption { margin-top: 8px; font-size: 12px; color: var(--esp-2); }
.hours div, .contact div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.hours div:last-child, .contact div:last-child { border-bottom: 1px solid var(--line); }
.hours dt, .contact dt { font: 500 12px/2 var(--mono); letter-spacing: .14em; color: var(--esp-2); }
.hours dd, .contact dd { margin: 0; font: 500 clamp(16px, 1.4vw, 20px)/1.8 var(--serif); letter-spacing: .08em; }
.contact { max-width: 52em; } .contact small { display: block; font: 400 12px/1.8 var(--sans); color: var(--esp-2); letter-spacing: .06em; }
.addr p { margin-bottom: 8px; color: var(--esp-2); } .addr .lead { color: var(--esp); }

.foot { margin-top: clamp(40px, 6vw, 96px); background: var(--esp); color: var(--oat); padding: clamp(40px, 5vw, 80px) var(--gut) 96px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); max-width: 1480px; margin: 0 auto; }
.fiction { font: 400 14px/2 var(--sans); letter-spacing: .06em; color: rgba(239, 231, 218, .82); } .fiction b { display: block; font: 500 clamp(17px, 1.5vw, 22px)/1.8 var(--serif); letter-spacing: .08em; color: var(--oat); margin-bottom: 8px; }
.spec-k { font: 500 12px/1.8 var(--mono); letter-spacing: .14em; color: #e0a766; margin-bottom: 8px; }
.spec ul { list-style: none; padding: 0; } .spec li { padding: 8px 0; border-top: 1px solid rgba(239, 231, 218, .2); font-size: 14px; letter-spacing: .05em; }
.back { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; padding: 10px 0; border-bottom: 1px solid currentColor; font: 500 14px/1.4 var(--sans); letter-spacing: .12em; }
.back i { width: 28px; height: 1px; background: currentColor; transition: width .5s cubic-bezier(.2, .7, .1, 1); } .back:hover i { width: 48px; }
.copy { max-width: 1480px; margin: 40px auto 0; font: 400 12px/1.6 var(--mono); letter-spacing: .1em; color: rgba(239, 231, 218, .6); }
.chip { position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 99px; background: rgba(42, 28, 20, .9); color: var(--oat); font: 500 11px/1 var(--mono); letter-spacing: .12em; white-space: nowrap; backdrop-filter: blur(8px); }
.chip span { opacity: .7; letter-spacing: .08em; font-family: var(--sans); } .chip i { width: 18px; height: 1px; background: currentColor; transition: width .4s; } .chip:hover i { width: 30px; }

/* reveal (set by JS only; never under reduced motion) */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, .84, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }

/* ───────── narrow: a different composition (photo on top, the time laid over its lower edge), not a shrunk desktop ───────── */
@media (max-width: 900px) {
  .top nav { display: none; }
  .top { background: linear-gradient(to bottom, rgba(239, 231, 218, .9), rgba(239, 231, 218, 0)); padding-bottom: 28px; }
  .kind { top: 58px; font-size: 13.5px; left: var(--gut); right: var(--gut); }
  .ph { left: 0; width: 100%; height: 56svh; }
  .ph img { object-position: 62% 40%; }
  .tl { display: none; }
  .time { left: 12px; top: calc(56svh - 17.5vw); font-size: 31vw; }
  .steps { top: calc(56svh + 15vw); left: var(--gut); width: auto; right: var(--gut); column-gap: 22px; }
  .steps b { font-size: 22px; }
  .steps small { font-size: 12.5px; }
  .fact { width: calc(100vw - 2 * var(--gut)); font-size: 15px; line-height: 1.85; margin-top: 16px; }
  .ph::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to bottom, rgba(239, 231, 218, 0), rgba(239, 231, 218, .92)); pointer-events: none; }
  .head { bottom: 6.5svh; font-size: 19px; }
  .head small { font-size: 14.5px; }
  .fine, .hours dt, .contact dt, .map figcaption, .contact small { font-size: 13px; }
  .price { top: calc(env(safe-area-inset-top, 0px) + 66px); bottom: auto; right: var(--gut); }
  .hint { display: none; }
  html:not(.js) .stage .time { top: calc(56svh - 17.5vw); } html:not(.js) .stage .steps { top: calc(56svh + 15vw); }
  .two, .foot-in { grid-template-columns: minmax(0, 1fr); }
  .hours div, .contact div { grid-template-columns: 6em minmax(0, 1fr); }
  .chip span { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hint i { animation: none; } .steps b, .fact, .steps li.on .fact, .price, .top nav a::after { transition: none; } }

/* header labels never wrap */
.top, .top a, .top nav a, .logo, .top .shop { white-space: nowrap; }