/* ==========================================================================
   آینه — mirror of free software
   Direction: lajvardi (Persian cobalt glaze) — deep lapis ground, turquoise
   and saffron accents. Display face is Lalezar (Iranian signage lettering),
   body is Vazirmatn, data is IBM Plex Mono.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:Lalezar;src:url(fonts/lalezar-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:Lalezar;src:url(fonts/lalezar-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2212}

@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:        #061733;   /* page ground   */
  --lajvard:    #0c2a5e;   /* panel surface */
  --lift:       #123a76;   /* raised / hover*/
  --firouze:    #3fc9ba;   /* turquoise     */
  --zaafaran:   #f0a93c;   /* saffron       */
  --chini:      #ece6d8;   /* porcelain text*/
  --mist:       #8298c0;   /* muted text    */

  --hair:       color-mix(in srgb, var(--firouze) 22%, transparent);
  --hair-soft:  color-mix(in srgb, var(--firouze) 11%, transparent);

  --fa: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  --display: Lalezar, Vazirmatn, Tahoma, sans-serif;
  --mono: "Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;

  --wrap: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --r: 12px;
  --gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--fa);
  font-size:clamp(.97rem,.4vw + .88rem,1.05rem);
  line-height:1.95;
  color:var(--chini);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-weight:400;line-height:1.4}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
code,pre,.mono{font-family:var(--mono);font-variant-ligatures:none}

:focus-visible{outline:2px solid var(--firouze);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:fixed;inset-block-start:.5rem;inset-inline-start:-100vw;z-index:99;
  background:var(--firouze);color:#04121f;padding:.6rem 1.1rem;border-radius:8px;font-weight:700;
}
.skip:focus{inset-inline-start:.5rem}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:.8rem;font-weight:700;color:var(--firouze);
  display:flex;align-items:center;gap:.55rem;margin-block-end:.9rem;
}
.eyebrow::before{
  content:"";width:.5rem;height:.5rem;flex:none;
  background:var(--firouze);transform:rotate(45deg);
}

.dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;display:inline-block;
  background:var(--firouze);box-shadow:0 0 0 0 color-mix(in srgb,var(--firouze) 60%,transparent);
  animation:ping 2.6s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--firouze) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 .55rem transparent}
}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fa);font-size:.95rem;font-weight:700;
  padding:.72em 1.5em;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--solid{background:var(--firouze);color:#04121f}
.btn--solid:hover{background:#5fdccd;transform:translateY(-1px)}
.btn--ghost{border-color:var(--hair);color:var(--chini);background:transparent}
.btn--ghost:hover{border-color:var(--firouze);color:var(--firouze)}
.btn--sm{font-size:.85rem;padding:.55em 1.1em}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.chip{
  font-size:.72rem;font-weight:700;padding:.28em .7em;border-radius:999px;
  border:1px solid var(--hair-soft);color:var(--mist);
}
.chip--lts{color:var(--zaafaran);border-color:color-mix(in srgb,var(--zaafaran) 30%,transparent)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;inset-block-start:0;z-index:40;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(14px);
  border-block-end:1px solid var(--hair-soft);
}
.topbar__inner{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}

.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand__mark{width:1.9rem;height:1.9rem;fill:none;stroke:var(--firouze);stroke-width:1.4}
.brand__mark circle{fill:var(--zaafaran);stroke:none}
.brand__name{font-family:var(--display);font-size:1.6rem;line-height:1}
.brand__tld{font-family:var(--mono);font-size:.72rem;color:var(--mist);padding-block-start:.35rem}

.nav{display:flex;gap:1.6rem;margin-inline-start:2.5rem;font-size:.93rem;font-weight:500}
.nav a{color:var(--mist);padding-block:.4rem;position:relative;transition:color .18s ease}
.nav a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:var(--firouze);transform:scaleX(0);transition:transform .22s ease;
}
.nav a:hover{color:var(--chini)}
.nav a:hover::after{transform:scaleX(1)}

.topbar__cta{flex:none;margin-inline-start:auto}

.hamburger{
  display:none;flex-direction:column;gap:4px;margin-inline-start:auto;
  background:none;border:1px solid var(--hair-soft);border-radius:8px;padding:.6rem;cursor:pointer;
}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--chini);transition:transform .2s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drawer{display:none;flex-direction:column;border-block-start:1px solid var(--hair-soft);padding:.5rem var(--pad) 1rem}
.drawer:not([hidden]){display:flex}
.drawer a{padding:.75rem 0;color:var(--mist);border-block-end:1px solid var(--hair-soft)}
.drawer a:last-child{border-block-end:0}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero__field{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='none' stroke='%233fc9ba' stroke-width='1'><rect x='30' y='30' width='90' height='90'/><rect x='30' y='30' width='90' height='90' transform='rotate(45 75 75)'/><circle cx='75' cy='75' r='16'/></g></svg>");
  background-size:150px 150px;
  opacity:.06;
  mask-image:radial-gradient(ellipse 90% 70% at 30% 0%,#000 0%,transparent 78%);
}
.hero__grid{
  position:relative;display:grid;gap:clamp(2.2rem,5vw,4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;
}
.hero__copy{max-width:34rem;min-width:0}
.hero__title{
  font-family:var(--display);
  font-size:clamp(2.5rem,6.2vw,4.5rem);
  line-height:1.28;
  margin-block-end:1.2rem;
  text-wrap:balance;
}
.hero__lead{color:var(--mist);max-width:30rem;font-size:1.03em}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:1.9rem}

.pulse{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;padding-block-start:1.5rem;border-block-start:1px solid var(--hair-soft)}
.pulse__item dt{font-size:.76rem;color:var(--mist);line-height:1.6}
.pulse__item dd{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:1.05rem;line-height:1.5}

/* ---------- signature: the index panel ---------- */
.index{
  /* the listing is wider than a phone; let the panel shrink and scroll inside */
  min-width:0;
  border:1px solid var(--hair);border-radius:var(--r);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--lift) 55%,transparent),transparent 42%),
    var(--lajvard);
  box-shadow:0 26px 60px -30px #000, inset 0 1px 0 color-mix(in srgb,var(--firouze) 18%,transparent);
  overflow:hidden;
}
.index__chrome{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1rem;border-block-end:1px solid var(--hair-soft);
  background:color-mix(in srgb,#000 16%,transparent);
}
.index__dots{display:flex;gap:.38rem}
.index__dots i{width:.52rem;height:.52rem;border-radius:50%;background:var(--hair);display:block}
.index__dots i:first-child{background:color-mix(in srgb,var(--zaafaran) 70%,transparent)}
.index__path{font-family:var(--mono);font-size:.76rem;color:var(--mist)}

.index__body{padding:1.1rem clamp(.75rem,2vw,1.25rem) .5rem;overflow-x:auto}
.index__caption{
  font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--chini);
  padding-block-end:.7rem;margin-block-end:.5rem;border-block-end:1px solid var(--hair-soft);
}
.listing{min-width:29rem}
.listing__row{
  display:grid;grid-template-columns:1fr auto auto;gap:1.4rem;align-items:baseline;
  font-family:var(--mono);font-size:.8rem;line-height:2.25;
  padding-inline:.35rem;border-radius:5px;
}
.listing__row:hover{background:color-mix(in srgb,var(--firouze) 8%,transparent)}
.listing__name{color:var(--firouze);white-space:nowrap;transition:color .15s ease}
.listing__name:hover{color:#7ee6d8;text-decoration:underline}
.listing__name.is-meta{color:var(--zaafaran)}
.listing__row--up .listing__name{color:var(--mist)}
.listing__date{color:var(--mist);white-space:nowrap;font-size:.74rem}
.listing__size{color:var(--chini);white-space:nowrap;min-width:3.2rem;text-align:right;font-size:.74rem}

.index__foot{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;align-items:center;
  padding:.7rem 1.1rem;border-block-start:1px solid var(--hair-soft);
  font-size:.74rem;color:var(--mist);
}
.index__foot .mono{font-size:.72rem}

/* staged load of the listing — the mirror index streaming in */
@keyframes rowIn{to{opacity:1;transform:none}}
.js .index[data-reveal] .listing__row{opacity:0;transform:translateY(6px)}
.js .index.is-in .listing__row{animation:rowIn .42s cubic-bezier(.22,.7,.3,1) forwards}
@media (prefers-reduced-motion:reduce){
  .js .index[data-reveal] .listing__row{opacity:1;transform:none}
  .js .index.is-in .listing__row{animation:none}
}

/* ---------- girih band divider ---------- */
.band{
  height:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><g fill='none' stroke='%233fc9ba' stroke-width='1'><rect x='9' y='9' width='16' height='16' transform='rotate(45 17 17)'/><path d='M0 17h9M25 17h9'/></g></svg>");
  background-size:34px 34px;background-repeat:repeat-x;background-position:center;
  opacity:.2;
}

/* ---------- sections ---------- */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--alt{background:color-mix(in srgb,var(--lajvard) 32%,var(--ink));border-block:1px solid var(--hair-soft)}

.section__head{max-width:44rem;margin-inline:auto;text-align:center;margin-block-end:clamp(2.2rem,4vw,3.2rem)}
.section__head .eyebrow{justify-content:center}
.section__title{font-family:var(--display);font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.35;text-wrap:balance}
.section__lead{color:var(--mist);margin-block-start:.8rem}

.section__head--start{margin-inline:0;text-align:start}
.section__head--start .eyebrow{justify-content:flex-start}

/* ---------- distro cards ---------- */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr))}
.card{
  display:flex;flex-direction:column;gap:1rem;
  padding:1.4rem;border:1px solid var(--hair-soft);border-radius:var(--r);
  background:color-mix(in srgb,var(--lajvard) 45%,transparent);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.card:hover{border-color:var(--hair);transform:translateY(-3px);background:color-mix(in srgb,var(--lajvard) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}

.card__top{display:flex;align-items:center;gap:.9rem}
.mono-tile{
  width:2.6rem;height:2.6rem;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--firouze);
  border:1px solid var(--hair);border-radius:7px;
  background:color-mix(in srgb,var(--firouze) 8%,transparent);
}
.card__name{font-size:1.18rem;font-weight:700}
.card__latin{font-family:var(--mono);font-size:.74rem;color:var(--mist);line-height:1.6}
.card__note{color:var(--mist);font-size:.9rem;line-height:1.85;flex:1}

.spec{display:grid;gap:.35rem;padding-block:.9rem;border-block:1px solid var(--hair-soft)}
.spec > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.spec dt{font-size:.78rem;color:var(--mist)}
.spec dd{font-size:.84rem;font-weight:500}
.spec dd.mono{font-size:.74rem;color:var(--chini)}

.card__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}

/* ---------- mirror board ---------- */
.board{border:1px solid var(--hair-soft);border-radius:var(--r);overflow:hidden;background:color-mix(in srgb,var(--ink) 60%,transparent)}
.board__head,.board__row{
  display:grid;
  grid-template-columns:minmax(9rem,1.4fr) 5.5rem minmax(7rem,.9fr) minmax(11rem,1.3fr) minmax(7.5rem,.9fr);
  gap:1rem;align-items:center;padding:.95rem clamp(.9rem,2vw,1.4rem);
}
.board__head{
  font-size:.74rem;color:var(--mist);font-weight:700;
  background:color-mix(in srgb,#000 18%,transparent);border-block-end:1px solid var(--hair-soft);
}
.board__row{border-block-end:1px solid var(--hair-soft);transition:background .18s ease}
.board__row:last-child{border-block-end:0}
.board__row:hover{background:color-mix(in srgb,var(--firouze) 6%,transparent)}

.board__name{font-family:var(--mono);font-size:.82rem;color:var(--firouze);overflow-wrap:anywhere}
.board__city{font-size:.88rem}
.board__proto{display:flex;gap:.35rem;flex-wrap:wrap}
.board__proto i{
  font-family:var(--mono);font-style:normal;font-size:.64rem;color:var(--mist);
  border:1px solid var(--hair-soft);border-radius:4px;padding:.15em .45em;
}
.board__lat{display:flex;align-items:center;gap:.7rem}
/* Latency as a proportion of the board's 90 ms scale, filled from the RTL start.
   Kept in the stylesheet rather than a style attribute so the page needs no
   'unsafe-inline' in style-src. */
.board__lat .bar{
  --w:0%;
  flex:1;height:4px;border-radius:2px;min-width:2.5rem;
  background:linear-gradient(to left,var(--firouze) var(--w),color-mix(in srgb,var(--firouze) 14%,transparent) var(--w));
}
.board__lat .bar[data-w="12"]{--w:12%}
.board__lat .bar[data-w="22"]{--w:22%}
.board__lat .bar[data-w="34"]{--w:34%}
.board__lat .bar[data-w="41"]{--w:41%}
.board__lat .bar[data-w="52"]{--w:52%}
.board__lat .bar[data-w="66"]{--w:66%}
.board__lat em{font-style:normal;font-size:.78rem;color:var(--mist);white-space:nowrap}
.board__state{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--mist)}
.board__state--wait .dot{background:var(--zaafaran);box-shadow:none;animation:none}

.board__note{margin-block-start:1.2rem;font-size:.86rem;color:var(--mist);text-align:center}
.board__note code{
  font-size:.82rem;color:var(--firouze);
  background:color-mix(in srgb,var(--firouze) 10%,transparent);
  padding:.1em .45em;border-radius:4px;
}

/* ---------- verify ---------- */
.verify__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.verify__grid .section__head{margin-block-end:0}

/* long unbreakable URLs inside <pre> would otherwise set this grid's minimum */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
.steps .code{min-width:0}
.step__title{font-size:1rem;font-weight:700;color:var(--zaafaran);margin-block-end:.7rem}

.code{position:relative;border:1px solid var(--hair-soft);border-radius:9px;background:color-mix(in srgb,#000 26%,var(--lajvard))}
/* pre carries dir="ltr" — inline-end is its right edge, where the button sits */
.code pre{
  margin:0;padding:1rem 1.1rem;padding-inline-end:5.5rem;overflow-x:auto;
  font-size:.8rem;line-height:2;color:var(--chini);
}
/* physical offsets: the button always tracks the code's own (LTR) right edge */
.copy{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  font-family:var(--fa);font-size:.72rem;font-weight:700;
  color:var(--mist);background:color-mix(in srgb,var(--ink) 85%,transparent);
  border:1px solid var(--hair-soft);border-radius:6px;padding:.3em .7em;cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.copy:hover{color:var(--firouze);border-color:var(--hair)}
.copy.is-done{color:var(--firouze);border-color:var(--firouze)}
html:not(.js) .copy{display:none}
html:not(.js) .code pre{padding-inline-end:1.1rem}

.step__out{margin-block-start:.6rem;font-family:var(--mono);font-size:.75rem;color:var(--mist)}
.step__out .ok{color:var(--firouze)}
.step__out .ok::before{content:"✓ ";}

/* ---------- tabs ---------- */
.tabs{max-width:52rem;margin-inline:auto}
.tabs__list{display:flex;flex-wrap:wrap;gap:.4rem;border-block-end:1px solid var(--hair-soft);margin-block-end:1.6rem}
.tab{
  font-family:var(--fa);font-size:.9rem;font-weight:500;color:var(--mist);
  background:none;border:0;border-block-end:2px solid transparent;
  padding:.7rem 1.05rem;cursor:pointer;transition:color .18s ease,border-color .18s ease;
  margin-block-end:-1px;
}
.tab:hover{color:var(--chini)}
.tab[aria-selected="true"]{color:var(--firouze);border-block-end-color:var(--firouze);font-weight:700}

/* Without JS the tablist cannot switch, so drop it and stack every panel with
   its own heading — all three setups stay reachable. */
.tabs__fallback-title{font-size:1.05rem;font-weight:700;color:var(--firouze);margin-block:2rem .9rem}
.js .tabs__fallback-title{display:none}
html:not(.js) .tabs__list{display:none}
html:not(.js) .tabs__panel[hidden]{display:block}

.tabs__hint{font-size:.9rem;color:var(--mist);margin-block-end:.7rem}
.tabs__hint + .code{margin-block-end:1.3rem}
.tabs__hint code{font-size:.8rem;color:var(--chini)}
.tabs__panel > .code:last-child{margin-block-end:0}

/* ---------- footer ---------- */
.footer{border-block-start:1px solid var(--hair-soft);padding-block:clamp(2.5rem,5vw,4rem) 1.5rem;background:color-mix(in srgb,var(--lajvard) 22%,var(--ink))}
.footer__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.footer__brand .brand__mark{width:2.2rem;height:2.2rem}
.footer__tag{margin-block-start:.9rem;color:var(--mist);font-size:.86rem;max-width:22rem}
.footer__col{display:flex;flex-direction:column;gap:.5rem}
.footer__col h3{font-size:.82rem;font-weight:700;color:var(--chini);margin-block-end:.3rem}
.footer__col a{font-size:.86rem;color:var(--mist);transition:color .18s ease}
.footer__col a:hover{color:var(--firouze)}
.footer__fine{font-size:.76rem;color:var(--mist);line-height:1.8;margin-block-start:.4rem;opacity:.8}

.footer__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  margin-block-start:2.5rem;padding-block-start:1.3rem;border-block-start:1px solid var(--hair-soft);
  font-size:.76rem;color:var(--mist);
}
.footer__bar .mono{font-size:.72rem}

/* ---------- scroll reveal ----------
   Hidden only under .js (set by boot.js before first paint), so the page still
   reads in full if the script is blocked, fails, or is switched off. */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
/* `1fr` alone means minmax(auto,1fr) — the auto minimum lets wide children
   (the ISO listing) stretch the track past the viewport. Pin the minimum to 0. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__copy{max-width:none}
  .verify__grid{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:860px){
  .nav,.topbar__cta{display:none}
  .hamburger{display:flex}
  /* the toggle is inert without JS — show the links instead of a dead button */
  html:not(.js) .hamburger{display:none}
  html:not(.js) .drawer[hidden]{display:flex}
  .board__head{display:none}
  .board__row{
    grid-template-columns:1fr auto;gap:.5rem .9rem;
    padding-block:1.1rem;
  }
  .board__name{grid-column:1;font-size:.86rem}
  .board__city{grid-column:2;text-align:end;color:var(--mist);font-size:.82rem}
  .board__proto{grid-column:1 / -1;order:3}
  .board__lat{grid-column:1 / -1;order:4}
  .board__state{grid-column:1 / -1;order:5}
}

@media (max-width:560px){
  .brand__tld{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  /* drop the mtime column so the listing fits a phone without sideways scroll */
  .listing{min-width:0}
  .listing__row{grid-template-columns:1fr auto;gap:.9rem;font-size:.72rem}
  .listing__date{display:none}
}

@media print{
  .topbar,.hero__field,.band,.copy{display:none}
  body{background:#fff;color:#000}
}