@layer reset, tokens, base, frame, checks, index, glossary, responsive, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
  button, input { font: inherit; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    --paper: #f6f3ec;
    --ink: #272620;
    --muted: #5b574e;
    --red: #993a2b;
    --line: #c6bfb1;
    --wash: #ebe5d8;
    --white: #fffdf7;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }
}

@layer base {
  html { font-size: 16px; scroll-padding-top: 1.5rem; }
  body {
    color: var(--ink);
    background: var(--paper);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  h1, h2, h3 { line-height: 1.18; text-wrap: balance; }
  h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); font-weight: 720; letter-spacing: -.045em; }
  h2 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.024em; }
  h3 { font-size: 1.125rem; font-weight: 650; }
  a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { text-decoration-thickness: 2px; }
  a, button, input { min-height: 44px; }
  a { display: inline-flex; align-items: center; padding-block: .55rem; min-width: 44px; }
  button { cursor: pointer; }
  :focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
  p, li, dd, dt { overflow-wrap: anywhere; }
  p { text-wrap: pretty; }
  ::selection { color: var(--white); background: var(--red); }
}

@layer frame {
  [class$="-mast"], [class$="-main"], [class$="-footer"] {
    width: min(100% - 5rem, 1184px);
    margin-inline: auto;
  }
  [class$="-mast"] {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.4;
  }
  [class$="-mark"] {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--paper);
    background: var(--red);
  }
  [class$="-guide-label"] { margin-left: auto; color: var(--muted); }
  [class$="-main"] { padding-block: 2rem 4.5rem; }
  [class$="-breadcrumb"] {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex-wrap: wrap;
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 2rem;
  }
  [class$="-breadcrumb"] a { color: var(--ink); }
  [class$="-intro"] { max-width: 850px; margin-bottom: 3.5rem; }
  [class$="-kicker"] {
    color: var(--red);
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: .025em;
    margin-bottom: 1rem;
  }
  [class$="-lead"] { max-width: 64ch; color: var(--muted); margin-top: 1.5rem; }
  [class$="-next"] {
    max-width: 850px;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--ink);
  }
  [class$="-next"] a {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1.3;
    max-width: 100%;
    padding-block: .75rem;
  }
  [class$="-next"] a span { flex: none; color: var(--red); }
  [class$="-footer"] {
    border-top: 1px solid var(--ink);
    padding-block: 2rem 2.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    font-size: 16px;
    line-height: 1.55;
  }
  [class$="-footer"] > p { max-width: 51ch; }
  [class$="-footer"] nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  [class$="-footer"] a { white-space: nowrap; font-family: var(--mono); }
  [class$="-skip"] {
    position: fixed;
    z-index: 5;
    inset: 1rem auto auto 1rem;
    padding: .75rem 1.25rem;
    border: 2px solid var(--ink);
    color: var(--ink);
    background: var(--white);
    transform: translateY(-200%);
  }
  [class$="-skip"]:focus { transform: translateY(0); }
}

@layer checks {
  [class$="-checklist"] { list-style: none; max-width: 850px; padding: 0; }
  [class$="-checklist"] > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: 2rem;
    border-top: 1px solid var(--line);
  }
  [class$="-checklist"] > li:first-child { border-top: 2px solid var(--ink); }
  [class$="-checkmark"] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--red);
    margin-top: .4rem;
    position: relative;
  }
  [class$="-checkmark"]::after {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    background: var(--red);
    top: 6px;
    left: 6px;
  }
  [class$="-checkbody"] { min-width: 0; max-width: 67ch; }
  [class$="-checkbody"] h2 { margin-bottom: 1rem; }
  [class$="-checkbody"] p + p { margin-top: .875rem; }
  [class$="-source"] {
    display: inline-flex;
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    margin-left: .25rem;
    gap: .4rem;
  }
  [class$="-source"]::before { content: "↗"; font-family: var(--body); }
  [class$="-note"] {
    max-width: 850px;
    padding: 1.5rem 2rem;
    background: var(--wash);
    border-left: 3px solid var(--red);
    margin-top: 1.5rem;
  }
  [class$="-note"] h2 { font: 20px/1.4 var(--mono); margin-bottom: .5rem; }
  [class$="-note"] p { max-width: 63ch; }
}

@layer index {
  .p-home-main { padding-top: 3.5rem; }
  .p-home-intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
  }
  .p-home-intro h1 { font-size: clamp(2.75rem, 5.4vw, 5rem); max-width: 13.5ch; }
  .p-home-lead { max-width: 43ch; font-size: 1.125rem; }
  .p-home-start {
    color: var(--white);
    background: var(--ink);
    text-decoration: none;
    padding: .9rem 1.125rem;
    margin-top: 1.5rem;
    gap: 1.5rem;
    font-size: 16px;
    min-height: 52px;
    border: 2px solid var(--ink);
  }
  .p-home-start:hover { background: var(--red); border-color: var(--red); }
  .p-home-geometry {
    aspect-ratio: 1;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .p-home-orbit {
    position: absolute;
    inset: 12% 9% 7% 12%;
    border: 1px solid var(--ink);
    border-radius: 50%;
    transform: rotate(-25deg) scaleY(.82);
  }
  .p-home-orbit::before, .p-home-orbit::after {
    content: "";
    position: absolute;
    inset: 16%;
    border: 1px solid var(--ink);
    border-radius: 50%;
  }
  .p-home-orbit::after { inset: 33%; background: var(--wash); }
  .p-home-joint {
    position: absolute;
    width: 37%;
    height: 37%;
    border-radius: 50%;
    inset: 6% auto auto 2%;
    background: var(--ink);
  }
  .p-home-joint::before {
    content: "";
    position: absolute;
    inset: 19%;
    border: 1px solid var(--paper);
    border-radius: 50%;
  }
  .p-home-block {
    position: absolute;
    width: 19%;
    height: 19%;
    inset: auto 8% 10% auto;
    background: var(--red);
    transform: rotate(-15deg);
  }
  .p-home-trail {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red);
    inset: 18% 17% auto auto;
    box-shadow: -22px 13px 0 -1px var(--red), -44px 26px 0 -1px var(--red), -66px 39px 0 -1px var(--red);
  }
  .p-home-checklist { margin-left: 4rem; max-width: 850px; }
  .p-home-index { margin-top: 4rem; border-top: 2px solid var(--ink); padding-top: 2rem; }
  .p-home-indexhead { display: flex; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
  .p-home-indexhead h2 { font-size: 2.5rem; }
  .p-home-indexgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
  .p-home-indexgroup h3 { font: 20px/1.4 var(--mono); color: var(--muted); margin-bottom: .875rem; }
  .p-home-indexgroup ul { list-style: none; padding: 0; }
  .p-home-indexgroup li { border-top: 1px solid var(--line); }
  .p-home-indexgroup li:last-child { border-bottom: 1px solid var(--line); }
  .p-home-indexgroup a {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 56px;
    padding: .8rem .5rem .8rem 0;
    color: var(--ink);
    font-size: 18px;
    text-decoration: none;
  }
  .p-home-indexgroup a span:last-child { color: var(--red); }
  .p-home-indexgroup a:hover { background: var(--wash); }
}

@layer glossary {
  .p-word-primer-filter { max-width: 850px; margin-bottom: 2rem; }
  .p-word-primer-filter label { display: block; font: 16px/1.5 var(--mono); margin-bottom: .75rem; }
  .p-word-primer-searchrow { display: flex; gap: .75rem; }
  .p-word-primer-searchrow input {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--muted);
    color: var(--ink);
    background: var(--white);
    padding: .8rem 1rem;
    border-radius: 0;
    font-size: 18px;
    min-height: 52px;
  }
  .p-word-primer-searchrow input::placeholder { color: var(--muted); opacity: 1; }
  .p-word-primer-searchrow button {
    flex: none;
    color: var(--white);
    background: var(--ink);
    border: 2px solid var(--ink);
    padding: .75rem 1rem;
    font-size: 16px;
    border-radius: 0;
    min-width: 76px;
    min-height: 52px;
  }
  .p-word-primer-filter [role="status"] { font-size: 16px; margin-top: .75rem; color: var(--muted); }
  .p-word-primer-terms { max-width: 850px; }
  .p-word-primer-term {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
  }
  .p-word-primer-term:first-child { border-top: 2px solid var(--ink); }
  .p-word-primer-term dt { font: 16px/1.6 var(--mono); font-weight: 600; }
  .p-word-primer-empty { font-size: 18px; padding-block: 1.5rem; }
}

@layer responsive {
  @media (min-width: 1250px) {
    body:not(.p-home-page) [class$="-intro"],
    body:not(.p-home-page) [class$="-checklist"],
    body:not(.p-home-page) [class$="-note"],
    body:not(.p-home-page) [class$="-next"],
    .p-word-primer-filter, .p-word-primer-terms, .p-word-primer-empty {
      margin-left: 8rem;
    }
  }
  @media (max-width: 800px) {
    [class$="-mast"], [class$="-main"], [class$="-footer"] { width: calc(100% - 3rem); }
    [class$="-mast"] { flex-wrap: wrap; padding-block: 1.25rem; gap: .5rem .75rem; }
    [class$="-guide-label"] { width: 100%; margin: .25rem 0 0; }
    [class$="-footer"] { flex-direction: column; gap: 1rem; }
    .p-home-intro { gap: 1.25rem; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    .p-home-checklist { margin-left: 0; }
    .p-home-indexgrid { gap: 2.5rem; }
    .p-home-indexhead { display: block; }
  }
  @media (max-width: 560px) {
    body { font-size: 18px; }
    [class$="-mast"], [class$="-main"], [class$="-footer"] { width: calc(100% - 2.5rem); }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.45rem; }
    [class$="-main"] { padding-top: 1.25rem; padding-bottom: 3rem; }
    [class$="-breadcrumb"] { gap: .75rem; margin-bottom: 1.5rem; }
    [class$="-intro"] { margin-bottom: 2.25rem; }
    [class$="-lead"] { margin-top: 1rem; }
    [class$="-checklist"] > li { grid-template-columns: 20px minmax(0, 1fr); gap: 1rem; padding-block: 1.5rem; }
    [class$="-checkmark"] { width: 16px; height: 16px; margin-top: .35rem; }
    [class$="-checkmark"]::after { top: 5px; left: 5px; width: 4px; height: 4px; }
    [class$="-source"] { margin-left: 0; }
    [class$="-next"] { margin-top: 2.5rem; }
    [class$="-next"] a { font-size: 1.25rem; }
    [class$="-note"] { padding: 1.25rem; }
    [class$="-footer"] { padding-bottom: 2rem; }
    [class$="-footer"] nav { width: 100%; gap: .5rem 1.25rem; }
    .p-home-intro { display: block; }
    .p-home-intro h1 { font-size: 2.75rem; max-width: 13ch; }
    .p-home-geometry { display: none; }
    .p-home-main { padding-top: 2rem; }
    .p-home-start { gap: 1rem; }
    .p-home-index { margin-top: 2.5rem; }
    .p-home-indexhead h2 { font-size: 2rem; }
    .p-home-indexgrid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .p-word-primer-term { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  }
  @media print {
    body { color: #000; background: #fff; font-size: 16px; }
    [class$="-mast"], [class$="-main"], [class$="-footer"] { width: 100%; }
    [class$="-skip"], [class$="-geometry"], .p-word-primer-filter, [class$="-next"] { display: none; }
    [class$="-checklist"] > li, .p-word-primer-term { break-inside: avoid; }
    body:not(.p-home-page) [class$="-intro"], body:not(.p-home-page) [class$="-checklist"],
    body:not(.p-home-page) [class$="-note"], .p-word-primer-terms { margin-left: 0; }
  }
}