/* =========================================================================
   VIOLET SHARD - Core stylesheet
   Direction: Near-Black dominant · full-bleed · layered-shard depth ·
   diagonal seams · Slate reserved for edges / buttons / highlights ·
   Sand = type · Wine = the single spark.
   ========================================================================= */

/* ---- Fonts (self-hosted, zero external calls) ------------------------- */
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Tokens ----------------------------------------------------------- */
:root{
  /* Near-Black is the canvas; two micro-tones give layered depth */
  --nb:#11141A;          /* base canvas */
  --nb-2:#161A21;        /* raised layer */
  --nb-3:#0B0D12;        /* recessed / backing shard */

  /* Slate - edges, buttons, highlights only (never a full canvas now) */
  --slate:#3A3F47;
  --slate-edge:#4C535D;  /* lit edge of a shard */
  --panel:#1C212A;       /* placeholder media panel - reads as a surface on near-black */

  --sand:#E8E4DE;        /* type + mark */
  --wine:#7A1F2B;        /* the spark - change here to swap the accent */
  --wine-bright:#8C2837;

  /* Sand at opacity - type hierarchy on dark */
  --sand-90:rgba(232,228,222,.90);
  --sand-75:rgba(232,228,222,.74);
  --sand-55:rgba(232,228,222,.55);
  --sand-35:rgba(232,228,222,.34);
  --hair:rgba(232,228,222,.12);
  --edge:rgba(232,228,222,.10);   /* lit top-edge highlight on shards */

  /* Layout - full bleed */
  --maxw:none;
  --gutter:clamp(1.25rem, 4vw, 4rem);
  --section-y:clamp(5rem, 12vw, 12rem);
  --nav-h:clamp(4.25rem, 7vw, 5.5rem);
  --slant:clamp(2rem, 5vw, 5.5rem);   /* diagonal seam depth */

  /* Fluid type */
  --fs-body:clamp(1rem, .96rem + .22vw, 1.18rem);
  --fs-lead:clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  --fs-h3:clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --fs-h2:clamp(2.3rem, 1.4rem + 3.6vw, 4.75rem);
  --fs-word:clamp(1.85rem, .9rem + 4.2vw, 5rem);  /* the wordmark - one line, secondary */

  --ease:cubic-bezier(.16,.84,.30,1);
  --dur:.8s;
}

/* ---- Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400; font-size:var(--fs-body); line-height:1.55;
  color:var(--sand); background:var(--nb);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
::selection{ background:var(--wine); color:var(--sand); }

/* ---- Layout primitives ------------------------------------------------ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(3.5rem,8vw,7rem); }

/* Layered sections + diagonal seams ------------------------------------- */
.layer{ position:relative; background:var(--nb); z-index:1; }
.layer--raise{ background:var(--nb-2); }
/* Separators are a faceted SHARD EDGE: a jagged band in the section's own
   colour rises into the section above, with a lit outline tracing the facets. */
.layer--slant{ --seamH:clamp(44px, 5vw, 84px); }
.layer--slant::before{
  content:""; position:absolute; left:-1px; right:-1px; top:calc(var(--seamH) * -1 + 1px);
  height:var(--seamH); background:inherit; pointer-events:none; z-index:3;
  --edge-cut:polygon(0% 100%, 100% 0%, 100% 100%);        /* clean diagonal */
  -webkit-clip-path:var(--edge-cut); clip-path:var(--edge-cut);
  /* a bold lit edge, plus a soft shadow so the layer reads as laid on top */
  filter:drop-shadow(0 -3px 0 var(--slate-edge)) drop-shadow(0 -6px 8px rgba(0,0,0,.55));
}
.layer--slant.layer--rev::before{ --edge-cut:polygon(0% 0%, 100% 100%, 0% 100%); }

/* ---- Typography helpers ---------------------------------------------- */
.display{ font-weight:500; text-transform:uppercase; letter-spacing:-.02em; line-height:.86; }
.h2{ font-weight:500; text-transform:uppercase; font-size:var(--fs-h2); line-height:.96; letter-spacing:-.018em; }
.h3{ font-weight:500; text-transform:uppercase; font-size:var(--fs-h3); line-height:1.02; letter-spacing:-.008em; }
.lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.32; color:var(--sand-90); letter-spacing:-.006em; }
p{ max-width:60ch; color:var(--sand-75); }
.muted{ color:var(--sand-55); }
.hair{ height:1px; width:100%; background:var(--hair); border:0; }

/* index numerals (kept subtle; not section "labels") */
.idx{ font-size:.74rem; letter-spacing:.22em; color:var(--sand-35); font-weight:500; }

/* ---- Buttons & links -------------------------------------------------- */
/* Primary CTA = Wine bar, Sand text, shard-cut corner */
.btn{
  --clip:12px;
  display:inline-flex; align-items:center; gap:.85em;
  padding:1.05em 1.7em; font-weight:500; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.15em;
  background:var(--wine); color:var(--sand);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
  transition:background var(--dur) var(--ease);
}
.btn .arrow{ transition:transform var(--dur) var(--ease); }
.btn:hover{ background:var(--wine-bright); }
.btn:hover .arrow{ transform:translateX(.35em); }

/* Text link - quiet, Sand underline that grows */
.link{
  display:inline-flex; align-items:center; gap:.6em;
  text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:.8rem;
  padding-bottom:.4em; position:relative; color:var(--sand-90);
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--sand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.link:hover{ color:var(--sand); }
.link:hover::after{ transform:scaleX(1); }
.link .arrow{ transition:transform var(--dur) var(--ease); }
.link:hover .arrow{ transform:translateX(.35em); }

/* =========================================================================
   SHARD PANEL - the layered-depth primitive (dark panel, lit edge, shadow)
   ========================================================================= */
.shard{
  --c:clamp(16px, 2.4vw, 34px);
  position:relative; background:var(--panel);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  box-shadow:inset 2px 2px 0 var(--edge), inset 0 0 0 1px rgba(76,83,93,.35), inset -2px -2px 0 rgba(0,0,0,.5);
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.shard--rev{ clip-path:polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }

/* Background shard motif - enlarged, offset, angled (echoes the hero), kept tonal/subtle.
   Lives in an inset, clipped wrapper so it never bleeds or causes scroll. */
.bg-shards{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-shard{ position:absolute; top:50%; translate:0 -50%;
  height:80%; aspect-ratio:270/731; width:auto;     /* fully inside the section - never clipped */
  -webkit-mask:url("../img/logo-mark-tight.svg") no-repeat center/contain;
  mask:url("../img/logo-mark-tight.svg") no-repeat center/contain; }
.bg-shard--back{ background:var(--nb-3); right:8%; rotate:14deg; }
.bg-shard--front{ background:#1C232D; right:14%; rotate:8deg; filter:drop-shadow(0 26px 44px rgba(0,0,0,.4)); }
.layer--rev .bg-shard--back{ right:auto; left:8%; rotate:-14deg; }
.layer--rev .bg-shard--front{ right:auto; left:14%; rotate:-8deg; }
/* "Everyone is welcome" only: much larger shards, anchored at the top so the tip
   is never clipped - they run off the bottom instead, spanning more of the section. */
.pillars .bg-shard{ top:6%; translate:0; height:145%; }
.pillars .bg-shard--back{ left:5%; rotate:-12deg; }
.pillars .bg-shard--front{ left:13%; rotate:-7deg; }
.section > .container{ position:relative; z-index:1; }   /* keep content above the bg shard */

/* =========================================================================
   NAV
   ========================================================================= */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav.is-scrolled{ background:rgba(11,13,18,.72); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--hair); }
.nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:inline-flex; align-items:center; gap:.85rem; }
.brand__mark{ width:1.55rem; height:1.55rem; }
.brand__name{ font-weight:500; text-transform:uppercase; letter-spacing:.24em; font-size:.9rem; white-space:nowrap; }

.nav__links{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); }
.nav__link{ text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:500;
  color:var(--sand-75); position:relative; padding-block:.4rem; transition:color var(--dur) var(--ease); }
.nav__link::after{ content:""; position:absolute; left:0; bottom:.1rem; height:1.5px; width:100%;
  background:var(--sand); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.nav__link:hover{ color:var(--sand); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--sand); }

.nav__toggle{ display:none; width:2.75rem; height:2.75rem; margin-right:-.6rem; position:relative; z-index:120; }
.nav__toggle span{ position:absolute; left:50%; top:50%; width:24px; height:1.6px; background:var(--sand);
  transform:translate(-50%,-50%); transition:transform .4s var(--ease), opacity .3s var(--ease); }
.nav__toggle span:first-child{ transform:translate(-50%,-6px); }
.nav__toggle span:last-child{ transform:translate(-50%,6px); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translate(-50%,0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translate(-50%,0) rotate(-45deg); }

.menu{ position:fixed; inset:0; z-index:110; background:var(--nb-3);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gutter);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); visibility:hidden; }
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list{ display:flex; flex-direction:column; gap:.1em; }
.menu__link{ display:block; font-weight:500; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(2.5rem,13vw,5rem); line-height:1.06; color:var(--sand);
  padding-block:.1em; transition:color .4s var(--ease); }
.menu__link:hover,.menu__link:focus-visible{ color:var(--wine-bright); }
.menu__index{ font-size:.8rem; letter-spacing:.2em; color:var(--sand-35); vertical-align:super; margin-right:.6em; }
.menu__meta{ margin-top:clamp(2rem,6vw,3.5rem); display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-35); }

/* =========================================================================
   HERO - shard symbol as the centrepiece, wordmark beside/below
   ========================================================================= */
.hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; background:var(--nb);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding-top:calc(var(--nav-h) + 2rem); padding-bottom:clamp(2rem,5vw,4rem); }

/* The layered shard centrepiece */
.hero__shards{ position:absolute; top:50%; left:50%;
  transform:translate(-50%, calc(-50% + var(--py, 0px)));   /* --py is the scroll parallax */
  height:min(122vh,1220px); width:auto; aspect-ratio:1; pointer-events:none; will-change:transform; }
.shardlayer{ position:absolute; inset:0;
  -webkit-mask:url("../img/logo-mark.svg") no-repeat center/contain;
  mask:url("../img/logo-mark.svg") no-repeat center/contain; }
.shardlayer--back{ background:var(--nb-3); translate:15% -9.3%; rotate:13deg; }
.shardlayer--edge{ background:var(--slate-edge); translate:-9.3% 7.5%; rotate:0deg; opacity:.92; }
.shardlayer--main{ background:var(--slate); translate:1.9% -.9%; rotate:6deg; filter:drop-shadow(0 54px 82px rgba(0,0,0,.65)); }

.hero__content{ position:relative; z-index:3; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter); text-align:center; }
.hero__word{ display:block; white-space:nowrap; font-weight:500; text-transform:uppercase; letter-spacing:-.022em;
  font-size:var(--fs-word); line-height:.95; text-shadow:0 4px 44px rgba(8,10,14,.62); }
.hero__line{ margin:clamp(1.1rem,2.5vw,1.75rem) auto 0; max-width:34ch; color:var(--sand-90);
  font-size:clamp(1rem,.95rem + .4vw,1.3rem); text-shadow:0 2px 22px rgba(8,10,14,.6); }
.hero__enter{ margin-top:clamp(1.75rem,4vw,2.75rem); }

/* =========================================================================
   STATEMENT (manifesto) - large, unlabeled
   ========================================================================= */
.statement__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,4rem); }
.statement__big{ font-weight:500; text-transform:uppercase; letter-spacing:-.018em; line-height:.98;
  font-size:clamp(2rem,1rem + 4.4vw,4.5rem); max-width:none; color:var(--sand); }
.statement__body{ display:grid; gap:1.4rem; max-width:56ch; align-content:start; }
@media (min-width:64rem){ .statement__grid{ grid-template-columns:1.25fr .9fr; align-items:start; }
  .statement__body{ padding-top:.6rem; } }

/* =========================================================================
   PILLARS - three values from the mask philosophy (unlabeled)
   ========================================================================= */
.pillars__head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.pillars__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.75rem,4vw,2.5rem); }
.pillar{ display:grid; gap:.85rem; }
.pillar h3{ font-weight:500; text-transform:uppercase; font-size:var(--fs-h3); letter-spacing:-.01em; line-height:1.02; }
.pillar p{ color:var(--sand-55); font-size:1.02rem; }
@media (min-width:60rem){ .pillars__grid{ grid-template-columns:repeat(3,1fr); column-gap:clamp(2rem,4vw,4.5rem); } }

/* =========================================================================
   COLLECTION - dark shard-panel cards with depth
   ========================================================================= */
.coll__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.coll__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.2vw,1.9rem); }
@media (min-width:64rem){ .coll__grid{ grid-template-columns:repeat(4,1fr); } }

.card{ display:block; }
.card__media{ position:relative; aspect-ratio:3/4; overflow:hidden;
  display:flex; align-items:flex-end; padding:1.1rem; }
/* .card__media carries .shard directly (relative + aspect-ratio) */
.card__shardmark{ position:absolute; top:-10%; right:-10%; width:46%; aspect-ratio:1;
  background:var(--slate); -webkit-mask:url("../img/logo-mark.svg") no-repeat center/contain;
  mask:url("../img/logo-mark.svg") no-repeat center/contain; opacity:.5; rotate:8deg;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease); z-index:2; }
.card__tag{ position:relative; z-index:3; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-55); }
.card__foot{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-top:.9rem; margin-top:.9rem; border-top:1px solid var(--hair); }
.card__name{ text-transform:uppercase; letter-spacing:.02em; font-weight:500; font-size:1rem; transition:color var(--dur) var(--ease); }
.card__no{ font-size:.72rem; letter-spacing:.16em; color:var(--sand-35); }
.card:hover .shard{ transform:translateY(-6px); filter:drop-shadow(0 34px 50px rgba(0,0,0,.65)); }
.card:hover .card__shardmark{ opacity:.85; background:var(--slate-edge); }
.card:hover .card__name{ color:var(--sand); }

/* =========================================================================
   FEATURE SPLIT - shard media panel + copy
   ========================================================================= */
.feature__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (min-width:64rem){ .feature__grid{ grid-template-columns:1.05fr 1fr; }
  .feature--rev .feature__media{ order:2; } }
.feature__media{ position:relative; aspect-ratio:4/5; display:flex; align-items:flex-end; padding:1.4rem; }
/* .feature__media carries .shard directly */
.feature__shardmark{ position:absolute; inset:0; background:var(--slate);
  -webkit-mask:url("../img/logo-mark.svg") no-repeat 128% 50%/64%;
  mask:url("../img/logo-mark.svg") no-repeat 128% 50%/64%; opacity:.5; z-index:2; }
.feature__cap{ position:relative; z-index:3; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-55); }
.feature__body{ display:grid; gap:clamp(1.25rem,2.5vw,1.85rem); align-content:center; }
.feature__body .h2{ max-width:13ch; }

/* =========================================================================
   SIGNUP - community / drop alerts (near-black, Wine CTA)
   ========================================================================= */
.signup{ position:relative; }
.signup__shardmark{ position:absolute; top:50%; right:2rem; translate:0 -50%; width:min(30vw,340px);
  aspect-ratio:1; background:var(--slate); -webkit-mask:url("../img/logo-mark.svg") no-repeat center/contain;
  mask:url("../img/logo-mark.svg") no-repeat center/contain; opacity:.16; rotate:-8deg; pointer-events:none; }
.signup .container{ position:relative; z-index:1; }
.signup__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); align-items:end; }
@media (min-width:64rem){ .signup__grid{ grid-template-columns:1fr 1fr; } }
.signup__title{ max-width:16ch; }
.form{ display:grid; gap:1rem; }
.form__row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.field{ flex:1 1 16rem; position:relative; }
.field input{ width:100%; background:transparent; color:var(--sand); border:0;
  border-bottom:1.5px solid var(--hair); padding:.95rem 0; letter-spacing:.01em;
  transition:border-color var(--dur) var(--ease); }
.field input::placeholder{ color:var(--sand-35); }
.field input:focus{ outline:none; border-bottom-color:var(--wine-bright); }
.form .btn{ flex:0 0 auto; }
.form__note{ font-size:.74rem; letter-spacing:.04em; color:var(--sand-35); }
.form__status{ font-size:.85rem; letter-spacing:.02em; min-height:1.2em; color:var(--sand-75); }
.form__status[data-state="ok"]{ color:var(--sand); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ position:relative; background:var(--nb-3); color:var(--sand); padding-block:clamp(3.5rem,7vw,6rem) 2.5rem; }
.footer__top{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:48rem){ .footer__top{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer__brand .brand__name{ font-size:1.05rem; }
.footer__tag{ margin-top:1.25rem; color:var(--sand-55); max-width:36ch; font-size:.95rem; }
.footer__col h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-35);
  font-weight:500; margin-bottom:1.25rem; }
.footer__col li{ margin-bottom:.7rem; }
.footer__col a{ color:var(--sand-75); transition:color var(--dur) var(--ease); }
.footer__col a:hover{ color:var(--sand); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(3rem,6vw,5rem); padding-top:1.75rem; border-top:1px solid var(--hair);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sand-35); }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:52rem){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .hero__shards{ top:50%; left:50%; height:min(88vh,700px); width:auto; opacity:.9; }
}
@media (min-width:52.0625rem){ .menu{ display:none; } }
body.menu-open{ overflow:hidden; }

/* =========================================================================
   INNER PAGES - page hero, lookbook gallery, contact
   ========================================================================= */
/* Page hero (Story / Lookbook / Contact) */
.phero{ position:relative; overflow:hidden; background:var(--nb); min-height:60vh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + clamp(2.5rem,7vw,6rem)); padding-bottom:clamp(2.75rem,6vw,5.5rem); }
.phero__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter); }
.phero__meta{ display:inline-flex; align-items:center; gap:.7em; margin-bottom:clamp(1rem,2.5vw,1.6rem);
  font-size:.76rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--sand-55); }
.phero__meta::before{ content:""; width:1.6em; height:2px; background:var(--slate-edge); transform:skewX(-30deg); }
.phero__title{ font-weight:500; text-transform:uppercase; letter-spacing:-.022em; line-height:.86;
  font-size:clamp(3rem,1rem + 12vw,11rem); }
.phero__lead{ margin-top:clamp(1.1rem,2.5vw,1.75rem); max-width:44ch; color:var(--sand-75);
  font-size:clamp(1.05rem,.95rem + .55vw,1.45rem); }
/* big angled shard for the page hero, top-anchored so the tip is never clipped */
.phero .bg-shard{ top:3%; translate:0; height:152%; }
.phero .bg-shard--back{ right:4%; left:auto; rotate:13deg; }
.phero .bg-shard--front{ right:14%; left:auto; rotate:7deg; }

/* Lookbook gallery */
.gallery{ display:grid; grid-template-columns:1fr; gap:clamp(1.1rem,2.5vw,2rem); }
.gallery + .gallery{ margin-top:clamp(1.1rem,2.5vw,2rem); }
@media (min-width:46rem){
  .gallery--2{ grid-template-columns:1fr 1fr; }
  .gallery--3{ grid-template-columns:repeat(3,1fr); }
}
.figure{ display:flex; flex-direction:column; gap:.9rem; }
.figure__media{ position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:1.2rem; aspect-ratio:4/5; }
.figure--tall .figure__media{ aspect-ratio:3/4; }
.figure--wide .figure__media{ aspect-ratio:16/9; }
.figure__mark{ position:absolute; top:-9%; right:-9%; width:40%; aspect-ratio:1; z-index:1;
  background:var(--slate); -webkit-mask:url("../img/logo-mark.svg") no-repeat center/contain;
  mask:url("../img/logo-mark.svg") no-repeat center/contain; opacity:.4; rotate:8deg;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.figure:hover .figure__mark{ opacity:.85; background:var(--slate-edge); }
.figure__tag{ position:relative; z-index:2; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-55); }
.figure__cap{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--hair); padding-top:.75rem; }
.figure__name{ text-transform:uppercase; letter-spacing:.02em; font-weight:500; font-size:1rem; }
.figure__no{ font-size:.72rem; letter-spacing:.16em; color:var(--sand-40); }

/* Contact */
.contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
@media (min-width:60rem){ .contact__grid{ grid-template-columns:1.05fr .8fr; } }
.contact__details{ display:grid; gap:clamp(1.75rem,3.5vw,2.75rem); align-content:start; }
.contact__block h4{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-40);
  font-weight:500; margin-bottom:.7rem; }
.contact__block p{ color:var(--sand-75); }
.contact__block a{ color:var(--sand-90); transition:color var(--dur) var(--ease); }
.contact__block a:hover{ color:var(--sand); }
.form__row--stack{ flex-direction:column; }
.field--area textarea{ width:100%; min-height:8rem; resize:vertical; background:transparent; color:var(--sand);
  border:0; border-bottom:1.5px solid var(--hair); padding:.95rem 0; letter-spacing:.01em; line-height:1.5;
  font-family:inherit; font-size:1rem; transition:border-color var(--dur) var(--ease); }
.field--area textarea::placeholder{ color:var(--sand-35); }
.field--area textarea:focus{ outline:none; border-bottom-color:var(--wine-bright); }

/* =========================================================================
   WOOCOMMERCE - styled to the dark / wine / shard system
   ========================================================================= */
/* Nav cart link */
.nav__cart{ display:inline-flex; align-items:center; gap:.35em; }
.nav__cart-count{ color:var(--wine-bright); }

/* Shop wrapper + headings */
.woo .container{ position:relative; z-index:1; }
.woocommerce-products-header{ margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.woocommerce-products-header__title,
.woocommerce .product_title,
.woocommerce-page .entry-title{
  font-weight:500; text-transform:uppercase; letter-spacing:-.012em; line-height:.98;
  font-size:var(--fs-h2); color:var(--sand); margin:0 0 .5rem;
}
.woocommerce p, .woocommerce li, .woocommerce td, .woocommerce th{ color:var(--sand-75); }
.woocommerce a{ color:var(--sand); }
.woocommerce a:hover{ color:var(--sand); }
.woocommerce-breadcrumb{ color:var(--sand-40)!important; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:clamp(1.25rem,3vw,2rem); }
.woocommerce-result-count, .woocommerce .woocommerce-ordering{ color:var(--sand-55); font-size:.78rem; }
.woocommerce .woocommerce-ordering select{ background:var(--nb); color:var(--sand); border:1px solid var(--hair); padding:.5em; }

/* Buttons -> Wine bar with shard-cut corner */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt, .woocommerce-page .button,
.woocommerce #place_order, .woocommerce .checkout-button{
  background:var(--wine)!important; color:var(--sand)!important; border:0!important; border-radius:0!important;
  text-transform:uppercase; letter-spacing:.14em; font-weight:500; font-size:.78rem;
  padding:1.05em 1.7em!important; line-height:1; cursor:pointer;
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:background var(--dur) var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover,
.woocommerce #place_order:hover, .woocommerce .checkout-button:hover{ background:var(--wine-bright)!important; }
.woocommerce .button.disabled, .woocommerce button.button:disabled{ opacity:.5; }

/* Product grid (shop archive) */
.woocommerce ul.products{ display:grid!important; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.4vw,1.9rem); margin:0!important; padding:0!important; list-style:none; }
@media (min-width:64rem){ .woocommerce ul.products{ grid-template-columns:repeat(4,1fr); } }
.woocommerce ul.products li.product{ width:auto!important; margin:0!important; float:none!important;
  padding:0!important; text-align:left; }
.woocommerce ul.products li.product a img{ width:100%; aspect-ratio:3/4; object-fit:cover; margin:0 0 .9rem;
  background:var(--panel); border:1px solid var(--hair);
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:1rem!important; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em; color:var(--sand); padding:0!important; }
.woocommerce ul.products li.product .price{ display:block; margin:.35rem 0 .6rem; color:var(--sand-75)!important; font-size:.92rem; }
.woocommerce ul.products li.product .price del{ color:var(--sand-35)!important; }
.woocommerce ul.products li.product .price ins{ color:var(--sand)!important; text-decoration:none; }
.woocommerce ul.products li.product .button{ font-size:.7rem; padding:.85em 1.25em!important; }
.woocommerce span.onsale{ background:var(--wine)!important; color:var(--sand)!important; border-radius:0;
  text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; font-weight:500; min-height:0; min-width:0;
  padding:.45em .7em; line-height:1; top:0; left:0; }
.woocommerce .star-rating span{ color:var(--wine-bright); }

/* Single product */
.woocommerce div.product{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:64rem){ .woocommerce div.product{ grid-template-columns:1fr 1fr; } }
.woocommerce div.product .woocommerce-product-gallery{ margin:0!important; width:auto!important; float:none!important; }
.woocommerce div.product .woocommerce-product-gallery img{ border:1px solid var(--hair); background:var(--panel); }
.woocommerce div.product .summary{ margin:0!important; width:auto!important; float:none!important; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--sand)!important; font-size:1.35rem; }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--sand-75); margin-top:1rem; }
.woocommerce div.product form.cart{ margin:1.75rem 0 0; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.woocommerce .quantity .qty{ background:transparent; color:var(--sand); border:1px solid var(--hair);
  border-radius:0; padding:.85em; width:5em; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ border:0; padding:0; margin:2.5rem 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--hair); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent; border:0; border-bottom:1px solid var(--hair); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--sand-55); text-transform:uppercase;
  letter-spacing:.12em; font-size:.78rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--sand); }

/* Cart + checkout tables */
.woocommerce table.shop_table{ border:1px solid var(--hair)!important; border-radius:0; color:var(--sand); }
.woocommerce table.shop_table th{ color:var(--sand); }
.woocommerce table.shop_table td, .woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{ border-top:1px solid var(--hair); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3{ text-transform:uppercase; letter-spacing:-.01em; font-weight:500; }
.woocommerce-cart-form .product-remove a.remove{ color:var(--wine-bright)!important; }

/* Form fields (checkout, account, coupon) -> underline style */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce #order_review input, .woocommerce input#coupon_code{
  background:transparent!important; color:var(--sand)!important; border:0!important;
  border-bottom:1.5px solid var(--hair)!important; border-radius:0!important; padding:.85em 0!important; box-shadow:none!important;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus{ border-bottom-color:var(--wine-bright)!important; }
.woocommerce form .form-row label, .woocommerce-checkout label{ color:var(--sand-75); }
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce form .form-row select{ background:var(--nb); color:var(--sand); border:1px solid var(--hair); border-radius:0; }
.woocommerce #payment, .woocommerce-checkout #order_review{ background:var(--nb-2); border:1px solid var(--hair); padding:clamp(1.25rem,3vw,2rem); }
.woocommerce #payment ul.payment_methods{ border-color:var(--hair); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce-NoticeGroup{
  background:var(--nb-2)!important; border-top:3px solid var(--wine)!important; color:var(--sand)!important; border-radius:0; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ color:var(--wine-bright)!important; }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--hair); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:.9rem 0; text-transform:uppercase;
  letter-spacing:.1em; font-size:.8rem; color:var(--sand-55); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--sand); }
@media (min-width:60rem){ .woocommerce-account .woocommerce-MyAccount-navigation{ width:30%; float:left; }
  .woocommerce-account .woocommerce-MyAccount-content{ width:64%; float:right; } }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{ border:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  background:transparent; color:var(--sand-55); border:1px solid var(--hair); }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--slate); color:var(--sand); }