/* Editorial house. Threshold, magazines, volumes.
   House faces only. No pills, badges, or player chrome.
   Everything that moves here moves on the house curves (--settle,
   --breath, --lift) at the house speeds, and the salon's type is cotton
   on black: light letters with the pressed edge, never lacquer. */

/* the page root is white (site.css, editorial-sheet.css): the Editorial's places stand on the white */
/* The old Editorial house (the threshold, its doors and portal, the switch, a cover flown into the reader, the
   volume shown as a box, and its empty line) is retired: nothing builds it any more, and its rules went with it. */

/* ---------- magazines ---------- */
/* one sister on the floor at a time: the other leaves on lift, this one arrives on settle */
.eh-house{ min-height:100vh; background:#000; }
.eh-house.is-leaving{
  opacity:0; transform:translate3d(0,-1.5vh,0);
  transition:opacity var(--slow) var(--lift), transform var(--slow) var(--lift);
}
.eh-house.is-arriving{ opacity:0; transform:translate3d(0,2vh,0); }
.eh-house.is-in{
  opacity:1; transform:none;
  transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle);
}
/* covers are shown true: the house vignette leaves the magazines and every open book */
body:has(.page-magazines) #push-dark,
body.eh-reading #push-dark{ display:none; }

/* ---------- reader ---------- */
/* one spread at a time, centred, on black in the salon; a volume, and an issue opened from the ledge,
   on the desk itself: the light reader is clear, so the painted ground continues under it */
.br{
  position:fixed; inset:0; z-index:40; overflow:hidden; background:#000; color:#1C1B1D;
  outline:none; touch-action:pinch-zoom;
}
/* the reader leaves on lift */
.br.is-closing{
  opacity:0; transform:scale(.985);
  transition:opacity var(--slow) var(--lift), transform var(--slow) var(--lift);
}
.br:is(.is-volume, .is-light){ background:transparent; }
.br-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
/* the folio says where the reader is: no progress line is drawn across the top */
.br-back{
  position:absolute; top:calc(var(--nav-h) + 24px); left:3.8vw; z-index:20;
  background:none; border:0; padding:0; cursor:pointer; min-height:44px; color:#E4E3DF;
}
.br:is(.is-volume, .is-light) .br-back{ color:var(--ed-ink, #1C1B1D); }
.br-folio, .br-hint{
  position:absolute; bottom:3vh; margin:0; pointer-events:none; color:rgba(228,227,223,.62);
}
.br-folio{ right:3.8vw; }
.br-hint{ left:3.8vw; right:3.8vw; text-align:center; opacity:0; transition:opacity var(--slow) var(--lift); }
.br-hint.is-on{ opacity:1; transition:opacity var(--slower) var(--settle) var(--slower); }
.br:is(.is-volume, .is-light) .br-folio, .br:is(.is-volume, .is-light) .br-hint{ color:rgba(28,27,29,.62); }
/* a phone has room for the hint and the folio on one line only side by side */
@media (max-width:760px){ .br-hint{ right:auto; text-align:left; } }
.br-book{
  position:relative; flex:none; width:calc(var(--br-pw) * 2); height:var(--br-ph);
  transform-origin:50% 50%; perspective:3000px;
}
.br-spread{ position:absolute; inset:0; }
/* the page is the paper: a neutral sheet, a breath of shade at the gutter */
.br-page{
  position:absolute; top:0; width:var(--br-pw); height:var(--br-ph); overflow:hidden;
  background-color:var(--ed-sheet-2, #F3F2EF); color:var(--ed-ink, #1C1B1D);
}
.br-page.is-l{ left:0; background-image:linear-gradient(to left, rgba(28,27,29,.09), rgba(28,27,29,0) 7%); }
.br-page.is-r{ left:var(--br-pw); background-image:linear-gradient(to right, rgba(28,27,29,.09), rgba(28,27,29,0) 7%); }
.br-spread.is-cover .br-page, .br-spread.is-back .br-page{ background-image:none; }
.br:is(.is-volume, .is-light) .br-page{ box-shadow:0 1px 0 rgba(28,27,29,.06), 0 18px 40px -24px rgba(28,27,29,.22); }
.br-body{
  position:absolute; inset:7% 8% 9%; display:flex; flex-direction:column; justify-content:flex-start; gap:3.2%;
}
.br-page.is-sheet .br-body{ inset:0; }
.br-head{ margin:0; font-size:clamp(26px, 3.4vw, 54px); line-height:.95; font-weight:400; }
.br-text{ margin:0; font-family:var(--serif); font-size:15px; line-height:1.5; }
/* ink on paper is flat: the house emboss (made for type on the dark) never sits on a sheet */
.br .br-page :is(.br-head, .br-mark, .br-text, .br-cap), .br .br-page .cp-reveal .cp-l{ text-shadow:none; }
.br-line{ display:block; }
.br-cap{
  margin:0; font-family:var(--num); font-size:13px; line-height:1.5; letter-spacing:.08em; font-variant-caps:all-small-caps;
  text-transform:none; color:rgba(28,27,29,.62);
}
.br-page[style*="color"] .br-cap{ color:inherit; opacity:.72; }
.br-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--br-ph) * .34); font-weight:400; line-height:1;
}
.is-foot{ margin-top:auto; }
/* a cover set in the DOM keeps the drawn cover's proportions (editorial-house.js drawCover, 420 x 596) */
.br-spread.is-cover .br-body{ inset:6.7% 9.5% 6.7%; }
.br-spread.is-cover .br-body > .br-cap:first-child{ color:inherit; opacity:1; font-size:calc(var(--br-ph) * .02); }
.br-spread.is-cover .br-head{ font-size:calc(var(--br-ph) * .077); line-height:1; }
.br-spread.is-cover[data-kind="type"] .br-head{ font-size:calc(var(--br-ph) * .124); margin-top:18%; }
.br-spread.is-cover[data-kind="numeral"] .br-head{ font-size:calc(var(--br-ph) * .057); }
.br-spread.is-cover[data-kind="numeral"] .br-mark{ position:static; display:block; text-align:center; font-size:calc(var(--br-ph) * .42); margin:6% 0 0; }
.br-spread.is-cover .br-body > .br-cap:last-child{ color:inherit; opacity:1; }
/* a bleed cover: the picture to three edges, the type on the cloth below it */
.br-spread.is-cover .br-bleed{ bottom:31%; }
/* The house's magazine (bleed, float) and a book's jacket: measured in the page's width, as drawCover
   draws them (420 px wide, a 36 px margin), so the drawn cover hands over to this one in place.
   Type on a picture takes paper or ink by how light the picture is beneath it (build-reader.js inkOf). */
.br-spread.is-cover:is([data-kind="bleed"], [data-kind="float"], [data-kind="jacket"]) .br-body{
  inset:calc(var(--br-pw) * .0857); gap:calc(var(--br-pw) * .019);
}
.br-spread.is-cover:is([data-kind="bleed"], [data-kind="float"], [data-kind="jacket"]) .br-body > .br-cap{ font-size:calc(var(--br-pw) * .0275); }
.br-spread.is-cover[data-kind="bleed"] .br-head{ font-size:calc(var(--br-pw) * .0714); }
.br-spread.is-cover[data-kind="float"] .br-head{ font-size:calc(var(--br-pw) * .081); }
.br-spread.is-cover[data-kind="jacket"] .br-head{ font-size:calc(var(--br-pw) * .12); line-height:.92; }
/* a jacket's title sits on a quiet shade of the plate's own dark or light, as a printed jacket would set it */
.br-spread.is-cover[data-kind="jacket"] .br-page[data-ink-foot] .br-fill::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(to top, rgba(15,15,16,.46), rgba(15,15,16,.18) 55%, rgba(15,15,16,0));
}
.br-spread.is-cover[data-kind="jacket"] .br-page[data-ink-foot="dark"] .br-fill::after{
  background:linear-gradient(to top, rgba(243,242,239,.58), rgba(243,242,239,.22) 55%, rgba(243,242,239,0));
}
.br-page[data-ink-top="light"] .br-body > .br-cap:first-child,
.br-page[data-ink-foot="light"] .br-body > :is(.br-head, .br-cap:not(:first-child)){ color:#F3F2EF; }
.br-page[data-ink-top="dark"] .br-body > .br-cap:first-child,
.br-page[data-ink-foot="dark"] .br-body > :is(.br-head, .br-cap:not(:first-child)){ color:#1C1B1D; }
.br-img{ margin:0; position:relative; overflow:hidden; flex:1; }
.br-img img{ width:100%; height:100%; object-fit:cover; }
/* a plate is the picture whole, inside its size: full (the page within its margins), wide (81 % by 62 %), small (48 % by 40 %) */
.br-plate{ margin:0; align-self:flex-start; line-height:0; }
.br-plate.is-centred{ margin:auto; align-self:center; }
.br-plate.is-end{ align-self:flex-end; }
.br-plate.is-end + .br-cap{ text-align:right; }
.br-plate img{ display:block; width:auto; height:auto; max-width:calc(var(--br-pw) * .81); max-height:calc(var(--br-ph) * .62); }
.br-plate.is-full img{ max-width:calc(var(--br-pw) * .82); max-height:calc(var(--br-ph) * .82); }
.br-plate.is-small img{ max-width:calc(var(--br-pw) * .48); max-height:calc(var(--br-ph) * .40); }
/* a band is a strip of a picture (cover-cropped), 81 % by 16 %, under a cover's numeral */
.br-plate.is-band img{ width:calc(var(--br-pw) * .81); height:calc(var(--br-ph) * .16); max-width:none; max-height:none; object-fit:cover; }
.br-plate img.is-flat{ filter:grayscale(1) contrast(1.1); }
/* the house's magazine: a picture to the page's edges; a picture whole on the white, at its centre inside its box */
.br-fill{ position:absolute; inset:0; margin:0; overflow:hidden; }
.br-fill img{ display:block; width:100%; height:100%; object-fit:cover; }
.br-float{ position:absolute; margin:0; line-height:0; transform:translate(-50%, -50%); }
.br-float img, .br-piece img{
  display:block; width:auto; height:auto;
  max-width:calc(var(--br-pw) * var(--w)); max-height:calc(var(--br-ph) * var(--h));
}
/* two, four, or four in a strip: each picture cut to its cell, a hair of white between */
.br-group{ margin:0; flex:1 1 auto; min-height:0; display:grid; gap:calc(var(--br-pw) * .022); }
.br-group span{ position:relative; display:block; min-height:0; overflow:hidden; }
.br-group img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.br-group.is-pair{ grid-template-rows:1fr 1fr; }
.br-group.is-grid{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.br-group.is-booth{
  grid-template-rows:repeat(4, 1fr); width:calc(var(--br-pw) * .36); align-self:center; gap:calc(var(--br-pw) * .014);
}
/* negatives and strips of a roll laid on the white, each at its own slight lean: a print on its own whiter
   border, a strip as it came off the scanner; a breath of shadow where each lies on the page */
.br-collage{ position:absolute; inset:0; pointer-events:none; }
.br-piece{ position:absolute; margin:0; line-height:0; transform-origin:50% 50%; }
.br-piece:not(.is-film){
  padding:calc(var(--br-pw) * .012); background:#FBFBF9;
  box-shadow:0 1px 1px rgba(28,27,29,.12), 0 6px 14px -8px rgba(28,27,29,.32);
}
.br-piece.is-film{ box-shadow:0 1px 1px rgba(28,27,29,.14), 0 5px 12px -8px rgba(28,27,29,.3); }
/* a folio on a picture takes paper or ink by the picture beneath it */
.br-page[data-ink="light"] .br-pfolio{ color:rgba(243,242,239,.86); }
.br-page[data-ink="dark"] .br-pfolio{ color:rgba(28,27,29,.62); }
/* a filed sheet fills its page, and develops when it is drawn */
.br-sheet{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity var(--slow) var(--breath); }
.br-sheet.is-in{ opacity:1; }
.br-sheet img{ display:block; width:100%; height:100%; object-fit:cover; }
/* one picture across the spread: each page holds its own half */
.br-bleed{ position:absolute; inset:0; overflow:hidden; }
.br-bleed img{ position:absolute; top:0; left:0; width:200%; height:100%; object-fit:cover; }
.br-page.is-r .br-bleed img{ left:-100%; }
.br-page .br-bleed.is-single img{ width:100%; left:0; }
/* the fold still reads through a picture laid across it */
.br-page.is-l .br-bleed::after, .br-page.is-r .br-bleed::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.br-page.is-l .br-bleed:not(.is-single)::after{ background:linear-gradient(to left, rgba(28,27,29,.16), rgba(28,27,29,0) 5%); }
.br-page.is-r .br-bleed:not(.is-single)::after{ background:linear-gradient(to right, rgba(28,27,29,.16), rgba(28,27,29,0) 5%); }
.br-pfolio{
  position:absolute; bottom:3.4%; margin:0; font-family:var(--num); font-size:11px; letter-spacing:.02em;
  font-variant-numeric:oldstyle-nums proportional-nums; text-transform:none; color:rgba(28,27,29,.62);
}
.br-page.is-l .br-pfolio{ left:8%; }
.br-page.is-r .br-pfolio{ right:8%; }
.br-page[style*="color"] .br-pfolio{ color:inherit; opacity:.6; }
.br-curl{
  position:absolute; left:var(--br-pw); top:0; width:var(--br-pw); height:var(--br-ph);
  transform-style:preserve-3d; pointer-events:none;
}
.br-strip{ position:absolute; left:0; top:0; transform-origin:0 50%; transform-style:preserve-3d; }
.br-face{ position:relative; width:100%; height:100%; overflow:hidden; }
.br-face > .br-page.is-l, .br-face > .br-page.is-r{ left:0; top:0; box-shadow:none; }
.br-shade{ position:absolute; inset:0; background:#000; pointer-events:none; opacity:0; }


@media (prefers-reduced-motion:reduce){
  .br-hint, .br-sheet{ transition:none; }
}