/* ============================================================
   AckMan — Paper World design system
   Quixotic Systems
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&family=Special+Elite&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --ink:#14253f;            /* deep navy ink */
  --ink-soft:#2c3f5c;
  --blue:#0a74c4;           /* brand bright blue */
  --blue-deep:#0a5a98;
  --sky:#5aa9e8;
  --sky-fill:#cfe6fa;
  --green:#3f9a34;          /* ack green */
  --green-deep:#2f7d27;
  --red:#bb453a;            /* pending / stamp red */

  --paper:#f4eede;          /* warm page cream */
  --paper-2:#efe7d3;
  --sheet:#fffdf7;          /* white-ish document */
  --yellow:#ffdf6e;
  --note-blue:#bfe0f7;
  --note-green:#cdeab0;
  --note-pink:#ffc9c2;

  --shadow-sm:0 2px 6px rgba(20,37,63,.10);
  --shadow:0 14px 30px -12px rgba(20,37,63,.30), 0 4px 10px -4px rgba(20,37,63,.18);
  --shadow-lift:0 26px 50px -18px rgba(20,37,63,.40), 0 8px 16px -8px rgba(20,37,63,.22);

  --r:18px;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(90,169,232,.10), transparent 30%),
    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.9' 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.035'/%3E%3C/svg%3E");
  line-height:1.55;
  overflow-x:hidden;
}

/* ---------- type ---------- */
h1,h2,h3,h4,.display{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.02;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none}
.lead{font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink-soft);line-height:1.5}
.mono{font-family:'JetBrains Mono',monospace}
.tw{font-family:'Special Elite',monospace}
.eyebrow{
  font-family:'Special Elite',monospace;text-transform:uppercase;
  letter-spacing:.22em;font-size:.78rem;color:var(--blue-deep);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.muted{color:var(--ink-soft)}
.green{color:var(--green-deep)}
.blue{color:var(--blue)}

/* ---------- wordmark ---------- */
.wordmark{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:center}
.wordmark .a{color:var(--ink)}
.wordmark .m{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.05rem;
  color:var(--fg);background:var(--bg);
  padding:.72em 1.35em;border:2.5px solid var(--ink);border-radius:14px;
  cursor:pointer;position:relative;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.blue-btn{--bg:var(--blue);border-color:var(--blue-deep);box-shadow:4px 4px 0 var(--blue-deep)}
.btn.blue-btn:hover{box-shadow:6px 6px 0 var(--blue-deep)}
.btn.blue-btn:active{box-shadow:1px 1px 0 var(--blue-deep)}
.btn.green-btn{--bg:var(--green);border-color:var(--green-deep);box-shadow:4px 4px 0 var(--green-deep)}
.btn.green-btn:hover{box-shadow:6px 6px 0 var(--green-deep)}
.btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:4px 4px 0 rgba(20,37,63,.18)}
.btn.ghost:hover{background:#fff}

/* ---------- paper sheet ---------- */
.sheet{
  position:relative;background:var(--sheet);border:2.5px solid var(--ink);
  border-radius:14px;padding:26px;box-shadow:var(--shadow);
}
.sheet.dogear::after{
  content:"";position:absolute;top:-2px;right:-2px;width:34px;height:34px;
  background:linear-gradient(225deg,var(--paper) 0 50%,transparent 50%);
  border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  border-bottom-left-radius:8px;
}

/* ruled paper inner lines */
.ruled{
  background-image:repeating-linear-gradient(transparent 0 31px, var(--sky-fill) 31px 32px);
  background-position:0 8px;
}

/* ---------- sticky notes ---------- */
.sticky{
  position:relative;background:var(--yellow);padding:24px 22px 26px;
  font-family:'Nunito',sans-serif;
  box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;
  border-radius:2px 2px 14px 2px;
}
.sticky.blue{background:var(--note-blue)}
.sticky.green-note{background:var(--note-green)}
.sticky.pink{background:var(--note-pink)}
.sticky:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-lift)}
/* tape strip */
.tape{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:30px;background:rgba(255,255,255,.42);
  border:1px solid rgba(20,37,63,.10);
  box-shadow:0 1px 2px rgba(20,37,63,.12);
}
.tape.blue-tape{background:rgba(90,169,232,.30)}

/* ---------- rubber stamp ---------- */
.stamp{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:'Special Elite',monospace;text-transform:uppercase;
  letter-spacing:.04em;color:var(--green-deep);
  border:3px solid var(--green-deep);border-radius:8px;
  padding:.3em .7em;font-size:1rem;
  transform:rotate(-8deg);
  opacity:.92;
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 2px rgba(63,154,52,.0);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.06' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.2 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.06' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.2 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;
}
.stamp.red{color:var(--red);border-color:var(--red)}
.stamp.blue-stamp{color:var(--blue-deep);border-color:var(--blue-deep)}
.stamp.big{font-size:1.5rem;padding:.35em .8em;border-width:4px}

/* ---------- pushpin & paperclip ---------- */
.pin{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #ff8a7a, var(--red) 60%);box-shadow:inset -2px -2px 3px rgba(0,0,0,.25),0 3px 4px rgba(20,37,63,.3);position:absolute}

/* ---------- reveal & motion ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}

[data-stamp]{opacity:0;transform:scale(1.7) rotate(var(--rot,-8deg))}
[data-stamp].in{animation:stampIn .42s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stampIn{
  0%{opacity:0;transform:scale(1.7) rotate(var(--rot,-8deg))}
  60%{opacity:1;transform:scale(.93) rotate(var(--rot,-8deg))}
  80%{transform:scale(1.04) rotate(var(--rot,-8deg))}
  100%{opacity:.92;transform:scale(1) rotate(var(--rot,-8deg))}
}

@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.floaty{animation:floaty 5.5s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important}
  [data-reveal],[data-stamp]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- site header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(6px);
  background:rgba(244,238,222,.82);
  border-bottom:2.5px solid var(--ink);
}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:72px}
.site-head .wordmark{font-size:1.6rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{
  font-family:'Fredoka',sans-serif;font-weight:500;color:var(--ink);
  padding:.45em .8em;border-radius:10px;font-size:1rem;
  border:2px solid transparent;transition:.15s;
}
.nav a:hover{background:#fff;border-color:var(--ink)}
.nav a.tag{font-family:'Nunito';font-size:.72rem;color:var(--ink-soft);border:1.5px dashed var(--ink-soft);padding:.2em .5em;border-radius:20px;margin-left:2px}
.hamb{display:none}

/* ---------- footer ---------- */
.site-foot{
  margin-top:40px;border-top:2.5px solid var(--ink);
  background:var(--paper-2);
}
.site-foot .wrap{padding-top:46px;padding-bottom:46px}
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot-fine{margin-top:34px;padding-top:22px;border-top:1.5px dashed rgba(20,37,63,.3);font-size:.9rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}

/* ---------- misc layout ---------- */
.grid{display:grid;gap:26px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.chip{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;background:#fff;border:2px solid var(--ink);border-radius:30px;padding:.4em .85em;font-weight:700;font-size:.85rem;box-shadow:var(--shadow-sm)}

.kicker-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- Ack-O-Matic demo ---------- */
.scrap{position:fixed;width:9px;height:12px;z-index:200;pointer-events:none;border-radius:1px;
  animation:scrapFly .9s ease-out forwards}
@keyframes scrapFly{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot))}
}
.ack-stamp{
  position:absolute;right:18px;bottom:64px;
  font-family:'Special Elite',monospace;text-transform:uppercase;letter-spacing:.04em;
  color:var(--green-deep);border:4px solid var(--green-deep);border-radius:8px;
  padding:.25em .7em;font-size:1.45rem;line-height:1;
  transform:rotate(-11deg) scale(1.8);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:.15em;
  box-shadow:0 4px 10px rgba(20,37,63,.18);background:rgba(255,253,247,.4);
}
.ack-stamp small{font-size:.55rem;letter-spacing:.06em;color:var(--green-deep);opacity:.85}
.ack-stamp.on{animation:stampSlam .45s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stampSlam{
  0%{opacity:0;transform:rotate(-11deg) scale(1.8)}
  60%{opacity:1;transform:rotate(-11deg) scale(.9)}
  100%{opacity:.95;transform:rotate(-11deg) scale(1)}
}
#ackRoster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#ackRoster li{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink-soft)}
#ackRoster li .dot{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--ink-soft);
  display:grid;place-items:center;flex:none;transition:.3s;font-family:'Fredoka';font-size:.9rem}
#ackRoster li.acked{color:var(--green-deep)}
#ackRoster li.acked .dot{background:var(--green);border-color:var(--green-deep);color:#fff}
#ackRoster li.acked .dot::after{content:"\2713"}
#ackRoster li .nm{position:relative}
#ackRoster li.acked .nm::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--green-deep);opacity:.5}

/* ---------- download cards ---------- */
.dl-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dl-card .os{font-family:'Fredoka';font-size:1.5rem;display:flex;align-items:center;gap:.45em}
.dl-card .arch{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--ink-soft);
  background:var(--paper);border:1.5px solid rgba(20,37,63,.25);border-radius:6px;padding:.2em .55em}
.dl-card .filemeta{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.osico{width:40px;height:40px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:10px;background:#fff;flex:none}

@media (max-width:860px){
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .nav{display:none}
  .ack-stamp{font-size:1.1rem;bottom:54px}
}