/* Shunya website: same monospace look as the app, AMOLED black + matte white. */
@font-face {
  font-family: "Shunya Mono";
  src: url("fonts/DejaVuSansMono.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shunya Mono";
  src: url("fonts/DejaVuSansMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --ink: #fff;
  --ink70: rgba(255, 255, 255, 0.7);
  --ink54: rgba(255, 255, 255, 0.54);
  --ink24: rgba(255, 255, 255, 0.24);
  --ink12: rgba(255, 255, 255, 0.12);
  --mono: "Shunya Mono", "Droid Sans Mono", "Noto Sans Mono", "DejaVu Sans Mono",
    "Roboto Mono", ui-monospace, monospace, "Noto Sans Devanagari";
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]), :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f0eee8;
    --ink: #000;
    --ink70: rgba(0, 0, 0, 0.7);
    --ink54: rgba(0, 0, 0, 0.54);
    --ink24: rgba(0, 0, 0, 0.24);
    --ink12: rgba(0, 0, 0, 0.12);
  }
}
:root[data-theme="gray"] {
  color-scheme: light;
  --bg: #d7d6d2;
  --ink: #171717;
  --ink70: rgba(23, 23, 23, 0.76);
  --ink54: rgba(23, 23, 23, 0.58);
  --ink24: rgba(23, 23, 23, 0.24);
  --ink12: rgba(23, 23, 23, 0.12);
}
:root[data-theme="white"] {
  color-scheme: light;
  --bg: #f0eee8;
  --ink: #000;
  --ink70: rgba(0, 0, 0, 0.7);
  --ink54: rgba(0, 0, 0, 0.54);
  --ink24: rgba(0, 0, 0, 0.24);
  --ink12: rgba(0, 0, 0, 0.12);
}
:root[data-theme="black"] {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
}
a { color: var(--ink); text-decoration-color: var(--ink54); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(100% - 64px, 1280px); margin: 0 auto; padding: 0 0 80px; }
header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--ink12);
}
header.top .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; letter-spacing: 0.08em; }
header.top img { width: 36px; height: 36px; border-radius: 9px; }
nav.links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }

h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.25; margin: 0 0 16px; letter-spacing: 0.02em; }
h2 { font-size: 20px; margin: 56px 0 10px; padding-top: 18px; border-top: 1px solid var(--ink12); }
h3 { font-size: 16px; margin: 28px 0 6px; }
p, li { color: var(--ink70); }
p strong, li strong, td strong { color: var(--ink); }
.lead { font-size: 17px; color: var(--ink70); max-width: 62ch; }
.muted { color: var(--ink54); font-size: 13px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
code, kbd {
  font-family: var(--mono); font-size: 0.92em; padding: 1px 6px;
  border: 1px solid var(--ink24); border-radius: 6px; color: var(--ink);
}

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 4px 12px; border: 1px solid var(--ink24); border-radius: 999px; font-size: 13px; text-decoration: none; }
.toc a:hover { border-color: var(--ink); }

.intro-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: 52px 0 24px; }
.intro-copy { min-width: 0; }
.preview-title { margin: 32px 0 12px; padding: 0; border: 0; font-size: 15px; }
.theme-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-switcher button { padding: 8px 13px; border: 1px solid var(--ink24); border-radius: 999px; background: transparent; color: var(--ink70); font: inherit; font-size: 12px; cursor: pointer; }
.theme-switcher button[aria-pressed="true"], .theme-switcher button:hover { color: var(--ink); border-color: var(--ink); }
.intro-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.intro-shots figure { margin: 0; min-width: 0; }
.intro-shots img { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto; border: 1px solid var(--ink24); border-radius: 22px; }
.intro-shots figcaption { margin-top: 8px; font-size: 12px; color: var(--ink54); text-align: center; }
.topic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.topic figure { margin: 0; min-width: 0; }
.topic img { width: 100%; max-width: 340px; height: auto; display: block; border: 1px solid var(--ink24); border-radius: 22px; }
.topic figcaption { margin-top: 8px; font-size: 12px; color: var(--ink54); text-align: center; }
.home-gallery { min-width: 0; }
.home-gallery > .muted { margin: 14px 0 0; }
.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.stack figure { min-width: 0; }
.stack img { width: 100%; height: auto; display: block; border: 1px solid var(--ink24); border-radius: 18px; }
.stack figcaption { margin-top: 6px; font-size: 12px; color: var(--ink54); text-align: center; }
.app-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); align-items: start; }
.app-gallery figure { margin: 0; min-width: 0; }
.app-gallery img { width: 100%; height: auto; display: block; border: 1px solid var(--ink24); border-radius: 16px; }
.app-gallery figcaption { margin-top: 7px; font-size: 12px; color: var(--ink54); text-align: center; }
.app-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.app-details p { margin: 0; }
.heritage-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: 52px 0 24px; }
.heritage-copy { min-width: 0; }
.heritage-kicker { margin: 0 0 14px; color: #a97735; font-size: 12px; letter-spacing: .1em; }
:root[data-theme="black"] .heritage-kicker { color: #e3b967; }
.heritage-art { margin: 0; min-width: 0; padding: clamp(12px, 2vw, 24px); border: 1px solid var(--ink12); border-radius: 28px; background: radial-gradient(ellipse at center, rgba(221, 177, 96, .12), transparent 70%); }
.heritage-art img { width: 100%; max-width: 500px; height: auto; display: block; margin: 0 auto; border-radius: 22px; }
.heritage-art figcaption { margin-top: 10px; color: var(--ink54); font-size: 12px; text-align: center; }
.heritage-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font-weight: 700; }
.heritage-section { margin-top: 28px; }
.heritage-section h2 { max-width: 760px; }
.heritage-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 36px; align-items: start; }
.heritage-note, .heritage-principles article { padding: 20px; border: 1px solid var(--ink12); border-radius: 14px; }
.heritage-note h3, .heritage-principles h3 { margin: 0 0 8px; }
.heritage-note p, .heritage-principles p { margin: 0; }
.heritage-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) {
  .wrap { width: min(100% - 36px, 600px); }
  .intro-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .intro-shots { max-width: 520px; }
  .heritage-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .heritage-art { max-width: 520px; }
  .heritage-columns { grid-template-columns: 1fr; gap: 18px; }
  .heritage-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic { grid-template-columns: 1fr; }
  .topic figure { max-width: 340px; }
  .app-gallery { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; padding-bottom: 10px; }
  .app-details { grid-template-columns: 1fr; gap: 12px; }
}

.note { border: 1px solid var(--ink24); border-radius: 12px; padding: 12px 16px; margin: 18px 0; }
.note p { margin: 0; }

.table-scroll { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ink12); }
th { color: var(--ink); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--ink24); }
td { color: var(--ink70); }
td:first-child { color: var(--ink); width: 34%; overflow-wrap: anywhere; }

footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--ink12); font-size: 13px; color: var(--ink54); }

.topic.nofig { grid-template-columns: 1fr; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); gap: 18px; margin: 16px 0; }
.shots figure { margin: 0; min-width: 0; }
.shots img { width: 100%; height: auto; border: 1px solid var(--ink24); border-radius: 18px; display: block; }
.shots figcaption { margin-top: 6px; font-size: 12px; color: var(--ink54); text-align: center; }

@media (max-width: 480px) {
  .wrap { width: min(100% - 28px, 420px); }
  .intro-shots { gap: 10px; }
  .intro-shots img { border-radius: 16px; }
  .heritage-principles { grid-template-columns: 1fr; }
  .theme-switcher button { padding: 7px 10px; }
}