/* 2026 professional refresh — preserves the high-desert signal, removes visual noise. */
:root {
  --max: 1200px;
  --bone: #e8e4dc;
  --white: #f7f6f2;
  --turq: #69c8c1;
  --gold: #c29b61;
  --line: rgba(232, 228, 220, .13);
}

html { scroll-padding-top: 92px; }
body {
  color: var(--bone);
  font-size: 16px;
  background:
    radial-gradient(circle at 82% 6%, rgba(105, 200, 193, .045), transparent 32rem),
    #050606;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  background: var(--white);
  color: #050606;
  text-decoration: none;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.grain { opacity: .06; }
.signal-frame { inset: 8px; opacity: .45; }
.gratitude-bar {
  min-height: 30px;
  padding-block: .42rem;
  background: #080909;
  border-color: rgba(194, 155, 97, .18);
  color: rgba(232, 228, 220, .55);
}

.site-header {
  min-height: 72px;
  padding: .7rem max(4vw, calc((100vw - var(--max)) / 2));
  gap: 2rem;
  background: rgba(5, 7, 7, .92);
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
.brand { flex: 0 0 auto; }
.brand small { letter-spacing: .16em; }
.zia-mark { width: 42px; height: 42px; animation: none; }
.zia-mark i { animation-duration: 18s; }
nav { gap: 1.35rem; }
nav a, .nav-resources summary {
  color: rgba(247, 246, 242, .66);
  font: 600 .61rem "Josefin Sans", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
nav a:hover, .nav-resources summary:hover { color: #fff; text-shadow: none; }
.nav-cta { border-radius: 2px; background: rgba(105, 200, 193, .06); }
.nav-resources { position: relative; }
.nav-resources summary { cursor: pointer; list-style: none; }
.nav-resources summary::-webkit-details-marker { display: none; }
.nav-resources summary::after { content: " +"; color: var(--turq); }
.nav-resources[open] summary::after { content: " −"; }
.nav-menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: 0;
  width: 230px;
  padding: .55rem;
  display: grid;
  background: rgba(8, 10, 10, .98);
  border: 1px solid rgba(105, 200, 193, .24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.nav-menu a { padding: .75rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nav-menu a:last-child { border: 0; }

.story-hero {
  min-height: 780px;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: clamp(3rem, 6vw, 6rem);
  padding: 10.5rem max(5vw, calc((100vw - var(--max)) / 2)) 5rem;
  background:
    linear-gradient(90deg, rgba(5, 7, 7, .98), rgba(5, 7, 7, .88)),
    radial-gradient(circle at 82% 35%, rgba(105, 200, 193, .09), transparent 30rem),
    #050707;
}
.hero-security-grid { opacity: .09; background-size: 64px 64px; }
.hero-security-orbit { opacity: .38; animation-duration: 60s; }
.story-hero h1 {
  max-width: 820px;
  font-size: clamp(3.4rem, 6.4vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-shadow: none;
}
.story-hero h1 span { color: #9edbd6; text-shadow: none; }
.story-hero .lede {
  max-width: 760px;
  border-left-color: rgba(105, 200, 193, .46);
  color: rgba(232, 228, 220, .7);
  line-height: 1.7;
}
.framework-panel {
  min-height: 500px;
  padding: 1.6rem;
  border-color: rgba(105, 200, 193, .23);
  background: rgba(7, 10, 10, .75);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}
.csf-core { min-height: 300px; }
.framework-panel::before, .framework-panel::after { opacity: .55; }

.security-ticker-track { animation-duration: 55s; }
.command-strip { max-width: var(--max); border-top: 0; }
.command-strip div { padding: 1.25rem 1.4rem; }
.section-shell { padding-block: clamp(5.5rem, 8vw, 7.5rem); }
.section-shell::before { width: 54px; background: var(--turq); opacity: .7; }
.section-heading { gap: clamp(2rem, 7vw, 6rem); margin-bottom: 3rem; }
.section-heading h2, .profile h2, .method h2, .contact h2 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-shadow: none;
}
.section-heading > p, .profile p:not(.eyebrow), .method-list p, .contact p { line-height: 1.75; }
.focus-grid, .incident-grid, .cards { gap: 1rem; background: transparent; border: 0; }
.focus-grid article, .incident-card, .cards article {
  border: 1px solid var(--line);
  background: rgba(9, 11, 11, .72);
  box-shadow: none;
}
.focus-grid article:hover, .cards article:hover { transform: none; border-color: rgba(105, 200, 193, .28); }
.focus-grid h3, .cards h3, .incident-card h3 { margin-top: 2.25rem; }
.time-stewardship { margin-top: 1rem; }
.signal-console { background: #07100f; }
.soc-center { padding-inline: max(4vw, calc((100vw - 1360px) / 2)); }
.soc-heading h2 { font-size: clamp(3rem, 5.2vw, 5.4rem); }
.soc-command { box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.quote-band { padding-block: 5rem; }
.quote-band p { font-size: clamp(2rem, 3.4vw, 3.45rem); }
footer { border-top: 1px solid var(--line); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  nav { gap: 1rem; }
  .site-header .brand small { display: none; }
}

@media (max-width: 980px) {
  .gratitude-bar + .site-header { top: 0; }
  .site-header { position: sticky; top: 0; }
  .site-header nav > a:not(.nav-cta) { display: none; }
  .story-hero { grid-template-columns: 1fr; padding-top: 6.5rem; }
  .story-hero .framework-panel { max-width: 680px; width: 100%; }
  .nav-menu { right: -4.5rem; }
}

@media (max-width: 640px) {
  .gratitude-bar { display: none; }
  .site-header { min-height: 66px; padding-inline: 5vw; }
  .brand { font-size: .78rem; letter-spacing: .1em; }
  .zia-mark { width: 36px; height: 36px; }
  nav { gap: .75rem; }
  .nav-cta { padding: .62rem .7rem; }
  .story-hero { min-height: auto; padding: 5rem 6vw 3.5rem; }
  .story-hero h1 { font-size: clamp(2.85rem, 14vw, 4.2rem); }
  .story-hero .lede { font-size: .96rem; }
  .framework-panel { min-height: 480px; }
  .nav-menu { position: fixed; top: 66px; left: 5vw; right: 5vw; width: auto; }
  .section-shell { padding-block: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zia-mark i, .security-ticker-track, .hero-security-orbit { animation: none; }
}


/* 2026-08-14 clarity pass — quieter hierarchy, same high-desert signal. */
:root {
  --content-wide: 1180px;
  --content-reading: 760px;
  --surface-quiet: rgba(9, 11, 11, .62);
}

body { line-height: 1.6; }
.grain { opacity: .035; }
.signal-frame { opacity: .28; }
.gratitude-bar { font-size: .66rem; letter-spacing: .08em; }
.gratitude-bar p { max-width: 980px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site-header {
  min-height: 68px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header nav { align-items: center; }
.site-header nav > a,
.nav-resources summary { padding-block: .55rem; }
.site-header nav > a:not(.nav-cta) { border-bottom: 1px solid transparent; }
.site-header nav > a:not(.nav-cta):hover,
.site-header nav > a[aria-current="page"] { border-color: var(--turq); }

.story-hero {
  min-height: 700px;
  padding-top: clamp(7.5rem, 10vw, 9rem);
  padding-bottom: 4.5rem;
}
.story-hero h1 { max-width: 760px; }
.story-hero .lede { max-width: 700px; font-size: 1rem; }
.hero-security-grid { opacity: .055; }
.hero-security-orbit { opacity: .24; }
.framework-panel {
  min-height: 460px;
  background: rgba(7, 10, 10, .62);
}
.csf-core { min-height: 270px; }
.hero-foot { opacity: .58; }

.security-ticker { opacity: .82; }
.command-strip {
  max-width: var(--content-wide);
  background: rgba(7, 9, 9, .72);
}
.command-strip div { border-color: rgba(232, 228, 220, .08); }

.section-shell {
  max-width: var(--content-wide);
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}
.section-heading { margin-bottom: 2.5rem; }
.section-heading > p { max-width: 560px; }
.eyebrow { letter-spacing: .16em; opacity: .82; }

.focus-grid article,
.incident-card,
.cards article,
.manual-card {
  background: var(--surface-quiet);
  border-color: rgba(232, 228, 220, .1);
}
.focus-grid article:hover,
.incident-card:hover,
.cards article:hover,
.manual-card:hover {
  border-color: rgba(105, 200, 193, .32);
  background: rgba(10, 14, 14, .78);
}
.focus-grid h3,
.cards h3,
.incident-card h3 { margin-top: 1.65rem; }

.signal-console { min-height: 54px; opacity: .9; }
.soc-command { border-color: rgba(105, 200, 193, .2); }
.soc-card { background: rgba(5, 9, 9, .76); }
.soc-heading-copy { max-width: 540px; }

.insights-bridge .insights-actions { gap: .65rem; }
.insight-link { background: rgba(8, 11, 11, .58); }
.insight-link:hover { background: rgba(10, 16, 15, .82); }

.insights-page .blog-hero {
  min-height: 52vh;
  padding-top: clamp(8rem, 13vw, 11rem);
}
.insights-page .blog-hero h1 { letter-spacing: -.045em; }
.insights-page .manual-shell { max-width: var(--content-wide); }
.insights-page .manual-grid { gap: 1rem; }
.insights-page .manual-card { box-shadow: none; }
.insights-page .manual-card h2 { line-height: 1.08; }
.insights-page [aria-current="page"] { color: var(--white); border-bottom: 1px solid var(--turq); }

.button,
.nav-cta { border-radius: 2px; }
.button { letter-spacing: .1em; }
footer { color: rgba(232, 228, 220, .52); }

@media (max-width: 980px) {
  .story-hero { min-height: auto; }
  .gratitude-bar p { white-space: normal; }
}

@media (max-width: 640px) {
  .story-hero { padding-top: 4.5rem; }
  .security-ticker { display: none; }
  .command-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { gap: 1.25rem; }
}