/* The BraidWorks site shell (landing page + credits). The plugin page brings
   its own styles; these only frame it. Two themes, the plugin's: Linen Dark
   (default) and Linen (html[data-theme='linen'], set by theme.mjs).
   The tokens are the plugin's (shared/webview-ui/src/styles/themes.css), so
   the site, the header and the plugin read as one cloth. */

:root {
  --bg-top: #1d1a16;
  --bg-bot: #2a251f;
  --text: #e6ddcc;
  --muted: rgba(230, 221, 204, 0.68);
  --accent: #98a0cf;
  --accent-rgb: 152, 160, 207;
  --accent2: #d09068;
  --accent2-rgb: 208, 144, 104;
  --on-accent: #1d1a16;
  --panel: rgba(34, 30, 24, 0.85);
  --well: #16130f;
  --line: rgba(230, 221, 204, 0.14);
  --shade-rgb: 29, 26, 22;
  --shadow: rgba(0, 0, 0, 0.45);
  --strand-0: #8a93cc;
  --strand-1: #cf8660;
  --strand-2: #c9748c;
  --strand-3: #6fb09f;
  --strand-4: #a18bc4;
  --strand-5: #c99a55;
}

html[data-theme='linen'] {
  --bg-top: #f4efe3;
  --bg-bot: #ddd4c0;
  --text: #2a2631;
  --muted: rgba(42, 38, 49, 0.68);
  --accent: #3b4cb8;
  --accent-rgb: 59, 76, 184;
  --accent2: #b4532d;
  --accent2-rgb: 180, 83, 45;
  --on-accent: #f4efe3;
  --panel: rgba(249, 245, 234, 0.82);
  --well: #f9f5ea;
  --line: rgba(42, 38, 49, 0.16);
  --shade-rgb: 244, 239, 227;
  --shadow: rgba(60, 45, 20, 0.28);
  --strand-0: #3b4cb8;
  --strand-1: #b4532d;
  --strand-2: #c23a62;
  --strand-3: #1f8a76;
  --strand-4: #7a47b8;
  --strand-5: #c27a14;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-bot);
  /* The banner floats over the page once the hero has gone (below): anchor
     targets land below it */
  scroll-padding-top: 4.5rem;
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 6.5rem;   /* the banner wraps to two lines */
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg-bot) 900px)
    var(--bg-bot);
}

a {
  color: inherit;
}

code {
  font-size: 0.92em;
  color: var(--accent2);
}

.x {
  color: var(--accent2);
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text);
  background: rgba(var(--shade-rgb), 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.button:hover {
  border-color: var(--accent);
}

.button.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.button.primary:hover {
  filter: brightness(1.08);
}

/* ── Landing: hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 74vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* The loom behind the title (home.mjs), then a vignette over it so the
   text reads. */
#loom {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--shade-rgb), 0.94) 0%,
    rgba(var(--shade-rgb), 0.6) 45%,
    rgba(var(--shade-rgb), 0) 80%
  );
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: 64px 20px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 8.5vw, 88px);
  letter-spacing: 0.2em;
  margin-right: -0.2em; /* optical centring of the tracking */
}

.hero-tag {
  margin: 8px 0 0;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 600;
  color: var(--accent);
}

.hero-sub {
  margin: 18px auto 30px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.hero-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* The homepage's DARK | LINEN, over the hero's top corner (header.css styles it). */
.hero .bw-theme {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
}

/* ── Landing: the pinned banner (compressed hero) ─────────────────────── */

/* The hero's compressed twin, in the site bar's clothes (header.css): hidden
   above the page; home.mjs slides it in once the hero has scrolled off the
   top, and away again when the hero is back, so the bar never fights the hero
   for the same space. Both classes on the selector: .bw-header's own
   `position: sticky` (header.css loads after this sheet) must not win; fixed
   also lifts it out of the flow, so hidden it takes no space. */
.bw-header.site-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(var(--shade-rgb), 0.88);
  backdrop-filter: blur(6px);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

.bw-header.site-banner.stuck {
  transform: none;
}

/* The nav is its own scroller between the fixed home link and theme toggle:
   on a narrow screen it swipes sideways instead of spilling over them.
   Centred with auto margins, not justify-content: centred flex content that
   overflows spills off BOTH ends, and the left spill can't be scrolled to. */
.site-banner-nav {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* Soft edges hint that there is more to swipe to. */
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.site-banner-nav::-webkit-scrollbar {
  display: none;
}

.site-banner-nav > :first-child {
  margin-left: auto;
}

.site-banner-nav > :last-child {
  margin-right: auto;
}

/* Tight: tighter buttons so the whole row fits on a laptop. Set by home.mjs
   when the full-size row doesn't fit (before falling back to compact), not
   by a breakpoint — a fixed width let the row flip MENU → row → MENU → row
   as the window widened past it. */
.site-banner.tight .site-banner-nav {
  gap: 6px;
}

.site-banner.tight .site-banner-nav .bw-header-button {
  padding: 5px 9px;
  letter-spacing: 0.05em;
}

/* Compact: when the links no longer fit one row (home.mjs measures it, so
   the switch follows the number of plugins, not a guessed width), the bar
   keeps the home link and theme toggle, and the links fold into a menu
   that drops below the bar as a grid of the same buttons. */
/* Centred in the bar (out of the flow, so the home link and theme toggle
   keep their ends) and wide enough to read as a button, not an icon. */
.site-banner-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 112px;
  padding: 6px 16px;
  line-height: 1;
}

.site-banner-menu span {
  margin-right: 6px;
  font-size: 15px;
  vertical-align: -1px;
}

.site-banner.compact .site-banner-menu {
  display: block;
}

.site-banner.compact .bw-theme {
  margin-left: auto;
}

.site-banner.compact .site-banner-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  max-height: calc(100vh - 60px);
  padding: 12px 14px 16px;
  overflow-y: auto;
  white-space: normal;
  background: rgba(var(--shade-rgb), 0.96);
  border-bottom: 1px solid var(--hdr-line);
  mask-image: none;
}

.site-banner.compact.open .site-banner-nav {
  display: grid;
}

.site-banner.compact .site-banner-nav > * {
  margin: 0;
  padding: 9px 10px;
  text-align: center;
}

.site-banner.compact.open .site-banner-menu {
  color: var(--hdr-on-accent);
  background: var(--hdr-accent);
  border-color: var(--hdr-accent);
}

@media (max-width: 640px) {
  .bw-header.site-banner {
    gap: 6px;
    padding: 6px 8px;
  }
  .site-banner .bw-header-home {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .site-banner-nav .bw-header-button {
    font-size: 11px;
  }
  .site-banner .bw-theme button {
    padding: 5px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-banner {
    transition: none;
  }
}

/* ── Landing: sections (CellWorks' arrangement, BraidWorks' colours) ──── */

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.hero-actions .button:not(.primary) {
  background: rgba(var(--shade-rgb), 0.6);
  backdrop-filter: blur(2px);
}

/* Anchor jumps clear the pinned banner too. */
.instrument,
section[id] {
  scroll-margin-top: 64px;
}

.section-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 36px;
  padding: 0 16px;
}

.section-intro h2 {
  margin: 8px 0 12px;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: 0.08em;
}

.section-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

.section-intro p + p {
  margin-top: 12px;
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent2);
}

.copy .kicker {
  justify-content: flex-start;
}

.concept-section,
.desktop-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.concept-grid,
.desktop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.concept-card,
.desktop-card {
  padding: 24px;
  background: rgba(var(--shade-rgb), 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.concept-card:hover,
.desktop-card:hover {
  border-color: rgba(var(--accent2-rgb), 0.4);
  transform: translateY(-2px);
}

.concept-card h3,
.desktop-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.concept-card p,
.desktop-card p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.concept-card p:last-child,
.desktop-card p:last-child {
  margin-bottom: 0;
}

.instruments {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.instrument {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.instrument:last-child {
  border-bottom: 0;
}

.instrument.flip .shot {
  order: 2;
}

/* The screenshot, whole and at its own aspect, lit from below. */
.shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--well);
  box-shadow:
    0 24px 60px var(--shadow),
    0 0 0 1px rgba(var(--accent2-rgb), 0.05);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.shot img {
  display: block;
  width: 100%;
  height: auto; /* the width/height attributes only reserve the aspect ratio */
  transition: transform 0.6s;
}

.shot:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 70px var(--shadow),
    0 0 0 1px rgba(var(--accent2-rgb), 0.35);
}

.shot:hover img {
  transform: scale(1.02);
}

/* Both captures are in the page; the theme shows the matching one. */
.shot .shot-light {
  display: none;
}

html[data-theme='linen'] .shot .shot-dark {
  display: none;
}

html[data-theme='linen'] .shot .shot-light {
  display: block;
}

.copy h2 {
  margin: 8px 0 12px;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: 0.08em;
}

.copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.copy ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.copy li {
  position: relative;
  margin: 8px 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
}

.copy li::before {
  /* a little knot */
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

@media (max-width: 820px) {
  .instrument {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .instrument.flip .shot {
    order: 0;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  padding: 28px 20px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: 0 0 6px;
}

.copyright {
  font-size: 12px;
  text-align: center;
  color: var(--text);
  opacity: 0.75;
}

.copyright a {
  color: var(--accent);
  text-decoration: none;
}

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

/* ── Credits ─────────────────────────────────────────────────────────── */

.credits-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  font-size: 14px;
  line-height: 1.6;
}

.credits-body h2 {
  margin: 32px 0 8px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent2);
}

.credits-body p {
  margin: 0 0 12px;
  color: var(--muted);
}

.notice {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.notice h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.notice-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.notice p {
  margin: 0 0 8px;
}

.notice pre {
  max-height: 260px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  background: var(--well);
  border-radius: 6px;
}

@media (max-width: 760px) {
  .instrument {
    grid-template-columns: minmax(0, 1fr);
  }
}