/* ==========================================================================
   Wireframe stylesheet — LOW FIDELITY, INTENTIONAL.
   Greyscale only, system fonts only, bordered/dashed boxes only.
   Every value is a custom property ("--wf-*") per the wireframe spec, so a
   later visual-design phase can swap tokens without touching markup.
   ========================================================================== */

:root {
  /* 3.1 Greyscale palette — the ONLY colors on this site */
  --wf-ink:        #111111;
  --wf-ink-muted:  #494949;
  --wf-ink-subtle: #6a6a6a;
  --wf-line:       #767676;
  --wf-line-soft:  #a0a0a0;
  --wf-surface:    #ffffff;
  --wf-surface-2:  #f2f2f2;
  --wf-focus:      #111111;

  /* 3.2 Layout tokens */
  --wf-container-max: 72rem;
  --wf-container-pad: 1rem;
  --wf-container-pad-lg: 2rem;
  --wf-bp-md: 48rem;  /* 768px */
  --wf-bp-lg: 64rem;  /* 1024px */

  /* 3.3 Spacing scale */
  --wf-space-0: 0;
  --wf-space-1: 0.25rem;
  --wf-space-2: 0.5rem;
  --wf-space-3: 1rem;
  --wf-space-4: 1.5rem;
  --wf-space-5: 2rem;
  --wf-space-6: 3rem;
  --wf-space-7: 4rem;

  /* 3.4 Type */
  --wf-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wf-text-base: 1rem;
  --wf-text-lh: 1.5;
  --wf-measure: 66ch;
}

/* --------------------------------------------------------------------------
   Reset-lite / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--wf-font);
  font-size: var(--wf-text-base);
  line-height: var(--wf-text-lh);
  color: var(--wf-ink);
  background: var(--wf-surface);
  /* Reflow insurance: long unbroken strings (long case titles, meta rows)
     must not force horizontal scroll at narrow widths (320-375px). */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--wf-font);
  color: var(--wf-ink);
  line-height: 1.2;
}

p {
  margin: 0 0 var(--wf-space-3) 0;
}

a {
  color: var(--wf-ink);
}

ul {
  padding-left: 1.25rem;
}

/* 3.6 Focus style — global, non-negotiable, never removed */
:focus-visible {
  outline: 3px solid var(--wf-focus);
  outline-offset: 2px;
}

/* 3.7 Reduced motion guard — reserved for future transitions */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wf-container {
  max-width: var(--wf-container-max);
  margin-inline: auto;
  padding-inline: var(--wf-container-pad);
}

@media (min-width: 48rem) {
  .wf-container {
    padding-inline: var(--wf-container-pad-lg);
  }
}

.wf-prose-measure {
  max-width: var(--wf-measure);
}

.wf-box {
  border: 1px solid var(--wf-line);
  background: var(--wf-surface);
  padding: var(--wf-space-4);
}

/* --------------------------------------------------------------------------
   Skip link (4.1)
   -------------------------------------------------------------------------- */

.wf-skiplink {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 100;
  background: var(--wf-surface);
  color: var(--wf-ink);
  border: 2px solid var(--wf-ink);
  padding: var(--wf-space-2) var(--wf-space-3);
  font-family: var(--wf-font);
}

.wf-skiplink:focus {
  top: var(--wf-space-2);
  left: var(--wf-space-2);
}

/* --------------------------------------------------------------------------
   Header / primary nav (4.2)
   -------------------------------------------------------------------------- */

header {
  border-bottom: 1px solid var(--wf-line);
}

.wf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: var(--wf-space-3);
  gap: var(--wf-space-3);
}

.wf-brand {
  font-weight: 700;
  text-decoration: none;
  font-size: 1.125rem;
}

.wf-brand:hover {
  text-decoration: underline;
}

header nav[aria-label="Primary"] {
  display: flex;
  align-items: center;
  gap: var(--wf-space-3);
}

.wf-nav-toggle {
  font-family: var(--wf-font);
  font-size: var(--wf-text-base);
  background: var(--wf-surface);
  color: var(--wf-ink);
  border: 1px solid var(--wf-line);
  padding: var(--wf-space-2) var(--wf-space-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

#wf-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: var(--wf-space-1);
  width: 100%;
}

/* JS-off / no-JS resilience: nav list is always visible without JS.
   nav.js adds .wf-js-enabled to <html> once it runs, and only THEN does
   the toggle get the power to hide the list — so with JS disabled the
   list simply stays visible and usable (acceptance criterion 11). */
html:not(.wf-js-enabled) #wf-nav-list {
  display: flex;
}

html.wf-js-enabled .wf-nav-toggle {
  display: inline-block;
}

html.wf-js-enabled #wf-nav-list[data-open="true"] {
  display: flex;
}

html.wf-js-enabled #wf-nav-list[data-open="false"] {
  display: none;
}

#wf-nav-list li {
  display: block;
}

#wf-nav-list a {
  display: inline-block;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-block: var(--wf-space-2);
  text-decoration: none;
}

#wf-nav-list a:hover {
  text-decoration: underline;
}

#wf-nav-list a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

.wf-current-marker {
  margin-right: 0.25em;
}

@media (min-width: 48rem) {
  .wf-nav-toggle {
    display: none !important;
  }

  #wf-nav-list,
  html.wf-js-enabled #wf-nav-list {
    display: flex !important;
    flex-direction: row;
    width: auto;
    gap: var(--wf-space-4);
  }
}

/* --------------------------------------------------------------------------
   Footer (4.3)
   -------------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--wf-line);
  margin-top: var(--wf-space-7);
  padding-block: var(--wf-space-5);
  color: var(--wf-ink-muted);
}

footer nav[aria-label="Footer"] ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wf-space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}

footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 48rem) {
  footer nav[aria-label="Footer"] ul {
    flex-direction: row;
    gap: var(--wf-space-5);
  }
}

/* --------------------------------------------------------------------------
   Hero (Home + About positioning)
   -------------------------------------------------------------------------- */

.wf-hero {
  padding-block: var(--wf-space-6);
}

@media (min-width: 48rem) {
  .wf-hero {
    padding-block: var(--wf-space-7);
  }
}

.wf-hero h1 {
  font-size: 2rem;
  margin: 0 0 var(--wf-space-4) 0;
  max-width: var(--wf-measure);
}

@media (min-width: 48rem) {
  .wf-hero h1 {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Stat strip (5.2 / 5.3)
   -------------------------------------------------------------------------- */

.wf-stat-strip {
  background: var(--wf-surface-2);
  padding-block: var(--wf-space-5);
}

.wf-stat-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-space-3);
}

@media (min-width: 48rem) {
  .wf-stat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wf-space-4);
  }
}

.wf-stat-cell {
  background: var(--wf-surface);
  /* DOM order is label (dt) then value (dd) — correct for screen readers,
     which read the dt before its dd. Flex + order keeps the big value
     showing first visually, matching the spec's layout. */
  display: flex;
  flex-direction: column;
}

.wf-stat-value {
  order: -1;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--wf-space-1) 0;
}

.wf-stat-label {
  margin: 0;
  color: var(--wf-ink-muted);
}

/* --------------------------------------------------------------------------
   What I lead on — four proofs
   -------------------------------------------------------------------------- */

.wf-lead-on {
  padding-block: var(--wf-space-6);
}

@media (min-width: 48rem) {
  .wf-lead-on {
    padding-block: var(--wf-space-7);
  }
}

.wf-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-space-3);
  margin-top: var(--wf-space-4);
}

@media (min-width: 48rem) {
  .wf-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .wf-proof-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wf-proof-card h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--wf-space-2) 0;
}

.wf-proof-card p {
  margin: 0;
  color: var(--wf-ink-muted);
}

/* --------------------------------------------------------------------------
   Cases grid + card (5.3, 6.4)
   -------------------------------------------------------------------------- */

.wf-cases {
  padding-block: var(--wf-space-6);
}

@media (min-width: 48rem) {
  .wf-cases {
    padding-block: var(--wf-space-7);
  }
}

.wf-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-space-4);
  margin-top: var(--wf-space-4);
}

@media (min-width: 64rem) {
  .wf-case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wf-case-card {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}

.wf-case-card h3 {
  font-size: 1.25rem;
  margin: 0;
}

.wf-case-card h3 a {
  text-decoration: none;
}

.wf-case-card h3 a:hover {
  text-decoration: underline;
}

.wf-case-card p {
  margin: 0;
}

.wf-case-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-1);
  color: var(--wf-ink-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--wf-line-soft);
  padding-top: var(--wf-space-2);
  margin-top: auto;
}

.wf-case-card__cta {
  font-weight: 700;
}

/* Badge (6.4) — text chip, never color-coded */
.wf-badge {
  display: inline-block;
  border: 1px solid var(--wf-line);
  color: var(--wf-ink);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--wf-space-1) var(--wf-space-2);
  margin: 0 0 var(--wf-space-2) 0;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Placeholder-box mechanic (3.5)
   -------------------------------------------------------------------------- */

.wf-placeholder {
  border: 2px dashed var(--wf-line);
  background: var(--wf-surface);
  padding: var(--wf-space-5);
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-placeholder__label {
  color: var(--wf-ink-muted);
  font-family: var(--wf-font);
  text-align: center;
  margin: 0;
}

.wf-artifact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-space-4);
  margin-bottom: var(--wf-space-4);
}

@media (min-width: 64rem) {
  .wf-artifact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Case detail page
   -------------------------------------------------------------------------- */

.wf-case {
  padding-block: var(--wf-space-6);
}

@media (min-width: 48rem) {
  .wf-case {
    padding-block: var(--wf-space-7);
  }
}

.wf-case h1 {
  font-size: 2rem;
  max-width: var(--wf-measure);
  margin: 0 0 var(--wf-space-3) 0;
}

.wf-throughline {
  max-width: var(--wf-measure);
  font-style: italic;
  color: var(--wf-ink-muted);
}

.wf-meta-row {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
  margin: 0 0 var(--wf-space-4) 0;
  padding: var(--wf-space-3) 0;
  border-top: 1px solid var(--wf-line-soft);
  border-bottom: 1px solid var(--wf-line-soft);
}

.wf-meta-item {
  display: flex;
  gap: var(--wf-space-1);
}

.wf-meta-item dt {
  font-weight: 700;
}

.wf-meta-item dd {
  margin: 0;
  color: var(--wf-ink-muted);
}

@media (min-width: 48rem) {
  .wf-meta-row {
    flex-direction: row;
    gap: var(--wf-space-5);
  }

  .wf-meta-item {
    flex-direction: column;
    gap: 0;
  }
}

.wf-outcome-recap {
  max-width: var(--wf-measure);
  margin-bottom: var(--wf-space-5);
}

.wf-outcome-recap__label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--wf-ink-muted);
  margin: 0 0 var(--wf-space-2) 0;
}

.wf-outcome-recap ul {
  margin: 0;
}

.wf-prose {
  max-width: var(--wf-measure);
}

.wf-prose h2 {
  font-size: 1.5rem;
  margin-top: var(--wf-space-6);
}

.wf-prose > :first-child,
.wf-prose h2:first-of-type {
  margin-top: 0;
}

.wf-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
}

.wf-chip {
  border: 1px solid var(--wf-line);
  padding: var(--wf-space-1) var(--wf-space-2);
  font-size: 0.9rem;
}

.wf-case-nav {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-3);
  margin-top: var(--wf-space-6);
  padding-top: var(--wf-space-4);
  border-top: 1px solid var(--wf-line);
}

@media (min-width: 48rem) {
  .wf-case-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.wf-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-space-4);
  margin-top: var(--wf-space-4);
  max-width: none;
}

@media (min-width: 48rem) {
  .wf-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wf-pillar-card h3 {
  margin-top: 0;
}

.wf-credentials-list {
  columns: 1;
  margin: var(--wf-space-4) 0 0 0;
  padding-left: 1.25rem;
}

@media (min-width: 48rem) {
  .wf-credentials-list {
    columns: 2;
    column-gap: var(--wf-space-5);
  }
}

.wf-credentials-list li {
  break-inside: avoid;
  margin-bottom: var(--wf-space-2);
}