/* ============================================================================
   PANIGRAHANA — DESIGN SYSTEM LAYER                              v1 · 2026-09-01
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   518 of 519 root pages carry their own inline <style> block. That produced 35
   different H1 sizes, 33 H2 sizes, 4 competing "gold" accents and 27 border-radius
   values. There was no design system — there were 518 forks. This layer is loaded
   LAST on every page, so on equal specificity it wins and the site resolves to one
   visual language without rewriting 518 stylesheets.

   PRINCIPLE
   Normalise the system (scale, rhythm, colour, radius, focus, robustness).
   Preserve art direction (a page's own hero, its imagery, its section design).
   Rules that must hold everywhere use class/attribute specificity; rules a page
   should still be able to art-direct use :where() so they lose gracefully.

   SEO/AEO/GEO IS UNTOUCHED. This file changes no markup, no headings, no schema,
   no links, no alt text. Presentation only.
   ========================================================================== */

:root {
  /* — Ink. Muted text was #7A6E62 on #FAF8F4 ≈ 4.3:1, which fails comfortable
       reading at small sizes. Raised to a tone that clears 5:1 and still reads
       as secondary. — */
  --ds-ink:       #1C1917;
  --ds-ink-2:     #3A352E;
  --ds-ink-muted: #6B6157;
  --ds-line:      #E5DDD0;
  --ds-line-soft: #EFE9DE;
  --ds-paper:     #FAF8F4;
  --ds-paper-2:   #F4EFE6;
  --ds-teal:      #0E4A40;
  --ds-teal-mid:  #1B6B5F;
  --ds-gold:      #B8925A;   /* the 431-use value wins; the other three retire */

  /* — One type scale. Every heading on the site resolves to these five steps. — */
  --ds-display: clamp(2.55rem, 5vw, 4.25rem);
  --ds-h1:      clamp(2.05rem, 3.7vw, 3.25rem);
  --ds-h2:      clamp(1.55rem, 2.6vw, 2.2rem);
  --ds-h3:      clamp(1.18rem, 1.7vw, 1.45rem);
  --ds-h4:      1.04rem;
  --ds-body:    1.02rem;
  --ds-small:   .9rem;
  --ds-caption: .79rem;
  --ds-eyebrow: .68rem;

  /* — One spacing rhythm. Sections, gutters and gaps all snap to it. — */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px; --ds-5: 24px;
  --ds-6: 32px; --ds-7: 48px; --ds-8: 64px; --ds-9: 72px; --ds-10: 120px;

  --ds-gutter: 24px;
  --ds-measure: 68ch;          /* readable line length for body copy */
  --ds-radius: 4px;            /* replaces 27 competing values */
  --ds-radius-pill: 999px;
  --ds-nav-h: 72px;
}

/* ── 1. ROBUSTNESS ─────────────────────────────────────────────────────────
   The complaints that are actually bugs: horizontal scroll, text overflowing
   its container, images distorting, tables blowing out the page on a phone. */

/* overflow-x:hidden on html/body creates a scroll container, which silently
   disables every position:sticky descendant. overflow-x:clip stops the sideways
   scroll without that side effect. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* Long unbroken strings (URLs, emails, ₹ figures) were forcing horizontal
   scroll on phones. Break them rather than letting them push the layout. */
:where(p, li, td, th, dd, dt, blockquote, figcaption, .faq-a) {
  overflow-wrap: break-word;
}

/* An <img> with only a width attribute renders at its intrinsic height and
   distorts. Never let that happen. */
:where(img, video) { max-width: 100%; }
img[width][height] { height: auto; }

/* Wide content scrolls inside its own box instead of breaking the page. */
:where(table) { width: 100%; border-collapse: collapse; }
:where(.spec, .cmp, table):not(.no-ds-scroll) { display: block; overflow-x: auto; }
@media (min-width: 761px) {
  :where(.spec, .cmp, table):not(.no-ds-scroll) { display: table; }
}
:where(pre, code) { overflow-x: auto; max-width: 100%; }

/* ── 2. TYPE ───────────────────────────────────────────────────────────────
   One scale, applied at element level so a page's own class-scoped hero rules
   (.hero h1, .bh h1 …) still win and keep their art direction. */

:where(h1) { font-size: var(--ds-h1); line-height: 1.1;  letter-spacing: -.01em; }
:where(h2) { font-size: var(--ds-h2); line-height: 1.18; letter-spacing: -.005em; }
:where(h3) { font-size: var(--ds-h3); line-height: 1.32; }
:where(h4) { font-size: var(--ds-h4); line-height: 1.4; }

/* Space headings by their relationship to what follows, not by a blanket margin.
   A heading belongs to the text under it — so more air above, less below. */
:where(h2, h3, h4):not(:first-child) { margin-top: var(--ds-7); }
:where(h2) + :where(p, ul, ol) { margin-top: var(--ds-3); }
:where(h3, h4) + :where(p, ul, ol) { margin-top: var(--ds-2); }

:where(p) { font-size: var(--ds-body); line-height: 1.75; }
:where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--ds-4); }

/* Body copy stops at a readable measure. Full-width paragraphs on a 1280px
   container were the single biggest reason pages read as documents, not design. */
:where(article, .article-body, .post-body, .mid, .content, .prose) :where(p, ul, ol) {
  max-width: var(--ds-measure);
}

/* Eyebrows/labels: one treatment everywhere. */
:where(.eyebrow, .znum, .seo-rel-eye, .fct, .kicker) {
  font-size: var(--ds-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ── 3. COLOUR ─────────────────────────────────────────────────────────────
   Muted greys were the low-contrast complaint. Lift them, and only them. */

:where(body) { color: var(--ds-ink); }
:where(.muted, .meta, figcaption, small, .fine, .dwg-cap, .rwl-facts) {
  color: var(--ds-ink-muted);
}

/* ── 4. LINKS — "one-page-to-another links are not evident" ────────────────
   In-copy links now carry a visible underline that thickens on hover, so a
   reader can see where they can go without hunting for colour alone. Nav,
   buttons, cards and footers are excluded — they have their own affordance. */

:where(article, .article-body, .post-body, .mid, .content, .prose, .faq-a) :where(p, li, dd) a:not(.btn):not(.nav-cta):not([class*="card"]):not([class*="cta"]) {
  color: var(--ds-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ds-teal) 32%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
:where(article, .article-body, .post-body, .mid, .content, .prose, .faq-a) :where(p, li, dd) a:not(.btn):not(.nav-cta):not([class*="card"]):not([class*="cta"]):hover {
  text-decoration-color: var(--ds-teal);
}

/* ── 5. CARDS & GRIDS — "uneven card heights", "too many boxes" ────────────
   Cards in a row now stretch to a common height, so a three-up grid reads as a
   row rather than as three unrelated blocks. Radius resolves to one value. */

/* Cards size to their own content. Forcing a row to a shared height was WRONG
   here: this site's cards carry wildly different payloads — a one-line caption
   next to a tall portrait photograph — so stretching produced cards with a
   heading at the top and 700px of white below it. That was the "unwanted gaps"
   complaint. Equal heights only work when the content is uniform; it isn't. */
:where([class*="grid"], .gal, .quotes, .motion, .seo-rel-grid, .bg, .rwl-grid,
       [class*="gallery"], [class*="photo"], [class*="cards"]) {
  align-items: start;
}
:where([class*="grid"], .gal, .quotes) > * { align-self: start; }
:where(.card, [class*="-card"], .q, .rwl-card, .seo-rel-card, .vcard, .tile) {
  border-radius: var(--ds-radius);
}

/* Kill the 27-value radius drift on the common furniture. */
:where(input, textarea, select, .btn, button):not([class*="round"]):not(.waf) {
  border-radius: var(--ds-radius);
}

/* Shadows were doing decorative work on cards that already had borders.
   One hairline border is quieter and reads as more considered. */
:where(.card, [class*="-card"], .q, .rwl-card) {
  box-shadow: none;
  border: 1px solid var(--ds-line);
  background: #fff;
}

/* ── 6. SECTION RHYTHM — "inconsistent spacing", "sections don't connect" ── */

/* One section owns its top space; the next one tightens so two adjacent sections
   don't stack 176px of dead air between them. */
:where(section) { padding-top: var(--ds-9); padding-bottom: var(--ds-9); }
:where(section) + :where(section) { padding-top: var(--ds-8); }
@media (max-width: 760px) {
  :where(section) { padding-top: var(--ds-7); padding-bottom: var(--ds-7); }
}

/* Consistent page gutter so nothing touches the screen edge on a phone. */
@media (max-width: 760px) {
  :where(.wrap, .mid, .fin, .container, .inner, .bh, .sec) {
    padding-left: var(--ds-gutter);
    padding-right: var(--ds-gutter);
  }
}

/* ── 7. IMAGES — "premium photography in tiny cards", "awkward crops" ──────
   Figures get real breathing room and their captions sit close to the image
   they describe rather than floating between two of them. */

:where(figure) { margin-left: 0; margin-right: 0; }
:where(figure) + :where(figure) { margin-top: var(--ds-5); }
:where(figcaption) {
  font-size: var(--ds-caption);
  line-height: 1.6;
  margin-top: var(--ds-2);
}
/* A photograph inside prose earns space above and below it. */
:where(article, .article-body, .post-body, .prose) :where(figure, img:not([class*="icon"]):not([class*="logo"])) {
  margin-top: var(--ds-6);
  margin-bottom: var(--ds-6);
}

/* ── 8. STICKY COLLISIONS — the CTA bar was landing on top of the nav ────── */

:where([class*="sticky"], [class*="-bar"], .pg-sticky, .sticky-cta) {
  z-index: 900;   /* below the nav (1000), above the page */
}
/* Anchor jumps used to land under the fixed header. */
:where([id]) { scroll-margin-top: calc(var(--ds-nav-h) + var(--ds-4)); }

/* ── 9. THE 93-PAGE BUG, CONTAINED ────────────────────────────────────────
   seo-interlinking.js is fixed, but if the strip is ever nested again it now
   presents as a proper full-width band rather than collapsing inside a quote. */

.seo-related-strip {
  display: block;
  width: 100%;
  clear: both;
  margin-top: var(--ds-8);
  padding: var(--ds-8) 0;
  border-top: 1px solid var(--ds-line);
  background: var(--ds-paper-2);
}
.seo-related-strip .seo-rel-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--ds-gutter); }
.seo-related-strip .seo-rel-eye { color: var(--ds-gold); margin-bottom: var(--ds-4); }
.seo-related-strip .seo-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--ds-3);
}
.seo-related-strip .seo-rel-card {
  display: block;
  padding: var(--ds-4) var(--ds-5);
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  font-size: var(--ds-small);
  line-height: 1.45;
  color: var(--ds-ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.seo-related-strip .seo-rel-card:hover {
  border-color: var(--ds-gold);
  transform: translateY(-1px);
}

/* ── 10. ACCESSIBILITY FLOOR ──────────────────────────────────────────────
   Keyboard users had no visible focus anywhere on the site. */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-teal);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 11. RECENCY — "what is published newly vs old has to be there" ───────
   A single, quiet marker the templates can apply. Reads as editorial, not as
   a SaaS badge. */

.ds-new {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  font-size: var(--ds-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-gold);
}
.ds-new::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ds-gold);
}
.ds-updated {
  font-size: var(--ds-caption);
  color: var(--ds-ink-muted);
  letter-spacing: .02em;
}

/* ── 12. MOBILE OVERFLOW GUARD ────────────────────────────────────────────
   A static scan found min-width > 400px on 21 pages, white-space:nowrap on 88,
   and fixed px widths on 2 — each of which forces horizontal scroll on a phone.
   Rather than editing 111 forked stylesheets, neutralise the causes here.
   Flex/grid children also default to min-width:auto, which is the classic reason
   a long word or a wide child blows out a row. */

@media (max-width: 520px) {
  :where(main, section, article, div, li, figure) > * { min-width: 0; }

  /* Long labels may wrap on a phone; they still hold their line on desktop. */
  :where(p, li, td, th, dd, figcaption, .fine, .meta) { white-space: normal; }

  /* Anything still declaring a fixed width wider than the screen gets capped. */
  :where(body) :where(div, section, figure, img, video, iframe, table) {
    max-width: 100%;
  }
}


/* ── 13. NO DEAD SPACE ────────────────────────────────────────────────────
   Several pages were reserving hundreds of pixels for a container that ended up
   with nothing in it — a JS module that bailed out, an empty grid column, a
   sidebar with no content. An element with no rendered children should take no
   room. */

:where(section, .sec, .wrap, .mid, div[class]):empty { display: none; }

/* A grid whose items ran out should not keep painting empty tracks. */
:where([class*="grid"]) > :empty:not(input):not(textarea):not(img):not(video):not(br) {
  display: none;
}

/* Photo grids: images of different heights left holes in a strict grid. Flow them
   in columns instead, so they pack without gaps and nothing gets cropped. */
@media (min-width: 761px) {
  :where(.gal.g2, .gal.g3, [class*="photo-grid"], [class*="gallery-grid"]) {
    display: block;
    column-gap: var(--ds-5);
  }
  :where(.gal.g2) { column-count: 2; }
  :where(.gal.g3) { column-count: 3; }
  :where(.gal.g2, .gal.g3) > figure {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--ds-5);
    display: block;
  }
}

/* A footer column carrying a single link was holding a full row of height. */
:where(.footer) :where(.ftop) { align-items: start; }

/* ── 14. THE ARTICLE SIDEBAR ──────────────────────────────────────────────
   .pg-layout is a two-column grid used across the guide and money pages. On a
   long article the main column ran ~17,600px while the rail ran ~1,070px, so the
   page carried roughly 16,500px of empty column — the single largest source of
   dead space on the site.

   Sticking the rail turns that void into something useful: the trust card, the
   contact actions and the on-this-page nav stay with the reader the whole way
   down. It also means the CTA is never more than a glance away. */

@media (min-width: 1000px) {
  .pg-layout { align-items: start; }
  .pg-layout > :last-child {
    position: sticky;
    top: calc(var(--ds-nav-h) + var(--ds-4));
    align-self: start;
    max-height: calc(100vh - var(--ds-nav-h) - var(--ds-7));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .pg-layout > :last-child::-webkit-scrollbar { width: 4px; }
  .pg-layout > :last-child::-webkit-scrollbar-thumb {
    background: var(--ds-line);
    border-radius: var(--ds-radius-pill);
  }
}

/* ── 15. THE STICKY DESTINATION CAROUSEL ─────────────────────────────────
   .dest-hscroll-sticky is a full-viewport sticky stage (746px) holding a 520px
   card track. The track sat low in the stage, which read as a large unexplained
   gap above the Goa / Bangalore / Kerala cards. Centre it in its own stage. */

.dest-hscroll-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================================
   ARCHETYPE LAYER — "the drawing office"                    v2 · 2026-09-01
   Approved direction. One idea carried site-wide: this studio draws before it
   builds, so the page furniture behaves like a drawing sheet.
     · hairline rules divide, not boxes and shadows
     · gold is never a fill — only a dimension tick before a label
     · facts sit in a schedule, the way a drawing annotates itself
     · photography runs at real width, never cropped into a card
     · teal is reserved for action, so the CTA is the greenest thing on screen
   Structural only where CSS can reach; markup and SEO untouched.
   ========================================================================== */

/* — 1. The dimension tick. The signature, applied to the labels that already
     exist on the site so no markup has to change. Inline-block so it cannot
     collapse a flex row. — */
:where(.eyebrow, .znum, .kicker, .seo-rel-eye, .fct, .bh-eyebrow, .sec-eyebrow)::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--ds-gold);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}
/* Footer column heads sit in tight columns — they keep the colour, lose the rule. */
:where(.footer) :where(.fct)::before { display: none; }

/* — 2. Pull quotes as drawn annotations, not tinted boxes with a left border.
     That left-accent-on-a-rounded-tint pattern is the single most templated
     device on the site. — */
:where(blockquote, .pull, .q, .quote):not([class*="card"]) {
  border-left: none;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--ds-ink);
  border-bottom: 1px solid var(--ds-line);
  padding: 26px 0;
  margin: 34px 0;
}
:where(blockquote, .pull, .q, .quote):not([class*="card"]) p:first-child {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ds-teal);
  margin-top: 0;
}
:where(blockquote, .pull, .q, .quote) :where(cite, .cite, footer) {
  display: block;
  font-style: normal;
  font-size: var(--ds-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  margin-top: 12px;
}

/* — 3. Fact tables read as a drawing schedule: one heavy rule at the head,
     hairlines between rows, nothing boxed. — */
:where(.spec, .cmp, .facts-table, table):not(.no-ds-schedule) {
  border: none;
  border-top: 2px solid var(--ds-ink);
}
:where(.spec, .cmp, .facts-table, table):not(.no-ds-schedule) :where(th) {
  font-size: var(--ds-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--ds-line);
}
:where(.spec, .cmp, .facts-table, table):not(.no-ds-schedule) :where(td) {
  border-bottom: 1px solid var(--ds-line);
  border-left: none;
  border-right: none;
}

/* — 4. Shadows off. A hairline is quieter and reads as more considered; the
     drop-shadowed card is the other templated tell. — */
:where(.card, [class*="-card"], .tile, .vcard, .box, .panel, .rwl-card, .bg > *) {
  box-shadow: none !important;
}

/* — 5. Photography earns its size. Premium work was being dropped into small
     cards; give any figure inside prose a real minimum and let it breathe. — */
:where(article, .article-body, .post-body, .prose, .mid) :where(figure) {
  margin-top: var(--ds-7);
  margin-bottom: var(--ds-7);
}
:where(figure) > :where(img) { width: 100%; height: auto; }

/* — 6. Section heads: eyebrow, then display line, then the rule. Consistent
     everywhere so a reader learns the rhythm. — */
:where(h2) { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; }
:where(h1) { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }

/* — 7. Teal is action. Any button that was gold-filled becomes the accent it
     was meant to be, so the primary action is never out-shouted. — */
:where(.btn, button, .cta-btn, .nav-cta):where([class*="primary"], .btn-primary) {
  background: var(--ds-teal);
  color: #fff;
  border-color: var(--ds-teal);
}

/* — 8. The templated block, retired. Five classes across the site used the same
     device: a tinted panel, rounded corners, a coloured left accent bar. It is
     the most recognisably auto-generated thing on the page and it appears on
     every venue and money page. Same content, drawing-sheet treatment: a heavy
     rule at the head, a hairline at the foot, no fill, no radius, no bar.
     These are AEO blocks — nothing is removed, only restyled. — */
:where(.quick-answer, .pg-venue-facts, .pg-fx-block, .sister-studio, .callout, .answer-box) {
  background: transparent !important;
  border: none !important;
  border-top: 2px solid var(--ds-ink) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 26px !important;
  margin: var(--ds-7) 0 !important;
}
:where(.quick-answer, .pg-venue-facts, .pg-fx-block, .sister-studio, .callout, .answer-box)
  :where(h2, h3, h4, .callout-title) {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  margin-top: 0;
}
/* The bullet list inside reads as a schedule: hairline between rows, no discs. */
/* Real specificity here: the pages' own `ul` rules beat a :where() selector,
   which left the bullet discs in place. */
.quick-answer ul, .pg-venue-facts ul {
  list-style: none;
  padding-left: 0;
  margin: var(--ds-4) 0 0;
}
.quick-answer ul > li, .pg-venue-facts ul > li {
  padding: 11px 0;
  border-bottom: 1px solid var(--ds-line-soft);
  font-size: var(--ds-body);
  line-height: 1.62;
  list-style: none;
}
.quick-answer ul > li::marker, .pg-venue-facts ul > li::marker { content: ""; }
.quick-answer ul > li:last-child, .pg-venue-facts ul > li:last-child { border-bottom: none; }

/* — 9. The featured card keeps its emphasis, loses the gradient. Marking the
     recommended studio is real design intent, so it stays marked — but a
     gradient tint is the templated way to do it. A heavier rule reads as
     deliberate at a glance and matches the schedule language everywhere else. */
.planner-card.featured {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-top: 3px solid var(--ds-teal);
  border-radius: 0;
}