.staff-page { min-height: 100vh; display: flex; flex-direction: column; background: #f5efe2; }
.staff-topbar, .staff-login-main, .staff-home-main, .staff-footer { width: min(1320px, 100%); margin-inline: auto; }
.staff-topbar { min-height: 86px; padding: 19px clamp(22px, 5vw, 68px); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.staff-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 700 20px var(--display); }
.staff-brand span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--leaf-dark); background: var(--sun); border-radius: 13px 4px 13px 4px; font: 700 23px var(--display); }
.staff-back, .staff-logout { padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 12px; cursor: pointer; }
.staff-back:hover, .staff-logout:hover { color: var(--leaf-dark); }
.staff-eyebrow { margin: 0 0 20px; color: var(--tomato-dark); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.staff-login-main { flex: 1; min-height: 650px; padding: clamp(30px, 6vw, 82px) clamp(22px, 5vw, 68px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: center; gap: clamp(35px, 7vw, 110px); }
.staff-story { align-self: stretch; min-height: 520px; padding: clamp(30px, 4vw, 62px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-radius: 240px 240px 13px 13px; background: var(--leaf-dark); color: white; }
.staff-story::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.18); border-radius: inherit; }
.staff-story .staff-eyebrow { color: #e4cda7; position: relative; z-index: 1; }
.staff-story h1 { margin: 0; font: 700 clamp(45px, 5vw, 70px)/1.17 var(--display); letter-spacing: -.05em; position: relative; z-index: 1; }
.staff-story h1 em { font-style: normal; color: var(--sun); }
.staff-story > p:last-of-type { max-width: 390px; margin: 23px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.9; position: relative; z-index: 1; }
.staff-story-mark { position: absolute; right: -5%; bottom: -18%; color: rgba(255,255,255,.055); font: 700 380px/1 var(--display); }
.staff-login-card { width: min(430px, 100%); padding: clamp(24px, 3vw, 42px); display: grid; gap: 17px; justify-self: center; border: 1px solid var(--line); border-radius: 28px 28px 9px 28px; background: var(--cream); box-shadow: var(--shadow); }
.staff-login-card h2 { margin: 0; font: 700 37px var(--display); }
.staff-login-card > p:not(.staff-eyebrow):not(.form-error) { margin: -6px 0 5px; color: var(--ink-soft); font-size: 13px; }
.staff-login-card .button { width: 100%; margin-top: 4px; justify-content: space-between; }
.staff-login-card .form-error { margin: 0; }
.staff-home-main { flex: 1; padding: clamp(70px, 10vw, 135px) clamp(22px, 5vw, 68px) 85px; }
.staff-home-intro h1 { margin: 0; font: 700 clamp(53px, 7vw, 94px)/1.1 var(--display); letter-spacing: -.06em; }
.staff-home-intro > p:last-child { margin: 22px 0 0; color: var(--ink-soft); font-size: 16px; }
.staff-destinations { max-width: 1060px; margin-top: 60px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.staff-destination { min-height: 350px; padding: clamp(25px, 3vw, 38px); display: flex; flex-direction: column; align-items: flex-start; color: var(--cream); text-decoration: none; border-radius: 32px 32px 9px 32px; transition: transform .2s ease, box-shadow .2s ease; }
.staff-destination[hidden] { display: none; }
.staff-destinations:has(.staff-destination.schedule[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.staff-destination:hover, .staff-destination:focus-visible { transform: translateY(-5px); box-shadow: 0 23px 50px rgba(23,61,50,.2); }
.staff-destination.schedule { background: var(--leaf-dark); }
.staff-destination.operations { background: var(--tomato-dark); }
.staff-destination-index { font-size: 10px; letter-spacing: .14em; opacity: .65; }
.staff-destination-icon { width: 56px; height: 56px; margin-top: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 18px 6px 18px 6px; font: 700 25px var(--display); }
.staff-destination strong { margin-top: 20px; font: 700 42px var(--display); }
.staff-destination-copy { max-width: 320px; margin-top: 10px; font-size: 13px; line-height: 1.75; opacity: .8; }
.staff-destination-arrow { width: 100%; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.35); font-size: 12px; font-weight: 800; }
.staff-footer { min-height: 68px; padding: 22px clamp(22px, 5vw, 68px); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }

@media (max-width: 800px) {
  .staff-login-main { grid-template-columns: 1fr; min-height: 0; gap: 25px; }
  .staff-story { min-height: 360px; border-radius: 190px 190px 9px 9px; }
  .staff-login-card { width: min(600px, 100%); }
}

@media (max-width: 640px) {
  .staff-topbar { min-height: 72px; }
  .staff-login-main { padding-top: 22px; }
  .staff-story { min-height: 330px; padding: 27px; }
  .staff-story h1 { font-size: 43px; }
  .staff-login-card { padding: 25px 22px; }
  .staff-home-main { padding-top: 75px; }
  .staff-destinations { grid-template-columns: 1fr; margin-top: 36px; }
  .staff-destination { min-height: 290px; }
  .staff-destination strong { font-size: 36px; }
}