/* LevelUp Local AI Academy — Poster Design System
   See /DESIGN.md at the repo root. Source of truth for the new homepage and
   any other page being migrated to the poster design system. */

  /* ============================================================
     LVL UP LOCAL · POSTER · DESIGN SYSTEM (NON-NEGOTIABLE)
     ------------------------------------------------------------
     PALETTE — three colors, no exceptions (matches brand logo):
       · paper  #F2EBDC  (cream ground)
       · navy   #2C3262  (text, rules, dark grounds — was "ink")
       · gold   #F1BB56  (accent, riso offset, primary CTA face)
       No vermilion. No black. No teal. No fourth color.

     TYPE SCALE — four sizes only:
       · h-mega — hero only. Used ONCE per page.
       · h-big  — section openers (§ 02–§ 07).
       · h-med  — list-row headlines (capability rows, etc).
       · body   — 18px / 1.5.
       Bricolage 800 = display.
       Fraunces italic = ONE word per headline maximum (tonal pivot).
       JetBrains Mono = meta only — eyebrows, coordinates,
                        attribution, timestamps, ticker.

     RISO OFFSET RULE (softened per Tal feedback):
       Block-level display headlines >= h-big, on their own line.
       Translation (0.10ch, 0.06ch). Color = gold @ 0.75 opacity.
       Tonal echo, not a hard punch.
       Dark-ground variant — on navy grounds add `.riso-on-dark`:
         multiply muddies gold-on-navy. Headline color flips to
         gold; offset becomes paper @ 0.35 opacity, blend = normal.

     HOVER VOCABULARY:
       Navy-invert + arrow translate 8px = clickable rows ONLY
       (the tour-date sessions). Capability rows do NOT hover.

     BUTTON SHADOWS — one rule, restated for the navy/gold triad:
       Shadow color = the third color in (paper / navy / gold)
       not used by the button face or the ground beneath it.
       · btn-primary  (gold face) on paper → shadow navy
       · btn-secondary (navy face)  on paper → shadow gold
       · btn-secondary (navy face)  on gold  → shadow paper

     TEXTURE:
       · Paper grain (4px dot) on body — once.
       · Halftone — reserved for the final-CTA ground only.

     MOTION:
       · pulse-dot on live indicators only (gold dot).
       · marquee on the top ticker only.
       · rise on hero entrance only.
       · session hover translate 8px on tour-dates only.

     PHOTO TREATMENT (added when integrating real assets):
       Two — and only two — image vocabularies on this page:
       1. AUTHENTIC PROOF (review screenshots, text-message
          screenshot): full color, NO duotone, NO color overlay.
          Wrapped in `.photo-card` — 1px navy hairline frame with
          paper padding inside. Optional gold corner tag on the
          frame using the same vocabulary as the hero/ticket-stub
          stamp (gold ground, navy 2px border, mono small-caps).
          Caption sits OUTSIDE/UNDER the frame in mono.
       2. ATMOSPHERE (workshop in-the-room photos):
          full color, framed by a thin navy hairline (`.photo-card`)
          OR used full-bleed as a banner with a navy gradient at
          the bottom for caption legibility. Pick ONE per section
          — never mix duotone and full-color on the same band.
       Rule of reuse: the corner-tag treatment must echo the
       existing stamp/sticker vocabulary; if a new chrome rule
       appears it must be reused at least twice on the page.

     CARD HIERARCHY (paths/options sections — § 05 "Three ways in"):
       When a section presents PRIMARY / SECONDARY / TERTIARY
       options side-by-side, signal weight through the existing
       vocabulary only — never through new color or new chrome.
         · PRIMARY    — 2px navy border, gold stamp/corner accent
                        echoing the hero/ticket-stub stamp,
                        btn-primary CTA (gold face).
         · SECONDARY  — 1px navy hairline (matches .photo-card),
                        btn-outline CTA (paper face, navy text).
         · TERTIARY   — 1px navy hairline, simple text-link CTAs
                        with arrow glyph. No button.
       All three cards share the same paper ground and same
       internal type rhythm (mono eyebrow → display title →
       mono price line → body pitch → CTA). Hierarchy is conveyed
       only by border weight + accent + CTA strength.

     UTILITY LINK (capability rows § 02 "See it in action"):
       14px JetBrains Mono, navy, uppercase tracking-[.18em],
       gold arrow glyph (→). Hover: navy underline, no other
       treatment. Sits below the row headline as a small
       utility link — must NOT compete with the headline.
     ============================================================ */

  :root{
    --navy:#2C3262;
    --paper:#F2EBDC;
    --paper-2:#E8DFC9;
    --rule:#2C3262;
    --gold:#F1BB56;
    --muted: rgba(44, 50, 98, 0.7);
  }
  html{ background:var(--paper); color:var(--navy); scroll-behavior:smooth; scroll-padding-top:5rem; }
  body{ background:var(--paper); color:var(--navy); }
  body{
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background-color:var(--paper);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(44,50,98,.10) 1px, transparent 0);
    background-size: 4px 4px;
  }
  .display{font-family:'Bricolage Grotesque',sans-serif;font-feature-settings:"ss01","ss02";letter-spacing:-0.035em;}
  /* Editorial pivot — retired. Headlines read flat in Bricolage 800.
     The `.editorial` class is kept as a no-op so existing markup
     stays valid; spans inherit their surrounding display type and
     drop any italic from the `italic` Tailwind class or inline style.
     Body-inline emphasis uses plain <em> in Inter italic instead. */
  .editorial{
    font-family:inherit !important;
    font-weight:inherit !important;
    font-style:normal !important;
    letter-spacing:inherit;
    font-variation-settings:inherit;
  }
  .mono{font-family:'Inter',sans-serif;font-weight:500;}
  /* True monospace — reserved for tabular/spec content (ticket-stub
     spec block: Where / Class / Bring / Refund). Use only where the
     fixed-width grid is actually doing work. Eyebrows and meta labels
     use .mono (now Inter medium) for readability on grain. */
  .tabular{font-family:'JetBrains Mono',monospace;}
  .navy{color:var(--navy);} .paper{color:var(--paper);}
  .bg-navy{background:var(--navy);} .bg-paper{background:var(--paper);}
  .bg-gold{background:var(--gold);}
  .border-navy{border-color:var(--navy);}

  /* Riso offset on display type — block-level only. Softened. */
  .riso {
    position:relative;
    color:var(--navy);
  }
  .riso::before{
    content:attr(data-text);
    position:absolute; left:0; top:0;
    color:var(--gold);
    transform:translate(0.10ch, 0.06ch);
    z-index:-1;
    mix-blend-mode:multiply;
    opacity:.75;
  }
  /* Dark-ground variant — multiply muddies gold-on-navy.
     On dark grounds: headline flips to paper for legibility,
     offset becomes paper @ low opacity, normal blend. */
  .riso-on-dark{
    color:var(--paper);
  }
  .riso-on-dark::before{
    color:var(--paper);
    mix-blend-mode:normal;
    opacity:.35;
  }

  /* Heavy double rule */
  .rule-thick{ border-top:6px solid var(--navy); border-bottom:1px solid var(--navy); height:14px; }
  .rule-thin{ height:1px; background:var(--navy); }

  /* Marquee */
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .marquee-track{ display:flex; width:max-content; animation: marquee 38s linear infinite; }

  /* Halftone — reserved for final-CTA ground only */
  .halftone{
    background-image: radial-gradient(circle, var(--navy) 1.2px, transparent 1.4px);
    background-size: 7px 7px;
  }

  /* Ticket perforation */
  .perf-top, .perf-bottom{
    background-image: radial-gradient(circle at 6px 6px, var(--paper) 6px, transparent 6.5px);
    background-size: 18px 12px;
    background-repeat: repeat-x;
    height:12px;
  }

  /* Stamp — used on hero AND ticket stub (paired) */
  .stamp{
    border:3px solid var(--navy);
    color:var(--navy);
    transform:rotate(-6deg);
    font-family:'Bricolage Grotesque',sans-serif;
    letter-spacing:.05em;
    box-shadow: inset 0 0 0 1px var(--navy);
    background:var(--gold);
  }
  .stamp::before{
    content:""; position:absolute; inset:-2px;
    background-image:radial-gradient(circle, rgba(44,50,98,.25) 1px, transparent 1.4px);
    background-size:5px 5px; mix-blend-mode:multiply; pointer-events:none;
  }

  /* Display headline scaling */
  .h-mega{ font-size: clamp(3.6rem, 13vw, 12rem); line-height: .82; }
  .h-hero{ font-size: clamp(2.6rem, 8.5vw, 7rem); line-height: .9; }
  .h-big { font-size: clamp(2.4rem, 7vw, 6rem);  line-height: .9;  }
  .h-med { font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1; }

  /* Secondary hero — for non-homepage pages.
     Same vocabulary as the primary hero (mono meta row + thick rule +
     display headline + intro paragraph), but tighter:
       · One single-line headline at h-hero (between h-mega and h-big)
       · No multi-line lockup, no rise stagger across multiple blocks
       · Shorter section padding than the homepage hero
     Use this on About, Showcase, Book, Contact, and any future
     non-conversion-oriented page. The homepage keeps the h-mega lockup. */

  /* Pulsing dot — live indicators only */
  @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }
  .pulse-dot{ animation: pulse-dot 1.4s ease-in-out infinite; }

  /* Capability rows — non-clickable; no hover state */
  .cap-row{ border-top:1px solid var(--navy); }

  /* Diagonal sticker */
  .sticker{ transform: rotate(-3deg); }

  /* Number callout */
  .numeral{ font-family:'Bricolage Grotesque'; font-weight:300; font-variation-settings:"wght" 300, "opsz" 96; letter-spacing:-.04em; }

  /* Selection */
  ::selection{ background:var(--gold); color:var(--navy); }

  /* Buttons — shadow = the third color (see system rules above) */
  /* Primary: gold face, navy text, navy shadow. */
  .btn-primary{
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--gold); color:var(--navy);
    padding:1.1rem 1.6rem; font-family:'Bricolage Grotesque'; font-weight:700;
    letter-spacing:-.01em; text-transform:uppercase; font-size:1rem;
    border:2px solid var(--navy);
    box-shadow: 6px 6px 0 var(--navy);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow: 8px 8px 0 var(--navy); }
  /* Secondary on paper: navy face, paper text, gold shadow. */
  .btn-secondary{
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--navy); color:var(--paper);
    padding:1.1rem 1.6rem; font-family:'Bricolage Grotesque'; font-weight:700;
    letter-spacing:-.01em; text-transform:uppercase; font-size:1rem;
    border:2px solid var(--navy);
    box-shadow: 6px 6px 0 var(--gold);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-secondary:hover{ transform:translate(-2px,-2px); box-shadow: 8px 8px 0 var(--gold); }
  /* Outline secondary: paper face, navy text, navy border, gold shadow. */
  .btn-outline{
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--paper); color:var(--navy);
    padding:1.1rem 1.6rem; font-family:'Bricolage Grotesque'; font-weight:700;
    letter-spacing:-.01em; text-transform:uppercase; font-size:1rem;
    border:2px solid var(--navy);
    box-shadow: 6px 6px 0 var(--gold);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-outline:hover{ transform:translate(-2px,-2px); box-shadow: 8px 8px 0 var(--gold); }

  /* Fade-in stagger */
  @keyframes rise { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
  .rise{ opacity:0; animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }

  /* Big arrow */
  .arrow{ display:inline-block; transform:translateY(-2px); }

  /* Session row hover + selected state — clickable rows ONLY.
     The selected state mirrors the hover treatment so picking a session
     in the registration form gives the same visual signal as hovering it. */
  .session{ border-bottom:1px solid var(--navy); }
  .session:hover,
  .session:has(input:checked){ background:var(--navy); color:var(--paper); }
  .session:hover .seat-pill,
  .session:has(input:checked) .seat-pill{ background:var(--gold); color:var(--navy); border-color:var(--navy); }
  .session:hover .session-arrow,
  .session:has(input:checked) .session-arrow{ transform: translateX(8px); }
  .session-arrow{ transition: transform .25s ease; }

  /* Animated underline on inline links */
  .gold-link{ position:relative; }
  .gold-link::after{
    content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
    background:var(--gold); transform-origin:left; transform: scaleX(0);
    transition: transform .35s ease;
  }
  .gold-link:hover::after{ transform: scaleX(1); }

  /* Ticker text */
  .ticker-item{ display:inline-flex; align-items:center; gap:1.5rem; padding-right:3rem; }

  @media (min-width: 900px){
    .h-mega{ letter-spacing: -0.045em; }
  }

  .col-rule{ border-left:1px solid var(--navy); }

  /* Top nav */
  .site-nav-link{
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--navy);
    font-weight:500;
    transition:opacity .2s ease;
  }
  .site-nav-link:hover{ opacity:.65; }
  .site-nav-cta{
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--gold); color:var(--navy);
    padding:.55rem 1rem; font-family:'Bricolage Grotesque'; font-weight:700;
    text-transform:uppercase; font-size:.78rem; letter-spacing:.02em;
    border:2px solid var(--navy);
    box-shadow: 3px 3px 0 var(--navy);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .site-nav-cta:hover{ transform:translate(-1px,-1px); box-shadow: 4px 4px 0 var(--navy); }

  /* Photo cards — authentic-proof and atmosphere images.
     Hairline navy frame, paper inset, optional gold corner tag.
     Echoes the stamp/sticker chrome vocabulary. */
  .photo-card{
    border:1px solid var(--navy);
    background:var(--paper);
    padding:12px;
    position:relative;
    display:block;
  }
  .photo-card img{
    display:block; width:100%; height:auto;
  }
  /* On navy ground, the inner inset stays paper for fidelity */
  .photo-card.on-navy{
    border-color:var(--paper);
  }
  /* Corner tag — sibling of .stamp, but flat (no rotation) so
     screenshots don't wobble. Same paint: gold ground, navy text,
     navy 2px border, mono small-caps. */
  .corner-tag{
    position:absolute;
    top:-1px; left:-1px;
    background:var(--gold);
    color:var(--navy);
    border:2px solid var(--navy);
    padding:.35rem .55rem;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    z-index:2;
  }
  /* Slight liveliness for the hero $26K screenshot only */
  .tilt-left{ transform: rotate(-1deg); }

  /* Workshop full-bleed band */
  .workshop-band{
    position:relative;
    width:100%;
    height: clamp(220px, 38vw, 360px);
    overflow:hidden;
    border-top:1px solid var(--navy);
    border-bottom:1px solid var(--navy);
    background:var(--navy);
  }
  .workshop-band img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .workshop-band .band-overlay{
    position:absolute; left:0; right:0; bottom:0; height:55%;
    background: linear-gradient(to top, rgba(44,50,98,.78) 0%, rgba(44,50,98,0) 100%);
    pointer-events:none;
  }
  .workshop-band .band-caption{
    position:absolute; left:0; right:0; bottom:18px;
    padding: 0 1.25rem;
    color:var(--paper);
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.28em;
  }
  @media (min-width: 768px){
    .workshop-band .band-caption{ padding: 0 2rem; bottom:24px; }
  }

  /* Capability utility link — "See it in action" */
  .util-link{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-family:'JetBrains Mono',monospace;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--navy);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition: border-color .15s ease;
    padding-bottom:1px;
  }
  .util-link .util-arrow{ color:var(--gold); }
  .util-link:hover{ border-bottom-color:var(--navy); }

  /* Path cards — § 05 "Three ways in" */
  .path-card{
    background:var(--paper);
    padding:2rem;
    display:flex;
    flex-direction:column;
    height:100%;
    position:relative;
  }
  .path-card.path-primary{ border:2px solid var(--navy); }
  .path-card.path-secondary{ border:1px solid var(--navy); }
  .path-card.path-tertiary{ border:1px solid var(--navy); }
  .path-card .path-eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.25em;
    color:var(--muted);
  }
  .path-card.path-primary .path-eyebrow{ color:var(--navy); }
  .path-card .path-title{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;
    line-height:.95;
    letter-spacing:-.02em;
    margin-top:.6rem;
  }
  .path-card.path-primary .path-title{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
  .path-card.path-secondary .path-title{ font-size:clamp(1.6rem,2.8vw,2.25rem); }
  .path-card.path-tertiary .path-title{ font-size:clamp(1.5rem,2.6vw,2rem); }
  .path-card .path-price{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--muted);
    margin-top:1rem;
  }
  .path-card .path-pitch{
    margin-top:1rem;
    font-size:16px;
    line-height:1.55;
  }
  .path-card .path-cta-wrap{
    margin-top:auto;
    padding-top:1.5rem;
  }
  /* Primary card gold corner accent — echoes stamp vocabulary */
  .path-card.path-primary .path-stamp{
    position:absolute;
    top:-14px; right:1.5rem;
    background:var(--gold);
    color:var(--navy);
    border:2px solid var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
    padding:.4rem .7rem;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    transform:rotate(-3deg);
  }

  /* Book cover CSS-mockup — paper / navy / gold only */
  .book-cover-wrap{
    margin-top:1.5rem;
    display:flex;
    justify-content:center;
  }
  .book-cover{
    position:relative;
    width:200px;
    max-width:100%;
    aspect-ratio: 2 / 3;
    background:var(--navy);
    color:var(--gold);
    padding: 1.25rem 1rem 1rem 1rem;
    box-shadow: 6px 6px 0 rgba(44,50,98,.18), 2px 0 0 0 rgba(44,50,98,.6);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }
  /* Spine peek on left edge */
  .book-cover::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0;
    width:4px;
    background:var(--navy);
    border-right:1px solid rgba(241,187,86,.35);
    z-index:1;
  }
  /* Subtle gold rule across the middle */
  .book-cover::after{
    content:"";
    position:absolute;
    left:14%; right:14%;
    top:55%;
    height:1px;
    background:var(--gold);
    opacity:.55;
  }
  .book-cover .book-title{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;
    color:var(--gold);
    font-size:1.5rem;
    line-height:.95;
    letter-spacing:-.02em;
    padding-left:6px;
    padding-top:.25rem;
  }
  .book-cover .book-author{
    font-family:'JetBrains Mono',monospace;
    color:var(--gold);
    font-size:9px;
    letter-spacing:.28em;
    text-transform:uppercase;
    padding-left:6px;
    padding-bottom:.15rem;
    opacity:.95;
  }
  @media (max-width: 767px){
    .book-cover{ width:160px; }
    .book-cover .book-title{ font-size:1.2rem; }
  }

  /* ============================================================
     LONG-FORM CONTENT (.blog-content)
     ------------------------------------------------------------
     For blog posts, book chapters, or anywhere a paragraph of body
     text needs to flow. Stays inside the three-color system:
     navy text on paper, gold accents, mono for code/labels.
     Max-width on the wrapping container should be ~720px for
     comfortable reading line length. */
  .blog-content { color: var(--navy); font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.65; }
  .blog-content h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; margin: 2.4em 0 0.6em; color: var(--navy); }
  .blog-content h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.1; letter-spacing: -0.015em; margin: 2em 0 0.5em; color: var(--navy); }
  .blog-content h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.15rem; margin: 1.6em 0 0.4em; color: var(--navy); }
  .blog-content p { margin: 0 0 1.1em; }
  .blog-content p:last-child { margin-bottom: 0; }
  .blog-content a { color: var(--navy); border-bottom: 2px solid var(--gold); text-decoration: none; transition: background-color .15s ease; padding-bottom: 1px; }
  .blog-content a:hover { background: var(--gold); }
  .blog-content strong { color: var(--navy); font-weight: 700; }
  .blog-content em { font-style: italic; }
  .blog-content ul, .blog-content ol { margin: 0 0 1.2em; padding-left: 1.6em; }
  .blog-content ul { list-style-type: disc; }
  .blog-content ol { list-style-type: decimal; }
  .blog-content li { margin-bottom: 0.4em; }
  .blog-content li > p { margin-bottom: 0.4em; }
  .blog-content blockquote { margin: 1.8em 0; padding: 0 0 0 1.5em; border-left: 3px solid var(--gold); font-family: 'Fraunces', serif; font-style: italic; font-size: 1.2em; line-height: 1.45; color: var(--navy); }
  .blog-content blockquote p { margin-bottom: 0.8em; }
  .blog-content blockquote p:last-child { margin-bottom: 0; }
  .blog-content code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; background: var(--paper-2); padding: 0.12em 0.4em; color: var(--navy); }
  .blog-content pre { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; background: var(--navy); color: var(--paper); padding: 1.25em 1.4em; margin: 1.6em 0; overflow-x: auto; line-height: 1.55; border: 1px solid var(--navy); }
  .blog-content pre code { background: transparent; padding: 0; color: var(--paper); }
  .blog-content hr { border: none; height: 1px; background: var(--navy); margin: 2.4em 0; }
  .blog-content img { display: block; width: 100%; height: auto; margin: 1.8em 0; border: 1px solid var(--navy); }
  .blog-content figure { margin: 1.8em 0; }
  .blog-content figcaption { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-top: 0.6em; }
  .blog-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.95em; }
  .blog-content th, .blog-content td { border: 1px solid var(--navy); padding: 0.6em 0.9em; text-align: left; vertical-align: top; }
  .blog-content th { background: var(--paper-2); font-weight: 700; }
  .blog-content > *:first-child { margin-top: 0; }

  /* Footer column heading */
  .footer-h{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--gold);
    margin-bottom:1rem;
  }
  .footer-link{
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--paper);
    opacity:.85;
    transition:opacity .15s ease;
  }
  .footer-link:hover{ opacity:1; color:var(--gold); }