/* ===== GET REAL! — analog scrapbook ===== */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400;500;600;700&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;1,400&family=Bitter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root{
  --red:#bf3711;
  --red-deep:#9c2c0d;
  --red-dark:#7a2207;
  --kraft:#e0cec2;
  --kraft-deep:#cdb6a4;
  --brown:#4b2c23;
  --brown-tab:#af866e;
  --cream:#ece4d2;
  --paper:#efe7d6;
  --ink:#1a1410;
  --ink-soft:#2a2018;

  --font-slab:'Alfa Slab One', Georgia, serif;
  --font-mono:'Courier Prime','Courier New',monospace;
  --font-digital:'VT323','Courier New',monospace;
  --font-hand:'Caveat',cursive;
  --font-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;

  --maxw:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--red);
  background-image:url('assets/linen.png');
  background-size:4800px auto;
  background-repeat:repeat;
  background-position:center top;
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* paper grain overlay — reusable */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.10;
}
body::before{ /* global film grain on the red */
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.05;
}

/* ===================== TOP BAR / FILING-CABINET TABS ===================== */
.topbar{position:sticky;top:0;z-index:300;}

.timer-bar{
  background-color:var(--red);
  background-image:url('assets/linen.png');
  background-size:4800px auto;
  background-position:center;
  text-align:center;
  font-family:var(--font-digital);font-weight:400;letter-spacing:.12em;
  color:#15100c;font-size:25px;padding:8px 0 8px;
  border-bottom:1px solid rgba(0,0,0,.12);
  text-transform:uppercase;
}
.timer-bar .t{color:#15100c;}

/* ===================== HERO / HEADER ===================== */
.hero{
  position:relative;min-height:0;padding:30px 0 14px;
  max-width:var(--maxw);margin:0 auto;
}
/* full-bleed dyed-linen texture behind the whole first page, matching the tabs */
.hero::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;pointer-events:none;
  background-color:var(--red);
  background-image:url('assets/linen.png');
  background-size:4800px auto;
  background-repeat:repeat;
  background-position:center;
}
.hero-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:6px 40px 0;gap:30px;margin-top:-50px;
}
.brand{display:flex;align-items:center;gap:6px;margin-left:190px;
  transform:scale(.7);transform-origin:left top;}
.brand .logo{
  font-family:var(--font-digital);font-size:63px;font-weight:700;color:var(--ink);
  text-shadow:2px 2px 0 rgba(0,0,0,.12);line-height:.9;
}
.brand .logo .dot{color:#fff;}
.brand-text{display:flex;flex-direction:column;margin:80px 0 0 40px;}
.brand-tagline strong{font-family:var(--font-digital);font-weight:700;font-size:1.2em;}
.brand-tagline{font-family:var(--font-mono);font-weight:400;font-size:24px;line-height:1.3;
  letter-spacing:.04em;color:var(--ink);margin:14px 0 0;max-width:none;text-wrap:pretty;}
.brand .doodle{width:64px;transform:rotate(6deg) scaleX(-1);
  filter:brightness(0) saturate(100%);opacity:.92;margin-top:6px;}

/* ===================== FILING-CABINET FOLDER STACK (full-bleed top banner / nav) ===================== */
.folder-stack{
  position:relative; width:100%; z-index:210;
  margin:0; padding-top:9px; /* full-bleed top banner: colored folder bands run to both screen edges */
}
.folder{
  --sh:13px;                   /* shoulder slope */
  --th:30px;                   /* tab height (kept as small as stays legible) */
  --body:34px;                 /* folder band depth */
  /* left inset of the centered content column, so notches stay grouped with the page on wide screens */
  --col-left:calc((100% - min(100%, var(--maxw))) / 2);
  position:relative; display:block;
  height:calc(var(--th) + var(--body));
  margin-top:calc(var(--th) * -1); /* cascade: bodies tile seamlessly (no red gaps), tabs ride up */
  background-size:cover; background-position:center;
  clip-path:polygon(
    0 100%, 0 var(--th),
    var(--tx) var(--th),
    calc(var(--tx) + var(--sh)) 0,
    calc(var(--tx) + var(--tw) - var(--sh)) 0,
    calc(var(--tx) + var(--tw)) var(--th),
    100% var(--th),
    100% 100%
  );
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.28));
  transition:transform .2s cubic-bezier(.34,1.3,.5,1);
}
.folder:first-child{margin-top:0;}
.fo-home{background-image:url('assets/tabs/manila.png');    z-index:2; --th:40px; --tx:calc(var(--col-left) + 38px);  --tw:124px;}
.fo-proj{background-image:url('assets/tabs/terracotta.png');z-index:3; --tx:calc(var(--col-left) + 243px); --tw:110px;}
.fo-join{background-image:url('assets/tabs/sage.png');      z-index:4; --tx:calc(var(--col-left) + 77px);  --tw:152px;}
.fo-curr{background-color:var(--red);
         background-image:url('assets/linen.png');
         background-size:4800px auto; background-position:center; background-repeat:repeat;
         filter:none;
         z-index:5; --th:30px; --tx:calc(var(--col-left) + 269px); --tw:84px;}
.fo-label{
  position:absolute; top:5px; left:var(--tx); width:var(--tw);
  height:calc(var(--th) - 11px);
  object-fit:contain; object-position:center;
  filter:brightness(0); opacity:.84; pointer-events:none;
}
.folder:hover{transform:translateY(3px);}
.folder:hover .fo-label{opacity:1;}
.folder.active .fo-label{opacity:1;}

/* ===================== FLIP CLOCK ===================== */
.clock-wrap{position:relative;margin:-291px 225px 0 auto;width:600px;max-width:94vw;
  transform:scale(.7);transform-origin:right top;
  display:flex;flex-direction:column;align-items:center;z-index:5;
  /* reserve the taller result-state height so the red page never expands when results show */
  min-height:495px;justify-content:flex-start;
  /* trim the unused layout footprint left by the 0.7 scale so no empty red sits below the clock */
  margin-bottom:-170px;}

/* ===================== HAND-DRAWN SCREEN-TIME CLOCK ===================== */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.clockstage{position:relative; width:690px; max-width:94vw; aspect-ratio:591/416;
  transform:translateY(-46px) rotate(-1.5deg);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.12));}

.ck-face, .ck-result{position:absolute; inset:0;}
.ck-face-img, .ck-result-img, .ck-hand{position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain; display:block;}
/* darken the doodle ink toward black */
.ck-result-img, .ck-face-img, .ck-hand{filter:brightness(.55) contrast(1.15);}

/* two independent hands, both pivoting on the painted clock hub */
.ck-hand{transform-origin:48.4% 33.7%;
  transform:translate(-20.1%,5.5%) rotate(var(--ang)) scale(.82);
  pointer-events:none;}
/* nudge the long hand a little clockwise (to the right) */
.ck-hand-long{transform:translate(-20.1%,5.5%) rotate(calc(var(--ang) + 8deg)) scale(.82);}
/* idle: long hand ticks forward one step per second; short hand advances
   30° only when the long hand has completed a full revolution (every 60s) */
.clockstage.idle .ck-hand-long {animation:ck-tick-long  60s steps(60, end) infinite;}
.clockstage.idle .ck-hand-short{animation:ck-tick-short 720s steps(12, end) infinite;}
/* calculating: long hand whirls round many turns, short hand trails a little */
.clockstage.spinning .ck-hand-long {animation:ck-spin-long  1.95s cubic-bezier(.22,.6,.16,1) forwards;}
.clockstage.spinning .ck-hand-short{animation:ck-spin-short 1.95s cubic-bezier(.22,.6,.16,1) forwards;}
@keyframes ck-tick-long {from{--ang:0deg;} to{--ang:360deg;}}
@keyframes ck-tick-short{from{--ang:0deg;} to{--ang:360deg;}}
@keyframes ck-spin-long {from{--ang:0deg;} to{--ang:1980deg;}}
@keyframes ck-spin-short{from{--ang:0deg;} to{--ang:540deg;}}
@media (prefers-reduced-motion: reduce){
  .clockstage.idle .ck-hand{animation:none;}
}

/* solid dot masking the messy pivot where the hands meet */
.ck-hub{position:absolute; left:28.3%; top:39.2%; width:5.4%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; background:#15100c; z-index:7;
  pointer-events:none;}

/* the two fill-in blanks */
.ck-input{position:absolute; transform:translate(-50%,-50%);
  width:8.6%; height:8%; padding:0; border:none; outline:none; background:transparent;
  text-align:center; font-family:var(--font-hand); color:#1a1410; font-weight:700;
  font-size:clamp(18px,3.4vw,30px); line-height:1; z-index:6;}
.ck-input::-webkit-outer-spin-button,.ck-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ck-input[type=number]{-moz-appearance:textfield;}
.ck-in-hours{left:67.9%; top:29.3%;}
.ck-in-age{left:67.9%; top:57.9%;}

/* result screen — aligned onto the same TV box, swapped in on .done.
   NOTE: kept as a static opacity toggle (no transition/animation on the reveal
   itself) so it never depends on the animation timeline to become visible. */
.ck-face{opacity:1;}
.ck-result{opacity:0; pointer-events:none;
  transform:translate(-13.5%,5.3%) scale(1.02);}
.clockstage.done .ck-result{opacity:1; pointer-events:auto;}
.clockstage.done .ck-face{opacity:0; pointer-events:none;}
.ck-years,.ck-pct{position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-hand); font-weight:700; color:#1a1410;
  text-align:center; line-height:1; z-index:7;}
.ck-years{left:45%; top:32.9%; font-size:clamp(20px,4vw,32px);}
.ck-pct{left:44.2%; top:82.5%; font-size:clamp(14px,2.6vw,21px);}

/* wind button */
.fc-set{font-family:var(--font-digital);font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;font-size:23px;line-height:1;background:var(--ink);color:var(--cream);
  border:none;border-radius:7px;padding:9px 24px;cursor:pointer;margin-top:-104px;align-self:center;
  position:relative;z-index:6;
  box-shadow:0 4px 0 #000, 0 6px 8px rgba(0,0,0,.3);transition:transform .1s,box-shadow .1s;}
.fc-set:hover{transform:translateY(1px);}
.fc-set:active{transform:translateY(4px);box-shadow:0 0 0 #000,0 2px 4px rgba(0,0,0,.3);}
.fc-set.reset{background:#7a4a2f;}
/* nudge Calculate a little to the left */
#fcSet{left:-22px;}
/* Start over: black, slightly left, significantly up */
#fcReset{background:var(--ink);left:-18px;margin-top:-34px;}
.fc-set[hidden]{display:none;}

/* ===================== STATS KRAFT BAND ===================== */
.stats{position:relative;background:transparent;padding:30px 0 46px;overflow:hidden;z-index:5;}
.stats .inner{width:calc(100% + 28px);margin:-40px 0 0 -214px;position:relative;
  transform:scale(.805) scaleX(.9) scaleY(1.15);transform-origin:center;
  padding:58px 230px 88px;}
.stats .inner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url('assets/stats-card-flipped.png') no-repeat center;
  background-size:100% 100%;
  transform:scaleY(.75);transform-origin:center top;}
.stats-grid{position:relative;display:grid;grid-template-columns:1fr .7fr 1fr;
  gap:24px;align-items:center;}
.stats-grid img{margin:0 auto;}
.stat-children{max-width:330px;position:relative;top:20px;}
.stat-dial{max-width:150px;filter:contrast(1.05);position:relative;left:35px;transform:scaleX(1.278);transform-origin:center;transition:transform .25s ease;}
.stat-dial:hover{animation:dial-rock .5s ease-in-out 1;}
@keyframes dial-rock{
  0%,100%{transform:scaleX(1.278) rotate(0deg);}
  25%{transform:scaleX(1.278) rotate(-6deg);}
  75%{transform:scaleX(1.278) rotate(6deg);}
}
.stat-years{max-width:330px;position:relative;left:85px;}
.stats-row2{position:relative;display:grid;grid-template-columns:120px 1fr 150px 120px;
  gap:18px;align-items:center;align-content:center;min-height:344px;margin-top:26px;}
.stat-ripple{max-width:400px;position:relative;top:-75px;}
.stat-cat{max-width:90px;position:relative;left:-100px;top:-130px;transform:scaleX(1.278);transform-origin:center;transition:transform .25s ease;}
.stat-cat:hover{animation:cat-flip .5s ease-in-out 1;}
@keyframes cat-flip{
  0%{transform:perspective(600px) scaleX(1.278) rotateY(0deg);}
  100%{transform:perspective(600px) scaleX(1.278) rotateY(360deg);}
}
.stat-sun{max-width:195px;position:relative;left:40px;top:-200px;transform:translateY(95px) scale(0.663) scaleX(1.278);transform-origin:center;transition:transform .25s ease;}
.stat-sun:hover{animation:sun-rock .5s ease-in-out 1;}
@keyframes sun-rock{
  0%,100%{transform:translateY(95px) scale(0.663) scaleX(1.278) rotate(0deg);}
  25%{transform:translateY(95px) scale(0.663) scaleX(1.278) rotate(-6deg);}
  75%{transform:translateY(95px) scale(0.663) scaleX(1.278) rotate(6deg);}
}
.stat-kid{max-width:110px;}
.stat-foot{position:absolute;left:935px;top:445px;max-width:260px;}
.scallop{height:26px;background:var(--red);position:relative;}
.scallop::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:26px;
  background:var(--kraft);
  -webkit-mask:radial-gradient(circle at 13px 0,transparent 12px,#000 13px) repeat-x;
  mask:radial-gradient(circle at 13px 0,transparent 12px,#000 13px) repeat-x;
  -webkit-mask-size:26px 26px;mask-size:26px 26px;
}

/* ===================== GENERIC SECTION ===================== */
.section{max-width:var(--maxw);margin:0 auto;padding:80px 40px;position:relative;}
.section.wide{max-width:100%;}

/* ===== THIS CANNOT BE THE NORM ===== */
.norm{position:relative;margin-top:-150px;padding:74px 0 140px;min-height:660px;overflow:visible;z-index:1;}
.norm-stage{position:relative;max-width:1160px;margin:0 auto;height:600px;}
.scrap{position:absolute;}
.scrap img{display:block;box-shadow:0 14px 26px -10px rgba(0,0,0,.5);}
/* library date card bleeding off the LEFT edge */
.norm-lib{left:-150px;top:45px;width:380px;transform:rotate(-4deg);z-index:4;}
/* second date card, rotated 90deg, tucked UNDER the envelope (peeks out bottom) */
.norm-stamp{left:auto;right:85px;top:-340px;width:380px;transform:rotate(90deg);transform-origin:center;z-index:2;}
/* cardboard envelope — centrepiece, tucked partly under the left card */
.norm-card{left:50%;top:-99px;transform:translate(calc(-50% - 48px), 0) rotate(-1deg);
  width:880px;max-width:94vw;z-index:3;position:relative;}
.norm-card .cardboard{width:100%;box-shadow:0 22px 40px -14px rgba(0,0,0,.55);}
.norm-card .l-top{position:absolute;left:50%;top:5.5%;width:60%;
  transform:translateX(-50%);box-shadow:none;}
.norm-card .l-mid{position:absolute;left:53.5%;top:50%;width:23%;
  transform:translateX(-50%) rotate(-1deg);box-shadow:none;z-index:2;}
.norm-card .l-bot{position:absolute;left:50%;bottom:1%;width:60%;
  transform:translateX(-50%);box-shadow:none;}
/* view-master reel peeking up from the bottom-centre */
.norm-reel{left:50%;bottom:-300px;width:340px;transform:translateX(-50%);z-index:0;}
.norm-reel img{box-shadow:none;filter:drop-shadow(0 -4px 14px rgba(0,0,0,.3));}
/* wake-up doodle — center-right of the envelope */
.norm-wake{position:absolute;right:5%;top:56%;width:240px;z-index:4;
  transform:translateY(-50%) rotate(-5deg);
  filter:brightness(0);}
/* ring fast & urgent like an alarm clock, then settle after .8s */
.norm-wake.wiggle:hover{animation:norm-wake-rock .1s ease-in-out 8 both;}
@keyframes norm-wake-rock{
  0%,100%{transform:translateY(-50%) rotate(-13deg);}
  50%    {transform:translateY(-50%) rotate(3deg);}
}

/* ===================== VIEW-MASTER ===================== */
.who{position:relative;padding:16px 0 40px;text-align:center;margin-top:-150px;z-index:2;}
.who-eyebrow{font-family:var(--font-mono);letter-spacing:.34em;
  text-transform:uppercase;color:#ffd9cd;font-size:14px;font-weight:700;
  margin-bottom:18px;}
.reel-stage{position:relative;width:min(125vw,122vh,700px);max-width:none;margin:-165px 0 0 auto;
  transform:translateX(-110px);
  aspect-ratio:1/1;}
.reel-img{position:absolute;inset:0;width:100%;height:100%;
  transition:transform 1.1s cubic-bezier(.3,.8,.25,1);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.32));
  /* punch a small spindle hole in the dead centre so the red page shows through */
  -webkit-mask:radial-gradient(ellipse 3.4% 3.4% at 50% 50%, #0000 0 80%, #000 100%);
          mask:radial-gradient(ellipse 3.4% 3.4% at 50% 50%, #0000 0 80%, #000 100%);}
/* small cream plug that fades in to fill the hole once a section is chosen */
.reel-lens{position:absolute;left:50%;top:50%;width:6.8%;height:6.8%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:#edefda;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18);
  opacity:0;transition:opacity .55s ease;z-index:2;pointer-events:none;}
.reel-stage.section-active .reel-lens{opacity:1;}
.reel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46%;text-align:center;z-index:4;}
.reel-state{display:none;}
.reel-state.active{display:block;animation:fadein .6s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.reel-state h3{margin:0 0 8px;}
.reel-state h3 img{height:54px;width:auto;margin:0 auto;filter:brightness(0);}
.reel-state.who-default h3 img{height:146px;transform:translateY(-26px);}
.reel-state p{font-family:var(--font-sans);font-size:18px;line-height:1.48;
  color:var(--ink);margin:0;text-wrap:pretty;}
.reel-state[data-state=about] p{font-size:14.5px;line-height:1.42;}

/* founder photo that floats in to the LEFT of the reel when About Us is chosen */
.founders-photo{position:absolute;left:1%;top:45%;width:min(35vw,320px);height:auto;
  z-index:6;background:#fbf6ec;padding:10px 10px 44px;
  box-shadow:0 22px 40px -14px rgba(0,0,0,.55);
  transform:translateY(-50%) translateX(-40px) rotate(-4deg);
  opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s cubic-bezier(.3,.8,.25,1);}
.who.show-founders .founders-photo{opacity:1;transform:translateY(calc(-50% - 130px)) translateX(150px) rotate(-4deg);}
/* keep the reel in place; the founder photo simply floats in to its left */
@media (max-width:900px){.founders-photo{display:none;}}
.reel-arrow{font-size:34px;color:var(--ink);}
.reel-tabs{position:absolute;inset:0;z-index:5;pointer-events:none;}
.reel-tab{position:absolute;pointer-events:auto;cursor:pointer;
  background:none;border:none;padding:6px;transition:transform .2s;}
.reel-tab img{filter:brightness(0);transition:transform .2s;}
.reel-tab:hover img{transform:scale(1.1) rotate(-2deg);}
/* mission carries a baked-in 20deg tilt, so its hover keeps that tilt and just zooms */
.reel-tab.tab-mission:hover img{transform:scale(1.1) rotate(18deg);}
.reel-tab.active img{filter:brightness(0) invert(1);}
.reel-tab .lbl-mission{height:72px;transform:rotate(20deg);}
.reel-tab .lbl-theory{height:74px;}
.reel-tab .lbl-about{height:64px;}
.tab-mission{left:11%;top:28%;}
.tab-theory{left:42.5%;top:15.5%;transform:translate(-50%,-50%);}
.tab-about{right:11.5%;top:31%;}
.who-deco{position:absolute;pointer-events:none;filter:brightness(0);opacity:.9;}
.deco-grandfather{left:2%;top:6%;width:120px;}
.deco-calendar{right:3%;bottom:calc(4% - 40px);width:209px;}
.deco-bulb1{left:6%;bottom:14%;width:70px;}
.deco-bulb2{right:7%;top:12%;width:60px;}

/* ===================== REAL QUOTES ===================== */
.quotes{position:relative;padding:30px 0 70px;margin-top:-340px;z-index:20;}
.quote-card{position:relative;width:100%;left:auto;transform:translateX(-78px) scale(.693,.77);transform-origin:left center;max-width:var(--maxw);margin:0 auto;
  background:url('assets/t/notepad-page.png') no-repeat center;
  background-size:100% 100%;
  padding:40px 9% 7.5%;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
}
.quote-title{text-align:center;margin-bottom:12px;margin-top:40px;}
.quote-title img{height:64px;width:auto;margin:0 auto;filter:brightness(0);}
.quote-grid{position:relative;display:flex;flex-wrap:wrap;gap:6px 30px;
  justify-content:center;align-items:flex-start;}
.quote-grid img{filter:brightness(0);}
.q1{width:360px;transform:translate(-150px,5px) rotate(-1.5deg);}
.q2{width:650px;transform:translate(150px,-126px) rotate(1deg);}
.quote-cta{text-align:center;margin-top:-130px;}
.quote-cta img{height:74px;width:auto;margin:0 auto;filter:brightness(0);}

/* ===================== STUB SECTIONS ===================== */
.stub{padding:70px 0 30px;text-align:center;}
/* first stub tucks up to overlap the bottom of the notepad */
.stub-first{padding-top:0;margin-top:-180px;position:relative;z-index:30;}
.stub-first .banner{transform:translate(250px,-20px);position:relative;z-index:10;}
/* Projects banner runs larger than the other stubs */
.stub-first .banner img.torn{width:820px;}
.stub-first .banner .title{height:66px;}
.stub .banner{position:relative;display:inline-block;}
.stub .banner img.torn{width:680px;max-width:90vw;}
.stub .banner .title{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  height:54px;}
.stub .banner .title img{height:100%;width:auto;filter:brightness(0);}
.stub .note{font-family:var(--font-hand);font-size:24px;color:#ffe1d8;
  margin-top:22px;transform:rotate(-1deg);}
/* film strip — floated to the right edge */
.filmstrip{display:block;width:940px;max-width:90vw;height:auto;
  margin:-90px 0 0 auto;position:relative;z-index:2;}
/* kraft card — tucked under the film strip, flush to the right screen edge */
.kraftcard{display:block;width:1280px;max-width:100vw;height:auto;
  margin:-75px 100px 0 auto;position:relative;z-index:1;
  transform:scaleY(.9);transform-origin:top center;}
/* photo taped onto the left of the beige card */
.kraft-photo{position:absolute;left:calc(7% + 50px);top:760px;z-index:3;
  width:568px;max-width:50%;height:auto;
  border:4px solid #1a1410;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
  transform:rotate(0deg);}
/* zine blurb on the beige card, right of the photo — VT323 like the timer */
.kraft-title{position:absolute;left:calc(7% + 660px);top:791px;z-index:3;
  width:min(33%,450px);text-align:left;
  font-family:var(--font-digital);font-weight:400;
  font-size:38px;line-height:1.02;color:var(--ink);
  -webkit-font-smoothing:antialiased;}
.kraft-copy{position:absolute;left:calc(7% + 660px);top:865px;z-index:3;
  width:min(33%,450px);text-align:left;
  font-family:var(--font-digital);font-weight:400;
  font-size:25px;line-height:1.18;color:var(--ink-soft);
  -webkit-font-smoothing:antialiased;}
/* small scrollable zine viewer, bottom-right of the beige card */
.zine-viewer{position:absolute;right:calc(4% + 525px);top:960px;z-index:6;
  width:145px;transform:rotate(-5deg) scale(0.75);transform-origin:center;cursor:pointer;}
.zine-scroll{width:100%;height:214px;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  border:3px solid #1a1410;background:#1a1410;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  -webkit-overflow-scrolling:touch;}
.zine-scroll img{display:block;width:100%;height:auto;scroll-snap-align:start;}
.zine-scroll::-webkit-scrollbar{width:7px;}
.zine-scroll::-webkit-scrollbar-thumb{background:#7a4a2f;border-radius:4px;}
.zine-scroll::-webkit-scrollbar-track{background:#e0cec2;}
.zine-hint{display:block;margin-top:7px;text-align:center;white-space:nowrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;line-height:1.4;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
/* zine lightbox — grows to ~2/3 of the screen on click */
.zine-modal{position:fixed;inset:0;z-index:9999;
  background:rgba(20,15,12,.82);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;}
.zine-modal.open{opacity:1;visibility:visible;}
.zine-modal-scroll{height:78vh;width:auto;aspect-ratio:1398/2000;max-width:92vw;
  overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;
  border:5px solid #1a1410;background:#1a1410;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:scale(.25);opacity:.4;
  transition:transform .32s cubic-bezier(.2,.8,.25,1),opacity .32s ease;
  -webkit-overflow-scrolling:touch;}
.zine-modal.open .zine-modal-scroll{transform:scale(1);opacity:1;}
.zine-modal-scroll img{display:block;width:100%;height:auto;scroll-snap-align:start;}
.zine-modal-scroll::-webkit-scrollbar{width:10px;}
.zine-modal-scroll::-webkit-scrollbar-thumb{background:#7a4a2f;border-radius:5px;}
.zine-modal-scroll::-webkit-scrollbar-track{background:#e0cec2;}
/* roadtrip map collage — to the right, layered on top of the film strip */
.roadmap{display:block;width:420px;max-width:42vw;height:auto;
  position:absolute;right:4%;top:284px;z-index:5;
  transform:rotate(0deg);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));}
/* roadtrip description — to the left of the collage */
.roadtrip-copy{position:absolute;right:36%;top:240px;z-index:6;transform:translateX(-40px);
  width:min(33%,380px);text-align:left;}
.roadtrip-copy p{font-family:var(--font-mono);font-weight:400;font-size:15px;line-height:1.38;
  color:var(--ink);margin:0 0 11px;text-wrap:pretty;text-align:justify;
  text-shadow:0 0 .55px var(--ink),0 0 .55px var(--ink);}
.roadtrip-copy p:last-child{margin-bottom:0;}
/* heading above the collage, same mono font as the body copy */
.roadtrip-heading{position:absolute;right:4%;top:242px;z-index:6;
  width:420px;max-width:42vw;text-align:center;
  font-family:var(--font-mono);font-weight:700;font-size:26px;
  letter-spacing:.06em;color:var(--ink);}

/* ===================== FOOTER ===================== */
.foot{background:var(--brown);color:var(--cream);position:relative;
  padding:64px 40px 70px;margin-top:30px;}
.foot .inner{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:40px;align-items:start;}
.foot h4{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:13px;color:#e9b9a6;margin:0 0 16px;font-weight:700;}
.foot .big{font-family:var(--font-slab);font-size:30px;line-height:1;margin:0 0 12px;
  color:var(--cream);}
.foot .big .dot{color:var(--red);}
.foot p{font-family:var(--font-sans);font-size:15px;line-height:1.6;margin:0 0 8px;
  color:#e7d8cb;}
.foot a.link{font-family:var(--font-mono);font-size:14px;display:block;margin:6px 0;
  color:#f0ddd2;border-bottom:1px dashed rgba(255,255,255,.3);width:fit-content;
  padding-bottom:2px;}
.foot a.link:hover{color:#fff;border-color:#fff;}
.foot .phone{position:absolute;right:5%;top:-46px;width:140px;
  filter:brightness(0) invert(1);opacity:.85;transform:rotate(-6deg);}
.foot .ph{font-family:var(--font-hand);font-size:18px;color:#e9b9a6;}
.foot .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);
  margin-top:30px;padding-top:18px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.05em;color:#c9a99b;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* ===================== REVEAL ANIM ===================== */
.reveal{opacity:0;transition:opacity .8s ease;}
.reveal.in{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;}
}

/* hover wiggle on doodles */
.wiggle{transition:transform .25s ease;}
.wiggle:hover{animation:wig .4s ease;}
@keyframes wig{0%,100%{transform:rotate(0);}25%{transform:rotate(-4deg);}75%{transform:rotate(4deg);}}

/* ===================== RESPONSIVE ===================== */
/* Hero stacks earlier so the big clock never collides with the logo */
@media (max-width:1080px){
  .hero{min-height:0;}
  .hero-top{flex-direction:column;align-items:center;gap:18px;}
  .clock-wrap{margin:24px auto 0;justify-content:center;}
}
@media (max-width:900px){
  .hero{min-height:0;}
  .hero-top{flex-direction:column;align-items:center;gap:18px;}
  .clock-wrap{margin:24px auto 0;justify-content:center;}
  .stats-grid{grid-template-columns:1fr;}
  .stats-row2{grid-template-columns:1fr;justify-items:center;}
  .stat-foot{position:static;margin:10px auto 0;}
  .foot .inner{grid-template-columns:1fr;}
  .norm-stage{height:auto;}
  .norm .scrap{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    transform:none;margin:14px auto;display:block;}
  .norm-card{transform:none;}
}
@media (max-width:600px){
  /* keep the left-grouped labels on-screen on phones */
  .fo-home{--tx:2%;--tw:78px;}
  .fo-proj{--tx:22%;--tw:84px;}
  .fo-join{--tx:4%;--tw:118px;}
  .fo-curr{--tx:24%;--tw:94px;}
  .fo-label{opacity:1;}
}