@font-face { font-family: "Antonio"; src: url("/assets/fonts/antonio.woff2") format("woff2"); font-weight: 500 700; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 400 640; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; } @font-face { font-family: "Antonio Fallback"; src: local("Arial Narrow"), local("ArialNarrow"), local("Arial"); size-adjust: 92%; ascent-override: 118%; descent-override: 26%; } @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; } :root { --color-paper: oklch(97.3% 0.005 95); --color-paper-2: oklch(94.3% 0.008 91); --color-paper-3: oklch(89% 0.009 88); --color-ink: oklch(18% 0.009 75); --color-ink-2: oklch(45.9% 0.014 80); --color-ink-3: oklch(62% 0.012 80); --color-red: oklch(50.7% 0.195 28); --color-red-deep: oklch(42% 0.17 28); --color-red-light: oklch(66% 0.18 28); --color-navy: oklch(33.6% 0.127 279); --color-navy-light: oklch(72% 0.09 279); --color-tan: oklch(65.8% 0.054 78); --color-tan-text: oklch(51.9% 0.054 78); --color-chrome: oklch(84% 0.003 49); --color-night: oklch(16% 0.008 75); --color-night-2: oklch(22% 0.009 75); --color-night-line: oklch(32% 0.01 75); --color-on-night: oklch(95% 0.005 95); --color-on-night-2: oklch(76% 0.01 85); --color-focus: oklch(50.7% 0.195 28); --color-glass: oklch(99% 0.002 95); --color-shadow: oklch(18% 0.009 75 / 0.16); --color-scrim: oklch(16% 0.008 75 / 0.62); --font-display: "Antonio", "Antonio Fallback", "Arial Narrow", sans-serif; --font-body: "Newsreader", "Newsreader Fallback", Georgia, serif; --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 1.875rem; --text-2xl: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem); --text-3xl: clamp(2.3rem, 1.4rem + 3.4vw, 3.4rem); --text-display: clamp(2.9rem, 1.6rem + 5.2vw, 4.6rem); --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --radius-cut: 2px; --radius-pill: 999px; --rule: 1px solid var(--color-paper-3); --rule-ink: 1px solid var(--color-ink); --rule-night: 1px solid var(--color-night-line); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 520ms; --wrap: 76rem; --gutter: clamp(1rem, 0.6rem + 2vw, 2.25rem); --header-h: 5.75rem; --medal: 5rem; } *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-md)); } body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-base)/1.62 var(--font-body); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--color-red); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } ::selection { background: var(--color-red); color: var(--color-paper); } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.98; overflow-wrap: anywhere; min-width: 0; font-style: normal; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-lg); line-height: 1.05; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } [role="list"] { list-style: none; } figure { margin: 0; } blockquote { margin: 0; } address { font-style: normal; } table { border-collapse: collapse; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: var(--space-sm); top: -4rem; z-index: 60; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-sm)/1 var(--font-display); text-transform: uppercase; } .skip:focus { top: var(--space-sm); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 3rem; padding: 0 var(--space-md); border: 1px solid transparent; border-radius: var(--radius-cut); font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn--sm { min-height: 2.5rem; padding: 0 var(--space-sm); } .btn--lg { min-height: 3.4rem; padding: 0 var(--space-lg); font-size: var(--text-base); } .btn--red { background: var(--color-red); color: var(--color-paper); } .btn--red:hover { background: var(--color-red-deep); } .btn--ink { background: var(--color-ink); color: var(--color-paper); } .btn--ink:hover { background: var(--color-navy); } .btn--line { border-color: currentColor; color: inherit; background: transparent; } .btn--line:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } .night .btn--line:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); } .link { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; white-space: nowrap; } .link:hover { color: var(--color-red); } .link--light:hover { color: var(--color-red-light); } .link .icon { transition: transform var(--dur-fast) var(--ease-out); } .link:hover .icon { transform: translateX(3px); } .night { background: var(--color-night); color: var(--color-on-night); } .night a:hover { text-decoration-color: var(--color-red-light); } .night :focus-visible { outline-color: var(--color-red-light); } .site-header { position: sticky; top: 0; z-index: 40; background: var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: var(--color-paper-3); box-shadow: 0 6px 18px -14px var(--color-shadow); } .site-header__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); max-width: var(--wrap); margin-inline: auto; min-height: var(--header-h); padding-inline: var(--gutter); } .medallion { display: grid; place-items: center; width: var(--medal); aspect-ratio: 1; border-radius: 50%; flex: none; background: var(--color-glass); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-paper-3); } .medallion .badge { width: 84%; } .medallion:focus-visible { outline-offset: 2px; } .site-header__side { display: flex; align-items: center; gap: var(--space-sm); justify-self: start; min-width: 0; } .site-nav ul { display: flex; gap: var(--space-lg); list-style: none; } .site-nav a { font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: var(--space-2xs) 0; border-bottom: 2px solid transparent; } .site-nav a:hover { border-bottom-color: var(--color-ink); } .site-nav a[aria-current="page"] { border-bottom-color: var(--color-red); } .site-header__actions { display: flex; align-items: center; gap: var(--space-md); justify-self: end; } .menu-btn { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--color-ink); border-radius: var(--radius-cut); background: none; color: var(--color-ink); cursor: pointer; } .menu-btn .icon { width: 1.4rem; height: 1.4rem; } .status { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; font: 600 var(--text-xs)/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); } .status__pole, .cta-band__pole { width: 0.62rem; height: 1.45rem; border: 1.5px solid var(--color-ink); border-radius: 2px; flex: none; background: repeating-linear-gradient(-32deg, var(--color-red) 0 3px, var(--color-glass) 3px 6px, var(--color-navy) 6px 9px, var(--color-glass) 9px 12px); background-size: 100% 24px; } .is-open .status { color: var(--color-ink); } .is-closed .status__pole { filter: grayscale(1); opacity: 0.55; } @media (prefers-reduced-motion: no-preference) { .is-open .status__pole, .is-open .cta-band__pole { animation: pole-slide 1.6s linear infinite; } } @keyframes pole-slide { to { background-position: 0 -24px; } } .menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: var(--space-lg); padding: 0 var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); background: var(--color-paper); overflow-y: auto; } .menu[hidden] { display: none; } .menu__top { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; justify-items: center; min-height: var(--header-h); padding-top: env(safe-area-inset-top, 0px); } .medallion--sm { --medal: 3.4rem; } .menu nav ul { list-style: none; border-top: var(--rule-ink); } .menu nav a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: var(--rule); font: 700 var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; text-decoration: none; } .menu nav a[aria-current="page"] { color: var(--color-red); } .menu__foot { display: grid; gap: var(--space-xs); margin-top: auto; } .rail__dots { display: none; } @media (max-width: 59.99rem) { .rail { display: flex !important; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2xs); scroll-padding-inline: var(--gutter); scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { flex: 0 0 min(78%, 22rem); scroll-snap-align: start; } .rail__dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: var(--space-sm); } .rail__dots i { width: 0.45rem; height: 0.45rem; transform: rotate(45deg); background: var(--color-paper-3); transition: background-color var(--dur-fast) var(--ease-out); } .rail__dots i.is-on { background: var(--color-red); } .night .rail__dots i { background: var(--color-night-line); } .night .rail__dots i.is-on { background: var(--color-red-light); } } .reel { position: relative; overflow: hidden; background: var(--color-night-2); } .reel img, .reel video { width: 100%; height: 100%; object-fit: cover; } .reel video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .reel.is-playing video { opacity: 1; } .reel__toggle { position: absolute; right: var(--space-xs); bottom: var(--space-xs); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-scrim); color: var(--color-paper); cursor: pointer; } .reel__toggle[aria-pressed="true"] .icon { opacity: 0.6; } .quote blockquote p { font-size: var(--text-md); line-height: 1.45; } .quote blockquote p::before { content: "“"; } .quote blockquote p::after { content: "”"; } .quote figcaption { margin-top: var(--space-xs); font: 600 var(--text-xs)/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; } .quote figcaption span { color: var(--color-ink-2); } .night .quote figcaption span { color: var(--color-on-night-2); } .quote--small blockquote p { font-size: var(--text-base); } .quotes { display: grid; gap: var(--space-md); } .rating { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .rating .icon { color: var(--color-red); } .rating strong { font-size: var(--text-md); } .rating span { color: var(--color-ink-2); } .night .rating span { color: var(--color-on-night-2); } .site-footer { background: var(--color-paper-2); border-top: var(--rule-ink); padding-block: var(--space-2xl) var(--space-lg); } .site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-xl); } .site-footer__mark .badge { width: 11rem; color: var(--color-ink); } .site-footer__statement { margin-top: var(--space-sm); font: 700 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; } .site-footer h2 { font-size: var(--text-sm); letter-spacing: 0.14em; margin-bottom: var(--space-sm); color: var(--color-tan-text); } .site-footer address, .site-footer ul { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); } .site-footer a { display: inline-flex; align-items: center; gap: 0.35rem; } .site-footer .hours { font-size: var(--text-sm); } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule); font-size: var(--text-xs); color: var(--color-ink-2); } .site-footer__base ul { display: flex; flex-wrap: wrap; gap: var(--space-md); } .badge { height: auto; } .lg-ink { fill: currentColor; } .lg-paper { fill: var(--color-glass); } .lg-red { fill: var(--color-red); } .lg-navy { fill: var(--color-navy); } .lg-tan { fill: var(--color-tan); } .lg-chrome { fill: var(--color-chrome); } .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; gap: var(--space-2xs); padding: var(--space-2xs) var(--gutter) calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px)); background: var(--color-paper); border-top: var(--rule-ink); transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out); } .action-bar .btn { flex: 1; min-height: 2.9rem; padding: 0 var(--space-xs); } .action-bar.is-on { transform: none; } .hours { width: 100%; } .hours th, .hours td { padding: 0.32rem 0; text-align: left; font-weight: 400; border-bottom: 1px dotted var(--color-paper-3); } .hours td { text-align: right; font-variant-numeric: tabular-nums; } .hours .is-today th, .hours .is-today td { color: var(--color-red); font-weight: 600; } @media (max-width: 59.99rem) { .site-nav, .status { display: none; } .menu-btn { display: inline-flex; } .action-bar { display: flex; } .site-footer { padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom, 0px)); } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .site-footer__mark { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); } .site-footer__mark .badge { width: 7rem; } } @media (max-width: 30rem) { .site-footer__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; } } .site-header { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .dark-top .site-header:not(.is-scrolled) { background: var(--color-night); color: var(--color-on-night); } .dark-top .site-header:not(.is-scrolled) .site-nav a, .dark-top .site-header:not(.is-scrolled) .menu-btn { color: var(--color-on-night); } .dark-top .site-header:not(.is-scrolled) .menu-btn { border-color: var(--color-on-night); } .dark-top .site-header:not(.is-scrolled) .site-nav a:hover { border-bottom-color: var(--color-on-night); } .dark-top .site-header:not(.is-scrolled) .medallion { box-shadow: 0 0 0 1px var(--color-night-line); } .dark-top .site-header:not(.is-scrolled) .status { color: var(--color-on-night-2); } .is-open .dark-top .site-header:not(.is-scrolled) .status { color: var(--color-on-night); } .dark-top .site-header:not(.is-scrolled) .status__pole { border-color: var(--color-chrome); } .dark-top .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--color-red-light); } .btn__short { display: none; } section { position: relative; } .section-head { display: grid; gap: var(--space-xs); max-width: 44rem; margin-bottom: var(--space-xl); } .section-head p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; } .night .section-head p { color: var(--color-on-night-2); } .section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); } .section-head--row > div { display: grid; gap: var(--space-xs); max-width: 40rem; } .hero { padding-block: var(--space-2xl) var(--space-3xl); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; } .hero__copy { display: grid; gap: var(--space-md); align-content: center; } .hero__title { max-width: 14ch; } .hero__lead { max-width: 36rem; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); } .hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .hero__scene { position: relative; display: grid; place-items: center; min-height: 32rem; } .hero__dome { position: absolute; left: 50%; top: 4%; width: min(36rem, 100%); aspect-ratio: 2 / 1.06; translate: -50% 0; border: 3px solid var(--color-ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0 9px, var(--color-tan) 9px 11px); -webkit-mask: linear-gradient(to bottom, transparent 0, var(--color-ink) 30%); mask: linear-gradient(to bottom, transparent 0, var(--color-ink) 30%); } .mirror { position: relative; z-index: 1; width: min(26rem, 78vw); aspect-ratio: 1; margin-top: 12%; border-radius: 50%; padding: 0.55rem; background: var(--color-paper); border: 3px solid var(--color-ink); box-shadow: 0 30px 50px -36px var(--color-shadow); } .mirror .reel { width: 100%; height: 100%; border-radius: 50%; } .hero__pole { position: absolute; z-index: 2; right: max(0rem, calc(50% - 18.5rem)); bottom: 6%; width: 4.4rem; } .hero__sign { position: absolute; z-index: 2; left: 50%; bottom: 0; translate: -50% 0; padding: 0.45rem 0.9rem; white-space: nowrap; background: var(--color-navy); color: var(--color-paper); font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--radius-cut); } @media (prefers-reduced-motion: no-preference) { .js .hero__dome { animation: dome-rise 900ms var(--ease-out) both; } .js .mirror { animation: mirror-in 700ms var(--ease-out) 120ms both; } } @keyframes dome-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes mirror-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } .hero.night { padding-top: var(--space-xl); } .hero.night .hero__lead { color: var(--color-on-night-2); } .hero.night .hero__dome { border-color: var(--color-on-night); } .hero.night .mirror { background: var(--color-night); border-color: var(--color-on-night); box-shadow: 0 30px 60px -40px var(--color-scrim); } .hero.night .hero__sign { box-shadow: 0 0 0 1px var(--color-on-night-2); } .hero + .board-section { border-top: 0; } .night .pole__ink { fill: var(--color-chrome); } .night .pole__frame { stroke: var(--color-chrome); } .pole { width: 100%; height: auto; overflow: visible; } .pole__ink { fill: var(--color-ink); } .pole__glass { fill: var(--color-glass); } .pole__red { fill: var(--color-red); } .pole__navy { fill: var(--color-navy); } .pole__frame { fill: none; stroke: var(--color-ink); stroke-width: 4; } @media (prefers-reduced-motion: no-preference) { .is-open .pole__stripes { animation: stripes 2.8s linear infinite; } } @keyframes stripes { to { transform: translateY(calc(var(--period) * -1)); } } .board-section { padding-block: var(--space-3xl); border-top: var(--rule-ink); } .board-section--page { border-top: 0; padding-top: 0; } .board { display: grid; gap: var(--space-xl); } .board__tools { padding-block: var(--space-lg) var(--space-md); background: var(--color-paper-2); border-top: 6px solid var(--color-ink); border-bottom: 1px solid var(--color-paper-3); } .board__tools > .wrap { display: grid; gap: var(--space-sm); } .rail-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); } .tool { display: grid; justify-items: center; gap: var(--space-2xs); text-align: center; } .tool__art { width: 100%; max-width: 8.5rem; aspect-ratio: 1; height: auto; overflow: visible; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .tool__label { font: 600 var(--text-xs)/1.1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; transition: color var(--dur-base) var(--ease-out); } .board.has-pick .tool { opacity: 0.22; } .board.has-pick .tool.is-on { opacity: 1; } .board.has-pick .tool.is-on .tool__label { color: var(--color-red); } .board__caption { min-height: 3.2em; text-align: center; font-size: var(--text-base); color: var(--color-ink-2); } .board__caption strong { color: var(--color-ink); font-weight: 600; } .board__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } .board__label { font-size: var(--text-sm); letter-spacing: 0.16em; color: var(--color-tan-text); padding-bottom: var(--space-xs); border-bottom: var(--rule-ink); } .board__rows { display: grid; } .board__more { margin-top: var(--space-xl); } .menu-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule); } .menu-row__pick { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--space-xs); width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; } div.menu-row__pick { cursor: default; } .menu-row__name { font: 700 var(--text-lg)/1.05 var(--font-display); text-transform: uppercase; } .menu-row__meta { font: 500 var(--text-sm)/1 var(--font-display); letter-spacing: 0.06em; color: var(--color-ink-2); white-space: nowrap; } .menu-row__price { font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-ink); } .menu-row__line { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; } .menu-row__book { display: inline-flex; align-items: center; gap: 0.3rem; align-self: end; font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--color-red); white-space: nowrap; } .menu-row__book:hover { text-decoration: underline; } button.menu-row__pick:hover .menu-row__name { color: var(--color-red); } .menu-row:has(.menu-row__pick[aria-pressed="true"]) { box-shadow: inset 4px 0 0 var(--color-red); padding-left: var(--space-sm); background: var(--color-paper-2); } .menu-row:has(.menu-row__pick[aria-pressed="true"]) .menu-row__price { color: var(--color-red); } .menu-row { transition: padding var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .t-ink { fill: var(--color-ink); } .t-hi { fill: var(--color-paper-2); stroke: var(--color-paper-2); } .t-hole { fill: var(--color-paper-2); } .t-cloth { fill: var(--color-glass); stroke: var(--color-ink); stroke-width: 4; } .t-fold { stroke: var(--color-ink); stroke-width: 1.6; } .t-spiral { stroke: var(--color-ink); stroke-width: 2.2; } .t-cord { stroke: var(--color-ink); stroke-width: 5; stroke-linecap: round; fill: none; } .t-steam { stroke: var(--color-tan); stroke-width: 3; stroke-linecap: round; fill: none; } .t-blade-top, .t-blade-bottom { transform-box: view-box; transform-origin: 0 0; } .night .t-ink { fill: var(--color-on-night); } .night .t-hi, .night .t-hole { fill: var(--color-night); stroke: var(--color-night); } @media (prefers-reduced-motion: no-preference) { .tool.is-on .t-blade-top { animation: snip-top 1.1s var(--ease-in-out) infinite; } .tool.is-on .t-blade-bottom { animation: snip-bottom 1.1s var(--ease-in-out) infinite; } .tool.is-on .t-hum { animation: hum 120ms linear infinite; } .tool.is-on .t-comb { animation: comb 1.6s var(--ease-in-out) infinite; } .tool.is-on .t-razor { animation: glide 1.8s var(--ease-in-out) infinite; } .tool.is-on .t-steam, .step .t-steam, .shave__razor .t-steam { stroke-dasharray: 24 14; animation: steam 2.4s linear infinite; animation-delay: var(--d, 0s); } .tool:not(.is-on) .t-steam { opacity: 0.4; } } @keyframes snip-top { 50% { rotate: 7deg; } } @keyframes snip-bottom { 50% { rotate: -7deg; } } @keyframes hum { 25% { translate: 0.6px 0; } 75% { translate: -0.6px 0; } } @keyframes comb { 50% { translate: 10px -4px; } } @keyframes glide { 50% { translate: 8px 5px; } } @keyframes steam { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -76; } } .glyph { width: 1.2rem; height: 1.2rem; } .team-section { padding-block: var(--space-3xl); background: var(--color-paper-2); } .team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); } .barber { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) var(--space-md) var(--space-md); background: var(--color-paper); border: 1px solid var(--color-paper-3); } .barber::before { content: ""; position: absolute; inset: -1px -1px auto; height: 6px; background: repeating-linear-gradient(-45deg, var(--color-red) 0 6px, var(--color-glass) 6px 12px, var(--color-navy) 12px 18px, var(--color-glass) 18px 24px); } .barber__role { font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-tan-text); } .barber__name { font-size: var(--text-2xl); } .barber__note { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; } .barber .quote { padding-top: var(--space-xs); border-top: var(--rule); } .barber__book { margin-top: auto; padding-top: var(--space-sm); display: inline-flex; align-items: center; gap: 0.3rem; font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-red); text-decoration: none; } .barber__book:hover { text-decoration: underline; } .wall-section { padding-block: var(--space-3xl); } .wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } .wall--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shot { display: grid; gap: var(--space-2xs); } .shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-paper-2); } .shot figcaption { font: 600 var(--text-xs)/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); } .wall-section .wall > li:nth-child(4n + 2) { translate: 0 var(--space-xl); } .wall-section .wall > li:nth-child(4n + 4) { translate: 0 calc(var(--space-xl) * 0.5); } .wall-section .wall { padding-bottom: var(--space-xl); } .wall--three > li { translate: none !important; } .wall-section .wall--three { padding-bottom: 0; } .shave-section { padding-block: var(--space-3xl); } .shave__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; } .shave__media .reel { aspect-ratio: 4 / 5; border-radius: 50% 50% var(--radius-cut) var(--radius-cut) / 30% 30% var(--radius-cut) var(--radius-cut); } .shave__copy { display: grid; gap: var(--space-md); } .shave__razor { width: 7rem; height: auto; } .shave__copy > p { font-size: var(--text-md); line-height: 1.55; color: var(--color-on-night-2); max-width: 34rem; } .shave__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); } .kids-section { padding-block: var(--space-3xl); } .kids__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; } .kids__head { display: grid; gap: var(--space-md); } .kids__head > p { font-size: var(--text-md); color: var(--color-ink-2); } .wall--kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall--kids > li { translate: none !important; } .kids-section .wall { padding-bottom: 0; } .voices { padding-block: var(--space-3xl); border-top: var(--rule-ink); } .voices__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); } .voices__list .quote { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); } .voices--page { border-top: 0; padding-top: 0; } .voices--page h2 { margin-bottom: var(--space-lg); } .duxlife { padding-block: var(--space-3xl); background: var(--color-night); color: var(--color-on-night); } .duxlife__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: center; } .duxlife__copy { display: grid; gap: var(--space-md); } .duxlife__copy p { color: var(--color-on-night-2); font-size: var(--text-md); max-width: 30rem; } .duxlife__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } .duxlife__shots img { width: 100%; aspect-ratio: 1; object-fit: cover; } .visit-section { padding-block: var(--space-3xl); } .visit__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: start; } .visit__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .visit__photo figcaption { margin-top: var(--space-2xs); font: 600 var(--text-xs)/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); } .visit__info { display: grid; gap: var(--space-md); } .visit__address { font-size: var(--text-lg); line-height: 1.35; } .visit__note { font-size: var(--text-sm); color: var(--color-ink-2); } .visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .status-line { font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); } .is-open .status-line { color: var(--color-red); } .contact-list { display: grid; gap: var(--space-2xs); } .contact-list li { display: flex; align-items: center; gap: var(--space-xs); } .visit-photos { padding-bottom: var(--space-3xl); } .visit-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .map { width: 100%; height: auto; } .map__ground { fill: var(--color-paper); } .map__building { fill: var(--color-paper-2); stroke: var(--color-paper-3); stroke-width: 0.6; } .map__stream { fill: none; stroke: var(--color-navy-light); stroke-width: 2; } .map__casing { fill: none; stroke: var(--color-ink); stroke-linecap: round; stroke-linejoin: round; } .map__road { fill: none; stroke: var(--color-glass); stroke-linecap: round; stroke-linejoin: round; } .map__road--footway { stroke: var(--color-tan); stroke-dasharray: 3 4; } .map__label { font: 600 11px var(--font-display); letter-spacing: 0.12em; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-paper); stroke-width: 4px; } .map__area { font: 600 22px var(--font-display); letter-spacing: 0.4em; fill: var(--color-tan-text); paint-order: stroke; stroke: var(--color-paper); stroke-width: 6px; } .map__halo { fill: var(--color-red); opacity: 0.16; } .map__dot { fill: var(--color-red); stroke: var(--color-glass); stroke-width: 3; } .map__flag { fill: var(--color-ink); } .map__flag-text { font: 700 16px var(--font-display); letter-spacing: 0.14em; fill: var(--color-glass); } .map__stick { stroke: var(--color-ink); stroke-width: 2; } .map__north path { fill: var(--color-ink); } .map__north text { font: 700 12px var(--font-display); fill: var(--color-ink); } .map__frame { fill: none; stroke: var(--color-ink); stroke-width: 1; } @media (prefers-reduced-motion: no-preference) { .map__halo { transform-box: fill-box; transform-origin: center; animation: halo 2.4s var(--ease-out) infinite; } } @keyframes halo { from { scale: 0.4; opacity: 0.4; } to { scale: 1.4; opacity: 0; } } .visit__map p { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); } .faq-section { padding-block: var(--space-3xl); border-top: var(--rule-ink); } .faq-section__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: start; } .faq { border-top: var(--rule-ink); } .faq__item { border-bottom: var(--rule); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; cursor: pointer; list-style: none; font: 700 var(--text-lg)/1.15 var(--font-display); text-transform: uppercase; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary .icon { transition: rotate var(--dur-base) var(--ease-out); } .faq__item[open] summary .icon { rotate: 45deg; color: var(--color-red); } .faq__item p { padding-bottom: var(--space-md); max-width: 40rem; color: var(--color-ink-2); } .page-head { padding-block: var(--space-xl) var(--space-2xl); } .page-head h1 { max-width: 16ch; } .page-head__lead { margin-top: var(--space-md); max-width: 40rem; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); } .page-head--night .page-head__lead { color: var(--color-on-night-2); } .page-head__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; } .page-head__photo img, .page-head__photo .reel { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .page-head__photo figcaption { margin-top: var(--space-2xs); font: 600 var(--text-xs)/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); } .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .page-head--404 { min-height: 60vh; display: grid; align-content: center; } .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin-bottom: var(--space-md); font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2); } .crumbs li + li::before { content: "/"; margin-right: var(--space-2xs); color: var(--color-ink-3); } .night .crumbs ol { color: var(--color-on-night-2); } .crumbs a { text-decoration: none; } .prose-section { padding-block: var(--space-2xl) var(--space-3xl); } .prose-section__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; } .prose-section__grid--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .prose { display: grid; gap: var(--space-md); max-width: 40rem; } .prose h2 { font-size: var(--text-xl); margin-top: var(--space-md); } .prose h2:first-child { margin-top: 0; } .prose p { font-size: 1.125rem; line-height: 1.68; } .prose-section__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .prose-section__photo figcaption { margin-top: var(--space-2xs); font: 600 var(--text-xs)/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2); } .side-menu { position: sticky; top: calc(var(--header-h) + var(--space-md)); padding: var(--space-lg); background: var(--color-paper-2); border-top: 6px solid var(--color-ink); } .side-menu h2 { font-size: var(--text-md); letter-spacing: 0.12em; margin-bottom: var(--space-xs); } .paths { padding-bottom: var(--space-3xl); } .paths__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } .path-card { position: relative; display: grid; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-paper-3); } .path-card:hover { border-color: var(--color-ink); } .path-card__art { width: 5.5rem; height: auto; } .path-card h3 a { text-decoration: none; } .path-card h3 a::after { content: ""; position: absolute; inset: 0; } .path-card p { color: var(--color-ink-2); font-size: var(--text-sm); } .steps-section { padding-block: var(--space-3xl) 0; } .steps-section h2 { margin-bottom: var(--space-lg); } .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); counter-reset: step; } .step { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-paper-2); } .step__art { width: 6rem; height: auto; overflow: visible; } .step p { color: var(--color-ink-2); } .gallery-section { padding-bottom: var(--space-3xl); } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); } .js .chips[hidden] { display: flex; } .chip { min-height: 2.5rem; padding: 0 var(--space-sm); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: none; font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; color: var(--color-ink); } .chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); } .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); } .gallery > li[hidden] { display: none; } .reel-section { padding-block: var(--space-3xl); background: var(--color-paper-2); } .reel-section__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 0.7fr)) minmax(0, 1fr); gap: var(--space-lg); align-items: center; } .reel-section .reel { aspect-ratio: 4 / 5; } .reel-section__copy { display: grid; gap: var(--space-md); } .cta-band { padding-block: var(--space-2xl); } .cta-band__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; } .cta-band__pole { width: 1.3rem; height: 7rem; border-color: var(--color-on-night); background-size: 100% 48px; background-image: repeating-linear-gradient(-32deg, var(--color-red) 0 6px, var(--color-glass) 6px 12px, var(--color-navy) 12px 18px, var(--color-glass) 18px 24px); } .is-open .cta-band__pole { animation-name: pole-slide-big; } @keyframes pole-slide-big { to { background-position: 0 -48px; } } .cta-band h2 { font-size: var(--text-2xl); } .cta-band p { margin-top: var(--space-2xs); color: var(--color-on-night-2); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .belcome-badge { position: fixed; left: var(--space-sm); bottom: calc(var(--space-4xl) + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); background: var(--color-navy); color: var(--color-paper); font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; } .belcome-badge button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; } .belcome-dialog { width: min(52rem, 96vw); height: 90dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: var(--radius-cut); } .belcome-dialog::backdrop { background: var(--color-scrim); } .belcome-dialog__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; } .belcome-dialog__bar button { min-height: 2.5rem; border: 1px solid currentColor; background: none; color: inherit; padding: 0 var(--space-sm); font: inherit; cursor: pointer; } .belcome-dialog iframe { width: 100%; height: calc(100% - 3.1rem); border: 0; } @media (max-width: 43.75rem) { .belcome-dialog { width: 100vw; height: 100dvh; margin: 0; } } @media (max-width: 74.99rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 59.99rem) { :root { --header-h: 4.4rem; --medal: 3.8rem; } .hero { padding-block: var(--space-lg) var(--space-2xl); } .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); } .hero__actions .btn { min-height: 3.1rem; padding: 0 var(--space-xs); font-size: var(--text-sm); } .hero__grid, .shave__grid, .kids__grid, .duxlife__grid, .visit__grid, .faq-section__grid, .page-head__grid, .prose-section__grid, .reel-section__grid, .cta-band__grid { grid-template-columns: minmax(0, 1fr); } .hero__scene { min-height: 0; padding-bottom: var(--space-xl); } .mirror { width: min(21rem, 78vw); } .hero__pole { width: 3.2rem; right: 2%; } .board__tools { padding-block: var(--space-md); } .rail-tools { gap: var(--space-2xs); } .tool__label { font-size: 0.66rem; letter-spacing: 0.06em; } .board__menu { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .board__tools { position: sticky; top: var(--header-h); z-index: 5; } .board-section--page .board__tools { position: static; } .wall-section .wall > li { translate: none; } .wall-section .wall { padding-bottom: 0; } .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .side-menu { position: static; } .cta-band__pole { display: none; } .steps { grid-template-columns: minmax(0, 1fr); } .shave__media .reel { max-width: 26rem; } } @media (max-width: 23.4rem) { .hero__actions .btn__long { display: none; } .hero__actions .btn__short { display: inline; } } @media (max-width: 36rem) { .menu-row__name { font-size: var(--text-md); } .menu-row__price { font-size: var(--text-lg); } .board__caption { font-size: var(--text-sm); } }