/* daniel-site — global theme, aligned to the "Light" brand design.
   Warm-paper editorial: warm bone grounds (no cold white), warm ink,
   one confident green accent, magenta as rare punctuation. Manrope for
   display, Inter for body, Newsreader for serif emphasis. The home page
   ("Light" one-pager) ships its own light.css; this stylesheet carries the
   same language across the inner pages (writing, notes, essays, etc.). */

:root {
  --bg: #F7F2E8;            /* primary warm bone */
  --bg-2: #EFE9DA;          /* deeper warm grey band / alt */
  --bg-card: #FBF7EE;       /* raised card on paper */
  --dark: #1A1712;          /* warm near-black */
  --text: #1F1C15;          /* warm ink */
  --text-muted: rgba(31, 28, 21, 0.64);
  --text-soft: rgba(31, 28, 21, 0.54);  /* mid foreground level (home one-pager) */
  --text-faint: rgba(31, 28, 21, 0.42);
  --accent: #2E7D46;        /* confident single green */
  --accent-light: #3a9a57;
  --accent-2: #C4347A;      /* magenta, rare punctuation */
  --gold: #b1832f;          /* legacy decorative accent */
  --border: rgba(31, 28, 21, 0.14);
  --border-soft: rgba(31, 28, 21, 0.08);
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --maxw: 1080px;
  --maxw-text: 64ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.6rem; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-light); }

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent); font-weight: 600; margin-bottom: 1.2rem; display: block;
}

.muted { color: var(--text-muted); }
.lead { font-size: 1.2rem; color: var(--text-muted); font-weight: 400; line-height: 1.7; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 242, 232, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--text); }
.wordmark b { color: var(--accent); }
.wordmark:hover { color: var(--text); }
.nav-links { display: flex; gap: 2.1rem; }
.nav-links a { font-size: 0.84rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.nav-links a:hover { color: var(--accent); }
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; line-height: 1; }

/* ---------- Sections ---------- */
.section { padding: 7rem 0; }
.section-tight { padding: 4.5rem 0; }
.section + .section { border-top: 1px solid var(--border-soft); }

/* ---------- Hero ---------- */
.hero { padding: 8rem 0 6rem; }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.hero .subhead { font-size: clamp(1.12rem, 2.1vw, 1.4rem); color: var(--text-muted); max-width: 44ch; margin-top: 1.6rem; font-weight: 400; line-height: 1.6; }
.hero .hero-cta { margin-top: 2.6rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 0.85rem 1.7rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.93rem;
  transition: all .2s ease; cursor: pointer; border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-light); color: #fff; }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Thesis / pull ---------- */
.thesis {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.03em;
  max-width: 24ch;
}
.thesis.wide { max-width: 60ch; }
.thesis .hl { font-family: var(--font-serif); color: var(--accent); font-style: italic; font-weight: 500; letter-spacing: 0; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 2rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31,28,21,0.06); }
.card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.card p { font-size: 0.97rem; color: var(--text-muted); }
.card .kicker { font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; display: block; margin-bottom: 0.7rem; }

/* ---------- Talk list ---------- */
.talk { border-top: 1px solid var(--border-soft); padding: 2rem 0; }
.talk:first-child { border-top: none; }
.talk h3 { font-size: 1.45rem; font-weight: 700; margin-bottom: 0.55rem; }
.talk .room { font-family: var(--font-body); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-top: 0.8rem; }

/* ---------- Speaker bio (Speaking page) ---------- */
/* Two-column on desktop: portrait headshot + short bio. Collapses to one column under 720px. */
.bio { display: grid; grid-template-columns: 260px 1fr; gap: 2.4rem; align-items: start; margin-top: 1.4rem; }
.bio-photo { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 0.5rem; box-shadow: 0 12px 30px rgba(31,28,21,0.06); }
.bio-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.bio-name { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.2rem; }
.bio-role { font-family: var(--font-body); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.1rem; }
.bio-text p { margin-bottom: 1rem; }
@media (max-width: 720px) {
  .bio { grid-template-columns: 1fr; gap: 1.6rem; }
  .bio-photo { max-width: 260px; }
}

/* ---------- YouTube embed ---------- */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 16px 40px rgba(31,28,21,0.07); }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ---------- Prose ---------- */
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: 1.75rem; font-weight: 700; margin: 2.8rem 0 1rem; letter-spacing: -0.025em; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 0.7rem; letter-spacing: -0.02em; }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-family: var(--font-serif); font-style: italic; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(46,125,70,0.3); }
.prose a:hover { border-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-soft); padding: 3.5rem 0; margin-top: 2rem; }
.footer-inner { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.footer-links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent); }
.footer-fine { color: var(--text-faint); font-size: 0.82rem; }

/* ---------- Utilities ---------- */
/* Small single-purpose helpers that replace high-frequency repeated
   inline styles across the inner-page section fragments. */
.page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.measure    { max-width: 52ch; }
.flush-top  { padding-top: 0; }

/* ---------- Contact form ---------- */
.contact-form { max-width: 640px; margin-top: 1rem; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { margin-bottom: 1.2rem; display: flex; flex-direction: column; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.45rem; }
.field .opt { font-weight: 400; color: var(--text-faint); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 125, 70, 0.14);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form button[type="submit"] { margin-top: 0.4rem; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Animations ---------- */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 0.5rem 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.9rem 1.6rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section { padding: 4.5rem 0; }
  .hero { padding: 5rem 0 4rem; }
}