/* Imperial — Pleat token overrides: gunmetal surfaces, armor-white text, logo red brand (#de1e31).
   Named with a "-dark" suffix so pleat.css sets color-scheme: dark for native widgets. */
[data-theme="imperial-dark"] {
  --font-pleat-sans: "Eurostile", "Bank Gothic", "Michroma", "Orbitron", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pl-color-brand-border-loud: #f0465a;
  --pl-color-brand-border-normal: #7d1a26;
  --pl-color-brand-border-quiet: #4b161c;
  --pl-color-brand-fill-loud: #de1e31;
  --pl-color-brand-fill-normal: #45121a;
  --pl-color-brand-fill-quiet: #2a0f13;
  --pl-color-brand-on-loud: #ffffff;
  --pl-color-brand-on-normal: #fdcbd0;
  --pl-color-brand-on-quiet: #f5939d;
  --pl-color-danger-border-loud: #c75b33;
  --pl-color-danger-border-normal: #7a3a22;
  --pl-color-danger-border-quiet: #4f281a;
  --pl-color-danger-fill-loud: #f0804f;
  --pl-color-danger-fill-normal: #57281a;
  --pl-color-danger-fill-quiet: #391d14;
  --pl-color-danger-on-loud: #2b0d02;
  --pl-color-danger-on-normal: #fbd2c0;
  --pl-color-danger-on-quiet: #f6ad8d;
  --pl-color-focus: #f04b5d;
  --pl-color-neutral-border-loud: #6c7178;
  --pl-color-neutral-border-normal: #464a50;
  --pl-color-neutral-border-quiet: #2f3236;
  --pl-color-neutral-fill-loud: #d4d7db;
  --pl-color-neutral-fill-normal: #2e3136;
  --pl-color-neutral-fill-quiet: #202226;
  --pl-color-neutral-on-loud: #15171a;
  --pl-color-neutral-on-normal: #d9dce0;
  --pl-color-neutral-on-quiet: #b6bac0;
  --pl-color-overlay: rgba(0, 0, 0, 0.72);
  --pl-color-success-border-loud: #3e8250;
  --pl-color-success-border-normal: #305739;
  --pl-color-success-border-quiet: #243c29;
  --pl-color-success-fill-loud: #52af6a;
  --pl-color-success-fill-normal: #1c3e24;
  --pl-color-success-fill-quiet: #172a1b;
  --pl-color-success-on-loud: #04210d;
  --pl-color-success-on-normal: #bce3c3;
  --pl-color-success-on-quiet: #94cf9f;
  --pl-color-surface-border: #2c2f34;
  --pl-color-surface-default: #111214;
  --pl-color-surface-lowered: #08090a;
  --pl-color-surface-raised: #1a1c1f;
  --pl-color-text-normal: #eceef0;
  --pl-color-text-quiet: #9a9fa6;
  --pl-color-warning-border-loud: #956809;
  --pl-color-warning-border-normal: #634819;
  --pl-color-warning-border-quiet: #433217;
  --pl-color-warning-fill-loud: #f0b140;
  --pl-color-warning-fill-normal: #473106;
  --pl-color-warning-fill-quiet: #30230d;
  --pl-color-warning-on-loud: #261700;
  --pl-color-warning-on-normal: #efd3a8;
  --pl-color-warning-on-quiet: #e0b675;
  --pl-radius-l: 0.25rem;
  --pl-radius-m: 0.125rem;
  --pl-radius-s: 0.125rem;
  --pl-radius-xl: 0.5rem;
  --pl-shadow-l: 0 16px 40px -8px rgba(0, 0, 0, 0.75);
  --pl-shadow-m: 0 4px 10px -2px rgba(0, 0, 0, 0.6);
  --pl-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  > main {
    flex: 1;
  }
}

.imperial-calendar {
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  td {
    border: var(--pl-border-width-s) solid var(--pl-color-surface-border);
    height: 6rem;
    padding: var(--pl-space-2xs);
    vertical-align: top;

    &[aria-current="date"] .imperial-calendar-day {
      background: var(--pl-color-brand-fill-loud);
      color: var(--pl-color-brand-on-loud);
    }

    &[data-outside] {
      background: var(--pl-color-surface-lowered);
      color: var(--pl-color-text-quiet);
    }
  }

  th {
    color: var(--pl-color-text-quiet);
    font-size: var(--pl-font-size-xs);
    letter-spacing: 0.1em;
    padding-block: var(--pl-space-s);
    text-transform: uppercase;
  }
}

.imperial-calendar-day {
  border-radius: 50%;
  display: inline-grid;
  font-size: var(--pl-font-size-s);
  height: 1.75rem;
  place-items: center;
  width: 1.75rem;
}

.imperial-calendar-event {
  background: var(--pl-color-brand-fill-normal);
  border-left: var(--pl-border-width-m) solid var(--pl-color-brand-fill-loud);
  color: var(--pl-color-brand-on-normal);
  display: block;
  font-size: var(--pl-font-size-xs);
  margin-top: var(--pl-space-3xs);
  overflow: hidden;
  padding: var(--pl-space-3xs) var(--pl-space-2xs);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imperial-calendar-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: var(--pl-space-m);

  h2 {
    font-size: clamp(var(--pl-font-size-l), 6vw, var(--pl-font-size-2xl));
    margin: 0;
    text-align: center;
  }
}

.imperial-details {
  display: grid;
  gap: var(--pl-space-s) var(--pl-space-l);
  grid-template-columns: max-content 1fr;
  margin: 0;

  dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  dt {
    color: var(--pl-color-text-quiet);
  }

  @media (max-width: 36rem) {
    grid-template-columns: 1fr;

    dd + dt {
      margin-top: var(--pl-space-s);
    }
  }
}

.imperial-event-attendees {
  display: grid;
  gap: var(--pl-space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.imperial-event-location {
  color: var(--pl-color-text-quiet);
  font-size: var(--pl-font-size-s);
}

.imperial-event-signups {
  color: var(--pl-color-text-quiet);
  font-size: var(--pl-font-size-s);
  margin-bottom: 0;
}

.imperial-eyebrow {
  color: var(--pl-color-brand-on-quiet);
  font-size: var(--pl-font-size-xs);
  font-weight: var(--pl-font-weight-bold);
  letter-spacing: 0.3em;
  margin: 0;
  text-transform: uppercase;
}

.imperial-footer {
  border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border);
  color: var(--pl-color-text-quiet);
  font-size: var(--pl-font-size-s);
  padding: var(--pl-space-l);
  text-align: center;

  p {
    margin-inline: auto;
    max-width: 48rem;
  }
}

.imperial-gallery {
  display: grid;
  gap: var(--pl-space-l);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    margin: 0;
  }
}

.imperial-gallery-actions {
  margin-bottom: var(--pl-space-l);
}

.imperial-gallery-empty {
  align-items: center;
  aspect-ratio: 1;
  background: var(--pl-color-surface-raised);
  border-radius: var(--pl-radius-m);
  color: var(--pl-color-text-quiet);
  display: flex;
  font-size: var(--pl-font-size-3xl);
  justify-content: center;
}

.imperial-gallery-photo {
  margin: 0;

  > a {
    display: block;
  }

  figcaption {
    color: var(--pl-color-text-quiet);
    font-size: var(--pl-font-size-s);
    margin-top: var(--pl-space-xs);

    strong {
      color: var(--pl-color-text-normal);
      display: block;
      font-size: var(--pl-font-size-m);
    }
  }

  .imperial-gallery-photo-actions {
    margin-left: auto;
  }

  img {
    aspect-ratio: 1;
    border-radius: var(--pl-radius-m);
    display: block;
    object-fit: cover;
    width: 100%;
  }
}

.imperial-header {
  align-items: center;
  background: var(--pl-color-surface-default);
  border-bottom: var(--pl-border-width-m) solid var(--pl-color-brand-fill-loud);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-space-s) var(--pl-space-m);
  justify-content: space-between;
  padding: var(--pl-space-s) var(--pl-space-l);
  position: sticky;
  top: 0;
  z-index: 1;

  @media (max-width: 36rem) {
    column-gap: var(--pl-space-s);
    padding-inline: var(--pl-space-m);
  }
}

.imperial-nav-links {
  flex-wrap: nowrap;

  @media (max-width: 36rem) {
    display: none;
  }
}

.imperial-nav-menu {
  @media (width > 36rem) {
    display: none;
  }
}

.imperial-hero {
  background:
    linear-gradient(180deg, transparent 60%, var(--pl-color-surface-default)),
    radial-gradient(ellipse at 50% 0%, var(--pl-color-brand-fill-normal), transparent 70%),
    radial-gradient(
      ellipse 42rem 75% at 50% 65%,
      color-mix(in srgb, var(--pl-color-surface-default) 90%, transparent) 40%,
      transparent
    ),
    url("/assets/imperial-lights-301d7c86.svg") calc(50% - 58px) top / 360px 240px repeat;
  border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border);
  padding: var(--pl-space-3xl) var(--pl-space-l);
  text-align: center;

  h1 {
    font-size: clamp(var(--pl-font-size-3xl), 7vw, 4.5rem);
    letter-spacing: 0.12em;
    margin-block: var(--pl-space-s);
    text-transform: uppercase;
  }

  p {
    color: var(--pl-color-text-quiet);
    margin-inline: auto;
    max-width: 40rem;
  }
}

.imperial-hero-compact {
  padding-block: var(--pl-space-2xl);
}

.imperial-lightbox {
  .pl-body {
    padding: 0;
  }

  .pl-footer {
    align-items: center;
    justify-content: space-between;
    padding: var(--pl-space-s) var(--pl-space-m);

    p {
      margin: 0;
    }

    > .pl-cluster {
      margin-left: auto;
    }
  }

  img {
    display: block;
    margin-inline: auto;
    max-height: calc(100dvh - 8rem);
    max-width: 100%;
    object-fit: contain;
  }
}

.imperial-lightbox-counter {
  color: var(--pl-color-text-quiet);
  font-size: var(--pl-font-size-s);
}

.imperial-logo {
  align-items: center;
  color: var(--pl-color-text-normal);
  display: flex;
  font-weight: var(--pl-font-weight-bold);
  gap: var(--pl-space-s);
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  img {
    height: 2.75rem;
    width: auto;
  }

  @media (max-width: 36rem) {
    font-size: var(--pl-font-size-s);
    gap: var(--pl-space-xs);
    letter-spacing: 0.1em;
  }
}

/* The logo's black outline disappears on dark surfaces without a faint light edge */
.imperial-logo img,
.imperial-hero-logo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
}

.imperial-hero-logo {
  height: auto;
  width: min(18rem, 60vw);
}

.imperial-profile-pending,
.imperial-photo-preview {
  aspect-ratio: 1;
  border-radius: var(--pl-radius-m);
  display: block;
  object-fit: cover;
  width: 100%;
}

.imperial-profile-username {
  color: var(--pl-color-text-quiet);
  margin: 0;
}

.imperial-profile-pending {
  font-size: var(--pl-font-size-s);
  margin-top: var(--pl-space-2xs);
}

.imperial-section {
  margin-inline: auto;
  max-width: 72rem;
  padding: var(--pl-space-2xl) var(--pl-space-l);

  h2 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  &.imperial-auth {
    max-width: 28rem;
  }

  &.imperial-event {
    max-width: 48rem;

    h2 {
      margin-top: var(--pl-space-xl);
    }
  }

  &.imperial-profile {
    max-width: 40rem;

    h2 {
      letter-spacing: normal;
      margin: 0;
      text-transform: none;
    }
  }

  &.imperial-prose {
    max-width: 48rem;

    h2 {
      margin-top: var(--pl-space-xl);
    }
  }
}

.imperial-section-actions {
  margin-top: var(--pl-space-xl);
}

.imperial-stat {
  border-left: var(--pl-border-width-l) solid var(--pl-color-brand-fill-loud);
  padding-left: var(--pl-space-m);

  strong {
    display: block;
    font-size: var(--pl-font-size-3xl);
    line-height: 1.1;
  }

  span {
    color: var(--pl-color-text-quiet);
    font-size: var(--pl-font-size-s);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

.imperial-tour-of-duty {
  margin-top: var(--pl-space-l);
}

.imperial-tour-of-duty-list {
  display: grid;
  gap: var(--pl-space-m);
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    gap: var(--pl-space-3xs);
  }

  time {
    color: var(--pl-color-text-quiet);
    font-size: var(--pl-font-size-s);
  }
}