/* ÜMBE base: the tokens and the shell every page shares.
   Type: Inter Tight 900 (the black face: titles, names, big words), Hanken Grotesk (utility and editorial text),
   Switzer (body). The hero word is not a font: it is the drawn Ümbe Slot lettering in index.html.
   Colour: warm paper and slate, then the print colours, a few at a time per scene. Project fields come from each
   project's own identity. */

@font-face{font-family:"Inter Tight";font-weight:900;font-display:swap;src:url("../assets/fonts/inter-tight-900.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-display:swap;src:url("../assets/fonts/hanken.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-weight:100 900;font-display:swap;src:url("../assets/fonts/switzer.woff2") format("woff2")}

:root{
  /* base */
  --creme:#F0ECE3; --slate:#1C1F22;
  /* print colours (no yellow in the studio's own scenes) */
  --red:#DE3B32; --cobalt:#3A62C2; --violet:#9C74C8; --green:#74B058; --pink:#EDA1B4; --oxblood:#6B1F26; --acid:#E6E14A; --navy:#1F2C44; --taupe:#978D78;
  /* Wall of Art pairs (after K-W's two-colour posters): one field, one figure. Figure colours are for big type and
     marks; small functional text uses the pair's ink (--pi) where the figure colour is not 4.5:1 on its field. */
  --p-taupe:#968C76; --p-acid:#EDE84B;
  --p-moss:#1F4A34; --p-lime:#E8E34A;
  --p-navy:#1C2A48; --p-blush:#F2AFC0;
  --p-rasp:#B01E48; --p-petal:#F7C9D4;
  --p-rose:#B58E84; --p-choc:#2A1712;
  --p-butter:#EBDDA8; --p-wine:#5E1A1E;
  --p-violet:#8E64C4; --p-plum:#2E0B1A;
  --p-cobalt:#2B4FB8; --p-pink:#F7C0CF;
  /* project fields, sampled from each project's own site or identity */
  --ov-bone:#FBF3E4; --ov-stone:#E8DFCD; --ov-ink:#151412;
  --og-field:#E7E2D6; --og-ink:#1A1917;
  --wc-chalk:#F1EEE8; --wc-graphite:#1D2023; --wc-yellow:#E9DC3C;
  /* type */
  --ff-black:"Inter Tight","Hanken Grotesk",system-ui,sans-serif;
  --ff-head:"Hanken Grotesk","Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-text:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* space */
  --pad:clamp(1.25rem,0.5rem + 3vw,3.5rem);
  --gut:clamp(0.75rem,0.4rem + 1.2vw,1.5rem);
  --sec:clamp(5rem,4rem + 6vw,10rem);
  /* motion */
  --ease:cubic-bezier(0.16,1,0.3,1); --ease-slow:cubic-bezier(0.22,1,0.36,1);
  --rule:color-mix(in srgb,currentColor 22%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:2.5rem;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--slate);font:400 1.0625rem/1.5 var(--ff-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,canvas,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
main:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4.5rem;z-index:1000;background:var(--slate);color:var(--creme);padding:0.85rem 1.15rem;font:700 0.75rem/1 var(--ff-head);text-transform:uppercase;transition:top 0.2s var(--ease)}
.skip:focus{top:1rem;outline:2px solid var(--creme);outline-offset:2px}

/* ---------- section themes: the bar takes the colours of whatever is under it (js/site.js) ---------- */
header[data-theme],section[data-theme],footer[data-theme]{position:relative}
:is(header,section,footer)[data-theme=poster],:is(header,section,footer)[data-theme=paper]{background:var(--creme);color:var(--slate)}
section[data-theme=slate],footer[data-theme=slate]{background:var(--slate);color:var(--creme)}
section[data-theme=oxblood]{background:var(--oxblood);color:var(--creme)}
section[data-theme=pinkfield]{background:var(--pink);color:var(--slate)}
/* pair fields: --pf field, --pg figure, --pi small-text ink */
section[data-pair]{background:var(--pf);color:var(--pi)}
[data-pair=taupe]{--pf:var(--p-taupe);--pg:var(--p-acid);--pi:var(--slate)}
[data-pair=moss]{--pf:var(--p-moss);--pg:var(--p-lime);--pi:var(--p-lime)}
[data-pair=navy]{--pf:var(--p-navy);--pg:var(--p-blush);--pi:var(--p-blush)}
[data-pair=rasp]{--pf:var(--p-rasp);--pg:var(--p-petal);--pi:var(--p-petal)}
[data-pair=rose]{--pf:var(--p-rose);--pg:var(--p-choc);--pi:var(--p-choc)}
[data-pair=butter]{--pf:var(--p-butter);--pg:var(--p-wine);--pi:var(--p-wine)}
[data-pair=violet]{--pf:var(--p-violet);--pg:var(--p-plum);--pi:var(--p-plum)}
[data-pair=cobalt]{--pf:var(--p-cobalt);--pg:var(--p-pink);--pi:var(--p-pink)}
section[data-theme=ovrel],header[data-theme=ovrel]{background:var(--ov-bone);color:var(--ov-ink)}
section[data-theme=origin]{background:var(--og-field);color:var(--og-ink)}
section[data-theme=wallcreeper],header[data-theme=wallcreeper]{background:var(--wc-chalk);color:var(--wc-graphite)}
section[data-theme=wcdark],header[data-theme=wcdark]{background:var(--wc-graphite);color:var(--wc-chalk)}
.nav{--bg:var(--creme);--fg:var(--slate)}
.nav[data-theme=ovrel]{--bg:var(--ov-bone);--fg:var(--ov-ink)}
.nav[data-theme=origin]{--bg:var(--og-field);--fg:var(--og-ink)}
.nav[data-theme=slate]{--bg:var(--slate);--fg:var(--creme)}
.nav[data-theme=oxblood]{--bg:var(--oxblood);--fg:var(--creme)}
.nav[data-theme=pinkfield]{--bg:var(--pink);--fg:var(--slate)}
.nav[data-pair]{--bg:var(--pf);--fg:var(--pi)}
.nav[data-theme=wallcreeper]{--bg:var(--wc-chalk);--fg:var(--wc-graphite)}
.nav[data-theme=wcdark]{--bg:var(--wc-graphite);--fg:var(--wc-chalk)}

/* ---------- the bar: five small words, spread like the poster's date row ---------- */
.nav a{display:flex;align-items:center;min-height:2.75rem;min-width:2.75rem;justify-content:center;font:700 0.6875rem/1.15 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}
.nav a:first-child{justify-content:flex-start}
.nav a:last-child{justify-content:flex-end}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.bar{position:fixed;z-index:50;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;height:2.75rem;padding:0 var(--pad);background:var(--bg);color:var(--fg);box-shadow:0 1px 0 color-mix(in srgb,var(--fg) 16%,transparent);transition:transform .5s var(--ease-slow),background-color .3s,color .3s}
@media (min-width:760px){.bar{height:2.5rem}}
.nav.is-hidden{transform:translateY(-100%)}

/* the red star, white centre: the primary mark, beside the name in the bar */
.nav-home{gap:0.45rem}
.nav-mk{width:1.15rem;height:1.15rem;fill:var(--red);flex:none}
.ctr{fill:var(--creme)}

/* ---------- stamps: the mark family printed at any size. Flat colour, overprinted (multiply), with drop-outs
   from a small grain mask. Positions and sizes come from each page's CSS through --s, --c, --r. ---------- */
.stp{position:absolute;z-index:var(--z,0);width:var(--s,10rem);height:auto;aspect-ratio:1;color:var(--c,var(--red));fill:currentColor;rotate:var(--r,0deg);
  pointer-events:none;overflow:visible;mix-blend-mode:multiply;-webkit-mask:url("/media/grain.png") 0 0/200px;mask:url("/media/grain.png") 0 0/200px}
.stp.flat,[data-theme=slate] .stp,[data-theme=oxblood] .stp,[data-theme=wcdark] .stp,:is([data-pair=moss],[data-pair=navy],[data-pair=rasp],[data-pair=cobalt],[data-pair=violet],[data-pair=taupe],[data-pair=rose]) .stp{mix-blend-mode:normal}

/* ---------- grid, micro labels, links ---------- */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-inline:var(--pad)}
.ml{font:700 0.6875rem/1.25 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase}
.lk{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:0.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .2s}
.lk:hover{text-decoration-color:currentColor}
button.lk{background:none;border:0;padding:0;cursor:pointer}
.st i{display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor;opacity:.35;margin-right:0.45rem;vertical-align:0.05em}
.st-live i{background:#2f8a4a;opacity:1}
@media (max-width:759px){.g{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- media ---------- */
figure img{width:100%;height:auto}
.phone{position:relative;overflow:hidden;border-radius:clamp(14px,2.2vw,26px);background:#1e2124;aspect-ratio:9/19.5}
.phone img,.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video.film{opacity:0;transition:opacity .6s}
video.film.on{opacity:1}
.film-toggle{background:none;border:1.5px solid currentColor;border-radius:0;padding:0.35rem 0.6rem;min-height:2.75rem;min-width:2.75rem;cursor:pointer;font:700 0.6875rem/1 var(--ff-head);letter-spacing:0.02em;text-transform:uppercase;color:inherit}

/* ---------- footer (sub-pages; the home page ends inside its contact poster) ---------- */
.foot{padding-block:1.2rem 1.4rem;align-items:center;row-gap:0.4rem}
.foot > p{grid-column:1/7}
.foot-legal{grid-column:7/11;display:flex;flex-wrap:wrap;gap:0 1.2rem}
.foot-legal a,.foot-top{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}
.foot-legal a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.foot-top{grid-column:11/13;justify-self:end}
@media (max-width:759px){.foot > p,.foot-legal,.foot-top{grid-column:1/-1;justify-self:start}}

/* ---------- REVEAL: blocks arrive once; display titles rise out of their own baseline.
   The heading is observed and its inner .rv span is clipped (an element's own clip-path hides it from
   IntersectionObserver in Chrome). js/site.js adds .js-reveal to main and .in to each block; calm modes skip it. ---------- */
.js-reveal [data-reveal]{transition:opacity .8s var(--ease),translate 1.1s var(--ease)}
.js-reveal [data-reveal]:not(.in){opacity:0;translate:0 2.2rem}
.rv{display:inline-block}
.js-reveal [data-reveal]:has(> .rv):not(.in){opacity:1;translate:0 0}
.js-reveal [data-reveal] > .rv{transition:clip-path 1.1s var(--ease),translate 1.1s var(--ease);clip-path:inset(-0.25em -0.1em -0.25em -0.1em)}
.js-reveal [data-reveal]:not(.in) > .rv{translate:0 0.35em;clip-path:inset(-0.25em -0.1em 100% -0.1em)}
@media (prefers-reduced-motion:reduce){video.film,.bar{transition:none}}

/* ---------- MOTION. Five primitives, all tied to an element's own passage through the viewport (scroll timelines),
   all of them things a printed poster could do if it were paper on a wall:
     ASSEMBLE   parts converge into the mark or the word      m-assemble (a mark builds), m-enter-l/r (a stamp rolls in
                                                              from off the sheet), .pc letters (MAKE)
     ALIGN      a piece snaps from off-grid onto the grid     m-align (a word or plate slides into its column)
     SEPARATE   a composition comes apart                     the hero's --sp (hero.js), m-slide / m-slide-r (a run of
                                                              type drifts past), m-cross (a stamp falls between scenes),
                                                              m-release (the LAUNCH star lets go as the sheet leaves)
     REVEAL     an image or word appears through a mask       m-mask, m-expand, m-scope (a frame opens to its edges),
                                                              .rv (a title rises out of its own baseline)
     TRANSFORM  a mark turns or changes state                 m-spin (a stamp turns with the scroll), m-connect (a line
                                                              draws between two marks), the estimator and FAQ marks
   Apart from the poster's one-time entry (hero.js) and films that play while on screen, every movement is tied to the
   scroll or a click. Only where the browser has scroll timelines and motion is allowed; everywhere else every element
   simply sits in its finished place. ---------- */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  :root:not(.still) :is(.m-spin,.m-enter-r,.m-enter-l,.m-slide,.m-slide-r,.m-mask,.m-expand,.m-cross,.m-assemble,.m-draw,.m-align,.m-connect,.m-scope,.m-release,.proc-make .pc){animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view()}
  :root:not(.still) .m-spin{animation-name:m-spin}
  :root:not(.still) .m-enter-r{animation-name:m-enter-r;animation-range:entry 0% cover 50%}
  :root:not(.still) .m-enter-l{animation-name:m-enter-l;animation-range:entry 0% cover 50%}
  :root:not(.still) .m-slide{animation-name:m-slide}
  :root:not(.still) .m-slide-r{animation-name:m-slide-r}
  :root:not(.still) .m-mask{animation-name:m-mask;animation-range:entry 0% cover 45%}
  :root:not(.still) .m-expand{animation-name:m-expand;animation-range:entry 10% cover 50%}
  :root:not(.still) .m-cross{animation-name:m-cross}
  :root:not(.still) .m-assemble{animation-name:m-assemble;animation-range:entry 0% cover 60%}
  :root:not(.still) .m-draw{animation-name:m-draw;animation-range:entry 0% exit 20%}
  :root:not(.still) .m-align{animation-name:m-align;animation-range:entry 0% cover 40%}
  :root:not(.still) .m-connect{animation-name:m-connect;animation-range:entry 20% cover 45%}
  :root:not(.still) .m-scope{animation-name:m-scope;animation-range:entry 30% cover 50%}
  :root:not(.still) .m-release{animation-name:m-release;animation-range:exit 0% exit 100%}
  :root:not(.still) .proc-make .pc{animation-name:m-part;animation-range:entry 10% cover 45%}
}}
@keyframes m-spin{from{transform:rotate(-38deg)}to{transform:rotate(38deg)}}
@keyframes m-enter-r{from{transform:translateX(55vw) rotate(120deg)}to{transform:none}}
@keyframes m-enter-l{from{transform:translateX(-55vw) rotate(-120deg)}to{transform:none}}
@keyframes m-slide{from{transform:translateX(10vw)}to{transform:translateX(-22vw)}}
@keyframes m-slide-r{from{transform:translateX(-18vw)}to{transform:translateX(8vw)}}
@keyframes m-mask{from{clip-path:inset(14% 26% 14% 0)}to{clip-path:inset(0)}}
@keyframes m-expand{from{clip-path:inset(0 14vw)}to{clip-path:inset(0 0)}}
@keyframes m-cross{from{transform:translate(-8vw,-14vh) rotate(-50deg) scale(.8)}to{transform:translate(10vw,26vh) rotate(60deg) scale(1.15)}}
@keyframes m-assemble{from{transform:scale(.18) rotate(-200deg)}to{transform:none}}
@keyframes m-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes m-align{from{transform:translateX(14vw)}to{transform:none}}
@keyframes m-connect{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-50% -2% -50% -2%)}}
@keyframes m-scope{from{inset:30% 38%}to{inset:-0.2rem -0.6rem}}
@keyframes m-release{from{transform:none}to{transform:translate(18vw,-60vh) rotate(160deg) scale(.7)}}
@keyframes m-part{from{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0))}to{transform:none}}