:root {
  color-scheme:light;
  --ink:#18242f;
  --muted:#4e5c68;
  --red:#a51e2c;
  --line:#d5dce1;
  --paper:#fff;
  --ground:#f3f5f6;
  --gold:#efbc62;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--ground);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-size:18px;
  line-height:1.5
}

a {
  color:inherit;
  text-underline-offset:4px
}

a:focus-visible {
  outline:3px solid #1265b1;
  outline-offset:4px
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:clamp(1.9rem,5vw,2.8rem);
  line-height:1.15;
  letter-spacing:-.035em
}

h2 {
  font-size:1.3rem;
  line-height:1.3
}

h3 {
  font-size:1.18rem;
  line-height:1.3
}

header {
  background:var(--ink);
  color:#fff;
  border-top:5px solid var(--red)
}

.header-inner,main,footer {
  max-width:1040px;
  margin:auto;
  padding-left:24px;
  padding-right:24px
}

.header-inner {
  padding-top:20px;
  padding-bottom:20px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  min-height:48px
}

.brand strong {
  display:block;
  font-size:1.15rem;
  line-height:1.25
}

.brand-mark {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  background:var(--red);
  border:1px solid #d87981;
  border-radius:4px;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.035em;
  flex-shrink:0
}

.brand-subtitle {
  display:block;
  color:#c9d2d9;
  font-size:.65rem;
  letter-spacing:.17em;
  margin-top:5px;
  font-weight:700
}

main {
  padding-top:28px;
  padding-bottom:48px;
  min-height:70vh
}

.eyebrow {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px
}

.intro {
  max-width:620px;
  color:var(--muted);
  margin-top:14px
}

.page-heading {
  margin:8px 0 26px
}

.sample-notice {
  border:1px solid #c99332;
  border-left:5px solid #b27613;
  background:#fff4d9;
  color:#593c0d;
  padding:12px 16px;
  margin:20px 0 26px;
  display:flex;
  flex-wrap:wrap;
  gap:3px 16px;
  font-size:.88rem
}

.sample-notice strong {
  font-size:.76rem;
  letter-spacing:.055em;
  align-self:center
}

.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}

.section-heading>span {
  font-size:.8rem;
  color:var(--muted);
  text-align:right
}

.card-grid,.compartment-grid {
  display:grid;
  gap:16px
}

.apparatus-card {
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--red);
  padding:26px;
  text-decoration:none;
  border-radius:5px;
  display:block
}

.apparatus-card h3 {
  font-size:1.6rem;
  margin-bottom:10px
}

.apparatus-card p {
  color:var(--muted);
  font-size:1rem
}

.card-action {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:28px;
  font-size:.95rem;
  font-weight:750
}

.card-action span,.arrow {
  color:var(--red)
}

.apparatus-card:hover,.compartment-card:hover {
  border-color:var(--red);
  background:#fffafb
}

.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  color:var(--muted);
  margin:-10px 0 18px
}

.breadcrumbs a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:650
}

.compartment-card {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:5px;
  padding:20px
}

.compartment-tag {
  background:var(--ink);
  color:#fff;
  border-radius:4px;
  min-width:64px;
  min-height:60px;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  font-weight:800
}

.compartment-copy {
  flex:1;
  min-width:0
}

.compartment-copy>span {
  font-size:.8rem;
  color:var(--muted);
  display:block;
  margin-top:6px
}

.compartment-heading .eyebrow {
  margin-bottom:6px
}

.compartment-name {
  font-size:1.18rem;
  margin-top:8px;
  color:var(--muted)
}

.inventory {
  width:100%;
  border-collapse:collapse;
  background:var(--paper);
  table-layout:fixed;
  border-bottom:2px solid var(--line)
}

.inventory thead {
  background:var(--ink);
  color:#fff;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.045em
}

.inventory th,.inventory td {
  text-align:left;
  padding:17px 20px;
  vertical-align:top;
  overflow-wrap:anywhere
}

.inventory .quantity {
  width:82px;
  text-align:center
}

.inventory thead th:nth-child(2) {
  width:43%
}

.inventory tbody tr {
  border-bottom:1px solid var(--line)
}

.inventory tbody tr:nth-child(even) {
  background:#edf1f3
}

.inventory tbody th {
  font-size:1.05rem;
  font-weight:700
}

.quantity-value {
  font-size:1.15rem;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.details {
  font-size:.95rem
}

.location,.notes {
  display:block
}

.location {
  font-weight:650
}

.notes {
  color:var(--muted);
  font-size:.88rem;
  margin-top:4px
}

.updated {
  font-size:.78rem;
  color:var(--muted);
  margin-top:16px
}

.back-link {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  margin-top:26px;
  font-size:.95rem;
  font-weight:700
}

.layout-photo {
  margin-top:28px
}

figure {
  margin:16px 0
}

img {
  display:block;
  width:100%;
  height:auto;
  border-radius:4px
}

figcaption {
  font-size:.8rem;
  color:var(--muted);
  margin-top:8px
}

.empty-state {
  padding:24px;
  background:#fff;
  border:1px solid var(--line)
}

footer {
  padding-top:24px;
  padding-bottom:28px;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--muted)
}

footer>span {
  padding:0 8px
}

footer strong {
  display:block;
  margin-top:5px;
  font-weight:500
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.skip-link:focus {
  position:absolute;
  z-index:10;
  top:8px;
  left:8px;
  background:#fff;
  padding:12px;
  color:var(--ink)
}

@media(min-width:720px) {
  .card-grid,.compartment-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:600px) {
  .header-inner,main,footer {
    padding-left:16px;
    padding-right:16px
  }
  .header-inner {
    padding-top:14px;
    padding-bottom:14px
  }
  .brand strong {
    font-size:1rem
  }
  .brand-mark {
    width:46px;
    height:46px;
    font-size:.9rem
  }
  main {
    padding-top:20px
  }
  .breadcrumbs {
    margin-bottom:12px
  }
  .sample-notice {
    padding:9px 12px;
    margin:16px 0 20px;
    font-size:.8rem;
    gap:2px
  }
  .compartment-name {
    font-size:1.05rem
  }
  .inventory thead th:last-child {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    padding:0;
    white-space:nowrap
  }
  .inventory thead th:nth-child(2) {
    width:auto
  }
  .inventory thead {
    display:table;
    width:100%;
    table-layout:fixed
  }
  .inventory tbody {
    display:block
  }
  .inventory tbody tr {
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    padding:13px 8px 14px 0
  }
  .inventory th,.inventory td {
    padding:0
  }
  .inventory thead th {
    padding:12px 8px
  }
  .inventory .quantity {
    width:58px
  }
  .inventory tbody td.quantity {
    grid-column:1;
    grid-row:1 / span 2;
    padding-top:0
  }
  .inventory tbody th {
    grid-column:2;
    grid-row:1;
    font-size:1.05rem
  }
  .inventory .details {
    grid-column:2;
    grid-row:2;
    margin-top:5px
  }
  .location {
    font-size:.9rem
  }
  .location:before {
    content:'Location: ';
    font-weight:400
  }
  .notes {
    font-size:.85rem
  }
  .compartment-card {
    padding:16px;
    gap:12px
  }
  .section-heading>span {
    font-size:.75rem
  }
}

@media print {
  header {
    background:#fff;
    color:#000
  }
  .brand-subtitle {
    color:#000
  }
  .back-link,.breadcrumbs {
    display:none
  }
  main {
    padding:16px 0
  }
  .sample-notice {
    border:2px solid #000
  }
  .inventory thead {
    background:#eee;
    color:#000
  }
  footer {
    margin-top:20px
  }
}