/* mathureshdas.net — handmade, early-web, devotional. One sheet. */
:root{
  --night:#0b0b1e; --night-2:#14143a; --ink:#f3ead2; --ink-dim:#c9bfa4;
  --saffron:#ff9a2e; --gold:#ffd25a; --tulsi:#58e08a; --link:#8fb8ff; --visited:#d39cff; --rose:#ff6f91;
  --old:"IM Fell English", "Times New Roman", Times, serif;
  --old-sc:"IM Fell English SC", "Times New Roman", Times, serif;
  --term:"VT323", "Courier New", Courier, monospace;
}
*{ box-sizing:border-box; }
html{ background:var(--night); }
body{
  margin:0; color:var(--ink); font:19px/1.6 var(--old);
  background-color:var(--night);
  /* a hand-tiled night sky: three layers of stars, no image file */
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, #ffd25a99 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75px 160px, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 190px 200px, #8fb8ff88 50%, transparent 51%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  background-size:220px 220px, 260px 260px, 300px 300px, 240px 240px, 100% 100%;
  background-attachment:fixed;
}
a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:visited{ color:var(--visited); }
a:hover{ color:var(--gold); background:#ffffff10; }
img{ max-width:100%; height:auto; display:block; }
.small{ font-size:.85em; color:var(--ink-dim); }

/* the mantra ticker */
.mantra{ overflow:hidden; white-space:nowrap; border-bottom:2px ridge var(--saffron); background:#000; color:var(--saffron);
  font:20px/1.6 var(--term); letter-spacing:.06em; }
.mantra span{ display:inline-block; padding-left:100%; animation:tick 60s linear infinite; }
@keyframes tick{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .mantra span{ animation:none; padding-left:12px; } }

/* header */
.top{ max-width:1100px; margin:0 auto; padding:26px 16px 10px; text-align:center; }
.mast{ font:clamp(40px,8vw,84px)/1 var(--old-sc); color:var(--gold) !important; text-decoration:none; letter-spacing:.02em;
  text-shadow:0 0 18px #ff9a2e66, 2px 2px 0 #7a2f00; }
.mast:hover{ background:none; }
.om{ color:var(--saffron); font-family:serif; }
.sig{ margin:18px 0 6px; font-size:46px; line-height:1; }
.glyph--sig{ margin:0; }
.glyph{ width:.82em; height:.82em; vertical-align:-.06em; margin-right:.12em; color:var(--saffron); filter:drop-shadow(0 0 10px #ff9a2e88); }   /* the Manji glyph — his symbol */
.tag{ margin:8px 0 14px; font:22px/1.2 var(--term); color:var(--tulsi); letter-spacing:.08em; }
.nav{ font:22px/1.8 var(--term); }
.nav a{ color:var(--ink); text-decoration:none; padding:0 2px; }
.nav a:hover, .nav a[aria-current]{ color:var(--night); background:var(--gold); }

main{ max-width:1100px; margin:0 auto; padding:10px 16px 30px; }
hr.star{ border:0; height:24px; margin:30px 0 10px; text-align:center; overflow:visible; }
hr.star::before{ content:"~ * ~ ✦ ~ * ~ ॐ ~ * ~ ✦ ~ * ~"; color:var(--saffron); font:20px var(--term); letter-spacing:.2em; }

/* boxes: double-ruled, like a 1998 table */
.box{ border:4px double var(--saffron); background:#0b0b1ecc; padding:12px 16px; margin:0 0 18px; }
.h-term{ font:30px/1.2 var(--term); color:var(--tulsi); margin:0 0 14px; letter-spacing:.03em; }
.h-term.small{ font-size:22px; margin:0 0 6px; }
.cursor{ animation:blink 1s steps(1) infinite; }
.blink{ animation:blink 1.2s steps(1) infinite; color:var(--rose); font-family:var(--term); font-size:1.15em; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .cursor,.blink{ animation:none; } }
ul.plain{ list-style:"✦ "; padding-left:1.2em; margin:0; }
ul.plain li{ margin:0 0 8px; color:var(--saffron); }
ul.plain li > *{ color:inherit; }
ul.plain a{ color:var(--link); }

/* the front page: timeline + side column */
.cols{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.post{ border:2px solid #ffffff22; border-left:6px solid var(--saffron); background:#0b0b1ed9; padding:16px 18px; margin:0 0 22px; }
.post--video{ border-left-color:var(--rose); }
.post--audio{ border-left-color:var(--tulsi); }
.post__meta{ margin:0 0 4px; font:20px var(--term); color:var(--ink-dim); }
.kind{ background:var(--saffron); color:var(--night); padding:0 6px; margin-right:6px; }
.post--video .kind{ background:var(--rose); }
.post--audio .kind{ background:var(--tulsi); }
.post__title{ margin:0 0 10px; font:normal 30px/1.15 var(--old); }
.post__title a{ color:var(--gold); text-decoration:none; }
.post__title a:hover{ text-decoration:underline; }
.post__img{ border:3px ridge var(--gold); margin:8px 0 10px; max-height:360px; width:100%; object-fit:cover; }
.post__sum{ margin:8px 0; }
.post__more{ margin:8px 0 0; font:21px var(--term); }
.share{ font:21px var(--term); color:var(--link); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
.share:hover{ color:var(--gold); }
.side__me{ border:3px ridge var(--gold); margin:0 auto 10px; width:100%; }

/* video facade: nothing from YouTube loads until play */
.yt{ position:relative; aspect-ratio:16/9; border:3px ridge var(--gold); background:#000; margin:8px 0 10px; }
.yt__cover{ position:absolute; inset:0; width:100%; border:0; padding:0; cursor:pointer; background:#000 center/cover no-repeat; }
.yt__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:28px var(--term); color:var(--night); background:var(--gold);
  padding:6px 18px; border:3px outset var(--saffron); }
.yt__cover:hover .yt__play{ background:var(--saffron); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
audio{ width:100%; margin:8px 0; }

/* a single post / page */
.single{ max-width:760px; margin:0 auto; }
.single__title{ font:normal clamp(34px,6vw,56px)/1.05 var(--old); color:var(--gold); margin:4px 0 16px; }
.lead{ font-size:1.2em; color:var(--ink-dim); font-style:italic; }
.prose p{ margin:0 0 1.1em; }
.prose h2{ font:28px var(--term); color:var(--tulsi); margin:1.6em 0 .4em; }
.prose ul{ padding-left:1.2em; list-style:"✦ "; }
.prose li{ margin:0 0 .6em; }
.prose li::marker{ color:var(--saffron); }
.prose blockquote, .pull{ margin:1.6em 0; padding:14px 20px; border:4px double var(--gold); font-style:italic; font-size:1.2em; color:var(--gold); background:#ffd25a0d; }

/* ---- the About page: a magazine, cut and pasted by hand ---- */
.mag{ max-width:1040px; margin:0 auto; }
.mag__cover{ position:relative; border:6px double var(--gold); margin:0 0 34px; }
.mag__cover img{ width:100%; max-height:78vh; object-fit:cover; filter:saturate(1.1) contrast(1.05); }
.mag__masthead{ position:absolute; left:0; right:0; bottom:0; padding:30px 22px 18px; background:linear-gradient(transparent, #000c 60%); }
.mag__masthead h1{ margin:0; font:normal clamp(48px,10vw,120px)/.95 var(--old-sc); color:var(--gold); text-shadow:3px 3px 0 #7a2f00, 0 0 30px #ff9a2e88; }
.mag__issue{ margin:0 0 6px; font:20px var(--term); color:var(--tulsi); letter-spacing:.12em; }
.mag__deck{ margin:8px 0 0; font:italic 24px var(--old); color:var(--ink); }
.mag__spread{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:34px; align-items:center; margin:0 0 40px; }
.mag__spread--flip > :first-child{ order:2; }
.mag__text{ background:#0b0b1ee6; border:2px solid #ffffff1f; padding:18px 22px; }
.kicker{ font:22px var(--term); color:var(--saffron); letter-spacing:.1em; margin:18px 0 4px; text-transform:uppercase; }
.kicker:first-child{ margin-top:0; }
.dropcap::first-letter{ float:left; font:normal 86px/.8 var(--old-sc); color:var(--saffron); padding:6px 10px 0 0; }
.mag__band{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 0 40px; }
.mag__stack{ display:grid; gap:20px; justify-items:center; }
.ph{ margin:0; width:100%; background:#f3ead2; padding:10px 10px 4px; box-shadow:6px 8px 0 #000a; }   /* a print taped in */
.ph img{ width:100%; }
.ph figcaption{ font:20px/1.4 var(--term); color:#3a2a10; text-align:center; padding:4px 0 2px; }
.ph--tall{ max-width:340px; justify-self:center; }
.ph--small{ max-width:260px; }
.ph--tilt-r{ transform:rotate(1.6deg); }
.ph--tilt-l{ transform:rotate(-1.4deg); }
.ph::before{ content:""; display:block; width:90px; height:22px; margin:-20px auto 6px; background:#ffd25a8c; transform:rotate(-2deg); }   /* tape */
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.btn{ display:inline-block; font:22px var(--term); color:var(--night) !important; background:var(--gold); border:3px outset var(--saffron); padding:4px 14px; text-decoration:none; }
.btn:hover{ background:var(--saffron); }
.btn--ghost{ background:transparent; color:var(--gold) !important; border:3px double var(--gold); }
.contact{ text-align:center; max-width:640px; margin:10px auto 0; }

/* the work */
.work{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.work__item{ display:block; text-decoration:none; color:var(--ink) !important; }
.work__item h2{ font:normal 30px var(--old); color:var(--gold); margin:0 0 6px; }
.work__item:hover{ border-color:var(--gold); background:#ffd25a14; }

/* footer: 88x31 buttons, made in CSS */
.foot{ max-width:1100px; margin:0 auto; padding:0 16px 40px; text-align:center; color:var(--ink-dim); }
.badges{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.b88{ display:inline-flex; align-items:center; gap:6px; width:88px; height:31px; justify-content:center; font:15px/1 var(--term); text-decoration:none;
  color:#000 !important; background:linear-gradient(#fff, #c9c9c9); border:2px outset #eee; }
.b88 b{ background:#ff6600; color:#fff; padding:2px 4px; }
.b88--fb b{ background:#1877f2; }
.b88--mail b{ background:#2a9d3a; }
.b88--hand b{ background:#3d4aaa; }

@media (max-width:820px){
  body{ font-size:18px; }
  .cols{ grid-template-columns:1fr; }
  .mag__spread, .mag__band{ grid-template-columns:1fr; }
  .mag__spread--flip > :first-child{ order:0; }
  .ph--tilt-r, .ph--tilt-l{ transform:none; }
}

/* ---- the amiaOS wireframe (2026-10-26): the greeter's sky over the masthead, glass panels, the dock ----
   Palette from the amiaOS design tokens: night #04050D, night-glass, gold, cyan #9FD6E6, indigo-lift #5A6CDB. */
:root{ --wf-night:#04050D; --wf-glass:#0A0D1AE6; --wf-cyan:#9FD6E6; --wf-indigo:#5A6CDB; --wf-violet:#9d5be6; }
html, body{ background-color:var(--wf-night); }
body{ background-image:
    radial-gradient(1px 1px at 20px 30px, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 90px, #ffd25a99 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75px 160px, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 190px 200px, #8fb8ff88 50%, transparent 51%),
    linear-gradient(180deg, var(--wf-night) 0%, #0b0b22 100%); }

/* the masthead is the greeter: the sky canvas behind the name */
.top{ position:relative; max-width:none; min-height:clamp(520px, 72vh, 680px); padding:30px 16px 0;
  display:flex; flex-direction:column; align-items:center; overflow:hidden; border-bottom:1px solid #9FD6E633; }
.sky{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.top > :not(.sky):not(.dock){ position:relative; z-index:1; }
.mast{ text-shadow:0 0 22px #ff9a2e88, 2px 2px 0 #7a2f00, 0 0 2px #000; }
.tag{ background:#04050Dcc; padding:2px 10px; border:1px solid #58e08a44; }
.sky-note{ margin:auto 0 14px; padding:3px 12px; font:17px/1.3 var(--term); color:var(--ink); letter-spacing:.04em; background:var(--wf-glass); border:1px solid #ff6f9155; max-width:40ch; text-align:center; }

/* the dock: the amiaOS desktop's dock, gold-edged glass; the current place underlined in gold */
.dock{ position:relative; z-index:2; display:flex; justify-content:center; gap:2px; margin:0 0 22px; padding:6px 8px; background:var(--wf-glass);
  border:2px solid var(--gold); box-shadow:0 0 0 1px #000, 0 0 24px #ffd25a33; font:20px/1 var(--term); }
.dock a, .dock a:visited{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:76px; padding:6px 10px; color:var(--ink); text-decoration:none; }
.dock a i{ font-style:normal; font-size:18px; color:var(--wf-cyan); }
.dock a:hover{ background:#ffffff12; color:var(--gold); }
.dock a[aria-current]{ background:none; color:var(--gold); }
.dock a[aria-current] span{ border-bottom:2px solid var(--gold); }
.dock a[aria-current] i{ color:var(--gold); }

/* panels are the sign-in box: night glass with a cyan edge */
.box{ border:1px solid var(--wf-cyan); background:var(--wf-glass); box-shadow:inset 0 0 0 1px #000, 0 0 18px #9fd6e622; }
.post{ border:1px solid #9FD6E655; border-left:6px solid var(--saffron); background:var(--wf-glass); box-shadow:0 0 18px #9fd6e614; }
.post--video{ border-left-color:var(--rose); }
.post--audio{ border-left-color:var(--tulsi); }
.mag__text{ background:var(--wf-glass); border:1px solid #9FD6E655; }
.h-term{ display:inline-block; padding:4px 14px 4px 10px; border:1px solid #9FD6E666; background:var(--wf-glass); }
.h-term.small{ display:block; border:0; background:none; padding:0; }

/* phones: the dock sits on the bottom edge, like the desktop's; the sky stays a full first screen */
@media (max-width:700px){
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .top{ min-height:min(560px, 78svh); padding-top:22px; }
  .mast{ font-size:clamp(34px, 10.4vw, 48px); white-space:nowrap; }
  .tag{ font-size:18px; letter-spacing:.04em; }
  .sky-note{ font-size:15px; margin:auto 10px 18px 104px; text-align:left; }
  .dock{ position:fixed; z-index:50; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); margin:0;
    padding:4px; display:grid; grid-template-columns:repeat(5, 1fr); gap:0; background:#0A0D1A; box-shadow:0 0 0 1px #000, 0 -10px 30px #04050Dcc, 0 0 24px #ffd25a33; }
  .dock a, .dock a:visited{ min-width:0; padding:8px 2px; font-size:17px; min-height:52px; justify-content:center; }
  .dock a i{ font-size:19px; }
  main{ padding-top:16px; }
  .post{ padding:14px; }
  .post__title{ font-size:27px; }
  .h-term{ font-size:27px; }
}
@media (prefers-reduced-motion:reduce){ .sky{ animation:none; } }