@font-face {
  font-family: Suisse;
  src: url('/assets/fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  font-family: Suisse, Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
  font-synthesis: none;
  --edge: clamp(24px, 3.35vw, 64px);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; min-height: 400px; display: grid; grid-template-rows: 92px minmax(0, 1fr) 92px; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; border: 0; background: transparent; cursor: pointer; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid #222; outline-offset: 5px; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
.masthead { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--edge); }
.masthead a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.wordmark { letter-spacing: -.2px; }
.contact { padding-left: 16px; }
.header-links { display: flex; align-items: center; gap: 18px; }
.header-links button { min-height: 44px; padding: 0 8px; font-size: 13px; }
.header-links button:hover { text-decoration: underline; text-underline-offset: 4px; }
#main { min-width: 0; min-height: 0; }
.showroom { position: relative; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.showroom::-webkit-scrollbar { display: none; }
.showroom:focus-visible { outline-offset: -6px; }
.showroom-track { position: absolute; left: 0; top: 0; height: 1px; pointer-events: none; }
.showroom-viewport { position: sticky; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.showroom-grid { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; --zoom: 1; }
.work { position: absolute; margin: 0; }
.work-media { position: relative; display: block; width: 100%; height: 100%; padding: 0; }
.work-backdrop { position: absolute; object-fit: contain; transform: translateX(var(--parallax-x, 0px)); pointer-events: none; }
.artwork { display: block; width: 100%; height: 100%; }
.artwork > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.artwork > .material-object { width: 100%; height: 100%; }
.showroom.is-overview { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; overscroll-behavior-y: contain; }
.is-overview .showroom-track { display: none; }
.is-overview .showroom-viewport { position: relative; height: auto; min-height: 100%; overflow: visible; }
.is-overview .showroom-grid { --grid-cell-height: clamp(200px, 23vw, 300px); position: relative; width: 100%; height: auto; padding: 20px var(--edge) 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; transform: none !important; will-change: auto; --zoom: 1 !important; }
.is-overview .work { position: relative; left: auto !important; top: auto !important; width: auto !important; height: var(--grid-cell-height) !important; padding: 12px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.is-overview .work[data-overview-span="wide"] { grid-column: span 2; }
.is-overview .work[data-overview-span="full"] { grid-column: 1 / -1; }
.is-overview .work-media { width: min(100%, calc((var(--grid-cell-height) - 24px) * var(--grid-aspect))); height: auto; aspect-ratio: var(--grid-aspect); cursor: pointer; }
.is-overview .work-backdrop { display: none; }
.is-overview .work-media:focus-visible { outline-offset: 8px; }
.work-media:hover { text-decoration: none; }
.work-title, .work-kind { display: block; }
.work-kind { color: #717171; font-size: 10px; }
.material-ipad .material-face > img { width: 100%; height: 100%; object-fit: contain; }
.abacus { position: relative; height: 28px; cursor: pointer; touch-action: pan-y; grid-column: 1 / -1; grid-row: 1; width: 100%; }
.abacus:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.abacus-bead { position: absolute; left: 0; top: 0; width: 0; height: 28px; }
.abacus-bead::before { content: ''; position: absolute; width: 3px; height: 3px; left: -1.5px; top: 12.5px; border-radius: 50%; background: #999; }
.abacus-bead::after { content: ''; position: absolute; inset: 4px -7px; }
.abacus-bead.is-current::before { background: #555; }
.current-work { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 11px; line-height: 1.6; }
.current-title, .current-kind { display: inline; }
.current-kind { font-size: 10px; color: #717171; }
.current-kind::before { content: ' / '; white-space: pre; }
.work-media:focus-visible { outline-offset: 10px; }
.candle-trigger { cursor: pointer; }
.product-dialog { position: fixed; width: min(760px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 42px; color: #222; border: 0; background: #fff; overflow-y: auto; }
.product-dialog[open] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr); align-items: center; gap: 32px; }
.product-dialog::backdrop { background: #ffffffed; }
.product-dialog > img { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: contain; }
.dialog-close { position: absolute; right: 12px; top: 8px; min-height: 44px; padding: 0 16px; font-size: 12px; }
.about-dialog { width: min(570px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); padding: 54px 40px 36px; border: 0; background: #fff; color: #222; font-size: 14px; line-height: 1.65; }
.about-dialog::backdrop { background: #ffffffef; }
.about-dialog h2, .about-dialog h3 { font-weight: 400; font-size: 12px; margin: 0 0 22px; }
.about-dialog h3 { margin: 30px 0 10px; color: #717171; }
.about-dialog p { margin: 0 0 18px; }
.about-dialog .about-clients { font-size: 12px; }
.about-contact { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.product-details { font-size: 12px; line-height: 1.6; }
.product-details h2 { margin: 0 0 20px; font-size: 15px; font-weight: 400; }
.product-details p { margin: 6px 0; }
.order-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; text-decoration: underline; text-underline-offset: 4px; }
.product-details .order-note { margin-top: 16px; max-width: 190px; color: #717171; font-size: 10px; }
.image-unavailable { color: #717171; font-size: 11px; }
.navigation { padding: 0 var(--edge) 12px; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; grid-template-rows: 28px 44px; align-content: end; align-items: center; gap: 0 20px; color: #717171; font-size: 11px; }
.navigation > span, .navigation > .review-entry { grid-column: 1; grid-row: 2; }
.navigation nav { grid-column: 3; grid-row: 2; display: flex; justify-self: end; gap: 8px; }
.navigation button { width: 44px; height: 44px; font-size: 18px; color: #222; }
.navigation button:disabled { color: #c7c7c7; cursor: default; }
.navigation button:not(:disabled):hover { background: #f5f5f5; }
.navigation .motion-toggle { width: auto; margin-right: 16px; font-size: 11px; color: #717171; }
.navigation .grid-toggle { width: auto; min-width: 44px; padding: 0 6px; margin-right: 4px; font-size: 11px; color: #717171; }
.navigation .grid-toggle[aria-pressed="true"] { color: #222; text-decoration: underline; text-underline-offset: 4px; }
.status-note { margin: 0; padding: 40px var(--edge); font-size: 12px; }
.no-script { position: fixed; inset: 45% var(--edge) auto; padding: 24px; background: white; font-size: 14px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 2; top: 8px; left: var(--edge); padding: 12px; background: #fff; }
@media (max-width: 760px) {
  :root { --edge: 24px; }
  body { grid-template-rows: 76px minmax(0, 1fr) 80px; }
  .navigation { padding-bottom: 8px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; }
  .navigation > span { display: none; }
  .navigation nav { gap: 0; }
  .navigation button { width: 32px; }
  .navigation .motion-toggle { margin-right: 4px; }
  .motion-label, .current-kind { display: none; }
  .current-work { font-size: 10px; }
  .work figcaption { font-size: 12px; }
  .work-kind { font-size: 11px; }
  .is-overview .showroom-grid { --grid-cell-height: clamp(160px, 38vw, 250px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; padding-top: 12px; }
  .is-overview .work { padding: 8px; }
  .is-overview .work-media { width: min(100%, calc((var(--grid-cell-height) - 16px) * var(--grid-aspect))); }
  .navigation .grid-toggle { min-width: 36px; padding: 0 3px; margin-right: 0; }
  .header-links { gap: 2px; }
  .contact { padding-left: 8px; }
  .about-dialog { padding: 50px 24px 24px; }
  .product-dialog { padding: 40px 24px 24px; }
  .product-dialog[open] { grid-template-columns: 1fr; gap: 0; }
  .product-dialog > img { max-height: 45vh; }
  .product-details { text-align: center; }
  .product-details h2 { margin-bottom: 12px; }
  .product-details .order-note { margin-inline: auto; }
}
@media (max-height: 560px) {
  body { grid-template-rows: 62px minmax(0, 1fr) 76px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }