/* ==========================================================================
   Newsletter  —  /page/newsletter/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the two pills and the show/hide
   of the panels.

   COVERS, NOT ROWS. The Archives tab is a grid of front pages, one
   department at a time - see the note in the template.

   WHITE CARDS, NOT A WALL OF NAVY. Every level of this page used to be the
   same solid dark bar - department, year and month alike, deliberately, so
   that one set of rules covered all three. On the page that meant opening a
   department gave you more of exactly what you had just clicked, with no
   hierarchy to read; and twenty of them made this the only page on the site
   built from dark blocks, while every other one is paper cards on a light
   ground. The department is a card now and the year inside it is a quiet
   label, so the nesting reads.
   ========================================================================== */

.nl-section { background: var(--page); }

.nl-intro {
  max-width: 72ch;
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}

/* Quiet, dashed, and it says how the page fills: this is a statement about
   what has been published, not a fault. */
.nl-empty {
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--page-alt);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* ==========================================================================
   At a Glance  —  the words on the left, the current issue on the right
   --------------------------------------------------------------------------
   The intro caps at a reading measure, which on a wide screen left the right
   half of this tab empty. The current issue goes there instead.
   ========================================================================== */
.nl-glance { display: grid; gap: 26px; align-items: start; }

@media (min-width: 900px) {
  /* minmax(0, ...) on both, or a long word in either column pushes the grid
     wider instead of wrapping inside it. */
  .nl-glance { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 38px; }
  /* The column is the measure here, and it is already narrower than 72ch. */
  .nl-glance .nl-intro { max-width: none; }
  /* Capped and pushed right, the way the NSS slider is: an even split makes
     the card taller than the words beside it. */
  .nl-glance .nl-featured { max-width: 420px; margin-left: auto; margin-top: 0; }
  /* Stacked in a narrow column rather than cover-beside-text. */
  .nl-glance .nl-featured { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   The current issue
   --------------------------------------------------------------------------
   The cover is page one of the PDF, rendered on upload. Portrait, because a
   newsletter is, and fixed so a tall page cannot run away with the band.
   ========================================================================== */
.nl-featured {
  display: grid;
  gap: 24px;
  align-items: start;
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--accent);
}
@media (min-width: 700px) {
  .nl-featured { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; }
}
.nl-featured__cover {
  /* The page shown whole in a fixed frame, like the Archives covers - see
     .nl-card__frame. It was cropped to an A4 portrait from the top, which
     on Agriculture's landscape spreads showed the middle column of text
     rather than the cover. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f4f1ea, #ebe6db);
}
.nl-featured__cover img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .16);
  background: #fff;
}
.nl-featured__eyebrow {
  margin: 0 0 8px;
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nl-featured__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}
.nl-featured__meta {
  margin: 6px 0 20px;
  color: var(--muted);
  font-size: .9rem;
}
.nl-featured__meta i { margin: 0 6px; font-style: normal; opacity: .6; }
.nl-featured__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent-deep);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.nl-featured__link svg { fill: currentColor; }
.nl-featured__link:hover { background: var(--brand); color: #fff; }
.nl-featured__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Also recent  —  the five behind the current issue
   ========================================================================== */
.nl-latest__head {
  margin: 34px 0 14px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}
.nl-latest {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  overflow: hidden;              /* so the first and last rows take the corners */
}
.nl-issue {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.nl-issue:last-child { border-bottom: 0; }
.nl-issue__body { display: block; }
.nl-issue__title {
  display: block;
  color: var(--ink);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.4;
}
.nl-issue__meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .84rem;
}
.nl-issue__meta i { margin: 0 5px; font-style: normal; opacity: .6; }
.nl-issue__link {
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  background: rgb(var(--accent-rgb) / 14%);
  color: var(--accent-deep);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nl-issue__link:hover { background: var(--accent-deep); color: #fff; }
.nl-issue__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Archives  —  choose a department, then a grid of covers a year at a time
   ========================================================================== */

/* ---- the department picker ----------------------------------------------
   A dropdown, because there are up to thirty departments. Styled as a pill
   field so it belongs to the page, but the <select> underneath is left
   native: on a phone that is what opens the system's own list, and a custom
   listbox would have to rebuild keyboard, screen-reader and touch handling
   the browser already gets right. */
.nl-picker[hidden] { display: none; }
.nl-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
}
.nl-picker__label {
  color: var(--accent-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nl-picker__field {
  position: relative;
  flex: 1 1 340px;
  max-width: 520px;
}
.nl-picker__select {
  width: 100%;
  padding: 11px 44px 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition);
}
.nl-picker__select:hover { border-color: var(--accent); }
.nl-picker__select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The caret the native one was replaced with, and not in the way of a click:
   pointer-events off, so it opens the list like the rest of the field. */
.nl-picker__field svg {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 12px; height: 8px;
  margin-top: -4px;
  fill: var(--accent-deep);
  pointer-events: none;
}
.nl-picker__note {
  margin-left: auto;
  color: var(--muted);
  font-size: .84rem;
  white-space: nowrap;
}
.nl-picker__note i { margin: 0 5px; font-style: normal; opacity: .6; }

/* ---- one department ----------------------------------------------------- */
/* An author display beats the browser's [hidden] rule whatever the
   specificity, so a hidden panel has to be told again or it stays drawn. */
.nl-dept[hidden] { display: none; }
.nl-dept + .nl-dept { margin-top: 40px; }

/* With the dropdown working it already names the department, so its
   heading is kept for screen readers and dropped from view. Without the
   script every department is shown and the heading is what separates them. */
.nl-dept__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
}
.nl-dept__count { margin-left: 8px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.nl-js .nl-dept__title {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- a year ------------------------------------------------------------- */
.nl-yeargroup + .nl-yeargroup { margin-top: 34px; }
.nl-yeargroup__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--accent-deep);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
}
/* A hairline running out from the year, so each year reads as a shelf. */
.nl-yeargroup__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ---- the covers --------------------------------------------------------- */
.nl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.nl-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* THE PAGE IS SHOWN WHOLE. A fixed frame, and the first page sitting inside
   it at its own shape - a portrait page tall in the middle, a landscape
   spread across the width - on a faint desk tint with a shadow under the
   sheet. object-fit could not do this: "cover" crops one department's
   layout to article text, and "contain" puts the shadow round the empty
   frame rather than the paper. */
.nl-card__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 14px;
  background: linear-gradient(180deg, #f4f1ea, #ebe6db);
}
.nl-card__frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 14px rgba(0, 0, 0, .14);
  background: #fff;
}
.nl-card__blank { fill: var(--accent-deep); opacity: .5; }

/* A department that publishes landscape spreads gets wider, shorter cards,
   so a spread fills its frame instead of floating small in the middle of
   it. The view decides the shape from the department's newest cover. */
.nl-cards--wide { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.nl-cards--wide .nl-card__frame { height: 200px; padding: 12px; }

.nl-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 14px;
}
.nl-card__title {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.35;
}
.nl-card__when { color: var(--muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .nl-card, .nl-picker__select { transition: none; }
  .nl-card:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .nl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  /* Two spreads side by side on a phone are each smaller than a stamp. */
  .nl-cards--wide { grid-template-columns: minmax(0, 1fr); }
  .nl-cards--wide .nl-card__frame { height: 210px; }
  .nl-card__frame { height: 160px; padding: 10px; }
  .nl-card__body { padding: 10px 11px 12px; }
  .nl-card__title { font-size: .85rem; }
  .nl-picker__note { margin-left: 0; }
}