/* ==========================================================================
   pynk — soft dark theme
   Warm plum darks, pastel pink navigation with a cloud edge, generous
   rounding. Built to feel like a cosy place to read rather than a product.
   ========================================================================== */

:root {
  /* Warm plum darks — softer and friendlier than a neutral black. */
  --bg: #1f1f1f;
  --bg-deep: #1c1c1c;
  --bg-soft: #292929;
  --surface: #313131;
  --surface-2: #3b3b3b;
  --surface-3: #454545;

  --line: #434343;
  --line-soft: #363636;

  --text: #f4f4f4;
  --text-dim: #c1c1c1;
  --text-faint: #999999;

  /* Pastel pink family */
  --pink: #ffb6d9;
  --pink-soft: #ffd3e8;
  --pink-deep: #ec9cc2;
  --pink-ink: #4a2135;
  --pink-glow: rgba(255, 182, 217, 0.18);
  --pink-line: rgba(255, 182, 217, 0.3);

  /* Flat pink for the navigation surfaces: header, admin sidebar, footer.
     --nav-edge is what the scalloped edges are painted in. It tracks --nav
     by default; set it on its own when a header background image means the
     bar and its scallops no longer share one colour. */
  --nav: #ffbcdc;
  --nav-edge: var(--nav);

  /* Kept for small accents — buttons, active chips, tabs — which still
     carry a gentle gradient. */
  --nav-top: #ffcbe4;
  --nav-bot: #ffb1d6;

  /* Alternating full-width cloud bands */
  --band: #2f2f2f;

  /* Supporting pastels */
  --peach: #ffc9a6;
  --mint: #a7e3cb;
  --lilac: #c9b4f4;
  --butter: #ffe0a3;

  /* Nothing here is sharp. */
  --radius: 24px;
  --radius-sm: 16px;
  --radius-lg: 32px;
  --pill: 999px;

  --shadow-soft: 0 10px 34px rgba(10, 10, 10, 0.4);
  --shadow-lift: 0 16px 44px rgba(10, 10, 10, 0.5);
  --shadow-pink: 0 10px 30px rgba(255, 182, 217, 0.16);

  --shell: 1120px;
  --shell-narrow: 740px;

  --font: 'Nunito', ui-rounded, 'Segoe UI Variable', system-ui, -apple-system,
    'Segoe UI', sans-serif;
  --display: 'Baloo 2', 'Nunito', ui-rounded, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.34, 1.3, 0.44, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 450;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--pink);
  text-decoration: none;
  transition: color 0.18s var(--ease-soft);
}

a:hover { color: var(--pink-soft); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.22;
}

p { margin: 0 0 1em; }

::selection { background: var(--pink-line); color: #fff; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 1;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

main { flex: 1; }

.section { padding: 60px 0; }
.section-tight { padding: 38px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.section-head h2 {
  position: relative;
  font-size: 1.6rem;
  padding-left: 16px;
}

.section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  background: var(--pink);
}


.eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 18px;
}

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Scalloped hem
   Shared by every raised surface. Two bump sizes tile into one continuous
   cloud edge, painted in the surface's own colour (--hem) so a hover or a
   band background carries the hem with it.
   -------------------------------------------------------------------------- */

.feature::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 21px 0, var(--hem) 21px, transparent 21.5px),
    radial-gradient(circle at 14px 0, var(--hem) 14px, transparent 14.5px);
  background-size: 70px 22px, 70px 15px;
  background-position: 0 0, 42px 0;
  background-repeat: repeat-x, repeat-x;
}

/* Sections meet on the page background now. The scalloped edge is reserved
   for the header, the footer and the one featured guide, so it reads as the
   pynk mark rather than a section-separator component. */
.band { padding: 46px 0; }

.band + .band { padding-top: 0; }

/* --------------------------------------------------------------------------
   Header — pink, sticky, cloud-edged
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Flat, so a background image can be dropped in here cleanly. */
  background: var(--nav);
  color: var(--pink-ink);
  box-shadow: 0 6px 26px rgba(74, 33, 53, 0.3);
}

/* The bumpy underside. Two bump sizes tile together into one continuous,
   cloud-like edge, painted in --nav-edge. */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 21px 0, var(--nav-edge) 21px, transparent 21.5px),
    radial-gradient(circle at 14px 0, var(--nav-edge) 14px, transparent 14.5px);
  background-size: 70px 22px, 70px 15px;
  background-position: 0 0, 42px 0;
  background-repeat: repeat-x, repeat-x;
  /* No drop-shadow here. A filter on this pseudo-element paints its blur
     upward over the bar, darkening the bar's bottom edge away from the
     bubbles' colour. The header's own box-shadow shows through the gaps
     between the bumps and gives the same depth. */
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--pink-ink);
}

.brand:hover { color: var(--pink-ink); }

/* A little cluster of bubbles instead of a logo. */
.brand-dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink-ink);
  flex-shrink: 0;
}

.brand-dot::before,
.brand-dot::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--pink-ink);
}

.brand-dot::before { width: 10px; height: 10px; top: -6px; right: -5px; opacity: 0.75; }
.brand-dot::after { width: 6px; height: 6px; bottom: -3px; right: -7px; opacity: 0.5; }

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav a {
  padding: 9px 18px;
  border-radius: var(--pill);
  color: var(--pink-ink);
  font-size: 0.97rem;
  font-weight: 700;
  opacity: 0.72;
  transition: all 0.2s var(--ease-soft);
}

.nav a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.45);
  color: var(--pink-ink);
}

.nav a.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 3px 10px rgba(74, 33, 53, 0.14);
}

.nav .nav-cta {
  background: var(--pink-ink);
  color: var(--nav-top);
  opacity: 1;
  box-shadow: 0 4px 14px rgba(74, 33, 53, 0.28);
}

.nav .nav-cta:hover {
  background: #5d2a43;
  color: #fff;
  transform: translateY(-1px);
}

/* Content has to clear the cloud edge. */
.page > main { padding-top: 26px; }

/* --------------------------------------------------------------------------
   Buttons — all pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border: none;
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
  white-space: nowrap;
}

.btn:hover {
  background: var(--surface-3);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(170deg, var(--nav-top), var(--nav-bot));
  color: var(--pink-ink);
  box-shadow: var(--shadow-pink);
}

.btn-primary:hover {
  background: linear-gradient(170deg, #ffd9ea, var(--pink));
  color: var(--pink-ink);
  box-shadow: 0 14px 34px rgba(255, 182, 217, 0.26);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.btn-outline {
  background: var(--pink-glow);
  color: var(--pink);
}

.btn-outline:hover { background: rgba(255, 182, 217, 0.28); color: var(--pink-soft); }

.btn-danger {
  background: rgba(255, 158, 158, 0.15);
  color: #ffa5a5;
}

.btn-danger:hover { background: rgba(255, 158, 158, 0.26); color: #ffbdbd; }

.btn-sm { padding: 7px 15px; font-size: 0.85rem; }
.btn-lg { padding: 14px 30px; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 20px; }

.label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.hint {
  font-size: 0.81rem;
  color: var(--text-faint);
  margin-top: 7px;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 13px 18px;
  background: var(--bg-soft);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.96rem;
  transition: all 0.2s var(--ease-soft);
}

.input { border-radius: var(--pill); }

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--pink-line);
}

.textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.75;
}

.select {
  appearance: none;
  border-radius: var(--pill);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23c1c1c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

/* --------------------------------------------------------------------------
   Search — a squared field with a pink edge rather than a capsule
   -------------------------------------------------------------------------- */

.search { position: relative; display: flex; align-items: center; }

.search .input {
  padding-left: 18px;
  border-radius: 0;
  border-left: 3px solid var(--pink);
  background: var(--bg-soft);
}

.search .input:focus {
  border-left-color: var(--pink-soft);
  box-shadow: 0 0 0 3px var(--pink-line);
}

.search-big .input {
  padding: 16px 20px 16px 22px;
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   Badges & tags
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border-radius: var(--pill);
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-dim);
}

.badge-pink {
  background: var(--pink-glow);
  color: var(--pink);
}

.badge-draft {
  background: rgba(255, 224, 163, 0.13);
  color: var(--butter);
}

.badge-live {
  background: rgba(167, 227, 203, 0.13);
  color: var(--mint);
}

.tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  transition: all 0.18s var(--ease-soft);
}

a.tag:hover {
  background: var(--pink-glow);
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 66px 0 34px;
}

/* Content sits on the same left edge as everything below it; the right
   column carries the maintenance log rather than decoration. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 60px;
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1.06;
  margin-bottom: 22px;
  max-width: 16ch;
}

/* text-decoration anchors to the baseline; a pseudo-element cannot, because
   Baloo 2's tall vertical metrics push it far below the text. */
.hero h1 em {
  font-style: normal;
  color: var(--pink);
  text-decoration: underline wavy var(--pink-deep);
  text-decoration-thickness: 3px;
  text-underline-offset: 9px;
}

.hero p {
  max-width: 48ch;
  margin: 0 0 30px;
  font-size: 1.1rem;
  color: var(--text-dim);
}

.hero-search { max-width: 430px; margin: 0 0 20px; }

/* Plain facts on the page, not a capsule. */
.hero-facts {
  font-size: 0.92rem;
  color: var(--text-faint);
}

.hero-facts b { color: var(--text-dim); font-weight: 800; }
.hero-facts i { color: var(--pink-deep); font-style: normal; margin: 0 9px; }

/* The maintenance log — the site's actual claim, evidenced. */
.hero-log {
  padding-left: 20px;
  border-left: 2px solid var(--pink-line);
}

.hero-log h2 {
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.hero-log ul { list-style: none; margin: 0; padding: 0; }

.hero-log li { margin-bottom: 15px; line-height: 1.45; }

.hero-log a {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-dim);
}

.hero-log a:hover { color: var(--pink); }

.hero-log time {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  --hem: var(--surface);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  margin-bottom: 22px; /* room for the scalloped hem below */
  background: var(--hem);
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  /* drop-shadow follows the scalloped hem; box-shadow would cut straight. */
  filter: drop-shadow(0 10px 24px rgba(10, 10, 10, 0.45));
  transition: transform 0.28s var(--ease-soft), filter 0.28s var(--ease-soft),
    background 0.28s var(--ease-soft);
}

a.card:hover {
  --hem: var(--surface-2);
  transform: translateY(-5px);
  filter: drop-shadow(0 18px 32px rgba(10, 10, 10, 0.55));
  color: var(--text);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.card h3 {
  font-size: 1.22rem;
  margin-bottom: 9px;
}

.card p {
  font-size: 0.94rem;
  color: var(--text-dim);
  margin: 0;
  flex: 1;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line-soft);
  font-size: 0.82rem;
  color: var(--text-faint);
  font-weight: 600;
}

.dot-sep::before { content: "•"; margin: 0 1px; opacity: 0.6; }

/* --------------------------------------------------------------------------
   Start here — one dominant guide, two that recede
   -------------------------------------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 38px;
  align-items: start;
}

/* The one place on the page that still gets the scalloped hem. */
.feature {
  --hem: var(--surface);
  position: relative;
  display: block;
  padding: 36px 38px 32px;
  margin-bottom: 22px;
  background: var(--hem);
  border-radius: var(--radius) var(--radius) 0 0;
  filter: drop-shadow(0 14px 30px rgba(10, 10, 10, 0.5));
  transition: background 0.28s var(--ease-soft), filter 0.28s var(--ease-soft);
}

.feature:hover {
  --hem: var(--surface-2);
  color: var(--text);
  filter: drop-shadow(0 20px 38px rgba(10, 10, 10, 0.58));
}

/* Oversized index numeral, sunk into the surface behind the text. */
.feature-num {
  position: absolute;
  top: 2px;
  right: 26px;
  font-family: var(--display);
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--surface-2);
  pointer-events: none;
  user-select: none;
}

.feature:hover .feature-num { color: var(--surface-3); }

.feature-kicker,
.card-kicker {
  position: relative;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.feature h3 {
  position: relative;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.12;
  margin: 12px 0 14px;
  max-width: 15ch;
}

.feature p {
  position: relative;
  font-size: 1rem;
  color: var(--text-dim);
  max-width: 42ch;
  margin-bottom: 20px;
}

.feature-more {
  position: relative;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--pink);
}

/* The two that recede: no box, no fill, just type on the page. */
.stack { display: flex; flex-direction: column; }

.stack-item {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}

.stack-item:first-child { padding-top: 0; }
.stack-item:last-child { border-bottom: none; }

.stack-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--pink-deep);
}

.stack-item h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  margin: 8px 0 7px;
  color: var(--text);
}

.stack-item:hover h3 { color: var(--pink); }

.stack-item p {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0 0 9px;
}

.stack-meta { font-size: 0.81rem; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Plain lists — recently updated, and a numbered most-read
   -------------------------------------------------------------------------- */

.list-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-soft);
}

.list-item:last-child { border-bottom: none; }
.list-main { flex: 1; min-width: 0; }

.list-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

a.list-item:hover .list-title { color: var(--pink); }

.list-sub { font-size: 0.83rem; color: var(--text-faint); }

.list-age {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pink-deep);
}

.readlist-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
}

.readlist-num {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pink-deep);
  min-width: 2.1ch;
}

a.readlist-item:hover .readlist-num { color: var(--pink); }
a.readlist-item:hover .list-title { color: var(--pink); }

/* --------------------------------------------------------------------------
   Topics — typography, not capsules
   -------------------------------------------------------------------------- */

.topics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 2;
}

.topics a { color: var(--text-dim); }
.topics a:hover { color: var(--pink); }

.topics sup {
  font-size: 0.62em;
  font-weight: 800;
  color: var(--pink-deep);
  margin-left: 4px;
  vertical-align: super;
}

.topics .sep {
  color: var(--pink-deep);
  margin: 0 16px;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Category chips
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 700;
  transition: all 0.22s var(--ease-soft);
}

.chip:hover {
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.chip.is-active {
  background: linear-gradient(170deg, var(--nav-top), var(--nav-bot));
  color: var(--pink-ink);
  box-shadow: var(--shadow-pink);
}

.chip span {
  font-size: 0.78rem;
  padding: 1px 9px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-faint);
}

.chip.is-active span {
  background: rgba(74, 33, 53, 0.16);
  color: var(--pink-ink);
}

/* --------------------------------------------------------------------------
   Guide article
   -------------------------------------------------------------------------- */

.article-head {
  position: relative;
  padding: 34px 0 34px;
  margin-bottom: 36px;
}

.article-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='9' fill='none'%3E%3Cpath d='M1 6c3.4-5.4 6.8-5.4 10.2 0S21 11.4 27 3.5' stroke='%23434343' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 28px 9px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--pink); }

.article-head h1 {
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.article-head .lede {
  font-size: 1.12rem;
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: 22px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-faint);
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 54px;
  align-items: start;
  padding-bottom: 20px;
}

.toc {
  --hem: var(--surface);
  position: sticky;
  top: 124px;
  padding: 22px;
  background: var(--hem);
  border-radius: var(--radius);
  filter: drop-shadow(0 10px 24px rgba(10, 10, 10, 0.45));
  font-size: 0.88rem;
}

.toc-title {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.toc ul { list-style: none; margin: 0; padding: 0; }

.toc li a {
  display: block;
  padding: 6px 12px;
  border-radius: var(--pill);
  color: var(--text-faint);
  line-height: 1.5;
  font-weight: 600;
}

.toc li a:hover { color: var(--text); background: var(--surface-2); }

.toc li a.is-current {
  color: var(--pink-ink);
  background: linear-gradient(170deg, var(--nav-top), var(--nav-bot));
}

.toc li.lvl-3 a { padding-left: 24px; font-size: 0.84rem; }

/* Prose */

.prose {
  font-size: 1.06rem;
  line-height: 1.82;
  color: #e2e2e2;
  min-width: 0;
}

.prose > *:first-child { margin-top: 0; }

.prose h2 {
  font-size: 1.62rem;
  margin: 46px 0 16px;
  color: var(--text);
}

.prose h3 {
  font-size: 1.24rem;
  margin: 34px 0 12px;
  color: var(--text);
}

.prose p { margin: 0 0 1.15em; }

.prose a {
  color: var(--pink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pink-line);
  text-underline-offset: 4px;
}

.prose a:hover { text-decoration-color: var(--pink); }

.prose ul,
.prose ol { margin: 0 0 1.3em; padding-left: 26px; }

.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--pink); }

.prose strong { color: var(--text); font-weight: 800; }

.prose code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.18em 0.5em;
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--pink-soft);
}

.prose pre {
  margin: 0 0 1.5em;
  padding: 20px 24px;
  background: var(--bg-deep);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
}

.prose pre code {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: #dcdcdc;
  font-size: inherit;
}

/* Quotes read as a friendly aside rather than a rule. */
/* Quotes are thought bubbles: rounded, with two bubbles trailing below. */
.prose blockquote {
  position: relative;
  margin: 0 0 2.6em;
  padding: 20px 26px;
  background: var(--pink-glow);
  border-radius: 28px;
  color: var(--text-dim);
}

.prose blockquote::before,
.prose blockquote::after {
  content: "";
  position: absolute;
  left: 32px;
  border-radius: 50%;
  background: var(--pink-glow);
}

.prose blockquote::before {
  top: calc(100% + 6px);
  width: 17px;
  height: 17px;
}

.prose blockquote::after {
  top: calc(100% + 27px);
  left: 24px;
  width: 9px;
  height: 9px;
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  border: none;
  border-top: 2px dashed var(--line);
  margin: 42px 0;
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 1.6em;
  font-size: 0.95rem;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.prose th,
.prose td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.prose tr:last-child td { border-bottom: none; }

.prose th {
  background: var(--surface-2);
  font-weight: 800;
  color: var(--text);
  font-size: 0.88rem;
}

.table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Auth
   -------------------------------------------------------------------------- */

.auth-wrap {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 30px 20px 90px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  position: relative;
}

/* Bubbles peeking out from behind the card. */
.auth-card::before,
.auth-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

.auth-card::before {
  width: 96px; height: 96px;
  top: -36px; right: -30px;
  background: rgba(255, 182, 217, 0.2);
}

.auth-card::after {
  width: 58px; height: 58px;
  bottom: -24px; left: -24px;
  background: rgba(201, 180, 244, 0.22);
}

.auth-card h1 { font-size: 1.8rem; margin-bottom: 8px; }

.auth-card > p {
  color: var(--text-dim);
  font-size: 0.96rem;
  margin-bottom: 28px;
}

.alert {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.alert-error {
  background: rgba(255, 158, 158, 0.11);
  color: #ffabab;
}

.alert-success {
  background: rgba(167, 227, 203, 0.11);
  color: var(--mint);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty {
  position: relative;
  padding: 68px 28px 60px;
  text-align: center;
  background: var(--surface);
  border-radius: 40px;
  color: var(--text-faint);
}

/* A little cloud floating above the message. */
.empty::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  width: 54px;
  height: 22px;
  transform: translateX(-50%);
  background-image:
    radial-gradient(circle at 16px 15px, var(--surface-3) 13px, transparent 13.5px),
    radial-gradient(circle at 36px 12px, var(--surface-3) 10px, transparent 10.5px),
    radial-gradient(circle at 48px 17px, var(--surface-3) 6px, transparent 6.5px);
}

.empty h3 { color: var(--text-dim); font-size: 1.2rem; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

main > .band:last-child { margin-bottom: 0; }

.site-footer {
  position: relative;
  margin-top: 56px;
  padding: 42px 0 20px;
  background: var(--nav);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink-ink);
}

/* The page ends on a pink cloud, bookending the header. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 22px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 21px 100%, var(--nav-edge) 21px, transparent 21.5px),
    radial-gradient(circle at 14px 100%, var(--nav-edge) 14px, transparent 14.5px);
  background-size: 70px 22px, 70px 15px;
  background-position: 0 100%, 42px 100%;
  background-repeat: repeat-x, repeat-x;
}

.site-footer .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer nav { display: flex; gap: 8px; }

.site-footer nav a {
  color: var(--pink-ink);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--pill);
  opacity: 0.72;
  transition: all 0.18s var(--ease-soft);
}

.credit {
  color: var(--pink-ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(74, 33, 53, 0.35);
  transition: text-decoration-color 0.18s var(--ease-soft);
}

.credit:hover {
  color: var(--pink-ink);
  text-decoration-color: var(--pink-ink);
}

.site-footer nav a:hover {
  color: var(--pink-ink);
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.legal {
  font-size: 0.79rem;
  font-weight: 600;
  padding: 22px 30px 12px;
  margin: 0 auto;
  text-align: center;
  color: var(--pink-ink);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */

.error-page {
  min-height: calc(100vh - 200px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 20px 90px;
}

.error-code {
  font-family: var(--display);
  font-size: 6rem;
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-log { max-width: 420px; }
  .feature-row { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; gap: 26px; }
  .toc { position: static; order: -1; }
}

@media (max-width: 660px) {
  .shell { padding: 0 18px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 50px 0 36px; }
  .section { padding: 40px 0; }
  .site-header .shell { height: 66px; gap: 12px; }
  .brand { font-size: 1.2rem; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 13px; font-size: 0.9rem; }
  .site-footer .shell { flex-direction: column; align-items: flex-start; }
  .auth-card { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}