/* metime.ink content pages (glossary, tropes, the interactive and AI-writer landings), generated by
   scripts/build_site.py from site/pages/. Loaded after landing.css: same tokens, fonts, gate, header and footer.
   A reading column, plus the example pieces (request, story card, notepad, branches) in the landing's style. */
.pg-page .top { position: sticky; }
.pg { padding-top: 28px; }
.pg-art > * { max-width: 780px; }

.pg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; font: 600 12px/1.4 var(--disp); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pg-crumbs a { color: var(--muted); text-decoration: none; }
.pg-crumbs a:hover { color: var(--paper-hi); }
.pg-h1 { margin: 0 0 24px; font: 500 clamp(42px, 9vw, 80px)/.95 var(--disp); font-stretch: 64%; letter-spacing: .005em; text-transform: uppercase; color: var(--paper-hi); text-wrap: balance; }

.pg-body { max-width: 780px; }
.pg-body > * + * { margin-top: 16px; }
.pg-lede { font: 400 clamp(20px, 2.5vw, 25px)/1.5 var(--read); color: #EDE3D3; text-wrap: pretty; }
.pg-lede dfn { font-style: normal; color: var(--paper-hi); }
.pg-body h2 { margin-top: 64px; font: 500 clamp(30px, 5.4vw, 44px)/1 var(--disp); font-stretch: 66%; letter-spacing: .005em; text-transform: uppercase; color: var(--paper-hi); scroll-margin-top: 90px; text-wrap: balance; }
.pg-body h2 + * { margin-top: 18px; }
.pg-body h3 { margin-top: 30px; font: 600 19px/1.3 var(--disp); color: var(--paper-hi); }
.pg-body h3 + * { margin-top: 8px; }
.pg-body p, .pg-body li, .pg-body td, .pg-body th { font: 400 18px/1.65 var(--read); color: #DDD2C0; }
.pg-body a { color: var(--amber2); text-underline-offset: 3px; }
.pg-body strong { font-weight: 600; color: var(--paper); }
.pg-list { padding-left: 1.2em; list-style: disc; }
ol.pg-list { list-style: decimal; }
.pg-list li + li { margin-top: 8px; }
.pg-list li::marker { color: var(--amber); }

/* a definition or key line, set off like the landing's request card */
.pg-key { padding: 18px 20px 20px; border-left: 2px solid var(--amber); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(233, 163, 91, .08), rgba(233, 163, 91, 0)); }
.pg-key .label { margin-bottom: 8px; color: var(--muted); }
.pg-key p { font-size: 19px; color: var(--paper-hi); }

/* short quoted lines (phrases) */
.pg-quotes { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-quotes li { padding: 8px 13px; border: 1px solid var(--line2); border-radius: 999px; font: italic 400 17px/1.3 var(--read); color: var(--paper-hi); }
.pg-quotes li + li { margin-top: 0; }

/* a comparison table that scrolls sideways on a phone instead of squashing */
.pg-scroll { overflow-x: auto; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); padding: 0 var(--g); }
.pg-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.pg-table th, .pg-table td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; }
.pg-table th { font: 600 12px/1.3 var(--disp); font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--amber2); }
.pg-table tbody th { font: 600 15px/1.4 var(--disp); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--paper-hi); }

/* the trope list */
.pg-tropes { display: grid; gap: 0; }
.trope { padding: 24px 0 22px; border-top: 1px solid var(--line); }
.trope h3 { margin: 0; font: 500 27px/1 var(--disp); font-stretch: 68%; text-transform: uppercase; letter-spacing: .01em; color: var(--paper-hi); }
.trope h3 small { margin-left: 8px; font: 500 14px/1 var(--disp); font-stretch: 85%; letter-spacing: .04em; text-transform: none; color: var(--dim); }
.trope p { margin-top: 10px; }
.trope .arrow { margin-top: 4px; min-height: 40px; font-size: 12.5px; }

/* the example flow: request -> story card -> choices */
.pg-flow { display: grid; gap: 18px; counter-reset: f; }
.pg-step { position: relative; padding-left: 46px; }
.pg-step::before { counter-increment: f; content: counter(f); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-amber); font: 700 14px/1 var(--disp); color: var(--amber2); }
.pg-step > .label { margin-bottom: 10px; }
.pg-flow .ask { margin-top: 0; }
.pg-card { max-width: 520px; padding: 22px 20px; border-radius: 18px; background: var(--ink2); border: 1px solid var(--line); }
.pg-card h3 { margin: 0; font: 500 30px/1 var(--disp); font-stretch: 66%; text-transform: uppercase; color: var(--paper-hi); }
.pg-card .tags { margin: 10px 0 12px; }
.pg-card p { font-size: 16.5px; line-height: 1.55; }
.pg-flow .notepad { transform: rotate(-.4deg); }
.pg-body .notepad p { color: inherit; }
.pg-body .notepad .np-title { font: italic 500 25px/1.2 var(--read); color: #2A1E14; }
.pg-body .notepad .np-sub, .pg-body .notepad .np-line { font-family: var(--disp); font-size: 14px; color: #6A5642; }
.pg-body .notepad .np-line { font: italic 400 17px/1.3 var(--read); color: #7E6A55; }

/* a scene from an example story */
.pg-scene { padding: 22px 0 6px; border-top: 1px solid var(--line); }
.pg-scene p { font: 400 clamp(18px, 2vw, 20px)/1.68 var(--read); color: #ECE2D2; }
.pg-scene p + p { margin-top: .8em; }

/* branches: one open at a time (details name=...), no script needed; the text is in the page either way */
.branches { display: grid; gap: 8px; }
.branch summary { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; list-style: none; cursor: pointer; background: #FBF6EE; border: 1px solid rgba(42, 30, 20, .12); border-radius: 2px; font: italic 400 17px/1.3 var(--read); color: #2A1E14; transition: transform .2s; }
.branch summary::-webkit-details-marker { display: none; }
.branch summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px dotted rgba(42, 30, 20, .25); }
.branch summary:hover { transform: translateX(3px); }
.branch summary .no { flex: 0 0 auto; font: 800 13px/1 var(--disp); font-stretch: 62%; letter-spacing: .06em; font-style: normal; color: var(--red); }
.branch[open] summary { background: #2A1E14; color: #F4ECDF; transform: rotate(-.6deg); }
.branch[open] summary .no { color: var(--amber2); }
.branch-text { padding: 14px 14px 6px; }
.pg-body .branch-text p { font: 400 16.5px/1.6 var(--read); color: #2A1E14; }
.pg-body .branch-text p + p { margin-top: .7em; }
.branch-text .fine { color: #7E6A55; }

/* set-ups that open to show how a story starts */
.setups { display: grid; gap: 14px; }
.setup { border-radius: 18px; background: var(--ink2); border: 1px solid var(--line); }
.setup summary { display: block; padding: 20px 20px 18px; list-style: none; cursor: pointer; }
.setup summary::-webkit-details-marker { display: none; }
.setup summary h3 { margin: 0; font: 500 28px/1 var(--disp); font-stretch: 66%; text-transform: uppercase; color: var(--paper-hi); }
.setup summary .tags { margin: 10px 0 10px; }
.setup-p { display: block; font: 400 17px/1.55 var(--read); color: #DDD2C0; }
.setup summary .arrow { margin-top: 6px; min-height: 32px; font-size: 12px; }
.setup summary .arrow::after { content: "↓"; }
.setup[open] summary .arrow::after { content: "↑"; }
.setup-open { padding: 0 20px 22px; border-top: 1px solid var(--line); }
.setup-open .pg-scene { border-top: 0; }
.setup-open .label { margin: 18px 0 8px; }

/* the closing call to action and the "read next" list */
.pg-about { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.pg-cta { margin-top: 72px; padding: 64px 0 56px; border-top: 1px solid var(--line); background: radial-gradient(60% 80% at 20% 0%, rgba(233, 163, 91, .09), rgba(233, 163, 91, 0) 70%); }
.pg-cta .h2 { max-width: 13em; }
.pg-cta .big { margin-top: 20px; }
.pg-cta .fine { max-width: 40em; }
.pg-rel { padding-top: 8px; padding-bottom: 72px; }
.pg-rel ul, .pg-reads ul { display: grid; gap: 10px; }
.pg-rel a, .pg-reads a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .2s, background-color .2s; }
.pg-rel a:hover, .pg-reads a:hover { border-color: var(--line-amber); background: rgba(233, 163, 91, .05); }
.rel-t { font: 600 17px/1.3 var(--disp); color: var(--paper-hi); }
.rel-d { font-size: 14.5px; color: var(--muted); }

@media (min-width: 700px) {
  .pg-rel ul { grid-template-columns: 1fr 1fr; }
  .pg-cta .hero-acts { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .pg { padding-top: 44px; }
  .pg-rel ul { grid-template-columns: repeat(3, 1fr); }
}
.pg-step > * + * { margin-top: 14px; }
.pg-body p.label { font: 600 12px/1.3 var(--disp); font-stretch: 75%; letter-spacing: .24em; text-transform: uppercase; color: var(--amber2); }
.pg-body .branch-text p.fine { font: 400 13.5px/1.5 var(--disp); color: #7E6A55; }

/* the header's Stories link gives way first on a phone */
@media (max-width: 419px) { .top-stories { display: none; } }
/* a hub's story cards */
.pg-body .si-grid { margin-top: 22px; list-style: none; }
.pg-body .si-grid li { margin: 0; }

/* a glossary entry's "Read it in a story" list (scripts/build_site.py, stories_on_term) */
.pg-reads { max-width: 780px; margin-top: 56px; }
.pg-reads h2 { font: 500 clamp(30px, 5.4vw, 44px)/1 var(--disp); font-stretch: 66%; letter-spacing: .005em; text-transform: uppercase; color: var(--paper-hi); }
.pg-reads p { margin: 14px 0 18px; font: 400 18px/1.65 var(--read); color: #DDD2C0; }
.pg-reads ul { list-style: none; }

/* a comparison page's "facts as of" line, under the H1 */
.pg-asof { max-width: 780px; margin: -6px 0 26px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 10px; font: 500 14px/1.5 var(--disp); color: var(--muted); }
.pg-body .pg-sources li { font-size: 15px; line-height: 1.5; }
.pg-body .pg-sources a { word-break: break-word; }

/* the press page's picture and logo grid */
.pg-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; }
.pg-shots li + li { margin-top: 0; }
.pg-shots figure { display: grid; gap: 8px; }
.pg-shots img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--ink2); }
.pg-body .pg-shots figcaption { font: 400 14px/1.45 var(--disp); color: var(--muted); }
@media (min-width: 700px) { .pg-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* "How metime compares": links to the published comparison pages (front matter `compare:`) */
.pg-compare { max-width: 780px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 18px/1.65 var(--read); color: #DDD2C0; }
.pg-compare a { color: var(--amber2); text-underline-offset: 3px; }

/* the "free tool" line on hubs, /stories/, the kink list and the trope index (scripts/build_site.py, tool_line) */
.pg-tool { max-width: 780px; margin-top: 40px; padding: 14px 16px; border: 1px solid var(--line-amber); border-radius: 12px; font: 400 18px/1.6 var(--read); color: #DDD2C0; }
.pg-tool a { color: var(--amber2); text-underline-offset: 3px; }