/* ============================================================
   REAL OLD BEARDED LABS — FULL RETRO / TECHNICAL WORKSHOP
   Design direction: nordisk verksted + teknisk katalog ca. 1987–1996.
   Keeps existing content/functionality; removes SaaS/glass/card styling.
   ============================================================ */

:root {
  --retro-paper: #eee4cf;
  --retro-paper-2: #e5d7bc;
  --retro-paper-3: #f6eedf;
  --retro-ink: #201a13;
  --retro-text: #33291f;
  --retro-muted: #6e604f;
  --retro-copper: #91511f;
  --retro-copper-2: #b66a2f;
  --retro-green: #365847;
  --retro-rule: #76654d;
  --retro-rule-soft: rgba(74, 59, 40, .24);
  --retro-red: #8a3328;
  --retro-blue: #35556a;
  --retro-max: 1120px;
  --retro-read: 790px;

  /* map the existing variable system onto the retro palette */
  --bg: var(--retro-paper);
  --bg2: var(--retro-paper-2);
  --paper: var(--retro-paper-3);
  --paper2: #f2ead9;
  --ink: var(--retro-ink);
  --text: var(--retro-text);
  --muted: var(--retro-muted);
  --accent: var(--retro-copper);
  --accent2: var(--retro-copper-2);
  --line: var(--retro-rule-soft);
  --line2: rgba(145,81,31,.45);
  --shadow: none;
  --maxw: var(--retro-max);
  --readw: var(--retro-read);
}

:root[data-theme="forest"] {
  --retro-paper:#e5e6d5; --retro-paper-2:#d4d7c3; --retro-paper-3:#eff0e2;
  --retro-ink:#182018; --retro-text:#2e382d; --retro-muted:#5f6a5b;
  --retro-copper:#3f674c; --retro-copper-2:#557d60; --retro-rule:#52614d;
}
:root[data-theme="sea"] {
  --retro-paper:#e0e8e6; --retro-paper-2:#ccd9d8; --retro-paper-3:#eef3f1;
  --retro-ink:#132027; --retro-text:#293b40; --retro-muted:#596d71;
  --retro-copper:#366777; --retro-copper-2:#4a7f8e; --retro-rule:#52676c;
}
:root[data-theme="nordic"] {
  --retro-paper:#eceee8; --retro-paper-2:#daddd5; --retro-paper-3:#f5f5f0;
  --retro-ink:#171a18; --retro-text:#2d3430; --retro-muted:#626963;
  --retro-copper:#6e6047; --retro-copper-2:#94754a; --retro-rule:#65665e;
}
:root[data-theme="ember"] {
  --retro-paper:#18130e; --retro-paper-2:#211910; --retro-paper-3:#261d14;
  --retro-ink:#f1e5cf; --retro-text:#dccbb2; --retro-muted:#ae9a7c;
  --retro-copper:#ca7a32; --retro-copper-2:#e19a55; --retro-rule:#8e7556;
  --retro-rule-soft:rgba(232,215,189,.18);
  --retro-green:#8ba486;
}

html { scroll-behavior: smooth; }

body {
  margin: 0 !important;
  color: var(--retro-text) !important;
  background-color: var(--retro-paper) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(68,52,34,.028) 0, rgba(68,52,34,.028) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(255,255,255,.20), transparent 18%, transparent 82%, rgba(70,48,27,.05)) !important;
  background-attachment: fixed !important;
  font-family: Georgia, Cambria, "Times New Roman", serif !important;
  font-size: 17px !important;
  line-height: 1.67 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: auto !important;
}

body::before {
  opacity: .018 !important;
  z-index: -1 !important;
}

::selection { background: var(--retro-copper); color: var(--retro-paper-3); }

a {
  color: var(--retro-copper) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  border-bottom: 0 !important;
}
a:hover { color: var(--retro-copper-2) !important; }

/* Classic print / engineering typography */
h1, h2, h3, h4,
.section-title, .article-title, .hero-wordmark,
.robl-hub-title, .footer-brand, .brand {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif !important;
  color: var(--retro-ink) !important;
  text-shadow: none !important;
  letter-spacing: -.015em !important;
}
h1 { font-weight: 800 !important; }
h2, h3, h4 { font-weight: 700 !important; }

.eyebrow, .kicker, .meta, .small, .pill, .card-title, .section-eyebrow,
.sec-kicker, .section-label, .status, .status-pill, .stat-label,
.nav, .nav a, .footer, .footer-nav, .footer-org, .label, code, pre,
.theme-dock, .btn, button, input, textarea, select, .article-head .meta,
.translation-note, .workshop-note, .toc, .place-label, .language-picker {
  font-family: "Courier New", Courier, monospace !important;
}

/* -------------------- top navigation -------------------- */
.sitebar, .topbar, nav.sitebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--retro-paper-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-top: 4px solid var(--retro-ink) !important;
  border-bottom: 3px double var(--retro-rule) !important;
  box-shadow: none !important;
}
.sitebar-inner, .topbar > *, .topbar .nav {
  width: min(var(--retro-max), calc(100% - 36px)) !important;
  margin: 0 auto !important;
}
.sitebar-inner {
  min-height: 54px !important;
  padding: 8px 0 !important;
  gap: 20px !important;
}
.brand {
  font-size: .95rem !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.brand-logo { filter: sepia(.18) saturate(.78) contrast(1.05) !important; }
.brand-accent, .brand span { color: var(--retro-copper) !important; }
.nav { gap: 6px 15px !important; }
.nav a, .nav button, .dropdown-toggle {
  color: var(--retro-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 1px !important;
  font-size: .69rem !important;
  line-height: 1.15 !important;
  letter-spacing: .075em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.nav a:hover, .nav button:hover { color: var(--retro-copper) !important; }
.nav .manifest-link {
  color: var(--retro-copper) !important;
  border: 1px solid var(--retro-copper) !important;
  padding: 5px 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.has-dropdown { position: relative !important; }
.dropdown-panel {
  background: var(--retro-paper-3) !important;
  border: 2px solid var(--retro-rule) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 rgba(45,34,22,.13) !important;
  backdrop-filter: none !important;
  padding: 4px !important;
}
.dropdown-item {
  border-radius: 0 !important;
  border-bottom: 1px dotted var(--retro-rule-soft) !important;
  padding: 9px 10px !important;
  background: transparent !important;
}
.dropdown-item:hover { background: rgba(145,81,31,.07) !important; }
.di-name { color: var(--retro-ink) !important; font-weight: 700 !important; }
.di-desc { color: var(--retro-muted) !important; }
.nav-toggle {
  border: 1px solid var(--retro-rule) !important;
  border-radius: 0 !important;
  background: var(--retro-paper-3) !important;
  color: var(--retro-ink) !important;
}

/* -------------------- palette control -------------------- */
.theme-dock {
  right: 12px !important;
  bottom: 12px !important;
  padding: 6px 7px !important;
  gap: 5px !important;
  border: 1px solid var(--retro-rule) !important;
  border-radius: 0 !important;
  background: var(--retro-paper-3) !important;
  box-shadow: 3px 3px 0 rgba(45,34,22,.14) !important;
  backdrop-filter: none !important;
}
.theme-dock span {
  color: var(--retro-muted) !important;
  font-size: .58rem !important;
  letter-spacing: .08em !important;
}
.theme-btn {
  width: 18px !important; height: 18px !important;
  border-radius: 0 !important;
  border: 1px solid var(--retro-ink) !important;
  box-shadow: none !important;
}

/* -------------------- hero -------------------- */
.hero {
  width: min(var(--retro-max), calc(100% - 36px)) !important;
  max-width: var(--retro-max) !important;
  margin: 0 auto !important;
  padding: 58px 0 44px !important;
  gap: 26px !important;
  min-height: auto !important;
  background: transparent !important;
}
.hero-card, .manifest-card {
  position: relative !important;
  background: rgba(246,238,223,.76) !important;
  border: 1px solid var(--retro-rule) !important;
  border-top: 5px solid var(--retro-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
:root[data-theme="ember"] .hero-card,
:root[data-theme="ember"] .manifest-card { background: rgba(38,29,20,.90) !important; }
.hero-card { padding: clamp(24px,4.2vw,46px) !important; }
.hero-card::before {
  content: "REAL OLD BEARDED LABS  //  TECHNICAL WORKSHOP" !important;
  display: block !important;
  position: static !important;
  width: auto !important; height: auto !important;
  margin: 0 0 22px !important;
  background: transparent !important;
  color: var(--retro-muted) !important;
  font: 700 .62rem/1.3 "Courier New", monospace !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
.hero-card::after { display: none !important; }
.hero h1 {
  /* V2: behold den tunge retrokarakteren, men la overskriften puste. */
  font-size: clamp(2.25rem,4.9vw,4.2rem) !important;
  line-height: .96 !important;
  text-transform: uppercase !important;
  max-width: 14ch !important;
  margin: 0 !important;
}
.hero .lead, .hero-lead {
  max-width: 46rem !important;
  color: var(--retro-text) !important;
  font-size: clamp(1.03rem,1.8vw,1.22rem) !important;
  line-height: 1.55 !important;
}
.hero .meta { color: var(--retro-muted) !important; }
.manifest-card {
  padding: 22px !important;
  border-top-color: var(--retro-copper) !important;
}
.manifest-card::before {
  content: "WORKSHOP NOTE / 001";
  display: block;
  margin-bottom: 14px;
  color: var(--retro-copper);
  font: 700 .64rem/1.2 "Courier New",monospace;
  letter-spacing: .09em;
}
.runes { color: var(--retro-copper) !important; opacity: 1 !important; }

/* Older image-led hero from the archived theme */
.hero-bg { filter: sepia(.18) saturate(.72) contrast(1.02) !important; }
.hero-bg::after { background: linear-gradient(to bottom,rgba(15,12,9,.15),rgba(15,12,9,.68) 70%,rgba(15,12,9,.90)) !important; }
.hero-seal { filter: sepia(.2) saturate(.8) contrast(1.05) !important; box-shadow:none !important; }
.hero-wordmark { color:#d58a48 !important; text-shadow:none !important; }

/* -------------------- buttons and controls -------------------- */
.btn, .button, .cta-btn, .newsletter-submit, .chat-send,
button:not(.theme-btn):not(.robl-hub-close):not(.nav-toggle) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  border: 1px solid var(--retro-rule) !important;
  background: var(--retro-paper-3) !important;
  color: var(--retro-ink) !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: background .1s linear, color .1s linear !important;
  padding: .7rem .95rem !important;
  min-height: 38px !important;
  font-size: .70rem !important;
  letter-spacing: .075em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.btn.primary, .button.primary, .cta-btn.primary, .newsletter-submit, .chat-send {
  background: var(--retro-ink) !important;
  border-color: var(--retro-ink) !important;
  color: var(--retro-paper-3) !important;
}
.btn:hover, .button:hover, .cta-btn:hover, .newsletter-submit:hover, .chat-send:hover {
  background: var(--retro-copper) !important;
  border-color: var(--retro-copper) !important;
  color: var(--retro-paper-3) !important;
  transform: none !important;
  box-shadow: none !important;
}

input, textarea, select {
  border: 1px solid var(--retro-rule) !important;
  border-radius: 0 !important;
  background: var(--retro-paper-3) !important;
  color: var(--retro-ink) !important;
  box-shadow: none !important;
  outline: none !important;
  padding: .72rem .8rem !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--retro-copper) !important; }

/* -------------------- page structure -------------------- */
.wrap, .wide, main, article > section {
  position: relative;
}
.wrap {
  width: min(var(--retro-read), calc(100% - 36px)) !important;
  padding: 14px 0 66px !important;
}
.wide {
  width: min(var(--retro-max), calc(100% - 36px)) !important;
  padding: 12px 0 66px !important;
}
.chapter,
main > section,
article > section {
  border-top: 3px double var(--retro-rule) !important;
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}
.chapter:first-child, main > section:first-child, article > section:first-child { border-top: 0 !important; }

.eyebrow, .kicker, .section-eyebrow, .sec-kicker, .section-label {
  color: var(--retro-copper) !important;
  opacity: 1 !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.eyebrow::before, .kicker::before { content: "[ " !important; color: var(--retro-muted) !important; opacity: 1 !important; }
.eyebrow::after, .kicker::after { content: " ]" !important; color: var(--retro-muted) !important; }

.chapter h2, main > section h2, article > section h2 {
  margin-bottom: 14px !important;
  text-transform: none !important;
}

/* Flat grids: catalogue/table rather than floating cards */
.grid, .product-grid, .stats, .principles, .language-grid,
.test-route, .levels, .rings, .evidence-gallery {
  border-radius: 0 !important;
  border: 1px solid var(--retro-rule) !important;
  background: var(--retro-rule) !important;
  gap: 1px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.paper-card, .product-card, .download-card, .stat, .principle, .ring,
.test-step, .level, .status-card, .aside-card, .callout, .notice,
.language-panel, .commitment, .why-point, .position, .technical-note,
.workshop-note, .translation-note, .community, .sources {
  background: var(--retro-paper-3) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.paper-card, .product-card { padding: 22px !important; }
.paper-card:hover, .product-card:hover, .download-card:hover,
.stat:hover, .principle:hover, .ring:hover, .test-step:hover, .level:hover {
  transform: none !important;
  box-shadow: none !important;
  background: color-mix(in srgb,var(--retro-paper-3) 92%,var(--retro-copper) 8%) !important;
}
.card-title, .status-pill, .status {
  color: var(--retro-copper) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: .67rem !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.status-pill::before, .status::before { content:"■ "; font-size:.55em; }
.status-pill.live, .status.live { color: var(--retro-green) !important; }
.product-link { font-family:"Courier New",monospace !important; font-size:.72rem !important; }

.pull, .lead-quote {
  border: 0 !important;
  border-top: 1px solid var(--retro-rule) !important;
  border-bottom: 1px solid var(--retro-rule) !important;
  border-left: 7px solid var(--retro-copper) !important;
  background: transparent !important;
  color: var(--retro-ink) !important;
  padding: 18px 20px !important;
  margin: 26px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Georgia, Cambria, serif !important;
  font-style: italic !important;
}

/* media: photographs as documentary plates */
.media, .frame, .hero-logo, .evidence-gallery img, .article-media img,
img[class*="frame"], .media img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.media, .frame {
  border: 1px solid var(--retro-rule) !important;
  background: var(--retro-paper-3) !important;
  padding: 5px !important;
}
.media img, .frame img, .evidence-gallery img {
  filter: saturate(.78) contrast(1.03) sepia(.06) !important;
}

/* -------------------- ROBL guide / newsletter -------------------- */
.robl-hub-launcher {
  border-radius: 0 !important;
  border: 1px solid var(--retro-rule) !important;
  background: var(--retro-paper-3) !important;
  box-shadow: 4px 4px 0 rgba(45,34,22,.15) !important;
  backdrop-filter: none !important;
}
.robl-hub-launcher .pulse { border-radius:0 !important; animation:none !important; background:var(--retro-copper) !important; }
.robl-hub {
  border-radius: 0 !important;
  border: 2px solid var(--retro-rule) !important;
  background: var(--retro-paper-3) !important;
  box-shadow: 8px 8px 0 rgba(45,34,22,.18) !important;
  backdrop-filter: none !important;
}
.robl-hub-head, .robl-hub-tabs { border-bottom: 1px solid var(--retro-rule) !important; }
.robl-hub-tab, .chat-chip {
  border-radius: 0 !important;
  border: 1px solid var(--retro-rule) !important;
  background: transparent !important;
  color: var(--retro-text) !important;
}
.robl-hub-tab.active, .chat-chip:hover { background: var(--retro-ink) !important; color: var(--retro-paper-3) !important; }
.chat-msg { border-radius:0 !important; box-shadow:none !important; }
.chat-msg.bot { background:rgba(145,81,31,.06) !important; border-left:3px solid var(--retro-copper) !important; }

/* -------------------- Updates / editorial page -------------------- */
.topbar {
  padding: 0 !important;
}
.topbar .nav { padding: 8px 0 !important; }
.navlinks { gap: 16px !important; }
.language-picker, .button { border-radius:0 !important; }
.hero-inner {
  width:min(var(--retro-read),calc(100% - 36px)) !important;
  margin:0 auto !important;
  padding:44px 0 30px !important;
}
.log-entry { border-top: 5px solid var(--retro-ink) !important; padding-top: 28px !important; }
.article-head { border-bottom: 1px solid var(--retro-rule) !important; padding-bottom: 16px !important; margin-bottom: 22px !important; }
.article-title { font-size:clamp(2rem,5vw,4rem) !important; line-height:1 !important; }
.article-intro { font-family:Georgia,Cambria,serif !important; }
.test-step, .ring, .level { padding:18px !important; }
.verified { color:var(--retro-green) !important; font-family:"Courier New",monospace !important; font-weight:700 !important; }
.technical-note, .workshop-note, .translation-note, .status-card, .community, .sources, .aside-card {
  border:1px solid var(--retro-rule) !important;
  padding:18px !important;
}
.toc { border-top:3px double var(--retro-rule) !important; border-bottom:3px double var(--retro-rule) !important; padding:16px 0 !important; }

/* -------------------- About / history specifics -------------------- */
.stats { grid-template-columns:repeat(4,1fr) !important; }
.stat { padding:16px !important; text-align:left !important; }
.stat-val { font-family:"Arial Narrow",Arial,sans-serif !important; color:var(--retro-ink) !important; font-weight:800 !important; }
.commitment-list { border:1px solid var(--retro-rule) !important; }
.commitment { border-bottom:1px dotted var(--retro-rule-soft) !important; padding:14px !important; }
.cta-panel, .closing {
  border:3px double var(--retro-rule) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:28px !important;
}

/* -------------------- footer -------------------- */
.footer, .site-footer, body > footer, footer {
  background: var(--retro-paper-2) !important;
  color: var(--retro-text) !important;
  border: 0 !important;
  border-top: 5px solid var(--retro-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.footer-inner {
  width:min(var(--retro-max),calc(100% - 36px)) !important;
  margin:0 auto !important;
  padding-top:22px !important;
  padding-bottom:22px !important;
}
.footer-brand { font-weight:800 !important; text-transform:uppercase !important; }
.footer-nav a { color:var(--retro-text) !important; }
.footer-org {
  border-top:1px solid var(--retro-rule) !important;
  color:var(--retro-muted) !important;
  padding-top:12px !important;
  margin-top:15px !important;
}

/* -------------------- kill SaaS motion / glass globally -------------------- */
.reveal { opacity:1 !important; transform:none !important; transition:none !important; }
*[style*="backdrop-filter"], *[class*="glass"] { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
@media (prefers-reduced-motion: no-preference) {
  .reveal, .hero-card, .manifest-card, .btn, .paper-card, .product-card { animation:none !important; }
}

/* -------------------- responsive -------------------- */
@media (max-width: 920px) {
  .sitebar-inner { align-items:flex-start !important; }
  .nav { justify-content:flex-end !important; }
  .hero { grid-template-columns:1fr !important; }
  .manifest-card { min-height:0 !important; }
  .grid.three, .product-grid, .principles, .test-route, .rings { grid-template-columns:1fr !important; }
  .stats { grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width: 680px) {
  body { font-size:16px !important; }
  .sitebar, .topbar { position:relative !important; }
  .sitebar-inner { width:min(100% - 24px,var(--retro-max)) !important; }
  .brand-logo { max-height:35px !important; }
  .nav { gap:4px 10px !important; }
  .hero, .wide, .wrap, .hero-inner { width:calc(100% - 24px) !important; }
  .hero { padding-top:30px !important; }
  .hero-card { padding:22px 18px !important; }
  .hero h1 { font-size:clamp(2.05rem,12vw,3.45rem) !important; }
  .chapter, main > section, article > section { padding-top:30px !important; padding-bottom:30px !important; }
  .grid, .grid.three, .product-grid, .principles, .language-grid, .test-route, .levels, .rings, .stats { grid-template-columns:1fr !important; }
  .paper-card, .product-card { padding:18px !important; }
  .theme-dock { position:static !important; width:max-content !important; margin:12px auto !important; }
  .robl-hub-launcher { right:10px !important; bottom:10px !important; }
  .robl-hub { right:10px !important; left:10px !important; width:auto !important; bottom:58px !important; }
}

@media print {
  .sitebar, .topbar, .theme-dock, .robl-hub-launcher, .robl-hub { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  a { color:#000 !important; }
  .hero, .wide, .wrap { width:100% !important; }
}