/* 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;
  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;
}

.site-banner-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

@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;
    padding: 5px 9px;
  }
}

@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);
  }
}