/* ═══════════════════════════════════════════════════════════════
   DRYZEN - Humidity Guide
   Reference-page layer on top of /css/style.css (nav, footer, buttons).
   World: a field manual. Warm paper, navy ink, a three-zone scale
   (amber dry / teal healthy / coral damp) used as the one colour code.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:      #FBFAF6;
  --paper-2:    #F3F1EA;
  --rule:       #DAD6C9;
  --ink:        #0D2137;
  --ink-soft:   #3B4A5E;
  --teal-ink:   #0F766E;
  --z-dry:      #F2B13A;
  --z-ok:       #14A596;
  --z-damp:     #D8572A;
  --z-dry-ink:  #8A5300;
  --z-damp-ink: #A93E15;
  --serif:      'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display:    'Poppins', 'Inter', sans-serif;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

body.hg { background: var(--paper); color: var(--ink); overflow-x: hidden; }
.hg ::selection { background: #BFEDE6; color: var(--ink); }
.hg :focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 4px; }
.hg-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  background: var(--amber); color: var(--navy-deep); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700;
}
.hg-skip:focus { top: 1rem; }

/* ─── Masthead ───────────────────────────────────────────────── */
.hg-head {
  background: var(--grad-hero);
  color: var(--white);
  padding: 8.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.hg-head::after {
  content: ''; position: absolute; inset: auto -10% -40% auto; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,0.18) 0%, transparent 68%); pointer-events: none;
}
.hg-head .breadcrumb { position: relative; z-index: 1; }
.hg-head h1 {
  color: var(--white); position: relative; z-index: 1;
  font-size: clamp(2.25rem, 5.6vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.04;
  max-width: 16ch; text-wrap: balance; margin-bottom: 1.75rem;
}
.hg-meta {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.62); margin-bottom: 2.25rem;
}
.hg-answer {
  position: relative; z-index: 1; max-width: 46rem;
  font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 1.55rem); line-height: 1.5; color: rgba(255,255,255,0.95);
}
.hg-answer strong { color: #fff; font-weight: 600; background: linear-gradient(transparent 62%, rgba(20,184,166,0.45) 62%); }

/* ─── The range bar (one scale, used in masthead and cheat sheet) ─ */
.rb { position: relative; z-index: 1; margin-top: 3rem; }
.rb-title { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 0.75rem; color: rgba(255,255,255,0.75); }
.rb-track { position: relative; display: flex; gap: 3px; height: 4.5rem; }
.rb-zone {
  display: flex; flex-direction: column; justify-content: flex-start; padding: 0.7rem 0.75rem 0;
  font-family: var(--display); font-weight: 600; font-size: 0.92rem; line-height: 1.15; color: #111;
  min-width: 0;
}
.rb-zone small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.7rem; margin-top: 0.2rem; opacity: 0.85; }
.rb-zone.dry   { flex: 20 1 0; background: var(--z-dry); border-radius: 10px 4px 4px 10px; }
.rb-zone.ok    { flex: 20 1 0; background: var(--z-ok); color: #04201C; }
.rb-zone.damp  { flex: 30 1 0; background: var(--z-damp); color: #fff; border-radius: 4px 10px 10px 4px; }
.rb-zone.ok { box-shadow: 0 10px 28px -10px rgba(20,184,166,0.8); }
.rb-ticks { position: relative; height: 1.6rem; margin-top: 0.4rem; }
.rb-ticks span {
  position: absolute; transform: translateX(-50%); font-size: 0.72rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7);
}
.rb-ticks span::before { content: ''; position: absolute; left: 50%; top: -0.45rem; width: 1px; height: 0.35rem; background: currentColor; }
.rb-ticks span:first-child { transform: none; }
.rb-ticks span:last-child { transform: translateX(-100%); }
.rb-marker {
  position: absolute; top: 58%; bottom: -0.3rem; border-radius: 9px;
  border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(7,20,36,0.55), 0 6px 16px rgba(7,20,36,0.35); pointer-events: none;
}
.rb-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 0.75rem; font-size: 0.82rem; color: rgba(255,255,255,0.78); line-height: 1.5; }
.rb-notes b { color: #fff; font-weight: 600; }

.rb.light .rb-title, .rb.light .rb-notes { color: var(--ink-soft); }
.rb.light .rb-notes b { color: var(--ink); }
.rb.light .rb-ticks span { color: var(--ink-soft); }
.rb.light .rb-zone.ok { box-shadow: none; }

/* ─── Page grid ──────────────────────────────────────────────── */
.hg-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; padding-top: 4rem; padding-bottom: 2rem; }
.hg-toc { position: sticky; top: 6rem; align-self: start; font-size: 0.86rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.hg-toc h2 { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 600; margin-bottom: 0.75rem; }
.hg-toc ol { list-style: none; border-left: 1px solid var(--rule); }
.hg-toc a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); line-height: 1.35; }
.hg-toc a:hover { color: var(--ink); }
.hg-toc a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--z-ok); }
.hg-toc ol ol a { padding-left: 1.7rem; font-size: 0.8rem; }
.hg-toc-m { display: none; }

/* ─── Article typography ─────────────────────────────────────── */
.hg-art { min-width: 0; max-width: 46rem; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.7; color: #1B2A3D; }
.hg-art p { margin-bottom: 1.15rem; line-height: 1.7; max-width: 68ch; }
.hg-art a:not(.btn):not(.anchor) { color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hg-art a:not(.btn):not(.anchor):hover { text-decoration-thickness: 2px; }
.hg-art h2, .hg-art h3 { font-family: var(--display); color: var(--ink); scroll-margin-top: 6rem; text-wrap: balance; position: relative; }
.hg-art h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; margin: 4.5rem 0 1.25rem; padding-top: 1.75rem; border-top: 2px solid var(--ink); }
.hg-art section:first-child h2 { margin-top: 0; }
.hg-art h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 2.75rem 0 0.9rem; letter-spacing: -0.01em; }
.hg-art h4 { font-family: var(--display); font-size: 1.05rem; margin: 1.75rem 0 0.4rem; color: var(--ink); }
.hg-art .anchor {
  position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%); padding: 0.25rem; opacity: 0; transition: opacity 0.2s;
  color: var(--teal-ink); font-family: var(--sans); font-size: 1rem; line-height: 1; text-decoration: none;
}
.hg-art h2 .anchor { top: 2.1rem; }
.hg-art h2:hover .anchor, .hg-art h3:hover .anchor, .hg-art .anchor:focus-visible { opacity: 1; }
.hg-art ul.hg-list, .hg-art ol.hg-list { margin: 0 0 1.25rem 1.25rem; max-width: 66ch; }
.hg-art ul.hg-list { list-style: disc; }
.hg-art ol.hg-list { list-style: decimal; }
.hg-art .hg-list li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.hg-art .hg-list li::marker { color: var(--teal-ink); }
sup.cite { font-family: var(--sans); font-size: 0.68em; font-weight: 600; line-height: 0; }
sup.cite a { color: var(--teal-ink) !important; text-decoration: none !important; padding: 0 0.08em; }
sup.cite a:hover { text-decoration: underline !important; }
.hg-lede { font-size: 1.3rem; line-height: 1.6; color: var(--ink); }

/* ─── Numbers that matter ────────────────────────────────────── */
.hg-nums { list-style: none; margin: 2rem 0 2.25rem; border-top: 1px solid var(--rule); }
.hg-nums li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.hg-nums .n { font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1; color: var(--ink); white-space: nowrap; }
.hg-nums .n.k1 { color: var(--teal-ink); }
.hg-nums .n.k2 { color: var(--z-dry-ink); }
.hg-nums .n.k3 { color: var(--z-damp-ink); }
.hg-nums p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.hg-nums b { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 0.15rem; color: var(--ink); }

/* ─── Callouts ───────────────────────────────────────────────── */
.hg-box { margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper-2); font-family: var(--sans); font-size: 0.97rem; line-height: 1.6; }
.hg-box h3, .hg-box h4 { margin: 0 0 0.6rem; font-size: 1.1rem; font-family: var(--display); }
.hg-box p { font-family: var(--sans); font-size: 0.97rem; max-width: none; margin-bottom: 0.7rem; }
.hg-box p:last-child, .hg-box ul:last-child { margin-bottom: 0; }
.hg-box ul { list-style: none; margin: 0.4rem 0 0.2rem; }
.hg-box li { position: relative; padding-left: 1.9rem; margin-bottom: 0.65rem; }
.hg-box.not { background: #FFF4EC; border-color: #F0C3A8; }
.hg-box.not h3 { color: var(--z-damp-ink); }
.hg-box.not li::before {
  content: ''; position: absolute; left: 0; top: 0.28em; width: 1.05rem; height: 1.05rem;
  background: var(--z-damp-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hg-box.tip { background: #E9F7F4; border-color: #A9DDD4; }
.hg-box.tip h3, .hg-box.tip h4 { color: var(--teal-ink); }
.hg-box.cite { background: #fff; }
.hg-box.cite blockquote { font-family: var(--serif); font-size: 1.02rem; padding: 0.9rem 1.1rem; background: var(--paper); border: 1px dashed var(--rule); border-radius: 10px; margin: 0.6rem 0 0.9rem; user-select: all; }

/* ─── Tables ─────────────────────────────────────────────────── */
.hg-tablewrap { overflow-x: auto; margin: 1.75rem 0; border-radius: 12px; border: 1px solid var(--rule); background: #fff; }
.hg-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; }
.hg-table caption { text-align: left; padding: 0.9rem 1.1rem; font-weight: 600; font-family: var(--display); color: var(--ink); caption-side: top; }
.hg-table th, .hg-table td { padding: 0.8rem 1.1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.hg-table thead th { background: var(--ink); color: #fff; font-weight: 600; font-size: 0.82rem; border-top: 0; letter-spacing: 0.02em; }
.hg-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hg-table td.num, .hg-table th.num { font-variant-numeric: tabular-nums; text-align: right; }
.hg-table tr.hl td, .hg-table tr.hl th { background: #E9F7F4; }
.hg-table td p { margin: 0; font-family: var(--sans); font-size: inherit; }
.hg-table .sw { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: -0.05em; }

/* ─── Steps (hygrometer, salt test) ──────────────────────────── */
.hg-steps { list-style: none; counter-reset: s; margin: 1.5rem 0 2rem; max-width: 66ch; }
.hg-steps > li { counter-increment: s; position: relative; padding: 0 0 1.35rem 3.2rem; }
.hg-steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0.05rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 0.95rem; display: grid; place-items: center;
}
.hg-steps > li::after { content: ''; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0.2rem; width: 2px; background: var(--rule); }
.hg-steps > li:last-child::after { display: none; }
.hg-steps b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); display: block; margin-bottom: 0.15rem; }

/* ─── Decision flow ──────────────────────────────────────────── */
.hg-flow { list-style: none; margin: 1.75rem 0; counter-reset: f; font-family: var(--sans); }
.hg-flow > li { counter-increment: f; position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 1.15rem 1.3rem 1.2rem; margin-bottom: 2rem; }
.hg-flow > li:not(:last-child)::after {
  content: ''; position: absolute; left: 2rem; bottom: -1.75rem; height: 1.5rem; width: 2px; background: var(--ink);
}
.hg-flow .q { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 0 0.8rem; max-width: none; line-height: 1.4; }
.hg-flow .q::before { content: 'Check ' counter(f) '. '; color: var(--teal-ink); }
.hg-flow .ans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.hg-flow .ans > div { border-radius: 10px; padding: 0.8rem 0.95rem; font-size: 0.92rem; line-height: 1.5; background: var(--paper-2); }
.hg-flow .ans b { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.hg-flow .yes b { color: var(--z-damp-ink); }
.hg-flow .no b { color: var(--teal-ink); }
.hg-flow p { font-family: var(--sans); font-size: inherit; margin: 0; max-width: none; }

/* ─── Calculator ─────────────────────────────────────────────── */
.hg-calcbox { margin: 2rem 0; border-radius: 18px; background: var(--ink); color: #fff; padding: 1.75rem; font-family: var(--sans); box-shadow: 0 24px 48px -24px rgba(13,33,55,0.55); }
.hg-calcbox h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.35rem; }
.hg-calcbox > p { font-family: var(--sans); font-size: 0.92rem; color: rgba(255,255,255,0.75); margin-bottom: 1.25rem; }
.hg-calcbox a { color: #7DE3D6 !important; }
.hg-calc { display: none; }
.js .hg-calc { display: block; }
.hg-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hg-field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; color: #fff; }
.hg-field .opt { font-weight: 400; color: rgba(255,255,255,0.65); }
.hg-field input {
  width: 100%; padding: 0.8rem 0.9rem; border-radius: 10px; border: 2px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 3rem;
}
.hg-field input:hover { border-color: rgba(255,255,255,0.45); }
.hg-field input:focus { border-color: #5EEAD4; outline: none; background: rgba(255,255,255,0.12); box-shadow: 0 0 0 3px rgba(94,234,212,0.3); }
.hg-field small { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: rgba(255,255,255,0.62); line-height: 1.4; }
.hg-calc .btn { margin-top: 1.1rem; }
.hg-err { min-height: 1.2rem; margin-top: 0.8rem; color: #FFC9B3; font-size: 0.88rem; font-weight: 600; }
.hg-result { margin-top: 0.4rem; border-radius: 14px; padding: 1.25rem 1.3rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); }
.hg-result[hidden] { display: none; }
.hg-result h4 { color: #fff; font-size: 1.25rem; margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.6rem; }
.hg-result h4::before { content: ''; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--z-ok); flex: none; box-shadow: 0 0 0 4px rgba(20,165,150,0.3); }
.hg-result[data-level=watch] h4::before { background: var(--z-dry); box-shadow: 0 0 0 4px rgba(242,177,58,0.3); }
.hg-result[data-level=dry] h4::before { background: #8FB4FF; box-shadow: 0 0 0 4px rgba(143,180,255,0.3); }
.hg-result[data-level=bad] h4::before { background: var(--z-damp); box-shadow: 0 0 0 4px rgba(216,87,42,0.35); }
.hg-result p { font-family: var(--sans); font-size: 0.95rem; color: rgba(255,255,255,0.88); margin: 0 0 1rem; max-width: 60ch; }
.hg-result dl { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem 1.25rem; font-size: 0.9rem; margin-bottom: 1.25rem; }
.hg-result dt { color: rgba(255,255,255,0.8); }
.hg-result dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-family: var(--display); }
.hg-strip { position: relative; }
.hg-strip .bar { position: relative; display: flex; height: 1.9rem; border-radius: 8px; overflow: hidden; }
.hg-strip .z-wet { background: var(--z-damp); }
.hg-strip .z-mould { background: var(--z-dry); }
.hg-strip .z-ok { background: var(--z-ok); }
.hg-strip .mk-wall { position: absolute; top: -0.35rem; bottom: -0.35rem; width: 4px; margin-left: -2px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 2px var(--ink); }
.hg-strip .scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: rgba(255,255,255,0.7); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.hg-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.8rem; font-size: 0.78rem; color: rgba(255,255,255,0.8); }
.hg-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -0.05em; }
.hg-method { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }
.hg-method code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.85em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 5px; }
.js .hg-nojs-note { display: none; }

/* ─── Cheat sheet (screen preview; print.css prints only this) ─ */
.hg-sheetbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }
.hg-sheetbar [hidden] { display: none; }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--navy-mid); border-color: var(--navy-mid); transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.sheet { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1.5rem; box-shadow: 0 30px 50px -32px rgba(13,33,55,0.4); font-family: var(--sans); color: var(--ink); }
.sheet-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.7rem; margin-bottom: 0.9rem; }
.sheet-hd h3 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.sheet-logo { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; }
.sheet-logo span { color: var(--teal-ink); }
.sheet h4 { font-family: var(--display); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 1rem 0 0.4rem; color: var(--ink); }
.sheet .rb { margin-top: 0.4rem; }
.sheet .rb-track { height: 3.2rem; }
.sheet .rb-zone { font-size: 0.78rem; }
.sheet .rb-notes { font-size: 0.72rem; margin-top: 0.4rem; gap: 0.8rem; }
.sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 0.78rem; line-height: 1.35; }
.sheet th, .sheet td { border: 1px solid #9AA4B2; padding: 0.3rem 0.45rem; text-align: left; vertical-align: top; }
.sheet thead th { background: #E8ECF1; font-weight: 600; }
.sheet .log td { height: 1.55rem; }
.logwrap { overflow-x: auto; }
.sheet ol { margin-left: 1.1rem; font-size: 0.78rem; line-height: 1.4; }
.sheet ol li { margin-bottom: 0.25rem; }
.sheet .fine { font-size: 0.68rem; color: var(--ink-soft); margin-top: 0.8rem; line-height: 1.4; max-width: none; font-family: var(--sans); }
.sheet p { font-family: var(--sans); max-width: none; }

/* ─── FAQ ────────────────────────────────────────────────────── */
.hg-faq { margin: 1.5rem 0; border-top: 1px solid var(--rule); font-family: var(--sans); }
.hg-faq details { border-bottom: 1px solid var(--rule); }
.hg-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); position: relative; line-height: 1.35; }
.hg-faq summary::-webkit-details-marker { display: none; }
.hg-faq summary::after { content: ''; position: absolute; right: 0.4rem; top: 1.45rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.25s var(--ease-out); }
.hg-faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.hg-faq summary:hover { color: var(--teal-ink); }
.hg-faq .ans { padding: 0 0 1.2rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; }
.hg-faq .ans p { font-size: inherit; }

/* ─── References ─────────────────────────────────────────────── */
.hg-refs { list-style: none; font-family: var(--sans); font-size: 0.86rem; line-height: 1.55; margin: 1.25rem 0; }
.hg-refs li { position: relative; padding: 0.55rem 0 0.55rem 2.7rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 6rem; word-break: break-word; }
.hg-refs li:target { background: #FFF6D6; }
.hg-refs .rn { position: absolute; left: 0; top: 0.55rem; font-weight: 700; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.hg-refs a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 0.2em; }

.hg-cta { margin: 4.5rem 0 1rem; padding: 2rem; border-radius: 18px; background: var(--grad-hero); color: #fff; font-family: var(--sans); }
.hg-cta h2 { color: #fff; border: 0; margin: 0 0 0.6rem; padding: 0; font-size: 1.6rem; }
.hg-cta p { font-family: var(--sans); color: rgba(255,255,255,0.82); font-size: 1rem; }
.hg-cta .btn { margin-top: 0.4rem; }
.hg-cta a.btn-primary { color: var(--navy-deep) !important; text-decoration: none; }
.hg-spacer { height: 4rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Motion: one authored moment (masthead scale draws in) ──── */
@media (prefers-reduced-motion: no-preference) {
  .rb-zone { animation: rb-in 0.9s var(--ease-out) both; }
  .rb-zone.ok { animation-delay: 0.12s; }
  .rb-zone.damp { animation-delay: 0.24s; }
  @keyframes rb-in { from { opacity: 0; transform: translateY(10px) scaleX(0.96); } to { opacity: 1; transform: none; } }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hg-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hg-toc { display: none; }
  .hg-toc-m { display: block; margin: 0 0 2rem; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-family: var(--sans); font-size: 0.92rem; }
  .hg-toc-m summary { cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 600; font-family: var(--display); }
  .hg-toc-m ol { list-style: none; padding: 0 1.1rem 1rem; }
  .hg-toc-m ol ol { padding: 0 0 0 1rem; }
  .hg-toc-m a { display: block; padding: 0.4rem 0; color: var(--teal-ink); }
  .hg-art .anchor { left: auto; right: 0; opacity: 0.5; }
}
@media (max-width: 720px) {
  .hg-head { padding: 7rem 0 3rem; }
  .hg-art { font-size: 1.0625rem; }
  .hg-art h2 { margin-top: 3.25rem; }
  .rb-notes { grid-template-columns: 1fr; gap: 0.6rem; }
  .rb-track { height: 5.2rem; }
  .rb-zone { padding: 0.6rem 0.5rem 0; font-size: 0.8rem; }
  .rb-zone small { font-size: 0.64rem; }
  .hg-nums li { grid-template-columns: 1fr; gap: 0.3rem; }
  .hg-fields { grid-template-columns: 1fr; }
  .hg-flow .ans { grid-template-columns: 1fr; }
  .hg-calcbox { padding: 1.25rem; }
  .sheet-cols { grid-template-columns: 1fr; }
  .sheet { padding: 1rem; }
  .sheet .log { min-width: 30rem; }
  .hg-tablewrap.stack { overflow: visible; border: 0; background: none; }
  .hg-table.stack, .hg-table.stack tbody, .hg-table.stack tr, .hg-table.stack th, .hg-table.stack td { display: block; width: 100%; }
  .hg-table.stack caption { display: block; width: 100%; padding: 0.4rem 0.2rem 0.8rem; }
  .hg-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hg-table.stack tr { background: #fff; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 0.9rem; padding: 0.4rem 0; }
  .hg-table.stack th, .hg-table.stack td { border: 0; padding: 0.35rem 1rem; white-space: normal; }
  .hg-table.stack td::before { content: attr(data-label); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; }
  .hg-cta { padding: 1.4rem; }
}

.hg-head sup.cite a { color: #7DE3D6 !important; }
.hg-head .rb-notes p { margin: 0; font-family: var(--sans); max-width: none; }
.hg-head p.rb-notes { margin-top: 1.1rem; }
.hg .btn { font-family: var(--sans); }
.hg-art .btn { font-size: 0.95rem; }
.hg-sheetbar .btn { min-height: 2.9rem; }
@media (max-width: 720px) {
  .rb:not(.light) .rb-ticks span:nth-child(2), .rb:not(.light) .rb-ticks span:nth-child(4),
  .rb:not(.light) .rb-ticks span:nth-child(6), .rb:not(.light) .rb-ticks span:nth-child(8) { display: none; }
}