/* ---- hand-drawn marker section titles (real <h2>/<h3> text sits in the node; wobble is decorative) ---- */
.marker{
  font-family:var(--marker); font-weight:400; display:inline-block; position:relative;
  font-size:clamp(21px,4.4vw,32px); line-height:1.12; letter-spacing:.01em; color:var(--cocoa);
  transform:rotate(-1.4deg); padding:0 4px 12px;
}
.marker::after{
  content:''; position:absolute; left:-6px; right:-6px; bottom:0; height:11px;
  background-color:var(--rule,var(--red));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cpath d='M2 9c28-6 52 3 80 1s58-6 86-3 52 5 70 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cpath d='M2 9c28-6 52 3 80 1s58-6 86-3 52 5 70 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.marker-sm{font-size:clamp(17px,3.4vw,22px)}
/* Body and label sizes are rem so they follow the reader's browser/OS font-size setting. The display sizes
   (.marker, .marker-sm, .ledger-value, .boot-word) keep px inside clamp() on purpose: a large-text setting
   should scale reading text without blowing up the hero on a small phone. */
.eyebrow{font-family:var(--display);font-weight:800;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- washi tape strip badge ---- */
.washi-tape{
  display:inline-flex;align-items:center;gap:5px;padding:3px 12px;
  font-family:var(--display);font-weight:800;font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--yellow);color:var(--cocoa);border:2px solid var(--cocoa);border-radius:6px;
  transform:rotate(-2deg);box-shadow:0 2px 0 var(--cocoa);user-select:none;white-space:nowrap;
}
.washi-tape-pink{background:var(--pink);transform:rotate(1.6deg)}
.washi-tape-mint{background:var(--mint);transform:rotate(.9deg)}
.washi-tape-blue{background:var(--blue);color:var(--cocoa);transform:rotate(-1.6deg)}
.washi-tape-red{background:var(--red);color:var(--cocoa);transform:rotate(1.2deg)}

/* ---- faux tape pin that holds a scrapbook card to the wall ---- */
.tape-pin{
  position:absolute;top:-10px;left:26px;width:58px;height:17px;z-index:5;pointer-events:none;
  background:rgba(255,206,0,.85);border:1.6px solid var(--cocoa);border-radius:3px;
  transform:rotate(-3deg);box-shadow:0 2px 0 rgba(46,30,20,.22);
}
.tape-pin::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(46,30,20,.12) 0 1px,transparent 1px 7px)}

/* ---- holographic seal: FLAT foil stripes + foil dots, no gradient ---- */
.sticker-holo{
  position:relative;background:var(--mint);color:var(--cocoa);
  border:2px solid var(--cocoa);box-shadow:var(--elev-sm);overflow:hidden;
}
.sticker-holo::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='6' cy='6' r='1' fill='%23FFCE00'/%3E%3C/svg%3E");
}

/* ---- chunky keycap buttons (one elevation rule) ---- */
.btn-keycap{position:relative;border:2.5px solid var(--cocoa);border-radius:9999px;box-shadow:0 4px 0 var(--cocoa);
  transform:translateY(0);transition:transform 90ms cubic-bezier(.34,1.56,.64,1),box-shadow 90ms;user-select:none}
.btn-keycap:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--cocoa)}
.btn-keycap:active,.btn-keycap.active-key{transform:translateY(3px)!important;box-shadow:0 1px 0 var(--cocoa)!important}
.btn-keycap-sm{position:relative;border:2px solid var(--cocoa);border-radius:9999px;box-shadow:0 3px 0 var(--cocoa);
  transform:translateY(0);transition:transform 90ms cubic-bezier(.34,1.56,.64,1),box-shadow 90ms;user-select:none}
.btn-keycap-sm:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--cocoa)}
.btn-keycap-sm:active{transform:translateY(2px)!important;box-shadow:0 1px 0 var(--cocoa)!important}
.btn-keycap svg,.btn-keycap-sm svg{flex:0 0 auto}

/* ---- recessed tray (one radius scale) ---- */
.deck-groove{box-shadow:inset 0 3px 6px rgba(46,30,20,.13),inset 0 0 0 2px rgba(46,30,20,.09);border-radius:1.25rem}

/* ---- VU meter: dark recessed window so the lit segments carry the contrast ---- */
.vu-scale{background-color:#463225}
.led-off{background:rgba(255,255,255,.11)}

/* ---- concave candy LED bead ---- */
.jewel-led{position:relative;border-radius:9999px;border:1.5px solid var(--cocoa);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.85),inset 0 -2px 3px rgba(0,0,0,.22)}
.jewel-led::after{content:'';position:absolute;top:14%;left:20%;width:36%;height:36%;border-radius:9999px;background:rgba(255,255,255,.9)}

/* ---- rubber stamp badge on idea tickets ---- */
.rubber-stamp{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:0.65625rem;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border:2px solid var(--cocoa);border-radius:9999px;
  box-shadow:0 2px 0 var(--cocoa);transform:rotate(-2deg);white-space:nowrap}
/* ---- magazine column ---- */
.mag{max-width:820px;margin:0 auto;width:100%}
.rule-doodle{height:2px;border:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='4'%3E%3Cpath d='M0 2h120' stroke='%232E1E14' stroke-opacity='.22' stroke-width='2' stroke-dasharray='7 6'/%3E%3C/svg%3E");background-repeat:repeat-x}
.spread{display:flex;flex-direction:column;gap:26px}
.note{font-size:0.84375rem;line-height:1.75;color:var(--ink-soft)}

/* ---- journal "ledger" rows: flat, ruled, no boxes ---- */
.ledger{padding:14px 0;border-bottom:2px dashed var(--line)}
.ledger:last-child{border-bottom:0}
.ledger-label{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ledger-value{font-family:var(--display);font-weight:800;font-size:clamp(28px,7vw,40px);line-height:1.05;margin:4px 0 2px}
.ledger-note{font-size:0.78125rem;font-weight:700;color:var(--ink-soft)}
.ledger-split{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:0.75rem;font-weight:800;margin-top:6px}

/* ---- viral sound cards: high-contrast paper trays (NOT plain white) ---- */
.music-card{
  background:#CDEEDD;
  box-shadow:inset 0 3px 0 rgba(46,30,20,.18),inset 0 0 0 2px rgba(46,30,20,.10),0 4px 0 var(--cocoa);
}
.music-card.is-playing{background:#BCE9D3;box-shadow:inset 0 3px 0 rgba(46,30,20,.18),inset 0 0 0 2px rgba(46,30,20,.10),0 5px 0 var(--red)}

/* ---- idea ticket (required class) ---- */
.teletype-ticket{
  position:relative;background:var(--panel);border:2.5px solid var(--cocoa);border-radius:var(--r);
  box-shadow:var(--elev);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s;
}
.teletype-ticket:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 8px 0 var(--cocoa)}
.ticket-perf-line{border-top:2px dashed var(--line)}
.ticket-spine{position:absolute;left:0;top:14px;bottom:14px;width:7px;border-radius:9999px;background:var(--cat);border:2px solid var(--cocoa)}

/* ---- category cartridge shelf ---- */
.cart{
  cursor:pointer;position:relative;flex:0 0 auto;width:250px;scroll-snap-align:start;
  background:var(--panel);border:2.5px solid var(--cocoa);border-radius:var(--r);box-shadow:var(--elev);
  padding:16px 16px 14px;transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;
}
.cart:hover{transform:translateY(-3px) rotate(-.5deg)}
.cart.is-picked{transform:translateY(4px);box-shadow:var(--elev-sm);background:#FFFDF6}
/* One check per card, shown purely by CSS off .is-picked: selectCategory() only toggles classes, so the check
   has to live in every card — baked in conditionally it would stay on the first pick forever. */
.cart-check{display:none;align-items:center}
.cart.is-picked .cart-check{display:inline-flex}
.cart-spine{position:absolute;left:0;top:18px;bottom:18px;width:8px;border-radius:0 9999px 9999px 0;background:var(--cart,var(--cat));border:2px solid var(--cocoa);border-left:0}
.cart-delta{display:flex;justify-content:space-between;font-size:0.75rem;font-weight:800;padding:4px 0;border-top:2px dotted var(--line)}
.chip-cat{display:inline-flex;align-items:center;gap:5px;background:var(--cart,var(--cat));color:var(--cart-ink,var(--cocoa));border:2px solid var(--cocoa);border-radius:9999px;padding:2px 9px;font-family:var(--display);font-weight:800;font-size:0.65625rem;text-transform:uppercase}
.chip-topic{display:inline-flex;align-items:center;gap:5px;background:#fff;border:2px solid var(--cocoa);border-radius:9999px;max-width:100%;overflow-wrap:break-word;padding:5px 11px;font-family:var(--display);font-weight:800;font-size:0.6875rem;cursor:pointer;transition:transform 90ms}
.chip-topic:hover{transform:translateY(-1px) rotate(-1deg)}
.chip-topic.on{background:var(--cocoa);color:#fff;animation:chipOn .24s var(--pop)}
/* production status keeps its own fill, always with cocoa ink: bright fills never carry white text */
.chip-topic.on[data-status="belum"],.chip-topic.on[data-status-filter="belum"]{background:var(--yellow);color:var(--cocoa)}
.chip-topic.on[data-status="dibuat"],.chip-topic.on[data-status-filter="dibuat"]{background:var(--blue);color:var(--cocoa)}
.chip-topic.on[data-status="tayang"],.chip-topic.on[data-status-filter="tayang"]{background:var(--mint);color:var(--cocoa)}

/* ---- scrapbook photo-ish blocks ---- */
.block{
  position:relative;background:var(--panel);border:2.5px solid var(--cocoa);border-radius:var(--r);
  box-shadow:var(--elev);padding:20px;
}
/* JALUR shortcut cards on the home page are actions now: same lift language as .cart / .teletype-ticket */
.block[role="button"]{transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
.block[role="button"]:hover{transform:translateY(-3px) rotate(-.4deg)}
.block[role="button"]:active{transform:translateY(1px)}
/* ---- KETCHY the Tomato flipbook mascot: 4 hand-drawn SVG frames, stepped like a GIF ---- */
.ketchy{position:relative;display:inline-block;width:var(--kw,76px);height:var(--kw,76px)}
/* One cadence for every mascot: 2.4s reads as movement, .72s reads as a flicker. */
.ketchy .flip-frame{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  animation-duration:2.4s;animation-iteration-count:infinite;animation-timing-function:steps(1,end)}
.ketchy .flip-frame:nth-child(1){animation-name:flipA}
.ketchy .flip-frame:nth-child(2){animation-name:flipB}
.ketchy .flip-frame:nth-child(3){animation-name:flipC}
.ketchy .flip-frame:nth-child(4){animation-name:flipD}
/* A lone flip-frame would only strobe: flipA holds it visible for 25% of the loop, so the mascot blinks
   on and off instead of moving. Hold it solid — declared after the nth-child rules so animation-name:none
   wins over animation-name:flipA (equal specificity, later wins). */
.ketchy .flip-frame:only-child{animation:none;opacity:1}
/* Pose-by-pose cadence for mascots sitting in idle spots. Now identical to the default above, but kept because
   the markup and tests/check_katchup.js reference `.ketchy.slow` by name. */
.ketchy.slow .flip-frame{animation-duration:2.4s}
@keyframes flipA{0%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes flipB{0%,25%{opacity:0}26%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes flipC{0%,50%{opacity:0}51%,75%{opacity:1}76%,100%{opacity:0}}
@keyframes flipD{0%,75%{opacity:0}76%,100%{opacity:1}}

/* ---- opening loader: K-A-T-C-H-U-P bounces in, then splats ---- */
.boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--cream);
  animation:bootOut .45s ease 1.65s forwards}
.boot-word{display:flex;font-family:var(--display);font-weight:800;font-size:clamp(34px,11vw,64px);line-height:1;color:var(--red);text-shadow:0 4px 0 var(--cocoa)}
.boot-letter{display:inline-block;opacity:0;transform:translateY(-64px) scale(.6);animation:letterDrop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes letterDrop{0%{opacity:0;transform:translateY(-64px) scale(.6)}60%{opacity:1;transform:translateY(7px) scale(1.14)}100%{opacity:1;transform:translateY(0) scale(1)}}
.boot-splat{width:14px;height:14px;background:var(--red);border:0 solid var(--cocoa);border-radius:46% 54% 62% 38%/52% 46% 54% 48%;
  animation:splatGrow .45s cubic-bezier(.34,1.56,.64,1) 1.12s forwards}
@keyframes splatGrow{to{width:168px;height:46px;border-width:3px}}
.boot-sub{margin:6px 0 0;font-size:0.8125rem;font-weight:700;color:var(--ink-soft)}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
.splat-in{animation:squashIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes squashIn{0%{transform:scaleX(.86) scaleY(1.14)}45%{transform:scaleX(1.06) scaleY(.95)}100%{transform:scale(1)}}