/* ============================================================
   Cotton India — Design tokens, reset & base typography
   Premium family textile showroom · R.S. Puram, Coimbatore
   ============================================================ */

:root{
  /* ---- Colour palette ---- */
  --cotton:#FAF9F6;          /* Cotton White — page background */
  --ivory:#F7F4ED;           /* Ivory — alternating band background */
  --maroon:#7A1F2A;          /* Deep Maroon — primary brand */
  --maroon-dark:#5E1720;     /* Hover / pressed */
  --maroon-tint:#F3E9EA;     /* Soft maroon wash */
  --gold:#C89B3C;            /* Gold accent — decorative */
  --gold-soft:#DDB765;       /* Gold on dark surfaces (AA on maroon) */
  --gold-tint:#FBF3E2;       /* Gold wash for icon tiles */
  --charcoal:#333333;        /* Body text */
  --ink:#2A2320;             /* Headings */
  --ink-soft:#6B6259;        /* Secondary text (AA on cotton/ivory) */
  --white:#FFFFFF;
  --line:#E7E0D4;            /* Hairlines & card borders */
  --overlay:26 17 12;        /* rgb triplet for image scrims */

  /* ---- 8px spacing scale ---- */
  --sp-1:8px;   --sp-2:16px;  --sp-3:24px;  --sp-4:32px;
  --sp-5:40px;  --sp-6:48px;  --sp-8:64px;  --sp-10:80px;
  --sp-12:96px; --sp-16:128px;

  /* Fluid section rhythm, still anchored to the 8px scale */
  --section-y:clamp(var(--sp-6), 8vw, var(--sp-12));
  --gutter:var(--sp-3);

  /* ---- Typography ---- */
  --font-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1:clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:clamp(.98rem, .95rem + .15vw, 1.05rem);
  --step-1:clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
  --step-2:clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
  --step-3:clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --step-4:clamp(2rem, 1.55rem + 2.2vw, 3.1rem);
  --step-5:clamp(2.5rem, 1.8rem + 3.4vw, 4.2rem);

  /* ---- Shape & depth ---- */
  --radius:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 4px 16px -8px rgba(64,36,24,.28);
  --shadow:0 16px 40px -20px rgba(64,36,24,.30);
  --shadow-lg:0 28px 60px -28px rgba(64,36,24,.38);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.35s;

  /* ---- Layout ---- */
  --maxw:1280px;
  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--sp-2));
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--charcoal);
  background:var(--cotton);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{text-wrap:pretty}

/* ---------- Focus visibility ---------- */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:var(--sp-2);top:-100px;z-index:200;
  background:var(--maroon);color:var(--white);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius);
  font-size:var(--step--1);font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:var(--sp-2)}

/* ---------- Layout primitives ---------- */
.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--ivory)}
.section--tight{padding-block:var(--sp-6)}

.section__head{
  max-width:64ch;margin:0 auto clamp(var(--sp-4), 5vw, var(--sp-8));
  text-align:center;
}
.section__head--left{margin-inline:0;text-align:left}
.section__foot{margin-top:var(--sp-6);text-align:center}

.eyebrow{
  color:var(--maroon);
  font-size:var(--step--1);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:var(--sp-1);
}
.eyebrow--gold{color:var(--gold-soft)}
.lead{color:var(--ink-soft);font-size:var(--step-1)}
.prose>p+p{margin-top:var(--sp-2)}
.prose p{color:var(--ink-soft);max-width:60ch}

/* Visually hidden but available to screen readers */
.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;
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}