/* ============================================================
   CONCEPTO P — THE EDITORIAL: ONE DESCENT
   (editorial/masthead.js conducts it; editorial/table.js is the stage, the
   things in objects.js and shelf-gl.js; the press is assets/cpn through
   press-room.js.) 23 Oct, plan 2.9: one page travelled down from the
   Volumes to the post. The words move with the page; the things are drawn
   on one glass held over the window (the stage, the only thing beside the
   letterhead that is fixed), under the words; the press comes up out of the
   white under the stage when the Paper is near; one sheet of the near plane
   crosses each place faster than the page (data-depth 0.7).
   The ground is the house's white, edge to edge. No rule, no box, no line.
   The still sequence (reduced motion, no WebGL) is the same page in flow:
   each thing's printed face beside its words.
   ============================================================ */
:is(.page-reading[data-place="descent"], .page-volumes, .page-magazines){ background:#FFFFFF; }
.edd{
  --ink:#141413; --g:max(16px, 4.2vw); --vh:100vh;
  --word:min(19vw, calc(var(--vh) * .3));
  position:relative; z-index:1; background:#FFFFFF; color:var(--ink);
  overflow-x:clip;
}
.edd.is-tall{ --word:min(21vw, calc(var(--vh) * .14)); }

/* ---- the glass: the stage, the window's size ---- */
.edd-glass{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.edd-gl{ position:absolute; inset:0; }
.edd-gl canvas{ display:block; width:100%; height:100%; }
.edd-gl canvas{ opacity:0; }
.edd.is-lit .edd-gl canvas{ opacity:1; }

/* ---- the opening: the word across the measure, its baseline at --mast of the window (wide .42, upright .31); its
   line; the four places. The Volume rises out of the white under them, never across them (review M1) ---- */
.edd-open{ position:absolute; z-index:2; left:0; right:0; top:0; height:var(--vh); pointer-events:none; }
.edd-mast{
  position:absolute; left:var(--g); right:var(--g); top:calc(var(--vh) * var(--mast, .42) - var(--word) * .78);
  text-align:center;
}
.edd .edd-word{
  margin:0; font-size:var(--word) !important; line-height:1; letter-spacing:-.035em !important; white-space:nowrap; color:var(--ink);
  -webkit-text-stroke:.012em currentColor; paint-order:stroke fill;
}
.edd-k{
  margin:.5em 0 0; font-family:var(--serif); font-style:italic; font-size:26px; line-height:1.3; color:var(--ink);
}
.edd-ix{
  display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:.15em 1.1em;
  margin:calc(var(--vh) * .035) 0 0; pointer-events:auto;
}
.edd-go{
  position:relative; display:inline-flex; align-items:baseline; gap:.32em; color:var(--ink); text-decoration:none; text-shadow:none;
  font-family:var(--display); font-size:max(30px, 3.4vw); line-height:1.1; letter-spacing:-.01em;
}
.edd-no{ font-family:var(--num); font-size:max(22px, .5em); font-variant-numeric:lining-nums; color:var(--ink); }
.edd.is-opening .edd-go .edd-no{ transition:color var(--slow) var(--settle); }
.edd.is-opening .edd-go:not(.is-in) .edd-no{ color:transparent; }
.edd-go:focus-visible{ outline:none; }
@media (pointer:coarse){ .edd-go::before{ content:""; position:absolute; inset:-8px -8px; } }

/* ---- a place: its words beside (or above) its thing ---- */
.edd.is-live .edd-pl{ position:absolute; z-index:2; left:0; right:0; height:0; pointer-events:none; outline:none; }
.edd-words{ position:absolute; top:0; }
.edd.is-tall .edd-words{ left:var(--g); right:var(--g); }
.edd:not(.is-tall) .edd-pl[data-k="magazines"] .edd-words{ text-align:right; }
.edd .edd-t{
  margin:0; font-size:calc(var(--vh) * .14) !important; line-height:.94; white-space:nowrap; color:var(--ink);
  -webkit-text-stroke:.01em currentColor; paint-order:stroke fill;
}
.edd.is-tall .edd-t{ font-size:min(19vw, calc(var(--vh) * .1)) !important; }
.edd-l{ margin:.6em 0 0; font-family:var(--serif); font-size:24px; line-height:1.35; color:var(--ink); max-width:19em; }
.edd:not(.is-tall) .edd-pl[data-k="magazines"] .edd-l{ margin-left:auto; }
.edd-n{ margin:.35em 0 0; font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.4; color:var(--ink); }
.edd-out{
  display:inline-block; margin:.55em 0 0; color:var(--ink); text-decoration:none; text-shadow:none; pointer-events:auto;
  font-size:max(30px, 4vw) !important; line-height:1.05;
}
.edd-out:focus-visible{ outline:none; }
.edd.is-phone .edd-l{ font-size:19px; }
.edd.is-phone .edd-k{ font-size:19px; }

/* the things: a link lies over each thing the stage draws, its own outline (masthead.js); nothing drawn */
.edd-things{ position:absolute; left:0; top:0; width:0; height:0; }
.edd-thing{
  position:absolute; left:0; top:0; display:block; width:0; height:0; pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent; outline:none;
}
.edd-thing.is-off{ pointer-events:none; }
/* the name a key finds: written in ink beside the thing, never a box or a ring round it (masthead.js capPlace) */
.edd-cap{
  position:absolute; left:0; top:0; margin:0; white-space:nowrap; color:var(--ink); pointer-events:none;
  font-family:var(--serif, "Bodoni Moda", serif); font-style:italic; font-size:max(18px, 1.3vw); line-height:1;
  visibility:hidden;
}
.edd-cap.is-on{ visibility:visible; }
/* the print's record number, written by the light under the tag: the catalogue's figures */
.edd-rec{
  position:absolute; left:0; top:0; margin:0; white-space:nowrap; color:var(--ink);
  font-family:var(--num); font-size:max(22px, 1.6vw); line-height:1; font-variant-numeric:lining-nums; letter-spacing:.02em;
}
.edd-rec .rec, .edd-rec *{ font-size:inherit !important; font-family:inherit !important; }

/* ---- the near plane: one printed thing a place, nearer the eye than everything, out of focus, crossing at 1.7x.
   It stands at the window's edge, half out of it, and never on a word ---- */
.edd-near{ position:absolute; z-index:3; display:block; pointer-events:none; opacity:0; transition:opacity .9s var(--ease-settle, ease); }
.edd-near.is-shown{ opacity:1; }
/* going into the Paper: its words and the near sheets step aside while the paper comes to the eye */
.edd.is-entering :is(.edd-pl, .edd-near, .edd-cap){ opacity:0 !important; transition:opacity .32s var(--ease-settle, ease); }
.edd-near-c{
  display:block; width:100% !important; height:auto !important;
  filter:blur(7px) drop-shadow(0 22px 30px rgba(20,20,22,.2));
}
.edd-near.is-vol{ right:-5vw; top:calc(var(--vh) * .5); width:15vw; rotate:-11deg; }
.edd-near.is-mag{ left:-5vw; top:calc(var(--vh) * .52); width:16vw; rotate:13deg; }
.edd-near.is-news{ left:-7vw; top:calc(var(--vh) * .5); width:20vw; rotate:-7deg; }
.edd.is-tall .edd-near.is-vol{ right:auto; left:-17vw; top:calc(var(--vh) * .84); width:40vw; rotate:9deg; }
.edd.is-tall .edd-near.is-mag{ left:auto; right:-15vw; top:calc(var(--vh) * .86); width:40vw; rotate:-12deg; }
/* upright, Scan's words follow the Paper too closely for a third thing to pass between them */
.edd.is-tall .edd-near.is-news{ display:none; }
.edd.is-tall .edd-near-c{ filter:blur(5px) drop-shadow(0 16px 24px rgba(20,20,22,.2)); }

/* ---- the reader of a thing opened in place lies on the house's white; its way out, its folio and its hint are
   words in the reading face at full ink (nothing under 17px, no tracked capitals, no button) ---- */
.br.edd-br{ background:#FFFFFF; }
.br.edd-br .br-back{ color:#141413; text-decoration:none; text-shadow:none; font-size:19px !important; }
.br.edd-br .br-back:focus-visible{ outline:none; }
.br.edd-br .br-folio, .br.edd-br .br-hint{ color:#141413; font-style:italic !important; font-size:17px !important; }
.br.edd-br .br-folio{ font-variant-numeric:lining-nums; }
.br.edd-br .br-folio .br-sample{ margin-right:.5em; }
/* the reader's own words come once its ground has covered the descent, and leave before it goes, so its words and
   the descent's are never seen through each other; nothing is scaled, so the cover lies on the thing it came from */
.br.edd-br:not(.is-seated) :is(.br-back, .br-folio, .br-hint){ opacity:0 !important; }
.br.edd-br.is-seated :is(.br-back, .br-folio){ transition:opacity var(--slow) var(--settle); }
.br.edd-br.is-arriving{ background-color:transparent; }
.br.edd-br.is-arriving .br-stage{ visibility:hidden; }
.br.edd-br.is-landing{ transition:background-color var(--slow) var(--settle); }
/* leaving from the cover, the ground clears off the descent around it, and the cover then gives way in one frame
   to the face beneath it; from any other spread the pages go with the ground */
.br.edd-br.is-closing{ opacity:1; transform:none; background-color:transparent; transition:background-color var(--slow) var(--lift); }
.br.edd-br.is-closing.is-away .br-stage{ opacity:0; transition:opacity var(--slow) var(--lift); }
.br.edd-br.is-closing :is(.br-back, .br-folio, .br-hint){ visibility:hidden; }

/* ---- the post: a white sheet rising over Scan, its leading edge casting a soft shadow ---- */
.edc.edc-launch.edd-post{ z-index:3; box-shadow:0 -34px 70px -44px rgba(20,20,22,.3), 0 -6px 14px -10px rgba(20,20,22,.1); }

/* ---- the still sequence: reduced motion, or no WebGL. The same page in flow ---- */
.edd.is-still{ padding:calc(var(--nav-h) + 9vh) var(--g) 14vh; }
.edd.is-still .edd-open{ position:relative; height:auto; }
.edd.is-still .edd-mast{ position:relative; left:auto; right:auto; top:auto; }
.edd.is-still .edd-pl{
  position:relative; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.25fr); gap:5vw; align-items:center;
  margin-top:18vh; outline:none;
}
.edd.is-still .edd-words{ position:relative; }
.edd.is-still:not(.is-tall) .edd-pl[data-k="magazines"] .edd-words{ order:2; }
.edd.is-still .edd-t{ font-size:min(14vh, 11vw) !important; }
.edd.is-still.is-tall .edd-pl{ grid-template-columns:minmax(0, 1fr); gap:5vh; margin-top:14vh; }
.edd.is-still.is-tall .edd-t{ font-size:min(19vw, 10vh) !important; }
.edd.is-still .edd-things{ display:none; }
.edd-face{ display:none; margin:0; }
.edd.is-still .edd-face{ display:block; }
.edd-face-a{ position:relative; display:block; color:inherit; text-decoration:none; outline:none; }
.edd-face-a.is-lead{ width:min(100%, 520px); margin:0 auto; }
.edd-face-c{
  display:block; width:100%; height:auto;
  box-shadow:0 1px 2px rgba(20,20,22,.1), 14px 30px 60px -34px rgba(20,20,22,.38);
}
/* the rest of a place's things follow the first as a spread, not a grid of thumbnails: one run across the page, laid
   by hand, each a little higher or lower and a little turned from the one before, as books and issues set out on a
   table (review m1). Upright the run takes three a line, still laid by hand */
.edd-face-more{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:clamp(10px, 1.4vw, 22px);
  margin-top:clamp(34px, 5vh, 56px);
}
.edd-face-a.is-more{ flex:1 1 0; min-width:0; max-width:200px; transition:translate .5s var(--ease-settle, ease); }
.edd-face-a.is-more:nth-child(4n + 1){ rotate:-2.2deg; margin-top:clamp(10px, 2vh, 22px); }
.edd-face-a.is-more:nth-child(4n + 2){ rotate:1.4deg; margin-top:clamp(28px, 5vh, 54px); }
.edd-face-a.is-more:nth-child(4n + 3){ rotate:-.8deg; margin-top:0; }
.edd-face-a.is-more:nth-child(4n){ rotate:2.6deg; margin-top:clamp(18px, 3.4vh, 38px); }
.edd-face-a.is-more:hover, .edd-face-a.is-more:focus-visible{ translate:0 -8px; }
.edd.is-tall .edd-face-more{ flex-wrap:wrap; gap:clamp(14px, 3vw, 26px) clamp(12px, 4vw, 26px); }
.edd.is-tall .edd-face-a.is-more{ flex:0 0 calc((100% - 2*clamp(12px, 4vw, 26px))/3); max-width:none; }
@media (prefers-reduced-motion: reduce){ .edd-face-a.is-more{ transition:none; } }
/* wide, the run goes under the place's words and its first thing together, across the page */
.edd.is-still:not(.is-tall) .edd-pl:is([data-k="volumes"], [data-k="magazines"]) .edd-face{ display:contents; }
.edd.is-still:not(.is-tall) .edd-pl:is([data-k="volumes"], [data-k="magazines"]) .edd-face-more{
  grid-column:1 / -1; order:3; width:min(100%, 1480px); margin:clamp(20px, 3vh, 40px) auto 0;
}
.edd.is-still:not(.is-tall) .edd-pl:is([data-k="volumes"], [data-k="magazines"]) .edd-face-a.is-more{ max-width:230px; }
.edd-face-a.is-tag{ width:max-content; max-width:100%; margin:0 auto; }
.edd-face-a.is-tag .nfc{ position:relative; display:block; }
.edd.is-still .edd-rec{ position:relative; display:block; text-align:center; margin:22px auto 0; transform:none !important; }
.edd.is-still .edd-face-a:focus-visible .edd-face-c{ box-shadow:0 1px 2px rgba(20,20,22,.14), 18px 40px 70px -30px rgba(20,20,22,.5); }

/* ---- a phone, and a tablet held upright: the four places two by two, just over the fold ---- */
.edd.is-tall .edd-ix{ display:grid; grid-template-columns:repeat(2, max-content); justify-content:center; gap:.2em 1.4em; text-align:left; }
.edd.is-tall .edd-go{ font-size:max(34px, 5.2vw); }
.edd.is-phone .edd-go{ font-size:34px; }
.edd.is-phone .edd-mast{ left:16px; right:16px; }

@media (prefers-reduced-motion:reduce){
  .edd-gl canvas{ transition:none !important; }
}

/* ============ the post (the Correo): the launch's own letter box ============ */
.edc{ position:relative; z-index:1; background:#FFFFFF; }

/* the Correo is the launch's own letter box, hung in a window of white paper the height of the screen (launch-embed.css) */
.edc.edc-launch{ display:block; padding:0; position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; overflow:clip; }
.edc-launch .edc-k{ position:absolute; z-index:3; left:var(--g, 5vw); top:clamp(28px, 7vh, 80px); margin:0; pointer-events:none; }
.edc-launch .edc-box{ position:absolute; inset:0; }

/* ============================================================
   SCAN (/reading/scan, editorial/scan-place.js): a door out, on the white.
   The rail, the word, and one line under it. No sheet, no crop marks, no rule.
   ============================================================ */
.page-reading[data-place="scan"]{ background:#FFFFFF; }
.esc{
  --ink:#141413; --g:max(16px, 3.8vw);
  position:relative; z-index:1; min-height:100vh; min-height:100svh; background:#FFFFFF; color:var(--ink);
  display:flex; flex-direction:column;
}
.esc-rail{ position:absolute; z-index:3; left:var(--g); right:var(--g); top:calc(var(--nav-h) + 30px); }
.esc-stage{ margin:auto; padding:calc(var(--nav-h) + 80px) var(--g) 12svh; text-align:center; }
.esc-word{ margin:0; color:var(--ink); }
.esc-line{ margin:clamp(18px, 3vh, 30px) 0 0; color:var(--ink); }
.esc-go{ color:var(--ink); }
/* a key that finds the way out is told by the ink (focus is ink, never a box) */
.esc-go:focus-visible{ color:var(--ink); outline:none; }
@media (max-width:759px){
  .esc-rail{ left:16px; right:16px; top:calc(var(--nav-h) + 22px); }
  .esc-stage{ padding:calc(var(--nav-h) + 96px) 16px 14svh; }
}