/* ==========================================================================
   aamir-cosmic — colour only.

   This file re-points the theme's existing palette variables at the
   aamir-cosmic palette. It changes NOTHING about layout, type, spacing,
   templates or behaviour. Delete the one <link> in default.hbs and the
   site is exactly as it was.

   The theme defines its palette in two places, :root (light) and
   [data-theme=dark]. Both are set to the cosmic palette here, because
   aamir-cosmic is a dark language — so the theme's light mode becomes the
   same dark palette rather than an off-brand white.

   Rule from the design system that matters here: fills and inks are
   different. --c-theme is used for buttons and borders (a fill), so text
   placed ON it uses --c-button-text = #0d0524, never a light tint.
   ========================================================================== */

:root,
[data-theme="dark"],
[data-theme="light"] {
  /* accent — violet is the aamir-cosmic primary.
     --c-theme normally follows Ghost's accent colour setting; pinning it
     here keeps the palette correct whatever that setting says. */
  --ghost-accent-color: #a855f7;
  --c-theme: #a855f7;

  /* ground and ink */
  --c-body-bg:      #0d0524;   /* deep cosmic navy; never black, never grey */
  --c-text-main:    #f3edff;   /* warm white, never pure #fff */
  --c-text-light:   #9a92b8;   /* dimmest tone that still clears 4.5:1 */

  /* surfaces — violet-tinted neutrals, not grey */
  --c-gray-lighter: #1b1236;   /* card surface */
  --c-gray-light:   #241c3c;   /* raised surface */
  --c-border:       #362c52;
  --c-border-light: #241c3c;

  /* absolutes */
  --c-white:        #f3edff;
  --c-black:        #0d0524;
  --c-button-text:  #0d0524;   /* ink ON a violet fill */

  /* status */
  --c-success:      #34e0a1;
  --c-error:        #ffb38a;

  --c-shadow: 0 18px 48px rgba(6, 2, 16, 0.55);
}

/* Text selection, to match the accent rather than the browser default. */
::selection { background: color-mix(in srgb, #a855f7 40%, transparent); }

/* --------------------------------------------------------------------------
   The aamir-cosmic star field — the signature ground of scaling.nullroute.sh.
   Four 1px star layers that scroll over four fixed nebula washes, so the page
   appears to move through depth rather than over wallpaper.
   -------------------------------------------------------------------------- */
body {
  background-image:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.7px),
    radial-gradient(rgba(45,212,245,0.34) 1px, transparent 1.9px),
    radial-gradient(rgba(240,56,159,0.30) 1px, transparent 1.9px),
    radial-gradient(rgba(255,179,64,0.26) 1px, transparent 1.9px),
    radial-gradient(ellipse 900px 620px at 12% 4%,  rgba(91,124,250,0.16), transparent 70%),
    radial-gradient(ellipse 780px 560px at 88% 22%, rgba(240,56,159,0.13), transparent 70%),
    radial-gradient(ellipse 1000px 700px at 46% 62%, rgba(168,85,247,0.15), transparent 72%),
    radial-gradient(ellipse 640px 460px at 8% 88%,  rgba(45,212,245,0.10), transparent 70%);
  background-size:
    260px 210px, 330px 270px, 210px 240px, 420px 350px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: scroll, scroll, scroll, scroll, fixed, fixed, fixed, fixed;
}

/* ==========================================================================
   Part two: the colours the variables could not reach.

   screen.min.css carries 46 hardcoded colour literals that ignore the
   palette variables entirely. These are those, recoloured. Still colour
   only — no geometry, spacing, size or layout is touched here.
   ========================================================================== */

/* --- headings -------------------------------------------------------------
   The site fills headings with a cyan -> magenta -> violet gradient (added by
   hand after the minified CSS). That effect is kept exactly as it is; only the
   three stops move to the aamir-cosmic spectrum:
     #00f0ff -> --c-cyan    #2dd4f5
     #ff00cc -> --c-magenta #f0389f
     #8a00ff -> --c-violet  #a855f7
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  /* background-image, NOT the `background` shorthand: the shorthand resets
     background-clip to border-box, which kills the text fill and renders the
     heading as a solid coloured block with invisible text. */
  background-image: linear-gradient(90deg, #2dd4f5, #f0389f, #a855f7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Where the gradient does not apply, headings were hardcoded to the old
   orange accent (#BA4E0B). Violet at full strength fails as text, so these
   take the lifted ink variant. */
.h1, .h2, .h3, .h4, .h5, .h6 { color: #c9b6f5; }

/* --- inline code ----------------------------------------------------------
   Two competing rules, both hardcoded: a red (#E74C3C) and an !important
   purple on near-black (#c792ea on #0a0a0a). The purple already suits the
   palette; the near-black ground becomes the cosmic card surface.
   -------------------------------------------------------------------------- */
code:not([class*="language-"]),
:not(pre) > code:not([class*="language-"]) {
  background-color: #1b1236 !important;
  color: #c9b6f5 !important;
}
:not(pre) > code { color: #c9b6f5; }

/* --- Ghost's injected accent ---------------------------------------------
   {{ghost_head}} is emitted AFTER this stylesheet, so it re-declares
   --ghost-accent-color with the value from Ghost admin (#ba4e0b, orange).
   --c-theme is pinned above so the theme is already correct, but anything
   reading the raw variable needs this.
   -------------------------------------------------------------------------- */
:root { --ghost-accent-color: #a855f7 !important; }

/* --- stragglers ----------------------------------------------------------- */
.post-content .kg-header-card.kg-style-light .kg-header-card-header { color: #f3edff; }
.post-content .kg-product-card-rating-active.kg-product-card-rating-star svg { color: #ffb340; }


/* ==========================================================================
   Typography — the three families used by scaling.nullroute.sh.
   Families only. No size, spacing, line-height or layout is changed.
   ========================================================================== */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --font-family: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body, .post-content, p, li, blockquote, figcaption, input, textarea, button, select {
  font-family: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Varela Round ships ONE weight (400). The theme asks headings for `bold`,
   which a browser can only satisfy by synthesising it — that thickens and
   distorts the letterforms. The design system is explicit: presence comes
   from size and tight tracking, never weight. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Varela Round", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

code, pre, kbd, samp, .mono,
code[class*="language-"], pre[class*="language-"] {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ==========================================================================
   Type scale — match scaling.nullroute.sh.

   The theme sets prose at 1.25rem (20px), dropping to 1.125rem (18px) at a
   breakpoint, with code at 1.125rem. aamir-cosmic uses --text-md 15px for
   page body and --text-base 13.5px for code and secondary text, which is
   what the course site renders at.

   SIZES ONLY. No width, spacing, margin or layout is touched — the measure
   and every other rule stay exactly as the theme defines them.
   ========================================================================== */

.post-content,
.custom-page-post-content {
  font-size: 15px;          /* --text-md */
  line-height: 1.68;        /* --leading-body */
}

/* Code must come down with it, or it ends up larger than the prose.
   Inline code is relative so it tracks the body; blocks are pinned to
   --text-base with the tighter leading the system specifies for them. */
.post-content :not(pre) > code,
.post-content code:not([class*="language-"]) {
  font-size: 0.88em;
}
.post-content pre[class*="language-"],
.post-content code[class*="language-"],
.post-content pre,
.post-content pre code {
  font-size: 13.5px;        /* --text-base */
  line-height: 1.5;         /* --leading-snug */
}

/* The standfirst sits above the prose at 1.5rem/1.25rem; scale it so it
   still reads as a lead-in rather than towering over the body. */
.single-post .custom-excerpt {
  font-size: 17px;          /* --text-lg */
  line-height: 1.45;
}

/* ==========================================================================
   Block rhythm.

   The theme puts `margin-bottom: 4rem` (64px) on every top-level child of
   .post-content, and 4-5rem on top of every heading. At 20px text that was
   merely airy; at 15px it reads as disconnected — a paragraph gap four times
   the line height.

   aamir-cosmic's spacing scale tops out at --space-8 (40px), with --space-5
   (20px) as the normal gap between related blocks. These use that scale.
   Vertical rhythm only — nothing horizontal, no widths, no font sizes.
   ========================================================================== */

.post-content > * {
  margin-bottom: 1.25rem;      /* 20px — was 4rem/64px */
}

/* Headings keep more air above than a paragraph gap, so sections still read
   as sections — but proportionate to the new rhythm rather than 4x it. */
.post-content > h1 { margin-top: 2.5rem; }    /* was 5rem   */
.post-content > h2 { margin-top: 2.25rem; }   /* was 4.5rem */
.post-content > h3 { margin-top: 2rem; }      /* was 4rem   */
.post-content > h4 { margin-top: 1.75rem; }   /* was 3.5rem */
.post-content > h5 { margin-top: 1.5rem; }    /* was 2.5rem */
.post-content > h6 { margin-top: 1.5rem; }    /* was 2rem   */

.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 {
  margin-bottom: 0.6rem;       /* was 1rem — pull the heading to its text */
}

.post-content > *:last-child { margin-bottom: 0; }
.post-content li { margin-bottom: 4px; }      /* was 8px */

/* ==========================================================================
   Feature image — banner, not billboard.

   The theme renders it `width:100%; height:auto`, so a 1536x1024 source at
   full container width comes out ~1200px tall and pushes the article off
   the first screen entirely.

   Now a fixed-height letterbox: full width as before, capped vertically,
   cropped from the centre with object-fit. Scales with the viewport via
   clamp so it stays proportionate on a phone.
   ========================================================================== */

.single-post .featured-image-wrap .featured-image,
.featured-image-wrap .featured-image {
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-md, 16px);
}

/* The wrap had 4rem above it, which is out of step with the tightened
   rhythm now that the image is a band rather than a billboard. */
.single-post .featured-image-wrap {
  margin: 2rem 0 0;
}

/* --------------------------------------------------------------------------
   ONE RATIO EVERYWHERE, so a single image serves both places.

   The post banner and the homepage cards previously cropped completely
   differently: the banner was wide landscape, the cards `padding-bottom: 80%`
   — a 4:5 PORTRAIT. The same file therefore showed two unrelated crops.

   Both now use --banner-ratio. Change it in one place and both follow.

   7 / 2 = 3.5:1. The post banner maxes out in a 1200px column, so it lands
   at ~343px tall. Author source images at 1400x400 or 2100x600.
   -------------------------------------------------------------------------- */
:root { --banner-ratio: 7 / 2; }

/* Cards use the legacy padding-bottom technique with an absolutely
   positioned image, so the ratio is expressed as a percentage: 2/7 = 28.57%. */
.post-card .post-img-wrap,
.related-posts-wrap .post-card .post-img-wrap,
.featured-post-layout-one .post-card .post-img-wrap,
.featured-post-layout-two .post-small .post-img-wrap {
  padding-bottom: 28.57%;
}

/* ==========================================================================
   Footer removed in default.hbs — its sizing rules went with it.
   partials/footer.hbs is untouched if it is ever wanted back.
   ========================================================================== */

/* The header leaves 10rem above the content on this nav mode, which reads as
   the same problem at the other end of the page. */
[data-nav="sticky-hide"]:not(.no-header-footer) .site-wrap,
[data-nav="sticky"]:not(.no-header-footer) .site-wrap {
  margin-top: 5rem;            /* was 10rem */
}

/* --------------------------------------------------------------------------
   BREATHING ROOM AT THE BOTTOM OF A PAGE.

   With the footer gone, the last paragraph of a page sat flush against the
   bottom of the document — the text simply stopped. The header already
   leaves 5rem above the content (rule above); this mirrors it below, so a
   page is framed by the same amount of space at both ends.

   Scoped to `.page-template` (Ghost's body class for a static page, e.g.
   /about/) so post and index layouts are untouched.
   -------------------------------------------------------------------------- */
body.page-template .site-wrap {
  padding-bottom: 5rem;        /* 80px — the footer used to provide this */
}

/* --------------------------------------------------------------------------
   JUSTIFIED PROSE — /about/ ONLY.

   Scoped to `page-about`, the body class Ghost derives from the page slug,
   so no other page, post or index is touched. Paragraphs only: headings,
   lists and code blocks keep their own alignment (the page is 29 <p> and
   nothing else today, but the scope matters if that changes).

   NO HYPHENATION — deliberate, and do not "fix" it by adding `hyphens: auto`.
   That was tried and rejected: it broke words across lines (begin-ning), which
   the owner dislikes more than uneven word gaps. The cost of leaving it off is
   that the browser can only stretch the spaces to fill a line, so gaps vary
   more from line to line. That trade was made with eyes open.

   The last line of each paragraph stays ragged — `text-align-last` defaults
   to `start`, which is what you want; do not set it to `justify`.
   -------------------------------------------------------------------------- */
body.page-about .post-content p {
  text-align: justify;
  hyphens: none;               /* never break a word across lines */
}

/* --------------------------------------------------------------------------
   LOGO SIZE.

   The vendor sets --logo-header-height: 40px, sized for the old wordmark,
   whose ink filled only 74.6% of its canvas and so drew at ~30px. The new
   logo is trimmed to its ink (95.6% fill), so at 40px it drew ~38px tall —
   visibly bigger than what it replaced. 34px brings it back down.
   -------------------------------------------------------------------------- */
:root {
  --logo-header-height: 34px;   /* was 40px */
}

/* --------------------------------------------------------------------------
   GAP BETWEEN THE INTRO QUOTE AND THE FIRST POSTS ROW.

   `.home-cover-area` (the quote) carried `margin-bottom: 6rem` — 96px of air
   before `.featured-posts`. Nothing else sits between them: `.featured-posts`
   has only a margin-BELOW it, so this one value is the whole gap.

   MUST STAY INSIDE A MIN-WIDTH QUERY. The theme already narrows this to 2rem
   under `@media (max-width: 767px)`, and that rule is only (0,1,0) — an
   unconditional override here would load later and win against it, quietly
   making the gap BIGGER on phones than it was. Scoping to min-width 768px
   leaves the mobile value alone.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-cover-area {
    /* Above the quote. The header contributes 5rem of its own via the
       .site-wrap rule further up, so the quote sits 8rem below the top. This
       is the homepage-only half of it — posts and pages keep their spacing. */
    margin-top: 3rem;          /* was 2rem */
    margin-bottom: 0;          /* 6rem -> 4 -> 2.5 -> 1.5 -> 1 -> 0.5 -> 0 */
  }

  /* The rest of the gap was never in the margin above. The quote is an <h1>,
     and the vendor sheet gives every h1 `margin-bottom: 1rem` — so 16px sat
     under the text no matter what .home-cover-area did. Scoped to
     .intro-title so ordinary h1s in posts keep their spacing. */
  .intro-title {
    margin-bottom: 0.5rem;     /* was 1rem */
  }
}

/* --------------------------------------------------------------------------
   HOMEPAGE POST CARD TITLES.

   The cards use `<h2 class="h3 post-title">`, so their size comes from the
   shared `.h3` rule — which also sizes every h3 in post content. Changing
   `.h3` itself would shrink article headings too, so this is scoped to
   `.home-template .post-card .post-title`.

   THE RESPONSIVE LADDER MUST BE SCALED, NOT FLATTENED. The vendor steps .h3
   down at two breakpoints (2rem → 1.75 → 1.5). This selector is (0,3,0) and
   beats all of them, so a single unconditional value would override the
   narrow-screen sizes too and leave titles LARGER on phones than they were.
   Each step is reduced by the same 0.8 ratio instead.

   Homepage only, as asked. The same card appears in related-posts under an
   article and on archive pages; those keep the original size. To make it
   consistent everywhere, drop the `.home-template` from these selectors.
   -------------------------------------------------------------------------- */
.home-template .post-card .post-title {
  font-size: 1.6rem;           /* was 2rem */
}

@media (max-width: 991px) {
  .home-template .post-card .post-title {
    font-size: 1.4rem;         /* was 1.75rem */
  }
}

@media (max-width: 767px) {
  .home-template .post-card .post-title {
    font-size: 1.2rem;         /* was 1.5rem */
  }
}

/* --------------------------------------------------------------------------
   HOMEPAGE CARD EXCERPTS — matched to the in-post body size.

   `.post-card .post-excerpt` sets no font-size at all, so it was inheriting
   the root 16px while article prose sits at 15px. Both values are set here so
   they track together: change one, change the other.

   The line-height comes with it. Matching size but leaving the leading at the
   theme's default would make the card text the same size as the prose yet a
   different rhythm, which reads as sloppier than leaving it alone.

   The excerpt is clamped to 3 lines (`-webkit-line-clamp: 3`), so a smaller
   size means slightly MORE text fits before the ellipsis, not less.
   -------------------------------------------------------------------------- */
.home-template .post-card .post-excerpt {
  font-size: 15px;             /* --text-md, same as .post-content */
  line-height: 1.68;           /* --leading-body */
}

/* --------------------------------------------------------------------------
   BLOCKQUOTES — a quote, at body size.

   The theme styles blockquote as a display PULL-QUOTE: 1.75rem (28px) against
   15px body text, 4rem of left indent, weight 500, and a 6rem decorative
   quotation mark behind it. At that scale a one-line citation takes over the
   page.

   This keeps everything that makes it read as a quote — the panel, the radius,
   the indent, the mark — and only rescales it. Size and leading now match
   `.post-content`, so a quote reads as the same text, set apart, rather than
   as a headline.

   Padding and the decorative mark are scaled by the same ratio as the type
   (28px -> 15px). Dropping the font size alone would leave the old 2rem/4rem
   padding wrapped around half as much text, which reads as a box with a hole
   in it.
   -------------------------------------------------------------------------- */
.post-content blockquote,
.custom-page-post-content blockquote {
  font-size: 15px;             /* --text-md, same as the prose */
  line-height: 1.68;           /* --leading-body */
  font-weight: 400;            /* was 500 — same weight as body too */
  padding: 1.1rem 1.4rem 1.1rem 2.6rem;
  margin: 1.75rem 0;
}

.post-content blockquote::before,
.custom-page-post-content blockquote::before {
  font-size: 3.25rem;          /* was 6rem */
  left: 8px;
  top: 2px;
}

.post-content blockquote p:last-child,
.custom-page-post-content blockquote p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   THE HEADER ICON SLOT, NOW THAT IT IS EMPTY.

   `.nav-wrap .icons-wrap` is a FIXED-WIDTH flex item — `width: 148px`, sized
   for two icons at 50% each. With both the theme toggle and the search icon
   switched off it holds nothing, but it still reserved 148px of dead space
   and pushed the nav across.

   `:empty` cannot be used: the element contains whitespace between its tags,
   which counts as a text node, so it never matches. Collapsing the width is
   the reliable fix, and `width: auto` means the slot grows again on its own
   if either icon is ever switched back on.
   -------------------------------------------------------------------------- */
.nav-wrap .icons-wrap {
  width: auto;                 /* was a fixed 148px */
  margin-left: 0;              /* was 16px, spacing for icons that are gone */
}