/* An article (main.post.v2): a cinematic cover with the title on it, then three aligned columns: a compact guide
   index, the text, and Monty on the side (what he does with this guide, and one button). Pictures inside the text
   come from :::scene, :::lead and :::followers (build.mjs). */

.post.v2 { --wide: 1360px; padding-top: 58px; }

/* MARK: Hero: the cover fills the stage; the title sits in its calm dark side */
.ph { position: relative; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 0; }
.ph-art { position: relative; margin: 0; border-radius: 34px; overflow: hidden; aspect-ratio: 16 / 7.2; min-height: 520px; isolation: isolate;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.07); }
.ph-art img, .ph-art svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; animation: phIn 1.6s var(--ease-out) both; }
@keyframes phIn { from { transform: scale(1.06); opacity: .4; } }
.ph-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,7,11,.96) 0%, rgba(6,7,11,.86) 30%, rgba(6,7,11,.35) 56%, transparent 72%), linear-gradient(0deg, rgba(6,7,11,.75), transparent 40%); }
.ph-in { position: absolute; left: calc(var(--gutter) + clamp(28px, 4vw, 64px)); bottom: clamp(28px, 4vw, 60px); width: min(640px, 52%); display: grid; gap: 18px; z-index: 2; }
.ph .crumbs { letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 500; }
.ph h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.ph .lede { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.5; color: rgba(245,245,247,.78); max-width: 34em; }
.ph .byline { margin-top: 2px; }

/* MARK: Three columns, one set of edges: the index, the text, Monty */
.pg { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 64px); max-width: var(--wide); margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter) 0; box-sizing: content-box; align-items: start; }
.pg > .prose { max-width: 760px; width: 100%; justify-self: center; font-size: 19.5px; }
.post.v2 .prose h2 { font-size: clamp(30px, 2.8vw, 38px); margin-top: 2.2em; }

/* The index: numbered, one line each, the one you're reading lit */
.post.v2 .toc { grid-column: 1; max-width: none; justify-self: stretch; }
.post.v2 .toc-in { top: 96px; gap: 12px; }
.post.v2 .toc-k { letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 600; color: var(--secondary); }
.post.v2 .toc ol { box-shadow: none; gap: 0; }
.post.v2 .toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 7px 10px; margin: 0; border: 0; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--tertiary); transition: color .2s, background .2s; }
.post.v2 .toc a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.post.v2 .toc a.on { color: var(--text); background: rgba(var(--c),.1); }
.toc-n { font: 500 12px var(--mono); color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.post.v2 .toc a.on .toc-n { color: rgb(var(--c)); opacity: 1; }
.toc-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post.v2 .toc-top { padding-left: 10px; white-space: nowrap; }

/* Monty on the side */
.rail { grid-column: 3; align-self: stretch; }
.rail-in { position: sticky; top: 96px; }
.rail-card { display: grid; gap: 14px; padding: 22px; border-radius: 26px; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 100% 0%, rgba(var(--c),.16), transparent 60%), #0e1018; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 70px -30px rgba(0,0,0,.9); }
.rail-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(140deg, rgba(var(--c),.6), transparent 40%, transparent 70%, rgba(179,188,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rail-k { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--secondary); }
.rail-k img { width: 30px; height: 30px; border-radius: 50%; background: #151824; box-shadow: 0 0 0 1px rgba(var(--c),.45); }
.rail-t { font-size: 21px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.rail-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--secondary); }
.rail-btn { justify-content: center; width: 100%; }
.rail-fine { text-align: center; font-size: 12.5px; color: var(--tertiary); margin-top: -4px; }
.rail-vis { border-radius: 18px; padding: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: grid; gap: 8px; }
.rv-av { width: 32px; height: 32px; border-radius: 50%; flex: none; background: #2a2f44 center / cover; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.rv-av.big { width: 46px; height: 46px; }
.rv-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; font-size: 13.5px; }
.rv-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row:not(.lit) { opacity: .5; }
.rv-row.lit { background: rgba(134,227,187,.08); box-shadow: inset 0 0 0 1px rgba(134,227,187,.25); }
.rv-chips { display: flex; gap: 6px; }
.rv-chips span { font-size: 12px; padding: 5px 9px; border-radius: 999px; color: var(--secondary); background: rgba(255,255,255,.06); }
.rv-chips span.on { background: var(--text); color: var(--ink); font-weight: 600; }
.rv-bub { font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: 16px 16px 4px 16px; color: #fff; background: linear-gradient(135deg, #8c7bff, #5b4fd8); }
.rv-note, .rv-found { font-size: 12.5px; color: var(--tertiary); display: inline-flex; align-items: center; gap: 7px; }
.rv-found i { width: 7px; height: 7px; border-radius: 50%; background: #ffb36b; box-shadow: 0 0 8px #ffb36b; }
.rv-post { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255,179,107,.07); box-shadow: inset 0 0 0 1px rgba(255,179,107,.4); }
.rv-post b { font-size: 13.5px; }
.rv-post p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.rv-score { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; }
.rv-score b { font-size: 15px; display: block; margin-bottom: 6px; }
.rv-score p { margin: 6px 0 0; font-size: 13px; color: var(--secondary); line-height: 1.4; }

/* MARK: Pictures in the text */
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--tertiary); text-align: center; }
.fx-scene img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.06); }
/* Wider than the text on big screens, so a picture breathes */
@media (min-width: 1240px) { .fx-scene { margin-left: -60px; margin-right: -60px; } }

.fx-av { width: 44px; height: 44px; border-radius: 50%; flex: none; background: #2a2f44 center / cover; display: grid; place-items: center; font: 600 16px var(--sys); color: #fff; }
.fx-meter { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.fx-meter i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14); }
.fx-meter i.g { background: #86e3bb; box-shadow: 0 0 6px rgba(134,227,187,.7); }
.fx-meter i.y { background: #e8d36b; } .fx-meter i.o { background: #ffb36b; }
.fx-meter b { margin-left: 7px; font: 600 14px var(--sys); color: var(--text); font-variant-numeric: tabular-nums; }
.fx-card, .fx-list { border-radius: 24px; padding: 20px; background: #0e1018; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 40px 80px -40px rgba(0,0,0,.9); font-size: 15.5px; line-height: 1.5; color: var(--text); }
.fx-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.fx-head b { font-size: 17px; font-weight: 600; display: block; }
.fx-head small { font-size: 13.5px; color: var(--tertiary); }
.fx-src { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #ffb36b; }
.fx-src i { width: 7px; height: 7px; border-radius: 50%; background: #ffb36b; box-shadow: 0 0 8px #ffb36b; }
.fx-why { margin: 14px 0 0; display: grid; gap: 10px; }
.fx-why div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.fx-why dt { font-size: 13.5px; font-weight: 600; color: var(--tertiary); padding-top: 1px; }
.fx-why dd { margin: 0; color: #d6d6db; }
.fx-op { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #f4f4f2; color: #121214; }
.fx-op span { font-size: 12.5px; font-weight: 600; color: #6b6b70; }
.fx-op p { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
.fx-list { padding: 8px; }
.fx-list-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px 12px; font-size: 14px; color: var(--tertiary); }
.fx-list-top b { color: var(--text); font-size: 15.5px; }
.fx-list-top em { font-style: normal; color: #86e3bb; font-weight: 600; }
.fx-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; }
.fx-row + .fx-row { box-shadow: 0 -1px 0 rgba(255,255,255,.05); }
.fx-row b { font-size: 15px; font-weight: 600; } .fx-row small { margin-left: 6px; font-size: 13px; color: var(--tertiary); }
.fx-row p { margin: 2px 0 0; font-size: 14px; color: var(--secondary); line-height: 1.4; }
.fx-row:not(.lit) { opacity: .5; }
.fx-row.lit { background: rgba(134,227,187,.06); box-shadow: inset 0 0 0 1px rgba(134,227,187,.22); }
.fx-pass { font-size: 13px; color: var(--tertiary); white-space: nowrap; }

/* MARK: Smaller screens: the rail moves under the text; the index folds away */
@media (max-width: 1180px) {
  .pg { grid-template-columns: 200px minmax(0, 1fr); }
  .rail { grid-column: 2; }
  .rail-in { position: static; max-width: 520px; margin: 20px auto 0; }
}
@media (max-width: 900px) {
  .ph-art { aspect-ratio: auto; min-height: 0; height: 300px; border-radius: 24px; }
  .ph-art::after { background: linear-gradient(0deg, rgba(6,7,11,.9), transparent 60%); }
  .ph-in { position: static; width: auto; padding: 24px 4px 0; }
  .pg { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .post.v2 .toc { display: none; }
  .rail { grid-column: 1; }
  .pg > .prose { font-size: 18px; }
}
/* The index and the rail run the full height of the text, so they stay in view as you read. */
.post.v2 .toc { align-self: stretch; }