/* ==========================================
   CORE DESIGN SYSTEM
   Thomas A. Blüm Web Architecture

   Shared structural base for:
   - thomas-a-bluem.de
   - symbiotic-intelligence.org
   - hybrid-evolution.org
   - future project / book / research pages

   Version:
   Core Architecture: v1.0
   Last structural revision: 2026-05

   Principle:
   Shared structural consistency with
   project-specific semantic identity.

   Project-specific adaptation should normally
   be limited to the variables in :root:
   - --accent
   - --accent-soft
   - --accent-strong
   - optional background / surface values

   Recommended accent presets:
   Personal site:
     --accent: #870066;
     --accent-soft: rgba(135, 0, 102, 0.35);
     --accent-strong: rgba(135, 0, 102, 0.8);

   Symbiotic Intelligence:
     --accent: #006996;
     --accent-soft: rgba(0, 105, 150, 0.30);
     --accent-strong: rgba(0, 105, 150, 0.78);

   Hybrid Evolution:
     --accent: #870066;
     --accent-soft: rgba(10, 70, 120, 0.35);
     --accent-strong: rgba(10, 70, 120, 0.8);

   Hybrid Evolution V1.2:
     --accent: #440e62;
     --accent-soft: rgba(68, 14, 98, 0.35);
     --accent-strong: rgba(68, 14, 98, 0.80);
========================================== */


/* ==========================================
   1. ROOT VARIABLES
========================================== */

:root {
  --accent: #440e62;
  --accent-soft: rgba(68, 14, 98, 0.35);
  --accent-strong: rgba(68, 14, 98, 0.80);

  --text: #222;
  --text-soft: #333;
  --muted: #666;

  --background: #f6f6f6;
  --surface: #ddd;
  --surface-soft: rgba(255, 255, 255, 0.48);
  --line: #d3d3d3;

  --content-width: 720px;
  --main-width: 760px;
  --wide-width: 800px;

  --section-margin: 60px;
  --section-margin-mobile: 44px;

  --radius: 8px;
  --radius-large: 10px;
}


/* ==========================================
   2. BASE
========================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text);
}

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


/* ==========================================
   3. LANGUAGE BAR
========================================== */

.language-bar {
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
}

.language-inner {
  max-width: var(--main-width);
  margin: auto;
  padding: 6px 20px;
  text-align: right;
}

.language-inner a {
  color: #fff;
  text-decoration: none;
  margin-left: 10px;
  font-weight: 500;
}

.language-inner a:hover {
  color: #bbb;
}


/* ==========================================
   4. HEADER / HERO

   Use .site-kicker when a project page needs
   a small uppercase line above the main title.
   Use .portrait for personal author pages.
   Use .book-cover for book / companion pages.
========================================== */

header {
  text-align: center;
  padding: 70px 20px 50px 20px;
}

.site-kicker {
  margin: 0 0 10px 0;
  color: var(--muted);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.portrait {
  width: 260px;
  height: auto;
  background: #fff;
  padding: 6px;
  border: 1px solid #cfcfcf;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 28px;
}

.book-cover {
  width: 320px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 34px auto;
}

h1 {
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin: 6px 0 10px 0;
  color: var(--accent);
  font-weight: 600;
}

.tagline {
  margin-top: 6px;
  color: var(--muted);
  font-size: 1.1rem;
}


/* ==========================================
   5. MAIN LAYOUT
========================================== */

main {
  max-width: var(--main-width);
  margin: auto;
  padding: 20px;
}

section {
  max-width: var(--content-width);
  margin: var(--section-margin) auto;
  padding: 0 20px;
}

.wide-section {
  max-width: var(--wide-width);
}

.text-section,
.about,
.work,
.projects,
.requests,
.book-intro,
.placeholder-section,
.backlink,
.faq,
.research-architecture,
.research-evolution,
#impressum,
#datenschutz {
  max-width: var(--content-width);
  margin: var(--section-margin) auto;
  padding: 0 20px;
  text-align: justify;
  hyphens: auto;
}


/* ==========================================
   6. TYPOGRAPHY
========================================== */

h2 {
  margin-bottom: 18px;
  color: var(--accent);
}

h3 {
  margin: 0 0 10px 0;
  font-size: 1.35rem;
  color: var(--accent);
  font-weight: 600;
}

h4 {
  margin: 30px 0 10px 0;
  font-size: 1.08rem;
  color: var(--accent);
  font-weight: 600;
}

p {
  letter-spacing: -0.02em;
  line-height: 1.7;
  margin: 0 0 16px 0;
  color: var(--text-soft);
}

.text-section p,
.about p,
.work p,
.projects p,
.requests p,
.book-intro p,
.placeholder-section p,
.backlink p,
.faq p,
.research-architecture p,
.research-evolution p,
#impressum p,
#datenschutz p {
  letter-spacing: -0.02em;
  line-height: 1.7;
  margin: 0 0 16px 0;
  color: var(--text-soft);
}

.book-meta,
.meta-line {
  margin: 0 0 22px 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.identifiers {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #555;
}

.external-note {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

code {
  background: #e2e2e2;
  padding: 0.1em 0.28em;
  border-radius: 4px;
  font-size: 0.95em;
}


/* ==========================================
   7. INLINE LINKS
========================================== */

a {
  color: #444;
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-strong);
}


/* ==========================================
   8. LISTS
========================================== */

ul,
ol {
  padding-left: 1.2em;
}

li {
  text-align: left;
  list-style-position: outside;
  line-height: 1.6;
  margin-bottom: 8px;
}

li::marker {
  color: var(--muted);
}

.paper-list,
.project-list {
  margin: 14px 0 26px 0;
  padding-left: 1.4em;
}

.paper-list li,
.project-list li {
  margin: 0 0 8px 0;
  line-height: 1.6;
}


/* ==========================================
   9. LINK GRID / PROFILE LINKS
========================================== */

.profiles {
  max-width: var(--content-width);
  margin: var(--section-margin) auto;
  padding: 0 20px;
}

.profiles h2 {
  margin-bottom: 18px;
  color: var(--accent);
}

.links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: var(--content-width);
  margin: 40px auto;
}

.links a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 10px 16px;
  width: 100%;

  text-decoration: none;
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;

  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.links a:hover {
  background: var(--accent);
  color: #fff;
}

.links .external-note {
  grid-column: 1 / -1;
  margin-top: 20px;
}

@media (min-width: 700px) {
  .links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================
   10. DETAILS / EXPANDER COMPONENT

   Usage:
   - FAQ sections
   - research architecture modules
   - expandable biography sections
   - compact explanatory deep-dives

   HTML pattern:
   <div class="expander-group">
     <details class="expander">
       <summary>Section title</summary>
       <p>Content...</p>
     </details>
   </div>

   Design goals:
   - native accessible <details>/<summary>
   - no JavaScript dependency
   - minimal visual weight
   - suitable for long-form text
   - stable rendering across Safari / iOS
========================================== */

.expander-group {
  margin-top: 28px;
}

.expander,
.faq details,
.research-architecture details,
.bio-details,
.research-details {
  display: block;
  margin: 0 0 14px 0;
  padding: 0 0 2px 0;
  border-top: 1px solid var(--line);
  border-bottom: none;
}

.expander:last-child,
.faq details:last-of-type,
.research-architecture details:last-of-type,
.bio-details:last-of-type,
.research-details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.expander summary,
.faq summary,
.research-architecture summary,
.bio-details summary,
.research-details summary {
  display: list-item;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #2b2b2b;
  padding: 13px 0 13px 0;
  list-style-position: inside;
}

.expander summary::-webkit-details-marker,
.faq summary::-webkit-details-marker,
.research-architecture summary::-webkit-details-marker,
.bio-details summary::-webkit-details-marker,
.research-details summary::-webkit-details-marker {
  color: var(--muted);
}

.expander summary::marker,
.faq summary::marker,
.research-architecture summary::marker,
.bio-details summary::marker,
.research-details summary::marker {
  color: var(--muted);
}

.expander summary:hover,
.faq summary:hover,
.research-architecture summary:hover,
.bio-details summary:hover,
.research-details summary:hover {
  color: var(--accent);
}

.expander[open] summary,
.faq details[open] summary,
.research-architecture details[open] summary,
.bio-details[open] summary,
.research-details[open] summary {
  color: var(--accent);
  padding-bottom: 10px;
}

.expander p,
.faq details p,
.research-architecture details p,
.bio-details p,
.research-details p {
  margin: 0 0 18px 0;
  padding: 0 0 4px 0;
}

.expander ul,
.expander ol,
.bio-details ul,
.bio-details ol,
.research-details ul,
.research-details ol {
  margin: 10px 0 22px 0;
  padding-left: 1.35em;
}

/* ==========================================
   11. FAQ / RESEARCH ARCHITECTURE HEADINGS
========================================== */

.faq,
.research-architecture {
  margin-top: 64px;
}

.faq-intro,
.research-architecture-intro {
  margin-bottom: 34px;
}

.faq h3,
.research-architecture h3 {
  font-size: calc(1.35rem - 2pt);
  margin: 38px 0 14px 0;
  color: var(--accent);
  font-weight: 600;
}

.faq h3:first-of-type,
.research-architecture h3:first-of-type {
  margin-top: 28px;
}


/* ==========================================
   12. CALLOUTS / NOTES / CITATION BOXES
========================================== */

.citation,
.note-box {
  margin-top: 28px;
  font-size: 0.95rem;
  color: #555;
}

.citation p,
.note-box p {
  color: #555;
}

.buy-note,
.accent-note {
  margin-top: 24px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}


/* ==========================================
   13. RESEARCH EVOLUTION MAP

   Optional component for Hybrid Evolution /
   architecture overview pages.
========================================== */

.evolution-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 34px 0 30px 0;
}

.evolution-step {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-large);
  padding: 18px 16px;
}

.evolution-step h3 {
  margin: 4px 0 10px 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.evolution-step p {
  text-align: left;
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.step-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.evolution-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
}


/* ==========================================
   14. SOCIAL LINKS
========================================== */

.social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.social a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.social a:hover {
  background: var(--accent);
}

.social img {
  width: 21px;
  height: 21px;
  filter: invert(17%);
}

.social a:hover img {
  filter: invert(1);
}


/* ==========================================
   15. FOOTER / LEGAL
========================================== */

footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 30px 20px;
  text-align: center;
  color: var(--muted);
}

footer p {
  line-height: 1.6;
}

.legal-separator {
  border: none;
  border-top: 1px solid var(--line);
  margin: 60px auto 30px auto;
  max-width: var(--content-width);
}

#impressum,
#datenschutz {
  max-width: var(--content-width);
  margin: 45px auto 60px auto;
  padding: 0 20px;
  font-size: 0.95rem;
}

#impressum {
  margin-top: 30px;
}

.mail-imprint {
  overflow-wrap: anywhere;
}


/* ==========================================
   16. RESPONSIVE RULES
========================================== */

@media (max-width: 760px) {
  .evolution-map {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .evolution-arrow {
    transform: rotate(90deg);
    min-height: 18px;
  }
}

@media (max-width: 560px) {
  header {
    padding: 52px 18px 36px 18px;
  }

  h1 {
    font-size: 2.05rem;
  }

  .site-kicker {
    font-size: 1.15rem;
  }

  main {
    padding: 10px;
  }

  section,
  .text-section,
  .about,
  .work,
  .projects,
  .requests,
  .book-intro,
  .placeholder-section,
  .backlink,
  .faq,
  .research-architecture,
  .research-evolution,
  #impressum,
  #datenschutz {
    margin: var(--section-margin-mobile) auto;
    padding: 0 14px;
    text-align: left;
  }

  .faq h3,
  .research-architecture h3 {
    margin-top: 34px;
    margin-bottom: 12px;
  }

  .legal-separator {
    margin-top: 46px;
  }
}