/* ============================================================
   Stars & Bears — "Whiteboard" theme.
   A dry-erase board: cool-white surface, faint erased ghosts,
   aluminium frame, OpenDyslexic lettering, hand-drawn doodles that
   draw themselves on, sticky-note articles, a marker tray footer.
   ============================================================ */

:root{
  /* board surface */
  --board:#f4f8f9;
  --board-2:#e9eff2;
  /* dry-erase marker ink */
  --ink:#34383c;          /* soft charcoal "black" marker */
  --blue:#2f6fb3;
  --red:#c0423c;
  --green:#2d7e54;
  --orange:#e3892f;
  --purple:#8a5fd0;
  --muted:#697175;
  /* aluminium frame */
  --frame:#ccd3d8;
  --frame-edge:#a9b2b9;
  /* type — OpenDyslexic throughout (three names kept for legibility of intent) */
  --marker:'OpenDyslexic','Segoe UI',Verdana,sans-serif;
  --hand:'OpenDyslexic','Segoe UI',Verdana,sans-serif;
  --note:'OpenDyslexic','Segoe UI',Verdana,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);
  font-family:var(--note);font-size:19px;line-height:1.7;
  letter-spacing:.01em;word-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  /* bear paw-print cursor (charcoal marker w/ white outline for contrast) */
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%2334383c' stroke='%23ffffff' stroke-width='1'%3E%3Cellipse cx='16' cy='21' rx='7.5' ry='6'/%3E%3Cellipse cx='8.5' cy='13' rx='2.7' ry='3.4'/%3E%3Cellipse cx='14' cy='9' rx='2.7' ry='3.6'/%3E%3Cellipse cx='20' cy='9' rx='2.7' ry='3.6'/%3E%3Cellipse cx='24.5' cy='13.5' rx='2.7' ry='3.4'/%3E%3C/g%3E%3C/svg%3E") 16 16,auto;
  background:
    radial-gradient(130% 90% at 18% -5%, #ffffff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f7fbfc 0%,#eef3f5 100%) fixed;
  background-color:var(--board)}

/* faint erased-marker ghosts + sheen, behind everything */
.board-sheen{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 38% at 78% 16%, rgba(47,111,179,.055), transparent 70%),
    radial-gradient(46% 34% at 24% 62%, rgba(212,80,74,.045), transparent 72%),
    radial-gradient(40% 30% at 64% 84%, rgba(58,157,106,.045), transparent 72%);
  opacity:.9}
/* horizontal smear of an old erase pass */
.board-sheen::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(96deg,
    rgba(120,140,150,0) 0 14px,
    rgba(120,140,150,.018) 14px 30px,
    rgba(120,140,150,0) 30px 60px)}

/* aluminium frame around the board window */
.board-frame{position:fixed;inset:0;z-index:60;pointer-events:none;
  border:13px solid var(--frame);border-radius:7px;
  box-shadow:
    inset 0 0 0 1px var(--frame-edge),
    inset 0 0 0 14px #eef2f4,
    inset 0 0 26px rgba(40,60,70,.07),
    0 0 0 1px var(--frame-edge)}

.wrap{max-width:1060px;margin:0 auto;padding:0 30px;position:relative;z-index:1}

a{color:var(--blue);text-decoration:none;
  background:linear-gradient(var(--blue),var(--blue)) left bottom / 100% 2px no-repeat;
  padding-bottom:1px}
a:hover{background-size:100% 3px}

/* shared doodle draw-on */
.draw path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  animation:draw 1.1s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px) rotate(var(--rot,0deg))}
  to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}}

/* ============================================================
   Masthead
   ============================================================ */
.masthead{position:relative;text-align:center;padding:30px 0 30px;z-index:1}
/* Pad the wrap (not the eyebrow) so flow content clears the pinned corner
   notes — the notes anchor to the wrap's edge and stay put. */
.masthead .wrap{padding-top:94px}

/* corner notes */
.corner-note{position:absolute;top:6px;font-family:var(--hand);font-weight:600;
  font-size:18px;line-height:1.05;color:var(--muted);
  border:2px solid currentColor;border-radius:10px 9px 11px 8px;
  padding:7px 12px;background:rgba(255,255,255,.55)}
.issue-tag{left:0;color:var(--green);transform:rotate(-4deg)}
.date-note{right:0;transform:rotate(3deg);
  background:#fff6cf;border-color:var(--orange);color:#7a5a17;
  box-shadow:0 4px 10px rgba(60,50,20,.12)}
.date-note b{font-weight:700;font-size:21px;color:#5d4410;display:block;margin-top:1px}
/* bit of tape on the reminder */
.date-note::before{content:"";position:absolute;top:-9px;left:50%;
  width:46px;height:16px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(180,200,210,.5);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.eyebrow{font-family:var(--hand);font-weight:500;font-size:clamp(18px,2.4vw,23px);
  color:var(--blue);margin:0 0 4px;transform:rotate(-1.2deg);
  animation:riseIn .6s ease both}

.nameplate{position:relative;display:inline-block;font-family:var(--marker);
  font-weight:700;color:var(--ink);line-height:1;letter-spacing:0;
  font-size:clamp(38px,8.5vw,84px);margin:6px 0 30px;
  text-shadow:0 1px 0 rgba(255,255,255,.6),1px 2px 1px rgba(40,50,60,.06);
  animation:riseIn .7s ease .05s both}
.nameplate .amp{color:var(--red);font-size:.86em;padding:0 .04em}

/* drawn underline swoosh under the title */
.doodle{position:absolute;overflow:visible}
.underline{left:-2%;bottom:-26px;width:104%;height:42px}
.underline path{--len:900;animation-delay:.5s}
/* the star figure — a big star wrapping the word "you" in the eyebrow */
.hey{position:relative;display:inline-block}
.hey-star{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:132px;height:112px;overflow:visible;pointer-events:none;z-index:-1}
.hey-star path{--len:360;animation-delay:.7s}

.motto{font-family:var(--note);font-weight:400;
  font-size:clamp(17px,2.3vw,21px);color:#4a5256;
  max-width:42ch;margin:0 auto;line-height:1.5;
  animation:riseIn .7s ease .15s both}

/* the three colored marker words */
.curious-minds{display:inline-block;font-family:var(--hand);font-weight:700;
  font-size:clamp(24px,5vw,36px);line-height:1.2;white-space:normal;margin-top:24px}
.cm{display:inline-block;padding:0 2px}
.cm1{color:var(--purple);transform:rotate(-3deg)}
.cm2{color:var(--red);transform:rotate(1deg);position:relative}
.cm3{color:var(--green);transform:rotate(-1.5deg)}
/* hand-drawn loop circling "curious" — sized to wrap the wider OpenDyslexic word */
.loop{position:absolute;left:-25%;top:-58%;width:150%;height:206%}
.loop path{--len:430;animation-delay:1.15s}

/* ============================================================
   Topic filters — marker tabs, active one is circled
   ============================================================ */
.sectionbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 4px;margin:8px 0 14px}
.filter-btn{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:8px 16px;position:relative;
  transform:rotate(-.6deg);transition:color .15s,transform .15s}
.filter-btn:nth-child(even){transform:rotate(.8deg)}
.filter-btn:hover{color:var(--blue)}
.filter-btn.active{color:var(--red)}
/* drawn marker loop around the active tab — roomier for the wider font */
.filter-btn.active::after{content:"";position:absolute;inset:-7px -6px;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 56' fill='none'%3E%3Cpath d='M98,7 C72,-1 34,1 18,15 C5,26 8,44 32,51 C63,60 110,50 116,29 C119,17 109,9 88,5' stroke='%23d4504a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat}

/* blue hand-drawn wave under the category row */
.wave-rule{width:118px;height:11px;margin:2px auto 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 11' fill='none'%3E%3Cpath d='M3,7 C30,2 60,9 88,4 C100,2 110,5 117,4' stroke='%232f6fb3' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat}

/* ============================================================
   Articles — sticky notes pinned to the board
   ============================================================ */
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:34px 30px;padding:6px 0 10px}
.article{display:block;position:relative;text-decoration:none;color:var(--ink);
  background:#fdf3a0;padding:26px 24px 30px;min-height:200px;
  font-family:var(--note);
  box-shadow:0 10px 18px rgba(40,50,60,.14),0 2px 4px rgba(40,50,60,.1);
  transform:rotate(-1.5deg);transition:transform .18s ease,box-shadow .18s ease}
.article:nth-child(3n+2){background:#bfe1f2;transform:rotate(1.4deg)}
.article:nth-child(3n+3){background:#f8c4d6;transform:rotate(-.6deg)}
.article:nth-child(4n+4){background:#cdebb0;transform:rotate(2deg)}
/* tape strip */
.article::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:24px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(214,224,229,.62);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.article:hover{transform:rotate(0) translateY(-5px) scale(1.02);
  box-shadow:0 18px 30px rgba(40,50,60,.2)}
.article .kicker{display:inline-block;font-family:var(--hand);font-weight:700;
  font-size:16px;letter-spacing:.02em;color:var(--red);
  text-transform:lowercase;margin-bottom:6px}
.article:nth-child(3n+2) .kicker{color:var(--blue)}
.article:nth-child(3n+3) .kicker{color:var(--purple)}
.article:nth-child(4n+4) .kicker{color:var(--green)}
.article .headline{font-family:var(--hand);font-weight:700;line-height:1.02;
  font-size:clamp(24px,2.4vw,29px);color:var(--ink);margin:0 0 8px}
.article .dateline{font-family:var(--note);font-size:14px;color:#6c7479;margin:0 0 10px}
.article .teaser{font-size:16px;line-height:1.5;color:#3f474b;margin:0 0 12px}
.article .more{font-family:var(--hand);font-weight:700;font-size:18px;color:var(--ink)}
.article:hover .more{color:var(--blue)}

.empty{grid-column:1/-1;text-align:center;font-family:var(--hand);font-weight:600;
  font-size:clamp(24px,3.4vw,32px);color:var(--muted);padding:54px 20px;
  transform:rotate(-1deg)}
.empty::after{content:"\270e";display:block;font-size:34px;margin-top:6px;color:var(--blue)}

/* ============================================================
   Subscribe — a sign-up sheet pinned to the board
   ============================================================ */
.subscribe{margin:26px 0 8px;display:flex;justify-content:center}
.sub-card{position:relative;width:100%;max-width:540px;text-align:center;
  background:#fff;border:2px dashed var(--ink);border-radius:16px;
  padding:32px 26px 30px;transform:rotate(-.6deg);
  box-shadow:0 14px 28px -16px rgba(40,50,60,.4)}
.sub-tape{position:absolute;top:-12px;left:50%;width:96px;height:26px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:rgba(214,224,229,.6);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.sub-eyebrow{font-family:var(--hand);font-weight:600;color:var(--blue);
  font-size:18px;margin:0 0 2px;transform:rotate(-1deg)}
.sub-head{font-family:var(--hand);font-weight:700;color:var(--ink);
  font-size:clamp(26px,3.8vw,34px);line-height:1.1;margin:0 0 8px}
.sub-sub{font-family:var(--note);font-size:16px;color:#4a5256;line-height:1.5;
  max-width:42ch;margin:0 auto 20px}
.sub-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}
.sub-form input{flex:1 1 240px;min-width:0;font-family:var(--note);font-size:17px;
  color:var(--ink);background:#fbfdfe;border:2px solid var(--ink);border-radius:12px;
  padding:12px 14px;min-height:50px}
.sub-form input::placeholder{color:#9aa2a7}
.sub-form button{font-family:var(--hand);font-weight:700;font-size:19px;cursor:pointer;
  background:var(--green);color:#fff;border:2px solid var(--green);border-radius:12px;
  padding:12px 22px;min-height:50px;transition:background .15s,transform .15s}
.sub-form button:hover{background:#256b47;transform:translateY(-1px)}
.sub-form button:disabled{opacity:.6;cursor:progress}
.sub-status{font-family:var(--hand);font-weight:600;font-size:17px;margin:14px 0 0;min-height:1.2em}
.sub-status.ok{color:var(--green)}
.sub-status.err{color:var(--red)}
.sub-status.note{color:var(--muted)}
/* community actions — co-create, not just subscribe */
.join-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 12px;margin:20px 0 0;padding-top:16px;border-top:1px dashed #cfd6da}
.join-lead{font-family:var(--note);font-size:14px;color:var(--muted)}
.join-link{font-family:var(--hand);font-weight:700;font-size:17px;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:11px;
  border:2px solid currentColor;background:#fff;transition:transform .15s,background .15s}
.join-link span{filter:grayscale(.1)}
.join-link.topic{color:var(--orange)}
.join-link.write{color:var(--purple)}
.join-link:hover{transform:translateY(-1px) rotate(-1deg);background:var(--board-2)}
/* visually-hidden but available to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Footer — the marker tray
   ============================================================ */
footer.tray{position:relative;z-index:1;margin-top:54px;padding:26px 30px 40px;
  background:linear-gradient(180deg,#e2e7ea 0%,#cfd6da 48%,#bcc4c9 100%);
  border-top:1px solid #fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 6px rgba(40,50,60,.12)}
.markers{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px;
  min-height:34px;margin-bottom:16px}
.mk{position:relative;width:96px;height:18px;border-radius:9px;
  box-shadow:0 3px 5px rgba(30,40,50,.22)}
.mk::after{content:"";position:absolute;right:-7px;top:3px;width:12px;height:12px;
  border-radius:3px;background:#3a3f44}              /* marker cap/tip */
.mk-black{background:linear-gradient(180deg,#54595e,#3a3f44)}
.mk-blue{background:linear-gradient(180deg,#4a8fd6,#2f6fb3)}
.mk-red{background:linear-gradient(180deg,#e2655f,#d4504a)}
.mk-green{background:linear-gradient(180deg,#56b785,#3a9d6a)}
.eraser{width:54px;height:26px;border-radius:4px;
  background:linear-gradient(180deg,#5a6e9c 0 60%,#e9edf2 60% 100%);
  box-shadow:0 3px 5px rgba(30,40,50,.25)}

.license{font-family:var(--note);font-weight:400;font-size:14px;text-align:center;
  color:#52595e;line-height:1.7}
.license a{color:#2f6fb3;background-image:linear-gradient(#2f6fb3,#2f6fb3)}

/* ============================================================
   Article pages (running header + post) — kept on theme
   ============================================================ */
nav.site{position:relative;z-index:1;background:rgba(255,255,255,.5);
  border-bottom:2px dashed var(--frame-edge)}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 30px}
.brand{font-family:var(--marker);font-size:28px;color:var(--ink);text-decoration:none;background:none}
.brand:hover{background:none}
nav.site .links{display:flex;gap:18px}
nav.site .links a{font-family:var(--hand);font-weight:600;font-size:19px}

article.post{position:relative;z-index:1;padding:46px 0 10px}
.post-head{max-width:760px;margin:0 auto;text-align:center}
.post-head .tag{display:inline-block;font-family:var(--hand);font-weight:700;
  font-size:18px;color:var(--red);text-transform:lowercase;margin-bottom:8px}
.post-head h1{font-family:var(--marker);font-weight:400;line-height:1.05;
  font-size:clamp(32px,6vw,56px);margin:6px 0 0;color:var(--ink)}
.post-head .meta{display:block;font-family:var(--note);font-size:15px;color:var(--muted);margin-top:14px}

.post-body{max-width:680px;margin:30px auto 0;font-size:19px;line-height:1.7}
.post-body p{margin:0 0 18px}
.post-body h2{font-family:var(--hand);font-weight:700;font-size:28px;
  margin:34px 0 10px;color:var(--ink)}
.post-body blockquote{margin:28px auto;padding:14px 22px;max-width:88%;
  border-left:4px solid var(--blue);font-family:var(--hand);font-weight:500;
  font-size:24px;line-height:1.35;color:#3f474b;background:rgba(47,111,179,.06)}
.post-body ul,.post-body ol{padding-left:24px}
.post-body li{margin:7px 0}
.post-body code{font-family:'Courier New',monospace;font-size:.84em;
  background:var(--board-2);padding:1px 5px;border-radius:3px}
.callout{border:2px dashed var(--blue);border-radius:8px;padding:18px 20px;margin:28px 0;
  background:rgba(47,111,179,.06)}
.callout p{margin:0;font-size:17px}
.callout strong:first-child{display:block;font-family:var(--hand);font-weight:700;
  font-size:18px;color:var(--blue);margin-bottom:4px}

.post-foot{max-width:680px;margin:42px auto 0;padding-top:18px;
  border-top:2px dashed var(--frame-edge);text-align:center}
.post-foot a.back{font-family:var(--hand);font-weight:700;font-size:20px}
.relnote{font-family:var(--note);font-size:15px;color:var(--muted);margin-top:10px}

/* ============================================================
   Responsive + reduced motion
   ============================================================ */
@media(max-width:640px){
  .board-frame{border-width:8px}
  .masthead{padding:30px 0 24px}
  /* stack the notes centered so the wide date sticker can't overflow */
  .corner-note{position:static;display:block;width:fit-content;max-width:100%;
    margin:5px auto 0;transform:rotate(-1.5deg)}
  .masthead .wrap{padding-top:0}  /* notes are in-flow on mobile; no clearance needed */
}
/* Phones: OpenDyslexic runs wide, so scale type + spacing down to de-crowd */
@media(max-width:520px){
  body{font-size:16.5px;line-height:1.6;letter-spacing:0;word-spacing:.02em;
    overflow-x:clip}                   /* contain decorative doodles on tiny screens */
  .board-frame{border-width:6px}
  .eyebrow{font-size:clamp(14px,3.4vw,16px)}
  .nameplate{font-size:clamp(29px,9vw,42px);margin:4px 0 24px}
  .hey-star{width:96px;height:82px}
  .motto{font-size:clamp(14px,3.2vw,16px)}
  .curious-minds{font-size:clamp(19px,4.6vw,22px);margin-top:18px}
  .filter-btn{font-size:16px;padding:6px 10px}
  .sectionbar{gap:4px 2px}
  .article{padding:22px 18px 24px}
  .article .headline{font-size:clamp(19px,4.6vw,22px)}
  .article .teaser{font-size:15px}
  .sub-card{padding:26px 18px 24px}
  .sub-eyebrow{font-size:15px}
  .sub-head{font-size:clamp(22px,5.4vw,26px)}
  .sub-sub{font-size:14.5px}
  .sub-form input{font-size:16px;min-height:46px}
  .sub-form button{font-size:16px;min-height:46px;padding:11px 16px}
  .join-link{font-size:15px}
  .join-lead{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .draw path{stroke-dashoffset:0;animation:none}
  .eyebrow,.nameplate,.motto{animation:none}
}

/* ============================================================
   Type face — OpenDyslexic + keyboard focus rings
   ============================================================ */
/* OpenDyslexic (weighted letters ease reading), served from the Fontsource CDN */
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'OpenDyslexic';font-style:italic;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-italic.woff2') format('woff2')}

/* Clear keyboard focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}