/* ===========================================================================
   blog.eternal.uz  —  standalone stylesheet
   ---------------------------------------------------------------------------
   TEMPORARY. This whole site is one folder and is meant to be deleted; see
   blog/README.md. Nothing here is imported by any other service and nothing
   here imports from one. The tokens below are COPIES of the root site's, not
   references to them, precisely so that deleting this folder cannot break
   eternal.uz and editing eternal.uz cannot break this.
   ========================================================================= */

:root {
  --gold:          #a78247;
  --gold-lite:     moccasin;
  --gold-dim:      rgba(167, 130, 71, 0.28);
  --gold-surface:  rgba(167, 130, 71, 0.14);
  --gold-border:   rgba(167, 130, 71, 0.35);
  --surface:       rgba(0, 0, 0, 0.58);
  --text:          #fff;
  --text-dim:      rgba(255, 255, 255, 0.55);
  --text-faint:    rgba(255, 255, 255, 0.28);
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --accent:        var(--gold);
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #201f1f;
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Background ────────────────────────────────────────────────────────────
   Rays drifting down the page, as on the main site. Twenty-four of them, not
   ninety-two: this page has to hold up on a phone and nobody counts them. */

.rays {
  position: fixed;
  inset: -20vh -10vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rays i {
  position: absolute;
  top: -30vh;
  width: 1px;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, rgba(167, 130, 71, 0.5), transparent);
  transform: rotate(14deg);
  animation: ray-fall linear infinite;
  opacity: 0.4;
}

@keyframes ray-fall {
  to { transform: rotate(14deg) translateY(150vh); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .rays i { animation: none; }
}

/* ── Page frame ───────────────────────────────────────────────────────── */

#page {
  position: relative;
  z-index: 10;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.5vh 1.7rem 8vh;
}

/* ── Header ───────────────────────────────────────────────────────────────
   The same bar Thoughts and Social carry: avatar, name, one line of
   description, and a panel of figures on the right. */

.page-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5vh 2.5vh;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--gold-border);
  border-radius: 1.4rem;
  margin: 0 0 2.4vh;
  box-shadow: 0 1.9vh 4vh rgba(0, 0, 0, 0.65);
}

.page-avatar-wrap {
  width: 9vh;
  height: 9vh;
  min-width: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--gold-border);
  flex-shrink: 0;
  overflow: hidden;
  background: #cccccc;
}

.page-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}

.page-header-info { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }

.page-header-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  margin: 0;
  /* room for descenders — a line box exactly 1em tall with overflow hidden
     slices them off, and this line ends in a g often enough to matter */
  line-height: 1.45;
}

.page-header-handle {
  font-size: 0.75rem;
  color: var(--gold-lite);
  letter-spacing: 0.06em;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.45;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* Same reveal the main site uses: a line too long for the bar fades out at
   the edge rather than ending in an ellipsis, and pressing the header slides
   it far enough left to read the end. The distance is measured in blog.js. */
.page-header-handle[data-clipped="true"] {
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}

.page-header-handle[data-clipped="true"][data-revealed="true"] {
  -webkit-mask-image: none;
  mask-image: none;
}

/* The distance is set from blog.js, not read out of a variable here: it is
   measured there, and having one owner for it means there is no way for the
   two to disagree. CSS owns only the easing, which differs by direction —
   slow enough to read on the way out, quick on the way back so a second
   press reads as an undo. */
.page-header-handle-inner {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.5s var(--ease);
}

.page-header-handle[data-revealed="true"] .page-header-handle-inner {
  transition: transform 1.4s var(--ease);
}

.page-header:has(.page-header-handle[data-clipped="true"]) {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.page-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(4.6rem, 1fr));
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--gold-dim);
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

.page-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.9rem;
}

.page-stat + .page-stat { border-left: 1px solid var(--gold-dim); }
.stat-num { font-size: 1rem; font-weight: 700; color: var(--text); }
.stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Card grid ────────────────────────────────────────────────────────── */

.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.7rem;
}

.card {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 2.25rem;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--gold-border);
  box-shadow: 0 1.6vh 3.4vh rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: transform 0.4s var(--ease), box-shadow 0.9s var(--ease);
  /* the entrance, staggered per card by --i (set in blog.js) */
  animation: card-rise 0.6s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0) * 70ms, 560ms) + 100ms);
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(2.6vh) scale(0.96); }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-0.6vh);
    box-shadow: 0 2.6vh 5vh rgba(0, 0, 0, 0.62);
  }
}

.card.orange { --accent: #d9a648; }
.card.blue   { --accent: #5b8ac9; }
.card.red    { --accent: #bd5a41; }
.card.green  { --accent: #2ea88e; }

/* The themed wash. This is what a Thoughts card looks like: the accent
   pooling in one corner rather than tinting the whole surface. */
.card-sheet {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 100% 0%,
      color-mix(in srgb, var(--accent) 34%, transparent) 0%,
      transparent 62%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.05) 0%, transparent 55%);
}

/* The photograph case — a Social card. Present only when the post has an
   image; the caption gradient keeps the title readable over any photo. */
.card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card.has-photo .card-sheet {
  background: linear-gradient(to top,
    rgba(4, 5, 9, 0.9) 0%, rgba(4, 5, 9, 0.44) 45%, rgba(4, 5, 9, 0.62) 100%);
}

/* The scrim alone cannot be trusted: it is a fixed ramp and the photograph
   under it is not. A bright sky behind the middle of the card washes the
   title out, and darkening the scrim enough to cover that case would murk
   every other photograph. The shadow travels with the text instead. */
.card.has-photo .card-body h3,
.card.has-photo .card-body p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.card-header,
.card-footer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header {
  top: 0;
  padding: 1.4em 1.2em 1.2em 1.5em;
  background: linear-gradient(to bottom, rgba(4, 5, 9, 0.28), rgba(4, 5, 9, 0.04));
  border-bottom: 1px solid rgba(167, 130, 71, 0.18);
}

.card-footer {
  bottom: 0;
  padding: 0.8em 1.25em 0.8em 1.5em;
  background: linear-gradient(to top, rgba(4, 5, 9, 0.28), rgba(4, 5, 9, 0.04));
  border-top: 1px solid rgba(167, 130, 71, 0.18);
}

.card-when {
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}

.card-no {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-lite);
  border: 1px solid var(--gold-dim);
  border-radius: 2em;
  padding: 0.15em 0.7em;
  background: rgba(0, 0, 0, 0.5);
}

.card-body {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0.7em 1.5em;
}

.card-body h3 {
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 600;
  margin: 0 0 0.2em;
  line-height: 1.3;
}

.card-body p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}

.card-tag {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 2em;
  padding: 0.5rem 1.2rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  color: color-mix(in srgb, var(--accent) 58%, #fff);
}

.card-views,
.reader-views {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.card-views .eye,
.reader-views .eye { color: var(--gold-lite); opacity: 0.85; }

/* Over a photograph the footer scrim is thinner than the card's own surface,
   so the count needs the same shadow the title gets. */
.card.has-photo .card-views { color: rgba(255, 255, 255, 0.8); }
.card.has-photo .card-views,
.card.has-photo .card-when { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

.reader-views {
  margin-left: 0.9rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(167, 130, 71, 0.25);
}

/* The pictures, after the writing. Full width and stacked: a phone is the
   likeliest place this is read, and anything cleverer than one column just
   makes each photograph smaller. */
.reader-figs {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.reader-figs img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.9rem;
  border: 1px solid rgba(167, 130, 71, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

/* Logos and diagrams: shown whole on a light ground, because dark line art on
   a dark page is a smudge, and cropping a diagram loses the half that
   explained it. */
.reader-figs.is-contain img {
  object-fit: contain;
  padding: 1.2rem;
  background: #f4f2ee;
  max-height: 60vh;
}

/* ── Reader ───────────────────────────────────────────────────────────── */

.reader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 4vh 1.2rem;
}

.reader[hidden] { display: none; }

.reader-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.3s var(--ease);
}

@keyframes fade-in { from { opacity: 0; } }

.reader-card {
  position: relative;
  width: min(680px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 1.8rem;
  overflow: hidden;
  background: #16161a;
  border: 1px solid var(--gold-border);
  box-shadow: 0 3vh 7vh rgba(0, 0, 0, 0.7);
  animation: reader-in 0.4s var(--ease);
}

@keyframes reader-in {
  from { opacity: 0; transform: translateY(2.4vh) scale(0.97); }
}

.reader-head,
.reader-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
}

.reader-head { border-bottom: 1px solid rgba(167, 130, 71, 0.18); }
.reader-foot { border-top: 1px solid rgba(167, 130, 71, 0.18); }

.reader-when {
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

.reader-close,
.reader-nav {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold-lite);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--gold-dim);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.reader-close:hover,
.reader-nav:hover { background: var(--gold-surface); border-color: var(--gold-border); }
.reader-nav[disabled] { opacity: 0.3; cursor: default; }

.reader-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold-lite);
}

.reader-body {
  overflow-y: auto;
  padding: 2rem 2rem 2.4rem;
  scrollbar-width: thin;
}

.reader-body h2 {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.reader-sub {
  margin: 0 0 1.6rem;
  color: var(--gold-lite);
  opacity: 0.8;
  font-size: 0.9rem;
}

.reader-body p {
  margin: 0 0 1.1rem;
  line-height: 1.85;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.86);
}

.reader-photo-note {
  margin-top: 1.8rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--gold-dim);
  border-radius: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.page-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4vh;
  padding-top: 2vh;
  border-top: 1px solid rgba(167, 130, 71, 0.14);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.page-foot a { color: var(--gold-lite); text-decoration: none; opacity: 0.8; }
.page-foot a:hover { opacity: 1; }

/* ── Phones ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  #page { padding: 2vh 1rem 6vh; }

  .page-header {
    flex-wrap: wrap;
    gap: 0.85rem 0.95rem;
    padding: 0.9rem 1.15rem;
  }

  .page-avatar-wrap { width: 3.5rem; height: 3.5rem; }

  .page-stats {
    margin-left: 0;
    width: 100%;
    padding: 0.55rem 0.4rem;
  }

  .card { width: 100%; max-width: 420px; }

  .reader { padding: 0; }
  .reader-card { max-height: 100vh; height: 100%; border-radius: 0; border: none; }
  .reader-body { padding: 1.5rem 1.3rem 2rem; }
  .reader-body h2 { font-size: 1.35rem; }
}