/* ===========================================================
   SCRIPT-monkee — scriptmonkee.com site stylesheet
   Palette: charcoal + engraved warm gold (the typewriter-tile
   logo), a rainbow/jewel gradient reserved for "AI magic"
   moments (the poetic piXie mark), and an authentic screenplay
   (Courier) motif running through every section.
   =========================================================== */

:root{
  --bg:        #0a090b;
  --bg-panel:  #16131a;
  --bg-panel-2:#1e1922;
  --line:      #322c38;

  --ink:       #f5eee1;
  --ink-dim:   #b7ad9e;
  --ink-faint: #7c7268;

  --gold:      #dcac54;
  --gold-lite: #f2cf8c;
  --gold-dark: #8a6423;

  --magic-1:   #ff3fb4;
  --magic-2:   #8a5cff;
  --magic-3:   #34d6ff;
  --magic-4:   #ffd23f;
  --magic-grad: linear-gradient(100deg,var(--magic-1),var(--magic-2) 35%,var(--magic-3) 68%,var(--magic-4));

  --paper:     #f3ecd8;
  --paper-ink: #26221c;

  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1180px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* subtle film-grain wash over the whole page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.9) .6px, transparent .6px);
  background-size:3px 3px;
}

/* mouse-follow spotlight */
#glow{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(420px 420px at var(--gx,50%) var(--gy,20%), rgba(220,172,84,.08), transparent 60%);
  transition:background .08s linear;
}

img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0 0 .5em;color:var(--ink)}
p{color:var(--ink-dim);margin:0 0 1em}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:600 12.5px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lite);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-dark)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1.in{transition-delay:.08s}
.reveal-delay-2.in{transition-delay:.16s}
.reveal-delay-3.in{transition-delay:.24s}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;
  font:600 15px/1 var(--sans);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-lite),var(--gold));
  color:#241a06;
  box-shadow:0 8px 24px -8px rgba(220,172,84,.55);
}
.btn-gold:hover{box-shadow:0 12px 34px -6px rgba(220,172,84,.75)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold-dark);color:var(--gold-lite)}
.btn-magic{
  background:var(--magic-grad);background-size:220% 220%;
  animation:magicshift 6s ease infinite;
  color:#0a090b;
}
@keyframes magicshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---------- film-strip divider ---------- */
.filmstrip{
  height:22px;
  background:
    repeating-linear-gradient(90deg, var(--bg-panel-2) 0 16px, transparent 16px 34px);
  position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.filmstrip::before,.filmstrip::after{
  content:"";position:absolute;top:50%;left:0;right:0;
  height:8px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--bg) 0 10px, transparent 10px 26px);
  background-position:8px center;
}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(10,9,11,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 28px;max-width:var(--maxw);margin:0 auto;min-height:86px}
.nav-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-brand .brand-logo{height:60px;width:auto;display:block}
.nav-brand .byline{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--ink-faint)}
.nav-brand .brand-pixie{height:52px;width:auto;display:block}

/* Hover plates — same trick as the app's own sidebar banner: hovering
   the small tiles mark pops the plain big wordmark, hovering the piXie
   mark pops her own art. Unlike the app (which alternates the piXie
   plate between two faces), this one stays single-face: the typewriter
   version is already on screen as the hero seal, so popping it again
   here would just repeat itself. */
.logo-pop-wrap,.pixie-pop-wrap{position:relative;display:inline-flex;cursor:default}
.brand-pop{
  --plate-w:240px;
  position:absolute;top:calc(100% + 14px);left:50%;
  width:var(--plate-w);
  background:#000;border:1px solid var(--line);border-radius:10px;
  padding:10px;box-shadow:0 24px 50px -16px rgba(0,0,0,.75);
  opacity:0;pointer-events:none;z-index:80;
  transform:translateX(-50%) translateY(-6px) scale(.94);
  transition:opacity .18s ease, transform .18s ease;
}
.brand-pop img{display:block;width:100%;height:auto;border-radius:6px}
.brand-pop::before{
  content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;
  width:13px;height:13px;background:#000;transform:rotate(45deg);
  border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px;
}
.logo-pop-wrap:hover .brand-pop,.pixie-pop-wrap:hover .brand-pop{
  opacity:1;transform:translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion:reduce){.brand-pop{transition:opacity .12s}}
@media (max-width:640px){.brand-pop{--plate-w:180px}}
@media (max-width:640px){
  .nav{min-height:66px}
  .nav-brand .brand-logo{height:42px}
  .nav-brand .brand-pixie{height:36px}
  .nav-brand .byline{font-size:14px}
}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;font:500 14.5px/1 var(--sans);color:var(--ink-dim);text-decoration:none;transition:color .15s ease;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--gold);transition:right .25s ease}
.nav-links a:hover{color:var(--gold-lite)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 10px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:88px 0 0;
  background:
    radial-gradient(60% 55% at 84% 4%, rgba(220,172,84,.18), transparent 60%),
    radial-gradient(55% 45% at 6% 96%, rgba(138,92,255,.16), transparent 60%),
    var(--bg);
}
.sparkle{
  position:absolute;border-radius:50%;pointer-events:none;
  background:var(--gold-lite);opacity:.8;filter:blur(.3px);
  animation:drift 9s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.5}
  50%{transform:translate(6px,-14px) scale(1.3);opacity:1}
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-bottom:70px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-grid .eyebrow{justify-content:center;display:flex}
  .hero-cta{justify-content:center}
  .hero-proof{justify-content:center}
}
.hero h1{font-size:clamp(38px,5.2vw,60px);line-height:1.05;letter-spacing:-.01em}
.hero h1 em{
  font-style:normal;background:var(--magic-grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:magicshift 8s ease infinite;
}
.hero p.lede{font-size:18px;color:var(--ink-dim);max-width:54ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-proof{display:flex;gap:26px;flex-wrap:wrap;color:var(--ink-faint);font-size:13.5px}
.hero-proof b{color:var(--gold-lite);font-family:var(--serif);font-weight:600;font-size:15px;display:block}

.gemini-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px 7px 10px;
  font:500 12.5px/1 var(--sans);color:var(--ink-dim);
  margin-bottom:26px;
}
.gemini-badge img{height:15px;width:auto;flex:none}

/* ---- the "living" screenplay page ---- */
.hero-art{position:relative;display:flex;justify-content:center}
.script-page{
  position:relative;width:min(420px,92%);
  background:var(--paper);color:var(--paper-ink);
  border-radius:6px;padding:40px 34px 30px;
  transform:rotate(2.5deg);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.05);
  font-family:var(--mono);
  animation:float 7s ease-in-out infinite;
  /* "start" instead of a hard "left": it resolves to left for LTR,
     right once [dir="rtl"] flips direction below, and top (the
     block-start edge) once .vert switches to vertical-rl — one rule
     that is never centered, whichever profile is on the page. */
  text-align:start;
}
@keyframes float{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-10px)}}
.script-page::before{
  content:"";position:absolute;top:-14px;left:26px;right:26px;height:14px;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 6px, transparent 6px 16px);
  border-radius:3px 3px 0 0;opacity:.5;
}
.script-page .sp-line{min-height:1.28em;line-height:1.28em;font-size:12.5px;white-space:pre-wrap;margin-bottom:0}

/* Ratios lifted straight from the app's own screenplay CSS (--i-char,
   --i-paren, --w-paren, --i-dial, --r-dial), expressed as a percentage
   of the text column instead of inches: scene headings and action sit
   flush left at the margin — never centered — the character cue is
   indented ~37% of the column, the parenthetical ~27% (half-width),
   and dialogue is inset 17% on the left / 25% on the right. */
.script-page .sp-slug{font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:0}
.script-page .sp-action{font-weight:400;margin:0}
.script-page .sp-char{margin-left:37%;margin-right:0;margin-top:1.28em;font-weight:700;text-transform:uppercase}
.script-page .sp-paren{margin-left:27%;width:50%;font-style:italic;color:#544d3f}
.script-page .sp-dial{margin-left:17%;margin-right:25%}

/* RTL profiles (Arabic, Hebrew) mirror every indent to the other edge —
   exactly what the app's own .rtl rules do — instead of re-centering.
   The app also drops Courier for RTL scripts entirely: "an RTL script
   stays Arial 13pt, even for English" — Courier's Hebrew/Arabic glyphs
   aren't there, Arial's are. Same swap here. */
.script-page[dir="rtl"]{
  direction:rtl;text-align:right;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.script-page[dir="rtl"] .sp-char{margin-right:39%;margin-left:0}
.script-page[dir="rtl"] .sp-paren{margin-right:27%;margin-left:0}
.script-page[dir="rtl"] .sp-dial{margin-right:17%;margin-left:25%}

/* Japanese vertical-writing pass: no INT./EXT. slug (a ○ marks the
   pillar instead, already in the source text), no horizontal indents —
   columns carry their own rhythm — text runs top-to-bottom, columns
   advance right to left, exactly as body[data-vert="1"] does in the app. */
.script-page.vert{
  writing-mode:vertical-rl;text-orientation:mixed;direction:ltr;
  height:400px;width:auto;max-width:100%;padding:34px 46px 34px 30px;
  text-align:start; /* "start" in vertical-rl is the block-start edge — up */
}
.script-page.vert .sp-line{margin:0 0 0 20px;min-height:0}
.script-page.vert .sp-slug{text-transform:none;font-weight:400}
.script-page.vert .sp-dial,.script-page.vert .sp-paren{
  margin:0 0 0 20px;width:auto;text-transform:none;font-weight:400;font-style:normal;color:inherit;
}
.script-page.vert .sp-char{
  margin:0 0 0 34px;width:auto;text-transform:none;font-weight:400;font-style:normal;color:inherit;
}
.script-page.vert .caret{width:auto;height:2px;margin:3px 0 0}

.script-page .caret{display:inline-block;width:8px;background:var(--paper-ink);animation:blink 1s steps(1) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.script-page .pageno{position:absolute;top:14px;right:22px;font-size:11px;color:#8a8272}
.script-page.vert .pageno{top:14px;left:16px;right:auto}
.script-page[dir="rtl"] .pageno{right:auto;left:22px}

.hero-art .badge{
  position:absolute;bottom:-22px;left:-22px;
  display:flex;align-items:center;gap:10px;
  background:var(--bg-panel);border:1px solid var(--line);
  border-radius:999px;padding:10px 16px 10px 10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
}
.hero-art .badge img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.hero-art .badge span{font-size:12.5px;color:var(--ink-dim)}
.hero-art .badge b{color:var(--gold-lite);font-family:var(--serif)}

.hero-art .seal{
  position:absolute;top:-106px;left:50%;width:150px;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));
  transform:translateX(calc(-50% - 48px)) rotate(4deg);
  animation:sealfloat 8s ease-in-out infinite;
  z-index:1;
}
@keyframes sealfloat{
  0%,100%{transform:translateX(calc(-50% - 48px)) rotate(4deg) translateY(0)}
  50%{transform:translateX(calc(-50% - 48px)) rotate(1deg) translateY(-8px)}
}
@media (max-width:640px){.hero-art .seal{width:104px;top:-88px}}

/* ---------- language marquee ---------- */
.marquee-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-panel);overflow:hidden;padding:18px 0;
}
.marquee{display:flex;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{
  font-family:var(--serif);font-size:19px;color:var(--ink-faint);
  padding:0 26px;white-space:nowrap;border-right:1px solid var(--line);
}
.marquee span b{color:var(--gold-lite);font-weight:600}
.marquee.rev{animation-direction:reverse;animation-duration:46s}
.marquee-wrap.two{padding:14px 0}
.marquee-wrap.two .marquee{opacity:.72}

/* ---------- language chip cloud ---------- */
.lang-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lang-chip{
  background:var(--bg-panel-2);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:13.5px;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.lang-chip:hover{border-color:var(--gold-dark);color:var(--ink);transform:translateY(-2px)}
.lang-chip b{color:var(--gold-lite);font-family:var(--serif);font-weight:600}

/* ---------- cycling "now translating" tag ---------- */
.cycle-lang{
  display:inline-flex;align-items:center;gap:8px;
  font:600 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lite);margin-bottom:14px;
}
.cycle-lang .dot{width:6px;height:6px;border-radius:50%;background:var(--magic-3);animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.cycle-lang #cycleWord{color:var(--ink);font-weight:600;min-width:9ch;display:inline-block}

/* ---------- section shells ---------- */
section{padding:96px 0;position:relative}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(28px,3.4vw,38px)}
.section-head p{font-size:16.5px}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;position:relative;overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pillar:hover{transform:translateY(-8px);border-color:var(--gold-dark);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px}
.pillar.gold::before{background:linear-gradient(90deg,var(--gold-dark),var(--gold-lite))}
.pillar.magic::before{background:var(--magic-grad)}
.pillar.teal::before{background:linear-gradient(90deg,#2fb3a6,#8ee6d8)}
.pillar .icon{
  width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:23px;margin-bottom:18px;background:var(--bg-panel-2);border:1px solid var(--line);
}
.pillar h3{font-size:20px;margin-bottom:10px}
.pillar p{font-size:14.8px;margin-bottom:0}
.pillar .tag{
  display:inline-block;margin-top:16px;font:600 11.5px/1 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lite);
  border:1px solid var(--gold-dark);border-radius:999px;padding:6px 12px;
}

/* ---------- language callout ---------- */
.callout{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:20px;padding:44px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
}
.callout::after{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(220,172,84,.14), transparent 65%);
  top:-220px;right:-220px;pointer-events:none;
}
@media (max-width:900px){.callout{grid-template-columns:1fr}}
.callout h2{font-size:26px}
.compare{border-collapse:collapse;width:100%;font-size:14px}
.compare th,.compare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.compare th{color:var(--ink-faint);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.compare td.yes{color:var(--gold-lite);font-weight:600}
.compare td.no{color:var(--ink-faint)}
.compare tr:last-child td{border-bottom:none}

/* ---------- showcase / device frame ---------- */
.showcase-frame{
  background:linear-gradient(180deg,#2a2530,#171319);
  border:1px solid var(--line);border-radius:22px;padding:14px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.75);
}
.showcase-bar{display:flex;gap:6px;padding:6px 10px 14px}
.showcase-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.showcase-screen{
  border-radius:12px;min-height:340px;
  background:
    linear-gradient(160deg, rgba(220,172,84,.10), transparent 50%),
    var(--bg-panel-2);
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;
}
.showcase-screen::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
}
.showcase-screen .placeholder{max-width:360px;padding:20px;position:relative}
.showcase-screen .placeholder b{color:var(--gold-lite);display:block;margin-bottom:8px;font-family:var(--serif);font-size:19px}

/* ---------- ask-a-monkey ---------- */
.monkey-band{
  display:grid;grid-template-columns:420px 1fr;gap:40px;align-items:center;
  background:linear-gradient(120deg,var(--bg-panel-2),var(--bg-panel));
  border:1px solid var(--line);border-radius:22px;padding:40px;
  position:relative;overflow:visible;
}
@media (max-width:820px){
  .monkey-band{grid-template-columns:1fr;text-align:center}
  .monkey-band img.mascot{transform:none;margin-top:0}
}
/* owner: bottom edge of the mascot should level exactly with the
   bottom edge of the Ask-a-🐵 panel. align-self:end aligns it to the
   bottom of its grid cell, which sits one padding-width (40px) above
   the panel's own outer edge — translateY(40px) closes that gap so
   the image's bottom lands flush with the panel's bottom border. */
.monkey-band img.mascot{
  border-radius:16px;width:100%;align-self:end;
  transform:translateY(40px);position:relative;z-index:2;
}
.chat-thread{display:flex;flex-direction:column;gap:12px;max-width:560px}
.bubble{
  padding:12px 16px;border-radius:14px;font-size:14.5px;max-width:80%;
  opacity:0;transform:translateY(10px);animation:pop .5s ease forwards;
}
.bubble.user{align-self:flex-end;background:var(--gold);color:#241a06;font-weight:600;animation-delay:.2s}
.bubble.ai{align-self:flex-start;background:var(--bg-panel);border:1px solid var(--line);color:var(--ink-dim);animation-delay:.9s}
@keyframes pop{to{opacity:1;transform:none}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:56px 0 34px;background:var(--bg-panel)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:44px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand .brand-logo{height:34px;width:auto;display:block}
.foot-brand .byline{font-family:var(--serif);font-style:italic;font-weight:500;font-size:14px;color:var(--ink-faint)}
.foot-brand .brand-pixie{height:30px;width:auto;display:block}
footer h4{font:600 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer a{color:var(--ink-dim);text-decoration:none;font-size:14.5px;transition:color .15s ease}
footer a:hover{color:var(--gold-lite)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:26px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:13px;
}