/* ============================================================
   PEN International — Colors & Type
   ----------------------------------------------------------
   Source of truth: FINAL PEN International Visual Branding
   Toolkit (July 2025). Two-colour brand: Primary Black + PEN Red.
   Typeface: Sofia Pro (Black / Medium / Light). The wordmark
   in the official "PEN [Centre]" logo lock-up is set in
   Impakt (Impact) — see logo files in /assets.
   ============================================================ */

/* ---- Fonts -------------------------------------------------
   Sofia Pro is a paid typeface (Mostardesign / Monotype).
   For an open-source preview, we substitute Google Fonts
   "Poppins" — a geometric sans with the three weights PEN
   uses (Light 300 / Medium 500 / Black 900). Swap to Sofia
   Pro in production by replacing --font-sans below.
   ---------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

:root {
  /* ============ BRAND COLORS ============ */
  /* Two-colour brand, per the toolkit. */
  --pen-black:        #231F20;   /* Primary Black */
  --pen-red:          #BE1E2D;   /* PEN Red */
  --pen-white:        #FFFFFF;

  /* Tonal extensions (NOT in the toolkit) — used for surfaces,
     dividers and hover states. Kept tight so the brand stays
     two-tone in feel. */
  --pen-ink:          #14110F;   /* hairline darker than black, for true blacks */
  --pen-paper:        #F5F1EA;   /* warm off-white, for long-read body backgrounds */
  --pen-bone:         #ECE6DC;   /* card/divider tint on paper */
  --pen-red-deep:     #8E1622;   /* hover/active for PEN Red */
  --pen-red-tint:     #F4D8DC;   /* selection / soft accent only */

  /* Neutral scale derived from --pen-black */
  --ink-100: #F4F2F1;
  --ink-200: #E4E0DE;
  --ink-300: #C8C2BF;
  --ink-400: #948C89;
  --ink-500: #5E5654;
  --ink-600: #3A3534;
  --ink-700: #231F20;

  /* ============ SEMANTIC COLORS ============ */
  --fg-1:       var(--pen-black);
  --fg-2:       var(--ink-600);
  --fg-3:       var(--ink-500);
  --fg-muted:   var(--ink-400);
  --fg-on-dark: var(--pen-white);
  --fg-on-red:  var(--pen-white);
  --fg-link:    var(--pen-red);

  --bg-1:       var(--pen-white);
  --bg-2:       var(--pen-paper);
  --bg-3:       var(--pen-bone);
  --bg-dark:    var(--pen-black);
  --bg-accent:  var(--pen-red);

  --border-1:   var(--ink-200);
  --border-2:   var(--ink-300);
  --rule:       var(--pen-black);          /* default hairlines are black */
  --rule-thick: 4px;                       /* common PEN heavy rule */

  --accent:     var(--pen-red);
  --accent-hover: var(--pen-red-deep);

  /* ============ TYPEFACES ============ */
  --font-sans:      "Poppins", "Sofia Pro", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display:   "Impact", "Haettenschweiler", "Arial Narrow Bold", "Anton",
                    var(--font-sans);
  /* No mono in brand — kept for code samples / data only */
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============ TYPE SCALE ============ */
  /* Three weights, per toolkit: Black (900), Medium (500), Light (300). */
  --w-display:  900;
  --w-heading:  900;
  --w-sub:      500;
  --w-body:     300;
  --w-body-em:  500;

  /* Sizes — print-tight, condensed campaign layouts. */
  --fs-display:  clamp(56px, 9vw, 128px);   /* hero / poster */
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(28px, 3.2vw, 40px);
  --fs-h3:       20px;
  --fs-eyebrow:  12px;                      /* tracked, uppercase */
  --fs-body:     17px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;

  /* Tracking — PEN sets headings with WIDE letter-spacing
     (see "H E A D I N G", "S U B H E A D I N G" in the toolkit). */
  --tr-headline:   0.18em;
  --tr-eyebrow:    0.22em;
  --tr-button:     0.14em;
  --tr-body:       0;

  /* Line heights */
  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-body:    1.55;
  --lh-tight:   1.2;

  /* ============ SPACING ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============ RADII & SHADOWS ============ */
  /* PEN is a print-led, square-edge brand. Radii are minimal. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(35,31,32,.06), 0 2px 6px rgba(35,31,32,.06);
  --shadow-2: 0 10px 30px rgba(35,31,32,.12);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,.18);

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-quick:   120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ============ LAYOUT ============ */
  --container:  1200px;
  --gutter:     32px;
}

/* ============================================================
   Element defaults — keep these scoped (.pen) so the design
   system can be dropped into a host page without leaking.
   ============================================================ */
.pen {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  background: var(--bg-1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.pen .display,
.pen h1.display {
  font-family: var(--font-display);
  font-weight: 400;          /* Impact has only one weight */
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-transform: lowercase; /* matches the "pen" wordmark style */
}

.pen h1, .pen .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.pen h2, .pen .h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-headline);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.pen h3, .pen .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-sub);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-headline);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.pen .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-sub);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--pen-red);
}

.pen p, .pen .body {
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.pen strong, .pen .body-em { font-weight: var(--w-body-em); color: var(--fg-1); }

.pen a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-quick) var(--ease-out);
}
.pen a:hover { color: var(--pen-red-deep); text-decoration-thickness: 2px; }

.pen hr {
  border: 0;
  border-top: var(--rule-thick) solid var(--pen-black);
  margin: var(--space-6) 0;
}

/* ============ COMPONENT PRIMITIVES ============ */

/* Button — PEN buttons are rectangular, ALL-CAPS, tracked. */
.pen .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--w-sub);
  font-size: 13px;
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--pen-black);
  border-radius: var(--radius-0);
  background: var(--pen-black);
  color: var(--pen-white);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.pen .btn:hover     { background: var(--pen-red); border-color: var(--pen-red); color: var(--pen-white); }
.pen .btn:active    { transform: translateY(1px); box-shadow: var(--shadow-press); }

.pen .btn--red      { background: var(--pen-red); border-color: var(--pen-red); }
.pen .btn--red:hover{ background: var(--pen-red-deep); border-color: var(--pen-red-deep); }

.pen .btn--ghost {
  background: transparent;
  color: var(--pen-black);
}
.pen .btn--ghost:hover { background: var(--pen-black); color: var(--pen-white); }

.pen .btn--on-dark {
  background: transparent;
  border-color: var(--pen-white);
  color: var(--pen-white);
}
.pen .btn--on-dark:hover {
  background: var(--pen-white);
  color: var(--pen-black);
}

/* Tag / pill (only used for taxonomy on news cards) */
.pen .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-sub);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--pen-black);
  color: var(--pen-black);
  background: transparent;
}
.pen .tag--red  { color: var(--pen-white); background: var(--pen-red); border-color: var(--pen-red); }
.pen .tag--solid{ color: var(--pen-white); background: var(--pen-black); }

/* Card — flat, hairline border. */
.pen .card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-0);
  padding: var(--space-5);
}
.pen .card--bordered-black { border: var(--rule-thick) solid var(--pen-black); }
.pen .card--red { background: var(--pen-red); color: var(--pen-white); border: 0; }
.pen .card--dark{ background: var(--pen-black); color: var(--pen-white); border: 0; }

/* Form field */
.pen .field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--pen-white);
  border: 2px solid var(--pen-black);
  border-radius: var(--radius-0);
  outline: none;
}
.pen .field::placeholder { color: var(--fg-muted); }
.pen .field:focus { border-color: var(--pen-red); }