/* Homepage front page. Loaded after home.css; replaces its cover hero and
   contents with a newspaper front: lead story with the clock art, the
   issue's contents, the Shop block over research picks, then sections.
   Hairline rules between columns, no boxes. home.css keeps the cover
   nameplate, Join / crisis / Shop block and footer. */
.tagline{
  margin:0 0 calc(var(--u)*2); text-align:center;
  font-size:15px; line-height:1.4; color:var(--ink-mute);
}
.tagline em{font-style:italic; color:var(--accent)}

.front{
  margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr);
  gap:28px;
}
.front > *{min-width:0}
.cat{
  display:inline-block; font-family:var(--ui); font-size:13px; font-weight:600;
  letter-spacing:.01em; color:var(--accent); margin-bottom:8px;
}
.meta{font-family:var(--ui); font-size:13px; line-height:1.4; color:var(--ink-soft)}
.meta b{font-weight:600; color:var(--ink-mute)}
.meta span{padding:0 .4em}

.lead-art{
  display:flex; align-items:flex-end; justify-content:center;
  aspect-ratio:4/3; background:var(--panel); overflow:hidden;
}
.lead-art svg{display:block; height:92%; width:auto}
.lead-art .figure-body{fill:url(#shoulderGrad)}
.lead-art .clock-ring{fill:none; stroke:url(#rimGrad); stroke-width:4.5}
.lead-art .clock-hand-hour{stroke:var(--ink); stroke-width:5.5; stroke-linecap:round}
.lead-art .clock-hand-minute{stroke:var(--a4); stroke-width:3; stroke-linecap:round}
.lead-art .clock-hub{fill:var(--a4)}
.lead-art .clock-hub-core{fill:#152033}
.lead-body{text-align:center; padding:18px 4px 0}
.lead-hed{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,8vw,42px);
  line-height:1.04; letter-spacing:-.025em; color:var(--ink); margin:0 auto 12px; max-width:16ch;
}
.lead-hed a{color:inherit}
.lead-hed em{font-style:italic}
.lead-hed a:hover{color:var(--accent)}
.lead-dek{font-style:italic; font-size:17px; line-height:1.5; color:var(--ink-mute); margin:0 auto 12px; max-width:40ch}

.story{display:block; color:inherit}
.story img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:var(--panel); border:1px solid var(--rule); margin-bottom:12px}
.story-hed{
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2;
  letter-spacing:-.01em; color:var(--ink); margin:0 0 8px;
}
.story:hover .story-hed{color:var(--accent)}
.front-mid{display:grid; gap:24px}
/* Stacked columns get a hairline between them; side-by-side columns get a vertical one. */
.front-mid,.front-side{padding-top:24px; border-top:1px solid var(--rule)}
.front-mid .story + .story{padding-top:24px; border-top:1px solid var(--rule)}

.front-list{list-style:none; margin:0; padding:0}
.front-list li + li{border-top:1px solid var(--rule)}
.front-list a{display:block; padding:14px 0; color:inherit}
.front-list li:first-child a{padding-top:0}
.front-list .story-hed{font-size:18px; margin-bottom:6px}
/* Item separators sit a step lighter than the column rules. */
.front-list li + li,.latest li + li,.front-mid .story + .story{border-top-color:color-mix(in srgb, var(--rule) 55%, transparent)}
.front-list p{margin:0 0 8px; font-size:15px; line-height:1.45; color:var(--ink-mute)}
.front-list a:hover .story-hed{color:var(--accent)}
/* Shop block leading the right column; sticky only in the three-column layout. */
.front-shop{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center;
  margin-bottom:14px; padding-bottom:16px; border-bottom:1px solid var(--rule);
  background:var(--page); color:inherit;
}
.front-shop img{display:block; width:96px; height:96px}
/* White hat on the dark theme, black hat on the light one. */
.front-shop.hat-light,
:root[data-theme="light"] .front-shop.hat-dark{display:none}
:root[data-theme="light"] .front-shop.hat-light{display:grid}
.front-shop .story-hed{font-size:18px; margin-bottom:6px}
.front-shop:hover .story-hed{color:var(--accent)}

/* ---- section head: title left, "view all" right, hairline above ---- */
.sect{margin-top:44px}
.sect-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:1px solid var(--rule); padding-top:14px; margin-bottom:22px;
}
.sect-head h2{
  margin:0; font-family:var(--display); font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--ink);
}
.sect-head a{font-family:var(--ui); font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap}
.sect-head a:hover{color:var(--ink)}

.tool-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.tool-grid > *{color:inherit; display:block}
.tool-grid p{margin:0; font-size:15px; line-height:1.45; color:var(--ink-mute)}
.tool-grid p a{color:var(--ink)}
.tool-grid p a:hover{color:var(--accent)}

/* ---- latest: text left, thumbnail right ---- */
.latest{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr)}
.latest li + li{border-top:1px solid var(--rule)}
.latest a{
  display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:16px; align-items:start;
  padding:16px 0; color:inherit;
}
.latest li:first-child a{padding-top:0}
.latest .story-hed{font-size:17px; margin-bottom:6px}
.latest p{margin:0 0 8px; font-size:15px; line-height:1.45; color:var(--ink-mute);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.latest a:hover .story-hed{color:var(--accent)}
.latest .thumb{
  display:block; width:108px; aspect-ratio:1; object-fit:cover;
  background:var(--panel); border:1px solid var(--rule);
}
.latest .thumb-bsc{background:#f4f4f3 url("/assets/img/bipolar-support-club-logo.jpg") center/contain no-repeat}

@media (min-width:721px){
  .front{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 0}
  .front-lead{grid-column:1 / -1}
  .front-mid{padding-right:24px}
  .front-side{padding-left:24px; border-left:1px solid var(--rule)}
  .lead-art{aspect-ratio:16/9}
  .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
  .tool-grid > * + *{padding-left:24px; margin-left:24px; border-left:1px solid var(--rule)}
  .latest{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px}
  .latest li:nth-child(2) a{padding-top:0}
  .latest li:nth-child(2){border-top:0}
}
@media (min-width:1100px){
  .front{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr)}
  .front-lead{grid-column:auto; padding-right:28px}
  .front-mid,.front-side{padding-top:0; border-top:0}
  .front-mid{padding-inline:28px; border-left:1px solid var(--rule)}
  .front-side{padding-left:28px}
  /* 45px clears the site header, which is sticky from 1100px. */
  .front-shop{position:sticky; top:45px; z-index:1; padding-top:12px; margin-top:-12px}
  .lead-art{aspect-ratio:4/3}
  .lead-hed{font-size:42px}
}