/* ============================================================
   Krona — shared site styles (self-hosted, offline-capable)
   Company: Lord Skippy LLC · Brand: Krona · Product: Sunlight
   Fonts + tokens per branding/new. No external requests.
   ============================================================ */

/* ---- self-hosted fonts (Instrument Sans / Serif, SIL OFL 1.1) ---- */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Variable.woff2") format("woff2-variations"),
       url("fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2-variations"),
       url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---- tokens ---- */
:root {
  --bg:#08090c; --text:#eceef4; --dim:#98a0b3; --faint:#5b6274;
  --gold:#ffd60a; --gold-hi:#fff06a; --gold-deep:#e8a303;
  --night:#7171ab; --night-deep:#4e4e8f; --rain:#3091f2;
  --surface:#0e1016; --surface-2:#14171f; --line:rgba(236,238,244,.08);
  --glass:rgba(236,238,244,.035); --glass-line:rgba(236,238,244,.09);
  --grad-sun:linear-gradient(100deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  --grad-sun-soft:linear-gradient(120deg, var(--gold-hi), var(--gold));
  --grad-horizon:linear-gradient(90deg, var(--night-deep), var(--night) 18%, var(--gold) 38%, var(--gold-hi) 50%, var(--gold) 62%, var(--night) 82%, var(--night-deep));

  /* Per-face accent system. Each FACE carries its own colour — Sunlight is the sun gold
     (--gold / --grad-sun); a future blue face would define its own. KRONA itself, the
     brand above the faces, is deliberately NOT gold: a neutral purple/night family, so
     brand-level UI never looks like one particular face. Gradient runs dark → light. */
  --krona:#8b5cf6; --krona-hi:#a78bfa; --krona-deep:#6d28d9;  /* three saturated violets, mirroring the gold ramp */
  --grad-krona:linear-gradient(100deg, var(--krona-hi), var(--krona) 45%, var(--krona-deep));
  --grad-krona-soft:linear-gradient(120deg, var(--krona-hi), var(--krona));
  --font-ui:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Instrument Serif",Georgia,serif; /* display >=32px only */
  --r-sm:10px; --r-md:16px; --r-lg:24px;
}

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(1100px 700px at 85% -12%, rgba(255,214,10,.11), transparent 60%),
    radial-gradient(900px 720px at -12% 108%, rgba(113,113,171,.16), transparent 60%),
    radial-gradient(680px 480px at 110% 62%, rgba(48,145,242,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text); font:400 17px/1.65 var(--font-ui);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.wrap { max-width:1020px; margin:0 auto; padding:0 1.3rem; }
a { color:var(--gold); text-decoration:none; }
.numeric, time, [data-reading] { font-variant-numeric:tabular-nums; }

/* ---- headings + display ---- */
h1, h2, h3 { font-weight:700; line-height:1.12; letter-spacing:-.015em; text-wrap:balance; margin:.6rem 0 0; }
h1 { font-size:clamp(2.2rem, 5.4vw, 3.4rem); }
h2 { font-size:clamp(1.5rem, 3vw, 1.9rem); }
h2 small { display:block; font-size:.9rem; color:var(--dim); font-weight:400; letter-spacing:0; margin-top:.5rem; line-height:1.5; }
p.lead { color:var(--dim); font-size:1.06rem; margin:1.2rem 0 2rem; max-width:32rem; }
/* serif display accent — product name / one marketing accent per screen (>=32px).
   Default is the sun gold; `.serif.krona` uses the neutral brand twilight gradient. */
.serif { font-family:var(--font-display); font-weight:400; font-style:italic;
  background:var(--grad-sun); -webkit-background-clip:text; background-clip:text; color:transparent; }
.serif.krona { background-image:var(--grad-krona); }

/* section label: gold, uppercase, leading dash */
.eyebrow { display:flex; align-items:center; gap:.6rem; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); font-weight:600; }
.eyebrow::before { content:""; width:22px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow.plain { color:var(--dim); } .eyebrow.plain::before { background:var(--faint); }
.eyebrow.krona { color:var(--krona); } .eyebrow.krona::before { background:var(--krona); }

/* ---- header ---- */
header.top { position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(8,9,12,.6); border-bottom:1px solid var(--line); }
header.top .bar { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; color:var(--text); }
.brand img.mk { width:30px; height:30px; display:block; }
.brand .wm { font-size:1.18rem; letter-spacing:-.01em; white-space:nowrap; }
/* Header wordmarks are SVG (real vector paths) so they paint instantly — no FOUT. */
.brand .wm-svg { display:block; height:20px; width:auto; }
.wm .k { font-weight:700; color:var(--text); }
.wm .s { font-family:var(--font-display); font-style:italic; font-weight:400; padding-left:.12em;
  background:var(--grad-sun); -webkit-background-clip:text; background-clip:text; color:transparent; }
header.top .spacer { flex:1; }
header.top nav { display:flex; gap:1.5rem; }
header.top nav a { color:var(--dim); font-size:.95rem; }
header.top nav a:hover { color:var(--gold); }
@media (max-width:560px) { header.top nav { gap:1.05rem; } .brand .wm { font-size:1.05rem; } }

/* ---- buttons ---- */
.cta { display:inline-flex; align-items:center; gap:.55rem; background:var(--grad-sun-soft);
  color:#221b00; font-weight:600; padding:.8rem 1.5rem; border-radius:var(--r-md); text-decoration:none;
  box-shadow:0 4px 30px rgba(255,214,10,.22); transition:box-shadow .25s ease, transform .25s ease; }
.cta:hover { box-shadow:0 6px 40px rgba(255,214,10,.36); transform:translateY(-1px); }
.cta.ghost { background:var(--glass); color:var(--text); border:1px solid var(--glass-line);
  box-shadow:none; margin-left:.6rem; }
.cta.ghost:hover { border-color:rgba(236,238,244,.22); box-shadow:none; }

/* ---- horizon divider (a full day compressed into one strip) ---- */
.daystrip { display:flex; align-items:center; gap:.9rem; margin:1.2rem 0; }
.daystrip .lbl { font-size:.72rem; color:var(--faint); letter-spacing:.1em; white-space:nowrap; }
.daystrip .strip { flex:1; height:5px; border-radius:99px; background:var(--grad-horizon);
  box-shadow:0 0 18px rgba(255,214,10,.16); position:relative; }
/* the sun on the horizon: a glowy gold dot marks solar noon (styleguide day-progress marker) */
.daystrip .strip::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%; background:var(--gold-hi);
  box-shadow:0 0 14px 3px rgba(255,240,106,.65); }

/* ---- footer ---- */
footer { border-top:1px solid var(--line); margin-top:1rem; padding:2.4rem 0 3.2rem;
  color:var(--faint); font-size:.9rem; line-height:1.6; }
footer a { color:var(--dim); } footer a:hover { color:var(--gold); }
footer .links { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
footer .up { color:var(--dim); font-weight:600; }
footer .up:hover { color:var(--gold); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }