/* enochdebus.com — archived wellness blog. Warm cream + deep green. Fraunces + Newsreader.
   Simple, readable, fidelity-focused. */

:root {
  --paper:   oklch(0.985 0.012 95);
  --paper-2: oklch(0.96 0.018 110);
  --ink:     oklch(0.30 0.03 150);
  --ink-soft:oklch(0.46 0.03 150);
  --green:   oklch(0.50 0.10 150);
  --green-deep: oklch(0.40 0.09 152);
  --line:    oklch(0.30 0.03 150 / 0.14);
  --white:   oklch(0.995 0.004 95);

  --maxw: 64rem;
  --measure: 40rem;
  --s--1: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --s-0:  clamp(1.05rem, 1.0rem + 0.28vw, 1.2rem);
  --s-1:  clamp(1.25rem, 1.12rem + 0.6vw, 1.55rem);
  --s-2:  clamp(1.6rem, 1.32rem + 1.3vw, 2.35rem);
  --s-3:  clamp(2.1rem, 1.6rem + 2.3vw, 3.4rem);
  --ease: cubic-bezier(0.22,1,0.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader", Georgia, serif; font-size:var(--s-0); line-height:1.7; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--green-deep); }
::selection { background:var(--green); color:var(--white); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.wrap { max-width:var(--maxw); margin:0 auto; padding-left:clamp(1.1rem,4vw,2rem); padding-right:clamp(1.1rem,4vw,2rem); }
.wrap--narrow { max-width:var(--measure); }

h1,h2,h3 { font-family:"Fraunces", serif; font-weight:600; line-height:1.1; letter-spacing:-0.01em; }
.eyebrow { font-family:"Fraunces",serif; font-size:var(--s--1); text-transform:uppercase; letter-spacing:0.18em; color:var(--green-deep); margin:0 0 0.8rem; font-weight:600; }

/* header */
.site-header { position:sticky; top:0; z-index:50; background:oklch(0.985 0.012 95 / 0.86); backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line); }
.nav { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:1.5rem; padding:0.9rem clamp(1.1rem,4vw,2rem); }
.brand { font-family:"Fraunces",serif; font-weight:600; font-size:var(--s-1); text-decoration:none; color:var(--ink); margin-right:auto; }
.nav nav { display:flex; gap:clamp(0.9rem,2vw,1.8rem); }
.nav nav a { text-decoration:none; color:var(--ink-soft); font-size:var(--s--1); letter-spacing:0.02em; }
.nav nav a:hover { color:var(--green-deep); }

/* hero */
.hero { padding:clamp(2.5rem,6vw,5rem) 0; }
.hero--home { background:radial-gradient(120% 80% at 0% 0%, var(--paper-2), transparent 60%); }
.hero__title { font-size:var(--s-3); margin:0.3rem 0 0; }
.hero__lead { font-size:var(--s-1); color:var(--ink-soft); max-width:42ch; margin:1.2rem 0 1.8rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:0.8rem; }
.hero--page { border-bottom:1px solid var(--line); }

/* buttons */
.btn { display:inline-flex; align-items:center; font-family:"Fraunces",serif; font-weight:600; font-size:var(--s-0);
  background:var(--green); color:var(--white); border:2px solid var(--green); padding:0.6em 1.3em; border-radius:999px;
  text-decoration:none; cursor:pointer; transition:transform .3s var(--ease), background-color .25s; }
.btn:hover { transform:translateY(-2px); background:var(--green-deep); border-color:var(--green-deep); }
.btn--ghost { background:transparent; color:var(--green-deep); }
.btn--ghost:hover { background:var(--green); color:var(--white); }

/* cards */
.section-head { margin:clamp(2rem,4vw,3rem) 0 1.4rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); padding-top:1rem; padding-bottom:1rem; }
.card { background:var(--white); border:1px solid var(--line); border-radius:1rem; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 38px -24px oklch(0.30 0.03 150 / 0.45); }
.card__link { text-decoration:none; color:inherit; display:block; }
.card__media { aspect-ratio:16/10; background:var(--paper-2); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card__noimg { width:100%; height:100%; background:linear-gradient(135deg,var(--paper-2),oklch(0.92 0.04 150)); }
.card__body { padding:1.1rem 1.2rem 1.4rem; }
.card__date { font-size:var(--s--1); color:var(--green-deep); margin:0 0 0.4rem; letter-spacing:0.04em; }
.card__title { font-size:var(--s-1); margin:0 0 0.5rem; }
.card__excerpt { font-size:var(--s--1); color:var(--ink-soft); margin:0; }
.more { margin:1.5rem 0 3rem; }
.more a { font-family:"Fraunces",serif; font-weight:600; text-decoration:none; }
@media (max-width:820px){ .cards { grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .cards { grid-template-columns:1fr;} }

/* post + page */
.post, .page { padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,6vw,5rem); }
.post__date { font-size:var(--s--1); color:var(--green-deep); letter-spacing:0.05em; text-transform:uppercase; margin:0 0 0.6rem; }
.post__title, .page__title { font-size:var(--s-3); margin:0 0 1.5rem; }
.post__back { margin-top:2.5rem; }
.post__back a { font-family:"Fraunces",serif; font-weight:600; text-decoration:none; }

/* prose — article body */
.prose { font-size:1.12rem; line-height:1.8; color:var(--ink); }
.prose p { margin:0 0 1.2rem; }
.prose h2 { font-size:var(--s-2); margin:2.2rem 0 0.8rem; }
.prose h3 { font-size:var(--s-1); margin:1.8rem 0 0.6rem; }
.prose img { border-radius:0.6rem; margin:1.5rem 0; height:auto; }
.prose img.alignleft { float:left; margin:0.3rem 1.5rem 1rem 0; max-width:min(45%,320px); }
.prose img.alignright { float:right; margin:0.3rem 0 1rem 1.5rem; max-width:min(45%,320px); }
.prose ul, .prose ol { margin:0 0 1.2rem; padding-left:1.4rem; }
.prose li { margin:0.3rem 0; }
.prose a { text-underline-offset:2px; }
.prose blockquote { margin:1.5rem 0; padding-left:1.2rem; border-left:3px solid var(--green); color:var(--ink-soft); font-style:italic; }
.prose iframe, .prose .embed-container { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:0.6rem; margin:1.5rem 0; max-width:100%; }
.prose .embed-container { position:relative; padding-bottom:56.25%; height:0; }
.prose .embed-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; aspect-ratio:auto; margin:0; }
.prose::after { content:""; display:block; clear:both; }

/* contact form (staged) */
.contact-form {
  margin-top:2.5rem; max-width:var(--measure);
  background:var(--white); border:1px solid var(--line); border-radius:1rem;
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 22px 50px -34px oklch(0.30 0.03 150 / 0.5);
}
.contact-form__intro { margin:0 0 1.6rem; color:var(--ink-soft); font-size:var(--s-0); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; }
.field label { font-family:"Fraunces",serif; font-weight:600; font-size:var(--s--1); letter-spacing:0.02em; color:var(--ink); }
.contact-form input, .contact-form textarea {
  width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:var(--s-0); padding:0.8em 0.95em; border-radius:0.6rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color:oklch(0.6 0.02 150); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline:none; background:var(--white); border-color:var(--green);
  box-shadow:0 0 0 3px oklch(0.50 0.10 150 / 0.22);
}
.contact-form textarea { resize:vertical; min-height:8rem; }
.contact-form__foot { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:0.3rem; }
.contact-form .btn { width:auto; }
.contact-form__msg { margin:0; color:var(--green-deep); font-weight:600; font-size:var(--s--1); }
@media (max-width:540px){ .field-grid { grid-template-columns:1fr; gap:0; } }

/* home hero with Enoch photo */
.hero--photo {
  background:linear-gradient(90deg, oklch(0.2 0.02 150 / 0.10) 0%, oklch(0.985 0.012 95 / 0) 28%, oklch(0.985 0.012 95 / 0.86) 58%, var(--paper) 82%), url("/assets/enoch-slider.jpg");
  background-size:cover; background-position:left center;
  padding:0;
}
.hero--photo .wrap { min-height:clamp(24rem,56vh,34rem); display:flex; align-items:center; }
.hero__panel { margin-left:auto; max-width:34rem; padding:clamp(1.5rem,3vw,2rem) 0; }
.hero__panel .hero__lead { color:var(--ink-soft); }
@media (max-width:760px){
  .hero--photo {
    background:linear-gradient(180deg, oklch(0.2 0.02 150 / 0.05) 0%, oklch(0.985 0.012 95 / 0.6) 46%, var(--paper) 72%), url("/assets/enoch-slider.jpg");
    background-position:center top; background-size:140% auto, cover;
  }
  .hero--photo .wrap { min-height:auto; padding-top:clamp(11rem,42vw,16rem); }
  .hero__panel { margin-left:0; }
}

/* footer */
.site-footer { background:var(--ink); color:oklch(0.9 0.02 120); text-align:center; padding:clamp(2.5rem,5vw,4rem) 1.5rem; margin-top:2rem; }
.site-footer__tag { font-family:"Fraunces",serif; font-size:var(--s-1); color:var(--paper); margin:0 0 0.6rem; }
.site-footer__copy { font-size:var(--s--1); color:oklch(0.78 0.02 120); margin:0; }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .card:hover,.btn:hover{transform:none;} }

/* schedule-a-talk banner */
.schedule-band { background:var(--green-deep); color:var(--paper); margin-top:0; }
.schedule-band__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:clamp(1.4rem,3vw,2rem); padding-bottom:clamp(1.4rem,3vw,2rem); }
.schedule-band__text { font-family:"Fraunces",serif; font-size:var(--s-1); margin:0; color:var(--paper); max-width:46ch; }
.btn--light { background:var(--paper); color:var(--green-deep); border-color:var(--paper); flex:none; }
.btn--light:hover { background:#fff; border-color:#fff; color:var(--green-deep); }
.contact-form__msg.is-error { color:oklch(0.55 0.18 28); }
.contact-form__msg.is-ok { color:var(--green-deep); }
