/* ==========================================================================
   VASTRA — shared stylesheet
   Palette and type live here. Change a value once, every page follows.
   ========================================================================== */

:root{
  --ink:#2E3D42;
  --ink-deep:#1A2428;
  --slate:#5B7D8A;
  --cream:#F2F0EA;
  --sand:#D6CFC0;
  --rule:rgba(91,125,138,.32);
  --rule-soft:rgba(91,125,138,.16);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:940px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:660px;margin:0 auto;padding:0 24px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

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

/* ---------- navigation ---------- */
.nav{
  border-bottom:1px solid var(--rule-soft);
  position:sticky;top:0;z-index:20;
  background:rgba(46,61,66,.94);
  backdrop-filter:blur(8px);
}
.nav-inner{
  max-width:940px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-brand img{height:30px;width:auto}
.nav-brand span{
  font-weight:500;font-size:13px;
  letter-spacing:.5em;text-indent:.5em;
}
.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;font-size:13px;color:var(--sand);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover{color:var(--cream);border-color:var(--slate)}
.nav-links a[aria-current=page]{color:var(--cream);border-color:var(--sand)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin:0 0 24px;
}
.section-head{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin:0 0 30px;
}
h1.display{
  font-family:var(--display);font-weight:300;
  font-size:clamp(38px,9vw,68px);line-height:1.05;
  letter-spacing:-.01em;margin:0 0 22px;
}
h1.display em{font-style:italic;color:var(--sand)}
h2.display{
  font-family:var(--display);font-weight:300;
  font-size:clamp(27px,6vw,40px);line-height:1.15;margin:0 0 16px;
}
.lede{font-size:16px;color:var(--sand);margin:0}

section{border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--cream);color:var(--ink-deep);
  border:1px solid var(--cream);
  font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.05em;
  padding:14px 28px;border-radius:1px;cursor:pointer;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:transparent;color:var(--cream)}
.btn-ghost{
  background:transparent;color:var(--cream);border-color:var(--rule);
}
.btn-ghost:hover{background:transparent;border-color:var(--sand)}
.btn svg{width:17px;height:17px;fill:currentColor}

/* ---------- care label (signature component) ---------- */
.care-label{
  max-width:400px;background:var(--cream);color:var(--ink-deep);
  padding:28px 26px 24px;border-radius:2px;
  box-shadow:0 18px 46px rgba(0,0,0,.34);
}
.care-label .lbl-top{
  font-weight:500;font-size:11px;letter-spacing:.44em;text-indent:.44em;
  text-align:center;padding-bottom:14px;
  border-bottom:1px solid rgba(46,61,66,.22);
}
.care-label dl{margin:0;padding:6px 0 0}
.care-label .row{
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px dotted rgba(46,61,66,.26);
}
.care-label .row:last-child{border-bottom:none}
.care-label dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#63747a;margin:0;padding-top:2px;
  white-space:nowrap;
}
.care-label dd{margin:0;font-size:14px;font-weight:500;text-align:right}
.care-label .lbl-foot{
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(46,61,66,.22);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#63747a;text-align:center;
}

/* ---------- swatches ---------- */
.swatches{display:flex;gap:18px;flex-wrap:wrap}
.swatch{width:150px}
.chip{height:150px;border-radius:1px;border:1px solid rgba(242,240,234,.16)}
.swatch p{
  margin:12px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.swatch p b{display:block;color:var(--cream);font-weight:400;margin-bottom:3px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:0 0 18px}
caption{
  text-align:left;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  padding-bottom:14px;
}
th,td{
  text-align:left;padding:13px 10px;font-size:14px;
  border-bottom:1px solid var(--rule-soft);
}
th{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);font-weight:400;
}
td:first-child{color:var(--cream);font-weight:500}
td{color:var(--sand)}

/* ---------- footer ---------- */
footer{padding:56px 0 64px;border-top:1px solid var(--rule)}
.foot-grid{
  display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;
  margin-bottom:40px;
}
.foot-col h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);font-weight:400;margin:0 0 14px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:14px;color:var(--sand);text-decoration:none}
.foot-col a:hover{color:var(--cream)}
.colophon{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);line-height:2;margin:0;
  padding-top:26px;border-top:1px solid var(--rule-soft);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media (max-width:640px){
  .nav-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .nav-links{gap:18px;flex-wrap:wrap}
  .swatch{width:calc(50% - 9px)}
  .chip{height:132px}
}