/* Bouncy Castle Man. Layout: persistent left rail + content column. Range shown as horizontal scroll shelves, one per category. Sticky action bar on mobile. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* overflow-x:hidden here is INSURANCE, not a fix. It stops a stray overflow becoming a sideways scroll, but it also silently CLIPS the offending content, which is how the bento grid ran 85px off every phone for weeks without ever producing a scrollbar to notice. Do not treat "no sideways scroll" as proof the layout fits: measure element rects against clientWidth instead, skipping anything inside a horizontal scroller. */ body{margin:0;overflow-x:hidden} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} /* 16px ON EVERY FORM CONTROL, AND DO NOT LOWER IT. iOS Safari zooms the whole page in whenever a focused input is under 16px. The zoom widens the layout viewport past the screen, so the page can then be dragged sideways, and it STAYS zoomed after the keyboard closes. That is the whole "it does not fit on mobile and it scrolls sideways" bug: it is not a layout overflow, which is why every static width sweep came back clean. 16px is Safari's threshold, not a design preference. 15.5px triggers it. This rule is last-resort insurance; the individual control rules below are all 16px too, and they out-specify this one. */ input,select,textarea{font-size:16px} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul{padding:0;list-style:none} :root{ /* ---- the category palette ---------------------------------------------- Every hire category owns a colour. It follows the category everywhere: its shelf, its cards, its no-photo panels, its page banner, its dot in the rail. Colour is information here, not decoration. --c the category colour, a FILL --ct the same category as TEXT on a light background --on-c what goes ON the fill All six now work as both fill and text, so --c and --ct match on every row. The pair is kept because the moment a light colour is added back the two diverge again, as amber did. */ --c-castle:#0056db; /* THE LOGO BLUE, sampled from the artwork white 6.26:1 */ --c-combi:#6d28d9; /* violet white 7.10:1 */ --c-obstacle:#047857; /* emerald white 5.48:1 */ --c-disco:#c81e6a; /* pink white 5.45:1 */ --c-sumo:#c2410c; /* orange white 5.18:1 */ --c-marquee:#0e7490; /* teal white 5.36:1 */ /* THE LOGO YELLOW, sampled from the artwork. Every call to action is this yellow with ink on it, on every page, so "the thing you press" is learnable at a glance. No category uses it, so it never collides. A yellow fill is only 1.53:1 against the page, so every yellow button carries a 2px ink border, which also echoes the heavy outline the artwork is drawn with. --accent-text is the same yellow taken down to a tone that works as small TEXT on a light ground, which the yellow itself cannot. */ --accent:#fec521; --accent-text:#8a6100; --accent-deep:#d9a200; /* Ink is the navy the artwork is outlined in, not a neutral black. */ --ink:#0b1a2e; --ink-70:#48566b; --ink-45:#54637b; --paper:#f8fbff; --paper-2:#eaf1fd; /* Light surfaces. Navy is not used for anything larger than a line of text except the contact band; the rail, the masthead and the footer are light, and the weight comes from the logo blue and yellow. */ --sky:#dbe9ff; --sky-line:#bcd4f8; --rail-bg:#ffffff; --rail-line:#dde8f8; --rail-hover:#eaf1fd; --line:#d8e5f7; --line-strong:#b9cdeb; --r:16px; --r-sm:12px; --r-pill:999px; --rail:286px; /* wide enough for the full wordmark beside the mark */ --gut:clamp(20px,3vw,52px); --step-0:clamp(16px,.3vw + 15px,17.5px); --step-1:clamp(19px,.6vw + 17px,22px); --step-2:clamp(24px,1.4vw + 20px,32px); --step-3:clamp(28px,2.6vw + 18px,44px); --step-4:clamp(36px,4vw + 16px,62px); --display:'Fredoka','Figtree',system-ui,sans-serif; --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --c:var(--accent-text); --ct:var(--accent-text); --on-c:#fff; } /* --ct is written out on every row rather than defaulting to var(--c). A custom property holding a var() is substituted where it is DECLARED, not where it is used, so the root value would leak into every category. */ [data-cat="castle"]{--c:var(--c-castle);--ct:var(--c-castle);--on-c:#fff} [data-cat="combi"]{--c:var(--c-combi);--ct:var(--c-combi);--on-c:#fff} [data-cat="obstacle"]{--c:var(--c-obstacle);--ct:var(--c-obstacle);--on-c:#fff} [data-cat="disco"]{--c:var(--c-disco);--ct:var(--c-disco);--on-c:#fff} [data-cat="sumo"]{--c:var(--c-sumo);--ct:var(--c-sumo);--on-c:#fff} [data-cat="marquee"]{--c:var(--c-marquee);--ct:var(--c-marquee);--on-c:#fff} body{font-family:var(--body);font-size:var(--step-0);line-height:1.55; color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased} h1,h2,h3,.display{font-family:var(--display);font-weight:600;line-height:1.06; letter-spacing:-.015em} h1{font-size:var(--step-4)} h2{font-size:var(--step-3);text-wrap:balance} h3{font-size:var(--step-1);line-height:1.18} /* ------------------------------------------------------------- the shell -- */ /* Persistent rail on the left, content column on the right. The rail is a real