/* documents.css — private document pages (/documents/{slug}) */
/* Spec sourced exactly from Figma: Inter, 14px, line-height 1.429 (20px),
   letter-spacing -0.1882px. Colours and spacing noted per element below. */

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

body.doc-page {
  background: #FCFDFD;                 /* site default (per choice) */
  --doc-media-radius: 8px;            /* shared by the placeholder + images + lightbox */
  --doc-media-bg: #F6F7F7;           /* image card colour, inline + lightbox */
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #111315;
  scrollbar-gutter: stable;
}

/* ── Logo (pinned top-left) ───────────────────────────── */
.doc-logo {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 28px;
  height: 17px;
  color: #111315;
  z-index: 10;
}

.doc-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Column ───────────────────────────────────────────── */
.doc-container {
  margin: 0 auto;
  width: 600px;                        /* Figma content width */
  max-width: 100%;
  padding: 88px 0 100px;
}

/* ── Header (title + meta line) ───────────────────────── */
.doc-header {
  margin-bottom: 24px;                 /* Figma: header → body gap */
}

.doc-title {
  font-size: 14px;
  font-weight: 530;
  line-height: 20px;
  letter-spacing: -0.1882px;
  color: #111315;
  margin: 0 0 4px;                      /* Figma: title → meta gap */
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 460;
  line-height: 20px;
  letter-spacing: -0.1882px;
  white-space: nowrap;
}

.doc-meta-label,
.doc-meta-date {
  color: #90979d;
}

.doc-meta-dot {
  color: #c5cbcf;
}

/* ── Body content ─────────────────────────────────────── */
.doc-content {
  font-size: 14px;
  font-weight: 440;
  line-height: 20px;
  letter-spacing: -0.1882px;
  color: #111315;
}

.doc-content p {
  margin: 0 0 20px;                    /* Figma: blank-line rhythm between paragraphs */
}

.doc-content p:empty {
  display: none;
}

.doc-content > *:last-child {
  margin-bottom: 0;
}

/* Section heading — same size/colour as body, heavier weight */
.doc-content h2,
.doc-content h2.doc-heading {
  font-size: 14px;
  font-weight: 530;
  line-height: 20px;
  letter-spacing: -0.1882px;
  color: #111315;
  /* 48px between sections (collapses with prior 20/24px margin),
     24px from heading to its body */
  margin: 48px 0 24px;
}

.doc-content > h2:first-child {
  margin-top: 0;
}

/* Links — dark text with a soft light-grey underline */
.doc-content a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #c5cbcf;
  text-decoration-thickness: 1.5px;
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 200ms;
}

.doc-content a:hover {
  text-decoration-color: currentColor;
}

/* ── List Group (Core Tenets) ─────────────────────────── */
.doc-list-group {
  margin: 0 0 24px;                    /* 24px between groups */
}

/* Scoped under .doc-content so the 4px internal spacing beats the generic
   `.doc-content p { margin: 0 0 20px }` rule (equal-class selectors lose). */
.doc-content .doc-list-title {
  color: #111315;
  margin: 0 0 4px;                     /* 4px internal */
}

.doc-content .doc-list-line {
  color: #61686f;
  margin: 0 0 4px;
}

.doc-content .doc-list-group p:last-child {
  margin-bottom: 0;
}

/* ── Image placeholder ────────────────────────────────── */
.doc-placeholder {
  background: #eeeff0;
  border-radius: var(--doc-media-radius);
  width: 100%;
  margin: 24px 0;
}

/* ── Figures (images / video / embeds) ────────────────── */
.doc-figure {
  margin: 24px 0;
}

.doc-figure > div {
  overflow: hidden;
  border-radius: var(--doc-media-radius);
}

.doc-figure img,
.doc-figure video {
  width: 100%;
  height: auto;
  display: block;
}

/* Uploaded images sit on a light card (shows behind transparent PNGs / while
   loading) and share the placeholder's corner radius. */
.doc-figure img {
  background: var(--doc-media-bg);
  border-radius: var(--doc-media-radius);
}

.doc-figure iframe {
  width: 100%;
  border: 0;
  border-radius: var(--doc-media-radius);
  background: #eeeff0;
}

.doc-figure figcaption {
  font-size: 12px;
  color: #90979d;
  margin-top: 6px;
  letter-spacing: -0.1882px;
}

/* Hover zoom — the wrapper's overflow:hidden clips the scale (same as the
   portfolio article images). */
.doc-figure > div > img,
.doc-figure > div > video {
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.doc-figure > div:hover > img,
.doc-figure > div:hover > video {
  transform: scale(1.014);
}

@media (hover: none) {
  .doc-figure > div:hover > img,
  .doc-figure > div:hover > video {
    transform: none;
  }
}

.doc-figure img,
.doc-figure video,
.doc-figure [data-lightbox-src] {
  cursor: pointer;
}

/* ── Rough-notation annotations ───────────────────────── */
/* Hide while rough-notation positions the SVG against the target's
   bounding rect — it briefly paints at the body's top-left otherwise. */
.rough-annotation {
  opacity: 0;
  animation: doc-rough-reveal 260ms 120ms ease forwards;
}

@keyframes doc-rough-reveal {
  to { opacity: 1; }
}

.doc-content .name {
  font-family: 'Gochi Hand', cursive;
  color: #8a8e91;
  font-size: 1.1em;
  font-weight: bold;
}

.doc-content .muted {
  color: #61686f;
}

@media (prefers-reduced-motion: reduce) {
  .rough-annotation {
    opacity: 1;
    animation: none;
  }
}

/* ── Intro reveal (line-by-line fade-up) ──────────────── */
/* `doc-anim` is set on <html> by an inline head script before first paint, so
   these elements start hidden; document-reveal.js then fades each line up with
   a stagger via the Web Animations API and removes the class. The list-group
   wrapper itself is never hidden — only its lines — so its children stay
   visible while they animate. */
html.doc-anim .doc-logo,
html.doc-anim .doc-title,
html.doc-anim .doc-meta,
html.doc-anim .doc-content > *:not(.doc-list-group),
html.doc-anim .doc-list-group > * {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.doc-anim .doc-logo,
  html.doc-anim .doc-title,
  html.doc-anim .doc-meta,
  html.doc-anim .doc-content > *:not(.doc-list-group),
  html.doc-anim .doc-list-group > * {
    opacity: 1;
  }
}

/* ── Lightbox (basicLightbox) ─────────────────────────── */
/* Same treatment as the portfolio article images — click an image to open it
   large, with a spinner while the full-res version loads. */
.blb-wrap .basicLightbox__placeholder > img.blb:first-child:last-child {
  max-width: 70vw;
  max-height: 90vh;
  transition: opacity 180ms ease;
  background: var(--doc-media-bg, #F6F7F7);
  border-radius: var(--doc-media-radius, 8px);
}

@media (max-width: 598px) {
  .blb-wrap .basicLightbox__placeholder > img.blb:first-child:last-child {
    max-width: calc(100vw - 32px);
  }
}

.blb-wrap.blb-loading .basicLightbox__placeholder > img.blb {
  opacity: 0;
}

.blb-wrap.blb-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: blb-spin 0.7s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes blb-spin {
  to { transform: rotate(360deg); }
}

/* ── Narrow / tablet ──────────────────────────────────── */
/* Below this width the centred 530px column's left gutter can no longer
   hold the corner logo, so stack the logo above the content instead. */
@media (max-width: 820px) {
  .doc-container {
    width: 100%;
    padding: 72px 24px 80px;
  }

  /* Absolute (not fixed) so the logo sits at the top and scrolls away with the
     page instead of staying pinned. Slightly smaller here than on desktop. */
  .doc-logo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 24px;
    height: auto;
  }

  .doc-logo svg {
    height: auto;
  }
}