/* cheek&glow — sitewide tokens and chrome, carried over from the design file. Every page loads this. */
:root{
  --bg:#ffffff;
  --surface:#faf7f4;
  --surface-2:#f4efe9;
  --cream:#f7ece2;
  --ink:#171217;
  --ink-dim:#6e6660;
  --blush:#e3c3be;
  --terracotta:#bd7760;
  --mauve:#99534f;
  --espresso:#3f2c23;
  --border:rgba(23,18,17,.1);
  --pastel-blue:#e7eff0;
  --pastel-pink:#f6ebe9;
  --pastel-sage:#eef0e8;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;text-wrap:balance;}
p{margin:0;}
img{max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}

.wrap{
  max-width:1220px;
  margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}

/* ---- media placeholders (generated soft-light imagery, stand-in for real photography) ---- */
.media{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:inherit;}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- tags ---- */
.tag{
  display:inline-flex;align-items:center;font-family:var(--font-body);
  font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
}
.tag-skincare{color:#a9685f;}
.tag-fitness{color:var(--terracotta);}
.tag-wellness{color:var(--mauve);}
.tag-selfcare{color:var(--ink);}
.tag-trends{color:var(--terracotta);}
.tag-edits{color:#a9685f;}
.tag-lifestyle{color:var(--mauve);}
.tag-celebrity{color:var(--espresso);}

/* ---- top announcement bar ---- */
.topbar{background:var(--surface-2);}
.topbar .wrap{padding-block:8px;}
.topbar p{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--ink-dim);}
.topbar strong{color:var(--mauve);font-weight:600;}

/* ---- header / nav ---- */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  z-index:60;background:var(--bg);
}
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-main{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;}
.logo{display:inline-flex;align-items:center;}
.logo-img{height:clamp(22px,4.2vw,30px);width:auto;display:block;}
.logo-img-full{height:52px;width:auto;display:block;}
.footer-tagline{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve);margin:10px 0 0;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);transition:color .15s;}
.nav-links a:hover{color:var(--mauve);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.subscribe-btn{
  border:1px solid var(--ink);background:var(--ink);color:#fff;padding:9px 20px;border-radius:999px;font-size:.74rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.subscribe-btn:hover{background:var(--mauve);border-color:var(--mauve);}
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--ink);}
.nav-toggle span{display:block;width:16px;height:2px;background:currentColor;position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;}
.nav-toggle span::before{top:-5px;}
.nav-toggle span::after{top:5px;}

@media (max-width:860px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;
    gap:4px;background:var(--surface);border-bottom:1px solid var(--border);
    padding:14px max(16px, env(safe-area-inset-left,0px)) 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:10px 4px;width:100%;}
  .nav-toggle{display:inline-flex;}
}

/* ---- section head (reused across rails/categories) ---- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.section-head .eyebrow{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve);margin-bottom:10px;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:500;font-style:normal;letter-spacing:-.01em;line-height:1.12;}
.section-head .section-dek{font-family:var(--font-body);color:var(--ink-dim);font-size:.96rem;margin-top:10px;max-width:48ch;}
.see-all{font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--mauve);white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .15s,color .15s;}
.see-all:hover{color:var(--espresso);border-color:var(--espresso);}

/* ---- card grids (trending + category rows) ---- */
.rail,.category-section{padding-block:54px;}
.category-section + .category-section{border-top:1px solid var(--border);}
.category-section.tint-blue{background:var(--pastel-blue);border-top:none;}
.category-section.tint-blue + .category-section{border-top:none;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .15s,transform .15s;}
.card:hover{border-color:var(--terracotta);transform:translateY(-2px);}
.card .media{border-radius:0;}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.card-title{font-size:1.15rem;font-weight:500;line-height:1.3;}
.card-dek{font-family:var(--font-body);font-size:.86rem;color:var(--ink-dim);line-height:1.5;}
.card-meta{font-family:var(--font-body);margin-top:auto;padding-top:6px;font-size:.74rem;color:var(--ink-dim);letter-spacing:.02em;}

/* ---- centered section head (celebrity-style, ornamental) ---- */
.section-head-centered{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:28px;text-align:center;}
.section-head-centered .dots{display:flex;gap:5px;}
.section-head-centered .dots span{width:4px;height:4px;border-radius:999px;background:var(--terracotta);opacity:.7;}
.section-head-centered h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:500;}
.section-dek-centered{font-family:var(--font-body);text-align:center;color:var(--ink-dim);font-size:.95rem;max-width:52ch;margin:-14px auto 28px;}

/* ---- newsletter band (the one bold color moment) ---- */
.newsletter{background:var(--pastel-pink);padding-block:68px;}
.newsletter .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;}
.newsletter h2{color:var(--ink);font-size:clamp(2rem,4vw,2.8rem);font-weight:500;font-style:normal;letter-spacing:-.01em;}
.newsletter p{font-family:var(--font-body);color:var(--ink);opacity:.72;max-width:46ch;}
.newsletter-form{display:flex;gap:10px;margin-top:10px;width:100%;max-width:420px;flex-wrap:wrap;justify-content:center;}
.newsletter-form input{
  flex:1;min-width:200px;padding:13px 16px;border-radius:999px;border:1px solid rgba(60,42,33,.3);
  background:rgba(247,236,226,.5);color:var(--espresso);font-size:.92rem;font-family:inherit;
}
.newsletter-form input::placeholder{color:rgba(60,42,33,.65);}
.newsletter-form button{
  padding:13px 24px;border-radius:999px;border:none;background:var(--espresso);color:#fff;
  font-weight:600;font-size:.88rem;letter-spacing:.02em;white-space:nowrap;transition:opacity .15s;
}
.newsletter-form button:hover{opacity:.85;}
.newsletter-note{font-size:.78rem;color:#3c2a21;opacity:.75;}

/* ---- footer ---- */
.site-footer{background:var(--surface-2);border-top:1px solid var(--border);padding-block:52px 28px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;}
.footer-brand .logo{display:block;margin-bottom:12px;}
.footer-brand p{color:var(--ink-dim);font-size:.88rem;max-width:32ch;line-height:1.55;}
.footer-col h3{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.9rem;color:var(--ink);opacity:.85;transition:opacity .15s;}
.footer-col a:hover{opacity:1;color:var(--terracotta);}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--border);}
.footer-bottom p{font-size:.78rem;color:var(--ink-dim);}
.footer-bottom .disclaimer{max-width:56ch;}
.social-row{display:flex;gap:12px;}
.social-row a{width:34px;height:34px;border:1px solid var(--border);border-radius:999px;display:flex;align-items:center;justify-content:center;transition:border-color .15s;}
.social-row a:hover{border-color:var(--terracotta);}
.social-row a:hover svg{fill:var(--terracotta);}
.social-row svg{width:15px;height:15px;fill:var(--ink);}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:540px){
  .footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* ===== Live-site additions: things the static mockup didn't need ===== */

/* Tags are keyed by category slug, so a new category falls back to the base colour. */
.tag { color: var(--mauve); }
.tag-skincare, .tag-edits-picks { color: var(--rose-deep); }
.tag-fitness, .tag-trends { color: var(--terracotta); }
.tag-wellness, .tag-lifestyle { color: var(--mauve); }
.tag-self-care { color: var(--ink); }
.tag-celebrity { color: var(--espresso); }
:root { --rose-deep: #a9685f; }

.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* A section holding fewer posts than usual keeps its column width, not a giant card. */
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; } }

.nav-links a.active { color: var(--mauve); }
.logo-img-footer { height: 34px; }
.nav-search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); transition: color .15s, border-color .15s; }
.nav-search:hover { color: var(--mauve); border-color: var(--mauve); }

/* The links need more room than the mockup's once search sits beside them. */
@media (max-width: 1120px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px max(16px, env(safe-area-inset-left, 0px)) 18px; }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 10px 4px; width: 100%; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 400px) { .subscribe-btn { padding: 9px 14px; } }

.newsletter-note { flex-basis: 100%; }

/* Footer: a fourth link column carries About / Contact / legal. */
.footer-col .social-row { margin-top: 18px; }
.footer-legal { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }
.footer-legal a:hover { color: var(--terracotta); }
@media (max-width: 860px) { .footer-legal { align-items: flex-start; text-align: left; } }

.ad-band { padding-block: 24px; text-align: center; }
.ad-band.wrap { display: block; }
.ad-band-side { padding-block: 0; }
.ad-label { display: block; margin-bottom: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }

/* Listing */
.listing { padding-block: 42px 68px; }
.listing-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.1; letter-spacing: -.01em; }
.listing-count { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.listing-empty { padding: 56px 0; text-align: center; }
.listing-empty h2 { font-size: 1.8rem; margin-bottom: 10px; }
.listing-empty p { color: var(--ink-dim); }
.listing-pagination { margin-top: 44px; }
.listing-pagination .site-pagination {
  --pg-font: var(--font-body); --pg-size: 13px; --pg-tracking: .02em;
  --pg-fg: var(--ink-dim); --pg-border: var(--border);
  --pg-hover-fg: var(--mauve); --pg-hover-bg: var(--surface);
  --pg-current-fg: #fff; --pg-current-bg: var(--ink); --pg-current-border: var(--ink);
  margin: 0;
}

/* Forms (contact, report, comments) */
.cg-form { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.cg-form .form-row { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.cg-form .form-pair { display: flex; gap: 16px; flex-wrap: wrap; }
.cg-form .form-pair .form-row { min-width: 200px; }
.cg-form label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.cg-form input, .cg-form select, .cg-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: .95rem; }
.cg-form input:focus, .cg-form select:focus, .cg-form textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.cg-form textarea { resize: vertical; }
.cg-form .form-status { font-size: .86rem; color: var(--mauve); min-height: 1em; }
.cg-form .form-error { font-size: .86rem; color: var(--mauve); }
.cg-btn { align-self: flex-start; padding: 12px 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .15s, border-color .15s; }
.cg-btn:hover { background: var(--mauve); border-color: var(--mauve); }