:root {
  --bg:           #ede9e1;
  --surface:      #e4e0d8;
  --surface2:     #d8d4cb;
  --border:       #c8c4bb;
  --border-heavy: #8a867c;
  --orange:       #c94b0f;
  --orange-glow:  #c94b0f18;
  --white:        #1a1815;
  --muted:        #6b6760;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
}

/* ── HORIZONTAL RULES ── */
.h-rule {
  width: 100%; height: 1px;
  background: rgba(26,24,21,0.14);
  position: relative; z-index: 1;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(1.5rem, 8vw, 5rem); height: 56px;
  background: rgba(237,233,225,0.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,24,21,0.1);
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:34px; width:auto; display:block; }
.nav-links { display:flex; gap:0; list-style:none; justify-content:center; }
.nav-links a {
  display:block; padding:6px 18px; font-size:0.72rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; border:none; background:none; transition:color 0.18s;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }

.nav-right {
  display:flex; align-items:center; gap:0.5rem; justify-content:flex-end;
}
.nav-yt-link {
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color 0.18s; padding:6px;
}
.nav-yt-link:hover { color:#c00; }
.nav-store-btn {
  display:inline-block; padding:6px 16px;
  font-family:'Space Mono',monospace; font-size:0.7rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--orange); border:1px solid var(--orange);
  text-decoration:none; transition:all 0.18s; white-space:nowrap;
}
.nav-store-btn:hover { background:var(--orange); color:#fff; }

.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--white); transition:all 0.2s; }
.hamburger.open span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; top:56px; left:0; right:0;
  background:rgba(237,233,225,0.98); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(26,24,21,0.1); z-index:99;
  padding:1.2rem clamp(1rem,5vw,2.5rem); flex-direction:column; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  display:block; padding:12px 16px; font-size:0.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);
  text-decoration:none; border-bottom:1px solid rgba(26,24,21,0.07); transition:color 0.18s;
}
.mobile-menu a:hover { color:var(--white); }
.mobile-menu a.store-link { color:var(--orange); border:none; }

/* ── SECTIONS ── */
section {
  padding: clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,5rem) clamp(4rem,8vh,6rem);
  position: relative;
}

#home {
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  overflow: hidden;
}

#about  { background: var(--surface); }
#faq    { background: var(--bg); }
#contact { background: var(--surface); }

/* ── SECTION LABELS & TITLES ── */
.section-label {
  font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:1rem; color:var(--orange);
}
.section-title {
  font-size:clamp(2rem,5vw,3.6rem); font-weight:900; letter-spacing:-0.03em;
  line-height:1.05; margin-bottom:3rem; color:var(--white);
}

/* ── HERO TEXT ── */
.hero-eyebrow {
  font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.7s 0.2s forwards;
}
.hero-title {
  font-size:clamp(3.2rem,9vw,8rem); font-weight:900; line-height:0.92;
  letter-spacing:-0.03em; margin-bottom:2rem;
  opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.35s forwards;
}
.hero-title .line-orange { color:var(--orange); }
.hero-sub {
  font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(26,24,21,0.55);
  max-width:440px; line-height:1.65; margin-bottom:2.8rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.5s forwards;
}
.hero-cta-row {
  display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.65s forwards;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; padding:15px 34px; background:var(--orange); color:#fff;
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
  cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-primary:hover { background:transparent; color:var(--orange); }
.btn-secondary {
  display:inline-block; padding:15px 34px; background:transparent; color:var(--white);
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--border-heavy);
  cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-secondary:hover { border-color:var(--white); }

/* ── 3D CUBE ── */
.cube-deco {
  position:absolute; right:0; top:0; bottom:0; width:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; animation:fadeUp 1s 0.9s forwards; pointer-events:none;
}
.cube-scene { width:clamp(150px,20vw,240px); height:clamp(150px,20vw,240px); perspective:700px; }
.cube-3d {
  width:100%; height:100%; position:relative; transform-style:preserve-3d;
  animation:rotateCube3d 10s linear infinite;
}
@keyframes rotateCube3d {
  0%   { transform:rotateX(22deg) rotateY(0deg); }
  100% { transform:rotateX(22deg) rotateY(360deg); }
}
.cube-face {
  position:absolute; width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:4px; padding:4px; border:1px solid rgba(0,0,0,0.08);
}
.cube-face.front  { transform:translateZ(clamp(75px,10vw,120px)); }
.cube-face.back   { transform:rotateY(180deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.right  { transform:rotateY(90deg)  translateZ(clamp(75px,10vw,120px)); }
.cube-face.left   { transform:rotateY(-90deg) translateZ(clamp(75px,10vw,120px)); }
.cube-face.top    { transform:rotateX(90deg)  translateZ(clamp(75px,10vw,120px)); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(clamp(75px,10vw,120px)); }
.cubie { border:1px solid rgba(0,0,0,0.3); }

/* ── SHOP GRID (home + related products) ── */
#shop { background: var(--bg); }
.shop-grid, .related-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.4rem;
}
.product-card {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); text-decoration:none; color:inherit;
  transition:transform 0.2s, border-color 0.2s;
}
.product-card:hover { transform:translateY(-4px); border-color:var(--border-heavy); }
.product-card-img { width:100%; aspect-ratio:1/1; overflow:hidden; background:#fff; border-bottom:1px solid var(--border); }
.product-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.product-card:hover .product-card-img img { transform:scale(1.04); }
.product-card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:0.3rem; }
.product-card-cat { font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); }
.product-card-name { font-size:1rem; font-weight:700; color:var(--white); line-height:1.3; }
.product-card-link { font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-top:0.4rem; }

/* ── PRODUCT PAGE ── */
.breadcrumb {
  font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
  color:var(--muted); margin-bottom:2.4rem; text-transform:uppercase;
}
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--orange); }
.product-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start;
}
@media(max-width:820px){ .product-grid { grid-template-columns:1fr; gap:2rem; } }
.product-image-wrap {
  background:#fff; border:1px solid var(--border); overflow:hidden;
}
.product-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.product-info { display:flex; flex-direction:column; }
.product-title {
  font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-0.02em;
  line-height:1.1; margin:0.6rem 0 1rem; color:var(--white);
}
.product-price {
  font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700;
  color:var(--white); min-height:1.6rem; margin-bottom:1.2rem;
}
.product-description {
  font-size:1rem; line-height:1.75; color:rgba(26,24,21,0.68);
  min-height:2rem; margin-bottom:2rem;
}
.product-description p { margin:0 0 1.1rem; }
.product-description p:last-child { margin-bottom:0; }
.product-description h3 {
  font-size:1rem; font-weight:700; color:var(--ink,#1a1815);
  margin:1.6rem 0 0.7rem; text-transform:uppercase; letter-spacing:0.03em;
}
.product-description ul {
  list-style:disc; margin:0 0 1.1rem; padding-left:1.4rem;
}
.product-description li { margin-bottom:0.4rem; }
.product-description li:last-child { margin-bottom:0; }
.product-description strong { color:var(--ink,#1a1815); font-weight:700; }
.product-info .btn-primary { align-self:flex-start; }

/* ── ABOUT ── */
.about-bio-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media(max-width:820px){ .about-bio-grid { grid-template-columns:1fr; } }
.about-bio-text { display:flex; flex-direction:column; gap:1.4rem; }
.about-bio-text p { font-size:clamp(0.97rem,1.5vw,1.1rem); color:rgba(26,24,21,0.68); line-height:1.8; }
.about-cards-col { display:flex; flex-direction:column; gap:1rem; }
.text-orange { color:var(--orange); }

/* ── CARDS ── */
.clay-card {
  background: rgba(237,233,225,0.7);
  border:1px solid var(--border); padding:1.6rem; position:relative;
  transition:transform 0.2s, border-color 0.2s;
}
.clay-card:hover { transform:translateY(-3px); border-color:var(--border-heavy); }
.clay-card.orange-accent { border-top:2px solid var(--orange); }

.card-icon {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; border:1px solid var(--border);
}
.card-icon svg { width:22px; height:22px; }
.card-icon.orange { background:var(--orange-glow); border-color:var(--orange); }

.card-title { font-size:1rem; font-weight:700; margin-bottom:0.5rem; color:var(--white); }
.card-body  { font-size:0.9rem; line-height:1.65; color:var(--muted); }

/* ── PHOTO GALLERY ── */
.about-photos {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem;
}
@media(max-width:600px){ .about-photos { grid-template-columns:1fr; } }
.about-photo-wrap {
  position:relative; overflow:hidden;
  border:1px solid var(--border); transition:border-color 0.22s;
}
.about-photo-wrap:hover { border-color:var(--border-heavy); }
.about-photo-wrap img {
  width:100%; height:320px; object-fit:cover; display:block;
  filter:saturate(0.85) brightness(0.96); transition:filter 0.3s, transform 0.3s;
}
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.02); }
.about-photo-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:0.7rem 1rem;
  background:linear-gradient(transparent, rgba(237,233,225,0.9));
  font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(26,24,21,0.75);
}

/* ── FAQ ── */
.faq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.faq-card {
  background: var(--bg);
  padding:0; position:relative; overflow:hidden;
  transition:background 0.18s;
  cursor:pointer;
}
.faq-card:hover { background: var(--surface); }
.faq-card.open  { background: var(--surface); }

.faq-card-q {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem 1.6rem;
  background:none; border:none; width:100%;
  font-family:'Space Grotesk',sans-serif; font-size:0.97rem; font-weight:700;
  color:var(--white); text-align:left; cursor:pointer;
}
.faq-card.open .faq-card-q { color:var(--orange); }

.faq-card-num {
  font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.15em;
  color:var(--muted); flex-shrink:0; margin-bottom:0.25rem;
  display:block;
}
.faq-card-title { display:block; }

.faq-chevron {
  width:18px; height:18px; flex-shrink:0;
  color:var(--muted); transition:transform 0.25s, color 0.2s;
}
.faq-card.open .faq-chevron { transform:rotate(180deg); color:var(--orange); }

.faq-card-a {
  max-height:0; overflow:hidden;
  font-size:0.9rem; color:var(--muted); line-height:1.7;
  padding:0 1.6rem;
  transition:max-height 0.35s ease, padding 0.35s ease;
}
.faq-card.open .faq-card-a {
  max-height:300px; padding:0 1.6rem 1.4rem;
  border-top:1px solid var(--border);
}
.faq-a-link { color:var(--orange); text-decoration:none; }
.faq-a-link:hover { text-decoration:underline; }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media(max-width:720px){ .contact-grid { grid-template-columns:1fr; } }
.contact-info { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }

.contact-block {
  display:flex; align-items:flex-start; gap:1rem; padding:1.3rem 1.4rem;
  background:var(--surface); transition:background 0.18s;
}
.contact-block:hover { background:var(--bg); }
.contact-block-icon {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.contact-block-icon svg { width:18px; height:18px; }
.contact-block-title {
  font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.contact-block-value { font-size:0.95rem; font-weight:600; color:var(--white); }
.contact-link { color:var(--white); text-decoration:none; }
.contact-link:hover { color:var(--orange); }

.contact-form {
  background:var(--surface); border:1px solid var(--border);
  padding:2rem; display:flex; flex-direction:column; gap:1.1rem;
}
.form-label {
  font-size:0.72rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;
}
.form-input, .form-textarea {
  width:100%; background:var(--bg); border:1px solid var(--border);
  padding:11px 14px; color:var(--white);
  font-family:'Space Grotesk',sans-serif; font-size:0.95rem; transition:border-color 0.18s; outline:none;
}
.form-input:focus, .form-textarea:focus { border-color:var(--orange); }
.form-textarea { resize:vertical; min-height:110px; }
.form-submit {
  display:inline-block; padding:14px 32px; background:var(--orange); color:#fff;
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.85rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
  cursor:pointer; transition:all 0.18s; align-self:flex-start;
}
.form-submit:hover { background:transparent; color:var(--orange); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border); padding:2rem clamp(1.5rem,8vw,5rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--surface2);
}
.footer-logo img { height:30px; width:auto; display:block; }
.footer-copy { font-size:0.8rem; color:var(--muted); }

/* ── ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav { grid-template-columns: 1fr auto; }
  .nav-links { display:none; }
  .nav-right .nav-store-btn { display:none; }
  .hamburger { display:flex; }
  .cube-deco  { display:none; }
  .faq-grid   { grid-template-columns:1fr; }
}