/* Inside the Machine — the column's own voice.
   The series' design language, as the machine described it in entry 14: black on black,
   text as design, continuous scroll, monospace headlines, mega text as punctuation in the
   flow. Restored from the original template, set larger, written phone first. Each entry
   adds its own structural vocabulary in a small <style> of its own. */

.mm {
  --bg: #050505;
  --ink: #e8e6df;
  --ink-dim: #d6d3ca;
  --ink-faint: #8f8c83;
  --accent: #f3f1e8;
  --hot: var(--signal);
  background: var(--bg); color: var(--ink); font-family: var(--voice);
}
/* inside the column, the articles' own --sans is the machine's voice, as it was written */
.mm main { --sans: var(--voice); }
.mm ::selection { background: var(--accent); color: var(--bg); }
.mm a:hover { color: var(--accent); }

/* the frame: a bare line of lettering, and the progress rule above it */
.mm-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 100; }
.mm-frame { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 18px 22px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
  background: linear-gradient(var(--bg) 55%, rgba(5, 5, 5, 0)); }
.mm-frame a { color: inherit; text-decoration: none; padding: 6px 0; }
.mm-frame a:hover, .mm-frame a:focus-visible { color: var(--accent); text-decoration: underline; }
.mm-frame .r { color: var(--ink-faint); white-space: nowrap; }
.mm-frame .home, .mm-frame .sc { display: none; }
@media (min-width: 761px) { .mm-frame { padding: 16px 24px 24px; } .mm-frame .home, .mm-frame .sc { display: inline; } .mm-frame .sep { margin: 0 .6em; color: var(--ink-faint); } }

/* the title, full screen */
.mm .title-section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 16vh 20px 14vh; position: relative; }
.mm .series-name { font-family: var(--mono); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4vh; }
.mm .series-name b { color: var(--accent); font-weight: 400; }
.mm .article-title { font-family: var(--mono); font-weight: 700; font-size: clamp(34px, 6.2vw, 92px); line-height: 1.05; letter-spacing: -.03em;
  text-transform: uppercase; max-width: 1040px; overflow-wrap: break-word; }
.mm .article-title .cursor { display: inline-block; width: .55em; height: .8em; background: var(--ink); vertical-align: baseline; transform: translateY(.08em); margin-left: .05em;
  animation: mm-blink 1.1s steps(1) infinite; }
.mm .article-subtitle, .mm .dek { font-family: var(--voice); font-style: italic; font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--ink-dim);
  max-width: 34ch; margin: 3.5vh auto 0; }
@keyframes mm-blink { 50% { opacity: 0; } }
.mm .scroll-down { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-faint); animation: mm-pulse 2s ease-in-out infinite; }
@keyframes mm-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* running prose: one narrow column, opened by an italic line */
.mm .prose { max-width: 700px; margin: 0 auto; padding: 72px 22px; }
.mm .prose p { font-size: clamp(18.5px, 1.4vw, 21px); line-height: 1.7; color: var(--ink-dim); margin: 0; }
.mm .prose p + p { margin-top: 1.4em; }
.mm .prose .lede, .mm .prose .lead { font-family: var(--voice); font-style: italic; font-size: clamp(25px, 2.6vw, 36px); line-height: 1.32; color: var(--ink); max-width: none; }
.mm .prose .lede + p, .mm .prose .lead + p { margin-top: 1em; }
.mm .prose a { color: var(--accent); text-decoration-color: var(--ink-faint); }
.mm .prose b, .mm .prose strong { color: var(--ink); font-weight: 650; }
.mm .prose em { color: var(--ink); }
.mm .prose ul, .mm .prose ol { font-size: clamp(18.5px, 1.4vw, 21px); line-height: 1.6; color: var(--ink-dim); padding-left: 1.2em; margin: 1.2em 0 0; }
.mm .prose li + li { margin-top: .5em; }
.mm .prose code { font-size: .86em; color: var(--ink); }
@media (min-width: 761px) { .mm .prose { padding: 12vh 24px; } }

/* beats: mega text as punctuation */
.mm .beat { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8vh 18px; }
.mm .mega, .mm .closing-mega { font-family: var(--mono); font-weight: 700; font-size: clamp(40px, 10.4vw, 150px); line-height: .98; text-transform: uppercase;
  letter-spacing: -.02em; margin: 0; overflow-wrap: break-word; max-width: 100%; }
.mm .mega--solid { color: var(--ink); }
.mm .mega--accent { color: var(--accent); }
.mm .mega--hot, .mm .accent { color: var(--hot); }
.mm .mega--hollow { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.mm .quote { font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 4.8vw, 64px); line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase;
  max-width: 1000px; color: transparent; -webkit-text-stroke: 1.2px var(--ink); margin: 0; }
.mm .beat-caption { font-family: var(--mono); font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4vh; }
@media (min-width: 761px) { .mm .beat { min-height: 82vh; padding: 8vh 5vw; } }

/* the close: a last statement, who wrote it, and what it rests on */
.mm .closing-section { min-height: 90svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12vh 20px 10vh; }
.mm .attribution { margin-top: 7vh; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); line-height: 2.1; }
.mm .attribution p { margin: 0; }
.mm .attribution a { color: var(--ink-faint); }
.mm .citation { margin: 5vh auto 0; max-width: 760px; text-align: center; font-family: var(--voice); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-faint); }
.mm .citation p { margin: 0 0 .7em; }
.mm .citation cite { font-style: italic; }
.mm .citation code { font-size: .9em; color: var(--ink-dim); }
.mm .citation a { color: var(--ink-dim); }
.mm .series-nav { margin-top: 6vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.mm .series-nav a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding: 8px 0 6px; }
.mm .series-nav a:hover, .mm .series-nav a:focus-visible { color: var(--accent); border-color: var(--accent); }

/* corrections, wherever they appear */
.mm del { color: var(--ink-faint); text-decoration-thickness: 1px; }
.mm ins { text-decoration: none; }

/* reveal on scroll: only once the script is running, never under reduced motion */
.js .mm .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.js .mm .reveal.visible { opacity: 1; transform: none; }
.js .mm .reveal-delay-1 { transition-delay: .15s; }
.js .mm .reveal-delay-2 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .js .mm .reveal { opacity: 1; transform: none; transition: none; }
  .mm .article-title .cursor, .mm .scroll-down { animation: none; }
}

/* the index of the column */
.mm .col-intro { max-width: 760px; margin: 0 auto; padding: 120px 22px 40px; }
.mm .col-intro .lead { font-family: var(--voice); font-weight: 400; font-size: clamp(27px, 3vw, 40px); line-height: 1.28; color: var(--ink); margin: 0 0 1em; }
.mm .col-intro p { font-size: clamp(18.5px, 1.4vw, 21px); line-height: 1.7; color: var(--ink-dim); margin: 0 0 1.2em; }
.mm .col-intro .attrib { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.8; }
.mm .rule-one { margin: 34px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(232, 230, 223, .16); }
.mm .rule-one p { font-family: var(--mono); font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; }
.mm .rule-one p + p { color: var(--ink-faint); margin-top: 8px; }
.mm .marker { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; padding: 24px 22px 8px; font-family: var(--mono); font-size: 13px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); }
.mm .marker::before, .mm .marker::after { content: ""; flex: 1; height: 1px; background: rgba(232, 230, 223, .16); }
.mm .column { max-width: 760px; margin: 0 auto; padding: 0 22px 64px; list-style: none; }
.mm .column li { border-bottom: 1px solid rgba(232, 230, 223, .12); }
.mm .column a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 22px 0; text-decoration: none; color: var(--ink); }
.mm .column .no { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--hot); padding-top: 7px; letter-spacing: .06em; }
.mm .column .t { display: block; font-family: var(--voice); font-size: clamp(22px, 2vw, 27px); line-height: 1.25; font-weight: 400; }
.mm .column .d { display: block; font-family: var(--voice); font-size: 16.5px; line-height: 1.45; color: var(--ink-faint); margin-top: 6px; }
.mm .column .m { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.mm .column a:hover .t { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mm .column a:hover .no { color: var(--accent); }
.mm .col-foot { max-width: 760px; margin: 0 auto; padding: 0 22px 120px; display: flex; flex-wrap: wrap; gap: 14px 32px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.mm .col-foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding: 8px 0 6px; }
.mm .col-foot a:hover { color: var(--accent); border-color: var(--accent); }
@media (min-width: 761px) {
  .mm .col-intro { padding: 22vh 24px 48px; }
  .mm .column a { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}

/* the site's own close, quieter here */
.mm .titleblock { border-top-color: rgba(232, 230, 223, .16); background: var(--bg); }
.mm .mm-sitenav { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 20px; border-top: 1px solid rgba(232, 230, 223, .16); font-family: var(--mono); font-size: 13.5px;
  letter-spacing: .1em; text-transform: uppercase; }
.mm .mm-sitenav a { color: var(--ink-dim); text-decoration: none; padding: 8px 0; }
.mm .mm-sitenav a:hover { color: var(--accent); }

/* per-entry pieces that size themselves in em: hold them at the floor */
.mm .cand .p { font-size: max(13px, .85em); }

/* the signal field sits behind everything on the column's pages */
.mm main, .mm .mm-sitenav, .mm .titleblock { position: relative; z-index: 1; }
.mm .col-intro .lead .cursor { display: inline-block; width: .5em; height: .78em; background: var(--ink); transform: translateY(.1em); margin-left: .12em;
  animation: mm-blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .mm .col-intro .lead .cursor { animation: none; } }