/* The gallery page. Colours and type come from the vendored SubScout tokens
   (vendor/subscout/); no raw hex here. Register: Outcrop (data art), dark room by
   default (mørketid), light on request. */
html { background: var(--ss-canvas); }
body { margin: 0; background: var(--ss-canvas); color: var(--ss-text); font-family: var(--ss-font-body); font-size: var(--ss-size-body); line-height: 1.5; }
a { color: var(--ss-link); }
*, *::before, *::after { box-sizing: border-box; }
.g-wrap { max-width: var(--ss-wide); margin: 0 auto; padding: 0 var(--ss-gutter); }
.g-top { padding-block: 14px; border-bottom: 1px solid var(--ss-border-subtle); }
.g-top .g-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px var(--ss-space-m); }
.g-brand { font-family: var(--ss-font-display); font-weight: var(--ss-display-weight); font-size: 1.15rem; color: var(--ss-text); text-decoration: none; }
.g-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px var(--ss-space-m); align-items: center; font-size: var(--ss-size-label); }
.g-hero p, .g-lede, .g-foot p { overflow-wrap: anywhere; }
.g-nav a { color: var(--ss-text-subtle); text-decoration: none; }
.g-nav a:hover { color: var(--ss-text); text-decoration: underline; }
.g-scheme { font: 600 0.78rem var(--ss-font-body); color: var(--ss-text-subtle); background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.g-hero { padding-block: var(--ss-space-xxl) var(--ss-space-l); max-width: 46rem; }
.g-hero h1 { font-family: var(--ss-font-display); font-weight: var(--ss-display-weight); letter-spacing: var(--ss-display-tracking); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 var(--ss-space-m); }
.g-hero p { font-size: var(--ss-size-standfirst); color: var(--ss-text-subtle); margin: 0; }
.g-hero { max-width: none; }
.g-hero h1, .g-hero p { max-width: 46rem; }
.g-band { margin-top: var(--ss-space-xl); width: 100%; }
.g-section { padding-block: var(--ss-space-xl) var(--ss-space-s); }
.g-section h2 { font-family: var(--ss-font-display); font-weight: var(--ss-display-weight); font-size: 1.5rem; margin: 0 0 var(--ss-space-xs); }
.g-section .g-lede { color: var(--ss-text-muted); font-size: var(--ss-size-label); margin: 0 0 var(--ss-space-l); max-width: 46rem; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--ss-space-l); }
.g-tile { display: block; color: inherit; text-decoration: none; background: var(--ss-surface); border: 1px solid var(--ss-border-subtle); border-radius: var(--ss-radius-l); overflow: hidden; transition: border-color var(--ss-dur-fast) var(--ss-ease), transform var(--ss-dur-fast) var(--ss-ease); }
.g-tile:hover { border-color: var(--ss-border-strong); transform: translateY(-2px); }
.g-tile.g-lead { grid-column: 1 / -1; }
@media (min-width: 1000px) { .g-tile.g-lead { grid-column: span 2; } }
.g-tile img { display: block; width: 100%; aspect-ratio: 7 / 5; object-fit: cover; background: var(--ss-surface-raised); }
.g-tile .g-text { padding: 12px 14px 14px; }
.g-tile h3 { font-family: var(--ss-font-display); font-weight: var(--ss-display-weight); font-size: 1.15rem; margin: 0 0 4px; color: var(--ss-text); }
.g-tile p { margin: 0; color: var(--ss-text-muted); font-size: var(--ss-size-caption); line-height: 1.45; }
.g-tag { display: inline-block; margin-top: 8px; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-muted); border: 1px solid var(--ss-border-subtle); border-radius: 999px; padding: 1px 8px; }
.g-foot { margin-top: var(--ss-space-xxl); padding-block: var(--ss-space-l) var(--ss-space-xxl); border-top: 1px solid var(--ss-border-subtle); color: var(--ss-text-muted); font-size: var(--ss-size-caption); }
.g-foot p { margin: 0 0 8px; max-width: 72ch; }
.g-empty { color: var(--ss-text-muted); font-size: var(--ss-size-label); }
@media (prefers-reduced-motion: reduce) { .g-tile { transition: none; } .g-tile:hover { transform: none; } }