/* Batch 5: Ordinary page (tracker ORD-02 to ORD-10). Loaded last on ordinary.html only.
   The page keeps its own choreography; these rules only fix what the review found. */

/* ---------- ORD-02: the opening words fit on every phone ---------- */
@media (max-width: 750px) {
  body.ordinary-page .w-threshold { padding: 0 6vw; }
  body.ordinary-page .w-quote .l1, body.ordinary-page .w-quote .l2 { font-size: clamp(38px, 12.2vw, 66px); }
  body.ordinary-page .w-quote .l2 { padding-left: 7vw; }
  body.ordinary-page .w-quote .l3, body.ordinary-page .w-quote .l4 { margin-left: 7vw; white-space: normal; max-width: 80vw; }
}

/* ---------- ORD-03: the sitters' strip sits below the header, readable ---------- */
body.ordinary-page .w-pin { top: var(--header-height, 76px); height: calc(100svh - var(--header-height, 76px)); }
body.ordinary-page .w-head { margin-top: 8px; }
body.ordinary-page .w-index { gap: 6px 24px; }
body.ordinary-page .w-index button { font: 16px/1.4 Williwaw, Georgia, serif; opacity: .62; padding: 6px 0; }
body.ordinary-page .w-index button.met { opacity: .8; }
body.ordinary-page .w-index button[aria-current="true"] { opacity: 1; }
html[data-theme="light"] body.ordinary-page .w-index button { color: #000; }
html[data-theme="dark"] body.ordinary-page .w-index button { color: #fff; }
body.ordinary-page .w-series { --w-h: min(56svh, 680px); }

/* ---------- ORD-04: every name, line and "Read the letter" on the same level ---------- */
body.ordinary-page .w-work figcaption { gap: 8px; }
body.ordinary-page .w-line { height: 4.6em; min-height: 0; overflow: hidden; }
body.ordinary-page .w-cue { font-size: 14px; }

/* ---------- ORD-05: one way out of the wall. Desktop uses the page index (ORD-10); phones keep the link, top right ---------- */
body.ordinary-page .w-skip { top: 18px; bottom: auto; right: 6vw; font-size: 13px; }
@media (min-width: 1000px) { body.ordinary-page .w-skip { display: none; } }

/* ---------- ORD-06: the letter at a reading size and measure; "Look closer" a real control ---------- */
body.ordinary-page .reading-art { top: calc(var(--header-height, 76px) + 28px); }
body.ordinary-page .reading-art img { max-height: calc(100svh - var(--header-height, 76px) - 120px); }
html[data-theme] body.ordinary-page .reading article { max-width: 34em; }
html[data-theme] body.ordinary-page main .reading article .letter, html[data-theme] body.ordinary-page main .reading article .letter p { font-size: clamp(18px, 1.45vw, 23px) !important; line-height: 1.62 !important; }
body.ordinary-page .reading-art button > span { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 10px 18px; border: 1px solid currentColor; border-radius: 999px; font: 15px/1 Arial, Helvetica, sans-serif; width: auto; }
body.ordinary-page .reading-art button > span::before { content: ''; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 4px 4px 0 -2.5px currentColor; }
body.ordinary-page .reading-art button { text-align: center; }
body.ordinary-page .reading-art button:hover > span, body.ordinary-page .reading-art button:focus-visible > span { box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- ORD-08: behind the scenes in a calm grid ---------- */
body.ordinary-page .documentary { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(10px, 1.2vw, 18px); row-gap: clamp(10px, 1.2vw, 18px); grid-auto-rows: auto; align-items: stretch; }
body.ordinary-page .documentary .bts-head { grid-column: 1 / -1; grid-row: auto; align-self: end; margin: 0 0 clamp(12px, 2vw, 28px); }
body.ordinary-page .documentary .bts { margin: 0; align-self: stretch; overflow: hidden; grid-row: auto; height: clamp(220px, 28vw, 440px); }
body.ordinary-page .documentary .bts img { width: 100%; height: 100%; object-fit: cover; }
body.ordinary-page .documentary .b1 { grid-column: 1 / span 6; }
body.ordinary-page .documentary .b2 { grid-column: 7 / span 3; }
body.ordinary-page .documentary .b3 { grid-column: 10 / span 3; }
body.ordinary-page .documentary .b4 { grid-column: 1 / span 3; }
body.ordinary-page .documentary .b5 { grid-column: 4 / span 3; }
body.ordinary-page .documentary .quote { grid-column: 7 / span 6; grid-row: auto; align-self: center; margin: 0; padding: 0 clamp(8px, 3vw, 48px); }
body.ordinary-page .documentary .b6 { grid-column: 1 / span 4; }
body.ordinary-page .documentary .b7 { grid-column: 5 / span 4; }
body.ordinary-page .documentary .b8 { grid-column: 9 / span 4; }
body.ordinary-page .documentary :is(.b6, .b7, .b8) { height: clamp(260px, 34vw, 540px); }
html[data-theme] body.ordinary-page main .documentary .quote, html[data-theme] body.ordinary-page main .documentary .quote p { font-size: clamp(26px, 2.6vw, 42px) !important; line-height: 1.18 !important; }
body.ordinary-page .documentary .quote p + p { margin-top: .7em; }
@media (max-width: 750px) {
  body.ordinary-page .documentary { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.ordinary-page .documentary .bts, body.ordinary-page .documentary :is(.b6, .b7, .b8) { height: 58vw; }
  body.ordinary-page .documentary .b1, body.ordinary-page .documentary .b8 { height: 66vw; }
  body.ordinary-page .documentary .bts-head, body.ordinary-page .documentary .quote, body.ordinary-page .documentary .b1 { grid-column: 1 / -1 !important; }
  body.ordinary-page .documentary .bts { grid-column: auto !important; }
  body.ordinary-page .documentary .b1 { grid-column: 1 / -1 !important; }
  body.ordinary-page .documentary .quote { grid-row: auto; padding: 24px 0; }
  body.ordinary-page .documentary .b8 { grid-column: 1 / -1 !important; }
}

/* ---------- ORD-10: where you are on a long page ---------- */
.ord-rail { position: fixed; right: 18px; top: 50%; z-index: 25; transform: translateY(-50%); display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; mix-blend-mode: difference; color: #fff; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ord-rail.on { opacity: 1; pointer-events: auto; }
.ord-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 2px 0; background: none; border: 0; color: inherit; cursor: pointer; font: 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ord-rail button span { opacity: 0; transform: translateX(6px); transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.ord-rail button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s ease, transform .4s ease; }
.ord-rail button[aria-current="true"]::after { background: currentColor; transform: scale(1.35); }
.ord-rail:hover button span, .ord-rail button:focus-visible span { opacity: 1; transform: none; }
.ord-bar { position: fixed; left: 0; top: var(--header-height, 66px); z-index: 25; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: #fff; mix-blend-mode: difference; pointer-events: none; }
@media (max-width: 999px) { .ord-rail { display: none; } }
@media (min-width: 1000px) { .ord-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .ord-rail, .ord-rail button span, .ord-rail button::after { transition: none; } }
@media (min-width: 751px) {
  body.ordinary-page .documentary .bts-head { grid-row: 1; }
  body.ordinary-page .documentary :is(.b1, .b2, .b3) { grid-row: 2; }
  body.ordinary-page .documentary :is(.b4, .b5, .quote) { grid-row: 3; }
  body.ordinary-page .documentary :is(.b6, .b7, .b8) { grid-row: 4; }
}
.ord-rail li { display: flex; justify-content: flex-end; }