/* Wisecrack Wisdom — parchment and ink, to suit the black-and-white owl */
:root {
  --paper: #f7f2e7;
  --card: #fffdf8;
  --ink: #1d1a16;
  --muted: #6d655a;
  --line: #ded5c3;
  --gold: #a87a1f;
  --gold-soft: #f1e4c4;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
}
a { color: inherit; }

.page { min-height: 100vh; display: flex; flex-direction: column; max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
.content { flex: 1; }

/* ---------- masthead ---------- */
.masthead { text-align: center; padding: 2rem 0 1rem; }
.logo { width: 11rem; height: auto; display: block; margin: 0 auto; }
.site-title {
  font: 700 clamp(2.2rem, 6vw, 3.2rem)/1.1 var(--serif);
  margin: .75rem 0 .2rem; letter-spacing: .01em;
}
.tagline { margin: 0; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 1.25rem; }

/* ---------- category buttons ---------- */
.categories {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 1.5rem auto 0; max-width: 46rem;
}
.cat {
  display: inline-block; padding: .45rem 1rem; border: 1px solid var(--ink); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .95rem; background: transparent;
  transition: background .15s, color .15s;
}
.cat:hover { background: var(--gold-soft); }
.cat[aria-current] { background: var(--ink); color: var(--paper); }
.cat.lucky { border-style: dashed; }
.cat.lucky[aria-current] { border-style: solid; }

/* ---------- the wisdom ---------- */
.wisdom { margin: 2rem auto 0; max-width: 46rem; }
.wisdom blockquote {
  position: relative; margin: 0; padding: 2.25rem 2.5rem 2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(60, 45, 20, .35);
  text-align: center; min-height: 13rem;
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .18s ease;
}
.wisdom blockquote.fading { opacity: 0; }
.wisdom .text {
  margin: 0; font: 700 clamp(1.5rem, 3.6vw, 2.1rem)/1.3 var(--serif); font-style: italic;
  text-wrap: balance;
}
.wisdom .attribution {
  margin-top: 1.25rem; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}

.more { text-align: center; margin: 2rem 0 2.5rem; }
.new-wisdom {
  display: inline-block; padding: 1rem 2.75rem; border-radius: 999px;
  background: var(--gold); color: #fff; text-decoration: none;
  font: 700 1.6rem/1.1 var(--serif); letter-spacing: .02em;
  box-shadow: 0 6px 16px -8px rgba(120, 85, 20, .7);
  transition: transform .1s, background .15s;
}
.new-wisdom:hover { background: #8f6716; }
.new-wisdom:active { transform: translateY(1px); }
.new-wisdom:focus-visible, .cat:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line); padding: 1rem 0 1.25rem; color: var(--muted); font-size: .85rem;
}
.site-footer .legal { margin: 0; }
.admin-link { color: var(--muted); font-size: .8rem; text-decoration: none; opacity: .75; white-space: nowrap; }
.admin-link:hover { opacity: 1; text-decoration: underline; }

/* ---------- plain pages ---------- */
.plain { text-align: center; padding: 4rem 0; }
.plain h1 { font: 700 2.4rem/1.1 var(--serif); }

/* ---------- admin ---------- */
.admin { padding: 1.5rem 0 2rem; }
.admin h1 { font: 700 2.2rem/1.1 var(--serif); margin: .5rem 0 1rem; }
.admin h2 { font: 700 1.5rem/1.2 var(--serif); margin: 2rem 0 .75rem; }
.admin .back { margin: 0; font-size: .9rem; }
.notice { background: var(--gold-soft); border-left: 4px solid var(--gold); padding: .6rem .9rem; }
.admin label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
.admin input[type=password], .admin input[type=search], .admin select, .admin textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid #bfb39c; border-radius: 4px; background: #fff; max-width: 100%;
}
.admin textarea { width: 100%; resize: vertical; }
.admin button {
  font: 600 1rem var(--sans); padding: .55rem 1.2rem; margin-top: .75rem; border: 0; border-radius: 4px;
  background: var(--ink); color: var(--paper); cursor: pointer;
}
.admin .login { max-width: 22rem; }
.inline { display: inline; }
.admin .link-button { background: none; color: var(--muted); padding: 0; margin: 0; text-decoration: underline; font-weight: 400; }
.signout { float: right; margin-top: -2.6rem; }

.counts { border-collapse: collapse; font-size: .95rem; margin-bottom: 1rem; }
.counts th, .counts td { text-align: left; padding: .2rem 1.25rem .2rem 0; }
.counts td + td, .counts th + th { text-align: right; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; position: sticky; top: 0; background: var(--paper); padding: .5rem 0; z-index: 1; }
.filters[hidden] { display: none; }
.filters input[type=search] { flex: 1 1 14rem; }
.meta { color: var(--muted); font-size: .9rem; }

.wisdom-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wisdom-list .row {
  display: grid; grid-template-columns: 3.2rem 7.5rem 1fr auto; gap: .75rem; align-items: center;
  padding: .55rem .25rem; border-bottom: 1px solid var(--line);
}
.wisdom-list .row[hidden] { display: none; }
.wisdom-list .row:target { background: var(--gold-soft); }
.wisdom-list .num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }
.wisdom-list .cat-tag { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wisdom-list .row.inactive .wtext { color: var(--muted); text-decoration: line-through; }
.wisdom-list .actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.wisdom-list .edit-link { color: var(--muted); font-size: .85rem; }
.wisdom-list .edit-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wisdom-list .edit-form textarea { flex: 1 1 100%; }
.wisdom-list .edit-form button { margin: 0; padding: .35rem .9rem; font-size: .9rem; }
.wisdom-list .edit-buttons { display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
.wisdom-list .edit-error { color: #a12c1f; }
.wisdom-list .row:has(.edit-form) { align-items: start; background: var(--card); }
.wisdom-list .row:has(.edit-form) .edit-link { visibility: hidden; }
.admin .switch {
  margin: 0; min-width: 6.2rem; padding: .3rem .7rem; font-size: .85rem; border-radius: 999px;
  background: #2f6b3a; color: #fff;
}
.admin .switch[aria-pressed="false"] { background: #d8d1c3; color: var(--ink); }
.admin .switch:disabled { opacity: .6; }

@media (max-width: 40rem) {
  .wisdom blockquote { padding: 1.75rem 1.25rem 1.5rem; }
  .new-wisdom { padding: .9rem 2rem; font-size: 1.4rem; }
  .wisdom-list .row { grid-template-columns: 3rem 1fr auto; }
  .wisdom-list .cat-tag { display: none; }
  .signout { float: none; margin: 0; }
}