/* Shared finishing layer: editorial spacing, keyboard access, and small screens. */
:root { --faint: #74644f; }
html { scroll-padding-top: 110px; }
body { overflow-wrap: break-word; }
button, input, textarea, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .6; }
button, a { touch-action: manipulation; }
::selection { background: #d6e6dd; color: #174a46; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--teal); color: white; padding: 14px 22px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { background: rgba(250,245,236,.96); }
.brand { letter-spacing: -.035em; }
.tab { color: var(--muted); transition: color .2s, background .2s; }
.tab:hover { color: var(--teal); background: rgba(30,92,87,.05); }
.hero { padding-top: 90px; padding-bottom: 96px; }
.hero-title { font-size: clamp(42px,5.2vw,66px); letter-spacing: -.045em; line-height: 1.06; }
.hero-lede { line-height: 1.8; }
.hero-photo { isolation: isolate; }
.hero-photo::before { content: ''; position: absolute; inset: -35px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #e6d8bd 0%, transparent 68%); }
.portrait { background: #e9dfc9; box-shadow: 0 24px 60px #49361b14; }
.portrait-placeholder { flex-direction: column; gap: 24px; background: repeating-linear-gradient(90deg, transparent 0 39px, #fff4 40px), linear-gradient(150deg, #e8dfcc, #d1dace); }
.portrait-placeholder::before { content: ''; position: absolute; inset: 22px; border: 1px solid #fff8; border-radius: 220px 220px 12px 12px; }
.portrait-monogram { font-family: 'Marcellus',serif; font-size: clamp(100px,12vw,160px); font-weight: 400; line-height: 1; letter-spacing: -.08em; color: var(--teal); }
.portrait-caption { font-size: 9px; letter-spacing: .22em; color: var(--teal); }
.section-title { letter-spacing: -.025em; }
.card { box-shadow: 0 8px 24px #49361b06; transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px #49361b10; } }
.card-copy, .quote-copy { line-height: 1.8; }
.philosophy { position: relative; }
.philosophy-quote { text-wrap: balance; }
.contact-card { box-shadow: 0 16px 48px #49361b0c; }
.contact-form label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.contact-form input, .contact-form textarea { font-size: 16px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn { min-height: 44px; }
.gallery-zoom { width: 100%; display: block; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.photo-dialog { width: min(960px,94vw); max-height: 92dvh; border: 1px solid var(--line); border-radius: 16px; padding: 52px 20px 16px; background: var(--cream-sheet); color: var(--ink); }
.photo-dialog::backdrop { background: #17231ee0; backdrop-filter: blur(5px); }
.photo-dialog img { display: block; max-width: 100%; max-height: 70dvh; margin: auto; object-fit: contain; }
.photo-dialog p { text-align: center; margin: 16px 0 0; }
.photo-close { position: absolute; right: 8px; top: 4px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; color: var(--ink); cursor: pointer; }
.admin-tabs { position: sticky; top: 67px; z-index: 30; background: var(--sand-deep); padding-bottom: 10px; }
.admin-tab { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 44px; }
.admin-tab.is-active { color: white; background: var(--teal); border-color: var(--teal); }
.admin-card { border-radius: 16px; }
.editor-save-state { color: var(--rust-dark); font-size: 13px; padding: 8px 0; }
.admin-section input, .admin-section textarea { scroll-margin-top: 180px; }
@media (max-width: 900px) {
  .hero { padding-top: 54px; gap: 56px; }
  .hero-copy { max-width: 660px; }
  .hero-photo { max-width: 310px; }
}
@media (max-width: 720px) {
  .header-inner { padding: 16px 16px 0; }
  .tabs { width: 100%; justify-content: center; gap: 0; }
  .tab { font-size: 11px; letter-spacing: 0; padding: 14px 9px; min-height: 44px; }
  .hero { padding: 42px 24px 70px; }
  .hero-title { font-size: clamp(38px,10.5vw,54px); }
  .hero-lede { font-size: 16px; }
  .greetings { gap: 20px; }
  .greeting-word { font-size: 19px; }
  .hero-photo { width: calc(100% - 34px); }
  .split, .band-inner, .gallery-section { padding-left: 24px; padding-right: 24px; }
  .split { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .card-grid { grid-template-columns: minmax(0,1fr); }
  .section-title { font-size: 30px; }
  .resume-toolbar { flex-wrap: wrap; gap: 10px; }
  .sheet { padding: 30px 20px; }
  .job-head { flex-wrap: wrap; gap: 4px; }
  .job-dates { white-space: normal; }
  .contact-email { font-size: clamp(16px,4.7vw,24px); overflow-wrap: anywhere; }
  .admin-header { position: static; }
  .admin-tabs { top: 0; padding: 12px 16px; flex-wrap: nowrap; overflow-x: auto; }
  .admin-tab { flex-shrink: 0; }
  .admin-main { padding: 0 16px 48px; }
  .admin-header-inner { padding: 16px; }
  .admin-brand { flex-wrap: wrap; gap: 6px; }
  .auth-screen { padding: 20px; }
  .auth-card { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .skip-link, .photo-dialog, .preview-banner { display: none !important; }
  .sheet-section { break-inside: auto; }
  .sheet-heading { break-after: avoid; }
}