/* Dancing Script */
@font-face {
  font-family: 'Dancing Script';
  src: url('../assets/fonts/DancingScript-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Inter (system variable or regular weight fallback) */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#f6f1e7;
  --paper:#fbf8f2;
  --ink:#1f1b16;
  --muted:rgba(31,27,22,.68);
  --line:rgba(31,27,22,.10);

  --sage:#7b8f72;
  --sageDark:#5f7358;
  --sageSoft:rgba(123,143,114,.14);

  --content:1180px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

header{
  position:sticky; top:0; z-index:200;
  background:rgba(246,241,231,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:none;
}

.topbar{
  max-width:var(--content);
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.logo{display:flex; flex-direction:column; line-height:1.05; min-width:auto;}

.logo h1{
  margin:0;
  font-family: "Cormorant Garamond", serif;
  font-size:34px;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  color:rgba(31,27,22,.92);
}

.logo p{
  margin:8px 0 0;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}

nav{display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap;}

nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:8px 0;
  position:relative;
  opacity:.90;
}

nav a:hover{opacity:1;}

nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:1px; width:0;
  background:var(--sageDark);
  transition:width 180ms ease;
}

nav a:hover::after{width:100%;}

.dropdown{position:relative; display:flex; align-items:center;}

.dropdown-content{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:240px;
  background:rgba(251,248,242,.98);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  box-shadow:0 18px 50px rgba(31,27,22,.12);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{display:block;}

.dropdown-content a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  letter-spacing:.08em;
  opacity:.92;
  white-space:nowrap;
}

.dropdown-content a:hover{background:var(--sageSoft); opacity:1;}

.container{max-width:var(--content); margin:0 auto; padding:0 20px;}

/* HERO slider */
.hero{
  position:relative;
  width:100%;
  height:min(86vh, 860px);
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.hero-track{
  position:relative;
  height:100%;
}

.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1); will-change:opacity, transform;}

.hero-slide{z-index:0;}

.hero-slide.active{opacity:1; z-index:1; transform:translateZ(0);}

.hero-slide img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); transition:transform 950ms cubic-bezier(.2,.8,.2,1);}

.hero-slide.active img{transform:scale(1);}

.hero-wash{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(246,241,231,.10) 0%,
    rgba(246,241,231,.12) 35%,
    rgba(246,241,231,.35) 100%);
  z-index:2;
}

.hero-overlay{position:absolute; left:20px; right:20px; bottom:60px; z-index:3;}

.hero-overlay-inner{
  max-width:var(--content);
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.hero-copy{
  background:rgba(251,248,242,.70);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  max-width:560px;
}

.kicker{margin:0 0 8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

.hero-title{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:600;
  letter-spacing:.02em;
}

.hero-actions{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--sage);
  background:transparent;
  color:var(--ink);
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  outline:none;
}

.btn:hover{background:var(--sageSoft); border-color:var(--sageDark); transform:translateY(-1px); text-decoration:none;}

.btn:focus{
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--sage);
  text-decoration:none;
}

.btn:active{text-decoration:none;}

.btn.primary{background:var(--sage); color:var(--paper); border-color:var(--sage);}

.btn.primary:hover{background:var(--sageDark); border-color:var(--sageDark); text-decoration:none;}

.btn.primary:focus{
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--sageDark);
  text-decoration:none;
}

.hero-controls{position:absolute; inset:auto 0 12px 0; display:flex; justify-content:center; pointer-events:none;}

.hero-arrows{z-index:4;}

.hero-controls{z-index:5;}

.hero-dots{display:none; gap:8px; pointer-events:auto;}

.dot{
  width:7px; height:7px; border-radius:999px;
  border:1px solid rgba(251,248,242,.85);
  background:rgba(251,248,242,.35);
  cursor:pointer;
  transition:transform 150ms ease, background 150ms ease;
}

.dot[aria-current="true"]{background:rgba(251,248,242,.90); transform:scale(1.1);}

.hero-arrows{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 14px; pointer-events:none;}

.arrow{
  pointer-events:auto;
  width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(251,248,242,.55);
  background:rgba(31,27,22,.20);
  color:rgba(251,248,242,.98);
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform 150ms ease, background 150ms ease;
  user-select:none;
}

.arrow:hover{background:rgba(31,27,22,.30); transform:scale(1.02);}

section{padding:62px 0;}

.hero{padding-top:0;}

.section-title{margin:0 0 18px;}

.section-title .label{margin:0 0 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

.section-title h2{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:34px;
  font-weight:600;
  letter-spacing:.02em;
}

/* Editorial stream (no captions) */
.stream{display:flex; flex-direction:column; gap:28px;}

.stream-item{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:transparent;}

.stream-item button{all:unset; display:block; width:100%; cursor:pointer;}

.stream-item img{width:100%; display:block; object-fit:cover; max-height:820px;}

/* Work: filters + carousel */
.work-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.work-filters{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

.filter{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--ink);
  padding:8px 0;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  position:relative;
  opacity:.75;
}

.filter:hover{opacity:1;}

.filter[aria-selected="true"]{opacity:1;}

.filter::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  height:2px; width:0;
  background:var(--sage);
  transition:width 180ms ease;
}

.filter[aria-selected="true"]::after{width:100%;}

.carousel{position:relative; margin-top:12px;}

.car-viewport{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(251,248,242,.40);
  max-height:568px;
}

.car-track{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  padding:18px;
  transform:translateX(0);
  transition:transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.car-card{
  flex:0 0 100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
}

.car-card button{all:unset; display:block; width:100%; cursor:pointer;}

.car-card img{width:100%; height:260px; object-fit:cover; display:block;}

.car-nav{display:flex; justify-content:center; gap:10px; margin-top:12px;}

.car-btn{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(31,27,22,.14);
  background:rgba(251,248,242,.65);
  color:var(--ink);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.car-btn:hover{background:rgba(251,248,242,.92); border-color:rgba(31,27,22,.22); transform:translateY(-1px);}

.car-btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}

.paper{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px;}

form{display:flex; flex-direction:column; gap:12px;}

input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  font-size:14px;
  outline:none;
  color:var(--ink);
}

input:focus, textarea:focus{border-color:rgba(123,143,114,.55);}

/* Contact panel styles */
.contact-panel{display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:18px; border-radius:14px;}

.contact-methods{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}

.contact-item{display:flex; align-items:center; gap:12px; background:transparent; padding:8px 12px; border-radius:12px;}

.contact-link{display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:500;}

.contact-link:hover{color:var(--sageDark);}

.contact-icon{width:22px; height:22px; display:inline-block; color:var(--sageDark); flex:0 0 22px;}

.contact-text{font-size:15px;}

.contact-note{margin:8px 0 0; font-size:13px; color:var(--muted);}

/* Lightbox */
.modal{display:none; position:fixed; inset:0; z-index:999; background:rgba(18,16,14,.86); align-items:center; justify-content:center; padding:20px;}

.modal.open{display:flex;}

.modal-inner{width:min(1200px, 96vw); max-height:90vh; display:grid; grid-template-rows:auto 1fr auto; gap:12px;}

.modal-top{display:flex; align-items:center; justify-content:space-between; color:rgba(251,248,242,.82); font-size:12px; letter-spacing:.08em; text-transform:uppercase;}

.modal-figure{border-radius:18px; overflow:hidden; border:1px solid rgba(251,248,242,.14); background:rgba(251,248,242,.03);}

.modal-figure img{width:100%; height:100%; max-height:76vh; object-fit:contain; display:block; background:rgba(0,0,0,.18);}

.modal-actions{display:flex; justify-content:center; gap:10px;}

.modal-btn{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(251,248,242,.22);
  background:rgba(0,0,0,.20);
  color:rgba(251,248,242,.98);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background 160ms ease, transform 160ms ease;
}

.modal-btn:hover{background:rgba(0,0,0,.32); transform:translateY(-1px);}

footer{border-top:1px solid var(--line); padding:34px 0 46px; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center;}

/* Meet Beth Page Styles */
.label{margin:0 0 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

h2{
  margin:0 0 16px;
  font-family:"Cormorant Garamond", serif;
  font-size:42px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.02;
}

p{margin:0 0 14px; line-height:1.85; color:rgba(31,27,22,.88); font-size:14px;}

.meet-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap:24px;
  align-items:start;
}

.photo{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:rgba(251,248,242,.55);
}

.photo img{width:100%; height:100%; display:block; object-fit:cover; max-height:680px;}

.panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(251,248,242,.72);
  padding:22px;
}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* Work experience (simple timeline) */
.experience{padding-top:22px;}

.timeline{margin-top:18px; position:relative; display:flex; flex-direction:column; gap:18px;}

.timeline:before{content:""; position:absolute; left:210px; top:6px; bottom:6px; width:1px; background:rgba(46,83,63,.22);}

.t-item{display:grid; grid-template-columns:190px 1fr; gap:30px; padding:14px 0; position:relative;}

.t-item:before{content:""; position:absolute; left:210px; top:24px; width:10px; height:10px; border-radius:999px; background:var(--sage); transform:translateX(-5px);}

.t-date{font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted);}

.t-body h3{margin:0 0 6px; font-size:16px; letter-spacing:.02em;}

.t-role{margin:0 0 10px; font-size:13px; color:var(--muted);}

.t-desc{margin:0; font-size:14px; color:var(--ink); opacity:.92;}

/* Responsive Design */
@media (max-width: 900px){
  .dropdown-content{right:auto; left:0;}
  .car-card img{height:240px;}
}

@media (max-width: 900px){
  .topbar{padding:14px 14px;}
  nav{gap:14px;}
  .hero{height:min(82vh, 650px);}
  .hero-overlay-inner{flex-direction:column; align-items:stretch;}
  .hero-copy{max-width:none;}
  .arrow{width:40px; height:40px;}
  section{padding:52px 0;}
  .section-title h2{font-size:30px;}
  .car-track{padding:14px;}
  .meet-grid{grid-template-columns:1fr;}
  .photo img{max-height:520px;}
  h2{font-size:36px;}
  .timeline:before{left:0; display:none;}
  .t-item{grid-template-columns:1fr; gap:10px;}
  .t-item:before{display:none;}
}

/* Mobile Menu Toggle */
.menu-toggle{
  display:none;
  appearance:none;
  background:none;
  border:none;
  color:var(--ink);
  font-size:24px;
  cursor:pointer;
  padding:8px;
  margin-left:auto;
}

/* Mobile (768px and below) */
@media (max-width: 768px){
  .menu-toggle{display:block;}

  header{position:relative;}

  .topbar{
    flex-wrap:wrap;
    padding:12px 14px;
    position:relative;
  }

  nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(246,241,231,.98);
    flex-direction:column;
    gap:0;
    padding:12px 0;
    box-shadow:0 4px 12px rgba(31,27,22,.10);
    z-index:100;
  }

  nav.active{display:flex;}

  nav a{
    padding:12px 20px;
    border-bottom:1px solid var(--line);
    width:100%;
    display:block;
    opacity:1;
  }

  nav a:last-child{border-bottom:none;}

  nav a::after{display:none;}

  .dropdown{position:relative; width:100%;}

  .dropdown-content{
    position:static;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:8px 20px;
    margin:0;
    max-width:none;
    border-radius:0;
    display:none;
  }

  .dropdown:hover .dropdown-content{display:none;}

  .dropdown.active .dropdown-content{display:block;}

  .dropdown-content a{
    padding:8px 0;
    border-bottom:none;
    font-size:11px;
    color:var(--muted);
  }

  /* Hero adjustments for mobile */
  .logo{min-width:none;}

  .logo h1{font-size:28px;}

  .logo p{font-size:10px; margin-top:4px;}

  .hero{
    height:min(75vh, 480px);
  }

  .hero-overlay{
    left:12px;
    right:12px;
    bottom:16px;
  }

  .hero-copy{
    padding:12px 14px;
    border-radius:14px;
  }

  .kicker{font-size:10px; margin:0 0 6px;}

  .hero-title{font-size:clamp(20px, 4vw, 28px); margin:0;}

  .hero-actions{
    flex-direction:column;
    gap:8px;
    margin-top:10px;
  }

  .btn{
    padding:10px 12px;
    font-size:11px;
    width:100%;
    justify-content:center;
  }

  .arrow{
    width:36px;
    height:36px;
    font-size:16px;
  }

  /* Carousel mobile adjustments */
  .car-track{
    grid-template-columns:repeat(2, 1fr);
    padding:12px;
    gap:12px;
  }

  .car-card img{
    height:180px;
  }

  .car-viewport{
    max-height:400px;
    border-radius:14px;
  }

  /* Section spacing */
  section{
    padding:40px 0;
  }

  .container{
    padding:0 14px;
  }

  .section-title h2{
    font-size:26px;
  }

  .section-title .label{
    font-size:11px;
  }

  /* Contact section mobile */
  .contact-panel{
    flex-direction:column;
    gap:12px;
    padding:12px;
  }

  .contact-methods{
    flex-direction:column;
    width:100%;
    gap:12px;
  }

  .contact-item{
    width:100%;
    padding:10px;
  }

  .contact-text{
    font-size:14px;
  }

  /* Meet Beth page mobile */
  .panel{
    padding:16px;
    border-radius:14px;
  }

  .actions{
    flex-direction:column;
    gap:8px;
  }

  .actions .btn{
    width:100%;
  }

  /* Timeline mobile adjustments */
  .timeline{
    gap:16px;
  }

  .t-item{
    padding:10px 0;
  }

  .t-date{
    font-size:11px;
    margin-bottom:4px;
  }

  .t-body h3{
    font-size:15px;
    margin-bottom:4px;
  }

  .t-role{
    font-size:12px;
  }

  .t-desc{
    font-size:13px;
    line-height:1.6;
  }

  /* Work filters mobile */
  .work-filters{
    gap:8px;
  }

  .filter{
    font-size:11px;
    padding:6px 0;
  }

  /* Lightbox mobile */
  .modal{
    padding:12px;
  }

  .modal-inner{
    width:min(96vw, 100%);
  }

  .modal-figure img{
    max-height:60vh;
  }

  .modal-btn{
    width:40px;
    height:40px;
  }

  /* Typography mobile */
  h2{
    font-size:28px;
  }

  p{
    font-size:13px;
    margin:0 0 12px;
  }

  /* Footer mobile */
  footer{
    padding:24px 0 32px;
    font-size:11px;
  }

  .car-nav{
    gap:8px;
    margin-top:10px;
  }

  .car-btn{
    width:40px;
    height:40px;
    font-size:16px;
  }
}

/* Extra small devices (480px and below) */
@media (max-width: 480px){
  .logo h1{font-size:24px;}

  .logo p{font-size:9px; letter-spacing:.20em;}

  .hero{height:min(70vh, 400px);}

  .hero-copy{padding:10px 12px;}

  .hero-title{font-size:clamp(18px, 3.5vw, 24px);}

  .kicker{font-size:9px; margin-bottom:4px;}

  .section-title h2{font-size:22px;}

  .container{padding:0 12px;}

  section{padding:32px 0;}

  .car-track{
    grid-template-columns:repeat(2, 1fr);
    padding:10px;
    gap:10px;
  }

  .car-card img{height:140px;}

  .btn{
    padding:9px 10px;
    font-size:10px;
  }

  .hero-actions{
    gap:6px;
  }

  .topbar{padding:10px 12px; gap:12px;}

  .dropdown-toggle{
    font-size:20px;
  }

  h2{font-size:24px;}

  p{font-size:12px;}

  .contact-item{padding:8px;}

  .contact-text{font-size:13px;}

  .panel{padding:12px;}

  .meet-grid{gap:16px;}

  .photo img{max-height:300px;}

  .actions .btn{font-size:11px; padding:8px 10px;}
}