/* =========================
   Alte Haas Grotesk
   ========================= */
@font-face{
  font-family:"Alte Haas Grotesk";
  src:url("../fonts/AlteHaasGroteskRegular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Alte Haas Grotesk";
  src:url("../fonts/AlteHaasGroteskBold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* =========================
   Palette + base
   ========================= */
:root{
  --bg:#F1ECCE;          /* canvas */
  --text:#020314;        /* ink */
  --acc1:#E86A92;        /* rose */
  --acc2:#60a2ee;        /* electric cyan */
  --acc3:#E032E6;        /* magenta violet */
  --rule:rgba(2,3,20,.14); /* hairline */
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ background:var(--bg); color:var(--text); }
body{
  margin:0; font-family:"Alte Haas Grotesk",system-ui,sans-serif;
  line-height:1.35; letter-spacing:.01em;
}

/* Paper grain overlay */
main::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:url("../img/grain.png"); opacity:.03; mix-blend:multiply;
}

/* Utilities */
.hr{ border-top:1px solid var(--rule); }
.hr-t{ border-top:1px solid var(--rule); }
.hr-b{ border-bottom:1px solid var(--rule); }
.my{ margin:2rem 0; }
.wrap{ max-width:1440px; margin:0 auto; padding:0 24px; }
.section{ padding:4rem 0; }
.section.narrow{ max-width:1000px; }
.lead{ font-size:1.125rem; max-width:60ch; }

/* Headings */
.display{ font-size:clamp(48px,8vw,112px); line-height:.95; letter-spacing:-.01em; margin:0; }
.display-sm{ font-size:clamp(36px,6vw,96px); line-height:.95; letter-spacing:-.008em; margin:0 0 1rem 0; }
.h2{ font-size:clamp(28px,4vw,64px); line-height:.98; margin:0; }

/* Links */
a{ color:inherit; text-decoration:none; }
.link-underline{
  background-image:linear-gradient(var(--text),var(--text));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size .3s var(--ease);
}
.link-underline:hover{ background-size:100% 1px; }

/* =========================
   Header
   ========================= */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(110%) blur(6px); background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--rule); }
.site-header .wrap{ height:72px; display:flex; align-items:center; justify-content:space-between; }
.nav-left{ display:flex; gap:24px; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; }
.nav-link{ position:relative; }
.nav-link:hover,.nav-link.active{ text-decoration:none; }
.nav-link:hover::after,.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--text);
}
.brand{ font-weight:700; font-size:1.25rem; letter-spacing:.01em; }
.cta{
  border:1px solid var(--rule); padding:10px 14px; text-transform:uppercase; letter-spacing:.06em;
  transition:all .25s var(--ease); background:transparent;
}
.cta:hover{ background:var(--acc2); color:var(--text); }

/* =========================
   Split Hero
   ========================= */
.split-hero{ display:grid; grid-template-columns:1fr; }
.hero-pane{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.hero-pane img{ width:100%; height:100%; object-fit:cover; transform:translateZ(0); transition:transform .5s var(--ease); }
.hero-pane:hover img{ transform:scale(1.03); }
.hero-copy{ position:absolute; left:24px; bottom:24px; color:#fff; mix-blend:difference; }
.btn{
  margin-top:12px; display:inline-block; border:1px solid var(--rule); padding:12px 18px;
  text-transform:uppercase; letter-spacing:.06em; transition:all .25s var(--ease); color:#fff;
}
.btn:hover{ background:var(--acc2); color:var(--text); }
.hero-pane--right{ border-left:1px solid var(--rule); }
.hero-tag{ position:absolute; left:24px; bottom:24px; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; }

/* =========================
   Collections Strip
   ========================= */
.strip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 900px){ .strip{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .strip{ grid-template-columns:1fr; } }

.tile{ position:relative; display:block; border-left:1px solid var(--rule); overflow:hidden; }
.tile:first-child{ border-left:none; }
.tile img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s var(--ease); }
.tile:hover img{ transform:scale(1.03) perspective(1200px) rotateY(1.2deg); }
.tile-meta{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-top:1px solid var(--rule);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
}
.tile .label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.tile .title{ font-size:1.1rem; }
.chip{ font-size:.75rem; padding:6px 8px; border:1px solid var(--rule); }
.tick{ position:absolute; top:0; left:0; width:2px; height:40px; background:linear-gradient(180deg,var(--acc1),var(--acc3),var(--acc2)); }

/* =========================
   Product Grid / Cards
   ========================= */
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:24px; }
@media (max-width: 900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .grid{ grid-template-columns:1fr; } }

.card{ display:block; border:1px solid var(--rule); overflow:hidden; }
.card img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover img{ transform:scale(1.03); }
.card-meta{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--rule); font-size:.95rem; }

/* =========================
   Swup transitions
   ========================= */
.transition-fade{ opacity:1; transition:opacity .38s var(--ease), transform .38s var(--ease); transform:translateY(0); }
html.is-leaving .transition-fade{ opacity:0; transform:translateY(4px); }
html.is-rendering .transition-fade{ opacity:0; transform:translateY(6px); }

/* Accessibility focus rings */
:focus-visible{ outline:2px solid var(--acc2); outline-offset:2px; }

/* =========================
   Filters Toolbar
   ========================= */
.filters { padding-top:1.5rem; padding-bottom:1rem; }
.filters-row{ display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-end; }
.filters-group{ display:flex; flex-direction:column; gap:8px; }
.filters-label{ text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; opacity:.75; }
.filters-toggles{ display:flex; flex-wrap:wrap; gap:8px; }

.toggle{
  border:1px solid var(--rule);
  padding:8px 12px;
  background:transparent;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.toggle:hover{ background:color-mix(in srgb, var(--acc2) 35%, transparent); }
.toggle.is-active{ background:var(--acc2); color:var(--text); border-color:var(--text); }
.toggle.clear{ border-color:var(--rule); background:transparent; }
.toggle.clear:hover{ background:color-mix(in srgb, var(--acc1) 25%, transparent); }

.filters-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.filters-count{ font-size:.85rem; opacity:.9; }

/* Card show/hide animation */
.card{ opacity:1; transform:translateY(0); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.card.is-hidden{ opacity:0; transform:translateY(6px); pointer-events:none; }