/* bymayao — what every page of Maya's site shares: Timeless Serif on white paper, ink and a
   softer gray, and one way of moving (the breath curve, slow). Each page adds its own layout. */
@font-face{font-family:"Timeless Serif"; src:url(../type/fonts/TimelessSerifVF.woff2) format("woff2"); font-weight:200 700; font-style:normal; font-display:swap;}
@font-face{font-family:"Timeless Serif"; src:url(../type/fonts/TimelessSerifItalicVF.woff2) format("woff2"); font-weight:300 700; font-style:italic; font-display:swap;}
:root{
  --ink:#111; --soft:#6f6a63; --faint:#b3aea6; --line:#e8e5e0; --wash:#f4f2ef; --paper:#fff;
  --breath:cubic-bezier(.22,.55,.3,1); --slow:.6s;
}
*{ box-sizing:border-box; }
/* room for a scrollbar is kept on every page, so nothing shifts sideways when one appears: a reading-
   room drawer opening made the page long enough to scroll and pushed everything left (Sha, Oct 13,
   on a Mac that always shows scrollbars). The same room on every page keeps the bar still between pages. */
html{ background:var(--paper); scrollbar-gutter:stable; }
@supports not (scrollbar-gutter:stable){ html.drawers{ overflow-y:scroll; } }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Timeless Serif", Georgia, serif; font-weight:400;
  /* as her museum sets it: the Text cut for reading, the vertical M, the alternate ampersand and
     lining figures (the Project's Type doc); big titles take the Display cut */
  font-variation-settings:"STYL" 100; font-feature-settings:"ss15" 1, "ss11" 1, "lnum" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; }
html{ -webkit-tap-highlight-color:transparent; }   /* no gray box on a phone when a link is tapped (Sha, Oct 13) */

/* from one of her pages to the next: a quick crossfade, the bar holding still while its page name fades
   in or out, instead of the new page jumping in (Sha, Oct 13: gallery to reading room felt abrupt). The
   browser does it between two pages that both ask for it; a page without this (her museum) just loads. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  .bar{ view-transition-name:bar; }
  ::view-transition-group(*){ animation-duration:.42s; animation-timing-function:var(--breath); }
  ::view-transition-old(*), ::view-transition-new(*){ animation-timing-function:var(--breath); }
  .atlas-open .bar, body:has(.look.on) .bar{ view-transition-name:none; }   /* under a full-screen view (the brain map, a work
     looked at alone) the bar fades with the page rather than rising over it */
}
@media (pointer:coarse){ a:active{ opacity:.55; transition-duration:0s; } }   /* in place of the gray box: a link dims while pressed */

/* an inner page: the way back on top, then the page */
.page{ max-width:46rem; margin:0 auto;
  padding:clamp(1.4rem, 5vh, 2.6rem) max(16px, env(safe-area-inset-right)) max(4.5rem, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.crumbs{ font-size:1.12rem; color:var(--soft); display:flex; gap:.45em; flex-wrap:wrap; }
.crumbs a{ text-decoration:none; transition:color var(--slow) var(--breath); }
.crumbs a:hover{ color:var(--ink); }
.page-title{ font-variation-settings:"STYL" 0; margin:clamp(2.2rem, 8vh, 4rem) 0 0; font-weight:400; font-size:clamp(3rem, 14vw, 6rem); line-height:.95; letter-spacing:-.025em; }

/* the bar: "bymayao" at the top of every inner page, white behind it, as the museum's corner is
   (same gutter, same top, same size). The page's own name joins it ("bymayao/neuro") once the page's
   big title has scrolled out of sight, and leaves again when it comes back (bar.js). On a piece of
   writing, whose big title is its own, the bar always reads "bymayao/writing". (Sha, Oct 12) */
:root{ --g:clamp(16px, 4vw, 56px); --top:calc(env(safe-area-inset-top) + clamp(14px, 2.4vw, 26px)); }
.bar{ position:fixed; z-index:10; top:0; left:0; right:0; display:flex; align-items:baseline; min-width:0;
  padding:var(--top) max(var(--g), env(safe-area-inset-right)) .7rem max(var(--g), env(safe-area-inset-left));
  background:var(--paper); font-size:1.06rem; }
.bar a{ color:var(--ink); text-decoration:none; padding:.3rem 0; line-height:1.55; }
.bar .away{ transition:color var(--slow) var(--breath); }
.bar .away:hover{ color:var(--soft); }
.bar .here{ transition:opacity .4s var(--breath), visibility 0s; }
body:not([data-docked]) .bar .here[data-dock]{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s var(--breath), visibility 0s linear .4s; }
.page{ padding-top:calc(var(--top) + 3rem); }
/* a page's doors, on the right of the bar, as the museum's are */
.bar .doors{ display:flex; gap:clamp(.9rem, 2.4vw, 1.8rem); font-size:1rem; margin-left:auto; padding-left:1rem; }
.bar .doors a{ color:rgba(17, 17, 17, .58); white-space:nowrap; transition:color .3s var(--breath); touch-action:manipulation; }
.bar .doors a:hover, .bar .doors a[aria-current="page"]{ color:var(--ink); }
@media (max-width:430px){ .bar .doors{ gap:.75rem; } }
@media (max-width:340px){ .bar .doors{ gap:.6rem; padding-left:.6rem; font-size:.92rem; } }   /* 320 px: "reading room" ran 1px past the gutter */
/* a fingertip's room around the bar's links, as the museum gives its doors */
@media (pointer:coarse){ .bar a{ padding-block:.6rem; margin-block:-.3rem; } }