/* ─────────────────────────────────────────────────────────────
   claude.do — brand site  ·  v3 "the machine's workshop"
   Dark-first (paper = daylight mode). Two voices:
     · Space Mono  → the machine speaks: headlines, wordmark, labels, UI
     · Source Serif → the human writes: reading body & long-form prose
   Two signals: coral = craft/human · teal = the live pulse / system.
   Signature: a blinking cursor. Zero JavaScript.
   ───────────────────────────────────────────────────────────── */

/* ---- DARK IS THE DEFAULT (the brand) ---- */
:root {
  --paper:      #0d0c0b;   /* the canvas: warm near-black */
  --paper-2:    #16140f;
  --paper-3:    #201d17;
  --ink:        #ece7dd;   /* warm off-white text */
  --ink-soft:   #b8b1a4;
  --muted:      #7d766a;
  --coral:      #e8916f;
  --coral-deep: #ef9a78;
  --coral-soft: #f0b890;
  --teal:       #2fc4b4;   /* the living pulse */
  --teal-deep:  #45cabb;
  --teal-soft:  #6fd8cb;
  --terminal:   #060606;   /* header/footer bar — darker than the canvas */
  --warm-white: #fafaf7;
  --rule:       rgba(236, 231, 221, 0.13);
  --rule-soft:  rgba(236, 231, 221, 0.07);
  --card:       #141210;

  --measure: 42rem;
  --display: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- DAYLIGHT MODE (opt-in via OS light preference) ---- */
@media (prefers-color-scheme: light) {
  :root {
    --paper:      #faf8f3;
    --paper-2:    #f3efe7;
    --paper-3:    #ece6db;
    --ink:        #211e1a;
    --ink-soft:   #58524a;
    --muted:      #8b8478;
    --coral:      #d97757;
    --coral-deep: #c05f3f;
    --coral-soft: #e8916f;
    --teal:       #10a99b;
    --teal-deep:  #0c8579;
    --teal-soft:  #45cabb;
    --terminal:   #0a0a0b;
    --rule:       rgba(33, 30, 26, 0.12);
    --rule-soft:  rgba(33, 30, 26, 0.07);
    --card:       #f3efe7;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--coral-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 145, 111, 0.35);
  transition: border-color .15s ease, color .15s ease;
}
a:hover { color: var(--coral); border-bottom-color: var(--coral); }
a:focus-visible, .btn:focus-visible, .thumb:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px;
}

/* The signature: a blinking block cursor. */
.caret {
  display: inline-block;
  width: .52em; height: 1.02em;
  margin-left: .12em;
  background: var(--teal);
  vertical-align: -0.13em;
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ── Layout shells ─────────────────────────────────────────── */
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: var(--terminal);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--coral) 0%, var(--coral) 35%, var(--teal) 100%) 1;
  position: sticky; top: 0; z-index: 20;
}
/* Header black bleeds UP off the top edge as a fade — so content scrolling
   behind a translucent mobile browser chrome (e.g. Telegram's in-app viewer)
   dissolves into black instead of colliding. Invisible on desktop. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 260px;
  background: linear-gradient(to top,
    var(--terminal) 0%, var(--terminal) 34%, rgba(6, 6, 6, 0) 100%);
  pointer-events: none;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; height: 56px;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--warm-white); border: none; font-weight: 700;
  font-family: var(--display); letter-spacing: -0.02em; font-size: .98rem;
}
.brand:hover { color: var(--warm-white); }
.brand svg { width: 24px; height: 24px; display: block; }
/* Brand standard: the dot inside claude.do is always coral (matches the logo
   mark). Bold + up-sized so the colour unmistakably reads at wordmark scale. */
.brand .dot { color: var(--coral); font-weight: 700; font-size: 1.3em; }
.nav { display: flex; gap: 1.3rem; align-items: center; }
.nav a {
  color: rgba(250,250,247,0.72); border: none;
  font-family: var(--display); font-size: .82rem; font-weight: 400; letter-spacing: -0.01em;
}
.nav a:hover { color: var(--warm-white); }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--terminal); color: rgba(250,250,247,0.5);
  margin-top: 5rem; padding: 2.5rem 0;
  font-family: var(--mono); font-size: .82rem;
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  align-items: center; justify-content: space-between;
}
.site-footer a { color: rgba(250,250,247,0.78); border: none; }
.site-footer a:hover { color: var(--teal-soft); }

/* ── Typography — headlines in the machine's voice ─────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.12;
}
h1 { font-size: clamp(1.85rem, 4.3vw, 2.85rem); margin: 0 0 .5rem; }
h2 { font-size: 1.4rem; margin: 2.6rem 0 .9rem; letter-spacing: -0.02em; }
h3 { font-size: 1.12rem; margin: 2rem 0 .6rem; letter-spacing: -0.02em; }
p { margin: 0 0 1.15rem; }

/* h1 gets the blinking cursor (rendered via markup .caret; this dot form
   is the fallback signature for headings without an explicit caret). */
.coral-dot::after {
  content: ""; display: inline-block;
  width: .5ch; height: 1.02em; margin-left: .14em;
  background: var(--teal); vertical-align: -0.13em;
  animation: blink 1.15s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .coral-dot::after { animation: none; } }

/* ── Hero (landing) ────────────────────────────────────────── */
.hero { padding: 5.5rem 0 3rem; }
.hero .kicker {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.hero .kicker::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 0 rgba(47,196,180,.5);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,196,180,.5); }
  70%  { box-shadow: 0 0 0 .5em rgba(47,196,180,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,196,180,0); }
}
@media (prefers-reduced-motion: reduce) { .hero .kicker::before { animation: none; } }
.hero h1 { max-width: 15ch; }
.hero .lede {
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink-soft);
  max-width: 40ch; margin: 1.3rem 0 2rem; line-height: 1.5;
}
.cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-weight: 700;
  padding: .7rem 1.25rem; border-radius: 8px; border: 1px solid transparent;
  font-size: .88rem; letter-spacing: -0.01em; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #1a0f0a; }
.btn-primary:hover { background: var(--coral-soft); color: #1a0f0a; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); }

/* ── Feature grid ──────────────────────────────────────────── */
.section { padding: 3rem 0; }
.section-title {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: 1.4rem;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.card {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: 12px; padding: 1.4rem 1.5rem;
}
.card h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; font-family: var(--serif); }
.card .tag {
  font-family: var(--mono); font-size: .7rem; color: var(--teal-deep);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── Post list ─────────────────────────────────────────────── */
.postlist { list-style: none; padding: 0; margin: 0; }
.postlist li { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.postlist li:first-child { padding-top: 0; }
.postlist .meta {
  font-family: var(--mono); font-size: .76rem; color: var(--muted);
  letter-spacing: .04em; margin-bottom: .4rem;
}
.postlist h2 { font-size: 1.28rem; margin: 0 0 .45rem; }
.postlist h2 a { border: none; color: var(--ink); }
.postlist h2 a:hover { color: var(--teal-deep); }
.postlist p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

.post-card { display: grid; grid-template-columns: 15rem 1fr; gap: 1.4rem; align-items: start; }
.post-card .thumb { border: none; display: block; border-radius: 10px; overflow: hidden; }
.post-card .thumb img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 10px; transition: transform .25s ease;
}
.post-card .thumb:hover img { transform: scale(1.03); }
.post-card-body { min-width: 0; }
.badge {
  display: inline-block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep);
  border: 1px solid rgba(47,196,180,0.45); border-radius: 999px;
  padding: .05rem .5rem; margin-left: .5rem; vertical-align: middle;
}
@media (max-width: 620px) { .post-card { grid-template-columns: 1fr; gap: .8rem; } }

/* ── Article ───────────────────────────────────────────────── */
.article-head { padding: 3.5rem 0 1rem; }
.article-head .meta {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
  letter-spacing: .04em; margin-bottom: 1rem;
}
.article-head h1 { max-width: 22ch; }
.article-head .standfirst {
  font-family: var(--serif); font-size: 1.22rem; color: var(--ink-soft);
  max-width: 46ch; line-height: 1.5; margin-top: 1rem; font-style: italic;
}
.tag-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 0; margin: 1.3rem 0 0;
}
.tag-chip {
  display: inline-block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep);
  border: 1px solid rgba(47,196,180,0.45); border-radius: 999px;
  padding: .18rem .65rem;
}
.article-hero { margin: 2rem auto; max-width: 62rem; }
.article-hero img {
  border-radius: 12px; border: 1px solid var(--rule);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4); width: 100%;
}
.article-hero figcaption, figure figcaption {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
  text-align: center; margin-top: .6rem;
}

article.prose { font-size: 1.1rem; }
article.prose h2 { border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }
article.prose h3 { color: var(--ink); }
article.prose img { border-radius: 10px; border: 1px solid var(--rule); margin: 1.6rem 0; }
article.prose figure { margin: 2rem 0; }
article.prose ul, article.prose ol { padding-left: 1.3rem; }
article.prose li { margin: .35rem 0; }
article.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px solid var(--coral); color: var(--ink-soft); font-style: italic;
}
article.prose em { color: var(--ink-soft); }
article.prose hr { border: none; border-top: 1px solid var(--rule); margin: 2.6rem 0; }

/* video figures */
.clip { margin: 2rem 0; }
.clip video {
  width: 100%; border-radius: 10px; border: 1px solid var(--rule);
  background: var(--terminal); box-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
.clip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin: 2rem 0; }
.clip-grid figure { margin: 0; }
.clip-grid figcaption { text-align: left; }

/* ── Code — the terminal within the terminal ───────────────── */
code, pre { font-family: var(--mono); }
:not(pre) > code {
  background: var(--paper-2); color: var(--coral-soft);
  padding: .12em .38em; border-radius: 4px; font-size: .86em;
  border: 1px solid var(--rule);
}
pre {
  background: #060606; color: var(--warm-white);
  border-radius: 10px; border: 1px solid rgba(47,196,180,0.28);
  padding: 1.1rem 1.2rem; overflow-x: auto; font-size: .84rem; line-height: 1.6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
pre code { background: none; border: none; padding: 0; color: inherit; }

/* ── Utility ───────────────────────────────────────────────── */
.center { text-align: center; }
.muted { color: var(--muted); }
.byline-note {
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--teal); border-radius: 8px;
  padding: 1rem 1.2rem; font-size: .96rem; color: var(--ink-soft); margin: 2rem 0;
}
.back {
  font-family: var(--mono); font-size: .82rem; border: none;
  display: inline-block; margin: 2.5rem 0 0;
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .nav { gap: .95rem; }
  .hero { padding: 3.5rem 0 2rem; }
}

/* ── tables ────────────────────────────────────────────────── */
article.prose table {
  width: 100%; border-collapse: collapse; margin: 1.8rem 0;
  font-family: var(--mono); font-size: .84rem;
}
article.prose th {
  text-align: left; color: var(--teal-deep); font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; font-size: .7rem;
  padding: .55rem .7rem; border-bottom: 1px solid var(--rule);
}
article.prose td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}
article.prose td:last-child { color: var(--ink); }
article.prose tr:last-child td { border-bottom: none; }

/* ── listen-along players ──────────────────────────────────────
   The card the audio-tour component morphs into its floating core. The
   component styles its OWN `.at-*` internals and only ever paints on top of
   this card (progress wash, done tick, shed opacity) — the card itself is the
   host page's, and the component's contract asks for exactly this much:
   `display: flex; align-items: center` and a `border-radius`, so the `.at-slot`
   it inserts as the first child lands in line with the label. Ported verbatim
   from the MCP/AX posts' own stylesheet. */
.listen {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--teal);
  border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1.6rem;
}
.listen .label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--teal-deep); white-space: nowrap;
}
.listen audio { width: 100%; max-width: 26rem; height: 34px; flex: 1 1 16rem; }
.listen audio::-webkit-media-controls-panel { background: var(--paper-3); }

/* ── verify tags ───────────────────────────────────────────── */
/* An inline claim-provenance marker: "this specific clause is unconfirmed".
   Ported verbatim from the MCP/AX posts' own stylesheet (WORLD-552 template). */
.verify {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--coral-soft); background: rgba(232,145,111,0.09);
  border: 1px solid rgba(232,145,111,0.3); border-radius: 4px;
  padding: .1em .45em; display: inline;
}

.verify::before { content: "VERIFY "; color: var(--coral); letter-spacing: .1em; }

/* ── author's note ─────────────────────────────────────────── */
details.note {
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--teal); border-radius: 8px;
  padding: .9rem 1.2rem; margin: 3rem 0 0; color: var(--ink-soft);
  font-size: .98rem;
}

details.note > summary {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep);
  cursor: pointer; list-style: none;
}

details.note > summary::-webkit-details-marker { display: none; }

details.note > summary::before { content: "▸ "; }

details.note[open] > summary::before { content: "▾ "; }

details.note > summary:hover { color: var(--teal-soft); }

details.note p { margin: 1rem 0 0; }

/* ── figures ───────────────────────────────────────────────── */
figure.fig { margin: 2.4rem 0; }
figure.fig .frame {
  border-radius: 12px; border: 1px solid var(--rule); overflow: hidden;
  background: #16140f; box-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
figure.fig .frame svg { display: block; width: 100%; height: auto; }
figure.fig figcaption { text-align: left; line-height: 1.5; }
figure.fig figcaption b { color: var(--ink-soft); font-weight: 400; }
figure.fig figcaption .note { color: var(--teal-deep); }

/* a table (or any wide block) that carries its own caption */
figure.tbl { margin: 1.8rem 0; }
figure.tbl > table { margin-top: 0; }
figure.tbl > figcaption {
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  text-align: left; line-height: 1.5; margin-top: .6rem;
}
figure.tbl > figcaption > b,
figure.tbl > figcaption > strong {
  color: var(--teal-deep); font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; font-size: .95em;
}

/* wide figures breathe past the reading measure on big screens */
@media (min-width: 60rem) {
  figure.fig { width: 52rem; margin-left: calc((42rem - 52rem) / 2); }
}

/* ── mobile reading measure (WORLD-552) ────────────────────────
   This sheet nests .wrap (padding 0 1.5rem) around .prose (padding 0 1.5rem),
   so an article body carried 3rem of side padding on a phone while
   .article-head — whose own padding shorthand zeroes the horizontal value —
   carried 1.5rem. Result: 48px margins on the body, 24px on the title, and a
   ~294px measure at 390px wide. Collapse the inner padding on small screens so
   head and body share one comfortable 1.1rem gutter.
   .wrap.prose (blog index, 404) is ONE element wearing both classes — it has no
   outer gutter to inherit, so it keeps its own. */
@media (max-width: 46rem) {
  .wrap { padding: 0 1.1rem; }
  .prose { padding: 0; }
  .wrap.prose { padding: 0 1.1rem; }
  .article-hero { margin: 1.6rem 0; }
}

/* figures stay legible on a phone: pan inside the frame rather than
   shrinking 1000px of diagram into 350px of screen */
@media (max-width: 46rem) {
  figure.fig .frame {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  figure.fig .frame svg { min-width: 620px; }
  /* say so, since the pan is the only way to read a wide diagram on a phone.
     Capitalized because it follows the caption's own full stop. */
  figure.fig figcaption::after {
    content: " Swipe the figure sideways to read it.";
    color: var(--muted);
  }
}

/* ── full-bleed on a phone ─────────────────────────────────────
   Horizontally-scrolling blocks run edge to edge: cancel the .wrap
   1.1rem gutter, drop the side borders and the corner radius, keep the
   top/bottom border and the background. Captions keep their padding.
   These rules sit at the END of the sheet on purpose — the table rule
   below must come after `article.prose table` or it loses the cascade. */
@media (max-width: 46rem) {
  figure.fig .frame,
  article.prose pre {
    margin-left: -1.1rem; margin-right: -1.1rem;
    border-radius: 0; border-left: none; border-right: none;
  }
}
@media (max-width: 46rem) {
  article.prose table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 1.8rem -1.1rem; padding: 0 1.1rem; box-sizing: border-box;
    width: calc(100% + 2.2rem);
  }
  figure.tbl > table { margin-top: 0; }
}

/* ── code inside a quote or callout box ────────────────────────
   The quote/callout box is already the frame, so block code nested in
   it draws no frame of its own: no border, and no inset 1px ring from
   the `pre` box-shadow (which reads as a border). On a phone it also
   stays inside the box instead of going full-bleed. Standalone code
   blocks keep their frame. Last in the sheet so it wins the cascade. */
:is(blockquote, .callout, .byline-note, details.note) pre {
  border: 0; box-shadow: none;
}
@media (max-width: 46rem) {
  article.prose :is(blockquote, .callout, .byline-note, details.note) pre {
    margin-left: 0; margin-right: 0; border-radius: 10px;
  }
}