/* ==========================================================================
   Candor Bookkeeping — site stylesheet
   Brand: green #265406 on beige #E9DEC4. Lora for brand + prose,
   IBM Plex Sans for interface (nav, buttons, labels).
   ========================================================================== */

:root {
  /* Palette */
  --green:        #265406;
  --green-deep:   #1B3D04;
  --beige:        #E9DEC4;
  --beige-soft:   #F2EBD9;
  --paper:        #F5F1DE;
  --ink:          #1C1A15;
  --ink-muted:    #5F5A4A;
  --rule:         rgba(38, 84, 6, 0.20);
  --rule-soft:    rgba(38, 84, 6, 0.10);

  /* Type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

/* The header stays at the top of the window, so a jump to a heading stops below it. */
html { scroll-padding-top: 116px; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--beige);
  padding: 12px 20px;
  font-family: var(--sans);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------- structure -- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band { padding: 88px 0; }
.band--tight { padding: 56px 0; }
.band--paper { background: var(--paper); }
.band--soft  { background: var(--beige-soft); }
.band--green {
  background: var(--green);
  color: var(--beige);
  position: relative;
  overflow: hidden;
  min-height: 34vw;
  display: flex;
  align-items: center;
}
.band--green > .wrap { position: relative; z-index: 1; }
.band--green::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  aspect-ratio: 760 / 258;
  background: url("../img/logo-lockup-light.png") no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
}
.band--green a:not(.btn) { color: var(--beige); }

/* ---------------------------------------------------------------- type -- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--green);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 20px;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.35rem); }

p { margin: 0 0 20px; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.16rem; color: var(--ink); max-width: 62ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.band--green .eyebrow { color: rgba(233, 222, 196, 0.72); }
.band--green h2, .band--green h3 { color: var(--beige); }

.note {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* -------------------------------------------------------------- header -- */

.site-header {
  background: var(--beige);
  border-bottom: 1px solid var(--rule-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 100px;
}

.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 220px; transition: opacity 140ms ease; }
.logo:hover img { opacity: 0.72; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}

.nav a:not(.btn) {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--green);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { border-bottom-color: var(--rule); }
.nav a:not(.btn)[aria-current="page"] { font-weight: 600; border-bottom-color: var(--green); }

.nav-cta { margin-left: 34px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--green);
  font-family: var(--sans);
  font-size: 0.95rem;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--green);
  transition: background-color 140ms ease, color 140ms ease;
}

.btn--primary,
.nav .btn--primary,
.band--green .btn--primary { background: var(--green); color: var(--beige); }
.btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--beige); }

.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover { background: rgba(38, 84, 6, 0.08); color: var(--green); }

.btn--onGreen,
.band--green .btn--onGreen { background: var(--beige); color: var(--green); border-color: var(--beige); }
.btn--onGreen:hover { background: #fff; color: var(--green-deep); }

.btn--sm { padding: 12px 22px; font-size: 0.92rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding: 96px 0 104px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 64px;
  align-items: start;
}

.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 54ch; }

.shot {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(28, 26, 21, 0.13);
  overflow: hidden;
  position: relative;
}
.shot img { width: 100%; }
.shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(245, 241, 222, 0), var(--paper));
  pointer-events: none;
}
.shot-caption {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 12px;
  text-align: right;
}

/* --------------------------------------------------------------- cards -- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 32px 28px;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.98rem; margin-bottom: 16px; }
.card .card-link {
  font-family: var(--sans);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.card .card-link:hover { border-bottom-color: var(--green); }
.card { display: flex; flex-direction: column; }
.card .card-link { margin-top: auto; align-self: flex-start; }
.card h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.card h3 a:hover { border-bottom-color: var(--rule); }

/* Finding list — echoes the classifier's labelled-section device */
.findings { list-style: none; margin: 0; padding: 0; }
.findings li {
  padding: 24px 0;
  border-top: 1px solid var(--rule-soft);
  max-width: 72ch;
}
.findings li:last-child { border-bottom: 1px solid var(--rule-soft); }
.findings strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--green);
  margin-bottom: 6px;
}
.findings span { font-size: 0.98rem; color: var(--ink); }

/* Basis box — lifted from the tool's own "Basis for this classification" */
.basis {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green);
  border-radius: 3px;
  padding: 22px 26px;
  margin: 0 0 24px;
  max-width: 72ch;
}
.basis p { font-size: 0.98rem; }

/* ------------------------------------------------------------- article -- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 32px; margin-bottom: 10px; }
.prose ul { padding-left: 22px; max-width: 68ch; }
.prose li { margin-bottom: 10px; }

.prose blockquote.epigraph { margin: 0 0 36px; padding-left: 18px; border-left: 3px solid var(--rule); max-width: 58ch; }
.prose blockquote.epigraph p { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); margin-bottom: 6px; }
.prose blockquote.epigraph cite { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-muted); font-style: normal; }

.page-head { padding: 72px var(--gutter) 8px; }
.page-head h1 { max-width: 20ch; }

/* ---------------------------------------------------------------- form -- */

.form { max-width: 620px; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 15px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--green); }

.field-hint {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* -------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--green);
  color: rgba(233, 222, 196, 0.88);
  padding: 64px 0 40px;
  font-size: 0.95rem;
}
.site-footer a:not(.btn) { color: var(--beige); text-decoration: none; }
.site-footer a:not(.btn):hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(233, 222, 196, 0.22);
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(233, 222, 196, 0.6);
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid p { margin: 0; }
.footer-grid p + p { margin-top: 10px; }

.footer-mark { width: 62px; margin-bottom: 18px; }
.footer-mark img { width: 100%; }

.footer-legal {
  padding-top: 28px;
  font-size: 0.85rem;
  font-family: var(--sans);
  color: rgba(233, 222, 196, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
}
.footer-legal p { max-width: 66ch; margin: 0; }

/* --------------------------------------------------------- responsive -- */

@media (max-width: 980px) {
  .band--green::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-grid .shot { max-width: 460px; }
  .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 92px; }
  body { font-size: 17px; }
  .band { padding: 60px 0; }
  .hero { padding: 56px 0 64px; }
  .header-inner { min-height: 76px; }
  .logo img { width: 150px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--beige);
    border-bottom: 1px solid var(--rule);
    padding: 12px var(--gutter) 24px;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
  .nav-cta { margin: 16px 0 0; align-self: flex-start; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .band--green::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .shot-caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Glossary — index, entry pages, preview cards, pending flags
   ========================================================================== */

.gl-controls {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--rule-soft);
}
.gl-search {
  flex: 1 1 320px; font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 13px 15px;
}
.gl-search:focus { border-color: var(--green); }
.gl-count { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-muted); }
.gl-jump { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.gl-jump-link { font-family: var(--sans); font-size: 0.84rem; color: var(--green); text-decoration: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 13px; }
.gl-jump-link:hover, .gl-jump-link:focus-visible { border-color: var(--green); background: rgba(38, 84, 6, 0.06); outline: none; }

.gl-section { margin-bottom: 44px; }
.gl-section h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.45rem);
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.gl-entries { list-style: none; margin: 0; padding: 0; }
.gl-item { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); max-width: 74ch; }
.gl-item-term {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
  color: var(--green); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gl-item-term:hover { border-bottom-color: var(--rule); }
.gl-item-summary { display: block; font-size: 0.97rem; color: var(--ink); margin-top: 4px; }
.gl-empty { font-family: var(--sans); color: var(--ink-muted); padding: 24px 0; }

/* entry page */
.gl-entry-meta {
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink-muted);
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule-soft);
}
.gl-citation {
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink-muted);
  margin: 0 0 24px;
}
.gl-sources { list-style: none; margin: 0 0 8px; padding: 0; }
.gl-sources li { margin-bottom: 8px; font-size: 0.97rem; }
.gl-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 0; list-style: none; }
.gl-related a {
  font-family: var(--sans); font-size: 0.9rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 7px 16px;
}
.gl-related a:hover { background: rgba(38,84,6,0.07); }

/* pending flag */
.gl-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: #A3241B; color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1;
  text-decoration: none; vertical-align: 2px; margin-left: 7px;
  border: 0; cursor: help; flex: 0 0 auto;
}
.gl-flag:hover, .gl-flag:focus-visible { background: #7E1A14; color: #fff; }

/* preview card + flag tooltip share one surface */
.gl-card {
  position: absolute; z-index: 60; max-width: 340px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 14px 34px rgba(28,26,21,0.18);
  padding: 16px 18px; font-family: var(--serif); font-size: 0.95rem; line-height: 1.5;
  opacity: 0; visibility: hidden; transition: opacity 120ms ease;
}
.gl-card[data-open="true"] { opacity: 1; visibility: visible; }

/* The summary is an unclassed span and the “Read the full entry” link is
   inline-block immediately after it, with no space between — so the link sat
   flush against the closing period whenever the last line had room. */
.gl-card > span { display: block; }
.gl-card-term {
  font-weight: 600; color: var(--green); display: block; margin-bottom: 6px;
}
.gl-card-meta {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-muted);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.gl-card-go {
  font-family: var(--sans); font-size: 0.88rem; text-decoration: none;
  display: inline-block; margin-top: 10px;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.gl-card-close {
  position: absolute; top: 6px; right: 8px; background: none; border: 0;
  font-size: 18px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 4px;
}

/* inline glossary link */
a.gl-link { text-decoration: none; border-bottom: 1px dotted var(--rule); }
a.gl-link:hover { border-bottom-style: solid; }

/* verification page */
.gl-q { border-left: 4px solid var(--green); background: var(--paper);
        border: 1px solid var(--rule-soft); border-left: 4px solid var(--green);
        border-radius: 3px; padding: 22px 26px; margin: 0 0 20px; max-width: 74ch; }
.gl-q h3 { margin-bottom: 8px; }
.gl-q-meta { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 12px; }
.gl-none { font-family: var(--sans); color: var(--ink-muted); }

@media (max-width: 760px) {
  .gl-card { max-width: calc(100vw - 40px); }
}

/* second heading inside a footer column */
.footer-h4-spaced { margin-top: 26px !important; }

/* ------------------------------------------------ free resources menu -- */
/* Literal colours: the Classifier page carries its own header styles and does
   not load this sheet's variables, and the menu must look the same on both. */

.site-header .res { position: relative; margin-left: 6px; }
.site-header .res-btn { display: inline-flex; align-items: center; gap: 11px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.95rem; font-weight: 500; line-height: 1; color: #E9DEC4; background: #265406; border: 2px solid #265406; border-radius: 999px; padding: 12px 20px 12px 22px; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.site-header .res-btn:hover, .site-header .res.is-open .res-btn { background: #1B3D04; border-color: #1B3D04; }
.site-header .res-btn:focus-visible { outline: 2px solid #265406; outline-offset: 3px; }
.site-header .res-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease; }
.site-header .res.is-open .res-caret { transform: translateY(2px) rotate(-135deg); }

.site-header .res-panel { position: absolute; right: 0; top: calc(100% + 14px); width: 440px; background: #F5F1DE; border: 1px solid rgba(38, 84, 6, 0.20); border-radius: 12px; box-shadow: 0 22px 48px rgba(28, 26, 21, 0.16); padding: 16px 8px 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms; z-index: 60; }
.site-header .res-panel::before { content: ""; position: absolute; top: -7px; right: 40px; width: 12px; height: 12px; background: #F5F1DE; border-left: 1px solid rgba(38, 84, 6, 0.20); border-top: 1px solid rgba(38, 84, 6, 0.20); transform: rotate(45deg); }
.site-header .res-panel::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.site-header .res.is-open .res-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 150ms ease, transform 150ms ease; }

.site-header .res-head { margin: 0 14px 8px; font-family: 'Lora', Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.9rem; color: #5F5A4A; }
.site-header .res-foot { margin: 6px 14px 4px; padding-top: 10px; border-top: 1px solid rgba(38, 84, 6, 0.12); font-family: 'Lora', Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.9rem; color: #5F5A4A; }
.site-header .nav .res-foot a { font-family: inherit; font-size: inherit; font-weight: 400; color: #5F5A4A; padding: 0; text-decoration: none; border: 0; border-bottom: 1px solid rgba(38, 84, 6, 0.25); }
.site-header .nav .res-foot a:hover, .site-header .nav .res-foot a:focus-visible, .site-header .nav .res-foot a[aria-current="page"] { color: #265406; border-bottom-color: #265406; outline: none; }
.site-header .res-panel ul { list-style: none; margin: 0; padding: 0; }
.site-header .res-panel ul.res-pages { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(38, 84, 6, 0.12); }
.site-header .nav .res-item--page { display: flex; align-items: center; height: 36px; padding: 0 14px; }
.site-header .res-pages-row { display: flex; }
.site-header .nav .res-pages a.res-item--page { display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; min-width: 0; justify-content: center; padding: 0; border-radius: 0; }
.site-header .nav .res-pages a.res-item--page:first-child { border-radius: 8px 0 0 8px; }
.site-header .nav .res-pages a.res-item--page:last-child { border-radius: 0 8px 8px 0; }
.site-header .nav .res-pages a.res-item--page + a.res-item--page, .site-header .nav .res-pages a.res-item--page + a.res-item--page:hover, .site-header .nav .res-pages a.res-item--page + a.res-item--page:focus-visible { border-left: 1px solid rgba(38, 84, 6, 0.22); }
.site-header .nav .res-pages a.res-item--page[aria-current="page"] { box-shadow: inset 0 3px 0 #265406; }
.site-header .nav .res-panel .res-split a.res-item + a.res-item--free[aria-current="page"] { box-shadow: inset 3px 0 0 #265406; }
.site-header .res-foot { text-align: center; }
.site-header .nav .res-foot a { color: #265406; border-bottom-color: rgba(38, 84, 6, 0.35); }
.site-header .nav .res-item--free { position: relative; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.site-header .nav .res-item--free::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: linear-gradient(to bottom left, transparent 50%, rgba(38, 84, 6, 0.18) 50%); }
.site-header .res-btn--bars { height: 43px; padding: 0 18px; }
.site-header .res-bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: background-color 160ms ease; }
.site-header .res-bars::before, .site-header .res-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 160ms ease; }
.site-header .res-bars::before { top: -6px; }
.site-header .res-bars::after { top: 6px; }
.site-header .res.is-open .res-bars { background: transparent; }
.site-header .res.is-open .res-bars::before { transform: translateY(6px) rotate(45deg); }
.site-header .res.is-open .res-bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-header .nav .res-item { display: block; padding: 11px 14px; border: 0; border-radius: 8px; text-decoration: none; font-size: inherit; }
.site-header .nav a.res-item:hover, .site-header .nav a.res-item:focus-visible { background: rgba(38, 84, 6, 0.08); border: 0; outline: none; }
.site-header .nav a.res-item[aria-current="page"] { background: rgba(38, 84, 6, 0.06); box-shadow: inset 3px 0 0 #265406; font-weight: 400; }
.site-header .res-name { display: block; font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 1.06rem; font-weight: 600; color: #265406; }
.site-header .res-note { display: block; margin-top: 3px; font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.84rem; line-height: 1.35; color: #5F5A4A; }
.site-header .res-item--soon { cursor: default; }
.site-header .res-item--soon .res-name { color: #7C7663; }
.site-header .res-item--soon em { margin-left: 10px; font-style: normal; font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #5F5A4A; border: 1px solid rgba(38, 84, 6, 0.22); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
.site-header .res-split { display: flex; align-items: stretch; }
.site-header .nav .res-split .res-item { flex: 1 1 50%; min-width: 0; border-radius: 8px 0 0 8px; }
.site-header .nav .res-split .res-item + .res-item, .site-header .nav .res-split a.res-item + a.res-item:hover, .site-header .nav .res-split a.res-item + a.res-item:focus-visible, .site-header .nav .res-split a.res-item + a.res-item[aria-current="page"] { border-left: 1px solid rgba(38, 84, 6, 0.22); border-radius: 0 8px 8px 0; }
.site-header .nav .res-split a.res-item + a.res-item[aria-current="page"] { box-shadow: inset -3px 0 0 #265406; }

@media (max-width: 760px) {
  .site-header .nav { display: flex; position: static; flex-direction: row; padding: 0; border: 0; background: none; }
  .site-header .res { margin: 0; }
  .site-header .header-inner { position: relative; }
  .site-header .res { position: static; }
  .site-header .res-panel { left: 16px; right: 16px; width: auto; }
  .site-header .res-panel::before { display: none; }
}

/* Home: resource cards carry a folded corner, service cards round theirs, so
   the free and the paid are told apart at a glance. */
.card--dogear { position: relative; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.card--dogear::after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 40px;
  background: linear-gradient(to bottom left, transparent 50%, rgba(38, 84, 6, 0.10) 50%); }
/* Service boxes, 2026-10-02: styled as the resource boxes, folded at the bottom right,
   with the top and left edges on hover. */
.card--dogear-br { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
.card--dogear-br::after { content: ""; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px;
  background: linear-gradient(to top left, transparent 50%, rgba(38, 84, 6, 0.10) 50%); }
/* Every Home box is one link. The title carries it; any other link in the box sits above. */
.card--link { position: relative; transition: background-color 140ms ease, box-shadow 140ms ease; }
.card--link .card-main::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--link a:not(.card-main) { position: relative; z-index: 2; }
.card--link:hover, .card--link:focus-within { background-image: linear-gradient(rgba(38, 84, 6, 0.06), rgba(38, 84, 6, 0.06)); box-shadow: inset 3px 0 0 var(--green), inset 0 -3px 0 var(--green); }
/* A service box takes the top and left edges on hover, drawn as one line. */
.card--service.card--link:hover, .card--service.card--link:focus-within { box-shadow: inset 0 3px 0 var(--green), inset 3px 0 0 var(--green); }

/* ------------------------------------------------------ question forms -- */
/* Contact and Corrections take the Classifier's form: one centered column, the
   page's notes ahead of the first question, numbered questions on a panel, and
   option cards in place of drop-downs. */
.qpage { max-width: 760px; margin-left: auto; margin-right: auto; }
.qintro { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; }
.qform { margin-top: 32px; background: var(--paper); border: 1px solid #cdc7ab; border-radius: 3px; padding: 22px 20px 24px; }
.qform .field { margin-bottom: 18px; }
.qform .field > label, .qform .qlabel { display: block; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 6px; }
.qform .qn { color: var(--ink-muted); }
.qform .hint { display: block; font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); margin-top: 3px; }
.qform .field input, .qform .field textarea { font-family: var(--sans); font-size: 0.95rem; background: #fffdf3; border: 1px solid #cdc7ab; padding: 10px; }
.qform .field textarea { min-height: 140px; }
.qform .field input:focus, .qform .field textarea:focus { border-color: var(--green); outline: none; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; margin-top: 5px; }
.qcard { position: relative; display: block; background: var(--paper); border: 1px solid #cdc7ab; border-radius: 10px; padding: 12px 11px 13px; cursor: pointer; }
.qcard:hover { border-color: var(--green); }
/* A card is a label, so the site's uppercase field-label style is undone here. */
.qform .field .qcard { font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.qcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.qcard .cdot { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #b8b09a; background: #fffdf3; margin-bottom: 9px; }
.qcard:has(input:checked) { border-color: var(--green); background: #fffdf3; }
.qcard:has(input:checked) .cdot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2.5px #fffdf3; }
.qcard:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.qcard .ct { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); line-height: 1.2; }
.qcard .cs { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-muted); font-style: italic; line-height: 1.3; margin-top: 2px; }
.cardpanel { margin-top: 11px; min-height: 4.8em; border-left: 2px solid #cdc7ab; padding: 3px 0 3px 13px; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-muted); line-height: 1.55; }
/* Six cards sit three by two rather than five and an orphan. */
.cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .cardgrid, .cardgrid--3 { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); } }


/* Home's resource boxes: a link beneath each, outside the box. The column keeps
   the three boxes level whatever their links say. */
.home-res { display: flex; flex-direction: column; }
.home-res > .card { flex: 1 1 auto; }
.home-res-link { margin-top: 14px; align-self: flex-start; font-family: var(--sans); font-size: 0.92rem; color: var(--green); text-decoration: none; border-bottom: 1px solid var(--rule); }
.home-res-link:hover, .home-res-link:focus-visible { border-bottom-color: var(--green); outline: none; }

/* Header, 2026-10-02: back-to-top on the left, the logo centred, the menu on the right. */
.site-header .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header .logo { justify-self: center; }
.site-header .nav { justify-self: end; margin-left: 0; }
.site-header .top-btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; height: 43px; padding: 0 18px; color: #E9DEC4; background: #265406; border: 2px solid #265406; border-radius: 999px; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.site-header .top-btn:hover { background: #1B3D04; border-color: #1B3D04; }
.site-header .top-btn:focus-visible { outline: 2px solid #265406; outline-offset: 3px; }
.site-header .top-btn svg { display: block; }
/* The menu scrolls inside itself when it is taller than the window. */
.site-header .res-scroll { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
/* The stacked arrangement, for comparison while the menu is settled: every link on a row of its own, in the order set. */
.site-header .res--stacked .res-pages-row { flex-direction: column; }
.site-header .nav .res--stacked .res-pages a.res-item--page { flex-basis: auto !important; justify-content: flex-start; padding: 0 14px; border-radius: 8px !important; border-left: 0 !important; }
.site-header .nav .res--stacked .res-pages a.res-item--page[aria-current="page"] { box-shadow: inset 3px 0 0 #265406; }
.site-header .res--stacked .res-list { display: flex; flex-direction: column; }
.site-header .res--stacked .res-split { display: contents; }
.site-header .nav .res--stacked .res-split .res-item { flex-basis: auto !important; border-left: 0 !important; border-radius: 8px !important; }
.site-header .nav .res--stacked .res-split a.res-item[aria-current="page"] { box-shadow: inset 3px 0 0 #265406; }
.site-header .res--stacked [data-order="1"] { order: 1; }
.site-header .res--stacked [data-order="2"] { order: 2; }
.site-header .res--stacked [data-order="3"] { order: 3; }
.site-header .res--stacked [data-order="4"] { order: 4; }
.site-header .res--stacked [data-order="5"] { order: 5; }
.site-header .res--stacked [data-order="6"] { order: 6; }

/* The two scroll buttons sit together on the left: to the top, then to the bottom. 2026-10-02. */
.site-header .hdr-left { justify-self: start; display: flex; gap: 8px; }
.site-header .header-inner { column-gap: 12px; }
.site-header .hdr-left .top-btn { justify-self: auto; }
@media (max-width: 480px) {
  .site-header .top-btn, .site-header .res-btn--bars { height: 40px; padding: 0 10px; }
  .site-header .hdr-left { gap: 6px; }
  .site-header .logo img { width: 128px; }
  .site-header .header-inner { column-gap: 8px; }
}

/* Question forms, 2026-10-02: no question numbers; a field that depends on an
   earlier answer appears only once that answer is given. */
.qform [hidden], .qsent[hidden] { display: none !important; }
.qform .qcard input { padding: 0; border: 0; width: 0; height: 0; }
.qcard input[type="checkbox"] + .cdot { border-radius: 3px; }
.qform .field > label.qtick, .qform .qsub > label.qtick { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-weight: 500; cursor: pointer; }
.qform .qtick input { width: auto; padding: 0; margin: 3px 0 0; accent-color: var(--green); }
.qform .qsub { margin-top: 14px; padding-left: 14px; border-left: 2px solid #cdc7ab; }
.qform .qsub > label { display: block; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 6px; }
.qform .qsub .note { margin: 0 0 12px; }
.qform .qsub .field { margin-bottom: 12px; }
.qform-after { margin: 12px 0 0; }
.qform-error { margin: 12px 0 0; font-family: var(--sans); font-size: 0.9rem; color: #8a2a12; }
.qsent { margin-top: 32px; background: var(--paper); border: 1px solid #cdc7ab; border-left: 3px solid var(--green); border-radius: 3px; padding: 24px 22px; }
.qsent h2 { margin-top: 0; }
/* The page-and-entry picker on Corrections. */
.qpick { position: relative; }
.qpick-chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qpick-chosen:not(:empty) { margin-bottom: 8px; }
.qpick-chosen li { display: inline-flex; align-items: center; gap: 4px; background: #fffdf3; border: 1px solid var(--green); border-radius: 999px; padding: 3px 6px 3px 12px; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); }
.qpick-x { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--green); padding: 0 4px; }
.qpick-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: 4px; background: #fffdf3; border: 1px solid #cdc7ab; border-radius: 3px; box-shadow: 0 10px 24px rgba(28, 26, 21, 0.12); max-height: 280px; overflow-y: auto; }
.qpick-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 3px; cursor: pointer; font-family: var(--sans); font-size: 0.92rem; color: var(--ink); }
.qpick-list li em { font-style: normal; color: var(--ink-muted); font-size: 0.8rem; }
.qpick-list li.is-active, .qpick-list li:hover { background: rgba(38, 84, 6, 0.08); }


/* Glossary index as cards, on trial 2026-10-02. ?glossary=list shows the list;
   ?glossary=cards brings the cards back. */
#gl-list.gl-cards .gl-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
#gl-list.gl-cards .gl-item { position: relative; display: flex; flex-direction: column; max-width: none; padding: 20px 20px 22px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 4px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); transition: background-color 140ms ease, box-shadow 140ms ease; }
#gl-list.gl-cards .gl-item::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: linear-gradient(to bottom left, transparent 50%, rgba(38, 84, 6, 0.10) 50%); }
#gl-list.gl-cards .gl-item-term::before { content: ""; position: absolute; inset: 0; z-index: 1; }
#gl-list.gl-cards .gl-flag { position: relative; z-index: 2; }
#gl-list.gl-cards .gl-item:hover, #gl-list.gl-cards .gl-item:focus-within { background-image: linear-gradient(rgba(38, 84, 6, 0.06), rgba(38, 84, 6, 0.06)); box-shadow: inset 3px 0 0 var(--green), inset 0 -3px 0 var(--green); }
#gl-list.gl-cards .gl-item-summary { margin-top: 8px; font-size: 0.92rem; color: var(--ink-muted); }
#gl-list.gl-cards .gl-section { margin-bottom: 44px; }

/* The down arrow is drawn in outline, so the two scroll buttons read as a pair rather than as twins. 2026-10-03. */
.site-header .top-btn.bottom-btn { background: transparent; color: #265406; }
.site-header .top-btn.bottom-btn:hover { background: rgba(38, 84, 6, 0.08); border-color: #265406; color: #265406; }

/* Home's two service boxes that differ from the rest, 2026-10-03: the Compliance
   Review keeps its fold, drawn deeper, with a green hairline; Talk to Candor has no
   fold and no fill, with rounded corners and a dashed edge. */
.card--service.card--featured { border-color: var(--green); }
.card--service.card--featured.card--dogear-br::after { background: linear-gradient(to top left, transparent 50%, rgba(38, 84, 6, 0.32) 50%); }
.card--service.card--contact { background-color: transparent; border: 1px dashed rgba(38, 84, 6, 0.45); border-radius: 10px; }

/* Glossary section titles, centred between two rules. CCDT, 2026-10-03. */
#gl-list .gl-section h2 { display: flex; align-items: center; gap: 18px; text-align: center; }
#gl-list .gl-section h2::before, #gl-list .gl-section h2::after { content: ""; flex: 1 1 0; height: 1px; background: var(--rule); }

/* The glossary index: each section a band of its own, the shades alternating with the
   stops of the header's arrows. The paper reaches the page's edges through its shadow.
   2026-10-03. */
#gl-list .gl-section, #gl-list.gl-cards .gl-section { margin: 0; padding: 56px 0; }
#gl-list .gl-section.gl-alt { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
#gl-list .gl-section h2 { margin-top: 0; }

/* The menu as pairs, 2026-10-05: About | Services on the first row, then the
   resources, every row split at the same line. Home leaves the menu, since the logo
   goes home; Contact becomes a button in the header, beside the menu on the desktop and
   in the arrows' place on phones, where the arrows come off. */
.site-header .nav { gap: 10px; }
.site-header a.hdr-contact, .site-header .nav a.hdr-contact { display: inline-flex; align-items: center; justify-content: center; height: 43px; padding: 0 20px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.95rem; font-weight: 500; line-height: 1; color: #265406; background: transparent; border: 2px solid #265406; border-radius: 999px; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; }
.site-header a.hdr-contact:hover, .site-header .nav a.hdr-contact:hover { background: rgba(38, 84, 6, 0.08); border-color: #265406; }
.site-header a.hdr-contact:focus-visible, .site-header .nav a.hdr-contact:focus-visible { outline: 2px solid #265406; outline-offset: 3px; }
.site-header a.hdr-contact[aria-current="page"], .site-header .nav a.hdr-contact[aria-current="page"] { background: #265406; color: #E9DEC4; border-color: #265406; font-weight: 500; }
.site-header a.hdr-contact--phone { display: none; }
.site-header .res--stacked [data-order="7"] { order: 7; }
.site-header .res--stacked [data-order="8"] { order: 8; }
@media (max-width: 760px) {
  .site-header .hdr-left .top-btn { display: none; }
  .site-header .hdr-left a.hdr-contact--phone { display: inline-flex; }
  .site-header .nav a.hdr-contact--desk { display: none; }
}
@media (max-width: 480px) {
  .site-header a.hdr-contact, .site-header .hdr-left a.hdr-contact--phone { height: 40px; padding: 0 14px; }
  .site-header .nav .res-split .res-item { flex-basis: 50% !important; }
  .site-header .res:not(.res--stacked) .res-note { display: none; }
}

/* Stops added 2026-10-05: the glossary's search bar, and each entry of a glossary section
   page. Each takes a band of its own shade, reaching the page's edges, so the shade still
   changes only where the arrows stop. */
.gl-searchband { padding: 40px 0 44px; }
.gl-searchband .gl-controls { margin-bottom: 0; }
.gl-tail { padding: 32px 0 72px; }
.gl-entries--stops .gl-item { max-width: none; padding: 24px 0; border-bottom: 0; }
.gl-entries--stops .gl-item-summary { max-width: 74ch; }
.gl-searchband.gl-alt, .gl-tail.gl-alt, .gl-entries--stops .gl-item.gl-alt, #gl-az.gl-alt, #gl-empty.gl-alt { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
#gl-empty { margin: 0; padding: 24px 0; }

/* The hero's bottom edge, 2026-10-05: room beneath the lede or button before the
   next band's shade begins. Where the next band shares the hero's shade, its own top
   padding shrinks so the gap does not double. */
.page-head { padding-bottom: 64px; }
.page-head + .band:not(.band--paper) { padding-top: 24px; }
@media (max-width: 760px) { .page-head { padding-bottom: 44px; } }

/* About's experience cards: a phrase in the sentence opens a short list. 2026-10-05. */
.xp { position: relative; }
.xp-btn { color: var(--green); cursor: pointer; border-bottom: 1px dotted rgba(38, 84, 6, 0.6); }
.xp-btn:hover, .xp.is-open .xp-btn { border-bottom: 1px solid var(--green); }
.xp-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.xp-card { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 340px; max-width: calc(100vw - 24px); padding: 14px 16px; background: #fffdf3; border: 1px solid #cdc7ab; border-radius: 8px; box-shadow: 0 14px 32px rgba(28, 26, 21, 0.14); font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.xp.is-open .xp-card { display: block; }
.xp-item { display: block; padding: 5px 0 5px 14px; position: relative; }
.xp-item + .xp-item { border-top: 1px solid rgba(38, 84, 6, 0.10); }
.xp-item::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Header, 2026-10-05: Contact on the left at every width, and the two arrows a pair
   just under the menu button, travelling with the header. */
.site-header .header-inner { position: relative; }
.site-header .hdr-left a.hdr-contact--phone { display: inline-flex; }
.site-header .hdr-arrows { position: absolute; top: calc(100% + 14px); right: 24px; display: flex; gap: 8px; }
.site-header .hdr-arrows .top-btn.bottom-btn { background: rgba(245, 241, 222, 0.94); }
.site-header .hdr-arrows .top-btn.bottom-btn:hover { background: #ECE6CC; }
@media (max-width: 760px) { .site-header .hdr-arrows { display: none; } }

/* Header, 2026-10-06: Contact filled green everywhere but the Contact page, which
   shows it in outline; the filled arrow keeps a beige ring so it stays visible over the
   green footer. */
.site-header a.hdr-contact, .site-header .nav a.hdr-contact { background: #265406; color: #E9DEC4; border-color: #265406; }
.site-header a.hdr-contact:hover, .site-header .nav a.hdr-contact:hover { background: #1B3D04; border-color: #1B3D04; color: #E9DEC4; }
.site-header a.hdr-contact[aria-current="page"], .site-header .nav a.hdr-contact[aria-current="page"] { background: transparent; color: #265406; border-color: #265406; }
.site-header .hdr-arrows .top-btn:not(.bottom-btn) { box-shadow: 0 0 0 2px #E9DEC4; }

/* The contact form in stops, 2026-10-06: each question group is a stop of the
   header's arrows, in a band of its own, the shades alternating. */
.qform.qform--stops { margin-top: 0; background: none; border: 0; border-radius: 0; padding: 0; }
.qpage .qstop { padding: 36px 0; }
.qpage .qstop > .field:last-child, .qpage .qstop .qsub > .field:last-child { margin-bottom: 0; }
.qpage .qstop .qtick { margin-top: 14px; }

/* The glossary's way back to its search bar, opposite the arrows. 2026-10-06. */
.gl-back { position: fixed; top: 114px; left: 24px; z-index: 39; display: inline-flex; align-items: center; height: 43px; padding: 0 20px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.95rem; font-weight: 500; color: #E9DEC4; background: #265406; border: 2px solid #265406; border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 2px #E9DEC4; }
.gl-back:hover { background: #1B3D04; border-color: #1B3D04; }
.gl-back:focus-visible { outline: 2px solid #265406; outline-offset: 3px; }
.gl-back[hidden] { display: none; }
@media (max-width: 760px) { .gl-back { display: none !important; } }

/* The way back to the search bar on phones, where the floating button is hidden: a link at
   the left end of each section's title bar. 2026-10-06. */
#gl-list .gl-head { display: flex; align-items: center; gap: 14px; }
#gl-list .gl-head h2 { flex: 1 1 auto; min-width: 0; }
.gl-to-search { display: none; }
@media (max-width: 760px) {
  .gl-to-search { display: inline-block; flex: none; font-family: var(--sans); font-size: 0.84rem; font-weight: 500; color: var(--green); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  #gl-list .gl-head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-soft); }
  #gl-list .gl-head h2 { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  #gl-list .gl-head h2::before { display: none; }
}

/* Back to top, 2026-10-06: on every page but the glossary index, which has Back to
   search in its place. Opposite the arrows, under Contact, and shown once the first stop
   below the top has reached the header. Off on phones, like the arrows. */
.site-header .to-top { position: absolute; top: calc(100% + 14px); left: 24px; display: inline-flex; align-items: center; height: 43px; padding: 0 20px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.95rem; font-weight: 500; color: #E9DEC4; background: #265406; border: 2px solid #265406; border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 2px #E9DEC4; }
.site-header .to-top:hover { background: #1B3D04; border-color: #1B3D04; }
.site-header .to-top:focus-visible { outline: 2px solid #265406; outline-offset: 3px; }
.site-header .to-top[hidden] { display: none; }
@media (max-width: 760px) { .site-header .to-top { display: none !important; } }

/* One arrow at either end of the page, 2026-10-06: at the top only the down arrow,
   and at the footer only the right-hand button, which turns to go up. */
.site-header .hdr-arrows .top-btn[hidden] { display: none; }

/* The arrows' colours swapped, 2026-10-07: the right-hand button filled, the left in
   outline, so a button standing alone at either end of the page is green. */
.site-header .hdr-arrows .top-btn.bottom-btn { color: #E9DEC4; background: #265406; border-color: #265406; box-shadow: 0 0 0 2px #E9DEC4; }
.site-header .hdr-arrows .top-btn.bottom-btn:hover { color: #E9DEC4; background: #1B3D04; border-color: #1B3D04; }
.site-header .hdr-arrows .top-btn:not(.bottom-btn) { color: #265406; background: rgba(245, 241, 222, 0.94); border-color: #265406; box-shadow: none; }
.site-header .hdr-arrows .top-btn:not(.bottom-btn):hover { color: #265406; background: #ECE6CC; border-color: #265406; }

/* Back to search gives way to Back to top at the glossary's footer. 2026-10-07. */
.gl-back.is-end { display: none !important; }

/* The one lighter section on Contact and Corrections, reaching the page's edges. 2026-10-07. */
.qpage .qstop.q-light { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }

/* One card size on the glossary index. 2026-10-07. */
#gl-list.gl-cards .gl-item { overflow: hidden; }
#gl-list.gl-cards .gl-item.is-clamped .gl-item-summary { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.gl-item-more { display: none; }
#gl-list.gl-cards .gl-item.is-clamped .gl-item-more { display: block; margin-top: auto; padding-top: 8px; font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--green); }

/* "Classify a project" leads the menu, filled green, without the fold. 2026-10-07. */
.site-header .nav a.res-item.res-item--cta { background: #265406; }
.site-header .nav a.res-item.res-item--cta:hover, .site-header .nav a.res-item.res-item--cta:focus-visible { background: #1B3D04; }
.site-header .nav a.res-item.res-item--cta .res-name, .site-header .nav a.res-item.res-item--cta .res-note { color: #E9DEC4; }
.site-header .nav a.res-item.res-item--cta[aria-current="page"] { background: #265406; box-shadow: inset 3px 0 0 #E9DEC4; }

/* Cards measure their own height, not their row's: every card is set to one height in any
   case, so the grid need not stretch them. 2026-10-07. */
#gl-list.gl-cards .gl-entries { align-items: start; }

/* Two green buttons side by side: the current page and the divider in beige. 2026-10-07. */
.site-header .nav .res-split a.res-item + a.res-item--cta[aria-current="page"] { box-shadow: inset -3px 0 0 #E9DEC4; }
.site-header .nav .res-split a.res-item--cta + a.res-item--cta { border-left-color: rgba(233, 222, 196, 0.45); }