/* ============================================================
MEDIA LAYER - shared across every Kobe site.
Copied from _template/media.css, the canonical source. Load AFTER
site.css so the site's own tokens are already defined.
Mobile first, in the literal sense: every block below is
written for a 360px phone and only widens at min-width
breakpoints. Phones are how these shops' customers actually
arrive, usually standing outside the door.
Requires from site.css: --bg --bg-2 --line --text --muted
--accent --accent-ink --font-display --font-body
============================================================ */
/* ---------- Shared media primitives ---------- */
/* width/max-width/min-width are load-bearing, not tidiness. A grid item's
default min-width is auto, which resolves to its min-content size, and an
carrying width="1600" reports 1600px of it. 16-the-city-kobe's .shots
grid blew a 390px phone out to 980px the moment a real photograph replaced
the drawn .m-ph, because a .m-ph has no intrinsic width and had always
collapsed quietly. Any site putting a photo in a grid hits this. */
.m-figure { position: relative; overflow: hidden; background: var(--bg-2);
width: 100%; max-width: 100%; min-width: 0; }
.m-figure img,
.m-figure video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Reserve space before the image loads so nothing jumps (CLS). */
.m-ratio-1x1 { aspect-ratio: 1 / 1; }
.m-ratio-4x5 { aspect-ratio: 4 / 5; }
.m-ratio-9x16 { aspect-ratio: 9 / 16; }
.m-ratio-16x9 { aspect-ratio: 16 / 9; }
.m-cap {
margin-top: 0.5rem;
font-size: 0.82rem;
line-height: 1.6;
color: var(--muted);
}
/* ---------- Photo placeholder ----------
WHY THIS EXISTS. The demos originally used picsum.photos, which
serves a RANDOM photograph per seed. Opening the pages in a real
browser showed a yakitori shop with the Eiffel Tower as its hero
and a charcoal izakaya fronted by a field of blue flowers. No
code-level check could catch that; only looking could.
A random irrelevant photo is worse than an honest gap: it makes
the demo look careless to the one person we need to impress. So a
missing photo is drawn, in the site's own palette, as a deliberate
slot that names the shot it is waiting for. It costs no network
request, cannot 404, never shifts layout, and doubles as a visible
shot list during the pitch: everything on this page is your real
information, and the photographs are the one thing we need from you.
Usage:
店内
---------- */
.m-ph {
position: relative;
display: grid;
place-items: center;
width: 100%;
overflow: hidden;
background-color: var(--bg-2);
/* Depth from the site's own accent, kept low so it reads as a
surface rather than as a coloured block. */
background-image:
radial-gradient(120% 90% at 22% 12%,
color-mix(in srgb, var(--accent) 18%, transparent) 0%,
transparent 60%),
radial-gradient(90% 80% at 85% 90%,
color-mix(in srgb, var(--accent) 10%, transparent) 0%,
transparent 55%),
repeating-linear-gradient(
135deg,
color-mix(in srgb, var(--text) 4%, transparent) 0 2px,
transparent 2px 9px);
}
/* Browsers without color-mix still get a clean tinted surface. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
.m-ph { background-image: repeating-linear-gradient(135deg, rgba(128,128,128,0.06) 0 2px, transparent 2px 9px); }
}
.m-ph::after {
/* Hairline inset, so the slot reads as a designed frame. */
content: "";
position: absolute;
inset: 0.5rem;
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
pointer-events: none;
}
.m-ph-label {
position: relative;
z-index: 1;
max-width: 82%;
padding: 0.4rem 0.75rem;
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
text-align: center;
color: var(--muted);
}
.m-ph-label::before {
content: "";
display: block;
width: 22px; height: 1px;
margin: 0 auto 0.5rem;
background: var(--accent);
}
/* ---------- Hero video ----------
Autoplay only works muted + playsinline. The poster carries the
first frame so the hero is never blank, and under reduced motion
the video is hidden entirely and the poster stands alone. */
.m-hero-media { position: relative; width: 100%; height: 100%; }
.m-hero-media video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.m-hero-media .m-poster {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.m-hero-media video + .m-poster { opacity: 0; transition: opacity 0.4s; }
@media (prefers-reduced-motion: reduce) {
.m-hero-media video { display: none; }
.m-hero-media .m-poster { opacity: 1 !important; }
}
/* A muted-video sound toggle must never be a hover-only control. */
.m-video-btn {
position: absolute;
right: 0.75rem; bottom: 0.75rem;
z-index: 3;
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.35rem;
padding: 0 0.8rem;
font-family: var(--font-body);
font-size: 0.8rem; font-weight: 700;
color: #fff;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ---------- Story strip ----------
The vertical, tap-through format people already understand from
phones. Horizontally scrollable on mobile with snap points. */
.m-stories {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: 0.25rem clamp(1.25rem, 4vw, 3rem) 1rem;
margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem));
scrollbar-width: none;
}
.m-stories::-webkit-scrollbar { display: none; }
/* .m-story works as a