:root {
  --ink: #18221b;
  --muted: #5f6d63;
  --paper: #fbfaf5;
  --surface: #ffffff;
  --surface-soft: #f2f4ed;
  --line: #dce3d9;
  --forest: #214f3b;
  --forest-dark: #17392b;
  --gold: #c79b49;
  --gold-soft: #f3e8cf;
  --shadow: 0 18px 60px rgba(29, 55, 41, 0.12);
  --radius: 24px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(199,155,73,.12), transparent 32rem),
    linear-gradient(180deg, #fbfaf5 0%, #f7f7f1 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--forest-dark); }
button, input { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute; left: -9999px; top: 1rem; z-index: 999;
  padding: .75rem 1rem; background: var(--ink); color: white; border-radius: 8px;
}
.skip-link:focus { left: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(33,79,59,.08);
  background: rgba(251,250,245,.9);
  backdrop-filter: blur(16px);
}
.header-inner {
  width: min(calc(100% - 2rem), var(--max)); margin: 0 auto;
  min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; background: var(--forest); color:#fff; box-shadow: 0 8px 22px rgba(33,79,59,.22); }
.brand-mark svg { width: 22px; height: 22px; }
.nav { display:flex; gap: .4rem; align-items:center; }
.nav a { color: var(--muted); text-decoration:none; font-weight:700; font-size:.92rem; padding:.55rem .7rem; border-radius:999px; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--forest); background:var(--surface-soft); }
.menu-button { display:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:.55rem .7rem; }

main { min-height: 70vh; }
.hero { width:min(calc(100% - 2rem), var(--max)); margin:0 auto; padding: clamp(3.5rem, 8vw, 7rem) 0 2.5rem; text-align:center; }
.eyebrow { display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .7rem; border-radius:999px; background:var(--gold-soft); color:#75551c; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; margin:0; font-family: Georgia, "Times New Roman", serif; }
h1 { font-size:clamp(2.7rem, 7vw, 5.6rem); max-width:920px; margin:1.2rem auto 1rem; }
h2 { font-size:clamp(2rem, 4vw, 3.2rem); }
h3 { font-size:1.35rem; }
.lede { max-width:700px; margin:0 auto; color:var(--muted); font-size:clamp(1rem, 2vw, 1.2rem); }

.generator-wrap { width:min(calc(100% - 2rem), 940px); margin:0 auto clamp(4rem, 8vw, 7rem); }
.generator-card { position:relative; border:1px solid rgba(33,79,59,.12); border-radius:32px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); overflow:hidden; }
.generator-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--forest),var(--gold)); }
.controls { padding:clamp(1.3rem, 4vw, 2.2rem); display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; border-bottom:1px solid var(--line); }
.control-group { border:0; padding:0; margin:0; }
.control-group legend { font-weight:800; margin-bottom:.65rem; }
.segmented { display:flex; flex-wrap:wrap; gap:.55rem; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { display:inline-flex; align-items:center; min-height:44px; padding:.55rem .82rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--muted); font-weight:700; transition:.18s ease; }
.choice input:checked + span { color:white; border-color:var(--forest); background:var(--forest); box-shadow:0 5px 15px rgba(33,79,59,.2); }
.choice input:focus-visible + span { outline:3px solid rgba(199,155,73,.4); outline-offset:2px; }
.primary-action { grid-column:1 / -1; display:flex; justify-content:center; padding-top:.35rem; }
.primary-button { border:0; border-radius:16px; min-height:58px; padding:.85rem 1.4rem; color:white; background:var(--forest); font-weight:850; font-size:1.04rem; box-shadow:0 10px 28px rgba(33,79,59,.25); transition:transform .18s ease, background .18s ease; }
.primary-button:hover { transform:translateY(-2px); background:var(--forest-dark); }
.primary-button:active { transform:translateY(0); }
.primary-button:focus-visible, .action-button:focus-visible, .menu-button:focus-visible { outline:3px solid rgba(199,155,73,.55); outline-offset:3px; }

.result-panel { padding:clamp(1.6rem, 5vw, 3rem); min-height:360px; display:flex; flex-direction:column; justify-content:center; }
.result-placeholder { text-align:center; color:var(--muted); max-width:540px; margin:auto; }
.result-placeholder svg { margin:0 auto 1rem; width:52px; color:var(--gold); }
.result-content { animation:reveal .4s ease; }
@keyframes reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.result-kicker { color:var(--gold); text-transform:uppercase; font-weight:850; letter-spacing:.09em; font-size:.78rem; }
.result-reference { margin:.35rem 0 1.1rem; color:var(--forest); font-size:clamp(1.7rem, 4vw, 2.5rem); }
.passage-text { margin:0; white-space:pre-line; font-family:Georgia, "Times New Roman", serif; font-size:clamp(1.2rem, 2.7vw, 1.55rem); line-height:1.75; }
.result-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.7rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.action-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:.55rem .8rem; background:var(--surface); color:var(--ink); font-weight:750; text-decoration:none; }
.action-button:hover { border-color:#bac9bc; background:var(--surface-soft); color:var(--forest); }
.action-button.primary-small { background:var(--forest); color:#fff; border-color:var(--forest); }
.source-note { margin-top:1rem; color:var(--muted); font-size:.82rem; }

.section { width:min(calc(100% - 2rem), var(--max)); margin:0 auto; padding:clamp(3.5rem, 8vw, 6rem) 0; }
.section-heading { max-width:700px; margin-bottom:2rem; }
.section-heading p { color:var(--muted); font-size:1.05rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.info-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1.35rem; }
.info-card .number { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--gold-soft); color:#74551c; font-weight:900; margin-bottom:1rem; }
.info-card p { color:var(--muted); margin-bottom:0; }
.context-box { display:grid; grid-template-columns:1.15fr .85fr; gap:1.2rem; align-items:stretch; }
.context-copy, .context-aside { border-radius:24px; padding:clamp(1.4rem,4vw,2.3rem); }
.context-copy { background:var(--forest); color:#fff; }
.context-copy p { color:rgba(255,255,255,.78); }
.context-copy a { color:#fff; }
.context-aside { background:var(--gold-soft); color:#674a18; display:flex; flex-direction:column; justify-content:center; }
.context-aside p { margin-bottom:0; }

.page-hero { width:min(calc(100% - 2rem), 820px); margin:0 auto; padding:clamp(3.5rem,8vw,6.5rem) 0 2rem; }
.page-hero h1 { margin:.8rem 0 1rem; font-size:clamp(2.5rem,6vw,4.5rem); }
.page-hero p { color:var(--muted); font-size:1.12rem; max-width:680px; }
.prose { width:min(calc(100% - 2rem), 820px); margin:0 auto; padding:1rem 0 5rem; }
.prose h2 { margin-top:2.5rem; font-size:2rem; }
.prose h3 { margin-top:1.8rem; }
.prose p, .prose li { color:#465349; }
.prose li + li { margin-top:.4rem; }
.notice { border-left:4px solid var(--gold); background:var(--gold-soft); padding:1rem 1.2rem; border-radius:0 14px 14px 0; }
.placeholder { padding:.8rem 1rem; border:1px dashed #b8aa8b; background:#fffdf5; border-radius:12px; }

.site-footer { border-top:1px solid var(--line); background:#f0f2eb; }
.footer-inner { width:min(calc(100% - 2rem), var(--max)); margin:0 auto; padding:2.5rem 0; display:grid; grid-template-columns:1fr auto; gap:2rem; }
.footer-copy p { color:var(--muted); margin:.5rem 0 0; max-width:560px; }
.footer-links { display:grid; grid-template-columns:repeat(2,auto); align-content:start; gap:.5rem 1.4rem; }
.footer-links a { text-decoration:none; font-weight:700; }
.footer-bottom { width:min(calc(100% - 2rem), var(--max)); margin:0 auto; padding:1rem 0 1.7rem; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.toast { position:fixed; right:1rem; bottom:1rem; z-index:50; max-width:min(360px,calc(100% - 2rem)); padding:.8rem 1rem; border-radius:12px; background:var(--ink); color:#fff; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(1rem); transition:.25s ease; }
.toast.show { opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width: 760px) {
  .menu-button { display:inline-flex; }
  .nav { display:none; position:absolute; top:68px; left:1rem; right:1rem; padding:.7rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav.open { display:flex; }
  .nav a { padding:.7rem .8rem; }
  .controls, .grid-3, .context-box, .footer-inner { grid-template-columns:1fr; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .primary-action { grid-column:auto; }
  h1 { font-size:clamp(2.45rem, 14vw, 4.2rem); }
  .result-actions .action-button { flex:1 1 calc(50% - .5rem); }
}

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