@font-face { font-family: "Areal"; src: url("Fonts/ABCAreal-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Areal"; src: url("Fonts/ABCAreal-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Areal"; src: url("Fonts/ABCAreal-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("Fonts/ABCArealMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --gutter: 20px;
  --line: #8c8c8c;
  --fade: 0.45;
  --ease: 180ms ease;
  /* list / info-bar column widths, taken from the Figma frame */
  --cols: 473fr 355fr 237fr 335fr;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: "Areal", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
/* full-width bar, fixed to the top; the page below leaves room for it */
:root { --bar-h: 43px; }
body:has(> .topbar) { padding-top: var(--bar-h); }
.topbar {
  position: fixed; top: 0; left: 0; right: var(--rf-open-w, 0px); z-index: 15;
  height: var(--bar-h);
  background: #000; color: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  transition: right 0.42s var(--rf-ease, ease);
}
.title { font-size: 17px; letter-spacing: -0.02em; }
.title .t-short { display: none; }
.toggle { font-size: 11px; }
.insta { justify-self: end; font-size: 11px; }
.toggle a.active { text-decoration: underline; text-underline-offset: 2px; }

main { padding: 0 var(--gutter) 160px; }

h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 28px 0 0;
  line-height: 1.1;
}

/* ---------- Image / grid view ---------- */
.grid-section + .grid-section { margin-top: 150px; }

.grid {
  --item-h: clamp(150px, 20vw, 290px);          /* board height; a cell is one board wide */
  --cell: calc(var(--item-h) * 529 / 1200);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, var(--cell));
  grid-auto-flow: row dense;                    /* a later board fills a gap left by a wide photo that didn't fit at the end of a row */
  justify-content: space-between;
  row-gap: 128px;
  margin-top: 60px;
  padding: 0 8px;
}
/* Every board gets the same box (the shape of the deck photos, 529×1200); photos fit inside it. */
.grid .item {
  height: var(--item-h);
  width: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid .item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--ease);
}
.grid.hovering .item:not(.on) img { opacity: var(--fade); }
/* a photo wider than a board takes as many cells as it needs (set in museum.js), starting at a column edge */
.grid .item.wide { width: auto; justify-self: start; }
.grid .item.wide img { width: auto; max-width: none; height: 100%; }
/* wheels and trucks: square product shots, sized so 6 fit across */
.grid.square { --item-h: clamp(100px, 14vw, 200px); --cell: var(--item-h); }
/* the photos fill their square, so are scaled to a common size in museum.js (this is the fallback) */
.grid.square .item img { transform: scale(.78); }

/* black info bar */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  background: #000;
  color: #fff;
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
  z-index: 3; /* sits on top of the big image */
}
.bar.show { opacity: 1; }
.bar span:first-child { padding-left: 14px; }
.bar span, .row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }

/* big hover image, always centred in the window */
.preview {
  position: fixed;
  left: 50%;
  top: 50%;
  height: auto;
  width: auto;
  max-height: min(700px, 80vh);
  max-width: 92vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: none;
  z-index: 2;
}
.preview.show { opacity: 1; }
/* touch: the shown image catches the tap that closes it */
.touch .preview.show { pointer-events: auto; }
/* mobile image view: the info bar sits on the screen (like the desktop bar over the big photo) and follows your scrolling */
.scrub .preview.show { pointer-events: auto; cursor: pointer; }
.scrub .bar {
  position: fixed; left: 0; right: 0; top: 45%; transform: translateY(-50%);
  height: auto; min-height: 36px; padding: 9px 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-size: 12px; line-height: 1.25;
}
.scrub .bar.show { pointer-events: auto; cursor: pointer; }
.scrub .bar span { white-space: normal; overflow: visible; padding: 0; }
.scrub .bar span:first-child { padding-left: 0; font-weight: 500; }
.scrub .bar { padding-right: 36px; }
.touch .item, .touch .row:not(.head) { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- List view ---------- */
.list-section + .list-section { margin-top: 200px; }
.list-wrap { overflow-x: auto; }
.list { min-width: 720px; margin-top: 30px; }

.row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  height: 32.3px;
}
.row.head {
  height: auto;
  padding-bottom: 14px;
  border-bottom: 1px solid #000;
  font-family: "Areal Mono", ui-monospace, monospace;
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.row.divide { border-top: 1px solid var(--line); }
.row:not(.head), .row:not(.head) span:first-child { transition: none; }   /* instant, so a fast scroll registers every line */
.row.on { background: #000; color: #fff; position: relative; z-index: 3; /* on top of the big image */ }
.row.on span:first-child { padding-left: 14px; }
.add-new { display: flex; align-items: center; height: 32.3px; border-top: 1px solid var(--line); color: #8c8c8c; }
.add-new:hover { color: #000; }

/* ---------- Museum ---------- */
.controls { display: flex; justify-content: flex-end; gap: 28px; margin: 14px var(--gutter) 0; padding-right: 21px; font-size: 11px; }
.controls .active { text-decoration: underline; text-underline-offset: 2px; }
.museum h2 { margin-top: 6px; }
.museum .list-section + .list-section { margin-top: 160px; }
.row.link, .item.link { cursor: pointer; }
.more { margin-top: 18px; border: 1px solid var(--line); background: #fff; padding: 7px 14px; font: inherit; font-size: 11px; cursor: pointer; }
.more:hover { border-color: #000; }
.more + .more { margin-left: 8px; }
.load-error { margin-top: 40px; }

/* ---------- Board page ---------- */
.board { display: grid; grid-template-columns: 1fr 70px 1.45fr; min-height: calc(100vh - 90px); padding: 0 var(--gutter); }
.board-img { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.board-img img { max-height: min(950px, 78vh); max-width: 100%; }
.board-close { writing-mode: vertical-rl; align-self: center; justify-self: center; font-size: 11.5px; color: #555; }
.board-close:hover { color: #000; }
.board-nav { position: fixed; bottom: 14px; z-index: 5; font-size: 11.5px; color: #555; }
.board-nav:hover, .board-brand-link:hover { color: #000; }
.board-nav.prev { left: var(--gutter); }
.board-nav.next { right: var(--gutter); }
.board-brand-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.board-info { display: flex; flex-direction: column; padding: 52px 0 24px; }
.board-info h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 30px; }
.board-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; font-size: 15px; line-height: 1.35; }
.board-specs div { display: flex; flex-direction: column; }
.board-desc { font-size: 30px; line-height: 1.2; margin: 60px 0 0; max-width: 34em; }
.board-brand { margin-top: auto; padding-top: 60px; font-size: 15px; }
.board-more { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; align-items: flex-end; }
.board-more img { height: 110px; width: auto; display: block; }
.board-more.square img { height: 70px; }
.board-more a:hover img { opacity: 0.6; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .title { font-size: 15px; }
  .title .t-full { display: none; }
  .title .t-short { display: inline; }
  h2 { font-size: 28px; }
  .grid { --item-h: clamp(140px, 44vw, 240px); grid-template-columns: repeat(3, var(--cell)); row-gap: 56px; margin-top: 36px; }
  .grid.square { --item-h: clamp(90px, 27vw, 140px); --cell: var(--item-h); }
  .controls { padding-right: 14px; }
  .board { grid-template-columns: 1fr; }
  .board-close { writing-mode: horizontal-tb; justify-self: end; order: -1; font-size: 10.5px; padding-top: 14px; }
  .board-img { padding: 16px 0 0; }
  .board-img img { max-height: 62vh; }
  .board-info { padding-top: 28px; }
  .board-info h1 { font-size: 30px; margin-bottom: 18px; }
  .board-specs { grid-template-columns: 1fr; font-size: 15px; gap: 10px; }
  .board-desc { font-size: 19px; margin-top: 30px; }
  .board-brand { font-size: 15px; padding-top: 40px; }

  /* list: no sideways scroll, text wraps onto two lines */
  .list-section + .list-section { margin-top: 90px; }
  .list { min-width: 0; margin-top: 20px; }
  .row { display: flex; height: auto; min-height: 32px; padding: 8px 0; align-items: flex-start; line-height: 1.3; font-size: 10.5px; }
  .row.head { padding: 0 0 10px; align-items: flex-end; }
  .row span { flex: 1 1 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; padding-right: 10px; }
  .row span:first-child { flex-grow: 1.5; }
  .row span:last-child { padding-right: 0; }
}

/* ---------- Refine: a panel that pushes the page to the left ---------- */
:root { --rf-w: clamp(320px, 25vw, 480px); --rf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }
body { --rf-shift: 0px; transition: padding-right 0.42s var(--rf-ease); }
/* the page keeps a margin on the right for the Refine tab, so lists and the header stop before it */
body.has-refine { --rf-shift: 18px; padding-right: var(--rf-shift); }
body.has-refine.rf-open { --rf-shift: calc(var(--rf-w) + 28px); --rf-open-w: calc(var(--rf-w) + 28px); }

.refine-tab {
  position: fixed; right: 7px; top: 50%; transform: translateY(-50%); z-index: 22;
  writing-mode: vertical-rl; font: inherit; font-size: 11.5px; color: #555;
  background: none; border: 0; padding: 14px 3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: right 0.42s var(--rf-ease), color 0.2s ease;
}
.refine-tab:hover { color: #000; }
.rf-open .refine-tab { right: calc(var(--rf-w) + 9px); color: #000; }

.refine-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: var(--rf-w);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden; will-change: transform;
  transition: transform 0.42s var(--rf-ease), visibility 0s linear 0.42s;
}
.rf-open .refine-panel { transform: none; visibility: visible; transition: transform 0.42s var(--rf-ease); }

.rf-head { display: flex; justify-content: flex-end; padding: 18px 22px 0; }
.rf-actions button { font: inherit; font-size: 11.5px; background: none; border: 0; padding: 0 0 0 16px; color: #000; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: opacity 0.2s ease; }
.rf-actions button:disabled { opacity: 0.3; cursor: default; }
.rf-body { flex: 1; overflow-y: auto; padding: 4px 22px 28px; overscroll-behavior: contain; scroll-behavior: smooth; }
.rf-body { scrollbar-width: none; }
.rf-body::-webkit-scrollbar { display: none; }
.rf-group { padding: 22px 0 8px; }
.rf-group h3 {
  margin: 0 0 12px; font-family: "Areal Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 7.5px; letter-spacing: 0.02em; text-transform: uppercase;
}
.rf-search, .rf-range input {
  width: 100%; border: 1px solid var(--line); background: #fff; padding: 7px 9px; font: inherit; font-size: 11.5px;
  margin-bottom: 10px; border-radius: 0; transition: border-color 0.2s ease;
}
.rf-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-range input { margin-bottom: 0; }
.rf-search:focus, .rf-range input:focus { outline: none; border-color: #000; }

.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.rf-chip {
  display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--line); background: #fff; color: #000;
  font: inherit; font-size: 11.5px; padding: 4px 9px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rf-chips + .rf-chips { margin-top: 6px; }
.rf-chip[hidden] { display: none; }
.rf-chip em { font-style: normal; color: #8c8c8c; transition: color 0.18s ease; }
.rf-chip:hover { border-color: #000; }
.rf-chip.on { background: #000; color: #fff; border-color: #000; }
.rf-chip.on em { color: #bbb; }

.rf-foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); }
.rf-show { width: 100%; border: 0; background: #000; color: #fff; padding: 13px; font: inherit; font-size: 11.5px; cursor: pointer; transition: opacity 0.2s ease; }
.rf-show:hover { opacity: 0.85; }

.linklike { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; color: #000; }
.empty { margin: 60px var(--gutter) 0; color: #555; }

/* results fade while they refresh */
#app { transition: opacity 0.25s ease; }
#app.loading { opacity: 0.4; }

/* the big hover photo stays centred in the part of the page that is left */
.preview { left: calc(50% - var(--rf-shift) / 2); transition: left 0.42s var(--rf-ease); }

@media (max-width: 760px) {
  :root { --rf-w: min(88vw, 400px); }
  .refine-tab { top: 64%; font-size: 10.5px; }
  /* small screens: the page slides left as the panel slides in */
  body.has-refine.rf-open { --rf-shift: 0px; --rf-open-w: 0px; overflow: hidden; }
  .topbar, .controls, #app { transition: transform 0.42s var(--rf-ease), opacity 0.25s ease; }
  .rf-open .topbar, .rf-open .controls, .rf-open #app { transform: translateX(calc(-1 * var(--rf-w))); }
  .rf-search, .rf-range input { font-size: 16px; }
}

/* the sort links end exactly where the Refine tab's text ends */
body.has-refine { --tab-edge: 10px; }
body.has-refine.rf-open { --tab-edge: calc(var(--rf-w) + 12px); }
.has-refine .controls { padding-right: 0; margin-right: calc(var(--tab-edge) - var(--rf-shift)); transition: margin-right 0.42s var(--rf-ease); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: #000; color: #fff; height: 418px; overflow: hidden; font-size: 11.5px; line-height: 16px; }
.site-footer a { color: inherit; text-decoration: none; }
.fb-logo { position: absolute; left: 14px; top: 20px; height: 378px; width: auto; display: block; }
.fb-credit { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.fb-credit a { text-decoration: underline; text-underline-offset: 2px; }
.fb-links { position: absolute; top: 24px; right: var(--gutter); display: flex; gap: 44px; text-align: right; }
.fb-links div { display: flex; flex-direction: column; }
.fb-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.fb-soon { cursor: default; }
.fb-boards { position: absolute; left: 844px; bottom: 58px; display: flex; gap: 40px; }
.fb-boards span { display: block; width: 104px; transform: rotate(var(--r, 0deg)); }
.fb-board { width: 104px; height: auto; overflow: visible; display: block; }
.fb-deck { fill: none; stroke: #6e6ef5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fb-board circle { fill: #000; stroke: #fff; stroke-width: 3.2; }
.fb-title { position: absolute; right: var(--gutter); bottom: 14px; margin: 0; font-size: 37px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
@media (max-width: 1100px) { .fb-boards { display: none; } .fb-title { font-size: 32px; } .fb-logo { height: 300px; } }
@media (max-width: 760px) {
  .site-footer { height: auto; padding: 22px var(--gutter) 18px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 14px; }
  .fb-logo, .fb-credit, .fb-links, .fb-boards { position: static; transform: none; }
  .fb-title { display: none; }
  .fb-logo { grid-column: 1; grid-row: 1 / 3; width: 100%; height: auto; max-height: 100%; align-self: center; margin-left: -6px; }
  .fb-links { grid-column: 2; grid-row: 1; display: block; text-align: right; }
  .fb-links div { display: contents; }
  .fb-links a { display: block; }
  .fb-boards { display: flex; grid-column: 2; grid-row: 2; align-self: end; justify-self: end; gap: 6px; }
  .fb-boards span { width: 64px; }
  .fb-boards span:nth-child(n+3) { display: none; }
  .fb-board { width: 64px; }
  .fb-credit { grid-column: 1 / -1; grid-row: 3; text-align: right; white-space: nowrap; justify-self: end; font-size: min(11.5px, 2.5vw); }
}

/* black scrollbar */
html { scrollbar-color: #000 #fff; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; background: #fff; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #000; border-radius: 0; border: 2px solid #fff; }
::-webkit-scrollbar-corner { background: #fff; }
.rf-body { scrollbar-color: #000 transparent; }

/* the footer runs the full width of the screen even though the museum pages keep a margin for the Refine tab */
.has-refine .site-footer { margin-right: calc(-1 * var(--rf-shift, 0px)); }
.has-refine.rf-open .site-footer { margin-right: 0; }

/* phones, list view: the photo of the tapped board sits at the very top, right under the header, as large as fits */
@media (max-width: 760px) {
  .list-view .preview {
    top: calc(var(--bar-h) + 10px); transform: translateX(-50%);
    max-height: calc(100vh - var(--bar-h) - 24px); max-height: calc(100dvh - var(--bar-h) - 24px);
  }
  .museum.list-view main#app { padding-top: 14px; }
}
.submit-row { margin-top: 18px; border-top: 1px solid var(--line); }
.grid-section .submit-row { margin-top: 60px; }
.list .submit-row { margin-top: 0; }   /* list view: the line and + Submit sit right under the last entry, the buttons come after */

/* footer sits at the bottom of the window even on short pages */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
body > .site-footer { margin-top: auto; }
body > main.auth { width: 100%; box-sizing: border-box; }

/* phones, collection image view: the info bar shows all of the text, wrapping like the list rows */
@media (max-width: 760px) {
  .bar { display: flex; height: auto; min-height: 32px; padding: 8px 0; align-items: flex-start; font-size: 10.5px; line-height: 1.3; }
  .bar span { flex: 1 1 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; padding-right: 10px; }
  .bar span:first-child { flex-grow: 1.5; }
  .bar span:last-child { padding-right: 10px; }
}

/* owner's own page: slug and links, same look as the other collection pages */
.owner-foot { margin: 60px var(--gutter) 50px; }
.owner-slug { font-size: 11.5px; color: #777; margin: 0 0 18px; }
.owner-links { font-size: 12px; margin: 0; }
.owner-links a, .owner-links button { color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }