/* Dorpel · round c
   Scope starts after the approved opening. No root, hero, header or image rules.
   Limewash, oak end grain, and the studio's existing brown / gold palette. */
.c-scroll {
  --plaster: #fafaf7;
  --plaster-2: #eeeee9;
  --frame: #e7e6df;
  --note-ink: #7d5f31;
  --threshold: #b08d57;
  background: var(--plaster);
  color: var(--ink);
}

/* A real sill is a narrow, straight piece of oak. Keep its repeat equally quiet.
   Inset to the same wall line as the content; never an extra ornament or image. */
.c-scroll > section,
.c-project-rest > article,
.c-scroll.c-footer {
  position: relative;
}
.c-scroll > section::before,
.c-project-rest > article::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--side);
  right: var(--side);
  height: 2px;
  background: var(--threshold);
  pointer-events: none;
}
.c-project-rest > article::before { left: 0; right: 0; }

/* Two deliberate oak-brown rooms on the homepage: work, then the studio.
   The studio's work-area band carries the same material on its own page. */
.c-scroll > .c-oak-band {
  --plaster: #2a2622;
  --plaster-2: #2a2622;
  --ink: #fafaf7;
  --ink-soft: #ded6ca;
  --ink-mute: #cec2b2;
  --graphite: #c9a46a;
  --brass-deep: #c9a46a;
  --frame: #40382f;
  color: var(--ink);
  background: var(--plaster);
}
.c-scroll > .c-oak-band[style="padding-top:0"] {
  padding-top: calc(100 * var(--u)) !important;
}
.c-oak-band .u-cart,
.c-oak-band .u-cart :is(th, td) {
  border-color: #8d7759;
}
.c-oak-band .u-cart :is(th, .r, .foot .n) { color: var(--ink-mute); }
.c-oak-band .u-cart caption { color: var(--ink-soft); }
.c-oak-band .card .small { color: var(--ink-mute); }
.c-oak-band .tl:hover { color: var(--brass); }

/* One warm gold-brown ink for all scroll annotations. The dark bands use
   the existing Jost for their gold labels, leaving handwriting on limewash.
   Structural graphite, hatch weights and accurate floor plans are retained. */
.c-scroll :is(.hand, .sh .eyebrow, .tl-lab .line),
.c-scroll .tl-lab b.hand { color: var(--note-ink); }
.c-scroll :is(.pencil, .scan-frame) svg text,
.c-scroll svg.pencil text { fill: var(--note-ink); }
.c-scroll .pencil :is(.note, .annotation) { stroke: var(--note-ink); }

.c-oak-band .sh .eyebrow {
  font-family: var(--sans);
  font-size: max(calc(12 * var(--u)), 12px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  transform: none;
}
.c-oak-band .sh .eyebrow::after { content: none; }
.c-scroll .leaders { stroke: var(--note-ink); }

/* This note refers to the actual sill at the next section, not a loose doodle.
   Its space belongs to the end of the existing introduction. */
.c-threshold-note {
  position: absolute;
  right: var(--side);
  bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  max-width: calc(100% - 2 * var(--side));
  margin: 0;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
  text-align: right;
}
.c-threshold-note svg {
  flex: 0 0 88px;
  width: 88px;
  height: 48px;
  margin-top: 8px;
}

/* The project list is inside an existing .wrap. Extend only its later ground
   to the page edges; preserve the approved opening and first project. */
.c-project-rest { position: relative; isolation: isolate; }
.c-project-rest::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--side));
  background: var(--plaster);
  pointer-events: none;
}
.c-scroll .b3-result { background: var(--plaster-2); }
.c-scroll .plan-sec { background: var(--plaster-2); }
.c-scroll .foot-line { background: var(--plaster); }
.c-footer .sill-line { color: var(--threshold); }
.c-footer .sill-line [stroke] { stroke: var(--threshold); }

@media (max-width: 700px) {
  .c-scroll > .c-oak-band[style="padding-top:0"] { padding-top: 72px !important; }
  .c-threshold-note { gap: 4px; font-size: 24px; }
  .c-threshold-note svg { flex-basis: 64px; width: 64px; height: 40px; }
}

/* Later process phases sit on limewash as well. Their list, numbering and
   original desktop/tablet/phone grid remain intact. */
.steps-v > .c-process-row { position: relative; isolation: isolate; }
.steps-v > .c-process-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--side));
  background: var(--plaster);
  pointer-events: none;
}
.steps-v > .c-process-row { border-color: var(--threshold); }