/* Backdrop, Little details and Photo style (7 Oct 2026, late). Shared by the front door and the builder; js/extras.js sets the variables.
   The front door's little website is .site (pictures .shp, words .s-copy, button .s-btn, picture box .s-media); the builder's is
   .pv (pictures .pv-pic, words .pv-copy, button .pv-btn, picture box .pv-media, backdrop layer .pv-tex). A row picture is .ph. */

/* ---------- backdrop: drawn on the page itself (front door) or its backdrop layer (builder) ---------- */
.site, .pv-tex, .bd-tile { background-image: var(--bd-i, none); background-size: var(--bd-s, auto); background-position: var(--bd-p, 0 0); background-repeat: var(--bd-r, repeat); }
/* a border strip (13 Oct 2026, extras.js marks the page data-edge): on the little website the top band has its own room under the
   top bar, never behind it. The bar's fine line gives way to the band (13 Oct 2026, review: two lines doubled up there); only its color
   goes, so nothing moves. The bottom band belongs to the foot of the page, which the first screen does not reach. A row picture keeps
   both bands at its own edges. The builder places its bands in builder.css. */
.site[data-edge] { background-image: none; }
.site[data-edge] .s-nav { position: relative; margin-bottom: var(--bde-h); border-bottom-color: transparent; }
.site[data-edge] .s-nav::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: var(--bde-h); background: var(--bde-t) left 0 top 0 / var(--bde-s) repeat-x; pointer-events: none; }
/* on a phone-sized page the band's room comes out of the picture, so the headline and the button stay inside the frame. Short phones
   (site.css caps the picture by the frame's height there) take it from that cap */
@container (max-width: 470px) {
  .site[data-edge] .s-media, .site[data-edge][data-lay="arch"] .s-media { height: calc(30cqi - var(--bde-h)); }
  .site[data-edge][data-lay="center"] .s-media { height: calc(26cqi - var(--bde-h)); }
  .site[data-edge][data-lay="collage"] .s-media { height: calc(32cqi - var(--bde-h)); }
  .site[data-edge][data-lay="full"] .s-hero { min-height: calc(66cqi - var(--bde-h)); }
}
@media (max-height: 700px) and (max-width: 599px) {
  #screen .site[data-edge] .s-media, #screen .site[data-edge][data-lay="arch"] .s-media { height: calc(min(22cqi, 24cqh) - var(--bde-h)); }
  #screen .site[data-edge][data-lay="full"] .s-hero { min-height: calc(50cqi - var(--bde-h)); }
}

/* ---------- little details (class orn: the page's own .dk means a dark page): five places, each a drawing filled with one of her colors ---------- */
.s-copy, .pv-copy, .s-btn, .pv-btn { position: relative; }
.orn { position: absolute; z-index: 5; pointer-events: none; display: var(--d, none); width: calc(var(--w, 4cqi) * var(--dkk, 1)); aspect-ratio: var(--ar, 1);
  background: var(--c, currentColor); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)); }
.orn-a { --d: var(--dkA-d); --w: var(--dkA-w); --ar: var(--dkA-ar); --c: var(--dkA-c); --m: var(--dkA-m); --r: var(--dkA-r); --tx: var(--dkA-tx, -30%); --ty: var(--dkA-ty, -30%); left: 0; top: 0; }
.orn-b { --d: var(--dkB-d); --w: var(--dkB-w); --ar: var(--dkB-ar); --c: var(--dkB-c); --m: var(--dkB-m); --r: var(--dkB-r); --tx: var(--dkB-tx, -70%); --ty: var(--dkB-ty, -70%); left: 100%; top: 100%; }
.orn-c { --d: var(--dkC-d); --w: var(--dkC-w); --ar: var(--dkC-ar); --c: var(--dkC-c); --m: var(--dkC-m); --r: var(--dkC-r); --tx: var(--dkC-tx, -75%); --ty: var(--dkC-ty, -25%); left: 100%; top: 0; }
.orn-d { --d: var(--dkD-d); --w: var(--dkD-w); --ar: var(--dkD-ar); --c: var(--dkD-c); --m: var(--dkD-m); --r: var(--dkD-r); --tx: var(--dkD-tx, -40%); --ty: var(--dkD-ty, -60%); left: 100%; top: 0; }
/* the rule under the headline takes its own room in the column of words */
.orn-u { --d: var(--dkU-d); --w: var(--dkU-w); --ar: var(--dkU-ar); --c: var(--dkU-c); --m: var(--dkU-m); --r: 0deg; --tx: 0; --ty: 0; position: relative; margin: -.4cqi 0 1.4cqi; }
:is(.site, .pv):is([data-lay="center"], [data-lay="arch"]) .orn-u { margin-inline: auto; }
/* on a full-width picture the picture's corners are the page's corners and the words sit on the left: the drawings move in from
   the edge, on the right */
:is(.site, .pv)[data-lay="full"] .orn-a { left: 74%; top: 18%; }
:is(.site, .pv)[data-lay="full"] .orn-c { left: 92%; top: 14%; }
:is(.site, .pv)[data-lay="full"] .orn-b { left: 98%; top: 98%; }
/* an arched picture sits beside or above the words, and a poster's picture is tucked under the big headline: there the drawings at
   its lower right (arch) and upper left (poster) sit wholly on the picture */
:is(.site, .pv)[data-lay="arch"] .orn-b { --tx: -100%; --ty: -100%; }
:is(.site, .pv)[data-lay="poster"] .orn-a { top: 100%; --tx: -10%; --ty: -100%; }
/* on a small page (a phone's) the words take more of the width, so the drawings are a little smaller */
@container (max-width: 759px) { :is(.site, .pv) .orn { --dkk: .85; } }
/* a change of details: the drawings pop in, one after another */
.orn-in .orn { animation: orn-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.orn-in .orn-b { animation-delay: .08s; } .orn-in .orn-c { animation-delay: .16s; } .orn-in .orn-d { animation-delay: .22s; } .orn-in .orn-u { animation-name: orn-draw; animation-delay: .1s; }
@keyframes orn-pop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes orn-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .orn-in .orn { animation: none; } }

/* ---------- photo style: every picture on the page (img inside .shp, .pv-pic or .ph), with an optional layer over it ---------- */
/* 13 Oct 2026 (review, stand-in photos): the builder's item cards (.pv-shot) wear it too, and so do the card set's pictures and the
   worksheets' strips, as on the front door and in the theme. Each style's filter is --phf on the page (none unless a style sets it),
   so a picture behind a drawn candle keeps its soft blur under the style. make-theme.cjs photoCSS reads --phf back as the filter. */
[data-ph] { --phf: none; }
[data-ph]:not([data-ph="natural"]) :is(.shp, .pv-pic, .ph, .pv-shot)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
[data-ph="bw"] { --phf: grayscale(1) contrast(1.12); }
[data-ph="film"] { --phf: contrast(1.08) saturate(.9); }
[data-ph="film"] :is(.shp, .pv-pic, .ph, .pv-shot)::after, [data-ph="sepia"] :is(.shp, .pv-pic, .ph, .pv-shot)::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px;
  mix-blend-mode: overlay; opacity: .5; }
[data-ph="faded"] { --phf: sepia(.32) saturate(.75) contrast(.86) brightness(1.08); }
[data-ph="faded"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: radial-gradient(60% 55% at 96% 4%, rgba(255, 150, 70, .5), transparent 70%); mix-blend-mode: screen; }
[data-ph="golden"] { --phf: sepia(.18) saturate(1.3) brightness(1.04) contrast(1.02); }
[data-ph="golden"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: linear-gradient(135deg, rgba(255, 196, 90, .55), rgba(255, 110, 60, .25)); mix-blend-mode: soft-light; }
[data-ph="cool"] { --phf: saturate(.82) hue-rotate(8deg) brightness(1.03); }
[data-ph="cool"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: rgba(60, 130, 230, .45); mix-blend-mode: soft-light; }
[data-ph="duo"] :is(.shp, .pv-pic, .ph, .pv-shot) { background-color: var(--ph-hi) !important; isolation: isolate; }
[data-ph="duo"] { --phf: grayscale(1) contrast(1.15); }
[data-ph="duo"] :is(.shp, .pv-pic, .ph, .pv-shot) > img { mix-blend-mode: multiply; }
[data-ph="duo"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: var(--ph-lo); mix-blend-mode: lighten; }
[data-ph="pop"] { --phf: saturate(1.7) contrast(1.22); }
[data-ph="dots"] { --phf: saturate(1.45) contrast(1.22); }
[data-ph="dots"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: radial-gradient(circle, rgba(0, 0, 0, .32) 32%, transparent 36%) 0 0 / 7px 7px; mix-blend-mode: multiply; }
[data-ph="dreamy"] { --phf: brightness(1.08) contrast(.86) saturate(1.05); }
[data-ph="dreamy"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .5), transparent 72%); mix-blend-mode: screen; }
[data-ph="noir"] { --phf: grayscale(1) contrast(1.55) brightness(.92); }
[data-ph="noir"] :is(.shp, .pv-pic, .ph, .pv-shot)::after, [data-ph="vignette"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .6) 100%); }
[data-ph="wash"] { --phf: contrast(1.06); }
[data-ph="wash"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: var(--ph-tint); mix-blend-mode: color; opacity: .6; }
[data-ph="vignette"] { --phf: saturate(1.25) contrast(1.1); }
[data-ph="scan"] { --phf: saturate(1.25) contrast(1.1); }
[data-ph="scan"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(255, 0, 80, .08), rgba(0, 200, 255, .08)); mix-blend-mode: multiply; }
[data-ph="sepia"] { --phf: sepia(.9) contrast(1.05) brightness(.97); }
[data-ph="pastel"] { --phf: brightness(1.14) saturate(.7) contrast(.82); }
[data-ph="pastel"] :is(.shp, .pv-pic, .ph, .pv-shot)::after { background: rgba(255, 214, 232, .3); mix-blend-mode: screen; }
[data-ph]:not([data-ph="natural"]) :is(.shp, .pv-pic, .ph, .pv-shot) > img, [data-ph]:not([data-ph="natural"]) :is(.cards > i:not(.d), .ws .si) { filter: var(--phf); }
[data-ph]:not([data-ph="natural"]) :is(.s-shot, .pv-shot) > img:not(.clear) { filter: blur(1.5px) saturate(.9) var(--phf); }