/* About and Methodology test pages (stage 3, 9 Oct 2026). Page-only styles on top of shared/ratc.css.
   Long reads in her own words: a large opening, sections on alternating grounds at reading width, the rooms
   of the site as cards on About, her character section beside her art, and on Methodology her eight-step
   pipeline drawn as a loop (the last step feeds the first: "the work compounds"). Motion: a mustard run goes
   once around the loop when it comes into view; Still shows it finished. */

/* ---------- Openings ------------------------------------------------------ */
.ab-open { padding-block: clamp(3.5rem, 7vw, 6rem); }
.ab-open__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 64px); align-items: center; }
.ab-open__text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.ab-kicker, .ab-title { margin: 0; }
.ab-kicker a { color: var(--label); text-decoration-color: var(--accent); text-underline-offset: .25em; }
.ab-lead { margin: 0; max-width: 34ch; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.35 var(--font-body); color: var(--display); text-wrap: pretty; }
.ab-p { margin: 0; max-width: 60ch; }
.ab-open__art { aspect-ratio: 3 / 2; --lamp-x: 12%; --lamp-y: 27%; }   /* 3:2, the whole picture (her review, 10 Oct: "make this image 3:2 also") */
.ab-open__art > img { height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Sections -------------------------------------------------------- */
.ab-prose { display: grid; gap: 1rem; }
.ab-prose h2 { margin: 0 0 .25rem; }
.ab-prose p { margin: 0; }
.ab-prose a, .ab-room a { color: var(--cream); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ab-list { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }

/* What's on the site: her paragraph for each room, as cards */
.ab-rooms h2 { margin: 0 0 1.5rem; }
.ab-rooms__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.ab-room { padding: 18px 20px 20px; border: 2px solid var(--bone); background: var(--night-plum); }
.ab-room p { margin: 0; }
.ab-room p a:first-child { font: 400 var(--fs-h3)/1.1 var(--font-display); text-transform: uppercase; color: var(--display); text-decoration: none; }
.ab-room p a:first-child:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.ab-char__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 64px); align-items: center; }
.ab-char__art { margin: 0; --lamp-x: 30%; --lamp-y: 30%; }

/* ---------- The eight-step loop --------------------------------------------- */
.me-pipe__intro { margin-bottom: 2rem; }
.loop { position: relative; max-width: 980px; margin: 0 auto 2rem; }
.loop__ring { position: absolute; left: 50%; top: 50%; width: min(56%, 440px); aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.loop__track { fill: none; stroke: var(--dusk-violet); stroke-width: 2; }
.loop__run { fill: none; stroke: var(--mustard); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 200px 200px; }
.loop__arrow { fill: none; stroke: var(--mustard); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.loop__list { list-style: none; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 46%; }
/* stations sit around the ring: 1 to 4 down the right, 5 to 8 up the left, so the order reads clockwise from the top */
.loop__st:nth-child(1) { grid-column: 2; grid-row: 1; } .loop__st:nth-child(2) { grid-column: 2; grid-row: 2; }
.loop__st:nth-child(3) { grid-column: 2; grid-row: 3; } .loop__st:nth-child(4) { grid-column: 2; grid-row: 4; }
.loop__st:nth-child(5) { grid-column: 1; grid-row: 4; } .loop__st:nth-child(6) { grid-column: 1; grid-row: 3; }
.loop__st:nth-child(7) { grid-column: 1; grid-row: 2; } .loop__st:nth-child(8) { grid-column: 1; grid-row: 1; }
.loop__st { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 2px solid var(--bone); background: var(--ink-plum); }
.loop__n { font: 400 2.25rem/1 var(--font-display); color: var(--mustard); }
.loop__t { font-size: 1rem; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
  :root.ratc-ready:not([data-motion="still"]) .loop:not(.is-in) .loop__run { stroke-dashoffset: 1; }
  :root.ratc-ready:not([data-motion="still"]) .loop__run { transition: stroke-dashoffset 2400ms ease-in-out; }
}

@media (max-width: 899px) {
  .ab-open__grid, .ab-char__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-open__art { margin-inline: calc(-1 * var(--gutter) + 6px); }
  /* on a phone the loop becomes a column that ends with an arrow back to the top */
  .loop__ring { display: none; }
  .loop__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .loop__st:nth-child(n) { grid-column: 1; grid-row: auto; }
  .loop__list::after { content: "\2191  Back to 1"; font: 600 .875rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mustard); }
}