/* ============================================================ GILDED RUIN — RELIC SHEET SINGLE SOURCE OF TRUTH for the viewer's geometry. Consumed by BOTH the shop front collection pages AND admin/shop-add.php's live preview, so the two cannot drift. ARCHITECTURE — read this before editing. Every panel is TWO LAYERS: the art sits ON TOP as an overlay (pointer-events:none), the content sits UNDERNEATH, trimmed, so the art's rails cover its edges. This is why nothing needs to fit an exact opening and why no art is ever stretched: each box takes its own asset's native aspect ratio, fixed, and the art fills it 1:1. There is NO baked composite sheet any more. The old layoutsite-*.png single-image sheet is gone. Each slot carries its own asset, named for what it is. LAYOUT Desktop — photograph pinned left, the reading column (card, price block, Relic Info, Lore) beside it. The VIEWER scrolls, never the page. Mobile — the same elements stacked, sticky dropped. The asset URLs are NOT declared here on purpose: they resolve against different folders on the front end (images/...) and in the admin (../images/...). Each side declares the --art-* and --parchment vars itself, and only those. ============================================================ */ /* ===== overlay: fixed, and the PAGE never scrolls ===== */ /* ONE block for .rl — layout and palette together. Gold is the default and is declared here on plain .rl with no attribute required, so if the admin's JavaScript ever fails to set data-metal the viewer still lays itself out instead of collapsing. Silver overrides via [data-metal="silver"], which outranks it on specificity. */ .rl{position:fixed;inset:0;z-index:120;display:none; overflow:hidden;background:#050403; --rl-ink:#e3c67c; --rl-dim:#8a7a4e; --rl-line:rgba(227,198,124,.4); --bar:#6b5427; /* THE READING COLUMN'S WIDTH CAP. 4 Sep 2026, raised 560 -> 820. Orpheo, on the relic card: "the lore window is tiny" and "half the fields do not populate". The second one was NOT missing data — it was data that could not be seen. Every panel here is a fixed-ratio box sized by its own art, so the taller the writing, the more of it sits below the fold, and the bar that would say so is deliberately invisible (see .rl-sheet). With a full relic loaded and the cap at 560 the Relic Info panel showed 304px of 439px — "What it is" and "Kind" visible, Materials and Size not. Measured at 1440x900 with the photograph pinned at 501px: the sheet's second grid track can reach 820px and no further, so 820 is the fill, not a guess. Nothing is stretched — every panel keeps its own art's ratio and simply gets bigger: panel was now text hidden below the fold Relic Info 560x385 820x563 135px -> 0 Lore 560x301 820x441 186px -> 25px card 560x378 820x554 — Under 820px of available width the cap stops binding and the column behaves exactly as before, so nothing changes on a laptop or a phone. The admin preview is unaffected: .sa-viewer sets max-width:none on these panels and is sized by its own 470px side panel. */ /* 4 Sep 2026, back to 560 from 820. 820 was chosen to stop the panels hiding text by brute force, and it worked, but it made the PAPERWORK bigger than the RELIC: the lore panel measured 820 wide against a 501 photograph, 1.64x, and the photograph is the thing being sold. Orpheo: "Why is the lore so huge in comparison to the fucking photo viewer?" Nothing is hidden at 560 any more because the lore now grows and then turns pages (see relic-zoom.js), so the width no longer has to carry that job on its own. 560 against a 501 photograph reads as a pair. */ --col-max:560px; /* frame inner openings, measured off GARMENTS-RELICINFO.png and GARMENTS-LORE.png alpha. The paper fills these exactly. */ --ip-x:12.5%; --ip-y:10.5%; --ip-w:77.765%; --ip-h:79%; --lp-x:10%; --lp-y:14%; --lp-w:80%; --lp-h:76%; --viewer-ar:1361/1928; --card-ar:924/624; --pay-ar:896/531; --info-ar:904/621; --lore-ar:2550/3300} .rl.open{display:flex;flex-direction:column} /* ===== pinned header ===== */ .rl-top{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center; padding:14px 26px;background:rgba(0,0,0,.92)} .rl-count{font-size:13px;letter-spacing:.24em;color:var(--rl-dim)} .rl-x{background:none;border:1px solid var(--rl-line);color:var(--rl-ink);font-family:inherit; font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:9px 18px;cursor:pointer} .rl-x:hover{border-color:var(--rl-ink)} .rl-name{flex:0 0 auto;text-align:center;padding:0 20px 10px;font-size:15px;letter-spacing:.18em; text-transform:uppercase;color:var(--rl-ink);min-height:1.4em} /* ===== the sheet: photograph pinned, reading column scrolls ===== THIS is the scroll container. .rl above it is overflow:hidden so the document behind can never scroll. */ .rl-sheet{flex:1 1 auto;min-height:0; overflow-x:hidden;overflow-y:auto; /* minmax(0,auto) on the first track, not bare auto: the pinned photograph must be allowed to shrink below its intrinsic width inside a narrow container such as the admin's preview panel. */ /* HIS LAYOUT SHEET, 5 Sep 2026, measured off the overlay he sent: photograph 870 wide against a 550 reading column on a 1546 sheet. That is 1.58 : 1, and the tracks carry it so the photograph is sized by its SHARE OF THE SHEET rather than by whatever the viewport height left over -- which is what had it coming out at 501 and reading as the small element beside its own reading column. */ display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr); grid-auto-rows:min-content; gap:2.2vh 2.4vw;align-content:start; padding:0 clamp(14px,3vw,42px) clamp(18px,4vh,48px); /* INVISIBLE SCROLLBAR. 1 Sep 2026. Orpheo asked for this twice -- on the niches and again on the relic sheet: "Invisible scroll bar." The column still scrolls; the bar simply is not drawn, which is the same treatment .oss-shop already uses in ossuary.html. Both properties are needed: scrollbar-width for Firefox, the ::-webkit- pseudo for Chrome/Safari. */ scrollbar-width:none;-ms-overflow-style:none} .rl-sheet::-webkit-scrollbar{width:0;height:0;display:none} /* ===== PHOTOGRAPH — art over, photo under ===== Box takes the frame asset's native ratio so the frame is never stretched. The photograph fills with cover and its edges run UNDER the frame's rails, which is what the frame is drawn to do. */ /* .rl-stage is the pinned box. It exists because draw() rewrites .rl-shot's innerHTML on every photograph change, so the arrow buttons cannot live inside it and need a positioned parent. */ /* max-width:100% matters as much as the min(): the viewport units size this correctly on the shop front, but the admin renders the same viewer inside a ~470px panel, where 46vw is wider than the panel and the frame was being cut off on the right. The cap lets the grid column shrink it instead. */ .rl-stage{grid-column:1;grid-row:1 / span 3;position:sticky;top:0; align-self:start;justify-self:center; /* HIS REFERENCE LAYOUT, 5 Sep 2026: the photograph is the biggest thing on the sheet -- roughly 870 wide against a 550 reading column. It was capped at 501 by a 190px height allowance, which made it read as the small one. 56vw and a 132px allowance give it every pixel the viewport can spare while it still sits on screen as a sticky element. */ width:100%; max-width:100%; aspect-ratio:var(--viewer-ar)} /* the frame art sits on the STAGE at full bleed, so it covers the photograph's edges from every side */ .rl-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:var(--art-viewer) center/100% 100% no-repeat} /* the photograph is inset to the frame's opening, measured off the art's own alpha, then pushed out ~2% on each edge so it tucks UNDER the rails. It is NOT inset:0 — the frame carries a transparent outer margin, and a full-bleed photo would show through it. */ .rl-shot{position:absolute;left:7%;top:12.5%;width:82%;height:79.5%; overflow:hidden;background:#0a0805;cursor:zoom-in} .rl-shot img{width:100%;height:100%;object-fit:cover;image-orientation:from-image;display:block} .rl-shot .shot{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover; background-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--fz,1));transform-origin:var(--fx,50%) var(--fy,50%)} /* photograph navigation: the arrows strip is Orpheo's art, shown whole and undistorted; the two hit areas sit over its halves. */ .rl-dots{grid-column:1;grid-row:4;justify-self:center; display:flex;gap:.5em;justify-content:center;padding-top:.4em} .rl-dot{width:7px;height:7px;padding:0;background:transparent; border:1px solid var(--rl-line);cursor:pointer} .rl-dot.on{background:var(--rl-ink);border-color:var(--rl-ink)} .rl-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:4; background:none;border:0;padding:0;width:14%;height:18%;cursor:pointer;opacity:0} .rl-prev{left:1%} .rl-next{right:1%} .rl[data-single] .rl-ar,.rl[data-single] .rl-dots{display:none} /* ===== RECORD OF RECOVERY — solid card, text on the printed rules ===== container-type makes every field percentage CARD-relative, so the card can be any size and the typing stays on its rules. */ .rl-card{grid-column:2;grid-row:1;position:relative;z-index:2; width:100%;max-width:var(--col-max);margin-inline:auto;aspect-ratio:var(--card-ar); background:var(--art-card) center/100% 100% no-repeat; container-type:inline-size} /* max-width is the hard right limit: the printed rules stop before the RELEASED stamp, and a long value must never reach it. Values clip at that limit rather than colliding with the stamp. */ .rl-f{position:absolute;color:#1a1612; font-family:'Special Elite','GR Typewriter',monospace; font-size:clamp(11px, 2.5cqw, 15px);line-height:1; /* NO max-width here. Each row carries its own, because each printed rule is a different length — see the block above .f-collection below. 9 Sep 2026: a shared 42% cap lived here and it is what put the type into the ornament. Its own comment said 23.5% "put the right edge at 59% of the card" and treated that as too narrow. 59% is not too narrow: it is exactly where every printed rule STOPS. Measured off both card arts, which agree to 0.05%. Raising the cap to 42% ended the rows at 77.5% — eighteen points past the end of their own line — so a long value stopped clipping and started running off the paper instead. That is the fault Orpheo has been reporting, and widening the box is what caused it. */ white-space:nowrap;overflow:hidden;text-overflow:clip; transform:translateY(-100%)} /* ===== PRICE + TAKE UP + PAY WHAT YOU WILL — one asset, one Stripe link ===== */ .rl-pay{grid-column:2;grid-row:2;position:relative; width:100%;max-width:var(--col-max);margin-inline:auto;aspect-ratio:var(--pay-ar); background:var(--art-pay) center/100% 100% no-repeat; container-type:inline-size} .rl-price{position:absolute;left:43%;top:23%;transform:translate(-50%,-50%); color:#151110;font-family:'Special Elite',monospace; font-size:clamp(15px, 7cqw, 34px);line-height:1;white-space:nowrap} #rvBuyWrap,#pvBuyWrap{position:absolute;left:7.7%;top:40.6%;width:84%;height:30%; display:block;z-index:2} .rl-plate{display:block;width:100%;height:100%;background:none;border:0;padding:0} .rl-plate img{width:100%;height:100%;display:block;opacity:0} a.rl-plate{cursor:pointer} a.rl-plate:focus-visible{outline:2px solid var(--rl-ink);outline-offset:3px} /* the block art already prints this plate; the old separate element would ghost a second copy over it */ .rl-pwyw{display:none} /* ===== RELIC INFO and LORE — art over, parchment under ===== Infinite text. Wraps. Scrolls. Clipped, never bleeding. overflow is declared as the two axes, NEVER the shorthand, because the shorthand kills the scroll. No contain:paint (breaks z-index), no -webkit-mask-image (breaks overflow in Chrome). */ .rl-info{grid-column:2;grid-row:3;position:relative;z-index:1; width:100%;max-width:var(--col-max);margin-inline:auto;aspect-ratio:var(--info-ar); container-type:inline-size} /* LORE IS FULL WIDTH. His reference layout, 5 Sep 2026: the Lore frame runs the whole width of the sheet UNDER the photograph and the reading column -- it was never a panel inside the narrow right column. Being trapped in a 560px column against a 2295x1234 banner is the actual reason it read as "tiny": the box could only ever be 301px tall there. Across both tracks it is more than twice as wide and the writing has somewhere to go. */ .rl-lore{grid-column:1 / -1;grid-row:5;position:relative;z-index:1; width:100%;max-width:none;margin-inline:auto;aspect-ratio:var(--lore-ar); container-type:inline-size} /* the art overlay for both panels */ .rl-info::after,.rl-lore::after{content:"";position:absolute;inset:0;z-index:3; pointer-events:none} .rl-info::after{background:var(--art-info) center/100% 100% no-repeat} .rl-lore::after{background:var(--art-lore) center/100% 100% no-repeat; /* 12 Sep 2026: his portrait Lore sheets are OPAQUE parchment, not a frame with a clear middle, so art drawn on top hid every word in the admin preview. The sheet goes UNDER the writing. .rl-lore is z-index:1, so this stays inside the panel and cannot drop behind the page. */ z-index:0} /* the scrolling parchment beneath, trimmed so the art's rails cover its edges */ /* background-size is deliberately oversized, not `cover`: the parchment image carries its own torn deckle edge, and at `cover` that ragged edge lands inside the frame's opening and leaves a dark gap against the rails. Zooming past it shows interior texture only, so the paper reads as one continuous sheet running underneath the art. */ .rl-info__paper,.rl-lore__paper{position:absolute;z-index:1; overflow-x:hidden;overflow-y:auto; color:#1a1612;background:var(--parchment) center/145% 145% no-repeat; font-family:'Special Elite','GR Typewriter',monospace; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; /* invisible, as above -- the story scrolls, the bar is never drawn */ scrollbar-width:none;-ms-overflow-style:none} /* The paper fills the panel edge to edge — inset:0 — because the frame is drawn to meet it. Nothing to align by hand and nothing to overshoot: the rails land on the paper's outer edges by construction, and the paper is centred by definition. Rail clearance is PADDING, never a smaller box, so the sheet stays continuous while the text stays off the ornament. */ /* The paper sits in the frame's INNER OPENING exactly — the numbers below are measured off each art file's own alpha channel, per metal, because gold and silver are cut slightly differently. Not inset:0: these frames carry a transparent OUTER margin, and filling the box pushes paper past the art. */ /* padding-top clears the header cartouche, which is part of the art and sits OVER the paper. The paper itself still starts at the frame's top line, so there is no gap between rail and sheet. */ .rl-info__paper{left:var(--ip-x);top:var(--ip-y);width:var(--ip-w);height:var(--ip-h); padding:13cqw 5cqw 3cqw;font-size:clamp(12px, 3.1cqw, 16px);line-height:1.55} .rl-lore__paper{left:var(--lp-x);top:var(--lp-y);width:var(--lp-w);height:var(--lp-h); padding:1.5cqw 1cqw 2cqw;font-size:clamp(13px, 3cqw, 17px);line-height:1.55; /* 12 Sep 2026: his Lore sheets carry their own parchment. Painting --parchment here too drew the paper twice - a hard rectangle over his frame (audit item 1 in HANDOFF-20260912). */ background:none} .rl-info__paper::-webkit-scrollbar,.rl-lore__paper::-webkit-scrollbar{ width:0;height:0;display:none} /* Relic Info rows. The paper is a
and this rule says "every div inside is a row". The pager then wraps the rows in two divs of its own (.rl-pgwin > .rl-pgflow), and those matched it -- so the WRAPPERS became flex rows and the four real rows became flex ITEMS laid side by side, each stretched to the full height of the box. Measured: every row reported 787px tall, including "Kind: Outerwear — coat", and the values came out as slivers a character or two wide down the edge of the panel. That is the "uneven run off"; it was never a clipping fault. The wrappers are structure, not rows, so they are put back to block. */ .rl-info__paper div{display:flex;gap:.6em;margin-bottom:.42em} /* rows only -- see the two wrapper exemptions below */ .rl-info__paper .rl-pgwin{display:block;gap:0;margin-bottom:0} /* The FLOW must not have its gap zeroed. `gap:0` is shorthand and it sets column-gap too, which killed the 40px gutter the columns are laid out with -- while the slide still stepped by column + gutter. Columns 347 apart, a step of 386.78: every page landed 39.78px out, so a sliver of the previous column showed at the left edge and the next one hung past the right, over the frame. That is the page-2 bleed: "RIALS" on the left, "SIZE" out on the ornament. The gutter is restored from the same custom property the slide reads, so the two can never disagree again. */ .rl-info__paper .rl-pgflow{display:block;margin-bottom:0; column-gap:var(--pf-gap,40px);row-gap:0} /* ...but that selector also matched the PAGER'S OWN WRAPPER, which is a div inside this paper. The flow became a flex container, so column-width did nothing at all: the text overflowed straight down instead of paging -- 554px of it -- and the column count came back as 1, so no controls were drawn either. That is the shattered run-off in the Relic Info panel. The wrapper is a block; only the ROWS inside it are flex. */ .rl-info__paper .rl-pgwin, .rl-info__paper .rl-pgflow{display:block} .rl-info__paper dt{flex:0 0 29%;text-transform:uppercase;letter-spacing:.05em;opacity:.78; word-break:break-word} .rl-info__paper dd{margin:0;flex:1 1 auto;word-break:break-word} /* Lore */ .rl-lore__nm{font-size:1.3em;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5em; word-break:break-word} .rl-lore__sub{font-style:italic;opacity:.85;margin:0 0 .8em;word-break:break-word} .rl-lore__file{font-size:.82em;letter-spacing:.14em;text-transform:uppercase; opacity:.62;margin:0 0 .9em;word-break:break-word} .rl-lore__file:empty{display:none} .rl-lore__paper p{margin:0 0 .7em;word-break:break-word} /* ===== THE LORE PAGES — 4 Sep 2026 ===================================== Orpheo: "the lore window is tiny", and after the column was widened to 820 the panel STILL hid the last line. It was hiding it in silence: the paper scrolls, and .rl-lore__paper's scrollbar is deliberately never drawn (scrollbar-width:none, ::-webkit-scrollbar 0). A reader had no way to know there was more, so every session that looked at it reported it fine. Measured on one real relic: 25px hidden at 1440. On a lore entry three times as long: 209px hidden — most of a paragraph, invisible. WHY THE FRAME IS NOT SIMPLY MADE TALLER. GARMENTS-LORE.png is 2295x1234, a wide short banner, and .rl-lore::after paints it at 100% 100%. Growing the box stretches the art. At the 6.8% needed for one line that is not visible; at the 56% a long entry needs, the LORE cartouche stretches down over the title and the corner ornament smears. Rendered and looked at before it was ruled out — his art is not mine to distort. AND THE PADDING IS NOT WASTE. padding-top 10cqw = 21.9% of the paper's height, and the cartouche's own last opaque row, measured off the PNG's alpha, is 22.45% down the paper. It is calibrated, not slack. There is no free room to reclaim. So the text is PAGED, which is this project's own idiom — the Ossuary reader turns leaves rather than scrolling. The type stays at full size, the frame stays exactly as drawn, and nothing is ever hidden: the flow is laid into columns one paper-width wide and slid one page at a time. Set up by the pager in relic-zoom.js, which only engages when the text genuinely overflows. A relic whose lore fits is untouched and gets no controls. ==================================================== */ .rl-info__paper.is-paged{overflow:hidden} /* THE CLIPPING WINDOW. overflow:hidden clips at the PADDING box, not the content box, so with the paper's own 3.4cqw side padding the neighbouring columns were still drawn in that padding — which sits directly over the frame's left and right rails. Caught on a render of page 3: half a line of the previous page printed on the ornament. The window has no padding of its own, so its padding box IS the page, and a column one step away is clipped exactly at the text edge. It only clips while paged; a short relic keeps a visible window so a grown panel cannot crop its own last line. */ .rl-info__paper.is-paged .rl-pgwin{overflow:hidden} .rl-pgwin{overflow:visible} .rl-pgflow{column-gap:var(--pf-gap,40px);height:var(--pf-h,auto); transform:translateX(var(--pf-x,0px));transition:transform .28s ease; will-change:transform} /* Only the SHORT header lines are kept whole. The blanket rule that was here applied to #rvDesc too — the whole provenance in one block — and a block that is told not to break and is taller than one column does not break: it OVERFLOWS. That is what put half of page one down the left of page two, and a strip of page three down the right, printed over the frame's rails. The prose must be free to break; only the title, the subtitle and the filing line must not be split mid-line. */ .rl-pgflow > .rl-lore__nm, .rl-pgflow > .rl-lore__sub, .rl-pgflow > .rl-lore__file{break-inside:avoid-column} /* RELIC INFO'S ROWS ARE FLEX (.rl-info__paper div is display:flex, label and value side by side). A column break landing INSIDE one of those rows does not move the row to the next column -- it fragments the flex line, and the value comes out as slivers of one or two characters stacked down the edge of the panel. That is the "uneven run off" exactly: not a clipping fault, a fragmentation fault. Each row is atomic; the break has to fall BETWEEN rows. Scoped to the info paper so the Lore's #rvDesc, which is one long block and MUST be free to break, is untouched -- a block told not to break that is taller than its column overflows instead. */ .rl-info__paper .rl-pgflow > div{break-inside:avoid-column} /* page controls: the panel's own type, sitting on the paper just above the bottom rail. Only ever inserted when there is a second page. */ .rl-info .rl-pg{--pg-b:12.5%} .rl-pg{position:absolute;z-index:4;left:0;right:0; /* The paper runs 7.5% -> 92.5% of the panel (--lp-y + --lp-h). At 3.2% the controls landed BELOW it, on the frame's dark bottom rail, where #1a1612 type is invisible — caught on a render, not in review. 9.5% puts them on the parchment, clear of the ornament. */ bottom:var(--pg-b, 9.5%); display:flex;align-items:center;justify-content:center;gap:1.1em; font-family:'Special Elite','GR Typewriter',monospace; font-size:clamp(10px,1.55cqw,13px);letter-spacing:.14em; color:#1a1612;pointer-events:none} .rl-pg button{pointer-events:auto;background:none;border:0;padding:0 .3em; font:inherit;color:inherit;cursor:pointer;opacity:.72;line-height:1} .rl-pg button:hover{opacity:1} .rl-pg button[disabled]{opacity:.22;cursor:default} .rl-pg .rl-pg__no{opacity:.62;letter-spacing:.2em} @media (prefers-reduced-motion: reduce){ .rl-pgflow{transition:none} } /* the catalogue number must always read ABOVE the Relic Info panel */ .f-no{z-index:4} /* ===== MOBILE: one column, sticky dropped, real pixel sizes ===== */ @media(max-width:820px){ .rl-sheet{grid-template-columns:minmax(0,1fr);gap:14px; padding:0 12px 24px} .rl-stage{grid-column:1;grid-row:auto;position:relative;top:auto; width:100%;justify-self:stretch} .rl-card{grid-column:1;grid-row:auto;max-width:none} .rl-pay{grid-column:1;grid-row:auto;max-width:min(420px,88vw)} .rl-info{grid-column:1;grid-row:auto;max-width:none} .rl-lore{grid-column:1;grid-row:auto;max-width:none} .rl-dots{grid-column:1;grid-row:auto} .rl-top{padding:10px 14px} .rl-x{padding:7px 13px} .rl-name{font-size:13px} /* Readability floors for a phone. The panels are the surfaces meant to be READ, so they are raised rather than left at the desktop clamp minimum. The card is a facsimile whose type has to stay on its printed rules — those sit ~13px apart at a 366px card, so 12px is the most that fits, and the same values are repeated legibly in Relic Info directly beneath. */ .rl-info__paper{font-size:13.5px;line-height:1.6} .rl-lore__paper{font-size:14.5px;line-height:1.65} .rl-f{font-size:12px} .rl-info__paper dt{flex:0 0 34%} } /* Very narrow phones: the card shrinks below the point where 12px clears the printed rules, so the facsimile type steps down with it. */ @media(max-width:360px){ .rl-f{font-size:10.5px} } /* ===== Record of Recovery field positions ===== Percentages of the CARD box, measured off the card art itself. `top` is the text BASELINE, sitting on the printed rule. */ /* the catalogue number is capped to the printed rule's remaining width so a long number shrinks rather than running off the card. G5, 31 Aug 2026 — the cap was right, the SCALING was wrong. 2.1cqw asked for far less than the box could hold: on a 366px card (the 390px phone, where .rl-card is max-width:none and fills the column) the box is 64px and the number was set at 7.7px, needing only 48. It was legible-adjacent on desktop and unreadable on a phone — under the panel's own 10px floor, with half this team neurodivergent — and on the narrowest cards it hit the 7px floor and began to clip against the cap, which is the corner it was seen running off. Measured, not calculated: "272608.0001" in the real Special Elite face is 6.253x the font size. Fitting 17.5% of the card therefore needs font <= 0.028 * cardWidth, so 2.75cqw is the largest honest factor. Verified at five card widths — 560 / 366 / 351 / 320 / 296 — and it fits at every one: card box was now 560 98.0 11.76 13.00 (hits the cap) 366 64.0 7.69 10.06 (clears the 10px floor) 351 61.4 7.37 9.65 320 56.0 7.00 8.80 296 51.8 7.00 8.14 9 Sep 2026 — 17.5% WAS MEASURED AGAINST THE WRONG THING, and this is the fault Orpheo saw as the catalogue number "running off". 17.5% from 80.6% ends at 98.1%. That does clear the RELEASED stamp, which is what it was measured to do — but the stamp is not what the number hits. The number hits the EDGE OF THE PAPER. Past the printed box the card art is the gold frame, and #1a1612 ink on that frame cannot be read at all, so the tail of every catalogue number was simply disappearing. Nobody caught it because nobody had ever seen a rendered card with a catalogue number in it — the panel hung before it could draw (see relic-card-fit.js). The first picture of it showed "272608." and then nothing. Re-scanned both card arts, same horizontal dark-run method as the five rows below. GARMENTS-RELICCARD.png and ADORNMENTS-RELICCARD.png are both 924 wide and agree to the pixel here, not merely to 0.05%: printed box (top and bottom borders) 68.61% -> 89.29% "Catalogue#" label ends / rule begins 79.22% printed rule under the number 79.22% -> 87.34% So the writable area is the rule's start to the box's inner edge: 79.22% -> 89.29%, which is 10.07%. The number now stops inside the box it is printed in. fit() in relic-card-fit.js shrinks it to that width and the 8px floor still applies, so a long number gets smaller instead of vanishing onto the ornament. left is 80.0%, not the rule's own 79.22%. Seated exactly on the rule start the number butts straight against the printed "Catalogue#" label and the two read as one run of characters — rendered at 1440 and looked at before this was settled. 0.78% is the smallest gap that separates them at a 512px card and it is taken off the LEFT, so the right edge stays on the box at 89.29%. `top` is unchanged and still correct — .f-no is excluded from seatRow()'s group on purpose and keeps its own measured 25.4%. STILL CLIPS ON A SMALL CARD, and this is a real limit, not an oversight. The writable area is 9.29% of the card; "272608.1002" in Special Elite is 6.253x its font size, so it needs a 512px card to fit at the 8px floor. It does fit on the shop front at desktop. On the 366px phone card and in the admin's 402px preview panel the same number needs ~6.4px, below the floor, and clips inside its box. Lowering the floor for this one field would buy the last three digits at a size nobody can read. Shortening the number, or giving it a second printed line, is Orpheo's call and not a CSS fix. */ .rl .f-no{left:79.22%;top:25.4%;max-width:10.07%;font-size:clamp(8px, 2.75cqw, 13px);white-space:nowrap;overflow:hidden} /* 8 Sep 2026. "Put the text on the line." The rules are painted into GARMENTS-RELICCARD.png and the browser cannot see them, so every DOM check said these boxes were right while the type floated above the line. Scanned the art: rules at 39.58 / 45.35 / 51.28 / 57.21 / 63.14 percent. A box's bottom is not its baseline - measured on the live face the baseline sits 2.95px above the bottom, which is 1.19 percent of the 247px card. So top = rule + 1.19. Row one was already 40.8, which is why it always looked closest; row five was 62.4 where it needed 64.33, nearly 2 percent out, and that is the drift down the column. Do NOT "fix" this with a translateY in this file: an em there resolves against the clamp() base, not the size relic-zoom.js sets inline, and it moved every row a full line down. Tried, reverted, twice. */ /* 9 Sep 2026 — the HORIZONTAL half of "put the text on the line", and the reason the vertical half above never looked fixed. All five rows sat at left:35.5% with one shared max-width. But the five printed rules are NOT one shape: each begins where its own printed label ends, and the labels are different lengths. Item Name and Materials are the longest rules on the card and they start at 25.22% — a full ten points left of where the boxes were. Those two rows were handed the least room of the five while needing the most, which is why they, and only they, kept hitting the 8px floor. Three sessions read that as "the cap is too tight" and widened it. The cap was not the problem. The left edge was. Detected off the art, not calculated, and not eyeballed off a screenshot: a horizontal dark-run scan of GARMENTS-RELICCARD.png and ADORNMENTS-RELICCARD.png. Both are 924px wide and agree within 0.05%, so these percentages hold for gold and silver alike. row rule starts rule ends usable width f-collection 32.14% 59.09% 26.95% f-name 25.22% 59.09% 33.87% f-materials 25.22% 58.98% 33.76% f-date 29.87% 59.09% 29.22% f-artisan 34.31% 59.20% 24.89% The `top` values are unchanged and still correct — rule + 1.19, per the block above. Only left and max-width move here. .f-no is deliberately absent: its rule is top-right, outside the scanned band, and its own measured 80.6% / 17.5% is recorded above. Do not fold it into this table. */ .rl .f-collection{left:32.14%;max-width:26.95%;top:40.77%} .rl .f-name{left:25.22%;max-width:33.87%;top:46.54%} .rl .f-materials{left:25.22%;max-width:33.76%;top:52.47%} .rl .f-date{left:29.87%;max-width:29.22%;top:58.40%} .rl .f-artisan{left:34.31%;max-width:24.89%;top:64.33%} /* ===== palette + asset ratios ===== GOLD IS THE DEFAULT, on plain .rl with no attribute required, so if the admin's JavaScript ever fails to set data-metal the viewer still lays itself out instead of collapsing. Silver overrides on [data-metal="silver"], which outranks it. */ .rl[data-metal="silver"]{ --rl-ink:#d8dde6; --rl-dim:#8d95a3; --rl-line:rgba(216,221,230,.4); --bar:#969aa6; /* silver is cut slightly differently from gold — measured separately off ADORNMENTS-RELICINFO.png and ADORNMENTS-LORE-BORDER.png */ --ip-x:12.514%; --ip-y:11%; --ip-w:78.627%; --ip-h:78.5%; --lp-x:10%; --lp-y:14%; --lp-w:80%; --lp-h:76%; --viewer-ar:1357/1925; --card-ar:924/620; --pay-ar:896/528; --info-ar:903/617; --lore-ar:2550/3300; } /* ===== in-window zoom on the photograph ===== The wrapper carries the SHOPPER's zoom. The curator's framing (--fz/--fx/--fy, written by admin/shop-add.php from fit_z/fit_x/fit_y) stays on the inner element and is never touched. Two separate layers. */ .rl-zoom{position:absolute;inset:0; transform:scale(var(--zs,1)); transform-origin:var(--zx,50%) var(--zy,50%); transition:transform .28s cubic-bezier(.22,.61,.36,1)} .rl-shot.is-zoomed{cursor:grab} .rl-shot.is-panning{cursor:grabbing} .rl-shot.is-panning .rl-zoom{transition:none} @media(prefers-reduced-motion:reduce){.rl-zoom{transition:none}} /* ============================================================ THE OSSUARY — uses the storefront viewer verbatim. There is no ossuary variant here on purpose. The popup on ossuary.html is the SAME .rl viewer the collection pages use, with the same classes and the same geometry, so the two cannot drift apart. Gold for a garment, silver for an adornment. The only ossuary-specific art is the niche on the page's display tiles (images/ossuary-arch-niche.png), applied where those tiles are built in ossuary.html. ============================================================ */ /* ============================================================ THE LORE TAB AND THE THUMBNAIL STRIP — 12 Sep 2026, his layout sheet. Shop front only (#rv). The admin preview (#pvRl) keeps Lore stacked in the sheet with nothing changed but the art: "In admin this remains stacked. No change needed except for image swap." - The open relic lets the shelf show through at 25%: "25% opacity from tile open". Read as the page behind visible at 25%, so the backdrop is 75% dark. - Lore is NOT a row of the sheet any more. His LORE button opens his portrait Lore sheet as an overlay centred over the relic, with the same 25%, and the writing scrolls with no bar drawn. "THIS IS NOT STAND ALONE." - The dots are small dimmed copies of the photographs, unframed, shown only when there are several: "just dim them in the rectangles as small versions of themselves when there are multiples." ============================================================ */ #rv.rl{background:rgba(5,4,3,.75)} #rv .rl-lorebtn{display:block;grid-column:2;grid-row:4;justify-self:center;align-self:start; width:min(70%,300px);aspect-ratio:520/211;padding:0;border:0;cursor:pointer; background:var(--art-lore-btn) center/contain no-repeat;transition:filter .25s ease} #rv .rl-lorebtn:hover{filter:brightness(1.15)} #rv .rl-lorebtn:focus-visible{outline:2px solid var(--rl-ink);outline-offset:4px} /* The sheet is sized off BOTH window edges so the whole of his page is always on screen, and the writing box is placed inside it by the same numbers (--lp-*), so the two cannot drift apart at any size. */ #rv .rl-lore{position:fixed;inset:0;z-index:140;display:none; width:auto;max-width:none;aspect-ratio:auto;margin:0;container-type:normal; background:rgba(5,4,3,.75); --ls-w:min(92vw, calc((100vh - 40px) * 2550 / 3300)); --ls-h:calc(var(--ls-w) * 3300 / 2550)} #rv.lore-open .rl-lore{display:block} #rv .rl-lore::after{display:none} #rv .rl-lore::before{content:"";position:absolute;left:50%;top:50%; width:var(--ls-w);height:var(--ls-h);transform:translate(-50%,-50%); background:var(--art-lore) center/100% 100% no-repeat;pointer-events:none} #rv .rl-lore__paper{z-index:1;padding:0 .3em .6em; left:calc(50% - var(--ls-w) * (.5 - .10)); top:calc(50% - var(--ls-h) * (.5 - .14)); width:calc(var(--ls-w) * .80);height:calc(var(--ls-h) * .76); font-size:clamp(14px, calc(var(--ls-w) * .026), 19px);line-height:1.62} #rv .rl-lore__x{position:absolute;top:14px;right:26px;z-index:3;background:rgba(0,0,0,.6)} #rv .rl-lore__x:focus-visible{outline:1px solid var(--rl-ink);outline-offset:3px} /* The photograph is pinned (sticky) and taller than most windows, so the thumbnail row scrolls up across it. Stacked below the pinned frame, the strip slides UNDER the photograph instead of printing over its rail. */ #rv .rl-stage{z-index:2} #rv .rl-dots{position:relative;z-index:1} /* 12 Sep 2026, Orpheo: "add a simple black strip there to hold them" -- the thumbnails sat loose over the shelf showing through at 25%. */ #rv .rl-dots{justify-self:stretch;width:100%;background:#000; padding:10px 12px;justify-content:center} /* 12 Sep 2026, Orpheo: "I don't see the arrows on the images." The arrow buttons were deliberately invisible (opacity:0) hit areas, and --art-arrows was set on every page but used by nothing. His art is one 1529x213 strip: the left arrow in its first ~140px, the right in its last ~140px, clear between. Each button shows its own end of the strip, undistorted. */ #rv .rl-ar{opacity:1;width:10.29%;height:auto;aspect-ratio:140/213; background-image:var(--art-arrows);background-repeat:no-repeat; background-size:calc(100% * 1529 / 140) 100%;transition:filter .2s ease} /* OUTSIDE the frame, as his composite (BACKDOOR HTML/layoutsite.png) draws it: the strip is 1529 wide against the 1361 frame, centred, so each arrow end overhangs by 84/1361 = 6.17% and is 140/1361 = 10.29% wide. The stage narrows to 1361/1529 = 89% so strip plus frame exactly fill the column and the arrows are never clipped by the window edge, on any screen. */ #rv .rl-stage{width:89%} /* SLIGHTLY BEHIND THE FRAME, as his layout guide draws it: the rail overlaps each arrow's inner tip. The frame (.rl-stage::after) is z-index 3, so the arrows sit at 2. The frame is pointer-events:none, so the tucked part of the arrow still takes the click. */ #rv .rl-stage .rl-ar{z-index:2} #rv .rl-prev{left:-6.17%;background-position:left center} #rv .rl-next{right:-6.17%;background-position:right center} /* the art stays its drawn size; the tap area reaches the 44px the site is held to */ #rv .rl-ar::before{content:"";position:absolute;inset:-8px -6px} #rv .rl-ar:hover{filter:brightness(1.2)} #rv .rl-ar:focus-visible{outline:1px solid var(--rl-ink);outline-offset:2px} /* 12 Sep 2026, Orpheo: "Fix the image sizing ... Refer to the guide I sent." His layout guide lines the photo frame's visible top up with the top of the Record of Recovery card, and its visible bottom with the bottom of Relic Info. Measured on the page, not guessed: - GARMENTS-VIEWER.png: transparent margin above the gold = 6.79% of its height, gold ends at 97.3%, so the visible frame is 90.5% of the stage. - The right column (card + price block + Relic Info, with the sheet's gaps) comes out 2.035x its own width. The frame's visible height is 0.905 * 1928/1361 * 0.89 = 1.141x the photo track. Equal heights need the track at 1.78x the column; measured on the page that left the frame 20px short of Relic Info at 1232, 1440 and 1920 alike; 1.82 left 14px; the two runs give 150px per 1.0 of ratio, so level is 1.91fr. - The stage is pinned (sticky top:0), which cancels a negative margin, so the column is moved DOWN by the frame's transparent margin instead: 0.0679 * 1928/1361 * 0.89 * 1.91 = 16.35% of the column width. - The card stops at 560px (--col-max). Past that the photo track kept growing and the frame overshot Relic Info by 124px at 1920, so the sheet is capped at the width where the column reaches 560: 560 * 2.91 + gap + padding. Desktop only: the phone stacks and keeps its own sizes. */ /* 12 Sep 2026, Orpheo: "the take up this relic buttons look a little weird - so make sure there's a black rectangle behind them." The plates have transparent edges, so the page showing through at 25% read through them. A second background layer, painted UNDER his art so it can never cover a plate. Measured on the page: the two plates span 41%-93% down the block and 9%-91% across; the black runs 38%-95% and 6%-94%. Background-position percentages align the layer, so 6% of an 88% layer is 6/12 = 50%, and 38% of a 57% layer is 38/43 = 88.4%. */ #rv .rl-pay{background:var(--art-pay) center/100% 100% no-repeat, linear-gradient(#000,#000) 50% 88.4%/88% 57% no-repeat} @media(min-width:821px){ #rv .rl-sheet{grid-template-columns:minmax(0,1.91fr) minmax(0,1fr); width:100%;max-width:calc(560px * 2.91 + 2.4vw + 84px);margin-inline:auto} /* +12px: Orpheo, 12 Sep, looking at it live: "Cards are still sitting too high. Just nudge them down a little bit." */ #rv .rl-card{margin-top:calc(16.35% + 12px)} } #rv .rl-dots{gap:8px;flex-wrap:wrap;padding-top:10px;align-items:flex-start;align-self:start} #rv .rl-dot{width:clamp(34px,4vw,56px);height:auto;aspect-ratio:3/4;border:0; background:#0a0805 center/cover no-repeat;opacity:.35;transition:opacity .25s ease} #rv .rl-dot:hover{opacity:.7} #rv .rl-dot.on{opacity:1;background-color:#0a0805} /* 12 Sep 2026, Orpheo: a divider "right under the previewer on the black strip ... Gold for garments. Silver for Adornments. They must match their pages." His divider art, one simple repeat: NEW DIVIDERS/GOLD-DIVIDER-3.png on every garment page, NEW DIVIDERS/SILVER-DIVIDER.png on every adornment page, keyed on the page's own data-metal so it cannot disagree with it. The url() is relative to this stylesheet, so the page folder does not matter. Full row of the strip, so the thumbnails wrap beneath it. */ #rv .rl-dots::before{content:"";flex:0 0 100%;height:clamp(16px,2.4vw,30px);margin:0 0 10px; background:url('images/layout/RELIC-DIVIDER-GOLD.png') center/contain no-repeat} #rv[data-metal="silver"] .rl-dots::before{background-image:url('images/layout/RELIC-DIVIDER-SILVER.png')} @media(max-width:820px){ #rv .rl-lorebtn{grid-column:1;grid-row:auto;width:min(62%,260px)} #rv .rl-lore{--ls-w:min(94vw, calc((100vh - 24px) * 2550 / 3300))} #rv .rl-lore__x{top:10px;right:14px} /* The phone rule above stretches the stage to the left edge, which ran the left arrow's 6.17% overhang off the screen (x=-8 at 390). Centred, the 89% stage leaves the overhang room on both sides. */ #rv .rl-stage{justify-self:center} /* 12 Sep 2026, Orpheo: "on mobile the sizing is huge". Stacked, every panel took the full screen width: at 768 the photograph was 662x938 and the card 744 wide, a 2502px sheet. The stack is held to one narrow column (see max-width below), centred, and the photograph is 80% of it -- arrows overhang 6.17% each side of the stage, so 80% still leaves them room inside the column. */ /* 460 -> 400, Orpheo: "The mobile version is pretty big there". */ #rv .rl-sheet{width:100%;max-width:400px;margin-inline:auto} #rv .rl-stage{width:89%} /* 12 Sep 2026, Orpheo: stacked, "the 'take up this relic' should be first. Followed by the two cards." Photograph and its strip, then the price and Take Up block, then the Record of Recovery card, then Relic Info, then LORE. The markup order is untouched; only the phone stack reorders. */ /* 12 Sep 2026, Orpheo, on the phone: "You can see the card and photo sizing here." The photograph was 80% of the column and the three panels 100%, so the stack stepped in and out. Every panel now takes the photograph's width, centred, so the column reads as one line. */ /* 80% -> 89%, Orpheo: "the card is now squished for the record of recovery" -- at 80% the card's printed rules only held 4.6-8px type. 89% is the widest the photograph can go and still leave its arrows' 6.17% overhang room. */ #rv .rl-pay,#rv .rl-card,#rv .rl-info{width:89%;max-width:none;justify-self:center} /* The phone rules above set the card type to a fixed 12px and Relic Info to 13.5px -- sized for a full-width card. At 80% the card text ran off its printed rules and Relic Info read big (Orpheo, 12 Sep). Both scale with their own panel again, exactly as on desktop; relic-card-fit.js still shrinks and seats each card row on its line. */ #rv .rl-f{font-size:clamp(9px, 3.1cqw, 15px)} #rv .rl-info__paper{font-size:clamp(11px, 3.1cqw, 16px);line-height:1.5} #rv .rl-stage{order:1} #rv .rl-dots{order:2} #rv .rl-pay{order:3} #rv .rl-card{order:4} #rv .rl-info{order:5} #rv .rl-lorebtn{order:6} } /* ============================================================ THE ADMIN PREVIEW IS THE LIVE PAGE — 12 Sep 2026. Orpheo: "Full preview has to be in there. It should look just like the live page. No difference. All that's different is it's live editing before you save, draft, edit or delete." admin/shop-add.php draws the same sheet as #pvRl inside a ~470px side panel. The shop front's stacked (phone) arrangement is what a visitor sees at that width, so every rule the #rv phone block sets is repeated here for #pvRl, without the viewport media query -- the admin window is wide, the panel is not. Change one, change the other. ============================================================ */ #pvRl .rl-sheet{width:100%;max-width:400px;margin-inline:auto} #pvRl .rl-stage{width:89%;justify-self:center;z-index:2;order:1} #pvRl .rl-dots{order:2;position:relative;z-index:1;justify-self:stretch;width:100%;background:#000; padding:10px 12px;gap:8px;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-self:start} #pvRl .rl-dots::before{content:"";flex:0 0 100%;height:clamp(16px,2.4vw,30px);margin:0 0 10px; background:url('images/layout/RELIC-DIVIDER-GOLD.png') center/contain no-repeat} #pvRl[data-metal="silver"] .rl-dots::before{background-image:url('images/layout/RELIC-DIVIDER-SILVER.png')} #pvRl .rl-dot{width:34px;height:auto;aspect-ratio:3/4;border:0; background:#0a0805 center/cover no-repeat;opacity:.35;transition:opacity .25s ease} #pvRl .rl-dot:hover{opacity:.7} #pvRl .rl-dot.on{opacity:1;background-color:#0a0805} #pvRl .rl-pay{order:3;width:89%;max-width:none;justify-self:center; background:var(--art-pay) center/100% 100% no-repeat, linear-gradient(#000,#000) 50% 88.4%/88% 57% no-repeat} #pvRl .rl-card{order:4;width:89%;max-width:none;justify-self:center} #pvRl .rl-info{order:5;width:89%;max-width:none;justify-self:center} #pvRl .rl-f{font-size:clamp(9px, 3.1cqw, 15px)} #pvRl .rl-info__paper{font-size:clamp(11px, 3.1cqw, 16px);line-height:1.5} #pvRl .rl-ar{opacity:1;width:10.29%;height:auto;aspect-ratio:140/213;z-index:2;font-size:0;color:transparent; background-image:var(--art-arrows);background-repeat:no-repeat; background-size:calc(100% * 1529 / 140) 100%} #pvRl .rl-prev{left:-6.17%;background-position:left center} #pvRl .rl-next{right:-6.17%;background-position:right center} #pvRl .rl-ar::before{content:"";position:absolute;inset:-8px -6px} #pvRl .rl-lorebtn{order:6;display:block;justify-self:center;align-self:start;grid-column:1; width:min(62%,260px);aspect-ratio:520/211;padding:0;border:0;cursor:pointer; background:var(--art-lore-btn) center/contain no-repeat} /* Lore over the preview panel, not over the whole admin: the panel is the visitor's window here. .sa-viewer is the sticky, 100vh panel; it is made a size container (desktop only -- stacked it has no fixed height) so the sheet sizes off the panel exactly as the live page sizes off the window. */ #pvRl .rl-lore{position:absolute;inset:0;z-index:40;display:none; width:auto;max-width:none;aspect-ratio:auto;margin:0;container-type:normal;order:7; background:rgba(5,4,3,.75); --ls-w:min(92vw, calc((100vh - 40px) * 2550 / 3300)); --ls-h:calc(var(--ls-w) * 3300 / 2550)} /* after the base rule on purpose: same specificity, the later one wins */ @media(min-width:769px){ .sa-viewer{container-type:size} #pvRl .rl-lore{--ls-w:min(92cqw, calc((100cqh - 40px) * 2550 / 3300))} } #pvRl.lore-open .rl-lore{display:block} #pvRl .rl-lore::after{display:none} #pvRl .rl-lore::before{content:"";position:absolute;left:50%;top:50%; width:var(--ls-w);height:var(--ls-h);transform:translate(-50%,-50%); background:var(--art-lore) center/100% 100% no-repeat;pointer-events:none} #pvRl .rl-lore__paper{z-index:1;padding:0 .3em .6em;background:none; left:calc(50% - var(--ls-w) * (.5 - .10));top:calc(50% - var(--ls-h) * (.5 - .14)); width:calc(var(--ls-w) * .80);height:calc(var(--ls-h) * .76); font-size:clamp(13px, calc(var(--ls-w) * .026), 19px);line-height:1.62} #pvRl .rl-lore__x{position:absolute;top:10px;right:14px;z-index:3;background:rgba(0,0,0,.6)} @media(max-width:768px){ #pvRl .rl-lore{position:fixed} } /* Relic Info labels at panel width: "WHAT IT IS" and "MATERIALS" broke mid-word ("MATERIA / LS") in the admin preview. Labels never break inside a word; the label column sizes to its longest word, and the value takes the rest. */ #pvRl .rl-info__paper dt,#rv .rl-info__paper dt{flex:0 0 auto;min-width:6.2em;word-break:normal;overflow-wrap:normal;letter-spacing:.02em}