/* ============================================================
   articles.css
   ------------------------------------------------------------
   Article body styling only. The header, navigation, sidebar and
   footer come from the shared shell in /inc/, so this file is
   what styleblog.css used to be minus everything the shell now
   provides.

   Every colour is a theme token. The old file hardcoded #ca8d1c
   borders and #f0e6d2 panels, which is why articles stayed on a
   parchment ground while the rest of the site moved to the night
   sky.
   ============================================================ */

/* ---- the page it is written on ------------------------------
   Every layer from <main> down to the paragraph was transparent, so
   article prose was painted straight onto the starfield - stars drifting
   behind the running text, and nothing holding the column. It was the
   one section with no surface of its own.

   This is the same vellum the rules chapters sit on: a lit navy panel on
   the darker page ground, a faint gold weave, and one warm bloom at the
   top edge. 68ch of measure is preserved by adding the padding on top of
   it rather than inside it.

   Measured on the panel's darker end #111a37: body text #f0e3c4 is
   13.36:1 and the gold #e8c670 is 10.39:1.
   ------------------------------------------------------------ */

.article-body {
  --a-panel:  #111a37;
  --a-panel-2:#17223f;
  --a-line:   #2c3a63;
  --a-pad: clamp(1.25rem, 3.2vw, 2.4rem);

  max-width: calc(68ch + var(--a-pad) * 2);
  padding: var(--a-pad);
  background:
    repeating-linear-gradient(105deg, rgba(232,198,112,.028) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(15deg,  rgba(232,198,112,.020) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 0%, rgba(232,198,112,.07), transparent 62%),
    linear-gradient(180deg, var(--a-panel-2), var(--a-panel));
  border: 1px solid var(--a-line);
  border-top: 3px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(3, 7, 20, .55);

  font-family: var(--font-prose);
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.72;
}

/* header.php draws the eyebrow inside the plate, and article.php now skips
   the plate to stop the title printing twice - so the eyebrow is rendered
   by the page itself and styled to match .bico-eyebrow. */
.article-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin: 0 0 .55rem;
}

/* ---- running text ------------------------------------------ */

.article-body > :first-child { margin-top: 0; }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
  text-wrap: balance;
  margin: 2.2rem 0 .7rem;
}
.article-body h1 { font-size: 1.9rem; }
.article-body h2 {
  font-size: 1.45rem;
  color: var(--gold);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.article-body h3 { font-size: 1.2rem; }
.article-body h4 { font-size: 1.05rem; color: var(--text-secondary); }

.article-body p { margin: 0 0 1.1rem; }

.article-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--text-primary); }

.article-body ul,
.article-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.article-body li { margin: 0 0 .4rem; }

.article-body blockquote {
  margin: 1.4rem 0;
  padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--gold-soft);
  color: var(--text-secondary);
  font-style: italic;
}

.article-body code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .08em .35em;
}

.article-body hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .95rem;
}
.article-body th,
.article-body td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border);
}
.article-body th {
  font-family: var(--font-display);
  color: var(--gold);
  font-weight: 600;
}

/* Wide content must scroll in its own box rather than pushing the page. */
.article-body .scroll-x { overflow-x: auto; }

/* ---- images ------------------------------------------------- */

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.Article-Image-left,
.Article-Image-right {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 1.4rem 0;
}
.Article-Image-left  { justify-content: flex-start; }
.Article-Image-right { flex-direction: row-reverse; }

.Article-Image-left img,
.Article-Image-right img {
  max-width: 260px;
  min-width: 120px;
  border: 2px solid var(--gold-soft);
  border-radius: 8px;
  cursor: zoom-in;
}

.Article-image-Left-container { flex-shrink: 0; }
.Article-image-Left-container img {
  height: 200px;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .Article-Image-left,
  .Article-Image-right { flex-direction: column; gap: .9rem; }
  .Article-Image-left img,
  .Article-Image-right img { max-width: 100%; }
}

/* ---- embedded map ------------------------------------------- */

.map-embed {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  margin: 1.2rem 0;
  border: 2px solid var(--gold-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-0);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- glossary tabs ------------------------------------------ */

#glossary-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 1.4rem;
}
#glossary-tabs button {
  font-family: var(--font-display);
  font-size: .9rem;
  padding: .45rem .9rem;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
#glossary-tabs button:hover {
  border-color: var(--gold-soft);
  color: var(--text-primary);
}
#glossary-tabs button.active,
#glossary-tabs button[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--surface-0);
  font-weight: 600;
}

/* ---- image zoom overlay ------------------------------------- */

#image-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 6, 16, .88);
  justify-content: center;
  align-items: center;
  padding: 3vmin;
}
#image-zoom-overlay.active { display: flex; }

#zoom-image-wrapper { position: relative; max-width: 94vw; max-height: 94vh; }
#zoomed-img {
  max-width: 94vw;
  max-height: 94vh;
  border-radius: 8px;
  border: 2px solid var(--gold-soft);
  display: block;
}
#zoom-close-button {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
}
#zoom-close-button:hover { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  #glossary-tabs button { transition: none; }
}

/* ---- the article's own title --------------------------------
   With the plate gone this h1 is the page's only one, so it carries the
   page title rather than reading as another body heading. Same gold
   lettering as the front page wordmark and the rules hero.

   The gradient only applies where background-clip:text is supported, and
   the plain colour is declared first - so the failure mode is a duller
   heading, never an invisible one. That trap has been sprung here before.
   ------------------------------------------------------------ */

.article-body h1 {
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  color: #f2e0b0;
  letter-spacing: .012em;
  margin: 0 0 1.4rem;
  padding-bottom: .55rem;
  position: relative;
  text-shadow: 0 0 30px rgba(232, 198, 112, .2);
  border-bottom: 1px solid var(--a-line, #2c3a63);
}
.article-body h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .article-body h1 {
    width: max-content;
    max-width: 100%;
    background: linear-gradient(176deg, #fff6dd 0%, #f4dfa6 46%, #e8c670 72%, #cba24d 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* ---- previous / next ----------------------------------------
   A section is a numbered course and every article used to dead-end, so
   the sidebar was the only way onward. Mirrors the rules pager.

   Laid out so a lone "Next" still sits on the right: margin-left:auto on
   the next link handles the first article, where there is no previous.
   ------------------------------------------------------------ */

.article-pager {
  display: flex;
  gap: 1rem;
  margin: 2.2rem 0 0;
  max-width: calc(68ch + clamp(1.25rem, 3.2vw, 2.4rem) * 2);
}

.article-pager a {
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  max-width: 47%;
  padding: .65rem 1.05rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(3, 7, 20, .4);
  transition: border-color .13s ease, transform .13s ease, box-shadow .13s ease;
}
.article-pager a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 7, 20, .4), 0 0 20px rgba(232, 198, 112, .14);
}

.article-pager-next {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.article-pager-dir {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.article-pager-t {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .article-pager { flex-direction: column; }
  .article-pager a { max-width: 100%; }
  .article-pager-next { margin-left: 0; text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .article-pager a { transition: none; }
  .article-pager a:hover { transform: none; }
}