@font-face { font-family: "Wittgenstein"; src: url("/assets/fonts/wittgenstein-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Wittgenstein Fallback"; src: local("Georgia"); size-adjust: 102.20%; ascent-override: 104.21%; descent-override: 42.56%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"); size-adjust: 101.25%; ascent-override: 93.83%; descent-override: 24.69%; line-gap-override: 0%; }
:root {
--ground: #f5e7de;
--blush: #f1dfd7;
--paper: #f2eadd;
--paper-bright: #f4f2e8;
--emerald: #174b3b;
--ink: #0b3d32;
--sage: #b6aa80;
--sage-deep: #878063;
--rose: #ee9387;
--floor: #402c22;
--brass: #ab8257;
--rule: #c3bbb3;
--draft: #ffd84d;
--cast: -0.2rem 0.28rem 0.6rem rgb(58 48 22 / 0.34);
--sheet: url("/img/sheet-270.webp") 64 82 119 132 / 1.5rem 1.92rem 2.79rem 3.09rem / 0.1rem 0.28rem 0.94rem 1.125rem round;
--serif: "Wittgenstein", "Wittgenstein Fallback", Georgia, serif;
--sans: "Figtree", "Figtree Fallback", Arial, sans-serif;
--text-s: 0.875rem;
--text: 1.0625rem;
--text-l: 1.3125rem;
--text-xl: 1.75rem;
--text-xxl: 2.5rem;
--caps: 0.24em;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2.5rem;
--s-7: 4rem;
--section: clamp(4rem, 9vw, 7.5rem);
--gutter: clamp(1rem, 4vw, 2.5rem);
--measure: 36rem;
--wide: 72rem;
--bar: 3.5rem;
--stage: min(96rem, max(44rem, 100vh));
--u: calc(100cqw / 1024);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1rem); scrollbar-color: var(--emerald) var(--blush); }
body { margin: 0; font: 400 var(--text)/1.6 var(--serif); }
[hidden] { display: none !important; }
::selection { background: var(--emerald); color: var(--paper-bright); }
h1, h2, h3 { margin: var(--s-6) 0 var(--s-3); font-weight: 600; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); }
p, ul, ol, dl, table, blockquote, figure, fieldset { margin: 0 0 var(--s-4); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
blockquote { margin-inline: 0; padding-inline-start: var(--s-5); font-size: var(--text-l); }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.skip-link { position: absolute; left: -999rem; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 40; padding: var(--s-2) var(--s-4); background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button, button { display: inline-block; padding: 0.85em 1.6em; border: 0; border-radius: 2px; background: var(--emerald); color: var(--paper-bright); font: 400 1.1875rem/1 var(--serif); text-decoration: none; text-box: trim-both cap alphabetic; cursor: pointer; }
.button:hover, button:hover { background: var(--ink); }
.button:focus-visible, button:focus-visible { outline-offset: 3px; }
button:disabled { background: var(--rule); color: var(--ink); cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.actions .button ~ .button { padding-inline: 0; background: none; color: inherit; text-decoration: underline 1px; text-underline-offset: 0.3em; }
.actions .button ~ .button:hover { text-decoration-thickness: 2px; }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--blush); }
.site-header__stage { position: relative; container-type: inline-size; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; }
.site-header__bar { display: flex; align-items: center; gap: var(--s-2) var(--s-4); min-height: var(--bar); padding: 0.375rem var(--gutter); }
.wordmark { margin-inline-end: auto; padding-block: 1rem; font: 500 clamp(0.75rem, 3.3vw, 0.8125rem)/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.site-header__book { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; font-size: 1.0625rem; white-space: nowrap; text-box: normal; }
@media (max-width: 30em) { .site-header__bar { justify-content: space-between; gap: var(--s-2); } .wordmark { margin-inline-end: 0; } }
@media (max-width: 24em) { .wordmark { letter-spacing: 0.16em; } .site-header__book { padding-inline: 0.8rem; font-size: 1rem; } }
@media (max-width: 22.49em) { .wordmark { width: min-content; padding-block: 0.6rem; line-height: 1.35; white-space: normal; } }
.site-nav { font: 500 var(--text-s)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav a, .site-nav summary { display: block; padding: 0.95rem 0.25rem; text-decoration: none; cursor: pointer; }
.site-nav summary { list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav a:hover, .site-nav summary:hover, .site-nav [open] > summary { text-decoration: underline; text-underline-offset: 0.35em; }
.site-nav [aria-current], .breadcrumbs [aria-current], .site-footer [aria-current] { font-weight: 700; }
.site-nav__row { display: none; gap: var(--s-5); }
.site-nav__group { position: relative; }
.site-nav__group ul, .site-menu__panel { position: absolute; z-index: 5; background: var(--paper); outline: 1px solid var(--ink); }
.site-nav__group ul { inset: 100% auto auto -1rem; min-width: 17rem; padding: var(--s-2) var(--s-4) var(--s-4); }
.site-menu__panel { inset: 100% 0 auto; max-height: calc(100dvh - var(--bar)); padding: var(--s-2) var(--gutter) var(--s-5); overflow-y: auto; overscroll-behavior: contain; }
.site-menu__panel a, .site-nav__group li a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font: 400 var(--text)/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
.site-menu__label { display: block; padding: 1.1rem 0 0.5rem; }
@media (min-width: 40em) {
.site-menu__panel { inset-inline: auto var(--gutter); width: 34rem; }
.site-menu__panel > ul { columns: 2; column-gap: var(--s-6); }
.site-menu__group { break-inside: avoid; }
}
@media (min-width: 64em) { .site-nav__row { display: flex; } .site-nav__row + .site-menu { display: none; } }
.js .page--home .site-header:not(.is-compact) .site-menu:not([open]):not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 43.01rem) { .js .page--home .site-header:not(.is-compact) { position: relative; } }
@media not all and (min-width: 75rem) and (min-aspect-ratio: 67/100) {
.page--home .site-header:not(.is-compact) .site-header__stage { max-width: var(--stage); }
@container (min-width: 43.01rem) {
.page--home .site-header:not(.is-compact) .site-header__bar { min-height: 0; padding: calc(9 * var(--u)) calc(41 * var(--u)) calc(7 * var(--u)) calc(48 * var(--u)); }
.page--home .site-header:not(.is-compact) .wordmark { padding-block: 0; font-size: calc(27 * var(--u)); letter-spacing: 0.252em; text-box: trim-both cap alphabetic; }
.page--home .site-header:not(.is-compact) .site-header__book { display: inline-block; min-height: 0; padding: calc(20.5 * var(--u)) calc(43 * var(--u)); font-size: calc(30 * var(--u)); text-box: trim-both cap alphabetic; }
}
}
@media (min-width: 75rem) and (min-aspect-ratio: 67/100) {
.page--home .site-header:not(.is-compact) .site-header__stage { max-width: calc(90rem + 2 * var(--gutter)); }
.page--home .site-header:not(.is-compact) .site-header__bar { min-height: 4.5rem; }
.page--home .site-header:not(.is-compact) .wordmark { font-size: 1.125rem; letter-spacing: 0.25em; }
.page--home .site-header:not(.is-compact) .site-header__book { min-height: 3rem; padding-inline: 1.6rem; font-size: 1.25rem; }
}
main:focus { outline: none; }
.breadcrumbs { font: 500 var(--text-s)/1.4 var(--sans); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s-3); }
.breadcrumbs a, .breadcrumbs span { display: inline-block; padding-block: 0.75rem; }
.corner .wall__inner { padding-block: var(--s-1) var(--s-6); }
.corner__inner { display: grid; grid-template-columns: var(--object, 34%) minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: center; }
.corner__inner > * { grid-column: 1 / -1; margin: 0; }
.corner__inner > .corner__object { grid-column: 1; order: 0; }
.corner__inner > .corner__object + .corner__text { grid-column: 2; }
.corner__object img { width: 100%; }
.corner h1 { margin: 0; font-size: clamp(1.5rem, 6.9vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: break-word; }
.corner--none h1, .corner--window h1, .corner--door h1 { font-size: clamp(2rem, 8.4vw, 3.5rem); }
.corner__lead { max-width: 40rem; margin-top: var(--s-4); font-size: var(--text-l); line-height: 1.5; }
.corner__lead > :last-child, .lead > :last-child, .section__body > :last-child, .inner .print__text > :last-child, .booking-step > :last-child { margin-bottom: 0; }
.corner--window .corner__inner > .corner__object, .corner--window .corner__inner > .corner__text, .corner--door .corner__inner > .corner__text { grid-column: 1 / -1; }
.corner--window .breadcrumbs, .corner--door .breadcrumbs { order: -2; }
.corner--window .corner__text, .corner--door .corner__text { order: -1; }
.corner--door { --object: 50%; }
.corner.corner--door .wall__inner { padding-bottom: 0; }
.corner--door .corner__object { align-self: end; }
.corner--door .corner__aside { grid-column: 2; padding-bottom: var(--s-5); }
.door { position: relative; container-type: inline-size; }
.door__number { position: absolute; inset: 33.6% 32.2% auto; height: 9.3%; display: grid; place-items: center; font: 600 8.4cqw/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: 0.04em; }
.corner__card { display: inline-block; padding: 0.7rem 0.9rem; background: var(--paper); font: 600 1rem/1.4 var(--serif); box-shadow: var(--cast); }
.map-link { margin: var(--s-2) 0 0; }
.map-link a { display: inline-block; padding-block: 0.6rem; }
.corner--portrait { --object: 38%; }
.content--notfound .corner .wall__inner { padding-block: var(--s-7); }
.facts { padding: var(--s-4) var(--s-4) var(--s-1); background: var(--paper); box-shadow: var(--cast); }
.facts h2, .booking-group legend, .booking-progress, .booking-card dt, .entries h3, .entry .entry__meta { font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.facts h2, .entries h3, .booking-group legend { font-weight: 600; }
.facts h2 { margin: 0 0 var(--s-3); }
.key-facts { margin: 0; font-size: 1rem; line-height: 1.45; }
.key-facts__row { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0 var(--s-4); padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.key-facts dt { font-weight: 600; }
.key-facts dd, .hours dd, .booking-card dd { margin: 0; }
.key-facts .draft-note { grid-column: 1 / -1; margin-top: var(--s-2); }
.corner__tags ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.corner__tags .label { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem 0 0.75rem; font-size: 0.8125rem; text-box: normal; }
.lead, .inner > .section:not(.wall), .booking { width: min(100% - 2 * var(--gutter), var(--wide)); margin: var(--s-6) auto 0; }
.lead { margin-bottom: var(--s-6); font-size: var(--text-l); line-height: 1.5; }
.lead > p { max-width: 40rem; }
.lead .sheet { font-size: var(--text); }
.meet .lead { width: auto; margin: 0; }
.inner > .section:not(.wall) { margin-top: var(--s-7); }
.inner .section > h2, .inner .wall__inner > h2, .gallery h2 { margin: 0 0 var(--s-4); font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.08; letter-spacing: -0.025em; }
.inner .gallery h2 { margin-bottom: var(--s-2); }
.section__body > :is(p, ul, ol, h3) { max-width: var(--measure); }
.section__body > ul { padding-left: 1.2em; }
.section__body li { margin-bottom: 0.45em; }
.section__body li::marker { color: var(--emerald); }
.section__body h3 { margin: var(--s-5) 0 var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--rule); line-height: 1.25; }
.section__body > h3:first-child { margin-top: 0; }
.section--opening-hours ul { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.section--opening-hours li { margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.inner > .closing.wall { margin-top: var(--section); }
.wall--band .wall__inner, .inner .section > .wall__inner { padding-block: var(--s-7); }
.hours__row { display: flex; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.hours dt { flex: 0 0 9rem; font-weight: 600; }
@media (min-width: 56em) {
.corner .wall__inner { padding-block: var(--s-4) var(--s-7); }
.corner__inner, .lead, .inner > .section:not(.wall, .guests) { display: grid; grid-template-columns: 5fr 7fr; gap: 0 var(--s-7); }
.corner__inner { align-items: start; }
.corner__inner > *, .lead > * { grid-column: 2; }
.corner__inner > .breadcrumbs, .corner--none .corner__inner > *, .lead--left > * { grid-column: 1 / -1; }
.corner__inner > .breadcrumbs { margin-bottom: var(--s-4); }
.corner__inner > .corner__object { grid-column: 1; grid-row: 2 / span 3; width: min(100%, var(--object-wide, 18rem)); }
.corner__inner > .corner__text ~ * { margin-top: var(--s-5); }
.corner--shelf, .corner--portrait, .corner__inner > .print__link { --object-wide: 14rem; }
.content--notfound .corner__inner > .corner__object { grid-row: 1 / span 3; }
.corner--door .corner__inner > .corner__text { grid-column: 2; }
.corner--door .corner__text { padding-top: var(--s-4); }
.corner--window .corner__inner > .corner__text { grid-column: 1; align-self: center; }
.corner--window .corner__inner > .corner__object { grid-column: 2; grid-row: 2; width: auto; }
.meet .lead { display: block; }
.inner .section > h2 { position: sticky; top: calc(var(--bar) + var(--s-5)); }
.inner > .section:not(.wall, .guests) { align-items: start; }
.key-facts__row { grid-template-columns: 10rem minmax(0, 1fr); }
}
.frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--s-5) var(--s-4); align-items: end; padding-inline: 0; list-style: none; }
.frames__wide { grid-column: span 2; }
.frame { display: grid; justify-items: center; gap: var(--s-3); margin: 0; }
.frame__art { display: block; width: 100%; padding: 0.3rem; border: 0.75rem solid var(--rose); border-image: url("/img/frame-rose-256.webp") 64; background: var(--paper-bright); box-shadow: var(--cast); }
.frame__art img { width: 100%; }
.frames > :nth-child(even) .frame__art, .print:nth-child(even) .frame__art { border-color: var(--brass); border-image: url("/img/frame-oak-232.webp") 52; }
.frame .plate { font-size: var(--text-s); }
.frame .draft-flag { display: block; margin-top: 0.2rem; }
.frames--one { display: block; max-width: 20rem; margin-block: var(--s-5); }
.frames--one .plate { outline: 1px solid var(--rule); }
.frames--entrance { max-width: 34rem; }
.frames--entrance .plate { max-width: 100%; text-align: center; }
.frames__note { margin: var(--s-5) 0 0; font-size: 0.9375rem; }
.gallery__group + .gallery__group { margin-top: var(--s-7); }
.gallery h2 a { display: inline-block; padding-block: 0.5rem; text-decoration: none; }
.gallery h2 a:hover { text-decoration: underline 2px; }
@media (min-width: 56em) {
.frames { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.frames--row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sheet.sheet--wide { max-width: 46rem; }
.price-rows { position: relative; container-type: inline-size; }
.price-table, .price-table tbody { display: block; font-variant-numeric: tabular-nums lining-nums; }
.price-table thead, .booking-card dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.price-table th, .price-table td { padding: 0; text-align: left; font-weight: 400; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-4); align-items: baseline; padding-top: 0.55rem; border-top: 1px solid var(--rule); }
.price-table .price-row__name, .price-table .price-row__price, .choice__name, .choice__price { font-weight: 600; }
.price-row__name a { text-decoration-color: var(--rule); }
.price-row__kind, .choice__kind { display: block; font-size: var(--text-s); font-weight: 400; }
.price-table .price-row__price { grid-area: 1 / 2; text-align: right; }
.price-row__time { grid-area: 2 / 1; font-size: 0.9375rem; }
.price-table .price-row__book { grid-area: 2 / 2; text-align: right; }
.price-row__book a { display: inline-block; padding-block: 0.55rem; }
.price-row__deposit { grid-area: 3 / 1 / auto / -1; padding-bottom: 0.55rem; font-size: 0.9375rem; }
.price-row__deposit:empty { display: none; }
.price-row__price .draft-flag, .booking-group .draft-flag { display: block; width: 5.25rem; margin-left: auto; line-height: 1.2; text-align: center; white-space: normal; }
@container (min-width: 30rem) {
.price-row { grid-template-columns: minmax(0, 1fr) 9.25rem 5.25rem 2.75rem; gap: 0 var(--s-3); }
.price-row__time { grid-area: 1 / 2; font-size: inherit; }
.price-table .price-row__price { grid-area: 1 / 3; }
.price-table .price-row__book { grid-area: 1 / 4; }
.price-row__deposit { grid-area: 2 / 1 / auto / -1; }
}
.inner > .guests { max-width: 64rem; }
.book-stack { display: grid; gap: var(--s-5); }
.book-turn { display: flex; justify-content: center; gap: var(--s-5); margin: 0; }
.book-turn button { min-height: 2.75rem; padding: 0 var(--s-1); background: none; color: var(--ink); text-decoration: underline 1px; text-underline-offset: 0.3em; text-box: normal; }
.book-turn button:disabled { color: var(--sage-deep); text-decoration: none; }
.entries { margin-top: var(--s-6); text-align: start; }
.entries h3 { margin: var(--s-6) 0 var(--s-3); padding: 0; border: 0; }
.entries__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.entry { margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.entry blockquote { margin: 0; padding: 0; font-size: inherit; }
.entry p { margin: 0 0 var(--s-2); }
.entry__title { font-weight: 600; }
.entry .entry__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: 0; }
.entries__more { margin: var(--s-6) 0 0; text-align: center; }
@media (min-width: 56em) { .entries__list { columns: 2; column-gap: var(--s-7); } }
label, legend { font-weight: 600; }
fieldset { min-width: 0; margin: 0 0 var(--s-5); padding: 0; border: 0; }
legend { padding: 0; }
.field { display: grid; gap: var(--s-1); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea { width: 100%; max-width: 28rem; min-height: 2.75rem; padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: inherit; caret-color: var(--emerald); }
select, textarea { padding-inline: var(--s-2); border: 1px solid var(--ink); }
input[type="radio"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--emerald); }
.choice { position: relative; display: flex; gap: var(--s-3); align-items: center; min-height: 2.75rem; padding: 0.375rem 0; font-weight: 400; cursor: pointer; }
.notice { padding: var(--s-3) var(--s-4); border: 1px solid var(--ink); }
.booking__pages, .booking-form { display: grid; gap: var(--s-5); }
.booking-form { min-width: 0; row-gap: 3.25rem; }
.booking noscript p { margin: var(--s-5) 0 0; }
.booking-step h2 { margin: 0 0 var(--s-4); font-size: var(--text-xl); }
.booking-group legend { margin-bottom: var(--s-2); }
.booking-progress { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: var(--s-4) 0; padding: 0; list-style: none; }
.booking-progress [aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.4em; }
.booking-group .choice { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0 var(--s-3); align-items: baseline; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.booking-group input { align-self: center; grid-row: span 2; }
.choice__price { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.choice__time { grid-column: 2; font-size: 0.9375rem; }
.choice__book { display: none; }
html:not(.js) .booking-group .choice { grid-template-columns: minmax(0, 1fr) auto auto; cursor: auto; }
html:not(.js) .booking-group input { display: none; }
html:not(.js) .booking-group .choice__time { grid-column: 1; }
html:not(.js) .booking-group .choice__book { display: grid; grid-area: 1 / 3 / span 2; place-items: center; min-width: 2.75rem; min-height: 2.75rem; }
.booking-free { margin: 0 0 var(--s-5); padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.booking-free li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.booking-free__day { font-weight: 600; }
.booking-free__times { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-variant-numeric: tabular-nums lining-nums; }
.booking-free__failed { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-5); border-block: 1px solid var(--rule); }
.booking-free__failed span { font-weight: 600; }
.booking-free__failed a { padding: 0.75rem 0; }
.booking-card { position: sticky; bottom: 0; z-index: 4; display: grid; gap: var(--s-2); margin-inline: calc(-1 * var(--gutter)); padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); background: var(--paper); }
.booking-card__chosen { margin: 0; font-size: 0.9375rem; line-height: 1.35; }
.booking-card div:first-child dd { font-weight: 600; }
.booking-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin: 0; }
@media (max-width: 55.99em) {
dl.booking-card__chosen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-4); }
.booking-card div:nth-child(2) { font-weight: 600; }
}
.booking-nav a:not(.button) { padding: 0.75rem 0; }
.booking-nav .button { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; text-box: normal; }
@media (max-width: 29.99em) { .booking-free li { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 56em) {
.booking__pages { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.booking-card { top: calc(var(--bar) + var(--s-4)); bottom: auto; display: block; margin: 0; padding: var(--s-5); border: 0; }
.booking-card dt { position: static; width: auto; height: auto; clip-path: none; }
.booking-card dd { margin-bottom: var(--s-3); font-size: var(--text); }
.booking-nav { margin-top: var(--s-4); }
}
.hero { position: relative; container-type: inline-size; max-width: var(--stage); margin-inline: auto; overflow: clip; }
.room, .diary { container-type: inline-size; }
.hero__text { position: relative; z-index: 2; padding-top: calc(26.5 * var(--u)); text-align: center; }
.hero__text h1, .hero__text .proof { margin: 0; font: 500 calc(18.6 * var(--u))/1.3 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; text-wrap: balance; text-box: trim-both cap alphabetic; }
.hero__text h1 { letter-spacing: 0.1685em; }
.hero__text .proof__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.display-line { margin: calc(31 * var(--u)) calc(40 * var(--u)) calc(27.5 * var(--u)); padding-inline-start: calc(15 * var(--u)); font: 600 calc(85 * var(--u))/1.12 var(--serif); letter-spacing: -0.0385em; text-wrap: balance; text-box: trim-both cap alphabetic; }
@container (min-width: 43.01rem) {
.hero--air .room { margin-top: calc(-69 * var(--u)); }
.hero--long .display-line { padding-inline-start: 0; font-size: calc(2030 * var(--u) / var(--n)); }
.hero--long .room { margin-top: calc(-47 * var(--u)); }
}
.room { position: relative; margin: calc(-79 * var(--u)) 0 0; }
.room img { width: 100%; }
.room__labels ul { margin: 0; padding: 0; list-style: none; }
.room .label { position: absolute; left: var(--x); top: var(--y); min-width: var(--w); }
.label--door { --x: 8.4%; --y: 20.5%; --w: 10.16%; }
.label--diary { --x: 14.16%; --y: 47.52%; --w: 12.89%; }
.label--kettle { --x: 56.35%; --y: 40.77%; --w: 9.67%; }
.label--couch { --x: 63.77%; --y: 70.95%; --w: 14.36%; }
.label--guest-book { --x: 89.36%; --y: 47.3%; --w: 9.38%; }
.room .label--guest-book { left: auto; right: max(1.26%, 0.75rem); }
.room .label--kettle { left: auto; right: 34.05%; width: min-content; line-height: 1.5; white-space: normal; translate: 0 calc(30.8 * var(--u) - 100%); }
.label { display: block; padding: calc(9.7 * var(--u)) calc(7.3 * var(--u)) calc(9.3 * var(--u)) calc(9.6 * var(--u)); background: var(--paper); color: var(--ink); font: 500 max(0.75rem, calc(16.86 * var(--u)))/1 var(--serif); letter-spacing: 0.136em; word-spacing: 0.06em; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; text-box: trim-both cap alphabetic; }
.label:hover, .label:focus-visible { background: var(--emerald); color: var(--paper-bright); }
.label:focus-visible { outline: 2px solid var(--paper-bright); outline-offset: 2px; }
.diary { position: relative; margin-top: -1px; aspect-ratio: 1536 / 717; }
.diary__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.diary__plant { position: absolute; z-index: 1; right: 0; top: calc(-60 * var(--u)); width: calc(99 * var(--u)); pointer-events: none; }
.diary__page { position: absolute; z-index: 2; left: calc(164 * var(--u)); top: calc(64 * var(--u)); width: calc(706 * var(--u)); }
.diary__page h2 { margin: 0; padding-inline-start: calc(4 * var(--u)); font: 600 calc(25.9 * var(--u))/1.2 var(--sans); letter-spacing: 0.1885em; text-transform: uppercase; text-box: trim-both cap alphabetic; }
.ruled { margin: calc(29 * var(--u)) 0 0 calc(-4 * var(--u)); padding: 0; list-style: none; border-top: max(1px, calc(1.5 * var(--u))) solid var(--rule); font: 400 calc(27.6 * var(--u))/1 var(--serif); font-variant-numeric: lining-nums; }
.ruled > li { display: grid; grid-template-columns: calc(262 * var(--u)) 1fr auto; align-items: baseline; padding: calc(25 * var(--u)) calc((60.5 - 3.75 * var(--row, 0)) * var(--u)) calc(25 * var(--u)) calc(14 * var(--u)); border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--rule); }
.ruled time { display: contents; word-spacing: 0.22em; }
.ruled span, .ruled a { text-box: trim-both cap alphabetic; }
.ruled a { text-decoration-thickness: max(1px, calc(1.6 * var(--u))); text-underline-offset: calc(5 * var(--u)); }
.availability__treatment > span { grid-column: 1 / 3; }
.diary__all { margin: calc(30.5 * var(--u)) 0 0; }
.diary__all .button { padding: calc(22.2 * var(--u)) calc(41 * var(--u)); font-size: calc(30.8 * var(--u)); }
.diary .availability__note { position: absolute; left: calc(350 * var(--u)); bottom: 0; width: calc(340 * var(--u)); margin: 0; font-size: max(0.75rem, calc(15.5 * var(--u))); line-height: 1.35; }
.diary .draft-flag { position: absolute; right: 0; top: 0; margin: 0; }
.ruled a, .wordmark { position: relative; }
@media (pointer: coarse) { .room .label::after, .ruled a::after, .wordmark::after { content: ""; position: absolute; inset: -0.875rem -0.25rem; } }
@container (max-width: 43rem) { .room .label::after { content: ""; position: absolute; inset: -0.75rem -0.25rem; } }
@container (max-width: 43rem) {
.hero__text { padding-top: 1.5rem; }
.hero__text h1, .hero__text .proof { padding-inline: var(--s-4); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.14em; }
.display-line { margin: 1.1rem var(--s-4) 1rem; padding: 0; font-size: clamp(2rem, 8.7cqw, 3.5rem); line-height: 1.2; }
.room { margin-top: 0.5rem; }
.room .label { left: var(--ax); top: var(--ay); min-width: 0; padding: 0.45rem 0.5rem; translate: calc(-1 * var(--fx)) calc(-1 * var(--fy)); }
.label--door { --ax: 10.1%; --ay: 21.6%; --fx: 14%; --fy: 82%; }
.label--diary { --ax: 20.7%; --ay: 51%; --fx: 50%; --fy: 96%; }
.room .label--kettle { right: auto; --ax: 60.3%; --ay: 43.4%; --fx: 62%; --fy: 100%; }
.label--couch { --ax: 66.4%; --ay: 71.2%; --fx: 16%; --fy: 8%; }
.room .label--guest-book { left: auto; --ay: 50.7%; --fx: 0%; --fy: 96%; }
.diary { aspect-ratio: auto; min-height: 13rem; margin-top: 1.5rem; background: #efdfd1; overflow: clip; }
.diary__art img { inset: -1.5cqw auto auto -9cqw; width: 220%; max-width: none; height: auto; }
.diary__plant { display: none; }
.diary__page { position: relative; inset: auto; width: auto; padding: 2rem 1rem 2.75rem 22%; }
.diary__page h2 { padding: 0; font-size: 0.75rem; letter-spacing: 0.15em; }
.ruled { margin: 0.9rem 0 0; border-top-width: 1px; font-size: 1rem; }
.ruled > li { grid-template-columns: 6.25rem 1fr auto; align-items: center; min-height: 2.75rem; padding: 0; border-bottom-width: 1px; }
.ruled time { word-spacing: 0.06em; }
.ruled span, .ruled a { text-box: normal; }
.ruled a { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.ruled a::after { content: none; }
.diary__all { margin-top: 1.25rem; }
.diary__all .button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; font-size: 1.0625rem; text-box: normal; }
.diary .availability__note { position: static; width: auto; margin-top: 1rem; font-size: 0.8125rem; }
.diary .draft-flag { position: static; display: inline-block; margin-top: var(--s-2); }
}
@container (max-width: 22.4rem) {
.label--diary { --fx: 48%; }
.room .label--kettle { --fx: 70%; --fy: 118%; }
.label--couch { --fx: 23%; }
}
@media (hover: none) {
.room .label { padding-right: 1.5em; }
.room .label::before { content: ""; position: absolute; right: 0.62em; top: 50%; width: 0.36em; height: 0.36em; border: solid; border-width: 0.1em 0.1em 0 0; rotate: 45deg; translate: 0 -50%; }
}
@media (min-width: 75rem) and (min-aspect-ratio: 67/100) {
.hero { display: grid; grid-template-columns: 3fr 2fr; column-gap: var(--s-6); width: min(100% - 2 * var(--gutter), 90rem); max-width: none; padding-bottom: var(--s-6); overflow: visible; }
.hero__text { grid-column: 1 / -1; padding-block: 2rem 1.75rem; text-align: start; }
.hero__text h1, .hero__text .proof { font-size: 1rem; }
.hero .display-line { margin: 1.6rem 0 2rem; padding: 0; font-size: min(5.25rem, 150rem / var(--n, 20)); }
.hero .room { margin: 0; }
.hero .diary { align-self: start; aspect-ratio: auto; margin: 0; border: solid transparent; border-width: 0.45rem 0.75rem 0.62rem 0; border-image: var(--sheet); background: var(--paper) padding-box; }
.hero .diary::after { display: block; }
.diary__art { display: none; }
.hero .diary__page { padding: 1.9rem 1.25rem 2rem 3.5rem; }
.hero .diary__page h2 { font-size: 0.8125rem; }
.hero .ruled { margin-top: 1.25rem; font-size: 1.25rem; }
.hero .ruled > li { grid-template-columns: 7.75rem 1fr auto; min-height: 3.5rem; }
.hero .diary .availability__note { margin-top: 1.25rem; font-size: 0.9375rem; }
.hero .diary__all { margin-top: 1.5rem; }
}
.wall { margin-top: 0; background: var(--sage) url("/img/wash-640.webp"); }
.wall__inner { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; padding-block: var(--section); }
.wall + .wall .wall__inner { padding-top: 0; }
.prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); align-items: end; }
.print { display: contents; }
.print__link { order: 1; display: grid; justify-items: center; gap: var(--s-3); text-decoration: none; }
.print__frame { display: block; width: calc(var(--scale, 1) * 100%); }
.print__frame img { width: 100%; box-shadow: var(--cast); }
.plate { margin: 0; padding: 0.6rem 0.85rem 0.55rem; background: var(--paper); font: 600 0.9375rem/1.25 var(--serif); letter-spacing: 0; text-align: center; box-shadow: var(--cast); }
.plate__price { display: block; font-weight: 400; }
.print__link:hover .plate, .print__link:focus-visible .plate { background: var(--emerald); color: var(--paper-bright); }
.print__text { order: 2; grid-column: 1 / -1; align-self: start; padding-top: var(--s-4); border-top: 1px solid var(--sage-deep); font-size: 1rem; line-height: 1.55; }
.print__text p { max-width: var(--measure); margin: 0 0 var(--s-3); }
.print__pages { margin: 0; padding: 0; list-style: none; }
.print__pages a { display: block; padding: 0.65rem 0; border-top: 1px solid var(--sage-deep); text-decoration: none; }
.print__pages a:hover { text-decoration: underline; }
@media (min-width: 56em) {
.prints { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.print__text { grid-column: auto; padding-top: 0; border-top: 0; }
}
.prints.prints--rows, .prints.prints--three { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
.prints--rows .print, .prints--three .print { display: grid; gap: var(--s-4) var(--s-5); align-items: center; padding-block: var(--s-5); border-top: 1px solid var(--sage-deep); }
.prints--rows .print { grid-template-columns: 34% minmax(0, 1fr); }
.prints--rows .print__text, .prints--three .print__text { grid-column: auto; padding: 0; border: 0; }
@media (min-width: 56em) {
.prints.prints--rows { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.prints.prints--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.prints--rows .print, .prints--three .print { display: contents; }
}
.sheet { position: relative; max-width: 40rem; margin-left: 0.75rem; padding: 1.2rem 0.75rem 1.5rem 2.6rem; border: solid transparent; border-width: 0.45rem 0.75rem 0.62rem 0; border-image: var(--sheet); background: var(--paper) padding-box; }
@media (min-width: 40em) { .sheet { margin-left: 0; padding: 1.75rem 1.5rem 2rem 3.5rem; } }
.sheet:not(.price-rows)::after, .diary::after { content: ""; position: absolute; top: 100%; right: 1rem; width: 1rem; height: 2.85rem; background: url("/img/ribbon-42.webp") 0 0 / 100% 100%; }
.diary::after { display: none; }
.sheet > :last-child { margin-bottom: 0; }
.sheet ol { padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--rule); }
.sheet ol > li { position: relative; padding: 1rem 0 1rem 2.5rem; border-bottom: 1px solid var(--rule); counter-increment: step; }
.sheet ol > li::before { content: counter(step); position: absolute; left: 0; top: 0.72rem; font: 600 1.5rem/1.2 var(--serif); font-variant-numeric: lining-nums; }
.studio__window { position: relative; }
.studio__window img { width: 100%; }
.sill-card { position: absolute; left: 49%; bottom: 18.2%; width: max-content; max-width: 52%; margin: 0; padding: 0.5rem 0.7rem 0.45rem; background: var(--paper); font: 600 clamp(0.8125rem, 3.4vw, 0.9375rem)/1.25 var(--serif); text-align: center; translate: -50% 0; }
.sill-card span { display: inline-block; }
.studio__flag { position: absolute; right: 4%; top: 2%; margin: 0; }
.book { display: grid; }
.book__page { position: relative; aspect-ratio: 741 / 960; overflow: hidden; }
.book__art img { position: absolute; inset: 0 auto auto 0; width: 200%; max-width: none; height: 100%; }
.book__page--right .book__art img { left: -100%; }
.book__text { position: absolute; inset: 9% 8% 15% 17%; display: grid; align-content: center; font-size: clamp(1.0625rem, 1.45vw, 1.1875rem); line-height: 1.5; }
.book__page--right .book__text { inset-inline: 8% 17%; }
.book__text p { margin: 0 0 0.6em; }
.book__text blockquote, .book__entry { margin: 0; padding: 0; font-size: inherit; }
.book__text > p:last-child, .book__entry figcaption { margin: 0.5rem 0 0; font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 48em) { .book { grid-template-columns: 1fr 1fr; } }
.content--home > .draft-note { width: min(100% - 2 * var(--gutter), var(--measure)); margin: var(--s-4) auto; }
.content--home .section h2 { margin: 0 0 var(--s-5); font-size: clamp(2rem, 4.4vw, 3.125rem); line-height: 1.04; letter-spacing: -0.032em; }
.content--home > .intro, .why, .visit, .meet, .guests, .plain { width: min(100% - 2 * var(--gutter), var(--col, var(--wide))); margin: var(--section) auto; }
.content--home > .intro { --col: 46rem; margin-bottom: var(--s-7); font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.012em; text-align: center; text-wrap: balance; }
.intro > :last-child, .why p:last-child, .meet p:last-child, .studio__text > p:last-of-type { margin-bottom: 0; }
.why, .visit, .meet, .studio__inner { display: grid; gap: var(--s-5) var(--s-7); }
.why { margin-top: 0; }
.plain { --col: var(--measure); }
.section__text, .meet__text p, .studio__text p { max-width: 34rem; font-size: 1.125rem; line-height: 1.65; }
.meet, .studio__inner { align-items: center; }
.meet__art { width: min(72%, 19rem); }
.studio__window { margin-inline: calc(-1 * var(--gutter)); }
.wall .prints { margin-top: var(--s-6); }
.wall__more { margin: var(--s-6) 0 0; }
.guests { --col: 64rem; text-align: center; }
.guests .book { margin: 0 calc(-1 * var(--gutter)) var(--s-4); text-align: start; }
.guests > p { margin: 0; }
@media (min-width: 48em) { .guests .book { margin-inline: 0; } }
@media (min-width: 56em) {
.why, .visit, .meet, .studio__inner { grid-template-columns: 5fr 7fr; }
.why h2, .visit h2 { margin: 0; }
.section__text { padding-top: 0.4rem; }
.meet__art { width: min(100%, 24rem); justify-self: center; }
.studio__window { margin-inline: 0 calc(-0.5 * var(--gutter)); }
}
.closing.wall { margin: 0; padding: var(--section) var(--gutter); text-align: center; }
.closing__inner { max-width: 40rem; margin-inline: auto; }
.closing__inner > p:first-child { margin-bottom: var(--s-5); font-size: clamp(1.3125rem, 2.3vw, 1.75rem); line-height: 1.3; letter-spacing: -0.012em; text-wrap: balance; }
.closing.wall .actions { justify-content: center; margin: 0; }
.site-footer { background: var(--floor) url("/img/floor-1100.webp") 0 0 / auto 11rem repeat-x; color: var(--paper-bright); }
@media (min-resolution: 1.5x) { .site-footer { background-image: url("/img/floor-2200.webp"); } }
.site-footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s-6); width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; padding: 10.5rem 0 var(--s-6); }
.site-footer h2 { margin: 0 0 var(--s-3); font: 600 var(--text-s)/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { padding-block: 0.2rem; }
.site-footer__nav a, .site-footer__find a { display: inline-block; padding-block: 0.55rem; }
.site-footer__nav ul + ul { margin-top: var(--s-4); }
.site-footer__name { font: 500 var(--text-s)/2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.site-footer .hours__row { border-color: rgb(244 242 232 / 0.28); }
.site-footer .hours dt { flex-basis: 7.5rem; }
.site-footer__legal { grid-column: 1 / -1; margin: 0; font-size: var(--text-s); }
.site-footer :focus-visible { outline-color: var(--paper-bright); }
@media (min-width: 60em) { .site-footer__nav { padding-top: 2rem; } }
@media (prefers-reduced-motion: no-preference) {
.room .label { animation: label-settle 0.36s var(--ease) both; animation-delay: calc(0.1s + var(--i, 0) * 0.07s); }
.label--door { --dx: -0.7em; --dy: 0.95em; }
.label--diary { --dx: -0.2em; --dy: 1.15em; }
.label--kettle { --dx: -0.5em; --dy: 0.85em; }
.label--couch { --dx: -0.65em; --dy: -1.2em; }
.label--guest-book { --dx: -0.35em; --dy: 1.1em; }
.sill-card { transition: opacity 0.2s, transform 0.36s var(--ease); }
.sill-card.is-waiting { opacity: 0; transform: translateY(-1rem); }
}
@keyframes label-settle { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } }
.draft-banner { margin: 0; padding: var(--s-2) var(--s-4); background: var(--draft); color: #000; font: 600 var(--text-s)/1.4 var(--sans); text-align: center; }
.draft-note { display: block; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border: 2px dashed #000; background: var(--draft); color: #000; font: 400 var(--text-s)/1.4 var(--sans); }
.draft-note--inline { display: inline; margin: 0; padding: 0 var(--s-1); border-width: 1px; }
.draft-note ul { margin: var(--s-1) 0 0; }
.draft-confirm, .draft-flag, .draft-label { padding: 0 var(--s-1); border: 1px dashed #000; background: var(--draft); color: #000; font: 600 0.8125rem/1.4 var(--sans); white-space: nowrap; }
p.draft-flag, figcaption.draft-flag { display: inline-block; white-space: normal; }
.placeholder-image { position: relative; display: block; }
.placeholder-image .draft-label { position: absolute; top: var(--s-2); left: var(--s-2); }
.copy-needed { padding: 0 var(--s-1); outline: 2px dashed #000; background: var(--draft); color: #000; font-weight: 600; }
ul.posts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.posts > li { margin: 0; border-bottom: 1px solid var(--rule); }
.posts .entry { padding-top: var(--s-2); }
.posts h3 { margin: 0; padding: 0; border: 0; }
.posts a { display: block; padding-block: 0.6rem; }
.posts a:focus-visible { outline-offset: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-size: var(--text-s); }
.post-meta > * { white-space: nowrap; }
.posts .post-meta { margin: 0; }
@media (min-width: 56em) { .corner__inner > .post-meta { margin-top: var(--s-3); } }
.sheet.sheet--posts::after { content: none; }
.posts__back { margin: var(--s-5) 0 0; }
.posts__back a { display: inline-block; padding-block: 0.6rem; }
@media (max-width: 39.99em) {
.content--post .corner__inner { --object: min(34%, 7.5rem); }
.content--post .corner__inner > .corner__object + .corner__text { grid-column: 1 / -1; }
.content--post .corner h1 { font-size: clamp(2rem, 8.4vw, 3.5rem); }
}
.corner__beside { display: none; }
@media (min-width: 56em) {
.corner--beside .corner__inner { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); }
.corner--beside .corner__text { display: contents; }
.corner--beside .corner__lead, .corner--beside .corner__inner > .corner__tags { grid-column: 1; }
.corner--beside h1 { grid-column: 1 / -1; }
.corner--beside .corner__inner > .corner__beside { display: block; grid-column: 2; grid-row: 3 / span 2; justify-self: end; width: min(100%, 14rem); }
}
@media (min-width: 64em) and (max-width: 69.99em) { .site-nav__row { gap: calc(var(--s-2) + (100vw - 64rem) / 6); } }