/* Cut. Color. Play. — site chrome. Tokens from the design handoff §4; dark theme follows Printable Pumpkins. */
@font-face{font-family:"Quicksand";src:url(/fonts/quicksand-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Quicksand";src:url(/fonts/quicksand-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Quicksand";src:url(/fonts/quicksand-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#fbf4ec;--surface:#fff;--surface-warm:#fff8f1;--border:#ebe2d8;--border-strong:#e2d8cc;
  --text:#231f1b;--text-2:#3d3630;--text-muted:#5f564d;--text-faint:#6b625a;--text-faint-2:#8a7f74;
  --ink:#211c18;--ink-2:#3a322b;--ink-fig:#2b241f;--on-ink:#f6ede2;--on-ink-muted:#d9cfc3;--on-ink-cap:#e8dccd;
  --accent:#e5641b;--link:#b84d12;--link-hover:#8f3a0b;--mark-accent:#f08a3e;--moon:#f3c64b;
  --shadow:0 8px 20px rgba(60,40,20,.10);--focus:#2f7fd6;
  --card-border:var(--border);--thumb-warm:var(--surface-warm);
  --badge-cut-bg:#fde4cf;--badge-cut-fg:#9c4a10;--badge-color-bg:#ebe6fa;--badge-color-fg:#5b3fb0;
  --badge-play-bg:#e2f3e4;--badge-play-fg:#2f6b3a;--badge-any-bg:#e6eef8;--badge-any-fg:#2b5b9e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:500 15px/1.5 "Quicksand","Nunito",system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:920px;margin:0 auto;padding:0 24px;width:100%}
main{flex:1}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15}
h2{font-size:20px}
.sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* nav */
.nav{background:var(--ink);color:var(--on-ink)}
.nav .wrap{height:54px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#fff}
.brand:hover{color:#fff}
.navright{display:flex;align-items:center;gap:6px}
.navlinks{display:flex;align-items:center;gap:18px;font-weight:600;font-size:14px;margin-right:6px}
.navlinks a{color:var(--on-ink)}.navlinks a:hover{color:#fff}
.navlinks a.active{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--mark-accent)}
.lights{display:inline-flex;align-items:center;gap:6px;background:var(--ink-2);color:var(--on-ink);border:0;border-radius:999px;padding:6px 12px 6px 8px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;min-height:32px}
.lights svg{color:var(--moon)}.lights .on,.lights .off{display:inline-flex;align-items:center;gap:6px}
.lights .off{display:none}
html.lights-off .lights .on{display:none}html.lights-off .lights .off{display:inline-flex}
.menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:0;border-radius:999px;color:var(--on-ink);cursor:pointer}

/* hero + steps */
.hero{text-align:center;padding:40px 0 8px}
.hero h1{font-size:42px;letter-spacing:-.01em;line-height:1.1;margin:0 0 8px}
.hero p{margin:0;font-size:17px;color:var(--text-muted)}
.steps{display:flex;justify-content:center;gap:10px;margin:22px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.steps li{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px}
.steps li b{color:var(--accent)}

/* section headers */
.sect{padding:36px 0 8px;display:flex;flex-direction:column;gap:14px}
.sect .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sect .head a{font-size:14px;font-weight:700}

/* holiday tiles */
.holidays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:12px;border-radius:14px;padding:14px 16px;min-height:72px;transition:transform .12s ease,box-shadow .12s ease}
.tile:hover,.card:hover,.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tile:hover{color:inherit}
.chip-icon{flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.tile .tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .tn{font-weight:700;font-size:15px}.tile .ts{font-size:12px;font-weight:500}
.tile.stacked{flex-direction:column;align-items:flex-start;gap:8px;min-height:96px;padding:14px}

/* filters */
.filters{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:28px 0 20px}
.group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sep{width:1px;height:26px;background:var(--border-strong);margin:0 6px}
.sel{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap svg{position:absolute;right:12px;pointer-events:none}
.sel select{font:inherit;font-weight:600;font-size:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 32px 8px 14px;min-height:40px;appearance:none;-webkit-appearance:none;cursor:pointer}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;color:var(--text);transition:transform .12s ease,box-shadow .12s ease}
.card:hover{color:var(--text)}
.card[hidden]{display:none}
.thumb{height:160px;display:flex;align-items:center;justify-content:center;background:var(--surface);padding:12px}
.card[data-type=cutout] .thumb{background:var(--thumb-warm)}
.thumb img{max-height:136px;width:auto;max-width:100%;object-fit:contain}
.card .t{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:15px;line-height:1.2}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.badge.big{font-size:12px;padding:4px 10px}
.badge.t-cutout{background:var(--badge-cut-bg);color:var(--badge-cut-fg)}
.badge.t-coloring{background:var(--badge-color-bg);color:var(--badge-color-fg)}
.badge.t-play{background:var(--badge-play-bg);color:var(--badge-play-fg)}
.badge.t-any{background:var(--badge-any-bg);color:var(--badge-any-fg)}
.empty{text-align:center;color:var(--text-muted);padding:30px 0}
.morewrap{display:flex;justify-content:center;padding:24px 0 8px}
.more[hidden]{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px;border:0;border-radius:10px;padding:12px 20px;cursor:pointer;background:var(--accent);color:#fff;min-height:44px}
.btn:hover{color:#fff;filter:brightness(.92)}
.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn.secondary:hover{color:var(--text);border-color:var(--text-muted);filter:none}
.btn.pill{border-radius:999px}

/* feature panels */
.panels{display:flex;flex-direction:column;gap:16px;padding:24px 0 40px}
.panels>h2{margin:0 0 -4px}
.panel{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:var(--on-ink);border-radius:16px;padding:24px 22px}
.panel h2{color:#fff;margin:0 0 6px}
.panel p{margin:0;font-size:15px;color:var(--on-ink-muted)}
.panel .btn{flex-shrink:0}

/* footer */
footer.site{border-top:1px solid var(--border-strong);padding:22px 0 28px;font-size:13px;color:var(--text-muted)}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* detail page */
.crumb{padding:18px 0 14px;font-size:13px;font-weight:600}
.detail{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-bottom:40px}
.detail .pv{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.detail .info{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.viewtabs{display:flex;gap:8px}
.fig{margin:0;background:var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.fig .art{height:440px;display:flex;align-items:center;justify-content:center;background:var(--ink-fig);padding:24px}
.fig .art img,.fig .art svg{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.fig.paper .art{background:var(--surface);padding:16px}
.fig.paper .art img{box-shadow:0 2px 12px rgba(0,0,0,.18)}
.fig figcaption{padding:10px 16px 12px;text-align:center;font-size:13px;font-weight:600;color:var(--on-ink-cap)}
.fig.paper figcaption{background:var(--ink)}
[data-pane][hidden]{display:none!important}
.detail h1{font-size:36px;letter-spacing:-.01em;line-height:1.1}
.detail .summary{margin:0;font-size:17px;line-height:1.5;color:var(--text-2)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions .btn{font-size:16px;min-height:48px}
.pinlink{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;min-height:40px}
.paperpick{display:flex;flex-direction:column;gap:8px}
.paperpick .lbl{font-weight:700;font-size:15px}
.papers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.paper{text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;min-height:56px;display:flex;flex-direction:column;gap:2px}
.paper b{font-weight:700;font-size:14px}.paper span{font-size:11px;color:var(--text-faint);font-weight:500}
.paper[aria-pressed=true]{border:2px solid var(--accent);padding:9px 11px}
.howto{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.howto h2{font-size:18px}
.howto ol{margin:0;padding-left:20px;font-size:15px;line-height:1.55;display:flex;flex-direction:column;gap:6px;color:var(--text-2)}
.howto .safety{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-faint)}
.metastrip{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--text-faint)}
.metastrip span{display:inline-flex;align-items:center;gap:6px}
.hint{font-size:14px;color:var(--text-muted);margin:0}
.more-sect{padding-top:40px;display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.more-sect .grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* holidays page */
.hmain{display:flex;flex-direction:column;gap:28px;padding-bottom:48px}
.hhero{text-align:center;padding:40px 0 0}
.hhero h1{font-size:40px;letter-spacing:-.01em;line-height:1.1;margin:0 0 8px}
.hhero p{margin:0;font-size:17px;color:var(--text-muted)}
.soon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.months{display:flex;flex-direction:column;gap:18px}
.months .head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.showfilter{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--text-muted);align-items:center}
.showfilter .chip{font-size:12px;padding:6px 12px;min-height:30px}
.month{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start}
.month[hidden]{display:none}
.month .ml{font-weight:700;font-size:15px;color:var(--text-faint-2);padding-top:10px}
.month .pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 16px 9px 10px;font-weight:700;font-size:14px;min-height:44px;transition:transform .12s ease,box-shadow .12s ease}
.pill:hover{color:inherit}
.pill[hidden]{display:none}
.pill .dot{width:24px;height:24px;border-radius:999px;flex-shrink:0}
.pill .vary{font-weight:500;font-size:12px}
.tellus{margin:0;font-size:13px;color:var(--text-faint)}
h2.sub{font-size:18px}

/* holiday landing */
.hband{border-bottom:1px solid var(--hband-border)}
.hband .hero{text-align:left;padding:32px 24px 36px;display:flex;align-items:center;gap:32px;max-width:920px;margin:0 auto}
.hband .ht{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.hband .crumb{padding:0;font-size:13px;font-weight:700}
.hband .dl{display:flex;align-items:center;gap:10px}
.hband .date{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hband h1{font-size:44px;letter-spacing:-.01em;line-height:1.08;margin:0}
.hband p{margin:0;font-size:17px;line-height:1.5}
.hband .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.hband .ill{flex:0 0 300px;display:flex;justify-content:center}
.hband .ill svg,.hband .ill img{width:280px;height:240px}
.btn.outline{background:#fff;border:1px solid var(--hband-border)}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.next-sect{padding:28px 0 40px;display:flex;flex-direction:column;gap:12px}

/* prose pages */
.prose{max-width:720px;padding:20px 0 50px;font-size:16px;line-height:1.55}
.prose h1{font-size:36px;line-height:1.15;margin:0 0 12px}
.prose h2{font-size:20px;margin:26px 0 6px}
.prose p{margin:0 0 12px;color:var(--text-2)}

/* toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);max-width:calc(100vw - 32px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}.tile,.card,.pill{transition:none}}

/* responsive: tablet */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .holidays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1,.hhero h1{font-size:34px}
  .hband .hero{flex-direction:column;align-items:flex-start}
  .hband .ill{flex-basis:auto}
  .more-sect .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* responsive: phone */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav .wrap{gap:8px}
  .brand{font-size:17px}
  .menu{display:inline-flex}
  .lights{width:40px;height:40px;padding:0;justify-content:center}
  .lights .lbl{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
  .navlinks{display:none;position:absolute;left:0;right:0;top:54px;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 14px;z-index:20;margin:0;border-bottom:1px solid var(--ink-2)}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--ink-2)}
  .navlinks a:last-child{border-bottom:0}
  .nav{position:relative}
  .hero{padding:28px 0 6px}
  .hero h1,.hhero h1{font-size:30px}
  .hero p{font-size:15px}
  .steps{gap:8px;margin-top:18px}.steps li{padding:7px 13px;font-size:13px}
  .sect{padding:26px 0 4px}.sect h2{font-size:18px}
  .holidays{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .filters{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:22px 0 16px}
  .group{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .group::-webkit-scrollbar{display:none}
  .group .chip{flex-shrink:0}
  .sep{display:none}
  .sel>span:first-child{position:absolute;left:-10000px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .thumb{height:140px}.thumb img{max-height:116px}
  .card .t{padding:10px 12px 12px;gap:7px}.card h3{font-size:14px}
  .more{width:100%}
  .panels{gap:12px;padding:20px 0 8px}
  .panel{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 18px}
  .panel h2{font-size:18px}.panel p{font-size:14px}
  footer.site .wrap{flex-direction:column;gap:8px}
  .detail h1{font-size:30px}
  .fig .art{height:340px}
  .papers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .more-sect .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soon,.next{grid-template-columns:1fr}
  .month{grid-template-columns:minmax(0,1fr);gap:8px}
  .month .ml{padding-top:0}
  .hband .hero{padding:24px 16px 28px;gap:20px}
  .hband h1{font-size:34px}
  .hband .ill svg,.hband .ill img{width:220px;height:190px}
}

/* dark theme ("Lights off"): ink background, cream text, same accent */
html.lights-off{
  --bg:#0e0a08;--surface:#1a1310;--surface-warm:#201713;--border:#33251b;--border-strong:#33251b;
  --text:#eadfce;--text-2:#d9cbb8;--text-muted:#b8a594;--text-faint:#a89683;--text-faint-2:#8f7f70;
  --ink:#211c18;--ink-2:#3a322b;--ink-fig:#15100d;--link:#ffb071;--link-hover:#ffc89a;--mark-accent:#f08a3e;
  --shadow:0 8px 20px rgba(0,0,0,.45);--focus:#7fb3f0;
  --badge-cut-bg:#4a2410;--badge-cut-fg:#ffb98a;--badge-color-bg:#2c2342;--badge-color-fg:#c9b8ef;
  --badge-play-bg:#1f3a1b;--badge-play-fg:#a9e09a;--badge-any-bg:#1c2a40;--badge-any-fg:#9fc2f0;
}
html.lights-off .nav{border-bottom:1px solid var(--ink-2)}
html.lights-off .panel,html.lights-off .fig{border:1px solid var(--ink-2)}
html.lights-off .card .thumb,html.lights-off .fig.paper .art{background:#fff}  /* black line art needs a white well */
html.lights-off .card[data-type=cutout] .thumb{background:#fff8f1}
html.lights-off .btn.outline{background:var(--surface);color:var(--text)}
html.lights-off .toast{background:#ff9a3c;color:#1a1310}
html.lights-off .hband{filter:saturate(.85)}

/* printing: only the printable, one page (the paper picker swaps the @page size) */
.print-only{display:none}
@page{size:letter;margin:0.25in}
@media print{
  body{background:#fff}
  body>*:not(.print-only){display:none!important}
  .print-only{display:block!important}
  .print-only img,.print-only svg{width:100%;height:auto;max-height:10.4in;object-fit:contain;margin:0 auto}
}