:root{
  --bar-green: #7AC488;
  --offwhite: #ffffff;
  --ink-strong: #111;
  --node-blue: #0077ff;
  --canvas-bg: #f8f8f8;
  --path-stroke: #aaa;
  --footer-text: var(--ink-strong);
  --worklink-w: 300px;

  --faint: 0.15;
  --faint-secondary: 0.20;
  --idle-secondary: 0.40;
  --header-h: 36px;
}
.theme-dark{
  --bar-green: #000000;
  --offwhite: #0e0e10;
  --ink-strong: #ffffff;
  --footer-text: #ffffff;
  --node-blue: #70a7ff;
  --canvas-bg: #14171b;
  --path-stroke: #4a4f57;
  --faint: 0.28;
  --faint-secondary: 0.35;
  --idle-secondary: 0.40;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--canvas-bg);
  font-family: "Times New Roman", serif; cursor: grab;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#world { position: absolute; width: 4000px; height: 2500px; transform: translate(0,0); touch-action: none; }

/* ======= MOBILE HEADER (mirrors footer look) ======= */
#header-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--bar-green); color: var(--footer-text);
  display: none; z-index: 10001;
}
#header-row {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 0 12px;
}
#header-left, #header-right { display: flex; align-items: center; }
#header-left { justify-content: flex-start; }
#header-right { justify-content: flex-end; }
#header-bar .btn {
  background: transparent; border: none; cursor: pointer;
  font: 100 16px "Times New Roman", serif; color: var(--footer-text); line-height: var(--header-h);
  padding: 0;
}
@media (max-width: 640px){
  #header-bar { display: block; }
  /* keep world underneath header; we simply overlay (no layout shift) */
}

/* Base nodes */
.node {
  position: absolute; font-size: 18px; color: #111; white-space: nowrap;
  opacity: 0; transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: text; cursor: text;
  pointer-events: none;
}
.node.visible { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Dark-mode force for node content */
.theme-dark .node { color: #fff; }
.theme-dark .node * { color: inherit; }

/* Poster desc, raw nodes, poems: ensure white in dark */
.theme-dark .card-body,
.theme-dark .node.raw,
.theme-dark .node.raw *,
.theme-dark .textnote .poem,
.theme-dark .poster-desc { color: #fff !important; }

/* ===== Underlines (consistent, close to text) ===== */
/* Interactive nodes (e.g., "poetry", "to hear about your next project") */
.node.interactive {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer; user-select: none;
  border-bottom: none;
}
.theme-dark .node.interactive { color: #fff; }

/* Links: external/canvas + footer deep links */
.footer-col a.deep-link,
.node a.external,
 #node-instagram a {
  color: inherit;
  /* footer URLs should use dashed underlines; canvas external links will use a simpler hover underline */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  border-bottom: none;
  padding-bottom: 0;
  line-height: normal;
}
.theme-dark .footer-col a.deep-link,
.theme-dark .node a.external,
.theme-dark #node-instagram a { color: #fff; }

/* If dotted not supported, fallback */
@supports not (text-decoration-style: dotted) {
  .footer-col a.deep-link,
  .node a.external,
  #node-instagram a,
  .node.interactive {
    text-decoration: none !important;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 0;
    line-height: normal;
  }
}

/* Keep default link color rules minimal (dark handled above) */
.node a { cursor: pointer; }

/* External links inside canvas: no underline by default, simple underline on hover */
.node a.external,
.node a.external:link,
.node a.external:visited {
  text-decoration: none;
}
.node a.external:hover,
.node a.external:focus {
  text-decoration: underline solid 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* Remove underline from portfolio node (explicit) */
#node-portfolio { text-decoration: none !important; }

/* Add left padding to the about header link */
#about-link { padding-left: 33px; }

/* Poster description — plain text */
.node.poster-desc {
  max-width: 420px; white-space: normal; background: transparent; border: none; padding: 0;
  font-size: 16px; line-height: 1.1; color: inherit;
    margin-top: 24px;
}
.card-body { font-size: 16px; line-height: 1.1; margin: 0; color: inherit; }

/* Poetry */
.node.textnote { max-width: 520px; white-space: normal; background: transparent; border: none; padding: 0; position: absolute; color: inherit; }
.textnote h1 { margin: 0 0 10px 0; font-size: 17px; font-weight: 100; text-transform: uppercase; color: inherit; letter-spacing: 0.12em; }
.textnote .poem { font-size: 16px; line-height: 1.5; white-space: pre-wrap; color: inherit; }
.theme-dark .textnote h1 { color: #fff !important; }

/* Raw media nodes */
.node.raw { background: transparent; border: none; padding: 0; white-space: normal; color: inherit; }

/* ===== Shimmer placeholder ===== */
.placeholder { width: 200px; height: 140px; display: block; border-radius: 0; }
.placeholder.shimmer {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
  animation: shimmer 1.25s infinite linear;
}
.theme-dark .placeholder.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
}
@keyframes shimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}

/* SVG */
svg { position: absolute; top:0; left:0; pointer-events: none; overflow: visible; }
path {
  stroke: var(--path-stroke); stroke-width: 1.2; fill: none;
  stroke-opacity: 0; transition: stroke-opacity 0.3s ease, stroke 0.2s ease;
  pointer-events: stroke;
}
path.secondary { stroke-dasharray: 6 6; }

/* Bottom bar */
#footer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 36px;
  background: var(--bar-green);
  display: grid;
  grid-template-rows: 36px 0fr;
  row-gap: 0;
  transition: grid-template-rows 0.18s cubic-bezier(.22,.9,.33,1), height 0.18s cubic-bezier(.22,.9,.33,1), background 0.2s ease;
  z-index: 9999;
  color: var(--footer-text);
}
#footer-bar.expanded { height: 33vh; grid-template-rows: 36px 1fr; }

/* Header row: 4 columns (left / about / mode / work) */
.footer-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr auto 1.15fr;
  align-items: center; column-gap: 12px;
  padding: 0 12px; margin: 0;
}
#footer-bar .footer-left,
#footer-bar .footer-center,
#footer-bar .footer-mid,
#footer-bar .footer-right { display: flex; align-items: center; }
#footer-bar .footer-left { justify-content: flex-start; }
#footer-bar .footer-center { justify-content: flex-start; }
#footer-bar .footer-mid { justify-content: center; }
#footer-bar .footer-right { justify-content: flex-end; }

/* Header items */
#footer-bar a, .footer-cta, .mode-toggle {
  color: var(--footer-text);
  text-decoration: none;
  font-family: "Times New Roman", serif;
  font-weight: 100; letter-spacing: 0; font-size: 16px; line-height: 36px;
}
#footer-bar .footer-row a:hover,
#footer-bar .footer-row .mode-toggle:hover { text-decoration: underline; }

/* ABOUT arrow glyph */
.arrow-hahmlet,
#about-arrow {
  font-family: "Hahmlet", serif !important;
  font-weight: 300;
}

/* Use ::after to render small arrow glyphs on external links and deep links.
   The pseudo-element is un-decorated so underline behavior is controlled by the anchor itself. */
.node a.external::after,
.footer-col a.deep-link::after,
#node-instagram a::after {
  content: "↗";
  font-family: "Hahmlet", serif;
  font-weight: 300;
  margin-left: 0.25em;
  display: inline-block;
  text-decoration: none; /* keep arrow un-underlined */
}

/* Mode toggle (never bold) */
.mode-toggle { background: transparent; border: none; cursor: pointer; padding: 0; display: inline-block; }
#footer-bar .footer-row a.expanded-active,
#footer-bar .footer-row a.is-active {
  transform: translateY(-3px) scale(1.03);
  font-weight: 700;
}

/* Expanded content row (desktop 4 cols) */
.footer-content {
  overflow: hidden;
  padding: 0 12px 10px 12px;
  display: grid;
  grid-template-columns: 1.35fr 1fr auto 1.15fr;
  align-items: start; column-gap: 12px; color: var(--footer-text);
}
.footer-col { font-family: "Times New Roman", serif; font-size: 16px; line-height: 1.35; color: var(--footer-text); }
.footer-col h4 { margin: 6px 0 6px 0; font-weight: 700; font-size: 16px; }
.footer-col p { margin: 0 0 6px 0; }

#footer-left-col  { grid-column: 1; }
#footer-center-col { grid-column: 2; }
#footer-mid-spacer { grid-column: 3; }
#footer-right-col { grid-column: 4; }

/* Footer deep-link arrow style remains Hahmlet */
.footer-col a.deep-link .arrow { font-family: "Hahmlet", serif; font-weight: 300; margin-left: 0; }

/* Right column width tuning (desktop) */
.footer-col.right { text-align: right; justify-self: end; width: 100%; max-width: min(440px, 100%); }

/* Drag hint */
.drag-hint {
  position: fixed; left: 50%; top: 18%;
  transform: translate(-50%, -50%);
  min-width: 150px; height: 44px; padding: 6px 12px;
  background: #e9e9e9; color:#222; display:flex; align-items:center; justify-content:center;
  border-radius:8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); z-index:10000;
  user-select: none; cursor: grab; font-family: "Times New Roman", serif;
}
.theme-dark .drag-hint { background:#1b1d21; color:#e8e8e8; }

#footer-bar { cursor: default !important; }
#footer-bar a { cursor: pointer; }
#footer-bar .footer-content p, #footer-bar .footer-col { cursor: text; }
.footer-cta { background: transparent; border: none; cursor:pointer; display:inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(290px, 40vw); transition: max-width 0.14s ease, transform 0.12s ease; }


/* allow wrapping + limit line length */
.node.wrap {
  white-space: normal;
  max-width: 420px;   /* adjust as you like */
  line-height: 1.1;
}


/* ===== Mobile rules ===== */
@media (max-width: 640px) {
  .node { font-size: 20px; }
  .drag-hint .label { font-size: 20px; }

  /* Hide the footer's mid mode toggle on mobile (we have header one) */
  .footer-row .mode-toggle { display: none !important; }

  /* Expanded footer => one-column content, switchable by header tabs */
  #footer-bar.expanded .footer-content {
    grid-template-columns: 1fr !important;
    max-height: calc(50vh - 36px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #footer-bar.expanded .footer-content .footer-col {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0;
  }
  #footer-bar.expanded .footer-col.right { max-width: 100% !important; }
}