/* Spoovio — one stylesheet for every page.
   Colours: #0B0B0B background · #262626 grid · #101010 cells · #E8E8E8 text · #4BF58E green
   Fonts (self-hosted, SIL Open Font License): Spline Sans Mono, Atkinson Hyperlegible */

@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/spline-sans-mono-400.woff2) format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/spline-sans-mono-500.woff2) format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spline-sans-mono-600.woff2) format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/spline-sans-mono-700.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-700.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:#0B0B0B;color:#E8E8E8;font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:#4BF58E}a:hover{color:#B6FFD0}
a:focus-visible,button:focus-visible{outline:2px solid #E8E8E8;outline-offset:2px}
::selection{background:#4BF58E;color:#0B0B0B}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#4BF58E;color:#0B0B0B;padding:12px 16px;font-family:'Spline Sans Mono',monospace;font-weight:700;text-decoration:none}
.skip:focus{top:16px}

/* graph paper: 96px squares, centred on the 12-column, 1152px grid */
.gp{background-color:#0B0B0B;background-image:linear-gradient(to right,#262626 1px,transparent 1px),linear-gradient(to bottom,#262626 1px,transparent 1px);background-size:96px 96px;background-position:calc(50% + 48px) 0}
.g{display:grid;grid-template-columns:repeat(12,96px);grid-auto-rows:96px;width:1152px;margin:0 auto}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.r1{grid-row:span 1}.r2{grid-row:span 2}.r3{grid-row:span 3}.r4{grid-row:span 4}.r5{grid-row:span 5}
.full{grid-column:1 / -1}
.gs{grid-column:1 / span 3}
.b{background:#101010;border-left:1px solid #262626;border-top:1px solid #262626;padding:22px 24px;min-width:0}
.acc{border-left:1px solid #0B0B0B;border-top:1px solid #0B0B0B}
.cell{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#E8E8E8;border-left:1px solid #262626;border-top:1px solid #262626;background:#101010}
a.cell:hover{background:#4BF58E;color:#0B0B0B}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h1{font-size:150px}
.h1p{font-size:120px}

/* logo: Semi Bold wordmark + blinking green bar */
.logo{display:inline-flex;align-items:baseline;font-family:'Spline Sans Mono',monospace;font-weight:600;letter-spacing:-0.02em;color:#E8E8E8;white-space:nowrap}
.bar{display:inline-block;width:.6em;height:.12em;margin-left:.12em;background:#4BF58E;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
a.cell:hover .logo,a.cell:focus-visible .logo{color:#0B0B0B}
a.cell:hover .bar,a.cell:focus-visible .bar{background:#0B0B0B}

/* filter buttons */
.fb{cursor:pointer;font:inherit;border:0;border-left:1px solid #262626;border-top:1px solid #262626;background:#101010;color:#E8E8E8;font-family:'Spline Sans Mono',monospace;font-size:13px}
.fb:hover{outline:1px solid #4BF58E;outline-offset:-1px}
.fb[aria-pressed="true"]{background:#4BF58E;color:#0B0B0B;font-weight:700}
.cnt{opacity:.65}

/* project tiles: image on top, caption strip below */
.tile{position:relative;overflow:hidden;text-decoration:none;color:#E8E8E8;display:flex;flex-direction:column;border-left:1px solid #262626;border-top:1px solid #262626;background:#101010}
.tile:hover{outline:1px solid #4BF58E;outline-offset:-1px;color:#E8E8E8}
.tile:hover .tt{color:#4BF58E}
.cover{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;color:#383838;background-color:#151515;background-image:repeating-linear-gradient(135deg,#1B1B1B 0 1px,transparent 1px 12px)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{position:relative;flex:0 0 96px;height:96px;border-top:1px solid #262626;padding:12px 16px;display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.ext{position:absolute;top:12px;right:14px;font-size:13px;color:#8A8A8A}
.tt{margin:0;padding-right:18px;font-family:'Spline Sans Mono',monospace;font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.tile.big .tt{font-size:20px;letter-spacing:-0.02em}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:'Spline Sans Mono',monospace;font-size:11px;line-height:1.35;color:#A8A8A8}
.kind{font-weight:700;color:#4BF58E}
.slider{display:contents}
.mo{display:none}
.grp{display:contents}
.gh{margin:0;display:flex;align-items:center;gap:12px;font-family:'Spline Sans Mono',monospace;font-size:18px;font-weight:700;letter-spacing:-0.02em}
.gh .sq{width:14px;height:14px;flex:0 0 auto;background:#4BF58E}
.gh .gc{margin-left:auto;font-size:12px;font-weight:400;color:#9A9A9A}
.gd{margin:0;display:flex;align-items:center;font-size:15px;color:#A8A8A8}

/* partners, join tile, contact */
.plink:hover,.plink:focus-visible{background:#4BF58E;color:#0B0B0B !important}
.plink:hover .pn,.plink:focus-visible .pn{color:#0B0B0B !important}
.join:hover,.join:focus-visible{outline:1px solid #4BF58E;outline-offset:-1px}
.mail{text-decoration:none;word-break:break-all}
.mail:hover{text-decoration:underline;text-underline-offset:8px}

/* sticky "Filters" button (left) */
.fdock{position:fixed;left:16px;top:16px;z-index:55;width:248px;animation:drop .2s ease-out}
.fbtn{width:100%;height:64px;display:flex;align-items:center;gap:12px;padding:0 18px;border:0;cursor:pointer;font-family:'Spline Sans Mono',monospace;font-size:14px;font-weight:700;text-align:left;background:#101010;color:#E8E8E8;box-shadow:inset 0 0 0 1px #4BF58E}
.fbtn[aria-expanded="true"]{background:#4BF58E;color:#0B0B0B;box-shadow:none}
.fcur{margin-left:auto;font-weight:400;font-size:12px;opacity:.8;white-space:nowrap}
.fpanel{display:flex;flex-direction:column;background:#101010;border:1px solid #262626;border-top:0}
.fopt{display:flex;justify-content:space-between;align-items:center;height:48px;padding:0 18px;border:0;border-top:1px solid #262626;cursor:pointer;font-family:'Spline Sans Mono',monospace;font-size:13px;text-align:left;background:#101010;color:#E8E8E8}
.fopt:hover{outline:1px solid #4BF58E;outline-offset:-1px}
.fopt[aria-pressed="true"]{background:#4BF58E;color:#0B0B0B;font-weight:700}

/* floating menu button (right) + full-screen menu */
.fab{position:fixed;top:16px;right:16px;z-index:60;width:64px;height:64px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:drop .2s ease-out;background:#4BF58E;color:#0B0B0B}
.fab[aria-expanded="true"]{background:#101010;color:#4BF58E;box-shadow:inset 0 0 0 1px #4BF58E}
.fab .i-close{display:none}
.fab[aria-expanded="true"] .i-close{display:block}
.fab[aria-expanded="true"] .i-open{display:none}
.fab:focus-visible{outline:2px solid #E8E8E8;outline-offset:3px}
.fab:hover .q,.fab:focus-visible .q{animation:lit 1.2s steps(1) infinite}
.fab:hover .q2,.fab:focus-visible .q2{animation-delay:.3s}
.fab:hover .q3,.fab:focus-visible .q3{animation-delay:.6s}
.fab:hover .q4,.fab:focus-visible .q4{animation-delay:.9s}
@keyframes lit{0%{fill:currentColor}25%{fill:transparent}100%{fill:transparent}}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.ov{position:fixed;inset:0;z-index:50;overflow-y:auto;background-color:#0B0B0B;background-image:linear-gradient(to right,#262626 1px,transparent 1px),linear-gradient(to bottom,#262626 1px,transparent 1px);background-size:96px 96px;background-position:calc(50% + 48px) 0;animation:fade .15s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mwrap{width:1152px;margin:0 auto;padding-bottom:96px}
.mhead{height:96px;display:flex}
.mlogo{width:288px;display:flex;align-items:center;gap:10px;padding:0 24px;background:#101010;border-left:1px solid #262626;border-top:1px solid #262626;font-size:22px}
.mlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:96px;margin-top:96px}
.mi{display:flex;align-items:center;gap:20px;padding:0 24px;min-width:0;white-space:nowrap;overflow:hidden;text-decoration:none;color:#E8E8E8;background:#101010;border-left:1px solid #262626;border-top:1px solid #262626;font-family:'Spline Sans Mono',monospace;font-size:40px;font-weight:700;letter-spacing:-0.04em}
.mi:hover{background:#4BF58E;color:#0B0B0B}
.mi .n{font-size:12px;font-weight:400;letter-spacing:0;color:#8A8A8A}
.mi:hover .n{color:#0B0B0B}
.mcta{grid-column:1 / -1;grid-row:span 2;background:#4BF58E;color:#0B0B0B;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;white-space:normal}
.mcta:hover{background:#B6FFD0}

@media (prefers-reduced-motion:reduce){
  .bar,.fab:hover .q,.fab:focus-visible .q{animation:none}
  .fab,.fdock,.ov{animation:none}
}

/* tablets and phones: 4 fluid columns, blocks stack, projects become a slider */
@media (max-width:1199px){
  .gp,.ov{background-position:16px 0}
  .g{width:auto;margin:0 16px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(96px,auto)}
  .g>*,.grp>*{grid-column:span 4;grid-row:auto}
  .g>.m1{grid-column:span 1}
  .g>.m2,.grp>.m2{grid-column:span 2}
  .g>.sp,.grp>.sp{display:none}
  .dbr{display:none}
  .b,.cell,.tile,.fb{border:1px solid #262626;margin:0 -1px -1px 0}
  .h1{font-size:clamp(56px,16vw,150px)}
  .h1p{font-size:clamp(48px,14vw,120px)}
  .cover{flex:none;aspect-ratio:3/2}
  .cap{flex:none;height:auto;min-height:96px}
  .g>.mo{display:flex}
  .g>.slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .g>.slider::-webkit-scrollbar{display:none}
  .slider>.tile{flex:0 0 82%;scroll-snap-align:start}
  .slider .cover{aspect-ratio:4/3}
  .fdock{width:auto;right:96px}
  .mwrap{width:auto;margin:0 16px}
  .mlogo{width:auto;flex:1}
  .mlist{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(72px,auto);margin-top:24px}
  .mi{font-size:28px;min-height:72px;border:1px solid #262626;margin:0 -1px -1px 0}
}

/* large touch tablets (e.g. iPad Pro landscape): keep the desktop grid, but swipe through projects */
@media (min-width:1200px) and (hover:none) and (pointer:coarse){
  .g>.mo{display:flex;grid-column:span 12}
  .g>.slider{display:flex;grid-column:span 12;grid-row:span 4;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .g>.slider::-webkit-scrollbar{display:none}
  .slider>.tile{flex:0 0 384px;height:384px;scroll-snap-align:start}
  .slider>.tile:not(:first-child){border-left:0}
}

/* tablets in portrait: two project cards visible, the next one peeking in */
@media (min-width:600px) and (max-width:1199px){
  .slider>.tile{flex:0 0 46%}
}

/* covers fade in once loaded (only when JavaScript runs, so they never stay hidden) */
.js .cover img{opacity:0;transition:opacity .35s ease}
.js .cover img.ok{opacity:1}
@media (prefers-reduced-motion:reduce){.js .cover img{transition:none}}

/* partner logos: shown as clean white marks on the dark cells, black on hover */
.plogo{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.plogo img{display:block;max-width:100%;max-height:65px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.88;transition:opacity .2s}
.plink:hover .plogo img,.plink:focus-visible .plogo img{filter:brightness(0);opacity:1}