/* ==========================================================================
   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 -- */

/* The footer, 2026-10-10: one line of who Candor is and how to reach it, then the legal
   sentence. The site's pages are in the menu's drawer. Each divider shows only between two
   items on the same line; a script marks the first item of each line. */
.site-footer {
  background: var(--green);
  color: rgba(233, 222, 196, 0.88);
  padding: 18px 0 16px;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
}
.site-footer .wrap { max-width: 1400px; }
.site-footer a:not(.btn) { color: var(--beige); text-decoration: none; }
.site-footer a:not(.btn):hover { text-decoration: underline; }
.footer-line { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.7em; row-gap: 3px; margin: 0; max-width: none; }
.fl-item { position: relative; white-space: nowrap; }
.fl-item + .fl-item::before { content: "|"; position: absolute; left: -1em; opacity: 0.45; }
.fl-item.line-start::before { display: none; }
.site-footer .footer-legal { max-width: none; margin: 8px 0 0; text-align: center; font-size: 0.74rem; color: rgba(233, 222, 196, 0.62); }

/* Words for the device in hand, 2026-10-10: click with a mouse, tap on a touch screen. */
.say-tap { display: none; }
@media (pointer: coarse) {
  .say-click { display: none; }
  .say-tap { display: inline; }
}

/* --------------------------------------------------------- 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; }
}

@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; }
  .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); }

/* Home, 2026-10-08: section titles centered between two rules, as the glossary's section
   titles are; the Classifier's card across both columns; cards link by name and phrase only. */
.rule-title { display: flex; align-items: center; gap: 18px; text-align: center; }
.rule-title::before, .rule-title::after { content: ""; flex: 1 1 0; height: 1px; background: var(--rule); }
.rule-lede { text-align: center; margin-left: auto; margin-right: auto; }
.card--wide { grid-column: 1 / -1; }
.home-review { margin: 28px auto 0; }

/* The Classifier's wide card on Home in two columns: what it does, and what each result
   states. One column on phones. 2026-10-08. */
.card-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; }
.card-col { display: flex; flex-direction: column; }
.card-col--aside { border-left: 1px solid var(--rule-soft); padding-left: 40px; }
.card-list { margin: 4px 0 0; padding-left: 1.1em; font-size: 0.98rem; }
.card-list li { margin-bottom: 8px; }
@media (max-width: 760px) {
  .card-cols { grid-template-columns: 1fr; gap: 20px; }
  .card-col--aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: 20px; }
}

/* On a glossary card the Pending flag sits at the right of the title's first line, clear
   of the fold, rather than on a line of its own. 2026-10-08. */
#gl-list.gl-cards .gl-flag { position: absolute; top: 22px; right: 32px; margin: 0; z-index: 2; }
#gl-list.gl-cards .gl-item:has(.gl-flag) .gl-item-term { padding-right: 30px; }

/* The glossary search hides entries and sections with the hidden attribute; the card
   view's display rules would otherwise outrank it and every card stayed visible. 2026-10-08. */
#gl-list [hidden]:not([hidden="until-found"]) { display: none !important; }

/* The glossary's section buttons as filters: a picked section's button filled green, and
   Clear selection in outline beside them. 2026-10-09. */
.gl-jump-link.is-on { background: var(--green); border-color: var(--green); color: var(--beige); }
.gl-jump-link.is-on:hover, .gl-jump-link.is-on:focus-visible { background: var(--green-deep); color: var(--beige); }
.gl-jump-clear { font-family: var(--sans); font-size: 0.84rem; color: var(--green); background: transparent;
  border: 1px solid var(--green); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.gl-jump-clear:hover, .gl-jump-clear:focus-visible { background: rgba(38, 84, 6, 0.08); outline: none; }
.gl-jump-clear[hidden] { display: none; }

/* The menu's two groups each carry a label over them, set as a heading rather than a
   caption, nearer the group it names than the one above it, with a rule between the
   groups. 2026-10-09. */
.site-header .res-head { margin: 16px 14px 7px; padding-top: 14px; border-top: 1px solid rgba(28, 26, 21, 0.14);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-style: normal; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5F5A4A; }
.site-header .res-head--first { margin-top: 2px; padding-top: 0; border-top: 0; }

/* About's sections read as one page: the space between them is twice the space under a
   heading. 2026-10-09. */
.band--about + .band--about { padding-top: 20px; }
.band--about:has(+ .band--about) { padding-bottom: 20px; }

/* A glossary card's full entry, opened by the browser's Find. 2026-10-09. */
.gl-item-full { display: block; margin-top: 10px; font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
#gl-list.gl-cards .gl-item.is-found .gl-item-more { display: none; }
#gl-list.gl-cards .gl-item.is-found { grid-column: 1 / -1; }
#gl-list.gl-cards .gl-item.is-found .gl-item-full { max-width: 74ch; }

/* On a phone the header's left button reads Classify alone, so it keeps to one line beside the logo. 2026-10-09. */
@media (max-width: 480px) { .site-header .hdr-more { display: none; } }

/* Home, 2026-10-09: rows of four for the free resources and the services, each card's
   description short enough to sit between its name and its link. */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-4 .card { padding: 26px 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* A glossary card opened by the browser's Find: the entry in full under its own label, in two
   columns where the row is wide enough. 2026-10-09. */
#gl-list.gl-cards .gl-item.is-found .gl-item-full { max-width: none; }
.gl-item-full p { margin: 0 0 0.8em; }
.gl-item-full .gl-full-label { margin: 6px 0 8px; }
@media (min-width: 900px) {
  #gl-list.gl-cards .gl-item.is-found .gl-item-full { column-count: 2; column-gap: 44px; }
  #gl-list.gl-cards .gl-item.is-found .gl-full-label { column-span: all; }
}

/* Home, 2026-10-09: half the space at each change of shade, above it and below it, the
   hero's foot included. The hero appears on Home alone. */
.hero { padding-bottom: 52px; }
.band--home { padding: 44px 0; }
@media (max-width: 760px) {
  .hero { padding-bottom: 32px; }
  .band--home { padding: 30px 0; }
}

/* A question sent to ADOR, on its own page. 2026-10-09. */
.gl-q h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.gl-q h3 a:hover { border-bottom-color: var(--green); }
.q-status { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-muted); margin-top: 14px; }

/* The menu as a drawer, 2026-10-10: every page in one column from the header's lower edge at
   the right, the page dimmed behind it. Literal colours, as the menu's other rules. */
.site-header .res-panel.res-drawer { position: fixed; top: var(--drw-top, 101px); right: 0; bottom: 0; left: auto; width: min(340px, 88vw); background: #F5F1DE; border: 0; border-left: 1px solid rgba(38, 84, 6, 0.20); border-radius: 0; box-shadow: -20px 0 44px rgba(28, 26, 21, 0.14); padding: 8px 0 16px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(24px); }
.site-header .res-panel.res-drawer::before, .site-header .res-panel.res-drawer::after { display: none; }
.site-header .res.is-open .res-panel.res-drawer { transform: none; }
.site-header .res.is-open::after { content: ""; position: fixed; top: var(--drw-top, 101px); left: 0; right: 0; bottom: 0; background: rgba(28, 26, 21, 0.18); z-index: 59; }
.site-header .res-drawer ul { list-style: none; margin: 0; padding: 0; }
.site-header .nav .res-drawer a.drw-item { display: block; padding: 7px 26px 7px 23px; border: 0; border-left: 3px solid transparent; border-radius: 0; color: #265406; text-decoration: none; font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.site-header .nav .res-drawer a.drw-item:hover, .site-header .nav .res-drawer a.drw-item:focus-visible { background: rgba(38, 84, 6, 0.07); border-bottom: 0; }
.site-header .nav .res-drawer a.drw-item[aria-current="page"] { border-left-color: #265406; background: rgba(38, 84, 6, 0.05); }
.site-header .res-drawer .drw-note { display: block; margin-top: 2px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.78rem; font-weight: 400; line-height: 1.35; color: #5F5A4A; }
.site-header .res-drawer .drw-sub { margin: 0 0 4px; }
.site-header .nav .res-drawer .drw-sub a.drw-item { padding: 4px 26px 4px 41px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.9rem; font-weight: 500; }
/* The line sits under the phone number and the voluntary disclosure page under the line,
   2026-10-11. */
.site-header .res-drawer .drw-contact { margin: 4px 26px 0; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 0.84rem; color: #5F5A4A; max-width: none; }
.site-header .nav .res-drawer .drw-contact a { display: block; padding: 2px 0; border: 0; color: #265406; font-size: 0.9rem; }
.site-header .res-drawer .drw-foot { margin: 10px 26px 0; padding-top: 10px; border-top: 1px solid rgba(38, 84, 6, 0.14); font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; max-width: none; }
.site-header .nav .res-drawer .drw-foot a { display: block; padding: 2px 0; border: 0; color: #265406; font-size: 0.9rem; font-weight: 500; }
.site-header .nav .res-drawer .drw-foot a[aria-current="page"] { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .site-header .res-panel.res-drawer { transform: none; } }