/* =========================================================
   Yuzu Kintsugi — main stylesheet
   One continuous overhead ceramic plate. No cards, no boxes.
   ========================================================= */

/* Self-hosted fonts */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
}

:root {
	--ink: #11100F;
	--ink-deep: #0B0A09;
	--ivory: #E8E0D2;
	--ivory-dim: rgba(232, 224, 210, 0.62);
	--gold: #B68B3C;
	--gold-soft: rgba(182, 139, 60, 0.55);
	--serif: "Cormorant Garamond", "Times New Roman", serif;
	--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--ink-deep);
	color: var(--ivory);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--ivory);
	padding: 0.75rem 1.25rem;
	letter-spacing: 0.1em;
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 1px solid var(--gold);
	outline-offset: 6px;
}

/* ---------------------------------------------------------
   The plate. One surface, top to bottom.
   Handmade ceramic: uneven light, side vignette, fine grain.
   --------------------------------------------------------- */

.plate {
	position: relative;
	padding-bottom: 330px; /* void + the footer that now sits inside it */
	background:
		/* soft uneven highlights — hand-thrown surface */
		radial-gradient(ellipse 55% 22% at 32% 12%, rgba(255, 246, 228, 0.05), transparent 70%),
		radial-gradient(ellipse 48% 20% at 68% 38%, rgba(255, 246, 228, 0.04), transparent 70%),
		radial-gradient(ellipse 52% 22% at 36% 64%, rgba(255, 246, 228, 0.045), transparent 70%),
		radial-gradient(ellipse 46% 18% at 64% 88%, rgba(255, 246, 228, 0.04), transparent 70%),
		/* side vignette — plate falls away at the rim */
		linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.6) 100%),
		/* real stoneware material */
		url("../img/stoneware.webp") var(--ink);
	background-size: auto, auto, auto, auto, auto, 768px 768px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	overflow: hidden;
}

/* Fine grain pass on top of the stoneware for close viewing */
.plate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	opacity: 0.04;
	mix-blend-mode: overlay;
}

/* Plate rim arcs — the page reads as one enormous plate. The arcs are drawn
   wider than the screen so their curvature runs off both edges: every pixel
   of the viewport is plate, with no dark corners beyond the ceramic. */
.plate__rim {
	position: absolute;
	left: -16%;
	width: 132%;
	max-width: none;
	height: auto;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}
.plate__rim--top {
	top: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
}
.plate__rim--bottom {
	bottom: 330px;
	/* the rim's LOWER edge is a hard cut in the photograph — dissolve it too,
	   or it reads as a horizontal line where the plate meets the dark */
	-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 45%, transparent 98%);
	mask-image: linear-gradient(to top, transparent 0%, #000 14%, #000 45%, transparent 98%);
}

/* Past the plate's edge there is nothing but dark — the gold drips into it. */
.plate__void {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 560px;
	z-index: 0;
	pointer-events: none;
	/* reaches flat black well before the plate box ends, so there is no
	   tonal step where the ceramic stops and the footer's ground begins */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 28%, rgba(0,0,0,0.94) 46%, #000 62%, #000 100%);
}

/* Plate rim curvature top and bottom */
.plate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 120% 46px at 50% -14px, rgba(0, 0, 0, 0.75), transparent 75%);
}

/* ---------------------------------------------------------
   Kintsugi layer — behind food, behind labels
   --------------------------------------------------------- */

/* Narrow centered column: the seam renders at a fraction of its source
   resolution (downsampled, not stretched), which keeps the gold razor-crisp
   and delicate. */
.kintsugi-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* JS sizes the SVG in CSS pixels so the internal units stay square —
   liquid blobs must not be distorted by non-uniform scaling. */
.kintsugi-layer svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Nothing is drawn until the flow engine has measured the page. */
/* Only the fracture line waits for the engine. The gold needs no CSS gate:
   it is already hidden by the pour clip (height 0) until the flow starts —
   and hiding #liquid here broke WebKit, which does not restyle the <use>
   clones of #liquid when html.js-pending comes off (a trunk with no gold
   on a fully cached second visit). */
.js-pending #crack-line {
	visibility: hidden;
}

/* ---------------------------------------------------------
   Shared content stacking
   --------------------------------------------------------- */

.hero, .cat, .closing { position: relative; z-index: 2; }

/* ---------------------------------------------------------
   CTA — hairline gold rule, no button box feeling
   --------------------------------------------------------- */

.cta {
	display: inline-block;
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.78rem;
	letter-spacing: 0.42em;
	text-indent: 0.42em; /* balance tracking */
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ivory);
	background: rgba(8, 7, 6, 0.42);
	-webkit-backdrop-filter: blur(12px) saturate(1.05);
	backdrop-filter: blur(12px) saturate(1.05);
	border: 1px solid rgba(232, 224, 210, 0.16);
	padding: 1.05em 2.2em 0.95em;
	/* it floats above the plate — the shadow below sells the height */
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.5),
		0 4px 10px rgba(0, 0, 0, 0.38);
	transition:
		border-color 450ms var(--ease-out),
		box-shadow 450ms var(--ease-out),
		transform 450ms var(--ease-out);
}
.cta:hover {
	border-color: rgba(182, 139, 60, 0.7);
	transform: translateY(-2px);
	box-shadow:
		0 20px 42px rgba(0, 0, 0, 0.55),
		0 6px 14px rgba(0, 0, 0, 0.42);
}
.cta:active {
	transform: translateY(0);
	transition-duration: 140ms;
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.5),
		0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------
   Hero — the broken plate with one quiet invitation at its centre.
   --------------------------------------------------------- */

.hero {
	min-height: 84vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10vh 8vw 0;
}

.hero__center {
	max-width: 48rem;
	animation: hero-in 1500ms var(--ease-out) 250ms both;
}

@keyframes hero-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.72rem;
	letter-spacing: 0.52em;
	text-indent: 0.52em;
	text-transform: uppercase;
	color: var(--ivory-dim);
	margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
	/* the words hang high above the ceramic: their shadow falls far below */
	text-shadow:
		0 6px 14px rgba(0, 0, 0, 0.85),
		0 18px 40px rgba(0, 0, 0, 0.55);
}

.hero__title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 4.8vw, 3.7rem);
	letter-spacing: 0.045em;
	line-height: 1.28;
	color: var(--ivory);
	margin-bottom: clamp(2.2rem, 5vh, 3.4rem);
	text-shadow:
		0 10px 22px rgba(0, 0, 0, 0.85),
		0 30px 70px rgba(0, 0, 0, 0.55);
}

/* the cycling word: typed slowly under a slim gold caret */
.type-caret {
	display: inline-block;
	width: 2px;
	height: 0.82em;
	margin-left: 0.09em;
	vertical-align: -0.06em;
	background: var(--gold);
	animation: caret-blink 1.15s steps(1) infinite;
}
@keyframes caret-blink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0.12; }
}

/* ---------------------------------------------------------
   Categories — individually plated by a chef
   Food on one side of the crack, label crossing to the other.
   --------------------------------------------------------- */

.cat {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* label and dish share one horizontal centre line — the mark reads as an
	   annotation of that plate, not as a caption floating near it */
	align-items: center;
	padding: 0 4vw;
	min-height: 76vh; /* generous negative space between platings */
}

.cat__dish {
	position: relative;
	grid-row: 1;
}

/* Placing the dishes: each plate slides in from its own side of the table
   as it enters view — left-plated dishes from the left, right-plated from
   the right — like a hand nudging it into its spot. JS gates this behind
   .js-anim so a no-JS visit sees everything at rest. */
html.js-anim .cat .cat__dish {
	transform: translateX(-9vw) rotate(-1.3deg);
	transition: transform 1200ms var(--ease-out);
	will-change: transform; /* promoted once: the slide runs on the compositor */
}
html.js-anim .cat--sashimi .cat__dish,
html.js-anim .cat--rolls .cat__dish {
	transform: translateX(9vw) rotate(1.3deg);
}
html.js-anim .cat.is-placed .cat__dish {
	transform: translateX(0) rotate(0deg);
}
/* JS adds is-settled just after the slide lands: the layer promotion is
   released, so settled dishes stop holding GPU memory hostage offscreen
   (permanently promoted layers were re-rasterising with a flash when
   scrolled back into view). */
html.js-anim .cat.is-settled .cat__dish {
	will-change: auto;
}

.cat__dish img,
.cat__dish picture {
	position: relative;
	z-index: 1;
}

/* Seen from directly above, everything on the table presses a soft shadow
   into the ceramic: a tight dark contact right under the silhouette, and a
   wider, fainter bloom around it. drop-shadow follows the cut-out edge, so
   bowls, boards and glasses each ground their own true shape. */
.cat__dish img {
	filter: drop-shadow(5px 9px 9px rgba(0, 0, 0, 0.55))
	        drop-shadow(2px 20px 30px rgba(0, 0, 0, 0.38));
}

/* Label + hairline: revealed when the gold reaches them. Each label glides
   in from the OPPOSITE side to its dish (--lx), settling at its designed
   offset (--ly). */
.cat__label {
	--lx: 0vw;
	--ly: 0vh;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	text-decoration: none;
	justify-self: start;
	position: relative;
	z-index: 3; /* labels always read above the salt and other accents */
	opacity: 0;
	transform: translate(var(--lx), calc(var(--ly) + 10px));
	filter: blur(2px);
	transition:
		opacity 780ms var(--ease-out),
		transform 780ms var(--ease-out),
		filter 780ms var(--ease-out);
}

.cat__text {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.82rem;
	letter-spacing: 0.5em;
	color: var(--ivory);
	white-space: nowrap;
}

/* A single drawn arrow — a fine ink stroke with swept barbs, no rules,
   no boxes. It draws itself in when the gold reveals the label. */
.cat__arrow {
	width: 4.8rem;
	height: auto;
	flex: none;
	fill: none;
	stroke: var(--gold-soft);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 400ms var(--ease-out);
}
.cat__arrow path {
	stroke-dasharray: 90;
	stroke-dashoffset: 90;
	transition: stroke-dashoffset 900ms var(--ease-out) 250ms;
}
.cat.is-revealed .cat__arrow path { stroke-dashoffset: 0; }
.cat__label:hover .cat__arrow { stroke: var(--gold); }

.cat__dish-link { display: block; }

/* Revealed state (added by JS as the gold arrives) */
.cat.is-revealed .cat__label {
	opacity: 1;
	transform: translate(0, var(--ly));
	filter: blur(0);
}
.cat__label:hover .cat__text { color: #fff; }

/* --- per-category plating: alternating left / right across the crack --- */

/* label sitting RIGHT of the crack: the arrow points back left toward it */
.cat--appetizers .cat__label,
.cat--nigiri .cat__label,
.cat--bar .cat__label { grid-column: 7 / 12; }
.cat--appetizers .cat__arrow,
.cat--nigiri .cat__arrow,
.cat--bar .cat__arrow { transform: scaleX(-1); }

/* label sitting LEFT of the crack: the arrow points right toward it */
.cat--sashimi .cat__label,
.cat--rolls .cat__label { grid-column: 2 / 6; justify-self: end; flex-direction: row-reverse; }

/* 1. Appetizers — dish from the left; label arrives from the right,
   sitting well clear of the gold seam */
.cat--appetizers { margin-top: -16vh; }
.cat--appetizers .cat__dish  { grid-column: 2 / 6; }
.cat--appetizers .cat__label { margin-left: clamp(30px, 4.5vw, 84px); --ly: 0vh; --lx: 7vw; }

/* 2. Sashimi — dish from the right; label from the left, clear of the seam */
.cat--sashimi { margin-top: 4vh; }
.cat--sashimi .cat__dish  { grid-column: 7 / 13; width: 88%; justify-self: end; }
.cat--sashimi .cat__label { --ly: 0vh; --lx: -7vw; margin-right: clamp(30px, 4.5vw, 84px); }

/* 3. Nigiri — plated five-piece, from the left; label from the right,
   pulled toward the seam so the salt spill never crowds it */
.cat--nigiri { margin-top: -2vh; }
.cat--nigiri .cat__dish  { grid-column: 2 / 6; width: 72%; justify-self: end; }
.cat--nigiri .cat__label { --ly: 0vh; --lx: 7vw; margin-left: clamp(22px, 3vw, 52px); }

/* 4. Rolls — plated, from the right; the label sits in the quiet wedge
   BETWEEN the centre seam and the branch that dives to the lower left */
.cat--rolls { margin-top: 6vh; }
.cat--rolls .cat__dish  { grid-column: 8 / 13; width: 70%; justify-self: start; }
/* ROLLS sits in the quiet wedge between the two branches that pass through
   this course. That wedge narrows as the viewport widens (the branches
   converge), from about 260px at 1280 to about 150px at 1920 — so the mark
   is both shortened and tracked to the wedge's centre line, which measures
   as very close to 0.49 of the viewport less 251px. */
.cat--rolls .cat__label {
	--ly: 0vh;
	--lx: -7vw;
	/* A sensible starting offset only — the engine measures this label into
	   the middle of the real gap between the branch and the seam once the
	   geometry exists, because that gap is a different width in every window. */
	margin-right: calc(160px - 11.87vw);
}

/* 5. Bar — dish from the left; label from the right, clear of the seam */
.cat--bar { margin-top: 2vh; margin-bottom: 6vh; }
.cat--bar .cat__dish  { grid-column: 2 / 6; width: 72%; justify-self: center; }
.cat--bar .cat__label { --ly: 0vh; --lx: 7vw; margin-left: clamp(30px, 4.5vw, 84px); }

/* A yuzu blossom drops from the viewer down onto the plate, between
   ROLLS and the bar pour. JS drives --fall from 1 (held close to the
   screen, above the frame) to 0 (settled on the ceramic). */
.flower-fall {
	position: relative;
	z-index: 2;
	width: clamp(96px, 10.5vw, 158px);
	margin: -4vh 0 -9vh 17vw;
	pointer-events: none;
	--rest-rot: 0deg;
}

/* the other blossoms: scattered where the ceramic is empty, each its own
   size and resting turn, so the drift reads as chance, not a pattern */
.flower-fall--under-bar {
	width: clamp(80px, 8.6vw, 132px);
	margin: 2vh 0 -14vh 60vw;
	--rest-rot: 34deg;
}
.flower-fall--pre-appetizers {
	width: clamp(70px, 7.4vw, 112px);
	margin: 2vh 0 -14vh 74vw;
	--rest-rot: 104deg;
}
.flower-fall--post-appetizers {
	width: clamp(84px, 9vw, 140px);
	margin: -10vh 0 -8vh 21vw;
	--rest-rot: -58deg;
}
.flower-fall--post-nigiri {
	width: clamp(72px, 7.8vw, 118px);
	margin: -16vh 0 -2vh 9vw;
	--rest-rot: 158deg;
}
.flower-fall__img {
	position: relative;
	z-index: 1;
	transform: translateY(calc(var(--fall, 0) * -64vh))
	           scale(calc(1 + var(--fall, 0) * 1.6))
	           rotate(calc(var(--fall, 0) * -110deg + var(--rest-rot, 0deg)));
	filter: blur(calc(var(--fall, 0) * 6px));
	opacity: calc(1.25 - var(--fall, 0) * 1.25);
	will-change: transform, opacity;
}
.flower-fall__shadow {
	position: absolute;
	left: 10%;
	right: -2%;
	top: 22%;
	bottom: -5%;
	background: radial-gradient(ellipse 48% 42% at 52% 58%, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.18) 58%, transparent 74%);
	filter: blur(4px);
	opacity: calc(1 - var(--fall, 0));
	transform: scale(calc(1 + var(--fall, 0) * 0.8));
}

/* Sea salt: a scattered accent, not a menu item — large, running off the
   plate's visible edge, kept below and clear of the NIGIRI mark */
.cat__accent {
	position: absolute;
	z-index: 2;
	right: -14%;
	bottom: -28vh;
	width: 31%;
	max-width: 460px;
	opacity: 0.92;
	pointer-events: none;
	filter: brightness(0.86) contrast(1.05)
	        drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.5));
}

/* ---------------------------------------------------------
   Closing
   --------------------------------------------------------- */

.closing {
	text-align: center;
	padding: 22vh 8vw 20vh;
}

.closing__line {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 3.4vw, 2.8rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: clamp(2.4rem, 5vh, 3.6rem);
}

.closing .closing__line,
.closing .cta {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.closing .cta { transition-delay: 220ms; }
.closing.is-revealed .closing__line,
.closing.is-revealed .cta {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   Header — black glass over the plate. Logo left, burger right.
   --------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem clamp(1.2rem, 3vw, 2.2rem);
	background: rgba(8, 7, 6, 0.42);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
	border-bottom: 1px solid rgba(232, 224, 210, 0.07);
}
/* browsers without backdrop-filter still need legible glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header { background: rgba(8, 7, 6, 0.88); }
}
/* WP admin bar (logged-in staging) sits above the glass */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.site-header__brand {
	display: block;
	line-height: 0;
}
.site-header__brand img {
	width: auto;
	height: clamp(38px, 4.6vw, 50px);
}

.nav-toggle {
	position: relative;
	z-index: 60;
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 26px;
	height: 1px;
	background: var(--ivory);
	transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out);
}
.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

.site-nav[hidden] { display: none; }

.site-nav {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 10, 9, 0.96);
	backdrop-filter: blur(6px);
}
.site-nav__list {
	list-style: none;
	text-align: center;
}
.site-nav__list li { margin: 1.1rem 0; }
.site-nav__list a {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(1.4rem, 3vw, 2rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ivory-dim);
	transition: color 400ms var(--ease-out);
}
.site-nav__list a:hover { color: var(--ivory); }

html.nav-open { overflow: hidden; }

/* ---------------------------------------------------------
   Footer + inner pages
   --------------------------------------------------------- */

/* The footer is not a band under the plate — it sits INSIDE the dark the
   plate falls away into. It is pulled up over the void and painted with no
   background of its own, so there is no seam between ceramic and footer, and
   the gold keeps dripping down behind the type. */
.site-footer {
	position: relative;
	z-index: 3;
	background: var(--ink-deep);
	color: var(--ivory);
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-align: center;
	padding: 2.6rem 8vw;
}
/* only the homepage has a void to sit in — there the footer carries no
   ground of its own so the gold keeps dripping down behind the type */
.plate + .site-footer {
	background: transparent;
	margin-top: -150px;
	padding-top: 0;
	padding-bottom: 3.2rem;
}
/* The site is dark. Elementor's kit paints the page white through a body
   CLASS (.elementor-kit-NNNN), which outranks any number of element
   selectors — so ours needs a class-level selector of its own. `body[class]`
   matches whatever classes WordPress and its plugins put there, without
   hard-coding a kit id that changes. html gets it too, so the overscroll
   canvas never flashes white either. */
html { background: var(--ink-deep); }
html body[class] { background: var(--ink-deep); }
html body[class].home,
html body[class]:has(.plate) { background: #000; }

.site-footer__credit {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	color: var(--ivory);
}
.site-footer__credit a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
.site-footer__credit a:hover {
	color: #d8ab55;
	border-bottom-color: var(--gold-soft);
}

.inner-page {
	background: var(--ink);
	min-height: 100vh;
	padding: 8rem 0 4rem;
}
.inner-page__wrap { max-width: 1200px; margin: 0 auto; padding: 0 4vw; }
.inner-page__title {
	font-family: var(--serif);
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
}

/* ---------------------------------------------------------
   Mobile — crack stays the spine, tighter alternation
   --------------------------------------------------------- */

@media (max-width: 700px) {
	.hero { min-height: 78vh; }
	/* name and city on their own lines */
	/* one line on the phone too — the tracking gives way before the line does */
	.hero__eyebrow { font-size: 0.5rem; letter-spacing: 0.28em; text-indent: 0.28em; white-space: nowrap; }

	/* Each course is one tight composition: the dish on its side of the
	   crack and its label beside it, both sitting on the SAME horizontal
	   centre line, 10px apart — an annotation of the plate. A flex row does
	   the centring exactly; the old block-plus-negative-margin version could
	   only approximate it. */
	.cat {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0 3vw;
		margin: 0 0 16vh;
		min-height: 0;
	}
	/* sashimi and rolls plate to the right of the crack, so their row runs
	   the other way and the label lands on the left */
	.cat--sashimi,
	.cat--rolls { flex-direction: row-reverse; }
	.cat .cat__dish  { flex: 0 0 auto; }
	.cat .cat__label { flex: 0 1 auto; min-width: 0; margin: 0; }
	/* Chrome honours justify-self on block-level boxes too, so the desktop
	   alignment has to be cleared or it fights the mobile margins. */
	.cat__dish { width: 58vw; max-width: 290px; }
	.cat .cat__label { position: relative; z-index: 3; }
	/* phones: no per-frame blur painting — transform/opacity only, so the
	   falls and reveals run entirely on the compositor */
	.flower-fall__img { filter: none; }
	.cat .cat__label { filter: none; }
	.flower-fall__shadow { filter: none; }
	/* one tight contact shadow instead of two blur passes: rasterising five
	   double-blurred silhouettes at 3x DPR is what stuttered the entrance */
	.cat__dish img { filter: drop-shadow(4px 7px 8px rgba(0, 0, 0, 0.5)); }
	.cat__accent { filter: brightness(0.86) contrast(1.05) drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.45)); }
	.cat__label { gap: 0.8rem; }
	.cat__text { font-size: 0.62rem; letter-spacing: 0.3em; }
	/* on the phone the full arrow is too much: just a short quiet line */
	.cat__arrow { width: 1.4rem; }
	.cat__arrow path + path { display: none; }

	/* Alternate around the central crack; labels ride BESIDE their dish
	   (max() keeps the pull-up correct once max-width caps the dish). */
	/* Every label is an annotation of its own dish: it starts (or ends) 10px
	   from the dish's edge, not at the edge of the screen. The dish spans a
	   known band, so the offset is just the far side of that band plus 10px. */
	.cat--appetizers { margin-top: -6vh; }
	.cat--appetizers .cat__dish  { width: 58vw; max-width: 290px; }
	/* two words will not sit beside the bowl on one line — they stack, which
	   is how an annotation would be written anyway */
	.cat--appetizers .cat__text { white-space: normal; }

	.cat--sashimi { margin-top: 0; }
	.cat--sashimi .cat__dish  { width: 62vw; max-width: 310px; }
	.cat--sashimi .cat__label { flex-direction: row-reverse; }

	.cat--nigiri { margin-top: 0; }
	.cat--nigiri .cat__dish  { width: 46vw; max-width: 235px; }

	.cat--rolls { margin-top: 0; }
	.cat--rolls .cat__dish  { width: 48vw; max-width: 245px; }
	.cat--rolls .cat__label { flex-direction: row-reverse; }

	.cat--bar { margin-top: 0; margin-bottom: 2vh; }
	.cat--bar .cat__dish  { width: 48vw; max-width: 240px; }

	.cat__accent { width: 34vw; max-width: 170px; right: -12vw; bottom: -9vh; }
	.flower-fall { width: 18vw; max-width: 96px; margin: 0 0 -3vh 64vw; }
	.flower-fall--under-bar { width: 20vw; margin: 1vh 0 -6vh 62vw; }
	.flower-fall--pre-appetizers { width: 17vw; margin: 0 0 -8vh 70vw; }
	.flower-fall--post-appetizers { width: 17vw; margin: 0 0 -2vh 8vw; }
	.flower-fall--post-nigiri { width: 16vw; margin: -4vh 0 0 8vw; }

	/* neutralise desktop label offsets on mobile; keep a light sideways glide */
	.cat .cat__label { --ly: 0vh; }
	.cat--appetizers .cat__label,
	.cat--nigiri .cat__label,
	.cat--bar .cat__label { --lx: 9vw; }
	.cat--sashimi .cat__label,
	.cat--rolls .cat__label { --lx: -9vw; }

	.closing { padding: 10vh 8vw 10vh; }

	/* lighter surface work for mobile GPUs */
	.plate::before { opacity: 0.04; }
	.plate { padding-bottom: 240px; }
	.plate__rim--bottom { bottom: 240px; }
	.plate__void { height: 380px; }
	.plate + .site-footer { margin-top: -120px; }
}

/* ---------------------------------------------------------
   Reduced motion: full repair, everything visible, no animation
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero__center { animation: none; }
	/* the blossom rests on the plate, no fall */
	.flower-fall__img,
	.flower-fall__shadow {
		transform: none;
		filter: none;
		opacity: 1;
	}
	.flower-fall__img { transform: rotate(var(--rest-rot, 0deg)); }
	/* dishes sit where they were placed */
	html.js-anim .cat .cat__dish {
		transform: none;
		transition: none;
	}
	.cat__label,
	.cat__arrow path,
	.closing .closing__line,
	.closing .cta {
		transition: none;
	}
	.cat .cat__arrow path { stroke-dashoffset: 0; }
	.cat .cat__label,
	.closing .closing__line,
	.closing .cta {
		opacity: 1;
		filter: none;
	}
	.cat .cat__label { transform: translate(0, var(--ly)); }
}

/* =========================================================
   Menu page — the same ceramic, laid out for reading.
   ========================================================= */

.menu-page {
	position: relative;
	min-height: 100vh;
	padding: calc(70px + 7vh) 6vw 12vh;
	overflow: hidden;
	background:
		radial-gradient(ellipse 55% 22% at 32% 10%, rgba(255, 246, 228, 0.05), transparent 70%),
		radial-gradient(ellipse 48% 20% at 68% 46%, rgba(255, 246, 228, 0.04), transparent 70%),
		radial-gradient(ellipse 52% 22% at 38% 82%, rgba(255, 246, 228, 0.045), transparent 70%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.6) 100%),
		url("../img/stoneware.webp") var(--ink);
	background-size: auto, auto, auto, auto, 768px 768px;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.menu-page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	opacity: 0.04;
	mix-blend-mode: overlay;
}

/* The ceramic fades into the footer's ground, so there is no band where the
   page stops and the footer starts — the same join as the homepage. */
.menu-page::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 240px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(11, 10, 9, 0) 0%, rgba(11, 10, 9, 0.86) 62%, var(--ink-deep) 92%);
}

.menu-golddefs { position: absolute; width: 0; height: 0; overflow: hidden; }

.menu-hero {
	position: relative;
	z-index: 2;
	text-align: center;
	margin: 0 auto clamp(3rem, 7vh, 5rem);
}
.menu-hero__eyebrow {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.7rem;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	text-transform: uppercase;
	color: var(--ivory-dim);
	margin-bottom: 1.3rem;
	text-shadow: 0 6px 14px rgba(0, 0, 0, 0.8);
}
.menu-hero__title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(2.4rem, 5.4vw, 3.8rem);
	letter-spacing: 0.22em;
	text-indent: 0.22em;
	text-transform: uppercase;
	color: var(--ivory);
	text-shadow: 0 10px 22px rgba(0, 0, 0, 0.85), 0 26px 60px rgba(0, 0, 0, 0.5);
}

.menu-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 2vw, 1.6rem);
	margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.menu-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.82rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--ivory-dim);
	padding: 0.7em 1em 0.55em;
	transition: color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.menu-tab:hover { color: var(--ivory); }
.menu-tab.is-active { color: var(--ivory); border-bottom-color: var(--gold); }
.menu-tabs__divider { width: 1px; height: 1.2em; background: rgba(232, 224, 210, 0.22); }

.menu-panel {
	position: relative;
	z-index: 2;
	max-width: 780px;
	margin: 0 auto;
}

.menu-section {
	margin: 0 0 clamp(4.5rem, 10vh, 7rem);
	scroll-margin-top: 110px;
}
.menu-group { margin-top: 3rem; scroll-margin-top: 110px; }
/* A section with no heading of its own opens straight onto its first group,
   so it must not also carry a full section gap — otherwise the first icon
   floats far below the list above it, unlike every other group icon. */
.menu-section--bare { margin-top: calc(2rem - clamp(4.5rem, 10vh, 7rem)); }
.menu-section--bare > .menu-group:first-child { margin-top: 0; }

.menu-section__head { text-align: center; margin-bottom: 2.4rem; }
.menu-section__title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-transform: uppercase;
	color: var(--ivory);
}

/* the gold liquid draws the dish */
.menu-sketch {
	display: block;
	width: clamp(120px, 14vw, 190px);
	height: auto;
	margin: 0 auto 1.1rem;
	overflow: visible;
	fill: none;
	stroke: #c9a24d;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.menu-sketch--line path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.menu-sketch--line.is-drawn path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1500ms var(--ease-out);
}
.menu-sketch--line.is-drawn path:nth-child(2) { transition-delay: 260ms; }
.menu-sketch--line.is-drawn path:nth-child(3) { transition-delay: 480ms; }
.menu-sketch--line.is-drawn path:nth-child(4) { transition-delay: 660ms; }
.menu-sketch--line.is-drawn path:nth-child(5) { transition-delay: 820ms; }
.menu-sketch--line.is-drawn path:nth-child(n+6) { transition-delay: 960ms; }

/* ---------------------------------------------------------
   The gold pour.

   Wherever gold arrives on this site it arrives the same way: it runs in
   from the left with a soft molten head, exactly like the seam filling on
   the homepage. That is a mask sliding across the element — the artwork
   underneath is filtered once and never re-lit, so the pour costs nothing.
   --------------------------------------------------------- */

.gold-pour {
	-webkit-mask-image: linear-gradient(90deg,
		#000 0%, #000 47%,
		rgba(0, 0, 0, 0.62) 50%,
		rgba(0, 0, 0, 0.2) 52%,
		rgba(0, 0, 0, 0) 53.5%,
		rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg,
		#000 0%, #000 47%,
		rgba(0, 0, 0, 0.62) 50%,
		rgba(0, 0, 0, 0.2) 52%,
		rgba(0, 0, 0, 0) 53.5%,
		rgba(0, 0, 0, 0) 100%);
	-webkit-mask-size: 215% 100%;
	mask-size: 215% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* held at the far end: the drawing is empty, waiting to be filled */
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}
.gold-pour.is-poured,
.gold-pour.is-drawn,
.is-poured > .gold-pour {
	-webkit-mask-position: 0% 0;
	mask-position: 0% 0;
	/* near-linear: liquid runs at a steady rate, it does not ease out like a
	   UI transition. Just enough softening at each end to avoid a hard start
	   and a hard stop. */
	transition: -webkit-mask-position var(--pour-time, 1900ms) cubic-bezier(0.55, 0.06, 0.4, 0.96),
	            mask-position var(--pour-time, 1900ms) cubic-bezier(0.55, 0.06, 0.4, 0.96);
}
/* Without JS nothing would ever pour, so the mask only engages where a
   reveal script is actually running — a JS failure leaves the gold fully
   visible rather than blank. */
html:not(.js-pour) .gold-pour {
	-webkit-mask-image: none;
	mask-image: none;
}
.gold-pour.is-instant {
	-webkit-mask-position: 0% 0;
	mask-position: 0% 0;
	transition: none;
}

/* The client's drawings are outlines, not strokes, so the gold is poured
   through them rather than traced along them. */
.menu-sketch--fill {
	width: clamp(165px, 18vw, 250px);
	fill: #c9a24d;
	/* the traced line is about three units wide on a 1200-unit canvas — well
	   under a device pixel at display size, which both starves the gold filter
	   and aliases badly. Stroking the same outline in the same colour gives
	   the metal something to light. */
	stroke: #c9a24d;
	stroke-width: 3.4;
	stroke-linejoin: round;
	/* Slower than a UI transition: the client asked for the gold to read as
	   being drawn rather than switched on, and at 1350ms the sweep was over
	   before the eye had found it. */
	--pour-time: 2300ms;
}
/* The drawing exists before the gold does.
 *
 * On the homepage and on About, gold always runs into a fracture that is
 * already visible — you see where it is going. The menu icons were the one
 * place where the artwork appeared out of nothing, which is why the fill read
 * as a fade rather than as a hand working across the page. So the same icon is
 * laid down twice: a faint dry line underneath, unmasked, and the gold over
 * it, masked. The eye follows the metal along a line it can already see. */
.menu-section__head,
.menu-group__sketchhead {
	position: relative;
}
.menu-sketch--ghost {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	fill: none;
	stroke: rgba(232, 224, 210, 0.16);
	stroke-width: 3.4;
	opacity: 0;
	transition: opacity 700ms var(--ease-out);
	pointer-events: none;
}
.menu-sketch--ghost.is-drawn { opacity: 1; }
.menu-group__sketchhead .menu-sketch { width: clamp(165px, 18vw, 250px); margin-top: 1rem; }
/* the gold's top margin collapses out of the head; the ghost is positioned
   against the head itself, so it must not take that margin as an offset or
   it sits a line lower than the drawing it belongs under */
.menu-group__sketchhead .menu-sketch--ghost { margin-top: 0; }

.menu-group__title {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.95rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ivory);
	text-align: center;
	margin-bottom: 1.5rem;
}
.menu-group__note {
	font-size: 0.78em;
	letter-spacing: 0.14em;
	text-transform: none;
	color: var(--ivory-dim);
}

.menu-items { list-style: none; }
.menu-item { padding: 0.8rem 0; }
.menu-item__row { display: flex; align-items: baseline; gap: 0.9rem; }
.menu-item__name {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	color: var(--ivory);
}
.menu-item__dots {
	flex: 1;
	min-width: 2rem;
	border-bottom: 1px dotted rgba(182, 139, 60, 0.35);
	transform: translateY(-0.28em);
}
.menu-item__price {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.92rem;
	letter-spacing: 0.1em;
	color: var(--gold);
	white-space: nowrap;
}
.menu-item__desc {
	color: var(--ivory-dim);
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	line-height: 1.55;
	margin-top: 0.3rem;
	max-width: 92%;
}

.menu-footnote {
	margin-top: 3rem;
	text-align: center;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	font-style: italic;
	color: rgba(232, 224, 210, 0.45);
}

.menu-anchor { position: relative; top: -110px; display: block; }

/* blossoms drifting between the courses */
/* The blossoms between courses are decoration, not spacing. They are given no
   height at all, so a course follows the one above it at exactly the distance
   a group follows a group, and the flower simply drifts over that junction. */
.menu-panel > .flower-fall { position: relative; height: 0; top: -2.6rem; }
.flower-fall--menu-a {
	width: clamp(80px, 8.5vw, 130px);
	margin: 0 0 0 72%;
	--rest-rot: 42deg;
}
.flower-fall--menu-b {
	width: clamp(90px, 9.5vw, 148px);
	margin: 0 0 0 4%;
	--rest-rot: -68deg;
}

@media (max-width: 700px) {
	.menu-page { padding: calc(60px + 5vh) 7vw 10vh; }
	.menu-item__desc { max-width: 100%; }
	.menu-sketch { width: 34vw; max-width: 150px; }
	/* on the phone the icon and the section rail leave no room to the right,
	   so the blossom drifts down the free ground on the left instead */
	.flower-fall--menu-a { width: 16vw; margin: 0 0 0 3%; }
	.flower-fall--menu-b { width: 22vw; margin: 0 0 0 2%; }
}

@media (prefers-reduced-motion: reduce) {
	.menu-sketch path,
	.menu-sketch.is-drawn path {
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* ---------------------------------------------------------
   Menu rail — vertical line navigation, right edge, always on top
   --------------------------------------------------------- */

.menu-rail {
	position: fixed;
	right: clamp(10px, 2vw, 30px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	pointer-events: none;
}
.menu-rail__list { list-style: none; }
.menu-rail__list li { margin: 1.05rem 0; }
.menu-rail__link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	text-decoration: none;
	pointer-events: auto;
}
.menu-rail__label {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.58rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(232, 224, 210, 0.38);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
	transition: color 350ms var(--ease-out);
	white-space: nowrap;
}
.menu-rail__line {
	display: block;
	width: 16px;
	height: 1px;
	background: rgba(182, 139, 60, 0.45);
	transition: width 350ms var(--ease-out), background-color 350ms var(--ease-out);
}
.menu-rail__link:hover .menu-rail__label { color: var(--ivory); }
.menu-rail__link:hover .menu-rail__line { background: var(--gold); }
.menu-rail__link.is-active .menu-rail__label { color: var(--ivory); }
.menu-rail__link.is-active .menu-rail__line { width: 32px; background: var(--gold); }

@media (max-width: 700px) {
	.menu-rail { right: 6px; }
	.menu-rail__list li { margin: 0.85rem 0; }
	.menu-rail__label { font-size: 0.5rem; letter-spacing: 0.2em; }
	.menu-rail__line { width: 12px; }
	.menu-rail__link.is-active .menu-rail__line { width: 22px; }
	/* keep the reading column clear of the rail */
	.menu-panel,
	.menu-book { padding-right: 16vw; }
}

/* =========================================================
   Inner ceramic pages — About, Contact.
   Same plate, same blossoms, laid out for reading.
   ========================================================= */

/* the menu page reserves its right edge for the section rail; these pages
   have no rail, so they get their column back */
.inner-ceramic .menu-panel,
.inner-ceramic { padding-right: 6vw; }

.cta--quiet {
	background: rgba(8, 7, 6, 0.28);
	border-color: rgba(232, 224, 210, 0.12);
}

/* ---- Contact ------------------------------------------------------ */

.contact-wrap {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 7vw, 6rem);
	align-items: start;
}

.contact-col__title {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 0.72rem;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: var(--ivory-dim);
	margin-bottom: 1.8rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(232, 224, 210, 0.1);
}

.contact-address {
	font-family: var(--serif);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--ivory);
	margin-bottom: 2rem;
}
.contact-address a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 400ms var(--ease-out);
}
.contact-address a:hover { border-bottom-color: var(--gold-soft); }

.contact-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin-bottom: 0.9rem;
}
.contact-line__label {
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(232, 224, 210, 0.42);
	min-width: 7.5em;
}
.contact-line__value {
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: var(--ivory);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 400ms var(--ease-out);
}
a.contact-line__value:hover { border-bottom-color: var(--gold-soft); }

.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.4rem;
}

.hours {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.hours th,
.hours td {
	padding: 0.62rem 0;
	vertical-align: baseline;
	font-weight: 300;
	text-align: left;
}
.hours th {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 0.68rem;
	color: rgba(232, 224, 210, 0.55);
	white-space: nowrap;
}
.hours td:nth-child(2) { width: 99%; padding: 0 0.8rem; }
.hours__dots {
	display: block;
	height: 1px;
	background-image: radial-gradient(circle, rgba(232, 224, 210, 0.28) 1px, transparent 1.4px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	transform: translateY(-3px);
}
.hours__time {
	white-space: nowrap;
	letter-spacing: 0.09em;
	color: var(--ivory);
}
.hours tr.is-today th { color: var(--gold); }
.hours tr.is-today .hours__time { color: var(--gold); }

.contact-note {
	margin-top: 1.8rem;
	font-size: 0.8rem;
	line-height: 1.7;
	color: rgba(232, 224, 210, 0.42);
}

/* the blossom drops into the empty ground between the columns and the map,
   never over the text */
.contact-wrap + .flower-fall { margin: 3vh 0 -2vh 8vw; }
@media (max-width: 760px) { .contact-wrap + .flower-fall { margin: 3vh 0 -1vh 62vw; } }

.contact-map {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin: clamp(3.5rem, 9vh, 6rem) auto 0;
	text-align: center;
}
.contact-map__frame {
	position: relative;
	border: 1px solid rgba(232, 224, 210, 0.12);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	overflow: hidden;
}
.contact-map__frame iframe {
	display: block;
	width: 100%;
	height: clamp(300px, 46vh, 460px);
	border: 0;
	/* the map is a bright rectangle in a dark room — settle it into the page */
	filter: grayscale(0.55) brightness(0.72) contrast(1.05) sepia(0.18);
	transition: filter 600ms var(--ease-out);
}
.contact-map__frame:hover iframe { filter: none; }
.contact-map__cta { margin-top: 1.8rem; }

@media (max-width: 760px) {
	.contact-wrap { grid-template-columns: 1fr; gap: 3.2rem; }
	.contact-line__label { min-width: 100%; }
	.contact-actions .cta { flex: 1 1 auto; text-align: center; }
}

/* ---- About -------------------------------------------------------- */

.about-hero {
	position: relative;
	z-index: 2;
	text-align: center;
	margin: 0 auto clamp(3rem, 8vh, 5.5rem);
	max-width: 1100px;
}
.about-hero .menu-hero__eyebrow { margin-bottom: 1.6rem; }

.about-wordmark { position: relative; margin: 0; line-height: 0; }
.wordmark {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
/* the gold sits exactly over the fracture it fills */
.wordmark--gold {
	position: absolute;
	inset: 0;
}
.wordmark text {
	font-family: var(--serif);
	font-weight: 300;
	font-size: 128px;
}
/* the fracture: a dark channel with one faint lit lip below it, the same
   read as the seam on the homepage */
.wordmark__channel { fill: #050403; }
/* the lit lower lip of the groove — this is what makes the letters read as
   cut INTO the ceramic rather than printed on it, so it carries the whole
   effect for the beat before any gold arrives */
.wordmark__lip     { fill: rgba(238, 228, 210, 0.34); }
.wordmark__crack   { transform: translateY(0.12px); }
/* the gold, held back until the page has settled, then run through */
.wordmark__body  { fill: #9a7430; }
.wordmark__metal { fill: #c9a24d; }
.about-wordmark { --pour-time: 3200ms; }

.about-body {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
}
.about-body p {
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	line-height: 1.95;
	letter-spacing: 0.015em;
	color: rgba(232, 224, 210, 0.78);
	margin-bottom: 1.9rem;
}
.about-lead {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 3.4vw, 2.3rem) !important;
	line-height: 1.4 !important;
	letter-spacing: 0.03em;
	color: var(--ivory) !important;
	text-align: center;
	margin-bottom: 0.6rem !important;
}
.about-lead--second {
	color: var(--gold) !important;
	margin-bottom: 3rem !important;
	/* the answer rises into place once the question has finished typing */
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1100ms var(--ease-out), transform 1300ms var(--ease-out);
}
.about-lead--second.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* the opening line reserves its own height so nothing below it jumps as the
   words arrive */
.about-lead--typed { min-height: 1.4em; }
.about-caret {
	display: inline-block;
	width: 1px;
	height: 0.92em;
	margin-left: 0.14em;
	vertical-align: -0.08em;
	background: var(--gold);
	animation: caret-blink 1.15s steps(1) infinite;
}
.about-caret.is-done { animation: none; opacity: 0; transition: opacity 500ms linear; }
.about-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 3.4rem;
}
.about-body .flower-fall { margin-left: 62%; }

@media (max-width: 700px) {
	.wordmark text { font-size: 128px; }
	.about-body .flower-fall { margin-left: 58%; }
	.about-actions .cta { flex: 1 1 auto; text-align: center; }
}

/* ---- cross-tab jump ------------------------------------------------ */
/* At the end of one menu, the other one is offered — the same hairline
   language as the CTA, never a button box. */
.menu-crosslink {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin: clamp(3rem, 8vh, 5.5rem) 0 clamp(1rem, 3vh, 2rem);
}
.menu-crosslink__btn {
	appearance: none;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(232, 224, 210, 0.12);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: clamp(1.6rem, 4vh, 2.4rem) clamp(2rem, 6vw, 4rem) 0;
	color: var(--ivory-dim);
	transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.menu-crosslink__eyebrow {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
}
.menu-crosslink__label {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	text-transform: uppercase;
	color: var(--ivory);
	transition: color 420ms var(--ease-out);
}
.menu-crosslink__btn:hover { border-top-color: var(--gold-soft); color: var(--ivory); }
.menu-crosslink__btn:hover .menu-crosslink__label { color: var(--gold); }

/* ---- 404 ------------------------------------------------------------ */
/* Short page, so the ceramic needs a floor under it or the footer rides up
   into the heading. */
.notfound-page { min-height: 58vh; }

.notfound-body {
	position: relative;
	z-index: 2;
	max-width: 42rem;
	margin: 0 auto;
	padding-bottom: clamp(4rem, 10vh, 7rem);
	text-align: center;
}
.notfound-body p {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 1.02rem;
	line-height: 1.9;
	color: var(--ivory-dim);
}
.notfound-body .about-actions { margin-top: 2.8rem; }

@media (max-width: 700px) {
	.notfound-body .about-actions .cta { flex: 1 1 auto; text-align: center; }
}

/* ---- book control at the end of the menu ---------------------------- */
/* Lives outside both panels, so it reads as the end of the page rather than
   the end of one list. The crosslink above it already carries the bottom
   margin, so this only needs a floor under itself. */
.menu-book {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin: 0 0 clamp(3.5rem, 9vh, 6rem);
}

/* ---- legal pages ---------------------------------------------------- */
.legal-body {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: clamp(3rem, 8vh, 5rem);
}
.legal-updated {
	font-family: var(--sans);
	font-size: 0.62rem;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ivory-dim);
	margin-bottom: 2.6rem;
}
.legal-intro {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.75;
	letter-spacing: 0.02em;
	color: var(--ivory);
	text-align: center;
	margin-bottom: clamp(2.6rem, 7vh, 4rem);
}
.legal-section { margin-bottom: clamp(2.2rem, 5vh, 3rem); }
.legal-section h2 {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.1rem;
}
.legal-section p {
	font-size: clamp(0.92rem, 1.4vw, 1rem);
	line-height: 1.9;
	letter-spacing: 0.015em;
	color: rgba(232, 224, 210, 0.78);
	margin-bottom: 1.2rem;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--ivory); font-weight: 400; }
.legal-section a {
	color: var(--ivory);
	border-bottom: 1px solid rgba(232, 224, 210, 0.25);
	transition: border-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
.legal-section a:hover { color: var(--gold); border-bottom-color: var(--gold-soft); }
.legal-body .about-actions { margin-top: clamp(2.6rem, 7vh, 4rem); }

@media (max-width: 700px) {
	.legal-body .about-actions .cta { flex: 1 1 auto; text-align: center; }
}

/* ---- footer legal line ----------------------------------------------- */
.site-footer__legal {
	margin-top: 1.1rem;
	font-size: 0.58rem;
	letter-spacing: 0.28em;
}
.site-footer__legal a {
	color: rgba(232, 224, 210, 0.4);
	transition: color 400ms var(--ease-out);
}
.site-footer__legal a:hover { color: rgba(232, 224, 210, 0.75); }

/* ---- flavour note --------------------------------------------------- */
/* A cocktail is sold on how it tastes before it is sold on what is in it, so
   the note sits directly under the name, in gold italics, above the build. */
.menu-item__note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.02rem;
	letter-spacing: 0.02em;
	line-height: 1.5;
	color: var(--gold);
	margin-top: 0.28rem;
}
.menu-item__note + .menu-item__desc { margin-top: 0.42rem; }

/* ---- course-level groups -------------------------------------------- */
/* Sashimi and Nigiri are courses, not sub-groups: they carry their own icon
   and their own stop on the rail, exactly like Izakaya Plates and Rolls. They
   only happen to be marked up as groups because they share one bare section,
   so they take the section heading's size and face. Hosomaki, Uramaki and the
   rest stay small — that difference is the hierarchy. */
.menu-group--course .menu-group__title {
	font-family: var(--serif);
	font-weight: 300;
	/* the exact clamp .menu-section__title uses — "the same size as Izakaya
	   Plates" has to hold at every width, not just where they both happen to
	   land on the same number */
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	color: var(--ivory);
	margin-bottom: 1.8rem;
}
.menu-group--course .menu-group__note {
	font-family: var(--sans);
	font-size: 0.42em;
	letter-spacing: 0.2em;
	vertical-align: 0.32em;
}