/* visitseychelles.in — «The Kolam» core stylesheet.
   STATIC FILE. Hand-edited, never generated. Page-type components live in pages.css, which IS
   generated from theme.PAGES_CSS — do not edit that one.
   Everything below the tokens is lifted from the approved demo (mockups/kolam/index.tpl.html) so
   the built site is the demo, not a memory of it. Additions past the demo are marked. */

:root{
  --rice:#F3EAD9;        /* rice-flour on the threshold, the light ground */
  --sand:#E9DCC3;        /* the swept earth, second light ground */
  --night:#13214C;       /* midnight indigo, the Kutch medallion ground pushed a stop bluer so screens never gray it */
  --night-2:#0C173A;
  --kumkum:#A22A1E;      /* the threshold powder, THE accent */
  --kumkum-deep:#8E2117;
  --kumkum-lt:#C23325;   /* for solid CTAs on dark grounds */
  --haldi:#E8900E;       /* turmeric-marigold, the glint */
  --gulal:#ED1969;       /* festival pink, kolam-fill only, never UI */
  --mayil:#235760;       /* peacock deep, kolam-fill only, never UI */
  --ink:#22241E;
  --dust:#6B655A;        /* quiet ink on light grounds */
  --rice-dim:rgba(243,234,217,.78);
  --line-l:rgba(34,36,30,.16);
  --line-d:rgba(243,234,217,.22);
  --frame:14px;
  --ff-d:'Martel',Georgia,serif;
  --ff-s:'Mukta',system-ui,sans-serif;
  --ff-m:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --maxw:1220px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--rice);color:var(--ink);font-family:var(--ff-s);font-weight:400;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* `height:auto` is not optional next to `max-width:100%`, and leaving it out deformed photographs
   across the site. Every <img> carries real width and height attributes, which is correct and stops
   the layout jumping while they load. But when the container is narrower than the source, the
   max-width shrinks the WIDTH while the height attribute still supplies the HEIGHT, so the picture
   is squeezed. Measured on /seychelles-airport-transfers/: a 1920x1280 frame was painting at
   900x1280. Every guard passed it, because a squashed photograph has valid markup, perfect
   contrast and no axe violation. Components that deliberately fix a height set it in their own
   class rules, which outrank this one selector, so none of them change. */
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--ff-d);font-weight:300;line-height:1.22;letter-spacing:.002em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.mono{font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* ADDED past the demo: keyboard reach. A 155-page site needs a skip link and a visible focus
   ring; the one-page demo did not. Both are axe-core requirements, not taste. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--kumkum);color:var(--rice);
  font-family:var(--ff-m);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px}
.skip:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--haldi);outline-offset:3px;border-radius:2px}

/* the threshold frame: the whole page sits inside a drawn doorway */
.tframe{position:fixed;inset:var(--frame);border:1px solid rgba(162,42,30,.34);
  pointer-events:none;z-index:80}
.tframe .kcorner{position:absolute;width:30px;height:30px;color:var(--kumkum)}
.tframe .kcorner.tl{top:-6px;left:-6px}
.tframe .kcorner.tr{top:-6px;right:-6px;transform:rotate(90deg)}
.tframe .kcorner.br{bottom:-6px;right:-6px;transform:rotate(180deg)}
.tframe .kcorner.bl{bottom:-6px;left:-6px;transform:rotate(270deg)}

/* kolam art defaults */
.kband{display:block;width:100%;height:60px}
.kclasp{display:block;width:190px;height:190px}
.kcorner{display:block}
.kg{display:inline-block;width:21px;height:13px;vertical-align:middle}
.dev{font-family:var(--ff-s);font-weight:500}
.chapter .dev{font-size:13.5px;color:var(--kumkum)}
.dark .chapter .dev{color:var(--haldi)}
/* On the kumkum-deep wedding panel, haldi measures 3.54 against the ground and fails AA at this
   size. Rice measures 7.39. Caught by axe in visual_guard, not by looking at it. */
.wed-grid .panel .chapter .dev{color:var(--rice)}

/* the kolam band strip */
.bandstrip{background:var(--kumkum-deep);position:relative;overflow:hidden}
.bandstrip .kband{opacity:.97}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(16,29,70,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(243,234,217,.14)}
/* the bar runs wider than the reading column: twelve destinations need the room, and a nav that
   wraps to two lines is a nav that has stopped working */
.nav .wrap{max-width:1360px}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-d);font-weight:400;font-size:20px;
  color:var(--rice);text-decoration:none;letter-spacing:.01em;min-height:44px}
.brand .kg{color:var(--haldi);width:23px;height:14px}
.brand b{font-weight:400;color:var(--haldi)}
.nav .brand{flex:none;white-space:nowrap}
.nav nav{display:flex;align-items:center;gap:17px}
.nav nav a:not(.btn){font-family:var(--ff-m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--rice-dim);white-space:nowrap}
.nav nav .btn{margin-left:9px;padding:13px 18px;white-space:nowrap;flex:none}
.nav nav a:not(.btn):hover{color:var(--rice)}
.nav nav a[aria-current="page"]{color:var(--haldi)}
.btn{display:inline-block;font-family:var(--ff-m);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;background:var(--kumkum-lt);color:var(--rice);text-decoration:none;
  border:1px solid rgba(243,234,217,.25);cursor:pointer;padding:13px 24px;border-radius:2px;
  transition:background .3s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--kumkum-deep);color:var(--rice);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn--ghost{background:transparent;border:1px solid rgba(243,234,217,.4);color:var(--rice)}
.btn--ghost:hover{background:rgba(243,234,217,.1);border-color:var(--rice);color:var(--rice)}
.btn--haldi{background:var(--haldi);color:var(--night);border:1px solid rgba(16,29,70,.2)}
.btn--haldi:hover{background:#d5820a;color:var(--night)}
/* the light-ground variant: on rice and sand the ghost button needs kumkum, not rice */
.btn--line{background:transparent;border:1px solid rgba(162,42,30,.5);color:var(--kumkum)}
.btn--line:hover{background:rgba(162,42,30,.07);border-color:var(--kumkum);color:var(--kumkum-deep);}

/* the nav's adaptive state: on a page with no photo hero the translucent bar has nothing to sit
   over, so it goes solid immediately. On a photo hero it goes solid past 40px of scroll. */
.nav.solid{background:var(--night-2)}

/* ADDED past the demo: the mobile menu. The demo simply hid the nav links under 940px, which is
   fine for one page and indefensible for a hundred and fifty. The close button mirrors the
   burger's seat exactly, per the network rule that every opener has a visible closer. */
.mburger{display:none;appearance:none;background:transparent;border:1px solid rgba(243,234,217,.4);
  border-radius:2px;width:44px;height:40px;cursor:pointer;position:relative;flex:none}
.mburger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--rice);transition:.3s var(--ease)}
.mburger span:nth-child(1){top:13px}
.mburger span:nth-child(2){top:19px}
.mburger span:nth-child(3){top:25px}
.mclose{appearance:none;background:transparent;border:1px solid rgba(243,234,217,.4);
  border-radius:2px;width:44px;height:40px;cursor:pointer;color:var(--rice);
  font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  position:absolute;top:12px;right:22px}
.mmenu{position:fixed;inset:0;z-index:90;background:var(--night-2);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmenu[hidden]{display:none}
.mmenu .mhead .brand{min-height:44px;align-items:center}
.mmenu .mhead{display:flex;align-items:center;padding:12px 22px;height:64px;
  border-bottom:1px solid rgba(243,234,217,.14);flex:none;position:relative}
.mmenu .mlinks{display:flex;flex-direction:column;padding:8px 22px 12px}
.mmenu .mlinks a{display:flex;align-items:baseline;gap:14px;font-family:var(--ff-m);font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rice-dim);text-decoration:none;
  padding:14px 0;border-bottom:1px solid rgba(243,234,217,.1);min-height:44px}
.mmenu .mlinks a i{font-family:var(--ff-s);font-style:normal;font-size:14px;color:var(--haldi);
  letter-spacing:0;flex:none;width:22px}
.mmenu .mlinks a[aria-current="page"]{color:var(--haldi)}
.mmenu .msec{display:flex;flex-wrap:wrap;gap:10px 20px;padding:20px 22px 8px;
  border-top:1px solid rgba(243,234,217,.14);margin-top:6px}
.mmenu .msec a{font-family:var(--ff-s);font-size:14.5px;color:var(--rice-dim);text-decoration:none;
  padding:8px 0;min-height:32px}
.mmenu .mcta{padding:18px 22px 40px}
.mmenu .mcta .btn{display:block;text-align:center}
body.locked{overflow:hidden}

/* hero */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:var(--night);padding-top:80px}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 66%;
  filter:sepia(.12) saturate(1.14) hue-rotate(-8deg)}
/* The hero scrim. The vertical band carries the top and the foot; the radial is what makes the
   text column readable, and it is the part that had to grow. The breadcrumb and the lead sit
   high in the block on a tall hero, which is exactly where the vertical band is at its weakest,
   and the visual guard measured NAV.crumb at 1.54 on a ferry route and 2.00 on the Praslin
   wedding while calling both pages green, because .crumb was not on its list of text-on-photo
   selectors. It is now, and this is the repair. Growing the radial rather than the vertical band
   keeps the right-hand two thirds of every photograph as bright as it was. */
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,24,56,.62) 0%,rgba(12,24,56,.30) 34%,rgba(12,24,56,.44) 52%,
    rgba(12,24,56,.70) 76%,rgba(12,24,56,.92) 100%),
  radial-gradient(130% 130% at 11% 92%,rgba(12,24,56,.92),rgba(12,24,56,0) 76%)}
.hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 30px 84px}
.hero .coord{display:flex;align-items:center;gap:12px;color:var(--rice);margin-bottom:18px}
.hero .coord .kg{color:var(--haldi)}
.hero .coord .dev{font-family:var(--ff-s);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:none;color:var(--rice-dim)}
/* `max-width` added past the demo. The demo's hero lead was one short line ("You are not going
   abroad."), so it never needed a measure. The India pillar's is a full sentence and ran to 105
   characters a line at 22px, above the fold, in the display face. `.hero p.sub` was already
   capped at 46ch for the same reason; this is the same rule for the line above it. */
.hero .lead{font-family:var(--ff-d);font-weight:300;font-size:22px;color:var(--rice);
  margin-bottom:6px;max-width:54ch}
.hero h1{font-size:66px;line-height:1.12;color:var(--rice);max-width:16ch;font-weight:200}
.hero h1 em{font-style:normal;font-weight:400;color:var(--haldi);white-space:nowrap}
.hero p.sub{max-width:46ch;font-size:17px;margin:20px 0 32px;color:var(--rice-dim)}
.hero .go{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero .rail{position:absolute;right:26px;bottom:90px;writing-mode:vertical-rl;color:var(--rice-dim);
  font-family:var(--ff-m);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase}
.hero .clasp-seat{position:absolute;right:60px;top:92px;color:var(--rice);display:block;padding:26px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,24,56,.62),rgba(12,24,56,0) 72%)}
.hero .clasp-seat .kclasp{width:150px;height:150px}
.hero .clasp-seat .kclasp path{stroke-width:2.5}
.hero .clasp-seat.clasp-b{right:auto;left:5%;top:130px;padding:18px}
.hero .clasp-seat.clasp-b .kclasp{width:92px;height:92px}
.hero .clasp-seat.clasp-c{right:150px;top:auto;bottom:140px;padding:14px}
.hero .clasp-seat.clasp-c .kclasp{width:62px;height:62px}
.clasp-foot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--rice);opacity:.9}
.clasp-foot .kclasp{width:64px;height:64px}
@media (max-width:1200px){.clasp-foot{display:none}}

/* chapters */
section{padding-top:104px;padding-bottom:104px;position:relative}
.chapter{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.chapter .num{font-family:var(--ff-s);font-weight:600;font-size:19px;color:var(--kumkum);line-height:1}
.chapter .kg{color:var(--kumkum)}
.chapter .t{font-family:var(--ff-m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dust)}
h2{font-size:44px;max-width:24ch;font-weight:300}
h2 em{font-style:normal;font-weight:600;color:var(--kumkum)}
h3{font-size:25px;font-weight:400}
.lede{max-width:60ch;color:var(--dust);font-size:17px;margin-top:14px}

/* dark sections */
.dark{background:var(--night);color:var(--rice)}
.dark h2,.dark h3{color:var(--rice)}
.dark h2 em{color:var(--haldi)}
.dark .lede{color:var(--rice-dim)}
.dark .chapter .num{color:var(--haldi)}
.dark .chapter .kg{color:var(--haldi)}
.dark .chapter .t{color:var(--rice-dim)}
.dark a:not(.btn){color:var(--rice)}

/* sand sections.
   --dust is locked at #6B655A, which clears 4.5 on rice (4.84) but only reaches 4.26 on the
   sand ground. Rather than repaint a locked token, the sand grounds scope a three-steps-darker
   dust: 4.81 on sand, 5.46 on rice. Computed by build/gate.py, not judged by eye. */
.sandy,.shores,.plan{--dust:#635D52}
.sandy{background:var(--sand)}

/* forms */
form{--dust:#635D52;background:var(--rice);color:var(--ink);padding:46px 48px;border-radius:2px;
  border:1px solid var(--line-l);position:relative}
form h2,form h3,form strong,form b,form small,form p{color:var(--ink)}
form .kcorner{position:absolute;width:26px;height:26px;color:var(--kumkum)}
form .kcorner.tl{top:8px;left:8px}
form .kcorner.tr{top:8px;right:8px;transform:rotate(90deg)}
.f{margin-bottom:20px;display:flex;flex-direction:column;gap:7px}
.f label{font-family:var(--ff-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.f .help{font-family:var(--ff-s);font-size:13.5px;color:var(--dust)}
.f input,.f select,.f textarea{font-family:var(--ff-s);font-size:16px;color:var(--ink);
  background:#FBF5E9;border:1px solid rgba(34,36,30,.3);border-radius:2px;padding:12px 14px;width:100%}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--kumkum);outline-offset:1px;border-color:var(--kumkum)}
.f.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f.grid2 > div{display:flex;flex-direction:column;gap:7px}
form .btn{width:100%;margin-top:6px;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;font-family:var(--ff-d);font-weight:300;color:var(--ink);padding:14px 2px 0;font-style:normal}
.sent.bad{color:var(--kumkum-deep)}

/* footer */
footer{background:var(--night-2);color:var(--rice);padding:50px 0 58px;position:relative}
footer .row{display:flex;justify-content:space-between;align-items:baseline;gap:26px;flex-wrap:wrap}
footer .fine{font-family:var(--ff-s);font-size:13.5px;color:var(--rice-dim);max-width:52ch;margin-top:10px}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rice-dim);text-decoration:none}
footer nav a:hover{color:var(--rice)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;margin-top:44px;
  padding-top:34px;border-top:1px solid rgba(243,234,217,.14)}
footer .cols .fbrand .coord{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haldi);margin-top:14px}
footer .cols .fbrand p{font-family:var(--ff-d);font-weight:300;font-size:15.5px;color:var(--rice-dim);
  margin-top:12px;line-height:1.7;max-width:34ch}
footer .legalrow{margin-top:30px;padding-top:24px;border-top:1px solid rgba(243,234,217,.14);
  display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
footer .legalrow .lset{display:flex;gap:20px;flex-wrap:wrap}
footer .legalrow a{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rice-dim);text-decoration:none;display:inline-block;padding:11px 0}
footer .legalrow a:hover{color:var(--rice)}
footer .legalrow .cr{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,234,217,.6)}
footer .disclaim{font-family:var(--ff-s);font-size:13px;line-height:1.75;color:rgba(243,234,217,.6);
  max-width:78ch;margin-top:18px}
footer .cols h3{font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--haldi);font-weight:500;margin-bottom:12px}
footer .cols ul{list-style:none}
footer .cols li{margin-bottom:7px}
footer .cols a{font-size:14.5px;color:var(--rice-dim);text-decoration:none;line-height:1.5}
footer .cols a:hover{color:var(--rice)}
footer .netstrip{margin-top:38px;padding-top:26px;border-top:1px solid rgba(243,234,217,.14);
  font-family:var(--ff-s);font-size:13px;color:rgba(243,234,217,.6);line-height:2}
/* the strip is a courtesy list, but a thumb still has to hit it: padded to a 40px target */
footer .netstrip a{color:rgba(243,234,217,.72);text-decoration:none;display:inline-block;padding:9px 0}
footer .netstrip a:hover{color:var(--rice)}
footer .netstrip .lbl{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--haldi);display:block;margin-bottom:6px}

/* motion, gated */
@media (prefers-reduced-motion: no-preference){
  .hero img.bg{animation:settle 3s var(--ease) both}
  @keyframes settle{from{transform:scale(1.05)}to{transform:scale(1)}}
  .hero .inner > *{opacity:0;transform:translateY(18px);animation:rise 1.1s var(--ease) forwards}
  .hero .coord{animation-delay:.2s}.hero .lead{animation-delay:.32s}.hero h1{animation-delay:.45s}
  .hero .sub{animation-delay:.6s}.hero .go{animation-delay:.75s}
  @keyframes rise{to{opacity:1;transform:none}}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
  .reveal.inview{opacity:1;transform:none}
  /* the kolam draws itself */
  /* ritual order: the pulli dots are placed first, then one unbroken line */
  .kdraw path{stroke-dasharray:1;stroke-dashoffset:1}
  .kdraw circle,.kdraw polygon{opacity:0}
  .kdraw.drawn path{animation:kline 2.3s var(--ease) .45s forwards}
  .kdraw.drawn circle,.kdraw.drawn polygon{animation:kdot .5s var(--ease) forwards}
  @keyframes kline{to{stroke-dashoffset:0}}
  @keyframes kdot{to{opacity:1}}
  /* and once drawn, the kolam never quite rests */
  @keyframes kspin{to{transform:rotate(1turn)}}
  .kdraw.drawn .kclasp{animation:kspin 85s linear infinite}
  .clasp-b.drawn .kclasp{animation-duration:120s;animation-direction:reverse}
  .clasp-c.drawn .kclasp{animation-duration:65s}
  .clasp-b.drawn path{animation-delay:1s}
  .clasp-c.drawn path{animation-delay:1.7s}
}

/* The nav collapses earlier than the rest of the layout. Twelve destinations stop fitting at
   about 1180px, long before the page itself needs a single column. */
@media (max-width:1180px){
  .nav nav a:not(.btn){display:none}
  .nav nav .btn{display:none}
  .mburger{display:block}
}

/* mobile */
@media (max-width:940px){
  .wrap{padding:0 22px}
  .brand{font-size:18px}
  .hero h1{font-size:40px}
  .hero .clasp-seat{display:none}
  .hero .rail{display:none}
  .hero .inner{padding-bottom:64px}
  h2{font-size:31px}
  section{padding-top:68px;padding-bottom:68px}
  form{padding:32px 24px}
  .f.grid2{grid-template-columns:1fr}
  .tframe{display:none}
}
@media (max-width:860px){
  footer .cols{grid-template-columns:1fr 1fr;gap:28px}
  footer .cols .fbrand{grid-column:1 / -1}
}
@media (max-width:520px){
  footer .cols{grid-template-columns:1fr}
  footer .row{flex-direction:column;align-items:flex-start}
}

/* Capture aid only: ?shot resolves motion and un-pins the two fixed layers so a screenshot
   stitched from viewport tiles does not repeat them on every tile. Chromium's own full-page
   capture silently drops image tiles past about 10,000px, so long pages are shot by tiling and
   this block is what makes tiling faithful. */
html.shot{scroll-behavior:auto}
html.shot .hero{min-height:900px;height:900px}
html.shot .nav{position:absolute;top:0;left:0;right:0}
html.shot .tframe{position:absolute;top:14px;left:14px;right:14px;bottom:14px}
/* Anything pinned has to be released before a tiled screenshot, or it is captured once per tile
   and the stitched image shows it two or three times. The nav, the corner frame and the tour
   booking rail are the three pinned things on this site. */
html.shot .tbook{position:static}
html.shot .reveal,html.shot .hero .inner > *{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
html.shot .hero img.bg{animation:none !important}
html.shot .kdraw path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
html.shot .kdraw circle,html.shot .kdraw polygon{opacity:1 !important}
html.shot .kclasp{animation:none !important}