/* NOCHEBUENA|DEV — Gitea landing page.
   Brand from nochebuena.dev (Aurora/URKU + Aileron); dark palette taken
   verbatim from nornir's app.css so the two products match.

   Scoped under .ndev-home throughout. The landing page's own stylesheets set
   bare `body`, `h1` and `.hero` selectors, and Gitea uses `.hero` for its own
   headers — importing them unscoped would restyle the whole application.

   Dark is keyed off [data-theme*="dark"], which is the attribute Gitea already
   writes on <html>. Same mechanism nornir uses: an explicit choice, not
   prefers-color-scheme. */

@font-face{font-family:Aileron;src:url(fonts/aileron-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Aileron;src:url(fonts/aileron-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Aileron;src:url(fonts/aileron-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Aileron;src:url(fonts/aileron-black.woff2) format("woff2");font-weight:900;font-display:swap}

.ndev-home{
  --blue:#2277A8; --blue-deep:#1A5E86; --blue-wash:#EDF4F8;
  --on-blue:#FFFFFF;
  --ink:#1E313F; --ink-2:#3F5063; --ink-3:#6B7B8B;
  --paper:#FFFFFF; --line:#DDE4EA; --line-2:#C8D4DD;
  --sans:"Aileron","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1180px; --gut:clamp(20px,5vw,64px);
  font-family:var(--sans); color:var(--ink); line-height:1.7;
  background:var(--paper);
}

/* nornir's dark palette, unchanged */
[data-theme*="dark"] .ndev-home{
  --blue:#5FB0DD; --blue-deep:#8AC8E8; --blue-wash:#17303E;
  --on-blue:#0B1720;
  --ink:#DCE6ED; --ink-2:#A9BAC7; --ink-3:#7F92A1;
  --paper:#1B2B38; --line:#2C4253; --line-2:#3B5568;
}

.ndev-home .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.ndev-home .hero{
  position:relative;overflow:hidden;
  padding-top:clamp(56px,9vw,110px);
  background:linear-gradient(180deg,var(--blue-wash) 0%,var(--paper) 62%);
}
/* the blue rail from the letterhead */
.ndev-home .hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--blue);
}

.ndev-home .hero-wordmark{width:min(420px,72vw);height:auto;margin-bottom:34px;display:block}
.ndev-home .wm-dark{display:none}
[data-theme*="dark"] .ndev-home .wm-light{display:none}
[data-theme*="dark"] .ndev-home .wm-dark{display:block}

.ndev-home .hero-title{
  font-size:clamp(32px,5.4vw,58px);font-weight:900;line-height:1.12;
  max-width:18ch;margin:0 0 22px;color:var(--ink);letter-spacing:-.01em;
}
.ndev-home .hero-lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink-2);max-width:56ch;margin:0}
.ndev-home .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;padding-bottom:clamp(48px,7vw,80px)}

.ndev-home .btn{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 30px;border:1px solid transparent;
  border-radius:2px;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
}
.ndev-home .btn-solid{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.ndev-home .btn-solid:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--on-blue)}
.ndev-home .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.ndev-home .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

.ndev-home .hero-marks{border-top:1px solid var(--line);background:var(--paper)}
.ndev-home .hero-marks ul{display:flex;flex-wrap:wrap;gap:clamp(18px,4.5vw,52px);padding-block:22px;margin:0;list-style:none}
.ndev-home .hero-marks li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}

.ndev-home .note{border-top:1px solid var(--line);background:var(--paper)}
.ndev-home .note p{padding-block:26px;margin:0;color:var(--ink-3);font-size:14px}


/* ndev-auto follows the operating system, and its name contains no "dark",
   so the selector above cannot match it. Without this block the hero would
   stay light under a dark system while the rest of the UI went dark. */
@media (prefers-color-scheme: dark){
  [data-theme="ndev-auto"] .ndev-home,
  [data-theme="gitea-auto"] .ndev-home{
  --blue:#5FB0DD; --blue-deep:#8AC8E8; --blue-wash:#17303E;
  --on-blue:#0B1720;
  --ink:#DCE6ED; --ink-2:#A9BAC7; --ink-3:#7F92A1;
  --paper:#1B2B38; --line:#2C4253; --line-2:#3B5568;
  }
  [data-theme="ndev-auto"] .ndev-home .wm-light,
  [data-theme="gitea-auto"] .ndev-home .wm-light{display:none}
  [data-theme="ndev-auto"] .ndev-home .wm-dark,
  [data-theme="gitea-auto"] .ndev-home .wm-dark{display:block}
}