/* Shared base for the Folio 2025-26 versions: tokens, tiles, viewer, index. Each version sets its own colours. */
:root {
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --g: max(16px, 2.6vw);
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --bg: #0c0c0c; --fg: #f3f2ee; --dim: rgba(243, 242, 238, 0.56); --rule: rgba(243, 242, 238, 0.16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.lock { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.mono { font: 400 11.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.dim { color: var(--dim); }
.logomark { width: 13px; height: 16px; fill: currentColor; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 14px var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tiles: positioned by Folio.grid(); images are always whole */
.tiles { position: relative; }
.tile { position: absolute; display: block; overflow: hidden; border-radius: 4px; background: rgba(127, 127, 127, 0.12); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.9s var(--ease); }
.tile:hover img { transform: scale(1.035); }
.tile__site { position: absolute; left: 8px; bottom: 8px; display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px;
  background: rgba(12, 12, 12, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f3f2ee; font: 500 12.5px var(--sans); }
.tile__site i { font-style: normal; transition: transform 0.4s var(--ease); }
.tile:hover .tile__site i { transform: translate(2px, -2px); }

/* pill button */
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 99px; border: 1px solid currentColor; font: 500 15px var(--sans); text-decoration: none; transition: background 0.3s, color 0.3s; }
.pill--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill:hover { background: var(--fg); color: var(--bg); }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 8, 0.97); color: #f3f2ee; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transition: opacity 0.3s var(--ease); }
.viewer.open { opacity: 1; }
.viewer[hidden] { display: none; }
.viewer__top, .viewer__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--g) 12px; }
.viewer__nav { padding: 12px var(--g) calc(16px + env(safe-area-inset-bottom, 0px)); }
.viewer__t b { font-weight: 500; } .viewer__t span { opacity: 0.55; margin-left: 10px; font-size: 14px; }
.viewer__fig { display: grid; place-items: center; min-height: 0; padding: 0 var(--g); }
.viewer__fig img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 3px; }
.viewer__x, .viewer__b { min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid rgba(243, 242, 238, 0.4); border-radius: 99px; }
.viewer__b + .viewer__b { margin-left: 8px; }
.viewer__n { font: 400 12px var(--mono); opacity: 0.7; }

/* index */
.index { position: fixed; inset: 0; z-index: 80; background: var(--bg); color: var(--fg); overflow-y: auto; opacity: 0; transition: opacity 0.3s var(--ease); }
.index.open { opacity: 1; }
.index[hidden] { display: none; }
.index__top { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--g) 14px; background: var(--bg);
  font: 400 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.index__x { min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 99px; text-transform: none; letter-spacing: 0; font: 500 14px var(--sans); }
.index ol { padding: 2vh var(--g) 6vh; }
.index li button { width: 100%; display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 1.6vh 0; border-bottom: 1px solid var(--rule); text-align: left; transition: padding 0.4s var(--ease); }
.index li button:hover { padding-left: 1vw; }
.index__n { font: 400 12px var(--mono); color: var(--dim); }
.index__t { font: 500 clamp(28px, 4.4vw, 64px)/1 var(--sans); letter-spacing: -0.035em; }
.index__d { font: 400 12px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; }
/* hover preview: one image of the project on the right (only where there is a mouse and room for it) */
.index__pv { display: none; }
@media (hover: hover) and (min-width: 1000px) {
  .index ol { padding-right: calc(36vw + var(--g)); }
  .index__pv { display: block; position: fixed; right: var(--g); top: 50%; width: 32vw; height: 64vh; transform: translateY(-46%) scale(0.96); opacity: 0;
    transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
  .index__pv.on { opacity: 1; transform: translateY(-50%) scale(1); }
  .index__pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s var(--ease); }
  .index__pv img.on { opacity: 1; }
  .index li button:hover .index__t { font-style: normal; transform: translateX(0.12em); }
  .index__t { transition: transform 0.5s var(--ease); }
}
@media (max-width: 700px) { .index li button { grid-template-columns: 3em minmax(0, 1fr); } .index__d { grid-column: 2; text-align: left; } }

/* close (shared copy, from the deck) */
.close__h { font: 600 clamp(56px, 11vw, 200px)/0.88 var(--sans); letter-spacing: -0.055em; text-transform: uppercase; }
.close__s { font: 500 clamp(20px, 2vw, 30px)/1.25 var(--sans); letter-spacing: -0.02em; max-width: 26ch; }
.close__cta { display: flex; flex-wrap: wrap; gap: 10px; }