/*
Theme Name: Eric Clay Portfolio
Theme URI: https://ericnclay.com
Author: Eric Clay
Description: Custom portfolio theme for ericnclay.com
Version: 1.1.0
License: Private
Text Domain: eric-clay-portfolio
*/

/* ═══════════════════════════════════════════════════════
   POMPEII DUST — ericnclay.com
   Eric Clay: Portfolio & Blog
   Volcanic dark / fresco warm / archaeological layers
   ═══════════════════════════════════════════════════════ */

:root {
  --volcanic:   #0C0907;
  --ash-deep:   #141009;
  --char:       #1C1510;
  --dark-clay:  #2A1E13;
  --ochre-dark: #3D2714;
  --terra:      #8B3A1A;
  --terra-lo:   #3D1A0C;
  --terra-mid:  #5C2812;
  --rust:       #C45328;
  --rust-warm:  #D4622E;
  --sand:       #D4AA78;
  --sand-lo:    #8A6A48;
  --fresco:     #C4A882;
  --fresco-lo:  #8A7050;
  --fresco-hi:  #DFC9A8;
  --bone:       #EAD9BE;
  --old-ivory:  #F2E8D8;
  --smoke:      #A89078;
  --ash-gray:   #B8A090;
  --fresco-b:   #7A9EA8;
  --blue-dim:   #3A5A64;

  --fd: 'DM Serif Display', serif;
  --fb: 'Source Serif 4', serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--volcanic);
  color: var(--bone);
  font-family: var(--fb);
  font-size:17px;
  line-height:1.85;
  overflow-x:hidden;
}

/* Admin bar offsets */
body.admin-bar nav { top: 32px; }
body.admin-bar .nav-mobile-overlay { top: calc(68px + 32px); }
@media (max-width: 782px) {
  body.admin-bar nav { top: 46px; }
  body.admin-bar .nav-mobile-overlay { top: calc(68px + 46px); }
}

/* ── WARM GRAIN TEXTURE ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:9997;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  opacity:0.65;
  mix-blend-mode:overlay;
}

/* Edge vignette */
body::after {
  content:'';
  position:fixed; inset:0; z-index:9996;
  pointer-events:none;
  background: radial-gradient(ellipse 110% 110% at 50% 50%, transparent 55%, rgba(12,9,7,0.55) 100%);
}

/* ── NAV ── */
nav {
  position:fixed; top:0; width:100%; z-index:500;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4.5rem;
  background: rgba(12,9,7,0.0);
  backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition: background 0.5s, border-color 0.5s, backdrop-filter 0.5s;
}
nav.scrolled {
  background: rgba(12,9,7,0.92);
  backdrop-filter:blur(16px);
  border-bottom-color: rgba(180,140,100,0.12);
}

.nav-logo {
  font-family: var(--fd);
  font-size:1rem;
  color: var(--fresco);
  text-decoration:none;
  letter-spacing:0.06em;
  font-style:italic;
  transition: color 0.3s;
}
.nav-logo:hover { color:var(--sand); }

.nav-right { display:flex; align-items:center; gap:3.5rem; }

.nav-links { display:flex; gap:2.8rem; list-style:none; }
.nav-links a {
  font-family: var(--fb);
  font-size:0.8rem; font-weight:300;
  letter-spacing:0.14em;
  color: var(--smoke);
  text-decoration:none;
  transition: color 0.3s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:-3px; left:0;
  width:0; height:1px;
  background:var(--terra);
  transition:width 0.3s ease;
}
.nav-links a:hover { color: var(--fresco); }
.nav-links a:hover::after { width:100%; }

.nav-contact {
  font-family: var(--fb);
  font-size:0.78rem; font-weight:300;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--volcanic);
  background: var(--terra);
  padding:0.55rem 1.4rem;
  text-decoration:none;
  transition: background 0.3s;
}
.nav-contact:hover { background:var(--rust); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  margin-left:1rem;
}
.nav-hamburger span {
  display:block;
  width:22px; height:1px;
  background:var(--fresco);
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ── */
.nav-mobile-overlay {
  display:none;
  position:fixed;
  top:68px; left:0; right:0;
  background:rgba(12,9,7,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(180,140,100,0.12);
  z-index:499;
  padding:2rem 1.6rem 2.5rem;
  transform:translateY(-110%);
  transition:transform 0.35s ease;
}
.nav-mobile-overlay.open { transform:translateY(0); }
.nav-mobile-overlay ul { list-style:none; }
.nav-mobile-overlay ul li {
  border-bottom:1px solid rgba(180,140,100,0.07);
}
.nav-mobile-overlay ul a {
  display:block;
  padding:1.1rem 0;
  font-family:var(--fd);
  font-size:1.5rem; font-style:italic;
  color:var(--fresco);
  text-decoration:none;
  letter-spacing:0.03em;
  transition:color 0.2s, padding-left 0.2s;
}
.nav-mobile-overlay ul a:hover { color:var(--sand); padding-left:0.4rem; }
.nav-contact-mobile {
  display:block;
  margin-top:2rem;
  font-family:var(--fb);
  font-size:0.78rem; font-weight:300;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--volcanic);
  background:var(--terra);
  padding:1rem 1.4rem;
  text-decoration:none;
  text-align:center;
  transition:background 0.3s;
}
.nav-contact-mobile:hover { background:var(--rust); }

/* ── HERO ── */
.hero {
  min-height:100vh;
  padding-top:68px;
  display:grid;
  grid-template-columns:1fr;
  position:relative;
  overflow:hidden;
}

.hero-fresco-panel {
  position:absolute;
  top:0; right:0;
  width:42%;
  height:100%;
  overflow:hidden;
  clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.fresco-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(175deg, var(--ochre-dark) 0%, var(--char) 60%, var(--volcanic) 100%);
}

.fresco-bg::before {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(42deg, transparent, transparent 28px, rgba(196,168,100,0.025) 28px, rgba(196,168,100,0.025) 29px),
    repeating-linear-gradient(-18deg, transparent, transparent 44px, rgba(139,58,26,0.02) 44px, rgba(139,58,26,0.02) 45px);
}

.fresco-bg::after {
  content:'';
  position:absolute;
  top:15%; left:15%; right:0; bottom:15%;
  background:
    linear-gradient(185deg,
      transparent 0%,
      rgba(139,58,26,0.12) 20%,
      rgba(196,83,40,0.09) 38%,
      rgba(122,158,168,0.07) 58%,
      rgba(74,90,50,0.05) 75%,
      transparent 100%
    );
}

.fresco-arch {
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0.18;
  animation: frescofade 2s 1s ease both;
}
.fresco-arch svg { width:70%; height:70%; }

@keyframes frescofade {
  from { opacity:0; }
  to   { opacity:0.18; }
}

.hero-fresco-panel::after {
  content:'';
  position:absolute; top:0; right:0; bottom:0;
  width:30%;
  background: linear-gradient(90deg, transparent, rgba(12,9,7,0.5));
}

.hero-fresco-panel::before {
  content:'';
  position:absolute; top:0; left:0; bottom:0;
  width:6%;
  background: linear-gradient(90deg, rgba(12,9,7,0.3), transparent);
  z-index:2;
}

.hero-content {
  padding:8rem 4rem 6rem 5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative; z-index:1;
}

.hero-content::before {
  content:'';
  position:absolute;
  left:0; top:68px; bottom:0;
  width:2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--terra-lo) 15%,
    var(--terra) 45%,
    var(--terra-mid) 65%,
    transparent 100%);
  opacity:0.5;
}

.hero-overline {
  font-family: var(--fd);
  font-size:0.72rem;
  font-style:italic;
  color: var(--fresco-lo);
  letter-spacing:0.22em;
  margin-bottom:2.8rem;
  display:flex; align-items:center; gap:1.5rem;
  opacity:0; animation: emerge 1.1s 0.15s ease both;
}
.hero-overline::before {
  content:'';
  width:36px; height:1px;
  background: var(--terra-lo);
}

.hero-name {
  font-family: var(--fd);
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  font-weight:400;
  line-height:0.93;
  color: var(--bone);
  letter-spacing:-0.015em;
  opacity:0; animation: emerge 1.2s 0.32s ease both;
}
.hero-name span { display:block; }
.hero-name .italic-line {
  font-style:italic;
  color: var(--rust);
}

.hero-rule {
  width:72px; height:1px;
  background: linear-gradient(90deg, var(--terra), transparent);
  margin:3rem 0;
  opacity:0; animation: emerge 1s 0.52s ease both;
}

.hero-desc {
  font-family: var(--fb);
  font-size:1rem; font-weight:300;
  color: var(--smoke);
  max-width:460px;
  line-height:1.92;
  margin-bottom:3.5rem;
  opacity:0; animation: emerge 1.1s 0.68s ease both;
}

.hero-cta {
  display:flex; gap:2.2rem; align-items:center;
  opacity:0; animation: emerge 1s 0.84s ease both;
}

.btn-primary {
  font-family: var(--fb);
  font-size:0.8rem; font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--volcanic);
  background: var(--rust);
  padding:1.05rem 2.8rem;
  text-decoration:none;
  border:1px solid var(--rust);
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
  opacity:0;
  transition:opacity 0.3s;
}
.btn-primary:hover { background:var(--sand); border-color:var(--sand); transform:translateY(-2px); }
.btn-primary:hover::after { opacity:1; }

.btn-text {
  font-family: var(--fb);
  font-size:0.8rem; font-weight:300;
  letter-spacing:0.18em;
  color: var(--fresco);
  text-decoration:none;
  border-bottom:1px solid var(--fresco-lo);
  padding-bottom:2px;
  transition: color 0.3s, border-color 0.3s;
}
.btn-text:hover { color:var(--sand); border-color:var(--sand); }

.hero-scroll {
  position:absolute; bottom:3rem; left:5rem;
  display:flex; align-items:center; gap:1rem;
  opacity:0; animation:emerge 1s 1.4s ease both;
}
.hero-scroll span {
  font-family:var(--fd);
  font-size:0.62rem; font-style:italic;
  color:var(--fresco-lo); letter-spacing:0.2em;
}
.hero-scroll-line {
  width:40px; height:1px;
  background: var(--terra-lo);
  position:relative; overflow:hidden;
}
.hero-scroll-line::after {
  content:'';
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background: var(--terra);
  animation:slide 2s 2s ease infinite;
}
@keyframes slide {
  0%  { left:-100%; }
  100%{ left:100%; }
}

/* ── FRACTURE DIVIDER ── */
.fracture {
  position:relative; height:1px; margin:0;
}
.fracture::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--terra-lo) 12%,
    var(--terra) 38%,
    var(--fresco-lo) 65%,
    var(--terra-lo) 85%,
    transparent 100%);
  opacity:0.45;
}
.fracture::after {
  content:'';
  position:absolute;
  top:3px; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 20%,
    rgba(180,140,100,0.08) 45%,
    rgba(180,140,100,0.08) 55%,
    transparent 80%);
}

/* ── SECTIONS ── */
.section { padding:9rem 5rem; position:relative; }
.section.warm { background: var(--ash-deep); }
.section.char  { background: var(--char); }

.section-label {
  font-family: var(--fd);
  font-size:0.7rem;
  font-style:italic;
  color: var(--terra);
  letter-spacing:0.14em;
  margin-bottom:0.9rem;
  display:flex; align-items:center; gap:1rem;
}
.section-label::before {
  content:'';
  width:24px; height:1px;
  background: var(--terra-lo);
}

h2 {
  font-family: var(--fd);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight:400;
  line-height:1.04;
  margin-bottom:2rem;
  letter-spacing:-0.01em;
}
h2 em { font-style:italic; color:var(--rust); }

/* ── ABOUT ── */
.about-body {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:4rem 6rem;
  align-items:start;
  margin-top:5rem;
}

.about-photo {
  position:relative;
  align-self:start;
}

.about-photo img {
  width:100%;
  display:block;
  filter: sepia(0.3) contrast(1.08) brightness(0.88) saturate(0.85);
  border:1px solid var(--terra-lo);
  transition: filter 0.5s ease;
}
.about-photo:hover img {
  filter: sepia(0.15) contrast(1.05) brightness(0.92) saturate(0.95);
}

.about-photo::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(175deg,
    rgba(139,58,26,0.12) 0%,
    transparent 50%,
    rgba(92,40,18,0.08) 100%);
  pointer-events:none;
  z-index:1;
  transition: opacity 0.5s;
}
.about-photo:hover::before { opacity:0.5; }

.about-photo::after {
  content:'Eric Clay';
  font-family: var(--fd);
  font-size:0.62rem; font-style:italic;
  color: var(--fresco-lo);
  letter-spacing:0.2em;
  display:block;
  text-align:right;
  padding:0.7rem 0 0;
}

.about-text p {
  font-family: var(--fb);
  font-size:1rem; font-weight:300;
  color: var(--smoke);
  margin-bottom:1.8rem;
  line-height:1.92;
}
.about-text strong { color:var(--fresco); font-weight:400; }

.about-quote {
  font-family: var(--fd);
  font-size:1.35rem;
  font-style:italic;
  color: var(--fresco);
  line-height:1.5;
  border-left:2px solid var(--terra);
  padding:0.4rem 0 0.4rem 2.2rem;
  margin:3rem 0;
  opacity:0.9;
}

/* ── EXPERTISE ── */
.expertise-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:5rem;
  background: rgba(139,58,26,0.15);
}

.expertise-card {
  background: var(--char);
  padding:3rem 2.5rem;
  position:relative;
  overflow:hidden;
  transition: background 0.3s;
}
.expertise-card:hover { background: var(--dark-clay); }

.expertise-card::after {
  content:'';
  position:absolute; bottom:0; left:0;
  width:0; height:2px;
  background: var(--rust);
  transition:width 0.4s ease;
}
.expertise-card:hover::after { width:100%; }

.ec-icon {
  font-size:1.6rem;
  margin-bottom:1.8rem;
  display:block;
  line-height:1;
  filter: sepia(0.3) brightness(0.8);
}

.ec-title {
  font-family: var(--fd);
  font-size:1rem;
  color: var(--fresco);
  margin-bottom:1rem;
  line-height:1.2;
  transition: color 0.3s;
}
.expertise-card:hover .ec-title { color:var(--sand); }

.ec-body {
  font-family: var(--fb);
  font-size:0.87rem; font-weight:300;
  color: var(--smoke);
  line-height:1.8;
}

/* ── PUBLICATIONS ── */
.pub-list {
  margin-top:5rem;
}

.pub-year-group {
  margin-bottom:4rem;
}

.pub-year-label {
  font-family: var(--fd);
  font-size:0.65rem; font-style:italic;
  color: var(--terra);
  letter-spacing:0.25em;
  margin-bottom:0.8rem;
  padding-bottom:0.8rem;
  border-bottom:1px solid var(--terra-lo);
  display:flex; align-items:center; gap:1rem;
}

.pub-row {
  display:grid;
  grid-template-columns:1fr 200px 120px;
  gap:2rem;
  align-items:center;
  padding:1.6rem 0 1.6rem 1.2rem;
  border-bottom:1px solid rgba(180,140,100,0.07);
  position:relative;
  transition: padding-left 0.25s ease;
  text-decoration:none;
}
.pub-row::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0; width:2px;
  background: var(--rust);
  transform:scaleY(0); transform-origin:bottom;
  transition: transform 0.35s ease;
}
.pub-row:hover { padding-left:2rem; }
.pub-row:hover::before { transform:scaleY(1); transform-origin:top; }

.pub-title {
  font-family: var(--fd);
  font-size:1rem; font-weight:400;
  color: var(--bone);
  line-height:1.3;
  transition: color 0.25s;
}
.pub-row:hover .pub-title { color:var(--sand); }

.pub-venue {
  font-family: var(--fd);
  font-size:0.7rem; font-style:italic;
  color: var(--fresco-lo);
  letter-spacing:0.06em;
  line-height:1.4;
}

.pub-type {
  font-family: var(--fb);
  font-size:0.62rem; font-weight:300;
  color: var(--terra);
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-align:right;
  transition: color 0.25s;
}
.pub-row:hover .pub-type { color:var(--rust); }

a.pub-row .pub-title::after {
  content:' ↗';
  font-size:0.75rem;
  color: var(--fresco-lo);
  transition: color 0.25s;
}
a.pub-row:hover .pub-title::after { color:var(--fresco); }

/* ── BLOG — FRONT PAGE CARDS ── */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:5rem;
  background: rgba(139,58,26,0.15);
}

.blog-card {
  background: var(--char);
  padding:2.5rem;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  transition: background 0.3s;
}
.blog-card:hover { background: var(--dark-clay); }

.blog-card::after {
  content:'';
  position:absolute; bottom:0; left:0;
  width:0; height:2px;
  background: var(--rust);
  transition:width 0.4s ease;
}
.blog-card:hover::after { width:100%; }

.blog-card-meta {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.1rem;
}
.blog-card-date {
  font-family:var(--fd);
  font-size:0.65rem; font-style:italic;
  color:var(--terra);
  letter-spacing:0.18em;
}
.blog-card-cat {
  font-family:var(--fb);
  font-size:0.6rem; font-weight:300;
  color:var(--smoke);
  letter-spacing:0.15em;
  text-transform:uppercase;
}

.blog-card-title {
  font-family:var(--fd);
  font-size:1.1rem;
  color:var(--bone);
  line-height:1.3;
  margin-bottom:1rem;
  transition: color 0.25s;
}
.blog-card:hover .blog-card-title { color:var(--sand); }

.blog-card-excerpt {
  font-family:var(--fb);
  font-size:0.87rem; font-weight:300;
  color:var(--smoke);
  line-height:1.8;
  flex:1;
  margin-bottom:1.5rem;
}

.blog-card-read {
  font-family:var(--fd);
  font-size:0.72rem; font-style:italic;
  color:var(--fresco-lo);
  letter-spacing:0.12em;
  margin-top:auto;
  transition: color 0.25s;
}
.blog-card:hover .blog-card-read { color:var(--fresco); }

.blog-view-all {
  display:inline-block;
  margin-top:3rem;
  font-family:var(--fb);
  font-size:0.78rem; font-weight:300;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fresco);
  text-decoration:none;
  border-bottom:1px solid var(--fresco-lo);
  padding-bottom:2px;
  transition: color 0.3s, border-color 0.3s;
}
.blog-view-all:hover { color:var(--sand); border-color:var(--sand); }

.blog-empty {
  margin-top:5rem;
  padding:5rem;
  border:1px solid rgba(180,140,100,0.1);
  text-align:center;
}
.blog-empty-label {
  font-family: var(--fd);
  font-size:1.4rem; font-style:italic;
  color: var(--fresco);
  margin-bottom:1rem;
}
.blog-empty-sub {
  font-family: var(--fb);
  font-size:0.92rem; font-weight:300;
  color: var(--smoke);
  line-height:1.8;
}

/* ── BLOG ARCHIVE (home.php) ── */
.blog-archive-hero {
  min-height:38vh;
  padding-top:68px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:5rem;
  padding-left:5rem;
  padding-right:5rem;
  position:relative;
  overflow:hidden;
  background: linear-gradient(175deg, var(--ochre-dark) 0%, var(--char) 50%, var(--volcanic) 100%);
}
.blog-archive-hero::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(42deg, transparent, transparent 28px, rgba(196,168,100,0.018) 28px, rgba(196,168,100,0.018) 29px);
}

.blog-archive-overline {
  font-family:var(--fd);
  font-size:0.7rem; font-style:italic;
  color:var(--fresco-lo);
  letter-spacing:0.22em;
  margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem;
  position:relative; z-index:1;
}
.blog-archive-overline::before {
  content:'';
  width:28px; height:1px;
  background:var(--terra-lo);
}

.blog-archive-title {
  font-family:var(--fd);
  font-size:clamp(3rem, 7vw, 6rem);
  font-weight:400;
  line-height:0.96;
  color:var(--bone);
  letter-spacing:-0.015em;
  position:relative; z-index:1;
}
.blog-archive-title em { font-style:italic; color:var(--rust); }

.archive-list {
  padding:6rem 5rem;
  background:var(--volcanic);
}

.archive-post {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:0 3rem;
  padding:2.8rem 0 2.8rem 1.2rem;
  border-bottom:1px solid rgba(180,140,100,0.07);
  position:relative;
  text-decoration:none;
  transition: padding-left 0.25s ease;
}
.archive-post::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0; width:2px;
  background:var(--rust);
  transform:scaleY(0); transform-origin:bottom;
  transition: transform 0.35s ease;
}
.archive-post:hover { padding-left:2rem; }
.archive-post:hover::before { transform:scaleY(1); transform-origin:top; }

.archive-post-date {
  font-family:var(--fd);
  font-size:0.65rem; font-style:italic;
  color:var(--terra);
  letter-spacing:0.18em;
  padding-top:0.35rem;
  line-height:1.4;
}

.archive-post-body { display:flex; flex-direction:column; gap:0.6rem; }

.archive-post-title {
  font-family:var(--fd);
  font-size:clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight:400;
  color:var(--bone);
  line-height:1.25;
  transition: color 0.25s;
}
.archive-post:hover .archive-post-title { color:var(--sand); }
.archive-post-title::after {
  content:' ↗';
  font-size:0.8rem;
  color:var(--fresco-lo);
  transition: color 0.25s;
}
.archive-post:hover .archive-post-title::after { color:var(--fresco); }

.archive-post-excerpt {
  font-family:var(--fb);
  font-size:0.9rem; font-weight:300;
  color:var(--smoke);
  line-height:1.8;
  max-width:680px;
}

.archive-post-cats {
  display:flex; flex-wrap:wrap; gap:0.6rem;
  margin-top:0.4rem;
}
.archive-post-cat {
  font-family:var(--fb);
  font-size:0.6rem; font-weight:300;
  color:var(--terra);
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ── PAGINATION ── */
.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.5rem;
  padding:4rem 5rem;
}
.pagination .page-numbers {
  font-family:var(--fd);
  font-size:0.85rem; font-style:italic;
  color:var(--smoke);
  text-decoration:none;
  padding:0.5rem 1rem;
  border:1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color:var(--fresco);
  border-color:var(--terra-lo);
}
.pagination .prev, .pagination .next {
  font-family:var(--fb);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* ── SINGLE POST ── */
.single-hero {
  min-height:55vh;
  padding-top: calc(68px + 5rem);
  padding-bottom:5rem;
  padding-left:5rem;
  padding-right:5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  background: linear-gradient(175deg, var(--ochre-dark) 0%, var(--char) 55%, var(--volcanic) 100%);
  overflow:hidden;
}
.single-hero::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(42deg, transparent, transparent 28px, rgba(196,168,100,0.018) 28px, rgba(196,168,100,0.018) 29px);
  pointer-events:none;
}

.single-back {
  font-family:var(--fd);
  font-size:0.7rem; font-style:italic;
  color:var(--fresco-lo);
  letter-spacing:0.18em;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:0.6rem;
  transition: color 0.25s;
  position:absolute;
  top: calc(68px + 1.5rem);
  left: 5rem;
  z-index:1;
}
.single-back:hover { color:var(--fresco); }
.single-back::before { content:'←'; }

.single-meta {
  display:flex; align-items:center; gap:1.5rem;
  margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.single-date {
  font-family:var(--fd);
  font-size:0.68rem; font-style:italic;
  color:var(--terra);
  letter-spacing:0.2em;
}
.single-cats {
  display:flex; gap:0.8rem;
}
.single-cat {
  font-family:var(--fb);
  font-size:0.6rem; font-weight:300;
  color:var(--smoke);
  letter-spacing:0.15em;
  text-transform:uppercase;
  text-decoration:none;
  transition: color 0.2s;
}
.single-cat:hover { color:var(--fresco); }

.single-title {
  font-family:var(--fd);
  font-size:clamp(2.2rem, 5vw, 4rem);
  font-weight:400;
  line-height:1.05;
  color:var(--bone);
  letter-spacing:-0.01em;
  max-width:820px;
  position:relative; z-index:1;
}

.single-content-wrap {
  padding:6rem 5rem;
  background:var(--volcanic);
}

.single-content {
  max-width:720px;
  margin:0 auto;
}

.single-content p,
.single-content li {
  font-family:var(--fb);
  font-size:1.05rem; font-weight:300;
  color:var(--smoke);
  line-height:1.95;
  margin-bottom:1.8rem;
}

.single-content h2 {
  font-family:var(--fd);
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  font-weight:400;
  color:var(--fresco-hi);
  margin:3.5rem 0 1.2rem;
  letter-spacing:-0.01em;
}
.single-content h2 em { font-style:italic; color:var(--rust); }

.single-content h3 {
  font-family:var(--fd);
  font-size:1.3rem; font-style:italic;
  color:var(--fresco);
  margin:2.5rem 0 0.8rem;
}

.single-content a {
  color:var(--fresco);
  text-decoration:none;
  border-bottom:1px solid var(--fresco-lo);
  transition: color 0.2s, border-color 0.2s;
}
.single-content a:hover { color:var(--sand); border-color:var(--sand); }

.single-content strong { color:var(--fresco-hi); font-weight:400; }
.single-content em { font-style:italic; }

.single-content blockquote {
  border-left:2px solid var(--terra);
  padding:0.4rem 0 0.4rem 2rem;
  margin:2.5rem 0;
}
.single-content blockquote p {
  font-family:var(--fd);
  font-size:1.2rem; font-style:italic;
  color:var(--fresco);
  line-height:1.55;
  margin-bottom:0;
}

.single-content pre {
  background:var(--char);
  border:1px solid rgba(180,140,100,0.1);
  border-left:2px solid var(--terra-lo);
  padding:1.5rem 1.8rem;
  margin:2rem 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.single-content code {
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size:0.85rem;
  color:var(--sand-lo);
  line-height:1.6;
}
.single-content p code {
  background:var(--char);
  padding:0.15em 0.45em;
  border-radius:2px;
  font-size:0.88em;
  color:var(--fresco);
}

.single-content ul,
.single-content ol {
  padding-left:1.5rem;
  margin-bottom:1.8rem;
}
.single-content li { margin-bottom:0.5rem; }

.single-content img {
  max-width:100%;
  height:auto;
  display:block;
  margin:2.5rem auto;
  border:1px solid var(--terra-lo);
  filter: sepia(0.15) contrast(1.05) brightness(0.9);
}

.single-content figure { margin:2.5rem 0; }
.single-content figcaption {
  font-family:var(--fd);
  font-size:0.68rem; font-style:italic;
  color:var(--fresco-lo);
  letter-spacing:0.12em;
  text-align:center;
  margin-top:0.7rem;
}

.single-content hr {
  border:none;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--terra-lo) 30%, var(--terra) 50%, var(--terra-lo) 70%, transparent);
  margin:3.5rem 0;
  opacity:0.4;
}

.single-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:5rem;
  background: rgba(139,58,26,0.15);
}

.single-nav-link {
  background:var(--char);
  padding:2rem 2.5rem;
  text-decoration:none;
  transition: background 0.3s;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.single-nav-link:hover { background:var(--dark-clay); }

.single-nav-link.next { text-align:right; }

.single-nav-dir {
  font-family:var(--fd);
  font-size:0.62rem; font-style:italic;
  color:var(--terra);
  letter-spacing:0.2em;
}

.single-nav-title {
  font-family:var(--fd);
  font-size:1rem;
  color:var(--bone);
  line-height:1.3;
  transition: color 0.25s;
}
.single-nav-link:hover .single-nav-title { color:var(--sand); }

/* ── CONTACT ── */
.contact-inner {
  max-width:680px;
  margin:5rem auto 0;
  text-align:center;
}

.contact-inner p {
  font-family: var(--fb);
  font-size:1.05rem; font-weight:300;
  color: var(--smoke);
  line-height:1.9;
  margin-bottom:3.5rem;
}

.contact-email {
  display:block;
  font-family: var(--fd);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-style:italic;
  color: var(--fresco);
  text-decoration:none;
  margin-bottom:3rem;
  transition: color 0.3s;
  letter-spacing:0.02em;
}
.contact-email:hover { color:var(--sand); }

.contact-links {
  display:flex; gap:3rem; justify-content:center; list-style:none;
}
.contact-links a {
  font-family: var(--fb);
  font-size:0.82rem; font-weight:300;
  letter-spacing:0.2em; text-transform:uppercase;
  color: var(--smoke);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.contact-links a:hover { color:var(--fresco); border-color:var(--terra-lo); }

/* ── FOOTER ── */
footer {
  background: var(--volcanic);
  padding:4rem 5rem;
  border-top:1px solid rgba(180,140,100,0.1);
}

.footer-inner {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
  margin-bottom:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(180,140,100,0.07);
}

.f-brand { display:flex; flex-direction:column; gap:0.4rem; }
.f-name { font-family:var(--fd); font-size:1rem; font-style:italic; color:var(--fresco); letter-spacing:0.06em; }
.f-sub  { font-family:var(--fb); font-size:0.72rem; font-weight:300; color:var(--fresco-lo); letter-spacing:0.14em; text-transform:uppercase; }

.f-motto {
  font-family: var(--fd);
  font-size:0.85rem; font-style:italic;
  color: var(--smoke);
  text-align:center;
  line-height:1.5;
}

.f-links { display:flex; gap:2rem; justify-content:flex-end; list-style:none; }
.f-links a {
  font-family:var(--fb); font-size:0.75rem; font-weight:300;
  color:var(--smoke); text-decoration:none;
  letter-spacing:0.1em;
  transition: color 0.2s;
}
.f-links a:hover { color:var(--fresco); }

.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
}
.f-copy { font-family:var(--fb); font-size:0.72rem; font-weight:300; color:var(--fresco-lo); letter-spacing:0.08em; }
.f-built { font-family:var(--fd); font-size:0.7rem; font-style:italic; color:var(--fresco-lo); }

/* ── ANIMATIONS ── */
@keyframes emerge {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.85s ease, transform 0.85s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-fast {
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal-fast.visible { opacity:1; transform:translateY(0); }

::selection {
  background: rgba(196,83,40,0.25);
  color: var(--bone);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

/* ── WIDE SCREEN — cap content width ── */
@media (min-width: 1500px) {
  nav {
    padding-left: calc((100vw - 1300px) / 2);
    padding-right: calc((100vw - 1300px) / 2);
  }
  .section,
  .archive-list,
  .single-content-wrap,
  .pagination {
    padding-left: calc((100vw - 1300px) / 2);
    padding-right: calc((100vw - 1300px) / 2);
  }
  footer {
    padding-left: calc((100vw - 1300px) / 2);
    padding-right: calc((100vw - 1300px) / 2);
  }
  .hero-content {
    padding-left: calc((100vw - 1300px) / 2 + 2rem);
  }
  .blog-archive-hero,
  .single-hero {
    padding-left: calc((100vw - 1300px) / 2);
    padding-right: calc((100vw - 1300px) / 2);
  }
  .single-back { left: calc((100vw - 1300px) / 2); }
  .single-content { max-width: 760px; }
}

/* ── TABLET (1024px) ── */
@media (max-width: 1024px) {
  .expertise-grid { grid-template-columns: 1fr 1fr; }
  .about-body { grid-template-columns: 220px 1fr; gap: 3rem 4rem; }
  .pub-row { grid-template-columns: 1fr 160px 100px; gap: 1.2rem; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .archive-post { grid-template-columns: 100px 1fr; gap: 0 2rem; }
}

/* ── MOBILE (768px) ── */
@media (max-width: 768px) {

  /* Nav */
  nav { padding: 0 1.6rem; }
  .nav-links { display: none; }
  .nav-contact { display: none; }
  .nav-right { gap: 0; }
  .nav-hamburger { display: flex; }
  .nav-mobile-overlay { display: block; }

  /* Hero */
  .hero-fresco-panel { display: none; }
  .hero-content { padding: 7rem 1.6rem 5rem; }
  .hero-content::before { display: none; }
  .hero-scroll { left: 1.6rem; }
  .hero-desc { max-width: 100%; }

  /* Sections */
  .section { padding: 5rem 1.6rem; }

  /* About */
  .about-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { max-width: 240px; }

  /* Expertise */
  .expertise-grid { grid-template-columns: 1fr; }

  /* Publications */
  .pub-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.4rem 0 1.4rem 1rem; }
  .pub-type { text-align: left; }
  .pub-row:hover { padding-left: 1.6rem; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; }

  /* Blog archive */
  .blog-archive-hero { padding: 5rem 1.6rem 3.5rem; min-height:30vh; }
  .archive-list { padding: 4rem 1.6rem; }
  .archive-post { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.8rem 0 1.8rem 1rem; }
  .archive-post-date { font-size: 0.6rem; }
  .archive-post:hover { padding-left: 1.6rem; }

  /* Single post */
  .single-hero { padding: calc(68px + 4rem) 1.6rem 3rem; min-height: 46vh; }
  .single-back { top: calc(68px + 1rem); left: 1.6rem; }
  .single-content-wrap { padding: 3.5rem 1.6rem 5rem; }
  .single-content p, .single-content li { font-size: 1rem; }
  .single-nav { grid-template-columns: 1fr; }
  .single-nav-link.next { text-align: left; }

  /* Contact */
  .contact-inner { padding: 0; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  footer { padding: 3rem 1.6rem; }
  .f-brand { align-items: center; }
  .f-links { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  /* Pagination */
  .pagination { padding: 3rem 1.6rem; flex-wrap: wrap; }
}

/* ── SMALL MOBILE (480px) ── */
@media (max-width: 480px) {
  .hero-name { font-size: clamp(3.2rem, 16vw, 4.5rem); }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .blog-empty { padding: 3rem 1.6rem; }
  .single-content pre { margin-left: -1.6rem; margin-right: -1.6rem; border-left: none; border-right: none; border-radius: 0; }
}