/* $WISHSOCK scrapbook styles. derived from the $WAVEZ sheet by build.py, then christmas overrides at the bottom. */
:root{
  --ink:#1d2b22; /* pine-black */
  --deep:#1f5c3a; /* pine green */
  --sea:#1f5c3a;
  --aqua:#e0574b; /* cozy red */
  --foam:#fffaf0; /* cream */
  --paper:#f5ecd9;
  --kraft:#d9b98a;
  --sun:#f2c14e; /* candle gold */
  --orange:#a8231d; /* deep cranberry */
  --vermilion:#a8322a; /* ribbon red for small text */
  --shadow:0 2px 0 rgba(29,43,34,.12), 0 14px 28px -10px rgba(29,43,34,.45);
  --shadow-lg:0 3px 0 rgba(29,43,34,.12), 0 26px 40px -16px rgba(29,43,34,.55);
  --round:"Fredoka", "Nunito", system-ui, sans-serif;
  --hand:"Permanent Marker", "Comic Sans MS", cursive;
  --jp:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif;
  --head:"Luckiest Guy", "Fredoka", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--round); font-size:18px; line-height:1.6;
  background-color:var(--paper);
  /* seigaiha wave pattern (traditional japanese motif) drawn in css */
  background-image:
    radial-gradient(circle at 100% 150%, var(--paper) 24%, rgba(31,92,58,.10) 25%, rgba(31,92,58,.10) 28%, var(--paper) 29%, var(--paper) 36%, rgba(31,92,58,.10) 37%, rgba(31,92,58,.10) 40%, transparent 41%),
    radial-gradient(circle at 0 150%, var(--paper) 24%, rgba(31,92,58,.10) 25%, rgba(31,92,58,.10) 28%, var(--paper) 29%, var(--paper) 36%, rgba(31,92,58,.10) 37%, rgba(31,92,58,.10) 40%, transparent 41%),
    radial-gradient(circle at 50% 100%, var(--paper) 10%, rgba(31,92,58,.10) 11%, rgba(31,92,58,.10) 14%, var(--paper) 15%, var(--paper) 22%, rgba(31,92,58,.10) 23%, rgba(31,92,58,.10) 26%, var(--paper) 27%, var(--paper) 34%, rgba(31,92,58,.10) 35%, rgba(31,92,58,.10) 38%, transparent 39%),
    radial-gradient(circle at 100% 50%, var(--paper) 5%, rgba(31,92,58,.10) 6%, rgba(31,92,58,.10) 9%, var(--paper) 10%, var(--paper) 17%, rgba(31,92,58,.10) 18%, rgba(31,92,58,.10) 21%, var(--paper) 22%, var(--paper) 29%, rgba(31,92,58,.10) 30%, rgba(31,92,58,.10) 33%, transparent 34%),
    radial-gradient(circle at 0 50%, var(--paper) 5%, rgba(31,92,58,.10) 6%, rgba(31,92,58,.10) 9%, var(--paper) 10%, var(--paper) 17%, rgba(31,92,58,.10) 18%, rgba(31,92,58,.10) 21%, var(--paper) 22%, var(--paper) 29%, rgba(31,92,58,.10) 30%, rgba(31,92,58,.10) 33%, transparent 34%);
  background-size:84px 42px;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--deep); text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--sun)}
a:hover{color:var(--vermilion)}
:focus-visible{outline:3px dashed var(--vermilion); outline-offset:4px}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px; position:relative}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- chunky 3d bubbly type ---------- */
.bubble{
  font-family:var(--head); font-weight:400; letter-spacing:.03em; line-height:1;
  color:var(--sun);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill;
  text-shadow:
    1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink), 4px 4px 0 var(--ink),
    5px 5px 0 var(--ink), 6px 6px 0 var(--ink), 7px 8px 0 var(--orange), 9px 12px 14px rgba(29,43,34,.35);
}
.bubble.aqua{color:var(--aqua)}
.bubble.white{color:var(--foam)}
h1,h2,h3{font-family:var(--round); font-weight:700; line-height:1.1; margin:0 0 .5em}
h2.bubble{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.hand{font-family:var(--hand); font-weight:400}
.jp{font-family:var(--jp)}

/* ---------- header / nav ---------- */
.site-head{padding:18px 0 6px; position:relative; z-index:5}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo img{width:58px; height:58px; border-radius:50%; border:3px solid var(--ink); box-shadow:3px 4px 0 var(--ink); transform:rotate(-8deg); transition:transform .3s}
.logo:hover img{transform:rotate(12deg) scale(1.06)}
.logo span{font-size:2rem}
.nav{display:flex; gap:14px; flex-wrap:wrap; margin:0; padding:0; list-style:none}
.nav a{
  display:inline-block; text-decoration:none; color:var(--ink); font-weight:600; font-size:1.05rem;
  padding:7px 18px 8px; background:var(--foam); border:2.5px solid var(--ink); border-radius:999px;
  box-shadow:3px 4px 0 var(--ink); transition:transform .15s, box-shadow .15s, background .15s;
}
.nav li:nth-child(1) a{transform:rotate(-3deg)}
.nav li:nth-child(2) a{transform:rotate(2deg); background:#e4f0e2}
.nav li:nth-child(3) a{transform:rotate(-1.5deg); background:#fff3c4}
.nav li:nth-child(4) a{transform:rotate(3deg); background:var(--ink); color:var(--foam)}
.nav a:hover{transform:translateY(-3px) rotate(0); box-shadow:4px 7px 0 var(--ink)}
.nav a[aria-current="page"]{background:var(--sun)}

/* ---------- scrapbook pieces ---------- */
.card{
  position:relative; background:var(--foam); border-radius:6px; padding:26px 26px 24px;
  box-shadow:var(--shadow);
}
.card.lined{
  background-color:#fffcf3;
  background-image:linear-gradient(90deg, transparent 46px, rgba(196,48,43,.35) 46px, rgba(196,48,43,.35) 48px, transparent 48px),
    repeating-linear-gradient(transparent 0 30px, rgba(31,92,58,.22) 30px 31px);
  padding-left:66px; line-height:31px;
}
.card.grid{background-color:#fbf6ea; background-image:linear-gradient(rgba(31,92,58,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(31,92,58,.13) 1px, transparent 1px); background-size:24px 24px}
.card.kraft{background:var(--kraft); background-image:radial-gradient(rgba(120,80,30,.18) 1px, transparent 1.4px); background-size:7px 7px}
.card.ink{background:var(--deep); color:var(--foam)}
.card.ink a{color:var(--sun)}
.card.sun{background:#ffe07a}

/* torn paper edges (clip-path) */
.torn-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),97% 100%,93% calc(100% - 8px),89% calc(100% - 2px),85% calc(100% - 11px),80% calc(100% - 3px),76% calc(100% - 9px),71% 100%,66% calc(100% - 7px),61% calc(100% - 1px),57% calc(100% - 10px),52% calc(100% - 4px),47% calc(100% - 12px),42% calc(100% - 2px),37% calc(100% - 8px),32% 100%,27% calc(100% - 9px),22% calc(100% - 3px),17% calc(100% - 11px),12% calc(100% - 2px),7% calc(100% - 8px),3% 100%,0 calc(100% - 6px)); padding-bottom:34px}
.torn-t{clip-path:polygon(0 8px,4% 0,8% 9px,13% 2px,18% 10px,23% 1px,28% 7px,33% 0,38% 11px,43% 3px,48% 9px,53% 0,58% 8px,63% 2px,68% 11px,73% 3px,78% 9px,83% 0,88% 10px,93% 2px,97% 8px,100% 1px,100% 100%,0 100%); padding-top:34px}
.torn-y{clip-path:polygon(0 8px,4% 0,8% 9px,13% 2px,18% 10px,23% 1px,28% 7px,33% 0,38% 11px,43% 3px,48% 9px,53% 0,58% 8px,63% 2px,68% 11px,73% 3px,78% 9px,83% 0,88% 10px,93% 2px,97% 8px,100% 1px,100% calc(100% - 10px),97% 100%,93% calc(100% - 8px),89% calc(100% - 2px),85% calc(100% - 11px),80% calc(100% - 3px),76% calc(100% - 9px),71% 100%,66% calc(100% - 7px),61% calc(100% - 1px),57% calc(100% - 10px),52% calc(100% - 4px),47% calc(100% - 12px),42% calc(100% - 2px),37% calc(100% - 8px),32% 100%,27% calc(100% - 9px),22% calc(100% - 3px),17% calc(100% - 11px),12% calc(100% - 2px),7% calc(100% - 8px),3% 100%,0 calc(100% - 6px)); padding-top:36px; padding-bottom:36px}
/* clip-path eats box-shadow, so torn pieces get a drop-shadow on a wrapper */
.shadowed{filter:drop-shadow(0 12px 14px rgba(29,43,34,.35)) drop-shadow(0 2px 0 rgba(29,43,34,.15))}

/* washi tape */
.tape{position:relative}
.tape::before,.tape.two::after{
  content:""; position:absolute; top:-15px; left:50%; width:118px; height:32px; z-index:3;
  transform:translateX(-50%) rotate(-4deg);
  background:repeating-linear-gradient(45deg, rgba(242,193,78,.78) 0 10px, rgba(250,232,170,.78) 10px 20px);
  box-shadow:0 2px 3px rgba(29,43,34,.18);
  clip-path:polygon(3% 0,97% 4%,100% 22%,96% 45%,100% 70%,97% 100%,2% 96%,0 74%,4% 50%,0 26%);
}
.tape.blue::before,.tape.blue.two::after{background:repeating-linear-gradient(-45deg, rgba(64,138,92,.8) 0 9px, rgba(205,232,208,.8) 9px 18px)}
.tape.red::before,.tape.red.two::after{background:repeating-linear-gradient(90deg, rgba(196,48,43,.72) 0 8px, rgba(255,240,228,.72) 8px 16px)}
.tape.plain::before,.tape.plain.two::after{background:rgba(255,253,240,.72); backdrop-filter:blur(1px)}
.tape.corners::before{left:-14px; top:-6px; transform:rotate(-38deg); width:96px}
.tape.corners.two::after{left:auto; right:-34px; top:auto; bottom:6px; transform:rotate(-38deg); width:96px}
.tape.two::after{left:auto; right:-20px; transform:rotate(38deg); width:90px}

.tilt-l{transform:rotate(-2deg)} .tilt-r{transform:rotate(1.8deg)} .tilt-l2{transform:rotate(-4deg)} .tilt-r2{transform:rotate(3.5deg)}

/* polaroid */
.polaroid{background:#fff; padding:12px 12px 52px; box-shadow:var(--shadow-lg); border-radius:3px; position:relative}
.polaroid figcaption{position:absolute; left:0; right:0; bottom:12px; text-align:center; font-family:var(--hand); font-size:1.3rem; color:var(--ink)}
figure{margin:0}

/* stickers */
.sticker{position:absolute; z-index:4; filter:drop-shadow(2px 5px 0 rgba(29,43,34,.18)) drop-shadow(0 10px 10px rgba(29,43,34,.25)); transition:transform .25s cubic-bezier(.3,1.6,.6,1); pointer-events:auto}
.sticker:hover{transform:scale(1.1) rotate(6deg)!important}
.bob{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0} 50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.bob{animation:none} html{scroll-behavior:auto}}

/* hanko stamp */
.hanko{display:inline-grid; place-items:center; width:74px; height:74px; border:3px solid var(--vermilion); color:var(--vermilion); border-radius:10px; font-family:var(--jp); font-size:2.3rem; line-height:1; transform:rotate(-10deg); opacity:.86; background:rgba(255,255,255,.35)}

/* speech bubble */
.speech{position:relative; background:#fff; border:3px solid var(--ink); border-radius:26px; padding:12px 18px; font-family:var(--hand); font-size:1.35rem; line-height:1.25; box-shadow:4px 5px 0 var(--ink)}
.speech::after{content:""; position:absolute; bottom:-18px; left:34px; width:26px; height:22px; background:#fff; border:3px solid var(--ink); border-top:0; border-left:0; transform:skewX(-30deg) rotate(35deg)}

/* bubbly buttons-as-links */
.pill{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:1.15rem; color:var(--ink); background:var(--sun); padding:12px 24px 13px; border:3px solid var(--ink); border-radius:999px; box-shadow:4px 5px 0 var(--ink), inset 0 -5px 0 rgba(196,48,43,.55), inset 0 4px 0 rgba(255,255,255,.6); transition:transform .15s, box-shadow .15s}
.pill:hover{color:var(--ink); transform:translateY(-3px) rotate(-1deg); box-shadow:5px 8px 0 var(--ink), inset 0 -5px 0 rgba(196,48,43,.55), inset 0 4px 0 rgba(255,255,255,.6)}
.pill.aqua{background:var(--aqua); box-shadow:4px 5px 0 var(--ink), inset 0 -5px 0 rgba(31,92,58,.35), inset 0 4px 0 rgba(255,255,255,.6)}
.pill svg{width:20px; height:20px}

.doodle-note{font-family:var(--hand); font-size:1.35rem; color:var(--deep); line-height:1.2}
.doodle-arrow{display:inline-block; width:70px; height:40px}

/* ---------- home ---------- */
.hero{padding:24px 0 30px}
.hero-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:34px; align-items:center}
.hero-card{padding:30px 34px 44px; background:linear-gradient(180deg,#fffaf0 0%, #f6dcc8 100%)}
.hero-card .kicker{font-family:var(--hand); font-size:1.5rem; color:var(--deep); margin:0 0 4px}
.hero h1{font-size:clamp(4rem,12vw,8.4rem); margin:0 0 6px}
.hero h1 .tick{display:block; font-size:.36em; margin-top:10px}
.hero .tagline{font-size:1.45rem; font-weight:600; margin:16px 0 22px; max-width:30ch}
.hero .actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.hero-art{position:relative; min-height:480px}
.hero-art .token{width:78%; position:absolute; top:10px; right:6%; transform:rotate(5deg)}
.hero-art .surfer{width:46%; position:absolute; left:-4%; bottom:-30px; transform:rotate(-6deg)}
.hero-art .hanko{position:absolute; right:0; bottom:40px}
.hero-card .sticker-moon{width:96px; right:-26px; top:-30px; transform:rotate(14deg)}

.banner-strip{margin:40px auto 10px; max-width:1100px; padding:0 22px}
.banner-strip .frame{background:#fff; padding:10px; box-shadow:var(--shadow-lg); transform:rotate(-1deg)}
.banner-strip .frame img{width:100%; aspect-ratio:3/1; object-fit:cover}

section{padding:46px 0}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.lore p{margin:0 0 31px}
.lore p:last-child{margin-bottom:0}

.wave101{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:26px}
.wave101 .card{padding-top:30px}
.wave101 .num{position:absolute; top:-22px; left:18px; width:50px; height:50px; border-radius:50%; background:var(--sun); border:3px solid var(--ink); display:grid; place-items:center; font-weight:700; font-size:1.4rem; box-shadow:3px 4px 0 var(--ink)}
.wave101 h3{font-size:1.35rem; margin-top:8px}
.wave101 p{margin:0; font-size:1rem}
.src{font-size:.85rem; opacity:.85}

.print-row{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center}
.print{background:#efe4c8; padding:16px; box-shadow:var(--shadow-lg); transform:rotate(-1.6deg)}
.print img{border:1px solid rgba(0,0,0,.15)}
.print figcaption{font-size:.9rem; margin-top:10px; font-family:var(--round)}

.post-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:30px}
.post-card{display:block; text-decoration:none; color:var(--ink); padding:16px 16px 22px; transition:transform .25s cubic-bezier(.3,1.6,.6,1)}
.post-card:nth-child(1){transform:rotate(-2.2deg)} .post-card:nth-child(2){transform:rotate(1.6deg)} .post-card:nth-child(3){transform:rotate(-1deg)}
.post-card:hover{transform:rotate(0) translateY(-6px); color:var(--ink)}
.post-card .thumb{aspect-ratio:4/3; overflow:hidden; border:2px solid var(--ink); border-radius:4px; background:var(--aqua)}
.post-card .thumb img{width:100%; height:100%; object-fit:cover}
.post-card .date{font-family:var(--hand); font-size:1.15rem; color:var(--vermilion); margin:12px 0 2px}
.post-card h3{font-size:1.35rem; margin:0 0 8px}
.post-card p{font-size:1rem; margin:0}
.post-card .more{display:inline-block; margin-top:12px; font-weight:700; border-bottom:3px solid var(--sun)}

.spotlight{padding:34px 34px 40px; text-align:center; border:3px dashed var(--ink)}
.spotlight .label{display:inline-block; font-weight:700; background:var(--ink); color:var(--foam); padding:4px 14px; border-radius:999px; font-size:.95rem; letter-spacing:.05em; text-transform:lowercase}
.spotlight h2{font-size:clamp(1.9rem,4vw,2.6rem); margin:14px 0 8px}
.spotlight p{margin:0 auto; max-width:46ch}

.x-card{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; text-align:center}

/* ---------- inner page header ---------- */
.page-head{padding:30px 0 16px; text-align:center}
.page-head h1{font-size:clamp(3rem,9vw,5.6rem)}
.page-head .sub{font-size:1.3rem; max-width:40ch; margin:8px auto 0}

/* ---------- blog post ---------- */
.post{max-width:780px; margin:0 auto}
.post .meta{font-family:var(--hand); font-size:1.3rem; color:var(--vermilion); text-align:center; margin:0}
.post h1{font-size:clamp(2.3rem,6vw,3.7rem); text-align:center; margin:6px 0 20px}
.post .card{padding:34px 40px 40px}
.post .card p,.post .card li{font-size:1.08rem}
.post h2{font-size:1.6rem; margin:1.6em 0 .5em; display:inline-block; background:linear-gradient(transparent 58%, rgba(242,193,78,.65) 58%); padding:0 4px}
.post figure.hero-img{margin:0 0 26px}
.facts{list-style:none; padding:0; margin:0}
.facts li{position:relative; padding-left:34px; margin:0 0 12px}
.facts li::before{content:""; position:absolute; left:0; top:.35em; width:20px; height:20px; border-radius:50%; background:var(--aqua); border:2.5px solid var(--ink)}
.sources{margin-top:34px; padding-top:20px; border-top:3px dashed rgba(29,43,34,.35)}
.sources h2{background:none; padding:0; font-size:1.4rem}
.sources ol{padding-left:22px; font-size:.95rem; word-break:break-word}
.back{display:inline-block; margin:26px 0 0; font-weight:700}
.pullquote{font-family:var(--hand); font-size:1.7rem; line-height:1.25; color:var(--deep); text-align:center; margin:30px 10px; transform:rotate(-1.5deg)}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.not-list{list-style:none; padding:0; margin:0}
.not-list li{padding:8px 0 8px 40px; position:relative; border-bottom:2px dashed rgba(29,43,34,.2)}
.not-list li::before{content:"✕"; position:absolute; left:4px; top:6px; font-weight:700; color:var(--vermilion); font-size:1.3rem}

/* ---------- footer ---------- */
.site-foot{margin-top:60px; padding:46px 0 34px; background:var(--deep); color:var(--foam); position:relative}
.site-foot::before{content:""; position:absolute; left:0; right:0; top:-28px; height:30px;
  background:radial-gradient(circle at 20px -6px, transparent 22px, var(--deep) 23px) 0 0/40px 30px repeat-x}
.site-foot .wrap{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.site-foot a{color:var(--sun)}
.disclaimer{font-weight:600; font-size:1rem; max-width:60ch; margin:0; background:rgba(255,255,255,.08); padding:10px 18px; border-radius:14px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:.95rem}
.small{font-size:.85rem; opacity:.85}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.two-col,.print-row,.about-grid{grid-template-columns:1fr}
  .hero-art{min-height:420px; max-width:460px; margin:0 auto; width:100%}
  .wave101,.post-cards{grid-template-columns:1fr; gap:38px}
  .post-cards{max-width:480px; margin-left:auto; margin-right:auto}
}
@media (max-width:560px){
  body{font-size:17px}
  .site-head .wrap{justify-content:center}
  .nav{justify-content:center; gap:10px}
  .nav a{padding:6px 14px 7px; font-size:.98rem}
  .hero-card{padding:26px 20px 40px}
  .hero-card .sticker-moon{width:70px; right:-8px; top:-26px}
  .hero-art{min-height:360px}
  .card.lined{padding-left:50px; background-image:linear-gradient(90deg, transparent 32px, rgba(196,48,43,.35) 32px, rgba(196,48,43,.35) 34px, transparent 34px), repeating-linear-gradient(transparent 0 30px, rgba(31,92,58,.22) 30px 31px)}
  .post .card{padding:28px 20px 34px}
  .bubble{-webkit-text-stroke:2.5px var(--ink); text-shadow:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 6px 0 var(--orange),6px 9px 10px rgba(29,43,34,.3)}
  .hide-sm{display:none}
}

/* fixes after preview pass */
html,body{overflow-x:clip}
.hero-art .token figcaption{text-align:right; padding-right:16px}
.hero-art .hanko{right:auto; left:6%; top:0; bottom:auto}
.hero-art .surfer{bottom:-40px}
@media (max-width:560px){ .hero-art .token figcaption{font-size:1.05rem} }
section.wrap{padding-top:46px; padding-bottom:46px}
.hero-art .surfer{left:-12%; bottom:-70px}
.post .card.post-paper{background:#fffcf3; background-image:radial-gradient(rgba(29,43,34,.05) 1px, transparent 1.3px); background-size:6px 6px}
.post .card .pullquote{font-size:1.85rem; line-height:1.25}
@media (max-width:900px){ .hero-art .surfer{left:-4%; bottom:-40px} }

/* brand packet: luckiest guy headlines, permanent marker taglines */
.hand,.doodle-note,.speech,.polaroid figcaption,.pullquote,.post .meta,.post-card .date,.hero-card .kicker{font-family:var(--hand)}
.doodle-note{font-size:1.15rem}
.polaroid figcaption{font-size:1.1rem}
.hero .tagline{font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2; color:var(--ink); max-width:none; transform:rotate(-1.5deg)}
.hero h1{font-size:clamp(4.2rem,11vw,8rem)}
.hero h1 .tick{font-size:.34em; margin-top:14px}
.post-card h3,.wave101 h3{font-family:var(--head); font-weight:400; letter-spacing:.03em; font-size:1.3rem}
.site-foot{background:var(--ink)}
.site-foot::before{background:radial-gradient(circle at 20px -6px, transparent 22px, var(--ink) 23px) 0 0/40px 30px repeat-x}
.card.ink{background:var(--ink)}
.hanko{font-weight:700}
/* pfp tool */
.pfp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.pfp-stage{padding:14px 14px 50px; max-width:520px; justify-self:center; width:100%}
.pfp-stage canvas{display:block; width:100%; height:auto; aspect-ratio:1; border-radius:4px; touch-action:none; cursor:grab; background:var(--deep)}
.pfp-controls{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.pfp-controls fieldset{border:2.5px dashed rgba(29,43,34,.35); border-radius:14px; padding:8px 14px 12px; margin:0; width:100%; display:flex; flex-wrap:wrap; gap:6px 18px}
.pfp-controls legend{font-family:var(--head); letter-spacing:.03em; padding:0 6px; font-size:1.15rem}
.pfp-controls label{cursor:pointer; font-weight:500}
.pfp-controls input[type=radio],.pfp-controls input[type=checkbox]{accent-color:var(--deep); width:18px; height:18px; vertical-align:-3px}
.pfp-controls .zoom{display:flex; align-items:center; gap:12px; width:100%; font-family:var(--head); letter-spacing:.03em}
.pfp-controls .zoom input{flex:1; accent-color:var(--deep)}
.pfp-controls button.pill{font-family:var(--round); cursor:pointer}
.file-pill{cursor:pointer}
#pfp-file:focus-visible + fieldset, .file-pill:focus-within{outline:3px dashed var(--orange)}
@media (max-width:900px){ .pfp-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .tape.two::after{right:-2px} .tape.corners.two::after{right:-8px} }

/* ---------- swell chapters (site-packet pass) ---------- */
.swell{padding:40px 0 50px}
.swell-tab{display:flex; align-items:baseline; gap:14px; width:max-content; max-width:100%; margin:0 auto 34px; padding:14px 30px 18px; background:var(--ink); color:#fff; transform:rotate(-1.5deg);
  clip-path:polygon(0 6px,5% 0,11% 5px,18% 1px,26% 6px,34% 0,42% 5px,50% 1px,58% 6px,66% 0,74% 5px,82% 1px,90% 6px,96% 0,100% 5px,100% calc(100% - 6px),95% 100%,88% calc(100% - 5px),80% 100%,72% calc(100% - 6px),63% 100%,55% calc(100% - 5px),46% 100%,38% calc(100% - 6px),29% 100%,21% calc(100% - 5px),12% 100%,5% calc(100% - 6px),0 100%)}
.swell-tab .num{font-family:var(--hand); color:var(--sun); font-size:1.15rem}
.swell-tab .name{font-family:var(--head); letter-spacing:.04em; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1; color:#fff; text-shadow:3px 3px 0 var(--deep)}
.swell:nth-of-type(odd) .swell-tab{transform:rotate(1.2deg)}
.toy-tab{background:var(--deep)} .toy-tab .name{text-shadow:3px 3px 0 var(--ink)}
.chapter-card{padding:30px 30px 28px}
.chapter-card p{margin:0 0 12px}
.fact-note{background:#fff3c4; border-left:6px solid var(--sun); padding:12px 16px; margin:26px 8px 0; font-size:.98rem; box-shadow:var(--shadow)}
.pill.ghost{background:#fff; box-shadow:4px 5px 0 var(--ink)}
/* rail (desktop) + progress bar (mobile) */
.swell-rail{position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; gap:8px}
.swell-rail a{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; border:2.5px solid var(--ink); box-shadow:2px 3px 0 var(--ink); text-decoration:none; color:var(--ink); font-family:var(--head); font-size:.95rem; letter-spacing:.02em; transition:transform .15s, background .15s}
.swell-rail a.on{background:var(--sun); transform:scale(1.12)}
.swell-progress{position:fixed; left:0; right:0; top:0; height:5px; z-index:30; background:rgba(29,43,34,.12); display:none}
.swell-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--deep),var(--sun))}
@media (max-width:1240px){ .swell-rail{display:none} .swell-progress{display:block} }
/* hero: character over a woodblock swell */
.hero-art .woodblock{position:absolute; left:0; top:40px; width:86%; background:#efe4c8; padding:10px 10px 30px; box-shadow:var(--shadow); transform:rotate(-5deg)}
.hero-art .woodblock img{opacity:.92}
.hero-art .woodblock figcaption{position:absolute; left:10px; bottom:6px; font-size:.72rem; color:var(--ink); opacity:.8}
.hero-art .token{width:62%; top:110px; right:2%; z-index:2}
.hero-art .surfer{width:36%; left:-8%; bottom:-70px; z-index:3}
.hero-art .hanko{z-index:3; left:auto; right:4%; top:62px}
.hero-art{min-height:560px}
/* toys */
.toy{margin:0 auto 60px}
.toy-title{text-align:center; font-size:clamp(2rem,4.4vw,2.9rem); margin:0 0 8px}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}
.kit-sheet{padding:34px 26px 40px}
.kit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px 18px}
.kit-item{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.95rem; padding:8px; border-radius:14px; transition:transform .2s cubic-bezier(.3,1.6,.6,1), background .2s}
.kit-item img{height:120px; width:auto; object-fit:contain; filter:drop-shadow(2px 5px 0 rgba(29,43,34,.18)) drop-shadow(0 8px 8px rgba(29,43,34,.22))}
.kit-item:nth-child(odd) img{transform:rotate(-6deg)} .kit-item:nth-child(even) img{transform:rotate(5deg)}
.kit-item:hover{transform:translateY(-4px) rotate(-2deg); background:rgba(255,255,255,.35); color:var(--ink)}
.kit-strip{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; text-align:center}
.kit-strip img{height:70px; width:auto}
@media (max-width:900px){
  .hero-art{min-height:470px}
  .hero-art .woodblock{width:92%; top:10px}
  .hero-art .token{width:64%; top:80px}
  .hero-art .surfer{left:-2%; bottom:-40px}
}
@media (max-width:560px){
  .kit-grid{grid-template-columns:repeat(2,1fr)}
  .kit-item img{height:100px}
  .hero-art{min-height:400px}
  .swell-tab{padding:12px 20px 15px}
  .hero .actions .pill{font-size:1rem; padding:10px 18px 11px}
}
@media (prefers-reduced-motion:reduce){ .sticker,.kit-item,.pill,.nav a{transition:none} }
.hero-art .woodblock{width:80%; top:20px; left:-2%}
.hero-art .token{width:72%; top:90px; right:-2%}
.hero-art .surfer{width:33%}
@media (max-width:900px){ .hero-art .token{width:70%; right:2%} }
@media (max-width:560px){ .chapter-card .sticker{right:-6px!important; width:76px!important} }

/* ---------- the swell path ---------- */
.swell-path{padding:40px 0 60px}
.path-sea{position:relative; padding:10px 0 70px}
.path-waves{position:absolute; left:0; right:0; bottom:0; width:100%; height:120px; overflow:hidden; border-radius:0 0 18px 18px}
.path-waves .wv path{fill:var(--deep)}
.path-waves .wv1 path{fill:rgba(31,92,58,.55)}
.path-waves .wv2 path{fill:var(--deep)}
.path-waves .wv2{transform:translateY(14px)}
.path-waves .wv1{animation:roll 9s linear infinite}
.path-waves .wv2{animation:roll2 6s linear infinite}
@keyframes roll{from{transform:translateX(0)} to{transform:translateX(-800px)}}
@keyframes roll2{from{transform:translate(-800px,14px)} to{transform:translate(0,14px)}}
.path-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; z-index:2}
.path-card{padding:30px 22px 26px; text-align:center; animation:pathbob 4.2s ease-in-out infinite}
.path-card:nth-child(1){rotate:-2deg}
.path-card:nth-child(2){rotate:1.5deg; animation-delay:-1.4s}
.path-card.placeholder{rotate:-1deg; animation-delay:-2.8s; border:3px dashed var(--ink); background:#fff3c4}
.path-card .wave-no{display:inline-block; font-family:var(--hand); color:var(--vermilion); font-size:1.2rem}
.path-card h3{font-family:var(--head); font-weight:400; letter-spacing:.03em; font-size:1.45rem; margin:6px 0 8px}
.path-card p{margin:0; font-size:.98rem}
.path-card .label{display:inline-block; font-weight:700; background:var(--ink); color:#fff; padding:2px 12px; border-radius:999px; font-size:.85rem; margin-bottom:6px}
.path-stk{width:70px; height:auto; margin:8px auto 0; filter:drop-shadow(2px 4px 0 rgba(29,43,34,.18))}
@keyframes pathbob{0%,100%{translate:0 0} 50%{translate:0 -9px}}
@media (max-width:900px){ .path-cards{grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:34px} .path-waves{height:90px} }
@media (prefers-reduced-motion:reduce){ .path-card,.path-waves .wv1,.path-waves .wv2{animation:none} }
.path-card .label{display:table; margin:0 auto 8px}

/* =================== $WISHSOCK christmas overrides =================== */
body{
  background-color:var(--paper);
  /* knit-plaid: faint pine + cranberry threads, with tiny snow dots */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(31,92,58,.07) 46px 52px, transparent 52px 60px, rgba(196,48,43,.06) 60px 62px, transparent 62px 92px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(31,92,58,.07) 46px 52px, transparent 52px 60px, rgba(196,48,43,.06) 60px 62px, transparent 62px 92px);
}
.bubble{color:var(--sun)}
.bubble.aqua{color:var(--aqua)}
.bubble.white{color:var(--foam)}
.hero-card{background:linear-gradient(180deg,#fffaf0 0%, #f6dcc8 100%)}
.hero-card::after{content:""; position:absolute; left:0; right:0; top:0; height:16px; background:repeating-linear-gradient(-45deg,#c4302b 0 14px,#fffaf0 14px 28px); opacity:.9}
.nav a[aria-current="page"]{background:var(--sun)}
.nav li:nth-child(3) a{background:#fbe3dc}
.card.sun{background:#f6d77a}
.card.ink{background:var(--deep)}
.pill.aqua{color:#fffaf0}
.pill.aqua:hover{color:#fffaf0}
.post-card .thumb{background:var(--deep)}
/* candy-cane tape */
.tape.red::before,.tape.red.two::after{background:repeating-linear-gradient(-45deg, rgba(196,48,43,.82) 0 9px, rgba(255,246,236,.85) 9px 18px)}
.tape.blue::before,.tape.blue.two::after{background:repeating-linear-gradient(45deg, rgba(31,92,58,.78) 0 9px, rgba(205,232,208,.8) 9px 18px)}
/* wax seal */
.seal{display:inline-grid; place-items:center; width:70px; height:70px; border-radius:50%; font-size:2rem; color:#fbe7b5; line-height:1;
  background:radial-gradient(circle at 35% 30%, #d9534a 0 18%, #b3261e 45%, #7f1a15 100%);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.12), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 rgba(29,43,34,.25);
  border:0; transform:rotate(-10deg); font-family:var(--round); opacity:1}
.hero-art .seal{position:absolute; z-index:3; left:6%; top:0}
.hero-art .woodblock{background:#fffaf0}
.hero-art .surfer{width:30%}
/* footer: snowy hill edge in pine */
.site-foot{background:var(--deep)}
.site-foot::before{background:radial-gradient(circle at 20px -6px, transparent 22px, var(--deep) 23px) 0 0/40px 30px repeat-x}
.site-foot a{color:var(--sun)}
.swell-tab{background:var(--deep)}
.swell-tab .name{text-shadow:3px 3px 0 var(--orange)}
.toy-tab{background:var(--orange)} .toy-tab .name{text-shadow:3px 3px 0 var(--ink)}
.facts li::before{background:var(--aqua)}
.swell-progress span{background:linear-gradient(90deg,var(--orange),var(--sun),var(--deep))}
/* snow canvas: on top, but never in the way */
canvas.snow{position:fixed; inset:0; z-index:30; pointer-events:none}
/* wish drop */
.wish-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; max-width:900px; margin:0 auto}
.wish-form{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.wish-form input{width:100%; font:inherit; font-size:1.1rem; padding:10px 14px; border:2.5px solid var(--ink); border-radius:12px; background:#fff; box-shadow:3px 4px 0 var(--ink)}
.wish-form button{cursor:pointer; font-family:var(--round)}
.wish-stage{position:relative; min-height:320px; display:grid; place-items:end center}
.wish-sock{width:220px; transform-origin:50% 6%; filter:drop-shadow(2px 5px 0 rgba(29,43,34,.18)) drop-shadow(0 12px 12px rgba(29,43,34,.25))}
.wish-paper{position:absolute; left:50%; top:30px; transform:translate(-50%,0) rotate(-4deg); max-width:240px; background:#fffcf3; border:2px solid var(--ink); padding:8px 14px; font-family:var(--hand); font-size:1.05rem; box-shadow:3px 4px 0 var(--ink); z-index:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:900px){ .wish-grid{grid-template-columns:1fr} .wish-stage{min-height:280px} }
/* giving placeholder: plain, dashed, no promise */
.giving-wrap{text-align:center}
.giving-card{display:inline-block; border:3px dashed var(--ink); background:#fffaf0; padding:16px 26px; font-size:1.2rem}
.note-box{margin-top:30px; padding:12px 16px; border:2.5px dashed rgba(29,43,34,.4); border-radius:12px; font-size:.98rem!important; background:#fbf6ea}
@media (max-width:560px){ .hero-art .surfer{width:34%} }
.hero-art .woodblock img{aspect-ratio:4/3; object-fit:cover; object-position:88% 50%; width:100%}
.hero-art .woodblock{width:66%!important}
.banner-strip .frame{position:relative}
.banner-over{position:absolute; left:6%; top:50%; transform:translateY(-50%) rotate(-3deg); margin:0; font-size:clamp(1.6rem,4.6vw,3.4rem); max-width:52%; line-height:1.05}

body{background-size:auto}
.nav li a[aria-current="page"]{background:var(--sun)}