/*!
 * WPCursor Wireframe Kit
 * A reusable low-fidelity CSS framework for building quick prototypes.
 *
 * Everything is namespaced under the `.wf` root class, so this stylesheet
 * is completely inert on any page that does not opt in. Wrap a wireframe in:
 *
 *   <div class="wf">
 *     ... wireframe markup ...
 *   </div>
 *
 * Strictly grayscale: hierarchy is communicated through value, size, and
 * weight only. No hue. A wireframe should never be mistaken for a design.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

.wf {
  /* Grayscale palette (light -> dark) */
  --wf-bg:          #ffffff;
  --wf-surface:     #f4f4f4;
  --wf-fill:        #e6e6e6;
  --wf-fill-strong: #d2d2d2;
  --wf-line:        #b4b4b4;
  --wf-muted:       #8c8c8c;
  --wf-ink:         #4a4a4a;
  --wf-ink-strong:  #2b2b2b;

  /* Spacing scale */
  --wf-s1: 4px;
  --wf-s2: 8px;
  --wf-s3: 12px;
  --wf-s4: 16px;
  --wf-s5: 24px;
  --wf-s6: 32px;
  --wf-s7: 48px;
  --wf-s8: 64px;

  /* Geometry */
  --wf-radius: 4px;
  --wf-gap:    var(--wf-s4);
  --wf-border: 1px solid var(--wf-line);
  --wf-dashed: 1px dashed var(--wf-line);

  /* Type */
  --wf-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color: var(--wf-ink);
  font-family: var(--wf-font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--wf-bg);
}

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

/* ------------------------------------------------------------------ *
 * 2. Base elements (inside .wf only)
 * ------------------------------------------------------------------ */

.wf h1, .wf h2, .wf h3, .wf h4, .wf h5, .wf h6 {
  margin: 0 0 var(--wf-s3);
  color: var(--wf-ink-strong);
  font-weight: 700;
  line-height: 1.25;
}
.wf h1 { font-size: 32px; }
.wf h2 { font-size: 25px; }
.wf h3 { font-size: 20px; }
.wf h4 { font-size: 17px; }
.wf h5 { font-size: 15px; }
.wf h6 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

.wf p { margin: 0 0 var(--wf-s3); }
.wf p:last-child { margin-bottom: 0; }

.wf a { color: var(--wf-ink); text-decoration: underline; text-underline-offset: 2px; }

.wf small { color: var(--wf-muted); font-size: 12px; }

.wf ul, .wf ol { margin: 0 0 var(--wf-s3); padding-left: var(--wf-s5); }
.wf li { margin-bottom: var(--wf-s1); }

.wf img { max-width: 100%; display: block; }

.wf hr,
.wf-divider {
  border: 0;
  border-top: var(--wf-border);
  margin: var(--wf-s4) 0;
  height: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Layout
 * ------------------------------------------------------------------ */

.wf-container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--wf-s4);
}
.wf-container--narrow { max-width: 760px; }
.wf-container--wide   { max-width: 1320px; }

.wf-section {
  padding-block: var(--wf-s7);
}
.wf-section--tight { padding-block: var(--wf-s5); }
.wf-section--alt   { background: var(--wf-surface); }

/* 12-column grid */
.wf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wf-gap);
}
.wf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wf-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wf-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wf-col-1  { grid-column: span 1; }
.wf-col-2  { grid-column: span 2; }
.wf-col-3  { grid-column: span 3; }
.wf-col-4  { grid-column: span 4; }
.wf-col-5  { grid-column: span 5; }
.wf-col-6  { grid-column: span 6; }
.wf-col-7  { grid-column: span 7; }
.wf-col-8  { grid-column: span 8; }
.wf-col-9  { grid-column: span 9; }
.wf-col-10 { grid-column: span 10; }
.wf-col-11 { grid-column: span 11; }
.wf-col-12 { grid-column: span 12; }

/* Flex helpers */
.wf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wf-gap);
}
.wf-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-s3);
}
.wf-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s3);
}
.wf-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
 * 4. Placeholders
 * ------------------------------------------------------------------ */

/* Generic box */
.wf-box {
  background: var(--wf-fill);
  border: var(--wf-dashed);
  border-radius: var(--wf-radius);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-muted);
  font-size: 12px;
  text-align: center;
  padding: var(--wf-s3);
}
.wf-box--solid { border-style: solid; }
.wf-box--surface { background: var(--wf-surface); }

/* Image placeholder: classic crossed photo box */
.wf-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--wf-fill);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  background-image:
    linear-gradient(to top right,
      transparent calc(50% - 0.7px), var(--wf-line) calc(50% - 0.7px),
      var(--wf-line) calc(50% + 0.7px), transparent calc(50% + 0.7px)),
    linear-gradient(to top left,
      transparent calc(50% - 0.7px), var(--wf-line) calc(50% - 0.7px),
      var(--wf-line) calc(50% + 0.7px), transparent calc(50% + 0.7px));
}
.wf-img--square { aspect-ratio: 1 / 1; }
.wf-img--wide   { aspect-ratio: 16 / 9; }
.wf-img--tall   { aspect-ratio: 3 / 4; }
.wf-img--avatar {
  aspect-ratio: 1 / 1;
  width: 48px;
  border-radius: 50%;
}
.wf-img--avatar.wf-img--lg { width: 72px; }
.wf-img--avatar.wf-img--sm { width: 32px; }

/* Icon placeholder */
.wf-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--wf-fill-strong);
  border-radius: var(--wf-radius);
  flex: none;
}
.wf-icon--circle { border-radius: 50%; }
.wf-icon--sm { width: 16px; height: 16px; }
.wf-icon--lg { width: 40px; height: 40px; }

/* Single line of placeholder text */
.wf-bar {
  display: block;
  height: 10px;
  width: 100%;
  background: var(--wf-fill-strong);
  border-radius: 3px;
}
.wf-bar--title { height: 18px; }
.wf-bar--w25 { width: 25%; }
.wf-bar--w50 { width: 50%; }
.wf-bar--w75 { width: 75%; }

/* Paragraph block of placeholder text */
.wf-bars {
  --wf-bars-lines: 3;
  display: block;
  width: 100%;
  height: calc(var(--wf-bars-lines) * 10px + (var(--wf-bars-lines) - 1) * 9px);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--wf-fill-strong) 0, var(--wf-fill-strong) 10px,
    transparent 10px, transparent 19px
  );
  background-size: 100% 100%;
}
.wf-bars--2 { --wf-bars-lines: 2; }
.wf-bars--4 { --wf-bars-lines: 4; }
.wf-bars--5 { --wf-bars-lines: 5; }

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */

.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wf-s2);
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--wf-ink-strong);
  background: var(--wf-fill);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.wf-btn--primary {
  color: var(--wf-bg);
  background: var(--wf-ink-strong);
  border-color: var(--wf-ink-strong);
}
.wf-btn--ghost {
  background: transparent;
  border-style: dashed;
  color: var(--wf-ink);
}
.wf-btn--link {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  padding-inline: var(--wf-s1);
}
.wf-btn--sm  { padding: 6px 12px; font-size: 12px; }
.wf-btn--lg  { padding: 13px 26px; font-size: 16px; }
.wf-btn--block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ *
 * 6. Forms
 * ------------------------------------------------------------------ */

.wf-form { display: flex; flex-direction: column; gap: var(--wf-s4); }

.wf-field { display: flex; flex-direction: column; gap: var(--wf-s2); }

.wf-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-ink-strong);
}

.wf-input,
.wf-textarea,
.wf-select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--wf-ink);
  background: var(--wf-bg);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
}
.wf-textarea { min-height: 96px; resize: vertical; }
.wf-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--wf-muted) 50%),
                    linear-gradient(135deg, var(--wf-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.wf-input::placeholder,
.wf-textarea::placeholder { color: var(--wf-muted); }

.wf-checkbox,
.wf-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-s2);
  font-size: 14px;
}
.wf-checkbox::before,
.wf-radio::before {
  content: "";
  width: 16px;
  height: 16px;
  border: var(--wf-border);
  background: var(--wf-bg);
  flex: none;
}
.wf-checkbox::before { border-radius: 3px; }
.wf-radio::before    { border-radius: 50%; }
.wf-checkbox--checked::before,
.wf-radio--checked::before { background: var(--wf-ink-strong); }

.wf-help { font-size: 12px; color: var(--wf-muted); }

/* ------------------------------------------------------------------ *
 * 7. Navbar
 * ------------------------------------------------------------------ */

.wf-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s5);
  padding: var(--wf-s3) var(--wf-s4);
  border-bottom: var(--wf-border);
  background: var(--wf-bg);
}
.wf-navbar__brand {
  font-weight: 700;
  font-size: 17px;
  color: var(--wf-ink-strong);
  display: flex;
  align-items: center;
  gap: var(--wf-s2);
}
.wf-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--wf-s5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.wf-navbar__links a { text-decoration: none; color: var(--wf-ink); font-size: 14px; }
.wf-navbar__links .wf-is-active a { font-weight: 700; color: var(--wf-ink-strong); }
.wf-navbar__actions { display: flex; align-items: center; gap: var(--wf-s3); }

/* ------------------------------------------------------------------ *
 * 8. Hero
 * ------------------------------------------------------------------ */

.wf-hero {
  padding: var(--wf-s8) var(--wf-s4);
  background: var(--wf-surface);
  text-align: center;
}
.wf-hero__inner {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wf-s4);
}
.wf-hero--split {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wf-s6);
  align-items: center;
}
.wf-hero--split .wf-hero__inner { align-items: flex-start; margin: 0; }

/* ------------------------------------------------------------------ *
 * 9. Card
 * ------------------------------------------------------------------ */

.wf-card {
  display: flex;
  flex-direction: column;
  background: var(--wf-bg);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
}
.wf-card__media { border-bottom: var(--wf-border); }
.wf-card__media .wf-img { border: 0; border-radius: 0; }
.wf-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s3);
  padding: var(--wf-s4);
}
.wf-card__title { font-weight: 700; color: var(--wf-ink-strong); font-size: 17px; }
.wf-card__actions {
  display: flex;
  gap: var(--wf-s2);
  margin-top: auto;
  padding-top: var(--wf-s2);
}

/* ------------------------------------------------------------------ *
 * 10. Stat / KPI
 * ------------------------------------------------------------------ */

.wf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s1);
  padding: var(--wf-s4);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  background: var(--wf-bg);
}
.wf-stat__value { font-size: 28px; font-weight: 700; color: var(--wf-ink-strong); }
.wf-stat__label { font-size: 13px; color: var(--wf-muted); }

/* ------------------------------------------------------------------ *
 * 11. Table
 * ------------------------------------------------------------------ */

.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.wf-table th,
.wf-table td {
  text-align: left;
  padding: var(--wf-s3);
  border: var(--wf-border);
}
.wf-table th {
  background: var(--wf-surface);
  font-weight: 700;
  color: var(--wf-ink-strong);
}
.wf-table tbody tr:nth-child(even) { background: var(--wf-surface); }

/* ------------------------------------------------------------------ *
 * 12. List
 * ------------------------------------------------------------------ */

.wf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--wf-border);
  border-radius: var(--wf-radius);
}
.wf-list__item {
  display: flex;
  align-items: center;
  gap: var(--wf-s3);
  padding: var(--wf-s3) var(--wf-s4);
  border-bottom: var(--wf-border);
}
.wf-list__item:last-child { border-bottom: 0; }
.wf-list__item-body { flex: 1; display: flex; flex-direction: column; gap: var(--wf-s2); }

/* ------------------------------------------------------------------ *
 * 13. Tabs
 * ------------------------------------------------------------------ */

.wf-tabs__list {
  display: flex;
  gap: var(--wf-s1);
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--wf-border);
}
.wf-tabs__tab {
  padding: var(--wf-s3) var(--wf-s4);
  font-size: 14px;
  color: var(--wf-muted);
  border: var(--wf-border);
  border-bottom: 0;
  border-radius: var(--wf-radius) var(--wf-radius) 0 0;
  background: var(--wf-surface);
  margin-bottom: -1px;
  cursor: pointer;
}
.wf-tabs__tab--active {
  color: var(--wf-ink-strong);
  font-weight: 700;
  background: var(--wf-bg);
  border-bottom: 1px solid var(--wf-bg);
}
.wf-tabs__panel { padding: var(--wf-s4) 0; }

/* ------------------------------------------------------------------ *
 * 14. Accordion
 * ------------------------------------------------------------------ */

.wf-accordion {
  border: var(--wf-border);
  border-radius: var(--wf-radius);
}
.wf-accordion__item { border-bottom: var(--wf-border); }
.wf-accordion__item:last-child { border-bottom: 0; }
.wf-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s3);
  padding: var(--wf-s3) var(--wf-s4);
  font-weight: 600;
  color: var(--wf-ink-strong);
  cursor: pointer;
}
.wf-accordion__header::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--wf-muted);
  border-bottom: 2px solid var(--wf-muted);
  transform: rotate(45deg);
  flex: none;
}
.wf-accordion__body {
  padding: 0 var(--wf-s4) var(--wf-s4);
}
.wf-accordion__item--collapsed .wf-accordion__body { display: none; }
.wf-accordion__item--collapsed .wf-accordion__header::after { transform: rotate(-45deg); }

/* ------------------------------------------------------------------ *
 * 15. Breadcrumb
 * ------------------------------------------------------------------ */

.wf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-s2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--wf-muted);
}
.wf-breadcrumb li { margin: 0; }
.wf-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--wf-s2);
  color: var(--wf-line);
}
.wf-breadcrumb a { color: var(--wf-muted); }
.wf-breadcrumb .wf-is-current { color: var(--wf-ink-strong); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 16. Pagination
 * ------------------------------------------------------------------ */

.wf-pagination {
  display: flex;
  gap: var(--wf-s1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--wf-s2);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  font-size: 13px;
  background: var(--wf-bg);
  cursor: pointer;
}
.wf-pagination__page--active {
  background: var(--wf-ink-strong);
  color: var(--wf-bg);
  border-color: var(--wf-ink-strong);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 17. Badge / Tag
 * ------------------------------------------------------------------ */

.wf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wf-bg);
  background: var(--wf-muted);
  border-radius: 999px;
}
.wf-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-s1);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--wf-ink);
  background: var(--wf-fill);
  border: var(--wf-border);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * 18. Alert / Note
 * ------------------------------------------------------------------ */

.wf-alert {
  display: flex;
  gap: var(--wf-s3);
  padding: var(--wf-s3) var(--wf-s4);
  border: var(--wf-border);
  border-left: 4px solid var(--wf-muted);
  border-radius: var(--wf-radius);
  background: var(--wf-surface);
  font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * 19. Sidebar
 * ------------------------------------------------------------------ */

.wf-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--wf-gap);
}
.wf-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s1);
  padding: var(--wf-s4);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  background: var(--wf-surface);
}
.wf-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--wf-s3);
  padding: var(--wf-s3);
  border-radius: var(--wf-radius);
  font-size: 14px;
  color: var(--wf-ink);
  text-decoration: none;
  cursor: pointer;
}
.wf-sidebar__item--active {
  background: var(--wf-fill-strong);
  font-weight: 700;
  color: var(--wf-ink-strong);
}

/* ------------------------------------------------------------------ *
 * 20. Footer
 * ------------------------------------------------------------------ */

.wf-footer {
  padding: var(--wf-s7) var(--wf-s4) var(--wf-s5);
  border-top: var(--wf-border);
  background: var(--wf-surface);
}
.wf-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--wf-s6);
  max-width: 1140px;
  margin-inline: auto;
}
.wf-footer__col { display: flex; flex-direction: column; gap: var(--wf-s3); }
.wf-footer__col h6 { margin: 0; }
.wf-footer__bottom {
  max-width: 1140px;
  margin: var(--wf-s6) auto 0;
  padding-top: var(--wf-s4);
  border-top: var(--wf-border);
  font-size: 12px;
  color: var(--wf-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 21. Modal (depicted inline as an "open" state)
 * ------------------------------------------------------------------ */

.wf-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wf-s7) var(--wf-s4);
  background:
    repeating-linear-gradient(45deg,
      rgba(43, 43, 43, .08) 0, rgba(43, 43, 43, .08) 6px,
      transparent 6px, transparent 12px);
  border: var(--wf-dashed);
  border-radius: var(--wf-radius);
}
.wf-modal__dialog {
  width: 100%;
  max-width: 460px;
  background: var(--wf-bg);
  border: var(--wf-border);
  border-radius: var(--wf-radius);
  box-shadow: 0 8px 24px rgba(43, 43, 43, .18);
}
.wf-modal__header,
.wf-modal__footer {
  display: flex;
  align-items: center;
  gap: var(--wf-s3);
  padding: var(--wf-s4);
}
.wf-modal__header {
  justify-content: space-between;
  border-bottom: var(--wf-border);
  font-weight: 700;
  color: var(--wf-ink-strong);
}
.wf-modal__body { padding: var(--wf-s4); display: flex; flex-direction: column; gap: var(--wf-s3); }
.wf-modal__footer { justify-content: flex-end; border-top: var(--wf-border); }

/* ------------------------------------------------------------------ *
 * 22. Annotations (wireframe-only callouts)
 * ------------------------------------------------------------------ */

/* Sticky-note style note pinned next to a region */
.wf-note {
  display: block;
  padding: var(--wf-s3);
  font-size: 12px;
  font-style: italic;
  color: var(--wf-ink);
  background: var(--wf-surface);
  border: var(--wf-dashed);
  border-radius: var(--wf-radius);
}
.wf-note::before {
  content: "Note: ";
  font-style: normal;
  font-weight: 700;
}

/* Corner label naming a region */
.wf-label-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wf-bg);
  background: var(--wf-ink-strong);
  border-radius: 0 0 var(--wf-radius) 0;
}

/* Wrap any region to draw a labelled dashed outline around it */
.wf-region {
  position: relative;
  border: var(--wf-dashed);
  border-radius: var(--wf-radius);
  padding: var(--wf-s4);
}
.wf-region > .wf-label-tag {
  position: absolute;
  top: 0;
  left: 0;
}

/* ------------------------------------------------------------------ *
 * 23. Utilities
 * ------------------------------------------------------------------ */

.wf-mt-0 { margin-top: 0; }
.wf-mt-1 { margin-top: var(--wf-s2); }
.wf-mt-2 { margin-top: var(--wf-s3); }
.wf-mt-3 { margin-top: var(--wf-s4); }
.wf-mt-4 { margin-top: var(--wf-s5); }
.wf-mt-5 { margin-top: var(--wf-s6); }
.wf-mt-6 { margin-top: var(--wf-s7); }

.wf-mb-0 { margin-bottom: 0; }
.wf-mb-1 { margin-bottom: var(--wf-s2); }
.wf-mb-2 { margin-bottom: var(--wf-s3); }
.wf-mb-3 { margin-bottom: var(--wf-s4); }
.wf-mb-4 { margin-bottom: var(--wf-s5); }
.wf-mb-5 { margin-bottom: var(--wf-s6); }
.wf-mb-6 { margin-bottom: var(--wf-s7); }

.wf-gap-1 { gap: var(--wf-s2); }
.wf-gap-2 { gap: var(--wf-s3); }
.wf-gap-3 { gap: var(--wf-s4); }
.wf-gap-4 { gap: var(--wf-s5); }

.wf-text-left   { text-align: left; }
.wf-text-center { text-align: center; }
.wf-text-right  { text-align: right; }

.wf-muted  { color: var(--wf-muted); }
.wf-strong { color: var(--wf-ink-strong); font-weight: 700; }

.wf-w-full { width: 100%; }
.wf-w-half { width: 50%; }
.wf-w-auto { width: auto; }

.wf-flex-1 { flex: 1; }
.wf-hidden { display: none; }

/* ------------------------------------------------------------------ *
 * 24. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {
  .wf [class*="wf-col-"] { grid-column: 1 / -1; }

  .wf-grid--2,
  .wf-grid--3,
  .wf-grid--4 { grid-template-columns: 1fr; }

  .wf-hero--split { grid-template-columns: 1fr; }

  .wf-layout { grid-template-columns: 1fr; }

  .wf-navbar { flex-wrap: wrap; }
  .wf-navbar__links { gap: var(--wf-s3); }
}