/* The Serene Journal — newspaper styling for blog.serenemedspas.com */
:root{
  --ink:#121212; --ink-2:#333; --muted:#5a5a5a; --hair:#e2e2e2; --rule:#121212;
  --paper:#fff; --paper-2:#f7f7f5; --accent:#c94f74; --link:#326891;
  --serif:'Newsreader','Times New Roman',Georgia,serif;
  --sans:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
  --display:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--serif);color:var(--ink);background:var(--paper);line-height:1.5;font-size:17px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sans{font-family:var(--sans)}
.kicker{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.kicker a:hover{color:var(--accent)}

/* top utility bar */
.topbar{font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.topbar .ed{display:flex;align-items:center;gap:10px;text-transform:uppercase;color:var(--muted)}
.topbar .ed a{padding:3px 8px;border:1px solid transparent;border-radius:2px;color:var(--ink)}
.topbar .ed a.on{border-color:var(--ink);font-weight:700}
.topbar .ed a:hover{color:var(--accent)}
.topbar .util a{margin-left:18px;text-transform:uppercase;font-weight:600}
.topbar .util a.book{background:var(--ink);color:#fff;padding:6px 12px;border-radius:2px}
.topbar .util a.book:hover{background:var(--accent)}

/* masthead */
.masthead{text-align:center;padding:26px 0 0;border-bottom:1px solid var(--rule);position:relative}
.masthead:after{content:"";display:block;height:0;border-bottom:3px double var(--rule);margin-top:6px}
.masthead .date{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.masthead .plate{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:-.01em;line-height:1;color:var(--ink)}
.masthead .plate a:hover{color:var(--ink)}
.masthead .tag{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--muted);margin:10px 0 14px}
.sections{border-bottom:1px solid var(--hair)}
.sections ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.sections li a{display:block;padding:11px 14px;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sections li a:hover,.sections li a.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.sections li.ext a{color:var(--muted);font-weight:500}

/* front page */
.front{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0;margin-top:26px}
.front .main{padding-right:32px}
.front .side{border-left:1px solid var(--hair);padding-left:28px}
.lead .img{margin-bottom:12px}
.lead .img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lead h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;margin:6px 0 10px}
.lead h2 a:hover{color:var(--accent)}
.lead p.sum{font-size:1.05rem;color:var(--ink-2);max-width:60ch}
.by{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:10px;letter-spacing:.02em}
.by b{color:var(--ink);font-weight:600}
.by time{margin-left:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;padding-top:24px;border-top:1px solid var(--hair)}
.story{padding-bottom:20px}
.story .img img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:10px}
.story h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.2;margin:4px 0 8px}
.story h3 a:hover{color:var(--accent)}
.story p{font-size:.95rem;color:var(--ink-2)}
.side h4{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.latest{list-style:none}
.latest li{display:grid;grid-template-columns:1fr 84px;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.latest li:last-child{border-bottom:0}
.latest h3{font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.25}
.latest h3 a:hover{color:var(--accent)}
.latest .m{font-family:var(--sans);font-size:.68rem;color:var(--muted);margin-top:5px;letter-spacing:.03em}
.latest img{width:84px;height:84px;object-fit:cover}
.side .promo{margin-top:26px;padding:18px;background:var(--paper-2);border-top:2px solid var(--ink)}
.side .promo h5{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.side .promo p{font-size:.95rem;color:var(--ink-2);margin-bottom:12px}
.btn{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;background:var(--ink);color:#fff;border-radius:2px}
.btn:hover{background:var(--accent)}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.o:hover{border-color:var(--accent);color:var(--accent)}
.section-head{margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.section-head h2{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.section-head a{font-family:var(--sans);font-size:.72rem;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cat-hero{padding:34px 0 8px;border-bottom:1px solid var(--hair);margin-bottom:8px}
.cat-hero h1{font-family:var(--serif);font-weight:500;font-size:2.4rem;line-height:1.1}
.cat-hero p{color:var(--muted);margin-top:8px;font-style:italic}

/* article */
.article{max-width:1200px;margin:0 auto;padding:0 20px}
.art-head{max-width:720px;margin:36px auto 0;text-align:left}
.art-head .kicker{margin-bottom:16px}
.art-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.015em}
.art-head .dek{font-size:1.2rem;color:var(--ink-2);margin:14px 0 20px;line-height:1.4}
.art-head .by{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.art-fig{max-width:960px;margin:28px auto 0}
.art-fig img{width:100%;height:auto;max-height:640px;object-fit:cover}
.art-fig figcaption{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:8px}
.art-body{max-width:640px;margin:30px auto 0;font-size:1.22rem;line-height:1.62}
.art-body > p:first-of-type::first-letter{font-family:var(--serif);font-weight:500;float:left;font-size:4.6em;line-height:.78;padding:6px 8px 0 0;color:var(--ink)}
.art-body p{margin:0 0 24px}
.art-body h2{font-family:var(--sans);font-weight:700;font-size:1.1rem;line-height:1.3;margin:36px 0 12px}
.art-body h3{font-family:var(--sans);font-weight:700;font-size:1rem;margin:28px 0 10px}
.art-body ul,.art-body ol{margin:0 0 24px 22px}
.art-body li{margin-bottom:10px}
.art-body a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--accent)}
.art-body em{font-style:italic}
.art-body figure,.art-body .post-fig{margin:28px 0}
.art-body figure img,.art-body .post-fig img{width:100%;height:auto}
.art-body figcaption{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:8px;text-align:left;font-style:normal}
.art-body .post-callout{font-family:var(--sans);font-size:.98rem;background:var(--paper-2);border-left:3px solid var(--ink);padding:16px 18px;margin:28px 0}
.art-body .post-disclaimer{font-family:var(--sans);font-size:.82rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:14px}
.art-body blockquote{font-size:1.5rem;line-height:1.3;font-weight:500;margin:32px 0;padding:0 0 0 20px;border-left:3px solid var(--ink)}
.art-body .faq{border-top:1px solid var(--hair);padding-top:10px}
.art-foot{max-width:640px;margin:28px auto 0}
.art-foot .cta{display:flex;flex-wrap:wrap;gap:12px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.art-foot .bio{font-family:var(--sans);font-size:.86rem;color:var(--ink-2);padding:20px 0;border-bottom:1px solid var(--hair);line-height:1.55}
.art-foot .bio b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.locs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.locs a{padding:18px 18px 18px 0;font-family:var(--sans)}
.locs a+a{border-left:1px solid var(--hair);padding-left:18px}
.locs b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:3px}
.locs span{font-size:.8rem;color:var(--muted)}
.locs a:hover b{color:var(--accent)}
.more{max-width:1200px;margin:40px auto 0;padding:0 20px}

/* footer */
footer{margin-top:60px;border-top:3px double var(--rule);padding:26px 0 40px;font-family:var(--sans);font-size:.82rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
footer h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
footer ul{list-style:none}
footer li{margin-bottom:6px;color:var(--ink-2)}
footer a:hover{color:var(--accent)}
footer .plate{font-family:var(--display);font-weight:900;font-size:1.6rem;margin-bottom:8px}
footer .fine{margin-top:26px;padding-top:14px;border-top:1px solid var(--hair);color:var(--muted);font-size:.72rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media(max-width:900px){
  .front{grid-template-columns:1fr}
  .front .main{padding-right:0}
  .front .side{border-left:0;padding-left:0;margin-top:24px;border-top:2px solid var(--ink);padding-top:14px}
  .grid3{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:16px}
  .grid2,.grid3{grid-template-columns:1fr}
  .topbar .util a:not(.book){display:none}
  .art-body{font-size:1.12rem}
  .locs{grid-template-columns:1fr}
  .locs a+a{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  footer .cols{grid-template-columns:1fr}
}