/* =========================================================
   Dr. Stephen H. Pinkston — Personal & Professional Story
   Palette: charcoal-navy + warm copper + soft paper cream
   Type: Fraunces (display) / Inter (text)
   ========================================================= */

:root{
  --navy-950:#0A0F17;
  --navy-900:#0F1621;
  --navy-850:#141C2A;
  --navy-800:#1A2333;
  --navy-line:#2B384C;
  --navy-line-soft:#202A3A;

  --cream-text:#F0ECE3;
  --cream-soft:#C6CAD4;
  --cream-softer:#9498A6;

  --copper:#B07C43;
  --copper-bright:#C79A5B;
  --copper-dim:#8A6234;

  --paper:#F7F4EC;
  --paper-raised:#EEE8DB;
  --paper-line:#E1D9C7;

  --white:#FFFFFF;
  --ink:#1B1F27;
  --ink-soft:#4D5262;
  --ink-softer:#7C8092;

  --shadow-soft:0 18px 40px -20px rgba(10,15,23,0.35);
  --shadow-card:0 1px 0 rgba(23,27,36,0.04), 0 12px 28px -18px rgba(23,27,36,0.18);

  --radius-sm:3px;
  --radius-md:4px;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{ overflow-x:hidden; max-width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
img{ max-width:100%; display:block; height:auto; }
svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.14; margin:0; color:var(--ink); letter-spacing:-0.01em; }
p{ margin:0; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-999px; background:var(--copper-bright); color:var(--navy-950); padding:12px 18px; z-index:200; font-weight:600; border-radius:0 0 4px 0; }
.skip-link:focus{ left:0; top:0; }
:focus-visible{ outline:2px solid var(--copper-bright); outline-offset:3px; }

.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; font-size:0.92rem; font-weight:600; border:1px solid transparent;
  border-radius:var(--radius-sm); transition:transform .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-copper{ background:linear-gradient(180deg, var(--copper-bright), var(--copper)); color:var(--navy-950); box-shadow:0 10px 22px -12px rgba(176,124,67,0.5); }
.btn-copper:hover{ transform:translateY(-1px); }
.btn-ghost-dark{ border-color:rgba(240,236,227,0.35); color:var(--cream-text); }
.btn-ghost-dark:hover{ border-color:var(--copper-bright); color:var(--copper-bright); }
.btn-ghost-light{ border-color:var(--paper-line); color:var(--ink); }
.btn-ghost-light:hover{ border-color:var(--copper); color:var(--copper-dim); }
.btn-block{ display:flex; width:100%; }

/* Header */
.site-header{ position:sticky; top:0; z-index:100; background:#0C121C; border-bottom:1px solid var(--navy-line-soft); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand-name{ font-family:var(--font-display); font-size:1.28rem; color:var(--cream-text); font-weight:600; }
.brand-tag{ font-size:0.6rem; letter-spacing:0.14em; color:var(--copper-bright); font-weight:600; }
.nav-primary{ display:flex; align-items:center; }
.nav-dropdown{ display:flex; align-items:center; gap:32px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:0.9rem; color:var(--cream-soft); font-weight:500; padding:6px 0; border-bottom:1px solid transparent; }
.nav-links a:hover{ color:var(--cream-text); }
.nav-links a[aria-current="page"]{ color:var(--copper-bright); border-color:var(--copper-bright); }
.nav-toggle{ display:none; background:none; border:1px solid var(--navy-line); color:var(--cream-text); padding:8px; border-radius:var(--radius-sm); }
.nav-toggle svg{ width:22px; height:22px; }

/* Surfaces */
.on-dark{ background:var(--navy-900); color:var(--cream-text); position:relative; }
.on-navy{ background:var(--navy-850); color:var(--cream-text); }
.on-paper{ background:var(--paper); }
.on-white{ background:var(--white); }
.section{ padding:92px 0; }
.section-tight{ padding:50px 0; }
@media (max-width:780px){ .section{ padding:60px 0; } .section-tight{ padding:38px 0; } }

.hero, .page-hero{ position:relative; overflow:hidden; }
.hero-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(199,154,91,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(199,154,91,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 20%, black 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 80% 60% at 30% 20%, black 40%, transparent 85%);
}

.eyebrow{ font-size:0.72rem; letter-spacing:0.14em; font-weight:600; color:var(--copper-dim); }
.on-dark .eyebrow, .on-navy .eyebrow{ color:var(--copper-bright); }
.hero-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-eyebrow .line{ width:34px; height:1px; background:var(--copper-bright); display:inline-block; }
.lede{ font-size:1.08rem; color:var(--cream-soft); max-width:58ch; margin-top:18px; }
.on-paper .lede, .on-white .lede{ color:var(--ink-soft); }

/* Hero */
.hero{ padding:74px 0 56px; }
.hero-inner{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
.hero h1{ font-size:clamp(2rem, 3.8vw, 2.95rem); color:var(--cream-text); max-width:18ch; }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.portrait-hero .frame{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--paper-line); box-shadow:var(--shadow-card); background:var(--paper-raised); }
.portrait-hero .frame img{ width:100%; object-fit:cover; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px; padding-top:36px; border-top:1px solid var(--navy-line-soft); }
.stat .num{ font-family:var(--font-display); font-size:2.2rem; color:var(--copper-bright); font-weight:600; }
.stat .cap{ font-size:0.84rem; color:var(--cream-soft); margin-top:4px; }

/* Page hero */
.page-hero{ padding:64px 0 54px; }
.breadcrumb{ font-size:0.78rem; color:var(--cream-softer); margin-bottom:16px; }
.breadcrumb a{ color:var(--cream-soft); }
.breadcrumb a:hover{ color:var(--copper-bright); }
.breadcrumb .sep{ margin:0 8px; opacity:0.6; }
.page-hero h1{ margin-top:12px; font-size:clamp(1.85rem, 3.2vw, 2.5rem); color:var(--cream-text); max-width:22ch; }

/* Grids */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.section-head{ margin-bottom:36px; }
.section-head h2{ font-size:clamp(1.45rem,2.4vw,1.95rem); margin-top:8px; max-width:22ch; }

/* Notice box / disclaimer */
.notice-box{ border:1px solid var(--navy-line); background:var(--navy-800); color:var(--cream-soft); padding:20px 22px; border-radius:var(--radius-md); font-size:0.9rem; line-height:1.6; }
.notice-box.on-light{ background:var(--paper-raised); border-color:var(--paper-line); color:var(--ink-soft); }

/* Timeline */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{ padding:0 0 26px 26px; border-left:2px solid var(--paper-line); position:relative; margin-left:4px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--copper); }
.timeline-item .years{ font-size:0.74rem; letter-spacing:0.08em; color:var(--copper-dim); font-weight:700; margin-bottom:6px; }
.timeline-item h3{ font-size:1.04rem; margin-bottom:6px; }
.timeline-item p{ color:var(--ink-soft); font-size:0.93rem; }

/* Interest tags / highlight list */
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ border:1px solid var(--paper-line); background:var(--white); color:var(--ink-soft); padding:8px 16px; border-radius:20px; font-size:0.85rem; font-weight:500; }

.cred-list{ display:flex; flex-direction:column; gap:14px; }
.cred-item{ display:flex; justify-content:space-between; align-items:center; gap:18px; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius-md); padding:18px 22px; }
.cred-item .name{ font-weight:600; font-size:0.98rem; color:var(--ink); }
.cred-item .desc{ color:var(--ink-softer); font-size:0.85rem; margin-top:4px; max-width:60ch; }
.badge{ font-size:0.68rem; letter-spacing:0.08em; font-weight:700; color:var(--copper-dim); border:1px solid var(--paper-line); padding:6px 12px; border-radius:20px; white-space:nowrap; }

/* FAQ accordion */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--paper-line); background:var(--white); border-radius:var(--radius-md); padding:4px 22px; box-shadow:var(--shadow-card); }
.faq-item summary{ cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); padding:18px 28px 18px 0; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:0; top:16px; font-size:1.3rem; color:var(--copper); font-family:var(--font-body); transition:transform .2s ease; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item .faq-answer{ padding:0 0 20px; color:var(--ink-soft); font-size:0.95rem; line-height:1.7; }
.faq-item .faq-answer p{ margin:0; }

/* Gallery */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.photo-grid figure{ margin:0; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--paper-line); box-shadow:var(--shadow-card); background:var(--white); }
.photo-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.photo-grid figcaption{ padding:12px 14px; font-size:0.82rem; color:var(--ink-softer); }

/* CTA band */
.cta-band{ background:var(--navy-950); padding:60px 0; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.35rem,2.2vw,1.8rem); max-width:26ch; color:var(--cream-text); }

/* Footer */
.site-footer{ background:var(--navy-950); color:var(--cream-soft); padding:60px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; }
.footer-brand p{ margin-top:10px; color:var(--cream-softer); font-size:0.87rem; max-width:34ch; }
.site-footer h4{ font-family:var(--font-body); font-size:0.68rem; letter-spacing:0.12em; color:var(--copper-bright); margin-bottom:12px; }
.site-footer ul{ display:flex; flex-direction:column; gap:8px; }
.site-footer ul a{ font-size:0.87rem; color:var(--cream-soft); }
.site-footer ul a:hover{ color:var(--copper-bright); }
.rule{ border:none; border-top:1px solid var(--navy-line-soft); margin:40px 0 22px; }
.footer-disclaimer{ font-size:0.76rem; color:var(--cream-softer); line-height:1.65; max-width:98ch; }
.footer-legal{ display:flex; justify-content:space-between; margin-top:16px; font-size:0.8rem; color:var(--cream-softer); flex-wrap:wrap; gap:10px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.contact-channel{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.contact-channel .ico{ width:38px; height:38px; border-radius:50%; border:1px solid var(--navy-line); display:flex; align-items:center; justify-content:center; color:var(--copper-bright); flex-shrink:0; }
.contact-channel .ico svg{ width:18px; height:18px; }
.contact-channel .label{ font-size:0.68rem; letter-spacing:0.1em; color:var(--cream-softer); font-weight:600; }
.contact-channel .value{ font-size:0.98rem; color:var(--cream-text); margin-top:4px; }
.contact-channel .value a:hover{ color:var(--copper-bright); }

/* Floating contact (email only) */
.floating-contacts{ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; flex-direction:column; gap:12px; }
.fc-btn{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 22px -8px rgba(10,15,23,0.45); transition:transform .18s ease; }
.fc-btn svg{ width:24px; height:24px; }
.fc-btn:hover{ transform:translateY(-3px) scale(1.05); }
.fc-mail{ background:linear-gradient(180deg, var(--copper-bright), var(--copper)); color:var(--navy-950); }
@media (max-width:780px){ .floating-contacts{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); } .fc-btn{ width:46px; height:46px; } .fc-btn svg{ width:20px; height:20px; } }

/* Reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; gap:36px; }
  .grid-2{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:30px; }
  .contact-grid{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px){
  .wrap{ padding:0 20px; }
  .site-header .wrap{ height:70px; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .nav-dropdown{ position:fixed; inset:70px 0 0 0; background:var(--navy-950); flex-direction:column; align-items:flex-start; padding:28px 24px; gap:24px; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; }
  .nav-primary.is-open .nav-dropdown{ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:18px; width:100%; }
  .nav-links a{ font-size:1.05rem; width:100%; }
  .stat-row{ grid-template-columns:1fr; gap:18px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-legal{ flex-direction:column; align-items:flex-start; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .photo-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .hero{ padding:48px 0 36px; }
  h1{ font-size:1.75rem !important; }
  .btn{ padding:12px 20px; font-size:0.88rem; }
  .photo-grid{ grid-template-columns:1fr; }
}