/* RCM News — Modern news-site CSS (keeps original color scheme) */

:root{
  /* Brand + visual system */
  --bg: #060607;
  --surface: rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.11);

  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.82);
  --muted: rgba(255,255,255,.62);
  --muted-2: rgba(255,255,255,.48);

  --accent: #ef6c57;            /* RaceCrewMedia red */
  --secondary: rgba(255,255,255,.18); /* neutral gray */
  --accent-2: rgba(239,108,87,.16);

  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.35);

  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --ring: 0 0 0 3px rgba(239,108,87,.22);

  --container: 1120px;
  --gutter: 18px;

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --gap: 16px;

  /* Typography */
  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-head: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html{
  color-scheme: dark;
}
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{ background: rgba(239,108,87,.55); color:#000; }

a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover{
  color:#fff;
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.78);
}

h1,h2,h3,h4{
  color:#fff;
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0 0 .6rem 0;
  font-family: var(--font-head);
}
h1{ font-size: clamp(2.15rem, 3.8vw, 3.25rem); }
h2{ font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
h3{ font-size: 1.12rem; }
p{ margin:0 0 1rem 0; color: var(--text-2); }

/* Layout helpers */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Home / category / article feed: wider shell so the center column reads wider */
.container:has(.home-layout){
  max-width: min(1360px, 98vw);
}
/* Simple pages (e.g. About) — wider main column than standard articles index */
.container.container--simple-wide{
  max-width: min(1720px, 94vw);
}
/* Photo gallery index: wider main column + footer (topbar stays default width so logo/nav align with home). */
.page-gallery-index .container,
.page-gallery-index .site-footer-inner{
  max-width: min(1400px, 96vw);
}
.page-gallery-index .hero{
  padding-top: 48px;
  padding-bottom: 18px;
}
.page-gallery-index .hero h1{
  font-size: clamp(2.85rem, 6vw, 4.15rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.65rem;
}
.page-gallery-index .gallery-index-hero-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}
.page-gallery-index .gallery-index-hero-main{
  flex: 1 1 auto;
  min-width: min(100%, 240px);
}
/* When the header ad is shown, keep the title column from eating the row so the ad can use large formats (970×90, wide custom HTML). */
.page-gallery-index .gallery-index-hero-row:not(.gallery-index-hero-row--solo) .gallery-index-hero-main{
  flex: 1 1 220px;
  max-width: min(100%, 520px);
}
/* Leaderboard 728×90, large leaderboard ~970×90, very wide custom blocks — cap scales with viewport. */
.page-gallery-index .gallery-index-hero-ad{
  flex: 2 1 360px;
  margin-left: auto;
  width: 100%;
  max-width: min(100%, min(1320px, calc(100vw - 2 * var(--gutter))));
  align-self: center;
}
.page-gallery-index .ad.ad--gallery-index-header{
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.page-gallery-index .ad.ad--gallery-index-header ins.adsbygoogle{
  display: block;
  min-height: 90px;
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 720px){
  .page-gallery-index .gallery-index-hero-ad{
    flex: 1 1 100%;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    align-self: stretch;
  }
  .page-gallery-index .gallery-index-hero-row:not(.gallery-index-hero-row--solo) .gallery-index-hero-main{
    flex: 1 1 100%;
  }
}
.page-gallery-index .gallery-index-title{
  text-align: center;
  font-size: 1.0625rem;
  padding: 14px 14px 16px;
  line-height: 1.35;
}
.stack{ display:flex; flex-direction:column; gap: var(--gap); }
.row{ display:flex; gap: var(--gap); align-items:center; }

/* Shell background (subtle) */
.shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(239,108,87,.14), transparent 60%),
    radial-gradient(1000px 500px at 85% 20%, rgba(255,255,255,.08), transparent 55%),
    var(--bg);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.topbar.is-scrolled{
  border-bottom-color: rgba(239,108,87,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  background: rgba(0,0,0,.78);
}
.topbar .inner{
  /* Match .container:has(.home-layout) so nav pills line up with the right sidebar edge */
  max-width: min(1360px, 98vw);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.brand a{ display:inline-flex; align-items:center; }
.brand img{ width: min(192px, 22vw); height:auto; display:block; object-fit:contain; }

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.nav-toggle-icon{
  font-size: 1.05rem;
  line-height: 1;
}
.nav-toggle-text{
  font-size: .78rem;
}
.nav-toggle:hover{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.12);
}

.menu{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Topbar search */
.topbar-search{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.topbar-search-input{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: .9rem;
  width: 180px;
}
.topbar-search-input::placeholder{
  color: rgba(255,255,255,.55);
}
.topbar-search-btn{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.topbar-search-btn:hover{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.12);
}
.topbar-search--page{
  width: 100%;
  justify-content: space-between;
  padding: 10px 12px;
}
.topbar-search--page .topbar-search-input{
  width: 100%;
  min-width: 0;
  font-size: 1rem;
}

/* Spyglass button in topbar */
.topbar-search-icon{
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
}
.topbar-search-icon svg{
  display: block;
  width: 30px;
  height: 30px;
  opacity: .9;
}
.topbar-search-icon:hover svg{
  opacity: 1;
}

/* Modal */
body.modal-open{
  overflow: hidden;
}
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
}
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(6px);
}
.modal-panel{
  position: relative;
  width: min(720px, calc(100vw - 2 * var(--gutter)));
  margin: 10vh auto 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.86);
  box-shadow: var(--shadow);
  padding: 16px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-title{
  font-weight: 800;
  letter-spacing: -.01em;
  color:#fff;
}
.modal-close{
  cursor:pointer;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1;
}
.modal-close:hover{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.10);
}
.modal-search-form{
  display:flex;
  align-items:center;
  gap: 10px;
}
.modal-search-input{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  padding: 12px 14px;
  font-size: 1.05rem;
  outline: none;
}
.modal-search-input:focus{
  box-shadow: var(--ring);
  border-color: rgba(239,108,87,.45);
}
.modal-help{
  margin-top: 10px;
  color: rgba(255,255,255,.62);
  font-size: .92rem;
}
.global-search-panel{
  max-width: min(640px, 96vw);
}
.global-search-live{
  margin-top: 14px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
}
.global-search-group{
  margin-bottom: 14px;
}
.global-search-group-label{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}
.global-search-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-search-hit{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
}
.global-search-hit:hover,
.global-search-hit:focus-visible{
  border-color: rgba(239,108,87,.35);
  background: rgba(239,108,87,.08);
}
.global-search-hit-thumb{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.global-search-hit-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.global-search-hit-body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.global-search-hit-title{
  font-weight: 600;
  color: rgba(255,255,255,.94);
  line-height: 1.25;
}
.global-search-hit-meta{
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
}
.global-search-msg{
  margin: 0;
  font-size: .92rem;
  color: rgba(255,255,255,.62);
}
.global-search-msg--err{
  color: rgba(248,165,165,.95);
}
.global-search-more{
  margin: 8px 0 0;
  text-align: center;
  font-size: .92rem;
}
.global-search-more a{
  color: rgba(239,160,87,.95);
}
.global-search-hint kbd{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  font-size: .85em;
}
@media (min-width: 901px){
  .topbar .inner > .menu{
    margin-left: auto;
  }
}
.topbar .menu .pill{
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .02em;
  min-height: 42px;
  padding: 0 18px;
}
/* Search only: quieter chrome; same typography rules do not apply (icon-only) */
.topbar .menu .topbar-search-icon.pill--utility{
  font-size: inherit;
  font-weight: inherit;
}
/* Chevron sits beside label (flex sibling) — avoids overlap on “Drag Racing” */
.topbar .dropdown-toggle{
  padding-right: 18px;
}
.topbar .dropdown-toggle:after{
  position: static;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: 6px;
}
.topbar .dropdown:hover .dropdown-toggle:after,
.topbar .dropdown:focus-within .dropdown-toggle:after{
  margin-top: 0;
}
.pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.02) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.35);
  color: rgba(255,255,255,.88);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}
.pill:hover{
  border-color: rgba(239,108,87,.45);
  background: linear-gradient(
    180deg,
    rgba(239,108,87,.14) 0%,
    rgba(239,108,87,.06) 100%
  );
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 14px rgba(239,108,87,.15);
  transform: translateY(-1px);
  text-decoration: none;
}
.pill:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.pill:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}
.pill.primary,
.pill[aria-current="page"]{
  border-color: transparent;
  background: linear-gradient(135deg, #f07862 0%, #e05a44 48%, #c94a38 100%);
  color: #fff;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 16px rgba(239,108,87,.35);
}
.pill.primary:hover,
.pill[aria-current="page"]:hover{
  background: linear-gradient(135deg, #f58572 0%, #e86850 48%, #d45542 100%);
  border-color: transparent;
  transform: translateY(-1px);
}
.pill--utility{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-size: .78rem;
}
.pill--utility:hover{
  color: #fff;
}

/* Dropdown (topbar categories) */
.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dropdown-toggle{
  position: relative;
  padding-right: 30px;
}
.dropdown-toggle:after{
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .2s ease;
}
.dropdown:hover .dropdown-toggle:after,
.dropdown:focus-within .dropdown-toggle:after{
  transform: rotate(180deg);
  margin-top: -3px;
}
.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  /* Top padding bridges the gap under the toggle so :hover stays on .dropdown
     while moving the pointer to the menu (no dead zone). */
  padding: 10px 8px 8px 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  /* Opaque base so text stays readable if backdrop-filter fails (some GPUs / overlay contexts) */
  background-color: #141416;
  background-image: linear-gradient(180deg, rgba(28,28,32,.98), rgba(18,18,22,.99));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color-scheme: dark;
  box-shadow: var(--shadow-soft);
  display: none;
  z-index: 30;
}
.dropdown-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  letter-spacing: .02em;
}
.dropdown-menu a.dropdown-item:visited{
  color: rgba(255,255,255,.92);
}
.dropdown-item:hover{
  background: rgba(239,108,87,.12);
  border: 1px solid rgba(239,108,87,.35);
  text-decoration: none;
}
.dropdown-item.is-active{
  background: rgba(239,108,87,.16);
  border: 1px solid rgba(239,108,87,.45);
  color: #fff;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display: block;
}

/* Abbreviated visible labels on small screens (full phrase in aria-label on the link) */
.nav-topbar-abbr-sm{
  display: none;
}
@media (max-width: 900px){
  .nav-topbar-abbr .nav-topbar-abbr-lg{
    display: none;
  }
  .nav-topbar-abbr .nav-topbar-abbr-sm{
    display: inline;
  }
}

@media (max-width: 900px){
  .topbar .inner{
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .nav-toggle{
    display: inline-flex;
    gap: 6px;
    padding: 9px 12px;
  }
  .nav-toggle-text{
    display: none;
  }
  .menu{
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    flex-basis: 100%;
    margin-top: 4px;
    padding: 8px 10px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(0,0,0,.42);
  }
  .topbar.is-open .menu{
    display: flex;
  }
  .menu .pill{
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    font-size: 1rem;
    letter-spacing: .02em;
  }
  .menu .topbar-search-icon{
    width: 50px;
    min-width: 50px;
    height: 50px;
    align-self: center;
  }
  .menu .topbar-search-icon svg{
    width: 28px;
    height: 28px;
  }
  .dropdown{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Drag series submenu: hidden on touch/small viewports — main “Drag Racing” link is enough; desktop keeps hover menu */
  .dropdown-menu{
    display: none !important;
  }
  .dropdown-toggle{
    width: 100%;
    justify-content: center;
    padding-right: 12px;
  }
  .dropdown-toggle:after{
    content: none;
  }
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    display: none !important;
  }
}

/* Hero */
.hero{ padding: 42px 0 10px 0; }
.hero p{ color: var(--muted); max-width: 60ch; }
@media (max-width: 700px){
  .hero{ padding: 26px 0 6px 0; }
  .brand img{ width: min(172px, 44vw); }
}

/* Home: tighten spacing when a top ad is present in the hero */
.page-home.page-home--has-top-ad .hero{ padding-top: 26px; padding-bottom: 6px; }
@media (max-width: 700px){
  .page-home.page-home--has-top-ad .hero{ padding-top: 18px; padding-bottom: 4px; }
}

/* Cards / grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.card{
  grid-column: span 6;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: rgba(239,108,87,.35);
}
.meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  color: var(--muted-2);
  font-size: .88rem;
  margin-bottom: 10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.14);
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
}
.tag:hover{
  border-color: rgba(239,108,87,.45);
  text-decoration:none;
}
.excerpt{ color: rgba(255,255,255,.82); margin: 0 0 12px 0; }
.actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color:#fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.btn:hover{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.10);
  text-decoration:none;
}
.btn.primary{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.18);
}
.btn.btn-sm{
  padding: 8px 14px;
  font-size: .78rem;
  letter-spacing: .07em;
}

@media (max-width: 900px){
  .card{ grid-column: span 12; }
}

/* Category archive: two article cards per row on the widened main column */
@media (min-width: 901px){
  body.page-category .home-main .grid .card{
    grid-column: span 6;
  }
}
body.page-category .home-main .grid{
  align-items: stretch;
}
body.page-category .home-main .grid .card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body.page-category .home-main .grid .card .actions{
  margin-top: auto;
  padding-top: 12px;
  justify-content: flex-start;
  align-self: flex-start;
}
body.page-category .home-main .card .home-feed-hero img.hero-img{
  max-height: 200px;
}

/* Article page */
.article{
  max-width: 980px;
  margin: 0 auto;
}
.article .meta{
  margin-bottom: 14px;
}
.article-type-pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(239, 108, 87, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  font-weight: 600;
}
.article .prose .article-embed{
  margin: 1.35rem auto;
  max-width: 100%;
}
.article .prose .article-embed iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 200px;
  border: 0;
  border-radius: var(--radius-lg);
}
.home-article-type-badge{
  margin: 0 0 6px 0;
  text-align: left;
}
.home-article-type-badge span{
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: 999px;
}
.home-feed-hero--video{
  position: relative;
}
.home-feed-hero--video .home-feed-hero-link::after{
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.category-article-type-badge{
  margin: 0 0 8px 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(239, 108, 87, 0.95);
  font-weight: 650;
}
.article .prose{
  max-width: 78ch;
  margin: 0 auto;
  color: var(--text-2);
  font-size: 1.06rem;
  line-height: 1.9;
}
.article .prose p{ margin-bottom: 1.05rem; }
.article .prose h2{ margin-top: 1.75rem; margin-bottom: .7rem; }
.article .prose h3{ margin-top: 1.35rem; margin-bottom: .6rem; }
.article .prose ul,
.article .prose ol{ padding-left: 1.25rem; margin: 0 0 1.1rem 0; }
.article .prose li{ margin: .35rem 0; color: var(--text-2); }
.article .prose sub,
.article .prose sup{
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article .prose sub{ vertical-align: sub; }
.article .prose sup{ vertical-align: super; }
.article .prose blockquote{
  margin: 1.1rem 0;
  padding: .85rem 1rem;
  border-left: 3px solid rgba(239,108,87,.55);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  color: rgba(255,255,255,.86);
}
.article .prose blockquote p:last-child{ margin-bottom: 0; }
body.page-article .shell > .container{
  padding-top: 28px;
}
.page-article .article-main-head{
  text-align: left;
  margin-bottom: 0;
}
.page-article .article-main-head h1{
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.page-article .article-main-meta{
  margin-bottom: 0;
}
.page-article .article-photos-by{
  margin: 10px 0 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}
.page-article .article-photos-by a{
  color: rgba(255, 218, 200, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(239, 108, 87, 0.52);
  text-underline-offset: 2px;
}
.page-article .article-photos-by a:hover{
  color: #fff;
}
.page-article .article-main-head + .prose{
  margin-top: 1rem;
}
.article-hero-wrap{
  margin: 18px 0;
  max-width: 100%;
  overflow: hidden;
}
/* Photo gallery posts: hero opens external gallery (not lightbox) */
.article-hero-gallery-link{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  outline-offset: 3px;
}
.article-hero-gallery-link:hover .hero-img,
.article-hero-gallery-link:focus-visible .hero-img{
  border-color: rgba(239,108,87,.45);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.article-hero-gallery-link:focus-visible{
  outline: 2px solid rgba(239,108,87,.75);
}
.article .hero-img,
.article-hero-wrap .hero-img{
  width:100%;
  max-width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.prose{
  color: rgba(255,255,255,.86);
  font-size: 1.06rem;
  line-height: 1.85;
}
/* Distinct links in body copy (better vs paragraph text + focus) */
.prose a{
  color: rgba(255, 218, 200, 0.98);
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.72);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  font-weight: 500;
}
.prose a:hover{
  color: #fff;
  text-decoration-color: rgba(239,108,87,.92);
}
.prose a:focus-visible{
  outline: 2px solid rgba(239,108,87,.92);
  outline-offset: 3px;
  border-radius: 4px;
}
.prose img{
  max-width:100%;
  height:auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
}

/* About — intro + photographer roster */
.about-page .about-page-lead{
  margin: 0 auto 1.5rem auto;
  max-width: 75ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1.75;
}
.about-page .about-photographers-heading{
  margin: 0 0 1.1rem 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.02em;
}
.about-page .about-team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin: 0 0 0.5rem 0;
  align-items: start;
}
@media (max-width: 900px){
  .about-page .about-team-grid{
    grid-template-columns: 1fr;
  }
}
@media (min-width: 901px) and (max-width: 1100px){
  .about-page .about-team-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
.about-team-card{
  text-align: center;
}
.about-page .about-team-photo{
  display: block;
  max-width: min(280px, 100%);
  margin: 0 auto 1rem auto;
  text-decoration: none;
}
.about-team-photo:hover img{
  opacity: 0.94;
}
.about-page .about-team-photo img{
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: min(48vh, 400px);
  height: auto;
  object-fit: cover;
}
.about-team-name{
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin: 0 0 0.35rem 0;
}
.about-team-role{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.about-team-cta{
  text-align: center;
  margin: 2rem 0 0 0;
  font-size: 1.05rem;
}

/* Media kit (advertisers & press) */
.media-kit-page .media-kit-lead{
  margin: 0 auto 1.5rem auto;
  max-width: 75ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1.75;
}
.media-kit-page .media-kit-cta{
  margin: 1.5rem 0 0.25rem 0;
}
.media-kit-page .media-kit-updated{
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Article gallery (below prose) */
.article-gallery{
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
}
.article-gallery h3{
  color: #fff;
  margin: 0 0 1rem 0;
}
.article-gallery-figure{
  margin: 1.1rem 0;
}
.article-gallery-photo-frame{
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}
.article-gallery-figure .lightbox-trigger{
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.article-gallery-figure img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.article-gallery-photo-credit{
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.35;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.14);
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  pointer-events: auto;
  text-align: right;
}
.article-gallery-photo-credit a{
  color: rgba(255, 230, 214, 0.98);
  text-decoration: underline;
  text-decoration-color: rgba(239, 108, 87, 0.65);
  pointer-events: auto;
}
.article-gallery-photo-credit a:hover{
  color: #fff;
}
.article-gallery-caption{
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* Content graph: articles ↔ galleries ↔ events */
.content-graph-gallery-cta{
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.content-graph-gallery-cta__inner{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.content-graph-gallery-cta__thumb{
  flex: 0 0 auto;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.content-graph-gallery-cta__thumb img{
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
}
.content-graph-gallery-cta__kicker{
  margin: 0 0 .25rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.content-graph-gallery-cta__title{
  margin: 0 0 .65rem;
  font-size: 1.05rem;
  font-weight: 650;
}
.content-graph-gallery-cta__title a{
  color: inherit;
  text-decoration: none;
}
.content-graph-gallery-cta__title a:hover{
  color: var(--accent);
}
.content-graph-related{
  margin: 2rem 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.content-graph-related--gallery-page{
  margin-top: 2.5rem;
}
.content-graph-related__heading{
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
.content-graph-related__sub{
  margin: 0 0 .5rem;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}
.content-graph-related__group + .content-graph-related__group{
  margin-top: 1rem;
}
.content-graph-related__list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-graph-related__item{
  margin: 0 0 .45rem;
  line-height: 1.45;
}
.content-graph-related__item a{
  color: var(--text);
  text-decoration: none;
}
.content-graph-related__item a:hover{
  color: var(--accent);
  text-decoration: underline;
}
.content-graph-related__badge{
  font-size: .78rem;
  color: var(--muted);
}
.search-result-crosslinks a{
  color: var(--accent);
  text-decoration: none;
}
.search-result-crosslinks a:hover{
  text-decoration: underline;
}

/* Lightbox — nearly full-screen image modal */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  z-index: 1000;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  box-sizing: border-box;
}
.lightbox.is-open{ display: flex; }
.lightbox-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.lightbox-img{
  display: block;
  max-width: min(96vw, 100%);
  max-height: min(96vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
/* Article detail page only — hero & inline images open lightbox */
body.page-article .article-hero-wrap .hero-img,
body.page-article .home-main .prose img{
  cursor: zoom-in;
}
body.page-article .article-hero-wrap a.article-hero-gallery-link .hero-img{
  cursor: pointer;
}

/* Listing cards: hero is a link to the story, not a zoom/lightbox target */
.home-article .home-feed-hero .hero-img,
.card .home-feed-hero img.hero-img,
.card .home-feed-hero img{
  cursor: pointer;
}
.lightbox-close{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1001;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}
.lightbox-close:hover{
  border-color: rgba(239,108,87,.55);
  background: rgba(239,108,87,.12);
}

/* Article — share this story */
.article-share{
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
}
.article-share-heading{
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.92);
}
.article-share-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.article-share-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.article-share-btn:hover,
.article-share-btn:focus-visible{
  color: #fff;
  border-color: rgba(239,108,87,.45);
  background: rgba(239,108,87,.14);
  text-decoration: none;
}
.article-share-btn:focus-visible{
  outline: 2px solid rgba(239,108,87,.55);
  outline-offset: 2px;
}
.article-share-btn--facebook:hover,
.article-share-btn--facebook:focus-visible{
  border-color: rgba(24,119,242,.5);
  background: rgba(24,119,242,.18);
}
.article-share-btn--twitter:hover,
.article-share-btn--twitter:focus-visible{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

/* Article end — RaceCrewMedia social follow row */
.article-social-wrap{
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.5rem;
}
.article-social-heading{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px 0;
}
.article-social-heading-text{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.article-social-heading-bar{
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: rgba(255,255,255,.14);
}
nav.article-social.site-footer-social{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Ad container — single solid outline on this div only (no dashed/dotted) */
.ad{
  border: 1px solid rgba(255,255,255,.12);
  border-style: solid;
  border-radius: 10px;
  padding: 10px;
  background: rgba(0,0,0,.14);
}
.ad:empty{
  display: none;
}

/* Per-slot “Hide on mobile layout” — narrow viewports (desktop UA still skips scripts via PHP when configured) */
@media (max-width: 900px) {
  .ad.ad-slot-hide-mobile-layout{
    display: none !important;
  }
}

.ad:has(ins.adsbygoogle){
  border-color: rgba(255,255,255,.1);
  border-style: solid;
  background: rgba(0,0,0,.1);
  padding: 8px;
}
/* AdSense often wraps an iframe; remove default frame that can read as dotted lines */
.ad ins.adsbygoogle{
  border: 0;
  outline: none;
}
/* AdSense → first-party fallback (see Ads::buildAdsenseUnitHtml) */
.ad-rcm-primary--suppressed{
  display: none !important;
}
.ad-rcm-fallback-wrap .ad-rcm-fallback:not([hidden]){
  display: block;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
}
.ad-rcm-fallback-wrap .ad-rcm-fallback:not([hidden]) img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.ad-rcm-fallback--direct{
  display: block;
  text-align: center;
}
.ad-rcm-fallback--direct img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* House / sponsor fallback (transparent logos on dark pages) */
.ad-house-sponsor{
  max-width: 320px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.ad-house-sponsor__label{
  padding: 6px 12px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ad-house-sponsor__link{
  display: block;
  text-decoration: none;
  padding: 16px 20px 18px;
  background: linear-gradient(165deg, #fafafa 0%, #ececef 48%, #e2e4e8 100%);
  transition: filter .2s ease;
}
.ad-house-sponsor__link:hover{
  filter: brightness(1.03);
}
.ad-house-sponsor__link img{
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
}
.ad-house-sponsor__link--static{
  cursor: default;
}
.ad-house-sponsor__name{
  display: block;
  font-size: 1.05rem;
  font-weight: 650;
  text-align: center;
  color: #1a1a1e;
}
.ad iframe{
  border: 0;
}
/* Placeholder text only; border is on the outer .ad */
.ad .ad-slot-placeholder{
  margin: 0;
  padding: 10px 8px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.45;
  color: rgba(255,255,255,.4);
  letter-spacing: .03em;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Main-column article ads (outline matches standalone .ad) */
.ad.ad--article-top{
  margin: 0 0 18px 0;
}
.ad.ad--article-inline{
  margin: 26px 0;
}

/* Mid-article scroll-through ad (Drag Illustrated / Zox post-ad): text scrolls, ad holds, text returns */
.page-article .prose .ad-scroll-slot-mount{
  margin: 0;
  padding: 0;
}
.page-article .ad-scroll-slot{
  /* Clear sticky topbar; center ad block in the remaining viewport (DI uses ~150px top) */
  --rcm-scroll-ad-topbar: clamp(5rem, 12vh, 6.5rem);
  --rcm-scroll-ad-block: clamp(220px, 32vh, 320px);
  --rcm-scroll-ad-top: max(
    var(--rcm-scroll-ad-topbar),
    calc((100dvh - var(--rcm-scroll-ad-block)) / 2)
  );
  --rcm-scroll-ad-runway: calc(100dvh - var(--rcm-scroll-ad-top) - 2rem);
  position: relative;
  margin: 2.5rem 0;
  width: 100%;
  clear: both;
}
.page-article .ad-scroll-slot__cue{
  display: block;
  margin: 0 0 1rem;
  padding: 0 1rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.02em;
  font-weight: 500;
}
/* Viewport-tall runway: scroll distance while the ad stays on screen (Zox clip + fixed) */
.page-article .ad-scroll-slot__runway{
  position: relative;
  width: 100%;
  height: var(--rcm-scroll-ad-runway);
  margin: 0;
}
.page-article .ad-scroll-slot__clip{
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.page-article .ad-scroll-slot__fixed{
  position: fixed;
  top: var(--rcm-scroll-ad-top);
  left: 0;
  width: 100%;
  z-index: 3;
  margin: 0;
  padding: 0.75rem 0 1.25rem;
  box-sizing: border-box;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.page-article .ad-scroll-slot__fixed.is-positioned{
  visibility: visible;
}
.page-article .ad-scroll-slot__fixed .ad.ad--article-inline-scroll{
  margin: 0 auto;
  width: 100%;
  max-width: min(728px, 100%);
  min-width: 280px;
}
.page-article .ad-scroll-slot .ad-rcm-track,
.page-article .ad-scroll-slot .ad-rcm-fallback-wrap{
  width: 100%;
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
.page-article .ad-scroll-slot ins.adsbygoogle{
  display: block;
  min-height: 90px;
}

@media (prefers-reduced-motion: reduce){
  .page-article .ad-scroll-slot__runway{
    height: auto;
    min-height: 0;
  }
  .page-article .ad-scroll-slot__clip{
    clip: auto;
    clip-path: none;
    overflow: visible;
    position: static;
    height: auto;
  }
  .page-article .ad-scroll-slot__fixed{
    position: static;
    visibility: visible;
    left: auto;
    width: 100%;
    transform: none;
    padding: 0.5rem 0 1rem;
  }
}

/* Rail “Sponsored”: one solid outline on the .ad div (same for placeholder, custom HTML, or AdSense) */
.sidebar-panel > .ad.ad--in-panel{
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-style: solid;
  border-radius: 8px;
  padding: 8px;
  background: rgba(0,0,0,.1);
}
.sidebar-panel > .ad.ad--in-panel:has(ins.adsbygoogle){
  border-color: rgba(255,255,255,.1);
  border-style: solid;
  background: rgba(0,0,0,.08);
}

/* Admin (basic cleanup of template classes) */
.header-bar{
  background: rgba(0,0,0,.82);
  border-right: 1px solid rgba(255,255,255,.08);
}
.header-bar .site-logo a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.header-bar .site-logo img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display:block;
}
.main-menu a{
  border-radius: 999px;
  padding: 8px 10px;
}
.main-menu li.active a{
  background: rgba(239,108,87,.18);
  border: 1px solid rgba(239,108,87,.55);
}

.form-control{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background-color: rgba(22,22,26,.92);
  color: rgba(255,255,255,.96);
}
.form-control:focus{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(239,108,87,.55);
}
/* Native selects: avoid OS light popover + light text; pair with html { color-scheme: dark } */
select.form-control{
  color-scheme: dark;
  background-color: rgba(22,22,26,.95);
  color: rgba(255,255,255,.96);
}
select.form-control option{
  background-color: #1c1c20;
  color: rgba(255,255,255,.95);
}

textarea.form-control{
  resize: vertical;
  min-height: 96px;
}

/* Public account page (account.php) */
.page-account .container{
  max-width: min(1400px, 96vw);
}
.account-page-grid > .account-card{
  max-width: min(100%, 520px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.account-page-single{
  max-width: min(100%, 960px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.account-shell{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.page-account .account-shell{
  max-width: none;
}
.account-shell > .account-shell__nav,
.account-shell > .account-shell__main,
.account-shell .account-section.card{
  grid-column: unset;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 900px){
  .account-shell{
    flex-direction: row;
    align-items: flex-start;
  }
  .account-shell__nav{
    flex: 0 0 280px;
    width: 280px;
    position: sticky;
    top: 1rem;
  }
  .account-shell__main{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .account-shell__panels{
    width: 100%;
  }
}
.account-shell__nav{
  max-width: none;
  margin: 0;
  padding: 16px;
}
.account-shell__user{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.account-shell__user-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.account-shell__name{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.account-shell__email{
  margin: 0;
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.account-shell__signout{
  margin: 0;
  flex: 0 0 auto;
}
.account-shell__signout .btn{
  white-space: nowrap;
}
.account-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-nav__link{
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.account-nav__link:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.account-nav__link.is-active{
  color: #fff;
  background: rgba(239,108,87,.18);
  border-color: rgba(239,108,87,.45);
}
.account-nav__footer{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.account-nav__link--portal{
  font-weight: 600;
}
.account-shell__roles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.account-role-badge{
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  text-align: left;
  line-height: 1.3;
  white-space: normal;
}
.account-profile-public-link{
  margin: 0 0 1rem;
}
/* Account home dashboard */
.account-home{
  width: 100%;
}
.account-home__header{
  margin-bottom: 1.25rem;
}
.account-home__title{
  margin: 0 0 6px;
}
.account-home__lead{
  margin: 0;
  max-width: 52em;
}
.account-home__alerts{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.account-home__alert{
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.45;
  background: rgba(239,108,87,.1);
  border: 1px solid rgba(239,108,87,.28);
}
.account-home__alert-text a{
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-home__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.account-home__grid--single{
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}
.account-home__card{
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.1);
  min-width: 0;
}
.account-home__card-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 16px;
}
.account-home__card-title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
}
.account-home__card-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.account-home__kpis{
  display: grid;
  grid-template-columns: repeat(var(--account-home-kpi-cols, 3), minmax(0, 1fr));
  gap: 10px;
}
.account-home__kpi{
  text-align: center;
  padding: 14px 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.account-home__kpi-value{
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.account-home__kpi-label{
  display: block;
  margin-top: 6px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
}
@media (max-width: 900px){
  .account-home__grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px){
  .account-home__card{
    padding: 16px;
  }
  .account-home__card-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .account-home__card-actions{
    width: 100%;
  }
  .account-home__card-actions .btn{
    flex: 1 1 auto;
    text-align: center;
  }
}
.account-assignment-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-assignment-list__item{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}
.account-assignment-list__head{
  margin: 0 0 6px;
  font-size: 1rem;
}
.account-assignment-list__venue,
.account-assignment-list__meta{
  margin: 0 0 6px;
  font-size: .92rem;
}
.account-assignment-list__actions{
  margin: 10px 0 0;
}
.account-assignment-status{
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.account-assignment-status--offered,
.account-assignment-status--confirmed{
  background: rgba(100,180,255,.2);
}
.account-assignment-status--in_progress{
  background: rgba(239,108,87,.2);
}
.account-assignment-status--completed{
  background: rgba(80,200,120,.2);
}
.account-assignment-status--cancelled{
  background: rgba(255,255,255,.08);
  opacity: .75;
}
.account-shell__main{
  min-width: 0;
  width: 100%;
  display: block;
  flex: 1 1 0;
}
.account-shell__panels{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.account-shell__panels > .account-section.card{
  grid-area: 1 / 1;
  width: 100%;
  min-width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.account-section[hidden]{
  display: none !important;
}
/* Keep hidden tab panels in the grid so column width matches the widest section (assignments). */
.account-shell__panels > .account-section[hidden]{
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
.account-shell__panels > .account-section:not([hidden]){
  position: relative;
  z-index: 1;
}
.account-section__title{
  margin: 0 0 6px;
  font-size: 1.25rem;
}
.account-section__lead{
  margin: 0 0 16px;
}
.account-card{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 899px){
  .account-shell__nav{
    width: 100%;
    flex: none;
    position: static;
  }
  .account-nav__list{
    flex-direction: column;
  }
  .account-nav__link{
    text-align: left;
  }
}
.account-field{
  margin-bottom: 14px;
}
.account-field label{
  display:block;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
  margin-bottom: 6px;
}
.account-form .actions{
  margin-top: 6px;
}
.account-email{
  color: rgba(255,255,255,.88);
}
.account-avatar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px 18px;
}
.account-avatar-thumb-wrap{
  flex:0 0 auto;
}
.account-avatar-thumb{
  display:block;
  width:112px;
  height:112px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.2);
}
.account-inline-check{
  font-size:.92rem;
  color:rgba(255,255,255,.82);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.account-inline-check input{
  margin:0;
}
.account-flash{
  max-width: min(100%, 1120px);
  margin: 0 auto 16px auto;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .95rem;
}
.account-flash-success{
  border-color: rgba(139,195,74,.40);
  background: rgba(139,195,74,.14);
  color: rgba(255,255,255,.92);
}
.account-flash-error{
  border-color: rgba(239,108,87,.45);
  background: rgba(239,108,87,.14);
  color: rgba(255,255,255,.92);
}
.account-flash-warning{
  border-color: rgba(240,173,78,.55);
  background: rgba(240,173,78,.16);
  color: rgba(255,255,255,.92);
}
.account-request-status--pending{
  color: #f0c878;
}
.account-request-status--approved{
  color: #8bc34a;
}
.account-request-status--denied{
  color: #ef6c57;
}
.account-subsection-title{
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  font-weight: 650;
}
.account-request-list{
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.account-request-list-item{
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.account-request-list-item__head{
  margin: 0 0 4px;
}
.account-request-list-item__meta{
  margin: 0;
  font-size: .92rem;
}
.account-request-note{
  margin: 8px 0 0;
  font-size: .9rem;
}
.account-approved-detail{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(139,195,74,.35);
  background: rgba(139,195,74,.08);
}
.account-approved-detail__title{
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 650;
}
.account-approved-detail__dl{
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 4px 12px;
  font-size: .92rem;
}
.account-approved-detail__dl dt{
  margin: 0;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}
.account-approved-detail__dl dd{
  margin: 0;
  color: rgba(255,255,255,.9);
}
.account-approved-detail__help{
  margin: 0;
  font-size: .9rem;
}
.account-payout-summary{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
.account-payout-summary__item{
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.18);
}
.account-payout-summary__k{
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.account-payout-summary__v{
  font-size: 1.1rem;
  font-weight: 650;
  color: #fff;
}
.account-table-wrap{
  overflow-x: auto;
}
.account-payout-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.account-payout-table th,
.account-payout-table td{
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.account-payout-table th{
  color: rgba(255,255,255,.6);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.account-payout-table__note td{
  padding-top: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.account-payout-status{
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
}
.account-payout-status--pending{ color: rgba(255, 218, 140, .95); }
.account-payout-status--approved{ color: rgba(139, 195, 74, .95); }
.account-payout-status--paid{ color: rgba(160, 220, 255, .95); }
.account-payout-status--cancelled{ color: rgba(255,255,255,.45); }
.account-recovery-codes{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(239,108,87,.45);
  background: rgba(0,0,0,.22);
}
.account-recovery-codes__list{
  margin: 8px 0 0 18px;
  font-family: ui-monospace, monospace;
  font-size: .9rem;
}

/* Home: full articles + sidebar filters */
.home-layout{
  display:grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
}
@media (min-width: 981px){
  /* Desktop: pull side rails toward the middle column (same as index.php + article.php) */
  body.page-home .home-layout,
  body.page-article .home-layout{
    justify-content: center;
    grid-template-columns: 180px minmax(0, 680px) 220px;
  }
  body.page-home .home-main,
  body.page-article .home-main{
    justify-self: stretch;
  }
  /* Category listing: use space between left ad and right sidebar (no 680px cap) */
  body.page-category .home-layout{
    grid-template-columns: minmax(140px, 168px) minmax(0, 1fr) minmax(180px, 210px);
    gap: clamp(14px, 1.6vw, 22px);
    justify-content: stretch;
  }
  body.page-category .home-main{
    max-width: none;
    justify-self: stretch;
  }
}
.home-left-rail{
  position: sticky;
  top: 136px;
  align-self: start;
}
.home-main{
  min-width: 0;
  max-width: min(680px, 100%);
  width: 100%;
  justify-self: center;
}
body.page-category .home-main{
  max-width: none;
  justify-self: stretch;
}
.home-sidebar{
  position: sticky;
  top: 136px;
  align-self: start;
}
.sidebar-panel{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 12px;
  margin-bottom: 14px;
}
.sidebar-heading{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 10px 0;
}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.sidebar-link{
  display:block;
  padding: 7px 8px;
  border-radius: 10px;
  color: rgba(255,255,255,.88);
  font-size: .88rem;
  border: 1px solid transparent;
  text-decoration:none;
}
.sidebar-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(239,108,87,.25);
  text-decoration:none;
}
.sidebar-link.is-active{
  background: rgba(239,108,87,.14);
  border-color: rgba(239,108,87,.35);
  color:#fff;
}
.home-article{
  --home-card-pad: clamp(16px, 2.2vw, 22px);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius: var(--radius-xl);
  padding: var(--home-card-pad);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.home-article:hover{
  transform: translateY(-1px);
  border-color: rgba(239,108,87,.22);
  background: rgba(255,255,255,.048);
}
.home-article:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.home-article-head{
  margin-bottom: 14px;
  text-align: left;
}
.home-article-title{
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-bottom: 8px;
  text-align: left;
}
.home-article-title-link{
  color: inherit;
  text-decoration: none;
  text-align: left;
}
.home-article-title-link:hover{
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.55);
}
.home-article-meta{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}
.home-article-meta-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  gap: 8px 14px;
  line-height: 1.55;
  text-align: left;
}
.home-article-meta-item{
  color: var(--muted-2);
  font-size: 0.93rem;
}
.home-article-meta a{
  color: rgba(255, 218, 200, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.52);
  text-underline-offset: 2px;
}
.home-article-meta a:hover{
  color: #fff;
  text-decoration-color: rgba(239,108,87,.8);
}

/* Article body measure (public story page; .article .prose is legacy / unused on this template) */
body.page-article .home-main > .prose{
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-contrast: more){
  .article .prose,
  body.page-article .home-main > .prose,
  .home-article-lead-wrap .home-article-lead{
    color: rgba(255,255,255,.96);
  }
  .article .prose blockquote,
  body.page-article .home-main > .prose blockquote{
    border-left-width: 4px;
    border-color: rgba(239,108,87,.9);
    background: rgba(255,255,255,.08);
  }
  .prose a{
    color: #fff;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.18em;
  }
  .home-article-meta-item{
    color: rgba(255,255,255,.85);
  }
  .page-article .article-photos-by{
    color: rgba(255,255,255,.9);
  }
}

/* Homepage feed: full hero visible (no crop); width fills card, height follows intrinsic aspect ratio */
.home-article .home-feed-hero{
  position: relative;
  margin: 12px calc(-1 * var(--home-card-pad)) 16px;
  width: calc(100% + 2 * var(--home-card-pad));
  max-width: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.28);
}
.home-article .home-feed-hero .home-feed-hero-link{
  display: block;
  line-height: 0;
}
.home-article .home-feed-hero .hero-img{
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  object-fit: contain;
}
@media (max-width: 700px){
  .home-article .home-feed-hero{
    margin-top: 10px;
    margin-bottom: 14px;
  }
}
.home-article .home-feed-gallery{
  margin-top: 1.25rem;
  padding-top: 1rem;
  max-width: min(100%, 600px);
}
.home-article .home-feed-gallery h3{
  font-size: 1rem;
  margin-bottom: 0.65rem;
}
.home-article .home-feed-gallery .article-gallery-figure{
  margin: 0.75rem 0;
}
.home-article .home-feed-gallery .article-gallery-figure img{
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.home-article .prose img{
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.home-permalink{
  margin-top: 18px;
  font-size: .88rem;
  color: var(--muted);
}
.home-feed-hero-link{
  display: block;
  line-height: 0;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 100%;
  outline: none;
}
.home-feed-hero-link:focus-visible{
  box-shadow: var(--ring);
}
.home-article .home-feed-hero:hover,
.home-article .home-feed-hero:focus-within{
  box-shadow: 0 0 0 1px rgba(239,108,87,.38);
}
.home-article-lead-wrap{
  margin-top: 4px;
  max-width: 62ch;
}
.home-article-lead-wrap > p:first-child{
  margin-top: 0;
}
.home-read-more{
  margin-top: 16px;
  margin-bottom: 0;
}
.home-read-more .btn{
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 600;
}

/* -----------------------------
   Public photo galleries (/gallery)
-------------------------------- */
.gallery-index-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gallery-index-layout{
  display: grid;
  grid-template-columns: 1fr minmax(0, 208px);
  gap: 16px;
  align-items: start;
}
.gallery-index-main{ min-width: 0; }
.gallery-index-card{
  grid-column: span 4;
  display: block;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.gallery-index-card:hover{
  border-color: rgba(239,108,87,.35);
  text-decoration: none;
}
.gallery-index-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-index-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-index-title{
  padding: 12px 14px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
}
.gallery-year-sidebar{
  position: sticky;
  top: 18px;
  max-width: 100%;
}
/* Gallery index (/gallery): slimmer rail — tighter panels so Links + Years fit the narrow column */
.page-gallery-index .gallery-year-sidebar .sidebar-panel{
  padding: 10px 8px;
  margin-bottom: 10px;
  border-radius: 12px;
}
.page-gallery-index .gallery-year-sidebar .sidebar-heading{
  margin: 0 0 6px 0;
  font-size: 0.8rem;
}
.page-gallery-index .gallery-year-sidebar .sidebar-nav{
  gap: 3px;
}
.page-gallery-index .gallery-year-sidebar .sidebar-link{
  padding: 6px 7px;
  font-size: 0.94rem;
  border-radius: 8px;
}
.page-gallery-index .gallery-year-box{
  padding: 10px 8px;
  border-radius: 12px;
}
.page-gallery-index .gallery-year-title{
  margin: 0 0 6px 0;
  font-size: 1rem;
}
.page-gallery-index .gallery-year-link{
  padding: 7px 8px;
  font-size: 0.94rem;
  border-radius: 8px;
}
.gallery-year-box{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.gallery-year-title{
  font-weight: 800;
  margin: 0 0 8px 0;
  color: rgba(255,255,255,.92);
}
.gallery-year-link{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.gallery-year-link:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}
.gallery-year-link.active{
  background: rgba(239,108,87,.16);
  border: 1px solid rgba(239,108,87,.25);
  color: #fff;
}
.gallery-back{
  margin: 0 0 14px 0;
}
/* Magazine PDF index (/mag): tile placeholder when no cover */
.page-mag-index .mag-index-pdf-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.38);
  background: linear-gradient(145deg, rgba(239,108,87,.12), rgba(0,0,0,.35));
}
/* Magazine index (/mag): portrait cover area, full image (no crop), larger cards */
@media (min-width: 981px){
  .page-mag-index .gallery-index-card{
    grid-column: span 6;
  }
}
@media (max-width: 980px){
  .page-mag-index .gallery-index-card{
    grid-column: span 12;
  }
}
.page-mag-index .gallery-index-grid{
  gap: 20px;
}
.page-mag-index .gallery-index-thumb{
  aspect-ratio: 3 / 4;
  min-height: clamp(300px, 48vw, 620px);
  background: rgba(0,0,0,.28);
}
.page-mag-index .gallery-index-img{
  object-fit: contain;
  object-position: center center;
}
/* Magazine PDF viewer (/mag/view.php): layout lives in magazine-viewer.css */
.page-mag-view .mag-view-body{
  padding-bottom: 3rem;
}
.gallery-photos-by{
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gallery-photos-by a{
  color: rgba(255, 218, 200, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(239, 108, 87, 0.52);
  text-underline-offset: 2px;
}
.gallery-photos-by a:hover{
  color: #fff;
}
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gallery-tile{
  grid-column: span 4;
  margin: 0;
  content-visibility: auto;
  contain-intrinsic-size: 320px 240px;
}
.gallery-tile-link{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.gallery-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.gallery-cap{
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
}

/* Fullscreen modal viewer (gallery/view.php) */
.gallery-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.gallery-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
}
.gallery-modal-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.gallery-modal-figure{
  margin: 0;
  width: min(1100px, 94vw);
  height: min(84vh, 820px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,12,.88);
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
  overflow: hidden;
  display: grid;
  /* minmax(0,1fr) lets the image row shrink so tall photos scale inside (avoids vertical crop) */
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}
.gallery-modal-img{
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: rgba(0,0,0,.55);
  display: block;
}
.gallery-modal-cap{
  padding: 10px 12px;
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.gallery-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}
.gallery-modal-close:hover{ border-color: rgba(239,108,87,.45); }
.gallery-modal-count{
  position: absolute;
  top: 16px;
  left: 14px;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1;
}
.gallery-modal-zone{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.gallery-modal-zone-left{ left: 0; }
.gallery-modal-zone-right{ right: 0; }
.gallery-modal-zone:focus{ outline: none; }
.gallery-modal-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  cursor: pointer;
  user-select: none;
}
.gallery-modal-prev{ left: 14px; }
.gallery-modal-next{ right: 14px; }
.gallery-modal-nav:hover{ border-color: rgba(239,108,87,.45); }

@media (max-width: 980px){
  .gallery-tile{ grid-column: span 6; }
  .gallery-index-card{ grid-column: span 12; }
  .gallery-index-layout{ grid-template-columns: 1fr; }
  .gallery-year-sidebar{ position: static; }
}
@media (max-width: 620px){
  .gallery-tile{ grid-column: span 12; }
  .gallery-modal-nav{ width: 44px; height: 44px; font-size: 30px; line-height: 38px; }
}
.home-ad-top{
  margin: 0 0 12px 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.home-ad-top ins.adsbygoogle{
  min-height: 90px;
  max-height: 140px;
}
.home-footer-actions{
  margin-top: 28px;
}
@media (max-width: 980px){
  .home-layout{
    grid-template-columns: 1fr;
    gap: 22px;
    justify-content: stretch;
  }
  /* Stack: article body first, then right-rail nav (links / month / topics), then left ads */
  .home-main{
    order: 0;
  }
  .home-sidebar{
    position: relative;
    top: auto;
    order: 1;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .home-left-rail{
    position: relative;
    top: auto;
    order: 2;
    padding-top: 8px;
  }
  .home-left-rail:empty{
    display: none;
  }
}

/* Site footer */
.site-footer{
  margin-top: auto;
  padding: 32px 0 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.45);
}
.site-footer .site-footer-logo{
  font-weight: 750;
}
.site-footer .site-footer-copy{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
  margin-top: 20px;
}
.site-footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.site-footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}
@media (max-width: 1100px){
  .site-footer-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 900px){
  .site-footer-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.site-footer-logo{
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: .02em;
}
.site-footer-tagline{
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36ch;
}
.site-footer-social{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  margin-top: 12px;
}
.site-footer-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  line-height: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.site-footer-social-link:hover{
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.site-footer-social-link:focus-visible{
  outline: 2px solid rgba(239, 108, 87, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer-social-link svg{
  width: 22px;
  height: 22px;
  display: block;
}
.site-footer-heading{
  margin: 0 0 10px 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.48);
}
.site-footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer-list li{
  margin: 0 0 8px 0;
}
.site-footer-list a{
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.site-footer-list a:hover{
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.55);
}
/* Footer “Cookie settings”: button styled as link (no hash jump; JS opens CookieChimp modal). */
.site-footer-list button.site-footer-linklike{
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.site-footer-list button.site-footer-linklike:hover{
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(239,108,87,.55);
}
.site-footer-list button.site-footer-linklike:focus-visible{
  outline: 2px solid rgba(239,108,87,.65);
  outline-offset: 2px;
}

/* CookieChimp / CookieConsent: keep banner & prefs above site UI (search modal z-index 50). */
#cc-main{
  z-index: 2147482000 !important;
}
/* Preferences iframe can collapse without min-height when pm__body is replaced — avoids “blank” modal. */
#cc-main #cookiechimp-iframe-modal{
  min-height: min(65vh, 560px);
  width: 100%;
  border: 0;
}

.site-footer-copy{
  margin: 24px 0 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem;
  color: rgba(255,255,255,.48);
  line-height: 1.45;
}

/* Home archive: one article per page + newer/older */
.home-archive-pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 28px 0 8px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.home-archive-pager-link{
  font-weight: 600;
  font-size: .95rem;
}
.home-archive-pager-pos{
  font-size: .88rem;
  color: var(--muted);
}
.home-archive-pager-muted{
  font-size: .95rem;
  color: var(--muted-2);
  cursor: default;
  user-select: none;
}

/* Contact page — wide form, two-column name row, large message */
.contact-page-wrap{
  max-width: min(920px, 100%);
  margin: 0 auto;
}
.contact-form-public{
  max-width: 100%;
  width: 100%;
}
.contact-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 560px){
  .contact-form-row{
    grid-template-columns: 1fr;
  }
}
.contact-form-message textarea.form-control{
  min-height: 320px;
  resize: vertical;
  line-height: 1.55;
}
.contact-recaptcha-wrap{
  margin-top: 4px;
}

/* Public contributor / author profile */
.page-contributor .contributor-page{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.contributor-profile{
  margin-top: 8px;
}
.contributor-hero-meta{
  margin-top: 6px;
}
.contributor-avatar-wrap{
  margin: 0 auto 2rem;
  width: 100%;
  max-width: min(640px, 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: var(--shadow);
}
.contributor-avatar{
  width: 100%;
  height: auto;
  display: block;
}
.contributor-bio{
  margin-top: 0;
  color: var(--text-2);
  line-height: 1.72;
}
.contributor-bio p:last-child{
  margin-bottom: 0;
}
.contributor-links{
  margin: 1rem 0 0;
  font-size: 1rem;
}
.contributor-links a{
  color: rgba(255, 218, 200, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(239, 108, 87, 0.52);
  text-underline-offset: 2px;
}
.contributor-links a:hover{
  color: #fff;
  text-decoration-color: rgba(239, 108, 87, 0.82);
}

.page-article .article-main-meta a{
  color: rgba(255, 218, 200, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(239, 108, 87, 0.52);
  text-underline-offset: 2px;
}
.page-article .article-main-meta a:hover{
  color: #fff;
}