/* ============================================================================
   Panasva — shared system for the Aug-2026 landing directions.
   Loaded by home-1..4.html; each page adds its own personality block inline.

   Rules this file exists to enforce, from client feedback:
   - readable type: body never below 16.5px, never below weight 450
   - density: no section is vertically centred in a 100vh box
   - the wordmark is always painted, never left to sit in a low-contrast state
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

:root{
  /* brand — sampled from the printed brochure */
  --maroon:#5D0512;   --maroon-d:#3E020C;  --maroon-l:#7C1A28;  --maroon-x:#2A0209;
  /* the green the client means: the previous developer's pistachio ground */
  --pist:#B6D8C5;     --pist-d:#94BFA6;
  --leaf:#2F5D3A;     --leaf-d:#1C3D24;
  /* mustard / dark mustard */
  --mus:#C8912B;      --mus-d:#96690F;     --amber:#FFAE00;
  /* off-white */
  --off:#FBEFE1;      --off-2:#F3E6D4;     --sand:#E4D5BE;
  --ink:#2A1A14;      --ink-2:#5C463A;

  --body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Fraunces',Georgia,serif;

  --pg:clamp(16px,4vw,44px);      /* page gutter */
  --wrap:1280px;
}

body{
  font-family:var(--body);
  font-size:17px;         /* Sanchi: the old type was not readable */
  font-weight:450;
  line-height:1.72;
  color:var(--ink);
  background:var(--off);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){ body{font-size:16.5px} }

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pg)}
.wide{max-width:1520px}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;
  letter-spacing:-.015em}
h1{font-size:clamp(38px,5.4vw,68px)}
h2{font-size:clamp(29px,3.5vw,46px)}
h3{font-size:clamp(20px,1.6vw,25px);line-height:1.2}
h4{font-size:18px;line-height:1.3;letter-spacing:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.4;margin:0 0 14px}
.lede{font-size:clamp(17.5px,1.35vw,19.5px);line-height:1.68;font-weight:450}
.small{font-size:14.5px;line-height:1.6}
.tiny{font-size:12.5px;line-height:1.5;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1}

/* a labelled hairline — an editorial device, used instead of empty margin */
.rule{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.rule::after{content:'';flex:1;height:1px;background:currentColor;opacity:.24}
.rule > span{font-weight:800;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;
  font-weight:800;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;
  min-height:48px}
.btn-solid{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.btn-solid:hover{background:var(--maroon-d);border-color:var(--maroon-d)}
.btn-gold{background:var(--mus);color:#26170a;border-color:var(--mus)}
.btn-gold:hover{background:var(--amber);border-color:var(--amber)}
.btn-line{border-color:currentColor;background:transparent}
/* NOT background:currentColor on hover. currentColor resolves against this
   element's own computed color, so the fill landed on exactly the text colour
   and the label disappeared — "Why cardamom" in the hero went blank on hover
   (Vikram, 2026-08-17). Setting a contrasting color at the same time does not
   help either: currentColor would then resolve to THAT, and the two match
   again. The fill has to be a colour that is not derived from the text, so it
   is a mustard wash — light enough to keep any label legible on a dark ground
   and dark enough on a light one. */
.btn-line:hover{background:rgba(200,145,43,.2);border-color:var(--mus)}
.btn-sm{padding:10px 18px;min-height:40px;font-size:12px}

/* ---- the wordmark -------------------------------------------------------- */
/* Sanchi: the logo must read strongly on whatever it sits on. Each surface
   picks the painted variant rather than relying on the amber original. */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo img.mk{height:34px;width:auto}
.logo img.wd{height:23px;width:auto}
@media (max-width:600px){ .logo img.mk{height:29px} .logo img.wd{height:19px} }

/* ---- announcement strip: density + real information ---------------------- */
.strip{background:var(--maroon-x);color:#F0DCC6;font-size:12.5px;letter-spacing:.06em}
.strip .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between;
  min-height:38px;flex-wrap:wrap;padding-block:7px}
.strip b{font-weight:800;color:var(--amber)}
.strip a{text-decoration:none}
.strip a:hover{text-decoration:underline}
.strip .sep{opacity:.4}
@media (max-width:760px){ .strip .hide-s{display:none} }

/* ---- nav ----------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60}
.nav .bar{display:flex;align-items:center;gap:28px;min-height:70px}
.nav menu{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex:1}
.nav menu a{text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 0;position:relative;white-space:nowrap}
.nav menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav menu a:hover::after,.nav menu a[aria-current]::after{transform:scaleX(1)}
.nav .acts{display:flex;align-items:center;gap:14px}
.nav .cart{position:relative;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-weight:800;font-size:12.5px;letter-spacing:.09em}
.nav .cart i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--mus);color:#26170a;font-style:normal;font-size:11px;font-weight:800}
[data-burger]{display:none}
@media (max-width:940px){
  [data-burger]{display:inline-flex}
  .nav .bar{gap:14px}
  .nav menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:inherit;padding:6px var(--pg) 16px;
    border-bottom:1px solid rgba(200,145,43,.28)}
  .nav menu[hidden]{display:none}
  .nav menu li{border-top:1px solid currentColor;border-color:rgba(128,128,128,.22)}
  .nav menu a{display:block;padding:13px 0;font-size:14.5px}
  .nav menu a::after{display:none}
}

/* ---- product card -------------------------------------------------------- */
/* explicit column counts, not auto-fill: there are 7 packs plus one promo card,
   and auto-fill kept orphaning the 7th on a row of its own */
.pgrid{display:grid;gap:2px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:430px){ .pgrid{grid-template-columns:1fr} }

.pcard{position:relative;display:flex;flex-direction:column;padding:20px 18px 18px;
  background:var(--off);text-decoration:none;transition:background .2s}
.pcard:hover{background:#fff}
/* These are the client's own studio photographs, used whole — 1060x1200, product
   centred on the same set. No cutout, no reconstruction. The box carries their
   native ratio so nothing is cropped, and the image is absolutely positioned so
   it cannot fight the aspect-ratio box for height. */
.pcard .shot{position:relative;aspect-ratio:53/60;margin-bottom:14px;overflow:hidden;
  border-radius:3px;background:#EFE6DA}
.pcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .shot img{transform:scale(1.045)}
.pcard .tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
  background:var(--mus);color:#26170a}
.pcard .tag.alt{background:var(--leaf);color:#fff}
.pcard .kind{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:5px}
.pcard h3{font-size:19px;margin-bottom:6px}
.pcard .stars{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);
  margin-bottom:9px}
.pcard .stars b{color:var(--mus-d);letter-spacing:.06em}
.pcard .row{display:flex;align-items:baseline;gap:9px;margin-top:auto}
.pcard .price{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.02em}
.pcard .per{font-size:12.5px;color:var(--ink-2)}
.pcard .buy{margin-top:12px;width:100%}

/* the 8th cell — turns a ragged trailing gap into the B2B entry point */
.pcard-bulk{display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:26px 22px;background:var(--maroon);color:#F2E3D0;text-decoration:none;
  transition:background .2s}
.pcard-bulk:hover{background:var(--maroon-d)}
.pcard-bulk .k{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mus)}
.pcard-bulk h3{font-size:21px;color:#FFF6E9;line-height:1.15}
.pcard-bulk p{font-size:14px;line-height:1.55;color:#DDC4A8;margin:0}
.pcard-bulk .go{margin-top:6px;font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber)}

/* ---- testimonial --------------------------------------------------------- */
.tgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.tcard{padding:26px 24px;border:1px solid rgba(42,2,9,.14);border-radius:3px;
  display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.5)}
.tcard .st{color:var(--mus-d);letter-spacing:.14em;font-size:14px}
.tcard blockquote{margin:0;font-size:16.5px;line-height:1.66}
.tcard .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.tcard .who .av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-weight:800;font-size:14px;background:var(--sand);color:var(--maroon)}
.tcard .who b{display:block;font-size:14.5px;line-height:1.3}
.tcard .who span{font-size:12.5px;color:var(--ink-2)}

/* Placeholder reviews must never be mistaken for real ones. */
.ph{position:relative}
.ph::after{content:'SAMPLE';position:absolute;top:9px;right:9px;font-size:9.5px;
  font-weight:800;letter-spacing:.14em;padding:3px 7px;border-radius:2px;
  background:rgba(42,2,9,.09);color:var(--ink-2)}
.phnote{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 15px;
  border-left:3px solid var(--mus);background:rgba(200,145,43,.11);font-size:13.5px;
  line-height:1.55}

/* ---- forms --------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.field input,.field select,.field textarea{padding:12px 14px;border-radius:2px;
  border:1.5px solid rgba(42,2,9,.24);background:rgba(255,255,255,.75);font-size:16px;
  font-weight:500}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--mus);
  outline-offset:1px;border-color:transparent}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--maroon-x);color:#EBD9C4;padding:56px 0 0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .cols{display:grid;gap:38px 34px;
  grid-template-columns:minmax(230px,1.5fr) repeat(auto-fit,minmax(140px,1fr));
  padding-bottom:42px}
/* the address track (230) + one link track (140) + the gap already exceed a 390px
   phone, and auto-fit cannot drop below one track — so stack outright */
@media (max-width:700px){ .foot .cols{grid-template-columns:1fr;gap:26px} }
.foot h4{font-family:var(--body);font-weight:800;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mus);margin:0 0 15px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.foot .addr{font-size:14.5px;line-height:1.72;font-style:normal}
.foot .addr b{color:#fff}
.foot .social{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.foot .social a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid rgba(235,217,196,.3);border-radius:2px;font-size:12.5px;font-weight:700}
.foot .social a:hover{background:rgba(235,217,196,.12);text-decoration:none}
.foot .base{border-top:1px solid rgba(235,217,196,.2);padding:17px 0;display:flex;
  gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:12.5px;opacity:.82}

/* ---- reveal (varied, so it does not read as one canned animation) -------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-l{transform:translateX(-18px)} .rv-r{transform:translateX(18px)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- misc ---------------------------------------------------------------- */
.kilim{height:52px;background:url('assets/kilim-tile.png') repeat-x center/auto 52px}
.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.chips li{font-size:12.5px;font-weight:700;letter-spacing:.05em;padding:6px 12px;
  border:1px solid currentColor;border-radius:99px;opacity:.9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the nav is sticky, so an anchor jump would otherwise land with the section's
   eyebrow hidden underneath it */
section[id],footer[id],div[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }