/* 00-base.css */
/* 1. Tokens ---------------------------------------------------------------- */

@property --intro {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

:root {
	--f3-night: var(--wp--preset--color--night, #050B16);
	--f3-samurai: var(--wp--preset--color--samurai-blue, #0B2D5C);
	--f3-french: var(--wp--preset--color--french-blue, #1F56A8);
	--f3-offwhite: var(--wp--preset--color--off-white, #F3F1EC);
	--f3-ink: var(--wp--preset--color--ink, #07090D);
	--f3-warm: var(--wp--preset--color--warm-gray, #8C877E);
	--f3-silver: var(--wp--preset--color--silver, #BFC4CA);
	--f3-mist: var(--wp--preset--color--mist, #D9DCE0);

	/* One restrained sans system, matched to the printed FLAT3 label (light, clean, widely tracked).
	   --f3-serif / --f3-mincho are kept as aliases so existing rules resolve to the same sans. */
	--f3-sans: var(--wp--preset--font-family--sans, 'Geist', 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif);
	--f3-ja-sans: var(--wp--preset--font-family--ja-sans, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif);
	--f3-mono: var(--wp--preset--font-family--mono, 'Geist Mono', ui-monospace, monospace);
	--f3-serif: var(--f3-sans);
	--f3-mincho: var(--f3-ja-sans);
	--f3-track-display: .06em;

	--f3-margin: 3.4vw;
	--f3-ease-expo: cubic-bezier(.16, 1, .3, 1);
	--f3-ease-panel: cubic-bezier(.2, .7, .2, 1);
	--f3-light: rgba(90, 140, 215, .42);
	--f3-svh: 100vh;
}

@supports (height: 100svh) {
	:root { --f3-svh: 100svh; }
}

@media (max-width: 899.98px) {
	:root { --f3-margin: 20px; }
}

/* 2. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--f3-night);
	-webkit-text-size-adjust: 100%;
}

html.f3-motion { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--f3-night);
	color: var(--f3-offwhite);
	font-family: var(--f3-sans);
	font-feature-settings: 'palt' 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

body.f3-menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
a:hover { color: #C5C8CC; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 1px solid var(--f3-offwhite); outline-offset: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.f3-skip {
	position: fixed; left: 12px; top: -60px; z-index: 200;
	padding: 10px 16px;
	background: var(--f3-offwhite); color: var(--f3-ink);
	font-size: 13px; letter-spacing: .16em;
}
.f3-skip:focus { top: 12px; }

@media (min-width: 900px) { .f3-sp-only { display: none !important; } }
@media (max-width: 899.98px) { .f3-pc-only { display: none !important; } }

/* 3. Shared parts ---------------------------------------------------------- */

.f3-kicker {
	font-family: var(--f3-mono);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: .16em;
	color: var(--f3-silver);
}

.f3-lead {
	font-family: var(--f3-sans);
	font-weight: 300;
	font-size: 1.5vw;
	line-height: 1.35;
	letter-spacing: .02em;
}

/* EN / JA paired copy — see flat3_pair(). English leads; Japanese sits directly beneath, always visible. */
.f3-pair { display: inline-flex; flex-direction: column; align-items: inherit; gap: .5em; max-width: 100%; }
.f3-pair__en { display: block; }
.f3-pair__ja {
	display: block;
	font-family: var(--f3-ja-sans);
	font-weight: 300;
	font-size: var(--ja, max(.34em, 13.5px));
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: none;
	color: var(--f3-ja-ink, var(--f3-silver));
}
.f3-pair.is-note { display: flex; gap: .7em; }
.f3-pair.is-note .f3-pair__ja { font-size: 14.5px; line-height: 2; letter-spacing: .08em; }
.f3-textlink .f3-pair__ja, .f3-ctabar .f3-pair__ja { font-size: 13.5px; letter-spacing: .1em; opacity: .75; }
.f3-ctabar .f3-pair { gap: 2px; }
.f3-kicker .f3-pair { display: inline-flex; flex-direction: row; align-items: baseline; gap: 1em; vertical-align: baseline; }
.f3-kicker .f3-pair__ja { font-size: 1em; letter-spacing: .1em; }

.f3-mono { font-family: var(--f3-mono); }

.f3-textlink {
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(243, 241, 236, .6);
	transition: border-color .32s var(--f3-ease-panel), color .32s var(--f3-ease-panel);
}
.f3-textlink.is-sub { color: var(--f3-silver); border-bottom-color: rgba(243, 241, 236, .25); }
.f3-textlink:hover { color: var(--f3-offwhite); border-bottom-color: var(--f3-offwhite); }

.f3-admin-note {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 8px;
	background: var(--f3-french);
	color: #fff;
	font-family: var(--f3-mono);
	font-size: 12px;
	letter-spacing: .08em;
}

/* Bottle — CSS drawing from the approved Bottle prototype (160 × 600 ratio). */
.f3-bottle {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	container-type: size;
}
img.f3-bottle--image { object-fit: contain; aspect-ratio: 588 / 1863; filter: drop-shadow(0 2.4vh 3vh rgba(0, 0, 0, .55)); }
.f3-bottle > div, .f3-bottle span, .f3-bottle i { position: absolute; display: block; }
.f3-bottle__shadow {
	bottom: -1.5%; left: -35%; width: 170%; height: 5%;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 70%);
}
.f3-bottle__capsule {
	left: 34%; width: 32%; top: 0; height: 19%;
	background: var(--b-capsule);
	border-radius: 3cqw 3cqw 0 0;
	overflow: hidden;
}
.f3-bottle__capsule::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .28) 26%, rgba(255, 255, 255, 0) 44%, rgba(0, 0, 0, .35) 85%);
}
.f3-bottle__capsule-ring { left: 0; right: 0; bottom: 12%; height: 1.2cqw; background: rgba(255, 255, 255, .35); }
.f3-bottle__neck {
	left: 34.5%; width: 31%; top: 18.6%; height: 10%;
	background: linear-gradient(90deg, #030507 0%, #141c1c 18%, #0b1112 34%, #06090a 64%, #101717 88%, #030405 100%);
}
.f3-bottle__shoulder {
	left: 0; width: 100%; top: 25%; height: 14%;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: linear-gradient(90deg, #030507 0%, #141c1c 14%, #0b1112 30%, #06090a 62%, #0f1616 86%, #030405 100%);
}
.f3-bottle__body {
	left: 0; width: 100%; top: 38.6%; height: 61.4%;
	border-radius: 0 0 5% 5% / 0 0 1.5% 1.5%;
	background: linear-gradient(90deg, #030507 0%, #141c1c 14%, #0b1112 30%, #06090a 62%, #0f1616 86%, #030405 100%);
	overflow: hidden;
}
.f3-bottle__highlight { left: 10%; width: 6%; top: 0; bottom: 4%; background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04)); }
.f3-bottle__sweep {
	inset: 0;
	background: linear-gradient(100deg,
		rgba(255, 255, 255, 0) calc(var(--sweep, .35) * 120% - 22%),
		rgba(160, 190, 235, .16) calc(var(--sweep, .35) * 120% - 10%),
		rgba(255, 255, 255, 0) calc(var(--sweep, .35) * 120%));
}
.f3-bottle__label {
	top: 56%; height: 29%; left: 7%; right: 7%;
	background: var(--b-label-bg);
	color: var(--b-label-ink);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3.2cqw;
	text-align: center;
}
.f3-bottle__label > span { position: static; }
.f3-bottle__estate { font-family: var(--f3-mono); font-size: 3.4cqw; letter-spacing: .14em; opacity: .7; }
.f3-bottle__name { font-family: var(--f3-serif); font-weight: 400; font-size: var(--b-name-size); line-height: .9; letter-spacing: .02em; padding: 0 4cqw; }
.f3-bottle__lines { display: flex !important; flex-direction: column; gap: 1.6cqw; width: 44%; }
.f3-bottle__lines i { position: static; height: .6cqw; background: var(--b-line); }
.f3-bottle__aoc { font-family: var(--f3-sans); font-size: 3.2cqw; letter-spacing: .24em; }

/* Image slot placeholder (for upcoming sections). */
.f3-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-slot--empty {
	position: relative;
	background: repeating-linear-gradient(135deg, rgba(191, 196, 202, .08) 0 1px, transparent 1px 12px), #0C1626;
}
.f3-slot__label {
	position: absolute; left: 12px; bottom: 10px; right: 12px;
	font-family: var(--f3-mono); font-size: 12px; letter-spacing: .1em; color: var(--f3-warm);
}

/* 4. Header / menu --------------------------------------------------------- */

.f3-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	padding: 26px var(--f3-margin);
	color: #fff;
	mix-blend-mode: difference;
	font-size: 12.5px; letter-spacing: .22em;
	pointer-events: none;
}
.f3-header a, .f3-header button { pointer-events: auto; }
.f3-header__logo { font-family: var(--f3-serif); font-size: 28px; letter-spacing: .04em; font-weight: 400; }
.f3-header__nav { display: flex; gap: clamp(14px, 1.9vw, 34px); }
.f3-header__actions { display: flex; gap: clamp(14px, 1.6vw, 26px); align-items: center; }
.f3-header__buy { border: 1px solid #fff; background: #fff; color: #000; font-weight: 500; padding: 12px 22px; transition: background .32s var(--f3-ease-panel), color .32s var(--f3-ease-panel); }
.f3-header__buy:hover { background: transparent; color: #fff; }
.f3-header__menu { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; justify-content: flex-end; font-size: 12px; letter-spacing: .24em; }
.f3-burger { display: flex; flex-direction: column; gap: 5px; width: 28px; }
.f3-burger i { display: block; height: 1px; background: #fff; }

@media (max-width: 899.98px) {
	.f3-header { padding: 18px 20px; }
	.f3-header__logo { font-size: 24px; }
	.f3-burger { width: 22px; gap: 4px; }
}

.f3-menu {
	position: fixed; inset: 0; z-index: 80;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 34vw;
	background: var(--f3-samurai);
	color: var(--f3-offwhite);
}
.f3-menu[hidden] { display: none; }
html.f3-motion .f3-menu { animation: f3-menu-in .4s var(--f3-ease-panel); }
@keyframes f3-menu-in { from { opacity: 0; } }

.f3-menu__main { padding: 26px var(--f3-margin) 5vh; display: flex; flex-direction: column; justify-content: space-between; gap: 4vh; overflow-y: auto; }
.f3-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.f3-menu__logo { font-family: var(--f3-serif); font-size: 28px; letter-spacing: .04em; }
.f3-menu__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3vw; row-gap: 2.6vh; align-content: start; }
.f3-menu__grp { display: flex; flex-direction: column; }
.f3-menu__group { font-family: var(--f3-mono); font-size: 12px; letter-spacing: .24em; color: var(--f3-warm); padding-bottom: 1vh; }
.f3-menu__item {
	display: grid;
	grid-template-columns: 2.6vw minmax(0, 1fr) auto;
	align-items: baseline;
	padding: 1.1vh 0;
	border-top: 1px solid rgba(243, 241, 236, .22);
}
.f3-menu__grp .f3-menu__item:last-child { border-bottom: 1px solid rgba(243, 241, 236, .22); }
.f3-menu__item.is-buy { color: var(--f3-offwhite); background: var(--f3-french); padding-left: 12px; padding-right: 12px; }
.f3-menu__item.is-buy .f3-menu__meta { color: var(--f3-offwhite); }
.f3-menu__item:hover { color: var(--f3-silver); }
.f3-menu__num { font-family: var(--f3-mono); font-size: 12px; }
.f3-menu__title { font-family: var(--f3-serif); font-weight: 300; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.05; }
.f3-menu__title.is-italic { font-style: italic; }
.f3-menu__meta { font-family: var(--f3-mono); font-size: 12px; letter-spacing: .12em; color: var(--f3-silver); }
.f3-menu__meta-row { display: flex; gap: 3vw; font-size: 12.5px; letter-spacing: .2em; color: var(--f3-silver); }
.f3-menu__side { position: relative; background: var(--f3-night); display: flex; flex-direction: column; justify-content: space-between; padding: 26px var(--f3-margin) 5vh; }
.f3-menu__close { align-self: flex-end; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12.5px; letter-spacing: .22em; }
.f3-menu__close i { display: block; width: 28px; height: 1px; background: var(--f3-offwhite); }
.f3-menu__bottle { position: absolute; left: 50%; top: 50%; width: 14vh; height: 54vh; transform: translate(-50%, -54%); }
.f3-menu__spec { display: flex; flex-direction: column; gap: 8px; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.7; color: var(--f3-silver); }
.f3-menu__spec span:first-child { color: var(--f3-offwhite); }

@media (max-width: 899.98px) {
	.f3-menu { grid-template-columns: minmax(0, 1fr); }
	.f3-menu__main { padding: 18px 20px 24px; }
	.f3-menu__logo { font-size: 24px; }
	.f3-menu__close { font-size: 12px; letter-spacing: .24em; gap: 10px; }
	.f3-menu__close i { width: 22px; }
	.f3-menu__item { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 0; }
	.f3-menu__num { font-size: 12px; }
	.f3-menu__nav { grid-template-columns: 1fr; row-gap: 18px; }
	.f3-menu__title { font-size: 28px; }
	.f3-menu__foot { display: flex; flex-direction: column; gap: 18px; }
	.f3-menu__cta { display: grid; grid-template-columns: 1.25fr 1fr; height: 56px; border: 1px solid rgba(243, 241, 236, .3); font-size: 12px; letter-spacing: .24em; }
	.f3-menu__cta-buy { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--f3-offwhite); color: var(--f3-samurai); }
	.f3-menu__cta-buy:hover { color: var(--f3-samurai); }
	.f3-menu__cta-pro { display: flex; align-items: center; justify-content: center; }
	.f3-menu__meta-row { justify-content: space-between; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .12em; }
}

.f3-anchor-inline { display: block; height: 0; width: 0; }

/* RUN #25: the deep-site menu lists 16 destinations in two columns — meta sits under the title so long titles never collide with it. */
@media (min-width: 901px) {
	.f3-menu__item { grid-template-columns: 2.6vw minmax(0, 1fr); row-gap: 3px; }
	.f3-menu__item .f3-menu__meta { grid-column: 2; }
	.f3-menu__title { font-size: clamp(20px, 1.8vw, 30px); }
}
@media (min-width: 901px) {
	.f3-menu__nav { display: block; column-count: 2; column-gap: 3vw; }
	.f3-menu__grp { break-inside: avoid; margin-bottom: 2.4vh; }
}

/* 10-chrome.css */
/* 7. Footer / SP CTA bar / fallback page ---------------------------------- */

.f3-footer { display: flex; flex-direction: column; gap: 0; background: var(--f3-night); color: var(--f3-offwhite); border-top: 1px solid rgba(243, 241, 236, .12); }
.f3-footer a { transition: color .25s, background .25s, border-color .25s; }
/* Layer 1 — final routing: three clear actions */
.f3-footer__route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid rgba(243, 241, 236, .16); }
.f3-footer__r { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(32px, 6vh, 56px) clamp(24px, 3vw, 48px) clamp(36px, 6.4vh, 60px); border-left: 1px solid rgba(243, 241, 236, .16); min-height: 190px; }
.f3-footer__r:first-child { border-left: 0; padding-left: var(--f3-margin); }
.f3-footer__r:hover, .f3-footer__r:focus-visible { background: rgba(31, 86, 168, .22); color: var(--f3-offwhite); }
.f3-footer__r:focus-visible { outline: 2px solid var(--f3-french); outline-offset: -4px; }
.f3-footer__r.is-buy { background: var(--f3-samurai); }
.f3-footer__r.is-buy:hover, .f3-footer__r.is-buy:focus-visible { background: var(--f3-french); }
.f3-footer__rk { font-family: var(--f3-mono); font-size: 12.5px; letter-spacing: .2em; color: var(--f3-silver); }
.f3-footer__rt { font-weight: 200; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.25; letter-spacing: -.005em; max-width: 18em; }
.f3-footer__rj { font-family: var(--f3-ja-sans); font-size: 15.5px; line-height: 1.7; letter-spacing: .05em; color: var(--f3-offwhite); opacity: .9; }
.f3-footer__go { margin-top: auto; align-self: flex-end; font-size: 26px; line-height: 1; transition: transform .3s var(--f3-ease-panel); }
.f3-footer__r:hover .f3-footer__go { transform: translateX(6px); }
/* Layer 2 — brand · concise navigation · about this site */
.f3-footer__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); gap: clamp(32px, 4.4vw, 80px); align-items: start; padding: clamp(48px, 8vh, 88px) var(--f3-margin) clamp(40px, 6vh, 64px); }
.f3-footer__logo { margin: 0; font-family: var(--f3-serif); font-weight: 300; font-size: clamp(56px, 6.4vw, 104px); line-height: .85; }
.f3-footer__addr { margin: 22px 0 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .14em; line-height: 1.9; color: var(--f3-warm); }
.f3-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-self: stretch; }
.f3-footer__nav a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid rgba(243, 241, 236, .14); font-size: 13px; letter-spacing: .16em; }
.f3-footer__nav a span[lang="ja"] { font-family: var(--f3-ja-sans); font-size: 13px; letter-spacing: .04em; color: var(--f3-silver); }
.f3-footer__nav a:hover, .f3-footer__nav a:focus-visible { color: #fff; border-bottom-color: var(--f3-french); }
.f3-footer__about { max-width: 34em; }
.f3-footer__ah { margin: 0; font: inherit; }
.f3-footer__ak { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 10px; background: none; border: 0; border-bottom: 1px solid rgba(243, 241, 236, .28); color: var(--f3-silver); cursor: pointer; text-align: left; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .2em; transition: color .3s, border-color .3s; }
.f3-footer__ak:hover, .f3-footer__ak:focus-visible { color: #fff; border-bottom-color: var(--f3-french); }
.f3-footer__akl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.f3-footer__akl span { font-family: var(--f3-ja-sans); font-size: 14px; letter-spacing: .06em; color: var(--f3-offwhite); }
.f3-footer__ai { position: relative; flex: none; width: 14px; height: 14px; }
.f3-footer__ai::before, .f3-footer__ai::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.f3-footer__ai::after { transform: rotate(90deg); }
.f3-footer__ak[aria-expanded="true"] .f3-footer__ai::after { transform: rotate(0); }
.f3-footer__apanel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.f3-footer__apanel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.f3-footer__aclip { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 0; }
.f3-footer__apanel.is-open .f3-footer__aclip { padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { .f3-footer__apanel, .f3-footer__ai::before, .f3-footer__ai::after { transition: none; } }
.f3-footer__ap { margin: 0; font-family: var(--f3-ja-sans); font-size: 14.5px; line-height: 2; letter-spacing: .03em; color: rgba(243, 241, 236, .82); }
/* WINE CLUB sales-info line: one more row of the About list (same rule, type and arrow scale; no card, no logo). */
.f3-footer__wc { display: flex; align-items: center; gap: 4px 14px; min-height: 44px; padding: 0 0 10px; border-bottom: 1px solid rgba(243, 241, 236, .28); color: var(--f3-silver); font-family: var(--f3-ja-sans); font-size: 14px; letter-spacing: .06em; transition: color .3s, border-color .3s; }
.f3-footer__wc:hover, .f3-footer__wc:focus-visible { color: #fff; border-bottom-color: var(--f3-french); }
.f3-footer__wck { flex: none; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .2em; }
.f3-footer__wcl { flex: 1 1 auto; min-width: 0; color: var(--f3-offwhite); }
.f3-footer__wca { flex: none; font-size: 14px; line-height: 1; }
.f3-footer__sig { margin: 6px 0 0; }
.f3-footer__sig a { display: inline-flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; border-bottom: 1px solid rgba(243, 241, 236, .4); padding-bottom: 4px; }
.f3-footer__sig a:hover, .f3-footer__sig a:focus-visible { border-bottom-color: var(--f3-french); color: #fff; }
.f3-footer__sig b { font-weight: 400; font-size: 15px; letter-spacing: .2em; }
.f3-footer__sig span { font-family: var(--f3-mono); font-size: 12px; letter-spacing: .08em; color: var(--f3-silver); }
/* Layer 3 — legal / helpful, kept subtle */
.f3-footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; padding: 22px var(--f3-margin) 28px; border-top: 1px solid rgba(243, 241, 236, .12); font-family: var(--f3-mono); font-size: 12px; letter-spacing: .06em; color: var(--f3-warm); }
.f3-footer__legal p, .f3-footer__legal ul { margin: 0; }
.f3-footer__org { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 0; list-style: none; }
.f3-footer__legal a:hover, .f3-footer__legal a:focus-visible { color: var(--f3-offwhite); }
.f3-footer__alc { font-family: var(--f3-ja-sans); font-size: 12.5px; letter-spacing: .03em; }

.f3-ctabar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: grid; grid-template-columns: 1.25fr 1fr;
	height: calc(56px + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: rgba(5, 11, 22, .86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid rgba(243, 241, 236, .16);
	font-size: 12px; letter-spacing: .24em;
	opacity: 0; visibility: hidden;
	transform: translateY(100%);
	transition: opacity .4s, transform .4s var(--f3-ease-panel), visibility 0s linear .4s;
}
.f3-ctabar.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .4s var(--f3-ease-panel), visibility 0s; }
.f3-ctabar__buy { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--f3-samurai); }
.f3-ctabar__pro { display: flex; align-items: center; justify-content: center; }

@media (max-width: 899.98px) {
	.f3-footer__route { grid-template-columns: minmax(0, 1fr); }
	.f3-footer__r { min-height: 0; padding: 26px 20px 28px; border-left: 0; border-top: 1px solid rgba(243, 241, 236, .16); gap: 6px; }
	.f3-footer__r:first-child { padding-left: 20px; border-top: 0; }
	.f3-footer__go { position: absolute; right: 20px; top: 24px; margin: 0; font-size: 22px; }
	.f3-footer__rt { font-size: 21px; padding-right: 36px; }
	.f3-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 20px 32px; }
	.f3-footer__logo { font-size: 64px; }
	.f3-footer__addr { margin-top: 14px; }
	.f3-footer__nav a { min-height: 52px; font-size: 12.5px; }
	.f3-footer__ap { font-size: 14px; line-height: 1.95; }
	.f3-footer__wc { flex-wrap: wrap; row-gap: 2px; padding: 8px 0 10px; }
	.f3-footer__wcl { flex-basis: calc(100% - 40px); order: 3; }
	.f3-footer__wck { order: 1; flex: 1 1 auto; }
	.f3-footer__wca { order: 2; }
	.f3-footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px calc(96px + env(safe-area-inset-bottom, 0px)); line-height: 1.8; }
	.f3-footer__org li { min-height: 28px; display: flex; align-items: center; }
}

/* Fallback page (non-front templates, not designed yet). */
.f3-page { max-width: 880px; margin: 0 auto; padding: 160px 20px 120px; }
.f3-page__title { font-family: var(--f3-serif); font-weight: 300; font-size: 56px; line-height: 1; margin-bottom: 40px; }
.f3-page__body { font-family: var(--f3-mincho); font-size: 15px; line-height: 2; }

/* 20-pc.css */
/* 5. PC shared type + the closing conversion block used by the deep pages (flat3_page_end) ------------------
 *
 * The HOME's own PC scenes live in 50-home-pc.u.css (scroll progress written by src/ts/home-pc.ts).
 */

.f3-pc-only { --ja-ink-light: #55524c; }

/* Shared PC type ----------------------------------------------------------- */

.f3-h2 .f3-pair, .f3-pc-only .f3-lead .f3-pair, .f3-pc-only .f3-copy .f3-pair { display: flex; }

.f3-pc-only .f3-lead { font-size: 1.55vw; font-weight: 300; line-height: 1.35; --ja: clamp(15.5px, 1.04vw, 18px); }
.f3-pc-only .f3-lead.is-big { font-size: 2.1vw; }
.f3-pc-only .f3-copy {
	font-family: var(--f3-sans);
	font-weight: 300;
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.75;
	letter-spacing: .01em;
	--ja: clamp(15.5px, 1.1vw, 18px);
}
.f3-pc-only .f3-copy .f3-pair__ja { line-height: 1.95; letter-spacing: .06em; }

.f3-anchor { position: absolute; left: 0; top: 120vh; width: 1px; height: 1px; }

@keyframes f3-intro { to { --intro: 1; } }

.f3-textlink { display: inline-block; }
.f3-textlink.is-quiet { color: var(--f3-silver); border-bottom-color: rgba(243, 241, 236, .25); }
.f3-textlink.is-dark { color: var(--f3-ink); border-bottom-color: var(--f3-ink); }
.f3-textlink.is-dark:hover { color: var(--f3-ink); }
.f3-textlink.is-dark .f3-pair__ja { color: var(--f3-ja-ink-light, #55524c); }

.f3-note { font-size: 1.5vw; font-weight: 300; line-height: 1.3; }
.f3-note .f3-pair { gap: 14px; }
.f3-note .f3-pair__ja { line-height: 2; letter-spacing: .08em; }

.f3-photo { display: block; width: 100%; height: 100%; object-fit: cover; }


/* Buy / Professional (deep pages) -------------------------------------------------------------- */

.f3-conv { position: relative; background: var(--f3-night); padding-top: 24vh; }
.f3-conv__head { display: flex; flex-direction: column; gap: 3vh; padding: 0 var(--f3-margin) 12vh; }
.f3-conv__title { font-weight: 200; font-size: 8vw; line-height: 1; letter-spacing: -.02em; --ja: clamp(15.5px, 1.43vw, 22px); }
.f3-conv__title .f3-pair { display: flex; gap: 3vh; }
.f3-conv__title em { font-style: normal; display: inline-block; padding-left: 14vw; color: var(--f3-silver); }
.f3-conv__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid rgba(243, 241, 236, .25); }
.f3-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 8vh; min-height: 62vh; padding: 6vh var(--f3-margin); color: var(--f3-offwhite); transition: background-color .32s var(--f3-ease-panel); }
.f3-panel:hover { color: var(--f3-offwhite); }
.f3-panel--buy { background: var(--f3-samurai); }
.f3-panel--buy:hover { background: var(--f3-french); }
.f3-panel--pro { border-left: 1px solid rgba(243, 241, 236, .25); }
.f3-panel--pro:hover { background: var(--f3-samurai); }
.f3-panel__top { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; color: var(--f3-silver); }
.f3-panel__body { display: flex; flex-direction: column; gap: 3vh; }
.f3-panel__title { font-weight: 200; font-size: 5vw; line-height: .95; letter-spacing: -.015em; --ja: clamp(15.5px, 1.32vw, 20px); }
.f3-panel__title .f3-pair { display: flex; gap: 1.6vh; }
.f3-panel__sub { font-size: 13px; letter-spacing: .24em; --ja: 15.5px; }
.f3-panel__sub .f3-pair__ja { letter-spacing: .08em; }
.f3-panel__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 2vw; max-width: 34vw; font-size: 13px; letter-spacing: .2em; --ja: 15.5px; }
.f3-panel__tags > .f3-pair { border-top: 1px solid rgba(243, 241, 236, .25); padding-top: 10px; gap: 4px; }
.f3-panel__go { display: flex; align-items: center; gap: 16px; font-size: 12.5px; letter-spacing: .24em; }
.f3-panel__go i { flex: 1; height: 1px; background: var(--f3-offwhite); }

/* Issue #14 — wine × football, estate team, Les Bleus de la Vigne ------------------ */

.f3-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .12em; line-height: 1.5; color: var(--f3-silver); }
.f3-meta li::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--f3-french); vertical-align: middle; margin-right: 9px; }

.f3-team { display: flex; flex-direction: column; gap: 18px; border: 1px solid rgba(243, 241, 236, .28); padding: 28px 28px 26px; background: rgba(5, 11, 22, .28); }

.f3-methods__k { font-size: 12px; letter-spacing: .14em; color: var(--f3-silver); margin-bottom: 12px; }

/* Issue #15 — Other Cuvées PC: dedicated team band, one message per panel, readable type ------------------ */

.f3-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .1em; line-height: 1.5; color: var(--f3-silver); }
.f3-meta li::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--f3-french); vertical-align: middle; margin-right: 9px; }

/* Issue #15 — technical-strip keys: EN on one line, JA below (never an orphaned wrap) */
.f3-methods__k span { display: block; margin-top: 4px; font-family: var(--f3-ja-sans); letter-spacing: .06em; font-size: 13px; }

/* "Where to read next" link closing a HOME scene (RUN #22). */
.f3-next { display: inline-block; align-self: flex-start; font-size: 12.5px; letter-spacing: .22em; color: var(--f3-offwhite); border-bottom: 1px solid rgba(243, 241, 236, .5); padding-bottom: 6px; --ja: 14.5px; }
.f3-next .f3-pair { gap: 3px; }
.f3-next .f3-pair__ja { letter-spacing: .1em; opacity: .8; }
.f3-next.is-dark { color: var(--f3-ink); border-bottom-color: var(--f3-ink); }
.f3-next:hover { color: var(--f3-french); border-bottom-color: var(--f3-french); }

/*
 * Bottle normalisation (RUN #22): the four cuvée photographs were shot at different zoom, so the bottles read at different sizes.
 * Measured on the photographs — visible body = capsule top → label bottom, label centre as the shared pivot (all label centres land on
 * 63.2% of the frame, all bodies on COUP DU CHAPEAU's .666 of the frame height). Per-asset scale / offset, aspect ratio untouched.
 */
.f3-photo[class*="is-fit-"] { transform: translateY(var(--fit-y, 0)) scale(var(--fit-s, 1)); transform-origin: 50% var(--fit-oy, 50%); }
.f3-photo.is-fit-sol-beni { --fit-s: 1.116; --fit-oy: 66.05%; --fit-y: -2.85%; }
.f3-photo.is-fit-coup-du-chapeau { --fit-s: 1; --fit-oy: 63.2%; --fit-y: 0%; }
.f3-photo.is-fit-grain-bleu { --fit-s: 1.138; --fit-oy: 64.15%; --fit-y: -.95%; }
.f3-photo.is-fit-extra-time { --fit-s: 1.104; --fit-oy: 66.65%; --fit-y: -3.45%; }

/* 30-sp.css */
/* 6. SP — shared type + the closing conversion block used by the deep pages (flat3_page_end) -------------
 *
 * The HOME's own SP screens live in 51-home-sp.css.
 */

@media (max-width: 899.98px) {
	html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
	.f3-main { --ja: 15px; }

	/* Shared SP type */
	.f3-sp-only .f3-kicker { font-size: 12px; }
	.f3-sp-only .f3-lead { font-size: 19px; font-weight: 300; line-height: 1.35; --ja: 15px; }
	.f3-sp-only .f3-lead .f3-pair { display: flex; gap: 8px; }

	.f3-sp-only .f3-note { max-width: 214px; font-size: 14px; font-weight: 300; line-height: 1.5; --ja: 15px; }
	.f3-sp-only .f3-note .f3-pair { gap: 12px; }
	.f3-sp-only .f3-note .f3-pair__ja { line-height: 2; letter-spacing: .06em; }


	/* SP 15 — Conversion */
	.f3-sp15 { padding-top: 96px; background: var(--f3-night); scroll-snap-align: start; }
	.f3-sp15__head { padding: 0 20px 48px; display: flex; flex-direction: column; gap: 14px; }
	.f3-sp15__title { font-weight: 200; font-size: 15vw; line-height: .92; letter-spacing: -.02em; --ja: 15px; }
	.f3-sp15__title .f3-pair { display: flex; gap: 12px; }
	.f3-sp15__title em { font-style: normal; color: var(--f3-silver); }
	.f3-sp15__panel { display: flex; flex-direction: column; gap: 14px; padding: 32px 20px; color: var(--f3-offwhite); min-height: 44px; }
	.f3-sp15__panel:hover { color: var(--f3-offwhite); }
	.f3-sp15__panel.is-buy { background: var(--f3-samurai); }
	.f3-sp15__panel.is-pro { border-top: 1px solid rgba(243, 241, 236, .2); }
	.f3-sp15__panel > .f3-mono { font-size: 12px; letter-spacing: .14em; color: var(--f3-silver); }
	.f3-sp15__t { font-weight: 200; font-size: 11vw; line-height: .95; letter-spacing: -.015em; --ja: 15px; }
	.f3-sp15__t .f3-pair { gap: 8px; }
	.f3-sp15__s { font-size: 12.5px; letter-spacing: .2em; --ja: 15px; }
	.f3-sp15__s .f3-pair__ja { letter-spacing: .06em; }
	.f3-sp15__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; font-size: 12px; letter-spacing: .14em; color: var(--f3-mist); --ja: 15px; }
	.f3-sp15__tags .f3-pair { gap: 2px; }
	.f3-sp15__go { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .22em; margin-top: 10px; }
	.f3-sp15__go i { flex: 1; height: 1px; background: var(--f3-offwhite); }
}

/* Issue #14 — wine × football, estate team, Les Bleus de la Vigne (SP) */
@media (max-width: 899.98px) {
	.f3-methods__k { font-size: 12px; letter-spacing: .14em; color: var(--f3-silver); margin-bottom: 10px; }

	/* Issue #15 — Other Cuvées SP: one message per snap screen (intro · team · bottle + role · detail) */

	.f3-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; letter-spacing: .08em; line-height: 1.45; color: var(--f3-silver); }
	.f3-meta li::before { content: ''; display: inline-block; width: 12px; height: 1px; background: var(--f3-french); vertical-align: middle; margin-right: 8px; }

}

/* 39-sub.css */
/* 4b. Subpages — /professional/ and /contact/ (Issue #17) ------------------ */
/*
 * Same night / samurai-blue language as HOME, in plain flow (no pinned scenes, so reduced motion needs no variant).
 * PC and SP share markup here; the layout changes at the same 900px breakpoint.
 */

.f3-sub { background: var(--f3-night); color: var(--f3-offwhite); padding-top: 0; }
.f3-sub .f3-pair__en { display: block; }

.f3-sub__hero {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end;
	min-height: 92vh; min-height: 92svh;
	padding: 18vh var(--f3-margin) 9vh;
	background: radial-gradient(120% 80% at 80% 20%, rgba(31, 86, 168, .32), rgba(5, 11, 22, 0) 60%), var(--f3-night);
	overflow: hidden;
}
.f3-sub__hero--plain { min-height: 62vh; min-height: 62svh; grid-template-columns: minmax(0, 1fr); }
.f3-sub__hero-copy { display: flex; flex-direction: column; gap: 4vh; max-width: 62vw; position: relative; z-index: 1; }
.f3-sub__title { font-weight: 200; font-size: clamp(48px, 7.4vw, 128px); line-height: .98; letter-spacing: -.02em; --ja: clamp(15.5px, 1.54vw, 24px); }
.f3-sub__title .f3-pair { gap: 3vh; }
.f3-sub__lead { max-width: 44ch; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.55; font-weight: 300; color: var(--f3-mist); --ja: 14.5px; }
.f3-sub__hero-cta { display: flex; gap: 20px; }
.f3-sub__btn {
	display: inline-flex; align-items: center; gap: 28px;
	padding: 16px 24px; min-height: 52px;
	background: var(--f3-samurai); border: 1px solid rgba(243, 241, 236, .3);
	font-size: 11px; letter-spacing: .22em;
	transition: background .32s var(--f3-ease-panel);
}
.f3-sub__btn:hover { background: var(--f3-french); color: var(--f3-offwhite); }
.f3-sub__btn .f3-pair { gap: 4px; }
.f3-sub__hero-bottle { position: absolute; right: 7vw; bottom: -4vh; height: 86vh; width: 17vw; opacity: .96; }

.f3-sub__block { padding: 14vh var(--f3-margin); border-top: 1px solid rgba(243, 241, 236, .12); display: flex; flex-direction: column; gap: 5vh; }
.f3-sub__h2 { font-weight: 200; font-size: clamp(28px, 3.6vw, 60px); line-height: 1.12; letter-spacing: -.01em; max-width: 24ch; --ja: clamp(14.5px, 1.21vw, 19px); }
.f3-sub__h2 .f3-pair { gap: 2.2vh; }
.f3-sub__note { max-width: 56ch; color: var(--f3-silver); font-size: 13px; --ja: 14.5px; }

.f3-importer__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6vw; align-items: end; }
.f3-importer__name { display: flex; flex-direction: column; gap: 14px; font-weight: 200; font-size: clamp(30px, 3.6vw, 60px); line-height: 1.1; white-space: nowrap; }
.f3-importer__en { font-family: var(--f3-mono); font-weight: 400; font-size: 12px; letter-spacing: .18em; color: var(--f3-silver); text-transform: uppercase; }
.f3-importer__facts { display: grid; gap: 0; margin: 0; }
.f3-importer__facts > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid rgba(243, 241, 236, .2); }
.f3-importer__facts dt { font-size: 10.5px; letter-spacing: .14em; color: var(--f3-silver); padding-top: 4px; }
.f3-importer__facts dd { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 18px; font-weight: 300; --ja: 14.5px; }
.f3-importer__facts dd [lang="en"] { font-size: 12px; letter-spacing: .1em; color: var(--f3-silver); }

.f3-welcome__list, .f3-events__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2vw; font-size: 13px; letter-spacing: .2em; --ja: 13.5px; }
.f3-welcome__list li, .f3-events__list li { border-top: 1px solid rgba(243, 241, 236, .25); padding: 16px 0 28px; }
.f3-welcome__list .f3-pair, .f3-events__list .f3-pair { gap: 8px; }

.f3-formblock { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; background: linear-gradient(180deg, rgba(11, 45, 92, .55), rgba(5, 11, 22, 0) 70%); }
.f3-formblock__head { display: flex; flex-direction: column; gap: 4vh; position: sticky; top: 14vh; }
.f3-formblock__to { font-size: 12px; line-height: 2; letter-spacing: .12em; color: var(--f3-silver); }

.f3-inq { display: flex; flex-direction: column; gap: 5vh; }
.f3-inq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; }
.f3-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.f3-field.is-wide { grid-column: 1 / -1; }
.f3-field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .2em; --ja: 12.5px; }
.f3-field__label .f3-pair { gap: 2px; }
.f3-field__req { color: var(--f3-silver); text-decoration: none; font-family: var(--f3-mono); }
.f3-field__opt { font-family: var(--f3-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--f3-warm); }
.f3-field__control {
	width: 100%; min-height: 52px; padding: 14px 16px;
	font: inherit; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--f3-offwhite);
	background: rgba(243, 241, 236, .04); border: 1px solid rgba(243, 241, 236, .28); border-radius: 0;
	-webkit-appearance: none; appearance: none;
	transition: border-color .24s var(--f3-ease-panel), background .24s var(--f3-ease-panel);
}
select.f3-field__control {
	padding-right: 44px;
	background-image: linear-gradient(45deg, transparent 50%, var(--f3-silver) 50%), linear-gradient(135deg, var(--f3-silver) 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
	background-size: 6px 6px; background-repeat: no-repeat;
}
select.f3-field__control option { color: #07090D; background: #F3F1EC; }
textarea.f3-field__control { resize: vertical; min-height: 160px; }
.f3-field__control:hover { border-color: rgba(243, 241, 236, .5); }
.f3-field__control:focus-visible { outline: 0; border-color: var(--f3-offwhite); background: rgba(243, 241, 236, .08); }
.f3-inq.is-checked .f3-field__control:invalid { border-color: #E0867A; }
.f3-inq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f3-inq__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
.f3-inq__submit {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
	min-height: 56px; padding: 14px 26px; min-width: 260px;
	background: var(--f3-offwhite); color: var(--f3-ink);
	font-size: 11px; letter-spacing: .24em;
	transition: background .32s var(--f3-ease-panel), color .32s var(--f3-ease-panel);
}
.f3-inq__submit .f3-pair { gap: 4px; }
.f3-inq__submit .f3-pair__ja { color: #4a4f57; }
.f3-inq__submit:hover { background: var(--f3-french); color: #fff; }
.f3-inq__submit:hover .f3-pair__ja { color: #dbe6f7; }
.f3-inq__note { flex: 1 1 260px; max-width: 46ch; font-size: 12px; letter-spacing: .08em; color: var(--f3-silver); --ja: 13.5px; }
.f3-inq__status { padding: 16px 18px; border: 1px solid rgba(243, 241, 236, .35); font-size: 13px; --ja: 13.5px; }
.f3-inq__status[hidden] { display: none; }
.f3-inq__status.is-ok { border-color: #8FC5A0; }
.f3-inq__status.is-ng { border-color: #E0867A; }
.f3-inq__status .f3-pair { gap: 4px; }

.f3-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 0; padding-bottom: 0; border-top: 1px solid rgba(243, 241, 236, .25); }
.f3-routes__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 6vh var(--f3-margin) 7vh; margin: 0 calc(var(--f3-margin) * -1); font-size: clamp(16px, 1.6vw, 24px); font-weight: 200; transition: background .32s var(--f3-ease-panel); }
.f3-routes__item:first-child { border-right: 1px solid rgba(243, 241, 236, .25); margin-right: 0; }
.f3-routes__item:last-child { margin-left: 0; }
.f3-routes__item:hover { background: var(--f3-samurai); color: var(--f3-offwhite); }
.f3-routes__item .f3-mono { font-size: 10.5px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-routes__go { position: absolute; right: var(--f3-margin); top: 6vh; font-size: 20px; }

.f3-menu__contact { display: block; padding: 14px 0 6px; font-size: 11px; letter-spacing: .2em; color: var(--f3-silver); }

@media (max-width: 899.98px) {
	.f3-sub__hero { grid-template-columns: minmax(0, 1fr); min-height: 78vh; min-height: 78svh; padding: 120px 20px 56px; }
	.f3-sub__hero--plain { min-height: 56svh; }
	.f3-sub__hero-copy { max-width: none; gap: 28px; }
	.f3-sub__title { font-size: clamp(44px, 13vw, 64px); }
	.f3-sub__title .f3-pair { gap: 16px; }
	.f3-sub__lead { font-size: 15px; }
	.f3-sub__btn { width: 100%; justify-content: space-between; }
	.f3-sub__block { padding: 64px 20px; gap: 30px; }
	.f3-sub__h2 { font-size: clamp(26px, 7.4vw, 34px); max-width: none; }
	.f3-sub__h2 .f3-pair { gap: 12px; }
	.f3-importer__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.f3-importer__name { font-size: clamp(26px, 8.4vw, 40px); }
	.f3-importer__facts > div { grid-template-columns: 1fr; gap: 6px; }
	.f3-welcome__list, .f3-events__list { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
	.f3-welcome__list li, .f3-events__list li { padding: 14px 0 18px; }
	.f3-formblock { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.f3-formblock__head { position: static; gap: 20px; }
	.f3-inq { gap: 32px; }
	.f3-inq__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.f3-inq__submit { width: 100%; }
	.f3-routes { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.f3-routes__item, .f3-routes__item:first-child, .f3-routes__item:last-child { margin: 0; padding: 36px 20px 40px; border-right: 0; border-bottom: 1px solid rgba(243, 241, 236, .2); }
	.f3-routes__go { right: 20px; top: 36px; }
}

/* 40-pages.css */
/* 10. Editorial pages (RUN #16) — estate, winemaking, terroir, wines, wine detail, FLAT3, Philippe, Wine × Football, Journal, Professional.
 *
 * One responsive markup per page: PC is a wide editorial grid, SP stacks into full-width screens (one message each).
 * Type floors: body ≥ 16px, Japanese ≥ 14px, mono labels ≥ 12px.
 */

.f3-pg { display: block; background: var(--f3-night); }

/* Tones ------------------------------------------------------------------- */
.f3-sec { position: relative; color: var(--f3-offwhite); background: var(--f3-night); }
.f3-sec.is-blue { background: var(--f3-samurai); }
.f3-sec.is-light { background: var(--f3-offwhite); color: var(--f3-ink); --f3-ja-ink: #4B5560; }
.f3-sec.is-light .f3-kicker, .f3-sec.is-light .f3-mono, .f3-sec.is-light figcaption { color: #5A6470; }
.f3-sec.is-light a:hover { color: var(--f3-ink); }
.f3-sec.is-light .f3-textlink { border-bottom-color: var(--f3-ink); }
.f3-sec.is-light .f3-meta { color: #3A434D; }
.f3-sec.is-blue .f3-pair__ja, .f3-sec.is-night .f3-pair__ja { color: var(--f3-silver); }
.f3-sec__in { width: 100%; max-width: 1440px; margin: 0 auto; padding: 14vh var(--f3-margin); display: flex; flex-direction: column; gap: 48px; }
.f3-center { align-items: center; text-align: center; }
.f3-pg .f3-pair { align-items: flex-start; }
.f3-center .f3-pair { align-items: center; }

/* Page hero ---------------------------------------------------------------- */
.f3-ph { position: relative; min-height: 82vh; display: flex; align-items: flex-end; color: var(--f3-offwhite); background: var(--f3-night); overflow: hidden; isolation: isolate; }
.f3-ph.is-blue { background: var(--f3-samurai); }
.f3-ph.is-lg { min-height: 64vh; }
.f3-ph.has-img { min-height: 92vh; }
.f3-ph__img { position: absolute; inset: 0; z-index: -2; }
.f3-ph__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f3-ph.has-img::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 11, 22, .55) 0%, rgba(5, 11, 22, .2) 38%, rgba(5, 11, 22, .86) 100%); }
.f3-ph.is-blue.has-img::after { background: linear-gradient(180deg, rgba(11, 45, 92, .6) 0%, rgba(11, 45, 92, .25) 38%, rgba(5, 11, 22, .88) 100%); }
.f3-ph__in { width: 100%; max-width: 1440px; margin: 0 auto; padding: 160px var(--f3-margin) 9vh; display: flex; flex-direction: column; gap: 22px; }
.f3-ph__t { font-weight: 200; font-size: clamp(44px, 7.4vw, 124px); line-height: .96; letter-spacing: -.015em; --ja: clamp(17.5px, 1.65vw, 26px); }
.f3-ph.is-lg .f3-ph__t { font-size: clamp(40px, 6vw, 100px); }
.f3-ph__t .f3-pair { gap: .3em; }
.f3-ph__lead { font-weight: 300; font-size: clamp(18px, 1.55vw, 26px); line-height: 1.4; max-width: 760px; --ja: clamp(16px, 1.16vw, 19px); }
.f3-ph__lead .f3-pair__ja { line-height: 1.8; }

/* Section heads / shared copy ------------------------------------------------- */
.f3-sh { display: flex; flex-direction: column; gap: 14px; }
.f3-sh__t { font-weight: 200; font-size: clamp(30px, 3.6vw, 60px); line-height: 1.05; letter-spacing: -.01em; --ja: clamp(16.5px, 1.21vw, 20px); display: flex; align-items: center; gap: 18px; }
.f3-sh__t.is-big { font-size: clamp(44px, 6vw, 96px); }
.f3-swatch { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(243, 241, 236, .35); }
.f3-pg .f3-copy { font-weight: 300; font-size: 17px; line-height: 1.8; letter-spacing: .01em; max-width: 620px; --ja: 16px; }
.f3-pg .f3-copy .f3-pair__ja { line-height: 1.95; letter-spacing: .05em; }
.f3-pg .f3-lead { font-size: clamp(20px, 1.8vw, 30px); line-height: 1.35; max-width: 680px; --ja: 16.5px; }
.f3-pg .f3-meta { font-size: 13px; }
.f3-pg .f3-meta li { overflow-wrap: anywhere; }
.f3-methods__k { font-size: 12.5px; letter-spacing: .14em; color: var(--f3-silver); margin-bottom: 6px; }
.f3-note-s { font-size: 14px; line-height: 1.7; color: var(--f3-silver); max-width: 560px; --ja: 15px; }
.f3-sec.is-light .f3-note-s { color: #4B5560; }
.f3-note { padding: 14px 16px; border: 1px dashed rgba(243, 241, 236, .3); font-size: 12.5px; letter-spacing: .06em; line-height: 1.7; color: var(--f3-silver); max-width: 640px; }
.f3-list { display: flex; flex-direction: column; gap: 14px; font-size: 17px; font-weight: 300; --ja: 15.5px; }
.f3-list li { padding-left: 22px; position: relative; }
.f3-list li::before { content: ''; position: absolute; left: 0; top: .85em; width: 12px; height: 1px; background: var(--f3-french); }
.f3-links { display: flex; flex-wrap: wrap; gap: 18px 36px; font-size: 13px; letter-spacing: .18em; padding-top: 6px; }
.f3-links .f3-textlink { display: inline-flex; padding-bottom: 8px; }
.f3-links .f3-pair { gap: 4px; }

/* Layout ------------------------------------------------------------------ */
.f3-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center; }
.f3-split.is-flip > :first-child { order: 2; }
.f3-split__t { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.f3-split__f { display: flex; justify-content: center; }
.f3-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.f3-fig img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.f3-fig.is-wide img { aspect-ratio: 16 / 10; }
.f3-fig figcaption { font-size: 12px; letter-spacing: .14em; color: var(--f3-silver); }
.f3-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f3-duo .f3-fig img { aspect-ratio: 3 / 4; }
.f3-trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.f3-trip .f3-fig img { aspect-ratio: 4 / 3; }

/* Facts / table / blend ------------------------------------------------------- */
.f3-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid rgba(243, 241, 236, .22); }
.f3-sec.is-light .f3-facts { border-top-color: rgba(7, 9, 13, .25); }
.f3-facts > div { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.f3-facts dt { font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-facts dt .f3-pair { flex-direction: row; gap: .9em; align-items: baseline; }
.f3-facts dt .f3-pair__ja { font-size: 14px; letter-spacing: .1em; }
.f3-facts dd { font-size: clamp(17px, 1.5vw, 24px); font-weight: 300; letter-spacing: .04em; overflow-wrap: anywhere; }
.f3-tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.f3-tbl th, .f3-tbl td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid rgba(243, 241, 236, .16); font-weight: 300; }
.f3-tbl thead th { font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-tbl td { font-size: 13px; letter-spacing: .1em; color: var(--f3-silver); }
.f3-tbl a { border-bottom: 1px solid rgba(243, 241, 236, .4); }
.f3-blend { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.f3-blend__bar { display: flex; gap: 4px; height: 14px; }
.f3-blend__bar span { background: var(--f3-french); min-width: 4px; }
.f3-blend__bar span.is-2 { background: var(--f3-offwhite); }
.f3-sec.is-light .f3-blend__bar span.is-2 { background: var(--f3-ink); }
.f3-blend__lg { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.f3-blend__lg li { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.f3-blend__lg b { font-weight: 200; font-size: clamp(34px, 3.4vw, 56px); line-height: 1; }
.f3-blend__lg i { font-style: normal; font-size: 13px; letter-spacing: .14em; }
.f3-blend__lg em { font-style: normal; font-family: var(--f3-ja-sans); font-size: 14px; letter-spacing: .1em; color: var(--f3-silver); }
.f3-sec.is-light .f3-blend__lg em { color: #4B5560; }

/* Buttons / next ---------------------------------------------------------------- */
.f3-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 10px 22px; border: 1px solid rgba(243, 241, 236, .5); font-size: 13px; letter-spacing: .2em; transition: background .3s var(--f3-ease-panel), color .3s var(--f3-ease-panel); }
.f3-btn:hover { background: var(--f3-offwhite); color: var(--f3-samurai); }
.f3-btn.is-buy { background: var(--f3-french); border-color: var(--f3-french); }
.f3-btn.is-buy:hover { background: var(--f3-offwhite); border-color: var(--f3-offwhite); }
.f3-btn .f3-pair { gap: 3px; }
.f3-btn .f3-pair__ja { font-size: 13.5px; letter-spacing: .08em; color: inherit; opacity: .8; }
.f3-next { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.f3-next__n { font-weight: 200; font-size: clamp(32px, 5vw, 80px); line-height: 1; letter-spacing: -.01em; }
.f3-next [lang='ja'] { font-family: var(--f3-ja-sans); font-size: 15px; letter-spacing: .14em; color: var(--f3-silver); }

/* Wine header (detail pages) ------------------------------------------------------ */
.f3-role { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.f3-role__n { font-weight: 300; font-size: clamp(20px, 1.9vw, 30px); letter-spacing: .06em; line-height: 1.25; --ja: 16.5px; }

/* FLAT3 hero ------------------------------------------------------------------ */

/* Wine cards ------------------------------------------------------------------- */
.f3-wcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.f3-wc { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.f3-wc__img { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0A111C; }
.f3-wc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--f3-ease-expo); }
.f3-wc:hover .f3-wc__img img { transform: scale(1.03); }
.f3-wc__img.is-pending { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(243, 241, 236, .16); }
.f3-wc__img.is-pending span { font-size: 12px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-wc__b { display: flex; flex-direction: column; gap: 8px; }
.f3-wc__by { font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-wc__n { font-weight: 300; font-size: clamp(22px, 2vw, 32px); letter-spacing: .04em; line-height: 1.1; }
.f3-wc__j { font-family: var(--f3-ja-sans); font-size: 14px; letter-spacing: .12em; color: var(--f3-silver); }
.f3-wc__m { font-size: 12px; letter-spacing: .1em; line-height: 1.6; color: var(--f3-silver); }
.f3-wc__fb { font-size: 14px; letter-spacing: .1em; padding-top: 4px; --ja: 15px; }
.f3-sec.is-light .f3-wc__by, .f3-sec.is-light .f3-wc__j, .f3-sec.is-light .f3-wc__m { color: #4B5560; }

/* Team / steps / aims ---------------------------------------------------------------- */
.f3-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(243, 241, 236, .22); }
.f3-trio__c { padding: 28px 28px 28px 0; display: flex; flex-direction: column; gap: 14px; }
.f3-trio__c + .f3-trio__c { padding-left: 28px; border-left: 1px solid rgba(243, 241, 236, .16); }
.f3-trio__c .f3-mono { font-size: 12.5px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-trio__h { font-weight: 300; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .08em; --ja: 15.5px; }
.f3-trio__c.is-lead .f3-mono { color: var(--f3-french); filter: brightness(1.8); }
.f3-person { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; align-items: center; padding-top: 24px; }
.f3-person .f3-fig img { aspect-ratio: 16 / 11; }
.f3-person__t { display: flex; flex-direction: column; gap: 14px; }
.f3-person__n { font-weight: 200; font-size: clamp(30px, 3.4vw, 56px); line-height: 1; letter-spacing: .02em; }
.f3-person__r { font-size: 13px; letter-spacing: .18em; color: var(--f3-silver); }
.f3-person__j { font-family: var(--f3-ja-sans); font-size: 15px; line-height: 1.8; letter-spacing: .1em; color: var(--f3-silver); }
.f3-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; counter-reset: s; }
.f3-steps li { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid rgba(7, 9, 13, .25); }
.f3-steps .f3-mono { font-size: 12.5px; letter-spacing: .14em; }
.f3-steps__h { font-weight: 400; font-size: 17px; letter-spacing: .1em; --ja: 15.5px; }
.f3-steps__d { font-weight: 300; font-size: 16px; line-height: 1.6; --ja: 15.5px; }
.f3-steps__d .f3-pair__ja { color: #4B5560; }
.f3-pair-box { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-top: 1px solid rgba(243, 241, 236, .25); }
.f3-aims { display: flex; flex-wrap: wrap; gap: 18px 56px; font-weight: 200; font-size: clamp(22px, 2.4vw, 40px); letter-spacing: .02em; --ja: 15.5px; }

/* Journal grid ---------------------------------------------------------------------- */
.f3-jg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.f3-jg .f3-entry { flex: none; padding-top: 0; }
.f3-jg .f3-entry a { color: var(--f3-offwhite); gap: 14px; }
.f3-jg .f3-entry__img { aspect-ratio: 16 / 10; }
.f3-jg .f3-entry__img img { height: 100%; }
.f3-jg .f3-entry__meta { color: var(--f3-silver); }
.f3-jg .f3-entry__title { font-size: 16px; line-height: 1.6; }

/* THE LINEUP — wine composition 3-4-3 (editorial board, not a pitch) ---------------------- */
.f3-split.is-fig { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.f3-split.is-fig .f3-split__f { padding-top: 12px; }
.f3-split__f .f3-fig, figure.f3-split__f { margin: 0; }
.f3-vision { gap: 20px; }

/* Header nav: 7 destinations fit at 1440 */
.f3-header__nav { gap: clamp(14px, 1.7vw, 30px); font-size: 12px; letter-spacing: .16em; }
.f3-header__nav a[aria-current='page'] { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* SP ----------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	.f3-sec__in { padding: 64px 20px; gap: 32px; }
	.f3-ph, .f3-ph.has-img { min-height: var(--f3-svh); }
	.f3-ph.is-lg { min-height: 72svh; }
	.f3-ph__in { padding: 112px 20px 56px; gap: 18px; }
	.f3-ph__t { font-size: clamp(38px, 11.5vw, 56px); --ja: 16.5px; }
	.f3-ph__lead { font-size: 18px; --ja: 15.5px; }
	.f3-sh__t { font-size: clamp(28px, 8.4vw, 38px); --ja: 16px; }
	.f3-sh__t.is-big { font-size: clamp(38px, 12vw, 52px); }
	.f3-pg .f3-copy { font-size: 16px; }
	.f3-pg .f3-lead { font-size: 20px; }
	.f3-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.f3-split.is-fig { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
	.f3-split.is-fig > .f3-split__t { display: contents; }
	.f3-split.is-fig .f3-split__f { order: 1; }
	.f3-split.is-fig .f3-roles { order: 2; }
	.f3-split.is-fig .f3-note-s { order: 3; }
	.f3-lineup .f3-sh__t { font-size: 23px; line-height: 1.2; }
	.f3-split.is-flip > :first-child { order: 0; }
	.f3-duo { grid-template-columns: 1fr 1fr; gap: 12px; }
	.f3-trip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.f3-trip .f3-fig img { aspect-ratio: 16 / 10; }
	.f3-fig img { aspect-ratio: 4 / 4.6; }
	.f3-facts { grid-template-columns: 1fr 1fr; }
	.f3-facts > div { padding: 18px 12px 18px 0; }
	.f3-facts dd { font-size: 16px; }
	.f3-blend__lg { gap: 12px 28px; }
	.f3-blend__lg b { font-size: 34px; }
	.f3-wcs { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
	.f3-wcs::-webkit-scrollbar { display: none; }
	.f3-wcs .f3-wc { flex: 0 0 74vw; scroll-snap-align: start; }
	.f3-wcs.is-feature { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; gap: 36px; }
	.f3-wcs.is-feature .f3-wc { flex: none; }
	.f3-trio { grid-template-columns: minmax(0, 1fr); }
	.f3-trio__c, .f3-trio__c + .f3-trio__c { padding: 22px 0; border-left: 0; border-bottom: 1px solid rgba(243, 241, 236, .16); }
	.f3-person { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.f3-steps { grid-template-columns: minmax(0, 1fr); }
	.f3-aims { gap: 14px 28px; font-size: 24px; }
	.f3-life { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.f3-life__no { font-size: 64px; }
	.f3-jg { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.f3-links { gap: 14px 28px; }
	.f3-tbl th, .f3-tbl td { padding: 14px 8px 14px 0; }
}

/* Reduced motion / no JS: nothing here depends on motion. */

/* HOME gateway scenes (team, wine × football) ----------------------------------------- */
.f3-hs { position: relative; background: var(--f3-night); color: var(--f3-offwhite); }
.f3-hs--football { background: var(--f3-samurai); }
.f3-hs__in { max-width: 1440px; margin: 0 auto; padding: 14vh var(--f3-margin); min-height: 100vh; }
.f3-hs__fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.f3-hs__fig img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.f3-hs__fig figcaption { font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-hs__by { font-size: 12.5px; letter-spacing: .2em; color: var(--f3-silver); }
.f3-person__n.is-sm { font-size: clamp(24px, 2.4vw, 38px); }
.f3-hs .f3-sh__t.is-sm { font-size: clamp(32px, 9vw, 40px); }
@media (max-width: 899.98px) {
	.f3-hs--team, .f3-hs--football { min-height: var(--f3-svh); display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 76px 20px 96px; }
	.f3-hs--team .f3-hs__fig img { aspect-ratio: 4 / 3.4; }
	.f3-hs__t { display: flex; flex-direction: column; gap: 18px; }
	.f3-hs__f { margin: 0; }
}

.f3-wc.is-hero .f3-wc__n { color: #fff; }
.f3-wc.is-hero .f3-wc__by { color: var(--f3-french); filter: brightness(1.6); }
@media (min-width: 1100px) {
	.f3-wcs.is-feature { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
	.f3-wcs.is-feature .f3-wc__n { font-size: clamp(17px, 1.6vw, 26px); }
	.f3-wcs.is-feature .f3-wc__m { font-size: 12px; letter-spacing: .02em; }
}

/* /privacy-policy/ (RUN #35) — a short, calm document page. -------------------------------------------- */
.f3-pp { background: var(--f3-night); color: var(--f3-offwhite); }
.f3-pp__head { padding: clamp(140px, 22vh, 220px) var(--f3-margin) clamp(40px, 7vh, 72px); display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.f3-pp__t { margin: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 200; }
.f3-pp__te { font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.02em; }
.f3-pp__tj { font-size: clamp(16px, 1.5vw, 22px); font-weight: 300; letter-spacing: .1em; color: var(--f3-silver); }
.f3-pp__lead { margin: 0; font-family: var(--f3-ja-sans); font-size: 15px; line-height: 2; color: var(--f3-mist); }
.f3-pp__body { padding: 0 var(--f3-margin) clamp(72px, 12vh, 140px); max-width: 1100px; }
.f3-pp__s { padding: 28px 0; border-top: 1px solid rgba(243, 241, 236, .16); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 40px; }
.f3-pp__h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-weight: 400; font-size: 17px; letter-spacing: .04em; }
.f3-pp__h .f3-mono { font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-pp__h i { font-style: normal; font-size: 11.5px; letter-spacing: .14em; color: var(--f3-warm); flex-basis: 100%; padding-left: 0; }
.f3-pp__s p { margin: 0; font-family: var(--f3-ja-sans); font-size: 14.5px; line-height: 2.05; letter-spacing: .03em; color: rgba(243, 241, 236, .84); }
.f3-pp__s p a { border-bottom: 1px solid currentColor; }
.f3-pp__s p a:hover, .f3-pp__s p a:focus-visible { color: #fff; border-bottom-color: var(--f3-french); }
.f3-pp__back { margin: 32px 0 0; font-size: 12.5px; letter-spacing: .2em; }
@media (max-width: 899.98px) {
	.f3-pp__head { padding-top: 120px; gap: 14px; }
	.f3-pp__s { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
}

/* 41-journal.css */
/* 4c. Journal — HOME module, archive, single post (Issue #18) ---------------------
 *
 * Same brand system as HOME (French editorial × Samurai/French Blue × cinematic wine), different editorial purpose.
 * One markup per page, two layouts: PC ≥ 900px is asymmetric and image-led; SP < 900px is one strong image + title per story.
 */

/* Sub-pages show the SP CTA bar from the first screen (HOME reveals it from screen 02). */
@media (max-width: 899.98px) {
	.f3-subpage .f3-ctabar { opacity: 1; visibility: visible; transform: none; }
}

/* Story — the shared JOURNAL entry (HOME module + archive) --------------------------------------------- */

.f3-story { min-width: 0; --ar: 4 / 5; --ja-ink: #55524c; }
.f3-story__link { display: flex; flex-direction: column; gap: clamp(14px, 1.2vw, 22px); color: inherit; }
.f3-story__link:hover { color: inherit; }
.f3-story__img { display: block; overflow: hidden; background: #d9d6cf; aspect-ratio: var(--ar); }
.f3-story__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--f3-ease-expo); }
.f3-story__link:hover .f3-story__img img { transform: scale(1.035); }
.f3-story__body { display: flex; flex-direction: column; gap: 10px; }
.f3-story__meta { display: flex; align-items: baseline; gap: 14px; font-size: 12.5px; letter-spacing: .14em; color: var(--f3-warm); }
.f3-story__cat { color: var(--f3-samurai); letter-spacing: .08em; }
.f3-story__cat::before { content: ''; display: inline-block; width: 18px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--f3-french); }
.f3-story__title {
	margin: 0;
	font-family: var(--f3-ja-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 23px);
	line-height: 1.5;
	letter-spacing: .02em;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.f3-story__excerpt { font-family: var(--f3-ja-sans); font-weight: 300; font-size: 14px; line-height: 1.9; letter-spacing: .04em; color: #55524c; }
.f3-story__more { padding-top: 6px; font-size: 12.5px; letter-spacing: .24em; color: var(--f3-samurai); }
.f3-story.is-lead { --ar: 4 / 3; }
.f3-story.is-wide { --ar: 16 / 10; }
.f3-story.is-tall { --ar: 4 / 5; }
.f3-story.is-square { --ar: 1 / 1; }
.f3-story.is-lead .f3-story__title { font-size: clamp(20px, 2vw, 36px); line-height: 1.4; -webkit-line-clamp: 5; }

/* HOME §08 — lead story + staggered supporting stories (PC) ---------------------------------------------- */

.f3-journal__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: start; padding: 9vh var(--f3-margin) 0; }
.f3-journal__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vh 2.2vw; align-items: start; }
.f3-journal__side > .f3-story.is-wide { grid-column: 1 / -1; }
.f3-journal__side > .f3-story.is-tall:last-child { margin-top: 7vh; }
.f3-journal__side.has-1 > .f3-story, .f3-journal__side.has-2 > .f3-story:last-child { margin-top: 0; }
.f3-journal__side .f3-story__title { font-size: clamp(15px, 1.1vw, 20px); }

/* HOME §13 (SP) — one strong image + title per story ---------------------------------------------------- */

@media (max-width: 899.98px) {
	.f3-sp14__list { display: flex; flex-direction: column; gap: 44px; }
	.f3-sp14 .f3-story__link { gap: 14px; }
	.f3-sp14 .f3-story__title { font-size: 17px; line-height: 1.5; -webkit-line-clamp: 4; }
	.f3-sp14 .f3-story.is-lead .f3-story__title { font-size: 20px; }
	.f3-sp14 .f3-story.is-lead { --ar: 4 / 5; }
	.f3-sp14 .f3-story.is-wide { --ar: 16 / 11; }
	.f3-sp14 .f3-story.is-tall { --ar: 1 / 1; }
}

/* HOME journal tile: SOURCE_IMAGE_PENDING (the archive / article now use 49-deep-journal.css). */
.f3-story__img.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient(135deg, #0d1422 0 10px, #111a2b 10px 20px); color: var(--f3-silver); text-align: center; padding: 8px; }
.f3-story__img.is-pending .f3-mono { font-size: 12px; letter-spacing: .1em; }
.f3-story__img.is-pending .f3-mono.is-sub { font-size: 12px; color: #7a8290; letter-spacing: 0; overflow-wrap: anywhere; }

/* 42-pro-visual.css */
/* 4d. PROFESSIONAL — photographic layer on the Issue #17 page (Issue #18) ------------------------------
 *
 * Same sections, copy and form routing as #17; adds real photography, asymmetric editorial blocks and the
 * underline-field form styling. Real supplied photographs only (docs/PHOTO_ASSET_MAP.md, RUN #18).
 */

.f3-sub__hero--photo { display: flex; align-items: flex-end; min-height: max(100vh, 640px); min-height: max(var(--f3-svh), 640px); padding: 0; background: var(--f3-night); }
.f3-sub__hero-img { position: absolute; inset: 0; }
.f3-sub__hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-sub__hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 11, 22, .9) 0%, rgba(5, 11, 22, .62) 42%, rgba(5, 11, 22, .08) 100%), linear-gradient(0deg, rgba(5, 11, 22, .75) 0%, rgba(5, 11, 22, 0) 38%); }
html.f3-motion .f3-sub__hero-img img { animation: f3-pro-settle 2.4s var(--f3-ease-expo) both; }
@keyframes f3-pro-settle { from { transform: scale(1.06); opacity: .6; } }
.f3-sub__hero--photo .f3-sub__hero-copy { max-width: none; width: 100%; padding: 0 var(--f3-margin) 11vh; }
.f3-sub__hero--photo .f3-sub__title { font-size: 8.4vw; line-height: .92; }
.f3-sub__hero--photo .f3-sub__title .f3-pair { display: flex; }
.f3-sub__hero--photo .f3-sub__title .f3-pair__ja { color: var(--f3-offwhite); letter-spacing: .12em; font-weight: 300; }
.f3-sub__hero--photo .f3-sub__lead { max-width: 36em; font-size: clamp(15px, 1.15vw, 19px); --ja: clamp(15.5px, 1.04vw, 18px); }
.f3-sub__hero--photo .f3-sub__lead .f3-pair__ja { color: var(--f3-silver); line-height: 1.9; letter-spacing: .06em; }
.f3-sub__hero--photo .f3-sub__hero-cta { flex-wrap: wrap; align-items: center; gap: 28px 36px; }
.f3-sub__hero--photo .f3-textlink { font-size: 12.5px; letter-spacing: .2em; }
.f3-sub__btn .f3-pair__ja { font-size: 14px; letter-spacing: .1em; opacity: .8; }
.f3-sub__scroll { position: absolute; right: var(--f3-margin); bottom: 4vh; font-size: 12px; letter-spacing: .24em; color: var(--f3-silver); writing-mode: vertical-rl; }

.f3-pro-copy { max-width: 36em; font-size: clamp(15px, 1.05vw, 17px); font-weight: 300; line-height: 1.75; --ja: clamp(15.5px, 1.04vw, 18px); }
.f3-pro-copy .f3-pair__ja { line-height: 1.95; letter-spacing: .06em; }
.f3-sub .f3-kicker .f3-pair { flex-direction: column; align-items: flex-start; gap: 6px; }
.f3-sub .f3-kicker .f3-pair__ja { letter-spacing: .1em; }

/* Split blocks: text one side, asymmetric photographs the other */
.f3-pro-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-items: center; padding: 17vh var(--f3-margin); }
.f3-pro-split__text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 3.4vh; }
.f3-pro-split__media { grid-column: 7 / -1; position: relative; margin-bottom: 6%; }
.f3-pro-ph { display: block; overflow: hidden; background: #0C1626; }
.f3-pro-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-pro-ph.is-main { aspect-ratio: 4 / 3; width: 86%; }
.f3-pro-ph.is-inset { position: absolute; right: 0; bottom: -9%; width: 40%; aspect-ratio: 1 / 1; border: 6px solid var(--f3-night); box-sizing: content-box; }
.f3-pro-split .f3-sub__h2 { font-size: clamp(28px, 3.3vw, 56px); }
.f3-pro-split .f3-welcome__list, .f3-pro-split .f3-events__list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; font-size: 13px; }
.f3-pro-split .f3-welcome__list li, .f3-pro-split .f3-events__list li { padding: 12px 0 14px; }

.f3-pro-split.is-flip .f3-pro-split__media { grid-column: 1 / span 7; grid-row: 1; }
.f3-pro-split.is-flip .f3-pro-split__text { grid-column: 9 / -1; grid-row: 1; }
.f3-pro-split.is-flip .f3-pro-ph.is-main { width: 100%; aspect-ratio: 16 / 10; }
.f3-pro-split.is-flip .f3-pro-ph.is-inset { left: 5%; right: auto; width: 26%; bottom: -12%; }

/* Light block (events) */
.f3-pro-split.is-light { background: var(--f3-offwhite); color: var(--f3-ink); --f3-ja-ink: #55524c; border-top: 0; }
.f3-pro-split.is-light .f3-kicker { color: var(--f3-warm); }
.f3-pro-split.is-light .f3-pair__ja { color: #55524c; }
.f3-pro-split.is-light .f3-sub__h2 .f3-pair__ja { color: var(--f3-samurai); }
.f3-pro-split.is-light .f3-sub__note { color: #55524c; }
.f3-pro-split.is-light .f3-events__list li { border-top-color: rgba(7, 9, 13, .25); }
.f3-pro-split.is-light .f3-pro-ph { background: #d9d6cf; }
.f3-pro-split.is-light .f3-pro-ph.is-inset { border-color: var(--f3-offwhite); }

/* Direct support: samurai-blue panel */
.f3-pro-support { background: var(--f3-samurai); border-top: 0; padding: 14vh var(--f3-margin); }
.f3-pro-support .f3-kicker { color: rgba(243, 241, 236, .78); }
.f3-pro-support .f3-importer__facts > div { border-top-color: rgba(243, 241, 236, .35); }
.f3-pro-support .f3-importer__facts dt, .f3-pro-support .f3-importer__en { color: rgba(243, 241, 236, .72); font-size: 12px; }
.f3-pro-support .f3-importer__facts dd [lang="en"] { font-size: 12px; color: rgba(243, 241, 236, .72); }
.f3-pro-support .f3-pair__ja { color: rgba(243, 241, 236, .78); }

/* Reading layer: nothing under 12px */
.f3-sub .f3-kicker, .f3-sub__btn, .f3-importer__facts dt, .f3-routes__item .f3-mono, .f3-formblock__to, .f3-inq__note, .f3-inq__status, .f3-welcome__list, .f3-events__list { font-size: max(12px, 1em); }
.f3-importer__facts dt, .f3-routes__item .f3-mono { font-size: 12px; }
.f3-sub__btn, .f3-inq__submit { font-size: 12.5px; }
.f3-welcome__list, .f3-events__list { --ja: 14.5px; }
.f3-welcome__list .f3-pair__ja, .f3-events__list .f3-pair__ja, .f3-field__label .f3-pair__ja, .f3-inq__note .f3-pair__ja, .f3-inq__status .f3-pair__ja { font-size: 12.5px; }

/* Form: clean underline fields, French Blue focus, clear submit */
.f3-formblock { background: var(--f3-night); }
.f3-field__label { font-size: 12px; --ja: 13.5px; }
.f3-field__opt { font-size: 12px; }
.f3-field__control { background: transparent; border: 0; border-bottom: 1px solid rgba(243, 241, 236, .38); padding: 12px 0 14px; min-height: 52px; font-weight: 300; }
.f3-field__control:hover { border-bottom-color: rgba(243, 241, 236, .7); background: transparent; }
.f3-field__control:focus-visible { outline: 0; background: transparent; border-bottom-color: var(--f3-french); box-shadow: 0 1px 0 0 var(--f3-french); }
select.f3-field__control { background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; padding-right: 30px; }
textarea.f3-field__control { border: 1px solid rgba(243, 241, 236, .38); padding: 14px 16px; }
textarea.f3-field__control:focus-visible { box-shadow: 0 0 0 1px var(--f3-french); border-color: var(--f3-french); }
.f3-inq__submit { background: var(--f3-samurai); color: var(--f3-offwhite); border: 1px solid rgba(243, 241, 236, .35); font-size: 12.5px; }
.f3-inq__submit .f3-pair__ja { color: rgba(243, 241, 236, .8); font-size: 14px; }
.f3-inq__submit:hover { background: var(--f3-french); border-color: var(--f3-french); }
.f3-inq__submit:hover .f3-pair__ja { color: #fff; }

@media (max-width: 899.98px) {
	.f3-sub__hero--photo { min-height: max(var(--f3-svh), 640px); padding: 0; }
	.f3-sub__hero-img img { object-position: 66% 50% !important; }
	.f3-sub__hero-img::after { background: linear-gradient(0deg, rgba(5, 11, 22, .94) 0%, rgba(5, 11, 22, .7) 46%, rgba(5, 11, 22, .15) 100%); }
	.f3-sub__hero--photo .f3-sub__hero-copy { padding: 0 20px calc(92px + env(safe-area-inset-bottom, 0px)); gap: 20px; }
	.f3-sub__hero--photo .f3-sub__title { font-size: 10.4vw; --ja: 16.5px; }
	.f3-sub__hero--photo .f3-sub__lead { font-size: 15px; --ja: 15px; }
	.f3-sub__hero--photo .f3-sub__hero-cta { flex-direction: column; align-items: stretch; gap: 20px; }
	.f3-sub__hero--photo .f3-textlink { align-self: flex-start; }
	.f3-pro-split, .f3-pro-support { display: flex; flex-direction: column; align-items: stretch; gap: 44px; padding: 76px 20px; }
	.f3-pro-split__text { gap: 20px; }
	.f3-pro-split .f3-sub__h2 { font-size: clamp(26px, 7.4vw, 34px); }
	.f3-pro-split .f3-welcome__list, .f3-pro-split .f3-events__list { font-size: 12.5px; gap: 0 14px; }
	.f3-pro-split__media, .f3-pro-split.is-flip .f3-pro-split__media { margin: 0 0 8%; order: 2; }
	.f3-pro-split__text, .f3-pro-split.is-flip .f3-pro-split__text { order: 1; }
	.f3-pro-ph.is-main { width: 88%; aspect-ratio: 4 / 3.4; }
	.f3-pro-split.is-flip .f3-pro-ph.is-main { width: 100%; aspect-ratio: 4 / 3; }
	.f3-pro-ph.is-inset { width: 38%; border-width: 5px; bottom: -8%; }
	.f3-pro-split.is-flip .f3-pro-ph.is-inset { width: 34%; left: auto; right: 0; bottom: -10%; }
	.f3-formblock { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* RUN #33 — PROFESSIONAL rebuild ---------------------------------------------------------------------------
 * A hero led by the real FLAT3 bottle · B Japan business contact (one organisational identity) · C light business form. */
.f3-pro-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; min-height: max(100vh, 680px); min-height: max(var(--f3-svh), 680px); padding: 14vh var(--f3-margin) 9vh;
	background: radial-gradient(60% 70% at 78% 52%, rgba(31, 86, 168, .55), rgba(11, 45, 92, .25) 55%, rgba(5, 11, 22, 0) 80%), linear-gradient(180deg, #071a38 0%, var(--f3-night) 100%); }
.f3-pro-hero__copy { grid-column: 1; grid-row: 1; max-width: 46rem; }
.f3-pro-hero__bottle { grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; position: relative; }
.f3-pro-hero__bottle::before { content: ''; position: absolute; inset: 8% 10%; background: radial-gradient(closest-side, rgba(157, 184, 230, .28), rgba(157, 184, 230, 0)); }
.f3-pro-hero__bottle .f3-bottle { position: relative; height: min(76vh, 760px); width: auto; max-width: 100%; }
html.f3-motion .f3-pro-hero__bottle .f3-bottle { animation: f3-pro-bottle 1.6s var(--f3-ease-expo) both; }
@keyframes f3-pro-bottle { from { opacity: 0; transform: translateY(24px); } }
.f3-pro-hero .f3-sub__title { font-size: clamp(48px, 6.4vw, 108px); line-height: .96; }
.f3-pro-hero .f3-sub__title .f3-pair__ja { font-size: clamp(17px, 1.5vw, 24px); font-weight: 300; letter-spacing: .1em; line-height: 1.7; color: var(--f3-offwhite); }
.f3-pro-hero .f3-sub__lead { max-width: 38em; font-size: clamp(15px, 1.1vw, 18px); --ja: clamp(15.5px, 1.04vw, 17px); }
.f3-pro-hero .f3-sub__lead .f3-pair__ja { color: var(--f3-silver); line-height: 1.9; letter-spacing: .05em; }

.f3-pro-jp .f3-pro-split__text { grid-column: 1 / span 6; }
.f3-pro-co { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 4px; border-top: 1px solid rgba(243, 241, 236, .35); width: 100%; }
.f3-pro-co__name { display: flex; flex-direction: column; gap: 8px; margin: 0; font-weight: 300; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.2; font-family: var(--f3-ja-sans); }
.f3-pro-co__en { font-family: var(--f3-mono); font-weight: 400; font-size: 12.5px; letter-spacing: .16em; color: var(--f3-silver); text-transform: uppercase; }
.f3-pro-jp .f3-welcome__list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.f3-pro-jp .f3-welcome__list .is-wide { grid-column: 1 / -1; }
.f3-pro-jp .f3-sub__note { color: var(--f3-mist); font-size: 14px; --ja: 15.5px; }
.f3-pro-jp .f3-sub__note .f3-pair__ja { color: var(--f3-offwhite); line-height: 1.9; }

/* C — white / pale-paper business form: visible boundaries, labelled required / optional, usability first. */
.f3-formblock.is-light { background: var(--f3-offwhite); color: var(--f3-ink); border-top: 0; }
.f3-formblock.is-light .f3-kicker { color: var(--f3-samurai); }
.f3-formblock.is-light .f3-pair__ja, .f3-formblock.is-light .f3-pro-copy { color: #3a3d44; }
.f3-formblock.is-light .f3-sub__h2 .f3-pair__ja { color: var(--f3-samurai); }
.f3-formblock.is-light .f3-inq { background: #fff; border: 1px solid #d3d0c8; padding: clamp(24px, 3.2vw, 48px); gap: 32px; box-shadow: 0 1px 0 rgba(7, 9, 13, .04), 0 24px 48px -32px rgba(11, 45, 92, .25); }
.f3-formblock.is-light .f3-field__label { color: var(--f3-ink); font-size: 13px; letter-spacing: .08em; --ja: 14px; align-items: flex-start; }
.f3-formblock.is-light .f3-field__label .f3-pair__ja { color: #3a3d44; font-size: 14px; letter-spacing: .04em; }
.f3-formblock.is-light .f3-field__req { color: #fff; background: var(--f3-french); padding: 3px 8px; font-size: 12px; letter-spacing: .08em; white-space: nowrap; text-decoration: none; }
.f3-formblock.is-light .f3-field__opt { color: #5f5a52; background: #ecebe6; padding: 3px 8px; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.f3-formblock.is-light .f3-field__control, .f3-formblock.is-light textarea.f3-field__control { background-color: #fff; color: var(--f3-ink); border: 1px solid #8a8f98; border-radius: 2px; padding: 12px 14px; min-height: 52px; font-weight: 400; }
.f3-formblock.is-light .f3-field__control:hover { border-color: var(--f3-samurai); background-color: #fff; }
.f3-formblock.is-light .f3-field__control:focus-visible, .f3-formblock.is-light textarea.f3-field__control:focus-visible { outline: 0; background-color: #fff; border-color: var(--f3-french); box-shadow: 0 0 0 3px rgba(31, 86, 168, .25); }
.f3-formblock.is-light select.f3-field__control { background-image: linear-gradient(45deg, transparent 50%, var(--f3-samurai) 50%), linear-gradient(135deg, var(--f3-samurai) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.f3-formblock.is-light .f3-inq.is-checked .f3-field__control:invalid { border-color: #C0392B; box-shadow: 0 0 0 1px #C0392B; }
.f3-formblock.is-light .f3-inq__submit { background: var(--f3-samurai); color: #fff; border-color: var(--f3-samurai); }
.f3-formblock.is-light .f3-inq__submit .f3-pair__ja { color: rgba(255, 255, 255, .85); }
.f3-formblock.is-light .f3-inq__submit:hover { background: var(--f3-french); border-color: var(--f3-french); }
.f3-formblock.is-light .f3-inq__note, .f3-formblock.is-light .f3-inq__note .f3-pair__ja { color: #4a4f57; }
.f3-formblock.is-light .f3-inq__status { border-color: #8a8f98; color: var(--f3-ink); background: #f7f6f2; }
.f3-formblock.is-light .f3-inq__status.is-ok { border-color: #2e7d4f; }
.f3-formblock.is-light .f3-inq__status.is-ng { border-color: #C0392B; }
.f3-formblock.is-light .f3-pro-copy { margin: 0; }

@media (max-width: 899.98px) {
	.f3-pro-hero { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 8px; min-height: max(var(--f3-svh), 720px); padding: 84px 20px calc(36px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(90% 46% at 50% 22%, rgba(31, 86, 168, .6), rgba(11, 45, 92, .2) 60%, rgba(5, 11, 22, 0) 85%), linear-gradient(180deg, #071a38 0%, var(--f3-night) 70%); }
	.f3-pro-hero__bottle { flex: none; }
	.f3-pro-hero__bottle .f3-bottle { height: min(30svh, 270px); }
	.f3-pro-hero__copy { gap: 14px; max-width: none; }
	.f3-pro-hero .f3-sub__title { font-size: clamp(40px, 12.4vw, 56px); }
	.f3-pro-hero .f3-sub__title .f3-pair__ja { font-size: 16.5px; }
	.f3-pro-hero .f3-sub__lead { font-size: 14.5px; --ja: 15px; }
	.f3-pro-hero .f3-sub__lead .f3-pair__en { display: none; }
	.f3-pro-hero .f3-sub__hero-cta { flex-direction: column; align-items: stretch; }
	.f3-pro-jp .f3-welcome__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.f3-pro-co__name { font-size: clamp(24px, 7.2vw, 32px); }
	.f3-formblock.is-light { padding: 56px 16px calc(80px + env(safe-area-inset-bottom, 0px)); }
	.f3-formblock.is-light .f3-inq { padding: 22px 16px 26px; }
}

/* RUN #33 — /contact/ rebuild: photographic hero · General-vs-Professional chooser · light form (shares .f3-formblock.is-light) */
.f3-ct-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; min-height: max(84vh, 620px); min-height: max(84svh, 620px); padding: 0;
	background: radial-gradient(70% 80% at 20% 90%, rgba(31, 86, 168, .38), rgba(5, 11, 22, 0) 70%), linear-gradient(180deg, #071a38 0%, var(--f3-night) 100%); }
.f3-ct-hero__copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3.4vh; padding: 20vh 4vw 9vh var(--f3-margin); position: relative; z-index: 1; }
.f3-ct-hero .f3-sub__title { font-size: clamp(52px, 7vw, 120px); line-height: .95; }
.f3-ct-hero .f3-sub__title .f3-pair__ja { font-size: clamp(18px, 1.7vw, 28px); font-weight: 300; letter-spacing: .1em; color: var(--f3-offwhite); line-height: 1.6; }
.f3-ct-hero .f3-sub__lead { max-width: 40em; font-size: clamp(15px, 1.1vw, 18px); --ja: clamp(15.5px, 1.05vw, 17px); }
.f3-ct-hero .f3-sub__lead .f3-pair__ja { color: var(--f3-silver); line-height: 1.95; letter-spacing: .05em; }
.f3-ct-hero__img { position: relative; margin: 0; min-height: 360px; overflow: hidden; }
.f3-ct-hero__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-ct-hero__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 22, .82) 0, rgba(5, 11, 22, 0) 150px), linear-gradient(90deg, #071a38 0%, rgba(7, 26, 56, 0) 26%), linear-gradient(0deg, rgba(5, 11, 22, .45), rgba(5, 11, 22, 0) 40%); pointer-events: none; }
html.f3-motion .f3-ct-hero__img img { animation: f3-pro-settle 2.2s var(--f3-ease-expo) both; }

.f3-ct-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); padding: clamp(40px, 7vh, 80px) var(--f3-margin) clamp(48px, 8vh, 96px); background: var(--f3-night); border-bottom: 1px solid rgba(243, 241, 236, .14); }
.f3-ct-route__c { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(28px, 4vh, 44px) clamp(24px, 2.6vw, 40px) clamp(32px, 4.4vh, 48px); color: var(--f3-ink); background: var(--f3-offwhite); border: 1px solid transparent; transition: background .32s var(--f3-ease-panel), border-color .32s var(--f3-ease-panel), color .32s var(--f3-ease-panel), transform .32s var(--f3-ease-panel); }
.f3-ct-route__c:focus-visible { outline: 3px solid var(--f3-french); outline-offset: 4px; }
.f3-ct-route__c.is-here { cursor: pointer; }
.f3-ct-route__c.is-here, .f3-ct-route__c.is-here:hover, .f3-ct-route__c.is-here:focus-visible { color: var(--f3-ink); }
.f3-ct-route__c.is-here:hover, .f3-ct-route__c.is-here:focus-visible { background: #fff; border-color: var(--f3-french); box-shadow: inset 0 -4px 0 var(--f3-french); }
.f3-ct-route__c.is-here:hover .f3-ct-route__a, .f3-ct-route__c.is-here:focus-visible .f3-ct-route__a { background: var(--f3-ink); color: #fff; }
.f3-ct-route__c.is-here:hover .f3-ct-route__a .f3-pair__ja, .f3-ct-route__c.is-here:focus-visible .f3-ct-route__a .f3-pair__ja { color: #dbe0e8; }
.f3-ct-route__c.is-pro:hover .f3-ct-route__a { background: #fff; }
.f3-ct-route__c.is-pro { background: var(--f3-samurai); color: var(--f3-offwhite); transition: background .32s var(--f3-ease-panel); }
.f3-ct-route__c.is-pro:hover { background: var(--f3-french); color: var(--f3-offwhite); }
.f3-ct-route__c .f3-kicker { color: var(--f3-samurai); }
.f3-ct-route__c.is-pro .f3-kicker { color: rgba(243, 241, 236, .85); }
.f3-ct-route__h { margin: 0; font-weight: 200; font-size: clamp(26px, 2.8vw, 46px); line-height: 1.15; letter-spacing: -.01em; --ja: clamp(16px, 1.3vw, 20px); }
.f3-ct-route__h .f3-pair { gap: 8px; }
.f3-ct-route__h .f3-pair__ja { font-weight: 400; letter-spacing: .04em; }
.f3-ct-route__c .f3-pro-copy { margin: 0; }
.f3-ct-route__c.is-here .f3-pair__ja { color: #3a3d44; }
.f3-ct-route__c.is-pro .f3-pair__ja { color: rgba(243, 241, 236, .9); }
.f3-ct-route__a { margin-top: auto; display: inline-flex; padding: 14px 22px; min-height: 52px; align-items: center; font-size: 12.5px; letter-spacing: .18em; border: 1px solid currentColor; }
.f3-ct-route__a .f3-pair { gap: 4px; }
.f3-ct-route__c.is-pro .f3-ct-route__a { background: var(--f3-offwhite); color: var(--f3-samurai); border-color: var(--f3-offwhite); }
.f3-ct-route__c.is-pro .f3-ct-route__a .f3-pair__ja { color: #3a3d44; }

@media (max-width: 899.98px) {
	.f3-ct-hero { display: flex; flex-direction: column-reverse; min-height: 0; }
	.f3-ct-hero__img { min-height: 0; height: 38svh; max-height: 340px; flex: none; }
	.f3-ct-hero__img::after { background: linear-gradient(180deg, rgba(5, 11, 22, .8) 0, rgba(5, 11, 22, 0) 110px), linear-gradient(0deg, #071a38 0%, rgba(7, 26, 56, 0) 55%); }
	.f3-ct-hero__copy { padding: 36px 20px 44px; gap: 20px; }
	.f3-ct-hero .f3-sub__title { font-size: clamp(44px, 13vw, 60px); }
	.f3-ct-hero .f3-sub__title .f3-pair__ja { font-size: 17px; }
	.f3-ct-hero .f3-sub__lead { font-size: 14.5px; --ja: 15px; }
	.f3-ct-hero .f3-sub__lead .f3-pair__en { display: none; }
	.f3-ct-route { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 40px; gap: 14px; }
	.f3-ct-route__c { padding: 28px 20px 32px; }
	.f3-ct-route__a { width: 100%; justify-content: space-between; }
}

/* 45-deep.css */
/* HANDOFF 02 — shared deep-page system (RUN #30): PAPER tokens, BottleStage, NextRoutes. */

:root {
	--f3-paper: #FBFAF8;
	--f3-paper-2: #F5F4F1;
	--f3-plate: #F2F1EE;
	--f3-rule: #E2E0DB;
	--f3-body-2: #3A3A3A;
	--f3-turf: #17302A;
	--f3-stage: #0A0B0D;
}

/* BottleStage — 3:4, per-image width / left / top (percent of the stage, height auto, never distorted). */
.f3-bs { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--f3-stage); }
.f3-bs img { position: absolute; display: block; height: auto; max-width: none; width: var(--w); left: var(--l); top: var(--t); transform-origin: 50% 50%; transition: transform .6s ease-out; }
a:hover .f3-bs img { transform: scale(1.03); }
.f3-bs.is-pending { display: flex; align-items: center; justify-content: center; background: var(--f3-plate); }
.f3-bs.is-pending .f3-mono { font-size: 11px; letter-spacing: .1em; color: var(--f3-warm); }

/* NextRoutes — NIGHT band. */
.f3-nr { background: var(--f3-night); color: var(--f3-offwhite); padding: 110px 49px 120px; display: flex; flex-direction: column; gap: 48px; }
.f3-nr__head { display: flex; justify-content: space-between; align-items: flex-end; }
.f3-nr__k, .f3-nr__n { font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); margin: 0 0 14px; }
.f3-nr__n { margin: 0; letter-spacing: .12em; }
.f3-nr__t { margin: 0; font-weight: 200; font-size: 56px; line-height: 1; }
.f3-nr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.f3-nr__a { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(243, 241, 236, .4); color: var(--f3-offwhite); }
.f3-nr__p { font-family: var(--f3-mono); font-size: 11px; color: var(--f3-silver); }
.f3-nr__e { font-weight: 300; font-size: 30px; }
.f3-nr__j { font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-silver); }
.f3-nr__go { margin-top: 8px; font-size: 12px; letter-spacing: .22em; }
.f3-nr__go i { display: inline-block; font-style: normal; transition: transform .3s; }
.f3-nr__a:hover { color: var(--f3-offwhite); }
.f3-nr__a:hover .f3-nr__e, .f3-nr__a:hover .f3-nr__go { color: #6F9BE0; }
.f3-nr__a:hover .f3-nr__go i { transform: translateX(6px); }

@media (max-width: 899.98px) {
	.f3-nr { padding: 48px 20px; gap: 0; }
	.f3-nr__head { padding-bottom: 16px; }
	.f3-nr__t, .f3-nr__n { display: none; }
	.f3-nr__k { margin: 0; font-size: 11px; letter-spacing: .14em; }
	.f3-nr__grid { grid-template-columns: 1fr; }
	.f3-nr__a { height: 56px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0; border-top-color: rgba(243, 241, 236, .35); gap: 0; }
	.f3-nr__a:last-child { border-bottom: 1px solid rgba(243, 241, 236, .35); }
	.f3-nr__p, .f3-nr__j { display: none; }
	.f3-nr__e { font-size: 20px; }
	.f3-nr__go { margin: 0; font-size: 0; }
	.f3-nr__go i { font-size: 14px; }
}

/* 46-deep-wines.css */
/* HANDOFF 02 — wines: /wines/ (02-02 W01–W04), wine detail (02-03 D01–D05), Formation component.
 * PAPER surfaces for reading, NIGHT for hero / next, TURF only inside .f3-fm. Side padding = --f3-margin (3.4vw = 49px at 1440).
 * Motion is calm: image mask, 1px line draw, hover (image 1.03, label → French Blue), fade-up 12px, Formation draw + node intro.
 * All motion is gated on html.f3-motion (absent under prefers-reduced-motion → final static state). */

.f3-pg--wines, .f3-pg--wine { --f3-ink-2: var(--f3-body-2); }

/* Shared fade-up + image mask (armed by deep-wines.ts through .is-in) --------------------------------------------- */
html.f3-motion [data-f3-fade]:not(.is-in) { opacity: 0; transform: translateY(12px); }
html.f3-motion [data-f3-fade] { transition: opacity .5s ease-out, transform .5s ease-out; }
html.f3-motion [data-f3-mask]:not(.is-in) { clip-path: inset(0 0 100% 0); }
html.f3-motion [data-f3-mask] { transition: clip-path .9s cubic-bezier(.2, .7, .2, 1); }

/* ============================================================== /wines/ */
.f3-pg--wines { background: var(--f3-paper); color: var(--f3-ink); }

/* W01 WinesHero */
.f3-wsh { position: relative; min-height: 460px; padding: 150px var(--f3-margin) 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; background: var(--f3-paper); color: var(--f3-ink); }
.f3-wsh__a { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.f3-wsh__k { margin: 0; font-family: var(--f3-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-wsh__t { margin: 0; font-weight: 200; font-size: clamp(44px, 6.12vw, 88px); line-height: .95; letter-spacing: .005em; }
.f3-wsh__j { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 19px; letter-spacing: .12em; color: var(--f3-body-2); }
.f3-wsh__b { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.f3-wsh__en { margin: 0; font-weight: 300; font-size: 17px; line-height: 1.55; }
.f3-wsh__ja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 13.5px; line-height: 2; letter-spacing: .05em; color: var(--f3-body-2); }

/* W02 WinePortfolioGrid + WineCard */
.f3-wp { padding: 40px var(--f3-margin) 120px; border-top: 1px solid var(--f3-ink); background: var(--f3-paper); color: var(--f3-ink); }
.f3-wp__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
.f3-wg { display: flex; flex-direction: column; min-width: 0; color: var(--f3-ink); }
.f3-wg__b { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.f3-wg__nm { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.f3-wg__n { font-size: 15px; letter-spacing: .24em; transition: color .3s; }
.f3-wg__j { font-family: var(--f3-ja-sans); font-size: 13px; letter-spacing: .1em; color: var(--f3-body-2); }
.f3-wg__hr { display: block; height: 1px; background: var(--f3-rule); margin: 16px 0; }
.f3-wg__m { display: flex; flex-direction: column; gap: 4px; font-family: var(--f3-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--f3-body-2); }
.f3-wg__en { display: block; margin: 14px 0 0; font-weight: 300; font-size: 14px; line-height: 1.55; }
.f3-wg__ja { display: block; margin: 6px 0 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 12.5px; line-height: 1.9; color: var(--f3-body-2); }
.f3-wg__go { margin-top: 20px; align-self: flex-start; font-size: 12px; letter-spacing: .22em; padding-bottom: 5px; border-bottom: 1px solid var(--f3-ink); transition: color .3s, border-color .3s; }
.f3-wg:hover .f3-wg__n, .f3-wg:hover .f3-wg__go { color: var(--f3-french); }
.f3-wg:hover .f3-wg__go { border-bottom-color: var(--f3-french); }
.f3-wp__foot { display: flex; justify-content: space-between; margin: 28px 0 0; font-family: var(--f3-mono); font-size: 11px; letter-spacing: .12em; color: var(--f3-warm); }

/* W03 SignatureCuvee */
.f3-sig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: 0 var(--f3-margin) 0 0; background: var(--f3-paper-2); color: var(--f3-ink); }
.f3-sig__img { grid-column: 1 / span 7; height: 600px; margin: 0; overflow: hidden; }
.f3-sig__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.f3-sig__t { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 64px 0 64px 28px; min-width: 0; }
.f3-sig__k { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-french); }
.f3-sig__h { margin: 0; font-weight: 200; font-size: clamp(44px, 4.45vw, 64px); line-height: .95; }
.f3-sig__en { margin: 0; font-weight: 300; font-size: 17px; line-height: 1.6; }
.f3-sig__ja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 13.5px; line-height: 2; color: var(--f3-body-2); }
.f3-sig__f { display: flex; flex-direction: column; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .06em; }
.f3-sig__f > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--f3-rule); }
.f3-sig__f > div:first-child { border-top-color: var(--f3-ink); }
.f3-sig__f > div > span:first-child { color: var(--f3-warm); }
.f3-sig__c { display: flex; gap: 16px; }
.f3-sig__d, .f3-sig__buy { height: 48px; padding: 0 22px; display: flex; align-items: center; font-size: 12px; letter-spacing: .22em; transition: color .3s, background .3s, border-color .3s; }
.f3-sig__d { border: 1px solid var(--f3-ink); color: var(--f3-ink); }
.f3-sig__buy { background: var(--f3-ink); color: var(--f3-paper); font-weight: 500; border: 1px solid var(--f3-ink); }
.f3-sig__d:hover { color: var(--f3-french); border-color: var(--f3-french); }
.f3-sig__buy:hover { background: var(--f3-french); border-color: var(--f3-french); color: #fff; }

/* ============================================================== wine detail */
.f3-pg--wine { background: var(--f3-paper); color: var(--f3-ink); }

/* D01 WineHero */
.f3-wd { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; padding: 130px var(--f3-margin) 90px; background: var(--f3-night); color: var(--f3-offwhite); }
.f3-wd__st { grid-column: 1 / span 5; }
.f3-wd__t { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.f3-wd__k { margin: 0; display: flex; gap: 16px; font-family: var(--f3-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-wd__dot { color: var(--f3-french); }
.f3-wd__nm { display: flex; flex-direction: column; gap: 12px; }
.f3-wd__n { margin: 0; font-weight: 200; font-size: clamp(76px, 9.45vw, 136px); line-height: .85; overflow-wrap: anywhere; }
.f3-wd__n.is-long { font-size: clamp(56px, 6.67vw, 96px); line-height: .9; }
.f3-wd__by { font-size: 14px; letter-spacing: .42em; }
.f3-wd__j { font-family: var(--f3-ja-sans); font-weight: 300; font-size: 19px; letter-spacing: .12em; color: var(--f3-mist); }
.f3-wd__c { display: block; font-family: var(--f3-mono); font-size: 12.5px; letter-spacing: .1em; padding: 12px 0; border-top: 1px solid rgba(243, 241, 236, .3); border-bottom: 1px solid rgba(243, 241, 236, .3); }
.f3-wd__en { margin: 0; font-weight: 300; font-size: 19px; line-height: 1.55; max-width: 540px; }
.f3-wd__ja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 14px; line-height: 2; color: var(--f3-mist); max-width: 540px; }
.f3-wd__t > .f3-pair { max-width: 540px; }
.f3-wd__cta { display: flex; gap: 14px; }
.f3-wd__buy, .f3-wd__pro { height: 52px; padding: 0 26px; display: flex; align-items: center; gap: .4em; font-size: 12.5px; letter-spacing: .22em; transition: background .3s, color .3s, border-color .3s; }
.f3-wd__buy { background: #fff; color: #000; font-weight: 500; border: 1px solid #fff; }
.f3-wd__pro { border: 1px solid rgba(243, 241, 236, .6); color: var(--f3-offwhite); }
.f3-wd__buy:hover { background: transparent; color: #fff; }
.f3-wd__pro:hover { border-color: #fff; color: #fff; }

/* D02 WineFacts + SoilKey */
.f3-wf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: 120px var(--f3-margin); background: var(--f3-paper); color: var(--f3-ink); }
.f3-wf__a { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.f3-wf__h { display: flex; flex-direction: column; gap: 12px; }
.f3-wf__k { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-wf__t { margin: 0; font-weight: 200; font-size: clamp(40px, 4.45vw, 64px); line-height: 1; }
.f3-wf__tb { margin: 0; display: flex; flex-direction: column; font-family: var(--f3-mono); font-size: 13px; letter-spacing: .05em; }
.f3-wf__tb > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--f3-rule); }
.f3-wf__tb > div:first-child { border-top-color: var(--f3-ink); }
.f3-wf__tb > div:last-child { border-bottom: 1px solid var(--f3-ink); }
.f3-wf__tb dt { color: var(--f3-warm); }
.f3-wf__tb dd { margin: 0; }
.f3-wf__note { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .06em; line-height: 1.8; color: var(--f3-body-2); }
.f3-sk { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 22px; padding-top: 104px; }
.f3-sk__k { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-sk__r { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--f3-rule); color: var(--f3-warm); }
.f3-sk__r:nth-of-type(3) { border-bottom: 1px solid var(--f3-rule); }
.f3-sk__r.is-on { padding-left: 16px; border-top-color: var(--f3-french); background: #F2F5FA; color: var(--f3-french); }
.f3-sk__n { font-size: 13px; letter-spacing: .2em; }
.f3-sk__j { font-family: var(--f3-ja-sans); font-size: 12.5px; }
.f3-sk__r.is-on .f3-sk__j { color: var(--f3-ink); }
.f3-sk__a { align-self: flex-start; font-size: 12px; letter-spacing: .22em; padding-bottom: 5px; border-bottom: 1px solid var(--f3-ink); color: var(--f3-ink); transition: color .3s, border-color .3s; }
.f3-sk__a:hover { color: var(--f3-french); border-bottom-color: var(--f3-french); }

/* D03 TastingPhilosophy */
.f3-wt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding-right: var(--f3-margin); background: var(--f3-paper-2); color: var(--f3-ink); }
.f3-wt__img { grid-column: 1 / span 6; height: 680px; margin: 0; overflow: hidden; }
.f3-wt__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-wt__t { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 80px 0; min-width: 0; }
.f3-wt__a { display: flex; flex-direction: column; gap: 18px; }
.f3-wt__k { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-wt__rows { display: flex; flex-direction: column; font-size: 13px; }
.f3-wt__rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--f3-rule); }
.f3-wt__rows > div:first-child { border-top-color: var(--f3-ink); }
.f3-wt__rows > div:last-child { border-bottom: 1px solid var(--f3-ink); }
.f3-wt__l { letter-spacing: .2em; font-size: 12px; }
.f3-wt__v { display: flex; flex-direction: column; gap: 4px; }
.f3-wt__v > span:first-child { font-size: 14px; line-height: 1.55; }
.f3-wt__v > span:last-child { font-family: var(--f3-ja-sans); font-weight: 300; font-size: 12.5px; line-height: 1.8; color: var(--f3-body-2); }
.f3-wt__p { display: flex; flex-direction: column; gap: 16px; }
.f3-wt__pk { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-french); }
.f3-wt__pt { margin: 0; font-weight: 200; font-size: clamp(30px, 2.78vw, 40px); line-height: 1.08; }
.f3-wt__pj { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 15px; line-height: 1.9; letter-spacing: .04em; }
.f3-wt__pe { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--f3-body-2); }

/* D04 Formation343 — TURF is used ONLY here ----------------------------------------------------------------------- */
.f3-fm { background: var(--f3-turf); color: var(--f3-offwhite); padding: 110px var(--f3-margin) 120px; }
.f3-fm__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; max-width: 1440px; margin: 0 auto; }
.f3-fm__side { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.f3-fm__head { display: flex; flex-direction: column; gap: 14px; }
.f3-fm__k { margin: 0; font-family: var(--f3-mono); font-size: 12px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-fm__t { margin: 0; font-weight: 200; font-size: clamp(36px, 3.62vw, 52px); line-height: 1; }
.f3-fm__ja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 14px; line-height: 2; color: var(--f3-mist); }
.f3-fm__act { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(243, 241, 236, .3); }
.f3-fm__act p { margin: 0; }
.f3-fm__an { font-size: 20px; letter-spacing: .2em; }
.f3-fm__ar { font-family: var(--f3-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--f3-silver); }
.f3-fm__al { font-weight: 300; font-size: 15px; line-height: 1.6; }
.f3-fm__aj { font-family: var(--f3-ja-sans); font-weight: 300; font-size: 13px; line-height: 1.9; color: var(--f3-mist); }
.f3-fm__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.f3-fm__list a { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(243, 241, 236, .18); font-size: 12px; letter-spacing: .2em; color: rgba(243, 241, 236, .6); transition: color .3s; }
.f3-fm__list a:hover { color: #6F9BE0; }
.f3-fm__list a.is-on { color: #fff; }
.f3-fm__lm { font-family: var(--f3-mono); font-size: 10.5px; letter-spacing: 0; text-align: right; }
.f3-fm__lm-sp { display: none; }
.f3-fm__pitch { min-width: 0; }
.f3-fm__pitch.is-h { grid-column: 5 / span 8; }
.f3-fm__pitch.is-v { display: none; }
.f3-pitch { display: block; width: 100%; height: auto; overflow: visible; }
.f3-pitch text { font-family: var(--f3-sans); }
.f3-pitch .f3a-mono { font-family: var(--f3-mono); }
.f3a-n { cursor: pointer; }
.f3-pitch .f3a-nm { transition: fill .3s; }
a.f3a-w:hover .f3a-nm { fill: #6F9BE0; }
a.f3a-w.is-on:hover .f3a-nm { fill: #fff; }
a.f3a-w:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.f3a-n { transform-box: fill-box; transform-origin: center; }

/* Active-wine variant (02-03 Part C) */
.f3-fm.is-variant { max-width: 1100px; padding: 56px 60px 64px; display: flex; flex-direction: column; gap: 28px; box-sizing: border-box; }
.f3-fm__vh { display: flex; justify-content: space-between; align-items: flex-end; }
.f3-fm__vl { display: flex; flex-direction: column; gap: 10px; }
.f3-fm__vl p, .f3-fm__vr { margin: 0; }
.f3-fm__vn { font-size: 22px; letter-spacing: .2em; }
.f3-fm__vr { font-family: var(--f3-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--f3-silver); }

@keyframes f3-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes f3-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.f3-motion .f3-fm .f3a-d { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.f3-motion .f3-fm .f3a-n { opacity: 0; }
html.f3-motion .f3-fm.is-in .f3a-d { animation: f3-draw 1.4s cubic-bezier(.2, .7, .2, 1) both; }
html.f3-motion .f3-fm.is-in .f3a-n { animation: f3-pop .4s ease-out both; animation-delay: calc(.6s + var(--i, 0) * .06s); }

/* D05 NextWine + NextRoutes */
.f3-nw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; padding: 110px var(--f3-margin) 120px; background: var(--f3-night); color: var(--f3-offwhite); }
.f3-nw__w { grid-column: 1 / span 5; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: end; color: var(--f3-offwhite); }
.f3-nw__b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.f3-nw__k { font-family: var(--f3-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--f3-silver); }
.f3-nw__n { font-weight: 200; font-size: clamp(34px, 3.33vw, 48px); line-height: 1; transition: color .3s; }
.f3-nw__j { font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-silver); }
.f3-nw__go { margin-top: 12px; align-self: flex-start; font-size: 12px; letter-spacing: .22em; padding-bottom: 5px; border-bottom: 1px solid var(--f3-offwhite); transition: color .3s, border-color .3s; }
.f3-nw__w:hover .f3-nw__n, .f3-nw__w:hover .f3-nw__go { color: #6F9BE0; }
.f3-nw__w:hover .f3-nw__go { border-bottom-color: #6F9BE0; }
.f3-nw__r { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.f3-nw__r a { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(243, 241, 236, .4); color: var(--f3-offwhite); }
.f3-nw__p { font-family: var(--f3-mono); font-size: 11px; color: var(--f3-silver); overflow-wrap: anywhere; }
.f3-nw__e { font-weight: 300; font-size: 24px; transition: color .3s; }
.f3-nw__a { font-size: 12px; letter-spacing: .22em; transition: transform .3s, color .3s; }
.f3-nw__r a:hover .f3-nw__e, .f3-nw__r a:hover .f3-nw__a { color: #6F9BE0; }
.f3-nw__r a:hover .f3-nw__a { transform: translateX(6px); }

/* ============================================================== ≤ 1180px: portfolio 3 + 2 centred */
@media (min-width: 900px) and (max-width: 1180px) {
	.f3-wp__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 20px; }
	.f3-wg { width: calc((100% - 40px) / 3); }
	.f3-nw__r { grid-column: 1 / -1; margin-top: 56px; }
	.f3-nw__w { grid-column: 1 / -1; }
}

/* < 1024px: Formation = vertical pitch + five-row list */
@media (max-width: 1023.98px) {
	.f3-fm { padding: 40px 20px 36px; }
	.f3-fm__in { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
	.f3-fm__side { display: contents; }
	.f3-fm__head { order: 1; gap: 10px; }
	.f3-fm__k { font-size: 11px; }
	.f3-fm__t { font-size: 34px; line-height: 1.05; }
	.f3-fm__ja { font-size: 13px; line-height: 1.6; }
	.f3-fm__act { display: none; }
	.f3-fm__pitch.is-h { display: none; }
	.f3-fm__pitch.is-v { display: block; order: 2; width: 100%; max-width: 420px; margin: 0 auto; }
	.f3-fm__list { order: 3; }
	.f3-fm__list a { height: auto; min-height: 48px; padding: 6px 0; }
	.f3-fm__lm { font-size: 10px; max-width: 58%; }
	.f3-fm__lm-pc { display: none; }
	.f3-fm__lm-sp { display: inline; }
	.f3-fm.is-variant { padding: 40px 20px 36px; }
}

/* ============================================================== SP (< 900px) */
@media (max-width: 899.98px) {
	/* /wines/ */
	.f3-wsh { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; padding: 96px 20px 28px; }
	.f3-wsh__a { gap: 14px; }
	.f3-wsh__k { font-size: 12px; }
	.f3-wsh__t { font-size: 44px; line-height: 1; letter-spacing: 0; }
	.f3-wsh__j { font-size: 15px; letter-spacing: .1em; }
	.f3-wsh__b { display: none; }
	.f3-wp { padding: 0 20px 48px; border-top: 0; }
	.f3-wp__grid { display: flex; flex-direction: column; }
	.f3-wg { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--f3-rule); width: auto; }
	.f3-wg:first-child { border-top-color: var(--f3-ink); }
	.f3-wg:last-child { border-bottom: 1px solid var(--f3-ink); }
	.f3-wg__b { gap: 6px; }
	.f3-wg__nm { margin: 0; gap: 6px; }
	.f3-wg__n { font-size: 14px; letter-spacing: .22em; }
	.f3-wg__j { font-size: 12px; letter-spacing: 0; }
	.f3-wg__hr, .f3-wg__en { display: none; }
	.f3-wg__m { font-size: 10.5px; letter-spacing: 0; margin-top: 6px; gap: 0; }
	.f3-wg__ja { margin: 0; font-size: 12px; line-height: 1.8; }
	.f3-wg__go { margin-top: auto; padding: 0; border: 0; font-size: 11.5px; }
	.f3-wg:hover .f3-wg__go { border: 0; }
	.f3-sig { display: flex; flex-direction: column; padding: 0; }
	.f3-sig__img { height: 240px; }
	.f3-sig__t { padding: 28px 20px 40px; gap: 14px; justify-content: flex-start; }
	.f3-sig__k { font-size: 11px; letter-spacing: .14em; }
	.f3-sig__h { font-size: 44px; line-height: 1; }
	.f3-sig__ja { font-size: 13px; }
	.f3-sig__c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.f3-sig__d, .f3-sig__buy { justify-content: center; padding: 0; font-size: 11.5px; letter-spacing: .2em; }

	/* detail */
	.f3-wd { display: flex; flex-direction: column; align-items: stretch; padding: 72px 0 0; }
	.f3-wd__st { margin: 8px 56px 0; }
	.f3-wd__t { padding: 28px 20px 40px; gap: 14px; }
	.f3-wd__k { font-size: 11px; }
	.f3-wd__nm { gap: 14px; }
	.f3-wd__n { font-size: 64px; line-height: .9; }
	.f3-wd__n.is-long { font-size: 52px; }
	.f3-wd__by, .f3-wd__en, .f3-wd__ja { display: none; }
	.f3-wd__j { font-size: 14px; letter-spacing: 0; }
	.f3-wd__c { font-size: 11px; letter-spacing: 0; padding: 10px 0; }
	.f3-wd__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.f3-wd__buy, .f3-wd__pro { height: 48px; padding: 0; justify-content: center; font-size: 11.5px; letter-spacing: .2em; }
	.f3-wf { display: flex; flex-direction: column; gap: 40px; padding: 64px 20px; }
	.f3-wf__a { gap: 24px; }
	.f3-wf__t { font-size: 36px; }
	.f3-wf__tb { font-size: 12px; }
	.f3-wf__tb > div { grid-template-columns: 112px minmax(0, 1fr); min-height: 48px; }
	.f3-sk { padding-top: 0; gap: 16px; }
	.f3-wt { display: flex; flex-direction: column; padding-right: 0; }
	.f3-wt__img { height: 320px; }
	.f3-wt__t { padding: 40px 20px 56px; gap: 36px; }
	.f3-wt__rows > div { grid-template-columns: 112px minmax(0, 1fr); }
	.f3-wt__pt { font-size: 30px; }
	.f3-nw { display: flex; flex-direction: column; align-items: stretch; gap: 40px; padding: 48px 20px; }
	.f3-nw__w { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
	.f3-nw__n { font-size: 32px; }
	.f3-nw__r { display: flex; flex-direction: column; }
	.f3-nw__r a { height: 56px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0; border-top-color: rgba(243, 241, 236, .35); }
	.f3-nw__r a:last-child { border-bottom: 1px solid rgba(243, 241, 236, .35); }
	.f3-nw__p { display: none; }
	.f3-nw__e { font-size: 20px; }
	.f3-nw__a { font-size: 14px; letter-spacing: 0; }
}

/* WINE × FOOTBALL — the Formation sits between the intro and the note */
.f3-lineup__in { padding-bottom: 6vh; }
.f3-lineup__note .f3-sec__in { padding-top: 6vh; padding-bottom: 6vh; }

/* 47-deep-estate.css */
/* HANDOFF 02 — estate (RUN #30, 02-01): /estate/ E01–E07 (the /winemaking/ and /terroir/ bridges were retired in RUN #35).
 * PC = the 1440 design scaled below 1440 (--u = one design pixel); SP (< 900) is its own layout.
 * Photographs are natural colour — no filters anywhere. Palette: PAPER / PAPER-2 / NIGHT / SAMURAI / INK / FRENCH BLUE. */

.f3e {
	--u: min(1px, .069444vw);
	--pad: max(calc(49 * var(--u)), calc((100% - 1440px) / 2 + 49px));
	--e-ink: #07090D;
	--e-body2: #3A3A3A;
	--e-warm: #8C877E;
	--e-silver: #BFC4CA;
	--e-mist: #D9DCE0;
	--e-off: #F3F1EC;
	--e-blue: #1F56A8;
	--e-blue-on-dark: #6F9BE0;
	--e-ease: cubic-bezier(.2, .7, .2, 1);
	background: var(--f3-night);
	color: var(--e-off);
	font-weight: 300;
}
.f3e [lang="ja"] { font-family: var(--f3-ja-sans); }
.f3e :is(h1, h2, h3, p, figure, ol, dl, dd) { margin: 0; }
.f3e img { display: block; }
.f3e :is(ol, ul) { list-style: none; padding: 0; }
.f3e a { color: inherit; }
.f3e section { scroll-margin-top: 0; }

/* atoms ------------------------------------------------------------------------ */
.f3e-mono, .f3e-k, .f3e-cap { font-family: var(--f3-mono); }
.f3e-k { display: flex; gap: 16px; font-size: 12.5px; letter-spacing: .16em; color: var(--e-warm); }
.f3e-k [lang="ja"] { letter-spacing: .1em; }
.f3e-cap { font-size: 11.5px; letter-spacing: .12em; color: var(--e-warm); }
.f3e-h { font-weight: 200; }
.f3e-h--88 { font-size: calc(88 * var(--u)); line-height: .92; }
.f3e-h--100 { font-size: calc(100 * var(--u)); line-height: .9; }
.f3e-h--96 { font-size: calc(96 * var(--u)); line-height: .9; }
.f3e-h--64 { font-size: calc(64 * var(--u)); line-height: .95; }
.f3e-h--136 { font-size: calc(136 * var(--u)); line-height: .85; }
.f3e-sub { font-weight: 300; font-size: 19px; letter-spacing: .14em; color: var(--e-body2); }
.f3e-p { font-weight: 300; font-size: 19px; line-height: 1.55; }
.f3e-p--17 { font-size: 17px; line-height: 1.55; }
.f3e-p--18 { font-size: 18px; line-height: 1.6; }
.f3e-pj { font-size: 14px; line-height: 2; letter-spacing: .06em; color: var(--e-body2); }
.f3e-pj--135 { font-size: 13.5px; letter-spacing: .05em; }
.f3e-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.f3e-tag { font-family: var(--f3-mono); font-size: 10.5px; letter-spacing: .1em; padding: 5px 9px; border: 1px solid var(--e-warm); color: var(--e-body2); }
.f3e-tag.is-flat3 { border-color: var(--e-blue); background: var(--e-blue); color: var(--e-off); }
.f3e-vine__lede .f3e-tags { gap: 10px; }

/* E01 · THE ESTATE ------------------------------------------------------------- */
.f3e-hero { position: relative; height: clamp(640px, 100svh, 900px); overflow: hidden; background: var(--f3-night); color: var(--e-off); }
.f3e-hero__img { position: absolute; inset: 0; }
.f3e-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.f3e-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 22, .6) 0%, rgba(5, 11, 22, 0) 18%, rgba(5, 11, 22, .15) 34%, rgba(5, 11, 22, .72) 56%, rgba(5, 11, 22, .96) 100%); }
.f3e-hero__body { position: absolute; left: var(--pad); bottom: calc(76 * var(--u)); display: flex; flex-direction: column; gap: 26px; }
.f3e-hero__k { display: flex; gap: 16px; font-family: var(--f3-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--e-off); }
.f3e-hero__k [lang="ja"] { letter-spacing: .1em; }
.f3e-hero__t { font-weight: 200; font-size: calc(136 * var(--u)); line-height: .88; letter-spacing: .01em; }
.f3e-hero__t > span { display: block; }
.f3e-hero__t2 { padding-left: 1.1em; white-space: nowrap; }
.f3e-hero__txt { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.f3e-hero__loc { font-size: 13px; letter-spacing: .42em; }
.f3e-hero__en { font-weight: 300; font-size: 19px; line-height: 1.5; }
.f3e-hero__ja { font-weight: 300; font-size: 14.5px; line-height: 2; letter-spacing: .06em; color: var(--e-mist); }
.f3e-hero__sp-index { display: none; }

/* E02 · A MOSAIC OF TERROIRS — PAPER ---------------------------------------------- */
.f3e-terroir { background: var(--f3-paper); color: var(--e-ink); padding: calc(150 * var(--u)) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: calc(96 * var(--u)); }
.f3e-terroir__fruit { grid-column: 1 / span 5; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.f3e-terroir__fruit img { width: 100%; flex: 1 1 auto; min-height: calc(760 * var(--u)); object-fit: cover; }
.f3e-terroir__head { grid-column: 7 / span 6; grid-row: 1; display: flex; flex-direction: column; gap: 26px; }
.f3e-terroir__intro { display: flex; flex-direction: column; gap: 12px; max-width: 600px; padding-top: 6px; }
.f3e-soil { grid-column: 7 / span 6; grid-row: 2; align-self: start; display: flex; flex-direction: column; }
.f3e-soil__r { display: grid; grid-template-columns: 30px calc(190 * var(--u)) minmax(0, 1fr) calc(170 * var(--u)); gap: 14px; padding: 20px 0; border-top: 1px solid rgba(7, 9, 13, .25); align-items: start; }
.f3e-soil__r.is-head { padding: 10px 0; border-top-color: var(--e-ink); font-family: var(--f3-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--e-warm); }
.f3e-soil__r.is-flat3 { background: rgba(31, 86, 168, .07); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.f3e-soil__r.is-last { border-bottom: 1px solid var(--e-ink); }
.f3e-soil__n { font-family: var(--f3-mono); font-size: 12px; color: var(--e-warm); }
.f3e-soil__r.is-flat3 .f3e-soil__n { color: var(--e-blue); }
.f3e-soil__s, .f3e-soil__c { display: flex; flex-direction: column; gap: 4px; }
.f3e-soil__en { font-weight: 300; font-size: 22px; }
.f3e-soil__ja { font-size: 12.5px; color: var(--e-body2); letter-spacing: .1em; }
.f3e-soil__ck { font-size: 12px; letter-spacing: .22em; }
.f3e-soil__cj { font-size: 12.5px; line-height: 1.8; color: var(--e-body2); }
.f3e-soil__w { font-size: 11.5px; letter-spacing: .14em; line-height: 1.9; }
.f3e-soil__part { font-size: 10px; color: var(--e-warm); }
.f3e-soil__f3 { color: var(--e-blue); }
.f3e-soil__w--na { font-size: 10.5px; letter-spacing: .06em; line-height: 1.7; color: var(--e-warm); }

/* E03 · FROM VINE TO WINE — PAPER-2 — the only process section ---------------------- */
.f3e-vine { background: var(--f3-paper-2); color: var(--e-ink); padding: calc(150 * var(--u)) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.f3e-vine__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; padding-bottom: calc(110 * var(--u)); }
.f3e-vine__title { grid-column: 3 / span 6; display: flex; flex-direction: column; gap: 24px; }
.f3e-vine__lede { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 14px; }
.f3e-idx { grid-column: 1 / span 2; align-self: start; position: sticky; top: 120px; display: flex; flex-direction: column; font-size: 11.5px; letter-spacing: .18em; --p: 0; }
.f3e-idx__track, .f3e-idx__fill { position: absolute; left: 4px; top: 8px; width: 1px; display: block; }
.f3e-idx__track { height: calc(100% - 16px); background: rgba(7, 9, 13, .25); }
.f3e-idx__fill { height: calc((100% - 16px) * var(--p)); background: var(--e-blue); transition: height .5s var(--e-ease); }
.f3e-idx__a { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 0; color: var(--e-warm); transition: color .3s; }
.f3e-idx__a i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--f3-paper-2); border: 1px solid var(--e-warm); box-sizing: border-box; transition: background .3s, border-color .3s; }
.f3e-idx__a.is-on { color: var(--e-ink); }
.f3e-idx__a.is-on i { background: var(--e-blue); border-color: var(--e-blue); }
.f3e-idx__a:hover { color: var(--e-blue); }
.f3e-steps { grid-column: 3 / span 10; display: flex; flex-direction: column; }
.f3e-step { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 20px; padding: 88px 0; border-top: 1px solid rgba(7, 9, 13, .2); align-items: start; scroll-margin-top: 100px; }
.f3e-step:first-child { padding-top: 0; border-top: 0; }
.f3e-step:last-child { padding-bottom: 0; }
.f3e-step__img { grid-row: 1; height: var(--h); overflow: hidden; }
.f3e-step__img img { width: 100%; height: 100%; object-fit: cover; }
.f3e-step__t { grid-row: 1; display: flex; flex-direction: column; gap: 20px; padding-top: 12px; }
.is-img-l .f3e-step__img { grid-column: 1 / span 5; }
.is-img-l .f3e-step__t { grid-column: 7 / span 4; }
.is-img-r .f3e-step__img { grid-column: 6 / span 5; max-width: 620px; }
.is-img-r .f3e-step__t { grid-column: 1 / span 4; }
.is-img-l6 .f3e-step__img { grid-column: 1 / span 6; }
.is-img-l6 .f3e-step__t { grid-column: 8 / span 3; }
.f3e-step__no { font-family: var(--f3-mono); font-size: 12px; letter-spacing: .12em; color: var(--e-warm); }
.f3e-step__h { display: flex; flex-direction: column; gap: 8px; font-weight: 400; }
.f3e-step__en { font-weight: 200; font-size: calc(56 * var(--u)); line-height: 1; }
.f3e-step__ja { font-size: 15px; letter-spacing: .14em; color: var(--e-body2); font-weight: 300; }
.f3e-step__p { font-weight: 300; font-size: 16.5px; line-height: 1.6; }
.f3e-step__pj { font-size: 13.5px; line-height: 2; letter-spacing: .04em; color: var(--e-body2); }
.f3e-step__cap { font-family: var(--f3-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--e-warm); }
.f3e-tl { display: none; }

/* E04 · THE CELLAR — SAMURAI BLUE — a place, not a process ----------------------------- */
.f3e-cellar { background: var(--f3-samurai); color: var(--e-off); padding: calc(150 * var(--u)) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: calc(80 * var(--u)); }
.f3e-cellar .f3e-k { color: var(--e-silver); }
.f3e-cellar .f3e-sub { color: var(--e-mist); }
.f3e-cellar__title { grid-column: 1 / span 6; grid-row: 1; display: flex; flex-direction: column; gap: 26px; }
.f3e-cellar__txt { grid-column: 8 / span 5; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: 12px; }
.f3e-cellar__txt .f3e-pj { color: var(--e-mist); letter-spacing: .05em; }
.f3e-cellar figure { display: flex; flex-direction: column; gap: 12px; }
.f3e-cellar figcaption { display: flex; flex-direction: column; gap: 4px; }
.f3e-cellar figcaption .f3e-mono { font-size: 11.5px; letter-spacing: .12em; }
.f3e-cellar figcaption [lang="ja"] { font-size: 12.5px; color: var(--e-silver); }
/* One composed row: three images on a shared top and bottom edge, widths 3 / 5 / 4 of the 12-col grid (threshold · room · mark). */
.f3e-cellar__door { grid-column: 1 / span 3; grid-row: 2; align-self: start; }
.f3e-cellar__room { grid-column: 4 / span 5; grid-row: 2; align-self: start; }
.f3e-cellar__mark { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
.f3e-cellar__door img, .f3e-cellar__room img, .f3e-cellar__mark img { width: 100%; height: calc(600 * var(--u)); object-fit: cover; }

/* E05 · THE TEAM — INK ------------------------------------------------------------ */
.f3e-team { background: var(--e-ink); color: var(--e-off); padding: calc(150 * var(--u)) var(--pad); display: flex; flex-direction: column; gap: calc(88 * var(--u)); }
.f3e-team .f3e-k, .f3e-team .f3e-cap { color: var(--e-silver); }
.f3e-team .f3e-sub { color: var(--e-mist); font-size: 18px; line-height: 1.8; letter-spacing: .1em; }
/* RUN #33 — one vertical order, no overlay: intro (left) + photo (right) → Philippe → Ludwig → Winemaking team → CTA. */
.f3e-team__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.f3e-team__head { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 22px; padding-right: 24px; }
.f3e-team__intro { font-size: 17px; line-height: 2; letter-spacing: .04em; color: var(--e-mist); font-weight: 400; margin-top: 8px !important; }
.f3e-team__photo { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 10px; }
.f3e-team__photo img { width: 100%; height: calc(520 * var(--u)); min-height: 340px; object-fit: cover; }
.f3e-prof { display: flex; flex-direction: column; }
.f3e-prof__c { border-top: 1px solid var(--e-off); padding: 40px 0 44px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.f3e-prof__c.is-blue { border-top-color: var(--e-blue); }
.f3e-prof__id { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 10px; }
.f3e-prof__b { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 14px; }
.f3e-prof__k { font-size: 11.5px; letter-spacing: .12em; color: var(--e-silver); }
.f3e-prof__n { font-weight: 300; font-size: max(24px, calc(34 * var(--u))); letter-spacing: .08em; line-height: 1.2; }
.f3e-prof__r { font-size: 12px; letter-spacing: .24em; }
.f3e-prof__j { font-size: 15px; line-height: 1.8; letter-spacing: .08em; color: var(--e-mist); }
.f3e-prof__p { font-weight: 300; font-size: 16px; line-height: 1.6; }
.f3e-prof__pj { font-size: 16.5px; line-height: 2; letter-spacing: .04em; color: var(--e-mist); font-weight: 400; }
.f3e-vis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; align-items: baseline; border-top: 1px solid rgba(243, 241, 236, .25); border-bottom: 1px solid rgba(243, 241, 236, .25); padding: 34px 0; }
.f3e-vis__a, .f3e-vis__b { font-weight: 200; font-size: calc(40 * var(--u)); line-height: 1.15; }
.f3e-vis__a { grid-column: 1 / span 5; }
.f3e-vis__b { grid-column: 6 / span 7; color: var(--e-off); }
.f3e-vis__b span { border-bottom: 1px solid var(--e-blue); }
.f3e-vis__j { grid-column: 1 / -1; font-size: 16px; line-height: 1.9; color: var(--e-silver); font-weight: 400; }
.f3e-team__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.f3e-team__a { display: inline-flex; align-items: center; gap: 18px; min-height: 56px; padding: 0 24px; border: 1px solid rgba(243, 241, 236, .5); font-family: var(--f3-mono); font-size: 12px; letter-spacing: .14em; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.f3e-team__a [lang="ja"] { font-family: var(--f3-ja-sans); font-size: 14px; letter-spacing: .06em; color: var(--e-silver); }
.f3e-team__a.is-primary { background: var(--e-off); color: var(--e-ink); border-color: var(--e-off); }
.f3e-team__a.is-primary [lang="ja"] { color: #3a3d44; }
.f3e-team__a:hover { border-color: var(--e-blue-on-dark); }
.f3e-team__a.is-primary:hover { background: var(--e-blue); color: var(--e-off); border-color: var(--e-blue); }
.f3e-team__a.is-primary:hover [lang="ja"] { color: var(--e-off); }
/* Cellar + terroir + vine: Japanese lead and prose read as real copy (not a sub-caption). */
.f3e-lead { font-weight: 400 !important; line-height: 1.7 !important; }
.f3e [lang="ja"].f3e-pj, .f3e [lang="ja"].f3e-step__pj, .f3e [lang="ja"].f3e-tl__p, .f3e-hero__ja { font-weight: 400; }

/* E06 · PRECISION, NOT FORCE — NIGHT — typography only ----------------------------------- */
.f3e-prec { background: var(--f3-night); color: var(--e-off); padding: calc(150 * var(--u)) var(--pad); display: flex; flex-direction: column; gap: calc(96 * var(--u)); }
.f3e-prec .f3e-k { color: var(--e-silver); }
.f3e-prec .f3e-sub { color: var(--e-mist); }
.f3e-prec .f3e-pj { color: var(--e-silver); line-height: 2; }
.f3e-prec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
.f3e-prec__title { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.f3e-prec__txt { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 12px; }
.f3e-prec__txt .f3e-p { line-height: 1.6; }
.f3e-pr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
.f3e-pr li { border-top: 1px solid rgba(243, 241, 236, .4); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.f3e-pr .f3e-mono { font-size: 11px; color: var(--e-silver); }
.f3e-pr b { font-weight: 400; font-size: 13.5px; letter-spacing: .2em; }
.f3e-pr [lang="ja"] { font-size: 12.5px; color: var(--e-silver); }
.f3e-cmp { display: flex; flex-direction: column; }
.f3e-cmp__r { display: grid; grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid rgba(243, 241, 236, .25); }
.f3e-cmp__r.is-head { border-top: 0; }
.f3e-cmp__r.is-last { border-bottom: 1px solid rgba(243, 241, 236, .25); }
.f3e-cmp__h { padding: 26px 32px; border-top: 2px solid var(--e-silver); display: flex; flex-direction: column; gap: 6px; }
.f3e-cmp__h.is-flat3 { border-top-color: var(--e-blue); background: rgba(31, 86, 168, .22); }
.f3e-cmp__hn { font-size: 15px; letter-spacing: .26em; font-weight: 400; }
.f3e-cmp__h .f3e-mono { font-size: 11.5px; letter-spacing: .14em; color: var(--e-silver); }
.f3e-cmp__h.is-flat3 .f3e-mono { color: var(--e-mist); }
.f3e-cmp__l { padding: 18px 0; font-size: 11.5px; letter-spacing: .12em; color: var(--e-silver); }
.f3e-cmp__e, .f3e-cmp__f { padding: 18px 32px; font-size: 13px; letter-spacing: .14em; line-height: 1.7; }
.f3e-cmp__f { background: rgba(31, 86, 168, .22); }
.f3e-cmp__e.is-dim { color: var(--e-silver); }
.f3e .f3e-cmp__note { margin-top: 22px; font-size: 13px; line-height: 2; color: var(--e-silver); max-width: 760px; }
.f3e-spcmp { display: none; }

/* E07 · NEXT ROUTES — NIGHT -------------------------------------------------------------- */
.f3e-nr { background: var(--f3-night); color: var(--e-off); padding: calc(130 * var(--u)) var(--pad) calc(150 * var(--u)); display: flex; flex-direction: column; gap: 56px; border-top: 1px solid rgba(243, 241, 236, .12); }
.f3e-nr .f3e-k { color: var(--e-silver); margin-bottom: 18px; }
.f3e-nr__head { display: flex; justify-content: space-between; align-items: flex-end; }
.f3e-nr__t { font-weight: 200; font-size: calc(56 * var(--u)); line-height: 1; }
.f3e-nr__n { font-family: var(--f3-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--e-silver); }
.f3e-nr__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
.f3e-nr__a { display: flex; flex-direction: column; gap: 20px; color: var(--e-off); }
.f3e-nr__img { display: block; overflow: hidden; height: 260px; }
.f3e-nr__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
.f3e-nr__a:hover .f3e-nr__img img { transform: scale(1.03); }
.f3e-nr__p { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .12em; color: var(--e-silver); }
.f3e-nr__tt { display: flex; flex-direction: column; gap: 8px; }
.f3e-nr__e { font-weight: 200; font-size: calc(38 * var(--u)); line-height: 1; transition: color .3s; }
.f3e-nr__j { font-size: 13px; letter-spacing: .14em; color: var(--e-silver); }
.f3e-nr__go { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .22em; }
.f3e-nr__go i { flex: 1; height: 1px; background: rgba(243, 241, 236, .5); }
.f3e-nr__go span:last-child { display: inline-block; transition: transform .3s; }
.f3e-nr__a:hover .f3e-nr__e { color: var(--e-blue-on-dark); }
.f3e-nr__a:hover .f3e-nr__go span:last-child { transform: translateX(6px); }

/* shared header on /estate/: the ink follows the scene beneath it -------------------------------- */
body.f3e-hdr .f3-header { mix-blend-mode: normal; transition: background-color .4s cubic-bezier(.2, .7, .2, 1), color .4s; }
body.f3e-hdr .f3-header[data-f3-hdr="clear"] { background: linear-gradient(180deg, rgba(5, 11, 22, .5), rgba(5, 11, 22, 0)); color: #fff; }
body.f3e-hdr .f3-header[data-f3-hdr="night"] { background: rgba(5, 11, 22, .94); color: #fff; }
body.f3e-hdr .f3-header[data-f3-hdr="ink"] { background: rgba(7, 9, 13, .94); color: #fff; }
body.f3e-hdr .f3-header[data-f3-hdr="samurai"] { background: rgba(11, 45, 92, .94); color: #fff; }
body.f3e-hdr .f3-header[data-f3-hdr="light"] { background: rgba(251, 250, 248, .94); color: #07090D; box-shadow: 0 1px 0 var(--f3-rule); }
body.f3e-hdr .f3-header[data-f3-hdr="light"] .f3-burger i { background: #07090D; }
body.f3e-hdr .f3-header[data-f3-hdr="light"] .f3-header__buy { background: #07090D; border-color: #07090D; color: #FBFAF8; }
body.f3e-hdr .f3-header[data-f3-hdr="light"] .f3-header__buy:hover { background: transparent; color: #07090D; }
body.f3e-hdr .f3-header[data-f3-hdr="light"] .f3-header__buyp { background: #07090D; color: #FBFAF8; }
body.f3e-hdr .f3-header__nav a[aria-current="page"] { padding-bottom: 5px; }

/* motion — only with html.f3-motion (reduced motion = final static state) ------------------------------ */
@keyframes f3e-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.f3-motion .f3e-hero__body > * { animation: f3e-up .5s var(--e-ease) both; }
html.f3-motion .f3e-hero__body > :nth-child(2) { animation-delay: .12s; }
html.f3-motion .f3e-hero__body > :nth-child(3) { animation-delay: .24s; }
html.f3e-js [data-f3e-rv] img { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--e-ease); }
html.f3e-js [data-f3e-rv].is-in img { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) {
	html .f3e-hero__body > *, html .f3e-idx__fill, html .f3e-nr__img img { animation: none; transition: none; }
	html [data-f3e-rv] img { clip-path: none; transform: none; transition: none; }
	.f3e-idx { position: static; }
}

/* narrow desktop: the soil table drops to cards before its columns collide */
@media (min-width: 900px) and (max-width: 1099.98px) {
	.f3e-soil__r { grid-template-columns: 24px minmax(0, 1fr); }
	.f3e-soil__r.is-head { display: none; }
	.f3e-soil__c, .f3e-soil__w { grid-column: 2; }
}

/* SP ------------------------------------------------------------------------------------------------------ */
@media (max-width: 899.98px) {
	.f3e { --pad: 20px; }
	.f3e-k { font-size: 12px; gap: 12px; }
	.f3e-cap { font-size: 11px; }

	/* 01 — 100svh */
	.f3e-hero { height: var(--f3-svh); min-height: 560px; }
	.f3e-hero__img img { object-position: 74% 50% !important; }
	.f3e-hero__shade { background: linear-gradient(180deg, rgba(5, 11, 22, .6) 0%, rgba(5, 11, 22, 0) 16%, rgba(5, 11, 22, .55) 34%, rgba(5, 11, 22, .96) 60%); }
	.f3e-hero__body { left: 20px; right: 20px; bottom: 48px; gap: 18px; }
	.f3e-hero__k { font-size: 12px; gap: 12px; }
	.f3e-hero__t { font-size: 52px; line-height: .92; }
	.f3e-hero__t2 { padding-left: 0; white-space: normal; }
	.f3e-hero__txt { gap: 18px; max-width: none; }
	.f3e-hero__loc { font-size: 11px; letter-spacing: .38em; }
	.f3e-hero__en { font-size: 15px; }
	.f3e-hero__ja { font-size: 13px; }
	.f3e-hero__sp-index { display: flex; justify-content: space-between; font-family: var(--f3-mono); font-size: 11px; letter-spacing: .12em; color: var(--e-silver); border-top: 1px solid rgba(243, 241, 236, .3); padding-top: 12px; }

	/* 02 — table → stacked soil cards */
	.f3e-terroir { display: flex; flex-direction: column; gap: 36px; padding: 72px 20px 80px; }
	.f3e-terroir__head { order: 1; gap: 14px; }
	.f3e-terroir__fruit { order: 2; }
	.f3e-terroir__fruit img { height: 340px; }
	.f3e-soil { order: 3; }
	.f3e-h--88 { font-size: 44px; line-height: .95; }
	.f3e-sub { font-size: 15px; letter-spacing: .12em; }
	.f3e-p { font-size: 16px; }
	.f3e-pj { font-size: 13px; }
	.f3e-soil__r { grid-template-columns: 28px minmax(0, 1fr); gap: 10px 12px; padding: 20px 0; }
	.f3e-soil__r.is-head { display: none; }
	.f3e-soil__r.is-flat3 { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
	.f3e-soil__c, .f3e-soil__w { grid-column: 2; }
	.f3e-soil__w { display: block; }

	/* 03 — vertical timeline, no sticky index */
	.f3e-vine { display: block; padding: 72px 20px 110px; }
	.f3e-vine__head { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 30px; }
	.f3e-vine__title { gap: 14px; }
	.f3e-h--100 { font-size: 46px; line-height: .95; }
	.f3e-vine__lede { display: none; }
	.f3e .f3e-tl { display: flex; flex-direction: column; gap: 36px; position: relative; padding-left: 28px; }
	.f3e-tl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 0; width: 1px; background: var(--e-ink); }
	.f3e-tl__s { position: relative; display: flex; flex-direction: column; gap: 12px; }
	.f3e-tl__dot { position: absolute; left: -28px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--e-blue); }
	.f3e-tl__no { font-family: var(--f3-mono); font-size: 11px; color: var(--e-warm); }
	.f3e-tl__h { font-weight: 200; font-size: 32px; line-height: 1; }
	.f3e-tl__h span { font-size: 13px; letter-spacing: .12em; color: var(--e-body2); font-weight: 300; }
	.f3e-tl__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
	.f3e-tl__p { font-size: 13px; line-height: 2; color: var(--e-body2); }
	.f3e-tl__s .f3e-tags { gap: 6px; }
	.f3e-tl__s .f3e-tag { font-size: 10px; letter-spacing: .08em; padding: 4px 8px; }
	.f3e-tl__s { align-items: stretch; }
	.f3e-tl__s .f3e-tags { align-self: flex-start; }

	/* 04 — door + barrelhead side by side under the cellar photo */
	.f3e-cellar { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 28px; padding: 72px 20px; }
	.f3e-cellar__title, .f3e-cellar__txt { grid-column: 1 / -1; grid-row: auto; }
	.f3e-cellar__title { gap: 14px; }
	.f3e-h--96 { font-size: 44px; line-height: .95; }
	.f3e-cellar__txt .f3e-p { font-size: 15px; }
	.f3e-cellar__room { grid-column: 1 / -1; grid-row: 3; }
	.f3e-cellar__room img { height: auto; aspect-ratio: 4 / 3; }
	.f3e-cellar__door { grid-column: 1; grid-row: 4; align-self: start; }
	.f3e-cellar__mark { grid-column: 2; grid-row: 4; align-self: start; }
	.f3e-cellar__door img, .f3e-cellar__mark img { height: auto; aspect-ratio: 3 / 4; max-width: none; }
	.f3e-cellar figcaption .f3e-mono { font-size: 10.5px; letter-spacing: .08em; }
	.f3e-cellar figcaption [lang="ja"] { font-size: 11.5px; }

	/* 05 — intro, photo, then 3 profiles stacked (RUN #33: full Japanese copy, no overlay) */
	.f3e-team { padding: 72px 20px 110px; gap: 32px; }
	.f3e-team__top { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
	.f3e-team__head { padding-right: 0; gap: 14px; }
	.f3e-team__head .f3e-k { font-size: 12px; }
	.f3e-team__head .f3e-h { font-size: 38px; line-height: 1; }
	.f3e-team__head .f3e-sub { margin-top: 0; font-size: 17px; }
	.f3e-team__intro { font-size: 15.5px; line-height: 1.95; margin-top: 4px !important; }
	.f3e-team__photo { margin: 0 -20px; }
	.f3e-team__photo img { height: 260px; min-height: 0; }
	.f3e-team__photo figcaption { display: none; }
	.f3e-prof__c { display: flex; flex-direction: column; gap: 14px; padding: 26px 0 28px; }
	.f3e-prof__id, .f3e-prof__b { gap: 8px; }
	.f3e-prof__k { font-size: 10.5px; }
	.f3e-prof__n { font-size: 22px; letter-spacing: .1em; }
	.f3e-prof__r { font-size: 11px; letter-spacing: .2em; }
	.f3e-prof__j { font-size: 14.5px; }
	.f3e-prof__pj { font-size: 15.5px; line-height: 1.95; }
	.f3e-vis { display: block; padding: 24px 0; }
	.f3e-vis__j { font-size: 15.5px; line-height: 1.9; color: var(--e-mist); }
	.f3e-team__cta { flex-direction: column; gap: 12px; }
	.f3e-team__a { justify-content: space-between; min-height: 56px; padding: 0 18px; }

	/* 06 — two stacked cards: ESTATE, then FLAT3 (blue) */
	.f3e-prec { padding: 72px 20px 110px; gap: 26px; }
	.f3e-prec__head { display: block; }
	.f3e-prec__title { gap: 12px; }
	.f3e-h--136 { font-size: 56px; line-height: .9; }
	.f3e-prec .f3e-sub { font-size: 14.5px; letter-spacing: .1em; }
	.f3e-spcmp { display: flex; flex-direction: column; gap: 26px; }
	.f3e-spcmp__c { border-top: 2px solid var(--e-silver); padding: 18px 0; display: flex; flex-direction: column; gap: 12px; }
	.f3e-spcmp__c.is-flat3 { border-top-color: var(--e-blue); background: rgba(31, 86, 168, .22); padding: 18px 16px; margin: 0 -4px; }
	.f3e-spcmp__t { font-size: 13px; letter-spacing: .24em; }
	.f3e-spcmp__t .f3e-mono { font-size: 10px; letter-spacing: .1em; color: var(--e-silver); }
	.f3e-spcmp dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; font-family: var(--f3-mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1.6; }
	.f3e-spcmp dt { color: var(--e-warm); }
	.f3e-spcmp .is-flat3 dt { color: var(--e-silver); }
	.f3e-spcmp__j { font-size: 12px; line-height: 1.9; color: var(--e-silver); }

	/* 07 — NextRoutes, SP list */
	.f3e-nr { padding: 48px 20px; gap: 0; }
	.f3e-nr__head { padding-bottom: 16px; }
	.f3e-nr .f3e-k { margin: 0; font-size: 11px; letter-spacing: .14em; }
	.f3e-nr__t, .f3e-nr__n, .f3e-nr__img, .f3e-nr__p, .f3e-nr__j { display: none; }
	.f3e-nr__grid { grid-template-columns: 1fr; }
	.f3e-nr__a { height: 56px; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; border-top: 1px solid rgba(243, 241, 236, .35); }
	.f3e-nr__a:last-child { border-bottom: 1px solid rgba(243, 241, 236, .35); }
	.f3e-nr__e { font-size: 20px; }
	.f3e-nr__go { gap: 0; font-size: 0; }
	.f3e-nr__go i, .f3e-nr__go span:first-child { display: none; }
	.f3e-nr__go span:last-child { font-size: 14px; }

	/* bridge */
	.f3e-bridge__in { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 18px; min-height: 0; padding: 90px 20px 72px; }
	.f3e-bridge__k { font-size: 12px; }
	.f3e-bridge__h { font-size: 40px; line-height: 1; }
	.f3e-bridge__j { font-size: 13px; }
	.f3e-bridge__l { gap: 12px; margin-top: 16px; }
	.f3e-bridge__a, .f3e-bridge__a.is-primary { height: 56px; padding: 0 18px; border: 1px solid rgba(243, 241, 236, .5); }
	.f3e-bridge__a.is-primary { border-color: var(--f3-paper); }
	.f3e-bridge__a [lang="ja"], .f3e-bridge__m { display: none; }
}

/* 48-deep-philippe.css */
/* HANDOFF 02 — philippe */

/* =====================================================================================
   /philippe-troussier/ — HANDOFF 02 · 02-04 (P01–P06). Biography only. Natural colour, no filters.
   Sizes are the 1440 spec; display type scales down with min(Npx, N/1440 vw) below it.
   ===================================================================================== */
.f3-pg--philippe { background: var(--f3-paper); }
.f3-pg--philippe .f3-pt-mono, .f3-pt-mono { font-family: var(--f3-mono); }
.f3-pt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.f3-pt-sec, .f3-pt-hero, .f3-pt-today { position: relative; }
.f3-pt-ja-p, .f3-pt-ja, .f3-pt-hero__ja, .f3-pt-japan__ja, .f3-pt-today__ja { font-family: var(--f3-ja-sans); font-weight: 300; }
.f3-pt-no { font-family: var(--f3-mono); font-size: 11px; color: var(--f3-warm); }
.f3-pt-kick { margin: 0; font-size: 12px; letter-spacing: .16em; color: var(--f3-warm); }
.f3-pt-kick [lang="ja"] { font-family: inherit; }
.f3-pt-h2 { margin: 0; font-weight: 200; }

/* P01 HERO */
.f3-pt-hero { height: 860px; background: var(--f3-night); color: var(--f3-offwhite); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; overflow: hidden; }
.f3-pt-hero__txt { grid-column: 1 / span 5; padding: 0 0 76px var(--f3-margin); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; position: relative; z-index: 1; min-width: 0; }
.f3-pt-hero__q { margin: 0; font-size: 12.5px; letter-spacing: .16em; color: var(--f3-silver); }
.f3-pt-h1 { margin: 0; font-weight: 200; font-size: min(120px, 8.334vw); line-height: .86; }
.f3-pt-hero__roles { margin: 0; font-size: 14px; letter-spacing: .42em; }
.f3-pt-hero__ja { margin: 0; font-size: 22px; letter-spacing: .14em; }
.f3-pt-hero__idx { display: flex; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(243, 241, 236, .3); font-size: 11px; letter-spacing: .12em; color: var(--f3-silver); }
.f3-pt-hero__idx a { color: inherit; transition: color .3s; }
.f3-pt-hero__idx a:hover { color: #6F9BE0; }
.f3-pt-hero__img { grid-column: 6 / span 7; position: relative; overflow: hidden; }
.f3-pt-hero__img img, .f3-pt-coach__img img, .f3-pt-japan__img img, .f3-pt-today__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* P02 PLAYER — PAPER, typography only */
.f3-pt-player { background: var(--f3-paper); color: var(--f3-ink); padding: 130px var(--f3-margin) 120px; }
.f3-pt-player .f3-pt-grid { row-gap: 64px; }
.f3-pt-player__h { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 16px; }
.f3-pt-player .f3-pt-h2 { font-size: min(72px, 5vw); line-height: .95; }
.f3-pt-player__p { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 14px; padding-top: 40px; }
.f3-pt-lead { margin: 0; font-weight: 300; font-size: 19px; line-height: 1.6; }
.f3-pt-ja-p { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--f3-body-2); }
.f3-pt-themes { grid-column: 1 / span 12; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.f3-pt-theme { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.f3-pt-theme__n { font-size: 15px; letter-spacing: .24em; }
.f3-pt-theme .f3-pt-ja { font-size: 13.5px; line-height: 1.9; color: var(--f3-body-2); }

/* 1px rules (drawn on enter in motion mode) */
[data-pt-line]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--f3-ink); transform-origin: 0 50%; transition: transform .9s var(--f3-ease-panel); }

/* P03 COACH — PAPER-2 */
.f3-pt-coach { background: var(--f3-paper-2); color: var(--f3-ink); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding-right: var(--f3-margin); }
.f3-pt-coach__img { grid-column: 1 / span 5; height: 720px; position: relative; overflow: hidden; }
.f3-pt-coach__txt { grid-column: 7 / span 6; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 80px 0; min-width: 0; }
.f3-pt-coach__h { display: flex; flex-direction: column; gap: 16px; }
.f3-pt-h2.is-coach { font-size: min(64px, 4.445vw); line-height: .98; }
.f3-pt-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--f3-ink); }
.f3-pt-row { position: relative; display: grid; grid-template-columns: 44px 230px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--f3-rule); }
.f3-pt-row { border-top-color: transparent; }
.f3-pt-row:not(:first-child)::before { background: var(--f3-rule); }
.f3-pt-row:first-child::before { background: var(--f3-ink); }
.f3-pt-lab { font-size: 13px; letter-spacing: .22em; }
.f3-pt-row .f3-pt-ja { font-size: 13px; color: var(--f3-body-2); }

/* P04 JAPAN — SAMURAI */
.f3-pt-japan { background: var(--f3-samurai); color: var(--f3-offwhite); padding: 120px var(--f3-margin); }
.f3-pt-japan__g { align-items: center; }
.f3-pt-japan__t { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.f3-pt-japan .f3-pt-kick { color: var(--f3-silver); }
.f3-pt-years { margin: 0; font-weight: 200; font-size: min(150px, 10.417vw); line-height: .8; letter-spacing: -.01em; }
.f3-pt-japan__h { margin: 0; font-weight: 300; font-size: 30px; line-height: 1.35; max-width: 520px; }
.f3-pt-japan__ja { margin: 0; font-size: 15px; line-height: 2.1; color: var(--f3-mist); max-width: 540px; }
.f3-pt-japan__note { margin: 0; align-self: flex-start; font-size: 11px; letter-spacing: .12em; color: var(--f3-silver); padding-top: 14px; border-top: 1px solid rgba(243, 241, 236, .3); }
.f3-pt-japan__f { grid-column: 8 / span 5; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.f3-pt-japan__img { height: 740px; position: relative; overflow: hidden; }
.f3-pt-japan figcaption { font-size: 11px; letter-spacing: .12em; color: var(--f3-silver); transition: color .3s; }
.f3-pt-japan__f:hover figcaption { color: #6F9BE0; }

/* hover: image 1.03 */
.f3-pt-coach__img img, .f3-pt-japan__img img { transition: transform .6s ease-out, clip-path .9s var(--f3-ease-panel); }
.f3-pt-coach__img:hover img, .f3-pt-japan__f:hover img { transform: scale(1.03); }

/* P05 WINEMAKER TODAY */
.f3-pt-today { height: 900px; overflow: hidden; background: var(--f3-night); color: var(--f3-offwhite); }
.f3-pt-today__img { position: absolute; inset: 0; overflow: hidden; }
.f3-pt-today__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 22, 0) 0%, rgba(5, 11, 22, 0) 52%, rgba(5, 11, 22, .82) 80%, rgba(5, 11, 22, .95) 100%); }
.f3-pt-today__g { position: absolute; left: var(--f3-margin); right: var(--f3-margin); bottom: 72px; align-items: end; }
.f3-pt-today__h { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 18px; }
.f3-pt-today .f3-pt-kick { color: var(--f3-offwhite); }
.f3-pt-h2.is-today { font-size: min(84px, 5.834vw); line-height: .92; }
.f3-pt-today__p { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 16px; }
.f3-pt-today__ja { margin: 0; font-weight: 400; font-size: 17px; line-height: 2.05; letter-spacing: .04em; }
.f3-pt-today__en { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--f3-mist); }
.f3-pt-today__go { align-self: flex-start; margin-top: 6px; font-size: 12px; letter-spacing: .22em; padding-bottom: 5px; border-bottom: 1px solid var(--f3-offwhite); color: var(--f3-offwhite); transition: color .3s, border-color .3s; }
.f3-pt-today__go:hover { color: #6F9BE0; border-color: #6F9BE0; }

/* P06 NEXT — shared NextRoutes + secondary link, handoff values */
.f3-pg--philippe .f3-nr { padding: 110px var(--f3-margin); border-top: 1px solid rgba(243, 241, 236, .12); }
.f3-pg--philippe .f3-nr__n { display: none; }
.f3-pt-fb { align-self: flex-start; font-size: 12.5px; letter-spacing: .22em; color: var(--f3-silver); padding-bottom: 5px; border-bottom: 1px solid rgba(191, 196, 202, .6); transition: color .3s, border-color .3s; }
.f3-pt-fb i { font-style: normal; }
.f3-pt-fb:hover { color: #6F9BE0; border-color: #6F9BE0; }

/* Header on this page: ink over PAPER, white over NIGHT / photo / SAMURAI (set by philippe.ts). */
.f3-header.is-pt { mix-blend-mode: normal; transition: color .3s; }
.f3-header.is-pt[data-pt-tone="ink"] { color: var(--f3-ink); }
.f3-header.is-pt[data-pt-tone="ink"] .f3-header__buy { background: var(--f3-ink); border-color: var(--f3-ink); color: var(--f3-paper); }
.f3-header.is-pt[data-pt-tone="ink"] .f3-burger i { background: var(--f3-ink); }

/* Motion (calm): reveal mask 900ms, line draw, fade-up 12px 500ms. Static without html.f3-motion. */
html.f3-motion [data-pt-reveal] img { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--f3-ease-panel); }
html.f3-motion [data-pt-reveal].is-in img { clip-path: inset(0 0 0 0); }
html.f3-motion [data-pt-line]:not(.is-in)::before { transform: scaleX(0); }
html.f3-motion [data-pt-up] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; }
html.f3-motion [data-pt-up].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-pt-reveal] img, [data-pt-up] { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
	[data-pt-line]::before { transform: none !important; transition: none !important; }
	.f3-pt-coach__img img, .f3-pt-japan__img img { transition: none; }
	.f3-pt-coach__img:hover img, .f3-pt-japan__f:hover img { transform: none; }
}

/* SP — hero / Japan / today / next per the 390 spec; P02 / P03 stack single-column. */
@media (max-width: 899.98px) {
	.f3-pt-hero { display: block; height: max(640px, var(--f3-svh)); }
	.f3-pt-hero__img { position: absolute; left: 0; right: 0; top: 0; height: 560px; }
	.f3-pt-hero__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, rgba(5, 11, 22, 0), #050B16); }
	.f3-pt-hero__img img { object-position: 50% 28% !important; }
	.f3-pt-hero__txt { position: absolute; left: 20px; right: 20px; bottom: 100px; padding: 0; gap: 16px; } /* clears the fixed SP CTA bar */
	.f3-pt-hero__q { display: none; }
	.f3-pt-h1 { font-size: 58px; line-height: .88; }
	.f3-pt-hero__roles { font-size: 11.5px; letter-spacing: .34em; }
	.f3-pt-hero__ja { font-size: 17px; letter-spacing: .12em; }

	.f3-pt-player { padding: 72px 20px; }
	.f3-pt-player .f3-pt-grid { display: flex; flex-direction: column; gap: 32px; }
	.f3-pt-player .f3-pt-h2 { font-size: clamp(36px, 11vw, 48px); }
	.f3-pt-player__p { padding-top: 0; }
	.f3-pt-lead { font-size: 18px; }
	.f3-pt-themes { grid-template-columns: 1fr; row-gap: 28px; }

	.f3-pt-coach { display: flex; flex-direction: column; padding: 0; }
	.f3-pt-coach__img { height: 420px; }
	.f3-pt-coach__txt { padding: 56px 20px 64px; gap: 32px; }
	.f3-pt-h2.is-coach { font-size: clamp(34px, 10vw, 44px); }
	.f3-pt-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
	.f3-pt-row .f3-pt-ja { grid-column: 2; }

	.f3-pt-japan { padding: 48px 20px 44px; }
	.f3-pt-japan__g { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
	.f3-pt-japan__t { display: contents; }
	.f3-pt-japan .f3-pt-kick { font-size: 11px; order: 0; }
	.f3-pt-years { font-size: 72px; line-height: .85; order: 1; }
	.f3-pt-japan__f { order: 2; gap: 20px; }
	.f3-pt-japan__img { height: 440px; }
	.f3-pt-japan figcaption { font-size: 10.5px; order: 3; }
	.f3-pt-japan__ja { font-size: 14px; line-height: 2; order: 4; }

	.f3-pt-today { height: max(640px, var(--f3-svh)); }
	.f3-pt-today__img img { object-position: 52% 24% !important; }
	.f3-pt-today__shade { background: linear-gradient(180deg, rgba(5, 11, 22, 0) 40%, rgba(5, 11, 22, .88) 68%, rgba(5, 11, 22, .96) 100%); }
	.f3-pt-today__g { display: flex; flex-direction: column; left: 20px; right: 20px; bottom: 96px; gap: 14px; }
	.f3-pt-today__h { gap: 14px; }
	.f3-pt-today .f3-pt-kick { font-size: 11px; }
	.f3-pt-h2.is-today { font-size: 40px; line-height: 1; }
	.f3-pt-today__p { gap: 14px; }
	.f3-pt-today__ja { font-size: 14.5px; line-height: 2; letter-spacing: 0; font-weight: 300; }
	.f3-pt-today__go { margin: 0; height: 48px; display: flex; align-items: center; border-bottom: 0; padding: 0; }

	.f3-pg--philippe .f3-nr { padding: 48px 20px; }
	.f3-pt-fb { margin-top: 18px; height: 48px; display: flex; align-items: center; border-bottom: 0; padding: 0; font-size: 12px; }
}

/* 49-deep-journal.css */
/* HANDOFF 02 — journal (RUN #30): archive (J01–J07) + single (JS01–JS03). PAPER surfaces, conventional card grid, conventional pagination. */

.f3-jr, .f3-ar { background: var(--f3-paper); color: var(--f3-ink); min-height: 100vh; --f3-m: 3.4vw; }
.f3-jr .is-sp, .f3-ar .is-sp { display: none; }

/* ---- Archive hero (J01) ---------------------------------------------------------------------------- */
.f3-jr__hero { position: relative; padding: 150px var(--f3-m) 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; border-bottom: 1px solid var(--f3-ink); }
.f3-jr__lt { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.f3-jr__k { margin: 0; font-size: 12.5px; letter-spacing: .16em; color: #8C877E; }
.f3-jr__h { margin: 0; font-weight: 200; font-size: 150px; line-height: .82; letter-spacing: 0; }
.f3-jr__s { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 19px; letter-spacing: .14em; color: #3A3A3A; }
.f3-jr__rt { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.f3-jr__lead { display: flex; flex-direction: column; gap: 8px; }
.f3-jr__len { margin: 0; font-weight: 300; font-size: 21px; line-height: 1.45; }
.f3-jr__lja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 14px; line-height: 2; letter-spacing: .06em; color: #3A3A3A; }
.f3-jr__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.f3-jr__n { font-size: 12px; letter-spacing: .12em; color: #8C877E; }
.f3-jfl { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 12.5px; letter-spacing: .2em; }
.f3-jfl a { padding-bottom: 6px; border-bottom: 1px solid transparent; color: #3A3A3A; font-family: var(--f3-ja-sans); letter-spacing: .1em; transition: color .3s, border-color .3s; }
.f3-jfl a:first-child { font-family: var(--f3-sans); letter-spacing: .2em; }
.f3-jfl a:hover { color: var(--f3-french); }
.f3-jfl a[aria-current] { color: var(--f3-ink); border-bottom-color: var(--f3-ink); }

/* ---- Grid (J02) ------------------------------------------------------------------------------------ */
.f3-jr__list { padding: 72px var(--f3-m) 120px; display: flex; flex-direction: column; gap: 96px; }
.f3-jr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 72px; }
@media (max-width: 1199.98px) and (min-width: 900px) { .f3-jr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f3-jr__empty { margin: 0; padding: 12vh 0; font-size: 18px; }

/* ---- JournalCard (J03) ----------------------------------------------------------------------------- */
.f3-jc { min-width: 0; }
.f3-jc__a { display: flex; flex-direction: column; color: var(--f3-ink); }
.f3-jc__a:hover { color: var(--f3-ink); }
.f3-jc__a:focus-visible { outline: 1px solid var(--f3-ink); outline-offset: 6px; }
.f3-jc__img { display: block; width: 100%; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; contain: paint; background: var(--f3-plate); }
.f3-jc__img > img { display: block; width: 100%; max-width: none; height: 100% !important; min-height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .6s var(--f3-ease-expo); }
.f3-jc__img.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--f3-rule); box-sizing: border-box; }
.f3-jc__wm { font-weight: 200; font-size: 40px; letter-spacing: .04em; line-height: 1; color: #AEB3B9; }
.f3-jc__wk { font-size: 12px; letter-spacing: .14em; color: #8C877E; }
.f3-jc__meta { position: relative; display: flex; gap: 10px; align-items: baseline; margin-top: 20px; }
.f3-jc__meta::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--f3-french); transform: scaleX(0); transform-origin: 0 50%; transition: transform .32s var(--f3-ease-expo); }
.f3-jc__cat { font-family: var(--f3-ja-sans); font-size: 12.5px; letter-spacing: .1em; color: var(--f3-french); }
.f3-jc__date { font-size: 12.5px; letter-spacing: .1em; color: #8C877E; }
.f3-jc__t { margin: 12px 0 0; font-family: var(--f3-ja-sans); font-weight: 400; font-size: 19px; line-height: 1.65; letter-spacing: .04em; text-wrap: pretty; word-break: auto-phrase; transition: color .3s; }
.f3-jc__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 8px; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 13px; line-height: 1.8; color: #5A5A5A; }
@media (hover: hover) {
	.f3-jc__a:hover .f3-jc__img img { transform: scale(1.04); }
	.f3-jc__a:hover .f3-jc__t { color: var(--f3-french); }
	.f3-jc__a:hover .f3-jc__meta::after { transform: scaleX(1); }
}

/* ---- Pagination (J04, J05, J07) --------------------------------------------------------------------- */
.f3-jp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--f3-ink); padding-top: 24px; }
.f3-jp__step { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; letter-spacing: .22em; padding-bottom: 6px; border-bottom: 1px solid var(--f3-ink); color: var(--f3-ink); min-height: 44px; justify-content: center; transition: color .3s, border-color .3s; }
.f3-jp__step.is-newer { justify-self: start; }
.f3-jp__step.is-older { justify-self: end; align-items: flex-end; text-align: right; }
.f3-jp__en b { font-weight: 400; }
.f3-jp__ja { font-family: var(--f3-ja-sans); font-size: 12px; letter-spacing: .1em; color: #3A3A3A; }
.f3-jp__step.is-off { color: #BFC4CA; border-bottom-color: transparent; }
.f3-jp__step.is-off .f3-jp__ja { color: inherit; }
.f3-jp__step.is-newer.is-off { visibility: hidden; }
a.f3-jp__step:hover { color: var(--f3-french); border-bottom-color: var(--f3-french); }
a.f3-jp__step:hover .f3-jp__ja { color: var(--f3-french); }
.f3-jp__nums { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .1em; }
.f3-jp__nums li { display: flex; }
.f3-jp__nums a, .f3-jp__nums .is-current, .f3-jp__nums .is-gap { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.f3-jp__nums a { color: var(--f3-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color .3s; }
.f3-jp__nums a:hover { text-decoration-color: var(--f3-ink); }
.f3-jp__nums .is-current { background: var(--f3-ink); color: #F3F1EC; }
.f3-jp__nums .is-gap { color: #8C877E; }
.f3-jp__of { display: none; font-size: 13px; letter-spacing: .1em; }
.f3-jp a:focus-visible { outline: 1px solid var(--f3-ink); outline-offset: 4px; }

/* ---- Archive: SP (J06, J07) -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	.f3-jr, .f3-ar { --f3-m: 20px; }
	.f3-jr .is-pc, .f3-ar .is-pc { display: none; }
	.f3-jr .is-sp { display: inline; }
	.f3-jr__hero { display: flex; flex-direction: column; gap: 14px; padding: 102px 20px 28px; align-items: stretch; }
	.f3-jr__lt { gap: 14px; }
	.f3-jr__k { font-size: 12px; }
	.f3-jr__h { font-size: 72px; line-height: .85; }
	.f3-jr__s { font-size: 15px; letter-spacing: .12em; }
	.f3-jr__rt { gap: 0; }
	.f3-jr__lead { margin-top: 6px; }
	.f3-jr__len { display: none; }
	.f3-jr__lja { font-size: 13px; }
	.f3-jr__bar { padding-top: 8px; margin-top: 6px; }
	.f3-jr__n { font-size: 11.5px; letter-spacing: 0; }
	.f3-jfl { gap: 8px; }
	.f3-jfl a { height: 44px; padding: 0 18px; display: flex; align-items: center; border: 1px solid var(--f3-ink); font-size: 12.5px; letter-spacing: .1em; color: var(--f3-ink); }
	.f3-jfl a:first-child { font-size: 12px; letter-spacing: .2em; }
	.f3-jfl a[aria-current] { background: var(--f3-ink); color: #F3F1EC; }
	.f3-jr.is-paged .f3-jr__hero { gap: 12px; padding-top: 94px; padding-bottom: 24px; }
	.f3-jr.is-paged .f3-jr__h { font-size: 64px; }
	.f3-jr.is-paged .f3-jr__s { font-size: 14px; letter-spacing: .1em; }
	.f3-jr.is-paged .f3-jr__rt { display: none; }
	.f3-jr__list { padding: 32px 20px 48px; gap: 48px; }
	.f3-jr__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
	.f3-jc__meta { margin-top: 16px; gap: 8px; }
	.f3-jc__cat, .f3-jc__date { font-size: 12px; letter-spacing: .1em; }
	.f3-jc__t { margin-top: 10px; font-size: 17px; letter-spacing: .03em; }
	.f3-jc__x { display: none; }
	.f3-jc__a:active .f3-jc__t { color: var(--f3-french); }
	.f3-jp { padding-top: 16px; font-size: 12px; }
	.f3-jp__step { height: 48px; min-height: 48px; padding: 0; border-bottom: 0; font-size: 12px; letter-spacing: .2em; flex-direction: row; align-items: center; }
	.f3-jp__step.is-older { justify-content: flex-end; align-items: center; }
	.f3-jp__step .is-pc, .f3-jp__ja, .f3-jp__nums { display: none; }
	.f3-jp__step .is-sp { display: inline; }
	.f3-jp__of { display: block; }
	.f3-jp__step.is-off { border: 0; }
}

/* ---- RUN #33 — archive in a French sports-press register (×  premium wine magazine) --------------------------------
 * Strong masthead + rules, bold headlines, category / date hierarchy, ALL stories visible as a ruled 3-column grid.
 * Palette stays FLAT3: paper / ink / French Blue / Deep Samurai. No red, no tabloid effects, no copied identity. */
.f3-jr__mast { display: flex; justify-content: space-between; gap: 16px; padding: 108px var(--f3-m) 12px; font-size: 12px; letter-spacing: .2em; color: var(--f3-ink); border-bottom: 3px solid var(--f3-ink); }
.f3-jr__mast span:last-child { color: var(--f3-french); }
.f3-jr__hero { padding: 28px var(--f3-m) 36px; border-bottom: 1px solid var(--f3-ink); box-shadow: 0 4px 0 -3px var(--f3-ink); }
.f3-jr__h { font-weight: 600; font-size: clamp(88px, 11vw, 168px); line-height: .8; letter-spacing: -.045em; text-transform: uppercase; }
.f3-jr__s { font-weight: 500; font-size: 18px; color: var(--f3-samurai); }
.f3-jr__len { font-weight: 500; font-size: 22px; letter-spacing: -.005em; }
.f3-jr__lja { font-size: 15.5px; line-height: 1.9; font-weight: 400; }
.f3-jr__bar { border-top: 1px solid var(--f3-ink); padding-top: 14px; }
.f3-jr__n { color: var(--f3-ink); font-weight: 500; }
.f3-jfl a { font-size: 13px; font-weight: 500; color: var(--f3-ink); }
.f3-jfl a[aria-current] { border-bottom: 3px solid var(--f3-french); }
.f3-jr__list { padding: 0 var(--f3-m) 96px; gap: 56px; }
.f3-jr__grid { column-gap: 0; row-gap: 0; border-bottom: 3px solid var(--f3-ink); }
.f3-jc { padding: 22px 28px 38px; border-top: 1px solid var(--f3-ink); border-left: 1px solid var(--f3-rule); }
.f3-jr__grid > .f3-jc:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.f3-jr__grid > .f3-jc:nth-child(3n) { padding-right: 0; }
.f3-jc__a { position: relative; }
.f3-jc__no { align-self: flex-start; margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; color: var(--f3-french); display: flex; align-items: center; gap: 10px; width: 100%; }
.f3-jc__no::after { content: ''; flex: 1; height: 1px; background: var(--f3-rule); }
.f3-jc__meta { margin-top: 16px; align-items: center; }
.f3-jc__cat { padding: 3px 9px; background: var(--f3-samurai); color: #fff; font-weight: 500; letter-spacing: .08em; }
.f3-jc__date { color: var(--f3-ink); font-weight: 500; }
.f3-jc__t { margin-top: 14px; font-weight: 600; font-size: 22px; line-height: 1.5; letter-spacing: .02em; }
.f3-jc__x { font-size: 14px; color: #3a3d44; }
.f3-jr__end { display: flex; justify-content: space-between; align-items: center; margin: 0; padding-top: 4px; font-size: 12.5px; letter-spacing: .18em; color: var(--f3-ink); }
.f3-jr__end a { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.f3-jr__end a:hover { color: var(--f3-french); }
@media (max-width: 1199.98px) and (min-width: 900px) {
	.f3-jr__grid > .f3-jc:nth-child(3n+1), .f3-jr__grid > .f3-jc:nth-child(3n) { border-left: 1px solid var(--f3-rule); padding-left: 28px; padding-right: 28px; }
	.f3-jr__grid > .f3-jc:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	.f3-jr__grid > .f3-jc:nth-child(2n) { padding-right: 0; }
}
@media (max-width: 899.98px) {
	.f3-jr__mast { padding: 86px 20px 10px; font-size: 12px; }
	.f3-jr__hero { padding: 20px 20px 24px; }
	.f3-jr__h { font-size: clamp(64px, 20vw, 88px); }
	.f3-jr__list { padding: 0 20px 48px; }
	.f3-jr__grid { grid-template-columns: minmax(0, 1fr); }
	.f3-jr__grid > .f3-jc, .f3-jr__grid > .f3-jc:nth-child(n) { border-left: 0; padding: 22px 0 30px; }
	.f3-jc__t { font-size: 19px; }
	.f3-jr__end { font-size: 12px; }
}

/* ---- Single: JS01 hero --------------------------------------------------------------------------------- */
.f3-ar__hero { position: relative; padding: 150px var(--f3-m) 0; display: flex; flex-direction: column; gap: 56px; }
.f3-ar__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.f3-ar__back { grid-column: 1 / span 3; align-self: start; display: flex; gap: 10px; font-size: 12px; letter-spacing: .22em; color: var(--f3-ink); transition: color .3s; }
.f3-ar__back:hover { color: var(--f3-french); }
.f3-ar__back-t { display: flex; flex-direction: column; gap: 4px; }
.f3-ar__back-ja { font-family: var(--f3-ja-sans); font-size: 11.5px; letter-spacing: .1em; color: #3A3A3A; }
.f3-ar__id { grid-column: 4 / span 8; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.f3-ar__meta { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.f3-ar__cat { font-family: var(--f3-ja-sans); font-size: 13px; letter-spacing: .1em; color: var(--f3-french); }
.f3-ar__date { font-size: 13px; letter-spacing: .1em; color: #8C877E; }
.f3-ar__t { margin: 0; font-family: var(--f3-ja-sans); font-weight: 400; font-size: 42px; line-height: 1.55; letter-spacing: .04em; max-width: 22em; text-wrap: pretty; }
.f3-ar__fig { margin: 0; overflow: hidden; }
.f3-ar__fig img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; animation: f3-ar-mask .9s var(--f3-ease-expo) both; }
@keyframes f3-ar-mask { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Single: JS02 body ---------------------------------------------------------------------------------- */
.f3-ar__main { padding: 96px var(--f3-m) 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.f3-ar__rail { grid-column: 1 / span 2; position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 14px; font-size: 11.5px; letter-spacing: .1em; color: #8C877E; border-top: 1px solid var(--f3-ink); padding-top: 14px; }
.f3-ar__rail .is-k { color: var(--f3-ink); }
.f3-ar__rail .is-cat { font-family: var(--f3-ja-sans); color: var(--f3-french); }
.f3-ar__body { grid-column: 4 / -1; min-width: 0; }

.f3-prose { font-family: var(--f3-ja-sans); font-weight: 400; font-size: 16px; line-height: 2.1; letter-spacing: .05em; overflow-wrap: anywhere; }
.f3-prose > * { max-width: 760px; margin: 0 0 36px; }
.f3-prose > :last-child { margin-bottom: 0; }
.f3-prose h2 { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--f3-ink); font-weight: 500; font-size: 22px; line-height: 1.6; letter-spacing: .06em; }
.f3-prose > h2:first-child { margin-top: 0; }
.f3-prose h3 { margin-top: 44px; margin-bottom: 20px; font-weight: 500; font-size: 18px; line-height: 1.7; letter-spacing: .06em; }
.f3-prose h4, .f3-prose h5, .f3-prose h6 { margin-top: 36px; margin-bottom: 16px; font-weight: 500; font-size: 16px; line-height: 1.7; }
.f3-prose a { color: var(--f3-french); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(31, 86, 168, .45); }
.f3-prose a:hover { text-decoration-color: currentColor; }
.f3-prose strong, .f3-prose b { font-weight: 500; }
.f3-prose ul, .f3-prose ol { padding-left: 1.5em; }
.f3-prose ul { list-style: none; }
.f3-prose ul > li { position: relative; }
.f3-prose ul > li::before { content: ''; position: absolute; left: -1.3em; top: 1.1em; width: .7em; height: 1px; background: var(--f3-french); }
.f3-prose ol { list-style: decimal; }
.f3-prose li > ul, .f3-prose li > ol { margin: 0; }
.f3-prose blockquote, .f3-prose .wp-block-quote, .f3-prose .wp-block-pullquote { margin-left: 0; margin-right: 0; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--f3-french); font-weight: 300; font-size: 19px; line-height: 1.9; letter-spacing: .05em; }
.f3-prose blockquote > *, .f3-prose .wp-block-pullquote > blockquote { margin: 0; padding: 0; border: 0; }
.f3-prose blockquote p + p { margin-top: 1em; }
.f3-prose blockquote cite, .f3-prose .wp-block-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12px; letter-spacing: .06em; color: #5A5A5A; }
.f3-prose img, .f3-prose video { max-width: 100%; height: auto; }
.f3-prose p > img, .f3-prose a > img { display: block; }
.f3-prose figure, .f3-prose .wp-caption { margin-left: 0; margin-right: 0; }
.f3-prose figure img, .f3-prose .wp-caption img, .f3-prose .wp-block-image img { display: block; width: 100%; height: auto; }
.f3-prose .wp-caption { width: auto !important; max-width: 760px; }
.f3-prose figcaption, .f3-prose .wp-caption-text, .f3-prose .wp-element-caption, .f3-prose .gallery-caption { margin: 12px 0 0; font-family: var(--f3-ja-sans); font-weight: 400; font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: #5A5A5A; text-align: left; }
.f3-prose .aligncenter { display: block; margin-left: 0; margin-right: 0; }
.f3-prose .alignleft, .f3-prose .alignright { float: none; display: block; margin-left: 0; margin-right: 0; }
.f3-prose iframe, .f3-prose .wp-block-embed__wrapper { display: block; width: 100%; max-width: 100%; border: 0; }
.f3-prose iframe, .f3-prose .wp-block-embed iframe { aspect-ratio: 16 / 9; height: auto; }
.f3-prose .wp-block-embed, .f3-prose .wp-block-video, .f3-prose video { width: 100%; }
.f3-prose .wp-block-embed figcaption { margin-top: 12px; }
/* Galleries and wide blocks break out to the full text grid (columns 4–12); two columns, gap 12, original ratios kept. */
.f3-prose .alignwide, .f3-prose .alignfull, .f3-prose .wp-block-gallery, .f3-prose .gallery, .f3-prose figure.wp-caption.alignwide { max-width: min(1040px, 100%); width: 100%; }
.f3-prose .wp-block-gallery, .f3-prose .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 56px; padding: 0; }
.f3-prose .wp-block-gallery.columns-1 { grid-template-columns: minmax(0, 1fr); }
.f3-prose .wp-block-gallery ul, .f3-prose .blocks-gallery-grid { display: contents; margin: 0; padding: 0; list-style: none; }
.f3-prose .wp-block-gallery li::before, .f3-prose .blocks-gallery-grid li::before { display: none; }
.f3-prose .wp-block-gallery figure, .f3-prose .wp-block-gallery .wp-block-image, .f3-prose .wp-block-gallery li, .f3-prose .gallery-item, .f3-prose .gallery dl { margin: 0; width: auto !important; max-width: none; float: none; }
.f3-prose .gallery dt, .f3-prose .gallery dd { margin: 0; }
.f3-prose .gallery br { display: none; }
.f3-prose .wp-block-gallery figure img, .f3-prose .gallery img { width: 100%; height: auto; }
.f3-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .94em; }
.f3-prose th, .f3-prose td { padding: .7em 1em; border-bottom: 1px solid var(--f3-rule); text-align: left; }
.f3-prose hr { border: 0; height: 1px; background: var(--f3-rule); margin: 56px 0; }
.f3-prose pre, .f3-prose code { font-family: var(--f3-mono); font-size: .9em; letter-spacing: 0; }
.f3-prose pre { padding: 20px; background: var(--f3-paper-2); overflow-x: auto; line-height: 1.7; }

/* ---- Single: JS03 article end -------------------------------------------------------------------------------- */
.f3-ar__end { padding: 0 var(--f3-m) 140px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 96px; }
.f3-ar__buy { grid-column: 4 / span 8; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--f3-samurai); color: #F3F1EC; }
.f3-ar__buy-i { display: block; width: 260px; height: 100%; min-height: 280px; object-fit: cover; }
.f3-ar__buy-b { padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.f3-ar__buy-h { display: flex; flex-direction: column; gap: 10px; }
.f3-ar__buy-k { font-size: 11.5px; letter-spacing: .14em; color: #BFC4CA; }
.f3-ar__buy-t { margin: 0; font-weight: 200; font-size: 44px; line-height: 1; }
.f3-ar__buy-ja { margin: 0; font-family: var(--f3-ja-sans); font-weight: 300; font-size: 15px; letter-spacing: .12em; color: #D9DCE0; }
.f3-ar__buy-r { display: flex; gap: 28px; align-items: center; }
.f3-ar__buy-a { flex: 1; display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--f3-paper); color: var(--f3-samurai); font-size: 12.5px; letter-spacing: .22em; transition: background .32s, color .32s; }
.f3-ar__buy-a:hover { background: var(--f3-french); color: #fff; }
.f3-ar__buy-a i { flex: 1; height: 1px; background: currentColor; }
.f3-ar__buy-l { display: flex; flex-direction: column; gap: 3px; }
.f3-ar__buy-lja { font-family: var(--f3-ja-sans); font-size: 11px; letter-spacing: .1em; }
.f3-ar__pro { font-size: 12px; letter-spacing: .22em; padding-bottom: 6px; border-bottom: 1px solid rgba(243, 241, 236, .4); color: #F3F1EC; white-space: nowrap; transition: border-color .3s; }
.f3-ar__pro:hover { color: #fff; border-bottom-color: #fff; }
.f3-ar__nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--f3-ink); }
.f3-ar__np { display: grid; gap: 28px; color: var(--f3-ink); min-width: 0; }
.f3-ar__np.is-prev { grid-template-columns: 200px minmax(0, 1fr); padding: 32px 40px 32px 0; border-right: 1px solid rgba(7, 9, 13, .2); }
.f3-ar__np.is-next { grid-column: 2; grid-template-columns: minmax(0, 1fr) 200px; padding: 32px 0 32px 40px; text-align: right; }
.f3-ar__np-i { display: block; width: 200px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--f3-plate); }
.f3-ar__np-i img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--f3-ease-expo); }
.f3-ar__np-i.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--f3-rule); box-sizing: border-box; }
.f3-ar__np-i .f3-jc__wm { font-size: 26px; }
.f3-ar__np-i .f3-jc__wk { font-size: 12px; }
.f3-ar__np-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.f3-ar__np.is-next .f3-ar__np-b { align-items: flex-end; }
.f3-ar__np-k { font-size: 12px; letter-spacing: .22em; }
.f3-ar__np-ja { font-family: var(--f3-ja-sans); letter-spacing: .1em; color: #3A3A3A; }
.f3-ar__np-d { font-size: 12px; color: #8C877E; }
.f3-ar__np-t { font-family: var(--f3-ja-sans); font-size: 17px; line-height: 1.65; transition: color .3s; }
@media (hover: hover) {
	.f3-ar__np:hover .f3-ar__np-t { color: var(--f3-french); }
	.f3-ar__np:hover .f3-ar__np-i img { transform: scale(1.03); }
}
.f3-ar__all { grid-column: 1 / -1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 40px; border: 1px solid var(--f3-ink); font-size: 12.5px; letter-spacing: .24em; color: var(--f3-ink); transition: background .3s, color .3s; }
.f3-ar__all:hover { background: var(--f3-ink); color: #F3F1EC; }
.f3-ar__all-ja { font-family: var(--f3-ja-sans); font-size: 12px; letter-spacing: .1em; }
.f3-ar a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---- Single: SP ------------------------------------------------------------------------------------------ */
@media (max-width: 899.98px) {
	.f3-ar { padding-bottom: 56px; }
	.f3-ar__hero { padding: 90px 0 0; gap: 28px; }
	.f3-ar__top { display: flex; flex-direction: column; gap: 16px; padding: 0 20px; }
	.f3-ar__back { font-size: 11px; align-items: center; min-height: 44px; }
	.f3-ar__back-ja { display: none; }
	.f3-ar__id { gap: 16px; }
	.f3-ar__cat, .f3-ar__date { font-size: 12px; letter-spacing: 0; }
	.f3-ar__t { font-size: 26px; line-height: 1.6; letter-spacing: .03em; }
	.f3-ar__fig img { aspect-ratio: 3 / 2; }
	.f3-ar__main { display: block; padding: 36px 20px; }
	.f3-ar__rail { display: none; }
	.f3-prose { font-size: 15.5px; line-height: 2.05; letter-spacing: .04em; }
	.f3-prose > * { margin-bottom: 28px; }
	.f3-prose h2 { margin-top: 44px; font-size: 20px; padding-top: 20px; }
	.f3-prose blockquote, .f3-prose .wp-block-quote { font-size: 17px; }
	.f3-prose figure, .f3-prose .wp-caption, .f3-prose .wp-block-image, .f3-prose > img, .f3-prose > p > img:only-child, .f3-prose .wp-block-embed, .f3-prose .wp-block-video { max-width: none; width: auto !important; margin-left: -20px; margin-right: -20px; }
	.f3-prose figcaption, .f3-prose .wp-caption-text, .f3-prose .wp-element-caption { padding: 0 20px; font-size: 11.5px; }
	.f3-prose .wp-block-gallery, .f3-prose .gallery { width: auto; max-width: none; margin: 0 -20px 28px; gap: 6px; }
	.f3-prose .wp-block-gallery figure img, .f3-prose .gallery img { aspect-ratio: 1; object-fit: cover; }
	.f3-prose .wp-block-gallery figcaption, .f3-prose .gallery-caption { display: none; }
	.f3-prose iframe { margin-left: 0; }
	.f3-ar__end { display: flex; flex-direction: column; padding: 0 0 48px; gap: 0; }
	.f3-ar__buy { display: flex; flex-direction: column; margin: 0 20px; }
	.f3-ar__buy-i { display: none; }
	.f3-ar__buy-b { padding: 28px 22px; gap: 18px; }
	.f3-ar__buy-k { display: none; }
	.f3-ar__buy-t { font-size: 30px; line-height: 1.05; }
	.f3-ar__buy-ja { font-size: 13.5px; letter-spacing: 0; }
	.f3-ar__buy-a { height: 56px; padding: 0 18px; justify-content: space-between; font-size: 12px; }
	.f3-ar__buy-a i, .f3-ar__buy-lja, .f3-ar__pro { display: none; }
	.f3-ar__nav { display: flex; flex-direction: column; margin: 40px 20px 0; }
	.f3-ar__np.is-prev, .f3-ar__np.is-next { display: block; grid-column: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(7, 9, 13, .2); text-align: left; }
	.f3-ar__np-i, .f3-ar__np-ja { display: none; }
	.f3-ar__np-b, .f3-ar__np.is-next .f3-ar__np-b { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 6px; }
	.f3-ar__np-k { font-size: 11px; }
	.f3-ar__np-d { font-size: 11px; letter-spacing: .22em; color: var(--f3-ink); }
	.f3-ar__np-d::before { content: ' · '; white-space: pre; }
	.f3-ar__np-t { flex-basis: 100%; font-size: 15px; }
	.f3-ar__all { margin: 28px 20px 0; height: 56px; padding: 0; flex-direction: row; justify-content: center; font-size: 12px; letter-spacing: .22em; }
	.f3-ar__all-ja { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.f3-jc__img img, .f3-jc__meta::after, .f3-jc__t, .f3-jp__step, .f3-ar__np-i img, .f3-ar__np-t { transition: none; }
	.f3-jc__a:hover .f3-jc__img img, .f3-ar__np:hover .f3-ar__np-i img { transform: none; }
	.f3-ar__fig img { animation: none; }
}

/* 50-home-pc.u.css */
/*
 * HOME re-architecture (RUN #27) — PC (≥ 900px). Authored in design units: `calc(96 * var(--u))` is 96px on the approved 1440 × 900 canvas,
 * scaled uniformly to the viewport (tools/build.mjs expands `Nu` → calc(N * var(--u))). Scenes are 100vh; their stage is a
 * calc(1440 * var(--u)) × calc(900 * var(--u)) box centred in it, so 1440 × 900 reproduces the approved renders exactly and 1280 × 720 is the same composition.
 *
 * Chapters: 01 FLAT3 (s1) · 02 SAINT-ÉMILION (s2) · 03 PHILIPPE & JAPAN (s3) · 04 JOURNAL · 05 OTHER WINES · 06 CONVERSION.
 */

@media (min-width: 900px) {
	:root { --u: min(calc(100vw / 1440), calc(100vh / 900)); }
}

/* Shared PC atoms ------------------------------------------------------------------------------------------------ */

.f3-pc-only .f3-ja-line { font-family: var(--f3-ja-sans); font-weight: 300; }
.f3-hm .f3-pair { gap: calc(4 * var(--u)); }
.f3-hm .f3-pair__ja { font-size: var(--ja, calc(13 * var(--u))); line-height: 1.6; letter-spacing: .06em; }

/* Home header (body.home): calc(76 * var(--u)) solid bar whose tint follows the scene underneath (data-f3-hdr set by home-chrome.ts). */
body.home .f3-header {
	mix-blend-mode: normal;
	height: 76px; padding: 0 48px;
	color: var(--f3-offwhite);
	background: transparent;
	transition: background-color .4s var(--f3-ease-panel), color .4s var(--f3-ease-panel);
	font-size: 12px; letter-spacing: .16em;
}
body.home .f3-header[data-f3-hdr="clear"] { background: linear-gradient(180deg, rgba(5, 11, 22, .5), rgba(5, 11, 22, 0)); }
body.home .f3-header[data-f3-hdr="night"] { background: rgba(5, 11, 22, .92); }
body.home .f3-header[data-f3-hdr="ink"] { background: rgba(7, 9, 13, .92); }
body.home .f3-header[data-f3-hdr="samurai"] { background: rgba(11, 45, 92, .94); }
body.home .f3-header[data-f3-hdr="light"] { background: rgba(243, 241, 236, .94); color: var(--f3-ink); }
body.home .f3-header[data-f3-hdr="light"] .f3-header__nav a { color: #55585e; }
body.home .f3-header[data-f3-hdr="light"] .f3-header__nav a[aria-current] { color: var(--f3-ink); border-bottom-color: var(--f3-ink); }
body.home .f3-header[data-f3-hdr="light"] .f3-header__pro { color: #55585e; }
body.home .f3-header[data-f3-hdr="light"] .f3-burger i { background: var(--f3-ink); }
body.home .f3-header__logo { font-family: var(--f3-sans); font-size: 18px; font-weight: 500; letter-spacing: .2em; }
body.home .f3-header__nav { gap: 36px; }
body.home .f3-header__nav a { color: var(--f3-silver); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .3s; }
body.home .f3-header__nav a:hover { color: var(--f3-offwhite); }
body.home .f3-header__nav a[aria-current] { color: var(--f3-offwhite); border-bottom-color: var(--f3-offwhite); }
body.home .f3-header__actions { gap: 24px; }
body.home .f3-header__pro { color: var(--f3-silver); }
body.home .f3-header__buy { background: var(--f3-french); border: 0; color: var(--f3-offwhite); padding: 11px 24px; font-weight: 400; }
body.home .f3-header__buy:hover { background: var(--f3-offwhite); color: var(--f3-samurai); }
body.home .f3-header[data-f3-hdr="light"] .f3-header__buy:hover { background: var(--f3-samurai); color: var(--f3-offwhite); }

/* In-page anchors inside the pinned stage land on the settled state of their screen. */
@media (min-width: 900px) {
	#wine.f3-anchor { top: 140vh; }
	#why.f3-anchor { top: 535vh; }
}

/* 01 — FLAT3: one continuous pinned stage -------------------------------------------------------------------------- */

.f3-s1 {
	position: relative; height: 650vh; background: var(--f3-night);
	--intro: 0; --h: 0; --v1: 0; --v2: 0; --v3: 0; --v4: 0; --v5: 0; --b6: 0; --gh: 0; --g5: 0;
	animation: f3-intro 2.6s var(--f3-ease-expo) .15s forwards;
}
.f3-s1__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--f3-night); }
.f3-s1__glow, .f3-s1__glow2 { position: absolute; left: 50%; top: 50%; width: calc(900 * var(--u)); height: calc(900 * var(--u)); transform: translate(-50%, -54%); pointer-events: none; }
.f3-s1__glow { background: radial-gradient(closest-side, rgba(31, 86, 168, .22), rgba(31, 86, 168, 0)); opacity: calc(var(--intro) * (1 - var(--b6))); transform: translate(calc(-50% - calc(122 * var(--u)) * var(--h)), -54%); }
.f3-s1__glow2 { background: radial-gradient(closest-side, rgba(31, 86, 168, .26), rgba(31, 86, 168, 0)); opacity: calc(var(--v2) * .75 * (1 - var(--b6))); transform: translate(calc(-50% - calc(122 * var(--u)) * var(--h)), -54%); }
.f3-s1__stage { position: absolute; left: 50%; top: 50%; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); transform: translate(-50%, -50%); font-family: var(--f3-sans); color: var(--f3-offwhite); }
.f3-s1__stage p, .f3-s1__stage h1, .f3-s1__stage h2 { margin: 0; }
.f3-s1 .f3-pair { gap: calc(4 * var(--u)); }
.f3-s1 .f3-pair__ja { font-size: var(--ja, calc(14 * var(--u))); }
.f3-s1__k { position: relative; font-family: var(--f3-mono); font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; color: var(--f3-warm); }
.f3-s1__st { position: absolute; inset: 0; pointer-events: none; }
.f3-s1__st a { pointer-events: auto; }

/* S01 — hero */
.f3-s1__st--0 { opacity: calc(var(--intro) * (1 - var(--h))); }
.f3-s1__hero { position: absolute; inset: 0; margin: 0; font-weight: 200; }
.f3-s1__flatwrap { position: absolute; left: calc(96 * var(--u)); top: calc(262 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); transform: translateX(calc(-8vw * var(--h))); }
.f3-s1__flat { font-size: max(calc(220 * var(--u)), 11px); line-height: .78; letter-spacing: calc(.05em + (1 - var(--intro)) * .08em); }
.f3-s1__by { font-size: max(calc(18 * var(--u)), 11px); font-weight: 300; letter-spacing: .42em; color: var(--f3-silver); padding-left: calc(10 * var(--u)); }
.f3-s1__three { position: absolute; right: calc(120 * var(--u)); top: calc(76 * var(--u)); display: flex; flex-direction: column; align-items: center; color: var(--f3-french); transform: scale(calc(1 + .48 * var(--h))); transform-origin: 40% 40%; }
.f3-s1__3 { font-size: max(calc(660 * var(--u)), 11px); line-height: .86; font-weight: 200; }
.f3-s1__word { font-size: max(calc(15 * var(--u)), 11px); font-weight: 400; letter-spacing: .7em; color: var(--f3-silver); padding-left: .7em; }
.f3-s1__aoc { position: absolute; left: calc(96 * var(--u)); bottom: calc(72 * var(--u)); --ja: max(15.5px, calc(16 * var(--u))); font-size: max(calc(18 * var(--u)), 11px); letter-spacing: .24em; }
.f3-s1__aoc .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__aoc .f3-pair__ja { letter-spacing: .06em; }
.f3-s1__cta { position: absolute; right: calc(96 * var(--u)); bottom: calc(64 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.f3-s1__buy { display: flex; flex-direction: column; justify-content: center; min-width: calc(230 * var(--u)); padding: calc(16 * var(--u)) calc(28 * var(--u)); background: var(--f3-french); color: var(--f3-offwhite); font-size: max(calc(15 * var(--u)), 11px); letter-spacing: .18em; font-weight: 500; --ja: max(14px, calc(13.5 * var(--u))); transition: background .3s var(--f3-ease-panel), color .3s var(--f3-ease-panel); }
.f3-s1__buy .f3-pair__ja { font-weight: 400; letter-spacing: .02em; color: inherit; }
.f3-s1__buy:hover { background: var(--f3-offwhite); color: var(--f3-samurai); }
.f3-s1__pro { display: flex; flex-direction: column; justify-content: center; min-width: calc(200 * var(--u)); padding: calc(16 * var(--u)) calc(28 * var(--u)); border: 1px solid rgba(243, 241, 236, .45); font-size: max(calc(15 * var(--u)), 11px); letter-spacing: .18em; --ja: max(14px, calc(13.5 * var(--u))); transition: border-color .3s, background .3s; }
.f3-s1__pro:hover { color: var(--f3-offwhite); border-color: var(--f3-offwhite); background: rgba(243, 241, 236, .08); }

/* The bottle: one element, pinned S01 → S05, released in S06 (Part A §A4). */
.f3-s1__bottle {
	position: absolute; left: calc(720 * var(--u)); top: calc(479 * var(--u)); width: calc(256 * var(--u)); height: calc(810 * var(--u)); z-index: 2;
	opacity: calc(var(--intro) * (1 - var(--b6)));
	transform: translate(calc(-50% - calc(122 * var(--u)) * var(--h)), calc(-50% + (1 - var(--intro)) * calc(24 * var(--u)) + calc(5 * var(--u)) * var(--h) - 18vh * var(--b6))) scale(calc(1 - .062 * var(--h)));
}
.f3-s1__bottle .f3-bottle, .f3-s1__bottle img.f3-bottle--image { width: 100%; height: 100%; object-fit: contain; }

/* Ghost 3: the hero 3 drifts right and becomes a ghost (S02–S03), returns at 32% in S05. */
.f3-s1__ghost { position: absolute; right: calc(-40 * var(--u)); top: calc(20 * var(--u)); font-weight: 200; font-size: max(calc(980 * var(--u)), 11px); line-height: .86; color: var(--f3-french); opacity: var(--ghost, 0); transform: translateX(var(--ghx, calc(0 * var(--u)))); z-index: 0; pointer-events: none; }

/* Rail */
.f3-s1__rail { position: absolute; left: calc(48 * var(--u)); top: calc(330 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); font-family: var(--f3-mono); font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; color: #5d6470; opacity: calc(var(--v1) + var(--v2) + var(--v3) + var(--v4)); }
.f3-s1__ri { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-left: calc(34 * var(--u)); transition: padding .3s var(--f3-ease-panel), color .3s; }
.f3-s1__ri i { display: none; width: calc(24 * var(--u)); height: 1px; background: var(--f3-french); }
.f3-s1[data-f3-active="1"] .f3-s1__ri:nth-child(1), .f3-s1[data-f3-active="2"] .f3-s1__ri:nth-child(2), .f3-s1[data-f3-active="3"] .f3-s1__ri:nth-child(3), .f3-s1[data-f3-active="4"] .f3-s1__ri:nth-child(4) { color: var(--f3-offwhite); padding-left: 0; }
.f3-s1[data-f3-active="1"] .f3-s1__ri:nth-child(1) i, .f3-s1[data-f3-active="2"] .f3-s1__ri:nth-child(2) i, .f3-s1[data-f3-active="3"] .f3-s1__ri:nth-child(3) i, .f3-s1[data-f3-active="4"] .f3-s1__ri:nth-child(4) i { display: block; }

/* S02 / S03 — blend */
.f3-s1__st--1 { opacity: var(--v1); }
.f3-s1__st--2 { opacity: var(--v2); }
.f3-s1__st--1 .f3-s1__k, .f3-s1__st--2 .f3-s1__k { position: absolute; left: calc(820 * var(--u)); top: calc(196 * var(--u)); }
.f3-s1__num { position: absolute; left: calc(820 * var(--u)); top: calc(224 * var(--u)); font-weight: 200; font-size: max(calc(300 * var(--u)), 11px); line-height: .82; letter-spacing: -.01em; transform: translateY(calc((1 - var(--v1)) * calc(24 * var(--u)))); }
.f3-s1__num small { font-size: max(calc(110 * var(--u)), 11px); vertical-align: top; line-height: 1.4; }
.f3-s1__num.is-blue { color: var(--f3-french); transform: translateY(calc((1 - var(--v2)) * calc(40 * var(--u)))); }
.f3-s1__grape { position: absolute; left: calc(820 * var(--u)); top: calc(496 * var(--u)); font-size: max(calc(44 * var(--u)), 11px); font-weight: 300; letter-spacing: .2em; --ja: max(19.5px, calc(20.5 * var(--u))); }
.f3-s1__grape .f3-pair { gap: calc(14 * var(--u)); }
.f3-s1__grape .f3-pair__ja { letter-spacing: .02em; }
.f3-s1__st--1 .f3-s1__note, .f3-s1__st--2 .f3-s1__note { position: absolute; left: calc(820 * var(--u)); top: calc(620 * var(--u)); width: calc(440 * var(--u)); font-size: max(calc(17 * var(--u)), 11px); line-height: 1.6; color: var(--f3-mist); --ja: max(15.5px, calc(16 * var(--u))); }
.f3-s1__note .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__note .f3-pair__ja { line-height: 1.7; letter-spacing: .02em; }
.f3-s1__bar { position: absolute; left: calc(820 * var(--u)); right: calc(96 * var(--u)); bottom: calc(72 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.f3-s1__bar > div { display: flex; height: 2px; }
.f3-s1__bar i { display: block; }
.f3-s1__bar i.is-m { flex: 9; background: var(--f3-offwhite); transform-origin: left; transform: scaleX(var(--bar, 1)); }
.f3-s1__bar i.is-c { flex: 1; background: #2a3140; }
.f3-s1__bar.is-cf i.is-m { background: #3a4150; transform: none; }
.f3-s1__bar.is-cf i.is-c { background: var(--f3-french); }
.f3-s1__bar p { display: flex; justify-content: space-between; font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; color: var(--f3-warm); }
.f3-s1__bar .is-m { color: var(--f3-offwhite); }
.f3-s1__bar .is-c { color: var(--f3-warm); }
.f3-s1__bar.is-cf p .is-m { color: var(--f3-warm); }
.f3-s1__bar.is-cf p .is-c { color: var(--f3-offwhite); }

/* S04 — tasting */
.f3-s1__st--3 { opacity: var(--v3); }
.f3-s1__st--3 .f3-s1__k { position: absolute; left: calc(820 * var(--u)); top: calc(170 * var(--u)); }
.f3-s1__h { position: absolute; left: calc(820 * var(--u)); top: calc(192 * var(--u)); font-size: max(calc(44 * var(--u)), 11px); font-weight: 300; letter-spacing: .16em; --ja: max(19.5px, calc(20.5 * var(--u))); }
.f3-s1__h .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__h .f3-pair__ja { letter-spacing: .02em; }
.f3-s1__notes { position: absolute; left: calc(820 * var(--u)); right: calc(96 * var(--u)); top: calc(300 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(48 * var(--u)); grid-auto-flow: row; transform: translateY(calc((1 - var(--v3)) * calc(16 * var(--u)))); }
.f3-s1__notes li { display: flex; gap: calc(18 * var(--u)); align-items: baseline; border-top: 1px solid #2a3140; padding: calc(18 * var(--u)) 0; --ja: max(14.5px, calc(15 * var(--u))); }
.f3-s1__notes li.is-first { border-top-color: var(--f3-french); }
.f3-s1__notes li.is-last { border-bottom: 1px solid #2a3140; }
.f3-s1__notes .f3-mono { font-size: max(calc(11 * var(--u)), 11px); color: var(--f3-french); }
.f3-s1__notes .f3-pair { gap: calc(4 * var(--u)); }
.f3-s1__notes .f3-pair__en { font-size: max(calc(36 * var(--u)), 11px); font-weight: 200; line-height: 1.2; }
.f3-s1__st--3 .f3-s1__foot { position: absolute; left: calc(820 * var(--u)); top: calc(676 * var(--u)); max-width: calc(500 * var(--u)); font-size: max(calc(17 * var(--u)), 11px); line-height: 1.6; color: var(--f3-mist); --ja: max(15.5px, calc(16 * var(--u))); }
.f3-s1__st--3 .f3-s1__foot .f3-pair { gap: calc(6 * var(--u)); }
.f3-s1__st--3 .f3-s1__foot .f3-pair__ja { color: var(--f3-silver); }

/* S05 — texture */
.f3-s1__st--4 { opacity: var(--v4); }
.f3-s1__st--4 .f3-s1__k { position: absolute; left: calc(820 * var(--u)); top: calc(146 * var(--u)); }
.f3-s1__st--4 .f3-s1__h { top: calc(168 * var(--u)); }
.f3-s1__lines { position: absolute; left: calc(640 * var(--u)); right: 0; top: calc(400 * var(--u)); display: flex; flex-direction: column; gap: calc(64 * var(--u)); }
.f3-s1__lines li { display: flex; flex-direction: column; gap: calc(12 * var(--u)); --ja: max(15.5px, calc(16 * var(--u))); }
.f3-s1__lines li p { display: flex; gap: calc(20 * var(--u)); align-items: baseline; padding-left: calc(150 * var(--u)); opacity: calc(var(--v4)); }
.f3-s1__lines .f3-mono { font-size: max(calc(11 * var(--u)), 11px); color: #9DB8E6; }
.f3-s1__lines li .f3-pair { display: flex; flex-direction: row; align-items: baseline; gap: calc(20 * var(--u)); }
.f3-s1__lines li .f3-pair__ja { flex: none; white-space: nowrap; }
.f3-s1__lines li .f3-pair__en { font-size: max(calc(30 * var(--u)), 11px); font-weight: 300; letter-spacing: .16em; }
.f3-s1__lines li i { display: block; height: 2px; background: var(--f3-french); transform-origin: left; transform: scaleX(var(--l, 1)); }
.f3-s1__st--4 .f3-s1__foot.is-inline { position: absolute; left: calc(820 * var(--u)); bottom: calc(72 * var(--u)); top: auto; max-width: none; font-size: max(calc(16 * var(--u)), 11px); color: var(--f3-mist); }
.f3-s1__foot.is-inline .f3-pair { flex-direction: row; align-items: baseline; gap: calc(10 * var(--u)); }

/* S06 — Why FLAT3 */
.f3-s1__st--5 { opacity: var(--v5); }
.f3-s1__whyhead { position: absolute; left: calc(96 * var(--u)); top: calc(130 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); transform: translateY(calc((1 - var(--v5)) * calc(36 * var(--u)))); }
.f3-s1__why { font-weight: 200; font-size: max(calc(140 * var(--u)), 11px); line-height: .9; letter-spacing: .01em; white-space: nowrap; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.f3-s1__why b { font-weight: 200; color: var(--f3-french); }
.f3-s1__whyja { font-family: var(--f3-ja-sans); font-size: max(calc(20 * var(--u)), 11px); font-weight: 400; letter-spacing: .06em; line-height: 1.6; color: var(--f3-silver); }
.f3-s1__whycopy { position: absolute; right: calc(96 * var(--u)); top: calc(176 * var(--u)); width: calc(440 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); transform: translateY(calc((1 - var(--v5)) * calc(24 * var(--u)))); }
.f3-s1__lead { font-size: max(calc(22 * var(--u)), 11px); font-weight: 300; line-height: 1.35; --ja: max(16.5px, calc(17 * var(--u))); }
.f3-s1__lead .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__copy { margin-top: calc(8 * var(--u)); font-size: max(calc(15 * var(--u)), 11px); line-height: 1.65; color: var(--f3-mist); --ja: max(14.5px, calc(15 * var(--u))); }
.f3-s1__copy .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__copy .f3-pair__ja { line-height: 1.75; }
.f3-s1__horizon { position: absolute; left: 0; right: 0; top: calc(512 * var(--u)); height: 2px; background: var(--f3-french); transform-origin: left; transform: scaleX(var(--v5)); }
.f3-s1__ptb { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(540 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u)); }
.f3-s1__ptb li { display: flex; flex-direction: column; gap: calc(8 * var(--u)); opacity: var(--v5); transform: translateY(calc((1 - var(--v5)) * calc(20 * var(--u)))); }
.f3-s1__ptb .f3-mono { font-size: max(calc(11 * var(--u)), 11px); color: #9DB8E6; }
.f3-s1__w { --ja: calc(28 * var(--u)); }
.f3-s1__w .f3-pair { gap: calc(8 * var(--u)); }
.f3-s1__w .f3-pair__en { font-size: max(calc(88 * var(--u)), 11px); font-weight: 200; line-height: 1; letter-spacing: .04em; }
.f3-s1__w .f3-pair__ja { font-weight: 300; letter-spacing: .02em; color: var(--f3-offwhite); }
.f3-s1__wd { font-size: max(calc(14 * var(--u)), 11px); color: var(--f3-silver); line-height: 1.6; margin-top: calc(6 * var(--u)); }
.f3-s1__whyfoot { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); bottom: calc(56 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; }
.f3-s1__whyfoot a { pointer-events: auto; }
.f3-s1__facts { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; color: var(--f3-warm); }
.f3-s1__facts:hover { color: var(--f3-offwhite); }

/* Static layout (reduced motion / no JS): six stacked 100vh screens, each with its own bottle where the stage has one. */
html:not(.f3-motion) .f3-s1 { height: auto; animation: none; --intro: 1; }
html:not(.f3-motion) .f3-s1__sticky { position: relative; height: auto; overflow: visible; }
html:not(.f3-motion) .f3-s1__glow, html:not(.f3-motion) .f3-s1__glow2, html:not(.f3-motion) .f3-s1__ghost, html:not(.f3-motion) .f3-s1__rail, html:not(.f3-motion) .f3-s1__bottle { display: none; }
html:not(.f3-motion) .f3-s1__stage { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; }
html:not(.f3-motion) .f3-s1__st { position: relative; inset: auto; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); margin: 0 auto; opacity: 1 !important; border-bottom: 1px solid rgba(243, 241, 236, .08); }
html:not(.f3-motion) .f3-s1__st > * { transform: none !important; }
html:not(.f3-motion) .f3-s1__st--0 .f3-s1__flatwrap, html:not(.f3-motion) .f3-s1__st--0 .f3-s1__three { transform: none; }
html:not(.f3-motion) .f3-s1__st--1::before, html:not(.f3-motion) .f3-s1__st--2::before, html:not(.f3-motion) .f3-s1__st--3::before, html:not(.f3-motion) .f3-s1__st--4::before, html:not(.f3-motion) .f3-s1__st--0::before {
	content: ''; position: absolute; top: calc(74 * var(--u)); height: calc(760 * var(--u)); width: calc(240 * var(--u)); left: calc(478 * var(--u)); background: url('../img/flat3-bottle.png') center / contain no-repeat;
}
html:not(.f3-motion) .f3-s1__st--0::before { left: calc(592 * var(--u)); top: calc(74 * var(--u)); height: calc(810 * var(--u)); width: calc(256 * var(--u)); }
html:not(.f3-motion) .f3-s1__bar i.is-m, html:not(.f3-motion) .f3-s1__lines li i, html:not(.f3-motion) .f3-s1__horizon { transform: none; }

/* Shared scene scaffolding (chapters 02–06) --------------------------------------------------------------------------- */

.f3-s2__stage, .f3-s3__stage, .f3-s4__stage, .f3-s5__stage, .f3-s6__stage { position: relative; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); margin: 0 auto; font-family: var(--f3-sans); }
.f3-s2-sc, .f3-s3-sc { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.f3-s2__stage, .f3-s3__stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.f3-s2 p, .f3-s2 h2, .f3-s2 h3, .f3-s3 p, .f3-s3 h2, .f3-s3 h3, .f3-s4 p, .f3-s4 h2, .f3-s5 p, .f3-s5 h2, .f3-s6 p, .f3-s6 h2 { margin: 0; }
.f3-s2 figure, .f3-s3 figure { margin: 0; }
.f3-s2 .f3-pair, .f3-s3 .f3-pair, .f3-s6 .f3-pair { gap: calc(4 * var(--u)); }
.f3-s2 .f3-pair__ja, .f3-s3 .f3-pair__ja { font-size: var(--ja, calc(13 * var(--u))); letter-spacing: .04em; line-height: 1.7; }
.f3-s2 .f3-photo, .f3-s3 .f3-photo, .f3-s4 .f3-photo, .f3-s5 .f3-photo, .f3-s6 .f3-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.f3-s2__k, .f3-s3__k { font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; }
.f3-s2 a:hover, .f3-s3 a:hover { color: inherit; }
.is-light { background: var(--f3-offwhite); color: var(--f3-ink); }
.is-ink { background: var(--f3-ink); color: var(--f3-offwhite); }
.is-light .f3-pair__ja { color: #55585e; }
.f3-pending {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); text-align: center;
	background: repeating-linear-gradient(135deg, #E6E2DA 0 calc(10 * var(--u)), #DEDAD1 calc(10 * var(--u)) calc(20 * var(--u))); color: var(--f3-ink);
}
.f3-pending .f3-mono { font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .1em; }
.f3-pending .f3-mono.is-sub { font-size: max(calc(10 * var(--u)), 10px); color: var(--f3-warm); letter-spacing: .02em; }
.f3-pending.is-dark { background: repeating-linear-gradient(135deg, #0d1118 0 calc(10 * var(--u)), #121823 calc(10 * var(--u)) calc(20 * var(--u))); border: 1px solid #20262f; color: var(--f3-silver); }
.f3-pending.is-dark .f3-mono.is-sub { color: #5d6470; }

/* Fade-up on entry (motion only) */
html.f3-motion .f3-s2b [data-f3-fade], html.f3-motion .f3-s2b__text > *, html.f3-motion .f3-s2c__steps > li, html.f3-motion .f3-s2c__head > *, html.f3-motion .f3-s2d__text > *, html.f3-motion .f3-s2d__who li,
html.f3-motion .f3-s3a__head, html.f3-motion .f3-s3a__p, html.f3-motion .f3-s3b__cols > li, html.f3-motion .f3-card, html.f3-motion .f3-wine {
	opacity: 0; transform: translateY(calc(16 * var(--u))); transition: opacity .9s var(--f3-ease-expo), transform .9s var(--f3-ease-expo);
}
html.f3-motion .is-in .f3-s2b__text > *, html.f3-motion .is-in.f3-s2b .f3-s2b__text > *, html.f3-motion .is-in .f3-s2c__steps > li, html.f3-motion .is-in .f3-s2c__head > *, html.f3-motion .is-in .f3-s2d__text > *, html.f3-motion .is-in .f3-s2d__who li,
html.f3-motion .is-in .f3-s3a__head, html.f3-motion .is-in .f3-s3a__p, html.f3-motion .is-in .f3-s3b__cols > li, html.f3-motion .f3-card.is-in, html.f3-motion .f3-wine.is-in { opacity: 1; transform: none; }
html.f3-motion .f3-s2b__text > :nth-child(2), html.f3-motion .f3-s2c__steps > li:nth-child(2) { transition-delay: .08s; }
html.f3-motion .f3-s2b__text > :nth-child(3), html.f3-motion .f3-s2c__steps > li:nth-child(3) { transition-delay: .16s; }
html.f3-motion .f3-s2b__text > :nth-child(4), html.f3-motion .f3-s2c__steps > li:nth-child(4) { transition-delay: .24s; }
html.f3-motion .f3-s3b__cols > li:nth-child(2), html.f3-motion .f3-card:nth-child(3n+2), html.f3-motion .f3-wine:nth-child(2) { transition-delay: .1s; }
html.f3-motion .f3-s3b__cols > li:nth-child(3), html.f3-motion .f3-card:nth-child(3n), html.f3-motion .f3-wine:nth-child(3) { transition-delay: .2s; }
html.f3-motion .f3-wine:nth-child(4) { transition-delay: .3s; }
html.f3-motion .f3-wine:nth-child(5) { transition-delay: .4s; }

/* 02 — SAINT-ÉMILION ------------------------------------------------------------------------------------------------- */

.f3-s2 { position: relative; background: var(--f3-night); }
.f3-s2a { position: relative; height: 200vh; --r: 1; --ly: calc((100vh - calc(900 * var(--u))) / 2 + calc(512 * var(--u))); }
.f3-s2a__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--f3-night); }
.f3-s2a__photo { position: absolute; inset: 0; clip-path: inset(calc(var(--ly) * (1 - var(--r))) 0 calc((100vh - var(--ly)) * (1 - var(--r))) 0); }
.f3-s2a__photo .f3-photo { transform: scale(calc(1.08 - .08 * var(--r))); }
.f3-s2a__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 22, .5) 0, rgba(5, 11, 22, 0) calc(140 * var(--u))), linear-gradient(90deg, rgba(5, 11, 22, .82) 0%, rgba(5, 11, 22, .45) 45%, rgba(5, 11, 22, 0) 75%); }
.f3-s2a__sticky::after { content: ''; position: absolute; left: 0; right: 0; top: var(--ly); height: 2px; background: var(--f3-french); opacity: calc(1 - var(--r)); transform-origin: left; }
.f3-s2a .f3-s2__stage { z-index: 2; color: var(--f3-offwhite); }
.f3-s2a__title { position: absolute; left: calc(96 * var(--u)); top: calc(230 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); opacity: var(--tt, 1); transform: translateY(calc((1 - var(--tt, 1)) * calc(24 * var(--u)))); }
.f3-s2a__title .f3-mono { font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; }
.f3-s2a__h { margin: 0; font-weight: 200; font-size: max(calc(150 * var(--u)), 11px); line-height: .9; letter-spacing: .01em; }
.f3-s2a__sub { font-size: max(calc(24 * var(--u)), 11px); letter-spacing: .3em; margin-top: calc(8 * var(--u)); --ja: max(18.5px, calc(19.5 * var(--u))); }
.f3-s2a__sub .f3-pair { gap: calc(12 * var(--u)); }
.f3-s2a__sub .f3-pair__ja { letter-spacing: .02em; font-weight: 400; color: var(--f3-offwhite); }
.f3-s2a__estate { position: absolute; left: calc(96 * var(--u)); bottom: calc(72 * var(--u)); width: calc(520 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); border-top: 2px solid var(--f3-french); padding-top: calc(18 * var(--u)); opacity: var(--tt, 1); }
.f3-s2a__lock .f3-pair__en { font-size: max(calc(13 * var(--u)), 11px); letter-spacing: .22em; }
.f3-s2a__lock .f3-pair__ja { font-size: max(calc(12 * var(--u)), 11px); color: var(--f3-mist); }
.f3-s2a__line { margin-top: calc(8 * var(--u)); --ja: max(15.5px, calc(16 * var(--u))); }
.f3-s2a__line .f3-pair__en { font-size: max(calc(20 * var(--u)), 11px); font-weight: 300; }
.f3-s2a__line .f3-pair__ja { color: var(--f3-mist); }
.f3-s2a__line.f3-pair { gap: calc(6 * var(--u)); }

.f3-s2b .f3-s2b__img { position: absolute; left: 0; top: calc(76 * var(--u)); width: calc(760 * var(--u)); height: calc(824 * var(--u)); object-position: 30% 70%; }
.f3-s2b__inset { position: absolute; left: calc(600 * var(--u)); bottom: calc(72 * var(--u)); width: calc(300 * var(--u)) !important; height: calc(200 * var(--u)) !important; border: calc(8 * var(--u)) solid var(--f3-offwhite); }
.f3-s2b__text { position: absolute; left: calc(960 * var(--u)); right: calc(96 * var(--u)); top: calc(170 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.f3-s2b .f3-s2__k { color: var(--f3-french); }
.f3-s2b__t { font-size: max(calc(40 * var(--u)), 11px); font-weight: 300; letter-spacing: .16em; --ja: max(17.5px, calc(18 * var(--u))); }
.f3-s2b__t .f3-pair { gap: calc(8 * var(--u)); }
.f3-s2b__h { margin: calc(20 * var(--u)) 0 0; font-weight: 200; font-size: max(calc(52 * var(--u)), 11px); line-height: 1.05; }
.f3-s2b__p { font-size: max(calc(16 * var(--u)), 11px); line-height: 1.65; color: #3a3d44; --ja: max(15.5px, calc(16 * var(--u))); }
.f3-s2b__p .f3-pair { gap: calc(16 * var(--u)); }
.f3-s2b__p .f3-pair__ja { line-height: 1.8; }
.f3-s2b__layers { position: absolute; left: calc(960 * var(--u)); right: calc(96 * var(--u)); bottom: calc(72 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--f3-french); }
.f3-s2b__layers span { padding-top: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.f3-s2b__layers i { font-style: normal; font-size: max(calc(10 * var(--u)), 10px); color: var(--f3-warm); letter-spacing: .12em; }
.f3-s2b__layers b { font-weight: 400; font-size: max(calc(17 * var(--u)), 11px); letter-spacing: .1em; white-space: nowrap; }
.f3-s2b__layers em { font-style: normal; font-family: var(--f3-ja-sans); font-size: max(calc(13 * var(--u)), 11px); color: #55585e; }
.f3-s2b__layers:hover b { color: var(--f3-french); }

.f3-s2c__head { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(136 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; }
.f3-s2c__head > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.f3-s2c__head .f3-s2__k { color: var(--f3-french); }
.f3-s2c__h { margin: 0; font-weight: 200; font-size: max(calc(72 * var(--u)), 11px); line-height: 1; letter-spacing: .02em; }
.f3-s2c__ja { font-family: var(--f3-ja-sans); font-size: max(calc(16 * var(--u)), 11px); color: #55585e; }
.f3-s2c__lead { max-width: calc(380 * var(--u)); font-size: max(calc(15 * var(--u)), 11px); line-height: 1.6; color: #3a3d44; --ja: max(14.5px, calc(15 * var(--u))); }
.f3-s2c__lead .f3-pair { gap: calc(6 * var(--u)); }
.f3-s2c__rule { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(330 * var(--u)); height: 2px; background: var(--f3-mist); }
.f3-s2c__rule i { display: block; height: 2px; background: var(--f3-french); transform-origin: left; transform: scaleX(var(--rule, 1)); transition: transform 1.4s var(--f3-ease-expo); }
html.f3-motion .f3-s2c { --rule: 0; }
html.f3-motion .f3-s2c.is-in { --rule: 1; }
.f3-s2c__steps { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(356 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin: 0; padding: 0; list-style: none; }
.f3-s2c__steps li { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.f3-s2c__steps .f3-photo, .f3-s2c__steps .f3-pending { width: 100%; height: calc(330 * var(--u)); flex: none; }
.f3-s2c__n { display: flex; gap: calc(12 * var(--u)); align-items: baseline; font-size: max(calc(18 * var(--u)), 11px); letter-spacing: .16em; }
.f3-s2c__n .f3-mono { font-size: max(calc(11 * var(--u)), 11px); color: var(--f3-french); letter-spacing: 0; }
.f3-s2c__d { font-size: max(calc(14 * var(--u)), 11px); line-height: 1.5; color: #3a3d44; --ja: max(14px, calc(13.5 * var(--u))); }
.f3-s2c__d .f3-pair { gap: calc(6 * var(--u)); }
.f3-s2__more { position: absolute; right: calc(96 * var(--u)); bottom: calc(40 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }

.f3-s2d { position: relative; background: var(--f3-offwhite); color: var(--f3-ink); transition: background-color .9s var(--f3-ease-panel), color .9s var(--f3-ease-panel); }
.f3-s2d.is-dark { background: var(--f3-ink); color: var(--f3-offwhite); }
/* RUN #34 — normal flow: the section grows with its copy. Only the photograph is sticky. */
.f3-s2d__wrap { display: grid; grid-template-columns: calc(880 * var(--u)) minmax(0, 1fr); column-gap: calc(80 * var(--u)); align-items: start; box-sizing: border-box; width: 100%; max-width: 1600px; margin: 0 auto; padding: calc(132 * var(--u)) calc(96 * var(--u)) calc(120 * var(--u)) 0; font-family: var(--f3-sans); }
.f3-s2d__sticky { position: sticky; top: calc(100 * var(--u)); }
.f3-s2d__photo { position: relative; margin: 0; width: calc(880 * var(--u)); height: calc(724 * var(--u)); }
.f3-s2d__photo .f3-photo { transition: filter .9s var(--f3-ease-panel), transform 1.2s var(--f3-ease-panel); }
.f3-s2d.is-dark .f3-s2d__photo .f3-photo { transform: scale(1.04); }
.f3-s2d__photo figcaption { position: absolute; left: calc(24 * var(--u)); bottom: calc(24 * var(--u)); font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .1em; color: var(--f3-offwhite); background: rgba(7, 9, 13, .6); padding: calc(6 * var(--u)) calc(10 * var(--u)); }
.f3-s2d__col { display: flex; flex-direction: column; gap: calc(56 * var(--u)); min-width: 0; }
.f3-s2d__text { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.f3-s2d .f3-s2__k { color: var(--f3-french); }
.f3-s2d__h { margin: 0; font-weight: 200; font-size: max(calc(56 * var(--u)), 11px); line-height: 1.05; }
.f3-s2d__ja { font-family: var(--f3-ja-sans); font-size: max(calc(16 * var(--u)), 11px); color: #55585e; transition: color .9s; }
.f3-s2d__p { margin-top: calc(10 * var(--u)); font-size: max(calc(15 * var(--u)), 11px); line-height: 1.65; color: #3a3d44; --ja: max(14.5px, calc(15 * var(--u))); transition: color .9s; }
.f3-s2d__p .f3-pair { gap: calc(8 * var(--u)); }
.f3-s2d__p .f3-pair__ja { line-height: 1.8; }
.f3-s2d.is-dark .f3-s2d__ja, .f3-s2d.is-dark .f3-s2d__p, .f3-s2d.is-dark .f3-s2d__p .f3-pair__ja, .f3-s2d.is-dark .f3-s2d__who span { color: var(--f3-silver); }
.f3-s2d__who { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.f3-s2d__who li { display: flex; flex-direction: column; gap: 8px; padding: 26px 0; border-top: 1px solid var(--f3-mist); }
.f3-s2d__who li.is-first { border-top: 2px solid var(--f3-french); }
.f3-s2d__who li:last-child { border-bottom: 1px solid var(--f3-mist); }
.f3-s2d.is-dark .f3-s2d__who li:not(.is-first) { border-color: rgba(243, 241, 236, .2); }
.f3-s2d__who b { font-weight: 400; font-size: max(calc(22 * var(--u)), 11px); letter-spacing: .14em; }
.f3-s2d__who span { font-size: max(calc(13 * var(--u)), 11px); color: #55585e; }
.f3-s2d__who .f3-s2d__role { letter-spacing: .16em; }
.f3-s2d__who span i { display: inline-block; font-style: normal; margin-right: 1.2em; }
.f3-s2d__who li.is-first .f3-s2d__role { color: var(--f3-french); }
.f3-s2d__links { margin: 0; display: flex; flex-wrap: wrap; gap: 20px calc(32 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; }
.f3-s2d__links a { border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }

/* 03 — PHILIPPE TROUSSIER & JAPAN -------------------------------------------------------------------------------------- */

.f3-s3 { position: relative; background: var(--f3-ink); color: var(--f3-offwhite); }
.f3-s3a__photo { position: absolute; left: 0; top: 0; width: calc(600 * var(--u)); height: calc(900 * var(--u)); }
.f3-s3a__photo .f3-photo { }
.f3-s3a__head { position: absolute; left: calc(680 * var(--u)); right: calc(96 * var(--u)); top: calc(150 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.f3-s3__k { color: var(--f3-warm); }
/* RUN #33 — a clear break from THE TEAM (ink) into Philippe's own story: chapter 03 opens in Deep Samurai. */
.f3-s3a.is-ink { background: var(--f3-samurai); }
.f3-s3a .f3-s3__k { color: #9DB8E6; }
.f3-s3a .f3-s3a__past { color: #7F98C2; }
.f3-s3a .f3-s3a__p { border-top-color: var(--f3-offwhite); }
.f3-s3a__h { font-size: max(calc(26 * var(--u)), 11px); font-weight: 300; letter-spacing: .12em; --ja: max(17.5px, calc(18 * var(--u))); }
.f3-s3a__h .f3-pair { gap: calc(10 * var(--u)); }
.f3-s3a__h .f3-pair__ja { font-weight: 400; letter-spacing: .04em; }
.f3-s3a__past { position: absolute; left: calc(680 * var(--u)); right: calc(96 * var(--u)); top: calc(330 * var(--u)); display: flex; gap: calc(48 * var(--u)); margin: 0; padding: 0; list-style: none; font-size: max(calc(28 * var(--u)), 11px); letter-spacing: .2em; color: #5d6470; font-weight: 300; }
.f3-s3a__past li { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.f3-s3a__past b { font-weight: 300; }
.f3-s3a__past .f3-mono { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; }
.f3-s3a__past span[lang="ja"] { font-family: var(--f3-ja-sans); font-size: max(calc(13 * var(--u)), 11px); letter-spacing: .06em; }
.f3-s3a__now { position: absolute; left: calc(668 * var(--u)); right: calc(40 * var(--u)); top: calc(470 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.f3-s3a__now .f3-mono { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; color: #9DB8E6; padding-left: calc(12 * var(--u)); }
.f3-s3a__w { font-weight: 200; font-size: max(calc(126 * var(--u)), 11px); line-height: .82; letter-spacing: .01em; white-space: nowrap; }
.f3-s3a__wja { font-family: var(--f3-ja-sans); font-size: max(calc(22 * var(--u)), 11px); font-weight: 300; padding-left: calc(12 * var(--u)); }
html.f3-motion .f3-s3a__w { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--f3-ease-expo) .3s; }
html.f3-motion .f3-s3a.is-in .f3-s3a__w { clip-path: inset(0 0 0 0); }
html.f3-motion .f3-s3a__past li { opacity: 0; transition: opacity 1s .1s; }
html.f3-motion .f3-s3a.is-in .f3-s3a__past li { opacity: 1; }
.f3-s3a__p { position: absolute; left: calc(680 * var(--u)); right: calc(96 * var(--u)); bottom: calc(72 * var(--u)); border-top: 2px solid var(--f3-french); padding-top: calc(18 * var(--u)); font-size: max(calc(16 * var(--u)), 11px); line-height: 1.6; color: var(--f3-mist); --ja: max(14.5px, calc(15 * var(--u))); }
.f3-s3a__p .f3-pair { gap: calc(6 * var(--u)); }
.f3-s3a__p .f3-pair__ja { line-height: 1.8; color: var(--f3-silver); }

.f3-s3b { background: color-mix(in srgb, var(--f3-samurai) calc(var(--x, 0) * 100%), var(--f3-ink)); }
.f3-s3b__route { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(140 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .14em; color: var(--f3-warm); }
.f3-s3b__route i { flex: 1; height: 1px; background: var(--f3-french); margin: 0 calc(28 * var(--u)); transform-origin: left; transform: scaleX(var(--route, 1)); transition: transform 1.4s var(--f3-ease-expo); }
html.f3-motion .f3-s3b { --route: 0; }
html.f3-motion .f3-s3b.is-in { --route: 1; }
.f3-s3b__route .is-east { color: #9DB8E6; }
.f3-s3b__cols { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(206 * var(--u)); bottom: calc(72 * var(--u)); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u)); }
.f3-s3b__cols li { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.f3-s3b__cols .f3-photo, .f3-s3b__cols .f3-pending { width: 100%; height: calc(300 * var(--u)); flex: none; }
.f3-s3b__y { font-weight: 200; font-size: max(calc(120 * var(--u)), 11px); line-height: .85; margin-top: calc(12 * var(--u)) !important; }
.f3-s3b__y.is-blue { color: var(--f3-french); }
.f3-s3b__t { font-size: max(calc(20 * var(--u)), 11px); letter-spacing: .2em; }
.f3-s3b__d { font-size: max(calc(15 * var(--u)), 11px); line-height: 1.6; color: var(--f3-mist); --ja: max(14.5px, calc(15 * var(--u))); }
.f3-s3b__d .f3-pair__ja { color: var(--f3-silver); }
.f3-s3b__d.is-ja-only .f3-pair__en { display: none; }
.f3-s3b__more { margin-top: auto; font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }

.f3-s3c { position: relative; height: 250vh; background: color-mix(in srgb, var(--f3-samurai) calc(var(--x, 1) * 100%), var(--f3-ink)); --x: 1; --pl: 1; --n0: 1; --n1: 1; --n2: 1; --nf: 1; }
.f3-s3c__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.f3-s3c__l { position: absolute; left: calc(96 * var(--u)); top: calc(200 * var(--u)); width: calc(520 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.f3-s3c__l .f3-s3__k { color: var(--f3-silver); }
.f3-s3c__h { margin: 0; font-weight: 200; font-size: max(calc(112 * var(--u)), 11px); line-height: .9; letter-spacing: .02em; }
.f3-s3c__sub { font-size: max(calc(20 * var(--u)), 11px); letter-spacing: .2em; margin-top: calc(10 * var(--u)) !important; }
.f3-s3c__by { font-size: max(calc(14 * var(--u)), 11px); letter-spacing: .22em; color: var(--f3-silver); }
.f3-s3c__ja { font-family: var(--f3-ja-sans); font-size: max(calc(15 * var(--u)), 11px); color: var(--f3-mist); }
.f3-s3c__q { border-top: 2px solid var(--f3-offwhite); margin-top: calc(40 * var(--u)) !important; padding-top: calc(18 * var(--u)); --ja: max(16.5px, calc(17 * var(--u))); }
.f3-s3c__q .f3-pair { gap: calc(6 * var(--u)); }
.f3-s3c__q .f3-pair__en { font-size: max(calc(26 * var(--u)), 11px); font-weight: 300; }
.f3-s3c__q .f3-pair__ja { color: var(--f3-mist); }
.f3-s3c__more { margin-top: calc(24 * var(--u)); align-self: flex-start; font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }
.f3-s3c__pitch { position: absolute; left: calc(760 * var(--u)); top: calc(110 * var(--u)); width: calc(580 * var(--u)); height: calc(740 * var(--u)); border: 1px solid rgba(243, 241, 236, .4); }
.f3-s3c__pitch > i { position: absolute; border: 1px solid rgba(243, 241, 236, .4); opacity: var(--pl); }
.f3-s3c__halfway { left: 0; right: 0; top: 50%; height: 0; border-width: 1px 0 0 !important; transform-origin: left; transform: scaleX(var(--pl)); }
.f3-s3c__circle { left: 50%; top: 50%; width: calc(150 * var(--u)); height: calc(150 * var(--u)); transform: translate(-50%, -50%) scale(var(--pl)); border-radius: 50%; }
.f3-s3c__box { left: 50%; width: calc(260 * var(--u)); height: calc(110 * var(--u)); transform: translateX(-50%); }
.f3-s3c__box.is-top { top: 0; border-top: 0 !important; }
.f3-s3c__box.is-bottom { bottom: 0; border-bottom: 0 !important; }
.f3-s3c__row { position: absolute; left: 0; right: 0; display: flex; justify-content: space-around; }
.f3-s3c__row.is-front { top: calc(120 * var(--u)); }
.f3-s3c__row.is-mid { top: calc(330 * var(--u)); }
.f3-s3c__row.is-back { top: calc(540 * var(--u)); }
.f3-s3c__node { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); width: calc(120 * var(--u)); }
.f3-s3c__row.is-mid .f3-s3c__node { width: calc(110 * var(--u)); }
.f3-s3c__row.is-back .f3-s3c__node { width: calc(140 * var(--u)); }
.f3-s3c__node i { display: block; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: 1px solid rgba(243, 241, 236, .6); }
.f3-s3c__node.is-on i { background: var(--f3-offwhite); border-color: var(--f3-offwhite); }
.f3-s3c__node.is-flat3 i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); background: var(--f3-french); border-color: var(--f3-french); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(31, 86, 168, .35); }
.f3-s3c__node b { font-weight: 400; font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .12em; white-space: nowrap; }
.f3-s3c__node.is-flat3 b { font-size: max(calc(15 * var(--u)), 11px); font-weight: 500; }
.f3-s3c__row.is-back .f3-s3c__node { opacity: var(--n0); }
.f3-s3c__row.is-mid .f3-s3c__node:not(.is-flat3) { opacity: var(--n1); }
.f3-s3c__row.is-front .f3-s3c__node { opacity: var(--n2); }
.f3-s3c__node.is-flat3 { opacity: var(--nf); }
.f3-s3c__node.is-flat3 i { animation: f3-pulse 1.6s var(--f3-ease-expo) 1 both paused; animation-play-state: var(--pulse, paused); }
@keyframes f3-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 86, 168, .8); } 100% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(31, 86, 168, .35); } }
.f3-s3c__fm { position: absolute; right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); font-size: max(calc(10 * var(--u)), 10px); letter-spacing: .12em; color: var(--f3-silver); }

/* 04 — JOURNAL --------------------------------------------------------------------------------------------------------- */

.f3-s4 { position: relative; background: var(--f3-offwhite); color: var(--f3-ink); padding: calc(120 * var(--u)) 0 calc(48 * var(--u)); }
.f3-s4__stage { height: auto; }
.f3-s4__head { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 calc(96 * var(--u)); border-bottom: 1px solid var(--f3-ink); padding-bottom: calc(24 * var(--u)); }
.f3-s4__head > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.f3-s4__n { font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; color: var(--f3-french); }
.f3-s4__h { margin: 0; font-weight: 300; font-size: max(calc(56 * var(--u)), 11px); letter-spacing: .06em; line-height: 1; }
.f3-s4__ja { font-family: var(--f3-ja-sans); font-size: max(calc(16 * var(--u)), 11px); color: #55585e; }
.f3-s4__all, .f3-s4__foot { font-size: max(calc(13 * var(--u)), 11px); letter-spacing: .16em; }
.f3-s4__all { border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }
.f3-s4__all:hover, .f3-s4__foot:hover { color: var(--f3-french); }
.f3-s4__tools { display: flex; align-items: flex-end; gap: calc(28 * var(--u)); }
.f3-s4__nav { display: flex; gap: calc(8 * var(--u)); }
.f3-s4__nav button { width: calc(44 * var(--u)); min-width: 40px; height: calc(44 * var(--u)); min-height: 40px; display: grid; place-items: center; border: 1px solid var(--f3-ink); background: transparent; color: var(--f3-ink); font: inherit; font-size: max(calc(16 * var(--u)), 11px); cursor: pointer; transition: background .25s, color .25s, opacity .25s; }
.f3-s4__nav button:hover:not(:disabled) { background: var(--f3-ink); color: var(--f3-offwhite); }
.f3-s4__nav button:disabled { opacity: .3; cursor: default; }
/* RUN #33 — HOME Journal is ONE horizontal row: scroll-snap rail, ~3.5 cards visible, never wraps. */
.f3-s4__rail { margin: calc(44 * var(--u)) 0 0; }
.f3-s4__track { list-style: none; margin: 0; padding: 0 calc(96 * var(--u)) calc(8 * var(--u)); display: flex; flex-wrap: nowrap; gap: calc(32 * var(--u)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: calc(96 * var(--u)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.f3-s4__track::-webkit-scrollbar { display: none; }
.f3-s4__track:focus-visible { outline: 1px solid var(--f3-ink); outline-offset: 4px; }
.f3-s4__track > .f3-card { flex: 0 0 calc((100% - calc(192 * var(--u)) - 3 * calc(32 * var(--u))) / 3.5); scroll-snap-align: start; min-width: 0; }
html.f3-motion .f3-s4__track > .f3-card { opacity: 1; transform: none; transition-delay: 0s; } /* the rail is its own scroll surface: never wait on a vertical reveal */
.f3-card a { display: flex; flex-direction: column; gap: calc(14 * var(--u)); color: var(--f3-ink); }
.f3-card__img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #d9d6cf; }
.f3-card__img > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.f3-card__img .f3-photo { transition: transform .8s var(--f3-ease-expo); }
.f3-card a:hover .f3-card__img .f3-photo { transform: scale(1.03); }
.f3-card__img.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); background: repeating-linear-gradient(135deg, #0d1422 0 calc(10 * var(--u)), #111a2b calc(10 * var(--u)) calc(20 * var(--u))); color: var(--f3-silver); }
.f3-card__img.is-pending .f3-mono { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .1em; }
.f3-card__img.is-pending .f3-mono.is-sub { font-size: max(calc(10 * var(--u)), 10px); color: #5d6470; letter-spacing: 0; }
.f3-card__meta { display: flex; gap: calc(14 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .1em; }
.f3-card__cat { color: var(--f3-french); text-transform: uppercase; }
.f3-card__meta time { color: var(--f3-warm); }
.f3-card__title { font-family: var(--f3-ja-sans); font-size: max(calc(19 * var(--u)), 11px); line-height: 1.6; font-weight: 500; text-wrap: pretty; }
.f3-card a:hover .f3-card__title { text-decoration: underline; text-underline-offset: calc(4 * var(--u)); text-decoration-thickness: 1px; }
.f3-s4__foot { display: flex; width: max-content; margin: calc(56 * var(--u)) auto 0; border: 1px solid var(--f3-ink); padding: calc(16 * var(--u)) calc(40 * var(--u)); }

/* 05 — OTHER WINES ----------------------------------------------------------------------------------------------------- */

.f3-s5 { position: relative; height: 100vh; background: var(--f3-night); color: var(--f3-offwhite); overflow: hidden; }
.f3-s5__stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.f3-s5__head { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(130 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; }
.f3-s5__head > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.f3-s5__n { font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; color: var(--f3-warm); }
.f3-s5__h { margin: 0; font-weight: 300; font-size: max(calc(34 * var(--u)), 11px); letter-spacing: .08em; line-height: 1.1; }
.f3-s5__ja { font-family: var(--f3-ja-sans); font-size: max(calc(15 * var(--u)), 11px); color: var(--f3-silver); }
.f3-s5__all { font-size: max(calc(13 * var(--u)), 11px); letter-spacing: .16em; border-bottom: 1px solid currentColor; padding-bottom: calc(4 * var(--u)); }
.f3-s5__all:hover { color: var(--f3-silver); }
.f3-s5__grid { position: absolute; left: calc(96 * var(--u)); right: calc(96 * var(--u)); top: calc(290 * var(--u)); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(32 * var(--u)); }
.f3-wine a { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid #2a3140; padding-top: calc(16 * var(--u)); min-height: calc(540 * var(--u)); color: var(--f3-offwhite); }
.f3-wine__img { width: 100%; flex: none; }
.f3-wine__img.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); text-align: center; background: repeating-linear-gradient(135deg, #0b1220 0 calc(10 * var(--u)), #0f1829 calc(10 * var(--u)) calc(20 * var(--u))); border: 1px solid #1c2433; }
.f3-wine__img.is-pending .f3-mono { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .1em; color: var(--f3-silver); }
.f3-wine__img.is-pending .f3-mono.is-sub { font-size: max(calc(10 * var(--u)), 10px); color: #5d6470; letter-spacing: 0; }
.f3-wine__name { font-size: max(calc(18 * var(--u)), 11px); letter-spacing: .14em; margin-top: calc(6 * var(--u)); }
.f3-wine__ja { font-family: var(--f3-ja-sans); font-size: max(calc(12 * var(--u)), 11px); color: var(--f3-silver); margin-top: calc(-4 * var(--u)); }
.f3-wine__spec { font-size: max(calc(10 * var(--u)), 10px); letter-spacing: .08em; color: var(--f3-warm); line-height: 1.5; }
.f3-wine__line { font-size: max(calc(14 * var(--u)), 11px); line-height: 1.55; color: var(--f3-mist); }
.f3-wine__go { margin-top: auto; font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; }
.f3-wine a:hover .f3-wine__go { text-decoration: underline; text-underline-offset: calc(4 * var(--u)); }

/* 06 — CONVERSION ------------------------------------------------------------------------------------------------------ */

.f3-s6 { position: relative; height: 100vh; background: var(--f3-samurai); color: var(--f3-offwhite); overflow: hidden; }
.f3-s6__stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.f3-s6__title { position: absolute; left: calc(96 * var(--u)); top: calc(136 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.f3-s6__title h2 { font-weight: 200; font-size: max(calc(92 * var(--u)), 11px); line-height: .95; letter-spacing: .01em; }
.f3-s6__title p { font-family: var(--f3-ja-sans); font-size: max(calc(18 * var(--u)), 11px); color: var(--f3-mist); }
.f3-s6__buy { position: absolute; left: calc(96 * var(--u)); top: calc(430 * var(--u)); width: calc(760 * var(--u)); height: calc(300 * var(--u)); background: var(--f3-french); display: grid; grid-template-columns: calc(230 * var(--u)) minmax(0, 1fr); color: var(--f3-offwhite); transition: background .3s var(--f3-ease-panel); }
.f3-s6__buy:hover { background: #2a68bf; color: var(--f3-offwhite); }
.f3-s6__buy .f3-photo { width: calc(230 * var(--u)); height: calc(300 * var(--u)); }
.f3-s6__bt { padding: calc(36 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.f3-s6__bt .f3-mono, .f3-s6__pro .f3-mono { font-size: max(calc(11 * var(--u)), 11px); letter-spacing: .14em; color: var(--f3-mist); }
.f3-s6__bt b { font-weight: 300; font-size: max(calc(48 * var(--u)), 11px); letter-spacing: .08em; line-height: 1; }
.f3-s6__bja { font-family: var(--f3-ja-sans); font-size: max(calc(20 * var(--u)), 11px); }
.f3-s6__bsub { font-size: max(calc(13 * var(--u)), 11px); color: var(--f3-mist); }
.f3-s6__go { margin-top: auto; font-size: max(calc(14 * var(--u)), 11px); letter-spacing: .18em; font-weight: 500; }
.f3-s6__pro { position: absolute; left: calc(888 * var(--u)); right: calc(96 * var(--u)); top: calc(430 * var(--u)); height: calc(300 * var(--u)); border: 1px solid rgba(243, 241, 236, .5); padding: calc(36 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); color: var(--f3-offwhite); transition: background .3s, border-color .3s; }
.f3-s6__pro:hover { background: rgba(243, 241, 236, .08); border-color: var(--f3-offwhite); color: var(--f3-offwhite); }
.f3-s6__pro b { font-weight: 300; font-size: max(calc(36 * var(--u)), 11px); letter-spacing: .08em; line-height: 1; }
.f3-s6__pja { font-family: var(--f3-ja-sans); font-size: max(calc(18 * var(--u)), 11px); }
.f3-s6__ptags { font-size: max(calc(13 * var(--u)), 11px); color: var(--f3-mist); line-height: 1.6; }
.f3-s6__pro .f3-s6__go { font-size: max(calc(14 * var(--u)), 11px); letter-spacing: .18em; font-weight: 400; }

/* Static layout (reduced motion / no JS) for chapters 02–06 */
html:not(.f3-motion) .f3-s2a { height: 100vh; --r: 1; --tt: 1; }
html:not(.f3-motion) .f3-s2a__sticky, html:not(.f3-motion) .f3-s2d__sticky, html:not(.f3-motion) .f3-s3c__sticky { position: relative; }
html:not(.f3-motion) .f3-s3c { height: 100vh; --x: 1; --pl: 1; --n0: 1; --n1: 1; --n2: 1; --nf: 1; }
html:not(.f3-motion) .f3-s2a__sticky::after { display: none; }

/* 51-home-sp.css */
/*
 * HOME re-architecture (RUN #27) — SP (< 900px). Separate architecture from PC: one screen = one message, 390 base, touch-first.
 * Type floors (Part A §A6): EN body ≥ 15px, JA body ≥ 13px — remove the sentence rather than shrink the type.
 * Screens (Issue #44 SP IA): m1 FLAT3 · m5 Saint-Émilion · m6 Philippe Troussier · m9 other wines · m8 journal · m10 buy.
 * The former m2 blend / m3 tasting / m4 why / m7 lineup screens are gone from SP HOME — /wines/flat3/ and /wine-football/ carry them.
 */

@media (max-width: 899.98px) {
	html { scroll-snap-type: y proximity; }

	/* Header (home): logo + BUY pill (until the sticky bar appears) + two-line burger, tinted by the scene underneath. */
	body.home .f3-header { height: 64px; padding: 0 20px; mix-blend-mode: normal; color: var(--f3-offwhite); transition: background-color .4s var(--f3-ease-panel), color .4s; }
	body.home .f3-header[data-f3-hdr="clear"] { background: linear-gradient(180deg, rgba(5, 11, 22, .5), rgba(5, 11, 22, 0)); }
	body.home .f3-header[data-f3-hdr="night"] { background: rgba(5, 11, 22, .92); }
	body.home .f3-header[data-f3-hdr="ink"] { background: rgba(7, 9, 13, .92); }
	body.home .f3-header[data-f3-hdr="samurai"] { background: rgba(11, 45, 92, .94); }
	body.home .f3-header[data-f3-hdr="light"] { background: rgba(243, 241, 236, .94); color: var(--f3-ink); }
	body.home .f3-header[data-f3-hdr="light"] .f3-burger i { background: var(--f3-ink); }
	body.home .f3-header__logo { font-family: var(--f3-sans); font-size: 15px; font-weight: 500; letter-spacing: .2em; }
	body.home .f3-header__actions { gap: 14px; }
	body.home .f3-header__menu { min-width: 44px; min-height: 44px; }
	body.home .f3-header__menu .f3-sp-only { display: none; }
	body.home .f3-burger { gap: 5px; width: 22px; }
	body.home .f3-burger i:nth-child(3) { display: none; }
	.f3-header__buyp { display: none; }
	body.home .f3-header__buyp { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px; background: linear-gradient(var(--f3-french), var(--f3-french)) center / 100% 32px no-repeat; color: var(--f3-offwhite); font-size: 11px; letter-spacing: .14em; transition: opacity .3s; }
	body.home.f3-bar-on .f3-header__buyp { opacity: 0; visibility: hidden; pointer-events: none; }

	/* Sticky bottom bar (home): BUY FLAT3 ↗ (French Blue) / PROFESSIONAL (Samurai), 64px. */
	body.home .f3-ctabar { height: calc(64px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1.4fr 1fr; background: var(--f3-samurai); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px; letter-spacing: .14em; }
	body.home .f3-ctabar__buy { background: var(--f3-french); padding: 0 18px; justify-content: space-between; font-weight: 500; }
	body.home .f3-ctabar__pro { padding: 0 16px; justify-content: flex-start; font-size: 11px; }
	body.home .f3-ctabar .f3-pair { gap: 2px; }
	body.home .f3-ctabar .f3-pair__ja { font-size: 12.5px; letter-spacing: .02em; font-weight: 400; }

	/* Screen scaffolding */
	.f3-m { position: relative; min-height: 100svh; overflow: hidden; scroll-snap-align: start; padding: 96px 22px calc(88px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; font-family: var(--f3-sans); }
	:where(.f3-m) :where(h1, h2, p, ol, ul, dl, figure) { margin: 0; padding: 0; }
	.f3-m .f3-pair { gap: 4px; }
	.f3-m .f3-pair__ja { font-size: var(--ja, 13px); letter-spacing: .04em; line-height: 1.6; }
	.f3-m__k { font-family: var(--f3-mono); font-size: 10px; letter-spacing: .14em; color: var(--f3-warm); }
	.f3-m__k.is-blue { color: var(--f3-french); }
	.f3-m1 { background: var(--f3-night); color: var(--f3-offwhite); }

	/* m1 — FLAT3: one word, the bottle as the subject, AOC + maker, then DISCOVER (primary) / BUY. Understood without scrolling. */
	.f3-m1 { --intro: 0; padding: 0; animation: f3-intro 2.4s var(--f3-ease-expo) .15s forwards; }
	.f3-m1__glow { position: absolute; left: 34%; top: 16svh; width: 90vw; height: 72svh; background: radial-gradient(closest-side, rgba(31, 86, 168, .28), rgba(31, 86, 168, 0)); opacity: var(--intro); }
	.f3-m1__title { position: absolute; left: 22px; right: 22px; top: max(84px, 11svh); margin: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 200; opacity: var(--intro); z-index: 3; }
	.f3-m1__word { font-size: min(112px, 28vw, 14.5svh); line-height: .8; letter-spacing: .02em; white-space: nowrap; }
	.f3-m1__word b { font-weight: 200; color: var(--f3-french); }
	.f3-m1__by { font-size: 11px; font-weight: 300; letter-spacing: .36em; color: var(--f3-silver); padding-left: 4px; }
	/* Issue #47 — the bottle is a protagonist: ~1.5× larger, moved in from the right edge (6vw), its neck rising behind the wordmark. --bw is the bottle's width. */
	.f3-m1 { --bw: min(49vw, calc((100svh - 232px) * .3156), 210px); }
	.f3-m1__bottle { position: absolute; right: 6vw; bottom: 112px; width: var(--bw); aspect-ratio: 0.3156; opacity: var(--intro); transform: translateY(calc((1 - var(--intro)) * 3svh)); z-index: 2; will-change: transform; }
	.f3-m1__bottle .f3-bottle, .f3-m1__bottle img.f3-bottle--image { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
	.f3-m1__meta { position: absolute; left: 22px; width: calc(100vw - var(--bw) - 6vw - 22px - 12px); bottom: 124px; display: flex; flex-direction: column; gap: 14px; opacity: var(--intro); z-index: 3; }
	.f3-m1__meta .f3-pair { gap: 6px; }
	.f3-m1__aoc { font-size: 12px; letter-spacing: .16em; line-height: 1.5; --ja: 13px; }
	.f3-m1__who { font-size: 11px; letter-spacing: .2em; line-height: 1.5; color: var(--f3-silver); --ja: 13px; }
	.f3-m1__meta .f3-pair__ja { color: var(--f3-silver); letter-spacing: .04em; }
	.f3-m1__who .f3-pair__ja { color: var(--f3-offwhite); }
	.f3-m1__cta { position: absolute; left: 22px; right: 22px; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto; gap: 10px; opacity: var(--intro); z-index: 3; }
	.f3-m1__know, .f3-m1__buy { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px; font-size: 13px; letter-spacing: .12em; white-space: nowrap; --ja: 12.5px; }
	.f3-m1__know .f3-pair, .f3-m1__buy .f3-pair, body.home .f3-ctabar .f3-pair { align-items: flex-start; }
	.f3-m1__know { background: var(--f3-french); color: var(--f3-offwhite); font-weight: 500; }
	.f3-m1__know .f3-pair__ja { font-weight: 400; letter-spacing: .02em; color: inherit; }
	/* BUY stays one clear tap away, but as the quieter secondary: compact outline next to the primary DISCOVER (Issue #47). */
	.f3-m1__buy { border: 1px solid rgba(243, 241, 236, .5); background: rgba(5, 11, 22, .35); color: var(--f3-offwhite); font-size: 11.5px; letter-spacing: .12em; padding: 8px 12px; }

	/* m5 — Saint-Émilion */
	.f3-m5 { background: var(--f3-offwhite); color: var(--f3-ink); padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px)); }
	.f3-m5__photo { position: relative; height: min(37svh, 320px); flex: none; } /* Issue #49: the chapter also carries TERROIR / FROM VINE TO WINE, so the photograph gives the room back */
	.f3-m5__photo .f3-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
	.f3-m5__t { padding: 26px 22px 0; display: flex; flex-direction: column; gap: 8px; }
	.f3-m5__h { font-weight: 200; font-size: min(48px, 12.3vw); line-height: .95; }
	.f3-m5__ja { font-family: var(--f3-ja-sans); font-size: 13px; color: #55585e; }
	.f3-m5__p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: #3a3d44; --ja: 14.5px; }
	.f3-m5__p .f3-pair { gap: 4px; }
	.f3-m5__p .f3-pair__ja { color: #55585e; }
	.f3-m5__facts { margin: auto 22px 0; padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 2px solid var(--f3-french); }
	.f3-m5__facts div { display: flex; flex-direction: column; gap: 2px; }
	.f3-m5__facts dd { margin: 0; font-size: 26px; font-weight: 200; }
	.f3-m5__facts dt { font-size: 10px; color: #6b6e74; letter-spacing: .08em; }
	.f3-m5__more { margin: 14px 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 8px 0; border-top: 1px solid var(--f3-mist); border-bottom: 1px solid var(--f3-mist); font-size: 13px; letter-spacing: .16em; --ja: 13px; }
	.f3-m5__more .f3-pair, .f3-m6__more .f3-pair { gap: 2px; align-items: flex-start; }
	.f3-m5__more .f3-pair__ja { color: #55585e; }

	/* m6 — Philippe Troussier: who makes it, the Japan years, the name. Deep routes to /wine-football/ and /philippe-troussier/. */
	.f3-m6 { background: var(--f3-ink); color: var(--f3-offwhite); padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px)); border-top: 8px solid var(--f3-samurai); box-shadow: inset 0 3px 0 var(--f3-french); } /* RUN #33: unmistakable break after the Estate / Team screen */
	.f3-m6__photo { position: relative; height: min(40svh, 360px); flex: none; }
	.f3-m6__photo .f3-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
	.f3-m6__t { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 6px; }
	.f3-m6__name { margin-top: 4px !important; font-size: 20px; font-weight: 300; letter-spacing: .14em; }
	.f3-m6__past { margin-top: 6px !important; font-size: 13px; letter-spacing: .2em; color: #8a909b; }
	.f3-m6__w { font-weight: 200; font-size: min(54px, 13.8vw); line-height: .9; white-space: nowrap; }
	.f3-m6__ja { font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-silver); }
	.f3-m6__japan { margin: 18px 22px 0; padding-top: 12px; border-top: 2px solid var(--f3-french); display: flex; flex-direction: column; gap: 6px; }
	.f3-m6__era { font-size: 11px; letter-spacing: .12em; color: #9DB8E6; }
	.f3-m6__jp { font-family: var(--f3-ja-sans); font-size: 14px; line-height: 1.7; color: var(--f3-mist); }
	.f3-m6__name3 { margin: 14px 22px 0; }
	.f3-m6__why { font-size: 15px; line-height: 1.5; font-weight: 300; --ja: 14px; }
	.f3-m6__why .f3-pair { gap: 6px; }
	.f3-m6__why .f3-pair__ja { color: var(--f3-silver); line-height: 1.7; }
	.f3-m6__more { margin: 16px 22px 0; list-style: none; border-top: 1px solid #2a3140; }
	.f3-m6__more a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid #2a3140; font-size: 13px; letter-spacing: .16em; color: var(--f3-offwhite); --ja: 13px; }
	.f3-m6__more .f3-pair__ja { color: var(--f3-silver); }

	/* m8 — journal */
	.f3-m8 { background: var(--f3-offwhite); color: var(--f3-ink); padding-top: 88px; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } /* Issue #47: the full-bleed lead + NEXT cue must not push the chapter past ~1.1 viewports */
	.f3-m8__head { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--f3-ink); padding-bottom: 14px; }
	.f3-m8__head h2 { font-size: 30px; font-weight: 300; letter-spacing: .06em; }
	.f3-m8__ja { font-family: var(--f3-ja-sans); font-size: 13px; color: #55585e; }
	/* Issue #44 — a vertical list (no horizontal swipe): one lead card, then compact rows. */
	.f3-m8__list { list-style: none; margin: 14px -22px 0; padding: 0; display: flex; flex-direction: column; }
	.f3-m8__list li { min-width: 0; }
	.f3-m8__list a { display: flex; flex-direction: column; gap: 12px; color: var(--f3-ink); }
	.f3-m8__list .is-lead { padding-bottom: 14px; }
	.f3-m8__list .is-row { border-top: 1px solid #d2cec6; }
	.f3-m8__list .is-row a { flex-direction: row; align-items: flex-start; gap: 14px; padding: 11px 0; min-height: 88px; }
	.f3-m8__list .is-row .f3-m8__img { flex: 0 0 34%; }
	.f3-m8__list .is-row .f3-m8__txt { flex: 1; min-width: 0; }
	.f3-m8__list .is-row .f3-m8__title { font-size: 14px; line-height: 1.55; }
	.f3-m8__img.is-pending { flex-direction: column; gap: 6px; }
	.f3-m8__list .is-row .f3-m8__img.is-pending .f3-jc__wm { font-size: 22px; }
	.f3-m8__list .is-row .f3-m8__img.is-pending .f3-jc__wk { font-size: 9px; }
	/* Issue #47 — the list itself spans the viewport so the lead image is true full bleed; the lead's text and the compact rows keep the 22px inset. */
	.f3-m8__list .is-lead .f3-m8__txt { padding-inline: 22px; }
	.f3-m8__list .is-row { margin-inline: 22px; }
	.f3-m8__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.f3-m8__img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; overflow: hidden; background: #d9d6cf; }
	.f3-m8__img .f3-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
	.f3-m8__img.is-pending { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #0d1422 0 6px, #111a2b 6px 12px); }
	.f3-m8__img.is-pending .f3-mono { font-size: 9px; color: var(--f3-silver); letter-spacing: .06em; }
	.f3-m8__txt { display: flex; flex-direction: column; gap: 5px; }
	.f3-m8__meta { display: flex; gap: 10px; font-size: 10px; letter-spacing: .08em; }
	.f3-m8__meta span { color: var(--f3-french); text-transform: uppercase; }
	.f3-m8__meta time { color: var(--f3-warm); }
	.f3-m8__title { font-family: var(--f3-ja-sans); font-size: 14px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }
	.f3-m8__all { margin-top: 8px; border: 1px solid var(--f3-ink); padding: 14px; text-align: center; font-size: 12px; letter-spacing: .16em; min-height: 48px; }

	/* m9 — other wines (swipe) */
	.f3-m9 { background: var(--f3-night); color: var(--f3-offwhite); padding-left: 0; padding-right: 0; }
	.f3-m9__head { padding: 0 22px; display: flex; flex-direction: column; gap: 6px; }
	.f3-m9__head h2 { font-size: 20px; font-weight: 300; letter-spacing: .08em; line-height: 1.3; }
	.f3-m9__ja { font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-silver); }
	.f3-m9__rail { list-style: none; display: flex; gap: 16px; margin-top: 26px; padding: 0 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
	.f3-m9__rail::-webkit-scrollbar { display: none; }
	.f3-m9__rail li { flex: 0 0 250px; scroll-snap-align: start; }
	.f3-m9__rail a { display: flex; flex-direction: column; gap: 8px; color: var(--f3-offwhite); height: 100%; }
	.f3-m9__img { width: 250px; }
	.f3-m9__img.is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient(135deg, #0b1220 0 10px, #0f1829 10px 20px); border: 1px solid #1c2433; }
	.f3-m9__img.is-pending .f3-mono { font-size: 10px; color: var(--f3-silver); }
	.f3-m9__img.is-pending .f3-mono.is-sub { color: #5d6470; }
	.f3-m9__name { font-size: 17px; letter-spacing: .14em; }
	.f3-m9__nja { font-family: var(--f3-ja-sans); font-size: 12px; color: var(--f3-silver); margin-top: -4px; }
	.f3-m9__spec { font-size: 10px; letter-spacing: .06em; color: var(--f3-warm); line-height: 1.5; }
	.f3-m9__line { font-size: 14px; line-height: 1.5; color: var(--f3-mist); }
	.f3-m9__feat { font-family: var(--f3-ja-sans); font-size: 13px; line-height: 1.6; color: var(--f3-silver); }
	.f3-m9__go { margin-top: auto; font-size: 11px; letter-spacing: .16em; padding-top: 6px; }
	.f3-m9__pager { display: flex; gap: 6px; padding: 22px 22px 0; }
	.f3-m9__pager i { display: block; width: 12px; height: 2px; background: #3a4150; transition: width .3s, background .3s; }
	.f3-m9__pager i.is-on { width: 24px; background: var(--f3-french); }
	.f3-m9__all { margin: 10px 22px 0; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; letter-spacing: .16em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

	/* m10 — conversion */
	.f3-m10 { background: var(--f3-samurai); color: var(--f3-offwhite); gap: 14px; padding-bottom: 0; }
	.f3-m10__title h2 { font-weight: 200; font-size: min(44px, 11.3vw); line-height: 1; }
	.f3-m10__title p { margin-top: 8px; font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-mist); }
	.f3-m10__buy { display: flex; flex-direction: column; background: var(--f3-french); color: var(--f3-offwhite); margin-top: 8px; }
	.f3-m10__buy .f3-photo { display: block; width: 100%; height: min(190px, 24svh); object-fit: cover; }
	.f3-m10__bt { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
	.f3-m10__bt b { font-size: 24px; font-weight: 300; letter-spacing: .08em; }
	.f3-m10__bt span[lang="ja"] { font-family: var(--f3-ja-sans); font-size: 14px; }
	.f3-m10__go { margin-top: 8px; font-size: 12px; letter-spacing: .16em; font-weight: 500; }
	.f3-m10__pro { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid rgba(243, 241, 236, .5); padding: 16px 18px; color: var(--f3-offwhite); min-height: 64px; }
	.f3-m10__pt { display: flex; flex-direction: column; gap: 4px; }
	.f3-m10__pt b { font-size: 17px; font-weight: 400; letter-spacing: .1em; }
	.f3-m10__pt span { font-family: var(--f3-ja-sans); font-size: 13px; color: var(--f3-mist); }
	.f3-m10__foot { margin: auto -22px 0; padding: 18px 22px calc(26px + env(safe-area-inset-bottom, 0px)); background: var(--f3-night); display: flex; flex-direction: column; gap: 14px; }
	.f3-m10__contact { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid rgba(243, 241, 236, .3); font-size: 12px; letter-spacing: .16em; min-height: 44px; }
	.f3-m10__contact span[lang="ja"] { font-family: var(--f3-ja-sans); font-size: 12px; color: var(--f3-silver); letter-spacing: 0; }
	.f3-m10__links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; letter-spacing: .14em; color: var(--f3-silver); }
	.f3-m10__links a { min-height: 32px; display: inline-flex; align-items: center; }
	.f3-m10__addr { font-size: 10px; letter-spacing: .08em; color: var(--f3-warm); }
	.f3-m10__legal { font-family: var(--f3-mono); font-size: 10px; line-height: 1.7; letter-spacing: .04em; color: var(--f3-warm); }
	/* ---- Issue #47: chapter language (progress in the header, NEXT cues) and the FLAT3 三 device ---- */
	/* 三 / three flat bars: one element, bars drawn with box-shadow. */
	.f3-three { display: inline-block; flex: none; width: 16px; height: 1.5px; margin: 0 0 10px; background: var(--f3-french); box-shadow: 0 5px 0 var(--f3-french), 0 10px 0 var(--f3-french); transform-origin: 0 50%; }
	.f3-m__k { display: flex; align-items: center; gap: 10px; }
	.f3-m__k::before { content: ""; flex: none; width: 14px; height: 1.5px; margin-bottom: 10px; background: var(--f3-french); box-shadow: 0 5px 0 var(--f3-french), 0 10px 0 var(--f3-french); transform-origin: 0 50%; }
	.f3-m6 .f3-m__k::before, .f3-m9 .f3-m__k::before { background: #7FA6EC; box-shadow: 0 5px 0 #7FA6EC, 0 10px 0 #7FA6EC; }

	.f3-next { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin-top: auto; padding-top: 10px; font-size: 10.5px; letter-spacing: .16em; color: inherit; opacity: .78; }
	.f3-m5 .f3-next, .f3-m8 .f3-next, .f3-m6 .f3-next, .f3-m9 .f3-next { margin-top: 14px; }
	.f3-m5 .f3-next, .f3-m6 .f3-next { margin-inline: 22px; }
	.f3-m1 .f3-next { position: absolute; left: 22px; right: 22px; bottom: env(safe-area-inset-bottom, 0px); margin: 0; padding: 0; min-height: 44px; z-index: 3; opacity: calc(var(--intro) * .7); color: var(--f3-silver); }
	.f3-m8 .f3-next { margin-top: 4px; }
	.f3-m6 .f3-next, .f3-m9 .f3-next { color: var(--f3-silver); opacity: 1; }
	.f3-next .f3-three { margin-bottom: 10px; }
	.f3-next__a { display: inline-block; font-size: 13px; letter-spacing: 0; }

	/* Chapter progress: six hairline segments on the header's lower edge + the current chapter's name beside the logo. No height added. */
	.f3-chap { position: absolute; inset: 0; pointer-events: none; }
	.f3-chap__label { position: absolute; left: 96px; top: 50%; transform: translateY(-50%); font-size: 10px; letter-spacing: .14em; white-space: nowrap; opacity: 0; transition: opacity .35s; }
	.f3-chap[data-f3-chap="1"] .f3-chap__label, .f3-chap[data-f3-chap="2"] .f3-chap__label, .f3-chap[data-f3-chap="3"] .f3-chap__label, .f3-chap[data-f3-chap="4"] .f3-chap__label, .f3-chap[data-f3-chap="5"] .f3-chap__label { opacity: .85; }
	.f3-chap__bar { position: absolute; left: 20px; right: 20px; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 2px; }
	.f3-chap__bar i { display: block; background: currentColor; opacity: .2; transition: opacity .35s, background-color .35s; }
	.f3-chap__bar i.is-done { opacity: .6; }
	.f3-chap__bar i.is-cur { opacity: 1; background: #7FA6EC; }
	body.home .f3-header[data-f3-hdr="light"] .f3-chap__bar i.is-cur { background: var(--f3-french); }
	body.home .f3-header[data-f3-hdr="clear"] .f3-chap__bar { opacity: 0; }
	.f3-chap__bar { transition: opacity .35s; }

	/* Motion (only with html.f3-motion): the three bars draw in when a chapter arrives; the NEXT arrow breathes. Static otherwise. */
	html.f3-motion .f3-m:not(.f3-m1):not(.is-in) .f3-m__k::before { transform: scaleX(0); }
	html.f3-motion .f3-m__k::before { transition: transform .7s var(--f3-ease-expo) .15s; }
	html.f3-motion .f3-next__a { animation: f3-nudge 2.4s ease-in-out infinite; }
	@keyframes f3-nudge { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(3px); } }
}

/* Static layout (reduced motion): the same screens, no entry animation. */
html:not(.f3-motion) .f3-m1 { animation: none; --intro: 1; }

/* 52-guidance-buy.u.css */
/* Issue #49 — HOME guidance, deep links, the FLAT3 packshot, and the FLAT3-only purchase policy (PC + SP).
   NEXT = continue the HOME story (small, centred, ↓, dashed hairline above it).
   DEEP = go deeper into the site (boxed / underlined rows with →). BUY stays visible but never leads the story. */

/* ---- BUY FLAT3 packshot: the approved bottle cut-out, whole, on a quiet plate (HOME conversion chapter, PC + SP) ---- */
.f3-buybottle { display: flex; align-items: center; justify-content: center; background: var(--f3-plate, #F2F1EE); box-sizing: border-box; overflow: hidden; }
.f3-buybottle .f3-bottle { width: auto; height: 100%; max-width: none; }
.f3-buybottle img.f3-bottle--image { filter: drop-shadow(0 6px 10px rgba(7, 9, 13, .28)); }

/* ---- Availability notes (non-FLAT3 wines): one restrained line + the PROFESSIONAL route ---- */
.f3-wd__avail { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: var(--f3-silver); }
.f3-wd__avail [lang='ja'] { font-family: var(--f3-ja-sans); color: var(--f3-offwhite); }
.f3-wd__avail [lang='en'] { font-size: 12px; letter-spacing: .08em; }
.f3-wd__cta.is-inquiry { display: flex; }
.f3-wd__inq { min-height: 52px; padding: 8px 26px; display: inline-flex; align-items: center; gap: 14px; background: #fff; color: #000; border: 1px solid #fff; font-size: 12.5px; letter-spacing: .22em; font-weight: 500; transition: background .3s, color .3s; }
.f3-wd__inq .f3-pair { gap: 2px; }
.f3-wd__inq .f3-pair__ja { font-size: 12px; letter-spacing: .04em; font-weight: 400; color: inherit; }
.f3-wd__inq:hover { background: transparent; color: #fff; }

.f3-wp__avail { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(7, 9, 13, .18); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.f3-wp__avl { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: #55585e; }
.f3-wp__avl [lang='ja'] { font-family: var(--f3-ja-sans); color: var(--f3-ink); font-size: 14px; }
.f3-wp__pro { flex: none; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; border: 1px solid var(--f3-ink); font-size: 12px; letter-spacing: .2em; transition: background .3s, color .3s; }
.f3-wp__pro:hover { background: var(--f3-ink); color: var(--f3-paper, #FBFAF8); }

/* no BUY chrome on a non-FLAT3 wine page: the shared footer routes and the SP bar / menu reflow to what is left */
.f3-footer__route.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- PC ---- */
@media (min-width: 900px) {
	/* 06 CONVERSION: the BUY panel gets a bottle plate instead of a cropped barrel photograph */
	.f3-s6__buy { top: calc(380 * var(--u)); height: calc(440 * var(--u)); grid-template-columns: calc(340 * var(--u)) minmax(0, 1fr); }
	.f3-s6__pro { top: calc(380 * var(--u)); height: calc(440 * var(--u)); }
	.f3-s6__buy .f3-buybottle { width: calc(340 * var(--u)); height: calc(440 * var(--u)); padding: calc(20 * var(--u)) 0; }
	/* 01: DISCOVER FLAT3 (deeper) under the appellation line, clear of the bottle and of the BUY / PROFESSIONAL pair */
	.f3-s1__know { margin-top: calc(18 * var(--u)); display: inline-flex; flex-direction: column; gap: calc(4 * var(--u)); align-self: flex-start; padding-bottom: calc(5 * var(--u)); border-bottom: 1px solid rgba(243, 241, 236, .55); color: var(--f3-offwhite); font-size: max(calc(12 * var(--u)), 11px); letter-spacing: .16em; transition: color .3s, border-color .3s; }
	.f3-s1__aoc { display: flex; flex-direction: column; align-items: flex-start; }
	.f3-s1__know [lang='ja'] { font-family: var(--f3-ja-sans); font-size: max(12px, calc(12 * var(--u))); letter-spacing: .06em; color: var(--f3-mist); }
	.f3-s1__know:hover { color: var(--f3-french); border-bottom-color: var(--f3-french); }
	/* 03: two deeper routes under the lineup */
	.f3-s3c__links { margin-top: calc(24 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); }
	.f3-s3c__links .f3-s3c__more { margin-top: 0; }
	.f3-s6__buy .f3-s6__bt { min-width: 0; }
}

/* ---- SP ---- */
@media (max-width: 899.98px) {
	.f3-footer__route.is-two { grid-template-columns: minmax(0, 1fr); }
	.f3-ctabar.is-pro-only, body.home .f3-ctabar.is-pro-only { grid-template-columns: minmax(0, 1fr); }
	.f3-ctabar.is-pro-only .f3-ctabar__pro { background: var(--f3-samurai); min-height: 56px; }
	.f3-menu__cta.is-pro-only { grid-template-columns: minmax(0, 1fr); }
	.f3-wd__cta.is-inquiry { display: grid; grid-template-columns: minmax(0, 1fr); }
	.f3-wd__inq { min-height: 52px; justify-content: space-between; padding: 8px 18px; font-size: 11.5px; letter-spacing: .2em; }
	.f3-wp__avail { flex-direction: column; align-items: stretch; gap: 16px; margin: 32px 0 0; }
	.f3-wp__pro { justify-content: space-between; padding: 0 18px; }

	/* 01 chapter role line (the hero stays one screen) */
	.f3-m1__k { color: var(--f3-silver); font-size: 10px; letter-spacing: .16em; }
	/* 02 TERROIR / FROM VINE TO WINE through the Estate anchors */
	.f3-m5__sub { margin: 6px 22px 0; display: flex; gap: 8px; }
	.f3-m5__sub a { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--f3-mist); font-family: var(--f3-mono); font-size: 10px; letter-spacing: .12em; text-align: center; }
	/* 04 ALL WINES = a deeper row, like the other chapters' deep links */
	.f3-m9__all { margin: 12px 22px 0; align-self: stretch; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid rgba(243, 241, 236, .5); text-decoration: none; }
	/* 05 — the chapter now carries three deeper destinations (VIEW ALL JOURNAL · BUY FLAT3 · PROFESSIONAL),
	   so the lead photograph and the rows give the room back: the chapter still ends within ~1.1 viewports. */
	.f3-m8 { padding-top: 80px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
	.f3-m8__head { padding-bottom: 12px; }
	.f3-m8__list { margin-top: 8px; }
	.f3-m8__list .is-lead { padding-bottom: 8px; }
	.f3-m8__list .is-row a { min-height: 72px; padding: 8px 0; }
	.f3-m8__all { margin-top: 4px; min-height: 44px; padding: 11px; }
	/* 05 deeper pair: BUY FLAT3 (visible, secondary) + PROFESSIONAL */
	.f3-m8__go { margin-top: 6px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
	.f3-m8__buy, .f3-m8__pro { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; font-size: 11px; letter-spacing: .14em; }
	.f3-m8__buy { background: var(--f3-french); color: var(--f3-offwhite); }
	.f3-m8__pro { border: 1px solid var(--f3-ink); }

	/* NEXT (continue the story) vs deeper links: NEXT sits under a dashed hairline, small and centred, with ↓; deeper links are boxed rows with → */
	.f3-m5 .f3-next, .f3-m6 .f3-next, .f3-m8 .f3-next, .f3-m9 .f3-next { border-top: 1px dashed rgba(127, 135, 150, .45); }

	/* 06 CONVERSION: BUY FLAT3 = whole bottle plate + text */
	.f3-m10__buy { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
	.f3-m10__buy .f3-buybottle { height: 300px; padding: 14px 0; }
	.f3-m10__bt { justify-content: center; }
}

@media (max-width: 899.98px) {
	/* header chapter label: name on line one, its meaning on line two (the label never grows the 64px header) */
	.f3-chap__label { line-height: 1.25; }
	.f3-chap__role { display: block; font-size: 9px; letter-spacing: .16em; opacity: .7; }
}

/* 85-ja-type.u.css */
/*
 * RUN #32 — Japanese typography pass. English stays primary; Japanese becomes comfortably readable.
 * Paired JA copy (.f3-pair__ja) is scaled through each container's --ja in the page files; this layer lifts the
 * stand-alone Japanese classes. Three tiers: PROSE (explanatory copy) · SUB (subtitle / paired lines / names) ·
 * LABEL (metadata and bilingual mono labels, kept restrained). `!important` is intentional: this layer must win over the
 * per-page component rules that set the old micro sizes. Authored with design units (`Nu`) so HOME scales with its stage,
 * with a px floor so nothing drops under the readable minimum at 1280.
 */

/* ---------- PC ---------- */
@media (min-width: 900px) {
	/* PROSE */
	.f3e-pj, .f3e-pj--135, .f3e-step__pj, .f3e-prof__pj, .f3e-vis__j, .f3e-cmp__note, .f3e-hero__ja, .f3e-soil__cj, .f3e-tl__p,
	.f3-pt-ja, .f3-pt-ja-p, .f3-pt-japan__ja, .f3-pt-today__ja, .f3-wsh__ja, .f3-sig__ja, .f3-wg__ja, .f3-wd__ja, .f3-fm__ja, .f3-fm__aj,
	.f3-jr__lja, .f3-wt__pj, .wp-caption-text, .wp-element-caption { font-size: 16px !important; line-height: 2 !important; letter-spacing: .04em !important; }
	.f3-s6__bsub { font-size: max(15px, calc(16 * var(--u))) !important; line-height: 1.9 !important; }
	/* SUB */
	.f3e-soil__ja, .f3-wg__j, .f3-sk__j, .f3-nr__j, .f3e-nr__j, .f3-nw__j, .f3-wine__ja, .f3e-prof__j, .f3e-step__ja, .f3-wd__j, .f3-wsh__j,
	.f3-jr__s, .f3-ar__buy-ja, .f3-ar__np-ja, .f3-ar__back-ja, .f3-ar__all-ja, .f3-jp__ja, .f3-ar__buy-lja, .f3e-sub { font-size: 15.5px !important; letter-spacing: .06em !important; }
	.f3e-sub { font-size: 20px !important; line-height: 1.8 !important; }
	.f3e-pj, .f3e-pj--135, .f3e-step__pj, .f3e-soil__cj, .f3e-prof__pj { font-size: 16.5px !important; line-height: 2 !important; }
	.f3e-step__ja, .f3e-prof__j, .f3e-soil__ja { font-size: 16px !important; }
	.f3-card__cat, .f3-jc__cat, .f3-ar__cat, .is-cat { font-size: 14px !important; }
	/* LABEL (bilingual mono kickers, form hints) */
	.f3-wf__k, .f3-sk__k, .f3-wt__k, .f3-nr__k, .f3-field__opt, .f3e-cmp__l { font-size: 13.5px !important; }
	.f3-sk__j, .f3-wf__k, .f3-sk__k, .f3-wt__k { color: #5f5a52; }
	.f3-skip { font-size: 15px !important; }
	.f3-s1__whyja { font-size: max(23px, calc(26 * var(--u))) !important; line-height: 1.6; }
	.f3-s2c__ja, .f3-s2d__ja, .f3-s4__ja { font-size: max(17.5px, calc(19 * var(--u))) !important; line-height: 1.7; }
	.f3-s3c__ja, .f3-s5__ja { font-size: max(17px, calc(18 * var(--u))) !important; line-height: 1.7; }
	.f3-s3a__wja { font-size: max(24px, calc(26 * var(--u))) !important; }
	.f3-s6__bja { font-size: max(21px, calc(22 * var(--u))) !important; }
	.f3e-soil__cj { font-size: 16px !important; line-height: 1.9 !important; }
	.f3-s6__pja { font-size: max(19px, calc(20 * var(--u))) !important; }
	.f3-pt-hero__ja { font-size: 28px !important; line-height: 1.5; }
	.f3-ar__t, .f3-jc__t, .f3-card__title { line-height: 1.7; }
	/* Inline JA inside bilingual kickers / captions / role lists */
	.f3e-k [lang="ja"], .f3e-hero__k [lang="ja"], .f3e-cellar figcaption [lang="ja"], .f3e-cmp__h [lang="ja"], .f3-pt-kick [lang="ja"], .f3e-pr li [lang="ja"] { font-size: 14.5px !important; letter-spacing: .06em !important; }
	.f3-wt__v [lang="ja"] { font-size: 16px !important; line-height: 1.9 !important; letter-spacing: .04em !important; }
	.f3-s2d__who span, .f3-s3a__past span, .f3-s2b__layers em, .f3-importer__facts dt, .f3-jfl a { font-size: max(14.5px, calc(15 * var(--u))) !important; }
	.f3-s2__more, .f3-s3c__more, .f3-s4__foot, .f3-s6__contact, .f3-s6__contact span { font-size: max(14px, calc(15 * var(--u))) !important; }
	.f3-s6__legal, .f3-footer__legal { font-size: 12.5px !important; line-height: 1.8 !important; }
}

/* ---------- SP ---------- */
@media (max-width: 899.98px) {
	/* PROSE */
	.f3e-pj, .f3e-pj--135, .f3e-step__pj, .f3e-prof__pj, .f3e-vis__j, .f3e-cmp__note, .f3e-hero__ja, .f3e-soil__cj, .f3e-tl__p,
	.f3e-spprof__v, .f3e-spprof__j, .f3e-spcmp__j,
	.f3-pt-ja, .f3-pt-ja-p, .f3-pt-japan__ja, .f3-pt-today__ja, .f3-wsh__ja, .f3-sig__ja, .f3-wg__ja, .f3-wd__ja, .f3-fm__ja, .f3-fm__aj,
	.f3-jr__lja, .f3-wt__pj, .f3-m6__jp, .wp-caption-text, .wp-element-caption { font-size: 15px !important; line-height: 1.95 !important; letter-spacing: .03em !important; }
	/* SUB */
	.f3e-soil__ja, .f3-wg__j, .f3-sk__j, .f3-nr__j, .f3e-nr__j, .f3-nw__j, .f3-wine__ja, .f3e-prof__j, .f3e-step__ja, .f3-wd__j, .f3-wsh__j,
	.f3-jr__s, .f3-ar__buy-ja, .f3-ar__np-ja, .f3-ar__back-ja, .f3-ar__all-ja, .f3-jp__ja, .f3-ar__buy-lja, .f3-m9__nja, .f3-m8__ja,
	.f3-m5__ja, .f3-m6__ja, .f3-m9__ja, .f3-m9__feat { font-size: 14.5px !important; letter-spacing: .04em !important; }
	.f3e-sub { font-size: 17px !important; line-height: 1.8 !important; }
	.f3e-pj, .f3e-pj--135, .f3e-step__pj, .f3e-soil__cj, .f3e-tl__p, .f3e-prof__pj, .f3e-spprof__v, .f3e-vis__j, .f3e-hero__ja { font-size: 15.5px !important; line-height: 1.95 !important; }
	.f3e-step__ja, .f3e-soil__ja, .f3e-prof__j { font-size: 15px !important; }
	.f3-card__cat, .f3-jc__cat, .f3-ar__cat, .is-cat { font-size: 13px !important; }
	/* LABEL */
	.f3-wf__k, .f3-sk__k, .f3-wt__k, .f3-nr__k, .f3-field__opt, .f3e-cmp__l { font-size: 13px !important; }
	.f3-sk__j, .f3-wf__k, .f3-sk__k, .f3-wt__k { color: #5f5a52; }
	.f3-m10__legal { font-size: 12px !important; line-height: 1.8; }
	.f3-pt-hero__ja { font-size: 20px !important; }
	.f3-skip { font-size: 15px !important; }
	.f3e-k [lang="ja"], .f3e-hero__k [lang="ja"], .f3e-cellar figcaption [lang="ja"], .f3e-cmp__h [lang="ja"], .f3-pt-kick [lang="ja"], .f3e-pr li [lang="ja"] { font-size: 13.5px !important; letter-spacing: .05em !important; }
	.f3-wt__v [lang="ja"] { font-size: 15px !important; line-height: 1.9 !important; }
	.f3-s6__legal, .f3-footer__legal { font-size: 12px !important; line-height: 1.8 !important; }
	.f3-s6__contact, .f3-jfl a, .f3-importer__facts dt { font-size: 13.5px !important; }
}

/* 90-static.css */
/*
 * Without html.f3-motion nothing is scrubbed: every sticky scene becomes plain flow, every
 * progress variable is at its end state, and all content stays readable.
 */

html:not(.f3-motion) .f3-anchor { top: 100vh; }

html:not(.f3-motion) .f3-menu,
html:not(.f3-motion) .f3-ctabar { animation: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; scroll-snap-type: none !important; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Inquiry result banner: unmistakable after submit (filled green / red, check mark). */
.f3-inq__status.is-ok, .f3-formblock.is-light .f3-inq__status.is-ok { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border: 0; background: #1F6B3A; color: #fff; font-size: 16px; --ja: 15px; }
.f3-inq__status.is-ok::before { content: "✓"; flex: 0 0 34px; height: 34px; border-radius: 50%; background: #fff; color: #1F6B3A; font: 700 20px/34px system-ui, sans-serif; text-align: center; }
.f3-inq__status.is-ok .f3-pair__ja { color: #fff; font-size: 14.5px; }
.f3-inq__status.is-ng, .f3-formblock.is-light .f3-inq__status.is-ng { padding: 20px 22px; border: 2px solid #C0392B; background: #FBEAE7; color: #7A1F14; font-size: 15px; }
.f3-inq__status.is-ng .f3-pair__ja { color: #7A1F14; font-size: 14px; }