/* ============================================================
   TARKASI — the premium layer.

   Loaded after index.css. Everything here is additive and scoped
   to new classes, so nothing already on the page can shift under
   it.

   The direction comes from your own printed cards, not from me:
   near-black ground, one brass hairline, silver-gradient type,
   and a spec rail of real measured facts. The boldness is spent
   in exactly one place — the vitrine — and everything around it
   stays quiet so it reads.
   ============================================================ */

/* ---- 1. The vitrine -------------------------------------------------------
   A signature object presented the way a museum presents an accession:
   large plate, hairline frame, then the facts. */

.sig{
  position:relative;
  padding-block:clamp(5rem,11vw,9.5rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(189,160,106,.075), transparent 62%),
    var(--ink,#0b0d10);
}
.sig::before,
.sig::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(189,160,106,.5),transparent);
}
.sig::before{top:0}
.sig::after{bottom:0}

.sig-head{max-width:47rem;margin-bottom:clamp(2.75rem,6vw,4.75rem)}
.sig-head h2{
  font-size:clamp(2.1rem,5.4vw,3.65rem);
  letter-spacing:-.022em;line-height:1.03;margin-top:.5rem;
}
.sig-head h2 em{
  font-style:italic;
  background:linear-gradient(180deg,#f4e3ba 0%,#d7bd86 48%,#a9884d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-head .lead{margin-top:1.1rem;max-width:38rem;font-size:1.02rem;line-height:1.75}

.sig-rail{display:grid;gap:clamp(1.5rem,3.4vw,2.75rem)}
@media (min-width:940px){ .sig-rail{grid-template-columns:1fr 1fr} }

.sigcard{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(23,27,36,.92),rgba(11,13,16,.92));
  border:1px solid var(--line,rgba(233,236,241,.12));
  border-radius:2px;                       /* filigree is angular; corners stay sharp */
  overflow:hidden;
  transition:border-color .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.sigcard:hover{border-color:rgba(189,160,106,.38);transform:translateY(-3px)}

/* the plate */
.sig-plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:#06080a}
.sig-plate img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.sigcard:hover .sig-plate img{transform:scale(1.032)}
.sig-plate::after{                          /* seats the object on its ground */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,8,10,.62) 100%);
}
.sig-frame{
  position:absolute;inset:14px;pointer-events:none;
  border:1px solid rgba(215,189,134,.20);
  transition:inset .55s ease,border-color .55s ease;
}
.sigcard:hover .sig-frame{inset:10px;border-color:rgba(215,189,134,.42)}

.sig-kicker{
  position:absolute;top:0;left:0;z-index:2;
  margin:26px 0 0 26px;padding:.42rem .85rem;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:#efe6d2;background:rgba(6,8,10,.62);
  border:1px solid rgba(215,189,134,.34);backdrop-filter:blur(6px);
}

/* the facts */
.sig-body{padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;flex:1}
.sig-body h3{
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.012em;line-height:1.1;
}
.sig-desc{
  color:var(--silver-dim,#c4c9d2);opacity:.82;
  font-size:.94rem;line-height:1.72;margin-top:.7rem;
}

/* The spec rail — the one device this page is meant to be remembered by.
   Every cell is a measured fact, so the structure is carrying information
   rather than decorating the card. */
.specrail{
  display:grid;grid-template-columns:repeat(2,1fr);
  margin:1.6rem 0 0;border-top:1px solid var(--line,rgba(233,236,241,.12));
}
.specrail>div{
  padding:.95rem 0 .9rem;
  border-bottom:1px solid rgba(233,236,241,.07);
}
.specrail>div:nth-child(odd){padding-right:1.2rem;border-right:1px solid rgba(233,236,241,.07)}
.specrail>div:nth-child(even){padding-left:1.2rem}
.specrail dt{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass,#bda06a);opacity:.9;
}
.specrail dd{
  margin:.42rem 0 0;font-family:var(--serif,"Fraunces",Georgia,serif);
  font-size:1.02rem;font-weight:300;color:var(--silver,#e9ecf1);
  font-variant-numeric:tabular-nums;
}

/* On a narrow screen a two-column rail leaves dead space beside any value
   that wraps. One column, label left and value right, reads like the card
   pinned beside a case — and never strands a cell. */
@media (max-width:560px){
  .specrail{grid-template-columns:1fr}
  .specrail>div{
    display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;
    padding:.8rem 0;border-right:0 !important;padding-left:0 !important;padding-right:0 !important;
  }
  .specrail dt{flex:0 0 auto}
  .specrail dd{margin:0;text-align:right;font-size:.95rem}
  .sig-body{padding:1.35rem}
  .sig-desc{font-size:.9rem}
  .sig-actions .btn{width:100%;justify-content:center}
}

/* the price */
.sig-price{margin-top:auto;padding-top:1.5rem;display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}
.sig-fig{
  font-family:var(--serif,"Fraunces",Georgia,serif);font-weight:300;
  font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 0%,#dfe4ec 50%,#a4acb8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(6px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);
}
.sig-fig.settled{opacity:1;transform:none}
.sig-basis{
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute,#8b929d);
}
.sig-basis b{color:var(--brass-bright,#d7bd86);font-weight:500}

.sig-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}

/* ---- 2. Live prices on the existing cards --------------------------------
   A card whose price moves with the metal says so, quietly. */
.at-rate{
  display:block;margin-top:.34rem;
  font-family:var(--sans,"Spline Sans",system-ui,sans-serif);
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass,#bda06a);opacity:.82;
}

/* a price that has just been corrected from the server fades rather than snaps */
.price-live{animation:priceIn .7s ease both}
@keyframes priceIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---- 3. Quiet refinements -------------------------------------------------
   Small corrections that read as care rather than as features. */

/* numerals in prices line up in a column instead of dancing */
.jcard-price,.piece-price,.rate-figure{font-variant-numeric:tabular-nums}

/* the marquee was shouting over everything below it */
.marquee{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .sigcard,.sig-plate img,.sig-frame,.sig-fig{transition:none}
  .sig-fig{opacity:1;transform:none}
  .price-live{animation:none}
}