/* redesign-2026.css — opt-in "retro on purpose" skin for ryansultan.com.
   Scope: everything is under body.rd so pages opt in one at a time.
   Retains the early-web feel (silver weave, serif, blue links, bordered
   boxes) with modern readability (paper panel, 16.5px/1.6 type, spacing). */

body.rd{
  --wallpaper:#C0C0C0; --weave:rgba(0,0,0,.045);
  --paper:#FBF7ED; --paper-2:#F3EEDE; --ink:#1E1B16; --ink-soft:#5A5346;
  --navy:#1B3A5C; --link:#0A39C0; --link-visited:#5C3E86; --ochre:#9A5B00;
  --ochre-tint:#FBF2D9; --navy-tint:#EAF0F4; --rule:#2A2620; --hair:#CFC7B2;
  --cta-bg:#1B3A5C; --cta-ink:#FBF7ED; --shadow:rgba(38,34,28,.22);
  --navy-deep:#16304A; --gold:#E4B24A; --gold-ink:#3A2A05; --hero-ink:#F4EFE3; --hero-soft:#B9C6D4;

  background-color:var(--wallpaper);
  background-image:repeating-linear-gradient(45deg,var(--weave) 0 2px,transparent 2px 7px);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.62;
  padding-bottom:76px;
}
@media (prefers-color-scheme:dark){
  body.rd{
    --wallpaper:#121016; --weave:rgba(255,255,255,.035);
    --paper:#201C16; --paper-2:#28241C; --ink:#ECE6D8; --ink-soft:#A79E8A;
    --navy:#9FBBD8; --link:#8FB2FF; --link-visited:#C1A6E6; --ochre:#E2A64A;
    --ochre-tint:#2E271A; --navy-tint:#1B2530; --rule:#4A4438; --hair:#3B372E;
    --cta-bg:#9FBBD8; --cta-ink:#14120E; --shadow:rgba(0,0,0,.5);
  }
}

/* ---- top nav bar (restyle the existing <header><center>) ---- */
body.rd:not(.rd-legacy) header[role="banner"]{
  background:var(--paper); border:none; border-bottom:1px solid var(--rule);
  box-shadow:0 2px 0 var(--shadow); margin:0; padding:12px 16px 10px;
}
body.rd:not(.rd-legacy) header[role="banner"] center{display:block;}
body.rd:not(.rd-legacy) header[role="banner"] center p:first-child{
  font-family:Georgia,serif; font-size:1.15rem !important; font-weight:700;
  color:var(--navy) !important; margin:0 0 6px !important;
}
body.rd:not(.rd-legacy) header[role="banner"] center p:nth-child(2){margin:0; line-height:1.9;}
body.rd:not(.rd-legacy) header[role="banner"] a{color:var(--link); text-decoration:none;}
body.rd:not(.rd-legacy) header[role="banner"] a:hover{text-decoration:underline;}
/* breadcrumb line sits just under the bar */
body.rd:not(.rd-legacy) header[role="banner"] > p{
  max-width:680px; margin:10px auto 0 !important; font-family:"Courier New",monospace;
  font-size:.74rem !important; color:var(--ink-soft) !important;
}
body.rd:not(.rd-legacy) header[role="banner"] hr{display:none;}

/* ---- the paper panel ----
   Blog posts wrap everything in <article>; most content pages use <main>.
   Either becomes the panel. When <main> is nested inside <article>
   (blog posts), the outer <article> is the panel and the inner <main>
   is neutralized so we don't get a panel-in-panel. */
body.rd:not(.rd-home) article,
body.rd:not(.rd-home) main{
  max-width:680px; margin:22px auto; background:var(--paper);
  border:1px solid var(--rule); box-shadow:4px 4px 0 var(--shadow);
  padding:26px 20px 30px;
}
@media(min-width:560px){body.rd:not(.rd-home) article, body.rd:not(.rd-home) main{padding:38px 46px 42px; margin:30px auto;}}
body.rd article main{
  max-width:none; margin:0; background:none; border:none; box-shadow:none; padding:0;
}
body.rd article > hr{display:none;}

/* ---- typography ---- */
body.rd h1{font-family:Georgia,serif; font-size:1.95rem; line-height:1.15; font-weight:700;
  color:var(--ink); text-wrap:balance; letter-spacing:-.01em; margin:.2em 0 .5em;}
@media(min-width:560px){body.rd h1{font-size:2.3rem;}}
body.rd h2{font-family:Georgia,serif; font-size:1.5rem; line-height:1.2; margin:1.7em 0 .5em; color:var(--ink);}
body.rd h3{font-family:Georgia,serif; color:var(--navy);}
body.rd p, body.rd li{font-size:1.03rem;}
/* beat the legacy #main-content p { font-size:14pt } / tight line-height */
body.rd article p, body.rd article li,
body.rd main p, body.rd main li{font-size:1.06rem !important; line-height:1.62 !important;}
body.rd a{color:var(--link);}
body.rd a:visited{color:var(--link-visited);}

/* byline */
body.rd .author-byline{font-family:"Courier New",monospace; font-size:.82rem; line-height:1.6;
  color:var(--ink-soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:12px 0; margin:0 0 24px; font-style:normal;}
body.rd .author-byline strong{color:var(--ink);}
body.rd .author-byline p{font-size:.82rem; margin:0;}

/* ---- callout boxes (tables with bgcolor) → one system, two accents ---- */
body.rd article table[bgcolor]{
  border:1px solid var(--hair) !important; border-left:4px solid var(--navy) !important;
  background:var(--navy-tint) !important; box-shadow:none !important; margin:0 0 24px;
}
body.rd article table[bgcolor="#FFFACD"]{
  border-left-color:var(--ochre) !important; background:var(--ochre-tint) !important;
}
body.rd article table[bgcolor] td{padding:16px 18px !important; border:none !important;}
body.rd article table[bgcolor] p{margin:0; font-size:1.02rem; color:var(--ink);}
body.rd article table[bgcolor] b, body.rd article table[bgcolor] strong{color:var(--ink);}

/* ---- data table (no bgcolor) → tidy retro table ---- */
body.rd article table:not([bgcolor]){
  border:1px solid var(--rule) !important; border-collapse:collapse; width:100%;
  background:var(--paper); font-size:.95rem; margin:0 0 24px;
}
body.rd article table:not([bgcolor]) td{padding:11px 13px !important; border:none !important;
  border-top:1px solid var(--hair) !important; vertical-align:top;}
body.rd article table:not([bgcolor]) tr:first-child td{
  background:var(--navy); color:var(--paper); font-weight:700; border-top:none !important;
  font-family:"Courier New",monospace; font-size:.8rem; letter-spacing:.03em;
}
body.rd article table:not([bgcolor]) tr:nth-child(even):not(:first-child){background:var(--paper-2);}

/* ---- footer harmonize (keep the dark directory footer) ---- */
body.rd .site-footer{border-top:1px solid var(--rule);}

/* ---- slim sticky Consultation dock ---- */
.rd-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--paper,#FBF7ED);
  border-top:1px solid #2A2620; box-shadow:0 -2px 0 rgba(38,34,28,.22);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px;
}
.rd-dock .say{font-family:"Courier New",monospace; font-size:.78rem; color:#5A5346;}
.rd-dock .say b{color:#1E1B16;}
.rd-dock a{background:#1B3A5C; color:#FBF7ED; text-decoration:none; font-family:"Courier New",monospace;
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:10px 18px;
  border:1px solid #2A2620; box-shadow:2px 2px 0 rgba(38,34,28,.22); white-space:nowrap;}
.rd-dock a:hover{transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(38,34,28,.22);}
@media (prefers-color-scheme:dark){
  .rd-dock{background:#201C16; border-top-color:#4A4438;}
  .rd-dock .say{color:#A79E8A;} .rd-dock .say b{color:#ECE6D8;}
  .rd-dock a{background:#9FBBD8; color:#14120E; border-color:#4A4438;}
}
@media(max-width:420px){.rd-dock .say{display:none;} .rd-dock{justify-content:center;}}

body.rd a:focus-visible{outline:3px solid var(--link); outline-offset:2px;}

/* featured-snippet data table (answer blocks) */
body.rd .rd-answer-table{border-collapse:collapse; width:100%; margin:0 0 22px; background:var(--paper);
  border:1px solid var(--rule) !important; font-size:.98rem;}
body.rd .rd-answer-table td{border:1px solid var(--hair) !important; padding:11px 13px; vertical-align:top;}
body.rd .rd-answer-table tr:first-child td{background:var(--navy); color:var(--paper);
  font-family:"Courier New",monospace; font-size:.8rem; letter-spacing:.03em;}
body.rd .rd-answer-table tr:nth-child(even):not(:first-child) td{background:var(--paper-2);}

/* ---- legacy pages: content lives inside <header role=banner>; panel the header ---- */
body.rd.rd-legacy header[role="banner"]{
  background:var(--paper) !important; color:var(--ink);
  border:1px solid var(--rule) !important; box-shadow:4px 4px 0 var(--shadow) !important;
  position:static !important; max-width:720px; margin:22px auto !important; padding:26px 20px 30px !important;}
@media(min-width:560px){body.rd.rd-legacy header[role="banner"]{padding:34px 40px !important; margin:30px auto !important;}}
body.rd.rd-legacy header[role="banner"] h1{font-family:Georgia,serif !important; color:var(--ink) !important;}
body.rd.rd-legacy header[role="banner"] a{color:var(--link) !important;}
body.rd.rd-legacy .container{max-width:none !important; padding:0 !important;}

/* ============================================================
   HOMEPAGE full retro conversion — body.rd.rd-home
   Panels each <section> (not the whole <main>), rethemes hero,
   cards, stats, and media bar into the retro system.
   ============================================================ */
.rd-home main{background:none; border:none; box-shadow:none; padding:0; margin:0; max-width:none;}

/* blinking cursor */
.rd-cur{display:inline-block; width:.55em; height:1em; background:currentColor;
  transform:translateY(.12em); margin-left:3px; animation:rdblink 1.1s steps(1) infinite;}
@keyframes rdblink{50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){.rd-cur{animation:none;}}

/* ---- HERO ---- */
.rd-home .home-hero{
  background:var(--navy-deep) !important; color:var(--hero-ink);
  border:1px solid var(--rule); box-shadow:4px 4px 0 var(--shadow);
  max-width:720px; margin:22px auto !important; padding:30px 22px 34px !important;
}
@media(min-width:560px){.rd-home .home-hero{padding:42px 46px !important; margin:30px auto !important;}}
.rd-home .rd-kicker{font-family:"Courier New",monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;}
.rd-home .home-hero-title{font-family:Georgia,"Times New Roman",serif !important; font-weight:700 !important;
  color:var(--hero-ink) !important; letter-spacing:-.01em !important;
  font-size:clamp(1.9rem,5.2vw,2.5rem) !important; line-height:1.13 !important; text-wrap:balance;}
.rd-home .home-hero-sub{color:var(--hero-soft) !important; font-size:1.03rem !important; opacity:1 !important;}
.rd-home .btn-primary-gold{
  background:var(--gold) !important; color:var(--gold-ink) !important;
  font-family:"Courier New",monospace !important; font-weight:700 !important; text-transform:uppercase;
  letter-spacing:.05em; font-size:.82rem !important; padding:13px 22px !important;
  border:1px solid var(--rule) !important; box-shadow:3px 3px 0 rgba(0,0,0,.35);}
.rd-home .btn-primary-gold:hover{transform:translate(1px,1px);}
.rd-home .btn-secondary-white{
  font-family:"Courier New",monospace !important; text-transform:uppercase; letter-spacing:.05em;
  font-size:.82rem !important; padding:13px 22px !important; color:var(--hero-ink) !important;
  border:1px solid var(--hero-soft) !important;}
.rd-home .home-hero-stats{background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.14);}
.rd-home .stat-num{color:var(--gold) !important; font-family:Georgia,serif !important;}
.rd-home .stat-label{font-family:"Courier New",monospace; font-size:.62rem !important; letter-spacing:.06em; text-transform:uppercase;}

/* ---- media / featured strip ---- */
.rd-home .media-bar{background:none !important; border:none !important; max-width:720px; margin:2px auto 0 !important;
  font-family:"Courier New",monospace; color:var(--ink);}
.rd-home .media-bar-label{color:var(--ink-soft) !important; letter-spacing:.14em; text-transform:uppercase;}
.rd-home .media-bar-item{color:var(--ink) !important;}
.rd-home .rainbow-hr{display:none;}

/* ---- content sections -> paper panels ---- */
.rd-home .content-section{
  background:var(--paper) !important; color:var(--ink);
  border:1px solid var(--rule); box-shadow:4px 4px 0 var(--shadow);
  max-width:720px !important; margin:22px auto !important; padding:26px 20px 30px !important;}
@media(min-width:560px){.rd-home .content-section{padding:34px 40px !important; margin:30px auto !important;}}
.rd-home .section-title{font-family:Georgia,serif !important; color:var(--navy) !important;
  font-size:1.6rem !important; text-wrap:balance;}
.rd-home .section-sub{color:var(--ink-soft) !important; font-size:1.02rem !important;}
.rd-home .content-section p, .rd-home .content-section li{color:var(--ink);}
.rd-home .content-section a{color:var(--link);}

/* ---- cards -> retro ---- */
.rd-home .help-card, .rd-home .resource-card{
  background:var(--paper-2) !important; border:1px solid var(--hair) !important;
  border-left:4px solid var(--navy) !important; box-shadow:3px 3px 0 var(--shadow) !important;}
.rd-home .resource-card{border-left-color:var(--ochre) !important;}
.rd-home .help-card:hover, .rd-home .resource-card:hover{
  transform:translate(1px,1px); box-shadow:2px 2px 0 var(--shadow) !important;}
.rd-home .help-card h3{font-family:Georgia,serif !important; color:var(--navy) !important;}
.rd-home .resource-card h3{font-family:Georgia,serif !important; color:var(--ochre) !important;}
.rd-home .resource-card-featured{background:var(--ochre-tint) !important; border-color:var(--ochre) !important;}
.rd-home .topic-links{background:var(--ochre-tint) !important; border:1px solid var(--hair) !important;
  border-left:4px solid var(--ochre) !important;}
.rd-home .topic-col h4{font-family:Georgia,serif !important; color:var(--navy) !important;}

/* inner callout tables (bgcolor) -> retro boxes (all rd pages, incl main-based) */
body.rd table[bgcolor]{border:1px solid var(--hair) !important; border-left:4px solid var(--navy) !important;
  background:var(--navy-tint) !important; box-shadow:none !important;}
body.rd table[bgcolor="#FFFACD"], body.rd table[bgcolor="#FFF8DC"]{
  border-left-color:var(--ochre) !important; background:var(--ochre-tint) !important;}
body.rd table[bgcolor] td{border:none !important; padding:16px 18px !important;}
/* neutralize loud red labels inside boxes -> ochre */
body.rd table[bgcolor] [style*="CC0000"], body.rd table[bgcolor] [style*="cc0000"]{color:var(--ochre) !important;}

/* ---- services (navy) section -> framed panel ---- */
.rd-home .services-section{
  background:var(--navy-deep) !important; max-width:720px; margin:22px auto !important;
  border:1px solid var(--rule); box-shadow:4px 4px 0 var(--shadow); padding:30px 22px !important;}
@media(min-width:560px){.rd-home .services-section{padding:42px 40px !important; margin:30px auto !important;}}
.rd-home .services-section h2{font-family:Georgia,serif !important;}

/* ---- homepage nav: keep apple-nav structure, retheme to retro ---- */
body.rd .apple-nav{background:var(--paper) !important;}
body.rd .apple-nav-logo{color:var(--navy) !important; margin-right:16px;}
body.rd .apple-nav-links a{color:var(--link) !important;}
body.rd .apple-nav .btn-apple{
  background:var(--gold) !important; background-image:none !important; color:var(--gold-ink) !important;
  font-family:"Courier New",monospace !important; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--rule) !important; box-shadow:2px 2px 0 var(--shadow) !important;}
body.rd .apple-nav .btn-apple:hover{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--shadow) !important;}
body.rd .apple-nav-toggle span{background:var(--navy) !important;}

/* ---- footer harmonize + mono cursor line ---- */
.rd-home .rd-foot{max-width:720px; margin:16px auto 0; text-align:center;
  font-family:"Courier New",monospace; font-size:.72rem; color:var(--ink); opacity:.85;}