/* ==========================================================================
   Nerv Linux — site
   Square corners, hairline rules, an 8px rhythm, and no ornament that isn't
   carrying information.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

code, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.9em; }
img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: var(--s-3) var(--s-4); font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--max-w-text); }

.section { padding-block: var(--s-10); }
.section--subtle { background: var(--bg-subtle); }
.section + .section { border-top: 1px solid var(--border); }
.section--head { padding-block: var(--s-9) var(--s-8); }

/* --- Headings ------------------------------------------------------------ */
.page-title { font-size: var(--t-3xl); margin-bottom: var(--s-5); }
.page-lede {
  font-size: var(--t-md); line-height: var(--lh-loose);
  color: var(--text-secondary); max-width: var(--max-w-text);
}
.section-title { font-size: var(--t-xl); margin-bottom: var(--s-5); max-width: 26ch; }
.section-lede {
  font-size: var(--t-base); color: var(--text-secondary);
  max-width: var(--max-w-text); margin-bottom: var(--s-5);
}
.crumb {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.crumb a { color: var(--text-tertiary); }

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-subtle); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.masthead__inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter);
  height: 56px; display: flex; align-items: center; gap: var(--s-6);
}
.masthead__brand { display: flex; align-items: center; text-decoration: none; }
.masthead__brand .logo { height: 30px; width: auto; }

/* Two artworks, one per theme: the mark carries its own outline colour, so it
   cannot be recoloured with CSS — the right file is shown instead. */
.logo--on-dark  { display: var(--logo-dark-bg); }
.logo--on-light { display: var(--logo-light-bg); }

.masthead__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.masthead__nav a {
  color: var(--text); font-size: var(--t-sm);
  padding: var(--s-2) var(--s-3); opacity: .8;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.masthead__nav a:hover { opacity: 1; background: var(--bg-sunken); text-decoration: none; }
.masthead__nav a[aria-current="page"] {
  opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand);
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--s-2);
  width: 34px; height: 34px;
  background: none; border: 1px solid var(--border); color: var(--text);
  cursor: pointer; opacity: .8;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { opacity: 1; border-color: var(--border-strong); }
/* Show the icon for the theme you would switch TO. */
.icon--sun  { display: var(--logo-dark-bg); }
.icon--moon { display: var(--logo-light-bg); }

/* --- Landing hero -------------------------------------------------------- */
/* Sits on artwork, so it stays dark in both themes and sets its own colours. */
.herobig {
  position: relative;
  background: #1b1f24 url("/assets/hero-bg.jpg") center/cover no-repeat;
  border-bottom: 1px solid var(--border);
  color: #f2f4f7;
}
.herobig::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,17,20,.86) 0%, rgba(15,17,20,.55) 55%, rgba(15,17,20,.30) 100%);
}
.herobig__inner { position: relative; z-index: 1; padding-block: var(--s-11); }
.herobig__title {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  letter-spacing: -0.035em; color: #fff; margin-bottom: var(--s-4);
}
.herobig__tag {
  font-size: clamp(1.125rem, 2.2vw, var(--t-lg));
  line-height: var(--lh-snug); color: #fff;
  max-width: 30ch; margin-bottom: var(--s-5);
  border-left: 3px solid var(--logo-red); padding-left: var(--s-4);
}
.herobig__lede {
  font-size: var(--t-base); line-height: var(--lh-loose);
  color: rgba(242,244,247,.82); max-width: 56ch; margin-bottom: var(--s-6);
}

/* --- Buttons ------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn {
  display: inline-flex; align-items: center;
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-sm); font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--logo-red); color: #fff; }
.btn--primary:hover { background: #cc0000; }
.btn--ghost { border-color: rgba(242,244,247,.45); color: #f2f4f7; }
.btn--ghost:hover { background: rgba(242,244,247,.12); border-color: #f2f4f7; }

/* --- Claim tiles --------------------------------------------------------- */
.claims {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.claim {
  padding: var(--s-6);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.claim__head {
  font-size: var(--t-lg); line-height: var(--lh-snug);
  margin-bottom: var(--s-4); max-width: 24ch;
}
.claim p { color: var(--text-secondary); font-size: var(--t-sm); line-height: var(--lh-loose); }
.claim__more { margin-top: auto; padding-top: var(--s-4); font-weight: 600; }
.claim__more a { color: var(--brand); }

/* --- Index list (front page + /design/) ---------------------------------- */
.index-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.index-item {
  padding: var(--s-5) var(--s-6);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.index-item:hover { background: var(--bg-subtle); }
.index-item h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.index-item p { color: var(--text-secondary); font-size: var(--t-sm); line-height: var(--lh-loose); }

/* --- Terminal ------------------------------------------------------------ */
/* Canonical OneDark in both themes: this is the palette being shown, not used. */
.term {
  background: var(--od-bg); color: var(--od-fg);
  border: 1px solid var(--od-bg-deep);
  font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-snug);
  overflow-x: auto; margin: 0;
}
.term__bar {
  background: var(--od-bg-deep); padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs); letter-spacing: var(--tracking-wide);
  color: var(--od-grey); border-bottom: 1px solid var(--od-bg);
}
.term__body { padding: var(--s-4); margin: 0; white-space: pre; }
.term .c-red { color: var(--od-red); }
.term .c-green { color: var(--od-green); }
.term .c-yellow { color: var(--od-yellow); }
.term .c-blue { color: var(--od-blue); }
.term .c-purple { color: var(--od-purple); }
.term .c-cyan { color: var(--od-cyan); }
.term .c-grey { color: var(--od-grey); }
.term .c-fg { color: var(--od-fg); }

/* --- Tables -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-block: var(--s-6); }
.table-scroll:last-child { margin-bottom: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th, table.data td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.data tbody tr:hover { background: var(--bg-subtle); }
.section--subtle table.data tbody tr:hover { background: var(--bg); }
table.data td code { font-size: var(--t-xs); background: var(--bg-sunken); padding: 2px 6px; }
.col-classic { color: var(--text-tertiary); }
.col-nerv { color: var(--accent-green); font-weight: 600; }

/* --- Misc content -------------------------------------------------------- */
.list { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.list li { margin-bottom: var(--s-2); }
.doclink {
  font-size: var(--t-sm); color: var(--text-tertiary);
  border-top: 1px solid var(--border); padding-top: var(--s-4); margin-top: var(--s-6);
}
.after-table { font-size: var(--t-sm); }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 2px var(--s-2); border: 1px solid currentColor; white-space: nowrap;
}
.pill--shipping { color: var(--accent-green); }
.pill--building { color: var(--accent-yellow); }
.pill--design { color: var(--text-tertiary); }

/* --- Footer -------------------------------------------------------------- */
.footer {
  background: var(--bg-sunken); color: var(--text);
  border-top: 1px solid var(--border);
  padding-block: var(--s-8) var(--s-7);
}
.footer a { color: var(--text); opacity: .8; }
.footer a:hover { opacity: 1; }
.footer__links {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--border);
}
.footer__base { padding-top: var(--s-5); font-size: var(--t-xs); opacity: .65; max-width: 90ch; }
.footer__base p { margin-bottom: var(--s-3); line-height: var(--lh-body); }
.footer__tm { opacity: .8; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .herobig__inner { padding-block: var(--s-9); }
  .section { padding-block: var(--s-8); }
  .page-title { font-size: var(--t-2xl); }
}
@media (max-width: 700px) {
  .masthead__nav a { display: none; }
  .masthead__nav a[aria-current="page"] { display: inline-block; }
}