/* Kingswell Publishing
   design tokens, reset, base type, primitives
   Edit this file for colours, fonts and spacing. */

/* ============================================================
   KINGSWELL PUBLISHING - HOMEPAGE
   Tokens: ink / teal / mint / gold / paper. No sixth hex.
   Type: Unbounded (display, stands in for Chubbo Bold) + Plus Jakarta Sans
   (body/UI, stands in for Supreme Regular) — both free, both close in spirit.
   Rosaline (self-hosted, ITF Free Font License) is a one-off script accent —
   see .rosaline below — not a general body/display substitute.
   ============================================================ */

@font-face{
  font-family:'Rosaline';
  src:url('../fonts/rosaline/Rosaline-Regular.woff2') format('woff2'),
      url('../fonts/rosaline/Rosaline-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:   #07211F;
  --teal:  #127C6E;
  --mint:  #F5BD02;
  --gold:  #A37E2C;
  --paper: #EAF4F1;

  --gutter: clamp(20px, 4.5vw, 96px);
  --rule: rgba(234,244,241,.14);
  --rule-dark: rgba(7,33,31,.16);

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400;
  letter-spacing:-0.011em;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

::selection{background:var(--mint);color:var(--ink);}

/* ---------- primitives ---------- */
.wrap{width:100%;max-width:1560px;margin:0 auto;padding-inline:var(--gutter);}
.sec{position:relative;}
.sec--ink{background:var(--ink);color:var(--paper);}
.sec--paper{background:var(--paper);color:var(--ink);}
.sec--teal{background:var(--teal);color:var(--paper);}
a,button,summary{cursor:pointer;}

.display{
  font-family:Unbounded, sans-serif;
  font-weight:700;
  line-height:.92;
  letter-spacing:-0.025em;
}
.em{
  font-style:italic;
  color:var(--mint);
}
.sec--paper .em{color:var(--teal);}

/* fixed-color word highlights, independent of section background —
   used to echo one heading's accent colour inside another's plain text */
.tint-gold{color:var(--mint);}
.tint-teal{color:var(--teal);}

/* placed after .display on purpose: same specificity, so source order is
   what decides the winner — this must come later or Unbounded wins instead. */
.rosaline{
  font-family:'Rosaline', cursive;
  font-style:normal;font-weight:400;
  /* the connecting strokes rely on kerning + contextual glyph swaps between
     letters — make sure both are explicitly on rather than left to defaults */
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

.eyebrow{
  font-size:13px;
  line-height:1.4;
  letter-spacing:-0.005em;
  color:rgba(234,244,241,.58);
  display:flex;align-items:center;gap:14px;
}
.sec--paper .eyebrow{color:rgba(7,33,31,.55);}
.eyebrow .n{
  font-family:Unbounded,serif;
  font-variation-settings:"opsz" 20;
  font-size:12px;
  letter-spacing:.02em;
}
.measure{max-width:64ch;}
.measure-sm{max-width:52ch;}
