/* kroshtan.com — moss.
   Warm paper and deep moss; Fraunces for headings, Source Sans 3 for text. Both self-hosted. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f3f0e6;
  --surface: #faf8f1;
  --ink: #22261e;
  --muted: #595e50;
  --rule: #dad4c3;
  --accent: #3f5a36;
  --accent-strong: #2f4528;
  --accent-soft: rgb(63 90 54 / 0.09);
  --lichen: #8a9a5b;
  --on-accent: #f6f3ea;
  --todo-bg: #f4e7a6;
  --todo-ink: #3b3200;
  --warn-bg: #7b2e12;
  --warn-ink: #ffffff;
  --contours: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 520' preserveAspectRatio='xMaxYMid slice'><g fill='none' stroke='%233f5a36' stroke-opacity='0.09' stroke-width='1.1'><path d='M802 250C802 256 797 264 791 269C785 273 775 274 766 276C758 277 747 278 739 276C732 273 724 266 721 260C718 254 719 246 722 240C726 234 733 228 740 226C748 223 758 222 767 223C775 224 785 227 791 231C797 236 802 244 802 250Z'/><path d='M845 250C845 263 836 279 824 289C812 299 792 308 775 310C758 311 736 305 721 298C707 291 694 281 687 269C679 257 670 240 675 228C681 216 702 204 719 199C735 193 757 192 774 194C791 197 809 204 821 213C833 223 844 237 845 250Z'/><path d='M887 250C888 269 874 293 856 308C839 324 808 340 783 342C757 345 726 331 703 321C681 310 658 297 647 280C635 263 628 236 636 217C644 199 671 176 695 168C719 160 753 165 780 169C806 174 835 180 853 194C871 207 887 231 887 250Z'/><path d='M936 250C934 275 905 304 880 323C855 341 821 355 787 360C753 366 708 367 674 357C641 346 597 319 587 295C577 271 601 237 616 212C632 188 651 164 680 150C709 137 754 127 789 131C824 134 865 152 890 172C914 192 937 225 936 250Z'/><path d='M971 250C968 282 941 318 912 342C882 366 837 388 795 394C753 400 702 390 659 376C616 362 554 337 539 308C524 279 549 229 571 200C592 171 629 151 667 134C705 117 754 96 797 98C841 100 900 123 929 148C958 173 974 218 971 250Z'/><path d='M1019 250C1017 290 990 338 954 367C918 397 854 422 803 425C752 429 697 408 648 389C599 371 533 350 509 316C485 281 484 219 505 183C527 147 590 114 639 99C688 84 744 89 798 94C853 98 928 101 964 127C1001 153 1020 210 1019 250Z'/><path d='M1048 250C1039 294 992 330 952 366C913 402 872 454 813 467C755 481 655 473 601 449C546 424 501 366 486 322C471 278 490 228 511 185C532 142 562 88 611 65C661 42 744 40 810 46C876 52 967 67 1007 101C1047 135 1057 206 1048 250Z'/><path d='M1100 250C1111 301 1092 382 1045 422C998 462 890 490 819 491C748 492 680 455 617 429C554 402 475 378 442 333C409 289 395 209 420 161C445 112 527 69 594 43C661 17 755 -6 820 6C885 18 937 74 983 115C1030 156 1090 199 1100 250Z'/><path d='M1194 250C1203 306 1128 394 1066 435C1003 475 900 486 819 493C739 499 653 496 583 471C512 446 429 399 396 345C363 292 357 208 385 152C414 96 495 37 568 10C641 -16 750 -22 823 -6C896 9 945 58 1007 101C1069 144 1184 194 1194 250Z'/><path d='M1153 250C1161 313 1150 403 1096 453C1043 503 928 536 834 550C739 565 596 575 528 539C460 504 447 402 424 338C401 274 376 217 393 154C410 90 452 -4 526 -42C600 -79 751 -89 838 -69C925 -50 995 23 1048 76C1100 130 1145 187 1153 250Z'/><path d='M1197 250C1186 319 1129 381 1070 437C1011 493 940 561 843 587C745 613 562 632 485 592C409 553 405 424 382 349C360 274 327 207 351 143C376 79 448 3 530 -36C613 -76 743 -105 844 -95C945 -85 1078 -35 1137 22C1195 80 1208 181 1197 250Z'/><path d='M1320 250C1340 324 1266 451 1187 508C1108 565 952 592 844 595C737 597 635 561 540 525C445 488 319 444 275 377C230 310 239 201 274 123C310 45 392 -52 488 -89C583 -127 750 -128 846 -103C943 -77 987 6 1066 65C1145 124 1299 176 1320 250Z'/><path d='M1286 250C1272 327 1172 383 1102 457C1033 531 977 664 869 693C760 722 545 687 454 632C362 578 348 451 318 366C288 281 246 199 275 123C303 47 389 -41 487 -90C585 -140 747 -186 863 -172C980 -159 1116 -78 1187 -8C1257 63 1300 173 1286 250Z'/></g></svg>");

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

  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 10px;
  --radius-sm: 6px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151914;
    --surface: #1c211a;
    --ink: #e9e6da;
    --muted: #a8ad9b;
    --rule: #2f3629;
    --accent: #a9bf82;
    --accent-strong: #c2d49f;
    --accent-soft: rgb(169 191 130 / 0.1);
    --lichen: #7f8f55;
    --on-accent: #151914;
    --todo-bg: #4a4210;
    --todo-ink: #f8eeb0;
    --warn-bg: #e0a07a;
    --warn-ink: #1a0f08;
    --contours: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 520' preserveAspectRatio='xMaxYMid slice'><g fill='none' stroke='%23a9bf82' stroke-opacity='0.07' stroke-width='1.1'><path d='M802 250C802 256 797 264 791 269C785 273 775 274 766 276C758 277 747 278 739 276C732 273 724 266 721 260C718 254 719 246 722 240C726 234 733 228 740 226C748 223 758 222 767 223C775 224 785 227 791 231C797 236 802 244 802 250Z'/><path d='M845 250C845 263 836 279 824 289C812 299 792 308 775 310C758 311 736 305 721 298C707 291 694 281 687 269C679 257 670 240 675 228C681 216 702 204 719 199C735 193 757 192 774 194C791 197 809 204 821 213C833 223 844 237 845 250Z'/><path d='M887 250C888 269 874 293 856 308C839 324 808 340 783 342C757 345 726 331 703 321C681 310 658 297 647 280C635 263 628 236 636 217C644 199 671 176 695 168C719 160 753 165 780 169C806 174 835 180 853 194C871 207 887 231 887 250Z'/><path d='M936 250C934 275 905 304 880 323C855 341 821 355 787 360C753 366 708 367 674 357C641 346 597 319 587 295C577 271 601 237 616 212C632 188 651 164 680 150C709 137 754 127 789 131C824 134 865 152 890 172C914 192 937 225 936 250Z'/><path d='M971 250C968 282 941 318 912 342C882 366 837 388 795 394C753 400 702 390 659 376C616 362 554 337 539 308C524 279 549 229 571 200C592 171 629 151 667 134C705 117 754 96 797 98C841 100 900 123 929 148C958 173 974 218 971 250Z'/><path d='M1019 250C1017 290 990 338 954 367C918 397 854 422 803 425C752 429 697 408 648 389C599 371 533 350 509 316C485 281 484 219 505 183C527 147 590 114 639 99C688 84 744 89 798 94C853 98 928 101 964 127C1001 153 1020 210 1019 250Z'/><path d='M1048 250C1039 294 992 330 952 366C913 402 872 454 813 467C755 481 655 473 601 449C546 424 501 366 486 322C471 278 490 228 511 185C532 142 562 88 611 65C661 42 744 40 810 46C876 52 967 67 1007 101C1047 135 1057 206 1048 250Z'/><path d='M1100 250C1111 301 1092 382 1045 422C998 462 890 490 819 491C748 492 680 455 617 429C554 402 475 378 442 333C409 289 395 209 420 161C445 112 527 69 594 43C661 17 755 -6 820 6C885 18 937 74 983 115C1030 156 1090 199 1100 250Z'/><path d='M1194 250C1203 306 1128 394 1066 435C1003 475 900 486 819 493C739 499 653 496 583 471C512 446 429 399 396 345C363 292 357 208 385 152C414 96 495 37 568 10C641 -16 750 -22 823 -6C896 9 945 58 1007 101C1069 144 1184 194 1194 250Z'/><path d='M1153 250C1161 313 1150 403 1096 453C1043 503 928 536 834 550C739 565 596 575 528 539C460 504 447 402 424 338C401 274 376 217 393 154C410 90 452 -4 526 -42C600 -79 751 -89 838 -69C925 -50 995 23 1048 76C1100 130 1145 187 1153 250Z'/><path d='M1197 250C1186 319 1129 381 1070 437C1011 493 940 561 843 587C745 613 562 632 485 592C409 553 405 424 382 349C360 274 327 207 351 143C376 79 448 3 530 -36C613 -76 743 -105 844 -95C945 -85 1078 -35 1137 22C1195 80 1208 181 1197 250Z'/><path d='M1320 250C1340 324 1266 451 1187 508C1108 565 952 592 844 595C737 597 635 561 540 525C445 488 319 444 275 377C230 310 239 201 274 123C310 45 392 -52 488 -89C583 -127 750 -128 846 -103C943 -77 987 6 1066 65C1145 124 1299 176 1320 250Z'/><path d='M1286 250C1272 327 1172 383 1102 457C1033 531 977 664 869 693C760 722 545 687 454 632C362 578 348 451 318 366C288 281 246 199 275 123C303 47 389 -41 487 -90C585 -140 747 -186 863 -172C980 -159 1116 -78 1187 -8C1257 63 1300 173 1286 250Z'/></g></svg>");
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 560;
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2rem); }
h3 { font-size: 1.3rem; }
h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 650; color: var(--muted); margin-top: 1.25rem; }

h1 em, h2 em { font-style: italic; color: var(--accent); font-weight: 480; }

p { margin: 0 0 1em; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

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

ul, ol { padding-left: 1.25rem; }
[role="list"] { list-style: none; padding: 0; margin: 0; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 10;
  background: var(--accent); color: var(--on-accent); padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

mark.todo {
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.05em 0.4em;
  border-radius: 4px;
}

.config-warning {
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.95rem;
  padding: 0.6rem var(--gutter);
  text-align: center;
}
.config-warning p { margin: 0; }

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header { border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark-mark {
  width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--accent);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.nav-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-size: 1.02rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 0.3rem 0; display: inline-block; border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--ink); }
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--lichen); }

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
.page .section { padding-left: 0; padding-right: 0; }

.section-head { margin-bottom: 1.25rem; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head::after {
  content: ""; display: block; width: 2.5rem; height: 3px; margin-top: 0.6rem;
  background: var(--lichen); border-radius: 3px;
}

.eyebrow {
  font-size: 0.95rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0.02em; margin-bottom: 1rem;
}

.lead { font-size: 1.25rem; color: var(--muted); max-width: 42rem; }

.page { padding-top: clamp(2.25rem, 6vw, 4rem); padding-bottom: 3rem; }
.page-head { margin-bottom: 2.5rem; }

.prose { max-width: 40rem; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(3.5rem, 11vw, 7rem) 0 clamp(3rem, 8vw, 5rem);
  border-bottom: 1px solid var(--rule);
  background-image: var(--contours);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.hero-title {
  font-size: clamp(2.7rem, 8vw, 5rem);
  font-weight: 520;
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 12ch;
  margin-bottom: 1.5rem;
}
.hero-grid { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; } }
.hero-portrait, .about-portrait {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--lichen);
  background: var(--accent-soft);
}
.hero-grid picture { order: -1; width: 12rem; }
@media (min-width: 56rem) { .hero-grid picture { order: 0; width: auto; } }
.about-portrait { max-width: 12rem; margin: 0 0 1.5rem 0.5rem; }
@media (min-width: 52rem) { .about-portrait { max-width: none; margin: 0.5rem 0 1.75rem; } }
.hero-intro { font-size: clamp(1.2rem, 2.2vw, 1.4rem); max-width: 34rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 600;
  padding: 0.7rem 1.35rem; border-radius: 999px;
  text-decoration: none; border: 1.5px solid var(--accent); cursor: pointer;
  overflow-wrap: anywhere; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  transition: border-color 0.15s, transform 0.15s;
}
.card p:last-of-type { margin-bottom: 0; }
.card:has(.card-link):hover { border-color: var(--lichen); }
@media (prefers-reduced-motion: no-preference) {
  .card:has(.card-link):hover { transform: translateY(-2px); }
}
.card-title { font-size: 1.35rem; margin-bottom: 0.35rem; }
.card-link { color: var(--ink); text-decoration: none; }
.card-link:hover { color: var(--ink); }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-more { font-weight: 600; color: var(--accent); margin-top: auto; padding-top: 1rem; }
.card-example { border-style: dashed; }

.meta {
  font-size: 0.98rem; font-weight: 600; color: var(--accent);
  display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-bottom: 0.9rem;
}
.meta-sep { color: var(--lichen); }

.badge {
  align-self: flex-start;
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.03em;
  background: var(--todo-bg); color: var(--todo-ink); padding: 0.15em 0.65em; border-radius: 999px;
  margin-bottom: 0.75rem;
}
.badge-muted { background: var(--accent-soft); color: var(--accent); margin: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-size: 0.95rem; background: var(--accent-soft); color: var(--ink);
  border-radius: 999px; padding: 0.2rem 0.8rem;
}
.tag mark.todo { font-size: inherit; padding: 0; background: none; color: inherit; }
.tag:has(mark.todo) { background: var(--todo-bg); color: var(--todo-ink); }
.tags-small { margin-top: 1rem; }
.tags-small .tag { font-size: 0.82rem; }

/* ── About ────────────────────────────────────────────────────────────── */

.about-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .about-grid { grid-template-columns: minmax(0, 1fr) 17rem; } }

.facts dl {
  margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.25rem 1.25rem;
}
.facts div { padding: 0.8rem 0; }
.facts div + div { border-top: 1px solid var(--rule); }
.facts dt { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }

.timeline { border-left: 2px solid var(--rule); margin-left: 0.3rem; }
.timeline li {
  position: relative; display: grid; gap: 0 1.5rem; padding: 0 0 1.6rem 1.6rem;
  grid-template-columns: minmax(0, 1fr);
}
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 0.5em; width: 12px; height: 12px;
  background: var(--lichen); border: 3px solid var(--bg); border-radius: 50%;
}
@media (min-width: 44rem) {
  .timeline li { grid-template-columns: 11rem minmax(0, 1fr); }
  .timeline-org { grid-column: 2; }
}
.timeline-period { font-size: 0.98rem; color: var(--muted); }
.timeline-role { font-family: var(--font-head); font-size: 1.15rem; font-weight: 560; }
.timeline-org { color: var(--muted); }

/* ── Skills ───────────────────────────────────────────────────────────── */

.skill-group { margin-bottom: 2.75rem; }
.skill-group > p { color: var(--muted); }

/* ── Services ─────────────────────────────────────────────────────────── */

.service { padding: 2.75rem 0; scroll-margin-top: 1rem; }
.service + .service { border-top: 1px solid var(--rule); }
.service .meta { font-size: 1.05rem; }
.service-body { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .service-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; } }
.service-side {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.35rem 1.6rem; align-self: start;
}
.service-side h3 { font-size: 1.15rem; }
.audience { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--muted); }
.audience strong { color: var(--ink); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.55em; width: 0.7rem; height: 0.7rem;
  background: var(--lichen); border-radius: 0 60% 0 60%;
}

.teaching { border-top: 1px solid var(--rule); margin-top: 1rem; }
.teaching-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.topics { margin: 0; padding-left: 1.5rem; }
.topics li::marker { color: var(--accent); font-weight: 600; }

/* ── Portfolio ────────────────────────────────────────────────────────── */

.entries li.entry {
  display: grid; gap: 0.25rem 1.5rem; grid-template-columns: minmax(0, 1fr);
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) { .entries li.entry { grid-template-columns: 9rem minmax(0, 1fr); } }
.entry-year { font-weight: 600; color: var(--accent); }
.entry-title { margin: 0; font-family: var(--font-head); font-size: 1.15rem; font-weight: 560; }
.entry-meta { margin: 0.2rem 0 0; color: var(--muted); font-size: 1rem; }

.empty-state {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-bottom: 1.25rem; color: var(--muted);
}
.empty-state p { margin: 0; }

/* ── Contact / CTA ────────────────────────────────────────────────────── */

.cta { border-top: 1px solid var(--rule); }

.email-block { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.5rem 0 0; }
.email-link {
  font-family: var(--font-head); font-weight: 540;
  font-size: clamp(1.35rem, 5vw, 2.1rem); letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.copy-btn {
  font: inherit; font-size: 0.95rem; font-weight: 600;
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--rule); border-radius: 999px;
  padding: 0.4rem 1rem; cursor: pointer; min-height: 2.5rem;
}
.copy-btn:hover { border-color: var(--accent); }
.copy-btn.is-copied { border-color: var(--accent); background: var(--accent-soft); }

.link-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.link-label { font-weight: 600; color: var(--muted); min-width: 7rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rule); margin-top: 2rem; font-size: 0.98rem; color: var(--muted); }
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0.75rem 2rem; padding-top: 1.75rem; padding-bottom: 2.25rem;
}
.footer-id { margin: 0; }
.footer-id strong { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }
.footer-legal div { display: flex; gap: 0.5rem; }
.footer-legal dt { font-weight: 600; }
.footer-legal dd { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ── Ask ──────────────────────────────────────────────────────────────── */

.section-ask { border-top: 1px solid var(--rule); background: var(--surface); }
.ask-form { max-width: 44rem; }
.ask-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.ask-form textarea {
  display: block; width: 100%; min-height: 8rem; resize: vertical;
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem;
}
.ask-form textarea:hover { border-color: var(--lichen); }
.ask-form textarea::placeholder { color: var(--muted); opacity: 1; }
.ask-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.ask-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; }
.ask-row .btn:disabled { opacity: 0.7; cursor: progress; }
.ask-count { font-size: 0.9rem; color: var(--muted); }
.ask-privacy { font-size: 0.95rem; color: var(--muted); margin-top: 1rem; max-width: 40rem; }
.ask-noscript { color: var(--muted); }

.ask-answer {
  max-width: 44rem; margin-top: 1.5rem; padding: 1.3rem 1.6rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--lichen);
}
.ask-answer.is-error { box-shadow: inset 4px 0 0 var(--muted); }
.ask-answer.is-error .ask-answer-label { display: none; }
.ask-answer-label { font-size: 0.85rem; font-weight: 650; color: var(--muted); margin-bottom: 0.6rem; }
.ask-answer-body p:last-child, .ask-answer-body ul:last-child { margin-bottom: 0; }
.ask-answer-body strong { color: var(--accent); }

.ask-pending { display: flex; gap: 0.35rem; height: 1.65em; align-items: center; }
.ask-pending span { width: 0.5rem; height: 0.5rem; background: var(--lichen); border-radius: 50%; opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .ask-pending span { animation: pulse 1s infinite; }
  .ask-pending span:nth-child(2) { animation-delay: 0.15s; }
  .ask-pending span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes pulse { 50% { opacity: 1; } }
}