/* =========================================================================
   Bold
   Flat black on off-white, oversized geometric display type, hard edges,
   thick rules, no shadows anywhere. The accent is used as a solid block
   rather than a highlight.
   ========================================================================= */

:root {
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ink: #111111;
  --ink-soft: #4a4a4a;
  --ink-faint: #6f6f6f;
  --paper: #fbfaf7;
  --paper-alt: #efece5;
  --line: #111111;
  --surface-dark: #111111;
  --on-dark-soft: #d6d3cc;
  --on-dark-faint: #96928a;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, white);

  /* Display type is the whole point of this theme, so it is set far larger and
     far tighter than the others. */
  --h1-size: clamp(2.8rem, 1.5rem + 6vw, 6rem);
  --h2-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  --h3-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem);
  --heading-weight: 700;
  --heading-leading: 0.95;
  --heading-tracking: -.035em;
  --lede-size: 1.2rem;
  --body-leading: 1.6;

  --section-y: clamp(4rem, 8vw, 8rem);
  --container: 1280px;

  /* Everything is square, and borders are thick enough to read as drawn. */
  --radius: 0;
  --radius-sm: 0;
  --border-width: 2px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --btn-radius: 0;
  --btn-padding: 1rem 1.9rem;
  --btn-padding-sm: .65rem 1.2rem;
  --btn-size: .92rem;
  --btn-weight: 700;
  --btn-tracking: .08em;
  --btn-transform: uppercase;
  --btn-shadow: none;
  --btn-border-width: 2px;
  --btn-lift: 0;

  --eyebrow-color: var(--ink);
  --eyebrow-size: .74rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .22em;

  --header-height: 84px;
  --header-bg: var(--paper);
  --header-blur: none;
  --header-border: 2px solid var(--ink);
  --nav-size: .88rem;
  --nav-weight: 600;
  --nav-tracking: .06em;
  --nav-transform: uppercase;
  --nav-radius: 0;
  --nav-hover-bg: var(--ink);
  --nav-hover-fg: var(--paper);
  --brand-size: 1.5rem;
  --brand-family: var(--font-display);

  --hero-min-height: clamp(600px, 88vh, 900px);
  --hero-max-width: 900px;
  --hero-overlay: linear-gradient(180deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.6) 50%, rgba(17,17,17,.85) 100%);

  --card-bg: var(--paper);
  --card-border: 2px solid var(--ink);
  --card-radius: 0;
  --card-pad: clamp(1.6rem, 2.5vw, 2.25rem);
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-lift: -6px;
  --card-hover-border: var(--accent);
  --icon-bg: var(--accent);
  --icon-fg: #fff;
  --icon-radius: 0;
  --icon-size: 56px;

  --input-radius: 0;
  --input-border: 2px solid var(--ink);
  --avatar-radius: 0;
  --social-radius: 0;
  --to-top-radius: 0;
  --quote-style: normal;

  --footer-fg: var(--on-dark-soft);

  --step-radius: 0;
  --step-size: 56px;
  --step-bg: var(--accent);
  --stat-align: left;
  --stat-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  --stat-color: var(--ink);
  --member-photo-radius: 0;
  --media-text-ratio: 1 / 1;
  --logo-filter: grayscale(1) contrast(1.4);
  --logo-opacity: .8;
}

/* The accent is applied as a solid block behind the eyebrow rather than as
   colored text, which is the single most recognisable trait of this theme. */
.eyebrow {
  background: var(--accent);
  color: #fff;
  padding: .35rem .7rem;
  margin-bottom: 1.25rem;
}
.hero .eyebrow { color: #fff; }

/* Buttons get a hard offset outline on hover instead of a lift-and-glow. */
.btn { position: relative; }
.btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn--ghost { --btn-fg: #fff; border-color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: 6px 6px 0 var(--accent); }

.card:hover { box-shadow: 8px 8px 0 var(--accent); }

/* Big numbered rules under section headings. */
.section-head { border-bottom: 2px solid var(--ink); padding-bottom: 1.25rem; }

.testimonial blockquote { font-size: 1.2rem; font-weight: 500; }
.faq-item { border-bottom-width: 2px; }
.faq-item summary { font-size: 1.3rem; }
.site-footer { border-top: 2px solid var(--ink); }

/* The one place this theme breaks its right angles. The dark band cuts its own
   top edge on a slant, so the wedge shows whatever color is above it and the
   seam stays correct wherever the band lands. The inset buys back the room the
   slant eats so the heading never sits inside it. */
.section--dark {
  --section-clip: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
  --section-clip-inset: 3.5rem;
}

/* Numbers are the loudest thing on the page in this theme. */
.stat { border-top: 4px solid var(--ink); padding-top: 1rem; }
.stat-value { letter-spacing: -.05em; }
.member-photo { border: 2px solid var(--ink); }
.media-text-figure { border: 2px solid var(--ink); border-radius: 0; }
.map-frame { border-radius: 0; border: 2px solid var(--ink); }
.prose blockquote { border-left-width: 4px; font-weight: 500; }
.socials a { border: 2px solid rgba(255,255,255,.35); background: transparent; }
.to-top { border: 2px solid var(--ink); background: var(--accent); }