/* The Broken Crayons — static site styles
   Design direction (Budd, 2026-11-13): professional but exciting — eye-catching but
   pleasing; dark and polished like the logo, crayon-box color used with restraint.
   One system across the whole site (landing, content pages, board section in board.css).
   NO dusty light/serif theme — Budd rejected it twice. */
:root{
  --bg:#070708;
  --cream:#f7f1e3;
  --muted:#b7ae99;
  --card:#14151a;
  --line:#2a2c34;
  --gold:#f2b74d;
  --c-orange:#ff8b2a;
  --c-blue:#2f7fd0;
  --c-purple:#7a4fd0;
  --c-green:#3fae5a;
  --c-red:#e63b2e;
  --c-pink:#e563a8;
  --c-yellow:#ffd23f;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--cream);background:var(--bg);line-height:1.65}
.topband{background:#f3e9d2 url("assets/banner-still-color.jpg") center/100% 100% no-repeat;aspect-ratio:1966/121;font-size:0;color:transparent;line-height:0;padding:0}
.phone{text-align:center;font-family:Helvetica,Arial,sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.03em;color:var(--gold);padding:.85rem 1rem 0}
header.site{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:.7rem 1rem}
header.site .brand{font-family:Helvetica,Arial,sans-serif;font-weight:900;letter-spacing:.06em;text-decoration:none;color:var(--cream);text-transform:uppercase}
header.site .brand:hover{color:var(--gold)}
nav.main a{font-family:Helvetica,Arial,sans-serif;text-decoration:none;color:var(--muted);margin-left:1.1rem;font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
nav.main a:hover{color:var(--gold)}
.hero{text-align:center;padding:2.5rem 1rem 1.5rem;max-width:820px;margin:0 auto}
.hero img.logo{max-width:340px;width:80%;height:auto}
h1,h2{font-family:Helvetica,Arial,sans-serif;text-transform:uppercase;line-height:1.15}
h1{font-size:clamp(2rem,5.5vw,3rem);font-weight:900;letter-spacing:.015em;background:linear-gradient(92deg,#ffd23f,#ff8b2a 55%,#e563a8);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.6em 0 .4em}
h2{font-size:1.55rem;font-weight:900;color:var(--cream);letter-spacing:.03em;margin-top:2.4rem;border-left:5px solid var(--gold);padding-left:.65rem}
.wrap{max-width:860px;margin:0 auto;padding:0 1rem 3rem}
.wrap a{color:var(--gold)}
.lede{font-size:1.18rem;color:var(--cream)}
.lede strong{color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.2rem 0}
.card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:1.1rem 1.15rem}
.cards .card:nth-child(6n+1){border-top-color:var(--c-orange)}
.cards .card:nth-child(6n+2){border-top-color:var(--c-blue)}
.cards .card:nth-child(6n+3){border-top-color:var(--c-green)}
.cards .card:nth-child(6n+4){border-top-color:var(--c-purple)}
.cards .card:nth-child(6n+5){border-top-color:var(--c-pink)}
.cards .card:nth-child(6n+6){border-top-color:var(--c-red)}
.card h3{font-family:Helvetica,Arial,sans-serif;margin:.2rem 0 .5rem;font-size:1.08rem;color:var(--cream)}
.card p{color:#e8e2d2}
.btn{display:inline-block;background:var(--gold);color:#10151b;font-family:Helvetica,Arial,sans-serif;text-decoration:none;padding:.75rem 1.6rem;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.btn:hover{background:#ffc95e;transform:translateY(-2px)}
.crisis{background:linear-gradient(180deg,#22060b,#150509);border-top:3px solid var(--c-red);color:var(--cream);text-align:center;padding:1.25rem 1rem;font-family:Helvetica,Arial,sans-serif}
.crisis a{color:var(--c-yellow);font-weight:800}
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.4rem 1.3rem 1.2rem}
.faq dt{font-family:Helvetica,Arial,sans-serif;font-weight:800;margin-top:1.15rem;color:var(--gold);font-size:1.05rem}
.faq dd{margin:.3rem 0 0 0;color:#e8e2d2}
.disclaimer{font-style:italic;color:var(--muted)}
footer{background:#0d0d10;border-top:1px solid var(--line);text-align:center;padding:2rem 1rem;font-family:Helvetica,Arial,sans-serif;font-size:.85rem;color:var(--muted)}
footer a{color:var(--gold)}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.product{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem;text-align:center;color:var(--cream)}
.product .price{font-family:Helvetica,Arial,sans-serif;font-weight:800;color:var(--gold)}
form.warmth{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
form.warmth label{display:block;font-family:Helvetica,Arial,sans-serif;margin:.8rem 0 .3rem;color:var(--cream)}
form.warmth input,form.warmth select,form.warmth textarea{width:100%;padding:.55rem;border:1px solid var(--line);border-radius:6px;font-size:1rem;background:#0b0b0e;color:var(--cream)}

/* LANDING — logo only, full screen, one way in */
html{background:#000}
body.landing{margin:0;background:#000;overflow:hidden}
.crayon-field{position:fixed;inset:0;background:#000;z-index:0;overflow:hidden}
.crayon-field .cr{position:absolute;height:auto;mix-blend-mode:screen}
.crayon-field .cr-s{width:clamp(80px,12vw,130px)}
.crayon-field .cr-m{width:clamp(110px,17vw,195px)}
.crayon-field .cr-l{width:clamp(150px,23vw,265px)}
.landing-stage{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:0}
.landing-logo{width:100vw;height:calc(100svh - 152px);object-fit:contain;display:block}
.landing-stage .explore-btn{margin:22px 0 26px}
.explore-btn{position:relative;display:inline-block;text-decoration:none}
.explore-btn img{display:block;height:clamp(72px,12vw,104px);width:auto;mix-blend-mode:screen}
.explore-btn span{position:absolute;left:47.5%;top:26%;transform:translate(-50%,-50%);font-family:Helvetica,Arial,sans-serif;font-size:clamp(.95rem,2.6vw,1.32rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#2e1f04;text-shadow:0 1px 0 rgba(255,240,200,.4);white-space:nowrap}
.explore-btn:hover{transform:translateY(-2px)}

/* EXPLORE — the library */
.library{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.4rem}
.lib-card{display:block;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:1.2rem 1.25rem;text-decoration:none;color:var(--cream);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.library .lib-card:nth-child(6n+1){border-top-color:var(--c-orange)}
.library .lib-card:nth-child(6n+2){border-top-color:var(--c-blue)}
.library .lib-card:nth-child(6n+3){border-top-color:var(--c-green)}
.library .lib-card:nth-child(6n+4){border-top-color:var(--c-purple)}
.library .lib-card:nth-child(6n+5){border-top-color:var(--c-pink)}
.library .lib-card:nth-child(6n+6){border-top-color:var(--c-red)}
.lib-card:hover{transform:translateY(-3px);border-color:#3d404c;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.lib-card h3{font-family:Helvetica,Arial,sans-serif;margin:.1rem 0 .45rem;font-size:1.14rem;color:var(--cream)}
.lib-card h3::after{content:" →";color:var(--gold)}
.lib-card p{margin:0;color:var(--muted)}

.explore-mini{position:relative;display:inline-block;line-height:0;text-decoration:none;flex:none}
.explore-mini img{height:42px;width:auto;display:block}
.explore-mini span{position:absolute;left:47.5%;top:26%;transform:translate(-50%,-50%);font-family:Helvetica,Arial,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2e1f04;line-height:1;white-space:nowrap;text-shadow:0 1px 0 rgba(255,240,200,.4)}
.explore-mini:hover{transform:translateY(-2px)}
.back-wrap{max-width:1080px;margin:0 auto;padding:0 1rem 1.6rem;text-align:center}
.back-btn{position:relative;display:inline-block;background:#fff;border:none;border-radius:999px;padding:0;cursor:pointer;overflow:hidden;line-height:0;box-shadow:0 10px 26px rgba(0,0,0,.5);transition:transform .15s ease}
.back-btn img{height:58px;width:auto;display:block}
.back-btn span{position:absolute;left:53%;top:51%;transform:translate(-50%,-50%);font-family:Helvetica,Arial,sans-serif;font-size:1rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#f7f1e3;line-height:1;white-space:nowrap}
.back-btn:hover{transform:translateY(-2px)}

.flyer{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);margin-bottom:.8rem}
.pledge-text{text-align:center;font-size:1.12rem;line-height:1.8;margin:1.2rem auto 1.6rem;max-width:660px}
.pledge-text .big{font-size:1.55rem;font-weight:800;color:var(--gold);line-height:1.55;margin-bottom:1rem}
.host{display:inline-block;background:#23242c;color:var(--gold);font-family:Helvetica,Arial,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;margin-bottom:.5rem}
.phone a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem;margin:1rem 0}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.gallery-empty{border:1px dashed var(--line);border-radius:10px;padding:1.2rem;color:var(--muted);text-align:center}

a.card{display:block;color:inherit;text-decoration:none;cursor:pointer}
.tap-hint{color:var(--gold);font-weight:700;margin-top:.5rem}
.ticker-link{display:block;text-decoration:none;background:#14151a;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker-wrap{overflow:hidden}
.ticker{display:flex;width:max-content;white-space:nowrap;padding:.6rem 0;animation:tickmove 50s linear infinite}
.ticker span{padding:0 1.8rem;color:var(--cream);font-weight:600;letter-spacing:.02em}
.ticker b{color:var(--gold);-webkit-text-stroke:.5px #000;text-shadow:0 0 3px rgba(0,0,0,.4)}
@keyframes tickmove{to{transform:translateX(-50%)}}
.sob-note{color:var(--gold);font-weight:600}

.ticker-wrap{position:relative;background:linear-gradient(180deg,#2b2b30 0%,#19191c 58%,#242428 100%)}
.ticker-wrap::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,rgba(242,183,77,.5) 0 42px,transparent 42px 84px);z-index:0}
.ticker{position:relative;z-index:1;padding:.35rem 0}
.ticker span{display:inline-flex;align-items:center;gap:.55rem}
.ticker .bike{height:38px;width:auto;display:block;mix-blend-mode:screen}
.ticker .sob-time{-webkit-text-stroke:.5px #000;text-shadow:0 0 3px rgba(0,0,0,.4)}
.product img{width:100%;border-radius:10px;display:block;margin-bottom:.6rem}
.product .opts{color:var(--muted);font-size:.92rem}

/* Help & Resources card: animated neon ring (Budd, 2026-11-13) */
@property --neon-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.lib-card.help-glow { position: relative; z-index: 0; overflow: hidden; animation: helpulse 2.4s ease-in-out infinite; }
.lib-card.help-glow::before {
  content: ""; position: absolute; inset: -22px; z-index: -1;
  background: conic-gradient(from var(--neon-a), #ff2d78, #ff8b2a, #ffd23f, #3fae5a, #2f7fd0, #7a4fd0, #ff2d78);
  /* blurred so the conic's hard spokes/seam melt into a smooth wash (Budd saw the line, 2026-11-13) */
  filter: blur(22px) saturate(1.15);
  animation: neonspin 9s linear infinite;
  /* "Circus version" (Budd, 2026-11-13): the rainbow floods the whole card face — he
     tried the ring-only version and preferred this. */
}
@keyframes neonspin { to { --neon-a: 360deg; } }
@keyframes helpulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,45,120,.35), 0 0 26px rgba(47,127,208,.18); }
  50% { box-shadow: 0 0 18px rgba(255,210,63,.55), 0 0 40px rgba(122,79,208,.30); }
}
@media (prefers-reduced-motion: reduce) {
  .lib-card.help-glow, .lib-card.help-glow::before { animation: none; }
}
/* Help & Resources card text: white, larger, black outline (Budd, 2026-11-13) */
.lib-card.help-glow h3, .lib-card.help-glow p { color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.55); }
.lib-card.help-glow h3 { font-size: 1.5rem; -webkit-text-stroke: .9px #000; }
.lib-card.help-glow p { font-size: 1.18rem; font-weight: 600; -webkit-text-stroke: .6px #000; }