/* 陽だまりcafé: page CSS on top of the kit (system.css, motion.css, layout.css).
   Only what the kit lacks: Japanese setting, the sun motif, the films, and the section compositions. */

/* ------------------------------------------------------------ tokens */
:root[data-type="place"] {
  --sun: #ffc163;            /* the logo's sun */
  --sun-light: #fff4dc;      /* window light on the closing ground */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* bolder than the kit's place scale, by the client's ask: the headline carries the page */
  --t-hero: clamp(44px, 7.6vw, 112px);
  --t-h2: clamp(26px, 1.9vw + 18.6px, 46px);
  --t-h3: clamp(22px, .76vw + 19px, 30px);
  --t-lead: clamp(17px, .29vw + 15.9px, 20px);
}

/* ------------------------------------------------------------ Japanese setting */
body { letter-spacing: .04em; line-height: 1.8; font-feature-settings: normal; }
h1, h2, h3, .nav__logo, .footer__lede, .visit__address {
  font-feature-settings: "palt"; letter-spacing: .04em;
}
/* phrase-aware breaks for Japanese (Chrome 119+); elsewhere the normal strict breaks */
h1, h2, h3, p, li, dd, dt, address { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
:root[data-type="place"] :is(h2, .t-h2) { line-height: 1.32; }
h3 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.4; }
.nums { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nw { white-space: nowrap; }
.t-label { letter-spacing: .08em; }

/* ------------------------------------------------------------ line icons (Icon.astro, Lucide's shapes), in the text colour */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn > .icon, .link > .icon { width: 18px; height: 18px; }
.btn > .icon { margin-left: -2px; }
.hero-notice > .icon { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--accent); }
.nav__link > .icon { width: 18px; height: 18px; }
/* the bar's page links show their icons only in the phone and tablet menu */
@media (min-width: 1024px) { .nav__links .nav__link > .icon { display: none; } }
@media (max-width: 1023px) {
  .nav.is-open .nav__links .nav__link { gap: var(--s-3); }
  .nav.is-open .nav__links .nav__link > .icon { width: 22px; height: 22px; stroke-width: 1.5; color: var(--accent); }
}
.footer__col a { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer__col a > .icon { width: 16px; height: 16px; }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; padding: 8px 12px; background: var(--bg); z-index: 60; }

/* ------------------------------------------------------------ nav */
.nav__logo { font: 500 21px/1 var(--font-display); gap: 10px; }
.nav__logo img { height: 44px; width: auto; }
.nav__link { letter-spacing: .06em; }
@media (max-width: 639px) { .nav__logo img { height: 30px; } }

/* ------------------------------------------------------------ the sun (the logo's disc and its offset ring) */
.sun__disc { fill: var(--sun); }
.sun__ring { fill: none; stroke: var(--p-ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.sun__orbit { transform-box: view-box; transform-origin: 100px 100px; }

/* the hero's sun rises once, its ring draws itself and then circles the window slowly */
@media (prefers-reduced-motion: no-preference) {
  .hero-orb__sun .sun__disc { transform-box: fill-box; transform-origin: 50% 50%; animation: sun-rise 2.4s var(--ease-out) .15s both; }
  .hero-orb__ring .sun__ring { stroke-dasharray: 1; animation: ring-draw 2.6s var(--ease-out) .55s both; }
  .hero-orb__ring .sun__orbit { animation: orbit 36s linear infinite; }
}
@keyframes sun-rise { from { transform: translateY(22%) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
html.is-still .sun__orbit { animation-play-state: paused !important; }

/* ------------------------------------------------------------ hero: words left, the pour-over film in a round window right */
.hero--sun { padding-top: calc(var(--nav) + var(--s-6)); }
.hero--sun .hero-text { position: relative; isolation: isolate; }
.hero--sun .hero-copy { position: relative; z-index: 3; }
.hero--sun .hero-visual { position: relative; z-index: 1; }
.hero--sun h1 { font-size: var(--t-hero); line-height: 1.3; letter-spacing: .03em; }
.hero--sun h1 > span { display: block; white-space: nowrap; }

/* the round window: the film, the sun's disc set down-left behind it (a crescent shows), the ring set up-right.
   --d is the window's diameter; the visual column sizes it */
.hero-orb { position: absolute; right: 0; top: 50%; width: var(--d); aspect-ratio: 1; translate: 0 -50%; }
.hero-orb > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-orb__sun, .hero-orb__ring { overflow: visible; pointer-events: none; }
.hero-orb__sun { translate: -9.5% 6.8%; }
/* the ring is drawn in screen pixels (no viewBox), so its dash (pathLength 1, for the drawing-in) spans the whole
   circle at any size; it circles the window's centre */
.hero-orb__ring .sun__ring { vector-effect: none; }
.hero-orb__ring .sun__orbit { transform-box: view-box; transform-origin: 50% 50%; }
.hero-orb__film { border-radius: 50%; overflow: hidden; background: var(--p-surface); }
.hero-orb__film > .loop-pause { right: auto; left: 50%; bottom: 6%; translate: -50% 0; }
@media (min-width: 1024px) {
  /* the window as large as the column allows: a little wider than it, and short of its height */
  .hero--sun .hero-visual { container-type: size; }
  .hero-orb { --d: min(108cqw, 94cqh); }
  /* the words as one group in the middle of the screen */
  .hero--sun .hero-copy { justify-content: center; }
}
.hero-notice { font-weight: 400; color: var(--ink); }
.hero-notice a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 140ms; }
.hero-notice a:hover { text-decoration-color: currentColor; }
.hero--sun .hero__lead { font-size: var(--t-lead); line-height: 1.75; max-width: 24em; }
/* the closures note sits close under the hours it belongs to */
.hero--sun .hero__lead + .hero-notice { margin-top: var(--s-3); }
.hero--sun .btn-row { margin-top: var(--s-6); }
.hero--sun .btn { height: 52px; padding-inline: 28px; font-size: 17px; letter-spacing: .08em; }

/* ------------------------------------------------------------ films (the client's own footage, muted loops) */
.film { position: relative; overflow: hidden; background: var(--surface); min-height: 0; }
/* the frame sets the size; the film fills it and never sets it */
.film > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.film__toggle .i-play { display: none; }
.film__toggle[aria-pressed="true"] .i-pause { display: none; }
.film__toggle[aria-pressed="true"] .i-play { display: block; }
.film__toggle { opacity: .9; transition: opacity 140ms, transform 140ms var(--ease); }
.film__toggle:hover { opacity: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .film__toggle { display: grid; } }

/* ------------------------------------------------------------ the page below the hero: one rhythm, each section as tall as its content */
:root[data-type="place"] { --r-photo: 24px; }
main { overflow-x: clip; }
html { scroll-padding-top: var(--nav); }
main > section.section:not(.hero) { height: auto; min-height: 0; padding: clamp(96px, 7vw + 24px, 144px) 0; }
main > section.section:not(.hero) > .wrap { height: auto; display: block; }

/* ------------------------------------------------------------ header menu: the sections' English names (the same words as their titles), Japanese under */
.nav__links .nav__link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; height: 48px; }
.nav__en { font: italic 500 21px/1 var(--font-en); letter-spacing: .02em; }
.nav__ja { font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .12em; color: var(--muted); }
/* the section on screen (site.js) and the news pages: a small sun before the name */
.nav__links .nav__link:is(.is-current, [aria-current="page"])::after { content: ""; position: absolute; left: -2px; top: 13px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sun); box-shadow: 1.5px -1px 0 0 var(--ink); }
@media (max-width: 1023px) {
  /* the phone menu: each row its icon, the English name large and the Japanese at the right */
  .nav.is-open .nav__links .nav__link { flex-direction: row; align-items: center; gap: var(--s-3); width: 100%; height: 64px; }
  .nav.is-open .nav__en { font-size: 30px; }
  .nav.is-open .nav__ja { margin-left: auto; font-size: 12px; }
  .nav.is-open .nav__links .nav__link::after { display: none; }
}

/* ------------------------------------------------------------ section titles: a small sun, the English name, the Japanese name under it */
.ttl { display: grid; justify-items: start; gap: 10px; margin: 0; font: inherit; letter-spacing: normal; color: var(--ink); }
.ttl__en { display: inline-flex; align-items: center; gap: 14px; font: italic 500 clamp(32px, .9vw + 24px, 38px)/1 var(--font-en); letter-spacing: .01em; }
.ttl__mark { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--sun); }
.ttl__mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); translate: 3px -2px; }
.ttl__ja { padding-left: 27px; font: 500 13px/1.5 var(--font-text); letter-spacing: .18em; color: var(--muted); }

/* the "see more" link: its words and a ring with an arrow, which fills on hover */
.more { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 15px; font-weight: 500; letter-spacing: .08em; color: var(--ink); }
.more__ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out); }
.more__ring > .icon { width: 18px; height: 18px; transition: translate .35s var(--ease-out); }
.more:hover .more__ring { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.more:hover .more__ring > .icon { translate: 3px 0; }

/* ------------------------------------------------------------ News: dates and titles, a ruled list beside the title */
.news-tag { display: inline-block; padding: 2px var(--s-2); border: 1px solid var(--line-strong); font-size: var(--t-label); color: var(--ink); line-height: 1.5; letter-spacing: .04em; }
.news-top { row-gap: var(--s-6); align-items: start; }
.news-top__head { display: grid; justify-items: start; gap: var(--s-6); }
.news-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-5);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.news-row__date { color: var(--muted); font-size: var(--t-small); }
.news-row__title { font-size: 17px; font-weight: 500; line-height: 1.6;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 140ms; }
.news-row:hover .news-row__title { text-decoration-color: currentColor; }
.news-row > .icon { width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.news-row:hover > .icon { transform: translateX(3px); }
.news-empty { margin: 0; padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.news-empty a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* ------------------------------------------------------------ Menu: the set large with a sun badge, four plates set off a step, then Uber Eats */
.menu-sec .ttl { margin-bottom: var(--s-8); }
.feature { row-gap: var(--s-7); align-items: center; }
.feature__media { position: relative; }
.feature__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--p-surface); }
.feature__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 62%; }
/* the badge: the logo's sun with its ring, set on the photograph's corner */
.badge { position: absolute; z-index: 2; top: -44px; left: -36px; display: grid; place-content: center; width: 128px; height: 128px; margin: 0;
  border-radius: 50%; background: var(--sun); text-align: center; rotate: -8deg;
  font: var(--display-weight) 15px/1.3 var(--font-display); letter-spacing: .12em; color: var(--ink); }
.badge > span { display: block; margin-bottom: 4px; font: italic 500 23px/1 var(--font-en); letter-spacing: .02em; }
.badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); translate: 9px -7px; pointer-events: none; }
.feature__body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s-4); }
.feature__name { font-size: clamp(26px, 1vw + 19px, 34px); line-height: 1.45; }
.feature__concept { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(18px, .4vw + 15.5px, 21px);
  line-height: 1.75; letter-spacing: .05em; font-feature-settings: "palt"; color: var(--accent); }
.feature__note { color: var(--ink); }
.feature__body > .btn { margin-top: var(--s-2); }

/* the plates: four photographs, every other one a step lower */
.plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); align-items: start; margin-top: var(--s-10); }
.plates__item { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-photo); overflow: hidden; background: var(--p-surface); }
.plates { padding-bottom: var(--s-8); }
.plates__item:nth-child(even) { top: var(--s-8); }
.plates__item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.plates__item:hover > img, .has-reveal .plates__item.is-in:hover > img { scale: 1.04; }

/* Uber Eats */
.delivery { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin-top: var(--s-9);
  padding: var(--s-6) var(--s-7); border-radius: var(--r-photo); background: var(--p-surface); --bg: var(--p-surface); }
.delivery__text { display: grid; gap: var(--s-1); }
.delivery__text h3 { font-size: clamp(20px, .38vw + 18.5px, 24px); }
.delivery__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.delivery__actions .btn { height: 48px; background: var(--p-bg); }
.promo { display: inline-flex; align-items: center; gap: var(--s-3); height: 48px; margin: 0; padding: 0 var(--s-4); border-radius: var(--r-btn);
  border: 1px dashed color-mix(in oklab, var(--ink) 40%, transparent); background: var(--p-bg); }
.promo__label { font-size: var(--t-label); color: var(--muted); white-space: nowrap; }
.promo__code { font: 500 16px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.promo__copy { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; white-space: nowrap;
  font-size: var(--t-small); font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 140ms; }
.promo__copy:hover { text-decoration-color: currentColor; }
.promo__copy > .icon { width: 15px; height: 15px; }
.promo__copy > .promo__i-done, .promo__copy.is-done > .promo__i-copy { display: none; }
.promo__copy.is-done > .promo__i-done { display: block; color: var(--accent); }

/* ------------------------------------------------------------ About: the warm band, rising into the page as one gentle curve */
.about { position: relative; isolation: isolate; background: var(--p-surface); --bg: var(--p-surface); }
.about::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(100% - 1px); width: 150%; height: clamp(40px, 6vw, 96px);
  translate: -50% 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--p-surface); }
.about__head { row-gap: var(--s-5); align-items: start; margin-bottom: var(--s-9); }
.about__lead { display: grid; justify-items: start; gap: var(--s-5); }
.about__line { margin: 0; font: var(--display-weight) clamp(20px, .8vw + 15px, 27px)/1.75 var(--font-display); letter-spacing: .06em; font-feature-settings: "palt"; }
/* three arched films, the middle one a step lower */
.trio { align-items: start; row-gap: var(--s-7); }
.trio__col { display: grid; gap: var(--s-5); align-content: start; }
.trio__film { position: relative; aspect-ratio: 4 / 5; border-radius: 50% 50% var(--r-photo) var(--r-photo) / 40% 40% var(--r-photo) var(--r-photo); }
.trio__text { display: grid; justify-items: start; gap: var(--s-2); }
.trio__text h3 { font-size: var(--t-h3); }
.trio__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--s-1);
  background: color-mix(in oklab, var(--sun) 55%, var(--bg)); color: var(--ink); }
.trio__icon > .icon { width: 22px; height: 22px; stroke-width: 1.5; }
@media (min-width: 640px) { .trio > .trio__col:nth-child(2) { margin-top: var(--s-9); } }
/* rounded films keep their corners in Safari while they play */
.film { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* ------------------------------------------------------------ Access: the room from the door, darkened, behind a see-through panel */
#visit { background: #2a1a10; }
#visit > video.layer { object-position: 50% 42%; filter: brightness(.5) saturate(.9); }
#visit > .wrap { position: relative; z-index: 1; }
#visit > .film__toggle { right: max(var(--gut), (100% - var(--container)) / 2); bottom: var(--s-5); }
/* the panel across the .wrap: the inverse (cream on brown) words on a brown that lets the room show through */
.visit-panel.ground-inverse { width: 100%; padding: var(--s-8); gap: var(--s-7); align-content: start; border-radius: var(--r-photo);
  background: rgb(36 18 6 / .52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.visit-panel .sun__ring { stroke: var(--ink); }
.visit-panel .sunclock__ticks circle { fill: #3a2414; }
/* the details, then the map under them; side by side from 1280 (the address needs the room) */
.visit-panel__grid { display: grid; gap: var(--s-7); }
.visit-panel__info { display: grid; gap: var(--s-6); align-content: start; min-width: 0; }
.visit-panel__map { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--r-photo) - 6px); overflow: hidden; background: #3a2414; }
.visit-panel__map > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1280px) {
  .visit-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); align-items: stretch; }
  .visit-panel__map { aspect-ratio: auto; min-height: 440px; }
}
.visit__col .t-label { display: flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: var(--s-2); }
.visit__col .t-label > .icon { width: 16px; height: 16px; }
.visit__map { margin-top: var(--s-4); }
.visit__rows > li > :first-child { display: inline-flex; align-items: center; gap: var(--s-2); }
.visit__rows > li > :first-child > .icon { width: 18px; height: 18px; }
.visit__address { font-family: var(--font-display); font-size: 24px; line-height: 1.45; }
.visit__address a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; transition: text-decoration-color 140ms; }
.visit__address a:hover { text-decoration-color: currentColor; }
.visit__sub { margin-top: var(--s-1); }
.visit__zip { display: block; margin-bottom: var(--s-1); font-family: var(--font-text); font-size: var(--t-small); line-height: 1.6; color: var(--muted); }

/* the sun clock: 8:00 to 12:00 as the sun's morning path; the sun sits at Sapporo's present time */
.sunclock { position: relative; margin: 0; }
.sunclock svg { width: 100%; height: auto; overflow: visible; }
.sunclock__ground { stroke: var(--line-strong); stroke-width: 1; }
.sunclock__path { fill: none; stroke: color-mix(in oklab, var(--ink) 42%, transparent); stroke-width: 1.2; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.sunclock__ticks circle { fill: var(--bg); stroke: color-mix(in oklab, var(--ink) 50%, transparent); stroke-width: 1.2; }
.sunclock__label { font: 500 13px var(--font-text); fill: var(--muted); letter-spacing: .04em; }
.sunclock__sun .sun__ring { stroke-width: 1.2px; }
.sunclock__now { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); }
.sunclock__now time { font-weight: 500; }

/* ------------------------------------------------------------ the close: window light, the closing line, the links */
footer.footer.closing { background: var(--p-surface); --bg: var(--p-surface); overflow: clip; height: auto; min-height: 0;
  padding: var(--s-10) 0 calc(var(--s-7) + var(--bar)); }
footer.closing > .wrap { row-gap: var(--s-9); }
footer.closing > img.daylight { object-fit: cover; object-position: 50% 0; pointer-events: none; }
.close--word .section-head--split { align-items: end; }
.close--word h2 { max-width: none; }
.close--word .t-lead { max-width: 30em; }
.close--word .btn { height: 52px; padding-inline: 28px; font-size: 17px; letter-spacing: .08em; }
.closing__links { position: relative; }
.footer__lede { font-size: var(--t-lead); }
.footer__col li { line-height: 1.7; }
.footer__pages a { align-items: baseline; gap: var(--s-2); }
.footer__pages a > span { font: italic 500 20px/1.3 var(--font-en); letter-spacing: .02em; }
.footer__pages a > small { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.motion-toggle { border: 0; background: none; padding: 0; cursor: pointer; font-size: var(--t-small); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 140ms; }
.motion-toggle:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ motion: each block rises in as it comes on screen (site.js adds .has-reveal) */
.has-reveal [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms); }
.has-reveal [data-reveal].is-in { opacity: 1; translate: none; }
/* photographs, films and the map open from the bottom edge up, like the sun coming over the horizon, and settle from a slight zoom */
.has-reveal [data-reveal="photo"] { opacity: 1; translate: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms); }
.has-reveal [data-reveal="photo"].is-in { clip-path: inset(0); }
.has-reveal [data-reveal="photo"] > :is(img, video, iframe) { scale: 1.12; transition: scale 1.8s var(--ease-out); transition-delay: inherit; }
.has-reveal [data-reveal="photo"].is-in > :is(img, video, iframe) { scale: 1; }
/* a title's sun pops in after its words; the badge turns in */
.has-reveal .ttl[data-reveal] .ttl__mark { scale: 0; transition: scale .9s cubic-bezier(.34, 1.56, .64, 1) .3s; }
.has-reveal .ttl[data-reveal].is-in .ttl__mark { scale: 1; }
.has-reveal .badge[data-reveal] { translate: none; scale: .5; rotate: -40deg; transition: opacity .6s var(--ease-out), scale 1s cubic-bezier(.34, 1.56, .64, 1), rotate 1.2s var(--ease-out);
  transition-delay: .5s; }
.has-reveal .badge[data-reveal].is-in { scale: 1; rotate: -8deg; }
/* the motion switch in the footer shows everything at once */
html.is-still.has-reveal [data-reveal], html.is-still.has-reveal [data-reveal] > *, html.is-still.has-reveal .ttl__mark {
  opacity: 1; translate: none; clip-path: none; scale: 1; transition: none; }
html.is-still.has-reveal .badge[data-reveal] { rotate: -8deg; }

/* ------------------------------------------------------------ 1024 to 1279: the narrower column */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root[data-type="place"] { --t-hero: 7vw; }
}

/* ------------------------------------------------------------ tablet and phone (under 1024) */
@media (max-width: 1023px) {
  /* a little air between the window's crescent and the headline under it */
  .hero--sun .hero-copy { align-self: stretch; padding-top: var(--s-4); }
  /* the round window above the words, at the right edge */
  .hero--sun .hero-visual { order: -1; flex: none; height: auto; min-height: 0; }
  .hero-orb { --d: min(60vw, 42svh, 480px); position: relative; top: auto; translate: none; margin: 0 0 0 auto; }
  .hero--sun .hero__lead { max-width: 24em; }
  .about__head { margin-bottom: var(--s-8); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .trio > .trio__col { grid-column: auto / span 4; }
  .closing__links .footer__col { grid-column: auto / span 4; }
  .badge { left: -20px; }
}

/* ------------------------------------------------------------ phone (under 640) */
@media (max-width: 639px) {
  :root[data-type="place"] { --t-hero: clamp(40px, 12vw, 56px); --r-photo: 18px; }
  .hero--sun { padding-top: calc(var(--nav) + var(--s-5)); }
  /* a short phone (667 tall) keeps the words above the bottom bar: the window gives way first */
  .hero-orb { --d: min(82vw, 320px, 100svh - 460px); }
  .hero--sun .btn-row { display: none; }
  .hero-notice { font-size: 13px; }
  /* one Map in view: the bottom bar holds Map and Uber Eats, so the header leaves them out */
  .nav:not(.is-open) .nav__actions { display: none; }
  .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; }

  /* sections: 56px above and below; the titles a size down */
  main > section.section:not(.hero) { padding: var(--s-8) 0; }
  .ttl { gap: 6px; }
  .ttl__ja { font-size: 12px; }

  /* News: the title and 一覧 on one line; each row its date over its title */
  .news-top { row-gap: var(--s-5); }
  .news-top__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3); }
  .news-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-4) 0; }
  .news-row__date { grid-column: 1; grid-row: 1; }
  .news-row__title { grid-column: 1; grid-row: 2; font-size: 16px; }
  .news-row > .icon { grid-column: 2; grid-row: 1 / span 2; }
  .more { gap: var(--s-2); font-size: 14px; }
  .more__ring { width: 40px; height: 40px; }

  /* Menu: the badge inside the photograph's top right; the plates two by two, the right column a step lower */
  .menu-sec .ttl { margin-bottom: var(--s-7); }
  .badge { top: -28px; right: -6px; left: auto; width: 96px; height: 96px; font-size: 13px; }
  .badge > span { font-size: 18px; }
  .feature { row-gap: var(--s-5); }
  .feature__body > .btn { width: 100%; padding-inline: var(--s-3); }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-8); row-gap: var(--s-3); padding-bottom: var(--s-6); }
  .plates__item:nth-child(even) { top: var(--s-6); }
  .delivery { margin-top: var(--s-7); padding: var(--s-5); gap: var(--s-3); }
  .delivery__actions, .delivery__actions .btn, .promo { width: 100%; }
  /* the code under its label, the copy button at the right: room for the code and 「コピー済み」 at 360 */
  .promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: var(--s-3); row-gap: 2px;
    height: auto; min-height: 60px; padding: var(--s-2) var(--s-4); }
  .promo__label { grid-column: 1; grid-row: 1; }
  .promo__code { grid-column: 1; grid-row: 2; }
  .promo__copy { grid-column: 2; grid-row: 1 / span 2; }

  /* About: a ruled list, the words left and an arched film right (its width set outright: Safari sizes an
     aspect-ratio box from a stretched row otherwise) */
  .about__head { margin-bottom: var(--s-6); }
  .trio { row-gap: 0; }
  .trio > .trio__col { grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line-strong); }
  .trio > .trio__col:last-child { border-bottom: 1px solid var(--line-strong); }
  .trio__film { grid-column: 2; grid-row: 1; width: 100%; align-self: start; }
  .trio__text { grid-column: 1; grid-row: 1; gap: var(--s-1); }
  .trio__film > .loop-pause { right: auto; left: 50%; translate: -50% 0; bottom: 8px; }
  .trio__icon { width: 36px; height: 36px; }
  .trio__icon > .icon { width: 20px; height: 20px; }

  /* Access: the panel over the room; the place, then the hours, the sun clock, the way there, the map */
  .visit-panel.ground-inverse { padding: var(--s-5); gap: var(--s-6); }
  #visit > .film__toggle { top: var(--s-4); bottom: auto; }
  #visit .visit__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .visit__address { font-size: 20px; }
  .visit__map { width: 100%; }
  .visit-panel__map { aspect-ratio: 1 / 1; }

  footer.footer.closing { padding-top: var(--s-8); }
  footer.closing > .wrap { row-gap: var(--s-8); }
  footer.closing > img.daylight { object-position: 72% 0; }
  .close--word .btn { width: 100%; }
  .closing__links .footer__col:last-child { grid-column: 1 / -1; }
  .closing__links .footer__col:last-child ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
}
/* the narrowest phones (360): the long Instagram button a size down, so its words and icon stay on one line */
@media (max-width: 374px) { .feature__body > .btn { font-size: 15px; } }