/* assets/style.css */
:root{
  --bg0: #fff7ec;
  --bg1: #f4f0ff;
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.9);
  --ink: #1b1f3a;
  --ink2:#2b2f55;
  --muted:#5d6285;
  --brand:#6b3df0;
  --brand2:#ff7aa2;
  --good:#1d8f6a;

  --shadow: 0 12px 40px rgba(18, 18, 34, .12);
  --radius: 24px;

  /* font sizes: vh/vw only (labi mērojas arī uz 30'' ekrāna) */
  --fs-hero: calc(3.6vh + 2.6vw);
  --fs-h1:   calc(2.6vh + 1.7vw);
  --fs-h2:   calc(2.0vh + 1.1vw);
  --fs-body: calc(1.35vh + 0.70vw);
  --fs-small:calc(1.10vh + 0.40vw);
  --fs-tiny: calc(0.95vh + 0.28vw);

  --pad: clamp(14px, 2.1vw, 34px);
  --wrap: 2200px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255, 176, 214,.35), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(107, 61, 240,.22), transparent 55%),
    linear-gradient(145deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Papildu “pasaku” tekstūra (lai uz lieliem ekrāniem neizskatās tukši) */
body::before{
  content:"";
  position: fixed;
  inset: -40px;
  pointer-events:none;
  opacity: .18;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(25deg, rgba(27,31,58,.06) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 42%, rgba(255,255,255,.45) 0 2px, transparent 3px);
}

a{ color:inherit; text-decoration:none; }
code{ font-size: .95em; padding:.12em .35em; border-radius:10px; background: rgba(0,0,0,.06); }

.wrap{
  width: min(calc(100% - 2*var(--pad)), var(--wrap), 94vw);
  margin-inline:auto;
}

.bg-sparkles{
  position:fixed;
  inset:-60px;
  pointer-events:none;
  opacity:.45;
  filter: blur(.2px);
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.7) 0 1px, transparent 3px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.7) 0 1px, transparent 3px),
    radial-gradient(circle at 90% 55%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 85%, rgba(255,255,255,.6) 0 1px, transparent 3px);
  animation: drift 18s linear infinite;
}
@keyframes drift{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(-18px, 12px,0) rotate(2deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .bg-sparkles{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(27,31,58,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--pad);
  padding: calc(var(--pad) * .55) 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: .65rem;
  font-weight: 800;
  letter-spacing:.3px;
}
.brand-mark{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.0) 60%),
    linear-gradient(135deg, rgba(107,61,240,.35), rgba(255,122,162,.35));
  box-shadow: 0 10px 24px rgba(107,61,240,.18);
  animation: twinkle 5s ease-in-out infinite;
}
.brand-text{ font-size: var(--fs-h2); }
@keyframes twinkle{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

.top-nav{
  display:flex;
  flex-wrap:wrap;
  gap: .55rem;
  justify-content:flex-end;
}
.nav-pill{
  font-size: var(--fs-small);
  padding: .55em .85em;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(27,31,58,.10);
  box-shadow: 0 8px 20px rgba(18,18,34,.07);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 28px rgba(18,18,34,.10);
}

/* Sections */
.site-main{ padding-bottom: calc(var(--pad) * 2.2); }

/* =====================
   HOME (galvenā lapa)
   ===================== */
.home-hero{ padding: calc(var(--pad) * 1.1) 0 calc(var(--pad) * 1.2); }
.home-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: calc(var(--pad) * 1.05);
  align-items: center;
  min-height: calc(100svh - 92px);
}
.home-title{
  font-size: var(--fs-hero);
  line-height: 1.02;
  margin: 0 0 .25em 0;
  letter-spacing: .2px;
}
.home-sub{
  font-size: var(--fs-body);
  margin: 0 0 .95em 0;
  color: var(--ink2);
  max-width: 52ch;
}

.panel{ position:relative; }
.panel-info{
  background: rgba(255, 248, 230, .78);
  border-color: rgba(27,31,58,.12);
}
.panel-latest{
  background: rgba(255,255,255,.80);
}
.panel-kicker{
  font-size: var(--fs-small);
  font-weight: 850;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(27,31,58,.78);
  margin-bottom: .55em;
}
.panel-body{ font-size: var(--fs-body); color: rgba(27,31,58,.86); }

.latest-row{ display:flex; flex-direction:column; gap: .25em; margin-bottom: .4em; }
.latest-title{
  display:flex;
  align-items:center;
  gap: .55rem;
  font-size: var(--fs-h2);
  font-weight: 900;
}
.chip{
  display:inline-grid;
  place-items:center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 999px;
  background: rgba(107,61,240,.12);
  border: 1px solid rgba(27,31,58,.10);
}
.latest-meta{ font-size: var(--fs-small); color: rgba(27,31,58,.62); }
.latest-excerpt{ font-size: var(--fs-body); color: rgba(27,31,58,.90); margin: .6em 0 .8em; }
.link-cta{
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--brand);
  padding: .35em .5em;
  border-radius: 14px;
  background: rgba(107,61,240,.10);
  border: 1px solid rgba(107,61,240,.18);
  display:inline-block;
  transition: transform .18s ease, background .18s ease;
}
.link-cta:hover{ transform: translateY(-1px); background: rgba(107,61,240,.14); }

.right-head{ margin-bottom: calc(var(--pad) * .55); }
.right-title{ font-size: var(--fs-h1); margin: 0 0 .15em 0; line-height: 1.04; }
.right-sub{ font-size: var(--fs-body); margin: 0; color: rgba(27,31,58,.68); }

.doors{ display:flex; flex-direction:column; gap: calc(var(--pad) * .55); }
.door{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: calc(var(--pad) * .85) calc(var(--pad) * 1.05);
  border-radius: 999px;
  background:
    radial-gradient(120% 160% at 20% 10%, rgba(255,255,255,.92), rgba(255,255,255,.62) 55%, rgba(255,255,255,.55)),
    linear-gradient(135deg, rgba(255, 220, 150,.55), rgba(130, 210, 255,.25));
  border: 1px solid rgba(27,31,58,.12);
  box-shadow: 0 18px 52px rgba(18,18,34,.14);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.door:hover{ transform: translateY(-2px); box-shadow: 0 24px 64px rgba(18,18,34,.18); }
.door-icon{ font-size: calc(var(--fs-h2) * 1.05); }
.door-label{ font-size: var(--fs-h2); font-weight: 900; letter-spacing: .3px; }
.door-arrow{ font-size: var(--fs-h2); opacity: .75; }

.micro-hint{
  margin-top: calc(var(--pad) * .75);
  display:flex;
  gap: .6rem;
  align-items:flex-start;
  padding: calc(var(--pad) * .65);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  border: 1px dashed rgba(27,31,58,.18);
  font-size: var(--fs-small);
  color: rgba(27,31,58,.72);
}

/* “Lauki” ar pastāvīgu tekstu */
.bubbles{ padding: calc(var(--pad) * 1.1) 0 calc(var(--pad) * 1.5); }
.bubbles-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--pad); flex-wrap:wrap; }
.bubbles-title{ font-size: var(--fs-h1); margin: 0; }
.bubbles-sub{ font-size: var(--fs-body); margin: 0; color: rgba(27,31,58,.68); max-width: 64ch; }

.bubbles-grid{
  margin-top: calc(var(--pad) * .9);
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--pad) * .7);
  align-items:stretch;
}

.bubble{
  grid-column: span var(--cspan, 4);
  grid-row: span var(--rspan, 1);
  padding: calc(var(--pad) * .85);
  border-radius: var(--r1, 26px) var(--r2, 26px) var(--r3, 26px) var(--r4, 26px);
  border: 1px solid rgba(27,31,58,.12);
  box-shadow: 0 16px 48px rgba(18,18,34,.12);
  transform: rotate(var(--rot, 0deg));
  position:relative;
  overflow:hidden;
}

.bubble::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0) 60%);
  transform: rotate(18deg) translateX(-22%);
  opacity: .0;
}
.bubble:hover::after{ opacity: 1; animation: shimmer 1.2s ease-in-out; }

.bubble-title{ font-size: var(--fs-h2); font-weight: 900; margin-bottom: .35em; }
.bubble-text{ font-size: var(--fs-body); color: rgba(27,31,58,.88); }

.bubble[data-tone="sun"]{ background: linear-gradient(135deg, rgba(255, 240, 180,.78), rgba(255,255,255,.72)); }
.bubble[data-tone="mint"]{ background: linear-gradient(135deg, rgba(170, 245, 220,.72), rgba(255,255,255,.74)); }
.bubble[data-tone="lilac"]{ background: linear-gradient(135deg, rgba(210, 195, 255,.72), rgba(255,255,255,.74)); }
.bubble[data-tone="peach"]{ background: linear-gradient(135deg, rgba(255, 210, 195,.72), rgba(255,255,255,.74)); }
.bubble[data-tone="sky"]{ background: linear-gradient(135deg, rgba(170, 220, 255,.72), rgba(255,255,255,.74)); }

.hero{ padding: calc(var(--pad) * 1.2) 0 calc(var(--pad) * 1.4); }
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--pad);
  align-items:start;
}
.hero-title{
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin: 0 0 .35em 0;
  letter-spacing: .2px;
}
.hero-lead{
  font-size: var(--fs-body);
  margin: 0 0 1.0em 0;
  color: var(--muted);
  max-width: 56ch;
}

/* =========================
   HOME (jaunā galvenā lapa)
   ========================= */

.home-hero{
  padding: calc(var(--pad) * 1.0) 0 calc(var(--pad) * 1.2);
}

.home-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: calc(var(--pad) * 1.0);
  align-items: center;
  min-height: calc(100svh - 84px);
}

.home-title{
  font-size: var(--fs-hero);
  line-height: 0.98;
  margin: 0 0 .35em 0;
  letter-spacing: .5px;
}

.home-sub{
  font-size: var(--fs-body);
  margin: 0 0 1.0em 0;
  color: var(--muted);
  max-width: 62ch;
}

.panel{
  padding: calc(var(--pad) * .95);
}

.panel-kicker{
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: .55em;
}

.panel-info{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
}

.panel-body{
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

.panel-latest{
  margin-top: calc(var(--pad) * .75);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255,255,255,.95), rgba(255,255,255,.78)),
    linear-gradient(135deg, rgba(107,61,240,.08), rgba(255,122,162,.08));
}

.latest-row{
  display:flex;
  flex-direction:column;
  gap: .35em;
  margin-bottom: .65em;
}

.latest-title{
  display:flex;
  align-items:center;
  gap: .55em;
  font-size: var(--fs-h2);
  font-weight: 950;
}

.chip{
  display:inline-grid;
  place-items:center;
  width: 3.1em;
  height: 2.1em;
  border-radius: 999px;
  background: rgba(107,61,240,.12);
  border: 1px solid rgba(107,61,240,.20);
}

.latest-meta{
  font-size: var(--fs-tiny);
  color: var(--muted);
}

.latest-excerpt{
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0 0 .75em 0;
  color: var(--ink2);
}

.link-cta{
  display:inline-block;
  font-size: var(--fs-small);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .18em;
}

.home-right{
  display:flex;
  flex-direction:column;
  gap: calc(var(--pad) * .8);
}

.right-title{
  font-size: var(--fs-h1);
  margin: 0;
}

.right-sub{
  font-size: var(--fs-small);
  margin: .25em 0 0 0;
  color: var(--muted);
  max-width: 48ch;
}

.doors{
  display:flex;
  flex-direction:column;
  gap: calc(var(--pad) * .55);
}

.door{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75em;
  padding: .95em 1.1em;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)),
    linear-gradient(135deg, rgba(255,214,111,.24), rgba(123,232,255,.18));
  border: 1px solid rgba(27,31,58,.14);
  box-shadow: 0 16px 44px rgba(18,18,34,.10);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.door::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 18% 25%, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0) 62%);
  transform: rotate(18deg) translateX(-22%);
  opacity:.0;
  transition: opacity .18s ease;
}

.door:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 62px rgba(18,18,34,.14);
}

.door:hover::before{
  opacity:1;
  animation: shimmer 1.2s ease-in-out;
}

.door-icon{
  font-size: calc(var(--fs-h2) * 1.05);
  line-height:1;
}

.door-label{
  flex: 1;
  font-size: var(--fs-h2);
  font-weight: 950;
  letter-spacing:.35px;
}

.door-arrow{
  font-size: calc(var(--fs-h2) * 1.05);
  opacity: .85;
}

.micro-hint{
  display:flex;
  gap: .65em;
  align-items:flex-start;
  padding: calc(var(--pad) * .75);
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(27,31,58,.18);
  font-size: var(--fs-small);
  color: var(--muted);
}

.micro-hint strong{ color: var(--ink); }

.cats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--pad) * .65);
}

.cat-btn{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: .35em;
  padding: calc(var(--pad) * .85);
  border-radius: var(--radius);
  background:
    radial-gradient(110% 160% at 10% 0%, rgba(255,255,255,.95), rgba(255,255,255,.65) 55%, rgba(255,255,255,.50)),
    linear-gradient(135deg, rgba(107,61,240,.10), rgba(255,122,162,.10));
  border: 1px solid rgba(27,31,58,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cat-btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0) 60%);
  transform: rotate(20deg) translateX(-18%);
  opacity:.0;
  transition: opacity .18s ease;
}
.cat-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(18,18,34,.14);
}
.cat-btn:hover::after{
  opacity:1;
  animation: shimmer 1.2s ease-in-out;
}
@keyframes shimmer{
  0%{ transform: rotate(20deg) translateX(-24%); }
  100%{ transform: rotate(20deg) translateX(24%); }
}

/* HOME responsīvais pārkārtojums */
@media (max-width: 980px){
  .home-grid{ grid-template-columns: 1fr; min-height: unset; }
  .doors .door{ border-radius: var(--radius); }
  .bubbles-grid{ grid-template-columns: 1fr; }
  .bubble{ grid-column: span 12; transform: none; }
}

@media (min-width: 1600px){
  :root{
    --pad: clamp(18px, 2.0vw, 44px);
    --fs-hero: calc(3.8vh + 2.9vw);
    --fs-body: calc(1.42vh + 0.74vw);
  }
  .home-grid{ gap: calc(var(--pad) * 1.15); }
  .doors .door{ padding: calc(var(--pad) * .95) calc(var(--pad) * 1.2); }
}

.cat-emoji{
  font-size: calc(var(--fs-h1) * 1.05);
  line-height:1;
}
.cat-name{
  font-size: var(--fs-h2);
  font-weight: 800;
}
.cat-sub{
  font-size: var(--fs-small);
  color: var(--muted);
}

.hero-right{
  display:flex;
  flex-direction:column;
  gap: calc(var(--pad) * .75);
}

.card{
  background: var(--card);
  border: 1px solid rgba(27,31,58,.10);
  border-radius: var(--radius);
  padding: calc(var(--pad) * .95);
  box-shadow: var(--shadow);
}
.card-head{
  display:flex;
  justify-content:space-between;
  gap: .75rem;
  align-items:center;
  margin-bottom: .5rem;
}
.badge{
  font-size: var(--fs-small);
  font-weight: 750;
  padding: .35em .7em;
  border-radius: 999px;
  background: rgba(107,61,240,.10);
  border: 1px solid rgba(107,61,240,.18);
}
.tiny{ font-size: var(--fs-tiny); color: var(--muted); }
.card-title{
  font-size: var(--fs-h2);
  margin: .25em 0 .45em 0;
}
.card-text{
  font-size: var(--fs-body);
  color: var(--ink2);
  margin: 0 0 .9em 0;
  line-height: 1.45;
}

.hint{
  display:flex;
  gap: .75rem;
  align-items:flex-start;
  padding: calc(var(--pad) * .85);
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(27,31,58,.18);
}
.hint-icon{
  font-size: calc(var(--fs-h2) * 1.1);
  line-height:1;
}
.hint-text{
  font-size: var(--fs-small);
  color: var(--muted);
}
.hint-text strong{ color: var(--ink); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .75em 1.05em;
  border-radius: 999px;
  border: 1px solid rgba(27,31,58,.14);
  background: linear-gradient(135deg, rgba(107,61,240,.85), rgba(255,122,162,.85));
  color: white;
  font-weight: 800;
  font-size: var(--fs-small);
  box-shadow: 0 12px 32px rgba(107,61,240,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(107,61,240,.26);
  filter: saturate(1.05);
}
.btn.ghost{
  background: rgba(255,255,255,.7);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(18,18,34,.08);
}

.write{
  padding: calc(var(--pad) * 1.25) 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--pad);
  margin-bottom: calc(var(--pad) * .8);
}
.section-title{
  font-size: var(--fs-h1);
  margin:0;
}
.section-lead{
  font-size: var(--fs-small);
  margin:0;
  color: var(--muted);
  max-width: 58ch;
}

.notes{
  display:flex;
  flex-wrap:wrap;
  gap: calc(var(--pad) * .7);
  align-items:flex-start;
}

.note{
  --rot: 0deg;
  width: 40vw;
  min-width: min(520px, 100%);
  max-width: 100%;
  min-height: 16vh;
  border-radius: 20px;
  padding: calc(var(--pad) * .75);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255,255,255,.95), rgba(255,255,255,.75)),
    linear-gradient(135deg, rgba(255,122,162,.10), rgba(107,61,240,.10));
  border: 1px solid rgba(27,31,58,.10);
  box-shadow: 0 14px 44px rgba(18,18,34,.10);
  transform: rotate(var(--rot));
  transition: transform .18s ease, box-shadow .18s ease;
}
.note:hover{
  transform: rotate(var(--rot)) translateY(-2px);
  box-shadow: 0 18px 54px rgba(18,18,34,.14);
}
.note-title{
  display:block;
  font-size: var(--fs-small);
  font-weight: 800;
  margin-bottom: .45em;
  color: var(--ink);
}
.note-area{
  width:100%;
  min-height: 10vh;
  height: 100%;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(27,31,58,.14);
  background: rgba(255,255,255,.86);
  padding: .75em .85em;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  outline:none;
}
.note-area:focus{
  border-color: rgba(107,61,240,.55);
  box-shadow: 0 0 0 4px rgba(107,61,240,.18);
}

/* random size classes (assigned by JS) */
.note.sz-s{ width: 32vw; min-height: 12vh; }
.note.sz-m{ width: 42vw; min-height: 16vh; }
.note.sz-l{ width: 50vw; min-height: 22vh; }
.note.sz-wide{ width: 56vw; min-height: 14vh; }
.note.sz-tall{ width: 36vw; min-height: 26vh; }

.page{ padding: calc(var(--pad) * 1.1) 0; }
.page-head{ margin-bottom: calc(var(--pad) * .9); }
.page-title{
  font-size: var(--fs-h1);
  margin: .25em 0 .25em 0;
}
.page-lead{
  font-size: var(--fs-body);
  color: var(--muted);
  margin: 0;
}
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap: .45rem;
  align-items:center;
  font-size: var(--fs-small);
  color: var(--muted);
}
.crumb{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.crumb.current{ text-decoration:none; color: var(--ink); font-weight: 800; }
.crumb-sep{ opacity:.65; }

.list{
  display:grid;
  gap: calc(var(--pad) * .7);
}

.story-row{
  background: var(--card2);
  border: 1px solid rgba(27,31,58,.10);
  border-radius: var(--radius);
  padding: calc(var(--pad) * .95);
  box-shadow: 0 12px 36px rgba(18,18,34,.09);
}
.story-title{
  display:inline-block;
  font-size: var(--fs-h2);
  font-weight: 900;
  letter-spacing:.2px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .18em;
  transition: transform .18s ease;
}
.story-title:hover{ transform: translateY(-1px); }

.story-meta{
  display:flex;
  flex-wrap:wrap;
  gap: .45rem;
  align-items:center;
  margin-top: .55em;
  font-size: var(--fs-small);
  color: var(--muted);
}
.story-meta.big{ font-size: var(--fs-body); margin-top: .75em; }
.meta-pill{
  padding: .25em .6em;
  border-radius: 999px;
  background: rgba(29,143,106,.10);
  border: 1px solid rgba(29,143,106,.18);
  color: var(--good);
  font-weight: 800;
}
.meta-dot{ opacity:.6; }
.story-anno{
  font-size: var(--fs-body);
  margin: .7em 0 0 0;
  color: var(--ink2);
  line-height: 1.5;
}

.story-full{
  background: var(--card2);
  border: 1px solid rgba(27,31,58,.10);
  border-radius: var(--radius);
  padding: calc(var(--pad) * 1.1);
  box-shadow: 0 14px 44px rgba(18,18,34,.10);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
}
.story-full p{ margin: 0 0 1em 0; }
.story-full p:last-child{ margin-bottom:0; }

.nav-bottom{
  display:flex;
  gap: .75rem;
  margin-top: calc(var(--pad) * .9);
  flex-wrap:wrap;
}

.spacer{ height: calc(var(--pad) * 1.0); }

/* Footer */
.site-footer{
  border-top: 1px solid rgba(27,31,58,.08);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--pad);
  padding: calc(var(--pad) * .8) 0;
  color: var(--muted);
  font-size: var(--fs-small);
}
.footer-left{
  display:flex;
  align-items:center;
  gap: .6rem;
}
.footer-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(107,61,240,.8), rgba(255,122,162,.8));
  box-shadow: 0 0 0 6px rgba(107,61,240,.12);
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cats-grid{ grid-template-columns: 1fr; }
  .top-nav{ justify-content:flex-start; }
  .note{ width: 100%; min-width: 0; }
  .note.sz-s, .note.sz-m, .note.sz-l, .note.sz-wide, .note.sz-tall { width: 100%; }
}