/* Grainpress — Components. Header, footer, cards, buttons, forms, chips. Implementation: Phase 2. */

/* ----------------------------------------
   Site Header
---------------------------------------- */

.site-header {
  height: var(--header-height);
  background-color: var(--gp-bg);
  border-bottom: 2px solid var(--gp-text);
}

/* CORRECTION PASS: the header frame is the body's frame.
   Outer box and outer inset both come from the shared canvas primitive, so
   above 1440 the header travels with the editorial canvas instead of staying
   in the old 1440 island. The accepted 119/131 asymmetry is preserved as an
   offset *from* the canvas edge rather than from the viewport, which keeps
   the 1px optical inset on the left and the 11px button-border compensation
   on the right at every width. At 1440 this resolves to exactly the accepted
   1440 box with 119/131 padding; below 1440 the max-width never binds
   (1200 + 2x margin is always >= the viewport there), so nothing moves.
   Internal composition -- nav gaps, utility spacing -- is untouched. */
.site-header-inner {
  max-width: calc(var(--canvas-width) + 2 * var(--canvas-margin));
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--canvas-margin) + 11px) 0
    calc(var(--canvas-margin) - 1px);
}

/* Branding */

.site-logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
  color: var(--gp-text);
  text-transform: uppercase;
}

.site-descriptor {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 2.64px;
  color: var(--gp-text);
  text-transform: uppercase;
}

/* Primary navigation */

.primary-nav {
  margin-left: 89px;
}

.primary-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}

.primary-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--gp-text);
  text-decoration: none;
}

.primary-nav a:hover {
  opacity: 0.7;
}

/* Utility links */

.header-utility {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header-zones-link {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--gp-zones);
  text-decoration: none;
  text-transform: uppercase;
}

.header-zones-link:hover {
  opacity: 0.8;
}

.header-search-link,
.header-signin-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--gp-text-muted);
  text-decoration: none;
  text-transform: uppercase;
}

.header-search-link:hover,
.header-signin-link:hover {
  color: var(--gp-text);
}

.header-join-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 38px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--gp-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--gp-text-muted);
  border-radius: 2px;
  background-color: var(--gp-bg);
}

.header-join-link:hover {
  background-color: var(--gp-accent);
  color: var(--gp-bg);
  border-color: var(--gp-accent);
}

/* Account link — logged-in utility action */

.header-account-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--gp-text-muted);
  text-decoration: none;
  text-transform: uppercase;
}

.header-account-link:hover {
  color: var(--gp-text);
}

/* ----------------------------------------
   Dropdown nav
   Issue ▾ and Departments ▾ triggers + menus
---------------------------------------- */

.nav-item--has-dropdown {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--gp-text);
}

.nav-trigger__arrow {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.nav-trigger[aria-expanded="true"] .nav-trigger__arrow {
  transform: rotate(180deg);
}

.nav-trigger:hover {
  opacity: 0.7;
}

.nav-trigger:focus-visible {
  outline: 2px solid var(--gp-text);
  outline-offset: 2px;
  border-radius: 1px;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  background-color: var(--gp-bg);
  border: 1px solid var(--gp-panel);
  border-top: 2px solid var(--gp-text);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  min-width: 196px;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(26, 24, 22, 0.08);
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-trigger[aria-expanded="true"] + .nav-dropdown {
  display: block;
}

.nav-dropdown li {
  display: block;
}

.nav-dropdown a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--gp-text);
  text-decoration: none;
  padding: 10px var(--space-5);
  white-space: nowrap;
  opacity: 1;
}

.nav-dropdown a:hover {
  background-color: var(--gp-panel);
  opacity: 1;
}

.nav-dropdown a:focus-visible {
  outline: 2px solid var(--gp-text);
  outline-offset: -2px;
}

.nav-dropdown__divider-item {
  border-top: 1px solid rgba(26, 24, 22, 0.12);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

/* ----------------------------------------
   Site Footer
---------------------------------------- */

.site-footer {
  min-height: var(--footer-height);
  background-color: var(--gp-bg);
  border-top: 1px solid rgba(26, 24, 22, 0.2);
}

/* CORRECTION PASS: same shared canvas as the header and body, so all three
   outer frames agree above 1440. Resolves to the accepted 120px inset at
   1440 and below. Footer column breakpoints are untouched. */
.site-footer-inner {
  max-width: calc(var(--canvas-width) + 2 * var(--canvas-margin));
  margin: 0 auto;
  padding: 0 var(--canvas-margin);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 148px);
  gap: 76px;
  padding: 70px 0 0 276px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: var(--space-3);
}

.footer-col li:last-child {
  margin-bottom: 0;
}

.footer-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  color: var(--gp-text);
  text-transform: uppercase;
  margin: 0 0 var(--space-5) 0;
}

.footer-col a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--gp-text);
  text-decoration: none;
}

.footer-col a:hover {
  opacity: 0.7;
}

.footer-bottom {
  margin: 57px 0 0 72px;
  padding: 33px 0 107px;
  border-top: 1px solid rgba(26, 24, 22, 0.12);
}

.footer-copyright {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.28px;
  color: rgba(26, 24, 22, 0.6);
  text-transform: uppercase;
  margin: 0;
}

/* ----------------------------------------
   Mobile header and menu
   Approved reference: Navigation System -> Frame 2 — Menu Behavior
   (383:48 closed bar, 383:56 open menu). Type, colour and rhythm are taken
   from that frame and expressed through the existing tokens: the frame's
   #f9f7f4 / #e6e3df / #1a1816 / #6b7057 / #c4a661 are --gp-bg / --gp-panel /
   --gp-text / --gp-text-muted / --gp-zones.

   Transition at 800. Measured: the compressed desktop header keeps a 24px
   logo-to-nav gutter, and its nav-to-utility gap falls below that same 24px
   minimum at 792, reaches 0 at 768 and clips at 680. 800 is the nearest
   coherent width that still holds a real gutter (32px), so the desktop bar
   hands over before it is uncomfortable rather than at collision. The frame's
   separate narrow-desktop Menu state is not reproduced: its "visible primary"
   row is four Department links from the pre-dropdown IA, which the current
   locked navigation cannot populate without inventing which items stay, and
   the accepted 1280 and 1080 steps already carry the desktop down to 792.
---------------------------------------- */

.site-header-mobile {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--page-margin-fluid);
}

.site-header-mobile__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.mobile-search-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.66px;
  color: var(--gp-text-muted);
  text-decoration: none;
}

.mobile-menu-toggle {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.66px;
  color: var(--gp-text);
  text-transform: none;
  background: none;
  border: 0;
  /* 44px minimum target, per the Join hit-area note on the same frame. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-2);
  cursor: pointer;
}

.mobile-menu-toggle__close,
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__open {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__close {
  display: inline;
}

.mobile-menu {
  display: none;
  padding: 0 var(--page-margin-fluid) var(--space-8);
  border-top: 1px solid var(--gp-panel);
}

.mobile-menu__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.96px;
  color: var(--gp-text-muted);
  margin: var(--space-6) 0 var(--space-4) 0;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__list li {
  border-bottom: 1px solid var(--gp-panel);
}

.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 30px;
  color: var(--gp-text);
  text-decoration: none;
  /* 42px pitch in the frame: 30px line plus 12px of vertical padding. */
  padding: var(--space-2) 0 var(--space-3);
}

.mobile-menu__list a:hover {
  opacity: 0.75;
}

.mobile-menu__utility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__utility a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  color: var(--gp-text);
  text-decoration: none;
  padding: var(--space-2) 0;
}

.mobile-menu__utility a:hover {
  opacity: 0.75;
}

@media (max-width: 800px) {
  .site-header {
    height: auto;
  }

  /* Desktop bar off, and out of the tab order with it. */
  .site-header-inner {
    display: none;
  }

  .site-header-mobile {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  /* The 1080 desktop step shrinks the wordmark and drops the descriptor to buy
     nav width. The mobile bar has no nav to compete with, and the frame shows
     both present at its 390 artboard, so they are restored here. */
  .site-header-mobile .site-wordmark {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.8px;
  }

  .site-header-mobile .site-descriptor {
    display: block;
  }
}

/* "Descriptor may hide below 390px; GRAINPRESS remains persistent." — frame
   note on 383:48. Below the 390 artboard the wordmark also steps back down so
   the bar keeps a real gutter beside Search and Close. */
@media (max-width: 389px) {
  .site-header-mobile .site-wordmark {
    font-size: 26px;
    line-height: 28px;
  }

  .site-header-mobile .site-descriptor {
    display: none;
  }
}

/* The panel is [hidden] until the toggle opens it, so it is never focusable
   while closed, and the attribute is the single source of state. */
.mobile-menu[hidden] {
  display: none;
}

/* No scroll lock while the menu is open. The panel is in normal document
   flow and runs past the viewport on a phone — measured bottom ~1376px
   against a 740px viewport — so locking the document made the lower Primary
   and Utility destinations unreachable by wheel or touch. The document stays
   scrollable and the reader scrolls through the whole menu.
   The .mobile-menu-open class existed only to carry this declaration and is
   removed with it. */

/* ----------------------------------------
   Footer — responsive columns
   The locked four-column desktop footer is preserved. .footer-nav has a fixed
   intrinsic width of 820px (4 x 148 + 3 x 76) and never shrinks, so it stops
   fitting the useful content area once the responsive margin leaves less than
   820px: with --page-margin-fluid that is vw ~1032. Four columns therefore
   become two just above that, and two become one where the pair stops holding
   the approved 148px column width comfortably.

   Section order, link order, headings, typography and the 148px column width
   are unchanged; only the track count and the row rhythm change.
---------------------------------------- */

@media (max-width: 1040px) {
  .footer-nav {
    grid-template-columns: repeat(2, 148px);
    /* 76px between stacked rows is the column rhythm, not a vertical one. */
    row-gap: var(--space-7);
  }
}

@media (max-width: 430px) {
  .footer-nav {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
  }

  .footer-bottom {
    width: 100%;
  }
}

/* ----------------------------------------
   Image aspect-ratio wrappers
   Crop container for card and editorial imagery
---------------------------------------- */

.img-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}

.img-wrap--3-2 {
  aspect-ratio: 3 / 2;
}

.img-wrap--4-3 {
  aspect-ratio: 4 / 3;
}

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

/* ----------------------------------------
   Button foundation
   Primary and secondary editorial actions
---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  background: none;
}

.btn--primary {
  background-color: var(--gp-text);
  color: var(--gp-bg);
  border-color: var(--gp-text);
}

.btn--primary:hover {
  opacity: 0.85;
}

.btn--primary:focus-visible {
  outline: 2px solid var(--gp-text);
  outline-offset: 2px;
}

.btn--secondary {
  background-color: transparent;
  color: var(--gp-text);
  border-color: var(--gp-text);
}

.btn--secondary:hover {
  opacity: 0.7;
}

.btn--secondary:focus-visible {
  outline: 2px solid var(--gp-text);
  outline-offset: 2px;
}

/* ----------------------------------------
   Form foundation
   Editorial input, label, and state treatment
---------------------------------------- */

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--gp-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.form-input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--gp-text);
  background-color: var(--gp-bg);
  border: 1px solid var(--gp-rule);
  border-radius: 2px;
  padding: 10px 12px;
  appearance: none;
}

.form-input::placeholder {
  color: var(--gp-text-muted);
  opacity: 1;
}

.form-input:focus {
  outline: none;
  border-color: var(--gp-text);
}

.form-input:disabled {
  background-color: var(--gp-panel);
  color: var(--gp-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Field-level extensions to the Phase 2 form foundation. These are component
   primitives, not Member Photo layout: a field wrapper, the multi-line and
   file controls the foundation did not yet cover, and the hint / error /
   status text that any Grainpress form needs to report its state. Member
   Photo composition lives in templates.css. */

.form-field {
  min-width: 0;
}

.form-label__req,
.form-label__opt {
  margin-left: var(--space-2);
  font-size: 14px;
  letter-spacing: 0.88px;
}

.form-label__req {
  color: var(--gp-accent);
}

.form-label__opt {
  color: var(--gp-text-muted);
  opacity: 0.75;
}

/* Locked value supplied by the system rather than typed — readonly, so it
   still submits. Reads as settled rather than disabled. */
.form-input--locked {
  background-color: var(--gp-panel);
  color: var(--gp-text);
  cursor: default;
}

.form-input--locked:focus {
  border-color: var(--gp-rule);
}

.form-textarea {
  min-height: 140px;
  line-height: 1.6;
  resize: vertical;
}

.form-file {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--gp-text);
  background-color: var(--gp-bg);
  border: 1px dashed var(--gp-rule);
  border-radius: 2px;
  padding: var(--space-4);
}

.form-file::file-selector-button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--gp-bg);
  background-color: var(--gp-text);
  border: 1px solid var(--gp-text);
  border-radius: 2px;
  padding: 10px 16px;
  margin-right: var(--space-4);
  cursor: pointer;
}

.form-file:focus-visible {
  outline: 2px solid var(--gp-text);
  outline-offset: 2px;
}

.form-hint {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--gp-text-muted);
  margin: var(--space-2) 0 0;
}

.form-requirements {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gp-text-muted);
}

.form-requirements li {
  padding-left: var(--space-4);
  position: relative;
}

.form-requirements li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--gp-accent);
}

/* Validation and transport messages. Colour alone never carries the meaning:
   the error sits next to its field and the status region is aria-live. */

.form-field__error,
.form-status {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin: var(--space-2) 0 0;
}

.form-field__error {
  color: #8c2f1d;
}

.form-input[aria-invalid="true"],
.form-file[aria-invalid="true"] {
  border-color: #8c2f1d;
  border-style: solid;
}

.form-status {
  margin: 0;
  color: var(--gp-text-muted);
}

.form-status--error {
  color: #8c2f1d;
}

/* ----------------------------------------
   Chip / filter label
   Compact mono filter or topic chip for cards and section pages
---------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--gp-rule);
  border-radius: 2px;
}

.chip:hover {
  color: var(--gp-text);
  border-color: var(--gp-text);
}

.chip--active {
  color: var(--gp-bg);
  background-color: var(--gp-accent);
  border-color: var(--gp-accent);
}

/* ----------------------------------------
   Feature story card
   Image-led Level 2 editorial card: image, label, headline, deck, metadata
---------------------------------------- */

.card-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.card-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  color: var(--gp-text);
  margin: 0;
  text-decoration: none;
  display: block;
}

.card-feature__title:hover {
  opacity: 0.75;
}

.card-feature__deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--gp-text);
  margin: 0;
}

/* ----------------------------------------
   Sub-feature card
   Standard image-led story card: image, label, headline, date
---------------------------------------- */

.card-sub-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-sub-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-sub-feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--gp-text);
  margin: 0;
  text-decoration: none;
  display: block;
}

.card-sub-feature__title:hover {
  opacity: 0.75;
}

/* ----------------------------------------
   Practice card
   Topic-chip-led practical content card with divider treatment
---------------------------------------- */

.card-practice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(26, 24, 22, 0.15);
}

.card-practice__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--gp-text);
  margin: 0;
  text-decoration: none;
  display: block;
}

.card-practice__title:hover {
  opacity: 0.75;
}

.card-practice__deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--gp-text);
  margin: 0;
}

/* ----------------------------------------
   Selected Work card
   Image-first photographic card with photographer credit and metadata
---------------------------------------- */

.card-selected-work {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-selected-work__image {
  border: 1px solid rgba(26, 24, 22, 0.12);
}

.card-selected-work__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-selected-work__name {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--gp-text);
  text-transform: uppercase;
  margin: 0;
  text-decoration: none;
  display: block;
}

.card-selected-work__name:hover {
  opacity: 0.75;
}

/* ----------------------------------------
   Three-across secondary card
   Headline-only and headline+date variants; left accent rule and tinted surface
---------------------------------------- */

.card-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) 40px;
  background-color: rgba(230, 227, 223, 0.08);
  border-left: 4px solid rgba(107, 112, 87, 0.7);
}

.card-secondary__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.38px;
  color: rgba(26, 24, 22, 0.9);
  margin: 0;
  text-decoration: none;
  display: block;
}

.card-secondary__title:hover {
  opacity: 0.75;
}

.card-secondary__meta {
  margin-top: var(--space-1);
}

/* ----------------------------------------
   News / list row
   Compact editorial list item; left olive rule; compact and expanded variants
---------------------------------------- */

.news-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-5) 40px;
  border-left: 3px solid rgba(107, 112, 87, 0.6);
}

.news-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.36px;
  color: rgba(26, 24, 22, 0.9);
  margin: 0;
  text-decoration: none;
  display: block;
}

.news-row__title:hover {
  opacity: 0.75;
}

.news-row__deck {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(26, 24, 22, 0.8);
  margin: 0;
  display: none;
}

.news-row--expanded .news-row__deck {
  display: block;
}

/* ----------------------------------------
   Compact review / list item
   Headline, date/metadata, bottom rule
---------------------------------------- */

.review-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(26, 24, 22, 0.12);
}

.review-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gp-text);
  margin: 0;
  text-decoration: none;
  display: block;
}

.review-item__title:hover {
  opacity: 0.75;
}

/* ----------------------------------------
   Ecosystem / utility module card
   Left accent rule, tinted surface, display heading, body copy
   .module-card--zones applies the Zones ochre accent
---------------------------------------- */

.module-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-6) 44px;
  background-color: rgba(230, 227, 223, 0.15);
  border-left: 4px solid var(--gp-accent);
}

.module-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--gp-accent);
  text-transform: uppercase;
  margin: 0;
  text-decoration: none;
  display: block;
}

.module-card__title:hover {
  opacity: 0.75;
}

.module-card__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--gp-text);
  margin: 0;
}

.module-card__action {
  margin-top: var(--space-2);
}

.module-card--zones {
  border-left-color: var(--gp-zones);
}

.module-card--zones .module-card__title {
  color: var(--gp-zones);
}

.module-card--zones .module-card__label {
  color: var(--gp-zones);
}

/* ----------------------------------------
   Header — tablet responsive
   1280px: trim outer padding and nav gaps
   1080px: scale down to fit single-line on 1024px iPad landscape
---------------------------------------- */

@media (max-width: 1280px) {
  .site-header-inner {
    padding: 0 48px;
  }
  .primary-nav {
    margin-left: 48px;
  }
  .primary-nav > ul {
    gap: 20px;
  }
  .site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-nav {
    padding: 70px 0 0;
  }
  .footer-bottom {
    margin: 57px 0 0;
  }
}

@media (max-width: 1080px) {
  .site-header-inner {
    padding: 0 var(--space-5);
  }
  .site-wordmark {
    font-size: 26px;
    line-height: 28px;
  }
  .site-descriptor {
    display: none;
  }
  .primary-nav {
    margin-left: var(--space-5);
  }
  .primary-nav > ul {
    gap: 14px;
  }
  .primary-nav a,
  .nav-trigger {
    font-size: 13px;
    line-height: 1;
  }
  .header-utility {
    gap: 14px;
  }
  .header-signin-link {
    display: none;
  }
}

/* ——————————————————————————————————————
   IMAGE LIGHTBOX
   Full-size viewer for article images. The surround is dark in both themes:
   a photograph is judged against a neutral ground, and the paper background
   would tint every print shown on it.
—————————————————————————————————————— */

.gp-zoomable {
  cursor: zoom-in;
}

.gp-zoomable:focus-visible {
  outline: 2px solid var(--gp-zones);
  outline-offset: 3px;
}

.gp-lightbox {
  /* The dialog is the viewport, so the frame inside it can be measured
     against the real space available rather than against the page. Position
     and margin are set rather than inherited from the user agent, which
     centres a dialog on its own margins and would leave the controls
     positioned against a box that is not the screen. */
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: #0b0a09;
  color: #e8e6e3;
  overflow: hidden;
}

.gp-lightbox::backdrop {
  background: #0b0a09;
}

.gp-lightbox__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-7) var(--space-8);
  box-sizing: border-box;
}

.gp-lightbox__image {
  display: block;
  /* min-height:0 keeps the flex item shrinkable, so a tall photograph is
     bounded by the frame instead of pushing the caption off the screen. */
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}

.gp-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  max-width: 790px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(232, 230, 227, 0.72);
}

/* Carries the frame's description, caption and position to a screen reader on
   every change. Never shown, never a layout participant. */
.gp-lightbox__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gp-lightbox__count {
  color: rgba(232, 230, 227, 0.45);
  font-variant-numeric: tabular-nums;
}

.gp-lightbox__close,
.gp-lightbox__step {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(232, 230, 227, 0.08);
  color: #e8e6e3;
  font-family: var(--font-display);
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease;
}

.gp-lightbox__close:hover,
.gp-lightbox__step:hover {
  background: rgba(232, 230, 227, 0.18);
}

.gp-lightbox__close:focus-visible,
.gp-lightbox__step:focus-visible {
  outline: 2px solid var(--gp-zones);
  outline-offset: 3px;
}

.gp-lightbox__close {
  top: var(--space-5);
  right: var(--space-5);
  font-size: 28px;
}

.gp-lightbox__step {
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
}

.gp-lightbox__step--prev {
  left: var(--space-5);
}

.gp-lightbox__step--next {
  right: var(--space-5);
}

.gp-lightbox__close[hidden],
.gp-lightbox__step[hidden],
.gp-lightbox__caption[hidden] {
  display: none;
}

@media (max-width: 1080px) {
  .gp-lightbox__frame {
    padding: var(--space-8) var(--space-4) var(--space-5);
  }
  .gp-lightbox__step {
    top: auto;
    bottom: var(--space-5);
    transform: none;
  }
  .gp-lightbox__step--prev {
    left: var(--space-4);
  }
  .gp-lightbox__step--next {
    right: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-lightbox__close,
  .gp-lightbox__step {
    transition: none;
  }
}