:root {
  --brown-deep: #2a221c;
  --brown-mid: #3a2f28;
  --brown-light: #54453b;
  --taupe: #9a8b7a;
  --paper: #cfc6bb;
  --cream: #e8e0d6;
  --gutter: 1rem;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--mono);
  font-weight: 300;
  color: var(--cream);
  background: var(--brown-deep);
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* —— Main page: blurred photo background ——
   A dark tint over the photo keeps text contrast and leaves the jewellery
   photos the brightest thing on the page. Fixed by default; js/bg-trial.js
   switches to ?bg=page or ?bg=off for comparison. */
:root {
  --bg-photo: linear-gradient(rgba(20, 16, 12, 0.45), rgba(20, 16, 12, 0.45)),
    url("../images/background/bg-blur.jpg?v=2499367853");
}

/* Default: covers the screen and stays still. A fixed layer rather than
   background-attachment: fixed, which iPhone Safari ignores; 100lvh so the
   collapsing address bar does not make it jump. */
.home::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100lvh;
  background: var(--bg-photo) center / cover no-repeat;
}

html.bg-page .home::before,
html.bg-off .home::before {
  display: none;
}

/* ?bg=page: stretched over the whole page, scrolls with it, and follows any
   page height. On phones the page is ~25× taller than wide, so the vertical
   stretch shows as soft vertical streaks; on desktop it reads as patches. */
html.bg-page .home {
  background: var(--bg-photo) top center / 100% 100% no-repeat, var(--brown-deep);
}

/* —— Header: title, hero image, author collage —— */
.hero-title {
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(2.6rem, 13vw, 8rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.75), 0 2px 40px rgba(0, 0, 0, 0.5);
}

/* Title sits over the centre of the hero image */
.hero-frame .hero-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Fits the full width of a portrait phone, never cropped */
.hero-frame {
  position: relative;
  margin: 0 auto;
}

.hero-image {
  width: 100%;
}

/* Dims the photo a little so the title and menu read over it */
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(20, 16, 12, 0.45) 100%),
    linear-gradient(180deg, rgba(28, 22, 18, 0.28) 0%, rgba(28, 22, 18, 0.55) 100%);
  pointer-events: none;
}

/* Menu overlays the bottom of the hero image, aligned right */
.hero-nav {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 1.2rem;
  padding: 1.6rem var(--gutter) 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.7));
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
}

.hero-nav a:hover {
  color: #fff;
}

/* Author collage strip: phone width, ~10 mm high, centred on a full-width
   brown stripe; opens full screen */
.collage {
  display: block;
  background: var(--brown-mid);
  cursor: zoom-in;
}

.collage img {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

/* —— Sections —— */
.section {
  padding: 3.5rem var(--gutter) 3rem;
}

/* Air between the author collage and the first section */
.hero + .section {
  padding-top: 4.5rem;
}

/* "001": 30% more space above the header */
#astroidana-more {
  padding-top: 4.55rem;
}

.section + .section {
  border-top: 1px solid rgba(232, 224, 214, 0.08);
}

.section-title {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-align: left;
  margin-bottom: 1.6rem;
  color: var(--cream);
}

/* —— Gallery: justified rows, every photo whole —— */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.gallery::after {
  content: "";
  flex-grow: 999;
}

.item {
  flex: var(--r) 1 calc(var(--r) * 7.5rem);
  display: block;
  background: #000;
}

.item img,
.item video {
  width: 100%;
  height: auto;
}

a.item {
  cursor: zoom-in;
}

/* Video thumbnail: poster with a play mark; plays in the lightbox */
.item.video {
  position: relative;
}

.item.video::before,
.item.video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.item.video::before {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(10, 8, 6, 0.55);
}

.item.video::after {
  width: 0.8rem;
  height: 0.95rem;
  margin-left: 0.12rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Phone: identical 3:4 cells on a 4-column grid, rows left-aligned;
   .row-start begins a new row */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.gallery-grid::after {
  content: none;
}

.gallery-grid .item {
  aspect-ratio: 3 / 4;
}

.gallery-grid .item img {
  height: 100%;
  object-fit: contain;
}

.gallery-grid .row-start {
  grid-column-start: 1;
}

/* Collage link to a catalog further down */
/* Like the author collage: a full-width brown stripe, strip centred */
.strip-link {
  display: block;
  margin: 3.2rem calc(-1 * var(--gutter)) 0;
  background: var(--brown-light);
}

.strip-link img {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

.up-link,
.back-link,
.back-float {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.up-link {
  margin-top: 1.6rem;
}

/* —— Ratnashastra: article links (titles to come) —— */
.articles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.95rem;
  color: var(--taupe);
}

.articles a {
  color: var(--cream);
}

/* —— Article page: one long text, "назад" at the top, the bottom and floating —— */
/* Text a step below cream: full cream on this brown glows (halation) over a
   long read. Contrast stays about 10:1. */
.article-page {
  --a-bg: var(--brown-deep);
  --a-text: #d6cdc2;
  --a-head: var(--cream);
  --a-muted: var(--taupe);
  --a-verse: var(--paper);
  --a-rule: rgba(232, 224, 214, 0.08);
  background: var(--a-bg);
  color: var(--a-text);
}

/* Light text on dark renders heavy on macOS; grayscale smoothing thins it */
html:not(.light) .article-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light variant, on trial (see js/theme-toggle.js) */
html.light .article-page {
  --a-bg: var(--cream);
  --a-text: var(--brown-mid);
  --a-head: var(--brown-deep);
  --a-muted: #6b5c4e;
  --a-verse: var(--brown-light);
  --a-rule: rgba(42, 34, 28, 0.15);
}

.article-page .back-link {
  color: var(--a-muted);
}

.article-nav,
.article {
  max-width: 40rem;
  margin: 0 auto;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}

.article-nav {
  padding-top: 1.4rem;
}

/* Room below for the floating link, so it never covers the last line */
.article-nav-end {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

/* Back links are the only way home: big enough to hit with a thumb */
.back-link {
  padding: 0.6rem 0;
}

/* Literata: made for long reading on screens, and unlike IBM Plex it has every
   transliteration letter the articles use (ṃ ṇ ṛ ṣ ḥ ṭ ḍ ṅ), so no glyph
   falls back to whatever font the device has. Georgia and Noto Serif are the
   system fallbacks on Apple/Windows and Android. */
.article {
  padding-top: 1.6rem;
  font-family: Literata, Georgia, "Noto Serif", "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.article p,
.article ul,
.article ol {
  margin-bottom: 1em;
}

.article h1,
.article h2,
.article h3,
.article h4 {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
}

.article h1,
.article h2,
.article h3 {
  color: var(--a-head);
}

/* Mono at regular weight draws lighter than the Literata text around it, so
   section and subsection headings take 500 to stand out from the prose */
.article h2,
.article h3,
.article h4 {
  font-weight: 500;
}

.article h1 {
  font-size: 1.55rem;
  line-height: 1.35;
  margin-bottom: 2.4rem;
}

/* Contents: the sections of a long article, one tap away */
.toc {
  margin-bottom: 2.4rem;
}

.toc-title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tighter inside an entry than between entries, so each reads as one */
.toc ol {
  list-style: none;
  padding: 0;
  line-height: 1.45;
}

.toc li + li {
  margin-top: 0.75em;
}

.toc a {
  text-decoration-color: var(--a-muted);
  text-underline-offset: 0.2em;
}

/* An anchor jump leaves a little air above the heading */
.article h2 {
  scroll-margin-top: 1.5rem;
}

.article h2 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 3rem 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--a-rule);
}

.article h3 {
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 2.8rem 0 1rem;
}

.article h2 + h3 {
  margin-top: 0;
}

.article h4 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 2.2rem 0 0.8rem;
}

.article strong {
  font-weight: 600;
}

/* Sanskrit in transliteration, set apart from the prose. In the body serif:
   no free monospace font has the dotted letters. */
.article .verse {
  font-size: 0.9em;
  line-height: 1.65;
  color: var(--a-verse);
  padding-left: 0.9rem;
  border-left: 1px solid var(--a-muted);
}

.article ul {
  list-style-type: "–  ";
  padding-left: 1.4em;
}

.article li + li {
  margin-top: 0.5em;
}

.article .refs {
  padding-left: 1.8em;
  font-size: 0.9rem;
}

.article .refs li::marker {
  font-family: var(--mono);
  color: var(--a-muted);
}

.article .note {
  margin-top: 3rem;
  font-size: 0.85rem;
  color: var(--a-muted);
}

.article .signature {
  margin-top: 2rem;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* Long text: a pill stays at hand once the top link scrolls away */
.back-float,
.theme-toggle {
  position: fixed;
  z-index: 2;
  left: var(--gutter);
  bottom: 1rem;
  padding: 0.8rem 1.2rem;
  text-decoration: none;
  color: var(--cream);
  background: rgba(10, 8, 6, 0.8);
  border: 1px solid rgba(232, 224, 214, 0.35);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s, visibility 0.2s;
}

.back-float.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Temporary: dark/light switch for the client's review */
.theme-toggle {
  left: auto;
  right: var(--gutter);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* —— Footer —— */
.site-foot {
  padding: 2.4rem var(--gutter) 3rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1.8;
  color: var(--taupe);
}

/* —— Lightbox —— */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  background: rgba(10, 8, 6, 0.96);
  color: var(--cream);
}

.lightbox::backdrop {
  background: rgba(10, 8, 6, 0.96);
}

.lightbox-photo {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 3rem 0.5rem;
}

.lightbox-photo img,
.lightbox-photo video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Collage opens at full screen height and pans sideways by drag */
.lightbox-pan {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.lightbox-pan img {
  height: 100%;
  width: auto;
  max-width: none;
}

.lightbox button {
  position: absolute;
  z-index: 1;
  border: 0;
  background: none;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}

/* Round dark button so it stays visible over the full-height collage */
.lightbox .close {
  top: 0.8rem;
  right: 0.8rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: #fff;
  background: rgba(10, 8, 6, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* Hidden while pinch-zoomed, so panning cannot hit them */
.lightbox.zoomed .prev,
.lightbox.zoomed .next {
  visibility: hidden;
}

.lightbox .prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 0; top: 50%; transform: translateY(-50%); }

/* —— Larger screens —— */
@media (min-width: 700px) {
  :root { --gutter: 4vw; }

  .hero-nav { font-size: 0.78rem; padding: 3rem 1.6rem 2.4rem; }

  .hero + .section { padding-top: 5.5rem; }

  .section-title { font-size: 1.8rem; }

  .article-nav,
  .article { max-width: calc(46rem + 2 * var(--gutter)); }
  .article { font-size: 1.1875rem; }
  .article h1 { font-size: 2rem; }
  .article h2 { font-size: 1.7rem; }
  .article h3 { font-size: 1.45rem; }

  .item { flex-basis: calc(var(--r) * 12rem); }

  /* Desktop: back to justified rows */
  .gallery-grid { display: flex; }
  .gallery-grid::after { content: ""; }
  .gallery-grid .item { aspect-ratio: auto; }
  .gallery-grid .item img { height: auto; }
}