/* ============================================================
   EXHALE DAILY — brand-published respiratory wellness magazine.
   Built on the same advertorial component idea as aftersmoke.co/read
   (dark disclosure bar, light editorial page, serif headlines), in
   Exhale's teal / black / white identity.

   Rules this file follows: spacing, radius, colour and type all come
   from the tokens below; type sizes are rem or clamp() with a vw middle
   term, never fixed px; breakpoints are min-width only and limited to
   561px, 901px.
   ============================================================ */
:root{
  --ink-900:#0b1011; --ink-800:#121a1b; --ink-700:#1b2627;
  --white:#fff; --mist-50:#f5f8f8; --mist-100:#e9f0f0; --line:#d9e3e3;
  /* Teal is taken from the Exhale Daily logo (about #256A6B); the lighter steps are for dark surfaces. */
  --teal-300:#7fd1cb; --teal-500:#2f8a8b; --teal-700:#256a6b; --teal-50:#e8f3f2;
  --text:#18282a; --text-soft:#4a5d5f; --text-on-dark:#e7f0f0; --text-on-dark-60:rgba(231,240,240,.6);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-container:clamp(1.25rem, 4vw, 3rem);

  --radius-md:10px; --radius-lg:14px; --radius-full:9999px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-editorial:'Newsreader', Georgia, 'Times New Roman', serif;
  --dur:.2s;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--white); color:var(--text); font-family:var(--font-body); font-size:1rem; line-height:1.7;}
img{display:block; max-width:100%; height:auto;}
a{color:var(--teal-700);}
a:hover{color:var(--ink-900);}
:focus-visible{outline:2px solid var(--teal-500); outline-offset:3px; border-radius:2px;}

/* ---------- Disclosure bar: on every page, always ---------- */
.topbar{
  background:var(--ink-900); color:var(--text-on-dark-60); text-align:center;
  font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:var(--space-3) var(--space-container);
}
.topbar strong{color:var(--teal-300); font-weight:600;}

/* ---------- Masthead ---------- */
.masthead{border-bottom:1px solid var(--line);}
.masthead-inner{
  max-width:72rem; margin:0 auto; padding:var(--space-4) var(--space-container);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-6);
}
/* Logo images */
.masthead-logo{width:clamp(8.5rem, 38vw, 11.5rem); height:auto;}
.masthead-logo-link{display:inline-block; line-height:0;}
.footer-logo{width:clamp(10rem, 52vw, 14rem); height:auto;}
.wordmark{display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; color:var(--ink-900);
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em;}
.wordmark svg{width:1.6rem; height:1.6rem; flex:none;}
.wordmark span{color:var(--teal-700);}
.masthead-tag{font-size:.85rem; color:var(--text-soft); margin:0;}

/* ---------- Shared ---------- */
.container{max-width:72rem; margin:0 auto; padding:0 var(--space-container);}
.pill{
  display:inline-block; font-family:var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-700); background:var(--teal-50); padding:.3rem var(--space-3); border-radius:var(--radius-full);
}
.pill--sponsored{color:var(--ink-900); background:var(--teal-300);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  background:var(--ink-900); color:var(--white); padding:var(--space-4) var(--space-8); border-radius:var(--radius-full);
  transition:background var(--dur) ease, transform var(--dur) ease; max-width:100%; text-align:center;
}
.btn:hover{background:var(--teal-700); color:var(--white);}
.btn--teal{background:var(--teal-500); color:var(--ink-900);}
.btn--teal:hover{background:var(--teal-300); color:var(--ink-900);}

/* ---------- Home: featured ---------- */
.feature{padding:var(--space-8) 0 var(--space-10);}
.feature-card{display:grid; gap:var(--space-6); text-decoration:none; color:inherit;}
/* Most photos are portrait 3:4, so phones show the whole length of the picture. */
.feature-media{border-radius:var(--radius-lg); overflow:hidden; background:var(--mist-100); aspect-ratio:3/4;}
.feature-media img{width:100%; height:100%; object-fit:cover;}
.feature-body{display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start;}
.feature-pills{display:flex; flex-wrap:wrap; gap:var(--space-2);}
.feature-title{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.85rem, 6vw, 2.75rem); line-height:1.12; letter-spacing:-.01em; margin:0; color:var(--ink-900);}
.feature-dek{font-size:1.05rem; color:var(--text-soft); margin:0; max-width:42rem;}
.meta{font-family:var(--font-display); font-size:.78rem; color:var(--text-soft); letter-spacing:.04em;}

/* ---------- Home: grid ---------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); border-top:1px solid var(--line); padding-top:var(--space-6); margin-bottom:var(--space-6);}
.section-head h2{font-family:var(--font-display); font-size:1.1rem; letter-spacing:.02em; margin:0; color:var(--ink-900);}
.grid{display:grid; gap:var(--space-8) var(--space-6); grid-template-columns:minmax(0,1fr); padding:0; margin:0; list-style:none;}
.card{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:var(--space-4); align-items:start; text-decoration:none; color:inherit;}
.card-media{border-radius:var(--radius-md); overflow:hidden; background:var(--mist-100); aspect-ratio:3/4;}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.card:hover .card-media img{transform:scale(1.03);}
.card-text{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); min-width:0;}
.card-title{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.1rem, 4.6vw, 1.5rem); line-height:1.2; margin:0; color:var(--ink-900);}
.card:hover .card-title{color:var(--teal-700);}
.card-dek{font-size:.9rem; line-height:1.5; color:var(--text-soft); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
@media (min-width:561px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .card{display:flex; flex-direction:column; gap:var(--space-3);}
  .card-text{gap:var(--space-3);}
  .card-dek{font-size:.95rem; -webkit-line-clamp:unset; display:block; overflow:visible;}
}
@media (min-width:901px){
  .grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .feature-card{grid-template-columns:minmax(0,28rem) minmax(0,1fr); align-items:center; gap:var(--space-12);}
}

/* ---------- Home: about strip ---------- */
.about-strip{background:var(--mist-50); border-block:1px solid var(--line); margin-top:var(--space-16); padding:var(--space-12) 0;}
.about-strip p{max-width:44rem; margin:0 0 var(--space-4);}
.about-strip h2{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.5rem, 4.6vw, 2rem); margin:0 0 var(--space-4); color:var(--ink-900);}

/* ---------- Article ---------- */
.article{max-width:42.5rem; margin:0 auto; padding:var(--space-8) var(--space-container) var(--space-12);}
.back{display:inline-flex; align-items:center; min-height:2.75rem; font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; margin-bottom:var(--space-5);}
.article-title{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.95rem, 6.4vw, 3rem); line-height:1.1; letter-spacing:-.01em; margin:var(--space-3) 0 var(--space-4); color:var(--ink-900);}
.article-dek{font-family:var(--font-editorial); font-size:clamp(1.15rem, 3.4vw, 1.4rem); line-height:1.4; color:var(--text-soft); margin:0 0 var(--space-5);}
.byline{display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); font-family:var(--font-display); font-size:.78rem; color:var(--text-soft); letter-spacing:.04em; margin-bottom:var(--space-6);}
.article-hero{margin:0 0 var(--space-8); border-radius:var(--radius-lg); overflow:hidden; background:var(--mist-100);}
.article-hero img{width:100%; aspect-ratio:3/4; object-fit:cover;}
@media (min-width:561px){ .article-hero{max-width:30rem; margin-inline:auto;} }
.prose p, .prose li{font-size:1.06rem;}
.prose p{margin:0 0 var(--space-5);}
.prose h2{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.5rem, 4.6vw, 1.9rem); line-height:1.2; margin:var(--space-10) 0 var(--space-3); color:var(--ink-900);}
.prose ul,.prose ol{margin:0 0 var(--space-5); padding-left:1.4rem;}
.prose li{margin-bottom:var(--space-2);}
.prose a{overflow-wrap:anywhere;}
.callout{background:var(--teal-50); border-left:3px solid var(--teal-500); padding:var(--space-4) var(--space-5); border-radius:0 var(--radius-md) var(--radius-md) 0; margin:var(--space-6) 0; font-size:.98rem;}
.callout p{margin:0; font-size:.98rem;}
.sources{border-top:1px solid var(--line); margin-top:var(--space-8); padding-top:var(--space-5); font-size:.9rem; color:var(--text-soft);}
.sources h3{font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 var(--space-2); color:var(--ink-900);}
.sources ul{margin:0; padding-left:1.2rem;}

/* ---------- From the brand ---------- */
.brandbox{background:var(--ink-900); color:var(--text-on-dark); border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6); margin:var(--space-10) 0 0;}
.brandbox .pill{background:var(--teal-300); color:var(--ink-900);}
.brandbox h2{font-family:var(--font-editorial); font-weight:500; font-size:clamp(1.4rem, 4.6vw, 1.8rem); line-height:1.2; margin:var(--space-3) 0 var(--space-3); color:var(--white);}
.brandbox p{margin:0 0 var(--space-5); color:var(--text-on-dark); font-size:1rem;}
.brandbox .fine{font-size:.78rem; color:var(--text-on-dark-60); margin:var(--space-4) 0 0;}

/* ---------- Up next: the next article, always at the end ---------- */
.upnext{border-top:1px solid var(--line); margin-top:var(--space-12); padding-top:var(--space-8);}
.upnext h2{font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-700); margin:0 0 var(--space-5);}
.upnext-list{list-style:none; padding:0; margin:0 0 var(--space-6);}
.upnext .card{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:var(--space-4);}
.upnext .card-title{font-size:clamp(1.25rem, 5vw, 1.75rem);}
.upnext .card-dek{display:block; overflow:visible;}
@media (min-width:561px){ .upnext .card{display:grid; flex-direction:unset;} .upnext .card-media{max-width:16rem;} .upnext .card-text{gap:var(--space-3);} }

/* ---------- Keep reading ---------- */
.more{border-top:1px solid var(--line); padding:var(--space-10) 0 0; margin-top:var(--space-12);}
.more h2{font-family:var(--font-display); font-size:1rem; letter-spacing:.02em; margin:0 0 var(--space-5); color:var(--ink-900);}
.more .grid{gap:var(--space-6);}
@media (min-width:901px){ .more .grid{grid-template-columns:repeat(3, minmax(0,1fr));} }

/* ---------- Footer (light: the logo is black on transparent) ---------- */
.footer{background:var(--mist-50); border-top:1px solid var(--line); color:var(--text-soft); margin-top:var(--space-16); padding:var(--space-12) 0 var(--space-10); font-size:.85rem;}
.footer a{color:var(--teal-700);}
.footer a:hover{color:var(--ink-900);}
.footer-inner{max-width:72rem; margin:0 auto; padding:0 var(--space-container); display:grid; gap:var(--space-6); justify-items:start;}
.footer p{margin:0; max-width:46rem;}
.footer-links{display:flex; flex-wrap:wrap; gap:0 var(--space-6); list-style:none; padding:0; margin:0;}
.footer-links a,.footer p a{display:inline-block; padding-block:var(--space-3);}
.disclaimer{border-top:1px solid var(--line); padding-top:var(--space-5); font-size:.78rem; line-height:1.6;}
.card .pill{align-self:flex-start;}

@media (prefers-reduced-motion:reduce){ .card-media img{transition:none;} .card:hover .card-media img{transform:none;} }