:root {
  color-scheme: light;
  --paper: #F6F2E2;
  --ink: #3F1C21;
  --accent: #59131B;
  --sand: #DED5BD;
  --leaf: #545C33;
  --rule: rgba(63, 28, 33, .2);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.75 Inter, sans-serif; -webkit-font-smoothing: antialiased; }
header, main, footer { width: min(75rem, calc(100% - 6rem)); margin-inline: auto; }
a { color: var(--accent); text-underline-offset: .25em; }
a:hover { color: var(--leaf); }
p { margin: 0 0 1.25rem; }
header { min-height: 6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.wordmark { font: 400 1.65rem/.95 'Instrument Serif', Georgia, serif; text-decoration: none; color: var(--ink); }
.wordmark span { display: block; margin-left: 1.6rem; }
.header-brand { display: flex; align-items: center; gap: 2rem; min-width: 0; }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 1.5rem; margin-left: auto; }
.header-link { font-size: .9375rem; font-weight: 500; padding-block: .75rem; }
main { min-height: calc(100vh - 14rem); padding-block: 1.5rem 3rem; animation: arrive .45s ease-out; }
.eyebrow { font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--leaf); margin-bottom: 1.25rem; }
h1 { font: 400 2rem/1.1 'Instrument Serif', Georgia, serif; letter-spacing: -.015em; margin: 0; padding-left: 2rem; border-left: 1px solid var(--rule); }
#status { max-width: 65ch; margin-block: 1.5rem; }
#status:empty { display: none; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: 1.25rem; margin: 1.5rem 0; }
label { display: grid; gap: .6rem; font-size: .9375rem; font-weight: 500; }
input, select, button { font: 400 1rem/1.5 Inter, sans-serif; border: 1px solid var(--rule); padding: .85rem 1rem; color: var(--ink); background: transparent; border-radius: 0; max-width: 100%; min-width: 0; }
input, select { min-height: 3.25rem; }
input { width: 100%; }
input:focus, select:focus { border-color: var(--accent); }
button { cursor: pointer; min-height: 3.25rem; font-weight: 500; background: var(--accent); border-color: var(--accent); color: var(--paper); transition: background .2s ease, color .2s ease, border-color .2s ease; }
button:hover { background: var(--ink); border-color: var(--ink); }
button.plain { background: transparent; color: var(--accent); border-color: var(--rule); }
button.plain:hover { background: rgba(222, 213, 189, .3); border-color: var(--accent); }
button:disabled { cursor: wait; opacity: .6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--sand); color: var(--accent); }
#login, #password-login, #verify { max-width: 44rem; padding-block: .5rem 1.5rem; }
#login label, #verify label { flex: 1 1 20rem; }
#password-login label { flex: 1 1 17rem; }
#show-password, #show-code, #back { flex-basis: 100%; width: fit-content; justify-self: start; border: 0; padding: .5rem 0; min-height: 2.75rem; text-align: left; text-decoration: underline; text-underline-offset: .3em; }
#show-password:hover, #show-code:hover, #back:hover { background: transparent; color: var(--leaf); }
.form-error { flex-basis: 100%; margin: 0; color: var(--accent); font-weight: 500; }
.form-error:empty { display: none; }
#verify input { letter-spacing: .22em; max-width: 20rem; }
#admin { margin-block: 0 1.5rem; padding-block: 1.25rem; border-block: 1px solid var(--rule); }
#admin h2 { font: 400 clamp(2rem, 4vw, 3rem)/1.15 'Instrument Serif', Georgia, serif; margin: 0 0 1rem; }
#admin > p { max-width: 65ch; color: var(--leaf); }
#access { margin-bottom: .5rem; gap: 1rem; }
#access label:first-child { flex: 1 1 17rem; }
#access label:nth-child(2) { flex: 0 1 12rem; }
#access button { font-size: .9375rem; }
#library { margin-top: 0; }
#library nav { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; border-bottom: 1px solid var(--rule); }
#library nav button { background: transparent; color: var(--leaf); padding: .75rem 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 1.125rem; }
#library nav button[aria-pressed='true'] { color: var(--accent); border-bottom-color: var(--accent); }
#library nav button:hover { color: var(--accent); }
#filters { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-block: 2rem 1.5rem; }
#filters label { flex: 0 1 17rem; }
#filters select { width: 100%; }
#count { color: var(--leaf); font-size: .875rem; margin-bottom: 1rem; }
#entries > details { border-top: 1px solid var(--rule); }
#entries > details:last-child { border-bottom: 1px solid var(--rule); }
#entries summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1.4rem; list-style: none; font-size: 1.125rem; line-height: 1.5; font-weight: 500; cursor: pointer; overflow-wrap: anywhere; }
#entries summary::-webkit-details-marker { display: none; }
#entries summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--leaf); font-weight: 400; flex: 0 0 auto; }
#entries details[open] > summary::after { content: '−'; }
#entries summary:hover { color: var(--accent); }
article { max-width: 70ch; white-space: pre-line; padding: 0 0 2rem; overflow-wrap: anywhere; }
article p { margin-bottom: 1rem; }
article h2, article h3 { font-size: 1.25rem; line-height: 1.4; margin-block: 1.5rem .75rem; }
article a { overflow-wrap: anywhere; }
article img { max-width: 100%; height: auto; }
#entries details[open] article { animation: arrive .3s ease-out; }
.recommendation-image { display: block; width: auto; max-width: 100%; max-height: 24rem; object-fit: contain; margin: .5rem 0 1.5rem; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--leaf); }
[hidden] { display: none !important; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 60rem) {
  header, main, footer { width: calc(100% - 3rem); }
  #access button { flex: 1 1 auto; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  header, main, footer { width: calc(100% - 2.5rem); }
  header { min-height: 5rem; padding-block: 1rem; gap: .75rem; }
  .header-actions { gap: 1rem; }
  .header-link { font-size: .875rem; }
  .wordmark { font-size: 1.2rem; flex-shrink: 0; }
  .header-brand { gap: .75rem; }
  #logout { min-height: 2.75rem; padding: .6rem .75rem; font-size: .875rem; }
  main { padding-block: 1.25rem 2rem; }
  h1 { font-size: 1.375rem; padding-left: .75rem; }
  form label, #filters label, #access label:first-child, #access label:nth-child(2) { flex: 1 1 100%; }
  form > button { width: 100%; }
  #library nav { gap: .5rem 1.25rem; }
  #library nav button { font-size: 1rem; }
  #entries summary { font-size: 1.0625rem; padding-block: 1.25rem; }
  #admin { margin-block: 0 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  main, #entries details[open] article { animation: none; }
  button { transition: none; }
}