/* ==========================================================================
   STREETWEAR — exhibition room. Loaded on a/streetwear.html.

   TIER 2. One mark, one face: Archivo Black at every size, black on
   white, the box lockup first and unchallenged. The drop: the room's
   content arrives on a timed CSS delay (steps, no easing) after the page
   opens; under reduced motion, or with animation unsupported, everything
   is present from the first paint. No second typeface exists in this
   sheet — every rule below sets the same family.
   ========================================================================== */

@font-face {
  font-family: "ArchivoBlackX";
  src: url("fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.sr-page {
  --sr-white: #FFFFFF;
  --sr-black: #0A0A0A;
  --sr-grey: #6E6E6E;
  --sr-face: "ArchivoBlackX", "Arial Black", sans-serif;
}
.sr-page main { background: var(--sr-white); color: var(--sr-black); }
.sr-wrap { padding: clamp(1.2rem, 4vw, 3.5rem) 1rem clamp(2.5rem, 6vw, 4.5rem); }
.sr-room { max-width: 44rem; margin-inline: auto; font: 400 0.82rem/1.75 var(--sr-face); }

.sr-cat { margin: 0 0 1.2rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-grey); }

/* ---- the one mark --------------------------------------------------------- */
.sr-lock {
  display: inline-block;
  background: var(--sr-black);
  color: var(--sr-white);
  font: 400 clamp(1.6rem, 6vw, 2.8rem)/1 var(--sr-face);
  letter-spacing: 0.04em;
  padding: 0.35em 0.55em;
}
.sr-lock__note { margin: 0.9rem 0 2rem; max-width: 38rem; font-size: 0.75rem; line-height: 1.8; color: var(--sr-grey); }

/* ---- the schedule + the drop ---------------------------------------------- */
.sr-sched { margin: 0 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--sr-grey); }

/* Everything inside .sr-drop arrives at the drop moment: opacity steps from
   0 to 1 with no easing. The resting (animated-to) state is fully present,
   and reduced-motion never hides anything. */
.sr-drop > * { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sr-drop > * { animation: sr-drop-in 0.01s steps(1, end) both; }
  .sr-drop > *:nth-child(1) { animation-delay: 1.1s; }
  .sr-drop > *:nth-child(2) { animation-delay: 1.5s; }
  .sr-drop > *:nth-child(3) { animation-delay: 1.9s; }
  .sr-drop > *:nth-child(4) { animation-delay: 2.3s; }
  @keyframes sr-drop-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- sections -------------------------------------------------------------- */
.sr-sec { border-block-start: 4px solid var(--sr-black); padding-block-start: 0.9rem; margin-block-end: 2rem; }
.sr-h { margin: 0 0 0.7rem; font: 400 1.1rem/1.3 var(--sr-face); letter-spacing: 0.02em; text-transform: uppercase; }
.sr-p { margin: 0 0 0.8rem; }
.sr-p--small { font-size: 0.75rem; color: var(--sr-grey); }
.sr-p i { font-style: normal; }

/* ---- the held deck field ---------------------------------------------------- */
.sr-deckrow { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sr-deck {
  aspect-ratio: 1 / 3.6;              /* the deck's long, narrow shape */
  border: 4px solid var(--sr-black);
  display: grid; place-items: center;
  text-align: center;
}
.sr-deck p { margin: 0; padding: 0.8rem 0.6rem; font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.06em; color: var(--sr-grey); }
.sr-deck__cap { margin: 0 0 1.4rem; font-size: 0.75rem; color: var(--sr-grey); }
.sr-h--sub { border-block-start: 4px solid var(--sr-black); padding-block-start: 0.7rem; font-size: 0.95rem; }
@media (max-width: 34rem) {
  .sr-deckrow { grid-template-columns: 1fr; }
  .sr-deck { width: min(9.5rem, 60%); }
}

/* ---- singularity demo -------------------------------------------------------- */
.sr-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.sr-demofig { margin: 0; }
.sr-demofig__panel {
  position: relative; min-height: 9rem; border: 2px solid var(--sr-black);
  padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
}
.sr-mini-lock { background: var(--sr-black); color: var(--sr-white); padding: 0.25em 0.45em; font-size: 0.9rem; }
.sr-mini-line { font-size: 0.75rem; color: var(--sr-grey); }
.sr-demofig__panel--one { justify-content: center; }
/* the clutter: same face, degraded by treatment */
.sr-mini-shout { font-size: 1.5rem; text-decoration: underline; }
.sr-mini-lock--tilt { rotate: -4deg; }
.sr-mini-flash { border: 2px solid var(--sr-black); padding: 0.1em 0.4em; font-size: 0.75rem; }
.sr-mini-flash--b { position: absolute; inset-block-end: 0.6rem; inset-inline-end: 0.6rem; rotate: 6deg; }
.sr-demofig figcaption { margin-block-start: 0.5rem; font-size: 0.75rem; color: var(--sr-grey); }

.sr-sec--last { margin-block-end: 0; }

/* ==========================================================================
   THE RECORD — the rest of the same room.

   Nothing new enters: the one face at every size, black on white, the grey
   of the catalogue line for labels, and the room's 4px rule opening every
   block exactly as it opens every section above. The box lockup stays the
   only filled black box on the page; an exit fills to black only while it
   is pressed, hovered or focused. Sentences sit at 1rem, not the room's
   caption size, so the record reads.
   Black #0A0A0A on white 19.8:1 · grey #6E6E6E on white 5.1:1.
   No motion: the record never waits for the drop.
   ========================================================================== */
/* The shell's scroll reveal must never leave the record at opacity 0. */
.sr-page main > section.sr-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.sr-rec { padding: 0 1rem clamp(2.5rem, 6vw, 4.5rem); background: var(--sr-white); color: var(--sr-black); }
.sr-rsheet { max-width: 44rem; margin-inline: auto; font: 400 1rem/1.7 var(--sr-face); }
.sr-rsheet b.sr-b { font-weight: 400; }
.sr-rsheet em { font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.sr-rec a { color: var(--sr-black); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sr-rec a:hover { text-decoration-thickness: 4px; }
.sr-rec :focus-visible { outline: 3px solid var(--sr-black); outline-offset: 3px; }

/* blocks: the room's section rule, heading, content */
.sr-rb { border-block-start: 4px solid var(--sr-black); padding-block-start: 0.9rem; margin-block-end: 2.6rem; }
.sr-rb:first-child { border-block-start-width: 8px; }
.sr-rb--last { margin-block-end: 0; }
.sr-rh { margin-block-end: 1rem; }
.sr-n { color: var(--sr-grey); }

/* sentences, labels */
.sr-rp { max-width: 38em; margin: 0 0 0.8rem; text-wrap: pretty; }
.sr-lab {
  margin: 1.2rem 0 0.35rem;
  font: 400 0.75rem/1.4 var(--sr-face);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sr-grey);
}
.sr-dim { margin: 0.2rem 0; font-size: 0.875rem; color: var(--sr-grey); }
.sr-k {
  margin: 0 0 0.2rem;
  font: 400 0.75rem/1.5 var(--sr-face);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sr-grey);
}
.sr-ev {
  display: inline-block; margin-inline-start: 0.4rem; padding: 0 0.4em;
  border: 2px solid var(--sr-black); color: var(--sr-black);
  letter-spacing: 0.08em;
}
.sr-dx {
  max-width: 30em;
  margin: 1rem 0;
  padding-block: 0.8rem;
  border-block: 4px solid var(--sr-black);
  font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.45;
  text-wrap: balance;
}
.sr-dx--warn { font-size: 1rem; border-block-width: 2px; }

/* the record's particulars: a size chart, label | value */
.sr-ld { margin: 0; }
.sr-ld > div {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem;
  padding-block: 0.55rem; border-block-end: 2px solid var(--sr-black);
}
.sr-ld > div:first-child { border-block-start: 2px solid var(--sr-black); }
.sr-ld dt {
  font-size: 0.75rem; line-height: 2.2; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sr-grey);
}
.sr-ld dd { margin: 0; }
.sr-note { margin-block-start: 1.2rem; }
.sr-note > .sr-lab { margin-block-start: 0; }
.sr-note--held { border: 4px solid var(--sr-black); padding: 0.9rem 1rem 0.2rem; }
.sr-note--held > .sr-lab { color: var(--sr-black); }
.sr-list { margin: 0; padding-inline-start: 1.2rem; }

/* what carries the look */
.sr-tw { overflow-x: auto; }
.sr-ct, .sr-rt { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.8rem; }
.sr-ct { border-block-start: 2px solid var(--sr-black); }
.sr-ct th, .sr-ct td, .sr-rt th, .sr-rt td { padding: 0.5rem 0.6rem 0.5rem 0; border-block-end: 2px solid var(--sr-black); vertical-align: top; text-align: start; font-weight: 400; }
.sr-ct th { width: 34%; }
.sr-ct td p { margin: 0.55rem 0 0.2rem; }
.sr-ct th a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sr-ct small { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-grey); }
.sr-tags { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.sr-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.sr-swatch { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.sr-swatch li { display: grid; gap: 0.3rem; }
.sr-sw__c { display: block; width: 4.5rem; height: 3rem; border: 2px solid var(--sr-black); }
.sr-sw__h { font-size: 0.75rem; letter-spacing: 0.06em; }

/* rules: numbered like a drop list */
.sr-area + .sr-area { margin-block-start: 0.6rem; }
.sr-rules { list-style: none; margin: 0; padding: 0; }
.sr-rules li {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.6rem;
  padding-block: 0.7rem 0.1rem; border-block-start: 2px solid var(--sr-black);
}
.sr-no { font-size: 1.6rem; line-height: 1.1; }

/* research ledger */
.sr-rt thead th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-grey); border-block-end-width: 4px; }
.sr-rt td { white-space: nowrap; }

/* neighbours */
.sr-conf { list-style: none; margin: 0; padding: 0; }
.sr-conf li { padding-block: 0.6rem 0.2rem; border-block-start: 2px solid var(--sr-black); }
.sr-conf li:first-child { border-block-start: 0; padding-block-start: 0; }
.sr-nb { margin: 0; font-size: 1.3rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.sr-nb a { display: inline-flex; align-items: center; min-height: 44px; }

/* use it: outlined like the room's flashes; the fill comes only on press */
.sr-use { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.sr-use li { display: grid; gap: 0.4rem; justify-items: start; }
.sr-use .sr-rp { margin: 0; }
.sr-rec a.sr-x {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem;
  border: 4px solid var(--sr-black); background: var(--sr-white); color: var(--sr-black);
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em;
}
.sr-rec a.sr-x:hover, .sr-rec a.sr-x:focus-visible, .sr-rec a.sr-x:active { background: var(--sr-black); color: var(--sr-white); }
.sr-foot { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 1.4rem 0 0; padding-block-start: 0.6rem; border-block-start: 2px solid var(--sr-black); }
.sr-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 34rem) {
  .sr-ld > div { grid-template-columns: 1fr; gap: 0; }
  .sr-ct th, .sr-ct td { display: block; width: auto; }
  .sr-ct th { border-block-end: 0; padding-block-end: 0; }
  .sr-rules li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .sr-no { font-size: 1.25rem; }
  .sr-rt { font-size: 0.875rem; }
  .sr-rt td { white-space: normal; }
  .sr-rt thead th { font-size: 0.75rem; letter-spacing: 0.02em; }
  .sr-rt th, .sr-rt td { padding-inline-end: 0.4rem; overflow-wrap: anywhere; }
  .sr-ev { display: table; margin: 0.3rem 0 0; }
}