/* =============================================================================
   BIBI HOUSE · blog.css
   Blog-only styles. Layered on top of styles.css; reuses its tokens and classes
   (.grain, .cursor, .nav, .foot). Do not redefine tokens here.
   ============================================================================= */


/* ==== 01 · BLOG BODY + NAV ADJUSTMENTS ============================== */

.body--blog { background: var(--c-canvas); }

.nav--blog {
  color: var(--c-ink);
  background: rgba(237, 227, 206, .92);
  border-bottom-color: var(--c-line);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
}
.nav--blog .nav__cta:hover {
  background: var(--c-ink); color: var(--c-canvas); border-color: var(--c-ink);
}

.blog {
  padding-top: 100px;
  padding-bottom: clamp(80px, 12vh, 160px);
}


/* ==== 02 · BREADCRUMB ============================================== */

.breadcrumb {
  max-width: 760px;
  margin: 0 auto clamp(24px, 4vh, 44px);
  padding: 0 var(--gutter);
  font-family: var(--f-sans);
  font-size: var(--fz-sm);
  color: var(--c-ink-3);
  letter-spacing: .02em;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: "·"; margin-left: 8px; color: var(--c-ink-3); opacity: .5;
}
.breadcrumb a { border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--e-out); }
.breadcrumb a:hover { border-bottom-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }


/* ==== 03 · BLOG INDEX · LIST ======================================= */

.blog-list {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.blog-list__head {
  max-width: 880px;
  margin: 0 auto clamp(40px, 6vh, 80px);
  text-align: center;
}
.blog-list__eyebrow {
  font-family: var(--f-sans); font-weight: 300;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 18px;
}
.blog-list__title {
  font-family: var(--f-serif);
  font-size: var(--fz-display);
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
  font-weight: 400;
  color: var(--c-ink);
}
.blog-list__lede {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--c-ink-2);
  font-style: italic;
}

.blog-list__intro {
  max-width: 680px;
  margin: 0 auto clamp(48px, 7vh, 90px);
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--c-ink-2);
  text-align: center;
}

.blog-list__cta {
  max-width: 760px;
  margin: 0 auto clamp(56px, 8vh, 110px);
}

.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.blog-list__empty {
  text-align: center;
  font-family: var(--f-serif); font-style: italic;
  color: var(--c-ink-3);
  padding: 60px 0;
}


/* ==== 04 · POST CARD =============================================== */

.post-card {
  display: flex; flex-direction: column; gap: 14px;
}
.post-card__media {
  display: block; overflow: hidden;
  border-radius: 2px;
  background: var(--c-canvas-2);
  aspect-ratio: 3 / 2;
}
.post-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--e-out);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }

.post-card__eyebrow {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.post-card__cat { color: var(--c-sariette); }
.post-card__title {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.008em;
}
.post-card__title a { transition: color var(--t-fast) var(--e-out); }
.post-card__title a:hover { color: var(--c-sariette); }
.post-card__desc {
  font-family: var(--f-sans);
  font-size: var(--fz-base);
  line-height: 1.55;
  color: var(--c-ink-2);
}
.post-card__more {
  margin-top: 6px;
  font-family: var(--f-sans);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: start;
  transition: gap var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.post-card__more:hover { color: var(--c-sariette); }


/* ==== 05 · POST PAGE ============================================== */

.post {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.post__head {
  max-width: 860px;
  margin: 0 auto clamp(32px, 5vh, 56px);
  text-align: center;
}
.post__eyebrow {
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-family: var(--f-sans);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 22px;
}
.post__cat a { color: var(--c-sariette); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--e-out); }
.post__cat a:hover { border-bottom-color: currentColor; }
.post__title {
  font-family: var(--f-serif);
  font-size: var(--fz-display);
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
  font-weight: 400;
  color: var(--c-ink);
}
.post__lede {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.post__hero {
  margin: 0 calc(var(--gutter) * -1) clamp(40px, 6vh, 80px);
  background: var(--c-canvas-2);
}
.post__hero img {
  width: 100%; max-height: 70vh; object-fit: cover;
}
.post__hero figcaption {
  padding: 10px var(--gutter);
  font-family: var(--f-sans); font-size: 12px;
  color: var(--c-ink-3);
  letter-spacing: .08em;
}

.post__body {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--f-sans);
  font-size: var(--fz-md);
  line-height: 1.75;
  color: var(--c-ink);
}
.post__body > * + * { margin-top: 1.1em; }
.post__body > :first-child { margin-top: 0; }

.post__body h2 {
  margin-top: clamp(32px, 5vh, 56px);
  font-family: var(--f-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.008em;
}
.post__body h3 {
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  font-weight: 400;
}
.post__body p { font-size: var(--fz-md); line-height: 1.75; }
.post__body > p:first-of-type {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--c-ink-2);
}
.post__body a {
  color: var(--c-sariette);
  border-bottom: 1px solid rgba(62, 74, 56, .3);
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.post__body a:hover { border-bottom-color: var(--c-sariette); }
.post__body ul, .post__body ol {
  padding-left: 1.4em;
  list-style: initial;
}
.post__body ol { list-style: decimal; }
.post__body li + li { margin-top: 6px; }
.post__body strong { font-weight: 500; }
.post__body em { font-style: italic; }
.post__body blockquote {
  margin: clamp(28px, 4vh, 44px) 0;
  padding-left: clamp(18px, 2.5vw, 28px);
  border-left: 2px solid var(--c-sariette);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--c-ink-2);
}
.post__body figure {
  margin: clamp(32px, 5vh, 56px) 0;
}
.post__body figure.wide {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}
.post__body figure img { width: 100%; }
.post__body figure figcaption {
  padding: 10px 0 0;
  font-family: var(--f-sans); font-size: 12px;
  color: var(--c-ink-3); letter-spacing: .08em;
}

.post__cta-end {
  max-width: 760px;
  margin: clamp(56px, 8vh, 110px) auto clamp(40px, 6vh, 80px);
}

.post__related {
  max-width: var(--max-w);
  margin: clamp(60px, 9vh, 120px) auto 0;
}
.post__related-title {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: -.008em;
  margin-bottom: clamp(24px, 4vh, 44px);
  text-align: center;
}
.post__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(28px, 3vw, 44px);
}

.post__byline {
  max-width: 680px;
  margin: clamp(60px, 9vh, 120px) auto 0;
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 18px;
}
.post__byline-img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover;
}
.post__byline-name {
  font-family: var(--f-sans);
  font-size: var(--fz-base);
  color: var(--c-ink);
}
.post__byline-name a {
  color: var(--c-sariette);
  border-bottom: 1px solid rgba(62, 74, 56, .3);
}
.post__byline-role {
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fz-sm);
  color: var(--c-ink-3);
}


/* ==== 06 · WAITLIST FORM (pre-opening CTA) ======================== */

.waitlist {
  position: relative;
  background: var(--c-canvas-2);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: clamp(28px, 4vw, 48px);
  color: var(--c-ink);
  isolation: isolate;
}
.waitlist--article-end {
  background: var(--c-sariette);
  color: var(--c-canvas);
  border-color: transparent;
}
.waitlist--article-end a { color: var(--c-armerie-2); border-bottom-color: rgba(237,227,206,.35); }
.waitlist--article-end a:hover { border-bottom-color: var(--c-armerie-2); }

.waitlist__eyebrow {
  font-family: var(--f-sans); font-weight: 300;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  opacity: .7;
  margin-bottom: 14px;
}
.waitlist__title {
  font-family: var(--f-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -.008em;
}
.waitlist__lede {
  margin-top: 12px;
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  opacity: .85;
}

.waitlist__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: clamp(20px, 3vh, 28px);
}
@media (max-width: 600px) { .waitlist__grid { grid-template-columns: 1fr; } }

.waitlist__field {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--f-sans);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .75;
}
.waitlist__field input {
  padding: 12px 14px;
  background: var(--c-canvas);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-family: var(--f-sans);
  font-size: 15px; letter-spacing: 0; text-transform: none;
  opacity: 1;
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.waitlist__field input:focus {
  outline: none;
  border-color: var(--c-sariette);
}
.waitlist--article-end .waitlist__field input {
  background: rgba(237,227,206,.08);
  color: var(--c-canvas);
  border-color: rgba(237,227,206,.25);
}
.waitlist--article-end .waitlist__field input:focus {
  border-color: var(--c-canvas);
  background: rgba(237,227,206,.14);
}

.waitlist__consent {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px;
  margin-top: 16px;
  font-family: var(--f-sans);
  font-size: var(--fz-sm);
  line-height: 1.5;
}
.waitlist__consent input {
  margin-top: 3px;
  width: 15px; height: 15px;
  accent-color: var(--c-sariette);
}
.waitlist--article-end .waitlist__consent input { accent-color: var(--c-armerie-2); }

.waitlist__submit {
  margin-top: clamp(18px, 2.5vh, 24px);
  padding: 14px 28px;
  background: var(--c-sariette); color: var(--c-canvas);
  border: 1px solid var(--c-sariette);
  border-radius: 999px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: background-color var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.waitlist__submit:hover { background: transparent; color: var(--c-sariette); transform: translateY(-1px); }
.waitlist--article-end .waitlist__submit {
  background: var(--c-canvas); color: var(--c-sariette);
  border-color: var(--c-canvas);
}
.waitlist--article-end .waitlist__submit:hover {
  background: transparent; color: var(--c-canvas);
}

.waitlist__success, .waitlist__error {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 2px;
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fz-md);
  line-height: 1.4;
}
.waitlist__success { background: rgba(62, 74, 56, .1); color: var(--c-sariette-2); }
.waitlist__error { background: rgba(200, 80, 60, .1); color: #8a3a2e; }
.waitlist--article-end .waitlist__success { background: rgba(237,227,206,.14); color: var(--c-canvas); }
.waitlist--article-end .waitlist__error { background: rgba(237,227,206,.14); color: var(--c-canvas); }

.waitlist.is-submitted .waitlist__grid,
.waitlist.is-submitted .waitlist__consent,
.waitlist.is-submitted .waitlist__submit { display: none; }


/* ==== 07 · WHATSAPP CTA (post-opening) ============================ */

.wa-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: #25D366;
  color: #0B3D26;
  border-radius: 999px;
  font-family: var(--f-sans); font-weight: 500;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.wa-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.wa-cta--article-end {
  display: block; width: 100%; max-width: 440px;
  margin: 0 auto; text-align: center;
  padding: 18px 28px;
}


/* ==== 08 · PAGE (privacy, merci, author) ========================== */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-family: var(--f-sans);
  font-size: var(--fz-md);
  line-height: 1.75;
  color: var(--c-ink);
}
.page__head { margin-bottom: clamp(32px, 5vh, 56px); }
.page__eyebrow {
  font-family: var(--f-sans); font-weight: 300;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 14px;
}
.page__title {
  font-family: var(--f-serif);
  font-size: var(--fz-2xl);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.008em;
}
.page__lede {
  margin-top: 14px;
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--c-ink-2);
}
.page__body > * + * { margin-top: 1.1em; }
.page__body h2 {
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -.008em;
}
.page__body a {
  color: var(--c-sariette);
  border-bottom: 1px solid rgba(62, 74, 56, .3);
}
.page__body a:hover { border-bottom-color: var(--c-sariette); }

.author-portrait {
  margin: 0 auto clamp(24px, 4vh, 40px);
  max-width: 200px;
}
.author-portrait img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 50%;
}


/* ==== 09 · RESPONSIVE =============================================== */

@media (max-width: 900px) {
  .blog { padding-top: 80px; }
  .blog-list__head, .post__head { text-align: left; }
  .post__eyebrow { justify-content: flex-start; }
  .post__byline { flex-direction: column; align-items: flex-start; }
}