/* OddlyUseful.Space
   Layout concept (unchanged): a quiet catalogue index. One sticky search well,
   category medallions as filters, projects as stitched cards or compact rows.
   Material: walnut and saddle leather in the dark theme, tanned vellum in the
   light one. Brass is the hardware (focus, selection), moss marks what is new.
   The carved medallion marks carry the colour; everything else stays quiet. */

/* FONTS-START: self-hosted. Install the files once with `node scripts/fetch-fonts.mjs`.
   Until they exist the page falls back to the serif stack in --font-display / --font-body. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/imfell-400.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/imfell-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/alegreya.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/alegreya-italic.woff2") format("woff2"); }
/* FONTS-END */

:root {
  --bg: #15120D;
  --surface: #1E1912;
  --surface-2: #261F16;
  --ink: #EADFC8;
  --ink-2: #A89A80;
  --line: #35291D;
  --line-strong: #52422D;
  --stitch: #43351F;
  --accent: #C9A35C;
  --on-accent: #1A140C;
  --moss: #8E9D5F;
  --on-moss: #14170B;
  --inset: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  /* medallion tones: dyed leather disc, tooled sigil, stitched rim */
  --m1-s: 46%; --m1-l: 62%;
  --m2-s: 34%; --m2-l: 48%;
  --mbg-s: 30%; --mbg-l: 15%;

  --font-display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --radius: 10px;
  --gutter: max(16px, 4vw);
  color-scheme: dark;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #D9CCAB;
    --surface: #E7DCC0;
    --surface-2: #DFD3B3;
    --ink: #2A1C10;
    --ink-2: #64513A;
    --line: #C3B390;
    --line-strong: #A18E6B;
    --stitch: #B7A47F;
    --accent: #6F4D12;
    --on-accent: #F2E8CF;
    --moss: #4F5D2B;
    --on-moss: #EEE8CE;
    --inset: inset 0 2px 4px rgba(70, 48, 14, 0.28);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
    --m1-s: 52%; --m1-l: 70%;
    --m2-s: 38%; --m2-l: 52%;
    --mbg-s: 30%; --mbg-l: 21%;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #D9CCAB;
  --surface: #E7DCC0;
  --surface-2: #DFD3B3;
  --ink: #2A1C10;
  --ink-2: #64513A;
  --line: #C3B390;
  --line-strong: #A18E6B;
  --stitch: #B7A47F;
  --accent: #6F4D12;
  --on-accent: #F2E8CF;
  --moss: #4F5D2B;
  --on-moss: #EEE8CE;
  --inset: inset 0 2px 4px rgba(70, 48, 14, 0.28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --m1-s: 52%; --m1-l: 70%;
  --m2-s: 38%; --m2-l: 52%;
  --mbg-s: 30%; --mbg-l: 21%;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg) var(--grain);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Masthead ---------- */

.mast {
  display: grid;
  gap: 14px;
  padding-block: clamp(20px, 4vw, 44px) 18px;
}

.mast-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  --bm: clamp(38px, 6.5vw, 60px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { display: block; flex: none; width: var(--bm); height: var(--bm); }
.brand-mark .mark { width: 100%; height: 100%; }

.wordmark {
  font: 400 clamp(1.5rem, 0.9rem + 4.2vw, 3.9rem)/1 var(--font-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.lede {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-2);
  font: italic 400 1.25rem/1.45 var(--font-body);
  text-wrap: balance;
}

.note {
  margin: 0;
  max-width: 60ch;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------- Search ---------- */

.toolbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  padding-block: 10px;
  background: var(--bg) var(--grain);
}

.search { position: relative; display: block; }

.search input {
  width: 100%;
  height: 54px;
  padding: 0 56px 0 50px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--inset);
  font-size: 1.25rem;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}
.search input::placeholder { color: var(--ink-2); opacity: 0.9; font-style: italic; font-weight: 400; }
.search input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--inset), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.s-ico {
  position: absolute; left: 17px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  color: var(--ink-2); pointer-events: none;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: italic 500 0.9rem/1 var(--font-body);
  color: var(--ink-2);
  background: var(--surface);
}
.s-key { position: absolute; right: 14px; top: 50%; margin-top: -12px; pointer-events: none; }

/* ---------- Category filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 8px 4px;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px 0 5px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip.plain { padding-left: 16px; }
.chip:hover { border-color: var(--accent); }
.chip .n { font-size: 0.95rem; font-style: italic; font-weight: 400; color: var(--ink-2); }
.chip.zero { opacity: 0.5; }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  opacity: 1;
}
.chip[aria-pressed="true"] .n { color: inherit; opacity: 0.75; }
.chip .mark { width: 30px; height: 30px; }

/* ---------- Status bar ---------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding-block: 14px 12px;
}
.status { margin: 0; color: var(--ink-2); font: italic 400 1rem/1.3 var(--font-body); }
.controls { display: flex; align-items: center; gap: 8px; }

.sel select {
  height: 38px;
  padding: 0 28px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
}
.seg button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- Carved medallion marks ---------- */

.mark {
  --m1: hsl(var(--h, 36) var(--m1-s) var(--m1-l));
  --m2: hsl(var(--h, 36) var(--m2-s) var(--m2-l));
  --mbg: hsl(var(--h, 36) var(--mbg-s) var(--mbg-l));
  display: block;
  flex: none;
  width: 58px;
  height: 58px;
}
.mark .disc { fill: var(--mbg); stroke: var(--m1); stroke-width: 1.6; }
.mark .stitch { fill: none; stroke: var(--m2); stroke-width: 0.9; stroke-dasharray: 1.4 2.4; opacity: 0.85; }
.mark .f1 { fill: var(--m1); }
.mark .s2 { fill: none; stroke: var(--m2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mark .cut { fill: none; stroke: var(--mbg); stroke-width: 0.9; stroke-linecap: round; }

/* ---------- Groups and cards ---------- */

.group { margin-block: 8px 32px; }
.group-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font: 400 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.15 var(--font-display);
  text-wrap: balance;
}
.group-h .mark { width: 34px; height: 34px; }
.group-h .n { color: var(--ink-2); font: italic 400 1rem/1 var(--font-body); }
.group-h::after { content: ""; flex: 1; min-width: 24px; border-top: 1px dashed var(--line-strong); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grid > li { display: grid; min-width: 0; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* saddle stitching, faint until the card is hovered */
.card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--stitch);
  border-radius: 6px;
  pointer-events: none;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--accent); background: var(--surface-2); }
.card:hover::after { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.meta { min-width: 0; display: flex; flex-direction: column; }

.name {
  margin: 0;
  padding-right: 22px;
  font: 700 1.25rem/1.2 var(--font-body);
  overflow-wrap: anywhere;
}

.desc {
  margin: 4px 0 0;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.2;
}
.host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.cat { flex: none; }
.grouped .cat { display: none; }

.go {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.card:hover .go, .card:focus-visible .go { opacity: 1; color: var(--accent); }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px 3px;
  border-radius: 999px;
  font: 600 0.8125rem/1.2 var(--font-body);
  vertical-align: 2px;
}
.badge.new { background: var(--moss); color: var(--on-moss); }
.badge.beta { border: 1px solid var(--line-strong); color: var(--ink-2); font-style: italic; font-weight: 500; }

/* ---------- List layout ---------- */

.view-list .grid {
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.view-list .card {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.view-list .card::after { display: none; }
.view-list li + li .card { border-top: 1px solid var(--line); }
.view-list .card:hover { background: var(--surface-2); }
.view-list .mark { width: 42px; height: 42px; }
.view-list .name { padding-right: 0; font-size: 1.1875rem; }
.view-list .desc { margin-top: 2px; -webkit-line-clamp: 1; line-clamp: 1; }
.view-list .foot, .view-list .go { display: none; }

@media (min-width: 820px) {
  .view-list .card { grid-template-columns: 42px minmax(170px, 0.9fr) minmax(0, 2fr) minmax(0, 0.9fr); gap: 18px; }
  .view-list .meta { display: contents; }
  .view-list .name { grid-column: 2; }
  .view-list .desc { grid-column: 3; margin: 0; }
  .view-list .foot { display: flex; grid-column: 4; margin: 0; padding: 0; justify-content: flex-end; }
  .view-list .cat { display: none; }
}

/* ---------- States ---------- */

.empty { display: grid; gap: 10px; justify-items: start; padding-block: 36px 48px; }
.empty h2 { margin: 0; font: 400 1.7rem/1.2 var(--font-display); text-wrap: balance; }
.empty p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.empty .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.btn {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.sk {
  height: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 8px;
  padding-block: 18px 40px;
  color: var(--ink-2);
  font: italic 400 1rem/1.5 var(--font-body);
}
.site-foot kbd { margin-inline: 2px; }

@media (hover: none) { .hint, .s-key { display: none; } .search input { padding-right: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .card, .card::after, .go { transition: none; }
}