/* bymayao /writing: the list, and each essay. Loads after bymayao.css. */

/* ---------- the list ---------- */
.group{ margin:clamp(2.6rem, 7vh, 3.6rem) 0 0; font-weight:400; font-size:1.12rem; color:var(--soft); font-style:italic; }
.lede{ margin:.35rem 0 0; font-size:1.12rem; line-height:1.5; color:var(--ink); max-width:30rem; }
.sub{ margin:1.1rem 0 1rem; font-size:.95rem; color:var(--soft); }   /* her Substack's sign-up page, under its drawer */
.sub a{ display:inline-block; padding-block:.4rem; color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--faint); }
.pieces{ list-style:none; margin:1.1rem 0 0; padding:0; border-top:1px solid var(--line); }
.piece{ border-bottom:1px solid var(--line); }
.piece > a{ display:grid; gap:1rem; padding:1.5rem 0 1.6rem; text-decoration:none; color:inherit; }
@media (min-width:44rem){
  .piece > a{ grid-template-columns:12.5rem 1fr; gap:1.6rem; align-items:start; }
  /* the words stay in their own column, cover or not: a post without one (The Fundamentals)
     otherwise fell into the cover's 12.5rem and broke every line in two */
  .piece .text{ grid-column:2; }
}
.piece figure{ margin:0; aspect-ratio:4 / 3; overflow:hidden; background:var(--wash); }
.piece figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.piece .meta{ margin:0; font-size:.92rem; color:var(--soft); }
.series{ font-style:italic; }
.piece h3{ margin:.3rem 0 0; text-wrap:balance; font-weight:400; font-size:clamp(1.5rem, 5.2vw, 1.95rem); line-height:1.14; letter-spacing:-.012em;
  transition:opacity var(--slow) var(--breath); }
.piece > a:hover h3{ opacity:.55; }
.piece .dek{ margin:.5rem 0 0; font-size:1.04rem; line-height:1.5; color:var(--soft); }
.piece .where{ margin:.7rem 0 0; font-size:.92rem; color:var(--soft); }
/* the reading room's lists: links, one column, no pictures (the gallery is where to look) */
.pieces.plain .piece > a{ grid-template-columns:1fr; padding:1.15rem 0 1.25rem; }
.pieces.plain .piece .text{ grid-column:1; }
.pieces.plain .piece h3{ font-size:clamp(1.3rem, 4.6vw, 1.6rem); line-height:1.18; }
.pieces.plain .piece .where{ margin-top:.45rem; }

/* ---------- an essay ---------- */
.essay .crumbs, .essay article, .essay .back{ max-width:40rem; margin-left:auto; margin-right:auto; }   /* about 75 characters a line at 17px (Sha: 36rem felt narrow, Oct 9; the text felt big, Oct 11) */
.essay .meta{ margin:clamp(2.2rem, 7vh, 3.4rem) 0 0; font-size:.95rem; color:var(--soft); }
.essay h1{ text-wrap:balance; margin:.45rem 0 2.2rem; font-weight:400; font-size:clamp(2.2rem, 8.4vw, 3.5rem); line-height:1.06; letter-spacing:-.02em; }
.essay .dek{ margin:-1.2rem 0 2.2rem; font-size:clamp(1.08rem, 2.6vw, 1.2rem); line-height:1.45; color:var(--soft); text-wrap:pretty; }
.body{ font-size:clamp(1rem, 2.2vw, 1.0625rem); line-height:1.66; overflow-wrap:break-word; }   /* 16px on a phone, 17px on a wide screen, as most reading sites set it */
.body p, .piece .dek, .lede{ text-wrap:pretty; }
.body p{ margin:0 0 1.15em; }
/* her headings keep their levels: a section, then its smaller and its italic sub-headings */
.body h2, .body h3, .body h4{ margin:2.3em 0 .75em; font-weight:500; line-height:1.25; text-wrap:balance; }
.body h2{ font-size:1.28em; }
.body h3{ font-size:1.12em; }
.body h4{ font-size:1.02em; font-weight:400; font-style:italic; }
.body h2 + h3, .body h2 + h4, .body h3 + h4{ margin-top:.2em; }
/* a line set under a picture as a small heading (WordPress) reads as its caption */
.body h5, .body h6{ margin:-1.4rem 0 2.2rem; font-weight:400; font-size:.88rem; line-height:1.45; color:var(--soft); text-align:center; }
.body ul, .body ol{ margin:0 0 1.15em; padding-left:1.2em; }
.body li{ margin:.3em 0; }
.body figure{ margin:2.2rem 0; }
/* a WordPress gallery: its pictures side by side, its caption across both */
.body figure:has(> figure){ display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; }
.body figure:has(> figure) > figure{ flex:var(--r, 1) 1 0; min-width:0; }   /* widths in proportion to each picture's shape: one shared height */
.body figure > figure{ margin:0; }
.body figure:has(> figure) > figcaption{ flex:1 0 100%; }
/* a picture at the size she set, never wider than the column or taller than the screen */
.body img{ display:block; max-width:100%; height:auto; max-height:min(85vh, 48rem); object-fit:contain; margin-inline:auto; }
.body figcaption{ text-align:center; margin-top:.55rem; font-size:.88rem; line-height:1.45; color:var(--soft); }
.body blockquote{ margin:1.6em 0; padding-left:1.1em; border-left:1px solid var(--line); font-style:italic; }
.body blockquote blockquote{ margin:0; padding:0; border:0; }
.body blockquote figure{ margin:1em 0; }
.body a{ text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
  text-decoration-color:var(--faint); transition:text-decoration-color var(--slow) var(--breath); }
.body a:hover{ text-decoration-color:var(--ink); }
.body a{ overflow-wrap:anywhere; }   /* a long address in her references wraps instead of widening the page */
/* her credits and references, folded the way she folded them */
.body details{ margin:2.4em 0 0; padding-top:1em; border-top:1px solid var(--line); font-size:.92rem; line-height:1.55; }
.body details + details{ margin-top:1em; }
.body summary{ cursor:pointer; color:var(--soft); font-size:1.05rem; }
.body details[open] summary{ margin-bottom:.8em; }
.body hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.colophon a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--faint); }
.colophon{ margin:3rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.95rem; color:var(--soft); }
.essay .back{ margin-top:2.4rem; font-size:1.12rem; }
.essay .back a{ color:var(--soft); text-decoration:none; transition:color var(--slow) var(--breath); }
.essay .back a:hover{ color:var(--ink); }
.sep{ color:var(--faint); }

/* ---------- the gallery: /writing's front (Sha, Oct 12) ----------
   One screen, as the museum's lobby is: the room fills what the bar, the controls and the name
   leave, so the steps and "/writing" are always on the first screen and nothing scrolls the page
   (a link to one work can't scroll its picture under the bar). One work at a time, newest first,
   swiped or stepped through; its picture whole, never cropped, sitting on its label's edge; the
   label beside it on a wide screen, under it on a phone (a tall label scrolls inside its work).
   A gutter between works: on a phone the picture sits on its work's left edge, and Safari's snap
   can stop a fraction of a pixel short, which showed a sliver of the next picture (Sha, Oct 12). */
.gallery{ position:fixed; inset:0; display:grid; grid-template-rows:minmax(0, 1fr) auto auto;
  padding:calc(var(--top) + 3.6rem) max(var(--g), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + clamp(10px, 2.2vh, 28px)) max(var(--g), env(safe-area-inset-left)); }
.room{ position:relative; min-height:0; display:flex; column-gap:var(--g); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.room::-webkit-scrollbar{ display:none; }
.work{ flex:0 0 100%; min-width:0; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; grid-template-rows:minmax(34%, 1fr) auto; gap:.9rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:none; }
.work::-webkit-scrollbar{ display:none; }
.work[hidden]{ display:none; }
/* the picture fills its box without cropping; it sits on the label's edge (left on a phone, above it) */
.art{ margin:0; position:relative; min-height:0; }
.art img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; object-position:left bottom; }
/* the picture is also the way in to looking at it alone (gallery.js): the whole box, no words */
.art .lookat{ position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in;
  -webkit-tap-highlight-color:transparent; touch-action:pan-x pan-y; }
.art .lookat:focus-visible{ outline-offset:-2px; }
.label .yours{ margin-top:.15rem; font-size:.84rem; line-height:1.4; color:var(--ink); font-variant-numeric:lining-nums proportional-nums; }
.label{ font-size:.98rem; line-height:1.45; max-width:30rem; }
.label p{ margin:0; }
.label .wing{ margin-bottom:.45rem; font-size:.92rem; font-style:italic; color:var(--soft); }
.label .artist, .label .what{ font-size:1.12rem; }
/* the title links to the work's own page (its museum's, gallery's or film's) */
.label .what a{ color:inherit; text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:var(--faint);
  transition:text-decoration-color var(--slow) var(--breath); }
.label .what a:hover{ text-decoration-color:var(--ink); }
.label .what .out{ font-style:normal; font-size:.8em; color:var(--soft); }
/* the fine print, as her museum's labels set it: smaller, quieter, figures in step (Sha, Oct 12:
   on a phone it read as too much text and pulled the eye from the rest) */
.label .medium, .label .holder, .label .seen, .label .spent{ font-size:.84rem; line-height:1.4; color:var(--soft); font-variant-numeric:lining-nums proportional-nums; }   /* proportional: tabular figures set "September 11" as "September 1 1" */
.label .seen{ margin-top:.3rem; }
/* her piece: the series and its day lead, and the whole block is the link to read it; her title
   is not repeated beside the work it names (Sha, Oct 12) */
.label .hers{ display:block; margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
.label .hers .lead{ font-size:1.12rem; line-height:1.3; transition:opacity var(--slow) var(--breath); }
.label .hers .lead .series{ font-style:italic; }
.label .hers .dek{ margin-top:.25rem; font-size:.92rem; line-height:1.4; color:var(--soft); text-wrap:pretty; }
.label .hers .read{ margin-top:.45rem; padding-block:.15rem; text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  text-decoration-color:var(--faint); transition:text-decoration-color var(--slow) var(--breath); }
.label .hers .read span{ display:inline-block; margin-left:.35em; }
.label .hers:hover .lead{ opacity:.6; }
.label .hers:hover .read{ text-decoration-color:var(--ink); }
/* a wide screen with the height for it: picture and label side by side, the picture's right edge
   on the gap before the label, both on one baseline */
@media (min-width:60rem) and (min-height:40rem){
  .work{ grid-template-columns:minmax(0, 1.55fr) minmax(15rem, 1fr); grid-template-rows:minmax(0, 1fr); gap:clamp(2rem, 4vw, 4.5rem); align-items:end; }
  .art{ height:100%; }
  .art img{ object-position:right bottom; }
  .label{ max-height:100%; overflow-y:auto; scrollbar-width:none; }
}
/* a phone held sideways: picture and label side by side, as on a computer, or the picture shrinks to
   a postage stamp above a label that runs out of the room */
@media (orientation:landscape) and (max-height:32rem) and (max-width:59.99rem), (orientation:landscape) and (max-height:39.99rem) and (min-width:60rem){
  .work{ grid-template-columns:minmax(0, 1fr) minmax(14rem, 1fr); grid-template-rows:minmax(0, 1fr); gap:clamp(1.2rem, 3vw, 2.4rem); align-items:end; }
  .art{ height:100%; }
  .art img{ object-position:right bottom; }
  .label{ max-height:100%; overflow-y:auto; scrollbar-width:none; }
}
/* the wings and the steps, on a hairline, one line on a phone too */
.ctrl{ display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:.4rem 1rem; margin-top:clamp(.7rem, 2vh, 1.3rem); padding-top:.3rem; border-top:1px solid var(--line); }
.ctrl button{ font:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; min-height:44px; }
.wings{ display:flex; flex-wrap:wrap; column-gap:clamp(.8rem, 3vw, 1.2rem); min-width:0; }
.wings button{ color:rgba(17, 17, 17, .58); transition:color .3s var(--breath); }
.wings button[aria-pressed="true"], .wings button:hover{ color:var(--ink); }
/* a phone: "european", "american" (the label above the picture already says "wing"); the fine print smaller still */
@media (max-width:430px){ .wings .w{ display:none; } .label .artist, .label .what{ font-size:1.05rem; }
  .label .hers{ margin-top:.75rem; padding-top:.6rem; }
  .label .medium, .label .holder, .label .seen, .label .spent{ font-size:.8rem; } }
.step{ flex:none; margin-left:auto; display:flex; align-items:center; color:var(--soft); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.step button{ min-width:44px; font-size:1.35rem; line-height:1; color:var(--ink); }
.step .prev{ margin-left:-.6rem; } .step .next{ margin-right:-.6rem; }
.step button:disabled{ color:var(--faint); cursor:default; }
/* the name, as the museum's is, in the Display cut, at the foot of the screen with its whole g on it */
.gallery .name{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:clamp(.6rem, 1.6vh, 1.1rem) 0 0; }
/* beside it, the way to her writing on her museum's map (MO-25, Sha, Oct 13) and the about page */
.gallery .name .links{ flex:none; display:flex; gap:clamp(.9rem, 2.4vw, 1.4rem); }
.gallery .about{ flex:none; font-size:1.06rem; color:var(--soft); text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  text-decoration-color:var(--faint); transition:color var(--slow) var(--breath), text-decoration-color var(--slow) var(--breath); }
.gallery .about:hover{ color:var(--ink); text-decoration-color:var(--ink); }
.gallery .page-title{ margin:0; font-size:min(15vh, 17vw); line-height:1; padding-bottom:.075em; letter-spacing:-.012em; font-variation-settings:"STYL" 0; }
/* three-quarters of /museum's name on a computer, a little smaller on a phone (Sha, Oct 12: it
   read too big beside the work). Line height 1 and the .075em under it keep the g's tail on the
   screen: at .86 the tail hung 5px past the window's foot. */
@media (prefers-reduced-motion:reduce){ .room{ scroll-behavior:auto; } }

/* ---------- the reading room's three drawers (Sha, Oct 12) ----------
   her Substack, her essays, her pieces at other publications: each a row that opens in place, so
   all three show on one screen. They open and close on the site's own curve; without scripts
   every drawer simply stays open. */
.writing .shelf{ border-top:1px solid var(--line); scroll-margin-top:calc(var(--top) + 3.4rem); }
.writing .shelf:first-of-type{ margin-top:clamp(2.4rem, 7vh, 3.4rem); }
.writing .shelf:last-of-type{ border-bottom:1px solid var(--line); }
.writing .shelf .group{ margin:0; font:inherit; }
.opener{ display:flex; align-items:flex-start; gap:1rem; width:100%; padding:1.05rem 0 1.1rem; margin:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:clamp(1.45rem, 5.4vw, 2rem); line-height:1.15; letter-spacing:-.012em; color:var(--ink); text-align:left;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.opener:focus-visible{ outline-offset:4px; }
/* a plus that becomes a minus: its upright folds away as the drawer opens; it sits on the first
   line of the heading, however many lines the heading takes */
.opener .mark{ position:relative; flex:none; width:.62em; height:.62em; margin:calc((1.15em - .62em) / 2) 0 0 auto; }
.opener .mark::before, .opener .mark::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:currentColor; }
.opener .mark::after{ transform:rotate(90deg); }
.ready .opener .mark::before, .ready .opener .mark::after{ transition:transform var(--slow) var(--breath); }
.shelf.open .opener .mark::after{ transform:rotate(90deg) scaleX(0); }
@media (hover:hover){ .opener:hover .mark{ color:var(--soft); } }
/* without scripts the drawers are simply open: no mark, nothing to press */
html:not(.drawers) .opener{ cursor:default; }
html:not(.drawers) .opener .mark{ display:none; }
/* the drawer clips its contents while it moves, so a list link's focus ring is drawn inside it */
.shelf .piece > a:focus-visible{ outline-offset:-2px; }
.shelf .inner > .lede{ margin:0 0 .9rem; }
.shelf .pieces{ margin:0; border-top:1px solid var(--line); }
.shelf .piece:last-child{ border-bottom:0; }
.drawers .drawer{ display:grid; grid-template-rows:0fr; opacity:0; }
.drawers .shelf.open .drawer{ grid-template-rows:1fr; opacity:1; }
.drawers.ready .drawer{ transition:grid-template-rows var(--slow) var(--breath), opacity .45s var(--breath); }
.drawer > .inner{ min-height:0; overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .drawers.ready .drawer, .ready .opener .mark::before, .ready .opener .mark::after{ transition:none; } }

/* ---------- looking (Sha, Oct 13): a work alone on the screen, as The Close Look asks ----------
   A tap on the picture opens it whole on the paper, the bar and the label gone, and nothing else on the
   screen (the count of the time was a distraction, Sha: it is kept quietly instead); a tap, Esc or Back
   returns, and the label then shows your own time with the work beside hers. */
.look{ position:fixed; inset:0; z-index:50; display:grid; background:var(--paper); cursor:default; touch-action:none;
  padding:calc(env(safe-area-inset-top) + clamp(12px, 3vh, 32px)) max(var(--g), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + clamp(40px, 7vh, 64px)) max(var(--g), env(safe-area-inset-left));
  opacity:0; visibility:hidden; transition:opacity .7s var(--breath), visibility 0s linear .7s; }
.look.on{ opacity:1; visibility:visible; transition:opacity .7s var(--breath), visibility 0s; }
.look:not(.on){ pointer-events:none; }   /* fading out, it lets the gallery under it take a click at once */
/* the stage: the picture fitted whole in it, then zoomed by the museum's own module (museum/zoom.js and
   zoom.css, which give the cursor and keep the picture from being dragged or selected); the whole screen
   hears the hand, its white margin included, and the white leaves (gallery.js) */
.look .stage{ position:relative; width:100%; height:100%; min-height:0; overflow:hidden; }
.look img{ position:absolute; display:block; max-width:none; }
.look .stage.mz-area{ cursor:default; }   /* the white beside a zoomed picture leaves: no hand over it */
@media (prefers-reduced-motion:reduce){ .look, .look.on{ transition:none; } }

/* ---------- the map of her writing (Sha, Oct 14) ----------
   Its title as the gallery's sits, at the gutter, then the museum's map (map.js layerMap draws the map, its
   key and its list, side by side on a wide screen and the list under it on a phone, all inside .wmap) */
.mapview{ padding:calc(var(--top) + 3rem) max(var(--g), env(safe-area-inset-right)) max(4.5rem, env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left)); }
.mapview .wmap{ margin-top:clamp(1.6rem, 5vh, 2.6rem); }