@layer reset, paper, reading, pieces, small-screen, access;

@font-face {
  font-family: "Liberation Sans Narrow";
  src: url("/assets/bulletin-narrow.8e5eb5090ef4.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-padding-top: 1.5rem; }
  body, figure, dl, dd { margin: 0; }
  button, select { font: inherit; }
  a { color: inherit; text-underline-offset: .18em; }
  button, select, a { -webkit-tap-highlight-color: #cddace; }
  [hidden] { display: none !important; }
}

@layer paper {
  :root {
    --newsprint: #e7e5dc;
    --card: #f7f6f0;
    --ink: #20241f;
    --muted: #50564d;
    --fern: #2e6948;
    --leaf-paper: #d9e3d5;
    --rule: #bcc3b6;
    --lift: 3px 5px 0 #d1d2c6, 0 7px 16px #34392d0b;
  }
  body {
    background: var(--newsprint);
    color: var(--ink);
    font-family: Georgia, "Palatino Linotype", Palatino, serif;
    font-size: 1.1875rem;
    line-height: 1.58;
    padding: 0 clamp(1.125rem, 4vw, 4.5rem);
  }
  body > header, #guide-layout, #closing { max-width: 73.5rem; margin-inline: auto; }
  h1, h2, h3, dt, th, button, #masthead, nav {
    font-family: "Liberation Sans Narrow", "Arial Narrow", sans-serif;
    font-weight: 700;
  }
  h1, h2, h3 { line-height: 1.03; text-wrap: balance; }
  h1 { font-size: clamp(3.5rem, 6.25vw, 6.1rem); letter-spacing: -.025em; margin: .3em 0 .27em; max-width: 10.5ch; }
  h2 { font-size: clamp(2.6rem, 4vw, 3.7rem); letter-spacing: -.015em; margin: .2em 0 .55em; }
  h3 { font-size: 1.8rem; margin: 0 0 .65em; }
  p { max-width: 68ch; margin: 0 0 1.1em; }
  code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1rem; color: var(--fern); }
  p:has(> code:only-child) { margin-bottom: .65rem; }
  figcaption { color: var(--muted); font-size: 1rem; line-height: 1.5; padding-top: 1rem; max-width: 68ch; }
  a { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; min-width: 44px; }
  a > span[aria-hidden] { margin-left: auto; text-decoration: none; flex-shrink: 0; }
  a:hover { color: var(--fern); text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--fern); outline-offset: 5px; border-radius: 4px; }
  main section:focus { outline: none; }
  main section:focus-visible { outline: 3px solid var(--fern); outline-offset: 8px; }
}

@layer reading {
  #masthead {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: none; padding: 1.25rem 0 1rem; margin: 0;
    border-bottom: 3px solid var(--ink); font-size: 1.75rem;
  }
  #masthead a { text-decoration: none; }
  #masthead span { font-family: Georgia, serif; font-size: 1rem; font-weight: 400; color: var(--muted); }
  #opening { display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; gap: clamp(2rem, 5.5vw, 6rem); align-items: center; padding: 3rem 0 4rem; }
  #opening > div > p:not(:has(code)) { max-width: 49ch; }
  #guide-label { font-weight: 700; }
  #opening-link { margin-top: .3rem; gap: 2rem; color: var(--fern); font-size: 1.125rem; font-weight: 700; }
  #guide-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  #reading-map { position: sticky; top: 1.25rem; padding-bottom: 2rem; }
  nav h2 { font-size: 2rem; margin: 0 0 1rem; }
  nav ol { list-style: none; margin: 0; padding: 0; }
  nav li + li { border-top: 1px solid var(--rule); }
  nav a { display: flex; width: 100%; font-size: 1.1875rem; line-height: 1.2; padding: .8rem 0; text-decoration: none; }
  #reading-map > p { color: var(--muted); font-size: 1rem; margin-top: 1.75rem; }
  main { min-width: 0; }
  main > section { padding-bottom: 4rem; scroll-margin-top: 1.5rem; }
  main > section + section { padding-top: 3rem; border-top: 2px solid var(--rule); }
  main > section > p, main > section > aside > p { max-width: 66ch; }
  section:target > h2 { color: var(--fern); }
  #closing { border-top: 3px solid var(--ink); padding: 2rem 0 2.5rem; display: flex; align-items: start; gap: 3rem; justify-content: space-between; font-size: 1rem; }
  #closing p { max-width: 57ch; margin-bottom: 0; }
  #closing a { flex-shrink: 0; }
}

@layer pieces {
  #question-slip {
    border-radius: 6px; background: var(--card); padding: 1.6rem 1.7rem;
    box-shadow: var(--lift); position: relative; margin-top: 1.5rem;
  }
  #question-slip::before {
    content: ""; position: absolute; width: 6.7rem; height: .85rem; left: 0; top: -.85rem;
    border-radius: 6px 6px 0 0; background: var(--fern);
  }
  #question-slip > p { margin-bottom: 1.4rem; }
  #question-slip dt { font-size: 1.75rem; line-height: 1.1; margin-top: 1.2rem; }
  #question-slip dt:first-child { margin-top: 0; }
  #question-slip dd { font-size: 1.125rem; margin-top: .2rem; }
  #question-slip figcaption { border-top: 1px solid var(--rule); margin-top: 1.5rem; }
  #offer-comparison { margin: 2rem 0 2.5rem; }
  #offer-comparison > div { display: grid; gap: 1.1rem; }
  #offer-comparison article { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem; background: var(--card); box-shadow: var(--lift); border-radius: 6px; padding: 1.6rem; }
  #offer-comparison article h3 { font-size: 1.9rem; margin: 0; }
  #offer-comparison article p { font-size: 1.0625rem; line-height: 1.6; }
  #offer-comparison article p:last-child { margin-bottom: 0; }
  #offer-comparison article footer { font-size: 1rem; }
  #offer-comparison article a { width: 100%; color: var(--fern); }
  main section > aside { padding: 1.65rem; border-radius: 6px; background: var(--leaf-paper); margin: 2rem 0; }
  main section > aside h3 { max-width: 31ch; }
  main section > aside p { font-size: 1.125rem; }
  main section > aside a { font-size: 1rem; }
  main section > aside p:last-child { margin-bottom: 0; }
  #sport-comparison { margin: 2rem 0; }
  table { width: 100%; border-collapse: collapse; text-align: left; font-size: 1.0625rem; }
  caption { text-align: left; font-size: 1rem; font-style: italic; padding-bottom: 1rem; color: var(--muted); }
  thead { background: var(--fern); color: var(--card); }
  th { font-size: 1.25rem; line-height: 1.2; }
  th:first-child { width: 29%; }
  thead th:first-child { border-radius: 6px 0 0 0; }
  thead th:last-child { border-radius: 0 6px 0 0; }
  th, td { padding: 1rem; vertical-align: top; }
  tbody tr { border-bottom: 1px solid var(--rule); }
  tbody tr:nth-child(odd) { background: #f7f6f080; }
  td p { margin-bottom: .7rem; }
  td p:last-child { margin-bottom: 0; }
  #visit-comparison { margin: 2rem 0; }
  #visit-comparison dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  #visit-comparison dl > div { background: var(--card); border-radius: 6px; padding: 1.5rem; box-shadow: var(--lift); }
  #visit-comparison dt { font-size: 1.65rem; line-height: 1.15; margin-bottom: .8rem; }
  #visit-comparison dd { font-size: 1.125rem; }
  #question-path { margin: 2.5rem 0 0; }
  #question-path ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; }
  #question-path li { position: relative; padding: 1.25rem; background: var(--card); border-radius: 6px; box-shadow: var(--lift); }
  #question-path li:not(:last-child)::after { content: "→"; position: absolute; right: -.85rem; top: 1rem; z-index: 1; color: var(--fern); font: 1.5rem Georgia, serif; }
  #question-path strong { display: block; font-size: 1.0625rem; line-height: 1.4; }
  #question-path li span { display: block; font-size: 1rem; line-height: 1.4; margin-top: .75rem; }
  #bill-questions > div, #pause-questions > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
  #bill-questions, #pause-questions { margin: 1.5rem 0 2rem; }
  #bill-questions dt, #pause-questions dt { font-size: 1.65rem; line-height: 1.2; }
  #bill-questions dd, #pause-questions dd { font-size: 1.125rem; }
  #pause-questions dd p:last-child { margin-bottom: 0; }
  #source-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 2.5rem 0 2rem; }
  #source-cards article { background: var(--card); border-radius: 6px; padding: 1.5rem; box-shadow: var(--lift); position: relative; display: flex; flex-direction: column; }
  #source-cards article::before { content: ""; position: absolute; width: 4rem; height: .55rem; background: var(--fern); top: -.55rem; left: 0; border-radius: 5px 5px 0 0; }
  #source-cards h3 { font-size: 1.65rem; }
  #source-cards p { font-size: 1.0625rem; }
  #source-cards a { margin-top: auto; color: var(--fern); font-size: 1rem; }
  #return-map { font-size: 1.125rem; font-weight: 700; width: 100%; }
  #jump-menu { margin-top: 2rem; font-family: system-ui, sans-serif; font-size: 1rem; }
  #jump-menu label { display: block; margin-bottom: .6rem; }
  #jump-menu > div { display: flex; gap: .5rem; }
  select { appearance: auto; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--fern); border-radius: 6px; background: var(--card); color: var(--ink); padding: .4rem; font-size: 1rem; }
  button { min-width: 48px; min-height: 48px; padding: .4rem .6rem; border: 0; border-radius: 6px; color: var(--card); background: var(--fern); cursor: pointer; font-size: 1.125rem; }
  button:hover { background: #245539; }
  #missing-page { max-width: 42rem; margin: 4rem auto 6rem; }
  #missing-page h1 { max-width: 17ch; }
  #missing-page > a { color: var(--fern); }
}

@layer small-screen {
  @media (max-width: 1050px) {
    #opening { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem; }
    #guide-layout { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; }
    #offer-comparison article { grid-template-columns: 1fr; gap: 1rem; }
    #offer-comparison article h3 { max-width: none; }
    #closing { flex-direction: column; gap: .6rem; }
  }
  @media (max-width: 760px) {
    h1 { font-size: clamp(3.5rem, 12.9vw, 5.5rem); max-width: 11ch; }
    h2 { font-size: 2.8rem; }
    body { font-size: 1.125rem; }
    #masthead { align-items: start; padding-top: .8rem; font-size: 1.55rem; gap: .5rem; }
    #masthead span { font-size: 1rem; max-width: 8ch; line-height: 1.3; padding-top: .4rem; }
    #opening { grid-template-columns: 1fr; padding: 2rem 0 3.25rem; gap: 2.5rem; }
    #opening-link { width: 100%; }
    #question-slip { margin: .7rem 3px 0 0; padding: 1.4rem; }
    #question-slip dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
    #question-slip dt { font-size: 1.5rem; margin: 0; }
    #question-slip dd { margin: 0; font-size: 1.0625rem; }
    #question-slip figcaption { margin-top: 1rem; }
    #guide-layout { display: block; }
    #reading-map { position: static; margin-bottom: 2.75rem; padding: 1.5rem; background: var(--leaf-paper); border-radius: 6px; }
    nav ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
    nav li + li { border-top: 0; }
    nav a { min-height: 52px; padding: .65rem 0; font-size: 1.125rem; }
    #jump-menu { margin-top: 1.25rem; }
    #reading-map > p { margin: 1.25rem 0 0; }
    main > section { padding-bottom: 2.5rem; }
    main > section + section { padding-top: 2.25rem; }
    main section > aside { padding: 1.35rem; }
    #offer-comparison article { padding: 1.35rem; margin-right: 3px; }
    #visit-comparison dl, #source-cards { grid-template-columns: 1fr; }
    #visit-comparison dl > div, #source-cards article { margin-right: 3px; }
    #bill-questions > div, #pause-questions > div { grid-template-columns: 1fr; gap: .6rem; }
    #question-path ol { grid-template-columns: 1fr; gap: 1.5rem; }
    #question-path li { padding: 1.2rem; margin-right: 3px; }
    #question-path li span { margin-top: .3rem; }
    #question-path li:not(:last-child)::after { content: "↓"; top: auto; bottom: -1.4rem; left: 1.2rem; right: auto; }
    th, td { padding: .8rem .65rem; overflow-wrap: anywhere; }
    th:first-child { width: 30%; }
    th { font-size: 1.125rem; }
    table { font-size: 1.0625rem; }
    #source-cards { row-gap: 1.8rem; }
    #closing { padding-top: 1.5rem; }
  }
}

@layer access {
  #skip-reading { position: absolute; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--card); z-index: 10; border-radius: 6px; font-size: 1rem; }
  #skip-reading:focus { top: 1rem; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  }
  @media print {
    body { background: white; color: black; padding: 0; font-size: 12pt; }
    #reading-map, #skip-reading, #opening-link, #return-map, #closing > a { display: none; }
    #opening, #guide-layout { display: block; }
    h1 { font-size: 42pt; max-width: 16ch; }
    h2 { font-size: 26pt; }
    #question-slip { margin-bottom: 2rem; }
    a { min-height: 0; }
    article, aside, tr { break-inside: avoid; }
    #question-slip, #offer-comparison article, #source-cards article, #visit-comparison dl > div, #question-path li { box-shadow: none; }
  }
}