/*
Theme Name: 4-Watches
Theme URI: https://www.4-watches.com/
Author: 4-watches.com
Description: A premium editorial catalogue theme for 4-watches.com. Charcoal, ivory and antique gold; Playfair Display over Inter, both self-hosted. Built for the restored historical watch archive: a split editorial hero, a style mosaic, a typographic brand directory, dynamic featured timepieces, an accessible watch finder and comparison tool, and a deep-charcoal footer. No page builder, no framework, no third-party requests.
Version: 2.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fourwatches
Tags: editorial, catalogue, accessibility-ready, custom-menu, responsive, block-styles
*/

/* ==========================================================================
   Self-hosted fonts (SIL OFL, latin subset, variable woff2)
   ========================================================================== */

@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-var.woff2") format("woff2-variations"),
	     url("assets/fonts/playfair-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
	               U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-var.woff2") format("woff2-variations"),
	     url("assets/fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
	               U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	color-scheme: light;

	--charcoal:        #111315;
	--charcoal-soft:   #1a1d1f;
	--charcoal-line:   #2a2e31;
	--ivory:           #f5f2ec;
	--ivory-light:     #faf9f6;
	--gold:            #b59052;
	/* #b59052 is the brand gold and is used for fills, borders and button
	   backgrounds. As small text on white it measures 2.97:1, below the 4.5:1
	   AA threshold, so gold *text* and the focus ring use this darker tone:
	   5.42:1 on white, 4.85:1 on ivory, and 5.42:1 behind white button text. */
	--gold-hover:      #856435;
	--gold-soft:       #d9c39a;
	--text:            #202326;
	--text-muted:      #666a6e;
	--border:          #ddd8cf;
	--white:           #ffffff;
	--success:         #496a58;

	--font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
	                Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;

	/* 8px spacing system */
	--s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
	--s5: 40px;  --s6: 48px;  --s7: 64px;  --s8: 80px;
	--s9: 96px;  --s10: 120px; --s11: 140px;

	--maxw: 1400px;
	--gutter: 24px;

	--radius: 4px;
	--radius-lg: 8px;

	--shadow-sm: 0 1px 2px rgb(17 19 21 / 5%);
	--shadow-md: 0 2px 8px rgb(17 19 21 / 6%), 0 12px 32px rgb(17 19 21 / 7%);
	--shadow-lg: 0 4px 12px rgb(17 19 21 / 8%), 0 24px 56px rgb(17 19 21 / 10%);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 240ms;

	--focus: var(--gold-hover);
}

@media (min-width: 768px)  { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

/* ==========================================================================
   Base
   ========================================================================== */

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

/* The `hidden` attribute must win over any component display rule.
   Without this, `.fw-btn { display: inline-flex }` beat the user-agent's
   `[hidden] { display: none }` and hidden buttons kept rendering — which is
   why Back, Skip, Continue and the submit all appeared on finder step one. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Clear the sticky header on anchor navigation. The header is masthead only
	   below 1024px, masthead + nav strip above it. */
	scroll-padding-top: 96px;
}
@media (min-width: 1024px) { html { scroll-padding-top: 152px; } }

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

img, svg, video { max-width: 100%; height: auto; border: 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}
.fw-on-dark :focus-visible { outline-color: var(--gold-soft); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 var(--s2);
	color: var(--charcoal);
	text-wrap: balance;
}
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--white); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.fw-wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.fw-section { padding-block: 72px; }
@media (min-width: 768px)  { .fw-section { padding-block: 96px; } }
@media (min-width: 1200px) { .fw-section { padding-block: 128px; } }

.fw-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fw-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--charcoal); color: var(--ivory);
	padding: 14px 22px; font-size: .9rem; font-weight: 600;
	border-bottom-right-radius: var(--radius);
}
.fw-skip:focus { left: 0; }

.fw-eyebrow {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-hover);
	margin: 0 0 var(--s2);
}
.fw-on-dark .fw-eyebrow { color: var(--gold-soft); }

.fw-h2 { font-size: clamp(2.25rem, 3.4vw, 4rem); }
.fw-lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-muted);
	max-width: 58ch;
}
.fw-on-dark .fw-lede { color: rgb(245 242 236 / 72%); }

.fw-section__head { margin-bottom: var(--s6); max-width: 68ch; }
.fw-section__head--split {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: var(--s3); max-width: none;
}

/* --- buttons ------------------------------------------------------------ */

.fw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 15px 30px;
	font-family: var(--font-body);
	font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; text-align: center;
	border: 1px solid transparent; border-radius: var(--radius);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}
.fw-btn--primary { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.fw-btn--primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--white); }

.fw-btn--ghost { background: transparent; color: var(--ivory); border-color: rgb(245 242 236 / 35%); }
.fw-btn--ghost:hover { border-color: var(--ivory); background: rgb(245 242 236 / 8%); }

.fw-btn--dark { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.fw-btn--dark:hover { background: var(--charcoal-soft); }

.fw-btn--outline { background: transparent; color: var(--charcoal); border-color: var(--border); }
.fw-btn--outline:hover { border-color: var(--charcoal); }

/* --- text link with animated underline ---------------------------------- */

.fw-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--charcoal); text-decoration: none; padding-block: 4px;
	position: relative;
}
.fw-link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.fw-link:hover::after, .fw-link:focus-visible::after { transform: scaleX(1); }
.fw-link .fw-arrow { transition: transform var(--dur) var(--ease); }
.fw-link:hover .fw-arrow { transform: translateX(4px); }
.fw-on-dark .fw-link { color: var(--gold-soft); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.fw-announce {
	background: var(--charcoal);
	color: var(--ivory);
	font-size: .72rem;
	letter-spacing: .08em;
	/* no rule: the header below is the same charcoal, and the two now read as
	   one field rather than two stacked bars */
}
.fw-announce .fw-wrap {
	min-height: 34px;
	display: flex; align-items: center; justify-content: center; gap: var(--s3);
	padding-block: 7px; text-align: center;
}
.fw-announce__primary { color: var(--gold-soft); }
.fw-announce__secondary { color: rgb(245 242 236 / 60%); }
@media (max-width: 900px) { .fw-announce__secondary { display: none; } }

/* ==========================================================================
   Header
   ========================================================================== */

/* Charcoal, the brand's own ground. The announcement bar above and the hero
   below are both charcoal, so the header now belongs to the same field instead
   of being a pale block interrupting it — and over the ivory sections further
   down the page it reads as a definite floating bar rather than blending into
   them, which the light version had to be given a hairline to avoid.

   The nav row is lifted one step to --charcoal-soft so it stays legible as
   navigation instead of dissolving into the hero directly beneath it. */
.fw-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--charcoal);
	color: var(--ivory);
	border-bottom: 1px solid var(--charcoal-line);
	transition: box-shadow var(--dur) var(--ease);
}
.fw-header.is-stuck {
	border-bottom-color: rgb(245 242 236 / 14%);
	box-shadow: 0 12px 28px rgb(17 19 21 / 26%);
}

.fw-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s3);
	min-height: 80px;
}

.fw-header__left, .fw-header__right {
	display: flex; align-items: center; gap: var(--s1);
}
.fw-header__right { justify-content: flex-end; }

.fw-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 44px; min-height: 44px; padding: 10px;
	background: none; border: 0; cursor: pointer;
	color: rgb(245 242 236 / 84%); border-radius: var(--radius);
	font-family: var(--font-body); font-size: .72rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	/* Search is a button and Brands is a link; without this the link kept the
	   user agent's underline and the two utilities did not match. */
	text-decoration: none;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fw-iconbtn:hover, .fw-iconbtn:focus-visible {
	color: var(--gold-soft); background: rgb(245 242 236 / 9%);
}
.fw-iconbtn svg { width: 18px; height: 18px; flex: none; }
.fw-iconbtn__label { display: none; }
@media (min-width: 1024px) { .fw-iconbtn__label { display: inline; } }

.fw-brandmark {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	text-decoration: none; color: var(--ivory); text-align: center;
	padding-block: 6px;
}
.fw-brandmark__name {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 500; letter-spacing: .1em; line-height: 1;
	white-space: nowrap;
}
.fw-brandmark__tag {
	font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
	color: rgb(245 242 236 / 62%); white-space: nowrap;
}
/* Hidden in the masthead on small screens, where the header bar is tight.
   The footer has all the room it needs, so it keeps it. */
@media (max-width: 560px) { .fw-header .fw-brandmark__tag { display: none; } }

/* --- desktop nav -------------------------------------------------------- */

.fw-nav { display: none; }
@media (min-width: 1024px) {
	.fw-nav { display: block; background: var(--charcoal-soft); }
	.fw-nav__list {
		display: flex; justify-content: center; flex-wrap: wrap;
		gap: var(--s5); list-style: none; margin: 0; padding: 0;
	}
	.fw-nav__list a {
		display: inline-flex; align-items: center; min-height: 46px;
		font-size: .78rem; font-weight: 500; letter-spacing: .14em;
		text-transform: uppercase; text-decoration: none;
		color: rgb(245 242 236 / 88%);
		position: relative;
	}
	.fw-nav__list a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 10px;
		height: 1px; background: var(--gold-soft);
		transform: scaleX(0); transform-origin: center;
		transition: transform var(--dur) var(--ease);
	}
	.fw-nav__list a:hover::after,
	.fw-nav__list a:focus-visible::after,
	.fw-nav__list .current-menu-item > a::after { transform: scaleX(1); }
	.fw-nav__list .current-menu-item > a { color: var(--gold-soft); }
}

/* Seven items no longer fit on one row at the breakpoint where the bar first
   appears, and a centred nav that wraps reads as a mistake rather than a
   layout. Tighten it until 1280px, where there is room again. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.fw-nav__list { gap: var(--s2); }
	.fw-nav__list a { font-size: .72rem; letter-spacing: .1em; padding-inline: 5px; }
}

.fw-menu-toggle { display: inline-flex; }
@media (min-width: 1024px) { .fw-menu-toggle { display: none; } }

/* --- mobile drawer ------------------------------------------------------ */

.fw-drawer {
	position: fixed; inset: 0; z-index: 200;
	background: var(--charcoal); color: var(--ivory);
	display: flex; flex-direction: column;
	padding: var(--s3) var(--gutter) var(--s6);
	overflow-y: auto; overscroll-behavior: contain;
}
.fw-drawer[hidden] { display: none; }
.fw-drawer__top {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--s5);
}
.fw-drawer__top .fw-iconbtn { color: var(--ivory); }
.fw-drawer__top .fw-iconbtn:hover { color: var(--gold-soft); background: rgb(245 242 236 / 8%); }
.fw-drawer__list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.fw-drawer__list a {
	display: block; padding: 14px 0; min-height: 52px;
	font-family: var(--font-display); font-size: 1.65rem; font-weight: 400;
	color: var(--ivory); text-decoration: none;
	border-bottom: 1px solid var(--charcoal-line);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.fw-drawer__list a:hover { color: var(--gold-soft); padding-left: 8px; }
.fw-drawer__search { margin-bottom: var(--s5); }
body.fw-locked { overflow: hidden; }

/* --- search panel ------------------------------------------------------- */

/* The panel drops out of a charcoal header, so it stays in that field rather
   than flashing a pale band between the header and the hero. */
.fw-searchpanel {
	border-bottom: 1px solid var(--charcoal-line);
	background: var(--charcoal-soft);
	padding-block: var(--s4);
}
.fw-searchpanel[hidden] { display: none; }

.fw-searchform { display: flex; gap: var(--s1); max-width: 720px; margin-inline: auto; }
.fw-searchform input[type="search"] {
	flex: 1 1 auto; min-width: 0; min-height: 52px;
	padding: 14px 18px;
	font-family: var(--font-body); font-size: 1rem; color: var(--text);
	background: var(--white);
	border: 1px solid var(--border); border-radius: var(--radius);
}
.fw-searchform input[type="search"]::placeholder { color: var(--text-muted); }
.fw-searchform input[type="search"]:focus-visible { border-color: var(--gold); }
/* Both search fields now sit on charcoal — the drawer always did, and the
   header panel does since the header went dark. A white slab and a charcoal
   submit button that was charcoal-on-charcoal were both invisible or glaring
   in that field. */
.fw-drawer .fw-searchform input[type="search"],
.fw-searchpanel .fw-searchform input[type="search"] {
	background: var(--charcoal-soft); border-color: var(--charcoal-line); color: var(--ivory);
}
.fw-searchpanel .fw-searchform input[type="search"] { background: rgb(245 242 236 / 6%); }
.fw-searchpanel .fw-searchform input[type="search"]::placeholder { color: rgb(245 242 236 / 55%); }
.fw-searchpanel .fw-searchform .fw-btn--dark {
	background: var(--gold); border-color: var(--gold); color: var(--charcoal);
}
.fw-searchpanel .fw-searchform .fw-btn--dark:hover,
.fw-searchpanel .fw-searchform .fw-btn--dark:focus-visible {
	background: var(--gold-soft); border-color: var(--gold-soft);
}

/* ==========================================================================
   Hero — "editorial plate"

   Not a 50/50 split with a hard seam. The photograph sits as an inset plate
   with charcoal framing it on three sides, a single antique-gold hairline
   offset behind it for depth, and a gradient on its inner edge so the image
   melts into the panel instead of butting against it. Beneath, a contents
   strip carries the real model counts, so the row of category links reads as
   an index rather than an afterthought.
   ========================================================================== */

.fw-hero {
	position: relative;
	background: var(--charcoal);
	overflow: hidden;
}

.fw-hero__grid { display: grid; grid-template-columns: 1fr; }

.fw-hero__content {
	padding: 72px var(--gutter) 64px;
	width: 100%;
}

.fw-hero__eyebrow {
	display: flex; align-items: center; gap: 16px;
	font-size: .72rem; font-weight: 600; letter-spacing: .2em;
	text-transform: uppercase; color: var(--gold-soft);
	margin: 0 0 var(--s4);
}
.fw-hero__eyebrow::before {
	content: ""; flex: none; width: 44px; height: 1px;
	background: var(--gold); opacity: .9;
}

.fw-hero h1 {
	font-size: clamp(2.9rem, 5.4vw, 5.6rem);
	line-height: .98;
	letter-spacing: -0.028em;
	color: var(--ivory);
	margin: 0 0 var(--s4);
	max-width: 13ch;
	text-wrap: balance;
}

.fw-hero__lede {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgb(245 242 236 / 70%);
	max-width: 44ch;
	margin: 0 0 var(--s6);
}

.fw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- the plate --------------------------------------------------------- */

.fw-hero__plate {
	position: relative;
	margin: 0;
	background: var(--charcoal-soft);
	/* No overflow:hidden — the offset hairline below is drawn outside these
	   bounds, and the image fills the box exactly so nothing else escapes. */
}
.fw-hero__plate img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
/* melt the inner edge into the panel so there is no hard vertical seam */
.fw-hero__plate::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom, var(--charcoal) 0%, transparent 22%, transparent 78%, var(--charcoal) 100%);
}

/* --- contents strip ---------------------------------------------------- */

.fw-hero__index {
	border-top: 1px solid rgb(245 242 236 / 12%);
}
.fw-hero__index ol {
	list-style: none; margin: 0 auto; padding: 0;
	max-width: var(--maxw);
	display: grid; grid-template-columns: repeat(2, 1fr);
}
.fw-hero__index li { border-bottom: 1px solid rgb(245 242 236 / 12%); }
.fw-hero__index li:nth-child(odd) { border-right: 1px solid rgb(245 242 236 / 12%); }

.fw-hero__index a {
	display: flex; flex-direction: column; gap: 6px;
	min-height: 96px; padding: 22px var(--gutter);
	text-decoration: none; color: var(--ivory);
	transition: background-color var(--dur) var(--ease);
}
.fw-hero__index a:hover,
.fw-hero__index a:focus-visible { background: rgb(245 242 236 / 5%); }

.fw-hero__index .n {
	font-size: .66rem; font-weight: 600; letter-spacing: .22em;
	color: var(--gold-soft); opacity: .75;
	transition: opacity var(--dur) var(--ease);
}
.fw-hero__index a:hover .n { opacity: 1; }
.fw-hero__index .t {
	font-family: var(--font-display); font-size: 1.18rem; font-weight: 400;
	line-height: 1.2;
}
.fw-hero__index .c {
	font-size: .78rem; color: rgb(245 242 236 / 52%);
}

/* --- desktop ----------------------------------------------------------- */

@media (min-width: 1024px) {
	.fw-hero__grid {
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		align-items: center;
		min-height: 700px;
	}
	.fw-hero__content {
		padding: 104px var(--s8) 104px var(--gutter);
		max-width: 720px;
		margin-left: auto;
	}
	.fw-hero__plate {
		align-self: stretch;
		margin: 72px 72px 72px 0;
	}
	/* single hairline, offset up-left: depth without a shadow */
	.fw-hero__plate::before {
		content: ""; position: absolute; z-index: 1; pointer-events: none;
		inset: -20px 20px 20px -20px;
		border: 1px solid rgb(181 144 82 / 42%);
	}
	.fw-hero__plate::after {
		background: linear-gradient(to right, var(--charcoal) 0%, rgb(17 19 21 / 55%) 12%, transparent 34%);
	}
	.fw-hero__index ol { grid-template-columns: repeat(4, 1fr); }
	.fw-hero__index li { border-bottom: 0; }
	.fw-hero__index li:nth-child(odd) { border-right: 0; }
	.fw-hero__index li + li { border-left: 1px solid rgb(245 242 236 / 12%); }
	.fw-hero__index a { padding: 28px 32px; min-height: 112px; }
	.fw-hero__index ol > li:first-child a { padding-left: var(--gutter); }
}

@media (min-width: 1440px) {
	.fw-hero__grid { min-height: 760px; }
	.fw-hero h1 { max-width: 12ch; }
}

/* --- tablet and phone -------------------------------------------------- */

@media (max-width: 1023px) {
	.fw-hero__plate { aspect-ratio: 16 / 10; margin: 0; }
	.fw-hero__content { padding-block: 64px 44px; }
	.fw-hero__cta .fw-btn { flex: 1 1 220px; }
	.fw-hero__index a { min-height: 84px; padding-block: 18px; }
}

@media (max-width: 560px) {
	.fw-hero__cta { flex-direction: column; }
	.fw-hero__cta .fw-btn { flex: 0 0 auto; width: 100%; }
	.fw-hero__plate { aspect-ratio: 4 / 3; }
	.fw-hero__index ol { grid-template-columns: 1fr; }
	.fw-hero__index li:nth-child(odd) { border-right: 0; }
	.fw-hero__index a { min-height: 76px; padding: 16px var(--gutter); gap: 4px; }
}

/* ==========================================================================
   Explore by Style — editorial index

   Not a card grid. One large plate for the biggest style, then a numbered
   index of the rest with hairline rules and small thumbnails. Captions sit
   BELOW or BESIDE the photography, never on top of it: the previous version
   set white text straight onto a bright dial and a busy bezel, and two of the
   five tiles were unreadable.
   ========================================================================== */

.fw-styles__head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: var(--s3) var(--s6);
	margin-bottom: var(--s7);
}
.fw-styles__head > div { max-width: 62ch; }
.fw-styles__head .fw-lede { margin-top: var(--s2); }

.fw-styles__grid {
	display: grid; grid-template-columns: 1fr; gap: var(--s6);
	align-items: start;
}

/* --- shared type ------------------------------------------------------- */

.fw-styles__n {
	display: block;
	font-size: .68rem; font-weight: 600; letter-spacing: .22em;
	color: var(--gold-hover);
}
.fw-styles__title {
	display: block;
	font-family: var(--font-display); font-weight: 400;
	color: var(--charcoal); line-height: 1.15;
}
.fw-styles__desc {
	display: block;
	font-size: .92rem; color: var(--text-muted); line-height: 1.6;
}

/* --- lead plate -------------------------------------------------------- */

.fw-styles__lead { display: block; text-decoration: none; }

.fw-styles__figure {
	display: block; overflow: hidden; position: relative;
	background: var(--ivory);
	aspect-ratio: 4 / 3;
}
.fw-styles__figure img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 620ms var(--ease);
}
.fw-styles__lead:hover .fw-styles__figure img,
.fw-styles__lead:focus-visible .fw-styles__figure img { transform: scale(1.035); }

.fw-styles__leadbody {
	display: block; padding-top: var(--s3);
	border-top: 1px solid var(--border); margin-top: var(--s3);
}
.fw-styles__leadbody .fw-styles__title {
	font-size: clamp(1.75rem, 2.6vw, 2.4rem);
	margin: 10px 0 8px;
}
.fw-styles__leadbody .fw-styles__desc { max-width: 46ch; }
.fw-styles__go {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: var(--s3); min-height: 32px;
	font-size: .74rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--charcoal);
}
.fw-styles__go .fw-arrow { transition: transform var(--dur) var(--ease); }
.fw-styles__lead:hover .fw-styles__go { color: var(--gold-hover); }
.fw-styles__lead:hover .fw-styles__go .fw-arrow { transform: translateX(5px); }

/* --- index ------------------------------------------------------------- */

.fw-styles__index { list-style: none; margin: 0; padding: 0; }
.fw-styles__index li { border-top: 1px solid var(--border); }
.fw-styles__index li:last-child { border-bottom: 1px solid var(--border); }

.fw-styles__index a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"num text  thumb"
		"num count thumb";
	align-items: center;
	gap: 4px var(--s3);
	padding: var(--s3) 0;
	min-height: 108px;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.fw-styles__index a:hover,
.fw-styles__index a:focus-visible { background: var(--ivory-light); }

.fw-styles__index .fw-styles__n { grid-area: num; align-self: center; }
.fw-styles__text { grid-area: text; display: block; }
.fw-styles__index .fw-styles__title { font-size: 1.35rem; margin-bottom: 4px; }
.fw-styles__index a:hover .fw-styles__title { color: var(--gold-hover); }
.fw-styles__count {
	grid-area: count;
	font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-muted); white-space: nowrap;
}
.fw-styles__thumb {
	grid-area: thumb;
	display: block; width: 104px; height: 78px;
	overflow: hidden; background: var(--ivory); flex: none;
}
.fw-styles__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 520ms var(--ease);
}
.fw-styles__index a:hover .fw-styles__thumb img { transform: scale(1.06); }

/* --- desktop ----------------------------------------------------------- */

@media (min-width: 1024px) {
	.fw-styles__grid {
		grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
		gap: var(--s8);
		/* stretch, not start: the index distributes its four rows over the
		   lead's full height so both columns finish on the same line */
		align-items: stretch;
	}
	.fw-styles__lead { display: flex; flex-direction: column; }
	.fw-styles__figure { aspect-ratio: 4 / 3; }

	.fw-styles__index { display: flex; flex-direction: column; height: 100%; }
	.fw-styles__index li { flex: 1 1 0; display: flex; }
	.fw-styles__index a {
		width: 100%;
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas: "num text count thumb";
		gap: var(--s3);
		min-height: 124px;
		padding-inline: var(--s2);
		margin-inline: calc(var(--s2) * -1);
	}
	.fw-styles__index .fw-styles__desc { max-width: 34ch; }
}

/* --- small screens ----------------------------------------------------- */

@media (max-width: 1023px) {
	.fw-styles__index a {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"num  text  thumb"
			"num  count thumb";
		align-items: center;
	}
	.fw-styles__count { align-self: start; }
}

@media (max-width: 560px) {
	.fw-styles__head { margin-bottom: var(--s5); }
	.fw-styles__index a {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num  thumb"
			"text text"
			"count count";
		gap: 10px var(--s2);
		min-height: 0; padding-block: var(--s3);
	}
	.fw-styles__thumb { width: 88px; height: 66px; justify-self: end; }
	.fw-styles__index .fw-styles__title { font-size: 1.25rem; }
}

/* ==========================================================================
   Brand index

   The previous version was a three-column table of twelve identical rows,
   every one carrying its own rule and the word "ENTRIES". It read as a
   database dump, and it flattened a collection that is genuinely uneven —
   Accutron holds 199 models, Tissot two.

   Two tiers instead: the deepest brands set large, as a table of contents
   with leader rules; everything else as a compact ribbon. No column grid,
   no repeated label, no boxes.
   ========================================================================== */

.fw-brandsec { background: var(--ivory-light); }

.fw-brandsec__grid {
	display: grid; grid-template-columns: 1fr; gap: var(--s6);
	align-items: start;
}

.fw-brandsec__intro .fw-lede { margin: var(--s3) 0 var(--s4); }

/* --- principal tier ---------------------------------------------------- */

.fw-brandlist { list-style: none; margin: 0; padding: 0; }

.fw-brandlist a {
	display: flex; align-items: baseline; gap: var(--s2);
	padding: var(--s2) 0;
	min-height: 56px;
	text-decoration: none; color: var(--charcoal);
}

.fw-brandlist__name {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1.2;
	transition: color var(--dur) var(--ease);
}

/* the leader rule that carries the eye from name to count */
.fw-brandlist__leader {
	flex: 1 1 auto;
	height: 1px;
	background: var(--border);
	transform: translateY(-5px);
	align-self: center;
	transition: background-color var(--dur) var(--ease);
}

.fw-brandlist__count {
	font-family: var(--font-body);
	font-size: .82rem; font-weight: 500; letter-spacing: .08em;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur) var(--ease);
}

.fw-brandlist a:hover .fw-brandlist__name,
.fw-brandlist a:focus-visible .fw-brandlist__name,
.fw-brandlist a:hover .fw-brandlist__count { color: var(--gold-hover); }
.fw-brandlist a:hover .fw-brandlist__leader { background: var(--gold); }

/* --- ribbon ------------------------------------------------------------ */

.fw-brandribbon {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--border);
}
.fw-brandribbon__label {
	display: block;
	font-size: .68rem; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--text-muted);
	margin-bottom: var(--s2);
}
.fw-brandribbon ul {
	list-style: none; margin: 0; padding: 0;
	/* Wide gaps rather than bullet separators: a separator leaves a dangling
	   mark wherever the list wraps, which is visible on every line break. */
	display: flex; flex-wrap: wrap; gap: 0 var(--s5);
}
.fw-brandribbon li { display: flex; align-items: center; }
.fw-brandribbon a {
	display: inline-flex; align-items: baseline; gap: 6px;
	min-height: 44px; padding-block: 10px;
	text-decoration: none; color: var(--text);
	font-size: .98rem;
	transition: color var(--dur) var(--ease);
}
.fw-brandribbon a:hover { color: var(--gold-hover); }
.fw-brandribbon__n {
	font-size: .74rem; color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.fw-brandribbon a:hover .fw-brandribbon__n { color: var(--gold-hover); }

/* --- desktop ----------------------------------------------------------- */

@media (min-width: 1024px) {
	.fw-brandsec__grid {
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		gap: var(--s9);
		/* centre the intro against the list: top-aligning it left roughly 500px
		   of dead space under the CTA */
		align-items: center;
	}
	.fw-brandsec__intro { align-self: center; }
	.fw-brandlist a { padding-block: var(--s3); min-height: 72px; }
}

@media (min-width: 1440px) {
	.fw-brandsec__grid { gap: var(--s10); }
}

@media (max-width: 560px) {
	.fw-brandlist a { gap: var(--s1); }
	.fw-brandlist__count { font-size: .76rem; }
}

/* ==========================================================================
   Featured timepieces
   ========================================================================== */

.fw-featured {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--s3);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 520px) { .fw-featured { grid-template-columns: 1fr; } }

.fw-watch {
	display: flex; flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	overflow: hidden; position: relative;
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}
.fw-watch:hover, .fw-watch:focus-within {
	box-shadow: var(--shadow-md); border-color: var(--gold-soft); transform: translateY(-2px);
}
.fw-watch__media {
	aspect-ratio: 4 / 5; background: var(--ivory-light);
	display: flex; align-items: center; justify-content: center;
	padding: var(--s3); border-bottom: 1px solid var(--border);
	overflow: hidden;
}
.fw-watch__media img {
	max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply;
	transition: transform 480ms var(--ease);
}
.fw-watch:hover .fw-watch__media img { transform: scale(1.04); }
.fw-watch__none { color: var(--text-muted); font-size: .78rem; text-align: center; }

.fw-watch__body { padding: var(--s3); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.fw-watch__brand {
	font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold-hover);
}
.fw-watch__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin: 0; }
.fw-watch__name a { text-decoration: none; }
.fw-watch__name a::after { content: ""; position: absolute; inset: 0; }

.fw-specs { list-style: none; margin: 6px 0 0; padding: 0; font-size: .82rem; color: var(--text-muted); }
.fw-specs li { display: flex; justify-content: space-between; gap: var(--s2); padding: 3px 0; }
.fw-specs dt, .fw-specs__k { color: var(--text-muted); }
.fw-specs__v { color: var(--text); text-align: right; }

.fw-status {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: auto; padding-top: var(--s2);
	font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-muted);
}
/* status is never conveyed by colour alone: each carries a distinct glyph + text */
.fw-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.fw-status--archive { color: var(--text-muted); }
.fw-status--unverified { color: var(--gold-hover); }

.fw-watch__cta {
	margin-top: var(--s2);
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--charcoal); display: inline-flex; align-items: center; gap: 8px;
}
.fw-watch:hover .fw-watch__cta { color: var(--gold-hover); }

/* ==========================================================================
   Watch finder

   No card. The previous version put the form inside a bordered, rounded white
   panel — a widget dropped onto the page — and repeated the question in the
   progress label above it. Here the form sits directly on the ground, and the
   numbered step list on the left IS the progress indicator, so nothing is
   stated twice.
   ========================================================================== */

.fw-finder { background: var(--ivory); }

.fw-finder__grid {
	display: grid; grid-template-columns: 1fr; gap: var(--s6);
	align-items: start;
}

.fw-finder__intro .fw-lede { margin: var(--s3) 0 var(--s6); }

/* --- step list doubles as the progress indicator ----------------------- */

.fw-finder__steps { list-style: none; margin: 0; padding: 0; }

.fw-finder__steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
	align-items: baseline;
	padding: var(--s2) 0;
	border-top: 1px solid var(--border);
	transition: opacity var(--dur) var(--ease);
	opacity: .5;
}
.fw-finder__steps li:last-child { border-bottom: 1px solid var(--border); }
.fw-finder__steps li.is-current,
.fw-finder__steps li.is-done { opacity: 1; }

.fw-finder__num {
	font-size: .7rem; font-weight: 600; letter-spacing: .18em;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur) var(--ease);
}
.fw-finder__steps li.is-current .fw-finder__num { color: var(--gold-hover); }
/* completed steps are marked by a glyph as well as tone, never colour alone */
.fw-finder__steps li.is-done .fw-finder__num::after {
	content: "\00a0\2713";
	color: var(--gold-hover);
}

.fw-finder__steptext { display: block; }
.fw-finder__stepname {
	display: block;
	font-family: var(--font-display); font-size: 1.15rem; color: var(--charcoal);
	line-height: 1.3;
}
.fw-finder__stephint {
	display: block; font-size: .86rem; color: var(--text-muted); margin-top: 2px;
}

/* --- panel ------------------------------------------------------------- */

.fw-finder__panel { min-width: 0; }

.fw-finder__meter { margin-bottom: var(--s5); }
.fw-finder__meter[hidden] { display: none; }
.fw-finder__meterbar {
	display: block; height: 1px; background: var(--border); overflow: hidden;
}
.fw-finder__meterbar span {
	display: block; height: 100%; background: var(--gold);
	transition: width var(--dur) var(--ease);
}
.fw-finder__meterlabel {
	display: block; margin-top: 10px;
	font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.fw-fieldset { border: 0; margin: 0; padding: 0; }
.fw-fieldset legend {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 400; color: var(--charcoal);
	margin-bottom: 8px; padding: 0;
}
.fw-fieldset__help {
	font-size: .95rem; color: var(--text-muted); margin-bottom: var(--s4);
	max-width: 52ch;
}

/* --- choices ----------------------------------------------------------- */

.fw-choices {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.fw-choice { position: relative; display: block; }
.fw-choice input {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; margin: 0; cursor: pointer;
}
.fw-choice__box {
	display: flex; align-items: center; gap: 12px;
	min-height: 56px; padding: 14px 18px;
	background: var(--white);
	border: 1px solid var(--border);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fw-choice__tick {
	flex: none; width: 18px; height: 18px;
	border: 1px solid var(--text-muted);
	position: relative;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fw-choice input[type="radio"] + .fw-choice__box .fw-choice__tick { border-radius: 50%; }
.fw-choice__tick::after {
	content: ""; position: absolute; inset: 0;
	opacity: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-size: 14px; background-position: center; background-repeat: no-repeat;
	transition: opacity var(--dur) var(--ease);
}
.fw-choice__label { flex: 1 1 auto; font-size: .98rem; color: var(--text); }
.fw-choice__n {
	font-size: .78rem; color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.fw-choice input:hover + .fw-choice__box { border-color: var(--text-muted); }
.fw-choice input:checked + .fw-choice__box {
	border-color: var(--gold-hover);
	background: #fdfbf7;
}
.fw-choice input:checked + .fw-choice__box .fw-choice__tick {
	background: var(--gold-hover); border-color: var(--gold-hover);
}
.fw-choice input:checked + .fw-choice__box .fw-choice__tick::after { opacity: 1; }
.fw-choice input:focus-visible + .fw-choice__box {
	outline: 2px solid var(--focus); outline-offset: 3px;
}

/* --- nav --------------------------------------------------------------- */

.fw-finder__nav {
	display: flex; flex-wrap: wrap; gap: var(--s2);
	justify-content: space-between; align-items: center;
	margin-top: var(--s6); padding-top: var(--s4);
	border-top: 1px solid var(--border);
}
.fw-finder__navright { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }

.fw-btn--quiet {
	background: transparent; color: var(--text-muted);
	border-color: transparent; padding-inline: 18px;
}
.fw-btn--quiet:hover { color: var(--charcoal); border-color: var(--border); }

.fw-error {
	margin-top: var(--s3); font-size: .9rem; color: #8a3324;
	display: flex; align-items: center; gap: 8px;
}
.fw-error[hidden] { display: none; }

.fw-finder__summary { margin-top: var(--s5); }
.fw-finder__summary h3 { font-size: 1.2rem; margin-bottom: 10px; }
.fw-finder__summary dl {
	display: grid; grid-template-columns: auto 1fr;
	gap: 8px var(--s4); margin: 0;
	font-size: .95rem;
}
.fw-finder__summary dt { color: var(--text-muted); }
.fw-finder__summary dd { margin: 0; color: var(--text); }

.fw-finder__note {
	margin-top: var(--s3);
	font-size: .84rem; color: var(--text-muted); max-width: 62ch;
}
.fw-finder__note--foot { margin-top: var(--s4); }

/* --- desktop ----------------------------------------------------------- */

@media (min-width: 1024px) {
	.fw-finder__grid {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		gap: var(--s9);
	}
}

@media (max-width: 560px) {
	.fw-choices { grid-template-columns: 1fr; }
	.fw-finder__nav { flex-direction: column-reverse; align-items: stretch; }
	.fw-finder__navright { margin-left: 0; }
	.fw-finder__navright .fw-btn { flex: 1 1 auto; }
	.fw-finder__nav > .fw-btn--quiet { width: 100%; }
}

/* ==========================================================================
   Editorial spread — the one full-bleed moment on the homepage

   The lead photograph runs off the viewport's left edge, which no other
   section does, so this reads as a magazine spread rather than a fourth
   two-column block. --edge reproduces the gutter .fw-wrap would have put on
   the right, so the text column still lines up with every section above it.
   ========================================================================== */

.fw-spread {
	background: var(--white);
	/* vw, not %, so the value means the same thing in every descendant that
	   uses it — the grid resolves % against the viewport, the body column
	   would resolve it against itself. */
	--edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}

.fw-spread__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s6);
}
@media (min-width: 1024px) {
	.fw-spread__inner {
		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
		gap: 0 clamp(var(--s7), 6vw, var(--s10));
		/* the photograph takes its height from the text beside it, so the two
		   columns end together — a fixed aspect ratio left a band of empty
		   page under the image */
		align-items: stretch;
		padding-right: var(--edge);
	}
}

/* --- media */
.fw-spread__media { position: relative; margin: 0; }
.fw-spread__lead {
	display: block; width: 100%;
	aspect-ratio: 3 / 2; object-fit: cover;
	/* the loupe, the hands and the watch sit right of centre in the frame; a
	   centred crop cuts the watch off as the column narrows */
	object-position: 66% 50%;
}
@media (min-width: 1024px) {
	.fw-spread__media { display: flex; flex-direction: column; justify-content: center; }
	.fw-spread__lead {
		aspect-ratio: auto;
		flex: 1 1 0; min-height: 420px;
		/* square against the page edge it bleeds off, eased on the inner side */
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	}
}

/* The inset is a second, much tighter focal length. Its ring is the section's
   own background, so it reads as one print laid over another. */
.fw-spread__inset {
	position: absolute; display: block;
	/* bottom-left below the two-column breakpoint: the phone crop shows the
	   whole frame, and the right of it is where the hands and the watch are */
	left: var(--gutter); bottom: var(--gutter);
	width: 30%; max-width: 145px;
	padding: 6px; background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
.fw-spread__inset img {
	display: block; width: 100%;
	aspect-ratio: 3 / 4; object-fit: cover;
	border-radius: 2px;
}
@media (min-width: 1024px) {
	.fw-spread__inset {
		/* hangs into the column gap, never past it */
		left: auto;
		right: calc(-1 * clamp(24px, 3vw, 56px));
		bottom: clamp(24px, 8%, 64px);
		width: clamp(150px, 28%, 215px); max-width: none;
		padding: 8px;
	}
}

.fw-spread__credit {
	margin-top: 14px; padding-inline: var(--gutter);
	text-align: right;
	font-size: .66rem; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-muted);
}
@media (min-width: 1024px) { .fw-spread__credit { padding-inline: 0; } }

/* --- body */
.fw-spread__body { padding-inline: var(--edge); max-width: 60ch; }
@media (min-width: 1024px) { .fw-spread__body { padding-inline: 0; max-width: 52ch; } }
.fw-spread__body .fw-eyebrow { display: block; margin-bottom: var(--s2); }
.fw-spread__body .fw-h2 { margin-bottom: var(--s3); }
.fw-spread__body .fw-lede { margin-bottom: var(--s5); }

/* Notes carry live catalogue figures. Deliberately unruled and unboxed: the
   section already has one strong edge, and three more would make a table. */
.fw-spread__notes { margin: 0 0 var(--s6); display: grid; gap: var(--s4); }
.fw-spread__notes > div { display: grid; gap: 6px; }
.fw-spread__notes dt {
	font-size: .72rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold-hover);
}
.fw-spread__notes dd {
	margin: 0; color: var(--text);
	font-size: .95rem; line-height: 1.7;
}

/* A permanently ruled link: heavier than .fw-link, lighter than a filled
   button, which a section this quiet does not want. */
.fw-textlink {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px; padding-block: 10px;
	font-size: .78rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--charcoal); text-decoration: none;
	border-bottom: 1px solid var(--gold);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fw-textlink:hover, .fw-textlink:focus-visible {
	color: var(--gold-hover); border-color: var(--gold-hover);
}
.fw-textlink .fw-arrow { transition: transform var(--dur) var(--ease); }
.fw-textlink:hover .fw-arrow { transform: translateX(4px); }

/* ==========================================================================
   Comparison — the page's one dark band

   Presented as lots rather than a spreadsheet: each watch gets a full-width
   plate, and the rows below carry only the fields these three actually record.
   Rows they all answer the same way are stated once, across the full width,
   which is both shorter and the more interesting fact.
   ========================================================================== */

.fw-compare { background: var(--charcoal); color: var(--ivory); }
.fw-compare h2 { color: var(--ivory); }

.fw-compare__head {
	display: grid; gap: var(--s4);
	margin-bottom: var(--s7);
}
.fw-compare__head .fw-eyebrow { display: block; margin-bottom: var(--s2); color: var(--gold-soft); }
.fw-compare__head .fw-lede {
	color: rgb(245 242 236 / 72%); max-width: 54ch;
	text-wrap: pretty; /* keeps a single word off the last line */
}
@media (min-width: 900px) {
	.fw-compare__head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end; gap: var(--s6);
	}
}

.fw-comparetable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fw-comparetable table {
	width: 100%; min-width: 680px;
	border-collapse: collapse; font-size: .95rem;
	table-layout: fixed;
}
.fw-comparetable th, .fw-comparetable td { text-align: left; vertical-align: top; }

/* --- the lot plates */
.fw-comparetable thead th { padding: 0 var(--s2) var(--s6); border: 0; }
.fw-comparetable thead th:first-child { width: 190px; padding: 0; }

.fw-lot { display: block; text-decoration: none; color: inherit; }
.fw-lot__plate {
	/* left, not centred: the reference, the collection and every value below
	   start at the column's left edge, and a centred photograph broke that line */
	display: flex; align-items: flex-end; justify-content: flex-start;
	height: 260px; margin-bottom: var(--s4);
}
.fw-lot__plate img {
	display: block; width: auto; height: auto;
	/* Never upscaled — the recovered originals are about 150px wide. They were
	   shot on black, so no panel is placed behind them: it would only draw a
	   second rectangle around the first. A hairline makes the photograph's own
	   edge read as deliberate framing rather than a seam. */
	max-width: 100%; max-height: 100%;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(245 242 236 / 7%);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fw-lot:hover .fw-lot__plate img, .fw-lot:focus-visible .fw-lot__plate img {
	box-shadow: 0 0 0 1px rgb(217 195 154 / 45%);
}
.fw-lot:hover .fw-lot__plate img, .fw-lot:focus-visible .fw-lot__plate img {
	transform: translateY(-4px);
}

.fw-lot__brand {
	display: block; font-size: .68rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold-soft); margin-bottom: 6px;
}
.fw-lot__ref {
	display: block; font-family: var(--font-display);
	font-size: 1.5rem; line-height: 1.15; color: var(--ivory);
	font-variant-numeric: tabular-nums;
	position: relative; padding-bottom: 4px;
}
.fw-lot__ref::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%;
	height: 1px; background: var(--gold);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.fw-lot:hover .fw-lot__ref::after, .fw-lot:focus-visible .fw-lot__ref::after { transform: scaleX(1); }
.fw-lot__name {
	display: block; margin-top: 6px;
	font-size: .82rem; color: rgb(245 242 236 / 55%);
}

/* --- rows */
.fw-comparetable tbody th, .fw-comparetable tbody td {
	padding: var(--s3) var(--s2);
	border-top: 1px solid rgb(245 242 236 / 9%);
}
.fw-comparetable tbody tr:last-child th,
.fw-comparetable tbody tr:last-child td { border-bottom: 1px solid rgb(245 242 236 / 9%); }

.fw-comparetable tbody th {
	font-family: var(--font-body); font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: rgb(245 242 236 / 50%); padding-left: 0;
}
.fw-cell__v { color: rgb(245 242 236 / 92%); }
/* No row currently renders empty, but 30% white blends to 2.4:1 on this
   band, so the dash is set where it would still pass if one ever did. */
.fw-cell__none { color: rgb(245 242 236 / 52%); }

/* A field all three answer the same way is one fact, not three columns of it. */
.fw-comparetable tr.is-shared td { color: rgb(245 242 236 / 62%); }
.fw-comparetable tr.is-shared .fw-cell__v { color: rgb(245 242 236 / 72%); }
.fw-cell__all {
	display: inline-block; margin-left: 12px;
	font-size: .64rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold-soft);
}

/* the price is the row that most rewards a glance */
.fw-comparetable tbody tr:last-child .fw-cell__v {
	font-family: var(--font-display); font-size: 1.35rem;
	color: var(--ivory); font-variant-numeric: tabular-nums;
}

.fw-compare__note {
	margin: var(--s5) 0 0; max-width: 76ch;
	font-size: .8rem; line-height: 1.7;
	color: rgb(245 242 236 / 48%);
}

/* stacked comparison on small screens */
@media (max-width: 780px) {
	.fw-comparetable { overflow: visible; }
	.fw-comparetable table, .fw-comparetable thead, .fw-comparetable tbody,
	.fw-comparetable tr, .fw-comparetable th, .fw-comparetable td {
		display: block; width: auto; min-width: 0;
	}
	/* three across, not two: a 2x2 grid left the third lot beside an empty cell,
	   and the row of three is the comparison's own shape */
	.fw-comparetable thead tr {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s2);
	}
	.fw-comparetable thead th:first-child { display: none; }
	.fw-comparetable thead th { padding: 0 0 var(--s5); }
	.fw-lot__plate { height: 165px; margin-bottom: var(--s2); }
	.fw-lot__brand { font-size: .6rem; letter-spacing: .14em; }
	.fw-lot__ref { font-size: 1.05rem; }

	.fw-comparetable tbody tr { padding-block: var(--s3); border-top: 1px solid rgb(245 242 236 / 9%); }
	.fw-comparetable tbody tr:last-child th,
	.fw-comparetable tbody tr:last-child td { border-bottom: 0; }
	.fw-comparetable tbody th { padding: 0 0 8px; border: 0; }
	.fw-comparetable tbody td { padding: 3px 0 3px var(--s2); border: 0; position: relative; }
	.fw-comparetable tbody td::before {
		content: attr(data-watch); display: block;
		font-size: .62rem; font-weight: 600;
		letter-spacing: .16em; text-transform: uppercase;
		color: var(--gold-soft); margin-bottom: 2px;
	}
	.fw-comparetable tr.is-shared td { padding-left: 0; }
	.fw-comparetable tr.is-shared td::before { content: none; }
}

/* ==========================================================================
   Reference shelf — the guides, when the journal has nothing in it

   A contents index, not three cards. The only images the archive holds for
   these pages are 150px product shots, so this section is deliberately the
   page's one wholly typographic band; the vertical rule between the two
   columns is the print detail that carries it.
   ========================================================================== */

/* White, not ivory: the newsletter that follows is already ivory, and two
   ivory bands in a row read as one very long section. */
.fw-shelf { background: var(--white); }

.fw-shelf__head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.fw-shelf__head .fw-eyebrow { display: block; margin-bottom: var(--s2); }
.fw-shelf__head .fw-lede { max-width: 54ch; text-wrap: pretty; }
@media (min-width: 900px) {
	.fw-shelf__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s6); }
}

.fw-shelf__list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 800px) {
	.fw-shelf__list {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(var(--s6), 6vw, var(--s9));
	}
}
@media (min-width: 800px) {
	/* One hairline down the middle, the way a printed contents page is set.
	   Painted as a background rather than a ::before element: a pseudo-element
	   inside a grid has to be placed against lines that only exist while the
	   row count happens to match. */
	.fw-shelf__list {
		background-image: linear-gradient(var(--border), var(--border));
		background-size: 1px 100%;
		background-position: center top;
		background-repeat: no-repeat;
	}
}

.fw-shelf__list li { border-top: 1px solid var(--border); }
.fw-shelf__list li:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 800px) {
	/* with two columns the last item in each needs the closing rule */
	.fw-shelf__list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
}

.fw-shelf__list a {
	display: grid; align-items: baseline;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px var(--s3);
	padding: var(--s4) 0;
	text-decoration: none; color: inherit;
}
.fw-shelf__title {
	font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2;
	color: var(--charcoal);
	transition: color var(--dur) var(--ease);
}
.fw-shelf__desc {
	grid-column: 1; margin-top: 4px;
	font-size: .88rem; color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.fw-shelf__go {
	grid-column: 2; grid-row: 1 / span 2;
	align-self: center; color: var(--gold-hover);
	opacity: 0; transform: translateX(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fw-shelf__list a:hover .fw-shelf__title,
.fw-shelf__list a:focus-visible .fw-shelf__title { color: var(--gold-hover); }
.fw-shelf__list a:hover .fw-shelf__go,
.fw-shelf__list a:focus-visible .fw-shelf__go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.fw-shelf__go { transition: none; }
}

@media (max-width: 520px) {
	.fw-shelf__title { font-size: 1.28rem; }
	.fw-shelf__list a { padding: var(--s3) 0; }
}

/* ==========================================================================
   Journal
   ========================================================================== */

.fw-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 700px)  { .fw-journal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fw-journal { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

.fw-article { display: flex; flex-direction: column; position: relative; }
.fw-article__media {
	overflow: hidden; border-radius: var(--radius-lg); margin-bottom: var(--s3);
	background: var(--ivory); aspect-ratio: 3 / 2;
}
.fw-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.fw-article:hover .fw-article__media img { transform: scale(1.04); }
.fw-article__cat {
	font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gold-hover); margin-bottom: 8px;
}
.fw-article__title { font-size: 1.4rem; margin: 0 0 10px; }
.fw-article__title a { text-decoration: none; }
.fw-article__title a::after { content: ""; position: absolute; inset: 0; }
.fw-article__excerpt { font-size: .95rem; color: var(--text-muted); margin-bottom: var(--s2); }
.fw-article__more {
	margin-top: auto; font-size: .72rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal);
	display: inline-flex; align-items: center; gap: 8px;
}
.fw-article:hover .fw-article__more { color: var(--gold-hover); }

.fw-empty {
	border: 1px dashed var(--border); border-radius: var(--radius-lg);
	padding: var(--s6); text-align: center; color: var(--text-muted);
}

/* ==========================================================================
   Colophon — the closing band

   Ends the page on what the archive is and what it holds. The sign-up form is
   an optional second column that only exists when a mailing provider is
   configured; the figures strip runs full width underneath either way.
   ========================================================================== */

.fw-colophon { background: var(--ivory); }

.fw-colophon__top { display: grid; gap: var(--s6); }
@media (min-width: 900px) {
	.fw-colophon__top.has-form {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(var(--s7), 6vw, var(--s10));
		align-items: start;
	}
}
.fw-colophon__intro { max-width: 62ch; }
.fw-colophon__intro .fw-eyebrow { display: block; margin-bottom: var(--s2); }
.fw-colophon__intro .fw-h2 { margin-bottom: var(--s3); }
.fw-colophon__intro .fw-lede { max-width: 58ch; text-wrap: pretty; }

/* With no sign-up form there is no second column, and a 62ch measure left the
   right half of the band empty — the same imbalance this section had before.
   The statement opens across both columns instead: heading left, paragraph
   right, starting on the same line. */
@media (min-width: 900px) {
	.fw-colophon__top:not(.has-form) .fw-colophon__intro {
		display: grid; max-width: none;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(var(--s7), 6vw, var(--s10));
		align-items: start;
	}
	.fw-colophon__top:not(.has-form) .fw-colophon__intro .fw-eyebrow { grid-column: 1; grid-row: 1; }
	.fw-colophon__top:not(.has-form) .fw-colophon__intro .fw-h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
	.fw-colophon__top:not(.has-form) .fw-colophon__intro .fw-lede { grid-column: 2; grid-row: 2; max-width: none; }
}

/* --- figures */
.fw-colophon__figures {
	margin: var(--s8) 0 0; padding: 0;
	display: grid; gap: var(--s5);
	border-top: 1px solid var(--border);
	padding-top: var(--s5);
}
/* Two up from 360px: four stacked figures is a long scroll on a phone, and
   below that the 2006-2007 figure is wider than half the column. */
@media (min-width: 360px)  { .fw-colophon__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fw-colophon__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); } }

.fw-colophon__figures > div { display: block; }
.fw-colophon__figures dt {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1;
	color: var(--charcoal); font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
.fw-colophon__figures dd {
	margin: 10px 0 0;
	font-size: .74rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-muted);
	max-width: 22ch;
}

/* --- sign-up, when a provider is configured

   A ruled field rather than a boxed one: the band already has a hairline
   language, and a bordered input with a filled button beside it is the shape
   every default newsletter block on the web arrives in. */
.fw-colophon__formhead {
	font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2;
	margin: 0 0 var(--s2); color: var(--charcoal);
}
.fw-colophon__formtext { margin: 0 0 var(--s4); color: var(--text-muted); font-size: .95rem; }

.fw-signup__field { position: relative; margin-bottom: var(--s3); }
.fw-signup label {
	display: block; margin-bottom: 10px;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--text-muted);
}
.fw-signup input[type="email"] {
	width: 100%; min-height: 52px; padding: 12px 2px;
	font-family: var(--font-body); font-size: 1.05rem;
	color: var(--charcoal); background: transparent;
	border: 0; border-bottom: 1px solid var(--charcoal);
	border-radius: 0;
	transition: border-color var(--dur) var(--ease);
}
.fw-signup input[type="email"]::placeholder { color: var(--text-muted); }
.fw-signup input[type="email"]:focus { outline: none; border-bottom-color: var(--gold-hover); }
.fw-signup input[type="email"]:focus-visible {
	outline: 2px solid var(--focus); outline-offset: 4px;
}
/* A <button> keeps the user agent's box border, which drew a rectangle
   around what is meant to read as a ruled text link. */
.fw-signup button {
	border: 0; border-bottom: 1px solid var(--gold);
	background: none; padding-inline: 0; cursor: pointer;
}
.fw-signup button:hover, .fw-signup button:focus-visible { border-bottom-color: var(--gold-hover); }
.fw-signup__consent {
	margin: var(--s3) 0 0; max-width: 46ch;
	font-size: .78rem; line-height: 1.7; color: var(--text-muted);
}
.fw-signup__consent a { color: var(--charcoal); }

/* ==========================================================================
   Footer

   Two groups instead of four ragged columns. The archived-document group is
   twice as wide and runs in two sub-columns, so it ends level with the browse
   list rather than trailing five links below it.
   ========================================================================== */

.fw-footer { background: var(--charcoal); color: var(--ivory); padding-block: var(--s8) var(--s5); }

.fw-footer__top {
	display: grid; grid-template-columns: 1fr; gap: var(--s6);
	padding-bottom: var(--s6); border-bottom: 1px solid var(--charcoal-line);
}
@media (min-width: 700px)  {
	.fw-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
	/* in the two-column band the nine documents were squeezed into one half,
	   wrapping "Shipping & Handling" over two lines beside an empty column */
	.fw-footer__group--docs { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.fw-footer__group--docs { grid-column: auto; }
}
@media (min-width: 1024px) {
	.fw-footer__top {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.6fr);
		gap: clamp(var(--s6), 5vw, var(--s9));
	}
}

.fw-footer__brand .fw-brandmark { align-items: flex-start; text-align: left; color: var(--ivory); }
.fw-footer__brand .fw-brandmark__tag { color: rgb(245 242 236 / 55%); }
.fw-footer__desc {
	margin-top: var(--s3); padding-top: var(--s3);
	border-top: 1px solid var(--charcoal-line);
	color: rgb(245 242 236 / 68%); font-size: .95rem; max-width: 40ch;
}

.fw-footer h2 {
	font-family: var(--font-body); font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
	margin: 0 0 var(--s2); max-width: 26ch;
	/* one heading wraps to two lines and the other does not, which left the two
	   link lists starting twelve pixels apart */
	line-height: 1.5; min-height: 3em;
}
.fw-footer ul { list-style: none; margin: 0; padding: 0; }
.fw-footer li a {
	display: inline-flex; align-items: center; min-height: 44px;
	color: rgb(245 242 236 / 78%); text-decoration: none; font-size: .95rem;
	transition: color var(--dur) var(--ease);
}
.fw-footer li a:hover, .fw-footer li a:focus-visible { color: var(--gold-soft); }

/* nine links in one column would run five deeper than its neighbour */
@media (min-width: 620px) {
	.fw-footer__group--docs ul {
		columns: 2; column-gap: var(--s5);
	}
	.fw-footer__group--docs li { break-inside: avoid; }
}

.fw-footer__note {
	margin: var(--s3) 0 0; max-width: 46ch;
	font-size: .78rem; line-height: 1.65;
	color: rgb(245 242 236 / 52%);
}

.fw-footer__bottom {
	padding-top: var(--s4); display: flex; flex-wrap: wrap;
	gap: var(--s2) var(--s5); justify-content: space-between; align-items: baseline;
	font-size: .8rem; color: rgb(245 242 236 / 55%);
}
.fw-footer__bottom p { margin: 0; }
.fw-footer__social { display: flex; gap: var(--s2); list-style: none; margin: var(--s2) 0 0; padding: 0; }

/* ==========================================================================
   Interior pages (catalogue, taxonomy, prose, 404) — same design system
   ========================================================================== */

.fw-layout {
	display: grid; grid-template-columns: 1fr;
	gap: var(--s5);
	max-width: var(--maxw); margin-inline: auto;
	padding: var(--s6) var(--gutter) var(--s9);
	align-items: start;
}
@media (min-width: 1024px) { .fw-layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s7); } }

.fw-rail { position: sticky; top: 104px; }
.fw-rail__title {
	font-family: var(--font-body); font-size: .68rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
	margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--border);
}
.fw-rail__title--sub { margin-top: var(--s5); }
.fw-rail ul { list-style: none; margin: 0; padding: 0; }
.fw-rail a {
	display: block; padding: 9px 0; min-height: 40px;
	font-size: .9rem; color: var(--text); text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.fw-rail a:hover { color: var(--gold-hover); padding-left: 6px; }
.fw-rail [aria-current="page"] { color: var(--gold-hover); font-weight: 600; }

@media (max-width: 1023px) {
	.fw-rail { display: none; position: static; }
	.fw-rail.is-open { display: block; }
}
.fw-nav-toggle {
	display: none; align-items: center; justify-content: center; gap: 10px;
	width: 100%; min-height: 52px; padding: 14px 20px; cursor: pointer;
	background: var(--charcoal); color: var(--ivory); border: 0;
	border-radius: var(--radius); font-family: var(--font-body);
	font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 1023px) { .fw-nav-toggle { display: flex; } }

.fw-content { min-width: 0; }

.fw-breadcrumb { font-size: .82rem; color: var(--text-muted); margin: 0 0 var(--s3); }
.fw-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.fw-breadcrumb li::after { content: "/"; margin-left: 6px; color: var(--border); }
.fw-breadcrumb li:last-child::after { content: ""; }
.fw-breadcrumb a { color: var(--text-muted); }
.fw-breadcrumb a:hover { color: var(--gold-hover); }
.fw-breadcrumb [aria-current="page"] { color: var(--text); }

.fw-page-head { margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); }
.fw-page-head h1 { font-size: clamp(2rem, 3.2vw, 3.25rem); }
.fw-page-head p { color: var(--text-muted); margin: var(--s2) 0 0; max-width: 68ch; }

.fw-archive-note {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--ivory-light); border: 1px solid var(--border);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius); padding: 14px 18px;
	margin: 0 0 var(--s5); font-size: .88rem; color: var(--text-muted); line-height: 1.6;
}
.fw-archive-note strong { display: block; color: var(--text); margin-bottom: 2px; }
.fw-archive-note p { margin: 0; }
.fw-archive-note__icon { flex: none; }

.fw-price-note {
	display: inline-block; font-size: .66rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--gold-hover); border: 1px solid var(--border);
	border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle;
}

.fw-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--s3); margin: 0 0 var(--s6); padding: 0; list-style: none;
}
@media (max-width: 420px) { .fw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); } }

.fw-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); overflow: hidden;
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fw-card:hover, .fw-card:focus-within {
	box-shadow: var(--shadow-md); border-color: var(--gold-soft); transform: translateY(-2px);
}
.fw-card__media {
	display: flex; align-items: center; justify-content: center;
	background: var(--ivory-light); aspect-ratio: 4 / 5;
	padding: var(--s2); border-bottom: 1px solid var(--border); overflow: hidden;
}
.fw-card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform 480ms var(--ease); }
.fw-card:hover .fw-card__media img { transform: scale(1.04); }
.fw-card__media--empty { color: var(--text-muted); font-size: .76rem; text-align: center; }
.fw-card__body { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.fw-card__name { margin: 0; font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.fw-card__name a { text-decoration: none; }
.fw-card__name a::after { content: ""; position: absolute; inset: 0; }
.fw-card__feats { margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--text-muted); }
.fw-card__price { margin-top: auto; padding-top: 6px; font-size: .95rem; font-weight: 600; color: var(--charcoal); }
.fw-card__price small { display: block; font-size: .66rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.fw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s2); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.fw-tile-lnk {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
	min-height: 92px; padding: var(--s3); text-decoration: none;
	background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
	font-family: var(--font-display); font-size: 1.1rem; color: var(--charcoal);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fw-tile-lnk:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--gold-hover); }
.fw-tile-lnk small { font-family: var(--font-body); font-size: .74rem; color: var(--text-muted); }

.fw-product { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .fw-product { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--s7); } }
.fw-product__media {
	background: var(--ivory-light); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: var(--s5);
	display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
}
.fw-product__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.fw-spec { border-collapse: collapse; width: 100%; margin: 0 0 var(--s4); font-size: .95rem; }
.fw-spec th, .fw-spec td { text-align: left; padding: 12px var(--s2); border-bottom: 1px solid var(--border); vertical-align: top; }
.fw-spec th { width: 38%; color: var(--text-muted); font-weight: 500; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }

.fw-featurelist { margin: 0 0 var(--s4); padding-left: 1.15em; }
.fw-featurelist li { margin-bottom: 6px; }

.fw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s4); padding: 0; list-style: none; }
.fw-tags a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
	font-size: .8rem; text-decoration: none; color: var(--charcoal);
	background: var(--ivory-light); border: 1px solid var(--border); border-radius: 999px;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fw-tags a:hover { border-color: var(--gold); color: var(--gold-hover); }

.fw-prose { max-width: 72ch; font-size: 1.0625rem; line-height: 1.75; }
.fw-prose h2 { font-size: 1.75rem; margin-top: 1.8em; }
.fw-prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.fw-prose ul, .fw-prose ol { padding-left: 1.3em; }
.fw-prose li { margin-bottom: .45em; }
.fw-prose a { color: var(--charcoal); text-decoration-color: var(--gold); }
.fw-prose a:hover { color: var(--gold-hover); }
.fw-prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: .95rem; }
.fw-prose th, .fw-prose td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.fw-prose th { background: var(--ivory-light); }
.fw-prose blockquote { margin: 0 0 1.3em; padding: 4px 20px; border-left: 3px solid var(--gold); color: var(--text-muted); }
.fw-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }

.fw-pagination { margin: var(--s6) 0 0; }
.fw-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; min-height: 46px; padding: 10px 14px;
	border: 1px solid var(--border); border-radius: var(--radius);
	text-decoration: none; font-size: .9rem; color: var(--charcoal); background: var(--white);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fw-pagination .page-numbers:hover { border-color: var(--gold); }
.fw-pagination .page-numbers.current { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.fw-pagination .page-numbers.dots { border-color: transparent; }

.fw-404 { max-width: 68ch; }
.fw-404__code { font-family: var(--font-display); font-size: 4rem; color: var(--border); line-height: 1; margin: 0 0 var(--s2); }

/* ==========================================================================
   Reveal on scroll (progressive enhancement; content is visible without JS)
   ========================================================================== */

/* Content is visible by default. JavaScript "arms" only those blocks that start
   below the viewport, so nothing above the fold is ever hidden, a failed or slow
   observer cannot hide content, and with JS off nothing is hidden at all. */
.fw-reveal { opacity: 1; transform: none; }
.fw-armed { opacity: 0; transform: translateY(14px); }
.fw-armed.is-in {
	opacity: 1; transform: none;
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
	.fw-armed { opacity: 1; transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.fw-announce, .fw-header, .fw-drawer, .fw-footer, .fw-rail,
	.fw-nav-toggle, .fw-searchpanel, .fw-finder, .fw-signup { display: none !important; }
	.fw-layout { grid-template-columns: 1fr; padding: 0; }
	body { font-size: 11pt; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   Late additions used by templates
   ========================================================================== */

.fw-finder__navright { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }
.fw-finder__note { margin-top: var(--s3); font-size: .82rem; color: var(--text-muted); }
.fw-choices small { margin-left: auto; }

.fw-filters {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	margin: 0 0 var(--s4); padding: 0; list-style: none;
}
.fw-filters__label {
	font-size: .72rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--text-muted); margin-right: 4px;
}
.fw-filters li span {
	display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px;
	font-size: .82rem; background: var(--ivory); border: 1px solid var(--border);
	border-radius: 999px;
}

/* ==========================================================================
   Small-screen header and touch-target corrections
   Verified in-engine at 320px: the three-column header (search / wordmark /
   actions) overflowed by 35px, and several controls sat below the 44px
   minimum. Inline links inside body copy are exempt from the target-size
   minimum and are deliberately left alone.
   ========================================================================== */

.fw-brandmark { min-height: 44px; justify-content: center; }
.fw-hero__links a { min-height: 44px; }
.fw-link { min-height: 44px; }
.fw-brands__count { padding-block: 2px; }

@media (max-width: 420px) {
	:root { --gutter: 16px; }
	.fw-header__inner { gap: var(--s1); min-height: 72px; }
	.fw-brandmark__name { font-size: 1.15rem; letter-spacing: .06em; }
	/* The Brands shortcut duplicates the drawer, so it yields first. */
	.fw-header__right .fw-iconbtn:not(.fw-menu-toggle) { display: none; }
	.fw-iconbtn { padding: 10px 6px; }
	.fw-announce .fw-wrap { font-size: .68rem; }
}

@media (max-width: 340px) {
	.fw-brandmark__name { font-size: 1.02rem; }
	.fw-btn { padding-inline: 20px; font-size: .72rem; }
	.fw-tile__title { font-size: 1.3rem; }
}

/* Target sizes verified in-engine: footer and comparison links were 40px and
   23px tall. Inline links inside a sentence (the newsletter consent line) keep
   the WCAG 2.5.8 inline exception and are intentionally not padded. */
.fw-footer li a { min-height: 44px; }
/* Block, not inline-flex: this used to wrap a bare text link, and when the
   comparison header became a stacked lot the flex row laid the plate, the brand
   and the reference out side by side. The height floor is what mattered. */
.fw-comparetable thead th a { display: block; min-height: 44px; }
.fw-nav__list a { padding-inline: 8px; }