/* Purpose Built Designs. Page styles on top of scrollcraft.css (the engine's
   own stylesheet, which is never edited). Tokens first, then components. */

:root {
  --sc-canvas:     #EDE7DD;   /* paper, sampled from the brand mark's ground */
  --sc-surface:    #F6F2EA;
  --sc-ink:        #2A2420;   /* espresso, never pure black */
  --sc-ink-soft:   #655850;   /* taupe, tinted from the ink */
  --sc-accent:     #5C4A3E;   /* the monogram's umber */
  --sc-accent-ink: #F6F2EA;
  --sc-font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sc-font-text:    "Outfit", system-ui, sans-serif;
  --sc-shadow-color: 24 22% 14%;
  --pb-dark: #231E1A;
  --pb-r: 2px;                /* one radius, held everywhere */
}

/* ------------------------------------------------------------------ type -- */
.pb-h1, .pb-h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.pb-h1 { font-size: clamp(2.7rem, 1.5rem + 4.9vw, 5.6rem); }
.pb-h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; }
.pb-h1 em, .pb-h2 em { font-style: italic; }
.pb-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.pb-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0;
}

/* --------------------------------------------------------------- chrome -- */
.pb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5);
  height: 5rem;
  flex: none;
}
.pb-mark { display: inline-flex; flex-direction: column; gap: 0.2rem; text-decoration: none; line-height: 1; }
.pb-mark__name { font-family: var(--sc-font-display); font-size: 1.45rem; letter-spacing: -0.01em; }
.pb-mark__sub { font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--sc-ink-soft); padding-left: 0.1em; }

.pb-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.pb-nav a:not(.pb-btn) {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--sc-ink-soft);
  padding-block: 0.9rem;
  transition: color 160ms var(--sc-ease-out);
}
.pb-nav a:not(.pb-btn):hover, .pb-nav a[aria-current="page"] { color: var(--sc-ink); }

.pb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.35rem;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  color: var(--sc-accent-ink); background: var(--sc-ink);
  border: 1px solid var(--sc-ink); border-radius: var(--pb-r);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.pb-btn:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
.pb-btn:active { transform: scale(0.97); }

/* ----------------------------------------------------------------- hero --
   One pinned stage. Paper ground, the headline on it, and a photographic plate
   that is a window (clip-path) onto full-stage images. site.js writes the
   custom properties below from scroll; the defaults are the no-script state:
   the three stages side by side. */
.pb-hero__stage {
  --it: clamp(17rem, 40svh, 26rem);          /* window inset, top    */
  --ib: 7svh;                                 /* window inset, bottom */
  --ix: var(--sc-gutter);                     /* window inset, sides  */
  --ot: 0px;                                  /* where the opened plate's top sits */
  --shut: 1;                                  /* 1 = framed, 0 = opened */
  --ax: 66vw;                                 /* where the finished room begins, plane-local px */
  --bc: 51vw; --bw: 30vw;                     /* the construction strip: centre and width, plane-local px */
  --sa: 66vw; --sd: 36vw;                     /* seams, stage px       */
  --k-old: 1; --k-new: 1;
  --o-during: 1; --o-after: 1;
  --plaque: 0; --dim: 1;
  background: var(--sc-canvas);
}
.pb-hero__top {
  position: absolute; inset: 0 0 auto 0; height: var(--it);
  padding-inline: var(--ix);
  display: flex; flex-direction: column;
  z-index: 1;
}
.pb-hero__copy { margin-top: auto; padding-bottom: 3.25rem; }
.pb-hero__copy .pb-lede { margin-top: 0.9rem; max-width: 60ch; }

.pb-plate {
  position: absolute; inset: var(--ot) 0 0 0; z-index: 2;
  clip-path: inset(calc((var(--it) - var(--ot)) * var(--shut)) calc(var(--ix) * var(--shut)) calc(var(--ib) * var(--shut)) calc(var(--ix) * var(--shut)));
  background: var(--sc-surface);
}
.pb-plane {
  position: absolute; inset: 0;
  /* The shift centres the photograph in the framed window, then eases out as
     the window opens, so the room appears to rise into place. */
  transform: translate3d(0, calc((var(--it) - var(--ot) - var(--ib)) / 2 * var(--shut)), 0) scale(var(--k));
  will-change: transform;
}
.pb-plane--old { --k: var(--k-old); }
.pb-plane--new { --k: var(--k-new); }
.pb-plane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
/* The middle stage is a portrait photograph of the work in progress. It is
   shown whole at stage height, carried along with the seam, and clipped to the
   strip between the two rooms, so the strip always shows the middle of it. */
.pb-plane img.pb-during {
  inset: 0 auto 0 0;
  width: max(calc((100svh - var(--ot)) * 0.75), 36vw);
  transform: translate3d(calc(var(--bc) - 50%), 0, 0);
  clip-path: inset(0 calc(50% - var(--bw) / 2));
  opacity: var(--o-during);
  will-change: transform, clip-path;
}
.pb-after  { clip-path: inset(0 0 0 var(--ax)); opacity: var(--o-after); }
.pb-seam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--sc-surface);
  opacity: var(--dim);
}
.pb-seam--d { transform: translate3d(var(--sd), 0, 0); background: var(--sc-accent); }
.pb-seam--a { transform: translate3d(var(--sa), 0, 0); }

.pb-plaque {
  position: absolute; left: 0; bottom: 0;
  transform: translate3d(calc(var(--ix) * var(--shut) + var(--sc-5)), calc(-1 * (var(--ib) * var(--shut) + var(--sc-5))), 0);
  max-width: min(24rem, calc(100vw - 2 * var(--sc-5)));
  padding: var(--sc-5) var(--sc-5) calc(var(--sc-5) - 0.15rem);
  background: var(--sc-canvas);
  border-radius: var(--pb-r);
  box-shadow: var(--sc-e2);
  opacity: var(--plaque);
}
.pb-plaque p:last-child {
  margin: 0.6rem 0 0;
  font-family: var(--sc-font-display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}

/* The dimension string: the hero's only chrome. A measured line above the
   plate with one span per stage, the way a plan is dimensioned. */
.pb-dim {
  position: absolute; z-index: 3;
  left: var(--ix); right: var(--ix);
  top: calc(var(--it) - 2.25rem); height: 2.25rem;
  opacity: var(--dim);
  pointer-events: none;
}
.pb-dim__line { position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: var(--sc-hairline-strong); }
.pb-dim__tick { position: absolute; left: 0; bottom: 0; width: 1px; height: 0.95rem; background: var(--sc-ink-soft); }
.pb-dim__tick--end { left: auto; right: 0; }
.pb-dim__tick--d { transform: translate3d(var(--rd, 36vw), 0, 0); }
.pb-dim__tick--a { transform: translate3d(var(--ra, 66vw), 0, 0); }
.pb-dim__label {
  position: absolute; left: 0; top: 0;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  color: var(--sc-ink-soft); white-space: nowrap;
  transform: translate3d(var(--x, 0px), 0, 0) translateX(-50%);
  opacity: var(--o, 1);
}

/* Entrance. Opacity and a short rise, staggered, on wrappers the scroll code
   never touches. */
@media (prefers-reduced-motion: no-preference) {
  .pb-hero .pb-head, .pb-hero .pb-h1, .pb-hero .pb-lede, .pb-hero .pb-dim__line {
    animation: pb-rise 900ms var(--sc-ease-out) both;
  }
  .pb-hero .pb-h1 { animation-delay: 90ms; }
  .pb-hero .pb-lede { animation-delay: 170ms; }
  .pb-hero .pb-dim__line { animation-delay: 240ms; }
}
@keyframes pb-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* --------------------------------------------------------------- ledger -- */
.pb-ledger { padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-section); }
.pb-ledger__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pb-index { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.pb-index li { border-bottom: 1px solid var(--sc-hairline-strong); }
.pb-index a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--sc-5); row-gap: 0.35rem;
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  text-decoration: none;
}
.pb-index__name {
  font-family: var(--sc-font-display); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.02; letter-spacing: -0.012em;
  transition: transform 180ms var(--sc-ease-out);
}
.pb-index__line { grid-column: 1; color: var(--sc-ink-soft); font-weight: 300; max-width: 46ch; }
.pb-index__go { grid-row: 1 / span 2; grid-column: 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--sc-accent); transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pb-index a:hover .pb-index__name { transform: translate3d(0.5rem, 0, 0); }
  .pb-index a:hover .pb-index__go { transform: translate3d(0.35rem, 0, 0); }
}
.pb-detail { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--pb-r); background: var(--sc-surface); }
.pb-detail img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover; }

/* -------------------------------------------------------------- gallery -- */
.pb-rooms-shown { padding-bottom: var(--sc-section); }
.pb-gallery { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: var(--sc-7); align-items: start; }
.pb-gallery figure { margin: 0; }
.pb-gallery img { width: 100%; height: auto; border-radius: var(--pb-r); background: var(--sc-surface); }
.pb-gallery figcaption { margin-top: 0.75rem; }
.pb-gallery__a, .pb-gallery__b { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.pb-gallery__a { margin-top: clamp(3rem, 9vw, 9rem); }

/* ---------------------------------------------------------------- close --
   Dark ground. color is restated with the tokens, because it is inherited as a
   computed value and would otherwise keep the page's ink. */
.pb-close {
  --sc-canvas: var(--pb-dark); --sc-surface: #2E2823;
  --sc-ink: #F1EBE1; --sc-ink-soft: #B9AC9F;
  --sc-accent: #D8CBBB; --sc-accent-ink: #231E1A;
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: var(--pb-dark); color: var(--sc-ink);
  padding-top: var(--sc-section);
}
.pb-close .pb-btn { color: var(--sc-accent-ink); background: var(--sc-ink); border-color: var(--sc-ink); }
.pb-close .pb-btn:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
.pb-close__head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }

.pb-compare { --pos: 50; margin: 0; }
.pb-compare__frame {
  position: relative; container-type: inline-size;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--pb-r);
  background: var(--sc-surface);
}
.pb-compare__pair { position: absolute; inset: 0; }
.pb-compare__pair[hidden] { display: none; }
.pb-compare__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pb-compare__after { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.pb-compare__handle {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #F6F2EA;
  transform: translate3d(calc(var(--pos) * 1cqw), 0, 0);
  pointer-events: none;
}
.pb-compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: #F6F2EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2420' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 1.35rem no-repeat;
  box-shadow: 0 2px 6px hsl(24 22% 8% / 0.35), 0 10px 24px -6px hsl(24 22% 8% / 0.45);
  transition: transform 160ms var(--sc-ease-out);
}
.pb-compare__frame input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.pb-compare__frame:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.pb-compare__frame:has(input:active) .pb-compare__handle::after { transform: scale(0.94); }
.pb-rooms { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin-bottom: var(--sc-4); }
.pb-rooms button {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  min-height: 2.75rem; padding: 0;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft); cursor: pointer;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.pb-rooms button:hover, .pb-rooms a:hover { color: var(--sc-ink); }
.pb-rooms button[aria-pressed="true"], .pb-rooms a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: currentColor; }
/* The same tabs as links: one per house on the previous-work pages. */
.pb-rooms a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  border-bottom: 1px solid transparent; text-decoration: none;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.pb-projects { align-items: center; margin-bottom: var(--sc-2); }
.pb-projects .pb-label { padding-right: var(--sc-5); margin-right: var(--sc-2); border-right: 1px solid var(--sc-hairline-strong); line-height: 1.6; }
.pb-compare figcaption { display: flex; justify-content: space-between; margin-top: 0.9rem; }

.pb-ask {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sc-6);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.pb-ask .pb-h2 { max-width: 18ch; }

.pb-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sc-4) var(--sc-6);
  padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.pb-foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.pb-foot a { text-decoration: none; padding-block: 0.75rem; transition: color 160ms var(--sc-ease-out); }
.pb-foot a:hover { color: var(--sc-ink); }
.pb-foot p { margin: 0; }

/* ---------------------------------------------------------- inner pages -- */
.pb-page__head { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); display: grid; gap: 1.1rem; }
.pb-page__plate { margin: 0 0 var(--sc-section); }
.pb-page__plate > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--pb-r); }
.pb-page__plate .pb-compare figcaption { color: var(--sc-ink-soft); }
.pb-page .pb-close { padding-top: 0; margin-top: auto; }
/* The footer sits at the bottom of the screen even when a page is short. */
body.pb-page { min-height: 100svh; display: flex; flex-direction: column; }
.pb-page main { flex: 1; display: flex; flex-direction: column; }

.pb-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.pb-pair figure { margin: 0; }
.pb-pair img { width: 100%; height: auto; border-radius: var(--pb-r); }
.pb-pair figcaption { margin-top: 0.75rem; }
.pb-pair--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The project page. */
.pb-block { margin-bottom: var(--sc-section); }
.pb-block__head { display: grid; gap: 0.9rem; }
.pb-block > .pb-h2 + *, .pb-block__head + * { margin-top: var(--sc-7); }
.pb-stage + .pb-stage { margin-top: var(--sc-8); }
.pb-stage > h3 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.pb-stage .pb-stages__row { margin-top: var(--sc-5); }
.pb-renders { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 3vw, 3rem); }
.pb-wide { margin-inline: 0; margin-bottom: 0; }
.pb-page__plate.pb-wide { margin-top: 0; margin-bottom: var(--sc-section); }
.pb-wide img, .pb-page__plate.pb-wide > img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--pb-r); }
.pb-wide figcaption { margin-top: 0.75rem; }
.pb-renders figure { margin: 0; }
.pb-renders figure:nth-child(2) { grid-row: span 2; }
.pb-renders img { width: 100%; height: auto; border-radius: var(--pb-r); outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }
.pb-renders figcaption, .pb-columns figcaption { margin-top: 0.75rem; }
.pb-columns { columns: 2; column-gap: clamp(1.5rem, 4vw, 4rem); margin-top: var(--sc-7); }
.pb-columns figure { margin: 0 0 clamp(2rem, 4vw, 4rem); break-inside: avoid; }
.pb-columns img { width: 100%; height: auto; border-radius: var(--pb-r); background: var(--sc-surface); }
.pb-headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-3) var(--sc-6); }
.pb-more { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; text-underline-offset: 0.4em; padding-block: 0.75rem; }
.pb-stages__more { margin: var(--sc-6) 0 0; }
.pb-lede a { color: var(--sc-ink); }

/* One room at three stages. */
.pb-stages { margin-bottom: var(--sc-section); }
.pb-stages__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: var(--sc-6); }
.pb-stages__row figure { margin: 0; }
.pb-stages__row img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--op, 50%) 50%; border-radius: var(--pb-r); }
.pb-stages__row figcaption { margin-top: 0.75rem; }

/* The header sheds links as it narrows: services first, then previous work,
   so it never wraps. Everything stays reachable from the page and the footer. */
@media (max-width: 1100px) { .pb-nav a:not(.pb-btn):not(.pb-nav__work) { display: none; } }
@media (max-width: 600px) { .pb-nav a:not(.pb-btn) { display: none; } }

/* -------------------------------------------------------------- design -- */
.pb-steps { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: step; }
.pb-steps li { counter-increment: step; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.pb-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--sc-ink-soft); margin-bottom: 0.9rem; }
.pb-steps h3 { margin: 0 0 0.6rem; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.1; }
.pb-steps p { margin: 0; font-weight: 300; color: var(--sc-ink-soft); }
.pb-pair--match { align-items: start; margin-top: var(--sc-5); }
.pb-pair--match img { aspect-ratio: 4 / 3; object-fit: cover; }
.pb-pair--match .pb-fit img { object-fit: contain; background: #fff; }
.pb-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: var(--sc-7); }
.pb-grid4 figure { margin: 0; }
.pb-grid4 img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--pb-r); }
.pb-grid4 figcaption { margin-top: 0.75rem; }
.pb-drawing img { background: #fff; outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }
@media (max-width: 760px) {
  .pb-steps { grid-template-columns: minmax(0, 1fr); }
  .pb-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 760px) {
  .pb-head { height: 4.25rem; }
  .pb-mark__name { font-size: 1.25rem; }
  /* On a phone the plate is a tall frame under the headline, not a window onto
     a full-screen photograph: a landscape photo blown up to fill a portrait
     screen is three times its own resolution. It opens edge to edge and down to
     the bottom of the screen, and the headline stays. */
  .pb-hero__stage { --it: 18.75rem; --ib: 5svh; --ot: var(--it); }
  .pb-hero__copy { padding-bottom: 3rem; }
  /* Portrait crops: each photograph keeps its own subject in frame. */
  .pb-plane--old img { object-position: 44% 50%; }
  .pb-plane--new .pb-after { object-position: 100% 50%; }
  .pb-dim__label { font-size: 0.6rem; letter-spacing: 0.16em; }
  .pb-ledger__grid { grid-template-columns: minmax(0, 1fr); }
  .pb-detail { aspect-ratio: 4 / 3; order: -1; }
  .pb-compare__frame { aspect-ratio: 4 / 3; }
  .pb-compare__frame img { object-position: var(--op, 50%) 50%; }
  .pb-gallery { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the two columns would drift into each other. */
  .pb-gallery [data-sc-parallax] { transform: none !important; }
  .pb-gallery__a { margin-top: 0; }
  /* Before, during, after becomes a row to swipe through. */
  .pb-stages__row {
    display: flex; gap: 0.75rem; overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); scroll-padding-inline: var(--sc-gutter);
  }
  .pb-stages__row::-webkit-scrollbar, .pb-rooms::-webkit-scrollbar { display: none; }
  .pb-stages__row figure { flex: 0 0 80%; scroll-snap-align: start; }
  /* Room tabs stay on one line and scroll sideways. */
  .pb-rooms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); }
  .pb-rooms > * { flex: none; }
  .pb-renders { grid-template-columns: minmax(0, 1fr); }
  .pb-renders figure:nth-child(2) { grid-row: auto; }
  .pb-columns { columns: 1; }
  .pb-pair { grid-template-columns: minmax(0, 1fr); }
  .pb-ask { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-plane { transform: translate3d(0, calc((var(--it) - var(--ot) - var(--ib)) / 2), 0); }
  .pb-after { clip-path: none; }
  .pb-plane img.pb-during { inset: 0; width: 100%; transform: none; clip-path: none; }
  .pb-seam { display: none; }
}

/* -------------------------------------------------------------- contact -- */
.pb-contact { flex: 1; align-content: center; }
.pb-contact p:last-of-type { margin: var(--sc-4) 0 0; }
.pb-page__plate > img[src*="during"] { outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }

/* ------------------------------------------------------------- journals --
   The list at /journals/ and one entry at /journals/<slug>/, both filled from
   the database by functions/journals/[[path]].ts. */
.pb-journal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.pb-journal-list:empty { display: none; }
.pb-jcard { display: grid; gap: 0.6rem; text-decoration: none; }
.pb-jcard__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--pb-r); background: var(--sc-surface); }
.pb-jcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sc-ease-out); }
.pb-jcard__title { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.12; text-wrap: balance; }
.pb-jcard__sub { color: var(--sc-ink-soft); font-weight: 300; }
@media (hover: hover) and (pointer: fine) { .pb-jcard:hover .pb-jcard__img img { transform: scale(1.03); } }
.pb-journal-empty a { color: var(--sc-ink); }

.pb-entry { max-width: 46rem; padding-block: clamp(2rem, 6vw, 5rem) var(--sc-section); }
.pb-entry__head { display: grid; gap: 1rem; }
.pb-entry__head .pb-label a { text-decoration: none; }
.pb-entry__head .pb-h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }
.pb-entry__img { margin: var(--sc-7) 0 0; }
.pb-entry__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pb-r); }
.pb-entry__quick { margin-top: var(--sc-7); padding: var(--sc-5) var(--sc-6); background: var(--sc-surface); border-radius: var(--pb-r); box-shadow: var(--sc-edge); }
.pb-entry__quick p { margin: 0; }
.pb-entry__quick p + p { margin-top: 0.5rem; }
.pb-prose { margin-top: var(--sc-7); font-weight: 300; line-height: 1.7; }
.pb-prose > * + * { margin-top: 1.1em; }
.pb-prose :is(h2, h3) { font-family: var(--sc-font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin-top: 2em; margin-bottom: 0; }
.pb-prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.pb-prose h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.pb-prose :is(p, ul, ol, blockquote, table) { margin-bottom: 0; }
.pb-prose :is(strong, b) { font-weight: 500; }
.pb-prose a { color: var(--sc-ink); }
.pb-prose blockquote { margin-inline: 0; padding-left: var(--sc-5); border-left: 1px solid var(--sc-accent); color: var(--sc-ink-soft); }
.pb-prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; display: block; overflow-x: auto; }
.pb-prose :is(th, td) { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sc-hairline-strong); text-align: left; vertical-align: top; }
.pb-prose th { font-weight: 500; }
.pb-entry__faq { margin-top: var(--sc-8); }
.pb-entry__faq h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin: 0 0 var(--sc-4); }
.pb-entry__faq details { border-top: 1px solid var(--sc-hairline-strong); }
.pb-entry__faq details:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.pb-entry__faq summary { cursor: pointer; padding-block: 1rem; font-weight: 400; min-height: 2.75rem; }
.pb-entry__faq details p { margin: 0 0 1rem; font-weight: 300; color: var(--sc-ink-soft); }
.pb-entry__sources { margin-top: var(--sc-7); font-size: 0.9rem; }
.pb-entry__sources h2 { margin: 0 0 0.5rem; }
.pb-entry__sources ol { margin: 0; padding-left: 1.2em; color: var(--sc-ink-soft); }
.pb-entry__sources a { color: inherit; overflow-wrap: anywhere; }
.pb-entry__more { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); margin-top: var(--sc-8); }

/* --------------------------------------------------------------- upload --
   /upload/: the private page where journal entries are written and published. */
.up { max-width: 52rem; padding-block: clamp(2rem, 5vw, 4rem) var(--sc-section); }
.up [hidden] { display: none !important; }
.up h1 { margin-bottom: var(--sc-5); }
.up__box { display: grid; gap: var(--sc-3); margin-top: var(--sc-6); padding: clamp(1.25rem, 3vw, 2rem); background: var(--sc-surface); border-radius: var(--pb-r); box-shadow: var(--sc-edge), var(--sc-e1); }
.up__box h2 { margin: 0; }
.up label { font-weight: 500; }
.up :is(input:not([type="checkbox"]), select) { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; font: inherit; color: var(--sc-ink); background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--pb-r); }
.up :is(input, select):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.up__big { min-height: 3.5rem; font-size: 0.8rem; }
.up__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.1rem; font: inherit; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: var(--pb-r); background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-hairline-strong); transition: background-color 160ms var(--sc-ease-out); }
.up__btn:hover { background: var(--sc-canvas); }
.up__btn:disabled, .pb-btn:disabled { opacity: 0.5; cursor: progress; }
.up__btn--danger { color: #8a2b1c; border-color: #dcb4ac; }
.up__hint, .up__empty { color: var(--sc-ink-soft); margin: 0; }
.up__status { margin: 0 0 var(--sc-4); padding: 0.9rem 1.1rem; border-radius: var(--pb-r); background: var(--sc-surface); font-weight: 500; }
.up__status:empty { display: none; }
.up__status--bad { background: #f6e4df; color: #7d2717; }
.up__notes { margin: 0; padding-left: 1.2em; color: var(--sc-ink-soft); }
.up__notes:empty { display: none; }
.up__steps { padding-left: 1.2em; }
.up__steps a, .up p a { color: var(--sc-ink); }
.up__new { width: 100%; margin-bottom: var(--sc-6); }
.up__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.up__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-5); background: var(--sc-surface); border-radius: var(--pb-r); box-shadow: var(--sc-edge); }
.up__list li.up__empty { display: block; }
.up__item { display: grid; gap: 0.25rem; }
.up__item :is(a, strong) { font-family: var(--sc-font-display); font-size: 1.3rem; font-weight: 400; color: var(--sc-ink); }
.up__state { font-size: 0.8rem; color: var(--sc-ink-soft); }
.up__state--live { color: #2f6b3d; }
.up__actions { display: flex; gap: var(--sc-2); }
.up__signout { margin-top: var(--sc-6); }
.up__back { display: inline-block; padding-block: 0.6rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink); }
.up__editor { min-height: 22rem; padding: 0.9rem 1rem; background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--pb-r); line-height: 1.65; overflow-wrap: anywhere; }
.up__editor:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.up__editor:empty::before { content: "Start writing, or paste here"; color: var(--sc-ink-soft); }
.up__editor :is(h1, h2, h3) { font-family: var(--sc-font-display); font-weight: 400; margin: 1.2em 0 0.4em; }
.up__editor :is(p, ul, ol) { margin: 0 0 0.9em; }
#up-preview { width: 100%; height: 75vh; border: 1px solid var(--sc-hairline-strong); border-radius: var(--pb-r); background: var(--sc-canvas); }
.up__success { justify-items: center; text-align: center; padding-block: var(--sc-8); }
.up__success :is(.pb-btn, .up__btn) { width: min(100%, 26rem); }
.up__tick { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0; border-radius: 50%; background: var(--sc-ink); color: var(--sc-accent-ink); font-size: 1.8rem; }
.up-prog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.up-prog__list li { display: flex; align-items: flex-start; gap: var(--sc-3); color: var(--sc-ink-soft); opacity: 0.7; }
.up-prog__list li.is-done { opacity: 1; }
.up-prog__list li.is-now { opacity: 1; color: var(--sc-ink); font-weight: 500; }
.up-prog__mark { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; display: grid; place-items: center; color: #2f6b3d; }
.up-prog__list li:not(.is-done):not(.is-now) .up-prog__mark::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sc-hairline-strong); }
.up-prog__list li.is-now .up-prog__mark::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--sc-hairline-strong); border-top-color: var(--sc-ink); animation: up-spin 0.9s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-prog__list li.is-now .up-prog__mark::before { animation: none; } }
.up-prog__text { min-width: 0; overflow-wrap: anywhere; }
.up-prog__text small { display: block; font-weight: 300; color: var(--sc-ink-soft); }
.up-prog__time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
.up-prog__aim { margin: 0; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); }
.up-prog__note { margin: 0; font-size: 0.9rem; color: var(--sc-ink-soft); }