/* ============================================================
   bella.garden — THE EDITOR'S CUT
   Ported from bellapivo-site/app/editors-cut.css (2026-07-18),
   scoped to .ec, trimmed to what the garden uses + detail-page.
   Fonts: Bodoni Moda (display) · Boldonse (stamp) · Archivo (body)
   · Fragment Mono (mono) · Shantell Sans (red pen) · Ms Madi (cursive)
   ============================================================ */

.ec {
  /* THE EDITOR'S CUT — matches the NEW bellapivo.com redesign
     (Bodoni Moda display · Archivo body · Fragment Mono labels · red + cobalt) */
  --cream: #f4f1ea;
  --card: #fffdf8;
  --ink: #0a0a0b;
  --ink-soft: #3a352f;
  --red: #e0182d;
  --red-deep: #7b1220;
  --cobalt: #1f44ff;
  --violet: #5b2a86;
  --green: #7a9e08;
  --coral: #ff6a4d;
  --gold: #c9a962;
  --silver: #c7c9cc;
  --frost: #f0edf3;
  --blush: #ece4f3;
  --hair: rgba(21, 18, 15, 0.12);
  --pop: #1f44ff;
  --pop-soft: rgba(31, 68, 255, 0.12);
  /* aliases used by the feature band + map (kept working, mapped to EC hues) */
  --wine: #e0182d;
  --wine-deep: #7b1220;
  --midnight: #0a0a0b;
  --mauve: #5b2a86;
  --teal: #1f44ff;
  --display: "Archivo", system-ui, sans-serif;
  --stamp: "Boldonse", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --serif: "Archivo", system-ui, sans-serif;
  --accent: "Ms Madi", cursive;
  --hand: "Shantell Sans", cursive;
  --mono: "Fragment Mono", ui-monospace, monospace;
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ec *, .ec *::before, .ec *::after { margin: 0; padding: 0; box-sizing: border-box; }
.ec a { color: inherit; }
.ec ul { list-style: none; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: #f4f1ea; }
::selection { background: rgba(224, 24, 45, 0.22); }

/* paper grain */
.ec::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons */
.ec .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--cream);
  font-family: var(--body); font-weight: 700; font-size: 13px; padding: 12px 20px; border-radius: 9px;
  text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.ec .btn:hover { transform: translateY(-2px); background: var(--red); }
.ec .btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ec .btn:hover .dot { background: var(--cream); }
.ec .btn.cobalt { background: var(--cobalt); }
.ec .btn.cobalt:hover { background: var(--ink); }
.ec .link { font-weight: 700; font-size: 13px; text-decoration: none; color: var(--ink);
  border-bottom: 2.5px solid var(--pop); padding-bottom: 1px; }
.ec .link:hover { color: var(--pop); }
.ec .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px 1px rgba(224, 24, 45, 0.7); animation: ec-pulse 2s infinite; display: inline-block; }
@keyframes ec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============ header ============ */
.ec header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  padding: 16px max(24px, calc((100% - 1520px) / 2 + 24px)); background: var(--cream); border-bottom: 2px solid var(--ink); }
.ec .logo { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.5px; text-decoration: none; color: var(--ink); }
.ec .logo .d { color: var(--red); }
.ec nav.links { display: flex; gap: 20px; align-items: center; }
.ec nav.links > a { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color 0.15s; }
.ec nav.links > a:nth-child(1):hover { color: var(--cobalt); }
.ec nav.links > a:nth-child(2):hover { color: var(--green); }
.ec nav.links > a:nth-child(3):hover { color: var(--violet); }
.ec nav.links > a:nth-child(4):hover { color: var(--coral); }

/* ============ scrolling ticker ============ */
.ec .ticker { display: flex; overflow: hidden; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); background: var(--cream); user-select: none; }
.ec .tk { flex-shrink: 0; white-space: nowrap; font-family: var(--stamp); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 0; animation: ec-tick 30s linear infinite; }
.ec .tk i { font-style: normal; margin: 0 18px; }
.ec .tk .d1 { color: var(--red); } .ec .tk .d2 { color: var(--cobalt); } .ec .tk .d3 { color: var(--green); } .ec .tk .d4 { color: var(--violet); } .ec .tk .d5 { color: var(--coral); }
@keyframes ec-tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ec .tk { animation: none; } }

/* ============ sections ============ */
.ec section.block, .ec .block { max-width: 1520px; margin: 0 auto; padding: 26px 46px; }
.ec .sec-kick { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.ec .sec-h { font-family: var(--display); font-weight: 800; letter-spacing: -1px; font-size: clamp(23px, 2.5vw, 33px); line-height: 1.05; margin-bottom: 8px; }
.ec .sec-sub { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); max-width: 60ch; line-height: 1.6; margin-bottom: 6px; }
.ec .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ec .rv.in { opacity: 1; transform: none; }

/* stardiv */
.ec .stardiv { display: flex; gap: 30px; justify-content: center; align-items: center; padding: 16px 20px; }
.ec .stardiv span { display: inline-block; line-height: 1; }
.ec .stardiv span:nth-child(1) { color: var(--red); font-size: 16px; transform: rotate(-10deg); }
.ec .stardiv span:nth-child(2) { color: var(--cobalt); font-size: 11px; }
.ec .stardiv span:nth-child(3) { color: var(--violet); font-size: 22px; transform: rotate(7deg); }
.ec .stardiv span:nth-child(4) { color: var(--coral); font-size: 11px; }
.ec .stardiv span:nth-child(5) { color: var(--green); font-size: 16px; transform: rotate(-6deg); }

/* ============ hero ============ */
.ec .build-hero { padding-top: 22px; padding-bottom: 4px; }
.ec .hero-ephemera { min-height: 220px; }
.ec .build-hero h1 { font-family: var(--display); font-weight: 800; letter-spacing: -1.5px; line-height: 1.02; font-size: clamp(30px, 4.2vw, 52px); margin: 8px 0 16px; }
.ec .build-hero h1 .hl { color: var(--red); }
.ec .build-hero .bh-sub { font-family: var(--body); font-size: clamp(14px, 1.4vw, 16px); color: var(--ink-soft); max-width: 54ch; line-height: 1.6; }
.ec .deckhint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px; color: var(--ink-soft); margin-top: 22px; }

/* ============ filter bar (notion-gallery sort) ============ */
.ec .gallerybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ec .gallerybar .sortlbl { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-right: 2px; }
.ec .fchipbtn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  background: var(--card); border: 1px solid rgba(21,18,15,0.16); border-radius: 100px; padding: 7px 15px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.ec .fchipbtn .ct { color: var(--silver); font-weight: 500; }
.ec .fchipbtn:hover { border-color: var(--ink); color: var(--ink); }
.ec .fchipbtn.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ec .fchipbtn.on .ct { color: rgba(244,241,234,0.5); }

/* ============ trading-card deck (uniform) ============ */
.ec .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 14px; margin-top: 22px; perspective: 1600px; }
.ec .tcard { position: relative; height: 252px; cursor: pointer; background: none; border: none; padding: 0; text-align: left; font-family: var(--body); }
.ec .tcard.hide { display: none; }
.ec .tinner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ec .tcard.flip .tinner { transform: rotateY(180deg); }
.ec .tcard:not(.flip):hover .tinner { transform: translateY(-5px); }
.ec .tface { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid rgba(21,18,15,0.13); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(10,10,11,0.04);
  display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.22s; }
.ec .tcard:not(.flip):hover .tface { box-shadow: 0 12px 28px rgba(10,10,11,0.13); }
.ec .tface.front { padding: 0; }
.ec .tface.back { transform: rotateY(180deg); background: var(--ink); color: var(--cream); border-color: var(--ink); padding: 15px 16px 14px; }
/* cover: real screenshot (.img) or typographic color-poster fallback */
.ec .tcover { position: relative; height: 160px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; overflow: hidden;
  background: linear-gradient(162deg, var(--tc, var(--ink)), color-mix(in srgb, var(--tc, var(--ink)) 60%, #000)); color: #fff; }
.ec .tcover.img { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.ec .tcard:not(.flip):hover .tcover.img { background-position: center 12%; }
.ec .tcover.img { transition: background-position 0.5s cubic-bezier(0.2,0.8,0.2,1); }
.ec .tlabels { position: absolute; top: 13px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 8px; z-index: 1; }
.ec .tbadge { font-family: var(--mono); font-weight: 700; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.ec .tcat { font-family: var(--mono); font-weight: 500; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.78); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.ec .tname { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.55vw, 25px); letter-spacing: -0.6px; line-height: 1.03; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
/* body */
.ec .tbody { flex: 1; display: flex; flex-direction: column; padding: 12px 16px 13px; background: var(--card); }
.ec .ttag { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--tc, var(--ink)); line-height: 1.45; }
.ec .tflip { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-weight: 500; font-size: 8.5px;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--silver); display: flex; justify-content: space-between; align-items: center; }
.ec .tface.back .bk { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: #9db1ff;
  border-bottom: 1px solid rgba(244,241,234,0.18); padding-bottom: 9px; margin-bottom: 11px; }
.ec .tface.back .bq { font-family: var(--body); font-style: italic; font-weight: 400; font-size: clamp(12px, 1.1vw, 13.5px);
  line-height: 1.5; color: var(--cream); flex: 1; overflow: auto; }
.ec .tface.back .bopen { margin-top: 11px; font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: #9db1ff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ec .tface.back .bopen:hover { color: var(--cream); }
.ec .tface.back .bopen + .bopen { margin-top: 6px; }
.ec .tface.back .bback { position: absolute; top: 15px; right: 15px; font-family: var(--mono); font-size: 12px; color: #9db1ff; }
@media (prefers-reduced-motion: reduce) { .ec .tinner { transition: none; } }
@media (max-width: 480px) { .ec .deck { grid-template-columns: 1fr 1fr; gap: 10px; } .ec .tcard { height: 228px; } .ec .tcover { height: 96px; } .ec .temoji { font-size: 36px; } }

/* ============ shelf (retired, compact list) ============ */
.ec .shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; margin-top: 18px; }
.ec .shelfrow { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--hair); }
.ec .shelfrow .sn { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.3px; white-space: nowrap; }
.ec .shelfrow .sw { font-family: var(--body); font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 640px) { .ec .shelf { grid-template-columns: 1fr; } }

/* ============ band-ink ============ */
.ec .band-ink { background: var(--ink); }
.ec .band-ink .sec-h, .ec .band-ink .sec-kick { color: var(--cream); }
.ec .band-ink .sec-sub { color: rgba(244,241,234,0.72); }

/* ============ doors ============ */
.ec .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 6px; }
@media (max-width: 900px) { .ec .doors { grid-template-columns: 1fr; } }
.ec .door { position: relative; border: 1px solid rgba(21,18,15,0.16); padding: 28px 30px 26px; text-decoration: none; color: var(--ink);
  border-radius: 10px; background: var(--card); overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s; display: block; }
.ec .door:hover { transform: translateY(-4px); border-color: var(--ink); }
.ec .door .k { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.ec .door h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 31px); letter-spacing: -1px; line-height: 1; margin-bottom: 9px; }
.ec .door p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; margin-bottom: 16px; }
.ec .door .go { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.ec .door .arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ec .door:hover .arrow { transform: translateX(7px); }
.ec .door .bigmark { position: absolute; right: -18px; bottom: -52px; font-family: var(--stamp); font-size: 200px; line-height: 1; opacity: 0.13; pointer-events: none; color: var(--silver); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s; }
.ec .door:hover .bigmark { transform: translateY(-10px) rotate(-3deg); opacity: 0.22; }
.ec .door.follow { background: var(--ink); color: var(--cream); }
.ec .door.follow p { color: rgba(244, 241, 234, 0.72); }
.ec .door.follow .k, .ec .door.follow .go { color: #9db1ff; }
.ec .door.pitch .k, .ec .door.pitch .go { color: var(--red); }
.ec .door.pitch .bigmark { color: var(--red); }
.ec .door.about .k, .ec .door.about .go { color: var(--violet); }
.ec .door.about .bigmark { color: var(--violet); }

/* ============ footer ============ */
.ec footer { border-top: 3px solid var(--ink); background: var(--cream); margin-top: 20px; }
.ec .findex { max-width: 1520px; margin: 0 auto; padding: 48px 46px 40px; }
.ec .findex .fh { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.8px; margin-bottom: 26px; }
.ec .findex .fh .scr { color: var(--green); font-style: italic; }
.ec .fcols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.ec .fcol .cl { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.ec .fcol a { display: block; font-family: var(--body); font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 4px 0; transition: color 0.15s; }
.ec .fcol a:hover { color: var(--red); }
.ec .fcol a small { color: var(--ink-soft); font-size: 11px; }
.ec .fbase { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.ec .fbase .heart { color: var(--red); }
@media (max-width: 720px) { .ec .fcols { grid-template-columns: 1fr 1fr; } .ec .fbase { flex-direction: column; gap: 8px; } }

/* ============ view toggle (Projects <-> Web) ============ */
.ec .viewtoggle { max-width: 1520px; margin: 0 auto; padding: 6px 46px 0; display: flex; }
.ec .segmented { display: inline-flex; border: 1px solid var(--hair); border-radius: 100px; padding: 4px; background: var(--card); box-shadow: 0 4px 14px rgba(26,26,46,0.06); }
.ec .segmented a { font-family: var(--body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.3px; text-decoration: none; color: var(--ink-soft); padding: 8px 20px; border-radius: 100px; transition: color 0.15s, background 0.2s; display: inline-flex; align-items: center; gap: 7px; }
.ec .segmented a.on { background: var(--wine); color: #fff; }
.ec .segmented a:not(.on):hover { color: var(--ink); }

/* ============ the web (force-directed map) ============ */
.ec .mapstage { position: relative; width: 100%; height: calc(100vh - 190px); min-height: 460px; overflow: hidden;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background:
  radial-gradient(1200px 600px at 50% 0%, rgba(140,3,39,0.04), transparent 70%), var(--cream); cursor: grab; }
.ec .mapstage.dragging { cursor: grabbing; }
.ec .mapstage canvas { display: block; width: 100%; height: 100%; }
.ec .maphint { position: absolute; left: 20px; bottom: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3px; color: var(--ink-soft); pointer-events: none; }
.ec .maphint b { color: var(--wine); font-weight: 700; }
.ec .maplegend { position: absolute; right: 18px; top: 16px; display: flex; flex-direction: column; gap: 7px; background: rgba(255,253,251,0.86); backdrop-filter: blur(4px); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; }
.ec .maplegend .lg { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-soft); }
.ec .maplegend .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ec .maptip { position: absolute; pointer-events: none; z-index: 5; background: var(--midnight); color: var(--cream); border-radius: 10px; padding: 10px 13px; max-width: 240px; opacity: 0; transform: translateY(4px); transition: opacity 0.14s; box-shadow: 0 8px 26px rgba(0,0,0,0.28); }
.ec .maptip.show { opacity: 1; transform: none; }
.ec .maptip .tt { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.ec .maptip .td { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); margin-top: 5px; }
.ec .maptip .to { font-family: var(--body); font-size: 11px; color: rgba(244,241,234,0.7); margin-top: 7px; }
.ec .mapintro { max-width: 1520px; margin: 0 auto; padding: 26px 46px 8px; }

/* --- the web: stage + content side panel share a row --- */
.ec .maplayout { display: flex; gap: 22px; max-width: 1520px; margin: 0 auto; padding: 8px 46px 34px; align-items: stretch; }
.ec .maplayout .mapstage { flex: 1; min-width: 0; height: calc(100vh - 250px); min-height: 500px; border: 1px solid var(--hair); border-radius: 12px; }
.ec .map-rail { position: relative; width: 322px; flex-shrink: 0; align-self: stretch; max-height: calc(100vh - 250px); min-height: 500px;
  background: linear-gradient(160deg, #fffdf8, #f7efe0); border-radius: 6px; padding: 26px 22px 20px;
  box-shadow: 4px 9px 26px rgba(0,0,0,0.26); transform: rotate(0.5deg); display: block; overflow-y: auto; overflow-x: hidden; }
.ec .map-rail .pin { position: absolute; top: -10px; left: 50%; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--cobalt, #1f44ff);
  border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 4px 7px rgba(0,0,0,0.5), inset -2px -2px 3px rgba(0,0,0,0.35), inset 2px 2px 4px rgba(255,255,255,0.55); }
.ec .mr-head .rk { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.ec .mr-head .rm { font-family: var(--hand); font-weight: 500; font-size: 14px; line-height: 1.42; color: rgba(10,10,11,0.8); margin-bottom: 4px; }
.ec .mr-head .rm b { color: var(--wine); }
/* the live detail card — updates as you hover / tap the web */
.ec .mr-detail { margin: 16px 0 6px; border: 1px dashed rgba(10,10,11,0.22); border-radius: 8px; padding: 14px 15px; background: rgba(255,255,255,0.5); min-height: 96px; }
.ec .mr-detail .dk { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; }
.ec .mr-detail .dt { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; letter-spacing: -0.3px; color: var(--ink); }
.ec .mr-detail .dtag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.4px; color: var(--ink-soft); margin-top: 6px; }
.ec .mr-detail .dsub { font-family: var(--body); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; }
.ec .mr-detail .dlist { margin-top: 9px; display: flex; flex-direction: column; gap: 1px; }
.ec .mr-detail .dlist a, .ec .mr-detail .dlist span { font-family: var(--body); font-size: 12.5px; color: var(--ink); text-decoration: none; padding: 3px 0; border-bottom: 1px solid rgba(10,10,11,0.07); }
.ec .mr-detail .dlist a:hover { color: var(--wine); }
.ec .mr-detail .dgo { display: inline-block; margin-top: 11px; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--wine); text-decoration: none; }
.ec .mr-detail .dgo:hover { color: var(--wine-deep); }
.ec .mr-sec { margin-top: 18px; }
.ec .mrl { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; }
.ec .mrow { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 6px 4px; border-radius: 6px;
  font-family: var(--body); font-size: 13px; color: var(--ink); text-decoration: none; transition: background 0.14s; }
.ec .mrow:hover { background: rgba(31,68,255,0.07); }
.ec .mrow.on { background: rgba(224,24,45,0.09); }
.ec .mrow .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ec .mrow .ct { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }
.ec .map-rail .rbtn { display: block; text-align: center; margin: 18px 0 4px; background: var(--wine); color: #fff; text-decoration: none;
  font-family: var(--body); font-weight: 700; font-size: 13px; padding: 12px 14px; border-radius: 100px; line-height: 1.3; transition: transform 0.15s, background 0.2s; }
.ec .map-rail .rbtn b { display: block; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; margin-top: 3px; }
.ec .map-rail .rbtn:hover { transform: translateY(-2px); background: var(--wine-deep); }
@media (max-width: 900px) { .ec .maplayout { flex-direction: column; } .ec .map-rail { width: 100%; max-height: none; transform: none; order: 2; }
  .ec .maplayout .mapstage { height: 60vh; order: 1; } }
@media (max-width: 560px) { .ec .maplegend { display: none; } .ec .viewtoggle, .ec .mapintro { padding-left: 22px; padding-right: 22px; } .ec .maplayout { padding-left: 16px; padding-right: 16px; } }

/* ============ hero, richer (two-column w/ ephemera) ============ */
.ec .herowrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.ec .herotext { max-width: 660px; flex: 1; }
.ec .hero-ephemera { position: relative; min-height: 300px; width: 320px; flex-shrink: 0; }
.ec .stamp { position: absolute; top: 6px; right: 8px; width: 132px; height: 132px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--red); color: var(--cream); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; transform: rotate(-9deg); box-shadow: 5px 6px 0 var(--ink); }
.ec .stamp .big { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 0.9; }
.ec .stamp .sm { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 5px; }
.ec .stickynote { position: absolute; bottom: 8px; left: 4px; width: 210px; padding: 20px 18px 16px; background: var(--card);
  border: 2px solid var(--ink); box-shadow: 4px 6px 0 rgba(10,10,11,0.28); transform: rotate(3deg);
  font-family: "Shantell Sans", cursive; font-weight: 500; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ec .stickynote .pin { position: absolute; top: -8px; left: 50%; margin-left: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--cobalt); border: 2px solid var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.ec .minicard { position: absolute; top: 118px; right: 42px; width: 128px; padding: 13px 14px; background: var(--card);
  border: 2.5px solid var(--ink); border-top: 6px solid var(--cobalt); border-radius: 7px; box-shadow: 4px 5px 0 var(--ink); transform: rotate(4deg); z-index: 2; }
.ec .minicard .mn { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; }
.ec .minicard .mt { font-family: var(--mono); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
@media (max-width: 820px) { .ec .herowrap { grid-template-columns: 1fr; } .ec .hero-ephemera { display: none; } }

/* stat strip */
.ec .statstrip { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 26px; padding: 20px 0 4px; border-top: 2px solid var(--ink); }
.ec .stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -0.8px; }
.ec .stat:nth-child(1) .n { color: var(--red); } .ec .stat:nth-child(2) .n { color: var(--cobalt); }
.ec .stat:nth-child(3) .n { color: var(--green); } .ec .stat:nth-child(4) .n { color: var(--violet); }
.ec .stat .l { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 6px; }

/* ============ COS full-width feature (the anchor) ============ */
.ec .feature { position: relative; overflow: hidden; }
.ec .feature .fwrap { max-width: 1520px; margin: 0 auto; padding: 52px 46px 56px; position: relative; z-index: 1; }
.ec .feature .fkick { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
.ec .feature .fname { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 78px); letter-spacing: -1px; line-height: 0.98; color: var(--cream); margin-bottom: 18px; }
.ec .feature .fname .hl { color: var(--red); font-style: italic; }
.ec .feature .fquote { font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(16px, 2vw, 22px); line-height: 1.5; color: rgba(244,241,234,0.9); max-width: 40ch; border-left: 4px solid var(--red); padding-left: 20px; margin-bottom: 24px; }
.ec .feature .fcompanions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; max-width: 640px; }
.ec .fchip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--cream); border: 1.5px solid rgba(244,241,234,0.3); border-radius: 100px; padding: 7px 13px; }
.ec .fchip b { color: #9db1ff; font-weight: 700; }
.ec .feature .fbtns { display: flex; flex-wrap: wrap; gap: 12px; }
.ec .feature .fbtn { font-family: var(--body); font-weight: 700; font-size: 13.5px; padding: 13px 24px; border-radius: 100px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s, background 0.2s; }
.ec .feature .fbtn.solid { background: var(--red); color: #fff; } .ec .feature .fbtn.solid:hover { transform: translateY(-2px); background: var(--red-deep); }
.ec .feature .fbtn.ghost { background: transparent; color: var(--cream); border: 2px solid rgba(244,241,234,0.4); } .ec .feature .fbtn.ghost:hover { border-color: var(--cream); }
.ec .feature .fghost { position: absolute; right: -30px; bottom: -80px; font-family: var(--stamp); font-size: 340px; line-height: 1; color: rgba(224,24,45,0.14); pointer-events: none; z-index: 0; }
@media (max-width: 560px) { .ec .feature .fghost { display: none; } }

/* ============ automations as ticket stubs ============ */
.ec .tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 26px; margin-top: 22px; }
.ec .stub2 { position: relative; display: block; background: var(--card); border: 1px solid rgba(21,18,15,0.16); border-top: 3px solid var(--sc, var(--ink)); border-radius: 6px;
  padding: 15px 16px 13px; text-decoration: none; color: var(--ink); box-shadow: none;
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), border-color 0.2s; }
.ec .stub2:hover { transform: translateY(-4px); border-color: var(--sc, var(--ink)); }
.ec .stub2 .s2top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px dashed var(--hair); padding-bottom: 10px; margin-bottom: 12px; }
.ec .stub2 .s2badge { white-space: nowrap; }
.ec .stub2 .s2cadence { text-align: right; }
.ec .stub2 .s2badge { color: var(--sc, var(--ink)); font-weight: 700; }
.ec .stub2 .s2cadence { color: var(--ink-soft); }
.ec .stub2 .s2name { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.5px; line-height: 1.05; margin-bottom: 8px; }
.ec .stub2 .s2q { font-family: var(--body); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ec .stub2 .s2go { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--hair); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--sc, var(--ink)); }

/* section intro spacing + tape rule divider */
.ec .taperule { max-width: 1520px; margin: 4px auto; padding: 0 46px; }
.ec .taperule span { display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 24px); opacity: 0.25; }

/* ============ THE CORKBOARD (pinned notes + headline) ============ */
.ec .boardhead { max-width: 1520px; margin: 0 auto; padding: 22px 46px 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ec .boardhead .sortlbl { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.ec .boardwrap { max-width: 1520px; margin: 0 auto; padding: 10px 46px 40px; }

/* the intro pinned to the wall */
.ec .pin-item.headnote { transform: rotate(-1.2deg); }
.ec .pin-item.headnote:hover { transform: rotate(0deg) translateY(-5px); }
.ec .headnote { width: 388px; padding: 22px 24px 20px; background: #fffdf8; display: flex; flex-direction: column; box-shadow: 4px 9px 22px rgba(0,0,0,0.48); }
.ec .hl-kick { display: block; font-family: var(--mono); font-weight: 500; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.ec .hl-title { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.8px; line-height: 1.05; color: var(--ink); margin: 0 0 12px; }
.ec .hl-title em { color: var(--red); font-style: normal; }
.ec .hl-sub { display: block; font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ec .hl-stats { display: block; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--hair); font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px; color: var(--ink-soft); }
.ec .hl-stats b { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--red); vertical-align: -1px; }
.ec .hl-cred { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); }
.ec .hl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; }
.ec .hl-cta { font-family: var(--body); font-weight: 700; font-size: 12.5px; color: var(--cream); background: var(--wine); text-decoration: none; padding: 9px 15px; border-radius: 100px; transition: transform 0.14s, background 0.2s; }
.ec .hl-cta:hover { transform: translateY(-2px); background: var(--wine-deep); }
.ec .hl-cta2 { font-family: var(--body); font-weight: 600; font-size: 12.5px; color: var(--ink); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.ec .hl-cta2:hover { border-bottom-color: var(--ink); }
@media (max-width: 560px) { .ec .headnote { width: 100%; } .ec .boardhead { padding-left: 16px; padding-right: 16px; } }

/* zone labels (the newest / everything else) — force a new row on the wall */
.ec .zonelabel { flex-basis: 100%; width: 100%; margin: 6px 4px 0; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 19px; letter-spacing: -0.3px; color: #f1ead9; display: flex; align-items: center; gap: 12px; }
.ec .zonelabel::before { content: ""; width: 10px; height: 10px; background: var(--red); transform: rotate(45deg); flex-shrink: 0; }
.ec .zonelabel.hide { display: none; }
.ec .note.big { width: 200px; min-height: 164px; }
.ec .newtag { position: absolute; top: -10px; right: 14px; background: var(--red); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0,0,0,0.45); z-index: 3; }
.ec .board { position: relative; display: flex; gap: 24px; align-items: flex-start; padding: 26px 26px 32px; border-radius: 8px; border: 9px solid #14110d;
  background-color: #2e2419;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(180,140,90,0.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(140,100,60,0.08), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(255,236,200,0.03) 0 1px, transparent 1px 5px);
  background-size: auto, auto, 7px 7px, 6px 6px;
  box-shadow: inset 0 0 10px 3px rgba(0,0,0,0.55), inset 0 0 180px rgba(0,0,0,0.5), 6px 10px 0 var(--ink); }
.ec .board::before { content: ""; position: absolute; inset: 0; border-radius: 2px; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ec .board-inner { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 26px 20px; justify-content: flex-start; align-items: flex-start; align-content: flex-start; }

/* the right rail — a note from her cos, fills the space + links to the web */
.ec .board-rail { position: sticky; top: 88px; z-index: 1; width: 290px; flex-shrink: 0; align-self: flex-start;
  background: linear-gradient(160deg, #fffdf8, #f7efe0); border-radius: 6px; padding: 24px 22px 20px;
  box-shadow: 4px 9px 24px rgba(0,0,0,0.5); transform: rotate(1.1deg); }
.ec .board-rail .pin { position: absolute; top: -10px; left: 50%; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 4px 7px rgba(0,0,0,0.5), inset -2px -2px 3px rgba(0,0,0,0.35), inset 2px 2px 4px rgba(255,255,255,0.55); }
.ec .rk { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.ec .rm { font-family: var(--hand); font-weight: 500; font-size: 14.5px; line-height: 1.4; color: rgba(10,10,11,0.82); margin-bottom: 12px; }
.ec .rm b { color: var(--wine); }
.ec .rbtn { display: block; text-align: center; margin: 16px 0 14px; background: var(--wine); color: #fff; text-decoration: none;
  font-family: var(--body); font-weight: 700; font-size: 13px; padding: 13px 14px; border-radius: 100px; line-height: 1.3; transition: transform 0.15s, background 0.2s; }
.ec .rbtn b { display: block; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; margin-top: 3px; }
.ec .rbtn:hover { transform: translateY(-2px); background: var(--wine-deep); }
.ec .rf { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.3px; color: rgba(10,10,11,0.5); border-top: 1px dashed rgba(10,10,11,0.15); padding-top: 12px; }
@media (max-width: 820px) { .ec .board { flex-direction: column; } .ec .board-rail { position: static; width: 100%; transform: none; order: -1; } }

/* washi tape — a little bulletin texture on some notes */
.ec .note:nth-child(3n+2)::after, .ec .headnote::after { content: ""; position: absolute; top: -7px; left: 16px; width: 46px; height: 18px;
  background: repeating-linear-gradient(90deg, rgba(224,24,45,0.18) 0 4px, rgba(224,24,45,0.28) 4px 8px); border: 1px solid rgba(224,24,45,0.15);
  transform: rotate(-7deg); z-index: 2; pointer-events: none; }
.ec .note:nth-child(4n)::after { content: ""; position: absolute; top: -6px; right: 18px; left: auto; width: 44px; height: 17px;
  background: repeating-linear-gradient(90deg, rgba(31,68,255,0.16) 0 4px, rgba(31,68,255,0.26) 4px 8px); border: 1px solid rgba(31,68,255,0.14);
  transform: rotate(6deg); z-index: 2; pointer-events: none; }

.ec .pin-item { position: relative; display: block; text-decoration: none; color: var(--ink);
  transition: transform 0.22s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.22s; will-change: transform; }
.ec .pin-item .pin { position: absolute; top: -10px; left: 50%; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pc, var(--red)); border: 1px solid rgba(0,0,0,0.4); z-index: 4;
  box-shadow: 0 4px 7px rgba(0,0,0,0.5), inset -2px -2px 3px rgba(0,0,0,0.35), inset 2px 2px 4px rgba(255,255,255,0.55); }
.ec .pin-item:nth-child(6n+1) { transform: rotate(-2.4deg); }
.ec .pin-item:nth-child(6n+2) { transform: rotate(1.7deg); }
.ec .pin-item:nth-child(6n+3) { transform: rotate(-1.1deg); }
.ec .pin-item:nth-child(6n+4) { transform: rotate(2.5deg); }
.ec .pin-item:nth-child(6n+5) { transform: rotate(-1.9deg); }
.ec .pin-item:nth-child(6n+6) { transform: rotate(1.2deg); }
.ec .pin-item:hover { transform: rotate(0deg) translateY(-7px) scale(1.035); z-index: 6; }
.ec .pin-item.hide { display: none; }

/* polaroid — real screenshot pinned up */
.ec .polaroid { width: 250px; background: #fffdf8; padding: 12px 12px 0; box-shadow: 3px 6px 16px rgba(0,0,0,0.45); }
.ec .polaroid .photo { aspect-ratio: 4/3; overflow: hidden; background: #14110d; }
.ec .polaroid .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ec .polaroid .cap { padding: 11px 4px 15px; }
.ec .polaroid .cn { display: block; font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.02; color: var(--ink); }
.ec .polaroid .ct { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--tc, var(--ink-soft)); margin-top: 6px; }

/* sticky note — internal tool, her words written on it */
.ec .note { width: 182px; min-height: 150px; padding: 16px 16px 12px; display: flex; flex-direction: column; background: var(--paper, #fdf1a0);
  box-shadow: 3px 7px 16px rgba(0,0,0,0.42); }
.ec .note .ntag { font-family: var(--mono); font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(10,10,11,0.5); }
.ec .note .nname { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.4px; line-height: 1.06; margin: 6px 0 6px; color: #16130f; }
.ec .note .nquote { font-family: var(--hand); font-weight: 500; font-size: 12.5px; line-height: 1.32; color: rgba(10,10,11,0.78); }
.ec .note .ngo { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-weight: 700; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: rgba(10,10,11,0.5); }
.ec .pin-item:hover .ngo, .ec .pin-item:hover .cn { color: var(--pc, var(--red)); }
.ec .polaroid.pin-item:hover .cn { color: var(--ink); }
@media (max-width: 560px) { .ec .board-inner { gap: 30px 20px; } .ec .polaroid, .ec .note { width: 44vw; } .ec .boardwrap { padding-left: 16px; padding-right: 16px; } }

/* ============ DETAIL PAGE (build.html) ============ */
.ec .detail { max-width: 1160px; margin: 0 auto; padding: 30px 46px 60px; }

/* ===== inspo-board detail page (pinned collage, not a document) ===== */
.ec .ib-head { margin-bottom: 4px; }
.ec .ib-badge { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--dc, var(--red)); }
.ec .ib-title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 6vw, 62px); letter-spacing: -1.5px; line-height: 1; margin: 10px 0 8px; }
.ec .ib-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dc, var(--ink-soft)); }
.ec .inspoboard { position: relative; margin: 24px 0 0; padding: 36px 34px 16px; border-radius: 12px;
  background-color: #ece3d0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.55), transparent 42%),
    repeating-linear-gradient(0deg, rgba(120,100,70,0.055) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(90deg, rgba(120,100,70,0.055) 0 1px, transparent 1px 23px);
  box-shadow: inset 0 0 0 1px rgba(120,100,70,0.14), inset 0 2px 22px rgba(120,100,70,0.14), 5px 9px 0 rgba(21,18,15,0.14);
  columns: 2; column-gap: 30px; }
.ec .inspoboard .chip { position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; display: block; width: 100%; margin: 0 0 32px;
  background: #fffdf8; padding: 19px 20px 16px; box-shadow: 3px 7px 18px rgba(21,18,15,0.17); }
.ec .inspoboard .chip:nth-child(4n+1) { transform: rotate(-1deg); }
.ec .inspoboard .chip:nth-child(4n+2) { transform: rotate(0.8deg); }
.ec .inspoboard .chip:nth-child(4n+3) { transform: rotate(-0.6deg); }
.ec .inspoboard .chip:nth-child(4n) { transform: rotate(1.1deg); }
.ec .inspoboard .chip .pin { position: absolute; top: -9px; left: 50%; margin-left: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--dc, var(--red)); border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset -2px -2px 3px rgba(0,0,0,0.3), inset 2px 2px 3px rgba(255,255,255,0.55); z-index: 3; }
.ec .inspoboard .chip:nth-child(3n)::after { content: ""; position: absolute; top: -6px; right: 22px; width: 46px; height: 16px; background: repeating-linear-gradient(90deg, rgba(224,24,45,0.14) 0 4px, rgba(224,24,45,0.24) 4px 8px); transform: rotate(6deg); z-index: 2; }
.ec .inspoboard .cl { display: block; font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dc, var(--red)); margin-bottom: 11px; }
/* big polaroid spans both columns */
.ec .inspoboard .photo { column-span: all; -webkit-column-span: all; padding: 13px 13px 0; margin-bottom: 34px; transform: rotate(-0.7deg); }
.ec .inspoboard .photo .ph { overflow: hidden; background: #14110d; }
.ec .inspoboard .photo img { width: 100%; height: auto; display: block; }
.ec .inspoboard .phcap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 5px 14px; }
.ec .phurl { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec .ib-open { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dc, var(--red)); text-decoration: none; white-space: nowrap; }
.ec .ib-open:hover { color: var(--ink); }
.ec .inspoboard .note .qn { font-family: var(--hand); font-weight: 500; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.4; color: var(--ink); }
.ec .inspoboard .card .cb { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.ec .inspoboard .card .cb b { color: var(--ink); font-weight: 700; }
.ec .inspoboard .promptchip { background: #14140f; }
.ec .inspoboard .promptchip .pin { background: var(--gold); }
.ec .pch-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.ec .pch-h > span { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #9db1ff; }
.ec .pch-b { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: #e8e4d8; white-space: pre-wrap; margin: 0; }
@media (max-width: 720px) { .ec .inspoboard { columns: 1; padding: 26px 20px 6px; } }
.ec .backlink { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; margin-bottom: 26px; }
.ec .backlink:hover { color: var(--red); }
.ec .d-badge { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--dc, var(--ink)); }
.ec .d-title { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 6vw, 66px); letter-spacing: -1px; line-height: 1; margin: 10px 0 10px; }
.ec .d-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dc, var(--ink)); margin-bottom: 22px; }
.ec .d-quote { font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; color: var(--ink); border-left: 4px solid var(--dc, var(--red)); padding-left: 20px; margin: 4px 0 30px; max-width: 44ch; }
.ec .d-sec { margin: 34px 0; }
.ec .d-sec > .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dc, var(--red)); border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px; display: block; }
.ec .d-body { font-family: var(--body); font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 66ch; }
.ec .d-body b { color: var(--ink); font-weight: 700; }
/* how-it-works flow */
.ec .flow { counter-reset: step; display: flex; flex-direction: column; gap: 2px; }
.ec .flowstep { position: relative; padding: 14px 0 14px 52px; border-bottom: 1px dashed var(--hair); }
.ec .flowstep::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 12px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--dc, var(--ink)); color: var(--cream);
  font-family: var(--display); font-weight: 600; font-size: 15px; display: grid; place-items: center; }
.ec .flowstep .st { font-family: var(--body); font-weight: 700; font-size: 14.5px; color: var(--ink); display: block; margin-bottom: 3px; }
.ec .flowstep .sd { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
/* sample output block */
.ec .sample { margin-top: 18px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); box-shadow: 4px 5px 0 var(--ink); overflow: hidden; }
.ec .sample .sh { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); padding: 9px 15px; border-bottom: 1px dashed var(--hair); background: var(--cream); display: flex; justify-content: space-between; }
.ec .sample .sb { padding: 15px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.ec .sample .sb .mut { color: var(--ink-soft); }
.ec .sample .sb .hot { color: var(--red); font-weight: 700; }
/* prompt block */
.ec .prompt { position: relative; border: 2.5px solid var(--ink); border-radius: 8px; background: #14140f; color: #e8e4d8; box-shadow: 5px 6px 0 var(--ink); overflow: hidden; }
.ec .prompt .ph { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #9db1ff; padding: 11px 16px; border-bottom: 1px solid rgba(244,241,234,0.14); display: flex; justify-content: space-between; align-items: center; }
.ec .prompt .pb { padding: 18px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.7; white-space: pre-wrap; max-height: 460px; overflow: auto; }
.ec .copybtn { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; background: none; border: 1px solid rgba(244,241,234,0.3); color: #e8e4d8; border-radius: 5px; padding: 4px 9px; cursor: pointer; transition: background 0.15s; }
.ec .copybtn:hover { background: rgba(244,241,234,0.12); }
.ec .prompt-none { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); border: 2px dashed var(--hair); border-radius: 8px; padding: 18px 20px; line-height: 1.6; }
/* demo callout */
.ec .demobox { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
/* browser-frame live preview / screenshot */
.ec .browser { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 14px 44px rgba(10,10,11,0.15); }
.ec .bbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ece7dd; border-bottom: 1px solid var(--hair); }
.ec .bdots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ec .bdots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ec .bdots i:nth-child(1) { background: #e0182d; } .ec .bdots i:nth-child(2) { background: #c9a962; } .ec .bdots i:nth-child(3) { background: #7a9e08; }
.ec .burl { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); background: var(--cream); border-radius: 100px; padding: 6px 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec .bgo { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--wine); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.ec .bgo:hover { color: var(--ink); }
.ec .bview { position: relative; background: var(--cream); overflow: hidden; }
.ec .bview img { width: 100%; height: auto; display: block; }
.ec .bview iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ec .bviewhint { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--cream); background: rgba(10,10,11,0.5); padding: 6px; pointer-events: none; }
.ec .demopill { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; border: 1.5px solid var(--hair); color: var(--ink-soft); }
.ec .demopill.live { border-color: var(--green); color: var(--green); }
.ec .demopill.soon { border-color: var(--coral); color: var(--coral); }
/* grew-from credits */
.ec .credits { display: flex; flex-direction: column; gap: 12px; }
.ec .credit { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--hair); }
.ec .credit .cn { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; white-space: nowrap; }
.ec .credit .cn a { text-decoration: none; border-bottom: 2px solid var(--pop); }
.ec .credit .cw { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.ec .detail .btnrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 560px) { .ec .detail, .ec section.block, .ec header, .ec .findex { padding-left: 22px; padding-right: 22px; } .ec .credit { flex-direction: column; gap: 3px; } }

/* ============================================================
   THE GARDEN MAP (map.html) , calm, hand-laid, no physics.
   "your brand, with soul": red/cobalt/cream + editorial bones,
   warmed with handwriting, vines, tape, margin notes.
   ============================================================ */
.ec .gmintro { max-width: 1180px; margin: 0 auto; padding: 30px 46px 6px; }
.ec .gm-h { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4.4vw, 54px); line-height: 0.98; letter-spacing: -1.5px; color: var(--ink); }
.ec .gm-h em { font-style: italic; font-family: var(--serif); font-weight: 500; color: var(--wine); }
.ec .gm-sub { font-family: var(--body); font-size: clamp(14.5px, 1.5vw, 17px); line-height: 1.62; color: var(--ink-soft); max-width: 66ch; margin-top: 14px; }
.ec .gm-sub em { font-style: normal; font-family: var(--hand); font-weight: 700; color: var(--ink); font-size: 1.08em; }
.ec .inlink { color: var(--cobalt); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--cobalt) 35%, transparent); font-weight: 600; }
.ec .inlink:hover { border-bottom-color: var(--cobalt); }
.ec .gm-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px; color: var(--ink-soft); }
.ec .gm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ec .lg-dot { width: 11px; height: 11px; border-radius: 50%; }
.ec .lg-dot.plant { background: var(--wine); }
.ec .lg-dot.tool { background: var(--green); border: 2px solid var(--green); }
.ec .lg-dot.root { width: 12px; height: 12px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #b98a3e; }

/* the three beds */
.ec .beds { max-width: 1180px; margin: 30px auto 0; padding: 0 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.ec .bed { position: relative; }
.ec .plant { display: block; position: relative; text-decoration: none; color: var(--ink); background: linear-gradient(165deg, color-mix(in srgb, var(--bc) 13%, #fffdf9), color-mix(in srgb, var(--bc) 5%, #fffdf9));
  border: 1.5px solid color-mix(in srgb, var(--bc) 45%, var(--hair)); border-top: 5px solid var(--bc); border-radius: 12px; padding: 18px 18px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); transition: transform 0.16s, box-shadow 0.16s; }
.ec .plant:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.13); }
.ec .plant-k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bc); font-weight: 700; }
.ec .plant-name { display: block; font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.02; letter-spacing: -0.6px; margin: 7px 0 8px; }
.ec .plant-blurb { display: block; font-family: var(--body); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ec .plant-go { display: inline-block; margin-top: 12px; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--bc); }

.ec .stem { position: relative; height: 34px; margin: 0 0 2px 24px; }
.ec .stem::before { content: ""; position: absolute; left: 0; top: 2px; bottom: -6px; width: 0; border-left: 2px dashed color-mix(in srgb, var(--bc) 60%, transparent); }
.ec .stem-hand { position: absolute; left: 16px; top: 8px; font-family: var(--hand); font-weight: 700; font-size: 12.5px; color: color-mix(in srgb, var(--bc) 78%, #000); transform: rotate(-1.5deg); white-space: nowrap; }

.ec .leaves { position: relative; margin-left: 24px; display: flex; flex-direction: column; gap: 11px; padding-bottom: 6px; }
.ec .leaves::before { content: ""; position: absolute; left: 0; top: -8px; bottom: 10px; border-left: 2px dashed color-mix(in srgb, var(--bc) 55%, transparent); }
.ec .leaf { position: relative; display: block; margin-left: 20px; text-decoration: none; color: var(--ink); background: #fffdf9; border: 1px solid var(--hair); border-left: 3px solid var(--bc); border-radius: 9px; padding: 9px 13px; box-shadow: 0 2px 7px rgba(0,0,0,0.05); transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s; }
.ec .leaf::before { content: ""; position: absolute; left: -20px; top: 18px; width: 18px; border-top: 2px dashed color-mix(in srgb, var(--bc) 55%, transparent); }
.ec .leaf-dot { position: absolute; left: -24px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--bc); border: 2px solid var(--cream); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent); }
.ec .leaf-name { display: block; font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.2px; }
.ec .leaf-tag { display: block; font-family: var(--body); font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.ec .leaf:hover { transform: translateX(3px); box-shadow: 0 6px 15px rgba(0,0,0,0.11); border-left-width: 5px; }

.ec .bed-offshoot { margin: 8px 0 0 24px; font-family: var(--hand); font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
.ec .bed-offshoot a { color: color-mix(in srgb, var(--bc) 80%, #000); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--bc) 30%, transparent); }
.ec .bed-root { margin: 14px 0 0 0; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); }
.ec .bed-root a { color: #8a6a2e; text-decoration: none; border-bottom: 1px solid rgba(138,106,46,0.35); }
.ec .root-dot { width: 12px; height: 12px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #b98a3e; flex-shrink: 0; }

/* the band between beds and shipped */
.ec .gmband { max-width: 1180px; margin: 50px auto 0; padding: 0 46px; }
.ec .gmband-hand { font-family: var(--hand); font-weight: 700; font-size: 17px; color: var(--wine); transform: rotate(-1deg); display: inline-block; }
.ec .gmband-h { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 34px); line-height: 1.04; letter-spacing: -0.8px; color: var(--ink); margin-top: 4px; }

/* shipped into the world */
.ec .shipped { max-width: 1180px; margin: 22px auto 0; padding: 0 46px; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; }
.ec .fruit { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fffdf9; border: 1px solid var(--hair); border-radius: 12px; padding: 15px 16px 13px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); transition: transform 0.15s, box-shadow 0.15s; position: relative; }
.ec .fruit:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.ec .fruit-badge { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wine); font-weight: 700; }
.ec .fruit-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.4px; margin: 5px 0 3px; }
.ec .fruit-tag { font-family: var(--body); font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; flex: 1; }
.ec .fruit-live { font-family: var(--mono); font-size: 10px; color: var(--green); margin-top: 11px; font-weight: 600; }
.ec .fruit-live.off { color: var(--ink-soft); }

/* sparks */
.ec .sparks-wrap { max-width: 1180px; margin: 34px auto 0; padding: 0 46px; }
.ec .sparks-lbl { font-family: var(--hand); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.ec .sparks-lbl .doodle { color: var(--wine); }
.ec .sparks { display: flex; flex-wrap: wrap; gap: 12px; }
.ec .spark { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, #fffdf9, #f6efe1); border: 1px dashed rgba(21,18,15,0.28); border-radius: 100px; padding: 9px 18px; transition: transform 0.14s; }
.ec .spark:hover { transform: translateY(-2px); border-style: solid; }
.ec .spark-name { font-family: var(--display); font-weight: 700; font-size: 14px; }
.ec .spark-tag { font-family: var(--body); font-size: 11px; color: var(--ink-soft); }

/* the content root system */
.ec .rootsys { max-width: 1180px; margin: 58px auto 0; padding: 0 46px; }
.ec .rootsys-head { border-top: 2px solid var(--ink); padding-top: 26px; }
.ec .topics { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; }
.ec .topic { position: relative; background: linear-gradient(165deg, color-mix(in srgb, var(--tc) 8%, #fffdf9), #fffdf9); border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--hair)); border-radius: 10px; padding: 20px 18px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.ec .topic .tape { position: absolute; top: -9px; left: 22px; width: 62px; height: 20px; background: color-mix(in srgb, var(--tc) 22%, rgba(255,255,255,0.7)); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); transform: rotate(-3deg); opacity: 0.85; }
.ec .topic-h { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; color: var(--ink); }
.ec .topic-dot { width: 13px; height: 13px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--tc); }
.ec .topic-blurb { font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 12px; }
.ec .topic-asks-l { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--tc); font-weight: 700; margin-bottom: 6px; }
.ec .topic-asks { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ec .topic-asks li { font-family: var(--hand); font-weight: 500; font-size: 13.5px; line-height: 1.35; color: rgba(10,10,11,0.8); padding-left: 15px; position: relative; }
.ec .topic-asks li::before { content: "“"; position: absolute; left: 0; top: 1px; color: var(--tc); font-family: var(--serif); font-size: 16px; }
.ec .topic-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 11px; border-top: 1px dashed var(--hair); }
.ec .topic-count { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.3px; color: var(--ink-soft); }
.ec .topic-go { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tc); text-decoration: none; }
.ec .topic-go:hover { text-decoration: underline; }

/* cross-highlight when hovering a topic */
.ec [data-topics].lit { outline: 2px solid var(--wine); outline-offset: 2px; box-shadow: 0 8px 22px rgba(224,24,45,0.18) !important; }
.ec [data-topics].dim { opacity: 0.4; }
.ec [data-topics] { transition: opacity 0.16s, box-shadow 0.16s; }

@media (max-width: 900px) { .ec .beds { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .ec .gmintro, .ec .beds, .ec .gmband, .ec .shipped, .ec .sparks-wrap, .ec .rootsys { padding-left: 20px; padding-right: 20px; } }

/* build.html — "what it's part of" (internal ecosystem, replaces external credits) */
.ec .partchip .pr-t { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 10px; }
.ec .partchip .pr-big { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--dc, var(--ink)); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--dc, var(--ink)) 30%, transparent); }
.ec .partchip .pr-big:hover { border-bottom-color: var(--dc, var(--ink)); }
.ec .partchip .pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ec .partchip .pr-chips a { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; background: #fffdf9; border: 1px solid var(--hair); border-left: 3px solid var(--dc, var(--ink)); border-radius: 7px; padding: 6px 11px; transition: transform 0.13s; }
.ec .partchip .pr-chips a:hover { transform: translateY(-2px); }
.ec .partchip .pr-t2 { font-family: var(--hand); font-weight: 500; font-size: 13.5px; color: var(--ink-soft); margin-top: 11px; }
.ec .partchip .pr-t2 a { color: color-mix(in srgb, var(--dc, var(--ink)) 80%, #000); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--dc, var(--ink)) 30%, transparent); }
.ec .partchip .pr-roots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 11px; border-top: 1px dashed var(--hair); font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-soft); }
.ec .partchip .pr-roots a { color: #8a6a2e; text-decoration: none; border-bottom: 1px solid rgba(138,106,46,0.35); }

/* ============================================================
   THE TWILIGHT GARDEN-WEB (map.html) , a still, glowing spider-web
   at dusk. Themes = seed-pods, questions = dewdrops, all woven in
   luminous silk. Solved once then frozen: no physics, no zoom/drag.
   ============================================================ */
.ec .gm-nudge { font-family: var(--hand); font-weight: 700; color: var(--wine); font-size: 1.02em; }

/* the dusk canvas , one contained, framed panel (title + web + legend live together) */
.ec .webband { position: relative; max-width: 1200px; margin: 22px auto 0; padding: 34px 34px 22px; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(66% 52% at 50% 40%, rgba(255,120,140,0.12), transparent 64%),
    radial-gradient(54% 54% at 16% 78%, rgba(140,160,255,0.10), transparent 60%),
    radial-gradient(50% 52% at 86% 76%, rgba(167,217,119,0.08), transparent 60%),
    linear-gradient(172deg, #271b2b, #180f1c 62%, #201626);
  border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 26px 64px rgba(18,10,20,0.34), inset 0 1px 0 rgba(255,255,255,0.06); }
.ec .webband::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.5px); background-size: 28px 28px; }
.ec .web-inner { position: relative; z-index: 1; }
.ec .web-head { text-align: center; max-width: 680px; margin: 2px auto 0; }
.ec .web-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: #eaa2b0; }
.ec .web-title { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.6vw, 46px); line-height: 0.98; letter-spacing: -1.1px; color: #f7f3eb; margin-top: 9px; }
.ec .web-title em { font-style: italic; font-family: var(--serif); font-weight: 500; color: #ff8a9a; }
.ec .web-lede { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: rgba(244,241,234,0.6); max-width: 58ch; margin: 11px auto 0; }
.ec .web-hint { display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px; color: #f2ecdd;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.15); border-radius: 100px; padding: 8px 16px; }
.ec .wh-pulse { width: 9px; height: 9px; border-radius: 50%; background: #ecc879; box-shadow: 0 0 0 0 rgba(236,200,121,0.6); animation: whpulse 2.4s ease-out infinite; flex-shrink: 0; }
.ec .web-hint .wh-touch { display: none; }
@media (hover: none) { .ec .web-hint .wh-hover { display: none; } .ec .web-hint .wh-touch { display: inline; } }
@keyframes whpulse { 0% { box-shadow: 0 0 0 0 rgba(236,200,121,0.5); } 70% { box-shadow: 0 0 0 9px rgba(236,200,121,0); } 100% { box-shadow: 0 0 0 0 rgba(236,200,121,0); } }
.ec #web { display: block; width: 100%; height: auto; margin: 2px auto 0; }
@media (prefers-reduced-motion: reduce) { .ec .wh-pulse { animation: none; } }

/* silk threads (color set inline per link; opacity driven here) */
.ec .wl { fill: none; stroke-width: 1; stroke-opacity: 0.16; transition: stroke-opacity 0.22s, stroke-width 0.22s; }
.ec #web.hovering .wl { stroke-opacity: 0.05; }
.ec .wl.lit { stroke-opacity: 0.95 !important; stroke-width: 1.5; filter: url(#softglow); }
.ec .wl.dim { stroke-opacity: 0.035 !important; }

/* nodes */
.ec .wn { cursor: pointer; }
.ec .wn .halo { transition: opacity 0.22s; }
.ec .wn.theme .halo { opacity: 0.5; }
.ec .wn.build .halo { opacity: 0.32; }
.ec .wn.q .halo { opacity: 0; }
.ec .wn .core { transition: opacity 0.22s, filter 0.22s; }
.ec .wn.theme .core { filter: url(#softglow); }
.ec .wn .lbl { fill: #f4f1ea; font-family: var(--display); paint-order: stroke; stroke: rgba(18,11,20,0.6); stroke-width: 3px; stroke-linejoin: round; transition: opacity 0.22s; pointer-events: none; }
.ec .wn .lbl.pillar { font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; }
.ec .wn .lbl.tag { font-size: 12px; font-weight: 700; fill: #ece3d0; letter-spacing: 0.1px; }
.ec .wn.build .lbl, .ec .wn.q .lbl { display: none; }
.ec #web.hovering .wn.dim { opacity: 0.2; }
.ec #web.hovering .wn.dim .lbl { opacity: 0; }
.ec .wn.lit .core, .ec .wn:hover .core { filter: url(#softglow); }
.ec .wn:focus { outline: none; }
.ec .wn:focus .ring { opacity: 1; }
.ec .wn .ring { opacity: 0; }

/* hover tooltip for the small nodes (builds + questions) */
.ec .web-tip { position: absolute; z-index: 6; pointer-events: none; max-width: 250px;
  background: rgba(20,13,22,0.94); color: #f4f1ea; border: 1px solid rgba(255,255,255,0.14); border-radius: 9px;
  padding: 9px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); opacity: 0; transform: translateY(4px); transition: opacity 0.14s; }
.ec .web-tip.show { opacity: 1; transform: none; }
.ec .web-tip .tt-k { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #ecc879; margin-bottom: 4px; }
.ec .web-tip .tt-t { font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.25; }

/* legend on dusk */
.ec .web-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 10px 10px 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3px; color: rgba(244,241,234,0.6); position: relative; z-index: 1; }
.ec .web-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ec .lgd { border-radius: 50%; }
.ec .lgd.pod { width: 15px; height: 15px; background: #ff8a9a; box-shadow: 0 0 10px 2px rgba(255,138,154,0.6); }
.ec .lgd.leaf { width: 11px; height: 11px; background: #ecc879; box-shadow: 0 0 7px 1px rgba(236,200,121,0.5); }
.ec .lgd.dew { width: 7px; height: 7px; background: rgba(244,241,234,0.85); box-shadow: 0 0 6px 1px rgba(244,241,234,0.5); }
.ec .lgnote { font-style: italic; opacity: 0.7; }

/* ---------------- her words, going down (the Watch page in the garden) ---------------- */
.ec .qa { max-width: 880px; margin: 40px auto 0; padding: 0 46px; }
.ec .qa-head { border-top: 2px solid var(--ink); padding-top: 26px; }
.ec .qa-head .gm-sub { max-width: 62ch; }
.ec .qa-topic { margin-top: 44px; }
.ec .qa-topic-head { display: flex; align-items: center; gap: 11px; border-bottom: 2px solid var(--tc); padding-bottom: 10px; }
.ec .qa-dot { width: 15px; height: 15px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--tc); flex-shrink: 0; }
.ec .qa-title { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -0.5px; color: var(--ink); }
.ec .qa-n { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.ec .qa-blurb { font-family: var(--hand); font-weight: 500; font-size: 16px; line-height: 1.45; color: rgba(10,10,11,0.72); margin: 13px 0 6px; }
.ec .qa-list { margin-top: 8px; }
.ec .qa-item { padding: 20px 0 20px 18px; border-bottom: 1px dashed var(--hair); border-left: 3px solid transparent; transition: border-left-color 0.16s, background 0.16s; }
.ec .qa-item:hover { border-left-color: var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 6%, transparent), transparent 60%); }
.ec .qa-q { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: -0.3px; color: var(--ink); }
.ec .qa-a { font-family: var(--body); font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin-top: 9px; }
.ec .qa-watch { display: inline-block; margin-top: 11px; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.4px; color: var(--tc); text-decoration: none; }
.ec .qa-watch:hover { text-decoration: underline; }

@media (max-width: 600px) { .ec .qa, .ec .gmintro { padding-left: 20px; padding-right: 20px; } .ec .webwrap { margin-left: 16px; margin-right: 16px; } }

/* ---------------- the question explorer (tagged, searchable, compact) ---------------- */
.ec .qa { max-width: 1200px; }
.ec .qa-controls { margin: 22px 0 4px; }
.ec .qsearch { width: 100%; box-sizing: border-box; font-family: var(--body); font-size: 15px; color: var(--ink);
  background: #fffdf9; border: 1.5px solid var(--hair); border-radius: 100px; padding: 13px 20px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ec .qsearch::placeholder { color: var(--ink-soft); }
.ec .qsearch:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 14%, transparent); }
.ec .qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.ec .qchip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2px; text-transform: lowercase;
  color: var(--ink-soft); background: transparent; border: 1px solid var(--hair); border-radius: 100px; padding: 6px 11px; cursor: pointer; transition: border-color 0.14s, color 0.14s, background 0.14s; }
.ec .qchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--qc, var(--ink-soft)); flex-shrink: 0; opacity: 0.85; }
.ec .qchip[data-tag="all"]::before { display: none; }
.ec .qchip:hover { border-color: var(--ink); color: var(--ink); }
.ec .qchip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ec .qchip.on::before { background: var(--cream); opacity: 1; }
.ec .qchip .qn { font-size: 9.5px; opacity: 0.55; }

.ec .qgrid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; align-items: start; }
.ec .qc { display: flex; flex-direction: column; background: #fffdf9; border: 1px solid var(--hair); border-radius: 11px; padding: 15px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.ec .qc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.09); border-color: color-mix(in srgb, var(--ink) 22%, var(--hair)); }
.ec .qc-tags { margin-bottom: 10px; }
.ec .qc-tag { font-family: var(--mono); font-size: 8px; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 600; color: var(--qc, var(--ink-soft)); display: inline-flex; align-items: center; gap: 5px; }
.ec .qc-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--qc, var(--ink-soft)); }
.ec .qc-q { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.18; letter-spacing: -0.3px; color: var(--ink); }
.ec .qc-a { font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec .qc:hover .qc-a { -webkit-line-clamp: 20; line-clamp: 20; }
.ec .qc-watch { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: 0.4px; color: var(--cobalt); text-decoration: none; margin-top: 12px; opacity: 0; transition: opacity 0.15s; }
.ec .qc:hover .qc-watch { opacity: 1; }
.ec .qempty { font-family: var(--hand); font-weight: 500; font-size: 16px; color: var(--ink-soft); text-align: center; padding: 30px 0; }
.ec .qa-foot { margin-top: 26px; text-align: center; }
.ec .qa-foot-link { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wine); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--wine) 30%, transparent); padding-bottom: 2px; }
.ec .qa-foot-link:hover { border-bottom-color: var(--wine); }

@media (max-width: 600px) { .ec .qgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .ec .qc-q { font-size: 14px; } }
.ec .qc[hidden] { display: none !important; }

/* scroll affordance , a fixed hint so it's obvious there's more below */
html { scroll-behavior: smooth; }
.ec .scrollcue { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none;
  background: rgba(20,13,22,0.92); color: #f4f1ea; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px;
  padding: 9px 20px 7px; box-shadow: 0 10px 30px rgba(0,0,0,0.34); cursor: pointer;
  transition: opacity 0.3s, transform 0.3s; }
.ec .scrollcue .sc-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.ec .scrollcue .sc-chev { font-size: 15px; line-height: 1; color: #ecc879; animation: scbounce 1.5s ease-in-out infinite; }
.ec .scrollcue:hover { border-color: rgba(255,255,255,0.4); }
.ec .scrollcue.gone { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }
@keyframes scbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ec .scrollcue .sc-chev { animation: none; } }
@media (max-width: 560px) { .ec .scrollcue { bottom: 14px; padding: 8px 16px 6px; } .ec .scrollcue .sc-label { font-size: 9px; } }

/* phone constellation: bigger labels to match the bigger pods (viewBox is 640 wide on mobile) */
@media (max-width: 640px) {
  .ec .wn .lbl.pillar { font-size: 27px; font-weight: 900; }
  .ec .wn .lbl.tag { font-size: 20px; }
  .ec .webband { padding: 26px 16px 18px; }
  .ec .web-head { max-width: 100%; }
}