/* Shared by the policy pages. The landing page keeps its own stylesheet
   inline — it is the page that has to paint fastest — but these two are
   long-form reading and share everything, so a file they can both cache
   beats two copies that drift apart. */

:root {
  --paper:      #FAF9F6;
  --surface:    #FFFEFB;
  --sunk:       #F4F1E8;
  --ink:        #221E16;
  --muted:      #6B6453;
  --hair:       #E7E2D6;
  --amber:      #A8730A;
  --amber-deep: #8A5D06;
  --amber-line: #E8D9B8;

  --display: Georgia, 'Times New Roman', 'Songti TC', serif;
  --sans: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', -apple-system,
          BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --spine: 44rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.spine { width: min(100% - 2.5rem, var(--spine)); margin-inline: auto; }

a { color: var(--amber-deep); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

/* ── Masthead ─────────────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--hair); background: var(--paper); }
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.8rem;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-size: 1.14rem; font-weight: 600;
  letter-spacing: -0.01em; text-decoration: none; color: var(--ink);
}
.brand b { color: var(--amber-deep); font-weight: 600; }
.brand .wordmark { white-space: nowrap; }
.back { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.back:hover { color: var(--amber-deep); }

/* ── Document ─────────────────────────────────────────────────────── */
main { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  margin: 0 0 0.6rem; text-wrap: balance;
}
.updated {
  margin: 0 0 2.4rem; color: var(--muted); font-size: 0.92rem;
  font-family: var(--mono);
}
h2 {
  font-family: var(--display); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 2.6rem 0 0.7rem; text-wrap: balance;
}
p, li { margin: 0 0 0.9rem; }
ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 600; }

.note {
  margin: 2.4rem 0 0; padding: 1rem 1.15rem; background: var(--sunk);
  border: 1px solid var(--hair); border-radius: 10px;
  font-size: 0.95rem; color: var(--muted);
}

table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.scroller { overflow-x: auto; }

footer {
  border-top: 1px solid var(--hair); padding-block: 1.8rem 2.6rem;
  font-size: 0.9rem; color: var(--muted);
}
.foot-base { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.foot-base a { color: var(--muted); text-decoration: none; }
.foot-base a:hover { color: var(--amber-deep); text-decoration: underline; }

/* ── Table of contents ────────────────────────────────────────────────
   These documents run to a dozen sections. Without a way in, the only
   navigation is the scrollbar. */
.toc {
  margin: 0 0 2.6rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.toc-name {
  margin: 0 0 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.35rem 1.6rem;
}
@media (min-width: 34rem) { .toc ol { grid-template-columns: 1fr 1fr; } }
.toc a { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.toc a:hover { color: var(--amber-deep); text-decoration: underline; }

/* An anchor beside each heading, so a specific clause can be linked to
   rather than described. Shown on hover and always to the keyboard. */
h2 { position: relative; scroll-margin-top: 1.5rem; }
.anchor {
  margin-left: 0.4rem; font-size: 0.8rem; color: var(--amber-line);
  text-decoration: none; opacity: 0;
  transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--amber-deep); }

.attribution {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hair);
  font-size: 0.88rem; color: var(--muted);
}

.foot-contact { font-size: 0.85rem; color: var(--muted); }