/* 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); }

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; }
.article-body h2,
.article-body h3,
.article-body h4 { font-family: var(--display); color: var(--ink); font-weight: 400; line-height: 1.25; }
.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; }
/* 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; }
.article-body ul,
.article-body ol { padding-left: 1.3em; margin-bottom: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; margin: 8px 0; }
.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;
}
.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;
  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; }
}