/* ---- fonts.css ---- */
/* css/fonts.css — GENERATED by internal/perf/subset-fonts.py; do not hand-edit.
   Self-hosted, subset web fonts, font-display: swap (phase 2 redesign, 14 Sep 2026):
   Hanken Grotesk 400-650 for UI and body; Newsreader 400 upright and italic at the display
   optical size; Anek Malayalam 500 cut to the twelve month names. Each -ext face holds the
   rest of Google's latin subset. The two Fallback faces are local Georgia and Arial with
   metric overrides measured in Chrome against the real faces, so the swap does not shift the layout. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 98.4%; ascent-override: 74.7%; descent-override: 26.9%; line-gap-override: 0%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial'); size-adjust: 100.3%; ascent-override: 99.7%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 650; font-display: swap;
  src: url('/fonts/hanken-grotesk-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+201A, U+201E, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 650; font-display: swap;
  src: url('/fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/newsreader-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/newsreader.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/newsreader-italic-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Anek Malayalam'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/anek-malayalam-months.woff2') format('woff2');
  unicode-range: U+0020, U+0D02, U+0D07, U+0D15, U+0D19-0D1A, U+0D1F, U+0D24-0D25, U+0D27-0D28, U+0D2D-0D2E, U+0D30, U+0D32, U+0D35-0D36, U+0D3E-0D41, U+0D43, U+0D47, U+0D4D, U+0D7C, U+200C-200D;
}

/* ---- tokens.css ---- */
/* css/tokens.css — The Kerala Wedding Collective
 *
 * Phase 2 redesign, 14 Sep 2026: "Kasavu and kumkumam, at dawn".
 * A Kerala wedding morning: off-white kasavu cotton with one gold border,
 * brass lamp light, monsoon green, one line of kumkumam red.
 *
 *   Kasavu ivory   #F6F1E4  ground
 *   Backwater ink  #1F2E27  text (12.6:1 on ivory)
 *   Monsoon green  #2E5E3E  the one call to action, the dusk footer band (white 7.5:1)
 *   Kasavu gold    #B8892B  borders and rules only (2.8:1: never text)
 *   Kumkumam       #C8401F  "held" month marks and one word per page, large text only
 *
 * Type: Newsreader upright 400 for display, Hanken Grotesk for UI and body at
 * 17 px, Anek Malayalam for the month names. No gradient text, no rose, no
 * second colour system. This file replaces the old warm-white "thread" tokens
 * and the botanical override layer (css/design.css, deleted).
 *
 * Token names that inline styles in the templates still read (--muted, --t-sm,
 * --s-*, --line) are kept on purpose.
 */

:root {
  /* ---- ground ---- */
  --ivory:      #F6F1E4;
  --paper:      #FBF8F0;   /* a raised sheet: forms, answer blocks */
  --ivory-deep: #EDE5D2;   /* the band a shade down, table heads */

  /* ---- ink ---- */
  --ink:        #1F2E27;
  --ink-2:      #44544B;   /* secondary text, 7.4:1 on ivory */
  --muted:      #5B685F;   /* captions and metadata, 5.4:1 on ivory */

  /* ---- colour that means something ---- */
  --green:      #2E5E3E;
  --green-deep: #234A31;
  --green-dusk: #1C3A28;   /* footer band */
  --gold:       #B8892B;
  --gold-soft:  #D9C08A;
  --kumkumam:   #C8401F;
  --kumkum-text:#A8341A;   /* the red at text sizes, 5.9:1 on ivory */
  --leaf:       #3E7A4D;   /* success only */

  --line:       #D8CDB5;   /* neutral hairline */
  --line-soft:  #E6DDC9;

  /* ---- the kasavu border ----
     A mundu border is a broad gold band with a fine line beside it. Drawn in
     CSS so it costs nothing: 4px gold, 3px ground, 1px gold. */
  --kara: linear-gradient(to bottom, var(--gold) 0 4px, transparent 4px 7px, var(--gold) 7px 8px);
  --kara-v: linear-gradient(to right, var(--gold) 0 4px, transparent 4px 7px, var(--gold) 7px 8px);

  /* ---- semantic aliases (older templates) ---- */
  --bg: var(--ivory);
  --fg: var(--ink);
  --white: var(--paper);
  --cocoa: var(--ink);
  --cocoa-soft: var(--ink-2);
  --rule: var(--line-soft);
  --rule-deep: var(--line);

  /* ---- type ---- */
  --font-display: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --font-body:    'Hanken Grotesk', 'Hanken Fallback', Arial, sans-serif;
  --font-ml:      'Anek Malayalam', 'Noto Sans Malayalam', sans-serif;

  --t-xs:   0.8125rem;   /* 13px: the floor for any UI text */
  --t-sm:   0.9375rem;   /* 15px */
  --t-base: 1.0625rem;   /* 17px */
  --t-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-lg:   clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --t-2xl:  clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  --t-3xl:  clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);

  --lh-body: 1.6;

  /* ---- space ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --gutter: clamp(1.125rem, 4vw, 2.75rem);
  --wrap: 1240px;
  --narrow: 740px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- style.css ---- */
/* css/style.css — base, type, layout and the chrome (header, footer, forms,
   call bar). Phase 2 redesign, 14 Sep 2026. Components: components.css;
   homepage: home.css; tokens: tokens.css. One system, no !important layer. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@view-transition { navigation: auto; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: var(--kumkumam); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--t-lg); line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: var(--t-base); font-weight: 650; margin: 0 0 var(--s-2); }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
strong, b { font-weight: 650; }
small { font-size: var(--t-xs); }

/* The old accent word (<em class="thread"> on the last word of a heading) was
   the sister sites' shared tell. It now reads as the heading around it. */
.thread { font: inherit; color: inherit; font-style: inherit; }

/* The one italic phrase a page may carry. */
.voice { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--narrow); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-5); text-decoration: none;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ---- the kasavu border, as a rule ---- */
.kara, hr.zari-rule {
  display: block; border: 0; height: 8px; margin: 0;
  background: var(--kara);
}

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 50; background: var(--ivory); }
.site-header::before { content: ''; display: block; height: 8px; background: var(--kara); }
.site-header > .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 4.75rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand-lamp { width: 20px; height: 34px; flex: none; }
.brand b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.brand span { display: none; }

.nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.05vw, 1.2rem); }
.nav a { text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); padding-block: 0.4rem; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); box-shadow: inset 0 -2px 0 var(--kumkumam); }
.nav .btn { margin-left: var(--s-1); color: #fff; padding: 0.7rem 1.2rem; min-height: 2.75rem; }
.nav-toggle {
  display: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid var(--line); padding: 0.55rem 1.1rem; cursor: pointer; border-radius: 999px;
}

@media (max-width: 1379px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); padding: var(--s-3) var(--gutter) var(--s-6);
    border-bottom: 8px solid transparent; border-image: var(--kara) 0 0 8 0 / 0 0 8px 0 stretch;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.85rem 0; font-size: var(--t-base); border-bottom: 1px solid var(--line-soft); }
  .nav a[aria-current="page"]:not(.btn) { box-shadow: inset 3px 0 0 var(--kumkumam); padding-left: 0.8rem; }
  .nav .btn { margin: var(--s-5) 0 0; border-bottom: 0; }
}

/* ---------------------------------------------------------------- buttons */
/* One call to action colour: monsoon green. Everything else is a text link or
   an outline. No arrows appended to labels. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: inherit; font-size: var(--t-sm); font-weight: 600; line-height: 1.1;
  padding: 0.95rem 1.6rem; min-height: 3rem; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary, .btn-gold { background: var(--green); color: #fff; }
.btn-primary:hover, .btn-gold:hover { background: var(--green-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }
.btn[disabled] { opacity: .55; cursor: progress; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.text-link:hover { text-decoration-color: var(--kumkumam); }

/* ---------------------------------------------------------------- bands */
.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
.band-tight { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.section { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.band-warm { background: var(--ivory-deep); }
.band-glow, .band-dark { background: var(--ivory-deep); }

/* ---------------------------------------------------------------- text bits */
/* The label above a heading: sentence case, the kasavu border in miniature. */
.eyebrow, .design-kicker {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-2); margin: 0 0 var(--s-4);
}
.eyebrow::before, .design-kicker::before {
  content: ''; width: 1.75rem; height: 8px; flex: none; background: var(--kara);
}
.lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.lede-sm { font-size: var(--t-base); color: var(--ink-2); max-width: 62ch; }
.caption, figcaption { font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }
.fineprint { font-size: var(--t-xs); color: var(--muted); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: 0; max-width: 22ch; }

.crumbs { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-5); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink-2); }

.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--gold); }

/* ---- the head of every inner page ---- */
.page-head { padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem); position: relative; }
.page-head > .wrap::after { content: ''; display: block; height: 8px; background: var(--kara); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.page-head h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem); max-width: 20ch; }
.page-head .lede { font-size: var(--t-md); }

/* ---------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea,
.kwc-datecheck input, .pg-dossier-brand input {
  font: inherit; font-size: var(--t-base); color: var(--ink); width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 0.8rem 0.95rem; min-height: 3.1rem;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .kwc-datecheck input:focus, .pg-dossier-brand input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.field-hint { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }
.field-optional { font-weight: 400; color: var(--muted); }
.form-actions { margin-top: var(--s-5); display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
#form-status { min-height: 0; margin: 0; }
[hidden] { display: none !important; }
[data-delivery-status] { flex: 1 1 100%; margin: var(--s-4) 0 0; line-height: 1.55; }
[data-delivery-status][data-state=error] { color: #9d2525; }
[data-delivery-status][data-state=success] { font-size: var(--t-md); font-weight: 600; color: var(--leaf); }
[data-delivery-status] a { text-decoration: underline; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* The enquiry panel: a sheet of kasavu, gold border along the top. */
.enquire {
  position: relative; background: var(--paper);
  padding: clamp(1.5rem, 4.5vw, 3.75rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(2rem, 5vw, 5rem);
  grid-template-areas: "h form" "lede form" "after form" ". form";
  align-content: start;
}
.enquire::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: var(--kara); }
.enquire > h2 { grid-area: h; font-size: var(--t-xl); margin-top: var(--s-3); }
.enquire > .lede { grid-area: lede; font-size: var(--t-base); }
.enquire > form { grid-area: form; margin-top: var(--s-3); }
.enquire > .after-enquire { grid-area: after; }
@media (max-width: 900px) {
  .enquire { grid-template-columns: 1fr; grid-template-areas: "h" "lede" "form" "after"; }
}

/* ---------------------------------------------------------------- footer */
/* The dusk band: monsoon green under a gold border. */
.site-footer { margin-top: clamp(3rem, 7vw, 6rem); background: var(--green-dusk); color: #E9E4D6; font-size: var(--t-sm); }
.site-footer::before { content: ''; display: block; height: 8px; background: var(--kara); }
.site-footer > .wrap { padding-block: clamp(3rem, 6vw, 4.5rem) var(--s-4); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.footer-grid > * { min-width: 0; overflow-wrap: anywhere; }
.site-footer .brand { color: #F6F1E4; }
.site-footer .brand b { font-size: 1.6rem; white-space: normal; max-width: 12ch; }
.site-footer h3 { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; color: var(--gold-soft); margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: #F6F1E4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold-soft); }
.site-footer p { color: #D9D4C5; }
.footer-credit { margin-top: var(--s-4); }
.footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(217, 192, 138, .35); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-xs); }
.footer-base p { margin: 0; color: #CFCABA; }
.footer-owner { max-width: 64ch; }
.design-image-note { font-size: var(--t-xs); color: #CFCABA; padding-block: 0 var(--s-6); margin: 0 auto; }
.design-image-note a { color: #F6F1E4; text-decoration: underline; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; gap: var(--s-3); padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--ivory); border-top: 1px solid var(--line);
  transition: transform .35s var(--ease);
}
.callbar .btn { flex: 1; min-height: 2.9rem; padding-block: 0.7rem; }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: 4.6rem; }
  .js .callbar:not([data-show]) { transform: translateY(110%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (max-width: 520px) {
  .site-header > .wrap { min-height: 4.1rem; gap: var(--s-3); }
  .brand b { white-space: normal; font-size: 1.12rem; max-width: 9ch; }
  .brand-lamp { width: 17px; height: 29px; }
}

/* ---- components.css ---- */
/* css/components.css — cards, the lamp, the Muhurtham Ribbon, tables, answers,
   FAQ, the reading rail, the lead strips. Phase 2 redesign, 14 Sep 2026. */

/* ---------------------------------------------------------------- the lamp */
/* A nilavilakku flame in CSS: a teardrop lit from inside. At rest it is a
   quiet ember; on hover it catches with a short two-step flicker (under 600 ms,
   once per hover). Reduced motion: it simply brightens. */
.flame, .venue-card .card-meta::before, .lamp-row .row-name::before {
  content: ''; display: inline-block; width: 0.55em; height: 0.82em; flex: none;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #FFE7AE 0 22%, #EBA53C 52%, var(--kumkumam) 100%);
  opacity: .55; vertical-align: -0.05em; margin-right: 0.55em;
  transform-origin: 50% 100%;
  transition: opacity .3s var(--ease);
}
@keyframes catch { 0% { opacity: .55; } 28% { opacity: 1; } 44% { opacity: .62; } 64%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .venue-card:hover .card-meta::before, .venue-card:focus-visible .card-meta::before,
  .lamp-row:hover .row-name::before, .lamp-row:focus-visible .row-name::before { animation: catch .56s steps(1, end) both; }
}
.venue-card:hover .card-meta::before, .lamp-row:hover .row-name::before,
.venue-card:focus-visible .card-meta::before, .lamp-row:focus-visible .row-name::before { opacity: 1; }

/* ---------------------------------------------------------------- grids & cards */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* A card is a length of cloth: the kasavu border on top, words below, no box. */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) 0 var(--s-4); text-decoration: none; color: var(--ink);
  border-top: 8px solid transparent; border-image: var(--kara) 8 0 0 0 / 8px 0 0 0 stretch;
}
.card h3 { margin: 0; font-size: var(--t-lg); }
.card p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
a.card h3 { transition: color .2s var(--ease); }
a.card:hover h3 { color: var(--green); }
.card-meta { font-size: var(--t-xs); font-weight: 600; color: var(--muted) !important; letter-spacing: 0; text-transform: none; }

/* Venue cards: photograph when the venue has a registered one, otherwise the
   card is typographic. No blank "no photograph" tiles. */
.venue-card { gap: 0.35rem; }
.venue-card .card-meta { display: flex; align-items: center; }
.venue-card h3 { font-size: 1.45rem; }
.venue-card .body { display: contents; }
.venue-card.has-photo { border-top: 0; padding-top: 0; }
.design-venue-card-photo, .venue-card .shot { margin: 0 0 var(--s-3); aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory-deep); outline: 1px solid var(--gold-soft); outline-offset: -6px; }
.design-venue-card-photo img, .venue-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (prefers-reduced-motion: no-preference) { .venue-card:hover .design-venue-card-photo img { transform: scale(1.03); } }
.no-shot { display: none; }
.facts { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.facts b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- photographs */
.shot { overflow: hidden; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.shots img { width: 100%; }
@media (max-width: 800px) { .shots { grid-template-columns: 1fr 1fr; } }
.design-photo { margin: 0; }
.design-photo img { width: 100%; height: auto; }
.framed { position: relative; margin: 0; }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.framed img { outline: 1px solid rgba(246, 241, 228, .8); outline-offset: -9px; }
.design-venue-hero { margin: var(--s-6) 0 0; max-width: 980px; }
.design-venue-hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.design-venue-hero figcaption { margin-top: var(--s-2); }
.no-photos { border-left: 8px solid transparent; border-image: var(--kara-v) 0 0 0 8 / 0 0 0 8px stretch; padding: var(--s-2) 0 var(--s-2) var(--s-5); max-width: var(--narrow); }
.no-photos p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.journal-hero img { display: block; width: auto; max-width: 100%; max-height: min(70vh, 720px); margin-inline: auto; height: auto; }

/* Credits: one collapsed block per page, never on the photograph. */
.photo-credits { margin: var(--s-6) auto 0; font-size: var(--t-xs); color: var(--muted); }
.photo-credits summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.photo-credits ul { margin: var(--s-3) 0 0; padding-left: 1.1rem; display: grid; gap: var(--s-2); }
.photo-credits a { text-decoration: underline; }

/* ---------------------------------------------------------------- the Muhurtham Ribbon */
/* Twelve Malayalam months as twelve threads. The thread fills kumkumam for a
   month Kerala marries in, half for Meenam, and stays an empty gold outline for
   a month kept clear. The lamp stands over the month the reader is in. */
.muhurtham { position: relative; }
.muhurtham-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-5); }
.muhurtham-head h2 { font-size: var(--t-xl); margin: 0; }
.muhurtham-key { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-2); }
.muhurtham-key b { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 500; }
.muhurtham-key i { width: 0.6rem; height: 1.1rem; display: inline-block; border: 1px solid var(--gold); }
.muhurtham-key b[data-state="held"] i { background: var(--kumkumam); border-color: var(--kumkumam); }
.muhurtham-key b[data-state="part"] i { background: linear-gradient(to top, var(--kumkumam) 50%, transparent 50%); }

.muhurtham-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; align-content: start; gap: 0.15rem; padding: var(--s-4) 0.45rem; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-left: 1px solid var(--line-soft); min-width: 0; }
.month:first-child { border-left: 0; }
.month .ml { font-family: var(--font-ml); font-weight: 500; font-size: 0.95rem; line-height: 1.2; color: var(--ink-2); }
.month b { font-family: var(--font-display); font-weight: 400; font-size: 0.98rem; line-height: 1.15; white-space: nowrap; letter-spacing: -0.005em; }
.month em { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.month .thread-bar { display: block; width: 10px; height: 5.5rem; margin: var(--s-3) 0 var(--s-2); border: 1px solid var(--gold); position: relative; overflow: hidden; }
.month .thread-bar::after { content: ''; position: absolute; inset: 0; background: var(--kumkumam); transform-origin: 50% 100%; transform: scaleY(0); }
.month[data-state="held"] .thread-bar { border-color: var(--kumkumam); }
.month[data-state="held"] .thread-bar::after { transform: scaleY(1); }
.month[data-state="part"] .thread-bar::after { transform: scaleY(.5); }
.month > span:not(.ml):not(.thread-bar) { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); }
.month[data-now] { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.month[data-now]::before { content: ''; position: absolute; top: 0.85rem; right: 0.6rem; width: 0.6rem; height: 0.9rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 72%, #FFE7AE 0 22%, #EBA53C 52%, var(--kumkumam) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .month .thread-bar::after { animation: warp .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
  @keyframes warp { from { transform: scaleY(0); } }
}
@media (max-width: 1239px) {
  .muhurtham-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .month b { font-size: 1.15rem; }
  .month:nth-child(7) { border-left: 0; }
  .month:nth-child(n+7) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 620px) {
  .muhurtham-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .month { border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); padding: var(--s-3) var(--s-2); }
  .month:nth-child(3n+1) { border-left: 0; }
  .month:nth-child(-n+3) { border-top: 0; }
  .month .thread-bar { height: 2.6rem; }
  .month > span:not(.ml):not(.thread-bar) { display: none; }
}
/* The compact ribbon (homepage) keeps each month's note for readers and
   crawlers but shows it in the status line when the month is tapped. */
.muhurtham[data-compact] .month > span:not(.ml):not(.thread-bar) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.faith-notes { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.faith-note h3 { font-size: var(--t-lg); }
.faith-note p { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s-2); }
@media (max-width: 800px) { .faith-notes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.filters button { font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; min-height: 2.5rem; cursor: pointer; }
.filters button:hover { border-color: var(--ink-2); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.filter-count { font-size: var(--t-sm); color: var(--muted); margin: var(--s-3) 0 var(--s-5); }

/* ---------------------------------------------------------------- facts & tables */
/* The spec sheet: five facts set like a tailor's measurement card. */
.planner-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0; margin: var(--s-5) 0; border-top: 8px solid transparent; border-image: var(--kara) 8 0 0 0 / 8px 0 0 0 stretch; }
.planner-facts > div { display: grid; gap: 0.25rem; align-content: start; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.planner-facts b { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.planner-facts span { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--ink); }

.table-scroll { overflow-x: auto; margin: var(--s-5) 0; border-top: 8px solid transparent; border-image: var(--kara) 8 0 0 0 / 8px 0 0 0 stretch; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
table.data caption { caption-side: bottom; text-align: left; padding-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }
table.data th, table.data td { text-align: left; padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data thead th { font-size: var(--t-xs); font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--paper) 80%, transparent); }
table.data td a { font-weight: 550; }
@media (max-width: 700px) {
  table.data { font-size: var(--t-xs); min-width: 34rem; }
  table.data th:first-child, table.data td:first-child { position: sticky; left: 0; background: var(--ivory); z-index: 1; max-width: 10rem; box-shadow: 6px 0 8px -8px rgba(31, 46, 39, .3); }
}

/* ---------------------------------------------------------------- answers & faq */
.answer-block { background: var(--paper); padding: var(--s-5) var(--s-6) var(--s-5) calc(var(--s-6) + 8px); margin: var(--s-6) 0; position: relative; }
.answer-block::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--kara-v); }
.answer-block h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.answer-block p { margin: 0; font-size: var(--t-base); color: var(--ink); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; padding: var(--s-4) 3rem var(--s-4) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 0.4rem; top: 50%; width: 14px; height: 1.5px; background: var(--green); transition: transform .3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details > p, .faq .faq-body { padding: 0 0 var(--s-5); margin: 0; color: var(--ink-2); max-width: 68ch; }

/* ---------------------------------------------------------------- lists */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); column-gap: var(--s-6); }
.link-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.link-list a { font-weight: 550; text-decoration: none; }
.link-list a:hover { text-decoration: underline; text-decoration-color: var(--kumkumam); }
.link-list span { font-size: var(--t-xs); color: var(--muted); text-align: right; }
.shortlist li { flex-wrap: wrap; }
.shortlist li p { width: 100%; margin: 0.25rem 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.sources li { font-size: var(--t-sm); margin-bottom: var(--s-2); }

.timeline { list-style: none; margin: var(--s-5) 0; padding: 0; border-left: 1px solid var(--gold); }
.timeline li { padding: var(--s-3) 0 var(--s-3) var(--s-5); position: relative; font-size: var(--t-sm); color: var(--ink-2); }
.timeline li::before { content: ''; position: absolute; left: -4px; top: 1.15rem; width: 7px; height: 7px; background: var(--kumkumam); }
.timeline li b { display: block; color: var(--ink); font-weight: 650; }
.worked { margin: var(--s-5) 0; }
.worked table.data td:first-child { font-weight: 550; color: var(--ink); }

/* ---------------------------------------------------------------- after the form */
.after-enquire { margin-top: var(--s-6); }
.after-enquire .eyebrow { margin-bottom: var(--s-3); }
.after-enquire ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s-4); }
.after-enquire li { counter-increment: step; position: relative; padding-left: 2.4rem; font-size: var(--t-sm); color: var(--ink-2); }
.after-enquire li::before { content: counter(step); position: absolute; left: 0; top: -0.2rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--kumkum-text); }
.after-enquire li b { display: block; color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- the abroad module */
.abroad-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin: var(--s-4) 0 var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.abroad-note .fx-line { margin: 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 60ch; font-variant-numeric: tabular-nums; }
.kwc-abroad { margin-top: var(--s-7) !important; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); }
aside[data-booking-guide-link] { padding: var(--s-5) var(--gutter) !important; margin: var(--s-6) auto 0 !important; max-width: var(--wrap) !important; font-family: var(--font-display); font-size: var(--t-lg); }
aside[data-booking-guide-link] a { text-decoration-color: var(--gold); }

/* ---------------------------------------------------------------- lead strips */
/* The date check and the venue rates box. Static HTML (see kasavu-finalize.js);
   js/lead-surfaces.js only mounts them where the build did not. */
.kwc-datecheck, .pg-dossier-brand { margin: var(--s-6) 0; padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kwc-datecheck .dc-head, .pg-dossier-brand .dc-head { display: grid; gap: 0.2rem; margin: 0 0 var(--s-4); }
.kwc-datecheck strong, .pg-dossier-brand strong { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); line-height: 1.2; }
.kwc-datecheck .dc-head span, .pg-dossier-brand .dc-head span { font-size: var(--t-sm); color: var(--ink-2); }
.kwc-dc, .pg-dossier-form-b { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; position: relative; }
.kwc-dc input, .pg-dossier-form-b input { flex: 1 1 11rem; min-width: 0; width: auto; }
.kwc-dc button, .pg-dossier-form-b button { flex: 0 1 auto; }

/* ---------------------------------------------------------------- reading layout */
/* Long pages get a contents rail on the left, bordered like a mundu's edge. */
.design-reading-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.design-reading-body { min-width: 0; }
.design-reading-body .wrap { padding-inline: 0; max-width: 60rem; margin-inline: 0; }
.design-reader { padding-top: clamp(2rem, 4.5vw, 3.5rem); }
.design-reader nav { position: sticky; top: var(--s-5); display: grid; gap: 0; padding-left: var(--s-4); border-left: 8px solid transparent; border-image: var(--kara-v) 0 0 0 8 / 0 0 0 8px stretch; max-height: calc(100vh - 3rem); overflow: auto; }
.design-reader .design-kicker { margin-bottom: var(--s-3); }
.design-reader .design-kicker::before { display: none; }
.design-reader a { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); text-decoration: none; padding: 0.45rem 0; }
.design-reader a:hover, .design-reader a[aria-current="true"] { color: var(--ink); }
.design-reader a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--kumkumam); padding-left: 0.6rem; margin-left: -0.6rem; }
.design-reader a.design-reader-enquire { margin-top: var(--s-4); font-weight: 600; color: var(--green); font-size: var(--t-sm); }
h2[id] { scroll-margin-top: var(--s-5); }
@media (max-width: 960px) {
  .design-reading-layout { display: block; padding-inline: 0; }
  .design-reading-body .wrap { padding-inline: var(--gutter); }
  .design-reader { padding: var(--s-4) 0 0; }
  .design-reader nav { position: static; display: flex; gap: var(--s-2); overflow-x: auto; border: 0; padding: 0 var(--gutter) var(--s-2); max-height: none; scrollbar-width: none; }
  .design-reader nav .design-kicker { display: none; }
  .design-reader a { flex: none; max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.9rem; }
  .design-reader a.design-reader-enquire { margin-top: 0; border-color: var(--green); }
  .design-reader a[aria-current="true"] { box-shadow: none; margin-left: 0; padding-left: 0.9rem; border-color: var(--kumkumam); }
}

.design-crosslinks { padding-block: var(--s-6); font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--line); margin-top: var(--s-6); }
.design-crosslinks p { max-width: 70ch; }

/* ---------------------------------------------------------------- venue book on phones */
.grid-more { display: none; margin: var(--s-5) 0 0; text-align: center; }
@media (max-width: 640px) {
  #venue-grid[data-collapsed="true"] > :nth-child(n+13) { display: none; }
  #venue-grid[data-collapsed="true"] + .grid-more { display: block; }
}

/* ---- home.css ---- */
/* css/home.css — the homepage (phase 2 redesign, 14 Sep 2026).
   One orchestrated moment: on load the lamp is lit and the twelve month
   threads rise. Everything after that is still. */

/* ---------------------------------------------------------------- 1. hero */
.home-hero { padding-block: clamp(1.25rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1rem, 4vw, 4rem); }
.home-hero h1 { font-size: clamp(2.5rem, 1.1rem + 4.3vw, 5.1rem); line-height: 0.99; letter-spacing: -0.025em; max-width: 17.5ch; margin: 0; }
.hero-lamp { width: clamp(4.5rem, 12.5vw, 12rem); padding-bottom: 0.2rem; }
.lamp-hero { width: 100%; height: auto; overflow: visible; }
.flame-svg { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .flame-svg { animation: light 1.1s var(--ease) backwards; animation-delay: var(--d, 0ms); }
  @keyframes light { 0% { opacity: 0; transform: scale(.25); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
}
.hero-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5) clamp(2rem, 6vw, 6rem); align-items: end; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero-foot .lede { margin: 0; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin: 0; justify-content: flex-end; }
.hero-ribbon { margin-top: clamp(2rem, 4vw, 3.25rem); scroll-margin-top: var(--s-4); }
.hero-ribbon .muhurtham-head h2 { font-size: var(--t-lg); }
.ribbon-foot { margin: var(--s-4) 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 75ch; }

/* the date check under the ribbon */
.ribbon-check { margin: 0; padding: var(--s-5) 0 var(--s-2); border: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-4) var(--s-6); align-items: center; }
.ribbon-status { margin: 0; min-height: 6.4rem; font-size: var(--t-base); color: var(--ink-2); display: grid; align-content: center; }
.ribbon-status strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--kumkum-text); display: block; line-height: 1.15; }
.ribbon-check { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ribbon-check .kwc-dc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.ribbon-check .kwc-dc input { width: 100%; }
.ribbon-check .kwc-dc button { min-height: 3.1rem; }
.ribbon-check .dc-hint { grid-column: 1 / -1; }
@media (max-width: 480px) { .ribbon-check .kwc-dc { grid-template-columns: 1fr; } }
.month { cursor: pointer; transition: background-color .25s var(--ease); }
.month:hover { background: color-mix(in srgb, var(--paper) 80%, transparent); }
.month[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 -3px 0 var(--green); }

@media (max-width: 900px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-actions { justify-content: flex-start; }
  .ribbon-check { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) 3.4rem; align-items: start; gap: var(--s-3); }
  .hero-lamp { width: 3.4rem; padding: 2.4rem 0 0; }
  .home-hero h1 { font-size: clamp(2.3rem, 1.2rem + 5.4vw, 3rem); line-height: 1.02; }
  .hero-actions .btn { flex: 1 1 100%; }
  .ribbon-status { min-height: 8.6rem; align-content: start; }
}

/* ---------------------------------------------------------------- 2. definition */
.home-define { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--paper); }
.home-define .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s-5) clamp(2rem, 6vw, 6rem); align-items: start; }
.home-define h2 { font-size: var(--t-xl); margin: 0; }
.home-define p { margin: 0; font-size: var(--t-md); line-height: 1.6; color: var(--ink); max-width: 64ch; }
@media (max-width: 800px) { .home-define .wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 3. communities */
.home-communities { padding-block: clamp(3.5rem, 8vw, 7rem); }
.communities-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.communities-pictures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); position: sticky; top: var(--s-5); }
.pic-couple { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; overflow: hidden; }
.pic-couple img { object-position: 50% 35%; }
.pic-minnu { aspect-ratio: 1; overflow: hidden; }
.communities-pictures .caption { align-self: end; margin: 0; }
.communities-list h2 { margin-bottom: var(--s-4); }
.lamp-rows { margin: var(--s-6) 0 var(--s-5); border-top: 1px solid var(--line); }
.lamp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.row-name { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; display: flex; align-items: center; transition: color .2s var(--ease); }
.lamp-row .row-name::before { width: 0.42em; height: 0.64em; margin-right: 0.5em; }
.row-aka { font-size: var(--t-sm); color: var(--muted); padding-left: calc(0.42em * 2.35 + 0.2rem); }
.row-lede { font-size: var(--t-base); color: var(--ink-2); max-width: 58ch; padding-left: calc(0.42em * 2.35 + 0.2rem); }
.lamp-row:hover .row-name { color: var(--green); }
@media (max-width: 900px) {
  .communities-grid { grid-template-columns: 1fr; }
  .communities-pictures { position: static; order: 2; }
  .row-aka, .row-lede { padding-left: 0; }
}

/* ---------------------------------------------------------------- 4. venue book */
.home-venues { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--ivory-deep); }
.venues-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: var(--s-7); }
.venues-head h2 { margin: 0; max-width: 14ch; }
.venues-head p { margin: 0; }
.venue-feature { row-gap: var(--s-7); }
.home-venues .design-venue-card-photo { background: var(--ivory); }
.place-index { margin-top: var(--s-8); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: center; padding-top: var(--s-5); border-top: 8px solid transparent; border-image: var(--kara) 8 0 0 0 / 8px 0 0 0 stretch; }
.place-index h3 { font-size: var(--t-lg); margin: 0; }
.place-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.place-index a { text-decoration: none; font-size: var(--t-base); white-space: nowrap; }
.place-index a span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25em; }
.place-index a b { font-weight: 500; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.place-index a:hover span { text-decoration-color: var(--kumkumam); }
.place-index p { margin: 0; }
@media (max-width: 900px) {
  .venues-head { grid-template-columns: 1fr; }
  .place-index { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 5. cost */
.home-cost { padding-block: clamp(3.5rem, 8vw, 7rem); }
.cost-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) clamp(2rem, 6vw, 6rem); align-items: end; }
.cost-head h2 { margin: 0; max-width: 15ch; }
.cost-head p { margin: 0; }
.cost-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s-7) 0 var(--s-6); border-top: 1px solid var(--line); }
.cost-figures > div { padding: var(--s-5) var(--s-5) 0 0; border-right: 1px solid var(--line-soft); }
.cost-figures > div + div { padding-left: var(--s-5); }
.cost-figures > div:last-child { border-right: 0; }
.cost-figures dt { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.cost-figures dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 1.5rem + 3.8vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.cost-figures dd.note { font-family: var(--font-body); font-size: var(--t-sm); letter-spacing: 0; color: var(--muted); margin-top: var(--s-2); line-height: 1.45; }
.cost-figures .is-median dd:not(.note) { color: var(--kumkum-text); }
.cost-strip { margin: 0; }
.strip-line { position: relative; height: 3.4rem; border-bottom: 1px solid var(--ink-2); }
.strip-line i { position: absolute; bottom: 0; width: 1px; height: 1.6rem; background: var(--gold); transform: translateX(-50%); }
.strip-median { position: absolute; bottom: -0.35rem; width: 3px; height: 3.2rem; background: var(--kumkumam); transform: translateX(-50%); }
.cost-strip figcaption { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.cost-fx { margin: var(--s-5) 0 0; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cost-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin: var(--s-5) 0 0; }
@media (max-width: 800px) {
  .cost-head { grid-template-columns: 1fr; }
  .cost-figures { grid-template-columns: 1fr; }
  .cost-figures > div, .cost-figures > div + div { padding: var(--s-4) 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cost-figures dd:not(.note) { font-size: 2.9rem; }
  .cost-strip figcaption span:nth-child(2) { display: none; }
}

/* ---------------------------------------------------------------- 6. from abroad */
.home-abroad { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--paper); }
.home-abroad .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.abroad-pic { aspect-ratio: 4 / 3.2; overflow: hidden; }
.abroad-copy h2 { max-width: 16ch; }
.steps { list-style: none; counter-reset: s; margin: var(--s-6) 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.steps li::before { content: counter(s); grid-row: span 2; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--kumkum-text); }
.steps li b { color: var(--ink); display: block; font-weight: 650; }
.abroad-links { font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 900px) { .home-abroad .wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 7. journal */
.home-journal { padding-block: clamp(3rem, 7vw, 6rem) var(--s-6); }
.journal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.journal-rows { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 8px solid transparent; border-image: var(--kara) 8 0 0 0 / 8px 0 0 0 stretch; }
.journal-rows a { display: grid; grid-template-columns: 11rem minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: baseline; }
.j-cat { font-size: var(--t-sm); color: var(--muted); }
.j-title { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.2; }
.j-ex { font-size: var(--t-sm); color: var(--ink-2); }
.journal-rows a:hover .j-title { color: var(--green); }
@media (max-width: 900px) { .journal-rows a { grid-template-columns: 1fr; } }

.home #enquire { padding-top: var(--s-7); }
.home .photo-credits { margin-bottom: 0; }

/* ---- pages.css ---- */
/* css/pages.css — inner templates (phase 2 redesign, 14 Sep 2026): the reading
   column, the Sadya Counter, venue pages, the enquiry page and the 404. */

/* ---------------------------------------------------------------- reading column */
.page-head { padding-bottom: 0; }
.page-head + section, .page-head + .wrap, .page-head + div { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.band-tight + .band-tight { padding-top: 0; }
.design-reading-body h2:not(.page-head h2) { font-size: var(--t-xl); line-height: 1.12; }
.design-reading-body .band-warm { background: var(--paper); margin-block: var(--s-6); }
.design-reading-body .band-warm > .wrap { padding: 0 clamp(1.25rem, 3vw, 2.5rem); }
.design-reading-body .band-warm + .band-tight { padding-top: var(--s-5); }
.design-reading-body .band-warm .table-scroll th:first-child,
.design-reading-body .band-warm .table-scroll td:first-child { background: var(--paper); }
.design-reading-body .band { padding-block: clamp(2rem, 5vw, 3.5rem); }
section.band-tight:has(> .wrap:empty) { display: none; }

/* ---------------------------------------------------------------- the Sadya Counter */
.sadya-counter { margin: var(--s-7) 0; background: var(--paper); padding: clamp(1.25rem, 3.5vw, 2.5rem); position: relative; scroll-margin-top: var(--s-5); }
.sadya-counter::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: var(--kara); }
.sc-head h3 { font-size: var(--t-xl); margin: var(--s-2) 0 var(--s-2); }
.sc-head p { font-size: var(--t-sm); color: var(--ink-2); max-width: 60ch; }
.sc-control { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s-5) 0 var(--s-4); }
.sc-control label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.sc-count { font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); line-height: 1; color: var(--kumkum-text); font-variant-numeric: tabular-nums; justify-self: start; }
.sc-control input[type=range] { grid-column: 1 / -1; width: 100%; margin-top: var(--s-4); accent-color: var(--green); height: 2.25rem; }
.sc-rows { border-top: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-2) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.sc-label b { display: block; font-weight: 650; }
.sc-label span { font-size: var(--t-xs); color: var(--muted); }
.sc-inr { display: block; font-family: var(--font-display); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.sc-fx { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-unpriced .sc-total { align-self: center; }
@media (max-width: 640px) { .sc-row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- venue pages */
[data-page="venue"] .page-head h1 { max-width: 18ch; }
[data-page="venue"] .planner-facts + p { font-size: var(--t-xs); color: var(--muted); }

/* ---------------------------------------------------------------- enquiry page */
[data-page="enquiry"] #enquire { padding-top: var(--s-5); }

/* ---------------------------------------------------------------- lead strip hint */
.dc-hint { flex: 1 1 100%; font-size: var(--t-xs); color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- read next */
.read-next { padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.read-next ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s-2); }
.read-next li::marker { color: var(--gold); }
[data-page="enquiry"] .page-head > .wrap::after { display: none; }

/* ---------------------------------------------------------------- phones */
.planner-facts > div { min-width: 0; }
.planner-facts span { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 620px) {
  .planner-facts { grid-template-columns: 1fr 1fr; }
  .planner-facts span { font-size: 1.15rem; }
  .answer-block { padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 8px); }
  .answer-block h3 { font-size: 1.3rem; }
  .kwc-dc input, .pg-dossier-form-b input { flex-basis: 100%; }
  .kwc-dc button, .pg-dossier-form-b button { flex: 1 1 100%; }
  .page-head h1 { font-size: clamp(2.1rem, 1.4rem + 3.6vw, 2.8rem); }
}

/* spacing after the page head wins over the stacked-band rule */
section.page-head + section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* the full ribbon inside the reading column: six months a row */
.design-reading-body .muhurtham-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.design-reading-body .month { border-left: 1px solid var(--line-soft); }
.design-reading-body .month:nth-child(6n+1) { border-left: 0; }
.design-reading-body .month:nth-child(n+7) { border-top: 1px solid var(--line-soft); }
.design-reading-body .month b { font-size: 1.15rem; }
@media (max-width: 620px) {
  .design-reading-body .muhurtham-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .design-reading-body .month:nth-child(6n+1) { border-left: 1px solid var(--line-soft); }
  .design-reading-body .month:nth-child(3n+1) { border-left: 0; }
  .design-reading-body .month:nth-child(-n+3) { border-top: 0; }
  .design-reading-body .month:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
}