/* ==========================================================================
   Crick Waters — crick.co.com
   Shared stylesheet
   Design system: submarine control-panel precision meets warm craft.
   Ink-navy + blueprint grid for the professional track,
   parchment + photos for the personal track,
   brass as the signature accent throughout.
   ========================================================================== */

:root{
  --ink:#16232E;
  --steel:#3D5A70;
  --brass:#C08A3E;
  --parchment:#F3EEE4;
  --verdigris:#4E675D;
  --ember:#A24825;
  --cream:#FBF8F2;
  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth; background:var(--cream); height:100%;}

body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > main{ flex:1 0 auto; }
body > footer.site-footer{ flex-shrink:0; }

a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:500;
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--brass); color:var(--ink);
  padding:10px 16px; z-index:100;
  font-family:var(--mono); font-size:0.8rem;
}
.skip-link:focus{ left:16px; top:16px; }

/* ===== NAV ===== */
nav.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid rgba(192,138,62,0.3);
  padding:18px 32px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
nav.site-nav .logo{
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--cream);
  letter-spacing:0.02em;
}
nav.site-nav .navlinks{ display:flex; gap:24px; flex-wrap:wrap; }
nav.site-nav .navlinks a{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(251,248,242,0.75);
  transition:color 0.2s;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
}
nav.site-nav .navlinks a:hover,
nav.site-nav .navlinks a[aria-current="page"]{
  color:var(--brass); border-color:var(--brass);
}

/* ===== HERO (index only) ===== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  padding:88px 32px 72px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(192,138,62,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,138,62,0.09) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 85%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr 0.9fr;
  gap:64px;
  align-items:center;
}
.hero-eyebrow{ color:var(--brass); margin-bottom:18px; }
.hero h1{
  font-family:var(--display);
  font-weight:450;
  font-size:clamp(2.6rem, 5vw, 4.1rem);
  line-height:1.03;
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.hero .tagline{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:28px;
}
.hero p{
  font-size:1.02rem;
  color:rgba(251,248,242,0.86);
  max-width:56ch;
  margin-bottom:16px;
}
.cta-row{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:14px 22px;
  border-radius:2px;
  display:inline-block;
  transition:all 0.2s;
  border:1px solid var(--brass);
  cursor:pointer;
  background:none;
}
.btn-primary{ background:var(--brass); color:var(--ink); font-weight:500; }
.btn-primary:hover{ background:#d69c52; }
.btn-ghost{ color:var(--cream); border-color:rgba(251,248,242,0.35); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }

.portrait-frame{
  position:relative;
  width:min(340px, 100%);
  margin:0 auto;
}
.portrait-ring{
  position:absolute; inset:-14px;
  border:1px solid rgba(192,138,62,0.55);
  border-radius:50%;
}
.portrait-ring::before{
  content:"";
  position:absolute; inset:8px;
  border:1px dashed rgba(192,138,62,0.3);
  border-radius:50%;
}
.portrait-img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:50%;
  border:3px solid var(--brass);
  filter:grayscale(8%) contrast(1.02);
}
.bolt{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 0 2px rgba(22,35,46,0.6);
}

/* ===== GAUGES (signature element) ===== */
.gauges{
  background:var(--ink);
  padding:0 32px 84px;
  position:relative;
}
.gauge-strip{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
  border-top:1px solid rgba(192,138,62,0.25);
  padding-top:52px;
}
.gauge{ text-align:center; }
.gauge svg{ width:100%; max-width:128px; }
.gauge-label{
  margin-top:10px;
  color:rgba(251,248,242,0.65);
  font-size:0.68rem;
}

/* ===== SPLIT SECTION (index only) ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
}
.track{
  padding:72px 48px;
  position:relative;
  display:block;
  text-align:center;
}
.track-pro{
  background:var(--steel);
  color:var(--cream);
  background-image:
    linear-gradient(rgba(243,238,228,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,238,228,0.055) 1px, transparent 1px);
  background-size:38px 38px;
}
.track-personal{
  background:var(--parchment);
  color:var(--ink);
}
.track .eyebrow{ margin-bottom:14px; }
.track-pro .eyebrow{ color:#EBC98A; }
.track-personal .eyebrow{ color:var(--verdigris); }
.track h2{
  font-family:var(--display);
  font-weight:450;
  font-size:2.35rem;
  margin-bottom:18px;
  line-height:1.08;
}
.track p.desc{
  max-width:44ch;
  margin:0 auto 28px;
  font-size:0.98rem;
}
.track-pro p.desc{ color:rgba(243,238,228,0.85); }
.track-personal p.desc{ color:#3a3530; }

.logo-strip{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin:8px 0 32px;
  background:rgba(243,238,228,0.95);
  border-radius:3px;
}
.logo-chip{
  display:flex; align-items:center; justify-content:center;
  /*height:40px;*/
  height:56px;
}
.logo-strip img{
  /*height:32px; width:auto; object-fit:contain; display:block;*/
  /*height:100%; width:auto; object-fit:contain; display:block;*/
  height:60%; width:auto; object-fit:contain; display:block;
  /*height:auto; width:90%; object-fit:contain; display:block;*/
}
/*.logo-strip img.ribbit-logo{ height:22px; }
.logo-strip img.falkonry-logo{ height:24px; }
.logo-strip img.naval-reactors-logo{ height:34px; }*/

.photo-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  margin:8px 0 12px;
  aspect-ratio:1.8/1;
}
.photo-grid img{
  display:block;
  width:100%; height:100%; object-fit:cover;
  border-radius:2px;
  border:1px solid rgba(22,35,46,0.12);
  min-height:0; min-width:0;
}
.photo-grid .big{ grid-row:1/3; min-height:0; }

.track-link{
  margin-top:28px;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
}
.track-pro .track-link{ color:var(--cream); }
.track-personal .track-link{ color:var(--ember); }

/* ===== QUOTE STRIP ===== */
.quote-strip{
  background:var(--cream);
  padding:64px 32px;
  text-align:center;
  border-bottom:1px solid rgba(22,35,46,0.08);
}
.quote-strip blockquote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  max-width:760px;
  margin:0 auto;
  color:var(--ink);
  line-height:1.45;
}
.quote-strip cite{
  display:block; margin-top:18px;
  font-family:var(--mono);
  font-style:normal;
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--verdigris);
}

/* ===== PAGE HEADER (interior pages) ===== */
.page-header{
  background:var(--ink);
  color:var(--cream);
  padding:64px 32px 56px;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(192,138,62,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,138,62,0.09) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 100% at 20% 0%, black 30%, transparent 80%);
  pointer-events:none;
}
.page-header-inner{
  position:relative;
  max-width:880px; margin:0 auto;
}
.page-header h1{
  font-family:var(--display);
  font-weight:450;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  line-height:1.08;
  margin-bottom:14px;
}
.page-header .subtitle{
  font-size:1.05rem;
  color:rgba(251,248,242,0.85);
  max-width:60ch;
}

/* ===== PROSE / ARTICLE CONTENT ===== */
article.prose{
  max-width:720px;
  margin:0 auto;
  padding:64px 32px 96px;
}
article.prose h2{
  font-family:var(--display);
  font-weight:450;
  font-size:1.65rem;
  margin:2.6em 0 0.7em;
  color:var(--ink);
  line-height:1.2;
}
article.prose h2:first-of-type{ margin-top:0; }
article.prose p{
  margin-bottom:1.3em;
  font-size:1.04rem;
  color:#2b2620;
}
article.prose p.lead{
  font-size:1.18rem;
  font-family:var(--display);
  color:var(--ink);
}
article.prose strong{ color:var(--ink); }
article.prose hr{
  border:none;
  border-top:1px solid rgba(22,35,46,0.12);
  margin:3em 0;
}

.principle{
  margin-bottom:2.2em;
  padding-left:20px;
  border-left:2px solid var(--brass);
}
.principle strong{
  display:block;
  font-family:var(--display);
  font-size:1.12rem;
  margin-bottom:0.4em;
  color:var(--ink);
}

/* ===== STAT / FACT BLOCKS ===== */
.stat-strip{
  background:var(--ink);
  padding:56px 32px;
}
.stat-grid{
  max-width:1000px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:24px;
  text-align:center;
}
.stat-grid .num{
  font-family:var(--display);
  font-size:2.1rem;
  color:var(--brass);
  line-height:1;
  margin-bottom:8px;
}
.stat-grid .label{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(251,248,242,0.65);
}

/* ===== SECTION LISTS (accomplishments page) ===== */
.section-block{
  max-width:820px; margin:0 auto;
  padding:56px 32px;
  border-bottom:1px solid rgba(22,35,46,0.08);
}
.section-block:last-child{ border-bottom:none; }
.section-block h2{
  font-family:var(--display);
  font-weight:450;
  font-size:1.5rem;
  margin-bottom:1.1em;
  color:var(--ink);
}
.fact-list{ list-style:none; }
.fact-list li{
  padding:14px 0;
  border-top:1px solid rgba(22,35,46,0.08);
  font-size:0.98rem;
}
.fact-list li:first-child{ border-top:none; }
.fact-list .fact-title{
  font-weight:600;
  color:var(--ink);
}
.fact-list .fact-meta{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--verdigris);
  margin-top:2px;
}

/* ===== PHOTO ESSAY (personal page) ===== */
.photo-essay{
  max-width:1100px; margin:0 auto;
  padding:56px 32px 88px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.photo-essay figure{
  background:#fff;
  padding:10px 10px 14px;
  box-shadow:0 1px 3px rgba(22,35,46,0.12);
}
.photo-essay img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
}
.photo-essay figcaption{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--verdigris);
  margin-top:10px;
  text-align:center;
}

/* ===== CONTACT PAGE ===== */
.contact-block{
  max-width:600px; margin:0 auto;
  padding:80px 32px 100px;
  text-align:center;
}
.contact-block h1{
  font-family:var(--display);
  font-weight:450;
  font-size:2.4rem;
  margin-bottom:20px;
}
.contact-block p{
  font-size:1.05rem;
  color:#3a3530;
  margin-bottom:36px;
}
.contact-links{
  display:flex; flex-direction:column; gap:14px;
  align-items:center;
}
.contact-links a{
  font-family:var(--mono);
  font-size:0.95rem;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid var(--brass);
}
.contact-links a:hover{ color:var(--ember); }

/* ===== FOOTER ===== */
footer.site-footer{
  background:var(--ink);
  color:rgba(251,248,242,0.7);
  padding:56px 32px 40px;
}
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px;
  border-top:1px solid rgba(192,138,62,0.25);
  padding-top:32px;
}
footer .fname{ font-family:var(--display); font-size:1.3rem; color:var(--cream); margin-bottom:6px; }
footer .fcontact{ font-family:var(--mono); font-size:0.78rem; color:rgba(251,248,242,0.6); }
footer .fcontact a:hover{ color:var(--brass); }
footer .ftagline{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; color:rgba(251,248,242,0.55); max-width:32ch; text-align:right; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
  .portrait-frame{ order:-1; width:220px; }
  .gauge-strip{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .split{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-inner .ftagline{ text-align:left; }
  .photo-grid{ aspect-ratio:1/1; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}