/* --- home: field notes / the journal plate ---------------------------------
   Scoped to .jn-* (and .jn itself) so nothing leaks into shop.css or site.css.
   This block replaces a plain three-card row: same column, same order in the
   page, but it now reads as one plate — a header with a drawing, a lead story,
   a ranked side rail and a closing note — because three equal cards under a
   heading looked like a list, not like a section with a point of view.

   Paper: #f2e9d6 — the same sand the manifesto above is printed on, not the
   #f7f1e2 sheet further up. Matching the neighbour is the whole point: the two
   blocks run as one field, the drawing and the cards carry the section breaks,
   and there is no horizontal colour step for the eye to trip over. (The earlier
   version used #f7f1e2, which read as a lighter strip laid on top of the sand.)
   ------------------------------------------------------------------------ */

.jn {
  --jn-ink: #2b3129;
  --jn-muted: #6d7269;
  --jn-paper: #f2e9d6;
  --jn-card: #fdfaf3;
  --jn-sand: #fbf3e0;
  --jn-green: #2f3f2e;
  --jn-orange: #e8753f;
  --jn-line: rgba(48, 60, 44, 0.1);
  position: relative;
  background: var(--jn-paper);
  color: var(--jn-ink);
  /* The sheet above ends in the same sand, so this block opens with a hairline
     instead of a colour step (see .jn__rule). The top padding is the space
     between that line and the manifesto band; the line itself belongs to this
     block, so it sits closer to the words below it than to the plate above. */
  padding: clamp(14px, 1.6vw, 22px) 0 clamp(28px, 3vw, 44px);
}

/* Phones and tablets keep the plain page column. The widening is desktop-only
   and lives in the media query at the bottom, so nothing moves at 900px down. */
.jn__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5vw;
}

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

/* A printed rule, not a border: the manifesto above is printed on exactly this
   sand, so without an edge the two blocks ran together as one 2000px field.
   It is pinned to the section's own top edge and spans the full sheet, so it
   reads as the fold between two chapters rather than a line drawn on a card.
   Absolute rather than in flow so the block's own top padding still measures
   from the rule — that padding is the air under the fold, not above it. */
.jn__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(44, 51, 39, 0.17);
}

.jn__head {
  display: grid;
  /* A share of the column, not a pixel width: the plate is capped at 1440 of
     content now, so a flat 372 left the drawing looking like a stamp on a wide
     screen. 35% keeps the reference's ratio between headline and drawing at
     every width. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 27%);
  /* Start, not end: the drawing is taller than the text block, so aligning
     both to the floor pushed the eyebrow ~70px down into empty sand. The text
     opens the section at the top; only the drawing sits on the floor, right
     above the cards. */
  align-items: start;
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(16px, 1.7vw, 24px);
}

.jn__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jn-muted);
}

.jn__eyebrow i {
  flex: 0 1 46px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.jn__title {
  margin: 12px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  /* 62 at the top, not 68: the rest of the page runs 72 / 64 / 58 / 53, and the
     last section had no business shouting louder than the shop above it. */
  font-size: clamp(33px, 3.9vw, 55px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.jn__title em {
  font-style: italic;
}

.jn__sub {
  margin: 12px 0 0;
  /* 15.5, level with the manifesto's body copy and the section ledes above;
     17 made this the loudest small print on the page. */
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.5;
  color: #4c544a;
}

/* The one flourish in the header: a hand-drawn orange stroke under the opening
   sentence, the same mark the illustration uses for its caption. Inline SVG in
   a data URI so the file still has no external requests. */
.jn__sub-u {
  position: relative;
  display: inline-block;
}

.jn__sub-u::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 2px;
  bottom: -6px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.8C22 1.6 45 1.4 67 3.4c11 1 22 1.4 32 .6' fill='none' stroke='%23e8753f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}

.jn__art {
  display: block;
  width: 100%;
  height: auto;
  align-self: end;
  justify-self: end;
  margin-bottom: -4px;
}

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

/* Twelve columns, so the plate can graduate: the lead story takes eight (two
   thirds), the rail four, and the notes below sit four, three or two across
   depending on how many the archive holds. Six columns could only split the
   note row into halves and thirds — the reason two notes used to be 645px wide
   each and the whole block read as four oversized panels. */
.jn__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 14px);
  margin-top: clamp(16px, 1.7vw, 22px);
}

.jn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 10px 12px;
  border: 1px solid var(--jn-line);
  border-radius: 16px;
  background: var(--jn-card);
}

.jn-card__media,
.jn-hero__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #e8e2d2;
}

.jn-card__media {
  aspect-ratio: 16 / 9;
}

.jn-card__media img,
.jn-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The category sits on the picture in the reference, and it earns its place
   there: it is the first thing a reader sorts by, and it costs no extra line. */
.jn-pill {
  position: absolute;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.95);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #3d4438;
  white-space: nowrap;
}

.jn-pill svg {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--jn-orange);
}

.jn-card__title,
.jn-hero__title {
  margin: 13px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.16;
}

.jn-card__title {
  font-size: clamp(16px, 1.35vw, 19px);
}

.jn-hero__title {
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.12;
}

.jn-card__title a,
.jn-hero__title a {
  display: block;
}

.jn-card__text,
.jn-hero__text {
  margin: 7px 0 0;
  color: var(--jn-muted);
  font-size: 12.2px;
  line-height: 1.5;
  /* Two lines, always. The cells used to stretch to whatever the longest
     teaser needed, which made a row of four cards look like four different
     shapes; the full text still lives on the article page. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.jn-hero__text {
  font-size: clamp(12.8px, 1vw, 14px);
  line-height: 1.55;
  color: #5b625a;
  /* One line more than a note. The lead story sits in a wide cell on desktop
     but a narrow one at 1024, where two lines cut the sentence mid-clause. */
  -webkit-line-clamp: 3;
}

.jn-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
}

.jn-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: #7c8177;
}

.jn-meta svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.jn-meta i {
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.4;
}

/* Round arrow, the one control on a card. It replaces the underlined
   "Read the case file" link: on a card this small a full sentence of link text
   competed with the excerpt for the same two lines. */
.jn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(48, 60, 44, 0.22);
  border-radius: 50%;
  color: #3d4438;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.jn-round svg {
  width: 13px;
  height: 13px;
}

.jn-card:hover .jn-round {
  background: var(--jn-green);
  border-color: var(--jn-green);
  color: #fffdf6;
}

/* ------------------------------------------------------------- lead story */

.jn-card--hero {
  grid-column: span 8;
  flex-direction: row;
  gap: clamp(14px, 1.4vw, 20px);
  padding: 11px;
}

/* The note row. Four notes sit four-up, three sit three-up, two sit two-up —
   the row is always full, so the closing bar never has a hole to its side.
   The crop gets shorter as the cards get narrower: a 16:9 still on a 330px
   cell is 185px of photo for a 20-word teaser, and four of those stacked under
   the lead story was the bulk that made the plate feel oversized. */
.jn__grid[data-notes='1'] .jn-card--note {
  grid-column: span 12;
}

.jn__grid[data-notes='1'] .jn-card__media {
  aspect-ratio: 3 / 1;
}

.jn__grid[data-notes='2'] .jn-card--note {
  grid-column: span 6;
}

.jn__grid[data-notes='3'] .jn-card--note {
  grid-column: span 4;
}

.jn__grid[data-notes='4'] .jn-card--note {
  grid-column: span 3;
}

.jn__grid[data-notes='2'] .jn-card__title {
  font-size: clamp(18px, 1.6vw, 21px);
}

.jn__grid[data-notes='2'] .jn-card__text {
  font-size: 12.8px;
}

.jn__grid[data-notes='2'] .jn-card__media {
  aspect-ratio: auto;
  height: clamp(150px, 13vw, 178px);
}

.jn__grid[data-notes='3'] .jn-card__media {
  aspect-ratio: auto;
  height: clamp(132px, 11.4vw, 158px);
}

.jn__grid[data-notes='4'] .jn-card__media {
  aspect-ratio: auto;
  height: clamp(112px, 9.6vw, 136px);
}

/* Four across, the title has to hold two lines without pushing the meta row
   past the card edge — 19px at 330px wide wrapped to three lines on the
   longest headline. */
.jn__grid[data-notes='4'] .jn-card__title {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.18;
}

.jn__grid[data-notes='4'] .jn-card__text {
  font-size: 11.8px;
  /* Three lines, not two. At 1280 the four cells are 265px wide, and two
     lines cut the teaser mid-word ("the fix has t…"); the third line costs
     15px and every teaser then ends on its own full stop. */
  -webkit-line-clamp: 3;
}

.jn__grid[data-notes='4'] .jn-round {
  width: 26px;
  height: 26px;
}

.jn__grid[data-notes='4'] .jn-round svg {
  width: 12px;
  height: 12px;
}

.jn-hero__media {
  flex: 0 0 40%;
  align-self: stretch;
  min-height: 168px;
}

.jn-hero__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 6px 4px 0;
}

.jn-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
}

.jn-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(48, 60, 44, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.jn-btn svg {
  width: 14px;
  height: 14px;
}

.jn-card--hero:hover .jn-btn {
  background: var(--jn-green);
  border-color: var(--jn-green);
  color: #fffdf6;
}

/* ------------------------------------------------------------ popular rail */

.jn-pop {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: 13px 15px 11px;
  border-radius: 16px;
  background: var(--jn-sand);
}

.jn-pop__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.jn-pop__head svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--jn-orange);
}

.jn-pop__list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.jn-pop__row {
  display: grid;
  grid-template-columns: 14px 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.jn-pop__n {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  color: #8a8f84;
}

.jn-pop__thumb {
  display: block;
  width: 40px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: #efe5cd;
}

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

.jn-pop__txt {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #5f665c;
}

.jn-pop__txt strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--jn-ink);
}

.jn-pop__row:hover .jn-pop__txt strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- closing note */

/* Was a third card in the bottom row. Standing in a cell sized by three
   photograph cards, its three short lines left ~180px of flat green under the
   title — the heaviest block on the page and the emptiest at once. It is now a
   closing bar across the foot of the plate: same dark green, same star, same
   mug, a tenth of the ink, and the three notes above it get a full row. */
/* An index tab, not a bar. The dark green strip that used to close the plate
   was the widest, heaviest block on the page — 1350px of flat colour to say
   "there is more", which made the whole section look like it ended in a
   banner. It is now a dashed rule card on the sand: a star, the label, a
   dotted line running out to a round arrow. Same link, same words, a fraction
   of the ink, and it sits at the density of the notes above it. */
.jn-card--cta {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  padding: 11px clamp(15px, 1.5vw, 20px);
  background: transparent;
  border: 1px dashed rgba(48, 60, 44, 0.32);
  border-radius: 14px;
  color: var(--jn-ink);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.jn-cta__star {
  display: block;
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--jn-orange);
}

.jn-cta__star svg {
  width: 100%;
  height: 100%;
}

.jn-cta__title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Inline here, where the card stacked it on a second line. */
.jn-cta__title em {
  display: inline;
  margin-left: 2px;
  font-style: italic;
  color: var(--jn-orange);
}

/* The dotted run to the arrow. It fills whatever width is left, so the bar
   reads as a line drawn between the label and the way out rather than as a
   button with a lot of empty space in it. */
.jn-cta__rule {
  flex: 1 1 auto;
  min-width: 24px;
  height: 0;
  border-top: 1px dashed rgba(48, 60, 44, 0.26);
}

.jn-cta__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(48, 60, 44, 0.24);
  border-radius: 50%;
  color: #3d4438;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.jn-cta__go svg {
  width: 13px;
  height: 13px;
}

.jn-card--cta:hover {
  background: rgba(253, 250, 243, 0.7);
  border-color: rgba(48, 60, 44, 0.5);
}

.jn-card--cta:hover .jn-cta__go {
  background: var(--jn-green);
  border-color: var(--jn-green);
  color: #fffdf6;
  transform: translateX(3px);
}

/* --- desktop width -------------------------------------------------------
   The same expression .mf__grid uses, on purpose: 1440 of content plus its two
   gutters. The two blocks are printed on the same sand and read as one field,
   so their columns have to line up — a 1240 cap here left the journal inset
   ~100px inside the manifesto and made the "one field" claim look false. It
   also lets the plate fill the screen instead of floating in a wide margin.
   ------------------------------------------------------------------------ */

@media (min-width: 901px) {
  .jn__inner {
    max-width: calc(1440px + 2 * clamp(24px, 3vw, 48px));
    padding: 0 clamp(24px, 3vw, 48px);
  }
}

/* --- narrower ------------------------------------------------------------ */

@media (max-width: 1080px) {
  /* Still a row. Stacking it here made the lead story ~500px tall, which in
     turn stretched the rail beside it into a panel with half its height empty.
     The picture gives up some width instead, and the two stay level. */
  .jn-card--hero {
    grid-column: span 8;
  }

  .jn-hero__media {
    flex-basis: 38%;
    min-height: 150px;
  }

  /* Four across stops fitting once the plate drops under 1080 — a 250px card
     can hold a picture or a headline, not both. It goes to two-up rather than
     three-up, because four notes split three-and-one leaves a lone card beside
     an empty cell, which is the one arrangement worse than a wide card. */
  .jn__grid[data-notes='4'] .jn-card--note {
    grid-column: span 6;
  }

  .jn__grid[data-notes='4'] .jn-card__media {
    height: clamp(138px, 14.6vw, 172px);
  }

  .jn__grid[data-notes='4'] .jn-card__title {
    font-size: clamp(17px, 1.9vw, 20px);
  }

  .jn__grid[data-notes='4'] .jn-card__text {
    font-size: 12.4px;
  }
}

@media (max-width: 860px) {
  .jn__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: every span collapses, including the note row's. */
  .jn-card--hero,
  .jn-pop,
  .jn__grid[data-notes='1'] .jn-card--note,
  .jn__grid[data-notes='2'] .jn-card--note,
  .jn__grid[data-notes='3'] .jn-card--note,
  .jn__grid[data-notes='4'] .jn-card--note {
    grid-column: auto;
  }

  .jn-card--hero {
    flex-direction: column;
  }

  .jn-hero__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* Full width again, so the crop goes back to 16:9 — the short desktop bands
     would read as letterboxed slivers here. */
  .jn__grid[data-notes='1'] .jn-card__media,
  .jn__grid[data-notes='2'] .jn-card__media,
  .jn__grid[data-notes='3'] .jn-card__media,
  .jn__grid[data-notes='4'] .jn-card__media {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .jn__grid[data-notes='2'] .jn-card__title,
  .jn__grid[data-notes='4'] .jn-card__title {
    font-size: clamp(19px, 5.2vw, 24px);
  }

  .jn__art {
    display: none;
  }

  .jn__head {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The tab keeps its single row at every width — one line of type, a dotted
     rule and an arrow. It just tightens, and the label gives up its nowrap so
     a long custom label wraps instead of pushing the arrow off the card. */
  .jn-card--cta {
    padding: 11px 14px;
    gap: 10px;
  }

  .jn-cta__title {
    font-size: clamp(16px, 4.4vw, 20px);
    white-space: normal;
  }

  .jn-cta__go {
    width: 28px;
    height: 28px;
  }
}