/* post.css — long-form article layout for /info and /blogs/*.
   Sits on top of styles.css (Floodlit Calm tokens); prose-first, no film engine. */

/* The floodlit stadium (.ground) opens the page as a cover photo; the article
   starts only once it has faded out. .ground fades to solid bg at 86% of its
   height, so the post's top padding lands just past that point. */
.ground { height: min(64vh, 700px); height: min(64svh, 700px); }
.post { padding: min(57vh, 620px) 0 0; padding-top: min(57svh, 620px); }
.post-shell { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 24px; }

.post-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.post-eyebrow b { color: var(--brand); font-weight: 600; }
.post-eyebrow .dot { color: var(--line-strong); }

.post h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 800;
  margin-top: 18px; text-wrap: balance;
}
.post h1 em { font-style: normal; color: var(--amber); }

.post .standfirst {
  margin-top: 20px; color: var(--text-2);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.65; max-width: 58ch;
}

/* In this guide */
.post-toc {
  margin-top: 34px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.post-toc-h {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.post-toc ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  color: var(--text-2); font-size: .95rem;
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; color: var(--brand);
}
.post-toc a:hover { color: var(--text); }

/* Body copy */
.post-body { padding-bottom: clamp(56px, 8vw, 96px); }
.post-body h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 750;
  margin-top: clamp(52px, 7vw, 76px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
  text-wrap: balance;
  scroll-margin-top: 90px;
}
.post-body h3 {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.01em; margin-top: 34px;
}
.post-body p { margin-top: 18px; color: var(--text-2); max-width: 66ch; }
.post-body p b, .post-body li b { color: var(--text); font-weight: 650; }
.post-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(108, 171, 221, .4); }
.post-body a:hover { text-decoration-color: var(--brand); }
.post-body ul { margin: 18px 0 0; padding-left: 22px; color: var(--text-2); }
.post-body ul li { margin-top: 8px; max-width: 62ch; }
.post-body ul li::marker { color: var(--brand); }

/* Figures */
.post-figure {
  margin: clamp(30px, 4.5vw, 44px) 0 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sheet); box-shadow: var(--shadow-card);
}
.post-figure figcaption {
  margin-top: 16px; font-family: var(--mono); font-size: .76rem;
  line-height: 1.6; color: var(--text-3); letter-spacing: .01em;
}
.post-figure--img { padding: 0; overflow: hidden; }
.post-figure--img img { width: 100%; height: auto; }
.post-figure--img figcaption { padding: 14px 18px 16px; margin-top: 0; border-top: 1px solid var(--hairline); }

/* Native app screenshots (rendered by the iOS app's snapshot pipeline),
   framed in a phone outline so they read instantly as app screens. */
.post-figure--phone {
  max-width: 400px; margin-inline: auto; position: relative;
  background: none; border: 0; box-shadow: none; overflow: visible; padding: 0;
}
.post-figure--phone img {
  width: 100%;
  border: 10px solid #10192A;                 /* bezel */
  outline: 1px solid var(--line-strong);
  border-radius: 54px;
  box-shadow: var(--shadow-sheet);
}
.post-figure--phone::before {                  /* island: the "this is a phone" cue */
  content: ""; position: absolute; z-index: 1;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 24px; border-radius: 999px;
  background: #05080D;
}
.post-figure--phone figcaption { border-top: 0; padding: 14px 8px 0; }

/* Native heat glyphs in the temperature scale */
.temp-tier { grid-template-columns: 24px 108px 1fr; }
.tt-glyph { width: 19px; height: auto; align-self: center; justify-self: center; }

/* Temperature scale */
.temp-scale { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.temp-tier {
  display: grid; grid-template-columns: 14px 108px 1fr; gap: 14px; align-items: baseline;
  padding: 12px 2px; border-bottom: 1px solid var(--hairline);
}
.temp-tier:last-child { border-bottom: 0; }
.temp-tier i {
  width: 10px; height: 10px; border-radius: 50%; align-self: center;
  background: var(--tier, var(--text-3));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier, transparent) 55%, transparent);
}
.temp-tier b { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--text); }
.temp-tier span { color: var(--text-2); font-size: .92rem; }
.temp-tier--scorching { --tier: var(--scorch); }
.temp-tier--hot       { --tier: var(--amber); }
.temp-tier--neutral   { --tier: var(--text-3); box-shadow: none; }
.temp-tier--cold      { --tier: var(--cool-soft); }
.temp-tier--freezing  { --tier: var(--cool); }

/* Signals grid */
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; margin-top: 8px; }
.signal-grid > div { padding: 14px 2px; border-bottom: 1px solid var(--hairline); }
.signal-grid b { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; }
.signal-grid span { display: block; margin-top: 4px; color: var(--text-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 620px) {
  .signal-grid { grid-template-columns: 1fr; }
  .temp-tier { grid-template-columns: 24px 96px 1fr; gap: 10px; }
}

/* Answer capsule: the direct answer that opens each section */
.post-body .capsule { color: var(--text); font-size: 1.04rem; }

/* Author / provenance block at the foot of the article */
.post-author {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: clamp(44px, 6vw, 64px); padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.post-author img { width: 44px; height: 44px; flex: none; }
.post-author b { font-family: var(--display); font-weight: 700; }
.post-author p { margin-top: 6px; font-size: .92rem; color: var(--text-2); max-width: none; }
.post-author-meta {
  display: block; margin-top: 10px;
  font-family: var(--mono); font-size: .72rem; color: var(--text-3); letter-spacing: .04em;
}