/*
Theme Name: Gene Reznikov — Enterprise Reliability
Theme URI: https://genereznikov.argowake.com
Author: Gene Reznikov
Description: A focused one-page professional portfolio for enterprise IT service delivery and reliability leadership.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gene-reznikov
*/

:root {
  --paper: #f6f1ea;
  --paper-deep: #eee7dd;
  --ink: #0c223d;
  --body: #28333e;
  --rust: #b63b17;
  --rust-dark: #8d2b10;
  --rule: #cfc5b8;
  --muted: #746d65;
  --white: #fffdf9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }

::selection { background: #d7a58f; color: var(--ink); }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  padding: 0 4.3vw;
  border-bottom: 1px solid var(--rule);
  background: rgba(246, 241, 234, .92);
  backdrop-filter: blur(14px);
}

.wordmark {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.35vw, 2.45rem);
  letter-spacing: -.035em;
}

nav { display: flex; gap: clamp(1.5rem, 5.8vw, 5.7rem); }
nav a { font-size: .98rem; color: var(--ink); }
nav a:hover, nav a:focus-visible { color: var(--rust); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(360px, .77fr);
  min-height: 654px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 72px 2vw 68px 4.3vw;
}

.eyebrow, .section-kicker {
  margin: 0;
  color: var(--rust);
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1, h2, .impact-grid strong, .hero-metrics strong, .case-number {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h1 {
  max-width: 810px;
  margin: 24px 0 20px;
  font-size: clamp(3.4rem, 5.55vw, 6.35rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.hero-intro {
  max-width: 650px;
  margin: 0;
  font-size: clamp(1.08rem, 1.35vw, 1.35rem);
  line-height: 1.62;
}

.hero-actions, .contact-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border: 1px solid var(--rust);
  font-weight: 630;
  transition: .2s ease;
}

.button-primary { background: var(--rust); color: var(--white); }
.button-primary:hover, .button-primary:focus-visible { background: var(--rust-dark); border-color: var(--rust-dark); transform: translateY(-2px); }
.button-secondary { color: var(--rust); }
.button-secondary:hover, .button-secondary:focus-visible { background: rgba(182, 59, 23, .07); transform: translateY(-2px); }

.system-map { position: relative; min-height: 654px; opacity: .94; }
.map-line { position: absolute; display: block; border-color: #a89a89; }
.line-a { top: 9%; left: 22%; width: 68%; height: 21%; border-top: 1px solid; border-right: 1px solid; }
.line-b { top: 21%; left: 8%; width: 57%; height: 32%; border-top: 1px dashed; border-left: 1px solid; }
.line-c { top: 30%; left: 48%; width: 32%; height: 49%; border-top: 1px solid; border-right: 1px solid; }
.line-d { top: 53%; left: 16%; width: 72%; height: 1px; border-top: 1px solid; }
.line-e { top: 68%; left: 28%; width: 42%; height: 20%; border-left: 1px solid; border-bottom: 1px dashed; }
.map-node, .map-square { position: absolute; display: block; background: var(--paper); }
.map-node { width: 15px; height: 15px; border: 1px solid #8e7c6a; border-radius: 50%; }
.node-a { top: 8%; left: 54%; background: var(--rust); border-color: var(--rust); }
.node-b { top: 20%; left: 7%; }
.node-c { top: 52%; left: 47%; background: var(--rust); border-color: var(--rust); }
.node-d { top: 67%; left: 27%; }
.node-e { top: 78%; left: 54%; border-color: var(--rust); }
.map-square { width: 12px; height: 12px; border: 1px solid #9d8c7a; }
.square-a { top: 8%; right: 9%; }
.square-b { top: 52%; right: 10%; width: 19px; height: 19px; border-color: var(--rust); }
.square-c { top: 87%; left: 66%; }
.map-label { position: absolute; color: #8d8173; font-family: Georgia, serif; font-size: .78rem; }
.label-a { top: 10%; left: 39%; }
.label-b { top: 31%; left: 10%; }
.label-c { top: 31%; right: 15%; }
.label-d { top: 57%; right: 10%; }
.label-e { top: 72%; left: 33%; }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
}

.hero-metrics div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  min-height: 148px;
  border-right: 1px solid var(--rule);
}
.hero-metrics div:last-child { border-right: 0; }
.hero-metrics strong { font-size: clamp(3rem, 4.5vw, 5rem); line-height: 1; }
.hero-metrics span { color: var(--ink); font-size: 1.02rem; }

.section-shell { max-width: 1320px; margin: 0 auto; padding: 120px 48px; }

.positioning-lead, .experience-intro, .impact-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8vw;
  align-items: start;
  margin-top: 26px;
}

h2 { margin: 0; font-size: clamp(2.55rem, 4vw, 4.65rem); line-height: 1.05; letter-spacing: -.035em; }
.positioning-lead p, .experience-intro p, .impact-heading p, .contact > p {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  line-height: 1.72;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 74px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.expertise-card { min-height: 250px; padding: 28px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.expertise-card > span { color: var(--rust); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .76rem; }
.expertise-card h3, .impact-grid h3, .analysis-case h3, .timeline h3, .fit h3 {
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 650;
}
.expertise-card h3 { margin: 46px 0 12px; }
.expertise-card p { margin: 0; font-size: .94rem; line-height: 1.64; }

.capabilities {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}

.capabilities-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8vw;
  align-items: start;
  margin-top: 26px;
}

.capabilities h2 { color: var(--ink); }
.capabilities-intro p {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  line-height: 1.72;
}
.capabilities .section-kicker.light { color: var(--rust); }
.capability-note { color: var(--muted); }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 72px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.capability-card {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 22px;
  min-height: 250px;
  padding: 32px 34px 34px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 253, 249, .3);
}

.capability-number {
  padding-top: 4px;
  color: var(--rust);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .76rem;
}

.capability-card h3 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 400;
}

.capability-card p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.65;
}

.capability-card .capability-tools {
  margin-bottom: 18px;
  color: var(--rust-dark);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: .015em;
}

.impact { background: var(--ink); color: #d9e0e6; }
.section-kicker.light { color: #d3704e; }
.impact h2, .fit h2 { color: var(--white); }
.impact-heading p { color: #aebbc6; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 74px; border-top: 1px solid #33475a; border-left: 1px solid #33475a; }
.impact-grid article { min-height: 260px; padding: 28px; border-right: 1px solid #33475a; border-bottom: 1px solid #33475a; }
.impact-grid strong { display: block; color: var(--white); font-size: clamp(2.8rem, 4.1vw, 4.5rem); line-height: 1; }
.impact-grid h3 { margin: 18px 0 36px; color: #d3704e; }
.impact-grid p { margin: 0; color: #aebbc6; font-size: .92rem; line-height: 1.6; }

.analysis-case { display: grid; grid-template-columns: .45fr 1.55fr; gap: 7vw; align-items: start; margin-top: 78px; padding-top: 68px; border-top: 1px solid #33475a; }
.case-number { color: var(--white); font-size: clamp(4rem, 7.5vw, 8.2rem); line-height: .9; }
.case-label { margin: 0 0 22px; color: #d3704e; font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.analysis-case h3 { max-width: 760px; margin: 0 0 18px; color: var(--white); font-family: Georgia, serif; font-size: clamp(1.9rem, 2.8vw, 3rem); font-weight: 400; line-height: 1.13; }
.analysis-case > div:last-child > p:not(.case-label) { max-width: 760px; margin: 0; color: #aebbc6; line-height: 1.7; }

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.case-tags span {
  padding: 8px 12px;
  border: 1px solid #3d5368;
  color: #c7d2da;
  font-size: .75rem;
  letter-spacing: .03em;
}

.selected-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 78px;
  border-top: 1px solid #33475a;
  border-left: 1px solid #33475a;
}
.selected-work-grid article {
  min-height: 270px;
  padding: 30px;
  border-right: 1px solid #33475a;
  border-bottom: 1px solid #33475a;
}
.selected-work-grid p {
  margin: 0;
  color: #d3704e;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .76rem;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.selected-work-grid h3 {
  margin: 42px 0 16px;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 400;
}
.selected-work-grid span {
  color: #aebbc6;
  font-size: .92rem;
  line-height: 1.65;
}

.experience-intro { margin-bottom: 80px; }
.timeline { border-top: 1px solid var(--rule); }
.timeline article { display: grid; grid-template-columns: .42fr 1.58fr; gap: 5vw; padding: 54px 0; border-bottom: 1px solid var(--rule); }
.timeline-date { color: var(--rust); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .85rem; }
.timeline-body .role { margin: 0 0 7px; color: var(--muted); font-size: .84rem; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.timeline h3 { margin: 0 0 18px; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
.timeline-body > p:not(.role) { max-width: 770px; margin: 0; line-height: 1.7; }
.timeline ul, .fit ul { margin: 24px 0 0; padding: 0; list-style: none; }
.timeline li, .fit li { position: relative; margin: 10px 0; padding-left: 22px; line-height: 1.55; }
.timeline li::before, .fit li::before { content: ""; position: absolute; top: .7em; left: 0; width: 8px; height: 1px; background: var(--rust); }

.fit { background: #273746; color: #d9e0e6; }
.fit-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; }
.fit h2 { margin-top: 26px; }
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.fit h3 { margin: 0; color: var(--white); font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; }
.fit li { color: #c5cfd6; font-size: .95rem; }
.fit li::before { background: #d3704e; }

.contact { max-width: 1040px; text-align: center; }
.contact h2 { margin: 25px auto 28px; }
.contact > p:not(.eyebrow) { max-width: 720px; margin: 0 auto; }
.contact-actions { justify-content: center; margin-top: 34px; }
.text-link { padding: 14px 2px; border-bottom: 1px solid var(--rust); color: var(--rust); font-weight: 620; }
.text-link:hover, .text-link:focus-visible { color: var(--rust-dark); border-color: var(--rust-dark); }
.contact-meta { display: flex; justify-content: center; gap: 32px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .82rem; }

footer { display: flex; justify-content: space-between; padding: 30px 4.3vw; border-top: 1px solid var(--rule); color: var(--muted); font-size: .78rem; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }

@media (max-width: 980px) {
  nav { gap: 1.6rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding-right: 4.3vw; }
  .system-map { position: absolute; inset: 0 0 0 55%; min-height: 100%; opacity: .24; }
  .positioning-lead, .experience-intro, .impact-heading, .capabilities-intro, .fit-grid { grid-template-columns: 1fr; gap: 34px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .fit-columns { margin-top: 18px; }
}

@media (max-width: 700px) {
  .site-header { min-height: 76px; padding: 0 22px; }
  .wordmark { font-size: 1.55rem; }
  nav a:not(:last-child) { display: none; }
  nav a { font-size: .88rem; }
  .hero-copy { padding: 58px 22px 60px; }
  h1 { font-size: clamp(3.15rem, 16vw, 4.7rem); }
  .system-map { left: 45%; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 340px; }
  .hero-metrics { grid-template-columns: 1fr; }
  .hero-metrics div { justify-content: flex-start; min-height: 108px; padding: 0 24px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero-metrics div:last-child { border-bottom: 0; }
  .hero-metrics strong { min-width: 150px; font-size: 3.5rem; }
  .section-shell { padding: 84px 22px; }
  .expertise-grid, .impact-grid, .capability-grid, .selected-work-grid, .fit-columns { grid-template-columns: 1fr; }
  .expertise-card { min-height: auto; }
  .capability-card { min-height: auto; padding: 28px 24px; }
  .impact-grid article { min-height: auto; }
  .selected-work-grid article { min-height: auto; }
  .analysis-case { grid-template-columns: 1fr; gap: 34px; }
  .timeline article { grid-template-columns: 1fr; gap: 20px; }
  .contact-actions { flex-direction: column; }
  .contact-meta { flex-direction: column; gap: 9px; }
  footer { flex-direction: column; gap: 8px; padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}