/* ============================================================
   ORVELE - fine jewellery house
   Bespoke stylesheet (sits on top of Tailwind)
   ============================================================ */

:root{
  --ink:      #141319;   /* violet-cast black - the inside of a jewellery box */
  --ink-2:    #1C1B22;
  --ink-3:    #26242E;
  --bone:     #ECE7DF;
  --mute:     #9B958C;
  --gold:     #C9A96A;
  --gold-dim: #8A7345;
  --fire:     #AFC9DA;   /* diamond fire - micro-doses only */
  --paper:    #E6E4DE;

  --ease: cubic-bezier(.22,.68,.16,1);
  --rule: rgba(201,169,106,.22);
}

/* ---------- Base ---------- */
*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior: smooth; }

body{
  background: var(--ink);
  color: var(--bone);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--gold); color: #101014; }

:focus-visible{
  outline: 2px solid var(--fire);
  outline-offset: 3px;
  border-radius: 2px;
}

img{ display:block; max-width:100%; }

/* Grain - a very faint velvet texture */
.grain::after{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 60;
  opacity:.34;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- Typography ---------- */
.font-display{ font-variation-settings: "opsz" 144; }

.display-xl{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-variation-settings:"opsz" 144;
  line-height:.92;
  letter-spacing:-.028em;
  font-size: clamp(3.1rem, 11.2vw, 9.5rem);
}
/* Hero heading - held back compared with the collection titles, so the
   photograph beside it can breathe */
.display-hero{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-variation-settings:"opsz" 144;
  line-height:.98;
  letter-spacing:-.022em;
  font-size: clamp(2.9rem, 6vw, 5.6rem);
}

.display-lg{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-variation-settings:"opsz" 144;
  line-height:1;
  letter-spacing:-.024em;
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
}
.display-md{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-variation-settings:"opsz" 96;
  line-height:1.06;
  letter-spacing:-.02em;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
}
.display-sm{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  font-variation-settings:"opsz" 48;
  line-height:1.18;
  letter-spacing:-.012em;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}
.italic-soft{ font-style: italic; font-weight:300; }

/* Hallmark: the technical label struck into the metal */
.stamp{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--gold);
}
.stamp-dim{ color: var(--mute); }
.stamp-sm{ font-size:.62rem; letter-spacing:.24em; }

/* Aligned figures - prices, quantities, references */
.num{
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:500;
  letter-spacing:.04em;
}

.lede{
  font-size: clamp(1rem,1.15vw,1.12rem);
  line-height:1.75;
  color: rgba(236,231,223,.72);
  font-weight:300;
}

/* ---------- Hairlines ---------- */
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent); }
.rule-solid{ height:1px; background: var(--rule); }
.hair{ border-color: var(--rule) !important; }

/* Diagonal glint across surfaces (buttons, cards) */
.glint{ position:relative; overflow:hidden; isolation:isolate; }
.glint::after{
  content:"";
  position:absolute; top:-60%; bottom:-60%; left:-70%;
  width:38%;
  transform: skewX(-18deg) translateX(-160%);
  background: linear-gradient(90deg,transparent,rgba(255,246,226,.28),transparent);
  transition: transform .95s var(--ease);
  pointer-events:none;
}
.glint:hover::after,
.glint:focus-visible::after{ transform: skewX(-18deg) translateX(420%); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 1.9rem;
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid transparent;
  transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
  cursor:pointer;
}
.btn-gold{ background: var(--gold); color:#15141A; }
.btn-gold:hover{ background:#DCC28C; }

.btn-line{ border-color: rgba(201,169,106,.45); color: var(--bone); }
.btn-line:hover{ border-color: var(--gold); color: var(--gold); }

.btn-ink{ background: var(--ink); color: var(--bone); }
.btn-ink:hover{ background: var(--ink-3); }

.btn:disabled{ opacity:.42; cursor:not-allowed; }

/* Underline that draws itself in */
.link-draw{ position:relative; display:inline-block; }
.link-draw::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.link-draw:hover::after,
.link-draw[aria-current="page"]::after{ transform: scaleX(1); transform-origin:left; }
.link-draw[aria-current="page"]{ color: var(--gold); }

/* ---------- Header ---------- */
.site-head{
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background: rgba(20,19,25,.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--rule);
}
.site-head.on-paper:not(.is-stuck){ color: var(--ink); }

/* Mobile menu */
.menu-panel{
  position:fixed; inset:0; z-index:70;
  background: var(--ink);
  display:flex; flex-direction:column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  pointer-events:none;
}
.menu-panel.is-open{ clip-path: inset(0 0 0 0); pointer-events:auto; }
.menu-panel a{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.menu-panel.is-open a{ opacity:1; transform:none; }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Masked line rising into place. The mask lives on the wrapper, never on the
   observed element: a clip-path on the target zeroes its intersection area. */
.reveal-clip{
  display:block;
  overflow:hidden;
  padding: .10em 0 .18em;
  margin: -.10em 0 -.18em;
}
.reveal-clip > *{
  display:block;
  transform: translateY(118%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-clip.is-in > *{ transform: none; }

/* ---------- Velvet (backdrops behind the pieces) ---------- */
.velvet{
  background:
    radial-gradient(120% 85% at 50% 14%, rgba(201,169,106,.14), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(175,201,218,.07), transparent 60%),
    linear-gradient(180deg,#201E28 0%, #16151B 100%);
}
.velvet-soft{
  background:
    radial-gradient(110% 80% at 50% 20%, rgba(201,169,106,.10), transparent 65%),
    linear-gradient(180deg,#1D1C24 0%, #15141A 100%);
}

/* Product photograph */
.piece{
  width:100%; height:100%;
  display:block;
  object-fit: cover;
  object-position: center;
}

/* ---------- Hallmark marquee ---------- */
.marquee{ display:flex; width:max-content; animation: slide 42s linear infinite; }
.marquee-track:hover .marquee{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%) } }

/* Gradient scrim over a photograph, so the caption stays legible */
.scrim{
  position:absolute; inset:auto 0 0 0;
  height:46%;
  background: linear-gradient(to top, rgba(18,17,22,.88), rgba(18,17,22,.35) 45%, transparent);
  pointer-events:none;
}

/* ---------- Hero light stage ----------------------------------------------
   The claim is "nothing shines by accident", so light is the only thing this
   page animates. The frame is held back; a soft travelling mask over a second,
   lit copy decides what the light finds. No sparkle, no rays - just light. */

.hero-lit::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(58% 52% at 22% 44%, rgba(201,169,106,.07), transparent 70%);
}

/* No isolation and no clipping: the light is meant to spill past the column
   and blend with the page, the way light does. */
/* The piece is cut out of its backdrop, so it sits in the dark rather than on
   a photograph. Nothing here spins or sparkles; it only breathes. */
.stage-jewel{
  position:relative;
  z-index:1;
  display:block;
  width:86%;
  max-width:500px;
  margin-inline:auto;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.72));
  animation: jewel-float 11s ease-in-out infinite;
}
@keyframes jewel-float{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-11px) }
}

/* Travelling light: a single soft source, driven by the pointer in script */
.stage-light{
  position:absolute; top:0; left:0;
  width:620px; height:620px;
  z-index:2;
  pointer-events:none;
  mix-blend-mode: screen;
  will-change: transform;
  background: radial-gradient(circle closest-side,
    rgba(255,246,226,.20), rgba(201,169,106,.10) 42%, transparent 74%);
}

@media (max-width: 1023px){
  .stage-light{ width:400px; height:400px; }
}

/* ---------- Collection card ---------- */
.card-col{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--rule);
  transition: border-color .6s var(--ease), transform .6s var(--ease);
}
.card-col:hover{ border-color: rgba(201,169,106,.62); }
.card-col .card-media{ overflow:hidden; }
.card-col .card-media .piece{ transition: transform 1.2s var(--ease); }
.card-col:hover .card-media .piece{ transform: scale(1.06); }
.card-col .card-arrow{ transition: transform .55s var(--ease), opacity .55s var(--ease); opacity:.5; }
.card-col:hover .card-arrow{ transform: translateX(7px); opacity:1; }

/* ---------- Product card ---------- */
.card-prod{ display:block; position:relative; }
.card-prod .prod-media{
  position:relative; overflow:hidden;
  border:1px solid rgba(201,169,106,.14);
  transition: border-color .6s var(--ease);
}
.card-prod:hover .prod-media{ border-color: rgba(201,169,106,.45); }
.card-prod .prod-media .piece{ transition: transform 1.2s var(--ease), filter 1.2s var(--ease); filter: brightness(.94); }
.card-prod:hover .prod-media .piece{ transform: scale(1.06); filter: brightness(1.02); }
.card-prod .prod-quick{
  position:absolute; left:0; right:0; bottom:0;
  transform: translateY(101%);
  transition: transform .55s var(--ease);
  background: rgba(201,169,106,.94);
  color:#15141A;
}
.card-prod:hover .prod-quick,
.card-prod:focus-within .prod-quick{ transform: translateY(0); }

/* ---------- Form fields ---------- */
.field{
  width:100%;
  background: transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:.95rem .1rem;
  color: var(--bone);
  font-size:.95rem;
  transition: border-color .45s var(--ease);
}
.field::placeholder{ color: rgba(155,149,140,.7); }
.field:focus{ outline:none; border-bottom-color: var(--gold); }
.field:focus-visible{ outline:none; }

.on-paper .field{ color:#1B1A20; border-bottom-color: rgba(20,19,25,.2); }
.on-paper .field::placeholder{ color: rgba(20,19,25,.42); }
.on-paper .field:focus{ border-bottom-color:#8A7345; }

select.field{ appearance:none; cursor:pointer; }

/* Filter-bar selects. Chromium sizes a select from its options WITHOUT
   counting letter-spacing, so a tracked value overflows its own box by
   n_chars x tracking and gets clipped ("SÉLECTION ATELI"). Padding cannot fix
   it — the intrinsic width grows by the same amount, so the deficit survives.
   The tracking has to go; weight and case carry the stamp look instead.
   .field's width:100% also has to go, or the select shrinks as a flex item. */
[data-filter] select.field{
  width:auto;
  flex:none;
  max-width:none;
  letter-spacing:normal;
  padding-right:.4rem;
}

/* Checkbox */
.chk{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:none;
  width:16px; height:16px;
  border:1px solid var(--gold-dim);
  background:transparent; cursor:pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.chk:hover{ border-color: var(--gold); }
.chk:checked{ background: var(--gold); border-color: var(--gold); }
.chk:checked::after{
  content:""; position:absolute; left:5px; top:1.5px;
  width:4px; height:8px;
  border:solid #15141A; border-width:0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
select.field option{ background: var(--ink-2); color: var(--bone); }

/* ---------- Size / option selector ---------- */
.chip{
  min-width:3rem;
  padding:.6rem .85rem;
  border:1px solid var(--rule);
  font-size:.74rem; font-weight:500; letter-spacing:.08em;
  color: rgba(236,231,223,.75);
  cursor:pointer;
  transition: all .35s var(--ease);
}
.chip:hover{ border-color: rgba(201,169,106,.6); color: var(--bone); }
.chip[aria-pressed="true"]{ background: var(--gold); border-color: var(--gold); color:#15141A; }

/* ---------- Accordion ---------- */
.acc-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 0; text-align:left; cursor:pointer; }
.acc-panel{ overflow:hidden; height:0; transition: height .5s var(--ease); }
.acc-sign{ position:relative; width:11px; height:11px; flex:none; }
.acc-sign::before,.acc-sign::after{ content:""; position:absolute; background: var(--gold); transition: transform .45s var(--ease); }
.acc-sign::before{ left:0; top:5px; width:11px; height:1px; }
.acc-sign::after{ left:5px; top:0; width:1px; height:11px; }
.acc-btn[aria-expanded="true"] .acc-sign::after{ transform: scaleY(0); }

/* ---------- Workshop step (a genuine sequence) ---------- */
.step-num{
  font-family:'Fraunces',serif; font-weight:300;
  font-size:2.4rem; line-height:1;
  color: rgba(20,19,25,.24);
}

/* ---------- Cart ---------- */
.cart-count{
  position:absolute; top:-6px; right:-9px;
  min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center;
  background: var(--gold); color:#15141A;
  font-size:.58rem; font-weight:600; line-height:1;
  border-radius:9px;
  transform: scale(0); transition: transform .4s var(--ease);
}
.cart-count.is-on{ transform: scale(1); }

/* ---------- Cart drawer ---------------------------------------------------
   Built and injected by script on every page, so adding a piece shows the
   cart straight away instead of asking the visitor to go and look. */
.drawer{
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  visibility:hidden;
  transition: visibility 0s .55s;
}
.drawer.is-open{ pointer-events:auto; visibility:visible; transition-delay:0s; }

.drawer-veil{
  position:absolute; inset:0;
  background: rgba(10,9,13,.6);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity:0;
  transition: opacity .5s var(--ease);
}
.drawer.is-open .drawer-veil{ opacity:1; }

.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width: min(432px, 100%);
  display:flex; flex-direction:column;
  background: var(--ink-2);
  border-left:1px solid var(--rule);
  transform: translateX(102%);
  transition: transform .55s var(--ease);
}
.drawer.is-open .drawer-panel{ transform:none; }

.drawer-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }
.drawer-body::-webkit-scrollbar{ width:6px; }
.drawer-body::-webkit-scrollbar-thumb{ background: rgba(201,169,106,.28); }

.drawer-thumb{
  width:74px; height:88px; flex:none;
  overflow:hidden;
  background: linear-gradient(180deg,#221F29,#17161C);
}

.toast{
  position:fixed; z-index:80; left:50%; bottom:2rem;
  transform: translate(-50%, calc(100% + 4rem));
  opacity:0; visibility:hidden;
  transition: transform .6s var(--ease), opacity .4s var(--ease), visibility 0s .6s;
  background: var(--ink-3); border:1px solid var(--rule);
  padding:.9rem 1.4rem;
  display:flex; align-items:center; gap:.8rem;
}
.toast.is-on{
  transform: translate(-50%, 0);
  opacity:1; visibility:visible;
  transition: transform .6s var(--ease), opacity .4s var(--ease), visibility 0s 0s;
}

/* ---------- Paper ground ---------- */
.paper{ background: var(--paper); color:#1B1A20; }
.paper .stamp{ color:#8A7345; }
.paper .stamp-dim{ color: rgba(27,26,32,.5); }
.paper .lede{ color: rgba(27,26,32,.68); }
.paper .rule{ background:linear-gradient(90deg,transparent,rgba(27,26,32,.16) 12%,rgba(27,26,32,.16) 88%,transparent); }
.paper .rule-solid{ background: rgba(27,26,32,.14); }
.paper .hair{ border-color: rgba(27,26,32,.14) !important; }

.paper .acc-sign::before,
.paper .acc-sign::after{ background: var(--gold-dim); }
.paper .chip{ border-color: rgba(27,26,32,.18); color: rgba(27,26,32,.72); }

/* ---------- Misc ---------- */
.no-scroll{ overflow:hidden; }

.tile-hover{ transition: background-color .5s var(--ease); }
.tile-hover:hover{ background: rgba(201,169,106,.05); }

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .reveal-clip{ overflow:visible; }
  .reveal-clip > *{ transform:none; }
  .stage-jewel{ animation:none; }
  .marquee{ animation:none; }
}