/* ============================================================
   BitterRose — Signature motif: "The Anchor Line"
   The tensegrity / structural-assessment visual language.
   Requires colors_and_type.css (tokens) loaded first.

   Four composable elements:
     1. .node            — the ringed anchor dot (atomic unit)
     2. .plumb-rail       — vertical anchor line with nodes (section rail)
     3. .lattice          — faint tensegrity texture (background bands)
     4. .landmark         — node + leader line + label (annotation)
   Plus helpers: .anchor-eyebrow, .fascia-divider, .node-list
   ============================================================ */

/* ---- 1. NODE — the ringed anchor dot ---------------------- */
.node {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 1.5px solid var(--rose-700);
  box-sizing: border-box;
  flex: none;
}
.node--sm { width: 7px; height: 7px; border-width: 1.25px; }
.node--lg { width: 15px; height: 15px; border-width: 2px; }
.node--solid { background: var(--rose-700); border-color: var(--rose-700); }
.node--teal { border-color: var(--soma-700); }
.node--teal.node--solid { background: var(--soma-700); }

/* ---- 2. PLUMB RAIL — vertical anchor line w/ nodes -------- */
/* Wrap a section heading: <div class="plumb-rail"> ... </div> */
.plumb-rail {
  position: relative;
  padding-left: var(--space-6);
}
.plumb-rail::before {           /* the line */
  content: "";
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--soma-300), var(--soma-300));
  opacity: .7;
}
.plumb-rail::after {            /* top node */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 1.5px solid var(--rose-700);
  box-sizing: border-box;
}
/* dashed clinical variant */
.plumb-rail--dashed::before {
  background: none;
  border-left: 1.5px dashed var(--soma-300);
  width: 0;
}

/* free-standing vertical plumb line (column divider) */
.plumb {
  position: relative;
  width: 1.5px;
  align-self: stretch;
  background: var(--soma-300);
  opacity: .5;
}
.plumb::before, .plumb::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-50); border: 1.5px solid var(--rose-700); box-sizing: border-box;
}
.plumb::before { top: -4px; }
.plumb::after  { bottom: -4px; }

/* ---- 3. LATTICE — faint tensegrity texture --------------- */
.lattice {
  background-image: url("assets/pattern-tensegrity.svg");
  background-size: 128px 128px;
  background-repeat: repeat;
}
.lattice--soft { background-size: 160px 160px; }
/* fade the lattice toward the edges so it reads as texture, not grid */
.lattice--vignette {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
}

/* ---- 4. LANDMARK CALLOUT — node + leader + label --------- */
/* Place absolutely over an image: <span class="landmark" style="left:..;top:..">..</span> */
.landmark {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.landmark .lm-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper-50); border: 1.5px solid var(--rose-700);
  box-sizing: border-box; flex: none;
  box-shadow: 0 0 0 4px rgba(160,90,100,.10);
}
.landmark .lm-leader {
  height: 1.5px; width: 40px;
  background: var(--soma-500);
  opacity: .55;
}
.landmark .lm-label {
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--soma-700);
  white-space: nowrap;
}
/* leader-left variant: label sits to the LEFT of the dot */
.landmark--left { flex-direction: row-reverse; }

/* ---- HELPERS --------------------------------------------- */

/* eyebrow preceded by a short anchor line + node */
.anchor-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-eyebrow); font-weight: 500;
  font-size: var(--fs-caption); letter-spacing: .18em; text-transform: uppercase;
  color: var(--rose-700);
}
.anchor-eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: var(--soma-400, var(--soma-500));
  opacity: .5; flex: none;
}
.anchor-eyebrow--node::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper-50); border: 1.25px solid var(--rose-700); box-sizing: border-box;
}

/* fascia divider — hairline with a center node */
.fascia-divider {
  display: flex; align-items: center; gap: 0;
  margin: var(--space-8) 0;
}
.fascia-divider::before, .fascia-divider::after {
  content: ""; height: 1px; flex: 1; background: var(--border);
}
.fascia-divider .fd-node {
  width: 9px; height: 9px; border-radius: 50%; margin: 0 14px;
  background: var(--paper-50); border: 1.5px solid var(--rose-700); box-sizing: border-box; flex: none;
}

/* ---- PHOTO SLOT — branded placeholder for real photography ---- */
/* Reserve space for Mia's portrait & treatment photos until shot. */
.photo-slot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--white), transparent 70%),
    var(--soma-100);
  border: 1.5px dashed var(--soma-300);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--soma-700);
}
.photo-slot::before {            /* faint mark watermark */
  content: "";
  position: absolute; inset: 0;
  background: url("assets/mark.png") center / 72px no-repeat;
  opacity: .07;
}
.photo-slot .ps-inner { position: relative; z-index: 1; padding: var(--space-6); max-width: 80%; }
.photo-slot .ps-node {
  width: 13px; height: 13px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: var(--paper-50); border: 1.5px solid var(--rose-700); box-sizing: border-box;
}
.photo-slot .ps-label {
  font-family: var(--font-eyebrow); font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soma-700);
}
.photo-slot .ps-sub {
  font-family: var(--font-body); font-size: 13px; color: var(--ink-500);
  margin-top: var(--space-2); line-height: 1.5;
}
.photo-slot .ps-corner {
  position: absolute; top: 12px; left: 14px; z-index: 1;
  font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soma-500); display: flex; align-items: center; gap: 7px;
}
.photo-slot .ps-corner::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper-50); border: 1.5px solid var(--rose-700); box-sizing: border-box;
}
.photo-slot--portrait { aspect-ratio: 3 / 4; }
.photo-slot--wide     { aspect-ratio: 16 / 10; }
.photo-slot--square   { aspect-ratio: 1 / 1; }
.photo-slot--tall     { aspect-ratio: 4 / 5; }
/* on dark sections */
.photo-slot--dark { background: var(--soma-800); border-color: var(--soma-600); color: #fff; }
.photo-slot--dark .ps-label { color: var(--soma-100); }
.photo-slot--dark .ps-sub { color: var(--soma-300); }
.photo-slot--dark::before { opacity: .12; }

/* node bullet list */
.node-list { list-style: none; margin: 0; padding: 0; }
.node-list li {
  position: relative; padding-left: var(--space-6);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg2);
  line-height: 1.6; margin-bottom: var(--space-3);
}
.node-list li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper-50); border: 1.5px solid var(--rose-700); box-sizing: border-box;
}
/* connect bullets with a faint anchor line */
.node-list--linked li::after {
  content: ""; position: absolute; left: 6px; top: calc(.55em + 9px);
  width: 1.5px; height: calc(100% - 9px + var(--space-3));
  background: var(--soma-300); opacity: .5;
}
.node-list--linked li:last-child::after { display: none; }