/* fonts: self-hosted, Latin subsets */
@font-face{font-family:"Golos Text";src:url(/fonts/golos-text.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(/fonts/spectral-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(/fonts/spectral-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
:root{
  --wall:#efebe4;   /* the one wall: page background everywhere, no section changes colour */
  --mount:#e5e0d6;  /* the plate each work hangs on, one step down from the wall */
  --ink:#1b1a17;    /* text, links, the wordmark cube; the only accent */
  --gray:#5f5a51;   /* secondary text, 6.1:1 on the wall */
  --line:#d9d3c7;   /* hairlines: footer rule, quick-pick underline at rest */
  --edge:#857e71;   /* form field underline at rest, 3.4:1 so the field is findable */
  --err:#9b2c1a;    /* form errors only, never decoration */
  --screen:#0c0c0e; /* empty screen behind a product still while it loads */
  --whisper:0 1px 2px rgba(40,32,20,.07),0 10px 24px -14px rgba(40,32,20,.22); /* the only shadow */
  --serif:"Spectral",Georgia,serif;--sans:"Golos Text",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);
  --m:48px;--g:24px;--block:160px;--t3:20px;--t4:32px;--t5:64px;--s:min(30vw,380px);color-scheme:light}
@media (max-width:1023px){:root{--m:24px;--s:min(40vw,320px)}}
@media (max-width:767px){:root{--m:16px;--g:16px;--block:96px;--t3:18px;--t4:28px;--t5:40px;--s:min(52vw,240px)}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--wall);color:var(--ink);-webkit-text-size-adjust:100%;scrollbar-color:var(--gray) var(--wall);scrollbar-width:thin}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--wall);font:400 15px/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overflow-x:clip;caret-color:var(--ink)}
::selection{background:var(--ink);color:var(--wall)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cb{display:inline-block;width:.3em;height:.345em;margin-left:.06em;overflow:visible}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--gray);transition:text-decoration-color 160ms var(--ease)}
.u:hover{text-decoration-color:var(--ink)}
section,figure{scroll-margin-top:24px}

/* header */
.top{padding-top:12px;align-items:center;position:relative;z-index:2}
.wm{grid-column:1/5;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:500;letter-spacing:-.01em}
.nav{grid-column:5/13;display:flex;justify-content:flex-end;gap:40px}
.nav a{display:inline-flex;align-items:center;min-height:44px;transition:color 160ms var(--ease)}
@media (hover:hover){.nav a:hover,.idx a:hover,.direct a:hover{color:var(--gray)}}

/* hero: two layers, the cube and one statement */
.hero{min-height:calc(100svh - 56px);align-items:center;padding-bottom:48px}
.copy{grid-column:8/13;align-self:center}
.st{font:300 var(--t5)/1.05 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.sub{margin-top:24px;max-width:26em;font-size:var(--t3);line-height:1.4;text-wrap:pretty}
.sub a{display:inline-block;padding-block:8px;margin-block:-8px;white-space:nowrap}

/* the catalogue index */
.idx{width:min(100%,1104px);margin-inline:auto;padding-top:var(--block)}
.idx h2{font-size:13px;font-weight:400;color:var(--gray)}
.idx ol{display:flex;flex-wrap:wrap;column-gap:40px}
.idx a{display:inline-flex;align-items:center;min-height:44px;transition:color 160ms var(--ease)}

/* the gallery: one plate per work, every plate built the same */
.works{display:grid;gap:var(--block);padding-top:96px}
.work{width:min(100%,1104px);margin-inline:auto}
.plate{container-type:inline-size;position:relative;aspect-ratio:16/10;background:var(--mount);border-radius:2px}
.dk,.ph{position:absolute;overflow:hidden;border-radius:4px;background:var(--screen);box-shadow:var(--whisper)}
.dk{left:7.5cqw;top:7.5cqw;width:76cqw;aspect-ratio:16/10}
.ph{right:7.5cqw;bottom:4.7cqw;width:15cqw;aspect-ratio:390/844}
.dk img,.ph img,.dk video,.ph video{display:block;width:100%;height:100%;object-fit:cover}
.cap{display:grid;gap:2px;margin-top:24px;max-width:36em}
.cap h3{font:300 var(--t3)/1.3 var(--serif);margin-bottom:2px}
.cap .meta{margin-top:6px;font-size:13px;color:var(--gray)}
.cap a{justify-self:start;font-size:13px;padding-block:12px;margin-block:-8px}
.cap .soon{font-size:13px;color:var(--gray)}

/* artist portal: the light badge on the portal's dark screen */
.dk.port{display:grid;place-items:center;perspective:80cqw;font-size:1.06cqw}
.badge{position:relative;width:25em;padding:2.6em 1.6em 1.6em;border-radius:1.2em;background:#f8f7f4;color:var(--ink);box-shadow:0 .1em .2em rgba(0,0,0,.3),0 2em 3em -1.6em rgba(0,0,0,.7);transform:rotateX(var(--bx,0deg)) rotateY(var(--by,0deg))}
.badge::before{content:"";position:absolute;left:50%;top:.95em;width:3.7em;height:.53em;margin-left:-1.85em;border-radius:.27em;background:var(--ink)}
.badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);opacity:var(--sh,0);pointer-events:none}
.bh{display:flex;justify-content:space-between;align-items:baseline;font-size:.87em;color:var(--gray)}
.bh b{font-weight:500;font-size:1.15em;color:var(--ink)}
.who{display:grid;grid-template-columns:5.9em 1fr;gap:1.07em;align-items:end;margin:1.6em 0 1.07em}
.who svg{width:5.9em;height:5.9em;fill:none;stroke:var(--ink);stroke-width:.7}
.who small{font-size:.87em;color:var(--gray)}
.who p{font:300 2.67em/1 var(--serif);letter-spacing:-.01em;padding-bottom:.2em;border-bottom:1px solid var(--ink)}
.rows li{display:flex;justify-content:space-between;padding:.53em 0;border-bottom:1px solid #e4e1da}
.rows li span:first-child{color:var(--gray)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:1.6em;font-size:.87em;color:var(--gray)}
.steps span::before{content:"";display:block;height:.3em;margin-bottom:.6em;border-radius:.15em;background:var(--ink)}

/* RigaTeniss: the club site's live ball turns in place inside its own screenshot, the S stays in front */
.ball{position:absolute;left:59.879%;top:10.339%;width:27.899%;aspect-ratio:1;border-radius:50%}
.ball .ball-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.ball.ready .ball-gl{opacity:1}
.dk .front{position:absolute;inset:0;pointer-events:none}

/* about */
.about{margin-top:var(--block)}
.about .say{grid-column:1/11;font:300 var(--t5)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.about .plain{grid-column:1/8;margin-top:32px;display:grid;gap:4px;font-size:var(--t3);line-height:1.4}
.dict{grid-column:1/11;margin-top:24px;font-size:13px;color:var(--gray)}
.dict b{font-weight:500;color:var(--ink)}
.dict i{font-family:var(--serif);font-size:15px}

/* contact */
.contact{margin-top:var(--block);row-gap:48px}
.contact>h2{grid-column:1/-1;font:300 var(--t5)/1.05 var(--serif);letter-spacing:-.015em}
.form,.done{grid-column:1/7}
.form{display:grid;gap:32px;position:relative}
.fd{display:grid;gap:4px}
.fd>label,.need{font-size:13px;color:var(--gray)}
.fd input,.fd textarea{width:100%;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid var(--edge);border-radius:0;background:transparent;color:var(--ink);font:400 16px/1.5 var(--sans);transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);-webkit-appearance:none;appearance:none}
.fd textarea{min-height:76px;resize:none;field-sizing:content}
.fd input::placeholder,.fd textarea::placeholder{color:#7a7468;opacity:1}
.fd input:hover,.fd textarea:hover{border-bottom-color:var(--ink)}
.fd input:focus,.fd textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.fd [aria-invalid=true]{border-bottom-color:var(--err);box-shadow:0 1px 0 0 var(--err)}
.err{font-size:13px;color:var(--err)}
.err:empty{display:none}
.picks{display:flex;flex-wrap:wrap;column-gap:24px;margin:4px 0 8px}
.pick{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--gray);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--line);transition:color 160ms var(--ease),text-decoration-color 160ms var(--ease)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick:hover{color:var(--ink)}
.pick:has(:checked){color:var(--ink);text-decoration-color:var(--ink)}
.pick:has(:focus-visible){outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
/* the form's one action: a 1px ink outline that fills with ink on hover, the site's only button */
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;min-width:132px;padding:0 28px;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font:500 15px/1 var(--sans);cursor:pointer;transition:background-color 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease)}
.go .sq{display:none;width:6px;height:6px;background:currentColor}
@media (hover:hover){.go:hover{background:var(--ink);color:var(--wall)}}
.go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.go:active{transform:scale(.97)}
.go[aria-disabled=true]{background:var(--ink);color:var(--wall);cursor:progress}
.go[aria-disabled=true] .sq{display:inline-block;animation:wait 900ms steps(2,jump-none) infinite}
@keyframes wait{to{opacity:.15}}
.note{font-size:13px;color:var(--gray)}
.note a{color:var(--ink);padding-block:12px}
.done{display:grid;gap:8px;align-content:start}
.done[hidden],.form[hidden]{display:none}
.done p:first-child{font:300 var(--t4)/1.2 var(--serif)}
.done:focus{outline:none}
.direct{grid-column:9/13;align-self:start;display:grid;gap:24px}
.direct dt{font-size:13px;color:var(--gray)}
.direct dd{margin:0;font-size:var(--t3)}
.direct a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px;transition:color 160ms var(--ease)}
.foot{margin-top:var(--block);padding:16px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--gray)}
.foot span{color:var(--ink);font-weight:500}
.foot a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}

@media (max-width:1023px){
  .form,.done{grid-column:1/8}
}
@media (max-width:767px){
  .top{display:flex;justify-content:space-between;padding-top:4px}
  .nav{gap:20px}
  .hero{min-height:calc(100svh - 48px);align-content:center;row-gap:24px;padding-bottom:32px}
  .copy{grid-column:1/-1}
  .copy{padding-bottom:0}
  .sub{margin-top:16px}
  .idx ol{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g)}
  .works{padding-top:48px}
  /* phones: a little more of the plate goes to the screens; same geometry on every plate */
  .plate{aspect-ratio:100/66}
  .dk{left:4cqw;top:4cqw;width:80cqw}
  .ph{right:4cqw;bottom:4cqw;width:22cqw}
  .cap{margin-top:16px}
  .about .say,.about .plain,.dict,.form,.done,.direct{grid-column:1/-1}
  .contact{row-gap:32px}
  .direct{margin-top:16px}
}
/* svg sprite holder */
.sprite{position:absolute;width:0;height:0}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}

/* form: the send failed. Everything typed stays; the direct contacts are repeated right here */
.fail{display:grid;gap:4px;font-size:13px;color:var(--err)}
.fail[hidden]{display:none}
.fail a{color:var(--ink);padding-block:12px}
.fail:focus{outline:none}

/* video page: the same plates, one 16:9 screen each; the film loads only when pressed */
.vhead{width:min(100%,1104px);margin-inline:auto;padding-top:96px;display:grid;gap:16px}
.vhead h1{font:300 var(--t5)/1.05 var(--serif);letter-spacing:-.015em}
.vhead p{font-size:var(--t3);line-height:1.4;max-width:30em}
.dk.vid{left:8cqw;top:7.6cqw;width:84cqw;aspect-ratio:16/9}
.vid video{display:block;width:100%;height:100%;object-fit:cover;background:var(--screen)}
.play{position:absolute;inset:0;display:grid;place-items:end start;width:100%;padding:3cqw;border:0;background:transparent;cursor:pointer;color:var(--ink)}
.play span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:2px;background:var(--wall);font:500 15px/1 var(--sans);box-shadow:var(--whisper);transition:transform 160ms var(--ease),background-color 160ms var(--ease)}
.play span::before{content:"";width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
@media (hover:hover){.play:hover span{background:#fff}}
.play:active span{transform:scale(.97)}
.play:focus-visible{outline:none}
.play:focus-visible span{outline:2px solid var(--wall);outline-offset:3px}
.more{margin-top:var(--block);width:min(100%,1104px);margin-inline:auto;font-size:var(--t3)}
@media (max-width:767px){
  .vhead{padding-top:48px}
  .dk.vid{left:4cqw;top:7.1cqw;width:92cqw}
}

/* text pages: privacy notice, 404 */
.doc{max-width:640px;padding:96px 0 var(--block)}
.doc h1{margin-bottom:16px;font:300 var(--t5)/1.05 var(--serif);letter-spacing:-.015em}
.doc .upd{margin-bottom:48px;font-size:13px;color:var(--gray)}
.doc h2{margin:32px 0 8px;font-size:15px;font-weight:500}
.doc p+p{margin-top:8px}
.doc a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--gray)}
.doc+.foot{margin-top:0}
@media (max-width:767px){.doc{padding-top:48px}}

/* ==== HERO OBJECT (swap point) ====================================================
   Everything for the sugar cube lives in this block, in <div class="obj"> in index.html
   and in /js/hero.js (one WebGL canvas). To replace the hero: swap this block, that div and hero.js.
   ================================================================================== */
.obj{grid-column:1/8;justify-self:center;display:grid;place-items:center;width:calc(var(--s)*1.9);height:calc(var(--s)*1.9);position:relative}
/* the canvas is wider than the cube: the heap, the loose grains and the soft shadows spread around it */
.sugar-gl,.sugar-still{position:absolute;left:50%;top:50%;width:min(calc(var(--s)*2.4),100vw);height:calc(var(--s)*2.2);transform:translate(-50%,-50%);pointer-events:none}
.sugar-still{object-fit:cover;max-width:none}
.sugar-on .sugar-still{visibility:hidden}
/* the press target: the cube itself */
.sugar-stage{position:relative;width:var(--s);height:var(--s);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sugar-stage[role=button]{cursor:pointer}
.sugar-stage:focus-visible{outline:none}
/* keyboard focus: a thin ring on the floor around the object, where both the cube and the heap stand */
.sugar-stage:focus-visible::after{content:"";position:absolute;left:50%;top:calc(50% + var(--s)*.42);width:calc(var(--s)*1.9);height:calc(var(--s)*.7);transform:translate(-50%,-50%);border:1.5px solid rgba(27,26,23,.55);border-radius:50%;pointer-events:none}
@media (max-width:767px){
  .obj{grid-column:1/-1;width:calc(var(--s)*1.7);height:calc(var(--s)*1.65)}
}
/* tall phones: the scene sits a little higher, so loose grains stay clear of the headline (hero.js does the same);
   short phones keep it centred, or the cube meets the nav */
@media (max-width:767px) and (min-height:701px){
  .sugar-still{transform:translate(-50%,calc(-50% - var(--s)*.3))}
  .sugar-stage{top:calc(var(--s)*-.3)}
}
/* ==== END HERO OBJECT ==== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important}
}