/* ============================================================
   INDUSTRIAL UNION — Design System
   colors_and_type.css
   Foundations: color tokens + type tokens + semantic styles
   House style: Swiss/editorial brutalism — monospace labels,
   oversized neo-grotesque display, hairline bracket rules,
   near-monochrome paper-and-ink, clean studio photography.
   ------------------------------------------------------------
   Webfonts (real @font-face) are pulled from Google Fonts via
   the @import below so the families resolve everywhere this
   stylesheet is loaded. If the user uploads licensed font
   files, swap these @imports for local @font-face rules.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");


:root {
  /* ---- CORE NEUTRALS (the brand is essentially monochrome) ---- */
  --iu-paper:        #FBFBF9;  /* page background — warm off-white  */
  --iu-paper-2:      #F4F3EF;  /* subtle raised panel               */
  --iu-pill:         #ECEBE6;  /* utility pill / chip fill          */
  --iu-line:         #D7D6D0;  /* 1px hairline rules & brackets     */
  --iu-muted:        #9B9B96;  /* placeholder / tertiary text       */
  --iu-ink-2:        #56564F;  /* secondary text                    */
  --iu-ink:          #111110;  /* primary text — near-black ink     */
  --iu-black:        #000000;  /* footer ground / inverted surface  */
  --iu-on-black:     #FFFFFF;  /* text on black                     */

  /* ---- SEMANTIC ROLES ---- */
  --iu-bg:           var(--iu-paper);
  --iu-fg:           var(--iu-ink);
  --iu-fg-soft:      var(--iu-ink-2);
  --iu-fg-faint:     var(--iu-muted);
  --iu-border:       var(--iu-line);
  --iu-link:         var(--iu-ink);

  /* ---- IMAGE / PHOTOGRAPHY PALETTE ----
     These never appear as UI fills. Colour in the brand comes
     almost entirely from photography: warm birch plywood, the
     terracotta resin floors, forest-green textiles, documentary
     B&W. Documented here so generated imagery stays on-tone. */
  --iu-img-plywood:    #E7D6B4;
  --iu-img-terracotta: #C96A4A;
  --iu-img-forest:     #2F4A3A;
  --iu-img-sky:        #6FA3C0;
  --iu-img-sand:       #D9C6A5;

  /* ---- TYPE FAMILIES ---- */
  /* Display & text — neo-grotesque. Real Helvetica Neue where
     available, Hanken Grotesk (Google) as the cross-platform
     web fallback. */
  --iu-font-sans:  "Helvetica Neue", "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --iu-font-display: var(--iu-font-sans);
  /* Labels, numerals, nav, captions — monospace */
  --iu-font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Wordmark / editorial accent — transitional serif */
  --iu-font-serif: "Times New Roman", Georgia, "Times", serif;

  /* ---- TYPE SCALE (fluid) ---- */
  --iu-text-display: clamp(3.5rem, 12vw, 9rem);   /* hero wordline   */
  --iu-text-h1:      clamp(2rem, 4.2vw, 3.25rem);  /* big statement   */
  --iu-text-h2:      clamp(1.5rem, 2.6vw, 2.1rem); /* sub-statement   */
  --iu-text-h3:      1.3rem;
  --iu-text-body:    1.0625rem;                    /* 17px body       */
  --iu-text-small:   0.9375rem;
  --iu-text-label:   0.8125rem;                    /* mono labels     */
  --iu-text-micro:   0.6875rem;

  /* ---- SPACING (8px base, generous editorial margins) ---- */
  --iu-space-1: 4px;
  --iu-space-2: 8px;
  --iu-space-3: 16px;
  --iu-space-4: 24px;
  --iu-space-5: 40px;
  --iu-space-6: 64px;
  --iu-space-7: 96px;
  --iu-space-8: 144px;
  --iu-gutter:  clamp(20px, 4vw, 64px); /* @kind spacing */

  /* ---- RADII ---- *
     Two radii only: pills (full) and the bracket-rule corner.
     Images, cards and panels are hard-edged (radius 0). */
  --iu-radius-bracket: 14px;
  --iu-radius-pill:    999px;

  /* ---- HAIRLINE ---- */
  --iu-hairline: 1px solid var(--iu-line);

  /* ---- MOTION ---- *
     Restrained. Opacity + small translate, no bounce/overshoot. */
  --iu-ease:     cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --iu-dur:      360ms; /* @kind other */
  --iu-dur-fast: 180ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.iu-display {
  font-family: var(--iu-font-display);
  font-size: var(--iu-text-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--iu-fg);
  margin: 0;
  text-wrap: balance;
}
.iu-h1 {
  font-family: var(--iu-font-sans);
  font-size: var(--iu-text-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--iu-fg);
  margin: 0;
  text-wrap: pretty;
}
.iu-h2 {
  font-family: var(--iu-font-sans);
  font-size: var(--iu-text-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--iu-fg);
  margin: 0;
  text-wrap: pretty;
}
.iu-body {
  font-family: var(--iu-font-sans);
  font-size: var(--iu-text-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--iu-fg);
  margin: 0;
  text-wrap: pretty;
}
.iu-body--soft { color: var(--iu-fg-soft); }

/* Monospace label — the signature voice of the system.
   Used for nav, section eyebrows, numbers, captions, links. */
.iu-label {
  font-family: var(--iu-font-mono);
  font-size: var(--iu-text-label);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--iu-fg);
  margin: 0;
}
.iu-label--soft { color: var(--iu-fg-faint); }

.iu-wordmark {
  font-family: var(--iu-font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--iu-fg);
}

/* ============================================================
   SIGNATURE COMPONENT: BRACKET RULE
   A hairline that turns up rounded corners at its ends, framing
   a column from above. Two side-by-side brackets create the
   label / content split seen across the site.
   ============================================================ */
.iu-bracket {
  height: 16px;
  border: var(--iu-hairline);
  border-bottom: none;
  border-radius: var(--iu-radius-bracket) var(--iu-radius-bracket) 0 0;
}
.iu-bracket-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 3fr;
  gap: var(--iu-space-3);
  align-items: end;
}

/* ============================================================
   LINKS & ARROW GLYPHS
   ============================================================ */
.iu-link {
  font-family: var(--iu-font-mono);
  font-size: var(--iu-text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iu-link);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.iu-link--underline { text-decoration: underline; text-underline-offset: 3px; }
.iu-link:hover { opacity: 0.55; }

/* Utility pill (nav chips: Index, Info, Subscribe) */
.iu-pill {
  font-family: var(--iu-font-mono);
  font-size: var(--iu-text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iu-fg);
  background: var(--iu-pill);
  border: none;
  border-radius: var(--iu-radius-pill);
  padding: 7px 16px;
  cursor: pointer;
  transition: background var(--iu-dur-fast) var(--iu-ease);
}
.iu-pill:hover { background: #E2E1DB; }

/* Field (newsletter) — underline only, no box */
.iu-field {
  font-family: var(--iu-font-mono);
  font-size: var(--iu-text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--iu-fg);
  background: transparent;
  border: none;
  border-bottom: var(--iu-hairline);
  padding: 8px 2px;
  outline: none;
}
.iu-field::placeholder { color: var(--iu-fg-faint); }
.iu-field:focus { border-bottom-color: var(--iu-ink); }

/* Inverted (black) surface */
.iu-invert {
  background: var(--iu-black);
  color: var(--iu-on-black);
}
.iu-invert .iu-label,
.iu-invert .iu-body,
.iu-invert .iu-link { color: var(--iu-on-black); }

/* Documentary image treatment helpers */
.iu-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iu-img--bw { filter: grayscale(1) contrast(1.05); }