/* ============================================================
   Dale Pues Software LLC — company site
   Built to brand/design-guide.html v1.0 (August 2026).

   Palette   §06 — the four approved colours, nothing else.
   Type      §07 — Montserrat / Inter / Space Grotesk.
   Lockups   §03 — the --u module engine, ported verbatim.
   Clear sp. §04 — 14u on all four sides of the symbol.
   ============================================================ */

:root {
  /* §06 Colour — complete approved list */
  --ink:   #101418;   /* Primary. Use instead of pure black on screen. */
  --paper: #FAFAF8;   /* Default background. */
  --panel: #FFFFFF;
  --lava:  #D6452B;   /* Single accent. Interface and print only. */
  --ash:   #6B7280;   /* Secondary text, rules, captions. */

  /* Rules and washes, taken from the guide's own document chrome */
  --line:  #E4E4DF;
  --line2: #D3D3CC;
  --fill:  #EFEFE9;
  --tint:  #FDF6F1;   /* the guide's .flag wash — a warm ground for Lava */

  --max: 1080px;

  /* Height of the sticky header. Deterministic, because the header is sized by
     the lockup symbol: 55 x --u(1.05) = 57.75px, plus 18px padding top and
     bottom, plus the 1px rule. Keep this in step with .header-inner padding
     and .brand-link --u if either changes. */
  --header-h: 95px;
}

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

html { scroll-behavior: smooth; }

/* Anchor targets must clear the sticky header, or jumping to a section parks
   its heading underneath the header. Only a small nudge is added on top of the
   header height — each section already carries 66px of its own top padding,
   which supplies the breathing room below the rule. */
main[id],
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Motion is sparing by design; this removes what little there is. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ---------- §07 Typography ---------- */
h1, h2, h3 {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;      /* guide: headings -0.02em */
  line-height: 1.12;
  margin: 0 0 14px;
}
h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -0.028em; }
h2 { font-size: clamp(23px, 3vw, 27px); letter-spacing: -0.018em; }
h3 { font-size: 16px; margin-bottom: 10px; }

p { margin: 0 0 16px; color: #2b2b2b; }
.intro, .lede { max-width: 66ch; }

/* Numerals & code — Space Grotesk 400, tabular figures (§07 flag) */
.mono {
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, monospace;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
  margin: 0 0 14px;
}

/* Section number, per the guide's own .sec-num — enlarged and set in Lava.
   At 42px it is unambiguously "large text", so the 4.23:1 it measures on
   paper clears the 3:1 bar. Never shrink this below 24px while it is Lava. */
.sec-num {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 42px;
  font-weight: 700;
  color: var(--lava);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 14px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Skip link & focus ---------- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lava);   /* 4.23:1 on paper — clears the 3:1 non-text bar */
  outline-offset: 3px;
  border-radius: 2px;
}
.footer a:focus-visible { outline-color: #fff; }

/* ============================================================
   §03 LOCKUPS — the module engine, ported from the guide.
   u = cone height / 55. Montserrat metrics: cap 0.700em.
   ============================================================ */
.lk { --u: 2px; line-height: 1; color: inherit; }
.lk .sym {
  width: calc(var(--u) * 94);
  height: calc(var(--u) * 55);
  fill: currentColor;
  display: block;
}
.lk .n {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  font-size: calc(var(--u) * 20.714);
  display: block;
}
.lk .s {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-indent: 0.30em;          /* cancels the trailing letter-space */
  white-space: nowrap;
  font-size: calc(var(--u) * 5.714);
  margin-top: calc(var(--u) * 1.663);
  opacity: 0.92;
  display: block;
}
/* Stacked — primary (§03: default wherever there is vertical room) */
.lk-v { display: flex; flex-direction: column; align-items: flex-start; }
.lk-v .n { margin-top: calc(var(--u) * 3.717); }
/* Horizontal — exists for shallow navigation bars */
.lk-h { display: flex; align-items: center; gap: calc(var(--u) * 11); }
.lk-h .txt { text-align: left; }

/* §04 Clear space — 14u on all four sides. Enforced by the surrounding
   margins rather than padding, so the mark's left edge still aligns to the
   text column. Each lockup's spacing below is checked against its own 14u:
     hero    --u 2.4  -> 14u = 33.6px, margin-bottom 40px   ok
     header  --u 1.05 -> 14u = 14.7px, padding 18px / gap 24px  ok
     footer  --u 0.95 -> 14u = 13.3px, gap 32px / padding 52px  ok */

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}
/* --u 1.05 -> symbol 98.7px, lockup ~225px: clears the 150px horizontal minimum */
.brand-link { text-decoration: none; display: block; color: var(--ink); }
.brand-link .lk { --u: 1.05px; }

.main-nav { display: flex; align-items: center; gap: 20px; }
.nav-collapse { display: flex; align-items: center; }
.nav-links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  padding: 6px 1px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.nav-links a:hover { border-color: var(--lava); }

/* ---------- Buttons ----------
   White on Lava measures 4.43:1. That is under the 4.5:1 required for
   normal-size text but comfortably over the 3:1 required for large text,
   which WCAG defines as >=18.66px at weight 700. So the Lava button sets
   its label at 19px/700 and that size is load-bearing, not decorative —
   do not reduce it. The compact header button stays Ink, where the small
   14px label still measures 18.5:1. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--lava);
  color: #fff;
  font-size: 19px;      /* required for the 3:1 large-text threshold */
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 15px 28px;
}
/* Hover swaps Lava for Ink rather than darkening it, so no fifth colour
   is introduced and contrast improves to 18.5:1 on the way. */
.btn-primary:hover { background: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }            /* 18.5:1 */
.btn-ink:hover { background: #2b2b2b; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-small { padding: 9px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 8px;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero / cover ----------
   Mirrors the guide's own cover: tall, left-aligned, closed by a 2px ink rule. */
.hero {
  padding: 88px 0 72px;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
/* A short Lava tick riding the cover rule — echoes the channel leaving the
   crater at 72% across, rather than sitting centred. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 128px; height: 2px;
  background: var(--lava);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 48px;
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-art { min-width: 0; }
/* overflow:hidden is deliberate — the channel is drawn past the right edge of
   the viewBox and clips there, so it reads as leaving the frame rather than
   stopping. It also guarantees the art can never widen the page. */
.crater { display: block; width: 100%; height: auto; overflow: hidden; }

/* Motion, sparingly: the channel draws itself once, nothing else moves.
   Default state is fully drawn, so reduced-motion users simply see the
   finished artwork with no animation declared at all. */
@media (prefers-reduced-motion: no-preference) {
  .crater .ch {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: channel-draw 1.6s cubic-bezier(.22,.61,.36,1) forwards .25s;
  }
  .crater .vent { opacity: 0; animation: vent-in .5s ease-out forwards 1.1s; }
  @keyframes channel-draw { to { stroke-dashoffset: 0; } }
  @keyframes vent-in { to { opacity: 1; } }
}

.hero h1 { max-width: 18ch; margin-bottom: 20px; }
.hero .lede { font-size: 17px; color: #2b2b2b; max-width: 60ch; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.quiet-link {
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}
.quiet-link:hover { text-decoration-color: var(--ink); }

/* ---------- Sections ---------- */
section { padding: 66px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }
.section-head { margin-bottom: 30px; }

/* §01 About */
.about-body { font-size: 17px; max-width: 66ch; }

/* §02 Product — guide panel: white, 1px --line, 10px radius */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
}
/* Warm ground + 3u Lava rule, borrowing the guide's .flag construction.
   Body copy stays Ink on the tint (16:1), so the warmth costs no legibility. */
.product-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 34px 34px 34px 31px;
  background: var(--tint);
  border: none;
  border-left: 3px solid var(--lava);
  border-radius: 0 10px 10px 0;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);              /* ink, not lava: small text needs 4.5:1 */
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lava);        /* the accent, doing accent work */
  flex: none;
}
.product-panel h3 { font-size: 21px; margin-bottom: 10px; }
.product-panel p { margin-bottom: 0; max-width: 54ch; }

/* §03 Principles */
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle {
  border-top: 3px solid var(--lava);
  border-radius: 0 0 10px 10px;
  transition: background-color 0.15s ease;
}
.principle:hover { background: var(--tint); }
/* 30px puts these over the 24px large-text line, so Lava is safe here */
.principle .num {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--lava);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 16px;
}
.principle h3 { margin-bottom: 8px; }
.principle p { font-size: 14.5px; margin-bottom: 0; }

/* §04 Contact */
.contact-email {
  display: inline-block;
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 23px);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--lava);
  padding-bottom: 4px;
  margin-top: 6px;
  word-break: break-word;
}
.contact-email:hover { border-bottom-width: 3px; padding-bottom: 3px; }

/* ---------- Footer — approved reversed application (§06) ---------- */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 52px 0 44px;
  border-top: 3px solid var(--lava);
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer .lk { --u: 0.95px; color: #fff; }
.footer-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  flex-wrap: wrap;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.75);   /* ~10.6:1 on ink */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--lava); }
.footer-copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);    /* ~7.1:1 on ink */
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .principles-grid { grid-template-columns: 1fr; }
  .product-panel { grid-template-columns: 1fr; }
  .product-panel .cta { justify-self: start; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  /* The header stops being sticky here, so anchors no longer need to clear it. */
  .site-header { position: relative; }
  main[id],
  section[id] { scroll-margin-top: 20px; }
  .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
    box-shadow: 0 8px 20px rgba(16, 20, 24, 0.06);
  }
  .main-nav.open .nav-collapse { display: flex; }
  .nav-links { flex-direction: column; gap: 0; width: 100%; }
  .nav-links a { display: block; padding: 11px 0; }
  .nav-toggle { display: flex; }

  .hero { padding: 48px 0 52px; }
  .hero::after { width: 92px; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { order: 2; max-width: 460px; }
  .hero h1 { max-width: 22ch; }
  section { padding: 48px 0; }
  .product-panel { padding: 26px 26px 26px 23px; }
  /* 34px and 26px both stay above the 24px large-text line for Lava */
  .sec-num { font-size: 34px; }
  .principle .num { font-size: 26px; }
}

@media (max-width: 480px) {
  .brand-link .lk { --u: 0.92px; }  /* ~197px wide, still over the 150px minimum */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .quiet-link { align-self: flex-start; }
  .footer .lk { --u: 0.85px; }
}