/* ==========================================================================
   /new-problems/ — the weekly board.

   Four colours, and nothing else: cream, moss, mustard, sage. Every grey this
   page needs is moss at a lower opacity rather than a fifth hex value — that is
   what stops a page from drifting into "eleven shades of greige" once a few
   rules have been added over a month.

     --np-cream    surfaces: cards, the folded things
     --np-moss     every line, every word, the dark buttons
     --np-butter   the highlighter: badges, dots, one button
     --np-sage     the tinted blocks: art tiles, the fixes band

   Scoped under .np so the page can borrow the shop's paper and serif without
   inheriting its section rhythm.
   ========================================================================== */

.np {
  --np-cream: #fdfbf4;
  --np-moss: #22392c;
  --np-butter: #f2c14e;
  --np-sage: #e7ebd8;
  --np-line: rgba(34, 57, 44, 0.14);
  --np-body: rgba(34, 57, 44, 0.72);
  --np-mute: rgba(34, 57, 44, 0.5);
  background: var(--pi-paper);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow-x: clip;
}

/* --------------------------------------------------------------- type & bits */

.np-eyebrow {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--np-mute);
}

.np-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.np-btn:hover {
  transform: translateY(-1px);
}

.np-btn span {
  font-size: 13px;
  letter-spacing: 0;
}

.np-btn--moss {
  background: var(--np-moss);
  color: var(--np-cream);
}

.np-btn--moss:hover {
  background: #16301f;
  color: #fff;
}

.np-btn--butter {
  background: var(--np-butter);
  color: var(--np-moss);
}

.np-btn--butter:hover {
  background: #e8b23c;
  color: var(--np-moss);
}

/* A link that is a link: underline on hover only, so a row of them can sit next
   to a heading without turning into a second button. */
.np-link {
  flex: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--np-moss);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.np-link:hover {
  color: var(--np-moss);
  border-bottom-width: 2px;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------- hero */

.np-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(20px, 3.4vw, 54px);
  align-items: end;
  padding-top: clamp(28px, 4.4vw, 52px);
  padding-bottom: clamp(44px, 5vw, 74px);
}

.np-hero__title {
  margin: 0 0 24px;
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--pi-ink);
}

/* The second line carries the scribble, so it has to be a box the SVG can sit
   under without the underline pushing the baseline around. */
.np-hero__title span {
  position: relative;
  display: inline-block;
}

.np-scribble {
  position: absolute;
  left: 1%;
  bottom: -0.08em;
  width: 88%;
  height: 0.14em;
  overflow: visible;
  pointer-events: none;
}

.np-scribble path {
  fill: none;
  stroke: var(--np-butter);
  stroke-width: 7;
  stroke-linecap: round;
}

.np-lede {
  max-width: 26rem;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--np-body);
}

/* The panel is the point: a drawing without a surface reads as decoration,
   and the page has nothing else on the right to hold the 80px headline's weight.
   The sage block also matches the art tiles in the cards below, so the page looks
   built from one palette instead of three separate ideas. */
.np-hero__art {
  padding: clamp(14px, 1.8vw, 26px);
  background: var(--np-sage);
  border-radius: 22px;
}

.np-hero__art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* An uploaded photo sits in the same sage panel as the drawing it replaces.
   Capped at the drawing's own height so a tall portrait cannot push the title
   off the first screen. */
.np-hero__art .np-art-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
}

/* --------------------------------------------------------------- line drawings
   One stroke for the whole page. The drawings are a single vocabulary used at
   five sizes, so the hero and the cards cannot drift apart. */

.np-art__line {
  fill: none;
  stroke: var(--np-moss);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-art__line--thick {
  stroke-width: 5.6;
}

/* Anything that has to hide what is behind it (the drawer front over the lids,
   the jar over its own mouth) needs a fill, not just a stroke. */
.np-art__solid {
  fill: var(--np-cream);
  stroke: var(--np-moss);
  stroke-width: 3.2;
  stroke-linejoin: round;
}

.np-art__dot {
  fill: var(--np-butter);
  stroke: none;
}

.np-art__shelf {
  stroke-width: 3.4;
}

/* ------------------------------------------------------------- section heads */

/* shop.css paints every <header> as the sticky site bar — translucent paper
   plus a blur and a hairline. A section heading is a <header> too, which is how
   a heading inside the sage band ended up sitting on a cream rectangle. */
.np-head {
  background: none;
  border: 0;
  backdrop-filter: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.np-head__text {
  min-width: 0;
}

.np-head h2 {
  margin: 0 0 12px;
  font-size: clamp(31px, 3.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.np-head__lede {
  max-width: 36rem;
  margin: 0;
  font-size: 14px;
  line-height: 1.66;
  color: var(--np-body);
}

/* --------------------------------------------------------------------- board */

.np-board {
  padding-top: clamp(24px, 3.4vw, 44px);
  padding-bottom: clamp(42px, 5vw, 70px);
}

.np-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.np-card {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  background: var(--np-cream);
  border: 1px solid var(--np-line);
  border-radius: 18px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.np-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 57, 44, 0.26);
  box-shadow: 0 16px 34px rgba(34, 57, 44, 0.1);
}

.np-card__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--np-sage);
}

.np-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-doodle {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.np-card__no {
  position: absolute;
  top: 9px;
  left: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--np-mute);
}

/* Over a drawing the sage ground is guaranteed, so a grey number reads fine.
   Over a photo it is not: put the number on its own chip rather than gamble on
   whatever the photographer framed there. */
.np-card__art--photo .np-card__no {
  color: #fff;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: rgba(23, 26, 20, 0.62);
  letter-spacing: 0.1em;
}

.np-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 7px 18px;
}

.np-card__body strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.np-card__body span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--np-body);
}

/* ---------------------------------------------------------------- fixes band */

.np-fixes {
  padding: clamp(38px, 4.6vw, 66px) 0 clamp(32px, 4vw, 54px);
  background: var(--np-sage);
}

/* auto-fit rather than a fixed four: a row whose product was deleted renders
   three cards, and a fixed four-column track would leave a 259px hole on the
   right that reads as a loading failure. Empty tracks collapse. */
.np-fixes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.np-fix {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 16px;
  background: var(--np-cream);
  border: 1px solid rgba(34, 57, 44, 0.09);
  border-radius: 18px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.np-fix:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(34, 57, 44, 0.12);
}

/* One line, not two ends. Pushing the number and the label to opposite edges
   made a 259px card look like a receipt; as a single run they read as a caption
   for the product name below. */
.np-fix__top {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.np-fix__no {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--np-moss);
}

.np-fix__no::after {
  content: '·';
  margin: 0 7px;
  font-weight: 400;
  color: var(--np-mute);
}

.np-fix__solves {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--np-mute);
}

/* Serif here, sans in the card above: the product is the sentence, the problem
   is the label. It also keeps the two bands from reading as the same row twice. */
.np-fix__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.np-fix__line {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--np-body);
}

.np-fix__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--np-line);
  font-size: 13px;
  font-weight: 700;
}

.np-fix__price s {
  margin-right: 5px;
  font-weight: 400;
  color: var(--np-mute);
}

.np-fix__go {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.np-fix:hover .np-fix__go {
  transform: translateX(3px);
}

.np-fix--out {
  opacity: 0.72;
}

/* The one handwriting on the page. Georgia italic at this size reads as a pen
   at arm's length without shipping a script face. */
.np-note {
  position: relative;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-right: 58px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.2;
  text-align: right;
  color: var(--np-moss);
}

.np-note__arrow {
  position: absolute;
  right: 0;
  top: 2px;
  width: 42px;
  height: auto;
  overflow: visible;
}

.np-note__arrow path {
  fill: none;
  stroke: var(--np-moss);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1080px) {
  .np-grid,
  .np-fixes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .np-head {
    align-items: flex-start;
  }
}

@media (max-width: 860px) {
  .np-head {
    flex-direction: column;
    gap: 16px;
  }

  .np-head__lede {
    max-width: none;
  }

  .np-note {
    padding-right: 0;
    text-align: left;
  }

  .np-note__arrow {
    position: static;
    display: inline-block;
    width: 34px;
    margin-left: 8px;
    vertical-align: -4px;
    transform: scaleX(-1) rotate(-8deg);
  }
}

@media (max-width: 760px) {
  .np-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 18px;
  }

  .np-hero__title {
    font-size: clamp(40px, 12vw, 62px);
    margin-bottom: 18px;
  }

  .np-lede {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .np-hero__art {
    order: 2;
  }
}

@media (max-width: 520px) {
  .np-grid,
  .np-fixes__grid {
    gap: 11px;
  }

  .np-card {
    padding: 7px 7px 0;
    border-radius: 14px;
  }

  .np-card__art {
    border-radius: 9px;
  }

  .np-card__no {
    top: 6px;
    left: 8px;
    font-size: 9px;
  }

  .np-card__body {
    padding: 11px 4px 13px;
    gap: 4px;
  }

  .np-card__body strong {
    font-size: 13.5px;
  }

  .np-card__body span {
    font-size: 11.5px;
  }

  .np-fix {
    padding: 14px 14px 13px;
    border-radius: 14px;
  }

  .np-fix__top {
    flex-direction: column;
    gap: 2px;
  }

  .np-fix__no::after {
    content: none;
  }

  .np-fix__solves {
    font-size: 9px;
    line-height: 1.3;
  }

  .np-fix__line {
    font-size: 12px;
  }

  .np-btn {
    padding: 13px 18px;
    font-size: 10px;
  }
}