/* The Library: the work leads, the interface recedes. Tokens come from site.css. */

.lib { --lib-edge: clamp(16px, 3vw, 40px); padding-bottom: var(--section-y); }

/* ---- Opening: one line of explanation, then straight into the wall ---- */
.lib-intro {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end;
  column-gap: clamp(24px, 4vw, 64px);
  padding: clamp(96px, 9vw, 120px) var(--lib-edge) clamp(24px, 3vw, 32px);
}
.lib-intro__title { margin: 0; font-size: clamp(44px, 6vw, 80px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.lib-intro__lead { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.lib-intro__submit, .lib-link {
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--graphite); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.lib-intro__submit:hover, .lib-link:hover { color: var(--signal); text-decoration-color: currentColor; }
.lib-intro__submit { white-space: nowrap; padding: 12px 0; }

/* ---- Filters ---- */
.lib-tabs {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 0 var(--lib-edge); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.lib-tabs__list { display: flex; gap: clamp(16px, 2.2vw, 28px); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.lib-tabs__list::-webkit-scrollbar { display: none; }
.lib-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 48px;
  font-size: 15px; font-weight: 500; color: var(--graphite); box-shadow: inset 0 0 0 transparent;
  transition: color var(--dur-micro) var(--ease-standard);
}
.lib-tab span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--graphite); }
.lib-tab:hover { color: var(--ink); }
.lib-tab.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
.lib-pause {
  flex: none; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--graphite); transition: color var(--dur-micro) var(--ease-standard);
}
.lib-pause:hover { color: var(--ink); }

/* ---- The wall: tiles keep the shape the result was made in ---- */
.lib-wall {
  columns: 3; column-gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(16px, 2vw, 24px) var(--lib-edge) 0;
}
.lib-tile { display: block; break-inside: avoid; margin-bottom: clamp(24px, 3vw, 40px); color: inherit; }
.lib-tile__media { display: block; overflow: hidden; background: #0C0E10; outline: 1px solid rgba(21, 21, 26, 0.1); outline-offset: -1px; }
.lib-tile__media video, .lib-tile__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-reveal);
}
.lib-tile:hover .lib-tile__media video, .lib-tile:hover .lib-tile__media img { transform: scale(1.02); }
.lib-tile__title { display: block; margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; text-wrap: balance; }
.lib-tile:hover .lib-tile__title { color: var(--signal); }
.lib-tile__meta {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--graphite);
}
.lib-tile__meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-tile__meta span:last-child { flex: none; }

.lib-empty { padding: clamp(64px, 10vw, 120px) var(--lib-edge); }
.lib-empty p { margin: 0 0 24px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: var(--graphite); }

/* ---- Entry page: the result on one side, what you take on the other ---- */
.lib-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  margin: clamp(88px, 9vw, 112px) var(--lib-edge) 20px;
  border: 1px solid var(--ink); font-size: 15px; font-weight: 500; color: var(--ink);
  transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.lib-back svg { flex: none; transition: transform var(--dur-micro) var(--ease-standard); }
.lib-back:hover { background: var(--ink); color: #fff; }
.lib-back:hover svg { transform: translateX(-2px); }
.lib-entry {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start;
  gap: clamp(28px, 4vw, 64px); padding: 0 var(--lib-edge);
}
.lib-entry__result { position: sticky; top: 96px; }
.lib-entry__frame { --lib-room: calc(100vh - 128px); width: min(100%, calc(var(--lib-room) * var(--lib-ratio))); background: #0C0E10; overflow: hidden; }
.lib-entry__frame video, .lib-entry__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lib-entry__by { margin: 16px 0 0; font-size: 15px; font-weight: 500; }
.lib-entry__by a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--graphite); text-underline-offset: 4px; }
.lib-entry__by a:hover { color: var(--signal); text-decoration-color: currentColor; }
.lib-entry__by span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--graphite); }
.lib-entry__title { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.lib-entry__summary { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--graphite); max-width: 58ch; text-wrap: pretty; }

.lib-give { margin-top: 32px; border: 1px solid var(--hairline); background: var(--paper); }
.lib-give__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--hairline); }
.lib-give__head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.lib-copy {
  min-height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; transition: background var(--dur-micro) var(--ease-standard);
}
.lib-copy:hover { background: #000; }
.lib-copy.is-done { background: var(--signal); }
.lib-give__text {
  margin: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--ink);
}
.lib-give.is-collapsed .lib-give__text {
  max-height: 320px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.lib-give__more {
  display: block; width: 100%; min-height: 44px; padding: 0 18px; border: 0; border-top: 1px solid var(--hairline);
  background: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
}
.lib-give__more:hover { color: var(--signal); }
.lib-give__more[hidden], .lib-pause[hidden], .lib-copy[hidden] { display: none; }

.lib-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0 0; }
.lib-facts { margin: 28px 0 0; border-top: 1px solid var(--hairline); }
.lib-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.lib-facts dt { font-size: 14px; color: var(--graphite); }
.lib-facts dd { margin: 0; font-size: 14px; }
.lib-origin { margin: 20px 0 0; font-size: 14px; line-height: 1.55; color: var(--graphite); max-width: 58ch; }
.lib-origin a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.lib-origin a:hover { color: var(--signal); }

.lib-more { margin: clamp(64px, 9vw, 112px) var(--lib-edge) 0; padding-top: 28px; border-top: 1px solid var(--hairline); }
.lib-more__title { margin: 0 0 24px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.02em; }
.lib-more__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.lib-more__row .lib-tile { margin-bottom: 0; }

/* ---- Submit ---- */
.lib-submit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  gap: clamp(32px, 6vw, 96px); padding: 0 var(--lib-edge);
}
.lib--submit { --lib-edge: clamp(24px, 5vw, 72px); }
.lib-submit .lib-intro__lead { margin-top: 24px; font-size: 19px; }
.lib-submit__note { margin: 20px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--graphite); }
.lib-form { display: grid; gap: 20px; }
.lib-form label { display: grid; gap: 7px; }
.lib-form label > span { font-size: 14px; font-weight: 500; }
.lib-form em { font-style: normal; font-weight: 400; color: var(--graphite); }
.lib-form input[type="url"], .lib-form input[type="text"], .lib-form input[type="email"], .lib-form select, .lib-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--hairline); background: var(--paper);
  font: inherit; font-size: 16px; color: var(--ink); transition: border-color var(--dur-micro) var(--ease-standard);
}
.lib-form select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%2315151A' stroke-width='1.5'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.lib-form textarea { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; resize: vertical; }
.lib-form input:focus, .lib-form select:focus, .lib-form textarea:focus { background-color: var(--canvas); }
.lib-form__check { grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px !important; }
.lib-form__check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--signal); }
.lib-form__check span { font-weight: 400 !important; font-size: 14px !important; line-height: 1.5; color: var(--graphite); }
.lib-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lib-form .btn { justify-self: start; }
.lib-form__ok, .lib-form__err { margin: 0; padding: 14px 16px; font-size: 15px; line-height: 1.5; border: 1px solid var(--hairline); }
.lib-form__ok { background: var(--paper); color: var(--ink); }
.lib-form__err { color: #8E1F1F; border-color: currentColor; }

/* ---- Responsive ---- */
@media (max-width: 1099px) { .lib-wall { columns: 2; } }
@media (max-width: 999px) {
  .lib-entry, .lib-submit { grid-template-columns: minmax(0, 1fr); }
  .lib-entry__result { position: static; }
  .lib-entry__frame { --lib-room: 75vh; }
  .lib-more__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-more__row .lib-tile:nth-child(3) { display: none; }
}
@media (max-width: 759px) {
  .lib-intro { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .lib-intro__lead { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 559px) {
  .lib-wall { columns: 1; }
  .lib-intro { padding-top: 72px; }
  .lib-tabs { flex-wrap: wrap; gap: 0; }
  .lib-tabs__list { width: 100%; }
  .lib-pause { min-height: 44px; }
  .lib-more__row { grid-template-columns: minmax(0, 1fr); }
  .lib-more__row .lib-tile:nth-child(3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-tile__media video, .lib-tile__media img { transition: none; }
  .lib-tile:hover .lib-tile__media video, .lib-tile:hover .lib-tile__media img { transform: none; }
}

/* ---- Search ---- */
.lib-tools { flex: none; display: flex; align-items: center; gap: 20px; }
.lib-search { position: relative; display: flex; align-items: center; width: 240px; color: var(--graphite); }
.lib-search[hidden], .lib-status[hidden], .lib-nomatch[hidden], .lib-wall[hidden], .lib-tile[hidden] { display: none; }
.lib-search svg { position: absolute; left: 12px; pointer-events: none; }
.lib-search input {
  width: 100%; min-height: 36px; padding: 0 10px 0 36px; border: 1px solid transparent; background: var(--paper);
  font: inherit; font-size: 14px; color: var(--ink);
  transition: border-color var(--dur-micro) var(--ease-standard);
}
.lib-search input::placeholder { color: var(--graphite); opacity: 1; }
.lib-search input:hover { border-color: var(--hairline); }
.lib-search input:focus { border-color: transparent; }
.lib-status { margin: 16px var(--lib-edge) 0; font-size: 15px; color: var(--graphite); }
.lib-nomatch { padding: clamp(56px, 8vw, 96px) var(--lib-edge); }
.lib-nomatch p:first-child { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.lib-nomatch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 24px 0 0; }
@media (max-width: 899px) {
  .lib-tabs { flex-wrap: wrap; gap: 0; }
  .lib-tabs__list { width: 100%; }
  .lib-tools { width: 100%; padding: 4px 0 10px; border-top: 1px solid var(--hairline); }
  .lib-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .lib-search input { min-height: 44px; font-size: 16px; }
}