/* DEBUG-CSS-WIRED 2026-01-05 
body::before{
  content:"CSS WIRED: style.css is LIVE (2026-01-05)";
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999999;
  padding:10px 12px;
  font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:#ff00ff;
  color:#000;
}*/

/* Theme overrides for Ghost-rendered content (keep Webstudio export untouched) */

/* 1) Make Ghost content inherit the site font */
.gh-content,
.gh-content * {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 2) Keep images/embeds responsive inside Ghost content */
.gh-content img,
.gh-content video,
.gh-content iframe {
  max-width: 100%;
  height: auto;
}

/* Veil page header (small eye top-right like Webstudio) */
.veil-page-header {
  display: flex;
  justify-content: flex-end;
  padding: 0px 60px 0 60px; /* top/right/bottom/left */
}

.veil-eye {
  width: 120px;
  height: auto;
  display: block;
}

/* Reduce the gap between eye/header area and the page title/content */
.w-element.c1qnz4w9.ca2x8uf.c6r62ox {
  margin-top: 0px !important;
}

/* Remove top margin from first text block on content pages */
.w-element.c1ohoxhl p:first-child {
  margin-top: 0 !important;
}

.w-element.c1ohoxhl p {
  margin-bottom: 1.2em;
}

/* Kill the big gap after the eye header */
.veil-page-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.veil-page-header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also kill top margin of the first child inside that next block */
.veil-page-header + * > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* tighten gap under the pink header */
#veil-header { margin-bottom: 0 !important; }

/* kill default top margin of first paragraph in content */
#veil-content > p:first-child,
.gh-content > p:first-child { margin-top: 0 !important; }

/* Fix the annoying gap between the pink header (title) and the first content block */
.gh-content > :first-child {
  margin-top: 0 !important;
}

/* Optional: tighten paragraph spacing a bit across content */
.gh-content p {
  margin-top: 0;
}

.veil-subtitle {
  margin-top: 0;      /* kill the default <p> gap */
  margin-bottom: 0;   /* optional: keep it tight */
}

/* Remove the annoying gap right after the subtitle */
.gh-content > *:first-child {
  margin-top: 0 !important;
}

/* --- Veil spacing overrides (kill the giant gaps) --- */
#veil-main .veil-subtitle,
#veil-main .veil-subtitle.w-element {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

#veil-main .gh-content,
#veil-main .gh-content.w-element {
  margin-top: 0 !important;
}

#veil-main .gh-content > p:first-of-type,
#veil-main .gh-content > p:first-of-type.w-element {
  margin-top: 0 !important;
}

/* --- Veil header block --- */
.veil-header-block {
  margin-bottom: 2.5rem;
}

.veil-title {
  font-weight: 700;
  color: #ff5c8a;
  margin-bottom: 0.75rem;
}

.veil-subtitle {
  font-style: italic;
  margin-bottom: 0.5rem;
}

.veil-backlink {
  font-size: 0.9rem;
  text-decoration: none;
  color: #000;
}

.veil-backlink:hover {
  text-decoration: underline;
}

/* --- FIX: Webstudio global whitespace breaks Ghost templates --- */
:root {
  white-space: normal !important;
  white-space-collapse: collapse !important;
}

/* Also keep Ghost pages predictable */
body {
  white-space: normal !important;
}
/* --- Veil patches: stop "full viewport height" pushing content down --- */
#wrapper_main {
  height: auto !important;
  min-height: 0 !important;
}

/* Center the big logo block */
#wrapper_main .c15hcps {
  display: flex;
  justify-content: center;
}

#wrapper_main .c15hcps img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed centered logo, with controlled gap from content */
#wrapper_main .c15hcps{
  margin-top: 40px;                 /* the gap you want */
  width: 100vw;                      /* use the full browser width */
  position: relative;
  left: 50%;
  transform: translateX(-50%);       /* center that 100vw block in the viewport */
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* === Veil page: keep content tight + center big logo in the viewport === */

/* Prevent the last content element from creating a giant buffer */
#wrapper_main .gh-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Big logo: centered like on homepage, with a controlled gap */
#wrapper_main .c15hcps {
  margin-top: 40px !important;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Center + keep size sane */
#wrapper_main .c15hcps img {
  display: block;
  height: auto;
  max-width: 1200px;   /* tweak to taste */
  width: 100%;
}


/* Keep the image sane */
#wrapper_main .c15hcps img {
  display: block;
  height: auto;
  max-width: 1200px;   /* adjust if you want it even bigger */
  width: 100%;
}


/* Reduce extra bottom spacing inside Ghost content, if any */
.gh-content,
.gh-content > *:last-child {
  margin-bottom: 0 !important;
}

/* About/page template: center big logo reliably */
#veil-big-logo {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
}

#veil-big-logo-img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 1200px; /* adjust if needed */
}

/* Latin motto below main copy */
#latin-motto {
  display: flex;
  justify-content: center;
  margin-top: 40px;   /* gap from copy */
  margin-bottom: 0;
}

#latin-motto-img {
  display: block;
  max-width: 900px;   /* adjust if needed */
  width: 100%;
  height: auto;
}

/* =========================
   PHONE BREAKPOINT (<= 479px)
   ========================= */
@media (max-width: 479px) {

  /* Kill Webstudio's "min-width: 1000px" style */
  #wrapper_main,
  #veil-wrap {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reduce the giant side padding */
  #wrapper_main,
  #veil-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Top eye: keep it sane on phones */
  .veil-page-header {
    padding-top: 24px !important;
  }
  .veil-eye {
    width: 84px !important;
    height: auto !important;
  }

  /* Headline + subtitle spacing */
  #veil-header,
  .veil-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  .veil-subtitle {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Main content column should be full width */
  #veil-main,
  #veil-content,
  .gh-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent long words/URLs from exploding layout */
  .gh-content {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Motto image centered & not gigantic */
  #latin-motto,
  .latin-motto {
    display: flex !important;
    justify-content: center !important;
    margin-top: 24px !important;
  }
  #latin-motto img,
  .latin-motto img {
    max-width: 92% !important;
    height: auto !important;
  }

  /* Footer spacing */
  .c1m2eyde,
  #copyright {
    margin-top: 24px !important;
  }
}

/* Ghost-editor sidebar links: match original Webstudio headline link styling */
.home-sidebar a {
  color: #ff5c8a;
  font-weight: 700;
  font-size: 24px;
  text-decoration: underline;
}

/* Explore cards: enforce IBM Plex Mono + Veil styling */
.explore-card, .explore-card * {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.explore-card__box {
  border: 2px solid #ff5c8a;
  padding: 18px;
  margin-right: 24px;
  margin-bottom: 24px;
  min-height: 210px;
}
.explore-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.explore-card__title {
  font-weight: 700;
  color: #000;
}
.explore-card__unread {
  color: #ff5c8a;
  font-size: 14px;
}
.explore-card__summary {
  margin-top: 10px;
  color: #000;
}
.explore-card__confidence {
  margin-top: 10px;
  color: #000;
  font-style: italic;
}

/* Global typography: IBM Plex Mono everywhere (logos remain images) */
html, body {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Explore cards: styling + confidence formatting */
.explore-card__box {
  border: 2px solid #ff5c8a;
  padding: 18px;
  margin-right: 24px;
  margin-bottom: 24px;
  min-height: 210px;
}
.explore-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.explore-card__title {
  font-weight: 700;
  color: #000;
}
.explore-card__unread {
  color: #ff5c8a;
  font-size: 14px;
}
.explore-card__summary {
  margin-top: 10px;
  color: #000;
}
.explore-card__confidence {
  margin-top: 10px;
  color: #000;
  font-style: italic;
}
.explore-card__confidence .conf-label {
  margin-right: 6px;
}
.explore-card__confidence .conf-part + .conf-part::before {
  content: " to ";
}
.explore-card__confidence .conf-dot {
  margin-left: 0;
}

/* Explore confidence formatting tweaks */
.explore-card__confidence {
  margin-top: 14px; /* gap between summary and confidence */
  font-style: normal; /* not italic */
}
.explore-card__confidence .conf-label {
  font-weight: 400; /* "Confidence level:" regular */
}
.explore-card__confidence .conf-part {
  font-weight: 700; /* low/moderate/high bold */
}
.explore-card__confidence .conf-dot {
  font-weight: 400;
}

/* Explore grids: responsive layout */
.explore-grid { display: grid; gap: 24px; }
.explore-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.explore-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .explore-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .explore-grid--2, .explore-grid--4 { grid-template-columns: 1fr; } }

/* Remove per-card margins (grid handles spacing) */
.explore-card__box { margin-right: 0; margin-bottom: 0; }

/* Explore layout tweaks */
.explore-card__box {
  min-height: 220px; /* fixed-ish height baseline */
  display: flex;
  flex-direction: column;
}
.explore-card__summary { flex: 1 1 auto; }
.explore-card__confidence { margin-top: auto; padding-top: 18px; }

/* Bigger gap between Transmissions and Before The Erasure */
h2 + h2 { margin-top: 48px; }

/* Normalize explore card grid across all sections */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Responsive: single column on small screens */
@media (max-width: 900px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }
}

/* Explore: spacing + filter row styling */

/* 1) Triple the gap between "Transmissions" and "Before The Erasure" */
/* This targets the "Before The Erasure" heading when it follows the Transmissions heading */
h2 + h2 { margin-top: 96px; }

/* 2) Keep artifact list in one row; wrap only when forced by viewport */
.explore-artifactbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: baseline;
}
.explore-artifactbar a {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .explore-artifactbar { flex-wrap: wrap; }
}

/* 3) Artifact link colors: default gray, active pink */
.explore-artifactbar a { color: #9a9a9a; font-weight: 400; text-decoration: none; }
.explore-artifactbar a.is-active { color: #ff5c8a; font-weight: 700; }
.explore-artifactbar a:hover { text-decoration: underline; }

/* Explore: artifact bar one-row behavior + active color */
.explore-artifactbar{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:baseline;
  white-space:nowrap;
}
.explore-artifactbar .sep{ color:#9a9a9a; }
.explore-artifactbar a{
  color:#9a9a9a;
  font-weight:400;
  text-decoration:none;
}
.explore-artifactbar a.is-active{
  color:#ff5c8a;
  font-weight:700;
}
.explore-artifactbar a.is-disabled{ cursor:default; }
.explore-artifactbar a.is-disabled:hover{ text-decoration:none; }
@media (max-width:560px){
  .explore-artifactbar{ flex-wrap:wrap; white-space:normal; }
}

/* Explore: triple gap between Transmissions and Before The Erasure */
.explore-gap-lg{ height:96px; }


/* Rhythm tweaks */
.explore-gap-lg{ height:72px; }          /* was 96px: slightly reduced */
.explore-section-gap{ height:48px; }     /* new: extra space before Transmissions */


/* Rhythm fixes (CSS only, no injected divs) */
.explore-gap-lg{ height:72px; } /* slightly reduced from 96px */

/* Add breathing room BEFORE "Transmissions" heading */
b.w-element.c1qnz4w9.ca2x8uf.c6r62ox{
  display:block;
  margin-top:56px;
}

/* But dont
/* === EXPLORE RHYTHM FIXES (SAFE) === */

/* 1) More space after System Messages grid */
.explore-grid--2 {
  margin-bottom: 64px;
}

/* 2) Reduce space BEFORE "Before The Erasure" */
.explore-heading-before {
  margin-top: 32px;
}

/* 3) Ensure Transmissions itself does NOT get extra margin */
.explore-heading-transmissions {
  margin-top: 0;
}

/* =========================
   EXPLORE NAV (top links)
   Goal:
   - one row by default
   - wraps only on smaller widths
   - all medium gray except first item pink
   ========================= */

/* Target the line that contains: "Textual Artifacts | Audio Artifacts | ..." */
/* This is intentionally a bit broad to avoid template edits on step 1. */
body .explore-nav,
body .explore-nav * {
  color: #9a9a9a; /* medium gray */
}

/* If the nav is a container (recommended), enforce single-line behavior */
body .explore-nav {
  display: flex;
  flex-wrap: nowrap;          /* stay on one line */
  gap: 10px;
  white-space: nowrap;        /* prevents accidental breaks */
  align-items: baseline;
}

/* Make links inline and prevent awkward wrapping inside each item */
body .explore-nav a,
body .explore-nav span {
  display: inline;
  white-space: nowrap;
}

/* Only the first nav item is pink */
body .explore-nav a:first-of-type {
  color: #ff2b78; /* your pink */
}

/* On smaller screens, allow wrapping */
@media (max-width: 700px) {
  body .explore-nav {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* =========================
   POST STYLING (System Notes)
   Goal: match your “should look like” screenshot:
   - readable column width
   - sane type scale
   - clean spacing
   - mono vibe retained
   ========================= */

body .gh-content,
body .post-content,
body .content-body {
  max-width: 980px;
  margin-left: 0;             /* keep your left-aligned layout */
  margin-right: auto;
  line-height: 1.55;
  font-size: 18px;
}

/* Headline scale like your mock */
body .gh-content h1,
body .post-content h1,
body .content-body h1 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px 0;
  letter-spacing: 0.5px;
}

/* Subheads */
body .gh-content h2,
body .post-content h2,
body .content-body h2 {
  font-size: 22px;
  margin: 28px 0 10px 0;
}

/* Paragraph spacing */
body .gh-content p,
body .post-content p,
body .content-body p {
  margin: 0 0 14px 0;
}

/* Keep that “system note” dryness: make code/pre behave */
body .gh-content pre,
body .post-content pre,
body .content-body pre,
body .gh-content code,
body .post-content code,
body .content-body code {
  font-size: 0.95em;
}

/* Optional: soften the “raw HTML dump” look if Ghost is injecting odd widths */
body .gh-content * {
  max-width: 100%;
}

/* ===== PATCH: Explore top nav (2026-01-05) =====
   Goal (CSS-only):
   - keep nav in one row by default
   - medium gray text
   Note: "only first item pink" requires ONE markup hook later because nav is one text span.
*/

span.w-element.cbn33kb{
  display:block;
  white-space:nowrap;
  color:#9a9a9a;
}

@media (max-width: 700px){
  span.w-element.cbn33kb{ white-space:normal; }
}


/* ===== PATCH: Explore nav active item pink (2026-01-05) ===== */
span.w-element.cbn33kb { color:#9a9a9a; }               /* medium gray baseline */
span.w-element.cbn33kb .explore-nav__active { color:#ff2b78; } /* pink primary */


/* ===== PATCH: Post page typography + layout (2026-01-05) =====
   Goal: opened posts look like the “good” system-note page:
   - readable left-aligned column
   - consistent spacing
   - controlled heading scale
*/

/* Common Ghost content wrappers (covers most themes/templates) */
.gh-content,
.post-content,
.content-body,
.post-full-content,
article .content,
article .post-content,
.kg-content {
  max-width: 980px;
  margin-left: 0;
  margin-right: auto;
  padding-right: 24px; /* keeps it from kissing the edge */
  line-height: 1.55;
  font-size: 18px;
}

/* H1 like your bold system-note headline */
.gh-content h1,
.post-content h1,
.content-body h1,
.post-full-content h1,
.kg-content h1 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px 0;
  letter-spacing: 0.5px;
}

/* Subheads */
.gh-content h2,
.post-content h2,
.content-body h2,
.post-full-content h2,
.kg-content h2 {
  font-size: 22px;
  margin: 28px 0 10px 0;
}

/* Paragraph rhythm */
.gh-content p,
.post-content p,
.content-body p,
.post-full-content p,
.kg-content p {
  margin: 0 0 14px 0;
}

/* Lists: keep them clean */
.gh-content ul, .gh-content ol,
.post-content ul, .post-content ol,
.kg-content ul, .kg-content ol {
  margin: 0 0 14px 1.2em;
}

/* Prevent media from breaking layout */
.gh-content img, .gh-content video,
.post-content img, .post-content video,
.kg-content img, .kg-content video {
  max-width: 100%;
  height: auto;
}

/* Code blocks: readable but not huge */
.gh-content pre, .gh-content code,
.post-content pre, .post-content code,
.kg-content pre, .kg-content code {
  font-size: 0.95em;
}


/* ===== PATCH: artifact-content post typography (2026-01-05) ===== */
article.artifact-content{
  max-width: 980px;
  margin-left: 0;
  margin-right: auto;
  padding-right: 24px;
  font-size: 18px;
  line-height: 1.55;
}

/* If your template uses only <p> inside, normalize spacing */
article.artifact-content p{
  margin: 0 0 14px 0;
}


/* ===== PATCH: Center artifact-content column (2026-01-05) ===== */
article.artifact-content{
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== PATCH: Post title block + subtitle (2026-01-05) ===== */

/* Center the title + subtitle block */
#main h1,
#main h1 + p {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Title spacing */
#main h1 {
  margin-bottom: 12px;
}

/* Subtitle styling: first paragraph after h1 */
#main h1 + p {
  color: #ff2b78;          /* pink subtitle */
  margin-bottom: 28px;
}


/* ===== PATCH: Artifact post layout final (2026-01-05) ===== */

/* Center the whole artifact post column (title header + article body) */
header:has(+ article.artifact-content),
article.artifact-content{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Pink subtitle */
p.excerpt{
  color: #ff2b78;
}

/* Slightly nicer spacing between title block and body */
p.excerpt{
  margin-bottom: 28px;
}


/* ===== PATCH: Remove title indent (2026-01-05) ===== */

/* Kill any left padding/margin sneaking in via header */
header:has(+ article.artifact-content){
  padding-left: 0 !important;
}

/* Normalize title margin */
header:has(+ article.artifact-content) h1{
  margin-left: 0 !important;
}


/* ===== PATCH: Force H1 flush-left (2026-01-05) ===== */
header:has(+ article.artifact-content) h1{
  padding-left: 0 !important;
  text-indent: 0 !important;
  transform: none !important;
}


/* ===== PATCH: Align H1 column box with body (2026-01-05) ===== */
header:has(+ article.artifact-content) h1{
  display: block !important;
  max-width: 980px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== PATCH: Align title block with body via wrapper_main (2026-01-05) ===== */
.wrapper_main header,
.wrapper_main header h1,
.wrapper_main header .excerpt,
.wrapper_main article.artifact-content{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wrapper_main header{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wrapper_main header h1{
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* ===== DEBUG: show boxes for title vs body alignment (REMOVE LATER) ===== */
h1{ outline: 2px solid #00aaff !important; }
article.artifact-content{ outline: 2px solid #ff2b78 !important; }
p.excerpt{ outline: 2px solid #00cc66 !important; }


/* ===== PATCH: Align article body with title (remove left padding) ===== */
article.artifact-content{
  padding-left: 0 !important;
}


/* ===== PATCH: Kill any left offset inside artifact body (2026-01-05) ===== */
article.artifact-content{
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

article.artifact-content > p{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}


/* ===== PATCH: Align artifact header + body left edge (2026-01-05) ===== */
main.artifact{
  padding-left: 0 !important;
}

main.artifact > header,
main.artifact > article.artifact-content{
  padding-left: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 980px !important;
}


/* ===== PATCH: Deliberate artifact gutter (tune once) ===== */
main.artifact{
  --artifact-gutter: 0px;  /* change this number if you want a deliberate indent */
}

main.artifact > header,
main.artifact > article.artifact-content{
  padding-left: var(--artifact-gutter) !important;
}


/* ===== PATCH: Make artifact article match header column (2026-01-05) ===== */
body.post-template main.artifact > article.artifact-content{
  max-width: 980px !important;
  width: 980px !important;        /* ensures it can’t “stretch wider” */
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1020px){
  body.post-template main.artifact > article.artifact-content{
    width: auto !important;       /* responsive */
    max-width: calc(100% - 40px) !important;
  }
}


/* ===== CLEANUP: remove debug outlines (2026-01-05) ===== */
h1,
article.artifact-content,
p.excerpt{
  outline: none !important;
}


/* ===== Artifact UI polish (2026-01-05) ===== */

/* Container */
.artifact{
  position: relative;
}

/* Top-left UI cluster */
.artifact-ui{
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 20;
  font-size: 14px;
}

/* Replace inline SVG eye with real asset */
.artifact-eye{
  width: 36px;
  height: 36px;
  background-image: url("/assets/images/logo_eye_2x_FGY5im8XgVloeduAHb4Pd.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

/* Hide the inline SVG visually but keep DOM clean */
.artifact-eye svg{
  display: none;
}

/* Back link */
.artifact-back{
  color: #ff5c8a;
  text-decoration: none;
  font-weight: 500;
}

.artifact-back:hover{
  text-decoration: underline;
}

/* Floating back-to-top */
.artifact-top{
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  background: #ff5c8a;
  color: #fff;
  text-align: center;
  line-height: 44px;
  text-decoration: none;
  font-weight: bold;
  z-index: 30;
}

.artifact-top:hover{
  background: #e94a77;
}

/* Footer */
.artifact-footer{
  margin-top: 80px;
  font-size: 13px;
}

.artifact-footer a{
  color: #ff5c8a;
  text-decoration: none;
}

.artifact-footer a:hover{
  text-decoration: underline;
}

/* Give content breathing room so UI doesn’t overlap */
main.artifact > header{
  margin-top: 80px;
}


/* ===== Artifact UI alignment fix (2026-01-05) ===== */

/* Make the UI live in the same centered column as the content */
.artifact-ui{
  position: relative !important;
  top: auto !important;
  left: auto !important;

  max-width: 980px !important;
  margin: 28px auto 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Bigger eye (~50% feel) */
.artifact-eye{
  width: 64px !important;
  height: 64px !important;
  background-size: contain !important;
}

/* Don’t push header down now that UI is in flow */
main.artifact > header{
  margin-top: 28px !important;
}

/* Keep back link clean */
.artifact-back{
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Keep footer in the same column */
.artifact-footer{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Artifact UI final tweaks (2026-01-05) ===== */

/* Eye: a bit larger (~75% feel) */
.artifact-eye{
  width: 80px !important;
  height: 80px !important;
}

/* Remove the "to top" control entirely */
.artifact-top{
  display: none !important;
}

/* Back link should live below the excerpt with a ~40px gap */
.artifact-ui{
  display: block !important;     /* stop flex */
  margin-top: 0 !important;      /* we’ll place it via the excerpt */
}

.artifact-back{
  display: inline-block !important;
  margin-top: 40px !important;
}

/* Place the UI after the excerpt visually */
main.artifact > header{
  position: relative;
}

/* Put the eye above the title, aligned to the column left edge */
.artifact-eye{
  display: block !important;
  margin: 8px 0 18px 0 !important;
}

/* Ensure back aligns with the column and sits under excerpt */
.artifact-ui{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Final Back-link placement (2026-01-05) ===== */

/* Move Back link visually below the excerpt */
.artifact-back{
  position: relative !important;
  top: 52px !important;        /* pushes it below the excerpt */
  margin-bottom: 52px !important;
}

/* Keep eye visually anchored above the title */
.artifact-eye{
  position: relative !important;
  top: 0 !important;
}


/* ===== Back link: proper placement under excerpt (2026-01-05) ===== */
.artifact-back{
  position: static !important;
  display: inline-block !important;
  margin-top: 40px !important;
  top: auto !important;
  margin-bottom: 0 !important;
}


/* ===== Final artifact header layout ===== */

.artifact-header{
  max-width: 980px;
  margin: 40px auto 0 auto;
}

.artifact-eye{
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  background-image: url("/assets/images/logo_eye_2x_FGY5im8XgVloeduAHb4Pd.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.artifact-back{
  display: inline-block;
  margin-top: 40px;
  color: #ff5c8a;
  text-decoration: none;
}

.artifact-back:hover{
  text-decoration: underline;
}


/* ===== Back link: final typographic correction ===== */

/* Ensure excerpt ends cleanly */
.artifact-header .excerpt{
  margin-bottom: 48px;   /* clear visual break after meta */
}

/* Back is navigation, not prose */
.artifact-back{
  display: block;
  margin: 0 0 48px 0;    /* space before body text */
  font-size: 14px;
  line-height: 1;
}

/* Ensure body text never wraps around it */
.artifact-content{
  clear: both;
}


/* ===== Back link: gap below, not above (2026-01-05) ===== */

.artifact-header .excerpt{
  margin-bottom: 12px !important;   /* keep excerpt tight to Back */
}

.artifact-back{
  display: inline-block !important;
  margin-top: 0 !important;         /* no extra space above Back */
  margin-bottom: 40px !important;   /* the gap belongs here */
  font-size: 14px !important;
  line-height: 1 !important;
}


/* ===== CANONICAL: Artifact header spacing (FINAL) ===== */
/* Keep Back directly under excerpt, with breathing room BELOW Back */

main.artifact > header.artifact-header .excerpt{
  margin: 0 0 12px 0 !important;
}

main.artifact > header.artifact-header .artifact-back{
  display: inline-block !important;
  margin: 0 0 40px 0 !important;   /* gap below */
  position: static !important;
  top: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
}


/* ===== Floating TOP button (bottom-right) ===== */
.artifact-top{
  display: block !important;
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 44px !important;
  height: 44px !important;
  background: #ff5c8a !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 44px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  z-index: 9999 !important;
}

.artifact-top:hover{
  filter: brightness(0.95);
}


/* ===== Balance: move TOP button + footer to the right (2026-01-05) ===== */

/* Top button: bottom-right */
.artifact-top{
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
}

/* Footer: align to column, but text on the right */
.artifact-footer{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: right !important;
}


/* ===== Anchor TOP button to artifact container (2026-01-05) ===== */

/* Create a positioning context */
main.artifact{
  position: relative !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Button now sits bottom-right of the container */
.artifact-top{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;

  /* undo viewport-sticky props */
  left: auto !important;
}


/* ===== Artifact footer layout (final, sane version) ===== */

.artifact-footer{
  max-width: 980px;
  margin: 80px auto 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Copyright */
.artifact-footer a{
  font-size: 14px;
  color: #ff5c8a;
  text-decoration: none;
}

.artifact-footer a:hover{
  text-decoration: underline;
}

/* Top button */
.artifact-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  background: #ff5c8a;
  color: #fff;
  font-size: 16px;
  text-decoration: none;

  /* kill any earlier floating behavior */
  position: static !important;
}


/* ===== Footer: stack right, TOP above copyright (2026-01-05) ===== */
.artifact-footer{
  max-width: 980px !important;
  margin: 80px auto 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;   /* right edge */
  gap: 12px !important;
  text-align: right !important;
}

/* Only style the copyright link as text */
.artifact-footer a:not(.artifact-top){
  font-size: 14px !important;
  color: #ff5c8a !important;
  text-decoration: none !important;
}

.artifact-footer a:not(.artifact-top):hover{
  text-decoration: underline !important;
}

/* Ensure the TOP button keeps its box look */
.artifact-top{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  background: #ff5c8a !important;
  color: #fff !important;
  font-size: 16px !important;
  text-decoration: none !important;

  position: static !important;
}


/* ===== FORCE artifact-top into footer flow (FINAL) ===== */
.artifact-footer{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Kill any old positioning that pins the button */
.artifact-footer .artifact-top{
  position: static !important;
  float: none !important;
  clear: none !important;

  align-self: flex-end !important; /* RIGHT */
  order: -1 !important;            /* ABOVE copyright */

  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 0 12px 0 !important;

  background: #ff5c8a !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ===== Artifact footer (FINAL, DONE) ===== */

.artifact-footer{
  max-width: 980px;
  margin: 80px auto 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* right edge */
  gap: 12px;
}

/* Top button */
.artifact-top{
  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #ff5c8a;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

/* Copyright */
.artifact-copyright{
  font-size: 14px;
  color: #ff5c8a;
  text-decoration: none;
}

.artifact-copyright:hover{
  text-decoration: underline;
}

/* ===== EXPLORE: 4-column grid on desktop (2026-01-05) ===== */

.explore-grid.explore-grid--2{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

/* 2 columns on medium screens */
@media (max-width: 1100px){
  .explore-grid.explore-grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 1 column on small screens */
@media (max-width: 680px){
  .explore-grid.explore-grid--2{
    grid-template-columns: 1fr !important;
  }
}

/* ===== EXPLORE HEADER + FOOTER ALIGNMENT (2026-01-05) ===== */

/* Constrain Explore header to the same column as content */
.explore-page .wrapper_main{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Eye logo: top-left of the content column */
.explore-page .logo-eye,
.explore-page .eye,
.explore-page img[src*="logo_eye"]{
  position: absolute;
  top: -64px;
  left: 0;
  width: 48px;
  height: auto;
}

/* Copyright aligned to the far right of the same container */
.explore-page .explore-footer,
.explore-page .footer,
.explore-page .copyright{
  max-width: 980px;
  margin: 80px auto 0 auto;
  text-align: right;
}

/* Ensure link styling stays clean */
.explore-page .copyright a{
  color: #ff5c8a;
  font-size: 14px;
  text-decoration: none;
}

.explore-page .copyright a:hover{
  text-decoration: underline;
}

/* === EXPLORE OVERRIDES START (managed block) === */

/* Eye logo top-left */
.explore-eye{
  position: absolute;
  top: 40px;
  left: 40px;
  display: inline-block;
  line-height: 0;
}

.explore-eye img{
  width: 72px;   /* ~75% vibe, tweak later */
  height: auto;
  display: block;
}

/* Footer link aligned to the right edge of the main column */
.explore-footer{
  max-width: 980px;
  margin: 80px auto 0 auto;
  text-align: right;
}
.explore-footer a{
  font-size: 14px;
  color: #ff5c8a;
  text-decoration: none;
}
.explore-footer a:hover{
  text-decoration: underline;
}

/* === EXPLORE OVERRIDES END (managed block) === */

/* === EXPLORE OVERRIDES START (managed block) === */

/* Make wrapper the containing block for absolute positioning */
#wrapper_main{
  position: relative !important;
}

/* Eye logo top-left (hard clamp size) */
.explore-eye{
  position: absolute !important;
  top: 40px !important;
  left: 40px !important;
  display: inline-block !important;
  line-height: 0 !important;
}

.explore-eye img{
  display: block !important;
  width: 72px !important;
  height: auto !important;
  max-width: 72px !important;
}

/* Footer link aligned to the right edge of the main column */
.explore-footer{
  max-width: 980px !important;
  margin: 80px auto 0 auto !important;
  text-align: right !important;
}

.explore-footer a{
  font-size: 14px !important;
  color: #ff5c8a !important;
  text-decoration: none !important;
}

.explore-footer a:hover{
  text-decoration: underline !important;
}

/* === EXPLORE OVERRIDES END (managed block) === */