/* Theme: Terracotta Studio (see THEME.md)
   System rules:
   - Six text styles only: h1, h2, h3, lead, body, label/small.
   - Everything left-aligned to one container edge.
   - Every section: heading, then "blocks" (narrow left column + wide right column).
   - One background (linen). Deep green only for the closing call to action. */

:root {
  --bg: #f3ede3;
  --ink: #1f2a24;
  --green: #2f4a3a;
  --mute: #5f675f;
  --terra: #c2603a;
  --line: #d8cbb6;
  --cream: #f3ede3;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --fs-h1: clamp(38px, 5.2vw, 64px);
  --fs-h2: clamp(30px, 3.2vw, 40px);
  --fs-h3: 22px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-small: 13px;

  /* Spacing */
  --sec: 80px;
  --gap: 48px;
  --max: 1120px;
}
@media (max-width: 760px) {
  :root { --fs-h3: 20px; --fs-lead: 18px; --fs-body: 16px; --sec: 56px; --gap: 16px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
.w { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Text styles ---------- */
.h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; color: var(--green); margin: 0; letter-spacing: -.005em; font-variation-settings: "SOFT" 50; }
.h1 { font-size: var(--fs-h1); line-height: 1.12; max-width: 20ch; text-wrap: balance; }
.h1 em { font-style: italic; color: var(--terra); }
.h2 { font-size: var(--fs-h2); line-height: 1.18; }
.h3 { font-size: var(--fs-h3); line-height: 1.35; display: block; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--mute); max-width: 36em; }
.body { font-size: var(--fs-body); }
.small { font-size: var(--fs-small); }
.label { font-size: var(--fs-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.accent { color: var(--terra); }
.mute { color: var(--mute); }
.strong { font-weight: 700; }
strong { font-weight: 700; }
.link { font-size: var(--fs-body); font-weight: 600; color: var(--terra); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .w { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.logo { font: 400 22px var(--serif); color: var(--green); text-decoration: none; white-space: nowrap; }
.logo i { color: var(--terra); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 15px; font-weight: 600; color: var(--mute); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); }
.nav .pill { color: var(--cream); background: var(--green); padding: 9px 18px; border-radius: 999px; }
.nav .pill:hover, .connect.open .pill { background: var(--terra); color: #fff; }
@media (max-width: 620px) { .nav { gap: 18px; } .nav .pill { display: none; } .logo { font-size: 21px; } }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; background: var(--green); color: var(--cream); border: 1px solid var(--green); transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.btn.ghost { background: transparent; color: var(--green); }
.btn.ghost:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn.light { background: var(--cream); color: var(--green); border-color: var(--cream); }
.btn.light:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.btn.ghost-light { background: transparent; color: var(--cream); border-color: rgba(243, 237, 227, .5); }
.btn.ghost-light:hover { background: var(--cream); color: var(--green); }
.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 0; }
.hero .label { margin-bottom: 24px; }
.hero .lead { margin-top: 28px; }
.names { margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; }
.names ul { display: flex; flex-wrap: wrap; gap: 8px 36px; list-style: none; margin: 0; padding: 0; }
.names li { font: 400 var(--fs-h3) var(--serif); color: var(--green); }
@media (max-width: 760px) { .hero { padding: 64px 0 0; } .names { margin-top: 56px; } .names ul { gap: 4px 22px; } }

/* ---------- Sections and blocks ---------- */
.sec { padding: var(--sec) 0 0; }
.sec:last-of-type { padding-bottom: var(--sec); }
.sec-head { margin-bottom: 20px; max-width: 40em; }
.sec-intro { margin-top: 16px; }
.block { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); padding: 28px 0; border-top: 1px solid var(--line); }
.block-l { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.block-l .link { margin-top: 6px; }
.block-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.anchor { scroll-margin-top: 90px; }
.after { margin-top: 32px; }
@media (max-width: 760px) { .block { grid-template-columns: 1fr; padding: 32px 0; } }

/* Rows: a list of pieces inside a block */
.block-r:has(.row) { gap: 0; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row .label { color: var(--terra); }
.row .arr { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--green); transition: background .2s, color .2s, border-color .2s; }
.row:hover .h3 { color: var(--terra); }
.row:hover .arr { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Experience */
.result { padding-left: 16px; border-left: 2px solid var(--terra); display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* Recommendations */
.quote { margin: 0; }

/* Video */
.frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--green); text-decoration: none; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--terra); display: grid; place-items: center; transition: transform .2s; }
.frame:hover .play { transform: scale(1.06); }
.play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }

/* Photos */
.portrait { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } .portrait { max-width: 220px; } }

/* ---------- Call to action ---------- */
.cta { background: var(--green); color: var(--cream); padding: var(--sec) 0; margin-top: var(--sec); }
.cta .h2 { color: var(--cream); }
.cta .lead { color: rgba(243, 237, 227, .75); margin-top: 20px; }

/* ---------- Footer ---------- */
.site-footer { padding: 32px 0 40px; font-size: 14px; color: var(--mute); }
.site-footer .w { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--terra); }

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Hero: text left, stack of covers right ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.stack { position: relative; display: block; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; justify-self: end; text-decoration: none; }
.sheet { position: absolute; margin: 0; width: 78%; background: #fff; border-radius: 16px; padding: 10px 10px 14px; box-shadow: 0 24px 50px -24px rgba(31, 42, 36, .45), 0 2px 6px rgba(31, 42, 36, .08); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sheet img { width: 100%; aspect-ratio: 1024 / 520; object-fit: cover; object-position: top; border-radius: 10px; }
.sheet figcaption { margin-top: 10px; padding-left: 4px; color: var(--terra); }
.s1 { top: 4%; left: 0; transform: rotate(-6deg); z-index: 1; }
.s2 { top: 30%; right: 0; transform: rotate(4deg); z-index: 2; }
.s3 { top: 58%; left: 8%; transform: rotate(-2deg); z-index: 3; }
.stack:hover .s1 { transform: rotate(-8deg) translate(-6px, -6px); }
.stack:hover .s2 { transform: rotate(6deg) translate(6px, -4px); }
.stack:hover .s3 { transform: rotate(-1deg) translateY(6px); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .stack { justify-self: start; max-width: 360px; }
}

/* ---------- Recommendations: job titles readable ---------- */
.role { font: 400 var(--fs-h3)/1.35 var(--serif); color: var(--green); }
.sheet { padding: 10px; }
.sheet figcaption { position: absolute; top: 20px; left: 20px; margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--bg); color: var(--terra); box-shadow: 0 2px 8px rgba(31, 42, 36, .12); font-size: 11.5px; }
.hero-grid .h1 { max-width: none; }

/* "Latest" tag next to category names */
.cat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { font-size: 11px; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; background: var(--green); color: var(--cream); }
.cta-mail { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- About: stacked photos, hover brings one to the front ---------- */
.pstack { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1.15; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pcard {
  position: absolute; margin: 0; width: 62%; padding: 9px 9px 0; background: #fff; border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(31, 42, 36, .5), 0 2px 6px rgba(31, 42, 36, .08);
  transform: rotate(var(--r)) scale(1); z-index: var(--z);
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), box-shadow .45s ease, z-index 0s linear .3s;
  cursor: default;
}
.pcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 8px; pointer-events: none; }
.pcard figcaption { font-size: 12px; font-weight: 600; color: var(--mute); padding: 8px 2px 10px; line-height: 1.3; }
.p1 { --r: -7deg; --z: 1; top: 0; left: 0; }
.p2 { --r: 6deg; --z: 2; top: 6%; right: 0; }
.p3 { --r: -1.5deg; --z: 3; top: 30%; left: 17%; }
.pcard:hover {
  z-index: 10; transform: rotate(0deg) scale(1.08) translateY(-6px);
  box-shadow: 0 34px 60px -24px rgba(31, 42, 36, .6), 0 4px 12px rgba(31, 42, 36, .12);
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), box-shadow .45s ease, z-index 0s;
}
@media (max-width: 760px) { .pstack { max-width: 320px; margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .pcard:hover { transform: rotate(0deg) scale(1.04); } }
.frame[data-mp4] { cursor: pointer; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* ---------- Blog: horizontally scrolling rows ---------- */
.rail-sec { padding: 40px 0 0; scroll-margin-top: 80px; }
.rail-sec + .rail-sec { border-top: 1px solid var(--line); margin-top: 48px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.count { font: 600 14px var(--sans); color: var(--terra); background: var(--sand, #e8dccb); border-radius: 999px; padding: 3px 11px; vertical-align: middle; margin-left: 6px; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--green); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.rail-nav button svg { width: 22px; height: 22px; fill: currentColor; }
.rail-nav button:hover:not(:disabled) { background: var(--green); color: var(--cream); border-color: var(--green); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail {
  --inset: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset);
  padding: 8px var(--inset) 32px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.bcard { flex: 0 0 340px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.bcover { display: block; aspect-ratio: 1024 / 540; border-radius: 16px; overflow: hidden; background: #e8dccb; box-shadow: 0 1px 0 var(--line); }
.bcover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.bcard:hover .bcover img { transform: scale(1.04); }
.bcard .label { margin-top: 8px; }
.bcard .h3 { transition: color .2s; }
.bcard:hover .h3 { color: var(--terra); }
.badge { align-self: flex-start; margin-top: auto; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--green); color: var(--cream); }
.badge.out { background: transparent; color: var(--mute); border: 1px solid var(--line); font-weight: 600; }
@media (max-width: 760px) { .bcard { flex-basis: 78vw; } .rail-nav { display: none; } .rail-sec { padding-top: 48px; } }

/* ---------- Article pages ---------- */
.post { padding: 56px 0 0; }
.post-w { max-width: 760px; }
.back { display: inline-block; margin-bottom: 36px; font-size: 15px; }
.post-title { font-size: clamp(34px, 4.4vw, 52px); max-width: none; margin-top: 14px; }
.post-meta { margin-top: 18px; color: var(--mute); font-size: 15px; }
.post-note { margin-top: 14px; padding: 14px 18px; border-left: 2px solid var(--terra); background: #ece3d5; border-radius: 0 10px 10px 0; font-size: 15px; color: var(--ink); }
.post-cover { max-width: 1000px; margin-top: 40px; margin-bottom: 48px; }
.post-cover img { width: 100%; border-radius: 18px; }
.prose-post { font-size: 18px; line-height: 1.75; color: var(--ink); padding-bottom: 32px; }
.prose-post > * + * { margin-top: 1.1em; }
.prose-post p, .prose-post ul, .prose-post ol { margin: 0; }
.prose-post * + p, .prose-post * + ul, .prose-post * + ol { margin-top: 1.1em; }
.prose-post h2 { font: 400 32px/1.25 var(--serif); color: var(--green); margin: 2.2em 0 .5em; }
.prose-post h3 { font: 500 23px/1.35 var(--serif); color: var(--green); margin: 1.8em 0 .4em; }
.prose-post h4 { font-size: 18px; font-weight: 700; margin: 1.5em 0 .3em; }
.prose-post ul, .prose-post ol { padding-left: 1.3em; }
.prose-post li + li { margin-top: .4em; }
.prose-post a { color: var(--terra); text-underline-offset: 3px; }
.prose-post strong { font-weight: 700; }
.prose-post figure { margin: 2em 0; }
.prose-post figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.prose-post figcaption { margin-top: 8px; font-size: 14px; color: var(--mute); text-align: center; }
.prose-post blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--terra); font: italic 400 21px/1.5 var(--serif); color: var(--green); }
.prose-post pre { margin: 1.6em 0; padding: 18px 20px; background: #1f2a24; color: #e9e4da; border-radius: 12px; overflow-x: auto; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose-post code { font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace; background: #e8dccb; padding: 2px 6px; border-radius: 5px; }
.prose-post pre code { background: none; padding: 0; font-size: inherit; }
.prose-post table { display: block; overflow-x: auto; margin: 1.6em 0; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose-post th, .prose-post td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; min-width: 120px; }
.prose-post th { background: #e8dccb; font-weight: 700; }
.prose-post hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
@media (max-width: 760px) { .prose-post { font-size: 17px; } .prose-post h2 { font-size: 27px; } }
.post .post-title { max-width: none; text-wrap: balance; }

/* ---------- Blog hero: animated writing illustration ---------- */
.wart { justify-self: end; width: 100%; max-width: 440px; }
.wart svg { width: 100%; height: auto; display: block; overflow: visible; }
.wa-back { transform-origin: 275px 195px; transform: rotate(6deg); }
.wa-main { transform-origin: 225px 235px; transform: rotate(-2deg); filter: drop-shadow(0 24px 30px rgba(31, 42, 36, .16)); }
.wa-line { stroke: #b9ac97; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wa-pen { animation: wa-pen 12s linear infinite; }
.wa-chip { animation: wa-float 6s ease-in-out infinite; }
.wa-chip.c1 { transform: translate(18px, 150px); animation-delay: 0s; }
.wa-chip.c2 { transform: translate(400px, 70px); animation-delay: -2s; }
.wa-chip.c3 { transform: translate(384px, 330px); animation-delay: -4s; }
@keyframes wa-float-c1 {}

.wa-chip.c1 { animation-name: wa-c1; }
@keyframes wa-c1 { 0%,100% { transform: translate(18px,150px); } 50% { transform: translate(18px,138px); } }
.wa-chip.c2 { animation-name: wa-c2; }
@keyframes wa-c2 { 0%,100% { transform: translate(400px,70px); } 50% { transform: translate(400px,58px); } }
.wa-chip.c3 { animation-name: wa-c3; }
@keyframes wa-c3 { 0%,100% { transform: translate(384px,330px); } 50% { transform: translate(384px,318px); } }
.wa-line.l1 { animation: wa-l1 12s linear infinite; }
@keyframes wa-l1 { 0%,4% { stroke-dashoffset: 1; opacity: 1; } 12%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l2 { animation: wa-l2 12s linear infinite; }
@keyframes wa-l2 { 0%,13% { stroke-dashoffset: 1; opacity: 1; } 21%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l3 { animation: wa-l3 12s linear infinite; }
@keyframes wa-l3 { 0%,22% { stroke-dashoffset: 1; opacity: 1; } 30%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l4 { animation: wa-l4 12s linear infinite; }
@keyframes wa-l4 { 0%,31% { stroke-dashoffset: 1; opacity: 1; } 39%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l5 { animation: wa-l5 12s linear infinite; }
@keyframes wa-l5 { 0%,40% { stroke-dashoffset: 1; opacity: 1; } 48%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l6 { animation: wa-l6 12s linear infinite; }
@keyframes wa-l6 { 0%,49% { stroke-dashoffset: 1; opacity: 1; } 57%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l7 { animation: wa-l7 12s linear infinite; }
@keyframes wa-l7 { 0%,58% { stroke-dashoffset: 1; opacity: 1; } 66%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.wa-line.l8 { animation: wa-l8 12s linear infinite; }
@keyframes wa-l8 { 0%,67% { stroke-dashoffset: 1; opacity: 1; } 75%,90% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes wa-pen { 0% { transform: translate(120px,146px); opacity: 0; } 3% { transform: translate(120px,146px); opacity: 1; } 4% { transform: translate(120px,146px); opacity: 1; } 12% { transform: translate(328px,146px); opacity: 1; } 13% { transform: translate(120px,172px); opacity: 1; } 21% { transform: translate(310px,172px); opacity: 1; } 22% { transform: translate(120px,198px); opacity: 1; } 30% { transform: translate(322px,198px); opacity: 1; } 31% { transform: translate(120px,224px); opacity: 1; } 39% { transform: translate(270px,224px); opacity: 1; } 40% { transform: translate(120px,262px); opacity: 1; } 48% { transform: translate(328px,262px); opacity: 1; } 49% { transform: translate(120px,288px); opacity: 1; } 57% { transform: translate(300px,288px); opacity: 1; } 58% { transform: translate(120px,314px); opacity: 1; } 66% { transform: translate(318px,314px); opacity: 1; } 67% { transform: translate(120px,340px); opacity: 1; } 75% { transform: translate(236px,340px); opacity: 1; } 82% { transform: translate(340px,370px); opacity: 1; } 92% { transform: translate(340px,370px); opacity: 1; } 97%,100% { transform: translate(340px,370px); opacity: 0; } }
@media (max-width: 900px) { .wart { justify-self: start; max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .wa-line { stroke-dashoffset: 0; animation: none; } .wa-pen, .wa-chip { animation: none; } .wa-pen { transform: translate(340px,370px); } }

/* ---------- Article pages: contents sidebar (same behaviour as Nurse Swift posts) ---------- */
.post-shell { max-width: 1080px; margin: 0 auto; padding: 56px 24px 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc-col { position: relative; align-self: stretch; }
.toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; width: 210px; scrollbar-width: thin; }
.toc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 6px 0 14px; }
.toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.toc-group { display: flex; flex-direction: column; }
.toc-row { display: flex; align-items: flex-start; margin-left: -2px; border-left: 2px solid transparent; transition: border-color .2s; }
.toc-row.active { border-left-color: var(--terra); }
.toc-caret { flex: 0 0 14px; padding: 9px 0 0 4px; font-size: 9px; color: #b3a893; cursor: pointer; transition: transform .18s ease; user-select: none; line-height: 1; }
.toc-caret.none { visibility: hidden; cursor: default; }
.toc-group.open > .toc-row > .toc-caret { transform: rotate(90deg); }
.toc-lead { flex: 1; min-width: 0; padding: 7px 0 7px 6px; color: var(--mute); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.toc-lead:hover { color: var(--green); }
.toc-row.active .toc-lead { color: var(--green); font-weight: 700; }
.toc-children { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.toc-group.open > .toc-children { max-height: 60vh; }
.toc-children a { padding: 5px 0 5px 24px; margin-left: -2px; border-left: 2px solid transparent; color: #7d8078; text-decoration: none; font-size: 12.5px; line-height: 1.4; }
.toc-children a:hover { color: var(--green); }
.toc-children a.active { color: var(--green); font-weight: 700; border-left-color: var(--terra); }
.toc-toggle, .toc-backdrop { display: none; }
.post-body .back { margin-bottom: 28px; }
.post-body .post-cover { margin: 36px 0 44px; max-width: none; }
.post-body .prose-post h2, .post-body .prose-post h3 { scroll-margin-top: 100px; }
@media (max-width: 1000px) {
  .post-shell { grid-template-columns: minmax(0, 1fr); max-width: 780px; padding-top: 40px; }
  .toc-col { display: contents; }
  .toc { position: fixed; top: 0; left: 0; z-index: 80; width: 290px; max-width: 85vw; height: 100%; max-height: 100%; background: var(--bg); box-shadow: 0 0 44px rgba(0, 0, 0, .22); padding: 24px 20px; transform: translateX(-102%); transition: transform .22s ease; }
  .toc.open { transform: translateX(0); }
  .toc-backdrop { display: block; position: fixed; inset: 0; background: rgba(31, 42, 36, .42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 70; }
  .toc-backdrop.open { opacity: 1; pointer-events: auto; }
  .toc-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--sans); color: var(--green); background: #ece3d5; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; cursor: pointer; margin: 0 0 22px 14px; vertical-align: middle; }
  .toc-toggle svg { width: 16px; height: 16px; }
}
.post-body { min-width: 0; } .post-body .post-cover img { width: 100%; height: auto; border-radius: 18px; }


/* ---------- Tighter spacing ---------- */
.rail-sec + .rail-sec { margin-top: 32px; }
.rail-head { margin-bottom: 18px; }
.rail { padding-bottom: 20px; }
.hero .lead { margin-top: 20px; }
.sec[id], .rail-sec { scroll-margin-top: 80px; }
@media (max-width: 760px) { .hero { padding-top: 48px; } }

/* ---------- Connect dropdown ---------- */
.nav .pill { border: 0; font: 600 15px var(--sans); cursor: pointer; }
.connect { position: relative; }
.connect-menu {
  position: absolute; right: 0; top: calc(100% + 12px); display: flex; flex-direction: column; gap: 8px;
  padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 18px 40px -18px rgba(31, 42, 36, .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.4, .5, 1), visibility 0s linear .25s;
}
.connect.open .connect-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.4, .5, 1); }
.nav .bub { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--green); color: var(--green); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.nav .bub:first-child { background: var(--green); color: var(--cream); }
.nav .bub:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.bub svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (max-width: 620px) { .connect { display: none; } }
.hero-blog { padding-top: 40px; } .hero-blog .hero-grid { align-items: start; } .hero-blog .hero-grid > div:first-child { padding-top: 24px; } @media (max-width: 760px) { .hero-blog { padding-top: 32px; } }