:root{
  --c-primary:#213a85;
  --c-secondary:#4db9ea;
  --c-paper:#f7f6f2;
  --c-ink:#16203a;
  --c-muted:#6b7488;
  --c-line:#e7e6e0;
  --font-head:'Urbanist',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Urbanist',sans-serif;
  background:var(--c-paper);
  color:var(--c-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
  user-select:none;
}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.h-13{height:3.25rem}
/* Custom scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cdd2dc;border-radius:8px;border:3px solid var(--c-paper)}
::-webkit-scrollbar-thumb:hover{background:#aab1bf}
/* Subtle shadow on the sticky bar once scrolled */
#topbar.scrolled{box-shadow:0 6px 20px -14px rgba(22,32,58,.5)}
/* Prose for CMS / blog bodies */
.prose-tdb h3{font-family:var(--font-head);font-weight:800;font-size:1.15rem;margin:1.6em 0 .5em;color:var(--c-ink)}
.prose-tdb p{margin:0 0 1em;line-height:1.75;color:#3a4256}
.prose-tdb a{color:var(--c-primary);text-decoration:underline}
.prose-tdb ul{margin:0 0 1em 1.2em;list-style:disc;line-height:1.8}
.prose-tdb strong{color:var(--c-ink)}
/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Hide scrollbar (horizontal tab strips, etc.) */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}

/* ───────── Hero animated background (behind the books) ───────── */
.hero-fx{position:absolute;inset:-14% -10%;z-index:0;pointer-events:none}
.hero-blob{position:absolute;border-radius:50%;filter:blur(46px);will-change:transform}
.hero-blob--1{width:240px;height:240px;top:-28px;left:-30px;opacity:.45;
  background:radial-gradient(circle at 35% 35%,#4db9ea,transparent 70%);
  animation:heroFloat1 15s ease-in-out infinite}
.hero-blob--2{width:310px;height:310px;bottom:-44px;right:-34px;opacity:.42;
  background:radial-gradient(circle at 35% 35%,#213a85,transparent 70%);
  animation:heroFloat2 19s ease-in-out infinite}
.hero-blob--3{width:200px;height:200px;top:40%;left:32%;opacity:.30;
  background:radial-gradient(circle at 35% 35%,#c0603f,transparent 72%);
  animation:heroFloat3 17s ease-in-out infinite}
.hero-dot{position:absolute;border-radius:50%;will-change:transform}
.hero-dot--1{top:6%;right:12%;width:10px;height:10px;background:var(--c-secondary);opacity:.55;animation:heroDrift 9s ease-in-out infinite}
.hero-dot--2{bottom:14%;left:4%;width:7px;height:7px;background:var(--c-primary);opacity:.4;animation:heroDrift 11s ease-in-out infinite reverse}
.hero-dot--3{top:52%;right:2%;width:6px;height:6px;background:#c0603f;opacity:.45;animation:heroDrift 13s ease-in-out infinite}
@keyframes heroFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,28px) scale(1.09)}}
@keyframes heroFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,-22px) scale(1.12)}}
@keyframes heroFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-26px) scale(1.06)}}
@keyframes heroDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-16px)}}
/* gentle float + hover lift on the book covers */
.hero-book{animation:heroBookFloat 7s ease-in-out infinite;transition:transform .3s ease}
.hero-book:nth-child(2){animation-delay:-1.2s}
.hero-book:nth-child(3){animation-delay:-2.4s}
.hero-book:nth-child(4){animation-delay:-3.1s}
.hero-book:nth-child(5){animation-delay:-1.8s}
.hero-book:nth-child(6){animation-delay:-.6s}
.hero-book:hover{transform:translateY(-6px) scale(1.03);animation-play-state:paused}
@keyframes heroBookFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){.hero-blob,.hero-dot,.hero-book{animation:none}}

/* Normalise date/time inputs site-wide so they match text inputs in height and
   alignment (WebKit/iOS otherwise gives them native sizing, centred values, and
   a slightly shorter box). The native picker still opens on tap. 2.75rem == the
   .h-11 utility used on text/select inputs. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"]{
  -webkit-appearance:none;
  appearance:none;
  min-width:0;
  max-width:100%;
  height:2.75rem;
  line-height:1.5;
  text-align:left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{ text-align:left; margin:0; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:auto; }