/* The week, as seven cards, and the ranking plate under it.
   Everything here is scoped to .tb-* / .pi-troublesection so the shop styles
   that used to draw this block as a ruled table stay untouched. */

.pi-troublesection,
.tb-rankband {
  --tb-forest: #22392c;
  --tb-ink: #2c2a24;
  --tb-muted: rgba(34, 57, 44, 0.6);
  --tb-hair: rgba(34, 57, 44, 0.14);
  --tb-paper: #fffdf8;
  --tb-orange: #e8753f;
  --tb-honey: #d9a72c;
  --tb-sage: #cbd8c3;
}

/* ------------------------------------------------------------- the sheet
   The board and the ranking plate under it are one block of paper: the board
   supplies the cream, the plate below simply never draws an edge, so the two
   read as one spread instead of "a week on the page, then a cream band".

   The section is deliberately not `.wrap`: it runs the page gutter itself so
   it can sit wider than the shop, and it takes its column from the same
   expression the manifesto and the journal use (`1440 + 2 gutters`, centred by
   max-width). It used to run 5vw, which lined the board up with the ranking
   plate and with nothing else — at 1440 the manifesto started 29px to its
   left, at 2022 it started 190px to its left, and the seam was visible in both
   places. One expression, one column, no seam.
   ------------------------------------------------------------------------ */

.pi-troublesection {
  background: #f7f1e2;
  padding: clamp(56px, 6vw, 88px) 0 clamp(24px, 2.8vw, 36px);
}

.tb-sheet {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* ------------------------------------------------------------ band header */

/* The old header was a small caption over a 30px heading. The board is the
   page's second-biggest statement, so it gets the magazine treatment: a kicker
   with a rule, a large serif line, and the aside set against it. */
.pi-troublesection .section-head {
  align-items: end;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.pi-troublesection .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
}

.pi-troublesection .eyebrow::after {
  content: "";
  width: clamp(28px, 3vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* The band's own title. It is a <p class="tb-title"> rather than an <h2>: the
   home page keeps exactly seven H2s, and this one is a caption on a calendar.
   Every property the tag used to supply is listed here, which is why the
   swapped tag still measures 58px / 1.02 / -0.032em at 1440. */
.pi-troublesection .tb-title {
  margin-top: 10px;
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.1vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: pretty;
}

.pi-troublesection .tb-title em {
  font-style: italic;
}

/* The handwritten underline under "What tends to go wrong, and when." — drawn,
   because a rule would read as a table heading. */
.pi-trouble-note {
  position: relative;
  max-width: 21ch;
  padding-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: right;
  color: var(--tb-muted, rgba(34, 57, 44, 0.6));
}

.pi-trouble-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 8' preserveAspectRatio='none'><path d='M2 6C46 1.6 92 1 132 3.4c30 1.8 56 1.2 86-2' fill='none' stroke='%23d9a72c' stroke-width='2' stroke-linecap='round'/></svg>")
    no-repeat center / 100% 100%;
  opacity: 0.85;
}

/* --------------------------------------------------------------- the week */

.tb-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.tb-day {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 6px;
  background: var(--tb-paper, #fffdf8);
  border: 1px solid var(--tb-hair, rgba(34, 57, 44, 0.14));
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tb-day:hover {
  border-color: rgba(34, 57, 44, 0.26);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -18px rgba(34, 57, 44, 0.5);
}

.tb-day__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 8px;
  border-bottom: 1px solid rgba(34, 57, 44, 0.08);
}

/* Today is the orange tab at the head of the strip: the loudest thing in the
   block, and the only cell whose header carries colour. */
.tb-day.is-today .tb-day__head {
  background: var(--tb-orange);
  color: #fff8ee;
  border-bottom-color: transparent;
}

.tb-day__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--tb-forest, #22392c);
}

.tb-day.is-today .tb-day__chip {
  color: #fff8ee;
}

.tb-day__chip svg {
  display: block;
  width: 15px;
  height: 15px;
}

.tb-day__day {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.tb-day__name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tb-day__num {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.tb-day.is-today .tb-day__num {
  opacity: 0.8;
}

.tb-day__now {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tb-forest, #22392c);
}

.tb-day.is-today .tb-day__now {
  color: #fff8ee;
}

.tb-day__now::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 248, 238, 0.28);
}

.tb-day__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 11px 12px 2px;
  list-style: none;
}

.tb-day__list li {
  position: relative;
  padding-left: 12px;
  font-size: 12.4px;
  line-height: 1.3;
  color: var(--tb-ink, #2c2a24);
}

.tb-day__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--tb-orange);
}

.tb-day__list a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.24s ease;
}

.tb-day__list a:hover {
  background-size: 100% 1px;
}

.tb-day__list small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--tb-muted, rgba(34, 57, 44, 0.6));
}

.tb-day__empty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 13px 13px 4px;
  font-size: 12px;
  color: var(--tb-muted, rgba(34, 57, 44, 0.6));
}

.tb-day__empty svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------- doodles */

.tb-day__art {
  margin: auto 0 0;
  padding: 12px 0 8px;
}

.tb-day__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.tb-art__line {
  fill: none;
  stroke: #3b3a32;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tb-art__solid {
  fill: #f0c060;
}

.tb-art__soft {
  fill: #fbf1d9;
}

/* Seven drawings, seven tints, all inside the cream–mustard–sage range. One
   shared fill made the row read as a set of icons rather than illustrations. */
.tb-art--umbrella .tb-art__soft,
.tb-art--mug .tb-art__soft {
  fill: #f8dcc0;
}

.tb-art--jar .tb-art__soft {
  fill: #f4dda2;
}

.tb-art--coat .tb-art__soft {
  fill: #cfdbc5;
}

.tb-art--drawer .tb-art__soft {
  fill: #ecdfc8;
}

.tb-art--weed .tb-art__soft {
  fill: #dce5c9;
}

.tb-art--search .tb-art__soft {
  fill: #ebe4cd;
}

.tb-art--cable .tb-art__soft {
  fill: #f1e7d0;
}

.tb-art__zing,
.tb-art__drop {
  fill: none;
  stroke: #e8753f;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.tb-art__zing {
  opacity: 0.85;
}

.tb-art__drop {
  fill: #cfe0ea;
  stroke: #6f93a6;
  stroke-width: 1.9;
}

/* Today's card already carries colour in its header; tinting the drawing area
   as well turned the doodle into a panel and made the cell read as two cards. */
.tb-day.is-today .tb-day__art {
  background: none;
}

.tb-week__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--tb-muted, rgba(34, 57, 44, 0.6));
}

.tb-week__foot svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.tb-week__foot b {
  font-weight: 600;
  color: var(--tb-ink, #2c2a24);
}

/* ------------------------------------------------------------ ranking plate */

.tb-rankband {
  position: relative;
  /* The board section above ends in this same paper and owns the sheet's top
     edge, so this block draws no rule and no margin. It still has to name the
     paper itself — sections are siblings, not children, so a transparent band
     here would show the page ground, not the cream above it. */
  margin-top: 0;
  background: #f7f1e2;
}

.tb-rankband__inner {
  /* Top padding only has to keep the cards off the board's footnote — the
     vertical gap between the two blocks is now a within-sheet interval, not a
     page gap, so it stays tight. The bottom padding is shallower still because
     the manifesto below supplies the rest of the space before its own content. */
  padding-block: clamp(30px, 3.4vw, 52px) clamp(24px, 2.6vw, 36px);
  padding-inline: 5vw;
  max-width: 1240px;
  margin: 0 auto;
}

/* Desktop: the column the manifesto and the journal are printed in. Phones and
   tablets keep the plain 5vw gutter they share with every other section. */
@media (min-width: 901px) {
  .tb-sheet,
  .tb-rankband__inner {
    max-width: calc(1440px + 2 * clamp(24px, 3vw, 48px));
    padding-inline: clamp(24px, 3vw, 48px);
  }
}

.tb-rank {
  display: grid;
  grid-template-columns: minmax(0, 372px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(26px, 3.6vw, 58px);
}

/* ------------------------------------------------------------------ intro */

.tb-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(34, 57, 44, 0.66);
}

.tb-kicker__rule {
  flex: 0 0 auto;
  width: clamp(26px, 2.8vw, 44px);
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.tb-rank__title {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #22392c;
}

.tb-rank__title em {
  font-style: italic;
}

.tb-rank__lede {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(34, 57, 44, 0.66);
}

.tb-rank__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 18px;
  padding: 11px 20px;
  border-radius: 999px !important;
  background: #22392c;
  color: #fbf6ea;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.22s ease;
}

.tb-rank__cta:hover {
  background: #2e4d3c;
  transform: translateY(-1px);
}

.tb-rank__cta span {
  transition: transform 0.22s ease;
}

.tb-rank__cta:hover span {
  transform: translateX(3px);
}

.tb-rank__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.tb-rank__art {
  width: 100%;
  margin: auto 0 0;
  padding-top: 16px;
}

.tb-rank__art svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.rk-art__line {
  fill: none;
  stroke: #3b3a32;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rk-art__soft {
  fill: #fbf1d9;
}

.rk-art__skin {
  fill: #f6ddc6;
}

.rk-art__hair {
  fill: #6b4a34;
}

.rk-art__cat {
  fill: #fffaf0;
}

.rk-art__blush {
  fill: #e8a98d;
  opacity: 0.55;
}

.rk-art__zing {
  fill: none;
  stroke: #d9a72c;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ cards */

.tb-rank__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}

.tb-rank__item a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 26px 10px 15px;
  background: var(--tb-paper, #fffdf8);
  border: 1px solid rgba(34, 57, 44, 0.13);
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.tb-rank__item a:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 57, 44, 0.28);
  box-shadow: 0 16px 30px -22px rgba(34, 57, 44, 0.6);
}

.tb-rank__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: #efe4cd;
  border: 1px solid rgba(34, 57, 44, 0.12);
  color: #5a5340;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tb-rank__badge.is-first {
  background: #f0bd52;
  border-color: rgba(150, 104, 20, 0.28);
  color: #4a3508;
}

.tb-rank__badge.is-first svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tb-rank__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tb-rank__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Product shots are cut on white; multiply drops the white into the cream
     card instead of printing a bright rectangle in the middle of it. */
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.tb-rank__item a:hover .tb-rank__thumb img {
  transform: scale(1.04);
}

.tb-rank__glyph {
  font-size: 28px;
  color: #b9b1a0;
}

.tb-rank__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: #22392c;
}

.tb-rank__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  min-height: 16px;
}

.tb-starow {
  display: inline-flex;
  gap: 1.5px;
}

.tb-star {
  width: 11px;
  height: 11px;
  fill: #ded5c2;
}

.tb-star.is-on {
  fill: #e0a83c;
}

.tb-rank__count {
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: rgba(34, 57, 44, 0.55);
}

.tb-rank__tag {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(34, 57, 44, 0.55);
}

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

/* Seven columns at 190px each is unreadable; the strip becomes the swipeable
   week it always wanted to be, starting on today because today is cell one. */
@media (max-width: 1120px) {
  .tb-week {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tb-week::-webkit-scrollbar {
    display: none;
  }

  .tb-day {
    flex: 0 0 186px;
    scroll-snap-align: start;
  }

  .tb-rank {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .tb-rank__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: end;
  }

  .tb-rank__art {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
    width: 190px;
  }

  .tb-rank__list {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .tb-rank__list::-webkit-scrollbar {
    display: none;
  }

  .tb-rank__item {
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .pi-troublesection .section-head {
    display: block;
  }

  .pi-trouble-note {
    margin-top: 14px;
    text-align: left;
    max-width: 26ch;
  }

  .pi-trouble-note::after {
    right: auto;
  }

  .pi-troublesection .tb-title {
    font-size: clamp(30px, 8.6vw, 40px);
  }

  .tb-day {
    flex-basis: 172px;
  }

  .tb-rank__intro {
    display: block;
  }

  .tb-rank__art {
    display: none;
  }

  .tb-rank__list {
    grid-template-columns: repeat(5, minmax(136px, 1fr));
  }

  .tb-rank__lede {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-day,
  .tb-rank__item a,
  .tb-rank__thumb img,
  .tb-rank__cta {
    transition: none;
  }
}