/* ==========================================================================
   guides.css — martawalsh.com /guides/
   Namespaced under .gd- so nothing here can collide with existing site CSS.
   Inherits site tokens via var() where they exist; falls back if they don't.
   ========================================================================== */

.gd-guide {
  /* Mapped onto the real tokens in site.css. Fallbacks are the same values,
     so the guides render correctly even if site.css fails to load. */
  --gd-ink:        var(--ink, #1A2B3C);
  --gd-head:       var(--navy, #0B1F35);
  --gd-ink-soft:   var(--mid, #6F7B87);
  --gd-rule:       var(--light, #E8E1D3);
  --gd-paper:      var(--paper, #FCFBF8);
  --gd-wash:       var(--cream, #F5F0E6);
  --gd-band:       var(--band, #F1EADC);
  --gd-accent:     var(--gold, #C8902A);
  --gd-accent-lt:  var(--gold2, #E8B86D);

  /* site.css sets fonts directly on body rather than via tokens, so name them. */
  --gd-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gd-sans:       'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gd-measure:    36rem;

  color: var(--gd-ink);
  font-family: var(--gd-sans);
}

/* --- Hero ---------------------------------------------------------------- */

.gd-hero {
  max-width: var(--gd-measure);
  margin: 0 auto;
  padding: 5.5rem 1.25rem 2rem;
  border-bottom: 1px solid var(--gd-rule);
}

.gd-eyebrow {
  margin: 0 0 1.25rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

.gd-title {
  margin: 0 0 1rem;
  font-family: var(--gd-serif);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--gd-head);
}

.gd-standfirst {
  margin: 0 0 1.75rem;
  font-family: var(--gd-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--gd-ink-soft);
}

.gd-byline {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--gd-ink-soft);
}

/* --- Body ---------------------------------------------------------------- */

.gd-body {
  max-width: var(--gd-measure);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}

.gd-body p {
  margin: 0 0 1.15rem;
  font-size: 17px;
  line-height: 1.68;
  overflow-wrap: break-word;
}

.gd-lede {
  font-size: 18px !important;
  color: var(--gd-ink);
}

.gd-body h2 {
  margin: 2.75rem 0 1rem;
  font-family: var(--gd-serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 5rem;
  color: var(--gd-head);
}

.gd-body strong { font-weight: 600; }
.gd-body em     { font-style: italic; }

/* --- Pull quote: the one signature element -------------------------------- */

.gd-pull {
  margin: 2rem 0 1.5rem !important;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gd-accent);
  font-family: var(--gd-serif);
  font-size: 24px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--gd-head);
}

/* --- Lists --------------------------------------------------------------- */

.gd-list {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
}

.gd-list li {
  margin-bottom: 0.6rem;
  font-size: 17px;
  line-height: 1.62;
  overflow-wrap: break-word;
}

.gd-list li::marker { color: var(--gd-accent); }

/* --- Inline notes -------------------------------------------------------- */

.gd-note {
  margin: 2rem 0;
  padding: 1.15rem 1.25rem 0.5rem;
  background: var(--gd-wash);
  border-left: 3px solid var(--gd-rule);
}

.gd-note p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.gd-note-label {
  margin-bottom: 0.45rem !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

/* --- Disclaimer ---------------------------------------------------------- */

.gd-disclaimer {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gd-rule);
}

.gd-disclaimer p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--gd-ink-soft);
  margin-bottom: 0 !important;
}

/* --- CTA ----------------------------------------------------------------- */

.gd-cta {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.25rem;
  background: var(--gd-wash);
  text-align: center;
}

.gd-cta p { margin-bottom: 0.5rem; }
.gd-cta p:last-child { margin-bottom: 0; }

.gd-cta-text {
  font-family: var(--gd-serif);
  font-size: 19px !important;
  color: var(--gd-head);
}

.gd-cta-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--gd-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.gd-cta-link:hover,
.gd-cta-link:focus-visible { color: var(--gd-ink); }

.gd-cta-sep {
  font-size: 15px;
  color: var(--gd-ink-soft);
  margin: 0 0.4rem;
}

/* --- Accessibility floor -------------------------------------------------- */

.gd-guide a:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gd-guide *,
  .gd-guide *::before,
  .gd-guide *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 480px) {
  .gd-hero { padding: 5.5rem 1.1rem 1.75rem; }  /* must clear the 62px fixed nav */
  .gd-body { padding: 2rem 1.1rem 3rem; }
  .gd-standfirst { font-size: 18px; }
  .gd-body h2 { font-size: 23px; margin-top: 2.25rem; }
  .gd-pull { font-size: 21px !important; }
}

/* --- Date calculator ------------------------------------------------------ */

.gd-calc {
  margin: 2rem 0 2.25rem;
  padding: 1.4rem 1.35rem 1.25rem;
  background: var(--gd-paper);
  border: 1px solid var(--gd-ink);
  border-top: 4px solid var(--gd-accent);
  box-shadow: 0 1px 0 var(--gd-rule);
}

.gd-calc-kicker {
  margin: 0 0 1.1rem !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

.gd-calc-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.gd-calc-field { flex: 1 1 11rem; min-width: 0; }
.gd-calc-field-sm { flex: 0 1 9.5rem; }

.gd-calc-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

.gd-calc-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.6rem;
  font-family: inherit;
  font-size: 15px;
  color: var(--gd-ink);
  background: var(--gd-paper);
  border: 1px solid var(--gd-ink-soft);
  border-radius: 0;
}

.gd-calc-field input:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 1px;
}

.gd-calc-out { margin-top: 0.25rem; }

.gd-calc-out:not(:empty) {
  padding: 1.1rem 1.1rem 0.9rem;
  background: var(--gd-wash);
}

.gd-calc-h {
  margin: 1.5rem 0 0.6rem;
  font-family: var(--gd-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

.gd-calc-h:first-child { margin-top: 0; }

.gd-calc-table { border-top: 1px solid var(--gd-rule); }

.gd-calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gd-rule);
}

.gd-calc-label {
  flex: 1 1 13rem;
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.gd-calc-note {
  display: block;
  font-size: 13px;
  color: var(--gd-ink-soft);
}

.gd-calc-date {
  flex: 0 1 auto;
  font-size: 15px;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: break-word;
}

.gd-calc-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--gd-paper);
  background: var(--gd-accent);
}

.gd-calc-sub,
.gd-calc-empty {
  margin: 0 0 0.75rem !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--gd-ink-soft);
}

.gd-calc-list {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.gd-calc-list li {
  margin-bottom: 0.3rem;
  font-size: 15px;
  line-height: 1.5;
}

.gd-calc-alert {
  margin: 1.25rem 0 0.25rem !important;
  padding: 0.85rem 1rem;
  font-size: 15px !important;
  line-height: 1.6 !important;
  background: var(--gd-paper);
  border-left: 3px solid var(--gd-accent);
}

.gd-calc-alert-quiet {
  font-size: 13px !important;
  color: var(--gd-ink-soft);
  border-left-color: var(--gd-rule);
}

.gd-calc-foot {
  margin: 1.25rem 0 0 !important;
  padding-top: 0.9rem;
  border-top: 1px solid var(--gd-rule);
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--gd-ink-soft);
}

@media (max-width: 480px) {
  .gd-calc { padding: 1.25rem 1.1rem 1rem; }
  .gd-calc-field,
  .gd-calc-field-sm { flex: 1 1 100%; }
  .gd-calc-row { flex-direction: column; gap: 0.15rem; }
  .gd-calc-date { font-size: 15px; }
}

/* --- Guides hub ----------------------------------------------------------- */

.gd-hub-list {
  margin: 0.5rem 0 2.5rem;
  padding: 0;
  list-style: none;
  counter-reset: gd-hub;
}

.gd-hub-item {
  counter-increment: gd-hub;
  position: relative;
  padding: 1.4rem 0 1.5rem 2.6rem;
  border-bottom: 1px solid var(--gd-rule);
}

.gd-hub-item:first-child { border-top: 1px solid var(--gd-rule); }

.gd-hub-item::before {
  content: counter(gd-hub, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.75rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gd-accent);
}

.gd-hub-kicker {
  margin: 0 0 0.3rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gd-ink-soft);
}

.gd-hub-title {
  margin: 0 0 0.5rem;
  font-family: var(--gd-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.gd-hub-title a {
  color: var(--gd-head);
  text-decoration: none;
  border-bottom: 1px solid var(--gd-rule);
}

.gd-hub-title a:hover,
.gd-hub-title a:focus-visible { border-bottom-color: var(--gd-accent); }

.gd-hub-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gd-ink-soft);
  overflow-wrap: break-word;
}

.gd-hub-empty {
  font-size: 15px;
  color: var(--gd-ink-soft);
}

/* --- More in this series --------------------------------------------------
   Scoped two classes deep and explicitly reset, so a global site rule for
   nav / ul / li cannot capture this block. */

.gd-guide .gd-more,
.gd-more {
  display: block;
  position: static;
  float: none;
  width: auto;
  max-width: none;
  margin: 2.5rem 0 0;
  padding: 1.4rem 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--gd-rule);
  text-align: left;
}

.gd-guide .gd-more-list,
.gd-guide .gd-more-item {
  display: block;
  position: static;
  float: none;
  width: auto;
}

.gd-guide .gd-more-list {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}

.gd-more-label {
  margin: 0 0 0.9rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gd-accent);
}

.gd-more-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.gd-more-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gd-rule);
}

.gd-more-link {
  display: block;
  font-family: var(--gd-serif);
  font-size: 18px;
  line-height: 1.35;
  color: var(--gd-head);
  text-decoration: none;
}

.gd-more-link:hover,
.gd-more-link:focus-visible { color: var(--gd-accent); }

.gd-more-blurb {
  display: block;
  margin-top: 0.25rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gd-ink-soft);
  overflow-wrap: break-word;
}

.gd-more-all {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.gd-more-all a {
  color: var(--gd-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 480px) {
  .gd-hub-item { padding-left: 2.2rem; }
  .gd-hub-title { font-size: 21px; }
  .gd-more-link { font-size: 17px; }
}

.gd-cta-note {
  margin: 0.9rem 0 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--gd-ink-soft);
}