:root{
  --bg:#eef3fb;
  --surface:#fffdf8;
  --surface-soft:#fbf8f1;
  --text:#14294d;
  --muted:#5f6f8b;
  --line:#d7e1f3;
  --blue:#2d5ee8;
  --navy:#162c57;
  --green:#1f8b57;
  --yellow:#ffc53a;
  --shadow:0 18px 40px rgba(18,41,77,.08);
  --radius:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#edf2f7 0%,#f7f3eb 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.7;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}

.site-inner{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
}

.site-shell{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,243,235,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,218,201,.9);
}

.shell-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
}

.brand-lockup:hover{text-decoration:none}

.brand-lockup img{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 14px 28px rgba(17,29,53,.16);
}

.brand-text{
  display:grid;
  gap:2px;
}

.brand-text strong{
  font-size:1rem;
  line-height:1.1;
}

.brand-text span{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.2;
}

.shell-nav{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.shell-nav a{
  color:var(--navy);
  font-weight:700;
}

.hero-band{
  background:linear-gradient(180deg,#fbf8f1 0%,#f3f7fc 100%);
  border-bottom:1px solid rgba(226,218,201,.85);
}

.article-hero,
.collection-hero{
  padding:56px 0 42px;
}

.article-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:28px;
  align-items:start;
}

.eyebrow,
.section-kicker,
.summary-label,
.related-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.eyebrow{
  background:#f5efe0;
  color:#8a5b09;
  border:1px solid #e6d5b2;
}

.article-copy h1,
.collection-hero h1{
  margin:18px 0 14px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:0;
}

.lede{
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
  max-width:700px;
}

.meta-row,
.card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
  color:var(--muted);
  font-size:.92rem;
}

.meta-row span,
.card-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#fffdf8;
  border:1px solid #e6dcc9;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:900;
  font-size:1rem;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}

.btn-primary{
  background:var(--yellow);
  color:var(--navy);
  box-shadow:0 14px 28px rgba(255,197,58,.26);
}

.btn-secondary{
  background:#fffdf8;
  color:var(--navy);
  border-color:var(--line);
}

.btn-block{
  width:100%;
}

.article-aside{
  display:grid;
  gap:16px;
}

.summary-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.summary-card h2{
  margin:12px 0 10px;
  font-size:1.25rem;
  line-height:1.2;
}

.summary-card p{
  margin:0;
  color:var(--muted);
}

.summary-card-accent{
  background:linear-gradient(180deg,#f6fbff 0%,#ffffff 100%);
  border-color:#cfe0ff;
}

.summary-label{
  background:#ecf9f1;
  color:var(--green);
  border:1px solid #bfe9cf;
}

.article-layout,
.blog-index-layout{
  padding:30px 0 56px;
}

.article-card,
.article-section,
.cta-panel,
.blog-index-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.article-card{
  padding:32px;
}

.article-card h2,
.article-section h2{
  margin:26px 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  font-size:1.6rem;
  font-weight:700;
  line-height:1.16;
}

.article-card h2:first-child{
  margin-top:0;
}

.article-card h3{
  margin:22px 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  font-size:1.18rem;
  font-weight:700;
  line-height:1.25;
}

.article-card p,
.article-card li{
  color:var(--text);
  font-size:1rem;
}

.article-card p{
  margin:0 0 16px;
}

.article-card ul,
.article-card ol{
  margin:0 0 18px 20px;
  padding:0;
}

.article-card li + li{
  margin-top:8px;
}

.table-wrap{
  overflow:auto;
  margin:0 0 18px;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

th,
td{
  padding:14px 16px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

th{
  background:#f8f1e5;
  color:var(--navy);
  font-size:.92rem;
}

td{
  background:#fffaf2;
}

code{
  background:#eef3fb;
  border:1px solid var(--line);
  border-radius:8px;
  padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.92em;
}

.article-section{
  margin-top:20px;
  padding:28px;
  background:linear-gradient(180deg,#fffdf8 0%,#faf5ec 100%);
}

.section-kicker{
  background:#edf3ff;
  color:var(--blue);
  border:1px solid #cfe0ff;
}

.faq-stack{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.faq-item{
  background:linear-gradient(180deg,#fffdf8 0%,#faf5ec 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 18px;
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  color:var(--navy);
  font-weight:800;
}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item p{
  margin:0 0 16px;
  color:var(--muted);
}

.related-grid,
.blog-index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.related-card,
.blog-index-card{
  padding:22px;
}

.related-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--text);
  text-decoration:none;
}

.related-card:hover{
  text-decoration:none;
  border-color:#cfe0ff;
}

.related-card strong,
.blog-index-card h2{
  color:var(--navy);
}

.related-card p,
.blog-index-card p{
  margin:0;
  color:var(--muted);
}

.related-badge{
  width:fit-content;
  background:#fef5da;
  color:#8a5a00;
  border:1px solid #f4d173;
}

.related-link,
.card-link{
  color:var(--blue);
  font-weight:800;
}

.blog-index-card h2{
  margin:12px 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.34rem;
  font-weight:700;
  line-height:1.18;
}

.blog-index-card h2 a{
  color:inherit;
}

.cta-panel{
  margin-top:24px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(180deg,#fffaf3 0%,#f4ede1 100%);
  border:1px solid #e1d5be;
  box-shadow:0 14px 26px rgba(17,29,53,.05);
}

.cta-panel h2{
  margin:8px 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  font-size:1.65rem;
  font-weight:700;
  line-height:1.16;
}

.cta-panel p{
  margin:0;
  color:var(--muted);
  max-width:720px;
}

.cta-panel .section-kicker{
  background:#f4efe2;
  color:var(--navy);
  border-color:#e3d6bf;
}

.site-footer{
  border-top:1px solid rgba(215,225,243,.9);
  background:#fbf6ee;
}

.footer-row{
  padding:22px 0 34px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.footer-row p{
  margin:0;
  color:var(--muted);
  max-width:760px;
}

@media (max-width:980px){
  .article-hero{
    grid-template-columns:1fr;
  }

  .related-grid,
  .blog-index-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cta-panel{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:720px){
  .site-inner{
    width:min(100% - 24px,1120px);
  }

  .shell-row,
  .footer-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .article-hero,
  .collection-hero,
  .article-layout,
  .blog-index-layout{
    padding-top:28px;
  }

  .article-card,
  .article-section,
  .summary-card,
  .blog-index-card,
  .cta-panel{
    padding:22px;
  }

  .related-grid,
  .blog-index-grid{
    grid-template-columns:1fr;
  }

  .meta-row span,
  .card-meta span{
    width:100%;
    justify-content:flex-start;
  }

  .btn{
    width:100%;
  }
}