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

:root {
  --paper:   oklch(0.985 0.01 320);
  --paper-2: oklch(0.96 0.016 320);
  --ink:     oklch(0.30 0.03 300);
  --ink-soft:oklch(0.46 0.03 300);
  --green:   oklch(0.55 0.14 290);
  --green-deep: oklch(0.45 0.13 292);
  --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.9 0.05 290)); }
.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:2rem; max-width:var(--measure); }
.contact-form__row { display:flex; gap:0.7rem; margin-bottom:0.7rem; }
.contact-form input, .contact-form textarea { width:100%; background:var(--white); border:1px solid var(--line); color:var(--ink);
  font:inherit; padding:0.8em 1em; border-radius:0.5rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline:none; border-color:var(--green); box-shadow:0 0 0 3px oklch(0.50 0.10 150 / 0.25); }
.contact-form textarea { margin-bottom:0.7rem; resize:vertical; }
.contact-form .btn { width:auto; }
.contact-form__msg { min-height:1.3em; margin:0.8rem 0 0; color:var(--green-deep); font-weight:600; font-size:var(--s--1); }
@media (max-width:540px){ .contact-form__row { flex-direction:column; } }

/* 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;} }

/* home hero with background image */
.hero--img { color:#fff; padding:clamp(4rem,12vw,9rem) 0; background-size:cover; background-position:center; }
.hero--img .hero__title, .hero--img .hero__lead { color:#fff; }
.eyebrow--light { color:oklch(0.88 0.06 300); }
.hero--img .btn--ghost { color:#fff; border-color:oklch(1 0 0 / 0.6); }
.hero--img .btn--ghost:hover { background:#fff; color:var(--green-deep); }
.home-intro { padding-top:clamp(2rem,5vw,3.5rem); }
.home-intro .prose { max-width:46rem; margin:0 auto; }

/* ── polished cover hero (vivid image, bottom scrim, violet accent) ── */
.hero--cover { position:relative; padding:0; min-height:clamp(26rem,66vh,42rem);
  display:flex; align-items:flex-end; overflow:hidden; border-bottom:5px solid var(--green); }
.hero--cover .hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.hero--cover .hero__scrim { position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, oklch(0.15 0.055 300 / 0.92) 0%, oklch(0.15 0.055 300 / 0.5) 26%, oklch(0.15 0.055 300 / 0.08) 52%, transparent 68%),
    linear-gradient(to bottom, oklch(0.15 0.055 300 / 0.4) 0%, transparent 22%); }
.hero--cover .hero__content { position:relative; width:100%; padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.4rem,6vw,4rem); }
.hero--cover .eyebrow--light { color:oklch(0.9 0.07 300); margin-bottom:0.6rem; }
.hero--cover .hero__title { color:#fff; font-family:"Fraunces",serif; font-weight:700;
  font-size:clamp(3rem,2.1rem+4.4vw,6rem); line-height:0.92; letter-spacing:0.005em;
  text-transform:uppercase; margin:0.1rem 0 0; text-shadow:0 3px 30px oklch(0.15 0.055 300 / 0.55); }
.hero--cover .hero__lead { color:oklch(0.97 0.015 300); font-style:italic; font-size:var(--s-1);
  line-height:1.4; max-width:34ch; margin:1rem 0 1.9rem; text-shadow:0 1px 14px oklch(0.15 0.055 300 / 0.5); }
.hero--cover .hero__actions { display:flex; flex-wrap:wrap; gap:0.8rem; }
.btn--on-photo { background:transparent; color:#fff; border-color:oklch(1 0 0 / 0.6); }
.btn--on-photo:hover { background:#fff; color:var(--green-deep); border-color:#fff; }

@media (max-width:560px){
  .hero--cover { min-height:clamp(24rem,80vh,32rem); }
  .hero--cover .eyebrow--light { letter-spacing:0.09em; font-size:0.74rem; }
  .hero--cover .hero__title { font-size:clamp(2.2rem,9vw,3rem); }
  .hero--cover .hero__actions .btn { flex:1 1 100%; justify-content:center; }
}