/* Karina Ives giveaway — the /16 Jelly lab system: cream studio, Unbounded + Instrument Serif,
   colour only from the gel. Mobile-first, one column: letters → prize → form → rules. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(./fonts/unbounded-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(./fonts/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/instrument-serif-normal.woff2) format('woff2')}

:root{
  --cream:#f3ebe0;--ink:#1d1a1f;--ink-2:#5b5459;--paper:#fffaf4;
  --pink:#ff3d8a;--orange:#ff7a1a;--yellow:#ffd21a;--lime:#9be31a;--error:#b8104a;
  --display:'Unbounded',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;
  --col:min(520px,100% - 32px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--display);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column}
main{flex:none;display:flex;flex-direction:column;position:relative;z-index:1}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

mark.ph{background:#fff1a6;color:var(--ink);font:italic 400 1em/1.25 var(--serif);padding:0 .35em;border-radius:6px;outline:1.5px dashed #c9a600;outline-offset:-1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph-block{background:#fff8d1;border:1.5px dashed #c9a600;border-radius:16px;padding:14px 16px}

/* ---------- hero: the letters, nothing else ---------- */
/* the hero takes whatever height the content leaves, so a desktop screen never needs to scroll */
.hero{position:relative;flex:none;height:min(30svh,52vw);min-height:170px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.brand{position:absolute;left:16px;top:14px;z-index:2;font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
html:not(.gl) #gl{display:none}
.gl-ready #gl{opacity:1}
.hero-fallback{position:absolute;left:50%;top:54%;width:min(86%,560px);translate:-50% -50%;isolation:isolate;background:var(--cream);transition:opacity .6s ease}
.hero-fallback img{width:100%;mix-blend-mode:multiply}
.gl-ready .hero-fallback{opacity:0}

/* ---------- the one column ---------- */
.giveaway{width:var(--col);margin:0 auto;display:grid;padding-bottom:12px}
.intro{display:grid;gap:10px;text-align:center;justify-items:center}
.eyebrow{font:600 11px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
h1{font:600 clamp(28px,8vw,44px)/1.04 var(--display);letter-spacing:-.02em;text-wrap:balance}
.lede{font:italic 400 clamp(21px,5.4vw,27px)/1.2 var(--serif);color:var(--ink);text-wrap:balance;max-width:28ch}
/* the jelly letters say "100K GIVEAWAY"; the text heading stays for screen readers and the static fallback */
.gl h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--display);letter-spacing:.02em;background:#fff;border-radius:999px;padding:8px 13px 8px 9px;box-shadow:0 4px 14px rgba(80,50,30,.08)}
.chip::before{content:'';width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 14%,var(--g,var(--pink)) 58%,color-mix(in srgb,var(--g,var(--pink)),#000 18%) 100%)}
.chip:last-child{--g:var(--lime)}
.chip.is-ph{outline:1.5px dashed #c9a600;outline-offset:-1.5px;background:#fff8d1}

.card{margin-top:22px;background:var(--paper);border-radius:30px;padding:20px 20px 18px;box-shadow:0 20px 50px rgba(80,50,30,.10),inset 0 0 0 1px rgba(29,26,31,.04);scroll-margin-top:16px}
#entry-form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font:600 11px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field input{width:100%;font:400 17px/1.2 var(--display);color:var(--ink);background:#fff;border:1.5px solid rgba(29,26,31,.16);border-radius:18px;padding:13px 18px;min-height:50px;box-shadow:inset 0 2px 6px rgba(80,50,30,.05);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:#b3aaa3}
.field input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,61,138,.2)}
.field input[aria-invalid]{border-color:var(--error);background:#fff7f9}
.handle-wrap{position:relative}
.handle-wrap .at{position:absolute;left:18px;top:50%;translate:0 -52%;font:600 17px/1 var(--display);color:var(--ink-2);pointer-events:none}
.handle-wrap input{padding-left:40px}
.err{font:600 13px/1.4 var(--display);color:var(--error)}
.err:empty{display:none}
.check{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:start}
.check input{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin:0;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.check input::after{content:'';width:11px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;rotate:-45deg;translate:0 -2px;scale:0;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.check input:checked{background:radial-gradient(circle at 34% 30%,#fff 0 10%,#ff86b6 26%,var(--pink) 56%,#c8106a 100%);border-color:#c8106a;transform:scale(1.06)}
.check input:checked::after{scale:1}
.check input:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
.check input[aria-invalid]{border-color:var(--error);box-shadow:0 0 0 3px rgba(184,16,74,.15)}
.check label{font:300 14px/1.5 var(--display);padding-top:3px;cursor:pointer}
.check label a{font-weight:600;text-underline-offset:3px;white-space:nowrap}
.check .err{grid-column:2}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.submit{width:100%;min-height:54px;border-radius:999px;background:var(--ink);color:#fff;font:600 15px/1 var(--display);letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 30px rgba(29,26,31,.18);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.submit:hover{background:#3a2531;transform:translateY(-1px)}
.submit:disabled{cursor:progress;opacity:.85;transform:none}
.is-sending::before{content:'';width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 14%,#ff86b6 30%,var(--pink) 60%);animation:jig .9s ease-in-out infinite}
@keyframes jig{0%,100%{transform:scale(1)}8%{transform:scale(1.18,.84)}16%{transform:scale(.92,1.08)}24%{transform:scale(1)}}
.status{font:400 14px/1.5 var(--display)}
.status:empty{display:none}
.status[data-tone=error]{color:var(--error);font-weight:600;font-size:13px;background:#fff1f5;border-radius:14px;padding:11px 14px}

.panel{display:grid;gap:10px;text-align:center;justify-items:center;padding:8px 0}
.panel[data-panel=open]{text-align:left;justify-items:stretch;padding:0}
.panel-big{font:600 clamp(30px,8vw,42px)/1.05 var(--display);letter-spacing:-.02em}
.panel-big:focus{outline:none}
.panel p{font-size:15px}
.winner{color:var(--pink)}
.text-btn{font:600 13px/1.2 var(--display);text-decoration:underline;text-underline-offset:5px;padding:10px 4px;color:var(--ink-2)}
.done{position:relative}
.just-entered .card{animation:wobble 1.1s cubic-bezier(.3,1.4,.5,1)}
@keyframes wobble{0%{transform:scale(1)}12%{transform:scale(1.07,.9)}28%{transform:scale(.95,1.06)}44%{transform:scale(1.03,.97)}62%{transform:scale(.99,1.01)}100%{transform:scale(1)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.confetti i{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 13%,var(--c) 55%,color-mix(in srgb,var(--c),#000 22%) 100%);box-shadow:0 6px 16px color-mix(in srgb,var(--c),transparent 60%);will-change:transform,opacity}

.note{display:flex;gap:10px;align-items:flex-start;font:300 12px/1.5 var(--display);color:var(--ink-2);padding:0 6px;margin-top:14px}
.note a{color:var(--ink);font-weight:600}
.note-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 14%,#ff86b6 30%,var(--pink) 58%,#c8106a 100%)}

.rules{border-top:1px solid rgba(29,26,31,.12);scroll-margin-top:16px;margin-top:12px}
.rules summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 6px;font:600 13px/1.2 var(--display)}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:'+';font:300 22px/1 var(--display)}
.rules[open] summary::after{content:'–'}
.rules-body{padding:0 6px 8px;display:grid;gap:10px;font-size:14px}
.rules-body h3{font:600 14px/1.3 var(--display);margin-top:4px}
.rules-body ul{list-style:disc;padding-left:20px;display:grid;gap:4px}
.version{font:600 10px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

.foot{position:relative;z-index:1;width:var(--col);margin:0 auto;padding:0 6px 18px;display:grid;gap:6px;font:300 11px/1.5 var(--display);color:var(--ink-2)}
.foot a{font-weight:600;color:var(--ink);justify-self:start}

.doc-main{width:var(--col);margin:24px auto 80px;display:grid;gap:14px;font-size:14px}
.doc-main h1{font-size:32px}
.back{font:600 12px/1 var(--display);text-decoration:none}

/* ---------- static hero (reduced motion / no WebGL) ---------- */
html:not(.gl) .hero{height:auto;min-height:0;max-height:none;padding:48px 0 8px}
html:not(.gl) .hero-fallback{position:static;translate:none;margin:0 auto}

/* ---------- larger screens: same column, more room for the letters ---------- */
@media (min-width:800px){
  .hero{flex:none;height:clamp(200px,36vh,380px)}
  .brand{left:28px;top:24px}
  .card{padding:24px 28px 20px;margin-top:18px}
  /* email and handle side by side: the whole page fits one desktop screen */
  #entry-form{grid-template-columns:1fr 1fr;column-gap:12px}
  #entry-form>:not(.field){grid-column:1/-1}
  .giveaway{width:min(600px,100% - 48px)}
  .foot{width:min(600px,100% - 48px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.panel .entry-notice{font:300 11.5px/1.5 var(--display);color:var(--ink-2);margin:0;text-align:center}
.entry-notice a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- floating gel bubbles: quiet background detail ---------- */
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bubbles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:var(--o,.5);
  background:radial-gradient(circle at 34% 30%,#fff 0 12%,color-mix(in srgb,var(--c),#fff 35%) 30%,var(--c) 62%,color-mix(in srgb,var(--c),#000 15%) 100%);
  box-shadow:0 8px 24px color-mix(in srgb,var(--c),transparent 70%);animation:drift var(--d,9s) ease-in-out infinite alternate}
.bubbles i:nth-child(1){--x:6%;--y:58%;--s:44px;--c:var(--pink);--d:9s}
.bubbles i:nth-child(2){--x:9%;--y:84%;--s:16px;--c:var(--lime);--d:7s}
.bubbles i:nth-child(3){--x:88%;--y:50%;--s:32px;--c:var(--orange);--d:11s}
.bubbles i:nth-child(4){--x:93%;--y:78%;--s:14px;--c:var(--yellow);--d:8s;--o:.7}
.bubbles i:nth-child(5){--x:94%;--y:92%;--s:52px;--c:var(--pink);--d:12s;--o:.35}
.bubbles i:nth-child(6){--x:3%;--y:93%;--s:24px;--c:var(--orange);--d:10s}
.bubbles i:nth-child(7){--x:10%;--y:70%;--s:10px;--c:var(--yellow);--d:6s;--o:.7}
.bubbles i:nth-child(8){--x:90%;--y:64%;--s:12px;--c:var(--lime);--d:8.5s;--o:.6}
@keyframes drift{from{transform:translate(0,0) scale(1)}50%{transform:translate(4px,-10px) scale(1.06,.95)}to{transform:translate(-3px,-18px) scale(.97,1.03)}}
@media (max-width:1100px){.bubbles i:nth-child(5){display:none}}
@media (max-width:799px){.bubbles i:nth-child(1),.bubbles i:nth-child(3),.bubbles i:nth-child(5),.bubbles i:nth-child(7),.bubbles i:nth-child(8){display:none}.bubbles i{--o:.4}}


/* ---------- a tiny T-Rex peeking up from the very bottom-right corner of the page ---------- */
body{position:relative}
.foot{position:static}
.trex{position:absolute;right:clamp(4px,3vw,44px);bottom:0;z-index:2;width:150px;height:76px;overflow:hidden;pointer-events:none}
/* the box is roomy on the top and sides, so only the page's bottom edge crops him, however he tilts */
.trex img{position:absolute;right:14px;top:26px;width:92px;height:auto;pointer-events:auto;transform-origin:60% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1);animation:peek 10s ease-in-out 4s infinite}
.trex img:hover,.trex img:active{animation:none;transform:translateY(-12px) rotate(-10deg)}
@keyframes peek{0%,84%,100%{transform:none}89%{transform:translateY(-9px) rotate(-11deg)}94%{transform:translateY(-7px) rotate(-3deg)}}
@media (max-width:799px){.trex{width:118px;height:58px}.trex img{width:70px;top:20px;right:10px}}