/* NeuroKind: the parts Alight does not have (logo panels, swatches, type specimens, banners, pins). Every class nk-.
   Panels are cs-box (the board's own colours, 8 corners); pictures sit in cs-fig frames. The board's 1174-wide figures fit the 1020
   column here, so nothing bleeds. The brand's own type is Satoshi (a font file is still needed for visitors). */
/* this case study's own colours, from its Paper board (his ask, 16 Oct: "just use the color in the paper design"):
   panels #FBFFF7 with a #899B79 edge, the board's own rules, no frame on photos or pins, white words on the ink button */
:root { --butter: #FBFFF7; --butter-edge: #899B79; }
.cs-fig { border-color: transparent; }
.pill { color: #FFFFFF; }

:root { --nk-type: 'Satoshi Variable', 'Satoshi', 'Geist', system-ui, sans-serif; --nk-photo: #EAEEE7; }

/* cover: the butterfly picture with the colour logo beside it (percent sizes, so it follows the picture) */
.cs-cover .nk-cover-logo { position: absolute; left: 6.67%; top: 42.8%; width: 30.8%; max-width: none; height: auto;
  aspect-ratio: 444 / 92; margin: 0; object-fit: contain; }

/* 01: four meta columns, not five */
.cs-meta.nk-meta > div:nth-child(1), .cs-meta.nk-meta > div:nth-child(2) { flex-basis: 220px; }
.cs-meta.nk-meta > div:nth-child(3) { flex-basis: 280px; }
.cs-meta.nk-meta > div:nth-child(4) { flex-basis: 210px; }
.nk-body { display: flex; flex-direction: column; gap: 20px; }

/* panels and stacks */
.nk-stack { display: flex; flex-direction: column; gap: 16px; }
.nk-panel { display: flex; flex-direction: column; gap: 20px; padding: 24px; min-width: 0; }
.nk-panel > .lab { align-self: flex-start; }
.nk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nk-stage { display: flex; align-items: center; justify-content: center; min-width: 0; }
.nk-stage img { display: block; max-width: 100%; height: auto; }

/* pictures that fill a frame */
.cs-fig.nk-photo { background: var(--nk-photo); }
.cs-fig.nk-photo img { aspect-ratio: 1174 / 620; }
.cs-fig.nk-photo.wide img { aspect-ratio: 1174 / 660; }
.cs-fig.nk-photo img.nk-mark { position: absolute; left: 37.8%; top: 30%; width: 24.4%; height: auto; aspect-ratio: 287 / 277;
  object-fit: contain; border-radius: 0; }

/* 02 */
.nk-two .nk-stage { min-height: 340px; }
.nk-lockups { display: grid; grid-template-columns: 340fr 338fr 424fr; gap: 24px; }
.nk-lockup { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nk-lockup .nk-stage { justify-content: flex-start; height: 200px; }
.nk-lockup .note { max-width: 300px; }
.nk-intro { display: flex; align-items: baseline; gap: 32px; }
.nk-intro .lab { flex: 0 0 150px; }
.nk-intro .note { max-width: none; }
.nk-adapt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.nk-adapt img { display: block; width: 100%; height: auto; }

/* 03 */
.nk-palette { display: grid; grid-template-columns: minmax(0, 202px) repeat(4, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
.nk-notes { display: flex; flex-direction: column; gap: 20px; }
.nk-small { font-size: var(--step--1); line-height: 20px; color: var(--body); text-wrap: pretty; }
.nk-sw { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nk-swatch { display: flex; align-items: center; justify-content: center; aspect-ratio: 207 / 296; padding: 12% 8px 0; border-radius: 8px;
  font-family: var(--nk-type); font-size: var(--step-0); font-weight: 700; line-height: 22px; text-align: center; }
.nk-spec { font-size: var(--step--1); line-height: 20px; color: var(--body); white-space: nowrap; }
.nk-spec b { font-weight: 700; }
.nk-spec .k { margin-right: 10px; }
.nk-type-grid { display: grid; grid-template-columns: minmax(0, 202px) minmax(0, 1fr); gap: 50px; }
.nk-type-grid > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.nk-specimens { display: flex; flex-direction: column; gap: 28px; min-width: 0; font-family: var(--nk-type); color: var(--ink); }
.nk-head { display: flex; align-items: flex-end; gap: 44px; }
.nk-aa { font-size: var(--step-6); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.nk-head p { font-family: 'Geist', system-ui, sans-serif; }
.nk-head .t { font-size: var(--step-1); font-weight: 500; line-height: 28px; }
.nk-alpha { font-size: var(--step-1); line-height: 32px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nk-rule { height: 1px; background: #DDE3D6; }
.nk-rows { display: flex; flex-direction: column; gap: 26px; }
.nk-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; align-items: center; }
.nk-row .nk-s { letter-spacing: -0.02em; text-wrap: balance; }
.nk-row .lbl { text-align: right; font-family: 'Geist', system-ui, sans-serif; font-size: var(--step--1); line-height: 20px; color: var(--body); }
.nk-row .lbl .lab { display: block; color: var(--ink); }

/* 04 */
.nk-subhead { display: flex; flex-direction: column; gap: 4px; }
.nk-subhead .lab { color: var(--ink); }
.nk-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nk-icon { display: flex; flex-direction: column; min-width: 0; padding-inline: 12px; }
.nk-icon .nk-stage { height: 344px; }
.nk-icon .line { height: 1px; background: #CBD5BF; }
.nk-icon .info { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; }
.nk-icon .sells { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.nk-icon .sells .lab { color: var(--ink); }
.nk-icon .note { max-width: none; }
.nk-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nk-banners img { display: block; width: 100%; height: auto; }
.nk-banners .cs-fig { background: var(--nk-photo); }
.nk-banners .cs-fig img { aspect-ratio: 578 / 813; object-fit: cover; }

/* 05 */
.nk-top { display: flex; align-items: flex-start; gap: 18px; }
.nk-top .lab { flex: 0 0 auto; }
.nk-top .note { max-width: none; }
.nk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nk-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 549 / 401; background: var(--c); }
.nk-tile.short { aspect-ratio: 549 / 355; }
.nk-tile.low { padding-top: 6%; }
.nk-tile img { display: block; width: var(--w); height: auto; filter: drop-shadow(0 17px 20px rgba(0, 0, 0, 0.25)); }
.nk-tile.plain img { filter: none; }
.nk-tile.soft img { filter: drop-shadow(0 6px 11px rgba(0, 0, 0, 0.25)); }
.nk-tile, .nk-item { border: 1px solid var(--butter-edge); border-radius: 2px; }
.nk-tile { border-color: transparent; }   /* the board's pins have no frame */
.nk-item { position: relative; aspect-ratio: 521 / 422; overflow: hidden; background: var(--c); }
.nk-item img { display: block; }
.nk-item.shirt { display: flex; align-items: center; justify-content: center; }
.nk-item.shirt img { width: 68.5%; height: auto; }
.nk-item.mat img { position: absolute; left: 0; top: -21.1%; width: 100%; height: 137%; object-fit: cover; }

/* narrower: the column, not the window */
@container col (max-width: 1019px) {
  .cs-meta.nk-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container col (max-width: 860px) {
  .nk-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .nk-notes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .nk-type-grid { grid-template-columns: 1fr; gap: 24px; }
  .nk-spec .k { display: inline-block; }
}
@container col (max-width: 760px) {
  .cs-meta.nk-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-two, .nk-banners { grid-template-columns: 1fr; }
  .nk-two .nk-stage { min-height: 240px; }
  .nk-lockups { grid-template-columns: 1fr; gap: 32px; }
  .nk-lockup .nk-stage { height: 180px; }
  .nk-intro, .nk-top { flex-direction: column; gap: 12px; }
  .nk-intro .lab { flex-basis: auto; }
  .nk-icons { grid-template-columns: 1fr; gap: 32px; }
  .nk-icon .nk-stage { height: 300px; }
  .nk-tiles { gap: 12px; }
}
@container col (max-width: 520px) {
  .nk-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-notes { grid-template-columns: 1fr; }
}
@container col (max-width: 640px) {
  .nk-adapt { grid-template-columns: 1fr; gap: 16px; }
  .nk-adapt img { max-width: 320px; margin-inline: auto; }
  .nk-row { grid-template-columns: 1fr; gap: 6px; }
  .nk-row .lbl { text-align: left; }
  .nk-head { gap: 24px; }
  .nk-alpha { font-size: var(--step-0); line-height: 26px; }
  .nk-banners { gap: 12px; }
}
@media (max-width: 640px) {
  .cs-cover .nk-cover-logo { display: none; }
  .nk-panel { padding: 16px; gap: 16px; }
  .nk-icon { padding-inline: 0; }
  .nk-tiles { grid-template-columns: 1fr; }
}

/* no lone last words: long ledes wrap with pretty (balance gives up past six lines), headings and short notes balance */
.cs-head .lede { text-wrap: pretty; }
.cs-head .h2, .nk-icon .note { text-wrap: balance; }
.nw { white-space: nowrap; }

/* ---------- Phone (17 Oct): main.cs-ph follows the phone board, 640 and under; wider screens are unchanged ---------- */
@media (max-width: 640px) {
  /* the section bar's flower: the pansy */
  .cs-bar-ptr.pansy { left: -58px; top: 3px; width: 119px; height: 48px; }
  .cs-bar-list .cs-bar-ptr.pansy { top: 8px; }

  /* cover: a 390 square, with the butterfly mark top left */
  .cs-ph .cs-cover.wide > picture > img { height: 100cqi; aspect-ratio: 1 / 1; }
  .cs-ph .cs-cover .nk-cover-mark { position: absolute; left: 33px; top: 31px; width: 74px; height: 70px; max-width: none;
    margin: 0; object-fit: contain; aspect-ratio: auto; }

  /* spacing: 01 ends 24 above its line; 05 ends 56 above the closing line */
  .cs-ph .cs-col > #logomark { margin-top: -32px; }
  .cs-ph .cs-close { margin-top: 0; }

  /* 01: the meta rows, ending on the section line only */
  .cs-ph .cs-meta.nk-meta > div:nth-child(n) { flex: none; }
  .cs-ph .cs-meta.nk-meta > div:last-child { border-bottom: 0; }

  /* pictures at the board's sizes */
  .cs-ph .nk-stage { height: var(--h); min-height: 0; }
  .cs-ph .nk-two .nk-stage { min-height: 0; }
  .cs-ph .nk-lockup .nk-stage { height: var(--h); }
  .cs-ph .nk-stage > img { width: var(--w); max-width: 100%; height: auto; }
  .cs-ph .nk-lockups { gap: 40px; }
  .cs-ph .nk-adapt { gap: 32px; justify-items: center; }
  .cs-ph .nk-adapt img { width: 256px; max-width: 100%; margin-inline: 0; }
  .cs-ph .cs-fig.nk-photo:not(.wide) img:not(.nk-mark) { aspect-ratio: 1 / 1; }
  .cs-ph .cs-fig.nk-photo img.nk-mark { left: 32.47%; top: 33.05%; width: 35.63%; }
  .cs-ph .cs-fig.nk-photo.inplace img { aspect-ratio: 1050 / 661; }
  .cs-ph .cs-fig.nk-photo.front img { aspect-ratio: 1050 / 1313; }

  /* 03: swatches two by two, 217 tall; the type rows */
  .cs-ph .nk-swatch { padding: 0 8px; aspect-ratio: auto; height: 217px; }
  .cs-ph .nk-head { align-items: center; gap: 24px; }
  .cs-ph .nk-row .lbl .lab { color: var(--body); line-height: 20px; }

  /* 04: 24 of air each side of the icon's line */
  .cs-ph .nk-icon { gap: 24px; }
  .cs-ph .nk-icon .info { padding-top: 0; }
  .cs-ph .nk-banners > img { aspect-ratio: 350 / 494; object-fit: contain; }
  .cs-ph .nk-banners .cs-fig img { aspect-ratio: 348 / 489; object-fit: cover; }

  /* 05: the four pins stack at one ratio, centred */
  .cs-ph .nk-tile, .cs-ph .nk-tile.short { aspect-ratio: 316 / 231; }
  .cs-ph .nk-tile.low { padding-top: 0; }
}