/* cheek&glow — homepage only: the full-bleed hero, mosaic and sidebar. */
/* ---- hero (the big featured story — this is the piece theSkimm's own homepage doesn't have) ---- */
.hero{padding-block:28px 8px;}
.hero-label{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px;}
.hero-label::after{content:"";flex:1;height:1px;background:var(--border);}
/* full-bleed hero — breaks out of .wrap to span the entire viewport width */
.hero-media{position:relative;width:100%;min-height:64vh;max-height:720px;overflow:hidden;background:var(--surface-2);}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;z-index:0;}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(0deg, rgba(14,9,6,.9) 0%, rgba(14,9,6,.72) 32%, rgba(14,9,6,.42) 58%, rgba(14,9,6,.12) 80%, rgba(14,9,6,0) 100%),
    linear-gradient(90deg, rgba(14,9,6,.32) 0%, rgba(14,9,6,.08) 45%, rgba(14,9,6,0) 65%);
}
.hero-inner{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;}
.hero-inner .wrap{width:100%;}
.hero-content{max-width:700px;display:flex;flex-direction:column;gap:16px;padding-bottom:48px;}
.hero-content h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;font-weight:500;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35);}
.hero-dek{font-family:var(--font-body);color:rgba(255,255,255,.9);font-size:1.05rem;max-width:46ch;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.3);}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:rgba(255,255,255,.76);}
.hero-meta span:not(:last-child)::after{content:"·";margin-left:14px;color:rgba(255,255,255,.4);}
.hero-cta{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.95rem;width:fit-content;}
.hero-cta:hover{color:var(--blush);}

@media (max-width:820px){
  .hero-media{min-height:52vh;}
  .hero-content{padding-bottom:30px;gap:12px;}
}
@media (max-width:540px){
  .hero-media{min-height:56vh;}
}

/* ---- mosaic / mixed-hierarchy grid ---- */
.mosaic-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:1fr;gap:20px;}
.mosaic-feature{grid-row:1 / 3;display:flex;flex-direction:column;}
.mosaic-feature .media{aspect-ratio:auto;flex:1;min-height:260px;}
.mosaic-feature .card-title{font-size:clamp(1.4rem,2.3vw,1.8rem);font-weight:500;line-height:1.16;}
.mosaic-feature .card-dek{font-size:.92rem;}
.mosaic-card .media{aspect-ratio:16/10;}
.mosaic-card .card-body{padding:14px 16px 16px;gap:6px;}
.mosaic-card .card-title{font-size:.98rem;font-weight:500;line-height:1.32;}
.mosaic-card .card-meta{font-size:.7rem;}
@media (max-width:900px){
  .mosaic-grid{grid-template-columns:1fr 1fr;}
  .mosaic-feature{grid-column:1 / 3;grid-row:auto;}
}
@media (max-width:560px){
  .mosaic-grid{grid-template-columns:1fr;}
  .mosaic-feature{grid-column:1;}
}

/* ---- edit layout: main content + sidebar ---- */
.edit-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
@media (max-width:980px){
  .edit-layout{grid-template-columns:1fr;}
}
.card-grid-pair{grid-template-columns:repeat(2,1fr);}
@media (max-width:620px){
  .card-grid-pair{grid-template-columns:1fr;}
}
.sidebar-stack{display:flex;flex-direction:column;gap:24px;position:sticky;top:90px;}
@media (max-width:980px){
  .sidebar-stack{position:static;}
}
.side-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.side-box-head{font-family:var(--font-body);background:var(--ink);color:#fff;padding:13px 18px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.side-box-list{display:flex;flex-direction:column;}
.side-box-item{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--border);}
.side-box-item:last-child{border-bottom:none;}
.side-box-num{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--terracotta);line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums;}
.side-box-content{display:flex;flex-direction:column;gap:4px;min-width:0;}
.side-box-eyebrow{font-family:var(--font-body);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve);}
.side-box-title{font-family:var(--font-display);font-size:.96rem;font-weight:500;line-height:1.35;color:var(--ink);transition:color .15s;}
.side-box-item a.side-box-title:hover,.side-box-item:hover .side-box-title{color:var(--terracotta);}
.side-box-topics .side-box-title{font-size:.98rem;}


/* The tag sits on the dark photo, so the design's darker category colours would vanish. */
.hero-tag { color: var(--blush); }
.hero-content h1 a:hover { color: var(--blush); }
.edit-layout > .card-grid { align-self: start; }
.mosaic-feature .media { position: relative; }

/* The picture is the backdrop and the words set the height, so a long headline grows the
   hero instead of being clipped off the top of it. */
.hero-media { max-height: none; display: flex; }
.hero-inner { position: relative; inset: auto; width: 100%; min-height: inherit; padding-top: 56px; }
.hero-media::after { background: linear-gradient(0deg, rgba(14,9,6,.9) 0%, rgba(14,9,6,.72) 32%, rgba(14,9,6,.42) 58%, rgba(14,9,6,.12) 80%, rgba(14,9,6,0) 100%), linear-gradient(90deg, rgba(14,9,6,.32) 0%, rgba(14,9,6,.08) 45%, rgba(14,9,6,0) 65%); }
@media (max-width: 820px) {
  .hero-media::after { background: linear-gradient(0deg, rgba(14,9,6,.92) 0%, rgba(14,9,6,.78) 50%, rgba(14,9,6,.5) 80%, rgba(14,9,6,.3) 100%); }
}