/* The store, in Flaptown Design v5: instruments made of materials, one light from the top left.
   (FlaptownDesign/v5/STANDARD.md). The shared header and footer come from /site-nav.css. */
@font-face { font-family: "Syne Mono"; src: url("/SyneMono-Regular.ttf") format("truetype"); font-display: swap; }
:root { --onyx: #0e1010; --plate: #161818; --pocket: #080909; --mocha: #412828; --clay: #a46f67; --rose: #b7958c; --oak: #c9bab0; --dusty: #937f6d; --dim: #737078; --indigo: #3e4158;
  --done: #9ea3c8; --working: #d4b07a; --carve: 0 -1px 1px #000000f2, -1px -1px 1px #000000a6, 0 1px 0 #c9bab052; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--onyx); color: var(--oak); font: 400 15px/25px "Syne Mono", ui-monospace, monospace; font-synthesis: none; }
body { text-shadow: var(--carve); }
h1, h2, p, ol { margin: 0; font-weight: 400; }
a { color: var(--rose); } a:hover { color: var(--oak); }
.lbl { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.subtle { color: var(--dusty); }

.store { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 24px; display: flex; flex-direction: column; gap: 56px; }
.hero { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; }
.lede { color: var(--rose); font-size: 17px; line-height: 28px; }

/* materials */
.pocket { position: relative; background: var(--pocket); border-radius: 12px; padding: 6px;
  box-shadow: inset 0 4px 10px -3px #000000e6, inset 0 2px 0 #000, inset 4px 0 8px -5px #000000b3, inset -4px 0 8px -5px #000000b3, inset 0 -1px 0 var(--mocha); }
.window { position: relative; background: var(--onyx) linear-gradient(180deg, #c9bab012 0%, #c9bab005 40%, transparent 41%); border: 1px solid var(--mocha); border-radius: 8px;
  box-shadow: inset 0 1px 0 #c9bab01f, inset 0 -2px 6px #00000099, 0 1px 2px #000; overflow: hidden; }
.glass { position: absolute; inset: 2px; border-radius: 10px; pointer-events: none;
  background: radial-gradient(130% 90% at 12% -10%, #c9bab017 0%, #c9bab006 40%, transparent 60%), linear-gradient(116deg, transparent 6%, #c9bab005 14%, #c9bab00c 20%, #c9bab012 26%, #c9bab00c 32%, #c9bab005 38%, transparent 46%), linear-gradient(180deg, transparent 65%, #00000029 100%);
  border: 1px solid #c9bab01a; box-shadow: inset 0 1px 0 #c9bab040, inset 1px 0 0 #c9bab01c, inset -1px 0 0 #00000080, inset 0 -1px 0 #0000009e, 0 2px 5px #000000b3; }
.glass::before { content: ""; position: absolute; top: 1px; left: 10%; right: 34%; height: 1px; background: linear-gradient(90deg, transparent, #e6d8cd59 35%, #e6d8cd33 70%, transparent); }

/* a product: a milled plate with its picture under glass and its platforms as a readout */
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; padding: 24px; border-radius: 10px;
  background: var(--plate) repeating-linear-gradient(0deg, #c9bab003 0 1px, transparent 1px 3px);
  box-shadow: 0 2px 0 #000, 0 18px 40px #000000c0, inset 0 1px 0 #c9bab01f, inset 1px 0 0 #c9bab010; }
.shot { align-self: start; }
.shot img { display: block; width: 100%; height: auto; }
.shot.mark .window { display: grid; place-items: center; aspect-ratio: 16 / 10; background: radial-gradient(circle at 35% 30%, #1b1e1e, var(--onyx) 70%); }
.shot.mark img { width: 34%; opacity: .9; }
.about { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.about h2 { font-size: 32px; line-height: 40px; }
.about > p:not(.lbl) { color: var(--rose); }
.platforms { list-style: none; padding: 4px 0; }
.platforms li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; font-size: 14px; line-height: 20px; }
.platforms li + li { border-top: 1px solid #1d1414; }
.ic { text-align: center; } .ic.done { color: var(--done); } .ic.wait { color: var(--working); }
.what .sub { display: block; font-size: 11px; line-height: 16px; color: var(--dusty); }
.st { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .st.done { color: var(--done); } .st.working { color: var(--working); }

/* keys: physical, they go down */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--oak);
  background: #3e415833; border: 1.5px solid #737078b3; box-shadow: 0 3px 0 #000, 0 6px 14px #00000099, inset 0 1px 0 #c9bab00f; transition: background-color .14s, border-color .14s, transform .08s, box-shadow .08s; white-space: nowrap; }
.btn:hover { border-color: var(--dim); color: var(--oak); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.btn.primary { background: #b7958c26; border-color: var(--rose); }
.btn.off { opacity: .4; box-shadow: none; }
.btn:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--oak); outline-offset: 2px; }

.notes { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.notes h2 { margin-bottom: 6px; }
details { background: var(--plate); border-radius: 6px; box-shadow: 0 1px 0 #000, inset 0 1px 0 #c9bab012; }
summary { cursor: pointer; padding: 12px 16px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; color: var(--dusty); }
details[open] summary::before { content: "▾ "; }
details p, details pre { padding: 0 16px 14px; color: var(--rose); font-size: 13px; line-height: 21px; }
code, pre { font-family: inherit; color: var(--oak); }
pre { white-space: pre-wrap; word-break: break-all; margin: 0; }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; padding: 14px; }
  .platforms li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .platforms .st { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }