/* ============ MEME PAGE — answer first (owner approved the sample 21 Oct 2026) ============
   Loaded after fonts.css, base.css, cinema.css and plate.css on every meme-<slug>.html.
   Uses the theme tokens from theme.css, so the night theme works without extra rules.
   Layout: question title + answer + example + jump links on the left, the meme on the right;
   on phones the meme drops below the answer. Then who made it, the reading column,
   similar words with photos, questions people ask, sources and the cite box. */

.mp{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px 1rem;
  --mp-read:"Space Grotesk",system-ui,sans-serif; --mp-head:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  --st-fresh:#286B25; --st-safe:#0B6680; --st-cooling:#7A5B12; --st-risky:#A3360A; --st-dead:#5C655F;
  font-family:var(--mp-read);color:var(--ink);font-size:17px;line-height:1.6}
/* paper behind the content so the background leaves only show at the edges */
html:not([data-theme="dark"]) .mp{background:linear-gradient(90deg,transparent 0,var(--paper) 28px,var(--paper) calc(100% - 28px),transparent 100%)}
html[data-theme="dark"] .mp{--st-fresh:#8DF250;--st-safe:#39E6FF;--st-cooling:#D8B36A;--st-risky:#FF5C1A;--st-dead:#8A93A6}
html .mp a{color:var(--green-ink)}

.mp-crumbs{font-size:.9rem;color:var(--ink-dim);padding:1.2rem 0 .3rem}
html .mp-crumbs a{color:var(--ink-dim);text-decoration:none}
html .mp-crumbs a:hover{color:var(--green-ink);text-decoration:underline}

/* link rules carry an html prefix: theme.css colours every link from html:not([data-theme]) a, which outranks a bare class */
/* ---------- hero ---------- */
.mp-hero{display:grid;gap:1.1rem 3rem;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"title plate" "answer plate" "scale plate" "use plate" "jump plate";align-items:start;padding-bottom:2.4rem}
.mp-title{grid-area:title}
.mp-title h1{font-family:var(--mp-head);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.06;letter-spacing:-.02em;margin:.2rem 0 0;color:var(--ink);text-shadow:none}
.mp-pron{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.6rem;color:var(--ink-dim);font-size:.98rem}
.mp-say{font:inherit;font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:var(--r-pill,99px);padding:.3rem .75rem;cursor:pointer;min-height:36px}
.mp-say:hover{border-color:var(--lime);color:var(--green-ink)}

.mp-answer{grid-area:answer;background:var(--card);border-radius:var(--r-card,22px);box-shadow:var(--shadow-card);padding:1.4rem 1.5rem 1.15rem;border-left:6px solid var(--lime)}
.mp-answer>p{margin:0 0 .9rem;font-size:1.14rem;line-height:1.55;color:var(--ink)}
.mp-facts{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;font-size:.92rem;color:var(--ink-dim);border-top:1px solid var(--line);padding-top:.85rem}
.mp-status{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;border-radius:var(--r-pill,99px);padding:.18rem .7rem;color:var(--stc);background:color-mix(in srgb,var(--stc) 13%,transparent)}
.mp-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
html .mp-facts a{font-weight:600}

/* how alive it is: five steps, the current one lit */
.mp-scale{grid-area:scale}
.mp-scale ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mp-scale li{font-size:.78rem;text-align:center;color:var(--ink-dim);padding-top:.5rem;border-top:6px solid var(--line);line-height:1.25}
.mp-scale li.on{border-top-color:var(--stc);color:var(--ink);font-weight:700}
.mp-scale p{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-dim)}

/* use it like this: a two-message chat */
.mp-use{grid-area:use;background:var(--green-soft);border-radius:var(--r-card,22px);padding:1rem 1.2rem 1.1rem}
.mp-use h2{font-family:var(--mp-read);font-size:.92rem;font-weight:700;color:var(--green-ink);margin:0 0 .6rem}
.mp-chat{display:flex;flex-direction:column;gap:.45rem}
.mp-msg{max-width:85%;padding:.55rem .85rem;border-radius:18px;font-size:1rem;line-height:1.4}
.mp-msg.them{align-self:flex-start;background:var(--card);color:var(--ink);border-bottom-left-radius:6px}
.mp-msg.me{align-self:flex-end;background:var(--lime);color:#fff;border-bottom-right-radius:6px}
html[data-theme="dark"] .mp-msg.me{color:#0A1208}
.mp-msg b{font-weight:700}
.mp-msg.them b{color:var(--green-ink)}

.mp-jump{grid-area:jump;display:flex;flex-wrap:wrap;gap:.5rem}
html .mp-jump a{text-decoration:none;font-size:.93rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill,99px);padding:.45rem .9rem;min-height:40px;display:inline-flex;align-items:center}
html .mp-jump a:hover{border-color:var(--lime);color:var(--green-ink)}

/* the meme */
.mp-plate{grid-area:plate;position:sticky;top:calc(var(--nav-h,64px) + 18px)}
.mp-plate .plate{margin:0;border-radius:var(--r-card,22px);box-shadow:var(--shadow-card)}
.mp-acts{display:flex;gap:.6rem;align-items:center;margin-top:.9rem}
.mp-remix{flex:1;display:inline-flex;justify-content:center;align-items:center;background:var(--lime);color:#fff !important;text-decoration:none;font-weight:700;border-radius:var(--r-pill,99px);min-height:50px;font-size:1.02rem;padding:0 1rem}
html[data-theme="dark"] .mp-remix{color:#0A1208 !important}
.mp-remix:hover{filter:brightness(.92)}
.mp-round{width:50px;height:50px;flex:0 0 50px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.mp-round:hover{border-color:var(--lime)}
.mp-round svg{width:20px;height:20px}
.mp-note{font-size:.88rem;color:var(--ink-dim);margin:.6rem 0 0}
.mp-alts{margin-top:.8rem;font-size:.9rem;color:var(--ink-dim)}
.mp-alts button{font:inherit;font-size:.86rem;min-width:40px;min-height:36px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill,99px);padding:.3rem .7rem;margin:.3rem .3rem 0 0;cursor:pointer;color:var(--ink-2)}
.mp-alts button[aria-pressed="true"]{background:var(--green-soft);border-color:var(--lime);color:var(--green-ink);font-weight:700}

@media (max-width:860px){
  .mp-hero{grid-template-columns:1fr;grid-template-areas:"title" "answer" "plate" "scale" "use" "jump";gap:1rem}
  .mp-plate{position:static}
  .mp-answer{padding:1.2rem 1.2rem 1rem}
  .mp-answer>p{font-size:1.08rem}
}

/* ---------- who made it ---------- */
.mp-credit{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 2.4rem}
.mp-credit>div{background:var(--card);border-radius:var(--r-card,22px);padding:1.2rem 1.3rem;box-shadow:var(--shadow-card)}
.mp-credit h2{font-family:var(--mp-head);font-size:1.05rem;margin:0 0 .35rem;color:var(--ink)}
.mp-credit p{margin:0;font-size:.98rem;color:var(--ink-2)}
@media (max-width:860px){.mp-credit{grid-template-columns:1fr}}

/* ---------- reading column ---------- */
.mp-read{max-width:720px}
.mp-read>section{padding:1.6rem 0;margin:0;border-top:1px solid var(--line)}
.mp-read h2{font-family:var(--mp-head);font-size:1.6rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 .7rem;color:var(--ink)}
.mp-read p{margin:0 0 .9rem;color:var(--ink-2)}
.mp-read p strong{color:var(--ink)}

/* visual guides (text only, from the meme's own data) */
.mp-guide{margin:1.1rem 0 .4rem}
.mp-guide figcaption{font-size:.85rem;color:var(--ink-dim);margin-top:.5rem}
.mp-glance{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mp-glance div{background:var(--card);border-radius:16px;padding:.8rem 1rem;box-shadow:var(--shadow-card)}
.mp-glance b{display:block;font-size:.85rem;color:var(--green-ink)}
.mp-glance span{display:block;color:var(--ink);line-height:1.4}
.mp-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.mp-ladder li{display:flex;gap:.7rem;align-items:center;background:var(--card);border-radius:14px;padding:.6rem .9rem;box-shadow:var(--shadow-card);color:var(--ink);line-height:1.4;
  margin-left:calc((var(--n) - 1) * 4%);border-left:5px solid color-mix(in srgb,var(--lime) calc(30% + var(--n) * 17%),var(--line))}
.mp-ladder i{font-style:normal;font-weight:700;color:var(--green-ink);min-width:1.2em}
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:stretch}
.mp-two div{background:var(--card);border-radius:16px;padding:.9rem 1rem;box-shadow:var(--shadow-card);color:var(--ink);line-height:1.4}
.mp-two div+div{background:var(--green-soft)}
.mp-two b{display:block;font-size:.8rem;color:var(--ink-dim);margin-bottom:.2rem;font-weight:600}
@media (max-width:520px){.mp-glance,.mp-two{grid-template-columns:1fr}.mp-ladder li{margin-left:0}}

.mp-timeline{list-style:none;margin:0;padding:0}
.mp-timeline li{position:relative;padding:0 0 1rem 1.7rem;color:var(--ink-2)}
.mp-timeline li::before{content:"";position:absolute;left:3px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px var(--green-soft)}
.mp-timeline li::after{content:"";position:absolute;left:8.5px;top:1.45em;bottom:-.1em;width:1px;background:var(--line)}
.mp-timeline li:last-child::after{display:none}
.mp-timeline strong{color:var(--ink)}

.mp-similar{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
html .mp-similar a{display:block;text-decoration:none;color:var(--ink);background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card)}
html .mp-similar a:hover b{color:var(--green-ink)}
.mp-similar img,.mp-similar .noimg{aspect-ratio:1;object-fit:cover;width:100%;height:auto;display:block;background:var(--green-soft)}
.mp-similar .noimg{display:grid;place-items:center;font-family:var(--mp-head);font-size:1.5rem;color:var(--green-ink)}
.mp-similar b{display:block;padding:.6rem .8rem 0;font-family:var(--mp-head);font-size:1.05rem}
.mp-similar span{display:block;padding:0 .8rem .75rem;font-size:.88rem;color:var(--ink-dim);line-height:1.35}
@media (max-width:520px){.mp-similar{grid-template-columns:1fr 1fr}}

.mp-faq details{background:var(--card);border-radius:16px;padding:.9rem 1.1rem;margin:0 0 .6rem;box-shadow:var(--shadow-card)}
.mp-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary::after{content:"+";color:var(--lime);font-size:1.3rem;line-height:1}
.mp-faq details[open] summary::after{content:"−"}
.mp-faq details p{margin:.6rem 0 0}

.mp-sources{margin:0;padding-left:1.3rem}
.mp-sources li{margin:0 0 .6rem;color:var(--ink-2)}
.mp-sources small{display:block;color:var(--ink-dim);font-size:.85rem}
.mp-checked{font-size:.92rem;color:var(--ink-dim)}
.mp-cite{background:var(--card);border:1px dashed var(--line);border-radius:16px;padding:1rem 1.1rem;margin-top:1rem;font-size:.95rem}
.mp-cite h3{font-size:1rem;margin:0 0 .35rem;color:var(--ink)}
.mp-cite p{margin:0 0 .7rem;color:var(--ink-2)}
.mp-cite button{font:inherit;font-weight:700;font-size:.9rem;background:var(--green-soft);color:var(--green-ink);border:0;border-radius:var(--r-pill,99px);padding:.45rem .9rem;cursor:pointer;min-height:36px}
.mp-cite details{margin-top:.8rem}
.mp-cite summary{cursor:pointer;color:var(--green-ink);font-weight:600}
.mp-cite code{display:block;white-space:pre-wrap;word-break:break-word;font-family:var(--mp-read);font-size:.88rem;background:var(--paper);border-radius:10px;padding:.6rem .7rem;margin:.5rem 0;color:var(--ink-2)}
.mp-more{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
html .mp-more a{text-decoration:none;font-weight:600;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill,99px);padding:.55rem 1rem;min-height:44px;display:inline-flex;align-items:center}
.mp :focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.mp-read>section{scroll-margin-top:calc(var(--nav-h,64px) + 12px)}
/* the question title is the answer people came for: show it at once, no word-by-word fade from motion.css */
.mp-title h1 .kw{animation:none !important;opacity:1 !important;filter:none !important;translate:none !important}
/* cinema.css pads every main by the nav height, but the nav is sticky and already takes its own space: drop the double gap */
body > #nav-root ~ main.mp{padding-top:0}

/* ---------- comparison pages (<a>-vs-<b>.html, compare.html) ---------- */
.cp-title{padding-bottom:1rem}
.cp-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.2rem 3rem;align-items:start;margin-bottom:2.2rem}
.cp-top .mp-lede{font-size:1.2rem}
.cp-top .mp-answer,.cp-intro{grid-area:auto}
.cp-pics{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center}
html .cp-pic{display:block;text-decoration:none;color:var(--ink);background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card)}
.cp-pic img,.cp-pic .noimg{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--green-soft)}
.cp-pic .noimg{display:grid;place-items:center;font-family:var(--mp-head);font-size:2rem;color:var(--green-ink)}
.cp-pic b{display:block;padding:.55rem .7rem;font-family:var(--mp-head);text-align:center}
.cp-vs{font-family:var(--mp-head);font-weight:800;font-size:1.1rem;color:var(--green-ink);background:var(--green-soft);border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
.cp-tablewrap{margin:0 0 2.4rem}
.cp-tablewrap h2{font-family:var(--mp-head);font-size:1.6rem;margin:0 0 .8rem;color:var(--ink)}
.cp-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--r-card,22px);box-shadow:var(--shadow-card);overflow:hidden;font-size:.98rem}
.cp-table th,.cp-table td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.45}
.cp-table tr:last-child th,.cp-table tr:last-child td{border-bottom:0}
.cp-table thead th{font-family:var(--mp-head);font-size:1.15rem;color:var(--ink);background:var(--green-soft)}
.cp-table tbody th{width:18%;font-weight:700;color:var(--ink);font-size:.92rem}
.cp-table td strong{color:var(--ink)}
.cp-none{color:var(--ink-dim);font-style:italic}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp-list{display:flex;flex-wrap:wrap;gap:.5rem}
html .cp-list a{text-decoration:none;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill,99px);padding:.5rem .9rem;min-height:40px;display:inline-flex;align-items:center}
html .cp-list a:hover{border-color:var(--lime);color:var(--green-ink)}
.cp-intro{max-width:760px;margin-bottom:1.6rem}
.cp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
html .cp-card{display:block;text-decoration:none;background:var(--card);border-radius:18px;box-shadow:var(--shadow-card);padding:1.1rem 1.2rem;color:var(--ink-2)}
.cp-card b{display:block;font-family:var(--mp-head);font-size:1.2rem;color:var(--ink);margin-bottom:.35rem}
.cp-card span{display:block;font-size:.95rem;line-height:1.45}
html .cp-card:hover b{color:var(--green-ink)}
.mp-vs{background:var(--green-soft);border-radius:16px;padding:.8rem 1rem;margin:0 0 1rem;color:var(--ink-2)}
html .mp-vs a{font-weight:700}
@media (max-width:860px){
  .cp-top{grid-template-columns:1fr}
  .cp-table thead{display:none}
  .cp-table,.cp-table tbody,.cp-table tr,.cp-table th,.cp-table td{display:block;width:auto}
  .cp-table tbody th{width:auto;background:var(--green-soft);border-bottom:0;padding-bottom:.4rem}
  .cp-table td{padding-top:.5rem}
  .cp-table td::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:700;color:var(--green-ink);margin-bottom:.15rem}
}

/* "More versions of this meme" row under the plate (meme-page.js swaps the picture) */
.mp-versions{margin-top:.9rem;font-size:.9rem;color:var(--ink-dim)}
.mp-versions p{margin:0 0 .35rem}
.mp-versions>div{display:flex;flex-wrap:wrap;gap:.45rem}
.mp-versions button{padding:0;border:2px solid transparent;border-radius:12px;background:var(--card);cursor:pointer;width:62px;height:62px;overflow:hidden;box-shadow:var(--shadow-card)}
.mp-versions button img{width:100%;height:100%;object-fit:cover;display:block}
.mp-versions button[aria-pressed="true"]{border-color:var(--lime)}
.mp-versions button:hover{border-color:var(--green-ink)}