/* ANNT, the public site stylesheet. Tokens follow DESIGN.md. */
/* Built by scripts/build-fonts.py: 'main' has what every page needs (Latin, č ć đ š ž), 'extra' the other Latin
letters, Greek and Cyrillic, downloaded only by a page that contains one. The ranges match the script. */
@font-face { font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 400 800;
src: url("../fonts/montserrat-main.37f6cd4dfb14.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 400 800;
src: url("../fonts/montserrat-extra.51c9d4435c8b.woff2") format("woff2-variations");
unicode-range: U+0100-0105, U+0108-010B, U+010E-010F, U+0112-0130, U+0132-0151, U+0154-015F, U+0162-017C, U+017F-024F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF; }
@font-face { font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 400 800;
src: url("../fonts/roboto-main.c87c70a1bf32.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-display: swap; font-weight: 400 800;
src: url("../fonts/roboto-extra.814c4316777d.woff2") format("woff2-variations");
unicode-range: U+0100-0105, U+0108-010B, U+010E-010F, U+0112-0130, U+0132-0151, U+0154-015F, U+0162-017C, U+017F-024F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF; }
@font-face { font-family: "Roboto"; font-style: italic; font-display: swap; font-weight: 400 800;
src: url("../fonts/roboto-italic-main.58b7e98b0234.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: italic; font-display: swap; font-weight: 400 800;
src: url("../fonts/roboto-italic-extra.d24d85259f2e.woff2") format("woff2-variations");
unicode-range: U+0100-0105, U+0108-010B, U+010E-010F, U+0112-0130, U+0132-0151, U+0154-015F, U+0162-017C, U+017F-024F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF; }
:root {
--navy: #00102e;
--navy-800: #0b2148;
--navy-600: #27406b;
--yellow: #ffd00a;
--yellow-hover: #ffdc45;
--yellow-soft: #fff6cc;
--ink: #142e2c;
--ink-muted: #465a63;
--surface: #ffffff;
--surface-muted: #f3f5f8;
--line: #dde2ea;
--success: #1d7a46;
--success-soft: #e6f4ec;
--danger: #b3261e;
--danger-soft: #fbeceb;
--on-navy: #ffffff;
--on-navy-muted: rgba(255, 255, 255, 0.78);
--font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
--text-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
--text-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
--text-h3: 1.25rem;
--text-body: 1.0625rem;
--text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
--text-small: 0.875rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
--space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
--space-section: clamp(56px, 4vw + 32px, 112px);
--gutter: 16px;
--container: 1180px;
--measure: 720px;
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
--shadow-raised: 0 12px 32px -12px rgba(0, 16, 46, 0.28);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration: 220ms;
--header-height: 76px;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
/* Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }
body {
margin: 0; background: var(--surface); color: var(--ink);
font-family: var(--font-body); font-size: var(--text-body); line-height: 1.65;
text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
accent-color: var(--navy);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* responsive images (AVIF/WebP): lay out the ![]()
as before */
picture > source { display: none; } /* or each empty takes a cell in a grid or flex parent */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--text-display); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
h3 { font-size: var(--text-h3); line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
/* Body text is justified, as on the old site; hyphenation keeps the word spacing even. */
/* Phones keep ragged-right text: there is no Bosnian hyphenation, so justified narrow columns open wide gaps. */
/* Body copy only: display text (statements, heroes, cards) stays ragged so large type never opens gaps. */
@media (min-width: 640px) { main .rich-text :is(p, li, blockquote):not(.custom-html *) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
/* Hand-written pages (gala, map, challenge) keep their own typography; the old theme set their headings in capitals. */
.custom-html :is(h1, h2, h3, h4) { text-transform: uppercase; }
p, ul, ol, blockquote { margin: 0 0 var(--space-4); }
p { text-wrap: pretty; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--yellow-soft); color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.theme-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }
html { scrollbar-color: var(--navy-600) var(--surface-muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-small); color: var(--ink-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--yellow); color: var(--navy); padding: var(--space-2) var(--space-4); font-weight: 600; }
.skip-link:focus { top: var(--space-2); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Header --------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-height); }
.site-logo { display: flex; align-items: center; flex: none; }
.site-logo img { height: 46px; width: auto; }
.site-logo__text { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--navy); text-decoration: none; }
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.main-nav__item { position: relative; }
.main-nav__link {
display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-3);
font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--navy);
text-decoration: none; background: none; border: 0; cursor: pointer; position: relative;
}
.main-nav__link::after {
content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px; height: 3px; border-radius: 2px;
background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--duration) var(--ease-out);
}
.main-nav__link:hover::after, .main-nav__link[aria-current="page"]::after, .main-nav__item.is-active > .main-nav__link::after { transform: scaleX(1); }
.main-nav__submenu {
position: absolute; top: 100%; left: 0; min-width: 240px; list-style: none; margin: 0; padding: var(--space-2);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
}
.main-nav__item:hover > .main-nav__submenu, .main-nav__item:focus-within > .main-nav__submenu, .main-nav__item.is-open > .main-nav__submenu {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.main-nav__submenu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--navy); font-weight: 500; }
.main-nav__submenu a:hover { background: var(--surface-muted); }
.header-tools { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch { display: flex; gap: 2px; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-small); }
.lang-switch a, .lang-switch span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--navy); }
.lang-switch [aria-current="true"] { background: var(--navy); color: var(--on-navy); }
.icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--navy); background: none; border: 0; cursor: pointer; }
.icon-button:hover { background: var(--surface-muted); }
.cart-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yellow); color: var(--navy); font: 700 11px/18px var(--font-heading); text-align: center; }
.nav-toggle { display: none; }
@media (max-width: 1023px) {
.nav-toggle { display: inline-flex; }
.main-nav {
position: fixed; inset: var(--header-height) 0 0 0; background: var(--surface); padding: var(--space-6) var(--gutter);
overflow-y: auto; transform: translateX(100%); transition: transform 320ms var(--ease-out); visibility: hidden;
}
.main-nav.is-open { transform: none; visibility: visible; }
.main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav__link { width: 100%; justify-content: space-between; padding: var(--space-4) 0; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
.main-nav__link::after { display: none; }
.main-nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--space-2) var(--space-4); display: none; }
.main-nav__item.is-open > .main-nav__submenu { display: block; }
.header-tools { margin-left: auto; }
body.nav-open { overflow: hidden; }
}
/* Night sky ------------------------------------------------------------
The identity: navy is the night sky, yellow is starlight. The Milky Way
photo carries the home hero; everywhere else a light procedural star dust
(two tiled layers of tiny radial gradients) gives dark surfaces depth. */
.starfield { position: relative; isolation: isolate; background-color: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero__dust, .starfield-dust::before {
position: absolute; inset: -50% 0 0 0; z-index: -1; pointer-events: none;
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 52%),
radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,.7) 50%, transparent 52%),
radial-gradient(1.5px 1.5px at 42% 76%, rgba(255,255,255,.9) 50%, transparent 52%),
radial-gradient(1px 1px at 86% 64%, rgba(255,255,255,.55) 50%, transparent 52%),
radial-gradient(2px 2px at 24% 52%, rgba(255,208,10,.75) 50%, transparent 52%),
radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,.6) 50%, transparent 52%),
radial-gradient(1px 1px at 93% 12%, rgba(255,255,255,.75) 50%, transparent 52%),
radial-gradient(1.5px 1.5px at 5% 88%, rgba(255,255,255,.65) 50%, transparent 52%);
background-size: 140px 140px, 190px 190px, 260px 260px, 170px 170px, 560px 560px, 120px 120px, 230px 230px, 330px 330px;
opacity: .5;
animation: star-drift 180s linear infinite;
}
@keyframes star-drift { to { transform: translateY(50%); } }
.hero--sky { min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(72px, 8vw, 128px) clamp(40px, 5vw, 72px); }
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.hero--sky::before { content: ""; position: absolute; inset: 0; z-index: -2;
background: linear-gradient(100deg, rgba(0,16,46,.93) 0%, rgba(0,16,46,.72) 40%, rgba(0,16,46,.18) 80%, rgba(0,16,46,.05) 100%),
linear-gradient(0deg, rgba(0,16,46,.95) 0%, rgba(0,16,46,0) 38%); }
/* The telescope: a soft circle that follows the mouse (site.js sets --reveal-x/-y) shows the sky brighter, and each
program's constellation near it appears whole (site.js: .is-near), never cut by the circle. Above the dark gradient,
but faded to half towards the text side, so the title stays legible. Only masks and opacity change. */
.hero__telescope { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__reveal { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
--reveal-x: 50%; --reveal-y: 50%; --reveal-r: clamp(160px, 16vw, 260px);
-webkit-mask-image: radial-gradient(circle var(--reveal-r) at var(--reveal-x) var(--reveal-y), #000 0 40%, transparent 100%),
linear-gradient(100deg, rgba(0,0,0,.45) 0 35%, #000 65%);
mask-image: radial-gradient(circle var(--reveal-r) at var(--reveal-x) var(--reveal-y), #000 0 40%, transparent 100%),
linear-gradient(100deg, rgba(0,0,0,.45) 0 35%, #000 65%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
.hero__reveal-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
filter: brightness(1.45) saturate(1.35) contrast(1.1); } /* the same photo, already loaded: "more light" */
.hero__reveal.is-active { opacity: 1; }
.constellations { position: absolute; inset: 0; }
.constellation { position: absolute; width: clamp(200px, 16vw, 260px); height: auto; overflow: visible;
transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s ease; }
.constellation.is-near { opacity: 1; }
.constellation line { stroke: rgba(255, 214, 102, .75); stroke-width: 3; }
.constellation circle { fill: #fff4d6; filter: drop-shadow(0 0 6px rgba(255, 214, 102, .9)); }
.constellation text { text-anchor: middle; fill: #fff; paint-order: stroke; stroke: rgba(0, 16, 46, .85); stroke-width: 8px;
stroke-linejoin: round; font-family: var(--font-heading); }
.constellation__title { font-size: 34px; font-weight: 700; }
.constellation__fact { font-size: 26px; font-weight: 500; fill: var(--yellow); }
.constellation.is-near a { pointer-events: auto; cursor: pointer; }
/* The hero's text box spans the whole width: let the pointer through it to the constellations, but not its content. */
.hero:has([data-reveal]) .hero__inner { pointer-events: none; }
.hero:has([data-reveal]) .hero__inner > * { pointer-events: auto; }
.constellation a:hover .constellation__title { text-decoration: underline; }
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
.hero__copy { max-width: 40rem; }
.hero h1 { color: var(--on-navy); font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: var(--space-6); }
.hero__text { font-size: var(--text-lead); color: var(--on-navy-muted); max-width: 48ch; line-height: 1.6; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 900px) { .hero__inner:has(.hero__media) { grid-template-columns: 1.1fr 1fr; } }
.hero__highlights { list-style: none; margin: clamp(48px, 6vw, 96px) 0 0; padding: var(--space-8) 0 0; display: grid; gap: var(--space-8);
border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 860px) { .hero__highlights { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); } }
.highlight { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: start; }
.highlight__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
color: var(--yellow); background: rgba(255, 208, 10, .12); box-shadow: inset 0 0 0 1px rgba(255, 208, 10, .35); }
.highlight__icon .icon { width: 22px; height: 22px; }
.highlight__title { font-size: 1.1875rem; font-weight: 600; color: var(--on-navy); margin: 10px 0 var(--space-2); letter-spacing: 0; }
.highlight__text { color: var(--on-navy-muted); font-size: .9375rem; line-height: 1.6; }
.highlight__text p { margin: 0; }
/* The night sky behind page titles: the smallest picture that covers the screen, AVIF where the browser has it
(older browsers ignore the second declaration and keep the WebP). */
.page-header--sky { padding-block: clamp(56px, 5vw + 24px, 112px) clamp(40px, 4vw, 72px);
--sky-shade: linear-gradient(100deg, rgba(0,16,46,.94) 0%, rgba(0,16,46,.78) 45%, rgba(0,16,46,.45) 100%);
background-image: var(--sky-shade), url("../img/sky-800.0eb9777dabf6.webp");
background-image: var(--sky-shade), image-set(url("../img/sky-800.df6b3904d858.avif") type("image/avif"), url("../img/sky-800.0eb9777dabf6.webp") type("image/webp"));
background-size: cover; background-position: center 40%; }
@media (min-width: 700px) { .page-header--sky { background-image: var(--sky-shade), url("../img/sky-1600.a8b21a15902f.webp");
background-image: var(--sky-shade), image-set(url("../img/sky-1600.ad874f021a33.avif") type("image/avif"), url("../img/sky-1600.a8b21a15902f.webp") type("image/webp")); } }
@media (min-width: 1700px), (min-width: 1000px) and (min-resolution: 2dppx) { .page-header--sky { background-image: var(--sky-shade), url("../img/sky-2400.a559cc69c02d.webp");
background-image: var(--sky-shade), image-set(url("../img/sky-2400.dcf47cce8bba.avif") type("image/avif"), url("../img/sky-2400.a559cc69c02d.webp") type("image/webp")); } }
.page-header--sky h1 { color: var(--on-navy); max-width: 22ch; }
.page-header--sky .page-header__intro { color: var(--on-navy-muted); }
.page-header__inner { position: relative; }
.page-header--sky::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 6px; background: var(--yellow); }
.page-header { padding-block: clamp(40px, 4vw + 16px, 80px) var(--space-8); }
.page-header__intro { font-size: var(--text-lead); color: var(--ink-muted); max-width: 62ch; }
.page-header__image img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-md); margin-top: var(--space-8); }
.breadcrumbs { font-size: var(--text-small); color: var(--ink-muted); margin-bottom: var(--space-4); }
.breadcrumbs a { color: var(--ink-muted); }
/* Buttons -------------------------------------------------------------- */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.button {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px;
padding: 12px 24px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer;
font: 600 1rem/1.2 var(--font-heading); text-decoration: none; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), border-color var(--duration);
}
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button:active { transform: none; }
.button--primary { background: var(--yellow); color: var(--navy); }
.button--primary:hover { background: var(--yellow-hover); }
.button--secondary { background: var(--navy); color: var(--on-navy); }
.button--secondary:hover { background: var(--navy-800); }
.button--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.theme-dark .button--secondary, .hero .button--secondary { background: transparent; color: var(--on-navy); border-color: var(--on-navy); }
.button--text { padding-inline: 0; min-height: auto; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.theme-dark .button--text, .hero .button--text { color: var(--on-navy); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.button--block { width: 100%; }
.button.is-loading { position: relative; color: transparent !important; }
.button.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--navy); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Sections and stream blocks ------------------------------------------- */
.section { padding-block: var(--space-section); }
.section.theme-light + .section.theme-light, .section.theme-muted + .section.theme-muted { padding-top: 0; }
.theme-muted { background: var(--surface-muted); }
.theme-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-navy-muted); }
.section.theme-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,.7) 50%, transparent 52%),
radial-gradient(1.5px 1.5px at 42% 76%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 24% 52%, rgba(255,208,10,.8) 50%, transparent 52%);
background-size: 120px 120px, 170px 170px, 230px 230px, 520px 520px; }
.theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark a:not(.button) { color: var(--on-navy); } /* buttons keep their own colours */
.theme-accent { background: var(--yellow); color: var(--navy); }
.theme-accent h2, .theme-accent h3, .theme-accent a { color: var(--navy); }
.stream > * + * { margin-top: var(--space-12); }
.stream > .block-heading + * { margin-top: 0; }
.stream > .block-rich_text + .block-rich_text { margin-top: 0; }
.block-heading { margin-bottom: var(--space-6); }
.block-heading h2 { margin-bottom: 0; }
.rich-text { max-width: var(--measure); }
.rich-text h2 { margin-top: var(--space-12); }
.rich-text h3 { margin-top: var(--space-8); }
.rich-text > :first-child { margin-top: 0; }
.rich-text img { border-radius: var(--radius-md); margin-block: var(--space-6); }
.rich-text blockquote, .quote { border: 0; margin: var(--space-8) 0; padding: 0; font-family: var(--font-heading); font-size: 1.3125rem; line-height: 1.45; color: var(--navy); font-weight: 500; }
.quote footer { margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--text-small); color: var(--ink-muted); font-weight: 400; }
.rich-text ul, .rich-text ol { padding-left: 1.25em; }
.rich-text li + li { margin-top: var(--space-1); }
.rich-text .responsive-object, .embed { position: relative; aspect-ratio: 16 / 9; }
.rich-text .responsive-object iframe, .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }
.figure { margin: 0; }
.figure img { border-radius: var(--radius-md); width: 100%; }
.figure figcaption { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-muted); }
.figure--content { max-width: var(--measure); }
.figure--full img { border-radius: 0; }
.image-text { display: grid; gap: var(--space-8); align-items: center; }
.image-text__media img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 860px) {
.image-text { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.image-text--right .image-text__media { order: 2; }
}
.cards { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature__icon { width: 56px; height: 56px; object-fit: contain; }
.feature__logo { display: grid; place-items: center; height: 128px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.feature__logo img { max-height: 88px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.feature__icon--photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }
.feature h3 { margin: 0; }
/* Stack: cards that stay in place while the page scrolls, each new one sliding over the previous (position: sticky,
every browser); where scroll-driven animation exists, the covered cards also recede a little. No JavaScript. */
.stack { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); view-timeline-name: --stack; }
.stack-card { position: sticky; top: calc(var(--header-height) + 24px + (var(--i) - 1) * 14px); }
.stack-card__inner { display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(0, 16, 46, .28); transform-origin: 50% 0; }
.stack-card:nth-child(even) .stack-card__inner { background: var(--surface-muted); }
.stack-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: clamp(24px, 4vw, 48px); }
.stack-card__text h3 { margin: 0; font-size: var(--text-h2); }
.stack-card__text .rich-text p:last-child { margin-bottom: 0; }
.stack-card__text .button { margin-top: auto; }
.stack-card__logo { max-height: 72px; width: auto; height: auto; }
.stack-card__media { overflow: hidden; min-height: 220px; }
.stack-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.stack-card:hover .stack-card__media img { transform: scale(1.04); }
@media (min-width: 800px) {
.stack-card__inner { grid-template-columns: 1fr 1fr; min-height: clamp(340px, 52vh, 460px); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.stack-card__inner { animation: stack-recede linear both; animation-timeline: --stack;
animation-range: exit-crossing calc((var(--i) - 1) / var(--cards) * 100%) exit-crossing calc(var(--i) / var(--cards) * 100%); }
}
}
@keyframes stack-recede { to { transform: scale(calc(1 - (var(--cards) - var(--i)) * .025)); } }
.feature__badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--navy); background: var(--yellow-soft); box-shadow: inset 0 0 0 1px rgba(0,16,46,.08); }
.feature__badge .icon { width: 22px; height: 22px; }
.theme-dark .feature__badge { color: var(--yellow); background: rgba(255,208,10,.12); box-shadow: inset 0 0 0 1px rgba(255,208,10,.35); }
.feature p:last-child { margin-bottom: 0; }
.theme-dark .feature { border-top: 3px solid var(--yellow); padding-top: var(--space-4); }
.cards-intro { max-width: 62ch; color: var(--ink-muted); margin-bottom: var(--space-8); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); max-width: var(--measure); }
.feature-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.feature-list .icon { color: var(--navy); margin-top: 3px; }
.feature-list .icon--star { color: var(--yellow); filter: drop-shadow(0 0 0 var(--navy)); stroke: var(--navy); stroke-width: .6; }
.theme-dark .feature-list .icon { color: var(--yellow); }
.feature-list strong { display: block; font-family: var(--font-heading); color: var(--navy); }
.theme-dark .feature-list strong { color: var(--on-navy); }
.stats__heading { text-align: center; margin-bottom: var(--space-8); }
.stats { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(44%, 220px), 1fr)); margin: 0; }
/* The label comes first in the markup (dt before dd), the number first on screen. */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; text-align: center; }
.stat__value { margin: 0; font: 700 clamp(2.25rem, 1.8rem + 2vw, 3.25rem)/1 var(--font-heading); color: var(--navy); font-variant-numeric: tabular-nums; }
.theme-dark .stat__value { color: var(--yellow); }
.stat__label { margin-top: var(--space-2); color: var(--ink-muted); max-width: 24ch; }
.theme-dark .stat__label { color: var(--on-navy-muted); }
.gallery-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(220px, 45%), 1fr)); }
.gallery-grid a { display: block; overflow: hidden; border-radius: var(--radius-md); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 400ms var(--ease-out); }
.gallery-grid a:hover img { transform: scale(1.03); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 420px); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.carousel > * { scroll-snap-align: start; }
.carousel img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.map-embed iframe { width: 100%; border: 0; border-radius: var(--radius-md); }
.accordion { max-width: var(--measure); border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font: 600 1.0625rem/1.4 var(--font-heading); color: var(--navy); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { transition: transform var(--duration) var(--ease-out); }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion .rich-text { padding-bottom: var(--space-4); }
.tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.tabs [role="tab"] { background: none; border: 0; padding: var(--space-3) var(--space-4); font: 600 1rem var(--font-heading); color: var(--ink-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--yellow); }
.cta { display: grid; gap: var(--space-6); align-items: center; padding: clamp(32px, 4vw, 64px); border-radius: var(--radius-lg); }
.cta h2 { margin: 0; }
.cta .rich-text { max-width: 60ch; }
.section.theme-dark > .container > .stream > .block-cta > .cta.theme-dark:not(.cta--photo),
.section.theme-muted > .container > .stream > .block-cta > .cta.theme-muted:not(.cta--photo) { padding: 0; border-radius: 0; }
@media (min-width: 860px) { .cta { grid-template-columns: 1.4fr auto; } .cta .button-row { margin-top: 0; } }
.cta--photo { position: relative; isolation: isolate; overflow: hidden; min-height: 360px; }
.cta__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,16,46,.94) 0%, rgba(0,16,46,.8) 50%, rgba(0,16,46,.3) 100%); }
.cta--photo, .cta--photo h2 { color: var(--on-navy); }
.cta--photo .rich-text { color: var(--on-navy-muted); }
.cta--photo { padding: clamp(32px, 5vw, 72px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
main .cta--photo .rich-text :is(p, li) { text-align: left; hyphens: manual; } /* short text on a photo: no gaps */
.cta--photo h2 { margin-bottom: var(--space-2); }
.cta__copy .button-row { margin-top: var(--space-6); }
.cta__card { display: inline-flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--on-navy); text-decoration: none; transition: background var(--duration) var(--ease-out); }
.cta__card:hover { background: rgba(255,255,255,.14); }
.cta__card strong { display: block; font-family: var(--font-heading); font-size: 1.125rem; }
.cta__card-label { display: block; font-size: var(--text-small); color: var(--on-navy-muted); }
.theme-light .cta__card, .theme-muted .cta__card { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
/* Listings ------------------------------------------------------------- */
.post-grid { display: grid; gap: var(--space-12) var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.post-card__media { overflow: hidden; border-radius: var(--radius-md); background: var(--surface-muted); aspect-ratio: 3 / 2; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.post-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--navy); }
.post-card__placeholder img { width: 40%; height: auto; object-fit: contain; opacity: 0.9; }
.post-card:hover .post-card__media img { transform: scale(1.02); }
.post-card__meta { font-size: var(--text-small); color: var(--ink-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.post-card__title { font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; margin: 0; line-height: 1.3; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a { text-decoration: underline; }
.post-card__excerpt { color: var(--ink-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.theme-dark .post-card__meta, .theme-dark .post-card__excerpt { color: var(--on-navy-muted); }
.post-grid--featured > :first-child { grid-column: 1 / -1; }
@media (min-width: 960px) {
.post-grid--featured > :first-child { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: center; }
.post-grid--featured > :first-child .post-card__title { font-size: var(--text-h2); }
}
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-12); }
.section--flush-top > .filter-bar:first-child { padding-top: var(--space-8); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: var(--text-small); font-weight: 500; color: var(--navy); }
.chip:hover { border-color: var(--navy); }
.chip[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-16); font-family: var(--font-heading); }
.pagination a, .pagination span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); text-decoration: none; padding: 0 var(--space-3); }
.pagination a:hover { background: var(--surface-muted); }
.pagination [aria-current="page"] { background: var(--navy); color: var(--on-navy); }
.article-header { padding-block: clamp(40px, 4vw + 16px, 80px) var(--space-8); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--ink-muted); font-size: var(--text-small); margin-bottom: var(--space-4); }
.article-hero img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius-md); }
.article-body { padding-block: var(--space-12) var(--space-section); }
.article-body .stream { max-width: var(--measure); margin-inline: auto; }
.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-12); }
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-muted); }
.person__placeholder { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-md);
font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--font-heading); letter-spacing: .04em; color: var(--yellow); }
.person__name { font: 600 1.0625rem/1.3 var(--font-heading); color: var(--navy); margin: var(--space-3) 0 2px; }
.person__role { color: var(--ink-muted); font-size: var(--text-small); margin: 0; }
.person__bio { font-size: var(--text-small); margin-top: var(--space-2); }
.person__links { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.logo-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: center; }
.logo-grid a, .logo-grid span { display: grid; place-items: center; padding: var(--space-4); height: 96px; border-radius: var(--radius-md); background: var(--surface); }
.logo-grid img { max-height: 64px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--duration), opacity var(--duration); }
.logo-grid a:hover img { filter: none; opacity: 1; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--space-12); width: max-content; animation: marquee 50s linear infinite; }
.marquee__track img { height: 56px; width: auto; filter: grayscale(1); opacity: 0.8; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--space-6); max-width: 640px; }
.form-row { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label, .field legend { font: 600 0.9375rem/1.3 var(--font-heading); color: var(--navy); }
.field .required { color: var(--danger); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="number"],
.field input[type="date"], .field input[type="datetime-local"], .field select, .field textarea {
width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--surface);
border: 1px solid #b9c2cf; border-radius: var(--radius-sm); transition: border-color var(--duration), box-shadow var(--duration);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 16, 46, 0.18); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field__help { font-size: var(--text-small); color: var(--ink-muted); }
.field__error { font-size: var(--text-small); color: var(--danger); display: flex; gap: var(--space-1); align-items: flex-start; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); }
.field--check input { width: 20px; height: 20px; margin-top: 3px; }
.field--check label { font-family: var(--font-body); font-weight: 400; color: var(--ink); }
.choice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.choice-list label { display: flex; gap: var(--space-3); align-items: center; font-family: var(--font-body); font-weight: 400; color: var(--ink); }
.form-note { font-size: var(--text-small); color: var(--ink-muted); }
.alert { padding: var(--space-4); border-radius: var(--radius-md); display: flex; gap: var(--space-3); align-items: flex-start; }
.alert--success { background: var(--success-soft); color: #134d2c; }
.alert--error { background: var(--danger-soft); color: #7d1a15; }
.alert--info { background: var(--yellow-soft); color: var(--navy); }
.messages { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-2); }
/* Dialog (popup forms) ------------------------------------------------- */
dialog.popup { border: 0; padding: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); width: min(640px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 48px); }
dialog.popup::backdrop { background: rgba(0, 16, 46, 0.55); }
.popup__body { padding: var(--space-8); }
.popup__close { position: absolute; top: var(--space-2); right: var(--space-2); }
/* Footer --------------------------------------------------------------- */
.site-footer { position: relative; isolation: isolate; background: var(--navy); color: var(--on-navy-muted); padding-block: var(--space-16) var(--space-8); font-size: 0.9375rem; }
.site-footer a { color: var(--on-navy); }
.site-footer h2 { color: var(--on-navy); font-size: 1rem; letter-spacing: 0; margin-bottom: var(--space-4); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 68% 62%, rgba(255,255,255,.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 82% 26%, rgba(255,208,10,.8) 50%, transparent 52%);
background-size: 300px 300px, 420px 420px, 640px 640px; }
.footer-grid { display: grid; gap: var(--space-12) var(--space-8); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-logo img { height: 48px; width: auto; margin-bottom: var(--space-4); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-list--spaced { margin-top: var(--space-6); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; }
.footer-contact .icon { margin-top: 3px; color: var(--yellow); }
.footer-bank dt { font-size: var(--text-small); color: var(--on-navy-muted); }
.footer-bank dd { margin: 0 0 var(--space-2); color: var(--on-navy); font-variant-numeric: tabular-nums; word-break: break-all; }
.social-links { list-style: none; padding: 0; display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.social-links a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25); }
.social-links a:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--text-small); }
.payment-logos { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.payment-logos img { height: 44px; width: auto; background: #fff; border-radius: var(--radius-sm); padding: 4px 8px; }
/* Shop ----------------------------------------------------------------- */
.product-list { display: grid; gap: var(--space-4); }
.product-row { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
@media (min-width: 760px) { .product-row { grid-template-columns: 1fr auto; align-items: center; } }
.product-row h3 { margin: 0 0 var(--space-1); }
.product-row__desc { color: var(--ink-muted); font-size: 0.9375rem; }
.product-row__desc > :last-child { margin-bottom: 0; }
.product-row__buy { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.price { font: 700 1.25rem/1.2 var(--font-heading); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price del { color: var(--ink-muted); font-weight: 500; font-size: 0.9em; margin-right: var(--space-2); }
.price__ref { display: block; font: 400 var(--text-small) var(--font-body); color: var(--ink-muted); }
.qty-input { width: 72px !important; text-align: center; }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; background: var(--surface-muted); color: var(--ink-muted); }
.badge--warn { background: var(--yellow-soft); color: var(--navy); }
.checkout-grid { display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .checkout-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.summary { background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--space-6); position: sticky; top: calc(var(--header-height) + 16px); }
.summary table td:last-child, .summary table th:last-child { text-align: right; }
.summary tfoot td, .summary tfoot th { font-family: var(--font-heading); font-weight: 700; color: var(--navy); border-bottom: 0; }
.monri-card { min-height: 160px; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.monri-errors { margin-top: var(--space-3); color: var(--danger); font-size: var(--text-small); }
.order-status { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 600; }
/* Motion preferences ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.hero__dust { animation: none; }
}
@media print {
.site-header, .site-footer, .button-row, .skip-link { display: none !important; }
body { font-size: 11pt; }
}
/* Utilities added with the page templates ------------------------------ */
.section--flush-top { padding-top: 0; }
.block-heading-row { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8); max-width: var(--measure); }
.search-results p { color: var(--ink-muted); margin: var(--space-2) 0 0; }
/* Statement: one important sentence set large, usually on the night sky ---- */
.statement { max-width: 52rem; }
.statement__label { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6);
font: 600 1rem/1.2 var(--font-heading); color: var(--navy); }
.theme-dark .statement__label { color: var(--yellow); }
.statement__label .icon { width: 18px; height: 18px; }
.statement__text { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.3;
letter-spacing: -0.015em; color: var(--navy); text-wrap: balance; }
.theme-dark .statement__text { color: var(--on-navy); }
.statement__text p { margin: 0; text-wrap: balance; }
/* Projects page: one tab per project, as on the old site ------------------- */
.project-index { padding-block: var(--space-16) var(--space-section); }
/* As on the old site: tab labels sit on a framed panel; the open tab joins the frame. */
.project-tabs__list { display: flex; overflow-x: auto; scrollbar-width: thin; position: relative; z-index: 1; margin-bottom: -1px; }
.project-tabs__list [role="tab"] { flex: 1 0 auto; max-width: 220px; background: none; border: 1px solid transparent; border-bottom: 0;
padding: var(--space-4) var(--space-6); font: 700 .9375rem/1.2 var(--font-body); color: var(--navy); cursor: pointer; text-align: left;
border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--duration), background-color var(--duration); }
.project-tabs__list [role="tab"]:hover { color: var(--navy-600); background: var(--surface-muted); }
.project-tabs__list [role="tab"][aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: inset 0 3px 0 var(--yellow); }
.project-tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.project-tabs__panel { border: 1px solid var(--line); padding: var(--space-4); background: var(--surface); }
@media (min-width: 720px) { .project-tabs__panel { padding: var(--space-6); } }
.project-tabs__banner { width: 100%; height: auto; margin-bottom: var(--space-6); }
/* The tab content is the project's own blocks: drop the sections' page-level spacing inside the frame. */
.project-tabs__content > .section { padding-block: 0 var(--space-12); background: none; }
.project-tabs__content > .section > .container { max-width: none; padding-inline: 0; }
.project-tabs__content h2 { font: 800 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0; margin-top: var(--space-8); }
.project-tabs__content h3 { font: 800 1.375rem/1.25 var(--font-body); text-transform: uppercase; margin-top: var(--space-6); }
.project-tabs__content .rich-text { max-width: none; }
/* News carousel (the old "post carousel"): photo cards with the title on the image. */
.news-carousel { position: relative; }
.news-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--space-6); overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.news-carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .news-carousel__track { grid-auto-columns: calc((100% - var(--space-6)) / 2); } }
@media (min-width: 960px) { .news-carousel__track { grid-auto-columns: calc((100% - 2 * var(--space-6)) / 3); } }
.post-slide { position: relative; scroll-snap-align: start; aspect-ratio: 6 / 5; overflow: hidden; border-radius: var(--radius-md);
background: var(--navy); color: var(--on-navy); display: flex; align-items: flex-end; isolation: isolate; }
.post-slide__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--ease-out); }
.post-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,16,46,0) 30%, rgba(0,16,46,.92) 100%); }
.post-slide:hover .post-slide__image { transform: scale(1.04); }
.post-slide__body { padding: var(--space-6); width: 100%; }
.post-slide__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.post-slide__tags li { background: var(--yellow); color: var(--navy); font: 600 .75rem/1 var(--font-heading); padding: 5px 8px; border-radius: var(--radius-sm); text-align: left; }
.post-slide__title { color: var(--on-navy); font: 800 1.1875rem/1.25 var(--font-body); text-transform: uppercase; margin: 0 0 var(--space-2); text-wrap: balance; }
.post-slide__title a { color: inherit; text-decoration: none; }
.post-slide__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-slide__title a:focus-visible { outline: none; }
.post-slide:has(a:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.post-slide__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-small); color: var(--on-navy-muted); text-align: left; }
.post-slide__meta span, .post-slide__meta time { display: inline-flex; align-items: center; gap: 6px; }
.post-slide__meta .icon { width: 14px; height: 14px; }
.news-carousel__arrow { position: absolute; top: calc(50% - 32px); z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
border: 0; border-radius: 50%; background: var(--surface); color: var(--navy); box-shadow: var(--shadow-raised); cursor: pointer; }
.news-carousel__arrow:hover { background: var(--yellow); }
.news-carousel__arrow .icon { width: 18px; height: 18px; }
.news-carousel__arrow--prev { left: -12px; }
.news-carousel__arrow--next { right: -12px; }
.news-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.news-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.news-carousel__dots button[aria-current="true"] { background: var(--navy); width: 24px; border-radius: 5px; }
.news-carousel.is-static .news-carousel__arrow, .news-carousel.is-static .news-carousel__dots { display: none; }
@media (prefers-reduced-motion: reduce) { .post-slide__image { transition: none; } }
/* Lightbox ------------------------------------------------------------------ */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0, 16, 46, .92); }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: var(--radius-sm); }
.lightbox__close, .lightbox__nav { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px;
font-size: 1.75rem; line-height: 1; cursor: pointer; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--yellow); color: var(--navy); }
/* Section options and columns (editor layout controls) -------------------- */
.container--wide { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.section--compact { padding-block: clamp(32px, 2vw + 16px, 56px); }
.section--spacious { padding-block: clamp(80px, 6vw + 40px, 160px); }
.section--align-center .stream, .section--align-center .stream :is(p, li, blockquote, figcaption) { text-align: center; }
.section--align-center .rich-text, .section--align-center .statement, .section--align-center .cards-intro { margin-inline: auto; }
.section--align-center .button-row { justify-content: center; }
.section--photo { position: relative; isolation: isolate; overflow: hidden; color: var(--on-navy); }
.section__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.section--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,16,46,.9), rgba(0,16,46,.65)); }
.section--photo h2, .section--photo h3, .section--photo h4, .section--photo a:not(.button) { color: var(--on-navy); }
.section--photo .rich-text, .section--photo .feature p { color: var(--on-navy-muted); }
.columns { display: grid; gap: var(--space-8) var(--space-12); }
.columns--center { align-items: center; } .columns--end { align-items: end; } .columns--start { align-items: start; }
.columns__col > .stream > * + * { margin-top: var(--space-6); }
@media (min-width: 860px) {
.columns--1-1 { grid-template-columns: 1fr 1fr; }
.columns--2-1 { grid-template-columns: 2fr 1fr; }
.columns--1-2 { grid-template-columns: 1fr 2fr; }
.columns--1-1-1 { grid-template-columns: repeat(3, 1fr); }
.columns--1-1-1-1 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 859px) { .columns--1-1-1-1, .columns--1-1-1 { grid-template-columns: 1fr 1fr; } }
/* Contact block: a night-sky card with the details beside the form, the map below. */
.contact { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }
.contact__info { border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 48px); box-shadow: var(--shadow-raised); }
.contact__info h2 { color: var(--on-navy); }
.contact__text { color: var(--on-navy-muted); }
.contact__text a, .contact__info a { color: var(--on-navy); }
.contact__list { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-6); }
.contact__list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: center; text-align: left; }
.contact__list .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 208, 10, .14); color: var(--yellow); }
.contact__list div { display: flex; flex-direction: column; }
.contact__list a, .contact__list span:not(.contact__label) { font: 600 1.0625rem/1.4 var(--font-heading); text-decoration: none; overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--yellow); text-decoration: underline; }
.contact__label { font: 600 .75rem/1.4 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy-muted); }
.contact__social { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .14); }
.contact__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 48px); }
.contact__map { margin-top: var(--space-12); }
.contact__map iframe { display: block; box-shadow: var(--shadow-raised); }
/* Shop, laid out like the old WooCommerce pages ------------------------------- */
.shop-page { padding-block: var(--space-16) var(--space-section); }
.shop-breadcrumbs { font-size: .9375rem; color: var(--ink-muted); padding-bottom: var(--space-3); margin-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.shop-breadcrumbs a { color: inherit; }
.shop-breadcrumbs a:hover { color: var(--navy); }
.shop-title { font: 800 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1.1 var(--font-body); text-transform: uppercase; letter-spacing: 0; margin-bottom: var(--space-6); }
.shop-subtitle { font: 800 1.25rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0; margin: 0 0 var(--space-4); }
.shop-count { color: var(--ink-muted); margin-bottom: var(--space-8); }
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12) var(--space-8); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.product-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); height: 100%; text-align: center; }
.product-card__link { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; color: inherit; text-decoration: none; }
.product-card__media { display: grid; place-items: center; aspect-ratio: 5 / 2.2; background: var(--surface-muted); border-radius: var(--radius-sm); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--ease-out); }
.product-card__link:hover .product-card__media img { transform: scale(1.03); }
.product-card__title { font: 500 1.0625rem/1.35 var(--font-body); text-transform: uppercase; color: var(--navy); margin: 0; text-wrap: balance; }
.product-card__link:hover .product-card__title { text-decoration: underline; text-underline-offset: 3px; }
.product-card__price { margin: 0; font-size: 1.0625rem; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }
.product-card__price del { margin-right: var(--space-1); }
.product-card form { margin-top: auto; }
.button--shop { min-height: 36px; padding: 6px 14px; gap: var(--space-2); background: var(--navy); color: var(--on-navy); font: 600 .8125rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-sm); margin-top: auto; }
.button--shop:hover { background: var(--yellow); color: var(--navy); }
.button--shop .icon { width: 16px; height: 16px; }
.button--muted { background: var(--surface-muted); color: var(--navy); border-color: var(--line); text-transform: uppercase; font-size: .875rem; letter-spacing: .04em; }
.button--muted:hover { background: var(--line); }
.button--place-order { width: 100%; background: var(--yellow); color: var(--navy); text-transform: uppercase; letter-spacing: .06em; font-size: .9375rem; min-height: 52px; }
.button--place-order:hover { background: var(--yellow-hover); }
.product-detail { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 860px) { .product-detail { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.product-detail__media img { width: 100%; height: auto; }
.product-detail__price { font: 500 1.5rem/1.2 var(--font-body); color: var(--navy); margin-bottom: var(--space-6); text-align: left; font-variant-numeric: tabular-nums; }
.product-detail__price .price__ref { display: inline; font-size: 1rem; }
.product-detail__buy { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.product-detail__buy .qty-input { width: 96px !important; min-height: 52px; }
.product-detail__buy .button { flex: 1 1 220px; min-height: 52px; text-transform: uppercase; letter-spacing: .06em; }
.product-detail__code { flex-basis: 100%; }
.product-detail__meta { color: var(--ink-muted); text-align: left; }
.product-tabs { margin-top: var(--space-12); }
.product-tabs__list { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.product-tabs__list [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--space-2) 0; margin-bottom: -1px;
font: 600 .875rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); cursor: pointer; }
.product-tabs__list [role="tab"][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.product-related { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.shop-table { width: 100%; border: 1px solid var(--line); border-collapse: collapse; }
.shop-table th, .shop-table td { padding: var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.shop-table thead th { font-weight: 700; color: var(--navy); }
.shop-table__total th, .shop-table__total td { font-weight: 700; color: var(--navy); font-size: 1.125rem; }
.shop-table__thumb img { width: 64px; height: auto; }
.shop-table__remove { width: 48px; }
.cart-remove { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--navy); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.cart-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.cart-table .qty-input { width: 80px !important; }
.cart-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.cart-actions__coupon { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cart-actions__coupon input { width: 220px; max-width: 100%; }
@media (max-width: 719px) {
.cart-table thead { display: none; }
.cart-table tbody tr { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
.cart-table tbody td { border: 0; padding: var(--space-1) var(--space-3); }
.cart-table tbody td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-4); }
.cart-table tbody td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--navy); }
}
.cart-collaterals { display: grid; gap: var(--space-8); margin-top: var(--space-12); align-items: start; }
@media (min-width: 960px) { .cart-collaterals { grid-template-columns: 1fr minmax(360px, 0.8fr); } }
.cart-totals { background: var(--surface-muted); padding: var(--space-8); border-radius: var(--radius-sm); }
.cart-totals .shop-table { background: var(--surface); margin-bottom: var(--space-6); }
.inline-form { display: inline; }
.checkout-notice { max-width: none; margin-bottom: var(--space-6); }
.checkout-coupon { background: var(--surface-muted); border-top: 3px solid var(--navy); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-12); }
.checkout-coupon summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.checkout-coupon summary span { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; }
.checkout-coupon summary .icon { width: 18px; height: 18px; color: var(--navy); }
.checkout-coupon__form { margin-top: var(--space-4); }
.checkout-billing .field { margin-bottom: var(--space-4); }
.field--tight { margin-top: calc(-1 * var(--space-2)); }
.checkout-review { position: sticky; top: calc(var(--header-height) + 16px); }
.checkout-review .shop-table td:last-child, .checkout-review .shop-table th:last-child { text-align: right; }
.payment-methods { margin: var(--space-6) 0; padding: var(--space-6); background: var(--surface-muted); border-radius: var(--radius-sm); }
.payment-methods__method { display: flex; gap: var(--space-3); align-items: center; font-weight: 600; color: var(--navy); }
.payment-methods__box { position: relative; margin-top: var(--space-4); padding: var(--space-4); background: var(--surface); border-radius: var(--radius-sm); font-size: .9375rem; color: var(--ink-muted); }
.payment-methods__box::before { content: ""; position: absolute; top: -8px; left: 20px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--surface); }
.pay-panel__label { font: 500 1.125rem/1.3 var(--font-body); text-transform: none; color: var(--ink); }
.payment-badges { margin-top: var(--space-12); }
.cart-collaterals .payment-badges { margin-top: 0; }
.payment-badges__links { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.payment-badges__links a { color: var(--navy-600); }
.payment-badges__logos { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); align-items: center; }
.payment-badges__logos img { max-height: 64px; width: auto; }
.form.checkout-grid { max-width: none; }
.shop-table th { font: 700 1rem/1.4 var(--font-body); color: var(--navy); }
.shop-page :is(.cart-table .qty-input, .cart-actions__coupon input) { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid #b9c2cf;
border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.shop-page :is(.cart-table .qty-input, .cart-actions__coupon input):focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 16, 46, 0.18); }
.product-card__media { aspect-ratio: auto; background: none; }
.project-tabs__content .logo-grid img { filter: none; opacity: 1; }
.shop-table td:last-child { white-space: nowrap; }
/* Empty states (404, closed registrations): a patch of night sky with one clear next step. */
.empty-state { text-align: center; padding-block: clamp(80px, 10vw, 160px);
background-image: radial-gradient(ellipse at 50% 120%, rgba(255, 208, 10, .12), transparent 60%),
linear-gradient(180deg, rgba(0, 16, 46, .7), rgba(0, 16, 46, .92)), url("../img/sky-1600.a8b21a15902f.webp");
background-size: cover; background-position: center; }
.container .empty-state, .stream .empty-state { border-radius: var(--radius-lg); padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px); }
.empty-state__inner { max-width: 680px; display: flex; flex-direction: column; align-items: center; }
.empty-state__code { margin: 0; font: 800 clamp(6rem, 4rem + 9vw, 11rem)/.9 var(--font-heading); letter-spacing: -.05em; color: var(--yellow);
text-shadow: 0 0 48px rgba(255, 208, 10, .35); text-align: center; }
.empty-state__star .icon { width: 56px; height: 56px; color: var(--yellow); filter: drop-shadow(0 0 18px rgba(255, 208, 10, .5)); }
.empty-state__eyebrow { margin: var(--space-6) 0 var(--space-2); font: 600 .8125rem/1.4 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); text-align: center; }
.empty-state :is(h1, h2) { color: var(--on-navy); margin-bottom: var(--space-4); }
.empty-state__text { color: var(--on-navy-muted); font-size: var(--text-lead); text-align: center; max-width: 56ch; }
.empty-state__actions { justify-content: center; margin-top: var(--space-6); }
.empty-state .button--secondary { background: transparent; color: var(--on-navy); border-color: rgba(255, 255, 255, .5); }
.empty-state .button--secondary:hover { border-color: var(--on-navy); background: rgba(255, 255, 255, .08); }
.empty-state__search { display: flex; gap: var(--space-2); width: min(100%, 440px); margin-top: var(--space-8); }
.empty-state__search input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .08); color: var(--on-navy); font: inherit; }
.empty-state__search input::placeholder { color: var(--on-navy-muted); }
.empty-state__search input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; }
.empty-state__search .button { padding-inline: 16px; }
.logo-grid li.is-light :is(a, span) { background: var(--navy); }
.logo-grid li.is-light img { filter: none; opacity: .9; }
/* Project cards show the whole project banner (about 3:1) instead of a cropped photo. */
.project-card__media { aspect-ratio: auto; background: var(--surface); border: 1px solid var(--line); }
.project-card__media img { height: auto; object-fit: contain; }
/* Događaji ---------------------------------------------------------------------
Event pages under categories (Nauka uz kafu, 3MT…). The index: "Uskoro", filters, past events by year, category
cards and the month calendar; a category page lists its events as a timeline by year. */
.activity-index.section--flush-top { padding-top: var(--space-8); }
.event-filters {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-6);
margin-bottom: var(--space-12); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.event-filters__field { display: grid; gap: 6px; flex: 1 1 200px; max-width: 340px; }
.event-filters__label { font: 600 .75rem/1.4 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.event-filters select {
width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; font: inherit; font-size: var(--text-small); color: var(--ink);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300102e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
border: 1px solid #b9c2cf; border-radius: var(--radius-sm); appearance: none; cursor: pointer;
transition: border-color var(--duration), box-shadow var(--duration);
}
.event-filters select:hover { border-color: var(--navy); }
.event-filters select:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 16, 46, 0.18); }
.event-filters__submit[hidden] { display: none; }
.event-filters__reset { align-self: center; font-size: var(--text-small); font-weight: 600; color: var(--navy); }
.activity-index__result { color: var(--ink-muted); margin: calc(-1 * var(--space-8)) 0 var(--space-8); }
.activity-upcoming { margin-bottom: var(--space-12); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--yellow-soft); }
.activity-upcoming h2 { margin-bottom: var(--space-4); }
.activity-grid { display: grid; gap: var(--space-12) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.activity-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.activity-card__media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-muted); aspect-ratio: 3 / 2; }
.activity-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.activity-card:hover .activity-card__media img { transform: scale(1.02); }
.activity-card__type { position: absolute; left: var(--space-3); top: var(--space-3); padding: 4px 10px; border-radius: 999px; background: var(--navy); color: var(--on-navy);
font: 600 .75rem/1.3 var(--font-heading); }
.activity-card__title { font-size: 1.375rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; margin: 0; }
.activity-card__title a { text-decoration: none; }
.activity-card__title a::after { content: ""; position: absolute; inset: 0; }
.activity-card__title a:focus-visible { outline: none; }
.activity-card:has(a:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: var(--radius-md); }
.activity-card__summary { margin: 0; color: var(--ink-muted); text-align: left; }
.activity-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-small); color: var(--ink-muted); text-align: left; }
.activity-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.activity-card__meta .icon { width: 16px; height: 16px; color: var(--navy); }
.activity-card__count { font-weight: 600; color: var(--navy); }
.activity__eyebrow { margin: 0 0 var(--space-3); font: 600 .8125rem/1.4 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.activity__eyebrow a { color: inherit; }
.activity__facts-wrap { padding-block: var(--space-8); }
.activity__facts { display: grid; gap: var(--space-4) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 var(--space-6); }
.activity__facts dt { font: 600 .75rem/1.4 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.activity__facts dd { margin: 4px 0 0; font: 600 1.0625rem/1.4 var(--font-heading); color: var(--navy); text-align: left; }
.activity__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.activity__image { margin-bottom: var(--space-8); }
/* Event lists: a date column and the event; the timeline dot is yellow for upcoming events. */
.event-list { list-style: none; margin: 0; padding: 0 0 0 var(--space-6); border-left: 2px solid var(--line); display: grid; gap: var(--space-6); }
.event-row { position: relative; display: grid; gap: 2px var(--space-6); grid-template-columns: minmax(150px, 200px) 1fr; align-items: baseline; text-align: left; }
.event-row::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) - 7px); top: 7px; width: 12px; height: 12px; border-radius: 50%;
background: var(--line); box-shadow: 0 0 0 3px var(--surface); }
.event-row--upcoming::before { background: var(--yellow); }
.event-row__date { display: grid; font: 600 .9375rem/1.4 var(--font-heading); color: var(--navy); }
.event-row__time { font-weight: 500; font-size: var(--text-small); color: var(--ink-muted); }
.event-row__title { margin: 0 0 var(--space-1); font-size: 1.1875rem; line-height: 1.3; }
.event-row__title a { text-decoration: none; }
.event-row__title a:hover { text-decoration: underline; }
.event-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--text-small); color: var(--ink-muted); }
.event-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.event-row__meta .icon { width: 14px; height: 14px; }
.event-row__category { font-weight: 600; color: var(--navy); }
.event-row__summary { margin: var(--space-2) 0 0; max-width: var(--measure); }
@media (max-width: 639px) { .event-row { grid-template-columns: 1fr; } }
.activity-upcoming .event-list { border-left-color: var(--yellow); }
.activity-upcoming .event-row::before { box-shadow: 0 0 0 3px var(--yellow-soft); }
.event-year { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
@media (min-width: 860px) { .event-year { grid-template-columns: 140px 1fr; gap: var(--space-8); } }
.event-year__heading { font-size: var(--text-h2); color: var(--navy); margin: 0; }
.event-year--upcoming .event-year__heading { font-size: var(--text-h3); }
.activity-past { margin-top: var(--space-12); }
.activity-past > h2 { margin-bottom: var(--space-8); }
/* The month calendar: a Monday-first table on wide screens, the list of the month's days on phones. */
.event-calendar { padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.event-calendar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.event-calendar__head h2 { margin: 0; }
.event-calendar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.event-calendar__nav[hidden], .event-calendar__month[hidden] { display: none; }
.event-calendar__month { min-width: 9em; margin: 0; text-align: center; font: 700 1.125rem/1.3 var(--font-heading); color: var(--navy); text-transform: capitalize; }
.event-calendar__step { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.event-calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.event-calendar__grid th { padding: var(--space-2); font: 600 .75rem/1.4 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); text-align: left; }
.event-calendar__grid td { height: 104px; padding: var(--space-2); vertical-align: top; border: 1px solid var(--line); }
.event-calendar__grid td.is-outside { background: var(--surface-muted); color: var(--ink-muted); }
.event-calendar__grid td.is-outside .event-calendar__day { font-weight: 400; } /* muted by colour, not opacity: it must stay readable (WCAG 4.5:1) */
.event-calendar__day { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-bottom: var(--space-1); border-radius: 999px; font: 600 .875rem/1 var(--font-heading); }
.event-calendar__grid td.is-today .event-calendar__day { background: var(--navy); color: var(--on-navy); }
.event-calendar__event { display: block; margin-top: 4px; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--yellow-soft); border-left: 3px solid var(--yellow);
font-size: .8125rem; line-height: 1.3; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.event-calendar__event:hover { background: var(--yellow); }
.event-calendar__event:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; }
.event-calendar__time { font-weight: 600; }
.event-calendar__list { display: none; }
.event-calendar__list ul, .event-calendar__during ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.event-calendar__list-day { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.event-calendar__list-date { margin: 0 0 var(--space-1); font: 600 .875rem/1.4 var(--font-heading); color: var(--ink-muted); }
.event-calendar__empty { margin: 0; color: var(--ink-muted); }
.event-calendar__during { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-muted); }
.event-calendar__during-heading { margin: 0 0 var(--space-2); font: 600 .75rem/1.4 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.event-calendar__subscribe { margin: var(--space-6) 0 0; }
.event-calendar__subscribe a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.event-calendar__subscribe .icon { width: 16px; height: 16px; }
@media (max-width: 719px) {
.event-calendar__grid { display: none; }
.event-calendar__list { display: block; }
}
.project-activities { margin-top: var(--space-8); }
.project-activities__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; border-top: 1px solid var(--line); }
.project-activities__list li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0;
border-bottom: 1px solid var(--line); text-align: left; }
.project-activities__date { color: var(--ink-muted); font-size: var(--text-small); }
.project-activities__list li.is-upcoming .project-activities__date { color: var(--navy); font-weight: 600; }
@media (max-width: 639px) { .project-activities__list li { grid-template-columns: 1fr; gap: 2px; } }
.news-activity { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
/* Narrow columns in the hero (the three pillars) stay ragged: justified text there opens wide gaps. */
main .hero .rich-text :is(p, li), main .hero :is(p, li) { text-align: left; }
/* Project logos on the home page: one calm row of tiles, each opening its tab on Projekti. */
.project-logos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.project-logos__item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-3); height: 100%;
padding: var(--space-6) var(--space-4) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
text-decoration: none; color: var(--navy); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), border-color var(--duration); }
.project-logos__item:hover, .project-logos__item:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-raised); border-color: var(--yellow); }
.project-logos__logo { display: grid; place-items: center; height: 88px; width: 100%; }
.project-logos__logo img { max-height: 88px; max-width: 100%; width: auto; object-fit: contain; }
.project-logos__name { font: 600 .875rem/1.3 var(--font-heading); text-align: center; text-wrap: balance; }
/* Hero pillars: a short line each (the full texts are on O nama). */
.hero__highlights { margin-top: clamp(32px, 4vw, 64px); padding-top: var(--space-6); }
.highlight__title { margin-top: 8px; }
.highlight__title a { color: inherit; text-decoration: none; background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 2px no-repeat; transition: background-size var(--duration) var(--ease-out); }
.highlight__title a:hover, .highlight__title a:focus-visible { background-size: 100% 2px; }
.highlight__text { font-size: 1rem; }
/* Card texts sit in narrow columns: keep them ragged like the hero pillars. */
main .cards .rich-text :is(p, li) { text-align: left; }
/* Home hero: "Coming up" card on the right, a strip of numbers along the bottom. */
.hero__inner:has(.hero-next) { align-items: center; }
@media (min-width: 900px) { .hero__inner:has(.hero-next) { grid-template-columns: 1.25fr minmax(320px, .75fr); } }
.hero-next { position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-next__eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font: 600 .8125rem/1.4 var(--font-heading);
letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.hero-next__eyebrow .icon { width: 16px; height: 16px; }
.hero-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hero-next__item { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-md); background: rgba(0, 16, 46, .55);
color: var(--on-navy); text-decoration: none; border-left: 3px solid var(--yellow); transition: background var(--duration), transform var(--duration) var(--ease-out); }
.hero-next__item:hover, .hero-next__item:focus-visible { background: rgba(0, 16, 46, .85); transform: translateX(3px); }
.hero-next__date { font: 600 .875rem/1.4 var(--font-heading); color: var(--yellow); }
.hero-next__title { font: 600 1.0625rem/1.35 var(--font-heading); }
.hero-next__meta { font-size: .875rem; color: var(--on-navy-muted); }
.hero-next__all { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--on-navy); font-weight: 600; text-decoration: none; }
.hero-next__all:hover { color: var(--yellow); }
.hero-next__all .icon { width: 16px; height: 16px; }
.hero-stats { list-style: none; margin: clamp(32px, 4vw, 64px) 0 0; padding: var(--space-6) 0 0; display: grid; gap: var(--space-4);
grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 860px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stats__item { display: grid; gap: 2px; color: var(--on-navy); text-decoration: none; }
.hero-stats__value { font: 700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--font-heading); color: var(--on-navy); letter-spacing: -.02em; }
a.hero-stats__item:hover .hero-stats__value { color: var(--yellow); }
.hero-stats__label { font-size: .9375rem; color: var(--on-navy-muted); }
.event-calendar__today { min-height: 44px; padding: 8px 16px; }
/* Donation details (blocks/donation_details.html): BiH, abroad and online, from Settings → Site settings. */
.donation__heading { margin-bottom: var(--space-3); }
.donation__text { max-width: 62ch; margin-bottom: var(--space-8); }
.donation__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.donation__card {
display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(20px, 3vw, 32px);
border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
box-shadow: 0 1px 2px rgba(0, 16, 46, .06), 0 12px 32px -18px rgba(0, 16, 46, .35);
}
.donation__card h3 { margin: 0; color: var(--navy); }
.donation__card--online { background: var(--yellow-soft); border-color: transparent; }
.donation__card--online .button { align-self: flex-start; margin-top: auto; }
.donation__details { display: grid; gap: 2px; margin: 0; }
.donation__details dd + dt { margin-top: 10px; }
.donation__details dt { font: 600 .75rem/1.6 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.donation__details dd { margin: 0; font-variant-numeric: tabular-nums; }
.donation__copy {
margin-left: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
font: 600 .75rem/1.6 var(--font-heading); color: var(--navy); cursor: pointer;
}
.donation__copy:hover, .donation__copy:focus-visible { border-color: var(--navy); }
.donation__copy[data-copied] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.donation__note { margin-top: var(--space-6); max-width: 70ch; font-size: var(--text-small); color: var(--ink-muted); }
.theme-dark .donation__note, .theme-accent .donation__note { color: inherit; opacity: .85; }
/* A sentence right under a row of numbers is read with them: centred like the numbers. */
.block-stats + .block-rich_text .rich-text { max-width: 62ch; margin-inline: auto; }
main .block-stats + .block-rich_text .rich-text p { text-align: center; }