/* ============================================================
   SUKHH BY URVI SADH — shipping, returns and privacy pages
   The same palette and type as index.html, cut down to what
   these three pages need.

   If you change a colour in index.html (section 4 of the EDIT
   HERE block), change the matching one here too.
   ============================================================ */

:root{
  --bg:          #150809;
  --bg-deep:     #0E0405;
  --wine:        #610404;
  --wine-lift:   #7C1B22;
  --cream:       #F2E9E0;
  --offwhite:    #EDE3D8;
  --muted:       #C4B5A9;
  --faint:       #8E7E76;
  --hair:        rgba(124,27,34,.5);
  --hair-soft:   rgba(124,27,34,.26);

  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad:  clamp(1.25rem, 5vw, 5rem);
  --sec:  clamp(5rem, 12vw, 9rem);
  --maxw: 1440px;
  --bar:  4.1rem;
  --ease: cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}
@media (min-width:1024px){ :root{ --bar:4.75rem; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--offwhite);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.94rem,.88rem + .25vw,1.02rem);
  line-height:1.85;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  color:var(--cream);
  margin:0;
  line-height:1.12;
  letter-spacing:.02em;
}

::selection{ background:var(--wine); color:var(--cream); }
:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:4px; }

/* Cormorant Garamond draws old-style figures by default, so "15" and "48"
   read oddly. Force lining, tabular figures wherever a number is set. */
h1, h2, h3, .brand span, .policy p, .policy li, .footer__links a{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---------- header ---------- */

.masthead{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem;
  height:var(--bar);
  padding-inline:max(.75rem, calc(var(--pad) - 1rem));
  background:var(--bg);
  border-bottom:1px solid var(--hair-soft);
}
.masthead__side{ display:flex; align-items:center; gap:1.5rem; }
.masthead__side--end{ justify-content:flex-end; }

.navlink{
  font-size:.62rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--muted); text-decoration:none;
  white-space:nowrap;
  display:inline-flex; align-items:center;
  min-height:2.75rem; min-width:2.75rem;       /* a full 44px tap target */
  padding:0 .25rem;
}
@media (hover:hover){ .navlink:hover{ color:var(--cream); } }

/* on a phone the long label pushes the brand off centre, so shorten it */
.navlink__short{ display:inline; }
.navlink__long{ display:none; }
@media (min-width:600px){
  .navlink__short{ display:none; }
  .navlink__long{ display:inline; }
}

.brand{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.3rem .5rem;
  text-decoration:none;
}
.brand img{ width:2.15rem; height:auto; }
.brand span{
  font-family:var(--serif); font-size:.66rem; font-weight:500; line-height:1;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
}
@media (min-width:1024px){ .brand img{ width:2.6rem; } }

main{ padding-top:var(--bar); }

/* ---------- the page itself ---------- */

.policy{
  max-width:44rem;
  margin:0 auto;
  padding:clamp(3.5rem,10vw,6.5rem) var(--pad) var(--sec);
}
.policy .eyebrow{
  font-family:var(--sans);
  font-size:.62rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.42em;
  color:var(--muted);
  margin:0 0 clamp(1.5rem,4vw,2.25rem);
}
.policy h1{
  font-size:clamp(2.1rem,7vw,3.2rem);
  margin-bottom:clamp(2rem,5vw,3rem);
}
/* section headings inside a policy (the privacy page) */
.policy h2{
  font-size:clamp(1.45rem,4.6vw,1.85rem);
  margin:clamp(2.75rem,6vw,3.5rem) 0 1.1rem;
}
.policy p{
  margin:0 0 1.5rem;
  color:var(--offwhite);
  line-height:1.9;
}
.policy p:last-child{ margin-bottom:0; }
.policy p a{ position:relative; color:var(--cream); text-decoration:none; border-bottom:1px solid var(--hair); }
.policy p a::before{ content:""; position:absolute; left:-.5rem; right:-.5rem; top:50%; height:2.75rem; margin-top:-1.375rem; }
@media (hover:hover){ .policy p a:hover{ border-bottom-color:var(--cream); } }

.policy__note{
  margin-top:clamp(3rem,7vw,4.5rem);
  padding-top:1.8rem;
  border-top:1px solid var(--hair-soft);
  font-size:.78rem; line-height:1.8; color:var(--muted);
}
.policy__note a{ position:relative; color:var(--cream); text-decoration:none; border-bottom:1px solid var(--hair); }
/* a link inside a line of small text: widen what a thumb can hit, not the text */
.policy__note a::before{ content:""; position:absolute; left:-.5rem; right:-.5rem; top:50%; height:2.75rem; margin-top:-1.375rem; }
@media (hover:hover){ .policy__note a:hover{ border-bottom-color:var(--cream); } }

/* ---------- footer ---------- */

footer{
  padding:var(--sec) var(--pad) clamp(3rem,7vw,4.5rem);
  text-align:center;
  border-top:1px solid var(--hair-soft);
}
footer img{ width:72px; height:auto; margin:0 auto 1.8rem; }
footer p{ margin:0; font-size:.6rem; font-weight:500; text-transform:uppercase; letter-spacing:.3em; color:var(--muted); }
footer p + p{ margin-top:.9rem; color:var(--faint); }

.footer__links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 1.4rem;
  margin:1.4rem 0 0;
  padding:0; list-style:none;
}
.footer__links a{
  font-size:.6rem; font-weight:500; text-transform:uppercase; letter-spacing:.24em;
  color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center;
  min-height:2.75rem; padding:0 .1rem;           /* a full 44px tap target */
  text-underline-offset:.5em; text-decoration-thickness:1px;
}
.footer__links a[aria-current="page"]{ color:var(--cream); }
@media (hover:hover){ .footer__links a:hover{ color:var(--cream); text-decoration:underline; text-decoration-color:var(--hair); } }