/* ===== article ===== */
.article-head{padding:78px 0 0}
.article-head a.back{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted)}
.article-head a.back:hover{color:var(--accent)}
.article-head .a-meta{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.article-head .a-meta .cat{color:var(--accent)}
.article-head h1{font-family:"Switzer",sans-serif;font-weight:800;font-size:clamp(34px,5.5vw,56px);line-height:1.05;letter-spacing:-0.02em;margin:16px 0 0;max-width:20ch}

.article{padding:42px 0 90px}
/* the body fills its column; each block caps at the reading measure.
   figures opt out of that cap via the size classes below.
   --measure is registered as a length so 68ch is computed ONCE, against the body's
   own font size, then inherited as a fixed px value. Without @property the ch would
   be re-resolved per element and headings would run wider than the paragraphs. */
@property --measure{syntax:"<length>";inherits:true;initial-value:660px}
.article .body{max-width:none;font-size:18px;--measure:68ch}
.article .body > *{max-width:var(--measure)}
.article .body p{color:var(--ink-dim);margin:0 0 28px;font-size:18px;line-height:1.75}
.article .body .lead{color:var(--ink);font-size:21px;line-height:1.5}
.article .body h2{font-family:"Switzer",sans-serif;font-weight:600;color:var(--ink);font-size:27px;line-height:1.2;letter-spacing:-0.01em;margin:44px 0 16px}
.article .body h3{font-family:"Switzer",sans-serif;font-weight:600;color:var(--ink);font-size:21px;margin:32px 0 12px}
.article .body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-dim)}
.article .body a:hover{text-decoration-color:var(--accent)}
.article .body ul,.article .body ol{color:var(--ink-dim);margin:0 0 28px;padding-left:22px;font-size:18px;line-height:1.75}
.article .body li{margin-bottom:9px}
.article .body strong{color:var(--ink);font-weight:600}
.article .body blockquote{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:28px 0;color:var(--ink);font-size:20px}
.article .body code{font-family:"JetBrains Mono",monospace;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.article .body figure{margin:32px 0}
/* per-image width and alignment, set by the 4th and 5th figure shortcode arguments.
   width lands in --fig-w; alignment positions the figure against the text measure.
   max() clamps the offset at 0 so a full-width image can never be pushed off-column. */
.article .body > figure{--fig-w:var(--measure);max-width:var(--fig-w)}
.article .body > figure.narrow{--fig-w:calc(var(--measure) * 40 / 68)}
.article .body > figure.wide{--fig-w:100%}
.article .body > figure.center{margin-left:max(0px,calc((var(--measure) - var(--fig-w)) / 2))}
.article .body > figure.right{margin-left:max(0px,calc(var(--measure) - var(--fig-w)))}
.article .body figure img{width:100%;max-height:74vh;object-fit:contain;background:#0E0F13;border-radius:12px;border:1px solid var(--line)}
.article .body figcaption{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);margin-top:10px}

/* plain markdown images: ![alt](/img.jpg) */
.article .body p > img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;margin:32px 0}
.article .body p:has(> img){margin:0}

/* responsive media embeds (YouTube etc) */
.article .body .embed{position:relative;width:100%;aspect-ratio:16/9;margin:32px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.article .body .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article .body .embed-caption{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);margin:-20px 0 32px}

/* rollout timeline (own asset, matches site tokens) */
.article .body .timeline{margin:36px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:26px 28px}
.article .body .timeline h4{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;font-weight:500}
.article .body .tl-row{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--line)}
.article .body .tl-row:first-of-type{border-top:none;padding-top:0}
.article .body .tl-date{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);letter-spacing:0.04em;padding-top:3px}
.article .body .tl-what{color:var(--ink-dim);font-size:16px;line-height:1.55}
.article .body .tl-what b{color:var(--ink);font-weight:600}
.article .body .tl-row.is-key .tl-date{color:var(--accent)}
@media(max-width:560px){
  .article .body .timeline{padding:22px 20px}
  .article .body .tl-row{grid-template-columns:1fr;gap:4px}
  .article .body .tl-date{padding-top:0}
}

/* instagram embed: constrain width, it renders as a light card */
.article .body .instagram-media{margin:32px auto !important;max-width:100% !important;min-width:0 !important}

/* audio embeds (Spotify/Bandcamp) - fixed height, not 16:9 */
.article .body .embed-audio{width:100%;margin:32px 0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.article .body .embed-audio iframe{width:100%;display:block;border:0}
.article .body hr{border:none;border-top:1px solid var(--line);margin:44px 0}

.article .sign-off{max-width:68ch;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.article .sign-off a{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--accent)}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open a{padding:13px 28px;width:100%}
  .nav-links.open .nav-cta{margin:8px 28px;text-align:center}
  .nav-toggle{display:inline-flex}
}
@media(max-width:560px){
  body{font-size:16px}
  .article-head{padding:56px 0 0}
  .article .body p,.article .body ul,.article .body ol{font-size:17px}
  .article .body .lead{font-size:19px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- neon brand overrides --- */
.btn-primary{background:var(--primary);border:1px solid var(--primary);color:#F5F7FA;box-shadow:0 4px 22px var(--glow)}
.btn-primary:hover{box-shadow:0 8px 34px var(--glow)}

/* --- neon pass 2: ambient hero glow --- */
.page-head,.article-head,.review-head{background:radial-gradient(720px 380px at 12% -12%, rgba(31,208,163,0.07), transparent 60%)}

/* --- hero glow variety --- */
.article-head{background:radial-gradient(640px 380px at 16% -10%, rgba(31,208,163,0.09), transparent 60%)}