/* CrumbJar Hub: "Things to do instead." A night-time desk, a wall of sticky notes, a lamp left on
   (concept: Crumbjar redesign/Hub full concept.png, 29 Sep 2026). The hub is always the night scene, in either theme. */
@font-face { font-family: 'Kalam'; src: url('fonts/kalam-latin-400-normal.woff2?v=1') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url('fonts/kalam-latin-700-normal.woff2?v=1') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('fonts/caveat-latin-600-normal.woff2?v=1') format('woff2'); font-weight: 600; font-display: swap; }

:root, [data-theme="light"], [data-theme="dark"] {
  --bg: #0e1424; --surface: #161e33; --surface-2: #121a2c; --ink: #f4efe4; --muted: #b9b4a8; --line: #2a3450;
  --accent: #ffd84d; --accent-ink: #1b1a17; --accent-soft: #3a3320;
  --font-display: 'Kalam', 'Comic Sans MS', 'Segoe Print', cursive; --font-hand: 'Caveat', 'Kalam', cursive;
  --note-ink: #1d1a22; --tape: rgba(236, 230, 214, .88);
  color-scheme: dark;
}
.theme-toggle { display: none; }
a { color: var(--accent); }

/* Header: the hub's own nav. Yellow sticky-note logo at the left, links in the middle, a taped note at the right. */
.site-header { background: color-mix(in srgb, #0b1020 86%, transparent); border-bottom-color: rgba(255,255,255,.08); }
.site-header-inner { max-width: 1240px; min-height: 76px; gap: 1rem; }
.brand { gap: 1rem; margin-right: 0; }
.hub-logo { font: 700 1.75rem/1 var(--font-display); color: var(--note-ink); background: #ffd84d; padding: .5rem .85rem .35rem; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0,0,0,.35); letter-spacing: -.01em; }
.hub-tagline { font: 600 1.25rem/1 var(--font-hand); color: var(--ink); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transform: rotate(-3deg); white-space: nowrap; }
.site-nav { margin: 0 auto; gap: .5rem; }
.site-nav a { color: var(--ink); font-weight: 600; border-radius: 0; background: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { background: none; border-bottom-color: rgba(255,216,77,.5); }
.site-nav a[aria-current="page"] { background: none; color: var(--accent); border-bottom-color: var(--accent); }
.header-note { font: 600 1.2rem/1.1 var(--font-hand); color: var(--ink); border: 0; padding: 0; transform: rotate(-6deg); white-space: nowrap; }
@media (max-width: 1080px) { .hub-tagline { display: none; } }
@media (max-width: 640px) {
  .site-header-inner { min-height: 64px; }
  .hub-logo { font-size: 1.4rem; }
  .site-nav { margin: 0; justify-content: center; }
  .site-nav a { font-size: .95rem; }
}

/* The scene. The desk photo sits behind the wall of notes and shows below them. */
.hub-main { flex: 1; }
.hub-scene { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(6rem, 13vw, 11rem);
  background: #0e1424 url('img/hub-desk.webp') center bottom / cover no-repeat; }
.hub-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(9,13,26,.55), rgba(9,13,26,0) 70%), linear-gradient(rgba(9,13,26,.25), rgba(9,13,26,0) 40%); }
@media (max-width: 720px) { .hub-scene { background-image: url('img/hub-desk-tall.webp'); background-position: center bottom; } }

.hub-hero { max-width: 900px; text-align: center; position: relative; }
.hub-hero h1 { font: 700 clamp(2.6rem, 8vw, 5rem)/1 var(--font-display); margin: 0; transform: rotate(-2deg); color: #fffaf0; text-shadow: 0 3px 18px rgba(0,0,0,.5); position: relative; display: inline-block; }
.hub-spark { position: absolute; inset: -.2em -.55em; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left .1em top 30% / .42em .09em no-repeat,
    linear-gradient(var(--accent), var(--accent)) left .15em top 58% / .36em .09em no-repeat,
    linear-gradient(var(--accent), var(--accent)) right .1em top 22% / .42em .09em no-repeat,
    linear-gradient(var(--accent), var(--accent)) right .15em top 52% / .36em .09em no-repeat; opacity: .9; }
@media (max-width: 640px) { .hub-spark { display: none; } }
.hub-sub { font: 400 clamp(1.25rem, 3.4vw, 1.75rem)/1.2 var(--font-display); margin: .75rem 0 0; transform: rotate(-2deg); color: var(--ink); }

.tape { display: inline-block; font: 400 1.15rem/1.3 var(--font-display); color: var(--note-ink); background: var(--tape); padding: .55rem 1.1rem; margin: 1.25rem auto 0; transform: rotate(-1.5deg); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.tape-grey { background: rgba(214, 214, 222, .9); }
.tape-cream { display: block; width: fit-content; transform: rotate(-1deg); margin-top: 2rem; }
.tape-button { border: 0; cursor: pointer; margin: 0; transform: rotate(1.5deg); transition: transform .15s ease; }
.tape-button:hover, .tape-button:focus-visible { transform: rotate(0) scale(1.03); }

/* The wall of notes. Four across on wide screens, two on phones. */
.hub-board { max-width: 1040px; margin-top: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); text-align: center; }
@media (max-width: 860px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note { --r: -1.5deg; transform: rotate(var(--r)); transition: transform .18s ease; }
.note:nth-child(4n+2) { --r: 1deg; } .note:nth-child(4n+3) { --r: -.5deg; } .note:nth-child(4n) { --r: 1.8deg; }
.note:nth-child(n+5) { --r: .8deg; } .note:nth-child(n+5):nth-child(4n+2) { --r: -1.2deg; } .note:nth-child(n+5):nth-child(4n) { --r: -.6deg; }
.note-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; min-height: 12.5rem; padding: 1.1rem .9rem 1rem;
  background: var(--paper); color: var(--note-ink); text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.4), inset 0 -18px 30px -24px rgba(0,0,0,.25); }
.note-link::before { content: ''; position: absolute; top: -9px; left: 50%; width: 42%; height: 18px; transform: translateX(-50%) rotate(-2deg); background: rgba(255,255,255,.45); }
a.note-link { color: var(--note-ink); }
a.note-link:hover, a.note-link:focus-visible { outline: none; }
.note:has(a.note-link:hover), .note:has(a.note-link:focus-visible) { transform: rotate(0) translateY(-4px) scale(1.03); }
a.note-link:focus-visible { box-shadow: 0 0 0 4px var(--accent), 0 10px 22px rgba(0,0,0,.4); }
.note-icon { width: 2.6rem; height: 2.6rem; flex: none; }
.note-name { font: 700 1.5rem/1.05 var(--font-display); }
.note-blurb { font: 400 1rem/1.3 var(--font-display); flex: 1; }
.note-cta { font: 700 1rem/1.2 var(--font-display); margin-top: .25rem; }
.note-soon { font-weight: 400; background: rgba(29,26,34,.1); padding: .1rem .55rem; border-radius: 3px; }
.note-flag { position: absolute; top: .45rem; right: .5rem; font: 700 .65rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.is-soon .note-link { filter: saturate(.72) brightness(.9); }
.note-pink { --paper: #f7a8d2; } .note-lilac { --paper: #cdb4f5; } .note-mint { --paper: #a8ecc8; } .note-coral { --paper: #ffaa8c; }
.note-sky { --paper: #a6d4fb; } .note-violet { --paper: #d3a6f5; } .note-lemon { --paper: #fbe57d; } .note-teal { --paper: #8fe6db; }
.note-biscuit { --paper: #f2c879; } .note-sage { --paper: #bfe2a4; } .note-stone { --paper: #d8d2c4; }
@media (max-width: 520px) {
  .note-link { min-height: 11rem; padding: 1rem .6rem .85rem; }
  .note-name { font-size: 1.25rem; } .note-blurb, .note-cta { font-size: .92rem; } .note-icon { width: 2.1rem; height: 2.1rem; }
}

.hub-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.hub-family { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; }
.hub-family p { margin: 0; color: var(--muted); font-size: .95rem; }
/* Family view / Leave family view: a 44px touch target (measured 28px at 390px with touch, 5 Oct 2026 evening audit). */
.hub-actions .linklike { color: var(--ink); background: rgba(11,16,32,.7); padding: .2rem .7rem; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.hub-family p { background: rgba(11,16,32,.7); padding: .2rem .6rem; border-radius: 4px; }

/* Side notes pinned to the wall on wide screens only. */
.hub-props { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.prop { position: absolute; margin: 0; width: 8.5rem; padding: .9rem .8rem; font: 400 1.3rem/1.15 var(--font-display); color: #2b2418; background: #d9bf8c; box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.prop-left { left: max(1rem, calc(50% - 700px)); top: 12rem; transform: rotate(-4deg); text-transform: uppercase; font-size: 1.15rem; }
.prop-right { right: max(1rem, calc(50% - 700px)); top: 26rem; transform: rotate(5deg); background: #efe7d6; }
@media (max-width: 1320px) { .hub-props { display: none; } }

/* The strip under the desk. */
.hub-strip { background: #0b1020; border-top: 1px solid rgba(255,255,255,.06); }
.hub-strip-inner { max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 1rem 2rem; padding-block: 1.5rem; }
.strip-item { display: flex; align-items: center; gap: .75rem; margin: 0; font: 400 1.05rem/1.3 var(--font-display); color: var(--ink); }
.strip-item svg { width: 2rem; height: 2rem; flex: none; }
.strip-note { margin: 0; font: 400 1.1rem/1.25 var(--font-display); color: var(--note-ink); background: #ffd84d; padding: .75rem 1rem; transform: rotate(-3deg); max-width: 15rem; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
@media (max-width: 900px) { .hub-strip-inner { grid-template-columns: 1fr; justify-items: start; } .strip-note { justify-self: center; } }

/* Kit footer, dressed for the night. */
.site-footer { background: #0b1020; border-top-color: rgba(255,255,255,.06); }
.footer-nav a { color: var(--muted); }
/* 7 Oct 2026: "About" and "Terms" measured 43px and 41px wide at 390px; every short link is now at least 44px wide. */
.footer-nav a, .site-nav a, .cj-footer a { min-width: 44px; justify-content: center; }

/* Other hub pages (About, Privacy, ...): the same night palette, readable body text. */
body:not(.hub-home) main h1 { font-family: var(--font-display); }

/* Q-35: About, "What's in the jar" */
.jar-list dt { font-weight: 700; margin-top: 1rem; }
.jar-list dd { margin: .25rem 0 0; }
.jar-list dd ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.jar-list dd li { margin: .2rem 0; }
/* Every link in the list is a 44px touch target: they measured 22px tall at 390px with touch (5 Oct 2026 evening audit). */
.jar-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }