/* The morph scene (hero): the note becomes the wireframe of a BC page, the wireframe becomes the finished page.
   Moved from concepts/morph/morph.css. Only changes: base rules, header and footer live in site.css,
   and the headline rule is scoped to .scene. Every scene value is unchanged.
   Static by default (no JS, reduced motion, short screens): three frames stacked.
   html.is-scene: one pinned stage, scrubbed by morph.js. */

.scene h1, .scene h2 {
  margin: 0; font-family: var(--f-disp); font-weight: 700; color: var(--blue);
  font-size: clamp(2.5rem, 4.7vw, 4.5rem); line-height: 0.93; letter-spacing: -0.012em; text-wrap: balance;
}
.fn { color: inherit; text-decoration: none; padding: 0 0.04em; }

/* ---------- Copy ---------- */
.copy { min-width: 0; }
.lede { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.38; max-width: 26ch; margin: 18px 0 0; text-wrap: pretty; }
.ready { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font: 600 clamp(1.1875rem, 1.6vw, 1.4375rem)/1.3 var(--f-text); color: var(--ink); }
.ready svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: var(--ok); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy__cta { margin-top: 24px; }
.fnote { margin: 18px 0 0; max-width: 46ch; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- The note ---------- */
.note {
  --g: clamp(13px, calc((100vw - 2 * var(--pad)) / 22), 24px);
  position: relative; margin: 0; min-width: 0;
}
.note__sheet {
  position: relative;
  width: min(100%, calc(var(--g) * 28));
  padding: 0 calc(var(--g) * 1.2) calc(var(--g) * 1.5) calc(var(--g) * 2);
  transform: rotate(-1.6deg);
}
.paper {
  --tear: 0;
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--paper);
  background-image: var(--karo);
  background-size: var(--g) var(--g);
  background-position: -1px -1px;
  box-shadow: 0 1px 1px rgb(14 44 79 / 0.12), 0 16px 24px -6px rgb(14 44 79 / 0.16);
  transform-origin: 50% 50%;
}
/* torn edge of a spiral pad: white teeth over the top edge; fades out as the sheet becomes the page */
.paper::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -6px; height: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0V7l4-2 3 3 5-4 3 2 4-3 6 4 3-2 5 1 3-4 4 3 5-1 2 3 6-4 3 2 4-1 5 3 3-4 4 2 6-1 2 3 5-3 4 2 3-3 5 4 3-2 4 1 4-3V0z'/%3E%3C/svg%3E") 0 100% / 120px 12px repeat-x,
    linear-gradient(#fff, #fff) 0 0 / 100% 7px no-repeat;
  opacity: calc(1 - var(--tear));
}
.note__head {
  position: relative; z-index: 2;
  height: calc(var(--g) * 3);
  display: flex; align-items: flex-end; justify-content: flex-end;
  margin-right: calc(var(--g) * -0.5);
}
.note__item { position: relative; z-index: 2; margin: 0; font-size: 0; line-height: 0; }
.w {
  display: inline-block; vertical-align: top;
  width: calc(var(--g) * var(--w) / 40); height: calc(var(--g) * 2);
  margin-right: calc(var(--g) * 0.704);
  overflow: visible;
  fill: var(--ink-c, var(--pencil));
}
.w--join, .w--date { margin-right: 0; }
.note__item[data-item="b"] { margin-left: calc(var(--g) * -0.2); }
.note__item[data-item="d"] { margin-left: calc(var(--g) * 0.2); }
.note__item[data-item="e"] { margin-left: calc(var(--g) * 1.6); }
.g-probe { display: none; }

@media (max-width: 700px) {
  .note__sheet { padding-left: calc(var(--g) * 1.4); padding-right: calc(var(--g) * 0.8); }
  .br-wide { display: none; }
  .note__item[data-item="e"] { margin-left: calc(var(--g) * 0.6); }
}

/* ---------- BC page (finished) ---------- */
.bc {
  container: bc / inline-size;
  --fs: 13px;
  --ui-ink: #1f2933;
  --ui-mute: #5f6b76;
  --ui-line: #e3e8ee;
  position: relative;
  width: 100%; min-width: 0;
  font: 400 var(--fs)/1.3 var(--f-ui); color: var(--ui-ink);
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgb(14 44 79 / 0.08), 0 14px 32px -8px rgb(14 44 79 / 0.18);
}
.bc p, .bc dl, .bc dd { margin: 0; }
.bc svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bc code { font: 500 0.82em/1 var(--f-mono); }

.bc__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.5em; padding: 0 1.1em;
  background: var(--ink); color: #fff; font-size: 0.92em;
}
.bc__tools { display: flex; align-items: center; gap: 1.1em; }
.bc__avatar {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 0.78em; font-weight: 600;
}
.bc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 0.95em 1.2em 0.45em; }
.bc__crumb { display: block; font-size: 0.85em; color: var(--ui-mute); }
.bc__h { display: block; margin-top: 0.15em; font-size: 1.62em; font-weight: 600; letter-spacing: -0.01em; }
.bc__role {
  display: inline-flex; align-items: center; gap: 0.45em; flex: none;
  padding: 0.35em 0.7em; margin-top: 0.2em;
  border: 1px solid var(--rule); border-radius: 99px;
  font-size: 0.9em; font-weight: 600; color: var(--ink);
}
.bc__role svg { color: var(--blue); }
.bc__role code { color: var(--ui-mute); font-weight: 500; }

.bc__ribbon { display: flex; align-items: center; gap: 0.2em; padding: 0.25em 1em 0.55em; border-bottom: 1px solid var(--ui-line); }
.bc__acts { display: inline-flex; gap: 0.2em; }
.bc__act { display: inline-flex; align-items: center; gap: 0.42em; height: 2.35em; padding: 0 0.55em; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; }
.bc__act svg { color: var(--blue); }
.bc__act--new { margin-left: 0.3em; padding: 0 0.75em; background: var(--blue); color: #fff; font-weight: 600; }
.bc__act--new svg { color: #fff; }
.bc__ext { padding: 0.18em 0.35em; border: 1px solid rgb(255 255 255 / 0.55); border-radius: 2px; font-size: 0.78em; }
.bc__act--more { margin-left: auto; }

.bc__body { display: grid; grid-template-columns: minmax(0, 1fr) 14.5em; }
.bc__list { padding: 0.2em 0 1.4em 1.2em; min-width: 0; }
.bc__row {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 3.6em 4.4em 6.2em;
  column-gap: 0.75em; align-items: center;
  height: 2.65em; padding-right: 1em;
  border-bottom: 1px solid var(--ui-line);
}
.bc__row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc__row--h { height: 2.3em; font-weight: 600; color: var(--ui-mute); }
.bc__row--h > span { font-size: 0.88em; }
.bc__row:not(.bc__row--h) .c-no { color: var(--blue); text-decoration: underline; text-decoration-color: rgb(16 100 175 / 0.35); text-underline-offset: 0.2em; }
.c-price { text-align: right; font-variant-numeric: tabular-nums; }
.c-date { font-variant-numeric: tabular-nums; }
.bc__row:not(.bc__row--h) .c-date { color: var(--ink); font-weight: 600; }

.bc__fb { min-width: 0; margin: 0.6em 0.9em 1em 0; padding: 0.15em 0 0 0.9em; border-left: 1px solid var(--ui-line); }
.bc__fbh { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.5em; margin-bottom: 0.3em !important; border-bottom: 1px solid var(--ui-line); font-weight: 600; }
.bc__fbh svg { color: var(--ui-mute); }
.bc__dl > div { display: flex; justify-content: space-between; gap: 0.6em; padding: 0.38em 0; }
.bc__dl dt { color: var(--ui-mute); white-space: nowrap; }
.bc__dl dd { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc__err { color: #b42318; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.bc__log { margin-top: 0.6em !important; padding: 0.55em 0.65em; background: #fdf3f2; border-left: 3px solid #d64535; font-size: 0.9em; line-height: 1.35; }

/* narrow page: three columns, three rows, FactBox under the list */
@container bc (max-width: 560px) {
  .bc__body { grid-template-columns: minmax(0, 1fr); }
  .bc__head { padding: 0.8em 0.9em 0.35em; }
  .bc__crumb-x, .bc__role code, .bc__act--wide, .bc__acts .bc__act .t, .bc__dl-x, .bc__row--x, .c-no, .c-unit { display: none; }
  .bc__ribbon { padding: 0.2em 0.6em 0.5em; }
  .bc__act { padding: 0 0.5em; }
  .bc__list { padding: 0 0 0.3em 0.9em; }
  .bc__row { grid-template-columns: minmax(0, 1fr) 4.6em 6.2em; padding-right: 0.9em; height: 2.6em; }
  .bc__row--h { height: 2.3em; }
  .bc__fb { margin: 0.5em 0.9em 0.9em; padding: 0.55em 0.75em 0.65em; border: 1px solid var(--ui-line); }
  .bc__fbh { padding-bottom: 0.4em; margin-bottom: 0.2em !important; }
  .bc__dl { display: grid; grid-template-columns: repeat(3, auto); column-gap: 0.8em; }
  .bc__dl > div { display: block; padding: 0.3em 0; }
  .bc__dl > .bc__dl-x { display: none; }
  .bc__dl dt { font-size: 0.85em; }
  .bc__dl dd { text-align: left; }
  .bc__log { margin-top: 0.35em !important; }
}

/* ---------- BC page as wireframe ---------- */
.bc--wire {
  --wl: rgb(16 100 175 / 0.55);
  --wf: rgb(16 100 175 / 0.13);
  background: transparent; box-shadow: none;
  border: 1.5px solid var(--blue);
}
.bc--wire, .bc--wire * { color: transparent !important; }
.bc--wire .t { background: linear-gradient(var(--wf), var(--wf)) 0 55% / 100% 0.62em no-repeat; border-radius: 2px; }
.bc--wire .bc__ext { border-color: transparent; }
.bc--wire svg { stroke: var(--wl); }
.bc--wire .bc__bar { background: transparent; border-bottom: 1px solid var(--wl); }
.bc--wire .bc__avatar { background: none; border: 1px solid var(--wl); }
.bc--wire .bc__act { border-color: var(--wl); background: none; }
.bc--wire .bc__role { border-color: var(--wl); }
.bc--wire .bc__ribbon, .bc--wire .bc__row, .bc--wire .bc__fbh { border-bottom-color: var(--wl); }
.bc--wire .bc__fb { border-color: var(--wl); }
.bc--wire .bc__log { background: none; border-left-color: var(--wl); }
.bc--wire .bc__err, .bc--wire .c-no { text-decoration: none; }
/* the parts that come from the note (static frame; the scene draws them as morphing outlines) */
.bc--wire [data-target] { outline: 2px solid var(--blue); outline-offset: 2px; }
.bc--wire .c-date[data-target] { outline: 0; background: rgb(16 100 175 / 0.07); }
.bc--wire .bc__row--h .c-date[data-target] { outline: 2px solid var(--blue); outline-offset: 0; }

/* ---------- Static frames (no JS, reduced motion, short screens) ---------- */
.scene { max-width: var(--max); margin: 0 auto; padding: 8px var(--pad) 0; }
.pin { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.copies, .canvas { display: contents; }
.grid, .ov, .labels { display: none; }
.copy--1 { order: 1; } .note { order: 2; }
.copy--2 { order: 3; margin-top: 44px; } .bc--wire { order: 4; }
.copy--3 { order: 5; margin-top: 44px; } .bc--real { order: 6; }
.bc--wire, .bc--real { max-width: 760px; }

@media (min-width: 960px) {
  html:not(.is-scene) .pin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); row-gap: 96px; align-items: center; }
  html:not(.is-scene) .note { grid-area: 1 / 1; --g: clamp(16px, 1.6vw, 24px); }
  html:not(.is-scene) .copy--1 { grid-area: 1 / 2; }
  html:not(.is-scene) .bc--wire { grid-area: 2 / 1; }
  html:not(.is-scene) .copy--2 { grid-area: 2 / 2; margin: 0; }
  html:not(.is-scene) .bc--real { grid-area: 3 / 1; }
  html:not(.is-scene) .copy--3 { grid-area: 3 / 2; margin: 0; }
}

/* ---------- Scene (JS) ---------- */
.is-scene .scene { max-width: none; padding: 0; height: 300vh; position: relative; }
.is-scene .pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  max-width: var(--max); margin: 0 auto;
  padding: 88px var(--pad) 28px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 5vw, 96px); align-items: center;
}
.is-scene .copies { display: grid; grid-column: 2; grid-row: 1; align-self: center; }
.is-scene .copy { grid-area: 1 / 1; align-self: center; margin: 0; will-change: opacity, transform; }
.is-scene .canvas {
  display: grid; position: relative; grid-column: 1; grid-row: 1;
  align-items: center; justify-items: center;
}
.is-scene .canvas > .note, .is-scene .canvas > .bc { grid-area: 1 / 1; order: 0; }
.is-scene .note { --g: clamp(14px, min(1.74vw, 2.75vh), 25px); width: 100%; display: flex; justify-content: center; }
.is-scene .note__sheet { transform: none; }
/* JS draws the squares as separate lines once it runs (.is-live) */
.is-live .paper { background-image: none; }
.is-scene .paper, .is-scene .note__item, .is-scene .note__head { will-change: transform; }
.is-scene .note__item, .is-scene .note__head { transform-origin: 0 0; }
.is-scene:not(.is-live) .bc [data-grp], .is-scene:not(.is-live) .copy:not(.copy--1) { opacity: 0; }
.is-scene .g-probe { display: block; position: absolute; left: 0; top: 0; width: var(--g); height: 0; visibility: hidden; }
.is-scene .bc { max-width: none; }
.is-scene .bc--wire { border-color: transparent; }
.is-scene .bc--wire [data-target], .is-scene .bc--wire .bc__row--h .c-date[data-target] { outline: 0; }
.is-scene .bc--wire .c-date[data-target] { background: none; }
/* in the scene the stretched paper grid draws the wireframe's frame, row and column lines */
.is-scene .bc--wire .bc__row, .is-scene .bc--wire .bc__ribbon { border-bottom-color: transparent; }
.is-scene .bc--wire .bc__fb { border-left-color: transparent; }
.is-scene .bc--real { background: none; border-color: transparent; box-shadow: none; }
.is-scene .grid, .is-scene .ov, .is-scene .labels { display: block; position: absolute; inset: 0; pointer-events: none; }
.is-scene .grid { z-index: 1; will-change: transform; } /* the lines paint into this one layer */
.is-scene .note__head, .is-scene .note__item { z-index: 3; }
.is-scene .bc--wire { z-index: 4; }
.is-scene .bc--real { z-index: 5; }
.is-scene .ov { z-index: 6; width: 100%; height: 100%; overflow: visible; }
.is-scene .labels { z-index: 7; }
.grid i {
  position: absolute; left: 0; top: 0;
  width: 1000px; height: 1px;
  background: var(--blue);
  transform-origin: 0 0;
}
.ov path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.labels span {
  position: absolute; left: 0; top: 0;
  padding: 1px 5px 0;
  font: 500 10.5px/1.3 var(--f-mono); letter-spacing: 0.01em; color: var(--blue);
  background: #fff; border: 1px solid rgb(16 100 175 / 0.5); border-radius: 2px;
  white-space: nowrap; will-change: opacity, transform;
}
.is-measuring .canvas, .is-measuring .canvas * { transform: none !important; }

@media (max-width: 959px) {
  .scene h1, .scene h2 { font-size: clamp(2.25rem, 10.4vw, 3.5rem); }
  .lede, .ready { font-size: 1.125rem; margin-top: 10px; }
  .fnote { margin-top: 10px; font-size: 0.8125rem; line-height: 1.4; }
  .is-scene .pin {
    padding: 64px 16px 14px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    row-gap: 18px; align-items: start; align-content: center;
  }
  .is-scene .copies { grid-column: 1; grid-row: 1; align-self: end; }
  .is-scene .copy { align-self: end; }
  .is-scene .canvas { grid-column: 1; grid-row: 2; align-self: start; align-items: start; }
  .is-scene .note { --g: clamp(13px, calc((100vw - 32px) / 22), 24px); }
  .is-scene .copy__cta { display: none; }
  .bc { --fs: clamp(11px, 3.1vw, 13px); }
}
@media (max-width: 959px) and (min-width: 600px) {
  .is-scene .pin { max-width: 760px; }
}
@media (max-height: 800px) and (min-width: 960px) {
  .scene h1, .scene h2 { font-size: clamp(2.5rem, 4.3vw, 4rem); }
}