/* ============================================================================
   Showroom chrome — loaded by every showroom page, before the variant sheet.

   Scope discipline: this file owns the reset, the fixed navigation chrome,
   the closing note and the index page. It sets NO typography and NO colour
   on the document body, because each direction owns its own palette and
   type. Anything that would leak into a variant lives under .showroom-index.
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Room for the fixed pager so no direction ends underneath it. */
  padding-bottom: 0;
}

img,
svg { max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button, input, textarea, select { font: inherit; color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Skip link ----------------------------------------------------------- */

.showroom-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: #101418;
  color: #ffffff;
  font: 600 0.9rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  transition: top 0.15s ease;
}

.showroom-skip:focus { top: 12px; }

/* --- Fixed pager ---------------------------------------------------------
   Present on every preview so a direction can be left without the browser
   back button. Deliberately styled in neutral ink so it reads on all ten
   palettes, and variant sheets must not hide it.                            */

.showroom-pager {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  background: #101418;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(16, 20, 24, 0.28);
  font: 500 0.82rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.showroom-pager a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
}

.showroom-pager__step {
  width: 44px;
  font-size: 1.25rem;
  border-radius: 999px;
}

.showroom-pager__index {
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px;
  border-inline: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}

.showroom-pager__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.showroom-pager__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.showroom-pager a:hover { background: rgba(255, 255, 255, 0.14); }

.showroom-pager a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

/* --- Closing note -------------------------------------------------------- */

.showroom-note {
  padding: 28px 20px 96px;
  background: #101418;
  color: rgba(255, 255, 255, 0.82);
  font: 400 0.85rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.showroom-note__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
  align-items: baseline;
  width: min(1180px, 100%);
  margin-inline: auto;
}

.showroom-note strong { color: #ffffff; font-weight: 650; }

.showroom-note a { color: #ffffff; text-underline-offset: 3px; }

/* ============================================================================
   Index page
   ========================================================================= */

.showroom-index {
  background: #eceef0;
  color: #101418;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.showroom-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.showroom-masthead {
  padding: 22px 0;
  background: #101418;
  color: #ffffff;
}

.showroom-masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

.showroom-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.showroom-wordmark svg { width: 26px; height: 26px; flex: none; }

.showroom-masthead__meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.showroom-hero { padding: clamp(56px, 9vw, 116px) 0 clamp(36px, 5vw, 64px); }

.showroom-hero__kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a6472;
}

.showroom-hero h1 {
  max-width: 16ch;
  margin: 18px 0 20px;
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.showroom-hero p {
  max-width: 62ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #3d4653;
}

.showroom-hero dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #c8cdd4;
}

.showroom-hero dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6472;
}

.showroom-hero dd { font-weight: 600; }

/* --- Direction grid ------------------------------------------------------ */

.showroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 18px;
  padding-bottom: 72px;
}

.showroom-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.14);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.showroom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 20, 24, 0.18);
}

.showroom-card:focus-visible {
  outline: 3px solid #101418;
  outline-offset: 3px;
}

.showroom-card__body { padding: 22px 24px 8px; }

.showroom-card__no {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--card-accent, #5a6472);
}

.showroom-card h2 {
  margin: 8px 0 8px;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.showroom-card p { color: #46505e; font-size: 0.94rem; }

.showroom-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 22px;
  font-size: 0.86rem;
  font-weight: 650;
}

.showroom-card__swatches { display: flex; gap: 5px; }

.showroom-card__swatches i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(16, 20, 24, 0.16);
}

.showroom-card__swatches i:nth-child(1) { background: var(--card-paper); }
.showroom-card__swatches i:nth-child(2) { background: var(--card-ink); }
.showroom-card__swatches i:nth-child(3) { background: var(--card-accent); }

/* --- Card palettes -------------------------------------------------------
   CSP forbids inline style attributes, so the ten palettes are declared
   here rather than echoed from PHP. Keep them in step with the palette
   values in showroom/data/variants.php and each design-NN.css.            */

.showroom-card--01 { --card-ink: #16232b; --card-paper: #f4f1ea; --card-accent: #8a6a2f; }
.showroom-card--02 { --card-ink: #101418; --card-paper: #f2f0ec; --card-accent: #ff5a1f; }
.showroom-card--03 { --card-ink: #111111; --card-paper: #ffffff; --card-accent: #6b6b6b; }
.showroom-card--04 { --card-ink: #23324a; --card-paper: #fff6f0; --card-accent: #d2542f; }
.showroom-card--05 { --card-ink: #0e1a2b; --card-paper: #f4f6f9; --card-accent: #1a4fd0; }
.showroom-card--06 { --card-ink: #1c1a17; --card-paper: #eeebe5; --card-accent: #8c6f45; }
.showroom-card--07 { --card-ink: #1f2a24; --card-paper: #f3f1ea; --card-accent: #38614b; }
.showroom-card--08 { --card-ink: #14181d; --card-paper: #ffffff; --card-accent: #c02a1e; }
.showroom-card--09 { --card-ink: #14110d; --card-paper: #fbfaf7; --card-accent: #a3241c; }
.showroom-card--10 { --card-ink: #1b1440; --card-paper: #f6f3ff; --card-accent: #5b21b6; }

/* --- Layout thumbnails ---------------------------------------------------
   A schematic of each composition, drawn in the direction's own palette so
   the index communicates structure and colour before anything is opened.   */

.tn {
  display: grid;
  gap: 5px;
  aspect-ratio: 16 / 10;
  padding: 12px;
  background: var(--card-paper);
  border-bottom: 1px solid rgba(16, 20, 24, 0.1);
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 10px repeat(4, 1fr);
}

.tn i { display: block; background: var(--card-ink); opacity: 0.86; }

.tn .tn-bar   { grid-column: 1 / -1; opacity: 0.5; }
.tn .tn-h     { grid-column: 1 / 4; grid-row: 2 / 4; }
.tn .tn-p     { grid-column: 1 / 3; grid-row: 4 / 5; opacity: 0.32; }
.tn .tn-art   { grid-column: 4 / -1; grid-row: 2 / 5; background: var(--card-accent); opacity: 1; }
.tn .tn-a     { grid-column: 1 / 2; grid-row: 5 / 6; background: var(--card-accent); }
.tn .tn-b     { grid-column: 2 / 4; grid-row: 5 / 6; opacity: 0.22; }
.tn .tn-c     { grid-column: 4 / -1; grid-row: 5 / 6; opacity: 0.22; }

/* 01 Classic — symmetrical, top bar, centred masthead, four even columns. */
.tn--01 { grid-template-rows: 8px 8px repeat(3, 1fr); }
.tn--01 .tn-bar { grid-row: 1; background: var(--card-accent); opacity: 1; }
.tn--01 .tn-h   { grid-column: 2 / 6; grid-row: 2 / 3; opacity: 0.6; }
.tn--01 .tn-art { grid-column: 1 / -1; grid-row: 3 / 4; }
.tn--01 .tn-p   { grid-column: 2 / 6; grid-row: 4 / 5; opacity: 0.3; }
.tn--01 .tn-a   { grid-column: 1 / 3; grid-row: 5; }
.tn--01 .tn-b   { grid-column: 3 / 5; grid-row: 5; opacity: 0.22; }
.tn--01 .tn-c   { grid-column: 5 / -1; grid-row: 5; opacity: 0.22; }

/* 02 Bold — full-bleed dark hero, oversized type, thick action bar. */
.tn--02 { background: var(--card-ink); padding: 0; gap: 3px; }
.tn--02 .tn-bar { grid-column: 1 / -1; background: var(--card-accent); opacity: 1; }
.tn--02 .tn-h   { grid-column: 1 / 6; grid-row: 2 / 4; background: var(--card-paper); opacity: 0.94; }
.tn--02 .tn-p   { grid-column: 1 / 4; grid-row: 4 / 5; background: var(--card-paper); opacity: 0.4; }
.tn--02 .tn-art { grid-column: 1 / -1; grid-row: 5 / 6; background: var(--card-accent); }
.tn--02 .tn-a,
.tn--02 .tn-b,
.tn--02 .tn-c { display: none; }

/* 03 Minimal — hairlines, one narrow column, generous emptiness. */
.tn--03 { grid-template-rows: 6px repeat(4, 1fr); }
.tn--03 .tn-bar { height: 1px; align-self: start; opacity: 1; }
.tn--03 .tn-h   { grid-column: 1 / 4; grid-row: 3 / 4; }
.tn--03 .tn-p   { grid-column: 1 / 3; grid-row: 4 / 5; opacity: 0.28; }
.tn--03 .tn-art { grid-column: 5 / -1; grid-row: 3 / 4; background: var(--card-accent); }
.tn--03 .tn-a   { grid-column: 1 / -1; grid-row: 5 / 6; height: 1px; align-self: end; }
.tn--03 .tn-b,
.tn--03 .tn-c { display: none; }

/* 04 Friendly — rounded cards, three-up, soft arc. */
.tn--04 i { border-radius: 6px; }
.tn--04 .tn-bar { border-radius: 999px; }
.tn--04 .tn-h   { grid-column: 1 / 4; grid-row: 2 / 4; }
.tn--04 .tn-art { grid-column: 4 / -1; grid-row: 2 / 4; border-radius: 999px 999px 12px 12px; }
.tn--04 .tn-p   { grid-column: 1 / 3; grid-row: 4 / 5; opacity: 0.3; }
.tn--04 .tn-a   { grid-column: 1 / 3; grid-row: 5; }
.tn--04 .tn-b   { grid-column: 3 / 5; grid-row: 5; opacity: 0.24; }
.tn--04 .tn-c   { grid-column: 5 / -1; grid-row: 5; opacity: 0.24; }

/* 05 Corporate — sticky rail on the left, dense data grid on the right. */
.tn--05 .tn-bar { grid-column: 1 / -1; }
.tn--05 .tn-h   { grid-column: 1 / 3; grid-row: 2 / 6; opacity: 0.14; }
.tn--05 .tn-art { grid-column: 3 / -1; grid-row: 2 / 3; }
.tn--05 .tn-p   { grid-column: 3 / -1; grid-row: 3 / 4; opacity: 0.3; }
.tn--05 .tn-a   { grid-column: 3 / 4; grid-row: 4 / 6; }
.tn--05 .tn-b   { grid-column: 4 / 5; grid-row: 4 / 6; opacity: 0.24; }
.tn--05 .tn-c   { grid-column: 5 / -1; grid-row: 4 / 6; opacity: 0.24; }

/* 06 Premium — full-bleed image, floating caption plate. */
.tn--06 { padding: 0; gap: 0; }
.tn--06 .tn-bar { display: none; }
.tn--06 .tn-art { grid-column: 1 / -1; grid-row: 1 / 5; opacity: 0.9; }
.tn--06 .tn-h   { grid-column: 2 / 5; grid-row: 3 / 4; background: var(--card-paper); opacity: 1; position: relative; z-index: 1; }
.tn--06 .tn-p   { grid-column: 2 / 4; grid-row: 4 / 5; background: var(--card-paper); opacity: 0.7; position: relative; z-index: 1; }
.tn--06 .tn-a   { grid-column: 1 / -1; grid-row: 5 / 6; opacity: 0.16; }
.tn--06 .tn-b,
.tn--06 .tn-c { display: none; }

/* 07 Warm — letter column beside a framed portrait. */
.tn--07 .tn-bar { opacity: 0.35; }
.tn--07 .tn-art { grid-column: 1 / 3; grid-row: 2 / 5; }
.tn--07 .tn-h   { grid-column: 3 / -1; grid-row: 2 / 3; }
.tn--07 .tn-p   { grid-column: 3 / -1; grid-row: 3 / 5; opacity: 0.28; }
.tn--07 .tn-a   { grid-column: 1 / 4; grid-row: 5; }
.tn--07 .tn-b   { grid-column: 4 / -1; grid-row: 5; opacity: 0.22; }
.tn--07 .tn-c { display: none; }

/* 08 Conversion — promise, proof strip, repeated action blocks. */
.tn--08 .tn-bar { background: var(--card-accent); opacity: 1; }
.tn--08 .tn-h   { grid-column: 1 / 5; grid-row: 2 / 3; }
.tn--08 .tn-a   { grid-column: 1 / 3; grid-row: 3 / 4; }
.tn--08 .tn-p   { grid-column: 3 / -1; grid-row: 3 / 4; opacity: 0.26; }
.tn--08 .tn-art { grid-column: 1 / -1; grid-row: 4 / 5; opacity: 0.18; background: var(--card-ink); }
.tn--08 .tn-b   { grid-column: 1 / -1; grid-row: 5 / 6; background: var(--card-accent); opacity: 1; }
.tn--08 .tn-c { display: none; }

/* 09 Editorial — masthead rule, two text columns, hanging quote. */
.tn--09 { grid-template-rows: 4px 6px repeat(3, 1fr); }
.tn--09 .tn-bar { grid-row: 1; opacity: 1; }
.tn--09 .tn-h   { grid-column: 1 / -1; grid-row: 3 / 4; }
.tn--09 .tn-p   { grid-column: 1 / 4; grid-row: 4 / 6; opacity: 0.26; }
.tn--09 .tn-art { grid-column: 4 / -1; grid-row: 4 / 5; }
.tn--09 .tn-a   { grid-column: 4 / -1; grid-row: 5 / 6; background: var(--card-accent); }
.tn--09 .tn-b   { grid-column: 1 / -1; grid-row: 2; opacity: 0.3; }
.tn--09 .tn-c { display: none; }

/* 10 Contemporary — colour blocks on a tilted geometric grid. */
.tn--10 { gap: 6px; }
.tn--10 i { border-radius: 3px; }
.tn--10 .tn-bar { background: var(--card-ink); opacity: 0.9; }
.tn--10 .tn-h   { grid-column: 1 / 4; grid-row: 2 / 4; }
.tn--10 .tn-art { grid-column: 4 / -1; grid-row: 2 / 3; border-radius: 999px 3px 999px 3px; }
.tn--10 .tn-p   { grid-column: 4 / -1; grid-row: 3 / 4; background: var(--card-accent); opacity: 0.35; }
.tn--10 .tn-a   { grid-column: 1 / 3; grid-row: 4 / 6; background: var(--card-accent); }
.tn--10 .tn-b   { grid-column: 3 / 5; grid-row: 4 / 6; opacity: 0.2; }
.tn--10 .tn-c   { grid-column: 5 / -1; grid-row: 4 / 6; opacity: 0.34; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 700px) {
  .showroom-shell { width: min(100% - 28px, 1180px); }
  .showroom-pager { bottom: 12px; }
  .showroom-note { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-card,
  .showroom-skip { transition: none; }
  .showroom-card:hover { transform: none; }
}