/* hele.toys shared styles (site redesign, Sep 2026). Grid: 8 px atom; body leading is the vertical unit (32 desktop, 28 tablet, 28 mobile); 12 columns, gutter = one line of leading; running text capped near 60ch. Names follow the app's DesignSystem.swift (Surface, Ink, Stroke, Space) so site and app share a vocabulary. */ @view-transition { navigation: auto; } :root { color-scheme: dark; /* Surface */ --surface: #241A12; /* the ground everywhere */ --surface-deep: #1A130D; /* night sections */ --surface-raised: #2B2017; /* cards, shelves */ /* Ink (contrast on --surface: 13.3 / 8.7 / 5.2 : 1) */ --ink: #EDE2CE; --ink-2: #C9B79E; --ink-3: #A08B70; --brass: #D8B98A; --brass-hi: #EBD4A8; /* Stroke */ --stroke: #3A2B1E; /* Space: 8 px atom */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px; --s20: 160px; /* Grid */ --lead: 32px; /* body leading = vertical unit */ --gutter: var(--lead); --margin: 80px; --container: 1280px; --measure: 60ch; /* Radius (tighter inside, softer outside) */ --r-s: 8px; --r-m: 14px; --r-l: 20px; /* Motion: one curve, short durations; everything off under Reduce Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 200ms; --t-reveal: 500ms; --stagger: 60ms; /* Type (size / line-height on the unit) */ --display: 88px; --display-lh: 88px; --h2: 48px; --h2-lh: 56px; --h3: 22px; --h3-lh: 32px; --lead-size: 23px; --lead-lh: 40px; --body: 19px; --body-lh: 32px; --small: 15px; --small-lh: 24px; --micro: 13px; --micro-lh: 16px; --h1: 64px; --h1-lh: 72px; --section: var(--s20); } @media (max-width: 1080px) { :root { --margin: 48px; --lead: 28px; --gutter: 24px; --display: 64px; --display-lh: 64px; --h2: 38px; --h2-lh: 48px; --lead-size: 21px; --lead-lh: 32px; --body: 18px; --body-lh: 28px; --h1: 48px; --h1-lh: 56px; --section: var(--s16); } } @media (max-width: 720px) { :root { --margin: 24px; --gutter: 16px; --display: 44px; --display-lh: 48px; --h2: 30px; --h2-lh: 36px; --h3: 20px; --h3-lh: 28px; --lead-size: 19px; --lead-lh: 28px; --body: 17px; --body-lh: 28px; --h1: 36px; --h1-lh: 40px; --section: var(--s12); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--surface); } body { margin: 0; background: var(--surface); color: var(--ink); font: var(--body)/var(--body-lh) -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100svh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } /* footer sits at the bottom on short pages */ img, video, iframe { display: block; max-width: 100%; } a { color: var(--brass); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--brass-hi); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; } p { margin: 0; text-wrap: pretty; } h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; } .skip { position: absolute; left: var(--s2); top: -64px; z-index: 100; padding: var(--s1) var(--s2); background: var(--ink); color: var(--surface); border-radius: var(--r-s); } .skip:focus { top: var(--s2); } /* ---------- grid ---------- */ .wrap { max-width: calc(var(--container) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .section { padding-top: var(--section); } /* column spans (desktop); collapse rules below */ .c-1-5 { grid-column: 1 / span 5; } .c-1-6 { grid-column: 1 / span 6; } .c-1-9 { grid-column: 1 / span 9; } .c-1-12 { grid-column: 1 / -1; } .c-6-12 { grid-column: 6 / -1; } .c-7-12 { grid-column: 7 / -1; } .c-8-12 { grid-column: 8 / -1; } .c-5-12 { grid-column: 5 / -1; } .c-1-4 { grid-column: 1 / span 4; } @media (max-width: 860px) { .grid > [class*="c-"] { grid-column: 1 / -1; } } /* ---------- type ---------- */ .eyebrow { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-3); font-weight: 500; letter-spacing: 0.01em; } .display { font-size: var(--display); line-height: var(--display-lh); letter-spacing: -0.035em; font-weight: 600; } .h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: -0.025em; } .h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: -0.01em; } .lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--ink-2); letter-spacing: -0.005em; } .body { color: var(--ink-2); max-width: var(--measure); } .small { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-3); } .stack > * + * { margin-top: var(--s3); } .stack-s > * + * { margin-top: var(--s2); } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s3); border-radius: 999px; font: 600 var(--small)/1 inherit; font-family: inherit; background: var(--ink); color: var(--surface); transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { background: #fff; color: var(--surface); } .btn:active { transform: scale(0.97); } .btn-s { min-height: 32px; padding: 0 var(--s2); font-size: 14px; } /* one conversion unit, used at the close of every page that sells and once in the middle of the home page. A hairline and space rather than a panel: the site argues in editorial rules already (.steps, .facts), and a box would read as an advert on a page whose whole claim is restraint. */ .cta { border-top: 1px solid var(--stroke); padding-top: var(--s4); } .cta .h3 { display: block; } .cta .body { margin-top: var(--s2); max-width: var(--measure); } .cta .badge { margin-top: var(--s4); } .cta .small { margin-top: var(--s3); } .badge { display: inline-flex; line-height: 0; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .badge:hover { opacity: 0.88; } .badge:active { transform: scale(0.97); } .badge img { height: 48px; width: auto; } .more { font-weight: 500; } .more::after { content: "\2192"; display: inline-block; margin-left: 0.3em; transition: transform var(--t-fast) var(--ease); } .more:hover::after { transform: translateX(3px); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; view-transition-name: site-header; background: rgba(36, 26, 18, 0.8); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .site-header.is-stuck { border-bottom-color: var(--stroke); background: rgba(36, 26, 18, 0.92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--surface); } } .site-header nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 56px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 17px; } .brand:hover { color: var(--ink); } .brand img { width: 28px; height: 28px; border-radius: 7px; } .brand span { font-weight: 400; font-size: 13px; color: var(--ink-3); } .nav-links { display: flex; align-items: center; gap: var(--s4); font-size: 14px; } .nav-links a:not(.btn) { color: var(--ink-2); } .nav-links a:not(.btn):hover { color: var(--ink); } @media (max-width: 860px) { .nav-links a:not(.btn) { display: none; } .brand span { display: none; } } /* mobile menu (site.js builds it; the button only shows at 860 px and below) */ .menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; } .menu-btn span { position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease); } .menu-btn span { transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .menu-btn span:nth-child(1) { top: 15.25px; } .menu-btn span:nth-child(2) { top: 21.25px; } .menu-btn span:nth-child(3) { top: 27.25px; } .menu-open .menu-btn span:nth-child(1) { top: 21.25px; transform: rotate(45deg); } .menu-open .menu-btn span:nth-child(2) { opacity: 0; } .menu-open .menu-btn span:nth-child(3) { top: 21.25px; transform: rotate(-45deg); } .menu-btn:active { opacity: 0.6; } @media (max-width: 860px) { .menu-btn { display: inline-block; } .nav-links { gap: var(--s2); } } .menu-open, .menu-open body { overflow: hidden; } .menu-open .site-header { background: var(--surface-deep); border-bottom-color: var(--stroke); } .menu { position: fixed; inset: 0; z-index: 49; padding-top: 56px; background: var(--surface-deep); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity var(--t-fast) var(--ease); } .menu.is-open { opacity: 1; } .menu-inner { padding-top: var(--s4); padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--gutter); } .menu-group.is-big { grid-column: 1 / -1; padding-bottom: var(--s4); border-bottom: 1px solid var(--stroke); } .menu-head { margin: 0 0 var(--s1); font-size: var(--micro); line-height: var(--micro-lh); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .menu ul { list-style: none; margin: 0; padding: 0; } .menu a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 18px; line-height: 24px; letter-spacing: -0.005em; } .menu .is-big a { min-height: 52px; color: var(--ink); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.025em; } .menu a:hover, .menu a[aria-current="page"] { color: var(--ink); } .menu a[aria-current="page"] { color: var(--brass); } .menu-head, .menu li { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--i) * 22ms); } .menu.is-open .menu-head, .menu.is-open li { opacity: 1; transform: none; } .menu:not(.is-open) .menu-head, .menu:not(.is-open) li { transition-delay: 0ms; transition-duration: 120ms; } @media (prefers-reduced-motion: reduce) { .menu, .menu-head, .menu li, .menu-btn span { transition: none !important; } .menu-head, .menu li { transform: none; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; } .hero .grid { position: relative; min-height: min(calc(100svh - 56px), 880px); align-content: center; padding: var(--s12) 0; } .hero-copy > * + * { margin-top: var(--s3); } .hero-copy .lead { max-width: 30ch; } .hero-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s1); } @media (max-width: 860px) { .hero-media { position: relative; inset: auto; aspect-ratio: 1 / 1; margin: 0 calc(-1 * var(--margin)); } .hero-media img { object-position: 93% 50%; } .hero .grid { min-height: 0; padding: var(--s3) 0 0; } } /* ---------- craft (sticky captions beside tall close-ups) ---------- */ .craft-intro { align-items: end; row-gap: var(--s3); } .craft-list { margin-top: var(--s12); display: grid; row-gap: var(--s10); } .craft-row { align-items: start; margin: 0; } .craft-row figcaption { position: sticky; top: calc(50vh - 96px); align-self: start; padding-top: var(--s8); } .craft-row figcaption .num { font-size: var(--micro); line-height: var(--s3); color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .craft-row figcaption .h3 { margin-top: var(--s1); } .craft-row figcaption p { margin-top: var(--s2); color: var(--ink-2); max-width: 34ch; } .frame { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--surface-deep); aspect-ratio: 4 / 5; } .frame img { width: 100%; height: 100%; object-fit: cover; } .craft-row:nth-child(even) .frame-col { grid-column: 1 / span 6; grid-row: 1; } .craft-row:nth-child(even) figcaption { grid-column: 8 / -1; grid-row: 1; } .craft-row:nth-child(odd) .frame-col { grid-column: 7 / -1; grid-row: 1; } .craft-row:nth-child(odd) figcaption { grid-column: 1 / span 5; grid-row: 1; } @media (max-width: 860px) { .craft-list { row-gap: var(--s10); margin-top: var(--s8); } .craft-row .frame-col, .craft-row figcaption { grid-column: 1 / -1 !important; grid-row: auto !important; } .craft-row figcaption { position: static; padding-top: var(--s3); } } /* ---------- play (the live demo) ---------- */ .stage { position: relative; margin-top: var(--s8); height: min(80vh, 760px); overflow: hidden; container-type: size; border-radius: var(--r-l); background: radial-gradient(ellipse 60% 55% at 50% 52%, #2E2218 0%, var(--surface-deep) 72%); } .stage img { position: absolute; left: calc(50cqw - 322 * min(100cqh, 186.6472cqw) / 1000); top: calc(47cqh - 353.33 * min(100cqh, 186.6472cqw) / 1000); width: calc(644 * min(100cqh, 186.6472cqw) / 1000); height: auto; max-width: none; } .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity 450ms var(--ease); } .steps { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: step; } .steps li { border-top: 1px solid var(--stroke); padding-top: var(--s2); } .steps li .num { display: block; font-size: var(--micro); line-height: var(--s3); color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .steps li .h3 { display: block; margin-top: var(--s1); } .steps li p { margin-top: var(--s1); color: var(--ink-2); font-size: var(--small); line-height: var(--small-lh); } .steps-grid { row-gap: var(--s4); } .steps-grid li { grid-column: span 4; } @media (max-width: 860px) { .stage { height: min(120vw, 560px); margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); border-radius: 0; } .steps-grid li { grid-column: 1 / -1; } } /* ---------- night (Sleep) ---------- */ .night { padding-bottom: var(--section); } /* the Sleep render is dimmed on the page ground; a darker band here would box it */ .night .grid { align-items: center; row-gap: var(--s6); } .night .frame { background: var(--surface); } /* ---------- riders shelf ---------- */ .shelf { margin-top: var(--s6); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(168px, calc((min(100vw, 1440px) - 2 * var(--margin) - 4 * var(--s2)) / 5), 256px); /* five across inside the container */ gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); padding: 0 var(--margin) var(--s3); margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); scrollbar-width: thin; scrollbar-color: var(--stroke) transparent; overscroll-behavior-x: contain; } .shelf:focus-visible { outline-offset: -2px; } .rider { scroll-snap-align: start; margin: 0; border-radius: var(--r-l); background: linear-gradient(180deg, #33261B, var(--surface-raised) 60%); box-shadow: inset 0 1px 0 rgba(237, 226, 206, 0.06); aspect-ratio: 4 / 5; display: grid; grid-template-rows: 1fr auto; padding: var(--s2) var(--s2) var(--s2); transition: transform 300ms var(--ease); } .rider img { width: auto; height: 100%; max-height: 100%; justify-self: center; align-self: end; object-fit: contain; min-height: 0; filter: drop-shadow(0 12px 12px rgba(10, 6, 3, 0.45)); } .rider figcaption { margin-top: var(--s2); font-size: var(--small); line-height: var(--small-lh); color: var(--ink-2); text-align: center; } .rider figcaption small { display: block; font-size: var(--micro); line-height: var(--micro-lh); color: var(--ink-3); } @media (hover: hover) { .rider:hover { transform: translateY(-4px); } } .tunes { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); } .tunes li { border-top: 1px solid var(--stroke); padding: var(--s2) 0; color: var(--ink); } .tunes li small { display: block; font-size: var(--micro); line-height: var(--micro-lh); color: var(--ink-3); margin-top: 4px; } @media (max-width: 720px) { .tunes { grid-template-columns: 1fr 1fr; } .shelf { grid-auto-columns: 40vw; } } /* ---------- parents ---------- */ .facts { margin: 0; } .facts > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--stroke); padding: var(--s3) 0; } .facts > div:last-child { border-bottom: 1px solid var(--stroke); } .facts dt { grid-column: 1 / span 2; font-size: var(--small); line-height: var(--small-lh); color: var(--ink-3); padding-top: 4px; } .facts dd { grid-column: 3 / -1; margin: 0; color: var(--ink); } @media (max-width: 720px) { .facts > div { grid-template-columns: 1fr; row-gap: 4px; padding: var(--s2) 0; } .facts dt, .facts dd { grid-column: 1 / -1; } } /* ---------- maker note ---------- */ .maker { padding-bottom: var(--section); } .maker .h2 { font-weight: 500; color: var(--ink); } .maker .h2 em { font-style: normal; color: var(--brass); } /* the home note signs the work, so the face is a byline; /made-by carries the real portrait */ .byline-avatar { float: left; width: 56px; height: 56px; border-radius: 50%; margin: 3px var(--s2) 2px 0; } @media (max-width: 860px) { .byline-avatar { float: none; display: block; margin: 0 0 var(--s2); } } /* a narrow measure wraps only three lines round it, then steps back to full width */ /* contained, not a cut-out: the dark polo disappeared into the page ground. Round, to match the byline on the home page; the asset is square so 50% gives a circle and not an ellipse. */ .maker-portrait { display: block; width: 100%; max-width: 200px; height: auto; border-radius: 50%; } @media (max-width: 1080px) { .maker-portrait { max-width: 120px; } } /* ---------- inner pages ---------- */ .page-head { padding: var(--s12) 0 0; } .nav-links a[aria-current="page"], .site-footer a[aria-current="page"] { color: var(--ink); } /* ---------- packs: three across on the 12 columns (4 each), two on tablet, one on phones ---------- */ .packs { margin-top: var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--gutter); } @media (max-width: 1080px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .packs { grid-template-columns: 1fr; gap: var(--s5); } .pack-shot { aspect-ratio: 16 / 9; } } .pack { margin: 0; display: grid; grid-template-rows: auto 1fr; } .pack-shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, #3A2B1E 0%, var(--surface-raised) 70%); box-shadow: inset 0 1px 0 rgba(237, 226, 206, 0.06); display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--s3) 14%; transition: transform 300ms var(--ease); } .pack-shot::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 11%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10, 6, 3, 0.55), transparent 70%); z-index: 0; } .pack-shot img { position: relative; z-index: 1; width: 25%; height: auto; max-height: 76%; object-fit: contain; object-position: center bottom; margin: 0 -2.5%; filter: drop-shadow(0 8px 8px rgba(10, 6, 3, 0.4)); } .pack-shot.riders-3 img { width: 29%; } @media (hover: hover) { .pack:hover .pack-shot { transform: translateY(-4px); } } /* tune packs: the paper tune card a music box carries, set in the app's type */ .pack-shot.tune-shot { align-items: center; padding: var(--s3); } .pack-shot.tune-shot::after { display: none; } .tune-label { width: min(78%, 300px); background: #F2E8D4; color: #45301E; border-radius: 4px; padding: var(--s2) var(--s3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 28px rgba(10, 6, 3, 0.45); } .tune-label .label-kind { font-size: var(--micro); line-height: var(--micro-lh); letter-spacing: 0.08em; text-transform: uppercase; color: #7A5C3E; } .tune-label ol { margin: var(--s1) 0 0; padding: 0 0 0 1.4em; font-size: 14px; line-height: 22px; } .tune-label li::marker { color: #7A5C3E; font-variant-numeric: tabular-nums; } .tune-label .label-soon { margin-top: var(--s1); font-size: 14px; line-height: 22px; color: #7A5C3E; } .pack-body { padding-top: var(--s2); } .pack-body .h3 { margin-top: 4px; } .pack-lines { margin-top: 4px; font-size: var(--small); line-height: var(--small-lh); color: var(--ink-2); } .pack-status { margin-top: var(--s1); font-size: var(--micro); line-height: var(--micro-lh); letter-spacing: 0.06em; text-transform: uppercase; } .pack-status.is-on { color: var(--brass); } .pack-status.is-in { color: var(--ink-2); } .pack-status.is-later { color: var(--ink-3); } /* ---------- packs on the home page (written by site-tools/sync-home-packs.py) ---------- */ /* the closing index: chips for what a buyer can get today, named once, after the band has sold them */ .pack-index { padding-bottom: var(--s4); } .pack-chips { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); } .pack-chips li { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-2); white-space: nowrap; border: 1px solid var(--stroke); border-radius: 999px; padding: 3px var(--s2); background: var(--surface-raised); } .pack-chips li span { color: var(--ink-3); } .pack-index .small { margin-top: var(--s2); color: var(--ink-2); max-width: 52ch; } /* band: the /packs cards, smaller, on one scrolling row like the riders shelf above it, so the fold stays one row tall instead of stacking thirteen cards down the page */ .packs-row { margin-top: var(--s4); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(164px, calc((min(100vw, 1440px) - 2 * var(--margin) - 4 * var(--s2)) / 5), 240px); gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); padding: 0 var(--margin) var(--s3); margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); scrollbar-width: thin; scrollbar-color: var(--stroke) transparent; overscroll-behavior-x: contain; } .packs-row:focus-visible { outline-offset: -2px; } .pack-sm { scroll-snap-align: start; } .pack-sm .pack-shot { aspect-ratio: 4 / 3; padding: 0 var(--s2) 12%; } .pack-sm .pack-shot img { width: 27%; } .pack-sm .pack-shot.riders-3 img { width: 31%; } .pack-sm .pack-body { padding-top: var(--s2); } .pack-sm .tune-label { width: min(86%, 200px); padding: var(--s2); } @media (max-width: 720px) { .packs-row { grid-auto-columns: 46vw; } } /* ---------- text pages (support, privacy, press, accessibility, lullabies, what's new) ---------- */ .page { padding: var(--s12) 0 var(--section); } .page-col { grid-column: 1 / span 8; } @media (max-width: 1080px) { .page-col { grid-column: 1 / -1; } } /* the text column stops at 8 of 12; an