/* Uri O'Callaghan — site styles.
 *
 * Every size is written in design pixels and multiplied by a scale unit:
 *   --S  page scale: 1px at 700–1024px wide, growing up to 1.5px on large screens;
 *        on phones (<700px) the 320px-wide mobile design grows up to 1.4px.
 *   --s  local scale: equal to --S, except inside figures (.fig), which shrink further when
 *        the screen is narrower than the figure so diagrams never overflow.
 * Sections, headings and paragraphs are in normal flow: longer text pushes the rest down.
 * Only the inside of a figure (diagrams, annotated images) is laid out with coordinates.
 */

@font-face{font-family:"Overused Grotesk";font-weight:300;font-display:swap;src:url(/assets/fonts/overused-grotesk-light.woff2) format("woff2")}
@font-face{font-family:"Overused Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/overused-grotesk-semibold.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:479;font-display:swap;src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2")}

:root{
  --S:clamp(1px,100vw / 1024,1.5px);
  --s:var(--S);
  --g:16px;
  --paper:#fafafa;
  --grey:#eee;
  --ink:#000;
  --ink-soft:#222;
  --muted:#3c3c3c;
  --display:"Overused Grotesk","Helvetica Neue",Arial,sans-serif;
  --text:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ui:Inter,"Helvetica Neue",Arial,sans-serif;
}
@media (max-width:699px){:root{--S:clamp(1px,100vw / 320,1.4px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,p{margin:0}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
p a:hover{opacity:.6}
b{font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ header */
.top{position:absolute;top:0;left:0;right:0;z-index:5}
.name{position:absolute;left:calc(17*var(--S));top:calc(10*var(--S));font:550 calc(18*var(--S))/calc(30*var(--S)) var(--ui);letter-spacing:calc(-1.8*var(--S));color:var(--ink-soft)}
.langs{position:absolute;top:calc(18*var(--S));right:calc(57*var(--S));display:flex;gap:calc(1.5*var(--S))}
.langs a,.langs span{display:block;width:calc(33*var(--S));text-align:center;font:400 calc(14*var(--S))/calc(18*var(--S)) var(--text);letter-spacing:calc(-.8*var(--S));color:rgba(0,0,0,.4);transition:color .2s}
.langs a:hover{color:rgba(0,0,0,.8)}
.langs [aria-current]{font-weight:580;color:var(--ink)}
.lang-btn{position:absolute;right:calc(18*var(--S));top:calc(13*var(--S));width:calc(30*var(--S));height:calc(30*var(--S));padding:0;border:0;background:none;cursor:pointer}
.lang-btn{display:grid;place-items:center}
.lang-btn img{width:calc(18*var(--S));height:calc(18*var(--S))}
@media (max-width:699px){
  .name{left:0;right:0;top:calc(22*var(--S));text-align:center}
  .langs{left:0;right:0;top:calc(84*var(--S));justify-content:center;gap:calc(19*var(--S))}
  .langs a,.langs span{width:calc(47*var(--S));font-size:calc(18*var(--S))}
  .lang-btn{right:calc(24*var(--S));top:calc(16*var(--S));width:calc(41*var(--S));height:calc(41*var(--S));border-radius:50%}
  .lang-btn img{width:calc(22*var(--S));height:calc(22*var(--S))}
  /* the language list opens from the translate button */
  .ready .langs.fade-in{animation:none}
  .js .langs{opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .js .top.open .langs{opacity:1;visibility:visible}
}

/* entrance on load (after the fonts are ready) */
.js .fade-in{opacity:0}
.js .rise{opacity:0}
.ready .fade-in{animation:fade-in .5s .4s both}
.ready .rise{animation:rise .2s .2s cubic-bezier(.42,0,.58,1) both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:none}to{opacity:1;transform:translateY(calc(-32*var(--S)))}}
@media (max-width:699px){@keyframes rise{from{opacity:0}to{opacity:1}}}

/* ------------------------------------------------------------------ sections */
.sec{position:relative;display:flow-root;overflow-x:clip;background:var(--bg,transparent)}
.dark{--bg:#000;color:#fff}
.grey{--bg:var(--grey)}
.sec--about{z-index:2} /* covers the bottom of the lens and the top of the headphones */

/* a block in the page flow; --mt/--mb are the gaps above/below, --h a minimum height */
.fl{position:relative;width:min(calc(var(--w)*var(--S)),calc(100% - 2*var(--g)));min-height:calc(var(--h,0)*var(--S));margin:calc(var(--mt,0)*var(--S)) auto calc(var(--mb,0)*var(--S))}
@media (max-width:699px){.fl{width:min(calc(var(--wm)*var(--S)),calc(100% - 2*var(--g)));min-height:calc(var(--hm,0)*var(--S));margin:calc(var(--mtm,0)*var(--S)) auto calc(var(--mbm,0)*var(--S))}}
.fl{--w:455;--wm:280}
.fl:not(.seq){z-index:1} /* text stays above the image sequences it overlaps */
.fl.display,.fl.h2{--w:480;--wm:480}

/* image sequences scrubbed by scrolling (see motion.js); centred even when wider than the screen */
.seq.fl{width:calc(var(--w)*var(--S));height:calc(var(--h)*var(--S));margin-left:calc(50% - var(--w)*var(--S)/2);margin-right:0}
@media (max-width:699px){.seq.fl{width:calc(var(--wm)*var(--S));height:calc(var(--hm)*var(--S));margin-left:calc(50% - var(--wm)*var(--S)/2)}}
.seq img,.seq canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seq canvas{opacity:0}
.seq.on canvas{opacity:1}
.seq.on img{visibility:hidden}

/* ------------------------------------------------------------------ figures */
.fig{position:relative;--s:min(var(--S),100vw / var(--cw));width:calc(var(--cw)*var(--s));height:calc(var(--ch)*var(--s));margin:calc(var(--mt,0)*var(--S)) auto calc(var(--mb,0)*var(--S))}
.c{position:absolute;left:calc(var(--x)*var(--s));top:calc(var(--y)*var(--s));width:calc(var(--w)*var(--s));height:calc(var(--h)*var(--s))}
.c>*{rotate:calc(var(--r,0)*1deg)}
.c img{width:100%;height:100%;object-fit:cover}
.c a{display:block;width:100%;height:100%}
.m-only{display:none}
@media (max-width:699px){
  .fig{--s:var(--S); /* the mobile design already fits a phone */width:calc(var(--cwm)*var(--s));height:calc(var(--chm)*var(--s));margin:calc(var(--mtm,0)*var(--S)) auto calc(var(--mbm,0)*var(--S))}
  .c{left:calc(var(--xm)*var(--s));top:calc(var(--ym)*var(--s));width:calc(var(--wm)*var(--s));height:calc(var(--hm)*var(--s))}
  .c>*{rotate:calc(var(--rm,0)*1deg)}
  .d-only{display:none}
  .m-only{display:block}
}
.sh{position:absolute;inset:0;background:var(--c)}
.sh--round{border-radius:50%}
.sh--border{box-shadow:inset 0 0 0 calc(var(--bw)*var(--s)) var(--bc)}
/* lines: drawn horizontally, then turned by the figure's --r */
.ln{position:absolute;left:0;right:0;top:50%;height:calc(var(--lw)*var(--s));transform:translateY(-50%);background:var(--c)}
.ln--dotted{background:radial-gradient(circle closest-side,var(--c) 92%,transparent) 0 50%/calc(var(--p)*var(--s)) 100% repeat-x}
.framed{border-radius:calc(85*var(--s));overflow:hidden}
.framed::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 calc(2*var(--s)) #b9d3e8}
.ta-l{text-align:left}
.ta-r{text-align:right}
@media (max-width:699px){.tam-l{text-align:left}.tam-r{text-align:right}.tam-c{text-align:center}}
/* small links get a 24px+ touch area on phones without changing how they look */
@media (max-width:699px){.fl a,.c a{position:relative}.fl a::before,.c a::before{content:"";position:absolute;inset:-4px}}

/* ------------------------------------------------------------------ type */
.display{font:600 calc(54*var(--s))/1 var(--display);letter-spacing:calc(-1.2*var(--s));color:var(--ink-soft);text-align:center}
.display span{font-weight:300}
.h2{font:600 calc(38*var(--s))/1 var(--display);letter-spacing:calc(-1*var(--s));text-align:center}
.h2 b,.h2 span{display:block}
.h2 span{font-weight:300}
.about-title{font:479 calc(34*var(--s))/1 "Bricolage Grotesque",var(--display);letter-spacing:calc(-2*var(--s))}
.lead{font:400 calc(18*var(--s))/calc(23*var(--s)) var(--text);letter-spacing:calc(-.8*var(--s))}
.intro,.interest{font:492 calc(18*var(--s))/calc(23*var(--s)) var(--ui);letter-spacing:calc(-1.2*var(--s))}
.signature{font:479 calc(38*var(--s))/1 var(--ui);letter-spacing:calc(-2*var(--s));text-align:center;white-space:nowrap}
.body{font:400 calc(14*var(--s))/calc(18*var(--s)) var(--text);letter-spacing:calc(-.8*var(--s));text-align:center}
.body b{font-weight:580}
.micro{font:400 calc(9*var(--s))/calc(10*var(--s)) var(--ui);letter-spacing:calc(-.5*var(--s));text-align:center}
.note{font:400 calc(12*var(--s))/calc(12*var(--s)) var(--text);letter-spacing:calc(-.5*var(--s));color:var(--muted);text-align:center}
.caption{font:400 calc(12*var(--s))/calc(12*var(--s)) var(--text);letter-spacing:calc(-.5*var(--s))}
.caption b,.caption span{display:block}
.caption b{font-weight:580}
.nz-title{font:580 calc(22*var(--s))/calc(28*var(--s)) var(--text);letter-spacing:calc(-.8*var(--s));text-align:center}
.service{text-align:center;letter-spacing:calc(-.5*var(--s))}
.service b{display:block;font:400 calc(12*var(--s))/calc(12*var(--s)) var(--text)}
.service span{display:block;font:280 calc(10*var(--s))/calc(12*var(--s)) var(--ui)}
.service--strong b{font-weight:788}
@media (min-width:700px){.service--one-line b{white-space:nowrap;margin-inline:-50%}} /* translations longer than the English title stay on one line */
.dark .note{color:#fff}
@media (max-width:699px){
  .display{font-size:calc(34*var(--s))}
  .lead{font-size:calc(16*var(--s));line-height:calc(18*var(--s))}
  .intro{font-size:calc(16*var(--s));line-height:calc(16*var(--s))}
  .nz-title{font-size:calc(19*var(--s));line-height:calc(23*var(--s))}
  .service b{font:580 calc(10*var(--s))/calc(12*var(--s)) var(--ui)}
}

/* ------------------------------------------------------------------ awwwards badge */
.awwwards{position:fixed;z-index:999;top:50%;right:0;transform:translateY(-50%)}
@media (max-width:699px){.awwwards{display:none}}

/* ------------------------------------------------------------------ app (pwa.js): update / offline / install notices */
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10000;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 10px 10px 18px;border-radius:999px;background:#111;color:var(--paper);font:15px/20px var(--ui);letter-spacing:-.3px;box-shadow:0 8px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.toast span{flex:1 1 auto}
.toast button{flex:none;min-height:32px;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.toast button.primary{background:var(--paper);color:#111}
.toast button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
html.app .awwwards{display:none} /* the installed app drops the awards badge */
@media (display-mode:standalone){body{overscroll-behavior-y:none}}

/* ------------------------------------------------------------------ 404 and offline */
.not-found{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.not-found h1{font:600 48px/1 var(--display);letter-spacing:-1px;color:var(--ink-soft)}
.not-found p{font:400 18px/23px var(--text);letter-spacing:-.8px}
.not-found a{text-decoration:underline}
.not-found button{padding:10px 22px;border:0;border-radius:999px;background:#111;color:var(--paper);font:16px var(--ui);cursor:pointer}
.not-found nav{display:flex;gap:16px}
.offline .msg{display:none}
html[lang=en] .msg-en,html[lang=ca] .msg-ca,html[lang=es] .msg-es{display:block}

/* reduced motion: entrance animations jump to their end state; scroll ones follow the reader's own scrolling */
@media (prefers-reduced-motion:reduce){.ready .fade-in,.ready .rise{animation-duration:1ms;animation-delay:0s}.toast{transition:none}}