:root {
  --bg: #11151d;
  --panel: #1c2430;
  --text: #fff;
  --muted: #fff;
  --accent: #ff6847;
  --cool: #31d7ce;
  --line: #35404d;
  --heading: "Roboto Condensed", Impact, sans-serif;
  --body: "Roboto", Arial, sans-serif;
  --radius-control: 8px;
  --radius-card: 14px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; object-fit: cover; }
::selection { background: var(--cool); color: #000; }
.is-hidden { display: none !important; }
[hidden] { display: none !important; }

button:not(.hero-arrow):not(.account-tab):not(.dialog-close),
input,
select,
textarea,
.button,
.header-cta {
  border-radius: var(--radius-control);
}

select,
select option {
  color: #fff;
}

select {
  background-color: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .3) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color-scheme: dark;
}

select option {
  background-color: #252a31;
}

.hero-featured-story,
.news-card,
.admin-story-item,
.hero-story-option,
.story-image,
.manifesto,
.build-card,
.story-search input,
.story-category-filter select,
.story-detail-image,
.world-news-card,
.world-news-empty,
.stories-empty,
.photo-gallery-item,
.photo-submission-form,
.admin-gallery-item,
.admin-image-viewer,
.account-dialog,
.form-result,
.admin-warning,
.admin-panel {
  border-radius: var(--radius-card);
}

.news-card,
.world-news-card,
.manifesto {
  overflow: hidden;
}

.announcement {
  min-height: 32px;
  padding: 6px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(110deg, #e64a35, #ff754a 48%, #a93361);
  color: white;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.announcement-right { text-align: right; }
.orange { color: #fff; }

.header {
  height: 82px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: rgba(17, 21, 29, .97);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.logo {
  font-family: var(--heading);
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.5px;
  white-space: nowrap;
}

.logo span, .logo b { color: #fff; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

.nav a, .header-cta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: color .2s;
}

.nav a:hover, .text-link:hover { color: #fff; }

.header-cta {
  border: 1px solid #484848;
  padding: 12px 16px;
  white-space: nowrap;
  border-radius: var(--radius-control);
}

.header-cta:hover { border-color: #fff; color: #fff; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.account-trigger {
  color: var(--text);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.account-trigger:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.menu-toggle { display: none; }

.hero {
  min-height: 650px;
  height: min(780px, 82vh);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #10141c;
}

.hero-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
}

.hero-slide[hidden] { display: none; }

.hero-image, .hero-shade {
  position: absolute;
  inset: 0;
}

.hero-image {
  background-color: #10141c;
  background-position: center;
  background-size: cover;
  filter: saturate(1.3) contrast(1.06);
  animation: heroReveal 1.2s ease both;
}

.hero-slide[data-hero-slide="0"] .hero-image {
  background-image: url("https://hips.hearstapps.com/mtg-prod/65b8bc79264f3a0008bc928b/1971-mini-1275-gt-and-1964-autin-mini-cooper-s-2.jpg?w=768&width=768&q=75&format=webp");
  background-position: center 55%;
}

.hero-slide[data-hero-slide="1"] .hero-image {
  background-image: url("https://www.topgear.com/sites/default/files/images/inline-galleries/2019/03/ad26830897993c9d1c7e2c4bf8653f4a/rh_eastonjeepeditandquickretouch_139.jpg");
  background-position: center;
}

.hero-slide[data-hero-slide="2"] .hero-image {
  background-image: url("https://wallpapercave.com/wp/7BDAkR5.jpg");
  background-position: center;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(8,12,20,.88) 0%, rgba(8,12,20,.56) 42%, rgba(8,12,20,.04) 100%),
    linear-gradient(0deg, rgba(8,12,20,.55), transparent 34%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(800px, 90%);
  margin-left: 8%;
  padding: 70px 0 100px;
  animation: contentReveal .8s .1s both;
}

.eyebrow, .section-kicker {
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin-right: 8px;
}

.hero h1 {
  margin: 24px 0;
  font-family: var(--heading);
  font-size: clamp(76px, 12vw, 150px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -3px;
}

.hero-top-stories h2, .hero-slide h2 {
  max-width: 900px;
  margin: 24px 0;
  font-family: var(--heading);
  font-size: clamp(58px, 9vw, 112px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -2px;
  color: #fff;
}

.hero h1 span, .section-heading h2 span, .manifesto h2 span,
.submit-section h2 span {
  color: #fff;
}

.hero h1 [data-site-text="heroTitleLead"] { white-space: pre-line; }

.newsletter h2 span { color: #000; }
.hero-content > p {
  color: #fff;
  font-size: 14px;
  line-height: 1.9;
  margin: 30px 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 48px;
  padding: 13px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.button:hover { transform: translateY(-2px); }

.button-orange {
  color: #fff;
  background: var(--accent);
}

.button-orange:hover { background: #e64d36; }

.button-outline {
  color: white;
  background: transparent;
  border-color: #666;
}

.button-outline:hover { border-color: #fff; color: #fff; }

.hero-index {
  position: absolute;
  z-index: 2;
  bottom: 25px;
  left: 5%;
  right: 155px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.hero-controls {
  position: absolute;
  z-index: 3;
  inset: 50% 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-arrow {
  width: 40px;
  height: 76px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

.hero-arrow svg {
  display: block;
  width: 18px;
  height: 52px;
  margin: auto;
  overflow: visible;
}

.hero-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-arrow:hover, .hero-arrow:focus-visible {
  color: #ccc;
}

.hero-featured-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.hero-featured-story {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .42);
  color: #fff;
  background: rgba(0, 0, 0, .34);
  text-decoration: none;
}

.hero-featured-story:hover { background: rgba(255, 255, 255, .13); }
.hero-featured-number { color: #c9c9c9; font-size: 11px; font-weight: 800; }
.hero-featured-details { display: grid; gap: 8px; min-width: 0; }
.hero-featured-details strong { font-size: 14px; line-height: 1.25; }
.hero-featured-details span { color: #ddd; font-size: 10px; text-transform: uppercase; }
.hero-stories-empty { color: #fff; }

.photo-credit {
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 2px;
}

.photo-credit:hover { color: #fff; }
.hero-index .photo-credit { align-self: center; }
.story-card .photo-credit { margin: -8px 0 8px; }

.ticker {
  overflow: hidden;
  background: linear-gradient(100deg, #fa5c43, #ff9c45 52%, #27c9c7);
  color: #000;
}

.ticker-track {
  width: max-content;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-left: 24px;
  animation: tickerMove 32s linear infinite;
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ticker-track b { font-size: 13px; }

.section {
  padding: 100px 7%;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

.section-heading h2, .newsletter h2 {
  margin: 8px 0 0;
  font-family: var(--heading);
  font-size: clamp(45px, 6vw, 70px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -1px;
}

.text-link {
  padding-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}

.story-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, .45fr) auto;
  align-items: end;
  gap: 14px;
  margin: -12px 0 28px;
}

.story-search, .story-category-filter { display: grid; gap: 6px; }
.story-search span, .story-category-filter span {
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.story-search input, .story-category-filter select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #fff;
  background-color: rgba(255, 255, 255, .09);
  border: 1px solid #536070;
}

.story-search input:focus, .story-category-filter select:focus { outline: 1px solid #fff; }
.story-filter-count { margin: 0 0 11px; color: #ccc; font-size: 9px; font-weight: 800; letter-spacing: .8px; }

.story-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 24px;
}

.news-section {
  background:
    radial-gradient(ellipse at 85% 10%, rgba(39, 201, 199, .12), transparent 38%),
    linear-gradient(145deg, #172331, #11151d 65%);
}

.world-news-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(49, 215, 206, .08), transparent 35%),
    var(--bg);
}

.world-news-header { position: static; }
.world-news-nav { display: flex; align-items: center; gap: 12px; }
.world-news-main { width: min(1120px, 90%); margin: 0 auto; padding: 64px 0 90px; flex: 1; }
.world-news-intro { margin-bottom: 38px; }
.world-news-intro h1 { margin: 8px 0 12px; font: 900 clamp(58px, 10vw, 100px)/.9 var(--heading); }
.world-news-intro h1 span { color: #fff; }
.world-news-intro > p { color: #fff; }
.world-news-feed { display: grid; gap: 22px; }
.world-news-card {
  display: grid;
  grid-template-columns: minmax(240px, 36%) minmax(0, 1fr);
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(28, 36, 48, .95));
  border: 1px solid rgba(255, 255, 255, .18);
}
.world-news-card-image { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.world-news-card-content { min-width: 0; padding: clamp(22px, 4vw, 38px); }
.world-news-date { margin: 0 0 8px; color: #ccc; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
.world-news-card h2 { margin: 0 0 14px; font: 900 clamp(29px, 4vw, 44px)/1 var(--heading); }
.world-news-summary { margin: 0 0 18px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.6; }
.world-news-body { color: #eee; font-size: 13px; line-height: 1.9; white-space: pre-line; }
.world-news-source { display: inline-block; margin-top: 12px; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.world-news-source:hover { text-decoration: underline; text-underline-offset: 3px; }
.world-news-empty { padding: clamp(26px, 5vw, 50px); background: var(--panel); border: 1px solid rgba(255, 255, 255, .18); }
.world-news-empty p { margin-top: 0; color: #fff; }
.world-news-error { color: #fff; font-weight: 800; }

.news-update-note {
  margin: 14px 0 0;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.news-card {
  min-width: 0;
  padding: 22px;
  background: linear-gradient(145deg, rgba(255, 104, 71, .14), rgba(28, 36, 48, .94) 58%, rgba(49, 215, 206, .12));
  border: 1px solid rgba(255, 255, 255, .22);
  border-top: 3px solid var(--accent);
}

.news-card:nth-child(3n + 2) { border-top-color: var(--cool); }

.news-image {
  display: block;
  height: 190px;
  margin: -22px -22px 18px;
  overflow: hidden;
  background: var(--panel);
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.3) contrast(1.04);
  transition: transform .5s ease;
}

.news-image:hover img { transform: scale(1.04); }

.news-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.news-card h3 {
  margin: 18px 0 10px;
  font-family: var(--heading);
  font-size: 25px;
  line-height: 1.15;
}

.news-card h3 a { color: #fff; }
.news-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--cool); text-underline-offset: 3px; }

.news-card p {
  color: #fff;
  font-size: 12px;
  line-height: 1.8;
}

.news-card .news-source {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.news-photo-credit {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
}

.news-photo-credit:hover { text-decoration: underline; text-underline-offset: 2px; }

.news-disclaimer {
  max-width: 750px;
  margin: 24px 0 0;
  color: #fff;
  font-size: 11px;
  line-height: 1.8;
}

.story-card { min-width: 0; cursor: pointer; }

.story-image {
  height: 260px;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--panel);
}

.story-feature .story-image { height: 320px; }

.story-image img, .build-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.32) contrast(1.04);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.story-image:hover img, .build-card:hover img { transform: scale(1.045); }

.image-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 6px 10px;
  color: #fff;
  background: linear-gradient(135deg, #ec593f, #ff7846);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 20px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.story-meta span + span { color: #fff; }

.story-card h3 {
  margin: 10px 0;
  font-family: var(--heading);
  font-size: 27px;
  line-height: 1.1;
  font-weight: 800;
}

.story-card h3 a:hover { color: #fff; }

.story-card p {
  color: #fff;
  font-size: 12px;
  line-height: 1.9;
}

.story-read-more {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.story-read-more:hover { color: var(--cool); }

.manifesto {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1b222d;
}

.manifesto-image {
  min-height: 500px;
  position: relative;
  background: url("https://mld6bx2fcqsq.i.optimole.com/w:auto/h:auto/q:mauto/g:sm/f:best/https://vtcar.com/wp-content/uploads/2025/12/Gymkhana-Australia-JM1_1313-copy-2-scaled.jpg") center / cover;
  filter: saturate(1.3) contrast(1.05);
}

.manifesto-image .photo-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
}

.manifesto-content {
  align-self: center;
  padding: 65px clamp(30px, 6vw, 90px);
}

.manifesto h2, .submit-section h2 {
  margin: 20px 0;
  font-family: var(--heading);
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: .98;
  font-weight: 900;
}

.manifesto-content > p, .submit-section > div > p {
  max-width: 450px;
  margin-bottom: 28px;
  color: #fff;
  font-size: 13px;
  line-height: 2;
}

.builds-section { background: #141414; }

.muted { color: #fff; font-size: 10px; }

.build-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.build-card {
  height: 390px;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
}

.build-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.9), transparent 70%);
  pointer-events: none;
}

.build-overlay {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 15px;
  bottom: 20px;
}

.build-overlay > span {
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.build-overlay h3 {
  margin: 8px 0 0;
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.build-overlay p { margin-bottom: 0; color: #fff; font-size: 11px; }
.build-overlay .photo-credit { display: block; margin-top: 8px; }

.submit-section {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 70px;
  padding: 100px 10%;
  align-items: start;
}

.submit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submit-form label {
  margin-top: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.submit-form input, .submit-form textarea {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, .07);
  color: white;
  border: 1px solid #363636;
  outline: none;
}

.submit-form select {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, .07);
  color: white;
  border: 1px solid #363636;
}

.submit-form input:focus, .submit-form textarea:focus {
  border-color: var(--accent);
}

.submit-form textarea { resize: vertical; }
.submit-form select:focus { outline: 1px solid var(--accent); }
.submit-form .muted { color: #bbb; }

.story-word-count {
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: 11px;
}

.submit-button { margin-top: 8px; }

.form-note {
  color: #fff;
  font-size: 9px;
  line-height: 1.7;
}

.form-result {
  display: none;
  padding: 16px;
  border: 1px solid var(--accent);
  color: white;
  overflow-wrap: anywhere;
}

.form-result.visible { display: block; }
.form-result h3 { margin-top: 0; color: #fff; }
.form-result p { color: #fff; white-space: pre-wrap; }
.form-result.error, .account-notice.error { color: #fff; border-color: #888; }

.community-stories {
  display: contents;
}

.stories-empty {
  grid-column: 1 / -1;
  padding: 36px;
  color: var(--muted);
  border: 1px dashed var(--line);
  text-align: center;
}

.photo-gallery { padding-top: 80px; padding-bottom: 90px; }
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.photo-gallery-item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #10141c;
}

.photo-gallery-item img { display: block; width: 100%; height: auto; object-fit: contain; }
.photo-gallery-item figcaption { padding: 12px 14px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.gallery-empty { grid-column: 1 / -1; color: var(--muted); }
.photo-submission-form {
  display: grid;
  gap: 14px;
  margin: -12px 0 28px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .18);
}
.photo-submission-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.photo-submission-fields label { align-self: end; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.photo-submission-fields label span { color: #bbb; }
.photo-submission-fields input { width: 100%; min-width: 0; padding: 11px; color: #fff; background: #121820; border: 1px solid #536070; }
.photo-submission-form > .button { justify-self: start; }
.photo-submission-notice { margin: 0; color: #fff; font-size: 11px; }
.photo-submission-notice.error { font-weight: 800; }

.admin-gallery-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.admin-gallery-item {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .15);
}

.admin-image-preview {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}
.admin-gallery-item .admin-image-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.admin-submission-image-preview { flex: 0 0 140px; width: 140px; }
.admin-submission-image-preview img { display: block; width: 100%; max-height: 110px; object-fit: cover; }
.admin-image-preview:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.admin-gallery-item p { margin: 0; color: #fff; font-size: 11px; overflow-wrap: anywhere; }
.admin-gallery-item .button { justify-self: start; }

.admin-image-viewer {
  width: min(96vw, 1400px);
  max-width: 96vw;
  max-height: 94vh;
  padding: 16px;
  color: #fff;
  background: #10141c;
  border: 1px solid rgba(255, 255, 255, .3);
}
.admin-image-viewer::backdrop { background: rgba(0, 0, 0, .9); }
.admin-image-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.admin-image-viewer-header p { margin: 0; overflow-wrap: anywhere; }
.admin-image-viewer > img {
  display: block;
  width: 100%;
  max-height: calc(94vh - 90px);
  object-fit: contain;
}

.site-session-status { white-space: nowrap; }
.site-session-status:disabled { opacity: .65; cursor: default; }
.site-admin-link {
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  white-space: nowrap;
}
.site-admin-link:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }

.community-story {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.community-story .story-image { height: 260px; }
.community-story h3 { overflow-wrap: anywhere; }
.community-car { color: var(--text) !important; font-weight: 700; }

.account-dialog {
  width: min(480px, calc(100% - 32px));
  max-width: none;
  max-height: min(90vh, 760px);
  padding: 30px;
  color: var(--text);
  background: #1d1d1d;
  border: 1px solid #555;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .65);
}

.account-dialog::backdrop { background: rgba(0, 0, 0, .78); }

.account-dialog-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.account-dialog-header h2 {
  margin: 8px 0 20px;
  font-family: var(--heading);
  font-size: 38px;
  line-height: 1;
}

.dialog-close {
  padding: 0 4px;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.dialog-close:hover { color: var(--text); }

.account-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.account-tab {
  padding: 12px 16px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

.account-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-form label {
  margin-top: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.account-form input {
  width: 100%;
  padding: 13px;
  color: white;
  background: #151c26;
  border: 1px solid #3e3e3e;
}

.account-form input:focus { outline: 1px solid var(--accent); }
.account-form .button { margin-top: 12px; }

.admin-signin-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-signin-entry > span {
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.admin-signin-entry .button { min-height: 42px; padding: 10px 16px; }
.admin-signin-help { margin: 0 0 4px; color: #fff; font-size: 11px; }

.admin-setup-link, .account-back-button {
  align-self: flex-start;
  color: #fff;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-back-button {
  padding: 8px 0;
  background: transparent;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

.account-notice {
  min-height: 1.5em;
  margin: 16px 0 0;
  color: #fff;
  font-size: 12px;
}

.account-demo-note {
  margin: 12px 0 0;
  padding-top: 12px;
  color: #fff;
  border-top: 1px solid var(--line);
  font-size: 9px;
  line-height: 1.7;
}

.newsletter {
  padding: 55px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  background: linear-gradient(110deg, #f1593f, #fa7542 58%, #ed9b3f);
  color: #fff;
}

.newsletter .section-kicker { color: #fff; }
.newsletter h2 { font-size: clamp(36px, 5vw, 55px); }
.newsletter > p { max-width: 240px; font-size: 12px; }

.newsletter .button-outline { color: #fff; border-color: rgba(255, 255, 255, .8); }
.newsletter .button-outline:hover { background: #fff; color: #000; }

.footer {
  padding: 45px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid var(--line);
}

.footer .logo { font-size: 29px; }
.footer p, .footer > span {
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
}

.admin-footer-link {
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.admin-footer-link:hover { text-decoration: underline; }

.admin-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(49, 215, 206, .1), transparent 35%),
    var(--bg);
}

.story-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(49, 215, 206, .08), transparent 35%),
    var(--bg);
}

.story-header { position: static; }
.story-detail-main { width: min(1120px, 90%); margin: 0 auto; padding: 42px 0 90px; flex: 1; }
.story-detail { max-width: 960px; margin: 0 auto; }
.story-back-link { display: inline-block; margin-bottom: 20px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.story-detail-image { height: clamp(260px, 50vw, 560px); overflow: hidden; background: var(--panel); }
.story-detail-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) contrast(1.05); }
.story-photo-credit { width: min(740px, 92%); margin: 8px auto 0; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-align: right; }
.story-photo-credit a { color: inherit; }
.story-detail-content { width: min(740px, 92%); margin: 0 auto; padding: 34px 0; }
.story-detail-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.story-detail-content h1, .story-not-found h1 { margin: 18px 0; font: 900 clamp(42px, 7vw, 76px)/.98 var(--heading); }
.story-detail-dek { margin: 0 0 16px; color: #fff; font-size: clamp(17px, 2.3vw, 22px); line-height: 1.7; }
.story-detail-byline { margin: 0 0 28px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.story-detail-body { color: #fff; font-size: 15px; line-height: 2; }
.story-detail-body p { margin: 0 0 22px; }
.story-source-link { margin-top: 16px; }
.story-not-found { max-width: 700px; margin: 90px auto; padding: 34px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .18); }
.story-not-found[hidden] { display: none; }
.story-not-found p { color: #fff; line-height: 1.8; }

.admin-header { position: static; }
.admin-main { width: min(1120px, 90%); margin: 0 auto; padding: 64px 0 90px; flex: 1; }

.admin-intro { max-width: 760px; margin-bottom: 34px; }

.admin-intro h1 {
  margin: 8px 0 16px;
  font-family: var(--heading);
  font-size: clamp(52px, 9vw, 90px);
  line-height: .9;
}

.admin-intro h1 span { color: #fff; }
.admin-intro > p, .admin-list-note { color: #fff; font-size: 13px; }

.admin-warning {
  margin-top: 22px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(110deg, rgba(230, 74, 53, .8), rgba(169, 51, 97, .72));
  border-left: 4px solid #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
}

.admin-panel {
  margin-top: 24px;
  padding: clamp(20px, 4vw, 34px);
  background: linear-gradient(145deg, rgba(255, 104, 71, .11), rgba(28, 36, 48, .96) 55%, rgba(49, 215, 206, .1));
  border: 1px solid rgba(255, 255, 255, .2);
}

.admin-panel h2 {
  margin: 8px 0 12px;
  font-family: var(--heading);
  font-size: 36px;
  line-height: 1;
}

.admin-panel > p { color: #fff; font-size: 12px; }
.admin-form { display: flex; flex-direction: column; gap: 10px; }

.admin-form label {
  margin-top: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%;
  padding: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid #536070;
}

.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: 1px solid #fff;
}

.admin-form textarea { resize: vertical; }
.admin-form .button { align-self: flex-start; margin-top: 12px; }
.admin-form .story-word-count { align-self: flex-start; }

.admin-notice {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: #fff;
  font-size: 12px;
}

.admin-notice.error { color: #fff; font-weight: 800; }

.admin-workspace { display: grid; gap: 24px; }
.admin-workspace .admin-panel { margin-top: 0; }
.admin-workspace-actions { display: flex; justify-content: flex-end; }
.admin-panel-accordion { padding: clamp(20px, 4vw, 34px); }
.admin-panel-accordion > summary { list-style: none; cursor: pointer; }
.admin-panel-accordion > summary::-webkit-details-marker { display: none; }
.admin-panel-accordion > summary::after {
  content: "+";
  flex-shrink: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.admin-panel-accordion[open] > summary::after { content: "−"; }
.admin-panel-accordion:not([open]) > summary { margin-bottom: 0; }
.admin-panel-accordion[open] > summary { margin-bottom: 22px; }
.admin-panel-content { min-width: 0; }
.admin-panel-tools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.admin-panel-tools .admin-list-note { margin-top: 0; }
.admin-panel-tools .button { flex-shrink: 0; }

.admin-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admin-panel-heading h2 { margin-bottom: 0; }
.admin-panel-heading .button { flex-shrink: 0; }
.admin-control-group {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.admin-control-group summary {
  padding: 16px 0;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.admin-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 18px;
}

.admin-control-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}

.admin-control-field input,
.admin-control-field textarea {
  width: 100%;
  min-width: 0;
  padding: 11px;
  color: #fff;
  background: #121820;
  border: 1px solid #536070;
  font: 12px var(--body);
  letter-spacing: normal;
}

.admin-control-field textarea { resize: vertical; }
.admin-control-field input:focus, .admin-control-field textarea:focus { outline: 1px solid #fff; }
.admin-control-field input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }

.admin-control-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.admin-control-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.admin-control-group + .admin-list-note { margin: 0 0 14px; }
.hero-story-selection { display: grid; gap: 8px; }
.hero-story-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.hero-story-option input { width: 16px; height: 16px; accent-color: var(--accent); }
.hero-story-option-copy { display: grid; gap: 4px; }
.hero-story-option-copy small { color: var(--muted); }
.admin-story-count { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px; }

.admin-story-list { display: grid; gap: 12px; }

.admin-story-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .15);
}

.admin-story-item > img { width: 120px; height: 84px; object-fit: cover; }
.admin-world-news-item { grid-template-columns: minmax(0, 1fr) auto; }
.admin-world-news-item.has-image { grid-template-columns: 120px minmax(0, 1fr) auto; }
.admin-submission-item { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto; }
.admin-submission-item .admin-submission-image-preview { min-width: 0; }
.admin-story-info { min-width: 0; }
.admin-story-info .section-kicker { font-size: 8px; }
.admin-story-info h3 { margin: 5px 0; font-family: var(--heading); font-size: 23px; line-height: 1.1; overflow-wrap: anywhere; }
.admin-story-info p { margin: 0; color: #fff; font-size: 10px; }
.admin-story-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.admin-edit-button { min-height: 40px; padding: 10px 13px; color: #fff; background: transparent; border-color: #fff; }
.admin-edit-button:hover { color: #000; background: #fff; }
.admin-delete-button {
  min-height: 40px;
  padding: 10px 13px;
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.admin-delete-button:hover { color: #000; background: #fff; }
.admin-restore-button { min-height: 40px; padding: 10px 13px; color: #fff; background: transparent; border-color: #fff; }
.admin-restore-button:hover { color: #000; background: #fff; }

@keyframes tickerMove {
  to { transform: translateX(-50%); }
}

@keyframes heroReveal {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

@keyframes contentReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1500px) {
  .section { padding-left: max(7%, calc((100% - 1300px) / 2)); padding-right: max(7%, calc((100% - 1300px) / 2)); }
}

@media (max-width: 950px) {
  .header { gap: 16px; }
  .nav { gap: 18px; }
  .header-cta { padding: 10px; font-size: 9px; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-feature { grid-column: 1 / -1; }
  .story-feature .story-image { height: 340px; }
  .story-image { height: 250px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submit-section { gap: 35px; padding-left: 7%; padding-right: 7%; }
  .build-card { height: 320px; }
}

.build-image-link { position: absolute; inset: 0; display: block; }
.build-image-link img { display: block; }
.build-overlay h3 a { color: inherit; }
.build-overlay h3 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 650px) {
  .announcement { font-size: 8px; letter-spacing: .6px; }
  .announcement-right { max-width: 45%; }
  .header { height: 70px; padding: 0 5%; }
  .logo { font-size: 31px; }
  .menu-toggle {
    display: block;
    margin-left: auto;
    border: 1px solid var(--line);
    padding: 8px 12px;
    background: transparent;
    color: white;
    font-size: 20px;
    cursor: pointer;
  }

  .header-actions { margin-left: 0; }
  .header-actions { gap: 4px; }
  .header-cta.account-trigger {
    display: block;
    max-width: 80px;
    padding: 8px 5px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    letter-spacing: .1px;
  }

  .nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 20px 5%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #151515;
    border-bottom: 1px solid var(--line);
  }

  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }

  .hero { height: 690px; min-height: 580px; max-height: 85svh; }
  .hero-image { background-position: 58% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(8,12,20,.76), rgba(8,12,20,.18)), linear-gradient(0deg, rgba(8,12,20,.55), transparent 80%); }
  .hero-content { margin-left: 6%; width: 88%; padding-bottom: 65px; }
  .hero h1 { font-size: clamp(70px, 17vw, 110px); letter-spacing: -2px; }
  .hero-slide h2 { font-size: clamp(50px, 13vw, 76px); letter-spacing: -1px; }
  .hero-content > p { font-size: 12px; }
  .button { padding: 12px 14px; font-size: 9px; }
  .hero-index { right: 105px; font-size: 8px; letter-spacing: .7px; }
  .hero-index .photo-credit { display: none; }
  .hero-controls { padding: 0 8px; }
  .hero-arrow { width: 34px; height: 68px; }
  .hero-arrow svg { width: 15px; height: 44px; }
  .hero-featured-stories { grid-template-columns: 1fr; gap: 7px; margin-top: 18px; }
  .hero-featured-story { min-height: auto; padding: 9px 12px; }
  .hero-featured-details { gap: 3px; }
  .hero-featured-details strong { font-size: 12px; }
  .hero-featured-details span { font-size: 9px; }
  .world-news-header { height: auto; min-height: 82px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .world-news-nav { flex-wrap: wrap; gap: 8px; }
  .world-news-nav .button { min-height: 40px; padding: 10px; font-size: 8px; }
  .world-news-main { padding-top: 42px; }
  .world-news-card { grid-template-columns: 1fr; }
  .world-news-card-image { height: 240px; min-height: 0; }
  .ticker-track { min-height: 42px; font-size: 15px; }

  .section { padding: 65px 5%; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 48px; }
  .text-link { font-size: 9px; }
  .story-filters { grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
  .story-filter-count { margin-bottom: 0; }
  .photo-submission-fields { grid-template-columns: 1fr; }

  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-feature { grid-column: auto; }
  .story-feature .story-image, .story-image { height: 260px; }
  .story-card h3 { font-size: 28px; }
  .news-grid { grid-template-columns: 1fr; }
  .photo-gallery-grid, .admin-gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-card { padding: 20px; }
  .news-card h3 { font-size: 27px; }

  .manifesto { grid-template-columns: 1fr; }
  .manifesto-image { min-height: 300px; }
  .manifesto-content { padding: 45px 6%; }
  .manifesto h2, .submit-section h2 { font-size: 49px; }

  .build-grid { grid-template-columns: 1fr; gap: 16px; }
  .build-card { height: 340px; }

  .submit-section { grid-template-columns: 1fr; padding: 65px 6%; gap: 25px; }
  .newsletter { padding: 40px 6%; gap: 18px; }
  .newsletter > p { max-width: 100%; }
  .footer { padding: 35px 6%; flex-direction: column; align-items: flex-start; gap: 12px; }
  .account-dialog { padding: 22px; }
  .admin-main { padding-top: 42px; }
  .admin-panel-heading { align-items: flex-start; }
  .admin-panel-tools { flex-direction: column; }
  .admin-control-grid { grid-template-columns: 1fr; }
  .photo-gallery-grid, .admin-gallery-list { grid-template-columns: 1fr; }
  .admin-story-item { grid-template-columns: 80px 1fr; gap: 12px; }
  .admin-story-item > img { width: 80px; height: 72px; }
  .admin-story-actions { grid-column: 2; justify-self: start; }
  .admin-world-news-item, .admin-world-news-item.has-image { grid-template-columns: 1fr; }
  .admin-world-news-item > img { width: 100%; height: 150px; }
  .admin-world-news-item .admin-story-actions { grid-column: 1; }
  .admin-story-item:not(.admin-world-news-item) { grid-template-columns: 1fr; }
  .admin-story-item:not(.admin-world-news-item) > img { width: 100%; height: 160px; }
  .admin-story-item:not(.admin-world-news-item) .admin-story-actions { grid-column: 1; }
  .admin-submission-item { grid-template-columns: minmax(0, 1fr); }
  .admin-submission-item .admin-submission-image-preview { width: 100%; max-width: 320px; }
  .admin-submission-item .admin-submission-image-preview img { max-height: 220px; }
  .admin-submission-item .admin-story-actions { grid-column: 1; }
}

@media (max-width: 380px) {
  .header { gap: 8px; }
  .logo { font-size: 21px; }
  .menu-toggle { padding: 7px 9px; }
  .header-cta.account-trigger { max-width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body, body *, body *::before, body *::after {
  font-style: oblique 12deg !important;
}