/* Front-door directory for experiments.supermega.design.
   Same Instrument chrome and cards as a collection page (cga76/collection.css),
   on a plain grey ground with the kit's grain — no scene image, no wash. */
@font-face{font-family:"Tanker";src:url("fonts/Tanker-Regular.woff2") format("woff2");font-display:swap}
html,body{margin:0;min-block-size:100%}
/* Ground is the kit's own canvas token — the same grey the instrument-lab runs on
   — not the warm paper a single collection page picked for itself. Grain comes
   from the kit via data-instrument-grain="on". */
body[data-system="instrument"]{
	/* Focus is ATTENTION, not alarm — neutral band, red stays reserved for
	   invalid. Mirrors the super-interface-kit tokens.css decision (2026-08-18)
	   for the pinned releases this page loads. */
	--instrument-color-focus: var(--instrument-color-text);
background:var(--instrument-color-canvas);color:var(--instrument-color-text)}

[data-system="instrument"] .pg-chrome{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:var(--instrument-space-2);min-block-size:48px;padding-inline:var(--instrument-space-4);overflow-x:auto;background:#161616;font-family:"Tanker",var(--instrument-font-sans);font-size:var(--instrument-font-size-small);letter-spacing:var(--instrument-letter-spacing-label);white-space:nowrap}
[data-system="instrument"] .pg-chrome-mark{flex:0 0 auto;inline-size:var(--instrument-space-4);block-size:var(--instrument-space-4);margin-inline-end:var(--instrument-space-2);background:#f61515}
[data-system="instrument"] .pg-chrome a{color:#e0e0e0;text-decoration:none}
[data-system="instrument"] .pg-chrome a:hover{color:#fff}
[data-system="instrument"] .pg-chrome-sep{color:#6f6f6f}
[data-system="instrument"] .pg-chrome-tool{color:#a8a8a8}

[data-system="instrument"] .pg-index{position:relative;z-index:1;max-inline-size:1080px;margin:0 auto;padding:var(--instrument-space-12) var(--instrument-space-6)}
[data-system="instrument"] .pg-title{margin:0 0 var(--instrument-space-4);color:var(--instrument-color-text);font-family:"Tanker",var(--instrument-font-sans);font-size:clamp(2.4rem,6vw,4rem);font-weight:var(--instrument-font-weight-regular);line-height:.98;letter-spacing:-.01em;text-transform:uppercase}
[data-system="instrument"] .pg-lede{max-inline-size:64ch;margin:0 0 var(--instrument-space-8);color:var(--instrument-color-text-muted);font-size:var(--instrument-font-size-reading);line-height:var(--instrument-line-height-relaxed)}

[data-system="instrument"] .pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--instrument-space-6);margin-block-start:var(--instrument-space-6)}
/* Vertical card: header, then the image full-bleed on top, then the copy. */
[data-system="instrument"] .pg-card{display:grid;grid-template-rows:auto auto minmax(0,1fr);color:var(--instrument-color-text);background:var(--instrument-color-surface);box-shadow:var(--instrument-shadow-rule);text-decoration:none;transition:box-shadow var(--instrument-duration-fast) var(--instrument-ease-standard)}
[data-system="instrument"] a.pg-card:hover{box-shadow:var(--instrument-shadow-rule-strong)}
[data-system="instrument"] a.pg-card:focus-visible{outline:0;box-shadow:var(--instrument-shadow-focus)}
[data-system="instrument"] .pg-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--instrument-space-3);min-block-size:var(--instrument-space-6);padding-inline:var(--instrument-space-3);background:var(--instrument-section-wash);font-size:var(--instrument-font-size-label);font-weight:var(--instrument-font-weight-semibold);text-transform:uppercase;letter-spacing:var(--instrument-letter-spacing-label)}
[data-system="instrument"] .pg-card-meta{color:var(--instrument-color-text-faint);font-weight:var(--instrument-font-weight-regular);white-space:nowrap}
[data-system="instrument"] .pg-card-open{color:var(--instrument-color-text-faint);font-weight:var(--instrument-font-weight-regular);text-transform:none;white-space:nowrap;transition:color var(--instrument-duration-fast) var(--instrument-ease-standard)}
[data-system="instrument"] a.pg-card:hover .pg-card-open{color:var(--instrument-color-text)}
[data-system="instrument"] .pg-card-body{display:block;padding:var(--instrument-space-4)}
[data-system="instrument"] .pg-card-preview{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;background:var(--instrument-color-surface-overlay);filter:grayscale(1)}
[data-system="instrument"] .pg-card-name{display:block;margin-block-end:var(--instrument-space-2);color:var(--instrument-color-text);font-family:var(--instrument-font-mono);font-size:var(--instrument-font-size-label);font-weight:var(--instrument-font-weight-semibold);line-height:1.25;text-transform:uppercase;letter-spacing:var(--instrument-letter-spacing-label)}
[data-system="instrument"] .pg-card-blurb{display:block;color:var(--instrument-color-text-muted);font-size:var(--instrument-font-size-small);line-height:var(--instrument-line-height-normal)}

/* Plain ground, so the footer is a rule and type — no chips to sit over a scene. */
[data-system="instrument"] .pg-footer{display:flex;flex-wrap:wrap;row-gap:var(--instrument-space-2);align-items:center;justify-content:space-between;gap:var(--instrument-space-4);margin:var(--instrument-space-10) 0 0;padding-block-start:var(--instrument-space-4);border-block-start:1px solid var(--instrument-color-rule);font-family:var(--instrument-font-mono);font-size:var(--instrument-font-size-label);letter-spacing:var(--instrument-letter-spacing-label);color:var(--instrument-color-text-faint)}
[data-system="instrument"] .pg-footer a{color:var(--instrument-color-text);text-decoration:none}
[data-system="instrument"] .pg-footer a:hover{text-decoration:underline}

@media(max-width:680px){[data-system="instrument"] .pg-chrome{padding-inline:var(--instrument-space-3);font-size:12px}[data-system="instrument"] .pg-index{padding:var(--instrument-space-8) var(--instrument-space-4)}[data-system="instrument"] .pg-grid{grid-template-columns:1fr;gap:var(--instrument-space-4)}[data-system="instrument"] .pg-lede{font-size:16px}}
@media(prefers-reduced-motion:reduce){[data-system="instrument"] .pg-card{transition:none}}