/* Mapla lander: the owner's sketch (2026-10-12) on a dotted grid like the heyclicky inspiration.
   Light only (the video posters and stickers assume the light page). Every colour is a variable below. */
/* Inter, the face heyclicky uses (OFL, self-hosted: one variable latin file covers 400 to 700) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HindMadurai-Regular-tamil.woff2) format("woff2");unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Hind Madurai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/HindMadurai-SemiBold-tamil.woff2) format("woff2");unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}

:root{
  color-scheme:light;
  /* page and ink: --bg and --ink match the renderer's light theme so the mascots sit on the same paper */
  --bg:#F9F8F7;--dot:rgba(28,28,28,.17);
  --ink:#1c1c1c;--ink-2:rgba(28,28,28,.64);--ink-3:rgba(28,28,28,.40);
  --card:#FFFFFF;--card-2:#F3F2F0;--line:#1c1c1c;--line-soft:rgba(28,28,28,.22);
  --accent:#0a84ff;--on-accent:#FFFFFF;
  --video-bg:#000000;--pill-bg:rgba(255,255,255,.92);--pill-ink:#1c1c1c;--pill-soon-bg:#FFFFFF;--pill-soon-ink:#1c1c1c;
  --pop-bg:#FFFFFF;--pop-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08);
  --card-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
  --sticker-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.14)) drop-shadow(0 6px 8px rgba(0,0,0,.12));
  --letter-shadow:0 1px 1px rgba(0,0,0,.12),0 6px 12px rgba(0,0,0,.14);
  --focus:#0a84ff;--drop-ring:rgba(10,132,255,.22);
  --r-card:30px;--r-box:34px;--r-video:26px;--r-small:22px;--r-pill:999px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tamil:"Hind Madurai","Noto Sans Tamil",sans-serif;
  --vw:.84; /* the video's width as a share of the column */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;position:relative;min-height:100vh;overflow-x:hidden;
  background-color:var(--bg);
  background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.5px);
  background-size:24px 24px;background-position:12px 12px;
  color:var(--ink);font:17px/1.5 var(--font);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent)}
:lang(ta),.ta{font-family:var(--tamil);line-height:1.35}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--ink-2)}

/* the page column sits above the sticker layer; only its cards take the pointer, so stickers behind
   the empty parts of the column stay grabbable */
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:56px 24px 40px;pointer-events:none}
.wrap > *{pointer-events:auto}
.wrap > .mascots{pointer-events:none}
.cards > *, .mc-panel{pointer-events:auto}

/* 1. hero: no outer box (owner 2026-10-12); the write-up sits on the dotted grid like heyclicky, only the
   Mapla square keeps its rounded box */
.hero-card{
  position:relative;z-index:1;padding:24px 8px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center;
}
.hc-text h1{font-size:54px;line-height:1.05;font-weight:700;margin:0 0 22px;letter-spacing:-.035em}
.hc-write{font-size:20px;line-height:1.55;margin:0;max-width:32em;color:var(--ink)}
/* தமிழ் in the write-up: Hind Madurai semibold, about 1.35x, line-height kept at 1.3+ so the vowel signs never clip; baseline-aligned */
.hc-write .ta{font-family:var(--tamil);font-weight:600;font-size:1.35em;line-height:1.3;vertical-align:baseline}
.hc-plan{grid-column:1/-1;font-size:18px;line-height:1.5;margin:32px 0 0;font-weight:400;color:var(--ink-2)}

.pop{position:relative;display:inline-block}
.who-name{font:inherit;color:inherit;background:none;border:0;padding:0 0 1px;margin:0;cursor:pointer;
  text-decoration:underline dotted;text-decoration-thickness:2px;text-underline-offset:6px}
.xcard{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);width:264px;z-index:5;
  display:grid;grid-template-columns:56px 1fr;column-gap:12px;align-items:center;
  padding:16px;border-radius:18px;background:var(--pop-bg);color:var(--ink);box-shadow:var(--pop-shadow);border:1px solid var(--line-soft);
  font-size:15px;line-height:1.35;font-weight:400;letter-spacing:0;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s;
}
/* the hover bridge between the trigger and the card; site.js places the card inside the viewport and flips it
   below the trigger (.below) when there is no room above */
.xcard::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.xcard.below::after{top:auto;bottom:100%}
.pop:hover .popcard,.pop.open .popcard,.pop:focus-within .popcard{opacity:1;visibility:visible}
.pop.shut .popcard{opacity:0;visibility:hidden}
.xcard img{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:block;object-fit:cover}
.xc-name{font-weight:700;font-size:16px;align-self:end}
.xc-handle{color:var(--ink-2);align-self:start}
.xc-bio{grid-column:1/-1;margin:12px 0 12px}
.xc-line{display:block}
.xc-line + .xc-line{margin-top:4px}
.xc-follow{grid-column:1/-1;justify-self:start;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;text-transform:lowercase;
  padding:7px 14px;border-radius:var(--r-pill);font-size:14px}
.xc-follow:hover{opacity:.88}

.hc-mapla{width:300px;height:300px;flex:none;border:1.5px solid var(--line);border-radius:var(--r-box);background:var(--card);
  display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.hc-mapla svg{width:250px;height:250px;display:block}
.hc-mapla{transition:box-shadow .18s ease}
/* a wearable sticker held over the square (drop to wear) */
.hc-mapla.drop-on{box-shadow:0 0 0 7px var(--drop-ring)}
/* re-rendered every frame: a shared negative delay keeps the CSS loops (blink, bounce, z) continuous */
.hc-mapla .eye,.hc-mapla .bodyg,.hc-mapla .zz{animation-delay:var(--ad,0s)}

/* 2. the video slot: with the hero box gone there is no edge left to overlap, so it sits below the write-up */
/* the pre-launch pill sits outside the video (owner 2026-10-12): from 900 px directly above it at its right edge,
   narrower directly below it, centred; 12 px gap as a margin, so the empty row costs nothing once it is hidden */
.stage-wrap{position:relative;z-index:2;width:calc(100% * var(--vw));margin:56px auto 0;display:grid;
  grid-template-areas:"stage" "soon";pointer-events:none}
.stage-wrap > *{pointer-events:auto}
.stage{
  grid-area:stage;position:relative;z-index:2;width:100%;margin:0;
  aspect-ratio:16/9;border:1.5px solid var(--line);border-radius:var(--r-video);overflow:hidden;background:var(--video-bg);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.stage video{width:100%;height:100%;display:block;object-fit:cover;cursor:pointer;background:var(--video-bg)}
.stage video:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.pill{position:absolute;border:0;border-radius:var(--r-pill);padding:6px 13px;font:600 13px/18px var(--font);letter-spacing:.1px}
/* the sound control: a monochrome icon button, ink on a light pill; mic when on, mic with a slash when muted */
.pill.sound{right:14px;bottom:14px;width:40px;height:40px;padding:0;display:grid;place-items:center;
  color:var(--pill-ink);background:var(--pill-bg);border:1px solid var(--line-soft);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill.sound:hover{background:var(--card)}
.pill.sound svg{display:block;width:20px;height:20px}
.pill.sound[aria-pressed="true"] .mic-slash{display:none}
.stage-wrap .pill.soon{position:static;grid-area:soon;justify-self:center;margin-top:12px;color:var(--pill-soon-ink);background:var(--pill-soon-bg);
  border:1px solid var(--line-soft)}
/* the play affordance: centred over the video, lowercase Inter, ink on a light pill; fades after the first click
   (clicks pass through it to the video) */
.pill.cta{left:50%;top:50%;transform:translate(-50%,-50%);padding:11px 20px;font:600 16px/22px var(--font);letter-spacing:-.01em;
  text-transform:lowercase;white-space:nowrap;color:var(--pill-ink);background:var(--pill-bg);border:1px solid var(--line-soft);
  box-shadow:0 4px 18px rgba(0,0,0,.22);pointer-events:none;transition:opacity .35s ease,visibility 0s linear 0s}
.pill.cta.off{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
/* the song is still downloading after the click: the mic breathes until it starts */
.pill.sound.wait svg{animation:mic-wait 1s ease-in-out infinite}
@keyframes mic-wait{50%{opacity:.35}}
.pill[hidden]{display:none}

/* no aspect-ratio (older WebKit): the classic 56.25% padding box for the 16:9 frames */
@supports not (aspect-ratio:16/9){
  .stage,.mc-panel .media{height:0;padding-top:56.25%}
  .mc-panel .media{position:relative;display:block}
  .stage video,.mc-panel .media > *{position:absolute;left:0;top:0;width:100%;height:100%}
}

@media (min-width:900px){
  .stage-wrap{grid-template-areas:"soon" "stage"}
  .stage-wrap .pill.soon{justify-self:end;margin:0 0 12px}
}

/* 3. mascot cards, rows of two */
.mascots{margin-top:64px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.mc{
  position:relative;display:flex;align-items:center;gap:18px;min-height:168px;padding:22px 24px;margin:0;width:100%;
  border:1.5px solid var(--line);border-radius:var(--r-small);background:var(--card);color:var(--ink);
  font:inherit;text-align:left;box-shadow:var(--card-shadow);
}
button.mc{cursor:pointer;transition:transform .15s ease}
button.mc:hover{transform:translateY(-2px)}
button.mc[aria-expanded="true"]{background:var(--card-2)}
.mc-live{flex:none;width:88px;height:88px;display:block}
.mc-live svg{width:88px;height:88px;display:block}
.mc-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.mc-num{font:500 14px/18px var(--font);text-transform:lowercase;color:var(--ink-2)}
.mc-names{font-size:21px;line-height:1.35;font-weight:700}
.mc-names .nameTa{font-weight:600}
.mc-tag{font-size:16px;line-height:1.4;text-transform:lowercase}
.mc-use{font-size:14px;line-height:1.45;color:var(--ink-3)}
/* the next mascot: plain text, no box, centred after the last revealed row (in the grid's place while it is empty) */
.next-soon{margin:0;text-align:center;font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cards:not(:empty) + .next-soon{margin-top:28px}
.next-soon[hidden]{display:none}

/* the day's section, opened inline under its row */
.mc-panel{grid-column:1/-1;position:relative;border:1.5px solid var(--line);border-radius:var(--r-small);background:var(--card);
  padding:20px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start;box-shadow:var(--card-shadow)}
.mc-panel .media{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--video-bg);display:grid;place-items:center}
.mc-panel .media video,.mc-panel .media img{width:100%;height:100%;object-fit:cover;display:block}
.mc-panel .media .live{background:var(--card-2);width:100%;height:100%;display:grid;place-items:center}
.mc-panel .media .live svg{width:120px;height:120px}
.mc-panel .story{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.mc-panel .story p{margin:0}
.mc-panel .bubble{align-self:flex-end;max-width:90%;background:var(--accent);color:var(--on-accent);border-radius:18px 18px 4px 18px;padding:8px 13px;font-size:15px;line-height:1.4}
.mc-panel .reply{font-size:15px}
.mc-panel .result{font-size:15px;font-weight:600}
.mc-panel .results{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:15px;font-weight:600}
.mc-panel .results .site{color:var(--ink-2);font-weight:400;margin-right:4px}
.mc-close{position:absolute;right:12px;top:12px;border:1px solid var(--line-soft);background:var(--card);color:var(--ink);
  border-radius:var(--r-pill);font:600 13px/18px var(--font);padding:4px 11px;cursor:pointer;text-transform:lowercase}
.mc-panel .story{padding-top:36px}

/* footer: the meaning card left, the credentials right, the Kural centred below both (stacked on phone) */
/* plain page colour, no dots, from the footer top to the page bottom, full width */
.foot{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax -100vmax);background:var(--bg);margin-top:80px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;row-gap:40px;align-items:start;color:var(--ink)}
.foot p{margin:0}
.foot-mean{max-width:30em;border:1px solid var(--line-soft);border-radius:10px;background:#FFFFFF;padding:20px 22px}
/* the meaning card as a slang-dictionary entry (look only): link-blue headword, part of speech, numbered
   definitions and a byline */
.fm-head{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:12px}
.fm-ta{font-family:var(--tamil);font-weight:700;font-size:44px;line-height:1.3;color:#134FE6}
.fm-lat{font-family:var(--font);font-size:18px;font-weight:600;color:var(--ink-2)}
.foot .fm-pos{font-size:14px;color:var(--ink-3);margin-top:2px}
.fm-defs{margin:14px 0 0;padding-left:1.4em;font-size:15px;line-height:1.55}
.fm-defs li+li{margin-top:6px}
.foot .fm-by{margin-top:14px;font-size:14px;color:var(--ink-2)}
.fm-by a{color:#134FE6;font-weight:600;text-decoration:none}
.fm-by a:hover{text-decoration:underline}
.foot-cred{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:15px;line-height:1.45;color:var(--ink-2);text-align:right;padding-top:6px}
.fc-name{font-weight:700;color:var(--ink);font-size:17px}
.foot-cred a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Thirukkural 355: the page's closing statement, centred, no card. Each line stays on one line: about 17em
   per line, so the size eases down with the viewport (16.5 px on a 375 px screen) */
.foot-kural{grid-column:1/-1;text-align:center;padding:0 0 64px}
.k-label{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.foot .k-lines{margin-top:12px;color:var(--ink)}
.k-line{display:block;font-family:var(--tamil);font-weight:600;font-size:28px;font-size:min(40px,4.4vw);line-height:1.45;white-space:nowrap}
.foot .k-mean{max-width:560px;margin:20px auto 0;font-family:var(--font);font-size:20px;line-height:1.5;color:var(--ink-2)}

/* 4. stickers: a full-page layer above the grid and behind the column */
.stickers{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}
.sticker{position:absolute;left:0;top:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transform:rotate(var(--rot,0deg)) scale(var(--sc,1));transition:transform .18s ease;filter:var(--sticker-shadow)}
.sticker svg{display:block;width:100%;height:100%;overflow:visible}
.sticker.dragging{--sc:1.08;cursor:grabbing;transition:none}
/* the held sticker floats in a second layer above the column (so it shows over Mapla's square) */
.stickers.top{z-index:3}
/* drop to wear: a worn sticker fades out; a refused one springs back; a returned one pops in */
.sticker.gone{opacity:0;scale:.4;visibility:hidden;pointer-events:none;transition:opacity .22s ease,scale .22s ease,visibility 0s linear .22s}
.sticker.spring{transition:left .45s cubic-bezier(.34,1.56,.64,1),top .45s cubic-bezier(.34,1.56,.64,1),transform .18s ease}
.sticker.pop{animation:sticker-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes sticker-pop{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}
.sticker.letter{filter:none;font-family:var(--tamil);font-weight:600;line-height:1.3;color:var(--ink);text-shadow:var(--letter-shadow);padding:0 .08em}

/* 404 */
.notfound{padding-top:20vh;pointer-events:auto}
.notfound h1{margin:0 0 6px}

/* desktop: the hero sits roughly centred in the first screen (its top at about 18vh, at least 120 px) */
@media (min-width:900px){
  .wrap{padding-top:120px;padding-top:max(120px,18vh)}
  .hero-card{padding-top:0}
}

/* narrow screens: stack the hero card, keep rows of two while they fit */
@media (max-width:860px){
  .hero-card{grid-template-columns:1fr;padding:16px 4px 0}
  .hc-text h1{font-size:46px}
  .hc-mapla{margin:26px auto 0;width:240px;height:240px}
  .hc-mapla svg{width:200px;height:200px}
  .hc-plan{margin-top:22px}
}
@media (max-width:720px){
  :root{--vw:.92}
  .wrap{padding:28px 18px 32px}
  .hc-text h1{font-size:38px}
  .hc-write{font-size:17px}
  .hc-plan{font-size:16px}
  .hero-card{padding:8px 2px 0}
  .stage{border-radius:18px}
  .stage-wrap{margin-top:40px}
  .who .xcard{left:auto;right:-8px;transform:none}
  .mascots{margin-top:44px}
  .mc{min-height:0;padding:18px;flex-direction:column;align-items:flex-start;gap:10px}
  .mc-live,.mc-live svg{width:64px;height:64px}
  .mc-panel{grid-template-columns:1fr;padding:14px}
  .cards{gap:16px}
}
@media (max-width:720px){
  .foot{grid-template-columns:1fr;row-gap:32px;margin-top:56px}
  .foot-cred{align-items:flex-start;text-align:left;padding-top:0}
  .fm-ta{font-size:40px}
  .foot-kural{padding:0 0 40px}
  .foot .k-mean{font-size:18px}
  .pill.cta{font-size:14px;line-height:20px;padding:9px 16px}
}
@media (max-width:520px){
  .k-line{font-size:16px;font-size:min(40px,4.4vw)}
  .pill.cta{white-space:normal;width:max-content;max-width:calc(100% - 28px);text-align:center;font-size:13px;line-height:18px}
  .cards{grid-template-columns:1fr}
  .mc{flex-direction:row;align-items:center}
}

/* mascot animations, as in show/mascot-editor/style.css */
.eye,.bub,.bodyg,.eyes,.zz{transform-box:fill-box;transform-origin:center}
.st-blink .eye{animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.st-look .eye{animation:look 3.2s ease-in-out infinite}
@keyframes look{0%,100%{transform:translateX(0)}35%{transform:translateX(3px)}70%{transform:translateX(-3px)}}
.ex-bounce .bodyg{animation:bounce .5s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-2px)}}
.ex-hop .bodyg{animation:hop 1.4s ease-in-out infinite}
@keyframes hop{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(-4px)}}
.ex-tremble .eye{animation:tremble .18s linear infinite}
@keyframes tremble{0%,100%{transform:translateX(0)}25%{transform:translateX(-.5px)}75%{transform:translateX(.5px)}}
.zz{animation:zz 2.4s ease-in-out infinite}
@keyframes zz{0%,100%{opacity:.35;transform:translateY(1px)}50%{opacity:1;transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:720px){
  .mc-panel{padding-top:52px}
  .mc-panel .story{padding-top:0}
}

/* phones and touch (owner 2026-10-12): the X card opens as a bottom sheet fixed to the viewport, so a card
   opened by :hover or :focus-within before (or without) place() can never leave the screen.
   .pop .xcard.popcard outranks .who .xcard; no ancestor of the card has a transform, filter or backdrop-filter, so fixed is relative to the viewport. site.js place() leaves these alone. */
@media (max-width:719px),(hover:none){
  .pop .xcard.popcard{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;transform:none;max-height:calc(100vh - 24px);overflow:auto}
  .pop .xcard.popcard::after{display:none}
}