:root{
  --ink:#111c42;
  --red:#e34f43;
  --blue:#2454b8;
  --paper:#f4efe3;
  --paper-2:#fffaf0;
  --yellow:#f6dc6e;
  --mint:#bfe1d0;
  --black:#171717;
  --muted:#707070;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);max-width:100%;overflow-x:hidden}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",sans-serif;
  overflow-x:hidden;
  max-width:100%;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
.paper-noise{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.cursor-stamp{
  position:fixed;z-index:49;width:82px;height:82px;border:3px solid var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);font-weight:1000;font-size:18px;letter-spacing:.12em;
  pointer-events:none;translate:-50% -50%;opacity:0;transform:rotate(-13deg);transition:opacity .2s;
  mix-blend-mode:multiply
}
.topbar{
  position:fixed;z-index:100;top:14px;left:50%;transform:translateX(-50%);
  width:min(1160px,calc(100% - 28px));height:68px;padding:0 15px 0 18px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(244,239,227,.86);backdrop-filter:blur(20px);
  border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)
}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:42px;height:42px}
.logo span{display:grid;line-height:1.05}
.logo b{font-size:17px}
.logo small{font-size:9px;margin-top:5px;letter-spacing:.12em;color:var(--muted)}
.topbar nav{display:flex;gap:30px;font-size:11px;font-weight:1000;letter-spacing:.12em}
.top-cta{padding:12px 16px;background:var(--red);color:white;font-size:11px;font-weight:1000;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hero{
  min-height:1000px;padding:135px 6vw 75px;
  display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:6vw;
  position:relative;overflow:hidden
}
.hero-grid{
  position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(17,28,66,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(17,28,66,.08) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,black 0 70%,transparent)
}
.hero-copy{max-width:680px}
.issue-label{font:1000 10px/1 Arial;letter-spacing:.22em;color:var(--red)}
.hero h1,.day-copy h2,.closing-ticket h2{
  margin:26px 0;line-height:.89;letter-spacing:-.08em;font-size:clamp(72px,8vw,132px);font-weight:1000
}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em,.day-copy h2 em,.closing-ticket h2 em{font-style:normal;color:var(--red)}
.hero-copy>p:last-of-type,.day-copy>p:last-of-type{
  font-size:clamp(18px,1.6vw,25px);line-height:1.85;font-weight:800
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{
  min-height:60px;padding:0 23px;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:1000
}
.btn.solid{background:var(--ink);color:white;box-shadow:6px 6px 0 var(--red)}
.btn.outline{background:var(--paper-2);color:var(--ink)}
.btn.dark{background:transparent;color:white;border-color:white}
.hero-collage{position:relative;min-height:760px;perspective:1200px}
.sheet{
  position:absolute;margin:0;background:var(--paper-2);border:2px solid var(--ink);
  box-shadow:16px 18px 0 rgba(17,28,66,.16)
}
.sheet-main{width:420px;right:8%;top:4%;padding:22px;transform:rotate(4deg);z-index:4}
.sheet-side{width:235px;left:1%;bottom:3%;padding:13px;transform:rotate(-8deg);z-index:5}
.sheet-side img{height:410px;object-fit:cover;object-position:top}
.sheet-index{position:absolute;right:15px;top:10px;font:1000 58px/1 Arial;color:rgba(17,28,66,.10)}
.phone-cutout{height:640px;overflow:hidden;border:7px solid var(--ink)}
.phone-cutout img{width:100%;height:100%;object-fit:cover}
.sheet figcaption{font-size:11px;font-weight:1000;letter-spacing:.08em;padding-top:14px}
.red-stamp{
  position:absolute;z-index:4;right:-38px;top:28px;width:105px;height:105px;border-radius:50%;
  border:4px solid var(--red);display:grid;place-items:center;color:var(--red);font-weight:1000;transform:rotate(16deg);background:rgba(255,250,240,.85)
}
.sticky-note{
  position:absolute;z-index:7;width:175px;min-height:115px;padding:20px;
  font-size:12px;line-height:1.6;font-weight:800;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(17,28,66,.15)
}
.note-one{background:var(--yellow);left:5%;top:8%;transform:rotate(-5deg)}
.note-two{background:var(--mint);right:-2%;bottom:12%;transform:rotate(7deg)}
.sticky-note b{font-size:16px}
.tape{position:absolute;z-index:8;width:120px;height:33px;background:rgba(225,206,159,.72);backdrop-filter:blur(2px)}
.tape-a{right:32%;top:0;transform:rotate(-8deg)}
.tape-b{left:10%;bottom:6%;transform:rotate(13deg)}
.scribble{position:absolute;left:-3%;top:20%;width:520px;height:380px;z-index:2;overflow:visible}
.scribble path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 3.4s ease-in-out infinite alternate}
.scroll-label{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;font:1000 9px/1 Arial;letter-spacing:.2em
}
.scroll-label i{width:62px;height:2px;background:var(--red);position:relative}
.scroll-label i::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg)}
.horizontal-story{height:620vh;position:relative}
.horizontal-pin{
  position:sticky;top:0;height:100svh;min-height:760px;overflow:hidden;background:var(--paper);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)
}
.spread-head{
  position:absolute;z-index:20;left:4vw;top:95px;width:300px;
  background:var(--paper);padding:16px;border-left:8px solid var(--red)
}
.spread-head p{font:1000 9px/1 Arial;letter-spacing:.2em;color:var(--red)}
.spread-head h2{font-size:38px;line-height:1.05;letter-spacing:-.06em;margin:15px 0}
.spread-head h2 em{font-style:normal;color:var(--red)}
.spread-head span{font-size:10px;font-weight:900;color:var(--muted)}
.spread-track{
  height:100%;display:flex;width:500vw;will-change:transform
}
.spread-panel{
  width:100vw;height:100%;flex:0 0 100vw;position:relative;
  display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:5vw;
  padding:110px 6vw 50px
}
.panel-number{
  position:absolute;left:3vw;bottom:2%;font:1000 clamp(130px,18vw,290px)/.8 Arial;
  color:transparent;-webkit-text-stroke:2px rgba(17,28,66,.12);letter-spacing:-.08em
}
.panel-copy{position:relative;z-index:4;max-width:560px}
.panel-copy small{font:1000 9px/1 Arial;letter-spacing:.22em;color:var(--red)}
.panel-copy h3{font-size:clamp(48px,5vw,78px);line-height:1.02;letter-spacing:-.07em;margin:20px 0}
.panel-copy p{font-size:17px;line-height:1.85;font-weight:750;color:var(--muted)}
.panel-copy.light{color:white}.panel-copy.light p{color:#c8d2ec}.panel-copy.light small{color:#ff9a7d}
.panel-art{height:77vh;min-height:620px;position:relative;display:grid;place-items:center}
.device{overflow:hidden;border:7px solid var(--ink);background:var(--ink);box-shadow:18px 22px 0 rgba(17,28,66,.18)}
.device img{width:100%;height:100%;object-fit:cover}
.device-large{width:390px;height:690px;transform:rotate(4deg)}
.device-medium{width:350px;height:650px;transform:rotate(-4deg)}
.mini-label{
  position:absolute;z-index:4;padding:15px 18px;background:white;border:2px solid var(--ink);
  box-shadow:7px 7px 0 var(--red);font-size:11px;font-weight:900
}
.mini-label b{font-size:15px}.label-schedule{left:4%;top:20%;transform:rotate(-4deg)}.label-task{right:4%;bottom:18%;transform:rotate(5deg)}
.panel-task,.panel-search{background:var(--ink)}
.panel-task .panel-number,.panel-search .panel-number{-webkit-text-stroke-color:rgba(255,255,255,.16)}
.checklist-art{grid-template-columns:.9fr 1.1fr}
.kinetic-checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px;width:280px}
.kinetic-checklist li{
  padding:16px 18px 16px 50px;background:white;color:var(--ink);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--red);font-weight:1000;position:relative;transition:.35s
}
.kinetic-checklist li i{
  position:absolute;left:15px;top:50%;width:20px;height:20px;border:2px solid var(--red);
  transform:translateY(-50%);display:grid;place-items:center;font-style:normal;font-size:11px
}
.kinetic-checklist li.done{text-decoration:line-through;color:#8b8b8b;transform:translateX(18px)}
.kinetic-checklist li.done i{background:var(--red);color:white}
.stamp-button{margin-top:22px;border:2px solid white;background:transparent;color:white;padding:13px 16px;font-weight:1000;cursor:pointer}
.big-stamp{
  position:absolute;right:3%;top:8%;width:160px;height:160px;border:6px solid var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);font-size:36px;font-weight:1000;transform:rotate(17deg) scale(2);opacity:0;transition:.45s
}
.big-stamp.show{transform:rotate(17deg) scale(1);opacity:1}
.edit-flow{grid-template-columns:1fr auto 1fr auto 1fr;gap:14px}
.edit-flow .device{width:245px;height:520px}
.flow-one{transform:rotate(-6deg)}.flow-two{transform:rotate(3deg)}.flow-three{transform:rotate(-2deg)}
.flow-arrow{font-size:38px;font-weight:1000;color:var(--red)}
.fake-query{
  margin-top:25px;height:62px;border:2px solid white;display:flex;align-items:center;gap:14px;padding:0 16px
}
.fake-query b{font-size:27px}.fake-query i{height:2px;flex:1;background:linear-gradient(90deg,var(--red),transparent)}.fake-query span{font-size:11px}
.search-art{overflow:hidden}
.search-lens{
  position:absolute;width:460px;height:460px;border:9px solid var(--red);border-radius:50%;
  box-shadow:0 0 0 30px rgba(239,107,85,.15);animation:lens 4s ease-in-out infinite
}
.search-lens::after{content:"";position:absolute;width:170px;height:24px;background:var(--red);right:-120px;bottom:10px;transform:rotate(38deg);transform-origin:left;border:4px solid var(--ink)}
.device-search{width:360px;height:660px;z-index:3;transform:rotate(5deg)}
.panel-widget{background:#e9dfc9}
.widget-tabs{display:flex;gap:8px;margin-top:25px}
.widget-tabs button{border:2px solid var(--ink);background:var(--paper-2);padding:11px 18px;font-weight:1000;cursor:pointer}
.widget-tabs button.active{background:var(--red);color:white}
.widget-art{perspective:1200px}
.widget-card{position:absolute;border:7px solid var(--ink);overflow:hidden;box-shadow:14px 16px 0 rgba(17,28,66,.16);transition:.6s}
.widget-card img{width:100%;height:100%;object-fit:cover}
.main-widget{width:300px;height:610px;z-index:4;transform:rotate(3deg)}
.ghost-widget{opacity:.5}
.ghost-small{width:210px;height:430px;left:4%;top:16%;transform:rotate(-11deg) translateZ(-80px)}
.ghost-large{width:240px;height:510px;right:3%;bottom:7%;transform:rotate(12deg) translateZ(-70px)}
.horizontal-progress{position:absolute;z-index:25;left:0;right:0;bottom:0;height:5px;background:rgba(17,28,66,.12)}
.horizontal-progress i{display:block;width:var(--spread-progress,0%);height:100%;background:linear-gradient(90deg,var(--red),var(--blue))}
.day-switch{
  min-height:1100px;padding:135px 6vw;
  display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:5vw;position:relative
}
.day-copy h2{font-size:clamp(54px,6vw,96px)}
.day-carousel{display:flex;align-items:center;gap:18px}
.day-arrow{
  width:52px;height:52px;border:2px solid var(--ink);background:var(--paper-2);font-size:22px;font-weight:1000;cursor:pointer
}
.day-deck{position:relative;width:700px;height:700px;perspective:1200px}
.day-card{
  position:absolute;margin:0;width:300px;height:640px;background:var(--paper-2);border:2px solid var(--ink);
  padding:12px;box-shadow:12px 14px 0 rgba(17,28,66,.16);transition:.7s
}
.day-card img{width:100%;height:580px;object-fit:cover;border:5px solid var(--ink)}
.day-card figcaption{font-size:10px;font-weight:1000;padding-top:12px;letter-spacing:.1em}
.card-left{left:0;top:35px;transform:rotate(-10deg) scale(.88);opacity:.55}
.card-center{left:200px;top:0;z-index:4}
.card-right{right:0;top:35px;transform:rotate(10deg) scale(.88);opacity:.55}
.closing{
  min-height:1000px;padding:120px 7vw;background:var(--red);color:white;
  display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:7vw;position:relative;overflow:hidden
}
.closing::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:50px 50px;opacity:.35
}
.closing-ticket{
  position:relative;z-index:3;background:var(--paper-2);color:var(--ink);padding:55px;
  border:3px solid var(--ink);box-shadow:18px 20px 0 var(--ink)
}
.ticket-hole{position:absolute;width:60px;height:60px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.hole-one{left:-32px;top:50%}.hole-two{right:-32px;top:50%}
.ticket-brand{display:flex;align-items:center;gap:12px}.ticket-brand img{width:55px}.ticket-brand b{font-size:22px}
.closing-ticket h2{font-size:clamp(67px,7vw,110px)}
.closing-ticket p{font-size:18px;line-height:1.8;font-weight:800}
.closing-device{position:relative;z-index:3;display:grid;place-items:center}
.final-device{width:400px;height:780px;transform:rotate(7deg);box-shadow:20px 24px 0 var(--ink)}
footer{
  height:110px;padding:0 6vw;background:var(--ink);color:white;
  display:flex;align-items:center;justify-content:space-between;font:1000 9px/1 Arial;letter-spacing:.16em
}
.reveal{opacity:1;transform:none}
.motion .reveal{opacity:0;transform:translateY(35px);transition:.9s cubic-bezier(.2,.8,.2,1)}
.motion .reveal.in{opacity:1;transform:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes lens{0%,100%{transform:translate(-25px,-10px) scale(.92)}50%{transform:translate(55px,35px) scale(1.05)}}
@media(max-width:1050px){
  .topbar nav{display:none}
  .hero,.day-switch,.closing{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin:auto}.hero-actions{justify-content:center}
  .hero-collage{min-height:760px}
  .spread-head{display:none}
  .spread-panel{grid-template-columns:1fr;text-align:center;padding-top:75px}
  .panel-copy{margin:auto}.panel-art{height:58vh;min-height:500px}
  .edit-flow{transform:scale(.82)}
  .day-copy{margin:auto}
  .day-carousel{justify-content:center}
  .closing-device{order:-1}
}
@media(max-width:700px){
  .topbar{height:60px;top:9px}.logo small{display:none}.top-cta{padding:10px 12px}
  .cursor-stamp{display:none}
  .hero{min-height:930px;padding:125px 20px 70px}.hero h1{font-size:61px}
  .hero-collage{min-height:620px}
  .sheet-main{width:285px;right:4%}.phone-cutout{height:450px}
  .sheet-side{width:165px}.sheet-side img{height:285px}
  .sticky-note{width:125px;min-height:90px;padding:13px}.note-one{left:0}.note-two{right:0}
  .scribble{width:330px}
  .horizontal-story{height:680vh}
  .spread-panel{padding-left:18px;padding-right:18px}
  .panel-copy h3{font-size:43px}.panel-copy p{font-size:14px}
  .device-large,.device-medium,.device-search{width:245px;height:510px}
  .checklist-art{display:flex;gap:14px;justify-content:center}
  .kinetic-checklist{width:210px}.kinetic-checklist li{font-size:11px;padding:12px 10px 12px 39px}
  .edit-flow{display:grid;grid-template-columns:1fr 1fr;gap:12px;transform:none}
  .edit-flow .device{width:150px;height:330px}.flow-arrow{display:none}.flow-three{grid-column:1/3;justify-self:center}
  .search-lens{width:330px;height:330px}
  .main-widget{width:235px;height:490px}.ghost-small{width:145px;height:300px}.ghost-large{width:160px;height:340px}
  .day-switch,.closing{padding-left:20px;padding-right:20px}
  .day-carousel{max-width:100%;overflow:hidden}
  .day-copy h2{font-size:48px}
  .day-deck{width:330px;height:590px}.day-card{width:230px;height:520px}.day-card img{height:460px}
  .card-left{left:-75px}.card-center{left:50px}.card-right{right:-75px}
  .day-arrow{position:relative;z-index:8}
  .closing-ticket{padding:35px 25px}.closing-ticket h2{font-size:59px}
  .final-device{width:290px;height:590px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  .reveal,.motion .reveal{opacity:1!important;transform:none!important}
}