/* ===== Foundations ===== */
:root{
  --cream: #f4ecdc;
  --paper: #ece0c8;
  --paper-dark: #e2d3b2;
  --ink: #2b2318;
  --ink-soft: #55493a;
  --terracotta: #c1602c;
  --terracotta-deep: #9c491e;
  --moss: #4f5b3a;
  --moss-deep: #3a4429;
  --indigo: #3c4d63;
  --gold: #b6862f;
  --line: rgba(43,35,24,0.16);
  --line-strong: rgba(43,35,24,0.32);
  --shadow: 0 18px 40px -20px rgba(43,35,24,0.35);
  --radius: 2px;
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}

.eyebrow{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--terracotta-deep);
  margin:0 0 0.9rem;
}

.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:transparent;
  transition:background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled{
  background:rgba(244,236,220,0.92);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
}
.header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:1.3rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.wordmark span{color:var(--terracotta);font-style:italic;}
.main-nav{
  display:flex;
  gap:2.2rem;
  font-size:0.92rem;
  font-weight:500;
}
.main-nav a{
  position:relative;
  padding-bottom:0.2rem;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:1px;
  background:var(--terracotta);
  transition:right 0.25s ease;
}
.main-nav a:hover::after{right:0;}
.header-actions{display:flex;align-items:center;gap:1rem;}
.saved-pill{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.8rem;
  font-weight:600;
  color:var(--terracotta-deep);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:0.3rem 0.65rem;
}
.nav-toggle{display:none;padding:0.3rem;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.92rem;
  font-weight:600;
  padding:0.85rem 1.5rem;
  border-radius:999px;
  transition:transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{background:var(--ink);color:var(--cream);}
.btn-primary:hover{background:var(--terracotta-deep);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}

/* ===== Hero ===== */
.hero{padding:3.5rem 2rem 0;max-width:1280px;margin:0 auto;}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.hero-copy h1{font-size:clamp(2.3rem, 4.2vw, 3.6rem);}
.hero-sub{
  margin-top:1.4rem;
  max-width:34rem;
  color:var(--ink-soft);
  font-size:1.05rem;
}
.hero-cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap;}

.hero-visual{
  position:relative;
  height:420px;
}
.hero-mark{
  position:absolute;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
}
.hero-mark svg{width:52%;height:52%;}
.hero-mark--vessel{
  width:230px;height:230px;
  background:var(--terracotta);
  color:var(--cream);
  top:0; right:20px;
  transform:rotate(-4deg);
}
.hero-mark--weave{
  width:150px;height:150px;
  background:var(--paper-dark);
  color:var(--ink);
  bottom:40px; left:0;
  border-radius:18px;
  transform:rotate(6deg);
}
.hero-mark--radiant{
  width:120px;height:120px;
  background:var(--moss);
  color:var(--cream);
  bottom:0; right:120px;
}
.hero-vertical-label{
  position:absolute;
  right:-10px;
  top:50%;
  writing-mode:vertical-rl;
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

/* ===== Marquee ===== */
.marquee{
  background:var(--moss);
  color:var(--cream);
  overflow:hidden;
  padding:0.85rem 0;
  margin-top:4rem;
  transform:skewY(-1deg);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:scroll-left 32s linear infinite;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.05em;
  white-space:nowrap;
}
.marquee-track span{padding-right:0.4em;}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ===== Story ===== */
.story{padding:6rem 2rem;max-width:1280px;margin:0 auto;transform:skewY(1deg);margin-top:-1.2rem;padding-top:7.2rem;}
.story-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:4rem;
  align-items:start;
  transform:skewY(-1deg);
}
.story-mark{
  width:100%;
  max-width:280px;
  aspect-ratio:1;
  background:var(--paper);
  border-radius:18px;
  color:var(--indigo);
  padding:2.4rem;
  box-shadow:var(--shadow);
  transform:rotate(-2deg);
}
.story-lead{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-style:italic;
  color:var(--ink);
  margin-bottom:1.4rem;
}
.story-copy p{color:var(--ink-soft);margin-bottom:1.2rem;max-width:38rem;}
.story-copy blockquote{
  margin:2rem 0 0.8rem;
  padding-left:1.3rem;
  border-left:3px solid var(--terracotta);
  font-family:var(--font-display);
  font-size:1.2rem;
  font-style:italic;
  color:var(--ink);
  max-width:36rem;
}
.story-attribution{font-size:0.88rem;font-weight:600;color:var(--ink-soft);padding-left:1.3rem;}

/* ===== Section head shared ===== */
.section-head{max-width:640px;margin-bottom:2.6rem;}
.section-head h2{font-size:clamp(1.9rem, 3vw, 2.6rem);}
.section-sub{margin-top:1rem;color:var(--ink-soft);}

/* ===== Collection ===== */
.collection{padding:3rem 2rem 6rem;max-width:1280px;margin:0 auto;}
.filters{display:flex;gap:0.7rem;margin-bottom:3rem;flex-wrap:wrap;}
.filter-chip{
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:0.5rem 1.1rem;
  font-size:0.85rem;
  font-weight:600;
  transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-chip:hover{border-color:var(--ink);}
.filter-chip.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink);}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.8rem;
}
.product-card{
  background:var(--paper);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.product-card:hover{transform:translateY(-6px) rotate(-0.4deg);box-shadow:var(--shadow);}
.product-card:nth-child(3n+2){transform:translateY(14px);}
.product-card:nth-child(3n+2):hover{transform:translateY(8px) rotate(0.4deg);}
.product-card.is-hidden{display:none;}

.card-mark{
  aspect-ratio:5/4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.2rem;
}
.card-mark svg{width:56%;height:56%;}
.mark-terracotta{background:var(--terracotta);color:var(--cream);}
.mark-indigo{background:var(--indigo);color:var(--cream);}
.mark-moss{background:var(--moss);color:var(--cream);}
.mark-gold{background:var(--gold);color:var(--ink);}

.card-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:0.3rem;flex:1;}
.card-category{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--terracotta-deep);
}
.card-body h3{font-size:1.15rem;margin-top:0.15rem;}
.card-maker{font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
.card-material{font-size:0.86rem;color:var(--ink-soft);margin-top:0.25rem;flex:1;}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.card-price{font-family:var(--font-display);font-weight:600;font-size:1.05rem;}
.card-actions{display:flex;align-items:center;gap:0.7rem;}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;height:2rem;
  border-radius:50%;
  border:1px solid var(--line-strong);
  color:var(--ink-soft);
  transition:color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover{transform:scale(1.08);}
.save-btn[aria-pressed="true"]{color:var(--terracotta);border-color:var(--terracotta);}
.save-btn.is-bump{animation:bump 0.35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.3);}100%{transform:scale(1);}}
.enquire-link{
  font-size:0.86rem;
  font-weight:700;
  color:var(--terracotta-deep);
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.enquire-link:hover{border-color:var(--terracotta-deep);}

.filter-empty{color:var(--ink-soft);font-style:italic;padding:2rem 0;}

/* ===== Process ===== */
.process{padding:2rem 2rem 6rem;max-width:1000px;margin:0 auto;}
.process-list{display:flex;flex-direction:column;gap:2.6rem;}
.process-step{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:1.6rem;
  align-items:start;
  padding-bottom:2.2rem;
  border-bottom:1px solid var(--line);
}
.process-step:last-child{border-bottom:none;}
.process-step:nth-child(even){grid-template-columns:90px 1fr;}
.process-step:nth-child(even) > div{margin-left:2.5rem;}
.step-number{
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--terracotta);
  font-style:italic;
  line-height:1;
}
.process-step h3{font-size:1.3rem;margin-bottom:0.5rem;}
.process-step p{color:var(--ink-soft);max-width:34rem;}

/* ===== Testimonial ===== */
.testimonial{
  background:var(--ink);
  color:var(--cream);
  padding:6rem 2rem;
}
.testimonial-inner{max-width:760px;margin:0 auto;text-align:center;}
.testimonial-quote{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  font-style:italic;
  line-height:1.35;
}
.testimonial-name{margin-top:1.6rem;font-weight:700;}
.testimonial-note{margin-top:0.4rem;font-size:0.85rem;color:rgba(244,236,220,0.6);}

/* ===== Visit / Footer top ===== */
.visit{padding:6rem 2rem;max-width:1280px;margin:0 auto;}
.visit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.visit h2{font-size:clamp(1.8rem, 3vw, 2.4rem);}
.visit-hours{margin-top:1.2rem;color:var(--ink-soft);}
.visit-contact{
  background:var(--paper);
  border-radius:14px;
  padding:2.4rem;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.visit-email{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--terracotta-deep);
}
.visit-social{font-weight:600;color:var(--ink-soft);}
.visit-note{color:var(--ink-soft);font-size:0.92rem;margin-top:0.6rem;}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line);}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:2rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.wordmark--footer{font-size:1.1rem;}

/* ===== Toast ===== */
.toast{
  position:fixed;
  bottom:1.6rem;
  left:50%;
  transform:translate(-50%, 20px);
  background:var(--ink);
  color:var(--cream);
  padding:0.75rem 1.3rem;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
  z-index:60;
}
.toast.is-visible{opacity:1;transform:translate(-50%, 0);}

/* ===== Admin Modal ===== */
.admin-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.admin-modal[hidden]{display:none;}
.admin-backdrop{
  position:absolute;
  inset:0;
  background:rgba(43,35,24,0.6);
  backdrop-filter:blur(4px);
}
.admin-dialog{
  position:relative;
  background:var(--cream);
  border:1px solid var(--line-strong);
  border-radius:16px;
  width:100%;
  max-width:600px;
  box-shadow:0 24px 60px rgba(43,35,24,0.4);
  overflow:hidden;
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.admin-header{
  padding:1.4rem 1.8rem;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper);
}
.admin-header h2{font-size:1.4rem;}
.admin-section{
  padding:1.8rem;
  overflow-y:auto;
  flex:1;
}
.admin-sub{color:var(--ink-soft);margin-bottom:1.2rem;font-size:0.92rem;}
.admin-form{display:flex;flex-direction:column;gap:1.1rem;}
.admin-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.admin-field{display:flex;flex-direction:column;gap:0.4rem;}
.admin-field label{font-size:0.82rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);}
.admin-input{
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:0.75rem 1rem;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--ink);
  outline:none;
  transition:border-color 0.2s ease;
}
.admin-input:focus{border-color:var(--terracotta);}
.admin-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);padding-bottom:1rem;flex-wrap:wrap;}
.admin-tab-content{display:flex;flex-direction:column;gap:1rem;}
.admin-prod-list{display:flex;flex-direction:column;gap:0.8rem;max-height:350px;overflow-y:auto;padding-right:0.4rem;}
.admin-prod-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.9rem 1.2rem;
  background:var(--paper);
  border-radius:10px;
  border:1px solid var(--line);
  gap:1rem;
}
.admin-prod-info{display:flex;flex-direction:column;gap:0.1rem;min-width:0;}
.admin-prod-info h4{font-size:1rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-prod-info span{font-size:0.82rem;color:var(--ink-soft);}

.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:300px;margin-top:1rem;}
  .story-grid{grid-template-columns:1fr;}
  .story-mark{max-width:200px;}
  .product-grid{grid-template-columns:repeat(2, 1fr);}
  .product-card:nth-child(3n+2){transform:none;}
  .product-card:nth-child(3n+2):hover{transform:translateY(-6px) rotate(0.4deg);}
  .visit-grid{grid-template-columns:1fr;}
  .process-step{grid-template-columns:60px 1fr;}
  .process-step:nth-child(even) > div{margin-left:1rem;}
}

@media (max-width: 640px){
  .header-inner{padding:1.1rem 1.3rem;}
  .main-nav{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--cream);
    flex-direction:column;
    gap:0;
    padding:0.5rem 1.3rem 1rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .main-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .main-nav a{padding:0.7rem 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:inline-flex;}
  .hero{padding:2.2rem 1.3rem 0;}
  .story,.collection,.process,.visit{padding-left:1.3rem;padding-right:1.3rem;}
  .product-grid{grid-template-columns:1fr;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
}