/* ==========================================================================
   The AI Ronin Lab — shared styles for the standard content pages
   (About, Contact, Privacy, Affiliate Disclosure, Terms).

   Same sakura design tokens as the homepage and the AI Tool Finder. No
   framework, no build step, works over file://.
   ========================================================================== */

:root {
  --cream:#fff8ef;
  --paper:#fffdf9;
  --navy:#172040;
  --muted:#5f6476;
  --coral:#ff735c;
  --coral2:#ff8f77;
  --sky:#44b9e9;
  --line:#f0dbc9;
  --shadow:0 18px 55px rgba(128,84,52,.11);
}

* { box-sizing:border-box }

body {
  margin:0;
  background:
    radial-gradient(circle at 85% 4%,rgba(255,189,163,.18),transparent 20%),
    radial-gradient(circle at 0% 60%,rgba(255,218,199,.22),transparent 18%),
    var(--cream);
  color:var(--navy);
  font-family:Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a { color:#c4503c; text-decoration:underline; text-underline-offset:2px }
a:hover { color:var(--coral) }
button { font:inherit; cursor:pointer }

.wrap { width:min(1180px,calc(100% - 30px)); margin:auto }

/* ---- skip link ---- */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:300;
  background:#fff; color:var(--navy); padding:12px 18px;
  border-radius:0 0 14px 0; font-weight:900; text-decoration:none;
}
.skip-link:focus { left:0 }

/* ---- header ---- */
.topbar {
  position:sticky; top:10px; z-index:50;
  width:min(1180px,calc(100% - 30px)); margin:18px auto 0;
  min-height:72px; padding:10px 16px 10px 12px;
  display:flex; align-items:center; gap:24px;
  border:1px solid var(--line); border-radius:28px;
  background:rgba(255,253,249,.90); backdrop-filter:blur(18px);
  box-shadow:0 12px 35px rgba(118,79,45,.08);
}
.brand { display:flex; align-items:center; gap:11px; margin-right:auto; text-decoration:none; color:inherit }
.brand strong { font-size:20px; letter-spacing:-.02em }
.logo {
  width:54px; height:54px; object-fit:contain; border-radius:18px;
  background:#fff3e6; padding:3px; border:1px solid #f4dfcd;
}
.nav { display:flex; gap:26px; font-size:14px; font-weight:800 }
.nav a { padding:10px 2px; color:inherit; text-decoration:none }
.nav a:hover { color:var(--coral) }

/* ---- page body ---- */
.page {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:46px 52px;
  margin:26px auto 40px;
  max-width:820px;
}
.page-kicker {
  display:inline-flex; align-items:center; gap:8px;
  color:#df5f50; background:#fff3eb; border:1px solid #ffd6c7;
  padding:8px 13px; border-radius:999px; font-size:13px; font-weight:900;
}
.page h1 {
  margin:18px 0 6px; font-size:clamp(32px,4.4vw,44px);
  letter-spacing:-.04em; line-height:1.08; font-weight:950;
}
.page h1 span { color:var(--sky) }
.page .updated { margin:0 0 26px; color:var(--muted); font-size:14px }
.page h2 {
  margin:36px 0 10px; font-size:22px; letter-spacing:-.025em;
  padding-top:22px; border-top:1px solid var(--line);
}
.page h2:first-of-type { border-top:0; padding-top:0 }
.page h3 { margin:22px 0 6px; font-size:17px; letter-spacing:-.015em }
.page p { margin:0 0 14px; color:#3d445c }
.page ul, .page ol { margin:0 0 16px; padding-left:22px; color:#3d445c }
.page li { margin-bottom:8px }
.page strong { font-weight:900 }

.callout {
  background:#f5f1ff; border:1.5px solid #e4dfff; border-radius:20px;
  padding:20px 24px; margin:22px 0;
}
.callout.warm { background:#fff3ec; border-color:#ffd8ca }
.contact-email { font-size:clamp(20px,3.4vw,26px); font-weight:900; letter-spacing:-.02em; margin-bottom:8px }
.contact-email a { text-decoration:none }
.contact-email a:hover { text-decoration:underline }
.callout p:last-child { margin-bottom:0 }

.pill-list { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:18px 0; list-style:none }
.pill-list li {
  font-size:12.5px; font-weight:900; padding:8px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:#6a5f6e; margin:0;
}
.pill-list li::before { content:"✓ "; color:#5fb56a }

.config-slot {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; background:#172040; color:#e8ecff;
  padding:14px 16px; border-radius:12px; overflow-x:auto;
}

/* ---- footer (shared across every page) ---- */
.site-footer {
  border-top:1px solid var(--line);
  margin-top:10px; padding:30px 0 44px;
  color:var(--muted); font-size:13px;
}
.site-footer .footer-inner {
  width:min(1180px,calc(100% - 30px)); margin:auto;
  display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center;
}
.site-footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; margin-right:auto }
.site-footer nav a { color:var(--muted); text-decoration:none; font-weight:800 }
.site-footer nav a:hover { color:var(--coral); text-decoration:underline }
.site-footer .tag { color:#8b8296 }

@media (max-width:700px) {
  .page { padding:30px 22px; border-radius:22px; margin:18px auto 30px }
  .nav { display:none }
  .site-footer .footer-inner { flex-direction:column; align-items:flex-start }
  .site-footer nav { margin-right:0 }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}