/* ============================================================
   Dr. John DiCicco — Static Site Stylesheet
   Ported from the original Tailwind / oklch design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Garamond:ital@0;1&family=Inter:wght@400;500;600&display=swap');

:root {
  --background: #F8F6F2;
  --foreground: #1c2733;
  --card: #ffffff;
  --border: #dedad2;

  --gold: #B68C45;
  --gold-soft: #D8C6A0;
  --cream: #EFEDE8;
  --ink: #1c2733;
  --ink-soft: #4b5768;
  --navy: #12263A;
  --navy-soft: #1c344c;

  --shadow-soft: 0 10px 40px -10px rgb(31 41 55 / 0.08);
  --shadow-lift: 0 24px 60px -20px rgb(31 41 55 / 0.18);
  --shadow-gold: 0 18px 40px -16px rgb(200 169 106 / 0.45);

  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
p { margin: 0; }
button { font-family: inherit; }

/* ---------- Layout ---------- */
.container-luxe {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.page-top { padding-top: 8rem; }

/* ---------- Text utilities ---------- */
.eyebrow-lux {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
}
.rule { display: inline-block; width: 2.5rem; height: 1px; background: var(--gold); margin-right: 0.85rem; vertical-align: middle; flex-shrink: 0; }
.text-navy { color: var(--navy); }
.text-gold { color: var(--gold); }
.text-ink-soft { color: var(--ink-soft); }
.italic { font-style: italic; }
.font-display { font-family: var(--font-display); }

/* ---------- Buttons ---------- */
.btn-gold, .btn-ghost, .btn-gold-solid {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem; border-radius: 2px; font-weight: 500;
  letter-spacing: .04em; font-size: .78rem; text-transform: uppercase;
  transition: all .35s cubic-bezier(.16,1,.3,1); cursor: pointer; border: 1px solid transparent;
}
.btn-gold { background: var(--navy); color: #F8F6F2; border-color: var(--navy); }
.btn-gold:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: #F8F6F2; }
.btn-gold-solid { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold-solid:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.icon-sm { width: .875rem; height: .875rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: all .4s ease;
  background: rgba(248,246,242,0.5);
  backdrop-filter: blur(6px);
}
.site-header.scrolled {
  background: rgba(248,246,242,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(222,218,210,0.7);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em; color: var(--navy); }
.nav-desktop { display: none; align-items: center; gap: 1.8rem; }
.nav-desktop a {
  font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft);
  transition: color .25s; padding-bottom: 2px;
}
.nav-desktop a:hover, .nav-desktop a.active { color: var(--navy); }
.nav-desktop a.active { font-weight: 600; border-bottom: 1px solid var(--gold); }
.header-cta { display: none; }
.menu-btn {
  display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.menu-btn span { display: block; height: 1px; width: 1.25rem; background: var(--navy); margin: 3px 0; }
.nav-mobile {
  display: none; border-top: 1px solid var(--border); background: rgba(248,246,242,0.98); backdrop-filter: blur(20px);
}
.nav-mobile.open { display: block; }
.nav-mobile-inner { padding: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile-inner a { font-size: 1rem; color: var(--ink-soft); }
.nav-mobile-inner a:hover { color: var(--gold); }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .header-cta { display: block; }
  .menu-btn { display: none; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeSoft { from {opacity:0;} to {opacity:1;} }
.animate-fade-up { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-soft { animation: fadeSoft 1.2s ease-out both; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; }
.g-12 { gap: 3rem; }
.divider-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }

@media (min-width: 640px) { .sm-2col { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .md-2col { grid-template-columns: repeat(2,1fr); } .md-3col { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) {
  .lg-2col { grid-template-columns: repeat(2,1fr); }
  .lg-3col { grid-template-columns: repeat(3,1fr); }
  .lg-12col { grid-template-columns: repeat(12,1fr); }
  .lg-span-4 { grid-column: span 4; }
  .lg-span-5 { grid-column: span 5; }
  .lg-span-7 { grid-column: span 7; }
  .lg-span-8 { grid-column: span 8; }
}

/* ---------- Sections ---------- */
section { position: relative; }
.section-py { padding-block: 5.5rem 6.5rem; }
.section-py-sm { padding-block: 4rem; }
.border-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.bg-cream { background: rgba(239,237,232,0.65); }
.bg-navy { background: var(--navy); color: #EFEDE8; }
.bg-navy-deep { background: #0f1e2a; color: #EFEDE8; }

/* ---------- Hero ---------- */
.hero {
  padding-top: 9rem; padding-bottom: 5rem; overflow: hidden;
}
.hero-glow {
  position: absolute; top: 0; right: 0; height: 600px; width: 600px; border-radius: 999px;
  background: #EFEDE4; filter: blur(90px); opacity: .55; z-index: -1;
}
.hero-title { font-size: 2.3rem; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin-top: 2rem; }
.hero-lede { margin-top: 2rem; max-width: 38rem; color: var(--ink-soft); line-height: 1.75; font-size: 1.02rem; }
.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-portrait-wrap { position: relative; margin-top: 3rem; }
.hero-portrait-wrap .frame { position: absolute; top: -1.5rem; left: -1.5rem; height: 100%; width: 100%; border: 1px solid rgba(182,140,69,0.4); z-index: -1; }
.hero-portrait-wrap .block { position: absolute; bottom: -1.5rem; right: -1.5rem; height: 10rem; width: 10rem; background: rgba(18,38,58,0.05); z-index: -1; }
.hero-portrait-wrap img { width: 100%; object-fit: cover; object-position: top; aspect-ratio: 4/5; box-shadow: var(--shadow-lift); }

@media (min-width: 640px) { .hero-title { font-size: 3rem; } }
@media (min-width: 1024px) {
  .hero { padding-top: 10rem; padding-bottom: 7rem; }
  .hero-title { font-size: 4.4rem; }
  .hero-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 5rem; align-items: center; }
  .hero-copy { grid-column: span 7; }
  .hero-portrait-col { grid-column: span 5; }
}

/* Stat strip */
.stat-strip { margin-top: 4rem; }
.stat-item { background: var(--background); padding: 2rem 1.5rem; }
.stat-item .val { font-family: var(--font-display); font-size: 1.9rem; color: var(--navy); letter-spacing: -0.01em; }
.stat-item .lbl { margin-top: .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
@media (min-width: 1024px) { .stat-strip { margin-top: 6rem; } .stat-item { padding: 2.5rem 1.5rem; } .stat-item .val { font-size: 2.4rem; } }

/* Cards */
.pathway-card, .work-card, .service-card, .topic-card, .episode-card, .book-card {
  background: var(--card, #fff);
}
.pathway-card {
  position: relative; background: var(--background); border: 1px solid var(--border); padding: 2.5rem 2rem;
  transition: all .4s; display: block;
}
.pathway-card:hover { border-color: var(--navy); }
.pathway-card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.pathway-card .eyebrow { margin-top: 2.2rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .26em; color: var(--ink-soft); }
.pathway-card h3 { margin-top: .7rem; font-size: 1.7rem; line-height: 1.2; color: var(--navy); }
.pathway-card p.desc { margin-top: 1.1rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.75; }
.pathway-card .cta { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--navy); }
.pathway-card:hover .cta { color: var(--gold); }

.work-card { padding: 2.4rem 2rem; display: block; transition: background .3s; }
.work-card:hover { background: rgba(239,237,232,0.6); }
.work-card .eyebrow { font-size: .62rem; text-transform: uppercase; letter-spacing: .26em; color: var(--gold); }
.work-card h3 { margin-top: 1.4rem; font-size: 1.45rem; line-height: 1.3; color: var(--navy); }
.work-card .cta { margin-top: 2.3rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--navy); }
.work-card:hover .cta { color: var(--gold); }

/* Pillars */
.pillar { background: var(--card, #fff); padding: 2.4rem; }
.pillar .num { margin-top: 1.8rem; font-size: .6rem; text-transform: uppercase; letter-spacing: .26em; color: var(--ink-soft); }
.pillar h3 { margin-top: .3rem; font-size: 1.4rem; color: var(--navy); }

/* Icon */
.icon-gold { color: var(--gold); }
svg.ico { stroke: currentColor; fill: none; stroke-width: 1.4; }

/* Closing CTA (navy) */
.closing-cta h2 { color: #F7F5F1; }
.closing-cta p { color: #d7d0c0; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding-block: 4rem; background: var(--background); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-col p.head { font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.footer-col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul a { font-size: .9rem; color: var(--navy); }
.footer-col ul a:hover { color: var(--gold); }
.footer-bottom { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-bottom p { font-size: .74rem; color: var(--ink-soft); }
.footer-bottom .tag { font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3,1fr); } }

/* Blockquote */
blockquote { border-left: 2px solid var(--gold); padding-left: 1.5rem; margin: 2rem 0; }
.quote-lux { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--navy); line-height: 1.35; }

/* Prose */
.prose-lux { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.85; }
.prose-lux p + p { margin-top: 1.5rem; }
.prose-lux strong, .prose-lux b { color: var(--navy); font-weight: 500; }
.prose-lux em { font-style: italic; }

/* Credentials */
.cred { display: flex; align-items: flex-start; gap: 1.2rem; }
.cred .label { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); }
.cred .text { margin-top: .2rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.7; }

/* Tribute section */
.tribute { background: #10202f; color: #EFEDE8; }
.tribute-portrait { position: relative; }
.tribute-portrait .frame { position: absolute; inset: -1rem; border: 1px solid rgba(182,140,69,0.4); z-index: -1; }
.tribute-portrait img { width: 100%; object-fit: cover; object-position: top; aspect-ratio: 4/5; }

/* Speaking topic cards */
.topic-card { background: var(--card,#fff); border: 1px solid var(--border); padding: 2.2rem; transition: all .4s; }
.topic-card:hover { border-color: var(--navy); box-shadow: var(--shadow-lift); }
.topic-card .n { font-family: 'Courier New', monospace; font-size: .68rem; letter-spacing: .22em; color: var(--gold); }
.topic-card h3 { margin-top: 1.1rem; font-size: 1.45rem; color: var(--navy); line-height: 1.3; }
.topic-card p { margin-top: .9rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.75; }

/* Narrative step cards */
.step-card { background: var(--navy); padding: 2.2rem; transition: background .4s; }
.step-card:hover { background: #1a3049; }
.step-card .top { display: flex; align-items: center; justify-content: space-between; }
.step-card .lbl { font-family: 'Courier New', monospace; font-size: .64rem; letter-spacing: .2em; color: var(--gold); }
.step-card .ln { height: 1px; width: 2rem; background: rgba(182,140,69,0.5); }
.step-card h4 { margin-top: 1.8rem; font-size: 1.4rem; color: #F7F5F1; }
.step-card p { margin-top: .8rem; font-size: .85rem; line-height: 1.7; color: #C7C0AE; }

/* Service card */
.service-card { background: var(--background); border: 1px solid var(--border); padding: 2.2rem; transition: all .4s; }
.service-card:hover { border-color: var(--navy); }
.service-card h3 { margin-top: 1.6rem; font-size: 1.45rem; color: var(--navy); }
.service-card p.desc { margin-top: .8rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.75; }
.service-card ul { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.service-card li { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--navy); }

/* Book cards */
.book-card { display: flex; flex-direction: column; }
.book-cover { display: block; position: relative; overflow: hidden; background: var(--cream); aspect-ratio: 2/3; }
.book-cover img { height: 100%; width: 100%; object-fit: cover; transition: transform .6s; box-shadow: 0 20px 50px -20px rgba(18,38,58,0.35); }
.book-cover:hover img { transform: scale(1.03); }
.book-info { padding-top: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.book-info h3 { font-size: 1.25rem; color: var(--navy); line-height: 1.3; }
.book-info .sub { margin-top: .4rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; line-height: 1.3; }
.book-info .co { margin-top: .6rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); }
.book-info .desc { margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.75; flex: 1; }
.book-info .link { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 500; color: var(--navy); align-self: flex-start; }
.book-info .link:hover { color: var(--gold); }

/* Episode card */
.episode-card { background: var(--card,#fff); border: 1px solid var(--border); padding: 2.2rem; display: flex; flex-direction: column; transition: all .4s; }
.episode-card:hover { border-color: var(--navy); box-shadow: var(--shadow-lift); }
.episode-card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.episode-card .num { font-family: var(--font-display); font-size: 2.1rem; color: var(--gold); }
.episode-card .kind { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); }
.episode-card h3 { margin-top: 1.6rem; font-size: 1.35rem; color: var(--navy); line-height: 1.3; }
.episode-card .guest { margin-top: .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); }
.episode-card p.desc { margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.75; flex: 1; }
.episode-card audio, .episode-card video { width: 100%; margin-top: 1.4rem; }
.episode-card .openlink { margin-top: .8rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--navy); }
.episode-card .openlink:hover { color: var(--gold); }

/* Contact page */
.contact-card { background: var(--card,#fff); border: 1px solid var(--border); padding: 2rem; }
.contact-card .lbl { margin-top: 1.8rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); }
.contact-card .email-link { margin-top: .5rem; display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); word-break: break-all; }
.contact-card .email-link:hover { color: var(--gold); }
.contact-card .note { margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.7; }

.contact-navy { background: var(--navy); color: #EFEDE8; padding: 2rem; }
.contact-navy .kicker { display: flex; align-items: center; gap: .6rem; color: var(--gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; }
.contact-navy h2 { margin-top: 1rem; font-size: 1.5rem; color: #F7F5F1; line-height: 1.3; }
.contact-navy p { margin-top: 1rem; font-size: .85rem; color: #C7C0AE; line-height: 1.8; }

.kind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.kind-item { background: var(--background); padding: 1.5rem; text-align: center; }
.kind-item .lbl { margin-top: .7rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); }

.contact-form { background: var(--card,#fff); border: 1px solid var(--border); padding: 2rem; }
.contact-form h2 { margin-top: 1.4rem; font-size: 1.6rem; color: var(--navy); line-height: 1.3; }
.form-grid { margin-top: 2.2rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: repeat(2,1fr); } }
.field label { display: block; }
.field .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  margin-top: .5rem; width: 100%; border: none; border-bottom: 1px solid var(--border);
  background: transparent; padding: .75rem 0; color: var(--navy); outline: none; font-family: inherit; font-size: 1rem;
  transition: border-color .25s;
}
.field textarea { border: 1px solid var(--border); background: rgba(239,237,232,0.4); padding: 1rem; line-height: 1.7; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.form-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-msg { font-size: .88rem; }
.form-msg.ok { color: var(--navy); }
.form-msg.err { color: #b23b3b; }

/* Utility spacing/margins used across pages */
.mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; } .mt-16 { margin-top: 4rem; } .mt-20 { margin-top: 5rem; }
.max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .gap-4 { gap: 1rem; }
.text-right { text-align: right; }

@media (min-width: 1024px) { .lg-py-big { padding-block: 8rem 9rem; } }