/* ══════════════════════════════════════════════════════════════
   alexgoldfinger.com — Main Stylesheet
   ══════════════════════════════════════════════════════════════ */

:root {
  --navy:        #060d18;
  --navy-mid:    #0a1526;
  --navy-light:  #0d1b30;
  --gold:        #b8943f;
  --gold-dim:    #9a7d3a;
  --gold-subtle: rgba(184,148,63,0.08);
  --gold-glow:   rgba(184,148,63,0.18);
  --white:       #ffffff;
  --w70:         rgba(255,255,255,0.70);
  --w55:         rgba(255,255,255,0.55);
  --w50:         rgba(255,255,255,0.50);
  --w45:         rgba(255,255,255,0.45);
  --border:      rgba(184,148,63,0.08);
  --border-s:    rgba(184,148,63,0.14);
  --card-bg:     rgba(255,255,255,0.018);
  --card-bd:     rgba(255,255,255,0.05);
  --serif:       Georgia,'Book Antiqua',Palatino,serif;
  --sans:        -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:         72px 40px;
  --pad-lg:      88px 40px;
}

@media (max-width: 1023px) {
  :root { --pad: 64px 32px; --pad-lg: 72px 32px; }
}
@media (max-width: 767px) {
  :root { --pad: 48px 24px; --pad-lg: 56px 24px; }
}

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

html {
  font-size: 21px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--serif);
  background: var(--navy);
  color: var(--white);
  line-height: 1.75;
  overflow-x: hidden;
}

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

/* ── Skip link ── */
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  background: var(--gold); color: var(--navy);
  font-family: var(--sans); font-size: 13px;
  padding: 12px 20px; transition: top 0.15s;
}
.skip-link:focus { top: 16px; }

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
.header {
  background: rgba(6,13,24,0.97);
  padding: 18px 40px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  transition: padding 0.3s;
}
.header.is-scrolled { padding-top: 12px; padding-bottom: 12px; }

@media (max-width: 1023px) { .header { padding: 14px 36px; } }
@media (max-width: 767px)  { .header { padding: 12px 24px; } }

.header__monogram {
  width: 34px; height: 34px;
  border: 1px solid rgba(184,148,63,0.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.header__monogram span { font-size: 11px; color: var(--gold); letter-spacing: .5px; }

.header__nav {
  display: flex; gap: 40px; list-style: none;
}
@media (max-width: 1280px) { .header__nav { gap: 28px; } }
@media (max-width: 1100px) { .header__nav { gap: 20px; } }
@media (max-width: 767px)  { .header__nav { display: none; } }

.header__nav a {
  font-family: var(--serif);
  font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--w55); transition: color .2s; position: relative; padding-bottom: 4px;
}
@media (max-width: 1100px) { .header__nav a { font-size: 15px; } }
@media (max-width: 1023px) { .header__nav a { font-size: 14px; } }

.header__nav a::after {
  content: ''; position: absolute; bottom: -5px; left: 0;
  width: 0; height: 2px; background: var(--gold); transition: width .3s;
}
.header__nav a:hover, .header__nav a.active { color: var(--gold); }
.header__nav a:hover::after, .header__nav a.active::after { width: 100%; }
.header__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Hamburger */
.header__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 10px 8px; min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
}
.header__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 767px) { .header__toggle { display: flex; } }
.header__toggle span {
  display: block; width: 20px; height: 1.5px;
  background: var(--gold); transition: all .3s;
}
.header__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.header__toggle.is-active span:nth-child(2) { opacity: 0; }
.header__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* Mobile nav overlay */
.mobile-nav {
  display: none; position: fixed; inset: 0;
  background: var(--navy); z-index: 99;
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.mobile-nav.is-open { display: flex; }
/* In editor, mobile-nav must be above the edit bar (z-index 2147483646) */
body.__ve-edit .mobile-nav.is-open { z-index: 2147483647; }
#mobile-nav-links {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.mobile-nav a {
  font-size: 26px; color: var(--w50); transition: color .2s; text-align: center;
}
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav__close {
  position: absolute; top: 24px; right: 24px;
  background: none; border: none; cursor: pointer;
  font-size: 28px; color: var(--gold);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.mobile-nav__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS — global, unified style
   Every .btn shares the same typography (serif, uppercase, 1.5px
   letter-spacing) and shape (1px gold border, no radius). Variants
   differ only in fill / hover-color, never in font or case.
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 32px;
  cursor: pointer;
  transition: all .25s;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  border-radius: 0;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); background: rgba(184,148,63,.12); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Primary — solid gold fill for the highest-impact CTAs (Send a message, Download PDF).
   Same border, same font, same case as every other button. */
.btn--primary {
  background: var(--gold); color: var(--navy);
  position: relative; overflow: hidden;
}
.btn--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  background-size: 200% 100%;
  animation: goldWave 3s ease-in-out infinite; pointer-events: none;
}
.btn--primary:hover { background: var(--gold); opacity: .9; }

/* Outline and ghost are now visually identical — both render as the base .btn style.
   Kept as separate class names so existing markup doesn't need to change. */
.btn--outline,
.btn--ghost { /* defaults from .btn — gold border, gold text, transparent */ }

/* Small — only padding/size changes, typography stays consistent with the base */
.btn--sm { padding: 10px 22px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════════ */
.section { padding: var(--pad); position: relative; overflow: hidden; }
.section--navy  { background: var(--navy); }
.section--mid   { background: var(--navy-mid); }
.section--light { background: var(--navy-light); }

.two-col { display: flex; gap: 80px; }
.sidebar { flex: 0 0 140px; }
.main    { flex: 1; min-width: 0; }

@media (max-width: 767px) {
  .two-col { flex-direction: column; gap: 24px; }
  .sidebar { flex: none; }
}

.section-label {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin: 0; display: block;
}
.section-label::before {
  content: ''; display: block; width: 40px; height: 1.5px;
  background: var(--gold); margin-bottom: 16px;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(184,148,63,.08));
  margin-bottom: 24px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s ease;
}
.divider.is-visible { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; position: relative;
  padding: 70px 40px 56px; background: var(--navy); overflow: hidden;
}
/* Tablet/phone: trimmed padding + dvh so hero fits in the visible viewport (mobile chrome safe).
   Bottom padding reserves space for the scroll indicator. */
@media (max-width: 1023px) { .hero { padding: 72px 32px 80px; min-height: 100dvh; } }
@media (max-width: 767px)  { .hero { padding: 64px 24px 72px; min-height: 100dvh; } }

.hero__glow {
  position: absolute; top: -120px; right: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(184,148,63,.06) 0%, transparent 70%);
  animation: breathe 8s ease-in-out infinite; pointer-events: none;
}
.hero__watermark {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  font-size: clamp(120px, 44vw, 880px);
  color: rgba(184,148,63,.055); letter-spacing: 0.01em;
  pointer-events: none; user-select: none; line-height: 1;
  text-align: center; white-space: nowrap; overflow: hidden;
}
.hero__inner {
  display: flex; align-items: center;
  justify-content: center; gap: clamp(56px, 7vw, 100px);
  position: relative; z-index: 1; width: 100%;
}
@media (max-width: 1023px) { .hero__inner { gap: clamp(40px, 6vw, 64px); } }
@media (max-width: 767px)  { .hero__inner { flex-direction: column; gap: 24px; } }

.hero__content { flex: 0 1 640px; min-width: 0; }
.hero__name {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.hero__h1 {
  font-size: clamp(38px,5vw,62px); font-weight: normal;
  color: var(--white); line-height: 1.15; margin-bottom: 6px;
  overflow: hidden;
}
.hero__h1 span { display: block; animation: sweepUp .5s cubic-bezier(.22,1,.36,1) both; }
.hero__h2 {
  font-size: clamp(30px,4.5vw,52px); font-weight: normal;
  color: var(--gold); font-style: italic; margin-bottom: 24px;
  animation: none;
}
.hero__desc {
  font-size: 19px; color: var(--w55); line-height: 1.85;
  max-width: 480px;
}
.hero__buttons {
  display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
}

.hero__photo { flex: 0 0 auto; }
.hero__frame {
  width: 352px; height: 462px; overflow: hidden;
  border: 1px solid rgba(184,148,63,.15); position: relative;
}
@media (max-width: 1023px) { .hero__frame { width: 280px; height: 368px; } }
@media (max-width: 767px)  { .hero__frame { width: 168px; height: 224px; } }
@media (max-width: 380px)  { .hero__frame { width: 140px; height: 186px; } }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(184,148,63,.08) 0%, rgba(184,148,63,.02) 100%);
  font-size: 48px; color: rgba(184,148,63,.25); letter-spacing: 4px;
  font-family: var(--serif);
  border: 1px solid rgba(184,148,63,.1) inset;
}
.hero__stamp {
  position: absolute; bottom: -1px; right: -1px;
  width: 44px; height: 44px; background: var(--navy);
  border-top: 1px solid rgba(184,148,63,.15);
  border-left: 1px solid rgba(184,148,63,.15);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.hero__stamp span { font-size: 9px; color: var(--gold-dim); letter-spacing: 1px; }
.hero__bracket {
  position: absolute; top: -6px; left: -6px; width: 28px; height: 28px;
  border-top: 1px solid rgba(184,148,63,.3);
  border-left: 1px solid rgba(184,148,63,.3);
}

.hero__scroll {
  /* Default to fixed so the indicator is at viewport bottom on first paint
     (before JS pins it). JS will switch to absolute once the hero bottom
     enters the viewport, so the indicator scrolls away with the hero. */
  position: fixed;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  z-index: 5;
  pointer-events: none;        /* indicative only — never blocks clicks */
}
.hero__scroll span { font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--w55); }
.hero__scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  margin: 14px auto 0; animation: float 3s ease-in-out infinite;
}
/* Tighter spacing on mobile */
@media (max-width: 767px) {
  .hero__scroll { bottom: 12px; }
  .hero__scroll-line { height: 44px; margin-top: 10px; }
}

/* ── Resume grid on index: single column on mobile, education before experience ── */
@media (max-width: 767px) {
  #js-resume-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  #js-resume-exp-col { order: 2; }
  #js-resume-edu-col { order: 1; }
}

/* ══════════════════════════════════════════════════════════════
   CREDENTIALS BAR
══════════════════════════════════════════════════════════════ */
.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--navy-mid);
}
.credentials__item {
  padding: 18px 24px; text-align: center;
  border-right: 1px solid var(--border);
}
.credentials__item:last-child { border-right: none; }
.credentials__item p {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--w50); margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════════ */
.approach__text {
  font-size: clamp(20px,2.8vw,26px); line-height: 1.65;
  color: var(--white); margin-bottom: 20px;
}
.approach__text mark {
  background: rgba(184,148,63,.2); color: inherit; padding: 2px 4px;
}
.approach__sub { font-size: 17px; color: var(--w50); line-height: 1.85; margin-bottom: 0; }

.philosophy-block { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.philosophy-block__diamond {
  width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); margin-bottom: 20px;
}
.philosophy-block__quote {
  font-size: clamp(18px,2.5vw,22px); color: var(--white);
  font-style: italic; line-height: 1.65; margin-bottom: 16px;
}
.philosophy-block__text { font-size: 17px; color: var(--w50); line-height: 1.85; }

/* ══════════════════════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 28px; }
.timeline__track {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 100%; background: rgba(184,148,63,.08);
}
.timeline__fill {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, var(--gold), rgba(184,148,63,.1));
}
.timeline__entry { padding-bottom: 36px; position: relative; }
.timeline__entry:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -32px; top: 5px;
  width: 7px; height: 7px; background: var(--gold);
}
.timeline__date { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 5px; }
.timeline__title { font-size: 20px; color: var(--white); margin-bottom: 3px; font-weight: normal; }
.timeline__org { font-size: 16px; color: var(--w55); font-style: italic; margin-bottom: 8px; }
.timeline__desc { font-size: 15px; color: var(--w50); line-height: 1.85; }

/* ══════════════════════════════════════════════════════════════
   EDUCATION BLOCK
══════════════════════════════════════════════════════════════ */
.edu-block {
  padding: 24px; border: 1px solid var(--card-bd); background: var(--card-bg);
}
.edu-block__date { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.edu-block__title { font-size: 20px; color: var(--white); margin-bottom: 3px; font-weight: normal; }
.edu-block__org { font-size: 16px; color: var(--w55); font-style: italic; margin-bottom: 8px; }
.edu-block__desc { font-size: 15px; color: var(--w50); line-height: 1.85; }

/* ══════════════════════════════════════════════════════════════
   SKILL CARDS
══════════════════════════════════════════════════════════════ */
.skills-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 599px) { .skills-grid { grid-template-columns: 1fr; } }

.card {
  padding: 24px; border: 1px solid var(--card-bd);
  background: var(--card-bg); position: relative; overflow: hidden;
  transition: all .4s;
  display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; align-items: start;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: borderSweep 2s linear infinite;
}
.card:hover { transform: translateY(-3px); border-color: rgba(184,148,63,.2); }
.card:hover::before { opacity: 1; }
/* Marker sits in col 1 row 1, vertically aligned to cap-height of title */
.card__marker { width: 6px; height: 6px; background: var(--gold); margin-top: 5px; flex-shrink: 0; }
.card__title { font-size: 18px; color: var(--white); margin-bottom: 8px; font-weight: normal; }
/* Text starts in col 2 (aligned under title, not under dot) */
.card__text  { font-size: 15px; color: var(--w50); line-height: 1.8; grid-column: 2; }

/* ══════════════════════════════════════════════════════════════
   WORK PRODUCT
══════════════════════════════════════════════════════════════ */
.work-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 767px) { .work-grid { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .work-grid { grid-template-columns: 1fr 1fr 1fr; } }

.work-card {
  padding: 24px; border: 1px solid var(--card-bd);
  background: var(--card-bg); position: relative; overflow: hidden; transition: all .4s;
}
.work-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: borderSweep 2s linear infinite;
}
.work-card:hover { transform: translateY(-3px); border-color: rgba(184,148,63,.2); }
.work-card:hover::before { opacity: 1; }
.work-card__preview {
  padding: 16px 0 14px; border-bottom: 1px solid var(--card-bd);
  margin-bottom: 14px; display: flex; align-items: center; justify-content: center;
}
.work-card__year { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.work-card__title { font-size: 16px; color: var(--white); margin-bottom: 8px; line-height: 1.35; font-weight: normal; }
.work-card__excerpt { font-size: 13px; color: var(--w50); line-height: 1.75; margin-bottom: 14px; }
.work-card__actions { display: flex; gap: 16px; }
.work-card__link {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 5px;
  transition: gap .3s;
}
.work-card__link::after { content: '→'; }
.work-card__link:hover { gap: 9px; }
.work-card__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Category filter */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-bar__btn {
  font-family: var(--serif); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--w50); padding: 12px 16px; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--card-bd); background: none; cursor: pointer; transition: all .25s;
}
.filter-bar__btn:hover, .filter-bar__btn.active {
  color: var(--gold); border-color: rgba(184,148,63,.25);
}
.filter-bar__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Group label inside the filter bar — "Category" / "Tag" hint chips */
.filter-bar__group-label {
  font-family: var(--serif); font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-dim); align-self: center; padding: 0 6px 0 14px;
  border-left: 1px solid rgba(184,148,63,.2); margin-left: 4px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.filter-bar__btn--tag { font-style: italic; }

/* Tag pills displayed on each work card */
.work-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px 0;
}
.work-card__tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: .5px;
  color: var(--gold-dim); padding: 3px 8px;
  border: 1px solid rgba(184,148,63,.25); border-radius: 999px;
  background: rgba(184,148,63,.05); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.work-card__tag:hover {
  color: var(--gold); background: rgba(184,148,63,.15); border-color: rgba(184,148,63,.55);
}

/* ══════════════════════════════════════════════════════════════
   BLOG / INSIGHTS
══════════════════════════════════════════════════════════════ */
.blog-featured {
  display: flex; gap: 40px; margin-bottom: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--border);
}
@media (max-width: 767px) { .blog-featured { flex-direction: column; } }

.blog-featured__img {
  flex: 0 0 45%; overflow: hidden; border: 1px solid var(--card-bd);
  max-height: 320px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg,rgba(184,148,63,.03) 0,rgba(184,148,63,.03) 1px,transparent 1px,transparent 14px);
}
.blog-featured__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.blog-featured__img-placeholder { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--w45); }
.blog-featured__content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.blog-featured__label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.blog-featured__date { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px; }
.blog-featured__title { font-size: clamp(20px,2.5vw,28px); color: var(--white); line-height: 1.3; margin-bottom: 12px; font-weight: normal; }
.blog-featured__excerpt { font-size: 15px; color: var(--w55); line-height: 1.8; margin-bottom: 24px; }

.blog-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 767px) { .blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .blog-grid { grid-template-columns: 1fr 1fr; } }

.blog-card {
  border: 1px solid var(--card-bd); background: var(--card-bg);
  overflow: hidden; transition: all .4s;
}
.blog-card:hover { transform: translateY(-3px); border-color: rgba(184,148,63,.15); }
.blog-card__img { height: 180px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,rgba(184,148,63,.03) 0,rgba(184,148,63,.03) 1px,transparent 1px,transparent 14px); border-bottom: 1px solid var(--card-bd); padding: 8px; box-sizing: border-box; }
.blog-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.blog-card__img-placeholder { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--w45); }
.blog-card__body { padding: 20px; }
.blog-card__date { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.blog-card__title { font-size: 16px; color: var(--white); line-height: 1.35; margin-bottom: 8px; font-weight: normal; }
.blog-card__excerpt { font-size: 13px; color: var(--w50); line-height: 1.75; }
.blog-card a { display: block; }
.blog-card a:focus-visible { outline: 2px solid var(--gold); }

/* ══════════════════════════════════════════════════════════════
   LETTERS
══════════════════════════════════════════════════════════════ */
.letters-count { font-size: clamp(48px,6vw,72px); color: var(--gold); line-height: 1; font-weight: normal; }
.letters-count__label { font-size: 12px; color: var(--w50); letter-spacing: 1px; margin-top: 4px; }
.letters-count-row { display: flex; align-items: baseline; gap: 24px; margin-bottom: 32px; }

.letters-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.rec-card {
  padding: 28px; border: 1px solid var(--card-bd); background: var(--card-bg);
  transition: border-color .4s;
}
.rec-card:hover { border-color: rgba(184,148,63,.15); }
.rec-card__mark { font-size: 48px; line-height: 1; color: rgba(184,148,63,.12); margin-bottom: 12px; }
.rec-card__quote { font-size: 15px; color: var(--w70); line-height: 1.8; font-style: italic; margin-bottom: 20px; }
.rec-card__attribution { display: flex; align-items: center; gap: 14px; }
.rec-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border-s); flex-shrink: 0; }
.rec-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rec-card__name { font-size: 20px; color: var(--white); }
.rec-card__role { font-size: 16px; color: var(--w55); }
.rec-card__actions { margin-top: 16px; }

/* Full letter blocks (letters page) — full-bleed photo + content layout */
.rec-block {
  display: flex; gap: 0; border: 1px solid var(--card-bd); background: var(--card-bg);
  overflow: hidden; position: relative; min-height: 300px;
  margin-bottom: 24px; transition: border-color .4s;
}
.rec-block:hover { border-color: rgba(184,148,63,.22); }
.rec-block__mark { font-size: 88px; line-height: .85; color: rgba(184,148,63,.25); margin-bottom: 10px; }
.rec-block__content {
  flex: 1; min-width: 0; padding: 32px 36px 28px;
  display: flex; flex-direction: column; position: relative; z-index: 1;
}
.rec-block__quote { font-size: 20px; color: var(--w70); line-height: 1.85; font-style: italic; margin-bottom: 0; transition: color .2s; }

/* ══════════════════════════════════════════════════════════════
   CONTACT HUB
══════════════════════════════════════════════════════════════ */
.contact-hub { display: flex; gap: 48px; align-items: flex-start; }
@media (max-width: 767px) { .contact-hub { flex-direction: column; } }
.contact-hub__left { flex: 1; }
.contact-hub__headline { font-size: clamp(20px,2.8vw,30px); font-weight: normal; color: var(--white); line-height: 1.3; margin-bottom: 12px; }
.contact-hub__sub { font-size: 15px; color: var(--w55); margin-bottom: 28px; }
.contact-hub__links { display: flex; flex-direction: column; gap: 12px; }
.contact-hub__link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--w50); }
.contact-hub__link strong { color: var(--white); font-weight: normal; min-width: 56px; }
.contact-hub__link a { color: var(--gold); transition: opacity .2s; }
.contact-hub__link a:hover { opacity: .8; }
.contact-hub__card { flex: 0 0 280px; padding: 28px; border: 1px solid var(--border-s); background: var(--gold-subtle); }
.contact-hub__availability { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.contact-hub__detail { font-size: 14px; color: var(--w50); line-height: 1.75; margin-bottom: 24px; }
@media (max-width: 767px) { .contact-hub__card { flex: none; width: 100%; } }

/* ══════════════════════════════════════════════════════════════
   CTA / FOOTER
══════════════════════════════════════════════════════════════ */
.cta { padding: var(--pad-lg); border-top: 1px solid var(--border); background: var(--navy); }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
@media (max-width: 767px) { .cta__inner { flex-direction: column; text-align: center; } }
.cta__content { flex: 1; }
.cta__label { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cta__label::before { content: none; }
.cta__headline { font-size: clamp(22px,3vw,30px); color: var(--white); line-height: 1.3; margin-bottom: 12px; font-weight: normal; }
.cta__loc { font-size: 14px; color: var(--w50); margin-bottom: 28px; }
.cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 767px) { .cta__buttons { justify-content: center; } }
.cta__brand { text-align: center; }
.footer-monogram { width: 76px; height: 76px; border: 1px solid rgba(184,148,63,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.footer-monogram span { font-size: 19px; color: var(--gold); letter-spacing: 1.5px; }
.footer-signoff { font-size: 13px; color: var(--gold); font-style: italic; margin-top: 14px; }

.site-footer {
  background: var(--navy); padding: 28px 40px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
@media (max-width: 767px) { .site-footer { padding: 24px; flex-direction: column; text-align: center; } }
.site-footer p { font-size: 13px; letter-spacing: .4px; color: var(--w45); margin: 0; }
/* Disclaimer spans the full footer width with a comfortable reading measure via line-height
   instead of a hard max-width. Padding matches .site-footer / .site-footer__bottom. */
.site-footer__disclaimer { font-size: 11px; color: var(--w45); margin-top: 16px; line-height: 1.6; text-align: center; max-width: none; }
.site-footer__bottom { background: var(--navy); padding: 0 40px 28px; border-top: none; }
@media (max-width: 767px) { .site-footer__bottom { padding: 0 24px 24px; } }

/* ══════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════════════════════════ */
.page-hero { padding: 72px 40px 48px; background: var(--navy); }
@media (max-width: 1023px) { .page-hero { padding: 68px 32px 40px; } }
@media (max-width: 767px)  { .page-hero { padding: 68px 20px 36px; } }
.page-hero__label { font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.page-hero__title { font-size: clamp(22px,3.2vw,40px); font-weight: normal; color: var(--white); margin-bottom: 12px; line-height: 1.2; white-space: nowrap; }
.page-hero__desc  { font-size: 17px; color: var(--w55); max-width: 560px; }

/* ══════════════════════════════════════════════════════════════
   PROSE (single post)
══════════════════════════════════════════════════════════════ */
.prose { max-width: 680px; margin: 0 auto; }
.prose__date { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 16px; }
.prose__title { font-size: clamp(26px,3.8vw,40px); color: var(--white); line-height: 1.2; margin-bottom: 16px; font-weight: normal; }
.prose__meta { font-size: 12px; color: var(--w50); margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.prose__body { font-size: 17px; color: var(--w70); line-height: 1.9; }
.prose__body p { margin-bottom: 1.5em; }
.prose__body h2 { font-size: 22px; color: var(--white); margin: 40px 0 16px; font-weight: normal; }
.prose__body h3 { font-size: 18px; color: var(--white); margin: 32px 0 12px; font-weight: normal; }
.prose__body blockquote { border-left: 2px solid var(--gold); padding: 4px 0 4px 20px; margin: 28px 0; font-style: italic; color: var(--w55); }
.prose__body a { color: var(--gold); border-bottom: 1px solid rgba(184,148,63,.25); }
.prose__body a:hover { border-color: var(--gold); }
.prose__body ul, .prose__body ol { margin: 16px 0; padding-left: 24px; }
.prose__body li { margin-bottom: 8px; }

.post-nav {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
  max-width: 680px; margin-left: auto; margin-right: auto; flex-wrap: wrap;
}
.post-nav a { font-size: 12px; color: var(--w50); transition: color .2s; max-width: 48%; }
.post-nav a:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   HUB UTILITIES
══════════════════════════════════════════════════════════════ */
.hub-sublabel {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px; display: block;
}
.hub-viewmore { margin-top: 36px; text-align: center; }

/* ══════════════════════════════════════════════════════════════
   404
══════════════════════════════════════════════════════════════ */
.page-404 { text-align: center; padding: 120px 36px; }
.page-404__code { font-size: clamp(80px,12vw,160px); color: rgba(184,148,63,.06); line-height: 1; margin-bottom: 16px; }
.page-404__title { font-size: 22px; color: var(--white); margin-bottom: 12px; font-weight: normal; }
.page-404__text { font-size: 14px; color: var(--w50); margin-bottom: 28px; }

/* ══════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: .15s; }
.reveal--d2 { transition-delay: .3s; }
.reveal--d3 { transition-delay: .45s; }
.reveal--d4 { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════════ */
@keyframes sweepUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 0%,100% { opacity: .12; transform: scale(1); } 50% { opacity: .2; transform: scale(1.08); } }
@keyframes float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes goldWave { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes borderSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ══════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--gold), rgba(184,148,63,.3));
  transform-origin: left; transform: scaleX(0);
  transition: transform .1s linear;
}

/* ══════════════════════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════════════════════ */
.back-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 150;
  width: 44px; height: 44px;
  background: var(--gold); color: var(--navy);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  transform: translateY(12px);
}
.back-top.is-visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-top:hover { transform: translateY(-3px); }
.back-top:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   PHOTO SECTION (full-bleed image with text)
══════════════════════════════════════════════════════════════ */
.photo-section {
  position: relative; overflow: hidden;
  min-height: 440px; display: flex; align-items: center;
}
.photo-section__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease;
  filter: brightness(0.35);
  /* Focal point — desktop default. Set per image via inline --obj-pos. */
  object-position: var(--obj-pos, center center);
}
/* Mobile uses --obj-pos-mobile if set, else falls back to --obj-pos */
@media (max-width: 767px) {
  .photo-section__img {
    object-position: var(--obj-pos-mobile, var(--obj-pos, center center));
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .photo-section__img {
    object-position: var(--obj-pos-tablet, var(--obj-pos, center center));
  }
}
/* Same fallback chain for grid photos on the about page */
.photo-grid__item img {
  object-position: var(--obj-pos, center center);
}
@media (max-width: 767px) {
  .photo-grid__item img {
    object-position: var(--obj-pos-mobile, var(--obj-pos, center center));
  }
}
.photo-section:hover .photo-section__img { transform: scale(1); }
/* Dark gradient overlay so the long body text stays readable on top of the
   photo regardless of which face/area lines up behind it. */
.photo-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to right, rgba(6,13,24,.85) 0%, rgba(6,13,24,.6) 60%, rgba(6,13,24,.3) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  /* On phones the text overlays the full width, so use a near-opaque overlay */
  .photo-section__img { filter: brightness(0.22); }
  .photo-section::before {
    background: linear-gradient(to bottom, rgba(6,13,24,.75) 0%, rgba(6,13,24,.92) 100%);
  }
}
.photo-section__content {
  position: relative; z-index: 1;
  padding: var(--pad); width: 100%;
}
.photo-section__label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.photo-section__title { font-size: clamp(24px,4vw,44px); font-weight: normal; color: var(--white); line-height: 1.2; margin-bottom: 16px; }
.photo-section__text  { font-size: 16px; color: var(--w70); line-height: 1.8; text-align: justify; text-justify: inter-word; hyphens: auto; }

/* ══════════════════════════════════════════════════════════════
   PHOTO GRID (about page)
══════════════════════════════════════════════════════════════ */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}
@media (max-width: 767px) { .photo-grid { grid-template-columns: 1fr 1fr; } }

.photo-grid__item {
  aspect-ratio: 1;
  overflow: hidden; position: relative;
  cursor: pointer;
}
.photo-grid__item--wide { grid-column: span 2; aspect-ratio: 2/1; }
.photo-grid__item img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--obj-pos, center center);
  transition: transform .6s ease, filter .6s ease;
  filter: brightness(.85);
}
.photo-grid__item:hover img { transform: scale(1.06); filter: brightness(1); }
.photo-grid__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(6,13,24,.85));
  padding: 24px 16px 12px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--w70); opacity: 0; transition: opacity .3s;
}
.photo-grid__item:hover .photo-grid__caption { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════════ */
.about-intro {
  /* Intro is now text-only; the lone headshot lives next to "Who I Am" further down */
  position: relative;
}
.about-intro__photo-bracket {
  position: absolute; top: -6px; left: -6px;
  width: 32px; height: 32px;
  border-top: 1px solid rgba(184,148,63,.4);
  border-left: 1px solid rgba(184,148,63,.4);
}

.about-body {
  font-size: 17px; color: var(--w55); line-height: 1.9;
  text-align: justify;
  /* Soften any awkward gaps when justification stretches a line too far */
  text-justify: inter-word; hyphens: auto;
}
.about-body p { margin-bottom: 1.4em; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--white); font-weight: normal; }

/* Render saved \n as visible line breaks in long-form text containers.
   Combined with the editor's Enter→<br>→\n round-trip, this lets paragraph
   breaks survive across save/reload on every editable text element. */
.about-body, .approach__sub, .philosophy-block__text, .photo-section__text,
.timeline__desc, .edu-block__desc, .work-card__excerpt, .blog-card__excerpt,
.rec-block__quote, .card__text, .pillar__text,
#js-quote-body, #js-approach-sub, #ab-intro-lead, #ab-roots-body p,
.cta__loc, .contact-hub__sub, .contact-hub__detail {
  white-space: pre-wrap;
}

.about-pillars {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
  margin-top: 0;
}
@media (max-width: 767px) { .about-pillars { grid-template-columns: 1fr; } }

/* Pillars + photo side-by-side: photo on the LEFT (first DOM child),
   pillars on the right take the full remaining width and stay in a 3-column grid. */
.pillars-with-photo {
  display: grid;
  grid-template-columns: 320px 1fr;   /* photo first → narrow left col; pillars second → wide right col */
  gap: 48px;
  align-items: start;
}
.pillars-with-photo .about-pillars {
  /* Keep the 3-column layout when there's room — only collapse on smaller screens */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.pillars-photo {
  position: relative;
  border: 1px solid var(--card-bd);
}
.pillars-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.pillars-photo__bracket {
  position: absolute; top: -6px; left: -6px; width: 32px; height: 32px;
  border-top: 1px solid rgba(184,148,63,.4);
  border-left: 1px solid rgba(184,148,63,.4);
  pointer-events: none; z-index: 2;
}
@media (max-width: 1023px) {
  .pillars-with-photo { grid-template-columns: 240px 1fr; gap: 32px; }
  .pillars-with-photo .about-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .pillars-with-photo { grid-template-columns: 1fr; gap: 32px; }
  .pillars-with-photo .about-pillars { grid-template-columns: 1fr; }
  .pillars-photo { max-width: 280px; margin: 0 auto; }
  /* Hide the entire photo block on mobile if no image is set — avoids the empty box */
  .pillars-photo:not(:has(img:not([src=""]))) { display: none; }
}

.pillar {
  padding: 28px; border: 1px solid var(--card-bd);
  background: var(--card-bg); position: relative; overflow: hidden;
  transition: all .4s;
}
.pillar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%;
  animation: borderSweep 2s linear infinite;
  opacity: 0; transition: opacity .4s;
}
.pillar:hover { transform: translateY(-3px); border-color: rgba(184,148,63,.2); }
.pillar:hover::before { opacity: 1; }
.pillar__icon { font-size: 24px; margin-bottom: 16px; }
.pillar__title { font-size: 16px; color: var(--white); margin-bottom: 8px; }
.pillar__text  { font-size: 14px; color: var(--w50); line-height: 1.75; }

/* Stats row — distribute evenly across the full width */
.stats-row { display: flex; gap: 32px; flex-wrap: wrap; padding: 40px 0; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat { flex: 1 1 auto; min-width: 0; }
.stat__number { font-size: clamp(36px,5vw,56px); color: var(--gold); line-height: 1; font-weight: normal; }
.stat__label  { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--w50); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   ENHANCED CARD HOVER (upgrade existing cards)
══════════════════════════════════════════════════════════════ */
.card {
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease,
              box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(184,148,63,.15);
}

/* ══════════════════════════════════════════════════════════════
   STAGGER REVEAL
══════════════════════════════════════════════════════════════ */
.stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0s; }
.stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.1s; }
.stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.2s; }
.stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.3s; }
.stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.4s; }
.stagger.is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.5s; }
.stagger.is-visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:.6s; }
.stagger.is-visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:.7s; }

/* ════════════════════════════════════════════════��═════════════
   REC-BLOCK PHOTO COLUMN (letters page)
══════════════════════════════════════════════════════════════ */
.rec-block__photo-wrap {
  flex: 0 0 210px; position: relative; overflow: hidden; display: block;
  text-decoration: none;
}
.rec-block__photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; transition: transform .6s ease, filter .5s ease;
  filter: brightness(.88) saturate(.85);
}
.rec-block__photo-wrap:hover img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.rec-block__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,13,24,.7) 0%, transparent 55%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  opacity: 0; transition: opacity .3s; z-index: 2;
}
.rec-block__photo-wrap:hover .rec-block__photo-overlay { opacity: 1; }
.rec-block__photo-overlay span {
  font-family: var(--sans); font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(184,148,63,.4); padding-bottom: 2px;
}
.rec-block__quote-link { display: block; text-decoration: none; }
.rec-block__quote-link:hover .rec-block__quote { color: var(--w70); }
.rec-block__meta { margin-top: auto; padding-top: 20px; }
.rec-block__org-link {
  font-size: 14px; letter-spacing: 1.5px; color: var(--gold);
  margin-top: 6px; display: inline-block; transition: opacity .2s;
}
.rec-block__org-link:hover { opacity: .75; }
.rec-block__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 767px) {
  .rec-block { flex-direction: column !important; }
  .rec-block__photo-wrap { flex: none !important; width: 100% !important; height: 220px; }
}

/* ══════════════════════════════════════════════════════════════
   MOUSE-TRACKING GOLD SHIMMER
   JS sets --gx / --gy on each hovered element
══════════════════════════════════════════════════════════════ */
.card::after, .work-card::after, .pillar::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.13) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.card:hover::after, .work-card:hover::after, .pillar:hover::after { opacity: 1; }

/* Blog cards — borderSweep + glow */
.blog-card { position: relative; }
.blog-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: borderSweep 2s linear infinite;
}
.blog-card:hover::before { opacity: 1; }
.blog-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.1) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.blog-card:hover::after { opacity: 1; }

/* Rec cards */
.rec-card { position: relative; overflow: hidden; }
.rec-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: borderSweep 2s linear infinite;
}
.rec-card:hover::before { opacity: 1; }
.rec-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.1) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.rec-card:hover::after { opacity: 1; }

/* Rec blocks shimmer */
.rec-block::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: borderSweep 2s linear infinite; z-index: 2;
}
.rec-block:hover::before { opacity: 1; }
.rec-block::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.06) 0%, transparent 55%);
  opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 0;
}
.rec-block:hover::after { opacity: 1; }

/* Buttons */
.btn--outline, .btn--ghost { position: relative; overflow: hidden; }
.btn--outline::after, .btn--ghost::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.18) 0%, transparent 65%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.btn--outline:hover::after, .btn--ghost:hover::after { opacity: 1; }

/* Filter buttons */
.filter-bar__btn { position: relative; overflow: hidden; }
.filter-bar__btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(184,148,63,.15) 0%, transparent 65%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.filter-bar__btn:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   RESUME DOWNLOAD CTA BAND
══════════════════════════════════════════════════════════════ */
.resume-cta-band {
  padding: 88px 56px; background: var(--navy-light);
  text-align: center; position: relative; overflow: hidden;
}
.resume-cta-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.resume-cta-band::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.resume-cta-band__glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 360px;
  background: radial-gradient(ellipse, rgba(184,148,63,.09) 0%, transparent 70%);
  pointer-events: none;
}
.resume-cta-band__inner { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; }
.resume-cta-band__eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.resume-cta-band__headline {
  font-size: clamp(28px, 3.5vw, 46px); font-weight: normal;
  color: var(--white); line-height: 1.2; margin-bottom: 16px;
}
.resume-cta-band__sub {
  font-size: 16px; color: var(--w55); line-height: 1.85;
  max-width: 460px; margin: 0 auto 36px;
}
.resume-cta-band__actions {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.resume-cta-band .btn--primary { font-size: 13px; padding: 15px 40px; }
.resume-cta-band .btn--outline  { font-size: 13px; padding: 15px 32px; }
@media (max-width: 767px) { .resume-cta-band { padding: 64px 24px; } }

/* ══════════════════════════════════════════════════════════════
   PHOTO GRID EDITOR CONTROLS (about page)
══════════════════════════════════════════════════════════════ */
.photo-grid__item { cursor: pointer; }
.photo-grid__item img { will-change: transform; }

/* Deeper parallax layers */
[data-parallax] { will-change: transform; }

/* ══════════════════════════════════════════════════════════════
   PHOTO SECTION — no entrance animation (already dramatic images)
══════════════════════════════════════════════════════════════ */
.photo-section.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════
   DRAG-AND-DROP SECTION REORDERING (about page, edit mode)
══════════════════════════════════════════════════════════════ */
.ve-section-drag-handle {
  display: none;
}
body.__ve-edit .ve-section-drag-handle {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 10px; right: 14px; z-index: 9999;
  width: 32px; height: 32px; cursor: grab;
  background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.4);
  border-radius: 6px; color: #c9a84c; font-size: 14px;
  user-select: none;
}
body.__ve-edit .ve-section-drag-handle:active { cursor: grabbing; }
body.__ve-edit [data-section-key] {
  position: relative;
  outline: 1px dashed rgba(201,168,76,.15);
}
body.__ve-edit [data-section-key].ve-drag-over {
  outline: 2px solid rgba(201,168,76,.6);
}
[data-section-key].ve-dragging { opacity: 0.4; }

/* Resume bullet list styling */
.timeline__bullets {
  margin: 6px 0 0 0; padding-left: 1.3em;
  list-style: none;
}
.timeline__bullets li {
  font-size: 15px; color: var(--w55); line-height: 1.7;
  margin-bottom: 4px; position: relative;
}
.timeline__bullets li::before {
  content: '–'; position: absolute; left: -1.2em;
  color: var(--gold-dim);
}
.edu-block__bullets {
  margin: 6px 0 0 0; padding-left: 1.3em;
  list-style: none;
}
.edu-block__bullets li {
  font-size: 15px; color: var(--w55); line-height: 1.7;
  margin-bottom: 4px; position: relative;
}
.edu-block__bullets li::before {
  content: '–'; position: absolute; left: -1.2em;
  color: var(--gold-dim);
}

/* ── Visual editor v2 — card sort handles ─────────────────────────── */
.ve-drag-handle--card {
  display: none;
}
body.__ve-edit .ve-drag-handle--card {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 10px; right: 10px; z-index: 100;
  width: 28px; height: 28px; cursor: grab;
  background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.4);
  border-radius: 5px; color: #c9a84c; font-size: 14px;
  user-select: none; pointer-events: auto;
}
body.__ve-edit .ve-drag-handle--card:active { cursor: grabbing; }
body.__ve-edit .ve-sortable > * { position: relative; }
body.__ve-edit .ve-sortable > .ve-dragging { opacity: 0.3 !important; }
body.__ve-edit .ve-sortable > .ve-drag-over { outline: 2px solid rgba(201,168,76,.5); }