@import url('/assets/styles.css');

:root{
  --ink:#07111f;
  --navy:#0b1830;
  --paper:#fff8e8;
  --cream:#f3e6c3;
  --coral:#ff6b62;
  --orange:#ff983d;
  --cyan:#45d8e8;
  --yellow:#ffd447;
  --green:#54d98c;
  --purple:#b979ff;
  --shadow:0 24px 60px rgba(2,10,25,.24);
}

*{box-sizing:border-box}
html{background:var(--navy);color:var(--ink);scroll-behavior:smooth}
body{margin:0;min-width:320px;background:
  radial-gradient(circle at 8% 12%,rgba(69,216,232,.18),transparent 32rem),
  radial-gradient(circle at 92% 18%,rgba(255,107,98,.17),transparent 30rem),
  linear-gradient(180deg,#0b1830 0 33rem,#f6efd9 33rem 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit}
button,a{touch-action:manipulation}

.dispatch-shell{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:20px 0 64px}
.dispatch-hero{color:#fff;padding-bottom:42px}
.dispatch-hero nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0 24px}
.brand{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;font-weight:950;font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.06em}
.brand span{background:var(--coral);color:var(--ink);padding:.28rem .48rem;border-radius:.35rem;box-shadow:3px 4px 0 var(--ink)}
.detail-link{font-weight:850;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.45);padding:.25rem 0}
.detail-link:hover,.detail-link:focus-visible{border-color:var(--yellow)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);align-items:center;gap:clamp(28px,5vw,76px)}
.eyebrow{margin:0 0 .6rem;font-size:.78rem;font-weight:950;letter-spacing:.17em;text-transform:uppercase}
.hero-copy h1{max-width:13ch;margin:.1rem 0 1rem;font-size:clamp(2.65rem,6vw,5.8rem);line-height:.88;letter-spacing:-.055em}
.lede{max-width:64ch;margin:0;color:#dfe9f5;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.65}
.hero-art{display:block;width:100%;height:auto;border-radius:28px;border:5px solid var(--ink);box-shadow:12px 14px 0 rgba(69,216,232,.95),var(--shadow);transform:rotate(1.2deg);background:#f2e4bd}
.proof-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.proof-strip span{display:flex;align-items:baseline;gap:.42rem;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:.55rem .85rem;font-size:.82rem;font-weight:850;box-shadow:3px 4px 0 var(--ink)}
.proof-strip strong{font-size:1.25rem}

.board-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:18px 0 22px}
.board-heading h2,.production-note h2{margin:.1rem 0;font-size:clamp(2rem,4vw,3.55rem);line-height:.95;letter-spacing:-.045em}
.board-heading>p{max-width:44ch;margin:0;font-weight:750;line-height:1.55;color:#31455a}

.job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.job-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0;background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:8px 10px 0 var(--ink),var(--shadow)}
.job-card::after{content:"";position:absolute;inset:auto -70px -70px auto;width:190px;height:190px;border-radius:50%;opacity:.16;pointer-events:none}
.job-cake::after{background:var(--coral)}
.job-tray::after{background:var(--cyan)}
.job-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px;border-bottom:4px solid var(--ink)}
.job-cake .job-banner{background:linear-gradient(135deg,#ffd9bc,var(--coral))}
.job-tray .job-banner{background:linear-gradient(135deg,#d5fbff,var(--cyan))}
.job-banner h3{margin:0;font-size:clamp(1.55rem,3vw,2.25rem);line-height:.95;letter-spacing:-.04em}
.availability{align-self:start;background:var(--green);border:3px solid var(--ink);border-radius:999px;padding:.42rem .62rem;font-size:.67rem;font-weight:950;letter-spacing:.08em;white-space:nowrap;box-shadow:2px 3px 0 var(--ink)}
.package-mark{position:relative;width:78px;height:78px;flex:0 0 78px}
.cake-mark i{position:absolute;left:50%;transform:translateX(-50%);border:4px solid var(--ink);background:#fff4dc;box-shadow:inset 0 -8px 0 #ffb5b0}
.cake-mark i:nth-child(1){bottom:7px;width:66px;height:26px;border-radius:7px}
.cake-mark i:nth-child(2){bottom:29px;width:49px;height:22px;border-radius:7px}
.cake-mark i:nth-child(3){bottom:47px;width:31px;height:20px;border-radius:7px}
.cake-mark::before{content:"";position:absolute;z-index:2;left:50%;top:3px;width:5px;height:20px;background:var(--ink);transform:translateX(-50%)}
.cake-mark::after{content:"";position:absolute;z-index:3;left:50%;top:0;width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--yellow);border:3px solid var(--ink);transform:translateX(-50%) rotate(-35deg)}
.tray-mark{display:grid;place-items:center}
.tray-mark::before{content:"";width:64px;height:38px;border:4px solid var(--ink);border-radius:12px;background:linear-gradient(#ffd67f,var(--orange));box-shadow:inset 0 -8px 0 rgba(109,43,25,.18)}
.tray-mark::after{content:"";position:absolute;top:12px;width:48px;height:14px;border:4px solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0;background:#fff1ba}
.tray-mark i{position:absolute;top:0;width:7px;height:24px;border-left:4px solid #d74b49;border-radius:50%}
.tray-mark i:nth-child(1){left:24px;transform:skewX(-12deg)}
.tray-mark i:nth-child(2){left:38px}
.tray-mark i:nth-child(3){right:20px;transform:skewX(12deg)}

.job-copy{margin:22px 22px 0;font-size:1.02rem;font-weight:700;line-height:1.55;color:#30465c}
.rule-card{margin:18px 22px 0;padding:16px 18px;background:var(--navy);color:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:4px 5px 0 rgba(7,17,31,.28)}
.rule-card span{display:block;color:var(--yellow);font-size:.72rem;font-weight:950;letter-spacing:.14em}
.rule-card strong{display:block;margin:.22rem 0 .4rem;font-size:1.25rem}
.rule-card p{margin:0;color:#dfe8f3;line-height:1.5}
.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 22px 0}
.route-grid>div{min-width:0;padding:14px;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:3px 4px 0 rgba(7,17,31,.16)}
.job-cake .route-grid>div:first-child,.job-tray .route-grid>div:first-child{border-top-color:var(--coral)}
.job-cake .route-grid>div:last-child,.job-tray .route-grid>div:last-child{border-top-color:var(--cyan)}
.route-grid strong{display:block;font-size:1rem}
.route-grid span{display:block;margin:.25rem 0;color:#6a3650;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.route-grid p{margin:0;color:#4b5d70;font-size:.84rem;line-height:1.4}

.record-panel{margin:18px 22px 0;padding:16px;background:#efe5c8;border:3px solid var(--ink);border-radius:18px}
.record-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record-heading span{font-size:.72rem;font-weight:950;letter-spacing:.13em}
.record-heading strong{display:grid;place-items:center;min-width:44px;height:44px;border:3px solid var(--ink);border-radius:12px;background:#fff;font-size:1.4rem;box-shadow:2px 3px 0 var(--ink)}
.record-panel>p{min-height:2.8em;margin:.55rem 0 .75rem;color:#374b5e;font-size:.88rem;font-weight:700;line-height:1.4}
.record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.record-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;min-width:0;padding:9px 10px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.record-chip strong{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-chip b{font-size:1rem}
.record-chip span{grid-column:1/-1;color:#617184;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-chip.empty{opacity:.62;background:#f8f1df}

.job-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:22px}
.primary-action{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.82rem 1.08rem;border:4px solid var(--ink);border-radius:14px;background:var(--yellow);font-weight:950;text-decoration:none;box-shadow:4px 5px 0 var(--ink);transition:transform .14s ease,box-shadow .14s ease}
.job-tray .primary-action{background:var(--orange)}
.primary-action:hover,.primary-action:focus-visible{transform:translate(2px,2px);box-shadow:2px 3px 0 var(--ink)}
.job-actions span{max-width:18ch;color:#4e6071;font-size:.76rem;font-weight:800;text-align:right}

.production-note{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:32px;align-items:center;margin-top:34px;padding:28px 30px;border:4px solid var(--ink);border-radius:24px;background:linear-gradient(135deg,var(--yellow),#ffeb98);box-shadow:7px 8px 0 var(--ink)}
.production-note p:last-child{margin:0;font-weight:750;line-height:1.6}
.live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:980px){
  body{background:linear-gradient(180deg,#0b1830 0 44rem,#f6efd9 44rem 100%)}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy h1{max-width:12ch}
  .hero-art{max-width:760px;justify-self:center}
  .job-grid{grid-template-columns:1fr}
  .production-note{grid-template-columns:1fr}
}

@media (max-width:680px){
  .dispatch-shell{width:min(100% - 20px,1240px);padding-top:10px}
  .dispatch-hero nav{padding-bottom:16px}
  .detail-link{font-size:.84rem}
  .hero-copy h1{font-size:clamp(2.5rem,13vw,4rem)}
  .hero-art{border-radius:20px;border-width:4px;box-shadow:7px 8px 0 var(--cyan)}
  .board-heading{display:block}
  .board-heading>p{margin-top:10px}
  .job-banner{grid-template-columns:auto minmax(0,1fr);padding:16px;gap:12px}
  .availability{grid-column:1/-1;justify-self:start}
  .package-mark{width:66px;height:66px;transform:scale(.87);transform-origin:center}
  .job-copy,.rule-card,.route-grid,.record-panel{margin-left:14px;margin-right:14px}
  .route-grid,.record-grid{grid-template-columns:1fr}
  .job-actions{align-items:stretch;flex-direction:column;padding:18px 14px 20px}
  .job-actions span{max-width:none;text-align:left}
  .primary-action{width:100%}
  .production-note{padding:22px 18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-art{transform:none}
  .primary-action{transition:none}
}

@media (prefers-contrast:more){
  .job-copy,.route-grid p,.record-panel>p,.job-actions span{color:var(--ink)}
  .proof-strip span,.route-grid>div,.record-chip{box-shadow:none}
}