/* ==========================================================================
   ZEROVA — Maison de Voile
   Design system — luxe discret / minimalisme éditorial
   ========================================================================== */

:root{
  /* Palette */
  --color-ivory: #F7F3EC;
  --color-offwhite: #FAF8F4;
  --color-beige: #EDE6D9;
  --color-beige-light: #F1EBE0;
  --color-taupe: #A9967F;
  --color-taupe-dark: #8B7A66;
  --color-black: #14120F;
  --color-warmgray: #6E6862;
  --color-line: rgba(20,18,15,0.10);
  --color-line-strong: rgba(20,18,15,0.18);

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  --container-max: 1440px;
  --transition-soft: 600ms cubic-bezier(.16,.84,.44,1);
  --transition-fast: 320ms cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-offwhite);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, select, textarea{ font-family: inherit; }
h1,h2,h3,h4,h5{ margin:0; font-family: var(--font-serif); font-weight:400; letter-spacing:0.01em; }
p{ margin:0; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
@media (max-width: 768px){
  .container{ padding: 0 var(--space-sm); }
}

/* ---------- Utility ---------- */
.eyebrow{
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-taupe-dark);
  display:block;
}
.section-title{
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: 0.03em;
  font-weight: 400;
}
.section-sub{
  font-size: 0.95rem;
  color: var(--color-warmgray);
  line-height:1.9;
  font-weight: 300;
  max-width: 560px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--color-black);
  background: transparent;
  color: var(--color-black);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:hover{ background: var(--color-black); color: var(--color-ivory); }
.btn-light{
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}
.btn-light:hover{ background: var(--color-ivory); color: var(--color-black); }
.btn-dark-fill{
  background: var(--color-black);
  color: var(--color-ivory);
  border-color: var(--color-black);
}
.btn-dark-fill:hover{ background: transparent; color: var(--color-black); }
.btn-full{ width:100%; }
.btn-sm{ padding: 0.8rem 1.6rem; font-size: 0.66rem; }
.btn-stripe-buy{
  margin-top: 0.8rem;
  border-color: var(--color-taupe-dark);
  color: var(--color-taupe-dark);
  background: transparent;
}
.btn-stripe-buy:hover{ background: var(--color-taupe-dark); color: var(--color-ivory); border-color: var(--color-taupe-dark); }

.link-underline{
  position:relative;
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--transition-fast);
}
.link-underline:hover{ background-size: 100% 1px; }

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- Announcement bar ---------- */
.announce-bar{
  background: var(--color-black);
  color: var(--color-ivory);
  text-align:center;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  overflow:hidden;
  position:relative;
  white-space: nowrap;
}
.announce-track{
  display:inline-flex;
  gap: 4rem;
  animation: announce-scroll 26s linear infinite;
}
@keyframes announce-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: rgba(250,248,244,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--transition-fast);
}
.site-header.is-transparent{
  background: transparent;
  border-bottom-color: transparent;
}
.header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  height: 92px;
}
.header-inner .nav-primary{ justify-self:start; }
.header-inner .brand{ justify-self:center; }
.header-inner .header-actions{ justify-self:end; }

.brand-wordmark{
  font-family: var(--font-serif);
  font-size: 1.7rem;
  letter-spacing: 0.22em;
  font-weight: 500;
}

.nav-primary{
  display:flex;
  align-items:center;
  gap: 2.1rem;
}
.nav-primary .nav-item{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position:relative;
  padding-bottom: 2px;
  display:inline-block;
}
.nav-primary a.nav-item::after{
  content:'';
  position:absolute;
  left:0; bottom:-3px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
.nav-primary a.nav-item:hover::after,
.nav-primary a.nav-item.active::after{ transform: scaleX(1); }

/* ---------- Nav dropdown ("Nos Produits") ---------- */
.nav-item-dropdown{
  position:relative;
}
.nav-dropdown-trigger{
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  display:inline-flex;
  align-items:center;
  gap: 0.35rem;
  position:relative;
  padding-bottom: 2px;
}
.nav-dropdown-trigger::after{
  content:'';
  position:absolute;
  left:0; bottom:-3px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
.nav-item-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown-trigger.active::after{ transform: scaleX(1); }
.nav-caret{
  font-size: 0.62rem;
  line-height:1;
  transform: translateY(1px);
  transition: transform var(--transition-fast);
}
.nav-item-dropdown:hover .nav-caret{ transform: translateY(1px) rotate(180deg); }

.nav-dropdown-menu{
  position:absolute;
  top: 100%;
  left: 50%;
  padding-top: 22px;
  transform: translateX(-50%);
  min-width: 210px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 400;
}
.nav-dropdown-inner{
  display:flex;
  flex-direction:column;
  padding: 0.6rem 0;
  background: var(--color-offwhite);
  border: 1px solid var(--color-line);
  box-shadow: 0 18px 40px rgba(20,18,15,0.10);
  transform: translateY(6px);
  transition: transform var(--transition-fast);
}
.nav-item-dropdown:hover .nav-dropdown-inner,
.nav-item-dropdown:focus-within .nav-dropdown-inner{
  transform: translateY(0);
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.nav-dropdown-inner a{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  transition: background var(--transition-fast), padding-left var(--transition-fast);
  white-space: nowrap;
}
.nav-dropdown-inner a:hover,
.nav-dropdown-inner a.active{
  background: var(--color-beige-light);
  padding-left: 1.7rem;
}
.header-actions{
  display:flex;
  align-items:center;
  gap: 1.4rem;
}
.header-icon-btn{
  position:relative;
  font-size: 1.02rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
}
.icon-badge{
  position:absolute;
  top:-8px; right:-10px;
  background: var(--color-black);
  color: var(--color-ivory);
  font-size: 0.58rem;
  width:16px; height:16px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-sans);
}
.select-mini{
  border:none;
  background:transparent;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-black);
  appearance:none;
  padding-right: 0.6rem;
  cursor:pointer;
}

.burger-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  padding: 6px;
}
.burger-btn span{
  width: 22px; height:1px;
  background: var(--color-black);
  display:block;
}

@media (max-width: 1024px){
  .nav-primary{ display:none; }
  .burger-btn{ display:flex; }
  .header-inner{ grid-template-columns: auto 1fr auto; }
  .header-inner .brand{ justify-self:center; }
}

/* Mobile drawer nav */
.mobile-nav{
  position: fixed;
  inset:0;
  background: var(--color-offwhite);
  z-index: 900;
  transform: translateX(100%);
  transition: transform var(--transition-soft);
  padding: 2rem;
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav-close{
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 3rem;
  display:inline-flex;
  gap: 0.6rem;
  align-items:center;
}
.mobile-nav a{
  display:block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-line);
}
.mobile-nav .mobile-nav-sub{
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding-left: 1.2rem;
  border-bottom:none;
  color: var(--color-warmgray);
}
.mobile-nav-heading{
  display:block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-taupe-dark);
  padding: 1rem 0 0.3rem;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height: 92vh;
  min-height: 560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color: var(--color-ivory);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: hero-zoom 12s ease-out forwards;
}
@keyframes hero-zoom{
  from{ transform: scale(1.06); }
  to{ transform: scale(1); }
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,18,15,0.08) 0%, rgba(20,18,15,0.55) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  padding: 0 var(--space-md) var(--space-2xl);
  width:100%;
  max-width: var(--container-max);
  margin:0 auto;
}
.hero-content .eyebrow{ color: var(--color-ivory); opacity:0.85; }
.hero-title{
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  letter-spacing: 0.04em;
  margin: 1rem 0 1.6rem;
  max-width: 800px;
  line-height: 1.05;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-scroll-cue{
  position:absolute;
  right: var(--space-md);
  bottom: var(--space-lg);
  z-index:1;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  color: var(--color-ivory);
}
.hero-scroll-cue .line{
  width:1px; height:44px;
  background: rgba(250,248,244,0.6);
  overflow:hidden;
  position:relative;
}
.hero-scroll-cue .line::after{
  content:'';
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background: var(--color-ivory);
  animation: scroll-cue 2.2s ease-in-out infinite;
}
@keyframes scroll-cue{
  0%{ top:-100%; }
  50%{ top:0; }
  100%{ top:100%; }
}
@media (max-width: 768px){
  .hero{ height: 86vh; align-items:flex-end; }
  .hero-content{ padding-bottom: 4rem; }
  .hero-scroll-cue{ display:none; }
}

/* ---------- Reveal animation ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(.16,.84,.44,1), transform 900ms cubic-bezier(.16,.84,.44,1);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: 120ms; }
.reveal-delay-2{ transition-delay: 240ms; }
.reveal-delay-3{ transition-delay: 360ms; }

/* ---------- Section spacing ---------- */
.section{ padding: var(--space-xl) 0; }
.section-tight{ padding: var(--space-lg) 0; }
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 2rem;
  margin-bottom: var(--space-lg);
}
.section-header-center{
  text-align:center;
  align-items:center;
  flex-direction:column;
  margin-bottom: var(--space-lg);
}
@media (max-width: 768px){
  .section{ padding: var(--space-lg) 0; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

/* ---------- Collections grid (homepage) ---------- */
.collections-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--color-line);
}
.collection-tile{
  position:relative;
  aspect-ratio: 3/4;
  overflow:hidden;
  background: var(--color-beige);
  display:block;
}
.collection-tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.collection-tile:hover img{ transform: scale(1.07); }
.collection-tile-label{
  position:absolute;
  left:0; bottom:0; right:0;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(20,18,15,0.6));
  color: var(--color-ivory);
}
.collection-tile-label .name{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}
.collection-tile-label .count{
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform:uppercase;
  opacity:0.8;
}
@media (max-width: 1024px){
  .collections-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .collections-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Storytelling ---------- */
.story-section{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
}
.story-media{
  position:relative;
  min-height: 480px;
  overflow:hidden;
}
.story-media img{ width:100%; height:100%; object-fit:cover; }
.story-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 1.6rem;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-beige-light);
}
.story-pillars{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 1rem;
}
.story-pillar .num{
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-taupe-dark);
}
.story-pillar h4{
  font-size: 1.02rem;
  margin: 0.4rem 0 0.3rem;
  letter-spacing: 0.02em;
}
.story-pillar p{
  font-size: 0.82rem;
  color: var(--color-warmgray);
  line-height: 1.7;
}
@media (max-width: 900px){
  .story-section{ grid-template-columns: 1fr; }
  .story-media{ min-height: 360px; }
  .story-text{ padding: var(--space-lg) var(--space-sm); }
}

/* ---------- Product grid & cards ---------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 1.6rem;
}
@media (max-width: 1100px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0.9rem; } }

.product-card{
  position:relative;
  display:block;
}
.product-card-media{
  position:relative;
  overflow:hidden;
  background: var(--color-beige);
  aspect-ratio: 3/4;
}
.product-card-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 1s cubic-bezier(.16,.84,.44,1), opacity .5s ease;
}
.product-card-media img.img-secondary{
  position:absolute; inset:0;
  opacity:0;
}
.product-card:hover .img-primary{ opacity:0; }
.product-card:hover .img-secondary{ opacity:1; transform: scale(1.04); }
.product-card-tag{
  position:absolute; top:0.9rem; left:0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform:uppercase;
  background: var(--color-black);
  color: var(--color-ivory);
  padding: 0.35rem 0.7rem;
}
.product-card-wishlist{
  position:absolute; top:0.7rem; right:0.7rem;
  width: 34px; height:34px;
  border-radius:50%;
  background: rgba(250,248,244,0.9);
  display:flex; align-items:center; justify-content:center;
  font-size: 0.95rem;
  transition: transform var(--transition-fast);
  z-index:2;
}
.product-card-wishlist:hover{ transform: scale(1.1); }
.product-card-wishlist.is-active{ color:#B5453B; }
.product-card-quickadd{
  position:absolute; left:0; right:0; bottom:0;
  padding: 0.85rem;
  background: rgba(250,248,244,0.94);
  text-align:center;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}
.product-card:hover .product-card-quickadd{ transform: translateY(0); }
.product-card-info{ padding-top: 0.9rem; text-align:left; }
.product-card-info .p-name{
  font-family: var(--font-serif);
  font-size: 1.06rem;
  margin-bottom: 0.25rem;
}
.product-card-info .p-cat{
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform:uppercase;
  color: var(--color-taupe-dark);
  margin-bottom: 0.4rem;
  display:block;
}
.product-card-info .p-price{
  font-size: 0.88rem;
  color: var(--color-black);
}
.product-card-info .p-price .old{
  text-decoration: line-through;
  color: var(--color-warmgray);
  margin-right: 0.5rem;
  font-size: 0.8rem;
}
.product-card-swatches{
  display:flex; gap:0.4rem; margin-top:0.5rem;
}
.swatch{
  width:14px; height:14px;
  border-radius:50%;
  border: 1px solid var(--color-line-strong);
  display:inline-block;
}

/* ---------- Best sellers slider ---------- */
.scroller{
  display:flex;
  gap: 1.6rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar{ display:none; }
.scroller .product-card{
  min-width: 280px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
@media (max-width: 640px){
  .scroller .product-card{ min-width: 68vw; }
}
.scroller-nav{ display:flex; gap:0.7rem; }
.scroller-arrow{
  width:44px; height:44px;
  border:1px solid var(--color-line-strong);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.scroller-arrow:hover{ background: var(--color-black); color: var(--color-ivory); border-color: var(--color-black); }

/* ---------- Seen in ---------- */
.seen-in{
  background: var(--color-black);
  color: var(--color-ivory);
  padding: var(--space-lg) 0;
  text-align:center;
}
.seen-in .eyebrow{ color: rgba(250,248,244,0.6); }
.seen-in-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: clamp(1.6rem, 5vw, 4.5rem);
  flex-wrap:wrap;
  margin-top: 2.4rem;
}
.seen-in-logos span{
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  opacity: 0.68;
  transition: opacity var(--transition-fast);
}
.seen-in-logos span:hover{ opacity:1; }

/* ---------- Newsletter ---------- */
.newsletter{
  background: var(--color-beige-light);
  padding: var(--space-xl) 0;
  text-align:center;
}
.newsletter-form{
  display:flex;
  max-width: 460px;
  margin: 2rem auto 0;
  border-bottom: 1px solid var(--color-black);
}
.newsletter-form input{
  flex:1;
  border:none;
  background:transparent;
  padding: 0.9rem 0.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-black);
}
.newsletter-form input::placeholder{ color: var(--color-warmgray); }
.newsletter-form button{
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 0.4rem;
  white-space:nowrap;
}
.newsletter-note{
  margin-top:1rem;
  font-size: 0.72rem;
  color: var(--color-warmgray);
}
.form-success{
  margin-top:1rem;
  font-size: 0.78rem;
  color: var(--color-taupe-dark);
  display:none;
}
.form-success.is-shown{ display:block; }

/* ---------- Instagram feed ---------- */
.insta-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.insta-grid a{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  display:block;
}
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .8s ease; }
.insta-grid a:hover img{ transform: scale(1.08); }
@media (max-width: 900px){ .insta-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--color-ivory);
  border-top: 1px solid var(--color-line);
  padding: var(--space-xl) 0 var(--space-md);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
.footer-brand .brand-wordmark{ font-size: 1.5rem; }
.footer-brand p{
  margin-top:1rem;
  font-size: 0.82rem;
  color: var(--color-warmgray);
  line-height:1.8;
  max-width: 280px;
}
.footer-col h5{
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: var(--color-taupe-dark);
}
.footer-col a, .footer-col p{
  display:block;
  font-size: 0.84rem;
  color: var(--color-black);
  margin-bottom: 0.75rem;
  opacity:0.86;
}
.footer-col a:hover{ opacity:1; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 1rem;
  margin-top: var(--space-lg);
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-warmgray);
}
.footer-socials{ display:flex; gap:1rem; }
.footer-payments{ display:flex; gap:0.7rem; opacity:0.6; font-size:0.7rem; letter-spacing:0.1em; }
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- Breadcrumb / Page header ---------- */
.page-banner{
  padding: var(--space-lg) 0 var(--space-md);
  text-align:center;
  background: var(--color-beige-light);
}
.breadcrumb{
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warmgray);
  margin-bottom: 1rem;
}
.breadcrumb a:hover{ color: var(--color-black); }
.page-banner h1{
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: 0.03em;
}
.page-banner-media{
  height: 46vh;
  min-height: 320px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--color-ivory);
  overflow:hidden;
}
.page-banner-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-banner-media::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(20,18,15,0.42);
}
.page-banner-media .banner-content{ position:relative; z-index:1; }
.page-banner-media .breadcrumb{ color: rgba(250,248,244,0.75); }
.page-banner-media .breadcrumb a{ color: rgba(250,248,244,0.9); }

/* ---------- Collection listing (toolbar/filters) ---------- */
.collection-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items:flex-start;
}
@media (max-width: 900px){
  .collection-layout{ grid-template-columns: 1fr; }
}
.filters-panel{
  position: sticky;
  top: 112px;
}
.filter-group{
  border-bottom: 1px solid var(--color-line);
  padding: 1.4rem 0;
}
.filter-group summary{
  cursor:pointer;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.filter-group summary::-webkit-details-marker{ display:none; }
.filter-group summary::after{ content:'+'; font-size:1rem; }
.filter-group[open] summary::after{ content:'–'; }
.filter-options{ margin-top: 1rem; display:flex; flex-direction:column; gap:0.7rem; }
.filter-options label{
  display:flex; align-items:center; gap:0.6rem;
  font-size: 0.82rem;
  color: var(--color-warmgray);
  cursor:pointer;
}
.filter-options input[type=checkbox]{ accent-color: var(--color-black); }
.filter-swatches{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.filter-swatch{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--color-line-strong);
  cursor:pointer;
  position:relative;
}
.filter-swatch.is-selected::after{
  content:'';
  position:absolute; inset:-4px;
  border:1px solid var(--color-black);
  border-radius:50%;
}
.price-range-inputs{ display:flex; gap:0.6rem; align-items:center; font-size:0.78rem; }
.price-range-inputs input{
  width:100%; border:1px solid var(--color-line-strong); padding:0.5rem 0.6rem; background:transparent; font-size:0.8rem;
}

.collection-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-line);
}
.results-count{ font-size:0.78rem; color: var(--color-warmgray); }
.sort-select{
  border: 1px solid var(--color-line-strong);
  background: transparent;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mobile-filter-toggle{
  display:none;
  border: 1px solid var(--color-black);
  padding: 0.6rem 1.2rem;
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
@media (max-width: 900px){
  .mobile-filter-toggle{ display:inline-flex; }
  .filters-panel{
    position:fixed; inset:0; z-index:800;
    background: var(--color-offwhite);
    padding: 2rem; overflow-y:auto;
    transform: translateX(-100%);
    transition: transform var(--transition-soft);
  }
  .filters-panel.is-open{ transform: translateX(0); }
}

.pagination{
  display:flex; justify-content:center; gap:0.6rem; margin-top: var(--space-lg);
}
.pagination button{
  width:38px; height:38px;
  border:1px solid var(--color-line-strong);
  font-size:0.8rem;
}
.pagination button.active{ background:var(--color-black); color:var(--color-ivory); border-color:var(--color-black); }

/* ---------- Promo banner strip inline ---------- */
.editorial-banner{
  position:relative;
  height: 70vh;
  min-height: 420px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color: var(--color-ivory);
}
.editorial-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editorial-banner::after{ content:''; position:absolute; inset:0; background: rgba(20,18,15,0.32); }
.editorial-banner .banner-inner{ position:relative; z-index:1; max-width:560px; padding: 0 var(--space-md); }

/* ---------- Product page ---------- */
.product-page{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items:flex-start;
}
@media (max-width: 980px){
  .product-page{ grid-template-columns: 1fr; gap: 2rem; }
}
.gallery-main{
  position:relative;
  aspect-ratio: 3/4;
  overflow:hidden;
  background: var(--color-beige);
  cursor: zoom-in;
}
.gallery-main img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 400ms ease;
}
.gallery-main.is-zoomed img{ transform: scale(1.8); cursor: zoom-out; }
.gallery-thumbs{
  display:flex;
  gap:0.8rem;
  margin-top:1rem;
  overflow-x:auto;
}
.gallery-thumbs img{
  width:84px; height:112px;
  object-fit:cover;
  cursor:pointer;
  border: 1px solid transparent;
  opacity:0.7;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.gallery-thumbs img.active{ opacity:1; border-color: var(--color-black); }

.product-info-sticky{ position: sticky; top: 112px; }
.product-info-sticky .p-cat{
  font-size: 0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-taupe-dark);
}
.product-info-sticky h1{
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin: 0.6rem 0 0.8rem;
}
.product-price-row{ display:flex; align-items:baseline; gap:0.8rem; margin-bottom:1.4rem; font-size:1.15rem; }
.product-price-row .old{ text-decoration:line-through; color:var(--color-warmgray); font-size:0.95rem; }
.stars{ color:var(--color-taupe-dark); font-size:0.85rem; letter-spacing:2px; }
.review-count{ font-size:0.78rem; color:var(--color-warmgray); margin-left:0.4rem; }
.p-lede{ font-size: 0.92rem; color: var(--color-warmgray); line-height:1.8; margin-bottom:1.8rem; }

.color-select, .size-select{ margin-bottom:1.6rem; }
.select-label{
  display:flex; justify-content:space-between;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.8rem;
}
.select-label a{ text-decoration:underline; color: var(--color-warmgray); text-transform:none; letter-spacing:0; font-size:0.78rem; }
.color-options{ display:flex; gap:0.7rem; }
.color-dot{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--color-line-strong);
  cursor:pointer; position:relative;
}
.color-dot.selected::after{ content:''; position:absolute; inset:-5px; border:1px solid var(--color-black); border-radius:50%; }
.size-options{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.size-box{
  min-width:48px; height:48px;
  padding: 0 0.6rem;
  border:1px solid var(--color-line-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem;
  cursor:pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.size-box:hover{ border-color: var(--color-black); }
.size-box.selected{ background:var(--color-black); color:var(--color-ivory); border-color:var(--color-black); }
.size-box.disabled{ opacity:0.32; text-decoration:line-through; pointer-events:none; }

.qty-add-row{ display:flex; gap:1rem; margin: 1.6rem 0; }
.qty-stepper{
  display:flex; align-items:center; border:1px solid var(--color-line-strong);
}
.qty-stepper button{ width:44px; height:52px; font-size:1rem; }
.qty-stepper input{
  width:40px; text-align:center; border:none; background:transparent; font-size:0.9rem;
}
.add-to-cart-btn{ flex:1; }
.stock-note{ font-size:0.78rem; color: var(--color-taupe-dark); margin-bottom:1.2rem; }
.notify-stock{ font-size:0.78rem; text-decoration:underline; cursor:pointer; }

.trust-row{
  display:flex; flex-direction:column; gap:0.8rem;
  margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--color-line);
  font-size:0.8rem; color: var(--color-warmgray);
}
.trust-row .trust-item{ display:flex; gap:0.7rem; align-items:flex-start; }

.accordion-group{ margin-top: 2rem; }
.accordion-item{ border-bottom:1px solid var(--color-line); }
.accordion-item summary{
  cursor:pointer; padding: 1.1rem 0; display:flex; justify-content:space-between; align-items:center;
  font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
}
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary::after{ content:'+'; font-size:1.1rem; }
.accordion-item[open] summary::after{ content:'–'; }
.accordion-body{ padding: 0 0 1.4rem; font-size:0.86rem; color:var(--color-warmgray); line-height:1.85; }
.accordion-body ul{ padding-left:1.1rem; list-style: disc; }
.accordion-body li{ margin-bottom:0.4rem; }

.size-guide-table{ width:100%; border-collapse:collapse; font-size:0.82rem; margin-top:1rem; }
.size-guide-table th, .size-guide-table td{ border:1px solid var(--color-line); padding:0.7rem; text-align:center; }
.size-guide-table th{ background: var(--color-beige-light); font-weight:500; letter-spacing:0.05em; text-transform:uppercase; font-size:0.68rem; }

/* Product tabs (description block) */
.product-detail-tabs{ margin-top: var(--space-xl); }
.tabs-nav{ display:flex; gap:2.4rem; border-bottom:1px solid var(--color-line); }
.tabs-nav button{
  padding: 0.9rem 0 1.1rem;
  font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase;
  border-bottom: 2px solid transparent;
  color: var(--color-warmgray);
}
.tabs-nav button.active{ color: var(--color-black); border-color: var(--color-black); }
.tab-panel{ display:none; padding: 2rem 0; max-width: 760px; }
.tab-panel.active{ display:block; }
.tab-panel p{ color:var(--color-warmgray); line-height:1.9; font-size:0.9rem; margin-bottom:1rem; }

/* Reviews */
.review-summary{ display:flex; gap:2.4rem; align-items:center; margin-bottom:2rem; flex-wrap:wrap; }
.review-score-big{ font-family: var(--font-serif); font-size:3rem; }
.review-item{ padding: 1.4rem 0; border-top:1px solid var(--color-line); }
.review-item .r-head{ display:flex; justify-content:space-between; margin-bottom:0.4rem; flex-wrap:wrap; gap:0.4rem; }
.review-item .r-name{ font-size:0.85rem; font-weight:500; }
.review-item .r-date{ font-size:0.72rem; color: var(--color-warmgray); }
.review-item p{ font-size:0.86rem; color: var(--color-warmgray); line-height:1.8; }
.verified-badge{ font-size:0.68rem; font-weight:400; color:#6E8B6E; letter-spacing:0.03em; text-transform:uppercase; margin-left:0.4rem; }

/* Recently viewed / cross-sell */
.related-heading{ margin-bottom: 2rem; }

/* ---------- Cart page ---------- */
.cart-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items:flex-start; }
@media (max-width: 980px){ .cart-layout{ grid-template-columns:1fr; } }
.cart-item{
  display:grid; grid-template-columns: 110px 1fr auto; gap: 1.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--color-line); align-items:center;
}
.cart-item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.cart-item-name{ font-family: var(--font-serif); font-size:1.05rem; margin-bottom:0.3rem; }
.cart-item-meta{ font-size:0.76rem; color:var(--color-warmgray); margin-bottom:0.7rem; }
.cart-item-remove{ font-size:0.72rem; text-decoration:underline; color: var(--color-warmgray); }
.cart-item-price{ text-align:right; font-size:0.92rem; }
.cart-summary{
  background: var(--color-beige-light);
  padding: 2.2rem;
}
.summary-row{ display:flex; justify-content:space-between; font-size:0.86rem; padding: 0.7rem 0; }
.summary-row.total{ font-size:1.1rem; border-top: 1px solid var(--color-line-strong); margin-top:0.6rem; padding-top:1.2rem; }
.promo-row{ display:flex; gap:0.6rem; margin: 1.4rem 0; }
.promo-row input{
  flex:1; border:1px solid var(--color-line-strong); background:transparent; padding:0.8rem 1rem; font-size:0.8rem;
}
.cart-empty{ text-align:center; padding: var(--space-2xl) 0; }

/* ---------- Checkout ---------- */
.checkout-layout{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items:flex-start; }
@media (max-width: 980px){ .checkout-layout{ grid-template-columns:1fr; } }
.checkout-steps{ display:flex; gap:1.5rem; margin-bottom: 2.2rem; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--color-warmgray); }
.checkout-steps .active{ color: var(--color-black); border-bottom:1px solid var(--color-black); padding-bottom:0.3rem; }
.form-block{ margin-bottom: 2.2rem; }
.form-block h3{ font-size:1.05rem; margin-bottom:1.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-field{ display:flex; flex-direction:column; gap:0.5rem; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-warmgray); }
.form-field input, .form-field select{
  border: 1px solid var(--color-line-strong);
  background: transparent;
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
}
.payment-methods{ display:flex; flex-direction:column; gap:0.9rem; }
.payment-method{
  border: 1px solid var(--color-line-strong);
  padding: 1rem 1.2rem;
  display:flex; align-items:center; gap:0.9rem;
  font-size:0.86rem;
  cursor:pointer;
}
.payment-method.selected{ border-color: var(--color-black); background: var(--color-beige-light); }

/* ---------- Account ---------- */
.account-tabs{ display:flex; gap:2.2rem; border-bottom:1px solid var(--color-line); margin-bottom:2.4rem; flex-wrap:wrap; }
.account-tabs button{ padding-bottom:1rem; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-warmgray); border-bottom:2px solid transparent; }
.account-tabs button.active{ color:var(--color-black); border-color: var(--color-black); }
.auth-toggle{ display:flex; justify-content:center; gap:2rem; margin-bottom:2.4rem; }
.auth-toggle button{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; padding-bottom:0.6rem; border-bottom:2px solid transparent; color:var(--color-warmgray); }
.auth-toggle button.active{ color:var(--color-black); border-color:var(--color-black); }
.auth-form{ max-width: 420px; margin: 0 auto; display:flex; flex-direction:column; gap:1.1rem; }

/* ---------- FAQ ---------- */
.faq-list .accordion-item summary{ font-size:0.95rem; letter-spacing:0.01em; text-transform:none; font-family: var(--font-serif); }
.faq-categories{ display:flex; gap:1rem; justify-content:center; margin-bottom:3rem; flex-wrap:wrap; }
.faq-categories button{
  padding:0.6rem 1.4rem; border:1px solid var(--color-line-strong); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
}
.faq-categories button.active{ background:var(--color-black); color:var(--color-ivory); border-color:var(--color-black); }

/* ---------- Journal ---------- */
.journal-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
@media (max-width: 900px){ .journal-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .journal-grid{ grid-template-columns: 1fr; } }
.journal-card-media{ aspect-ratio: 4/3; overflow:hidden; margin-bottom:1.2rem; }
.journal-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s ease; }
.journal-card:hover .journal-card-media img{ transform: scale(1.06); }
.journal-card-date{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-taupe-dark); margin-bottom:0.5rem; display:block; }
.journal-card h3{ font-size:1.25rem; margin-bottom:0.6rem; }
.journal-card p{ font-size:0.85rem; color:var(--color-warmgray); line-height:1.8; }
.journal-article-body{ max-width: 720px; margin: 0 auto; }
.journal-article-body p{ font-size:1rem; line-height:2; color: var(--color-warmgray); margin-bottom:1.6rem; }
.journal-article-body h2{ font-size:1.6rem; margin: 2rem 0 1rem; }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:4rem; }
@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:1rem; padding: 1.4rem 0; border-bottom:1px solid var(--color-line); }
.contact-info-item h4{ font-size:0.95rem; margin-bottom:0.3rem; }
.contact-info-item p{ font-size:0.84rem; color: var(--color-warmgray); }
.contact-form{ display:flex; flex-direction:column; gap:1.2rem; }

/* ---------- Wishlist ---------- */
.empty-state{ text-align:center; padding: var(--space-2xl) 0; }
.empty-state .eyebrow{ margin-bottom:1rem; }
.empty-state p{ color: var(--color-warmgray); margin: 1rem 0 2rem; }

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  bottom: 2rem; left:50%;
  transform: translate(-50%, 120%);
  background: var(--color-black);
  color: var(--color-ivory);
  padding: 1rem 1.8rem;
  font-size:0.78rem;
  letter-spacing:0.06em;
  z-index:1200;
  transition: transform var(--transition-fast);
  display:flex; align-items:center; gap:0.8rem;
}
.toast.is-shown{ transform: translate(-50%, 0); }

/* ---------- Cart drawer ---------- */
.cart-drawer-overlay{
  position:fixed; inset:0; background: rgba(20,18,15,0.4);
  z-index:950; opacity:0; pointer-events:none; transition: opacity var(--transition-fast);
}
.cart-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%;
  width: min(420px, 100%);
  background: var(--color-offwhite);
  z-index:960;
  transform: translateX(100%);
  transition: transform var(--transition-soft);
  display:flex; flex-direction:column;
}
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.6rem 1.8rem; border-bottom:1px solid var(--color-line);
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
}
.cart-drawer-body{ flex:1; overflow-y:auto; padding: 1.2rem 1.8rem; }
.cart-drawer-foot{ padding: 1.6rem 1.8rem; border-top:1px solid var(--color-line); }
.cart-drawer .cart-item{ grid-template-columns: 76px 1fr auto; }
.cart-drawer .cart-item img{ aspect-ratio: 3/4; }
.cart-drawer-empty{ text-align:center; padding: 3rem 0; color: var(--color-warmgray); font-size:0.86rem; }

/* ---------- Search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; background: rgba(250,248,244,0.98);
  z-index:1000; opacity:0; pointer-events:none; transition: opacity var(--transition-fast);
  padding-top: 10vh;
}
.search-overlay.is-open{ opacity:1; pointer-events:auto; }
.search-overlay-inner{ max-width:760px; margin: 0 auto; padding: 0 2rem; }
.search-input-row{ display:flex; align-items:center; gap:1rem; border-bottom: 1px solid var(--color-black); padding-bottom:1rem; }
.search-input-row input{ flex:1; border:none; background:transparent; font-family: var(--font-serif); font-size:1.6rem; }
.search-close{ font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; }
.search-suggestions{ margin-top:2rem; }
.search-suggestions .label{ font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-warmgray); margin-bottom:1rem; display:block; }
.search-result-item{ display:flex; gap:1rem; align-items:center; padding: 0.9rem 0; border-bottom:1px solid var(--color-line); }
.search-result-item img{ width:56px; height:70px; object-fit:cover; }
.search-result-item .sr-name{ font-size:0.9rem; }
.search-result-item .sr-price{ font-size:0.8rem; color: var(--color-warmgray); margin-left:auto; }
.search-tags{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.search-tags a{ border:1px solid var(--color-line-strong); padding:0.5rem 1rem; font-size:0.74rem; }

/* ---------- Misc content pages ---------- */
.simple-content{ max-width: 780px; margin: 0 auto; }
.simple-content h2{ font-size:1.5rem; margin: 2.4rem 0 1rem; }
.simple-content p{ color: var(--color-warmgray); line-height:2; font-size:0.94rem; margin-bottom:1.2rem; }
.two-col-info{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
@media (max-width: 700px){ .two-col-info{ grid-template-columns:1fr; } }

.info-icon-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2.4rem; text-align:center; }
@media (max-width: 700px){ .info-icon-grid{ grid-template-columns:1fr; } }
.info-icon-grid .icon{ font-size:1.8rem; margin-bottom:1rem; }
.info-icon-grid h4{ font-size:1rem; margin-bottom:0.6rem; }
.info-icon-grid p{ font-size:0.84rem; color:var(--color-warmgray); line-height:1.7; }

/* ---------- Loader ---------- */
.page-loader{
  position:fixed; inset:0; background: var(--color-offwhite);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  transition: opacity 500ms ease, visibility 500ms ease;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; }
.page-loader .loader-mark{ font-family: var(--font-serif); font-size:1.6rem; letter-spacing:0.3em; }