/* ==========================================================================
   Blog posts, Forty-Five theme: reading turns the dial.
   One template for the six posts (generated from the port's post data).
   A drawing of the glyph's beams sits in the left rail and turns minus,
   divide, plus, times as the reader works through the post, landing on
   times at the end. Under 1100px it rides in a corner badge.
   ========================================================================== */

:root {
  --post-measure: 44rem;
  --post-bevel-hi: #e2e4ff; /* a bevel facing the light */
  --post-bevel-lo: #080b38; /* a bevel facing away */
}

/* Layout: rail, reading column, margin
   ========================================================================== */
.post {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(0, var(--post-measure)) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  padding: calc(var(--nav-height) + clamp(1.5rem, 3vw, 2.5rem)) var(--gutter) var(--section-y);
}

/* Head: the way back, the title, the facts
   ========================================================================== */
.post-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.post-head .section-head { grid-column: 1 / -1; margin-bottom: clamp(3rem, 7vw, 6rem); }
/* a 44px tap target that keeps the rule's 1em line */
.post-head-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: calc((44px - 1em) / -2) 0 calc((44px - 1em) / -2) -0.6rem;
  padding: 0 0.6rem;
}
.post-head-back:hover { color: var(--paper); }
.post-head-back:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }

.post-title {
  grid-column: 2 / -1;
  max-width: 21ch;
  font: 600 clamp(2.5rem, 5.2vw, 5.75rem)/0.95 var(--font-display);
  letter-spacing: -0.046em;
  text-wrap: balance;
}

/* byline: the author, photo and name, right under the title; the fuller
   card closes the post */
.post-byline {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.post-byline-photo {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--white-25);
  border-radius: 50%;
  object-fit: cover;
}
.post-byline-name { font: 500 0.98rem/1.2 var(--font-display); color: var(--white-90); }

.post-meta {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.1rem;
  border-top: var(--line);
}
.post-meta dt {
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-40);
}
.post-meta dd { margin-top: 0.6rem; font: 500 0.98rem/1.3 var(--font-display); color: var(--white-90); }

.post-figure {
  grid-column: 2 / -1;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  aspect-ratio: 16 / 9;
}
.post-figure .frame-clip img { object-position: 50% 30%; }

/* Dial: the rail drawing, its scale, its readout
   ========================================================================== */
.post-dial {
  grid-column: 1;
  grid-row: 3;
  position: sticky;
  top: calc(var(--nav-height) + 2.5rem);
  align-self: start;
  width: clamp(7.5rem, 9vw, 9.5rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.post-dial:not(.post-dial--ready) { visibility: hidden; }

.post-dial-face {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--night-2);
}
.post-glyph { width: 76%; height: auto; overflow: visible; }
.post-glyph-bevel { fill: color-mix(in oklab, var(--post-bevel-hi) var(--lit, 50%), var(--post-bevel-lo)); }
.post-glyph-stop--hi { stop-color: var(--indigo-soft); }
.post-glyph-stop--mid { stop-color: var(--indigo); }
.post-glyph-stop--lo { stop-color: var(--ink); }

.post-dial-scale { position: relative; margin-top: 1.5rem; }
.post-dial-track { position: relative; display: block; height: 1px; background: var(--white-25); }
/* ticks where each sign is fully formed */
.post-dial-track::before {
  content: "";
  position: absolute;
  inset: -3px 0;
  background:
    linear-gradient(var(--white-40), var(--white-40)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--white-40), var(--white-40)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--white-40), var(--white-40)) 66.667% 0 / 1px 100% no-repeat,
    linear-gradient(var(--white-40), var(--white-40)) 100% 0 / 1px 100% no-repeat;
}
.post-dial-fill {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}
.post-dial-marks { position: relative; height: 1rem; margin-top: 0.8rem; }
.post-dial-mark {
  position: absolute;
  top: 0;
  translate: -50% 0;
  font: 400 1rem/1 var(--font-display);
  color: var(--white-25);
}
.post-dial-mark:nth-child(2) { left: 33.333%; }
.post-dial-mark:nth-child(3) { left: 66.667%; }
.post-dial-mark:nth-child(4) { left: 100%; }
.post-dial-mark--past { color: var(--white-60); }
.post-dial-mark--on { color: var(--paper); }

.post-dial-readout {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: var(--line);
  font: 500 0.64rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--white-60);
}
.post-dial-word { color: var(--paper); }

/* Reading column: body, FAQ, byline
   ========================================================================== */
.post-main {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.post-body { counter-reset: post-part; }
.post-body > p,
.post-body > ul {
  font: 400 clamp(1.06rem, 0.3vw + 1rem, 1.2rem)/1.7 var(--font-display);
  color: var(--white-75);
  text-wrap: pretty;
}
.post-body > * + * { margin-top: 1.2em; }
.post-body > p:first-child {
  font-size: clamp(1.3rem, 0.9vw + 1.05rem, 1.7rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--paper);
}

/* each part opens on a rule with its number; the takeaway is the equals */
.post-body > h2 {
  counter-increment: post-part;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 1.1rem;
  border-top: var(--line);
  font: 600 clamp(1.55rem, 1.6vw + 1rem, 2.3rem)/1.1 var(--font-display);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.post-body > h2 + * { margin-top: 1.3rem; }
.post-body > h2::before {
  content: counter(post-part, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 1.5rem;
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--white-40);
}
.post-body > h2:last-of-type::before {
  content: "=" / "";
  font: 400 1.2rem/0.6 var(--font-display);
  letter-spacing: 0;
  color: var(--paper);
}

.post-body li { position: relative; padding-left: 1.6rem; }
.post-body li + li { margin-top: 0.65rem; }
/* square bullets, the dots of the divide sign */
.post-body li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--indigo);
}

.post-body a {
  color: var(--paper);
  text-decoration: underline 1px var(--indigo-soft);
  text-underline-offset: 0.22em;
}
.post-body a:hover { text-decoration-color: var(--paper); }
.post-body a:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
.post-body > .post-cta { margin-top: 2.5rem; }
.post-body .btn { color: var(--night); text-decoration: none; }
.post-body .btn:hover { color: var(--paper); }

/* an unfilled [JOSH: ...] spot: loud enough that it cannot ship unseen */
.post-body > .post-todo {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--indigo-soft);
  font: 500 0.9rem/1.5 var(--font-mono);
  color: var(--indigo-soft);
}

.post-faq { margin-top: clamp(3.5rem, 6vw, 5rem); counter-reset: post-faq; }
.post-faq-title {
  padding-top: 1.1rem;
  border-top: var(--line);
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-60);
}
.post-faq-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.6rem 0;
  border-bottom: var(--line);
  counter-increment: post-faq;
}
.post-faq-item::before {
  content: counter(post-faq, decimal-leading-zero) / "";
  grid-row: 1 / 3;
  padding-top: 0.4rem;
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--white-40);
}
.post-faq-item h3 {
  font: 600 clamp(1.15rem, 0.5vw + 1rem, 1.4rem)/1.25 var(--font-display);
  letter-spacing: -0.02em;
}
.post-faq-item p {
  margin-top: 0.7rem;
  font: 400 clamp(1rem, 0.2vw + 0.95rem, 1.1rem)/1.65 var(--font-display);
  color: var(--white-75);
}

.post-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.post-author-photo {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--white-25);
  border-radius: 50%;
  object-fit: cover;
}
.post-author-name { font: 600 1rem/1.2 var(--font-display); }
.post-author-handle {
  margin-top: 0.4rem;
  font: 500 0.68rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--white-40);
}

/* Narrow: one column, the dial rides in a corner badge
   ========================================================================== */
@media (max-width: 1100px) {
  .post { grid-template-columns: minmax(0, 1fr); }
  .post-title, .post-byline, .post-meta, .post-figure { grid-column: 1; }
  .post-main { grid-column: 1; max-width: var(--post-measure); }
  .post-figure { aspect-ratio: 3 / 2; }

  /* the badge shows while the reader scrolls and steps away once they stop
     to read (post.js), so it never sits on the line being read */
  .post-dial {
    position: fixed;
    z-index: 12;
    top: auto;
    right: var(--gutter);
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 3.4rem;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
  }
  .post-dial--live { opacity: 1; transform: none; }
  .post-dial-face {
    background: rgba(3, 4, 6, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .post-dial-scale { position: absolute; inset: auto 0 -1px; margin: 0; }
  .post-dial-track { background: none; }
  .post-dial-track::before, .post-dial-marks, .post-dial-readout { display: none; }
}

/* Phones: a title that fits in three lines, a tighter long-read rhythm
   ========================================================================== */
@media (max-width: 560px) {
  .post-head .section-head { margin-bottom: 2.75rem; }
  .post-title { font-size: clamp(2.1rem, 9vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; }
  .post-meta { gap: 1rem 2rem; margin-top: 1.75rem; }
  .post-figure { margin-top: 2.25rem; }
  .post-main { margin-top: 2.75rem; }

  .post-body > p,
  .post-body > ul { line-height: 1.62; }
  .post-body > * + * { margin-top: 1.05em; }
  .post-body > p:first-child { font-size: 1.24rem; line-height: 1.42; }
  .post-body > h2 { margin-top: 2.75rem; font-size: 1.5rem; line-height: 1.12; }
  .post-body > h2::before { margin-bottom: 1rem; }
  .post-body > h2 + * { margin-top: 1rem; }
  .post-body li { padding-left: 1.35rem; }
  .post-body li::before { top: 0.62em; }
  .post-body li + li { margin-top: 0.5rem; }
  .post-body > .post-cta { margin-top: 2rem; }
  /* long CTA labels wrap inside the pill instead of pushing past the column */
  .post-body .btn { height: auto; min-height: 3.25rem; padding-block: 0.8rem; white-space: normal; line-height: 1.25; }

  .post-faq-item { grid-template-columns: 2.25rem minmax(0, 1fr); padding: 1.35rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .post-dial { transition: none; }
}