/* ==========================================================================
   cafe Do!nats 2026 — main stylesheet
   Single responsive breakpoint at 820px for all grid collapses + nav hiding.
   ========================================================================== */

:root {
	--bg: #f5f2ec;
	--ink: #1d1a15;
	--sub: #8b8272;
	--line: #e0dacd;
	--accent: #b07a52;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Zen Kaku Gothic New', sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

/* sponly/pconly — force a manual line break (or show/hide content) on one
   side of the theme's single 819px breakpoint only. Matches the naming the
   client already uses from the previous theme. */
.sponly {
	display: none;
}
.pconly {
	display: inline;
}
@media (max-width: 819px) {
	.sponly {
		display: inline;
	}
	.pconly {
		display: none;
	}
}

.eyebrow {
	font-family: 'Figtree', sans-serif;
	color: var(--accent);
	letter-spacing: .4em;
	text-transform: uppercase;
	font-size: 12px;
	margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(34px);
}
[data-reveal].is-visible {
	animation: fadeUp .9s cubic-bezier(.19, .9, .31, 1) forwards;
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Section header (ghost label + bold caption) — used by product/feature/story/shop
   -------------------------------------------------------------------------- */
.section-header {
	text-align: center;
	max-width: 1140px;
	margin: 0 auto 48px;
}
.section-header__ghost {
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: clamp(30px, 6vw, 64px);
	color: var(--line);
	margin: 0;
	line-height: 1;
}
.section-header__caption {
	font-weight: 700;
	font-size: clamp(15px, 2vw, 18px);
	letter-spacing: .2em;
	margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px clamp(18px, 4vw, 44px);
	background: transparent;
}

/* isolation:isolate keeps the logo true-color, excluded from the nav's
   mix-blend-mode:difference text effect below. Do not add a background
   to .site-nav or the blend effect on .nav-link breaks. */
.site-nav__logo {
	isolation: isolate;
}
.site-nav__logo-img,
.site-nav__logo img {
	height: 52px;
	width: auto;
}

.site-nav__links {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
}

.nav-link {
	font-family: 'Figtree', sans-serif;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	mix-blend-mode: difference;
}

/* Hamburger toggle button — hidden on desktop, shown below 820px where
   .site-nav__links becomes an off-canvas dropdown instead of an inline row. */
.nav-toggle {
	display: none;
	position: relative;
	z-index: 51;
	width: 28px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	isolation: isolate;
}
.nav-toggle span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	mix-blend-mode: difference;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 819px) {
	.nav-toggle {
		display: block;
	}
	.site-nav__links {
		position: fixed;
		inset: 0;
		z-index: 49;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 28px;
		padding: 0 clamp(18px, 4vw, 44px);
		background: var(--ink);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform .3s ease, opacity .3s ease, visibility .3s;
	}
	.site-nav__links.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
	.nav-link,
	.reservation-cta--nav.reservation-cta--pill {
		font-size: 20px;
		color: var(--bg);
		mix-blend-mode: normal;
	}
	.nav-link--wide {
		display: inline-block;
	}
}

/* --------------------------------------------------------------------------
   Reservation CTA
   -------------------------------------------------------------------------- */
.reservation-cta--pill {
	display: inline-block;
	border-radius: 999px;
	border: 1px solid currentColor;
	padding: 7px 15px;
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.reservation-cta--nav.reservation-cta--pill {
	color: #fff;
	mix-blend-mode: difference;
}

.reservation-cta--hero.reservation-cta--pill {
	margin-top: 28px;
	color: #fff;
	border-color: rgba(255, 255, 255, .7);
}

.reservation-cta--shop.reservation-cta--pill {
	display: inline-block;
	margin-top: 40px;
	background: var(--accent);
	color: #fff;
	border: none;
	padding: 16px 40px;
	font-size: 14px;
}

.reservation-cta--mobile-bar {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 16px;
	font-size: 15px;
	font-weight: 700;
}

.reservation-cta--iframe iframe {
	width: 100%;
	height: clamp(240px, 34vw, 420px);
	border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
}

/* Hero photo crossfade. Gotcha: overlay/text/scroll-indicator must sit at
   z-index 4-5, above the photo stack (z-index 1-3), or they render
   invisible underneath the crossfading photos. */
.hero-kv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: kv-fade 12s ease-in-out infinite;
}
.hero-kv:nth-of-type(1) { animation-delay: 0s; z-index: 3; }
.hero-kv:nth-of-type(2) { animation-delay: -4s; z-index: 2; }
.hero-kv:nth-of-type(3) { animation-delay: -8s; z-index: 1; }

@keyframes kv-fade {
	0% { opacity: 0; }
	5% { opacity: 1; }
	29% { opacity: 1; }
	34% { opacity: 0; }
	100% { opacity: 0; }
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: linear-gradient(180deg, rgba(20, 16, 12, .28) 0%, rgba(20, 16, 12, 0) 34%, rgba(20, 16, 12, .06) 64%, rgba(20, 16, 12, .5) 100%);
}

.hero-content {
	position: relative;
	z-index: 5;
	padding: 0 clamp(18px, 4vw, 44px) clamp(48px, 8vw, 96px);
}

.hero-eyebrow {
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
	letter-spacing: .42em;
	text-transform: uppercase;
	opacity: .9;
	margin: 0 0 18px;
}

.hero-title {
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
	font-size: clamp(38px, 8.5vw, 104px);
	line-height: 1.04;
	letter-spacing: -.01em;
	margin: 0 0 20px;
}
@media (max-width: 819px) {
	.hero-title {
		font-size: clamp(48px, 13vw, 104px);
	}
}

.hero-subcopy {
	font-family: 'Zen Old Mincho', serif;
	font-size: clamp(15px, 2.4vw, 22px);
	letter-spacing: .06em;
	opacity: .95;
	margin: 0;
}

@media (max-width: 819px) {
	.hero-eyebrow,
	.hero-title,
	.hero-subcopy {
		text-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 24px rgba(0, 0, 0, .3);
	}
}

.hero-scroll {
	position: relative;
	z-index: 5;
	align-self: center;
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #fff;
}
.hero-scroll__label {
	writing-mode: vertical-rl;
	font-family: 'Figtree', sans-serif;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .8;
}
.hero-scroll__line {
	position: relative;
	display: block;
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, .4);
}
.hero-scroll__dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 999px;
	background: #fff;
	animation: scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot {
	0% { transform: translateY(0); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translateY(30px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
	overflow: hidden;
}
.marquee-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: marq 30s linear infinite;
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: clamp(13px, 1.7vw, 18px);
}
@keyframes marq {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.about,
.product,
.feature,
.story,
.insta,
.shop {
	padding: clamp(72px, 11vw, 150px) clamp(18px, 4vw, 44px) 0;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-grid {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
}
@media (max-width: 819px) {
	.about-grid {
		grid-template-columns: 1fr;
	}
}

.about-heading {
	font-weight: 700;
	font-size: clamp(26px, 4.6vw, 44px);
	line-height: 1.4;
	margin: 0 0 24px;
}

.about-body {
	color: var(--sub);
	line-height: 2.1;
	margin: 0;
}

.about-photos {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 12px;
}
.about-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-photo--tall {
	grid-row: 1 / span 2;
}

/* --------------------------------------------------------------------------
   Product
   -------------------------------------------------------------------------- */
.product-grid {
	max-width: 1200px;
	margin: 0 auto 80px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px 24px;
}

.product-card__photo-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--line);
}
.product-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 14px;
	font-weight: 700;
}
.product-card__price {
	font-family: 'Figtree', sans-serif;
	color: var(--accent);
}
.product-card__desc {
	margin: 6px 0 0;
	color: var(--sub);
	font-size: 14px;
	line-height: 1.7;
}

/* Price lists */
.price-lists {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
}
@media (max-width: 819px) {
	.price-lists {
		grid-template-columns: 1fr;
	}
}

.price-list__header {
	display: flex;
	align-items: baseline;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.price-list__en {
	font-family: 'Figtree', sans-serif;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: 13px;
}
.price-list__jp {
	font-weight: 700;
	font-size: 16px;
}

.price-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 10px;
	padding: 10px 0;
}
.price-row__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	min-width: 0;
}
.price-row__name::after {
	content: '';
	flex: 1 1 20px;
	min-width: 14px;
	border-bottom: 1px dotted var(--line);
	align-self: center;
}
.price-row__price {
	font-family: 'Figtree', sans-serif;
	color: var(--accent);
	white-space: nowrap;
}

.price-row__tag {
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
	padding: 2px 7px;
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Feature / Story rows
   -------------------------------------------------------------------------- */
.feature-row,
.story-row {
	max-width: 1140px;
	margin: 0 auto 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 60px);
	align-items: center;
}
@media (max-width: 819px) {
	.feature-row,
	.story-row {
		grid-template-columns: 1fr;
	}
}

.feature-row--flip .feature-row__image,
.story-row--flip .story-row__image {
	order: 2;
}

.feature-row__image img,
.story-row__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 501 / 280;
	object-fit: cover;
	background: var(--line);
}

.feature-row__heading,
.story-row__heading {
	font-weight: 700;
	font-size: clamp(22px, 3.4vw, 34px);
	line-height: 1.5;
	margin: 0 0 16px;
}

.feature-row__body,
.story-row__body {
	max-width: 34em;
	color: var(--sub);
	line-height: 2.1;
}
.feature-row__body p,
.story-row__body p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */
.shop-map {
	max-width: 1140px;
	margin: 0 auto 40px;
}
.shop-map iframe {
	width: 100%;
	height: clamp(240px, 34vw, 420px);
	border: 1px solid var(--line);
}

.shop-info {
	max-width: 1140px;
	margin: 0 auto;
}
.shop-info__row {
	display: grid;
	grid-template-columns: minmax(120px, 180px) 1fr;
	padding: 16px 0;
}
@media (max-width: 819px) {
	.shop-info__row {
		grid-template-columns: 130px 1fr;
		column-gap: 12px;
	}
}
.shop-info__row + .shop-info__row {
	border-top: 1px solid var(--line);
}
.shop-info__label {
	text-transform: uppercase;
	color: var(--sub);
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
}

.shop-notes {
	max-width: 1140px;
	margin: 24px auto 0;
}
.shop-notes__sister {
	color: var(--sub);
	margin: 0 0 12px;
}
.shop-notes__instagram {
	color: var(--accent);
	text-decoration: underline;
}

.instagram-feed {
	max-width: 1140px;
	margin: 40px auto 0;
}

/* Instagram feed shortcode embed in front-page.php (between #product and
   #shop) reuses the old bazz theme's "wrap txcenter space" classnames —
   bazz2026 doesn't load that theme's stylesheet, so they need their own
   rule here for the side margin to take effect. */
.wrap.txcenter.space {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
	box-sizing: border-box;
}

.shop {
	padding-bottom: clamp(72px, 11vw, 150px);
	text-align: center;
}
.shop .shop-info,
.shop .shop-notes {
	text-align: left;
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA bar
   -------------------------------------------------------------------------- */
.sticky-mobile-bar {
	display: none;
}
@media (max-width: 819px) {
	.sticky-mobile-bar {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 60;
		background: var(--ink);
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   Scroll-to-top button — mobile only, donut icon, bottom-right
   -------------------------------------------------------------------------- */
.scroll-top {
	display: none;
	position: relative;
}
@media (max-width: 819px) {
	.scroll-top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: 76px;
		z-index: 55;
		width: 56px;
		height: 56px;
		padding: 0;
		border: none;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(12px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.scroll-top.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}
.scroll-top__icon {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
	animation: donut-hop 2.5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes donut-hop {
	0%, 70%, 100% { transform: translateY(0) scale(1); }
	78% { transform: translateY(-20px) scale(1.03, .97); }
	84% { transform: translateY(0) scale(1.05, .93); }
	88% { transform: translateY(-10px) scale(1.02, .98); }
	92% { transform: translateY(0) scale(1.03, .96); }
	96% { transform: translateY(-3px) scale(1); }
}
.scroll-top__arrow {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--ink);
	border: 2px solid #fff;
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--ink);
	color: var(--bg);
	padding: clamp(72px, 11vw, 150px) clamp(18px, 4vw, 44px);
}
.site-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
}
.site-footer__heading {
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 20px;
}
.site-footer__subcopy {
	font-family: 'Zen Old Mincho', serif;
	opacity: .7;
	margin: 0 0 40px;
}
.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 40px;
	font-family: 'Figtree', sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .05em;
}
.site-footer__copyright {
	font-family: 'Figtree', sans-serif;
	font-size: 12px;
	opacity: .6;
	margin: 0;
}