/* Billboard landing page: posters on a wall, filling the first screen.
   Each wall photograph is 1376 × 768 (or twice that, for sharper zooming). A wall is described by
   where its poster faces sit in the photograph (--x, --y, --w, --h in the photograph's pixels,
   measured); everything else is worked out from those. Bjørvika is the default; ?vegg=akerselva or
   ?vegg=osl in the address picks another wall (reklametavler.js swaps the photograph).
   Scrolling moves a camera along the wall (see "The camera" at the end); without script or with
   reduced motion the page is one still screen.
   Colours and Kendrick come from style.css (Stor-Oslo Eiendom's look); each poster uses its
   project's own fonts. */
@font-face { font-family: PilarDisplay; src: url('assets/fonts/NeuzeitGroExt-Bla.otf') format('opentype'); font-weight: 900; font-display: swap; }
@font-face { font-family: Neuzeit; src: url('assets/fonts/NeuzeitGro-Bol.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: LustDisplay; src: url('assets/fonts/LustDisplay-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }

/* ---------- The bar lies on the picture ---------- */
.yard-page .yard-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: none; }
/* Keyboard focus on the wordmark: an underline, not a box. */
.yard-bar .wordmark:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Where the wordmark sits: four options to compare ----------
   e (the default) large and centred on the concrete under the billboards, mirroring the headline ·
   f the same, painted into the concrete · g headline size, right-aligned under Timbre, mirroring
   the headline across the diagonal · h extra large, as wide as both billboards together ·
   ?merke=a top left in the bar · b centred in the bar · c bottom right, signed like a print ad ·
   d stencilled on the concrete under Pilar's billboard. reklametavler.js sets data-merke on
   <html>; without script the wordmark stays top left. Off the wall (inside a project) the
   wordmark fades with the headline (--head). */
.wall-mark { display: none; }
[data-merke='b'] .yard-bar .wordmark { position: absolute; left: 50%; transform: translateX(-50%); }
[data-merke='c'] .yard-bar .wordmark { position: fixed; right: var(--margin); bottom: 14px; z-index: 11; }
[data-merke='d'] .yard-bar .wordmark,
[data-merke='e'] .yard-bar .wordmark,
[data-merke='f'] .yard-bar .wordmark,
[data-merke='g'] .yard-bar .wordmark,
[data-merke='h'] .yard-bar .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-merke] .yard-bar { justify-content: flex-end; }
.camera[data-merke='c'] .yard-bar .wordmark { opacity: var(--head, 1); }
.camera .wall-mark { opacity: var(--head, 1); }
/* E–H: in the photograph's own measure, so it always sits on the concrete between the billboards'
   foot (y 510) and the pavement (y 640); 4.5cqw matches the headline on a laptop screen. */
[data-merke='e'] .wall-mark,
[data-merke='f'] .wall-mark,
[data-merke='g'] .wall-mark,
[data-merke='h'] .wall-mark {
  position: absolute;
  top: calc(575 / 768 * 100%);
  left: 50%;
  display: block;
  color: var(--ink);
  font-size: 4.5cqw;
  font-weight: 700;
  font-style: italic;
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(31, 25, 44, .5); /* taste-skill-ignore: keeps the wordmark readable on the photograph */
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* F: painted on, so the concrete's grain and stains show through. */
[data-merke='f'] .wall-mark { text-shadow: none; mix-blend-mode: overlay; opacity: calc(.95 * var(--head, 1)); } /* taste-skill-ignore: removes a shadow */
/* G: right edge on Timbre's billboard's right edge (x 1151). */
[data-merke='g'] .wall-mark { right: calc((1376 - 1151) / 1376 * 100%); left: auto; transform: translateY(-50%); }
/* H: from Pilar's left edge (x 221) to Timbre's right edge (x 1151). */
[data-merke='h'] .wall-mark { font-size: 9.6cqw; }
/* Portrait screens see one billboard at a time: the word sits under Pilar's (x 221–640), at the
   headline's size (H: as wide as the billboard). */
@media (max-aspect-ratio: 1/1) {
  [data-merke='e'] .wall-mark,
  [data-merke='f'] .wall-mark,
  [data-merke='h'] .wall-mark { left: calc(430 / 1376 * 100%); font-size: 3.2cqw; }
  [data-merke='g'] .wall-mark { right: calc((1376 - 640) / 1376 * 100%); font-size: 3.2cqw; }
  [data-merke='h'] .wall-mark { font-size: 4.4cqw; }
}
/* Oslo walls: the wordmark stands on the bench in plain white, its feet on the seat (y 527) in front
   of the backrest (y 474–527), centred on the bench (x 151–645). Jacob found a 3D edge and cast
   shadows fake (29.10.2026), so the letters are flat. */
[data-merke] .yard[data-scene^='osl'] .wall-mark {
  top: auto;
  right: auto;
  bottom: calc((768 - 527.3) / 768 * 100%);
  left: calc(398 / 1376 * 100%);
  color: #fcfaf5;
  font-size: 4.8cqw;
  line-height: .74;
  text-shadow: none; /* taste-skill-ignore: removes a shadow */
  mix-blend-mode: normal;
  transform: translateX(-50%);
}
@media (max-aspect-ratio: 1/1) {
  /* Phones see part of the wall (about x 373–814 upright, 151–597 landscape): the letters stand on
     the part of the bench that shows. */
  [data-merke] .yard[data-scene='osl'] .wall-mark { left: calc(509 / 1376 * 100%); font-size: 2.7cqw; }
  [data-merke] .yard[data-scene='osl-liggende'] .wall-mark { left: calc(374.5 / 1376 * 100%); font-size: 3.4cqw; }
}
[data-merke='d'] .wall-mark {
  position: absolute;
  top: calc(536 / 768 * 100%);
  left: calc(232 / 1376 * 100%);
  display: block;
  color: #fff9ed;
  font-size: 3.1cqw;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  mix-blend-mode: overlay;
  opacity: .9;
  pointer-events: none;
}

/* ---------- The wall, full screen ---------- */
.yard {
  /* The wall photograph's size on screen (it covers the first screen like object-fit: cover). */
  --stage-h: max(560px, 100svh);
  --wall-w: max(100vw, calc(var(--stage-h) * 1.7917));
  --wall-h: calc(var(--wall-w) / 1.7917);
  --scene: url('assets/reklametavler/bjorvika-v1.jpg');
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}
/* The screen the wall is seen through: the whole yard, or the sticky screen while scrolling. */
.yard-view { position: relative; height: 100%; overflow: hidden; }
/* An aubergine fade from the top, under the bar and the title only. */
.yard-view::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 38%;
  background: linear-gradient(to bottom, rgba(31, 25, 44, .82), rgba(31, 25, 44, 0)); /* taste-skill-ignore: neutral scrim under the title on the photograph */
  pointer-events: none;
  content: '';
}
.yard-stage { position: absolute; inset: 0; overflow: hidden; }
/* The photograph covers the stage like object-fit: cover; everything on the wall is placed in the
   photograph's own percentages. */
.yard-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wall-w);
  aspect-ratio: 1376 / 768;
  container-type: inline-size;
  transform: translate(-50%, -50%);
}
.yard-photo {
  position: absolute;
  top: calc(var(--photo-y, 0) / 768 * -100%);
  left: calc(var(--photo-x, 0) / 1376 * -100%);
  width: calc(var(--photo-w, 1376) / 1376 * 100%);
  height: calc(var(--photo-h, 768) / 768 * 100%);
  max-width: none;
}

/* Top left: the headline. */
.yard-head {
  position: absolute;
  top: calc(var(--bar) + clamp(8px, 2vh, 24px));
  left: var(--margin);
  z-index: 3;
  text-shadow: 0 1px 14px rgba(31, 25, 44, .55); /* taste-skill-ignore: keeps the headline readable on the photograph */
}
.yard-title { max-width: 14ch; font-size: var(--step-head); }
.inside { display: none; }

/* Bottom left, small: the representative loan example, on a soft aubergine fade so it reads on
   the paving. */
.yard-terms {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 56px max(var(--margin), calc(100% - 640px - var(--margin))) 14px var(--margin);
  background: linear-gradient(to top, rgba(31, 25, 44, .82), rgba(31, 25, 44, 0)); /* taste-skill-ignore: neutral scrim under the loan example on the photograph */
  color: rgba(255, 249, 237, .82);
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}

/* ---------- Billboards ---------- */
/* Bjørvika: concrete wall, Barcode behind, daylight. */
.billboard-pilar { --x: 221; --y: 290; --w: 419; --h: 212; }
.billboard-timbre { --x: 737; --y: 290; --w: 414; --h: 212; }
/* Akerselva: red-brick warehouse at blue hour, lit lightboxes. */
.yard[data-scene='akerselva'] { --scene: url('assets/reklametavler/akerselva-v1.jpg'); }
.yard[data-scene='akerselva'] .billboard-pilar { --x: 215; --y: 278; --w: 360; --h: 220; }
.yard[data-scene='akerselva'] .billboard-timbre { --x: 798; --y: 278; --w: 359; --h: 220; }
/* Oslo (trial, 29.10.2026): Mockup Maison's urban poster photo, a stone wall with climbing plants
   and three upright A-size frames; the right-hand frame is painted out for two projects
   (osl-v2.jpg). A third project takes the right-hand frame of osl-3-v1.jpg (the untouched photo):
   --x: 804.2; --y: 211.5; --w: 162.2; --h: 227.8. */
.yard[data-scene='osl'] { --scene: url('assets/reklametavler/osl-gemini-v2.jpg'); }
/* Both Oslo walls use one photo (osl-gemini-v1, 1.11.2026): Gemini (Nano Banana) extended the
   original with real photos of Nasjonalmuseet as reference, removed most of the climbing branches
   and kept the frames and bench in place; upscaled 4x with Real-ESRGAN. It reaches 700 px beyond
   the wall on each side, 420 above and 132 below, so the camera can stand 30 % further back on
   wide screens. Landscape boards cover the two frames as before. */
.yard[data-scene^='osl'] { --photo-x: 700; --photo-y: 420; --photo-w: 2776; --photo-h: 1320; }
.yard[data-scene^='osl'] .yard-photo { -webkit-mask-image: none; mask-image: none; }
.yard[data-scene='osl'] .billboard-pilar { --x: 415.4; --y: 212; --w: 162.2; --h: 227.1; }
.yard[data-scene='osl'] .billboard-timbre { --x: 609.8; --y: 212; --w: 161.7; --h: 227.3; }
/* Oslo with landscape boards (?vegg=osl-liggende): two boards the shape of the films (1.75 : 1) on
   the untouched photo, placed so they cover all three upright frames; the gap between them falls
   on real wall (x 584–606). No photo editing needed. A third board would not fit at this size. */
.yard[data-scene='osl-liggende'] { --scene: url('assets/reklametavler/osl-gemini-v2.jpg'); }
.yard[data-scene='osl-liggende'] .billboard-pilar { --x: 165; --y: 205; --w: 419; --h: 240; }
.yard[data-scene='osl-liggende'] .billboard-timbre { --x: 606; --y: 205; --w: 419; --h: 240; }
/* A thin dark frame like the photo's own, and a shadow on the wall to the right, as the sun casts (taste-skill-ignore: photographic shadow). */
.yard[data-scene='osl-liggende'] .billboard { overflow: visible; outline: .5cqw solid #151618; box-shadow: 2.4cqw 1.2cqw 1.4cqw rgba(16, 20, 20, .42); } /* taste-skill-ignore: the board's shadow on the wall in the photograph */
.yard[data-scene='osl-liggende'] .poster-light { display: none; }

.billboard {
  position: absolute;
  top: calc(var(--y) / 768 * 100%);
  left: calc(var(--x) / 1376 * 100%);
  width: calc(var(--w) / 1376 * 100%);
  height: calc(var(--h) / 768 * 100%);
  overflow: hidden;
  container-type: inline-size;
  background: #ddd;
}

.poster { position: absolute; inset: 0; overflow: hidden; }
.poster-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* A soft neutral wash behind the line and the logo, as printed on the poster. */
.poster::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(0, 0, 0, .44), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .36)); /* taste-skill-ignore: neutral scrim on the poster photograph */
  content: '';
}
/* The wall's own light: the same photograph, lifted so the poster face reads as white and
   multiplied over the poster picture, so the branches and their shadows fall across it. */
.poster-light {
  position: absolute;
  z-index: 1;
  top: calc((var(--y) + var(--photo-y, 0)) / var(--h) * -100%);
  left: calc((var(--x) + var(--photo-x, 0)) / var(--w) * -100%);
  width: calc(var(--photo-w, 1376) / var(--w) * 100%);
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(1.42) contrast(1.15);
  pointer-events: none;
}

/* Printed on top of the light: the line, the logo and the button. The button's click area covers
   the whole poster (z 2); the line and logo sit above it (z 3). */
.billboard .poster-line {
  position: absolute;
  top: 7cqw;
  left: 7cqw;
  z-index: 3;
  max-width: 66%;
  color: #fff;
  font-size: 7.6cqw;
  line-height: .98;
}
.billboard-pilar .poster-line { font-family: PilarDisplay, Kendrick, sans-serif; font-weight: 900; letter-spacing: -.03em; }
.billboard-timbre .poster-line { max-width: 84%; font-family: LustDisplay, Georgia, serif; font-size: 8.6cqw; line-height: 1; letter-spacing: -.01em; }
.billboard .poster-rate {
  position: absolute;
  bottom: 6cqw;
  left: 7cqw;
  z-index: 3;
  max-width: 60%;
  color: #fff;
  font-size: 3.2cqw;
  line-height: 1.2;
}
.billboard .poster-logo { position: absolute; right: 6cqw; bottom: 6cqw; z-index: 3; height: auto; }
.billboard-pilar .poster-logo { width: 10cqw; }
.billboard-timbre .poster-logo { width: 22cqw; }
/* Upright posters: the same parts, set larger for the narrow face. */
.yard[data-scene='osl'] .billboard .poster-line { top: 9cqw; left: 9cqw; max-width: 84%; font-size: 11cqw; }
.yard[data-scene='osl'] .billboard-timbre .poster-line { font-size: 12.5cqw; }
.yard[data-scene='osl'] .billboard .poster-rate { bottom: 9cqw; left: 9cqw; max-width: 54%; font-size: 5.8cqw; }
.yard[data-scene='osl'] .billboard .poster-logo { right: 9cqw; bottom: 9cqw; }
.yard[data-scene='osl'] .billboard-pilar .poster-logo { width: 15cqw; }
.yard[data-scene='osl'] .billboard-timbre .poster-logo { width: 30cqw; }
/* ---------- The posters invite a click without saying so ----------
   At rest both posters are a touch dim. Pointing at one switches its light on and dims the other.
   (The glint that passed over the glass was removed 29.10.2026 at Jacob's request.) */
.billboard { display: block; color: inherit; }
.billboard .poster-media { filter: brightness(.88); transition: transform 1.2s var(--ease), filter .6s ease; }
.billboard:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .yard-wall:has(.billboard:hover) .billboard .poster-media { filter: brightness(.66); }
  .yard-wall:has(.billboard:hover) .billboard:hover .poster-media { filter: brightness(1.04); transform: scale(1.04); }
}

/* ---------- Tablet and phone: walk along the wall ----------
   The wall stands at the bottom of the screen at 80 % height and scrolls sideways, stopping at each
   billboard; above it, a blurred copy of the same photograph continues the sky behind the title. */
@media (max-width: 1000px) {
  .yard { min-height: 0; }
  .yard-view::after {
    position: absolute;
    inset: -40px;
    z-index: 0;
    background: var(--scene) 40% 0 / cover no-repeat;
    filter: blur(22px);
    content: '';
  }
  .yard-stage { z-index: 1; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .yard-stage::-webkit-scrollbar { display: none; }
  .yard-wall { top: auto; bottom: 0; left: 0; width: calc(80svh * 1.7917); height: 80svh; transform: none; }
  .billboard { scroll-snap-align: center; }
  /* The sharp photograph fades into the blurred sky above it, so there is no seam. */
  .yard-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); } /* taste-skill-ignore: a mask that fades the photo edge, not a colour gradient */
}
@media (max-width: 700px) {
  .bar-links { display: flex; gap: 18px; }
  [data-merke='b'] .bar-links { display: none; }
  [data-merke='c'] .yard-bar .wordmark { bottom: 104px; }
  .yard-title { max-width: none; font-size: 9.6vw; }
}

/* A phone on its side: a smaller headline, so the wall has room below it. */
@media (orientation: landscape) and (max-height: 500px) {
  .yard-title { font-size: max(1.5rem, 8.5vh); }
}

/* ---------- The camera ----------
   With script (and motion allowed) the yard is a tall scroll track with a sticky screen. The wall
   keeps the photograph's own size (1376 × 768 px) and reklametavler.js moves and scales it: from
   the whole wall straight into Pilar Bjerke's billboard until the film fills the screen, then
   sideways along the wall into Timbre's. It sets --printed and --light and the classes is-in and
   is-deep on each billboard, and --head, --veil, --film-top and --film-bottom on the screen. Scrolling snaps to
   the wall and to each billboard; the script sets the track's length (--track) and adds the stops
   (.yard-stop) from the number of billboards. */
.camera { scroll-snap-type: y mandatory; }
.camera .yard { --track: 320svh; height: var(--track); min-height: 0; overflow: visible; }
.camera .yard-view { position: sticky; top: 0; height: 100svh; }
.camera .yard-bar { position: fixed; }
.camera .yard-stage { overflow: hidden; scroll-snap-type: none; }
.camera .yard-wall {
  top: 0;
  bottom: auto;
  left: 0;
  width: 1376px;
  height: 768px;
  transform-origin: 0 0;
}
.yard-stop { display: none; }
.camera .yard-stop {
  position: absolute;
  top: calc(var(--at) * (var(--track) - 100svh));
  left: 0;
  display: block;
  width: 1px;
  height: 1px; /* taste-skill-ignore: invisible scroll-stop marker, not a rule */
  scroll-snap-align: start;
}
.camera .yard-head { opacity: var(--head, 1); }

/* The moving wall gets its own layer, so the browser can move it without redrawing it. */
.camera .yard-wall { will-change: transform; }

/* Going through the glass: the printed words and the wall's light fade, the film lights up.
   Once through (is-deep) they are switched off, so they cost nothing while the camera moves. */
.camera .billboard .poster-line,
.camera .billboard .poster-rate,
.camera .billboard .poster-logo { opacity: var(--printed, 1); }
.camera .poster-light { opacity: var(--light, 1); }
.camera .billboard.is-deep .poster-line,
.camera .billboard.is-deep .poster-rate,
.camera .billboard.is-deep .poster-logo,
.camera .billboard.is-deep .poster-light { visibility: hidden; }
.camera .billboard.is-in .poster-media { filter: none; }

/* Portrait screens, inside a project: the photograph fades away so the films sit on aubergine. */
.camera .yard-photo,
.camera .yard-view::after { opacity: calc(1 - var(--veil, 0)); }

/* Upright posters on a wide screen: inside a project the whole film fills the screen behind the
   words (reklametavler.js adds it and plays it only while it shows); the scrim moves on top of it. */
.inside-film { display: none; }
.camera .is-opened .inside { background: none; }
.camera .is-opened .inside::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 25, 44, .72), rgba(31, 25, 44, 0) 48%); /* taste-skill-ignore: neutral scrim under the words on the film */
  content: '';
}
.camera .is-opened .inside-film { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Inside a project: the poster's words, full size on the screen. */
.camera .inside {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  background: linear-gradient(to top, rgba(31, 25, 44, .72), rgba(31, 25, 44, 0) 48%); /* taste-skill-ignore: neutral scrim under the words on the film */
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.inside-line {
  position: absolute;
  top: calc(var(--bar) + clamp(8px, 2vh, 24px));
  left: var(--margin);
  max-width: 13ch;
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5.5rem);
  font-weight: 400;
  line-height: .98;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35); /* taste-skill-ignore: keeps the line readable on the film */
}
.inside-pilar .inside-line { font-family: PilarDisplay, Kendrick, sans-serif; font-weight: 900; letter-spacing: -.03em; }
.inside-timbre .inside-line { max-width: 15ch; font-family: LustDisplay, Georgia, serif; letter-spacing: -.01em; }
.inside-foot { position: absolute; right: var(--margin); bottom: 76px; left: var(--margin); }
.inside-rate { font-size: var(--step-lead); line-height: 1.25; }
.inside-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.inside-cta {
  display: inline-block;
  padding: 13px 28px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color .25s ease, color .25s ease;
}
.inside-cta:hover { background: var(--paper); color: var(--paper-ink); }
.inside-logo { height: auto; }
.inside-pilar .inside-logo { width: clamp(52px, 5.5vw, 88px); }
.inside-timbre .inside-logo { width: clamp(120px, 12vw, 200px); }

/* Portrait screens: inside a project the film spans the width and the wall goes dark around it;
   the line sits above the film, the offer and the button below. */
@media (max-aspect-ratio: 1/1) {
  .camera .inside { background: none; }
  .inside-line { top: auto; bottom: calc(100% - var(--film-top, calc(50% - 25.5vw)) + 20px); max-width: none; font-size: clamp(1.75rem, 1rem + 4vw, 3rem); }
  .inside-timbre .inside-line { max-width: none; }
  .inside-foot { top: calc(var(--film-bottom, calc(50% + 25.5vw)) + 20px); bottom: auto; }
  .inside-rate { font-size: 1.125rem; }
  .inside-row { gap: 16px; }
  .inside-cta { padding: 13px 22px; }
  .inside-pilar .inside-logo { width: clamp(44px, 13vw, 72px); }
  .inside-timbre .inside-logo { width: clamp(64px, 22vw, 160px); }
}
/* The smallest phones: the bar keeps only the wordmark, the walk shows both projects anyway. */
@media (max-width: 360px) {
  .bar-links { display: none; }
}

/* ---------- Layout options to compare (?oppsett=a–e, 1.11.2026) ----------
   The posters, the wall and the scroll journey stay the same; the headline, the name, the links and
   the loan example are arranged differently. Placed for the Oslo walls (?vegg=osl).
   A Fasadebokstaver: the name as mounted letters on the slate above the posters, like the museum's
     own name on its facade; the headline at the foot of the screen.
   B Veggtekst: a museum wall label beside the posters with the name, headline and offer.
   C Delt scene: an aubergine column at the left with the headline, offer, project links and the loan
     example; the wall fills the rest.
   D Tallet først: 2,99 % as the hero, the headline under it.
   E Monument: the headline centred across the top, the name on the bench. */
.facade-mark,
.wall-label,
.yard-rate,
.yard-lede,
.yard-links,
.yard-lede-alt { display: none; }
.camera .facade-mark,
.camera .wall-label { opacity: var(--head, 1); }
[data-merke][data-oppsett='a'] .wall-mark,
[data-merke][data-oppsett='b'] .wall-mark,
[data-merke][data-oppsett^='c'] .wall-mark { display: none; }

/* A: dark metal letters, flat like the real ones, centred over the posters (x 415–772). */
[data-oppsett='a'] .facade-mark {
  position: absolute;
  top: calc(122 / 768 * 100%);
  left: calc(593.5 / 1376 * 100%);
  display: block;
  color: #27231f;
  font-size: 4.9cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
[data-oppsett='a'] .yard-head { top: auto; bottom: 104px; }

/* B: a flat label on the wall left of the posters (x 20–390, level with them). */
[data-oppsett='b'] .wall-label {
  position: absolute;
  top: calc(212 / 768 * 100%);
  left: calc(22 / 1376 * 100%);
  display: block;
  width: calc(368 / 1376 * 100%);
  padding: 1.5cqw 1.6cqw 1.7cqw;
  background: #f2eee6;
  color: var(--bg);
  pointer-events: none;
}
.wall-label p { margin: 0; }
.wall-label-name { font-size: 2.3cqw; font-weight: 700; font-style: italic; line-height: .95; text-transform: uppercase; }
.wall-label-line { margin-top: .7cqw !important; font-size: 1.45cqw; font-weight: 700; line-height: 1.15; }
.wall-label-text { margin-top: .9cqw !important; font-size: 1.12cqw; line-height: 1.45; }
[data-oppsett='b'] .yard-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* C: the column; the camera moves the wall over so the posters sit in the free part. */
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett^='c'] .yard-head {
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    width: min(40vw, 600px);
    padding: calc(var(--bar) + 24px) var(--margin) 120px;
    background: var(--bg);
    text-shadow: none; /* taste-skill-ignore: removes a shadow */
  }
  [data-oppsett^='c'] .yard-title { max-width: none; font-size: clamp(2.25rem, 1rem + 2.9vw, 4rem); }
  [data-oppsett^='c'] .yard-lede { display: block; max-width: 28ch; margin: 0; color: var(--ink); font-size: var(--step-lead); line-height: 1.35; }
  [data-oppsett^='c'] .yard-links { display: flex; flex-wrap: wrap; gap: 12px; }
  [data-oppsett^='c'] .yard-terms { right: auto; width: min(40vw, 600px); padding: 0 var(--margin) 18px; background: none; }
  [data-merke][data-oppsett^='c'] .yard-bar .wordmark { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  [data-oppsett^='c'] .yard-bar { justify-content: space-between; }
  [data-oppsett^='c'] .bar-links { display: none; }
}
.yard-links a {
  display: inline-block;
  padding: 13px 24px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.yard-links a:hover { background: var(--ink); color: var(--bg); }

/* D: the rate first, very large; the headline becomes the line under it. */
[data-oppsett='d'] .yard-rate { display: block; margin: 0 0 18px; color: var(--ink); font-size: var(--step-lead); line-height: 1.2; }
[data-oppsett='d'] .yard-rate span { display: block; font-size: clamp(5.5rem, 2.5rem + 9vw, 12rem); font-weight: 700; font-style: italic; line-height: .82; letter-spacing: -.02em; }
[data-oppsett='d'] .yard-title { font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); }

/* E: one centred line across the top; the loan example centred too. */
[data-oppsett='e'] .yard-head { left: 50%; transform: translateX(-50%); text-align: center; }
[data-oppsett='e'] .yard-title { max-width: none; font-size: clamp(2.5rem, 1rem + 4.4vw, 6.25rem); white-space: nowrap; }
[data-oppsett='e'] .yard-title br { display: none; }
[data-oppsett='e'] .yard-terms { padding-right: max(var(--margin), calc((100% - 760px) / 2)); padding-left: max(var(--margin), calc((100% - 760px) / 2)); text-align: center; }

/* Phones: A's letters smaller to fit over the posters; B's label and C's column fall back to the
   headline at the top (the wall label would sit off the screen); E's line may wrap. */
@media (max-aspect-ratio: 1/1) {
  [data-oppsett='a'] .facade-mark { font-size: 2.6cqw; }
  [data-oppsett='a'] .yard-head { bottom: 150px; }
  [data-oppsett='b'] .wall-label { display: none; }
  [data-oppsett='b'] .yard-head { position: absolute; width: auto; height: auto; overflow: visible; clip-path: none; }
  [data-oppsett='d'] .yard-rate span { font-size: 26vw; }
  [data-oppsett='e'] .yard-head { right: var(--margin); left: var(--margin); transform: none; }
  [data-oppsett='e'] .yard-title { white-space: normal; font-size: 9.6vw; }
  [data-oppsett='e'] .yard-title br { display: inline; }
}

/* ---------- C, softer meeting of column and wall (?oppsett=c1–c3, 1.11.2026) ----------
   C1 Toning: the column's colour fades out over the wall, no edge.
   C2 Skygge: no column; the wall's left side lies in soft, diagonal shade that holds the text.
   C3 Samme stein: the column is the wall itself, toned deep aubergine, with a soft edge. */
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett='c1'] .yard-head::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 24vw;
    background: linear-gradient(to right, rgba(31, 25, 44, 1), rgba(31, 25, 44, .82) 18%, rgba(31, 25, 44, .5) 42%, rgba(31, 25, 44, .2) 70%, rgba(31, 25, 44, 0)); /* taste-skill-ignore: neutral scrim, the column fading into the photograph */
    pointer-events: none;
    content: '';
  }

  [data-oppsett='c2'] .yard-head,
  [data-oppsett='c3'] .yard-head,
  [data-oppsett='c4'] .yard-head,
  [data-oppsett='c5'] .yard-head { background: none; text-shadow: 0 1px 16px rgba(20, 15, 30, .5); } /* taste-skill-ignore: keeps the text readable on the photograph */
  /* C2 and C3 tone the wall itself (on the stage, so the blend reaches the photograph), not the
     column; they fade with the headline when the camera goes into a project. */
  [data-oppsett='c2'] .yard-stage::after,
  [data-oppsett='c4'] .yard-stage::after,
  [data-oppsett='c3'] .yard-stage::after,
  [data-oppsett='c3'] .yard-stage::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: var(--head, 1);
    pointer-events: none;
    content: '';
  }
  /* C2: shade with a slanted, soft edge; multiply towards white leaves the lit wall untouched. */
  [data-oppsett='c2'] .yard-stage::after,
  [data-oppsett='c4'] .yard-stage::after {
    width: calc(min(40vw, 600px) * 1.7);
    background: linear-gradient(110deg, #4d4170, #4d4170 52%, #a59bbd 63%, #fff 75%); /* taste-skill-ignore: shade cast on the photograph */
    mix-blend-mode: multiply;
  }
  /* C3: the stone toned deep aubergine (multiply for the colour, a veil for depth), fading out over
     the last 180 px. */
  [data-oppsett='c3'] .yard-stage::after,
  [data-oppsett='c3'] .yard-stage::before {
    width: calc(min(40vw, 600px) + 90px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent); /* taste-skill-ignore: a mask that softens the edge, not a colour gradient */
    mask-image: linear-gradient(to right, #000 calc(100% - 180px), transparent); /* taste-skill-ignore: mask for a soft edge */
  }
  [data-oppsett='c3'] .yard-stage::before { background: #6a5a88; mix-blend-mode: multiply; }
  [data-oppsett='c3'] .yard-stage::after { background: rgba(31, 25, 44, .38); }
}

/* ---------- C4: C2's shade with the rate as the hero, as on the Timbre site (1.11.2026) ----------
   2,99 % very large in Timbre's pale pink, "effektiv rente fra dag én" under it, then the line from
   the Timbre hero with the headline in bold, then the project buttons. */
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett='c4'] .yard-head { gap: 0; }
  [data-oppsett='c4'] .yard-rate { order: 1; display: block; margin: 0; color: var(--ink); font-size: clamp(1.35rem, .8rem + 1.4vw, 2.5rem); white-space: nowrap; font-weight: 700; font-style: italic; line-height: 1; text-transform: uppercase; }
  [data-oppsett='c4'] .yard-rate span { display: block; margin-bottom: .12em; color: #f0c9c4; font-size: clamp(6rem, 2rem + 8.4vw, 11.5rem); line-height: .82; letter-spacing: -.02em; text-transform: none; }
  [data-oppsett='c4'] .yard-lede { display: none; }
  [data-oppsett='c4'] .yard-lede-alt { order: 2; display: block; max-width: 30ch; margin: 28px 0 0; color: rgba(255, 249, 237, .86); font-size: var(--step-lead); line-height: 1.35; }
  [data-oppsett='c4'] .yard-title { order: 3; margin-top: 2px; font-size: var(--step-lead); font-style: normal; line-height: 1.35; text-transform: none; }
  [data-oppsett='c4'] .yard-title br { display: none; }
  [data-oppsett='c4'] .yard-links { order: 4; margin-top: 30px; }
}

/* ---------- C5: the hero from Jacob's reference, the default since 2.11.2026 ----------
   Wordmark top left; BEDRE RENTE UTEN Å VENTE large; the offer in lighter type; two outlined pill
   buttons into the projects; the loan example small at the foot. A charcoal-purple shade over the
   wall's left side fades smoothly into the photograph, and a soft warm glow lifts the right side.
   The posters keep their place on the wall; the camera puts them at about 56–75 % of the width. */
[data-oppsett='c5'] .yard-stage::after,
[data-oppsett='c5'] .yard-stage::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--head, 1);
  pointer-events: none;
  content: '';
}
/* Shade: multiply towards white, so the right of the photo is untouched and the stone and vines show
   through on the left. */
[data-oppsett='c5'] .yard-stage::after {
  background: linear-gradient(to right, #3a3150 0%, #3a3150 24%, #6c6385 36%, #b7b0c7 46%, #fff 58%); /* taste-skill-ignore: shade on the photograph */
  mix-blend-mode: multiply;
}
/* Warmth: a low amber glow over the posters and the bench (soft light keeps the stone's texture). */
[data-oppsett='c5'] .yard-stage::before {
  background: radial-gradient(ellipse 48% 62% at 66% 46%, rgba(255, 170, 90, .85), rgba(255, 170, 90, 0) 72%); /* taste-skill-ignore: warm light on the photograph */
  mix-blend-mode: soft-light;
}
[data-oppsett='c5'] .yard-links a { padding: 16px 30px; font-size: clamp(.95rem, .8rem + .35vw, 1.2rem); }
[data-oppsett='c5'] .yard-lede { color: var(--ink); font-weight: 400; }
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett='c5'] .yard-title { font-size: clamp(2.5rem, 1rem + 3.3vw, 4.6rem); }
}

/* Without the camera (reduced motion), the still wall moves right so the posters clear the shade, and
   the shade and glow cover the screen, not the swipeable wall. */
html:not(.camera)[data-oppsett='c5'] .yard-stage::after,
html:not(.camera)[data-oppsett='c5'] .yard-stage::before { position: fixed; }
@media (orientation: landscape) and (min-width: 900px) {
  html:not(.camera)[data-oppsett='c5'] .yard-wall { left: 64%; }
}

/* Phones and portrait tablets: the same order from the top (wordmark, headline, offer, buttons), the
   shade falling from the top, the wall with both posters and the bench below. */
@media (max-aspect-ratio: 1/1) {
  [data-merke][data-oppsett='c5'] .yard-bar .wordmark { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  [data-oppsett='c5'] .yard-bar { justify-content: space-between; }
  [data-oppsett='c5'] .bar-links { display: none; }
  [data-oppsett='c5'] .yard-head { text-shadow: 0 1px 16px rgba(20, 15, 30, .5); } /* taste-skill-ignore: keeps the text readable on the photograph */
  [data-oppsett='c5'] .yard-lede { display: block; max-width: 30ch; margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.35; }
  [data-oppsett='c5'] .yard-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  [data-oppsett='c5'] .yard-links a { padding: 12px 18px; font-size: .9375rem; }
  [data-oppsett='c5'] .yard-stage::after { background: linear-gradient(to bottom, #3a3150 0%, #3a3150 22%, #8a82a1 40%, #fff 58%); } /* taste-skill-ignore: shade on the photograph */
  [data-oppsett='c5'] .yard-stage::before { background: radial-gradient(ellipse 80% 40% at 55% 66%, rgba(255, 178, 102, .5), rgba(255, 178, 102, 0) 70%); } /* taste-skill-ignore: warm light on the photograph */
}

/* ---------- The evening wall (osl-kveld), the default since 2.11.2026 ----------
   Jacob's photo of the wall in low evening sun with branch shadows, 1764 × 892 (upscaled 4x to
   6000 px), set into the wall's 1376 × 768 measure: 768 units tall, 1519 wide, centred. The live
   posters sit inside the photo's own black frames, so the frames and their shadows stay visible.
   The photo already carries the light, so the wall's light copy on the posters and C5's warm glow
   are switched off. */
.yard[data-scene='osl-kveld'] { --scene: url('assets/reklametavler/osl-kveld-v1.jpg'); --photo-x: 71.4; --photo-y: 0; --photo-w: 1518.8; --photo-h: 768; }
.yard[data-scene='osl-kveld'] .billboard-pilar { --x: 781; --y: 253.1; --w: 118.8; --h: 174.8; }
.yard[data-scene='osl-kveld'] .billboard-timbre { --x: 929.9; --y: 253.1; --w: 121.4; --h: 174.8; }
.yard[data-scene='osl-kveld'] .poster-light { display: none; }
[data-oppsett='c5'] .yard[data-scene='osl-kveld'] .yard-stage::before { display: none; }
.yard[data-scene='osl-kveld'] .billboard .poster-line { top: 9cqw; left: 9cqw; max-width: 84%; font-size: 11cqw; }
.yard[data-scene='osl-kveld'] .billboard-timbre .poster-line { font-size: 12.5cqw; }
.yard[data-scene='osl-kveld'] .billboard .poster-rate { bottom: 9cqw; left: 9cqw; max-width: 54%; font-size: 5.8cqw; }
.yard[data-scene='osl-kveld'] .billboard .poster-logo { right: 9cqw; bottom: 9cqw; }
.yard[data-scene='osl-kveld'] .billboard-pilar .poster-logo { width: 15cqw; }
.yard[data-scene='osl-kveld'] .billboard-timbre .poster-logo { width: 30cqw; }
/* C5 on wide screens: the shade on the left replaces the dark fade from the top. */
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett='c5'] .yard-view::before { display: none; }
}
/* The evening photo is already composed like the reference: no shift without the camera. On phones its
   top edge (the photo has no wall above the frame) fades into the aubergine above. */
@media (orientation: landscape) and (min-width: 900px) {
  html:not(.camera)[data-oppsett='c5'] .yard[data-scene='osl-kveld'] .yard-wall { left: 50%; }
}
@media (max-aspect-ratio: 1/1) {
  .yard[data-scene='osl-kveld'] .yard-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); /* taste-skill-ignore: a mask that fades the photo edge, not a colour gradient */
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%); /* taste-skill-ignore: mask for a soft edge */
  }
}

/* ---------- The evening wall with landscape boards (osl-kveld-liggende), the default ----------
   The evening photo without frames (osl-kveld-v2). Two boards 310 × 177 (the films' shape) placed
   freely: a clear gap above the bench (top at y 456), right of the shade, inside the 1440 px view
   (x ≤ 1302), and 48 units of wall between them, as on the earlier walls (Jacob, 2.11.2026). Black frames and a
   a cast shadow falling right and down (taste-skill-ignore: photographic), as the evening sun casts. The shade on the left ends sooner, so the
   left board stands in the light. */
.yard[data-scene='osl-kveld-liggende'] { --scene: url('assets/reklametavler/osl-kveld-v2.jpg'); --photo-x: 71.4; --photo-y: 0; --photo-w: 1518.8; --photo-h: 768; }
.yard[data-scene='osl-kveld-liggende'] .billboard-pilar { --x: 600; --y: 244; --w: 310; --h: 177; }
.yard[data-scene='osl-kveld-liggende'] .billboard-timbre { --x: 958; --y: 244; --w: 310; --h: 177; }
.yard[data-scene='osl-kveld-liggende'] .billboard { overflow: visible; outline: .55cqw solid #121314; box-shadow: 1.8cqw 1.2cqw 1.6cqw rgba(12, 12, 14, .5); } /* taste-skill-ignore: the boards' shadow on the wall in the photograph */
.yard[data-scene='osl-kveld-liggende'] .poster-light { display: none; }
[data-oppsett='c5'] .yard[data-scene='osl-kveld-liggende'] .yard-stage::before { display: none; }
@media (orientation: landscape) and (min-width: 900px) {
  [data-oppsett='c5'] .yard[data-scene='osl-kveld-liggende'] .yard-stage::after { background: linear-gradient(to right, #3a3150 0%, #3a3150 20%, #6c6385 30%, #b7b0c7 37%, #fff 44%); } /* taste-skill-ignore: shade on the photograph */
  html:not(.camera)[data-oppsett='c5'] .yard[data-scene='osl-kveld-liggende'] .yard-wall { left: 50%; }
}
@media (max-aspect-ratio: 1/1) {
  .yard[data-scene='osl-kveld-liggende'] .yard-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); /* taste-skill-ignore: a mask that fades the photo edge, not a colour gradient */
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%); /* taste-skill-ignore: mask for a soft edge */
  }
}

/* ---------- Phone layouts to compare (?mobil=1–3, 2.11.2026) ----------
   1 Hele veggen: the camera zooms out so both boards sit side by side under the text.
   2 Stablet: on phones the boards hang one above the other over the bench, so each can be larger;
     scrolling goes into the top one, then down into the other.
   3 Veggen først: the wall and both boards at the top; the headline and buttons at the bottom,
     above the loan example, with the shade rising from the bottom. */
@media (max-aspect-ratio: 1/1) {
  [data-mobil='2'] .yard[data-scene='osl-kveld-liggende'] .billboard-pilar { --x: 613; --y: 52; --w: 310; --h: 177; }
  [data-mobil='2'] .yard[data-scene='osl-kveld-liggende'] .billboard-timbre { --x: 613; --y: 255; --w: 310; --h: 177; }

  [data-mobil='3'] .yard-head { top: auto; bottom: 128px; }
  [data-mobil='3'][data-oppsett='c5'] .yard-stage::after { background: linear-gradient(to top, #3a3150 0%, #3a3150 34%, #8a82a1 50%, #fff 64%); } /* taste-skill-ignore: shade on the photograph */
  [data-mobil='3'] .yard-view::before { height: 18%; }

  /* 1 and 3: at this size the photo is shorter than the screen, so it sits as a band on aubergine,
     fading out at both ends (no blurred copy behind it). */
  [data-mobil='1'] .yard-view::after,
  [data-mobil='3'] .yard-view::after { display: none; }
  /* The screen gets the aubergine itself, so the shade blends with it below the photo instead of
     with an empty backdrop (which shows pale). */
  [data-mobil='1'] .yard-view,
  [data-mobil='3'] .yard-view { background: var(--bg); }
  .camera[data-mobil='1'] .yard-stage,
  .camera[data-mobil='3'] .yard-stage { z-index: auto; }
  [data-mobil='1'] .yard[data-scene^='osl-kveld'] .yard-photo,
  [data-mobil='3'] .yard[data-scene^='osl-kveld'] .yard-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 70%, transparent 82%); /* taste-skill-ignore: a mask that fades the photo edges, not a colour gradient */
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 70%, transparent 82%); /* taste-skill-ignore: mask for soft edges */
  }
}

/* Inside a project the shade and the warm glow are fully faded (--head is 0), and on portrait screens
   the photograph too (--veil is 1). They are switched off there, and the loan example gets its own
   layer: on iPhone, Safari otherwise blended the small print through them again on every film frame,
   and every other frame came out dim and blurred (Jacob's screen recording, 2.11.2026). */
.camera.is-inside .yard-stage::after,
.camera.is-inside .yard-stage::before { display: none; }
.camera .yard-view.is-veiled .yard-photo { visibility: hidden; }
.camera .yard-view.is-veiled::after { display: none; }
.yard-terms { transform: translateZ(0); }

/* Phones, going into a project: the board's black frame and its shadow fade out with the printed
   words (--printed), so the film meets the aubergine directly; back on the wall they return
   (Jacob, 2.11.2026). Wide screens keep the frame: the film covers the screen there anyway. */
@media (max-aspect-ratio: 1/1) {
  .camera .yard[data-scene='osl-kveld-liggende'] .billboard {
    outline-color: rgba(18, 19, 20, var(--printed, 1));
    box-shadow: 1.8cqw 1.2cqw 1.6cqw rgba(12, 12, 14, calc(.5 * var(--printed, 1))); /* taste-skill-ignore: the boards' shadow on the wall, fading out */
  }
}