/* State sections. Each state re-colours the whole shop while you are inside it and
   swaps in its own folk-art: kolam (Tamil Nadu), kasavu (Kerala), bandhani (Rajasthan),
   alpona (West Bengal), phulkari (Punjab).
   --r-floor: the ground the art is drawn on   --r-on: text/art on that ground   --r-gold: highlight */

:lang(ta) { font-family: "Noto Serif Tamil", serif; }
:lang(ml) { font-family: "Noto Serif Malayalam", serif; }
:lang(hi) { font-family: "Noto Serif Devanagari", serif; }
:lang(bn) { font-family: "Noto Serif Bengali", serif; }
:lang(pa) { font-family: "Noto Serif Gurmukhi", serif; }

[data-region="tamil-nadu"] {
  --r-floor: #93321E; --r-on: #FBF4E6; --r-gold: #E8B23A;
  --r-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28'%3E%3Cg fill='none' stroke='%23FBF4E6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 14Q12 -2 24 14T48 14'/%3E%3Cpath d='M0 14Q12 30 24 14T48 14'/%3E%3C/g%3E%3Cg fill='%23FBF4E6'%3E%3Ccircle cx='12' cy='14' r='2.2'/%3E%3Ccircle cx='36' cy='14' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-region="tamil-nadu"] {
  --bg: #F8EEDD; --surface: #FFF8EC; --tile: #EED8B8; --ink: #2A120B; --muted: #85594A; --line: #E4CBA6;
  --accent: #93321E; --primary: #93321E;
}
[data-region="kerala"] {
  --r-floor: #F3EAD3; --r-on: #1E2A1A; --r-gold: #B38A2E;
  --r-border: linear-gradient(#F3EAD3 0 4px, #C9A24A 4px 14px, #F3EAD3 14px 18px, #C9A24A 18px 21px, #F3EAD3 21px 24px, #C9A24A 24px 25px, #F3EAD3 25px);
}
body[data-region="kerala"] {
  --bg: #FAF6EC; --surface: #FFFDF6; --tile: #EFE6CF; --ink: #1E2A1A; --muted: #6D7458; --line: #E5DABF;
  --accent: #2E5E2A; --primary: #2E5E2A;
}
[data-region="rajasthan"] {
  --r-floor: #A8164C; --r-on: #FFF4E6; --r-gold: #F6C945;
  --r-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28'%3E%3Cg fill='%23FFF4E6'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='6' cy='14' r='2'/%3E%3Ccircle cx='14' cy='14' r='2'/%3E%3Ccircle cx='10' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-region="rajasthan"] {
  --bg: #FBF0E7; --surface: #FFF8F1; --tile: #F3D9CB; --ink: #2C0E18; --muted: #8A5868; --line: #EBCFC2;
  --accent: #A8164C; --primary: #A8164C;
}
[data-region="west-bengal"] {
  --r-floor: #A3161A; --r-on: #FFF9F0; --r-gold: #F2C14E;
  --r-border: linear-gradient(#FFF9F0 0 5px, #A3161A 5px 23px, #FFF9F0 23px 25px, #A3161A 25px);
}
body[data-region="west-bengal"] {
  --bg: #FBF6EE; --surface: #FFFCF6; --tile: #F0E1CF; --ink: #2B0F0F; --muted: #876058; --line: #EBD8C6;
  --accent: #A3161A; --primary: #A3161A;
}
[data-region="punjab"] {
  --r-floor: #5E1622; --r-on: #FCEFD8; --r-gold: #F2A13A;
  --r-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28'%3E%3Cpath d='M12 4L22 14L12 24L2 14Z' fill='none' stroke='%23F2A13A' stroke-width='2'/%3E%3Cpath d='M12 9L17 14L12 19L7 14Z' fill='%23E8478B'/%3E%3C/svg%3E");
}
body[data-region="punjab"] {
  --bg: #FBF2E5; --surface: #FFFAF2; --tile: #F2DCC0; --ink: #2A0D12; --muted: #84605A; --line: #EBD3B6;
  --accent: #B8460F; --primary: #5E1622;
}

/* Inside a state, the announcement bar and buttons take the state's colours. */
body[data-region] .topline { background: var(--r-floor); color: var(--r-on); }
body[data-region] .btn.dark { background: var(--r-floor); border-color: var(--r-floor); color: var(--r-on); }
body[data-region] .pc-tag { background: var(--r-floor); color: var(--r-on); }

/* ---------- Art ---------- */
.art { display: block; width: 100%; height: 100%; }
.art.kolam, .art.alpona { color: var(--r-on); }
.art.kolam .k-line { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .6)); }
.art.draw .k-line > * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: k-draw 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * 22ms); }
.art.draw .k-dots circle { opacity: 0; animation: k-dot .5s var(--ease) forwards; }
@keyframes k-draw { to { stroke-dashoffset: 0; } }
@keyframes k-dot { to { opacity: 1; } }

/* Floor texture: a little grain so the art looks drawn on stone and cloth, not on a screen. */
.st-floor, .st-hero, .st-tile, .st-craft-art, .st-badge-art {
  background-color: var(--r-floor);
  background-image:
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px),
    radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

/* ---------- Border strip (kolam line, kasavu stripes, bandhani dots...) ---------- */
.st-border { height: 28px; background: var(--r-border, none) center / auto 100% repeat-x, var(--r-floor); }

/* ---------- State tiles (home + index) ---------- */
.states-sec { padding: 72px 20px; }
.states-sec .rail-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.states-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.states-grid.big { padding: 0 20px 96px; }
.st-tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--r-on); text-decoration: none; isolation: isolate; }
.st-tile:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.st-tile-art { position: absolute; inset: 6% 6% 28%; display: grid; place-items: center; transition: transform 1.2s var(--ease); }
.st-tile-art .art { width: auto; max-width: 100%; height: 100%; aspect-ratio: 1; }
.st-tile:hover .st-tile-art { transform: scale(1.06) rotate(-2deg); }
.st-tile-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: grid; gap: 2px; background: linear-gradient(transparent, var(--r-floor) 40%); }
.st-tile-native { font-size: clamp(22px, 5vw, 30px); font-weight: 700; line-height: 1.25; }
.st-tile-name { font-family: var(--display); font-size: 17px; }
.st-tile-meta { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--r-gold); margin-top: 4px; }
.st-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--r-border, none) center / auto 28px repeat-x; opacity: .9; }

/* ---------- State page ---------- */
.st-hero { color: var(--r-on); display: grid; gap: 8px; padding: 28px 20px 48px; overflow: hidden; }
.st-hero-art { width: min(86vw, 440px); aspect-ratio: 1; margin: 0 auto; }
.st-hero-copy { text-align: center; }
.st-hero-copy .eyebrow { color: var(--r-gold); }
.st-native { font-size: clamp(34px, 10vw, 72px); line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: 0; }
.st-name { font-family: var(--display); font-style: italic; font-size: clamp(22px, 4vw, 34px); margin: 4px 0 14px; }
.st-tagline { max-width: 36ch; margin: 0 auto 26px; opacity: .85; line-height: 1.7; }
.st-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.st-btn { background: var(--r-on); color: var(--r-floor); border-color: var(--r-on); }
.st-btn.ghost { background: transparent; color: var(--r-on); border-color: currentColor; }

.st-intro { text-align: center; padding: 80px 24px 56px; }
.st-intro .eyebrow { color: var(--accent); }
.st-intro .h2 { max-width: 18ch; margin: 0 auto 22px; }
.st-intro .lede { margin: 0 auto; }

.st-crafts { display: grid; gap: 12px; padding: 0 20px 72px; }
.st-craft { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; align-items: start; }
.st-craft-art { grid-row: span 3; aspect-ratio: 1; padding: 10px; }
.st-craft .eyebrow { margin: 4px 0 6px; color: var(--muted); font-size: 10px; }
.st-craft .h3 { font-size: 24px; }
.st-craft p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Each product stands on a threshold strip drawn in the state's art. */
.st-grid .pc-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 1; background: var(--r-border, none) center / auto 100% repeat-x, var(--r-floor); transform: translateY(100%); transition: transform .5s var(--ease); }
.st-grid .pc:hover .pc-media::after, .st-grid .pc-media:focus-visible::after { transform: none; }
@media (hover: none) { .st-grid .pc-media::after { transform: none; } }

.st-next { padding: 64px 20px 96px; border-top: 1px solid var(--line); }
.st-next .eyebrow { color: var(--muted); }

/* Product page badge */
.st-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; text-decoration: none; font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.st-badge-art { width: 34px; height: 34px; padding: 4px; flex: none; }

/* Tamil Nadu extras: pulli (dot) grid behind the intro, like the dots laid out before a kolam. */
body[data-region="tamil-nadu"] .st-intro { background: radial-gradient(circle, rgba(147, 50, 30, .18) 1.6px, transparent 2px) center / 26px 26px; }
body[data-region="tamil-nadu"] .st-craft { border-radius: 2px; box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line); }

@media (min-width: 640px) {
  .states-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-tile:first-child:nth-last-child(odd) { grid-column: auto; aspect-ratio: 3 / 4; }
  .st-crafts { grid-template-columns: repeat(3, 1fr); }
  .st-craft { grid-template-columns: 1fr; }
  .st-craft-art { grid-row: auto; width: 120px; margin-bottom: 18px; }
}

@media (min-width: 960px) {
  .states-sec { padding: 120px 48px; }
  .states-sec .rail-head { padding-bottom: 36px; }
  .states-grid { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; }
  .states-grid.big { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); padding: 0 48px 120px; }
  .st-tile-native { font-size: 30px; }

  .st-hero { grid-template-columns: 1.1fr 1fr; align-items: center; min-height: calc(100vh - var(--hdr-h) - 32px); padding: 48px 64px; gap: 48px; }
  .st-hero-art { width: min(44vw, 620px); }
  .st-hero-copy { text-align: left; }
  .st-tagline { margin-left: 0; }
  .st-ctas { justify-content: flex-start; }
  .st-native { font-size: clamp(50px, 5.2vw, 96px); }

  .st-intro { padding: 140px 48px 96px; }
  .st-crafts { padding: 0 48px 120px; gap: 16px; }
  .st-craft { padding: 32px; }
  .st-next { padding: 96px 48px 120px; }
}

/* The States link makes the desktop nav one item longer: tighten it on smaller laptops. */
@media (min-width: 960px) and (max-width: 1199px) {
  .hdr-nav { gap: 22px; }
}

.st-photo { margin: 40px auto 0; max-width: 520px; }
.st-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--arch); }
.st-photo figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }