/* ==========================================================================
   Dustin J. Stephens, site styles
   Palette: forest green, warm paper, brass gold. Type: DM Serif Display,
   Inter, Cormorant Garamond (italic accents).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink:        #0B1A12;
  --forest:     #10241A;
  --forest-2:   #17301F;

  --paper:      #F8F6F2;
  --paper-2:    #F1EDE6;
  --white:      #FFFFFF;

  --text:       #23211E;
  --muted:      #5B564F;
  --faint:      #8F8982;

  --gold:       #B08C52;
  --gold-deep:  #8A6B38;   /* small text on light backgrounds */
  --gold-soft:  #C9A96E;   /* small text on dark backgrounds */
  --gold-hover: #9A7944;

  --line:        rgba(11, 26, 18, 0.10);
  --line-strong: rgba(11, 26, 18, 0.20);
  --line-dark:   rgba(255, 255, 255, 0.10);

  --on-dark:       rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.64);
  --on-dark-faint: rgba(255, 255, 255, 0.42);

  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --accent:  'Cormorant Garamond', Georgia, serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 72px;
  --max: 1160px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Topographic contour texture, used at low opacity on dark surfaces */
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23C9A96E' stroke-width='1.1'%3E%3Cpath d='M819 400C818 415 815 431 810 445C806 460 800 474 793 488C787 502 780 515 772 528C764 541 756 554 748 566C739 579 730 591 719 602C709 613 698 624 685 634C673 643 660 652 645 658C631 665 615 670 600 674C584 678 568 680 552 681C537 683 521 682 506 682C491 682 476 681 462 680C448 679 434 679 420 679C406 678 392 678 378 678C364 678 350 678 336 677C321 676 306 674 292 671C278 668 264 663 252 656C239 650 227 642 218 632C208 623 200 611 193 600C186 588 182 576 177 564C173 552 171 540 167 528C164 517 161 506 157 496C152 486 147 476 140 466C134 456 125 446 116 435C108 424 97 413 88 400C79 387 68 373 61 358C54 344 47 327 44 311C41 295 40 278 42 262C44 246 50 230 57 216C65 201 75 187 87 175C99 163 113 152 127 142C142 133 158 125 174 117C189 110 206 104 223 99C239 95 256 91 273 88C290 86 308 85 324 86C341 87 358 89 374 93C390 97 406 103 420 111C434 118 448 128 459 137C471 146 481 157 491 167C501 176 508 186 517 195C525 203 532 210 541 215C550 221 559 225 570 228C581 231 594 232 608 235C622 237 638 238 654 242C671 245 689 249 706 255C722 261 740 269 754 278C768 288 782 300 792 312C802 325 809 340 814 354C818 369 819 385 819 400Z'/%3E%3Cpath d='M772 394C772 407 769 420 765 433C762 446 756 458 751 470C746 482 739 494 733 505C726 516 719 527 712 538C704 548 696 559 687 569C679 578 669 588 658 596C648 604 636 611 624 617C611 623 598 628 585 631C572 635 557 637 544 638C530 639 517 639 504 639C491 639 478 639 466 638C453 638 441 637 429 637C417 637 405 637 393 637C381 636 368 636 356 635C343 634 330 633 318 630C306 627 294 622 283 617C272 611 262 604 253 596C245 588 237 578 231 568C225 558 221 547 217 537C213 527 211 516 208 507C205 497 202 488 198 478C194 469 190 461 184 452C178 443 171 435 164 425C157 415 148 405 140 394C133 383 125 371 119 358C113 345 108 332 105 318C103 304 102 289 105 276C107 262 111 248 118 236C124 224 133 212 143 201C153 191 166 181 178 173C190 165 204 157 217 151C231 145 245 140 259 135C274 131 288 128 303 126C317 123 332 122 347 123C361 123 376 125 389 128C403 132 417 137 429 143C442 149 453 156 464 164C474 172 483 181 492 189C500 197 507 205 515 212C522 219 529 225 537 230C545 235 553 238 562 241C572 245 583 246 595 248C607 251 621 252 634 256C648 259 664 262 678 268C692 274 706 280 718 289C730 297 741 308 750 319C758 330 764 342 768 355C772 368 773 381 772 394Z'/%3E%3Cpath d='M725 388C725 399 722 410 719 421C716 431 712 442 708 452C703 462 698 472 693 481C687 490 681 500 675 509C669 518 662 526 655 534C647 543 639 550 630 557C622 564 612 570 602 576C591 581 580 585 569 588C558 591 546 592 535 594C524 595 512 595 501 595C490 595 480 595 469 595C459 594 449 594 438 594C428 594 418 594 408 593C397 593 387 593 376 592C366 591 355 590 345 587C335 584 324 581 315 576C306 571 297 565 290 559C283 552 276 544 271 536C266 527 262 518 259 510C255 501 253 492 250 484C247 476 245 468 241 460C238 452 234 445 230 438C225 430 219 423 213 414C208 406 201 398 195 388C189 379 182 369 178 358C173 347 169 336 167 324C166 313 166 301 167 290C169 278 173 267 179 256C184 246 192 236 200 228C209 219 219 211 229 204C239 197 250 191 261 185C273 180 285 176 296 172C308 168 320 165 332 163C345 162 357 160 369 161C381 161 393 162 405 165C416 167 428 171 438 176C449 181 459 187 468 193C476 199 484 206 492 213C499 219 505 226 512 232C519 238 524 243 531 247C538 251 545 254 553 257C561 260 570 261 580 263C590 266 602 267 613 270C624 274 637 277 648 282C659 287 671 293 681 300C691 307 700 316 707 325C713 334 718 345 721 356C724 366 725 377 725 388Z'/%3E%3Cpath d='M676 382C676 391 674 400 672 409C670 417 667 425 663 433C660 441 655 449 651 457C647 464 642 472 637 479C632 486 627 493 621 500C615 506 609 512 601 518C594 523 587 529 578 533C570 537 561 540 553 543C544 545 534 547 525 548C516 549 507 549 498 550C490 550 481 549 472 549C464 549 456 549 448 549C439 549 431 549 423 548C414 548 406 548 397 547C389 546 380 545 372 543C364 541 356 538 348 534C341 530 334 525 328 520C322 514 317 508 312 502C308 495 305 488 302 481C299 474 297 467 294 460C292 454 290 447 287 441C284 435 281 429 278 423C274 416 269 410 265 404C261 397 255 390 251 382C246 375 242 367 238 358C235 350 232 340 231 331C230 322 230 313 231 304C233 295 236 286 241 277C245 269 251 261 258 254C264 247 272 241 280 235C288 230 297 225 306 221C315 216 325 213 334 210C343 207 353 204 363 202C372 201 382 200 392 200C402 200 411 201 421 203C430 204 439 207 447 211C456 214 464 219 471 224C479 229 485 234 491 239C497 244 503 249 508 254C513 258 518 262 524 266C530 269 535 272 542 274C549 277 556 278 564 280C572 282 581 284 589 287C598 289 608 292 617 296C626 301 635 306 642 311C650 317 657 324 662 332C667 339 671 348 674 356C676 365 677 374 676 382Z'/%3E%3Cpath d='M626 377C626 383 625 390 623 396C621 402 619 408 616 414C614 420 611 426 608 432C605 437 601 443 597 448C594 453 590 459 585 464C581 468 576 473 571 477C566 481 560 485 554 488C548 491 541 494 535 496C528 498 521 499 515 500C508 501 501 501 495 502C488 502 482 502 475 502C469 502 463 502 457 501C450 501 444 501 438 501C432 501 425 501 419 500C413 499 406 498 400 496C394 495 388 493 382 490C377 487 372 483 367 479C363 475 359 471 355 466C352 461 349 456 347 451C345 446 343 440 341 435C339 430 338 426 336 421C333 416 331 412 329 407C326 402 323 398 320 393C316 388 313 382 310 377C307 371 303 365 301 359C299 352 297 346 296 339C295 332 296 325 297 318C298 312 301 305 304 299C307 293 312 287 317 282C322 277 327 272 333 268C339 264 346 260 352 257C359 254 366 251 373 249C380 246 387 244 394 243C401 242 408 241 415 241C422 241 430 241 437 243C444 244 450 246 457 248C463 251 469 254 475 257C480 261 485 265 490 268C494 272 498 276 503 279C507 282 511 285 515 288C519 290 524 292 529 294C534 296 539 297 545 299C551 301 557 302 563 305C570 307 577 309 583 312C590 316 596 319 602 324C607 328 612 334 616 339C620 345 622 351 624 357C626 364 626 370 626 377Z'/%3E%3Cpath d='M572 371C572 375 571 379 570 383C569 387 568 391 566 394C564 398 563 402 561 405C559 409 557 412 554 416C552 419 549 422 547 425C544 428 541 431 538 434C534 437 531 439 527 441C523 443 519 445 515 446C511 447 507 448 502 449C498 449 494 450 490 450C486 450 482 450 478 450C474 450 470 450 466 450C462 450 458 450 454 450C450 450 446 449 442 449C438 448 434 448 430 447C426 446 422 444 419 442C415 441 412 438 409 436C406 433 404 430 402 427C399 424 398 421 396 418C395 415 393 411 392 408C391 405 390 402 388 399C387 396 386 393 384 390C382 387 381 384 379 381C377 378 375 374 373 371C371 367 369 363 368 359C367 356 365 351 365 347C365 343 365 339 366 334C367 330 368 326 371 322C373 319 375 315 378 312C381 309 385 306 389 303C392 300 396 298 401 296C405 294 409 292 413 291C418 289 422 288 426 287C431 286 435 286 440 286C444 285 449 286 453 286C458 287 462 288 466 290C470 291 474 293 477 295C481 297 484 299 487 301C490 304 493 306 495 308C498 310 501 312 504 313C506 315 509 316 512 318C515 319 519 320 522 321C526 322 530 323 534 325C538 326 542 328 546 330C550 332 554 335 557 338C560 340 563 344 566 347C568 351 570 355 571 359C572 363 572 367 572 371Z'/%3E%3Cpath d='M504 365C504 366 503 367 503 368C503 369 503 370 502 371C502 372 501 373 501 374C500 375 500 376 499 377C498 378 498 379 497 380C496 381 495 381 494 382C494 383 493 384 492 384C491 385 489 385 488 385C487 386 486 386 485 386C484 386 483 387 482 387C480 387 479 387 478 387C477 387 476 387 475 387C474 387 473 387 472 387C471 387 470 386 469 386C467 386 466 386 465 386C464 385 463 385 462 385C461 384 460 383 460 383C459 382 458 381 457 380C457 380 456 379 456 378C455 377 455 376 455 375C454 374 454 374 454 373C453 372 453 371 452 370C452 369 452 369 451 368C451 367 450 366 450 365C449 364 449 363 448 362C448 361 448 360 448 359C448 357 448 356 448 355C448 354 449 353 449 352C450 351 451 350 451 349C452 348 453 347 454 347C455 346 456 345 457 345C458 344 460 344 461 343C462 343 463 343 464 342C466 342 467 342 468 342C469 342 470 342 472 342C473 342 474 342 475 343C476 343 477 344 478 344C479 345 480 345 481 346C482 346 482 347 483 348C484 348 485 349 486 349C486 349 487 350 488 350C489 351 490 351 491 351C492 352 493 352 494 352C495 353 496 353 497 354C498 354 499 355 500 356C501 357 501 358 502 359C503 360 503 361 503 362C504 363 504 364 504 365Z'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
strong { font-weight: 600; }

::selection { background: rgba(176, 140, 82, 0.28); color: var(--ink); }

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

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 10001;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow.plain::before { display: none; }
.on-dark .eyebrow, .eyebrow.light { color: var(--gold-soft); }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 34em;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section.tight { padding-top: clamp(3rem, 6vw, 5rem); }

.band { background: var(--paper-2); }
.band-dark {
  position: relative;
  background: var(--forest);
  color: var(--on-dark);
  overflow: hidden;
}

/* ---------- Section header ---------- */
.sh { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sh .eyebrow { margin-bottom: 1rem; }
.sh-title {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sh.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  align-items: end;
}
.sh.split p { color: var(--muted); max-width: 34em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  height: var(--nav-h);
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11, 26, 18, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line-dark);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-brand svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-brand:hover { opacity: 0.8; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-links a {
  position: relative;
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--white); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-icon {
  position: relative;
  display: block;
  width: 22px; height: 14px;
}
.nav-toggle-icon span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.25s, top 0.35s var(--ease), bottom 0.35s var(--ease);
}
.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-icon span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  min-height: 100svh;
  padding: calc(var(--nav-h) + 4rem) 0 5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 45%, rgba(176, 140, 82, 0.10), transparent 65%),
    radial-gradient(ellipse 50% 70% at 10% 90%, rgba(23, 48, 31, 0.9), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: 50%; right: -6%;
  transform: translateY(-50%);
  width: min(1000px, 90vw);
  aspect-ratio: 1;
  background: var(--contours) center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.hero .eyebrow { margin-bottom: 1.75rem; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.75rem;
}
.hero-sub {
  color: var(--on-dark-muted);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  max-width: 32em;
  margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--on-dark-faint);
}
.hero-meta li { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero-meta li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.8;
}

/* Portrait with offset frame */
.portrait {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 380px;
}
.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(16px, 16px);
  border: 1px solid rgba(176, 140, 82, 0.55);
  border-radius: 4px;
  pointer-events: none;
}
.portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  filter: saturate(0.96);
}

/* ---------- Page header (sub-pages) ---------- */
.page-header {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 85% 50%, rgba(176, 140, 82, 0.08), transparent 70%);
  pointer-events: none;
}
.page-header::after {
  content: '';
  position: absolute;
  top: -40%; right: -8%;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  background: var(--contours) center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header .eyebrow { margin-bottom: 1.25rem; }
.page-header h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.page-header .lede { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.75rem;
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.5); }
.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn svg { width: 14px; height: 14px; }

/* ---------- Intro statement ---------- */
.statement {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem 4rem;
  align-items: start;
}
.statement-text {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 28em;
}

/* ---------- Strength grid (shared hairlines) ---------- */
.grid-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  position: relative;
  background: var(--paper-2);
  padding: 2.5rem 2rem 2.75rem;
  transition: background 0.3s;
}
.band .cell { background: var(--paper-2); }
.cell:hover { background: var(--paper); }
.cell-index {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: 2.5rem;
}
.cell h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.cell p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Closing band (home) ---------- */
.closing { padding: clamp(5rem, 10vw, 8rem) 0; }
.closing::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: min(700px, 80vw);
  aspect-ratio: 1;
  background: var(--contours) center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.closing .container { position: relative; z-index: 1; }
.closing-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem 5rem;
  align-items: end;
}
.closing-quote {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.3;
  color: var(--white);
  max-width: 20em;
}
.closing-quote::before {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--gold);
  margin-bottom: 2rem;
}
.closing .eyebrow { margin-bottom: 1.25rem; }
.closing-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.closing-text {
  color: var(--on-dark-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 30em;
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ---------- Experience: roles ---------- */
.roles { border-top: 1px solid var(--line-strong); }
.role {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem 4rem;
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.role-when { padding-top: 0.35rem; }
.role-dates {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.75rem;
}
.role-org {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.4;
}
.role-loc {
  display: block;
  font-size: 0.86rem;
  color: var(--faint);
  margin-top: 0.15rem;
}
.role-note {
  display: block;
  margin-top: 0.85rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--gold);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}
.role-title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.role-bullets li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.role-bullets li:last-child { margin-bottom: 0; }
.role-bullets li::before {
  content: '';
  position: absolute; left: 0; top: 0.78em;
  width: 6px; height: 1px;
  background: var(--gold);
}

/* ---------- Spec rows (skills, education, contact) ---------- */
.spec { border-top: 1px solid var(--line-strong); }
.spec-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0.75rem 4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-row dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 0.3rem;
}
.spec-row dd {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text);
}
.spec-row dd .sub {
  display: block;
  color: var(--faint);
  font-size: 0.88rem;
  margin-top: 0.1rem;
}
.spec-row dd a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s, color 0.25s;
}
.spec-row dd a:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ---------- About ---------- */
.about-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.about-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.about-aside img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 2rem;
}
.facts { border-top: 1px solid var(--line-strong); }
.facts > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}
.facts dd {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

.essay { max-width: 42em; }
.essay p {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.6rem;
}
.essay p:first-of-type {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 1.8rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 2.25rem;
}
.essay p:last-child { margin-bottom: 0; }
.essay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem;
  align-items: start;
}
.contact-layout .spec-row { grid-template-columns: 120px 1fr; gap: 0.5rem 2rem; }
.contact-primary .eyebrow { margin-bottom: 1.25rem; }
.contact-email {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.2rem;
  transition: color 0.25s, border-color 0.25s;
  overflow-wrap: anywhere;
}
.contact-email:hover { color: var(--gold-deep); }
.contact-note {
  color: var(--muted);
  max-width: 30em;
  margin-top: 1.5rem;
  line-height: 1.7;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--on-dark-muted);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.footer-tag {
  font-size: 0.9rem;
  color: var(--on-dark-faint);
  max-width: 26em;
  line-height: 1.6;
}
.footer h4 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}
.footer li + li { margin-top: 0.6rem; }
.footer li a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.25s;
}
.footer li a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  font-size: 0.78rem;
  color: var(--on-dark-faint);
}

/* ---------- Motion ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-photo {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: 0.08s; }
.js .reveal-d2 { transition-delay: 0.16s; }
.js .reveal-d3 { transition-delay: 0.24s; }
.js .reveal-d4 { transition-delay: 0.32s; }

.hero-text > *, .page-header .container > * { animation: rise 0.8s var(--ease) both; }
.hero-text > *:nth-child(1), .page-header .container > *:nth-child(1) { animation-delay: 0.1s; }
.hero-text > *:nth-child(2), .page-header .container > *:nth-child(2) { animation-delay: 0.2s; }
.hero-text > *:nth-child(3), .page-header .container > *:nth-child(3) { animation-delay: 0.3s; }
.hero-text > *:nth-child(4) { animation-delay: 0.4s; }
.hero-text > *:nth-child(5) { animation-delay: 0.5s; }
.portrait { animation: rise-photo 1s var(--ease) 0.25s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-lines { grid-template-columns: repeat(2, 1fr); }
  .role, .spec-row { grid-template-columns: 200px 1fr; gap: 1.5rem 2.5rem; }
  .about-layout { grid-template-columns: 240px 1fr; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 4rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero::after { top: auto; bottom: -20%; right: -30%; width: 120vw; opacity: 0.08; }
  .portrait { order: -1; justify-self: start; max-width: 200px; }
  .portrait::before { transform: translate(10px, 10px); }
  .portrait img { aspect-ratio: 1; object-position: center 12%; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 4rem); }

  .statement { grid-template-columns: 1fr; gap: 1.25rem; }
  .sh.split { grid-template-columns: 1fr; align-items: start; }
  .closing-grid { grid-template-columns: 1fr; align-items: start; }
  .closing-actions { justify-content: flex-start; }

  .role, .spec-row { grid-template-columns: 1fr; gap: 0.75rem 0; }
  .role-when { padding-top: 0; }
  .role-org { display: inline; }
  .role-loc { display: inline; }
  .role-loc::before { content: ' · '; }

  .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-aside { position: static; display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: start; }
  .about-aside img { margin-bottom: 0; }

  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    z-index: 9010;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(11, 26, 18, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s, visibility 0.3s;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 1rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-links a::after { display: none; }
  .nav.scrolled, body.nav-open .nav { background: rgba(11, 26, 18, 0.97); }
}

@media (max-width: 600px) {
  .grid-lines { grid-template-columns: 1fr; }
  .cell { padding: 2rem 1.5rem 2.25rem; }
  .cell-index { margin-bottom: 1.5rem; }
  .hero-actions .btn, .closing-actions .btn, .essay-actions .btn, .contact-actions .btn { flex: 1 1 auto; }
  .about-aside { grid-template-columns: 1fr; }
  .about-aside img { max-width: 220px; }
  .footer-grid { grid-template-columns: 1fr; }
}