/* Production typography. Loaded after the layout to keep the reading scale
   consistent across desktop, mobile and the document pages. */
@font-face {
  font-family: Space;
  src: url('/assets/fonts/space-grotesk-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root { --muted: #c4c5cc; }

.site-header {
  background: linear-gradient(180deg, rgba(4,7,10,.94), rgba(4,7,10,.65) 65%, transparent);
}
.site-header.is-scrolled { background: rgba(8,9,11,.94); }
.site-name { font-size: 20px; letter-spacing: -.5px; }
.main-nav { gap: 32px; font-size: 16px; }
.main-nav a { padding-block: 12px; color: #eeedf2; font-weight: 600; }
.menu-toggle { width: 44px; height: 44px; }

.hero h1 { color: #f6f5f2; text-shadow: 0 2px 20px #0009; }
.hero-description { font-size: 19px; line-height: 1.75; color: #e5e4e9; }
.hero .eyebrow, .section-kicker {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .7px;
  color: #f0edf3;
}
.section-kicker { font-size: 13px; letter-spacing: .65px; }
.section-kicker > .section-index {
  width: auto;
  height: auto;
  flex-shrink: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
}
.section-kicker > .section-rule { width: 28px; height: 2px; flex-shrink: 0; background: var(--accent); }
.section-kicker > .red { width: auto; height: auto; background: none; color: var(--accent-text); }
.live-dot { width: 5px; height: 5px; }
.hero .live-dot { box-shadow: 0 0 14px #ff102875; }
.hero-content { text-shadow: 0 2px 12px #000c; }
.discover-link { min-height: 48px; font-size: 16px; font-weight: 600; color: #f2f0f5; }
.circle-arrow { width: 48px; height: 48px; border-color: #ffffff75; }
.hero-bottom {
  grid-template-columns: 1fr 1fr;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .5px;
  color: #d5d2db;
}
.hero-bottom-left { max-width: none; font-size: 12px; letter-spacing: .5px; }
.scroll-hint { justify-self: end; flex-direction: row; font-size: 12px; letter-spacing: .5px; }

/* Weight marks the hierarchy; paragraphs retain the lighter reading face. */
h2, h3, .learning-name { font-weight: 600; }
.learning-name { color: #e6e2ea; }
.learning-topics, .faq-list summary, .contact-status { font-weight: 600; }
.hero-bottom-left, .scroll-hint { font-weight: 600; }
.js.has-motion .manifesto-title > span { color: #c8c4ce; }

.manifesto-bottom p, .learning-description, .method-step > p,
.section-intro, .method-intro > p:not(.section-kicker),
.contact-heading > p:not(.section-kicker) {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
}
.manifesto-bottom p:first-child { color: #e0dde5; }
.section-intro { max-width: 340px; }
.learning-description { color: #d0ccd5; }
.learning-notes, .learning-topics { font-size: 16px; line-height: 1.8; }
.learning-notes p { color: var(--muted); }
.learning-notes .learning-topics { color: #e2dce8; }
.learning-number, .learning-category, .step-number, .step-note {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .5px;
}
.learning-number, .step-number { color: var(--accent-text); }
.learning-category, .step-note { color: #e1dce7; }
.availability { font-size: 14px; line-height: 1.8; color: #c4bfca; }
.contact-status { font-size: 16px; color: #e4dfe9; }
.responsible-note { font-size: 14px; line-height: 1.9; color: #c4bfca; }
.faq-list summary { min-height: 48px; font-size: 16px; line-height: 1.65; }
.faq-list details > p { font-size: 16px; line-height: 1.8; }
.site-footer { font-size: 14px; color: #c8c2d0; }
.site-footer .site-name { font-size: 18px; }
.document p, .document li { font-size: 17px; line-height: 1.9; }
.document .section-kicker { font-size: 13px; letter-spacing: .5px; }
.document .updated { font-size: 12px; letter-spacing: .5px; }
.return-link { font-size: 16px; }
.site-header .return-link { margin-top: 0; }

/* Darken the reading area while leaving the rack and laptop visible. */
.experience-background--concept .scene-shade {
  background: linear-gradient(90deg,rgba(3,5,10,.8),rgba(3,5,10,.43) 38%,transparent 70%),
              linear-gradient(0deg,rgba(3,5,10,.92),transparent 38%,rgba(3,5,10,.2));
}

@media (max-width: 1100px) {
  .learning-item summary { grid-template-columns: 45px 1fr 200px 18px; }
  .section-intro { max-width: 300px; }
}

@media (max-width: 800px) {
  .learning-item summary { grid-template-columns: 38px 1fr 18px; }
  .learning-category { display: none; }
  .section-head { gap: 32px; }
  .section-intro { max-width: 250px; }
}

@media (max-width: 719px) {
  .experience-background--concept .scene-shade {
    background: linear-gradient(0deg,#08090b 0%,#08090b 27%,rgba(8,9,11,.9) 42%,rgba(8,9,11,.08) 70%,rgba(8,9,11,.3));
  }
}

@media (max-width: 600px) {
  .site-name { font-size: 19px; }
  .hero { padding-bottom: 160px; }
  .hero-description { font-size: 17px; line-height: 1.75; max-width: 340px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .5px; }
  .section-kicker > .section-rule { width: 22px; }
  .hero-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; bottom: 26px; }
  .hero-bottom-left { font-size: 12px; line-height: 1.7; }
  .scroll-hint { font-size: 12px; letter-spacing: .5px; gap: 14px; }
  .scroll-line { height: 24px; }
  .discover-link { font-size: 16px; margin-top: 28px; }
  .manifesto-bottom p, .learning-description, .method-step > p,
  .section-intro, .method-intro > p:not(.section-kicker),
  .contact-heading > p:not(.section-kicker), .document p, .document li {
    font-size: 16px;
    line-height: 1.8;
  }
  .section-intro { max-width: none; }
  .learning-item summary { grid-template-columns: 28px 1fr 16px; }
  .learning-name { font-size: clamp(21px,5.4vw,29px); }
  .learning-notes, .learning-topics { font-size: 16px; }
  .availability { font-size: 14px; }
  .availability .live-dot { margin-top: 9px; }
  .contact-status { font-size: 15px; }
  .responsible-note { font-size: 14px; }
  .site-footer { gap: 18px; font-size: 14px; }
  .site-footer .site-name { font-size: 17px; }
  .site-header .return-link { font-size: 14px; }

  /* Larger navigation switches to its disclosure before the links crowd. */
  .main-nav {
    position: absolute;
    inset: 84px 0 auto;
    padding: 18px 24px 25px;
    background: #0d0c10fa;
    border-bottom: 1px solid #ffffff26;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: visibility .25s,opacity .25s,transform .25s;
    backdrop-filter: blur(24px);
  }
  .is-scrolled .main-nav { top: 72px; }
  .main-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .main-nav > a { padding: 12px 0; font-size: 16px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; background: transparent; border: 0; padding: 10px; }
  .menu-toggle span { display: block; width: 23px; height: 1px; background: #f1edf4; transition: transform .3s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  html:not(.js) .site-header { height: auto; min-height: 84px; flex-wrap: wrap; padding-top: 22px; }
  html:not(.js) .main-nav { position: static; inset: auto; visibility: visible; opacity: 1; transform: none; padding: 10px 0; background: transparent; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 24px; border: 0; backdrop-filter: none; }
  html:not(.js) .main-nav a { font-size: 15px; }
  html:not(.js) .menu-toggle { display: none; }
}

@media print {
  .site-header { display: none; }
  .hero h1, .hero-content { text-shadow: none; }
  .hero-description, .learning-description, .learning-category, .step-note { color: #333; }
}