/* ============================================================================
   Augurea · base.css — reset, layout primitives, header/nav/drawer, hero, section
   heads, generic states, shared form controls, footer, messages.
   Loaded globally after tokens.css. Page-specific rules live in their page file.

   Migrated 1:1 from the legacy stylesheet with the Slice-4 palette applied and gold
   DEMOTED: burgundy is the single accent (links/focus/active), warm-grey carries
   labels/eyebrows, gold survives only on the Colección tier badge (components.css).
   ============================================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-grey)}

/* focus visible on everything (a11y §2.2) — accent ring, not gold */
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
button,input{font:inherit}

/* ---------- skip-to-content (a11y FX-6.1) ---------- */
/* Off-canvas until focused; keyboard-only. Reuses the site's one accent for the
   focus ring, matching :focus-visible above. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200}
.skip-link:focus-visible{left:8px;top:8px;background:var(--surface);color:var(--ink);
  padding:10px 16px;outline:2px solid var(--burgundy);outline-offset:3px}

/* Development-site notice (settings.DEV_SITE_BANNER_ENABLED) — a static strip
   above the sticky header; scrolls away on use, visible on every fresh load. */
.dev-banner{background:var(--burgundy-deep,#4A1622);color:#F7EFEA;text-align:center;
  font-size:11px;line-height:1.45;letter-spacing:.04em;padding:7px 16px;
  border-bottom:1px solid var(--burgundy,#591C2A)}

/* "View in English" (T3, ronda SEO/GEO 2026-10-07) — a slim, right-aligned line
   above the header, born `hidden` and shown by augurea-core.js only to a browser
   that prefers English. Scrolls away with the page like .dev-banner. */
.lang-hint{display:flex;justify-content:flex-end;align-items:center;gap:12px;
  padding:6px clamp(20px,4vw,48px);font-size:12px;line-height:1.4;letter-spacing:.04em;
  color:var(--warm-grey);border-bottom:1px solid var(--line)}
.lang-hint[hidden]{display:none}
.lang-hint a{color:var(--burgundy);text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.stock-promotion{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;
  font-size:13px;line-height:1.5;color:var(--muted)}
.stock-promotion-label{font-size:10px}
.stock-promotion-discount{color:var(--burgundy)}

.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.22em;padding-left:.22em;color:var(--burgundy)}
/* .brand span wraps the Sello lituus (currentColor); on the light header it reads
   burgundy — the signature the brief reserves for the seal. Footer override below. */
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--burgundy)}
.nav{display:flex;align-items:center;gap:30px;font-size:14px;letter-spacing:.02em}
/* Nav link: burgundy hairline underline that scales in from the left on hover/focus
   (BRAND_BRIEF: "nav links get a red underline that scales in"). Transform-only, so
   no reflow; ::after is out of flow so nothing shifts when it draws. */
.nav a{position:relative;padding:6px 0;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--burgundy);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid,.4s) var(--ease-out,ease)}
.nav a:hover,.nav a:focus-visible{color:var(--burgundy)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr-actions{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.hdr-actions a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
.hdr-actions .hdr-search-icon{display:none;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;color:var(--warm-grey);transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.hdr-search-icon:hover,.hdr-search-icon:focus-visible{color:var(--burgundy)}
.hdr-search-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* R19-K account door, compact presentation (owner report 2026-09-15: "en pantallas
   chicas no se ve la opción de crear cuenta o iniciar sesión"). The TEXT link next
   to it is .desktop-only, so below 940px the bar offered no account door at all.
   Same slot and same register as .hdr-search-icon above.
   40x44, not 44x44: the height is the axis a thumb misses and it keeps the 44px
   floor in every band; the WIDTH is what the row has to pay for, and the measured
   budget below only affords 40 — the same 40 the house already gives the search
   icon. Switched on ONLY in the <=460px band: see the budget note there. */
.hdr-actions .hdr-acct-mobile{display:none;align-items:center;justify-content:center;width:40px;height:44px;min-height:44px;color:var(--warm-grey);transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.hdr-acct-mobile:hover,.hdr-acct-mobile:focus-visible{color:var(--burgundy)}
.hdr-acct-mobile svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Lang toggle stays a horizontal inline pair (ES / EN), never stacks; the cart link
   above never wraps — the header holds one clean row down to 375px. Anchors keep the
   motion underline-draw below. */
.langtog{display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto}
/* Language toggle gets the same underline draw so switching locale reads as a nav act.
   FX-5.4: the bare "ES"/"EN" glyphs are only ~20px wide — well under a usable tap
   target. Padding grows each link's hit area to ~32-40px without changing the
   visual glyph size (the underline below already spans the padded box). */
.langtog a{position:relative;color:var(--warm-grey);padding:8px 6px;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.langtog a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--burgundy);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid,.4s) var(--ease-out,ease)}
.langtog a:hover::after{transform:scaleX(1)}
.langtog a.on{color:var(--burgundy);font-weight:600}
.burger{display:none;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* mobile drawer */
/* Responsive fix (owner report 2026-09-13, DIAG-responsive.md): inset:0 already
   caps the panel to the viewport, but with no overflow-y the nav overflow
   rendered off-box with no gesture able to reach it (wheel/touch-drag/forced
   scrollTop all measured as no-ops on iPhone SE/12 in the diagnosis). Same
   pattern already used by .consent-banner (consent.css) and
   .drawer .sr-panel-inline (search-menu.css:70) for the same kind of capped
   flex-column overlay. */
.drawer{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:20px 24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* FX-2.1: Alpine x-transition classes (transform/opacity only) so the panel the
   primary mobile nav control fades+lifts in/out instead of a raw display flip. */
.drawer-t{transition:opacity var(--dur-mid,.4s) var(--ease-out,ease),transform var(--dur-mid,.4s) var(--ease-out,ease)}
.drawer-t-start{opacity:0;transform:translateY(-8px)}
.drawer-t-end{opacity:1;transform:translateY(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:52px}
.drawer nav{display:flex;flex-direction:column;margin-top:10px}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:24px;min-height:44px}
.drawer nav a span{font-family:var(--mono);font-size:14px;color:var(--warm-grey)}
/* R19-K: the catalog-posture line that says WHEN accounts open. Deliberately not
   a nav row — no border, no arrow, no hover — because it is not a door. It sits
   ABOVE the nav list (corrector 2026-09-15): at ~70px a row it was landing ~930px
   into a panel the house had already measured shorter than the screen, so it
   explained the missing doors to nobody who had not already scrolled past them. */
.drawer-note{margin:14px 0 2px;font-size:12px;letter-spacing:.06em;line-height:1.5;color:var(--warm-grey)}
.x{background:none;border:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;cursor:pointer;min-height:44px;padding:0 6px}

/* ---------- hero ---------- */
.hero{padding:64px 0 16px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.01em;margin:24px 0}
.hero p{max-width:38ch;color:var(--muted);font-size:17px;margin-bottom:28px}

/* ---------- section heads ---------- */
/* Vertical rhythm only: horizontal gutter comes from .wrap's padding-inline so the
   shorthand's 0 no longer overrides it (content would otherwise touch the edge). */
.sec{padding-block:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.01em}
.sec-head a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy);border-bottom:1px solid var(--burgundy);padding-bottom:3px}
/* FX-1.2: below ~480px the flex row splits the heading's width with the trailing
   "Ver todo…" link, forcing 2-3 line wraps at body's inherited 1.5 line-height even
   after the h2-only override above. Stack so the heading gets its full row width. */
@media(max-width:480px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- generic states (loading / empty / error) ---------- */
.state{padding:80px 0;text-align:center;color:var(--muted)}
.state h3{font-family:var(--serif);font-size:28px;color:var(--ink);margin-bottom:10px}

/* ---------- messages (Slice 3) ---------- */
.msgs{margin:18px auto 0;display:flex;flex-direction:column;gap:8px}
.msg{font-size:14px;padding:12px 16px;border:1px solid var(--line-2);background:var(--surface)}
.msg-success{border-color:var(--good);color:var(--good)}
.msg-error{border-color:var(--burgundy);color:var(--burgundy)}
.msg-warning{border-color:var(--gold-ink);color:var(--gold-ink)}   /* warn = amber status (AA-safe), not decorative gold */

/* ---------- forms (auth · account · checkout) ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15px;padding:12px 13px;border:1px solid var(--line-ui);background:var(--surface);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--burgundy);outline-offset:1px}
.field-err{font-size:12px;color:var(--burgundy)}
.field-help{font-size:11px;color:var(--muted);line-height:1.45}
.field-help ul{margin:0;padding-left:16px}
.field-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);margin-bottom:18px;cursor:pointer}
.field-check input{width:16px;height:16px;accent-color:var(--burgundy);margin-top:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-block{width:100%;justify-content:center}
.link-btn{background:none;border:0;color:var(--burgundy);text-decoration:underline;cursor:pointer;font-size:13px;padding:0;font-family:inherit}
.link-btn:hover{color:var(--burgundy-deep)}
.form-msg{font-size:13px;padding:11px 14px;border:1px solid var(--line-2);margin-bottom:16px}
.form-msg-error{border-color:var(--burgundy);color:var(--burgundy)}
.form-msg-warn{border-color:var(--gold-ink);color:var(--gold-ink)}
.inline-resend{display:inline;margin-left:4px}

/* ---------- footer ---------- */
.ftr{background:var(--burgundy);color:var(--cream);margin-top:72px}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px 40px}
.ftr .brand b{color:var(--cream)}
.ftr p{color:var(--cream-2);max-width:34ch;margin-top:14px;font-size:14px}
.ftr h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.ftr a{color:var(--cream-2);font-size:14px;display:block;padding:5px 0}
.ftr a:hover{color:var(--cream)}
.ftr-legal{border-top:1px solid rgba(242,239,234,.16);padding:18px 40px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cream-2)}
/* FX-7.5: legal links share the .ftr-legal line, so override .ftr a's block
   display (line above) to stay inline text-links here. */
.ftr-legal a{display:inline;color:var(--cream-2);text-decoration:underline;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.ftr-legal a:hover,.ftr-legal a:focus-visible{color:var(--cream)}

/* ---------- legal pages (Aviso de Privacidad / Términos — FX-7.5) ---------- */
.legal-page{max-width:74ch}
.legal-page h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.01em;margin:10px 0 6px}
.legal-updated{display:block;margin-bottom:32px}
.legal-section{margin-top:48px}
.legal-section h2{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:10px}
.legal-section p{color:var(--muted);font-size:15px;line-height:1.65}
/* Status header while the shop is a catalogue (Términos) + the real cookie table
   (Aviso de Privacidad). Both are plain flow content: no inline style, no script. */
.legal-status{margin:0 0 32px;padding:12px 14px;border-left:3px solid var(--burgundy);background:var(--cream);color:var(--ink);font-size:14px;line-height:1.6}
.legal-table{width:100%;border-collapse:collapse;margin:16px 0 4px;font-size:14px;line-height:1.55;color:var(--muted)}
.legal-table th,.legal-table td{border:1px solid var(--line-2);padding:8px 10px;text-align:left;vertical-align:top}
.legal-table thead th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--cream)}
.legal-table tbody th{font-weight:400;white-space:nowrap}
.legal-table code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
/* Listas rotuladas del aviso: finalidades necesarias / adicionales (privacidad-7)
   y los requisitos de una solicitud ARCO (privacidad-9). Contenido de flujo puro:
   ni estilo en línea ni script, como el resto de estas páginas. */
.legal-list-title{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:18px 0 8px}
.legal-list{margin:0 0 8px;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.65}
.legal-list li{margin-bottom:6px}
/* Aviso corto bajo los formularios que recaban datos (privacidad-3). */
.form-privacy-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ---------- header + drawer search (chrome-level inputs) ---------- */
.hdr-search input,.drawer-search input{font-family:var(--mono);font-size:12px;padding:9px 12px;border:1px solid var(--line-2);background:var(--surface);min-width:200px;min-height:40px}
.hdr-search input:focus,.drawer-search input:focus{outline:2px solid var(--burgundy);outline-offset:2px}
.drawer-search{margin:12px 0 4px}.drawer-search input{width:100%;font-size:15px;padding:13px 14px}

/* ---------- shared responsive (chrome) ---------- */
/* ES chrome labels run wider than EN; tighten header gaps AND collapse the full
   search field to its icon in the SAME band, so the row stays clean at 1280px
   while leaving lang/cart nowrap rules untouched (P12-V2 9.4 fix: an audit at
   1280px measured innerWidth 1280 / clientWidth 1265 / scrollWidth 1277 -- 12px
   of real horizontal overflow, reproduced empirically in this pass -- because
   the search field only used to collapse below 1250px, after the row had
   already overflowed its own 1265px intrinsic clientWidth at 1280px. Collapsing
   the search here instead removes its ~200px min-width from the row BEFORE the
   overflow point is reached, without any overflow-x:hidden band-aid.
   1350 not 1320 (leader micro-fix, same pass): the disclosed residual band —
   1321-1345px still overflowed ~16-25px with the search expanded (hdr-actions
   measured right:1331 at 1330w) — sits INSIDE the expanded-search regime, so
   the collapse point moves above it; ≥1351 the row fits with room. */
@media(max-width:1350px){
  .hdr-top{gap:18px}
  .nav{gap:24px}
  .hdr-actions{gap:14px}
  .hdr-search{display:none}
  .hdr-actions .hdr-search-icon{display:inline-flex}
}
/* Tight low band only: account/login text yields here, still reachable in footer
   and the burger drawer; gaps shrink to keep the row within 821px. */
@media(max-width:940px){
  .hdr-actions a.desktop-only{display:none}
  /* R19-K measured (corrector 2026-09-15; ceiling corrected 2026-09-15 once the
     461-500 fix landed): the compact door is deliberately NOT switched on here,
     even though the text link yields here. From 501px up this row still carries
     the 24px wordmark AND the language toggle, and a 40px box would eat the room
     that row has left. The 461-500 band used to carry both too and was over
     budget (446.6px measured against the 421px .wrap gives at 461px; pre-existing
     in main, found during R19-K); it is fixed at @500 below, which drops the
     toggle. Below 461px the toggle yields and the wordmark shrinks, and there the
     door fits with measured room: see @460. */
  .hdr-top{gap:12px}
  .nav{gap:20px}
  .hdr-actions{gap:12px}
}
@media(max-width:820px){.nav,.hdr-actions .desktop-only,.hdr-actions .hdr-search-icon{display:none}.burger{display:flex}.ftr-in{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr-in{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}
/* 461-500px, MEASURED (catalog.test_header_row_budget; no browser: boxes from
   this file, text advances from the repo woff2 via fontTools). The burger is on
   and .nav is off from 820 down, but the wordmark was still the 24px/.22em desktop
   mark (158.76px for AUGUREA, plus the 28px seal) and the header's language
   toggle was still on the row, while the 460 block below -- the one that shrinks
   the mark and drops the toggle -- starts one pixel lower. At 461px the row
   summed 446.60px with a one-item cart and 454.52px with a two-digit count
   against the 421px .wrap leaves: 26-34px over. Pre-existing in main, found
   during R19-K, introduced by no release: the band fell between the July <=460
   fix and the burger block. What yields is the toggle, not the mark -- the July
   ruling at 460 applied one band up: from the burger on the drawer carries its
   own .langtog, so this copy is a duplicate. Without it the row sums
   355.16/363.08px here, 58px spare at 461. 500 and not 489: with the two-digit
   count the row WITH the toggle first clears the 5px floor at 500px (5.48px),
   and 500 is also the knee of .wrap's clamp(20px,4vw,48px) -- above it the
   gutter scales with the window, below it is fixed. This one rule now carries
   the whole yield: the identical copy that lived in the 460 block below (July
   2026, verified in-engine: +63px at 320-383w) was folded in here once this
   lane and the R19-K account-door lane both landed, so the toggle is switched
   off in exactly one place. Never overflow-x:hidden. */
@media(max-width:500px){
  .hdr-actions>.langtog{display:none}
}
/* Small phones (<=460px): the logo + burger + cart + lang budget exceeds the row,
   so tighten the gaps and scale the wordmark to keep the header one clean line. The
   cart link and lang toggle already nowrap; the burger keeps its 44px touch target. */
@media(max-width:460px){
  /* R19-K ROW BUDGET, measured (corrector 2026-09-15). No browser was opened for
     it: the advance widths come from the repo's own woff2 (fontTools is a pinned
     dependency, requirements.txt:50) and every box from the rules right here, so
     the row is arithmetic, and catalog.test_account_visibility re-runs that
     arithmetic on every suite. ES is the worst case ("Carrito · N" is wider than
     "Cart · N"). .wrap gives vw-40px in this band; the row is burger 44 + seal 22
     + brand gap 6 + wordmark + two row gaps + door + action gap + cart 87.12.
     AUGUREA measures 106.47px at 18px/.12em and 92.40px at 16px/.1em.
     With the old 18px wordmark and 12px gaps the sum was 347.75px against the
     335px available at 375px wide: the door did NOT fit on the very phones the
     owner reported. So this band pays for it — the wordmark takes the 16px
     treatment the house already ships one band down, and the gaps take 8px.
     Sum 317.44px: 17.6px spare at 375px, 32.6px at 390px, 102.6px at 460px, and
     a floor of 357.4px, below which the tighter band further down takes over. */
  .hdr-top{gap:8px}
  .brand{gap:6px}
  .brand b{font-size:16px;letter-spacing:.1em;padding-left:.12em}
  .brand-seal svg{width:22px;height:22px}
  .hdr-actions{gap:8px}
  .hdr-actions .hdr-acct-mobile{display:inline-flex}
}
@media(max-width:370px){
  /* Tightest band rebudget: the row still carries burger+seal+wordmark+cart, and
     since R19-K the compact account door too. 360px is one of the two commonest
     Android widths, so it buys its own room instead of dropping the door: gaps
     6px, seal 20px, brand gap 4px, and the wordmark inscriptional tracking
     eased from .1em to .06em (the letterform itself untouched). Measured sum
     302.96px against the 320px available at 360px wide: 17.0px spare with a
     one-item cart, 9.1px with a two-digit count.
     370 and not 360 (corrector): the wider band above sums 317.44 / 325.36px and
     so runs out at 365.4px with a two-digit count — at 360 the two bands would
     have left 361-365px over budget. No device lives there, but a seam that only
     holds because nobody stands on it is not a budget. */
  .hdr-top{gap:6px}
  .hdr-actions{gap:6px}
  .brand{gap:4px}
  .brand-seal svg{width:20px;height:20px}
  .brand b{font-size:16px;letter-spacing:.06em}
}
/* THE FLOOR. Measured: even with the rebudget above, the sum is 302.96px with a
   one-item cart and 310.88px with a two-digit count, and .wrap gives vw-40px, so
   the row runs out at 342.96 / 350.88px. Below 356px the compact door yields
   ENTIRELY — the same ruling the language toggle got at 460px in July, and for
   the same reason: the drawer carries its own copy, and a broken row serves
   nobody. The only real width under this line is 320px (iPhone SE 1st gen, folded
   cover screens), where the burger is one tap from BOTH doors, which are now the
   first two rows of the drawer. */
@media(max-width:355px){
  .hdr-actions .hdr-acct-mobile{display:none}
}
/* Reduced motion: the nav / language underline still appears on hover+focus (state
   feedback), it just snaps in with no scale animation — no movement. */
@media(prefers-reduced-motion:reduce){
  .nav a::after,.langtog a::after,.drawer-t{transition:none}
}