/* ==========================================================================
   Citadel Builders — Foundational styles
   Typography-first. Style the underlying HTML; classes only where necessary.
   ========================================================================== */

:root {
  /* --- Type scale — Perfect Fifth (ratio 1.5), 16px base --------------- */
  --ratio: 1.5;
  --fs--1: calc(var(--fs-0) / var(--ratio)); /* ~0.667rem  ~10.7px */
  --fs-0:  1.4rem;                             /*  1rem       16px  — base */
  --fs-1:  calc(var(--fs-0) * var(--ratio)); /*  1.5rem     24px  */
  --fs-2:  calc(var(--fs-1) * var(--ratio)); /*  2.25rem    36px  */
  --fs-3:  calc(var(--fs-2) * var(--ratio)); /*  3.375rem   54px  */
  --fs-4:  calc(var(--fs-3) * var(--ratio)); /*  5.0625rem  81px  */

  /* --- Fonts ----------------------------------------------------------- */
  --font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-body:    1.4;
  --leading-heading: 1.05;
  --tracking-wide:   0.2em;  /* 20% — the logo lockup */
  --tracking-label:  0.1em;  /* gentler tracking for small uppercase */

  /* --- Colour ---------------------------------------------------------- */
  --color-bg:         #F8EBEB;
  --color-ink:        #1A0E0E; /* near-black, deep blood-red undertone */
  --color-link:       #7A1722;
  --color-link-hover: #4D0E16;
  --color-muted:      #6E4A4A;
  --color-rule:       #DCC4C4;
  --color-ghost-hover: #848484; /* grey fill for ghost button hover */

  /* --- Spacing (1.5-ish rhythm) ---------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;

  /* --- Layout ---------------------------------------------------------- */
  --measure: 65ch; /* ideal line length for <main> */
  --radius: 2px;   /* squared, stone-like corners */
}

/* --- Reset (minimal) --------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, ul, ol {
  margin: 0;
}

/* --- Base -------------------------------------------------------------- */
html {
  font-size: 100%; /* respects the user's 16px default */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  font-size: var(--fs-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Header / logo ----------------------------------------------------- */
.site-header {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
}

.logo {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: inherit;
  text-decoration: none;
}

/* --- Layout ------------------------------------------------------------ */
main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* --- Headings ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-4);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--fs-3);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--fs-2);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--fs-1);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

h5 {
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

h6 {
  font-size: var(--fs--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-muted);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* --- Body text --------------------------------------------------------- */
p {
  margin-bottom: var(--space-md);
}

strong {
  font-weight: var(--weight-bold);
}

em {
  font-style: italic;
}

/* --- Links ------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
}

/* --- Buttons (link-styled) --------------------------------------------- */
a.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs-0);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-bg);
  background-color: var(--color-link);
  border: 2px solid var(--color-link);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.btn:hover,
a.btn:focus-visible {
  color: var(--color-bg);
  background-color: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

/* Ghost / outlined variant */
a.btn.ghost {
  color: var(--color-link);
  background-color: transparent;
}

a.btn.ghost:hover,
a.btn.ghost:focus-visible {
  color: var(--color-ghost-hover);
  border-color: var(--color-ghost-hover);
}

/* Layout helper for adjacent buttons */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* --- Lists ------------------------------------------------------------- */
ul,
ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

li::marker {
  color: var(--color-muted);
}

/* nested lists shouldn't double up vertical space */
li > ul,
li > ol {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* --- Blockquote -------------------------------------------------------- */
blockquote {
  margin-block: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-rule);
  font-style: italic;
  font-size: var(--fs-1);
  line-height: var(--leading-body);
}

blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-0);
  font-style: normal;
  color: var(--color-muted);
}

/* --- Figure ------------------------------------------------------------ */
figure {
  margin-block: var(--space-lg);
  text-align: center;
}

figure svg {
  width: 6rem;
  height: auto;
  color: var(--color-ink); /* inherited by fill: currentColor */
}

figcaption {
  margin-top: var(--space-sm);
  font-style: italic;
  color: var(--color-muted);
}

/* --- Horizontal rule --------------------------------------------------- */
hr {
  margin-block: var(--space-lg);
  border: none;
  border-top: 1px solid var(--color-rule);
}

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  margin-top: var(--space-xl);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  text-align: center;
}

/* Same lockup as the header logo, just smaller and centred */
.site-footer .logo {
  font-size: var(--fs-0);
}

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 40rem) {
  /* The top of the perfect fifth is too tall on small viewports —
     step the largest headings down a notch, still on the scale. */
  h1 {
    font-size: var(--fs-3);
  }

  h2 {
    font-size: var(--fs-2);
  }
}