@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond-site.woff2') format('woff2'),url('fonts/CormorantGaramond-full.ttf') format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond-Italic-site.woff2') format('woff2'),url('fonts/CormorantGaramond-Italic-full.ttf') format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter-site.woff2') format('woff2'),url('fonts/Inter-full.ttf') format('truetype')}

:root{
  color-scheme:dark;
  --dark:#100d08;
  --dark-2:#1a1510;
  --dark-3:#251e15;
  --ivory:#f9f4ea;
  --muted:#c9bdab;
  --gold:#d4903c;
  --gold-lt:#e8b870;
  --light:#f3ede2;
  --light-border:rgba(30,23,16,0.12);
  --ink:#282018;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  margin:0;
  background:var(--dark);
  color:var(--ivory);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
a:hover,a:focus-visible{color:var(--gold)}

.wrap{width:min(1160px,calc(100% - 2.5rem));margin-inline:auto}
.narrow{max-width:780px}

/* Skip link */
.skip-link{
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  padding:.65rem 1.4rem;
  background:var(--gold);
  color:var(--dark);
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:top .2s,opacity .2s;
  text-decoration:none;
  font-weight:600;
  font-size:0.85rem;
}
.skip-link:focus-visible{top:1rem;opacity:1;pointer-events:auto}
.skip-link:focus:not(:focus-visible){top:-100px;opacity:0;pointer-events:none}

/* Header & Nav */
.site-header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:900;
  background:rgba(16,13,8,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(249,244,234,.1);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:76px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font:500 1.65rem 'Cormorant Garamond',Georgia,serif;
  text-decoration:none;
  color:var(--ivory);
  transition:opacity 0.25s;
}
.brand:hover{opacity:0.85}
.brand img{
  object-fit:contain;
  filter:invert(1) sepia(0.2) brightness(1.15);
  height:48px;
  width:auto;
}

/* Nav links */
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2vw, 2.2rem);
  list-style:none;
  margin:0;
  padding:0;
}
.nav__link{
  text-decoration:none;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(249,244,234,0.85);
  position:relative;
  padding-bottom:3px;
  transition:color .3s;
}
.nav__link:hover{color:var(--gold-lt)}
.nav__link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:1px;
  background:var(--gold);
  transition:width .35s;
}
.nav__link:hover::after{width:100%}
.nav__link--active{color:var(--gold);font-weight:600}
.nav__link--active::after{width:100%}
.nav__link--cta{
  padding:.5rem 1.25rem;
  border:1.5px solid rgba(249,244,234,0.35);
  border-radius:1px;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{
  background:var(--gold);
  color:#0d0a06;
  border-color:var(--gold);
}

/* Burger menu (mobile) */
.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:915;
}
.nav__burger span{
  display:block;
  width:24px;
  height:1.5px;
  background:rgba(249,244,234,0.9);
  transition:transform .3s,opacity .3s;
}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Breadcrumb */
.breadcrumb{
  display:flex;
  gap:.65rem;
  align-items:center;
  padding-block:1.2rem;
  color:var(--muted);
  font-size:.82rem;
  flex-wrap:wrap;
}
.breadcrumb a{text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}

/* Intro Section */
.intro{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:clamp(2rem, 5vw, 4.5rem);
  padding-block:2rem 5.5rem;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gold);
  font-size:.72rem;
  font-weight:600;
  margin-bottom:0.8rem;
  display:block;
}
h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.15}
h1{
  font-size:clamp(2.3rem, 5.5vw, 4.8rem);
  margin:.4rem 0 1.4rem;
  word-break:break-word;
}
h1 em{color:var(--gold-lt);font-style:italic}
h2{
  font-size:clamp(1.9rem, 3.8vw, 3.2rem);
  margin:.4rem 0 1.2rem;
  word-break:break-word;
}
h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight:500;
  line-height:1.25;
  margin:2.2rem 0 .6rem;
}
p{max-width:70ch}
.intro-copy>p:not(.eyebrow){color:var(--muted);margin-bottom:1.2rem}
.intro-copy .lead{color:var(--ivory)!important;font-size:1.12rem;line-height:1.7}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  margin-top:1.5rem;
  padding:.9rem 1.8rem;
  background:var(--gold);
  color:var(--dark);
  font-family:Inter,sans-serif;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:2px;
  box-shadow:0 4px 20px rgba(212,144,60,0.25);
  transition:background .3s,transform .2s,box-shadow .3s;
}
.button:hover,.button:focus-visible{
  background:var(--gold-lt);
  color:var(--dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(232,184,112,0.4);
}

.intro-image{margin:0;position:relative}
.intro-image img{
  width:100%;
  max-height:560px;
  object-fit:cover;
  aspect-ratio:4/5;
  border-radius:2px;
}
figcaption{padding-top:.7rem;color:var(--muted);font-size:.78rem}

/* Light Sections */
.light-section{
  padding-block:5.5rem;
  background:var(--light);
  color:var(--ink);
  color-scheme:light;
}
.light-section h2{color:var(--ink)}
.light-section h3{color:var(--ink)}
.light-section p{color:#4d4233;line-height:1.75}
.light-section a{color:#8b521b;font-weight:600}
.light-section .eyebrow{color:#9c6327}

/* Feature list */
.feature-list{
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 1.5rem;
  margin:2.2rem 0;
}
.feature-list li{
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(214,198,175,0.7);
  border-left:3px solid var(--gold);
  border-radius:2px;
  padding:1rem 1.25rem;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
  box-shadow:0 1px 4px rgba(40,32,24,0.04);
}

/* Work section */
.work{padding-block:5.5rem}
.section-lead{color:var(--muted);margin-bottom:2rem;font-size:1.05rem}
.work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
  align-items:start;
}
.work-grid figure{margin:0}
.work-grid a{display:block;overflow:hidden;border-radius:2px}
.work-grid img{
  width:100%;
  height:440px;
  object-fit:contain;
  background:var(--dark-2);
  border:1px solid rgba(249,244,234,0.08);
  border-radius:2px;
  transition:transform .35s;
}
.work-grid a:hover img,.work-grid a:focus-visible img{transform:scale(1.025)}
.work-grid figcaption{
  padding:.8rem .2rem 0;
  color:var(--muted);
  font-size:.84rem;
}

/* Footer */
.site-footer{
  padding-block:2rem;
  border-top:1px solid rgba(249,244,234,.1);
  font-size:.82rem;
  color:var(--muted);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.site-footer p{margin:0}
.site-footer a{color:var(--gold-lt)}

/* ════ RESPONSIVE (TABLETS & PHONES) ════ */
@media(max-width:860px){
  .intro{
    grid-template-columns:1fr;
    padding-block:1.5rem 4rem;
    gap:2.5rem;
  }
  .intro-image{max-width:100%}
  .intro-image img{
    max-height:420px;
    aspect-ratio:16/11;
  }
  .light-section,.work{padding-block:4rem}
  .work-grid{grid-template-columns:1fr;gap:2rem}
  .work-grid img{height:auto;max-height:400px}
}

@media(max-width:768px){
  .wrap{width:calc(100% - 2rem)}
  .header-inner{min-height:68px}
  .brand img{height:42px}
  .brand span{font-size:1.45rem}

  .nav__burger{display:flex}
  .nav__links{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100vh;
    background:var(--dark-2);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:3.5rem 2.2rem;
    gap:2rem;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:-20px 0 60px rgba(4,3,2,0.6);
    z-index:910;
  }
  .nav__links.open{transform:translateX(0)}
  .nav__link{font-size:.88rem}
  .nav__link--cta{width:100%;text-align:center;padding:.75rem}

  .feature-list{
    grid-template-columns:1fr;
    gap:.75rem;
    margin:1.8rem 0;
  }
  .feature-list li{padding:.85rem 1.1rem;font-size:.92rem}

  .button{
    width:100%;
    text-align:center;
    padding:1rem 1.5rem;
  }
}

@media(max-width:480px){
  .wrap{width:calc(100% - 1.75rem)}
  h1{font-size:2.2rem;line-height:1.2}
  h2{font-size:1.75rem;line-height:1.25}
  h3{font-size:1.4rem}
  .intro-copy .lead{font-size:1.02rem}
  .light-section,.work{padding-block:3.2rem}
  .footer-inner{flex-direction:column;text-align:center;gap:.65rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .work-grid img,.nav__links,.nav__burger span{transition:none}
}