/* Estilos de la nueva home (fase 1): rejilla de proyectos, filtros, hero con controles y archivo.
   Tipografías: Syne (400/600), Bebas Neue y Courier. Cargar en index.html:
   <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600&family=Bebas+Neue&display=swap" rel="stylesheet"> */
:root {
  --hn-rojo: #e8412f;
  --hn-violeta: #6f00ff;
  --hn-texto: #ece8e0;
  --hn-negro: #040404;
  --hn-sans: "Syne", system-ui, sans-serif;
  --hn-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --hn-mono: "Courier New", Courier, monospace;
}

/* ---------- filtros ---------- */
.hn-filtros { display: flex; flex-direction: column; align-items: flex-start; font: 400 clamp(1.05rem, 1.75vw, 1.45rem)/1.25 var(--hn-sans); }
.hn-filtros button { background: none; border: 0; padding: 0; color: var(--hn-texto); font: inherit; cursor: pointer; transition: color .2s; }
.hn-filtros button::before { content: "/"; color: var(--hn-violeta); margin-right: .45em; }
.hn-filtros button:hover, .hn-filtros button:focus-visible, .hn-filtros button[aria-pressed="true"] { color: var(--hn-rojo); }
@media (max-width: 640px) { .hn-filtros { flex-direction: row; flex-wrap: wrap; gap: .2rem 1.4rem; } }

/* ---------- rejilla y tarjetas ---------- */
.hn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem; }
@media (max-width: 640px) { .hn-grid { grid-template-columns: 1fr; } }
.hn-card { position: relative; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(160deg, #1c1b19, #3b372f); color: var(--hn-texto); }
.hn-card img, .hn-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hn-card b { position: absolute; left: .9rem; top: .8rem; z-index: 2; max-width: 50%; font: 400 clamp(2.6rem, 5.55vw, 3.9rem)/.95 var(--hn-display); text-transform: uppercase; }
.hn-card small { position: absolute; left: .9rem; bottom: .8rem; z-index: 2; max-width: calc(100% - 1.8rem); font: 400 clamp(.7rem, 1.3vw, .85rem)/1.3 var(--hn-mono); text-transform: uppercase; opacity: .9; }
.hn-stretch { color: inherit; text-decoration: none; }
.hn-stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* toda la tarjeta es el enlace */
.hn-card--pending { cursor: default; }

/* ---------- Más es Más / Menos es Más ---------- */
.hn-masbox { padding-bottom: 3rem; }
.hn-mas { display: block; margin: 0 auto; background: none; border: 0; padding: .5rem 0; color: var(--hn-texto); font: .8rem var(--hn-mono); text-transform: uppercase; cursor: pointer; }
.hn-mas span { position: relative; display: inline-block; padding-bottom: .4rem; }
.hn-mas span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hn-rojo); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.hn-mas:hover span::after, .hn-mas:focus-visible span::after { transform: scaleX(1); }

/* ---------- hero con controles ---------- */
.hn-hero { position: relative; background: #000; color: var(--hn-texto); }
.hn-hero__media { position: relative; width: 100%; overflow: hidden; background: #000; }
.hn-hero--adapt .hn-hero__media { aspect-ratio: var(--hn-ar, 16/9); max-height: 100svh; }
.hn-hero--cover .hn-hero__media { height: 72svh; min-height: 420px; }
.hn-hero__media video, .hn-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.hn-hero--adapt video, .hn-hero--adapt .hn-hero__media > img { object-fit: cover; object-position: center; }
.hn-hero--cover video, .hn-hero--cover .hn-hero__media > img { object-fit: cover; }
.hn-hero__over { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.hn-hero__over--diff { mix-blend-mode: difference; color: #fff; }
.hn-herologo { width: min(80vw, 680px); height: auto; display: block; }
.hn-ctl { position: absolute; left: 1.25rem; bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: 1.1rem; font: .8rem/1 var(--hn-mono); text-transform: uppercase; }
.hn-ctl button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; transition: color .2s; }
.hn-ctl button::before { content: "[ "; }
.hn-ctl button::after { content: " ]"; }
.hn-ctl button:hover, .hn-ctl button:focus-visible { color: var(--hn-rojo); }
.hn-vol { -webkit-appearance: none; appearance: none; width: 96px; height: 14px; margin: 0; background: transparent; cursor: pointer; }
.hn-vol::-webkit-slider-runnable-track { height: 1px; background: rgba(236,232,224,.6); }
.hn-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--hn-texto); border: 0; }
.hn-vol::-moz-range-track { height: 1px; background: rgba(236,232,224,.6); }
.hn-vol::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--hn-texto); border: 0; }

/* ---------- archivo ---------- */
.hn-arc { max-width: 1200px; margin: 0 auto; padding: 3rem 1.25rem 4rem; color: var(--hn-texto); }
.hn-arc h1 { margin: 0; font: 400 clamp(3rem, 11vw, 8rem)/.9 var(--hn-display); text-transform: uppercase; }
.hn-arc__intro { margin: 1rem 0 2rem; font: .8rem/1.4 var(--hn-mono); text-transform: uppercase; opacity: .7; }
.hn-arch { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(236,232,224,.3); }
.hn-arch li { border-bottom: 1px solid rgba(236,232,224,.3); }
.hn-row { display: grid; grid-template-columns: 3rem minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,.9fr) 3.5rem; gap: 1rem; align-items: baseline; padding: .65rem 0; color: inherit; text-decoration: none; transition: color .2s; }
a.hn-row:hover, a.hn-row:focus-visible { color: var(--hn-rojo); }
.hn-row--pending { opacity: .55; }
.hn-an, .hn-as, .hn-ac, .hn-ah { font: .8rem/1.3 var(--hn-mono); text-transform: uppercase; }
.hn-an { opacity: .5; }
.hn-at { font: 400 clamp(1.8rem, 4vw, 2.8rem)/1 var(--hn-display); text-transform: uppercase; }
.hn-ah { color: var(--hn-violeta); text-align: right; }
@media (max-width: 640px) { .hn-row { grid-template-columns: 2rem 1fr; gap: .15rem .8rem; } .hn-as, .hn-ac, .hn-ah, .hn-ay { grid-column: 2; text-align: left; } }


/* =====================================================================
   FASE 2: layout, fondo, cabecera, menú, titular, servicios, BTS, pie
   ===================================================================== */
/* Neutraliza los estilos globales del layout antiguo (#root con overflow oculto y text-align:center) */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--hn-negro); }
body.hn { position: relative; overflow-x: clip; color: var(--hn-texto); font: 400 1rem/1.5 var(--hn-sans); text-align: left; }
body.hn a { color: inherit; text-decoration: none; }
.hn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fondo ---------- */
.hn-bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: var(--hn-negro); }
.hn-bg > * { position: absolute; will-change: transform; }
.hn-masa { inset: -30%; background: linear-gradient(170deg, #040404 0%, #040404 46%, #1d1b18 58%, #2f2c27 72%, #3a3731 100%); animation: hn-masa 46s ease-in-out infinite alternate; }
.hn-luz { left: 0; top: 0; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; background: radial-gradient(circle, rgba(112,105,92,.65) 0%, rgba(112,105,92,.28) 32%, rgba(112,105,92,0) 62%); }
.hn-sombra { right: -35%; bottom: -30%; width: 80%; height: 70%; background: radial-gradient(ellipse at 60% 60%, rgba(2,2,2,.95), rgba(2,2,2,0) 68%); animation: hn-som 64s ease-in-out infinite alternate; }
canvas.hn-grano { left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: .9; }
@keyframes hn-masa { from { transform: translate3d(0,-4%,0) rotate(-2.5deg); } to { transform: translate3d(0,5%,0) rotate(2deg); } }
@keyframes hn-som { from { transform: none; } to { transform: translate3d(-10%,-8%,0) scale(1.2); } }

/* ---------- tiras de texto ---------- */
.hn-tira { overflow: hidden; white-space: nowrap; padding: .6rem 0; font: .8rem/1.4 var(--hn-mono); text-transform: uppercase; }
.hn-tira > div { display: inline-block; animation: hn-tira 38s linear infinite; }
.hn-sl { padding: 0 1.4rem; }
.hn-clientes { border-block: 1px solid rgba(236,232,224,.35); font: 400 1.05rem/1.4 var(--hn-mono); letter-spacing: .04em; padding: 1.1rem 0; }
.hn-clientes > div { animation-duration: 90s; }
.hn-clientes span { padding: 0 1.6rem; }
@keyframes hn-tira { to { transform: translateX(-50%); } }

/* ---------- cabecera y menú ---------- */
.hn-hdr { position: sticky; top: 0; height: 0; z-index: 50; }
.hn-header { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem; color: var(--hn-texto); }
.hn-wordmark { font: 400 1.95rem/1 var(--hn-sans); }
.hn-mb { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; line-height: 0; }
.hn-mb svg { width: 2.145rem; height: 2.145rem; display: block; transition: transform .35s; }
.hn-mb[aria-expanded="true"] svg { transform: rotate(45deg); }
.hn-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--hn-negro); padding: 5.4rem 1.25rem 1.75rem; transform: translateY(-100%); visibility: hidden; transition: transform .55s cubic-bezier(.7,0,.2,1), visibility 0s .55s; }
.hn-menu.is-open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.7,0,.2,1), visibility 0s; }
.hn-menu > a.hn-ml { display: block; width: fit-content; font: 400 clamp(2.4rem, 7vw, 5rem)/.98 var(--hn-display); text-transform: uppercase; transition: color .25s; }
.hn-menu > a.hn-ml:hover, .hn-menu > a.hn-ml:focus-visible { color: var(--hn-rojo); }
.hn-lang { display: flex; gap: 1rem; margin-top: 1.4rem; font: .85rem var(--hn-mono); text-transform: uppercase; }
.hn-lang button, .hn-lang a { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; opacity: .5; }
.hn-lang button.on, .hn-lang a.on { opacity: 1; }
.hn-veil { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.hn-veil.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }

/* ---------- titular "We are Visual Explorers" ---------- */
.hn-mq { margin: 0; padding: .28em 0 .2em; overflow: hidden; color: var(--hn-texto); font: 400 clamp(3.2rem, 15.2vw, 24rem)/.86 var(--hn-display); letter-spacing: 0; text-transform: uppercase; }
.hn-mq .hn-l { display: block; white-space: nowrap; }
.hn-mq .hn-t { display: flex; width: max-content; margin-left: 3vw; will-change: transform; }
.hn-mq .hn-u { display: flex; align-items: center; flex: none; gap: .11em; padding-right: .15em; }
.hn-mq .hn-u > * { flex: none; }
.hn-mq .hn-arrow, .hn-mq .hn-orb, .hn-mq .hn-ruido, .hn-mq .hn-claq { display: block; transform: translateY(-.05em); }
.hn-mq .hn-arrow { width: .85em; height: .7em; }
.hn-mq .hn-orb { width: .6em; height: .6em; margin: 0 .03em; }
.hn-mq .hn-ruido { width: 1.43em; height: .72em; object-fit: cover; }
.hn-mq .hn-claq { width: .98em; height: .7em; object-fit: cover; }

/* ---------- texto principal + filtros ---------- */
.hn-intro { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem 3rem; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem 3rem; align-items: start; }
.hn-intro__t > p { margin: 0; max-width: 62ch; font: 400 clamp(1.05rem, 1.75vw, 1.45rem)/1.25 var(--hn-sans); }
@media (max-width: 640px) { .hn-intro { grid-template-columns: 1fr; } }

/* ---------- servicios ---------- */
.hn-servwrap { position: relative; padding: 3rem 1.25rem; }
.hn-roll { position: absolute; left: 50%; top: 50%; width: calc(min(41.07vw, 467.5px) * 1.7778); height: min(41.07vw, 467.5px); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.hn-roll img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.hn-roll img.on { opacity: 1; }
.hn-serv { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; text-align: center; font: 400 clamp(2.4rem, 7vw, 5.2rem)/.98 var(--hn-display); text-transform: uppercase; }
.hn-serv li { width: fit-content; margin-inline: auto; transition: color .3s; }
.hn-serv li.on { color: var(--hn-rojo); }

/* ---------- BTS y texto final ---------- */
.hn-bts { margin: 4rem 0 5rem; }
.hn-rb { position: relative; }
.hn-bts img, .hn-bts video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hn-lbl { position: absolute; left: 1.25rem; bottom: 1rem; font: 400 clamp(.7rem, 1.3vw, .85rem)/1.3 var(--hn-mono); text-transform: uppercase; }
.hn-final { max-width: 62ch; margin: 0 auto; padding: 0 1.25rem 5rem; }
.hn-final p { margin: 0; font: 400 clamp(1.05rem, 1.75vw, 1.45rem)/1.25 var(--hn-sans); }

/* ---------- pie ---------- */
.hn-footer { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; align-items: flex-end; background: #000; padding: 3.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 2.5rem); }
.hn-fl { display: flex; flex-direction: column; align-items: flex-start; font: .8rem/1.2 var(--hn-mono); opacity: .85; }
.hn-fl button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; transition: color .2s; }
.hn-fl button:hover, .hn-fl button:focus-visible { color: var(--hn-rojo); }
.hn-flogo { display: block; width: clamp(150px, 18vw, 250px); height: auto; margin-bottom: 1.5rem; }
.hn-fc { text-align: right; font-size: clamp(1.7rem, 3.8vw, 3rem); line-height: 1.2; }
.hn-fc a { transition: color .2s; }
.hn-fc a:hover, .hn-fc a:focus-visible { color: var(--hn-rojo); }
.hn-soc { display: flex; gap: 1.1rem; justify-content: flex-end; margin-top: 1.1rem; }
.hn-soc a { display: block; width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px); }
.hn-soc svg { width: 100%; height: 100%; display: block; }
.hn-seo { flex-basis: 100%; font: .7rem/1.7 var(--hn-mono); opacity: .5; }
.hn-seo i { font-style: normal; padding: 0 .6em; opacity: .6; }
.hn-seo a:hover, .hn-seo a:focus-visible { color: var(--hn-rojo); }
@media (max-width: 640px) {
  .hn-footer { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .hn-fc { order: -1; text-align: left; }
  .hn-soc { justify-content: flex-start; }
  .hn-seo { flex-basis: auto; }
}

/* ---------- página de proyecto ---------- */
.hn-pj { max-width: 1200px; margin: 0 auto; padding: 3rem 1.25rem 1rem; }
.hn-pj h1 { margin: 0; font: 400 clamp(3rem, 11vw, 8rem)/.9 var(--hn-display); text-transform: uppercase; }
.hn-ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.8rem 0 2.2rem; padding-top: .9rem; border-top: 1px solid rgba(236,232,224,.3); font: .8rem/1.4 var(--hn-mono); text-transform: uppercase; }
.hn-ficha dt { opacity: .6; margin-bottom: .35rem; }
.hn-ficha dd { margin: 0; }
.hn-lead { max-width: 62ch; margin: 0; font: 400 clamp(1.15rem, 2.2vw, 1.6rem)/1.35 var(--hn-sans); }
.hn-pj h2 { margin: 3rem 0 .8rem; font: 400 clamp(2.2rem, 6vw, 4rem)/.95 var(--hn-display); text-transform: uppercase; }
.hn-pj p:not(.hn-lead) { max-width: 62ch; margin: 0; font: 400 clamp(.95rem, 1.5vw, 1.15rem)/1.55 var(--hn-sans); }
.hn-wide { display: block; width: 100%; max-height: 80vh; margin: 2rem 0; object-fit: cover; }
.hn-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 2rem 0; }
.hn-gal img, .hn-gal video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hn-navpj { display: flex; justify-content: space-between; gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem 1.5rem; font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--hn-display); text-transform: uppercase; }
.hn-navpj a { transition: color .25s; }
.hn-navpj a:hover, .hn-navpj a:focus-visible { color: var(--hn-rojo); }
.hn-navpj small { display: block; margin-bottom: .4rem; font: .8rem var(--hn-mono); opacity: .6; }
.hn-volver { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 3rem; font: .8rem var(--hn-mono); text-transform: uppercase; }
.hn-volver a:hover { color: var(--hn-rojo); }
@media (max-width: 640px) { .hn-ficha, .hn-gal { grid-template-columns: 1fr; } .hn-navpj { flex-direction: column; } .hn-navpj a:last-child { text-align: left !important; } }

@media (prefers-reduced-motion: reduce) { body.hn *, .hn-bg * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }


/* ---------- elementos ocultos y estados ---------- */
.hn-card[hidden], .hn-mas[hidden] { display: none; }
.hn-card img + b, .hn-card video + b { position: absolute; }
.hn-filtros button[aria-pressed="true"] { color: var(--hn-rojo); }

/* ---------- diálogos (aviso legal, cookies, formulario) ---------- */
.hn-dlg { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: var(--hn-texto); }
.hn-dlg::backdrop { background: rgba(0,0,0,.7); }
.hn-dlg__p { position: relative; box-sizing: border-box; width: min(92vw, 760px); max-height: 86vh; overflow: auto; margin: 7vh auto 0; padding: 2.5rem 1.5rem 2rem; background: #0b0b0b; font: 400 .95rem/1.5 var(--hn-sans); }
.hn-dlg__p h2 { margin: 0 0 1.2rem; font: 400 clamp(2.2rem, 6vw, 3.6rem)/.95 var(--hn-display); text-transform: uppercase; }
.hn-dlg__p p { margin: 0 0 1rem; }
.hn-dlg__x { position: absolute; top: .9rem; right: 1rem; background: none; border: 0; color: inherit; font: .8rem var(--hn-mono); text-transform: uppercase; cursor: pointer; }
.hn-dlg__x:hover, .hn-dlg__x:focus-visible { color: var(--hn-rojo); }
.hn-form { display: grid; gap: .9rem; }
.hn-form input, .hn-form textarea { width: 100%; box-sizing: border-box; padding: .6rem 0; background: transparent; border: 0; border-bottom: 1px solid rgba(236,232,224,.5); color: var(--hn-texto); font: inherit; border-radius: 0; }
.hn-form input::placeholder, .hn-form textarea::placeholder { color: rgba(236,232,224,.55); }
.hn-form input:focus, .hn-form textarea:focus { outline: none; border-bottom-color: var(--hn-rojo); }
.hn-form button { justify-self: start; background: none; border: 0; padding: .4rem 0; color: var(--hn-rojo); font: .85rem var(--hn-mono); text-transform: uppercase; cursor: pointer; }
.hn-form button:disabled { opacity: .5; }
.hn-form__msg { min-height: 1.4em; font: .85rem var(--hn-mono); text-transform: uppercase; }


/* ---------- CTA: texto en Courier + flecha en diagonal; la línea roja aparece al pasar el cursor ---------- */
.hn-cta { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.6rem; padding: 0; background: none; border: 0; color: var(--hn-texto); font: .9rem/1 var(--hn-mono); text-transform: uppercase; cursor: pointer; transition: color .2s; }
.hn-cta span { position: relative; padding-bottom: .45rem; }
.hn-cta span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hn-rojo); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.hn-cta svg { width: .95em; height: .95em; flex: none; transition: transform .25s; }
.hn-cta:hover, .hn-cta:focus-visible { color: var(--hn-rojo); }
.hn-cta:hover span::after, .hn-cta:focus-visible span::after { transform: scaleX(1); }
.hn-cta:hover svg, .hn-cta:focus-visible svg { transform: translate(2px, -2px); }

/* ---------- vídeo dentro de la página de proyecto, con nuestro reproductor ---------- */
.hn-vid { position: relative; max-height: none; }
.hn-vid video { display: block; width: 100%; max-height: 80vh; object-fit: cover; }

/* ---------- archivo: título, categorías seleccionables y columna de año ---------- */
.hn-arc__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; margin: 1rem 0 2rem; font: .8rem/1.4 var(--hn-mono); text-transform: uppercase; opacity: 1; }
.hn-arc__intro > span:first-child { opacity: .7; }
.hn-af { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.hn-af button { background: none; border: 0; padding: 0; color: var(--hn-texto); font: inherit; text-transform: inherit; cursor: pointer; transition: color .2s; }
.hn-af button:hover, .hn-af button:focus-visible, .hn-af button[aria-pressed="true"] { color: var(--hn-rojo); }
.hn-sl2 { color: var(--hn-violeta); }
.hn-row { grid-template-columns: 3rem minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,.9fr) 3.5rem 3.5rem; }
.hn-ay { font: .8rem/1.3 var(--hn-mono); text-transform: uppercase; opacity: .7; }
span.hn-row { cursor: default; }
@media (max-width: 640px) { .hn-row { grid-template-columns: 2rem 1fr; } .hn-ay { grid-column: 2; } }