/* =========================================
   TYPE SYSTEM — JD
   Structure:
   1) Font Faces
   2) Variables
   3) Base / Resets
   4) Headings
   5) Paragraphs & Variants
   6) Links
   7) Lists
   8) Author Blocks
   9) Quotes
   10) Utilities / Legacy aliases
   ========================================= */

/* ========== 1) FONT FACES ========== */
/* Adjust paths if your CSS lives elsewhere */
@font-face{
  font-family:'ClanPro-NarrUltra';
  src: url('/JD/Assets/Fonts/ClanPro-NarrUltra.woff2') format('woff2'),
       url('/JD/Assets/Fonts/ClanPro-NarrUltra.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Libre Baskerville';
  src: url('/JD/Assets/Fonts/LibreBaskerville-Regular.woff2') format('woff2'),
       url('/JD/Assets/Fonts/LibreBaskerville-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Libre Baskerville';
  src: url('/JD/Assets/Fonts/LibreBaskerville-Italic.woff2') format('woff2'),
       url('/JD/Assets/Fonts/LibreBaskerville-Italic.woff') format('woff');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Libre Baskerville';
  src: url('/JD/Assets/Fonts/LibreBaskerville-Bold.woff2') format('woff2'),
       url('/JD/Assets/Fonts/LibreBaskerville-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ========== 2) VARIABLES ========== */
:root{
  /* Brand colours */
  --jd-cream:   #F8EDC2;
  --jd-nearly-blk:     #151D0A;
  --jd-accent:  #f7aa21;
  --jd-welly:  #384d3e; /* Welly Green Hover bg color */

  /* Text colours */
  --text:       var(--jd-cream);
  --text-dark:  var(--jd-ink);
  --muted:      #debb87;

  /* Font stacks */
  --font-display: 'ClanPro-NarrUltra', sans-serif;
  --font-serif:   'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-mono:    "Courier New", ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Scales */
  --h1: 40px;
  --h2: 30px;
  --h3: 15px;
  --h4: 12px;
  --body: 12px;
  --body-lh: 14px;

  /* Effects */
  --underline-thickness: 3px;
  --underline-offset: 4px;
}

/* ========== 3) BASE / RESET ========== */
html { font-size: 16px; }
body {
  margin: 0;
  color: var(--text);
  background: #151D0A; /* assume dark canvas; adjust as needed */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========== 4) HEADINGS ========== */
h1, h2, h3, h4 { font-weight: 400; margin: 0; text-transform: uppercase; }

h1{
  font-family: var(--font-display);
  font-size: var(--h1);
  color: var(--jd-cream);
  font-style: normal;
}
h2{
  font-family: var(--font-display);
  font-size: var(--h2);
  color: var(--jd-cream);
	line-height: 0.8; 
}
h3{
  font-family: var(--font-display);
  font-size: var(--h3);
  color: var(--jd-cream);
	line-height: 0.9; 
}
h4{
  font-family: var(--font-display);
  font-size: var(--h4);
  color: var(--jd-cream);
	line-height: 0.9; 
}

/* Heading link states — only affect anchors inside h3/h4 */
h3 a,
h4 a{
  color: var(--jd-cream);
  text-decoration: none;
  transition: color .3s ease-in-out;
}

h3 a:hover,
h4 a:hover{
  color: var(--jd-mustard);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}


/* Variants */

.headline-black{ color: var(--jd-nearly-blk); }
.headline-black span{ background-color: var(--jd-cream); }

/* Highlight backdrop line under text (as provided) */
.highlight{
  background: linear-gradient(
    to bottom,
    transparent 0%, transparent 10%,
    var(--jd-ink) 10%, var(--jd-ink) 85%,
    transparent 20%, transparent 80%
  );
}

/* ========== 5) PARAGRAPHS & VARIANTS ========== */
p{
  font-family: var(--font-serif);
  color: var(--text);
  font-size: var(--body);
  line-height: var(--body-lh);
  margin: 0 0 1em;
}

/* p1 is the Courier typewriter font - used for small text */

/* Make .p1 look like your original (and a touch bolder) */
.p1{
  font-family: "Courier New", monospace;
  color: #F8EDC2;
  font-size: 10px;
  line-height: 12px;
  text-transform: none;
  margin: 0;
  padding: 0;
  display: block;

  /* override global smoothing that thins the strokes */
  -webkit-font-smoothing: auto;        /* undo the global 'antialiased' */
  text-rendering: optimizeSpeed;        /* avoid extra shaping that can lighten */
  font-weight: 500;                     /* if too heavy, try 600 or 500 */
}


/* Links inside .p1 (same behaviour as before) */
.p1 a{
  color: #F8EDC2;
  text-decoration: none;
}
.p1 a:hover{
  color: #f7aa21;
  text-decoration: underline;
}



.p2{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 14px;
  margin: 0;
  padding: 0;
}

/* Optional legacy alias for .p1 used as standalone block */
.p1-block{ display: block; }

/* ========== 6) LINKS (global defaults) ========== */
a{ color: var(--text); text-decoration: underline; }
a:hover{ color: var(--jd-accent); }

/* Paragraph-specific link tweaks */
p a{ text-decoration: underline; }
.p1 a, .p2 a{ text-decoration: none; }
.p1 a:hover, .p2 a:hover{ text-decoration: underline; }

/* Author body links with stronger underline */
.author-text-body a{
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .3s ease;
}
.author-text-body a:hover{ color: var(--jd-accent); }

/* ========== 7) LISTS ========== */
.styled-list{
  margin: 10px 0 0 15px; /* expose default bullets; comment out to inline */
  /* list-style: none; padding: 0; margin: 0; */ /* if you want custom inline separators */
}
.styled-list li{
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 12px;
  line-height: 14px;
}
/* If you want the dot separators instead of bullets, uncomment:
.styled-list{ list-style: none; padding: 0; margin: 10px 0 0 0; }
.styled-list li{ display: inline; }
.styled-list li::after{ content: " • "; color: var(--text); margin: 0 5px; }
.styled-list li:last-child::after{ content: ""; }
*/

/* ========== 8) AUTHOR BLOCKS ========== */
.author-text{
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text);
  font-size: clamp(30px, 4vw, 40px);
  line-height: clamp(35px, 4.3vw, 45px);
  padding: 0 0 1% 0;
  margin: 0;
}
.author-text-body{
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text);
  font-size: var(--lead);
  line-height: 120%;
  padding: 0 0 2% 0;
  margin: 0 0 2vw 0;
}