:root{
  --guide-ink:#2b1934;
  --guide-muted:#685b6f;
  --guide-purple:#5a2b73;
  --guide-purple-deep:#351442;
  --guide-gold:#c69a43;
  --guide-paper:#fffdf8;
  --guide-line:rgba(90,43,115,.18);
}

*{box-sizing:border-box}

html{min-height:100%;scroll-behavior:smooth}

body.oo-guides-page{
  min-height:100vh;
  margin:0;
  padding:0;
  color:var(--guide-ink);
  background:
    radial-gradient(circle at 50% 0,rgba(198,154,67,.15),transparent 36rem),
    linear-gradient(180deg,#170b20 0,#0e0714 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.guide-site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:min(1180px,calc(100% - 40px));
  min-height:78px;
  margin:0 auto;
}

.guide-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#f8e5ae;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  font-weight:700;
  text-decoration:none;
}

.guide-brand img{
  width:42px;
  height:42px;
  border:1px solid rgba(246,220,145,.65);
  border-radius:50%;
  background:linear-gradient(145deg,#f6dc91,#c99436);
  object-fit:contain;
  filter:brightness(.96);
}

.guide-header-link{
  color:#f6eaf8;
  font-weight:750;
  text-underline-offset:4px;
}

.guide-wrap{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:20px 0 58px;
}

.guide-hero,
.guide-article,
.guide-invitation{
  border:1px solid rgba(226,202,148,.48);
  background:linear-gradient(150deg,rgba(255,255,255,.985),rgba(253,246,255,.97));
  box-shadow:0 24px 65px rgba(0,0,0,.28);
}

.guide-hero{
  padding:clamp(34px,6vw,72px);
  border-radius:24px;
  text-align:center;
}

.guide-eyebrow{
  margin:0 0 13px;
  color:#75438a;
  font-size:13px;
  font-weight:850;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
}

.guide-hero h1,
.guide-article h1{
  margin:0;
  color:var(--guide-purple-deep);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(40px,6vw,68px);
  line-height:1.04;
  letter-spacing:-.035em;
}

.guide-lead,
.guide-summary{
  max-width:800px;
  margin:22px auto 0;
  color:#514258;
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.62;
}

.guide-category{margin-top:48px}

.guide-category > h2{
  margin:0 0 18px;
  color:#f4daa0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4vw,40px);
  line-height:1.15;
}

.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.guide-card{
  display:flex;
  min-height:280px;
  flex-direction:column;
  padding:26px;
  border:1px solid rgba(224,202,151,.38);
  border-radius:18px;
  background:rgba(255,253,248,.97);
  color:var(--guide-ink);
  text-decoration:none;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.guide-card:hover,
.guide-card:focus-visible{
  border-color:#e1bd6a;
  outline:none;
  transform:translateY(-3px);
  box-shadow:0 20px 45px rgba(0,0,0,.28);
}

.guide-card-category{
  color:#7b4b8d;
  font-size:12px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.guide-card h3{
  margin:12px 0 10px;
  color:#3b1d46;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1.2;
}

.guide-card p{
  margin:0 0 22px;
  color:var(--guide-muted);
  font-size:16px;
  line-height:1.58;
}

.guide-card-link{
  margin-top:auto;
  color:var(--guide-purple);
  font-weight:850;
}

.guide-invitation{
  margin-top:54px;
  padding:34px;
  border-radius:20px;
  text-align:center;
}

.guide-invitation h2,
.guide-reading-invitation h2,
.guide-ideas h2{
  margin:0 0 10px;
  color:var(--guide-purple-deep);
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
}

.guide-invitation p{
  max-width:700px;
  margin:0 auto 20px;
  color:var(--guide-muted);
  font-size:17px;
  line-height:1.6;
}

.guide-invitation .oo-btn,
.guide-reading-invitation .oo-btn{
  border:1px solid #7d4b91;
  background:linear-gradient(135deg,#6d3781,#4a2059);
  color:#fff;
  box-shadow:0 12px 25px rgba(62,25,76,.24);
}

.guide-invitation .oo-btn:hover,
.guide-reading-invitation .oo-btn:hover{
  border-color:#9a66ad;
  background:linear-gradient(135deg,#7a428f,#572865);
  color:#fff;
}

.guide-article-wrap{width:min(900px,calc(100% - 40px))}

.guide-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 16px;
  color:#d7c8dd;
  font-size:14px;
}

.guide-breadcrumb a{color:#f2dc9f;text-underline-offset:3px}

.guide-article{
  padding:clamp(30px,6vw,68px);
  border-radius:24px;
}

.guide-article h1{font-size:clamp(38px,6vw,62px)}

.guide-summary{
  margin:20px 0 30px;
  padding-bottom:28px;
  border-bottom:1px solid var(--guide-line);
  font-weight:650;
}

.guide-article-copy p{
  margin:0 0 20px;
  color:#403447;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  line-height:1.72;
}

.guide-ideas{
  margin-top:34px;
  padding:27px 30px;
  border:1px solid rgba(90,43,115,.2);
  border-radius:16px;
  background:#f7eff9;
}

.guide-ideas ul{margin:14px 0 0;padding-left:24px}

.guide-ideas li{
  margin:10px 0;
  color:#493d4e;
  font-size:17px;
  line-height:1.58;
}

.guide-reading-invitation{
  margin-top:30px;
  padding:28px 30px;
  border-radius:16px;
  background:linear-gradient(135deg,#f6e9c7,#f5eaf7);
}

.guide-related{
  margin-top:30px;
  padding:24px 28px;
  border:1px solid rgba(90,43,115,.16);
  border-radius:16px;
  background:#fffaf0;
}

.guide-related h2{
  margin:0 0 13px;
  color:var(--guide-purple-deep);
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
}

.guide-related ul{
  display:grid;
  gap:10px;
  margin:0;
  padding-left:21px;
}

.guide-related a{
  color:var(--guide-purple);
  font-size:17px;
  font-weight:750;
  line-height:1.45;
  text-underline-offset:4px;
}

.guide-related a:hover,
.guide-related a:focus-visible{color:#351442}

.guide-reading-invitation p{
  margin:0 0 18px;
  color:#514258;
  font-size:17px;
  line-height:1.62;
}

.guide-disclaimer{
  margin:30px 0 0;
  padding-top:20px;
  border-top:1px solid var(--guide-line);
  color:#746979;
  font-size:14px;
  line-height:1.55;
}

.guide-more{margin:20px 4px 0}
.guide-more a{color:#f3d999;font-weight:800;text-underline-offset:4px}

.guide-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px 28px;
  padding:26px 20px 38px;
  color:#d8cadd;
}

.guide-footer a{color:#e8d9ec;text-underline-offset:4px}

@media (max-width:900px){
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .guide-site-header,
  .guide-wrap,
  .guide-article-wrap{width:min(100% - 24px,1120px)}
  .guide-site-header{min-height:68px}
  .guide-brand{font-size:18px}
  .guide-brand img{width:36px;height:36px}
  .guide-grid{grid-template-columns:1fr}
  .guide-card{min-height:0;padding:22px}
  .guide-hero,
  .guide-article{border-radius:18px}
  .guide-hero h1,
  .guide-article h1{font-size:38px}
  .guide-article-copy p{font-size:18px}
  .guide-ideas,
  .guide-related,
  .guide-reading-invitation{padding:23px 21px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .guide-card{transition:none}
}