/* ============================================================
   CONCEPTO P — THE HOUSE PAGES
   The pages that are not the seven rooms: a record, the letter (About),
   the address that holds nothing, the foot of the page and its list, and
   the house set in plain type for a browser that cannot draw the sheet.
   Each is a small editorial spread on the white of the house: one object,
   the words after it in reading order, generous air, numbers set as a
   catalogue sets them (numerals.css), no rule and no box anywhere.

   Spacing is the hand's rhythm (hand.css --rhythm-1..4); motion is the
   house's three curves and its speeds; depth is CP.depth (data-depth).
   ============================================================ */

/* ---------- a number as an object (rooms/numeral.js) ----------
   --hn-h is the height of a figure. The stage is larger than the figures by the margin the
   shadow needs (numeral.js writes it), and is drawn over the page with nothing behind it. */
.hn{ --hn-h:clamp(96px, 15vw, 236px); position:relative; display:inline-flex; align-items:flex-start; gap:calc(var(--hn-h)*.12); line-height:1; color:var(--ink); }
.hn-pre{
  font-family:var(--mono); font-weight:400; font-size:calc(var(--hn-h)*.17); letter-spacing:.08em; line-height:1;
  padding-top:calc(var(--hn-h)*.02); color:var(--ink);
}
.hn-body{ position:relative; display:block; height:var(--hn-h); width:calc(var(--hn-h)*var(--hn-w)); }
.hn-type{
  position:absolute; left:0; bottom:0; font-family:var(--num); font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:"lnum" 1, "pnum" 1; font-size:calc(var(--hn-h)*1.5); line-height:.69; letter-spacing:.02em; font-weight:400;
  white-space:nowrap; transition:opacity var(--slower) var(--settle);
}
.hn-stage{
  position:absolute; pointer-events:none;
  left:calc(var(--hn-h)*var(--hn-mx, .22)*-1); top:calc(var(--hn-h)*var(--hn-mt, .2)*-1);
  width:calc(var(--hn-h)*(var(--hn-w) + 2*var(--hn-mx, .22)));
  height:calc(var(--hn-h)*(1 + var(--hn-mt, .2) + var(--hn-mb, .34)));
}
.hn-stage canvas{ opacity:0; transition:opacity var(--slower) var(--settle); }
.hn.is-lit .hn-stage canvas{ opacity:1; }
.hn.is-lit .hn-type{ opacity:0; transition-duration:var(--slow); }   /* the type steps aside quickly: two drawings of one number never stand together long */

/* ---------- the voices of these pages: the house's one scale (type.css) ----------
   kick   a label: the catalogue's small capitals (.t-label-s), in the letterhead's vinyl
   h2     a section's name (.t-title), in vinyl
   lede   a reading line under it (.t-body), clean ink
   note   an honest aside (a sample, a preview): the reading face in italic at the note's size (.t-note)
   cap    a record number standing where a caption would (.t-label-s) */
.hs-kick{
  margin:0; font-family:var(--mono); font-size:var(--t-label-s); letter-spacing:var(--tr-mono, .09em); line-height:1.5;
  font-variant-numeric:lining-nums proportional-nums; color:var(--ink); filter:url(#cp-vinyl-xs);
}
.hs-sample{ margin-left:1.1em; font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:1.06em; color:var(--ink-quiet); }
.hs-h2{
  margin:.25em 0 0; font-family:var(--display); font-weight:400; font-size:var(--t-title); line-height:1.04;
  letter-spacing:-.015em; color:var(--ink); padding-bottom:.08em; filter:url(#cp-vinyl-s);
}
.hs-lede{ margin:var(--rhythm-1) 0 0; max-width:34em; font-family:var(--serif); font-size:var(--t-body); line-height:var(--lh-read); color:var(--ink); }
.hs-note{ margin:var(--rhythm-1) 0 0; max-width:30em; font-family:var(--serif); font-style:italic; font-size:var(--t-note); line-height:1.5; color:var(--ink-quiet); }
.hs-cap{ margin-top:14px; font-family:var(--mono); font-size:var(--t-label-s); letter-spacing:var(--tr-mono, .09em); color:var(--ink); filter:url(#cp-vinyl-xs); }
.hs-ways{ display:flex; flex-wrap:wrap; gap:.4em 2.2em; margin:var(--rhythm-1) 0 0; font-family:var(--serif); font-size:clamp(17px, 16px + .3vw, 21px); line-height:1.4; }
.hs-ways-k{ font-style:normal; }
.hs-ways.is-pub{ gap:.3em; }   /* "Published in Issue II" is one sentence, not two actions */

/* ---------- a record (rooms/record.js) ---------- */
.hs-rec{ background:var(--paper); color:var(--ink); padding:0 var(--margin); overflow-x:clip; }
.hs-rec-hero{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 40px);
  padding-top:calc(var(--nav-h) + var(--rhythm-2)); align-items:end;
}
.hs-rec-mark{ grid-column:1 / span 7; display:grid; gap:clamp(18px, 2.6vw, 34px); align-content:start; }
.hs-rec-no.hn{ --hn-h:clamp(110px, 17vw, 260px); }
.hs-rec-say{ grid-column:8 / span 5; padding-bottom:calc(var(--rhythm-1)*.4); }
.hs-rec-title{ margin:0; padding-bottom:.1em; }
.hs-rec-sub{ margin:.5em 0 0; }
.hs-fields{ margin:var(--rhythm-1) 0 0; display:grid; gap:.5em; }
.hs-field{ display:grid; grid-template-columns:8.5em 1fr; column-gap:1.2em; align-items:baseline; }
.hs-field dt, .hs-notes dt{ color:var(--ink); }
.hs-field dd{ margin:0; }

.hs-rec-plate{ grid-column:1 / -1; margin:var(--rhythm-3) 0 0; }
.hs-rec-plate.is-strip{ margin-inline:calc(var(--margin)*-0.5); }
.hs-rec-plate.is-photo{ grid-column:3 / span 8; }
.hs-rec-img{ display:block; width:100%; height:auto; opacity:0; transition:opacity var(--slowest) var(--settle); }
.hs-rec-img.is-in{ opacity:1; }
.hs-rec-plate.is-strip .hs-rec-img{ filter:drop-shadow(0 18px 22px rgba(26,24,20,.16)) drop-shadow(0 2px 3px rgba(26,24,20,.18)); }
.hs-rec-plate.is-photo .hs-rec-img{ max-height:86vh; object-fit:contain; box-shadow:0 30px 60px -30px rgba(26,24,20,.35), 0 2px 6px rgba(26,24,20,.12); }
.hs-rec-plate .hs-cap{ padding-left:calc(var(--margin)*.5); }
.hs-rec-plate.is-photo .hs-cap{ padding-left:0; }

.hs-rec-line{ padding-top:var(--rhythm-4); }
.hs-rec-line.is-quiet{ padding-top:var(--rhythm-3); }
.hs-sec-head{ max-width:62rem; }
.hs-br{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 40px);
  align-items:center; margin-top:var(--rhythm-3);
}
/* not two halves: the picture is the larger part and stands high, the words sit lower beside it, so the two
   overlap in height and pass one another as the page moves (record.js gives the picture its depth and side) */
.hs-br{ align-items:start; }
.hs-br-fig{ grid-column:1 / span 7; margin:0; }
.hs-br-say{ grid-column:9 / span 4; padding-top:clamp(48px, 14vh, 160px); }
.hs-br.is-even .hs-br-fig{ grid-column:6 / span 7; grid-row:1; }
.hs-br.is-even .hs-br-say{ grid-column:1 / span 4; grid-row:1; }
.hs-br-img{ display:block; width:100%; height:auto; opacity:0; transition:opacity var(--slowest) var(--settle); }
.hs-br-img.is-in{ opacity:1; }
/* a sheet the house drew is a thing of paper resting on the white: it keeps a soft shadow under it, as the strip does */
.hs-br-fig.is-drawn .hs-br-img{ filter:drop-shadow(0 16px 20px rgba(26,24,20,.13)) drop-shadow(0 1px 2px rgba(26,24,20,.16)); }
.hs-br-no{ margin:0; color:var(--ink); }
.hs-br-what{ margin:.35em 0 0; }
.hs-br-facts{ margin:.6em 0 0; color:var(--ink); }
.hs-notes{ margin:var(--rhythm-1) 0 0; display:grid; gap:.85em; max-width:31em; }
.hs-note-row{ display:grid; grid-template-columns:7.5em 1fr; column-gap:1.2em; align-items:baseline; }
.hs-note-row dd{ margin:0; }
.hs-br-pass{ margin:var(--rhythm-1) 0 0; max-width:31em; }

.hs-rec-after{ padding:var(--rhythm-4) 0 var(--rhythm-3); }
.hs-turn{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:var(--rhythm-2); }
.hs-turn-a{ flex-direction:column; align-items:flex-start; gap:.35em; }
.hs-turn-a.is-next{ align-items:flex-end; margin-left:auto; text-align:right; }
.hs-turn-a{ display:inline-flex; min-height:44px; }

@media (max-width:759px){
  .hs-rec-hero{ grid-template-columns:1fr; padding-top:calc(var(--nav-h) + var(--rhythm-1)); }
  .hs-rec-mark, .hs-rec-say, .hs-rec-plate, .hs-rec-plate.is-photo{ grid-column:1; }
  .hs-rec-no.hn{ --hn-h:clamp(84px, 26vw, 140px); }
  .hs-rec-say{ margin-top:var(--rhythm-1); }
  .hs-rec-plate{ margin-top:var(--rhythm-2); }
  /* a phone holds three frames of the strip at a size the eye can read, not five too small to:
     the strip runs past both edges of the glass and the scroll carries it a little sideways */
  .hs-rec-plate.is-strip{ margin-inline:calc(var(--margin)*-1); overflow:hidden; padding-bottom:28px; }
  .hs-rec-plate.is-strip .hs-rec-img{ width:178%; max-width:none; margin-left:-30%; }
  .hs-rec-plate.is-strip .hs-cap{ padding-left:var(--margin); }
  .hs-field{ grid-template-columns:7em 1fr; }
  .hs-br, .hs-br.is-even{ grid-template-columns:1fr; margin-top:var(--rhythm-2); }
  .hs-br .hs-br-fig, .hs-br.is-even .hs-br-fig, .hs-br .hs-br-say, .hs-br.is-even .hs-br-say{ grid-column:1; grid-row:auto; }
  .hs-br-say{ margin-top:var(--rhythm-1); padding-top:0; }
  .hs-note-row{ grid-template-columns:1fr; row-gap:.1em; }
  .hs-turn{ flex-direction:column; align-items:stretch; gap:var(--rhythm-1); }
}

/* ---------- the address that holds nothing (rooms/missing.js) ---------- */
.hs-lost{
  position:relative; min-height:100svh; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; padding:calc(var(--nav-h) + var(--rhythm-2)) var(--margin) var(--rhythm-3);
}
.hs-lost-say{ display:grid; gap:0; max-width:min(1100px, 100%); }
.hs-lost-mark{ margin-bottom:var(--rhythm-1); }
.hs-lost-no.hn{ --hn-h:clamp(90px, 13vw, 200px); }
.hs-lost-line{ margin:.3em 0 0; padding-bottom:.08em; max-width:13em; }
.hs-lost-path{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3em 1.2em; margin:var(--rhythm-1) 0 0; }
.hs-lost-path-v{ overflow-wrap:anywhere; }
.hs-lost-ways{ display:flex; flex-direction:column; align-items:flex-start; gap:.6em; margin-top:var(--rhythm-2); }
/* every action on these pages is at least a fingertip tall, whatever its size of type */
.hs-lost-ways a, .hs-rec .hs-ways a, .hs-step-name, .hs-col a, .ar-plain-a{ display:inline-flex; align-items:center; min-height:44px; }
.hs-rec .hs-ways{ align-items:baseline; }   /* a way grown to the fingertip still sits on the line of the words beside it */
/* the turn keeps its kicker on the figures' own edge (the fingertip rule above centres the act's children) */
.hs-rec .hs-turn-a{ align-items:flex-start; }
.hs-rec .hs-turn-a.is-next{ align-items:flex-end; }
.hs-lost-rooms{ display:flex; flex-wrap:wrap; align-items:center; gap:0 1.6em; margin:var(--rhythm-1) 0 0; }
.hs-lost-rooms .hs-kick{ margin-right:.4em; }

/* ---------- the foot (house/editorial.js E.foot) ----------
   The colophon on the white of the house. The list's input keeps its baseline: it is where to write. */
.foot{ position:relative; background:var(--paper); color:var(--ink); }
.foot-in{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 40px); row-gap:var(--rhythm-1);
  align-items:end; padding:var(--rhythm-3) var(--margin) clamp(28px, 5vh, 56px);
}
.foot-house{ grid-column:1 / span 5; }
/* the foot's words are set in the house's scale (house/editorial.js gives each its class): the name .t-title, what the
   house is .t-note (in the reading face's italic), the list's word .t-label-s, the year .t-num; here only their places */
.foot-mark{ margin:0; line-height:1; }
.foot-what{ margin:.45em 0 0; font-style:italic !important; }
.foot-join{ grid-column:7 / span 6; }
.foot-k{ margin:0 0 .3em; }
.foot-list{ display:flex; align-items:baseline; gap:1.4em; max-width:30em; }
.foot-input{
  flex:1; min-width:0; background:transparent; border:0; border-bottom:1px solid rgba(26,24,20,.34); border-radius:0; outline:none;
  padding:.5em 0 .35em; font-family:var(--serif); font-size:var(--t-lead); color:var(--ink);
  transition:border-color var(--slow) var(--settle);
}
.foot-input::placeholder{ color:rgba(26,24,20,.42); font-style:italic; }
.foot-input:focus{ border-bottom-color:var(--ink); }
.foot-input:focus-visible{ outline:none; }
.foot-send{ font-size:var(--t-lead); }
.foot-note, .foot-ack{ margin:.7em 0 0; font-family:var(--serif); font-style:italic; font-size:var(--t-note); line-height:1.5; color:var(--ink-quiet); }
.foot-ack:empty{ display:none; }
.foot.is-noted .foot-note{ display:none; }
.foot-ack{ color:var(--ink); }
.foot-meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:0 2em; margin:var(--rhythm-1) 0 0; }
.foot-year{ align-self:center; }

@media (max-width:759px){
  .hs-lost{ align-items:flex-start; }
  .foot-in{ grid-template-columns:1fr; }
  .foot-house, .foot-join{ grid-column:1; }
  .foot-meta{ gap:0 1.4em; }
}

/* ---------- About (rooms/about.js) ---------- */
.hs-about{ background:var(--paper); color:var(--ink); padding:0 var(--margin); overflow-x:clip; }
.hs-ab-open{ position:relative; min-height:88svh; display:flex; align-items:flex-end; padding:calc(var(--nav-h) + var(--rhythm-2)) 0 var(--rhythm-2); }
.hs-ab-p{
  position:absolute; right:calc(var(--margin)*-0.6); top:calc(var(--nav-h) - 2vw); z-index:0; pointer-events:none; user-select:none;
  font-family:var(--display); font-size:clamp(300px, 46vw, 760px); line-height:.8; letter-spacing:0;
  /* a blind emboss, as a fine press stamps a mark into the sheet: the letter is the page's own white, raised a
     little, and only its shadow on the lower edge tells it is there. Far back, never a second black P beside the name */
  color:var(--paper);
  text-shadow:1px 1px 0 rgba(26,24,20,.07), 2px 3px 3px rgba(26,24,20,.07), 6px 10px 18px rgba(26,24,20,.07), -1px -1px 0 rgba(255,255,255,1);
}
.hs-ab-name{ position:relative; z-index:1; max-width:min(56rem, 100%); }
.hs-ab-title{ margin:.2em 0 0; white-space:nowrap; padding-bottom:.08em; }
.hs-ab-what{ margin:.4em 0 0; }
.hs-ab-keeper{ margin:.9em 0 0; }

.hs-letter{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 40px);
  padding-top:var(--rhythm-4);
}
.hs-letter-head{ grid-column:1 / span 3; align-self:start; position:sticky; top:calc(var(--nav-h) + var(--rhythm-1)); }
.hs-letter-head .hs-note{ margin-top:.8em; }
.hs-letter-body{ grid-column:5 / span 7; max-width:33em; }
.hs-letter-to{ margin:0 0 1.1em; font-family:var(--display); font-style:italic; font-size:clamp(28px, 2.6vw, 40px); line-height:1.15; }
.hs-letter-p{
  margin:0; font-family:var(--serif); font-variant-numeric:oldstyle-nums proportional-nums;
  font-size:clamp(19px, 17px + .45vw, 23px); line-height:1.62; text-wrap:pretty; hyphens:auto; -webkit-hyphens:auto;
}
.hs-letter-p + .hs-letter-p{ text-indent:1.6em; }
.hs-reach{ opacity:0; translate:0 .7em; filter:blur(var(--arrive-blur)); transition:opacity var(--slower) var(--settle), translate var(--slower) var(--settle), filter var(--slower) var(--settle); }
.hs-reach.is-read{ opacity:1; translate:0 0; filter:none; }
.hs-letter-sign{ margin:1.2em 0 0 auto; width:clamp(150px, 15vw, 220px); }
.hs-sign{ display:block; width:100%; height:auto; overflow:visible; }
.hs-sign-ink{ fill:none; stroke:var(--ink); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; }

.hs-bench, .hs-colophon{ padding-top:var(--rhythm-4); }
.hs-steps{ list-style:none; margin:var(--rhythm-2) 0 0; padding:0; display:grid; gap:var(--rhythm-1); }
.hs-step{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(16px, 2.4vw, 40px); align-items:baseline; }
.hs-step-n{ grid-column:1 / span 2; color:var(--ink); }
.hs-step-say{ grid-column:3 / span 9; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em 1.4em; }
.hs-step-pull{ margin:0; flex:1 1 20em; max-width:30em; }

.hs-col{ margin:var(--rhythm-2) 0 0; display:grid; gap:1.1em; max-width:58rem; }
.hs-col-row{ display:grid; grid-template-columns:12em 1fr; column-gap:2em; align-items:baseline; }
.hs-col-row dt{ font-family:var(--mono); font-size:clamp(12px, 11px + .16vw, 13.5px); letter-spacing:.07em; }
.hs-col-row dd{ margin:0; font-family:var(--serif); font-feature-settings:"rclt" 0;   /* an address keeps its hyphen: concepto-p.com/gallery/CL-0001 */ font-size:clamp(17px, 16px + .25vw, 20px); line-height:1.5; }

@media (max-width:759px){
  .hs-ab-open{ min-height:80svh; }
  .hs-ab-p{ font-size:96vw; right:-14vw; top:calc(var(--nav-h) + 2vh); }
  .hs-letter{ grid-template-columns:1fr; padding-top:var(--rhythm-3); }
  .hs-letter-head{ grid-column:1; position:static; margin-bottom:var(--rhythm-1); }
  .hs-letter-body{ grid-column:1; }
  .hs-bench, .hs-colophon{ padding-top:var(--rhythm-3); }
  .hs-step{ grid-template-columns:3.2em 1fr; column-gap:14px; }
  .hs-step-n{ grid-column:1; }
  .hs-step-say{ grid-column:2; flex-direction:column; }
  .hs-step-pull{ flex:none; }
  .hs-col-row{ grid-template-columns:1fr; row-gap:.15em; }
}

/* ---------- the front door with no sheet (rooms/landing.js) ----------
   For a browser that cannot draw the tray: the four rooms set as plain type on the white of the
   house, in the display face, in the index's order. Nothing else. */
.ar.is-plain{ min-height:100svh; background:var(--paper, #FFFFFF); color:var(--ink); }
.ar-plain{ display:flex; flex-direction:column; align-items:flex-start; gap:.08em; padding:calc(var(--nav-h) + var(--rhythm-3, 64px)) var(--margin) var(--rhythm-3, 64px); }
.ar-plain-k{ margin:0 0 var(--rhythm-1, 24px); }
.ar-plain .ar-plain-a{ padding-block:.04em; }

/* ---------- one ground for the whole house ("cohesive through all of Concepto P, as well as
   the background colour") ----------
   Every room stands on the same white. The page itself is never black or grey behind a room's panels
   (the About page showed black between its sections); a room that wants darkness makes it with a light
   inside its own picture, never with the ground. */
html, body, body[data-tone], body[data-tone="dark"], body.is-journeying[data-tone="dark"]{ background-color:#FFFFFF; }

/* ---- the gloss is never taken off a title.
   A room's arrival may blur a line in, but once it is here, a display voice wears its vinyl again. ---- */
.wk .wk-say.is-here > :is(.t-hero, .t-display), .ws .wk-say > :is(.t-hero, .t-display),
.wk-say.is-here > .cp-reveal:is(.t-hero, .t-display){ filter:url(#cp-vinyl); }
.wk .wk-say.is-here > :is(.t-title, .t-sub), .ws .wk-say > :is(.t-title, .t-sub),
.wk-say.is-here > .cp-reveal:is(.t-title, .t-sub){ filter:url(#cp-vinyl-s); }
@media (max-width:759px){
  .wk .wk-say.is-here > :is(.t-hero, .t-display), .ws .wk-say > :is(.t-hero, .t-display),
  .wk-say.is-here > .cp-reveal:is(.t-hero, .t-display){ filter:url(#cp-vinyl-s); }
}

/* ---- numbers are glossy too: a number made large is the house's puffed black vinyl, and a figure
   in a line that has no gloss of its own takes the letterhead's. A figure inside a glossy line already has it. ---- */
.num-display, .mbr-no-n{ filter:url(#cp-vinyl); }
@media (max-width:759px){ .num-display, .mbr-no-n{ filter:url(#cp-vinyl-s); } }
:is(.num, .t-num, .rec, .folio, .date):not(:is(.t-hero, .t-display, .t-title, .t-sub, .t-label, .t-label-s, .t-num-l, .act-label, .act-big, .num-display, [style*="cp-vinyl"]) *){ filter:url(#cp-vinyl-xs); }

/* ---- words in the dark wear the gloss in ivory (P, 19 October: the light table's title was black on black) ---- */
:is(.lt, [data-ground="dark"]) :is(.t-hero, .t-display, .num-display, .ldg-title){ filter:url(#cp-vinyl-w); }
:is(.lt, [data-ground="dark"]) :is(.t-title, .t-sub, .t-num-l, .ldg-view, .ls-name){ filter:url(#cp-vinyl-w-s); }
:is(.lt, [data-ground="dark"]) :is(.t-label, .t-label-s, .t-lead, .t-body){ filter:url(#cp-vinyl-w-xs); }
.lt:is(.is-entering, .is-leaving) :is(.t-hero, .t-display, .num-display, .ldg-title){ filter:url(#cp-vinyl); }
.lt:is(.is-entering, .is-leaving) :is(.t-title, .t-sub, .t-num-l, .ldg-view){ filter:url(#cp-vinyl-s); }

/* ---- THE LETTERHEAD'S BAND (19 October: "the nav words and Back to the Editorial sit over grey steel") ----
   One rule for the whole house: a scene never runs under the letterhead. Where a room's picture or 3D scene
   reaches the top of the window, its own head is feathered into the house's white over the letterhead's band
   (the letterhead's height, and the line a room's back word stands on under it), the way the press's foot
   already fades into the page. The letterhead and the back word then always stand on paper, in black vinyl.
   Nothing is drawn under them (no veil, no box, no blur): the scene simply begins below them, and keeps its
   own speed. A room asks for it with .cp-band-clear or data-band="clear" on the scene that reaches the top;
   the Paper's press is the first. */
:root{
  --band-clear:calc(var(--nav-h) + 30px);
  --band-feather:clamp(56px, 9vh, 96px);
  --band-mask:linear-gradient(to bottom, transparent 0, transparent var(--band-clear), #000 calc(var(--band-clear) + var(--band-feather)));
}
.cp-band-clear, [data-band="clear"], .pp-press-stage{
  -webkit-mask-image:var(--band-mask); mask-image:var(--band-mask);
}

/* ---- the water's moment of contact is felt in the water, never as a breath of light over the page (19 October) ---- */
.rip.is-struck .rip-strike, .rip-strike{ display:none; }

/* ---- the finds (house/finds.js): built only when found, never in the way ---- */
/* the watermark: the house's seal in the sheet, seen when the page is held to the light at its very end */
.cp-watermark{ position:fixed; z-index:45; pointer-events:none; right:-6vw; bottom:-14vh; width:min(92vh, 110vw); height:min(92vh, 110vw);
  opacity:0; mix-blend-mode:multiply; transition:opacity var(--slower) var(--lift); }
.cp-watermark svg{ display:block; width:100%; height:100%; overflow:visible; }
.cp-watermark.is-on{ opacity:.045; transition:opacity var(--slowest) var(--breath); }
.cp-watermark.is-still{ transition:none !important; }
@media (max-width:759px){ .cp-watermark{ right:-38vw; bottom:-10vh; width:120vw; height:120vw; } .cp-watermark.is-on{ opacity:.035; } }