/* =============================
   FONT-FACE DEFINITIONS
   (using .ttf fallbacks instead of .woff2)
   ============================= */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: fallback;
}

/* =============================
   BASE STYLING & RESET
   ============================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fdfaf5;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: #2b3e50;
    text-decoration: none;
}
a:hover {
    color: #264d3c;
    text-decoration: underline;
}

/* =============================
   TYPOGRAPHY
   ============================= */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #2b3e50;
    text-align: center;
    margin-bottom: 1rem;
}

.caption {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #666;
    margin-bottom: 0.5rem;
    text-align: center;
}

main p {
    max-width: 800px;
    margin: 0 auto 1.2rem auto;
    text-align: left;
}

blockquote, .blockquote {
    font-style: italic;
    border-left: 4px solid #264d3c;
    background-color: #f4f0e8;
    padding-left: 1rem;
    margin: 2rem auto;
    color: #3b3b3b;
    max-width: 800px;
}

/* =============================
   UTILITY CLASSES
   ============================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: #666; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.no-padding { padding: 0; }

/* =============================
   LAYOUT STRUCTURE
   ============================= */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    padding: 3rem 0;
}

.page-wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* =============================
   BLOG POST INDEXING
   ============================= */
.blog-index {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5em;
}

.blog-index ul {
  list-style: disc;
  padding-left: 2em;
}

.blog-index li {
  margin-bottom: 1.5em;
}

.blog-index a {
  font-weight: bold;
  text-decoration: none;
}

.blog-index a:hover {
  text-decoration: underline;
}

/* =============================
   BUTTONS
   ============================= */
.btn {
    background-color: #264d3c;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    margin-top: 1rem;
    text-align: center;
}
.btn:hover {
    background-color: #3b6a55;
}

/* =============================
   CALL OUT BOX
   ============================= */
.callout {
    background-color: #eef4f1;
    border-left: 5px solid #264d3c;
    padding: 1rem 1.5rem;
    margin: 2rem auto;
    border-radius: 6px;
    max-width: 800px;
}

/* =============================
   TEXTURE DEMO BLOCK
   ============================= */
.texture-demo {
    background-color: #f5f1ea;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2rem;
    border-radius: 6px;
    margin-top: 2rem;
    color: #1a1a1a;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================
   HEADER / NAVIGATION
   ============================= */
.site-header {
    background-color: #fdfaf5;
    padding: 1rem 0 0.5rem;
    border-bottom: 1px solid #ddd;
    text-align: center;
}
.brand-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #2b3e50;
    margin-bottom: 0.5rem;
}
.primary-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
.primary-nav a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: #2b3e50;
    padding: 0.5rem;
    transition: color 0.2s ease;
}
.primary-nav a:hover {
    color: #264d3c;
}

/* =============================
   FOOTER
   ============================= */
.site-footer {
    background-color: #fdfaf5;
    padding: 2rem;
    border-top: 1px solid #ddd;
    font-family: 'Inter', sans-serif;
    color: #2b3e50;
}
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    text-align: center;
}
.footer-col {
    flex: 1 1 30%;
}
.footer-col h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.footer-col li {
    margin: 0.3rem 0;
}
.footer-col a {
    color: #2b3e50;
    text-decoration: none;
}
.footer-col a:hover {
    text-decoration: underline;
}
.footer-note {
    color: #666;
    font-size: 0.9rem;
    max-width: 800px;
    margin: 2rem auto 0 auto;
    text-align: center;
}
.site-footer .btn {
    display: block;
    margin: 1rem auto;
    text-align: center;
}

/* =============================
   RESPONSIVE DESIGN
   ============================= */
@media (max-width: 768px) {
    .footer-columns {
        flex-direction: column;
    }
    .primary-nav ul {
        flex-direction: column;
        gap: 1rem;
    }
    .btn {
        width: 100%;
        text-align: center;
    }
}

/* =============================
   LIST STYLING
   ============================= */
main ul,
main ol {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
    text-align: left;
}

main li {
    margin-bottom: 0.5rem;
}

/* =============================
   TYPOGRAPHY – Heading Overrides
   ============================= */
h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* =============================
   CENTER BLOG HEADING & NAV
   ============================= */
.blog-heading {
  text-align: center;
  margin-bottom: 1.5rem;
}

.blog-nav {
  text-align: center;
  margin: 2rem 0;
}

.blog-nav a {
  display: inline-block;
  margin: 0.5rem 1rem;
}

/* =============================
   CENTER THE “← View All Posts” LINK
   ============================= */
.page-wrapper > a:first-of-type {
  display: block;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* =============================
   CENTER “← View All Posts” PARAGRAPH
   ============================= */
.blog-nav + p {
  text-align: center;
  margin: 1.5rem 0;
}
.blog-nav + p a {
  display: inline-block;
}

/* =============================
   NARROW PAGE CONTENT FOR BETTER READABILITY
   ============================= */
.container.page-wrapper {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
}

.page-wrapper p,
.page-wrapper ul,
.page-wrapper ol,
.page-wrapper blockquote {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* =============================
   CONTACT FORM – 4-COL GRID
   ============================= */
#contact-form {
  display: grid;
  grid-template-columns: 
    auto
    15rem
    auto
    15rem;
  column-gap: 1rem;
  row-gap: 1.5rem;
}

#contact-form br {
  display: none;
}

#contact-form label[for="name"] {
  grid-column: 1;
  align-self: center;
  margin: 0;
}
#contact-form input#name {
  grid-column: 2;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0.5rem;
}

#contact-form label[for="email"] {
  grid-column: 3;
  align-self: center;
  margin: 0;
}
#contact-form input#email {
  grid-column: 4;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0.5rem;
}

#contact-form label[for="message"] {
  grid-column: 1;
  margin: 0;
  align-self: start;
}
#contact-form textarea#message {
  grid-column: 2 / span 3;
  width: 100%;
  height: 12rem;
  box-sizing: border-box;
  margin: 0;
}

#contact-form button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.75rem 1.5rem;
}

/* =============================
   BLOG INDEX – original card styles (kept for compatibility)
   ============================= */
.card {
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border-bottom: 1px solid #ddd;
}
.grid .card:last-child {
  border-bottom: none;
}

/* =============================
   ==== OVERRIDES FOR PARChMENT LOOK & LINE SEPARATORS ====
   (placed at end to override prior rules safely)
   ============================= */

/* Warmer borders on header/footer */
.site-header { border-bottom-color: #d9d2c7; }
.site-footer { border-top-color: #d9d2c7; }

/* Slightly warmer quote background */
blockquote, .blockquote { background-color: #f5f1ea; }

/* Blog index as flat list with parchment-tinted separators */
.grid {
  display: block;
  margin: 0 auto;
  max-width: 800px;
}
.grid .card {
  background: transparent;          /* inherit parchment */
  border-radius: 0;
  padding: 16px 0;                  /* vertical rhythm, no panel look */
  box-shadow: none;                 /* remove card look */
  border-bottom: 1px solid #d9d2c7; /* parchment-tinted separator */
}
.grid .card:last-child { border-bottom: none; }

/* Title link styling for index */
.grid .card h2 {
  font-size: 1.35rem;
  margin: 0 0 8px;
  text-align: left;
}
.grid .card h2 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.grid .card h2 a:hover {
  color: #264d3c;
  text-decoration: underline;
}

/* Summary paragraph */
.grid .card p {
  margin: 0 0 12px;
  color: #444;
  text-align: left;
}

/* Responsive polish */
@media (max-width: 768px) {
  .grid { padding: 0 0.5rem; }
  .grid .card { padding: 14px 0; }
}

.currency-note {
  font-size: 0.95em;
  color: #555;
  margin-bottom: 1.5em;
}
.currency-note em {
  font-style: italic;
}

/* ===== Work Examples page – grid fixes (no 'fr' units) ===== */

/* 3-column benchmarks row */
.benchmarks.grid-3 {
  display: grid;
  grid-template-columns: 33.333% 33.333% 33.333%;
  gap: 1rem;
}
@media (max-width: 900px) {
  .benchmarks.grid-3 { grid-template-columns: 50% 50%; }
}
@media (max-width: 600px) {
  .benchmarks.grid-3 { grid-template-columns: 100%; }
}

/* Soft card look for benchmarks boxes */
.card.soft {
  background: var(--card, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}

/* Before/After two-column grid */
.example-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 1rem;
}
@media (max-width: 800px) {
  .example-grid { grid-template-columns: 100%; }
}
.example-col {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1rem;
  background: #fff;
}
.example-col.before { background: #fafafa; }

/* Labels and notes under examples */
.tag {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tag-good { color: #0a721e; }
.notes { margin: 0.75rem 0 0; padding-left: 1rem; }

/* =============================
   HEADER UPGRADE – NAVY→PARCHMENT GRADIENT + READABLE NAV
   ============================= */

/* Brand tokens (derived from your current palette) */
:root{
  --ne-parchment: #fdfaf5;  /* body background */
  --ne-navy:      #2b3e50;  /* headings/links */
  --ne-green:     #264d3c;  /* accent */
  --ne-border:    #d9d2c7;  /* warm parchment border */
  --ne-shadow:    0 6px 24px rgba(0,0,0,0.06);
}

/* Header zone: subtle depth + left-to-right gradient */
.site-header{
  background:
    linear-gradient(90deg, var(--ne-navy) 0%, var(--ne-parchment) 100%);
  border-bottom: 1px solid var(--ne-border);
  box-shadow: var(--ne-shadow);
  padding: 1rem 0 0.75rem;
  position: sticky; top: 0; z-index: 999;
}

/* Thin accent line at the very top (green -> slightly brighter) */
.site-header::before{
  content:""; display:block; height:4px;
  background: linear-gradient(90deg, #2b6a50, #3b6a55);
}

/* Brand title: readable over the navy side */
.brand-title{
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 0.5rem;
}

/* Nav: keep your centered layout, but place it on a soft, translucent
   parchment "pill" so links remain dark/readable over the gradient */
.primary-nav{
  width: 100%;
  display: flex;
  justify-content: center;
}
.primary-nav ul{
  background: rgba(253,250,245,0.88);       /* translucent parchment */
  backdrop-filter: saturate(120%) blur(2px); /* graceful on modern browsers */
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid var(--ne-border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;                /* preserves your spacing */
}

/* Links: keep your existing dark brand color for contrast */
.primary-nav a{
  color: var(--ne-navy);
  text-decoration: none;
  font-weight: 600;
  padding: 0.4rem 0.5rem;
}
.primary-nav a:hover{
  color: var(--ne-green);
  text-decoration: underline;
}

/* Mobile: convert pill to stacked chips, keep readability */
@media (max-width: 768px){
  .primary-nav ul{
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    gap: 0.75rem;
    flex-direction: column;
    align-items: center;
  }
}

/* Disable floating header */
.site-header { position: static; top: auto; z-index: auto; }

/* If we ever re-enable sticky, this avoids anchor headings hiding under it */
/* h2, h3 etc. get a comfortable scroll offset */
:where(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 80px; }

/* ===== Header logo + centered title ===== */
.header-block {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Center the title text regardless of logo width */
.brand-top {
  display: grid;
  grid-template-columns: auto auto auto; /* logo | title | spacer */
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.brand-logo {
  height: 64px;
  width: auto;
}

.brand-title {
  font-size: 2.6rem; /* was 2.2rem */
  font-weight: 700; /* bolder for visibility */
  font-family: 'Cormorant Garamond', serif;
  color: #ffffff; /* pure white for contrast over dark left side */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35); /* subtle outline to keep it legible over gradient */
  display: flex;
  align-items: flex-end; /* align bottom with logo */
  white-space: nowrap;
}

/* Right "spacer" column is empty but equal in width to logo */
.brand-top::after {
  content: '';
  display: block;
  width: 64px; /* match logo height or set via JS if responsive logo height changes */
}

@media (max-width: 768px) {
  .brand-logo { height: 48px; }
  .brand-top::after { width: 48px; }
  .brand-title {
    font-size: 2rem;
    font-weight: 700;
  }
}

/* Prevent the browser from faking bold/italic before webfonts load */
html { font-synthesis: none; }

/* Keep headings from jumping while the font swaps */
h1, h2, h3 {
  font-weight: 600;            /* matches your SemiBold face */
  line-height: 1.25;           /* steady line box, reduces reflow */
  font-size-adjust: 0.50;      /* stabilizes x-height across fallbacks */
}

/* Brand title stays bold but avoids 'fake bold' during load */
.brand-title {
  font-weight: 700;
}

/* ===== Prevent heading jump during font load ===== */

/* Stop browsers from faking bold/italic while waiting for webfonts */
html {
  font-synthesis: none;
}

/* Stabilize heading size/weight while fallbacks are in use */
h1, h2, h3 {
  font-weight: 600;          /* matches your SemiBold face */
  line-height: 1.25;         /* keeps line box stable */
  font-size-adjust: 0.50;    /* keeps perceived size consistent */
}

/* Keep brand title bold but prevent double-bold flash */
.brand-title {
  font-weight: 700;
}

/* ===== Refined header logo + text alignment with parchment harmony ===== */

/* Header gradient updated to blend into parchment background */
.site-header {
  background: linear-gradient(90deg, var(--ne-navy) 0%, #fdfaf5 100%);
  border-bottom: 1px solid #d9d2c7;
  box-shadow: var(--ne-shadow);
  padding: 1rem 0 0.75rem;
}

/* Brand row: logo | text | spacer */
.brand-top {
  display: grid;
  grid-template-columns: auto auto auto; /* logo | title | spacer */
  align-items: end; /* align all items to the bottom */
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.brand-logo {
  height: 64px;
  width: auto;
}

/* Brand title matches parchment background and logo tone */
.brand-title {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: 'Cormorant Garamond', serif;
  color: #fdfaf5; /* parchment tone */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35); /* contrast on navy side */
  white-space: nowrap;
  line-height: 1; /* tight so bottom aligns with logo */
}

/* Right spacer matches logo width to keep text centered */
.brand-top::after {
  content: '';
  display: block;
  width: 64px;
}

/* Nav background matches parchment tone */
.primary-nav ul {
  background-color: #fdfaf5;
  border: 1px solid #d9d2c7; /* parchment-tinted border */
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .brand-logo { height: 48px; }
  .brand-top::after { width: 48px; }
  .brand-title { font-size: 2rem; }
}

/* ==== Header parchment tuned to match logo background ==== */
.site-header {
  /* locally scoped "logo parchment" so we don't change page body */
  --ne-parchment-logo: #F4ECDB;   /* sampled from logo */
  --ne-parchment-logo-border: #CFC8BA;

  background: linear-gradient(90deg, var(--ne-navy) 0%, var(--ne-parchment-logo) 100%);
  border-bottom: 1px solid var(--ne-parchment-logo-border);
}

/* Brand title uses the same warmer parchment as the logo */
.brand-title {
  color: var(--ne-parchment-logo);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Nav background matches the logo parchment */
.primary-nav ul {
  background-color: var(--ne-parchment-logo);
  border: 1px solid var(--ne-parchment-logo-border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;
}

/* ==== Lighten nav bar bubble for smoother parchment transition ==== */
.primary-nav ul {
  background-color: #FBF7F1; /* midway between page (#FDFaf5) and logo parchment (#F4ECDB) */
  border: 1px solid #D9D2C7;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;
}

/* ==== Lightened nav bubble + parchment glow link hover/tap feedback ==== */

/* Nav bubble with bridge parchment tone */
.primary-nav ul {
  background-color: #FBF7F1; /* bridge tone between page and logo parchment */
  border: 1px solid #D9D2C7;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Bubble hover effect (desktop) */
.primary-nav ul:hover {
 background-color: rgba(242, 227, 199, 0.8);
 border-color: #CFC8BA;     /* subtle border deepen */
}

/* Link hover/tap feedback for all devices */
.primary-nav a {
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 999px; /* full pill to match nav bubble */
  padding: 0.25rem 0.75rem; /* comfortable pill shape */
}

/* On hover/tap: parchment glow */
.primary-nav a:hover,
.primary-nav a:focus {
  color: var(--ne-green); /* your existing accent color */
  background-color: rgba(249, 243, 232, 0.6); /* soft parchment glow */
}

/* ==== Warmed nav bubble + brighter parchment hover ==== */
.primary-nav ul {
  background-color: #FCF8F2; /* slightly warmer than #FBF7F1 */
  border: 1px solid #D9D2C7;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  gap: 1.25rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.primary-nav ul:hover {
  background-color: #F9F3E8; /* deeper parchment for bubble hover */
  border-color: #CFC8BA;
}

.primary-nav a {
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.primary-nav a:hover,
.primary-nav a:focus {
  color: var(--ne-green);
  background-color: rgba(255, 255, 255, 0.75); /* lighter warm glow */
}

/* --- Layout width + sidebar baseline --- */
:root{
  --page-max: 1200px;      /* hard cap for the whole page */
  --container-pad: 1rem;   /* horizontal breathing room */
  --content-max: 70ch;     /* consistent text measure */
  --sidebar-w: 320px;      /* future-proof width for sidebar */
}

/* Make width math predictable */
html{ box-sizing:border-box; }
*, *::before, *::after{ box-sizing:inherit; }

/* Cap the page and keep it centered */
.container,
.container.narrow,
#content,                      /* ids/classes you already use */
main.container {
  max-width: min(var(--page-max), 100% - (var(--container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Two-column scaffold for pages that need a sidebar */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px){
  .layout--with-sidebar{
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    align-items: start;
  }
  .content{
    max-width: var(--content-max);  /* consistent reading width */
  }
}

/* Media + long content should never blow the width */
img, video{ max-width:100%; height:auto; }
table{ width:100%; border-collapse: collapse; }
.table-wrap{ overflow-x:auto; }          /* wrap tables in this if needed */
pre{ white-space:pre-wrap; word-break:break-word; }

/* === Page & reading width caps (non-destructive) === */
:root{
  --page-max: 1200px;   /* site hard cap */
  --content-max: 70ch;  /* comfortable reading line length */
  --gutter: 1rem;       /* horizontal padding at narrow widths */
  --card-gap: 1.25rem;
}

/* Make widths predictable */
html{ box-sizing: border-box; }
*,*::before,*::after{ box-sizing: inherit; }

/* Cap main containers already used in your markup */
#content,
.container,
main.container {
  max-width: min(var(--page-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* HERO: constrain inner text without changing your centering */
.hero,
.hero.hero-tight {
  max-width: min(var(--page-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.hero .lede,
.hero p,
.hero h1,
.hero .center {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* SECTION: keep headings centered but text at a stable measure */
.section {
  max-width: min(var(--page-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.section > p,
.section .fine,
.section .lede {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* GRID: 3-up on desktop, autoshrink responsively without overflow */
.grid-3 {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1023px){
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid-3 { grid-template-columns: 1fr; }
}

/* CARDS: soft equal look; prevent text from pushing width */
.card.soft {
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background: #fff;                 /* keep your palette if already set */
  height: 100%;
}
.card.soft h3 {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  text-align: left;                 /* keep headers centered elsewhere only */
}
.card.soft p,
.card.soft ul {
  max-width: 60ch;                  /* slightly narrower for dense content */
  margin: 0.5rem 0;
}
.card.soft ul { padding-left: 1.25rem; }

/* Utilities you’re using: keep them safe within caps */
.center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }

/* Media/long blocks never widen the page */
img, video { max-width: 100%; height: auto; display: block; }
table { width: 100%; border-collapse: collapse; }
pre { white-space: pre-wrap; word-break: break-word; }

/* Links in the references line stay within the reading measure */
.section .fine a { word-break: break-word; }

/* === Work Examples width + reading measure (safe global rules) === */
:root{
  --page-max: 1200px;
  --gutter: 1rem;     /* 16px */
  --measure: 70ch;    /* comfortable line length */
}

/* Shell for this page’s main container */
main#content.container.narrow {
  max-width: min(var(--page-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Keep hero/sections within the shell */
#content .hero,
#content .section {
  max-width: min(var(--page-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* Cap paragraph line length while allowing centered headings */
#content .hero .lede,
#content .hero h1,
#content .section > p,
#content .section .lede,
#content .section .fine {
  max-width: var(--measure);
  margin-inline: auto;
}

/* Responsive 3-up grid that never overflows */
#content .grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){
  #content .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #content .grid-3 { grid-template-columns: 1fr; }
}

/* Media/long blocks never widen the page */
#content img, #content video { max-width: 100%; height: auto; display:block; }
#content table { width: 100%; border-collapse: collapse; }
#content pre   { white-space: pre-wrap; word-break: break-word; }