/* Hayu Modest — THE VAULT · design system.
   The jewel-box vitrine. Deep emerald surface, antique-gold hairline
   structure, rose-copper glow. Gilda Display for the ornate wordmark and
   headlines, Jost for the functional UI, Reem Kufi for Arabic.
   Signature systems: the ambient gold-dust field, the gold-hairline tiles
   that "open" on hover, reveal choreography, ornate frames. */

:root{
  --emerald:#0E2A24;   /* dominant surface / body */
  --teal:#123B34;      /* secondary panels, tiles */
  --teal-2:#0B211C;    /* deep wells, footer */
  --teal-3:#164A40;    /* lifted panels */
  --gold:#C6A15B;      /* frames, hairlines, wordmark, accents */
  --gold-2:#D8BC83;    /* brighter gold for highlights */
  --copper:#B87351;    /* secondary accent / hover glow */
  --cream:#F1E9DB;     /* type on dark */
  --cream-mut:rgba(241,233,219,.62);
  --cream-faint:rgba(241,233,219,.34);
  --hair:rgba(198,161,91,.34);       /* gold hairline */
  --hair-soft:rgba(198,161,91,.16);
  --hair-strong:rgba(198,161,91,.66);
  --ink:rgba(6,18,15,.55);           /* scrim ink over photos */
  --disp:'Gilda Display',serif;
  --sans:'Jost',sans-serif;
  --ar:'Reem Kufi',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  background:
    radial-gradient(120% 80% at 82% -6%, rgba(184,115,81,.10) 0%, transparent 46%),
    radial-gradient(110% 90% at 10% 4%, rgba(22,74,64,.55) 0%, transparent 52%),
    radial-gradient(140% 120% at 50% 120%, #0A1F1A 0%, transparent 60%),
    var(--emerald);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:var(--sans);color:inherit;}
::selection{background:var(--gold);color:var(--teal-2);}

/* ---------- utility type ---------- */
.lbl{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);text-indent:.42em;}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:1;}
.ar{font-family:var(--ar);}

/* a repeating gold diamond rule used to bracket headings */
.rule{display:inline-flex;align-items:center;gap:10px;color:var(--gold);}
.rule::before,.rule::after{content:'';height:1px;width:clamp(28px,6vw,64px);
  background:linear-gradient(90deg,transparent,var(--hair-strong));}
.rule::after{background:linear-gradient(90deg,var(--hair-strong),transparent);}
.rule .dia{width:5px;height:5px;transform:rotate(45deg);
  border:1px solid var(--gold);flex:none;}

/* ---------- the ambient gold-dust field ---------- */
#dust{position:fixed;inset:0;z-index:0;pointer-events:none;}
.page{position:relative;z-index:1;}

/* ---------- nav ---------- */
nav.vaultnav{
  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.4vw,44px);height:66px;
  background:rgba(10,29,24,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
nav.vaultnav .brand{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;line-height:1;
}
nav.vaultnav .brand .bw{font-family:var(--disp);font-size:22px;letter-spacing:.06em;color:var(--cream);}
nav.vaultnav .brand .bw b{color:var(--gold);font-weight:400;}
nav.vaultnav .brand small{font-family:var(--sans);font-weight:500;font-size:8.5px;
  letter-spacing:.44em;color:var(--gold);text-transform:uppercase;}
nav.vaultnav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);}
nav.vaultnav .links a{
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;color:var(--cream-mut);
  padding:6px 0;position:relative;transition:color .35s;
}
nav.vaultnav .links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
  transition:right .45s var(--ease);
}
nav.vaultnav .links a:hover,nav.vaultnav .links a.here{color:var(--cream);}
nav.vaultnav .links a:hover::after,nav.vaultnav .links a.here::after{right:0;}
nav.vaultnav .navr{display:flex;align-items:center;gap:14px;}
nav.vaultnav a.acct{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--hair);
  color:var(--cream);text-decoration:none;transition:border-color .35s,background .35s,color .35s;
}
nav.vaultnav a.acct:hover{border-color:var(--gold);color:var(--gold);}
nav.vaultnav a.acct svg{width:15px;height:15px;display:block;}
nav.vaultnav a.acct .acct-dot{
  display:none;position:absolute;top:-3px;right:-3px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}
nav.vaultnav a.acct.in .acct-dot{display:block;}
nav.vaultnav .bag{
  display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 18px;
  background:var(--gold);color:var(--teal-2);border:1px solid var(--gold);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
nav.vaultnav .bag:hover{background:transparent;color:var(--gold);}
@media (max-width:900px){
  nav.vaultnav{height:58px;padding:0 14px;gap:10px;}
  nav.vaultnav .brand .bw{font-size:18px;}
  nav.vaultnav .brand small{display:none;}
  nav.vaultnav .links a:not(:first-child){display:none;}
  nav.vaultnav .links{gap:0;min-width:0;}
  nav.vaultnav .links a{font-size:9px;letter-spacing:.18em;white-space:nowrap;}
  nav.vaultnav .navr{gap:9px;flex:none;}
  nav.vaultnav a.acct{width:32px;height:32px;}
  nav.vaultnav .bag{height:32px;padding:0 12px;font-size:8.5px;letter-spacing:.14em;white-space:nowrap;}
}

/* ---------- footer — the colophon ---------- */
footer.vaultfoot{
  background:var(--teal-2);color:var(--cream);
  padding:clamp(56px,9vw,120px) clamp(16px,3.4vw,48px) 34px;
  position:relative;overflow:hidden;border-top:1px solid var(--hair);
}
footer.vaultfoot::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hair-strong) 20%,var(--hair-strong) 80%,transparent);
}
footer.vaultfoot .fword{
  font-family:var(--disp);line-height:.86;text-align:center;
  font-size:clamp(64px,15vw,220px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--hair);
  user-select:none;
}
footer.vaultfoot .fword b{-webkit-text-stroke-color:var(--hair-strong);font-weight:400;}
footer.vaultfoot .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-soft);
}
footer.vaultfoot .fcol .lbl{margin-bottom:14px;}
footer.vaultfoot .fcol a{
  display:block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  color:var(--cream-mut);text-decoration:none;padding:5px 0;transition:color .3s;
}
footer.vaultfoot .fcol a:hover{color:var(--gold);}
footer.vaultfoot .fnote{
  margin-top:44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint);
}
footer.vaultfoot .far{font-family:var(--ar);font-size:19px;color:var(--gold);letter-spacing:0;text-transform:none;}

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

/* ---------- commerce atoms ---------- */
.chip-off{
  display:inline-block;padding:4px 10px;background:var(--gold);
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;color:var(--teal-2);
}
.scarce{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper);}
.gone{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);}
s.was{text-decoration-color:rgba(184,115,81,.7);color:var(--cream-faint);font-weight:400;margin-right:9px;}

/* wishlist hearts */
.wish{
  position:absolute;top:11px;right:11px;z-index:6;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(10,29,24,.62);border:1px solid var(--hair);
  color:var(--cream-mut);transition:color .3s,border-color .3s,background .3s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;
}
.wish svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;}
.wish:hover{color:var(--gold);border-color:var(--gold);}
.wish.in{color:var(--gold);border-color:var(--hair-strong);background:rgba(198,161,91,.16);}
.wish.in svg{fill:var(--gold);stroke:var(--gold);}
.wish.pop{animation:wishpop .45s cubic-bezier(.22,.9,.3,1.4);}
@keyframes wishpop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.wish.big{position:static;width:52px;height:52px;background:rgba(18,59,52,.4);}
.wish.big svg{width:17px;height:17px;}
@media (prefers-reduced-motion:reduce){.wish.pop{animation:none;}}

/* the gold action pill */
.pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;border:1px solid var(--gold);background:transparent;color:var(--gold);
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;overflow:hidden;transition:color .35s;isolation:isolate;cursor:pointer;
}
.pill::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.pill:hover:not(:disabled){color:var(--teal-2);}
.pill:hover:not(:disabled)::before{transform:translateY(0);}
.pill:disabled{opacity:.4;border-color:var(--cream-faint);color:var(--cream-faint);cursor:default;}
.pill:disabled::before{display:none;}
.pill.solid{background:var(--gold);color:var(--teal-2);border-color:var(--gold);}
.pill.solid::before{background:var(--gold-2);}
.pill.solid:hover:not(:disabled){color:var(--teal-2);}

/* ---------- shared page scaffolding ---------- */
.pgpad{padding-top:66px;}
@media (max-width:900px){.pgpad{padding-top:58px;}}
.wrap{max-width:1420px;margin:0 auto;padding-left:clamp(16px,3.4vw,48px);padding-right:clamp(16px,3.4vw,48px);}

/* an ornate gold-frame wrapper (double hairline) reused across the site */
.frame{position:relative;border:1px solid var(--hair);background:var(--teal);}
.frame::after{content:'';position:absolute;inset:5px;border:1px solid var(--hair-soft);pointer-events:none;z-index:2;}

/* ---------- section heads ---------- */
.sechead{max-width:1420px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(16px,3.4vw,48px) 0;text-align:center;}
.sechead .lbl{display:block;margin-bottom:16px;}
.sechead h2{font-family:var(--disp);font-size:clamp(30px,5.4vw,64px);line-height:1.02;color:var(--cream);}
.sechead h2 em{font-style:italic;color:var(--gold);}
.sechead p{margin:14px auto 0;max-width:52ch;font-size:13.5px;line-height:1.85;color:var(--cream-mut);}

/* ---------- seen recently strip ---------- */
.seen{max-width:1420px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,3.4vw,48px);}
.seen .lbl{margin-bottom:22px;display:block;}
.seengrid{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;}
.seengrid::-webkit-scrollbar{display:none;}
.seen .sn{width:150px;flex:none;text-decoration:none;}
.seen .sn .snf{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hair);background:var(--teal);}
.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(--disp);font-size:14px;line-height:1.25;color:var(--cream);}
.seen .sn .price{margin-top:3px;font-size:10.5px;letter-spacing:.12em;color:var(--gold);}

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

/* ═══════════ THE VITRINE — the gold-hairline tiles that open ═══════════
   Used on the home vitrine wall. Each tile is a framed setting in the case;
   on hover the gold frame draws in, the piece crossfades to its second
   photograph, and the quick-add rises. */
.vitrine{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(84px,10.5vw,132px);
  grid-auto-flow:dense;
  gap:clamp(7px,0.9vw,13px);
}
.tile{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  background:var(--teal);border:1px solid var(--hair);
  grid-column:span 3;grid-row:span 2;
}
.tile.t-big{grid-column:span 6;grid-row:span 4;}
.tile.t-tall{grid-column:span 3;grid-row:span 4;}
.tile.t-wide{grid-column:span 6;grid-row:span 2;}
.tile.t-std{grid-column:span 3;grid-row:span 2;}
.tile .tph{position:absolute;inset:0;overflow:hidden;}
.tile .tph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s ease,transform 1.1s var(--ease);}
.tile .tph img.talt{opacity:0;}
.tile:hover .tph img.tmain{transform:scale(1.06);}
.tile:hover .tph img.talt{opacity:1;transform:scale(1.06);}
/* the animated gold frame that draws in on hover */
.tile .tframe{position:absolute;inset:8px;z-index:3;pointer-events:none;
  border:1px solid transparent;opacity:0;
  transition:inset .6s var(--ease),opacity .5s ease,border-color .5s ease;}
.tile:hover .tframe,.tile:focus-visible .tframe{inset:11px;opacity:1;border-color:var(--hair-strong);}
/* corner ticks */
.tile .tframe::before,.tile .tframe::after{content:'';position:absolute;width:9px;height:9px;}
.tile .tframe::before{top:-1px;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);}
.tile .tframe::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}
/* permanent legibility scrim + info */
.tile .tscrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,18,15,.82) 0%,rgba(6,18,15,.28) 34%,transparent 62%);}
.tile .tmeta{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:14px 16px;transition:transform .55s var(--ease);}
.tile .tover{display:block;font-family:var(--sans);font-weight:500;font-size:8.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.tile .tname{font-family:var(--disp);font-size:clamp(14px,1.5vw,19px);line-height:1.12;color:var(--cream);}
.tile.t-big .tname{font-size:clamp(24px,3.2vw,42px);}
.tile .tar{font-family:var(--ar);font-size:12px;color:var(--gold);margin-top:2px;}
.tile .tprice{margin-top:7px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--cream);}
.tile.t-big .tprice{font-size:14px;}
.tile .tprice s{font-size:.86em;}
.tile .tchip{position:absolute;top:11px;left:11px;z-index:5;}
.tile .tgone{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:rgba(8,24,20,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  font-family:var(--disp);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
/* quick-add rail rises on hover; info lifts to make room */
.tile .tadd{position:absolute;left:0;right:0;bottom:0;z-index:5;height:40px;
  transform:translateY(101%);transition:transform .5s var(--ease);}
.tile:hover .tadd,.tile:focus-within .tadd{transform:translateY(0);}
.tile:hover .tmeta,.tile:focus-within .tmeta{transform:translateY(-40px);}
.tile .tadd .qbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--gold);border:none;color:var(--teal-2);
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;cursor:pointer;transition:background .3s;}
.tile .tadd .qbtn:hover{background:var(--gold-2);}
.tile .tadd .qsizes{position:absolute;inset:0;display:none;gap:1px;background:var(--hair-strong);}
.tile .tadd.sizing .qsizes{display:flex;}
.tile .tadd.sizing .qbtn{display:none;}
.tile .tadd .qsizes button{flex:1;background:var(--teal-3);border:none;color:var(--cream);
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s;}
.tile .tadd .qsizes button:hover:not(:disabled){background:var(--gold);color:var(--teal-2);}
.tile .tadd .qsizes button:disabled{color:var(--cream-faint);text-decoration:line-through;cursor:default;}
.tile .tadd .qsizes .qx{flex:0 0 38px;background:var(--teal-2);font-size:14px;}
@media (hover:none){
  .tile .tadd{transform:translateY(0);}
  .tile .tmeta{transform:translateY(-40px);}
  .tile .tframe{opacity:1;inset:11px;border-color:var(--hair-soft);}
}
/* mobile: fold the case into a tidy 4-col masonry (2-up feel) */
@media (max-width:640px){
  .vitrine{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(104px,30vw,150px);gap:8px;}
  .tile,.tile.t-std,.tile.t-tall{grid-column:span 2;grid-row:span 2;}
  .tile.t-big{grid-column:span 4;grid-row:span 3;}
  .tile.t-wide{grid-column:span 4;grid-row:span 2;}
}

/* ═══════════ shop / related — framed cards in a dense grid ═══════════ */
.card{position:relative;text-decoration:none;display:block;}
.card .ph{position:relative;overflow:hidden;background:var(--teal);border:1px solid var(--hair);aspect-ratio:4/5;}
.card .ph::after{content:'';position:absolute;inset:5px;border:1px solid transparent;pointer-events:none;z-index:4;
  transition:border-color .5s ease;}
.card:hover .ph::after,.card:focus-within .ph::after{border-color:var(--hair-soft);}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease,transform 1s var(--ease);}
.card .ph img.alt{opacity:0;}
.card:hover .ph img.main{transform:scale(1.04);}
.card:hover .ph img.alt{opacity:1;transform:scale(1.04);}
.card .ph .chip-off{position:absolute;left:11px;bottom:11px;z-index:5;}
.card .ph .goneveil{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  background:rgba(8,24,20,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  font-family:var(--disp);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.card .cinfo{margin-top:14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.card h3{font-family:var(--disp);font-size:clamp(17px,1.9vw,21px);line-height:1.16;color:var(--cream);}
.card .car{font-family:var(--ar);font-size:12px;color:var(--gold);margin-top:3px;}
.card .cprice{font-family:var(--sans);font-size:12px;letter-spacing:.06em;white-space:nowrap;color:var(--cream);}
.card .cmeta{margin-top:7px;min-height:15px;}
.card .qadd{margin-top:11px;height:38px;position:relative;}
.card .qadd .qbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:1px solid var(--hair);color:var(--gold);
  font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  cursor:pointer;opacity:1;transition:background .3s,color .3s,border-color .3s;}
.card .qadd .qbtn:hover{background:var(--gold);color:var(--teal-2);border-color:var(--gold);}
.card .qadd .qsizes{position:absolute;inset:0;display:none;gap:6px;}
.card .qadd.sizing .qsizes{display:flex;}
.card .qadd.sizing .qbtn{display:none;}
.card .qadd .qsizes button{flex:1;background:var(--teal);border:1px solid var(--hair);color:var(--cream);
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s;}
.card .qadd .qsizes button:hover:not(:disabled){background:var(--gold);color:var(--teal-2);border-color:var(--gold);}
.card .qadd .qsizes button:disabled{color:var(--cream-faint);text-decoration:line-through;cursor:default;}
.card .qadd .qsizes .qx{flex:0 0 38px;font-size:14px;}