@layer ground, furniture, reading, narrow, paper;

@layer ground {
  :root {
    color-scheme: light;
    --ink: #183f39;
    --muted: #43645c;
    --field: #087c70;
    --deep-field: #00695e;
    --wash: #dcefe9;
    --paper: #fcfcf6;
    --edge: #9ebdb3;
    --display: Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
    --text: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --utility: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-family: var(--text);
    font-size: 21px;
    line-height: 1.52;
    color: var(--ink);
    background: var(--paper);
  }
  * { box-sizing: border-box; }
  body { margin: 0; }
  h1, h2, h3, p, ul, figure { margin-block: 0; }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; text-wrap: pretty; }
  h1 { font-size: clamp(3rem, 5.4vw, 4.4rem); line-height: 1.04; max-width: 19ch; letter-spacing: -.025em; }
  h2 { font-size: clamp(1.65rem, 2.9vw, 2.25rem); line-height: 1.12; max-width: 28ch; }
  h3 { font-size: 1.45rem; line-height: 1.15; }
  p, li, dd, td { overflow-wrap: break-word; }
  p + p { margin-top: .85rem; }
  a { color: var(--deep-field); text-underline-offset: .19em; text-decoration-thickness: .07em; min-height: 44px; }
  a:hover { text-decoration-thickness: .13em; }
  a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #8b4300; outline-offset: 4px; }
  a, button, summary { -webkit-tap-highlight-color: #c3e8dc; }
  button, input { font: inherit; }
  button { cursor: pointer; }
  img { display: block; max-width: 100%; height: auto; font: 18px/1.5 var(--text); }
  ::selection { color: #073c33; background: #b9dfd0; }
  .wrap { width: min(100% - 5rem, 1240px); margin-inline: auto; }
  .ticket { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
  .action, .secondary { display: inline-flex; gap: .75rem; align-items: center; justify-content: space-between; min-height: 56px; padding: .65rem 1.1rem; border: 0; font-family: var(--utility); font-size: 17px; line-height: 1.35; text-align: left; text-decoration: none; }
  .action { background: var(--deep-field); color: white; }
  .secondary { color: var(--ink); background: var(--wash); }
  .action:hover { background: #00594f; }
  .action:focus-visible, .secondary:focus-visible { outline: 0; box-shadow: inset 0 0 0 4px #f5cd86; }
  .secondary:focus-visible { box-shadow: inset 0 0 0 4px var(--deep-field); }
}

@layer furniture {
  .skip-desk { position: fixed; left: 1rem; top: 0; z-index: 10; transform: translateY(-150%); background: white; padding: .6rem 1rem; }
  .skip-desk:focus { transform: translateY(0); }
  .masthead { background: var(--field); color: white; padding-block: .9rem .7rem; }
  .masthead :focus-visible { outline-color: white; }
  .masthead-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .desk-name { display: inline-flex; gap: .7rem; align-items: center; color: white; text-decoration: none; font-size: 26px; line-height: 1.1; }
  .name-initial { font: 58px/.9 var(--display); display: grid; place-items: center; color: var(--deep-field); background: var(--paper); width: 60px; height: 64px; clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); }
  .name-description { display: block; font: 16px/1.5 var(--utility); margin-top: 7px; }
  .route-shortcut { display: flex; gap: .7rem; align-items: center; color: white; font: 17px/1.35 var(--utility); }
  .chapter-switch { margin-top: .65rem; }
  .chapter-switch > summary { display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: 46px; cursor: pointer; font: 17px/1.4 var(--utility); list-style: none; }
  .chapter-switch > summary::-webkit-details-marker { display: none; }
  .chapter-switch > summary > span { font: 30px/1 var(--text); }
  .chapter-switch[open] > summary > span { transform: rotate(45deg); }
  .chapter-grid { display: grid; grid-template-columns: 1.35fr 1.2fr 1fr 1.2fr; gap: 1.4rem; }
  .chapter-switch .chapter-grid { padding-block: 1rem 1.2rem; }
  .chapter-group-name { font-size: 22px; line-height: 1.2; margin-bottom: .55rem; }
  .chapter-grid ul { list-style: none; padding: 0; }
  .chapter-grid li + li { margin-top: .1rem; }
  .chapter-grid a { display: flex; align-items: center; min-height: 46px; font: 17px/1.35 var(--utility); }
  .masthead .chapter-grid a { color: white; }
  [aria-current="page"] { text-decoration-thickness: .15em; }
  .chapter-heading { display: grid; grid-template-columns: 155px minmax(0, 1fr); align-items: start; gap: 1.7rem; padding-block: 2.7rem 2.2rem; }
  .chapter-initial { color: var(--field); font: 192px/.82 var(--display); user-select: none; }
  .desk-location { color: var(--muted); font: 17px/1.4 var(--utility); margin-bottom: .65rem; }
  .desk-reading { margin-left: calc(155px + 1.7rem); max-width: 950px; }
  .desk-neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 2px solid var(--edge); margin-block: 3rem 1rem; padding-top: .9rem; }
  .desk-neighbours .desk-link { max-width: none; font-size: 18px; }
  .desk-footer { padding-block: 1.4rem 2rem; border-top: 2px solid var(--edge); margin-top: 2rem; }
  .desk-footer p { font-size: 18px; max-width: 62ch; }
  .desk-footer nav { display: flex; flex-wrap: wrap; gap: .2rem 1.8rem; margin-top: .7rem; }
  .desk-footer a { display: inline-flex; align-items: center; font-size: 18px; min-height: 46px; }
}

@layer reading {
  .desk-reading > p, .desk-section > p, .desk-section > ul { max-width: 66ch; }
  .lead { font-size: 24px; line-height: 1.48; max-width: 55ch; margin-bottom: 2rem; }
  .desk-section { margin-top: 2.4rem; }
  .desk-section > h2 { margin-bottom: .8rem; }
  .question-list { list-style: none; padding: 0; margin-top: .8rem; }
  .question-list li { padding: .6rem 0 .6rem 1.3rem; position: relative; }
  .question-list li::before { content: "↗"; position: absolute; left: 0; color: var(--deep-field); }
  .conversation { background: var(--field); color: white; padding: 1.6rem 1.9rem 1.8rem; margin-block: 2.4rem; max-width: 880px; }
  .conversation h2 { font-size: 1.8rem; margin-bottom: .7rem; max-width: 30ch; }
  .conversation p { max-width: 59ch; }
  .desk-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: fit-content; max-width: 100%; min-height: 48px; padding-block: .35rem; margin-top: .45rem; }
  .note-jump { display: inline-flex; gap: .6rem; align-items: center; font: 17px/1.4 var(--utility); min-height: 46px; margin-top: .45rem; }
  .comparison { margin-block: 1.4rem; }
  table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 20px; line-height: 1.4; }
  caption { font-size: 18px; color: var(--muted); text-align: left; margin-bottom: .6rem; }
  thead th { font: 17px/1.4 var(--utility); color: white; background: var(--field); text-align: left; }
  th, td { padding: .9rem 1rem; vertical-align: top; border-bottom: 2px solid var(--paper); overflow-wrap: break-word; }
  tbody th { font-weight: 500; text-align: left; background: var(--wash); }
  td { background: #edf5ef; }
  .object-plate { margin-block: 2.4rem; background: var(--wash); }
  .object-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e6eee7; }
  figcaption { font-size: 18px; line-height: 1.4; padding: .8rem 1rem; }
  .footnote-desk { margin-top: 3rem; border-top: 2px solid var(--edge); padding-top: 1.2rem; }
  .footnote-desk h2 { font-size: 1.6rem; }
  .footnote-desk ul { list-style: none; margin-top: .7rem; padding: 0; }
  .footnote-desk li { display: grid; grid-template-columns: 38px 1fr; gap: .7rem; margin-top: .5rem; scroll-margin-top: 1rem; }
  .note-letter { color: var(--field); font: 38px/1.3 var(--display); }
  .footnote-desk a { font-size: 18px; display: flex; align-items: center; width: fit-content; min-height: 46px; }
  .footnote-desk p { color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 62ch; }
}

@layer narrow {
  @media (max-width: 900px) {
    .wrap { width: min(100% - 2.5rem, 1240px); }
    .chapter-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
    .chapter-heading { grid-template-columns: 90px minmax(0, 1fr); gap: 1rem; padding-block: 2rem; }
    .chapter-initial { font-size: 120px; }
    .desk-reading { margin-left: calc(90px + 1rem); }
    h1 { font-size: 3rem; }
    .conversation { padding: 1.4rem; }
  }
  @media (max-width: 600px) {
    :root { font-size: 20px; }
    .wrap { width: calc(100% - 2rem); }
    .masthead { padding-top: .85rem; }
    .masthead-line { align-items: flex-start; }
    .desk-name { font-size: 24px; }
    .name-initial { width: 47px; height: 53px; font-size: 47px; flex: 0 0 47px; }
    .name-description { font-size: 16px; max-width: 21ch; margin-top: .3rem; }
    .route-shortcut { display: none; }
    .chapter-switch { margin-top: .5rem; }
    .chapter-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .chapter-grid a { min-height: 48px; }
    .chapter-group-name { font-size: 24px; }
    .chapter-heading { display: block; padding-block: 1.8rem 1.5rem; position: relative; }
    .chapter-initial { display: block; font-size: 88px; line-height: .8; margin-bottom: .8rem; }
    h1 { font-size: clamp(2.25rem, 10.8vw, 3rem); max-width: 18ch; line-height: 1.07; letter-spacing: -.02em; }
    h2 { font-size: 1.7rem; }
    .desk-reading { margin-left: 0; }
    .lead { font-size: 23px; }
    .desk-section { margin-top: 2rem; }
    .conversation { margin-block: 2rem; padding: 1.3rem 1.2rem 1.45rem; }
    .conversation h2 { font-size: 1.6rem; }
    table { font-size: 18px; }
    th, td { padding: .75rem .6rem; }
    thead th { font-size: 16px; }
    .comparison table, .comparison tbody, .comparison tr, .comparison th, .comparison td { display: block; width: 100%; }
    .comparison caption { display: block; }
    .comparison thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .comparison tr { margin-bottom: .85rem; }
    .comparison tbody th { background: var(--field); color: white; font: 25px/1.15 var(--display); }
    .comparison td::before { content: attr(data-label); display: block; font: 16px/1.4 var(--utility); color: var(--muted); margin-bottom: .3rem; }
    .desk-neighbours { grid-template-columns: 1fr; gap: .5rem; margin-top: 2rem; }
    .desk-footer { margin-top: 1.5rem; }
    .desk-footer nav { display: grid; gap: .15rem; }
    .desk-footer a { width: fit-content; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}

@layer paper {
  @media print {
    :root { font-size: 12pt; color: black; background: white; }
    .masthead, .desk-footer, .desk-neighbours, .skip-desk, .object-plate, .worksheet-actions, .note-jump { display: none; }
    .wrap { width: 100%; }
    .desk-reading { margin: 0; max-width: none; }
    .chapter-heading { padding-block: 0 1rem; grid-template-columns: 70px 1fr; }
    .chapter-initial { font-size: 80px; }
    h1 { font-size: 30pt; }
    .conversation { background: white; color: black; border: 2px solid #555; clip-path: none; padding: 1rem; }
    th, td { color: black; background: white; border: 1px solid #999; }
    .quote-route, .quote-result, .desk-section { break-inside: avoid; }
    .ticket { clip-path: none; }
    a { color: black; }
  }
}