/*----------------------------------------*/
/*  Arc Chronicles page — scoped styles
/*  Only loaded on /arc-chronicles, does not affect any other page.
/*----------------------------------------*/

.arc {
   background: #0d0b0a;
   color: #a8a29e;
   font-family: 'Outfit', sans-serif;
}

/* This stylesheet only loads on the 365ARC pages, so this override never
   touches the header on any other page. The site-wide header is normally
   position:absolute so it can float over a hero — here we pull it into
   normal flow with a solid background so it sits as its own bar above
   the hero instead of overlapping it. */
.eg-header__transparent {
   position: relative !important;
   top: 0 !important;
   background: #0d0b0a;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.arc-eyebrow {
   display: inline-block;
   color: #ff5a1f;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   margin-bottom: 16px;
}

.arc-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #ff5a1f;
   color: #fff;
   font-weight: 600;
   font-size: 15px;
   padding: 16px 30px;
   border-radius: 6px;
   text-transform: none;
   transition: background 0.3s ease;
}
.arc-btn:hover {
   background: #e6480f;
   color: #fff;
}
.arc-btn--block {
   width: 100%;
   justify-content: center;
}
.arc-btn--outline {
   background: transparent;
   border: 1px solid #ff5a1f;
   color: #ff5a1f;
}
.arc-btn--outline:hover {
   background: #ff5a1f;
   color: #fff;
}

/* ---------- Hero ---------- */
.arc-hero {
   position: relative;
   height: 560px;
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arc-hero__image {
   position: absolute;
   top: 0;
   right: 0;
   width: 54%;
   height: 100%;
   z-index: 0;
}
.arc-hero__image::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      linear-gradient(90deg, #0d0b0a 0%, rgba(13, 11, 10, 0) 22%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 18%);
   z-index: 1;
}
.arc-hero__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 25%;
   display: block;
}
.arc-hero .container {
   position: relative;
   z-index: 2;
   height: 100%;
}
.arc-hero .row {
   height: 100%;
   align-items: center;
}
.arc-hero__title {
   font-family: 'Oswald', sans-serif;
   font-size: 56px;
   font-weight: 600;
   text-transform: uppercase;
   line-height: 1.1;
   color: #fff;
   margin-bottom: 22px;
}
.arc-hero__title span {
   color: #ff5a1f;
}
.arc-hero__desc {
   font-size: 16px;
   line-height: 1.7;
   color: #a8a29e;
   max-width: 460px;
   margin-bottom: 28px;
}
.arc-hero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
}
.arc-hero__meta span {
   color: #cfc9c4;
   font-size: 14px;
   font-weight: 500;
}
.arc-hero__meta i {
   color: #ff5a1f;
   margin-right: 6px;
}

/* ---------- Body layout ---------- */
.arc-body {
   padding: 70px 0;
}

/* Sidebars shared box style */
.arc-sidebar,
.arc-sidebar-box,
.arc-apparel-box,
.arc-join-box {
   background: #171412;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 10px;
   padding: 26px;
   margin-bottom: 24px;
}
.arc-sidebar__title {
   color: #ff5a1f;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 20px;
}
.arc-sidebar__desc {
   font-size: 14px;
   margin-bottom: 16px;
}

/* Transmissions list */
.arc-transmissions {
   list-style: none;
   margin: 0 0 18px;
   padding: 0;
}
.arc-transmissions li {
   display: flex;
   flex-direction: column;
   gap: 3px;
   padding: 12px 14px;
   border-radius: 6px;
   margin-bottom: 4px;
   cursor: default;
}
.arc-transmissions li.active {
   background: rgba(255, 90, 31, 0.1);
   border-left: 3px solid #ff5a1f;
}
.arc-transmissions__id {
   font-size: 11px;
   color: #6b6560;
   font-weight: 600;
   letter-spacing: 0.05em;
}
.arc-transmissions li.active .arc-transmissions__id {
   color: #ff5a1f;
}
.arc-transmissions__name {
   font-size: 14px;
   color: #cfc9c4;
   font-weight: 500;
   line-height: 1.4;
}
.arc-transmissions li.active .arc-transmissions__name {
   color: #fff;
}

.arc-view-all {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #ff5a1f;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}
.arc-view-all i {
   font-size: 11px;
}

.arc-apparel-box h5,
.arc-join-box h5 {
   font-family: 'Oswald', sans-serif;
   color: #fff;
   font-size: 18px;
   text-transform: uppercase;
   margin-bottom: 10px;
}
.arc-apparel-box p,
.arc-join-box p {
   font-size: 14px;
   margin-bottom: 16px;
}
.arc-join-box {
   background: linear-gradient(160deg, #2a140a 0%, #171412 70%);
   border-color: rgba(255, 90, 31, 0.25);
}

/* ---------- Article ---------- */
.arc-article__title {
   font-family: 'Oswald', sans-serif;
   font-size: 34px;
   font-weight: 600;
   text-transform: uppercase;
   color: #fff;
   margin-bottom: 26px;
   line-height: 1.2;
}
.arc-article p {
   font-size: 16px;
   line-height: 1.85;
   color: #b7b1ac;
   margin-bottom: 22px;
}
.arc-article strong {
   color: #ff5a1f;
}

.arc-quote {
   background: linear-gradient(135deg, #2a140a 0%, #171412 80%);
   border: 1px solid rgba(255, 90, 31, 0.25);
   border-radius: 10px;
   padding: 34px;
   margin: 40px 0;
}
.arc-quote__label {
   display: block;
   color: #ff5a1f;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 12px;
}
.arc-quote p {
   font-family: 'Oswald', sans-serif;
   font-style: italic;
   font-size: 22px;
   color: #fff;
   line-height: 1.5;
   margin-bottom: 0;
}

/* ---------- Key reminders ---------- */
.arc-reminders {
   list-style: none;
   margin: 0;
   padding: 0;
}
.arc-reminders li {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   font-size: 14px;
   color: #cfc9c4;
   line-height: 1.5;
   margin-bottom: 18px;
}
.arc-reminders li:last-child {
   margin-bottom: 0;
}
.arc-reminders__icon {
   flex: 0 0 auto;
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 90, 31, 0.1);
   color: #ff5a1f;
   font-size: 13px;
}

/* ---------- Stats ---------- */
.arc-stats {
   display: flex;
   justify-content: space-between;
   text-align: center;
   gap: 10px;
}
.arc-stats__item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   flex: 1;
}
.arc-stats__item i {
   color: #ff5a1f;
   font-size: 16px;
}
.arc-stats__item strong {
   color: #fff;
   font-size: 18px;
   font-weight: 700;
}
.arc-stats__item span {
   font-size: 11px;
   color: #8a847e;
   line-height: 1.3;
}

/* ---------- Share ---------- */
.arc-share {
   display: flex;
   gap: 12px;
}
.arc-share a {
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.06);
   color: #cfc9c4;
   transition: all 0.3s ease;
}
.arc-share a:hover {
   background: #ff5a1f;
   color: #fff;
}

/* ---------- Trust bar ---------- */
.arc-trustbar {
   padding: 40px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.arc-trustbar i {
   color: #ff5a1f;
   font-size: 22px;
   margin-bottom: 12px;
   display: inline-block;
}
.arc-trustbar h6 {
   font-family: 'Oswald', sans-serif;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   margin-bottom: 4px;
}
.arc-trustbar span {
   font-size: 12px;
   color: #8a847e;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
   .arc-hero {
      height: auto;
      padding: 50px 0 0;
   }
   .arc-hero__image {
      position: static;
      width: 100%;
      height: 280px;
      margin-top: 30px;
   }
   .arc-hero__image::before {
      background: linear-gradient(180deg, rgba(13, 11, 10, 0) 60%, #0d0b0a 100%);
   }
   .arc-hero .container,
   .arc-hero .row {
      height: auto;
   }
   .arc-hero__title {
      font-size: 40px;
   }
   .arc-hero__desc {
      max-width: 100%;
   }
}
@media (max-width: 575px) {
   .arc-hero__title {
      font-size: 32px;
   }
   .arc-article__title {
      font-size: 26px;
   }
   .arc-quote p {
      font-size: 18px;
   }
}