/* =========================================================================
   Multiservices J.C — HUB de Transformación Digital
   Sistema de diseño "Blueprint & Brass"
   Azul tinta de plano + latón cálido sobre blanco yeso.
   ========================================================================= */

/* ----- Tokens: tema claro (por defecto) ----- */
:root{
  --navy:#0E2A38;
  --navy-800:#12303F;
  --navy-700:#1A4256;
  --navy-600:#215268;

  --brass:#C0782A;
  --brass-bright:#D68A2E;
  --brass-soft:#F2E4CF;

  --paper:#F6F3EE;
  --surface:#FFFFFF;
  --surface-2:#FBF9F5;
  --line:#E6DFD3;
  --line-strong:#D8CFBF;

  --ink:#182430;
  --ink-soft:#3C4652;
  --muted:#5E6A76;
  --muted-2:#8A93a0;

  --ok:#2F8A5B;
  --ok-soft:#E1F0E7;
  --warn:#C0782A;
  --warn-soft:#F6E9D6;
  --pending:#8A93A0;
  --pending-soft:#ECECEC;
  --info:#2F6E92;
  --info-soft:#E1EDF4;

  --grid-line:rgba(46,84,112,.10);
  --grid-line-strong:rgba(46,84,112,.16);

  --shadow-sm:0 1px 2px rgba(20,35,48,.06), 0 1px 3px rgba(20,35,48,.05);
  --shadow-md:0 4px 14px rgba(20,35,48,.08), 0 2px 6px rgba(20,35,48,.05);
  --shadow-lg:0 18px 48px rgba(14,42,56,.16);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;

  --sidebar-w:288px;
  --content-max:820px;

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="dark"]{
  --navy:#0A1F2A;
  --navy-800:#0C2532;
  --navy-700:#123243;
  --navy-600:#184155;

  --brass:#E0A24A;
  --brass-bright:#EBB05B;
  --brass-soft:#3A2E1C;

  --paper:#0C1B24;
  --surface:#122733;
  --surface-2:#0F212C;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);

  --ink:#E9EEF1;
  --ink-soft:#C6D0D7;
  --muted:#94A2AC;
  --muted-2:#6E7F8A;

  --ok:#5FCB92;      --ok-soft:rgba(95,203,146,.14);
  --warn:#E0A24A;    --warn-soft:rgba(224,162,74,.15);
  --pending:#8A99A4; --pending-soft:rgba(138,153,164,.16);
  --info:#6BB0D6;    --info-soft:rgba(107,176,214,.15);

  --grid-line:rgba(120,180,210,.07);
  --grid-line-strong:rgba(120,180,210,.12);

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 22px 55px rgba(0,0,0,.5);
}

/* ----- Reset / base ----- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ========================================================================
   Layout
   ======================================================================== */
#app{display:flex;min-height:100vh}

/* ----- Sidebar ----- */
.sidebar{
  width:var(--sidebar-w);flex:none;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:var(--navy);color:#EAF1F4;
  border-right:1px solid rgba(255,255,255,.06);
  background-image:
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
  background-size:26px 26px;
  z-index:40;
}
.sidebar__brand{display:flex;align-items:center;gap:12px;padding:20px 18px 16px}
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.brand__mark{border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.35);flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand__name{font-family:var(--font-display);font-weight:500;font-size:16px;letter-spacing:.2px;color:#fff;white-space:nowrap}
.brand__name b{color:var(--brass-bright);font-weight:700}
.brand__tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#7FA0B2;margin-top:3px}
.sidebar__close{display:none;background:none;border:none;color:#9FB6C4;font-size:26px;line-height:1;padding:0 4px}

.sidebar__search{position:relative;margin:2px 14px 12px;display:flex;align-items:center}
.sidebar__search .ic{position:absolute;left:12px;width:16px;height:16px;color:#6E899B;pointer-events:none}
.sidebar__search input{
  width:100%;padding:10px 34px 10px 36px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  color:#EAF1F4;font-size:13.5px;outline:none;transition:border-color .15s, background .15s;
}
.sidebar__search input::placeholder{color:#6E8b9c}
.sidebar__search input:focus{border-color:var(--brass);background:rgba(255,255,255,.09)}
.sidebar__search kbd{
  position:absolute;right:10px;font-family:var(--font-mono);font-size:11px;color:#7c96a6;
  border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:1px 6px;background:rgba(0,0,0,.15)
}

.nav{flex:1;overflow-y:auto;padding:4px 10px 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.nav__group{margin-top:14px}
.nav__group:first-child{margin-top:4px}
.nav__grouptitle{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:#6f8b9d;padding:6px 10px 6px;
}
.nav__grouptitle::before{content:attr(data-num);color:var(--brass);font-weight:600}
.nav__link{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:#C6D6DF;font-size:13.7px;font-weight:450;line-height:1.3;position:relative;
  transition:background .14s, color .14s;
}
.nav__link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__link .ref{
  font-family:var(--font-mono);font-size:10px;color:#5f7d90;margin-left:auto;letter-spacing:.5px;flex:none
}
.nav__dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--pending)}
.nav__dot.is-ok{background:var(--ok)}
.nav__dot.is-warn{background:var(--brass-bright)}
.nav__link.is-active{background:linear-gradient(90deg, rgba(214,138,46,.20), rgba(214,138,46,.04));color:#fff}
.nav__link.is-active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--brass-bright)}
.nav__link.is-active .ref{color:var(--brass-bright)}

.sidebar__foot{padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.07)}
.progress{display:flex;flex-direction:column;gap:6px}
.progress__bar{height:7px;border-radius:20px;background:rgba(255,255,255,.10);overflow:hidden}
.progress__bar span{display:block;height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,var(--brass),var(--brass-bright));transition:width .5s ease}
.progress__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;color:#8AA6B6;text-transform:uppercase}

/* ----- Main column ----- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:12px 22px;background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.topbar__menu{display:none;background:none;border:1px solid var(--line-strong);border-radius:9px;padding:7px;color:var(--ink)}
.crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);overflow:hidden}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--muted-2)}
.crumbs .cur{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__actions{display:flex;align-items:center;gap:8px;flex:none}
.btn-ghost{background:none;border:1px solid var(--line-strong);border-radius:9px;padding:7px;color:var(--ink);display:grid;place-items:center;transition:background .15s,border-color .15s}
.btn-ghost:hover{background:var(--surface);border-color:var(--brass)}
.ic-moon{display:none}
:root[data-theme="dark"] .ic-sun{display:none}
:root[data-theme="dark"] .ic-moon{display:block}

.content{padding:40px 22px 30px;max-width:calc(var(--content-max) + 44px);width:100%;margin:0 auto;flex:1;outline:none}
.pager{max-width:calc(var(--content-max) + 44px);width:100%;margin:0 auto;padding:8px 22px 60px}

/* ========================================================================
   Content typography & components
   ======================================================================== */
.page{animation:rise .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.page__head{margin-bottom:30px}
.sheetref{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.sheetref::before{content:"";width:22px;height:1px;background:var(--brass)}
.page h1{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4.6vw,40px);line-height:1.08;letter-spacing:-.5px;margin:0 0 14px}
.page__lead{font-size:clamp(16px,2.2vw,18.5px);line-height:1.6;color:var(--muted);max-width:62ch;margin:0}
/* measurement ruler under title */
.ruler{height:12px;margin:18px 0 2px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 100%);background-size:11px 12px;border-bottom:1px solid var(--line-strong);opacity:.8;position:relative}
.ruler::after{content:"";position:absolute;left:0;bottom:-1px;width:66px;height:3px;background:var(--brass-bright)}

.page h2{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.2px;margin:44px 0 4px;padding-top:8px;scroll-margin-top:80px}
.page h2 .n{font-family:var(--font-mono);font-size:13px;color:var(--brass);margin-right:10px;font-weight:500}
.page h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;margin:26px 0 8px;color:var(--ink)}
.page p{margin:12px 0;color:var(--ink-soft)}
.page a.link{color:var(--info);border-bottom:1px solid color-mix(in srgb,var(--info) 40%,transparent)}
.page a.link:hover{border-bottom-color:var(--info)}
.page ul,.page ol{margin:12px 0;padding-left:22px}
.page li{margin:7px 0;color:var(--ink-soft)}
.page li::marker{color:var(--brass)}
.page strong{color:var(--ink);font-weight:600}
.page hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.lead-block{font-size:17px;color:var(--ink-soft)}

.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2)}

/* status stamp */
.stamp{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;padding:5px 11px;border-radius:6px;border:1.5px solid;
}
.stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stamp--ok{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.stamp--warn{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.stamp--pending{color:var(--pending);background:var(--pending-soft);border-color:color-mix(in srgb,var(--pending) 45%,transparent)}

/* cards */
.grid{display:grid;gap:16px;margin:22px 0}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card--tab::before{content:"";position:absolute;top:0;left:22px;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--brass)}
.card__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brass-soft);color:var(--brass);margin-bottom:14px}
.card__ic .ic{width:22px;height:22px;stroke-width:1.7}
.card h3{margin:0 0 6px}
.card p{margin:0;font-size:14px;color:var(--muted)}

/* clickable nav cards on home */
a.card.card--link{cursor:pointer}
a.card.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brass) 50%,var(--line))}
.card__ref{position:absolute;top:14px;right:16px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2)}
.card__go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--brass);font-family:var(--font-body)}
a.card--link:hover .card__go{gap:9px}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.stat__num{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1;color:var(--ink)}
.stat__num small{font-size:15px;color:var(--brass);font-weight:500}
.stat__lbl{font-size:12.5px;color:var(--muted);margin-top:8px}

/* callouts */
.note{border:1px solid var(--line);border-left:4px solid var(--brass);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 18px;margin:22px 0}
.note__t{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);margin-bottom:4px;font-size:14.5px}
.note__t .ic{width:18px;height:18px;color:var(--brass)}
.note p{margin:4px 0 0;font-size:14.5px}
.note--info{border-left-color:var(--info)} .note--info .note__t .ic{color:var(--info)}
.note--ok{border-left-color:var(--ok)} .note--ok .note__t .ic{color:var(--ok)}
.note--warn{border-left-color:#D98A2E} .note--warn .note__t .ic{color:#D98A2E}
.note--decision{background:linear-gradient(180deg,var(--brass-soft),var(--surface-2));border-color:color-mix(in srgb,var(--brass) 30%,var(--line))}

/* tables */
.table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
thead th{background:var(--surface-2);text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td strong{color:var(--ink)}

/* pill tags */
.pill{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:2px 9px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill--brass{background:var(--brass-soft);border-color:color-mix(in srgb,var(--brass) 30%,transparent);color:var(--brass)}
.pill--ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}

/* timeline (roadmap) */
.timeline{position:relative;margin:26px 0 10px;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--brass),var(--line))}
.phase{position:relative;padding:0 0 26px 6px}
.phase::before{content:"";position:absolute;left:-24px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--brass);box-shadow:0 0 0 4px var(--paper)}
.phase__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.phase__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--brass)}
.phase__when{font-size:12.5px;color:var(--muted)}
.phase h3{margin:2px 0 6px}

/* journey steps */
.journey{display:grid;gap:12px;margin:22px 0;counter-reset:jrn}
.jstep{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.jstep__n{counter-increment:jrn;font-family:var(--font-mono);font-weight:600;color:var(--brass);font-size:13px;width:34px;height:34px;border-radius:9px;background:var(--brass-soft);display:grid;place-items:center}
.jstep__n::before{content:counter(jrn,decimal-leading-zero)}
.jstep h4{margin:2px 0 4px;font-family:var(--font-display);font-size:15.5px}
.jstep p{margin:0;font-size:13.5px;color:var(--muted)}

/* checklist */
.check{list-style:none;padding:0;margin:16px 0}
.check li{position:relative;padding:6px 0 6px 30px;border-bottom:1px dashed var(--line)}
.check li:last-child{border-bottom:none}
.check li::before{content:"";position:absolute;left:2px;top:11px;width:16px;height:16px;border-radius:5px;border:2px solid var(--brass);background:var(--brass-soft)}
.check li::after{content:"";position:absolute;left:7px;top:13px;width:4px;height:8px;border:solid var(--brass);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* KPI cost bars */
.costbar{display:flex;align-items:center;gap:12px;margin:10px 0}
.costbar__lbl{width:150px;font-size:13.5px;color:var(--ink-soft);flex:none}
.costbar__track{flex:1;height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.costbar__fill{height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-bright));border-radius:20px}
.costbar__val{width:78px;text-align:right;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);flex:none}

/* mini brand swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:20px 0}
.swatch{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.swatch__chip{height:78px}
.swatch__meta{padding:10px 12px;background:var(--surface)}
.swatch__name{font-size:13px;font-weight:600;color:var(--ink)}
.swatch__hex{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);text-transform:uppercase}

/* type specimen */
.specimen{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin:18px 0;background:var(--surface)}
.specimen__big{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.5px;line-height:1.05;color:var(--ink)}
.specimen__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:13px;color:var(--muted)}
.specimen__row .fam{font-family:var(--font-mono);color:var(--brass)}

/* pager buttons */
.pager__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pager__btn{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color .15s,transform .15s,box-shadow .15s}
.pager__btn:hover{border-color:var(--brass);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pager__btn.next{text-align:right}
.pager__dir{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2)}
.pager__ttl{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.pager__btn.disabled{opacity:.4;pointer-events:none}

/* hero on home */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:40px 34px;margin-bottom:12px;
  background:var(--navy);color:#EAF1F4;box-shadow:var(--shadow-lg);
  background-image:
    linear-gradient(var(--grid-line-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-strong) 1px,transparent 1px);
  background-size:30px 30px;
}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(214,138,46,.35),transparent 70%);pointer-events:none}
.hero__eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;position:relative}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,5vw,44px);line-height:1.06;letter-spacing:-.6px;margin:0 0 14px;color:#fff;position:relative}
.hero h1 b{color:var(--brass-bright);font-weight:700}
.hero p{color:#B9CCD6;max-width:56ch;font-size:16.5px;position:relative;margin:0 0 24px}
.hero__cta{display:inline-flex;align-items:center;gap:9px;background:var(--brass);color:#241503;font-weight:600;padding:12px 20px;border-radius:11px;font-size:14.5px;position:relative;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 22px rgba(214,138,46,.35)}
.hero__cta:hover{transform:translateY(-2px)}

.kbd-help{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.kbd-help kbd{border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;background:var(--surface);color:var(--ink)}

.no-results{text-align:center;padding:60px 20px;color:var(--muted)}
.no-results svg{width:40px;height:40px;color:var(--muted-2);margin-bottom:12px}

/* ========================================================================
   Responsive
   ======================================================================== */
.scrim{position:fixed;inset:0;background:rgba(8,20,28,.55);z-index:35;backdrop-filter:blur(2px)}

@media (max-width:1024px){
  :root{--sidebar-w:270px}
}
@media (max-width:860px){
  .sidebar{
    position:fixed;left:0;top:0;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:var(--shadow-lg);width:min(86vw,320px);
  }
  .sidebar.is-open{transform:none}
  .sidebar__close{display:block}
  .topbar__menu{display:grid;place-items:center}
  .content{padding:26px 18px 24px}
  .topbar{padding:11px 16px}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .hero{padding:30px 22px}
  .pager__row{grid-template-columns:1fr}
  .costbar__lbl{width:112px}
  .crumbs .hide-sm{display:none}
}

@media print{
  .sidebar,.topbar,.pager,.scrim{display:none!important}
  .content{max-width:100%}
  .card,.note{break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* focus visibility */
:focus-visible{outline:2.5px solid var(--brass);outline-offset:2px;border-radius:4px}