/* syvrasveldash.com — record-shop browsing bins: divider cards, LP sleeves, vinyl, kraft card, one orange */
:root {
  --ink: #16100C;
  --ink2: #443428;
  --kraft: #BE9E78;
  --card: #EADCC5;
  --paper: #F6F1E7;
  --ply: #D3BA93;
  --plyEdge: #A47E59;
  --orange: #EC6100;
  --orangeD: #A93800;
  --stamp: #284E7D;
  --onInk: #EADCC5;
  --onInk2: #B4A289;
  --rail: 168px;
  --pad: 72px;
  --sec: 112px;
  --display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  --text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --tex-kraft: url(../img/ground-kraft.webp);
  --tex-card: url(../img/ground-card.webp);
  --shadow: 0 10px 24px rgb(22 16 12 / .2);
}
@media (max-width: 899px) { :root { --pad: 16px; --sec: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kraft) var(--tex-kraft) repeat top left / 1200px auto; color: var(--ink); font: 400 16px/1.6 var(--text); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--onInk); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.only-m { display: none; }
@media (max-width: 899px) { .only-m { display: inline; } }

/* ---------- type ---------- */
.h { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
.h1 { font-size: 96px; line-height: .88; }
.h2 { font-size: 72px; }
.h2--m { font-size: 56px; }
.h2--s { font-size: 40px; }
.h3 { font-size: 40px; }
.mono { font: 400 13px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.mono--o { color: var(--orangeD); font-size: 12px; }
.p { font-size: 18px; line-height: 1.6; color: var(--ink2); }
.p--ink { color: var(--ink); }
.p + .p { margin-top: 16px; }
.small { font-size: 16px; line-height: 1.55; color: var(--ink2); }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink); }
.text-link { justify-self: start; align-self: start; font: 700 15px/1.4 var(--text); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
a.text-link:hover { color: var(--orangeD); }
@media (max-width: 899px) {
  .h1 { font-size: 60px; }
  .h2, .h2--m { font-size: 44px; }
  .h2--s { font-size: 30px; }
  .h3 { font-size: 30px; }
  .mono { font-size: 12px; }
  .p, .lead { font-size: 16px; }
  .small { font-size: 14px; }
}

/* ---------- world objects ---------- */
/* a record: black disc with grooves, orange centre label, spindle hole */
.disc { --d: 300px; position: absolute; width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink);
  background-image: radial-gradient(circle, transparent 27.6%, rgb(234 220 197 / .09) 27.8% 28.2%, transparent 28.4% 33.6%, rgb(234 220 197 / .09) 33.8% 34.2%, transparent 34.4% 39.6%, rgb(234 220 197 / .09) 39.8% 40.2%, transparent 40.4% 45.6%, rgb(234 220 197 / .09) 45.8% 46.2%, transparent 46.4%);
  box-shadow: 0 calc(var(--d) * .03) calc(var(--d) * .06) rgb(22 16 12 / .35); pointer-events: none; }
.disc-label { position: absolute; inset: 32%; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.disc-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(4px, calc(var(--d) * .028)); height: max(4px, calc(var(--d) * .028)); border-radius: 50%; background: var(--kraft); transform: translate(-50%, -50%); }
.disc-t { font: 700 max(12px, calc(var(--d) / 34))/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transform: translateY(-70%); }
.disc--blue .disc-label { background: var(--stamp); }

/* a sleeve: the cover as a square LP sleeve, paper edge, ring wear, contact shadow */
.sleeve { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid rgb(246 241 231 / .55); box-shadow: 0 11px 26px rgb(22 16 12 / .32); background: var(--ink); }
.sleeve img { width: 100%; height: 100%; object-fit: cover; }
.sleeve::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px solid rgb(246 241 231 / .18); pointer-events: none; }
.sleeve--thumb { width: 44px; flex: none; border-width: 1px; box-shadow: none; }
.sleeve--thumb::after { display: none; }

/* paper inner sleeve with the round window */
.inner-sleeve { --s: 460px; position: absolute; width: var(--s); height: var(--s); background: var(--paper); box-shadow: 0 8px 24px rgb(22 16 12 / .18); overflow: hidden; pointer-events: none; }
.inner-window { position: absolute; inset: 33%; border-radius: 50%; background: var(--kraft) var(--tex-kraft) center / 600px auto; }
.inner-sleeve .stamp { position: absolute; left: 10%; top: 12%; font-size: calc(var(--s) / 18); transform: rotate(8deg); }

.stamp { display: inline-block; padding: 6px 12px; border: 2px solid var(--stamp); border-radius: 3px; font: 700 14px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); opacity: .85; white-space: nowrap; }
.sticker { position: absolute; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; background: var(--orange); box-shadow: 0 3px 6px rgb(22 16 12 / .2); font-family: var(--mono); color: var(--ink); text-transform: uppercase; text-align: center; line-height: 1.2; }

/* the primary action: a black catalogue strip with mono caps */
.strip { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 26px; background: var(--ink); color: var(--onInk); border: 2px solid var(--ink); border-radius: 2px; font: 700 14px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s; }
.strip:hover { background: var(--orangeD); border-color: var(--orangeD); color: var(--paper); }
.strip--line { background: transparent; color: var(--ink); }
.strip--line:hover { background: var(--ink); border-color: var(--ink); color: var(--onInk); }
@media (max-width: 899px) { .strip { padding: 14px 18px; font-size: 13px; } }

/* ---------- shell: side rail of divider cards + content column ---------- */
.shell { display: flex; min-height: 100vh; }
.rail { flex: none; width: var(--rail); background: var(--ink); position: relative; z-index: 20; }
.rail-in { position: sticky; top: 0; height: 100vh; padding: 32px 16px; overflow: hidden; }
.logo { display: flex; align-items: center; gap: 10px; padding-bottom: 28px; text-decoration: none; color: var(--onInk); }
.disc--logo { --d: 36px; position: relative; box-shadow: none; flex: none; }
.logo-d { font-size: 30px; }
.logo-m { display: none; }
.nav { display: grid; gap: 12px; }
.nav-card { position: relative; display: block; width: 136px; height: 64px; padding: 22px 14px 10px; border-radius: 3px; background: var(--card) var(--tex-card) repeat 0 0 / 600px auto; color: var(--ink); text-decoration: none; font-size: 28px; transition: transform .2s; }
.nav-card .h { display: block; }
.nav-tab { position: absolute; left: calc(14px + var(--i) * 34px); top: -12px; width: 50px; height: 16px; border-radius: 6px 6px 0 0; background: inherit; }
.nav-card.is-on { background: var(--orange); }
.nav-card:not(.is-on):hover { transform: translateX(6px); }
.rail-word { position: absolute; left: 30px; bottom: 36px; font-size: 88px; line-height: .9; color: var(--onInk); opacity: .3; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-mail { position: absolute; left: 116px; bottom: 36px; font-size: 12px; letter-spacing: .02em; color: var(--onInk2); text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.rail-mail:hover { color: var(--orange); }
@media (max-height: 640px) { .rail-word { position: absolute; left: 30px; bottom: 36px; font-size: 88px; line-height: .9; color: var(--onInk); opacity: .3; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); } }
.col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
@media (max-width: 899px) {
  .shell { display: block; }
  .rail { width: auto; }
  .rail-in { position: static; height: auto; padding: 14px 16px 0; overflow: visible; }
  .logo { gap: 8px; padding-bottom: 14px; }
  .disc--logo { --d: 28px; }
  .logo-d { display: none; }
  .logo-m { display: inline; font-size: 26px; }
  .nav { display: flex; gap: 6px; align-items: flex-end; }
  .nav li { flex: 1 1 0; }
  .nav-card { width: auto; height: 38px; padding: 9px 10px 0; border-radius: 8px 8px 0 0; font-size: 22px; }
  .nav-tab, .rail-word, .rail-mail { display: none; }
  .nav-card:not(.is-on):hover { transform: none; }
}

/* ---------- sections and grounds ---------- */
.sec { position: relative; padding: var(--sec) 0; overflow: clip; }
.sec--kraft { background: var(--kraft) var(--tex-kraft) repeat 0 0 / 1200px auto; }
.sec--card { background: var(--card) var(--tex-card) repeat 0 0 / 1200px auto; }
.sec--ink { background: var(--ink); color: var(--onInk); }
.sec--ink .p { color: var(--onInk2); }
.sec--orange { background: var(--orange); }
.in { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.head { display: grid; gap: 14px; max-width: 760px; }
.split { display: flex; gap: 72px; align-items: flex-start; }
.split-r { flex: 0 1 560px; display: grid; gap: 20px; }
@media (max-width: 899px) { .split { flex-direction: column; gap: 24px; } .split-r { flex-basis: auto; } }

/* ---------- hero: divider card + the crate ---------- */
.hero { position: relative; height: 880px; overflow: clip; max-width: 1200px; }
.divider { position: relative; }
.divider-tab { position: absolute; left: 28px; top: 0; height: 40px; padding: 8px 14px 0; border-radius: 10px 10px 0 0; background: var(--card) var(--tex-card) repeat 0 0 / 600px auto; font-size: 22px; }
.divider-face { position: relative; margin-top: 34px; padding: 48px 40px; border-radius: 3px; background: var(--card) var(--tex-card) repeat 0 0 / 600px auto; box-shadow: 0 6px 16px rgb(22 16 12 / .18); display: grid; gap: 28px; justify-items: start; }
.divider--hero { position: absolute; z-index: 3; left: 52px; top: 150px; width: 520px; transform: rotate(-1.5deg); }
.divider--hero .divider-face { min-height: 540px; }
.h1 .o { color: var(--orangeD); display: block; }
.h1 span:first-child { display: block; }
.crate-wrap { position: absolute; right: 0; top: 30px; width: 660px; height: 850px; }
.crate { position: relative; width: 660px; height: 850px; overflow: hidden; }
.crate-back, .crate-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crate-front { z-index: 3; }
.crate-pull { position: absolute; inset: 0; z-index: 1; }
.disc--crate { --d: 330px; left: 187px; top: -11px; }
.crate-sleeve { position: absolute; z-index: 2; width: 374px; left: 160px; top: 367px; transform: rotate(var(--r, 0deg)); transition: transform .2s; }
.crate-sleeve .sleeve { box-shadow: 0 13px 30px rgb(22 16 12 / .32); }
.crate-sleeve--pulled { left: 169px; top: 154px; --r: 2deg; }
.crate > .crate-sleeve:nth-of-type(1) { left: 158px; top: 367px; --r: 1.5deg; }
.crate > .crate-sleeve:nth-of-type(2) { left: 171px; top: 418px; --r: -1deg; }
.crate > .crate-sleeve:nth-of-type(3) { left: 162px; top: 468px; --r: .8deg; }
.crate > .crate-sleeve:nth-of-type(4) { left: 173px; top: 519px; --r: -1.6deg; }
.crate > .crate-sleeve:nth-of-type(5) { left: 161px; top: 569px; --r: 1deg; }
.crate > .crate-sleeve { z-index: 2; }
.crate-sleeve:hover, .crate-sleeve:focus-visible { transform: rotate(var(--r)) translateY(-14px); z-index: 2; }
.crate-board { position: absolute; z-index: 4; left: 55px; top: 616px; width: 594px; height: 440px; background: var(--ply); box-shadow: 0 -9px 22px rgb(22 16 12 / .35); }
.crate-board::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: rgb(246 241 231 / .55); }
.crate-board::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-top: 1.5px solid rgb(164 126 89 / .7); border-bottom: 1.5px solid rgb(164 126 89 / .7); }
.crate-handle { position: absolute; left: 203px; top: 66px; width: 187px; height: 48px; border-radius: 24px; background: rgb(22 16 12 / .88); }
.crate-stamp { position: absolute; left: 44px; top: 154px; font-size: 17px; transform: rotate(4deg); }
.crate-sticker { left: 429px; top: 121px; width: 130px; height: 130px; transform: rotate(-10deg); }
.crate-sticker b { font-size: 19px; letter-spacing: .02em; }
.crate-sticker small { font-size: 12px; font-weight: 700; }
/* the pulled sleeve rises out of the crate in three 80 ms steps */
.js .crate-pull { animation: rise 240ms steps(3, end) 250ms both; }
@keyframes rise { from { transform: translateY(120px); } }
@media (max-width: 1179px) {
  .hero { height: auto; padding: 28px var(--pad) 0; display: grid; justify-items: center; gap: 8px; }
  .divider--hero { position: relative; left: auto; top: auto; width: min(520px, 100%); justify-self: start; }
  .divider--hero .divider-face { min-height: 0; }
  .crate-wrap { position: relative; right: auto; top: auto; width: 462px; height: 595px; }
  .crate { transform: scale(.7); transform-origin: 0 0; }
}
@media (max-width: 899px) {
  .hero { padding: 28px 16px 0; gap: 2px; }
  .divider--hero { transform: none; width: 100%; }
  .divider-tab { left: 16px; height: 34px; padding: 7px 12px 0; font-size: 18px; }
  .divider-face { margin-top: 28px; padding: 24px 20px; gap: 18px; min-height: 430px; }
  .divider--hero .divider-face { min-height: 430px; }
  .divider-face .lead { font-size: 15px; }
  .crate-wrap { width: 100%; max-width: 360px; height: 400px; overflow: hidden; }
  .crate { position: absolute; left: calc(50% - 160px); top: 0; transform: scale(.4545); transform-origin: 0 0; }
}

/* ---------- G: the bins ---------- */
.sec--g .disc--g { --d: 620px; right: -300px; top: -240px; box-shadow: none; }
.bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); gap: 72px 48px; margin-top: 48px; }
.bin { position: relative; display: grid; gap: 14px; align-content: start; }
.bin-pic { position: relative; aspect-ratio: 320 / 350; }
.bin-tab { position: absolute; z-index: 3; left: calc(16px + var(--t) * 60px); top: 0; padding: 6px 12px 10px; border-radius: 8px 8px 0 0; background: var(--kraft) var(--tex-kraft) repeat 0 0 / 600px auto; font-size: 20px; }
.bin-pic .sleeve { position: absolute; z-index: 2; left: 0; right: 0; top: 30px; }
.disc--bin { width: 88%; height: auto; aspect-ratio: 1; left: 6%; top: 50px; z-index: 1; box-shadow: none; }
.bin-text { display: grid; gap: 6px; }
.bin .h3 a { text-decoration: none; }
.bin .h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.bin-link { margin-top: 2px; }
/* tile hover: the sleeve rises out of the bin in three 80 ms steps, tilts 2°, the record shows above it, the link turns orange */
.bin-pic .sleeve, .disc--bin, .sim .sleeve { transition: transform 240ms steps(3, end); }
.bin:hover .bin-pic .sleeve, .bin:focus-within .bin-pic .sleeve { transform: translateY(-36px) rotate(2deg); }
.bin:hover .disc--bin, .bin:focus-within .disc--bin { transform: translateY(-64px); }
.bin:hover .bin-link, .bin:focus-within .bin-link { color: var(--orangeD); }
@media (max-width: 899px) {
  .sec--g .disc--g { --d: 300px; right: -150px; top: -250px; }
  .bins { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .bin { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .bin-pic { aspect-ratio: 1; }
  .bin-pic .sleeve { top: 0; }
  .bin-tab { display: none; }
  .disc--bin { top: 8px; }
  .bin:hover .bin-pic .sleeve, .bin:focus-within .bin-pic .sleeve { transform: translateY(-14px) rotate(2deg); }
  .bin:hover .disc--bin, .bin:focus-within .disc--bin { transform: translateY(-26px); }
  .bin .h3 { font-size: 30px; }
}

/* ---------- Y: the new-arrivals wall ---------- */
.wall { position: relative; height: 860px; margin-top: 48px; }
.rail-line { position: absolute; left: calc(-1 * var(--pad)); width: 100vw; top: 18px; height: 3px; background: rgb(180 162 137 / .5); }
.rail-line--2 { top: 448px; }
.wall-item { position: absolute; width: var(--s); left: var(--x); top: var(--y); }
.wall-item .sleeve { transform: rotate(var(--r)); }
.clip { position: absolute; left: calc(50% - 14px); top: -16px; width: 28px; height: 28px; border-radius: 2px; background: var(--orange); }
.cap { margin-top: 24px; font-size: 12px; letter-spacing: .01em; text-transform: none; color: var(--onInk2); }
.wall-item:nth-child(3) { --s: 300px; --x: 0px; --y: 40px; --r: 3deg; }
.wall-item:nth-child(4) { --s: 250px; --x: 410px; --y: 64px; --r: -2deg; }
.wall-item:nth-child(5) { --s: 290px; --x: 770px; --y: 40px; --r: 1.5deg; }
.wall-item:nth-child(6) { --s: 270px; --x: 150px; --y: 470px; --r: -2.5deg; }
.wall-item:nth-child(7) { --s: 300px; --x: 530px; --y: 494px; --r: 2deg; }
.wall-item:nth-child(8) { --s: 250px; --x: 910px; --y: 470px; --r: -1.5deg; }
@media (max-width: 1279px) and (min-width: 900px) { .wall { transform: scale(.78); transform-origin: 0 0; height: 680px; } }
@media (max-width: 899px) {
  .wall { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 18px 14px; margin-top: 32px; }
  .rail-line, .clip { display: none; }
  .wall-item { position: static; width: auto; }
  .wall-item:nth-child(odd) { --r: 1.5deg; }
  .wall-item:nth-child(even) { --r: -1.5deg; }
  .cap { margin-top: 8px; }
}

/* ---------- Q: shelf cards ---------- */
.inner--q { --s: 460px; left: -140px; top: 520px; transform: rotate(9deg); }
.h2--q { max-width: 760px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 312px)); gap: 44px 40px; align-items: start; margin-top: 48px; }
.shelf-card { background: var(--paper); box-shadow: 0 8px 18px rgb(22 16 12 / .22); padding-bottom: 24px; display: grid; gap: 16px; }
.shelf-card:nth-child(1) { transform: rotate(1.5deg); }
.shelf-card:nth-child(2) { transform: rotate(-1deg); }
.shelf-card:nth-child(3) { transform: rotate(.6deg); }
.shelf-card:nth-child(4) { transform: rotate(-1.4deg); }
.shelf-card:nth-child(5) { transform: rotate(1deg); }
.shelf-card:nth-child(6) { transform: rotate(-.6deg); }
.shelf-band { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--orange); font-size: 26px; }
.shelf-card blockquote, .shelf-card .sign { padding: 0 22px; }
.shelf-card blockquote p { font-size: 17px; font-weight: 500; line-height: 1.5; }
.sign { font-size: 12px; letter-spacing: .02em; text-transform: none; }
@media (max-width: 899px) {
  .inner--q { --s: 260px; left: -150px; top: 900px; }
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }
  .shelf-card:nth-child(n) { transform: none; }
  .shelf-card blockquote p { font-size: 16px; }
}

/* ---------- A ---------- */
.disc--a { --d: 420px; right: -270px; top: 150px; box-shadow: none; }
.h2--a { flex: 0 1 460px; font-size: 64px; }
.sec--a .split-r { flex-basis: 460px; }
@media (max-width: 899px) { .disc--a { --d: 220px; right: -130px; top: -140px; } .h2--a { font-size: 42px; flex-basis: auto; } }

/* ---------- X: the ledger ---------- */
.ledger { width: 100%; margin-top: 48px; border-collapse: collapse; background: var(--paper); box-shadow: var(--shadow); font-size: 14px; line-height: 1.4; }
.ledger thead th { background: var(--ink); color: var(--onInk); font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: 14px 12px; }
.ledger thead th:first-child, .ledger tbody th { padding-left: 24px; }
.ledger tbody th, .ledger td { text-align: left; padding: 16px 12px; border-bottom: 1px solid rgb(22 16 12 / .12); vertical-align: middle; }
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger tbody th a { display: flex; align-items: center; gap: 14px; text-decoration: none; font-size: 26px; white-space: nowrap; }
.ledger tbody th a:hover { color: var(--orangeD); }
.ledger tbody th .sleeve--thumb { width: 52px; }
.ledger .gen { color: var(--orangeD); font-weight: 700; }
@media (max-width: 1099px) {
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
  .ledger { background: none; box-shadow: none; margin-top: 32px; }
  .ledger thead { display: none; }
  .ledger tbody { display: grid; gap: 14px; }
  .ledger tbody tr { background: var(--paper); padding: 16px; box-shadow: 0 6px 14px rgb(22 16 12 / .15); }
  .ledger tbody th, .ledger td, .ledger tbody tr:last-child > * { padding: 4px 0; border: 0; }
  .ledger tbody th { padding: 0 0 8px; }
  .ledger tbody th .sleeve--thumb { width: 44px; }
  .ledger td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 13px; }
  .ledger td::before { content: attr(data-l); font: 400 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
  .ledger .gen { font-weight: 400; color: var(--ink); }
}

/* ---------- K: write in ---------- */
.disc--k { --d: 480px; right: -290px; top: -230px; }
.split--k { gap: 80px; }
.k-l { flex: 0 1 560px; display: grid; gap: 20px; justify-items: start; }
.k-mail { font-size: 48px; text-transform: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.k-mail:hover { color: var(--paper); }
.k-r { flex: 0 1 320px; padding-top: 8px; display: grid; gap: 12px; justify-items: start; }
.k-r .mono { color: var(--ink); font-size: 12px; }
.dots { display: grid; gap: 12px; }
.dots li { position: relative; padding-left: 22px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.dots li::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.sec--orange .text-link:hover { color: var(--paper); }
@media (max-width: 899px) { .disc--k { --d: 240px; right: -130px; top: -170px; } .split--k { gap: 24px; } .k-mail { font-size: 30px; } .k-l, .k-r { flex-basis: auto; } }

/* ---------- F: questions over the bins ---------- */
.split--f .h2--f { flex: 0 0 300px; }
.qas { flex: 0 1 684px; display: grid; gap: 10px; }
.qa { border-radius: 3px; background: var(--kraft) var(--tex-kraft) repeat 0 0 / 600px auto; }
.qa[open] { background: var(--paper); box-shadow: 0 6px 14px rgb(22 16 12 / .15); }
.qa summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .h { flex: 1; font-size: 30px; text-transform: none; line-height: 1; }
.qa > p { padding: 0 22px 18px; margin-top: -4px; font-size: 16px; }
.plus { position: relative; flex: none; width: 28px; height: 28px; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--ink); left: 4px; top: 12.5px; width: 20px; height: 3px; }
.plus::after { transform: rotate(90deg); transition: transform .2s; }
.qa[open] .plus::after { transform: rotate(0deg); }
@media (max-width: 899px) { .split--f .h2--f { flex-basis: auto; } .qas { flex-basis: auto; width: 100%; } .qa summary .h { font-size: 24px; } }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--onInk); padding: 28px var(--pad); display: grid; gap: 12px; }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.f-brand { font-size: 30px; }
.f-line { font-size: 14px; color: var(--onInk2); }
.f-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; font-weight: 600; }
.f-links a { text-decoration: none; }
.f-links a:hover, .linkish:hover { color: var(--orange); }
.linkish { background: none; border: 0; padding: 0; font-weight: 600; font-size: 14px; color: var(--onInk); }
.f-links .f-mail { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.f-social { display: flex; align-items: center; gap: 14px; color: var(--onInk2); }
.f-social a { display: inline-flex; padding: 3px; line-height: 0; }
.f-fine { font-size: 12px; letter-spacing: .01em; text-transform: none; color: var(--onInk2); }
@media (max-width: 899px) { .footer { padding: 24px 16px 28px; gap: 14px; } .f-row { flex-direction: column; align-items: flex-start; } .f-links { gap: 8px 14px; } }

/* ---------- inner-page heads ---------- */
.sec--top { padding-top: 48px; }
.sec--top .in { display: grid; gap: 24px; justify-items: start; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.crumbs { font-size: 12px; letter-spacing: .03em; }
.crumbs li { display: inline-flex; gap: 12px; }
.crumbs li + li::before { content: "›"; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--orangeD); text-decoration: underline; }
.h1--page { max-width: 820px; }
.lead--page { max-width: 680px; }
.genre-key { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.key-tab { display: block; padding: 8px 14px; border-radius: 6px 6px 0 0; background: var(--card) var(--tex-card) repeat 0 0 / 600px auto; font-size: 24px; text-decoration: none; }
.key-tab:hover { background: var(--orange); }
.disc--top { --d: 520px; right: -260px; top: -200px; box-shadow: none; }
@media (max-width: 899px) { .sec--top { padding-top: 24px; } .disc--top { --d: 220px; right: -90px; top: -170px; } .key-tab { font-size: 20px; } }

/* ---------- games: one record per screen ---------- */
.record { min-height: 820px; display: flex; align-items: center; padding: 96px 0; }
.record-row { display: flex; align-items: center; gap: 72px; }
.genre-tab { position: absolute; z-index: 2; top: 0; left: max(var(--pad), calc((100% - 1200px) / 2 + var(--pad))); padding: 10px 18px 12px; background: var(--ink); color: var(--onInk); border-radius: 0 0 8px 8px; max-width: 396px; scroll-margin-top: 16px; }
.genre-tab .h { font-size: 28px; }
.genre-tab p { font-size: 13px; line-height: 1.45; color: var(--onInk2); margin-top: 2px; }
.record-art { position: relative; flex: 0 0 560px; height: 560px; }
.disc--rec { --d: 480px; left: 140px; top: 40px; transform: rotate(-10deg); }
.record-art .sleeve { position: absolute; left: 0; top: 20px; width: 520px; transform: rotate(var(--r)); }
.back { flex: 0 1 420px; background: var(--paper); padding: 32px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.back-title { font-size: 56px; }
.back-title a { text-decoration: none; }
.back-title a:hover { color: var(--orangeD); }
.facts { display: grid; }
.facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid rgb(22 16 12 / .12); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--orangeD); font-size: 12px; }
.facts dd { font-size: 15px; font-weight: 600; line-height: 1.4; }
@media (max-width: 1179px) and (min-width: 900px) {
  .record-art { flex-basis: 400px; height: 420px; }
  .disc--rec { --d: 340px; left: 90px; top: 30px; }
  .record-art .sleeve { width: 370px; }
  .record-row { gap: 40px; }
}
@media (max-width: 899px) {
  .record { min-height: 0; padding: 72px 0 56px; }
  .record-row { flex-direction: column; align-items: stretch; gap: 28px; }
  .genre-tab { left: 16px; right: 16px; max-width: none; }
  .genre-tab .h { font-size: 22px; }
  .genre-tab p { display: none; }
  .record-art { flex: none; width: 100%; max-width: 330px; height: 340px; }
  .disc--rec { --d: 260px; left: 70px; top: 20px; }
  .record-art .sleeve { width: 300px; top: 10px; }
  .back { padding: 20px 18px; }
  .back-title { font-size: 40px; }
  .facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .facts dd { font-size: 14px; }
}

/* ---------- game page ---------- */
.sec--open { padding: 48px 0 var(--sec); }
.sec--open .in { display: grid; gap: 64px; }
.spread { display: flex; align-items: center; gap: 64px; }
.spread-art { position: relative; flex: 0 0 520px; height: 570px; }
.disc--open { --d: 380px; left: 34px; top: 0; transform: rotate(-15deg); }
.sleeve--open { position: absolute; left: 0; top: 110px; width: 450px; transform: rotate(3deg); }
.spread-text { position: relative; z-index: 2; flex: 1 1 auto; display: grid; gap: 22px; justify-items: start; }
.genre-chip { padding: 8px 16px; border-radius: 6px; background: var(--orange); font-size: 24px; text-decoration: none; }
.summary { font-size: 22px; font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 680px; }
.meta { font-size: 12px; letter-spacing: .02em; text-transform: none; }
.sec--facts { padding: 72px 0; }
.sec--facts .in { display: grid; gap: 40px; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; background: var(--paper); padding: 8px 28px; box-shadow: 0 8px 20px rgb(22 16 12 / .18); }
.facts--2 > div { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
.facts--2 > div:nth-last-child(2) { border-bottom: 0; }
.facts--2 dd { font-size: 16px; }
.sec--article .in { display: grid; gap: 56px; }
.inner--g { --s: 520px; right: -240px; top: 120px; transform: rotate(-8deg); }
.blk { display: grid; gap: 18px; max-width: 680px; }
.pull { display: flex; align-items: center; gap: 28px; padding: 24px 0; }
.disc--pull { --d: 150px; position: relative; flex: none; box-shadow: none; }
.pull .h { font-size: 48px; line-height: 1; text-transform: none; color: var(--orangeD); }
.tracklist { display: grid; gap: 10px; }
.tracklist li { display: flex; align-items: center; gap: 16px; font-size: 16px; }
kbd { flex: none; padding: 8px 12px; background: var(--paper); border: 1px solid rgb(22 16 12 / .3); border-radius: 6px; box-shadow: 0 3px 0 rgb(22 16 12 / .25); font: 700 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.odots { display: grid; gap: 18px; }
.odots li { position: relative; padding-left: 28px; font-size: 18px; line-height: 1.6; }
.odots li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.card-paper, .card-dash { padding: 28px; display: grid; gap: 14px; }
.card-paper { background: var(--paper); box-shadow: 0 6px 14px rgb(22 16 12 / .15); }
.card-dash { border: 1.5px dashed rgb(22 16 12 / .4); }
.card-paper .p, .card-dash .p { font-size: 16px; }
.card-dash .p + .p { margin-top: 0; }
.gq { padding: 14px 0; border-bottom: 1px solid rgb(22 16 12 / .15); display: grid; gap: 6px; }
.gq h3 { font-size: 17px; font-weight: 700; }
.gq .p { font-size: 16px; }
.split--end { gap: 64px; align-items: flex-start; }
.sims { flex: 0 1 560px; display: grid; gap: 20px; }
.sim-row { display: flex; gap: 24px; flex-wrap: wrap; }
.sim { width: 250px; display: grid; gap: 8px; align-content: start; }
.sim a { display: grid; gap: 8px; text-decoration: none; }
.sim .sleeve { width: 180px; transform: rotate(2deg); }
.sim a:hover .sleeve, .sim a:focus-visible .sleeve { transform: translateY(-12px) rotate(2deg); }
.sim .h { font-size: 26px; margin-top: 6px; }
.sim a:hover .h { color: var(--orangeD); }
.where { flex: 0 1 400px; padding: 24px; border: 1px solid rgb(22 16 12 / .25); border-radius: 3px; display: grid; gap: 12px; }
.where-t { font-size: 30px; text-transform: none; line-height: 1; }
.where .small { font-size: 15px; }
.mono--l { font-size: 12px; text-transform: none; }
@media (max-width: 1179px) and (min-width: 900px) {
  .spread-art { flex-basis: 400px; height: 460px; }
  .disc--open { --d: 300px; }
  .sleeve--open { width: 350px; top: 90px; }
  .spread { gap: 40px; }
}
@media (max-width: 899px) {
  .sec--open { padding-top: 24px; }
  .sec--open .in { gap: 24px; }
  .spread { flex-direction: column; align-items: stretch; gap: 28px; }
  .spread-art { flex: none; width: 100%; max-width: 330px; height: 340px; }
  .disc--open { --d: 220px; left: 50px; }
  .sleeve--open { width: 260px; top: 70px; left: 14px; }
  .h1--game { font-size: 60px; }
  .summary { font-size: 18px; }
  .genre-chip { font-size: 22px; }
  .sec--facts { padding: 48px 0; }
  .sec--facts .in { gap: 24px; }
  .facts--2 { grid-template-columns: minmax(0, 1fr); padding: 8px 16px; }
  .facts--2 > div { grid-template-columns: 100px minmax(0, 1fr); }
  .facts--2 > div:nth-last-child(2) { border-bottom: 1px solid rgb(22 16 12 / .12); }
  .facts--2 dd { font-size: 14px; }
  .sec--article .in { gap: 36px; }
  .inner--g { display: none; }
  .pull { padding: 8px 0; }
  .disc--pull { display: none; }
  .pull .h { font-size: 30px; }
  .odots li { font-size: 16px; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sims, .where { flex-basis: auto; width: 100%; }
  .sim { width: 150px; }
  .sim .sleeve { width: 120px; }
  .split--end { gap: 36px; }
}

/* ---------- about ---------- */
.inner--about { --s: 480px; right: -160px; top: 40px; transform: rotate(-9deg); }
.h1--about { max-width: 720px; }
.summary--about { max-width: 640px; }
.sec--ab { padding: 80px 0; }
.h2--ab { flex: 0 0 360px; font-size: 52px; }
.disc--ab { --d: 320px; right: -190px; top: -170px; }
.h2--c { font-size: 60px; }
.sec--orange .split--k .k-l { flex-basis: 520px; }
.facts--contact { flex: 0 1 440px; background: var(--paper); padding: 12px 24px; box-shadow: 0 8px 20px rgb(22 16 12 / .2); }
.facts--contact > div { grid-template-columns: 120px minmax(0, 1fr); padding: 12px 0; }
.facts--contact a { text-underline-offset: 3px; }
@media (max-width: 899px) {
  .inner--about { --s: 220px; right: -130px; top: -60px; }
  .inner--about .stamp { display: none; }
  .sec--ab { padding: 48px 0; }
  .h2--ab { flex-basis: auto; font-size: 36px; }
  .disc--ab { --d: 200px; right: -120px; top: -140px; }
  .h2--c { font-size: 40px; }
  .facts--contact { flex-basis: auto; width: 100%; padding: 8px 16px; }
  .facts--contact > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- legal ---------- */
.disc--legal { --d: 460px; right: -230px; top: -140px; }
.summary--legal { font-size: 20px; line-height: 1.5; max-width: 680px; }
.sec--sheet { padding-top: 64px; }
.sheet { max-width: 800px; background: var(--paper); padding: 56px 64px; box-shadow: 0 10px 28px rgb(22 16 12 / .18); display: grid; gap: 36px; }
.lsec .h { font-size: 34px; text-transform: none; line-height: 1; margin-bottom: 10px; }
.lsec .p { font-size: 17px; }
.stamp--file { position: absolute; left: 892px; top: 56px; font-size: 16px; transform: rotate(-8deg); }
@media (max-width: 1179px) { .stamp--file { display: none; } }
@media (max-width: 899px) {
  .disc--legal { --d: 220px; right: -120px; top: -130px; }
  .disc--legal .disc-t { display: none; }
  .summary--legal { font-size: 17px; }
  .sec--sheet { padding-top: 32px; }
  .sheet { padding: 24px 18px; gap: 26px; }
  .lsec .h { font-size: 28px; }
  .lsec .p { font-size: 15px; }
}

/* ---------- cookie: a shelf card ---------- */
.cookie { position: fixed; z-index: 50; right: 24px; bottom: 24px; width: min(500px, calc(100% - 32px)); background: var(--paper); border-radius: 4px; box-shadow: 0 16px 40px rgb(22 16 12 / .3); overflow: hidden; }
.cookie[hidden] { display: none; }
.ck-band { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--orange); }
.disc--ck { --d: 32px; position: relative; flex: none; box-shadow: none; }
.ck-title { font-size: 28px; text-transform: none; line-height: 1; }
.ck-body { padding: 20px 22px 24px; display: grid; gap: 18px; }
.ck-text { font-size: 15px; color: var(--ink2); }
.ck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-manage { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border: 1.5px dashed rgb(22 16 12 / .4); }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ck-opt input { accent-color: var(--orange); width: 16px; height: 16px; }
.cookie .text-link { font-size: 14px; }
.js .cookie.is-open { animation: ck-in .35s steps(3, end) both; }
@keyframes ck-in { from { transform: translateY(36px); opacity: .4; } }
@media (max-width: 899px) {
  .cookie { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .ck-title { font-size: 24px; }
  .ck-acts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reduced motion: the sleeve does not move ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bin:hover .bin-pic .sleeve, .bin:focus-within .bin-pic .sleeve,
  .sim a:hover .sleeve, .sim a:focus-visible .sleeve,
  .crate-sleeve:hover, .crate-sleeve:focus-visible { transform: none; }
  .sim a:hover .sleeve { transform: rotate(2deg); }
  .crate-sleeve:hover, .crate-sleeve:focus-visible { transform: rotate(var(--r)); }
  /* only the link colour and the record edge change */
  .bin:hover .disc--bin, .bin:focus-within .disc--bin { transform: translateY(-10px); }
}