/* ======================================================
   EVERYTHREAD by O. — shared styles
   Palette + type pulled from the brand logo (ink + gold on paper).
   ====================================================== */

:root{
  --ink:#2b2420;
  --ink-soft:#6b6158;
  --paper:#faf7f2;
  --paper-alt:#f1e9dc;
  --card:#f4eee3;
  --gold:#b3874a;
  --gold-deep:#8a6636;
  --line:rgba(43,36,32,.14);

  --font-serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --font-sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --measure:65ch;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; }

.eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:14px;
}
.section-head{ max-width:var(--measure); margin-bottom:44px; }
.section-head h2{
  font-family:var(--font-serif); font-size:clamp(26px,3.4vw,34px);
  font-weight:400; letter-spacing:-.01em; text-wrap:balance;
}

/* ---------- buttons & links ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  padding:14px 26px; font-size:13.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  border:1px solid var(--ink);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--paper); }

.btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink);
  padding:13px 24px; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  border:1px solid var(--line); transition:border-color .18s ease;
}
.btn-secondary:hover{ border-color:var(--gold); }

.link-cta{
  color:var(--gold-deep); font-size:14px; font-weight:600;
  text-decoration:none; border-bottom:1px solid var(--gold-deep); padding-bottom:2px;
}

.add-basket{
  display:block; text-align:center; text-decoration:none;
  width:100%; margin-top:14px; background:var(--paper); color:var(--ink);
  border:1px solid var(--ink); padding:11px 16px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.add-basket:hover{ background:var(--gold-deep); color:var(--paper); border-color:var(--gold-deep); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(250,247,242,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{ box-shadow:0 6px 20px rgba(43,36,32,.07); }
.header-inner{
  max-width:1180px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .3s ease;
}
.site-header.scrolled .header-inner{ padding-top:13px; padding-bottom:13px; }
.brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); transition:opacity .2s ease; }
.brand:hover{ opacity:.72; }
.brand-word{
  font-family:var(--font-serif); font-size:19px; letter-spacing:.14em; font-weight:700;
}
.brand-by{ font-family:var(--font-serif); font-size:15px; color:var(--gold-deep); white-space:nowrap; }
.brand-by i{ font-style:italic; }

.site-nav{ display:flex; gap:32px; }
.site-nav a{
  position:relative; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); font-weight:600;
  padding-bottom:4px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s cubic-bezier(.65,0,.35,1);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after, .site-nav a.active::after{ right:0; }
.site-nav a.active{ color:var(--ink); }

.header-right{ display:flex; align-items:center; gap:18px; }

.basket-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; text-decoration:none; color:var(--ink);
}
.basket-link svg{ width:22px; height:22px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.basket-link:hover svg{ transform:scale(1.12) rotate(-4deg); }
.basket-count{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; border-radius:100px;
  background:var(--gold-deep); color:var(--paper); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  font-variant-numeric:tabular-nums;
}

.nav-toggle{
  display:none; width:38px; height:38px; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--ink); display:block; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:100px; }
.footer-inner{
  max-width:1180px; margin:0 auto; padding:48px 28px 40px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px;
}
.footer-brand{ font-family:var(--font-serif); font-size:16px; letter-spacing:.1em; }
.footer-brand i{ color:var(--gold-deep); font-style:italic; letter-spacing:0; }
.footer-tagline{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.footer-nav{ display:flex; gap:24px; align-items:center; }
.footer-nav a{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }
.footer-nav a:hover{ color:var(--ink); }
.footer-social{ display:flex; align-items:center; }
.footer-social a{ display:inline-flex; color:var(--ink-soft); transition:color .2s ease; }
.footer-social a:hover{ color:var(--gold-deep); }
.footer-social svg{ width:20px; height:20px; }
.footer-fine{ font-size:11.5px; color:var(--ink-soft); width:100%; margin-top:20px; border-top:1px solid var(--line); padding-top:18px; }
.footer-legal{ display:flex; gap:16px; width:100%; margin-top:10px; }
.footer-legal a{ font-size:11.5px; letter-spacing:.03em; text-decoration:none; color:var(--ink-soft); }
.footer-legal a:hover{ color:var(--gold-deep); }

/* ---------- legal pages ---------- */
.legal-content{ max-width:1180px; margin:0 auto; padding:8px 28px 100px; }
.legal-content h2{
  font-family:var(--font-serif); font-size:clamp(20px,2.4vw,25px); font-weight:400;
  margin:40px 0 12px;
}
.legal-content h2:first-of-type{ margin-top:8px; }
.legal-content p, .legal-content li{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); max-width:var(--measure); margin-bottom:14px; }
.legal-content ul{ padding-left:22px; margin-bottom:14px; }
.legal-content strong{ color:var(--ink); font-weight:600; }
.legal-content .legal-updated{ font-size:12.5px; color:var(--ink-soft); margin-bottom:32px; }

/* ---------- scroll reveal ---------- */
/* Hidden state only applies via :not(.is-visible), so once revealed the element
   falls back to its own rules (e.g. a product card's hover lift) instead of a
   competing transform declaration winning on specificity. */
.js .reveal, .js .reveal-left, .js .reveal-right{
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.js .reveal:not(.is-visible){ opacity:0; transform:translateY(28px); }
.js .reveal-left:not(.is-visible){ opacity:0; transform:translateX(-32px); }
.js .reveal-right:not(.is-visible){ opacity:0; transform:translateX(32px); }

/* ---------- page header (About / Shop / Basket) ---------- */
.page-header{
  max-width:1180px; margin:0 auto; padding:64px 28px 8px;
}
.page-header h1{
  font-family:var(--font-serif); font-size:clamp(32px,4.6vw,46px); font-weight:400;
  letter-spacing:-.01em; text-wrap:balance;
}
.page-sub{ font-size:15px; color:var(--ink-soft); max-width:var(--measure); margin-top:14px; line-height:1.6; }

/* ---------- home: video hero ---------- */
.video-hero{
  position:relative; width:100%; overflow:hidden;
  height:clamp(480px,72vh,680px);
  background:var(--ink);
}
.video-hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 35%;
}
.video-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,14,11,0) 0%, rgba(18,14,11,0) 22%, rgba(18,14,11,.42) 55%, rgba(18,14,11,.8) 100%);
}
.video-hero-content{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 28px 56px;
}
.video-hero-panel{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--paper); max-width:640px;
}
.video-hero-panel .eyebrow{ color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 1px 12px rgba(0,0,0,.6); }
.video-hero-panel h1{
  font-family:var(--font-serif); font-size:clamp(32px,4.6vw,48px); font-weight:400;
  line-height:1.14; letter-spacing:-.01em; text-wrap:balance; margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.55);
}
.video-hero-panel .hero-sub{
  font-size:15.5px; line-height:1.65; color:rgba(250,247,242,.94);
  max-width:42ch; margin-bottom:26px;
  text-shadow:0 1px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
}
.hero-rule{ width:52px; height:1px; background:var(--gold); margin-bottom:20px; }

.btn-on-video{ background:transparent; color:var(--paper); border-color:rgba(250,247,242,.55); }
.btn-on-video:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--paper); }

.video-hero-panel > *{
  opacity:0; transform:translateY(18px);
  animation:heroIn .8s cubic-bezier(.16,.8,.3,1) forwards;
}
.video-hero-panel .hero-rule{ animation-delay:.05s; }
.video-hero-panel .eyebrow{ animation-delay:.16s; }
.video-hero-panel h1{ animation-delay:.28s; }
.video-hero-panel .hero-sub{ animation-delay:.42s; }
.video-hero-panel .btn-on-video{ animation-delay:.56s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

@media (max-width:600px){
  .video-hero{ height:clamp(420px,78vh,560px); }
  .video-hero-content{ padding:0 24px 40px; }
}

/* ---------- home: featured ---------- */
.featured{ max-width:1180px; margin:0 auto; padding:0 28px 100px; }
.featured-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:36px; }
.featured-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.product-card{ display:flex; flex-direction:column; transition:transform .3s ease; text-decoration:none; color:inherit; }
.product-card:hover{ transform:translateY(-6px); }
.product-link{ display:contents; text-decoration:none; color:inherit; }
.product-photo{
  aspect-ratio:4/5; margin-bottom:16px; border:1px solid var(--line);
  overflow:hidden; background:var(--paper-alt); transition:box-shadow .3s ease;
}
.product-card:hover .product-photo{ box-shadow:0 20px 36px rgba(43,36,32,.16); }
.product-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .35s ease;
}
.product-card:hover .product-photo img{ transform:scale(1.035); }

.product-card h3{ font-family:var(--font-serif); font-size:17px; font-weight:400; margin-bottom:4px; }
.product-card .desc{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.product-card .price{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- home: story teaser ---------- */
.story-teaser{ max-width:1180px; margin:0 auto; padding:0 28px 110px; }
.story-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.story-photo{
  aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden;
}
.story-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.story-teaser h2{
  font-family:var(--font-serif); font-size:clamp(26px,3.6vw,36px); font-weight:400;
  letter-spacing:-.01em; text-wrap:balance; margin-bottom:16px;
}
.story-teaser p{ font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:46ch; margin-bottom:20px; }

/* ---------- home: cta band ---------- */
.cta-band{
  max-width:1180px; margin:0 auto 110px; padding:56px 28px;
  background:var(--ink); color:var(--paper); text-align:center;
}
.cta-band h2{ font-family:var(--font-serif); font-size:clamp(24px,3.4vw,32px); font-weight:400; margin-bottom:22px; text-wrap:balance; }
.cta-band .btn-primary{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.cta-band .btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--paper); }

/* ---------- about page ---------- */
.about-main{ max-width:1180px; margin:56px auto 0; padding:0 28px 100px; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about-photo{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.about-copy p{ font-size:16px; line-height:1.75; color:var(--ink-soft); max-width:var(--measure); margin-bottom:18px; }

.process{ max-width:1180px; margin:0 auto; padding:0 28px 100px; }
.process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; border-top:1px solid var(--line); padding-top:40px; }
.step-no{ font-family:var(--font-serif); font-size:13px; color:var(--gold-deep); letter-spacing:.08em; display:block; margin-bottom:14px; }
.process-steps h3{ font-family:var(--font-serif); font-size:19px; font-weight:400; margin-bottom:10px; }
.process-steps p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); }

.about-cta{
  max-width:1180px; margin:0 auto 110px; padding:0 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.about-cta p{ font-family:var(--font-serif); font-size:24px; font-style:italic; }

/* ---------- shop page ---------- */
.category-filter{
  max-width:1180px; margin:36px auto 0; padding:0 28px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.category-filter button{
  font-family:var(--font-sans); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); background:var(--paper-alt);
  border:1px solid var(--line); padding:9px 16px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.category-filter button span{ font-variant-numeric:tabular-nums; opacity:.7; margin-left:2px; }
.category-filter button:hover{ border-color:var(--gold); color:var(--ink); }
.category-filter button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.category-filter button.active span{ opacity:.85; }

.filter-empty{
  max-width:1180px; margin:56px auto 0; padding:0 28px 120px;
  font-size:15px; color:var(--ink-soft); text-align:center;
}

.shop-grid{ max-width:1180px; margin:32px auto 0; padding:0 28px 120px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.shop-grid .product-photo{ aspect-ratio:1/1; }
.shop-grid .product-card.is-filtered-out{ display:none; }

/* ---------- product detail page ---------- */
.breadcrumb{
  max-width:1180px; margin:0 auto; padding:24px 28px 0;
  font-size:12.5px; color:var(--ink-soft);
}
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .sep{ margin:0 6px; opacity:.5; }
.breadcrumb .current{ color:var(--ink); }

.product-detail{
  max-width:1180px; margin:0 auto; padding:36px 28px 100px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.gallery-main{
  aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-alt); margin-bottom:14px;
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.gallery-thumbs{ display:flex; gap:12px; }
.gallery-thumbs button{
  width:72px; height:72px; padding:0; border:1px solid var(--line);
  background:none; cursor:pointer; overflow:hidden; opacity:.65;
  transition:opacity .2s ease, border-color .2s ease;
}
.gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.gallery-thumbs button:hover{ opacity:1; }
.gallery-thumbs button.active{ opacity:1; border-color:var(--gold); }

.product-info h1{
  font-family:var(--font-serif); font-size:clamp(28px,3.6vw,38px); font-weight:400;
  margin-bottom:14px; text-wrap:balance;
}
.product-info .price{ font-size:20px; font-weight:600; margin-bottom:26px; font-variant-numeric:tabular-nums; }
.product-info .desc-body p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px; max-width:52ch; }
.product-info .btn-primary{ margin-top:6px; }
.product-info .note{ font-size:12.5px; color:var(--ink-soft); margin-top:18px; }

.related{ max-width:1180px; margin:0 auto; padding:0 28px 110px; }
.related .section-head{ margin-bottom:32px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* ---------- basket page ---------- */
.basket-empty{
  max-width:1180px; margin:0 auto; padding:70px 28px 140px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
}
.basket-icon{ color:var(--gold-deep); margin-bottom:18px; }
.basket-icon svg{ width:56px; height:56px; }
.basket-empty p:first-of-type{ font-family:var(--font-serif); font-size:22px; }
.basket-sub{ font-size:14.5px; color:var(--ink-soft); max-width:40ch; margin-bottom:20px; }

/* ---------- contact page ---------- */
.contact-section{
  max-width:1180px; margin:36px auto 0; padding:0 28px 120px;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;
}
.contact-info h2{
  font-family:var(--font-serif); font-size:clamp(24px,3vw,30px); font-weight:400;
  margin-bottom:16px; text-wrap:balance;
}
.contact-info p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:26px; max-width:46ch; }
.contact-detail{ margin:0; }
.contact-detail dt{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:4px;
}
.contact-detail dd{ font-size:15px; margin:0 0 18px; color:var(--ink); }

.contact-form{ max-width:520px; }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.form-field label{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-sans); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:12px 14px;
  transition:border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--gold);
}
.form-field textarea{ min-height:140px; resize:vertical; }
.contact-form .btn-primary{ margin-top:4px; }
.form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .story-inner, .about-main, .product-detail, .contact-section{ grid-template-columns:1fr; }
  .featured-grid, .related-grid{ grid-template-columns:repeat(2,1fr); }
  .process-steps{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0;
    display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:14px 28px; border-bottom:1px solid var(--line); width:100%; }
  .nav-toggle{ display:flex; }
}
@media (max-width:520px){
  .featured-grid, .shop-grid, .related-grid{ grid-template-columns:1fr; }
  .gallery-thumbs button{ width:64px; height:64px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .js .reveal:not(.is-visible), .js .reveal-left:not(.is-visible), .js .reveal-right:not(.is-visible){
    opacity:1 !important; transform:none !important;
  }
}