/* Terrarum — the whole site's styles. html.wip (set by the Worker while LAUNCHED is off) = only the model, no way on to the projects. */
/* Layout: one 12-column sheet, margin 64, gutter 48 at 1512. Home = full-colour model filling the screen above the footer; Projekti = zoomable gallery. */
/* Type: Objektiv (Dalton Maag). Mk1 for everything, Mk2 for callouts. Files go in public/fonts; until they're there the system font stands in. */
@font-face{font-family:"Objektiv Mk1";src:url("/fonts/ObjektivMk1-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Objektiv Mk1";src:url("/fonts/ObjektivMk1-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Objektiv Mk1";src:url("/fonts/ObjektivMk1-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Objektiv Mk2";src:url("/fonts/ObjektivMk2-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --paper:#ffffff;
  --ink:#000000;
  --ink-2:#5c5c5c;
  --ink-3:#a3a3a3;
  --rule:#808080;
  --wash:#f2f2f0;
  --accent:#B62400;
  --font:"Objektiv Mk1",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-co:"Objektiv Mk2",var(--font);
  /* four styles only. Sizes step by 2px, line-heights sit on the 4px grid; callout = title × φ (16 × 1.618 ≈ 26) */
  --fs-sub:12px;   --lh-sub:16px;     /* footer, captions, small labels */
  --fs-body:14px;  --lh-body:20px;    /* everything else */
  --fs-title:16px; --lh-title:20px;   /* section titles, Medium */
  --fs-co:26px;    --lh-co:32px;      /* callouts + project name, Mk2 */
  --fs-s:var(--fs-body);
  --fs-n:var(--fs-body);
  --nav-t:calc(var(--u) * 32);      /* nav: space above the line */
  --nav-b:calc(var(--u) * 20);      /* nav: space below the line */
  --nav-gap:var(--nav-t);           /* nav → first content: same as page top → nav */
  --navh:calc(var(--nav-t) + var(--nav-b) + var(--lh-body));
  --u:calc(100vw / 1512);             /* 1 Figma px at the 1512 frame */
  --uy:min(var(--u), 1px);           /* vertical spacing: shrinks with the screen, never grows past the 1512 design (the type doesn't either) */
  --m:max(20px, calc(var(--u) * 64));
  --cta:max(72px, calc(var(--u) * 144));   /* space above and below the 'Vsak vrt…' line */
  --gg:calc(var(--u) * 48);            /* layout grid gutter */
  /* ONE grid for everything: 12 columns, margin 64, gutter 48 at 1512 (header, footer, index, one-column view, filter).
     Inside a full-width box: column n starts at  (n-1) * (100% - 11g)/12 + (n-1) * g  */
  --g:calc(var(--m) / 2);
  --rg:var(--m);
  --cols:2;
  --ease:cubic-bezier(.3,.7,.2,1);
  color-scheme:light;
}
/* Two themes: light (default — black on white paper, as the identity) and dark (footer switch Svetlo / Temno, remembered per browser).
   Dark = the same tokens on near-black (a hair off pure black, so photos' own blacks still read); type a soft white. */
html.theme-dark{--paper:#0b0b0b;--ink:#f0f0ec;--ink-2:#b0b0ab;--ink-3:#7a7a75;--rule:#45453f;--wash:#161616;--ph:rgba(255,255,255,.06);color-scheme:dark}
html.theme-dark ::selection{background:#B62400;color:#fff}
/* the model is rendered on white: on the dark page it's cut out along its own parts (the theme masks together), so it sits on the charcoal */
html.theme-dark .scene{-webkit-mask-image:url(img/v3/m-rastlinje.webp),url(img/v3/m-teren.webp),url(img/v3/m-voda.webp),url(img/v3/m-poti.webp),url(img/v3/m-objekti.webp);mask-image:url(img/v3/m-rastlinje.webp),url(img/v3/m-teren.webp),url(img/v3/m-voda.webp),url(img/v3/m-poti.webp),url(img/v3/m-objekti.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* the home page has no scrollbar, the projects page does: keep its space either way so nothing shifts sideways */
html,body{margin:0}
/* projects page: white by default; ?bg=black tests a black gallery */
::selection{background:#EFC9BE;color:#000}
html.proj-black ::selection{background:#B62400;color:#fff}
html.proj-black{--paper:#000000;--ink:#ffffff;--ink-2:#bdbdbd;--ink-3:#7d7d7d;--rule:#5c5c5c;--ph:rgba(255,255,255,.08)}
:root{--ph:rgba(0,0,0,.05)}
body{transition:background-color .7s var(--ease),color .7s var(--ease)}
body{transition:background-color .7s var(--ease);background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* work in progress: the bar keeps only the label naming what's under the pointer */
html.wip :is(.chips,.b-r){visibility:hidden}
.wrap{padding-inline:var(--m)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gg)}
.u:hover,.u:focus-visible{text-decoration:underline;text-underline-offset:3px}
[data-view]:not(.on){display:none!important}
html.on-home,html.on-home body{height:100%;overflow:hidden}
html.on-home .foot{display:none}
html.on-home .stage{height:100svh;min-height:0;overflow:hidden}
[hidden]{display:none!important}

/* Figma frame 1512 wide: margin 64, gutter 48, 12 columns. All home/footer values scale with the viewport width from there. */
/* ---------- header (shared) ---------- */
.top{position:relative;z-index:6;padding-top:var(--nav-t);align-items:baseline;column-gap:var(--gg);font-size:var(--fs-body);line-height:var(--lh-body)}
.top .brand{grid-column:1/5}
.top .nav{grid-column:12/13;display:flex;justify-content:flex-end;column-gap:var(--gg);text-align:right}
.top .nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.home-top{position:absolute;inset:0 0 auto 0}
.top .soon{display:none;grid-column:9/13;justify-self:end;margin:0;text-align:right}
/* work in progress: the header sits on the screen's middle line (margins as ever), and the nav gives way to a note.
   The row spans the model, so only its words take the pointer — the model's hover still works between them. */
html.wip .home-top{top:50%;transform:translateY(-50%);padding-top:0;pointer-events:none}
html.wip .home-top > *{pointer-events:auto}
html.wip .home-top .nav{display:none}
html.wip .home-top .soon{display:block}
/* the address copies on click; "Kopirano" fades in just left of it, then away */
.soon .mail{position:relative}
.soon .copied{position:absolute;right:calc(100% + 12px);top:0;white-space:nowrap;color:var(--ink-2);opacity:0;transform:translateX(4px);transition:opacity .25s var(--ease),transform .35s var(--ease);pointer-events:none}
.soon .copied.on{opacity:1;transform:none}

/* ---------- HOME ---------- */
.stage{position:relative;min-height:100svh}
.scene{position:relative;margin-inline:var(--m);aspect-ratio:1600/1344}    /* render: margin to margin, top 0. 1344 tall: the road runs on below the model, off the bottom of the screen, and 64 rows above it (≈50px at the 1512 frame), which sets the model that far down while the road still meets the top edge */
#v-home .scene{--model:.9;width:calc((100% - 2 * var(--m)) * var(--model));margin-inline:auto}   /* home: the model at 90% of margin to margin, centred */
.plate{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent)}  /* the road fades out at both ends, so it never stops at the render's edge */
.plate img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.plate .full{transition:opacity .45s var(--ease)}
.plate .t{opacity:0;transition:opacity .45s var(--ease);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#plate .full{opacity:0}#plate .full.on{opacity:1}   /* home = the filter: everything picked = full colour, unpicked themes grey clay */
.plate .t.hov{opacity:.45}
.plate .t.on{opacity:1}
.plate.hot{cursor:pointer}

.big{position:absolute;left:0;right:0;top:33.37%;margin:0;z-index:4;pointer-events:none;line-height:0}  /* frame: y 277 of 830 */
.big svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.big{transform-origin:0 0}
.big.landed{opacity:0;visibility:hidden}
.big path{transform-box:fill-box;transition:transform .7s var(--ease),opacity .45s var(--ease)}
body.bye-fade .big path{opacity:0;transform:translateY(-18%)}
.big path:nth-child(2){transition-delay:.03s}.big path:nth-child(3){transition-delay:.06s}.big path:nth-child(4){transition-delay:.09s}
.big path:nth-child(5){transition-delay:.12s}.big path:nth-child(6){transition-delay:.15s}.big path:nth-child(7){transition-delay:.18s}.big path:nth-child(8){transition-delay:.21s}
#v-home .brand{transition:none}
body.intro #v-home .brand{opacity:0;transition-delay:0s}
.label{position:absolute;left:50%;bottom:5.06%;transform:translateX(-50%);z-index:5;border:1px solid var(--ink);background:var(--paper);padding:calc(var(--u) * 5) calc(var(--u) * 11) calc(var(--u) * 6);font-size:var(--fs-n);line-height:1.2;white-space:nowrap}  /* frame: 42px above the render's bottom */
.label span{display:inline-block;transition:opacity .16s var(--ease),transform .2s var(--ease)}
.label.swap span{opacity:0;transform:translateY(3px)}
.stage-hit{position:absolute;inset:0;z-index:3;cursor:pointer}
body.intro .stage{cursor:pointer}
body:not(.intro) .stage-hit{display:none}

/* ---------- footer (shared) ---------- */
.foot{padding-block:var(--cta) calc(var(--u) * 64);align-items:start;font-size:var(--fs-sub);line-height:var(--lh-sub);column-gap:var(--gg)}
.foot .mk{grid-column:1/4}.foot .mk svg{width:calc(var(--u) * 94);min-width:64px;height:auto;display:block}
.foot .c1{grid-column:4/7}.foot .c2{grid-column:7/10}.foot .c3{grid-column:10/13}
.foot .c1,.foot .c2,.foot .c3{padding-top:0}
.foot p{margin:0}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .hint{color:var(--ink-3);padding-top:4px}
/* project page: the footer sits on the page grid like the project above it,
   lined up with the CTA and credits: mark col 1, contacts + socials col 5, © + language col 9 (= credits), Temno / Svetlo col 11 */
@media (min-width:721px){
  html.on-projekt .foot{row-gap:calc(var(--u) * 40)}
  html.on-projekt .foot .mk{grid-column:1/5;grid-row:1/3}
  html.on-projekt .foot .c1{grid-column:5/9;grid-row:1}
  html.on-projekt .foot .c2{display:contents}
  html.on-projekt .foot .so{grid-column:5/9;grid-row:2}
  html.on-projekt .foot .lang{grid-column:9/11;grid-row:2;align-self:end;padding-top:0}
  html.on-projekt .foot .mode{grid-column:11/13;grid-row:2;align-self:end;padding-top:0}
  html.on-projekt .foot .c3{grid-column:9/13;grid-row:1}
  html.on-projekt .foot .hint{display:none}
}

/* ---------- PROJEKTI: square cells, image centred inside with air around it ---------- */
.ptop{padding-bottom:var(--nav-b);margin-bottom:calc(var(--nav-gap) - var(--nav-b))}   /* the sticky band is the nav row only */
.fnote{margin:0 0 calc(var(--u) * 40);font-size:var(--fs-s);display:flex;gap:14px;align-items:baseline}
.fnote span{color:var(--ink-3)}
.fnote button{all:unset;cursor:pointer;border-bottom:1px solid var(--ink)}
.fnote button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.gallery{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gg)}  /* one gutter both ways: pictures sit on an even grid; at 3 per row they start on cols 1 · 5 · 9 like the nav */
#v-projekti .wrap{container-type:inline-size}
.ksec:last-child{padding-bottom:0}  /* wide images line up with the margins */
.cell{position:relative;display:block;min-width:0;cursor:default}
.cell img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;cursor:pointer}   /* 3:2 cover; only the picture is a link */
.ebox img{cursor:pointer}
/* hover: a hairline frame round the picture, with a little air between them */
.cell,.ebox{--hov:6px}
.cell img,.ebox{outline:1px solid transparent;outline-offset:var(--hov);transition:outline-color .2s var(--ease)}
.cell img:hover,.ebox:hover{outline-color:var(--ink)}
.cell:focus-visible{outline:1px solid var(--ink);outline-offset:-4px}
.mcap{display:none}
@media (hover:none){
  .mcap{display:block;position:absolute;left:0;right:0;top:100%;font-size:var(--fs-body);line-height:var(--lh-body);padding-top:4px}
  .mcap em{font-style:normal;color:var(--ink-2)}
}
/* home cursor: the ring logo, spelling the theme under the pointer (app.js). It replaces the label in the bar. Not on the public WIP page yet (html.wip) — preview only.
   Duotone: black letters, white (.d) where the model under them is dark — app.js decides per letter. */
.ring{position:fixed;left:0;top:0;z-index:20;pointer-events:none;width:68px;height:68px;margin:-34px 0 0 -34px;font-family:var(--font);font-size:var(--fs-sub);opacity:0;transition:opacity .2s var(--ease);will-change:transform}
.ring svg{display:block;width:100%;height:100%;overflow:visible}
.ring text{text-anchor:middle}
.ring :is(text,path){fill:#000;transition:fill .15s var(--ease)}
.ring .d{fill:#fff}
.ring .m{text-anchor:start;visibility:hidden}   /* measures a name's letters for the layout */
html.on-home .ring.on{opacity:1}
@media (hover:hover){
  html.on-home:not(.wip) :is(.stage,.plate,.plate.hot){cursor:none}
  html.on-home .b-lab{opacity:0}
}
@media (hover:none){.ring{display:none}}
html.wip .ring{display:none}
.talk{text-align:center;font-size:var(--fs-s);padding-block:var(--cta) 0;line-height:1.7}
.talk span{border-bottom:1px solid var(--ink);user-select:all}
/* zoom: control in the header (col 10) and a short notice — both draw the grid itself, no words */
.zctl{position:absolute;left:calc((100% - 11 * var(--gg)) / 12 * 8 + 8 * var(--gg));top:var(--nav-t);line-height:0}
.zctl:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.sq{display:inline-flex;gap:3px}
.sq b{width:9px;height:9px;box-sizing:border-box;border:1px solid var(--ink);display:block}
.zctl .sq{gap:0}
.zctl button{all:unset;cursor:pointer;padding:4px 1.5px;line-height:0}
.zctl button:focus-visible{outline:1px solid var(--ink);outline-offset:1px}
.sq b.on{background:var(--ink)}
.zoomtip{position:fixed;left:50%;bottom:28px;transform:translate(-50%,4px);opacity:0;pointer-events:none;background:var(--paper);padding:8px 10px;line-height:0;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:50}
.zoomtip.on{opacity:1;transform:translate(-50%,0)}

::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}


/* ---------- filter box: the home label box, docked in the projects header ---------- */
.fwrap{position:absolute;left:calc((100% - 11 * var(--gg)) / 12 * 4 + 4 * var(--gg));top:calc(var(--u) * 43);z-index:8}
.label.fbox{padding-left:0;border-left-width:0;border-color:transparent;background:transparent;position:relative;left:auto;bottom:auto;transform:none;display:block;cursor:pointer;color:var(--ink)}
.fbox::after{content:"";position:absolute;right:calc(var(--u) * 11 - 12px);top:50%;width:4px;height:4px;border-right:1px solid;border-bottom:1px solid;transform:translateY(-75%) rotate(45deg);transition:transform .2s var(--ease)}
.fbox[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.fmenu{position:absolute;left:calc(var(--u) * -11 - 1px);top:100%;margin-top:-1px;min-width:100%;background:var(--paper);border:1px solid var(--rule);display:grid;padding:calc(var(--u) * 6) 0;font-size:var(--fs-n);line-height:var(--lh-body)}
.fmenu button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:24px;white-space:nowrap;padding:calc(var(--u) * 5) calc(var(--u) * 11)}
.fmenu hr{border:0;border-top:1px solid var(--rule);margin:calc(var(--u) * 6) 0}
.foot .lang{padding-top:calc(var(--u) * 18)}
.foot .lang a[aria-current],.foot .mode a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.foot .mode{padding-top:4px}
.fmenu button i{font-style:normal;color:var(--ink-3)}
.fmenu button:hover span,.fmenu button.on span{text-decoration:underline;text-underline-offset:3px}
.fmenu button:focus-visible{outline:1px solid var(--ink);outline-offset:-3px}
/* page arrives around the box */
.foot{transition:opacity .3s}
@media (max-width:720px){ .fwrap{top:auto;bottom:-44px;left:0} }

/* hover caption: lives inside the box, pinned to the picture's bottom-left corner (1px over the edge so no image peeks out) */
.hcap{position:absolute;z-index:2;pointer-events:none;background:var(--paper);padding:7px 10px 8px;font-size:var(--fs-s);line-height:var(--lh-body);display:grid;gap:1px;opacity:0;transition:opacity .2s var(--ease);white-space:nowrap}
.hcap b{font-weight:500}
.hcap span{color:var(--ink-2);text-transform:lowercase}
.hcap sup{font-size:.62em;line-height:0;vertical-align:.55em}
.cell.on{overflow:visible;z-index:3}
.cell.on .hcap,.ebox.on .hcap{opacity:1}
.ebox{position:relative}
.ebox .hcap{left:-1px;bottom:-1px}
@media (hover:none){.hcap{display:none}}

/* info under each picture, always shown, clear of the hover frame. It says more as the pictures grow:
   6 per row nothing · 3 the name · 2 and 1 (the one-column view) the name + the year on the right */
.cell{overflow:visible}
.gcap{display:flex;justify-content:space-between;gap:var(--g);font-size:var(--fs-body);line-height:var(--lh-body);pointer-events:none}
.gcap b,.gcap span{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcap span{flex:none;color:var(--ink-3)}
.cell .gcap{margin-top:calc(var(--hov) + 8px)}
.ebox .gcap{position:absolute;left:0;right:0;top:calc(100% + var(--hov) + 8px)}
.gallery[data-cols="6"] .gcap{display:none}
.gallery[data-cols="3"] .gcap span{display:none}

/* ================= PROJECT PAGE: one 12-col grid (margin 64, gutter 48 at 1512), 14px everywhere ================= */
#pj .pj-body,#pj .pj-end .cta{font-size:var(--fs-body);line-height:var(--lh-body)}
/* end: on the project's grid like the pictures — CTA col 1, credits box col 9 (its text on the line, = footer's © column), same top line */
.pj-end{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gg);margin-top:calc(var(--uy) * 192);align-items:start}
.pj-end .cta{grid-column:1/5;margin:0;padding-top:13px}
.pj-end .cta a{border-bottom:1px solid var(--ink)}
.credits{grid-column:9/13;margin:0 0 0 -13px;border:1px solid var(--ink);padding:12px 12px 14px;display:grid;row-gap:12px}
.credits div{margin:0}.credits dt{color:var(--ink-3);font-size:var(--fs-sub);line-height:var(--lh-sub)}.credits dd{margin:0}
#v-projekt ~ .talk{display:none}
html.on-projekt .talk{display:none}
@media (max-width:720px){
  .pj-end{grid-template-columns:1fr;row-gap:16px;margin-top:96px}
  .pj-end > *{grid-column:1/-1!important}
  .credits{margin:0}
}

/* ---- project cover: under the bar, the hero and the project's name = exactly one screen ---- */
.pj-cover{height:100svh;display:flex;flex-direction:column;padding-bottom:var(--nav-gap)}   /* bar + hero = one screen; then straight into Faza 1 */
.pj-cimg{flex:1 1 auto;min-height:0;margin-inline:0}
.pj-cimg img{display:block;width:100%;height:100%;object-fit:cover}
.pj-title{flex:none;margin:calc(var(--u) * 24) 0 0;font-family:var(--font-co);font-weight:var(--fw-co, 400);font-size:var(--fs-co);line-height:var(--lh-co)}   /* the project's name, big, under the hero */
.fbx{display:inline-block;margin:0;border:1px solid var(--ink);padding:2px 8px;font-size:var(--fs-body);line-height:var(--lh-body);white-space:nowrap}
@media (max-width:720px){
  .pj-cover{height:auto}.pj-cimg{aspect-ratio:4/3}
}

/* ---------- EDITORIAL (1 column): image column shifted left, sparse notes on the right; image+note block sits optically centred ---------- */
.edit{display:none}
body.is-edit .gallery{display:none}
body.is-edit .edit{display:block}
body.is-edit .inav,body.is-index .inav{display:flex!important}
.eg + .eg{margin-top:calc(var(--u) * 201)}
.ei{margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gg);align-items:start}
.ei > .ebox{grid-column:1/9;justify-self:end;margin-right:calc(var(--u) * 782 * (1 - min(1, var(--ar))) / 2)}
.ei figcaption{grid-column:9/13}
.ei + .ei{margin-top:calc(var(--u) * 105)}
.ebox{display:block;width:calc(var(--u) * 782 * min(1, var(--ar)));aspect-ratio:var(--ar);background:var(--ph);cursor:pointer}
.ebox img{width:100%;height:100%;object-fit:cover;display:block}
.ei figcaption{font-size:var(--fs-body);line-height:var(--lh-body);margin-top:calc(var(--u) * -4);text-wrap:pretty}
@media (max-width:720px){
  .ei{margin:0;grid-template-columns:1fr;row-gap:10px}
  .ei > .ebox,.ei figcaption{grid-column:1;justify-self:start;margin-right:0}
  .ebox{width:calc(100% * min(1, var(--ar)))}
  .ei figcaption{font-size:var(--fs-body);margin-top:0}
  .ei + .ei{margin-top:28px}.eg + .eg{margin-top:64px}
}

/* ---------- INDEX by phase. 1512 frame: rule 64–1208 (cols 1–5), box = col 6, year on the page's centre axis (same as the filter) ---------- */
.index{display:none}
body.is-index .gallery{display:none}
body.is-index .index{display:block}
/* phase col 1 · photo on hover cols 2–6 · name col 7 (under the filter, = footer col 3) · place col 10 (= footer col 4) · year to the right margin */
.index{position:relative;padding-top:calc(var(--u) * 6 - 17px);font-size:var(--fs-body);line-height:var(--lh-body)}
.ksec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gg);border-top:1px solid var(--rule);padding:6px 0 calc(var(--u) * 32)}
.ksec h3{margin:0;font:inherit;grid-column:1/5}
.ksec ul{list-style:none;margin:0;padding:0;grid-column:5/13}
.row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gg);cursor:pointer}
.row span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s var(--ease)}
.row .kn{grid-column:1/5}
.row .kl{grid-column:5/8;color:var(--ink-3)}
.row .kf{grid-column:8/9;text-align:right;font-variant-numeric:tabular-nums}
.index.hovering .row:not(.on) span{opacity:.3}
.row:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.kprev{position:absolute;left:calc((100% - 11 * var(--gg)) / 12 * 1 + 1 * var(--gg));width:calc((100% - 11 * var(--gg)) / 12 * 3 + 2 * var(--gg));margin:0;pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
.kprev.on{opacity:1}
.kprev img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin-top:5px}   /* same 3:2 cover as the grid */
@media (max-width:720px){
  .index{padding-top:24px}
  .kprev{display:none}
  .ksec{grid-template-columns:1fr;row-gap:8px;padding-bottom:32px}
  .ksec h3,.ksec ul{grid-column:1}
  .row{grid-template-columns:1fr auto}.row .kl{display:none}.row .kn{grid-column:1}.row .kf{grid-column:2}
}

@media (max-width:720px){
  .top :is(.nav,.soon){grid-column:6/13}
  .foot{row-gap:20px}
  .foot .mk{grid-column:1/-1}
  .foot .c1,.foot .c2{grid-column:span 6}
  .foot .c3{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*,::view-transition-group(*){transition:none!important;animation:none!important}}


/* ---- bar: at the bottom of the home screen; on the way down it rides up with it until it reaches the top, where it stays as the projects' nav
   (the projects page has no other header). Left: the picked themes as boxes · centre: the model's name (home) / the view switch (projects) · right: how many ---- */
:root{--barh:42px;--barb:calc(var(--u) * 32);--chiph:26px;
  --bpad:calc((var(--barh) - 2px - var(--chiph)) / 2);   /* 7px: the same air left, right, above and below the boxes */
  --bout:calc(var(--bpad) + 1px)}                        /* the bar's content sits on the columns' edges; padding + outline stand out in the margin */
.bar{position:fixed;left:calc(var(--m) - var(--bout));right:calc(var(--m) - var(--bout));top:var(--barb);z-index:40;height:var(--barh);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--gg);padding:0 var(--bpad);border:1px solid transparent;background:var(--paper);font-size:var(--fs-body);line-height:var(--lh-body)}
html.on-home .bar{top:auto;bottom:var(--barb)}
html.bar-pj .bar{z-index:70}   /* over the gallery (lightbox) too */
.bar{transition:box-shadow .45s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
:root{--band:var(--paper)}   /* the page's paper, for the paper outside the project frame */
/* docked at the top of the projects: only the bar itself is filled — pictures show all around it */
#v-projekti > .wrap{padding-top:calc(var(--barb) + var(--barh) + var(--nav-gap))}   /* the projects start below the bar */
.bar .k{color:var(--ink-3);white-space:nowrap}
.b-l{display:grid;align-items:center;min-width:0}
.b-l > *,.b-e > *{grid-area:1/1;transition:opacity .3s var(--ease),visibility .3s}
.b-e{display:grid;justify-items:end;align-items:center}
/* project name (+ the phase you're in): boxes like the filters, in the same spot — one box hands over to the other */
.b-x{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--chiph);height:var(--chiph)}   /* the × centred in a box-sized cell: 7px air top, bottom and right — mirrors the name box on the left */
.b-x .plus{transform:rotate(45deg)}
.b-e > .b-r,.b-e > .b-x{grid-area:1/1;transition:opacity .3s var(--ease),visibility .3s}   /* after their all:unset — both in the one cell */
/* open project: the bar has no bottom — its bottom line is the frame's, which sweeps down to the screen's bottom */
/* the bar is see-through everywhere (model, projects, open project) — no fill, no outline of its own (the frame draws the whole box, top edge included),
   pictures pass right under it. Its type and lines are white + difference: black on paper, inverted over photos.
   No fade into it: the blend switches on at once, so a fill still fading out would show inverted — a black flash. */
html .bar{transition:translate .45s var(--ease);--paper:transparent;--ink:#fff;--ink-3:#fff;color:#fff;background:transparent;border-color:transparent;box-shadow:none;clip-path:none;mix-blend-mode:difference}
.bar-over{position:fixed;left:calc(var(--m) - var(--bout));right:calc(var(--m) - var(--bout));top:var(--barb);z-index:71;height:var(--barh);display:flex;align-items:center;padding-left:var(--bpad);border:1px solid transparent;pointer-events:none;font-size:var(--fs-body);line-height:var(--lh-body)}
.bar-over .b-l{flex:1;min-width:0}
html.on-home .bar-over{top:auto;bottom:var(--barb)}   /* sits with the bar at the bottom of the model */
.bar-over .chip{background:var(--paper);color:var(--ink);border-color:var(--ink);pointer-events:auto}   /* filled with paper (white / charcoal), whatever is under them */
/* semi-sticky: scrolling down slides the bar (and its boxes) up off the screen, scrolling up brings it back.
   On `translate`, not `transform`, so it never fights the slides' per-frame inline transforms */
.bar-over{transition:translate .45s var(--ease)}
html.nav-hide :is(.bar,.bar-over){translate:0 calc(-1 * (var(--barb) + var(--barh) + 2px))}
.b-x:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* project open (html.bar-pj): filters go, view squares → case study / gallery, count → × */
html.bar-pj .chips,html.bar-pj .bar .zctl:not(.pz),html.bar-pj .b-r,
html:not(.bar-pj) .bar .pz,html:not(.bar-pj) .b-x{opacity:0;visibility:hidden}
/* the frame: same width as the bar, hanging from it; at rest its bottom edge sits just under the screen */
/* the frame: the project's box, from the bar's top edge down past the screen's bottom. Nothing outside it: pictures run on under the margins. */
.frame{position:fixed;left:calc(var(--m) - var(--bout));right:calc(var(--m) - var(--bout));top:var(--barb);bottom:-1px;z-index:41;border:1px solid transparent;pointer-events:none;display:none}
/* the page's end: scrolled to the bottom, the frame closes under the footer, as far from the page's bottom as it hangs from the top
   (--fend, set while scrolling: where that line is, from the screen's bottom). Animated only as the gallery opens / closes. */
.frame{bottom:max(-1px, var(--fend, -1px))}
html.lb-anim .frame{transition:bottom .45s cubic-bezier(.33,0,.67,1)}
html.lb-open .frame{bottom:max(var(--barb), var(--fend, -1px))}   /* gallery: the whole box on screen — same margin at the bottom as at the top, the count inside it */
html.on-projekt .frame{display:block}
html.bar-pj .frame{z-index:69}   /* under the see-through bar, over the page and the gallery */
.chips{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.chips{margin-left:-9px}   /* the first box's words start on the columns' edge; its padding + outline (8 + 1px) stand out in the margin */
.chips::-webkit-scrollbar{display:none}
.chip{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:8px;height:var(--chiph);padding:0 8px;border:1px solid var(--ink);white-space:nowrap}
button.chip,html:not(.bar-p) .chip{cursor:pointer}   /* on the model every box leads to the projects */
.chip i{font-style:normal;color:var(--ink-3)}
.chip .x{transform:rotate(45deg)}.chip .x::before,.chip .x::after{background:var(--ink-3)}   /* the × = the + turned, like the project's × */
.chip:focus-visible{outline:1px solid var(--ink);outline-offset:-4px}
.chip.add{width:var(--chiph);padding:0;justify-content:center;transition:opacity .3s var(--ease),visibility .3s}
html:not(.bar-p) .chip.add{opacity:0;visibility:hidden}   /* on the model you add by clicking the model; keeps its place so nothing shifts */
.plus{position:relative;width:11px;height:11px}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink)}
.plus::before{left:0;right:0;top:5px;height:1px}
.plus::after{top:0;bottom:0;left:5px;width:1px}
.b-c{display:grid;justify-items:center;align-items:center}
.b-c > *{grid-area:1/1;transition:opacity .3s var(--ease),visibility .3s}
.bar .zctl{position:static}
/* the view switch in the bar: ONE geometry for both kinds — 6px tall cells on a 2px gap, 62px across (= the project's two 30px bars).
   The grid views' 4 cells + the index (2 cells wide) split in half exactly where the case study / gallery bars meet,
   so when a project opens the gaps inside each half close and the cells merge into the two bars (which fade in over them). */
.bar .zctl .sq{gap:0}
.bar .zctl button{padding:4px 0}
.bar .zctl b{height:6px;width:calc(26px / 3);margin-right:2px;transition:width .3s var(--ease),margin .3s var(--ease)}
.bar .zctl button:last-child b{margin-right:0}
.bar .zctl b.w{width:calc(52px / 3 + 2px)}
.bar .pz b{width:30px}
html.bar-pj .bar .zg b{width:10px;margin-right:0}
html.bar-pj .bar .zg button:nth-child(3) b{margin-right:2px}   /* the half-way split stays */
html.bar-pj .bar .zg b.w{width:20px}
html:not(.bar-p) .bar .zctl,html.bar-p .b-lab{opacity:0;visibility:hidden}
.b-lab{white-space:nowrap}
.b-lab span{display:inline-block;transition:opacity .16s var(--ease),transform .2s var(--ease)}
.b-lab.swap span{opacity:0;transform:translateY(3px)}
.b-r{all:unset;justify-self:end;display:flex;align-items:center;justify-content:center;width:var(--chiph);height:var(--chiph);cursor:pointer}   /* just the arrow, in the same box-sized cell as the project's × (they hand over in place): ↓ to the projects, ↑ back to the model */
.b-r i{display:block;line-height:0;transition:transform .45s var(--ease)}   /* drawn arrow: 11px, 1px lines — same size and weight as the + and × */
html.bar-p .b-r i{transform:rotate(180deg)}
.b-r:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (max-width:720px){
  .bar .k{display:none}
  html.on-home .b-c{display:none}
}
/* view selector: index square is two squares wide */
.sq b.w{width:21px}                /* index = two squares + the gap between them */
/* ---- project page: case study / gallery switch ---- */
.pz .sq{gap:2px}
.pz .sq b{width:30px;height:6px}    /* two bars: case study · gallery */
.pi img[data-k],.pj-cimg img{cursor:pointer}   /* opens the gallery */
.lb-stage[data-cur="l"],.lb-stage[data-cur="r"]{cursor:none}   /* the ←/→ arrow (.lb-cur) is the cursor */
.lb-stage.drag{cursor:grabbing}
/* ---- gallery: the cover, browsable. Same nav, pictures inside project columns 2–11, sliding left/right ---- */
.lbox{position:fixed;inset:0;z-index:60;overscroll-behavior:none;background:var(--paper);display:flex;flex-direction:column;opacity:0;transition:opacity .5s var(--ease);}
.lbox.on{opacity:1}
.lb-top{flex:none;height:calc(var(--barb) + var(--barh))}   /* the bar sits over this */
.lbox{container-type:inline-size;--in:calc((100cqw - 2 * var(--m) - 11 * var(--gg)) / 12 + var(--gg))}   /* the box's own width, like the page's (100vw would count the scrollbar and come out a few px narrower) */
html.lb-open{overflow:hidden}
.lb-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.lb-cur{position:fixed;left:0;top:0;z-index:2;pointer-events:none;color:#fff;mix-blend-mode:difference;opacity:0;font-size:var(--fs-title);line-height:1;white-space:nowrap}   /* the type's own arrow, centred on the pointer */
.lbox:has(.lb-stage[data-cur="l"]) .lb-cur,.lbox:has(.lb-stage[data-cur="r"]) .lb-cur{opacity:1}
.lb-track{position:absolute;inset:0;display:flex;transition:transform .7s cubic-bezier(.65,0,.25,1);will-change:transform}
.lb-s{flex:0 0 100%;height:100%;margin:0;padding:var(--nav-b) calc(var(--m) + var(--in))}   /* as large as fits, inside the frame on the project's columns */
.lb-s img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.lb-bot{display:flex;justify-content:center;align-items:center;padding:var(--nav-b) var(--m) calc(var(--barb) + var(--nav-b));line-height:var(--lh-body)}   /* just the count, centred; mirrors the nav */
.lb-n{color:var(--ink);font-size:var(--fs-sub);line-height:var(--lh-sub);font-variant-numeric:tabular-nums}
.lb-fly{position:fixed;z-index:61;overflow:hidden;pointer-events:none;margin:0}
.lb-fly img{display:block;width:100%;height:100%;object-fit:cover}
.lb-hide{visibility:hidden}

/* ---------- PROJECT: on the page grid (the one cmd + 0 shows) ----------
   12 columns, margin --m, gutter --gg — the same lines as the nav, the projects and the footer. An item's col / span are page columns,
   so every picture edge and every line of text starts on a column; nothing is centred between them. */
.pj-cover{padding-top:calc(var(--barb) + var(--barh) + var(--nav-gap))}   /* under the bar, same gap as the projects */
/* --gap: the space above, in 1512 px, set per block / row by the Worker (src/sanity.ts → GAP) */
.ps{margin-top:calc(var(--uy) * var(--gap))}
.pr{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:var(--gg);margin-top:calc(var(--uy) * var(--gap))}
.pi{grid-row:1;min-width:0}
.pi.stack{display:flex;flex-direction:column;gap:calc(var(--uy) * 48)}   /* items in the same columns, one under the other */
.pi .pj-fig{margin:0}
.pi img{display:block;width:100%;height:auto;object-fit:cover}
.pi .il{margin:0 0 8px;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:500}
.pi figcaption{margin-top:8px;color:var(--ink);font-size:var(--fs-sub);line-height:var(--lh-sub)}
/* ?co=light: test callouts in Mk1 Light instead of Mk2 Regular */
html.co-light{--font-co:var(--font);--fw-co:300}
.pi .co{margin:0;font-family:var(--font-co);font-weight:var(--fw-co, 400);font-size:var(--fs-co);line-height:var(--lh-co);text-wrap:pretty}
.pi .tx h3{margin:0 0 12px;font:inherit;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:500}
.pi .tx p{margin:0 0 12px}.pi .tx p:last-child{margin-bottom:0}
.pi .fbx{display:inline-block;margin-left:-9px}   /* the phase's words on the column line, its padding + outline in the gutter (like the bar's boxes) */
/* bleed: the picture runs from screen edge to screen edge; its label / caption stay on the column line */
.bl-full{margin-inline:calc(var(--m) * -1)}
.bl-full :is(.il,figcaption){padding-left:var(--m)}
/* stat: a number in the callout style over a short label */
.pi-stat .sv{margin:0;font-family:var(--font-co);font-weight:var(--fw-co, 400);font-size:var(--fs-co);line-height:var(--lh-co)}
.pi-stat .sl{margin:4px 0 0;color:var(--ink-3)}
.pi-stat{border-top:1px solid var(--ink);padding-top:12px}
/* quote: the client's words, callout style, who said it underneath */
.pi .qt{margin:0}
.pi .qt footer{margin-top:16px;color:var(--ink-3)}
/* sticky: the text stays in view while the pictures beside it scroll past */
.pi.sticky{position:sticky;top:calc(var(--barb) + var(--barh) + var(--nav-gap))}
@media (max-width:720px){
  .ps,.pr{margin-top:calc(var(--gap) * .5px)}   /* half the desktop rhythm: 72 between blocks, 96 before a phase, 24 after one */
  .pr{display:flex;flex-direction:column;gap:16px}
  .pi{align-self:stretch!important}   /* stacked: every item takes the full width */
  .pi.stack{gap:16px}
  .pi.sticky{position:static}
}

/* layout grid overlay (cmd / ctrl + 0) */
.gridov{position:fixed;inset:0;z-index:200;pointer-events:none;display:none}
.gridov.on{display:grid}
.gridov i{background:rgba(255,0,0,.2)}