/* Imo Unusual · coming soon. Tokens, base, responsive, interactions. */
:root{
  --bg:#111111; --ink:#F5F5F5; --ink-2:#D0D0D0; --ink-3:#E6E6E6; --line:#2A2A2A;
  /* sticker vinyl, text colour after the slash (APCA Lc): */
  --red:#C81E2A;    /* #fff 82 */
  --orange:#E5470E; /* #fff 72, bold >=20px only */
  --yellow:#FFD21F; /* #111 82 */
  --green:#5BE89A;  /* #111 78 */
  --blue:#1F3FE0;   /* #fff 89 */
  --pink:#FFB8DD;   /* #111 76 */
  --paper:#ECECEC;  /* #111 94 */
  --display:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Reddit Mono',ui-monospace,Menlo,monospace;
  --cols:12; --m:clamp(16px,3.4vw,48px); --pad:clamp(10px,1.25vw,20px); --maxw:1760px;
  /* one unit that shrinks with whichever side of the screen is tighter */
  --u:min(1vw, 1.5vh);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,p,ul,form{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.page{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:clip}
@supports (height:100dvh){.page{min-height:100dvh}}
.wrap{position:relative;width:min(100% - 2*var(--m), var(--maxw));margin-inline:auto;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.wrap>*{padding-inline:var(--pad);min-width:0}
.lines{position:absolute;inset:0;pointer-events:none;z-index:0}
.lines::before{content:"";position:absolute;inset:0;width:min(100% - 2*var(--m), var(--maxw));margin-inline:auto;opacity:.4;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / var(--cols)) 100%;border-right:1px solid var(--line)}

/* the label shape: two long cuts, two nicks */
.shape{clip-path:polygon(var(--k) 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,3px 100%,0 calc(100% - 3px),0 var(--k))}

/* wordmark, top-left corner only */
.brand{position:absolute;z-index:4;left:var(--m);top:clamp(12px,2.2vh,22px);margin:0;padding:10px 13px 9px;background:#111;color:var(--ink);--k:11px}
.brand svg{display:block;width:clamp(104px,9vw,140px);height:auto}

/* stickers (decorative duplicates of her words, aria-hidden) */
.pile{position:absolute;inset:0;z-index:1;overflow:clip}
.st{position:absolute;left:0;top:0;font:700 var(--fs,22px)/1 var(--mono);white-space:nowrap;letter-spacing:-.02em;user-select:none}
.st-r{display:block;transform:rotate(var(--r,0deg));transform-origin:50% 50%}
.st-rim{display:block;padding:2px;background:#0b0b0b;--k:calc(.62em + 1px)}
.st-in{display:block;padding:.4em .78em .42em;background:var(--c);color:var(--t);--k:.62em}
.st-rim,.st-in{clip-path:polygon(var(--k) 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,3px 100%,0 calc(100% - 3px),0 var(--k))}
.st.c-orange .st-in{font-size:max(1em,20px)}
.c-red{--c:var(--red);--t:#fff}.c-orange{--c:var(--orange);--t:#fff}.c-yellow{--c:var(--yellow);--t:#111}
.c-green{--c:var(--green);--t:#111}.c-blue{--c:var(--blue);--t:#fff}.c-pink{--c:var(--pink);--t:#111}
/* animated die-cut photo stickers: natural colour; the rim is an outline around her silhouette, never a tint */
.dc{position:absolute;left:0;top:0;transform-origin:50% 60%}
.dc-r{display:block;transform:rotate(var(--r,0deg));--o:clamp(3px,.4vw,6px);
  filter:drop-shadow(var(--o) 0 0 var(--rim)) drop-shadow(calc(-1 * var(--o)) 0 0 var(--rim)) drop-shadow(0 var(--o) 0 var(--rim)) drop-shadow(0 calc(-1 * var(--o)) 0 var(--rim))}
.dc-r img{width:100%;height:auto}

/* ---------- the stage ---------- */
.stage{position:relative;z-index:2;align-content:center;padding-block:clamp(64px,10vh,112px) clamp(18px,3.2vh,40px);pointer-events:none}
.cs{grid-column:3 / span 8;pointer-events:none}
.cs a,.cs form,.cs input,.cs button{pointer-events:auto}
.lead{display:inline-block;margin:0 0 clamp(10px,2vh,22px) -.04em;font:700 clamp(22px,calc(2.3 * var(--u)),36px)/1 var(--mono);letter-spacing:-.02em;transform:rotate(-5deg);transform-origin:0 100%}
.lead span{display:inline-block;padding:2px;background:#0b0b0b;--k:calc(.62em + 1px)}
.lead span span{display:block;padding:.36em .72em .38em;background:#fff;color:#111;--k:.62em}
.lead span,.lead span span{clip-path:polygon(var(--k) 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,3px 100%,0 calc(100% - 3px),0 var(--k))}
h1{font:600 clamp(36px,calc(8.6 * var(--u)),128px)/.88 var(--display);letter-spacing:-.05em;color:#fff;max-width:16ch;text-wrap:balance}
.sub{margin-top:clamp(12px,2.4vh,26px);font-size:clamp(16px,calc(1.35 * var(--u)),20px);line-height:1.42;color:var(--ink);max-width:44ch}

/* waitlist */
.wl{margin-top:clamp(14px,2.8vh,30px);max-width:620px}
.wl label{display:block;font:400 14px/1.3 var(--mono);color:var(--ink-3);margin-bottom:8px}
.row{display:flex;gap:10px;align-items:stretch}
.wl input[type=email]{flex:1 1 auto;min-width:0;height:clamp(46px,6.2vh,56px);padding:0 16px;border:2px solid #F5F5F5;border-radius:0;background:#fff;color:#111;font:500 18px/1 var(--display)}
.wl input[type=email]::placeholder{color:#5E5E5E}
.wl input[aria-invalid=true]{border-color:var(--yellow);outline:2px solid var(--yellow);outline-offset:2px}
.btn{--k:14px;flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:clamp(46px,6.2vh,56px);padding:0 22px;border:0;background:var(--orange);color:#fff;font:700 20px/1 var(--mono);letter-spacing:-.03em;cursor:pointer;overflow:hidden}
.btn:focus-visible{outline:2px solid #111;outline-offset:-6px}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#111;transform-origin:0 50%;animation:busy 0.9s ease-in-out infinite}
@keyframes busy{0%{transform:scaleX(0)}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hint{margin-top:8px;font:400 14px/1.4 var(--mono);color:var(--ink-3)}
.msg{min-height:0;margin-top:6px;font:500 16px/1.4 var(--display)}
.msg:empty{display:none}
.msg.ok{color:var(--green)}
.msg.err{color:var(--yellow)}
.msg a{text-underline-offset:3px}
.wl{position:relative}
.hp{position:absolute!important;left:0;top:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}

/* socials */
.soc{margin-top:clamp(14px,2.8vh,30px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px}
.soc .lab{font:400 14px/1.3 var(--mono);color:var(--ink-3);margin-right:6px}
.tag{--k:10px;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;background:var(--paper);color:#111;font:700 14px/1 var(--mono);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.tag:focus-visible{outline:2px solid #111;outline-offset:-5px}

/* banner + footer line */
.ticker{position:relative;z-index:3;overflow:hidden;background:var(--yellow);color:#111;border-block:2px solid #0b0b0b}
.ticker-track{display:flex;width:max-content}
.ticker-set{display:flex;align-items:center;flex-shrink:0;margin:0;padding:clamp(9px,1.5vh,13px) 0;font:700 clamp(15px,calc(1.4 * var(--u)),21px)/1 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.ticker .ti{padding-inline:22px}
.ticker .tsep{width:10px;height:10px;background:#111;transform:rotate(45deg);flex-shrink:0}
@keyframes imo-tick{to{transform:translateX(-50%)}}
.foot{position:relative;z-index:3;background:var(--bg)}
.foot p{grid-column:1 / -1;padding-block:clamp(8px,1.4vh,14px);font:400 13px/1.4 var(--mono);color:var(--ink-3)}
.foot a{text-underline-offset:3px}
@media (max-width:999px){
  :root{--cols:8;--u:min(1.25vw,1.5vh)}
  .cs{grid-column:1 / -1}
}
@media (max-width:639px){
  :root{--cols:4;--u:min(2vw,1.2vh)}
  h1{font-size:clamp(34px,min(9.6vw,6vh),60px)}
  .row{flex-direction:column;gap:8px}
  .btn{width:100%}
  .stage{padding-block:clamp(60px,9vh,96px) 14px}
  .tag{min-height:34px;padding:0 10px;font-size:13.5px}
  .soc .lab{flex-basis:100%}
  .soc{gap:6px}
  .foot p{font-size:12px}
}
@media (max-height:700px) and (max-width:639px){
  .lead{font-size:20px;margin-bottom:8px}
  .sub{font-size:15.5px;margin-top:10px;line-height:1.38}
  .wl{margin-top:12px}.soc{margin-top:12px}
  .wl label{margin-bottom:5px}
  .wl input[type=email],.btn{min-height:42px;height:42px}
}
@media (max-height:700px) and (min-width:640px){
  .soc{margin-top:14px}.wl{margin-top:14px}
  .stage{padding-block:clamp(56px,9vh,80px) 14px}
  .lead{margin-bottom:8px}
}
.st-r,.tag,.btn,.dc-r{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:imo-tick 46s linear infinite}
}
@media (hover:hover) and (pointer:fine){
  .ticker:hover .ticker-track{animation-play-state:paused}
  .pile .st{pointer-events:auto}
  .pile .st:hover{z-index:400}
  .pile .st:hover .st-r{transform:rotate(calc(var(--r,0deg) * .3)) translateY(-6px) scale(1.06)}
  .pile .dc:hover{z-index:400}
  .pile .dc:hover .dc-r{transform:rotate(calc(var(--r,0deg) * .3)) translateY(-6px) scale(1.04)}
  .tag:hover{transform:translateY(-2px) rotate(-2deg)}
  .btn:hover{transform:translateY(-2px) rotate(-1deg)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 404 */
a.btn{text-decoration:none}
.home-act{margin-top:clamp(18px,3.4vh,36px)}


/* socials in the nav corner (Franck, 2026-10-27): P's paper tags, platform glyph + handle; icon-only below 1200px */
.nav{position:absolute;z-index:4;right:var(--m);top:clamp(12px,2.2vh,22px)}
.nav ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.nav .tag{--k:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;background:var(--paper);color:#111;font:700 14px/1 var(--mono);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nav .ico{width:20px;height:20px;flex:0 0 auto}
.nav .ico-live{width:32px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:1199px){
  .nav .tag{padding:0;justify-content:center;width:46px}
  .nav .tag:has(.ico-live){width:58px}
  .nav .hdl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:379px){
  .nav ul{gap:5px}
  .nav .tag{width:44px}
  .nav .tag:has(.ico-live){width:54px}
  .brand svg{width:96px}
}
@media (hover:hover) and (pointer:fine){
  .nav .tag:hover{transform:translateY(-2px) rotate(-2deg)}
}
.nav .ico-live text{font-family:var(--mono)}

/* Footer line and the form's hint line removed (Franck, 2026-10-27): the banner is the bottom edge. */
.ticker{border-bottom:0}
.msg{margin-top:10px}

/* Tall / portrait screens (Franck, 2026-10-27): the composition is capped and centred; the banner stays
   pinned at the bottom and the nav at the top, the rest is plain ground. Landscape sizes are unchanged. */
.frame{position:relative;grid-row:1;align-self:stretch;min-height:0;display:grid}
@media (min-width:700px){.frame{align-self:center;height:min(100%, 115vw, 1100px)}}
.frame>.stage{height:100%}
@media (orientation:portrait) and (min-width:700px){
  .stage{padding-block:clamp(56px,6vh,96px) clamp(24px,3vh,48px)}
  h1{font-size:clamp(56px,8.7vw,140px);max-width:none}
  .sub{font-size:clamp(20px,1.9vw,24px);max-width:40ch}
  .wl{max-width:min(760px,100%)}
  .wl input[type=email],.btn{height:clamp(56px,4.4vw,64px);min-height:clamp(56px,4.4vw,64px)}
  .wl input[type=email]{font-size:20px}
  .btn{font-size:22px}
  .lead{font-size:clamp(26px,3vw,40px)}
}
@media (orientation:portrait) and (min-width:700px) and (max-width:999px){
  h1{font-size:clamp(56px,10.6vw,110px)}
}
@media (orientation:portrait) and (min-width:1000px){
  .cs{grid-column:2 / span 10}
}
/* Big screens: the composition is capped at 1600px wide and centred; slots are fractions of it. */
.frame{width:min(100%,1600px);justify-self:center}
/* v3 pile (Franck, 2026-10-27): the composition fills the screen again (no capped box); the pile scales with
   one factor and keeps a padded clear zone around the content. Very large screens: content grows a little. */
.frame{height:auto;width:auto;align-self:stretch;justify-self:stretch}
@media (min-width:2200px) and (min-height:1100px){
  h1{font-size:clamp(128px,5vw,146px)}
  .sub{font-size:clamp(20px,.9vw,26px)}
  .wl{max-width:760px}
  .wl input[type=email],.btn{height:62px;min-height:62px}
  .lead{font-size:clamp(34px,1.6vw,44px)}
}
/* 4K-class screens: a wider grid lets the content grow a little more and stay on two lines. */
@media (min-width:3000px) and (min-height:1800px){
  :root{--maxw:2400px}
  h1{font-size:clamp(146px,4.8vw,196px)}
  .sub{font-size:28px}
  .lead{font-size:50px}
  .wl{max-width:980px}
  .wl label{font-size:18px}
  .wl input[type=email],.btn{height:72px;min-height:72px}
  .wl input[type=email]{font-size:24px}
  .btn{font-size:26px}
  .nav .tag{min-height:56px;font-size:18px;padding:0 18px}
  .nav .ico{width:26px;height:26px}.nav .ico-live{width:42px}
  .brand svg{width:190px}
  .ticker-set{font-size:28px;padding:18px 0}
}

/* Turnstile: hidden until Cloudflare asks for a click, then a small panel under the form (waitlist.js). */
#wl{position:relative}#wl .ts{position:absolute;left:0;top:calc(100% + 10px);z-index:60;width:min(100%,420px);padding:6px;background:#111;border:2px solid #FFD21F}#wl .ts[hidden]{display:none}