/* ==========================================================================
   Shrivar's Blog — hand-written, tokenized stylesheet.
   Thesis: an atmospheric personal journal. Night giving way to dawn —
   the starry-tree hero, a near-black sky, warm light. Read, not operated.
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------- */

:root {
  /* canvas — a deep midnight blue drawn from the hero's night hemisphere,
     lifted well off pure black so the contrast reads calm, not harsh */
  --canvas:      #171e2a;
  --canvas-2:    #1e2634;   /* faintly raised surfaces (inline code, kbd) */
  --veil:        rgba(0,0,0,.45);

  /* ink — warm cream from the dawn side, softened a touch so it sits gently on
     the lighter canvas rather than glaring against it */
  --ink:         #e6ddce;   /* primary prose */
  --ink-soft:    #c4bcae;   /* secondary */
  --ink-faint:   #8b8a86;   /* dates, captions — the quiet tier */

  /* light — the warm dawn accent, and the cool starlight for night motifs */
  --dawn:        #e9b483;   /* primary accent: links, emphasis, hover glow */
  --dawn-strong: #f3c9a0;
  --star:        #a9c2de;   /* cool starlight — constellation dots, rare */
  --meta-cool:   #7f8fa8;   /* muted cool tier for dates/metadata — the
                               complement to the warm dawn accent; echoes the
                               hero's night side the way links echo its dawn */

  --hairline:        rgba(236, 228, 214, .08);
  --hairline-strong: rgba(236, 228, 214, .15);

  --shadow-1: 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 10px 40px rgba(0,0,0,.5);
  --ring: 0 0 0 3px rgba(233, 180, 131, .30);

  --fast: 160ms; --med: 320ms; --ease: cubic-bezier(.33, .68, .3, 1);

  --measure: 66ch;
  --gutter: 20px;
  --content-max: calc(var(--measure) + var(--gutter) * 2);  /* the reading column width */

  color-scheme: dark;
}

/* ---- Fonts ------------------------------------------------------------ */

/* Body: M PLUS Rounded 1c — warm, personal, easy on long reading. */
@font-face {
  font-family: "M PLUS Rounded 1c"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/fonts/m-plus-rounded-1c-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "M PLUS Rounded 1c"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/fonts/m-plus-rounded-1c-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "M PLUS Rounded 1c"; font-style: normal; font-weight: 600 800;
  font-display: swap;
  src: url("/fonts/m-plus-rounded-1c-latin-700-normal.woff2") format("woff2");
}

/* Display: Fraunces — an expressive old-style serif with soul, for titles
   and headings. Carries the emotional, literary register. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url("/fonts/fraunces-latin-400-italic.woff2") format("woff2");
}

:root {
  --font-body: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* ---- Reset / base ------------------------------------------------------ */

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

html { background: var(--canvas); }

body {
  margin: 0;
  color: var(--ink);
  /* Two-tone ambient glow (warm dawn right, cool starlight left) drawn from the
     hero. Smooth, so it sits fine behind text. The starfield lives in a
     separate gutter-only layer (body::before) so it never distracts under the
     prose — see below. */
  background-color: var(--canvas);
  background-image:
    radial-gradient(1200px 760px at 80% -4%, rgba(233, 180, 131, .11), transparent 60%),
    radial-gradient(1000px 680px at 8% 2%, rgba(122, 152, 205, .08), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Starfield — fills the empty gutters only, never behind the reading column.
   Fixed (holds still while the text scrolls past), sits behind all content,
   and is masked transparent across the content column (plus a soft fade at the
   boundary) so no star ever sits under the prose. On narrow screens the mask
   collapses to fully transparent, so mobile — where there are no gutters — gets
   no stars at all. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='40' cy='66' r='1' fill='%23c9d6ea' opacity='.5'/%3E%3Ccircle cx='120' cy='30' r='.8' fill='%23c9d6ea' opacity='.36'/%3E%3Ccircle cx='200' cy='100' r='1.1' fill='%23c9d6ea' opacity='.55'/%3E%3Ccircle cx='300' cy='52' r='.7' fill='%23ead9c0' opacity='.34'/%3E%3Ccircle cx='360' cy='150' r='.9' fill='%23c9d6ea' opacity='.44'/%3E%3Ccircle cx='80' cy='180' r='.8' fill='%23c9d6ea' opacity='.4'/%3E%3Ccircle cx='170' cy='240' r='.7' fill='%23c9d6ea' opacity='.34'/%3E%3Ccircle cx='280' cy='210' r='1' fill='%23c9d6ea' opacity='.5'/%3E%3Ccircle cx='60' cy='300' r='.9' fill='%23ead9c0' opacity='.42'/%3E%3Ccircle cx='150' cy='350' r='.8' fill='%23c9d6ea' opacity='.36'/%3E%3Ccircle cx='250' cy='320' r='1' fill='%23c9d6ea' opacity='.46'/%3E%3Ccircle cx='340' cy='290' r='.7' fill='%23c9d6ea' opacity='.34'/%3E%3C/svg%3E");
  background-size: 380px 380px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to right,
    #000, #000 calc(50% - var(--content-max) / 2 - 70px),
    transparent calc(50% - var(--content-max) / 2 - 12px),
    transparent calc(50% + var(--content-max) / 2 + 12px),
    #000 calc(50% + var(--content-max) / 2 + 70px), #000);
  mask-image: linear-gradient(to right,
    #000, #000 calc(50% - var(--content-max) / 2 - 70px),
    transparent calc(50% - var(--content-max) / 2 - 12px),
    transparent calc(50% + var(--content-max) / 2 + 12px),
    #000 calc(50% + var(--content-max) / 2 + 70px), #000);
}
@media (min-width: 480px) { body { font-size: 17px; } }

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

a { color: var(--dawn); text-decoration: none; }
a:hover { color: var(--dawn-strong); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: rgba(233, 180, 131, .26); color: var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: #2c3644; border-radius: 8px; border: 3px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: #384556; }
* { scrollbar-width: thin; scrollbar-color: #2c3644 var(--canvas); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

kbd {
  font-family: var(--font-body); font-weight: 500; font-size: .9em;
  background: var(--canvas-2); border: 1px solid var(--hairline-strong);
  border-radius: 6px; padding: .15em .5em;
}

/* ---- Type -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 1.8em 0 .55em;
}
h1 { font-size: 2.2em; font-weight: 500; margin-top: 0; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
h4, h5, h6 { font-size: 1.08em; }

p { margin: 0 0 1.2em; }

em { font-style: italic; }

/* pull-quote feel: a dawn-tinted edge that fades at both ends, not a hard bar */
blockquote {
  position: relative;
  margin: 1.9em 0;
  padding: .3em 0 .3em 1.6em;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.55;
}
blockquote::before {
  content: "";
  position: absolute; left: 0; top: 4%; bottom: 4%; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--dawn) 30%, var(--dawn) 70%, transparent);
  opacity: .75;
}
blockquote p:last-child { margin-bottom: 0; }

/* feathered divider: fades out toward both ends rather than a hard rule —
   used for hr, the nav separator, and index-entry boundaries alike */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(236,228,214,.16) 15%, rgba(236,228,214,.16) 85%, transparent);
  margin: 2.6em auto;
  width: 60%;
}

/* ---- Layout / measure --------------------------------------------------- */

.site { min-height: 100vh; display: flex; flex-direction: column; }

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { flex: 1; padding: 2.6rem 0 4rem; }

/* ---- Hero header (the starry tree) ------------------------------------- */

/* The image doesn't hard-stop: a gradient veil fades its lower half down to the
   canvas colour, and the title/tagline/nav ride on that faded portion. So the
   top of the scene reads clearly while the bottom becomes a translucent backdrop
   for the masthead, easing into the page instead of a razor cut. */
.site-header {
  position: relative;
  /* Anchored to the bottom so the crop shows the lower scene: a little sky
     above the crown, the crown, the horizon glow where grass meets sky, and the
     grass — not a big empty band of upper sky. */
  background-image: url("/img/starry-tree-bg.jpeg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
/* Veil starts low (below the horizon glow) so the glow stays visible, and only
   the grass foreground under the title/nav is darkened for legibility, easing
   into the canvas at the very bottom. */
.site-header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 68%,
    rgba(23, 30, 42, .18) 80%,
    rgba(23, 30, 42, .60) 92%,
    var(--canvas) 100%);
}

/* Uniform full-scene crop on every page (aspect ~3.1 → visible image range
   ~[48%, 100%]: crown + glow + grass). Same height everywhere, so the header is
   consistent; the tagline is the only home/inner difference. */
.site-header.is-home,
.site-header.is-inner { aspect-ratio: 3.1; min-height: 380px; max-height: 74vh; }

.hero-inner {
  position: relative;   /* above the veil */
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 1.4rem;
  padding-bottom: 1.3rem;
}

/* Title — uniform size across home and article pages. */
.site-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.site-title a { color: inherit; }
.site-title a:hover { color: inherit; text-decoration: none; }

/* the tagline, relocated from the header overlay to the top of the home page
   so the overlay stays title + nav (fitting over the grass, like article pages) */
.home-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 2.2rem;
}

/* nav — overlaid on the faded lower image; quiet until reached for */
.site-nav { margin-top: 1rem; }
.site-nav ul {
  list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap;
}
.site-nav a {
  display: inline-block;
  color: rgba(236, 228, 214, .82);
  font-weight: 500; font-size: .9rem;
  padding: .35em .85em; border-radius: 7px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.site-nav a:hover {
  color: #fff; background: rgba(255,255,255,.14); text-decoration: none;
}
.site-nav a.is-active {
  color: var(--canvas); background: var(--dawn); font-weight: 600; text-shadow: none;
}

/* ---- Index — unhurried journal entries (not tool rows) ----------------- */

.index-list { list-style: none; margin: 1rem 0 0; padding: 0; }

.index-list li + li {
  position: relative;
  margin-top: 2rem;
  padding-top: 2rem;
}
/* soft divider between entries: feathers out toward both ends */
.index-list li + li::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(236,228,214,.11) 15%, rgba(236,228,214,.11) 85%, transparent);
}

.index-entry { display: block; }
.index-entry:hover { text-decoration: none; }

.index-date {
  display: block;
  font-family: var(--font-body);
  font-weight: 500; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--meta-cool);
  margin-bottom: .4rem;
}

.index-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--fast) var(--ease);
}
.index-entry:hover .index-title { color: var(--dawn); }

.index-hook {
  margin: .55rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- Single post ------------------------------------------------------- */

.post-header { margin-bottom: 2.8rem; }   /* a chapter opening, not a cramped title */
.post-header h1 { margin-bottom: .4rem; }

.post-meta {
  color: var(--meta-cool);
  font-weight: 500; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}

.post-content { overflow-wrap: break-word; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li { margin-bottom: .4em; }

.post-content img, .about-portrait img {
  border-radius: 10px;
  box-shadow: var(--shadow-2);
}

.prose-figure { margin: 1.8em 0; }
.prose-figure figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .92em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: .7em;
}

/* floatRightImage shortcode */
.float-right-image {
  float: right; margin: .4rem 0 1.2rem 1.6rem; max-width: 42%;
}
@media (max-width: 560px) {
  .float-right-image { float: none; max-width: 100%; margin: 0 0 1.4rem; }
}

/* ---- Code: the night side of the page — technical matter reads cool,
   against the warm prose, echoing the hero's starlit hemisphere. ---------- */

code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .88em; }

:not(pre) > code {
  background: var(--canvas-2);
  border: 1px solid rgba(127, 143, 168, .22);
  border-radius: 5px; padding: .12em .4em;
  color: var(--ink);
}

pre {
  background: #10151f;
  border: 1px solid rgba(127, 143, 168, .28);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  overflow-x: auto; line-height: 1.55;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(127, 143, 168, .06);
}
pre code { background: none; border: none; padding: 0; font-size: .86em; }

/* ---- Callouts / tags --------------------------------------------------- */

.callout { border-radius: 10px; padding: .9rem 1.1rem; margin: 1.5em 0; border: 1px solid transparent; }
.callout-info    { background: rgba(169,194,222,.08); border-color: rgba(169,194,222,.3); }
.callout-tip     { background: rgba(166,199,138,.08); border-color: rgba(166,199,138,.3); }
.callout-caution { background: rgba(233,180,131,.08); border-color: rgba(233,180,131,.3); }
.callout-danger  { background: rgba(191,97,106,.08);  border-color: rgba(191,97,106,.3); }

/* tags are metadata, like dates — cool tier, not the warm link/emphasis accent */
.tag {
  display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: .78rem;
  padding: .2em .7em; border-radius: 100px;
  background: rgba(127,143,168,.16); border: 1px solid rgba(127,143,168,.36);
  color: var(--star);
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
  position: relative;
  padding: 2.2rem 0 3rem;
  color: var(--ink-faint);
  font-weight: 500; font-size: .82rem;
  margin-top: 3rem;
}
/* same feathered-divider language as the nav separator and hr */
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(236,228,214,.13) 22%, rgba(236,228,214,.13) 78%, transparent);
}
.site-footer .wrap { display: flex; align-items: center; gap: 1.1rem; }
.site-footer .footer-mark { display: inline-flex; align-items: center; gap: .6rem; }
.site-footer svg { opacity: .7; flex-shrink: 0; }
.site-footer a {
  color: var(--ink-faint);
  display: inline-flex; align-items: center;
  transition: color var(--fast) var(--ease);
}
.site-footer a:hover { color: var(--dawn); text-decoration: none; }