:root{
  --bg: #0c0a08;
  --bg-panel: #14110d;
  --cream: #ece3d6;
  --muted: #9a9186;
  --muted-2: #6f6a62;
  --hairline: rgba(236,227,214,0.12);
  --gold: #b99a6a;
  --ease: ease;
  --transition-ui: 0.25s var(--ease);
  --transition-reveal: 0.8s var(--ease);
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img{ max-width: 100%; display: block; }

.wrap{
  max-width: 1536px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Header ---------- */
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 64px 0;
}

.logo{
  display: inline-flex;
  align-items: center;
  color: var(--cream);
  width: 64px;
  height: auto;
}
.logo svg{ width: 100%; height: auto; display: block; overflow: visible; }

nav{
  display: flex;
  gap: 48px;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--cream);
  font-weight: 400;
}

nav a{
  opacity: 0.92;
  transition: opacity var(--transition-ui);
}
nav a:hover{ opacity: 1; color: var(--gold); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 640px;
  padding-top: 70px;
}

.hero-copy{
  padding: 0 64px;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-copy h1{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 28px;
  letter-spacing: 0.2px;
}

.hero-copy p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 420px;
  margin-bottom: 40px;
}

.hero-copy p a.inline-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--muted-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-ui), color var(--transition-ui);
}
.hero-copy p a.inline-link:hover{
  text-decoration-color: var(--muted);
}

.cta{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  color: var(--cream);
  cursor: pointer;
  width: fit-content;
}

.cta .arrow-circle{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(236,227,214,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-ui), transform var(--transition-ui);
  flex-shrink: 0;
}

.cta:hover .arrow-circle{
  background: var(--gold);
  transform: translateX(4px);
}

.arrow-circle svg{ width: 16px; height: 16px; }

.headline-block{
  position: relative;
}

/* social rail — centered against the combined h1+p block for visual symmetry */
.social-rail{
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 3;
}

.social-rail a{
  color: var(--muted);
  opacity: 0.85;
  transition: opacity var(--transition-ui), color var(--transition-ui), transform var(--transition-ui);
}
.social-rail a:hover{ opacity: 1; color: var(--cream); transform: translateY(-2px); }
.social-rail svg{ width: 19px; height: 19px; display: block; }

/* mobile footer — same links, shown as a row instead of the sidebar */
.social-footer{
  display: none;
}

.social-footer .social-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 36px 28px 44px;
  border-top: 1px solid var(--hairline);
}

.social-footer a{
  color: var(--muted);
  opacity: 0.85;
  transition: opacity var(--transition-ui), color var(--transition-ui), transform var(--transition-ui);
}
.social-footer a:hover{ opacity: 1; color: var(--cream); transform: translateY(-2px); }
.social-footer svg{ width: 19px; height: 19px; display: block; }

.copyright{
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  color: rgba(236, 227, 214, 0.22);
  padding: 0 28px 40px;
}

/* hero image — aspect-ratio keeps proportions fixed on resize.
   Drop a photo in as: <div class="hero-image"><img src="images/..." alt="..."></div>
   — sizing, cropping, and the color-match overlay below are already wired up. */
.hero-image{
  position: relative;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: linear-gradient(155deg, #4a3423 0%, #2a1e14 45%, #150f0a 100%);
}

.hero-image img,
.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* mutes an arbitrary uploaded photo toward the site's warm/dark tonality
     before the overlay below tints it further */
  filter: grayscale(30%) sepia(14%) brightness(0.62) contrast(1.08) saturate(0.9);
}

/* color-match overlay: sits above any <img> automatically (positioned
   descendants stack above in-flow content), tinting it toward the brand
   palette so a random uploaded photo won't clash with the theme */
.hero-image::before,
.thumb::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, rgba(42,33,24,0.55), rgba(10,8,7,0.78)),
    radial-gradient(ellipse at 30% 20%, rgba(185,154,106,0.14), transparent 60%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-image img,
.rabbit-grid .thumb img{
  transition: transform var(--transition-reveal), filter var(--transition-reveal);
  transform-origin: center center;
}

.hero-image::before,
.rabbit-grid .thumb::before,
.rabbit-grid .thumb::after{
  transition: opacity var(--transition-reveal);
}

.hero-image:hover img,
.rabbit-grid .thumb:hover img{
  transform: scale(1.15);
  filter: grayscale(0%) sepia(0%) brightness(0.88) contrast(1.05) saturate(1);
}

.hero-image:hover::before,
.rabbit-grid .thumb:hover::before,
.rabbit-grid .thumb:hover::after{
  opacity: 0.25;
}

/* ---------- Rabbit hole section ---------- */
.rabbit{
  padding: 96px 64px 90px;
}

.rabbit h2,
.rabbit .rabbit-cta{
  margin-bottom: 40px;
}

.rabbit h2{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--cream);
}

.rabbit-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.05fr;
  gap: 24px;
  align-items: stretch;
}

.thumb{
  position: relative;
  aspect-ratio: 210/183;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(150deg, #262019, #100d09);
}

.thumb::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 60% 30%, rgba(255,255,255,0.06), transparent 60%);
}

.thumb.t1{ background: linear-gradient(160deg,#3a3a3a,#0c0c0c); }
.thumb.t2{ background: linear-gradient(160deg,#5c4a34,#171009); }
.thumb.t3{ background: linear-gradient(160deg,#2e2e2e,#0a0a0a); }
.thumb.t4{ background: linear-gradient(160deg,#3d4436,#12140f); }

.quote-block{
  padding-left: 40px;
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* one shared grid across all 3 rows so the years/company columns line up
   with each other, instead of each row sizing itself independently */
.exp-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 14px;
}

/* display:contents hands exp-years/exp-company straight to the grid as if
   unwrapped, while still letting :hover target both spans together */
.exp-row{
  display: contents;
}

.exp-years,
.exp-company{
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  color: rgba(236, 227, 214, 0.22);
  transition: color var(--transition-reveal);
  cursor: default;
}

.exp-row:hover .exp-years,
.exp-row:hover .exp-company{
  color: var(--cream);
}

.exp-years{ text-align: left; }
.exp-company{ text-align: right; }

/* once the centered .wrap (max-width 1536px) leaves real whitespace at the
   viewport edge, pin the rail to that edge instead and size it up */
@media (min-width: 1600px){
  .social-rail{
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%) scale(1.5);
    transform-origin: left center;
  }
}

/* the years text must never wrap mid-line — once the quote-block column
   gets too narrow to fit it on one line, drop the whole block below the
   grid and center it, well before the thumbnail grid itself restacks */
@media (max-width: 1360px){
  .rabbit-grid{ grid-template-columns: repeat(4, 1fr); }
  .quote-block{
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: 28px;
    margin-top: 24px;
    align-items: center;
  }
  .exp-grid{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .exp-row{
    display: flex;
    gap: 10px;
  }
  .exp-years, .exp-company{ text-align: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  header{ padding: 28px 28px 0; }
  nav{ gap: 26px; font-size: 0.75rem; }
  .hero{ grid-template-columns: 1fr; min-height: auto; }
  .hero-copy{ padding: 48px 28px 40px; order: 2; }
  .hero-copy h1{ font-size: 2.4rem; }
  .hero-image{ order: 1; }
  .social-rail{ display: none; }
  .social-footer{ display: block; }
  .rabbit{ padding: 64px 28px; }
  .rabbit-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .rabbit-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-copy h1{ font-size: 2rem; }
}