/* ============================================================
   dd-fixes.css — design & UX patch layer for desmonddixon.com
   Loaded after the bundle CSS so equal-specificity rules win.
   Sections: 1 reveal safety net · 2 reduced motion · 3 focus
   4 contrast · 5 type legibility · 6 skip link · 7 footer
   ============================================================ */

/* 1 ─ Entrance-reveal safety net.
   Sections are hidden with inline `opacity: 0;` and only revealed
   when an IntersectionObserver fires. If it never fires (embedded
   webviews, older browsers, JS hiccups) the page stays black.
   CSS animations override inline styles, so any element still
   hidden 1.1s after entering that state fades in on its own. */
@keyframes dd-force-reveal {
  to { opacity: 1; transform: none; stroke-dashoffset: 0; }
}
[style*="opacity: 0;"] {
  animation: dd-force-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

/* 2 ─ Respect prefers-reduced-motion (previously absent). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [style*="opacity: 0;"] { opacity: 1 !important; transform: none !important; }
}

/* 3 ─ Visible keyboard focus (nav links previously had outline:none). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #e8652d !important;
  outline-offset: 3px;
}

/* 4 ─ Contrast: lift sub-AA muted text on the #0B0B0F ground.
   Alphas below ~45% blend to under 4.5:1. Hierarchy is preserved,
   floors are raised. */
.text-white\/20 { color: #ffffff6b; }
.text-white\/26 { color: #ffffff75; }
.text-white\/30 { color: #ffffff80; }
.text-white\/32 { color: #ffffff85; }
.text-white\/34 { color: #ffffff8a; }
.text-white\/35 { color: #ffffff8c; }
.text-white\/36 { color: #ffffff8f; }
.text-white\/38 { color: #ffffff94; }
.text-white\/40 { color: #ffffff99; }
.text-white\/42 { color: #ffffff9c; }
.text-white\/45 { color: #ffffff9e; }
.text-white\/48 { color: #ffffffa3; }
.text-white\/50 { color: #ffffffa8; }
.text-white\/52 { color: #ffffffab; }
.text-white\/54 { color: #ffffffad; }
.text-white\/55 { color: #ffffffb3; }
input::placeholder { color: #ffffff8c; }

/* 5 ─ Type legibility: the 10px letterspaced mono kickers were the
   hardest text on the site to read. One notch larger, sitewide. */
.text-\[10px\] { font-size: 11px; }

/* 5b ─ Cycle chart: let the plot fit the card at desktop widths instead
   of always cropping its right edge behind a horizontal scroll. */
.min-w-\[720px\] { min-width: 620px; }

/* 6 ─ Skip link (keyboard users can jump past the nav). */
.dd-skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: #e8652d;
  color: #fff;
  border-radius: 8px;
  font: 600 14px "Space Grotesk", system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.15s ease;
}
.dd-skip:focus { top: 12px; }

/* 7 ─ Footer (pages previously dead-ended with no footer at all). */
.dd-footer {
  background: #0b0b0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  padding: 56px 24px 28px;
}
.dd-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
}
.dd-footer-brand { max-width: 300px; }
.dd-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.dd-footer-logo img { border-radius: 8px; }
.dd-footer-logo span { display: flex; flex-direction: column; line-height: 1.25; }
.dd-footer-logo em {
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff8c;
}
.dd-footer-brand > p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #ffffff99; }
.dd-footer-nav { display: flex; flex-wrap: wrap; gap: 48px; }
.dd-footer-nav h2 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8652d;
  margin: 0 0 14px;
}
.dd-footer-nav a {
  display: block;
  color: #ffffffa8;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
}
.dd-footer-nav a:hover { color: #fff; }
.dd-footer-nav > div { min-width: 130px; max-width: 260px; }
.dd-footer-nav p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #ffffff99; }
.dd-footer-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid rgba(232, 101, 45, 0.5);
  border-radius: 8px;
  background: rgba(232, 101, 45, 0.12);
  color: #f6b08a !important;
  font-weight: 600;
}
.dd-footer-cta:hover { background: rgba(232, 101, 45, 0.22); }
.dd-footer-bottom {
  max-width: 80rem;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 12px;
  color: #ffffff8c;
}