/* JD Talent — shared brand foundation. Link from every page. */

@font-face {
  font-family: "JD Talent Display";
  src: url("../fonts/JDTalentDisplay.otf") format("opentype"),
       url("../fonts/JDTalentDisplay.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Brand palette — exact */
  --jd-black:  #0B0F0E;
  --jd-pink:   #FF4DB8;
  --jd-blue:   #2962FF;
  --jd-green:  #00B24C;
  --jd-yellow: #FFE600;
  --jd-cream:  #E6E7DF;
  --jd-white:  #FFFFFF;

  /* Roles */
  --paper: var(--jd-cream);
  --ink:   var(--jd-black);

  /* Type */
  --font-display: "JD Talent Display", "Arial Black", system-ui, sans-serif;
  --font-body: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tracking-tight: -0.1em; /* Figma -100 */

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display font is a punctuation accent — heroes, big numbers, pull quotes.
   Section headings use refined Helvetica for a classier, editorial feel. */
h1, .display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h2, h3 {
  font-family: var(--font-helvetica);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

a { color: inherit; }

/* Helvetica Bold, tight tracking (Figma spacing -100 = -0.1em).
   Reusable supporting display style — labels, marquees, eyebrows.
   Usage: class="t-helv-tight" */
.t-helv-tight {
  font-family: var(--font-helvetica);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Signature 8-point asterisk — flat brand starburst.
   Usage: <span class="jd-star" style="--c:var(--jd-pink); width:64px; height:64px"></span> */
.jd-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--c, var(--jd-pink));
  -webkit-mask: var(--jd-star-mask) center / contain no-repeat;
          mask: var(--jd-star-mask) center / contain no-repeat;
}
:root {
  --jd-star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="black"><rect x="42" y="2" width="16" height="96" rx="3"/><rect x="2" y="42" width="96" height="16" rx="3"/><rect x="42" y="2" width="16" height="96" rx="3" transform="rotate(45 50 50)"/><rect x="42" y="2" width="16" height="96" rx="3" transform="rotate(-45 50 50)"/></g></svg>');
}