/* Standalone reading-page styles for the SSR detail pages (/blog, /works, /videos).
   Editorial / magazine treatment on a light background. Fully independent of the in-app
   overlay CSS (css/desktop.css / mobile.css) — only the brand assets are shared:
   NicoClean for display type + the teal accent. Body copy uses a readable text face. */

@font-face {
  font-family: 'NicoClean';
  src: url('/assets/fonts/NicoClean-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NicoBold';
  src: url('/assets/fonts/NicoBold-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours matched to the in-app detail overlay (css/desktop.css .detail-*) */
  --teal: #008575;
  --ink: #1a1a1a;          /* titles / headings (.detail-title) */
  --body: #555;            /* body copy (.detail-body) */
  --meta: #989898;         /* meta line (.detail-meta) */
  --line: #e0e0e0;
  --bg: #fff;              /* white, same as the overlay surface */
  --display: 'NicoClean', system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --measure: 1040px;       /* reading column cap (~70% on a 1440 screen) */
}

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

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

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--display);
  font-size: 16px;          /* = in-app .detail-body */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* Centered reading measure shared by every band */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

.article { width: 100%; padding-bottom: 96px; }

/* Top / bottom "Explore the full site" actions */
.article-top { margin-top: 32px; }
.article-foot {
  margin-top: 48px;
  padding-top: 28px;
}
.article-foot.wrap { border-top: 1px solid var(--line); }

.back-link,
.watch-link {
  display: inline-block;
  font-family: var(--display);
  color: var(--teal);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  /* NicoClean glyphs sit high in the line-box: more top than bottom padding centers them. */
  padding: 11px 16px 7px;
  line-height: 1;
  transition: background 200ms ease, color 200ms ease;
  cursor: pointer;
}
.back-link:hover,
.watch-link:hover { background: var(--teal); color: #fff; }

/* ── Hero image (blog) — standalone, contained to the reading column ── */
/* The full image is shown at its natural aspect ratio (no cropping); the
   title/date/divider sit separately below it. */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  margin: 28px auto 0;
  border-radius: 10px;
  overflow: hidden;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;     /* resize to fit, no crop */
}
/* Gentle tint for depth (no text overlaid, so kept subtle) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,0.16) 100%),
    linear-gradient(0deg, rgba(0,133,117,0.12), rgba(0,133,117,0.0) 55%);
}

/* ── Header (title / date / divider), below the hero on light bg ── */
.article-head { padding-top: 32px; }

.article-meta {
  font-family: var(--display);
  font-size: 13px;
  color: var(--meta);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.article-meta time { color: inherit; }
.article-meta .dot { color: var(--line); }

/* Scoped to the page header: an unscoped `h1` also caught h1 blocks authored inside
   post bodies, rendering them at page-title size. Every page h1 lives in .article-head. */
.article-head h1 {
  font-family: var(--display);
  font-size: clamp(32px, 6.5vw, 54px);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.divider { width: 100%; height: 3px; background: var(--teal); margin-top: 22px; }

/* ── Body ── */
.article-body { margin-top: 40px; font-size: 16px; line-height: 1.8; color: var(--body); }

/* Tags sit between the title and the divider, inside the header */
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.tags li {
  list-style: none;
  font-family: var(--display);
  font-size: 12px;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 6px 12px 2px;
  line-height: 1;
}

.article-body .lead {
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 28px;
}
.article-body p { margin-bottom: 20px; min-height: 1em; }
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 { font-family: var(--display); color: var(--ink); font-weight: 400; line-height: 1.25; }
/* h1 inside body copy sits just above h2 — the page title is the only true h1. */
.article-body h1 { font-size: 36px; margin: 52px 0 16px; line-height: 1.18; }
.article-body h2 { font-size: 30px; margin: 44px 0 14px; }
.article-body h3 { font-size: 23px; margin: 36px 0 10px; }
.article-body h4 { font-size: 19px; margin: 28px 0 8px; }
.article-body h5 { font-size: 17px; margin: 24px 0 6px; }
.article-body h6 { font-size: 15px; margin: 20px 0 6px; color: var(--meta); letter-spacing: 0.4px; text-transform: uppercase; }
/* Bold text and links use NicoBold in solid black (NicoBold is already a heavy
   face, so keep font-weight normal to avoid the browser faux-bolding it). */
.article-body strong,
.article-body b,
.article-body a {
  font-family: 'NicoBold', var(--display);
  font-weight: normal;
  color: #000;
}
/* Links are NicoBold in teal with a teal underline (bold spans stay black). */
.article-body a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* inset highlight area for hover; vertical padding extends the highlight up/down to
     cover NicoClean's high-sitting glyphs (inline vertical padding doesn't shift layout),
     negative horizontal margin keeps inline text from shifting */
  padding: 4px 3px 1px;
  margin: 0 -3px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 150ms ease, color 150ms ease;
}
.article-body a:hover {
  background: var(--teal);
  color: #fff;
  text-decoration: none;
}
/* A bold span inside a link (renders as <a><strong>) must take the link's teal,
   not the black bold colour. */
.article-body a strong,
.article-body a b { color: inherit; }
/* Headings are almost always authored fully bold in Sanity, so they render as
   <h2><strong>. The bold rule's font-family/color must not override the heading's. */
.article-body h1 strong, .article-body h1 b,
.article-body h2 strong, .article-body h2 b,
.article-body h3 strong, .article-body h3 b,
.article-body h4 strong, .article-body h4 b,
.article-body h5 strong, .article-body h5 b,
.article-body h6 strong, .article-body h6 b {
  font-family: inherit;
  color: inherit;
}
/* Underline and strike must not be mistaken for links (which are teal + underlined). */
.article-body u {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-body s { text-decoration: line-through; color: var(--meta); }
.article-body ul,
.article-body ol { padding-left: 1.3em; margin-bottom: 20px; }
.article-body li { margin-bottom: 8px; }
/* Nested lists sit inside their parent <li>; the parent's bottom margin would double up. */
.article-body li > ul,
.article-body li > ol { margin-top: 8px; margin-bottom: 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; margin: 8px 0; }
/* Captioned images. The figure carries the vertical rhythm so it doesn't stack with
   the image's own margin (which the serializer omits inside a figure). */
.article-body figure { margin: 24px 0; }
.article-body figure img { margin: 0; }
.article-body figcaption {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--meta);
  text-align: center;
}
.article-body blockquote {
  margin: 28px 0;
  padding: 6px 0 6px 20px;
  border-left: 3px solid var(--teal);
  color: var(--meta);
  font-style: italic;
  font-size: 20px;
}
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #ececec;
  padding: 2px 6px;
  border-radius: 4px;
}
/* ── Code blocks ──
   The wrapper clips, the <pre> scrolls: a long line never widens the page itself. */
.article-body .code-block {
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}
.article-body .code-filename {
  padding: 9px 14px 7px;
  font-family: var(--display);
  font-size: 12px;
  color: var(--meta);
  background: #f1f1f1;
  border-bottom: 1px solid var(--line);
}
.article-body .code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
/* Undo the inline-code chip for code inside a block — the rule above targets both. */
.article-body pre code {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
  overflow-wrap: normal;
  color: var(--ink);
}

/* ── Tables ──
   Cells are plain strings (@sanity/table), so no inline formatting inside them.
   The wrapper scrolls horizontally rather than letting the table widen the page. */
.article-body .table-wrap { overflow-x: auto; margin: 28px 0; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.article-body th {
  font-family: var(--display);
  font-weight: normal;
  color: var(--ink);
  background: #f7f7f7;
  white-space: nowrap;
}

/* ---- Phase 5: colour decorators, highlight, divider, callouts -------------------
   Contrast measured against the body surface (#fff) and the callout tints, not
   eyeballed. Ratios are recorded in docs/RICHTEXT_UPGRADE_PLAN.md Phase 5.
   The class names are the decorator `value`s in
   studio/schemaTypes/portableTextDecorators.ts — renaming one breaks stored content. */

/* #00614f on #fff = 7.44:1 (AAA). A darker sibling of the brand teal (--teal #008575,
   4.55:1) which stays in use for non-text accents like rules and hovers. */
.article-body .c-accent { color: #00614f; }

/* #6b6b6b on #fff = 5.33:1 (AA, not AAA). Deliberate: "muted" has to read lighter than
   the #555 body copy, and the nearest AAA grey (#595959, 7.00:1) is indistinguishable
   from it. Documented deviation — see the Phase 5 gate notes. */
.article-body .c-muted { color: #6b6b6b; }

/* #a5281b on #fff = 7.19:1 (AAA). */
.article-body .c-alert { color: #a5281b; }

/* Background only — no `color`. Highlight is inline and can stack with the colour
   decorators above; setting a colour here would silently win over or lose to them
   depending on mark order. Body copy (#555) on this tint = 6.74:1 (AA). */
.article-body .highlight {
  background: #eaf6f3;
  padding: 0.1em 0.25em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Bare <hr>: css/article.css already uses `.divider` for the teal rule under the
   article title, so the divider block must not reuse that class. */
.article-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 36px auto;
  width: 100%;
}

/* Callouts are block containers, so pinning the text to --ink is safe (nothing inline
   stacks with it) and lifts every tone to AAA: #1a1a1a on these tints is ~15.7:1,
   versus 6.7:1 for the inherited #555. */
.article-body .callout {
  margin: 28px 0;
  padding: 16px 18px;
  border-left: 4px solid;
  border-radius: 0 4px 4px 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}
.article-body .callout > :last-child { margin-bottom: 0; }
.article-body .callout p { margin-bottom: 12px; }
.article-body .callout ul,
.article-body .callout ol { margin-bottom: 12px; padding-left: 1.2em; }

.article-body .callout-info    { background: #eaf6f3; border-left-color: #00614f; }
.article-body .callout-tip     { background: #ecf5ed; border-left-color: #2e6b32; }
.article-body .callout-warning { background: #fdf4e5; border-left-color: #8a5a00; }

/* ---- Phase 6: Tableau card + file download -------------------------------------
   The Tableau block is a link wrapping a figure, not an iframe — one code path that
   behaves the same at 360px and on desktop. The <img> carries width/height so the
   card reserves its space before the thumbnail loads. */
.article-body .tableau-card {
  display: block;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.article-body .tableau-card:hover {
  border-color: #00614f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.article-body .tableau-card figure { margin: 0; }
.article-body .tableau-card img {
  width: 100%;
  height: auto;
  display: block;
  background: #f7f7f7;   /* holds the space if the CDN thumbnail fails */
}
.article-body .tableau-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  text-align: left;   /* the shared figcaption rule centres image captions */
  font-size: 15px;
}
.article-body .tableau-title { color: var(--ink); font-weight: 600; }
.article-body .tableau-cta   { color: #00614f; font-size: 14px; white-space: nowrap; }

.article-body .file-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  background: #fafafa;
  transition: border-color 160ms ease, background 160ms ease;
}
.article-body .file-download:hover { border-color: #00614f; background: #f2faf8; }
.article-body .file-label { font-weight: 600; }
.article-body .file-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #00614f;
  border: 1px solid #cfe3de;
  border-radius: 3px;
  padding: 2px 6px;
}

.watch-link { margin-bottom: 24px; }

/* ── Image lightbox (same behaviour as the app) ── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#lightbox.open { display: flex; }
#lightbox-img {
  width: 95vw;
  height: 95vh;
  object-fit: contain;
  display: block;
  background: #fff;
  cursor: zoom-out;
  user-select: none;
}

/* Accessibility */
a:focus-visible,
.back-link:focus-visible,
.watch-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

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