@font-face { font-family: "Foyer Sans"; src: url("/assets/v/FoyerSans-Regular.97e2c22647.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Foyer Sans"; src: url("/assets/v/FoyerSans-Bold.ad7b18d9cf.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* The home page is a section drawing of a room. At night the paper is ink-dark and the room is lit by its own
   screens; by day the drawing sits on pale paper. Colour inside the room comes only from the lamp, the moon and the
   screens. Without the room (no JavaScript, no WebGL, or ?plain) the same page is a plain list of the products:
   html.room is set by assets/house/house.js once the room has loaded. */
:root {
  --void: #0D0F13; --ink: #E9E6DF; --ink-2: #9A9C9F; --rule: #2A2D33; --range: #F2B705;
  --foyer: #FFB224; --kc: #4C8DFF;
  --pad: clamp(16px, 3.4vw, 44px);
}
body.day { --void: #E4E1DA; --ink: #1C201E; --ink-2: #5A5F5C; --rule: #C9C5BC; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--void); color: var(--ink); font: 400 16px/1.5 "Foyer Sans", sans-serif; transition: background-color .6s; }
a { color: inherit; text-underline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -60px; z-index: 5; background: var(--ink); color: var(--void); padding: 8px 12px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--range); outline-offset: 3px; }

/* Shown only with the room, or only without it. */
.room-only { display: none !important; }
html.room .room-only { display: revert !important; }
html.room .plain-only { display: none !important; }
html.room body { overflow: hidden; height: 100vh; }

header.site { display: flex; justify-content: space-between; align-items: baseline; padding: var(--pad); font-size: 15px; }
header.site nav { display: flex; gap: 22px; align-items: baseline; }
header.site nav a, .sound { color: var(--ink-2); text-decoration: none; }
header.site nav a:hover, .sound:hover, .sound[aria-pressed="true"] { color: var(--ink); }
.sound { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wordmark { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; text-decoration: none; }
.mark { width: 12px; height: 12px; background: var(--range); }

h1 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.02em; font-weight: 700; }

/* ---- Plain page */
.plain-intro { padding: clamp(32px, 8vh, 96px) var(--pad) 0; max-width: 1100px; }
.plain-intro p { color: var(--ink-2); font-size: 18px; margin: 16px 0 0; max-width: 34em; }
.still { display: block; width: calc(100% - 2 * var(--pad)); max-width: 1280px; height: auto; margin: 40px var(--pad) 0; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 48px; padding: 24px var(--pad) 64px; max-width: 1180px; }
.products article { border-top: 1px solid var(--ink); padding: 22px 0 10px; }
.products h3 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.products h3 a { text-decoration: none; }
.products h3 a:hover { text-decoration: underline; }
.products .for { color: var(--ink-2); margin: 6px 0 14px; font-size: 15px; }
.products p { margin: 0 0 14px; max-width: 34em; }
.products .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
footer.site { display: flex; gap: 24px; flex-wrap: wrap; padding: 22px var(--pad) 40px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
footer.site p { margin: 0; }

/* ---- The room */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; transition: opacity .6s ease-out; }
html.room .scene { display: block !important; opacity: 1; }
body.hot .scene { cursor: pointer; }
html.room header.site { position: fixed; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; }
html.room header.site a, html.room header.site button { pointer-events: auto; }
.room-ui { position: fixed; z-index: 2; left: var(--pad); right: var(--pad); bottom: var(--pad); grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; pointer-events: none; transition: opacity .35s; }
html.room .room-ui { display: grid !important; }
.room-ui h1 { grid-column: 1; font-size: clamp(28px, 3.1vw, 44px); }
.clock { grid-column: 1; margin: 10px 0 0; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.legend { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: auto; }
html.room .legend { display: flex !important; }
.legend a, .legend button { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; padding: 5px 0; cursor: pointer; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.legend a:hover, .legend button:hover { text-decoration: underline; }
.sq { width: 9px; height: 9px; }
.sq.door { background: var(--range); } .sq.foyer { background: var(--foyer); } .sq.kc { background: var(--kc); } .sq.poster { background: #C8352A; }
body.inside .room-ui, body.flying .room-ui { opacity: 0; pointer-events: none; }
body.inside .room-ui * { pointer-events: none; }

/* A label that follows the hovered object in the room. */
.tag { position: fixed; z-index: 2; left: 0; top: 0; margin: 0; font-size: 14px; color: var(--ink); white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.tag b { font-weight: 700; }

/* Inside a product: the camera has flown up to the screen; this text sits beside it. */
.product { position: fixed; z-index: 2; top: 0; bottom: 0; left: 0; width: min(36vw, 480px); padding: calc(var(--pad) + 64px) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: center; color: #ECE8E0; }
.product.foyer { background: #141312; --accent: var(--foyer); }
.product.keycadence { background: #15171C; --accent: var(--kc); color: #E7E9EE; }
.product[hidden], .posterbar[hidden] { display: none; }
.product h2 { margin: 0; font-size: clamp(40px, 4.2vw, 60px); line-height: 1; letter-spacing: -.02em; }
.product .for { margin: 10px 0 22px; color: color-mix(in srgb, currentColor 62%, transparent); font-size: 15px; }
.product p { margin: 0 0 14px; max-width: 30em; }
.product .note { font-size: 14px; color: var(--accent); }
.product .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 28px; }
.product .links a:first-child { font-weight: 700; }
.back, .next { white-space: nowrap; }
.back { align-self: flex-start; font: inherit; font-size: 15px; color: inherit; background: none; border: 1px solid currentColor; padding: 7px 12px; cursor: pointer; }
.back:hover { background: #ECE8E0; color: #141312; }
.product .back:focus-visible { outline-color: var(--accent); }
kbd { font: 700 11px/1 "Foyer Sans", sans-serif; border: 1px solid currentColor; padding: 2px 4px; margin-left: 8px; }
.product > * { opacity: 0; transform: translateX(-14px); transition: opacity .32s ease-out, transform .32s ease-out; }
.product.shown > * { opacity: 1; transform: none; }
.product.shown > :nth-child(2) { transition-delay: .04s; } .product.shown > :nth-child(3) { transition-delay: .08s; }
.product.shown > :nth-child(4) { transition-delay: .12s; } .product.shown > :nth-child(5) { transition-delay: .16s; }
.product.shown > :nth-child(6) { transition-delay: .2s; }

/* At the poster: two buttons under it, nothing else in the way. */
.posterbar { position: fixed; z-index: 2; left: 50%; bottom: var(--pad); transform: translateX(-50%); display: flex; gap: 12px; color: var(--ink); }
.posterbar > * { opacity: 0; transition: opacity .3s ease-out; }
.posterbar.shown > * { opacity: 1; }
.next { font: inherit; font-size: 15px; color: #141312; background: #ECE8E0; border: 1px solid #ECE8E0; padding: 7px 14px; cursor: pointer; }
.next:hover { background: #fff; }
.posterbar .back:hover { background: var(--ink); color: var(--void); }

@media (max-width: 700px) {
  header.site nav { gap: 16px; }
  html.room header.site nav .plain-link { display: none !important; }
  /* On a phone the room fills the screen above a solid block that holds the headline and the legend. */
  .room-ui { grid-template-columns: 1fr; row-gap: 12px; left: 0; right: 0; bottom: 0; padding: 18px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); background: var(--void); }
  .clock { margin-top: 6px; }
  .legend { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  html.room .legend { flex-direction: row; }
  .legend a, .legend button { font-size: 14px; }
  .product { top: auto; left: 0; right: 0; width: auto; height: 56%; padding: 22px var(--pad) var(--pad); justify-content: flex-start; overflow-y: auto; }
  .product h2 { font-size: 34px; }
  .product .for { margin-bottom: 12px; }
  .product .links { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .product > *, .scene { transition: none; }
}