/* ============================================================
   Kiss Cut — exported static catalog. Self-contained: no web
   fonts, no CDN, no external assets. System font stack only.
   ============================================================ */

:root {
  --mat:        #1c3a37;
  --mat-deep:   #16302e;
  --mat-line:   #2c5450;

  --paper:      #f6f4ee;
  --paper-2:    #efece3;
  --ink:        #16211f;
  --ink-soft:   #46564f;
  --muted:      #7f8c85;
  --hair:       #dcd8cc;

  --cut:        #e5397f;   /* kiss-cut magenta */
  --cut-deep:   #c11f61;
  --tape:       #f2c14e;   /* masking-tape yellow */
  --link:       #2f8f83;

  --radius:     10px;
  --shadow:     0 1px 0 rgba(0,0,0,.04), 0 6px 22px -12px rgba(20,40,38,.4);
  --font-body:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Solid base so the iOS Safari overscroll (rubber-band) area is always this colour,
   matching the header, instead of flickering to the mat or leaking cards above the nav. */
html { background: var(--mat-deep); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* The gridded "cutting mat" that cards scroll over. Painted by a position:fixed layer
   rather than `background-attachment: fixed`, which mis-renders on iOS Safari across
   overscroll and after the modal toggles `overflow: hidden` on the body. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--mat-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--mat-line) 39px 40px),
    var(--mat);
}
body.modal-open { overflow: hidden; }

a { color: var(--link); }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;                 /* above cards; below the modal (50) and drawer (60) */
  /* A distinct solid bar, not the gridded mat the cards scroll over — so the
     header reads as its own surface rather than blending into the work area.
     Opaque is also required: the body's mat is fixed, so a translucent header
     would show the cards scrolling through it. */
  background: var(--mat-deep);
  border-bottom: 1px solid var(--mat-line);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .55);
  padding: 20px 24px 12px;
  /* Pin the sticky header to its own compositing layer. iOS Safari otherwise
     strands the sticky layer when the modal toggles overflow on the body, letting
     cards paint over the nav afterwards. translateZ on a sticky element is safe —
     it doesn't change what the element sticks to. */
  transform: translateZ(0);
  will-change: transform;
}
.site-head-inner { max-width: 1560px; margin: 0 auto; }
.site-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.site-nav { flex: none; }
.about-link {
  padding: 7px 16px; border: 1px solid var(--mat-line); border-radius: 999px;
  background: none; color: #cfe1dc; font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.about-link:hover { color: var(--paper); border-color: var(--tape); }
.about-link.hidden { display: none; }

/* red sash: a small tab pinned to the very top-centre of the page */
.sash {
  position: fixed; z-index: 45;      /* above header (40), below modal (50) */
  top: 0; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: 0 0 7px 7px;
  background: #cc0000; color: #fff;
  font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.sash.hidden { display: none; }

#site-title {
  margin: 0;
  color: var(--paper);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}
#site-title a { color: inherit; text-decoration: none; }

/* 404 page (404.html) — override the two-column grid so the message centres */
main.notfound-main { display: block; }
.notfound { max-width: 640px; margin: 12vh auto; padding: 0 24px; text-align: center; }
.notfound-code { font-family: var(--font-mono); font-size: 64px; font-weight: 700; color: var(--cut); margin: 0; line-height: 1; }
.notfound-title { margin: 12px 0 6px; color: var(--paper); font-size: 24px; }
.notfound-msg { color: #cfe1dc; margin: 0 0 20px; }
.notfound-home { color: var(--link); font-weight: 600; }
#site-desc {
  margin: 6px 0 0;
  color: #cfe1dc;
  max-width: 60ch;
}
/* the description is Markdown-rendered: tame the wrapping <p> and inline bits */
#site-desc p { margin: 0; }
#site-desc p + p { margin-top: .4em; }
#site-desc a { color: var(--link); }
#site-desc code { font-family: var(--font-mono); font-size: .9em; }
.tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}
#search {
  flex: 1 1 320px;
  min-width: 220px;
  padding: 11px 14px;
  border: 1px solid var(--mat-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}
#search:focus { outline: 2px solid var(--cut); outline-offset: 1px; }
.count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9fc0ba;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ---------- filter sidebar ---------- */
.sidebar {
  position: sticky;
  /* clear the sticky header, whose height varies with the description; --head-h
     is measured in site.js. Falls back to 18px before/without JS. */
  top: calc(var(--head-h, 18px) + 12px);
  max-height: calc(100vh - var(--head-h, 18px) - 24px);
  overflow-y: auto;
  padding: 14px 16px 18px;
  border: 1px solid var(--mat-line);
  border-radius: var(--radius);
  background: var(--mat-deep);   /* opaque, matching the header bar — not a wash over the mat */
}
.sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.sidebar-title {
  font-family: var(--font-mono); font-size: 11px; color: #9fc0ba;
  text-transform: uppercase; letter-spacing: .12em;
}
.sidebar-clear {
  padding: 3px 9px; border: 1px dashed var(--mat-line); border-radius: 999px;
  background: none; color: #bcd0cb; font-size: 12px; font-family: inherit; cursor: pointer;
}
.sidebar-clear:hover { color: var(--paper); border-color: var(--cut); }
.fgroup { border-top: 1px solid var(--mat-line); padding: 10px 0 4px; }
.fgroup:first-of-type { border-top: 0; }
.fgroup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: #cfe1dc;
  text-transform: uppercase; letter-spacing: .12em;
}
.fgroup-head:hover { color: var(--paper); }
.fgroup-caret { font-size: 10px; opacity: .7; }
.fgroup-body { margin-top: 8px; }
.fgroup-search {
  width: 100%; margin-bottom: 6px; padding: 6px 9px;
  border: 1px solid var(--mat-line); border-radius: var(--radius);
  background: rgba(246,244,238,.08); color: var(--paper);
  font-family: inherit; font-size: 13px;
}
.fgroup-search:focus { outline: 2px solid var(--cut); outline-offset: 1px; }
.fgroup-search::placeholder { color: #8fb0aa; }
.fgroup-more {
  margin-top: 4px; padding: 2px 0; border: 0; background: none;
  color: var(--link); font-family: inherit; font-size: 12.5px;
  cursor: pointer; text-decoration: underline;
}
.fgroup-more:hover { color: var(--paper); }
.fgroup-none { color: #9fc0ba; font-size: 12.5px; padding: 2px 0; }
.fgroup.collapsed .fgroup-body { display: none; }
.frow {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; color: #d7e6e2; font-size: 13.5px; cursor: pointer;
}
.frow:hover { color: var(--paper); }
.frow input { accent-color: var(--cut); margin: 0; flex: none; }
.frow-label { flex: 1 1 auto; overflow-wrap: anywhere; }
.frow-count { font-family: var(--font-mono); font-size: 11px; color: #9fc0ba; flex: none; }
.frow.pinned .frow-label { font-weight: 600; color: var(--paper); }
.sidebar-empty { color: #9fc0ba; font-size: 13px; margin: 0; }

/* ---------- grid ---------- */
main {
  max-width: 1560px; margin: 0 auto; padding: 18px 24px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px;
  align-items: start;
}
.results { min-width: 0; }

/* ---------- narrow screens: sidebar becomes a drawer ---------- */
#filters-toggle {
  display: none;
  margin: 0 0 4px;
  padding: 9px 14px;
  border: 1px solid var(--mat-line); border-radius: var(--radius);
  background: rgba(246,244,238,.08); color: var(--paper);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
#filters-toggle:hover { border-color: var(--tape); }
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(10,26,24,.55); z-index: 55;
}
.sidebar-backdrop.hidden { display: none; }

@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); }
  #filters-toggle { display: inline-block; }
  .sidebar { display: none; }
  .sidebar.open {
    display: block;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(360px, 88vw); max-height: none; z-index: 60;
    border-radius: 0; border-left: 1px solid var(--mat-line);
    background: var(--mat);
    overflow-y: auto;
  }
}
@media (min-width: 1001px) {
  .sidebar-backdrop { display: none; }   /* drawer chrome never shows in two-column mode */
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.empty {
  color: #cfe1dc;
  text-align: center;
  padding: 40px 0;
  font-size: 15px;
}

/* ---------- card ---------- */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
  transition: transform .08s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -14px rgba(20,40,38,.6); }
.card:focus-visible { outline: 2px solid var(--cut); outline-offset: 2px; }
.thumb {
  position: relative;
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--hair);
}
.finish-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: rgba(242,193,78,.2); color: var(--cut-deep); border: 1px solid rgba(242,193,78,.55); white-space: nowrap; }
.card-finish { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92); }
/* Fill the thumb and let object-fit centre the artwork. Sizing the <img> explicitly
   (not max-width/max-height on an intrinsically-sized replaced element) keeps it
   centred consistently across engines — Safari otherwise offsets it. */
.thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.thumb-placeholder { width: 100%; height: 100%; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.desc { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.meta.size { font-family: var(--font-mono); font-size: 11.5px; }
.meta.event {
  display: inline-block;
  align-self: flex-start;
  background: var(--tape);
  color: #3a2c00;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.links { margin: 4px 0 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 8px; }
.links a { color: var(--link); }
.link-plain { color: var(--muted, #888); }   /* a URL with a disallowed scheme — shown, not linked */

/* ---------- modal ---------- */
.modal {
  position: fixed; top: 0; left: 0; right: 0;
  /* dvh tracks iOS Safari's URL bar, so the modal fits the VISIBLE viewport and
     the close button never hides behind the browser chrome (vh is the fallback). */
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 50;
}
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,20,18,.68); }
.modal-body {
  position: relative;
  background: var(--paper);
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  overflow: auto;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  padding: 26px 28px 30px;
}
.modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px;
  border: none; background: none;
  font-size: 26px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  border-radius: 8px;
}
.modal-close:hover { background: var(--paper-2); color: var(--cut); }

/* About page content (rendered from the author's Markdown) */
.about-content { color: var(--ink); line-height: 1.6; }
.about-content h1, .about-content h2, .about-content h3,
.about-content h4, .about-content h5, .about-content h6 {
  color: var(--ink); margin: 1.2em 0 .5em; line-height: 1.25;
}
.about-content h1:first-child, .about-content h2:first-child { margin-top: 0; }
.about-content h1 { font-size: 26px; }
.about-content h2 { font-size: 21px; }
.about-content h3 { font-size: 18px; }
.about-content p { margin: 0 0 .9em; }
.about-content ul, .about-content ol { margin: 0 0 .9em; padding-left: 1.4em; }
.about-content li { margin: .2em 0; }
.about-content a { color: var(--link); }
.about-content code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--paper-2); padding: .1em .35em; border-radius: 4px;
}
.about-content hr { border: none; border-top: 1px solid var(--hair); margin: 1.2em 0; }

.browse-title { margin: 0 0 12px; font-size: 20px; }
.browse-search {
  width: 100%; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-family: inherit; font-size: 15px;
}
.browse-search:focus { outline: 2px solid var(--cut); outline-offset: 1px; }
.browse-section { margin-bottom: 14px; }
.browse-letter {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: .12em; border-bottom: 1px solid var(--hair);
  padding-bottom: 3px; margin-bottom: 6px;
}
.browse-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.browse-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; font-size: 14px; }
.browse-row input { accent-color: var(--cut); margin: 0; flex: none; }
.browse-row .frow-label { flex: 1 1 auto; overflow-wrap: anywhere; }
.browse-row .frow-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); flex: none; }
.browse-empty { color: var(--ink-soft); }
.modal-thumb {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.modal-thumb img { max-width: 100%; max-height: 380px; object-fit: contain; }
.modal-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.modal-desc { margin: 0 0 12px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.modal-field { margin: 4px 0; font-size: 14px; }
.modal-field-label { color: var(--muted); }
.modal-section { margin-top: 16px; }
.modal-section-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.modal-links { display: flex; flex-direction: column; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--ink);
}
.chip-link { cursor: pointer; font-family: inherit; }
.chip-link:hover { border-color: var(--cut); color: var(--cut-deep); }
.attrs { display: flex; flex-direction: column; gap: 4px; }
.attr-row { display: flex; gap: 10px; font-size: 13.5px; }
.attr-key {
  font-family: var(--font-mono);
  color: var(--muted);
  min-width: 120px;
}
.attr-val { color: var(--ink); }
.rel-groups { display: flex; flex-direction: column; gap: 10px; }
.rel-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rel-label {
  font-size: 12.5px;
  color: var(--muted);
  min-width: 120px;
  font-style: italic;
}
.modal-download { margin-top: 20px; }
.download-link {
  display: inline-block;
  padding: 9px 16px;
  background: var(--cut);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.download-link:hover { background: var(--cut-deep); }