@layer foundation, notebook, pathways, evidence, smallscreens;

@layer foundation {
  :root {
    color-scheme: light;
    --ink: #233e52;
    --blue: #315e79;
    --link: #244f72;
    --sky: #e9f2f8;
    --pale: #f4f8fb;
    --gold: #e5d38c;
    --gold-pale: #f7efcc;
    --white: #ffffff;
    --line: #b8cbd8;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 20px;
    color: var(--ink);
    background: var(--white);
  }
  * { box-sizing: border-box; }
  body { margin: 0; line-height: 1.65; }
  h1, h2, h3, p, figure, dl, ol, ul { margin: 0; }
  h1, h2, h3 { line-height: 1.16; font-weight: 500; text-wrap: balance; }
  h1 { font-size: clamp(2.1rem, 4.9vw, 3.65rem); max-width: 18ch; }
  h2 { font-size: clamp(1.45rem, 2.55vw, 1.95rem); margin-block-end: 1rem; }
  h3 { font-size: 1.2rem; margin-block: 1.1rem .8rem; }
  p + p { margin-block-start: .85rem; }
  a { color: var(--link); text-decoration-thickness: .06em; text-underline-offset: .2em; }
  a:hover { text-decoration-thickness: .12em; }
  a, button, summary { -webkit-tap-highlight-color: #e5d38c; }
  a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: .25rem; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
  button, summary { font: inherit; color: inherit; cursor: pointer; min-height: 48px; }
  button { background: var(--white); border: 2px solid var(--blue); border-radius: 1.4rem; padding: .5rem 1rem; }
  img { max-width: 100%; height: auto; }
  ul, ol { padding-inline-start: 1.25rem; }
  li + li { margin-block-start: .6rem; }
  dt { font-weight: 700; }
  dd { margin-inline: 0; }
  main:focus { outline: none; }
  [hidden] { display: none !important; }
}

@layer notebook {
  [data-role="skip-link"] { position: absolute; left: 1rem; top: -6rem; z-index: 10; background: var(--gold-pale); padding: .5rem 1rem; }
  [data-role="skip-link"]:focus { top: .5rem; }
  [data-role="masthead"] { max-width: 1260px; margin-inline: auto; padding: 1.2rem 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
  [data-role="notebook-mark"] { color: var(--ink); text-decoration: none; gap: .65rem; line-height: 1.25; padding-block: .35rem; font-size: 1.1rem; }
  [data-role="notebook-mark"] small { display: block; font-size: .8rem; margin-block-start: .25rem; }
  [data-role="mark-disc"] { display: block; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--gold); border: 8px solid var(--sky); }
  #reading { max-width: 1180px; margin-inline: auto; padding: 2.4rem 2.5rem 3rem; }
  [data-role="page-heading"] { max-width: 940px; margin-block-end: 2rem; }
  [data-role="running-title"] { font-size: .95rem; color: var(--blue); margin-block-end: .85rem; }
  [data-role="page-heading"] + p { max-width: 66ch; font-size: 1.1rem; }
  [data-role="takeaway"] { max-width: 830px; padding: 1.45rem 2rem 1.6rem 2.3rem; background: var(--sky); border-radius: 3.2rem 1.3rem 1.3rem 1.3rem; margin-block: 2.2rem; }
  [data-role="takeaway"] > p:last-child { font-size: 1.1rem; line-height: 1.5; max-width: 61ch; }
  [data-role="takeaway-label"] { color: var(--blue); font-size: .85rem; margin-block-end: .5rem; }
  [data-role="takeaway-label"] + p { margin-block-start: 0; }
  [data-role="depth"], [data-role="prepare"], [data-role="monitor-notes"], [data-role="price-record"], [data-role="trial-reading"] { max-width: 69ch; margin-block: 2.4rem; }
  [data-role="depth"] > p, [data-role="prepare"] > p, [data-role="trial-reading"] > p { max-width: 66ch; }
  [data-role="attribution"] { font-size: .85rem; margin-inline-start: .3rem; gap: .2rem; color: var(--blue); vertical-align: baseline; }
  [data-role="attribution"]::after { content: "↗"; font-size: .9em; }
  [data-role="record"] { font-size: .85rem; color: var(--blue); padding: .45rem 0; }
  [data-role="question-list"] { margin-block: .9rem 1.1rem; padding-inline-start: 1.4rem; }
  [data-role="question-list"] li::marker { color: var(--blue); }
  [data-role="text-link"] { font-size: .95rem; }
  [data-role="primary-link"] { border-radius: 2rem; background: var(--blue); color: var(--white); text-decoration: none; padding: .65rem 1.35rem; margin-block: .7rem; font-size: 1rem; }
  [data-role="name-notes"] > dt { margin-block: 1.3rem .3rem; font-size: 1.05rem; }
  [data-role="name-notes"] > dd { padding-inline-start: 1.3rem; border-inline-start: 5px solid var(--sky); }
  [data-role="monitor-list"] { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.3rem 1.1rem; }
  [data-role="monitor-list"] > dt { padding-block-start: .2rem; color: var(--blue); }
  [data-role="reader-choice"], [data-role="lookup-note"], [data-role="bridge-note"], [data-role="urgent-note"], [data-role="source-kinds"] { max-width: 860px; padding: 1.9rem 2.2rem; border-radius: 1.5rem 4rem 1.5rem 1.5rem; background: var(--gold-pale); margin-block: 2.5rem; }
  [data-role="reader-choice"] > p, [data-role="lookup-note"] > p, [data-role="bridge-note"] > p, [data-role="urgent-note"] > p { max-width: 64ch; }
  [data-role="source-kinds"] dl { max-width: 62ch; }
  [data-role="source-kinds"] dt:not(:first-child) { margin-block-start: 1.3rem; }
  [data-role="turn-page"] { border-block-start: 3px solid var(--line); margin-block-start: 2.7rem; padding-block-start: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.4rem; }
  [data-role="turn-page"] > span { font-size: .9rem; }
  [data-role="next-link"] { font-size: 1.15rem; }
  [data-role="colophon"] { background: var(--sky); padding: 2.3rem max(1.25rem, calc((100vw - 1080px) / 2)); font-size: .85rem; }
  [data-role="colophon"] > p { max-width: 66ch; }
  [data-role="colophon"] nav { display: flex; gap: .5rem 2rem; flex-wrap: wrap; margin-block-start: 1rem; }
  [data-role="colophon"] a { padding-block: .35rem; }
}

@layer pathways {
  [data-role="page-menu"] { position: relative; font-size: .9rem; }
  [data-role="page-menu"] > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.7rem; background: var(--sky); padding: .5rem 1rem; border-radius: 1.8rem; }
  [data-role="page-menu"] > summary::-webkit-details-marker { display: none; }
  [data-role="page-menu"][open] > summary { background: var(--gold-pale); }
  [data-role="menu-paper"] { position: absolute; right: 0; top: calc(100% + .8rem); width: 340px; max-width: calc(100vw - 2.5rem); background: var(--white); box-shadow: 0 14px 40px #233e522b; padding: .9rem; border: 3px solid var(--sky); border-radius: 1.3rem; z-index: 5; }
  [data-role="menu-group"] > summary { padding: .45rem .65rem; }
  [data-role="menu-group"] ul { list-style: none; padding: 0 0 .6rem 1rem; }
  [data-role="menu-group"] li + li { margin-block-start: .1rem; }
  [data-role="menu-group"] a { width: 100%; padding: .45rem .6rem; line-height: 1.35; border-radius: .7rem; }
  [data-role="menu-group"] a[aria-current="page"] { background: var(--sky); color: var(--ink); text-decoration: none; }
  [data-role="opening-pair"] { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  [data-role="opening-pair"] [data-role="takeaway"] { margin-block: 1.5rem; padding: 1.3rem 1.6rem 1.5rem; }
  [data-role="opening-pair"] > div > p { font-size: 1rem; max-width: 38ch; }
  [data-role="orbit-section"] { margin-block: 3rem; }
  [data-role="visit-orbit"] { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 1.7rem; }
  [data-role="visit-orbit"] > li { margin: 0; background: var(--pale); border-radius: 4.5rem 4.5rem 1.2rem 1.2rem; padding: 1.6rem 1.3rem; border-block-start: 12px solid var(--gold); }
  [data-role="visit-orbit"] > li:nth-child(even) { border-block-start-color: #9cbdce; margin-block-start: 1.3rem; }
  [data-role="orbit-link"] { line-height: 1.3; font-size: 1.08rem; }
  [data-role="visit-orbit"] p { font-size: .9rem; line-height: 1.5; margin-block-start: .6rem; }
  [data-role="illustration"] { min-width: 0; width: 100%; }
  [data-role="art-stage"] { width: 100%; aspect-ratio: 1; position: relative; isolation: isolate; border-radius: 50%; overflow: hidden; background: var(--pale); }
  [data-role="flux-art"] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
  [data-role="flux-art"][data-ready="yes"] { opacity: 1; background: var(--white); }
  [data-role="paper-art"] { position: absolute; inset: 0; }
  [data-piece] { position: absolute; display: block; }
  [data-piece="disc"] { width: 77%; height: 77%; left: 16%; top: 13%; border: 44px solid #bed4e1; border-radius: 50%; }
  [data-piece="sheet"] { width: 40%; height: 47%; top: 40%; left: 5%; background: var(--gold-pale); border: 9px solid var(--gold); border-radius: 1rem 1rem 1rem 2.6rem; transform: rotate(-12deg); }
  [data-piece="sheet"]::before { content: ""; position: absolute; inset: 13% 18%; border-block: 10px solid #cfbe7a; }
  [data-piece="screen"] { width: 48%; height: 34%; top: 17%; left: 40%; background: var(--white); border: 10px solid var(--blue); border-radius: 1.1rem; transform: rotate(9deg); }
  [data-piece="screen"]::after { content: ""; position: absolute; width: 48%; height: 13px; left: 25%; bottom: -29px; border-radius: 50%; background: var(--blue); }
  [data-piece="dot"] { width: 18%; height: 18%; left: 65%; top: 67%; border-radius: 50%; background: var(--gold); border: 12px solid var(--white); }
  [data-role="illustration"] figcaption { font-size: .85rem; line-height: 1.5; margin-block-start: 1rem; text-align: center; padding-inline: .8rem; }
  [data-role="conversation-pair"] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  [data-role="paperwork-pair"] { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 2.5rem; align-items: center; }
  [data-variant="talk-space"] [data-role="art-stage"] { border-radius: 7rem 2rem 7rem 2rem; aspect-ratio: 3 / 2; }
  [data-variant="talk-space"] [data-piece="disc"] { border-width: 28px; }
  [data-variant="paper-check"] [data-role="art-stage"] { aspect-ratio: 5 / 4; border-radius: 7rem 7rem 1rem 1rem; }
  [data-variant="paper-check"] [data-piece="screen"] { border-radius: 50%; height: 38%; width: 38%; left: 47%; top: 27%; border-width: 13px; }
  [data-variant="paper-check"] [data-piece="screen"]::after { bottom: -35%; left: 81%; width: 45%; height: 14px; transform: rotate(43deg); border-radius: 10px; }
  [data-role="result-pair"] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8rem; margin-block: 1.3rem; }
  [data-role="result-pair"] dt { font-weight: 500; color: var(--blue); padding: .7rem 1rem; background: var(--sky); border-radius: 1.5rem 1.5rem 0 0; }
  [data-role="result-pair"] dt:nth-of-type(2) { grid-column: 2; grid-row: 1; background: var(--gold-pale); }
  [data-role="result-pair"] dd { padding: .7rem 1rem 1rem; background: var(--pale); border-radius: 0 0 1rem 1rem; }
  [data-role="result-pair"] dd:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  [data-role="result-pair"] dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
}

@layer evidence {
  [data-role="evidence-open"] { margin-block: 1.1rem; padding: .5rem 1.2rem; border: 2px solid var(--blue); border-radius: 1.7rem; font-size: .9rem; }
  [data-role="source-notes"] { margin-block: 1rem 2rem; padding: 1.7rem 2rem; background: var(--pale); border-radius: 1.5rem; max-width: 69ch; }
  [data-role="source-notes"] h2 { font-size: 1.35rem; }
  [data-role="source-notes"] h3 { font-size: 1.1rem; }
  [data-role="source-notes"] p { font-size: .95rem; }
  [data-role="evidence-window"] { position: fixed; inset: 0 0 0 auto; width: min(590px, 100%); max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-inline-start: 12px solid var(--gold); padding: 1.4rem; background: var(--white); color: var(--ink); font: inherit; overflow-y: auto; }
  [data-role="evidence-window"]::backdrop { background: #233e5259; }
  [data-role="evidence-window"] [data-role="source-notes"] { padding: 1.5rem .4rem; background: var(--white); }
  [data-role="evidence-window"] button { margin-block-end: .8rem; }
  @media (prefers-reduced-motion: no-preference) {
    [data-role="evidence-window"][open] { animation: page-in .18s ease-out; }
    @keyframes page-in { from { transform: translateX(35px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
  }
}

@layer smallscreens {
  @media (max-width: 900px) {
    [data-role="visit-orbit"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-role="opening-pair"] { gap: 1.2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
    [data-role="conversation-pair"], [data-role="paperwork-pair"] { gap: 1.5rem; }
    [data-piece="disc"] { border-width: 30px; }
  }
  @media (max-width: 650px) {
    :root { font-size: 18px; }
    [data-role="masthead"] { padding: 1rem 1.2rem; flex-wrap: wrap; align-items: flex-start; gap: .8rem; }
    [data-role="notebook-mark"] { font-size: 1.05rem; }
    [data-role="notebook-mark"] small { font-size: .9rem; }
    [data-role="masthead"] nav { width: 100%; }
    [data-role="page-menu"] > summary { width: 100%; font-size: 1rem; }
    [data-role="menu-paper"] { width: 100%; max-width: 100%; position: relative; top: .6rem; margin-block-end: .6rem; box-shadow: none; }
    [data-role="menu-group"] { font-size: 1rem; }
    #reading { padding: 1.65rem 1.2rem 2rem; }
    h1 { font-size: 2.35rem; max-width: 18ch; }
    h2 { font-size: 1.65rem; }
    [data-role="page-heading"] { margin-block-end: 1.4rem; }
    [data-role="running-title"] { font-size: 1rem; }
    [data-role="opening-pair"], [data-role="conversation-pair"], [data-role="paperwork-pair"] { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    [data-role="opening-pair"] [data-role="illustration"] { max-width: 310px; margin: .5rem auto 0; }
    [data-role="conversation-pair"] [data-role="illustration"] { max-width: 350px; margin-inline: auto; }
    [data-role="paperwork-pair"] [data-role="illustration"] { max-width: 290px; margin-inline: auto; }
    [data-role="takeaway"] { padding: 1.35rem 1.2rem 1.4rem 1.6rem; margin-block: 1.7rem; border-radius: 2.5rem 1rem 1rem 1rem; }
    [data-role="takeaway"] > p:last-child { font-size: 1.15rem; }
    [data-role="takeaway-label"], [data-role="record"], [data-role="attribution"], [data-role="illustration"] figcaption { font-size: .95rem; }
    [data-role="depth"], [data-role="prepare"], [data-role="monitor-notes"], [data-role="price-record"] { margin-block: 1.8rem; }
    [data-role="reader-choice"], [data-role="lookup-note"], [data-role="bridge-note"], [data-role="urgent-note"], [data-role="source-kinds"] { padding: 1.5rem 1.2rem; border-radius: 1.2rem 3rem 1.2rem 1.2rem; }
    [data-role="monitor-list"] { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    [data-role="monitor-list"] dd { margin-block-end: .9rem; }
    [data-role="visit-orbit"] { gap: .8rem; }
    [data-role="visit-orbit"] > li { padding: 1.25rem 1rem; border-radius: 2.3rem 2.3rem 1rem 1rem; }
    [data-role="orbit-link"] { font-size: 1.15rem; }
    [data-role="visit-orbit"] p { font-size: 1rem; }
    [data-role="source-notes"] { padding: 1.3rem 1.1rem; }
    [data-role="source-notes"] p { font-size: 1rem; }
    [data-role="colophon"] { font-size: 1rem; padding: 1.8rem 1.2rem; }
    [data-role="colophon"] nav { display: grid; gap: .3rem; }
    [data-role="result-pair"] { column-gap: .7rem; }
    [data-role="result-pair"] dt, [data-role="result-pair"] dd { padding-inline: .75rem; font-size: 1rem; }
    [data-role="evidence-open"] { font-size: 1rem; }
  }
  @media print {
    [data-role="masthead"] nav, [data-role="evidence-open"], [data-role="skip-link"], [data-role="colophon"] nav { display: none; }
    #reading { padding: 1rem; }
    [data-role="takeaway"], section, aside { break-inside: avoid; }
    a { min-height: 0; padding: 0; display: inline; }
  }
}