/* ==========================================================================
   The IO Prep — Blog site styles
   Tokens copied from "The IO Prep Design System" (tokens/*.css) so this
   site stays visually consistent with the main brand. Update both places
   if the source design system changes.
   ========================================================================== */

:root{
  /* colors */
  --oxford-blue-900:#001830;
  --oxford-blue:#002147;
  --oxford-blue-700:#0a3568;
  --oxford-blue-500:#1e4d85;
  --oxford-blue-300:#6f8daf;
  --oxford-blue-100:#d7e0ea;
  --oxford-blue-050:#eef2f7;
  --gold-700:#8a6a12;
  --gold-500:#b8912c;
  --gold:#c9a227;
  --gold-300:#e0c876;
  --gold-100:#f0e6c8;
  --cream:#f7f3e9;
  --cream-100:#fbf9f3;
  --white:#ffffff;
  --ink:#101418;
  --gray-900:#1c2126;
  --gray-700:#3c444d;
  --gray-500:#68707a;
  --gray-300:#aab1ba;
  --gray-100:#dfe3e7;
  --gray-050:#f3f5f6;
  --success:#3f6b4a;
  --success-bg:#e7efe8;
  --error:#8c2f2f;
  --error-bg:#f6e8e8;

  --bg-page:var(--white);
  --border-hairline:var(--gray-100);
  --text-primary:var(--oxford-blue);
  --text-body:var(--ink);
  --text-muted:var(--gray-500);
  --link:var(--oxford-blue);
  --link-hover:var(--gold-700);
  --focus-ring:var(--gold);

  /* type */
  --font-serif:"Times New Roman",Times,Georgia,"Liberation Serif",serif;
  --fs-display:56px;
  --fs-h1:40px;
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-h4:20px;
  --fs-body-lg:19px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-caption:13px;
  --fs-eyebrow:13px;
  --lh-tight:1.12;
  --lh-heading:1.22;
  --lh-body:1.6;
  --lh-loose:1.75;
  --ls-eyebrow:0.14em;

  /* spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --container-max:1180px;
  --container-narrow:760px;

  /* effects */
  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:4px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(0,33,71,0.06),0 2px 8px rgba(0,33,71,0.07);
  --shadow-raised:0 4px 16px rgba(0,33,71,0.12);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-serif);
  color:var(--text-body);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);text-decoration:underline;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:var(--font-serif);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-7);}
@media (max-width:720px){
  .container{padding:0 var(--space-4);}
}

.eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-serif);
  font-weight:700;
  letter-spacing:0.01em;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--duration-base) var(--ease-standard),
             opacity var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
  padding:11px 22px;
  font-size:var(--fs-body);
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary{background:var(--oxford-blue);color:var(--white);border-color:var(--oxford-blue);}
.btn-primary:hover{background:var(--oxford-blue-900);color:var(--white);text-decoration:none;}
.btn-secondary{background:var(--white);color:var(--oxford-blue);border-color:var(--oxford-blue);}
.btn-secondary:hover{background:var(--oxford-blue-050);color:var(--oxford-blue);text-decoration:none;}
.btn-gold{background:var(--gold);color:var(--oxford-blue);border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-500);color:var(--oxford-blue);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--oxford-blue);border-color:transparent;}
.btn-ghost:hover{color:var(--gold-700);text-decoration:none;}
.btn-sm{padding:8px 16px;font-size:var(--fs-small);}

/* ---------- top nav ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--space-7);
  border-bottom:1px solid var(--border-hairline);
  background:var(--white);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:36px;
  height:36px;
  border:1px solid var(--oxford-blue);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--oxford-blue);
  flex:none;
}
.brand-name{
  font-weight:700;
  font-size:22px;
  color:var(--oxford-blue);
  line-height:1;
}
.brand-name small{
  display:block;
  font-weight:400;
  font-size:11px;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:3px;
}
.main-nav{display:flex;align-items:center;gap:var(--space-6);}
.main-nav a.nav-link{
  color:var(--text-muted);
  font-size:var(--fs-body);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
.main-nav a.nav-link:hover{color:var(--oxford-blue);text-decoration:none;border-bottom-color:var(--gold);}
.main-nav a.nav-link.active{color:var(--oxford-blue);border-bottom-color:var(--gold);}
.nav-right{display:flex;align-items:center;gap:var(--space-5);}
.nav-toggle{display:none;background:none;border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:8px 10px;}

@media (max-width:860px){
  .site-header{padding:16px var(--space-4);}
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--white);
    border-bottom:1px solid var(--border-hairline);
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-4);
    padding:var(--space-4);
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:inline-flex;}
}

/* ---------- carousel ---------- */
/* Full-bleed: no side padding/margins/borders/radius so it spans the
   viewport edge-to-edge. Height is capped (not aspect-ratio driven) so
   the top of the "Recent posts" section still peeks into view. */
.carousel-section{padding:0;background:var(--cream-100);position:relative;}
.carousel{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:0;
  border:none;
  box-shadow:none;
}
.carousel-track{display:flex;transition:transform var(--duration-base) var(--ease-standard);}
.carousel-slide{
  flex:0 0 100%;
  height:clamp(220px,42vh,420px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:var(--space-6);
  color:var(--white);
  position:relative;
}
.carousel-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,33,71,0.05) 0%,rgba(0,24,48,0.55) 100%);
  z-index:0;
}
.carousel-slide-label{position:relative;z-index:1;}
.carousel-slide-label .place{font-size:var(--fs-h3);font-weight:700;}
.carousel-slide-label .caption{font-size:var(--fs-small);color:var(--oxford-blue-100);margin-top:4px;}
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.9);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background var(--duration-base) var(--ease-standard);
}
.carousel-arrow:hover{background:var(--white);}
.carousel-arrow.prev{left:var(--space-4);}
.carousel-arrow.next{right:var(--space-4);}
.carousel-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:var(--space-3);
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:2;
}
.carousel-dot{
  width:8px;
  height:8px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.8);
  cursor:pointer;
  padding:0;
}
.carousel-dot.active{background:var(--gold);border-color:var(--gold);}

/* ---------- section headings ---------- */
.section{padding:var(--space-8) 0;}
.section-head{margin-bottom:var(--space-6);}
.section-head h2{font-size:var(--fs-h2);color:var(--oxford-blue);line-height:var(--lh-heading);margin-top:8px;}

/* ---------- blog cards ---------- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);
}
.post-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
@media (max-width:860px){
  .post-grid{grid-template-columns:1fr;}
}
.post-card{
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow var(--duration-base) var(--ease-standard);
}
.post-card:hover{box-shadow:var(--shadow-raised);}
.post-card[data-open-signup]{cursor:pointer;}
.post-card .post-thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--oxford-blue-050),var(--oxford-blue-100));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--oxford-blue-300);
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.post-card .post-body{padding:var(--space-5);display:flex;flex-direction:column;gap:8px;flex:1;}
.post-tag{
  align-self:flex-start;
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--gold-700);
  background:var(--gold-100);
  border:1px solid var(--gold-300);
  border-radius:var(--radius-sm);
  padding:3px 8px;
}
.post-card h3{font-size:var(--fs-h4);color:var(--oxford-blue);line-height:var(--lh-heading);}
.post-date{font-size:var(--fs-caption);color:var(--text-muted);}
.post-excerpt{font-size:var(--fs-small);color:var(--text-body);line-height:var(--lh-body);}
.post-readmore{font-size:var(--fs-small);font-weight:700;margin-top:auto;padding-top:8px;}

/* list-row variant used on blogs.html */
.post-row{
  display:flex;
  gap:var(--space-5);
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:var(--space-5);
  align-items:flex-start;
  transition:box-shadow var(--duration-base) var(--ease-standard);
}
.post-row:hover{box-shadow:var(--shadow-raised);}
.post-row[data-open-signup]{cursor:pointer;}
.post-row .post-thumb{
  flex:0 0 220px;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--oxford-blue-050),var(--oxford-blue-100));
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--oxford-blue-300);
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.post-row .post-body{display:flex;flex-direction:column;gap:8px;flex:1;}
@media (max-width:640px){
  .post-row{flex-direction:column;}
  .post-row .post-thumb{flex:none;width:100%;}
}

/* ---------- FAQ ---------- */
.faq-section{background:var(--cream);padding:var(--space-8) 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);}
.faq-list{max-width:var(--container-narrow);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3);}
.faq-item{background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-md);}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:var(--space-4) var(--space-5);
  font-weight:700;
  color:var(--oxford-blue);
  font-size:var(--fs-body);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:20px;color:var(--gold-700);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item .faq-answer{
  padding:0 var(--space-5) var(--space-5);
  color:var(--text-body);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
}

/* ---------- inline signup band (blogs.html) ---------- */
.signup-band{
  background:var(--oxford-blue);
  color:var(--white);
  padding:var(--space-7) 0;
  text-align:center;
}
.signup-band h2{color:var(--white);font-size:var(--fs-h3);margin-bottom:8px;}
.signup-band p{color:var(--oxford-blue-100);font-size:var(--fs-body);margin-bottom:var(--space-4);}

/* ---------- footer ---------- */
.site-footer{background:var(--oxford-blue);color:var(--oxford-blue-100);padding:var(--space-7) 0 var(--space-6);}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-6);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--oxford-blue-500);
  flex-wrap:wrap;
}
.footer-brand .brand-name{color:var(--white);}
.footer-brand .brand-mark{border-color:var(--oxford-blue-100);color:var(--white);}
.footer-tagline{margin-top:8px;font-size:var(--fs-small);max-width:320px;color:var(--oxford-blue-100);}
.footer-cols{display:flex;gap:var(--space-8);flex-wrap:wrap;}
.footer-col h4{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold-300);margin-bottom:var(--space-3);}
.footer-col a{display:block;color:var(--oxford-blue-100);font-size:var(--fs-small);margin-bottom:8px;}
.footer-col a:hover{color:var(--gold-300);}
.social-row{display:flex;gap:12px;margin-top:var(--space-3);}
.social-row a{
  width:36px;height:36px;
  border:1px solid var(--oxford-blue-500);
  border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  color:var(--oxford-blue-100);
}
.social-row a:hover{border-color:var(--gold);color:var(--gold-300);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:var(--space-5);
  font-size:var(--fs-caption);
  color:var(--oxford-blue-300);
  flex-wrap:wrap;
  gap:8px;
}

/* ---------- individual post page ---------- */
.post-page-header{max-width:var(--container-narrow);margin:0 auto;padding:var(--space-7) var(--space-4) 0;}
.post-page-header h1{font-size:var(--fs-h1);color:var(--oxford-blue);line-height:var(--lh-heading);}
.post-page-meta{display:flex;gap:var(--space-3);align-items:center;color:var(--text-muted);font-size:var(--fs-small);margin-top:var(--space-3);}
.post-content{max-width:var(--container-narrow);margin:0 auto;padding:var(--space-6) var(--space-4) 0;}
.post-content p{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:var(--space-4);}
.post-nav-buttons{
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  max-width:var(--container-narrow);
  margin:var(--space-7) auto 0;
  padding:var(--space-5) var(--space-4) var(--space-9);
  border-top:1px solid var(--border-hairline);
}
.post-nav-buttons .btn.disabled{
  opacity:0.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(16,20,24,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  z-index:100;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-raised);
  max-width:480px;
  width:100%;
  padding:var(--space-6);
  position:relative;
  max-height:90vh;
  overflow-y:auto;
}
.modal-close{
  position:absolute;
  top:var(--space-4);
  right:var(--space-4);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-muted);
  font-size:20px;
  line-height:1;
}
.modal-close:hover{color:var(--oxford-blue);}
.modal h3{font-size:var(--fs-h3);color:var(--oxford-blue);margin-bottom:8px;}
.modal p.modal-sub{color:var(--text-muted);font-size:var(--fs-small);margin-bottom:var(--space-5);}
.gate-note{
  display:none; /* toggled on by script.js when a post is gated behind this form */
  background:var(--gold-100);
  border:1px solid var(--gold-300);
  color:var(--gold-700);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:var(--fs-small);
  margin-bottom:var(--space-5);
}

.field{margin-bottom:var(--space-4);}
.field label{display:block;font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.field input[type="text"],
.field input[type="email"],
.field select{
  width:100%;
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  padding:10px 12px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--text-body);
}
.field input:focus,.field select:focus{border-color:var(--oxford-blue);}
.checkbox-grid{display:flex;flex-wrap:wrap;gap:10px;}
.checkbox-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius-pill);
  padding:6px 12px;
  font-size:var(--fs-small);
  cursor:pointer;
}
.checkbox-pill input{accent-color:var(--oxford-blue);}
.form-note{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--space-3);}
.form-success{
  display:none;
  background:var(--success-bg);
  color:var(--success);
  border:1px solid var(--success);
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);
  font-size:var(--fs-small);
  margin-top:var(--space-4);
}
.form-success.show{display:block;}

/* inline (non-modal) signup form used in the band on blogs.html */
.inline-signup-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  max-width:560px;
  margin:0 auto;
}
.inline-signup-form input[type="email"]{
  flex:1 1 240px;
  font-family:var(--font-serif);
  font-size:var(--fs-body);
  padding:11px 14px;
  border:1px solid var(--oxford-blue-300);
  border-radius:var(--radius-sm);
}

/* page intro (blogs.html) */
.page-intro{padding:var(--space-7) 0 var(--space-6);}
.page-intro h1{font-size:var(--fs-h1);color:var(--oxford-blue);}
.page-intro p{margin-top:8px;color:var(--text-muted);font-size:var(--fs-body);max-width:640px;}