/* ============================================================
   FRANK'LINE · Stylesheet
   Maison de polos & maille · MMXXVI
   ============================================================ */

:root {
  /* Heritage palette · aligned with the logo's navy / cream / red identity.
     Variable names kept identical to the original tokens so the rest of the
     stylesheet keeps working untouched. */
  --paper:    #F4ECD9;
  --ivory:    #EBE2CC;   /* warm cream · matches logo background */
  --ivory-2:  #DDD3BD;
  --ivory-3:  #C9BFA8;
  --ink:      #1F3057;   /* deep navy · logo shield */
  --ink-2:    #2A3D6A;
  --ink-3:    #3B4F7E;
  --mute:     #837C6B;
  --mute-2:   #ADA597;
  --line:     #C9BFA8;
  --line-2:   #DBD1BC;
  --blush:    #DDC8A0;   /* warm soft cream · used for soft-accent fills */
  --blush-2:  #E8D9B6;
  --rose:     #B7202E;   /* heritage red · the accent */
  --rose-2:   #8E1822;
  --gold:     #B8956A;

  /* Type */
  --serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
::selection { background: var(--ink); color: var(--ivory); }

.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.eyebrow {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.eyebrow-rule::before {
  content: ""; display: inline-block; width: 28px; height: 1px;
  background: var(--rose); vertical-align: middle; margin-right: 12px;
}

/* ─── PALETTE BAR ─── */
.palette-bar {
  display: flex; height: 3px;
}
.palette-bar span { flex: 1; }
.palette-bar .ink   { background: var(--ink); }
.palette-bar .iv    { background: var(--ivory-3); }
.palette-bar .blush { background: var(--blush); }
.palette-bar .rose  { background: var(--rose); }

/* ─── MARQUEE ─── */
.marquee {
  background: var(--ink);
  color: var(--ivory);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 11px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: scroll 42s linear infinite;
  padding-left: 100%;
}
.marquee-track span { padding: 0 38px; font-weight: 400; }
.marquee-track span::after { content: "·"; margin-left: 38px; color: var(--blush); }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ─── NAV ─── */
nav.top {
  border-bottom: 1px solid var(--line);
  padding: 14px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--ivory);
  position: sticky; top: 0; z-index: 40;
  transition: padding .3s var(--ease), box-shadow .3s;
}
nav.top.scrolled {
  padding: 10px 40px;
  box-shadow: 0 1px 0 var(--line);
}
/* Menu trigger (3 lines) - always visible, keeps the brand the hero of the bar */
nav .nav-left { display: flex; align-items: center; gap: 16px; }
nav .menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 0; cursor: pointer;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--ink);
}
nav .menu-btn .bars { display: flex; flex-direction: column; gap: 4px; width: 22px; }
nav .menu-btn .bars span { height: 1.5px; background: var(--ink); display: block; width: 100%; transition: transform .3s, opacity .3s; }
nav .menu-btn:hover { color: var(--rose); }
nav .menu-btn:hover .bars span { background: var(--rose); }
nav .menu-btn .menu-lbl { padding-top: 1px; }
@media (max-width: 720px) { nav .menu-btn .menu-lbl { display: none; } }

/* Legacy inline links - permanently hidden; navigation lives in the drawer */
nav .links {
  display: none !important;
}
nav .links > a, nav .links > button {
  position: relative; padding: 6px 0;
  transition: color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
nav .links a:hover, nav .links button:hover { color: var(--rose); }
nav .links a::after, nav .links button.has-rule::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0; background: var(--rose);
  transition: width .25s var(--ease);
}
nav .links a:hover::after, nav .links button.has-rule:hover::after { width: 100%; }

nav .brand {
  display: flex; justify-content: center; align-items: center; gap: 14px;
}
nav .brand .wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; letter-spacing: 0.02em;
}
nav .brand .wordmark em { font-style: italic; color: var(--rose); }
nav .brand .mono svg { display: block; }

nav .utils {
  display: flex; gap: 24px; justify-content: flex-end;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; align-items: center;
}
nav .utils button { padding: 6px 0; transition: color .2s; }
nav .utils button:hover { color: var(--rose); }
nav .utils .bag {
  display: inline-flex; align-items: center; gap: 8px;
}
nav .utils .bag .count {
  background: var(--ink); color: var(--ivory);
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0; font-weight: 600;
  min-width: 20px; text-align: center;
}
nav .burger { display: none; }

@media (max-width: 1000px) {
  nav.top { padding: 14px 20px; }
  nav.top.scrolled { padding: 10px 20px; }
  nav .utils .lbl { display: none; }
  nav .utils { gap: 18px; }
  nav .brand .wordmark { font-size: 26px; }
}

/* ─── DRAWERS / OVERLAYS (search, cart, mobile menu) ─── */
.scrim {
  position: fixed; inset: 0;
  background: rgba(21, 19, 15, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
  z-index: 50;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 460px; max-width: 100vw;
  background: var(--ivory);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer .dh {
  padding: 26px 28px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.drawer .dh h3 {
  font-family: var(--serif); font-weight: 400; font-size: 26px;
  letter-spacing: 0.02em;
}
.drawer .dh h3 em { font-style: italic; color: var(--rose); }
.drawer .dh .close {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.drawer .dh .close::before {
  content: "×"; font-size: 22px; line-height: 0; transform: translateY(-1px);
  font-family: var(--serif);
}
.drawer .db {
  flex: 1; overflow-y: auto;
  padding: 26px 28px;
}
.drawer .df {
  padding: 22px 28px; border-top: 1px solid var(--line);
  background: var(--ivory-2);
}

/* Cart drawer specifics */
.cart-empty {
  text-align: center; padding: 40px 0;
  color: var(--mute);
}
.cart-line {
  display: grid; grid-template-columns: 90px 1fr auto;
  gap: 18px; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line .cl-img {
  width: 90px; height: 110px;
  background: var(--ivory-2);
  position: relative; overflow: hidden;
}
.cart-line .cl-img .fill { position: absolute; inset: 0; }
.cart-line .cl-name {
  font-family: var(--serif); font-size: 20px;
  margin-bottom: 4px;
}
.cart-line .cl-meta {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 12px;
}
.cart-line .cl-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
}
.cart-line .cl-qty button {
  padding: 6px 10px; font-size: 12px;
}
.cart-line .cl-qty span { padding: 0 12px; font-size: 12px; font-weight: 500; }
.cart-line .cl-price {
  font-weight: 600; font-size: 14px;
  text-align: right;
}
.cart-line .cl-remove {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); text-decoration: underline; text-underline-offset: 4px;
  display: block; text-align: right;
}
.cart-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cart-summary div { display: flex; justify-content: space-between; font-size: 13px; }
.cart-summary .total { font-size: 16px; font-weight: 600; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }

/* Search overlay */
.search-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--ivory);
  z-index: 60;
  transform: translateY(-100%);
  transition: transform .42s var(--ease);
  padding: 30px 40px 60px;
  border-bottom: 1px solid var(--line);
}
.search-overlay.open { transform: translateY(0); }
.search-overlay .row { display: flex; gap: 24px; align-items: center; }
.search-overlay input[type="search"] {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--serif); font-size: clamp(36px, 5vw, 64px);
  font-weight: 300; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--ink);
}
.search-overlay input::placeholder { color: var(--mute-2); font-style: italic; }
.search-overlay .close {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.search-overlay .suggestions {
  margin-top: 36px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px;
}
.search-overlay .suggestions h5 {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 16px;
}
.search-overlay .suggestions ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.search-overlay .suggestions ul a { font-family: var(--serif); font-size: 22px; }
.search-overlay .suggestions ul a:hover { color: var(--rose); font-style: italic; }
@media (max-width: 720px) {
  .search-overlay { padding: 22px 20px 40px; }
  .search-overlay .suggestions { grid-template-columns: 1fr; gap: 30px; margin-top: 24px; }
}

/* Mobile menu */
.mmenu {
  position: fixed; top: 0; left: 0; height: 100%;
  width: 100%; max-width: 100vw;
  background: var(--ivory);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .42s var(--ease);
  display: flex; flex-direction: column;
}
.mmenu.open { transform: translateX(0); }
.mmenu .dh { padding: 18px 20px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; }
.mmenu .dh .close { font-size: 22px; line-height: 1; }
.mmenu .body { flex: 1; overflow-y: auto; padding: 30px 20px; }
.mmenu .body a.mlink {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 34px; font-weight: 300;
}
.mmenu .body a.mlink em { color: var(--rose); font-style: italic; font-size: 14px; font-family: var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.mmenu .ftools {
  padding: 24px 20px; border-top: 1px solid var(--line); background: var(--ivory-2);
  display: flex; gap: 18px; flex-direction: column;
}
.mmenu .ftools a {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
}

/* ─── BUTTON SYSTEM ─── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 30px;
  background: var(--ink); color: var(--ivory);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--ink);
  transition: all .25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn .arrow { transition: transform .25s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ivory); }
.btn.inv { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn.inv:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.btn.sm { padding: 12px 22px; font-size: 10px; }

.link-arrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
  display: inline-flex; gap: 10px; align-items: center;
  transition: gap .25s, color .25s;
}
.link-arrow:hover { gap: 16px; color: var(--rose); border-color: var(--rose); }

/* ─── HERO ─── */
.hero {
  padding: 40px 0 70px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr 0.7fr;
  gap: 50px;
  align-items: end;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 11vw, 184px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero h1 em { font-style: italic; font-weight: 300; color: var(--rose); }
.hero h1 .apos {
  color: var(--rose); display: inline-block;
  transform: translateY(-0.08em);
}
.hero-side { padding-bottom: 12px; max-width: 360px; }
.hero .tagline {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 22px;
}
.hero .body {
  font-size: 14px; line-height: 1.7; color: var(--ink-2);
  margin-bottom: 28px;
}
.hero-img {
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(135deg, var(--ivory-2) 0 22px, var(--ivory) 22px 44px);
  position: relative;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.hero-img .corners::before,
.hero-img .corners::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--ink);
}
.hero-img .corners::before { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.hero-img .corners::after { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.hero-img .stamp {
  position: absolute; bottom: 24px; left: 24px;
  background: var(--ivory); padding: 10px 14px;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--mute);
  line-height: 1.5;
}
.hero-img .stamp b { color: var(--ink); display: block; font-weight: 500; }
.hero-img.has-photo { background: url(products/hero-main.png) center/cover no-repeat var(--ivory-2); }
.hero-img.has-photo .stamp { background: var(--ivory); }
.hero-img.has-photo .corners::before,
.hero-img.has-photo .corners::after { border-color: var(--ivory); opacity: 0.85; }

.hero-corner {
  position: absolute;
  right: 40px; top: 60px;
  text-align: right;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mute); line-height: 1.8;
}
.hero-corner .star { color: var(--rose); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-img { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-corner { display: none; }
  .hero { padding: 40px 0 50px; }
}

/* ─── EDITORIAL SPLIT ─── */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.split .img-slot {
  aspect-ratio: 4 / 5;
  background: url(products/portrait-signature.png) center/cover no-repeat var(--ivory-2);
  border-right: 1px solid var(--line);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.split .img-slot .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--mute);
  background: var(--ivory); padding: 8px 14px;
  border: 1px solid var(--line);
}
.split .img-slot .corners::before, .split .img-slot .corners::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--ink);
}
.split .img-slot .corners::before { top: 18px; left: 18px; border-right: none; border-bottom: none; }
.split .img-slot .corners::after { bottom: 18px; right: 18px; border-left: none; border-top: none; }
.split .text {
  padding: 90px 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.split .text .num {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--rose); margin-bottom: 24px;
}
.split .text h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05;
  margin-bottom: 28px; letter-spacing: -0.015em;
}
.split .text h2 em { color: var(--rose); font-style: italic; }
.split .text p { font-size: 14px; line-height: 1.78; color: var(--ink-2); max-width: 440px; margin-bottom: 18px; }
.split .text .sig {
  margin-top: 36px; font-family: var(--serif); font-style: italic; font-size: 19px;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split .img-slot { border-right: none; border-bottom: 1px solid var(--line); }
  .split .text { padding: 50px 24px; }
}

/* ─── LOOKBOOK (full-bleed editorial) ─── */
.lookbook { padding: 100px 0 110px; border-bottom: 1px solid var(--line); }
.lookbook .lh {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end; margin-bottom: 50px;
}
.lookbook h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 5.2vw, 88px); line-height: 1;
  letter-spacing: -0.02em;
}
.lookbook h3 em { color: var(--rose); font-style: italic; }
.lookbook .lh .meta { text-align: right; color: var(--mute); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; line-height: 2; }

.look-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}
.look { position: relative; overflow: hidden; cursor: pointer; }
.look .lim {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}
.look .lim .fill {
  position: absolute; inset: 0;
  transition: transform 1.2s var(--ease);
}
.look:hover .lim .fill { transform: scale(1.04); }
.look.l1 { grid-row: 1 / span 2; }
.look.l1 .lim { aspect-ratio: 4 / 5; }
.look.l1 .lim .fill { background: url(products/look-1.png) center/cover no-repeat; }
.look.l2 .lim .fill { background: url(products/look-2.png) center/cover no-repeat; }
.look.l3 .lim .fill { background: url(products/look-3.png) center/cover no-repeat; }
.look .corner-tag {
  position: absolute; top: 22px; left: 22px;
  background: var(--ivory); padding: 6px 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--ink);
}
.look.l3 .corner-tag { background: transparent; color: var(--ivory); border: 1px solid rgba(244,241,232,0.3); }
.look .caption {
  padding: 22px 0 0;
}
.look .caption .title {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  line-height: 1.1; margin-bottom: 6px;
}
.look .caption .title em { color: var(--rose); font-style: italic; }
.look .caption .meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
  display: flex; gap: 18px;
}
.look .pin {
  position: absolute; bottom: 22px; right: 22px;
  background: var(--ivory); color: var(--ink);
  padding: 10px 16px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px);
  transition: all .3s var(--ease);
}
.look:hover .pin { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .look-grid { grid-template-columns: 1fr; }
  .look.l1 { grid-row: auto; }
  .lookbook { padding: 60px 0; }
}

/* ─── SECTION HEADERS ─── */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 50px; gap: 40px;
}
.section-head h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1; letter-spacing: -0.015em;
}
.section-head h3 em { color: var(--rose); font-style: italic; }
.section-head .meta {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--mute); text-align: right;
}

/* ─── CATEGORIES ─── */
.cats { padding: 100px 0 30px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card {
  background: var(--ivory-2);
  aspect-ratio: 3 / 4;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.cat-card .img-fill {
  position: absolute; inset: 0;
  transition: transform .9s var(--ease);
}
.cat-card:nth-child(1) .img-fill {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.3) 0%, transparent 50%),
    linear-gradient(180deg, #E8E1D2 0%, #DDD3BD 100%);
}
.cat-card:nth-child(2) .img-fill {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.2) 0%, transparent 50%),
    linear-gradient(180deg, #E5B5A8 0%, #C58B7C 100%);
}
.cat-card:nth-child(3) .img-fill {
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #2A2620 0%, #15130F 100%);
}
.cat-card:nth-child(3) .label-row { color: var(--ivory); }
.cat-card:nth-child(3) .arrow-circle { border-color: var(--ivory); color: var(--ivory); }
.cat-card:hover .img-fill { transform: scale(1.045); }

.cat-card .tag {
  position: absolute; top: 22px; left: 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  background: var(--ivory); padding: 6px 10px;
  border: 1px solid var(--line); z-index: 2;
}
.cat-card:nth-child(3) .tag {
  background: transparent; color: var(--ivory);
  border-color: rgba(244,241,232,0.3);
}

.cat-card .label-row {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 28px;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: var(--ink); z-index: 2;
}
.cat-card .label-row .name {
  font-family: var(--serif); font-weight: 300;
  font-size: 46px; line-height: 0.95; letter-spacing: -0.01em;
}
.cat-card .label-row .name em { font-style: italic; }
.cat-card .label-row .count {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 6px; opacity: 0.7;
}
.arrow-circle {
  width: 48px; height: 48px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
  flex-shrink: 0;
}
.cat-card:hover .arrow-circle { background: var(--ink); color: var(--ivory); }
.cat-card:nth-child(3):hover .arrow-circle { background: var(--ivory); color: var(--ink); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cats { padding: 60px 0 20px; }
}

/* ─── PRODUCTS ─── */
.products { padding: 100px 0; }
.pg {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 36px 24px;
}
.product { cursor: pointer; position: relative; }
.product .pimg {
  aspect-ratio: 4 / 5;
  background: var(--ivory-2);
  position: relative; margin-bottom: 18px; overflow: hidden;
}
.product .pimg .fill {
  position: absolute; inset: 0;
  transition: transform 1s var(--ease);
}
.product:hover .pimg .fill { transform: scale(1.04); }
.product:nth-child(1) .pimg .fill { background: linear-gradient(170deg, #E5B5A8, #C58B7C); }
.product:nth-child(2) .pimg .fill { background: linear-gradient(170deg, #ECE7DA, #C8C0AD); }
.product:nth-child(3) .pimg .fill { background: linear-gradient(170deg, #2A2620, #15130F); }
.product:nth-child(4) .pimg .fill { background: linear-gradient(170deg, #D9C5A8, #B69C7E); }
.product:nth-child(5) .pimg .fill { background: linear-gradient(170deg, #C8DAD5, #97AFA9); }
.product:nth-child(6) .pimg .fill { background: linear-gradient(170deg, #F2D8CF, #D9A89B); }
.product:nth-child(7) .pimg .fill { background: linear-gradient(170deg, #4A4239, #2A2620); }
.product:nth-child(8) .pimg .fill { background: linear-gradient(170deg, #EAE3D2, #B3AC9E); }

.product .badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ivory); padding: 5px 9px;
  color: var(--rose); font-weight: 500;
}
.product .wish {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ivory); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.85);
  transition: all .25s var(--ease);
  border: 1px solid var(--line);
}
.product:hover .wish { opacity: 1; transform: scale(1); }
.product .wish.on { background: var(--rose); color: var(--ivory); border-color: var(--rose); opacity: 1; transform: scale(1); }
.product .wish:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* Search live results */
.search-results { margin-top: 24px; display: none; }
.search-results.on { display: block; }
.sr-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: padding .2s;
}
.sr-item:hover { padding-left: 8px; }
.sr-item .sr-n { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.sr-item:hover .sr-n { color: var(--rose); }
.sr-item .sr-c { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.sr-empty { padding: 30px 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--mute); }
.product .swatches {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  display: flex; gap: 6px;
}
.product .swatches span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(21,19,15,0.2);
  cursor: pointer;
  transition: transform .2s;
}
.product .swatches span:hover { transform: scale(1.2); }
.product .sizes {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: rgba(244,241,232,0.97);
  backdrop-filter: blur(6px);
  padding: 14px 16px;
  display: flex; gap: 6px;
  opacity: 0; transform: translateY(100%);
  transition: all .3s var(--ease);
}
.product:hover .sizes { opacity: 1; transform: translateY(0); }
.product .sizes button {
  flex: 1; padding: 9px 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  border: 1px solid var(--line);
  background: var(--ivory);
  transition: all .15s;
}
.product .sizes button:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.product .sizes button.out { color: var(--mute-2); pointer-events: none; text-decoration: line-through; }

.product .pmeta {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.product .pname {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  line-height: 1.1; margin-bottom: 4px;
}
.product .pcat {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute);
}
.product .pprice {
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap;
}
.product .pprice .old {
  text-decoration: line-through; color: var(--mute);
  font-weight: 400; margin-right: 6px;
}
.product .reviews {
  margin-top: 6px;
  font-size: 11px; color: var(--mute);
  display: flex; align-items: center; gap: 6px;
}
.product .reviews .stars { color: var(--rose); letter-spacing: 1px; font-size: 10px; }

@media (max-width: 1100px) { .pg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pg { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } }

/* ─── PERSONALIZATION / MONOGRAMMING ─── */
.perso {
  background: var(--ivory-2);
  padding: 110px 0;
  border-bottom: 1px solid var(--line);
}
.perso-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.perso h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em;
  margin: 14px 0 24px;
}
.perso h3 em { color: var(--rose); font-style: italic; }
.perso p { font-size: 14px; line-height: 1.78; color: var(--ink-2); max-width: 460px; margin-bottom: 14px; }

.perso-vis {
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.perso-vis .stitch {
  position: absolute; inset: 30px;
  border: 1px dashed var(--line);
}
.perso-vis .demo {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.perso-vis .demo .ic {
  font-family: var(--serif); font-weight: 300;
  font-size: 110px; line-height: 1; color: var(--rose);
  letter-spacing: -0.05em;
}
.perso-vis .demo .ic .small { font-size: 50px; color: var(--ink); }
.perso-vis .demo .label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--mute); text-transform: uppercase;
}
.perso-input {
  display: flex; gap: 12px; margin-top: 16px; max-width: 380px;
  border: 1px solid var(--ink); padding: 4px;
}
.perso-input input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 12px 14px;
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  text-align: center; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.perso-input input::placeholder { color: var(--mute-2); }
.perso-input button {
  background: var(--ink); color: var(--ivory);
  padding: 0 22px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.perso-input button:hover { background: var(--rose); }
.perso .small {
  font-size: 11px; color: var(--mute); margin-top: 14px; letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .perso-grid { grid-template-columns: 1fr; gap: 40px; }
  .perso { padding: 60px 0; }
}

/* ─── SIGNATURE ─── */
.signature {
  background: var(--ink); color: var(--ivory);
  padding: 130px 0 120px;
  position: relative; overflow: hidden;
}
.signature .container { position: relative; z-index: 2; }
.signature .eyebrow {
  color: var(--blush);
  margin-bottom: 32px;
}
.signature .eyebrow::before { background: var(--blush); }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sig-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.2vw, 88px); line-height: 1; letter-spacing: -0.02em;
}
.sig-grid h2 em { color: var(--blush); font-style: italic; }
.sig-grid p { font-size: 15px; line-height: 1.8; color: rgba(244,241,232,0.78); margin-bottom: 18px; max-width: 470px; }
.sig-grid .big-mono {
  display: flex; justify-content: center; align-items: center;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(244,241,232,0.18);
  position: relative;
}
.sig-grid .big-mono::before, .sig-grid .big-mono::after {
  content: ""; position: absolute; background: var(--blush);
}
.sig-grid .big-mono::before { width: 1px; height: 36px; top: -1px; left: 50%; }
.sig-grid .big-mono::after { width: 36px; height: 1px; top: 50%; left: -1px; }
.sig-grid .big-mono::after, .sig-grid .big-mono::before { opacity: 0.7; }
.sig-watermark {
  position: absolute; right: -120px; bottom: -160px;
  opacity: 0.035; pointer-events: none;
  transform: rotate(-8deg);
}
@media (max-width: 900px) {
  .sig-grid { grid-template-columns: 1fr; gap: 50px; }
  .signature { padding: 70px 0; }
}

/* ─── ATELIER (craftsmanship steps) ─── */
.atelier { padding: 110px 0; border-bottom: 1px solid var(--line); }
.atel-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 50px;
}
.atel {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px 28px 36px;
  position: relative;
  transition: background .3s;
}
.atel:hover { background: var(--ivory-2); }
.atel .num {
  font-family: var(--serif); font-style: italic;
  font-size: 56px; font-weight: 300;
  color: var(--rose); line-height: 1;
  margin-bottom: 26px;
}
.atel h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: 26px; line-height: 1.1;
  margin-bottom: 14px;
}
.atel p { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.atel .when {
  margin-top: 22px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase;
  padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
}
@media (max-width: 900px) {
  .atel-grid { grid-template-columns: 1fr 1fr; }
  .atelier { padding: 60px 0; }
}
@media (max-width: 560px) {
  .atel-grid { grid-template-columns: 1fr; }
}

/* ─── COMMITMENTS STRIP ─── */
.strip {
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.strip .item {
  padding: 38px 30px;
  border-right: 1px solid var(--line);
  display: flex; gap: 18px; align-items: flex-start;
}
.strip .item:last-child { border-right: none; }
.strip .item .ix {
  font-family: var(--serif); font-style: italic;
  color: var(--rose); font-size: 14px; padding-top: 2px;
}
.strip .item h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; margin-bottom: 6px;
}
.strip .item p { font-size: 12px; color: var(--mute); line-height: 1.55; }
@media (max-width: 900px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip .item:nth-child(2n) { border-right: none; }
  .strip .item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ─── PRESS ─── */
.press {
  padding: 70px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.press .eyebrow { margin-bottom: 30px; }
.press-row {
  display: flex; flex-wrap: wrap; gap: 60px;
  justify-content: center; align-items: center;
}
.press-row .pr {
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  color: var(--mute);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity .25s, color .25s;
  white-space: nowrap;
}
.press-row .pr:hover { opacity: 1; color: var(--ink); }
.press-row .pr.upper { text-transform: uppercase; font-style: normal; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.18em; font-family: var(--sans); font-weight: 500; }

/* ─── JOURNAL ─── */
.journal { padding: 110px 0; border-bottom: 1px solid var(--line); }
.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jcard { cursor: pointer; }
.jcard .jimg {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--ivory-2) 0 14px, var(--ivory) 14px 28px);
  border: 1px solid var(--line);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.jcard .jimg .fill { position: absolute; inset: 0; transition: transform 1s var(--ease); }
.jcard:hover .jimg .fill { transform: scale(1.04); }
.jcard:nth-child(1) .jimg .fill { background: linear-gradient(180deg, #DDD3BD, #C8B89A); }
.jcard:nth-child(2) .jimg .fill { background: linear-gradient(180deg, #E5B5A8, #B89589); }
.jcard:nth-child(3) .jimg .fill { background: linear-gradient(180deg, #2A2620, #15130F); }
.jcard .jcat { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; font-weight: 500; }
.jcard .jtitle { font-family: var(--serif); font-size: 28px; font-weight: 300; line-height: 1.15; margin-bottom: 8px; letter-spacing: -0.005em; }
.jcard .jtitle em { color: var(--rose); font-style: italic; }
.jcard .jdate { font-size: 11px; color: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 900px) {
  .jgrid { grid-template-columns: 1fr; gap: 30px; }
  .journal { padding: 60px 0; }
}

/* ─── CONCIERGE ─── */
.concierge {
  background: var(--paper);
  padding: 100px 0;
  border-bottom: 1px solid var(--line);
}
.conc-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 80px; align-items: center;
}
.conc h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.4vw, 68px); line-height: 1.02;
  letter-spacing: -0.015em; margin: 14px 0 22px;
}
.conc h3 em { color: var(--rose); font-style: italic; }
.conc p { font-size: 14px; line-height: 1.78; color: var(--ink-2); max-width: 440px; margin-bottom: 14px; }

.conc-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 32px 36px;
}
.conc-card .ch {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.conc-card .ch h5 {
  font-family: var(--serif); font-weight: 400; font-size: 24px;
}
.conc-card .ch h5 em { color: var(--rose); font-style: italic; }
.conc-card .ch .free {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose); font-weight: 500;
}
.conc-card ul {
  list-style: none; display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 28px;
}
.conc-card li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.conc-card li::before {
  content: "·"; color: var(--rose);
  font-family: var(--serif); font-size: 24px; line-height: 0.5;
}
.conc-card .slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.conc-card .slot {
  padding: 12px 8px; text-align: center;
  border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.05em; font-weight: 500;
  cursor: pointer; transition: all .2s;
}
.conc-card .slot:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.conc-card .slot.disabled {
  color: var(--mute-2); pointer-events: none; text-decoration: line-through;
}
.conc-card .slot b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }

@media (max-width: 900px) {
  .conc-grid { grid-template-columns: 1fr; gap: 50px; }
  .concierge { padding: 60px 0; }
}

/* ─── NEWSLETTER ─── */
.news {
  background: var(--blush);
  padding: 110px 0;
  color: var(--ink);
  position: relative; overflow: hidden;
}
.news .ngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.news h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5vw, 80px); line-height: 1.02; letter-spacing: -0.02em;
}
.news h2 em { font-style: italic; }
.news .form {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 440px; margin-left: auto;
}
.news p { font-size: 14px; line-height: 1.7; margin-bottom: 6px; }
.news .row { display: flex; border-bottom: 1px solid var(--ink); }
.news .row input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--sans); font-size: 14px; padding: 14px 0;
  color: var(--ink);
}
.news .row input::placeholder { color: rgba(21,19,15,0.55); }
.news .row button {
  background: transparent; border: none; cursor: pointer;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  padding: 14px 0 14px 18px;
}
.news small { font-size: 11px; opacity: 0.72; }
.news .row.success input { color: var(--rose); }
@media (max-width: 900px) {
  .news .ngrid { grid-template-columns: 1fr; gap: 30px; }
  .news .form { margin-left: 0; }
  .news { padding: 60px 0; }
}

/* ─── INSTAGRAM / COMMUNITY ─── */
.community {
  padding: 90px 0 110px;
  border-bottom: 1px solid var(--line);
}
.community .sh { text-align: center; margin-bottom: 12px; }
.community h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.015em;
}
.community h3 em { color: var(--rose); font-style: italic; }
.community .tag {
  display: block; margin-top: 18px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute);
}
.community .tag b { color: var(--rose); font-weight: 500; }
.ig-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  margin-top: 40px;
}
.ig {
  aspect-ratio: 1; position: relative; overflow: hidden;
  cursor: pointer;
}
.ig .fill { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.ig:hover .fill { transform: scale(1.08); }
.ig::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(21,19,15,0); transition: background .25s;
}
.ig:hover::after { background: rgba(21,19,15,0.18); }
.ig:nth-child(1) .fill { background: linear-gradient(135deg, #E5B5A8, #C58B7C); }
.ig:nth-child(2) .fill { background: linear-gradient(135deg, #ECE7DA, #C8C0AD); }
.ig:nth-child(3) .fill { background: linear-gradient(135deg, #2A2620, #4A4239); }
.ig:nth-child(4) .fill { background: linear-gradient(135deg, #D9C5A8, #B69C7E); }
.ig:nth-child(5) .fill { background: linear-gradient(135deg, #C8DAD5, #97AFA9); }
.ig:nth-child(6) .fill { background: linear-gradient(135deg, #F2D8CF, #D9A89B); }
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .community { padding: 60px 0; }
}

/* ─── FOOTER ─── */
footer {
  background: var(--ink); color: var(--ivory);
  padding: 80px 0 30px;
}
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 50px; }
.fbrand .fmark { margin-bottom: 24px; }
.fbrand p { font-size: 13px; line-height: 1.7; color: rgba(244,241,232,0.65); max-width: 320px; margin-bottom: 24px; }
.fbrand .social {
  display: flex; gap: 14px;
}
.fbrand .social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(244,241,232,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.15em; font-weight: 500;
  transition: all .25s;
}
.fbrand .social a:hover { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.fcol h5 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 16px; margin-bottom: 22px;
  color: var(--blush);
}
.fcol ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fcol ul a { font-size: 13px; color: rgba(244,241,232,0.7); transition: color .2s; }
.fcol ul a:hover { color: var(--ivory); }

.fbottom {
  border-top: 1px solid rgba(244,241,232,0.12);
  margin-top: 70px; padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,241,232,0.45); gap: 20px; flex-wrap: wrap;
}
.fbottom .pay { display: flex; gap: 10px; flex-wrap: wrap; }
.fbottom .pay span {
  font-family: var(--mono); font-size: 10px;
  padding: 4px 8px; border: 1px solid rgba(244,241,232,0.25);
  letter-spacing: 0.08em;
}
.fbottom .country { display: flex; align-items: center; gap: 10px; }

@media (max-width: 1100px) {
  .fgrid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
  .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fbottom { flex-direction: column; align-items: flex-start; }
}

/* ─── REVEAL ANIMATIONS ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── BRAND MARK (logo image) ─── */
.brand-mark {
  display: block;
  object-fit: contain;
  height: 38px;
  width: auto;
  border-radius: 2px;
}
.brand-mark.sm { height: 28px; }
.brand-mark.md { height: 52px; }
.brand-mark.lg { height: 120px; }
.brand-mark.xl { height: 280px; }
@media (max-width: 720px) {
  .brand-mark { height: 32px; }
  .brand-mark.lg { height: 88px; }
  .brand-mark.xl { height: 200px; }
}

/* Brand mark wrapped on a dark surface · sits inside a cream tile to keep its
   own cream background blending in seamlessly, never look like a sticker. */
.brand-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ivory);
  padding: 24px;
  border-radius: 4px;
}
.brand-tile.lg { padding: 36px; }

/* ─── HELPERS ─── */
.divider { height: 1px; background: var(--line); margin: 0; }
.no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   TWEAKABLE MODES · palette transitions + rhythm overrides
   ═══════════════════════════════════════════════════════════════ */

/* Smooth palette transitions when a tweak swaps CSS vars */
body, nav.top, .marquee, .signature, .news, .perso, .concierge,
.atel, .conc-card, .perso-vis, .strip, .product .pimg, footer,
.cat-card, .jcard .jimg, .look .lim, .hero-img, .split .img-slot {
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.cat-card .img-fill, .product .pimg .fill,
.look .lim .fill, .jcard .jimg .fill, .ig .fill {
  transition: transform .9s var(--ease), background .45s var(--ease-out);
}

/* ── RHYTHM: BOUTIQUE ─────────────────────────────────────────
   Compresses the magazine-scale typography into a denser,
   more commerce-forward layout. Smaller hero, tighter sections,
   smaller product names, more cards visible in one screen. */
body.rhythm-boutique .hero { padding: 50px 0 60px !important; }
body.rhythm-boutique .hero h1 { font-size: clamp(56px, 7vw, 120px) !important; line-height: 0.92 !important; }
body.rhythm-boutique .hero .tagline { font-size: 22px !important; }
body.rhythm-boutique .hero .body { font-size: 13px !important; }

body.rhythm-boutique .section-head { margin-bottom: 32px !important; }
body.rhythm-boutique .section-head h3,
body.rhythm-boutique .lookbook h3 { font-size: clamp(30px, 3.4vw, 52px) !important; }
body.rhythm-boutique .perso h3,
body.rhythm-boutique .conc h3,
body.rhythm-boutique .split .text h2 { font-size: clamp(28px, 3.2vw, 48px) !important; }
body.rhythm-boutique .sig-grid h2,
body.rhythm-boutique .news h2 { font-size: clamp(32px, 3.6vw, 56px) !important; }

body.rhythm-boutique .lookbook,
body.rhythm-boutique .cats,
body.rhythm-boutique .products,
body.rhythm-boutique .perso,
body.rhythm-boutique .atelier,
body.rhythm-boutique .journal,
body.rhythm-boutique .concierge,
body.rhythm-boutique .news,
body.rhythm-boutique .community,
body.rhythm-boutique .signature {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

body.rhythm-boutique .pg {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px 14px !important;
}
@media (max-width: 1100px) {
  body.rhythm-boutique .pg { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  body.rhythm-boutique .pg { grid-template-columns: repeat(2, 1fr) !important; }
}
body.rhythm-boutique .product .pname { font-size: 16px !important; }
body.rhythm-boutique .product .pcat { font-size: 10px !important; }
body.rhythm-boutique .product .pprice { font-size: 13px !important; }
body.rhythm-boutique .product .pimg { margin-bottom: 12px !important; }

body.rhythm-boutique .split .text { padding: 56px 56px !important; }
body.rhythm-boutique .perso-grid,
body.rhythm-boutique .conc-grid,
body.rhythm-boutique .sig-grid,
body.rhythm-boutique .news .ngrid { gap: 50px !important; }

body.rhythm-boutique .atel-grid { gap: 14px !important; }
body.rhythm-boutique .atel { padding: 24px 22px 28px !important; }
body.rhythm-boutique .atel h4 { font-size: 21px !important; }
body.rhythm-boutique .atel p { font-size: 12px !important; }
body.rhythm-boutique .atel .num { font-size: 42px !important; margin-bottom: 18px !important; }

/* In Brutaliste type pair, knock back the heavy italic flourish on
   "em" so the bolder serif doesn't overwhelm */
html[data-type="brutaliste"] em { font-style: italic; font-weight: 400; }

/* Option B / E (Bodoni, Playfair) - soften heavy serif italics via switcher */
html[data-typo="B"] em, html[data-typo="E"] em { font-weight: var(--em-weight, 400); }
html[data-typo="B"] .hero h1, html[data-typo="E"] .hero h1 { font-weight: 400; }
html[data-type="parisien"] em { font-weight: 400; }

/* Hero apostrophe · adapt to type pair weight */
html[data-type="brutaliste"] .hero h1,
html[data-type="parisien"] .hero h1 { font-weight: 400 !important; }

/* ═══════════════════════════════════════════════════════════════
   PAGE TEMPLATES · Collection / Produit / Journal / Article / Compte
   ═══════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.crumb {
  padding: 22px 0 16px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
}
.crumb a:hover { color: var(--rose); }
.crumb .sep { margin: 0 10px; color: var(--mute-2); }
.crumb .here { color: var(--ink); }

/* ── COLLECTION PAGE ────────────────────────────────────────── */
.col-hero {
  padding: 30px 0 56px;
  border-bottom: 1px solid var(--line);
}
.col-hero .ch {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: end;
}
.col-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(64px, 9vw, 156px);
  line-height: 0.88; letter-spacing: -0.025em;
}
.col-hero h1 em { font-style: italic; color: var(--rose); }
.col-hero .lede {
  font-family: var(--serif); font-size: 22px;
  line-height: 1.4; font-style: italic; font-weight: 300;
  max-width: 460px; margin-bottom: 22px;
}
.col-hero .meta {
  display: flex; gap: 32px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
}
.col-hero .meta b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .col-hero .ch { grid-template-columns: 1fr; gap: 30px; }
  .col-hero { padding: 18px 0 36px; }
}

/* Filters bar */
.filters {
  position: sticky; top: 66px; z-index: 20;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  transition: top .3s;
}
nav.top.scrolled + .filters { top: 50px; }
.filters .fr {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip {
  padding: 9px 16px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--ivory);
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.fchip:hover { border-color: var(--ink); }
.fchip.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.fchip .x { font-size: 10px; opacity: 0.7; }
.fchip .v { color: var(--mute); margin-left: 4px; }
.fchip.on .v { color: var(--blush); }
.filters .right { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.filters .right .count { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.filters .sort-select {
  background: transparent; border: 1px solid var(--line);
  padding: 9px 36px 9px 16px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%2315130F' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.filter-mobile-trigger { display: none; }

@media (max-width: 720px) {
  .filters .fr { gap: 12px; }
  .filter-chips { display: none; }
  .filter-mobile-trigger {
    display: inline-flex; gap: 10px; align-items: center;
    padding: 11px 18px;
    border: 1px solid var(--ink);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
    background: var(--ivory);
  }
  .filter-mobile-trigger .count { background: var(--ink); color: var(--ivory); padding: 2px 6px; border-radius: 999px; font-size: 9px; }
  .filters .sort-select { padding: 11px 36px 11px 14px; }
  .filters .right .count { display: none; }
  .filters { top: 58px; }
}

/* Filter bottom sheet (mobile) */
.fsheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ivory);
  z-index: 60;
  transform: translateY(100%);
  transition: transform .42s var(--ease);
  max-height: 88vh; overflow-y: auto;
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  padding: 28px 22px 24px;
}
.fsheet.open { transform: translateY(0); }
.fsheet .grab {
  width: 40px; height: 4px;
  background: var(--line); border-radius: 2px;
  margin: -10px auto 22px;
}
.fsheet h4 {
  font-family: var(--serif); font-weight: 400; font-size: 26px;
  margin-bottom: 6px;
}
.fsheet .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.fsheet .head button.close {
  font-size: 22px; line-height: 1;
}
.fsheet .group { padding: 18px 0; border-top: 1px solid var(--line); }
.fsheet .group h5 {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 12px;
}
.fsheet .group .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fsheet .opt {
  padding: 10px 14px; border: 1px solid var(--line);
  font-size: 12px; cursor: pointer; transition: all .2s;
}
.fsheet .opt.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.fsheet .footer-actions {
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.col-grid {
  padding: 36px 0 90px;
}

.empty-state {
  padding: 80px 20px; text-align: center;
}
.empty-state .ic {
  font-family: var(--serif); font-style: italic; font-size: 52px;
  color: var(--rose); margin-bottom: 16px;
}
.empty-state p { font-size: 14px; color: var(--mute); max-width: 380px; margin: 0 auto 22px; }

/* ── PRODUIT (single product) ───────────────────────────────── */
.prod-page {
  padding: 16px 0 80px;
}
.prod-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.prod-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  position: sticky; top: 96px;
}
.gallery-thumbs {
  display: flex; flex-direction: column; gap: 10px;
}
.gallery-thumbs button {
  width: 80px; height: 100px;
  border: 1px solid var(--line);
  background: var(--ivory-2);
  position: relative; overflow: hidden;
  cursor: pointer; padding: 0;
}
.gallery-thumbs button.on { border-color: var(--ink); border-width: 2px; }
.gallery-thumbs button .gf { position: absolute; inset: 0; }
.gallery-main {
  aspect-ratio: 4 / 5;
  background: var(--ivory-2);
  position: relative;
  overflow: hidden;
}
.gallery-main .gf {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #E5B5A8, #C58B7C);
}
.gallery-main .gf.v2 { background: radial-gradient(ellipse at 50% 40%, #F2D8CF 0%, #C58B7C 70%); }
.gallery-main .gf.v3 { background: linear-gradient(20deg, #E5B5A8, #B8927F 50%, #7A4A3E 100%); }
.gallery-main .gf.v4 { background: linear-gradient(135deg, #ECE7DA 0%, #E5B5A8 100%); }
.gallery-main .gf.v5 { background: linear-gradient(220deg, #2A2620, #E5B5A8); }

.gallery-main .corners::before, .gallery-main .corners::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--ivory);
  opacity: 0.6;
}
.gallery-main .corners::before { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.gallery-main .corners::after { bottom: 22px; right: 22px; border-left: none; border-top: none; }
.gallery-main .label {
  position: absolute; bottom: 22px; left: 22px;
  background: var(--ivory); padding: 8px 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--mute);
}
.gallery-main .zoom {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px;
  background: var(--ivory); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s;
}
.gallery-main .zoom:hover { background: var(--ink); color: var(--ivory); }

.prod-info {
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 96px;
}
.prod-info .meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 10px;
}
.prod-info h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.prod-info h1 em { color: var(--rose); font-style: italic; }
.prod-info .reviews-row {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 22px;
  font-size: 12px; color: var(--mute);
  letter-spacing: 0.06em;
}
.prod-info .reviews-row .stars { color: var(--rose); letter-spacing: 1px; }
.prod-info .price {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1;
  margin-bottom: 6px;
}
.prod-info .price .old { color: var(--mute); text-decoration: line-through; font-size: 22px; margin-right: 10px; }
.prod-info .price-sub {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 28px;
}
.prod-info .desc {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.5;
  margin-bottom: 26px; color: var(--ink-2);
}

.opt-block { margin-bottom: 22px; }
.opt-block .ol {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 12px;
}
.opt-block .ol b { font-weight: 500; }
.opt-block .ol a { color: var(--rose); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.opt-colors { display: flex; gap: 12px; flex-wrap: wrap; }
.opt-color {
  position: relative; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line);
  transition: transform .2s;
}
.opt-color:hover { transform: scale(1.08); }
.opt-color.on::before {
  content: ""; position: absolute; inset: -5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.opt-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.opt-size {
  min-width: 56px; padding: 12px 8px;
  text-align: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--line);
  background: var(--ivory);
  cursor: pointer; transition: all .15s;
}
.opt-size:hover { border-color: var(--ink); }
.opt-size.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.opt-size.out { color: var(--mute-2); text-decoration: line-through; pointer-events: none; }

.opt-perso {
  background: var(--ivory-2); padding: 18px 20px;
  margin-bottom: 22px;
}
.opt-perso .header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.opt-perso .header b { font-family: var(--serif); font-size: 18px; }
.opt-perso .header em { font-style: italic; color: var(--rose); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.opt-perso p { font-size: 12px; color: var(--mute); line-height: 1.5; margin-bottom: 12px; }
.opt-perso .row { display: flex; gap: 8px; }
.opt-perso input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--serif); font-size: 18px;
  text-align: center; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ivory);
}
.opt-perso button {
  padding: 0 18px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  background: transparent; border: 1px solid var(--ink);
}
.opt-perso button.on { background: var(--ink); color: var(--ivory); }

.cta-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  margin: 24px 0 18px;
}
.cta-row .btn { width: 100%; justify-content: center; padding: 19px 30px; }
.cta-row .wishbtn {
  width: 56px; height: 100%; min-height: 56px;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  background: var(--ivory);
}
.cta-row .wishbtn:hover { background: var(--ink); color: var(--ivory); }

.prod-promise {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; color: var(--ink-2);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.prod-promise .pp { display: flex; gap: 12px; align-items: flex-start; }
.prod-promise .pp .ix {
  font-family: var(--serif); font-style: italic; color: var(--rose);
  width: 18px;
}

/* Accordion */
.accord { margin-top: 36px; border-top: 1px solid var(--line); }
.acc {
  border-bottom: 1px solid var(--line);
}
.acc summary {
  padding: 20px 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; font-family: var(--serif); font-weight: 300;
  font-size: 26px; transition: transform .25s;
}
.acc[open] summary::after { content: "−"; }
.acc .ab { padding: 0 0 22px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.acc .ab ul { padding-left: 16px; margin-top: 8px; }
.acc .ab li { margin-bottom: 4px; }

/* Sticky mobile CTA */
.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 30;
  gap: 12px;
  align-items: center;
}
.sticky-cta .sp {
  display: flex; flex-direction: column; gap: 2px;
}
.sticky-cta .sp .sname {
  font-family: var(--serif); font-size: 17px; line-height: 1;
}
.sticky-cta .sp .sprice { font-size: 13px; font-weight: 600; }
.sticky-cta .btn { padding: 14px 22px; flex: 1; justify-content: center; }

@media (max-width: 900px) {
  .prod-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-gallery { grid-template-columns: 1fr; position: static; }
  .gallery-thumbs {
    flex-direction: row; order: 2;
    overflow-x: auto; padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .gallery-thumbs button { flex-shrink: 0; scroll-snap-align: start; }
  .prod-info { position: static; }
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 84px; }
}

/* Product page · related */
.related { padding: 70px 0 100px; border-top: 1px solid var(--line); }

/* ── JOURNAL INDEX ──────────────────────────────────────────── */
.j-hero {
  padding: 50px 0 70px;
  border-bottom: 1px solid var(--line);
}
.j-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.9; letter-spacing: -0.025em;
}
.j-hero h1 em { color: var(--rose); font-style: italic; }
.j-hero .lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.4;
  max-width: 540px; margin-top: 20px;
}
.j-cats {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 30px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
}
.j-cats a { padding: 4px 0; border-bottom: 1px solid transparent; }
.j-cats a.on { border-color: var(--ink); }
.j-cats a:not(.on) { color: var(--mute); }
.j-cats a:hover { color: var(--rose); border-color: var(--rose); }

.j-feature {
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.j-feature .ff {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 70px; align-items: center;
}
.j-feature .fimg {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #DDD3BD, #C8B89A 60%, #7A4A3E);
  position: relative; overflow: hidden;
}
.j-feature .fimg .corners::before, .j-feature .fimg .corners::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--ivory); opacity: 0.5;
}
.j-feature .fimg .corners::before { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.j-feature .fimg .corners::after { bottom: 22px; right: 22px; border-left: none; border-top: none; }
.j-feature .ftxt .pill {
  display: inline-block; padding: 5px 10px;
  background: var(--rose); color: var(--ivory);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  margin-bottom: 18px;
}
.j-feature .ftxt .cat {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose); font-weight: 500; margin-bottom: 14px;
}
.j-feature .ftxt h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1;
  letter-spacing: -0.015em; margin-bottom: 20px;
}
.j-feature .ftxt h2 em { color: var(--rose); font-style: italic; }
.j-feature .ftxt p { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 460px; margin-bottom: 22px; }
.j-feature .ftxt .au { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--mute); margin-bottom: 26px; }
.j-feature .ftxt .au .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--rose));
}
@media (max-width: 900px) {
  .j-feature .ff { grid-template-columns: 1fr; gap: 30px; }
}

.j-list { padding: 80px 0 100px; }
.j-list .jgrid { gap: 50px 28px; }
.j-list .jcard .jtitle { font-size: 32px; }

/* ── ARTICLE (long read) ────────────────────────────────────── */
.art-head {
  padding: 50px 0 30px;
  text-align: center;
}
.art-head .cat {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose); font-weight: 500; margin-bottom: 16px;
}
.art-head h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5.4vw, 88px); line-height: 1;
  letter-spacing: -0.02em;
  max-width: 880px; margin: 0 auto 20px;
}
.art-head h1 em { color: var(--rose); font-style: italic; }
.art-head .au {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  font-size: 12px; color: var(--mute); letter-spacing: 0.05em;
}
.art-head .au .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--rose));
}
.art-hero {
  aspect-ratio: 16 / 9;
  margin-top: 30px;
  background: linear-gradient(135deg, #DDD3BD 0%, #C8B89A 50%, #7A4A3E 100%);
}
.art-body {
  max-width: 680px; margin: 0 auto;
  padding: 70px 0 90px;
  font-family: var(--serif); font-size: 19px; line-height: 1.7;
  color: var(--ink-2);
}
.art-body p { margin-bottom: 20px; }
.art-body p.dropcap::first-letter {
  font-size: 80px; line-height: 0.85;
  float: left; margin: 8px 14px 0 0;
  font-family: var(--serif); font-weight: 400;
  color: var(--rose);
}
.art-body h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.01em;
  margin: 50px 0 22px;
  color: var(--ink);
}
.art-body h2 em { color: var(--rose); font-style: italic; }
.art-body blockquote {
  border-left: 1px solid var(--rose);
  padding: 8px 0 8px 24px;
  margin: 36px 0;
  font-style: italic; font-weight: 300;
  font-size: 24px; line-height: 1.4;
}
.art-body .pull-img {
  margin: 40px -60px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #E5B5A8, #B89589);
}
.art-body .caption {
  font-family: var(--mono); font-size: 11px;
  text-align: center; color: var(--mute);
  margin-top: 12px; letter-spacing: 0.08em;
}
@media (max-width: 720px) {
  .art-body { padding: 40px 20px 60px; font-size: 17px; }
  .art-body .pull-img { margin: 30px 0; }
}

/* ── COMPTE / LOGIN ─────────────────────────────────────────── */
.acc-page {
  min-height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.acc-vis {
  background: var(--ivory-2);
  background-image:
    radial-gradient(ellipse at 30% 20%, var(--blush-2) 0%, transparent 50%),
    linear-gradient(180deg, var(--blush) 0%, var(--rose) 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 60px;
  color: var(--ink);
}
.acc-vis .quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.2;
  max-width: 480px;
}
.acc-vis .by {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 22px;
}
.acc-vis .mono-watermark {
  position: absolute; right: -80px; bottom: -120px;
  opacity: 0.18; pointer-events: none;
}

.acc-form {
  background: var(--ivory);
  padding: 70px 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.acc-form .tabs {
  display: flex; gap: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.acc-form .tabs button {
  padding: 14px 0;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  transition: all .2s;
  margin-bottom: -1px;
}
.acc-form .tabs button.on { color: var(--ink); border-color: var(--rose); }
.acc-form h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4vw, 56px); line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.acc-form h2 em { color: var(--rose); font-style: italic; }
.acc-form .lede {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  margin-bottom: 36px; max-width: 420px;
}
.acc-form .field { margin-bottom: 22px; }
.acc-form label {
  display: block;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 500;
  color: var(--ink-2);
}
.acc-form input {
  width: 100%; padding: 14px 0;
  background: transparent;
  border: none; border-bottom: 1px solid var(--line);
  font-size: 15px; outline: none;
  font-family: var(--sans);
  transition: border-color .2s;
}
.acc-form input:focus { border-color: var(--ink); }
.acc-form .row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: -10px; margin-bottom: 24px;
}
.acc-form .row label { display: flex; gap: 8px; align-items: center; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--mute); margin: 0; font-weight: 400; }
.acc-form .row a { font-size: 12px; color: var(--rose); text-decoration: underline; text-underline-offset: 4px; }
.acc-form .submit { margin-top: 8px; }
.acc-form .submit .btn { width: 100%; justify-content: center; padding: 18px; }
.acc-form .or {
  text-align: center; margin: 28px 0;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  position: relative;
}
.acc-form .or::before, .acc-form .or::after {
  content: ""; position: absolute; top: 50%;
  width: calc(50% - 40px); height: 1px; background: var(--line);
}
.acc-form .or::before { left: 0; }
.acc-form .or::after { right: 0; }
.acc-form .sso {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.acc-form .sso button {
  padding: 14px;
  border: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  background: var(--ivory);
  transition: all .2s;
}
.acc-form .sso button:hover { border-color: var(--ink); }
.acc-form .perks {
  margin-top: 32px;
  padding-top: 28px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  font-size: 12px; color: var(--mute);
}
.acc-form .perks div::before {
  content: "·"; color: var(--rose); margin-right: 8px;
}

@media (max-width: 900px) {
  .acc-page { grid-template-columns: 1fr; min-height: auto; }
  .acc-vis { padding: 40px 24px; aspect-ratio: 4 / 3; }
  .acc-form { padding: 50px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH · touch sizes, simplified layouts
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Tap targets */
  nav .utils button, .arrow-circle { min-height: 44px; min-width: 44px; }

  /* Hero typography mobile */
  .hero { padding: 36px 0 40px; }
  .hero .tagline { font-size: 21px; }
  .hero .body { font-size: 13px; }
  .hero-img { aspect-ratio: 4 / 5; max-height: 320px; margin-top: 6px; }

  /* Section heads · vertical stack on mobile */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head .meta { text-align: left; }
  .lookbook .lh { grid-template-columns: 1fr; gap: 18px; }
  .lookbook .lh .meta { text-align: left; }

  /* Section padding */
  .cats { padding: 50px 0 14px; }
  .products { padding: 60px 0; }
  .perso { padding: 60px 0; }
  .signature { padding: 60px 0; }
  .atelier { padding: 60px 0; }
  .journal { padding: 60px 0; }
  .concierge { padding: 60px 0; }
  .news { padding: 60px 0; }
  .community { padding: 50px 0 60px; }
  .lookbook { padding: 50px 0; }
  footer { padding: 50px 0 24px; }

  /* Product mobile */
  .product .pname { font-size: 18px; }
  .product .swatches span { width: 12px; height: 12px; }
  .product .badge { font-size: 9px; padding: 4px 7px; }
  .product .wish { opacity: 1; transform: none; }
  .product .sizes { display: none; }

  /* Cat card mobile */
  .cat-card .label-row .name { font-size: 38px; }
  .cat-card .label-row { padding: 22px 22px; }

  /* Concierge slots · 3 cols on phone */
  .conc-card { padding: 26px 22px; }
  .conc-card .slots { grid-template-columns: 1fr 1fr 1fr; }

  /* Press · wrap nicely */
  .press-row { gap: 28px 32px; }

  /* Drawer full width */
  .drawer { width: 100vw; }

  /* Filters bar · sticky height adapts */
  nav.top { padding: 12px 20px; }

  /* Footer simplification */
  .fgrid { grid-template-columns: 1fr; gap: 40px; }
  .fbottom { gap: 14px; }

  /* Hero h1 on mobile · give the apostrophe air */
  .hero h1 { letter-spacing: -0.02em; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT IMAGES · map each named product to its rendered polo
   ═══════════════════════════════════════════════════════════════ */
.product .pimg .fill { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: var(--ivory-2); }

.product[data-name="Polo Colette"]      .pimg .fill { background-image: url(products/polo-blush.png) !important;        background: url(products/polo-blush.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Augustin"]   .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Léon"]         .pimg .fill { background: url(products/polo-encre.png) center/contain no-repeat #E8E2D0 !important; }
.product[data-name="Polo Sauge"]        .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Margaux"]      .pimg .fill { background: url(products/polo-rose-poudre.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Léa"]          .pimg .fill { background: url(products/polo-encre.png) center/contain no-repeat #E8E2D0 !important; }
.product[data-name="Polo Camille"]      .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Hélène"]       .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Lucie"]        .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Suzanne"]    .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Joséphine"]  .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Cardigan Béatrice"] .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Cardigan Henri"]    .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #E8E2D0 !important; }

/* Homme polos */
.product[data-name="Polo François"]     .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Édouard"]      .pimg .fill { background: url(products/polo-encre.png) center/contain no-repeat #E8E2D0 !important; }
.product[data-name="Polo Albert"]       .pimg .fill { background: url(products/polo-blush.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Maxime"]       .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Antoine"]      .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Charles"]    .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Émile"]      .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #F4ECD9 !important; }

/* Enfant · same polo silhouette in kid colors */
.product[data-name="Polo Alice"]        .pimg .fill { background: url(products/polo-rose-poudre.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Théo"]         .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Jules"]        .pimg .fill { background: url(products/polo-bois-de-rose.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Gabin"]        .pimg .fill { background: url(products/polo-encre.png) center/contain no-repeat #E8E2D0 !important; }
.product[data-name="Polo Manon"]        .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Polo Louis"]        .pimg .fill { background: url(products/polo-ivory.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Robe Salomé"]       .pimg .fill { background: url(products/polo-blush.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Maille Antoine"]    .pimg .fill { background: url(products/polo-sauge.png) center/contain no-repeat #F4ECD9 !important; }
.product[data-name="Cardigan Rose"]     .pimg .fill { background: url(products/polo-rose-poudre.png) center/contain no-repeat #F4ECD9 !important; }

/* "Continuer à acheter" / related zones inherit naturally. */

/* iPad / tablet */
@media (min-width: 721px) and (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-img { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .perso-grid, .conc-grid, .news .ngrid { gap: 40px; }
  .split .text { padding: 60px 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE · refonte fine (≤ 600px)  ·  v2
   Confort tactile, hiérarchie, pas de débordement, lecture posée.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* anti-débordement global */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, video { max-width: 100%; height: auto; }

  /* Barre supérieure : marque centrée, plus compacte */
  nav.top { padding: 11px 16px; }
  nav.top.scrolled { padding: 9px 16px; }
  nav .brand .wordmark { font-size: 22px; }
  nav .brand .brand-mark.sm { height: 26px; }
  nav .menu-btn { min-height: 44px; min-width: 44px; }
  nav .utils { gap: 14px; }
  nav .utils button { min-height: 44px; min-width: 36px; }

  /* Marquee plus discret */
  .marquee { font-size: 9.5px; padding: 8px 0; letter-spacing: 0.16em; }

  /* Fil d'ariane compact */
  .crumb { padding: 14px 0 10px; font-size: 10px; letter-spacing: 0.12em; }
  .crumb .sep { margin: 0 6px; }

  /* Conteneur : marge resserrée */
  .container { padding: 0 16px; }

  /* HERO mobile : titre maîtrisé */
  .hero { padding: 24px 0 34px; }
  .hero h1 { font-size: clamp(46px, 17vw, 76px); line-height: 0.92; }
  .hero .tagline { font-size: 19px; }
  .hero .body { font-size: 13.5px; }
  .hero .btn { width: 100%; justify-content: center; }

  /* Boutons pleine largeur, cible 50px */
  .btn { padding: 16px 22px; min-height: 50px; justify-content: center; }
  .hero-side .btn, .section-head .btn { width: 100%; }

  /* Titres de section : échelle lisible + empilage */
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head h3, .lookbook h3, .perso h3, .signature h2,
  .news h2, .journal h3 { font-size: clamp(34px, 10vw, 46px) !important; line-height: 1; }
  .section-head .link-arrow { font-size: 12px; }

  /* Grille produits : 2 colonnes serrées mais respirables */
  .pg { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .product .pname { font-size: 17px; }
  .product .pcat { font-size: 10px; }
  .product .pprice { font-size: 13px; }
  .product .wish { opacity: 1; transform: none; width: 38px; height: 38px; }
  .product .badge { font-size: 9px; padding: 4px 8px; }
  .product .sizes, .product .quick { display: none; }

  /* Cartes catégories : hauteur maîtrisée, nom lisible */
  .cat-card { aspect-ratio: 3 / 4; }
  .cat-card .label-row { padding: 20px 18px; }
  .cat-card .label-row .name { font-size: 34px; }
  .arrow-circle { width: 46px; height: 46px; }

  /* Éditorial / split : padding doux */
  .split .text { padding: 40px 20px; }
  .split .text h2 { font-size: clamp(32px, 9vw, 44px); }

  /* Bandes d'engagement : une colonne nette */
  .strip { grid-template-columns: 1fr; }
  .strip .item { border-right: none; border-bottom: 1px solid var(--line); padding: 22px 18px; }
  .strip .item:last-child { border-bottom: none; }

  /* Atelier / community : 2 puis 3 colonnes */
  .atel-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }

  /* Newsletter : champ + bouton empilés */
  .news .form .row { flex-direction: column; align-items: stretch; gap: 10px; border-bottom: none; }
  .news .form .row input { border: 1px solid var(--ink); padding: 14px 16px; }
  .news .form .row button { background: var(--ink); color: var(--ivory); padding: 15px; min-height: 50px; }

  /* Footer : 2 colonnes, marque pleine largeur */
  .fgrid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .fbrand { grid-column: 1 / -1; }
  .fcol h5 { font-size: 13px; }
  .fcol ul a { font-size: 13px; padding: 3px 0; display: inline-block; }
  .fbottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fbottom .pay { flex-wrap: wrap; }

  /* Drawers / overlays : plein écran confortable */
  .drawer { width: 100vw; max-width: 100vw; }
  .mmenu { width: 100vw; max-width: 100vw; }
  .mmenu .mlink { font-size: 30px; padding: 14px 0; }
  .search-overlay .row input { font-size: 24px; }

  /* Collection : hero + filtres */
  .col-hero { padding: 14px 0 26px; }
  .col-hero h1 { font-size: clamp(48px, 16vw, 80px); }
  .col-hero .lede { font-size: 17px; }
  .col-hero .meta { gap: 22px; font-size: 10px; }
  .filters .fr { flex-wrap: wrap; gap: 10px; }
  .filter-mobile-trigger { min-height: 46px; }
  .sort-select { min-height: 46px; }

  /* Fiche produit : galerie + achat */
  .prod-info h1 { font-size: clamp(34px, 10vw, 50px); }
  .prod-info .price { font-size: 30px; }
  .opt-size { min-height: 48px; min-width: 52px; }
  .opt-color { width: 42px; height: 42px; }
  .cta-row { grid-template-columns: 1fr; }
  .cta-row .wishbtn { width: 100%; min-height: 52px; }
  .sticky-cta { padding: 10px 14px; }
  .sticky-cta .btn { padding: 14px 18px; min-height: 48px; }

  /* Article : lecture confortable */
  .art-head h1 { font-size: clamp(34px, 11vw, 58px); }
  .art-body { font-size: 17px; line-height: 1.75; }
  .art-body p.dropcap::first-letter { font-size: 62px; }

  /* Tweaks / typo switcher : ne pas masquer le contenu */
  #fl-typo-switch { left: 10px; bottom: 10px; width: 188px; }
}

/* Très petits écrans (≤ 380px) : une colonne produits */
@media (max-width: 380px) {
  .pg { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: clamp(40px, 16vw, 58px); }
}

/* Respecter la préférence de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}