/* Hayu Modest — MAISON · the shoppable magazine.
   Editorial ink surfaces, oxblood accent, antique-brass hairlines, warm-paper
   page-blocks. Fraunces mastheads, Newsreader italic captions, Inter Tight UI.
   Signature: shoppable hotspots on the campaign hero + look-bundle "Add all".
   Consumes only the public SARTU.* API via maison.js. */

:root{
  --ink:#14110F;        /* dominant dark field */
  --ink-2:#1D1916;      /* lifted panels on ink */
  --ink-3:#272119;      /* hairline-lifted blocks */
  --oxblood:#6E1D2B;    /* the brand accent */
  --oxblood-2:#8A2637;  /* hover / lift */
  --paper:#E8E1D6;      /* warm paper — insets + type on ink */
  --paper-2:#F3EDE3;    /* brighter page */
  --brass:#B08542;      /* hairline rules + small accents (restrained) */
  --brass-2:#C79E5C;
  --ash:#8A8178;        /* muted captions / meta */

  /* derived, on-ink */
  --pk:rgba(232,225,214,.60);   /* muted paper text */
  --pk-2:rgba(232,225,214,.34); /* faint paper text */
  --hair:rgba(176,133,66,.34);  /* brass hairline */
  --hair-2:rgba(232,225,214,.12);
  --ink-hair:rgba(20,17,15,.14);
  --ink-hair-2:rgba(20,17,15,.08);

  --disp:'Fraunces',serif;
  --ed:'Newsreader',serif;
  --ui:'Inter Tight',sans-serif;
  --ar:'Amiri',serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--ui);color:inherit;}
::selection{background:var(--oxblood);color:var(--paper-2);}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brass);
}
.kicker{
  font-family:var(--ui);font-weight:500;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ash);
}
.serif-it{font-family:var(--ed);font-style:italic;font-weight:400;}
.arch{font-family:var(--ar);}

/* focus visibility (quality floor) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--brass-2);outline-offset:3px;border-radius:1px;
}

/* ---------- paper texture (very light) ---------- */
#grain{
  position:fixed;inset:-40px;z-index:210;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ #grain{display:none;} }

/* ---------- nav ---------- */
nav.mnav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3.2vw,44px);height:66px;
  background:rgba(20,17,15,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--hair);
}
nav.mnav .brand{display:flex;align-items:baseline;gap:9px;line-height:1;}
nav.mnav .brand .bm{
  font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:.01em;
  color:var(--paper-2);font-optical-sizing:auto;
}
nav.mnav .brand .bs{
  font-family:var(--ui);font-weight:500;font-size:8.5px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--ash);
}
nav.mnav .links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);}
nav.mnav .links a{
  font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pk);padding:5px 0;position:relative;transition:color .3s;
}
nav.mnav .links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);
  transition:right .4s var(--ease);
}
nav.mnav .links a:hover,nav.mnav .links a.here{color:var(--paper-2);}
nav.mnav .links a:hover::after,nav.mnav .links a.here::after{right:0;}
nav.mnav .navr{display:flex;align-items:center;gap:14px;}
nav.mnav a.acct{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--hair);color:var(--paper);
  transition:border-color .3s,background .3s,color .3s;
}
nav.mnav a.acct:hover{border-color:var(--brass-2);background:rgba(176,133,66,.1);}
nav.mnav a.acct svg{width:15px;height:15px;display:block;}
nav.mnav a.acct .acct-dot{
  display:none;position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--oxblood-2);border:1px solid var(--ink);
}
nav.mnav a.acct.in .acct-dot{display:block;}
nav.mnav .bag{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 18px;
  background:var(--oxblood);color:var(--paper-2);
  font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s;
}
nav.mnav .bag:hover{background:var(--oxblood-2);}
nav.mnav .bag [data-cart-count]{font-variant-numeric:tabular-nums;}
@media (max-width:880px){
  nav.mnav{height:58px;padding:0 14px;gap:8px;}
  nav.mnav .brand .bm{font-size:17px;}
  nav.mnav .brand .bs{display:none;}
  nav.mnav .links a:not(.only-wide){display:none;}
  nav.mnav .links{gap:0;}
  nav.mnav a.acct{width:32px;height:32px;}
  nav.mnav .bag{height:32px;padding:0 12px;font-size:9px;letter-spacing:.14em;white-space:nowrap;}
}

/* ---------- page scaffolding ---------- */
.pgpad{padding-top:66px;}
@media (max-width:880px){.pgpad{padding-top:58px;}}
.wrap{max-width:1400px;margin:0 auto;padding-left:clamp(16px,3.2vw,44px);padding-right:clamp(16px,3.2vw,44px);}

/* section header used across pages */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.sechead .st{
  font-family:var(--disp);font-weight:900;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(30px,5vw,64px);color:var(--paper-2);font-optical-sizing:auto;
}
.sechead .st em{font-style:italic;font-weight:400;color:var(--brass-2);}
.sechead .sr{font-family:var(--ed);font-style:italic;font-size:clamp(15px,1.6vw,19px);color:var(--ash);max-width:32ch;text-align:right;}
@media (max-width:640px){.sechead .sr{text-align:left;}}

/* ---------- commerce atoms ---------- */
.chip-off{
  display:inline-flex;align-items:center;gap:.4em;padding:5px 10px;
  background:var(--oxblood);color:var(--paper-2);
  font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
.scarce{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);}
.gone{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);}
s.was{text-decoration-color:var(--oxblood-2);color:var(--ash);font-weight:400;margin-right:8px;}

/* the action pill — oxblood fill / brass outline */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:16px 32px;border:1px solid var(--brass);background:transparent;color:var(--paper-2);
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s;isolation:isolate;
}
.pill::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--oxblood);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.pill:hover::before{transform:translateY(0);}
.pill:hover{border-color:var(--oxblood);}
.pill:disabled{opacity:.4;cursor:default;border-color:var(--ash);}
.pill:disabled::before{display:none;}
.pill.solid{background:var(--oxblood);border-color:var(--oxblood);}
.pill.solid::before{background:var(--ink);}
.pill.solid:hover{color:var(--paper-2);border-color:var(--ink);}
/* on paper surfaces */
.on-paper .pill,.pill.ink{color:var(--ink);border-color:var(--ink);}
.on-paper .pill::before,.pill.ink::before{background:var(--oxblood);}
.on-paper .pill:hover,.pill.ink:hover{color:var(--paper-2);border-color:var(--oxblood);}

/* wishlist hearts */
.wish{
  position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(20,17,15,.55);border:1px solid var(--hair);color:var(--paper);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:color .3s,border-color .3s,background .3s;cursor:pointer;
}
.wish svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;}
.wish:hover{color:var(--paper-2);border-color:var(--brass-2);}
.wish.in{color:var(--oxblood-2);border-color:var(--oxblood-2);background:rgba(110,29,43,.28);}
.wish.in svg{fill:currentColor;stroke:var(--oxblood-2);}
.wish.pop{animation:wishpop .45s cubic-bezier(.22,.9,.3,1.4);}
@keyframes wishpop{0%{transform:scale(1)}40%{transform:scale(1.26)}100%{transform:scale(1)}}
.wish.big{position:static;width:54px;height:54px;background:rgba(20,17,15,.4);}
.wish.big svg{width:18px;height:18px;}
.on-paper .wish{background:rgba(232,225,214,.7);color:var(--ink);}
.on-paper .wish.in{background:rgba(110,29,43,.14);color:var(--oxblood);}
@media (prefers-reduced-motion:reduce){.wish.pop{animation:none;}}

/* ---------- reveal choreography ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.on{opacity:1;transform:none;}
[data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-stagger].on>*{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv,[data-stagger]>*{opacity:1;transform:none;transition:none;}
}

/* ---------- editorial marquee rule ---------- */
.rule{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  overflow:hidden;white-space:nowrap;padding:14px 0;background:var(--ink-2);
}
.rule .track{display:inline-flex;animation:marq 48s linear infinite;will-change:transform;}
.rule span{
  font-family:var(--disp);font-weight:400;font-style:italic;font-size:clamp(15px,2vw,24px);
  letter-spacing:.02em;color:var(--brass-2);padding-right:1.2em;
}
.rule span .dot{color:var(--ash);}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rule .track{animation:none;}}

/* ---------- seen recently strip (shared) ---------- */
.seen{max-width:1400px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,3.2vw,44px);}
.seen .lbl{display:block;margin-bottom:24px;}
.seengrid{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;}
.seengrid::-webkit-scrollbar{display:none;}
.seen .sn{width:150px;flex:none;}
.seen .sn .frame{aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);border:1px solid var(--hair-2);}
.seen .sn img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.seen .sn:hover img{transform:scale(1.05);}
.seen .sn h3{margin-top:10px;font-family:var(--ed);font-style:italic;font-weight:400;font-size:15px;line-height:1.3;color:var(--paper);}
.seen .sn .price{margin-top:2px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ash);}

/* generic label */
.lbl{font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);}

/* ---------- footer ---------- */
footer.mfoot{
  background:var(--ink);border-top:1px solid var(--hair);
  padding:clamp(56px,8vw,110px) clamp(16px,3.2vw,44px) 34px;
  position:relative;overflow:hidden;
}
footer.mfoot .fword{
  font-family:var(--disp);font-weight:900;line-height:.82;
  font-size:clamp(72px,17vw,260px);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--hair);
  user-select:none;white-space:nowrap;font-optical-sizing:auto;
}
footer.mfoot .fword em{font-style:italic;font-weight:400;-webkit-text-stroke:1px rgba(232,225,214,.16);}
footer.mfoot .frow{
  display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap;
  margin-top:clamp(30px,5vw,60px);padding-top:30px;border-top:1px solid var(--hair-2);
}
footer.mfoot .fcol .lbl{margin-bottom:14px;color:var(--brass);}
footer.mfoot .fcol a{
  display:block;font-family:var(--ui);font-size:12.5px;letter-spacing:.05em;
  color:var(--pk);padding:5px 0;transition:color .3s;
}
footer.mfoot .fcol a:hover{color:var(--paper-2);}
footer.mfoot .fnote{
  margin-top:44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-2);
}
footer.mfoot .far{font-family:var(--ar);font-size:19px;color:var(--brass-2);letter-spacing:0;text-transform:none;}

/* ---------- generic ink/paper section frames ---------- */
.band{padding:clamp(56px,8vw,120px) clamp(16px,3.2vw,44px);position:relative;}
.band.paper{background:var(--paper);color:var(--ink);}
.band.paper .lbl{color:var(--oxblood);}
.band.paper .kicker{color:var(--ash);}
.band .inner{max-width:1400px;margin:0 auto;}