/* ══════════════════════════════════════════════════════════════════════════ FERTILITY WONDERLAND — ROOM STYLESHEET ONE layout system for every room. Three colours. One type scale. ONE vertical rhythm. ONE pill. ONE button. ONE card grid. ONE centre axis. Nothing on a room page is positioned by hand. There are no per-element margins anywhere in this file — that is the whole point. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── THE THREE COLOURS ────────────────────────────────────────────── */ --pink:#FF3EAF; --white:#fff; --ink:#000; --card:#fff; --glass:rgba(255,255,255,.88); --edge:rgba(255,62,175,.22); --edge-hi:rgba(255,62,175,.55); --band:rgba(255,62,175,.32); --lift:0 20px 52px rgba(0,0,0,.18); --lift-hi:0 30px 72px rgba(0,0,0,.26); --lift-type:0 1px 0 rgba(255,255,255,.95), 0 0 34px rgba(255,255,255,.9), 0 0 90px rgba(255,255,255,.75); /* ── TYPE SCALE ───────────────────────────────────────────────────── */ --wordmark:clamp(52px,12vw,240px); --byline:clamp(22px,2.2vw,46px); --h1:clamp(46px,6vw,110px); --h2:clamp(32px,3.4vw,62px); --h3:clamp(26px,2.3vw,40px); --copy:clamp(20px,1.6vw,28px); --cap:clamp(17px,1.15vw,21px); /* ══ THE VERTICAL RHYTHM ══════════════════════════════════════════ TWO values govern every gap on this page. --rhythm between major blocks. Identical everywhere — which is what puts a section label EXACTLY halfway between its neighbours, by construction rather than by nudging. --tight inside one deliberate pairing only (a character + her card). No section, label or card carries its own top or bottom margin. */ --rhythm:clamp(120px,11vw,240px); --masthead-gap:clamp(40px,4.2vw,84px); /* byline → nav only */ --tight:clamp(34px,3.4vw,64px); --guide-gap:clamp(84px,8.4vw,176px); /* character → her card */ /* ── ONE PILL · ONE BUTTON · ONE CARD ─────────────────────────────── */ --pill-h:clamp(54px,3.9vw,68px); --pill-px:clamp(24px,2.1vw,38px); --btn-h:clamp(62px,4.4vw,76px); --btn-px:clamp(26px,2.3vw,42px); --radius:28px; --pad:clamp(64px,6vw,120px); /* card breathing room — vertical */ --pad-x:clamp(24px,2vw,36px); /* horizontal, so a button still fits. ⚠ 2026-08-26 — trimmed from clamp(30px,2.8vw,52px) as part of the 3-line-title-block pass: the longest dashboard titles (4-5 words, e.g. "POSITIVE PREGNANCY AFTER INFERTILITY DASHBOARD") were measured needing more usable text width per card. This reclaims real width for every card's title, same rule everywhere, font-size untouched. */ --card-gap:clamp(28px,3vw,56px); /* between cards on a shelf — trimmed alongside --pad-x/--gutter for the same reason, same 2026-08-26 pass. */ --measure:60ch; --shell:1600px; --gutter:clamp(16px,2.4vw,40px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:'DM Sans',system-ui,sans-serif; font-size:var(--copy); line-height:1.85; color:var(--ink); background:var(--white); overflow-x:hidden; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1,"onum" 0; } /* ══ THE SKY ══════════════════════════════════════════════════════════ */ .sky{ position:fixed; inset:-40px; z-index:0; /* ⚠ 2026-08-09 — the sky is a 1600x2144 portrait used full-bleed on a landscape screen, so only a slice of it shows. Anchored at `top` that slice was exactly the big pink heart and the yellow star, and the wordmark landed on both: 18% of the title's area sat on saturated artwork. Scanning the actual pixels for the crop that puts the least art behind the title across 1280 / 1440 / 1990 gives 35% — the heart and star move to frame the wordmark instead of colliding with it, and art under the title drops to 6.4%. This moves the CROP, not one pixel of assets/sky.jpg. */ /* Live sky is the locked landscape art. Portrait sky.jpg / sky-rooms.jpg / sky-storefront.jpg stay frozen as archives. */ background:url("assets/sky-wide.png") center center/cover no-repeat; /* no blur, no wash — the sky is sharp and full colour. Display type is black with a white glow, so it does not need the background held back. */ /* a fixed 40px bleed covers the blur edge without a percentage bleed or a scale() — both of which leaked into scroll width on a phone */ } .sky::after{content:none} .page{position:relative; z-index:2; flex:1 0 auto} /* ══ THE GEMS — they rain across the whole hall ═══════════════════════ Decorative only. The field sits on layer 0; ALL content sits on layer 1, so no stone can ever cover a word, a card or a button. Positions come from generated nth-child rules — collision-checked, never hand-placed. */ .gemfield{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden} .gem{ position:absolute; height:auto; display:block; filter:drop-shadow(0 12px 26px rgba(0,0,0,.26)); animation-name:float; animation-timing-function:ease-in-out; animation-iteration-count:infinite; } @keyframes float{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-18px) rotate(3deg)} } .top,.hall{position:relative; z-index:1} /* ══ MASTHEAD ═════════════════════════════════════════════════════════ */ .top{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--masthead-gap); padding:var(--rhythm) var(--gutter) 0; max-width:none; margin:0 auto; /* full-bleed: the wordmark is not confined to the content shell */ } .mark{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:var(--wordmark); font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0; line-height:.96; letter-spacing:.005em; color:var(--pink); /* ⚠ 2026-08-09 — the sky has a big pink heart and a pink star behind the wordmark, and pink type on pink art loses its edge. An earlier session "fixed" this by repainting the heart white INSIDE assets/sky.jpg, which flattened her 3D shading and was reverted. The artwork is not the problem to solve. This does it in type instead: a real white outline on every letter plus a tight white halo, so the wordmark carries its own edge over anything the sky puts behind it. NEVER touch assets/sky.jpg for this. */ -webkit-text-stroke:clamp(2px,.4vw,8px) var(--white); paint-order:stroke fill; text-shadow:0 0 10px #fff, 0 0 22px rgba(255,255,255,.98), 0 0 46px rgba(255,255,255,.75), 0 12px 34px rgba(255,62,175,.30); margin:0; text-align:center; text-wrap:balance; max-width:100%; min-width:0; /* never wider than the viewport */ position:relative; } /* ⛔ NO VEIL, NO FIELD, NO SCRIM BEHIND THE WORDMARK — REMOVED 2026-08-09. Two versions of a white radial field were tried here. The first washed out her fat 3D stars and hearts. The second was tightened to hug the type, and its EDGE showed as a visible horizontal line straight across the hero. Allie saw it immediately. A soft gradient cannot hide its own boundary over a photographic sky. The wordmark's readability comes from the white text-stroke on the glyphs, which follows the letterforms and has no edge. DO NOT reintroduce a plate, panel, scrim, veil or radial field here. */ /* ⚠ 2026-08-09 — THE HALO HUGS THE LETTERS. NO PANEL, NO FIELD, NO SCRIM. Allie: "I LOVE THE HUGE FAT STARS AND HEARTS AND NOW YOU CANT SEE THEM." A radial field behind the wordmark was tried and REMOVED: a gradient covers an ellipse, so it cannot tell her 3D stars and hearts from the type, and it washed the artwork pale for hundreds of pixels in every direction. The readable edge has to follow the GLYPHS, not a box — that is the white text-stroke above plus the tight halo below, and it costs the sky nothing. Do not reintroduce a plate, panel, scrim or radial field behind this wordmark. The art stays at full saturation. Recorded so it is not re-attempted: no crop of this sky clears the title. 1,300+ combinations of background-size and background-position were scored against the real pixels at 1280 / 1440 / 1700 / 1990. Best achievable is 3.4%, and only at a 380% zoom that destroys the composition — it is a 1600x2144 portrait with art edge to edge and the wordmark spans ~97% of the viewport. A fully clear hero needs NEW artwork with an open centre band, never a reposition and never a repaint of assets/sky.jpg. */ .mark small{ display:block; font-family:'DM Sans',sans-serif; font-weight:700; font-size:var(--byline); letter-spacing:.2em; color:var(--ink); -webkit-text-stroke:0; text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.85); margin-top:var(--tight); } .nav{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(14px,1.2vw,22px); width:min(100%,1080px); } .nav a{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(19px,1.45vw,26px); letter-spacing:.13em; text-transform:uppercase; text-decoration:none; text-wrap:balance; color:var(--ink); background:var(--glass); border:3px solid var(--edge); border-radius:999px; min-height:var(--btn-h); padding:.7em 1.2em; backdrop-filter:blur(8px); box-shadow:var(--lift); } .nav a:hover,.nav a:focus-visible{background:var(--pink); color:var(--white); border-color:var(--pink)} /* ══ THE HALL — the rhythm lives here and NOWHERE else ════════════════ Every direct child is a block. One gap between all of them. A label dropped between two cards is therefore exactly halfway by construction. */ .hall{ display:flex; flex-direction:column; align-items:center; gap:var(--rhythm); max-width:var(--shell); margin:0 auto; padding:var(--rhythm) var(--gutter); } .hall > *{width:100%; margin:0} /* the ONE place a smaller gap is allowed: a character and her own card */ .pair{display:flex; flex-direction:column; align-items:center; gap:var(--guide-gap)} /* ══ TYPE ═════════════════════════════════════════════════════════════ */ h1,h2,h3{font-family:'Playfair Display',Georgia,serif; text-transform:uppercase; margin:0; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0} h1,h2.section{ font-weight:900; line-height:1.06; letter-spacing:.005em; color:var(--ink); text-shadow:var(--lift-type); text-align:center; text-wrap:balance; overflow-wrap:break-word; } h1{font-size:var(--h1)} h2.section{font-size:var(--h2)} .lede{ font-size:var(--copy); line-height:1.55; color:var(--ink); text-align:center; text-transform:uppercase; letter-spacing:.04em; font-weight:700; /* the lede is a short SIGNATURE STATEMENT, not a paragraph — it stays ALL CAPS per the typography lock. Sentence case beside the sparkles read wrong. */ background:var(--glass); border:2px solid var(--edge); border-radius:var(--radius); padding:var(--tight) var(--pad); margin:0 auto; width:max-content; max-width:min(100%,72ch); /* hugs its own line, so a short lede is a snug plate and a long one still fits */ backdrop-filter:blur(10px); box-shadow:var(--lift); } /* the sparkle is the ONE yellow on the page — Allie 2026-08-08, a named exception to the three-colour lock. Emoji, so it carries its own colour. */ .spark{ font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:.86em; line-height:1; vertical-align:.04em; -webkit-text-stroke:0; text-shadow:none; } .anthem{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:var(--h2); line-height:1.16; text-transform:uppercase; color:var(--ink); text-shadow:var(--lift-type); text-align:center; max-width:38ch; margin:0 auto; text-wrap:balance; hyphens:none; word-break:keep-all; } /* the sparkle is the ONE yellow on the page — Allie 2026-08-08, a named exception to the three-colour lock. Emoji, so it carries its own colour. */ .spark{ font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:.86em; line-height:1; vertical-align:.04em; -webkit-text-stroke:0; text-shadow:none; } /* ══ ONE PILL COMPONENT — every tag on the page is this and only this ══ */ .pill{ display:inline-flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; font-weight:700; font-size:var(--cap); letter-spacing:.2em; line-height:1.25; text-transform:uppercase; text-align:center; color:var(--white); background:var(--pink); border:3px solid var(--pink); border-radius:999px; min-height:var(--pill-h); padding:0 var(--pill-px); width:max-content; max-width:100%; margin-left:auto; margin-right:auto; box-shadow:var(--lift); } /* a price is the same pill with a fixed width, so all prices match exactly */ .price{width:clamp(112px,8vw,150px)} /* FREE lead-magnet label — louder than a name tag or a $3 chip. Must read through the gem field. Name pills stay the regular size. */ .pill.free, .hall > .pill:has(+ .gift){ font-size:clamp(28px,3.4vw,52px); font-weight:900; letter-spacing:.16em; min-height:clamp(76px,7vw,112px); min-width:clamp(220px,24vw,340px); padding:0 clamp(40px,4.4vw,80px); } /* ══ ONE BUTTON COMPONENT ═════════════════════════════════════════════ */ .act{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:'DM Sans',sans-serif; font-weight:700; font-size:var(--cap); letter-spacing:.13em; line-height:1.25; text-transform:uppercase; text-decoration:none; text-align:center; color:var(--white); background:var(--pink); border:3px solid var(--pink); border-radius:999px; min-height:var(--btn-h); padding:.5em clamp(18px,1.5vw,28px); width:100%; /* ⚠ THIS WAS `white-space:nowrap`, AND IT WAS CUTTING THE LABELS OFF. nowrap was chosen so a button "never breaks into a blob". But a button is width:100% of a fixed-width card — it cannot grow sideways — so when the label is wider than the card, nowrap does not widen anything. It just overflows a rounded, clipping box, silently: 390px "SEND ME THE FREE RI AUDIT NOW" -> "END ME THE FREE RI AUDIT N" 390px "SEND ME A LITTLE ROYAL HOPE" -> clipped both ends 1920px "SEE WHAT IS INSIDE" -> the heart icon cut in half Measured 2026-08-14 at 8 widths on all 8 pages: 40 clipped elements, the worst of them the FREE lead-magnet CTA on a phone. Nothing threw, nothing overflowed the page, and the collision gate passed all of it. A long label now buys a TALLER button, never smaller type and never a cut-off word — the same rule the nameplates already follow. Words stay whole (overflow-wrap stays at its default), so this can never produce a mid-word break; buttons in an .acts row still match height, because that grid stretches its items. */ white-space:normal; box-shadow:var(--lift); transition:transform .16s ease, background .16s ease, color .16s ease; } .act:hover,.act:focus-visible{transform:translateY(-3px)} .act.ghost{background:var(--white); color:var(--ink); border-color:var(--pink)} .act.ghost:hover,.act.ghost:focus-visible{background:var(--pink); color:var(--white)} .act i{font-style:normal; font-size:.9em} /* a row of buttons: equal columns, so two CTAs can never differ in width */ .acts{ display:grid; gap:clamp(14px,1.2vw,22px); grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:min(100%,var(--measure)); margin:0 auto; } .acts.one{grid-auto-flow:row; width:min(100%,520px)} /* ══ ONE CARD ═════════════════════════════════════════════════════════ */ .card{ background:var(--card); color:var(--ink); text-align:center; border:2px solid var(--edge); border-radius:var(--radius); padding:var(--pad) var(--pad-x); box-shadow:var(--lift); display:flex; flex-direction:column; align-items:center; gap:var(--tight); } /* FIXED 3-LINE-HEIGHT TITLE CONTAINER — 2026-08-26, storewide consistency pass. Every card title, in every room, reserves the exact same box height: three lines at this line-height, never more. A short title (e.g. "SOMATIC RESET") simply leaves blank space below it inside that same box — it is never forced to fill three lines, never given nonsense line breaks, and the font never shrinks to cram a long title into fewer lines. If a title's natural wrap at the current card width would need a fourth line, that is a card-width/ font-size problem to fix globally (see --shell), never a per-title hack. */ .card h3{font-size:var(--h3); line-height:1.14; color:var(--ink); text-wrap:balance; min-height:calc(3 * 1.14em)} /* PRODUCT-CARD TITLE BLEED — 2026-08-27. Some product names (PREGNANCY ANNOUNCEMENT TEMPLATES, DIMINISHED OVARIAN RESERVE DASHBOARD...) do not fit the same number of lines as their neighbors within the card's own padded measure — one shelf ended up with a 1-line, a 2-line and a 3-line title side by side. Every product title in a shelf now bleeds into the card's side padding, the same technique already used for the room cards on the store page, so every title in a room has the same width to work with and an intentional
(see each room's markup) can put every title at the same visible line count. */ .shelf .item.card h3{ width:calc(100% + 2 * var(--pad-x)); margin-inline:calc(-1 * var(--pad-x)); } .card p{margin:0 auto; max-width:var(--measure)} .gift .card{border-color:var(--edge-hi); border-width:3px} .bump .card{border-style:dashed; border-width:3px; border-color:var(--edge-hi)} /* a room with two characters stands them side by side, both on the same baseline and both at the shared character height */ .faces{display:flex; align-items:flex-end; justify-content:center; gap:var(--card-gap); width:100%} /* ══ THE CHARACTER — ABOVE her card, on the same centre axis ══════════ */ /* Characters are sized by HEIGHT, never width. Every master PNG is 900px tall, but their widths differ wildly — a star is wide and short, a pineapple is tall and narrow. Sizing by width made Bubbles render 248px tall and Miss Data-Riffic 941px. Height keeps all seven the same visual size. Pinned so Penelope is unchanged from the frozen master. */ .face{ display:block; height:clamp(300px,42.1vw,760px); width:auto; max-width:min(100%,60vw); margin:0 auto; filter:drop-shadow(0 26px 40px rgba(0,0,0,.34)); } /* ══ THE SHELF — identical reserved areas, no per-card margins ════════ Four subgrid rows: TITLE · PRICE · DESCRIPTION · BUTTON. Every card reserves the same height for each row, so a title that wraps to three lines cannot push its price pill off the shared baseline. */ .shelf{ display:grid; gap:var(--card-gap); justify-content:center; /* DOUBLE columns, each card spanning two. That is what lets a leftover row of one or two cards CENTRE itself — three equal columns cannot do it. Column count is explicit per breakpoint so the centring rules stay predictable. */ grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:min-content min-content 1fr min-content; } /* a room with fewer products than columns centres them instead of leaving a lone card stranded in column one. The count comes from the data, not by hand. */ /* the home shelf carries a guide portrait above each room name, so it has a fifth subgrid row. Every room card shows its character — the entrance to the kingdom must look like the kingdom. */ .shelf.guides{grid-template-rows:min-content min-content min-content 1fr min-content} .shelf.guides > .item{grid-row:span 5} /* ⚠ RESTORED 2026-08-09 to the APPROVED storefront value. Approved (`_BACKUPS/2026-08-09/CLOUDFLARE — index.html (OLD SINGLE-FILE, PRE-REBUILD)`) sized the guides from `--face-h: clamp(300px,29vw,470px)` — measured 418px tall at 1440 across all seven. Today's rebuild replaced it with clamp(190px,13vw,260px) AND moved the room cards from two across at 660px to three across at 401px, which caps Bubbles (the widest master, aspect 1.29) at 249px inside a 321px content box. Both had to come back or the height alone would clamp her and break the row. Restoration, not design. */ .shelf.guides .face{height:clamp(300px,29vw,470px); max-width:100%; align-self:end} /* two guides keep the door means two pills, side by side and identical */ .kickers{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.2vw,22px)} .kickers .pill{width:clamp(240px,20vw,340px)} /* a card may name more than one guide — the pills stack, still one component */ /* EVERY name pill is the SAME BOX — one width, one height, no exceptions. The type shrinks to fit the longest name rather than the box growing. */ /* a full grid whose LAST row holds a single card centres it rather than stranding it in column one */ /* a leftover last row centres itself: one card → columns 3–4, two cards → columns 2–3 and 4–5 */ .item{ display:grid; grid-row:span 4; grid-column:span 2; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); /* the card's inner column is the FULL content width — never sized by whichever title happens to be longest */ gap:var(--tight); height:100%; transition:transform .18s ease, box-shadow .18s ease; } .item:hover{transform:translateY(-6px); box-shadow:var(--lift-hi)} .item > *{justify-self:center; align-self:start} .item .act{align-self:end} /* ══ FOOT ═════════════════════════════════════════════════════════════ */ .foot{ position:relative; z-index:2; background:none; /* no band, no veil — the sky runs to the bottom */ padding:var(--rhythm) var(--gutter); text-align:center; } .foot p{ margin:0 auto var(--tight); max-width:var(--measure); font-size:var(--cap); line-height:1.6; letter-spacing:.06em; color:var(--ink); text-shadow:var(--lift-type); text-transform:uppercase; } .foot p:last-child{margin-bottom:0} a:focus-visible{outline:4px solid var(--white); outline-offset:4px} /* ══ TABLET ═══════════════════════════════════════════════════════════ */ @media (max-width:1080px){ /* the 6-column base makes each card span 2 — reset that once the grid narrows, or a card swallows a whole row */ .face{height:clamp(280px,34vw,520px); max-width:76%} } /* ══ PHONE ════════════════════════════════════════════════════════════ */ @media (max-width:760px){ :root{--radius:22px; --wordmark:11.2vw} /* the 52px floor is wider than a 390px screen */ /* ⚠ --h1 HAS THE SAME FLOOR BUG THE WORDMARK HAD, AND IT BIT. --h1 is clamp(46px,6vw,110px). At 390 the 6vw term is 23px, so the 46px FLOOR wins — and "EGGXCELLENCE'S" at 46px is 420px wide inside a 354px box. It does not overflow and it does not error: CSS just chops it, and PRINCESS EGGXCELLENCE'S CASTLE renders as "PRINCESS / EGGXCELLENC / E'S CASTLE" on a phone. Her flagship character's name, split mid-word, silently, on every phone. Measured 2026-08-14 at 430/390/360 — the only mid-word break in the whole storefront. 9.6vw is set from the longest word in the catalog: it keeps EGGXCELLENCE'S whole down to 320px and stays capped at the full 46px on every screen 479px and wider, so no other room title gets smaller than it is today. Verified on all 7 rooms. If a longer room title is ever added, re-run tools/find-broken-words.py. */ :root{--h1:clamp(30px,9.6vw,46px)} .nav{grid-auto-flow:row; grid-auto-columns:auto; width:100%} .pill{white-space:normal; padding:.7em var(--pill-px)} .face{height:clamp(230px,52vw,380px); max-width:86%} .mark small{white-space:normal; font-size:clamp(15px,4vw,22px); letter-spacing:.12em} /* on a phone a long name may wrap rather than run off the pill */ .item{grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column} .item .act{margin-top:auto} .anthem{font-size:clamp(24px,6.6vw,32px)} .acts{grid-auto-flow:row} } @media (prefers-reduced-motion:reduce){ .act,.item,.nav a{transition:none} .gem{animation:none} } /* ══ GEM FIELD · hope-diamond-hall — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · hope-diamond-hall ══ */ /* ══ GEM FIELD · castle — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · castle ══ */ /* ══ GEM FIELD · library — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · library ══ */ /* ══ GEM FIELD · ballroom — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · ballroom ══ */ /* ══ GEM FIELD · sanctuary — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · sanctuary ══ */ /* ══ GEM FIELD · manor — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · manor ══ */ /* ══ GEM FIELD · meadow — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · meadow ══ */ /* ══ GEM FIELD · index — GENERATED BY tools/regen-gems.py — DO NOT HAND-EDIT ══ Six breakpoint bands. Each set is generated in normalised page space against the UNION of content boxes measured at both ends of its band, so a stone stays clear of content across the whole range. Re-run the tool after ANY layout change or stones will land on top of content. */ @media (max-width:1099px){ .gemfield{display:none} } /* ══ END GEM FIELD · index ══ */ /* ══ NAME PILLS — ONE RULE, LAST WORD ═════════════════════════════════ Every guide pill is the full width of its card, so pills in a row are always identical. It wraps rather than overflowing, and keeps one minimum height so a one-line and a two-line pill still read as the same component. Declared last so nothing above can contradict it. */ .names{display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%} .names .pill{ width:100%; max-width:100%; min-height:var(--pill-h); height:auto; padding:.55em 14px; letter-spacing:.06em; line-height:1.25; font-size:clamp(13px,.95vw,16.5px); white-space:normal; text-align:center; } /* ══ LEFTOVER ROWS CENTRE THEMSELVES ══════════════════════════════════ 3 across (6 cols): a lone last card sits in cols 3-4; a last pair starts at col 2 so it occupies 2-3 and 4-5. 2 across (4 cols): a lone last card sits in cols 2-3. 1 across: nothing to centre. ⚠ CORRECTED 2026-08-09 — the ladder must be MUTUALLY EXCLUSIVE. These centring rules were previously declared unscoped, outside any media query. A media query adds NO specificity, so `.shelf > .item{grid-column: span 2}` (0,2,0) inside the narrow blocks could never override `.shelf > .item:last-child:nth-child(3n+1)` (0,4,0) declared above it. Below 828px the one-column grid therefore kept `grid-column:3/span 2`, Chrome created implicit columns to satisfy it, and the LAST card of every shelf rendered at half width, shoved right off the centre axis, pushing the page into horizontal overflow on a phone. It hit all eight pages — index card 7, hall 3, castle 9, library 9, sanctuary 4+5, manor 1, ballroom 1, meadow 1 — and the gold master failed its own gate at 390px. The fix is range-bounding each rung so no two rungs are ever live at the same width. Nothing is weakened and no !important is used: at 828px and above the computed layout is byte-identical to before. */ @media (min-width:1228px){ .shelf > .item:last-child:nth-child(3n+1){grid-column:3/span 2} .shelf > .item:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2} /* THE HOME SHELF IS TWO ACROSS — restored to the approved storefront, which ran the seven room cards 2/2/2/1 at 660px. Only .shelf.guides widens; a room's product shelf stays three across. These selectors carry one more class than the generic rules above, so they win without !important and the breakpoint ladder stays mutually exclusive. */ .shelf.guides{grid-template-columns:repeat(4,minmax(0,1fr))} .shelf.guides > .item{grid-column:span 2} .shelf.guides > .item:last-child:nth-child(3n+1){grid-column:auto/span 2} .shelf.guides > .item:nth-last-child(2):nth-child(3n+1){grid-column:auto/span 2} .shelf.guides > .item:last-child:nth-child(2n+1){grid-column:2/span 2} } @media (min-width:828px) and (max-width:1227px){ .shelf{grid-template-columns:repeat(4,minmax(0,1fr))} .shelf > .item{grid-column:span 2} .shelf > .item:last-child:nth-child(2n+1){grid-column:2/span 2} } @media (max-width:827px){ .shelf{grid-template-columns:repeat(2,minmax(0,1fr))} .shelf > .item{grid-column:span 2} } /* ══ ROOM SCALE RETROFIT — 2026-09-07 ════════════════════════════════ Owner lock: enlarge ROOM pages only. Storefront `.room-index` is excluded. Sales pages are the character-width reference and are not edited. Extracted sales rule from sales/_gold-master.css: .hero-face{width:min(468px,83vw);height:auto} .hero-face[src$="bubbles.png"]{width:min(980px,94vw)} .hero-face[src$="olivia.png"]{width:min(980px,94vw)} .hero-face[src$="princess.png"]{width:min(980px,94vw)} .hero-face[src$="sparkles.png"]{width:min(980px,94vw)} .hero-face[src$="barnaboo.png"]{width:min(853px,90vw)} .hero-face[src$="penelope.png"]{width:min(615px,86vw)} .hero-face[src$="betty.png"]{width:min(590px,94vw)} Room `.face` copies those width rules exactly. height:auto. ══ */ /* ══ ROOM COMPONENT SYSTEM — geometry is NOT content-driven ═══════════ Measured at 1440 from the approved Olivia room render, then sized so the longest label of each type still fits. One spec per component. Individual rooms may not override these. */ body[class^="room-"]:not(.room-index){ --plate:min(94vw,980px); --name-w:var(--plate); --name-h:99px; --name-size:clamp(32px,3.4vw,56px); --name-pad:22px 52px; --name-track:.08em; --name-lh:1; --free-w:340px; --free-h:101px; --price-w:144px; --price-h:79px; --price-size:36px; --cta-w:min(888px,calc(var(--plate) - 88px)); --cta-h:93px; --cta-size:clamp(26px,2.4vw,40px); --cta-pad:22px 56px; --cta-track:.13em; --back-w:606px; --back-h:93px; --nav-h:94px; --nav-size:28px; /* Semantic hall spacing. --rhythm is NOT the cluster gap. --space-guide is Olivia's measured name-pill → visible-hat gap (207.5 at 1440). Name → art, art → FREE, FREE → offer all use it. */ --space-header-title:var(--rhythm); /* Nav row sits in the exact middle of header-card → room-title. Equal gutters. Sum equals masthead-gap + header-title, so the mark and the h1 do not move. */ --space-nav-gutter:calc((var(--masthead-gap) + var(--space-header-title)) / 2); --space-title-tagline:var(--rhythm); --space-tagline-name:var(--rhythm); --space-guide:calc(var(--tight) + 0.16173 * min(980px, calc(100vw - var(--face-safe)))); --space-faces:var(--space-guide); --space-offer-collection:var(--rhythm); --space-collection-products:var(--rhythm); --space-product:28px; --space-last-back:var(--rhythm); --space-back-footer:var(--rhythm); --face-safe:80px; } body[class^="room-"]:not(.room-index) .hall{ max-width:none; width:100%; gap:0; padding-top:var(--space-nav-gutter); padding-bottom:var(--space-back-footer); padding-inline:16px; } body[class^="room-"]:not(.room-index) .hall > *{ width:auto; max-width:100%; } body[class^="room-"]:not(.room-index) .card h3{min-height:0} body[class^="room-"]:not(.room-index) .card p{ max-width:none; width:100%; } /* 1. Character = sales-page rendered width, contained in the stage. Keep the locked giant widths. Never let a vw cap drive art into the viewport edge. 32px safe inset on both sides. The PNG canvas is shown in full (contain + height:auto). Source-file crops cannot be invented. */ body[class^="room-"]:not(.room-index) .pair, body[class^="room-"]:not(.room-index) .faces, body[class^="room-"]:not(.room-index) .face{ overflow:visible; } body[class^="room-"]:not(.room-index) .face{ display:block; width:min(980px, calc(100vw - var(--face-safe))); height:auto; max-width:min(980px, calc(100vw - var(--face-safe))); object-fit:contain; margin:0 auto; flex-shrink:0; --face-optical-x:0%; --face-scale:1; --face-top-frac:0; --face-bottom-frac:0; transform:translateX(var(--face-optical-x)) scale(var(--face-scale)); } /* Visible-art fractions (alpha box / PNG width). Pills do not move. */ body[class^="room-"]:not(.room-index) .face[src*="bubbles.png"]{--face-optical-x:0.034%; --face-scale:1.22; --face-top-frac:0.03667; --face-bottom-frac:0.18004} body[class^="room-"]:not(.room-index) .face[src*="olivia.png"]{--face-optical-x:-0.361%; --face-top-frac:0.16173; --face-bottom-frac:0.16462} body[class^="room-"]:not(.room-index) .face[src*="princess.png"]{--face-optical-x:2.264%; --face-top-frac:0.11622; --face-bottom-frac:0.17500} body[class^="room-"]:not(.room-index) .face[src*="sparkles.png"]{--face-optical-x:0.980%; --face-top-frac:0.13446; --face-bottom-frac:0.15405} body[class^="room-"]:not(.room-index) .face[src*="barnaboo.png"]{--face-optical-x:-0.989%; --face-top-frac:0.23734; --face-bottom-frac:0.28244} body[class^="room-"]:not(.room-index) .face[src*="penelope.png"]{--face-optical-x:0.346%; --face-top-frac:0.12289; --face-bottom-frac:0.16359} body[class^="room-"]:not(.room-index) .face[src*="betty.png"]{--face-optical-x:1.920%; --face-top-frac:0.11444; --face-bottom-frac:0.14593} body[class^="room-"]:not(.room-index) .face[src*="datariffic.png"]{--face-optical-x:-1.700%; --face-top-frac:0.16169; --face-bottom-frac:0.26866} body[class^="room-"]:not(.room-index) .face[src*="fifi.png"]{--face-optical-x:0%; --face-top-frac:0; --face-bottom-frac:0.00586} /* Collapse transparent canvas so CSS gaps are visible-art gaps. Manor: every stacked face eats its own top and bottom slack. */ body[class^="room-"]:not(.room-index) .pair > .face, body[class^="room-"]:not(.room-index) .faces > .face{ margin-top:calc(-1 * var(--face-top-frac) * min(980px, calc(100vw - var(--face-safe)))); margin-bottom:calc(-1 * var(--face-bottom-frac) * min(980px, calc(100vw - var(--face-safe)))); } body[class^="room-"]:not(.room-index) .faces{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; width:min(980px, calc(100vw - var(--face-safe))); max-width:min(980px, calc(100vw - var(--face-safe))); gap:var(--space-faces); } /* 4. Contained creator header */ body[class^="room-"]:not(.room-index) .top{ max-width:none; padding-inline:16px; gap:var(--space-nav-gutter); } body[class^="room-"]:not(.room-index) .mark{ width:min(96vw,1800px); padding:24px 28px 32px; border-radius:28px; background:#fff; box-shadow:var(--lift); -webkit-text-stroke:0; paint-order:normal; text-shadow:none; font-size:clamp(52px,7.1vw,136px); line-height:.96; letter-spacing:-.01em; white-space:nowrap; text-wrap:nowrap; } body[class^="room-"]:not(.room-index) .mark small{ display:block; white-space:normal; text-wrap:pretty; font-size:clamp(26px,2.8vw,48px); line-height:1.15; letter-spacing:.08em; font-weight:800; text-shadow:none; margin-top:32px; } /* 5. Top navigation pills — one spec */ body[class^="room-"]:not(.room-index) .nav{ width:min(96vw,1400px); gap:18px; } body[class^="room-"]:not(.room-index) .nav a{ box-sizing:border-box; height:var(--nav-h); min-height:var(--nav-h); max-height:var(--nav-h); padding:18px 34px; font-size:var(--nav-size); font-weight:800; letter-spacing:.08em; background:#fff; flex-shrink:0; } /* 6. Character-name pill — ONE box. Short names do not shrink it. Long names wrap inside it. Peer pills (Manor) are identical. */ body[class^="room-"]:not(.room-index) .hall > .pill:not(.free):not(.price), body[class^="room-"]:not(.room-index) .kickers .pill{ box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:var(--name-w); min-width:var(--name-w); max-width:var(--name-w); height:var(--name-h); min-height:var(--name-h); max-height:var(--name-h); padding:var(--name-pad); border-radius:999px; font-size:var(--name-size); font-weight:900; line-height:var(--name-lh); letter-spacing:var(--name-track); text-align:center; white-space:nowrap; flex-shrink:0; } body[class^="room-"]:not(.room-index) .kickers{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; width:var(--plate); gap:18px; } /* Semantic hall stack. gap is 0; each relationship has its own token. */ body[class^="room-"]:not(.room-index) .hall > h1{margin-top:0} body[class^="room-"]:not(.room-index) .hall > .lede{margin-top:var(--space-title-tagline)} body[class^="room-"]:not(.room-index) .hall > .pill:not(.free):not(.price), body[class^="room-"]:not(.room-index) .hall > .kickers{margin-top:var(--space-tagline-name)} body[class^="room-"]:not(.room-index) .hall > .pair{margin-top:var(--space-guide)} body[class^="room-"]:not(.room-index) .hall > .pill.free{margin-top:var(--space-guide)} body[class^="room-"]:not(.room-index) .hall > .gift{margin-top:var(--space-guide)} body[class^="room-"]:not(.room-index) .hall > h2.section{margin-top:var(--space-offer-collection)} body[class^="room-"]:not(.room-index) .hall > .shelf{margin-top:var(--space-collection-products)} body[class^="room-"]:not(.room-index) .hall > .acts{margin-top:var(--space-last-back)} /* 7. Room H1 — white title card hugs the words, not the sky */ body[class^="room-"]:not(.room-index) .hall > h1{ width:max-content; max-width:min(90vw,1100px); padding:30px 48px; border-radius:32px; background:#fff; box-shadow:var(--lift); font-size:clamp(44px,6.2vw,100px); font-weight:900; line-height:1.0; text-align:center; text-shadow:none; text-wrap:unset; overflow-wrap:normal; } /* 8. Tagline + anthem on white */ body[class^="room-"]:not(.room-index) .hall > .lede{ width:fit-content; max-width:min(80vw,1100px); padding:22px 44px; border-radius:999px; background:#fff; border:2px solid var(--edge); backdrop-filter:none; -webkit-backdrop-filter:none; font-size:clamp(22px,3.2vw,48px); line-height:1.15; letter-spacing:.03em; } body[class^="room-"]:not(.room-index) .hall > .anthem{ width:min(80vw,1100px); max-width:1100px; padding:26px 48px; border-radius:32px; background:#fff; box-shadow:var(--lift); font-size:clamp(22px,2.8vw,46px); line-height:1.2; text-shadow:none; } /* 9. Major section headings on white */ body[class^="room-"]:not(.room-index) h2.section{ width:auto; max-width:min(96vw,1700px); padding:22px 44px; border-radius:32px; background:#fff; box-shadow:var(--lift); font-size:clamp(38px,4.8vw,76px); font-weight:900; line-height:1.05; text-shadow:none; } /* 2 + 10. Main / feature white cards — plate in the sky, not a wall. Gift/bump is 1000 so the 888 CTA sits in equal 56px side padding. Pair (character only) stays on the 980 name-pill plate. */ body[class^="room-"]:not(.room-index) .gift, body[class^="room-"]:not(.room-index) .bump{ width:min(94vw,1000px); margin-inline:auto; } body[class^="room-"]:not(.room-index) .pair{ width:min(94vw,980px); margin-inline:auto; } body[class^="room-"]:not(.room-index) .gift .card, body[class^="room-"]:not(.room-index) .bump .card, body[class^="room-"]:not(.room-index) .pair .card{ width:100%; padding:40px 56px; border-radius:32px; gap:16px; } body[class^="room-"]:not(.room-index) .gift .card h3, body[class^="room-"]:not(.room-index) .bump .card h3, body[class^="room-"]:not(.room-index) .pair .card h3{ font-size:clamp(40px,4.4vw,72px); font-weight:900; line-height:1.05; min-height:0; width:100%; margin-inline:0; text-align:center; } body[class^="room-"]:not(.room-index) .gift .card p, body[class^="room-"]:not(.room-index) .bump .card p, body[class^="room-"]:not(.room-index) .pair .card p{ font-size:clamp(22px,2.4vw,40px); line-height:1.35; max-width:none; width:100%; text-align:center; text-align-last:center; hyphens:none; } /* 3 + 11. Collection: one column, same plate as Olivia */ body[class^="room-"]:not(.room-index) .shelf, body[class^="room-"]:not(.room-index) .shelf.n2{ width:min(94vw,980px); margin-inline:auto; display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:var(--space-product); justify-content:center; } body[class^="room-"]:not(.room-index) .shelf > .item, body[class^="room-"]:not(.room-index) .shelf > .item.card{ display:flex; flex-direction:column; grid-column:auto; grid-row:auto; min-width:0; width:100%; padding:36px 44px; border-radius:32px; gap:16px; } body[class^="room-"]:not(.room-index) .shelf .item.card h3{ font-size:clamp(36px,3.6vw,68px); font-weight:900; line-height:1.08; min-height:0; width:100%; margin-inline:0; text-align:center; } body[class^="room-"]:not(.room-index) .shelf .item.card p{ font-size:clamp(22px,2.3vw,38px); line-height:1.4; max-width:none; width:100%; text-align:left; text-align-last:left; text-justify:auto; hyphens:none; } /* Description → pink CTA only. Card gap stays 16px for every other pair. 16px gap + 8px = 24px. Do not change CTA or card geometry. */ body[class^="room-"]:not(.room-index) .shelf .item.card > p + .act, body[class^="room-"]:not(.room-index) .gift .card > p + .acts, body[class^="room-"]:not(.room-index) .bump .card > p + .acts{ margin-top:8px; } /* 12a. FREE pill — one spec. Not a name pill. */ body[class^="room-"]:not(.room-index) .pill.free, body[class^="room-"]:not(.room-index) .hall > .pill:has(+ .gift){ box-sizing:border-box; width:var(--free-w); min-width:var(--free-w); max-width:var(--free-w); height:var(--free-h); min-height:var(--free-h); max-height:var(--free-h); padding:0 80px; font-size:clamp(28px,3.4vw,52px); font-weight:900; letter-spacing:.16em; flex-shrink:0; } /* 12. Price pills — one chip. $3 and $70 occupy the same box. */ body[class^="room-"]:not(.room-index) .pill.price{ box-sizing:border-box; width:var(--price-w); min-width:var(--price-w); max-width:var(--price-w); height:var(--price-h); min-height:var(--price-h); max-height:var(--price-h); padding:14px 30px; border-radius:999px; font-size:var(--price-size); font-weight:900; letter-spacing:.06em; flex-shrink:0; } /* 13. Major pink CTAs — one height / type / padding / radius. Width fills the card plate (888 at 1440). nowrap on desktop. Long labels do not get a taller pill. */ body[class^="room-"]:not(.room-index) .act:not(.ghost){ box-sizing:border-box; height:var(--cta-h); min-height:var(--cta-h); max-height:var(--cta-h); padding:var(--cta-pad); border-radius:999px; font-size:var(--cta-size); font-weight:900; letter-spacing:var(--cta-track); line-height:1.16; white-space:nowrap; flex-shrink:0; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1,"onum" 0; } body[class^="room-"]:not(.room-index) .gift .acts.one, body[class^="room-"]:not(.room-index) .bump .acts.one{ width:100%; max-width:100%; margin-inline:auto; } body[class^="room-"]:not(.room-index) .gift .act:not(.ghost), body[class^="room-"]:not(.room-index) .bump .act:not(.ghost), body[class^="room-"]:not(.room-index) .shelf .item .act:not(.ghost){ width:100%; min-width:0; max-width:100%; } /* Gift CTAs: keep the whole label inside the pink pill. .act is inline-flex + nowrap + fixed 93px. That paints "SEND ME THE POSTPARTUM SPREADSHEET" out the side of an 888-wide pill. Block layout lets the sentence wrap; the pill grows taller. */ body[class^="room-"]:not(.room-index) .gift .act:not(.ghost){ display:block; white-space:normal; height:auto; min-height:var(--cta-h); max-height:none; overflow:hidden; text-align:center; text-wrap:balance; } body[class^="room-"]:not(.room-index) .gift .act:not(.ghost) i{ display:inline; margin-inline-end:.4em; } body[class^="room-"]:not(.room-index) .hall > .acts .act:not(.ghost){ width:min(var(--cta-w),100%); min-width:0; } /* 14. Back to the Rooms — one desktop box. Siblings cannot stretch it. */ body[class^="room-"]:not(.room-index) .hall > .acts, body[class^="room-"]:not(.room-index) .hall > .acts.one{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:var(--plate); max-width:100%; grid-auto-flow:unset; grid-auto-columns:unset; } body[class^="room-"]:not(.room-index) .act.ghost{ box-sizing:border-box; width:var(--back-w); min-width:var(--back-w); max-width:var(--back-w); height:var(--back-h); min-height:var(--back-h); max-height:var(--back-h); padding:var(--cta-pad); border-radius:999px; font-size:var(--cta-size); font-weight:900; letter-spacing:var(--cta-track); line-height:1.16; white-space:nowrap; flex-shrink:0; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1,"onum" 0; } /* 15. Footer white card */ body[class^="room-"]:not(.room-index) .foot{ width:min(94vw,980px); margin-inline:auto; margin-bottom:36px; padding:36px 48px; border-radius:28px; background:#fff; box-shadow:var(--lift); } body[class^="room-"]:not(.room-index) .foot p{ font-size:22px; line-height:1.4; letter-spacing:.04em; text-shadow:none; max-width:none; } body[class^="room-"]:not(.room-index) .foot p:last-child{ font-size:20px; } @media (min-width:761px){ body[class^="room-"]:not(.room-index) .lede{font-size:clamp(28px,3.2vw,48px)} body[class^="room-"]:not(.room-index) .anthem{font-size:clamp(26px,2.8vw,46px)} body[class^="room-"]:not(.room-index) .gift .card h3, body[class^="room-"]:not(.room-index) .bump .card h3, body[class^="room-"]:not(.room-index) .pair .card h3{font-size:clamp(48px,4.4vw,72px)} body[class^="room-"]:not(.room-index) .gift .card p, body[class^="room-"]:not(.room-index) .bump .card p, body[class^="room-"]:not(.room-index) .pair .card p{font-size:clamp(28px,2.4vw,40px)} body[class^="room-"]:not(.room-index) .shelf .item.card h3{font-size:clamp(42px,3.6vw,68px)} body[class^="room-"]:not(.room-index) .shelf .item.card p{font-size:clamp(26px,2.3vw,38px)} } /* Collection stays one plate wide so the sky stays open. */ /* Beat the unscoped leftover-row / 3-across ladder on room pages. */ @media (min-width:1228px){ body[class^="room-"]:not(.room-index) .shelf > .item:last-child:nth-child(3n+1), body[class^="room-"]:not(.room-index) .shelf > .item:nth-last-child(2):nth-child(3n+1), body[class^="room-"]:not(.room-index) .shelf > .item:last-child:nth-child(2n+1){ grid-column:auto; } body[class^="room-"]:not(.room-index) .shelf > .item:last-child:nth-child(odd){ grid-column:1/-1; } } @media (min-width:828px) and (max-width:1227px){ body[class^="room-"]:not(.room-index) .shelf, body[class^="room-"]:not(.room-index) .shelf.n2{ grid-template-columns:1fr; } body[class^="room-"]:not(.room-index) .shelf > .item, body[class^="room-"]:not(.room-index) .shelf > .item:last-child:nth-child(2n+1){ grid-column:auto; } } @media (max-width:827px){ body[class^="room-"]:not(.room-index) .shelf, body[class^="room-"]:not(.room-index) .shelf.n2{ grid-template-columns:1fr; width:min(96%,1600px); } body[class^="room-"]:not(.room-index) .shelf > .item{ grid-column:auto; } } @media (max-width:760px){ body[class^="room-"]:not(.room-index) .mark{ width:min(96vw,1800px); padding:18px 16px 24px; font-size:clamp(36px,11vw,56px); white-space:normal; text-wrap:balance; } body[class^="room-"]:not(.room-index) .mark small{ font-size:clamp(18px,4.6vw,26px); margin-top:20px; } body[class^="room-"]:not(.room-index) .nav{width:100%} body[class^="room-"]:not(.room-index) .nav a{ padding:14px 20px; } body[class^="room-"]:not(.room-index){ --name-w:100%; --name-h:90px; --name-size:26px; --name-pad:16px 24px; --free-w:220px; --free-h:76px; --price-w:120px; --price-h:64px; --price-size:24px; --cta-w:100%; --cta-h:113px; --cta-size:20px; --cta-pad:16px 28px; --back-w:344px; --back-h:68px; --nav-h:68px; --nav-size:18px; } body[class^="room-"]:not(.room-index) .kickers{width:100%} body[class^="room-"]:not(.room-index) .hall > .pill:not(.free):not(.price), body[class^="room-"]:not(.room-index) .kickers .pill{ white-space:normal; } body[class^="room-"]:not(.room-index) h1{ width:min(94%,1300px); padding:22px 24px; font-size:40px; } body[class^="room-"]:not(.room-index) .lede{ font-size:18px; padding:16px 24px; border-radius:28px; } body[class^="room-"]:not(.room-index) .anthem{ font-size:18px; padding:18px 24px; } body[class^="room-"]:not(.room-index) h2.section{ font-size:34px; padding:16px 24px; } body[class^="room-"]:not(.room-index) .gift, body[class^="room-"]:not(.room-index) .bump{width:min(94vw,1000px)} body[class^="room-"]:not(.room-index) .pair{width:min(94vw,980px)} body[class^="room-"]:not(.room-index) .gift .card, body[class^="room-"]:not(.room-index) .bump .card, body[class^="room-"]:not(.room-index) .pair .card{padding:32px 24px} body[class^="room-"]:not(.room-index) .gift .card h3, body[class^="room-"]:not(.room-index) .bump .card h3, body[class^="room-"]:not(.room-index) .pair .card h3{font-size:34px} body[class^="room-"]:not(.room-index) .gift .card p, body[class^="room-"]:not(.room-index) .bump .card p, body[class^="room-"]:not(.room-index) .pair .card p{font-size:18px} body[class^="room-"]:not(.room-index) .shelf .item.card{padding:28px 24px} body[class^="room-"]:not(.room-index) .shelf .item.card h3{font-size:28px} body[class^="room-"]:not(.room-index) .shelf .item.card p{font-size:18px} body[class^="room-"]:not(.room-index) .act:not(.ghost){ white-space:normal; min-width:0; max-width:100%; } body[class^="room-"]:not(.room-index) .act.ghost{ max-width:min(var(--back-w),100%); min-width:0; width:min(var(--back-w),100%); } body[class^="room-"]:not(.room-index) .foot{ width:min(94%,1500px); padding:24px; } body[class^="room-"]:not(.room-index) .foot p{font-size:18px} body[class^="room-"]:not(.room-index) .foot p:last-child{font-size:18px} }