/* StockAVAX — the shell every page wears.
 *
 * This file exists because the five pages each carried their own copy of the
 * tokens, header, footer and buttons. They had already drifted, and a rebrand
 * or a phone-layout fix meant editing the same rule five times and missing one.
 * Everything below is shared by two or more pages; anything used once stays in
 * that page's own <style> block.
 *
 * One committed dark world: near-black ground, Avalanche red. There is no light
 * theme on purpose — the brand is a red glow on black, and a naive inversion
 * would make the accent unreadable. Every colour is painted explicitly so the
 * page never borrows a host's background.
 */

:root {
  /* ground and panels */
  /* Graph paper, not a dark room: an off-white ground with a faint grid (see
     body below), white panels, and ink-dark text. */
  --bg:        #EEF1F6;
  --bg-2:      #F7F9FC;
  --card:      #FFFFFF;
  --card-hi:   #F2F5FA;
  --line:      #C7D0DE;
  --line-hi:   #9AA7BC;

  /* text */
  --fg:        #0B1220;
  --muted:     #46536B;
  /* Measured, not chosen by eye. The old #6B7079 scored 3.61-4.02:1 against the
     four grounds this site uses, so every caption, label, axis figure and hint
     on the site failed WCAG AA — about seventy places. This is the first value
     that clears 4.5:1 on all four (bg 5.11, bg-2 4.98, card 4.84, card-hi 4.59)
     while staying clearly dimmer than --muted, which is what the token is for.
     Re-check it if any of those four backgrounds change: card-hi has the least
     room. */
  /* Re-measured for the grounds above: 5.2:1 at worst (card-hi). */
  --dim:       #5C6880;
  /* long-form prose: softer than --fg so a page of it does not glare */
  --fg-2:      #24304A;
  /* body text inside a warm callout */
  --warn-fg:   #6B5426;

  /* brand: Arbitrum blue. --accent is for anything clickable or branded.
     --on-accent is near-black, not white: white on this blue is 2.6:1 and
     fails; the dark ink is 7.6:1. */
  --accent:      #1B4CE0;
  --accent-hi:   #2F63FF;
  --accent-deep: #12379E;
  --on-accent:   #FFFFFF;
  --glow:        rgba(27, 76, 224, .30);
  --glow-soft:   rgba(27, 76, 224, .10);

  /* market direction. --down is deliberately lighter and less saturated than
     --accent: on a page this red, a falling number must not read as a button. */
  --up:    #0F8A4D;
  --down:  #C62828;
  --warn:  #8A6100;

  /* Square edges: the whole look is ruled paper and hard blocks. */
  --r:    2px;
  --grid: rgba(11, 18, 32, .06);
  --r-lg: 18px;
  --sans: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans-alt: Sora, "Segoe UI", system-ui, sans-serif;

  /* Gutter and header height travel together: several pages pull elements to
     the full-bleed edge and need to know both. */
  --gut: 22px;
  --top-h: 68px;
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with a UA rule, and ANY author rule that sets
   display beats a UA rule whatever its specificity. .btn below sets
   display:inline-flex, which silently un-hid every button the scripts hide this
   way -- the trade panel was offering "Approve AVAX" while paying in native
   AVAX, where there is nothing to approve. Restate it as an author rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* The ruled ground. Two hairline gradients, so it costs no image and scales
     with the page; the paper colour underneath is the token. */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* A wide table or chart must scroll inside its own box, never take the page
     sideways with it. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 0; }

.wrap { max-width: 1260px; margin: 0 auto; padding: 0 var(--gut); }

/* ── header ──────────────────────────────────────────────────────────────
 * Sticky, with a red hairline under it so the page has a horizon even when
 * the content behind it is pure black. */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--glow-soft), 0 12px 30px -24px #000;
}
.top-in { display: flex; align-items: center; gap: 30px; min-height: var(--top-h); }

/* ── wordmark ────────────────────────────────────────────────────────────
 * "Stock" in near-white, "AVAX" in brand red. The two halves are one word,
 * so they never wrap apart. */
.mark { display: flex; align-items: center; gap: 10px; flex: none; }
/* The mark is one file referenced everywhere rather than SVG pasted into ten
   headers, so it is cached once and only ever edited in one place. */
.mark .glyph { width: 34px; height: 34px; flex: none; display: block; border-radius: 8px;
               filter: drop-shadow(0 0 8px var(--glow)); }
.mark .word { font-weight: 800; font-size: 21px; letter-spacing: -.6px; white-space: nowrap; }
.mark .word i { font-style: normal; color: var(--fg); font-weight: 500; }
.mark .word b { font-weight: 800; color: var(--accent); }
.mark .sub {
  display: block; font-size: 7.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim); margin-top: 1px;
}

/* min-width:0 and the scroll are the backstop, not the design. A flex item's
   automatic minimum size is its content, so without this the nav refuses to
   shrink and shoves the header past the viewport instead -- and because
   .top-in is centred, the overflow splits and the wordmark goes off the LEFT
   where `overflow-x: hidden` on body eats it with no scrollbar to get it back.
   The rule below is what should normally catch it; this is here so a sixth
   link can never break the page again, only make the nav scroll. */
.top nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted);
           min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { flex: none; position: relative; padding: 4px 0; transition: color .15s; }
.top nav a:hover { color: var(--fg); }
.top nav a[aria-current] { color: var(--fg); font-weight: 600; }
.top nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px var(--glow);
}
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  border-radius: 10px; padding: 10px 16px; font: 500 14px var(--sans); cursor: pointer;
  background: var(--card-hi); color: var(--fg); border: 1px solid var(--line-hi);
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: #22222C; border-color: #43434F; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card-hi); border-color: var(--line-hi); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent); border-color: var(--accent); font-weight: 700;
  box-shadow: 0 8px 24px -12px var(--glow);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #7AD4FF, var(--accent-hi));
  border-color: var(--accent-hi);
}
.btn-primary:disabled:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* The chain switcher's closed state. The open menu is built in ui.js and uses
   the same panel as the wallet menu, so the two dropdowns in this header are
   one design. A native <select> was tried first and is why: its menu is drawn
   by the OS, so on a dark page it opens as a white panel with a blue highlight
   and the system font, and no amount of `appearance:none` reaches it. */
.chain { position: relative; display: inline-flex; }
.chain-btn {
  --ctint: var(--accent);
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--sans); color: var(--fg);
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--ctint) 70%, transparent);
  border-radius: 999px; padding: 6px 12px 6px 7px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctint) 14%, transparent);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.chain-btn:hover, .chain-btn[aria-expanded="true"] {
  background: var(--card-hi); border-color: var(--ctint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ctint) 22%, transparent);
}
.chain-btn .lbl { font-weight: 500; color: var(--dim); font-size: 12.5px; }
.chain-btn .cmark { width: 22px; height: 22px; border-radius: 50%; flex: none; object-fit: contain; }
.chain-btn i { width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; background: var(--ctint);
               box-shadow: 0 0 8px var(--ctint); flex: none; }
.chain-btn .caret { width: 14px; height: 14px; flex: none; opacity: .75; margin-left: 2px; transition: transform .15s; }
.chain-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ── shared atoms ────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }

.badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  border: 1px solid var(--line-hi); border-radius: 5px; padding: 3px 6px; color: var(--muted);
}
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--card);
}
.pill {
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--muted); font-weight: 500;
}
.chip {
  border: 1px solid var(--line); background: transparent; border-radius: 9px; padding: 7px 14px;
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--line-hi); color: var(--fg); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
  box-shadow: 0 6px 18px -10px var(--glow);
}
.seg {
  background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 13px;
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.seg:hover { color: var(--fg); }
.seg[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
  box-shadow: 0 6px 18px -10px var(--glow);
}

.av {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-size: 17px; background: var(--card-hi); border: 1px solid var(--line-hi); overflow: hidden;
}
/* A pair asset's logo, wherever one is shown. */
.sk-pair { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }

.up { color: var(--up); }
.down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; }

/* Marks a figure derived from DEX prices rather than an oracle. */
.est {
  font-size: 9.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--warn); margin-left: 5px; vertical-align: middle;
}
.demo {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--warn); background: rgba(224, 180, 114, .13);
  border: 1px solid rgba(224, 180, 114, .3); border-radius: 5px; padding: 2px 7px; vertical-align: 2px;
}

.note { margin: 30px 0 10px; font-size: 12.5px; color: var(--dim); line-height: 1.7; max-width: 88ch; }
.empty { margin: 8px 0; font-size: 14px; color: var(--dim); }

.ca {
  font: 600 10px var(--sans); letter-spacing: .6px; color: var(--dim);
  border: 1px solid var(--line-hi); border-radius: 6px; padding: 4px 8px;
  background: transparent; cursor: pointer;
}
.ca:hover { color: var(--fg); border-color: var(--accent); }
.ca.done { color: var(--up); border-color: var(--up); }

/* Any table wide enough to overflow scrolls inside its own box.
 *
 * That keeps the page from moving sideways, but it also hides the fact that
 * there is more table: on a phone the right-hand columns simply are not there
 * and nothing says to swipe. The mask fades the right edge while the box is
 * scrollable and disappears once it is scrolled to the end, so the affordance
 * is the content itself rather than a caption nobody reads. */
.tblwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  --edge: 28px;
  mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), transparent);
}
.tblwrap.at-end { --edge: 0px; }
@media (min-width: 900px) { .tblwrap { --edge: 0px; } }

/* A contract address is 42 characters with no break opportunity anywhere in it.
   Every place one is printed has to be allowed to break: at 375px a single
   unbroken address drags the whole page sideways, which is how the docs page
   was scrolling to 434px on a phone. */
code, .kv .v, .addr, .mono { overflow-wrap: anywhere; }

/* The same rule, for the same reason, wherever a coin's own name or ticker is
   printed — and this one is hostile input, not just long input. The contract
   takes any 32 characters, so a coin can be named with no space in it at all,
   and one launched that way pushed a 375px phone out to 800px on every page
   that showed it. Nobody has to be attacked for this to happen, but anybody
   could do it deliberately, which puts it in the same class as the escaping in
   js/ui.js: chain text is untrusted, in layout as well as in markup.

   break-word, NOT anywhere. The two break a long word identically; they differ
   in whether those break opportunities count towards the element's min-content
   width. `anywhere` says they do, which inside a table lets the column collapse
   to one character wide: "Avalanche Doge" came out as a vertical stack of
   single letters in the portfolio. `break-word` breaks the word that would
   overflow and leaves the column sized by its longest word, which is what a
   name column wants. */
#tName, #tTick, #pNm, #pTk,
.tick, .nm, .sym, .coin .nm, .coin .tk, .asset .sub {
  overflow-wrap: break-word;
}

/* ── page head, shared by create / docs / portfolio ──────────────────── */
.phead { margin: 34px 0 26px; }
.phead h1 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -2px;
            line-height: 1.05; text-wrap: balance; }
.phead p { margin: 12px 0 0; color: var(--muted); max-width: 62ch; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 26px 0 46px; }
.foot { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.foot a:hover { color: var(--fg); }
.foot-mark .glyph { width: 24px; height: 24px; border-radius: 6px; }
.foot-mark .word { font-size: 16px; }
.foot-mark .sub { display: none; }
.foot .sp { margin-left: auto; }
/* The X account sits with the chain line rather than in its own row: one
   social account does not need a strip of icons, and a lone icon with no
   label reads as decoration. */
.foot .sp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot .x { display: inline-flex; align-items: center; gap: 6px; }
.foot .x:hover { color: var(--accent); }
.foot .dot { color: var(--line-hi); }


/* ── responsive ──────────────────────────────────────────────────────────
 * Three real layouts, not one design squeezed: desktop, tablet (<=1024) and
 * phone (<=640). The nav never disappears — a site you cannot navigate on a
 * phone is broken, not minimal. */

/* tablet */
@media (max-width: 1024px) {
  :root { --gut: 18px; }
  .top-in { gap: 20px; }
  .top nav { gap: 20px; font-size: 14px; }
  .phead h1 { font-size: 34px; letter-spacing: -1.4px; }
}

/* The nav drops to its own row before it can collide with the wallet button.
   This said 900px and was simply wrong. Measured: the one-row header needs
   979px here and 1033px on the sibling site that shares this file, so every
   width from 901 up was pushing the header past the edge -- and .top-in is
   centred, so the overflow split both ways and clipped the wordmark and the
   first nav links off the LEFT, where body's `overflow-x: hidden` eats them
   with no scrollbar to get them back.

   1100 covers both with slack for a longer chain name in the switcher. If the
   header gains a link, re-measure rather than nudge this -- and note
   headerAutoHide() in js/ui.js carries the same number. */
@media (max-width: 1100px) {
  .top-in { min-height: 0; height: auto; flex-wrap: wrap; padding-top: 11px; gap: 12px 16px; }
  .top nav {
    order: 3; width: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none;
    padding: 4px var(--gut) 10px; margin: 0 calc(-1 * var(--gut));
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; }
  .top nav a[aria-current]::after { bottom: -4px; }

  /* Scrolling down drops the nav row; scrolling up brings it straight back.
     The nav is the row to lose, not the wordmark and the wallet button.

     display:none rather than a transform or an animated height. A transform
     would move the whole header, taking the row worth keeping off screen
     instead; an animated height fights nav's own overflow-x, which is what
     makes it scroll sideways when the links do not fit. And because the header
     is sticky, its place in the flow is at the very top of the document — by
     the time this fires the page has scrolled past it, so nothing below moves
     when it shrinks. */
  .top.tucked nav { display: none; }
}

/* phone */
@media (max-width: 640px) {
  :root { --gut: 14px; }
  body { font-size: 14.5px; }
  /* Kept on phones now that it is a control rather than a label: the switcher
     is the only way off a chain, and the header already wraps at this width. */
  .chain-btn { padding: 5px 10px 5px 6px; font-size: 13px; }
  .top .chain-btn .lbl { display: none; }   /* the logo and name say it; the header has no room
                                            for a label on a phone */
  .mark .glyph { width: 30px; height: 30px; }
  .mark .word { font-size: 19px; }
  .mark .sub { display: none; }
  .btn { padding: 9px 14px; font-size: 13.5px; }
  .phead { margin: 24px 0 20px; }
  .phead h1 { font-size: 28px; letter-spacing: -1.1px; }
  footer { margin-top: 38px; padding: 22px 0 34px; }
  .foot { gap: 14px; font-size: 12.5px; }
  .foot .sp { margin-left: 0; width: 100%; }
}

@media (max-width: 380px) {
  .mark .word { font-size: 17px; }
  .btn { padding: 8px 12px; font-size: 13px; }
}

/* ── touch targets ───────────────────────────────────────────────────────
 * A fingertip is about 9mm; a mouse pointer is one pixel. Measured at 390px,
 * this site had 28 controls under 40px on the coin page alone and a cluster
 * at 24px — the chart timeframes, the buy/sell slippage buttons and the
 * custom-slippage input among them. Mis-tapping a slippage button on a trade
 * panel costs money, so this is not only a comfort question.
 *
 * min-height rather than padding, so a control grows to a thumb-sized box
 * without its text moving off the baseline it shares with its neighbours.
 *
 * The width fallback goes to 1024, not 640: pointer:coarse is the honest
 * predicate but a tablet at 820px matched neither it (in testing) nor a
 * 640px phone rule, so every iPad-sized viewport fell through the gap and
 * got 26 sub-40px controls. A narrow desktop window picking up thumb-sized
 * buttons is the cheaper mistake of the two. */
@media (pointer: coarse), (max-width: 1024px) {
  /* min-height does nothing to a non-replaced inline box, and most of these are
     <a> or <button> that some page left inline — so each one is given a box
     before it is given a height. */
  .btn, .chip, .cat, .seg, .ca,
  /* The network switcher was 33px. It is the only way off a chain. */
  .chain-btn,
  .tf button, .tabs button, .pw-opts button, .slip-opts button,
  /* Buy and Sell are the two most consequential controls on the site. They
     were 33px. */
  .swaptabs button {
    min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* A link sitting on its own in a panel row, not inside a sentence: it has a
     line box and nothing else, which left "Pharaoh" at 15px.

     34px was the first pass and still missed — a finger needs 44. Growing
     the link grows the row, which is what keeps two stacked rows from handing
     a tap near their shared edge to the wrong one; a 44px hit-area
     pseudo-element would overlap the neighbour instead.

     #lockProof's link is deliberately NOT here any more. It sits mid-sentence,
     where WCAG exempts it and where a 44px inline-flex box prises apart the
     line it lives on. */
  .kv a, .steps a, #tradeOut {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .tf button, .slip-opts button, .pw-opts button, .cat { padding-inline: 14px; }
  .tabs button { padding-block: 10px; }
  .top nav a, .foot a, .back {
    min-height: 42px; display: inline-flex; align-items: center;
  }
  /* The wordmark is the way back to Explore from every page. */
  .mark { min-height: 42px; }
  .top nav a[aria-current]::after { bottom: 0; }
  input[type="text"], input[type="search"], input[type="number"], select { min-height: 42px; }
  /* A transaction link in a dense table cannot be 42px without doubling the
     height of the table it sits in, but 12px is not a target either. Padding
     inside the cell buys a usable box without moving the text off its row. */
  /* Padding was the wrong lever here: 12px gave 38.7px and 13px gave 39.7px,
     because the line box under a 12px font is 13.7px and the total is padding
     plus that, not padding plus a round number. Stating the height directly
     lands on 44 — what Apple and WCAG AAA both name — and matches how every
     other target in this block is written. Rows tile without gaps, so no tap
     falls between two links. */
  td a, td button {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ── the iOS zoom guard ──────────────────────────────────────────────────
 * Safari on iPhone zooms the entire page when a focused form control has a
 * font smaller than 16px, and it does not zoom back out. The launch form had
 * nine such fields at 13-14.5px, so every tap on a name, ticker or link field
 * threw the page out of scale, and the trade panel did it on the custom
 * slippage box.
 *
 * !important is deliberate and is the narrowest tool that works: each page
 * sets its own input font with the `font:` shorthand, which is more specific
 * than anything this file can say from outside without it. A page may choose
 * the family and the weight; it may not choose a size that breaks the
 * viewport. 16px is the threshold, not a preference — below it the bug
 * returns. */
@media (pointer: coarse), (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── bottom bar (phones) ────────────────────────────────────────────────
   A launchpad is used one-handed, and the top nav sits above the fold once
   the page scrolls. Four destinations, thumb height, hidden from 641px up
   where the header nav is always visible. */
.botnav { display: none; }
@media (max-width: 640px) {
  .botnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    background: rgba(247, 249, 252, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .botnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 56px; text-decoration: none;
    color: var(--dim); font: 600 10.5px var(--sans); letter-spacing: .5px; text-transform: uppercase;
  }
  .botnav a[aria-current="page"] { color: var(--accent); }
  .botnav a.mid span.ic {
    background: var(--accent); color: var(--on-accent); border-radius: 12px;
    width: 34px; height: 26px; display: grid; place-items: center; font-size: 17px; font-weight: 700;
  }
  .botnav .ic { font-size: 17px; line-height: 1; }
  /* room for the bar, so the last row of content is never under it */
  body { padding-bottom: 64px; }
}


/* ── ruled-paper type ────────────────────────────────────────────────────
   Headings are set in the mono face, uppercase and tight, the way a
   spreadsheet or a ledger prints them. Body copy stays sentence case.
*/
h1, h2, .sechead h2, .an-head h1 {
  text-transform: uppercase; letter-spacing: .02em; font-weight: 700;
}
h1 { letter-spacing: 0; }