/* The Lab Notes shelf: "Curiosity & Questions" (notebooks plan, lane L5; polished by lane PS, 2026-10-08 night; published since
   lane L8, Doug 2026-10-17). The DS components (masthead, shelf, spine labels, chips, bindings) are styled by the vendored
   design system (ds/core.css, ds/components.css and ds/mode-dark.css, DS 3.15); this file only lays them out on the page and
   styles the stream, all from DS tokens, so light and dark follow the theme. */
.nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- S2: the masthead, an editorial head with the quote as its epigraph ---------------------------------------------- */
.nb-shelf-page .ss-nb-masthead{padding-top:clamp(32px,6vw,72px)}
.nb-masthead-split{border-bottom:1px solid var(--rule);box-shadow:var(--double-hairline)}
@media (min-width:1024px){
  .nb-masthead-split{max-width:var(--content-wide);text-align:left;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:var(--sp-7);align-items:end;padding:clamp(40px,5vw,64px) var(--sp-5) var(--sp-6)}
  .nb-masthead-split>.ss-eyebrow,.nb-masthead-split>.nbm-title,.nb-masthead-split>.nbm-from{grid-column:1}
  .nb-masthead-split>.ss-eyebrow{margin-bottom:var(--sp-2)}
  .nb-masthead-split .nbm-title{font-size:var(--fs-hero);margin-bottom:var(--sp-3)}
  .nb-masthead-split .nbm-from{margin:0;max-width:44ch}
  .nb-masthead-split .ss-nb-quote{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0;max-width:none;
    border-left:1px solid var(--rule);padding:var(--sp-2) 0 var(--sp-1) var(--sp-5)}
}
/* the opening mark hangs, drawn in patina; the words stay verbatim and the attribution stays whole */
.nb-masthead-split .ss-nb-quote blockquote{position:relative}
.nb-masthead-split .ss-nb-quote blockquote p::before{content:open-quote;position:absolute;left:-.55em;top:-.32em;font-size:var(--fs-hero);
  line-height:1;font-style:normal;color:var(--patina)}
.nb-masthead-split .ss-nb-quote blockquote p{padding-left:0}
@media (max-width:1023px){
  .nb-masthead-split .ss-nb-quote blockquote p::before{position:static;font-size:inherit;color:inherit}
}
/* below 760px: the name, the Notes line, the shelf and its chips, then the quote */
@media (max-width:759px){
  main.nb-shelf-page{display:flex;flex-direction:column}
  main.nb-shelf-page>*{order:5;width:100%;min-width:0;box-sizing:border-box}
  .nb-shelf-page .nb-masthead-split{display:contents}
  .nb-masthead-split>.ss-eyebrow{order:1;margin:var(--sp-6) var(--sp-4) var(--sp-2);text-align:center}
  .nb-masthead-split>.nbm-title{order:1;margin:0 var(--sp-4) var(--sp-2);text-align:center}
  .nb-masthead-split>.nbm-from{order:1;margin:0 var(--sp-4) var(--sp-4);text-align:center}
  main.nb-shelf-page>.nb-shelf-sec{order:2}
  .nb-masthead-split>.ss-nb-quote{order:3;margin:var(--sp-5) var(--sp-4) 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--rule);text-align:left}
  main.nb-shelf-page>.nb-stream-sec{order:4}
}

/* ---- S1: the shelf is the hero --------------------------------------------------------------------------------------- */
.nb-shelf-sec{max-width:var(--content-wide);margin:0 auto;padding:var(--sp-6) var(--sp-5) 0}
/* matted per the DS: an 8px surface mat inside a 1px ink line, drawn outside the photograph so the spots' percentages hold */
.nb-shelf-sec .ss-nb-shelf-photo{border:0;margin:var(--sp-2);box-shadow:0 0 0 var(--sp-2) var(--surface),0 0 0 calc(var(--sp-2) + 1px) var(--ink)}
.nb-shelf-sec .ss-nb-shelf-fig figcaption{margin:var(--sp-4) 0 0;font-size:var(--fs-caption);color:var(--ink-soft)}
.nb-shelf-sec .ss-nb-chips{margin-top:var(--sp-4)}
/* without script the shelf's toggle buttons do nothing, so the link chips stand in; with script the DS chips take over */
html:not(.nb-js) .nb-chips-js,html:not(.nb-js) .ss-nb-spot{display:none}
html.nb-js .nb-chips-links{display:none}
.nb-chips-links .ss-nb-chip{text-decoration:none}
.nb-chips-links .ss-nb-chip:hover .ss-nb-chip-name{text-decoration:underline}
/* S6: below 760px the chips are one row that scrolls inside itself; the page never scrolls sideways */
@media (max-width:759px){
  .nb-shelf-sec{padding:var(--sp-5) var(--sp-4) 0}
  .nb-shelf-sec .ss-nb-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--sp-4));
    padding:var(--sp-1) var(--sp-4) var(--sp-2);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .nb-shelf-sec .ss-nb-chip{flex:none;scroll-snap-align:start}
}

/* ---- S4: the stream, readable type, the newest entry leading, the margin used --------------------------------------- */
.nb-stream-sec{max-width:var(--content-wide);margin:0 auto;padding:clamp(32px,4vw,56px) var(--sp-5) clamp(32px,5vw,64px)}
.nb-stream-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5);border-bottom:2px solid var(--ink);padding-bottom:var(--sp-2)}
.nb-stream-head h2{font-size:var(--fs-h3);margin:0;flex:1 1 auto}
.nb-stream-head p{margin:0;font-size:var(--fs-caption)}
.nb-stream-open[hidden]{display:none}
.nb-stream-open a{font-weight:600}
.nb-stream{display:flex;flex-direction:column}
.nb-entry,.nb-other{padding:var(--sp-5) 0 var(--sp-5) var(--sp-5);border-bottom:1px solid var(--rule);max-width:calc(var(--measure) + var(--sp-6))}
.nb-entry[hidden],.nb-strip[hidden]{display:none}
.nb-entry--write-up,.nb-other--write-up{border-left:4px solid var(--nb-binding,var(--rule))}
.nb-entry--note,.nb-other--note{border-left:1px solid var(--rule);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.nb-entry-meta{margin:0 0 var(--sp-2);font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.nb-entry-book{color:var(--ink)}
.nb-entry-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-heading);margin:0;max-width:none;text-wrap:balance}
.nb-entry-title a{color:var(--ink);text-decoration:none}
.nb-entry-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--primary);text-underline-offset:4px}
.nb-entry--note .nb-entry-title,.nb-other--note .nb-entry-title{font-size:var(--fs-body);font-family:var(--font-body,inherit);font-weight:600}
.nb-entry-summary{margin:var(--sp-3) 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);max-width:var(--measure)}
.nb-entry-by{margin:var(--sp-3) 0 0;font-size:var(--fs-caption);color:var(--ink-soft)}
.nb-entry-by a{color:inherit}
.nb-entry--lead .nb-entry-title{font-size:var(--fs-h1)}
.nb-entry--lead .nb-entry-summary{font-size:var(--fs-lead);line-height:var(--lh-snug)}
.nb-ink{margin:var(--sp-1) 0 0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.02em;color:var(--ink-soft)}
.nb-in{color:var(--ink)}
.nb-out{white-space:nowrap}
/* S10: in dark mode a binding stripe gets a keyline, so teal and charcoal never vanish into the ground */
.nb-entry--write-up,.nb-other--write-up,.nb-blank{box-shadow:-1px 0 0 var(--notebook-edge)}

/* ---- S5: "From Out on a LIMS", a visiting notebook in the margin ------------------------------------------------------ */
.nb-strip{margin:var(--sp-5) 0;padding:var(--sp-5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);
  max-width:calc(var(--measure) + var(--sp-6));display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--sp-2)}
.nb-strip-fig{margin:0 0 var(--sp-3);max-width:100%}
.nb-strip-photo{border:0;margin:var(--sp-2);width:calc(100% - 2 * var(--sp-2));max-width:320px;
  box-shadow:0 0 0 var(--sp-2) var(--paper),0 0 0 calc(var(--sp-2) + 1px) var(--ink)}
.nb-strip-photo img{width:100%;height:auto}
.nb-strip-photo .ss-spine-text{font-size:var(--fs-caption)}
.nb-strip-h{margin:0}
.nb-strip-line{margin:0 0 var(--sp-2);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--ink-soft);max-width:var(--measure)}
.nb-strip-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.nb-strip-item{margin:0;padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.nb-strip-title{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-snug)}
.nb-strip-title a{color:var(--ink);text-decoration:none}
.nb-strip-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--primary);text-underline-offset:3px}
.nb-strip-meta{margin:var(--sp-1) 0 0;font-family:var(--font-label);font-size:var(--fs-label);color:var(--ink-soft)}
.nb-strip-volumes,.nb-strip-open{margin:0;font-size:var(--fs-caption)}
.nb-strip-volumes{margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.nb-strip-volumes a,.nb-strip-open a{display:inline-flex;align-items:center;min-height:var(--control-h)}
.nb-strip-open a{font-weight:600}
@media (min-width:640px) and (max-width:1099px){
  .nb-strip{grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:var(--sp-5)}
  .nb-strip>.nb-strip-fig{grid-row:1 / span 6}
}
/* at 1100px and wider: two columns, the stream at its measure and the visiting notebook in the margin, level with the first entry */
@media (min-width:1100px){
  .nb-stream-sec{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:var(--sp-8);row-gap:0;align-items:start}
  .nb-stream-sec>*{grid-column:1}
  .nb-stream-sec>.nb-stream{display:contents}
  .nb-stream-sec>.nb-stream>*{grid-column:1}
  .nb-stream-sec>.nb-stream>.nb-strip{grid-column:2;grid-row:2 / span 60;margin:var(--sp-5) 0 0;position:sticky;top:var(--sp-5)}
  .nb-stream-sec>.nb-stream>.nb-entry,.nb-stream-sec>.nb-volumes>.nb-volume{max-width:none}
  .nb-entry-title{max-width:var(--measure)}
}

/* the volumes: hidden until chosen (by the shelf, or without script by #v-<id>) */
.nb-volume{display:none;margin:var(--sp-5) 0 0;max-width:calc(var(--measure) + var(--sp-6))}
.nb-volume:target,html.nb-js .nb-volume.is-shown{display:block}
html.nb-js .nb-volume:target:not(.is-shown){display:none}
.nb-volume h3{font-size:var(--fs-h3);margin:0 0 var(--sp-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.nb-count{font-family:var(--font-label);font-size:var(--fs-label);font-weight:400;color:var(--ink-soft)}
.nb-year{border-top:1px solid var(--rule)}
.nb-year summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--sp-2);font-weight:600}
.nb-year summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.nb-year-list{list-style:none;margin:0 0 var(--sp-3);padding:0}
.nb-year-list li{display:grid;grid-template-columns:11ch 1fr;gap:var(--sp-3);padding:6px 0;font-size:var(--fs-caption);line-height:var(--lh-normal)}
.nb-year-list time{font-family:var(--font-label);font-size:var(--fs-label);color:var(--ink-soft);padding-top:2px}
@media (max-width:520px){.nb-year-list li{grid-template-columns:1fr;gap:0}}
.nb-volume-line{margin:0 0 var(--sp-2);font-size:var(--fs-caption);color:var(--ink-soft)}

/* ---- S8: a notebook's own page leads with its spine ------------------------------------------------------------------- */
.nb-notebook-head{max-width:var(--content-wide);margin:0 auto;padding:clamp(32px,6vw,64px) var(--sp-5) var(--sp-6);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5) var(--sp-7);align-items:center;border-bottom:1px solid var(--rule);box-shadow:var(--double-hairline)}
.nb-spine-fig{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.nb-spine-photo{width:calc(var(--spine-w) * .8);border:0;margin:var(--sp-2);box-shadow:0 0 0 var(--sp-2) var(--surface),0 0 0 calc(var(--sp-2) + 1px) var(--ink)}
.nb-spine-photo img{width:100%;height:auto}
.nb-spine-photo .ss-spine-text{font-size:var(--fs-body)}
.nb-spine-badge{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.nb-notebook-intro{padding-bottom:var(--sp-2)}
.nb-crumb{margin:0 0 var(--sp-3)}
.nb-notebook-intro h1{margin:0;font-size:var(--fs-display);line-height:var(--lh-heading)}
.nb-tagline{margin:var(--sp-3) 0 0;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--primary-deep);max-width:40ch}
.nb-keeper{margin:var(--sp-3) 0 0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.nb-practice{margin:var(--sp-4) 0 0;font-size:var(--fs-body)}
.nb-practice a{display:inline-flex;align-items:center;min-height:var(--control-h);font-weight:600}
/* a notebook with no spine keeps the drawn cover */
.nb-cover.ss-nb-bound{width:132px;aspect-ratio:3 / 4.2;border-radius:2px 6px 6px 2px;box-shadow:inset 10px 0 0 color-mix(in srgb,var(--notebook-on-light) 18%,transparent),0 0 0 1px var(--notebook-edge);display:flex;align-items:center;justify-content:center;padding:var(--sp-2)}
.nb-cover-label{margin:0;background:var(--notebook-label);color:var(--notebook-label-ink);padding:var(--sp-2);width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.nb-cover-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);line-height:1.15}
.nb-cover-years{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.04em}
.nb-notebook-page .nb-stream-sec{padding-top:var(--sp-5)}
.nb-empty{margin:var(--sp-4) 0 0;padding:var(--sp-4);background:var(--held-bg);border-left:2px solid var(--rule);max-width:62ch;color:var(--ink-soft)}
.nb-back{margin:var(--sp-6) 0 0;font-size:var(--fs-caption)}
@media (max-width:759px){
  .nb-notebook-head{gap:var(--sp-4) var(--sp-5);padding-inline:var(--sp-4);align-items:start}
  .nb-spine-photo{width:calc(var(--spine-w) * .6)}
  .nb-spine-photo .ss-spine-text{font-size:var(--fs-label)}
  .nb-spine-badge{font-size:var(--fs-label);letter-spacing:0;max-width:calc(var(--spine-w) * .6 + var(--sp-4))}
  .nb-notebook-intro h1{font-size:var(--fs-h1)}
  .nb-stream-sec{padding-inline:var(--sp-4)}
  .nb-entry,.nb-other{padding-left:var(--sp-4)}
  .nb-entry-title{font-size:var(--fs-h3)}
  .nb-entry--lead .nb-entry-title{font-size:var(--fs-h2)}
  .nb-entry--lead .nb-entry-summary{font-size:var(--fs-body);line-height:var(--lh-body)}
}

/* ---- B5/S7: an empty notebook's first page ------------------------------------------------------------------------------ */
.nb-blank-wrap[hidden]{display:none}
.nb-blank{max-width:var(--measure);margin:var(--sp-5) 0 0;padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);background:var(--surface);
  border:1px solid var(--rule);border-left:6px solid var(--nb-binding,var(--rule));border-radius:var(--radius-card)}
.nb-blank-tagline{margin:0 0 var(--sp-2);font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--ink)}
.nb-blank .nb-empty{margin:0;padding:0;background:none;border:0;max-width:none;color:var(--ink-soft)}
.nb-blank-practice{margin:var(--sp-3) 0 0;font-size:var(--fs-body)}
.nb-blank-practice a{display:inline-flex;align-items:center;min-height:var(--control-h);font-weight:600}
.nb-blank-ask{margin:var(--sp-1) 0 0;font-size:var(--fs-body);line-height:var(--lh-body)}
.nb-meanwhile-h{margin:var(--sp-7) 0 0;font-family:var(--font-label);font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--patina-deep)}

/* ---- B10: on a phone the sticky "Talk with an expert" bar (footer partial) waits until the shelf has scrolled away ------- */
@media (max-width:760px){
  .site-talk{transition:transform var(--motion-fade),visibility var(--motion-fade)}
  .site-talk.nb-talk-held{transform:translateY(100%);visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.site-talk{transition:none}}