/* ============================================================================
   Nurture Design System V1 — nurture.places@2.0
   ----------------------------------------------------------------------------
   One desk, one sheet, one light.

   MATERIAL LAW. Every visible wood, paper and cloth face is a photograph
   (public/nurture/material/v2, derived by scripts/nurture/derive-v2-materials.py
   from the governed photographs in src/assets/nurture). CSS structures the
   composition — geometry, legibility, edges, shadows — and never impersonates
   a material. There is no tiled wood, no repeated paper texture, no drawn
   grain. Paper edges are the deckled silhouette of the real sheet, applied as
   an alpha mask, so every sheet is its own layer and the wood shows through
   its irregular rim.

   ONE LIGHT. Upper-left, 32° off the vertical. Every shadow in this file is
   built from --ng-lx / --ng-ly (sin 32°, cos 32°) and nothing else.

   FIXED HEIGHT. The composition is authored in frame units (--ng-u) for a
   430 × 932 frame: paper 398u × 760u, header lockup 158u, search well 38u,
   nav rule at 665u. Every well states its height in u. Content is composed
   INSIDE those heights; nothing grows the sheet or moves the navigation.
   The unit itself fits the viewport (width or height, whichever is tighter)
   with a legibility floor, so the whole sheet sits above the fold and the
   navigation baseline is the same on every screen.
   ========================================================================== */

.np-root {
  /* frame unit: the tighter of width and height, floored for legibility,
     scaled by the browser's text setting (accessibility yields to scroll,
     never to a lost action). */
  --ng-t: 1;
  --ng-u: calc(max(0.84px, min(1.4px, calc(100vw / 430), calc(100dvh / 876))) * var(--ng-t));
  /* light */
  --ng-lx: 0.53;
  --ng-ly: 0.85;
  /* ink */
  --ng-ink: #1d1a15;
  --ng-ink-2: #3b3630;
  --ng-ink-3: #5e574d;
  --ng-rule: rgba(29, 26, 21, 0.28);
  --ng-cloth-ink: #f1ebdd;
  --ng-green: #4f5f44;
  /* thread: the stitched edge of cloth and of the search well. WebKit paints
     a one-pixel dashed line at a fraction of its stated colour, so the thread
     is stated strong enough to be seen there and still read as thread in
     Chromium; its width follows the frame, never under one device pixel. */
  --ng-thread-w: max(1px, calc(var(--ng-u) * 1.1));
  --ng-thread-light: rgba(245, 240, 226, 0.58);
  --ng-thread-dark: rgba(40, 34, 26, 0.55);
  /* geometry (u) */
  --ng-paper-w: 398;
  --ng-paper-h: 790;
  --ng-pad-x: 27;
  --ng-header-h: 158;
  --ng-search-h: 38;
  --ng-content-top: 218;
  --ng-nav-top: 695;
  --ng-badge-w: 46;
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
  color: var(--ng-ink);
  font-family: "Cormorant Garamond", "Apple Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  font-size: calc(var(--ng-u) * 11);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern" 1, "liga" 1;
  background: #2a190f;
}

/* ---- the desk: one continuous walnut photograph, never tiled ------------- */
.np-desk {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #2a190f url("/nurture/material/v2/walnut-desk.jpg") center / cover no-repeat;
  pointer-events: none;
}
.np-desk::after {
  /* window light from the upper-left; a shade toward the lower-right */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(122deg, rgba(255, 226, 170, 0.22) 0%, rgba(255, 226, 170, 0.06) 34%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
}

.np-stage {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: max(env(safe-area-inset-top), calc(var(--ng-u) * 70));
  padding-bottom: max(env(safe-area-inset-bottom), calc(var(--ng-u) * 16));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- paper -------------------------------------------------------------- */
.np-folio {
  position: relative;
  width: calc(var(--ng-u) * var(--ng-paper-w));
  height: calc(var(--ng-u) * var(--ng-paper-h));
  flex: none;
  /* the sheet's inside never changes the desk's layout: one screen's words
     are laid out inside the folio and nowhere else (paint is not contained,
     because the lower sheets and their shadows reach past the box) */
  contain: layout style;
}

/* THE PAPER STACK (nurture.materials@3.0).
   Four independent photographed sheets, each a real image with its own alpha
   silhouette, its own torn edge and its own fibre, cut to the exact page
   geometry (public/nurture/material/v3/paper-sheet-0N.webp). They lie Sheet 4
   → 3 → 2 → 1 with only tiny offsets and turns, so the eye discovers another
   real sheet behind the working one — most of all along the left edge, where
   the light reaches the lower sheets and the working sheet casts no shadow.
   No stroke, no outline, no mask: the edge of the folio is the lower paper.

   The one light is upper-left, so each sheet's shadow falls down and to the
   right onto the sheet beneath it. A sheet's shadow is tight: one sheet's
   thickness of distance. The back sheet carries the stack's shadow onto the
   wood, a little softer, because it is the whole stack's height above it.

   Each sheet's shadow, and how much darker it sits for being lower in the
   stack, is IN its image (scripts/nurture/derive-paper-stack.py, from the
   same --ng-lx / --ng-ly light). The browser runs no filter, blur or mask over
   a sheet: identical in every engine, and light on a phone. The image carries
   a 32u margin around the paper box for that shadow, so it is bled by 32u
   here and the paper itself lands exactly on the folio. */
.np-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* the sheets order themselves inside the stack only; the words on the page
     (the later siblings) always paint above every sheet */
  isolation: isolate;
}
.np-leaf {
  position: absolute;
  inset: calc(var(--ng-u) * -32);
  display: block;
  width: calc(100% + var(--ng-u) * 64);
  height: calc(100% + var(--ng-u) * 64);
  max-width: none;
  object-fit: fill;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.np-leaf[data-sheet="1"] {
  /* the working sheet lies square on the stack */
  z-index: 4;
}
/* The approved frames show the lower sheets by a few units at the left and
   more at the foot: the stack is discovered, never announced. */
.np-leaf[data-sheet="2"] {
  z-index: 3;
  transform: translate(calc(var(--ng-u) * -1.4), calc(var(--ng-u) * 3.2)) rotate(-0.22deg);
}
.np-leaf[data-sheet="3"] {
  z-index: 2;
  transform: translate(calc(var(--ng-u) * -2.8), calc(var(--ng-u) * 6.4)) rotate(0.28deg);
}
.np-leaf[data-sheet="4"] {
  z-index: 1;
  transform: translate(calc(var(--ng-u) * -4.2), calc(var(--ng-u) * 9.8)) rotate(-0.14deg);
}

/* a small sheet (a well, the search, a field): the same paper family as the
   working sheet, its real deckled rim applied as a nine-slice alpha mask.
   `fill` is stated on the standard property because WebKit honours it and
   otherwise masks the rim only, leaving the interior empty — text on wood. */
.np-sheet {
  position: absolute;
  inset: 0;
  background: #e9e1d2 url("/nurture/material/v3/paper-well-face.jpg") center / cover no-repeat;
  -webkit-mask-box-image: url("/nurture/material/v3/paper-mask.png") 104 / calc(var(--ng-u) * 4.5) round;
  mask-border: url("/nurture/material/v3/paper-mask.png") 104 fill / calc(var(--ng-u) * 4.5) round;
  pointer-events: none;
}
/* the shadow a small sheet casts: the same silhouette, padded and softened
   into a second nine-slice mask (paper-well-shadow.png), worn by a plain dark
   box moved 2.4u along the light. No filter: a blur over the parent of a
   mask-box-image child is the one pairing WebKit's software path crashes on,
   and a phone has nothing to compute here either. */
.np-well-shade {
  position: absolute;
  inset: calc(var(--ng-u) * -4.15);
  transform: translate(calc(var(--ng-u) * 2.4 * var(--ng-lx)), calc(var(--ng-u) * 2.4 * var(--ng-ly)));
  background: rgba(30, 18, 6, 0.34);
  -webkit-mask-box-image: url("/nurture/material/v3/paper-well-shadow.png") 200 / calc(var(--ng-u) * 8.65) round;
  mask-border: url("/nurture/material/v3/paper-well-shadow.png") 200 fill / calc(var(--ng-u) * 8.65) round;
  pointer-events: none;
}
.np-paper {
  position: absolute;
  inset: 0;
  padding: 0 calc(var(--ng-u) * var(--ng-pad-x));
  outline: none;
}

/* ---- header lockup (fixed 158u) ----------------------------------------- */
.np-header {
  position: relative;
  height: calc(var(--ng-u) * var(--ng-header-h));
  text-align: center;
}
.np-sprout {
  display: block;
  width: calc(var(--ng-u) * 34);
  height: calc(var(--ng-u) * 30);
  margin: 0 auto;
  padding-top: calc(var(--ng-u) * 24);
  box-sizing: content-box;
  color: #5f6b48;
}
.np-title {
  margin: calc(var(--ng-u) * 4) 0 0;
  font-weight: 500;
  font-size: calc(var(--ng-u) * var(--np-title, 44));
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--ng-ink);
  white-space: nowrap;
}
.np-title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  letter-spacing: 0;
  margin-top: 0.08em;
}
.np-subtitle {
  margin: calc(var(--ng-u) * 3) auto 0;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--ng-u) * 14.5);
  line-height: 1.12;
  color: var(--ng-ink-2);
  white-space: pre-line;
  max-width: calc(var(--ng-u) * 250);
}
.np-motto {
  margin: calc(var(--ng-u) * 7) auto 0;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--ng-u) * 12);
  line-height: 1.22;
  color: var(--ng-ink-2);
  white-space: pre-line;
  max-width: calc(var(--ng-u) * 280);
}
.np-header[data-lines="3"] .np-motto {
  font-size: calc(var(--ng-u) * 11);
  margin-top: calc(var(--ng-u) * 5);
}
/* margin notes never add height: they hang in the header's own space */
.np-note {
  position: absolute;
  top: calc(var(--ng-u) * 44);
  width: calc(var(--ng-u) * 46);
  margin: 0;
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.2);
  line-height: 1.2;
  color: var(--ng-ink-2);
  white-space: pre-line;
  text-align: left;
}
.np-note-left {
  left: calc(var(--ng-u) * -13);
}
.np-note-right {
  right: calc(var(--ng-u) * -13);
}
.np-note-right[data-align="right"] {
  text-align: left;
}
.np-note strong {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: calc(var(--ng-u) * 9.4);
  margin-bottom: calc(var(--ng-u) * 1);
  white-space: nowrap;
}
.np-note-leaf {
  display: block;
  width: calc(var(--ng-u) * 15);
  height: calc(var(--ng-u) * 13);
  margin-top: calc(var(--ng-u) * 6);
  color: #5f6b48;
}
.np-note-rule {
  display: block;
  width: calc(var(--ng-u) * 26);
  height: 1px;
  background: var(--ng-rule);
  margin-top: calc(var(--ng-u) * 3);
}

/* ---- search well (fixed 38u, raised, stitched) --------------------------- */
.np-search {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--ng-u) * var(--ng-search-h));
  margin: calc(var(--ng-u) * 10) 0 0;
  padding: 0 calc(var(--ng-u) * 12);
  gap: calc(var(--ng-u) * 8);
}
.np-search .np-well-paper {
  z-index: 0;
}
.np-search::after {
  /* stitching, inset from the raised rim */
  content: "";
  position: absolute;
  inset: calc(var(--ng-u) * 4.5);
  border: var(--ng-thread-w) dashed var(--ng-thread-dark);
  border-radius: calc(var(--ng-u) * 3);
  pointer-events: none;
  z-index: 1;
}
.np-search > * {
  position: relative;
  z-index: 2;
}
.np-search svg {
  width: calc(var(--ng-u) * 15);
  height: calc(var(--ng-u) * 15);
  flex: none;
  color: var(--ng-ink);
}
.np-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: inherit;
  font-style: italic;
  font-size: calc(var(--ng-u) * 12.5);
  color: var(--ng-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.np-search input::placeholder {
  color: var(--ng-ink-3);
  font-style: italic;
}
.np-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.np-search button {
  flex: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(var(--ng-u) * 12);
  font-style: italic;
  color: var(--ng-ink-2);
  min-height: max(100%, 44px);
  min-width: 44px;
  padding: 0 calc(var(--ng-u) * 2);
  cursor: pointer;
}
.np-search button span {
  font-style: normal;
  margin-left: 0.25em;
}

/* ---- content region (218u → 653u) --------------------------------------- */
.np-content {
  position: absolute;
  left: calc(var(--ng-u) * var(--ng-pad-x));
  right: calc(var(--ng-u) * var(--ng-pad-x));
  top: calc(var(--ng-u) * var(--ng-content-top));
  height: calc(var(--ng-u) * (var(--ng-nav-top) - var(--ng-content-top) - 12));
  display: flex;
  flex-direction: column;
  gap: calc(var(--ng-u) * 10);
  overflow: hidden;
}
.np-content[data-scroll="true"] {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.np-content[data-scroll="true"]::-webkit-scrollbar {
  display: none;
}
.np-search-below {
  /* when a place has a search well, content begins below it */
  top: calc(var(--ng-u) * (var(--ng-header-h) + 10 + var(--ng-search-h) + 12));
  height: calc(var(--ng-u) * (var(--ng-nav-top) - var(--ng-header-h) - 10 - var(--ng-search-h) - 12 - 12));
}

/* ---- wells --------------------------------------------------------------- */
.np-well-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.np-well-paper[data-face="2"] .np-sheet {
  background-position: 20% 70%;
}
.np-well-paper[data-face="3"] .np-sheet {
  background-position: 80% 30%;
}
.np-well-paper[data-face="4"] .np-sheet {
  background-position: 65% 85%;
}
.np-well-paper[data-face="5"] .np-sheet {
  background-position: 10% 15%;
}
.np-well-paper[data-face="6"] .np-sheet {
  background-position: 45% 55%;
}
.np-well-paper[data-face="7"] .np-sheet {
  background-position: 90% 75%;
}

.np-well {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
  height: calc(var(--ng-u) * var(--h, 56));
  color: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.np-well[data-static="true"] {
  cursor: default;
}
.np-well > * {
  position: relative;
  z-index: 1;
}
.np-well > .np-well-paper,
.np-search > .np-well-paper,
.np-select > .np-well-paper,
.np-capture-field > .np-well-paper {
  position: absolute;
  z-index: 0;
}
.np-well:focus-visible .np-well-paper .np-sheet,
.np-fabric:focus-visible,
.np-nav a:focus-visible,
.np-search:focus-within .np-well-paper .np-sheet {
  outline: 2px solid #3f6b8a;
  outline-offset: 2px;
}
.np-well:active .np-well-shade {
  /* pressed: the sheet sits closer to the page, its shadow shorter and lighter */
  transform: translate(calc(var(--ng-u) * 1.2 * var(--ng-lx)), calc(var(--ng-u) * 1.2 * var(--ng-ly)));
  opacity: 0.8;
}

/* cloth badge: photographed linen, full well height, stitched, crisp mark */
.np-badge {
  flex: none;
  width: calc(var(--ng-u) * var(--bw, var(--ng-badge-w)));
  margin: calc(var(--ng-u) * 1.5) 0 calc(var(--ng-u) * 1.5) calc(var(--ng-u) * 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--ng-u) * 2.5);
  background: var(--ng-green) url("/nurture/material/v3/linen-green.webp") var(--cx, 50%) var(--cy, 50%) / 190% auto no-repeat;
  color: var(--ng-cloth-ink);
  box-shadow:
    inset calc(var(--ng-u) * -1 * var(--ng-lx)) calc(var(--ng-u) * -1 * var(--ng-ly)) calc(var(--ng-u) * 1.5) rgba(0, 0, 0, 0.35),
    inset calc(var(--ng-u) * 0.8 * var(--ng-lx)) calc(var(--ng-u) * 0.8 * var(--ng-ly)) calc(var(--ng-u) * 1) rgba(255, 250, 235, 0.25),
    calc(var(--ng-u) * 1 * var(--ng-lx)) calc(var(--ng-u) * 1 * var(--ng-ly)) calc(var(--ng-u) * 1.6) rgba(20, 12, 4, 0.38);
}
.np-badge::after {
  content: "";
  position: absolute;
  inset: calc(var(--ng-u) * 3.5);
  border: var(--ng-thread-w) dashed var(--ng-thread-light);
  border-radius: calc(var(--ng-u) * 1.5);
  pointer-events: none;
}
.np-badge {
  position: relative;
}
.np-badge svg {
  width: calc(var(--ng-u) * var(--bi, 20));
  height: calc(var(--ng-u) * var(--bi, 20));
  stroke-width: 1.45;
}
.np-badge[data-tone="tan"] {
  background-image: url("/nurture/material/v3/linen-oat.webp");
  background-color: #a99b82;
  color: #2b2620;
}
.np-badge[data-tone="tan"]::after {
  border-color: var(--ng-thread-dark);
}
.np-badge[data-tone="brown"] {
  background-image: url("/nurture/material/v3/linen-brown.webp");
  background-color: #7f6a51;
}
.np-badge[data-tone="blue"] {
  background-image: url("/nurture/material/v3/linen-blue.webp");
  background-color: #66798a;
}

.np-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--ng-u) * 4) calc(var(--ng-u) * 8) calc(var(--ng-u) * 4) calc(var(--ng-u) * 9);
}
.np-copy-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--ng-u) * 6);
  font-weight: 500;
  font-size: calc(var(--ng-u) * var(--ts, 15));
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ng-ink);
}
.np-copy-title em {
  font-style: italic;
  font-weight: 400;
}
.np-arrow {
  flex: none;
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  color: var(--ng-ink);
}
.np-copy-sub {
  margin-top: calc(var(--ng-u) * 2.5);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--ng-u) * var(--ss, 11));
  line-height: 1.16;
  color: var(--ng-ink-2);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
}
.np-copy-meta {
  margin-top: calc(var(--ng-u) * 3);
  font-size: calc(var(--ng-u) * 9.5);
  font-style: italic;
  color: var(--ng-ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* illustrated row (Pattern, Dream): title → arrow │ illustration · aside */
.np-row .np-copy {
  flex: 0 0 calc(var(--ng-u) * 150);
  border-right: 1px solid var(--ng-rule);
  margin: calc(var(--ng-u) * 6) 0;
  padding-top: 0;
  padding-bottom: 0;
}
.np-row .np-copy-title {
  font-size: calc(var(--ng-u) * 16.5);
}
.np-row .np-copy-title > span:first-child {
  white-space: nowrap;
}
.np-row .np-copy {
  flex-basis: calc(var(--ng-u) * 158);
}
.np-row-art {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--ng-u) * 6);
  padding: 0 calc(var(--ng-u) * 6) 0 calc(var(--ng-u) * 8);
  min-width: 0;
}
.np-row-art img {
  flex: none;
  width: calc(var(--ng-u) * var(--aw, 56));
  height: calc(var(--ng-u) * var(--ah, 46));
  object-fit: contain;
  filter: drop-shadow(calc(var(--ng-u) * 1 * var(--ng-lx)) calc(var(--ng-u) * 1 * var(--ng-ly)) calc(var(--ng-u) * 0.8) rgba(20, 12, 4, 0.35));
}
.np-row-aside {
  flex: 1;
  min-width: 0;
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.8);
  line-height: 1.18;
  color: var(--ng-ink-2);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* two-column grid of wells */
.np-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ng-u) * 10) calc(var(--ng-u) * 10);
  flex: none;
}
.np-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
/* Three across, the label keeps its authored two lines: the arrow sits in
   the corner of the copy instead of taking a column of its own. */
.np-grid-3 .np-copy {
  position: relative;
}
.np-grid-3 .np-copy-title {
  display: block;
  padding-right: calc(var(--ng-u) * 6);
  white-space: pre-line;
}
.np-grid-3 .np-copy-title .np-arrow {
  position: absolute;
  top: 0;
  right: 0;
}
.np-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--ng-u) * 10);
  flex: none;
}
.np-pair[data-split="wide"] {
  grid-template-columns: 1.35fr 1fr;
}

/* ---- cloth action (fabric) ----------------------------------------------- */
.np-fabric {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--ng-u) * 8);
  flex: none;
  height: calc(var(--ng-u) * var(--h, 44));
  padding: 0 calc(var(--ng-u) * 12);
  border: 0;
  border-radius: calc(var(--ng-u) * 3);
  background: var(--ng-green) url("/nurture/material/v3/linen-green.webp") var(--cx, 40%) var(--cy, 50%) / 160% auto no-repeat;
  color: var(--ng-cloth-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset calc(var(--ng-u) * -1 * var(--ng-lx)) calc(var(--ng-u) * -1 * var(--ng-ly)) calc(var(--ng-u) * 1.5) rgba(0, 0, 0, 0.35),
    inset calc(var(--ng-u) * 0.8 * var(--ng-lx)) calc(var(--ng-u) * 0.8 * var(--ng-ly)) calc(var(--ng-u) * 1) rgba(255, 250, 235, 0.22),
    calc(var(--ng-u) * 2 * var(--ng-lx)) calc(var(--ng-u) * 2 * var(--ng-ly)) calc(var(--ng-u) * 2.4) rgba(20, 12, 4, 0.42);
  -webkit-tap-highlight-color: transparent;
}
.np-fabric::after {
  content: "";
  position: absolute;
  inset: calc(var(--ng-u) * 4);
  border: var(--ng-thread-w) dashed var(--ng-thread-light);
  border-radius: calc(var(--ng-u) * 2);
  pointer-events: none;
}
.np-fabric[data-tone="tan"] {
  background-image: url("/nurture/material/v3/linen-oat.webp");
  background-color: #a99b82;
  color: #2b2620;
}
.np-fabric[data-tone="tan"]::after {
  border-color: var(--ng-thread-dark);
}
.np-fabric[data-tone="blue"] {
  background-image: url("/nurture/material/v3/linen-blue.webp");
  background-color: #66798a;
}
.np-fabric[data-tone="brown"] {
  background-image: url("/nurture/material/v3/linen-brown.webp");
  background-color: #7f6a51;
}
.np-fabric:active {
  transform: translate(calc(var(--ng-u) * 0.5), calc(var(--ng-u) * 0.8));
  box-shadow:
    inset calc(var(--ng-u) * -1 * var(--ng-lx)) calc(var(--ng-u) * -1 * var(--ng-ly)) calc(var(--ng-u) * 1.5) rgba(0, 0, 0, 0.35),
    calc(var(--ng-u) * 1 * var(--ng-lx)) calc(var(--ng-u) * 1 * var(--ng-ly)) calc(var(--ng-u) * 1.2) rgba(20, 12, 4, 0.4);
}
.np-fabric > svg {
  flex: none;
  width: calc(var(--ng-u) * 18);
  height: calc(var(--ng-u) * 18);
  stroke-width: 1.5;
}
.np-fabric-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.np-fabric-label {
  font-weight: 500;
  font-size: calc(var(--ng-u) * var(--ts, 14));
  line-height: 1.05;
  white-space: pre-line;
}
.np-fabric-sub {
  margin-top: calc(var(--ng-u) * 2);
  font-style: italic;
  font-size: calc(var(--ng-u) * 10);
  line-height: 1.15;
  opacity: 0.92;
  white-space: pre-line;
}
.np-fabric-arrow {
  flex: none;
  font-size: calc(var(--ng-u) * 15);
  line-height: 1;
}
/* the wide capture bar of the approved Dream frame: mark, name, a thin
   thread of a rule, then the two-line caption set beside the name */
.np-fabric[data-layout="aside"] .np-fabric-label {
  font-size: calc(var(--ng-u) * 15.5);
}
.np-fabric-aside {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  max-width: 42%;
  margin: calc(var(--ng-u) * 7) 0;
  padding-left: calc(var(--ng-u) * 8);
  border-left: 1px solid rgba(245, 240, 226, 0.38);
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.6);
  line-height: 1.2;
  white-space: pre-line;
  opacity: 0.94;
}
.np-fabric[data-compact="true"] {
  padding: 0 calc(var(--ng-u) * 8);
  gap: calc(var(--ng-u) * 5);
}
.np-fabric[data-compact="true"] .np-fabric-label {
  font-size: calc(var(--ng-u) * 11.5);
}
.np-fabric[data-compact="true"] > svg {
  width: calc(var(--ng-u) * 14);
  height: calc(var(--ng-u) * 14);
}

/* ---- editorial / quote well ---------------------------------------------- */
.np-well.np-quote {
  display: grid;
  grid-template-columns: var(--qc, 1fr 1fr);
  align-items: center;
  overflow: hidden;
}
.np-quote > p {
  margin: 0;
  padding: 0 calc(var(--ng-u) * 10);
  font-style: italic;
  font-size: calc(var(--ng-u) * 11);
  line-height: 1.2;
  color: var(--ng-ink-2);
  white-space: pre-line;
  min-width: 0;
}
.np-quote > p + p {
  border-left: 1px solid var(--ng-rule);
}
.np-quote .np-note-leaf {
  margin-top: calc(var(--ng-u) * 3);
}

/* section label */
.np-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex: none;
  margin: 0;
  font-size: calc(var(--ng-u) * 10);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ng-ink-2);
  padding: 0 calc(var(--ng-u) * 2);
}
.np-label em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: calc(var(--ng-u) * 10.5);
}
.np-label a {
  color: inherit;
  text-decoration: none;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: calc(var(--ng-u) * 10.5);
}
.np-label-serif {
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(var(--ng-u) * 14);
  font-weight: 500;
  color: var(--ng-ink);
}
.np-quiet {
  margin: 0;
  flex: none;
  font-style: italic;
  font-size: calc(var(--ng-u) * 10);
  line-height: 1.2;
  color: var(--ng-ink-3);
  white-space: pre-line;
}
.np-quiet[role="alert"],
.np-fault {
  color: #7a3c2c;
  font-style: normal;
}

/* ---- boundary record (Informal Pressure) --------------------------------- */
.np-record {
  padding: 0 calc(var(--ng-u) * 10) 0 0;
  gap: calc(var(--ng-u) * 8);
}
.np-record .np-badge {
  align-self: stretch;
}
.np-record-fields {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: calc(var(--ng-u) * 8) 0 calc(var(--ng-u) * 8) calc(var(--ng-u) * 9);
  font-size: calc(var(--ng-u) * 9.8);
  line-height: 1.14;
  overflow: hidden;
}
.np-record-fields dl {
  display: grid;
  grid-template-columns: calc(var(--ng-u) * 78) 1fr;
  column-gap: calc(var(--ng-u) * 5);
  row-gap: calc(var(--ng-u) * 2);
  align-content: start;
  margin: 0;
}
.np-record-fields h3 {
  margin: 0 0 calc(var(--ng-u) * 2);
  font-weight: 500;
  font-size: calc(var(--ng-u) * 16);
  line-height: 1;
}
.np-record-fields dt {
  font-style: italic;
  color: var(--ng-ink-3);
}
.np-record-fields dd {
  margin: 0;
  color: var(--ng-ink);
}
.np-record-fields dd em {
  font-style: italic;
}
.np-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: calc(var(--ng-u) * 5) calc(var(--ng-u) * 8);
  padding: calc(var(--ng-u) * 7) calc(var(--ng-u) * 10) calc(var(--ng-u) * 6);
  overflow: hidden;
}
.np-columns > h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 500;
  font-size: calc(var(--ng-u) * 14);
  line-height: 1;
}
.np-column {
  display: flex;
  gap: calc(var(--ng-u) * 6);
  min-width: 0;
}
.np-column .np-badge {
  --bw: 26;
  --bi: 13;
  height: calc(var(--ng-u) * 30);
  margin: 0;
}
.np-column > div {
  min-width: 0;
  flex: 1;
}
.np-column h4 {
  margin: 0 0 calc(var(--ng-u) * 2);
  font-weight: 500;
  font-size: calc(var(--ng-u) * 11.5);
  line-height: 1;
}
.np-bullets {
  margin: 0;
  padding: 0 0 0 calc(var(--ng-u) * 7);
  font-size: calc(var(--ng-u) * 9.2);
  line-height: 1.12;
  color: var(--ng-ink-2);
  list-style: disc outside;
}
.np-bullets li::marker {
  color: var(--ng-ink);
  font-size: 0.85em;
}
.np-bullets li + li {
  margin-top: calc(var(--ng-u) * 0.8);
}
.np-impact {
  padding: 0 calc(var(--ng-u) * 10) 0 0;
  gap: calc(var(--ng-u) * 8);
}
.np-impact .np-badge {
  align-self: stretch;
}
.np-impact h3 {
  margin: 0 0 calc(var(--ng-u) * 2);
  font-weight: 500;
  font-size: calc(var(--ng-u) * 14);
  line-height: 1;
}
.np-impact .np-bullets {
  font-size: calc(var(--ng-u) * 9.4);
}
.np-impact > div {
  min-width: 0;
  flex: 1;
  padding: calc(var(--ng-u) * 6) 0;
}

/* ---- workbench (Instrument, Step) --------------------------------------- */
.np-bench {
  flex-direction: column;
  align-items: stretch;
  padding: calc(var(--ng-u) * 7) calc(var(--ng-u) * 10) calc(var(--ng-u) * 8);
  cursor: default;
}
.np-bench-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--ng-u) * 8);
  margin: 0;
  font-size: calc(var(--ng-u) * 10);
  letter-spacing: 0.04em;
  color: var(--ng-ink-2);
}
.np-bench-head a {
  color: inherit;
  text-decoration: none;
  font-style: italic;
  letter-spacing: 0;
  white-space: nowrap;
}
.np-bench-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--ng-u) * 6);
  font-weight: 500;
  font-size: calc(var(--ng-u) * 15);
  letter-spacing: 0;
  color: var(--ng-ink);
}
.np-bench-head h3 svg {
  width: calc(var(--ng-u) * 15);
  height: calc(var(--ng-u) * 15);
}
.np-bench-head em {
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.8);
  line-height: 1.15;
  text-align: right;
  letter-spacing: 0;
  white-space: pre-line;
  color: var(--ng-ink-2);
}
.np-bench-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(var(--ng-u) * 8);
  margin-top: calc(var(--ng-u) * 5);
}
.np-bench-text h4 {
  margin: 0;
  font-weight: 500;
  font-size: calc(var(--ng-u) * 15.5);
  line-height: 1.02;
}
.np-bench-text p {
  margin: calc(var(--ng-u) * 3) 0 0;
  font-size: calc(var(--ng-u) * 10.2);
  line-height: 1.18;
  color: var(--ng-ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.np-bench-text {
  min-width: 0;
}
.np-bench-photo {
  position: relative;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.np-bench-photo img {
  display: block;
  width: 100%;
  height: calc(var(--ng-u) * var(--ph, 130));
  object-fit: cover;
  border-radius: calc(var(--ng-u) * 1.5);
  box-shadow:
    calc(var(--ng-u) * 1.5 * var(--ng-lx)) calc(var(--ng-u) * 1.5 * var(--ng-ly)) calc(var(--ng-u) * 2) rgba(20, 12, 4, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.np-bench-photo {
  justify-content: flex-start;
}
.np-bench-photo figcaption {
  margin-top: calc(var(--ng-u) * 3);
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--ng-u) * 3);
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.5);
  line-height: 1.12;
  text-align: right;
  color: var(--ng-ink-2);
  white-space: pre-line;
}
.np-bench-photo figcaption .np-note-leaf {
  margin: 0;
  width: calc(var(--ng-u) * 12);
  height: calc(var(--ng-u) * 11);
}
.np-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--ng-u) * 4) calc(var(--ng-u) * 8);
  margin: calc(var(--ng-u) * 6) 0 0;
  font-size: calc(var(--ng-u) * 10);
  color: var(--ng-ink-2);
}
.np-facts dt {
  font-style: italic;
}
.np-facts dd {
  margin: 0;
}
.np-chip {
  display: inline-block;
  padding: calc(var(--ng-u) * 1.5) calc(var(--ng-u) * 8);
  border-radius: calc(var(--ng-u) * 2);
  background: var(--ng-green) url("/nurture/material/v3/linen-green.webp") 60% 40% / 220% auto no-repeat;
  color: var(--ng-cloth-ink);
  font-size: calc(var(--ng-u) * 9.8);
  box-shadow: calc(var(--ng-u) * 0.8 * var(--ng-lx)) calc(var(--ng-u) * 0.8 * var(--ng-ly)) calc(var(--ng-u) * 1) rgba(20, 12, 4, 0.35);
}
.np-dots {
  display: inline-flex;
  gap: calc(var(--ng-u) * 3);
  margin-right: calc(var(--ng-u) * 5);
  vertical-align: middle;
}
.np-dots i {
  width: calc(var(--ng-u) * 6);
  height: calc(var(--ng-u) * 6);
  border-radius: 50%;
  border: 1px solid var(--ng-ink-2);
}
.np-dots i[data-on="true"] {
  background: var(--ng-ink-2);
}
.np-bench-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--ng-u) * 8);
  margin-top: calc(var(--ng-u) * 6);
  min-width: 0;
}
.np-bench-actions .np-fabric {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding-left: calc(var(--ng-u) * 8);
  padding-right: calc(var(--ng-u) * 8);
}
.np-bench-actions .np-fabric-copy {
  min-width: 0;
}
.np-bench-actions .np-fabric-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--ng-u) * 8.8);
}
.np-bench-actions .np-fabric-label {
  white-space: nowrap;
}

/* Test a Step */
.np-select {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--ng-u) * 32);
  margin-top: calc(var(--ng-u) * 6);
  padding: 0 calc(var(--ng-u) * 10);
  gap: calc(var(--ng-u) * 6);
}
.np-select > * {
  position: relative;
  z-index: 1;
}
.np-select select {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: inherit;
  font-style: italic;
  font-size: calc(var(--ng-u) * 11.5);
  color: var(--ng-ink);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.np-select button,
.np-select a {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(var(--ng-u) * 11);
  color: var(--ng-ink);
  text-decoration: none;
  cursor: pointer;
  padding: 0 calc(var(--ng-u) * 2);
  min-height: 100%;
  display: inline-flex;
  align-items: center;
}
.np-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(var(--ng-u) * 8);
  margin-top: calc(var(--ng-u) * 8);
}
.np-tile {
  --h: 56;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--ng-u) * 5);
  padding: 0 calc(var(--ng-u) * 7);
}
.np-tile .np-fabric-label {
  font-size: calc(var(--ng-u) * 11.5);
}
.np-tile .np-fabric-sub {
  font-size: calc(var(--ng-u) * 9);
  margin-top: calc(var(--ng-u) * 1.5);
}
.np-tile > svg {
  width: calc(var(--ng-u) * 15);
  height: calc(var(--ng-u) * 15);
}
.np-check {
  margin-top: calc(var(--ng-u) * 8);
  --h: 44;
}
.np-check .np-copy {
  border-right: 1px solid var(--ng-rule);
  margin: calc(var(--ng-u) * 5) 0;
  padding-top: 0;
  padding-bottom: 0;
  flex: 1;
}
.np-check .np-row-aside {
  flex: 0 0 calc(var(--ng-u) * 96);
  padding: 0 calc(var(--ng-u) * 8);
  -webkit-line-clamp: 3;
}

/* ---- School -------------------------------------------------------------- */
.np-path {
  position: relative;
  padding: calc(var(--ng-u) * 10) calc(var(--ng-u) * 12) calc(var(--ng-u) * 6);
  display: block;
}
.np-path ol {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.np-path ol::before {
  content: "";
  position: absolute;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: calc(var(--ng-u) * 9);
  height: 1px;
  background: var(--ng-ink-2);
}
.np-path li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ng-u) * 2.5);
  font-size: calc(var(--ng-u) * 9);
  line-height: 1.1;
  text-align: center;
  color: var(--ng-ink-2);
}
.np-path li i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ng-u) * 18);
  height: calc(var(--ng-u) * 18);
  border-radius: 50%;
  border: 1px solid var(--ng-ink-2);
  background: #ece5d6 url("/nurture/material/v3/paper-well-face.jpg") center / 300% no-repeat;
  font-style: normal;
  font-size: calc(var(--ng-u) * 10);
}
.np-path li[data-state="current"] i {
  background: var(--ng-green) url("/nurture/material/v3/linen-green.webp") center / 300% no-repeat;
  color: var(--ng-cloth-ink);
  border-color: var(--ng-green);
  box-shadow: calc(var(--ng-u) * 1 * var(--ng-lx)) calc(var(--ng-u) * 1 * var(--ng-ly)) calc(var(--ng-u) * 1.4) rgba(20, 12, 4, 0.4);
}
.np-path li[data-state="current"] {
  color: var(--ng-ink);
  font-weight: 500;
}
.np-path li[data-state="current"] i svg,
.np-path li[data-state="done"] i svg {
  width: calc(var(--ng-u) * 10);
  height: calc(var(--ng-u) * 10);
}
.np-path li small {
  font-size: calc(var(--ng-u) * 8.5);
  font-style: italic;
  color: var(--ng-ink-3);
}
.np-lesson {
  gap: calc(var(--ng-u) * 6);
  padding-right: calc(var(--ng-u) * 8);
}
.np-lesson .np-copy {
  flex: 1;
}
.np-lesson-art {
  flex: none;
  width: calc(var(--ng-u) * 40);
  height: calc(var(--ng-u) * 56);
  object-fit: contain;
  align-self: center;
}
/* the lesson's measure sits on the lesson's own sheet, beneath its lines */
.np-lesson-meta {
  display: block;
  width: max-content;
  margin-top: calc(var(--ng-u) * 3.5);
  font-size: calc(var(--ng-u) * 7.6);
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ng-ink-3);
}
.np-lesson .np-fabric {
  align-self: center;
  --h: 30;
}

/* ---- Living Record map --------------------------------------------------- */
.np-map {
  position: relative;
  flex: none;
  height: calc(var(--ng-u) * 250);
}
.np-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
.np-map-lines path {
  fill: none;
  stroke: var(--ng-ink-2);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.np-map-col {
  position: absolute;
  top: calc(var(--ng-u) * 52);
  width: calc(var(--ng-u) * 118);
  display: flex;
  flex-direction: column;
  gap: calc(var(--ng-u) * 14);
  z-index: 1;
}
.np-map-col[data-side="left"] {
  left: 0;
}
.np-map-col[data-side="right"] {
  right: 0;
}
.np-map .np-well {
  --h: 56;
}
.np-map .np-badge {
  --bw: 30;
  --bi: 15;
}
.np-map .np-copy {
  padding-left: calc(var(--ng-u) * 6);
  padding-right: calc(var(--ng-u) * 4);
}
.np-map .np-copy-title {
  font-size: calc(var(--ng-u) * 11.5);
}
.np-map .np-copy-sub {
  font-size: calc(var(--ng-u) * 8.6);
  margin-top: calc(var(--ng-u) * 1.5);
  -webkit-line-clamp: 3;
}
.np-map-book {
  position: absolute;
  left: 50%;
  top: calc(var(--ng-u) * 109);
  transform: translateX(-50%);
  width: calc(var(--ng-u) * 82);
  height: calc(var(--ng-u) * 82);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--ng-u) * 3);
  background: var(--ng-green) url("/nurture/material/v3/linen-green.webp") 55% 45% / 200% auto no-repeat;
  color: var(--ng-cloth-ink);
  box-shadow:
    inset calc(var(--ng-u) * -1 * var(--ng-lx)) calc(var(--ng-u) * -1 * var(--ng-ly)) calc(var(--ng-u) * 1.5) rgba(0, 0, 0, 0.35),
    calc(var(--ng-u) * 3 * var(--ng-lx)) calc(var(--ng-u) * 3 * var(--ng-ly)) calc(var(--ng-u) * 3.5) rgba(20, 12, 4, 0.45);
}
.np-map-book::after {
  content: "";
  position: absolute;
  inset: calc(var(--ng-u) * 4);
  border: var(--ng-thread-w) dashed var(--ng-thread-light);
  border-radius: calc(var(--ng-u) * 2);
}
.np-map-book svg {
  width: calc(var(--ng-u) * 34);
  height: calc(var(--ng-u) * 34);
  stroke-width: 1.3;
}
.np-map-center {
  position: absolute;
  left: 50%;
  top: calc(var(--ng-u) * 197);
  transform: translateX(-50%);
  width: calc(var(--ng-u) * 72);
  margin: 0;
  text-align: center;
  z-index: 2;
  white-space: pre-line;
  font-size: calc(var(--ng-u) * 12.5);
  font-weight: 500;
  line-height: 1;
}
.np-map-center em {
  display: block;
  margin-top: calc(var(--ng-u) * 3);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--ng-u) * 9.4);
  line-height: 1.15;
  color: var(--ng-ink-2);
}
.np-map-caption {
  position: absolute;
  margin: 0;
  z-index: 1;
  font-size: calc(var(--ng-u) * 8.6);
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ng-ink-2);
  white-space: pre-line;
}
.np-map-caption[data-side="left"] {
  left: 0;
  top: 0;
}
.np-map-caption[data-side="right"] {
  right: 0;
  top: 0;
  text-align: right;
}
.np-map-sprout {
  position: absolute;
  left: 50%;
  top: calc(var(--ng-u) * -6);
  transform: translateX(-50%);
  width: calc(var(--ng-u) * 44);
  height: calc(var(--ng-u) * 58);
  object-fit: contain;
  z-index: 1;
}
.np-map-sprout-caption {
  position: absolute;
  left: 50%;
  top: calc(var(--ng-u) * 56);
  transform: translateX(-50%);
  width: calc(var(--ng-u) * 96);
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: calc(var(--ng-u) * 8.8);
  line-height: 1.15;
  color: var(--ng-ink-2);
  z-index: 1;
  white-space: pre-line;
}

/* capture */
.np-capture {
  flex-direction: column;
  align-items: stretch;
  padding: calc(var(--ng-u) * 8) calc(var(--ng-u) * 10) calc(var(--ng-u) * 8);
  cursor: default;
}
.np-capture-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
}
.np-capture-head em {
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.8);
  color: var(--ng-ink-2);
}
.np-capture-field {
  position: relative;
  margin-top: calc(var(--ng-u) * 6);
  height: calc(var(--ng-u) * 40);
}
.np-capture-field textarea {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;
  resize: none;
  border: 0;
  background: transparent;
  padding: calc(var(--ng-u) * 8) calc(var(--ng-u) * 10);
  font: inherit;
  font-style: italic;
  font-size: calc(var(--ng-u) * 12);
  line-height: 1.2;
  color: var(--ng-ink);
  outline: none;
}
.np-capture-field textarea::placeholder {
  color: var(--ng-ink-3);
}
.np-capture-field:focus-within .np-well-paper .np-sheet {
  outline: 2px solid #3f6b8a;
}
.np-capture-tools {
  display: flex;
  align-items: center;
  gap: calc(var(--ng-u) * 10);
  margin-top: calc(var(--ng-u) * 7);
}
.np-tool {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ng-u) * 3);
  border: 0;
  background: transparent;
  padding: calc(var(--ng-u) * 4) 0;
  font: inherit;
  font-size: calc(var(--ng-u) * 10.5);
  font-style: italic;
  color: var(--ng-ink);
  cursor: pointer;
  min-height: calc(var(--ng-u) * 24);
}
.np-tool svg {
  width: calc(var(--ng-u) * 12);
  height: calc(var(--ng-u) * 12);
}
.np-tool[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.np-tool select {
  font: inherit;
  font-style: italic;
  font-size: calc(var(--ng-u) * 10.5);
  border: 0;
  background: transparent;
  color: var(--ng-ink);
  padding: 0;
  min-height: 44px;
  margin: -12px 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.np-capture-tools .np-fabric {
  margin-left: auto;
  --h: 34;
  padding: 0 calc(var(--ng-u) * 9);
}
.np-capture-tools .np-fabric .np-fabric-label {
  font-size: calc(var(--ng-u) * 11);
}
.np-capture-note {
  margin: calc(var(--ng-u) * 4) 0 0;
  font-size: calc(var(--ng-u) * 9.6);
  font-style: italic;
  color: var(--ng-ink-3);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.np-placement {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  gap: calc(var(--ng-u) * 8);
  padding: 0 calc(var(--ng-u) * 10);
  font-style: italic;
  font-size: calc(var(--ng-u) * 9.4);
  line-height: 1.15;
  color: var(--ng-ink-2);
}
.np-placement p {
  margin: 0;
  white-space: pre-line;
}
.np-placement p:nth-child(2) {
  text-align: center;
}
.np-placement p:nth-child(2) b {
  display: block;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.3em;
  font-size: calc(var(--ng-u) * 8);
}
.np-placement p:last-child {
  display: flex;
  gap: calc(var(--ng-u) * 4);
  align-items: flex-start;
  text-align: right;
}
.np-placement .np-note-leaf {
  margin: 0;
  flex: none;
}

/* ---- Home presence ------------------------------------------------------- */
.np-slice .np-copy-title {
  font-size: calc(var(--ng-u) * 14);
}
.np-slice .np-copy-sub {
  font-style: normal;
  color: var(--ng-ink);
  font-size: calc(var(--ng-u) * 11);
}
.np-slice .np-copy-meta {
  font-style: italic;
}
.np-slice .np-badge {
  --bw: 40;
  --bi: 18;
}

/* ---- navigation (rule at 695u; identical on every screen) ----------------- */
.np-nav {
  position: absolute;
  left: calc(var(--ng-u) * var(--ng-pad-x));
  right: calc(var(--ng-u) * var(--ng-pad-x));
  top: calc(var(--ng-u) * var(--ng-nav-top));
  height: calc(var(--ng-u) * 56);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ng-rule);
  padding-top: calc(var(--ng-u) * 6);
}
.np-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ng-u) * 3);
  min-height: calc(var(--ng-u) * 48);
  color: var(--ng-ink);
  text-decoration: none;
  font-size: calc(var(--ng-u) * 11.5);
  line-height: 1;
  border-radius: calc(var(--ng-u) * 3);
  margin: 0 calc(var(--ng-u) * 3);
  -webkit-tap-highlight-color: transparent;
}
.np-nav a + a::before {
  content: "";
  position: absolute;
  left: calc(var(--ng-u) * -3);
  top: calc(var(--ng-u) * 8);
  bottom: calc(var(--ng-u) * 8);
  width: 1px;
  background: var(--ng-rule);
}
.np-nav svg {
  width: calc(var(--ng-u) * 19);
  height: calc(var(--ng-u) * 19);
  stroke-width: 1.35;
}
/* The door a person is standing in carries a short green rule beneath its
   name — the marker the approved library and school frames share. The label
   sets a touch darker; nothing else about the door changes, so the four doors
   keep one identical baseline on every screen. */
.np-nav a[aria-current="page"] {
  color: var(--ng-ink);
}
.np-nav a[aria-current="page"] > span {
  font-weight: 500;
}
.np-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--ng-u) * 1.5);
  width: calc(var(--ng-u) * 40);
  height: max(1.5px, calc(var(--ng-u) * 1.2));
  transform: translateX(-50%);
  background: var(--ng-green);
  border-radius: 1px;
  pointer-events: none;
}

/* ---- footer (750u) ------------------------------------------------------- */
.np-footer {
  position: absolute;
  left: calc(var(--ng-u) * var(--ng-pad-x));
  right: calc(var(--ng-u) * var(--ng-pad-x));
  top: calc(var(--ng-u) * 750);
  height: calc(var(--ng-u) * 36);
  text-align: center;
  border-top: 1px solid var(--ng-rule);
}
.np-footer p {
  margin: calc(var(--ng-u) * 3) 0 0;
  font-size: calc(var(--ng-u) * 8.4);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ng-ink-2);
  padding-left: 0.32em;
}
.np-footer .np-footer-sprout {
  display: block;
  margin: 0 auto;
  width: calc(var(--ng-u) * 14);
  height: calc(var(--ng-u) * 12);
  color: #5f6b48;
}
.np-footer .np-legal {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ng-u) * 26);
  line-height: 1;
  font-size: calc(var(--ng-u) * 6.8);
  color: var(--ng-ink-3);
  white-space: nowrap;
  /* Visible, not clipped: the small legal words keep a finger-sized touch
     area that reaches beyond their seven-pixel ink. */
  overflow: visible;
}
.np-footer .np-legal * {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
.np-footer .np-legal a {
  color: inherit;
}

/* ---- touch ---------------------------------------------------------------
   Every link and button answers to a 44 × 44 pt finger without changing its
   drawn size: the touch area is a transparent square centred on the control
   and grows only where the ink is smaller than a fingertip. The bottom
   navigation is already that size and the skip link positions itself. */
.np-root :is(a, button):not(.np-nav a, .np-skip) {
  position: relative;
}
.np-root :is(a, button):not(.np-nav a, .np-skip)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---- a11y utilities ------------------------------------------------------ */
.np-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.np-skip {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 50;
  padding: 6px 10px;
  background: #ece5d6;
  color: var(--ng-ink);
  border-radius: 4px;
  font-size: 14px;
}
.np-skip:focus {
  top: 8px;
}

/* ---- texture off: composition, words and contrast stand on their own ----- */
[data-texture="none"] .np-desk,
[data-texture="none"] .np-sheet,
[data-texture="none"] .np-badge,
[data-texture="none"] .np-fabric,
[data-texture="none"] .np-map-book,
[data-texture="none"] .np-chip {
  background-image: none;
}
[data-texture="none"] .np-sheet {
  -webkit-mask-box-image: none;
  mask-border: none;
  border-radius: 2px;
}
[data-texture="none"] .np-well-shade {
  display: none;
}
/* texture off: the four photographs leave; the page keeps its shape and its
   contrast as one plain sheet, so composition and words stand on their own */
[data-texture="none"] .np-leaf {
  visibility: hidden;
}
[data-texture="none"] .np-folio {
  background: #ece5d6;
  border-radius: 2px;
}
[data-texture="none"] .np-desk::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .np-fabric:active {
    transform: none;
  }
  .np-well:active .np-well-shade {
    transform: translate(calc(var(--ng-u) * 2.4 * var(--ng-lx)), calc(var(--ng-u) * 2.4 * var(--ng-ly)));
    opacity: 1;
  }
}
@media print {
  .np-desk {
    display: none;
  }
}

/* The loaded Cormorant italics are 300/500/600: italic text sets at 500 so it
   reads as ink, never as a washed-out synthetic slant. */
.np-root :is(em, .np-subtitle, .np-motto, .np-note, .np-copy-sub, .np-row-aside, .np-quiet, .np-quote p, .np-fabric-sub, .np-fabric-aside, .np-copy-meta, .np-placement, .np-capture-head em, .np-bench-head em, .np-map-center em, .np-map-sprout-caption, .np-search input, .np-search button, .np-tool, .np-select select, .np-facts dt, .np-record-fields dt, .np-path li small, .np-label em, .np-label a, .np-bench-head a, .np-capture-note, .np-capture-field textarea) {
  font-weight: 500;
}
.np-well > .np-fabric {
  align-self: center;
  margin-right: calc(var(--ng-u) * 8);
  flex: none;
}
.np-check .np-row-art {
  flex: 0 0 auto;
  padding-right: calc(var(--ng-u) * 6);
}
html,body{margin:0;padding:0;background:#2a190f}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}.np-root button,.np-root input,.np-root textarea,.np-root select{font-family:inherit;color:inherit}.np-root button{cursor:pointer}.np-content{padding-block:calc(var(--ng-u)*1)}.np-content[data-scroll=true]{overflow-y:auto;scrollbar-width:none}.np-categories,.np-results{display:flex;flex-direction:column;gap:calc(var(--ng-u)*9)}.np-category-card{--h:62;--ts:13;--ss:10.5;--aw:54;--ah:46;width:100%}.np-category-card[aria-pressed=true] .np-copy-title,.np-category-card[aria-current=page] .np-copy-title{color:#305a46}.np-results .np-result{--h:62;--ts:14;--ss:10.5;width:100%}.np-quiet{line-height:1.4;white-space:normal}.np-text-link{border:0;background:transparent;padding:calc(var(--ng-u)*5);min-height:44px;font:italic 500 calc(var(--ng-u)*11) "Cormorant Garamond",serif;color:var(--ng-ink-2);text-decoration:underline;text-underline-offset:2px}.np-label>.np-text-link{font-size:calc(var(--ng-u)*10.5);letter-spacing:0;text-transform:none}.np-more{align-self:center}.np-auth-panel{display:block}.np-auth-well{--h:355;min-height:calc(var(--ng-u)*355);width:100%}.np-auth-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--ng-u)*6);width:100%;padding:calc(var(--ng-u)*17)}.np-auth-inner h2{margin:0;font-weight:500;font-size:calc(var(--ng-u)*21);line-height:1.02}.np-auth-inner p:not(.np-label){margin:0;font-size:calc(var(--ng-u)*11.5);font-style:italic;line-height:1.25}.np-auth-inner form,.np-detail form{display:flex;flex-direction:column;gap:calc(var(--ng-u)*5)}.np-auth-inner label,.np-detail label{font-size:calc(var(--ng-u)*11);font-style:italic}.np-auth-inner input,.np-detail input,.np-detail textarea,.np-detail select{width:100%;min-height:44px;border:1px solid rgba(50,43,33,.26);background:rgba(255,254,246,.56);border-radius:1px;padding:8px 11px;font-size:16px;outline-offset:2px}.np-auth-submit{background:#3e5945;color:#f8f4e7!important;border:1px solid #2a432f;min-height:46px;padding:10px;font-size:calc(var(--ng-u)*12)}.np-auth-link{background:transparent;border:0;text-decoration:underline;min-height:44px;font-size:calc(var(--ng-u)*12)}.np-detail{display:flex;flex-direction:column;gap:calc(var(--ng-u)*7);font-size:calc(var(--ng-u)*12);line-height:1.35}.np-detail h2{font-weight:500;font-size:calc(var(--ng-u)*25);margin:0;line-height:1.05}.np-detail h3{font-weight:500;font-size:calc(var(--ng-u)*13);margin:calc(var(--ng-u)*6) 0 0}.np-detail p,.np-detail ul{margin:0;overflow-wrap:anywhere}.np-detail-category{font-size:calc(var(--ng-u)*9)}.np-detail-version{font-size:calc(var(--ng-u)*10.5);font-style:italic;color:var(--ng-ink-3)}.np-record-text{padding:calc(var(--ng-u)*12);background:rgba(250,244,228,.72);border-left:2px solid #566549;white-space:pre-wrap;font-size:calc(var(--ng-u)*16);line-height:1.4}.np-attributes{display:flex;flex-direction:column;gap:calc(var(--ng-u)*4)}.np-attributes ul{padding-left:calc(var(--ng-u)*18)}.np-detail summary{cursor:pointer;min-height:44px;font-size:calc(var(--ng-u)*13);text-decoration:underline}.np-detail details{padding-top:calc(var(--ng-u)*5);border-top:1px solid var(--ng-rule)}.np-detail details p{margin:calc(var(--ng-u)*6) 0;font-style:italic}.np-root button:focus-visible,.np-root a:focus-visible,.np-root input:focus-visible,.np-root textarea:focus-visible,.np-root select:focus-visible{outline:2px solid #466d53;outline-offset:3px}
/* Existing login: feedback immediately follows the introduction so iPhone keyboard and clipped paper never hide it. */
.np-auth-inner #login-status{min-height:1.4em;font-size:calc(var(--ng-u)*11.5);line-height:1.3;white-space:normal;color:var(--ng-ink-2)}
.np-auth-inner #login-status.error{color:#793b2f;font-style:normal}
.np-auth-inner .np-auth-submit:disabled{opacity:.86;cursor:progress;background:#3e5945;color:#f8f4e7!important}
.np-auth-inner :is(input,button):focus-visible{outline:2px solid #496e55;outline-offset:2px}

#detail-original,#detail-context,.np-attributes li{white-space:pre-wrap}