/* styles.css - company-registration-austria.com
 *
 * The component layer. Contract: DESIGN.md sections 4, 5 and 6.
 * Values come from tokens.css; nothing here invents a colour, size or radius.
 *
 * Three things the harvest could NOT give us, derived from the system's own logic and
 * marked below, so nobody looks for them in drafts/design-harvest/:
 *   - tables      (zero on all four captured pages, and client rule R6 makes one mandatory per page)
 *   - accordions  (zero captured; the FAQ is a native <details>)
 *   - mobile nav  (the reference has no burger; this site has eight nav items, so we add one)
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  padding-top: var(--header-h);
}

/* ---------- Layout primitives ---------- */

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide  { max-width: var(--container-wide); }
.wrap--prose { max-width: var(--container-prose); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) / 2); }
.section--surface { background: var(--surface); }

/* The hairline is the structural element of this system. */
.rule { border: 0; border-top: var(--rule-weight) solid var(--rule); margin: 0; }
.rule--soft { border-top-color: var(--rule-soft); }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  margin: 0 0 var(--s-5);
  color: var(--ink-strong);
  /* This site prints German compound nouns at display size: Zweigniederlassung,
     Beitragsgrundlage, Grundaufzeichnungen, Wirtschaftstreuhandberufsgesetz. At 390px one of them
     is wider than the viewport and pushes the whole page sideways.
     `hyphens: auto` was tried first and rejected: the page is `lang="en"`, so the browser applied
     ENGLISH hyphenation to every heading and broke ordinary words, "you say yes" becoming
     "un-til you say yes". `overflow-wrap: break-word` fires only when a single word genuinely
     cannot fit, which is exactly the German-compound case and never the English one. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
h2 { font-size: var(--t-h2);      line-height: var(--t-h2-lh);      letter-spacing: var(--t-h2-ls); }
h3 { font-size: var(--t-h3);      line-height: var(--t-h3-lh);      letter-spacing: var(--t-h3-ls); }
h4 { font-size: var(--t-h4);      line-height: var(--t-h4-lh);      font-weight: 500; }

p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--t-lede); line-height: var(--t-lede-lh); }
.small, figcaption { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--muted); }

/* The mono micro-label is this design's signature.
   NOTE: it must never carry a founding date or any claim about the firm (no-invention rule);
   ours carry subject and jurisdiction. See DESIGN.md section 2. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-5);
}
.label--rule { display: flex; align-items: center; gap: var(--s-4); }
/* The kicker rule carries the mandatory secondary heritage colour, Habsburg gold. It is
   decorative at 2.95:1 and never carries meaning on its own. */
/* THE FLAG, NOT THE FURNITURE. This 44px dash was Habsburg gold and it was the ONLY piece of colour
   with any structural job on the page. Measured 2026-09-18: the accent carried 1.7% of the painted
   weight of a page against 7% on the reference, and never once as a background. The owner read that
   as washed out and was right. The dash is now flag red and 3px, and it opens every section. */
.label--rule::before { content: ""; width: 56px; height: 3px; background: var(--accent); flex: none; }

/* Used once per page at most, on the H1. Never in body copy. */
.accent-italic { font-style: italic; font-weight: 500; color: var(--accent); }

a { color: var(--ink-strong); text-decoration: none; }
/* A link inside a card or a step was rendering at #000 against #1a1a1a body text with no underline,
   which is a 1.1:1 difference: indistinguishable from ordinary words. Cards carry most of this
   site's internal linking, so this was the worst place for it. */
.card a, .step a, .section__lead a, .hero__body a, .faq__a a, figcaption a {
  color: var(--accent-ink); text-decoration: none; transition: color var(--t-fast);
}
.card a:hover, .step a:hover, .section__lead a:hover, .hero__body a:hover,
.faq__a a:hover, figcaption a:hover { text-decoration: underline; }
.hero__body .btn, .card .btn, .cta a.btn { color: var(--accent-contrast); }
.btn--secondary, .cta a.btn--on-dark { color: var(--ink-strong); }
.prose a, a.link { color: var(--accent-ink); text-decoration: none; transition: color var(--t-fast); }
.prose a:hover, a.link:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* 736px was ~62 characters at this size, which is a fine measure and a bad column: it sat at no
   particular fraction of the 1320px grid, so it read as an accident. 880px is ~74 characters, still
   inside the comfortable band, and it lands on the grid. */
.prose { max-width: var(--container-prose); }
.prose > :last-child { margin-bottom: 0; }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: .9em; }

blockquote {
  margin: 0 0 var(--s-5); padding-left: var(--s-5);
  border-left: 2px solid var(--ink-strong); font-size: var(--t-small);
}

/* ---------- Buttons. Every measured variant has radius 0. ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: var(--t-label-ls); text-transform: uppercase;
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn--primary   { background: var(--ink-strong); color: var(--accent-contrast); border-color: var(--ink-strong); }
.btn--primary:hover { background: var(--bg); color: var(--ink-strong); }
.btn--secondary { background: transparent; color: var(--ink-strong); border-color: var(--ink-strong); }
.btn--secondary:hover { background: var(--ink-strong); color: var(--accent-contrast); }
.btn--accent    { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); padding: 16px 32px; }
.btn--accent:hover { filter: brightness(.9); }
.btn--on-dark   { background: var(--bg); color: var(--ink-strong); border-color: var(--bg); }
.btn--on-dark:hover { background: transparent; color: var(--accent-contrast); }
.btn__arrow { font-family: var(--font-text); }

/* ---------- Header ---------- */

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h); background: var(--bg);
  border-bottom: var(--rule-weight) solid var(--rule-soft);
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); height: 100%; }
/* Plain wordmark, no enclosing shape: the square enclosed mark belongs to another site in the batch. */
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: var(--s-5); margin-left: auto; }
.nav a { font-size: .875rem; color: var(--ink); transition: color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-ink); }
.header .btn { margin-left: var(--s-5); }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--ink-strong); padding: 10px 12px; cursor: pointer; }
.burger__bar { display: block; width: 18px; height: 1px; background: var(--ink-strong); }
.burger__bar + .burger__bar { margin-top: 5px; }

/* DERIVED, not harvested: the reference carries no burger. See DESIGN.md section 4. */
.navdrawer {
  position: fixed; inset: var(--header-h) 0 0; background: var(--bg); z-index: 49;
  padding: var(--s-7) var(--gutter); display: none; overflow-y: auto;
}
.navdrawer[data-open="true"] { display: block; }
.navdrawer a { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-soft); }

/* THE BURGER TAKES OVER AT 1199, NOT 1023. Measured 2026-09-18 after the Services item joined the row:
   at 1024 and 1100 the Contact button's right edge landed at 1103px, outside the viewport, and the
   header scrolled sideways. Eight items plus a 254px wordmark and a button need 1280 to sit comfortably;
   below that the drawer holds them, and the drawer now carries the full service list anyway. */
@media (max-width: 1199px) {
  .nav, .header .btn { display: none; }
  .burger { display: block; }
}

/* ---------- Hero. Typographic, no image behind: the photograph lives in a later section. ---------- */

/* Measured against the reference's own hero, which this build was not reproducing.
   Four things carry its character and all four were missing: the mono kicker on a rule, the sheer
   SIZE of the display line, the accent italic clause, and a lede set in the SERIF rather than the
   sans. Without them the page was merely tidy. */
.hero { padding-block: var(--s-9) var(--s-9); }
.hero .label { margin-bottom: var(--s-7); }
.hero h1 { max-width: 15ch; margin-bottom: var(--s-7); }
.hero h1 .accent-italic { display: inline-block; }

.hero__body { max-width: 56ch; }
/* The lede is Fraunces, not Inter Tight. The reference sets its opening paragraph in the display
   face at text size, and that is most of why its hero reads as editorial rather than as a product
   page. */
.hero__body > p:first-of-type {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink-strong);
}
.hero__body ul { list-style: none; padding: 0; margin: var(--s-7) 0 0; max-width: 52ch; }
.hero__body ul li {
  border-top: 1px solid var(--rule-soft); padding: var(--s-4) 0;
  font-size: var(--t-small); display: flex; gap: var(--s-4);
}
.hero__body ul li::before {
  content: counter(heroitem, decimal-leading-zero); counter-increment: heroitem;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  color: var(--muted); flex: none; padding-top: .15em;
}
.hero__body ul { counter-reset: heroitem; }
.hero__body .cta-p { margin-top: var(--s-7); }

/* The section head carries the same rule as the kicker, so a page reads as one system. */
.section > .wrap > h2 { max-width: 20ch; }
/* THE RULE IS WHAT ALIGNS THE PAGE, NOT THE TEXT.
   Measured 2026-09-18 against the reference: it carries 47 black 1px borders and 56 grey ones, and its
   sections all end on the same vertical line because a hairline spans the container under every heading.
   Ours had that rule only under sections that happen to contain a card grid or a table, so a prose
   section ended at the 736px measure and a card section at 1320px, and the right edge jumped by 584px
   from one section to the next. That is the "uneven" the owner saw. Every section heading now carries
   the same full-width rule, so the measure of the text no longer decides where the page ends. */
.section__rule { height: 1px; background: var(--rule); margin: var(--s-5) 0 var(--s-6); }
.cta .section__rule { display: none; }
.section__lead { margin-bottom: var(--s-7); }

/* ---------- Cards. No fill, no border box: cards are separated by hairlines. ---------- */

.cards { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { padding: var(--s-6) var(--s-5) var(--s-7) 0; border-bottom: 1px solid var(--rule-soft); }
.cards--2 .card:nth-child(odd), .cards--3 .card:not(:nth-child(3n)), .cards--4 .card:not(:nth-child(4n)) {
  border-right: 1px solid var(--rule-soft);
}
.cards--2 .card:nth-child(even), .cards--3 .card:nth-child(3n+2), .cards--3 .card:nth-child(3n),
.cards--4 .card:not(:nth-child(4n+1)) { padding-left: var(--s-5); }
.card__index { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); color: var(--accent-ink); display: block; margin-bottom: var(--s-4); }
.card h3, .card h4 { margin-bottom: var(--s-3); font-size: var(--t-h4); font-weight: 500; }
.card > :last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .card { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Steps ---------- */

.steps { border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule-soft); }
.step__n { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); color: var(--accent-ink); padding-top: .4em; }
.step h3 { font-size: var(--t-h4); font-weight: 500; margin-bottom: var(--s-3); }
.step > div > :last-child { margin-bottom: 0; }
@media (max-width: 599px) { .step { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---------- Table. DERIVED: the harvest found zero tables on the reference.
   Client rule R6 makes at least one mandatory on every page. ---------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--s-6); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
thead th {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 500; color: var(--ink-strong); text-align: left;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4) var(--s-3) 0; vertical-align: bottom;
}
tbody td { border-bottom: 1px solid var(--rule-soft); padding: var(--s-4) var(--s-4) var(--s-4) 0; vertical-align: top; overflow-wrap: break-word; }
tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
table th:last-child, table td:last-child { padding-right: 0; }

figure { margin: 0 0 var(--s-6); }
figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
figcaption { margin-top: var(--s-3); }

/* ---------- CTA band. The only inverse surface on the site. ---------- */

/* THE CTA BAND IS THE FLAG. It is the only full-bleed surface on the site and it appears on every
   content page, so it is the one place where Austrian red can carry real area without the page turning
   into a flag, which `references/design-archetypes.md` §3 forbids. It was black; black is not Austria's
   colour and it left the site reading as grey-on-white with pink links.
   #C4121F rather than #ED2939: white on the brighter red measures 3.9:1 and fails AA for body text,
   while white on this one is 6.1:1 and passes. The flag colour stays for rules, markers and the display
   italic, where it is large text and 4.22:1 is enough. */
.cta { background: var(--accent-ink); color: var(--accent-contrast); padding-block: var(--s-8); }
.cta h2 { color: var(--accent-contrast); max-width: 24ch; }
.cta p { max-width: 60ch; color: #ffe3e5; }
.cta a { color: var(--accent-contrast); text-decoration: underline; text-underline-offset: 3px; }
.cta a:hover { text-decoration-thickness: 2px; }
/* /onboarding/ may only ever be the SECOND link in a band. Resolved in master.md. */

/* ---------- FAQ. DERIVED: zero accordions captured. Native <details>, no JS.
   The rendered text must match the FAQPage JSON-LD byte for byte. ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-7) var(--s-5) 0; position: relative;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; line-height: var(--t-h4-lh);
  color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-text); font-size: 1.5rem; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 var(--s-7) var(--s-6) 0; max-width: var(--container-prose); }
.faq__a > :last-child { margin-bottom: 0; }

/* ---------- Forms. Two-column labelled grid on a hairline.
   NOT "single column + summary rail": that archetype belongs to another site in the batch. ---------- */

.form { border-top: 1px solid var(--rule); }
.fieldset { border: 0; margin: 0; padding: var(--s-6) 0; border-bottom: 1px solid var(--rule-soft); }
.fieldset legend { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--muted); padding: 0; }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--t-small); margin-bottom: var(--s-2); color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-text); font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft);
  border-radius: var(--radius-input); padding: 12px 0; min-height: 52px;
  transition: border-color var(--t-base);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--accent); }
.field__help { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-2); }
.field__error { font-size: var(--t-small); color: var(--error); margin-top: var(--s-2); }
/* The honeypot. Must be reachable by nothing: not the eye, not a screen reader, not the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .fields { grid-template-columns: 1fr; } }

/* ---------- Footer. White with black text: the harvest is explicit, and my first draft had this wrong. ---------- */

.footer { background: var(--bg); color: var(--ink); border-top: 1px solid var(--rule); padding-block: var(--s-8) var(--s-6); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.footer h2, .footer h3 { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-3); }
.footer a { font-size: var(--t-small); color: var(--ink); }
.footer a:hover { color: var(--accent-ink); }
.footer__base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-soft); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 899px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .footer__cols { grid-template-columns: 1fr; } }

/* Table heads take the black hairline the reference uses, not the pale grey one. Measured: the
   reference splits its borders 47 black to 56 grey; ours ran 48 to 134, which is why the page read as
   grey. The grey stays for row separators, where a black line every row would be noise. */
table thead th { border-bottom: 2px solid var(--rule); }

/* ---------- Breadcrumb, sources, utilities ---------- */

.crumbs { font-size: var(--t-small); color: var(--muted); padding-block: var(--s-5) 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--s-3); z-index: 100; background: var(--bg); padding: var(--s-3) var(--s-4); border: 1px solid var(--ink-strong); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Six elements on the reference carry a CSS reveal. Kept minimal and motion-safe. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); animation: reveal .7s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* ---------- Related pages ----------
   The block between <!-- interlinks:start --> and <!-- interlinks:end -->, written by build.mjs and
   rebuilt weekly by rebuild-interlinks.mjs (client rule R9). It is the last thing on a content page,
   below the CTA band, and it is navigation rather than reading: mono label, hairline rules, no card,
   no shadow, square corners, in keeping with the rest of the system. */
.related-links {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--s-8) var(--s-9);
  border-top: 1px solid var(--rule);
}
.related-links__title {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-ls); text-transform: uppercase; font-weight: 500;
  color: var(--muted); margin: 0 0 var(--s-5);
}
.related-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
.related-links__list li { border-top: 1px solid var(--rule-soft); }
.related-links__list li:nth-child(-n+2) { border-top: 0; }
.related-links__list a {
  display: block; padding-block: var(--s-4); font-size: var(--t-body);
  color: var(--ink-strong); text-decoration: none;
}
.related-links__list a:hover { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 3px; }
@media (max-width: 719px) {
  .related-links__list { grid-template-columns: 1fr; }
  .related-links__list li:nth-child(2) { border-top: 1px solid var(--rule-soft); }
}

/* ---------- Services dropdown ----------
   Nineteen service pages had no route from the header. A <details> carries the panel so it opens from
   the keyboard and on touch, not only under a mouse; the hover rules below are an addition to that, not
   the mechanism. The panel is full-bleed with a hairline top and bottom, which is how the reference
   handles every band, and it uses the same mono column labels as the footer. */
.nav__svc { position: static; }
.nav__svc > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; color: var(--ink); transition: color var(--t-fast);
}
.nav__svc > summary::-webkit-details-marker { display: none; }
.nav__svc > summary:hover, .nav__svc[open] > summary,
.nav__svc[data-current="true"] > summary { color: var(--accent-ink); }
.nav__caret {
  width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast);
}
.nav__svc[open] .nav__caret { transform: rotate(-135deg) translateY(-2px); }
.nav__panel {
  position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--bg);
  border-top: 1px solid var(--rule-soft); border-bottom: 2px solid var(--accent);
  padding-block: var(--s-7); z-index: 60;
}
.nav__panel-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7); }
.nav__panel h3 {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0 0 var(--s-4);
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin-bottom: var(--s-3); }
.nav__panel a { font-size: var(--t-small); color: var(--ink-strong); text-decoration: none; }
.nav__panel a:hover, .nav__panel a[aria-current="page"] {
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
/* Pointer users get it on hover; everyone else gets it on click or focus, which is what <details> does
   on its own. Guarded so a touch device does not open the panel under a finger that is only scrolling. */
.nav__svc:not([open]) > .nav__panel { display: none; }
@media (hover: hover) and (min-width: 1200px) {
  .nav__svc:hover > .nav__panel, .nav__svc:focus-within > .nav__panel { display: block; }
}
.navdrawer__group {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--t-label-ls);
  text-transform: uppercase; color: var(--muted); margin: var(--s-6) 0 var(--s-3);
}
.navdrawer__group:first-child { margin-top: 0; }
@media (max-width: 1199px) { .nav__svc { display: none; } }