@import url("/css/fonts-montserrat.css");

:root{
  --honey:#FBBE32;
  --leaf:#2e7d32;
  --leaf-dark:#245a24;
  --sky:#2196F3;
  --ink:#333333;
  --ink-2:#475569;
  --bg:#FFFFFF;
  --bg-soft:#F9F9F9;
  --line:#e2e8f0;
  --container:1100px;
  --pad:16px;
  --r-xs:8px;
  --r-md:12px;
  --r-lg:16px;
  --shadow-1:0 1px 2px rgba(0,0,0,.05);
  --shadow-2:0 4px 18px rgba(0,0,0,.08);
  --header-h:72px;
  --header-h-mobile:64px;
  --tile:180px;
}

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-weight:400;
  font-variant-ligatures:common-ligatures;
  text-rendering:optimizeLegibility;
  color:var(--ink);
  line-height:1.6;
  background:#fff;
}
h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:1.25; margin:1.25rem 0 .5rem; }
p{ margin:.75rem 0; }
.meta{ color:var(--ink-2); font-size:.95rem; margin:.5rem 0 1rem; }

a{ color:var(--sky); text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }

:where(a,button,input,select,textarea,[tabindex]):focus{
  outline:3px solid var(--sky);
  outline-offset:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:12px; width:auto; height:auto;
  background:#fff; color:#000; padding:.5rem .75rem; border-radius:var(--r-xs);
  box-shadow:var(--shadow-1);
  z-index:1000;
}

.container,.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); }

html,body{ overflow-x:clip; }
body{ position:relative; }
body::before{
  content:"";
  position:fixed;
  top:var(--header-h);
  left:0; right:0; bottom:0;
  z-index:0;
  pointer-events:none;
  background-image:url("/img/Wallpaper.svg?v=20251017113459");
  background-repeat:repeat;
  background-position:top center;
  background-size:var(--tile) auto;
}
@media (max-width:640px){
  :root{ --header-h:var(--header-h-mobile); --tile:220px; }
}
@media (min-width:1280px){
  :root{ --tile:160px; }
}
main,.content,.wrap,.page,footer,.hero,.container{ position:relative; z-index:1; background:transparent; }
body.no-wallpaper::before{ display:none !important; }

.site-header{
  background:#fff; border-bottom:1px solid var(--line);
  position:relative; z-index:10;
}
.site-header .container{
  max-width:var(--container);
  margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; gap:16px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ display:block; height:40px; width:auto; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.nav a,.nav a:visited{ color:var(--leaf); text-decoration:none; font-weight:500; }
.nav a:hover{ color:var(--leaf-dark); text-decoration:underline; }

@media (max-width:480px){
  .brand-logo{ height:34px; }
  .nav{ gap:14px; }
}
@media (max-width:640px){
  .site-header .container{ flex-wrap:wrap; gap:12px; }
  .brand{ order:0; }
  .nav{
    order:1;
    flex-basis:100%;
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
    justify-content:flex-start;
  }
  .nav a{ padding:4px 0; }
  .brand-logo{ height:34px; }
}

.home-logo img{ height:44px; width:auto; max-width:40vw; }
@media (min-width:640px){ .home-logo img{ height:52px; } }
@media (min-width:1024px){ .home-logo img{ height:64px; } }

.home-hero img[src*="/img/logo"],.hero img[src*="/img/logo"]{ display:none; }
header .brand-logo{ display:block; }

.article{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

.surface{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-1);
}
.surface--soft{
  background:var(--bg-soft);
  border:1px solid #eee;
  border-radius:var(--r-lg);
  padding:1.25rem;
  box-shadow:var(--shadow-1);
}
.no-surface{ background:transparent !important; box-shadow:none !important; border:0 !important; }

.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1rem;
  box-shadow:var(--shadow-1);
}
.card h3{ margin-top:.25rem; }

.prose > :where(p,ul,ol,blockquote,pre){ margin-bottom:.9rem; }
.prose ul{ padding-left:1.2rem; }
.prose li{ margin:.25rem 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-weight:700; line-height:1.2;
  border-radius:var(--r-md);
  padding:.6rem .95rem;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
}
.btn:focus{ outline:3px solid var(--sky); outline-offset:2px; }
.btn--gold{ background:var(--honey); color:#000; }
.btn--ghost{ background:#fff; color:#000; border-color:var(--line); }
.btn--link{ background:transparent; color:var(--sky); padding:0; border:0; }

.badge{
  display:inline-block;
  background:#e6f2f6;
  border-radius:999px;
  padding:2px 10px;
  margin-right:6px;
  font-size:.9rem;
}

img,svg,video{ max-width:100%; height:auto; }

.hero-paper{
  background:rgba(255,255,255,.92);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
}

.toc{ border-left:4px solid var(--line); padding-left:12px; margin:16px 0; }
.kicker{ color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; }

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8e8e8;
    --ink-2:#cbd5e1;
    --bg:#121212;
    --bg-soft:#1a1a1a;
    --line:#2a2f35;
    --shadow-1:0 1px 2px rgba(0,0,0,.6);
    --shadow-2:0 6px 24px rgba(0,0,0,.6);
  }
  body{ background:#0e0e0e; }
  .surface{ background:#161616; }
  .surface--soft{ background:#141414; }
  .card{ background:#161616; }
  .nav a,.nav a:visited{ color:#8dd48f; }
}

body.wiki-landing .card,
body.wiki-landing .article,
body.wiki-landing .panel,
body.blog-landing .card,
body.blog-landing .article,
body.blog-landing .panel,
body.blog-landing .post-card,
body.blog-landing .post,
body.blog-landing .teaser,
body.blog-landing .summary{
  background:transparent !important;
  box-shadow:none !important;
  border:1px solid var(--surface-stroke-1,#E6DFC4);
}
body.wiki-landing .card .header,
body.wiki-landing .article .header,
body.wiki-landing .panel .header,
body.blog-landing .card .header,
body.blog-landing .article .header,
body.blog-landing .panel .header{ background:transparent !important; }
.surface-none,
body.blog-landing .surface-none,
body.wiki-landing .surface-none{ background:transparent !important; border:0 !important; box-shadow:none !important; }

@media (max-width:720px){
  body.wiki-landing .hero-cta{
    position:static;
    margin:.75rem 16px 0 clamp(16px,4vw,48px);
  }
  body.wiki-landing .wiki-hero{ padding-bottom:1.25rem; }
}