/* Post 2, "the night shift": a dark-first cinematic layout. A full-bleed night hero behind a centred headline, a clock
   that runs from 10:30:00 to 10:30:03 PM as you scroll, a horizontal wait-vs-answer timeline, a Q&A card stack and an
   animated handover flow. Navy and indigo with neon purple and green, mono and sans type. No hue 20 to 65. */
.p-night {
  --sky: #0B0D2A; --sky-2: #16154A; --panel: #13153A; --panel-2: #1C1E4D; --edge: rgba(156, 140, 255, .22);
  --text: #F4F3FA; --text-2: #C9C6F2; --dim: #8E8BBE; --neon: #A495FF; --neon-g: #3CCB8F;
  --glow-p: 0 0 24px rgba(164, 149, 255, .45); --glow-g: 0 0 24px rgba(60, 203, 143, .45);
  background: var(--sky); color: var(--text);
}
:root[data-theme="light"] .p-night {
  --sky: #F1F0FB; --sky-2: #E4E2F8; --panel: #FFFFFF; --panel-2: #EEECFB; --edge: rgba(90, 71, 255, .18);
  --text: #0E0F2C; --text-2: #3D3B66; --dim: #626089; --neon: #5A47FF; --neon-g: #11815A;
  --glow-p: 0 0 18px rgba(90, 71, 255, .22); --glow-g: 0 0 18px rgba(17, 129, 90, .22);
}
.p-night .bhdr { background: color-mix(in srgb, var(--sky) 80%, transparent); border-color: var(--edge); color: var(--text); }
.p-night .bhdr__nav { color: var(--text-2); }
.p-night .act { color: var(--text-2); border-color: var(--edge); }
.p-night .end { color: var(--text); }
.p-night .cta, .p-night .textpanel { background: var(--panel); border: 1px solid var(--edge); }
.p-night .cta a, .p-night .notes .back, .p-night .prose sup a { color: var(--neon); }
.p-night .sharerow { border-color: var(--edge); }
.p-night .notes, .p-night .sharerow h2, .p-night .textpanel h2, .p-night .notes h2 { color: var(--dim); }
.p-night .textpanel p { color: var(--text-2); }
.p-night .foot { border-color: var(--edge); color: var(--dim); }

/* full-bleed hero: always night, in both themes */
.n-hero { position: relative; display: grid; place-items: center; min-height: min(92vh, 860px); padding: 96px 16px 120px; overflow: hidden; background: #0B0D2A; color: #F4F3FA; text-align: center; isolation: isolate; }
.n-hero__sky { position: absolute; inset: 0; z-index: -1; }
.n-hero__sky svg { width: 100%; height: 100%; display: block; }
.n-hero__in { max-width: 980px; }
.n-eyebrow { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 26px; font: 500 .8rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3CCB8F; }
.n-eyebrow span + span { color: #C9C6F2; }
.n-hero h1 { margin: 0; font: 700 clamp(2.4rem, 6.4vw, 5.4rem)/.98 var(--font); letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 0 40px rgba(11, 13, 42, .8); }
.n-hero h1 .n-hl { background: linear-gradient(90deg, #E2DCFF, #6EE7B0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.n-dek { max-width: 40em; margin: 24px auto 0; font-size: 1.18rem; line-height: 1.55; color: #C9C6F2; }
.n-clock { display: inline-flex; align-items: center; gap: 10px; margin: 34px 0 0; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(164, 149, 255, .35); background: rgba(19, 21, 58, .7); font: 500 1.05rem/1 var(--mono); color: #F4F3FA; box-shadow: 0 0 30px rgba(164, 149, 255, .25); }
.n-clock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3CCB8F; box-shadow: 0 0 12px #3CCB8F; animation: n-pulse 1.6s ease-in-out infinite; }
.n-hero .share { justify-content: center; margin-top: 26px; }
.n-hero .act { color: #C9C6F2; border-color: rgba(164, 149, 255, .3); }
@keyframes n-pulse { 50% { opacity: .35; } }

/* the clock that follows the reader */
.n-dock { position: fixed; z-index: 30; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .85rem/1 var(--mono); color: var(--text); box-shadow: var(--glow-p); }
.n-dock b { color: var(--neon-g); font-weight: 500; }
body[data-sec="3"] .n-dock { box-shadow: var(--glow-g); }

/* reading column */
.n-col { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.n-col p { margin: 0 0 1.3em; color: var(--text-2); }
.n-col strong { color: var(--text); }
.n-sec { padding-top: 80px; }
.n-label { display: block; margin: 0 0 12px; font: 500 .8rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--neon-g); }
.n-sec h2 { margin: 0 0 .6em; font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.08 var(--font); letter-spacing: -.035em; color: var(--text); }
.n-sec ul { margin: 0 0 1.4em; padding-left: 1.2em; color: var(--text-2); }
.n-sec li { margin: .45em 0; }
.n-pull { margin: 2.2em 0; padding-left: 20px; border-left: 2px solid var(--neon); font: 500 clamp(1.4rem, 3vw, 1.9rem)/1.3 var(--mono); letter-spacing: -.02em; color: var(--text); }
.n-pull p { margin: 0; color: inherit; }
.p-night .chips li { background: var(--panel-2); color: var(--text); border: 1px solid var(--edge); }

/* horizontal timeline: waiting until 10 AM vs answered in 3 seconds */
.n-tl { max-width: 1100px; margin: 56px auto 0; padding: 0 16px; }
.n-tl__scroll { padding-bottom: 8px; }
.n-tl__in { min-width: 0; padding: 28px clamp(16px, 3vw, 28px); border-radius: 26px; background: var(--panel); border: 1px solid var(--edge); }
.n-track { position: relative; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; padding: 18px 0; }
.n-track + .n-track { border-top: 1px dashed var(--edge); }
.n-track__name { font: 600 .92rem/1.3 var(--font); color: var(--text); }
.n-track__name small { display: block; margin-top: 4px; font: 500 .76rem/1.3 var(--mono); color: var(--dim); }
.n-rail { position: relative; height: 70px; }
.n-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--edge); }
.n-fill { position: absolute; left: 0; top: 33px; height: 4px; border-radius: 2px; width: calc(var(--n-progress, 0) * 100%); transition: width .2s; }
.n-track--slow .n-fill { background: linear-gradient(90deg, var(--dim), #6F6AA8); }
.n-track--fast .n-fill { background: var(--neon-g); box-shadow: var(--glow-g); width: calc(min(1, var(--n-progress, 0) * 4) * 100%); }
.n-stop { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font: 500 .74rem/1.25 var(--mono); color: var(--text-2); white-space: nowrap; text-align: center; }
.n-stop::after { content: ""; order: -1; width: 12px; height: 12px; margin-top: 28px; border-radius: 50%; background: var(--panel); border: 2px solid var(--dim); }
.n-stop { flex-direction: column; }
.n-stop span { order: 1; }
.n-track--fast .n-stop::after { border-color: var(--neon-g); background: var(--neon-g); box-shadow: var(--glow-g); }
.n-stop--lost::after { border-color: #FF5C8A; background: #FF5C8A; }
.n-stop--lost span { color: #FF8FB0; }
:root[data-theme="light"] .n-stop--lost span { color: #C01F55; }
.n-tl__cap { margin: 14px 0 0; font: 500 .8rem/1.5 var(--mono); color: var(--dim); }

/* Q&A card stack */
.n-qa { max-width: 1100px; margin: 56px auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.n-card { position: relative; padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--edge); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.n-card:nth-child(1) { transform: rotate(-2deg) translateY(10px); }
.n-card:nth-child(2) { transform: rotate(1.5deg); }
.n-card:nth-child(3) { transform: rotate(-1deg) translateY(14px); }
.n-card:nth-child(4) { transform: rotate(2deg) translateY(4px); }
.n-card:hover { transform: none; box-shadow: var(--glow-p); }
.n-card__k { display: inline-block; margin-bottom: 14px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); font: 500 .72rem/1.4 var(--mono); color: var(--neon); letter-spacing: .04em; text-transform: uppercase; }
.n-q, .n-a { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.4; }
.n-q { margin-left: 18px; background: #3A3A80; color: #FFFFFF; border-radius: 14px 14px 4px 14px; }
.n-a { margin-right: 10px; background: #1F6E51; color: #FFFFFF; border-radius: 14px 14px 14px 4px; }
.n-card small { font: 500 .72rem/1 var(--mono); color: var(--neon-g); }

/* handover flow */
.n-flow { max-width: 1100px; margin: 56px auto 0; padding: 0 16px; }
.n-flow svg { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--panel); border: 1px solid var(--edge); }
.n-flow .f-box { fill: var(--panel-2); stroke: var(--edge); }
.n-flow .f-t { fill: var(--text); font: 600 16px var(--font); }
.n-flow .f-s { fill: var(--dim); font: 500 13px var(--mono); }
.n-flow .f-line { fill: none; stroke: var(--edge); stroke-width: 2; }
.n-flow .f-run { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 14; animation: n-run 1.4s linear infinite; }
.n-flow .f-run--g { stroke: var(--neon-g); }
.n-flow .f-run--p { stroke: var(--neon); }
.n-flow .f-dot-g { fill: var(--neon-g); } .n-flow .f-dot-p { fill: var(--neon); }
.n-flow figcaption { margin: 12px 0 0; font: 500 .8rem/1.5 var(--mono); color: var(--dim); text-align: center; }
@keyframes n-run { to { stroke-dashoffset: -40; } }

@media (max-width: 900px) {
  .n-qa { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .n-hero { min-height: 0; padding: 72px 16px 88px; }
  .n-qa { grid-template-columns: 1fr; }
  .n-card:nth-child(n) { transform: none; }
  .n-dock { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .n-flow .f-run { animation: none; stroke-dasharray: none; }
  .n-clock::before { animation: none; }
}
.p-night .join__in { border-color: var(--edge); background: radial-gradient(120% 140% at 0% 0%, rgba(156,140,255,.14), transparent 60%), var(--panel); }
.p-night .join__form { border-color: var(--edge); background: var(--bg, transparent); }

/* the timeline fits every width: no sideways scrolling */
.n-rail { margin-inline: 44px; }
@media (max-width: 900px) { .n-track { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 640px) {
  .n-rail { height: auto; margin-inline: 0; display: grid; gap: 14px; padding-left: 26px; }
  .n-rail::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .n-fill { display: none; }
  .n-stop { position: relative; left: auto !important; top: auto; transform: none; justify-items: start; text-align: left; white-space: normal; }
  .n-stop::after { position: absolute; left: -25px; top: 3px; margin-top: 0; }
  .n-stop span { display: block; }
}