/* One Day in Paris — Blog (demo) · inherits palette from ../assets/css/styles.css */

.blog-header {
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 34px; backdrop-filter: blur(10px);
}
.blog-header .brand-lockup .b-name { color: var(--ink); }
.blog-header .blog-nav { display:flex; gap:24px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);}
.blog-header .blog-nav a:hover{ color:var(--wine);}
.blog-header .blog-nav .res{ color:var(--wine); border:1px solid var(--wine); padding:8px 16px; border-radius:2px;}
@media (max-width:760px){ .blog-header .blog-nav a:not(.res){ display:none;} }

/* Blog home hero */
.blog-hero{ text-align:center; padding: clamp(70px,10vw,120px) 0 40px; background: var(--cream);}
.blog-hero .eyebrow{ margin-bottom:18px;}
.blog-hero h1{ font-size:clamp(2.6rem,6vw,4.4rem); }
.blog-hero h1 em{ font-style:italic; color:var(--wine);}
.blog-hero p{ max-width:560px; margin:18px auto 0; color:var(--ink-soft);}

/* Featured */
.feat{ max-width:1100px; margin:30px auto 0; padding:0 28px;}
.feat a{ display:grid; grid-template-columns:1.2fr 1fr; background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .4s, box-shadow .4s;}
.feat a:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card);}
.feat .f-img{ position:relative; min-height:340px;}
.feat .f-img img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover;}
.feat .f-cat{ position:absolute; top:18px; left:18px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; background:var(--cream); color:var(--wine); padding:7px 14px; border-radius:30px;}
.feat .f-body{ padding:40px; display:flex; flex-direction:column; justify-content:center;}
.feat .f-body h2{ font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.1;}
.feat .f-body p{ color:var(--ink-soft); margin:14px 0; font-size:.98rem;}
.feat .f-meta{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
@media (max-width:780px){ .feat a{ grid-template-columns:1fr;} .feat .f-img{ min-height:220px;} }

/* Article */
.article-hero{ position:relative; height:58vh; min-height:420px; color:#fff; display:flex; align-items:flex-end; overflow:hidden;}
.article-hero img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover;}
.article-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,8,.2),rgba(20,12,8,.78));}
.article-hero .ah-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 28px 54px; width:100%;}
.article-hero .ah-cat{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--poppy-soft);}
.article-hero h1{ font-size:clamp(2.3rem,5vw,4rem); line-height:1.05; margin:14px 0;}
.article-hero .ah-meta{ font-size:.78rem; letter-spacing:.08em; color:rgba(255,255,255,.82); display:flex; gap:18px; flex-wrap:wrap;}

.article{ max-width:720px; margin:0 auto; padding:60px 28px 40px;}
.article p, .article li{ font-size:1.12rem; line-height:1.85; color:var(--ink-soft); margin-bottom:24px;}
.article .dropcap::first-letter{ font-family:var(--serif); font-size:3.6rem; float:left; line-height:.8; padding:6px 12px 0 0; color:var(--wine);}
.article h2{ font-size:clamp(1.7rem,3vw,2.3rem); color:var(--ink); margin:40px 0 16px;}
.article h3{ font-size:1.4rem; color:var(--ink); margin:30px 0 12px;}
.article ul{ padding-left:0; list-style:none;}
.article ul li{ position:relative; padding-left:28px; margin-bottom:14px;}
.article ul li::before{ content:"🌸"; position:absolute; left:0; font-size:.8rem; top:5px;}
.article blockquote{ border-left:3px solid var(--gold); margin:34px 0; padding:6px 0 6px 28px; font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink); line-height:1.4;}
.article b, .article strong{ color:var(--ink); font-weight:500;}
.article .pull-img{ margin:36px -28px; }
.article .pull-img img{ width:100%; border-radius:6px;}
.article .pull-img figcaption{ font-size:.74rem; color:var(--ink-faint); text-align:center; margin-top:10px; font-style:italic; font-family:var(--serif);}

.article-cta{ background:var(--wine-deep); color:var(--cream); border-radius:8px; padding:40px; text-align:center; margin:48px 0;}
.article-cta h3{ font-family:var(--serif); font-size:1.8rem; color:#fff; margin-bottom:10px;}
.article-cta p{ color:rgba(255,255,255,.82); margin-bottom:20px; font-size:.96rem;}

.demo-ribbon{ background:var(--gold); color:#2b2008; text-align:center; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding:8px; font-weight:500;}
.demo-ribbon a{ text-decoration:underline;}