/* ==========================================================================
   SUVARNA & SONS — concept build, Skystride

   Built from two full-page references studied at full resolution rather than
   from thumbnails, which is what the first three attempts were doing wrong.
   Read off those layouts, the structure a jewellery site actually uses:

     · An announcement strip, then a nav with the wordmark and one solid CTA.
     · The hero is a BAND, not a full screen — text on the left, a model
       WEARING the piece on the right. Human, and about half a viewport tall.
     · A category row immediately under it: small photographs, tiny caps
       labels. It tells you what the shop sells in one glance.
     · Editorial banners with the words set over the picture.
     · A product row where every item carries a name and a number.
     · A split feature: copy one side, the craft photographed on the other.
     · A trust strip of short guarantees.
     · Many compact sections rather than a few enormous ones.

   Hierarchy per section is always eyebrow -> heading -> content, and the
   second word of a heading goes italic in gold. That repetition is the system.
   ========================================================================== */
:root{
  --bone:#FBF8F3;
  --cream:#F3ECE1;
  --sand:#E8DCC9;
  --ink:#2B2118;
  --dim:rgba(43,33,24,.66);
  --dimmer:rgba(43,33,24,.44);
  --gold:#A9803F;
  --gold-2:#C4A05C;
  --hair:rgba(43,33,24,.12);

  --pad:clamp(16px,3.4vw,52px);
  --sec:clamp(46px,5.4vw,84px);
  --r:4px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bone)}
body{background:var(--bone);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;font-size:.9375rem;line-height:1.65;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}

/* --- type ------------------------------------------------------------- */
.d{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  line-height:1.1;letter-spacing:-.008em}
.d em{font-style:italic;color:var(--gold)}
h1{font-size:clamp(2.5rem,5.4vw,4.5rem)}
h2{font-size:clamp(1.75rem,3.1vw,2.75rem)}
h3{font-family:'Jost',system-ui,sans-serif;font-weight:400;
  font-size:.9375rem;letter-spacing:.02em;line-height:1.35}
p{color:var(--dim);max-width:56ch}
.eb{display:block;font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin-bottom:12px}
.eb-d{color:var(--dimmer)}
.tiny{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer)}

/* section head: heading left, link right */
.sh{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(20px,2.4vw,32px)}
.sh p{margin-top:8px;font-size:.875rem}

/* --- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;
  background:var(--gold);color:#FFFDF8;border-radius:var(--r);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s var(--ease)}
.btn:hover{background:var(--ink)}
.btn-o{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn-o:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  transition:gap .3s var(--ease)}
.more:hover{gap:14px}

/* --- announcement strip + nav ---------------------------------------- */
.topbar{background:var(--cream);border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  justify-content:center;padding-block:9px;text-align:center}
.topbar span{font-size:.6875rem;letter-spacing:.08em;color:var(--dim)}
.nav{position:sticky;top:0;z-index:70;background:rgba(251,248,243,.94);
  border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:14px}
.brand{display:block;line-height:1}
.brand b{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:clamp(1.125rem,1.6vw,1.5rem);letter-spacing:.02em}
.brand i{display:block;font-style:normal;font-size:.5625rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:3px}
.nav-links{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav-links a{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--gold)}
@media (max-width:880px){.nav-links{display:none}}

/* ==========================================================================
   HERO — a band, not a screen. Words left, someone wearing the piece right.
   ========================================================================== */
.hero{background:var(--cream);border-bottom:1px solid var(--hair)}
.hero-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch;min-height:clamp(420px,58svh,620px)}
.hero-t{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4.6vw,70px) clamp(20px,3vw,50px) clamp(34px,4.6vw,70px) var(--pad)}
.hero-t h1{margin-bottom:18px}
.hero-t p{max-width:38ch}
.hero-t .btn{margin-top:clamp(20px,2.6vw,32px);align-self:flex-start}
.hero-art{position:relative;overflow:hidden;background:var(--sand)}
.hero-art img{width:100%;height:100%;object-fit:cover}
@media (max-width:880px){
  .hero-in{grid-template-columns:1fr;min-height:0}
  .hero-t{padding:clamp(30px,7vw,52px) var(--pad);order:2}
  .hero-art{order:1;aspect-ratio:4/3}
}

/* ==========================================================================
   CATEGORY ROW — what the shop sells, in one glance.
   ========================================================================== */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,16px)}
.cat{text-align:center;padding:clamp(14px,1.6vw,22px) 10px clamp(12px,1.4vw,18px);
  background:var(--cream);border-radius:var(--r);
  transition:background .3s var(--ease),transform .4s var(--ease)}
.cat:hover{background:var(--sand);transform:translateY(-3px)}
.cat span.im{display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:5/4;background:var(--sand);margin-bottom:12px}
.cat img{width:100%;height:100%;object-fit:cover}
.cat b{display:block;font-weight:400;font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase}
.cat i{display:block;width:18px;height:1px;background:var(--gold);
  margin:8px auto 0}
@media (max-width:860px){.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   BANNERS — words set over the picture. Uneven widths.
   ========================================================================== */
.banners{display:grid;grid-template-columns:repeat(11,1fr);
  gap:clamp(8px,1vw,16px)}
.bn{position:relative;overflow:hidden;border-radius:var(--r);
  min-height:clamp(190px,20vw,260px);display:flex;align-items:flex-end;
  padding:clamp(18px,2vw,28px)}
.bn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.bn:hover img{transform:scale(1.05)}
.bn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(72deg,rgba(30,22,14,.82) 0%,rgba(30,22,14,.42) 52%,
             rgba(30,22,14,.06) 100%)}
.bn-t{position:relative;z-index:2;color:#FBF8F3}
.bn-t h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;
  line-height:1.12;margin-bottom:7px}
.bn-t h3 em{font-style:italic;color:var(--gold-2);display:block}
.bn-t p{color:rgba(251,248,243,.78);font-size:.8125rem;max-width:28ch;
  margin-bottom:12px}
.bn-t .more{color:var(--gold-2)}
.b3{grid-column:span 3}.b4{grid-column:span 4}
@media (max-width:900px){.banners{grid-template-columns:repeat(2,1fr)}
  .b3,.b4{grid-column:span 1}}
@media (max-width:560px){.banners{grid-template-columns:1fr}}

/* ==========================================================================
   PRODUCT ROW — every item carries a name and a number.
   ========================================================================== */
.row{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,20px)}
.pr span.im{display:block;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:1;background:var(--cream);margin-bottom:12px}
.pr img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.pr:hover img{transform:scale(1.06)}
.pr b{display:block;font-weight:400;font-size:.875rem;letter-spacing:.01em}
.pr .mk{display:block;margin-top:5px;font-size:.8125rem;color:var(--gold)}
.pr .sub{display:block;margin-top:4px;font-size:.75rem;color:var(--dimmer)}
@media (max-width:1000px){.row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.row{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   FEATURE — copy one side, the craft photographed on the other.
   ========================================================================== */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  align-items:stretch;background:var(--cream);border-radius:var(--r);
  overflow:hidden}
.feat-t{padding:clamp(28px,3.6vw,62px);display:flex;flex-direction:column;
  justify-content:center}
.feat-t h2{margin-bottom:16px}
.feat-art{position:relative;overflow:hidden;background:var(--sand);min-height:300px}
.feat-art img{width:100%;height:100%;object-fit:cover}
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--hair)}
.marks div{text-align:center}
.marks b{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:1.5rem;color:var(--gold);line-height:1}
.marks span{display:block;margin-top:6px;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);line-height:1.4}
@media (max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-art{order:-1;aspect-ratio:16/10;min-height:0}
}

/* ==========================================================================
   TRUST STRIP — short guarantees, evenly weighted.
   ========================================================================== */
.trust{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.trust div{padding:clamp(20px,2.4vw,32px) clamp(12px,1.6vw,22px);text-align:center}
.trust div + div{border-left:1px solid var(--hair)}
.trust b{display:block;font-weight:400;font-size:.8125rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:7px}
.trust p{font-size:.75rem;color:var(--dimmer);max-width:none;line-height:1.5}
@media (max-width:900px){
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust div{border-left:0;border-top:1px solid var(--hair)}
}

/* --- journal ---------------------------------------------------------- */
.journal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,26px)}
.jn span.im{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;
  background:var(--cream);margin-bottom:12px}
.jn img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.jn:hover img{transform:scale(1.05)}
.jn .tiny{display:block;margin-bottom:6px}
.jn b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.1875rem;line-height:1.25}
@media (max-width:900px){.journal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.journal{grid-template-columns:1fr}}

/* --- entries (terms) -------------------------------------------------- */
.entries{border-top:1px solid var(--hair)}
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;
  gap:clamp(14px,3vw,50px);align-items:baseline;
  padding-block:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--hair)}
.entry h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.125rem,1.6vw,1.4375rem)}
.entry p{font-size:.875rem;max-width:52ch}
.entry .v{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;
  color:var(--gold);white-space:nowrap}
@media (max-width:820px){.entry{grid-template-columns:1fr;gap:6px}}

/* --- reveal ----------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* reduced motion is handled in the audit block at the end of this file */

/* --- footer ----------------------------------------------------------- */
footer{background:var(--cream);border-top:1px solid var(--hair);
  margin-top:clamp(40px,5vw,72px)}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(22px,3vw,48px);padding-block:clamp(38px,4.6vw,68px)}
.foot a{display:block;font-size:.8125rem;color:var(--dim);padding-block:4px;
  transition:color .25s}
.foot a:hover{color:var(--gold)}
.foot p{font-size:.8125rem}
.foot .eb{margin-bottom:14px}
.foot-b{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  padding-block:16px;border-top:1px solid var(--hair)}
@media (max-width:820px){.foot{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================================
   TOUCH AND PRESS  (motion audit)
   A tap on a touchscreen fires a hover and it stays fired until you tap
   something else, so every lift here left the tapped card floating. Hover
   belongs to devices with a pointer.
   ========================================================================== */
@media (hover:none),(pointer:coarse){
  .cat:hover{transform:none}
  .bn:hover img,.pr:hover img,.jn:hover img{transform:none}
}
/* Feedback on pointer-down, not on release — a control that does nothing until
   the finger lifts reads as dead. */
.cat,.pr,.bn,.jn,.btn{-webkit-tap-highlight-color:transparent}
.cat:active,.pr:active{transform:scale(.985);transition:transform 100ms ease-out}
@media (prefers-reduced-motion:reduce){
  .cat:hover,.cat:active,.pr:active{transform:none}
  .bn:hover img,.pr:hover img,.jn:hover img{transform:none}
  /* keep the fade — it is what says the section arrived */
  .rv{opacity:1;transform:none;transition:opacity 200ms ease}
}
@media (prefers-reduced-transparency:reduce){
  .rate-bar,.nav-in{backdrop-filter:none;-webkit-backdrop-filter:none}
}