@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
:root{
  --blue:#0E01FA;
  --u:min(calc(100vw / 1440), calc(100svh / 900)); /* 1 design px */
  --font:"Bricolage Grotesque",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sw:calc(var(--u)*407);   /* width of the iPad image in "how it works" */
  --pk:1;                    /* pencil scale */
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--blue);}
body{font-family:var(--font);font-variation-settings:"opsz" 14,"wdth" 100;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;}
a{color:inherit;}
a:focus-visible{outline:3px solid #fff;outline-offset:4px;}

/* Image placeholders: show the expected file name if a photo is missing */
.ph{position:absolute;overflow:hidden;background:#BDBDBD;}
.ph img{width:100%;height:100%;object-fit:cover;}
.ph.missing img{display:none;}
.ph.missing::after{content:attr(data-file);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:max(12px,calc(var(--u)*16));font-weight:600;color:#4A4A4A;text-align:center;padding:8px;}

/* Fixed logo, animated by scroll */
#logo{position:fixed;left:calc(var(--u)*39);top:calc(var(--u)*19);width:calc(var(--u)*756);z-index:50;color:var(--blue);transform-origin:0 0;pointer-events:none;}
#logo svg{width:100%;height:auto;display:block;}

/* 1-3: intro, hero and zoom share one pinned stage */
#stage{position:relative;height:100svh;overflow:hidden;background:#fff;}
.intro{position:absolute;inset:0;}
.intro .layer{position:absolute;}
.intro .rot{position:relative;}
.intro .l1{left:calc(var(--u)*-37);top:calc(var(--u)*-314);width:calc(var(--u)*1514);height:calc(var(--u)*1278);}
.intro .l2{left:calc(var(--u)*-461.82);top:calc(var(--u)*-956.94);width:calc(var(--u)*2504.8);height:calc(var(--u)*2668.1);display:flex;align-items:center;justify-content:center;opacity:0;}
.intro .l2 .rot{transform:rotate(26.51deg);width:calc(var(--u)*1746.4);height:calc(var(--u)*2110.5);}
.intro .l3{left:calc(var(--u)*-458);top:calc(var(--u)*-988);width:calc(var(--u)*2157.5);height:calc(var(--u)*2512.4);display:flex;align-items:center;justify-content:center;opacity:0;}
.intro .l3 .rot{transform:rotate(-16.57deg);width:calc(var(--u)*1614);height:calc(var(--u)*2141);}
.intro .ph{inset:0;}
.blue{position:absolute;inset:0;background:var(--blue);}
.hero-text{position:absolute;left:calc(var(--u)*461);top:calc(var(--u)*431);width:calc(var(--u)*893);font-size:calc(var(--u)*32);line-height:1.15;margin:0;}
.hero-text p{margin:0 0 .7em;}
#post{left:50%;top:calc(var(--u)*626);width:calc(var(--u)*517.86);height:calc(var(--u)*647.33);background:#fff;}
#post.missing::after{color:#4A4A4A;}

/* 4: how it works */
#how{position:relative;height:100svh;overflow:hidden;background:var(--blue);}
.how-head{position:absolute;left:50%;top:calc(var(--u)*189);width:calc(var(--u)*528);transform:translateX(-50%);text-align:center;}
.how-head h2{margin:0 0 calc(var(--u)*8);font-size:calc(var(--u)*54);font-weight:600;line-height:normal;}
.how-head p{margin:0;font-size:calc(var(--u)*20);line-height:normal;}
.step{position:absolute;left:calc(var(--u)*245);top:calc(var(--u)*467);display:flex;gap:calc(var(--u)*12);align-items:center;}
.step .num{width:calc(var(--u)*100);text-align:center;font-size:calc(var(--u)*120);font-weight:700;line-height:normal;}
.step .txt{width:calc(var(--u)*240);} /* narrow, so the Apple Pencil in step 1 never touches the text */
.step h3{margin:0 0 calc(var(--u)*8);font-size:calc(var(--u)*28);font-weight:500;line-height:normal;}
.step p{margin:0;font-size:calc(var(--u)*20);line-height:normal;}
.step + .step{opacity:0;}
.shotbox{position:absolute;left:calc(var(--u)*804);top:calc(var(--u)*346);width:var(--sw);height:calc(var(--sw)*530/407);}
.shots{position:absolute;inset:0;}
.shots .ph{inset:0;background:transparent;}
.shots .ph img{object-fit:contain;}
.shots .ph + .ph{opacity:0;}
.pen{position:absolute;left:0;top:0;width:calc(var(--sw)*411/407*var(--pk));height:auto;max-width:none;pointer-events:none;z-index:2;will-change:transform;}
.dots{position:absolute;left:0;top:calc(100% + var(--u)*20);display:flex;gap:8px;}
.dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);}
.dots span.on{background:#fff;}

/* 5: bring it to your event. Pinned: 1-2-3 countdown, then the card, then the photo drifts up */
#event{position:relative;height:100svh;overflow:hidden;background:#222;--ev-shift:calc(var(--u)*250);}
/* the photo is taller than the section by exactly the distance it drifts up, so no gap can ever show below it */
#event .bg{left:0;top:0;width:100%;height:calc(100% + var(--ev-shift));background:#555;}
#event .bg.missing::after{color:#ddd;}
#event .bg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);}
.ev-text{position:absolute;left:calc(var(--u)*30);top:calc(var(--u)*233);width:calc(var(--u)*593);text-shadow:0 1px 14px rgba(0,0,0,.35);}
.ev-text h2{margin:0 0 calc(var(--u)*8);font-size:calc(var(--u)*54);font-weight:600;line-height:normal;}
.ev-text > p{margin:0;font-size:calc(var(--u)*20);line-height:normal;}
.count{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:2;}
.count span{position:absolute;left:0;top:0;font-size:calc(var(--u)*500);font-weight:700;line-height:1;color:#fff;}
.card{position:absolute;left:calc(var(--u)*667);top:calc(var(--u)*68);width:calc(var(--u)*588);height:auto;}

/* 6: quote, covered by the six photo sheets */
#quote{position:relative;height:100svh;overflow:hidden;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 calc(var(--u)*40);}
#quote p{margin:0;font-size:calc(var(--u)*88);font-weight:600;line-height:1.05;letter-spacing:-.015em;}
#quote .ql{display:block;}
.col-pan{position:absolute;inset:0;pointer-events:none;}
.col-pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* 8: contact and footer */
#contact{position:relative;background:var(--blue);padding:calc(var(--u)*180) calc(var(--u)*30) calc(var(--u)*40);}
#contact h2{margin:0 0 calc(var(--u)*16);font-size:calc(var(--u)*96);font-weight:600;line-height:1;letter-spacing:-.01em;}
#contact .lead{margin:0 0 calc(var(--u)*40);max-width:calc(var(--u)*640);font-size:calc(var(--u)*20);line-height:1.4;}
.mail{display:inline-block;background:#fff;color:var(--blue);text-decoration:none;font-weight:600;font-size:calc(var(--u)*28);padding:calc(var(--u)*18) calc(var(--u)*40);border-radius:1000px;}
footer{display:flex;justify-content:space-between;gap:16px;margin-top:calc(var(--u)*160);font-size:max(12px,calc(var(--u)*14));opacity:.85;}
footer a{margin-left:20px;}

/* ---------- Portrait / small screens: own layout. Sizes use --p (1 = a 390 x 700 phone) so tablets scale up ---------- */
@media (max-aspect-ratio:1/1),(max-width:600px){
  :root{--p:min(calc(100vw / 390),calc(100svh / 700));--lw:min(88vw,calc(var(--p)*420));--ht:calc(var(--p)*44 + var(--lw)*.373);--sw:min(70vw,calc(40svh / 1.302));--pk:.72;}
  #logo{left:calc(50vw - var(--lw)/2);top:calc(var(--p)*22);width:var(--lw);}

  .intro .layer{left:0;top:0;width:100%;height:100%;}
  .intro .l2 .rot,.intro .l3 .rot{transform:none;width:100%;height:100%;}
  .hero-text{left:calc(50vw - var(--lw)/2);top:var(--ht);width:var(--lw);font-size:calc(var(--p)*22);line-height:1.2;}
  #post{--pw:min(56vw,calc(var(--p)*218));top:max(55svh,calc(var(--ht) + var(--p)*175));width:var(--pw);height:calc(var(--pw)*1.271);}

  .how-head{--w:min(86vw,calc(var(--p)*420));left:calc(50vw - var(--w)/2);top:calc(var(--p)*72);width:var(--w);transform:none;}
  .how-head h2{font-size:calc(var(--p)*34);margin-bottom:calc(var(--p)*6);}
  .how-head p{font-size:calc(var(--p)*15);line-height:1.3;}
  .shotbox{left:calc(50vw - var(--sw)/2);top:max(calc(var(--p)*184),24svh);}
  .dots{top:calc(100% + var(--p)*14);left:50%;transform:translateX(-50%);}
  .step{--w:min(86vw,calc(var(--p)*360));left:calc(50vw - var(--w)/2);top:auto;bottom:6svh;gap:calc(var(--p)*10);align-items:flex-start;}
  .step .num{width:calc(var(--p)*56);font-size:calc(var(--p)*64);line-height:1;}
  .step .txt{width:calc(var(--w) - var(--p)*66);}
  .step h3{font-size:calc(var(--p)*22);margin-bottom:calc(var(--p)*4);}
  .step p{font-size:calc(var(--p)*16);line-height:1.3;}

  #event{--ev-shift:12svh;}
  .ev-text{--w:min(90vw,calc(var(--p)*420));left:calc(50vw - var(--w)/2);top:calc(var(--p)*92);width:var(--w);}
  .ev-text h2{font-size:calc(var(--p)*36);}
  .ev-text > p{font-size:calc(var(--p)*16);line-height:1.3;}
  .count span{font-size:min(80vw,55svh);}
  .card{--cw:min(78vw,calc(var(--p)*330),calc((100svh - var(--p)*300) / 1.342));width:var(--cw);left:calc(50vw - var(--cw)/2);top:auto;bottom:4svh;}

  #quote p{font-size:min(12.5vw,calc(var(--p)*56));}
  /* the six sheets, each tucked into the edge of the screen it bleeds off on the desktop layout */
  .col-pan img.sheet{inset:auto;height:auto;object-fit:contain;}
  .col-pan picture:nth-of-type(1) img{right:0;bottom:0;width:84vw;}
  .col-pan picture:nth-of-type(2) img{left:0;top:0;width:92vw;}
  .col-pan picture:nth-of-type(3) img{right:0;top:0;width:82vw;}
  .col-pan picture:nth-of-type(4) img{left:0;bottom:0;width:100vw;}
  .col-pan picture:nth-of-type(5) img{left:0;top:0;width:100vw;}
  .col-pan picture:nth-of-type(6) img{left:0;bottom:0;width:86vw;}

  #contact{padding:calc(var(--p)*130) calc(var(--p)*20) calc(var(--p)*28);}
  #contact h2{font-size:min(13.5vw,calc(var(--p)*60));}
  #contact .lead{font-size:calc(var(--p)*18);margin-bottom:calc(var(--p)*28);}
  .mail{font-size:calc(var(--p)*20);padding:calc(var(--p)*14) calc(var(--p)*26);}
  footer{flex-direction:column;margin-top:calc(var(--p)*110);}
  footer a{margin:0 16px 0 0;}
}
@media (prefers-reduced-motion: reduce){ .intro .l2,.intro .l3{opacity:1;} }