/* ---------------------------------------------------------------------------
   Blog styles, a SUPPLEMENT to site.css, never a replacement.
   ---------------------------------------------------------------------------
   site.css already carries a complete document system: .cz-doc sets the
   760px measure, the Space Grotesk headings, the 1.72 line height and the
   #C4B5FD links, and .cz-docnav / .cz-docfoot are the chrome the legal pages
   already use. The blog reuses all of it. Everything below is only the parts
   a blog needs that a legal page does not: the index cards, the byline row,
   and the closing block where the product gets to speak.

   site.css is read-only in this repo by design, and the standing instruction
   is that its look comes from the Claude Design project. This file adds new
   surface rather than overriding existing surface, which is why it is a
   separate stylesheet and not an edit.

   Every colour here is lifted from site.css or the app's own palette. The
   accents are the four category colours from constants/theme.ts, so a post
   tagged on the blog reads the same as a thought filed in the app.
--------------------------------------------------------------------------- */

/* ── the index ─────────────────────────────────────────────────────────── */

.cz-postlist {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}

.cz-postlist li {
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cz-postlist li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cz-postlist h2 {
  /* tighter than .cz-doc h2, which is spaced for long prose */
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.22;
}

.cz-postlist h2 a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 200ms ease;
}

.cz-postlist h2 a:hover { color: #DDD6FE; }

.cz-postlist p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.6);
}

/* ── the byline row, on both the index and a post ──────────────────────── */

.cz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.34);
}

.cz-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

/* A post's subject, in the app's own category colours. Reading a post and
   filing a thought should feel like the same system. */
.cz-tag {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cz-tag.ideas       { color: #34D399; border-color: rgba(52, 211, 153, 0.3); }
.cz-tag.reflections { color: #60A5FA; border-color: rgba(96, 165, 250, 0.3); }
.cz-tag.feelings    { color: #FCD34D; border-color: rgba(252, 211, 77, 0.3); }
.cz-tag.wondering   { color: #F472B6; border-color: rgba(244, 114, 182, 0.3); }

/* ── a post ────────────────────────────────────────────────────────────── */

.cz-back {
  display: inline-block;
  margin-bottom: 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.cz-back:hover { color: #FFFFFF; }

/* The one place the product is allowed to speak, kept visually separate so a
   reader can see where the article ends and the pitch begins. Being obvious
   about that is the point: an article that blurs the line reads as an advert
   the whole way through, and gets trusted like one. */
.cz-postcta {
  margin: 56px 0 0;
  padding: 28px 30px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.cz-postcta h3 {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.cz-postcta p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.64); }
.cz-postcta p:last-child { margin: 0; }

.cz-postcta .cz-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 240ms ease, border-color 240ms ease;
}

.cz-postcta .cz-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

/* A pulled-out line for the sentence a post is actually about. Sparing:
   one per post at most, or it stops meaning anything. */
.cz-pull {
  margin: 34px 0;
  padding-left: 20px;
  border-left: 2px solid rgba(196, 181, 253, 0.4);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

@media (max-width: 860px) {
  .cz-postlist h2 { font-size: 19px; }
  .cz-postcta { padding: 22px 20px; }
  .cz-pull { font-size: 17px; }
}

/* ── chrome that site.css leaves unstyled ──────────────────────────────── */

/* .cz-docfoot sets a colour on the container but never on the anchors inside
   it, and there is no global `a` reset anywhere in site.css. So every footer
   link falls through to the browser default: #0000EE, underlined. Confirmed
   on support.html on 2026-08-18, which means it is live on all four legal
   pages, including the two the app's paywall links to directly.

   Fixed here for the blog only. The same three lines in site.css would fix
   the legal pages, but that file is read-only in this repo on purpose and the
   change is Sanad's to make. */

.cz-docnav a,
.cz-docfoot a { text-decoration: none; }

.cz-docfoot a {
  color: rgba(255, 255, 255, 0.28);
  transition: color 200ms ease;
}

.cz-docfoot a:hover { color: rgba(255, 255, 255, 0.62); }

/* ── the sky ───────────────────────────────────────────────────────────── */

/* hero-gazer.jpg again, and deliberately the same file rather than a new
   crop: it is already fetched and cached from the homepage, so it costs
   nothing here, and the blog reading like the same night sky as the front
   door is the whole point.
 *
 * It is a background rather than a banner. A hard-edged image strip on a text
 * page would read as a stock header on a site whose homepage dissolves into
 * black. So this fades out twice over, by opacity and by mask, and there is
 * no edge anywhere: the photograph simply stops being there by the time the
 * words start.
 *
 * Two positions, on purpose:
 *   .cz-sky        posts. The upper right of the frame, which is nebula and
 *                  nothing else. The figure would appear on every article and
 *                  stop meaning anything by the third one.
 *   .cz-sky.front  the index, the blog's front door, where the gazer earns
 *                  his place. Same crop the homepage uses. */

.cz-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  background-image: url('../assets/hero-gazer.jpg');
  background-size: cover;
  background-position: 74% 8%;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0) 100%);
}

.cz-sky.front {
  height: 620px;
  background-position: 50% 22%;
  opacity: 0.72;
}

/* The purple lift the homepage hero has, so the top of the page glows rather
   than simply being a photograph laid on black. */
.cz-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 62% 26%, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0) 62%);
}

/* Everything real sits above the sky. body needs the containing block. */
body { position: relative; }

.cz-docnav,
.cz-doc,
.cz-docfoot { position: relative; z-index: 1; }

/* Over the photograph the lead's own tinted panel is one layer too many, and
   the border starts fighting the starfield behind it. Let the words carry it. */
.cz-doc .cz-lead {
  padding: 0;
  border: 0;
  background: none;
}

@media (max-width: 860px) {
  /* Narrower screens crop the photo harder, so less of it is sky and more of
     it is the figure. Shorter, and fainter, or the headline loses contrast. */
  .cz-sky { height: 320px; opacity: 0.4; }
  .cz-sky.front { height: 400px; opacity: 0.55; }
}

@media (prefers-reduced-motion: no-preference) {
  .cz-sky { animation: czSkyIn 1200ms ease 80ms both; }
  @keyframes czSkyIn { from { opacity: 0; } }
}

/* ── the waitlist, on a post ───────────────────────────────────────────── */

/* The same control as the homepage, and deliberately the same MECHANISM
   rather than a lookalike: site.js finds every input[type="email"] on the
   page, wraps it in a form, and wires it to the Supabase waitlist table. So a
   blog post needs config.js and site.js loaded and nothing else. One
   implementation, one table, no second code path to forget about.
 *
 * site.js is safe on a page that has none of the homepage's furniture.
 * reveal() iterates an empty list, and tameGraph() polls for a graph element
 * forty times and then gives up quietly. Checked before wiring this up.
 *
 * The styles below are the waitlist section's, re-expressed so they survive a
 * 760px column. The homepage hard-codes a 250px input, which would overflow
 * the blog measure on a phone. */

.cz-postcta .cz-signup {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  padding: 6px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.cz-postcta .cz-signup input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 18px;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14.5px;
  color: #FFFFFF;
}

.cz-postcta .cz-signup [data-mq="cta"] {
  flex: 0 0 auto;
  padding: 13px 22px;
  border-radius: 26px;
  background: linear-gradient(140deg, #A78BFA 0%, #7C5CE0 100%);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease;
}

.cz-postcta .cz-signup [data-mq="cta"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(124, 92, 224, 0.34);
}

.cz-postcta .cz-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
}

@media (max-width: 460px) {
  /* Below this the field and the button cannot share a row without the
     placeholder being clipped to nothing. */
  .cz-postcta .cz-signup { flex-wrap: wrap; border-radius: 22px; }
  .cz-postcta .cz-signup input { flex: 1 0 100%; }
  .cz-postcta .cz-signup [data-mq="cta"] { flex: 1 0 100%; text-align: center; }
}