/*
 * Theme Name:   StreetPhotographs — GeneratePress Child
 * Theme URI:    https://streetphotographs.net
 * Description:  Child theme for streetphotographs.net. Editorial street photography aesthetic — raw, cinematic, typographic.
 * Author:       Francois
 * Template:     generatepress
 * Version:      1.0.0
 * Text Domain:  streetphotographs
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  /* Palette */
  --sp-black:          #0f0f0f;
  --sp-white:          #faf8f5;
  --sp-amber:          #f5a800;
  --sp-amber-dark:     #c98c00;
  --sp-gray-90:        #1c1b1b;
  --sp-gray-70:        #313030;
  --sp-gray-40:        #7a7878;
  --sp-gray-15:        #d5d2d0;
  --sp-gray-05:        #f0edec;
  --sp-overlay:        rgba(15,15,15,0.72);

  /* Typography */
  --sp-font-headline:  'Space Grotesk', sans-serif;
  --sp-font-body:      'Newsreader', Georgia, serif;

  /* Spacing */
  --sp-section:        6rem;
  --sp-gutter:         clamp(1.25rem, 4vw, 3rem);

  /* Transitions */
  --sp-ease:           cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   RESET & BASE — override GeneratePress defaults
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  background:  var(--sp-white);
  color:       var(--sp-black);
  font-family: var(--sp-font-body);
  font-size:   1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* GeneratePress structural overrides */
.site-content,
.inside-site-header { max-width: 100%; }

.entry-content > *,
.inside-article > * { max-width: 100%; }

/* Remove GeneratePress default padding on front page */
body.home .content-area,
body.home .site-content { padding: 0; }

body.home .inside-article { padding: 0; }
body.home article.page { padding: 0; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.sp-headline {
  font-family:    var(--sp-font-headline);
  font-weight:    900;
  line-height:    0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

::selection {
  background: var(--sp-amber);
  color:       var(--sp-black);
}

/* ==========================================================================
   GLOBAL HEADER OVERRIDE
   ========================================================================== */

#site-header,
.site-header {
  position:   fixed;
  top:        0; left: 0; right: 0;
  z-index:    1000;
  background: var(--sp-white);
  padding:    0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--sp-ease);
}
#site-header.scrolled { border-bottom-color: rgba(15,15,15,0.08); }

.inside-header {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  /* Let GP's .grid-container control max-width via Customizer — do NOT override it */
  padding-top:    1.1rem !important;
  padding-bottom: 1.1rem !important;
  gap:            2rem;
  box-sizing:     border-box;
}

/* Logo / Site title */
.site-branding .site-title,
.site-branding .site-title a {
  font-family:    var(--sp-font-headline) !important;
  font-weight:    900;
  font-size:      1.35rem;
  font-style:     italic;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color:          var(--sp-black);
  line-height:    1;
}

/* Primary nav — high-specificity override for GP */
#site-header .main-navigation .main-nav ul li a,
#site-header .main-navigation .main-nav ul li a:visited,
.primary-nav .main-nav > ul > li > a {
  font-family:    var(--sp-font-headline) !important;
  font-size:      0.72rem !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color:          var(--sp-gray-90);
  padding:        0.35rem 0.6rem;
  transition:     background 0.1s, color 0.1s;
}
#site-header .main-navigation .main-nav ul li a:hover,
.primary-nav .main-nav > ul > li > a:hover {
  background: var(--sp-amber) !important;
  color:       var(--sp-black) !important;
}

/* Hide GeneratePress nav toggles styling conflicts */
.menu-toggle { display: none !important; }

/* ==========================================================================
   HERO — PHOTO OF THE DAY
   ========================================================================== */

.sp-hero {
  position:   relative;
  width:      100%;
  height:     100svh;
  min-height: 600px;
  overflow:   hidden;
  background: var(--sp-black);
  margin-top: 0;
}

.sp-hero__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  opacity:    0.75;
  transform:  scale(1.04);
  animation:  heroReveal 2.4s var(--sp-ease) forwards;
}

@keyframes heroReveal {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 0.75; transform: scale(1.04); }
}

.sp-hero__gradient {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(15,15,15,0.92) 0%, rgba(15,15,15,0.2) 55%, transparent 100%);
}

.sp-hero__content {
  position:  absolute;
  bottom:    clamp(2.5rem, 7vw, 5rem);
  left:      var(--sp-gutter);
  right:     var(--sp-gutter);
  max-width: 1100px;
  color:     var(--sp-white);
  opacity:   0;
  transform: translateY(20px);
  animation: heroContentIn 0.9s var(--sp-ease) 0.6s forwards;
}

@keyframes heroContentIn {
  to { opacity: 1; transform: translateY(0); }
}

.sp-hero__badges {
  display:     flex;
  gap:         0.5rem;
  flex-wrap:   wrap;
  margin-bottom: 1.25rem;
}

.sp-badge {
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding:        0.28rem 0.75rem;
}

.sp-badge--amber { background: var(--sp-amber); color: var(--sp-black); }
.sp-badge--glass {
  background:  rgba(240, 237, 236, 0.15);
  backdrop-filter: blur(8px);
  color:       var(--sp-white);
}

.sp-hero__title {
  font-size:      clamp(3.5rem, 11vw, 9rem);
  line-height:    0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight:    900;
  margin:         0 0 1.5rem;
  color:          #fff;
}

.sp-hero__caption {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.3rem);
  max-width:   640px;
  border-left: 4px solid var(--sp-amber);
  padding-left: 1.25rem;
  color:        var(--sp-gray-15);
  margin:       0 0 2rem;
  line-height:  1.5;
}

.sp-hero__actions {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.sp-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  font-family:    var(--sp-font-headline);
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding:        1rem 2.25rem;
  cursor:         pointer;
  border:         none;
  transition:     background 0.15s, color 0.15s, transform 0.1s;
}

.sp-btn:active { transform: scale(0.98); }

.sp-btn--amber {
  background: var(--sp-amber);
  color:      var(--sp-black);
}
.sp-btn--amber:hover {
  background: var(--sp-white);
  color:      var(--sp-black);
}

.sp-btn--ghost {
  background: transparent;
  color:      var(--sp-white);
  border:     1px solid rgba(255,255,255,0.3);
}
.sp-btn--ghost:hover { background: rgba(255,255,255,0.1); }

.sp-btn--dark {
  background: var(--sp-black);
  color:      var(--sp-white);
}
.sp-btn--dark:hover {
  background: var(--sp-amber);
  color:      var(--sp-black);
}

/* ==========================================================================
   FEATURED STORIES — asymmetric grid
   ========================================================================== */

.sp-stories {
  padding:   var(--sp-section) var(--sp-gutter);
  max-width: 1600px;
  margin:    0 auto;
  overflow:  hidden;
}

.sp-stories__header {
  display:        flex;
  align-items:    baseline;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            1rem;
  border-bottom:  2px solid var(--sp-black);
  padding-bottom: 1rem;
  margin-bottom:  3.5rem;
}

.sp-stories__title {
  font-size: clamp(2.2rem, 6vw, 5rem);
  margin:    0;
}

.sp-stories__edition {
  font-family:    var(--sp-font-headline);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--sp-amber-dark);
}

.sp-stories__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem 3rem;
}

@media (min-width: 900px) {
  .sp-stories__grid {
    grid-template-columns: 7fr 5fr;
  }
}

/* Main story */
.sp-story--main { cursor: pointer; }

.sp-story--main .sp-story__img-wrap {
  position:     relative;
  overflow:     hidden;
  margin-bottom: 1.5rem;
  aspect-ratio: 16/10;
}

@media (min-width: 900px) {
  .sp-story--main .sp-story__img-wrap { aspect-ratio: unset; height: 580px; }
}

.sp-story__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 1s var(--sp-ease);
}
.sp-story--main:hover .sp-story__img-wrap img { transform: scale(1.04); }

.sp-story__cover-tag {
  position:    absolute;
  top:         1rem;
  left:        1rem;
}

.sp-story__category {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--sp-amber-dark);
  display:        block;
  margin-bottom:  0.75rem;
}

.sp-story--main .sp-story__title {
  font-size:   clamp(2rem, 5vw, 4rem);
  margin:      0 0 1rem;
  max-width:   560px;
}

.sp-story--main .sp-story__excerpt {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1.125rem;
  color:       var(--sp-gray-40);
  margin:      0 0 1.5rem;
  max-width:   520px;
}

.sp-story__read-more {
  font-family:    var(--sp-font-headline);
  font-size:      0.72rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom:  3px solid var(--sp-amber);
  padding:        0 0.15rem 0.1rem;
  transition:     background 0.1s;
}
.sp-story__read-more:hover { background: var(--sp-amber); }

/* Side column */
.sp-stories__side { display: flex; flex-direction: column; gap: 2.5rem; }

.sp-story--side { cursor: pointer; }

.sp-story--side .sp-story__inner {
  display:               grid;
  grid-template-columns: 2fr 3fr;
  gap:                   1.25rem;
  align-items:           start;
}

.sp-story--side.sp-story--flip .sp-story__inner {
  grid-template-columns: 3fr 2fr;
}

.sp-story--flip .sp-story__thumb { order: 2; }
.sp-story--flip .sp-story__meta  { order: 1; text-align: right; }

.sp-story__thumb {
  overflow:     hidden;
  aspect-ratio: 1;
}
.sp-story__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 0.7s var(--sp-ease);
}
.sp-story--side:hover .sp-story__thumb img { transform: scale(1.08); }

.sp-story--side .sp-story__title {
  font-size:  1.35rem;
  margin:     0 0 0.5rem;
  line-height: 1;
}

.sp-story--side .sp-story__excerpt {
  font-family: var(--sp-font-body);
  font-size:   0.875rem;
  color:       var(--sp-gray-40);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* Quote block */
.sp-quote-block {
  background: var(--sp-black);
  color:      var(--sp-white);
  padding:    2rem;
}

.sp-quote-block blockquote {
  font-family:  var(--sp-font-headline);
  font-size:    1.05rem;
  font-weight:  900;
  font-style:   italic;
  margin:       0 0 1.25rem;
  line-height:  1.35;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sp-quote-block__attr {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

.sp-quote-block__line {
  width:  2rem;
  height: 1px;
  background: var(--sp-amber);
  flex-shrink: 0;
}

.sp-quote-block__name {
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ==========================================================================
   THE FEED — horizontal scroll community section
   ========================================================================== */

.sp-feed {
  background: var(--sp-black);
  padding-top:    var(--sp-section);
  padding-bottom: var(--sp-section);
  overflow:       hidden;
}

.sp-feed__header {
  display:        flex;
  align-items:    flex-end;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            1rem;
  padding:        0 var(--sp-gutter);
  margin-bottom:  2rem;
}

.sp-feed__title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  color:     var(--sp-white);
  margin:    0 0 0.75rem;
}

.sp-feed__subtitle {
  font-family: var(--sp-font-body);
  font-style:  italic;
  color:       var(--sp-gray-15);
  font-size:   1.05rem;
  margin:      0;
}

.sp-feed__nav {
  display: flex;
  gap:     0.4rem;
}

.sp-feed__nav-btn {
  width:      3rem;
  height:     3rem;
  display:    flex;
  align-items: center;
  justify-content: center;
  border:     1px solid rgba(255,255,255,0.18);
  background: transparent;
  color:      var(--sp-white);
  cursor:     pointer;
  font-size:  1.25rem;
  transition: background 0.15s, color 0.15s;
}

.sp-feed__nav-btn:hover,
.sp-feed__nav-btn.is-active {
  background: var(--sp-amber);
  color:      var(--sp-black);
  border-color: var(--sp-amber);
}

.sp-feed__track {
  display:              flex;
  gap:                  1.25rem;
  overflow-x:           auto;
  padding:              0 var(--sp-gutter) 2rem;
  scroll-snap-type:     x mandatory;
  scrollbar-width:      none;
  -ms-overflow-style:   none;
}
.sp-feed__track::-webkit-scrollbar { display: none; }

.sp-feed__item {
  flex:             0 0 clamp(260px, 38vw, 420px);
  scroll-snap-align: start;
  position:         relative;
  overflow:         hidden;
  aspect-ratio:     4/5;
  cursor:           pointer;
  background:       var(--sp-gray-70);
}

.sp-feed__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: filter 0.5s var(--sp-ease), transform 0.5s var(--sp-ease);
}
.sp-feed__item:hover img { filter: grayscale(0); transform: scale(1.03); }

.sp-feed__item-info {
  position:   absolute;
  inset:      auto 0 0 0;
  padding:    1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
  transform:  translateY(100%);
  transition: transform 0.35s var(--sp-ease);
}
.sp-feed__item:hover .sp-feed__item-info { transform: translateY(0); }

.sp-feed__item-info span {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--sp-amber);
}

.sp-feed__cta {
  display:        flex;
  justify-content: center;
  padding:        1.5rem var(--sp-gutter) 0;
}

/* ==========================================================================
   GEAR & GLASS
   ========================================================================== */

.sp-gear {
  background: var(--sp-gray-05);
  padding:    var(--sp-section) var(--sp-gutter);
}

.sp-gear__grid {
  max-width:             1600px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1px;
  background:            var(--sp-black);
  border:                1px solid var(--sp-black);
}

@media (min-width: 900px) {
  .sp-gear__grid { grid-template-columns: 4fr 8fr; }
}

.sp-gear__intro {
  background:     var(--sp-white);
  padding:        3rem;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  gap:            2rem;
}

.sp-gear__tag {
  display:        inline-block;
  background:     var(--sp-black);
  color:          var(--sp-white);
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding:        0.25rem 0.6rem;
  margin-bottom:  1rem;
}

.sp-gear__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin:    0;
}

.sp-gear__desc {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1.1rem;
  color:       var(--sp-gray-40);
  max-width:   280px;
  margin:      0;
}

.sp-gear__content {
  background: var(--sp-black);
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        1px;
}

.sp-gear__feature {
  background:  var(--sp-white);
  padding:     2rem;
  cursor:      pointer;
  transition:  background 0.2s;
}
.sp-gear__feature:hover { background: var(--sp-gray-05); }

.sp-gear__feature-img {
  overflow:      hidden;
  aspect-ratio:  1;
  margin-bottom: 1.25rem;
  background:    var(--sp-gray-05);
}
.sp-gear__feature-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 0.7s var(--sp-ease);
}
.sp-gear__feature:hover .sp-gear__feature-img img { transform: scale(1.06); }

.sp-gear__feature-header {
  display:        flex;
  justify-content: space-between;
  align-items:    flex-start;
  margin-bottom:  0.75rem;
}

.sp-gear__feature-title {
  font-size:  1.25rem;
  margin:     0;
}

.sp-gear__feature-icon {
  font-size:  1.25rem;
  color:      var(--sp-amber-dark);
}

.sp-gear__feature p {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   0.9rem;
  color:       var(--sp-gray-40);
  margin:      0;
}

.sp-gear__list {
  background:     var(--sp-white);
  padding:        2rem;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.sp-gear__list-item {
  border-left:  3px solid var(--sp-amber);
  padding-left: 1rem;
}

.sp-gear__list-item h4 {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin:         0 0 0.3rem;
}

.sp-gear__list-item p {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   0.875rem;
  color:       var(--sp-gray-40);
  margin:      0;
}

.sp-gear__list-cta {
  margin-top: auto;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.sp-newsletter {
  background: var(--sp-white);
  padding:    var(--sp-section) var(--sp-gutter);
  position:   relative;
  overflow:   hidden;
  text-align: center;
}

.sp-newsletter__bg-word {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%,-50%);
  font-family:   var(--sp-font-headline);
  font-size:     clamp(8rem, 30vw, 28rem);
  font-weight:   900;
  color:         rgba(15,15,15,0.025);
  pointer-events: none;
  user-select:   none;
  white-space:   nowrap;
  line-height:   1;
  z-index:       0;
}

.sp-newsletter__inner {
  position:  relative;
  z-index:   1;
  max-width: 720px;
  margin:    0 auto;
}

.sp-newsletter__tag {
  display:        inline-block;
  background:     var(--sp-amber);
  color:          var(--sp-black);
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding:        0.28rem 0.75rem;
  margin-bottom:  1.5rem;
}

.sp-newsletter__title {
  font-size:   clamp(2.5rem, 8vw, 6rem);
  margin:      0 0 1rem;
  line-height: 0.88;
}

.sp-newsletter__sub {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.3rem);
  color:       var(--sp-gray-40);
  max-width:   500px;
  margin:      0 auto 2.5rem;
  line-height: 1.55;
}

.sp-newsletter__form {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0;
  border:     3px solid var(--sp-black);
}

.sp-newsletter__input {
  flex:           1 1 220px;
  background:     var(--sp-white);
  border:         none;
  outline:        none;
  padding:        1.1rem 1.5rem;
  font-family:    var(--sp-font-headline);
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--sp-black);
}

.sp-newsletter__input::placeholder { color: var(--sp-gray-15); }

.sp-newsletter__submit {
  background:  var(--sp-black);
  color:       var(--sp-white);
  border:      none;
  padding:     1.1rem 2.5rem;
  font-family: var(--sp-font-headline);
  font-size:   0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s;
}
.sp-newsletter__submit:hover {
  background: var(--sp-amber);
  color:      var(--sp-black);
}

.sp-newsletter__note {
  margin-top:     1.25rem;
  font-family:    var(--sp-font-headline);
  font-size:      0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--sp-gray-15);
  font-style:     italic;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#site-footer,
.site-footer {
  background:   var(--sp-gray-05);
  border-top:   1px solid rgba(15,15,15,0.08);
  padding:      3rem var(--sp-gutter);
}

.sp-footer__inner {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  justify-content: space-between;
  gap:            2rem;
  /* width controlled by GP .grid-container class added in footer.php */
}

.sp-footer__brand-name {
  font-family:    var(--sp-font-headline);
  font-size:      1.1rem;
  font-weight:    900;
  font-style:     italic;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom:  0.25rem;
}

.sp-footer__copy {
  font-family:    var(--sp-font-headline);
  font-size:      0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--sp-amber-dark);
}

.sp-footer__nav {
  display:  flex;
  gap:      2rem;
  flex-wrap: wrap;
}

.sp-footer__nav a {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--sp-amber-dark);
  text-decoration: none;
  border-bottom:  2px solid transparent;
  padding-bottom: 0.1rem;
  transition:     border-color 0.2s;
}
.sp-footer__nav a:hover { border-color: var(--sp-amber); }

/* Hide default GP footer text */
.powered-by { display: none; }

/* ==========================================================================
   MOBILE NAV ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .sp-hero__title { font-size: clamp(2.8rem, 14vw, 5rem); }
  .sp-stories__grid { grid-template-columns: 1fr; }
  .sp-gear__content { grid-template-columns: 1fr; }
  .sp-gear__grid    { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SCROLL-TRIGGERED FADE-IN — progressive enhancement
   ========================================================================== */

.sp-reveal {
  opacity:   0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--sp-ease), transform 0.75s var(--sp-ease);
}

.sp-reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger children */
.sp-reveal-group > * {
  opacity:   0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--sp-ease), transform 0.65s var(--sp-ease);
}

.sp-reveal-group.is-visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0s; }
.sp-reveal-group.is-visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.1s; }
.sp-reveal-group.is-visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
.sp-reveal-group.is-visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.3s; }

/* ==========================================================================
   BLOG / ARCHIVE (non-homepage) — basic styling
   ========================================================================== */

body:not(.home) .site-content { padding: 0 var(--sp-gutter); }

body:not(.home) .entry-title {
  font-family:    var(--sp-font-headline);
  font-size:      clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

body:not(.home) .entry-meta {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--sp-amber-dark);
}

/* ==========================================================================
   SINGLE ARTICLE — sp-single
   ========================================================================== */

/* Remove GeneratePress default article padding on singles */
body.single .inside-article,
body.single .entry-content { padding: 0; margin: 0; }
body.single .site-content  { padding: 0; }

/* ── 1. Hero ──────────────────────────────────────────────────────────── */

.sp-single-hero {
  position:   relative;
  width:      100%;
  height:     100svh;
  min-height: 580px;
  overflow:   hidden;
  background: var(--sp-black);
}

.sp-single-hero__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1) contrast(1.1);
  animation:  heroReveal 2.2s var(--sp-ease) forwards;
}

.sp-single-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(15,15,15,0.88) 0%, rgba(15,15,15,0.15) 60%, transparent 100%);
}

.sp-single-hero__content {
  position:  absolute;
  bottom:    clamp(2.5rem, 7vw, 5rem);
  left:      var(--sp-gutter);
  right:     var(--sp-gutter);
  max-width: 1100px;
  color:     var(--sp-white);
  opacity:   0;
  transform: translateY(18px);
  animation: heroContentIn 0.85s var(--sp-ease) 0.5s forwards;
}

.sp-single-hero__title {
  font-family:    var(--sp-font-headline);
  font-size:      clamp(3rem, 10vw, 8rem);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height:    0.86;
  margin:         0.75rem 0 1.25rem;
  color:          #fff;
}

.sp-single-hero__subtitle {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.4rem);
  color:       rgba(250,248,245,0.85);
  max-width:   700px;
  line-height: 1.55;
  margin:      0;
}

/* ── 2. Intro narrative ───────────────────────────────────────────────── */

.sp-single-intro {
  padding: clamp(4rem, 8vw, 8rem) var(--sp-gutter);
}

.sp-single-intro__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem;
  max-width:             1280px;
  margin:                0 auto;
}

@media (min-width: 900px) {
  .sp-single-intro__inner { grid-template-columns: 4fr 8fr; gap: 5rem; }
}

/* Sidebar */
.sp-single-sidebar {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  gap:            2rem 3rem;
}

@media (min-width: 900px) {
  .sp-single-sidebar {
    flex-direction: column;
    gap:            2rem;
    position:       sticky;
    top:            6rem;
  }
}

.sp-single-sidebar__label {
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color:          var(--sp-amber-dark);
  margin:         0 0 0.3rem;
}

.sp-single-sidebar__value {
  display:     block;
  font-size:   1.1rem;
  margin:      0;
  line-height: 1.2;
}

.sp-single-sidebar__value--headline {
  font-family:    var(--sp-font-headline);
  font-weight:    700;
  font-size:      1.3rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color:          var(--sp-black);
}
.sp-single-sidebar__value--headline:hover { color: var(--sp-amber-dark); }

.sp-single-sidebar__value--italic {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1.15rem;
  color:       var(--sp-gray-40);
}

.sp-single-sidebar__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
}

.sp-single-sidebar__tag {
  font-family:    var(--sp-font-headline);
  font-size:      0.6rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding:        0.2rem 0.6rem;
  background:     var(--sp-gray-05);
  color:          var(--sp-gray-40);
  border:         1px solid var(--sp-gray-15);
  transition:     background 0.15s, color 0.15s;
}
.sp-single-sidebar__tag:hover {
  background: var(--sp-amber);
  color:      var(--sp-black);
  border-color: var(--sp-amber);
}

/* Body text */
.sp-single-lede {
  font-family: var(--sp-font-body);
  font-size:   clamp(1.5rem, 3.5vw, 2.2rem);
  line-height: 1.3;
  color:       var(--sp-black);
  margin-bottom: 2.5rem;
}

.sp-single-lede p { margin: 0; }

.sp-single-text {
  font-family: var(--sp-font-body);
  font-size:   clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color:       rgba(28,27,27,0.82);
  max-width:   72ch;
}

.sp-single-text p         { margin: 0 0 1.5rem; }
.sp-single-text p:last-child { margin-bottom: 0; }
.sp-single-text blockquote {
  border-left: 4px solid var(--sp-amber);
  padding-left: 1.5rem;
  margin:       2rem 0;
  font-style:   italic;
  color:        var(--sp-gray-40);
}

/* ── 3. Galerie asymétrique ───────────────────────────────────────────── */

.sp-single-gallery {
  background: var(--sp-gray-05);
  padding:    clamp(3rem, 6vw, 6rem) var(--sp-gutter);
}

.sp-single-gallery__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
  max-width:             1600px;
  margin:                0 auto;
}

@media (min-width: 768px) {
  .sp-single-gallery__inner { grid-template-columns: 7fr 5fr; }
}

.sp-single-gallery__main {
  overflow:    hidden;
  aspect-ratio: 4/5;
}

@media (min-width: 768px) {
  .sp-single-gallery__main { aspect-ratio: unset; }
}

.sp-single-gallery__main img,
.sp-single-gallery__stack-top img,
.sp-single-gallery__stack-bottom img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.8s var(--sp-ease);
}

.sp-single-gallery__main:hover img,
.sp-single-gallery__stack-top:hover img,
.sp-single-gallery__stack-bottom:hover img { transform: scale(1.04); }

.sp-single-gallery__stack {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.sp-single-gallery__stack-top {
  overflow:    hidden;
  aspect-ratio: 1;
  flex:         0 0 auto;
}

.sp-single-gallery__stack-bottom {
  overflow:    hidden;
  aspect-ratio: 16/9;
  flex:         1 1 auto;
}

/* Extra images grid */
.sp-single-gallery__extra {
  display:               grid;
  grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) );
  gap:                   1rem;
  max-width:             1600px;
  margin:                1rem auto 0;
}

.sp-single-gallery__extra-item {
  overflow:    hidden;
  aspect-ratio: 4/3;
}

.sp-single-gallery__extra-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.8s var(--sp-ease);
}
.sp-single-gallery__extra-item:hover img { transform: scale(1.04); }

/* ── 4. Technical Specs ───────────────────────────────────────────────── */

.sp-single-specs {
  padding: clamp(3.5rem, 7vw, 7rem) var(--sp-gutter);
}

.sp-single-specs__inner {
  background:     var(--sp-black);
  color:          var(--sp-white);
  max-width:      1280px;
  margin:         0 auto;
  padding:        clamp(2.5rem, 5vw, 5rem);
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  justify-content: space-between;
  gap:            3rem;
}

.sp-single-specs__title {
  font-family:    var(--sp-font-headline);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin:         0 0 0.75rem;
  color:          var(--sp-white);
}

.sp-single-specs__sub {
  font-family: var(--sp-font-body);
  font-style:  italic;
  color:       rgba(250,248,245,0.55);
  font-size:   1rem;
  max-width:   340px;
  margin:      0;
}

.sp-single-specs__grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
}

.sp-single-specs__cell {
  background:     var(--sp-gray-70);
  padding:        1.25rem 1.5rem;
  min-width:      9rem;
  aspect-ratio:   1;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
}

.sp-single-specs__cell-label {
  font-family:    var(--sp-font-headline);
  font-size:      0.58rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          rgba(250,248,245,0.5);
}

.sp-single-specs__cell-value {
  font-family:    var(--sp-font-headline);
  font-size:      1.1rem;
  font-weight:    700;
  color:          var(--sp-white);
  line-height:    1.1;
}

/* ── 5. Citation finale ───────────────────────────────────────────────── */

.sp-single-end {
  position:   relative;
  height:     clamp(500px, 65vw, 820px);
  overflow:   hidden;
  background: var(--sp-black);
}

.sp-single-end__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.sp-single-end__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 70%, transparent 100%);
}

.sp-single-end__content {
  position: absolute;
  bottom:   0;
  left:     0;
  padding:  clamp(2rem, 5vw, 4rem) var(--sp-gutter);
  max-width: 760px;
  color:    var(--sp-white);
}

.sp-single-end__quote {
  font-family:  var(--sp-font-body);
  font-style:   italic;
  font-size:    clamp(1.1rem, 2.5vw, 1.6rem);
  line-height:  1.5;
  margin:       0 0 2rem;
  color:        rgba(250,248,245,0.92);
}

/* ── 6. Navigation prev/next ──────────────────────────────────────────── */

.sp-single-nav {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--sp-black);
}

.sp-single-nav__item {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
  padding:     2rem var(--sp-gutter);
  text-decoration: none;
  color:       var(--sp-black);
  transition:  background 0.2s;
  overflow:    hidden;
}
.sp-single-nav__item:hover { background: var(--sp-gray-05); }

.sp-single-nav__item--next {
  border-left:     1px solid rgba(15,15,15,0.1);
  justify-content: flex-end;
}

.sp-single-nav__thumb {
  width:      5rem;
  height:     5rem;
  flex-shrink: 0;
  overflow:   hidden;
}
.sp-single-nav__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: filter 0.3s;
}
.sp-single-nav__item:hover .sp-single-nav__thumb img { filter: grayscale(0); }

.sp-single-nav__meta {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

.sp-single-nav__meta--right { text-align: right; }

.sp-single-nav__dir {
  font-family:    var(--sp-font-headline);
  font-size:      0.6rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color:          var(--sp-amber-dark);
}

.sp-single-nav__title {
  font-family:    var(--sp-font-headline);
  font-size:      0.95rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height:    1.1;
}

@media (max-width: 600px) {
  .sp-single-nav { grid-template-columns: 1fr; }
  .sp-single-nav__item--next { border-left: none; border-top: 1px solid rgba(15,15,15,0.1); }
  .sp-single-nav__thumb { display: none; }
}

/* ==========================================================================
   SINGLE ARTICLE — HERO
   ========================================================================== */

.sp-article-hero {
  position:   relative;
  width:      100%;
  height:     100svh;
  min-height: 560px;
  overflow:   hidden;
  background: var(--sp-black);
  margin-top: 0;
}

.sp-article-hero__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1) contrast(1.15);
  opacity:    0.75;
  animation:  heroReveal 2.2s var(--sp-ease) forwards;
}

.sp-article-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(15,15,15,0.88) 0%, rgba(15,15,15,0.1) 50%, transparent 100%);
}

.sp-article-hero__content {
  position:  absolute;
  bottom:    clamp(2.5rem, 7vw, 5rem);
  left:      var(--sp-gutter);
  right:     var(--sp-gutter);
  max-width: 1100px;
  color:     var(--sp-white);
  opacity:   0;
  transform: translateY(20px);
  animation: heroContentIn 0.9s var(--sp-ease) 0.5s forwards;
}

.sp-article-hero__title {
  font-size:      clamp(3rem, 10vw, 8rem);
  line-height:    0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight:    900;
  margin:         0.75rem 0 1.25rem;
  color:          #fff;
}

.sp-article-hero__excerpt {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.35rem);
  max-width:   660px;
  color:       var(--sp-gray-15);
  line-height: 1.55;
  margin:      0;
}

/* ==========================================================================
   SINGLE ARTICLE — BODY (sidebar + content)
   ========================================================================== */

.sp-article-body {
  max-width: 1400px;
  margin:    0 auto;
  padding:   var(--sp-section) var(--sp-gutter);
}

.sp-article-body__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   3rem;
}

@media (min-width: 900px) {
  .sp-article-body__inner {
    grid-template-columns: 4fr 8fr;
    align-items:           start;
  }
}

/* Sidebar */
.sp-article-sidebar__inner {
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
}

@media (min-width: 900px) {
  .sp-article-sidebar__inner {
    position: sticky;
    top:      7rem;
  }
}

.sp-article-sidebar__label {
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--sp-amber-dark);
  margin:         0 0 0.3rem;
}

.sp-article-sidebar__value {
  font-family: var(--sp-font-headline);
  font-size:   1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  margin:      0;
}

.sp-article-sidebar__value--headline {
  font-size:      1.5rem;
  letter-spacing: -0.02em;
}

.sp-article-sidebar__value--italic {
  font-family:    var(--sp-font-body);
  font-style:     italic;
  font-size:      1.1rem;
  font-weight:    400;
  text-transform: none;
}

.sp-article-sidebar__share { border-top: 1px solid var(--sp-gray-15); padding-top: 1.25rem; }

.sp-article-sidebar__share-links {
  display: flex;
  gap:     0.75rem;
  margin-top: 0.5rem;
}

.sp-article-sidebar__share-links a {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border:         2px solid var(--sp-black);
  padding:        0.3rem 0.75rem;
  transition:     background 0.12s, color 0.12s;
}
.sp-article-sidebar__share-links a:hover {
  background: var(--sp-amber);
  border-color: var(--sp-amber);
}

/* Content */
.sp-article-content__pull-quote {
  font-family:  var(--sp-font-body);
  font-size:    clamp(1.5rem, 3vw, 2.2rem);
  font-style:   normal;
  line-height:  1.3;
  color:        var(--sp-gray-90);
  margin:       0 0 2.5rem;
  padding-left: 0;
}

.sp-article-content__body {
  font-family:  var(--sp-font-body);
  font-size:    clamp(1rem, 1.5vw, 1.2rem);
  line-height:  1.75;
  color:        rgba(28,27,27,0.82);
  max-width:    68ch;
}

.sp-article-content__body p        { margin: 0 0 1.5em; }
.sp-article-content__body h2,
.sp-article-content__body h3       { font-family: var(--sp-font-headline); text-transform: uppercase; margin: 2.5em 0 0.75em; }
.sp-article-content__body blockquote {
  border-left:  4px solid var(--sp-amber);
  padding-left: 1.5rem;
  margin:       2em 0;
  font-style:   italic;
  font-size:    1.15em;
  color:        var(--sp-gray-70);
}
.sp-article-content__body a {
  border-bottom: 2px solid var(--sp-amber);
}
.sp-article-content__body a:hover {
  background: var(--sp-amber);
}
.sp-article-content__body img {
  max-width: 100%;
  height:    auto;
}

/* ==========================================================================
   SINGLE ARTICLE — GALLERY
   ========================================================================== */

.sp-article-gallery {
  background: var(--sp-gray-05);
  padding:    var(--sp-section) var(--sp-gutter);
}

.sp-article-gallery__inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
  max-width:             1600px;
  margin:                0 auto;
}

@media (min-width: 768px) {
  .sp-article-gallery__inner {
    grid-template-columns: 7fr 5fr;
  }
}

.sp-article-gallery__main {
  overflow:    hidden;
  aspect-ratio: 4/5;
}

@media (min-width: 768px) {
  .sp-article-gallery__main { aspect-ratio: unset; }
}

.sp-article-gallery__main img,
.sp-article-gallery__stack-top img,
.sp-article-gallery__stack-bottom img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.8s var(--sp-ease);
}

.sp-article-gallery__main:hover img,
.sp-article-gallery__stack-top:hover img,
.sp-article-gallery__stack-bottom:hover img {
  transform: scale(1.03);
}

.sp-article-gallery__stack {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.sp-article-gallery__stack-top {
  overflow:    hidden;
  aspect-ratio: 1;
}

.sp-article-gallery__stack-bottom {
  overflow:    hidden;
  aspect-ratio: 16/9;
}

/* Extra strip */
.sp-article-gallery__strip {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1rem;
  max-width:             1600px;
  margin:                1rem auto 0;
}

.sp-article-gallery__strip-item {
  overflow:    hidden;
  aspect-ratio: 4/3;
}

.sp-article-gallery__strip-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.7s var(--sp-ease);
}
.sp-article-gallery__strip-item:hover img { transform: scale(1.04); }

/* ==========================================================================
   SINGLE ARTICLE — TECHNICAL SPECS
   ========================================================================== */

.sp-article-specs {
  padding: var(--sp-section) var(--sp-gutter);
}

.sp-article-specs__inner {
  max-width:      1400px;
  margin:         0 auto;
  background:     var(--sp-black);
  padding:        3rem clamp(2rem, 5vw, 5rem);
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  justify-content: space-between;
  gap:            2rem;
}

.sp-article-specs__intro { max-width: 360px; }

.sp-article-specs__title {
  font-size:   clamp(2rem, 4vw, 3rem);
  color:       var(--sp-white);
  margin:      0 0 0.75rem;
  line-height: 1;
}

.sp-article-specs__sub {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1rem;
  color:       rgba(250,248,245,0.55);
  margin:      0;
}

.sp-article-specs__grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(110px, 140px));
  gap:                   0.75rem;
}

@media (min-width: 600px) {
  .sp-article-specs__grid {
    grid-template-columns: repeat(4, minmax(100px, 130px));
  }
}

.sp-article-specs__cell {
  background:     var(--sp-gray-05);
  padding:        1rem;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio:   1;
}

.sp-article-specs__cell-label {
  font-family:    var(--sp-font-headline);
  font-size:      0.58rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--sp-gray-40);
  display:        block;
  margin-bottom:  0.5rem;
}

.sp-article-specs__cell-value {
  font-family:    var(--sp-font-headline);
  font-size:      1rem;
  font-weight:    700;
  color:          var(--sp-black);
  line-height:    1.1;
}

/* ==========================================================================
   SINGLE ARTICLE — CLOSING SECTION
   ========================================================================== */

.sp-article-closing {
  position:   relative;
  width:      100%;
  min-height: 560px;
  height:     55vw;
  max-height: 820px;
  background: var(--sp-black);
  overflow:   hidden;
}

.sp-article-closing__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.7;
}

.sp-article-closing__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 60%);
}

.sp-article-closing__content {
  position: absolute;
  bottom:   0;
  left:     0;
  padding:  clamp(2rem, 5vw, 4rem) var(--sp-gutter);
  max-width: 660px;
  color:    var(--sp-white);
}

.sp-article-closing__quote {
  font-family:  var(--sp-font-body);
  font-style:   italic;
  font-size:    clamp(1.1rem, 2.5vw, 1.6rem);
  line-height:  1.55;
  color:        rgba(255,255,255,0.9);
  margin:       0 0 2rem;
  border:       none;
  padding:      0;
}

/* ==========================================================================
   SINGLE ARTICLE — RELATED POSTS
   ========================================================================== */

.sp-article-related {
  padding: var(--sp-section) var(--sp-gutter);
  background: var(--sp-white);
}

.sp-article-related__inner { max-width: 1400px; margin: 0 auto; }

.sp-article-related__header {
  border-bottom:  2px solid var(--sp-black);
  padding-bottom: 0.75rem;
  margin-bottom:  2.5rem;
}

.sp-article-related__title {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  margin:    0;
}

.sp-article-related__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2.5rem;
}

@media (min-width: 600px) {
  .sp-article-related__grid { grid-template-columns: repeat(3, 1fr); }
}

.sp-article-related__item { cursor: pointer; }

.sp-article-related__img-wrap {
  display:      block;
  overflow:     hidden;
  aspect-ratio: 16/10;
  margin-bottom: 1rem;
}

.sp-article-related__img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 0.7s var(--sp-ease), filter 0.5s;
}
.sp-article-related__item:hover .sp-article-related__img-wrap img {
  transform: scale(1.05);
  filter:    grayscale(0.3);
}

.sp-article-related__item-title {
  font-size:   1.25rem;
  margin:      0.5rem 0;
  line-height: 1.1;
}

.sp-article-related__item-title a { color: inherit; }
.sp-article-related__item-title a:hover { color: var(--sp-amber-dark); }

.sp-article-related__item-exc {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   0.9rem;
  color:       var(--sp-gray-40);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ==========================================================================
   GP GRID FIX — footer safety net
   If footer.php still ends up inside .site-content in edge cases,
   force it to break out of GP's grid.
   ========================================================================== */

#site-footer.site-footer {
  grid-column: 1 / -1 !important;
  width:       100% !important;
  min-height:  auto !important;
}

/* GeneratePress wraps content in a flex or grid — reset for our pages */
body.sp-homepage .site-content,
body.single      .site-content {
  display: block !important;
  width:   100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin:  0 !important;
}

/* ==========================================================================
   ARCHIVE — HEADER
   ========================================================================== */

.sp-archive-header {
  background:    var(--sp-black);
  padding:       clamp(4rem, 10vw, 8rem) var(--sp-gutter) clamp(3rem, 6vw, 5rem);
  margin-top:    0;
}

.sp-archive-header__inner {
  max-width: 1200px;
  margin:    0 auto;
}

.sp-archive-header__meta {
  display:     flex;
  align-items: center;
  gap:         1rem;
  margin-bottom: 1.25rem;
}

.sp-archive-header__count {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--sp-gray-40);
}

.sp-archive-header__title {
  font-size:      clamp(3rem, 10vw, 8rem);
  line-height:    0.84;
  letter-spacing: -0.04em;
  color:          var(--sp-white);
  margin:         0 0 1.5rem;
}

.sp-archive-header__desc {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.25rem);
  color:       var(--sp-gray-40);
  max-width:   600px;
  margin:      0;
  line-height: 1.6;
}

/* ==========================================================================
   ARCHIVE — GRID WRAPPER
   ========================================================================== */

.sp-archive-grid {
  padding: var(--sp-section) 0;
}

.sp-archive-grid__inner {
  max-width: 1400px;
  margin:    0 auto;
}

/* ==========================================================================
   ARCHIVE — CARD LINK WRAPPER (single <a> per card)
   ========================================================================== */

/* One <a> wraps the entire card content — block, no underline, inherits color */
.sp-archive-card__link {
  display:         block;
  text-decoration: none;
  color:           inherit;
}

/* ==========================================================================
   ARCHIVE — HERO CARD (first post)
   ========================================================================== */

.sp-archive-card--hero {
  margin-bottom:  4rem;
  border-bottom:  2px solid var(--sp-black);
  padding-bottom: 4rem;
}

/* Hero link: stacked on mobile, 2-col grid on desktop */
.sp-archive-card--hero .sp-archive-card__link {
  display: block;
}

@media (min-width: 860px) {
  .sp-archive-card--hero .sp-archive-card__link {
    display:               grid;
    grid-template-columns: 7fr 5fr;
    gap:                   3rem;
    align-items:           start;
  }
}

/* Image: left column on desktop, full width on mobile */
.sp-archive-card--hero .sp-archive-card__img-wrap {
  display:  block;
  overflow: hidden;
  height:   260px;
  width:    100%;
}

@media (min-width: 860px) {
  .sp-archive-card--hero .sp-archive-card__img-wrap {
    height: 480px;
  }
}

/* Fill rule */
.sp-archive-card__img-wrap picture {
  display: block;
  width:   100%;
  height:  100%;
}

.sp-archive-card__img-wrap picture img,
.sp-archive-card__img-wrap > img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 0.9s var(--sp-ease), filter 0.5s;
}

.sp-archive-card--hero:hover .sp-archive-card__img-wrap img,
.sp-archive-card--grid:hover  .sp-archive-card__img-wrap img {
  transform: scale(1.04);
  filter:    grayscale(0.3);
}

.sp-archive-card__img-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(15,15,15,0.4) 0%, transparent 60%);
  pointer-events: none;
}

/* Body: right column on desktop, below image on mobile */
.sp-archive-card--hero .sp-archive-card__body {
  padding: 1.5rem 0 0;
}

@media (min-width: 860px) {
  .sp-archive-card--hero .sp-archive-card__body {
    padding: 0;
  }
}

.sp-archive-card--hero .sp-archive-card__title {
  font-size:   clamp(2rem, 5vw, 3.5rem);
  margin:      0.75rem 0 1rem;
  line-height: 0.9;
  color:       var(--sp-black);
}

.sp-archive-card__link:hover .sp-archive-card__title {
  color: var(--sp-amber-dark);
}

.sp-archive-card--hero .sp-archive-card__excerpt {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1.125rem;
  color:       var(--sp-gray-40);
  margin:      0 0 1.5rem;
  line-height: 1.6;
}

.sp-archive-card__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         1rem;
}

.sp-archive-card__location,
.sp-archive-card__date {
  font-family:    var(--sp-font-headline);
  font-size:      0.62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--sp-gray-40);
}

.sp-archive-card__location::before {
  content: '// ';
  color:   var(--sp-amber);
}

/* ==========================================================================
   ARCHIVE — POSTS GRID (all posts after hero)
   ========================================================================== */

.sp-archive-posts {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2.5rem 2rem;
}

@media (min-width: 600px) {
  .sp-archive-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .sp-archive-posts { grid-template-columns: repeat(3, 1fr); }
}

/* Grid card */
.sp-archive-card--grid { cursor: pointer; }

/* Grid card link wrapper */
.sp-archive-card--grid .sp-archive-card__link {
  display: block;
}

.sp-archive-card--grid .sp-archive-card__img-wrap {
  display:       block;
  overflow:      hidden;
  height:        220px;
  width:         100%;
  margin-bottom: 1rem;
}

.sp-archive-card--grid .sp-archive-card__img-wrap picture {
  display: block;
  width:   100%;
  height:  100%;
}

.sp-archive-card--grid .sp-archive-card__img-wrap picture img,
.sp-archive-card--grid .sp-archive-card__img-wrap > img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1);
  transition: transform 0.7s var(--sp-ease), filter 0.5s;
}
.sp-archive-card--grid:hover .sp-archive-card__img-wrap img {
  transform: scale(1.05);
  filter:    grayscale(0.2);
}

.sp-archive-card__top {
  display:        flex;
  justify-content: space-between;
  align-items:    baseline;
  margin-bottom:  0.5rem;
}

.sp-archive-card--grid .sp-archive-card__title {
  font-size:   1.35rem;
  margin:      0 0 0.75rem;
  line-height: 1;
  color:       var(--sp-black);
}
.sp-archive-card__link:hover .sp-archive-card--grid .sp-archive-card__title,
.sp-archive-card--grid:hover .sp-archive-card__title { color: var(--sp-amber-dark); }

.sp-archive-card__excerpt--clamp {
  font-family:        var(--sp-font-body);
  font-style:         italic;
  font-size:          0.9rem;
  color:              var(--sp-gray-40);
  margin:             0 0 0.75rem;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* "Read →" label */
.sp-archive-card__read-more {
  font-family:    var(--sp-font-headline);
  font-size:      0.65rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--sp-amber-dark);
}
.sp-archive-card--grid:hover .sp-archive-card__read-more { color: var(--sp-black); }

/* ==========================================================================
   ARCHIVE — PAGINATION
   ========================================================================== */

.sp-archive-pagination {
  padding: 3rem var(--sp-gutter) 0;
  max-width: 1400px;
  margin:    0 auto;
}

.sp-archive-pagination__inner {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  border-top:     2px solid var(--sp-black);
  padding-top:    1.5rem;
  flex-wrap:      wrap;
  gap:            1rem;
}

.sp-archive-pagination__prev a,
.sp-archive-pagination__next a {
  font-family:    var(--sp-font-headline);
  font-size:      0.72rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom:  3px solid var(--sp-amber);
  padding:        0 0.15rem 0.1rem;
  transition:     background 0.1s;
}
.sp-archive-pagination__prev a:hover,
.sp-archive-pagination__next a:hover { background: var(--sp-amber); }

/* ==========================================================================
   ARCHIVE — EMPTY STATE
   ========================================================================== */

.sp-archive-empty {
  padding: var(--sp-section) var(--sp-gutter);
  text-align: center;
}

.sp-archive-empty__inner { max-width: 500px; margin: 0 auto; }

.sp-archive-empty__title {
  font-family:    var(--sp-font-headline);
  font-size:      clamp(2rem, 5vw, 4rem);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin:         0 0 1rem;
}

.sp-archive-empty__sub {
  font-family: var(--sp-font-body);
  font-style:  italic;
  font-size:   1.1rem;
  color:       var(--sp-gray-40);
  margin:      0 0 2rem;
}

/* ==========================================================================
   GP PREMIUM — <picture> global fill fix
   GP/Imagify wraps <img> in <picture> for WebP. Explicit height on the
   container makes height:100% resolve on picture + img without position tricks.
   ========================================================================== */

.sp-story__img-wrap picture,
.sp-story__thumb picture,
.sp-feed__item picture,
.sp-gear__feature-img picture,
.sp-article-gallery__main picture,
.sp-article-gallery__stack-top picture,
.sp-article-gallery__stack-bottom picture,
.sp-article-related__img-wrap picture {
  display: block;
  width:   100%;
  height:  100%;
}

.sp-story__img-wrap picture img,
.sp-story__thumb picture img,
.sp-feed__item picture img,
.sp-gear__feature-img picture img,
.sp-article-gallery__main picture img,
.sp-article-gallery__stack-top picture img,
.sp-article-gallery__stack-bottom picture img,
.sp-article-related__img-wrap picture img,
.sp-story__img-wrap > img,
.sp-story__thumb > img,
.sp-article-related__img-wrap > img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ==========================================================================
   SINGLE — category link in sidebar (bug 7)
   ========================================================================== */

.sp-article-sidebar__cat-link {
  font-family:    var(--sp-font-headline);
  font-size:      inherit;
  font-weight:    700;
  text-transform: uppercase;
  color:          var(--sp-black);
  border-bottom:  2px solid var(--sp-amber);
  padding-bottom: 0.05rem;
  transition:     background 0.1s;
}
.sp-article-sidebar__cat-link:hover {
  background: var(--sp-amber);
  color:       var(--sp-black);
}

/* ==========================================================================
   FIX 1 — .main-title (GP hero/page title class)
   ========================================================================== */

.main-title {
  font-family:    var(--sp-font-headline) !important;
  font-weight:    900 !important;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height:    0.9;
}