` falling back to the UA's `display: block`: not the dark band it looks like below, but raw unstyled text and default buttons at the end of the desktop page. Reachable exactly one way — load at ≤1024px, then grow: an iPad rotated to landscape, a window dragged wider, the devtools responsive toggle. A cold desktop load never built the pager in the first place. */ .oroch-pager { display: none; } /* The chapter-change announcement. Clipped rather than display:none or visibility:hidden — both of those remove it from the accessibility tree, which is the one thing it exists to be in. Outside the media query because it is appended to and must never paint at any width. */ .oroch-live { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 1024px) { /* ── the switch ────────────────────────────────────────────────────────────── Written long-hand rather than with :not([data-oroch="…"]) so that a section the script never tagged (anything added later) stays visible by default. Failing open is the correct failure for a navigation feature. */ html[data-oroch-on="1"][data-oroch="1"] .main > [data-oroch]:not([data-oroch~="1"]), html[data-oroch-on="1"][data-oroch="2"] .main > [data-oroch]:not([data-oroch~="2"]), html[data-oroch-on="1"][data-oroch="3"] .main > [data-oroch]:not([data-oroch~="3"]), html[data-oroch-on="1"][data-oroch="4"] .main > [data-oroch]:not([data-oroch~="4"]), html[data-oroch-on="1"][data-oroch="5"] .main > [data-oroch]:not([data-oroch~="5"]) { display: none !important; } /* the footer is the end of the record, so it belongs to the last chapter */ html[data-oroch-on="1"]:not([data-oroch="5"]) .footer { display: none !important; } /* ───────────────────────────────────────────────────────────────────────────── PAGER — the bottom of every chapter One element, parked at the end of .main. Because only one chapter is on screen at a time it always lands directly under whatever the reader just finished, without a copy per chapter. ───────────────────────────────────────────────────────────────────────────── */ .oroch-pager { display: none; background: var(--orom-ink, #080808); padding: clamp(30px, 7vw, 56px) max(20px, var(--orom-safe-l, 0px)) clamp(34px, 8vw, 60px) max(20px, var(--orom-safe-r, 0px)); position: relative; z-index: 2; font-family: 'Plus Jakarta Sans', sans-serif; border-top: 1px solid var(--orom-line, rgb(245 242 236 / .10)); } html[data-oroch-on="1"] .oroch-pager { display: block; } .oroch-pager__in { max-width: 640px; margin: 0 auto; } /* ── where you are ───────────────────────────────────────────────────────── */ .oroch-pager__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--orom-dim, #A39D92); margin-bottom: 14px; } .oroch-pager__meta b { font-weight: 500; color: var(--orom-gold, #C9A46A); font-variant-numeric: tabular-nums; } /* ── the index: five taps, always reachable ───────────────────────────────── */ .oroch-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 22px; } .oroch-dot { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .06em; /* .34 measured 2.82:1 against the ink — 11px numerals below the 4.5:1 floor. .58 is 6.27:1 and still reads as the quiet, unvisited state. */ color: rgb(245 242 236 / .58); border-radius: 8px; transition: color .28s ease; } .oroch-dot::before { /* the rule is the affordance */ content: ""; position: absolute; left: 3px; right: 3px; top: 12px; height: 2px; border-radius: 2px; /* This rule IS the affordance — it is what says "five chapters, you are on the first". At .13 it was 1.33:1, invisible to anyone the contrast rule exists for. .40 is 3.49:1, clearing the 3:1 floor for non-text UI. */ background: rgb(245 242 236 / .40); transition: background-color .34s var(--orom-ease, cubic-bezier(.19,1,.22,1)); } .oroch-dot:active { color: var(--orom-paper, #F5F2EC); } .oroch-dot[aria-current="true"] { color: var(--orom-gold-hi, #EAD795); } .oroch-dot[aria-current="true"]::before { background: linear-gradient(90deg, var(--orom-gold, #C9A46A), var(--orom-gold-spec, #FFF2A9)); } .oroch-dot[data-read="1"]::before { background: rgb(201 164 106 / .40); } .oroch-dot:focus-visible { outline: 1px solid var(--orom-gold, #C9A46A); outline-offset: 2px; } /* ── prev / next ───────────────────────────────────────────────────────────── Cards, not arrows. A reader deciding whether to go on wants the name of what is next, and a 44px arrow does not tell them. */ .oroch-nav { display: grid; gap: 10px; } @media (min-width: 560px) { .oroch-nav { grid-template-columns: 1fr 1fr; } } .oroch-btn { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--orom-line, rgb(245 242 236 / .10)); background: linear-gradient(180deg, rgb(245 242 236 / .055), rgb(245 242 236 / .012)); box-shadow: inset 0 1px 0 rgb(245 242 236 / .10); text-decoration: none; color: var(--orom-paper, #F5F2EC); cursor: pointer; font: inherit; text-align: left; transition: border-color .24s ease, background-color .24s ease, transform .2s var(--orom-ease, cubic-bezier(.19,1,.22,1)); } .oroch-btn:active { transform: scale(.99); border-color: var(--orom-line-hi, rgb(245 242 236 / .20)); } .oroch-btn:focus-visible { outline: 1px solid var(--orom-gold, #C9A46A); outline-offset: 2px; } .oroch-btn[hidden] { display: none; } .oroch-btn__ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--orom-line, rgb(245 242 236 / .10)); color: var(--orom-gold, #C9A46A); } .oroch-btn__tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .oroch-btn__k { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--orom-dim, #A39D92); } .oroch-btn__t { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oroch-btn--prev { order: 1; } .oroch-btn--next { order: 2; } .oroch-btn--next .oroch-btn__tx { align-items: flex-end; text-align: right; } .oroch-btn--next { flex-direction: row-reverse; } /* the last chapter has no next — its CTA is the page's own */ .oroch-btn--next[data-end="1"] .oroch-btn__ico { color: var(--orom-ink, #080808); background: linear-gradient(180deg, var(--orom-gold-hi, #EAD795), var(--orom-gold, #C9A46A)); border-color: transparent; } /* ── back to the top of this chapter ─────────────────────────────────────── */ .oroch-up { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 2px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--orom-dim, #A39D92); } .oroch-up:active { color: var(--orom-paper, #F5F2EC); } .oroch-up:focus-visible { outline: 1px solid var(--orom-gold, #C9A46A); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────────── DRAWER — the group labels become the chapter index oro-mobile already groups its rows by exactly these five headings, so the menu does not need rebuilding. It needs the headings to become tappable and to say which chapter they open. ───────────────────────────────────────────────────────────────────────────── */ html[data-oroch-on="1"] .orom-group__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .oroch-chip { font-size: 9px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums; /* bronze is 3.94:1 on ink and this is 9px text — it failed AA outright. gold-500 is 8.58:1. The chip carries the chapter number, which is meaning, so the accent is earned here under Law 1. */ color: var(--orom-gold, #C9A46A); border: 1px solid var(--orom-line, rgb(245 242 236 / .10)); border-radius: 999px; /* The chip sets the heading's height, not the 9.5px text beside it. Padding is kept tight so four headings do not cost a row of the list below. */ padding: 2px 7px; white-space: nowrap; transition: color .28s ease, border-color .28s ease; } .orom-group[data-oroch-here="1"] .oroch-chip { color: var(--orom-gold-hi, #EAD795); border-color: rgb(201 164 106 / .40); } /* ── chapter change: the new chapter arrives, it does not cut ─────────────── */ html[data-oroch-anim="1"] .main > [data-oroch], html[data-oroch-anim="1"] .oroch-pager { animation: oroch-in .5s var(--orom-ease, cubic-bezier(.19,1,.22,1)) both; } @keyframes oroch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-oroch-anim="1"] .main > [data-oroch], html[data-oroch-anim="1"] .oroch-pager { animation: none; } .oroch-btn, .oroch-dot::before { transition-duration: .01ms !important; } } @media (forced-colors: active) { .oroch-btn { border: 1px solid CanvasText; } .oroch-dot[aria-current="true"]::before { background: Highlight; } } } /* end @media (max-width: 1024px) */