:root{
    --paper: #F6F1E6;
    --paper-deep: #ECE3D2;
    --ink: #2B2621;
    --ink-soft: #6E6558;
    --line: #E1D5BC;
    --rattan: #B48849;
    --sage: #77815C;
    --silk: #93424C;
    --logo-ink: #64503E;
  }

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

  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .brandmark{
    font-family: 'Fraunces', serif;
    font-weight: 480;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }

  a{ color: inherit; text-decoration: none; }
  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }
  :focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

  /* ---------- header ---------- */
  header{
    position: sticky; top: 0; z-index: 30;
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(43,38,33,0.06), 0 4px 14px rgba(43,38,33,0.05);
  }
  .nav{ display:flex; align-items:center; justify-content: space-between; padding: 22px 0; }
  .logo{ display:flex; align-items:center; gap: 12px; }
  .logo img{ height: 34px; width: auto; display:block; }
  .logo-text{ font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; letter-spacing: 0.05em; color: var(--logo-ink); }
  .navlinks{
    display:flex; gap: 30px;
    font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .navlinks a{ position: relative; padding-bottom: 3px; }
  .navlinks a::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height: 1px; background: var(--rattan);
    transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .navlinks a:hover{ color: var(--rattan); }
  .navlinks a:hover::after{ transform: scaleX(1); }
  .btn{
    display:inline-block; padding: 10px 20px;
    background: var(--ink); color: var(--paper);
    border-radius: 2px; font-size: 14.5px; font-weight: 500;
    transition: background .18s ease; white-space: nowrap;
  }
  .btn:hover{ background: #45392C; }
  .btn-outline{
    display:inline-block; padding: 9px 19px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--ink); border-radius: 2px;
    font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
    transition: background .18s ease, color .18s ease; white-space: nowrap;
  }
  .btn-outline:hover{ background: var(--ink); color: var(--paper); }

  .nav-actions{ display:flex; align-items:center; gap: 16px; }

  .menu-toggle{
    display:flex;
    flex-direction:column; align-items:center; justify-content:center;
    gap: 5px;
    width: 36px; height: 36px; padding: 0;
    background: transparent; border: none; cursor: pointer;
  }
  .menu-toggle span{
    display:block; width: 22px; height: 2px; background: var(--ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .mobile-nav{
    display:none;
    flex-direction:column;
    padding: 8px 20px 22px;
    background: #FFFFFF;
    border-top: 1px solid var(--line);
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    padding: 13px 0;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav a:hover{ color: var(--rattan); }
  .mobile-nav .btn{
    display:inline-block; text-align:center;
    margin-top: 10px; border-bottom: none;
  }

  @media (max-width: 760px){
    .navlinks{ display:none; }
    .btn-outline{ display:none; }
  }

  /* ---------- image placeholder ---------- */
  .ph{
    position: relative;
    width: 100%;
    background: var(--paper-deep);
    border: 1px dashed #C9BB9C;
    display:flex; align-items:center; justify-content:center;
    color: #9A8E76; font-size: 12.5px; text-align:center;
    padding: 10px;
    overflow: hidden;
  }
  .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ph span{ position:relative; z-index:1; max-width: 22ch; line-height: 1.4; }

  /* ---------- hero ---------- */
  .hero{ position: relative; line-height: 0; }
  .hero img{ width: 100%; height: auto; display: block; }

  /* ---------- origin / narrative sections ---------- */
  .narrative{ padding: 72px 0; border-bottom: 1px solid var(--line); }
  .narrative .wrap{
    display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start;
  }
  .narrative.reverse .wrap{ grid-template-columns: 1.15fr 0.85fr; }
  .narrative.reverse .narrative-copy{ order: 2; }
  .narrative.reverse .narrative-mark{ order: 1; }
  @media (max-width: 780px){
    .narrative .wrap, .narrative.reverse .wrap{ grid-template-columns: 1fr; gap: 28px; }
    .narrative.reverse .narrative-copy, .narrative.reverse .narrative-mark{ order: unset; }
  }
  .origin-grid{ grid-template-columns: 1.05fr 0.95fr; max-width: 1040px; }
  @media (max-width: 780px){ .origin-grid{ grid-template-columns: 1fr; } }
  .narrative-copy .eyebrow{ font-size: 14px; color: var(--rattan); font-weight: 600; margin-bottom: 10px; }
  .narrative-copy h2{ font-size: clamp(28px, 3.4vw, 40px); max-width: 14ch; }
  .narrative-copy p{ margin-top: 18px; color: var(--ink-soft); font-size: 16.5px; max-width: 52ch; }
  .narrative-copy p + p{ margin-top: 14px; }
  .narrative-mark{
    display:flex; align-items:center; justify-content:center;
    padding-top: 8px;
  }
  .narrative-mark svg{ width: 100%; max-width: 260px; height: auto; }
  .vunart-logo-wrap{ flex-direction: column; gap: 10px; }
  .vunart-logo{ width: 100%; max-width: 220px; height: auto; }
  .vunart-logo-caption{ font-size: 13px; color: var(--ink-soft); text-align: center; }

  /* ---------- process gallery ---------- */
  .process-lead{ margin-top: 40px; }
  .process-lead img{
    width: 100%; height: auto; display:block; aspect-ratio: 16/8; object-fit: cover;
  }
  .process-lead .cap{ margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
  .process-row{
    margin-top: 24px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }
  @media (max-width: 640px){ .process-row{ grid-template-columns: 1fr; } }
  .process-row figure{ margin: 0; }
  .process-row img{
    width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display:block;
  }
  .process-row figcaption{ margin-top: 8px; font-size: 13px; color: var(--ink-soft); text-align: center; }

  /* uniform: equal visual footprint across mixed-aspect photos, no cropping (contain + fixed-height letterbox).
     Height/centering live on the img itself (object-fit works directly on a replaced element),
     not on figure — so figure stays auto-height and figcaption always renders in normal flow below it. */
  .process-row.uniform figure{
    margin: 0; display:flex; flex-direction:column;
  }
  .process-row.uniform img{
    width:100%; height:300px; aspect-ratio:auto; object-fit:contain;
    background: var(--paper-deep); display:block;
  }
  @media (max-width: 640px){ .process-row.uniform img{ height: 260px; } }

  .shop-label{
    margin-top: 48px;
    margin-bottom: 28px;
    padding-top: 24px;
    border-top: 2px solid var(--ink);
    display:flex; align-items:baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
  }
  .shop-label h3{
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 480; color: var(--ink);
  }
  .shop-label span{ font-size: 13.5px; color: var(--ink-soft); }

  .custom-note{
    margin-top: 24px;
    margin-bottom: 40px;
    padding: 20px 22px;
    background: var(--paper-deep);
    border-left: 3px solid var(--silk);
    display:flex; align-items:flex-start; gap: 16px;
  }
  .custom-note .icon{ width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; }
  .custom-note .icon svg{ width:100%; height:100%; }
  .custom-note .text strong{ display:block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
  .custom-note .text p{ font-size: 14px; color: var(--ink-soft); margin: 0; }

  .principles{
    margin-top: 32px;
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    padding-top: 28px; border-top: 1px solid var(--line);
  }
  @media (max-width: 640px){ .principles{ grid-template-columns: 1fr; } }
  .principles div{ max-width: none; }
  .principles .num{
    font-family: 'Fraunces', serif; font-size: 26px; color: var(--rattan); margin-bottom: 4px;
  }
  .principles p{ font-size: 14px; color: var(--ink-soft); margin: 0; }

  .narrative-side{ padding-top: 4px; }
  .narrative-side .lead-note{
    font-family: 'Fraunces', serif; font-style: italic; font-weight: 420;
    font-size: 21px; line-height: 1.45; color: var(--ink);
    padding-bottom: 28px; border-bottom: 1px solid var(--line);
  }
  .principles-vertical{
    grid-template-columns: 1fr; gap: 22px;
    border-top: none; padding-top: 26px;
  }
  .principles-vertical > div{
    padding-bottom: 22px; border-bottom: 1px solid var(--line);
  }
  .principles-vertical > div:last-child{ border-bottom: none; padding-bottom: 0; }

  /* ---------- line section ---------- */
  .line-section{ padding: 68px 0; border-bottom: 1px solid var(--line); }
  .line-section:last-of-type{ border-bottom: none; }

  .line-head{
    display:flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
  }
  .line-head .eyebrow{
    font-size: 14px; color: var(--rattan); font-weight: 600; margin-bottom: 8px;
  }
  .line-section.vun-art .line-head .eyebrow{ color: var(--silk); }
  .line-head h2{ font-size: clamp(26px, 3.2vw, 34px); }
  .line-head p{
    max-width: 46ch; color: var(--ink-soft); font-size: 15.5px; margin-top: 8px;
  }
  .line-head .credit{
    font-size: 13.5px; color: var(--ink-soft); text-align: right; max-width: 26ch;
  }

  .product-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  @media (max-width: 900px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }

  /* ---------- more from sonoravn: mobile horizontal strip ---------- */
  @media (max-width: 640px){
    .product-grid.related-grid{
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 46%;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
    }
    .product-grid.related-grid .product-card{ scroll-snap-align: start; }
  }

  .product-card{ display:block; color: inherit; }
  .product-card:hover h3{ color: var(--rattan); }
  .product-card .ph{ aspect-ratio: 1/1; margin-bottom: 14px; overflow: hidden; }
  .product-card .ph img{ transition: transform .25s ease; }
  .product-card:hover .ph img{ transform: scale(1.03); }
  .product-card h3{ font-size: 17px; font-weight: 480; transition: color .16s ease; }
  .product-card .desc{ margin-top: 5px; font-size: 14px; color: var(--ink-soft); }
  .product-card .price{ margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }

  /* ---------- story strip ---------- */
  .story{ background: var(--paper-deep); padding: 72px 0; }
  .story .wrap{ max-width: 760px; }
  .story h2{
    font-style: italic; font-weight: 420;
    font-size: clamp(22px, 2.8vw, 28px);
  }
  .story p{ margin-top: 18px; color: var(--ink-soft); font-size: 16px; }

  /* ---------- footer ---------- */
  footer{ padding: 48px 0 40px; }
  .footer-tag{
    font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; max-width: 30ch;
  }
  .footer-links{
    display:flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    font-size: 14px; font-weight: 500; color: var(--ink-soft);
  }
  .footer-links a{ position: relative; padding-bottom: 3px; }
  .footer-links a:hover{ color: var(--rattan); }

  /* ---------- hub / find-us ---------- */
  .hub{ padding: 64px 0; border-bottom: 1px solid var(--line); }
  .hub .section-head{ margin-bottom: 40px; max-width: 60ch; }
  .hub .section-head h2{ font-family:'Fraunces', serif; font-size: clamp(26px, 3vw, 32px); font-weight: 480; }
  .hub .section-head p{ margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; }
  .hub-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  }
  @media (max-width: 780px){ .hub-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px; } }
  .hub-item{
    display:block;
  }
  .hub-item .icon{
    width: 40px; height: 40px; margin-bottom: 16px;
  }
  .hub-item .icon svg{ width: 100%; height: 100%; }
  .hub-item .name{
    font-family:'Fraunces', serif; font-size: 19px; color: var(--ink);
    transition: color .16s ease;
  }
  .hub-item:hover .name{ color: var(--rattan); }
  .hub-item .desc{ margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
  .fine{
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-soft);
    display:flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  }

  /* ---------- product page ---------- */
  .product-hero{ margin-top: 0; }
  .product-hero img{
    max-width: 100%; max-height: 420px; width: auto; height: auto;
    display:block; margin: 0 auto;
  }
  .product-hero .cap{ margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
  @media (max-width: 640px){ .product-hero img{ max-height: 300px; } }

  .product-details dl{
    display:grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0;
  }
  .product-details dt{ font-weight: 600; color: var(--ink); font-size: 14.5px; }
  .product-details dd{ margin: 0; color: var(--ink-soft); font-size: 14.5px; }

  .related-links{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

  /* ---------- explore the designs strip ---------- */
  .design-strip{
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
  }
  .design-strip figure{
    margin: 0; display:flex; flex-direction:column;
  }
  .design-strip img{
    width:100%; height:190px; object-fit:contain; display:block;
    background: var(--paper-deep); border-radius: 2px;
  }
  .design-strip figcaption{ margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
  @media (max-width: 780px){
    .design-strip{ grid-template-columns: repeat(2, 1fr); }
    .design-strip img{ height: 220px; }
  }

  .design-strip-item{ cursor: pointer; }
  .design-strip-item:hover img{ opacity: 0.92; }
  .design-strip-item:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

  /* ---------- design gallery lightbox ---------- */
  /* Closed state MUST be display:none — an element with only opacity:0 stays in
     layout as a full-viewport position:fixed box and silently blocks every click
     on the page underneath it. `.is-open` is the single source of truth for
     visibility; `[hidden]` is kept in sync in JS too, for assistive tech. */
  .design-lightbox{
    display: none;
  }
  .design-lightbox.is-open{
    display:flex; align-items:center; justify-content:center;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 16, 12, 0.88);
    padding: 32px; opacity: 0; pointer-events: none;
    transition: opacity 160ms ease;
  }
  .design-lightbox.is-open.is-visible{ opacity: 1; pointer-events: auto; }
  body.design-lightbox-open{ overflow: hidden; }
  .design-lightbox__panel{
    background: var(--paper); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    max-width: min(80vw, 900px); max-height: 90vh;
    display:flex; flex-direction:column; align-items:center;
    padding: 20px 20px 18px; position: relative;
    overflow: hidden; /* safety net; the image's own vh cap below should make this a no-op */
  }
  .design-lightbox__stage{
    /* Deliberately NOT flex:1/height:100% chained through imgwrap → img: percentage
       heights through an auto-sized flex ancestor are circular (the child's %
       needs the parent's resolved height, but the parent's height here is only
       "auto up to a cap"), and in practice the image ends up sized to its own
       content and overflows past this box, overlapping the title below it.
       Instead the image caps its own height directly in viewport units, and
       stage/imgwrap simply size to fit that — no percentage chain at all. */
    display:flex; align-items:center; justify-content:center; gap: 10px;
    width: 100%;
  }
  .design-lightbox__imgwrap{
    display:flex; align-items:center; justify-content:center;
    min-width: 0;
  }
  .design-lightbox__img{
    display:block; max-width: 100%; max-height: 55vh;
    width: auto; height: auto; object-fit: contain; border-radius: 2px;
  }
  .design-lightbox__captionblock{
    margin-top: 14px; text-align: center; max-width: 46ch;
  }
  .design-lightbox__title{
    color: var(--ink); font-family: 'Fraunces', serif; font-weight: 480; font-size: 20px; line-height: 1.3;
  }
  .design-lightbox__desc{
    margin-top: 6px; color: var(--ink-soft); font-size: 14px; line-height: 1.5;
  }
  .design-lightbox__close{
    position: absolute; top: -16px; right: -16px;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--paper); color: var(--ink);
    font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .design-lightbox__close:hover{ background: var(--paper-deep); }
  .design-lightbox__nav{
    flex: 0 0 auto; align-self: center;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--paper); color: var(--ink);
    font-size: 22px; line-height: 1; cursor: pointer;
  }
  .design-lightbox__nav:hover{ background: var(--paper-deep); }
  .design-lightbox__close:focus-visible,
  .design-lightbox__nav:focus-visible,
  .design-lightbox__dot:focus-visible,
  .design-lightbox__thumb:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

  .design-lightbox__dots{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap: 7px; margin-top: 12px; max-width: 100%;
  }
  .design-lightbox__dot{
    width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none;
    background: var(--line); cursor: pointer; flex: 0 0 auto;
  }
  .design-lightbox__dot.is-active{ background: var(--rattan); }

  .design-lightbox__thumbs{
    display:flex; gap: 8px; margin-top: 12px; max-width: 100%;
    overflow-x: auto; padding: 4px 2px; scroll-snap-type: x proximity;
  }
  .design-lightbox__thumb{
    flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 3px;
    border: 2px solid transparent; background: var(--paper-deep); cursor: pointer;
    overflow: hidden; scroll-snap-align: center;
  }
  .design-lightbox__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .design-lightbox__thumb.is-active{ border-color: var(--rattan); }

  @media (max-width: 640px){
    .design-lightbox.is-open{ padding: 16px; }
    .design-lightbox__panel{ max-width: 94vw; max-height: 88vh; padding: 16px 14px 12px; }
    .design-lightbox__img{ max-height: 48vh; }
    .design-lightbox__nav{ width: 34px; height: 34px; font-size: 18px; }
    .design-lightbox__close{ top: -12px; right: -12px; }
    .design-lightbox__thumb{ width: 40px; height: 40px; }
  }

  .faq details{ border-bottom: 1px solid var(--line); padding: 18px 0; }
  .faq details:first-of-type{ border-top: 1px solid var(--line); }
  .faq summary{
    cursor: pointer; font-family: 'Fraunces', serif; font-size: 17px; font-weight: 480;
    color: var(--ink); list-style: none; display:flex; justify-content: space-between;
    align-items: center; gap: 16px;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:'+'; font-size: 20px; color: var(--rattan); flex-shrink: 0; }
  .faq details[open] summary::after{ content:'\2013'; }
  .faq p{ margin-top: 12px; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }