/* Project Ashoka — projectashoka.com
   Stone-inscription pixel theme. Static, no build step. */

:root{
  --basalt:      #0E0D0C;   /* page ground */
  --stone:       #2A2622;   /* tablet face */
  --stone-deep:  #1A1715;   /* carved recess */
  --stone-edge:  #4A4139;   /* bevel */
  --sandstone:   #CFC3AA;   /* primary text */
  --chisel:      #8C8272;   /* secondary text */
  --ochre:       #D9A441;   /* carved-gold accent */
  --moss:        #7A8A63;   /* topic accent */

  --pixel: "Press Start 2P", ui-monospace, monospace;
  --read:  "Tiro Devanagari Hindi", Georgia, serif;

  --tab-h: 58px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--basalt);
  /* faint chisel grain, no image dependency */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  color:var(--sandstone);
  font-family:var(--read);
  font-size:17px;
  line-height:1.75;
  padding-bottom:calc(var(--tab-h) + 8px);
}

@media (min-width:760px){ body{ padding-bottom:0 } }

.wrap{max-width:720px;margin:0 auto;padding:22px 18px 40px}

/* ---------- carved tablet ---------- */
.tablet{
  background:var(--stone);
  border:2px solid var(--stone-edge);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 0 0 4px var(--basalt),
    0 0 0 6px var(--stone-deep);
  padding:26px 20px 30px;
}

/* ---------- masthead ---------- */
.mast{text-align:center}

.mark{
  display:block;margin:0 auto 16px;width:112px;height:auto;
  image-rendering:pixelated;
}

.mast h1{
  font-family:var(--pixel);
  font-size:15px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--sandstone);
  margin:0 0 14px;
}

.tagline{
  font-family:var(--pixel);
  font-size:9px;
  line-height:2.1;
  color:var(--ochre);
  margin:0;
}

/* carved band: placeholder for the verified Brahmi lettering (see README) */
.band{
  height:14px;margin:18px auto 0;max-width:280px;
  background:
    repeating-linear-gradient(90deg,
      var(--stone-deep) 0 6px, transparent 6px 12px);
  border-top:1px solid rgba(0,0,0,.5);
  border-bottom:1px solid rgba(255,255,255,.05);
  opacity:.55;
}

.intro{
  color:var(--chisel);
  font-size:15.5px;
  text-align:center;
  margin:22px auto 0;
  max-width:46ch;
}

/* ---------- section headings ---------- */
.head{
  font-family:var(--pixel);
  font-size:11px;
  color:var(--ochre);
  margin:38px 0 14px;
}

/* ---------- inscription list ---------- */
.list{list-style:none;margin:0;padding:0}

.list li{border-top:1px solid var(--stone-edge)}
.list li:last-child{border-bottom:1px solid var(--stone-edge)}

.list a{
  display:block;padding:16px 4px;text-decoration:none;color:inherit;
}
.list a:hover,.list a:focus-visible{background:var(--stone-deep)}

.list .t{
  font-size:19px;color:var(--sandstone);margin:0 0 4px;line-height:1.4;
}
.list .s{font-size:14.5px;color:var(--chisel);margin:0}
.list .m{
  font-family:var(--pixel);font-size:8px;color:var(--moss);
  margin:8px 0 0;
}

/* ---------- topic blocks ---------- */
.blocks{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0;padding:0;
  list-style:none;
}
.blocks a{
  display:block;padding:20px 12px;text-align:center;text-decoration:none;
  font-family:var(--pixel);font-size:9px;line-height:1.8;
  color:var(--sandstone);
  background:var(--stone-deep);
  border:1px solid var(--stone-edge);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
.blocks a:hover,.blocks a:focus-visible{color:var(--ochre);border-color:var(--ochre)}
.blocks .hi{display:block;color:var(--chisel);font-size:8px;margin-top:8px}

/* ---------- store strip ---------- */
.strip{
  margin-top:38px;padding:20px;
  border:1px dashed var(--stone-edge);
  text-align:center;
}
.strip p{margin:0 0 14px;color:var(--chisel);font-size:15px}

.btn{
  display:inline-block;
  font-family:var(--pixel);font-size:9px;line-height:1;
  padding:13px 16px;text-decoration:none;
  color:var(--basalt);background:var(--ochre);
  border:2px solid var(--basalt);
  box-shadow:0 3px 0 #8f6a1f;
}
.btn:hover,.btn:focus-visible{transform:translateY(1px);box-shadow:0 2px 0 #8f6a1f}

/* ---------- reading page ---------- */
.post{margin-top:6px}
.post .kicker{
  font-family:var(--pixel);font-size:8px;color:var(--moss);margin:0 0 14px;
}
.post h1{
  font-size:30px;line-height:1.35;margin:0 0 10px;color:var(--sandstone);
  font-weight:600;
}
.post .sub{color:var(--chisel);font-size:16px;margin:0 0 26px}

.post .body{max-width:38em}
.post .body p{margin:0 0 20px}
.post .body h1,.post .body h2{
  font-size:21px;color:var(--ochre);margin:34px 0 12px;line-height:1.4;
  font-weight:600;
}
.post .body blockquote{
  margin:26px 0;padding:16px 18px;
  background:var(--stone-deep);
  border-left:3px solid var(--ochre);
  color:var(--sandstone);
}
.post .body blockquote p:last-child{margin:0}
.post .body hr{border:0;border-top:1px solid var(--stone-edge);margin:32px 0}
.post .body em{color:var(--chisel)}
.post .body strong{color:var(--sandstone)}

.respond{
  margin-top:40px;padding:20px;border:1px solid var(--stone-edge);
  background:var(--stone-deep);
}
.respond h2{font-family:var(--pixel);font-size:10px;color:var(--ochre);margin:0 0 10px}
.respond p{margin:0 0 14px;color:var(--chisel);font-size:15px}

/* ---------- static pages ---------- */
.doc h1{font-size:26px;margin:0 0 6px}
.doc h2{font-size:18px;color:var(--ochre);margin:28px 0 8px}
.doc p,.doc li{color:var(--sandstone);font-size:16px}
.doc .upd{color:var(--chisel);font-size:14px;margin:0 0 24px}

/* ---------- footer ---------- */
.foot{
  margin-top:34px;text-align:center;color:var(--chisel);font-size:13.5px;
}
.foot a{color:var(--chisel)}
.foot nav{margin-top:10px}
.foot nav a{margin:0 8px;white-space:nowrap}

a{color:var(--ochre)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* ---------- mobile tab bar ---------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;height:var(--tab-h);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--stone);
  border-top:2px solid var(--stone-edge);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:10;
}
.tabs a{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pixel);font-size:8px;color:var(--chisel);
  text-decoration:none;text-align:center;
}
.tabs a[aria-current="page"]{color:var(--ochre)}

@media (min-width:760px){
  .tabs{display:none}
  body{font-size:18px}
  .wrap{padding:44px 20px 60px}
  .tablet{padding:44px 46px 48px}
  .mast h1{font-size:19px}
  .tagline{font-size:11px}
  .post h1{font-size:38px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}