:root{
    --paper: #bdbaa1;
    --ivory: #f7f4ea;
    --ink-red: #7a1b1b;
    --ink-blue: #12395c;
    --ink-dark: #2b2620;
    --ink-dark-soft: #4a4238;
    --nav-h: 56px;
    /* Matches the printed book's own body-text spec (Source Serif 4
       Regular, 1.5x leading) - used for manual/module reading text
       only, not UI chrome. Georgia/Times as system-serif fallback if
       the webfont fails to load. */
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  }

  *{ box-sizing: border-box; }

  html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
  }

  html, body{
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  body{
    background-color: var(--paper);
    background-image:
      linear-gradient(rgba(248, 245, 235, 0.22), rgba(248, 245, 235, 0.22)),
      url("paper-texture.jpg");
    background-repeat: no-repeat, repeat;
    background-size: cover, 1024px 1024px;
    color: var(--ink-dark);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  /* Reading pages (module text, citations) get a flat, lighter ivory
     background instead of the textured paper - that texture suits the
     home page's hero treatment, not a page meant to be read at length. */
  body.module-page{
    background-color: var(--ivory);
    background-image: none;
  }

  /* ---- base element typography ----
     Fallback defaults for any h1-h4/p dropped in without a specific
     class (e.g. a manual future edit). Section-specific classes below
     (.book-title, .group-label, .org-list p, etc.) override these where
     a section needs something different (centered leads, captions,
     hero text) — this block only sets the baseline every bare element
     should already look like. */

  h1, h2, h3, h4{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--ink-dark);
    margin: 0 0 0.6rem;
  }

  h1, h2{
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--ink-red);
    text-align: center;
    margin: 0 0 1.6rem;
  }

  h3{
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-blue);
    margin: 0 0 1rem;
  }

  h4{
    font-size: 1rem;
    margin: 0 0 0.2rem;
  }

  p{
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    max-width: 56ch;
    margin: 0 0 1rem;
  }

  p:last-child{ margin-bottom: 0; }

  a{ color: var(--ink-blue); }

  .sr-only{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- tab nav ---- */

  .tabs{
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    background: rgba(228, 225, 211, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(43,38,32,0.14);
  }

  .tabs a{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    color: var(--ink-dark-soft);
    text-decoration: none;
    padding: 0.4rem 0.2rem;
    border-bottom: 2px solid transparent;
  }

  .tabs a:hover{
    color: var(--ink-red);
  }

  /* ---- shared section layout ---- */

  section{
    padding: 6vh 5vw 8vh;
  }

  .section-inner{
    max-width: 640px;
    margin: 0 auto;
  }

  /* ---- home / hero ---- */

  #home .section-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: calc(88vh - var(--nav-h));
    justify-content: center;
  }

  .card-wrap{
    position: relative;
    margin-bottom: 2.6rem;
  }

  .card{
    width: min(72vw, 420px);
    display: block;
    border-radius: 3px;
    transform: rotate(-3deg);
    box-shadow:
      0 2px 4px rgba(43,38,32,0.18),
      0 18px 34px -12px rgba(43,38,32,0.38),
      0 34px 60px -20px rgba(43,38,32,0.28);
    animation: float 7s ease-in-out infinite;
  }

  @keyframes float{
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(-8px); }
  }

  .dot{
    position: absolute;
    border-radius: 50%;
    opacity: 0.85;
  }
  .dot.red   { width: 14px; height: 14px; background: var(--ink-red); }
  .dot.blue  { width: 10px; height: 10px; background: var(--ink-blue); }
  .dot.cream { width: 9px;  height: 9px;  background: #f4f1e6; border: 1px solid rgba(43,38,32,0.15); }

  .dot-a { top: -10px; right: 14%; }
  .dot-b { top: 6%; right: 5%; }
  .dot-c { bottom: -6px; left: 10%; }

  .tagline{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    line-height: 1.4;
    color: var(--ink-dark);
    max-width: 30ch;
    margin: 0 0 1rem;
  }

  .credit{
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-dark-soft);
    max-width: 42ch;
    margin: 0 0 2.4rem;
  }

  .credit .accent{
    color: var(--ink-red);
    font-weight: inherit;
  }

  .launch{
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-blue);
    border: 1.5px solid var(--ink-blue);
    border-radius: 999px;
    padding: 0.55rem 1.3rem;
  }

  /* ---- CTA buttons (shared: manual download, course link) ---- */

  .cta-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin: 0 auto 2.6rem;
  }

  .cta-btn{
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
  }

  .cta-btn.primary{
    background: var(--ink-red);
    color: #f8f5eb;
  }

  .cta-btn.primary:hover{
    background: #611515;
  }

  .cta-btn.ghost{
    color: var(--ink-blue);
    border: 1.5px solid var(--ink-blue);
    background: transparent;
  }

  .cta-btn.ghost:hover{
    background: rgba(18,57,92,0.08);
  }

  /* ---- manual section ---- */

  #manual, #network{
    background: rgba(244, 241, 230, 0.62);
    border-top: 1px solid rgba(43,38,32,0.14);
    border-bottom: 1px solid rgba(43,38,32,0.14);
  }

  .book-title{
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--ink-red);
    margin: 0 0 1.6rem;
    text-align: center;
  }

  .book-lead{
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-dark-soft);
    text-align: center;
    max-width: 52ch;
    margin: -2.2rem auto 3rem;
  }

  h3.group-label{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-blue);
    margin: 0 0 1rem;
  }

  .modules{
    list-style: none;
    margin: 0 0 2.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }

  .modules li{
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.9rem;
  }

  .modules .num{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-red);
    opacity: 0.55;
  }

  .modules h4{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.15rem;
    color: var(--ink-dark);
  }

  .modules .by{
    font-size: 0.82rem;
    color: var(--ink-blue);
    margin: 0 0 0.35rem;
  }

  .modules p{
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    margin: 0;
    max-width: 56ch;
  }

  .book-extra{
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-dark-soft);
    text-align: left;
    max-width: 56ch;
    margin: 0 0 3rem;
  }

  .colophon{
    background: rgba(255, 253, 246, 0.7);
    border: 1px solid rgba(43,38,32,0.16);
    border-radius: 4px;
    padding: 1.6rem 1.8rem;
    max-width: 480px;
    margin: 0 auto;
  }

  .colophon dt{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-blue);
    margin: 0.9rem 0 0.2rem;
  }

  .colophon dt:first-child{ margin-top: 0; }

  .colophon dd{
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-dark);
    margin: 0;
  }

  /* ---- learn section ---- */

  #learn .section-inner{
    text-align: center;
  }

  /* ---- network section ---- */

  .org-group{
    margin: 0 0 2.4rem;
  }

  .org-group:last-child{ margin-bottom: 0; }

  .org-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .org-list h4{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.2rem;
    color: var(--ink-dark);
  }

  .org-list h4 a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(43,38,32,0.3);
  }

  .org-list h4 a:hover{
    color: var(--ink-red);
    border-color: var(--ink-red);
  }

  .org-list p{
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    margin: 0;
    max-width: 56ch;
  }

  .org-intro{
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    max-width: 56ch;
    margin: 0 0 1.2rem;
  }

  /* ---- funding section ---- */

  .funders{
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }

  .funders h4{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.3rem;
    color: var(--ink-dark);
  }

  .funders h4 a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(43,38,32,0.3);
  }

  .funders h4 a:hover{
    color: var(--ink-red);
    border-color: var(--ink-red);
  }

  .funders p{
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    margin: 0;
    max-width: 56ch;
  }

  .source-note{
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-dark-soft);
    text-align: center;
    margin: 0;
  }

  /* ---- shared footer ---- */

  footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 5vh 5vw 7vh;
    text-align: center;
    background: rgba(228, 225, 211, 0.75);
    border-top: 1px solid rgba(43,38,32,0.14);
  }

  .colophon-credit a{
    color: inherit;
  }

  .wordmark{
    width: 150px;
    height: auto;
    opacity: 0.9;
  }

  .domain{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--ink-dark-soft);
  }

  .colophon-credit{
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ink-dark-soft);
    max-width: 44ch;
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce){
    .card{ animation: none; }
  }

  @media (max-width: 420px){
    .dot{ display: none; }
    .modules li{ grid-template-columns: 2rem 1fr; }
  }

  /* ---- manual + module subpages (docs/manual/, docs/manual/module-0X/) ---- */

  .breadcrumb{
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink-blue);
    text-decoration: none;
    text-align: center;
    margin: 0 0 2rem;
  }

  /* Module page header: the breadcrumb + "Module 0X" label sit left,
     matching the page-margin edge of the body text below. The title,
     byline, and ARK stay centered (their normal site-wide alignment) as
     a masthead in between the two left-aligned bands. */
  .module-page .breadcrumb{ text-align: left; }

  .breadcrumb:hover{ color: var(--ink-red); }

  .modules.linked li{
    cursor: default;
  }

  .modules.linked h4 a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(43,38,32,0.3);
  }

  .modules.linked h4 a:hover{
    color: var(--ink-red);
    border-color: var(--ink-red);
  }

  .module-meta{
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-blue);
    text-align: center;
    margin: -1.2rem 0 0.4rem;
  }

  .module-page .module-meta{ text-align: left; }

  .module-page .book-title{ text-align: left; margin-bottom: 0.3rem; }

  .module-page .section-inner > .by{
    display: block;
    font-size: 0.92rem;
    color: var(--ink-blue);
    text-align: left;
    margin: 0 0 2rem;
  }

  /* Module pages and the /manual/ landing page carry more text than the
     rest of the site (module body copy, citations) - a bit wider than
     the site's default 640px column. */
  .module-page .section-inner,
  #manual-full .section-inner{
    max-width: 760px;
  }

  .module-page .first-para{
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    max-width: 62ch;
    margin: 0 0 2.6rem;
  }

  /* Appendix pages carry numbered subsections (A.1, A.2, ...) rather
     than the modules' single flowing excerpt - same serif body copy as
     .first-para, but a subheading plus tighter paragraph spacing so
     several sections can sit in a reading flow. */
  .module-page .appendix-excerpt h4{
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
  }

  .module-page .appendix-excerpt p{
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    max-width: 62ch;
    margin: 0 0 1.4rem;
  }

  .module-page .appendix-excerpt{
    margin-bottom: 2.6rem;
  }

  /* Bullet lists (e.g. "Line length and reading speed") in the same
     serif reading voice as the surrounding paragraphs - nothing sets
     ul/li anywhere else on the site, so without this they'd fall back
     to plain sans-serif browser defaults mid-passage. */
  .module-page .appendix-excerpt ul{
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    max-width: 62ch;
    margin: 0 0 1.4rem;
    padding-left: 1.3rem;
  }

  .module-page .appendix-excerpt li{
    margin: 0 0 0.4rem;
  }

  .module-page .appendix-excerpt li:last-child{
    margin-bottom: 0;
  }

  /* Multi-line SRT/subtitle examples - same monospace treatment as
     the citation block's .citation-text, scaled to this narrower
     reading column. */
  .module-page .appendix-excerpt pre.srt-example{
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    background: rgba(255, 253, 246, 0.7);
    border: 1px solid rgba(43,38,32,0.16);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin: 0 0 1.4rem;
    max-width: 62ch;
    white-space: pre-wrap;
    word-break: break-word;
  }

  #manual-full .book-lead{
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.5;
    text-align: left;
    max-width: 62ch;
    margin: 0 0 1.6rem;
  }

  .lang-note{
    font-size: 0.8rem;
    color: var(--ink-dark-soft);
    text-align: center;
    margin: 0 0 2.4rem;
  }

  .module-page .lang-note{ text-align: left; }

  .module-page .cta-row{ justify-content: flex-start; }

  /* ---- ARK permalink + copy/download controls ---- */

  .ark-permalink{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--ink-dark-soft);
    text-align: center;
    margin: 0 0 2rem;
  }

  .module-page .ark-permalink{
    justify-content: flex-start;
    text-align: left;
  }

  .ark-permalink code{
    font-family: var(--font-mono);
    font-size: 0.8rem;
    word-break: break-all;
  }

  button.copy-id{
    cursor: pointer;
    border: 1px solid rgba(43,38,32,0.25);
    background: transparent;
    color: var(--ink-dark-soft);
  }

  button.copy-id:hover{
    border-color: var(--ink-blue);
    color: var(--ink-blue);
  }

  button.copy-id.copied{
    border-color: var(--ink-red);
    color: var(--ink-red);
  }

  button.copy-id.copied::after{
    content: " \2713";
  }

  button.copy-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    line-height: 0;
    flex: none;
    border-radius: 3px;
  }

  /* ---- citation block (module pages) ---- */

  .citation-block{
    max-width: 640px;
    margin: 0 auto;
    padding: 1.6rem 0 0;
    border-top: 1px solid rgba(43,38,32,0.16);
  }

  .module-page .citation-block{ margin: 0; }

  .citation-heading{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-blue);
    text-align: center;
    margin: 0 0 1rem;
  }

  .module-page .citation-heading{ text-align: left; }

  .citation-controls{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
  }

  .module-page .citation-controls{ justify-content: flex-start; }

  .citation-style{
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: var(--ink-dark);
    background: rgba(255, 253, 246, 0.7);
    border: 1px solid rgba(43,38,32,0.25);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
  }

  button.citation-download{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--ink-dark-soft);
    background: transparent;
    border: 1px solid rgba(43,38,32,0.25);
    border-radius: 3px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
  }

  button.citation-download:hover{
    border-color: var(--ink-blue);
    color: var(--ink-blue);
  }

  .citation-text{
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-dark-soft);
    background: rgba(255, 253, 246, 0.7);
    border: 1px solid rgba(43,38,32,0.16);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }