:root {
  --bg: #f5f1ea;
  --bg-soft: #ece6d9;
  --surface: #fffdf8;
  --surface-alt: #ebe4d3;
  --surface-strong: #dcd2bc;
  --ink: #1a1e24;
  --text: #2b2f36;
  --muted: #6a6258;
  --line: #d9d1bf;
  --line-strong: #b8ad95;
  --accent: #8a3a1f;
  --accent-2: #6a2b14;
  --accent-soft: rgba(138,58,31,0.10);
  --secondary: #1f4e4a;
  --secondary-soft: rgba(31,78,74,0.10);
  --success: #2f5a3a;
  --warning: #a06a1b;
  --shadow-sm: 0 1px 2px rgba(20,20,20,0.04), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-md: 0 6px 18px rgba(20,20,20,0.08);
  --shadow-lg: 0 18px 44px rgba(20,20,20,0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
}

a { color: var(--accent); }
a:hover { color: var(--accent-2); }

.wrap { width: min(920px, calc(100% - 32px)); margin: 0 auto; }

.site-logo { height: 146px; width: auto; max-width: min(100%, 420px); margin-bottom: 18px; }

.site-header { padding: 56px 0 28px; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font: 600 0.86rem/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2 { line-height: 1.2; color: var(--ink); }

h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { margin: 0 0 14px; font-size: 1.55rem; }

.lead { max-width: 52rem; margin: 16px 0 0; font-size: 1.15rem; color: var(--muted); }

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

.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--surface);
  text-decoration: none;
  border-radius: 8px;
  font: 600 0.98rem/1.2 system-ui, -apple-system, sans-serif;
  transition: background 150ms ease;
}

.button::after {
  content: " \2192";
  display: inline-block;
  transition: transform 150ms ease;
}

.button:hover { background: var(--accent-2); color: var(--surface); }
.button:hover::after { transform: translateX(4px); }

.button-secondary { background: transparent; color: var(--accent); }
.button-secondary::after { display: none; }

.button-disabled, .button-disabled:hover {
  background: #6c7a74;
  border-color: #6c7a74;
  color: var(--surface);
  cursor: default;
}

.guide-grid { display: grid; gap: 22px; margin-bottom: 24px; }

.guide-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 36px);
  position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease, border-left-width 150ms ease;
}

.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-width: 8px;
}

.guide-card h2 { font-family: Georgia, serif; }
.guide-card a { text-decoration: none; color: var(--ink); }
.guide-card a:hover { color: var(--accent); }

.guide-kicker {
  margin: 0 0 10px;
  color: var(--secondary);
  font: 600 0.82rem/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

p { font-size: 1.03rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.94em;
  background: var(--surface-alt);
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.site-footer { padding: 22px 0 52px; font-family: ui-monospace, SFMono-Regular, monospace; }
.footer-links {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: center; font: 400 0.95rem/1.2 ui-monospace, monospace;
}
.footer-links::before { content: "study.jut-labs.com · v2"; color: var(--muted); margin-right: auto; }
.footer-links a { color: var(--secondary); }

@media (max-width: 640px) {
  body { line-height: 1.6; }
  .site-header { padding-top: 36px; }
  .site-logo { height: auto; max-width: min(100%, 320px); }
  .footer-links { justify-content: flex-start; }
  .footer-links::before { width: 100%; margin-bottom: 8px; }
}