:root { --p-ink: #151B22; --p-moss: #2E3A26; --p-espresso: #261D17; --p-clay: #7B3424; --p-ivory: #F4EDE0; --p-oatmeal: #DDD0BB; --p-oak: #D6BC98; --p-sage: #C8D0BC; --p-brass: #C79A5E; --p-brass-lit: #D8B070; --p-brass-ink: #6F4A1B; --p-white: #FFFFFF; --p-black: #000000; --t-mast: clamp(4.5rem, 1.86rem + 11.27vw, 12rem); --t-cover: clamp(2.125rem, 0.937rem + 5.07vw, 5.5rem); --t-chap: clamp(2.375rem, 1.1rem + 5.45vw, 6rem); --t-h2: clamp(1.875rem, 1.303rem + 2.44vw, 3.5rem); --t-h3: clamp(1.188rem, 1.033rem + 0.657vw, 1.625rem); --t-deck: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem); --t-quote: clamp(1.625rem, 0.965rem + 2.82vw, 3.5rem); --t-body: clamp(1rem, 0.978rem + 0.094vw, 1.063rem); --t-cap: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --t-label: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem); --t-price: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); --t-price-lg: clamp(2.375rem, 1.95rem + 1.7vw, 3.5rem); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --page: clamp(1rem, 0.12rem + 3.76vw, 3.5rem); --section: clamp(3.5rem, 2rem + 4.8vw, 6.5rem); --gap: clamp(12px, 0.4rem + 1.1vw, 24px); --half-gap: clamp(2.5rem, 1rem + 3vw, 5rem); --measure: 58ch; --container: 1344px; --plate-max: 576px; --d-tap: 120ms; --d-hover: 260ms; --d-sheet: 420ms; --d-reveal: 850ms; --d-wipe: 1100ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 1, 0.5, 1); --ease-io: cubic-bezier(0.76, 0, 0.24, 1); --z-dock: 60; --z-nav: 80; --z-sheet: 100; --z-veil: 120; --nav-h: 72px; --nav-h-stuck: 56px; --dock-h: 56px; --offer-h: 0px; --lift: 0 24px 48px -28px rgb(8 10 12 / 0.55); --rim: inset 0 1px 0 rgb(255 255 255 / 0.22); --blur-nav: 12px; --blur-sheet: 16px; --macron-w: 24px; --macron-h: 2px; } [data-ground], body { --bg: var(--p-ivory); --fg: #151B22; --fg-2: #3D3A34; --fg-3: #51493F; --accent: #6F4A1B; --on-accent: #F6F0E4; --rule: rgb(21 27 34 / 0.14); --rule-ui: #766C5B; --focus: #151B22; --halo: #F4EDE0; --wc: 0; } [data-ground="ivory"] { --bg: var(--p-ivory); } [data-ground="oatmeal"] { --bg: var(--p-oatmeal); --halo: #DDD0BB; } [data-ground="oak"] { --bg: var(--p-oak); --halo: #D6BC98; --fg-3: #4A4236; --accent: #5E3E14; --rule-ui: #6B5E4A; } [data-ground="sage"] { --bg: var(--p-sage); --halo: #C8D0BC; --fg-3: #4A4A3E; --rule-ui: #6E6F5E; } [data-ground="ink"], [data-ground="moss"], [data-ground="espresso"], [data-ground="clay"], [data-ground="photo"] { --bg: var(--p-ink); --fg: #F6F0E4; --fg-2: #D8D1C2; --fg-3: #B5AD9D; --accent: #D8B070; --on-accent: #151B22; --rule: rgb(246 240 228 / 0.14); --rule-ui: #7B7F72; --focus: #F6F0E4; --halo: #151B22; --wc: 40; } [data-ground="moss"] { --bg: var(--p-moss); --halo: #2E3A26; --rule-ui: #8A9080; } [data-ground="espresso"] { --bg: var(--p-espresso); --halo: #261D17; } [data-ground="clay"] { --bg: var(--p-clay); --halo: #7B3424; --fg-3: #CDC3B1; --accent: #E4BF84; --rule-ui: #C2AD98; } [data-ground="photo"] { --bg: var(--p-ink); } [data-ground] { background: var(--bg); color: var(--fg); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-0111, U+0114-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-macron.woff2') format('woff2'); unicode-range: U+0112-0113; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h-stuck) + var(--offer-h) + 16px); background: var(--p-ink); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100svh; background: var(--bg); color: var(--fg); font-size: var(--t-body); line-height: 1.7; font-weight: 400; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.is-locked { overflow: hidden; } img, video, svg, picture { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } em, i, cite, address, dfn, var { font-style: normal; } strong, b { font-weight: 600; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--halo); border-radius: 1px; } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: calc(var(--z-veil) + 1); padding: var(--s-3) var(--s-5); background: var(--p-ivory); color: var(--p-ink); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .skip-link:focus { top: var(--s-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } h1, h2, h3, h4 { font-weight: calc(300 + var(--wc)); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; } h3, h4 { font-weight: calc(500 + var(--wc) / 2); letter-spacing: -0.005em; line-height: 1.25; } p { max-width: var(--measure); overflow-wrap: anywhere; } small { font-size: var(--t-cap); } .t-mast { font-size: var(--t-mast); font-weight: calc(300 + var(--wc)); line-height: 0.9; letter-spacing: 0.22em; text-transform: uppercase; padding-left: 0.22em; } .t-coverline { font-size: var(--t-cover); font-weight: calc(300 + var(--wc)); line-height: 1.02; letter-spacing: -0.025em; } .t-chap { font-size: var(--t-chap); font-weight: calc(300 + var(--wc)); line-height: 1; letter-spacing: -0.03em; } .t-h2 { font-size: var(--t-h2); font-weight: calc(300 + var(--wc)); line-height: 1.08; letter-spacing: -0.02em; } .t-h3 { font-size: var(--t-h3); font-weight: calc(500 + var(--wc) / 2); line-height: 1.25; letter-spacing: -0.005em; } .t-deck { font-size: var(--t-deck); font-weight: calc(300 + var(--wc)); line-height: 1.5; max-width: 48ch; color: var(--fg-2); } .t-pull { font-size: var(--t-quote); font-weight: calc(300 + var(--wc)); line-height: 1.2; letter-spacing: -0.015em; } .t-cap { font-size: var(--t-cap); line-height: 1.5; letter-spacing: 0.02em; color: var(--fg-3); } .t-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3; } .t-credit { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--fg-3); } .t-price { font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; } @media (min-width: 768px) { .t-mast, .t-coverline, .t-chap { font-weight: calc(200 + var(--wc)); } } @media (min-width: 1280px) { .t-pull { font-weight: calc(200 + var(--wc)); } } .quiet { color: var(--fg-3); } .balance { text-wrap: balance; } .eyebrow { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); line-height: 1.3; } .eyebrow::before { content: ''; flex: none; width: var(--macron-w); height: var(--macron-h); background: var(--accent); } .eyebrow .n { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; } hr, .rule { border: 0; height: 1px; background: var(--rule); } [id] { scroll-margin-top: calc(var(--nav-h-stuck) + var(--offer-h) + var(--s-4)); } .container { width: min(100% - 2 * var(--page), var(--container)); margin-inline: auto; } .section { padding-block: var(--section); } .stack > * + * { margin-top: var(--s-5); } .stack--loose > * + * { margin-top: var(--s-7); } .flow > * + * { margin-top: 1em; } .grain { position: relative; isolation: isolate; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; mix-blend-mode: normal; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .fluted { background-image: repeating-linear-gradient(90deg, rgb(21 27 34 / 0.05) 0 2px, transparent 2px 14px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 200ms !important; scroll-behavior: auto !important; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-6); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--on-accent); background: var(--fg); border: 1px solid var(--fg); border-radius: 0; cursor: pointer; white-space: nowrap; transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft), border-color var(--d-hover) var(--ease-soft), transform var(--d-tap) var(--ease-soft); } [data-ground="ink"] .btn, [data-ground="moss"] .btn, [data-ground="espresso"] .btn, [data-ground="clay"] .btn, [data-ground="photo"] .btn { color: var(--p-ink); background: var(--p-ivory); border-color: var(--p-ivory); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-ui); } [data-ground="ink"] .btn--ghost, [data-ground="moss"] .btn--ghost, [data-ground="espresso"] .btn--ghost, [data-ground="clay"] .btn--ghost, [data-ground="photo"] .btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-ui); } .btn--sm { min-height: 44px; padding-inline: var(--s-5); } .btn--wide { width: 100%; } .btn svg { width: 16px; height: 16px; stroke-width: 1.8; } .btn:active { transform: scale(0.98); } .btn:disabled, .btn[aria-disabled="true"] { background: var(--rule); color: var(--fg-3); border-color: transparent; cursor: not-allowed; } @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } [data-ground="ink"] .btn--ghost:hover, [data-ground="moss"] .btn--ghost:hover, [data-ground="espresso"] .btn--ghost:hover, [data-ground="clay"] .btn--ghost:hover, [data-ground="photo"] .btn--ghost:hover { background: var(--p-ivory); color: var(--p-ink); border-color: var(--p-ivory); } } .btn--ghost-dark { background: transparent; color: var(--fg); border-color: var(--rule-ui); } .link { position: relative; display: inline-block; padding-bottom: 2px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); } .link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(1); transition: transform var(--d-hover) var(--ease-soft); } @media (hover: hover) and (pointer: fine) { .link:hover::after { transform: scaleX(0); transform-origin: right; } .link:hover::after { animation: link-draw var(--d-hover) var(--ease-soft) forwards; } } @keyframes link-draw { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } .prose a { text-decoration: underline; text-decoration-color: var(--rule-ui); text-underline-offset: 4px; } .prose a:hover { text-decoration-color: currentColor; } .field { display: block; margin-bottom: var(--s-5); } .field > span, .field > label, .bk-field > span { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--s-1); } .field input, .field select, .field textarea, .bk-field input, .bk-field select, .bk-field textarea, .bk-search, .input { width: 100%; min-height: 52px; padding: var(--s-3) 0; font-size: 16px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--rule-ui); border-radius: 0; outline: none; transition: border-color var(--d-hover) var(--ease-soft); } .field textarea, .bk-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .field select, .bk-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--s-6); } .field input:focus, .field select:focus, .field textarea:focus, .bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus, .bk-search:focus { border-bottom: 2px solid var(--fg); padding-bottom: calc(var(--s-3) - 1px); outline: none; box-shadow: none; } .field .error, .bk-error { font-size: var(--t-cap); color: var(--accent); margin-top: var(--s-2); } .field input::placeholder, .bk-field input::placeholder, .bk-search::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: 1; } .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } @media (max-width: 380px) { .row-2 { grid-template-columns: minmax(0, 1fr); } } .check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--fg); margin: 0; } .choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 56px; border-bottom: 1px solid var(--rule); cursor: pointer; } .choice:first-child { border-top: 1px solid var(--rule); } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice .mark { width: 24px; height: 2px; background: var(--rule-ui); transition: background var(--d-hover) var(--ease-soft), transform var(--d-hover) var(--ease-soft); transform: scaleX(0.4); transform-origin: left; } .choice:has(input:checked) .mark { background: var(--accent); transform: scaleX(1); } .choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--s-1); margin-inline: calc(-1 * var(--page)); padding-inline: var(--page); scroll-snap-type: x proximity; scroll-padding-inline: var(--page); } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--fg); border: 1px solid var(--rule-ui); scroll-snap-align: start; transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft), border-color var(--d-hover) var(--ease-soft); } .chip .n { color: var(--fg-3); font-variant-numeric: tabular-nums; } .chip.is-active, .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); } .chip.is-active .n, .chip[aria-pressed="true"] .n { color: inherit; opacity: 0.7; } .site-nav { position: fixed; top: var(--offer-h); left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); color: var(--p-ivory); background: linear-gradient(to bottom, rgb(21 27 34 / 0.55), rgb(21 27 34 / 0)); transition: height var(--d-hover) var(--ease-soft), background var(--d-hover) var(--ease-soft), transform var(--d-sheet) var(--ease-soft); } .site-nav.is-stuck { height: var(--nav-h-stuck); background: rgb(21 27 34 / 0.94); box-shadow: 0 1px 0 rgb(246 240 228 / 0.08), var(--rim); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-nav.is-stuck { background: rgb(21 27 34 / 0.72); -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(1.4); backdrop-filter: blur(var(--blur-nav)) saturate(1.4); } html[data-fx="lite"] .site-nav.is-stuck, body.bk-open .site-nav, body.is-locked .site-nav { background: rgb(21 27 34 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } } .site-nav--paper { color: var(--p-ink); background: linear-gradient(to bottom, rgb(246 240 228 / 0.85), rgb(246 240 228 / 0)); } .site-nav--paper.is-stuck { color: var(--p-ivory); } .site-nav.is-hidden { transform: translateY(-100%); } .site-nav.is-over { z-index: calc(var(--z-sheet) + 1); transform: none; color: var(--p-ivory); } .nav-inner { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); } .nav-logo { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: inherit; } .nav-logo-name { font-size: 1rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1; padding-left: 0.3em; } .nav-logo svg { display: none; } .nav-links { display: none; justify-content: center; gap: clamp(var(--s-4), 2vw, var(--s-6)); } .nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 8px; width: var(--macron-w); height: var(--macron-h); background: var(--p-brass-lit); transform: scaleX(0); transform-origin: left; transition: transform var(--d-hover) var(--ease-soft); } .nav-links a.is-active::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { transform: scaleX(1); } } .nav-links a[data-from="1200"] { display: none; } @media (min-width: 1024px) { .nav-links { display: flex; } } @media (min-width: 1200px) { .nav-links a[data-from="1200"] { display: inline-flex; } } .nav-end { display: flex; align-items: center; gap: var(--s-3); justify-self: end; } .nav-cta .btn { min-height: 44px; padding-inline: var(--s-4); color: var(--p-ink); background: var(--p-ivory); border-color: var(--p-ivory); font-size: var(--t-label); } .nav-cta .btn .n { font-variant-numeric: tabular-nums; } .nav-cta .btn .n:empty { display: none; } @media (max-width: 1023px) { .nav-inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); } } @media (max-width: 359px) { .nav-end { gap: var(--s-2); } .nav-cta .btn { padding-inline: var(--s-3); gap: var(--s-2); } .nav-end .nav-toggle { padding-inline: var(--s-1); } } .site-nav--paper:not(.is-stuck) .nav-cta .btn { color: var(--p-ivory); background: var(--p-ink); border-color: var(--p-ink); } @media (hover: hover) and (pointer: fine) { .nav-cta .btn:hover { background: var(--p-brass-lit); border-color: var(--p-brass-lit); color: var(--p-ink); } } .nav-toggle { display: inline-flex; align-items: center; gap: calc(var(--s-2) + 0.9em); min-height: 48px; min-width: 48px; padding: 0 var(--s-2); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: inherit; position: relative; } .nav-toggle .nav-toggle-word::after { content: 'Menu'; } .nav-toggle.is-open .nav-toggle-word::after { content: 'Close'; } .nav-toggle span:not(.nav-toggle-word) { display: none; } .nav-toggle::before { content: ''; width: var(--macron-w); height: var(--macron-h); background: var(--p-brass-lit); transition: width var(--d-hover) var(--ease-soft); } .nav-toggle.is-open::before { width: 12px; } .nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; } .nav-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--p-brass-lit); transform: scaleX(0); transform-origin: left; } .site-nav.is-leaving .nav-progress { animation: nav-progress 1400ms var(--ease-out) forwards; } @keyframes nav-progress { to { transform: scaleX(0.92); } } .offer-bar { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 1); display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 36px; padding: var(--s-2) var(--page); background: var(--p-brass-lit); color: var(--p-ink); font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.06em; text-align: center; line-height: 1.3; } .offer-dot { width: 6px; height: 6px; background: var(--p-ink); flex: none; } .nav-overlay { position: fixed; inset: 0; z-index: var(--z-sheet); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--nav-h) + var(--offer-h)) var(--page) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); color: var(--p-ivory); background: rgb(21 27 34 / 0.96); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity var(--d-sheet) var(--ease-out), transform var(--d-sheet) var(--ease-out), visibility var(--d-sheet); overflow-y: auto; overscroll-behavior: contain; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-overlay { background: rgb(21 27 34 / 0.88); -webkit-backdrop-filter: blur(var(--blur-sheet)); backdrop-filter: blur(var(--blur-sheet)); } html[data-fx="lite"] .nav-overlay { background: rgb(21 27 34 / 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } } .nav-overlay.is-open { opacity: 1; visibility: visible; transform: none; } .nav-overlay > div { display: contents; } .nav-overlay-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-4); border-bottom: 1px solid rgb(246 240 228 / 0.14); } .nav-overlay-links { display: grid; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .nav-overlay-links::-webkit-scrollbar { display: none; } .nav-overlay-links a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 64px; padding-block: var(--s-2); border-bottom: 1px solid rgb(246 240 228 / 0.12); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: inherit; opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); } .nav-overlay.is-open .nav-overlay-links a { opacity: 1; transform: none; } .nav-overlay.is-open .nav-overlay-links a:nth-child(1) { transition-delay: 40ms; } .nav-overlay.is-open .nav-overlay-links a:nth-child(2) { transition-delay: 100ms; } .nav-overlay.is-open .nav-overlay-links a:nth-child(3) { transition-delay: 160ms; } .nav-overlay.is-open .nav-overlay-links a:nth-child(4) { transition-delay: 220ms; } .nav-overlay.is-open .nav-overlay-links a:nth-child(5) { transition-delay: 280ms; } .nav-overlay.is-open .nav-overlay-links a:nth-child(n+6) { transition-delay: 320ms; } .nav-overlay-links a::before { content: counter(contents, decimal-leading-zero); counter-increment: contents; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; color: var(--p-brass-lit); font-variant-numeric: tabular-nums; } .nav-overlay-links { counter-reset: contents; } .nav-overlay-links a.is-active::after, .nav-overlay-links a[aria-current="page"]::after { content: ''; grid-column: 2; width: var(--macron-w); height: var(--macron-h); background: var(--p-brass-lit); margin-top: var(--s-2); } .nav-overlay-links a.is-active, .nav-overlay-links a[aria-current="page"] { grid-template-rows: auto auto; } .nav-overlay-contact, .nav-overlay-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-top: var(--s-5); font-size: var(--t-cap); color: rgb(246 240 228 / 0.72); } .nav-overlay-foot a, .nav-overlay-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-ivory); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid rgb(246 240 228 / 0.3); } @media (min-width: 1024px) { .nav-overlay { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--s-9); padding-inline: max(var(--page), (100% - var(--container)) / 2); } .nav-overlay-head { grid-column: 1 / -1; } .nav-overlay-links { grid-column: 1; } .nav-overlay-links a { min-height: 72px; grid-template-columns: 3rem minmax(0, 1fr) auto; } .nav-overlay-links a { grid-template-rows: auto auto; } .nav-overlay-aside { grid-column: 2; grid-row: 2; align-self: end; } .nav-overlay-aside .plate { max-width: 360px; } .nav-overlay-contact, .nav-overlay-foot { grid-column: 1 / -1; } } .nav-overlay-aside { display: none; } @media (min-width: 1024px) { .nav-overlay-aside { display: block; } } .cart-bar { position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dock); width: min(560px, calc(100% - 2 * var(--s-4))); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); min-height: var(--dock-h); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); color: var(--p-ivory); background: var(--p-ink); box-shadow: var(--lift), var(--rim); transform: translate(-50%, calc(100% + var(--s-5))); opacity: 0; visibility: hidden; transition: transform var(--d-sheet) var(--ease-out), opacity var(--d-sheet) var(--ease-out), visibility var(--d-sheet); } .cart-bar.is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .cart-bar.is-raised { bottom: calc(var(--s-4) + var(--raise, calc(var(--dock-h) + var(--s-3))) + env(safe-area-inset-bottom, 0px)); } .cart-bar-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px; font-size: var(--t-cap); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--p-ink); background: var(--p-brass-lit); } .cart-bar-label { font-size: var(--t-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(246 240 228 / 0.8); } .cart-bar-total { font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .cart-bar-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--p-ink); background: var(--p-ivory); cursor: pointer; } .cart-bar-cta svg { width: 14px; height: 14px; } @media (max-width: 480px) { .cart-bar-label { display: none; } .cart-bar { grid-template-columns: auto auto minmax(0, 1fr); } .cart-bar-total { text-align: right; } .cart-bar-cta { grid-column: 1 / -1; width: 100%; } } @media (max-width: 480px) { .cart-bar { padding: var(--s-2); } } body .chat-fab { display: none; } .ask-fab { position: fixed; right: calc(var(--s-4) + env(safe-area-inset-right, 0px)); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dock); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; color: var(--p-ivory); background: var(--p-ink); border: 1px solid rgb(244 237 224 / 0.28); box-shadow: 0 8px 22px rgb(21 27 34 / 0.28); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .ask-fab svg { width: 18px; height: 18px; flex: none; } .ask-fab:hover { background: var(--p-clay); } .ask-fab:focus-visible { outline: 2px solid var(--p-ivory); outline-offset: 3px; } body.has-bar .ask-fab, body.chat-open .ask-fab, body.bk-open .ask-fab, body.is-locked .ask-fab { display: none; } body:has(.cart-bar.is-shown) .ask-fab { display: none; } .site-footer::after { content: ""; display: block; height: 52px; } .net-pill { position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-dock) + 1); width: min(560px, calc(100% - 2 * var(--s-4))); display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--t-cap); line-height: 1.45; color: var(--p-ivory); background: var(--p-ink); box-shadow: var(--lift), var(--rim); transform: translate(-50%, calc(100% + var(--s-5))); opacity: 0; transition: transform var(--d-sheet) var(--ease-out), opacity var(--d-sheet); } .net-pill.is-in { transform: translate(-50%, 0); opacity: 1; } .net-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--p-brass-lit); } .net-pill.is-on .net-dot { background: var(--p-sage); } .bk-toast { position: fixed; left: 50%; bottom: calc(var(--s-4) + var(--dock-h) + var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-sheet) + 1); max-width: min(420px, calc(100% - 2 * var(--s-4))); padding: var(--s-3) var(--s-5); font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.04em; text-align: center; color: var(--p-ivory); background: var(--p-ink); box-shadow: var(--lift), var(--rim); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: transform var(--d-hover) var(--ease-out), opacity var(--d-hover) var(--ease-out); } .bk-toast.is-shown { transform: translate(-50%, 0); opacity: 1; } body.bk-open { overflow: hidden; } .bk-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgb(21 27 34 / 0.55); opacity: 0; visibility: hidden; transition: opacity var(--d-sheet) var(--ease-soft), visibility var(--d-sheet); } .bk-backdrop.is-open { opacity: 1; visibility: visible; } .bk { position: fixed; z-index: var(--z-sheet); top: 0; right: 0; width: min(520px, 100%); height: 100svh; height: 100dvh; display: flex; flex-direction: column; color: var(--p-ink); background: var(--p-ivory); box-shadow: var(--lift); transform: translateX(102%); visibility: hidden; transition: transform var(--d-sheet) var(--ease-out), visibility var(--d-sheet); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media (min-width: 768px) { .bk { background: rgb(246 240 228 / 0.92); -webkit-backdrop-filter: blur(var(--blur-sheet)); backdrop-filter: blur(var(--blur-sheet)); } html[data-fx="lite"] .bk { background: var(--p-ivory); -webkit-backdrop-filter: none; backdrop-filter: none; } } } .bk.is-open { transform: none; visibility: visible; } @media (max-width: 767px) { .bk { transform: translateY(102%); } .bk.is-open { transform: none; } } .bk { --bg: var(--p-ivory); --fg: var(--p-ink); --fg-2: var(--p-ink); --fg-3: var(--p-ink); --accent: var(--p-brass-ink); --rule: rgb(21 27 34 / 0.14); --rule-ui: var(--p-brass-ink); --focus: var(--p-ink); --halo: var(--p-ivory); } .bk .bk-total, .bk .bk-note, .bk .bk-summary, .bk .bk-hint, .bk .bk-empty { opacity: 0.86; } .bk-head { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--p-ink); } .bk-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; } .bk-close { flex: none; width: 48px; height: 48px; margin: -8px -12px -8px 0; font-size: 1.75rem; font-weight: 200; line-height: 1; color: var(--p-ink); display: grid; place-items: center; } .bk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 var(--s-5); } .bk-sec { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); } .bk-sec:last-child { border-bottom: 0; } .bk-items li, .bk-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; column-gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); min-height: 64px; } .bk-items li:last-child, .bk-picks .bk-pick:last-child { border-bottom: 0; } .bk-item-name, .bk-pick-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; font-size: var(--t-body); line-height: 1.35; } .bk-pick-name { font-weight: 400; } .bk-item-name em, .bk-pick-name em { display: block; font-size: var(--t-cap); letter-spacing: 0.02em; text-transform: none; color: var(--fg-3); margin-top: 2px; } .bk-item-price, .bk-pick-price { font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .bk-x, .bk-pick-add, .bk-pick-in { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; font-weight: 300; } .bk-x { color: var(--fg-3); } .bk-pick-add { border: 1px solid var(--rule-ui); color: var(--p-ink); transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft), border-color var(--d-hover) var(--ease-soft); } .bk-pick-in { color: var(--p-brass-ink); font-size: 1rem; } .bk-pick.is-in .bk-pick-name, .bk-pick.is-in .bk-pick-price { color: var(--fg-3); } @media (hover: hover) and (pointer: fine) { .bk-x:hover { color: var(--p-ink); } .bk-pick-add:hover { background: var(--p-ink); color: var(--p-ivory); border-color: var(--p-ink); } } .bk-empty { font-size: var(--t-body); color: var(--fg-2); margin-bottom: var(--s-2); } .bk-hint { font-size: var(--t-cap); color: var(--fg-2); margin: var(--s-4) 0 var(--s-1); } .bk-summary { font-size: var(--t-cap); color: var(--fg-2); line-height: 1.55; } .bk-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-ink); border-bottom: 1px solid var(--rule-ui); line-height: 1; } .bk-link:hover { border-bottom-color: var(--p-ink); } .bk-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--p-ink); } .bk-tabs button { min-height: 48px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-ink); } .bk-tabs button.is-active { background: var(--p-ink); color: var(--p-ivory); } .bk-search { margin: var(--s-4) 0 var(--s-1); } .bk-cat summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; cursor: pointer; list-style: none; font-size: var(--t-body); font-weight: 500; border-bottom: 1px solid var(--rule); } .bk-cat summary::-webkit-details-marker { display: none; } .bk-cat summary::after { content: '+'; font-weight: 200; font-size: 1.25rem; color: var(--fg-3); margin-left: auto; } .bk-cat[open] summary::after { content: '\2212'; } .bk-cat[open] summary { border-bottom-color: var(--p-ink); } .bk-cat-n { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.1em; color: var(--fg-3); font-variant-numeric: tabular-nums; margin-left: auto; } .bk-field { display: block; margin-bottom: var(--s-4); } .bk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } @media (max-width: 380px) { .bk-row { grid-template-columns: minmax(0, 1fr); gap: 0; } } .bk-times-note { font-size: var(--t-cap); line-height: 1.5; color: var(--fg-2); margin: 0; } .bk-times-note:not(:empty) { margin-bottom: var(--s-4); } .bk-times-set { min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; } .bk-times-set legend { padding: 0; } .bk-time-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } @media (min-width: 420px) { .bk-time-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 520px) { .bk-time-opts { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .bk-time { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 var(--s-1); border: 1px solid var(--rule-ui); font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft), border-color var(--d-hover) var(--ease-soft); } @media (max-width: 360px) { .bk-time { font-size: 0.875rem; } } .bk-time input { position: absolute; opacity: 0; pointer-events: none; } .bk-time.is-active { color: var(--p-ivory); background: var(--p-ink); border-color: var(--p-ink); } .bk-time:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .bk-time:hover:not(.is-active) { border-color: var(--p-ink); } } .bk-foot { flex: none; padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--p-ink); background: var(--p-ivory); text-align: center; } .bk-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-3); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); } .bk-total strong { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--p-ink); font-variant-numeric: tabular-nums; } .bk-note { font-size: var(--t-cap); line-height: 1.5; color: var(--fg-2); margin-bottom: var(--s-3); text-align: left; } .bk-preview { font-size: var(--t-cap); line-height: 1.5; color: var(--p-ink); border-left: 2px solid var(--accent); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-5); text-align: left; } .bk-primary { width: 100%; min-height: 52px; color: var(--p-ivory); background: var(--p-ink); border-color: var(--p-ink); } .bk-primary:disabled { background: var(--rule); color: var(--fg-3); border-color: transparent; } .bk-foot .bk-link { margin-top: var(--s-2); } .bk-done { text-align: center; padding-top: var(--s-8); } .bk-done-mark { width: 64px; height: 64px; margin: 0 auto var(--s-5); display: grid; place-items: center; border: 1px solid var(--p-ink); font-size: 1.5rem; font-weight: 200; } .bk-done-ref { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em; margin-bottom: var(--s-4); } .bk-done p { color: var(--fg-2); margin: 0 auto var(--s-5); } .bk-mark { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: var(--s-4); line-height: 1; } .bk-mark-name { font-size: 1.125rem; font-weight: 400; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; } .bk-mark-sub { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.46em; padding-left: 0.46em; text-transform: uppercase; } .bk-core-title { font-size: var(--t-h3); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; } .bk-core .bk-hint { margin-top: var(--s-2); } .bk-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--s-2); } .bk-attached { margin-top: var(--s-2); } .bk-methods { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); } .bk-method { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); cursor: pointer; } .bk-method input { position: absolute; opacity: 0; pointer-events: none; } .bk-method::before { content: ''; width: 18px; height: 18px; border: 1px solid var(--p-ink); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--p-ivory); } .bk-method.is-active { border-color: var(--p-ink); } .bk-method.is-active::before { background: var(--p-ink); } .bk-method:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .bk-method strong { display: block; font-weight: 500; font-size: var(--t-body); } .bk-method em { display: block; font-size: var(--t-cap); color: var(--fg-2); margin-top: 2px; } .bk-paying { text-align: center; padding-top: var(--s-9); } .bk-paying .bk-hint { margin-top: var(--s-2); } .bk-pay-step { font-size: var(--t-h3); font-weight: 300; margin-top: var(--s-5); } .bk-spin { width: 44px; height: 44px; margin: 0 auto; border: 1px solid var(--rule); border-top-color: var(--p-ink); border-radius: 50%; animation: bk-spin 900ms linear infinite; } @keyframes bk-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bk-spin { animation-duration: 2400ms; } } .bk-inline { color: var(--p-ink); border-bottom: 1px solid var(--rule-ui); } .live-flag { display: inline-block; padding: 4px 8px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-ink); background: var(--p-brass-lit); } .reel { position: relative; overflow: hidden; background: var(--p-ink); } .reel .reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); z-index: 0; } .reel .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); z-index: 1; opacity: 0; transition: opacity 600ms var(--ease-soft); } .reel.is-playing .reel-video, .reel.is-held .reel-video { opacity: 1; } .reel-ctl { position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 3; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--p-ivory); background: rgb(21 27 34 / 0.55); box-shadow: var(--rim); opacity: 0; transition: opacity var(--d-hover) var(--ease-soft); } .reel-ctl svg { width: 16px; height: 16px; fill: currentColor; } .reel-ctl .i-pause, .reel-ctl .i-play, .reel-ctl .i-replay { display: none; } .reel.is-playing .reel-ctl .i-pause, .reel.is-paused .reel-ctl .i-play, .reel.is-held .reel-ctl .i-replay, .reel.is-blocked .reel-ctl .i-play, .reel.is-idle .reel-ctl .i-play { display: block; } .reel.is-ready .reel-ctl, .reel.is-paused .reel-ctl, .reel.is-held .reel-ctl, .reel.is-blocked .reel-ctl, .reel.is-idle .reel-ctl, .reel:focus-within .reel-ctl { opacity: 1; } @media (hover: hover) and (pointer: fine) { .reel.is-playing .reel-ctl { opacity: 0; } .reel.is-playing:hover .reel-ctl { opacity: 1; } } html[data-fx="lite"] .reel .reel-ctl, .reel.is-blocked .reel-ctl, .reel.is-idle .reel-ctl { opacity: 1; width: 56px; height: 56px; right: 50%; bottom: 50%; transform: translate(50%, 50%); } html .reel.reel[data-mode="ambient"] .reel-ctl { opacity: 0; width: 44px; height: 44px; right: var(--s-3); bottom: var(--s-3); transform: none; } html .reel.reel[data-mode="ambient"] .reel-ctl:focus-visible { opacity: 1; } html .reel.reel[data-mode="ambient"].is-blocked .reel-ctl, html.reels-quiet .reel.reel[data-mode="ambient"]:not(.is-playing) .reel-ctl { opacity: 1; width: 56px; height: 56px; right: 50%; bottom: 50%; transform: translate(50%, 50%); } .reel[data-mode="ambient"] { cursor: pointer; } .reel[data-native] { aspect-ratio: var(--arw) / var(--arh); width: min(100%, calc(var(--film-h) * var(--arw) / var(--arh))); max-height: none; margin-inline: auto; --film-h: 86svh; } @media (min-width: 1024px) { .reel[data-native] { --film-h: min(84svh, 780px); } } .film-pair { display: flex; align-items: flex-start; gap: var(--s-3); } .film-pair > * { flex: calc(var(--arw, 1) / var(--arh, 1)) 1 0; min-width: 0; } .film-pair .reel[data-native] { width: 100%; margin-inline: 0; } .film-pair .reel-cap { padding-inline: 0; text-align: left; justify-items: start; } .t-spread > .plate-wrap.film-pair, .t-opener > .plate-wrap.film-pair { margin-inline: 0; } @media (min-width: 768px) { .film-pair { gap: var(--s-4); } } @media (min-width: 1024px) { .plate-wrap.film-pair > .reel-cap, .film-pair .reel[data-native] + .reel-cap { text-align: left; justify-items: start; } } .t-rail .reel[data-native] { aspect-ratio: 9 / 16; width: 100%; } .t-rail .reel[data-native] .reel-poster, .t-rail .reel[data-native] .reel-video { object-fit: contain; } .reel-cap { display: grid; gap: var(--s-1); margin-top: var(--s-3); padding-inline: var(--page); text-align: left; } .reel-cap .t-credit { color: var(--fg-3); } .reel-cap .t-credit .n { color: var(--accent); } .reel-cap p:not(.t-credit) { font-size: var(--t-cap); color: var(--fg-2); max-width: 44ch; } @media (min-width: 1024px) { .reel-cap { padding-inline: 0; } } .t-spread > .plate-wrap:has(> .reel[data-native]), .t-opener > .plate-wrap:has(> .reel[data-native]) { max-height: none; max-width: none; } @media (min-width: 1024px) { .t-spread > .plate-wrap:has(> .reel[data-native]), .t-opener > .plate-wrap:has(> .reel[data-native]) { width: 100%; justify-self: stretch; } .t-spread > .plate-wrap > .reel[data-native], .t-opener > .plate-wrap > .reel[data-native] { max-height: none; } .plate-wrap > .reel[data-native] + .reel-cap { text-align: center; justify-items: center; } } .reel-watch { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 3; } .film-dialog { border: 0; padding: 0; background: var(--p-ink); color: var(--p-ivory); max-width: min(100%, 520px); width: 100%; max-height: 100svh; } .film-dialog::backdrop { background: rgb(21 27 34 / 0.8); } .film-dialog video { width: 100%; max-height: 90svh; display: block; } .film-dialog .film-dialog-close { position: absolute; top: var(--s-2); right: var(--s-2); width: 44px; height: 44px; display: grid; place-items: center; color: var(--p-ivory); background: rgb(21 27 34 / 0.6); font-size: 1.5rem; font-weight: 200; } .slides { position: relative; overflow: hidden; } .slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease-soft); } .slides .slide.is-active { opacity: 1; z-index: 1; } .slides .slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); } html[data-fx="full"] .slides.is-running .slide.is-active img { animation: ken-burns 7200ms var(--ease-soft) forwards; } @keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } } .lightbox { position: fixed; inset: 0; z-index: var(--z-sheet); display: grid; place-items: center; padding: var(--s-5); background: rgb(21 27 34 / 0.9); opacity: 0; visibility: hidden; transition: opacity var(--d-sheet) var(--ease-soft), visibility var(--d-sheet); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lightbox { background: rgb(21 27 34 / 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-fx="lite"] .lightbox { background: rgb(21 27 34 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-figure { max-width: min(100%, 1100px); max-height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; } .lightbox-figure img { max-height: 78svh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; } .lightbox-caption { padding-top: var(--s-4); color: var(--p-ivory); display: flex; gap: var(--s-3); align-items: baseline; } .lightbox-caption .cat { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-brass-lit); } .lightbox-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; color: var(--p-ivory); background: rgb(21 27 34 / 0.6); box-shadow: var(--rim); } .lightbox-btn svg { width: 18px; height: 18px; } .lightbox-close { top: var(--s-4); right: var(--s-4); } .lightbox-prev { left: var(--s-4); top: 50%; transform: translateY(-50%); } .lightbox-next { right: var(--s-4); top: 50%; transform: translateY(-50%); } .chat-window { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: var(--z-sheet); width: min(400px, calc(100% - 2 * var(--s-4))); max-height: min(640px, calc(100svh - 2 * var(--s-4))); display: flex; flex-direction: column; color: var(--p-ink); background: var(--p-ivory); box-shadow: var(--lift); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--d-sheet) var(--ease-out), transform var(--d-sheet) var(--ease-out), visibility var(--d-sheet); } .chat-window.is-open { opacity: 1; visibility: visible; transform: none; } .chat-header { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); color: var(--p-ivory); background: var(--p-ink); } .chat-avatar { width: 36px; height: 36px; display: grid; place-items: center; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; background: var(--p-brass-lit); color: var(--p-ink); } .chat-header-name { font-size: var(--t-body); font-weight: 500; } .chat-header-status { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .chat-close { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; color: inherit; font-size: 1.5rem; font-weight: 200; } .chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .chat-msg { max-width: 85%; padding: var(--s-3) var(--s-4); font-size: var(--t-cap); line-height: 1.5; background: var(--p-oatmeal); } .chat-msg .chat-link { color: var(--p-brass-ink); font-weight: 700; text-decoration: underline; } .chat-msg--user { align-self: flex-end; background: var(--p-ink); color: var(--p-ivory); } .chat-quick { display: flex; flex-wrap: nowrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .chat-quick::-webkit-scrollbar { display: none; } .chat-quick button { flex: none; white-space: nowrap; min-height: 40px; padding: 0 var(--s-3); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--rule-ui); color: var(--p-ink); } .chat-input { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); } .chat-input input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; border: 0; border-bottom: 1px solid var(--rule-ui); background: transparent; outline: none; } .chat-input button { min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--p-ivory); background: var(--p-ink); } .chat-input button svg { width: 16px; height: 16px; } .chat-powered { padding: 0 var(--s-4) var(--s-3); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); text-align: center; } html.reveals [data-reveal], html.reveals [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); } html.reveals [data-reveal].is-inview, html.reveals [data-reveal-stagger].is-inview > * { opacity: 1; transform: none; } html.reveals [data-reveal-stagger].is-inview > :nth-child(2) { transition-delay: 70ms; } html.reveals [data-reveal-stagger].is-inview > :nth-child(3) { transition-delay: 140ms; } html.reveals [data-reveal-stagger].is-inview > :nth-child(4) { transition-delay: 210ms; } html.reveals [data-reveal-stagger].is-inview > :nth-child(5) { transition-delay: 280ms; } html.reveals [data-reveal-stagger].is-inview > :nth-child(n+6) { transition-delay: 350ms; } @media (min-width: 1024px) { html[data-fx="full"].reveals [data-unveil] { clip-path: inset(100% 0 0 0); transition: clip-path var(--d-wipe) var(--ease-io); } html[data-fx="full"].reveals [data-unveil] > img, html[data-fx="full"].reveals [data-unveil] > .reel-poster { transform: scale(1.12); transition: transform var(--d-wipe) var(--ease-io); } html[data-fx="full"].reveals [data-unveil].is-inview { clip-path: inset(0 0 0 0); } html[data-fx="full"].reveals [data-unveil].is-inview > img, html[data-fx="full"].reveals [data-unveil].is-inview > .reel-poster { transform: none; } } @media (prefers-reduced-motion: reduce) { html.reveals [data-reveal], html.reveals [data-reveal-stagger] > * { opacity: 1; transform: none; } } .intro-veil { position: fixed; inset: 0; z-index: var(--z-veil); display: grid; place-items: center; color: var(--p-ink); pointer-events: none; } html:not(.intro) .intro-veil { display: none; } .intro-half { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--p-ivory); } .intro-half--top { top: 0; } .intro-half--bottom { bottom: 0; } .intro-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-5); padding: 0 var(--page); } .intro-word { display: flex; font-size: clamp(3rem, 1.6rem + 7.6vw, 7.5rem); font-weight: 500; letter-spacing: 0.28em; padding-left: 0.28em; text-transform: uppercase; line-height: 1; } .intro-word span { display: inline-block; overflow: hidden; padding-top: 0.22em; margin-top: -0.22em; } .intro-word span i { display: inline-block; transform: translateY(112%); } .intro-rule { width: min(560px, 70vw); height: 1px; background: var(--p-brass-ink); transform: scaleX(0); } .intro-sub { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-2); opacity: 0; transform: translateY(8px); } .intro-line { position: absolute; left: 0; right: 0; bottom: max(var(--s-7), 6vh); z-index: 1; text-align: center; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-3); opacity: 0; } html.intro .intro-word span i { animation: intro-rise 760ms var(--ease-out) forwards; } html.intro .intro-word span:nth-child(2) i { animation-delay: 50ms; } html.intro .intro-word span:nth-child(3) i { animation-delay: 100ms; } html.intro .intro-word span:nth-child(4) i { animation-delay: 150ms; } html.intro .intro-word span:nth-child(5) i { animation-delay: 200ms; } html.intro .intro-rule { animation: intro-rule 520ms var(--ease-io) 520ms forwards; } html.intro .intro-sub { animation: intro-settle 480ms var(--ease-out) 760ms forwards; } html.intro .intro-line { animation: intro-settle 480ms var(--ease-out) 900ms forwards; } html.intro .intro-card, html.intro .intro-line { animation-fill-mode: forwards; } html.intro .intro-card { animation: intro-fade 260ms var(--ease-soft) 1340ms forwards; } html.intro .intro-line { animation: intro-settle 480ms var(--ease-out) 900ms forwards, intro-fade 200ms var(--ease-soft) 1340ms forwards; } html.intro .intro-half--top { animation: intro-part-up 620ms var(--ease-io) 1420ms forwards; } html.intro .intro-half--bottom { animation: intro-part-down 620ms var(--ease-io) 1420ms forwards; } html.intro .intro-veil { animation: intro-gone 1ms linear 2100ms forwards; } @keyframes intro-rise { to { transform: none; } } @keyframes intro-rule { to { transform: scaleX(1); } } @keyframes intro-settle { to { opacity: 1; transform: none; } } @keyframes intro-part-up { to { transform: translateY(-101%); } } @keyframes intro-part-down { to { transform: translateY(101%); } } @keyframes intro-fade { to { opacity: 0; } } @keyframes intro-gone { to { visibility: hidden; display: none; } } @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 220ms var(--ease-soft) forwards; } ::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) forwards; } .cart-bar.is-shown { view-transition-name: dock; } .cart-bar.is-shown:not(.book-bar) { view-transition-name: dock-bag; } ::view-transition-group(dock), ::view-transition-group(dock-bag) { animation-duration: 0.01ms; } } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .site-footer { padding: var(--section) 0 var(--s-6); overflow: hidden; } .foot-logo { display: inline-block; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; padding-left: 0.3em; margin-bottom: var(--s-4); } .foot-brand p { max-width: 36ch; } .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .foot-bottom a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-ui); } .site-nav { background: rgb(21 27 34 / 0.38); box-shadow: 0 1px 0 rgb(246 240 228 / 0.08); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-nav { -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(1.4); backdrop-filter: blur(var(--blur-nav)) saturate(1.4); } .site-nav.is-stuck { background: rgb(21 27 34 / 0.64); } .site-nav--paper:not(.is-stuck) { background: rgb(246 240 228 / 0.55); } } .site-nav--paper { background: rgb(246 240 228 / 0.9); box-shadow: 0 1px 0 rgb(21 27 34 / 0.08); } .glass-bar { position: sticky; top: calc(var(--nav-h-stuck) + var(--offer-h)); z-index: calc(var(--z-nav) - 1); background: rgb(246 240 228 / 0.92); box-shadow: 0 1px 0 var(--rule); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-bar { background: rgb(246 240 228 / 0.68); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } html[data-fx="lite"] .glass-bar { background: rgb(246 240 228 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } } [data-ground="ink"] .glass-bar, [data-ground="moss"] .glass-bar, [data-ground="espresso"] .glass-bar, [data-ground="clay"] .glass-bar { background: rgb(21 27 34 / 0.62); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cart-bar { background: rgb(21 27 34 / 0.7); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } html[data-fx="lite"] .cart-bar { background: var(--p-ink); -webkit-backdrop-filter: none; backdrop-filter: none; } } .plate-tag { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 3; display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 10px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-ivory); background: rgb(21 27 34 / 0.55); box-shadow: var(--rim); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .plate-tag { background: rgb(21 27 34 / 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .plate-tag .n { color: var(--p-brass-lit); font-variant-numeric: tabular-nums; } html.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; } html.js [data-split] .w > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--ease-out); } html.js [data-split].is-inview .w > span { transform: none; } html.js [data-split].is-inview .w:nth-child(2) > span { transition-delay: 60ms; } html.js [data-split].is-inview .w:nth-child(3) > span { transition-delay: 120ms; } html.js [data-split].is-inview .w:nth-child(4) > span { transition-delay: 180ms; } html.js [data-split].is-inview .w:nth-child(5) > span { transition-delay: 240ms; } html.js [data-split].is-inview .w:nth-child(6) > span { transition-delay: 300ms; } html.js [data-split].is-inview .w:nth-child(n+7) > span { transition-delay: 360ms; } @media (prefers-reduced-motion: reduce) { html.js [data-split] .w > span { transform: none; transition: none; } } @supports (animation-timeline: view()) { html[data-fx="full"] .t-opener .ghost { animation: ghost-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } @keyframes ghost-drift { from { transform: translateY(12%); } to { transform: translateY(-18%); } } .ticker { display: block; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; color: inherit; } a.ticker { min-height: 48px; } .ticker-track .tk-book { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgb(246 240 228 / 0.55); } .ticker-track .tk-sep { color: rgb(246 240 228 / 0.42); font-weight: 300; letter-spacing: 0; } .ticker:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; } .ticker-track { display: flex; gap: var(--s-5); width: max-content; animation: ticker 70s linear infinite; } .ticker-track span { display: inline-flex; align-items: center; gap: var(--s-3); font-size: clamp(0.8rem, 0.74rem + 0.3vw, 0.94rem); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--fg-2); } .ticker-track span .n { color: var(--accent); font-variant-numeric: tabular-nums; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } html[data-fx="lite"] .ticker-track { animation-duration: 140s; } @media (hover: hover) and (pointer: fine) { .btn { transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft), border-color var(--d-hover) var(--ease-soft), transform var(--d-tap) var(--ease-soft), box-shadow var(--d-hover) var(--ease-soft); } .btn:hover { box-shadow: 0 10px 30px -14px rgb(21 27 34 / 0.6); transform: translateY(-1px); } .plate img { transition: transform 1200ms var(--ease-soft); } .t-rail > :hover .plate img, .t-spread .plate:hover img, .t-opener .plate:hover img { transform: scale(1.03); } } main > .section:not(:first-child):not(.opener) { content-visibility: auto; contain-intrinsic-size: auto 900px; } .link, .t-cap a, .prose a, .foot-bottom a, .track-hint a, .track-error a, .co-demo-note a { padding-block: 12px; margin-block: -12px; display: inline-block; } .foot-logo { display: inline-flex; align-items: center; min-height: 40px; } .wl { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 92svh; overflow: auto; background: var(--p-ivory); color: var(--p-ink); } .wl::backdrop { background: rgb(21 27 34 / 0.6); } .wl-body { display: grid; gap: var(--s-4); padding: var(--s-6) var(--page) var(--s-7); } .wl-body .eyebrow { color: var(--p-brass-ink); } .wl-body .eyebrow .n { color: var(--p-brass-ink); } .wl-copy { font-size: var(--t-body); line-height: 1.6; color: rgb(21 27 34 / 0.78); max-width: 46ch; } .wl-body .btn, .wl-form .btn { justify-self: start; } .wl-close { position: absolute; top: var(--s-2); right: var(--s-2); width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 200; color: var(--p-ink); background: none; border: 0; cursor: pointer; } .wl-form { display: grid; gap: var(--s-4); } .wl-check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-cap); line-height: 1.55; } .wl-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; } .wl-status:empty { display: none; } .wl-status { font-size: var(--t-cap); color: var(--p-brass-ink); } .wl-privacy a { text-decoration: underline; text-underline-offset: 3px; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 768px) { .wl { margin: auto; max-width: 520px; } .wl-body { padding: var(--s-7); } } .t { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; } .t > * { min-width: 0; } @media (min-width: 1024px) { .t { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .plate { position: relative; overflow: hidden; isolation: isolate; background: var(--p-ink); color: var(--p-ivory); aspect-ratio: var(--ar, 4 / 5); width: 100%; } .plate > img, .plate > picture > img, .plate > video, .plate .reel-poster, .plate .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); } .plate--portrait { --ar: 9 / 16; } .plate--tall { --ar: 4 / 5; } .plate--wide { --ar: 16 / 9; } .plate--3x4 { --ar: 3 / 4; } .plate-wrap { position: relative; min-width: 0; } @media (min-width: 1024px) { .plate--cap { max-width: var(--plate-max); } .t-spread > .plate, .t-spread > .plate-wrap > .plate:not(.reel), .t-opener > .plate, .t-opener > .plate-wrap > .plate:not(.reel) { --ar: 4 / 5; max-height: min(80svh, 760px); } .t-spread > .plate, .t-spread > .plate-wrap, .t-opener > .plate, .t-opener > .plate-wrap { width: 100%; max-width: none; } } @media (max-width: 1023.98px) { .t-spread > .plate, .t-opener > .plate, .t-plate > .plate { width: calc(100% + 2 * var(--page)); } } @media (max-width: 1023px) { .plate--portrait { --ar: 4 / 5; } } .credit { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-3); } .credit .n { color: var(--accent); font-variant-numeric: tabular-nums; } .t-spread > .plate, .t-spread > .plate-wrap { order: -1; margin-inline: calc(-1 * var(--page)); } .t-spread > .copy { padding-top: var(--s-6); } @media (min-width: 1024px) { .t-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); } .t-spread > * { grid-row: 1; grid-column: 2; } .t-spread > .copy { padding-top: 0; grid-column: 1; align-self: center; } .t-spread > .plate, .t-spread > .plate-wrap { order: 0; margin-inline: 0; justify-self: stretch; align-self: center; } .t-spread[data-flip] > * { grid-column: 1; } .t-spread[data-flip] > .copy { grid-column: 2; } .t-spread > .copy + .copy { grid-column: 2; } .t-spread[data-flip] > .copy + .copy { grid-column: 1; } } .t-plate > .plate, .t-plate > .plate-wrap { margin-inline: calc(-1 * var(--page)); } @media (min-width: 1024px) { .t-plate > .plate, .t-plate > .plate-wrap { margin-inline: 0; grid-column: 3 / 11; grid-row: 1; justify-self: center; } .t-plate--full > .plate { grid-column: 1 / -1; } } .t-rail { display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page); margin-inline: calc(-1 * var(--page)); padding-inline: var(--page); scrollbar-width: none; } .t-rail::-webkit-scrollbar { display: none; } .t-rail > * { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; } .t-rail > :last-child { margin-right: var(--page); } .rail-count { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-4); } @media (min-width: 1024px) { .t-rail { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; } .t-rail > * { flex: none; } .t-rail > :last-child { margin-right: 0; } .t-rail > * { grid-column: span 4; } .t-rail--four > * { grid-column: span 3; } .rail-count { display: none; } } .t-opener { position: relative; } .t-opener > .plate, .t-opener > .plate-wrap { order: -1; margin-inline: calc(-1 * var(--page)); } .t-opener > .copy { padding-top: var(--s-6); position: relative; z-index: 1; } .t-opener .ghost { grid-row: 1; grid-column: 1 / -1; justify-self: end; position: absolute; right: 0; top: var(--s-4); z-index: 0; pointer-events: none; user-select: none; font-size: 30vw; font-weight: 100; line-height: 0.8; letter-spacing: -0.04em; color: var(--fg); opacity: 0.07; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .t-opener { min-height: 70svh; align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); } .t-opener[data-tall] { min-height: calc(100svh - var(--nav-h)); } .t-opener > :not(.ghost) { grid-row: 1; grid-column: 2; } .t-opener > .plate, .t-opener > .plate-wrap { order: 0; margin-inline: 0; justify-self: stretch; } .t-opener > .copy { padding-top: 0; grid-column: 1; align-self: center; } .t-opener[data-flip] > :not(.ghost) { grid-column: 1; } .t-opener[data-flip] > .copy { grid-column: 2; } .t-opener .ghost { top: 0; font-size: clamp(8rem, 24vw, 22rem); } .t-opener[data-flip] .ghost { right: auto; left: 0; } } .t-index { display: block; } .ix-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 72px; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); color: inherit; } .ix-row:first-child { border-top: 1px solid var(--rule); } .ix-row .ix-n { font-size: var(--t-cap); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; } .ix-row .ix-title { display: block; font-size: var(--t-h3); font-weight: calc(500 + var(--wc) / 2); line-height: 1.25; letter-spacing: -0.005em; overflow-wrap: anywhere; } .ix-row .ix-dek { display: block; font-size: var(--t-cap); color: var(--fg-3); margin-top: 2px; } .ix-row .ix-end { text-align: right; font-size: var(--t-cap); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (min-width: 1024px) { .ix-row { grid-template-columns: 4rem minmax(0, 1fr) auto; } } a.ix-row { transition: background var(--d-hover) var(--ease-soft); } @media (hover: hover) and (pointer: fine) { a.ix-row:hover { background: rgb(21 27 34 / 0.04); } [data-ground="ink"] a.ix-row:hover, [data-ground="moss"] a.ix-row:hover, [data-ground="espresso"] a.ix-row:hover, [data-ground="clay"] a.ix-row:hover { background: rgb(246 240 228 / 0.06); } } .t-quote blockquote { position: relative; } .t-quote blockquote .t-quote-text { text-wrap: balance; } .t-quote cite { display: block; margin-top: var(--s-5); } @media (min-width: 1024px) { .t-quote > .q { grid-column: 2 / 11; } .t-quote blockquote::before { content: '\201C'; position: absolute; left: -0.6em; top: -0.1em; font-size: var(--t-quote); font-weight: 200; color: var(--accent); line-height: 1; } } .t-form > .copy { padding-bottom: var(--s-6); } @media (min-width: 1024px) { .t-form > .copy { padding-bottom: 0; grid-column: 1 / 5; grid-row: 1; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--offer-h) + var(--s-6)); } .t-form > :not(.copy) { grid-column: 6 / -1; grid-row: 1; } } .t-spread > .copy > .t-chap, .t-opener:not([data-tall]) > .copy > .t-chap { font-size: clamp(2.375rem, 1.4rem + 3.4vw, 4.5rem); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); } .section-head { max-width: 64ch; } @media (min-width: 1024px) { .section-head { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: end; } .section-head > * { grid-column: 1; } .section-head > .eyebrow { grid-row: 1; } .section-head > h1, .section-head > h2 { grid-row: 2; } .section-head > .t-deck { grid-column: 2; grid-row: 2; align-self: end; max-width: 48ch; margin: 0; } } .sig { display: flex; flex-direction: column; gap: var(--s-1); } .sig-name { font-size: var(--t-h3); font-weight: 300; letter-spacing: 0.08em; } .plate-wrap { position: relative; } @media (min-width: 1024px) { .plate--cap { max-width: var(--plate-max); justify-self: end; width: 100%; } .t-spread[data-flip] .plate--cap { justify-self: start; } } .cover { position: relative; isolation: isolate; } .cover-photo { position: relative; overflow: hidden; isolation: isolate; height: 78svh; min-height: 460px; max-height: 980px; } .cover-bg { position: absolute; inset: 0; z-index: 0; } .cover-bg .slide { position: absolute; inset: 0; } .cover-bg .slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 30%); } .cover-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgb(21 27 34 / 0.5) 0%, rgb(21 27 34 / 0.12) 32%, rgb(21 27 34 / 0) 55%); } .cover-inner { position: relative; z-index: 2; height: 100%; padding-top: calc(var(--nav-h) + var(--offer-h) + var(--s-5)); } .cover-mast { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; } .cover-issue { padding-left: 0.2em; } .cover-mast .t-mast { display: block; font-size: clamp(3.25rem, 1.4rem + 9.6vw, 11rem); } .cover-issue { color: rgb(246 240 228 / 0.72); } .cover-text { padding-block: var(--s-7); } .cover-text-inner { display: grid; gap: var(--s-5); } .cover-lead { display: grid; gap: var(--s-3); } .cover-text .t-coverline { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem); } .cover-more { display: grid; gap: var(--s-4); align-content: start; } .cover-more .t-deck { color: var(--fg-2); font-size: var(--t-body); max-width: 46ch; } .cover-folio { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: rgb(246 240 228 / 0.7); } .cover-folio [data-open-pill]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; background: var(--p-sage); } .cover-folio [data-open-pill].is-closed::before { background: rgb(246 240 228 / 0.5); } .cover-folio .wx { display: inline-flex; align-items: center; gap: 6px; } .cover-folio .wx[hidden] { display: none; } .wx-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .cover .slides-count { font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .cover-photo { height: 84svh; } .cover-text { padding-block: var(--s-8); } .cover-text-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: end; } .cover-mast .t-mast { font-size: clamp(6rem, 2rem + 10vw, 12rem); } } .ff-line { font-size: clamp(2.5rem, 1rem + 6.4vw, 4.5rem); font-weight: calc(500 + var(--wc)); line-height: 0.98; letter-spacing: -0.035em; overflow-wrap: anywhere; hyphens: none; } @media (min-width: 1024px) { .ff-line { font-size: clamp(3rem, 0.4rem + 4.3vw, 5.5rem); } } .ff-deck { font-size: var(--t-deck); line-height: 1.45; color: var(--fg-2); max-width: 34ch; overflow-wrap: anywhere; } .ff-points { display: grid; border-top: 1px solid var(--rule); } .ff-points li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--t-body); line-height: 1.5; color: var(--fg-2); } .ff-points .n { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; color: var(--accent); padding-top: 0.3em; } .ff-points strong { display: block; font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.005em; color: var(--fg); } .ff-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); padding-top: var(--s-2); } .ff-price { font-size: var(--t-price-lg); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; } .ff-price .cur { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; color: var(--fg-3); vertical-align: 0.6em; } .ff-show.is-live [data-ff-slide] { min-height: var(--ff-h, 0px); align-content: start; touch-action: pan-y pinch-zoom; } .ff-show.is-live [data-ff-slide] + [data-ff-slide] { margin-top: 0; } @media (min-width: 1024px) { .ff-show.is-live [data-ff-slide] { align-content: center; } } @media (prefers-reduced-motion: no-preference) { .ff-show.is-live [data-ff-slide] { animation: ff-in 520ms var(--ease-out) both; } } @keyframes ff-in { from { opacity: 0; } to { opacity: 1; } } .ff-ctl { display: grid; grid-template-columns: 44px minmax(0, max-content) 44px; justify-content: center; align-items: center; column-gap: var(--s-2); } .ff-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-ui); border-radius: 999px; color: var(--fg); transition: border-color var(--d-hover) var(--ease-out); } .ff-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } @media (hover: hover) { .ff-btn:hover { border-color: var(--fg); } } .ff-dots { display: flex; flex-wrap: wrap; justify-content: center; } .ff-dot { width: 40px; height: 44px; display: grid; place-items: center; } .ff-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--fg-3); transition: width var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out); } .ff-dot[aria-current="true"]::before { width: 24px; background: var(--accent); } .academy-mark { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-2); margin-top: 0; } .studio-mark { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; margin-bottom: var(--s-4); } .studio-mark-name { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 300; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; } .studio-mark-sub { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.5em; padding-left: 0.5em; text-transform: uppercase; color: var(--fg-2); } .pkg-row { align-items: stretch; } .pkg-row > .pkg-card { grid-column: span 3; } @media (max-width: 767.98px) { .pkg-row > .pkg-card { grid-column: 1 / -1; } } @media (min-width: 768px) and (max-width: 1279.98px) { .pkg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } .pkg-row > .pkg-card { grid-column: auto; } } .pkg-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--rule); } .pkg-card--featured { border-top-color: var(--accent); } .pkg-badge { position: absolute; top: calc(-1 * var(--s-3)); left: 0; padding: 2px var(--s-2); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); } .pkg-tier { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); } .pkg-name { font-size: var(--t-h3); font-weight: calc(500 + var(--wc) / 2); } .pkg-price { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-price-lg); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; } .pkg-price .cur { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; color: var(--fg-3); } .pkg-price .from { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .pkg-features { display: grid; gap: var(--s-2); } .pkg-features li { position: relative; padding-left: var(--s-6); font-size: var(--t-cap); line-height: 1.5; color: var(--fg-2); } .pkg-features li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: var(--macron-w); height: 1px; background: var(--accent); } .pkg-desc { font-size: var(--t-cap); color: var(--fg-3); } .pkg-cta { margin-top: auto; } .reserve .t-chap { font-size: clamp(2.375rem, 1.1rem + 4.6vw, 5rem); } .opener { padding-top: calc(var(--nav-h) + var(--offer-h) + var(--s-6)); } .progress-steps { display: flex; gap: var(--s-4); margin-bottom: var(--s-6); } .progress-step { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .progress-step .progress-dot { width: var(--macron-w); height: var(--macron-h); background: var(--rule-ui); font-size: 0; } .progress-step.is-current { color: var(--fg); } .progress-step.is-current .progress-dot, .progress-step.is-done .progress-dot { background: var(--accent); } .progress-step .progress-label { white-space: nowrap; } @media (max-width: 479px) { .progress-step:not(.is-current) .progress-label { display: none; } } .form-step { display: none; } .form-step.is-active { display: block; } .form-step h3 { margin-bottom: var(--s-5); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } .form-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 479px) { .form-grid { grid-template-columns: minmax(0, 1fr); } } .field { position: relative; } .field .error-msg { display: none; font-size: var(--t-cap); color: var(--accent); margin-top: var(--s-2); } .field.has-error .error-msg { display: block; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--accent); } .form-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-6); } .form-nav .btn svg { display: none; } .step-hint { color: var(--fg-2); margin-bottom: var(--s-4); } .check-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); } .check-pill { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--rule-ui); cursor: pointer; transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft); } .check-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .check-pill .dot { display: none; } .check-pill:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); } .check-pill:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .pick-error { font-size: var(--t-cap); color: var(--accent); margin-top: var(--s-3); } .quote-lines { display: grid; } .quote-lines li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-cap); } .quote-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .quote-panel { border-top: 1px solid var(--fg); padding-top: var(--s-4); } .quote-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .quote-head svg { display: none; } .quote-head .title { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .ai-pulse { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .ai-pulse::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 6px; } .quote-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--fg); margin-top: var(--s-3); } .quote-total .label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); } .quote-total .value { font-size: var(--t-price-lg); font-weight: 300; font-variant-numeric: tabular-nums; } .quote-note { font-size: var(--t-cap); color: var(--fg-3); } .form-success { text-align: center; padding: var(--s-7) 0; } .form-success .mark { width: 64px; height: 64px; margin: 0 auto var(--s-5); display: grid; place-items: center; border: 1px solid var(--fg); } .form-success .mark svg { width: 24px; height: 24px; } .form-success h3 { margin-bottom: var(--s-3); } .form-success p { margin: 0 auto var(--s-3); } .co-order-id { font-size: var(--t-h2); font-weight: 300; letter-spacing: 0.06em; margin: var(--s-3) 0 var(--s-4); font-variant-numeric: tabular-nums; } .map-frame { aspect-ratio: 16 / 9; max-height: 480px; border: 1px solid var(--rule); background: var(--p-oatmeal); } @media (min-width: 1024px) { .map-frame { aspect-ratio: auto; width: 100%; height: min(72vh, 640px); max-height: none; } } .form-direct { margin-top: var(--s-7); } .form-direct .eyebrow { margin-bottom: var(--s-3); } @media (min-width: 768px) { .form-direct .t-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } .form-direct .ix-row { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-2); border-top: 1px solid var(--rule); border-bottom: 0; padding-block: var(--s-4) var(--s-2); } } .map-frame { position: relative; overflow: hidden; } .map-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(0.95); } .map-under { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-2); padding: var(--s-5); text-align: center; } .map-pin { width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin-bottom: var(--s-3); } .map-under-title { font-size: var(--t-h3); font-weight: 500; } .map-under-dek { font-size: var(--t-cap); color: var(--fg-3); letter-spacing: 0.1em; text-transform: uppercase; } .filter-bar { align-items: center; } @media (min-width: 1024px) { .filter-bar { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } } @media (min-width: 1280px) { .shop-grid .product-foot { flex-direction: column; align-items: stretch; gap: var(--s-2); } .shop-grid .product-cta .btn { width: 100%; } } .cat-switch { -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 1) calc(100% - 48px), rgb(0 0 0 / 0)); mask-image: linear-gradient(to right, rgb(0 0 0 / 1) calc(100% - 48px), rgb(0 0 0 / 0)); } .shop-count { margin-left: auto; white-space: nowrap; } @media (max-width: 639px) { .shop-count { display: none; } } .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--gap); } @media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-8) var(--gap); } } .product-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; } .product-card.is-hidden { display: none; } .product-img { background: var(--p-oatmeal); } .product-img img { object-fit: cover; } .product-tag { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 2; color: var(--p-ivory); text-shadow: 0 1px 2px rgb(21 27 34 / 0.6); } .product-flag { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 4px var(--s-2); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-ink); background: var(--p-brass-lit); } .product-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--s-2); } .product-name { font-size: var(--t-body); } .product-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--rule); } .product-cta .btn { min-height: 40px; padding-inline: var(--s-3); } @media (max-width: 479px) { .product-foot { flex-direction: column; align-items: stretch; } .product-cta .btn { width: 100%; } } .product-card .live-flag { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; } .product-label { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-4) var(--s-6); text-align: center; color: var(--fg); background: var(--bg); } .product-label::after { content: ''; position: absolute; inset: var(--s-3); border: 1px solid var(--rule); pointer-events: none; } .label-mark { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--fg-2); } .label-kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); max-width: 90%; } .label-name { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; max-width: 12ch; overflow-wrap: anywhere; } .label-line { font-size: var(--t-cap); color: var(--fg-2); } .product-label .product-tag { display: none; } .len-chips { display: flex; flex-wrap: wrap; gap: 6px; } .len { min-width: 40px; min-height: 40px; padding: 0 var(--s-2); font-size: var(--t-cap); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg-2); border: 1px solid var(--rule); } .len[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); } .product-cta .btn:disabled { opacity: 0.6; cursor: default; } .product-card .live-was { font-size: var(--t-cap); } @media (hover: hover) and (pointer: fine) { .product-img img { transition: transform 900ms var(--ease-soft); } .product-card:hover .product-img img { transform: scale(1.04); } } .store-toast { position: fixed; left: 50%; bottom: calc(var(--s-4) + var(--dock-h) + var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-sheet) + 1); max-width: min(420px, calc(100% - 2 * var(--s-4))); padding: var(--s-3) var(--s-5); font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.04em; text-align: center; color: var(--p-ivory); background: var(--p-ink); box-shadow: var(--lift), var(--rim); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: transform var(--d-hover) var(--ease-out), opacity var(--d-hover) var(--ease-out); } .store-toast.is-shown { transform: translate(-50%, 0); opacity: 1; } .builder { align-items: start; } @media (min-width: 1024px) { .builder > .builder-options { grid-column: 1 / 8; grid-row: 1; } .builder > .builder-summary { grid-column: 9 / -1; grid-row: 1; position: sticky; top: calc(var(--nav-h-stuck) + var(--offer-h) + var(--s-5)); } } .builder-opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); min-height: 64px; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); cursor: pointer; } .builder-opt:first-child { border-top: 1px solid var(--rule); } .builder-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .builder-opt .builder-check { display: block; width: 24px; height: 2px; margin-top: 12px; background: var(--rule-ui); font-size: 0; transform: scaleX(0.4); transform-origin: left; transition: background var(--d-hover) var(--ease-soft), transform var(--d-hover) var(--ease-soft); } .builder-opt.is-checked .builder-check { background: var(--accent); transform: scaleX(1); } .builder-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .builder-opt-name { font-size: var(--t-body); font-weight: 500; line-height: 1.35; } .builder-opt-desc { font-size: var(--t-cap); color: var(--fg-3); } .builder-opt-price { font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .builder-summary { padding: var(--s-5) 0 0; border-top: 1px solid var(--fg); } .builder-lines { display: grid; margin-top: var(--s-4); } .builder-lines li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-cap); } .builder-lines li.empty { color: var(--fg-3); } .builder-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .builder-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) 0; margin: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--fg); } .builder-total .value { font-size: var(--t-price-lg); font-weight: 300; font-variant-numeric: tabular-nums; } .builder-note { margin-top: var(--s-3); color: var(--fg-3); } @media (max-width: 1023px) { .builder-summary { margin-top: var(--s-6); } } .course-index .course-row { grid-template-columns: 3.5rem minmax(0, 1fr); row-gap: var(--s-3); align-items: start; padding-block: var(--s-5); } .course-index .course-row .ix-end { grid-column: 2; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); } @media (min-width: 1024px) { .course-index .course-row { grid-template-columns: 4rem minmax(0, 1fr) auto; } .course-index .course-row .ix-end { grid-column: 3; display: grid; justify-items: end; text-align: right; gap: var(--s-2); } } .course-blurb { display: block; margin-top: var(--s-2); max-width: 60ch; } .course-meta { display: block; margin-top: var(--s-2); } .course-end .t-price small { font-size: var(--t-cap); font-weight: 400; color: var(--fg-3); } .course-includes .ix-row { min-height: 48px; padding-block: var(--s-2); grid-template-columns: 2.5rem minmax(0, 1fr); } .course-includes .ix-title { font-size: var(--t-body); font-weight: 400; } .field-group { margin-bottom: var(--s-5); } .field-legend { display: block; margin-bottom: var(--s-3); color: var(--fg-2); } .enrol-total { padding: var(--s-4) 0; margin-bottom: var(--s-5); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--rule); font-size: var(--t-cap); line-height: 1.6; color: var(--fg-2); } .enrol-total strong { color: var(--fg); font-weight: 500; } .enrol-line { margin-top: var(--s-2); } .track-row { row-gap: var(--s-4); } .enrol-done .enrol-actions { margin-top: var(--s-5); } .enrol-done { text-align: center; padding: var(--s-6) 0; } .enrol-done h3 { margin-bottom: var(--s-3); } .enrol-done p { margin: 0 auto var(--s-3); } .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); } .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); grid-auto-flow: dense; } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gallery-item { position: relative; overflow: hidden; margin: 0; background: var(--p-ink); aspect-ratio: 4 / 5; cursor: pointer; } .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); } .gallery-item.is-hidden { display: none; } .gallery-item-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-3) var(--s-3); color: var(--p-ivory); background: linear-gradient(to top, rgb(21 27 34 / 0.78), rgb(21 27 34 / 0)); opacity: 0; transform: translateY(6px); transition: opacity var(--d-hover) var(--ease-soft), transform var(--d-hover) var(--ease-soft); } .gallery-item-overlay .gallery-item-cat { color: rgb(246 240 228 / 0.75); } .gallery-item-title { font-size: var(--t-cap); font-weight: 500; } .gallery-item:focus-visible .gallery-item-overlay, .gallery-item:hover .gallery-item-overlay { opacity: 1; transform: none; } @media (hover: none) { .gallery-item-overlay { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { .gallery-item:hover img { transform: scale(1.04); } } .gallery-item.flip-animating, .gallery-item.flip-enter, .gallery-item.flip-enter-active { transition: transform 600ms var(--ease-soft), opacity 600ms var(--ease-soft); } .shelf figure { margin: 0; } @media (min-width: 1024px) { .shelf > :nth-child(2) { margin-top: var(--s-7); } } .reading { padding-top: calc(var(--nav-h) + var(--offer-h) + var(--s-7)); } .checkout-shell { align-items: start; } @media (min-width: 1024px) { .checkout-shell > .checkout-main { grid-column: 1 / 8; grid-row: 1; } .checkout-shell > .co-summary { grid-column: 9 / -1; grid-row: 1; position: sticky; top: calc(var(--nav-h-stuck) + var(--offer-h) + var(--s-5)); } } .co-panel { padding-top: var(--s-5); border-top: 1px solid var(--fg); } .co-title { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); color: var(--fg); } .co-title .n { color: var(--accent); } .co-items { display: grid; } .co-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: var(--s-2); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); } .co-item img { width: 64px; height: 80px; object-fit: cover; grid-row: 1 / 3; background: var(--p-oatmeal); } .co-item-info { display: grid; gap: 2px; min-width: 0; } .co-item-info strong { font-weight: 500; font-size: var(--t-body); overflow-wrap: anywhere; } .co-item-info span { font-size: var(--t-cap); color: var(--fg-3); } .co-qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-ui); grid-column: 2; } .co-qty button { width: 40px; height: 40px; font-size: 1.1rem; font-weight: 300; color: var(--fg); } .co-qty span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-cap); } .co-item-price { grid-column: 3; grid-row: 1; font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .co-remove { grid-column: 3; grid-row: 2; justify-self: end; width: 40px; height: 40px; font-size: 1.25rem; font-weight: 200; color: var(--fg-3); } .co-choice { display: grid; } .co-choice .choice strong { display: block; font-weight: 500; font-size: var(--t-body); } .co-choice .choice .t-cap { display: block; } .co-chip.is-active .mark { background: var(--accent); transform: scaleX(1); } .co-demo-note { margin-top: var(--s-4); color: var(--fg-3); } .co-summary { padding-top: var(--s-5); border-top: 1px solid var(--fg); } .co-lines { display: grid; margin-top: var(--s-4); } .co-lines li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-cap); } .co-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .co-line-total { display: flex; justify-content: space-between; padding: var(--s-2) 0; font-size: var(--t-cap); color: var(--fg-2); font-variant-numeric: tabular-nums; } .co-grand { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) 0; margin: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--fg); } .co-grand span:last-child { font-size: var(--t-price-lg); font-weight: 300; font-variant-numeric: tabular-nums; } .co-note { margin-top: var(--s-3); color: var(--fg-3); } @media (max-width: 1023px) { .co-summary { margin-top: var(--s-6); } } .co-success { text-align: center; padding: var(--s-7) 0; align-items: center; } .co-success .mark { width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; border: 1px solid var(--fg); } .co-success .mark svg { width: 24px; height: 24px; } .co-success .cta-row { justify-content: center; } .co-success p { margin-inline: auto; } .track-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; } .track-form .field { margin-bottom: 0; } @media (max-width: 479px) { .track-form { grid-template-columns: minmax(0, 1fr); } .track-form .btn { width: 100%; } } .track-hint, .track-error { font-size: var(--t-cap); color: var(--fg-2); } .track-error { color: var(--accent); } .my-orders { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .my-orders-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-right: var(--s-2); } .my-order-chip { min-height: 40px; padding: 0 var(--s-3); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--rule-ui); color: var(--fg); font-variant-numeric: tabular-nums; } .track-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--fg); } .track-id { font-size: var(--t-h2); font-weight: 300; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .track-meta { font-size: var(--t-cap); color: var(--fg-2); margin-top: var(--s-1); } .badge-live { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .track-steps { display: grid; counter-reset: none; } .track-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); color: var(--fg-3); } .track-steps li .dot { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--rule-ui); font-size: var(--t-label); font-weight: 600; font-variant-numeric: tabular-nums; } .track-steps li strong { display: block; font-weight: 500; font-size: var(--t-body); } .track-steps li span:not(.dot) { font-size: var(--t-cap); } .track-steps li.is-done { color: var(--fg); } .track-steps li.is-done .dot { background: var(--fg); color: var(--bg); border-color: var(--fg); } .track-steps li.is-current .dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .track-steps li.is-cancelled .dot { background: var(--accent); color: var(--on-accent); } .product-tag { left: var(--s-3); top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 10px; color: var(--p-ivory); text-shadow: none; background: rgb(21 27 34 / 0.55); box-shadow: var(--rim); max-width: calc(100% - 2 * var(--s-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .product-tag { background: rgb(21 27 34 / 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .product-tag .n { color: var(--p-brass-lit); } @media (max-width: 767px) { .product-tag .cat { display: none; } } .nav-logo-name { font-size: 1.05rem; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-overlay-links a { grid-template-columns: 2.5rem minmax(0, 1fr); min-height: 60px; } .nav-overlay-links a.is-active::after, .nav-overlay-links a[aria-current="page"]::after { grid-column: 2; } @media (min-width: 1024px) { .nav-overlay { display: none; } } .site-footer { padding: var(--s-7) 0 var(--s-5); } .foot-row { display: grid; gap: var(--s-6); } @media (min-width: 768px) { .foot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } } .foot-brand .t-cap { color: var(--fg-2); line-height: 1.6; } .foot-links { display: grid; gap: 0; } .foot-links li a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--t-cap); color: var(--fg); } .foot-bottom { margin-top: var(--s-6); } .bk-cat summary { display: grid; grid-template-columns: minmax(0, 1fr) 3rem 44px; align-items: center; gap: var(--s-3); } .bk-cat summary::after { width: 44px; text-align: center; margin: 0; } .bk-cat-n { margin: 0; text-align: right; } .bk-sec { padding: var(--s-4) 0; } .bk-items li, .bk-pick { min-height: 56px; } .bk-hint { margin-top: var(--s-3); } .gallery-item img { object-position: center 12%; } @media (max-width: 1023px) { .t-spread > .plate, .t-spread > .plate-wrap > .plate:not(.reel), .t-opener > .plate, .t-opener > .plate-wrap > .plate:not(.reel) { --ar: 4 / 3; } .t-spread > .copy, .t-opener > .copy { padding-top: var(--s-5); } } .club-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .club-card, .cert-card, .path-card, .tl-step, .atb, .how-row li { min-width: 0; } @media (min-width: 768px) { .club-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } } .club-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); border: 1px solid var(--rule); background: var(--bg); color: var(--fg); } .club-card--member { border-color: var(--bg); } .club-card .btn { align-self: flex-start; margin-top: auto; } .club-kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .club-name { font-size: var(--t-h2); font-weight: calc(300 + var(--wc)); letter-spacing: -0.02em; line-height: 1.05; } .club-sub { font-size: var(--t-cap); color: var(--fg-2); } .club-price { font-size: var(--t-price-lg); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; margin-block: var(--s-2); } .club-price .cur, .club-price .per { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .club-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); } .club-list li { position: relative; padding-left: var(--s-6); font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); } .club-list li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: var(--macron-w); height: 1px; background: var(--accent); } .club-list strong { color: var(--fg); font-weight: 600; } .journey .ix-row { min-height: 60px; } .timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); } @media (min-width: 768px) and (max-width: 1023.98px) { .tl-step { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-5); } .tl-note { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } @media (min-width: 1024px) { .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .tl-step { padding-top: var(--s-4); border-top: 1px solid var(--accent); display: grid; gap: var(--s-2); align-content: start; } .tl-when { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .tl-name { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; } .tl-note { font-size: var(--t-cap); color: var(--fg-2); line-height: 1.5; } .hw-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .hw-set { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); min-width: 0; } .hw-set legend { margin-bottom: var(--s-3); color: var(--fg-2); } .hw-choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .hw-choices > .t-label { width: 100%; color: var(--fg-2); } .hw-grid .check-pill { text-transform: none; letter-spacing: 0.01em; font-size: var(--t-cap); font-weight: 500; } .hw-more { border-top: 1px solid var(--rule); } .hw-more:last-of-type { border-bottom: 1px solid var(--rule); } .hw-more summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; list-style: none; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); } .hw-more summary::-webkit-details-marker { display: none; } .hw-more summary::after { content: '+'; font-size: 1.25rem; font-weight: 200; } .hw-more[open] summary::after { content: '\2212'; } .hw-more[open] { padding-bottom: var(--s-4); } .hw-more > .check-grid { margin-bottom: var(--s-4); } .hw-end { gap: var(--s-3); } .hw-privacy { display: grid; gap: var(--s-3); } .hw-data-consent { align-items: flex-start; font-size: var(--t-cap); line-height: 1.55; } .hw-data-consent input { flex: none; margin-top: 2px; } .hw-note { margin-bottom: var(--s-3); color: var(--fg-2); } .hw-join, .hw-consent { text-transform: none; letter-spacing: 0.01em; font-size: var(--t-cap); font-weight: 500; line-height: 1.45; padding-block: var(--s-3); min-height: 56px; } .hw-error { font-size: var(--t-cap); color: var(--accent); } .academy-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } @media (min-width: 1024px) { .academy-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: end; } .academy-intro > .eyebrow { grid-column: 1 / -1; } .academy-intro > .academy-line { grid-column: 1; } .academy-intro > .academy-copy { grid-column: 2; } } .academy-line { font-size: clamp(2.5rem, 1.1rem + 6vw, 6rem); font-weight: calc(300 + var(--wc)); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; } .academy-copy { display: grid; gap: var(--s-4); max-width: 62ch; } .academy-close { display: grid; gap: var(--s-5); justify-items: start; } .academy-close .academy-line { max-width: 20ch; font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.75rem); } .cert-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } @media (min-width: 1024px) { .cert-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } } .cert-card { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .cert-body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; } @media (min-width: 768px) and (max-width: 1023.98px) { .cert-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; } } .cert-n { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); } .cert-n .n { color: var(--accent); } .cert-name { font-size: var(--t-h2); font-weight: calc(300 + var(--wc)); line-height: 1.08; letter-spacing: -0.02em; } .cert-line { font-size: var(--t-body); font-weight: 600; } .cert-methods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); } .cert-methods span { padding: 6px 10px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--rule-ui); } .cert-fee { margin-top: auto; padding-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); } .path-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } @media (min-width: 768px) { .path-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .path-card--lead { grid-column: 1 / -1; } } @media (min-width: 1024px) { .path-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .path-card--lead { grid-column: auto; } } .path-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--rule); } .path-card--lead { border-color: var(--accent); } .path-card .btn { align-self: stretch; margin-top: auto; padding-inline: var(--s-3); } .path-n { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .path-name { font-size: var(--t-h3); font-weight: 500; } .path-fee { font-size: var(--t-cap); font-weight: 600; margin-block: var(--s-2); } .method-list { display: flex; flex-wrap: wrap; gap: 6px; } .method-list li { padding: 6px 10px; font-size: var(--t-cap); border: 1px solid var(--rule); } .upgrade-path { display: grid; gap: 0; } .upgrade-path li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-bottom: 1px solid var(--rule); font-size: var(--t-body); } .upgrade-path li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; border: 1px solid var(--accent); transform: translateY(-50%) rotate(45deg); } .upgrade-path li:last-child { font-weight: 600; } .upgrade-path li:last-child::before { background: var(--accent); } .atb-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } @media (min-width: 768px) { .atb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .atb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .atb { padding-top: var(--s-4); border-top: 1px solid var(--fg); display: grid; gap: var(--s-2); align-content: start; } .atb p:not(.atb-n) { font-size: var(--t-cap); color: var(--fg-2); line-height: 1.55; } .atb-n { font-size: var(--t-h3); font-weight: 500; } .atb--lead { border-top-color: var(--accent); } .how-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } @media (min-width: 768px) { .how-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } } .how-row li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--t-cap); color: var(--fg-2); line-height: 1.55; } .how-row strong { display: block; font-size: var(--t-h3); font-weight: 400; color: var(--fg); } .how-n { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; color: var(--accent); } .faq { display: grid; grid-template-columns: minmax(0, 1fr); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-item:first-child { border-top: 1px solid var(--rule); } .faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s-3); min-height: 60px; padding-block: var(--s-3); cursor: pointer; list-style: none; font-size: var(--t-body); font-weight: 500; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 200; text-align: right; } .faq-item[open] summary::after { content: '\2212'; } .faq-item p { padding-bottom: var(--s-4); font-size: var(--t-cap); color: var(--fg-2); line-height: 1.6; max-width: 62ch; } .links-page { padding-block: var(--s-6) var(--s-8); } .links-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); } .links-mark { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-h3); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg); } .links-head .t-deck { margin-top: 0; } .links-open { color: var(--fg-3); } .links-list .ix-row { min-height: 56px; padding-block: var(--s-2); } @media (max-width: 1023.98px) { .links-list .ix-row { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-3); } } .links-list .ix-title { font-size: var(--t-body); font-weight: 500; } .links-social { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-5); padding: 0; list-style: none; } .links-social a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-cap); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); } .links-social a:hover { color: var(--fg); } @media (max-width: 1023.98px) { .links-plate, .links-strap { display: none; } } @media (min-width: 1024px) { .links-page { padding-block: var(--s-8); } .links-spread { align-items: center; } } .legal { max-width: 760px; } .legal-date { color: var(--fg-3); } .legal .prose h2 { margin-top: var(--s-7); } .legal .prose ul { list-style: disc; padding-left: 1.25em; } .legal .prose li + li { margin-top: var(--s-2); } .legal .prose li::marker { color: var(--accent); } .foot-legal { display: inline-flex; gap: var(--s-4); } .legal .legal-date { margin-top: var(--s-3); } .links-list { counter-reset: link; } .links-list .ix-row { counter-increment: link; } .links-list .ix-n::before { content: counter(link, decimal-leading-zero); } .svc-index-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); } .svc-index-copy { display: grid; gap: var(--s-3); } .svc-index-copy .svc-index-deck { margin-top: 0; } .svc-index-deck { margin-top: var(--s-3); max-width: 46ch; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); } @media (min-width: 1024px) { .svc-index-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: end; } } .svc-search input { width: 100%; min-height: 48px; padding: 0 var(--s-4); font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: 1px solid var(--rule-ui); border-radius: 0; } .svc-search input:focus { outline: none; border-color: var(--fg); } .svc-search input::placeholder { color: var(--fg-3); } .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); } .cat-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; color: inherit; } .cat-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--p-oatmeal); } .cat-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 600ms var(--ease-soft); } .cat-text { display: grid; gap: 4px; } .cat-name { font-size: var(--t-body); font-weight: 500; line-height: 1.3; } .cat-blurb { font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); max-width: 46ch; } .cat-meta { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .cat-card .cat-meta { display: grid; gap: 2px; } .cat-card .cat-from { white-space: nowrap; color: var(--fg-2); } .cat-card--feature .cat-meta { display: flex; flex-wrap: wrap; gap: 2px 0.7em; } .cat-card--feature .cat-from::before { content: "ยท"; margin-right: 0.7em; color: var(--fg-3); } .cat-card--feature { grid-column: 1 / -1; } .cat-card--feature .cat-pic { aspect-ratio: 4 / 3; } .cat-card--feature .cat-name { font-size: var(--t-h3); } @media (hover: hover) and (pointer: fine) { .cat-card:hover .cat-pic img { transform: scale(1.03); } .cat-card:hover .cat-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-ui); } } @media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--s-6) var(--s-4); } .cat-card--feature:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .cat-card--feature:nth-child(2) { grid-column: 3 / 5; grid-row: 3 / 5; } .cat-card--feature .cat-pic { aspect-ratio: auto; flex: 1 1 0; min-height: 240px; } } .svc-results { margin-bottom: var(--s-6); } .svc-results-count { margin-bottom: var(--s-3); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .svc-hit-cat { grid-column: 1 / -1; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .svc-hit-cat a { color: var(--accent); } .svc-help-inner { display: grid; gap: var(--s-5); } .svc-help-copy { display: grid; gap: var(--s-3); } @media (min-width: 1024px) { .svc-help-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: center; } .svc-help-inner .cta-row { justify-content: flex-end; } } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .crumbs a { display: inline-flex; align-items: center; min-height: 40px; color: var(--fg-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-ui); } .crumbs-sep { color: var(--rule-ui); } .cat-switch { margin-top: var(--s-2); margin-bottom: var(--s-5); } .cat-switch .chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); } .cat-layout { display: grid; gap: var(--s-6); } .cat-head { display: grid; gap: var(--s-5); align-content: start; } .cat-plate { --ar: 3 / 2; max-height: 34svh; } .cat-copy { display: grid; gap: var(--s-3); align-content: start; } .cat-lead { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); max-width: 52ch; } .cat-copy .cat-meta { margin-top: var(--s-1); } .cat-book { justify-self: start; margin-top: var(--s-2); } @media (min-width: 768px) { .cat-layout:not(.is-short) .cat-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: center; } .cat-layout:not(.is-short) .cat-plate { --ar: 4 / 5; max-height: 60svh; } .cat-layout.is-short { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); grid-template-areas: "plate copy" "plate rows"; grid-template-rows: auto minmax(0, 1fr); align-items: start; } .cat-layout.is-short .cat-head { display: contents; } .cat-layout.is-short .cat-plate { grid-area: plate; --ar: 4 / 5; max-height: 76svh; } .cat-layout.is-short .cat-copy { grid-area: copy; } .cat-layout.is-short .cat-rows { grid-area: rows; } } @media (min-width: 1024px) { .cat-layout:not(.is-short) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); align-items: start; } .cat-layout:not(.is-short) .cat-head { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--nav-h-stuck) + var(--offer-h) + var(--s-5)); } .cat-layout:not(.is-short) .cat-plate { --ar: 4 / 3; max-height: 42svh; } } .price-dur { display: block; font-size: var(--t-cap); color: var(--fg-3); margin-top: 2px; } .row-book { display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--rule-ui); transition: background var(--d-hover) var(--ease-soft), color var(--d-hover) var(--ease-soft); } @media (hover: hover) and (pointer: fine) { .row-book:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } } .live-was { text-decoration: line-through; color: var(--fg-3); margin-right: 6px; } .cat-rows .price-rows { display: grid; } .cat-rows .price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; column-gap: var(--s-3); row-gap: 6px; align-items: center; padding-block: var(--s-3); border-top: 1px solid var(--rule); } .cat-rows .price-row:last-child { border-bottom: 1px solid var(--rule); } .cat-rows .name { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-body); font-weight: 500; line-height: 1.35; } .cat-rows .amt { font-size: var(--t-price); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .cat-rows .price-desc { grid-column: 1 / -1; max-width: 62ch; font-size: var(--t-cap); line-height: 1.55; color: var(--fg-3); } .cat-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); margin-top: var(--s-7); border-top: 1px solid var(--rule); } .cat-step { display: grid; gap: 2px; align-content: center; min-height: 72px; padding-block: var(--s-3); color: inherit; } .cat-step--next { text-align: right; } .cat-step-k { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .cat-step-v { font-size: var(--t-body); font-weight: 500; } .cat-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: inline-flex; align-items: center; min-height: 48px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-ui); color: var(--fg); } @media (min-width: 768px) { .cat-pager { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cat-all { grid-column: 2; grid-row: 1; } .cat-step--next { grid-column: 3; } } @media (hover: hover) and (pointer: fine) { .cat-step:hover .cat-step-v { text-decoration: underline; text-underline-offset: 4px; } } .core-feature { display: grid; gap: var(--s-5); } .core-feature-head { display: grid; gap: var(--s-3); } .core-feature-pic { --ar: 4 / 5; display: block; margin-inline: calc(-1 * var(--page)); width: calc(100% + 2 * var(--page)); max-height: 82svh; } .core-feature-foot { display: grid; gap: var(--s-4); } .core-feature-foot .t-deck { max-width: 44ch; } @media (min-width: 1024px) { .core-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap); grid-template-areas: "head pic" "foot pic"; align-items: end; } .core-feature-head { grid-area: head; } .core-feature-foot { grid-area: foot; align-self: start; } .core-feature-pic { grid-area: pic; margin-inline: 0; width: 100%; max-height: min(84svh, 820px); } } .ff-name { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--fg); } .reserve-mast { display: flex; justify-content: center; margin-bottom: var(--s-7); } .reserve-mast .studio-mark { margin-bottom: 0; } .reserve-mast .studio-mark-name { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); font-weight: 400; } .reserve-mast .studio-mark-sub { font-weight: 600; } @media (max-width: 1023px) { .task-spread > .plate { display: none; } .task-spread > .copy { padding-top: 0; } } .task-lead { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); max-width: 44ch; } .signin-form { display: grid; gap: var(--s-4); max-width: 420px; } .signin-form .btn { justify-self: start; } .signin-sent { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); } .signin-again { font-size: var(--t-cap); color: var(--fg-3); } .task-status:empty { display: none; } .task-status { font-size: var(--t-cap); line-height: 1.55; color: var(--accent); max-width: 44ch; } .signin-never { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--accent); font-size: var(--t-cap); line-height: 1.6; color: var(--fg-2); max-width: 52ch; } button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 40px; } .club-signin { margin-top: var(--s-3); font-size: var(--t-cap); color: var(--fg-2); } .acct { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .acct-state { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); } .acct-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .acct-head { display: grid; gap: var(--s-4); align-items: end; } .acct-head .btn { justify-self: start; } .acct-head-copy { display: grid; gap: var(--s-3); } .acct-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--bg); color: var(--fg); } .acct-kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .acct-title { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; } .acct-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0; } .acct-facts div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--rule); } .acct-facts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .acct-facts dd { margin: 0; font-size: var(--t-cap); line-height: 1.5; } .acct-actions { display: grid; gap: var(--s-3); justify-items: start; align-items: center; } .acct-note { font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); max-width: 64ch; } .acct-chip { display: inline-block; padding: 1px 6px; border: 1px solid var(--rule-ui); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; text-align: center; } .acct-visits { display: grid; gap: var(--s-3); } .acct-list { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto; column-gap: var(--s-3); } .acct-list li { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto; grid-column: 1 / -1; gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-cap); } @supports (grid-template-columns: subgrid) { .acct-list li { grid-template-columns: subgrid; } } .acct-list li:last-child { border-bottom: 1px solid var(--rule); } .acct-list li.acct-empty { display: block; padding-block: var(--s-3); line-height: 1.55; color: var(--fg-2); } .acct-when { color: var(--fg-3); } .acct-foot { display: grid; gap: var(--s-3); justify-items: start; } @media (min-width: 768px) { .acct-head { grid-template-columns: minmax(0, 1fr) auto; } .acct-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } .acct-facts div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } } @media (min-width: 1024px) { .acct-actions { grid-auto-flow: column; justify-content: start; gap: var(--s-5); } } .words { display: grid; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); } .words-section .words { margin-top: 0; padding-top: 0; border-top: 0; } .words-head { display: grid; gap: var(--s-3); } .words-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-6); } .word { display: grid; gap: var(--s-3); align-content: start; margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--accent); } .word-text { margin: 0; font-size: var(--t-deck); line-height: 1.5; color: var(--fg); max-width: 60ch; overflow-wrap: anywhere; } .w1 .word-text { font-size: var(--t-h3); line-height: 1.45; max-width: none; } .word-by { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-cap); line-height: 1.5; color: var(--fg-3); } .word-name { font-weight: 600; letter-spacing: 0.04em; color: var(--fg-2); } .words-note { font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); } @media (min-width: 768px) { .words-list.w2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .words-list.w3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .words-list.wr { grid-template-columns: repeat(6, minmax(0, 1fr)); } .words-list.wr .word { grid-column: span 3; } .words-list.wr .word:last-child { grid-column: 1 / -1; } .words-list.wr .word:last-child .word-text { font-size: var(--t-h3); line-height: 1.45; max-width: none; } } @media (min-width: 1024px) { .words-list.wr .word { grid-column: span 2; } .words-list.wr.r1 .word:last-child { grid-column: 1 / -1; } .words-list.wr.r2 .word:nth-last-child(-n+2) { grid-column: span 3; } .words-list.wr.r2 .word:last-child .word-text { font-size: var(--t-deck); line-height: 1.5; max-width: 60ch; } } .review-form { display: grid; max-width: 520px; } .review-form .btn { justify-self: start; } .review-stars { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; } .review-stars .check-pill { min-width: 48px; justify-content: center; } .review-left { margin-top: var(--s-2); font-size: var(--t-cap); color: var(--fg-3); } .review-consent { align-items: flex-start; margin-bottom: var(--s-5); font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); } .review-consent input { flex: none; margin-top: 2px; } .form-privacy { margin-block: var(--s-3); color: var(--fg-2); line-height: 1.55; } .legal-note { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--rule-ui); font-size: var(--t-cap); line-height: 1.55; color: var(--fg-2); max-width: 70ch; } .u-mt-4 { margin-top: var(--s-4); } .u-mt-5 { margin-top: var(--s-5); } .u-mt-6 { margin-top: var(--s-6); } .u-mb-5 { margin-bottom: var(--s-5); } .u-pt-nav { padding-top: calc(var(--nav-h) + var(--section)); } .u-row { display: flex; flex-wrap: wrap; gap: var(--s-3); } .container--narrow { max-width: 860px; } .pos-y0 { --pos: center 0%; } .pos-y5 { --pos: center 5%; } .pos-y10 { --pos: center 10%; } .pos-y15 { --pos: center 15%; } .pos-y20 { --pos: center 20%; } .pos-y25 { --pos: center 25%; } .pos-y30 { --pos: center 30%; } .pos-y35 { --pos: center 35%; } .pos-y40 { --pos: center 40%; } .pos-y45 { --pos: center 45%; } .pos-y50 { --pos: center 50%; } .pos-y55 { --pos: center 55%; } .pos-y60 { --pos: center 60%; } .pos-y65 { --pos: center 65%; } .pos-y70 { --pos: center 70%; } .pos-y75 { --pos: center 75%; } .pos-y80 { --pos: center 80%; } .pos-y85 { --pos: center 85%; } .pos-y90 { --pos: center 90%; } .pos-y95 { --pos: center 95%; } .pos-y100 { --pos: center 100%; } .film-720x1280 { --arw: 720; --arh: 1280; } .film-720x720 { --arw: 720; --arh: 720; } .film-720x1080 { --arw: 720; --arh: 1080; } .film-720x1292 { --arw: 720; --arh: 1292; } .film-720x1272 { --arw: 720; --arh: 1272; } .film-720x1020 { --arw: 720; --arh: 1020; } .film-720x960 { --arw: 720; --arh: 960; } .film-720x1068 { --arw: 720; --arh: 1068; }