/* /assets/css/dispatch.css
   Dispatch skin — cooler silver identity, blog-adjacent structure
*/

:root{
  --dispatch-silver: #C7D2E0;
  --dispatch-ice:    #E3ECF8;
  --dispatch-steel:  #8FA2B8;

  --dispatch-bg:     #07080a;
  --dispatch-panel:  rgba(0,0,0,.55);
  --dispatch-line:   rgba(199,210,224,.22);
  --dispatch-ink:    rgba(235,240,248,.92);
  --dispatch-muted:  rgba(200,210,225,.70);
}

/* Base page */
body.dispatch{
  background: var(--dispatch-bg);
  color: var(--dispatch-ink);
}

/* DISPATCH HERO — full width like blog */
.dispatch-hero{
  background: #000;
  border-bottom: 1px solid var(--dispatch-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: clamp(220px, 32vh, 400px);
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.dispatch-hero .banner{
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: brightness(.95) contrast(1.02);
}

/* Subtitle */
.dispatch-subtitle{
  margin: 10px auto 0;
  color: var(--dispatch-muted);
  font-size: 0.95rem;
}
.center{ text-align:center; }

/* Page shell */
.page.dispatch{
  padding: 18px 12px 44px;
}

/* Card shell (matches your gold-bordered idea but in steel) */
.entry-box.dispatch-box{
  max-width: 900px;
  margin: 0 auto;
  background: var(--dispatch-panel);
  border: 1px solid var(--dispatch-line);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(199,210,224,.08);
}

.entry-box.dispatch-box .copy{
  padding: 22px 22px 26px;
}

/* Titles */
.dispatch-title{
  margin: 0;
  font-family: "Cinzel Decorative", serif;
  letter-spacing: .04em;
  color: var(--dispatch-silver);
  text-shadow: 0 0 12px #000;
}
.dispatch-intro{
  margin: .5rem auto 0;
  max-width: 70ch;
  color: var(--dispatch-muted);
  line-height: 1.7;
}

/* Divider */
.hr-dispatch{
  border:0;
  height:1px;
  background: linear-gradient(90deg,
    rgba(199,210,224,0),
    rgba(199,210,224,.30),
    rgba(199,210,224,0)
  );
  margin: 1.2rem 0;
}

/* Listing cards */
.dispatch-card{
  padding: 10px 4px 2px;
}
.dispatch-card-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dispatch-card-title{
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}
.dispatch-card-title a{
  color: var(--dispatch-ice);
  text-decoration: none;
}
.dispatch-card-title a:hover{
  color: var(--dispatch-silver);
  text-decoration: underline;
}
.dispatch-card-date{
  color: var(--dispatch-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92rem;
}

.dispatch-excerpt{
  margin: .65rem 0 0;
  color: var(--dispatch-muted);
  line-height: 1.7;
}

.muted{ color: var(--dispatch-muted); }

/* Meta line (borrowed semantics) */
.meta-line{
  margin: .6rem 0 0;
  color: var(--dispatch-muted);
  font-size: .95rem;
}
.meta-line em{
  font-style: normal;
  color: rgba(227,236,248,.92);
}

/* Buttons — piggyback your existing .btn but give dispatch its own accent */
.btn[data-accent="dispatch"]{
  border-color: rgba(199,210,224,.45);
  color: var(--dispatch-ice);
}
.btn[data-accent="dispatch"]:hover{
  border-color: rgba(227,236,248,.85);
  color: var(--dispatch-ice);
  box-shadow: 0 0 18px rgba(199,210,224,.18);
}

.dispatch-read{
  margin: 1rem 0 0;
}

/* Post page */
.dispatch-breadcrumb{
  margin: 12px auto 0;
}
.back-link{
  color: var(--dispatch-muted);
  text-decoration: none;
}
.back-link:hover{
  color: var(--dispatch-ice);
  text-decoration: underline;
}

.dispatch-post-title{
  margin: .4rem 0 0;
  font-family: "Cinzel Decorative", serif;
  letter-spacing: .03em;
  color: var(--dispatch-ice);
}
.dispatch-post-summary{
  margin: .75rem 0 0;
  color: var(--dispatch-muted);
  line-height: 1.7;
}

/* Bottom nav */
.dispatch-nav{
  margin-top: 1rem;
}
.dispatch-nav .nav-link{
  color: var(--dispatch-ice);
  text-decoration: none;
}
.dispatch-nav .nav-link:hover{
  color: var(--dispatch-silver);
  text-decoration: underline;
}
.dot{
  color: rgba(199,210,224,.55);
}

/* Mobile breathing room */
@media (max-width: 560px){
  .entry-box.dispatch-box .copy{
    padding: 18px 16px 22px;
  }
  .dispatch-card-title{
    font-size: 1.2rem;
  }
}

/* Dispatch buttons: silver, not gold */
body.dispatch .btn,
body.dispatch .btn[data-accent="dispatch"]{
  background: rgba(199,210,224,.12);
  border: 1px solid rgba(199,210,224,.55);
  color: var(--dispatch-ice);
  box-shadow: none;
}

body.dispatch .btn:hover,
body.dispatch .btn[data-accent="dispatch"]:hover{
  background: rgba(227,236,248,.16);
  border-color: rgba(227,236,248,.90);
  color: var(--dispatch-ice);
  box-shadow: 0 0 18px rgba(199,210,224,.18);
}