/* ============================================================
   Devon Kellar — brand tokens + signature elements
   Source of truth: ../DESIGN-SYSTEM.md
   Import this into any asset template. Do not invent colours.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,50..100,0..1;1,9..144,300..900,50..100,0..1&family=Karla:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* surfaces */
  --paper:      #F6EFE3;   /* THE background. never white. */
  --paper-deep: #EFE5D3;
  --card:       #FBF6EC;

  /* ink */
  --ink:        #33241A;   /* deep umber — text, borders, hard shadows */
  --ink-soft:   #5C4A3A;

  /* accents */
  --clay:       #BC5B33;   /* terracotta — THE accent. one thing per composition. */
  --clay-deep:  #9C4525;
  --gold:       #C6913F;   /* ornament only: underlines, badges */
  --forest:     #3E4A32;   /* rare second accent */

  /* lines */
  --line:       rgba(51, 36, 26, 0.18);
  --line-soft:  rgba(51, 36, 26, 0.10);

  --ease-organic: cubic-bezier(0.33, 1, 0.4, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- SIGNATURE 4a: paper grain ----------------------------
   Put this on a full-bleed ::before. It is the single biggest
   reason the brand reads as paper rather than screen.        */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ---- type ---- */
h1, h2, h3, .display {
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;  /* WONK is essential — it's the hand-cut feel */
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* the one word that sings */
.sing {
  font-style: italic;
  color: var(--clay);
}

/* ---- SIGNATURE 4e: hand-drawn underline ---- */
.u { position: relative; white-space: nowrap; }
.u svg {
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  width: 100%; height: 0.22em;
  overflow: visible;
}
.u path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---- kicker (label above a headline) ---- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
  transform: rotate(-1.5deg);   /* SIGNATURE 4d: the tilt */
}

/* ---- SIGNATURE 4b + 4c: hard shadow + organic radius ---- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 16px 18px 15px 19px;   /* never uniform */
  box-shadow: 2px 3px 0 rgba(51,36,26,0.10);
  padding: 26px 28px;
}
.card-hard {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px 16px 13px 17px;
  box-shadow: 3px 4px 0 var(--ink);     /* solid, NEVER blurred */
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--clay);
  color: #FBF3E8;
  box-shadow: 3px 4px 0 var(--ink);
  text-decoration: none;
}

/* ---- dashed pill (footer links, stack chips) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---- SIGNATURE 4d: the tilt ---- */
.tilt-l  { transform: rotate(-0.7deg); }
.tilt-r  { transform: rotate(0.6deg); }
.tilt-badge { transform: rotate(-4deg); }
/* keep anything holding TEXT under 2deg */

/* ---- stat number ---- */
.stat {
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-weight: 600;
  color: var(--clay-deep);
  line-height: 1;
}

/* ---- LinkedIn safe zone helper (dev only) -----------------
   Add class="safe" to the frame to see the centre-80% box.
   LinkedIn centre-crops the Featured thumbnail: keep every
   word inside this. Remove before export.                    */
.safe::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 2px dashed rgba(188,91,51,0.5);
  pointer-events: none;
  z-index: 9999;
}