/* --- RBES TYPOGRAPHY & LAYOUT V2 --- */

/* GLOBAL BASE */
body {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  font-size: 18px;
  letter-spacing: 0.01em;
}

/* PAGE WRAPPER */
main, body > div, body > section {
  max-width: 900px;
  margin: 5rem auto;
  padding: 0 2rem;
}

/* HEADER / TITLE */
h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #0f0f0f;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

h1 {
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 3rem;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 1rem;
}

h2 {
  font-size: 1.8rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.3rem;
  margin-top: 2rem;
}

/* PARAGRAPHS */
p {
  margin: 1.5rem 0;
  max-width: 70ch;
}

/* LINKS */
a {
  color: #3c3cff;
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 60, 255, 0.2);
  transition: all 0.2s ease;
}
a:hover {
  color: #000;
  border-color: #000;
}

/* NAVIGATION */
nav {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 0 1rem 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

nav a {
  color: #111;
  font-weight: 600;
  border: none;
}

nav a:hover {
  color: #000;
}

/* FOOTER */
footer {
  font-size: 0.85rem;
  color: #777;
  text-align: center;
  margin-top: 6rem;
  padding: 2rem 0;
  border-top: 1px solid #eee;
  letter-spacing: 0.02em;
}

/* LISTS */
ul, ol {
  margin: 1.5rem 0 1.5rem 2rem;
  padding: 0;
}
li {
  margin-bottom: 0.6rem;
}

/* TABLES */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 3rem 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
th, td {
  border-bottom: 1px solid #e5e5e5;
  padding: 1rem 0.5rem;
  text-align: left;
}
th {
  font-weight: 700;
}

/* SPECIALS */
strong {
  font-weight: 600;
}
em {
  color: #444;
  font-style: italic;
}

/* SPACIOUS LAYOUT TWEAKS */
section, article {
  margin-bottom: 4rem;
}

blockquote {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  color: #333;
  border-left: 4px solid #ccc;
  padding-left: 1rem;
  margin: 3rem 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.7;
  }
  main, body > div {
    padding: 0 1.5rem;
  }
  nav {
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
  }
}

/* --- HEADER & TITLE --- */
header {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.site-title {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  text-decoration: none;
  color: #111;
  font-weight: 700;
}

.site-title span {
  font-size: 1.4rem;
  font-weight: 400;
  color: #666;
  font-style: italic;
  margin-left: 0.3rem;
}

/* === Rulebreakers English Studios: Refined Layout === */

body {
  font-family: "Georgia", "Times New Roman", serif;
  color: #111;
  background: #fff;
  font-size: 18px;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 840px;
  padding: 5rem 2rem 8rem;
}

/* Title + Header */
h1 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 em {
  font-style: italic;
  font-size: 1.4rem;
  color: #444;
}

/* Navbar */
nav {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 4rem;
  letter-spacing: 0.08em;
}

nav a {
  margin: 0 1rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

nav a:hover {
  color: #a00;
}

/* Paragraphs */
p {
  margin-bottom: 1.5rem;
  text-align: left;
}

/* Links inside text */
p a {
  color: #0044cc;
  text-decoration-thickness: 0.08em;
}

p a:hover {
  color: #a00;
}

/* Footer */
footer {
  margin-top: 6rem;
  font-size: 0.9rem;
  text-align: center;
  color: #777;
}

.page-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.site-nav nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.site-nav a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
}
.site-nav a:hover {
  color: #a00;
}

/* ===== RBES header layout fixes ===== */
.container{max-width:960px;margin:0 auto;padding:0 24px;}
.site-header{padding:48px 0 12px;}
.site-title{margin:0 0 10px;text-align:center;font-family:"Playfair Display",serif;font-weight:700;font-size:42px;line-height:1.12;}
.site-title a{color:inherit;text-decoration:none;}
.plan-tag{font-weight:700;font-size:22px;opacity:.6;margin-left:.35rem;}
.site-nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:12px 0 18px;border-bottom:1px solid #eee;}
.site-nav a{text-decoration:none;color:#111;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;}
.site-nav a:hover{text-decoration:underline;}

main{padding-top:8px;}
/* Keep page H1s nice, but not fighting the site title */
main h1{margin:36px auto 16px;text-align:center;line-height:1.2;}
/* ==================================== */

/* ===== RBES header layout fixes ===== */
.container{max-width:960px;margin:0 auto;padding:0 24px;}
.site-header{padding:48px 0 12px;}
.site-title{margin:0 0 10px;text-align:center;font-family:"Playfair Display",serif;font-weight:700;font-size:42px;line-height:1.12;}
.site-title a{color:inherit;text-decoration:none;}
.plan-tag{font-weight:700;font-size:22px;opacity:.6;margin-left:.35rem;}
.site-nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:12px 0 18px;border-bottom:1px solid #eee;}
.site-nav a{text-decoration:none;color:#111;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;}
.site-nav a:hover{text-decoration:underline;}

main{padding-top:8px;}
/* Keep page H1s nice, but not fighting the site title */
main h1{margin:36px auto 16px;text-align:center;line-height:1.2;}
/* ==================================== */

/* ---- RBES header layout ---- */
.site-header{
  max-width: 960px;
  margin: 48px auto 24px;
  padding: 0 24px;
  text-align: center;
}
.site-title{
  font-size: 48px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.site-title a{
  text-decoration: none;
  color: #111;
}
.site-title .plan{
  font-style: italic;
  font-weight: 500;
  color: #666;
  font-size: .6em;
}
.site-nav{
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 14px 0;
  margin-top: 12px;
}

/* Content width + breathing room */
main{
  max-width: 860px;
  margin: 48px auto;
  padding: 0 24px;
}

/* ---- Page spacing and hierarchy fixes ---- */
.page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px;
}

.page-content h1:first-child {
  margin-top: 40px;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
  font-size: 2rem;
  line-height: 1.2;
}

cat >> src/assets/style.css <<'EOF'

/* --- Navbar spacing cleanup --- */
nav {
  margin-bottom: 0.5rem; /* reduce space below navbar */
}

.page-content {
  margin-top: 0; /* remove extra gap between nav and body */
}

/* === RBES custom fixes === */
main {
  margin-top: 1.5rem !important;   /* reduce big gap under nav */
}

body {
  font-size: 1.1rem;                /* slightly larger default font */
  line-height: 1.6;
}

h1, h2, h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
main { margin-top: 1.5rem !important; }
main { margin-top: 1.5rem !important; }
/* ==== Tighten space under the navbar ==== */
header, .site-header { margin-bottom: 0.75rem !important; }

/* Remove any extra top offset on the content area */
main, .content, .container { margin-top: 0 !important; padding-top: 0.25rem; }

/* Kill the “first-child top margin collapse” */
main > *:first-child,
.content > *:first-child,
.container > *:first-child,
p:first-of-type,
h1:first-of-type,
h2:first-of-type {
  margin-top: 0 !important;
}

/* If a horizontal rule is creating the gap, keep it tight */
hr { margin-top: 0.5rem; margin-bottom: 0.5rem; }
body { outline: 2px solid transparent; } /* cache-bust marker */
/* === Tighten space under header/nav (force) === */
header, .site-header, nav { margin-bottom: 0.5rem !important; padding-bottom: 0 !important; }

/* Common wrappers Eleventy sites use */
main, .content, .container, .wrapper, .page, .prose {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the layout adds a spacer for a fixed header, kill it */
.spacer, .site-spacer, .header-spacer { height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* Stop first element from adding its own top gap (margin collapse) */
main > *:first-child,
.content > *:first-child,
.container > *:first-child,
.wrapper > *:first-child,
.page > *:first-child,
.prose > *:first-child {
  margin-top: 0 !important;
}

/* Headings & paragraphs at the very top */
h1:first-of-type, h2:first-of-type, h3:first-of-type, p:first-of-type {
  margin-top: 0 !important;
}

/* Tighten any horizontal rule right below nav */
hr { margin-top: 0.25rem !important; margin-bottom: 0.75rem; }
header, .site-header, nav { margin-bottom: 1rem !important; }
header, .site-header, nav { margin-bottom: 2rem !important; }
body { font-size: 18px; line-height: 1.7; letter-spacing: 0.01em; }
main { max-width: 760px; margin: 2rem auto; }
h1, h2, h3 { letter-spacing: 0.03em; text-transform: none; font-weight: 600; }
.navbar a { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0.4rem; color: #111; text-decoration: none; }
.navbar { text-align: center; margin-bottom: 1.75rem; }
body { color: #222; } p { color: #333; } a { color: #1a3d8f; }
/* --- Title and header refinement --- */
h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin-top: 1.8rem;
  margin-bottom: 0.2rem;
  letter-spacing: 0.02em;
}

h1 em, h1 i {
  font-style: italic;
  font-weight: 400;
  color: #444;
}

header, .site-header, nav {
  margin-bottom: 2rem !important;
}

.navbar {
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.navbar, h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Work+Sans:wght@400;500;600&display=swap');

body {
  font-family: 'Libre Baskerville', Georgia, serif;
}

.navbar, h1, h2, h3 {
  font-family: 'Work Sans', Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}
/* keep subtitle inline with main title */
h1 em, h1 i {
  display: inline;
  font-style: italic;
  font-weight: 400;
  margin-left: 0.35rem;
  white-space: nowrap;
  color: #444;
}
/* --- Navbar refinement: keeps it one clean horizontal line --- */
.navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.navbar a {
  color: #111;
  text-decoration: none;
  padding: 0.1rem 0.4rem;
  font-weight: 500;
}

.navbar a:hover {
  color: #444;
  text-decoration: underline;
}
/* --- keep "(The Plan)" on the same line as title --- */
h1 {
  white-space: nowrap;
}
/* --- refine main title hierarchy --- */
h1 {
  font-size: 3rem;      /* was ~2.4–2.6rem */
  line-height: 1.1;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
}

h1 em, h1 i {
  font-size: 1.35rem;
  vertical-align: baseline;
  margin-left: 0.35rem;
  color: #555;
}
/* --- allow long page titles to wrap normally --- */
h1, h2, h3, h4, h5, h6 {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
/* keep full title together on one line */
h1 {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* --- keep (The Plan) inline but prevent ellipsis cutoff --- */
h1 {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  font-size: clamp(2rem, 5vw, 3rem); /* scales down smoothly on small screens */
}

h1 em, h1 i {
  display: inline;
  white-space: nowrap;
  margin-left: 0.35rem;
  font-size: 0.55em;
  font-style: italic;
  color: #555;
}
/* === Scoped styling for BACKGROUND page only === */
body.page-background main {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 1.05rem;
  color: #222;
  padding: 2rem 1rem;
}

body.page-background p {
  margin-bottom: 1.25rem;
}

body.page-background h1 {
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
}

body.page-background a {
  color: #1a3d8f;
}

body.page-background a:hover {
  text-decoration: underline;
  color: #000;
}

/* optional: subtle background tint just for this page */
body.page-background {
  background-color: #fafafa;
}
/* fix long h1 titles on background page */
body.page-background h1 {
  display: block;
  max-width: 90%;
  margin: 2rem auto;
  line-height: 1.2;
  word-wrap: break-word;
  text-align: center;
  font-size: 2.2rem;
}
/* fix for long background title wrapping */
body.page-background h1 {
  display: block;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 2.5rem auto;
  max-width: 85%;
  color: #111;
}
/* === Fix: Ensure Background page title always visible and wrapped === */
main h1:first-of-type {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 2.5rem auto 2rem auto;
  max-width: 85%;
  color: #111;
}
/* === Typography polish for Rulebreakers site === */

/* Paragraph rhythm: smoother vertical flow */
main p {
  line-height: 1.7;
  margin: 0 0 1.2rem 0;
  max-width: 720px;
}

/* Headings spacing: add visual breath but remove over-gap */
main h1, main h2, main h3 {
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.25;
  max-width: 720px;
}

/* Remove any extra top padding Eleventy might apply */
main {
  padding-top: 1rem !important;
}

/* Optional: unify paragraph width and text rendering */
main {
  font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
}