/* SCCO-scaffold design test — shared stylesheet
   One type size (14px/1.2), one 5-column grid, no rules, no shadows. */

:root {
  --paper:#FFFFFF; --ink:#000000; --rest:#9C9C9C; --dim:#6A6A6A;
  --fs:14px; --lh:1.2; --gut:10px; --unit:16.8px;
  --grid:32% 17% 13% 20% 1fr;
}
:root[data-theme="dark"] {
  --paper:#1B1B1B; --ink:#ECECEC; --rest:#6E6E6E; --dim:#9E9E9E;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--paper); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body {
  background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  font-size:var(--fs); line-height:var(--lh); font-weight:700;
  -webkit-font-smoothing:antialiased;
  padding:var(--gut) var(--gut) calc(var(--unit)*8);
  transition:background .25s, color .25s;
}

/* the one grid every band shares */
.grid { display:grid; grid-template-columns:var(--grid); column-gap:20px; }
.c--year { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* content sits above the hover image */
.masthead, .index, .about, .site-footer { position:relative; z-index:1; }

/* ---- masthead ---- */
.masthead {
  position:relative;
  margin-bottom:calc(var(--unit)*2);
}
.masthead .statement { max-width:34em; }
.masthead .statement a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.masthead .statement a:hover { color:var(--dim); }
.masthead .lead { color:var(--dim); margin-top:var(--unit); }
.masthead .meta { grid-column:5; text-align:right; color:var(--ink); white-space:nowrap; }
.themeswitch {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:var(--rest); cursor:pointer; transition:color .12s;
}
.themeswitch:hover, .themeswitch:focus-visible { color:var(--ink); outline:none; }
.themeswitch__icon { display:block; flex:none; transition:transform .25s ease; }
:root[data-theme="dark"] .themeswitch__icon { transform:rotate(180deg); }
.nav a, .nav button {
  color:var(--rest); text-decoration:none; background:none; border:0;
  font:inherit; cursor:pointer; display:block; padding:0; text-align:left;
}
.nav a:hover, .nav button:hover { color:var(--ink); }
.nav a[aria-current="page"] { color:var(--ink); }

/* The full statement scrolls with the page. Once it has left the viewport,
   JS reveals this compact, opaque control bar so content never shows through
   the navigation. */
.masthead-compact {
  position:fixed; top:0; right:0; left:0; z-index:10;
  padding:var(--gut);
  background:var(--paper);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, background .25s;
}
.masthead-compact[data-on="true"] {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.masthead-compact .nav {
  grid-column:2; display:flex; gap:var(--unit);
}
.masthead-compact .nav a { display:inline; }
.masthead-compact .meta {
  grid-column:5; text-align:right; white-space:nowrap;
}

/* ---- type filter: a menu inside the Type column, not a bar across the page ---- */
.filter { position:relative; z-index:6; }
.filter__toggle {
  background:none; border:0; padding:0; margin:0; font:inherit;
  color:var(--ink); cursor:pointer; text-align:left;
}
.filter__toggle::after { content:" \2193"; color:var(--rest); }   /* down arrow */
.filter__toggle[aria-expanded="true"]::after { content:" \2191"; }
.filter__menu {
  position:absolute; top:calc(100% + 8px); left:0; z-index:5;
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  width:100%; min-width:0;          /* exactly the Type column */
  padding:7px 9px;                  /* text sits close to the edge */
  background:var(--ink); color:var(--paper);   /* inverted panel, square corners */
}
.filter__menu[hidden] { display:none; }
.filter__menu button {
  background:none; border:0; padding:0; margin:0; font:inherit; text-align:left;
  color:inherit; opacity:.55; cursor:pointer; transition:opacity .12s;
  white-space:normal; line-height:1.2;   /* wrap inside the column rather than overflow */
}
.filter__menu button:hover,
.filter__menu button:focus-visible { opacity:1; outline:none; }
.filter__menu button[aria-pressed="true"] { opacity:1; }
.row[hidden] { display:none; }

/* ---- index tables ---- */
.index { margin-bottom:calc(var(--unit)*3); }
.index__head { color:var(--ink); font-weight:700; margin-bottom:var(--unit); }
.index[data-reveal] .row { animation:reveal .5s both; animation-delay:calc(var(--i) * 28ms); }
@keyframes reveal { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .index[data-reveal] .row { animation:none } }

.row__head {
  display:grid; grid-template-columns:var(--grid); column-gap:20px;
  width:100%; background:none; border:0; padding:0; margin:0;
  font:inherit; font-weight:700; color:var(--rest); text-align:left; cursor:pointer;
  transition:color .12s;
}
.row--static .row__head { cursor:default; }
.row--flat .row__head { cursor:default; }   /* no write-up, but still hoverable */
.row--static .row__head:hover { color:var(--rest); }
.row__head:hover, .row__head:focus-visible { color:var(--ink); outline:none; }
.row[data-open="true"] .row__head { color:var(--ink); }
.row__head .c { display:block; }

/* ---- hover image: fixed, viewport-centred, behind the text ---- */
.hoverlayer {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .55s cubic-bezier(.4, 0, .2, 1);
}
.hoverlayer[data-on="true"] { opacity:1; }
.hoverlayer img {
  width:min(32vw, 430px); aspect-ratio:4 / 5; object-fit:cover; display:block;
}
.hoverlayer img.hoverimg--salt {
  width:min(46vw, 520px); height:auto; max-height:82vh;
  aspect-ratio:auto; object-fit:contain; background:transparent;
}
.hoverlayer img.hoverimg--atlas {
  width:min(60vw, 760px); height:auto; max-height:74vh;
  aspect-ratio:auto; object-fit:contain; background:transparent;
}
.hoverlayer img.hoverimg--verse {
  width:auto; height:min(40vw, 538px); max-width:88vw; max-height:74vh;
  aspect-ratio:auto; object-fit:contain; background:transparent;
}
@media (hover:none) { .hoverlayer { display:none; } }

/* ---- expanded detail ---- */
.row__body[hidden] { display:none; }
.prose { grid-column:1 / 5; max-width:58em; padding:var(--unit) 0 calc(var(--unit)*2); color:var(--ink); }
.prose p { margin-bottom:var(--unit); }
.prose p:last-child { margin-bottom:0; }
.prose ul { list-style:none; margin-top:var(--unit); }
.prose li { position:relative; padding-left:1em; }
.prose li::before { content:"–"; position:absolute; left:0; }
.prose li + li { margin-top:calc(var(--unit) / 2); }
.prose hr, .prose .artwork-divider {
  border:0; border-top:1px solid currentColor; width:200px;
  margin:calc(var(--unit)*1.5) 0 var(--unit); opacity:.4;
}
.prose a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--dim); }
.prose .artwork-label { color:var(--ink); }
.prose .artwork-credit { color:var(--dim); }

/* ---- about page ---- */
.about { margin-bottom:calc(var(--unit)*3); }
.about__bio { grid-column:1 / 2; }
.about__bio p { margin-bottom:var(--unit); }
.about__bio p:last-child { margin-bottom:0; }
.portrait {
  width:100%; max-width:100%; height:auto;
  filter:grayscale(1); display:block; margin-top:calc(var(--unit)*2);
}
.about__colA { grid-column:2 / 4; }
.about__colB { grid-column:4 / 6; }
.refblock { margin-bottom:calc(var(--unit)*2); }
.refblock:last-child { margin-bottom:0; }
.refblock h2 { font:inherit; color:var(--ink); font-weight:700; margin-bottom:var(--unit); }
.refblock ul { list-style:none; }
.refblock li { color:var(--dim); }
/* half a line between items: enough to separate wrapped entries, not airy */
.refblock li + li { margin-top:calc(var(--unit) / 2); }
.refblock a { color:inherit; text-decoration:none; }
.refblock a:hover { color:var(--ink); }

/* ---- per-entry gallery, under the description ---- */
.gallery {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));   /* a lone image fills the width */
  gap:var(--unit); max-width:58em; padding-bottom:calc(var(--unit)*2);
}
.gallery img { max-width:100%; height:auto; display:block; }   /* never upscale past native */
.gallery video { width:100%; height:auto; display:block; background:#000; }
.gallery { align-items:start; }

/* Toy Factory keeps the existing still as its lead image, then presents the
   three supplied campaign films as one horizontal set. */
.gallery--toy-factory {
  max-width:none;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.gallery--toy-factory > img { grid-column:1 / -1; max-width:58em; }

/* The compact Elm identity tile is hover-only; the expanded entry keeps the
   wide system overview as its single full-width visual. */
.gallery--elm-careers {
  max-width:none;
  grid-template-columns:1fr;
}
.gallery--elm-careers > img { width:100%; }

/* SALT is shown as four quiet, full-screen product captures: setup, profile,
   library and one dark-mode log view. */
.gallery--salt-fitness {
  max-width:none;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.gallery--salt-fitness > img { width:100%; }

/* A guide board is a reference sheet, not a photograph — it carries set type
   and hex values that have to stay readable, so it takes the whole gallery
   width instead of sharing a row with another image. Matched on both
   attributes because the gallery swaps data-src to src the first time an
   entry is opened. */
.gallery img[data-src*="/board-"],
.gallery img[src*="/board-"] { grid-column:1 / -1; }
.gallery:has(img[data-src*="/board-"]),
.gallery:has(img[src*="/board-"]) { max-width:none; }

/* ---- footer ---- */
.site-footer { margin-top:calc(var(--unit)*3); color:var(--rest); }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { color:var(--ink); }

@media (max-width:800px) {
  /* SCCO mobile: two columns only — name and year */
  .grid, .row__head { grid-template-columns:1fr auto; column-gap:16px; }

  /* masthead stacks, switch stays top-right */
  .masthead .statement { grid-column:1 / 3; }
  .masthead .nav { grid-column:1 / 2; margin-top:var(--unit); }
  .masthead .meta { grid-column:2 / 3; margin-top:var(--unit); text-align:right; }

  .masthead-compact .nav {
    grid-column:1 / 2; display:flex; gap:var(--unit); margin:0;
  }
  .masthead-compact .meta {
    grid-column:2 / 3; margin:0; text-align:right;
  }

  /* drop role, type and location — name and year carry the row */
  .row__head .c--role,
  .row__head .c--type,
  .row__head .c--loc { display:none; }
  /* Keep the Type filter usable in the two-column layout. It takes the first
     header column, while Year stays on the right. Without this, a filter chosen
     before narrowing the viewport could remain active with no way to clear it. */
  .index:not(.index--founding) .index__head > span:nth-child(1),
  .index:not(.index--founding) .index__head > span:nth-child(2),
  .index:not(.index--founding) .index__head > span:nth-child(4) { display:none; }
  .index:not(.index--founding) .index__head > span:nth-child(3) { display:block; }
  /* the founding block names itself instead of repeating "Organisation" */
  .index--founding .index__head > span:nth-child(1) { display:inline; }
  .index--founding .index__head > span:nth-child(2),
  .index--founding .index__head > span:nth-child(3),
  .index--founding .index__head > span:nth-child(4) { display:none; }

  /* no hover image on touch */
  .hoverlayer { display:none; }

  .prose { grid-column:1 / 3; }
  .about__bio, .about__colA, .about__colB { grid-column:1 / 3; margin-bottom:calc(var(--unit)*2); }
  .portrait { max-width:340px; }
  .gallery--toy-factory { grid-template-columns:1fr; }
  .gallery--elm-careers { grid-template-columns:1fr; }
  .gallery--salt-fitness { grid-template-columns:1fr; }
}