/* ==========================================================================
   Thrive at Work: the guide template (f-blog-posts.css), loaded after redesign.css
   and pages.css by every /blog article (not by /blog itself). One template for all
   guides: a new guide is a copy of an existing one with its content changed.
   Hero: the shared .ph. Text: .gd-text holds .gs rows, each a sticky side head
   (number + h2) beside its prose, on the homepage's 5/7 split. Then the FAQ chapter
   (homepage accordion), the Keep reading links on the same split, the night band.
   ========================================================================== */

/* ---------- Hero: long headlines, the photo in its own proportions ---------- */
/* a guide's H1 is a sentence, so it sets a little tighter than a workshop name; it stops
   growing where the .wrap does (about 1440 wide), so the longest line never runs up to
   the photo on a wide screen */
.gd .ph-h{font-size:clamp(2.55rem,5.4vw,4.875rem);font-family:var(--serif-t)}
.gd .ph-media figure{max-height:calc(100svh - var(--hd) - 120px)}
.gd .ph-media img{max-height:inherit;object-fit:cover}

/* ---------- The text: one row per section, head left, prose right ---------- */
.gs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.gs+.gs{margin-top:clamp(80px,8vw,136px);padding-top:clamp(24px,2.4vw,36px);border-top:1px solid var(--rule)}
.gs-side{position:sticky;top:calc(var(--hd) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.8vw,24px)}
.gs-h{max-width:10em;font:400 clamp(2rem,3.3vw,3.2rem)/1.02 var(--serif-t);letter-spacing:-.016em;text-wrap:balance}
/* the prose fills its column so the hairlines of a fact, checklist or chooser end where the
   row rules, the FAQ and the link lists end; the running text keeps a 38em measure */
.gs .prose{max-width:none}
.gs .prose>:not(.fact,.chk,.pick){max-width:38em}
/* section 1 opens on the byline beside the first paragraphs, the first one set larger */
.gs-open .meta{flex-direction:column;align-items:flex-start;gap:6px;padding-top:18px;border-top:1px solid var(--rule)}
.gs-open .meta>*+*::before{display:none}
.gs-open .prose>p:first-child{font-size:clamp(1.25rem,1.05rem + .62vw,1.5rem);line-height:1.5;letter-spacing:-.004em;color:var(--ink)}

/* a fact reads as a pull line in the serif, its lead-in as the italic accent */
.gd .prose .fact{margin-block:clamp(40px,4vw,56px);padding:clamp(26px,2.6vw,36px) 0;font:400 clamp(1.4rem,1.12rem + .74vw,1.8rem)/1.32 var(--serif-t);letter-spacing:-.006em;text-wrap:pretty}
.gd .prose .fact b{font-weight:400;font-style:italic;color:var(--t-coral)}
/* checklist and chooser sit a step further from the running text */
.gd .prose :is(.chk,.pick){margin-block:2.6em}
.gd .prose .chk label{font-size:var(--fs-body);color:var(--ink)}
.gd .prose .pick-a{color:var(--ink)}
/* (after the rules above) a row's prose starts level with its side head and ends on its
   last line; a fact or chooser that closes a row leaves the closing rule to the next row */
.gs .prose>:first-child{margin-top:0}
.gs .prose>:last-child{margin-bottom:0}
.gs .prose>:is(.fact,.pick):last-child{padding-bottom:0;border-bottom:0}
/* and one that opens a row takes the row's hairline (just above it while the head sits
   beside the prose) as its own top rule */
@media (min-width:961px){
  .gs+.gs .prose>:is(.fact,.chk,.pick):first-child{padding-top:0;border-top:0}
  .gs+.gs .prose>.chk:first-child .chk-t{padding-top:0}
}

/* ---------- FAQ chapter + Keep reading on the same split ---------- */
.gd-faq .faq-head .h2{max-width:8em}
.gd-rel{display:grid;row-gap:clamp(56px,6vw,88px);margin-top:clamp(96px,10vw,160px)}
.gd-rel-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,104px);align-items:start}
.gd-rel .lk-h{margin:0;padding-top:12px}

/* ---------- Responsive ---------- */
/* small laptops: the guide H1 is a size below the shared display, so the hero keeps its
   7/5 split instead of shrinking the photo to a third of the width */
@media (min-width:961px) and (max-width:1100px){
  .gd .ph-copy{grid-column:1/8}
  .gd .ph-media{grid-column:8/13}
}
@media (max-width:960px){
  .gs,.gd-rel-row{grid-template-columns:minmax(0,1fr)}
  .gs-side{position:static}
  .gs-open{row-gap:28px}
  .gd .ph-media figure{max-height:none}
  .gd .ph-media img{max-height:none}
}
@media (max-width:760px){
  .gs+.gs{margin-top:72px}
  .gs-h{max-width:none}
  .gd-rel-row{row-gap:16px}
  .gd-rel .lk-h{padding-top:0}
}
@media print{
  .gs-side{position:static!important}
  .gs{break-inside:auto}
}