:root {
  color: #27251f;
  background: #f7f4ee;
  font-family: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.page-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 96px; }
.hero { border-bottom: 1px solid #d9d3c8; padding-bottom: 30px; }
.eyebrow { color: #a34a2b; font: 500 12px/1 "DM Mono", monospace; letter-spacing: .08em; margin: 0 0 15px; text-transform: uppercase; }
.title-row, .list-toolbar { align-items: flex-end; display: flex; justify-content: space-between; gap: 20px; }
h1, h2, p { margin-top: 0; }
h1 { font: 700 clamp(42px, 8vw, 68px)/.95 "Fraunces", serif; letter-spacing: -.05em; margin-bottom: 14px; }
h2 { font: 600 20px/1 "Fraunces", serif; letter-spacing: -.02em; margin-bottom: 18px; }
.summary { color: #6e6a60; font-size: 15px; margin-bottom: 0; }
.text-button, .delete-button { background: transparent; border: 0; color: #6e6a60; font-size: 13px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover, .delete-button:hover { color: #a34a2b; }

.entry-card { background: #e7e7d8; border-radius: 4px; margin: 32px 0 40px; padding: 25px; }
#item-form { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(160px, 1fr) 78px 120px auto; }
label { display: block; }
.item-input input, .small-input input, .small-input select, .sort-control select { background: #fdfcf8; border: 1px solid #cac6ba; border-radius: 3px; color: #27251f; height: 44px; outline-offset: 2px; padding: 0 11px; width: 100%; }
.item-input input { font-size: 16px; }
.small-input span { color: #777269; display: block; font: 11px/1 "DM Mono", monospace; margin: 0 0 7px 2px; text-transform: uppercase; }
.add-button { background: #a34a2b; border: 1px solid #a34a2b; border-radius: 3px; color: white; font-weight: 600; height: 44px; padding: 0 16px; white-space: nowrap; }
.add-button:hover { background: #873b21; }
.add-button span { font-size: 18px; margin-left: 5px; }

.list-toolbar { border-bottom: 1px solid #d9d3c8; padding-bottom: 14px; }
.filters { display: flex; gap: 16px; }
.filter { background: transparent; border: 0; color: #777269; font-size: 13px; padding: 5px 0; }
.filter.active { color: #27251f; font-weight: 700; text-decoration: underline; text-decoration-color: #cf7651; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sort-control select { background-color: transparent; border: 0; color: #6e6a60; font-size: 12px; height: 29px; padding: 0; width: auto; }
.item-list { list-style: none; margin: 0; padding: 0; }
.list-item { align-items: center; border-bottom: 1px solid #e1ddd5; display: flex; gap: 14px; min-height: 76px; padding: 14px 3px; }
.check-button { align-items: center; background: transparent; border: 1.5px solid #8f8a7e; border-radius: 50%; display: flex; flex: 0 0 22px; height: 22px; justify-content: center; padding: 0; width: 22px; }
.check-button span { border-bottom: 2px solid white; border-right: 2px solid white; display: none; height: 8px; transform: rotate(45deg) translate(-1px, -1px); width: 4px; }
.item-details { flex: 1; min-width: 0; }
.item-name { font-size: 16px; font-weight: 600; margin: 0 0 5px; overflow-wrap: anywhere; }
.item-meta { align-items: center; color: #777269; display: flex; font: 11px/1 "DM Mono", monospace; gap: 8px; margin: 0; text-transform: uppercase; }
.category-tag { color: #a34a2b; }
.list-item.completed .check-button { background: #5e7663; border-color: #5e7663; }
.list-item.completed .check-button span { display: block; }
.list-item.completed .item-name { color: #89857d; text-decoration: line-through; text-decoration-thickness: 1px; }
.list-item.completed .item-meta { opacity: .55; }
.empty-state { border: 1px dashed #cbc6bb; color: #777269; margin-top: 20px; padding: 38px 20px; text-align: center; }
.empty-state span { color: #a34a2b; display: block; font: 32px/1 "Fraunces", serif; margin-bottom: 10px; }
.empty-state p { color: #49463f; font: 600 18px/1.2 "Fraunces", serif; margin-bottom: 6px; }
.empty-state small { font-size: 13px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

@media (max-width: 620px) {
  .page-shell { padding-top: 42px; }
  #item-form { grid-template-columns: 1fr 1fr; }
  .item-input { grid-column: 1 / -1; }
  .add-button { grid-column: 1 / -1; }
  .title-row { align-items: flex-start; }
  .text-button { flex: 0 0 auto; }
}