` — while fetching
* this stylesheet fresh, because the query on `/site.css?v=…` is a cache key here and
* nginx resolves the file regardless of it. Without a height the cached page renders the
* lockup at its intrinsic 540px and the header falls apart. MEASURED, not reasoned: the
* previous index.html rendered against this file at 1440x900 shows exactly that.
* The same shape burned this site once already, in the other direction (new HTML, cached
* CSS, unstyled page). Safe to delete once no cached copy of the pre-2026-08-30 page can
* plausibly still be in a browser. */
.mk-brand img { display: block; height: 58px; width: auto; }
.mk-foot .mk-brand img { height: 40px; }
.mk-nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.mk-nav a {
font-family: var(--font-sans);
text-decoration: none; color: var(--text-2);
font-size: var(--step--1); letter-spacing: .01em;
transition: color .18s ease;
}
.mk-nav a:hover, .mk-nav a:focus-visible { color: var(--text); text-decoration: none; }
.mk-nav a[aria-current="page"] { color: var(--text); }
.mk-top-cta { display: flex; gap: .7rem; align-items: center; }
/* ── buttons ──────────────────────────────────────────────────────────────── */
/* ⚑ EVERY BUTTON RULE IS WRITTEN `.mk .mk-btn-*`, AND THE DOUBLE CLASS IS
* LOAD-BEARING. Buttons here are anchors, so `.mk a { color: var(--accent) }`
* above also matches them — and `.mk a` scores (0,1,1) against a bare
* `.mk-btn-solid`'s (0,1,0), so the bare form LOSES and the label renders in
* accent orange on an accent-orange fill: an orange block with invisible text.
* That was MEASURED on the previous system and is preserved here because the
* hazard is a property of the selectors, not of the palette.
* Do not "simplify" these back to a single class. */
.mk .mk-btn {
display: inline-flex; align-items: center; gap: .6rem;
font-family: var(--font-sans);
font-size: 1.02rem; font-weight: 500; line-height: 1;
padding: .92rem 1.6rem; border-radius: 8px;
text-decoration: none; border: 1px solid transparent;
white-space: nowrap;
transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.mk .mk-btn:hover { text-decoration: none; }
.mk .mk-btn-solid { background: var(--accent); color: #121b21; }
.mk .mk-btn-solid:hover { background: #f18a5c; color: #121b21; transform: translateY(-1px); }
.mk .mk-btn-quiet { background: transparent; color: var(--text); border-color: var(--line); }
.mk .mk-btn-quiet:hover { color: var(--text); border-color: var(--accent); }
.mk .mk-btn-lg { font-size: 1.06rem; padding: 1rem 1.8rem; }
.mk .mk-btn-sm { font-size: var(--step--1); padding: .42rem 1rem; border-radius: 999px; }
.mk-btn-arrow { transition: transform .16s ease; }
.mk .mk-btn:hover .mk-btn-arrow { transform: translateX(3px); }
.mk-btn-note { font-size: var(--step--1); color: var(--text-3); }
.mk-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.4rem; }
/* ── hero ─────────────────────────────────────────────────────────────────── */
.mk-hero { position: relative; padding: clamp(3rem, 8vh, 6rem) 0 clamp(2.5rem, 6vh, 4.5rem); }
.mk-hero-glow {
position: absolute; inset: -30% -10% auto -10%; height: 90vh;
background:
radial-gradient(58% 46% at 22% 34%, rgba(232,121,74,.17), transparent 68%),
radial-gradient(40% 40% at 78% 12%, rgba(216,181,63,.07), transparent 70%);
filter: blur(12px);
pointer-events: none; z-index: 0;
}
.mk-hero > .mk-wrap { position: relative; z-index: 2; }
.mk-hero h1 { font-size: var(--step-4); }
.mk-hero h1 .mk-tint { color: var(--accent); }
/* The approved hero line, now running BENEATH doc 08's headline rather than above it
(operator ruling 2026-08-29). It keeps display weight and the accent — it is the line
that carries the idea — but it defers in size to the , which is the ruled headline. */
.mk .mk-hero-line {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--step-2);
letter-spacing: -.02em;
line-height: 1.12;
text-wrap: balance;
/* ⚑ THE GAP AND THE SIZE STEP ARE BOTH LOAD-BEARING. Set at the same weight and size
as the , these two lines read as ONE four-line run-on — and both begin "Your
company", so without a clear break the eye reads a stutter rather than a headline
and its answer. Measured by rendering it. */
margin: 1.5rem 0 0;
color: var(--text-2);
}
.mk-hero-line b, .mk-hero-line strong { color: var(--text); font-weight: 600; }
.mk-hero-line .mk-tint { color: var(--accent); }
.mk-hero .mk-sub {
margin: 1.6rem 0 0; max-width: 34ch;
font-family: var(--font-sans);
font-size: var(--step-1); font-weight: 300; line-height: 1.42; color: var(--text-2);
}
.mk-hero .mk-sub strong { color: var(--text); font-weight: 500; }
/* The two-column hero the front door uses. Inner pages use the one-column form. */
.mk-hero-split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1020px) {
.mk-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; }
}
/* ── the front door's hero screenshot ─────────────────────────────────────── */
/* ⚑ Operator, 2026-08-30: the hero carries a real product screen rather than the
* cairn mark. A 1440x900 capture dropped into a half-column renders every label
* below legibility and reads as a grey rectangle, so the shot column is widened and
* the frame is allowed to run PAST the right gutter — at `--maxw: 1180px` a 1440px
* viewport leaves 130px of gutter each side, so a 4rem pull cannot cause a
* horizontal scrollbar. Both rules are inside the same min-width query the split
* itself is, so the stacked mobile layout is untouched. */
@media (min-width: 1020px) {
.mk-hero-split-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); }
.mk-hero .mk-shot-hero { margin-right: clamp(-4rem, -3vw, 0rem); }
}
/* An inner page's hero is smaller than the front door's, deliberately: the door
is the only page whose job is impact. */
.mk-hero-page h1 { font-size: var(--step-3); max-width: 18ch; }
.mk-hero-page .mk-sub { max-width: 46ch; }
/* ── the cairn at hero scale (front door only) ────────────────────────────── */
/* THE MARK IS THE HERO, and it is the product's thesis rather than decoration:
a cairn is stones somebody settled so the next person finds the way. The two
lower stones are the record. The capstone is a change that would contradict
it — so it never lands. The gap where it should have seated is the whole
product, and it is the only lit thing on the page. */
.mk-cairn { position: relative; display: grid; justify-items: center; gap: 2.2rem; padding: clamp(1rem, 3vw, 2.5rem) 0; }
.mk-stack {
position: relative;
/* ⛔ THE ASPECT RATIO IS THE WHOLE POINT, AND IT IS ARITHMETIC, NOT TASTE.
The brand mark's stones are CHUNKY: 42x13, 32x12, 20x11 — width:height of
3.23, 2.67 and 1.82. Stretch them and they stop reading as stones and start
reading as LOADING SKELETONS. The approved reference reached about 11:1 and was
pulled back to a 23rem cap, which still measured 5.35:1 on the base stone in a
rendered 1440x900 capture — half again too wide, and it still read as a
skeleton bar. So the stack is capped at 15rem (240px) and each stone's HEIGHT is
derived from that width divided by the mark's own ratio:
base 240 / 3.23 = 74.4px = 4.65rem
mid 182 / 2.67 = 68.3px = 4.27rem (182 = 76% of 240)
cap 115 / 1.82 = 63.3px = 3.96rem (115 = 48% of 240)
⚑ THE HEIGHTS ARE FIXED rem RATHER THAN clamp()ed, and that is what keeps the
ratio true: a viewport-scaled height against a capped width IS the stretch. The
width is capped at 15rem and the narrowest column that ever holds it is wider
than that, so there is nothing left for a clamp to do. */
width: min(100%, 15rem);
display: grid; justify-items: center;
gap: .55rem;
}
.mk-stone { border-radius: 999px; background: var(--text); position: relative; opacity: 0; }
.mk-stone-base { width: 100%; height: 4.65rem; }
.mk-stone-mid { width: 76%; height: 4.27rem; }
.mk-cap-slot { position: relative; width: 48%; height: 3.96rem; }
.mk-stone-cap {
position: absolute; inset: 0; width: 100%;
background: var(--accent);
box-shadow: 0 0 0 0 var(--accent-ghost);
opacity: 0;
}
/* The gap the capstone never closed. */
.mk-seam {
width: 68%; height: clamp(1.3rem, 2.8vw, 2rem);
display: grid; place-items: center; position: relative; opacity: 0;
}
.mk-seam::before {
content: ""; position: absolute; inset: auto 0 .1rem; height: 1px;
background: linear-gradient(90deg, transparent, var(--amber), transparent);
opacity: .55;
}
.mk-seam-label {
font-family: var(--font-mono); font-size: .62rem;
letter-spacing: .19em; text-transform: uppercase; color: var(--amber);
background: var(--ink); padding: 0 .6rem;
}
.mk-note-line { display: flex; align-items: flex-start; gap: .7rem; width: min(100%, 27rem); opacity: 0; }
.mk-note-rule { flex: none; width: 1.6rem; height: 1px; background: var(--line); margin-top: .5rem; }
.mk-note-k {
font-family: var(--font-mono); font-size: .62rem;
letter-spacing: .16em; text-transform: uppercase; flex: none;
width: 5.2rem; margin-top: .3rem;
}
.mk-note-cap .mk-note-k { color: var(--accent); }
.mk-note-base .mk-note-k { color: var(--slate); }
.mk-note-v { font-size: .85rem; color: var(--text-2); line-height: 1.4; }
.mk-note-v b { color: var(--text); font-weight: 500; }
.mk-note-v em { font-style: normal; color: var(--text-3); }
.mk .mk-verdict {
display: flex; align-items: flex-start; gap: .6rem; width: min(100%, 27rem);
font-size: .93rem; color: var(--text-2); line-height: 1.5; opacity: 0; margin: 0;
}
.mk-verdict b { color: var(--text); font-weight: 500; }
.mk-verdict-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--amber); flex: none; margin-top: .5rem; }
/* The build: stones settle bottom-up, the capstone descends and STOPS.
* ⛔ UNCONDITIONAL, AND THAT IS THE FIX RATHER THAN THE SHORTCUT. Every element
* below starts at opacity 0 and is brought in by an animation, so WHATEVER decides
* to start that animation is load-bearing for whether the hero renders at all. The
* approved reference first gated it on an IntersectionObserver — wrong for an
* above-the-fold hero: when the threshold was not met the stones stayed at opacity 0
* and the hero rendered BLANK. Measured at 1440x900. The reference then moved the
* trigger into a requestAnimationFrame that added a `.play` class, which fixes the
* observer but keeps the shape of the bug: a script that does not run leaves a blank
* hero, and a marketing page must not need JavaScript to show its headline.
* Running the animation off the stylesheet removes the trigger entirely. There is no
* `.play` class and no hero script on this site. */
.mk-cairn .mk-stone-base { animation: mk-settle .62s cubic-bezier(.18,.75,.3,1) .1s forwards; }
.mk-cairn .mk-stone-mid { animation: mk-settle .62s cubic-bezier(.18,.75,.3,1) .42s forwards; }
.mk-cairn .mk-note-base { animation: mk-fadeup .5s ease .95s forwards; }
.mk-cairn .mk-stone-cap { animation: mk-descend 1.05s cubic-bezier(.16,.7,.25,1) .85s forwards; }
.mk-cairn .mk-seam { animation: mk-ignite .7s ease 1.75s forwards; }
.mk-cairn .mk-note-cap { animation: mk-fadeup .5s ease 1.95s forwards; }
.mk-cairn .mk-verdict { animation: mk-fadeup .55s ease 2.25s forwards; }
@keyframes mk-settle { from { opacity: 0; transform: translateY(1.1rem) scaleX(.94); } to { opacity: 1; transform: none; } }
@keyframes mk-fadeup { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@keyframes mk-ignite { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-descend {
0% { opacity: 0; transform: translateY(-5.5rem); }
55% { opacity: 1; transform: translateY(-.15rem); }
70% { transform: translateY(.25rem); } /* it tries to seat */
100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 .42rem var(--accent-ghost); }
}
/* ── the proof strip ──────────────────────────────────────────────────────── */
.mk-proof { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.mk-proof-inner { display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; align-items: baseline; padding: 1.5rem 0; }
.mk .mk-proof-lead { font-size: var(--step--1); color: var(--text-3); max-width: 30ch; margin: 0; }
.mk-stat { display: flex; align-items: baseline; gap: .55rem; }
.mk-stat-n {
font-family: var(--font-display); font-weight: 700;
font-size: 1.5rem; letter-spacing: -.03em; color: var(--text);
font-variant-numeric: tabular-nums;
}
.mk-stat-l { font-size: var(--step--1); color: var(--text-2); }
/* ── bands ────────────────────────────────────────────────────────────────── */
.mk-band { padding: clamp(3.5rem, 9vh, 6rem) 0; }
/* ⚑ THE 404 PAGE HAS NO `.mk-wrap`, AND THIS LANE CANNOT GIVE IT ONE. Its markup is
* built as a string inside scripts/cairn_site_serve.js — outside this lane's scope —
* and it puts and
and
DIRECTLY inside `.mk-band`. `.mk-band` only supplies * vertical padding, so the 404 rendered flush against the left edge of the viewport * with no gutter at all. Seen in a rendered capture at 1440x900; nothing in the * markup hints at it. Giving `.mk-band`'s bare content children the wrap's own * measure fixes that page from here. It cannot affect the eight authored pages: * every one of them puts a `.mk-wrap` between the band and its content, and * `.mk-wrap` is excluded from the selector. */ .mk-band > h1, .mk-band > h2, .mk-band > h3, .mk-band > p, .mk-band > ul { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .mk-band > h1 { font-size: var(--step-3); margin-bottom: 1rem; } .mk-band-tight { padding: clamp(2.5rem, 6vh, 4rem) 0; } .mk-band-tint { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .mk-band > .mk-wrap > h2 { font-size: var(--step-2); max-width: 22ch; } .mk-band > .mk-wrap > h2 + .mk-lede { margin-top: 1.1rem; } .mk-band > .mk-wrap > h2 + .mk-split { margin-top: 1.8rem; } .mk-lede { font-size: var(--step-1); font-weight: 300; line-height: 1.45; color: var(--text-2); max-width: 48ch; } .mk-lede strong { color: var(--text); font-weight: 500; } /* The dark call-to-action band. On this site every band is dark, so this one is distinguished by a lit ground rather than by inversion. */ .mk-band-ink { position: relative; padding: clamp(4rem, 11vh, 7rem) 0; overflow: hidden; } .mk-band-ink::before { content: ""; position: absolute; inset: 0 -20% auto -20%; height: 100%; background: radial-gradient(50% 60% at 50% 40%, rgba(232,121,74,.14), transparent 70%); pointer-events: none; } .mk-band-ink > .mk-wrap { position: relative; } .mk-door { text-align: center; display: grid; justify-items: center; gap: 1.3rem; } .mk-door h2 { font-size: var(--step-3); max-width: 16ch; } .mk-door p { margin: 0; color: var(--text-2); max-width: 46ch; font-weight: 300; } /* ── the claim rows (the front door's short list) ─────────────────────────── */ .mk-rows { margin-top: clamp(2.2rem, 5vw, 3.4rem); display: grid; gap: 0; } .mk-row { display: grid; gap: .5rem 2.5rem; align-items: start; padding: 1.7rem 0; border-top: 1px solid var(--line-soft); } @media (min-width: 820px) { .mk-row { grid-template-columns: 20rem minmax(0, 1fr); } } .mk-row:last-child { border-bottom: 1px solid var(--line-soft); } .mk .mk-row-k { font-family: var(--font-display); font-size: var(--step-0); color: var(--accent); font-weight: 500; margin: 0; } .mk .mk-row-v { font-size: var(--step-1); font-weight: 300; line-height: 1.42; color: var(--text); max-width: 44ch; margin: 0; } .mk-row-v em { font-style: normal; color: var(--text-2); } /* ── chips ────────────────────────────────────────────────────────────────── */ /* ⛔ `margin-block: 0`, NEVER `margin: 0`. This class is worn BY a `.mk-wrap` on the * front door, and `.mk-wrap`'s centring is `margin-inline: auto`. The shorthand * `margin: 0` is defined later in this file at equal specificity, so it won its own * gutter away and the band rendered flush against the left edge of the viewport * while every other band stayed centred. Seen in a rendered capture; a DOM probe * would have reported the element present and correct. */ .mk .mk-chip-row { display: flex; flex-wrap: wrap; gap: .6rem .7rem; align-items: center; margin-block: 0; padding: 0; list-style: none; } .mk-chip-row li { margin: 0; } .mk-chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; font-size: var(--step--1); color: var(--text-2); text-decoration: none; background: var(--panel); transition: border-color .18s ease, color .18s ease; } a.mk-chip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .mk .mk-chip-lead { font-size: var(--step--1); color: var(--text-3); margin: 0; } /* ── cards ────────────────────────────────────────────────────────────────── */ .mk-grid { display: grid; gap: 1.1rem; } .mk-grid-4 { grid-template-columns: repeat(4, 1fr); } .mk-grid-3 { grid-template-columns: repeat(3, 1fr); } .mk-grid-2 { grid-template-columns: repeat(2, 1fr); } .mk-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.5rem 1.6rem; } .mk-card h3 { font-size: 1.16rem; margin: 0 0 .55rem; letter-spacing: -.02em; } .mk-card h4 { font-size: 1.02rem; margin: 0 0 .5rem; letter-spacing: -.015em; } .mk-card p { font-size: .95rem; color: var(--text-2); margin: 0 0 .7rem; } .mk-card p:last-child { margin-bottom: 0; } .mk-card-lit { border-color: var(--line); background: var(--panel-2); } .mk-step .mk-step-n { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; } /* ── the key/value list — a page's detail, without card noise ─────────────── */ .mk-kv { display: grid; gap: 0; margin: 1.8rem 0 0; } .mk-kv-row { display: grid; gap: .35rem 2.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line-soft); } @media (min-width: 760px) { .mk-kv-row { grid-template-columns: 16rem minmax(0, 1fr); } } .mk-kv-row:last-child { border-bottom: 1px solid var(--line-soft); } .mk .mk-kv-k { font-family: var(--font-display); font-weight: 500; color: var(--text); margin: 0; font-size: 1.02rem; } .mk .mk-kv-v { color: var(--text-2); margin: 0; font-size: .97rem; line-height: 1.55; } .mk-kv-v + .mk-kv-v { margin-top: .6rem; } .mk-kv-v strong { color: var(--text); } /* ── quote, note, tag ─────────────────────────────────────────────────────── */ .mk .mk-quote { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.45; color: var(--text); background: var(--panel); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: 10px; padding: 1.3rem 1.5rem; margin: 0 0 1.2rem; } .mk .mk-note { border-left: 3px solid var(--amber); background: var(--amber-bg); border-radius: 0 8px 8px 0; padding: .9rem 1.2rem; margin: 0 0 1em; color: var(--text-2); font-size: .95rem; } .mk-note strong { color: var(--text); } .mk-tag-built { display: inline-block; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-ghost); background: var(--accent-ghost); border-radius: 999px; padding: .18rem .6rem; margin-left: .5rem; vertical-align: .18em; } /* ── the completeness strip ───────────────────────────────────────────────── */ .mk .mk-closing { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -.028em; line-height: 1.15; color: var(--text); max-width: 26ch; margin: 0; } /* ── the product shot ─────────────────────────────────────────────────────── */ /* ⛔ THE CLASS NAME AND THE FLAT STRUCTURE ARE BOTH CONTRACTS. * tests/cairn/cairn_site_shots.test.js matches `
— never a * wrapper element. Renaming the class blinds the whole test file (s0b). */ .mk-shot { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .9); } .mk-shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line-soft); } .mk-shot-tag { align-self: flex-start; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--accent-ghost); border-radius: 999px; padding: .22rem .7rem; margin: .95rem 1.1rem 0; } .mk .mk-shot-cap { font-size: .84rem; color: var(--text-3); margin: .55rem 1.1rem 1.1rem; line-height: 1.45; } .mk-shot-wide { margin-top: clamp(2rem, 5vw, 3rem); } /* A two-up: prose beside a shot. */ .mk-split { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; } @media (min-width: 940px) { .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } @media (min-width: 940px) { .mk-split-flip > *:first-child { order: 2; } } /* .mk-split gives the SECOND column the extra width, which is right when that column * holds a screenshot and wrong when it holds a diagram beside a block of prose. The * prose variant reverses the ratio; nothing else about the split changes. */ @media (min-width: 940px) { .mk-split-prose { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } } /* ── the on-page contents rail ────────────────────────────────────────────── */ .mk .mk-toc { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 0; padding: 0; list-style: none; } .mk-toc li { margin: 0; } /* ── footer ───────────────────────────────────────────────────────────────── */ .mk-foot { border-top: 1px solid var(--line-soft); padding: 3rem 0 3.5rem; margin-top: 0; } .mk-foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.4rem; } .mk-foot .mk-brand { font-size: 1.4rem; gap: .55rem; } .mk-foot .mk-mark { width: 1.8rem; height: 1.8rem; } .mk-foot h4 { font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .9rem; } .mk-foot ul { list-style: none; padding: 0; margin: 0; } .mk-foot li { margin: 0 0 .6rem; } .mk-foot a { color: var(--text-2); font-size: var(--step--1); text-decoration: none; } .mk-foot a:hover { color: var(--text); text-decoration: none; } .mk .mk-foot-tag { font-size: var(--step--1); color: var(--text-3); max-width: 34ch; margin: 1.1rem 0 0; } .mk-foot-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 2.4rem 0 1.4rem; } .mk .mk-foot-fine { font-size: var(--step--1); color: var(--text-3); margin: 0; } /* ── responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .mk-grid-4 { grid-template-columns: repeat(2, 1fr); } .mk-grid-3 { grid-template-columns: repeat(2, 1fr); } .mk-foot-cols { grid-template-columns: 1fr 1fr; } } /* ── the mobile menu ──────────────────────────────────────────────────────── */ /* ⛔ CSS ONLY, AND THAT IS A CONSTRAINT RATHER THAN A PREFERENCE. This site ships a * strict CSP (script-src 'self') and /security tells readers, in visible copy, that * there are no inline event handlers anywhere. A checkbox and its label need neither, * so the menu works with JavaScript disabled and cannot weaken the sentence the * security page makes. The toggle is a real focusable input with an aria-label, not a * div listening for clicks. * ⚑ MEASURED, which is why it exists: at 390x844 the five-item nav wrapped to two * rows, the header stood 168px tall, and the h1 started at y=267 — a third of a phone * screen spent on chrome before the headline. */ .mk-nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .mk-burger { display: none; } @media (max-width: 760px) { .mk-top { gap: 1rem 1.2rem; padding-top: 1.1rem; } .mk-brand { font-size: 1.65rem; gap: .55rem; } .mk-mark { width: 2.1rem; height: 2.1rem; } /* the control: 44px of touch target, which is the floor worth honouring */ .mk-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; order: 2; width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; } .mk-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text); transition: transform .2s ease, opacity .15s ease; } .mk-nav-toggle:focus-visible + .mk-burger { outline: 2px solid var(--accent); outline-offset: 2px; } /* open state: the bars become a cross */ .mk-nav-toggle:checked + .mk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mk-nav-toggle:checked + .mk-burger span:nth-child(2) { opacity: 0; } .mk-nav-toggle:checked + .mk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ⛔ SCOPED TO `.mk-nav-toggle ~`, NOT A BARE `.mk-nav`, AND THAT IS LOAD-BEARING. * nginx sends no Cache-Control, so a returning phone can hold the PREVIOUS `/` — which has * no toggle in it — while fetching this stylesheet fresh. A bare `.mk-nav { display:none }` * matches that old markup too, and with no checkbox to tick, the nav and both buttons are * hidden with NO WAY TO OPEN THEM: a header containing only the logo. * MEASURED, not reasoned: the pre-burger index.html rendered against this file at 390x844 * reported navDisplay none, ctaDisplay none, burgerExists false, 0 visible links. * The sibling combinator makes the whole mobile-menu behaviour conditional on the toggle * actually being in the document, so old markup falls through to the pre-burger layout. */ .mk-nav-toggle ~ .mk-nav { display: none; } .mk-nav-toggle:checked ~ .mk-nav { display: flex; flex-direction: column; align-items: flex-start; order: 4; width: 100%; gap: 0; margin: .4rem 0 0; padding: .4rem 0 .2rem; border-top: 1px solid var(--line-soft); } .mk-nav-toggle:checked ~ .mk-nav a { width: 100%; padding: .85rem .1rem; font-size: var(--step-0); border-bottom: 1px solid var(--line-soft); } /* the two buttons ride inside the opened panel rather than crowding the top row — scoped to the toggle's presence for the same reason as the nav above */ .mk-nav-toggle ~ .mk-top-cta { display: none; } .mk-nav-toggle:checked ~ .mk-top-cta { display: flex; order: 5; width: 100%; gap: .7rem; margin: 1rem 0 .2rem; } .mk-nav-toggle:checked ~ .mk-top-cta .mk-btn { flex: 1; text-align: center; } .mk-grid-4, .mk-grid-3, .mk-grid-2 { grid-template-columns: 1fr; } .mk-hero .mk-sub { max-width: none; } .mk-proof-inner { gap: 1rem 2rem; } .mk-foot-cols { grid-template-columns: 1fr; gap: 1.8rem; } .mk-closing { max-width: none; } } /* ⚑ REDUCED MOTION STILL SHOWS THE WHOLE HERO. `animation: none` on an element * whose resting state is opacity 0 would reproduce the blank hero for exactly the * readers least able to afford it, so opacity and transform are reset here too. */ @media (prefers-reduced-motion: reduce) { .mk-cairn .mk-stone, .mk-cairn .mk-seam, .mk-cairn .mk-note-line, .mk-cairn .mk-verdict { animation: none; opacity: 1; transform: none; } .mk-cairn .mk-stone-cap { box-shadow: 0 0 0 .42rem var(--accent-ghost); } .mk * { transition-duration: .01ms !important; } }