/* Spectra: the shared footer. One `<footer class="sfoot">` on every page (identical markup, only hrefs and
   aria-current differ). css/site.css sets the first-generation box/type rules on .sfoot/.sf-*; this sheet owns the
   layout and type and overrides every one of them. js/footer-mark.js fills the mark, swaps the Follow text links
   for icons + the Gujarat Tourism seal, and plays the credit video.

   v3, 2026-11-05 (client: "cluttered", "spacing and alignment between chunks looks bad", "increase Explore and the
   other title font size"). Rebuilt from one system instead of layered passes:
   - type: titles 18/24 Blinker 600 sentence case in a quiet grey; items 17/24 Blinker 400; small print 15/24.
   - space: an 8px scale only (8, 16, 24, 32, 48, 64, 80). Every item is one row: 24px line + 8px above and below
     (40px row on desktop, 48px on phone), so title-to-first-glyph is 16px (20px on phone) in every column.
   - grid: the footer is one grid; the column band, the "Also from Spectra" band and the bottom bar are subgrids of
     it, so the sister sites and the legal links sit on the same column edges as Visit and Talk to us. Tracks are
     max-content with space-between, so the gaps between columns are equal by construction.
   - edges: the footer's inline padding is the header's (var(--gut) + safe area), so the mark lines up with the
     header lockup. */

/* ---------- the mark itself: white at rest, spectrum colour under the cursor (same technique as css/404.css) ---------- */
.sf-mark{position:relative;isolation:isolate;aspect-ratio:570.7/324.9;pointer-events:none}
.sf-mark-dark{opacity:1}
.sf-mark-color{
  mask-image:radial-gradient(circle at var(--sf-mx,50%) var(--sf-my,50%),#000 0,#000 calc(var(--sf-mr,-20)*1%),transparent calc((var(--sf-mr,-20) + 20)*1%));
  -webkit-mask-image:radial-gradient(circle at var(--sf-mx,50%) var(--sf-my,50%),#000 0,#000 calc(var(--sf-mr,-20)*1%),transparent calc((var(--sf-mr,-20) + 20)*1%));
}
.sf-mark-static .sf-mark-color{display:none}   /* data-spectra-mark="static" (the 404): white outline only */
/* the click ring (kept for js/footer-mark.js's is-pulsing hook; the click listener itself is a no-op since 2026-09-29) */
.sf-mark::after{content:"";position:absolute;inset:-14%;z-index:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,#fb1a08,#fe9a04,#fce3a3,#cf99d3,#9c92f2,#3045e0,#fb1a08);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 100%);
  opacity:0;transform:scale(.55)}
.sf-mark.is-pulsing::after{animation:sf-pulse .85s var(--ease) 1}
@keyframes sf-pulse{0%{opacity:.9;transform:scale(.55)}60%{opacity:.4}100%{opacity:0;transform:scale(1.4)}}

/* the spectrum hairline along the footer's top edge, lit under the cursor (js/footer-mark.js sets --sf-fx/--sf-fo) */
.sf-spec{position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#fb1a08,#fe9a04,#fce3a3,#cf99d3,#9c92f2,#3045e0);
  mask-image:radial-gradient(260px 100% at var(--sf-fx,50%) 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(260px 100% at var(--sf-fx,50%) 50%,#000,transparent);
  opacity:var(--sf-fo,0);transition:opacity .4s var(--ease)}

/* ---------- tokens + the box ---------- */
.sfoot{
  --sf-title:#8f8f8f;          /* titles: quiet grey, carried by size + weight, not caps */
  --sf-item:#cfcfcf;           /* items: silver, one step under white; white on hover/current */
  --sf-pad:8px;                /* half-leading of one row: 24px line + 2 x 8 = 40px row */
  --sf-band:64px;              /* space between the three bands */
  position:relative;max-width:none;margin:0;
  padding:80px calc(var(--gut) + var(--sar)) calc(32px + var(--sab)) calc(var(--gut) + var(--sal));
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:0;
  font-family:var(--sans);font-size:17px;line-height:24px;color:var(--sf-item)}

/* titles: sentence case Blinker, no mono, no tracking */
.sfoot .sf-k{margin:0 0 8px;font-family:var(--sans);font-stretch:100%;font-weight:600;font-size:18px;line-height:24px;
  letter-spacing:0;text-transform:none;color:var(--sf-title);text-align:start;width:auto;padding:0}

/* one row metric for every item: paragraphs, list links, the directions link */
.sf-t{margin:0;padding-block:var(--sf-pad);font-size:17px;line-height:24px;color:var(--sf-item);max-width:25ch;text-wrap:pretty}
.sf-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sfoot .sf-list a{display:inline-flex;align-items:center;min-height:0;padding-block:var(--sf-pad);font-size:17px;line-height:24px;
  color:var(--sf-item);position:relative;white-space:nowrap;text-decoration:none}
.sfoot .sf-list a:focus-visible{color:var(--ink)}
@media (hover:hover){.sfoot .sf-list a:hover{color:var(--ink)}}
.sfoot .sf-go{display:inline-flex;align-items:center;width:fit-content;min-height:0;margin:0;padding-block:var(--sf-pad);
  font-size:17px;line-height:24px;color:var(--ink);
  text-decoration:underline;text-decoration-color:rgba(252,252,252,.35);text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){.sfoot .sf-go:hover{text-decoration-color:currentColor}}
.sf-go>span[aria-hidden]{font-size:.62em;margin-left:.35em;transform:translateY(-.1em)}   /* the arrow, smaller (client, 30 Sep) */

.sf-col{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}

/* ---------- Explore: 2 x 4, each link takes its own colour from the spectrum on hover, with an underline drawing in ---------- */
.sfoot .sf-nav{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sfoot .sf-list-2{grid-template-columns:repeat(2,max-content);column-gap:48px;justify-content:start}   /* 8 links (Legal moved to the bottom bar, 2026-11-05): a full 2 x 4, no orphan */
.sfoot .sf-nav a[aria-current="page"]{color:var(--ink)}
.sf-nav li:nth-child(1){--c:#fb1a08}.sf-nav li:nth-child(2){--c:#fe7a05}.sf-nav li:nth-child(3){--c:#fe9a04}
.sf-nav li:nth-child(4){--c:#fce3a3}.sf-nav li:nth-child(5){--c:#cf99d3}.sf-nav li:nth-child(6){--c:#9c92f2}
.sf-nav li:nth-child(7){--c:#6f7cf0}.sf-nav li:nth-child(8){--c:#3045e0}
.sf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--sf-pad) - 3px);height:1px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sf-nav a[aria-current="page"]::after{transform:scaleX(1);background:rgba(252,252,252,.4)}
@media (hover:hover){
  .sfoot .sf-nav a:hover{color:var(--c)}
  .sf-nav a:hover::after{transform:scaleX(1);background:var(--c)}
}

/* ---------- Follow: one row of platform glyphs + the Gujarat Tourism seal (js/footer-mark.js upgrades the text links).
   44px hit boxes; the row is pulled left by the glyph's inset so the first glyph sits on the title's left edge. ---------- */
.sfoot .sf-social{display:flex;flex-direction:row;gap:0}
.sf-icons{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:calc(var(--sf-pad) - 7px) 0 0 -8.5px;padding:0;width:auto}
.sf-icons li{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.sfoot .sf-icons a{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;color:var(--sf-item);transition:color .25s var(--ease)}
.sfoot .sf-icons a:focus-visible{color:#fff;outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
@media (hover:hover){.sfoot .sf-icons a:hover{color:#fff}}
.sf-icons .sf-gt{margin-left:8px}
.sfoot .sf-icons .sf-gt a{width:44px;height:44px;min-height:0;display:block;color:inherit;border-radius:50%}
.sf-icons .sf-gt a:focus-visible{outline-offset:2px}
.sf-gt .gtb{width:44px;height:44px;padding:6px 5px}

/* ---------- "Also from Spectra": the sister sites ---------- */
.sf-family{margin:0;padding-block:32px;border-top:1px solid var(--line)}
.sf-family .sf-k{margin:0;padding-block:var(--sf-pad)}
.sfoot .sf-family a{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;min-height:44px;padding-block:var(--sf-pad);justify-content:center;text-decoration:none;width:fit-content}
.sf-fn{position:relative;color:var(--ink);font-size:17px;line-height:24px;width:fit-content}
.sf-fn>span[aria-hidden]{font-size:.62em;margin-left:.35em;color:var(--soft)}
.sf-fn::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sf-fd{color:var(--sf-title);font-size:15px;line-height:24px}
.sf-family a:focus-visible .sf-fn::after{transform:scaleX(1)}
@media (hover:hover){.sf-family a:hover .sf-fn::after{transform:scaleX(1)}}

/* ---------- bottom bar: small print ---------- */
.sfoot .sf-bottom{margin:0;padding-top:24px;border-top:1px solid var(--line);align-items:center;font-size:15px;line-height:24px;color:var(--sf-title)}
.sf-copy{margin:0}
.sfoot .sf-legal{margin:0;display:flex;flex-wrap:wrap;gap:0 24px}
.sfoot .sf-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--sf-title);font-size:15px}
@media (hover:hover){.sfoot .sf-legal a:hover{color:var(--ink)}}
.sfoot .sf-legal a[aria-current="page"]{color:var(--ink)}
.sfoot .sf-credit{margin:0;min-height:44px}

/* ======================= phone + small tablet: one column, generous rows ======================= */
@media (max-width:859px){
  .sfoot{--sf-pad:12px;padding-top:64px}                       /* 48px rows: thumb-sized */
  .sf-top{display:flex;flex-direction:column;align-items:stretch;gap:48px;padding-bottom:var(--sf-band)}
  .sf-mark{width:128px;margin:0;align-self:flex-start}
  .sf-cols{display:flex;flex-direction:column;gap:40px}
  .sfoot .sf-k{margin-bottom:8px}
  .sf-t{max-width:30ch}
  .sfoot .sf-list-2{column-gap:40px}
  .sf-family{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-block:32px}
  .sf-family .sf-k{padding-block:0;margin-bottom:8px}
  .sfoot .sf-family a{padding-block:8px}
  .sfoot .sf-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-top:24px}
  .sf-copy{padding-block:10px}
  .sfoot .sf-credit{margin:8px 0 0}
}

/* ======================= one grid, three subgrid bands ======================= */
@media (min-width:860px){
  .sfoot{display:grid;grid-template-columns:repeat(var(--sf-n),auto);justify-content:space-between;column-gap:48px;row-gap:0}
  .sf-top,.sf-family,.sfoot .sf-bottom{grid-column:1/-1;display:grid;grid-template-columns:subgrid;column-gap:inherit;align-items:start}
  .sf-top{padding-bottom:var(--sf-band);row-gap:48px}
  .sf-cols{display:contents}
  .sf-mark{width:144px;margin:4px 0 0;grid-column:1;grid-row:1;justify-self:start}   /* top of the building on the titles' cap line */
  .sf-family{align-items:start}
  .sfoot .sf-bottom{align-items:center}
  .sfoot .sf-credit{justify-self:end}
}

/* 860-1239: two rows of columns beside the mark (Visit | Talk to us, then Explore | Follow) */
@media (min-width:860px) and (max-width:1239px){
  .sfoot{--sf-n:3}
  .sf-cols>.sf-col:nth-child(1){grid-column:2;grid-row:1}
  .sf-cols>.sf-col:nth-child(2){grid-column:3;grid-row:1}
  .sf-cols>.sf-col:nth-child(3){grid-column:2;grid-row:2}
  .sf-cols>.sf-col:nth-child(4){grid-column:3;grid-row:2}
  .sf-family .sf-k{grid-column:1}
  .sf-family a:nth-of-type(1){grid-column:2}
  .sf-family a:nth-of-type(2){grid-column:3}
  .sf-copy{grid-column:1}
  .sfoot .sf-legal{grid-column:2}
  .sfoot .sf-credit{grid-column:3}
}

/* 1240+: the mark and four columns in one row */
@media (min-width:1240px){
  .sfoot{--sf-n:5;column-gap:56px}
  .sf-cols>.sf-col:nth-child(1){grid-column:2;grid-row:1}
  .sf-cols>.sf-col:nth-child(2){grid-column:3;grid-row:1}
  .sf-cols>.sf-col:nth-child(3){grid-column:4;grid-row:1}
  .sf-cols>.sf-col:nth-child(4){grid-column:5;grid-row:1}
  .sf-family .sf-k{grid-column:1}
  .sf-family a:nth-of-type(1){grid-column:2}
  .sf-family a:nth-of-type(2){grid-column:3/5}   /* spans into Explore's empty cell so the long name does not widen Talk to us */
  .sf-copy{grid-column:1}
  .sfoot .sf-legal{grid-column:2/4}
  .sfoot .sf-credit{grid-column:4/6}
}
/* 1240-1439: Follow as a 2 x 2 block (seal under YouTube) so the four column gaps stay equal; a single row squeezes them */
@media (min-width:1240px) and (max-width:1439px){
  .sfoot .sf-icons{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:44px;gap:4px 8px}
  .sf-icons .sf-gt{margin-left:0}
}

/* no subgrid (old browsers): bands fall back to simple wrapping rows */
@supports not (grid-template-columns:subgrid){
  @media (min-width:860px){
    .sfoot{display:flex;flex-direction:column}
    .sf-top{display:flex;flex-wrap:wrap;gap:48px 56px}
    .sf-cols{display:flex;flex-wrap:wrap;gap:48px 56px}
    .sf-family,.sfoot .sf-bottom{display:flex;flex-wrap:wrap;gap:8px 56px}
    .sfoot .sf-credit{margin-left:auto}
  }
}

@media (prefers-reduced-motion:reduce){
  .sf-mark-color{opacity:0 !important}   /* the mark stays a quiet white shape; js/footer-mark.js attaches no listener either */
  .sf-spec{display:none}
  .sf-nav a::after,.sf-fn::after,.sf-icons a{transition:none}
}