:root{
    --cream: #F7F2E7;
    --paper: #FCF8EF;
    --ink: #362A1E;
    --ink-soft: #6E5D48;
    --olive: #767A4C;
    --olive-deep: #565A38;
    --sage: #757953;      /* was #767A4C, before that #9CA57C — nudged per client request */
    --sage-deep: #565A38; /* was #7C8563 */
    --line: rgba(54,42,30,0.16);
  }

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

  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-weight:300;
  }

  h1,h2,h3,.serif{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
  }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  .wrap{ max-width:1320px; margin:0 auto; padding:0 5vw; }
  ::selection{ background:var(--olive); color:var(--paper); }
  :focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

  /* skip link — invisible til you tab to it, like a cat that only shows up when it wants something */
  .skip-link{
    position:absolute; left:-9999px; top:auto;
    background:var(--ink); color:var(--paper);
    padding:14px 22px; z-index:999;
    font-size:0.85rem; letter-spacing:0.05em;
  }
  .skip-link:focus{ left:16px; top:16px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  /* ---- sticky nav, always watching like a cat on a windowsill ---- */

  header{
    position:sticky;
    top:0;
    z-index:200;
    background:var(--sage);
    border-bottom:1px solid transparent;
    box-shadow:0 4px 14px -8px rgba(54,42,30,0.3);
    transition:box-shadow .3s ease, border-color .3s ease;
  }
  header.scrolled{
    box-shadow:0 6px 20px -12px rgba(54,42,30,0.35);
    border-color:rgba(54,42,30,0.2);
  }

  .announcement-banner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--sage-deep);
    color:var(--paper);
    padding:14px 48px;
    font-size:0.85rem;
    letter-spacing:0.02em;
  }
  .announcement-banner a{
    color:var(--paper);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .announcement-banner-close{
    position:absolute;
    right:16px; top:50%; transform:translateY(-50%);
    background:none; border:none;
    color:var(--paper);
    font-size:1.4rem; line-height:1;
    cursor:pointer;
    opacity:0.75;
    transition:opacity .2s ease;
  }
  .announcement-banner-close:hover{ opacity:1; }

  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 5vw;
    gap:24px;
  }

  .nav-links{
    list-style:none;
    display:flex;
    gap:2.6vw;
    flex:1;
  }
  .nav-links a{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--paper);
    padding-bottom:3px;
    border-bottom:1px solid transparent;
    transition:color .25s ease, border-color .25s ease, opacity .25s ease;
    white-space:nowrap;
    opacity:0.88;
  }
  .nav-links a:hover{ color:var(--paper); border-color:var(--paper); opacity:1; }

  .wordmark{
    font-family:'Cormorant Garamond', serif;
    font-size:1.5rem;
    letter-spacing:0.05em;
    text-align:center;
    flex:0 0 auto;
    color:var(--paper);
    /* backing plaque so the brown logo reads clearly on the olive header —
       logo art itself stays flat/untouched per client request */
    background:var(--cream);
    border-radius:999px;
    padding:4px 32px;
  }
  .wordmark-logo{
    display:block;
    height:76px;
    width:auto;
    transition:transform .25s ease;
  }
  .wordmark:hover .wordmark-logo{
    transform:translateY(-4px);
  }

  .nav-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    gap:2.6vw;
  }
  .nav-right a{
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--paper);
    padding-bottom:3px;
    border-bottom:1px solid transparent;
    opacity:0.88;
    transition:color .25s ease, border-color .25s ease, opacity .25s ease;
  }
  .nav-right a:hover{ color:var(--paper); border-color:var(--paper); opacity:1; }

  /* ---- big hero shot ---- */

  .hero{
    position:relative;
    height:92vh;
    min-height:560px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter:saturate(1.02) contrast(1.02);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(30,22,14,0.55) 0%, rgba(30,22,14,0.05) 45%, transparent 70%);
  }
  .hero-content{
    position:relative;
    z-index:1;
    width:100%;
    text-align:center;
    padding:0 6vw 8vh;
    color:var(--paper);
  }
  .hero-eyebrow{
    font-size:0.75rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    margin-bottom:20px;
    opacity:0.95;
    color:var(--paper);
  }
  .hero-content h1{
    font-size:clamp(2.6rem, 5.6vw, 4.6rem);
    line-height:1.15;
    font-weight:400;
    max-width:18ch;
    margin:0 auto;
  }
  .hero-content .lead{
    max-width:52ch;
    margin:26px auto 0;
    font-size:1.05rem;
    line-height:1.75;
    opacity:0.9;
  }

  /* ---- intro blurb ---- */

  .statement{
    padding:13vh 6vw;
    text-align:center;
  }
  .statement p{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    line-height:1.55;
    max-width:900px;
    margin:0 auto;
    color:var(--ink-soft);
  }
  .statement em{ font-style:italic; color:var(--ink); }

  /* ---- discover grid, 4 lil cards ---- */

  .discover{ padding:2vh 5vw 14vh; }

  .discover-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .discover-card{
    position:relative;
    background:var(--paper);
    aspect-ratio:3/4;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .discover-card img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
  }
  .discover-card:hover img{ transform:scale(1.05); }
  .discover-card::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(30,22,14,0.6), rgba(124,133,99,0.12) 55%, transparent 75%);
  }
  .discover-card-content{
    position:relative; z-index:1;
    padding:28px 24px;
    color:var(--paper);
  }
  .discover-card-content h3{ font-size:1.55rem; font-weight:400; }
  .discover-card-content span{
    display:inline-block;
    margin-top:10px;
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--paper);
    border-bottom:1px solid var(--paper);
    padding-bottom:2px;
    opacity:0;
    transform:translateY(6px);
    transition:all .35s ease;
  }
  .discover-card:hover .discover-card-content span{ opacity:1; transform:translateY(0); }

  /* ---- frames split section ---- */

  .frames{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:86vh;
  }
  .frames-photo{ position:relative; overflow:hidden; }
  .frames-photo img{ width:100%; height:100%; object-fit:cover; }
  .frames-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vh 6vw;
    background:var(--paper);
  }
  .frames-copy .eyebrow{
    font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--sage-deep); margin-bottom:22px;
  }
  .frames-copy h2{
    font-size:clamp(2.2rem, 3.4vw, 3.1rem);
    line-height:1.18;
    max-width:14ch;
    margin-bottom:26px;
  }
  .frames-copy p{
    color:var(--ink-soft);
    line-height:1.85;
    max-width:44ch;
    margin-bottom:36px;
    font-size:1rem;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    border:1px solid var(--sage-deep);
    color:var(--sage-deep);
    align-self:flex-start;
    transition:background .3s ease, color .3s ease, border-color .3s ease;
  }
  .btn:hover{ background:var(--sage-deep); color:var(--paper); border-color:var(--sage-deep); }

  /* ---- commissions list ---- */

  .commissions{ padding:14vh 6vw; }
  .section-head{
    text-align:center;
    margin-bottom:9vh;
  }
  .section-head .eyebrow{
    font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--sage-deep); margin-bottom:16px;
    display:block;
  }
  .section-head h2{ font-size:clamp(2rem, 4vw, 3rem); }

  .comm-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6vw;
    max-width:1100px;
    margin:0 auto;
    text-align:center;
  }
  .comm-item .roman{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.4rem;
    color:var(--sage-deep);
    display:block;
    margin-bottom:18px;
  }
  .comm-item h3{ font-size:1.7rem; margin-bottom:14px; }
  .comm-item p{ color:var(--ink-soft); line-height:1.75; font-size:0.95rem; }

  /* ---- double exposure teaser, moody n dark ---- */

  .double-teaser{
    position:relative;
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    color:var(--paper);
  }
  .double-teaser img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(0.3) brightness(0.55);
  }
  .double-teaser::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(124,133,99,0.22), rgba(20,16,10,0.35));
    z-index:0;
  }
  .double-teaser .content{ position:relative; z-index:1; max-width:620px; padding:0 6vw; }
  .double-teaser .eyebrow{
    font-size:0.75rem; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:22px; color:var(--paper);
  }
  .double-teaser h2{ font-size:clamp(2.2rem, 4.8vw, 3.6rem); line-height:1.2; margin-bottom:24px; }
  .double-teaser p{ line-height:1.8; opacity:0.85; margin-bottom:36px; }
  /* paper-on-sage-deep is ~6.8:1 contrast (WCAG AA); paper-on-sage was only ~3-4.25:1 and failed */
  .double-teaser .btn{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--paper); align-self:center; }
  .double-teaser .btn:hover{ filter:brightness(0.85); }

  /* ---- footer, the boring but necessary part ---- */

  footer{ padding:10vh 6vw 5vh; }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:6vw;
    padding-bottom:7vh;
    border-bottom:1px solid var(--line);
  }
  .footer-brand{ display:flex; flex-direction:column; gap:14px; }
  .footer-brand-top{ display:flex; align-items:center; gap:12px; }
  .footer-brand-name{
    font-family:'Cormorant Garamond', serif;
    font-weight:700;
    font-size:1.15rem;
    line-height:1.3;
    text-align:left;
  }
  .footer-brand-name small{
    display:block;
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:0.62rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:3px;
  }
  .footer-brand p{ text-align:left; margin:0; }
  .footer-logo{ display:block; height:44px; width:auto; flex-shrink:0; }
  .footer-top p{ font-size:0.9rem; color:var(--ink-soft); line-height:1.75; max-width:280px; }
  .footer-col h4{
    font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:20px;
  }
  .footer-col ul{ list-style:none; }
  .footer-col li{ margin-bottom:12px; }
  .footer-col a{ font-family:'Cormorant Garamond', serif; font-size:1.05rem; }
  .footer-col a:hover{ color:var(--olive-deep); text-decoration:underline; }
  .footer-bottom{
    padding-top:5vh;
    display:flex; justify-content:space-between; align-items:center;
    font-size:0.75rem; color:var(--ink-soft); flex-wrap:wrap; gap:10px;
  }

  /* ---- fade-in on scroll, sneaky like a cat stalking ---- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---- mobile stuff ---- */

  @media (max-width: 980px){
    .nav-links, .nav-right{ display:none; }
    .nav-inner{ justify-content:space-between; }
    /* full-size logo is ~330px wide — way too wide once nav-links/nav-right
       are hidden and it's competing with the hamburger for a ~375px viewport */
    .wordmark-logo{ height:56px; max-width:60vw; }
    .discover-grid{ grid-template-columns:repeat(2,1fr); }
    .frames{ grid-template-columns:1fr; }
    .frames-photo{ aspect-ratio:1/1; }
    .event-card{ grid-template-columns:1fr; }
    .event-card-photo{ aspect-ratio:4/3; }
    .comm-grid{ grid-template-columns:1fr; gap:8vh; }
    .footer-top{ grid-template-columns:1fr 1fr; gap:5vh 6vw; }

    /* mobile hero — short landscape strip up top, headline sits below it instead of overlaid on the photo */
    .hero{
      position:static;
      height:auto; min-height:0;
      display:block;
      overflow:visible;
    }
    .hero img{
      position:static;
      width:100%; height:auto;
      aspect-ratio:16/9;
      display:block;
    }
    .hero::after{ display:none; }
    .hero-content{
      position:static;
      color:var(--ink);
      text-align:center;
      padding:5vh 6vw 6vh;
    }
    .hero-eyebrow{ color:var(--sage-deep); }

    /* the hero lead + the statement section both look like a lorem ipsum paragraph stacked on top of each other — separate them */
    .statement{
      border-top:1px solid var(--line);
      margin-top:2vh;
    }

    /* vh-based padding was written with desktop viewport heights in mind — on a tall, short-viewport phone
       these compound into huge dead gaps between sections. tighten them up with fixed padding instead. */
    .statement{ padding:6vh 6vw; }
    .discover{ padding:1vh 5vw 6vh; }
    .frames{ padding:6vh 6vw; }
    .commissions{ padding:6vh 6vw; }
    .section-head{ margin-bottom:5vh; }
    .comm-grid{ gap:5vh; }
    .double-teaser .content{ padding:6vh 6vw; }
    footer{ padding:6vh 6vw 4vh; }
  }

  @media (min-width: 981px){
    .nav-toggle, .mobile-nav{ display:none !important; }
  }

  /* hamburger button — 3 bars, cat whiskers energy */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:28px; height:22px; background:none; border:none; cursor:pointer;
    padding:0; flex:0 0 auto;
  }
  .nav-toggle span{
    display:block; height:2px; width:100%; background:var(--paper);
    border-radius:2px; transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* dropdown panel — closed by default, opens below the sticky header */
  .mobile-nav{
    display:none;
    flex-direction:column;
    background:var(--sage-deep);
    padding:6px 5vw 22px;
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    color:var(--paper);
    font-size:0.95rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:16px 0;
    border-bottom:1px solid rgba(247,242,231,0.18);
  }
  .mobile-nav a:last-child{ border-bottom:none; }
  .mobile-nav a[aria-current="page"]{ opacity:0.6; }

  @media (max-width: 560px){
    .footer-top{ grid-template-columns:1fr; }
  }


/* ---- hero used on all the inner pages ---- */

.page-hero{
  position:relative;
  height:56vh;
  min-height:340px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.page-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(30,22,14,0.6) 0%, rgba(30,22,14,0.08) 55%, transparent 75%);
}
.page-hero-content{
  position:relative; z-index:1;
  width:100%;
  padding:0 6vw 6vh;
  color:var(--paper);
}
.page-hero .eyebrow{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--paper); margin-bottom:16px;
}
.page-hero h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:400; max-width:16ch; }

.site-logo{
  display:block;
  height:40px; width:auto;
  margin:0 auto 6px;
}
.footer-top .site-logo{ height:34px; margin:0 0 14px; }

.lorem{ color:var(--ink-soft); line-height:1.85; font-size:1rem; max-width:60ch; }
.lorem + .lorem{ margin-top:1.2em; }

/* ---- portfolio pg ---- */

.portfolio-filter{
  display:flex; gap:2.6vw; flex-wrap:wrap;
  padding:8vh 6vw 2vh;
  border-bottom:1px solid var(--line);
}
.portfolio-filter button{
  /* strip the default button look — these should read as links, not chrome buttons */
  background:none; border:none; border-bottom:2px solid transparent;
  font-family:'Inter', sans-serif; font-weight:300;
  font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-soft); padding:0 0 14px; cursor:pointer;
}
.portfolio-filter button.active, .portfolio-filter button:hover{ color:var(--ink); border-color:var(--sage-deep); }
.portfolio-filter button:focus-visible{ outline:2px solid var(--olive); outline-offset:4px; }

.sub-filter{
  display:flex; gap:1.8vw; flex-wrap:wrap;
  padding:2.4vh 6vw 0;
}
.sub-filter[hidden]{ display:none; }
.sub-filter button{
  background:none; border:none; border-bottom:1px solid transparent;
  font-family:'Inter', sans-serif; font-weight:300;
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:0.7; padding:0 0 8px; cursor:pointer;
}
.sub-filter button.active, .sub-filter button:hover{ opacity:1; color:var(--ink); border-color:var(--sage-deep); }
.sub-filter button:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

.full-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.full-grid .tile{
  position:relative;
  background:var(--paper);
  aspect-ratio:4/5;
  overflow:hidden;
}
.full-grid .tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.full-grid .tile:hover img{ transform:scale(1.05); }
.full-grid .tile .tag{
  position:absolute; left:20px; bottom:20px; z-index:1;
  color:var(--paper); font-size:0.95rem;
  font-family:'Cormorant Garamond', serif;
  opacity:0; transform:translateY(8px);
  transition:all .35s ease;
}
.full-grid .tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(30,22,14,0.55), transparent 55%);
  opacity:0; transition:opacity .35s ease;
}
.full-grid .tile:hover::after, .full-grid .tile:hover .tag{ opacity:1; transform:translateY(0); }

/* ---- store pg ---- */

.store-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4vw 2.4vw;
  padding:10vh 6vw 14vh;
}
.product-card .product-photo{
  aspect-ratio:4/5; overflow:hidden; background:var(--paper);
  margin-bottom:20px;
}
.product-card .product-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-photo img{ transform:scale(1.05); }
.product-card h3{ font-size:1.4rem; margin-bottom:6px; }
.product-card .price{
  font-size:0.85rem; letter-spacing:0.08em; color:var(--sage-deep);
}

/* ---- events pg ---- */

.events-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:10vh;
}
.event-card{
  display:grid;
  grid-template-columns:340px 1fr;
  background:var(--cream);
}
.event-card-photo{ aspect-ratio:4/3; overflow:hidden; background:var(--paper); }
.event-card-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.event-card:hover .event-card-photo img{ transform:scale(1.05); }
.event-card-body{
  padding:6vh 4vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.event-card-date{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:14px;
}
.event-card-body h3{ font-size:1.7rem; margin-bottom:10px; }
.event-card-time{ color:var(--ink-soft); margin-bottom:8px; }
.event-card-location{ color:var(--ink-soft); margin-bottom:14px; line-height:1.6; }
.event-card-location a{ color:var(--sage-deep); text-decoration:underline; text-underline-offset:3px; }
.event-card-details{ color:var(--ink-soft); line-height:1.8; max-width:56ch; }
.events-empty{
  padding:10vh 6vw;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--ink-soft);
}

/* ---- frames pg, the process steps + wood finishes ---- */

.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.process-step{
  background:var(--paper);
  padding:8vh 3vw;
}
.process-step .roman{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  color:var(--sage-deep); font-size:1.3rem; display:block; margin-bottom:18px;
}
.process-step h3{ font-size:1.6rem; margin-bottom:14px; }

.finishes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.finish-swatch{
  aspect-ratio:1/1;
  position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.finish-swatch img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.finish-swatch span{
  position:relative; z-index:1; color:var(--paper);
  font-family:'Cormorant Garamond', serif; font-size:1.1rem;
  padding:20px;
  background:linear-gradient(0deg, rgba(30,22,14,0.6), transparent 70%);
  width:100%;
}

/* ---- double exposure pg, dark mode basically ---- */

.de-body{ background:#1E1611; color:#EDE3D2; }
/* the .wordmark backing plaque is only for the main site's logo image on
   the olive header — this page reuses .wordmark for its own plain text
   logo on a dark background, which never needed it */
.de-body .wordmark{ background:none; border-radius:0; padding:0; }
.de-body .page-hero::after{ background:linear-gradient(0deg, rgba(10,8,5,0.75) 0%, rgba(10,8,5,0.2) 55%, transparent 75%); }
.de-intro{ padding:12vh 6vw; text-align:center; }
.de-intro p{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.6;
  max-width:800px; margin:0 auto; color:rgba(237,227,210,0.82);
}
.de-archive{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(237,227,210,0.14);
  border-top:1px solid rgba(237,227,210,0.14);
  border-bottom:1px solid rgba(237,227,210,0.14);
}
.de-archive .piece{
  position:relative;
  background:#171310;
  aspect-ratio:5/4;
  overflow:hidden;
}
.de-archive .piece img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.25) brightness(0.75);
  transition:transform 1.1s ease, filter .4s ease;
}
.de-archive .piece:hover img{ transform:scale(1.04); filter:grayscale(0) brightness(0.85); }
.de-archive .piece .cap{
  position:absolute; left:24px; bottom:24px; z-index:1;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.2rem;
  color:#EDE3D2; opacity:0; transition:opacity .35s ease;
}
.de-archive .piece:hover .cap{ opacity:1; }

.de-body footer{ background:#1E1611; color:#EDE3D2; }
.de-body .footer-top{ border-color:rgba(237,227,210,0.18); }
.de-body .footer-top p{ color:rgba(237,227,210,0.6); }
.de-body .footer-col h4{ color:rgba(237,227,210,0.6); }
.de-body .footer-bottom{ color:rgba(237,227,210,0.55); }

/* ---- more mobile stuff ---- */

@media (max-width: 900px){
  .full-grid{ grid-template-columns:repeat(2,1fr); }
  .store-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:1fr; }
  .finishes{ grid-template-columns:repeat(2,1fr); }
  .de-archive{ grid-template-columns:1fr; }
}

/* ---- contact pg + form ---- */

.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  padding:12vh 6vw 14vh;
  align-items:start;
}
.contact-info .eyebrow{
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:20px; display:block;
}
.contact-info h2{ font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.2; margin-bottom:22px; }
.contact-info p{ color:var(--ink-soft); line-height:1.8; max-width:42ch; margin-bottom:36px; }
.contact-detail{ margin-bottom:26px; }
.contact-detail .label{
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); display:block; margin-bottom:6px;
}
.contact-detail .value{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; }

.form-group{ margin-bottom:26px; }
.form-group label{
  display:block; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:10px;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:10px 2px;
  font-family:'Inter', sans-serif;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .3s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--sage-deep);
}
.form-group textarea{ resize:vertical; min-height:110px; }
.contact-form .btn{ border:1px solid var(--sage-deep); color:var(--sage-deep); background:none; cursor:pointer; font-family:'Inter',sans-serif; }
.contact-form .btn:hover{ background:var(--sage-deep); color:var(--paper); }
.contact-form .btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* honeypot — invisible to real visitors, bots often fill it in anyway */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.form-status{ margin-top:16px; font-size:0.9rem; min-height:1.2em; }
.form-status.is-success{ color:var(--sage-deep); }
.form-status.is-error{ color:#a33; }

@media (max-width: 900px){
  .contact-wrap{ grid-template-columns:1fr; gap:6vh; }
}

/* portfolio lightbox — full-size preview on tile click */
.full-grid .tile{ cursor:zoom-in; }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5vh;
  padding:5vh 5vw;
  background:rgba(54,42,30,0.92);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:82vh;
  width:auto; height:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  transform:scale(.97);
  transition:transform .3s ease;
}
.lightbox.open img{ transform:scale(1); }
.lightbox-caption{
  flex:none;
  text-align:center;
  color:var(--paper);
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  letter-spacing:.02em;
}
.lightbox-close{
  position:absolute; top:24px; right:5vw;
  width:44px; height:44px;
  background:none; border:1px solid var(--paper); border-radius:50%;
  color:var(--paper); font-size:1.4rem; line-height:1;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.lightbox-close:hover{ background:var(--paper); color:var(--ink); }