/* Hero: the headline, the start form, and a Post as Quick Insight reads it. */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(48px, 8vw, 104px) clamp(64px, 9vw, 112px); }
.hero h1 { font-size: clamp(42px, 6vw, 78px); line-height: 1.02; letter-spacing: -0.02em; }
.hero .lede { margin-top: 24px; font-size: 18px; color: var(--ink-muted); max-width: 34em; }

.hero-visual { position: relative; }
/* a slow glow in the two Side colours behind the card */
.hero-visual::before {
  content: ""; position: absolute; inset: 8% -6% -4% 10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 35%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%),
    radial-gradient(35% 45% at 75% 70%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 70%);
  filter: blur(40px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-4%, 3%) scale(1.05); } }

.platform-switch { margin-bottom: 14px; }

.post {
  position: relative; margin: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / .8);
}
/* a light that follows the pointer across the card's surface */
.post::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--violet) 9%, transparent), transparent 60%);
}
.post:hover::before { opacity: 1; }
.post-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.post-head strong { font-weight: 600; }
.post-head span { color: var(--ink-subtle); }
.post-head .when { margin-left: auto; }
.post-body { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 28px; padding: 24px 20px 20px; }

.caption { font: 400 clamp(20px, 2vw, 24px)/1.55 var(--serif); transition: color .25s; }
.caption mark { background-color: transparent; color: inherit; transition: opacity .25s, color .25s; }
.caption .tags { color: var(--ink-subtle); }
.m-kw, .m-cta { background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; padding-bottom: 1px; }
.m-kw { background-image: linear-gradient(var(--violet), var(--violet)); }
.m-cta { background-image: repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 8px); }
.caption .m-km { background-color: var(--mint-soft); box-shadow: inset 0 -2px 0 var(--mint); border-radius: 2px; padding: 0 2px; }
.m-mn { color: var(--violet-ink); }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; font-size: 13px; line-height: 1.45; }
.notes li { padding: 8px 10px; margin-inline: -10px; border-radius: var(--r); cursor: default; transition: background-color .2s, opacity .25s; }
.notes b { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 2px; }
.notes span { color: var(--ink-muted); }
.key { width: 18px; height: 10px; flex: none; border-radius: 2px; }
.key-kw { background: linear-gradient(var(--violet), var(--violet)) 0 100% / 100% 2px no-repeat; }
.key-km { background: var(--mint-soft); box-shadow: inset 0 -2px 0 var(--mint); }
.key-cta { background: repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 8px) 0 100% / 100% 2px no-repeat; }
.key-mn { background: linear-gradient(var(--violet-ink), var(--violet-ink)) 50% 50% / 100% 2px no-repeat; opacity: .6; }

/* pointing at a note (or a mark) isolates that kind of reading */
.post[data-focus] .caption { color: var(--ink-subtle); }
.post[data-focus] mark { opacity: .3; }
.post[data-focus] li { opacity: .45; } /* kept low-specificity so the match rule below wins */
.post[data-focus="kw"] [data-kind="kw"],
.post[data-focus="km"] [data-kind="km"],
.post[data-focus="cta"] [data-kind="cta"],
.post[data-focus="mn"] [data-kind="mn"] { opacity: 1; color: var(--ink); }
.post[data-focus] .notes li[data-kind]:is(:hover, :focus-visible) { background: var(--raised); }

.figs { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 20px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.figs strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.window { background: var(--sunken); border-top: 1px solid var(--hairline); padding: 16px 20px 18px; }
.window p { font-size: 13px; color: var(--ink-subtle); }
.window dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.window dt { font-size: 13px; color: var(--ink-subtle); }
.window dd { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }

/* the reading draws itself in, every time a Post is shown */
.post-body, .figs, .window { animation: fade .4s ease-out both; }
.m-kw, .m-cta { animation: underline .55s var(--ease) both; }
.caption .m-km { animation: highlight .6s ease-out both; }
.m-mn { animation: ink .5s ease-out both; }
.notes li { animation: note .4s ease-out both; }
[data-kind="km"] { animation-delay: .35s; }
[data-kind="kw"] { animation-delay: .75s; }
[data-kind="cta"] { animation-delay: 1.15s; }
[data-kind="mn"] { animation-delay: 1.45s; }
@keyframes fade { from { opacity: 0; } }
@keyframes underline { from { background-size: 0 2px; } }
@keyframes highlight { from { background-color: transparent; box-shadow: inset 0 0 0 var(--mint); } }
@keyframes ink { from { color: var(--ink); } }
@keyframes note { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .post-body { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr 1fr; }
  .window dl { grid-template-columns: 1fr; }
}