@layer reset, book, frame, comparisons, marginalia, notebook, smallscreens;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-padding-block-start: 1.5rem; }
  body, h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  button, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}

@layer book {
  :root {
    --paper: #f7f3e9;
    --ink: #292e23;
    --moss: #4e5a31;
    --olive-light: #e6e8d8;
    --clay: #bf967e;
    --clay-light: #e7d7c9;
    --quiet: #55594a;
    --line: #acae95;
    font-family: "Lora", Georgia, serif;
    font-synthesis: none;
    font-size: 18px;
  }
  body { background: var(--paper); color: var(--ink); line-height: 1.65; }
  h1, h2, h3 { font-weight: 500; line-height: 1.19; text-wrap: balance; }
  h1 { font-size: clamp(2.25rem, 4.35vw, 3.65rem); letter-spacing: -.035em; max-width: 18ch; }
  h2 { font-size: clamp(1.55rem, 2.55vw, 2.15rem); letter-spacing: -.02em; margin-block-end: 1.1rem; }
  h3 { font-size: 1.25rem; margin-block: 1.75rem .65rem; font-weight: 600; }
  p, li, dd { overflow-wrap: break-word; }
  p + p, p + ul, ul + p, dl + p, details + p { margin-block-start: 1rem; }
  p, ul, dl { max-width: 66ch; }
  ul { padding-inline-start: 1.3rem; }
  li + li { margin-block-start: .6rem; }
  strong { font-weight: 650; }
  a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: .22em; display: inline-block; min-width: 44px; min-height: 44px; padding-block: .35rem; max-width: 100%; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible, button:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid var(--moss); outline-offset: 5px; }
  a:visited { color: #625037; }
  dt { font-weight: 600; }
  dd { margin-inline-start: 0; margin-block-start: .35rem; color: var(--quiet); }
  dl > div { padding-block: 1.1rem; border-block-end: 1px solid var(--line); }
  dl > div:first-child { padding-block-start: 0; }
  ::selection { background: #d6dac0; color: #20251a; }
}

@layer frame {
  body > header, main, body > footer { width: min(1200px, calc(100% - 6rem)); margin-inline: auto; }
  body > header { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.3rem 1.5rem; border-block-end: 2px solid var(--moss); }
  body > header > a:first-child { font-size: 1.4rem; font-weight: 600; text-decoration: none; line-height: 1.3; color: var(--ink); }
  body > header span { display: block; font-size: .9rem; font-weight: 400; margin-block-start: .45rem; }
  body > header > a:last-child { font-size: .95rem; }
  main > header { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: center; column-gap: 4rem; padding-block: 4rem 3.6rem; }
  main > header:not(:has(figure)) { grid-template-columns: minmax(0, 1fr) 220px; padding-block-end: 2.8rem; }
  [data-kicker] { color: var(--moss); margin-block-end: 1.4rem; font-weight: 600; font-size: 1rem; }
  [data-lead] { font-size: 1.13rem; line-height: 1.6; margin-block-start: 1.65rem; max-width: 52ch; }
  main > section { margin-block-end: 3rem; }
  [data-reading] { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 5rem; align-items: start; padding-block: 1.5rem 2rem; }
  [data-reading] > div { max-width: 72ch; min-width: 0; }
  [data-reading="brief"] > div { border-inline-start: 5px solid var(--moss); padding-inline-start: 1.75rem; }
  [data-reading="depth"] { padding-block-start: 2.5rem; border-block-start: 1px solid var(--line); }
  main > nav { background: var(--olive-light); padding: 1.8rem 2rem; margin-block: 1rem 4rem; }
  main > nav p { font-size: 1rem; color: var(--quiet); }
  main > nav a { font-size: 1.18rem; font-weight: 600; }
  body > footer { border-block-start: 2px solid var(--moss); padding-block: 3rem 2rem; }
  footer nav h2 { font-size: 1.8rem; margin-block-end: 1.5rem; }
  footer nav > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  footer nav h3 { font-size: 1rem; margin: 0 0 .75rem; font-weight: 600; }
  footer nav ul { list-style: none; padding: 0; }
  footer nav li { margin: 0; }
  footer nav a { font-size: .95rem; line-height: 1.4; padding-block: .65rem; width: 100%; }
  footer > p { margin-block: 2.5rem 1rem; max-width: 76ch; font-size: .95rem; color: var(--quiet); }
  footer > a { font-size: .95rem; }
  [data-skip] { position: absolute; top: -10rem; left: 1rem; background: var(--paper); padding: .7rem 1rem; z-index: 10; }
  [data-skip]:focus { top: .5rem; }
}

@layer comparisons {
  [data-route-spread] { padding: 2rem 0; }
  [data-route-spread] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-block-start: 2rem; }
  [data-route-spread] article { padding: 1.8rem; background: var(--olive-light); min-width: 0; }
  [data-route-spread] article:nth-child(2) { background: var(--clay-light); }
  [data-route-spread] article:nth-child(3) { background: #eae8df; }
  [data-route-spread] h3 { margin-block-start: 0; font-size: 1.65rem; }
  [data-route-spread] a { margin-block-start: 1.2rem; }
  [data-comparison] { padding-block: 1.7rem 3rem; }
  table { width: 100%; border-collapse: collapse; margin-block: 1.3rem 0; font-size: 1rem; }
  caption { text-align: left; color: var(--quiet); margin-block-end: 1.1rem; max-width: 65ch; }
  th, td { text-align: left; vertical-align: top; border-block-end: 1px solid var(--line); padding: 1.2rem 1.1rem; }
  th { font-weight: 600; }
  thead { background: var(--olive-light); }
  tbody th { width: 24%; padding-inline-start: .65rem; }
  tbody tr:nth-child(even) { background: #eeece0; }
  details { border-block-end: 1px solid var(--line); padding-block: .8rem 1.3rem; }
  details:first-of-type { border-block-start: 1px solid var(--line); }
  summary { min-height: 44px; cursor: pointer; font-size: 1.15rem; font-weight: 600; padding-block: .6rem; line-height: 1.5; }
  details p { margin-block-start: .7rem; }
}

@layer marginalia {
  aside { font-size: 1rem; line-height: 1.55; color: var(--quiet); padding-block-start: .4rem; }
  aside::before { content: ""; display: block; height: 5px; width: 38px; background: var(--clay); margin-block-end: 1rem; }
  [data-study] { max-width: 350px; width: 100%; }
  [data-study] > div { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; background: var(--clay-light); border-radius: 50%; isolation: isolate; }
  [data-study] span { position: absolute; display: block; }
  [data-study] span:nth-child(1) { width: 74%; height: 74%; border: 31px solid var(--paper); border-radius: 50%; top: 14%; left: -15%; }
  [data-study] span:nth-child(2) { width: 48%; height: 48%; border-radius: 50%; background: var(--moss); top: 7%; right: -3%; }
  [data-study] span:nth-child(3) { width: 56%; height: 28%; border-radius: 150px 150px 0 0; background: var(--clay); bottom: 0; right: 5%; }
  [data-study] span:nth-child(4) { width: 26%; height: 26%; background: #a8af84; bottom: 25%; right: 19%; border-radius: 50%; }
  [data-study="layers"] > div { border-radius: 45% 45% 8% 8%; background: var(--olive-light); }
  [data-study="layers"] span:nth-child(1) { border-color: var(--moss); width: 100%; height: 100%; left: 8%; top: 22%; }
  [data-study="layers"] span:nth-child(2) { background: var(--clay); width: 63%; height: 63%; right: 24%; top: -15%; }
  [data-study="layers"] span:nth-child(3) { background: var(--paper); right: 6%; bottom: -1%; }
  [data-study="layers"] span:nth-child(4) { display: none; }
  [data-study="balance"] > div { background: #e9e6d7; }
  [data-study="balance"] span:nth-child(1) { top: 44%; left: 12%; width: 76%; height: 76%; }
  [data-study="balance"] span:nth-child(2) { top: 16%; right: 11%; width: 35%; height: 35%; }
  [data-study="balance"] span:nth-child(3) { width: 27%; height: 27%; top: 23%; left: 12%; background: var(--clay); border-radius: 0; }
  [data-study="balance"] span:nth-child(4) { display: none; }
  figcaption { margin-block-start: 1.2rem; font-size: 1rem; line-height: 1.5; max-width: 32ch; color: var(--quiet); }
}

@layer notebook {
  label { display: block; font-weight: 600; margin-block: 1.5rem .6rem; }
  textarea { display: block; width: 100%; border: 2px solid var(--moss); border-radius: 0; padding: 1rem; background: #fffdf7; color: var(--ink); resize: vertical; line-height: 1.6; }
  button { min-height: 48px; border: 2px solid var(--moss); border-radius: 0; background: var(--moss); color: #fffdf7; padding: .65rem 1rem; cursor: pointer; }
  button:hover { background: #3b4625; border-color: #3b4625; }
  button + button { background: var(--paper); color: var(--moss); }
  button + button:hover { background: var(--olive-light); }
  [data-actions] { display: flex; gap: .75rem; flex-wrap: wrap; margin-block-start: 1rem; }
  #note-status { min-height: 3rem; color: var(--quiet); margin-block-start: 1rem; }
}

@layer smallscreens {
  @media (min-width: 1440px) { :root { font-size: 19px; } }
  @media (max-width: 1000px) {
    body > header, main, body > footer { width: calc(100% - 3rem); }
    main > header { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 2rem; }
    main > header:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
    [data-reading] { grid-template-columns: minmax(0, 1fr) 175px; column-gap: 2rem; }
    [data-route-spread] article { padding: 1.3rem; }
    footer nav > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    :root { font-size: 18px; }
    body > header, main, body > footer { width: calc(100% - 2rem); }
    body > header { display: block; padding-block: 1rem .7rem; }
    body > header > a:first-child { font-size: 1.3rem; }
    body > header > a:last-child { display: block; margin-block-start: .7rem; }
    body > header span { font-size: 1rem; margin-block-start: .3rem; }
    main > header, main > header:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem 2rem; row-gap: 2rem; }
    h1 { font-size: 2.4rem; max-width: 18ch; }
    [data-lead] { font-size: 1.08rem; }
    [data-kicker] { margin-block-end: 1rem; }
    [data-study] { max-width: 280px; margin-inline: auto; }
    [data-study] > div { aspect-ratio: 1.25; }
    figcaption { max-width: 35ch; }
    [data-reading] { display: block; padding-block: 1.3rem 1.5rem; }
    [data-reading="brief"] > div { padding-inline-start: 1rem; border-inline-start-width: 4px; }
    [data-reading="depth"] { padding-block-start: 2rem; }
    aside { margin-block-start: 1.6rem; padding-inline-start: 1.1rem; border-inline-start: 3px solid var(--clay); }
    aside::before { display: none; }
    main > section { margin-block-end: 1.75rem; }
    [data-route-spread] > div { grid-template-columns: minmax(0, 1fr); margin-block-start: 1.5rem; }
    [data-route-spread] article { padding: 1.5rem; }
    [data-route-spread] article p { max-width: 42ch; }
    [data-route-spread] a { margin-block-start: .8rem; }
    th, td { padding: .85rem .55rem; }
    [data-comparison] table { table-layout: fixed; }
    [data-comparison] th, [data-comparison] td { overflow-wrap: break-word; hyphens: auto; }
    [data-comparison] thead th:first-child, [data-comparison] tbody th { width: 25%; }
    main > nav { padding: 1.4rem; margin-block-end: 2.5rem; }
    footer nav > div { column-gap: 1.1rem; row-gap: 2rem; }
    footer nav h3 { font-size: 1rem; line-height: 1.45; }
    footer nav a, footer > p, footer > a { font-size: 1rem; }
    footer nav a { padding-block: .7rem; }
    body > footer { padding-block-start: 2rem; }
    [data-actions] { display: grid; grid-template-columns: minmax(0, 1fr); }
    [data-actions] button { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
  @media print {
    body > header, body > footer, main > nav, [data-skip], [data-actions] { display: none; }
    main { width: 100%; }
    main > header, [data-reading] { display: block; }
    [data-study] { display: none; }
    a { padding: 0; min-width: 0; min-height: 0; color: var(--ink); }
    section { break-inside: avoid; }
    aside { margin-block-start: 1rem; }
  }
}