/* ==========================================================
   keeplee - the HR & Payroll page: a payslip on paper in a warm
   hero, calendar pages, a table, a ledger and a diary.
   ========================================================== */
.hr-hero { padding: calc(72px + var(--under, 0px)) 0 72px; background: linear-gradient(180deg, var(--warm-bg) 0%, #fff 100%); text-align: center; overflow: hidden; }
.hr-copy { max-width: 860px; }
.hr-kicker { margin: 0 0 16px; font-weight: 600; color: var(--accent-600); }
.hr-kicker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hr-hero h1 { margin: 0 0 20px; font-size: clamp(2.3rem, 6vw, 4.25rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.hr-hero h1 span { color: var(--brand); }
.hr-hero .lead { max-width: 36em; margin: 0 auto 30px; }

/* The payslip */
.hr-desk { position: relative; max-width: 760px; margin-top: 60px; }
.hr-sheet { position: absolute; left: 20px; right: 20px; top: 0; height: 320px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.hr-sheet-b { transform: rotate(-3deg); box-shadow: var(--shadow-sm); }
.hr-sheet-c { transform: rotate(2.4deg); }
.hr-slip { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); text-align: left; }
.hr-slip-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--navy); }
.hr-slip-top strong { display: block; color: var(--navy); font-size: 1.05rem; }
.hr-slip-top small { color: var(--muted); }
.hr-slip-who { text-align: right; }
.hr-slip-cols { display: grid; gap: 18px; padding: 16px 0; }
.hr-slip dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; align-content: start; margin: 0; }
.hr-slip dt { color: var(--ink); font-size: .94rem; }
.hr-slip dd { margin: 0; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; font-size: .94rem; text-align: right; }
.hr-slip .hr-col { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.hr-slip .hr-sum { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; color: var(--navy); }
.hr-net { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--brand-50); }
.hr-net span { font-weight: 600; color: var(--navy); }
.hr-net b { font-size: 1.5rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.hr-desk .fine { position: relative; margin-top: 16px; }
/* The two totals stay on one line, though there are three earnings and four deductions */
@media (min-width: 640px) {
  .hr-slip-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hr-slip { padding: 32px; }
  .hr-slip dl { grid-template-rows: repeat(6, 1fr); }
  .hr-slip .hr-sum { grid-row: 6; }
}

.hr-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.hr-head h2 { margin: 8px 0 14px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.16; text-wrap: balance; }
.hr-head .lead { margin: 0 auto; }

/* The calendar pages */
.hr-month { padding: 88px 0; background: #fff; }
.hr-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hr-cal li { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; box-shadow: var(--shadow-sm); padding-bottom: 22px; }
.hr-cal-top { display: block; padding: 8px 10px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 600; }
.hr-cal li:last-child .hr-cal-top { background: var(--navy); }
.hr-cal b { display: block; margin-top: 14px; font-size: 2.6rem; line-height: 1.1; color: var(--navy); font-weight: 600; letter-spacing: -.03em; }
.hr-cal h3 { margin: 4px 16px 8px; font-size: 1.1rem; color: var(--navy); }
.hr-cal p { margin: 0 18px; color: var(--muted); font-size: .94rem; }
.hr-rule { max-width: 46em; margin: 32px auto 0; text-align: center; color: var(--muted); }
@media (min-width: 640px) { .hr-cal { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .hr-cal { grid-template-columns: repeat(3, 1fr); } }

/* The deductions */
.hr-law { padding: 88px 0; background: var(--bg-soft); }
.hr-table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.hr-table th, .hr-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.hr-table tbody tr:last-child th, .hr-table tbody tr:last-child td { border-bottom: 0; }
.hr-table thead th { background: var(--navy); color: #fff; font-size: .84rem; letter-spacing: .03em; border-bottom: 0; }
.hr-table tbody th { width: 34%; color: var(--navy); font-weight: 600; }
.hr-table td { color: var(--muted); font-size: .96rem; }
.hr-ca { max-width: 900px; margin: 18px auto 0; padding: 12px 16px; border: 1px dashed var(--accent); border-radius: 14px; background: var(--warm-bg); color: var(--warm-ink); text-align: center; font-size: .94rem; }
@media (max-width: 639px) {
  .hr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hr-table, .hr-table tbody, .hr-table tr, .hr-table th, .hr-table td { display: block; width: auto; }
  .hr-table tbody th { padding-bottom: 2px; border-bottom: 0; }
  .hr-table td { padding-top: 0; }
  .hr-table tbody tr:last-child th { padding-bottom: 2px; }
}

/* The grid */
.hr-grid-sec { padding: 88px 0; background: #fff; }
.hr-grid { max-width: 900px; margin: 0 auto; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; display: grid; gap: 6px; }
.hr-row { display: grid; grid-template-columns: 74px repeat(20, minmax(24px, 1fr)); gap: 4px; align-items: center; min-width: 620px; }
.hr-who { font-size: .86rem; font-weight: 600; color: var(--navy); }
.hr-grid i, .hr-legend i { display: grid; place-items: center; height: 28px; border-radius: 6px; font-style: normal; font-size: .72rem; font-weight: 600; }
.m-p { background: #e6f7ef; color: #0b6b47; }
.m-l { background: var(--brand-50); color: var(--brand); }
.m-a { background: #fdecec; color: #a11b1b; }
.m-h { background: var(--bg-soft); color: var(--muted); }
.hr-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--muted); font-size: .88rem; }
.hr-legend li { display: inline-flex; align-items: center; gap: 6px; }
.hr-legend i { width: 24px; height: 24px; }
.hr-also { list-style: none; max-width: 860px; margin: 40px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.hr-also li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); }
.hr-also .ico { color: var(--ok); }

/* The journal */
.hr-link { padding: 88px 0; background: radial-gradient(900px 420px at 50% 110%, var(--navy-2), var(--navy) 70%); color: #fff; }
.hr-link h2 { color: #fff; }
.hr-link .lead { color: #cfccc2; }
.hr-ledger { display: grid; gap: 22px; max-width: 980px; margin: 0 auto; }
.hr-voucher { padding: 24px; border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.hr-voucher-top { display: flex; justify-content: space-between; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); color: var(--navy); }
.hr-voucher-top span { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .92rem; }
.hr-voucher ul { list-style: none; margin: 0; padding: 0; }
.hr-voucher li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: .95rem; }
.hr-voucher li:last-child { border-bottom: 0; }
.hr-voucher li.cr span { padding-left: 22px; font-weight: 500; }
.hr-voucher b { color: var(--muted); font-size: .84rem; }
.hr-then { display: grid; gap: 16px; }
.hr-then article { padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.06); text-align: center; }
.hr-then h3 { margin: 10px 0 6px; color: #fff; font-size: 1.1rem; }
.hr-then h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hr-then p { margin: 0; color: #cfccc2; font-size: .95rem; }
@media (min-width: 860px) { .hr-ledger { grid-template-columns: 1.1fr 1fr; align-items: center; } }

/* The diary */
.hr-story { padding: 88px 0; background: var(--brand-50); }
.p-madeup { max-width: 640px; margin: 18px auto 0; padding: 12px 16px; border: 1px dashed var(--accent); border-radius: 14px; background: #fff; color: var(--warm-ink); font-size: .94rem; }
.hr-diary { max-width: 700px; margin: 0 auto; padding: 36px clamp(22px, 5vw, 48px); border-radius: 6px 24px 24px 6px; border-left: 6px solid var(--accent); background: #fff; box-shadow: var(--shadow); }
.hr-diary p { margin: 0 0 22px; color: var(--ink); line-height: 1.65; }
.hr-diary p:last-child { margin-bottom: 0; }
.hr-diary b { display: block; margin-bottom: 2px; color: var(--accent-600); font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 639px) {
  .hr-hero { padding-top: calc(48px + var(--under, 0px)); padding-bottom: 56px; }
  .hr-month, .hr-law, .hr-grid-sec, .hr-link, .hr-story { padding-top: 60px; padding-bottom: 60px; }
  .hr-desk { margin-top: 44px; }
}
.hr-table th:first-child, .hr-table td:first-child { min-width: 7.5rem; }