/* Kundyl design system — the engraved night-sky look, one theme for every page. */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root{
  --bg:#070b18; --bg2:#0c1226; --bg3:#12183a;
  --ink:#f2ead6; --muted:#a49b82; --dim:#948b79;
  --gold:#c9a24e; --gold2:#e7cf94; --gold3:#f0e2b8;
  --line:#c9a24e33; --line2:#c9a24e1f;
  --card:rgba(16,22,44,.62); --card2:rgba(12,18,38,.86); --soft:rgba(201,162,78,.09);
  --accent:var(--gold); --accent2:#8a5cc0;
  --ok:#7fc99a; --warn:#e2b45a; --bad:#e08a7a;
  --display:"Marcellus",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --rule:var(--line); --rule2:var(--line2);
  --ink2:#d8cfb8; --btn-ink:#141018; --nav-bg:rgba(7,11,24,.86); --foot-bg:rgba(7,11,24,.7); --glow:rgba(201,162,78,.10);
  --wrap:980px;
  color-scheme:dark;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root[data-theme="light"]{
  --bg:#fbf5e6; --bg2:#fff9ec; --bg3:#f4e7c8;
  --ink:#2b1d0e; --muted:#624d37; --dim:#7a6247;
  --gold:#c2731a; --gold2:#9a5a12; --gold3:#7a4409;
  --line:#c2731a44; --line2:#c2731a26;
  --card:rgba(255,250,236,.92); --card2:rgba(255,252,244,.98); --soft:rgba(194,115,26,.10);
  --accent:var(--gold); --accent2:#7b4fb0;
  --ok:#2f8a5a; --warn:#94590a; --bad:#b8452f;
  --ink2:#4a3620; --btn-ink:#fff8ea; --nav-bg:rgba(251,245,230,.9); --foot-bg:rgba(244,231,200,.7); --glow:rgba(194,115,26,.14);
  color-scheme:light;
}
:root[data-theme="light"] .btn,:root[data-theme="light"] .pill.on,:root[data-theme="light"] .k-nav a.cta{color:var(--btn-ink);background:linear-gradient(135deg,#ad5b0d,#8f4506)}
:root[data-theme="light"] .k-lang a.on{color:var(--gold3)}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;min-height:100%;
  font:16px/1.62 var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 820px at 50% -10%, var(--bg3) 0%, var(--bg2) 42%, var(--bg) 100%) fixed,
    var(--bg);
  -webkit-font-smoothing:antialiased;position:relative;
}
/* engraved dial + starfield: one painted layer, no repaint cost */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #e7cf9488, transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, #e7cf9466, transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 44%, #e7cf9455, transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 62%, #e7cf9455, transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 72%, #e7cf9444, transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 88%, #e7cf9444, transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 82%, #e7cf9433, transparent 60%);
}
body::after{content:"";position:fixed;left:50%;top:-20vh;width:90vmax;height:70vmax;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,162,78,.07),transparent 70%)}
body>*{position:relative;z-index:1}
a{color:var(--gold2)}
img{max-width:100%;height:auto}
::selection{background:#c9a24e44}

/* ---------- header ---------- */
.k-nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.k-nav .in{max-width:var(--wrap);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:8px}
.k-nav .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--gold2);margin-right:auto;
  font-family:var(--display);font-size:21px;letter-spacing:1.4px;flex:0 0 auto}
.k-nav .brand img{width:27px;height:27px;border-radius:8px;border:1px solid var(--line)}
.k-nav .links{display:flex;gap:2px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.k-nav .links::-webkit-scrollbar{display:none}
@media(max-width:620px){
  .k-nav .in{padding:8px 12px;gap:6px}
  .k-nav .brand span{display:none}
  .k-nav .links{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .k-nav .links a{font-size:13px;padding:6px 8px}
  .k-nav .cta{padding:8px 11px;font-size:13px}
}
.k-nav a.l{text-decoration:none;color:var(--muted);font-size:14.5px;white-space:nowrap;padding:7px 11px;border-radius:8px;transition:color .18s,background .18s}
.k-nav a.l:hover{color:var(--gold2);background:var(--soft)}
.k-nav a.l.on{color:var(--gold3);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.k-nav a.cta{flex:0 0 auto;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#141018;font-weight:600;
  padding:9px 15px;border-radius:9px;text-decoration:none;font-size:14.5px;white-space:nowrap}
@media(max-width:620px){.k-nav .brand span{display:none}.k-nav a.cta{display:none}.k-nav a.l{padding:7px 9px}}

.k-lang{display:flex;flex:0 0 auto;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-left:4px}
.k-lang a{font-size:12.5px;padding:6px 9px;color:var(--muted);text-decoration:none;white-space:nowrap}
.k-lang a.on{background:var(--soft);color:var(--gold3);font-weight:600}
.k-lang a:hover{color:var(--gold2)}
@media(max-width:620px){.k-lang a{padding:6px 7px;font-size:12px}}
.k-theme{flex:0 0 auto;margin-left:6px;width:34px;height:31px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--gold2);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.k-theme:hover{background:var(--soft)}

/* ---------- layout & type ---------- */
.k-main{max-width:var(--wrap);margin:0 auto;padding:26px 16px 70px}
.k-main.narrow{max-width:800px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(31px,6.2vw,50px);line-height:1.1;margin:16px 0 12px;
  letter-spacing:.4px;color:var(--gold3);text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,3.4vw,28px);margin:40px 0 14px;padding-top:15px;
  border-top:1px solid var(--line);color:var(--gold2);letter-spacing:.3px;text-wrap:balance}
h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:20px 0 8px;font-weight:600}
p{margin:0 0 13px}
.lead{color:var(--ink2);font-family:var(--serif);font-size:clamp(18px,2.6vw,21px);line-height:1.55;max-width:60ch;margin:0 0 22px}
.muted{color:var(--muted);font-size:14px}
ul,ol{padding-left:20px}li{margin:6px 0}
strong,b{color:var(--gold3);font-weight:600}

/* ---------- pieces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 12px;
  backdrop-filter:blur(8px);box-shadow:0 1px 0 #ffffff08 inset}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cards .c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;backdrop-filter:blur(8px);
  transition:border-color .2s,transform .2s}
.cards .c:hover{border-color:#c9a24e66;transform:translateY(-2px)}
.cards .c b{display:block;font-family:var(--display);font-weight:400;font-size:19px;margin-bottom:7px;color:var(--gold2);letter-spacing:.3px}
.cards .c p{margin:0;color:var(--muted);font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:9px}
.tile{background:var(--soft);border:1px solid var(--line2);border-radius:11px;padding:11px 13px}
.tile small{display:block;color:var(--muted);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.tile b{font-size:17px;font-family:var(--serif);font-weight:600;color:var(--gold3)}

.btn{display:inline-block;text-align:center;text-decoration:none;font:inherit;font-weight:600;border:0;border-radius:10px;
  padding:13px 22px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#141018;cursor:pointer;font-size:16px;
  transition:filter .18s,transform .18s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.g{background:transparent;border:1px solid var(--line);color:var(--gold2)}
.btn.g:hover{border-color:#c9a24e88;background:var(--soft)}
.btn.sm{padding:9px 14px;font-size:14px}
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}

label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;letter-spacing:.04em}
input,select,textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}
textarea{min-height:68px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:560px){.row,.row3{grid-template-columns:1fr}}

.pill{display:inline-block;font-size:12.5px;padding:4px 11px;border-radius:20px;border:1px solid var(--line);
  margin:0 5px 5px 0;background:var(--soft);color:var(--ink)}
.pill.on{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#141018;border-color:transparent;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
.chips button{padding:8px 13px;font-size:13.5px;font-weight:500;background:var(--soft);color:var(--gold2);
  border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:border-color .18s,color .18s}
.chips button:hover{border-color:#c9a24e88;color:var(--gold3)}

.note{background:var(--soft);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin:16px 0}
.lock{background:linear-gradient(180deg,rgba(201,162,78,.10),rgba(201,162,78,.03));border:1px solid var(--line);
  border-radius:13px;padding:16px 18px;margin:12px 0}
.lock b{display:block;margin-bottom:5px;color:var(--gold2)}
.wrapx{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
td,th{border-bottom:1px solid var(--line2);padding:7px 8px;text-align:left;vertical-align:top}
th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hidden{display:none}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}

/* ---------- footer ---------- */
.k-foot{border-top:1px solid var(--line);margin-top:52px;background:var(--foot-bg)}
.k-foot .in{max-width:var(--wrap);margin:0 auto;padding:26px 16px 38px;color:var(--muted);font-size:14px}
.k-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:18px}
.k-foot b{display:block;color:var(--gold2);font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.8px;margin-bottom:8px}
.k-foot a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.k-foot a:hover{color:var(--gold2)}
.k-foot .fine{border-top:1px solid var(--line2);padding-top:16px;line-height:1.6;font-size:13px}

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