/* nicefig site mockup, shared styles.
   Follows marketing/brand/VISUAL-DIRECTION-2026-09-16.md. Not production. */

:root {
  /* the fig */
  --skin: #3b2140;
  --skin-deep: #2a1730;
  --bloom: #6d5376;
  --inside: #c9566a;
  --inside-soft: #e7a3a0;
  --honey: #e3a857;
  --flesh: #f5eee2;
  --flesh-deep: #ece2d1;
  --paper: #fbf7f0;
  /* the tree and the place */
  --leaf: #7f9170;
  --leaf-dark: #5f7353;
  --leaf-light: #a7b592;
  --bark: #7d736b;
  --bark-dark: #5a524c;
  --wood: #a98260;
  --wood-dark: #86644a;
  --stone: #6c645e;
  --ink: #2b2226;
  --shade: #5f6c7a;

  --serif: "Fraunces", Georgia, "Iowan Old Style", serif;
  --sans: "Alegreya Sans", "Segoe UI", "Gill Sans", sans-serif;

  /* one steady rhythm: the skeleton is exact */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 112px;
  --measure: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--flesh);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* paper grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 380;
  letter-spacing: -0.01em;
  color: var(--skin);
  margin: 0;
}
h1 { font-size: 64px; line-height: 1.06; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
h2 { font-size: 42px; line-height: 1.12; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 110; }
h3 { font-size: 24px; line-height: 1.25; }
p { margin: 0; }
.muted { color: var(--stone); }
a { color: inherit; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s4); }
section { position: relative; }

/* the hand */
.hand { filter: url(#rough); }
.hand-soft { filter: url(#rough-soft); }

/* buttons: the inside of the fig, used once per view */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--sans); font-weight: 700; font-size: 18px;
  padding: 14px 26px;
  border: 0; cursor: pointer; text-decoration: none;
  color: var(--paper);
  background: var(--inside);
  border-radius: 22px 18px 24px 17px / 19px 24px 17px 22px;
  box-shadow: 0 2px 0 var(--skin-deep);
  transition: transform .4s ease, box-shadow .4s ease;
}
.btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--skin-deep); }
.btn-quiet {
  background: transparent; color: var(--skin); box-shadow: none;
  padding: 14px 4px; font-weight: 500;
}
.btn-quiet:hover { transform: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* nav */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) 0;
}
.lockup { display: flex; align-items: center; gap: 3px; text-decoration: none; }
.lockup svg { width: 38px; height: 44px; }
.wordmark {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--skin);
  letter-spacing: -0.02em;
  line-height: 1;
}
.navlinks { display: flex; gap: var(--s4); align-items: center; font-size: 17px; }
.navlinks a { text-decoration: none; color: var(--stone); }
.navlinks a:hover { color: var(--skin); }

/* Art is allowed past the edge of its section; the page itself does not scroll
   sideways because of it. Replaces the overflow:hidden that used to sit on each
   bleeding section and crop the drawing inside it. */
html { overflow-x: clip; }

/* hero */
.hero { padding: var(--s4) 0 0; }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s4); align-items: center; }
.hero-copy { padding-bottom: var(--s6); }
.hero-copy p { font-size: 22px; margin-top: var(--s3); max-width: 38ch; color: var(--bark-dark); }
.hero-copy .actions { margin-top: var(--s4); display: flex; gap: var(--s3); align-items: center; }
.under { position: relative; white-space: nowrap; }
.under svg { position: absolute; left: -2%; bottom: -12px; width: 104%; height: 18px; overflow: visible; }
.hero-art { position: relative; margin-right: -12vw; }
.hero-art svg { width: 100%; height: auto; display: block; }

/* dappled light */
.dapple { animation: drift 18s ease-in-out infinite alternate; transform-origin: center; }
.dapple.b { animation-duration: 23s; animation-delay: -6s; }
.dapple.c { animation-duration: 29s; animation-delay: -11s; }
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(14px, 6px); }
}
.sway { animation: sway 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }

/* drawn divider */
.rule { display: block; width: 100%; height: 22px; margin: 0; }

/* problem */
.problem { padding: var(--s7) 0 var(--s6); }
.problem-grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--s5); align-items: center; }
.problem-copy p { margin-top: var(--s2); color: var(--bark-dark); max-width: 34ch; }
.scatter { position: relative; height: 440px; }
.scrap {
  position: absolute;
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 280px;
  padding: 12px 16px 14px 12px;
  background: var(--paper);
  font-size: 16px; line-height: 1.4;
  color: var(--bark-dark);
  border-radius: 3px 10px 4px 9px;
  box-shadow: 0 10px 22px -14px rgba(59, 33, 64, .45);
}
.scrap svg { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.scrap small { display: block; font-size: 13px; color: var(--stone); margin-top: 4px; letter-spacing: .02em; }

/* how it works */
.how { padding: var(--s6) 0 var(--s7); }
.how h2 { max-width: 28ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
.step:nth-child(2) { margin-top: var(--s5); }
.step:nth-child(3) { margin-top: calc(var(--s5) * 2); }
.step .art {
  background: var(--flesh-deep);
  border-radius: 46% 54% 50% 50% / 8% 10% 9% 7%;
  padding: var(--s3);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.step .art svg { width: 100%; height: 100%; }
.step h3 { margin-top: var(--s3); }
.step p { margin-top: var(--s1); color: var(--bark-dark); }
.step .num { font-family: var(--serif); font-size: 16px; color: var(--inside); font-variation-settings: "SOFT" 100, "WONK" 1; margin-right: 6px; }
.generic-icon { display: none; }

/* look inside */
.inside { padding: var(--s7) 0; background: var(--skin); color: var(--flesh); }
.inside h2 { color: var(--flesh); }
.inside-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s6); align-items: center; }
.inside .lede { margin-top: var(--s2); color: #d9c9d6; max-width: 44ch; }
.cut { position: relative; margin-left: -8vw; }
.cut svg { width: 100%; height: auto; display: block; }
.proposal {
  background: var(--paper); color: var(--ink);
  padding: var(--s4);
  border-radius: 6px 14px 8px 12px;
  margin-top: var(--s4);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.6);
  position: relative;
}
.proposal .kind { font-size: 14px; color: var(--stone); letter-spacing: .04em; }
.proposal h3 { margin-top: 4px; }
.quote {
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  background: var(--flesh);
  border-radius: 4px 10px 6px 8px;
  font-size: 17px;
  position: relative;
}
.quote::before {
  content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 3px;
  background: var(--inside-soft); border-radius: 3px;
}
.quote cite { display: block; font-style: normal; font-size: 14px; color: var(--stone); margin-top: 6px; }
.why { margin-top: var(--s2); font-size: 17px; color: var(--bark-dark); }
.proposal .row { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.pill {
  display: inline-block; font-size: 14px; padding: 2px 10px;
  border-radius: 12px 10px 12px 9px;
  white-space: nowrap;
  background: #e5e9dd; color: var(--leaf-dark);
}

/* who */
.who { padding: var(--s7) 0; }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s5); }
.person .frame {
  aspect-ratio: 3 / 4;
  border-radius: 8px 22px 10px 18px;
  overflow: hidden;
  background: var(--flesh-deep);
}
.person:nth-child(even) { transform: translateY(var(--s4)); }
.person .frame svg { width: 100%; height: 100%; display: block; }
.person h3 { font-size: 20px; margin-top: var(--s2); }
.person p { font-size: 16px; color: var(--stone); }

/* app peek */
.app { padding: var(--s6) 0 var(--s7); }
.app-grid { display: grid; grid-template-columns: 7fr 4fr; gap: var(--s4); margin-top: var(--s5); align-items: start; }
.window {
  background: var(--paper);
  border-radius: 10px 16px 12px 14px;
  box-shadow: 0 40px 60px -40px rgba(59,33,64,.45), 0 0 0 1px rgba(59,33,64,.06);
  overflow: hidden;
}
.window-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--s3);
  border-bottom: 1px solid var(--flesh-deep);
}
.window-bar .lockup svg { width: 22px; height: 26px; }
.window-bar .wordmark { font-size: 22px; }
.window-bar .tabs { display: flex; gap: var(--s3); font-size: 16px; color: var(--stone); }
.window-bar .tabs b { color: var(--skin); font-weight: 700; }
.count { display: inline-block; min-width: 22px; text-align: center; font-size: 13px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--flesh-deep); color: var(--skin); }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); padding: var(--s3); }
.col h4 { margin: 0 0 var(--s2); font-family: var(--serif); font-weight: 420; font-size: 18px; color: var(--skin); font-variation-settings: "SOFT" 100, "WONK" 1; }
.col h4 span { font-family: var(--sans); font-size: 14px; color: var(--stone); margin-left: 6px; }
.card {
  background: var(--flesh);
  border-radius: 3px 8px 4px 7px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 16px; line-height: 1.35;
}
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--stone); }
.card.new { box-shadow: inset 3px 0 0 var(--inside-soft); }
.card.done { color: var(--stone); }
.card.done .t { text-decoration: line-through; text-decoration-color: rgba(108,100,94,.5); }

.rest {
  background: var(--paper);
  border-radius: 14px 10px 16px 12px;
  box-shadow: 0 40px 60px -40px rgba(59,33,64,.45), 0 0 0 1px rgba(59,33,64,.06);
  padding: var(--s3) var(--s3) var(--s4);
  text-align: center;
}
.rest svg { width: 100%; height: auto; display: block; }
.rest h3 { margin-top: var(--s2); }
.rest p { margin-top: 6px; color: var(--stone); font-size: 17px; }
.caption { margin-top: var(--s2); font-size: 15px; color: var(--stone); }

/* price */
.price { padding: var(--s6) 0 var(--s7); text-align: center; }
.price-card {
  max-width: 560px; margin: var(--s4) auto 0;
  background: var(--paper);
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: 12px 24px 14px 20px;
}
.price-card svg { width: 90px; height: 90px; }
.price-card .big { font-family: var(--serif); font-size: 56px; color: var(--skin); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; line-height: 1; margin-top: var(--s2); }
.price-card p { margin-top: var(--s2); color: var(--bark-dark); }
.price-card .btn { margin-top: var(--s4); }

/* footer */
footer { position: relative; margin-top: var(--s5); }
footer svg.ground { width: 100%; height: auto; display: block; }
.foot {
  background: #d9cbb4;
  padding: 0 0 var(--s5);
  margin-top: -2px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--s4); }
.foot h4 { margin: 0 0 var(--s1); font-family: var(--serif); font-weight: 420; color: var(--skin); font-size: 18px; }
.foot a { display: block; text-decoration: none; color: var(--bark-dark); font-size: 16px; line-height: 1.9; }
.foot .sign { font-family: var(--serif); font-size: 22px; color: var(--skin); font-variation-settings: "SOFT" 100, "WONK" 1; max-width: 22ch; }
.fallen { position: absolute; right: 12%; top: 38px; width: 46px; transform: rotate(38deg); }

/* annotations */
.note {
  display: none;
  position: absolute; z-index: 20;
  max-width: 260px;
  font-family: var(--sans); font-size: 14px; line-height: 1.4;
  background: #fff8c9; color: #4a4220;
  padding: 10px 12px;
  border-radius: 2px;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.35);
  transform: rotate(-1.2deg);
}
.note b { display: block; margin-bottom: 2px; }
body.notes .note { display: block; }

/* the switch */
.switch {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; gap: 4px; padding: 5px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06);
  font-family: var(--sans);
}
.switch button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--stone);
  padding: 8px 14px; border-radius: 999px;
}
.switch button[aria-pressed="true"] { background: var(--skin); color: var(--flesh); }

@media (prefers-reduced-motion: reduce) {
  .dapple, .sway { animation: none; }
}

/* =========================================================
   The lathe: the generated look, for comparison only.
   ========================================================= */
body.lathe {
  --serif: "Inter", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  background: #ffffff;
  color: #0f172a;
}
body.lathe::after { display: none; }
body.lathe .hand, body.lathe .hand-soft { filter: none; }
body.lathe h1, body.lathe h2, body.lathe h3, body.lathe .wordmark, body.lathe .col h4, body.lathe .big, body.lathe .sign {
  font-variation-settings: normal; font-weight: 700; letter-spacing: -0.03em; color: #0f172a;
}
body.lathe .inside h2 { color: #fff; }
body.lathe .btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(99,102,241,.6);
  color: #fff;
}
body.lathe .btn-quiet { background: #fff; color: #0f172a; box-shadow: 0 0 0 1px #e2e8f0; padding: 14px 26px; }
body.lathe .hero { background: radial-gradient(60% 70% at 50% 0%, #ede9fe 0%, #fff 70%); text-align: center; padding-bottom: 96px; }
body.lathe .hero-grid { grid-template-columns: 1fr; }
body.lathe .hero-copy { padding-bottom: 0; }
body.lathe .hero-copy p { margin-left: auto; margin-right: auto; color: #475569; }
body.lathe .hero-copy .actions { justify-content: center; }
body.lathe .hero-art, body.lathe .under svg, body.lathe .rule, body.lathe .scatter, body.lathe .cut,
body.lathe .step .art svg, body.lathe .person .frame svg, body.lathe footer svg.ground, body.lathe .fallen,
body.lathe .price-card svg, body.lathe .rest svg { display: none; }
body.lathe .problem-grid, body.lathe .inside-grid { grid-template-columns: 1fr; text-align: center; }
body.lathe .problem-copy p, body.lathe .inside .lede { margin-left: auto; margin-right: auto; }
body.lathe .how, body.lathe .who, body.lathe .app { text-align: center; }
body.lathe .how h2 { margin: 0 auto; }
body.lathe .step { margin-top: 0 !important; background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px -12px rgba(15,23,42,.12); }
body.lathe .step .art { background: none; padding: 0; aspect-ratio: auto; display: block; }
body.lathe .generic-icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto;
  border-radius: 12px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 22px;
}
body.lathe .step .num { display: none; }
body.lathe .inside { background: #0f172a; }
body.lathe .inside .lede { color: #94a3b8; }
body.lathe .proposal, body.lathe .window, body.lathe .rest, body.lathe .price-card, body.lathe .scrap, body.lathe .quote, body.lathe .card, body.lathe .person .frame {
  border-radius: 16px;
}
body.lathe .proposal { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }
body.lathe .person:nth-child(even) { transform: none; }
body.lathe .person .frame { background: linear-gradient(135deg, #e0e7ff, #f5f3ff); aspect-ratio: 1; }
body.lathe .window, body.lathe .rest { text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 20px 40px -20px rgba(15,23,42,.2); }
body.lathe .rest { text-align: center; }
body.lathe .card { background: #f8fafc; border: 1px solid #e2e8f0; }
body.lathe .price-card { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 20px 40px -20px rgba(15,23,42,.2); background: #fff; }
body.lathe .foot { background: #0f172a; padding-top: 64px; }
body.lathe .foot h4, body.lathe .foot .sign { color: #fff; }
body.lathe .foot a { color: #94a3b8; }
body.lathe .pill { background: #eef2ff; color: #4f46e5; border-radius: 999px; }
body.lathe .quote::before { background: #818cf8; }
body.lathe .card.new { box-shadow: inset 3px 0 0 #818cf8; }

/* =========================================================
   Shared page parts, added for the multi-page mockup
   ========================================================= */
.navlinks a[aria-current="page"] { color: var(--skin); }
.navlinks a[aria-current="page"]::after {
  content: ""; display: block; height: 6px; margin-top: 2px;
  background: no-repeat center / 100% 6px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M2 4 C30 1 60 5 98 2' stroke='%23c9566a' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
}

/* page opening, for every page but home */
.page-hero { padding: var(--s6) 0 var(--s5); position: relative; }
.page-hero .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: end; }
.page-hero h1 { font-size: 56px; max-width: 24ch; }
.page-hero .lede { font-size: 22px; margin-top: var(--s3); max-width: 44ch; color: var(--bark-dark); }
.page-hero .art svg { width: 100%; height: auto; display: block; }

.band { padding: var(--s6) 0; position: relative; }
.band.skin { background: var(--skin); color: var(--flesh); }
.band.skin h2, .band.skin h3 { color: var(--flesh); }
.band.skin p { color: #d9c9d6; }
.band.deep { background: var(--flesh-deep); }
/* The clamp used to sit on the container, so its ch unit resolved against body text
   and a 42px headline was held to roughly 340px: seven words became three lines.
   Each child is clamped at its own size instead. */
.band-head { max-width: none; }
.band-head h2 { max-width: 34ch; }
.band-head p { margin-top: var(--s2); color: var(--bark-dark); max-width: 40ch; }
.band.skin .band-head p { color: #d9c9d6; }

/* a numbered path down the page, art alternating sides */
.path { display: grid; gap: var(--s6); margin-top: var(--s5); }
.stop { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s5); align-items: center; }
.stop:nth-child(even) { grid-template-columns: 6fr 5fr; }
.stop:nth-child(even) .stop-art { order: 2; }
.stop-art {
  background: var(--flesh-deep);
  border-radius: 46% 54% 50% 50% / 8% 10% 9% 7%;
  padding: var(--s4);
}
.stop-art svg { width: 100%; height: auto; display: block; }
.stop .num { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--inside); font-size: 20px; }
.stop h2 { font-size: 36px; margin-top: 4px; }
.stop-copy > p { margin-top: var(--s2); color: var(--bark-dark); max-width: 42ch; }

/* lists with a drawn leaf for a bullet */
.leaflist { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 12px; }
.leaflist li { position: relative; padding-left: 30px; color: var(--bark-dark); }
.leaflist li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%237f9170' d='M50 84 C40 86 29 81 23 75 C13 73 4 66 6 58 C10 52 18 52 26 54 C18 46 9 36 14 25 C21 19 31 26 37 36 C34 24 40 10 50 3 C60 10 66 24 63 36 C69 26 79 19 86 25 C91 36 82 46 74 54 C82 52 90 52 94 58 C96 66 87 73 77 75 C71 81 60 86 50 84 Z'/></svg>");
  transform: rotate(-12deg);
}
.leaflist li b { color: var(--ink); font-weight: 700; }
.band.skin .leaflist li { color: #e6d9e3; }
.band.skin .leaflist li b { color: var(--flesh); }

/* the "to look at" list, in the fig palette */
.review { margin-top: var(--s3); display: grid; gap: 10px; }
.review .item {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  background: var(--paper); padding: 14px 16px;
  border-radius: 4px 10px 6px 9px;
  box-shadow: inset 4px 0 0 var(--k, var(--inside));
  font-size: 16px; line-height: 1.4;
}
.review .tick {
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px 5px 7px 4px;
  background: var(--k, var(--inside));
  display: grid; place-items: center; color: var(--paper); font-size: 13px; font-weight: 700;
}
.review .item small { display: block; color: var(--stone); font-size: 13px; margin-top: 3px; }
.review .k-new { --k: var(--inside); }
.review .k-add { --k: var(--leaf-dark); }
.review .k-change { --k: var(--honey); }
.review .k-rule { --k: var(--bloom); }
.review .foot-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 15px; color: var(--stone); }
.review .foot-row .btn { font-size: 16px; padding: 10px 20px; }

/* tags */
.tag {
  display: inline-block; font-size: 13px; letter-spacing: .02em;
  padding: 2px 10px; border-radius: 10px 12px 9px 12px;
  background: #e5e9dd; color: var(--leaf-dark); white-space: nowrap;
}
.tag.soon { background: #f3e2c6; color: #8a5a1c; }
.tag.later { background: var(--flesh-deep); color: var(--stone); }

/* connection cards */
.conns { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); margin-top: var(--s5); align-items: start; }
.conn {
  grid-column: span 4;
  background: var(--paper);
  padding: var(--s4) var(--s4) var(--s3);
  border-radius: 8px 18px 10px 16px;
  position: relative;
}
.conn.wide { grid-column: span 8; }
.conn.half { grid-column: span 6; }
.conn .icon { width: 64px; height: 64px; margin-bottom: var(--s2); display: block; }
.conn h3 { font-size: 24px; }
.conn .tag { position: absolute; top: var(--s3); right: var(--s3); }
.conn p { margin-top: var(--s1); color: var(--bark-dark); font-size: 17px; }
.conn .leaflist { font-size: 16px; gap: 8px; }
.names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.names span { font-size: 14px; padding: 3px 10px; border-radius: 12px 9px 12px 10px; background: var(--flesh); color: var(--bark-dark); }

/* two columns of plain facts */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); margin-top: var(--s5); }
.facts h3 { font-size: 22px; }
.facts p { margin-top: 6px; color: var(--bark-dark); }
.band.skin .facts p { color: #d9c9d6; }

/* the day */
.day { position: relative; margin-top: var(--s5); }
.day::before {
  content: ""; position: absolute; left: 163px; top: 20px; bottom: 20px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--bark) 0 10px, transparent 10px 18px);
  opacity: .35; border-radius: 2px;
}
.moment { display: grid; grid-template-columns: 120px 56px 1fr 300px; gap: var(--s3); align-items: start; padding: var(--s4) 0; }
.moment time { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 28px; color: var(--skin); text-align: right; line-height: 1.1; }
.moment time small { display: block; font-family: var(--sans); font-size: 14px; color: var(--stone); margin-top: 4px; }
.moment .dot { position: relative; width: 20px; height: 20px; margin: 8px auto 0; border-radius: 50% 45% 55% 48%; background: var(--k, var(--leaf)); box-shadow: 0 0 0 6px var(--flesh); }
.moment h3 { font-size: 26px; }
.moment p { margin-top: 6px; color: var(--bark-dark); max-width: 46ch; }
.moment .sky { border-radius: 10px 20px 12px 18px; overflow: hidden; }
.moment .sky svg { width: 100%; height: auto; display: block; }
.moment.evening .dot { --k: var(--inside); }

/* why a fig */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); margin-top: var(--s5); }
.reason { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); align-items: start; }
.reason:nth-child(even) { transform: translateY(var(--s5)); }
.reason svg { width: 120px; height: 120px; }
.reason h3 { font-size: 26px; }
.reason p { margin-top: var(--s1); color: var(--bark-dark); }
.scripture { max-width: 880px; margin: 0 auto; text-align: center; }
.scripture blockquote {
  margin: 0; font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: 44px; line-height: 1.2; color: var(--flesh);
}
.scripture cite { display: block; margin-top: var(--s3); font-style: normal; color: #d9c9d6; }
.scripture p { margin: var(--s4) auto 0; max-width: 46ch; color: #d9c9d6; }
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s5); }
.seasons figure { margin: 0; text-align: center; }
.seasons svg { width: 100%; height: auto; display: block; }
.seasons figcaption { margin-top: var(--s1); font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--skin); font-size: 20px; }
.seasons figcaption small { display: block; font-family: var(--sans); font-size: 15px; color: var(--stone); }
.maker { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: center; }
.maker .copy p { color: var(--bark-dark); }
.maker .copy p + p { margin-top: var(--s2); }
.maker svg { width: 100%; height: auto; display: block; }

/* never list */
.never { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5); }
.never div { border-top: 2px solid rgba(245, 238, 226, .25); padding-top: var(--s2); }
.never h3 { font-size: 22px; }
.never p { margin-top: 6px; font-size: 17px; }

/* closing call */
.closing { text-align: center; padding: var(--s6) 0 var(--s5); }
.closing h2 { max-width: 30ch; margin: 0 auto; }
.closing p { margin: var(--s2) auto 0; max-width: 40ch; color: var(--bark-dark); }
.closing .btn { margin-top: var(--s4); }

/* the generated look, for the new parts */
body.lathe .drawn, body.lathe .stop-art svg, body.lathe .reason svg, body.lathe .seasons svg,
body.lathe .moment .sky, body.lathe .conn .icon, body.lathe .maker svg,
body.lathe .navlinks a[aria-current="page"]::after { display: none; }
body.lathe .page-hero { background: radial-gradient(60% 80% at 50% 0%, #ede9fe 0%, #fff 70%); text-align: center; }
body.lathe .page-hero .wrap, body.lathe .maker { grid-template-columns: 1fr; }
body.lathe .page-hero h1, body.lathe .page-hero .lede { margin-left: auto; margin-right: auto; }
body.lathe .stop, body.lathe .stop:nth-child(even) { grid-template-columns: 1fr 1fr; }
body.lathe .stop-art { background: linear-gradient(135deg, #e0e7ff, #f5f3ff); border-radius: 16px; min-height: 260px; }
body.lathe .conn, body.lathe .review .item { border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 20px 40px -20px rgba(15,23,42,.2); background: #fff; }
body.lathe .band.skin { background: #0f172a; }
body.lathe .band.deep { background: #f8fafc; }
body.lathe .reason { grid-template-columns: 1fr; transform: none; }
body.lathe .tag, body.lathe .names span { border-radius: 999px; background: #eef2ff; color: #4f46e5; }
body.lathe .leaflist li::before { background: #6366f1; border-radius: 50%; width: 8px; height: 8px; top: 10px; transform: none; }
body.lathe .moment time, body.lathe .scripture blockquote, body.lathe .seasons figcaption, body.lathe .stop .num { font-variation-settings: normal; font-weight: 700; }
body.lathe .day::before { background: #e2e8f0; opacity: 1; }
body.lathe .moment .dot { background: #6366f1; border-radius: 50%; box-shadow: 0 0 0 6px #fff; }
body.lathe .closing, body.lathe .band-head { text-align: center; }
body.lathe .band-head { margin: 0 auto; }
body.lathe .review .tick { border-radius: 6px; background: #6366f1; }
body.lathe .review .item { box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* =========================================================
   Second round: forms, price, the plain text page, help,
   comparisons and the missing page
   ========================================================= */

/* forms */
.form { display: grid; gap: var(--s3); }
.field label { display: block; font-weight: 700; font-size: 16px; color: var(--skin); margin-bottom: 6px; }
.field .hint { display: block; font-size: 14px; color: var(--stone); margin-top: 6px; }
.field input, .field textarea {
  width: 100%;
  font: inherit; font-size: 18px; color: var(--ink);
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid #d8cbb8;
  border-radius: 6px 10px 7px 9px;
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--bloom); box-shadow: 0 0 0 4px rgba(109, 83, 118, .14); }
.form .btn { justify-self: start; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.form-row a { font-size: 16px; color: var(--stone); }
.small-print { font-size: 15px; color: var(--stone); }
.small-print a { color: var(--skin); }

/* a page built around one form */
.formpage { padding: var(--s5) 0 var(--s6); }
.formpage .wrap { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s6); align-items: start; }
.formpage h1 { font-size: 52px; }
.formpage .lede { font-size: 21px; margin-top: var(--s2); color: var(--bark-dark); max-width: 42ch; }
.formpage .card-form {
  background: var(--paper);
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: 10px 22px 12px 18px;
  box-shadow: 0 40px 60px -44px rgba(59, 33, 64, .5);
}
.formpage .art svg { width: 100%; height: auto; display: block; margin-top: var(--s4); }
.after { margin-top: var(--s4); display: grid; gap: var(--s2); }
.after div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.after .n {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--paper); background: var(--leaf-dark);
  border-radius: 48% 52% 45% 55%;
}
.after p { color: var(--bark-dark); }

/* sign in: the tree above one calm form */
.signin { min-height: calc(100vh - 100px); display: grid; place-items: center; padding: var(--s4) 0 var(--s6); }
.signin .box { width: min(440px, 92vw); text-align: center; }
.signin svg { width: 280px; height: auto; display: block; margin: 0 auto; }
.signin h1 { font-size: 40px; margin-top: var(--s2); }
.signin .card-form { text-align: left; margin-top: var(--s3); background: var(--paper); padding: var(--s4); border-radius: 10px 18px 12px 16px; box-shadow: 0 40px 60px -44px rgba(59, 33, 64, .5); }
.signin .below { margin-top: var(--s3); color: var(--stone); font-size: 16px; }
.signin .below a { color: var(--skin); }
.reset { display: none; }
.reset:target { display: block; }
.reset:target ~ .card-form.main { display: none; }

/* price */
.plan {
  display: grid; grid-template-columns: 7fr 5fr; gap: 0;
  background: var(--paper);
  border-radius: 12px 26px 14px 22px;
  overflow: hidden;
  margin-top: var(--s5);
  box-shadow: 0 50px 70px -50px rgba(59, 33, 64, .45);
}
.plan .left { padding: var(--s5); }
.plan .right { padding: var(--s5); background: var(--skin); color: var(--flesh); display: grid; align-content: start; gap: var(--s2); }
.plan .amount { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; font-size: 88px; line-height: .95; color: var(--flesh); }
.plan .amount small { font-family: var(--sans); font-size: 20px; color: #d9c9d6; margin-left: 6px; }
.plan .right p { color: #d9c9d6; }
.plan .right .btn { justify-self: start; margin-top: var(--s2); }
.plan .right .or { font-size: 16px; }
.plan .right .or b { color: var(--flesh); }
.plan h2 { font-size: 34px; }
.plan .leaflist { margin-top: var(--s3); }
.offer {
  margin-top: var(--s4);
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: 10px 16px 12px 14px;
  background: #f3e2c6;
}
.offer svg { width: 120px; height: auto; }
.offer h3 { font-size: 24px; }
.offer p { color: #6d5130; margin-top: 4px; }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); margin-top: var(--s5); }
.qa h3 { font-size: 22px; }
.qa p { margin-top: 6px; color: var(--bark-dark); }

/* the plain text page: no drawings, just words */
.textpage { padding: var(--s5) 0 var(--s6); }
.textpage .wrap { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: start; }
.textpage .toc { position: sticky; top: var(--s4); font-size: 16px; display: grid; gap: 8px; }
.textpage .toc b { font-family: var(--serif); font-weight: 420; color: var(--skin); font-size: 18px; margin-bottom: 4px; }
.textpage .toc a { color: var(--stone); text-decoration: none; }
.textpage .toc a:hover { color: var(--skin); }
.prose { max-width: 68ch; }
.prose h1 { font-size: 48px; }
.prose h2 { font-size: 32px; margin-top: var(--s6); padding-top: var(--s2); }
.prose h3 { font-size: 21px; margin-top: var(--s4); }
.prose p, .prose li { color: var(--bark-dark); }
.prose p { margin-top: var(--s2); }
.prose ul { margin: var(--s2) 0 0; padding-left: 22px; }
.prose li { margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: var(--s3); font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid #e0d4c2; vertical-align: top; color: var(--bark-dark); }
.prose th { color: var(--skin); font-weight: 700; }
.prose .updated { color: var(--stone); font-size: 16px; margin-top: var(--s1); }
.prose .summary { background: var(--paper); padding: var(--s3); border-radius: 6px 12px 8px 10px; margin-top: var(--s3); }
.prose .summary p:first-child { margin-top: 0; }
.prose a { color: var(--skin); }

/* help: getting started */
.day1 { display: grid; gap: var(--s5); margin-top: var(--s5); }
.way { display: grid; grid-template-columns: 88px 1fr 360px; gap: var(--s4); align-items: start; padding-bottom: var(--s5); border-bottom: 1px solid #e3d7c5; }
.way:last-child { border-bottom: 0; }
.way .icon { width: 80px; height: 80px; }
.way .when { font-size: 14px; letter-spacing: .03em; color: var(--inside); font-weight: 700; }
.way h2 { font-size: 34px; margin-top: 2px; }
.way > div > p { margin-top: var(--s1); color: var(--bark-dark); }
.way ol { margin: var(--s2) 0 0; padding-left: 22px; color: var(--bark-dark); }
.way ol li { margin-top: 6px; }
.tip {
  background: var(--paper);
  padding: var(--s3);
  border-radius: 6px 14px 8px 12px;
  font-size: 16px;
  color: var(--bark-dark);
}
.tip b { display: block; font-family: var(--serif); font-weight: 420; font-size: 19px; color: var(--skin); margin-bottom: 6px; }
.tip + .tip { margin-top: var(--s2); }
.kbd {
  display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 0 7px; border-radius: 4px 6px 4px 5px;
  background: var(--flesh-deep); color: var(--skin);
  box-shadow: 0 2px 0 #d3c4ae;
}
.checklist { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: #e6d9e3; }
.checklist li::before {
  content: ""; width: 20px; height: 20px; margin-top: 3px;
  border: 2px solid var(--inside-soft); border-radius: 5px 6px 4px 7px;
}
.checklist b { color: var(--flesh); }

/* comparisons */
.compare-hero .vs { display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--stone); font-size: 18px; margin-bottom: var(--s2); }
.compare-hero .vs b { color: var(--skin); font-weight: 420; }
.checked { display: inline-block; margin-top: var(--s2); font-size: 14px; color: var(--stone); }
.well { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.well div { border-top: 2px solid var(--leaf-light); padding-top: var(--s2); }
.well h3 { font-size: 21px; }
.well p { margin-top: 6px; color: var(--bark-dark); font-size: 17px; }
.ctable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: var(--s4);
  background: var(--paper);
  border-radius: 10px 18px 12px 16px;
  overflow: hidden;
  font-size: 17px;
}
.ctable th, .ctable td { text-align: left; padding: 16px 20px; border-bottom: 1px solid #ece2d3; vertical-align: top; color: var(--bark-dark); }
.ctable tr:last-child td { border-bottom: 0; }
.ctable thead th { font-family: var(--serif); font-weight: 420; font-size: 20px; color: var(--skin); background: var(--flesh-deep); }
.ctable thead th:nth-child(2) { color: var(--inside); }
.ctable td:first-child { font-weight: 700; color: var(--ink); width: 26%; }
.ctable td:nth-child(2) { background: rgba(201, 86, 106, .05); }
.ctable .src { display: block; font-size: 13px; color: var(--stone); margin-top: 4px; }
.example { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.example .col { background: var(--paper); border-radius: 8px 16px 10px 14px; padding: var(--s3); }
.example h3 { font-size: 20px; }
.example .col.ours { box-shadow: inset 0 0 0 2px var(--inside-soft); }
.example .paste { margin-top: var(--s2); padding: 12px 14px; background: var(--flesh); border-radius: 4px 8px 5px 7px; font-size: 16px; }
.example .paste small { display: block; color: var(--stone); font-size: 13px; margin-bottom: 4px; }
.example .result { margin-top: 10px; font-size: 16px; color: var(--bark-dark); }
.example .result b { color: var(--ink); }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.pick > div { padding: var(--s4); border-radius: 10px 18px 12px 16px; background: var(--paper); }
.pick > div.them { background: var(--flesh-deep); }
.pick h3 { font-size: 24px; }
.faq { margin-top: var(--s4); display: grid; gap: var(--s2); max-width: 780px; }
.faq details { background: var(--paper); border-radius: 6px 12px 8px 10px; padding: var(--s2) var(--s3); }
.faq summary { cursor: pointer; font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 20px; color: var(--skin); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 22px; color: var(--inside); }
.faq details[open] summary::before { content: "\2013"; }
.faq details p { margin-top: var(--s1); color: var(--bark-dark); }
.template-note {
  background: #fff8c9; color: #4a4220; font-size: 15px;
  padding: 12px 16px; border-radius: 3px;
  margin-top: var(--s3);
}
.slot { background: #fff1a8; border-radius: 3px; padding: 0 4px; color: #5b4a10; }

/* the comparison index */
.vslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s4); }
.vs-card {
  display: block; text-decoration: none;
  background: var(--paper);
  padding: var(--s4);
  border-radius: 8px 18px 10px 16px;
  position: relative;
  transition: transform .5s ease;
}
a.vs-card:hover { transform: translateY(-2px); }
.vs-card h3 { font-size: 24px; }
.vs-card p { margin-top: 6px; color: var(--bark-dark); font-size: 17px; }
.vs-card .tag { margin-top: var(--s2); }
.vs-card.wide { grid-column: span 3; display: grid; grid-template-columns: 1fr 2fr; gap: var(--s4); align-items: center; background: var(--skin); }
.vs-card.wide h3 { color: var(--flesh); font-size: 32px; }
.vs-card.wide p { color: #d9c9d6; }
div.vs-card { opacity: .78; }

/* the missing page */
.lost { padding: var(--s4) 0 var(--s6); }
.lost .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: center; }
.lost svg { width: 100%; height: auto; display: block; }
.lost .code { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; font-size: 22px; color: var(--inside); }
.lost h1 { font-size: 50px; margin-top: 4px; }
.lost p { margin-top: var(--s2); color: var(--bark-dark); }
.lost .plain { margin-top: var(--s3); padding: var(--s3); background: var(--paper); border-radius: 6px 14px 8px 12px; }
.lost .plain p { margin-top: 0; color: var(--ink); }
.lost .actions { margin-top: var(--s4); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.lost .footnote { margin-top: var(--s4); font-size: 14px; color: var(--stone); border-top: 1px solid #e0d4c2; padding-top: var(--s2); }
.lost .footnote sup { color: var(--inside); }

/* the generated look, for the new parts */
body.lathe .formpage .art svg, body.lathe .signin svg, body.lathe .offer svg, body.lathe .lost svg, body.lathe .way .icon { display: none; }
body.lathe .formpage .card-form, body.lathe .signin .card-form, body.lathe .plan, body.lathe .ctable, body.lathe .example .col, body.lathe .pick > div, body.lathe .faq details, body.lathe .vs-card, body.lathe .tip, body.lathe .prose .summary {
  border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 20px 40px -20px rgba(15,23,42,.2); background: #fff;
}
body.lathe .plan .right, body.lathe .vs-card.wide { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
body.lathe .field input, body.lathe .field textarea { border-radius: 10px; border-color: #e2e8f0; background: #fff; }
body.lathe .offer { background: #eef2ff; border-radius: 16px; grid-template-columns: 1fr; }
body.lathe .after .n { background: #6366f1; border-radius: 50%; }
body.lathe .ctable thead th { background: #f8fafc; }
body.lathe .ctable td:nth-child(2) { background: #f5f3ff; }
body.lathe .formpage .wrap, body.lathe .lost .wrap, body.lathe .way { grid-template-columns: 1fr; }
body.lathe .plan .amount, body.lathe .lost .code { font-variation-settings: normal; font-weight: 800; }

/* keyboard focus, in the brand colours */
.btn:focus-visible { outline: 2px solid var(--bloom); outline-offset: 3px; }
.btn:focus:not(:focus-visible) { outline: none; }

/* =========================================================
   The working board on the home page (demo.js)
   One fixed frame: nothing inside it changes the page's height.
   ========================================================= */
.window.nd {
  --inside-ink: #a8394f;          /* the rose, deep enough for white text (6.24:1) */
  --nd-top: 58px;
  --nd-strip: 62px;
  position: relative;
  height: 640px;
  display: grid;
  grid-template-rows: var(--nd-top) var(--nd-strip) minmax(0, 1fr);
}
#demo-window [hidden] { display: none !important; }

/* the bar at the top */
.nd-top { display: flex; align-items: center; gap: var(--s3); padding: 0 20px; border-bottom: 1px solid var(--flesh-deep); }
.nd-top .lockup svg { width: 22px; height: 26px; }
.nd-top .wordmark { font-size: 22px; }
.nd-tabs { display: flex; gap: 4px; margin-left: auto; }
.nd-tabs button {
  font: inherit; font-size: 16px; color: var(--stone);
  background: none; border: 0; cursor: pointer;
  padding: 6px 10px; border-radius: 6px 8px 6px 7px;
  display: inline-flex; align-items: center; gap: 6px;
}
.nd-tabs button:hover { color: var(--skin); background: var(--flesh); }
.nd-tabs button[aria-selected="true"] { color: var(--skin); font-weight: 700; background: var(--flesh-deep); }
.nd-count {
  display: inline-block; min-width: 22px; padding: 0 6px; text-align: center;
  font-size: 13px; font-weight: 700; line-height: 20px;
  border-radius: 10px; background: var(--flesh-deep); color: var(--stone);
}
.nd-tabs button[aria-selected="true"] .nd-count { background: var(--paper); }
.nd-count.on { background: var(--inside-ink) !important; color: #fff; }
.nd-top-acts { display: flex; gap: 14px; padding-left: 14px; border-left: 1px solid var(--flesh-deep); }

.nd-link {
  font: inherit; font-size: 15px; color: var(--skin);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.nd-link:hover { color: var(--inside-ink); }
.nd-link:disabled { color: #b9ada2; cursor: default; text-decoration: none; }
.nd .btn.nd-btn { font-size: 15px; padding: 8px 16px; background: var(--inside-ink); }
.nd button:focus-visible, .nd input:focus-visible, .nd select:focus-visible, .nd [tabindex]:focus-visible {
  outline: 2px solid var(--bloom); outline-offset: 2px;
}

/* the strip of messages that arrived */
.nd-arrivals {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--flesh);
  border-bottom: 1px solid var(--flesh-deep);
  min-width: 0;
}
.nd-arrivals-label { font-size: 13px; letter-spacing: .03em; color: var(--stone); white-space: nowrap; }
.nd-chips { display: flex; gap: 8px; }
.nd-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: inherit; font-size: 14px; color: var(--bark-dark);
  background: var(--paper); border: 1px solid #e4d8c6; cursor: pointer;
  padding: 6px 12px; border-radius: 16px 14px 16px 13px;
  transition: border-color .2s ease, background .2s ease;
}
.nd-chip:hover { border-color: var(--bloom); }
.nd-chip b { color: var(--ink); }
.nd-chip .nd-via { color: var(--stone); }
.nd-chip .nd-state { color: var(--stone); font-size: 13px; min-width: 50px; text-align: right; }
.nd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--inside); }
.nd-chip.reading .nd-dot { background: var(--leaf); animation: ndPulse 1s ease-in-out infinite; }
.nd-chip.read { background: transparent; }
.nd-chip.read .nd-dot { background: #cfc3b3; }
.nd-chip.read b { color: var(--stone); font-weight: 500; }
@keyframes ndPulse { 50% { opacity: .3; } }
.nd-guide {
  margin-left: auto; font-size: 14px; color: var(--leaf-dark); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* the main area, where each view fills the same space */
.nd-main { position: relative; min-height: 0; overflow: hidden; }

/* the board */
.nd-board { height: 100%; display: grid; grid-template-rows: 48px minmax(0, 1fr); }
.nd-filters { display: flex; gap: 6px; align-items: center; padding: 0 20px; }
.nd-filter {
  font: inherit; font-size: 14px; color: var(--stone);
  background: none; border: 1px solid #e4d8c6; cursor: pointer;
  padding: 3px 12px; border-radius: 13px 11px 13px 10px; white-space: nowrap;
}
.nd-filter:hover { color: var(--skin); border-color: var(--leaf); }
.nd-filter.on { color: var(--leaf-dark); background: #e5e9dd; border-color: #e5e9dd; font-weight: 700; }
.nd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; min-height: 0; }
.nd-col {
  display: flex; flex-direction: column; min-height: 0;
  border-radius: 8px 12px 9px 11px; padding: 10px 8px 8px;
  transition: background .15s ease;
}
.nd-col.nd-over { background: rgba(127, 145, 112, .12); }
.nd-col h4 { margin: 0 4px 10px; font-family: var(--serif); font-weight: 420; font-size: 18px; color: var(--skin); font-variation-settings: "SOFT" 100, "WONK" 1; }
.nd-col h4 span { font-family: var(--sans); font-size: 14px; color: var(--stone); margin-left: 6px; }
.nd-drop { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 4px; scrollbar-width: thin; }
.nd-empty { font-size: 14px; color: #b3a697; text-align: center; padding: 18px 8px; border: 1.5px dashed #e0d4c2; border-radius: 6px 9px 7px 8px; }
.nd-col.nd-at-end .nd-drop { box-shadow: inset 0 -3px 0 var(--leaf); }

.nd-card { cursor: grab; touch-action: none; user-select: none; position: relative; transition: background .25s ease, opacity .2s ease; }
.nd-card:hover { background: #f0e7d9; }
.nd-card .meta { flex-wrap: wrap; }
.nd-card .pill { font: inherit; font-size: 13px; border: 0; cursor: pointer; }
.nd-card .pill:hover { background: #d9e2cc; }
.nd-card.nd-gap-before::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 3px;
  border-radius: 2px; background: var(--leaf);
}
.nd-card.nd-lifted { opacity: .3; }
.nd-card.nd-flash { animation: ndFlash 1.6s ease; }
@keyframes ndFlash { 0% { background: #e3ead8; } 100% { background: var(--flesh); } }
.nd-due { color: var(--inside-ink); font-weight: 700; }
.nd-tag { font-size: 12px; font-weight: 700; }
.nd-tag.news { color: var(--leaf-dark); }
.nd-tag.new { color: var(--inside-ink); }
.nd-ghost {
  position: fixed; left: 0; top: 0; z-index: 80; margin: 0; pointer-events: none;
  background: var(--paper) !important;
  box-shadow: 0 20px 34px -16px rgba(59, 33, 64, .5);
}
body.nd-dragging, body.nd-dragging * { cursor: grabbing !important; user-select: none !important; }

.nd-newfig {
  margin: 6px 4px 0; padding: 10px; width: calc(100% - 8px);
  font: inherit; font-size: 15px; color: var(--stone); text-align: left;
  background: none; border: 1.5px dashed #ddd0bd; border-radius: 6px 9px 7px 8px; cursor: pointer;
}
.nd-newfig:hover { color: var(--skin); border-color: var(--leaf); }
.nd-add { margin: 6px 4px 0; padding: 10px; background: var(--paper); border-radius: 6px 9px 7px 8px; box-shadow: 0 0 0 1px #e4d8c6; display: grid; gap: 8px; }
.nd-add input, .nd-add select, .nd-stepform input, .nd-ask-form input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 8px 10px; background: #fff; border: 1.5px solid #d8cbb8; border-radius: 5px 8px 6px 7px;
}
.nd-add-acts { display: flex; gap: 12px; align-items: center; }

/* To look at */
.nd-look { height: 100%; display: grid; grid-template-rows: 56px minmax(0, 1fr); }
.nd-look-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.nd-look-head p { color: var(--bark-dark); }
.nd-look-head b { color: var(--skin); }
.nd-scroll { overflow-y: auto; padding: 0 20px 20px; display: grid; gap: 10px; align-content: start; }
.nd-sugg {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  background: var(--paper); padding: 14px 16px; border-radius: 6px 12px 8px 10px;
  box-shadow: inset 4px 0 0 var(--k), 0 0 0 1px #ece2d3;
}
.nd-sugg.news { --k: var(--leaf-dark); }
.nd-sugg.new { --k: var(--inside-ink); }
.nd-sugg.rule { --k: var(--bloom); }
.nd-kind { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--k, var(--leaf-dark)); padding: 3px 9px; border-radius: 10px 12px 9px 12px; white-space: nowrap; }
.nd-kind.news { --k: var(--leaf-dark); }
.nd-kind.new { --k: var(--inside-ink); }
.nd-kind.rule { --k: var(--bloom); }
.nd-sugg-body p { font-size: 16px; color: var(--ink); line-height: 1.4; }
.nd-sugg-head { font-size: 14px !important; color: var(--stone) !important; margin-bottom: 2px; }
.nd-inline { font: inherit; color: var(--skin); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nd-sugg blockquote { margin: 8px 0 0; padding: 6px 10px; background: var(--flesh); border-radius: 4px 8px 5px 7px; font-size: 14px; font-style: italic; color: var(--bark-dark); }
.nd-sugg cite { display: block; font-style: normal; font-size: 12px; color: var(--stone); margin-top: 2px; }
.nd-sugg-acts { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.nd-calm { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; padding: 20px; }
.nd-calm svg { width: 56px; height: 62px; }
.nd-calm h3 { font-size: 24px; margin-top: 10px; }
.nd-calm p { max-width: 36ch; margin: 6px 0 14px; color: var(--stone); font-size: 16px; }

/* Ask */
.nd-ask { height: 100%; overflow-y: auto; padding: 18px 20px; }
.nd-ask-form { display: flex; gap: 8px; }
.nd-qs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nd-answer { margin-top: 18px; background: var(--paper); border-radius: 6px 12px 8px 10px; padding: 16px 18px; box-shadow: 0 0 0 1px #ece2d3; }
.nd-answer p { font-size: 16px; color: var(--ink); }
.nd-answer p + p { margin-top: 6px; }
.nd-answer-q { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--skin) !important; font-size: 19px !important; margin-bottom: 8px; }
.nd-srcs { font-size: 13px !important; color: var(--stone) !important; margin-top: 10px !important; border-top: 1px solid var(--flesh-deep); padding-top: 8px; }
.nd-muted { color: var(--stone); font-size: 14px; font-weight: 400; }

/* the panel that opens over the board */
.nd-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--nd-top); z-index: 4;
  background: rgba(245, 238, 226, .7); cursor: pointer;
}
.nd-panel {
  position: absolute; top: var(--nd-top); right: 0; bottom: 0; z-index: 5;
  width: min(410px, 78%);
  padding: 14px 22px 22px;
  background: var(--paper);
  border-left: 1px solid var(--flesh-deep);
  box-shadow: -26px 0 40px -30px rgba(59, 33, 64, .5);
  overflow-y: auto;
  animation: ndSlide .28s ease both;
}
@keyframes ndSlide { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.nd-panel-head { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.nd-back {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--skin);
  background: var(--flesh); border: 0; cursor: pointer;
  padding: 5px 12px 5px 8px; border-radius: 14px 12px 14px 11px;
}
.nd-back:hover { background: var(--flesh-deep); }
.nd-back span { font-size: 20px; line-height: 0; margin-right: 2px; }
.nd-panel .pill { font: inherit; font-size: 13px; border: 0; cursor: pointer; }
.nd-panel h3 { font-size: 24px; margin-top: 12px; line-height: 1.2; }
.nd-due-line { margin-top: 4px; font-size: 15px; color: var(--stone); }
.nd-panel h4 { margin: 18px 0 8px; font-family: var(--serif); font-weight: 420; font-size: 17px; color: var(--skin); font-variation-settings: "SOFT" 100, "WONK" 1; }
.nd-segs { display: flex; margin-top: 14px; background: var(--flesh); border-radius: 8px 10px 8px 9px; padding: 3px; }
.nd-seg { flex: 1; font: inherit; font-size: 14px; color: var(--stone); background: none; border: 0; padding: 7px 4px; border-radius: 6px 8px 6px 7px; cursor: pointer; }
.nd-seg:hover { color: var(--skin); }
.nd-seg.on { background: var(--paper); color: var(--skin); font-weight: 700; box-shadow: 0 1px 3px rgba(59, 33, 64, .12); }
.nd-steps, .nd-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nd-steps label { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.nd-steps input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--leaf-dark); flex: none; }
.nd-steps input:checked + span { color: var(--stone); text-decoration: line-through; text-decoration-color: rgba(108, 100, 94, .5); }
.nd-stepform { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.nd-stepform input { padding: 6px 10px; font-size: 15px; }
.nd-hint { margin-top: 8px; font-size: 14px; color: var(--leaf-dark); }
.nd-notes li { display: grid; gap: 1px; padding-left: 12px; border-left: 2px solid var(--flesh-deep); font-size: 15px; color: var(--bark-dark); }
.nd-notes li:first-child { border-left-color: var(--leaf); }
.nd-notes small { font-size: 12px; color: var(--stone); }
.nd-paper { margin-top: 14px; padding: 14px 16px; background: var(--flesh); border-radius: 4px 10px 6px 8px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.nd-panel > .nd-muted { margin-top: 12px; }
.nd-panel-acts { margin-top: 16px; }

/* the notice, bottom right, one at a time */
.nd-toast {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  max-width: 380px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 10px 14px 10px 12px;
  background: var(--skin); color: var(--flesh); font-size: 15px;
  box-shadow: 0 16px 30px -16px rgba(42, 23, 48, .6);
  animation: ndToast .25s ease both;
}
.nd-toast .nd-link { color: var(--flesh); font-weight: 700; white-space: nowrap; }
.nd-toast .nd-link:hover { color: #fff; }
@keyframes ndToast { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nd-panel, .nd-toast, .nd-card.nd-flash, .nd-chip.reading .nd-dot { animation: none !important; }
}

/* the generated look */
body.lathe .nd-panel, body.lathe .nd-sugg, body.lathe .nd-answer, body.lathe .nd-toast { border-radius: 12px; }
body.lathe .nd-count.on, body.lathe .nd .btn.nd-btn { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
body.lathe .nd-toast { background: #0f172a; }
.rest svg { transition: opacity .5s ease; }
.rest.demo-waiting svg { opacity: .35; }