/* Wimter International: site styles.
   Written with logical properties (inline-start, margin-inline) so the Arabic site mirrors
   from the same stylesheet rather than needing a second one. */

:root {
	--deep: #00602F;
	--field: #4A9028;
	--sprout: #78B040;
	--gold: #C08A2E;
	--ink: #132A1B;
	--paper: #EFF1E9;
	--line: #DDE1D3;
	--muted: #56635A;
	--soft: #7A877E;
	--white: #fff;
	--pop: "Poppins", "Segoe UI", sans-serif;
	--sans: "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
	--wrap: 1280px;
	--pad: clamp(18px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
/* A .btn sets its own display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--pop); margin: 0; line-height: 1.15; letter-spacing: -.015em; }
a { color: var(--deep); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.band { padding-block: clamp(38px, 6vw, 62px); }
.band.paper { background: var(--paper); }
.band.deep { background: var(--deep); color: var(--white); }
.band.deep h2, .band.deep h3 { color: var(--white); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: 8px; inset-block-start: 8px; background: #fff; padding: 10px 16px; z-index: 99; }

/* ---------- header ---------- */
.topbar {
	background: var(--ink);
	color: var(--paper);
	font-size: 14px;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; min-height: 38px; }
.topbar a { color: var(--paper); text-decoration: none; }
.topbar .wa { color: var(--sprout); font-weight: 600; white-space: nowrap; }
/* Above the sticky header, so the language panel can open over it. */
.topbar { position: relative; z-index: 45; }
/* Spacing comes from the gap, not from margins or spaces, so a wrapped item never starts a line
   indented. */
.tb-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
@media (max-width: 760px) {
	/* On a phone the bar is one row: WhatsApp, the way buyers reach us first, and the language.
	   The tagline and email stay out: the page says what Wimter does, and the email is in the footer. */
	.tb-tagline, .tb-email { display: none; }
	.topbar .wrap { flex-wrap: nowrap; min-height: 44px; padding-block: 4px; }
	.tb-contact { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
}

/* ---------- languages ---------- */
.lang { display: inline-flex; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(239, 241, 233, .35);
	border-radius: 30px; background: transparent; color: var(--paper); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lang-toggle::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg); }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background: rgba(239, 241, 233, .12); }
.lang-toggle:focus-visible { outline: 2px solid var(--sprout); outline-offset: 2px; }
.lang-panel { position: absolute; inset-block-start: 100%; inset-inline-end: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
	width: min(720px, calc(100vw - 2 * var(--pad))); max-height: min(70vh, 560px); overflow-y: auto; padding: 16px;
	background: var(--white); color: var(--ink); border: 1px solid var(--line); border-block-start: 3px solid var(--deep);
	border-radius: 0 0 4px 4px; box-shadow: 0 26px 40px -18px rgba(19, 42, 27, .35); }
.lang-panel input[type="search"] { width: 100%; padding: 10px 12px; margin-block-end: 12px; border: 1px solid rgba(19, 42, 27, .25);
	border-radius: 4px; font: inherit; font-size: 15px; color: var(--ink); }
.lang-panel input[type="search"]:focus { outline: 2px solid var(--field); outline-offset: 1px; }
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; }
.lang-list button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; text-align: start;
	cursor: pointer; color: var(--ink); font: inherit; }
.lang-list button:hover, .lang-list button:focus-visible { background: var(--paper); outline: none; }
.lang-list button[aria-current] { background: #E6F0DA; }
.lang-list b { display: block; font-family: var(--pop); font-weight: 600; font-size: 14px; }
.lang-list small { display: block; color: var(--soft); font-size: 12px; line-height: 1.35; }
.lang-list .lang-region { grid-column: 1 / -1; margin-block: 12px 2px; padding-inline: 10px; font-family: var(--pop); font-weight: 600;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--field); }
.lang-none { margin: 4px 0; color: var(--muted); font-size: 14px; }
.lang-note { margin: 12px 0 0; padding-block-start: 10px; border-block-start: 1px solid var(--line); color: var(--soft); font-size: 12px; }
@media (max-width: 760px) {
	.lang-panel { inset-inline: 0; width: auto; max-height: 75vh; }
	.lang-list { grid-template-columns: 1fr 1fr; }
}

/* Google Translate's own bar, tooltips and highlights: the switcher above replaces them. */
.skiptranslate iframe, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight, font[style] { background: none !important; box-shadow: none !important; }
#google_translate_element { display: none; }

/* Right to left, for Arabic. Most rules are written with logical properties and turn by
   themselves; these are the arrows and icons that point a direction. */
.dir-arrow { display: inline-block; }
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }
/* A translated "Get a quote" can be twice as long; on a small phone the button wraps its own
   text rather than pushing the header onto a second row. */
@media (max-width: 480px) {
	.is-translated .header-actions .btn { white-space: normal; max-width: 128px; padding: 7px 10px; font-size: 13px; line-height: 1.2; text-align: center; }
}
[dir="rtl"] .search-toggle svg, [dir="rtl"] .site-search-form svg { transform: scaleX(-1); }
.topbar .muted { color: rgba(239, 241, 233, .55); }

.masthead { background: var(--white); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; z-index: 40; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.brand img, .brand svg, .custom-logo-link img { height: 42px; width: auto; max-width: 62vw; object-fit: contain; }
.custom-logo-link { display: block; line-height: 0; }
.nav { display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; font-family: var(--pop); font-weight: 600; font-size: 15px; }
.nav ul, .nav li { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; }
.nav a { text-decoration: none; color: var(--ink); padding-block-end: 4px; border-block-end: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav .current-menu-item > a { color: var(--deep); border-block-end-color: var(--gold); }
.header-actions { display: flex; gap: 10px; align-items: center; }
.header-actions .btn { white-space: nowrap; }

/* ---------- search ---------- */
.search-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 42px; padding: 0;
	border: 1px solid rgba(0, 96, 47, .35); border-radius: 4px; background: transparent; color: var(--deep); cursor: pointer; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: rgba(0, 96, 47, .06); }
.search-toggle:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.label-short { display: none; }

/* Hangs from the header like the Products menu, and sits above it if both are asked for. */
.site-search { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 41; background: var(--white);
	border-block: 1px solid var(--line); box-shadow: 0 26px 40px -18px rgba(19, 42, 27, .28); }
.masthead .site-search .wrap { display: block; padding-block: 18px 20px; }
.masthead:has(.site-search:not([hidden])) .has-mega:hover > .mega { visibility: hidden; }
.site-search-form { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; background: var(--white);
	border: 1px solid rgba(19, 42, 27, .25); border-radius: 4px; }
.site-search-form:focus-within { outline: 2px solid var(--field); outline-offset: 1px; }
.site-search-form svg { flex: none; color: var(--soft); }
.site-search-form input[type="search"] { flex: 1; min-width: 0; padding: 10px 4px; border: 0; background: transparent;
	font: inherit; font-size: 17px; color: var(--ink); }
.site-search-form input[type="search"]:focus { outline: none; }
.site-search-form .btn { padding: 11px 18px; }
.site-search-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 4px; background: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--muted); }
.site-search-close:hover { background: var(--paper); color: var(--ink); }
.site-search-close:focus-visible { outline: 2px solid var(--field); outline-offset: 1px; }
.site-search-results { max-height: min(62vh, 560px); overflow-y: auto; }
.site-search-results:not(:empty) { margin-block-start: 14px; }
.ss-label { font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--soft); margin-inline-end: 4px; }
.ss-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 0 12px; }
.ss-links a { font-family: var(--pop); font-weight: 600; font-size: 13px; text-decoration: none; color: var(--deep);
	background: #E6F0DA; border-radius: 30px; padding: 6px 12px; }
.ss-links a:hover, .ss-links a:focus-visible { background: var(--deep); color: var(--white); outline: none; }
.ss-note { margin: 0 0 12px; padding: 10px 14px; border-inline-start: 3px solid var(--gold); background: #FBF7EE; font-size: 15px; }
.ss-products { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.ss-products a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 4px; text-decoration: none; color: var(--ink); }
.ss-products a:hover, .ss-products a:focus-visible { background: var(--paper); outline: none; }
.ss-thumb { flex: none; width: 56px; height: 44px; background: var(--paper); border-radius: 3px; overflow: hidden; }
.ss-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ss-products b { display: block; font-family: var(--pop); font-weight: 600; font-size: 15px; line-height: 1.3; }
.ss-products small { display: block; color: var(--soft); font-size: 13px; }
.search-groups { margin-block-end: 22px; }
.search-pages { margin-block-start: 32px; }
.ss-all { display: inline-block; margin-block-start: 10px; font-family: var(--pop); font-weight: 600; font-size: 14px; color: var(--deep); }

/* ---------- products menu ----------
   The panel hangs from the whole header, not from the Products item, so it spans the page.
   The link's ::after bridges the gap between the word and the panel, so moving the mouse down
   never closes it on the way. */
.has-mega > a { position: relative; }
.has-mega > a::after { content: ""; position: absolute; inset-inline: -14px; inset-block-start: 100%; height: 26px; }
.mega-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; margin-inline-start: 2px;
	padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mega-toggle::before { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.has-mega.open > .mega-toggle::before { transform: translateY(2px) rotate(225deg); }
.mega-toggle:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; border-radius: 3px; }

.mega {
	position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 39;
	background: var(--white); border-block: 1px solid var(--line); box-shadow: 0 26px 40px -18px rgba(19, 42, 27, .28);
	font-family: var(--sans); font-weight: 400; font-size: 15px;
	visibility: hidden; opacity: 0; transform: translateY(-6px);
	/* Closing waits a moment, so a mouse that slips off the panel for an instant does not lose it. */
	transition: opacity .15s ease .12s, transform .15s ease .12s, visibility 0s linear .27s;
}
.has-mega.open > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1101px) {
	.has-mega:hover > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.has-mega:hover > .mega-toggle::before { transform: translateY(2px) rotate(225deg); }
}
.masthead .mega .wrap { display: block; padding-block: 26px 20px; }
.mega-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.nav .mega a { padding: 0; border: 0; white-space: normal; font-weight: inherit; }
.nav .mega ul, .nav .mega li { display: block; }
.nav .mega .mega-head { display: grid; gap: 12px; color: var(--ink); }
.mega-shot { display: block; height: 118px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
	transition: border-color .15s ease; }
.mega-shot img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.mega-name b { display: block; font-family: var(--pop); font-weight: 600; font-size: 16px; line-height: 1.25; }
.mega-name small { display: block; color: var(--soft); font-size: 13px; margin-block-start: 2px; }
.nav .mega .mega-head:hover { color: var(--deep); border: 0; }
.mega-head:hover .mega-shot { border-color: var(--field); }
.nav .mega .mega-sub { display: grid; gap: 5px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.nav .mega .mega-sub a { color: var(--muted); font-size: 14px; }
.nav .mega .mega-sub a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.mega-foot { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; margin-block-start: 20px; padding-block-start: 14px;
	border-block-start: 1px solid var(--line); }
.nav .mega .mega-foot a { font-family: var(--pop); font-weight: 600; font-size: 14px; color: var(--deep); }
.nav .mega .mega-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--pop); font-weight: 600; font-size: 15px; line-height: 1;
	padding: 13px 20px; border-radius: 4px; border: 1px solid transparent;
	text-decoration: none; cursor: pointer; background: var(--deep); color: var(--white);
}
.btn:hover { background: #024d26; color: var(--white); }
.btn.ghost { background: transparent; color: var(--deep); border-color: rgba(0, 96, 47, .35); }
.btn.ghost:hover { background: rgba(0, 96, 47, .06); color: var(--deep); }
.btn.light { background: var(--white); color: var(--deep); }
.btn.on-deep { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .55); }
.btn[disabled] { opacity: .55; cursor: default; }

/* The menu button: three bars that turn into a cross while the menu is open. */
.nav-toggle { display: none; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
	background: none; border: 0; border-radius: 4px; color: var(--ink); cursor: pointer; }
.nav-toggle:hover { background: var(--paper); }
.nav-toggle:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.nav-toggle .bar { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
	transition: transform .2s ease, opacity .15s ease; }
.nav-toggle[aria-expanded="true"] .bar-top { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { background: var(--paper); padding-block: clamp(34px, 5vw, 52px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.eyebrow { font-family: var(--pop); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--field); margin-block-end: 14px; }
.hero .wrap.is-plain { display: block; }
/* A heading with a photograph beside it, so no page opens on a half-empty band. */
.hero .wrap.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.hero .has-media .lead { max-width: 58ch; }
.hero-media { margin: 0; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--line);
	box-shadow: 0 22px 44px -26px rgba(19, 42, 27, .55); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media.is-product { background: var(--white); border: 1px solid var(--line); box-shadow: none; }
.hero-media.is-product img { object-fit: contain; padding: 24px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 700; line-height: 1.06; max-width: 15ch; }
.hero p.lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); max-width: 60ch; margin-block: 18px 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 28px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fact { border: 1px solid var(--line); padding: 14px 16px; background: var(--white); }
.fact b { display: block; font-family: var(--pop); color: var(--deep); font-size: 17px; }
.fact span { font-size: 14px; color: var(--muted); }

.quotebox { background: var(--white); border: 1px solid var(--line); border-block-start: 3px solid var(--deep); padding: 24px; }
.quotebox h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); margin-block-end: 16px; }
.quotebox label { display: block; font-family: var(--pop); font-weight: 600; font-size: 13px; margin-block-end: 5px; }
.quotebox .row { display: grid; gap: 12px; margin-block-end: 12px; }
.quotebox .row.two { grid-template-columns: 1fr 1fr; }
.quotebox small { display: block; color: var(--soft); font-size: 13px; margin-block-start: 12px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
	width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
	padding: 11px 13px; border: 1px solid rgba(19, 42, 27, .25); border-radius: 4px; background: var(--white);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--field); outline-offset: 1px; }

/* A wide table stays readable on a phone by scrolling inside its own box, never by
   stretching the page. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller table { min-width: 660px; }
.scroller + .scroll-hint { font-size: 13px; color: var(--soft); margin-block-start: 8px; }
@media (min-width: 761px) { .scroll-hint { display: none; } }

/* ---------- product grid ---------- */
.section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-block-end: 22px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; }
.count-pill { font-family: var(--pop); font-weight: 600; font-size: 13px; color: var(--white); background: var(--field); border-radius: 30px; padding: 5px 12px; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.groups { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card { border: 1px solid var(--line); border-radius: 4px; background: var(--white); display: flex; flex-direction: column; overflow: hidden; }
/* The image is positioned out of flow: a flex child at height:100% inside an aspect-ratio box
   makes the height circular, and the browser falls back to the image's own height, which is
   why tall pouches used to stretch their cards. */
.card .shot { position: relative; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.card .shot a { position: absolute; inset: 0; display: block; }
.card .shot img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
	object-fit: contain; }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.card h3 { font-size: 18px; font-weight: 600; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { color: var(--deep); }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.card .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px 14px; font-size: 14px; border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.card .spec div span { display: block; color: var(--soft); font-size: 12px; }
.card .spec div b { font-family: var(--pop); font-weight: 600; font-size: 14px; }
.card .actions { display: flex; gap: 8px; margin-block-start: auto; }
.card .actions .btn { flex: 1; font-size: 14px; padding: 11px 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-family: var(--pop); font-weight: 500; font-size: 12px; color: var(--deep); background: #E6F0DA; border-radius: 3px; padding: 4px 8px; white-space: nowrap; }
.pending { color: var(--gold); font-style: italic; }

/* ---------- filters ---------- */
.catalogue { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.filters { border: 1px solid var(--line); padding: 18px; position: sticky; inset-block-start: 96px; background: var(--white); }
.filters h2 { font-size: 16px; margin-block-end: 12px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.filters legend, .filters .filter-label { font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-block: 0 8px; }
.filters label { display: block; font-size: 15px; padding-block: 3px; cursor: pointer; }
.filter-groups { margin-block-end: 18px; }
.filter-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.filter-groups ul ul { padding-inline-start: 12px; margin-block: 1px 2px; }
.filter-groups a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; margin-inline: -8px; border-radius: 3px;
	font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.filter-groups a span { color: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.filter-groups a:hover { background: var(--paper); color: var(--deep); }
.filter-groups a[aria-current] { background: #E6F0DA; color: var(--deep); font-weight: 600; }
.filter-groups a[aria-current] span { color: var(--deep); }
.results-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-block-end: 16px; font-size: 15px; color: var(--muted); }

/* ---------- product page ---------- */
.crumbs { font-size: 14px; color: var(--soft); padding-block: 16px; }
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: var(--deep); }
.product { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: clamp(24px, 4vw, 44px); align-items: start; padding-block-end: 40px; }
.product h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
.product .tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.tag { font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 3px; background: var(--ink); color: var(--white);
	max-width: 100%; overflow-wrap: anywhere; }
.tag.soft { background: var(--paper); color: var(--deep); }
.product .summary { font-size: 18px; color: var(--muted); max-width: 62ch; }
.product .shot { background: var(--paper); border: 1px solid var(--line); margin-block: 24px; }
.product .shot img { width: 100%; max-height: 420px; object-fit: contain; padding: 20px; }

table.spec { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
table.spec th, table.spec td { text-align: start; padding: 12px 16px; font-size: 16px; vertical-align: top; }
table.spec th { width: 240px; font-family: var(--pop); font-weight: 600; background: #F7F8F3; }
table.spec tr + tr { border-block-start: 1px solid var(--line); }

/* The whole side column sticks, never one box inside it: a sticky box slides over the boxes
   below it in the same column, which is how the quote box used to cover "Ships with". */
.product > aside, .rfq > aside { position: sticky; inset-block-start: 96px; }
.buybox { border: 1px solid var(--line); border-block-start: 3px solid var(--deep); padding: 22px; background: var(--white); }
.buybox h2 { font-size: 20px; margin-block-end: 6px; }
.buybox p.note { font-size: 14px; color: var(--muted); margin-block: 0 16px; }
.buybox .prefill { background: var(--paper); padding: 12px 14px; font-size: 14px; margin-block-end: 16px; }
.buybox .field { margin-block-end: 12px; }
.buybox .btn { width: 100%; margin-block-end: 8px; }
.docs { border: 1px solid var(--line); padding: 18px 20px; margin-block-start: 18px; }
.docs h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); margin-block-end: 10px; }
.docs ul { margin: 0; padding-inline-start: 18px; font-size: 15px; color: var(--muted); }
.docs li { margin-block: 4px; }

/* ---------- catalogue downloads ---------- */
.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.download { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(0, 96, 47, .35);
	border-radius: 4px; background: var(--white); color: var(--deep); text-decoration: none;
	font-family: var(--pop); font-weight: 600; font-size: 14px; line-height: 1.3; }
.download svg { flex: none; }
.download small { font-family: var(--sans); font-weight: 400; color: var(--soft); white-space: nowrap; }
.download:hover { background: #E6F0DA; border-color: var(--field); }
.download:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
/* On All products the six sit as a compact set under one label; on a phone, two to a row. */
.downloads-label { flex-basis: 100%; font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--soft); }
.downloads.all .download { padding: 8px 12px; font-size: 13px; gap: 8px; }
.downloads.all .download small::before { content: "· "; }
@media (max-width: 760px) {
	.downloads.all { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.downloads.all .downloads-label { grid-column: 1 / -1; }
	.downloads.all .download small { display: block; }
	.downloads.all .download small::before { content: none; }
}

/* ---------- request for quotation ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-block: 24px 32px; }
.steps div { border-block-start: 3px solid var(--line); padding-block-start: 10px; font-size: 15px; color: var(--soft); }
.steps div.on { border-block-start-color: var(--deep); color: var(--ink); }
.steps b { display: block; font-family: var(--pop); }
.rfq { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: clamp(22px, 4vw, 40px); align-items: start; }
.rfq fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.rfq legend { font-family: var(--pop); font-weight: 600; font-size: 20px; margin-block-end: 12px; }
.rfq .row { display: grid; gap: 14px; margin-block-end: 14px; }
.rfq .row.two { grid-template-columns: 1fr 1fr; }
.rfq label { display: block; font-family: var(--pop); font-weight: 600; font-size: 14px; margin-block-end: 5px; }
.rfq .opt { color: var(--soft); font-weight: 400; }
.basket { border: 1px solid var(--line); border-block-start: 3px solid var(--deep); padding: 20px; background: var(--white); }
.basket h2 { font-size: 18px; margin-block-end: 12px; }
.basket .line { border-block-end: 1px solid var(--line); padding-block: 10px; font-size: 15px; }
.basket .line b { font-family: var(--pop); display: block; }
.basket .line span { color: var(--muted); font-size: 14px; }
.basket .line button { display: block; margin-block-start: 5px; background: none; border: 0; color: var(--gold);
	font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.notice { padding: 14px 16px; border-inline-start: 3px solid var(--gold); background: #FBF7EE; font-size: 15px; margin-block: 16px; }
.notice.ok { border-color: var(--field); background: #F1F7EA; }
.hp { position: absolute; inset-inline-start: -9999px; }

/* ---------- WhatsApp, always one tap away ---------- */
.wa-float { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px 11px 13px; border-radius: 40px; background: var(--deep); color: var(--white); text-decoration: none;
	font-family: var(--pop); font-weight: 600; font-size: 15px; box-shadow: 0 10px 24px -8px rgba(19, 42, 27, .55); }
.wa-float:hover { background: #024d26; color: var(--white); }
.wa-float:focus-visible { outline: 3px solid var(--sprout); outline-offset: 2px; }
@media (max-width: 760px) {
	/* On a phone only the icon shows, so the button never covers a line of text. */
	.wa-float { inset-inline-end: 14px; inset-block-end: 14px; padding: 13px; }
	.wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- cookie choice ---------- */
.consent { position: fixed; inset-inline-start: 20px; inset-block-end: 20px; z-index: 60; max-width: 420px; padding: 16px 18px;
	background: var(--white); border: 1px solid var(--line); border-block-start: 3px solid var(--deep); border-radius: 4px;
	box-shadow: 0 18px 40px -16px rgba(19, 42, 27, .45); font-size: 15px; }
.consent p { margin: 0 0 12px; color: var(--muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions .btn { padding: 10px 16px; font-size: 14px; }
.site-footer .legal button, .site-footer .legal [data-consent-open] { color: inherit; }
@media (max-width: 760px) {
	/* Leaves the WhatsApp button at the right uncovered. */
	.consent { inset-inline: 14px 80px; inset-block-end: 14px; max-width: none; padding: 14px; }
}

/* ---------- footer ---------- */
/* No margin above the footer: every page already ends in a padded band, and a margin here is
   what left a white strip under the green call-to-action band. */
.site-footer { background: var(--ink); color: rgba(239, 241, 233, .82); padding-block: 48px 24px; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; gap: 32px; }
.site-footer h3 { font-family: var(--pop); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sprout); margin-block-end: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.site-footer a { color: rgba(239, 241, 233, .82); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .brand img, .site-footer .brand svg { height: 38px; width: auto; margin-block-end: 14px; }
.site-footer .legal { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; border-block-start: 1px solid rgba(239, 241, 233, .18); margin-block-start: 32px; padding-block-start: 16px; font-size: 13px; color: rgba(239, 241, 233, .55); }

/* ---------- responsive ---------- */
/* The full menu needs about 1100px; below that it folds behind the menu button rather than
   wrapping "Quality and documents" onto two lines. */
@media (max-width: 1100px) {
	.nav-toggle { display: inline-flex; margin-inline-start: -10px; }
	.masthead .wrap { justify-content: flex-start; }
	.header-actions { margin-inline-start: auto; }
	.nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-block: 8px 12px; }
	.nav.open { display: flex; }
	.nav > li, .nav > a { width: 100%; }
	.nav > li > a, .nav > a { padding-block: 9px; }
	.masthead .wrap { flex-wrap: wrap; row-gap: 0; }
	.has-mega { flex-wrap: wrap; justify-content: space-between; }
	.has-mega > a::after { display: none; }
	.mega-toggle { width: 44px; height: 40px; }
	/* Inside the folded menu the groups open in place as a plain list. */
	.mega { position: static; flex-basis: 100%; display: none; visibility: visible; opacity: 1; transform: none;
		border: 0; box-shadow: none; transition: none; }
	.has-mega.open > .mega { display: block; }
	.masthead .mega .wrap { padding: 0 0 8px 14px; }
	.mega-grid { grid-template-columns: 1fr; gap: 0; }
	.mega-shot, .nav .mega .mega-sub[data-kind="types"] { display: none; }
	.nav .mega .mega-head { display: block; padding-block: 7px; }
	.mega-name { display: flex; align-items: baseline; gap: 8px; }
	.mega-name b { font-size: 15px; }
	.nav .mega .mega-sub { border: 0; margin: 0; padding: 0 0 4px 14px; gap: 0; }
	.nav .mega .mega-sub a { display: block; padding-block: 6px; font-size: 15px; }
	.mega-foot { margin-block-start: 6px; padding-block-start: 10px; }
}

/* The same folded menu, switched on by the script whenever the header row does not fit:
   a translated menu (German, Finnish, Greek) can need far more than 1100px. Generated from the
   block above; change both together. */
html.menu-folded .nav-toggle { display: inline-flex; margin-inline-start: -10px; }
html.menu-folded .masthead .wrap { justify-content: flex-start; }
html.menu-folded .header-actions { margin-inline-start: auto; }
html.menu-folded .nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-block: 8px 12px; }
html.menu-folded .nav.open { display: flex; }
html.menu-folded .nav > li, html.menu-folded .nav > a { width: 100%; }
html.menu-folded .nav > li > a, html.menu-folded .nav > a { padding-block: 9px; }
html.menu-folded .masthead .wrap { flex-wrap: wrap; row-gap: 0; }
html.menu-folded .has-mega { flex-wrap: wrap; justify-content: space-between; }
html.menu-folded .has-mega > a::after { display: none; }
html.menu-folded .mega-toggle { width: 44px; height: 40px; }
html.menu-folded .mega { position: static; flex-basis: 100%; display: none; visibility: visible; opacity: 1; transform: none; border: 0; box-shadow: none; transition: none; }
html.menu-folded .has-mega.open > .mega { display: block; }
html.menu-folded .masthead .mega .wrap { padding: 0 0 8px 14px; }
html.menu-folded .mega-grid { grid-template-columns: 1fr; gap: 0; }
html.menu-folded .mega-shot, html.menu-folded .nav .mega .mega-sub[data-kind="types"] { display: none; }
html.menu-folded .nav .mega .mega-head { display: block; padding-block: 7px; }
html.menu-folded .mega-name { display: flex; align-items: baseline; gap: 8px; }
html.menu-folded .mega-name b { font-size: 15px; }
html.menu-folded .nav .mega .mega-sub { border: 0; margin: 0; padding: 0 0 4px 14px; gap: 0; }
html.menu-folded .nav .mega .mega-sub a { display: block; padding-block: 6px; font-size: 15px; }
html.menu-folded .mega-foot { margin-block-start: 6px; padding-block-start: 10px; }

@media (max-width: 960px) {
	.hero .wrap, .hero .wrap.has-media, .product, .rfq, .catalogue { grid-template-columns: 1fr; }
	/* On a phone the heading photograph is a wide strip, so it never pushes the page a screen down. */
	.hero .has-media .hero-media { aspect-ratio: 16 / 9; }
	.product > aside, .rfq > aside, .filters { position: static; }
	.site-footer .cols { grid-template-columns: 1fr 1fr; }
	/* On a phone the filter lists become rows of chips, so the products are not pushed a whole
	   screen down. */
	.filter-groups ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.filter-groups ul ul, .filter-groups li { display: contents; }
	.filter-groups a, .filters fieldset label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px;
		border: 1px solid var(--line); border-radius: 30px; font-size: 14px; }
	.filters fieldset { display: flex; flex-wrap: wrap; gap: 6px; }
	.filters fieldset label:has(input:checked) { background: #E6F0DA; border-color: var(--field); color: var(--deep); }
	.filters.is-folding { padding-block: 14px; }
	.filters.is-folding > h2 { display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer; }
	.filters.is-folding > h2::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
	.filters.is-folding.open > h2 { margin-block-end: 14px; }
	.filters.is-folding.open > h2::after { transform: translateY(2px) rotate(225deg); }
	.filters.is-folding:not(.open) > :not(h2) { display: none; }
}

@media (max-width: 760px) {
	.header-actions .btn.ghost { display: none; }
	.ss-products { grid-template-columns: 1fr; }
	.site-search-form .btn { display: none; }
	.site-search-results { max-height: calc(100vh - 190px); }
	.steps { grid-template-columns: 1fr; }
	.rfq .row.two, .quotebox .row.two { grid-template-columns: 1fr; }
	.site-footer .cols { grid-template-columns: 1fr; }
	table.spec th { width: 42%; }
}

/* A small phone has room for the logo, Menu, search and one short button, not the long label. */
@media (max-width: 480px) {
	.label-long { display: none; }
	.label-short { display: inline; }
	.header-actions { gap: 8px; }
	.masthead .wrap { gap: 12px; }
	.brand img, .custom-logo-link img { height: 38px; }
	.header-actions .btn { padding: 12px 14px; }
}

@media print {
	.masthead, .topbar, .site-footer, .buybox, .filters, .wa-float { display: none; }
}

/* ---------- page content from the editor ---------- */
.entry { font-size: 17px; }
.entry > * + * { margin-block-start: 18px; }
.entry h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin-block-start: 44px; }
.entry h2:first-child { margin-block-start: 0; }
.entry h3 { font-size: 20px; font-weight: 600; margin-block-start: 30px; }
.entry p { color: var(--muted); max-width: 72ch; }
.entry p strong { color: var(--ink); }
.entry ul, .entry ol { color: var(--muted); max-width: 72ch; padding-inline-start: 22px; }
.entry li + li { margin-block-start: 7px; }
.entry a { color: var(--deep); }
.entry mark { padding: 1px 4px; border-radius: 2px; font-style: italic; }

/* Only the side and bottom margins go: zeroing all four also removed the gap that keeps a
   table off the heading above it. */
.entry .wp-block-table { margin-inline: 0; margin-block-end: 0; overflow-x: auto; }
.entry figure.wp-block-table { max-width: none; }
.entry figure.wp-block-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: 16px; }
.entry figure.wp-block-table table th,
.entry figure.wp-block-table table td { text-align: start; padding: 12px 15px; vertical-align: top; border: 0; border-block-end: 1px solid var(--line); }
.entry figure.wp-block-table table thead { border-block-end: 0; }
.entry figure.wp-block-table table thead th { background: var(--deep); color: #fff; font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.entry figure.wp-block-table table tbody tr:nth-child(odd) { background: #F7F8F3; }
.entry figure.wp-block-table table td:first-child { font-family: var(--pop); font-weight: 600; color: var(--ink); }
.entry .wp-element-caption { font-size: 14px; color: var(--soft); margin-block-start: 10px; }

.entry .wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.entry .wp-block-columns .wp-block-column > * + * { margin-block-start: 14px; }
.entry .wp-block-columns p { font-size: 16px; }

/* A section of copy with a photograph beside it. */
.entry .wp-block-columns.media-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.entry > .media-row:not(:first-child) { margin-block-start: 44px; }
.entry .media-row .wp-block-image { margin: 0; }
.entry .media-row .wp-block-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

@media (max-width: 860px) {
	.entry .wp-block-columns, .entry .wp-block-columns.media-row { grid-template-columns: 1fr; }
}

/* ---------- markets route chart ----------
   Every line starts at Karachi (day 0) on the start edge; its length is the estimated sailing
   time on a 30-day scale, and the heavier part is the arrival window. */
.routes { margin: 22px 0 28px; padding: clamp(16px, 2.5vw, 26px); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.routes-origin { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; }
.routes-origin b { display: block; font-family: var(--pop); font-weight: 600; font-size: 16px; color: var(--ink); }
.routes-origin small { display: block; color: var(--soft); font-size: 13px; }
.routes-flag { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(19, 42, 27, .12); object-fit: cover; }
.routes-origin .routes-flag { width: 32px; height: 24px; }
.routes-scale, .routes-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 170px); gap: 18px; align-items: center; }
.routes-ticks { position: relative; height: 18px; border-block-end: 1px solid var(--line); }
.routes-ticks span { position: absolute; inset-inline-start: calc(var(--at) * 1%); transform: translateX(-50%); font-size: 12px; color: var(--soft); white-space: nowrap; }
[dir="rtl"] .routes-ticks span { transform: translateX(50%); }
.routes-ticks span:first-child { transform: none; }
.routes-list { list-style: none; margin: 0; padding: 0; }
.entry .routes-list { max-width: none; padding: 0; color: inherit; }
.entry .routes-list li + li { margin-block-start: 0; }
.routes-region { margin-block: 16px 4px; font-family: var(--pop); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--field); }
.routes-row { padding-block: 10px; border-block-end: 1px solid rgba(19, 42, 27, .08); }
.routes-dest { display: flex; align-items: center; gap: 10px; min-width: 0; }
.routes-flags { display: inline-flex; gap: 3px; flex: none; }
.routes-dest b { display: block; font-family: var(--pop); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; }
.routes-dest small { display: block; color: var(--soft); font-size: 13px; line-height: 1.35; }
.routes-track { position: relative; height: 12px; }
.routes-line { position: absolute; inset-inline-start: 0; inset-block-start: 5px; height: 2px; width: calc(var(--to) * 1%);
	background: repeating-linear-gradient(90deg, var(--field) 0 6px, transparent 6px 11px); }
.routes-line::before { content: ""; position: absolute; inset-inline-start: -4px; inset-block-start: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); }
.routes-window { position: absolute; inset-inline-start: calc(var(--from) * 1%); inset-block-start: 1px; height: 10px;
	width: calc((var(--to) - var(--from)) * 1%); border-radius: 6px; background: var(--deep); }
/* Wraps rather than spilling: a translation can turn "Est. 5 to 7 days" into a full sentence. */
.routes-days { min-width: 0; font-family: var(--pop); font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--deep); overflow-wrap: anywhere; }
.routes figcaption { margin-block-start: 14px; font-size: 13px; color: var(--soft); }
@media (max-width: 760px) {
	.routes-scale { display: none; }
	.routes-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
	.routes-dest { grid-column: 1 / -1; }
	.routes-days { font-size: 13px; }
}

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.faq h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin-block-end: 10px; }
.faq > div > p { color: var(--muted); margin: 0; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; cursor: pointer;
	list-style: none; font-family: var(--pop); font-weight: 600; font-size: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 500; line-height: 1; color: var(--deep); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.faq-list details p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 16px; }
@media (max-width: 860px) {
	.faq { grid-template-columns: 1fr; }
}

/* ---------- blog ----------
   A packshot must sit inside its card untouched, but an article photograph is a photograph:
   it fills the frame. Hence .shot.cover overriding the contain rule above. */
.card .shot.cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--soft); }
.post-meta .tag { margin-inline-end: 2px; }
.post-meta time { font-variant-numeric: tabular-nums; }

.lead-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center;
	border: 1px solid var(--line); border-block-start: 3px solid var(--deep); background: var(--white); overflow: hidden; }
.lead-post .shot { display: block; aspect-ratio: 4 / 3; background: var(--paper); }
.lead-post .shot img { width: 100%; height: 100%; object-fit: cover; }
.lead-post > div { padding: clamp(20px, 3vw, 36px); padding-inline-start: 0; display: grid; gap: 14px; justify-items: start; }
.lead-post h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; }
.lead-post h2 a { text-decoration: none; color: var(--ink); }
.lead-post h2 a:hover { color: var(--deep); }
.lead-post p { margin: 0; color: var(--muted); max-width: 60ch; }
/* Without a photograph the text should not sit in a half-empty box. */
.lead-post:not(:has(.shot)) { grid-template-columns: 1fr; }
.lead-post:not(:has(.shot)) > div { padding-inline-start: clamp(20px, 3vw, 36px); }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(26px, 4vw, 56px); align-items: start; }
.article .entry { max-width: 72ch; }
.article aside .docs { margin-block-start: 0; position: sticky; inset-block-start: 96px; }
.post-figure { margin: 0 0 28px; }
.post-figure img { width: 100%; }

.searchform { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 18px; }
.searchform input[type="search"] { flex: 1; min-width: 240px; font: inherit; font-size: 16px; padding: 12px 14px;
	border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--ink); }
.searchform input[type="search"]:focus { outline: 2px solid var(--field); outline-offset: 1px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- pagination ---------- */
.navigation.pagination { margin-block-start: 40px; border-block-start: 1px solid var(--line); padding-block-start: 22px; }
.navigation.pagination .screen-reader-text { display: none; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.navigation.pagination .page-numbers { font-family: var(--pop); font-weight: 600; font-size: 15px; text-decoration: none;
	color: var(--deep); border: 1px solid var(--line); border-radius: 3px; padding: 9px 14px; min-width: 44px; text-align: center; }
.navigation.pagination .page-numbers:hover { background: var(--paper); }
.navigation.pagination .page-numbers.current { background: var(--deep); border-color: var(--deep); color: var(--white); }
.navigation.pagination .page-numbers.dots { border-color: transparent; color: var(--soft); }

@media (max-width: 960px) {
	.article, .lead-post { grid-template-columns: 1fr; }
	.lead-post > div { padding-inline-start: clamp(20px, 3vw, 36px); }
	.article aside .docs { position: static; }
}