/* Pooja Ruprell: skin adapted from the coachmanu.com "Soft Enso" hub styles.
   Same stone ground, ink, display serif, airy chrome, calm cards and pill buttons.
   No Soft Enso mark or coachmanu imagery is used here. */
@import url("kit.css");

:root {
  --color-bg: #f3f1ec;
  --color-bg-elevated: #faf9f6;
  --color-ink: #2c2a26;
  --color-ink-soft: #4a4640;
  --color-muted: #736e65;
  --color-line: #e4e0d8;
  /* Accent: muted clay rose (coachmanu uses sage #6a826e; swap here if preferred). */
  --color-accent: #8b5e57;
  --color-accent-hover: #714943;
  --color-on-accent: #fbf8f7;
  --color-focus: #2c2a26;
  --radius: 14px;
  --shadow: 0 12px 36px rgba(44, 42, 38, 0.06);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --zen-mist: #d9cfcb;
  --zen-sage: #c9cfc8;
  --zen-stone-deep: #ebe8e2;
}

body {
  letter-spacing: 0.005em;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(217, 207, 203, 0.4), transparent 55%),
    linear-gradient(180deg, var(--zen-stone-deep) 0%, transparent 40%),
    var(--color-bg);
}


.site-header {
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-line) 70%, transparent);
}

/* Wordmark: name set in the display serif with a thin rule; no symbol. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--color-ink);
}
.wordmark:hover { color: var(--color-ink); }
.wordmark-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.wordmark-rule {
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
}

.nav-list a { letter-spacing: 0.03em; font-size: 0.92rem; }

/* Hero: centred on all widths, with a circular portrait above the name. */
.hero {
  padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(3.5rem, 9vw, 6rem);
  text-align: center;
}
.hero-panel {
  max-width: 44rem;
  margin-inline: auto;
}
.hero-copy { max-width: none; }
/* Portrait: same pattern as the coachmanu.com hub. The clip lives on the fixed-size
   wrapper so the kit rule "img { height: auto }" cannot flatten the circle. */
.hero-portrait-wrap {
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  max-width: 160px;
  max-height: 160px;
  margin: 0 auto var(--space-5);
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-line));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--color-bg-elevated) 70%, transparent),
    0 14px 36px rgba(44, 42, 38, 0.1);
  background: var(--zen-stone-deep);
}
.hero-portrait-wrap > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-portrait-wrap img.hero-portrait {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
  border: 0;
  background: var(--zen-stone-deep);
}
@media (min-width: 768px) {
  .hero-portrait-wrap {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
  }
}
.hero-panel h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.08;
  margin: var(--space-2) 0 var(--space-5);
}
.hero-rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto var(--space-5);
  background: var(--color-accent);
  opacity: 0.75;
}
.lede {
  max-width: 34rem;
  font-size: clamp(1.08rem, 2vw, 1.22rem);
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 auto var(--space-6);
}
.hero .cluster { justify-content: center; }
@media (max-width: 420px) {
  .hero .cluster .btn { min-width: 13rem; }
  .hero .cluster { flex-direction: column; }
}

.section-kicker {
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--color-accent);
  font-size: 0.72rem;
}
.section { padding: var(--space-7) 0; }
.section-head { margin-bottom: var(--space-6); }
.section-head h2,
.prose h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.prose { max-width: 40rem; }
.prose p { color: var(--color-ink-soft); }

/* Books */
.book-list { display: grid; gap: var(--space-6); }
.book {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--color-bg-elevated);
  border: 1px solid color-mix(in srgb, var(--color-line) 85%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-6) var(--space-5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.book:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
  box-shadow: 0 16px 40px rgba(44, 42, 38, 0.08);
  transform: translateY(-2px);
}
.book-cover {
  width: 150px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(44, 42, 38, 0.16);
  margin-inline: auto;
}
.book h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}
.book-sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}
.book-meta {
  font-size: 0.86rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-4);
}
.book p.book-desc { color: var(--color-ink-soft); }
@media (min-width: 640px) {
  .book { grid-template-columns: 160px 1fr; gap: var(--space-6); padding: var(--space-6); }
  .book-cover { width: 160px; margin: 0; }
}

.btn {
  border-radius: 999px;
  letter-spacing: 0.03em;
  font-weight: 600;
  padding: 0.7rem 1.35rem;
}
.btn-ghost { background: transparent; border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-accent); background: transparent; color: var(--color-accent-hover); }

/* Connect */
.links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 36rem;
}
.links-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid color-mix(in srgb, var(--color-line) 85%, transparent);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.links-list a:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  color: var(--color-ink);
  transform: translateY(-1px);
}
.link-label { font-weight: 600; letter-spacing: 0.01em; }
.link-hint { font-size: 0.88rem; color: var(--color-muted); overflow-wrap: anywhere; }

/* Contact form */
.contact-form {
  max-width: 36rem;
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid color-mix(in srgb, var(--color-line) 85%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-form label {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  color: var(--color-ink);
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.form-note {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}
/* Honeypot: hidden from people and screen readers, still present for bots. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer { margin-top: var(--space-6); border-top-color: color-mix(in srgb, var(--color-line) 80%, transparent); }
.footer-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); color: var(--color-muted); font-size: 0.9rem; }
.footer p { margin: 0; }
.footer-nav a { letter-spacing: 0.02em; }

/* Light motion: gentle rise on first view, disabled for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}