/* Terra Kreations — the scroll homepage (index-v6). Loads AFTER style.css and
   scrollcraft.css. Themes the engine with the site's own tokens and lays out the
   chapters. Grammar: chaptered editorial (a yearbook): hard-cut grounds per
   chapter, media in its own column, folio nav in the margin (the thread),
   colophon close. The engine's own selectors are never restyled here. */

:root {
  --sc-canvas: #f6f5f2;
  --sc-surface: #ffffff;
  --sc-ink: #0a0b0a;
  --sc-ink-soft: #4a4941;
  --sc-accent: #a3122c;
  --sc-accent-ink: #fdf9f4;
  --sc-font-display: Cinzel, Georgia, serif;
  --sc-font-text: "EB Garamond", Georgia, serif;
}
/* the engine's body reset wins over style.css by order; restate the site's metrics */
body { font-size: 1.06rem; line-height: 1.55; letter-spacing: 0; }
.site-header { position: static; }                     /* no fixed bar: the thread is the folio nav */
.site-footer .fine img { display: inline-block; }      /* engine blockifies img; the credit is inline */
.hero-art .sew, .cap-wrap canvas { max-width: none; }

/* ---------- chapters ---------- */
.chapter { position: relative; }
.ch-paper { background: var(--bg); background-image: var(--noise); color: var(--ink); }
.ch-ink {
  background: var(--ink-deep); background-image: var(--noise);
  --sc-ink: #f3f1ea; --sc-ink-soft: #b3b1a8; color: var(--sc-ink);
}
.ch-leather {
  background: #4a2414 url("../assets/leather-cover.jpg") center / 1000px auto;
  --sc-ink: #f6efe4; --sc-ink-soft: #dcccb2; color: var(--sc-ink);
}
.folio {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px;
  font-family: "Graduate", var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.folio b { font-size: 1.15rem; font-weight: 400; }
.folio span { font-family: var(--font-body); font-variant: small-caps; font-size: 1.02rem; letter-spacing: 0.14em; color: var(--sc-ink-soft); }

/* ---------- I · what we make (flow, reveals) ---------- */
.ch-make { padding: 40px 0 56px; }
.ch-make .section { padding-top: 0; padding-bottom: 0; }
/* chapter I: one card per service, the classic grid, squared off (3 rows of 4) */
.ch-make .cards { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-items: stretch; }
.ch-make .card { display: flex; flex-direction: column; }
.ch-make .card p { flex: 1; }
.ch-make .card .photo { flex: none; height: auto; }
.card-ask { text-decoration: none; color: inherit; justify-content: center; align-items: center; background-color: var(--ink-deep); background-image: none; border-color: var(--ink-deep); }
.card-ask h3, .card-ask p { color: var(--paper); }
.card-ask p { flex: 0; color: rgba(246, 245, 242, 0.78); }
.card-ask .ask-mark { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--gold-soft); margin: 10px 0 14px; }
.card-ask::after { background: var(--gold); color: var(--ink-deep); }
.card-ask:hover .ask-mark { color: #fff; }
@media (max-width: 1100px) { .ch-make .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ch-make .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ch-make .card { padding: 22px 14px 18px; } }

/* ---------- the hush: authored silence before the peak ---------- */
.ch-hush { min-height: 68vh; display: grid; place-items: center; text-align: center; padding: 14vh 20px; }
.ch-hush p {
  margin: 0; max-width: 22em;
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: var(--sc-ink-soft); text-wrap: balance;
}

/* ---------- II · the needle (the one scrub; the peak) ---------- */
.floor {
  display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center;
  height: 100svh; padding: 0 clamp(20px, 5vw, 72px); max-width: 1320px; margin: 0 auto;
}
.floor-fig {
  position: relative; margin: 0; justify-self: end;
  height: calc(100svh - 96px); aspect-ratio: 9 / 16; max-width: 100%;
  border: 1px solid rgba(215, 186, 106, 0.55);
  box-shadow: inset 0 0 0 1px #0a0b0a, 0 30px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden; background: #1a0f0c;
}
.floor-fig .sc-stage__poster, .floor-fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.floor-fig figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-family: "Graduate", var(--font-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(246, 244, 239, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.floor-copy { max-width: 30em; }
.floor-copy h2 {
  margin: 0 0 22px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: 0.01em; text-wrap: balance;
}
.floor-copy h2 em { font-family: var(--font-body); font-style: italic; font-weight: 500; color: var(--gold-soft); }
.floor-copy p { margin: 0 0 14px; font-size: 1.18rem; line-height: 1.55; text-wrap: pretty; }
.floor-copy p.fine { font-size: 1rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .floor { grid-template-columns: 1fr; grid-template-rows: 56svh 44svh; gap: 0; padding: 0; align-items: stretch; }
  .floor-fig { height: 100%; width: 100%; aspect-ratio: auto; justify-self: stretch; border: 0; box-shadow: none; }
  .floor-copy { max-width: none; padding: 16px 20px 18px; overflow: hidden; }
  .floor-copy h2 { font-size: clamp(1.45rem, 6.2vw, 2rem); margin-bottom: 10px; }
  .floor-copy p { font-size: 1.02rem; margin-bottom: 8px; }
}

/* ---------- III · real jobs (pan on leather) ---------- */
.ch-jobs [data-sc-stage] { height: 100svh; display: flex; align-items: center; overflow: hidden; }
.jobs-rail { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); padding: 0 clamp(20px, 6vw, 96px); width: max-content; }
.jobs-lead { flex: 0 0 auto; width: clamp(280px, 30vw, 420px); }
.jobs-lead h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; color: #fff8ec; text-wrap: balance;
}
.jobs-lead p { margin: 0; max-width: 26em; font-size: 1.1rem; color: var(--sc-ink-soft); }
.print {
  flex: 0 0 auto; width: clamp(240px, 26vw, 380px); margin: 0;
  background: #fffdf8; padding: 10px 10px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: rotate(var(--tilt, 0deg));
}
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.94); }
.print figcaption {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 10px;
  font-family: "Graduate", var(--font-display); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2d251d;
}
.print figcaption span { font-family: var(--font-body); font-variant: small-caps; text-transform: none; font-size: 0.98rem; letter-spacing: 0.06em; color: #6b5d4c; }
.jobs-note { flex: 0 0 auto; width: clamp(220px, 22vw, 300px); }
.jobs-note a { color: var(--gold-soft); font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.jobs-note a:hover { text-decoration: underline; }
/* staggered settle driven from the act's --sc-p; first print exempt via --at:0 */
@media (prefers-reduced-motion: no-preference) {
  .print {
    --k: clamp(0, calc((var(--sc-p, 1) - var(--at, 0)) * 6), 1);
    opacity: calc(0.55 + 0.45 * var(--k));
    transform: rotate(var(--tilt, 0deg)) translateY(calc((1 - var(--k)) * 18px));
  }
}

/* ---------- IV · how it works + the number (flow, count) ---------- */
.ch-how { padding: 72px 0 40px; }
.ch-how .section { padding-top: 0; }
.proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin: 44px 0 0; font-size: 1.2rem; color: var(--ink-soft); }
.proof .n { font-family: "Graduate", var(--font-display); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; color: var(--ink-deep); font-variant-numeric: tabular-nums; }
.proof a { color: var(--red-dark); }
.ch-how .rev-wrap { margin-top: 28px; }
/* review cards: a true grid, equal heights, six cards in two rows of three */
.ch-how .rev-grid:not([hidden]) { display: grid; columns: auto; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.ch-how .rev-wrap { align-items: stretch; }
.ch-how .rev-card { margin: 0; height: 100%; }
.ch-how .rc-foot { margin-top: auto; }
.ch-how .rev-card .rc-text { -webkit-line-clamp: 5; }
.ch-how .rev-card.expanded { grid-column: 1 / -1; }
.ch-how .rev-card:nth-child(n+7) { display: none; }
@media (max-width: 1100px) { .ch-how .rev-grid:not([hidden]) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ch-how .rev-grid:not([hidden]) { grid-template-columns: 1fr; } }

/* ---------- V · colophon (the close) ---------- */
.ch-close { padding: 0; }
.ch-close .marquee { padding: 16px 0 12px; border-bottom: 1px solid rgba(215, 186, 106, 0.28); }
.colophon {
  max-width: 1220px; margin: 0 auto; padding: 56px 20px 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch;
}
.visit-mini { display: contents; }               /* its four children sit on the colophon grid */
.patch {
  position: relative; padding: 24px 28px 20px;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  background: #efe6d2 radial-gradient(ellipse at 50% 35%, #f6efdf 0%, #ebe1cb 70%, #e2d6bc 100%);
  border: 2px dashed rgba(163, 18, 44, 0.5); border-radius: 6px;
  box-shadow: inset 0 0 0 5px #efe6d2, inset 0 0 0 6px rgba(163, 18, 44, 0.35), var(--shadow-soft);
}
.patch .lab { margin: 0 0 8px; font-family: "Graduate", var(--font-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-dark); }
.patch canvas { width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.patch .sub { margin: 8px 0 0; font-family: var(--font-body); font-variant: small-caps; font-size: 0.95rem; letter-spacing: 0.12em; color: var(--ink-soft); }
.plate { display: flex; flex-direction: column; justify-content: center; padding: 8px 0; }
.plate h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: 0.02em; text-wrap: balance; }
.plate .run { margin: 0; font-size: 1.16rem; max-width: 34em; }
.plate .run a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.colophon .hours-card { height: 100%; box-sizing: border-box; padding: 16px 18px 14px 62px; }
.colophon .hours-list li { padding: 6px 0; font-size: 0.98rem; }
.map-card {
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 10px;
  background: var(--paper); border: 1px solid var(--line-strong);
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--gold-line), var(--shadow-soft);
}
.map-card .visit-map { flex: 1; padding: 0; border: 0; box-shadow: none; background: none; display: flex; }
.map-card .visit-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; flex: 1; }
.map-card address { font-style: normal; margin: 10px 4px 2px; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 860px) {
  .colophon { grid-template-columns: 1fr; gap: 18px; padding-top: 36px; }
  .plate { text-align: center; align-items: center; }
  .colophon .hours-card { padding-left: 18px; }
  .map-card .visit-map iframe { min-height: 260px; }
}

/* ---------- V · say hello (the sentence form, one index card per field) ---------- */
.ch-hello { padding: 64px 0 76px; }
.ch-hello .section { padding-top: 0; padding-bottom: 0; }
.hello-h { margin: 0 0 12px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: 0.02em; line-height: 1.12; color: #f6f4ef; text-wrap: balance; max-width: 22ch; }
.hello-h em { font-family: var(--font-body); font-style: italic; font-weight: 500; color: var(--gold-soft); letter-spacing: 0; }
.hello-sub { margin: 0 0 30px; max-width: 46em; font-size: 1.14rem; color: rgba(246, 244, 239, 0.78); }
.hello-grid[hidden] { display: none; }
.hello-grid { display: grid; grid-template-columns: 250px 1fr 1.25fr 1fr; grid-auto-rows: minmax(0, auto); gap: 16px; counter-reset: fld; }
.hello-rail {
  grid-row: 1 / span 2; padding: 22px 20px 18px; color: #f2e9d8;
  background: #431e14 url("../assets/leather-cover.jpg?v=48") center / cover;
  box-shadow: inset 0 0 0 1px rgba(215, 186, 106, 0.55), inset 0 0 0 5px rgba(0, 0, 0, 0.25), inset 0 0 0 6px rgba(215, 186, 106, 0.35), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.hello-rail img { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 0 14px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.hello-rail p { margin: 0 0 12px; font-size: 1rem; line-height: 1.4; }
.hello-rail .k { display: block; font-family: "Graduate", var(--font-display); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 3px; }
.hello-rail a { color: #fff; text-decoration: none; }
.hello-rail .open-badge { display: inline-flex; align-items: center; gap: 7px; }
.hello-rail .rail-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(215, 186, 106, 0.35); font-style: italic; color: rgba(242, 233, 216, 0.8); }
.fcard {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 28px 18px 18px 36px; color: var(--ink);
  background: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 0 24px, rgba(163, 18, 44, 0.42) 24px 26px, transparent 26px),
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(28, 43, 69, 0.16) 26px 27.5px);
  border: 1px solid var(--line-strong); border-top: none;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px var(--gold-line), 0 10px 26px rgba(0, 0, 0, 0.35);
  counter-increment: fld; cursor: text;
}
.fcard::before { content: ""; position: absolute; top: 0; left: -1px; right: -1px; height: 6px; background: linear-gradient(90deg, var(--red) 0 72%, var(--gold) 72% 75%, var(--ink-deep) 75% 100%); }
.fcard::after { content: counter(fld, upper-roman); position: absolute; top: 6px; right: -1px; background: var(--ink-deep); color: var(--gold-soft); font-family: "Graduate", var(--font-display); font-size: 0.7rem; letter-spacing: 0.08em; padding: 5px 11px 3px; box-shadow: inset 0 0 0 1px var(--gold-line); }
.fcard.bad { box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px var(--red), 0 10px 26px rgba(0, 0, 0, 0.35); }
.fnum { font-family: "Graduate", var(--font-display); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.fq { font-family: var(--font-body); font-weight: 600; font-size: 1.18rem; line-height: 1.25; color: var(--ink); }
.flab { margin-top: 6px; font-family: "Graduate", var(--font-display); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.fcard input:not([type="file"]), .fcard textarea, .fcard select {
  width: 100%; box-sizing: border-box; margin: 0; padding: 6px 0 5px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 1.08rem; line-height: 1.3; outline: none; -webkit-appearance: none; appearance: none;
}
.fcard input::placeholder, .fcard textarea::placeholder { color: rgba(28, 43, 69, 0.42); font-style: italic; }
.fcard input:focus, .fcard textarea:focus, .fcard select:focus { border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.fcard select { cursor: pointer; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a3122c' stroke-width='1.6'/></svg>") right 2px center no-repeat; padding-right: 20px; }
.f1 { grid-column: 2; grid-row: 1; } .f2 { grid-column: 2; grid-row: 2; } .f3 { grid-column: 3; grid-row: 1 / span 2; } .f4 { grid-column: 4; grid-row: 1; } .f5 { grid-column: 4; grid-row: 2; }
.fcard.tall textarea { flex: 1; min-height: 150px; resize: vertical; }
.f4 { cursor: default; }
.hf-art { cursor: pointer; }
.hf-art input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hf-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; margin-top: 2px; padding: 10px; border: 1px dashed rgba(163, 18, 44, 0.5); text-align: center; }
.hf-art-preview { display: none; max-height: 90px; width: auto; max-width: 100%; }
.hf-art.has .hf-art-preview[src] { display: block; }
.hf-art-name { display: none; font-size: 0.92rem; color: var(--ink); word-break: break-all; }
.hf-art.has .hf-art-name { display: block; }
.hf-art-hint { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.hf-art.has .hf-art-hint { display: none; }
.hf-art-clear { display: none; position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 28px; height: 28px; border: 1px solid var(--line-strong); background: #fff; color: var(--red); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.hf-art.has .hf-art-clear { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hello-submit {
  grid-column: 1 / -1; position: relative; margin-top: 10px; padding: 22px 24px 20px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 14px 34px rgba(163, 18, 44, 0.35); transition: background 0.25s ease, transform 0.25s ease;
}
.hello-submit::before, .hello-submit::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: conic-gradient(from -45deg at 50% 100%, var(--red) 90deg, transparent 0) 0 0 / 16px 8px repeat-x; }
.hello-submit::before { top: -8px; }
.hello-submit::after { bottom: -8px; transform: scaleY(-1); }
.hello-submit i { font-style: normal; color: var(--gold-soft); }
.hello-submit:hover { background: var(--red-dark, #7d0d21); transform: translateY(-2px); }
.hello-submit:disabled { cursor: wait; opacity: 0.85; }
.hello-submit.busy i { animation: tk-spin 0.9s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
.hello-note { grid-column: 1 / -1; margin: 6px 0 0; min-height: 1.4em; text-align: center; font-size: 1.02rem; color: rgba(246, 244, 239, 0.75); }
.hello-note.bad { color: #ffb3bd; }
.hello-done {
  max-width: 640px; margin: 10px auto 0; padding: 30px 32px 26px; text-align: center; color: var(--ink);
  background: #efe6d2 radial-gradient(ellipse at 50% 35%, #f6efdf 0%, #ebe1cb 70%, #e2d6bc 100%);
  border: 2px dashed rgba(163, 18, 44, 0.5); border-radius: 6px;
  box-shadow: inset 0 0 0 5px #efe6d2, inset 0 0 0 6px rgba(163, 18, 44, 0.35), 0 14px 34px rgba(0, 0, 0, 0.4);
}
.hello-done .lab { margin: 0 0 8px; font-family: "Graduate", var(--font-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-dark); }
.hello-done h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; }
.hello-done p { margin: 0 0 6px; font-size: 1.08rem; }
.hello-done a { color: var(--red-dark); }
.hd-refline { font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.12em; color: var(--ink-soft); }
@media (max-width: 1100px) {
  .hello-grid { grid-template-columns: 1fr 1fr; }
  .hello-rail { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 72px 1fr 1fr; gap: 6px 18px; align-items: start; }
  .hello-rail img { grid-row: 1 / span 3; margin: 0; }
  .hello-rail .rail-note { grid-column: 1 / -1; margin-top: 8px; }
  .f1, .f2, .f4, .f5 { grid-column: auto; grid-row: auto; }
  .f3 { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ch-hello { padding: 48px 0 56px; }
  .hello-grid { grid-template-columns: 1fr; gap: 12px; }
  .hello-rail { grid-template-columns: 56px 1fr; }
  .hello-rail img { width: 56px; height: 56px; grid-row: 1 / span 4; }
  .fcard { padding: 26px 14px 16px 32px; }
  .hello-submit { padding: 18px 16px; letter-spacing: 0.1em; }
}

/* ---------- the running stitch: fixed margin thread, knots as folios ---------- */
.stitch-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 46px; z-index: 60; pointer-events: none; }
.stitch-rail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; max-width: none; }
.stitch-rail .stitch-bg { fill: none; stroke: rgba(180, 140, 47, 0.22); stroke-width: 2; stroke-dasharray: 7 6; }
.stitch-rail .stitch { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; }
.stitch-rail.busy .stitch { animation: tk-sew 0.7s linear infinite; }
@keyframes tk-sew { to { stroke-dashoffset: -13; } }
.knot {
  position: absolute; left: 13px; width: 20px; height: 20px; padding: 0;
  transform: translateY(-50%); border-radius: 50%; border: 2px solid var(--gold); background: var(--bg);
  cursor: pointer; pointer-events: auto; appearance: none;
}
.knot b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 0.5rem "Graduate", serif; color: var(--gold); letter-spacing: 0; }
.knot.tied { background: var(--gold); }
.knot.tied b { color: #1a1305; }
.knot.on { box-shadow: 0 0 0 4px rgba(180, 140, 47, 0.28); }
.knot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.knot .lab {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: "Graduate", var(--font-display); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  background: rgba(10, 11, 10, 0.72); padding: 4px 9px 3px; border-radius: 2px; opacity: 0; transition: opacity 0.16s ease;
}
.knot:hover .lab, .knot:focus-visible .lab { opacity: 1; }
.needle {
  position: absolute; left: 16px; width: 14px; height: 14px;
  transform: translateY(-50%) rotate(45deg); background: #fdf6ee; border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.stitch-rail.end .needle { border-radius: 50%; transform: translateY(-50%) rotate(0); background: var(--red); border-color: var(--gold); }
@media (max-width: 860px) {
  .stitch-rail { width: 18px; }
  .knot { left: 5px; width: 12px; height: 12px; border-width: 1.5px; }
  .knot b, .knot .lab { display: none; }
  .needle { left: 4px; width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) { .stitch-rail.busy .stitch { animation: none; } }
html.snap .stitch-rail.busy .stitch { animation: none; }