/* ShurIQ × Benko — Gallery
   Honors shuriq-design-system tokens (colors_and_type.css v0.1).
   No shadows, no gradients, no glows. Default radius 0. */

@font-face { font-family: 'PlayfairFallback'; src: local('Playfair Display'), local('Georgia'); font-display: swap; }
@font-face { font-family: 'SourceFallback'; src: local('Source Sans 3'), local('-apple-system'), local('BlinkMacSystemFont'); font-display: swap; }

:root {
  --bg:        #FAF8F5;
  --bg-soft:   #F4F0E8;
  --paper:    #FFFFFF;
  --fg-1:     #1A1A1A;
  --fg-2:     #4A4540;
  --fg-3:     #807870;
  --fg-ink:   #0A0A0A;
  --rule:     #1A1A1A;
  --hairline: rgba(26,26,26,0.08);

  --accent:   #1E3A6E;
  --critical: #A62114;
  --warm:     #A65F16;
  --ochre:    #A89917;
  --sage:     #3F6B4E;

  --c1: #A62114; --c2: #4CB014; --c3: #3094A7;
  --c4: #7E00B0; --c5: #A89917; --c6: #A7009C; --c7: #1E3A6E;

  --font-display: 'Playfair Display', PlayfairFallback, Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', SourceFallback, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-xl: 86px;
  --fs-display:    48px;
  --fs-h2:         36px;
  --fs-h3:         26px;
  --fs-body:       17px;
  --fs-small:      15px;
  --fs-meta:       11px;
  --fs-tag:        10px;

  --measure:        760px;
  --measure-narrow: 660px;
  --measure-wide:  1240px;

  --lh-body:    1.65;
  --lh-display: 1.02;
  --ls-display: -0.025em;
  --ls-mono:     0.12em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-1); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg-ink); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--hairline); padding: 0.05em 0.3em; }

.kicker { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); display: inline-block; margin-bottom: 12px; }
.display { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; margin: 0 0 24px; }

h2 { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; margin: 0 0 24px; }

.lede { font-size: 19px; max-width: var(--measure); margin: 0 0 16px; color: var(--fg-2); }
.lede em { font-style: normal; font-family: var(--font-mono); font-size: 0.82em; color: var(--fg-3); letter-spacing: 0.04em; }

.masthead { border-bottom: 1px solid var(--rule); padding: 96px 0 64px; background: var(--bg); }
.masthead-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 48px; }

.metabar { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.meta-pair { display: flex; flex-direction: column; gap: 4px; }
.meta-k { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.meta-v { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-1); }

/* ─── Tab navigation ─── */
nav.tabs { background: var(--bg); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
nav.tabs .masthead-inner { display: flex; gap: 0; padding: 0 48px; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 24px 32px 22px; text-align: left; font-family: var(--font-body); transition: border-color 120ms; display: flex; flex-direction: column; gap: 4px; color: var(--fg-3); }
.tab:hover { color: var(--fg-1); }
.tab.active { color: var(--fg-1); border-bottom-color: var(--critical); }
.tab-num { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); }
.tab-label { font-family: var(--font-display); font-size: 24px; line-height: 1.05; letter-spacing: var(--ls-display); }
.tab-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Library category sections */
.lib-cat { padding: 56px 0 24px; border-top: 1px solid var(--hairline); }
.lib-cat:first-child { padding-top: 24px; border-top: 0; }
.lib-cat-head { margin-bottom: 32px; max-width: var(--measure); }
.lib-cat-title { font-family: var(--font-display); font-size: 32px; line-height: 1.1; letter-spacing: var(--ls-display); font-weight: 400; margin: 4px 0 0; }

/* Library card adjustments */
.card-lib .card-media { background: var(--bg-soft); }
.card-id { font-family: var(--font-mono); font-size: 14px; color: var(--critical); letter-spacing: var(--ls-mono); }
.card-demo { color: var(--fg-3); font-style: italic; font-size: 14px; }

.archetype { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.archetype-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 48px; }
.archetype-inner.narrow { max-width: var(--measure); }
.archetype-head { max-width: var(--measure); margin-bottom: 48px; }
.archetype-head p { font-size: var(--fs-body); color: var(--fg-2); margin: 0; }
.archetype-head strong { color: var(--fg-1); font-weight: 600; }

.grid { display: grid; gap: 48px 32px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--rule);
}
.card-media { background: var(--bg-soft); aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-media .pending {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.card-head { display: flex; align-items: baseline; gap: 16px; }
.card-greek { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--critical); }
.card-num { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.card-title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: var(--ls-display); font-weight: 400; margin: 4px 0 0; }
.card-sig { color: var(--fg-2); font-size: 16px; line-height: 1.5; margin: 0; }
.card-meta { display: grid; grid-template-columns: 110px 1fr; gap: 4px 16px; border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 4px; }
.card-meta dt { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.card-meta dd { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-1); margin: 0; }

.prov { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 1px solid var(--rule); padding-top: 32px; }
.prov ul { padding-left: 0; list-style: none; margin: 0; }
.prov li { padding: 6px 0; font-size: 15px; border-bottom: 1px solid var(--hairline); }
.prov li:last-child { border-bottom: 0; }

#how p { max-width: var(--measure-narrow); color: var(--fg-2); }
#how p em { font-style: italic; }

.foot { padding: 48px 0 96px; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); }
.foot p { margin: 0; }

@media (max-width: 720px) {
  .masthead { padding: 64px 0 40px; }
  .masthead-inner, .archetype-inner { padding: 0 24px; }
  .display { font-size: 56px; }
  h2 { font-size: 32px; }
  .archetype { padding: 56px 0; }
  .prov { grid-template-columns: 1fr; }
}