/* ==========================================================================
   Dr. Priyanka Goyal — site styles
   Palette, type and spacing live in the tokens below. Change them here.
   ========================================================================== */

:root {
  --paper: #F6F1EA;
  --paper-deep: #EFE7DC;
  --sand: #E3D5C3;
  --ink: #1F2A2E;
  --ink-soft: #46524F;      /* body copy on paper — AA */
  --ink-mute: #5F6965;      /* meta text — AA */
  --sage: #8A9A85;          /* decorative strokes only */
  --sage-deep: #56664F;     /* sage for text — AA on paper */
  --terra: #C4704F;         /* accent — sparing, large/decoration */
  --terra-deep: #9E4F31;    /* accent for small text — AA on paper */
  --hair: rgba(31, 42, 46, .16);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 82.5rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;          /* 18px */
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.18 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* drifting lights (canvas added by main.js; skipped for reduced motion) */
.lights {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 340;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}
em, .it { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }

::selection { background: var(--sand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--terra-deep);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 1rem;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* small caps label, e.g. section kickers */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.kicker .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--terra-deep);
}
.kicker::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.hairline { border: 0; height: 1px; background: var(--hair); margin: 0; }

/* hand-drawn underline (svg sits under the word) */
.scribble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scribble > svg {
  position: absolute;
  left: -4%;
  width: 108%;
  bottom: -.18em;
  height: .4em;
  overflow: visible;
  pointer-events: none;
}
.scribble > svg path {
  fill: none;
  stroke: var(--terra);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.5;
  transition: stroke-dashoffset 1.4s var(--ease-slow) .5s;
}
.is-in .scribble > svg path,
.scribble.is-in > svg path { stroke-dashoffset: 0; }
html:not(.js) .scribble > svg path { stroke-dashoffset: 0; }

/* text links with underline drawn from the left */
.u-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .6s var(--ease);
  padding-bottom: 2px;
}
.u-link:hover, .u-link:focus-visible { background-size: 100% 1px; }
.u-link--static { background-size: 100% 1px; }
.u-link--static:hover { background-size: 0% 1px; background-position: 100% 100%; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--ink);
  transition: gap .5s var(--ease), color .3s;
}
.cta .arrow { font-style: normal; font-family: var(--sans); transition: transform .5s var(--ease); }
.cta:hover { color: var(--terra-deep); border-color: var(--terra-deep); }
.cta:hover .arrow { transform: translateX(6px); }

/* ---------- Reveal system (only when JS is on) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-split] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  transition: opacity .9s var(--ease-slow), transform 1.1s var(--ease-slow);
  transition-delay: calc(var(--i) * 55ms + var(--d, 0s));
}
.js [data-split].is-in .w { opacity: 1; transform: none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .5s var(--ease), border-color .5s, padding .5s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 1.4rem;
}
.site-header.is-stuck {
  background: rgba(246, 241, 234, .92);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom-color: var(--hair);
  padding-block: .8rem;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
  position: relative;
  z-index: 61;
}
.wordmark .dr { font-style: italic; color: var(--sage-deep); margin-right: .1em; }

.nav-links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 2.4rem;
  font-size: .95rem;
  letter-spacing: .02em;
}
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-links .nav-contact a { color: var(--ink); }

.menu-toggle {
  position: relative;
  z-index: 61;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: none;
  border: 0;
  padding: .5rem 0;
  font: inherit;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle .bars { width: 26px; height: 10px; position: relative; }
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease);
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars::after { top: 8.5px; width: 70%; left: auto; }
.menu-open .menu-toggle .bars::before { top: 4.25px; transform: rotate(32deg); }
.menu-open .menu-toggle .bars::after { top: 4.25px; width: 100%; transform: rotate(-32deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 2.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.menu-open .menu-overlay {
  visibility: visible;
  opacity: 1;
  transition: opacity .6s var(--ease), visibility 0s;
}
.menu-overlay ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: m;
}
.menu-overlay li {
  counter-increment: m;
  border-top: 1px solid var(--hair);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-slow), transform .7s var(--ease-slow);
}
.menu-overlay li:last-child { border-bottom: 1px solid var(--hair); }
.menu-open .menu-overlay li { opacity: 1; transform: none; }
.menu-open .menu-overlay li:nth-child(2) { transition-delay: .06s; }
.menu-open .menu-overlay li:nth-child(3) { transition-delay: .12s; }
.menu-open .menu-overlay li:nth-child(4) { transition-delay: .18s; }
.menu-overlay a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .9rem 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 11vw, 4rem);
  font-weight: 320;
  line-height: 1.1;
  text-decoration: none;
}
.menu-overlay a::after {
  content: "0" counter(m);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--sage-deep);
}
.menu-overlay .menu-foot {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 1.05rem;
  max-width: 22rem;
}
.menu-open { overflow: hidden; }

@media (min-width: 860px) {
  .nav-links { display: flex; }
  .menu-toggle, .menu-overlay { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
}

/* breathing background */
.breath {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
}
.blob {
  position: absolute;
  border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%;
  filter: blur(60px);
  will-change: transform, border-radius;
}
.blob--sage {
  width: 46vmax; height: 40vmax;
  left: -12vmax; top: 8%;
  background: var(--sage);
  opacity: .32;
  animation: drift-a 38s ease-in-out infinite alternate, morph 26s ease-in-out infinite alternate;
}
.blob--sand {
  width: 50vmax; height: 44vmax;
  right: -16vmax; top: -14vmax;
  background: var(--sand);
  opacity: .9;
  animation: drift-b 34s ease-in-out infinite alternate, morph 30s ease-in-out -8s infinite alternate;
}
.blob--terra {
  width: 26vmax; height: 24vmax;
  right: 12%; bottom: -10vmax;
  background: var(--terra);
  opacity: .16;
  animation: drift-c 40s ease-in-out infinite alternate, morph 24s ease-in-out -4s infinite alternate;
}
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vw, 4vh, 0) scale(1.06); }
  100% { transform: translate3d(2vw, -3vh, 0) scale(.97); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5vw, 6vh, 0) scale(.95); }
  100% { transform: translate3d(-2vw, 2vh, 0) scale(1.04); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-8vw, -6vh, 0) scale(1.12); }
}
@keyframes morph {
  0%   { border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; }
  50%  { border-radius: 58% 42% 40% 60% / 56% 52% 48% 44%; }
  100% { border-radius: 40% 60% 52% 48% / 48% 58% 42% 52%; }
}

/* faint contour lines that undulate (svg <animate> inside) */
.contours {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 46%;
  opacity: .32;
}
.contours path { fill: none; stroke: var(--sage); stroke-width: .8; vector-effect: non-scaling-stroke; }

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.65rem, 7.4vw, 6.1rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 13ch;
  margin-top: 1.4rem;
}
.hero h1 .dash { color: var(--sage); font-weight: 200; }
.hero h1 em { font-weight: 300; }

/* hand-drawn circle around a phrase */
.ringed {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.ringed > svg {
  position: absolute;
  left: -8%;
  top: -30%;
  width: 116%;
  height: 158%;
  overflow: visible;
  pointer-events: none;
}
.ringed > svg path {
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Revealed with a left-to-right wipe rather than a dash animation:
   dashes + non-scaling-stroke miscalculate in Chrome and stop partway. */
.js .ringed > svg { clip-path: inset(-20% 100% -20% -20%); }
.js .hero.is-ready .ringed > svg {
  clip-path: inset(-20% -20% -20% -20%);
  transition: clip-path 1.6s cubic-bezier(.45, .05, .35, 1) 1.6s;
}

.hero-sub {
  margin-top: 2rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
}
.hero-sub .sep { color: var(--terra); }
.hero-actions {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-actions .quiet {
  font-size: .95rem;
  color: var(--ink-mute);
}

/* line portrait */
.hero-art {
  position: relative;
  justify-self: center;
  width: min(78vw, 26.25rem);
  margin-top: -1rem;
}
.hero-art svg { width: 100%; height: auto; overflow: visible; }
.hero-art .draw {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-art .profile { stroke: var(--ink); stroke-width: 1.6; }
.hero-art .plant   { stroke: var(--sage-deep); stroke-width: 1.5; }
.hero-art .ground  { stroke: var(--terra); stroke-width: 1.4; }
.hero-art .sun     { fill: var(--terra); opacity: 0; transition: opacity 2s ease 4.2s; }
.hero.is-ready .hero-art .sun { opacity: .22; }
.hero-art figcaption {
  position: absolute;
  right: 0; bottom: -.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-mute);
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.25fr .75fr; gap: 2rem; }
  .hero-art { justify-self: end; margin-top: 4rem; width: min(34vw, 28.75rem); }
}
@media (max-width: 899px) {
  .hero { align-items: flex-start; padding-top: 7.5rem; }
  .hero-art { order: -1; width: 52vw; max-width: 260px; justify-self: end; margin: 0 -.5rem -3.5rem 0; }
}

/* ==========================================================================
   Generic section
   ========================================================================== */
.section { padding-block: clamp(5rem, 12vw, 10rem); position: relative; }
.section-head h2 {
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  margin-top: 1.2rem;
  max-width: 16ch;
}

.sprig-divider {
  display: flex;
  justify-content: center;
  padding-block: 1rem;
}
.sprig-divider svg { width: 8.75rem; height: auto; }
.sprig path, .sprig-divider path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid {
  display: grid;
  gap: 3.5rem;
}
.portrait {
  position: relative;
  margin: 0;
  width: min(100%, 26.25rem);
}
.portrait .frame-wrap { position: relative; isolation: isolate; }
.portrait .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px;
  overflow: hidden;
  background: var(--sand);
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(246, 241, 234, .7), transparent 60%),
    radial-gradient(90% 70% at 80% 90%, rgba(138, 154, 133, .45), transparent 70%),
    var(--sand);
}
.portrait .outline {
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--sage);
  border-radius: 999px 999px 6px 6px;
  z-index: -1;
}
.portrait .window-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.window-art .wa-sun { fill: var(--terra); opacity: .28; }
.window-art .wa-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.window-art .wa-hill { stroke: var(--sage-deep); opacity: .6; }
.window-art .wa-stem, .window-art .wa-leaf { stroke: var(--ink); }
.js .window-art .wa-line { stroke-dasharray: 1 2; stroke-dashoffset: 1.5; transition: stroke-dashoffset 2.4s var(--ease-slow); }
.js .window-art .wa-stem { transition-delay: .4s; }
.js .window-art .wa-leaf { transition-duration: 1.4s; transition-delay: 1.4s; }
.js .window-art .wa-leaf:nth-of-type(5) { transition-delay: 1.7s; }
.js .window-art .wa-leaf:nth-of-type(6) { transition-delay: 2s; }
.js .window-art .wa-leaf:nth-of-type(7) { transition-delay: 2.3s; }
.js .portrait.is-in .window-art .wa-line { stroke-dashoffset: 0; }
.portrait figcaption {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 1rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--terra);
}

.about-copy .lead {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 330;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 2rem 0 1.6rem;
  max-width: 30ch;
}
.about-copy .body { max-width: 34rem; color: var(--ink-soft); }
.about-copy .sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
  margin-top: 1.4rem;
}

.credentials {
  margin-top: 4rem;
  max-width: 40rem;
}
.credentials h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1rem;
}
.cred-list { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.cred-list li {
  counter-increment: c;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hair);
  position: relative;
}
.cred-list li:last-child { border-bottom: 1px solid var(--hair); }
.cred-list li::before {
  content: counter(c, lower-roman) ".";
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra-deep);
  font-size: 1rem;
}
.cred-list .deg {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 340;
  line-height: 1.15;
}
.cred-list .deg em { color: var(--ink-soft); }
.cred-list .field {
  grid-column: 2;
  font-size: .95rem;
  color: var(--ink-mute);
}
/* line that draws across as each credential appears */
.js .cred-list li::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-slow);
  transition-delay: var(--d, 0s);
  opacity: .5;
}
.js .cred-list li.is-in::after { transform: scaleX(1); }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 6vw; align-items: start; }
  .about-media { padding-top: 9rem; }
  .about-copy { padding-right: 4vw; }
  .credentials { margin-left: -8vw; background: var(--paper); position: relative; padding: 2rem 2rem 0 0; }
}
@media (max-width: 899px) {
  .portrait { width: 72%; margin: 0 1.1rem 0 auto; }
}

/* ==========================================================================
   FOCUS
   ========================================================================== */
.focus { background: var(--paper-deep); }
.focus-grid { display: grid; gap: 3rem; }
.focus-intro p {
  color: var(--ink-soft);
  max-width: 26rem;
  margin-top: 1.6rem;
}
.focus-list { list-style: none; margin: 0; padding: 0; }
.focus-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1.4rem;
  padding: 2.2rem 0 2.4rem;
  border-top: 1px solid var(--hair);
}
.focus-item:last-child { border-bottom: 1px solid var(--hair); }
.focus-item .n {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: .9;
  color: var(--sage);
  min-width: 2.2ch;
  transition: color .6s;
}
.focus-item h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 340;
  align-self: end;
}
.focus-item p {
  grid-column: 2;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: .6rem 0 0;
}
.focus-item .tags {
  grid-column: 2;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}
.focus-item:hover .n { color: var(--terra); }

@media (min-width: 900px) {
  .focus-grid { grid-template-columns: 4fr 7fr; gap: 6vw; }
  .focus-intro { position: sticky; top: 8rem; align-self: start; }
  .focus-item:nth-child(even) { margin-left: 6vw; }
}

/* ==========================================================================
   PHILOSOPHY
   ========================================================================== */
.philosophy {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.philosophy .kicker { color: var(--sand); }
.philosophy .kicker .num { color: #E59C7E; }
.philo-track { position: relative; }
.philo-stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 7rem;
}
.philo-lines {
  margin: 2.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.3rem, 7vw, 6.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.philo-lines .line { display: block; }
.philo-lines .line:nth-child(2) { padding-left: 8vw; }
.philo-lines .line:nth-child(3) { padding-left: 2vw; color: var(--sand); }
.philo-lines .line:nth-child(4) { padding-left: 12vw; }
.philo-lines .accent { color: #E59C7E; }

.js .philo-lines .line {
  opacity: .1;
  transform: translateY(.25em);
  transition: opacity 1.2s var(--ease-slow), transform 1.4s var(--ease-slow);
}
.js .philo-lines .line.is-lit { opacity: 1; transform: none; }

.philo-foot {
  display: grid;
  gap: 1.6rem;
  margin-top: 3.5rem;
  align-items: center;
}
.sunrise { width: 12.5rem; height: auto; overflow: visible; }
.sunrise path, .sunrise line {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.sunrise .sun-arc { stroke: #E59C7E; }
.js .sunrise path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.5;
  transition: stroke-dashoffset 2.2s var(--ease-slow);
}
.js .sunrise .ray { transition-delay: 1.2s; }
.js .philosophy.sun-up .sunrise path { stroke-dashoffset: 0; }
.philo-after {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 300;
  color: var(--sand);
  max-width: 30ch;
  line-height: 1.4;
  margin: 0;
}
.js .philo-after { opacity: 0; transition: opacity 1.6s ease .6s; }
.js .philosophy.sun-up .philo-after { opacity: 1; }
.philo-credit {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(227, 213, 195, .75);
}

@media (min-width: 760px) {
  .philo-foot { grid-template-columns: auto 1fr; gap: 3rem; }
}
/* Tall track = scroll room for line-by-line reveal */
.js .philo-track.is-scrolly { height: 230vh; }
.js .philo-track.is-scrolly .philo-stage { position: sticky; top: 0; }

/* ==========================================================================
   QUOTES
   ========================================================================== */
.quotes { overflow: hidden; }
.carousel {
  position: relative;
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
.quote-mark { width: 4.625rem; height: auto; }
.quote-mark path { fill: var(--terra); opacity: .85; }
.slides { position: relative; display: grid; }
.slide {
  margin: 0;
  max-width: 54rem;
}
.js .slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .8s ease, visibility 0s linear .6s;
}
.js .slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 1.4s var(--ease-slow) .65s, transform 1.6s var(--ease-slow) .65s, visibility 0s;
}
.slide blockquote { margin: 0; }
.slide blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.8vw, 3.1rem);
  font-weight: 320;
  line-height: 1.22;
  letter-spacing: -.012em;
  margin: 0;
}
.slide figcaption {
  margin-top: 1.8rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.slide figcaption::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--ink-soft);
  align-self: center;
}
.slide cite { font-style: normal; font-weight: 600; color: var(--ink); }
.slide .src { color: var(--ink-mute); font-size: .92rem; }
.slide .src em { font-variation-settings: normal; }
.slide.is-hers blockquote p { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }

.carousel-controls {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.carousel-controls button {
  background: none;
  border: 1px solid var(--hair);
  color: var(--ink);
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.carousel-controls button:hover { border-color: var(--ink); }
.carousel-controls svg { width: 1.125rem; height: 1.125rem; }
.carousel-controls svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-count {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  min-width: 4.5rem;
  font-size: 1.05rem;
}
.carousel-progress {
  flex: 1 1 7.5rem;
  max-width: 13.75rem;
  height: 1px;
  background: var(--hair);
  position: relative;
  overflow: hidden;
}
.carousel-progress span {
  position: absolute;
  inset: 0;
  background: var(--terra);
  transform-origin: left;
  transform: scaleX(0);
}

@media (min-width: 900px) {
  .carousel { grid-template-columns: 7.5rem 1fr; gap: 3rem; }
  .carousel-controls { grid-column: 2; }
}

/* ==========================================================================
   WRITING
   ========================================================================== */
.writing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.writing-head p { max-width: 26rem; color: var(--ink-soft); margin: 0; }

.posts {
  margin-top: 4rem;
  display: grid;
  gap: 3.5rem 2.5rem;
  grid-template-columns: 1fr;
}
.post-card { position: relative; }
.post-card a.cover-link { position: absolute; inset: 0; z-index: 2; }
.post-card .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  background: var(--sand);
}
.post-card .thumb .art {
  position: absolute;
  inset: 0;
  transition: transform 2.4s var(--ease-slow);
}
.post-card .thumb .art svg { width: 100%; height: 100%; }
.post-card--feature .thumb .art { inset: -8% 0; }
.post-card:hover .thumb .art,
.post-card:focus-within .thumb .art { transform: scale(1.06); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: 1.3rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.post-meta .cat { color: var(--sage-deep); font-weight: 600; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.post-card h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 360;
  line-height: 1.18;
  margin-top: .7rem;
}
.post-card h3 span {
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 1px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  transition: background-size .9s var(--ease);
}
.post-card:hover h3 span,
.post-card:focus-within h3 span { background-size: 100% 1px; }
.post-card p.excerpt {
  margin-top: .8rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.post-card--feature h3 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.08;
  max-width: 18ch;
}
.post-card--feature .thumb { aspect-ratio: 5 / 4; }
.post-card--feature p.excerpt { font-size: 1.12rem; max-width: 34rem; }

.post-card--text { padding-top: 1.6rem; border-top: 1px solid var(--ink); }
.post-card--text .post-meta { margin-top: 0; }
.post-card--text h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

.post-card--tall .thumb { aspect-ratio: 3 / 4; }

@media (min-width: 700px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
  .post-card--feature { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .posts {
    grid-template-columns: repeat(12, 1fr);
    gap: 5rem 3rem;
  }
  .post-card--feature { grid-column: 1 / span 7; grid-row: span 2; }
  .post-card:nth-child(2) { grid-column: 9 / span 4; margin-top: 4rem; }
  .post-card:nth-child(3) { grid-column: 9 / span 4; }
  .post-card:nth-child(4) { grid-column: 2 / span 5; }
  .post-card:nth-child(5) { grid-column: 8 / span 5; margin-top: 6rem; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding-bottom: clamp(4rem, 8vw, 7rem); }
.contact h1, .contact h2, .contact-invite h2 {
  font-size: clamp(3.4rem, 11vw, 9rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .95;
  margin-top: 1.4rem;
}
.contact h1 em, .contact h2 em, .contact-invite h2 em { color: var(--terra); }
.contact-grid {
  display: grid;
  gap: 4rem;
  margin-top: 3.5rem;
}
.contact-intro { color: var(--ink-soft); max-width: 30rem; }
.reach { position: relative; margin-top: 2.5rem; }
.reach .label {
  display: block;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .4rem;
}
.email-link {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4.2vw, 2.5rem);
  font-weight: 330;
  letter-spacing: -.015em;
  text-decoration: none;
  overflow-wrap: normal;
  background-image: linear-gradient(var(--terra), var(--terra)), linear-gradient(var(--hair), var(--hair));
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 1s var(--ease);
  padding-bottom: .15em;
}
.email-link:hover, .email-link:focus-visible { background-size: 100% 2px, 100% 1px; }

.squiggle {
  position: absolute;
  width: 6.875rem;
  height: auto;
  left: -1rem;
  top: -5.4rem;
  transform: rotate(-4deg);
  overflow: visible;
}
.squiggle path { fill: none; stroke: var(--terra); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js .squiggle path { stroke-dasharray: 1 2; stroke-dashoffset: 1.5; transition: stroke-dashoffset 1.8s var(--ease-slow) .3s; }
.js .squiggle path + path { transition-delay: 1.8s; transition-duration: .6s; }
.js .reach.is-in .squiggle path { stroke-dashoffset: 0; }
@media (min-width: 1000px) {
  .squiggle { left: -9.5rem; top: -1.5rem; width: 7.5rem; transform: rotate(-6deg); }
}
@media (max-width: 999px) {
  .squiggle { display: none; }
}

.insta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2.2rem;
  text-decoration: none;
  font-size: 1.15rem;
}
.insta svg { width: 30px; height: 30px; }
.insta svg path, .insta svg circle, .insta svg rect {
  fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.insta:hover svg path, .insta:hover svg rect, .insta:hover svg circle { stroke: var(--terra-deep); }

.form { display: grid; gap: 1.6rem; max-width: 36rem; }
.form .field-row { display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .form .field-row { grid-template-columns: 1fr 1fr; } }
.form label {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .2rem;
}
.form input, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(31, 42, 46, .4);
  border-radius: 0;
  padding: .6rem 0 .7rem;
  transition: border-color .3s;
}
.form textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.form input:focus, .form textarea:focus {
  outline: none;
  border-bottom-color: var(--terra-deep);
  box-shadow: 0 1px 0 0 var(--terra-deep);
}
.form .submit {
  justify-self: start;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font: inherit;
  font-size: 1rem;
  letter-spacing: .04em;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  transition: background-color .4s;
}
.form .submit:hover { background: var(--terra-deep); }
.form .form-note { font-size: .92rem; color: var(--ink-mute); margin: 0; }
.form-status { font-size: .95rem; color: var(--sage-deep); min-height: 1.5em; margin: 0; }

.crisis {
  margin-top: 5rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: .6rem;
  font-size: .98rem;
  color: var(--ink-soft);
  max-width: 52rem;
}
.crisis strong { color: var(--ink); font-weight: 600; }
.crisis a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }

@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: 6fr 5fr; gap: 7vw; }
  .contact-grid > :first-child { padding-left: 10vw; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--paper-deep);
  padding: 4.5rem 0 2.5rem;
  border-top: 1px solid var(--hair);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
}
.footer-name {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 330;
}
.footer-creds {
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin-top: .6rem;
  font-size: 1.08rem;
  line-height: 1.6;
}
.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-nav a { text-decoration: none; color: var(--ink-soft); }
.footer-sprig svg { width: 10rem; }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: .9rem;
  color: var(--ink-mute);
}
.footer-bottom .last-word { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 6fr 3fr 3fr; align-items: end; }
  .footer-sprig { justify-self: end; }
}

/* ==========================================================================
   ANXIETY — a short guide (from her Instagram series)
   ========================================================================== */
.anx-title {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -.03em;
  margin-top: 1.2rem;
}
.anx-label {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1.2rem;
}
.anx-grid {
  display: grid;
  gap: 3.5rem;
  margin-top: 3.5rem;
}
.anx-what p { color: var(--ink-soft); max-width: 32rem; }
.anx-what .anx-lead {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 330;
  line-height: 1.32;
  color: var(--ink);
  max-width: 24ch;
}
.anx-mantra {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink) !important;
  margin-top: 1.8rem;
}
.anx-signs ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  column-gap: 2.5rem;
}
.anx-signs li {
  padding: .85rem 0 .85rem 1.6rem;
  border-top: 1px solid var(--hair);
  position: relative;
  color: var(--ink);
}
.anx-signs li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45rem;
  width: .7rem; height: 1px;
  background: var(--terra);
}
.anx-note {
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
}
.anx-help { margin-top: 5rem; }
.anx-help ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink);
}
.anx-help li {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.4rem 1.2rem 1.6rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.anx-help .w-word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 320;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.anx-foot {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--ink-mute);
}
.anx-foot .sep { color: var(--terra); margin: 0 .4rem; }
.anx-foot a { color: var(--ink); }

@media (min-width: 700px) {
  .anx-signs ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .anx-grid { grid-template-columns: 5fr 7fr; gap: 6vw; }
  .anx-help ol { grid-template-columns: repeat(6, 1fr); }
  .anx-help li { padding-right: 1.6rem; }
  .anx-help li + li { padding-left: 1.2rem; border-left: 1px solid var(--hair); }
}

/* ==========================================================================
   EPICS — lessons from the Mahabharata & Ramayana
   ========================================================================== */
.epics { background: var(--paper-deep); }
.epics-grid { display: grid; gap: 3rem; }
.epics-intro h2 {
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  margin: 1.2rem 0 1.6rem;
  max-width: 14ch;
}
.epics-intro p { color: var(--ink-soft); max-width: 30rem; }
.epics-caveat {
  font-size: .95rem;
  padding-left: 1rem;
  border-left: 1px solid var(--terra);
  color: var(--ink-mute) !important;
}
.epics-list { list-style: none; margin: 0; padding: 0; counter-reset: e; }
.epics-list li {
  counter-increment: e;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .2rem 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
}
.epics-list li:last-child { border-bottom: 1px solid var(--hair); }
.epics-list li::before {
  content: counter(e, lower-roman) ".";
  grid-row: span 2;
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra-deep);
  padding-top: .35rem;
}
.epics-list h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 340; }
.epics-list p { margin: .3rem 0 0; color: var(--ink-soft); }
.epics-close {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 300;
  line-height: 1.25;
  margin: 1rem 0 0;
  color: var(--ink);
}
@media (min-width: 1000px) {
  .epics-grid { grid-template-columns: 5fr 7fr; gap: 3rem 6vw; }
  .epics-intro { position: sticky; top: 8rem; align-self: start; }
  .epics-list li:nth-child(even) { margin-left: 4vw; }
  .epics-close { grid-column: 2; padding-left: 3.6rem; }
}

/* ==========================================================================
   ARTICLE (post.html)
   ========================================================================== */
.article-hero {
  padding: 10rem 0 3rem;
  position: relative;
}
.article-hero .back {
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink-mute);
  display: inline-flex;
  gap: .5rem;
}
.article-hero .back:hover { color: var(--ink); }
.article-head { max-width: 61.25rem; }
.article-head h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.028em;
  margin-top: 1.6rem;
}
.article-head .dek {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 1.6rem;
  max-width: 36ch;
}
.article-cover {
  margin: 3rem 0 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--sand);
  border-radius: 2px;
}
.article-cover svg { width: 100%; height: 100%; }

.prose {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 4rem var(--gutter) 2rem;
  padding-inline: max(var(--gutter), calc((100% - 42.5rem) / 2));
  font-size: 1.18rem;
  line-height: 1.78;
  color: #2B3639;
  box-sizing: content-box;
}
.prose p { margin-bottom: 1.4em; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 5.4em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--terra);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.prose h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 360;
  margin: 2.6em 0 .8em;
}
.prose blockquote.pull {
  margin: 2.6em -2rem;
  padding: 1.8rem 0 1.8rem 2rem;
  border-left: 1px solid var(--terra);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.prose blockquote.pull p { margin: 0; }
@media (max-width: 760px) {
  .prose blockquote.pull { margin-inline: 0; padding-left: 1.2rem; }
}
.prose ol, .prose ul { padding-left: 1.2em; margin: 0 0 1.4em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--sage-deep); font-family: var(--serif); font-style: italic; }
.prose hr { border: 0; text-align: center; margin: 3em 0; }
.prose hr::before { content: "· · ·"; letter-spacing: 1em; color: var(--sage); }
.prose .aside {
  font-size: 1rem;
  color: var(--ink-mute);
  padding: 1.2rem 1.4rem;
  background: var(--paper-deep);
  border-radius: 2px;
}

.author-card {
  max-width: 42.5rem;
  margin: 3rem auto 0;
  padding: 2.4rem 0 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.4rem;
  align-items: start;
}
.author-card .avatar {
  width: 72px; height: 88px;
  border-radius: 999px 999px 4px 4px;
  background: var(--sand);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: rgba(31, 42, 46, .4);
  overflow: hidden;
}
.author-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card .avatar svg { width: 60%; height: 80%; }
.author-card .avatar path { fill: none; stroke: var(--sage-deep); stroke-width: 1.4; stroke-linecap: round; }
.author-card h2 { font-size: 1.5rem; font-weight: 380; }
.author-card .creds { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-mute); font-size: 1.02rem; margin: .2rem 0 .8rem; }
.author-card p { font-size: 1.02rem; color: var(--ink-soft); }
.article-wrap { padding-inline: var(--gutter); }

.read-next { padding-block: 6rem 7rem; }
.read-next .posts { margin-top: 2.5rem; }
@media (min-width: 1000px) {
  .read-next .post-card:nth-child(n) { grid-column: auto / span 6; margin-top: 0; grid-row: auto; }
}

.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 70;
  background: var(--terra);
  transform-origin: left;
  transform: scaleX(0);
}

/* ==========================================================================
   Reduced motion — freeze everything that moves on its own
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .blob { animation: none !important; }
  .js [data-reveal], .js [data-split] .w, .js .philo-lines .line { opacity: 1 !important; transform: none !important; }
  .js .philo-track.is-scrolly { height: auto; }
  .js .philo-track.is-scrolly .philo-stage { position: static; }
  .js .philo-after { opacity: 1; }
}

/* site credit */
.made-by {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .4s var(--ease);
}
.made-by strong { font-weight: 600; color: var(--ink-soft); transition: color .4s var(--ease); }
.made-by svg { width: .8125rem; height: .8125rem; transition: transform .8s var(--ease-slow); }
.made-by svg path { fill: var(--terra); }
.made-by:hover strong, .made-by:focus-visible strong { color: var(--terra-deep); }
.made-by:hover svg, .made-by:focus-visible svg { transform: scale(1.25); }

/* contact as its own page */
.contact--page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding-top: clamp(8rem, 16vw, 11rem);
}
.contact--page h1 { font-family: var(--serif); }

/* short invite on the home page */
.contact-invite h2 a { text-decoration: none; }
.contact-invite h2 a:hover em { color: var(--terra-deep); }
.invite-row {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
}
.invite-row p { margin: 0; max-width: 32rem; color: var(--ink-soft); }

/* philosophy: gentler indents on phones so lines don't strand words */
@media (max-width: 599px) {
  .philo-lines .line:nth-child(2) { padding-left: 1.2rem; }
  .philo-lines .line:nth-child(3) { padding-left: .4rem; }
  .philo-lines .line:nth-child(4) { padding-left: 2rem; }
}

/* tablet: about sits in two columns so the arch doesn't fill the screen */
@media (min-width: 700px) and (max-width: 899px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
  .about-media { padding-top: 5rem; }
  .portrait { width: 100%; margin: 0; }
}

/* moved out of inline style attributes (needed for a strict Content-Security-Policy) */
#focus-title, #writing-title { font-size: clamp(2.3rem, 5.6vw, 4.4rem); margin-top: 1.2rem; }
#focus-title { max-width: 12ch; }
.article-meta { margin-top: 2.2rem; }
.crisis p { margin: 0; }
.carousel-controls .i-play { display: none; }

/* ==========================================================================
   Page transitions (home ↔ contact ↔ writing)
   Modern browsers: native cross-page View Transitions.
   Others: main.js adds .is-leaving / .is-entering for a soft fade.
   ========================================================================== */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }

/* Old page dissolves while the new one settles in underneath: a true crossfade, no gap. */
::view-transition-old(root) {
  animation: page-out .55s cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: page-in .75s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* fallback */
html.is-entering main,
html.is-entering .site-footer { animation: page-in .75s cubic-bezier(.22, .61, .36, 1) both; }
html.is-leaving main,
html.is-leaving .site-footer {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* JS smooth scrolling drives the page itself, so the CSS version must step aside */
html.has-smooth { scroll-behavior: auto; }
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.is-entering main, html.is-entering .site-footer { animation: none; }
}

/* ==========================================================================
   Hero layout fixes
   ========================================================================== */
/* Hand-drawn marks are meant to overhang their words; the global svg max-width squeezed them. */
.ringed > svg, .scribble > svg { max-width: none; }
.ringed > svg { left: -7%; width: 114%; top: -16%; height: 140%; }

/* Caption sits under the drawing instead of on top of the neck line. */
.hero-art figcaption { position: static; text-align: right; margin-top: .4rem; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3vw; }
  .hero-art { justify-self: center; margin-top: 2rem; width: min(32vw, 30rem); }
}
/* Wide screens: use the room instead of leaving big empty margins. */
@media (min-width: 1500px) {
  :root { --max: 92.5rem; }
  .hero h1 { font-size: clamp(6rem, 5.4vw, 7.6rem); }
  .hero-art { width: min(28vw, 33.75rem); }
}

/* About: Education is its own full-width row (label beside a 2-column list) */
.credentials { margin-top: 1rem; }
@media (min-width: 700px) {
  .credentials {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0 3rem;
    margin: 2rem 0 0;
    max-width: none;
    padding: 0;
    background: none;
  }
  .credentials h3 { padding-top: 1.4rem; margin: 0; }
  .cred-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .cred-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (min-width: 900px) {
  .credentials { gap: 0 6vw; margin-left: 0; }
}
@media (min-width: 700px) {
  .cred-list .deg { font-size: clamp(1.25rem, 1.75vw, 1.65rem); }
  .cred-list li { grid-template-columns: 2rem 1fr; }
}

/* Tablet & phone: hero hugs its content instead of leaving an empty half-screen */
@media (max-width: 899px) {
  .hero { min-height: auto; padding-bottom: clamp(3.5rem, 10vw, 6rem); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-art { width: 40vw; max-width: 320px; margin-bottom: -2rem; }
}
/* Tablet: Education list uses the full width under its label */
@media (min-width: 700px) and (max-width: 899px) {
  .credentials { grid-template-columns: 1fr; }
  .credentials h3 { padding-top: 0; margin-bottom: 1rem; }
}

/* ==========================================================================
   Hero composition (desktop): three balanced headline lines, art beside them
   "Understanding the mind / — at home, at work, / and in between."
   ========================================================================== */
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 4vw;
    align-items: center;
  }
  .hero h1 {
    max-width: none;
    font-size: clamp(3.2rem, 5.3vw, 6.6rem);
    line-height: 1.04;
  }
  .hero h1 .hl { display: block; white-space: nowrap; }
  .hero-art {
    justify-self: end;
    margin-top: 0;
    width: min(26vw, 26.875rem);
  }
  .hero-art figcaption { padding-right: 9%; }
}
@media (min-width: 1500px) {
  .hero h1 { font-size: clamp(3.2rem, 5.3vw, 6.6rem); }
  .hero-art { width: min(24vw, 27.5rem); }
}

/* ==========================================================================
   Big screens: scale the whole design with the screen.
   Everything is sized in rem, so raising the root size above 1440px keeps the
   exact laptop composition — just proportionally larger — on 1080p, 1440p
   and 4K monitors, instead of a small strip with empty sides.
   ========================================================================== */
@media (min-width: 1440px) {
  html { font-size: min(calc(100vw / 90), 30px); }
}
@media (min-width: 900px) {
  /* headline width tracks its column at every screen size (~92% fill) */
  .hero h1 { font-size: clamp(3.2rem, 6.3vw, 7.4rem); }
  .hero-art { width: min(26vw, 30rem); }
}