/* ==========================================================================
IDZY — Site Stylesheet
Web design system extracted from the print brand template
(docs/brand/Idzy Pty Ltd Brand Template.html) into reusable components.
Load order in every page's :
1. Fonts (see fonts/README.md — currently the Google Fonts )
2. css/tokens.css
3. css/styles.css (this file)
Sections:
1. Reset & base 5. Buttons 9. Engagement tiers
2. Typography 6. Header / nav 10. Case-study block
3. Layout primitives 7. Footer 11. Contact form
4. Accessibility 8. Hero & cards 12. Media / imagery
13. Responsive / motion
========================================================================== */
/* 1. Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Honour the hidden attribute over layout rules — keeps the JS-only nav
toggle hidden until site.js activates it (progressive enhancement). */
[hidden] { display: none !important; }
body {
background-color: var(--color-bg);
color: var(--color-secondary);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--line-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
display: flex;
flex-direction: column;
}
img,
svg { max-width: 100%; height: auto; display: block; }
/* 2. Typography ------------------------------------------------------------ */
h1, h2, h3, h4 {
color: var(--color-primary);
font-family: var(--font-heading);
line-height: var(--line-tight);
font-weight: 600;
letter-spacing: -0.02em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
/* .section-label supplies its own spacing; plain section headings need theirs. */
h2:not(.section-label) { margin-bottom: var(--space-4); }
h3 { font-size: var(--text-h3); font-weight: 600; }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
.lead {
font-size: var(--text-lg);
color: var(--color-primary);
line-height: 1.5;
}
a {
color: var(--color-cobalt);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color var(--transition);
}
a:hover { color: var(--color-primary); }
/* Mono eyebrow / label — the "01." uppercase label with a trailing hairline. */
.eyebrow,
.section-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-cobalt);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.section-label::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-border);
}
.note {
font-size: var(--text-sm);
font-style: italic;
color: var(--color-secondary);
}
/* 3. Layout primitives ----------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-8); }
.section + .section { padding-top: 0; }
main { flex: 1 0 auto; }
/* 4. Accessibility --------------------------------------------------------- */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* Visible, consistent focus ring for keyboard users. */
:focus-visible {
outline: 2px solid var(--color-cobalt);
outline-offset: 2px;
border-radius: var(--radius);
}
/* Skip link — first focusable element, hidden until focused. */
.skip-link {
position: absolute;
left: var(--space-4);
top: -3rem;
z-index: 100;
background: var(--color-primary);
color: #fff;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: #fff; }
/* 5. Buttons --------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
padding: 0.75rem 1.5rem;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
transition: background var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition);
}
.btn--primary {
background: var(--color-primary);
color: #fff;
}
.btn--primary:hover {
background: var(--color-cobalt);
color: #fff;
transform: translateY(-1px);
}
.btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: var(--color-border);
}
.btn--ghost:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* 6. Header / nav ---------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
min-height: 68px;
}
.brand-logo {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.03em;
line-height: 1;
text-decoration: none;
}
.brand-logo small {
display: block;
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 400;
color: var(--color-cobalt);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-top: 3px;
}
.nav-toggle {
display: none; /* shown on mobile only */
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.5rem 0.75rem;
cursor: pointer;
color: var(--color-primary);
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.nav {
display: flex;
align-items: center;
gap: clamp(0.75rem, 2vw, 1.75rem);
list-style: none;
}
.nav a {
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-secondary);
text-decoration: none;
padding-block: 0.25rem;
border-bottom: 2px solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.nav a:hover,
.nav a[aria-current="page"] {
color: var(--color-primary);
border-bottom-color: var(--color-cobalt);
}
.nav .nav__cta {
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.45rem 0.9rem;
color: var(--color-primary);
}
.nav .nav__cta:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* 7. Footer ---------------------------------------------------------------- */
.site-footer {
flex-shrink: 0;
background: var(--color-primary);
color: color-mix(in srgb, #fff 78%, var(--color-primary));
margin-top: var(--space-8);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--color-teal); }
.site-footer__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
justify-content: space-between;
padding-block: var(--space-7);
}
.site-footer .brand-logo { color: #fff; }
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
list-style: none;
font-family: var(--font-mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.site-footer__legal {
width: 100%;
border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
padding-block: var(--space-4);
font-size: var(--text-sm);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
}
/* 8. Hero & cards ---------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 6vw, 6rem); }
.hero__eyebrow { /* uses .eyebrow, but no trailing rule */ margin-bottom: var(--space-4); }
.hero h1 {
font-size: var(--text-hero);
line-height: var(--line-display);
max-width: 22ch;
margin-bottom: var(--space-5);
}
.hero .lead { max-width: 52ch; }
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
/* Pillar-tinted hero: a thin top rule in the division's accent colour. */
.hero--pillar { border-top: 3px solid var(--pillar, var(--color-primary)); }
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
margin-top: var(--space-6);
}
/* Service card — coloured top border driven by a pillar modifier class. */
.card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-top: 3px solid var(--pillar, var(--color-primary));
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
a.card { text-decoration: none; }
a.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { color: var(--color-primary); }
.card ul {
list-style: none;
display: grid;
gap: var(--space-2);
font-size: 0.95rem;
}
.card li { position: relative; padding-left: var(--space-4); }
.card li::before {
content: '';
position: absolute;
left: 0; top: 0.6em;
width: 5px; height: 5px;
background: var(--pillar, var(--color-secondary));
border-radius: 50%;
}
/* Inline code — file paths and class names in the component reference and in
internal notes. Long unbroken paths are the one thing here that will blow out
the viewport on a phone, so this wraps anywhere rather than overflowing. */
code {
font-family: var(--font-mono);
font-size: 0.9em;
overflow-wrap: anywhere;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 0.1em 0.35em;
}
/* Four-pillar grid — .card-grid was sized for THREE service lines and never
revisited when Business Enablement made it four.
The failure is arithmetic, not taste. The content column is 1120px minus two
3rem gutters = 1024px. Four auto-fit tracks at minmax(240px, 1fr) need
4x240 + 3x24 = 1032px — eight pixels more than exists — so the grid silently
resolves to three tracks and the fourth card orphans onto a row of its own.
Every four-card grid on the site inherited that: the homepage divisions and
the competitive-landscape pillars both rendered 3 + 1.
Fixed with deterministic tracks rather than a smaller min, because lowering
the min would only move the orphan to the five-card grids. A four-item grid is
now 4-up, then 2x2, then stacked — and never 3 + 1. Desktop-first to match the
max-width queries used elsewhere in this file. */
.card-grid--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) {
.card-grid--4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.card-grid--4up { grid-template-columns: 1fr; }
}
/* Two-up companion. Four cards that each carry real prose read badly as four
232px columns; 2x2 gives them room while keeping the balanced shape. Use --4up
for compact cards (a heading and a short list), --2up when each card has to
hold a paragraph. */
.card-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
.card-grid--2up { grid-template-columns: 1fr; }
}
/* Pillar modifiers — set the accent used by hero/card/tier via --pillar. */
.pillar-advisory { --pillar: var(--color-advisory); }
.pillar-capability { --pillar: var(--color-capability); }
.pillar-technology { --pillar: var(--color-technology); }
.pillar-enablement { --pillar: var(--color-enablement); }
/* 9. Engagement tiers (Diagnostic / Embedded Delivery / Retained Advisory) - */
/* The three tiers are STAGES OF INCREASING COMMITMENT — Diagnostic →
Embedded Delivery → Retained Advisory — and were already numbered 01–03.
They previously used the same repeat(auto-fit, minmax(240px,1fr)) grid as
.card-grid, which rendered a sequence as three equal parallel cards and
flattened the one thing they were meant to communicate. Rendering the
progression is both more accurate and the point at which the page's
rhythm breaks. The four divisions ARE parallel, so .card-grid keeps its
grid. See BACKLOG "Design-aesthetic review" finding 1. */
.tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-7);
counter-reset: tier;
}
.tier {
position: relative;
padding-top: var(--space-6);
/* The rule thickens across the three stages — the commitment gradient. */
border-top: 1px solid var(--color-border);
}
.tier:nth-child(2) { border-top-width: 2px; }
.tier:nth-child(3) {
border-top-width: 3px;
border-top-color: var(--pillar, var(--color-cobalt));
}
/* The number sits ON the rule, knocked out of it by the page background. */
.tier::before {
counter-increment: tier;
content: counter(tier, decimal-leading-zero);
position: absolute;
top: 0;
left: 0;
transform: translateY(-50%);
padding-right: var(--space-3);
background: var(--color-bg);
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 500;
color: var(--pillar, var(--color-cobalt));
letter-spacing: 0.08em;
}
/* Carries the eye from one stage to the next. Decorative only. */
.tier:not(:last-child)::after {
content: '';
position: absolute;
top: 0;
right: calc(var(--space-6) * -1);
width: var(--space-6);
height: 1px;
background: var(--color-border);
}
.tiers__caption {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-secondary);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-5);
}
/* Stack to a vertical sequence on narrow screens — the rule moves to the
left edge so the progression still reads top-to-bottom. */
@media (max-width: 720px) {
.tiers { grid-template-columns: 1fr; gap: var(--space-5); }
.tier {
padding-top: 0;
padding-left: var(--space-5);
border-top: 0;
border-left: 1px solid var(--color-border);
}
.tier:nth-child(2) { border-left-width: 2px; }
.tier:nth-child(3) {
border-left-width: 3px;
border-left-color: var(--pillar, var(--color-cobalt));
}
.tier::before {
top: 0;
left: 0;
transform: translate(-50%, 0);
padding: 0;
padding-block: var(--space-1);
}
.tier:not(:last-child)::after { display: none; }
}
.tier h3 { margin-block: var(--space-2) var(--space-3); }
.tier__meta {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-secondary);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
/* 9b. Engagement-architecture diagram --------------------------------------
The site's one art-directed asset (design review finding 3). Type + rule
only, built from existing tokens — no new brand values, no photography.
Its motion is the single signature interaction (finding 5). */
.architecture {
margin: var(--space-8) 0 0;
}
.architecture__scroll {
overflow-x: auto; /* stays legible on narrow screens */
padding-bottom: var(--space-3);
}
.architecture__svg {
min-width: 640px;
width: 100%;
height: auto;
}
.architecture__col-label {
font-family: var(--font-mono);
font-size: 13px;
fill: var(--color-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
text-anchor: middle;
}
.architecture__col-rule line {
stroke: var(--color-border);
stroke-width: 1;
}
.architecture__row-label {
font-family: var(--font-heading);
font-size: 21px;
font-weight: 700;
fill: var(--color-primary);
letter-spacing: -0.02em;
}
.architecture__row-rule {
stroke: var(--pillar, var(--color-cobalt));
stroke-width: 1.5;
}
.architecture__node {
fill: var(--color-bg);
stroke: var(--pillar, var(--color-cobalt));
stroke-width: 1.5;
}
.architecture figcaption {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-secondary);
letter-spacing: 0.04em;
margin-top: var(--space-4);
max-width: 52ch;
}
/* The one motion moment: row rules draw left-to-right, staggered, the first
time the diagram scrolls into view. .is-visible is set by js/site.js — with
JS off, or with reduced motion, the diagram simply renders complete. */
@media (prefers-reduced-motion: no-preference) {
.architecture[data-animate] .architecture__row-rule {
stroke-dasharray: 640;
stroke-dashoffset: 640;
}
.architecture[data-animate] .architecture__node {
opacity: 0;
}
.architecture[data-animate].is-visible .architecture__row-rule {
animation: arch-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.architecture[data-animate].is-visible .architecture__node {
animation: arch-fade 400ms ease forwards;
}
.architecture__row:nth-child(4) .architecture__row-rule,
.architecture__row:nth-child(4) .architecture__node { animation-delay: 90ms; }
.architecture__row:nth-child(5) .architecture__row-rule,
.architecture__row:nth-child(5) .architecture__node { animation-delay: 180ms; }
.architecture__row:nth-child(6) .architecture__row-rule,
.architecture__row:nth-child(6) .architecture__node { animation-delay: 270ms; }
.architecture__row .architecture__node { animation-delay: 500ms; }
.architecture__row:nth-child(4) .architecture__node { animation-delay: 590ms; }
.architecture__row:nth-child(5) .architecture__node { animation-delay: 680ms; }
.architecture__row:nth-child(6) .architecture__node { animation-delay: 770ms; }
}
@keyframes arch-draw { to { stroke-dashoffset: 0; } }
@keyframes arch-fade { to { opacity: 1; } }
/* 10. Case-study block ----------------------------------------------------- */
.case {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-left: 3px solid var(--pillar, var(--color-cobalt));
padding: var(--space-6);
display: grid;
gap: var(--space-4);
margin-top: var(--space-6);
}
.case__tag {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pillar, var(--color-cobalt));
}
.case blockquote {
font-family: var(--font-heading);
font-size: var(--text-lg);
color: var(--color-primary);
line-height: 1.4;
}
.case__result {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.case__result dt {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-secondary);
}
.case__result dd {
font-family: var(--font-heading);
font-size: var(--text-h3);
color: var(--color-primary);
}
/* 11. Contact form --------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.field { display: grid; gap: var(--space-2); }
.field label {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
}
.field .req { color: var(--color-cobalt); }
.field input,
.field textarea,
.field select {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-primary);
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.7rem 0.85rem;
width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--color-cobalt);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cobalt) 18%, transparent);
}
.field textarea { min-height: 8rem; resize: vertical; }
.form__row {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* 12. Media / imagery ------------------------------------------------------
One ratio for every photograph on the site (3:2), enforced in CSS rather
than trusted to the file, so a swapped image can never shift the layout.
Source files ship at 800w and 1600w; `sizes` picks between them.
Every ![]()
carries width/height attributes as well, which is what actually
reserves the space before the file arrives. The aspect-ratio here is the
backstop for when a replacement image has different intrinsic dimensions.
PLACEHOLDERS: the current photographs are licensed stock, marked in the
markup with data-placeholder and listed in images/README.md. Grep for
data-placeholder before launch. */
.media {
--media-ratio: 3 / 2;
margin: 0;
overflow: hidden;
background-color: var(--color-border); /* holds the space while loading */
}
.media img {
width: 100%;
aspect-ratio: var(--media-ratio);
object-fit: cover;
}
.media figcaption {
color: var(--color-secondary);
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.04em;
padding-top: var(--space-3);
}
/* Full-width band. Breaks the container to sit edge to edge, and crops
shallower than 3:2 so it reads as a rule across the page rather than a
picture dropped into it. */
.media--band {
--media-ratio: 21 / 9;
margin-block: var(--space-8);
}
/* Division-page image: sits directly under the pillar hero, carrying the
division's accent as a top rule so the photograph joins the colour system
instead of floating outside it. */
.media--division {
--media-ratio: 2 / 1;
border-top: 3px solid var(--pillar, var(--color-primary));
margin-bottom: var(--space-8);
}
@media (max-width: 720px) {
/* Taller crops on narrow screens; a 21:9 strip at 375px is a letterbox. */
.media--band,
.media--division { --media-ratio: 3 / 2; }
}
/* Parallax. Opt in with .media--parallax: the photograph drifts against the page
while its frame crosses the viewport. Scroll-driven, so there is no scroll
handler and no JS — progress comes from the frame's own position, and the
motion cannot lag the scrollbar or carry on running off-screen.
The timeline is NAMED, and that is load-bearing. .media sets overflow: hidden,
which makes the figure a scroll container, so an anonymous view() timeline
declared on the image resolves its source to the figure — whose scroll range
is zero — and the animation sits dead. Naming the timeline on the figure and
referencing it from the image sidesteps that lookup: a named timeline is found
by walking ancestors, and the figure's own view timeline is measured against
the document, which is the thing actually scrolling.
Naming it also lets the image animate `transform` directly rather than an
inherited custom property, which keeps the work off the main thread.
Transform only, so the figure's height never changes and any figcaption stays
put. The two knobs below are tied together and must be changed as a pair:
travel ± N% of the image's own height, which the scale then multiplies
scale oversizes the image, leaving (scale − 1) / 2 of slack each side
The frame stays covered while scale × travel ≤ (scale − 1) / 2 , i.e. while
scale ≥ 1 / (1 − 2 × travel). At 16% that floor is 1.471; 1.60 is used, so
there are about 4.4 points of margin — measured at 23px on a 515px frame —
against a rounding error exposing an edge.
The scale is paid for twice. First in crop, and by area rather than by edge:
scaling by s shows 1/s of the width AND 1/s of the height, so at 1.60 the
frame holds 39% of the picture it would otherwise show and 61% is outside it.
Check each composition survives that before raising the setting. Second in
resolution, and the full-bleed .media--band is the case that bites: it is not
1120px like the division images but the whole viewport, measured at 1431px on
a normal desktop, which scaled 1.60 asks 2290px of source. The srcset tops
out at 1600w and every photograph here is a stock placeholder, so the band is
already soft and this makes it softer. When the real photography lands it
needs a 2400w rendition; raising the setting further without one only trades
sharpness for motion.
Gated twice, both on purpose:
- prefers-reduced-motion, because the global guard in section 13 works by
zeroing animation-duration, and a scroll-driven animation has no duration
to zero. It would otherwise keep moving for the people who asked it not to.
- @supports, because animation-timeline is not everywhere yet. Where it is
missing the image simply sits still, which is the site as it is today. */
.media--parallax {
--parallax-travel: 16%;
--parallax-scale: 1.60;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.media--parallax {
view-timeline-name: --media-frame;
}
.media--parallax img {
animation: media-parallax linear both;
animation-timeline: --media-frame;
will-change: transform;
}
@keyframes media-parallax {
from { transform: scale(var(--parallax-scale))
translateY(calc(-1 * var(--parallax-travel))); }
to { transform: scale(var(--parallax-scale))
translateY(var(--parallax-travel)); }
}
}
}
/* 13. Responsive / motion ------------------------------------------------- */
@media (max-width: 820px) {
.nav-toggle { display: inline-block; }
/* Collapsed mobile menu — revealed by site.js toggling [data-open].
Progressive enhancement: if JS is off, .nav has no [hidden] and stays
visible, stacked below the header (see the [hidden] rule below). */
.site-header__inner { flex-wrap: wrap; }
.nav {
order: 3;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
padding-bottom: var(--space-4);
}
.nav a { width: 100%; padding-block: 0.6rem; }
.nav[data-open="false"] { display: none; }
}
/* Respect users who prefer no motion. */
@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;
}
}