/* ============================================================
   gfys.css — the FlameNet amber-dark skin for gfys.me
   Vendored. Zero CDN. Zero web-fonts-from-afar. Talks to nothing.
   Glimmering FlameNet Yielding Studio · given freely · 🜂
   ============================================================ */

:root{
  /* --- the sky, drawn from the mark --- */
  --fn-void:    #0a0c10;   /* near-black studio ground */
  --fn-night:   #161228;   /* deep sky (README master) */
  --fn-indigo:  #1f172e;   /* sunrise sky */
  --fn-panel:   #12101c;   /* raised panel */
  --fn-panel-2: #17131f;   /* hover panel */
  --fn-line:    #2a2438;   /* hairline */

  /* --- the horizon & sun --- */
  --fn-horizon: #5a3d34;   /* warm panel / horizon brown */
  --fn-sun:     #fcd28a;   /* sun body */
  --fn-sun-core:#ffeccb;   /* sun core */
  --fn-gold:    #f0b454;   /* warm gold — primary accent, titles */
  --fn-gold-dk: #c98a2e;   /* gold pressed */
  --fn-ember:   #e45418;   /* vivid ember — active/selected, used sparingly */

  /* --- ink --- */
  --fn-ink:     #f4ead6;   /* warm off-white */
  --fn-ink-2:   #cdbfa8;   /* secondary */
  --fn-mute:    #8d8474;   /* muted / captions */
  --fn-faint:   #5c5648;   /* faintest */

  --fn-ok:      #7fcf8a;   /* "ready now" green */

  /* --- type --- */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SFMono-Regular",
          Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1080px;
  --r: 14px;     /* radius */
  --r-sm: 9px;

  /* film-sprocket frame: holes punched in a dark bar (inline SVG, no request) */
  --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Crect width='44' height='22' fill='%230a0c10'/%3E%3Crect x='8' y='6' width='12' height='10' rx='3' fill='%23f0b454'/%3E%3Crect x='28' y='6' width='12' height='10' rx='3' fill='%23c98a2e'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--fn-ink);
  background:
    radial-gradient(1200px 520px at 50% -200px, #241a3a 0%, transparent 70%),
    var(--fn-void);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--fn-gold); text-decoration:none; }
a:hover{ color:var(--fn-sun); }

/* visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--fn-gold);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- the film strip (runs through the whole page) ---------- */
.strip{
  height:22px;
  background:var(--sprocket) repeat-x;
  background-size:auto 22px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  opacity:.9;
}

/* ---------- shell ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,16,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--fn-line);
}
.topbar .wrap{ display:flex; align-items:center; gap:18px; height:62px; }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; white-space:nowrap; }
.brand .mark{ width:34px; height:34px; flex:0 0 auto; border-radius:8px; display:block; }
.brand b{
  font-weight:800; letter-spacing:.34em; font-size:1.02rem;
  color:var(--fn-gold); text-transform:uppercase; white-space:nowrap;
}
.brand b span{ font-weight:500; }
.nav{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.nav a{
  font:600 .82rem/1 var(--mono);
  letter-spacing:.02em;
  color:var(--fn-ink-2);
  padding:9px 12px; border-radius:8px;
}
.nav a:hover{ background:var(--fn-panel-2); color:var(--fn-ink); }
.nav a[aria-current="page"]{ color:var(--fn-gold); background:rgba(240,180,84,.08); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:700 .96rem/1 var(--sans);
  padding:13px 20px; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{
  background:linear-gradient(180deg, var(--fn-gold), var(--fn-gold-dk));
  color:#1a1206; border-color:#e9bd6f;
  box-shadow:0 8px 26px -12px rgba(240,180,84,.6);
}
.btn-gold:hover{ filter:brightness(1.06); color:#1a1206; }
.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--fn-ink); border-color:var(--fn-line);
}
.btn-ghost:hover{ background:var(--fn-panel-2); border-color:#3a3350; color:var(--fn-ink); }

/* ---------- type scale ---------- */
.eyebrow{
  font:700 .72rem/1 var(--mono);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--fn-mute);
}
h1,h2,h3{ font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:0; }
h2.section{ font-size:clamp(1.5rem, 3.4vw, 2.2rem); color:var(--fn-gold); }
.lead{ font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--fn-ink-2); }

section{ padding:64px 0; }
.section-head{ max-width:680px; margin-bottom:34px; }
.section-head .eyebrow{ display:block; margin-bottom:12px; }

/* ---------- panels / cards ---------- */
.panel{
  background:linear-gradient(180deg, var(--fn-panel), #100e18);
  border:1px solid var(--fn-line); border-radius:var(--r);
  padding:22px;
}

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--fn-line); background:#08090d; }
.foot .wrap{ padding:40px 22px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.foot h4{ font:700 .74rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--fn-mute); margin:0 0 12px; }
.foot a{ display:block; color:var(--fn-ink-2); padding:4px 0; font-size:.92rem; }
.foot a:hover{ color:var(--fn-gold); }
.foot .glyphs{ color:var(--fn-gold); letter-spacing:.3em; margin-top:18px; font-size:1.1rem; }
.foot small{ color:var(--fn-faint); display:block; margin-top:10px; font:400 .8rem/1.5 var(--mono); }
.jit{ color:var(--fn-faint)!important; font:400 .76rem/1 var(--mono); }
.jit:hover{ color:var(--fn-mute)!important; }

@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr; gap:24px; }
  .topbar .wrap{ flex-wrap:wrap; height:auto; min-height:62px; padding-top:9px; padding-bottom:9px; gap:10px 14px; }
  .nav{ margin-left:0; width:100%; gap:2px; justify-content:flex-start; }
  .nav a{ padding:8px 9px; font-size:.76rem; }
  .brand b{ letter-spacing:.24em; font-size:.92rem; }
  section{ padding:48px 0; }
}