/* TMK accessibility utilities — shared across every page. */
.tmk-skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 18px;background:var(--color-surface-raised);color:var(--color-text-primary);font-family:var(--font-structure);font-size:var(--text-caption);font-weight:var(--weight-structure-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;text-decoration:none;border-radius:0 0 var(--radius-soft) 0;box-shadow:var(--elevation-overlay)}
.tmk-skip-link:focus{left:0;outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
/* Single-purpose VISIBILITY utility — it decides which viewports an element exists in, and it
must decide nothing else.

It used to do it the other way round: display:none!important at all widths, then
.tmk-mobile-only:not([hidden]){display:inline-flex!important} to switch it back on below 1024px.
The !important was load-bearing (the enforced layer chain in inc/enqueue.php puts utilities BEFORE
components and layout, so a one-class utility cannot win an equal-specificity tie against
.tmk-icon-btn in css/layout/header.css) — but forcing a LAYOUT value in order to win a VISIBILITY
argument broke the one element it was applied to that is not a row item: the mobile-nav Drawer.
.tmk-drawer is position:fixed, so nothing blockifies it; below 1024px the aside was therefore
turned into an inline-flex CONTAINER, its <nav> became a shrink-to-fit flex item, and the whole
mobile navigation rendered 206px wide and offset 60px from the drawer's left edge inside a 340px
panel. (The old comment's "in a flex row parent inline-flex is blockified" is true of the
hamburger, which does sit in .tmk-header__utility, and only of the hamburger.)

Inverted: hide on desktop, assert nothing anywhere else. Below 1024px the utility now contributes
no display at all, so every element it is applied to keeps the display its own component declared
— .tmk-icon-btn stays inline-flex, .tmk-drawer stays the block it has always needed to be — and
the drawer's open/closed contract (.tmk-drawer[hidden]{display:none} in css/components/drawer.css)
is untouched, which also retires the :not([hidden]) guard that only existed to stop this rule
holding the drawer permanently open. !important is still required in the one place it does work:
beating .tmk-icon-btn's display from a layer that prints earlier. */
@media (min-width: 1024px) {
.tmk-mobile-only { display: none !important; }
}

/* Screen-reader-only text. Exact port of the SR_ONLY style object used by Claude Design's page
   files (pages/Homepage.jsx et al) for headings that must exist in the accessibility tree and the
   document outline but must not appear on the cream stage - e.g. the Homepage H1, whose visible
   counterpart is the hero illustration artwork itself. `clip` is kept (not `clip-path`) to match
   the design source byte-for-byte; `white-space:nowrap` stops a long headline collapsing into a
   1px column and re-introducing a scrollbar. */
.tmk-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}