/* ============================================================================
   YourCite site stylesheet — the ONE source of truth for standalone pages.
   /assets/site.css

   Why this file exists (2026-09-29). Varoon: "is the basic rule of any website we start
   working at the theme? The fonts everything has to match. Everything has to look if it
   looks different. It just shows that it's AI slop". He was right. Every standalone page
   (about, blog posts, service pages) carried its own inline <style>, so each one drifted:
   15 pages ended up on a Georgia serif while the app used Inter, and after that was
   "fixed" they rendered Arial because no page ever LOADED Inter.

   A per-page <style> cannot be kept consistent. This file can. Every standalone page now
   links it and keeps only page-specific rules, if any.

   THE TOKENS BELOW ARE COPIED FROM THE APP (src/index.css) so the two cannot disagree.
   If the app's tokens change, change them here in the same commit, and
   scripts/theme_consistency_gate.py will fail the build if you forget.

   DESIGN BASIS, not taste (researched, see BRAND.md for the sources):
     * measure 60-75 characters. The long-standing typographic finding for body copy.
     * sans-serif body, 17-18px on desktop, 16px floor on mobile. Two thirds of surveyed
       sites use sans for body; our app uses Inter throughout, so headings match.
     * line-height 1.7 for body copy at this measure, ~1.15-1.25 for headings.
     * paragraph spacing roughly a full line so the eye can find the break.
     * hierarchy visible in 3 seconds: one H1, clear H2 banding, generous space above an H2.
   ============================================================================ */


/* ============================================================ Newsreader (display)
   Varoon picked option A, 2026-09-29: "a looks good".
   Newsreader is the closest free relative of the display serif on the reference site
   (madebynf) which pairs a LIGHT display serif with a humanist sans. That pairing is the
   mechanism: the luxury reads from the CONTRAST between a light serif headline and a clean
   sans body, which is why one font for everything could not produce it.

   SELF-HOSTED, not loaded from Google at runtime: two woff2 files, 272 KB, latin subset
   only (an English site does not need latin-ext, cyrillic, greek or vietnamese subsets -
   including them cost 450 KB). A variable font, so one file covers weights 200-700.
   font-display: swap so a slow font never blocks the headline. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-200_700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url('/assets/fonts/newsreader-200_700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter, exactly as the app loads it. Without this @import a page DECLARES Inter and
   renders Arial — which is the precise bug that shipped on 2026-09-29. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* surface + ink, copied from the app */
  --bg:            #0c0c0c;
  --panel:         #101013;
  --panel-raised:  #15151a;
  --line:          #1f1f24;
  --line-soft:     #26262b;
  --ink:           #e8e8ec;
  --ink-strong:    #ffffff;
  --ink-body:      #c9c9d0;
  --ink-muted:     #8a8a93;
  --ink-faint:     #6a6a72;
  --accent:        #9BDFBA;   /* mint — the app's primary accent */
  --accent-ink:    #0c0c0c;
  --accent-alt:    #00d2ff;   /* cyan */
  --warn:          #f59e0b;

  /* type scale. One scale for the whole site. */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* the display face: headings, numerals, quotes. Newsreader at a LIGHT weight is the
     whole effect - at 600 it looks like every other serif. */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --display-weight: 300;
  --fs-h1: clamp(30px, 5vw, 46px);
  --fs-h2: clamp(21px, 3vw, 27px);
  --fs-h3: 18px;
  --fs-body: 17px;
  --fs-small: 14.5px;
  --fs-meta: 13px;

  --measure: 68ch;        /* 60-75 characters, the readable band */
  --radius: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --gap: 24px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }


/* --------------------------------------------------------- background layer */
/* THE BUG THIS FIXES (2026-09-29, Varoon: "Still blogs are masked by something").
   Each standalone page carries the homepage's neon-tubes background as
   <div class="yc-tubes" style="position:fixed;inset:0;background:#0c0c0c">. It had NO
   z-index, and <main> had no z-index either, so the fixed opaque panel painted OVER the
   page text and the blog looked masked. On the homepage the React app layers this
   correctly; the static pages never did.
   The fix is explicit stacking, not a patch to one page: the background is pinned to the
   back, content is lifted above it. */
.yc-tubes { z-index: 0; }
main, header.nav, footer, .article-head, article { position: relative; z-index: 1; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* the same ambient field the app paints, so a standalone page does not look flat */
  background-image:
    radial-gradient(800px 500px at 20% -10%, rgba(0,210,255,0.07), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(11,37,81,0.30), transparent 65%),
    radial-gradient(700px 500px at 50% 120%, rgba(155,223,186,0.05), transparent 60%);
  background-attachment: fixed;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--accent); color: var(--accent-ink);
              padding: 10px 16px; border-radius: 8px; z-index: 99; }

/* ---------------------------------------------------------------- structure */
main { max-width: 820px; margin: 0 auto; padding: 44px 28px 24px; }

/* Varoon 2026-09-29: "headings have to be mint green". The homepage accents its headline
   in mint (#9BDFBA); article headings now carry that colour as their default, so the voice
   is continuous across the site rather than only on a phrase. */
/* Headings use the DISPLAY face (Newsreader) at a light weight; body copy stays Inter.
   Varoon picked this pairing 2026-09-29. The weight is the load-bearing part: a light serif
   reads as editorial, the same serif at 600 reads as a default. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  color: var(--accent);
}

/* H1 = the hero's voice, measured off the homepage's own hero on 2026-09-29:
     hero: 72px at md (md:text-7xl), line-height 0.95, letter-spacing -0.025em, weight 600
   An article is not a billboard, so the size steps down, but the TIGHT leading and the
   negative tracking are what make it read as the same hand. A loose 1.12 leading at 46px
   was the tell that it was a different build. */
h1 {
  font-size: clamp(34px, 6.2vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  margin: 0 0 12px;
  max-width: 18ch;              /* hero headlines break into 2-3 short lines, not one long */
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: var(--display-weight);
  margin: 2.1em 0 .6em;              /* generous space above: the hierarchy cue */
  padding-bottom: .4em;
  border-bottom: 1px solid rgba(155,223,186,0.18);   /* a hint of the heading's own colour */
}

/* h3 is a small section/component label, not an editorial headline. A light serif at
   18px or below reads weak and costs legibility, so h3 stays in the UI sans at semibold.
   The display face is for h1/h2 and the numerals and quotes, where its character shows. */
h3 {
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 1.6em 0 .5em;
  color: var(--ink-strong);
}

p { margin: 1.05rem 0; color: var(--ink-body); max-width: var(--measure); }

ul, ol { color: var(--ink-body); max-width: var(--measure); padding-left: 22px; }
li { margin: .45rem 0; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: #b8e8cd; }

strong { color: var(--ink-strong); font-weight: 600; }

.byline { color: var(--ink-faint); font-size: var(--fs-meta); margin-bottom: 22px; }
.note { color: var(--ink-muted); font-size: var(--fs-meta); max-width: var(--measure); }
.lede { font-size: 19px; line-height: 1.65; color: var(--ink); }

blockquote {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 20px;
  border-left: 3px solid var(--accent);
  margin: 1.4rem 0;
  padding: 12px 0 12px 18px;
  color: var(--ink);
  background: rgba(155,223,186,0.04);
  border-radius: 0 8px 8px 0;
  max-width: var(--measure);
}
blockquote p { margin: .35rem 0; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }


/* ------------------------------------------------------------ hero treatment */
/* The homepage hero's voice, brought to article pages. Measured off the live hero:
   72px, leading 0.95, tracking -0.025em, weight 600, with ONE phrase picked out in mint
   (#9BDFBA) rather than an all-colour gradient. The blog index was already using
   <span class="accent"> with NO RULE behind it, so the phrase rendered plain white and the
   treatment did nothing. That is a class that looks applied and is not. */
h1 .accent, .accent { color: var(--accent); }

/* the hero's eyebrow: small, quiet, uppercase, mint. Sits above the headline. */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}

/* the article header block: the hero's spacing rhythm around the headline */
.article-head { margin: 8px 0 30px; }
.article-head p.lede { margin-top: 14px; }


/* ------------------------------------------------------------------- logo */
/* The homepage's Logo + ArrowMark, as static classes. Measured off the app's own
   primitives (src/components/primitives.tsx) so the two cannot drift:
     word  : text-xl, semibold, tracking -0.03em, white
     arrow : h-3.5 w-3.5, mint #9BDFBA, aligned to the top of the word
   BEFORE THIS (2026-09-29) the site had FOUR marks: the homepage's text+SVG, a "↗"
   character on the service pages and the trust shell, and a bitmap (a JPEG named .png)
   in the blog header AND footer. Same brand, four renderings. */
.brand-logo { display: inline-flex; align-items: flex-start; gap: 6px; }
.brand-word {
  font-family: var(--font);
  font-size: 20px; font-weight: 600; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink-strong);
}
.brand-arrow { width: 14px; height: 14px; margin-top: 2px; color: var(--accent); flex: 0 0 14px; }
.brand:hover .brand-word { color: var(--accent); }
.brand { text-decoration: none; }

@media (max-width: 640px) {
  .brand-word { font-size: 18px; }
  .brand-arrow { width: 13px; height: 13px; }
}

/* --------------------------------------------------------------- components */
/* the app's panel surface, as a class a static page can reuse */
.glass, .card, .cta-box {
  background: rgba(16,16,19,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin: 1.6rem 0; }

.card { padding: 20px; }
.card h3 { margin-top: 0; }
.card p { font-size: var(--fs-small); margin: .5rem 0; color: var(--ink-body); }
.card .tag, .tag {
  font-size: 12px; font-weight: 500; color: var(--accent);
  background: rgba(155,223,186,0.14); border-radius: var(--radius-pill);
  padding: 3px 10px; display: inline-block; margin-bottom: 8px;
}

.callout {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(155,223,186,0.05);
  padding: 16px 18px; margin: 1.6rem 0; max-width: var(--measure);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* table of contents: long articles need one (2026 layout guidance) */
.toc {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: rgba(16,16,19,0.5); padding: 18px 22px; margin: 2rem 0;
  max-width: var(--measure);
}
.toc p { font-size: var(--fs-meta); color: var(--ink-muted); margin: 0 0 10px;
         text-transform: none; letter-spacing: 0; font-weight: 600; }
.toc ol { margin: 0; padding-left: 20px; font-size: var(--fs-small); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: var(--fs-small); }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-strong); font-weight: 600; background: rgba(255,255,255,0.03); }
td { color: var(--ink-body); }

/* author block: an article reached from search must establish who wrote it */
.author {
  display: flex; gap: 12px; align-items: flex-start;
  border-top: 1px solid var(--line); margin-top: 2.4rem; padding-top: 18px;
  max-width: var(--measure);
}
.author .who { font-size: var(--fs-small); color: var(--ink-body); }
.author .who strong { color: var(--ink-strong); display: block; }
.author p { margin: .3rem 0 0; font-size: var(--fs-meta); color: var(--ink-muted); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-alt));
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font-weight: 700; font-size: 15px;
}

.cta-box { margin: 3rem 0 1rem; padding: 34px 30px; text-align: center;
           background: linear-gradient(135deg, var(--panel-raised), #1a1a20); }
.cta-box h2 { border: none; margin: 0 0 12px; font-size: 24px; color: var(--ink-strong); }
.cta-box p { color: #a0a0a8; max-width: 540px; margin: 0 auto 22px; }
.cta-btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.cta-btn:hover { background: #b8e8cd; color: var(--accent-ink); }
.cta-alt { display: block; margin-top: 14px; font-size: var(--fs-meta); color: var(--ink-muted); }

footer { position: relative; z-index: 1; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
              padding: 26px 20px 0; font-size: var(--fs-meta); }
.foot-note { text-align: center; color: var(--ink-faint); font-size: 12.5px;
             padding: 14px 20px 34px; margin: 0; }


/* ------------------------------------------------------------------ header nav */
/* Added 2026-09-29: the shared stylesheet had no nav rule, so a post's inline flex nav
   overflowed a 393px phone by 57px and produced sideways scroll. A site header is part of
   the theme, so it lives here rather than inline on each page. */
.site-nav {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center;
  max-width: 820px; margin: 0 auto; padding: 22px 28px 0;
  font-size: var(--fs-small);
}
.site-nav a { color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink-strong); }
.site-nav .brand { color: var(--ink-strong); font-weight: 600; margin-right: 8px; }

/* any nav, even one we did not author, must not push the page sideways */
nav { max-width: 100%; }

@media (max-width: 640px) {
  .site-nav { padding: 18px 18px 0; gap: 4px 16px; font-size: 14px; }
}


/* ------------------------------------------------------------- site header */
/* Moved here 2026-09-29 from per-page inline styles. Two defects this fixes:
   (1) /ai-seo/ and /cannabis-seo/ had NO header at all - they were built off a shell
       without one, so a reader arriving from search had no way back into the site;
   (2) the migration dropped these rules, leaving the header unstyled on the pages that
       did have one. A header is part of the theme, so it lives in the theme file. */
header.nav { position: relative; z-index: 20; }
.nav-inner {
  max-width: 1152px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: flex-start; gap: 6px;
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink-strong); text-decoration: none;
}
.brand .arrow { margin-top: 2px; font-size: 14px; color: var(--accent); line-height: 1; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7);
  text-decoration: none; transition: color .2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--ink-strong); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #000 !important;
  border-radius: var(--radius-pill); padding: 12px 20px;
  font-weight: 500; font-size: 14px; text-decoration: none; transition: background .2s;
}
.nav-cta:hover { background: rgba(255,255,255,0.9); }

@media (max-width: 640px) {
  .nav-inner { padding: 16px 18px; gap: 10px; }
  .nav-links { gap: 6px 16px; }
  .nav-links a { font-size: 13.5px; }
  .nav-cta { padding: 10px 16px; font-size: 13px; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  main { padding: 32px 18px 20px; }
  .two { grid-template-columns: 1fr; }
  .cta-box { padding: 26px 20px; }
  body { font-size: 16px; }          /* the mobile floor */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}