/* ==========================================================================
   KARPANAI FOUNDATION — "Sketchbook" Design System
   Where ideas take flight.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Fredoka:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --ink:        #143649;
  --ink-soft:   #34586C;
  --brand:      #2CA9D2;
  --brand-text: #136680;
  --yellow:     #F4C542;
  --yellow-soft:#FBE29B;
  --paper:      #EDF7FA;
  --paper-dim:  #DFF0F5;
  --charcoal:   #171717;
  --coral:      #E8734A;
  --line:       rgba(20,54,73,0.14);
  --line-soft:  rgba(20,54,73,0.08);
  --shadow:     rgba(20,54,73,0.16);

  --font-hand:   'Caveat', cursive;
  --font-head:   'Fredoka', sans-serif;
  --font-body:   'Inter', sans-serif;

  --radius: 22px;
  --wrap: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-locked{ overflow:hidden; }
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-head); margin: 0 0 .5em; color: var(--ink); font-weight: 600; }
p{ margin: 0 0 1em; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

/* subtle notebook-paper texture on the whole page */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index: 0;
  opacity:.5;
  background-image:
    radial-gradient(rgba(20,54,73,0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Hand-drawn utility bits
   ========================================================================== */

/* wobbly underline drawn under a highlighted word */
.doodle-underline{
  position: relative;
  display: inline-block;
}
.doodle-underline svg{
  position:absolute;
  left: -2%;
  bottom: -.18em;
  width: 104%;
  height: .5em;
  overflow: visible;
}
.doodle-underline svg path{
  stroke: var(--coral);
  stroke-width: 6;
  fill:none;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1s ease;
}
.doodle-underline.in-view svg path{ stroke-dashoffset: 0; }

.tape{
  position:absolute;
  width:70px; height:26px;
  background: rgba(244,197,66,.55);
  border: 1px solid rgba(20,54,73,.12);
  box-shadow: 0 3px 6px rgba(20,54,73,.12);
}

.torn-divider{
  width:100%;
  height: 46px;
  display:block;
  margin-top:-1px;
}

.eyebrow{
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--coral);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.4em;
  transform: rotate(-1.5deg);
}
.eyebrow .pin{ font-size:1rem; }

.badge{
  display:inline-block;
  font-family: var(--font-hand);
  font-size:1.15rem;
  color: var(--ink);
  border:2px solid var(--ink);
  border-radius: 999px;
  padding: .15em 1em;
  transform: rotate(-2deg);
  background: var(--yellow-soft);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-head);
  font-weight:600;
  font-size: 1rem;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  box-shadow: 4px 4px 0 rgba(20,54,73,.35);
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(20,54,73,.35); }
.btn:active{ transform: translate(0,0); box-shadow: 2px 2px 0 rgba(20,54,73,.35); }
.btn.btn-yellow{ background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(20,54,73,.25); }
.btn.btn-ghost{ background: transparent; color: var(--ink); }
.btn.btn-coral{ background: var(--coral); border-color: var(--coral); color:var(--paper); box-shadow: 4px 4px 0 rgba(232,115,74,.35);}

.btn-row{ display:flex; flex-wrap:wrap; gap: 16px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 2px solid var(--line);
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(237,247,250,.9);
  backdrop-filter: blur(6px);
  z-index:-1;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 28px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-head);
  font-weight:600;
  font-size:1.25rem;
  color: var(--ink);
}
.nav-brand img{ height:44px; width:auto; }
.nav-brand small{
  display:block;
  font-family: var(--font-hand);
  font-size: .95rem;
  color: var(--coral);
  font-weight:600;
  margin-top:-2px;
}
.nav-links{
  display:flex; align-items:center; gap: 26px;
  font-family: var(--font-head);
  font-size: .96rem;
  font-weight:500;
}
.nav-links a{
  position:relative;
  padding: 4px 2px;
  color: var(--ink-soft);
}
.nav-links a:hover, .nav-links a.active{ color: var(--brand-text); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:3px; background: var(--yellow);
  border-radius: 3px;
}
.nav-cta{
  font-family: var(--font-hand);
  font-size:1.05rem;
  color: var(--ink);
  background: var(--yellow);
  padding: .35em 1em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  transform: rotate(-2deg);
}
.nav-toggle{
  display:none;
  position:relative;
  width:26px; height:20px;
  background:none; border:none; padding:0;
  cursor:pointer;
  z-index:2;
}
.nav-toggle span{
  position:absolute; left:0;
  width:26px; height:3px;
  background: var(--ink); border-radius:2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:8.5px; }
.nav-toggle span:nth-child(3){ top:17px; }
.nav-toggle.open span:nth-child(1){ top:8.5px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform: scale(0); }
.nav-toggle.open span:nth-child(3){ top:8.5px; transform:rotate(-45deg); }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0;
    background: var(--paper);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding: 90px 36px 60px;
    gap: 18px;
    font-size: 1.4rem;
    opacity:0;
    visibility:hidden;
    transform: translateY(-14px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
    overflow-y:auto;
  }
  .nav-links.open{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
  }
  .nav-links li{
    opacity:0;
    transform: translateX(-18px);
    transition: opacity .32s ease, transform .32s ease;
  }
  .nav-links.open li{ opacity:1; transform: translateX(0); }
  .nav-links.open li:nth-child(1){ transition-delay:.06s; }
  .nav-links.open li:nth-child(2){ transition-delay:.10s; }
  .nav-links.open li:nth-child(3){ transition-delay:.14s; }
  .nav-links.open li:nth-child(4){ transition-delay:.18s; }
  .nav-links.open li:nth-child(5){ transition-delay:.22s; }
  .nav-links.open li:nth-child(6){ transition-delay:.26s; }
  .nav-links.open li:nth-child(7){ transition-delay:.30s; }
  .nav-links.open li:nth-child(8){ transition-delay:.34s; }
  .nav-links.open li:nth-child(9){ transition-delay:.38s; }
  .nav-links a{ display:inline-block; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding: 90px 0 70px;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 50px;
  align-items:center;
  position:relative; z-index:2;
}
.hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.14;
  letter-spacing:-.01em;
}
.hero .lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-art{
  position:relative;
  min-height: 420px;
  display:flex;
  align-items:center;
}
.hero-art-blob{
  position:absolute;
  top:50%; left:50%;
  width:92%;
  aspect-ratio: 1/1;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: var(--yellow-soft);
  opacity:.55;
}
.scrap-item.hero-photo{
  width:100%;
  max-width: 480px;
  margin: 0 auto;
}
.hero-photo .scrap-photo{ height:auto; }
.scrap-item.floaty:hover{ animation-play-state: paused; }
.floaty{ animation: floaty 5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--r,0deg)); }
}

.page-hero{
  padding: 64px 0 46px;
  text-align:center;
}
.page-hero h1{ font-size: clamp(2rem,4vw,2.9rem); }
.page-hero .lede{ max-width: 60ch; margin: 0 auto; color: var(--ink-soft); font-size:1.1rem; }

/* subject chips line: History → Theatre etc */
.chip-line{
  display:flex; flex-wrap:wrap; gap: 14px 22px;
  margin-top: 26px;
  font-family: var(--font-head);
  font-size: .95rem;
}
.chip-line span, .chip-line a{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--paper-dim);
  border:1.5px dashed var(--ink);
  border-radius: 999px;
  padding: .4em 1em;
}
.chip-line span b, .chip-line a b{ color: var(--coral); font-weight:600; }
.chip-line a{
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
  box-shadow: 3px 3px 0 rgba(20,54,73,.18);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.chip-line a:hover{
  background: var(--yellow-soft);
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 rgba(20,54,73,.25);
}
.chip-line a:active{
  transform: translate(0,0);
  box-shadow: 1px 1px 0 rgba(20,54,73,.25);
}
.chip-hint{
  margin: 10px 0 0;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.chip-hint-point{
  display:inline-block;
  animation: point-nudge 1.6s ease-in-out infinite;
}
@keyframes point-nudge{
  0%, 60%, 100%{ transform: translateX(0) rotate(0deg); }
  15%{ transform: translateX(6px) rotate(-8deg); }
  30%{ transform: translateX(0) rotate(0deg); }
  45%{ transform: translateX(6px) rotate(-8deg); }
}

/* "Whether you want to..." list (contact page) */
.want-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 12px 14px;
  max-width: 760px;
  margin: 26px auto 0;
  font-family: var(--font-head);
  font-size: .95rem;
}
.want-item{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--paper-dim);
  border: 1.5px dashed var(--ink);
  border-radius: 999px;
  padding: .55em 1.2em;
  color: var(--ink);
}
.want-item.want-link{
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(20,54,73,.18);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.want-item.want-link:hover{
  background: var(--yellow-soft);
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 rgba(20,54,73,.25);
}
.want-item.want-link:active{
  transform: translate(0,0);
  box-shadow: 1px 1px 0 rgba(20,54,73,.25);
}
.want-arrow{ color: var(--coral); font-weight:600; }
@media (max-width: 560px){
  .want-list{ flex-direction:column; align-items:stretch; }
  .want-item{ justify-content:center; }
}

/* ==========================================================================
   Sections / generic
   ========================================================================== */
section{ position:relative; padding: 78px 0; z-index:1; }
.section-tight{ padding: 54px 0; }
.section-alt{ background: var(--ink); color: var(--paper); }
.section-alt h2, .section-alt h3{ color: var(--paper); }
.section-alt .eyebrow{ color: var(--yellow); }
.section-yellow{ background: var(--yellow-soft); }
.section-paper-dim{ background: var(--paper-dim); }

.section-head{ max-width: 720px; margin-bottom: 42px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }
.three-col{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.four-col{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.six-col{ display:grid; grid-template-columns: repeat(6,1fr); gap: 20px; }

@media (max-width: 980px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .three-col{ grid-template-columns: 1fr 1fr; }
  .four-col{ grid-template-columns: 1fr 1fr; }
  .six-col{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .three-col, .four-col, .six-col{ grid-template-columns: 1fr; }
}

/* ---------- cards ---------- */
.card{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 5px 5px 0 rgba(20,54,73,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 7px 8px 0 rgba(20,54,73,.18); }
.card .icon{ font-size: 2.1rem; display:block; margin-bottom: 10px; }
.card h3{ font-size:1.2rem; margin-bottom:.35em; }
.card p{ color: var(--ink-soft); margin-bottom:0; font-size:.98rem; }

.card-tilt:nth-child(3n+1){ transform: rotate(-1deg); }
.card-tilt:nth-child(3n+2){ transform: rotate(0.8deg); }
.card-tilt:nth-child(3n+3){ transform: rotate(-0.6deg); }
.card-tilt:hover{ transform: translateY(-4px) rotate(0deg); }

/* value cards */
.value-card{ text-align:center; }
.value-card .icon{ font-size:2.4rem; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.08s; }
.reveal-delay-2.in-view{ transition-delay:.16s; }
.reveal-delay-3.in-view{ transition-delay:.24s; }
.reveal-delay-4.in-view{ transition-delay:.32s; }

/* ==========================================================================
   Interactive: subject picker (home)
   ========================================================================== */
.picker{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items:flex-start;
}
.picker-list{ display:flex; flex-direction:column; gap:10px; }
.picker-btn{
  text-align:left;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--font-head);
  font-weight:600;
  font-size: 1rem;
  color: var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.picker-btn .tag{ font-family: var(--font-body); font-weight:400; font-size:.8rem; color: var(--ink-soft); }
.picker-btn.active{ background: var(--yellow); box-shadow: 4px 4px 0 rgba(20,54,73,.2); }
.picker-stage{
  background: var(--paper-dim);
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  min-height: 260px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.picker-stage h3{ font-family: var(--font-hand); font-size:2.2rem; color: var(--coral); margin-bottom:.2em; }
.picker-stage p{ font-size:1.05rem; color: var(--ink-soft); max-width: 46ch; }
.picker-resource{
  display:inline-block;
  font-family: var(--font-head);
  font-weight:600;
  color: var(--brand-text);
  text-decoration: none;
  margin: 2px 0 16px;
}
.picker-resource:hover{ text-decoration: underline; }
@media (max-width: 800px){ .picker{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Numbers / impact stats — handwritten, not corporate
   ========================================================================== */
.stat{
  text-align:center;
  padding: 18px 10px;
}
.stat .num{
  font-family: var(--font-hand);
  font-size: 3.1rem;
  color: var(--ink);
  line-height:1;
  display:inline-block;
  position:relative;
}
.stat:nth-child(odd) .num{ color: var(--coral); }
.stat .label{
  margin-top:8px;
  font-size:.92rem;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.section-alt .stat:nth-child(even) .num{ color: var(--paper); }
.section-alt .stat .label{ color: rgba(237,247,250,.72); }

/* ==========================================================================
   Karpanai way — circular journey
   ========================================================================== */
.journey{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 6px;
}
.journey .step{
  font-family: var(--font-head);
  font-weight:600;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .7em 1.3em;
  font-size: .95rem;
}
.journey .step:nth-child(4n+1){ background: var(--yellow-soft); }
.journey .arrow{ font-size:1.4rem; color: var(--coral); }

/* ==========================================================================
   Story spotlight
   ========================================================================== */
.story-panel{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 6px 6px 0 rgba(20,54,73,.14);
  position:relative;
}
.story-panel .quote-mark{
  font-family: var(--font-hand);
  font-size: 5rem;
  color: var(--yellow);
  line-height:0;
  position:absolute; top:26px; left:26px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--ink);
  color: var(--paper-dim);
  padding: 60px 0 26px;
  margin-top: 40px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: 34px;
  padding-bottom: 34px; border-bottom: 1px solid rgba(237,247,250,.18);
}
.footer-brand{ font-family: var(--font-hand); font-size:2rem; color: var(--yellow); }
.footer-tag{ font-size:.95rem; color: rgba(237,247,250,.65); margin-top:4px; }
.footer-nav{ display:flex; gap: 30px; flex-wrap:wrap; }
.footer-nav a{ font-size:.92rem; color: rgba(237,247,250,.82); }
.footer-nav a:hover{ color: var(--yellow); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(237,247,250,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.footer-social a:hover{ background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top: 22px; font-size:.8rem; color: rgba(237,247,250,.5);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-family: var(--font-head); font-weight:500; margin-bottom:6px; font-size:.94rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--paper);
  color: var(--charcoal);
}
.form-field textarea{ min-height:130px; resize:vertical; }
.checkbox-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-grid label{ display:flex; align-items:center; gap:8px; font-family: var(--font-body); font-weight:400; font-size:.94rem; }
.checkbox-grid input{ width:auto; }
.form-note{ font-size:.85rem; color: var(--ink-soft); margin-top:8px; }
.form-success{
  display:none;
  background: var(--yellow-soft);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 18px 22px;
  font-family: var(--font-head);
  margin-top: 18px;
}

/* ==========================================================================
   Donate page
   ========================================================================== */
.donate-box{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: 6px 6px 0 rgba(20,54,73,.14);
}
.donate-row{ display:flex; justify-content:space-between; border-bottom: 1px dashed var(--line); padding: 12px 0; font-family: var(--font-body); }
.donate-row b{ font-family: var(--font-head); }
.qr-box{
  width: 190px; height:190px; margin: 20px auto 0;
  border: 2px dashed var(--ink); border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-hand); color: var(--ink-soft); text-align:center; padding:10px;
}
.copy-btn{
  font-family: var(--font-body); font-size:.78rem;
  border: 1.5px solid var(--ink); border-radius:8px; background:transparent;
  padding: 3px 9px; margin-left:8px;
}
.copy-btn:hover{ background: var(--yellow); }

/* ==========================================================================
   Flipbook (Method section)
   ========================================================================== */
.flipbook{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.flip-card{
  perspective: 1200px;
  height: 230px;
}
.flip-inner{
  position:relative; width:100%; height:100%;
  transition: transform .6s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  padding: 24px;
  display:flex; flex-direction:column; justify-content:center;
  background: var(--paper);
}
.flip-front{ text-align:center; }
.flip-front .big-emoji{ font-size:2.6rem; display:block; margin-bottom:8px; }
.flip-front span.tap{ font-family: var(--font-hand); color: var(--coral); font-size:1rem; margin-top:10px; display:block; }
.flip-back{ transform: rotateY(180deg); background: var(--ink); color: var(--paper); }
.flip-back ol{ list-style:decimal; padding-left: 1.1em; font-size:.92rem; }
.flip-back li{ margin-bottom: 6px; }
@media (max-width: 800px){ .flipbook{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Canvas interactive
   ========================================================================== */
.canvas-wrap{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 6px 6px 0 rgba(20,54,73,.14);
}
.canvas-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
.color-dot{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--ink); cursor:pointer;
}
.color-dot.active{ box-shadow: 0 0 0 3px var(--yellow); }
#imaginationCanvas{
  width:100%; height: 340px;
  background: var(--paper-dim);
  border: 1.5px dashed var(--ink);
  border-radius: 14px;
  touch-action:none;
  cursor: crosshair;
}
.canvas-caption{
  text-align:center; font-family: var(--font-hand); font-size:1.4rem; color:var(--coral); margin-top:16px;
}

/* ==========================================================================
   Story cards (stories page)
   ========================================================================== */
.story-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.story-card{
  background: var(--paper); border:2px solid var(--ink); border-radius: var(--radius);
  overflow:hidden; box-shadow: 5px 5px 0 rgba(20,54,73,.14);
}
.story-card .story-thumb{
  height: 150px; display:flex; align-items:center; justify-content:center;
  font-size: 2.6rem; background: var(--yellow-soft);
}
.story-card .story-body{ padding: 20px; }
.story-card .story-cat{ font-family: var(--font-hand); color: var(--coral); font-size:1.05rem; }
.story-card h3{ font-size:1.1rem; margin: .2em 0 .3em; }
.story-card p{ font-size:.92rem; color: var(--ink-soft); margin-bottom: .8em; }
.story-card a{ font-family: var(--font-head); font-weight:600; font-size:.9rem; color: var(--ink); }
.story-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 30px; }
.story-tab{
  font-family: var(--font-head); font-size:.9rem; font-weight:500;
  border: 2px solid var(--ink); border-radius:999px; padding:.5em 1.1em; background:transparent; color:var(--ink);
}
.story-tab.active{ background: var(--ink); color: var(--paper); }
@media (max-width:900px){ .story-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .story-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Timeline (founder story)
   ========================================================================== */
.timeline{ position:relative; padding-left: 34px; }
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:3px;
  background: repeating-linear-gradient(var(--ink),var(--ink) 8px, transparent 8px, transparent 15px);
}
.timeline .t-item{ position:relative; margin-bottom: 30px; }
.timeline .t-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:16px; height:16px; border-radius:50%;
  background: var(--yellow); border: 2.5px solid var(--ink);
}
.timeline h4{ margin-bottom:.2em; }
.timeline p{ color: var(--ink-soft); }

/* ==========================================================================
   Misc
   ========================================================================== */
.center{ text-align:center; }
.mt-lg{ margin-top: 50px; }
.hr-doodle{
  width: 140px; height: 18px; margin: 40px auto; opacity:.6;
}
.small-note{ font-size:.85rem; color: var(--ink-soft); }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  font-family: var(--font-head); font-size:.85rem; font-weight:500;
  border:1.5px solid var(--ink); border-radius: 999px; padding: .4em 1em; background: var(--paper);
}

/* back to top */
#toTop{
  position:fixed; right:22px; bottom:22px; z-index: 90;
  width:48px; height:48px; border-radius:50%;
  background: var(--yellow); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; box-shadow: 3px 3px 0 rgba(20,54,73,.25);
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
}
#toTop.show{ opacity:1; pointer-events:auto; }
#toTop:hover{ transform: translateY(-3px); }

::selection{ background: var(--yellow); color: var(--ink); }

/* scrapbook gallery - photos & artifacts, taped into the sketchbook */
.scrap-gallery{
  display:flex;
  flex-wrap:wrap;
  gap: 34px 28px;
  justify-content:center;
  padding: 20px 10px 10px;
}
.scrap-item{
  position:relative;
  display:block;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 12px 12px 0;
  width: 240px;
  box-shadow: 6px 7px 0 rgba(20,54,73,.16);
  cursor: zoom-in;
  transition: transform .22s ease, box-shadow .22s ease;
}
.scrap-item:nth-child(5n+1){ transform: rotate(-3deg); }
.scrap-item:nth-child(5n+2){ transform: rotate(2.4deg); }
.scrap-item:nth-child(5n+3){ transform: rotate(-1.6deg); }
.scrap-item:nth-child(5n+4){ transform: rotate(3deg); }
.scrap-item:nth-child(5n+5){ transform: rotate(-2.2deg); }
.scrap-item:hover{
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 8px 10px 0 rgba(20,54,73,.22);
  z-index: 5;
}
.scrap-item:focus-visible{ outline: 3px solid var(--brand); outline-offset: 4px; }
.scrap-photo{
  display:block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--paper-dim);
  border: 1px solid var(--line);
}
/* for wide banner/document images that would lose their text if cropped */
.scrap-item-wide{ width: 100%; max-width: 460px; }
.scrap-item-wide .scrap-photo{ height: auto; object-fit: unset; }
.scrap-cap{
  padding: 12px 4px 16px;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink);
  text-align:center;
  line-height:1.25;
}
.scrap-tape{
  position:absolute;
  top: -14px; left:50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 64px; height: 24px;
  background: rgba(244,197,66,.6);
  border: 1px solid rgba(20,54,73,.15);
  box-shadow: 0 2px 4px rgba(20,54,73,.15);
}
.scrap-zoom{
  position:absolute;
  top:10px; right:10px;
  width: 30px; height:30px;
  border-radius:50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size: .95rem;
  opacity:0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}
.scrap-item:hover .scrap-zoom, .scrap-item:focus-visible .scrap-zoom{ opacity:1; transform: scale(1); }

/* a scrapbook item that opens a document (PDF) rather than an image */
.scrap-doc .scrap-photo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--ink-soft);
}
.scrap-doc-icon{
  width:54px; height:70px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  position:relative;
}
.scrap-doc-icon::before{
  content:"";
  position:absolute; top:14px; left:10px; right:10px; height:2px;
  background: var(--ink-soft);
  box-shadow: 0 8px 0 var(--ink-soft), 0 16px 0 var(--ink-soft), 0 24px 0 var(--ink-soft);
}
.scrap-doc-icon::after{
  content:"PDF";
  position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  background: var(--coral);
  color: var(--paper);
  font-family: var(--font-head); font-weight:600; font-size:.62rem; letter-spacing:.03em;
  padding: 1px 6px; border-radius:3px;
}
.scrap-doc .scrap-cap small{ display:block; color: var(--ink-soft); font-family: var(--font-body); font-size:.78rem; margin-top:2px; }

@media (max-width: 560px){
  .scrap-item{ width: 44vw; }
  .scrap-photo{ height: 34vw; }
  .scrap-item-wide{ width: 100%; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: rgba(14,10,8,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-figure{
  position:relative;
  max-width: min(92vw, 1000px);
  max-height: 86vh;
  display:flex; flex-direction:column; align-items:center;
  gap: 14px;
}
.lightbox-img{
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: 3px solid var(--paper);
  background: #000;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.lightbox-cap{
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  text-align:center;
  max-width: 60ch;
}
.lightbox-counter{
  font-family: var(--font-body);
  font-size:.8rem;
  color: rgba(237,247,250,.6);
  letter-spacing:.04em;
}
.lightbox-btn{
  position:absolute;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  border-radius: 50%;
  width: 46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.lightbox-btn:hover{ background: var(--yellow); transform: scale(1.06); }
.lightbox-close{ top: -18px; right: -18px; }
.lightbox-prev{ left: -60px; top:50%; transform: translateY(-50%); }
.lightbox-next{ right: -60px; top:50%; transform: translateY(-50%); }
.lightbox-full{ bottom: -18px; right: -18px; width:40px; height:40px; font-size:1rem; }
@media (max-width: 900px){
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:8px; right:8px; }
  .lightbox-full{ bottom:8px; right:8px; }
}

/* founder portrait - a clean, untilted variant of .scrap-item */
.scrap-item.scrap-portrait{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--radius);
  transform: none !important;
  box-shadow: 8px 8px 0 rgba(20,54,73,.18);
}
.scrap-item.scrap-portrait:hover{
  transform: translateY(-5px) !important;
  box-shadow: 10px 13px 0 rgba(20,54,73,.22);
}
.scrap-item.scrap-portrait .scrap-photo{
  height: auto;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.scrap-item.scrap-portrait .scrap-cap{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
}
.founder-milestones{
  display:flex; flex-wrap:wrap; gap: 10px 14px;
  margin: 14px 0 18px;
  font-family: var(--font-head);
  font-size: .9rem;
}
.founder-milestones span{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--paper-dim);
  border: 1.5px dashed var(--ink);
  border-radius: 999px;
  padding: .4em 1em;
}
.founder-milestones b{ color: var(--coral); font-weight:600; }