/* ==========================================================================
   KAMA DESIGN SYSTEM  —  shared across every page
   Earthy palette (forest / moss / clay / blush / cream / butter) applied as
   stacked rounded "sheets", with Kama illustrations. Single source of truth:
   edit here, every page updates. Lifted from the homepage revamp (index-proposal).
   ========================================================================== */

@font-face {
  font-family: 'Reckless Neue';
  src: url('/public/fonts/RecklessNeue-Regular.woff2') format('woff2'),
       url('/public/fonts/RecklessNeue-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reckless Neue';
  src: url('/public/fonts/RecklessNeue-SemiBold.woff2') format('woff2'),
       url('/public/fonts/RecklessNeue-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --forest:#1D2118; --moss:#6A6640; --olive-ink:#E9E3B8;
  --clay:#9E4B32; --clay-deep:#7E3824;
  --blush:#E9CDBD; --sand:#D9C3A5; --cream:#F4ECE0; --paper:#FAF5EE;
  --ink:#1B1712; --ink-soft:#4A433A;
  --butter:#F1DF9C;
  --radius-sheet:32px;
  --nav-h:72px;
  --fs-h2:clamp(2.1rem,4vw,3.5rem); --fs-h3:1.25rem;
  --fs-lead:1.05rem; --fs-body:1.05rem; --fs-small:0.92rem; --fs-micro:0.74rem;
}

.kama { font-family:'Karla',sans-serif; background:var(--forest); color:var(--ink); overflow-x:hidden; }
.kama img { display:block; max-width:100%; }
.kama a { text-decoration:none; color:inherit; }

.wrap { max-width:76rem; margin:0 auto; padding:0 2rem; }
.disp { font-family:'Reckless Neue',Georgia,serif; font-weight:400; letter-spacing:-0.025em; line-height:1.02; }
.disp em { font-style:normal; color:var(--em, inherit); }
.tag { display:inline-block; font-size:var(--fs-micro); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.tag::before { content:'[ '; } .tag::after { content:' ]'; }
.eyebrow { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.6rem; font-family:'Karla',sans-serif; font-weight:700; font-size:1rem; padding:0.95rem 1.8rem; border-radius:99rem; border:1.5px solid transparent; cursor:pointer; transition:transform .2s, background .2s, color .2s, border-color .2s; }
.btn:hover { transform:translateY(-2px); }
.kama .btn-butter { background:#F1DF9C; color:#1B1712; }
.kama .btn-butter:hover { background:#E6CE6E; }
.btn-line { border-color:currentColor; background:transparent; }
.kama .btn-clay { background:#F1DF9C; color:#1B1712; }
.kama .btn-clay:hover { background:#E6CE6E; }

/* Stacked sheets — the seamless colour flow */
.sheet { position:relative; border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; margin-top:calc(var(--radius-sheet) * -1); padding:5rem 0 calc(4.5rem + var(--radius-sheet)); box-shadow:0 -18px 40px rgba(20,16,10,0.18); }
.sheet:last-of-type { padding-bottom:5.5rem; }
.s-paper  { background:var(--paper);  color:var(--ink); }
.s-cream  { background:var(--cream);  color:var(--ink); }
.s-moss   { background:var(--moss);   color:var(--olive-ink); }
.s-forest { background:var(--forest); color:var(--cream); }
.s-blush  { background:var(--blush);  color:var(--ink); }
.s-clay   { background:var(--clay);   color:var(--cream); }

.sec-head { max-width:52rem; margin:0 auto 3rem; text-align:center; display:grid; gap:1rem; justify-items:center; }
.sec-head h2 { font-size:var(--fs-h2); }
.sec-head p { font-size:var(--fs-lead); line-height:1.5; max-width:40ch; }
.s-paper .eyebrow, .s-cream .eyebrow, .s-blush .eyebrow { color:var(--clay); }
.s-moss .eyebrow, .s-forest .eyebrow, .s-clay .eyebrow { color:var(--butter); }

/* Interior-page hero — clean editorial opening on a light panel, dark serif title.
   Flows into the first .sheet via the bottom padding + the sheet's pull-up. */
.phero { position:relative; background:var(--paper); color:var(--ink); overflow:hidden; z-index:0;
  padding:clamp(3rem,6vw,5rem) 0 calc(2rem + var(--radius-sheet)); }
.phero .wrap { position:relative; z-index:1; max-width:54rem; }
.phero .eyebrow { color:var(--clay); margin-bottom:1rem; }
.phero h1 { font-size:clamp(2.5rem,5vw,3.75rem); color:var(--ink); margin:0 0 1.1rem; max-width:18ch; letter-spacing:-0.02em; line-height:1.06; }
.phero-sub { font-size:var(--fs-lead); line-height:1.6; color:var(--ink-soft); max-width:44ch; }
.phero-ctas { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.9rem; }
.phero-illus { position:absolute; right:2rem; bottom:1.5rem; width:min(170px,24vw); opacity:0.5; pointer-events:none; z-index:0; }
@media (max-width:760px){ .phero-illus { display:none; } }

/* Press / "as seen in" strip */
.press-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; opacity:0.9; }
.press-row .lbl { width:100%; text-align:center; font-size:var(--fs-micro); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.4rem; }
.press-row span { font-family:'Reckless Neue',Georgia,serif; font-size:1.15rem; color:var(--ink); }
.press-row img { height:20px; width:auto; filter:brightness(0); opacity:0.8; }

/* Feature cards */
.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.feat-card { background:#fff; border:1px solid rgba(27,23,18,0.1); border-radius:20px; padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:0.6rem; }
.feat-ic { font-size:1.8rem; color:var(--clay); line-height:1; margin-bottom:0.3rem; }
.feat-card h3 { font-family:'Reckless Neue',Georgia,serif; font-weight:600; font-size:1.3rem; color:var(--ink); }
.feat-card p { font-size:var(--fs-small); line-height:1.55; color:var(--ink-soft); }
@media (max-width:900px){ .feat-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .feat-grid { grid-template-columns:1fr; } }

/* Reviews */
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.review { background:var(--paper); border:1px solid rgba(27,23,18,0.1); border-radius:20px; padding:1.75rem; }
.review .stars { color:var(--clay); letter-spacing:0.1em; margin-bottom:0.9rem; }
.review p { font-size:var(--fs-small); line-height:1.6; color:var(--ink); }
.review .who { margin-top:1rem; font-weight:700; color:var(--ink-soft); font-size:0.82rem; }
@media (max-width:860px){ .review-grid { grid-template-columns:1fr; } }

/* Founder / profile — masked photo on a brand panel */
.founder { position:relative; overflow:hidden; display:flex; align-items:center; min-height:min(64vh,34rem); padding:3rem 0; background:var(--moss); color:var(--cream); z-index:2; }
.founder-bg { position:absolute; top:0; right:0; height:100%; width:56%; object-fit:cover; object-position:52% 38%; opacity:1; z-index:0; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 18%, rgba(0,0,0,0.6) 42%, #000 68%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 18%, rgba(0,0,0,0.6) 42%, #000 68%); }
.founder::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(106,102,64,0.8) 0%, rgba(106,102,64,0.56) 22%, rgba(106,102,64,0.3) 42%, rgba(106,102,64,0.1) 60%, rgba(106,102,64,0) 78%); }
.founder .wrap { position:relative; z-index:2; width:100%; }
.founder-text { max-width:30rem; }
.founder blockquote { font-family:'Reckless Neue',Georgia,serif; font-weight:400; font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.32; letter-spacing:-0.015em; color:var(--cream); margin:0 0 1.3rem; }
.founder cite { font-style:normal; font-size:0.95rem; font-weight:700; letter-spacing:0.03em; color:var(--butter); }
@media (max-width:760px){
  .founder { min-height:30rem; align-items:flex-start; padding-top:2.5rem; }
  .founder-bg { width:100%; height:64%; top:auto; bottom:0; object-fit:cover; object-position:center 40%; opacity:1; -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0.6) 40%, #000 64%); mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 16%, rgba(0,0,0,0.6) 40%, #000 64%); }
  .founder::after { background:linear-gradient(180deg, rgba(106,102,64,0.82) 0%, rgba(106,102,64,0.52) 28%, rgba(106,102,64,0.14) 54%, rgba(106,102,64,0) 76%); }
  .founder-text { max-width:none; }
}

/* List header (section title + "See all") */
.list-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2rem; flex-wrap:wrap; gap:0.5rem; }
.list-head h2 { font-size:var(--fs-h2); }
.list-head a { font-weight:700; color:var(--clay); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.s-moss .list-head a, .s-forest .list-head a, .s-clay .list-head a { color:var(--butter); }

/* Read / article cards (illustration or photo cover) */
.read-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.read-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(27,23,18,0.1); border-radius:18px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.read-card:hover { box-shadow:0 14px 34px rgba(20,16,10,0.1); transform:translateY(-2px); }
.read-img { width:100%; display:block; aspect-ratio:690/395; object-fit:cover; }
.read-img--illu { object-fit:contain; padding:7.5%; }
.read-body { display:flex; flex-direction:column; flex:1; padding:1.4rem 1.5rem 1.5rem; }
.read-card h3 { font-family:'Reckless Neue',Georgia,serif; font-weight:600; font-size:1.2rem; line-height:1.32; margin:0 0 0.6rem; color:var(--ink); }
.read-excerpt { font-size:var(--fs-small); line-height:1.55; color:var(--ink-soft); margin:0 0 1.25rem; flex:1; }
.read-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.read-time { font-size:0.74rem; color:#9a917f; }
.read-link { font-size:0.8rem; font-weight:700; color:var(--clay); }
.read-more-hidden { display:none; }
.see-more-wrap { text-align:center; margin-top:2rem; }
@media (max-width:860px){ .read-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .read-grid { grid-template-columns:1fr; } }

/* Podcast cards */
.listen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.pod-c { background:#fff; border:1px solid rgba(27,23,18,0.1); border-radius:18px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.pod-c:hover { box-shadow:0 14px 34px rgba(20,16,10,0.1); transform:translateY(-2px); }
.pod-c img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.pod-c .body { padding:1rem 1.1rem 1.2rem; }
.pod-c .show { font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--clay); }
.pod-c .ttl { font-family:'Reckless Neue',Georgia,serif; font-weight:600; font-size:1.05rem; line-height:1.25; margin:0.35rem 0 0.5rem; color:var(--ink); }
.pod-c .play { font-size:0.8rem; font-weight:700; color:var(--ink); }
.pod-more-hidden { display:none; }
@media (max-width:860px){ .listen-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .listen-grid { grid-template-columns:1fr; } }

.kama footer, footer.kama-footer { background:var(--forest); color:#9A9478; padding:3rem 0; text-align:center; font-size:0.85rem; }