/* Marginalia — a field record of everyday city life
   Signature: cream paper · red notebook margin rule · rubber-stamp subjects
              · catalog cards with field numbers · taped specimen photos */

@font-face {
  font-family: "Literata";
  src: url("assets/literata.ttf") format("truetype");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("assets/dm-serif.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("assets/oswald.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #efe7d4;
  --paper-2: #e7dcc2;
  --paper-3: #f6f0e1;
  --card: #f4ecda;
  --ink: #1e1a14;
  --ink-soft: #5d5346;
  --ink-faint: #8a7d68;
  --rule: #2a241c;
  --margin-red: #b23a2e;
  --margin-red-soft: rgba(178, 58, 46, 0.22);

  --tape: #e9cf7a;

  --c-Culture: #6f548d;
  --c-Food: #c0682a;
  --c-Movement: #2f6f7d;
  --c-People: #a8412c;
  --c-Places: #5d7a3a;

  --maxw: 1180px;
  --gutter-w: 64px;

  --shadow: 0 1px 0 rgba(30, 26, 20, 0.08), 0 10px 24px -16px rgba(30, 26, 20, 0.28);
  --shadow-lift: 0 2px 0 rgba(30, 26, 20, 0.10), 0 22px 40px -22px rgba(30, 26, 20, 0.4);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  background-image:
    radial-gradient(120% 60% at 12% 0%, rgba(178,58,46,0.05), transparent 55%),
    radial-gradient(120% 50% at 100% 100%, rgba(93,122,58,0.06), transparent 50%);
  color: var(--ink);
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(30,26,20,0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(30,26,20,0.014) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper-3);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* Page left margin gutter — the signature red rule */
.gutter {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--gutter-w);
  border-right: 1px solid var(--margin-red);
  background:
    linear-gradient(180deg, rgba(178,58,46,0.06), transparent 30%, transparent 70%, rgba(178,58,46,0.05));
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
}
.gutter-mark, .gutter-filed {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gutter-filed { color: var(--margin-red); }

.page {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 0 0 var(--gutter-w);
  padding: 0 clamp(20px, 4vw, 56px) 0 clamp(20px, 4vw, 40px);
}

/* ───────── Masthead ───────── */
.masthead {
  padding: 56px 0 22px;
  text-align: center;
  position: relative;
}
.issue-line {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.issue-line .dot { opacity: 0.5; }

.wordmark {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 12vw, 138px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.wordmark::first-letter { color: var(--margin-red); }

.tagline {
  max-width: 46ch;
  margin: 18px auto 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
}

.masthead-rule {
  margin: 26px auto 0;
  display: flex; align-items: center; gap: 14px;
  max-width: 640px;
  color: var(--rule);
}
.masthead-rule span { display: block; height: 1px; background: var(--rule); flex: 1; }
.masthead-rule .rule-diamond { flex: 0; font-size: 10px; color: var(--margin-red); background: none; height: auto; }

/* ───────── Controls ───────── */
.controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 22px;
  align-items: end;
  padding: 8px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.control { display: flex; flex-direction: column; gap: 8px; }
.control-label {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink-soft);
}
.pin-control .control-label { margin-bottom: -2px; }

.search-wrap, .select-wrap { position: relative; }
.search-glyph {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--ink-soft); pointer-events: none;
}
#search {
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 2px;
  padding: 11px 12px 11px 34px;
  outline: none;
  transition: border-color .15s, background .15s;
}
#search::placeholder { color: var(--ink-faint); }
#search:focus-visible {
  background: #fff8e9;
  border-color: var(--margin-red);
  box-shadow: 0 0 0 3px var(--margin-red-soft);
}

.select-wrap select, .pin-toggle {
  font-family: "Oswald", sans-serif;
}
#filter {
  appearance: none; -webkit-appearance: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 2px;
  padding: 11px 32px 11px 14px;
  cursor: pointer;
  outline: none;
  min-width: 168px;
}
#filter:focus-visible {
  background: #fff8e9;
  border-color: var(--margin-red);
  box-shadow: 0 0 0 3px var(--margin-red-soft);
}
.select-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none; font-size: 11px;
}

.pin-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: 2px;
  padding: 11px 14px;
  cursor: pointer;
  outline: none;
  transition: background .15s, border-color .15s, color .15s;
}
.pin-toggle:focus-visible {
  background: #fff8e9; border-color: var(--margin-red);
  box-shadow: 0 0 0 3px var(--margin-red-soft);
}
.pin-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  transition: background .15s, transform .15s;
}
.pin-toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper-3);
  border-color: var(--ink);
}
.pin-toggle[aria-pressed="true"] .pin-dot {
  background: var(--margin-red); border-color: var(--margin-red);
  transform: scale(1.1);
}
.pin-toggle[aria-pressed="false"] .pin-label-on,
.pin-toggle[aria-pressed="true"] .pin-label-off { display: none; }
.pin-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--ink);
}
.pin-toggle[aria-pressed="true"] .pin-count { background: rgba(255,255,255,0.18); color: var(--paper-3); }
.pin-toggle[aria-pressed="false"] .pin-count[data-pin-count="0"] { display: none; }

.catalog-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalog-hint { color: var(--ink-faint); }

/* ───────── Catalog list ───────── */
.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 40px;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 16px 16px 14px 20px;
  min-height: 226px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
/* category color stripe on the left edge — the card's "spine" */
.card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--cat, var(--ink-faint));
}
/* faint field number watermark */
.card::after {
  content: attr(data-fieldno);
  position: absolute; right: 10px; bottom: -10px;
  font-family: "DM Serif Display", serif;
  font-size: 92px; line-height: 1;
  color: rgba(30,26,20,0.045);
  pointer-events: none;
}
.card:hover, .card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ink);
}

.card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.card-field {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.card-stamp {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-3);
  background: var(--cat, var(--ink));
  padding: 3px 8px 2px;
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.card-pin {
  position: absolute; top: 12px; right: 12px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--margin-red);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 2px var(--card);
  display: none;
}
.card[data-saved="true"] .card-pin { display: block; }
.card[data-saved="true"] .card-stamp { margin-right: 0; }

.open-item {
  text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; color: inherit;
  display: block; width: 100%;
  margin: 2px 0 10px;
  border-radius: 2px;
  outline: none;
}
.open-item:focus-visible {
  box-shadow: 0 0 0 3px var(--margin-red-soft);
  background: var(--paper-3);
}
.card-title {
  font-family: "Literata", serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.card-title .arrow { color: var(--margin-red); font-weight: 400; opacity: 0; transition: opacity .15s; }
.card:hover .card-title .arrow, .open-item:focus-visible .card-title .arrow { opacity: 1; }

.card-summary {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.card-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(30,26,20,0.22);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.card-foot .author { color: var(--ink); }

/* ───────── Empty state ───────── */
.empty { padding: 30px 0 60px; }
.empty-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--card);
  border: 1px dashed var(--margin-red);
  border-radius: 3px;
  padding: 34px 28px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow);
}
.empty-stamp {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--margin-red);
  border: 2px solid var(--margin-red);
  padding: 5px 14px 4px;
  border-radius: 2px;
  transform: rotate(-3deg);
  margin-bottom: 16px;
  opacity: 0.85;
}
.empty-title {
  font-family: "DM Serif Display", serif;
  font-size: 26px;
  margin: 0 0 8px;
}
.empty-body { color: var(--ink-soft); margin: 0 0 20px; font-size: 15px; }
.reset-btn {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 13px;
  background: var(--ink); color: var(--paper-3);
  border: none; border-radius: 2px;
  padding: 10px 18px; cursor: pointer;
  outline: none;
}
.reset-btn:focus-visible { box-shadow: 0 0 0 3px var(--margin-red-soft); }
.reset-btn:hover { background: var(--margin-red); }

/* ───────── Colophon ───────── */
.colophon { padding: 20px 0 56px; }
.colophon-rule { height: 1px; background: var(--rule); margin-bottom: 18px; }
.colophon-line {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0; justify-content: center; text-align: center;
}
.colophon-mark {
  font-family: "DM Serif Display", serif;
  text-transform: none; letter-spacing: 0;
  font-size: 14px; color: var(--ink);
}

/* ───────── Detail / specimen sheet ───────── */
.detail {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(30,26,20,0.42);
  overflow-y: auto;
  padding: clamp(12px, 3vh, 40px) clamp(12px, 4vw, 48px);
  display: flex; justify-content: center;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.detail-sheet {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 900px;
  margin: 0 var(--gutter-w);
  padding: 34px clamp(24px, 5vw, 56px) 40px clamp(48px, 7vw, 96px);
  animation: rise .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }

/* detail left gutter — the red margin rule repeats */
.detail-gutter {
  position: absolute;
  left: clamp(16px, 4vw, 30px);
  top: 34px; bottom: 40px;
  width: 26px;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  border-right: 1px solid var(--margin-red);
}
.detail-gutter-rule { display: none; }
.detail-filed {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--margin-red);
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
}
.detail-subject {
  font-family: "Oswald", sans-serif;
  font-weight: 600; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-soft);
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
  margin-top: auto;
}

.detail-close {
  position: absolute; top: 18px; right: 22px;
  font-family: "Oswald", sans-serif;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
  border-radius: 2px; padding: 7px 12px; cursor: pointer;
  outline: none; transition: background .15s, color .15s;
}
.detail-close:focus-visible { background: var(--ink); color: var(--paper-3); box-shadow: 0 0 0 3px var(--margin-red-soft); }
.detail-close:hover { background: var(--ink); color: var(--paper-3); }

.detail-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.detail-stamps { display: flex; align-items: center; gap: 12px; }
.stamp {
  font-family: "Oswald", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper-3); background: var(--cat, var(--ink));
  padding: 4px 10px 3px; border-radius: 1px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.field-no {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft);
}
.detail-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end;
}
.detail-meta b { color: var(--ink); font-weight: 600; }

.detail-title {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 6px 0 10px;
  max-width: 18ch;
}
.detail-summary {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 22px;
  border-left: 3px solid var(--margin-red);
  padding-left: 14px;
}

.detail-photo {
  position: relative;
  margin: 0 0 26px;
  max-width: 640px;
}
.detail-photo img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  filter: saturate(0.9) contrast(1.02);
}
.tape {
  position: absolute; width: 84px; height: 26px;
  background: var(--tape);
  opacity: 0.78;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.tape::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 12px);
}
.tape-tl { top: -12px; left: -16px; transform: rotate(-7deg); }
.tape-tr { top: -12px; right: -16px; transform: rotate(8deg); }
.photo-caption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: 8px;
}

.detail-body-wrap { max-width: 64ch; }
.detail-body {
  font-size: 18px; line-height: 1.68;
  column-count: 2; column-gap: 36px;
  text-align: justify; hyphens: auto;
  -webkit-hyphens: auto;
}
.detail-body p { margin: 0 0 14px; break-inside: avoid; }
.detail-body p:first-child::first-letter {
  font-family: "DM Serif Display", serif;
  font-size: 58px; line-height: 0.82;
  float: left;
  margin: 6px 8px 0 0;
  color: var(--margin-red);
}

.detail-foot {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.save-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Oswald", sans-serif;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-bottom: 2px solid var(--ink);
  border-radius: 2px;
  padding: 10px 16px; cursor: pointer; outline: none;
  transition: background .15s, color .15s, border-color .15s;
}
.save-btn:focus-visible { box-shadow: 0 0 0 3px var(--margin-red-soft); border-color: var(--margin-red); }
.save-pin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent;
  transition: background .15s, transform .15s;
}
.save-btn[aria-pressed="true"] {
  background: var(--ink); color: var(--paper-3); border-color: var(--ink);
}
.save-btn[aria-pressed="true"] .save-pin {
  background: var(--margin-red); border-color: var(--margin-red);
  transform: scale(1.12);
}
.filed-stamp {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--margin-red);
  border: 1.5px solid var(--margin-red);
  border-radius: 2px;
  padding: 4px 10px 3px;
  transform: rotate(-2deg);
  opacity: 0.8;
}

/* body lock when detail open */
body.detail-open { overflow: hidden; }

/* ───────── Responsive ───────── */
@media (max-width: 1024px) {
  .list { grid-template-columns: repeat(2, 1fr); }
  .detail-body { column-count: 1; text-align: left; }
  .detail-body p:first-child::first-letter { font-size: 50px; }
}
@media (max-width: 760px) {
  :root { --gutter-w: 30px; }
  .gutter-mark { font-size: 9px; letter-spacing: 0.24em; }
  .gutter-filed { display: none; }
  .page { padding: 0 18px 0 14px; }
  .masthead { padding: 36px 0 18px; }
  .wordmark { font-size: clamp(54px, 17vw, 96px); }
  .tagline { font-size: 14.5px; }
  .controls { grid-template-columns: 1fr; gap: 16px; }
  .list { grid-template-columns: 1fr; gap: 14px; }
  .card { min-height: 0; }
  .card::after { font-size: 70px; }
  .detail { padding: 0; }
  .detail-sheet {
    margin: 0; border-radius: 0;
    min-height: 100vh;
    padding: 24px 18px 32px 46px;
  }
  .detail-gutter { left: 14px; top: 22px; bottom: 32px; width: 16px; }
  .detail-close { top: 12px; right: 12px; padding: 8px 10px; font-size: 11px; }
  .detail-title { font-size: 30px; max-width: 100%; }
  .detail-summary { font-size: 16px; }
  .detail-body { font-size: 16.5px; }
  .colophon-line { font-size: 10px; }
}
@media (max-width: 420px) {
  :root { --gutter-w: 22px; }
  .issue-line { font-size: 10px; gap: 6px; }
  .detail-meta { justify-content: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .detail, .detail-sheet { animation: none; }
}