.gear-page {
    background: #fff8f2;
  }

  .gear-hero {
    background: #1d1a16;
    color: #fffdf8;
    overflow: hidden;
  }

  .gear-hero__grid {
    display: grid;
    min-height: min(46rem, calc(100svh - 4rem));
  }

  .gear-hero__montage {
    background: #f3e3d4;
    min-height: 28rem;
    overflow: hidden;
    position: relative;
  }

  .gear-hero__tile {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: absolute;
  }

  .gear-hero__tile img {
    height: 100%;
    object-fit: contain;
    padding: clamp(1.3rem, 4vw, 3.5rem);
    width: 100%;
  }

  .gear-hero__tile--primary {
    background: #eadfce;
    inset: 0 38% 0 0;
  }

  .gear-hero__tile--secondary {
    background: #9f4a25;
    inset: 0 0 51% 63%;
  }

  .gear-hero__tile--tertiary {
    background: #f7f2e8;
    inset: 50% 0 0 63%;
  }

  .gear-hero__tile--empty {
    box-sizing: border-box;
    color: #1d1a16;
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-style: italic;
    line-height: 0.9;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 1rem;
    text-align: center;
  }

  .gear-hero__tile--secondary .gear-hero__tile--empty {
    color: #fffdf8;
    font-size: clamp(2rem, 5vw, 4rem);
  }

  .gear-hero__tile--tertiary .gear-hero__tile--empty {
    font-size: clamp(2rem, 5vw, 4rem);
  }

  .gear-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 5rem);
    position: relative;
  }

  .gear-hero__topline {
    align-items: center;
    display: flex;
    font-size: 0.65rem;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .gear-hero__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3.7rem, 8.2vw, 7.6rem);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.79;
    margin-top: clamp(4rem, 12vw, 8rem);
    max-width: 7.6ch;
  }

  .gear-hero__title em {
    display: block;
    font-weight: 400;
    margin-left: 0.7em;
  }

  .gear-hero__deck {
    border-top: 1px solid rgba(255, 253, 248, 0.32);
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(3rem, 7vw, 6rem);
    padding-top: 1.15rem;
  }

  .gear-hero__deck p:first-child {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-style: italic;
    line-height: 1.45;
  }

  .gear-hero__issue {
    color: rgba(255, 253, 248, 0.66);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
  }

  .gear-hero__seal {
    align-items: center;
    background: #f2c15f;
    border-radius: 50%;
    bottom: 1.5rem;
    color: #1d1a16;
    display: flex;
    flex-direction: column;
    font-size: 0.58rem;
    font-weight: 700;
    height: 7.4rem;
    justify-content: center;
    left: 1.5rem;
    letter-spacing: 0.15em;
    line-height: 1.35;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-8deg);
    width: 7.4rem;
    z-index: 2;
  }

  .gear-hero__seal strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .gear-hero__seal time {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .gear-results {
    padding-bottom: clamp(5rem, 10vw, 9rem);
    padding-top: clamp(4rem, 9vw, 8rem);
  }

  .gear-section-heading {
    align-items: end;
    border-top: 1px solid #1d1a16;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding-top: 0.9rem;
  }

  .gear-section-heading__index {
    align-items: center;
    display: flex;
    font-size: 0.64rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .gear-section-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.92;
  }

  .gear-section-heading__intro {
    color: #5a5148;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.55;
    max-width: 34rem;
  }

  .gear-mobile-browse-cue {
    display: none;
  }

  .gear-card__position {
    display: none;
  }

  .gear-card__mobile-actions {
    display: none;
  }

  .gear-spotlight {
    display: grid;
    margin-top: clamp(2rem, 5vw, 4rem);
  }

  .gear-spotlight__media {
    align-items: center;
    aspect-ratio: 4 / 5;
    background: #eadfce;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    width: 100%;
  }

  .gear-spotlight__media img {
    height: 100%;
    max-height: 38rem;
    object-fit: contain;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
    width: 100%;
  }

  .gear-spotlight__media:hover img {
    transform: scale(1.035);
  }

  .gear-spotlight__body {
    background: #f3e3d4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(2rem, 5vw, 5rem);
  }

  .gear-story-label,
  .gear-card__story-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .gear-spotlight__eyebrow {
    display: flex;
  }

  .gear-spotlight__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3rem, 6vw, 6.4rem);
    font-weight: 400;
    letter-spacing: -0.06em;
    line-height: 0.84;
    margin-top: 1.3rem;
  }

  .gear-spotlight__summary {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-top: 1.75rem;
    max-width: 36rem;
  }

  .gear-spotlight__take {
    border-left: 1px solid rgba(29, 26, 22, 0.42);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.55;
    margin-top: 1.5rem;
    max-width: 35rem;
    padding-left: 1rem;
  }

  .gear-product-meta {
    align-items: end;
    border-top: 1px solid rgba(29, 26, 22, 0.45);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    margin-top: 2.25rem;
    padding-top: 1rem;
  }

  .gear-card-grid {
    display: grid;
    gap: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 3.5vw, 4rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .gear-card {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    min-width: 0;
  }

  .gear-card__media {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #f3e3d4;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    position: relative;
    text-decoration: none;
    width: 100%;
  }

  .gear-card__media::after {
    border: 1px solid rgba(29, 26, 22, 0.4);
    content: "↗";
    display: grid;
    font-size: 0.85rem;
    height: 2.65rem;
    place-items: center;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    transition: background 180ms ease, color 180ms ease;
    width: 2.65rem;
  }

  .gear-card__media:hover::after {
    background: #1d1a16;
    color: #fffdf8;
  }

  .gear-card__media img {
    height: 100%;
    max-width: 88%;
    object-fit: contain;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
    width: 100%;
  }

  .gear-card__media:hover img {
    transform: scale(1.035);
  }

  .gear-card__fallback {
    align-items: center;
    box-sizing: border-box;
    color: #1d1a16;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 100%;
    min-width: 0;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
  }

  .gear-card__fallback span {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    max-width: 20ch;
    overflow-wrap: anywhere;
    text-transform: uppercase;
  }

  .gear-card__fallback strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3.25rem, 8vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 0.85;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .gear-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding-top: 1.2rem;
  }

  .gear-card__eyebrow {
    align-items: baseline;
    border-top: 1px solid #1d1a16;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    padding-top: 0.65rem;
  }

  .gear-card__number {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    line-height: 1;
  }

  .gear-card__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.4rem, 4vw, 4.6rem);
    font-weight: 400;
    letter-spacing: -0.052em;
    line-height: 0.9;
    margin-top: 1rem;
    overflow-wrap: anywhere;
  }

  .gear-card__copy {
    color: #5a5148;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 1.1rem;
    max-width: 36rem;
  }

  .gear-card__take {
    border-left: 1px solid #d8c8b7;
    color: #413a34;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 0.98rem;
    line-height: 1.55;
    margin-top: 1rem;
    max-width: 36rem;
    padding-left: 0.9rem;
  }

  .gear-card__link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.12rem;
    text-decoration: none;
    transition: opacity 160ms ease;
  }

  .gear-card__link:hover {
    opacity: 0.58;
  }

  .gear-card__footer {
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .gear-card--portrait .gear-card__media {
    background: #f7f2e8;
  }

  .gear-card--panorama .gear-card__media {
    background: #9f4a25;
  }

  .gear-card--pair:nth-of-type(even) .gear-card__media {
    background: #fff1e5;
  }

  .gear-card--solo .gear-card__media {
    background: #eadfce;
  }

  .gear-card--panorama .gear-card__fallback {
    color: #fffdf8;
  }

  .gear-card--panorama .gear-card__media::after {
    border-color: rgba(255, 253, 248, 0.58);
    color: #fffdf8;
  }

  .gear-flow {
    display: flex;
    flex-direction: column;
  }

  .gear-results { order: 1; }
  .gear-reminder { order: 2; }
  .gear-disclosure { order: 3; }

  .gear-reminder {
    background: #1d1a16;
    border-color: #1d1a16;
    color: #fffdf8;
  }

  .gear-reminder .text-ink-600,
  .gear-reminder .text-ink-700,
  .gear-reminder .text-ink-900 {
    color: #fffdf8;
  }

  .gear-reminder input,
  .gear-reminder select,
  .gear-reminder input[type="submit"] {
    border-radius: 0;
  }

  .gear-reminder input[type="email"],
  .gear-reminder select,
  .gear-reminder select.text-ink-900 {
    background: #fffdf8;
    border-color: #d8c8b7;
    color: #1d1a16;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .gear-reminder input[type="email"]::placeholder {
    color: #6f655c;
    opacity: 1;
  }

  .gear-reminder select option {
    background: #fffdf8;
    color: #1d1a16;
  }

  .gear-reminder input[type="submit"] {
    background: #f2c15f;
    color: #1d1a16;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
  }

  .gear-disclosure {
    background: #1d1a16;
    color: rgba(255, 253, 248, 0.62);
    margin: 0;
    max-width: none;
    padding-left: max(1rem, calc((100% - 72rem) / 2));
    padding-right: max(1rem, calc((100% - 72rem) / 2));
  }

  .gear-disclosure > div {
    border-color: rgba(255, 253, 248, 0.22);
  }

  @media (min-width: 768px) {
    #friday-edit-first-item {
      scroll-margin-top: calc(var(--desktop-header-expanded-height, 7rem) + 1rem);
    }

    .gear-card__media {
      padding: clamp(1.75rem, 4vw, 3.5rem);
    }

    .gear-card__media img {
      max-width: 92%;
    }

    .gear-hero__grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(26rem, 0.92fr);
    }

    .gear-hero__montage {
      min-height: 42rem;
    }

    .gear-hero__deck {
      grid-template-columns: minmax(0, 1fr) 9.5rem;
    }

    .gear-section-heading {
      grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    }

    .gear-section-heading__index {
      grid-column: 1 / -1;
    }

    .gear-spotlight {
      grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    }

    .gear-card--lead { grid-column: span 7; }
    .gear-card--portrait { grid-column: span 5; }
    .gear-card--panorama { grid-column: 1 / -1; }
    .gear-card--pair { grid-column: span 6; }
    .gear-card--solo { grid-column: 3 / span 8; }

    .gear-card--lead .gear-card__media { aspect-ratio: 5 / 4; }
    .gear-card--portrait .gear-card__media { aspect-ratio: 4 / 5; }
    .gear-card--portrait .gear-card__title { font-size: clamp(2.2rem, 3vw, 3.3rem); }
    .gear-card--solo .gear-card__media { aspect-ratio: 16 / 10; }
  }

  @media (min-width: 1024px) {
    .gear-card--lead {
      padding-top: 7rem;
    }

    .gear-card--panorama {
      align-items: stretch;
      column-gap: clamp(2.5rem, 6vw, 6.5rem);
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    }

    .gear-card--panorama .gear-card__media {
      aspect-ratio: auto;
      min-height: 34rem;
      width: 100%;
    }

    .gear-card--panorama .gear-card__body {
      justify-content: center;
      padding: 3rem 0;
    }
  }

  @media (max-width: 767px) {
    .gear-page {
      --mobile-region-height: 6.25rem;
    }

    html {
      /*
       * The mobile masthead retracts while readers move through the edit, so
       * the snapport is the full visible viewport here. Keeping a header-sized
       * inset leaves the previous card exposed and pushes the same amount of
       * the current card below the viewport once the masthead is hidden.
       */
      scroll-padding-top: 0;
      scroll-snap-type: y mandatory;
    }

    .gear-results {
      max-width: none;
      padding: 0;
    }

    .gear-hero__grid {
      height: auto;
      min-height: 0;
      grid-template-rows: clamp(10rem, 32svh, 18rem) auto;
    }

    .gear-hero__copy {
      justify-content: flex-start;
      padding: 1.25rem 1.5rem;
    }

    .gear-hero__title {
      font-size: clamp(3rem, 12vw, 3.7rem);
      margin-top: 1.25rem;
    }

    .gear-hero__deck {
      display: block;
      margin-top: 1.25rem;
      padding-top: 0.75rem;
    }

    .gear-hero__issue {
      /* The date is already on the cover seal and the region is above the title. */
      display: none;
    }

    .gear-region-nav {
      box-sizing: border-box;
      height: var(--mobile-region-height);
      overflow: hidden;
    }

    .gear-region-nav__inner {
      box-sizing: border-box;
      height: 100%;
      padding-bottom: 0.55rem;
      padding-top: 0.65rem;
    }

    .gear-region-nav__layout {
      gap: 0.45rem;
    }

    .gear-region-nav__description {
      display: none;
    }

    .gear-region-nav__options {
      padding-bottom: 0;
    }

    .gear-hero__montage,
    .gear-hero__copy {
      min-height: 0;
    }

    .gear-hero__tile--primary { inset: 0 32% 0 0; }
    .gear-hero__tile--secondary { inset: 0 0 51% 69%; }
    .gear-hero__tile--tertiary { inset: 50% 0 0 69%; }

    .gear-results > section:first-child > .gear-section-heading,
    .gear-results > section:first-child > .gear-mobile-browse-cue {
      display: none;
    }

    .gear-results > section > .gear-section-heading {
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .gear-results > section:not(:first-child) {
      margin-top: 5rem;
    }

    .gear-section-heading {
      gap: 1rem;
    }

    .gear-section-heading h2 {
      font-size: clamp(2.35rem, 12vw, 3.2rem);
    }

    .gear-mobile-browse-cue {
      align-items: center;
      color: #5a5148;
      display: flex;
      font-size: 0.64rem;
      font-weight: 700;
      gap: 0.55rem;
      letter-spacing: 0.17em;
      margin-top: 1.5rem;
      text-transform: uppercase;
    }

    .gear-mobile-browse-cue::before {
      animation: gear-cue-nudge 1.8s ease-in-out infinite;
      border: 1px solid rgba(29, 26, 22, 0.42);
      border-radius: 999px;
      content: "\2193";
      display: grid;
      font-size: 0.85rem;
      height: 2rem;
      letter-spacing: 0;
      place-items: center;
      width: 2rem;
    }

    .gear-spotlight,
    .gear-card {
      display: grid;
      min-height: 100svh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .gear-hero,
    .gear-reminder,
    .gear-archive-nav,
    .gear-page footer {
      scroll-snap-align: start;
    }

    .gear-hero {
      /* Keep the cover below the visible masthead at the page's first snap
       * position. Product cards still snap to the full viewport below. */
      scroll-margin-top: calc(var(--mobile-header-height) + 1px);
    }

    .gear-reminder {
      align-items: center;
      display: flex;
      min-height: calc(100svh - var(--mobile-header-height) - 10rem);
    }

    .gear-reminder > div {
      width: 100%;
    }

    .gear-disclosure {
      box-sizing: border-box;
      min-height: 10rem;
    }

    .gear-spotlight,
    .gear-card {
      grid-template-rows: clamp(16.5rem, 40svh, 22rem) minmax(0, 1fr);
    }

    .gear-spotlight {
      margin-top: 0;
    }

    .gear-spotlight__media,
    .gear-card__media {
      aspect-ratio: auto;
      height: 100%;
      padding: clamp(1rem, 4vw, 1.6rem);
      position: relative;
    }

    .gear-spotlight__body,
    .gear-card__body {
      box-sizing: border-box;
      padding: 1.15rem 1rem max(3rem, calc(2rem + env(safe-area-inset-bottom)));
    }

    .gear-card__media::after,
    .gear-spotlight__media::after {
      display: none;
    }

    .gear-card__mobile-actions {
      align-items: center;
      display: flex;
      gap: 0.65rem;
      margin-left: auto;
    }

    .gear-card__mobile-external {
      border: 1px solid rgba(29, 26, 22, 0.4);
      display: grid;
      font-size: 0.85rem;
      height: 2.25rem;
      line-height: 1;
      place-items: center;
      text-decoration: none;
      width: 2.25rem;
    }

    .gear-card__position {
      align-items: baseline;
      color: #1d1a16;
      display: flex;
      font-family: "Playfair Display", Georgia, serif;
      font-size: 0.9rem;
      font-style: italic;
      font-weight: 500;
      gap: 0.18rem;
      justify-content: center;
      letter-spacing: -0.03em;
      line-height: 1;
      white-space: nowrap;
    }

    .gear-card__position strong {
      font: inherit;
    }

    .gear-card__position span {
      opacity: 0.72;
    }

    .gear-spotlight__body {
      min-height: 0;
    }

    .gear-spotlight__eyebrow,
    .gear-card__eyebrow {
      align-items: center;
    }

    .gear-spotlight__title,
    .gear-card__title {
      font-size: clamp(2.2rem, 10vw, 3rem);
      line-height: 0.9;
      margin-top: 0.75rem;
    }

    .gear-spotlight__summary,
    .gear-card__copy {
      display: -webkit-box;
      font-size: 0.86rem;
      line-height: 1.55;
      margin-top: 0.8rem;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .gear-spotlight__take,
    .gear-card__take {
      display: -webkit-box;
      font-size: 0.9rem;
      line-height: 1.45;
      margin-top: 0.75rem;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .gear-product-meta {
      gap: 0.75rem;
      margin-top: auto;
      padding-top: 0.8rem;
    }

    .gear-card-grid {
      gap: 0;
    }

    .gear-card__body {
      flex: 1;
    }

    .gear-card__footer {
      padding-top: 1rem;
    }

    .gear-card__number {
      display: none;
    }

    .gear-card:nth-child(4n + 1) .gear-card__body { background: #fff8f2; }
    .gear-card:nth-child(4n + 2) .gear-card__body { background: #f7f2e8; }
    .gear-card:nth-child(4n + 3) .gear-card__body { background: #f3e3d4; }
    .gear-card:nth-child(4n + 4) .gear-card__body { background: #fff1e5; }
  }

  @media (max-width: 767px) and (max-height: 740px) {
    .gear-spotlight,
    .gear-card {
      grid-template-rows: 14rem minmax(0, 1fr);
    }

    .gear-spotlight__take,
    .gear-card__take {
      display: none;
    }

    .gear-spotlight__summary,
    .gear-card__copy {
      -webkit-line-clamp: 2;
    }

    .gear-spotlight__title,
    .gear-card__title {
      font-size: clamp(2rem, 9vw, 2.6rem);
    }
  }

  @keyframes gear-cue-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(0.25rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-snap-type: none;
    }

    .gear-mobile-browse-cue::before {
      animation: none;
    }

    .gear-card__media img,
    .gear-spotlight__media img {
      transition: none;
    }
  }