/* Licensed local faces, fitted against the reference's letter shapes/widths. */
@font-face { font-family: 'MC Tinos'; src: url('./fonts/Tinos-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'MC Tinos'; src: url('./fonts/Tinos-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'MC Courier Prime'; src: url('./fonts/CourierPrime-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'MC Barlow Condensed'; src: url('./fonts/BarlowCondensed-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'MC Barlow Condensed'; src: url('./fonts/BarlowCondensed-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'MC Arimo'; src: url('./fonts/Arimo-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

/* Every selector and token belongs to this component. No global reset. */
.music-card {
  --mc-paper: #e9dcc9;
  --mc-ink: #35322c;
  --mc-rust: #a16045;
  --mc-orange: var(--ink, #bd390f);
  --mc-record: #25251f;
  --mc-font-display: Arial, Helvetica, sans-serif;
  --mc-font-body: 'MC Courier Prime', 'Courier New', Courier, monospace;
  --mc-font-ui: 'MC Arimo', Arial, Helvetica, sans-serif;
  --mc-font-meta: 'MC Barlow Condensed', 'Arial Narrow', sans-serif;
  --mc-texture-strength: 1;
  --mc-paper-texture: url('./assets/approved-paper.webp');
  --mc-radius: 3.95cqi;
  --mc-space-unit: 1cqi;
  --mc-padding: 3cqi;
  --mc-art-radius: 2.47cqi;
  --mc-display-size: 6.914cqi;
  --mc-title-size: 3.951cqi;
  --mc-focus: #6b3d2c;
  container-type: inline-size;
  inline-size: 100%;
  min-inline-size: 0;
  align-self: start;
  color: var(--mc-ink);
  isolation: isolate;
}
.music-card, .music-card * { box-sizing: border-box; }
.music-card [hidden] { display: none !important; }
.music-card__paper {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: var(--mc-padding) var(--mc-padding) 4cqi;
  border: 1px solid transparent;
  border-radius: var(--mc-radius);
  background-color: transparent;

  overflow-wrap: anywhere;
}
/* The approved paper-card.html surface, including its irregular worn edge.
   Nine-slice scaling keeps the corner creases intact as notes expand. */
.music-card__paper::before {
  content: '';
  position: absolute;
  inset: -.7426cqi;
  z-index: -1;
  pointer-events: none;
  border: 0 solid transparent;
  border-image-source: var(--mc-paper-texture);
  border-image-slice: 60 fill;
  border-image-width: 7.426cqi;
  border-image-repeat: stretch;
  filter: drop-shadow(0px 1px .6px rgba(46,34,15,.38))
    drop-shadow(0px 3px 2px rgba(49,37,18,.21))
    drop-shadow(0px 10px 9px rgba(64,48,24,.20))
    drop-shadow(0px 18px 15px rgba(65,48,23,.11));
  opacity: var(--mc-texture-strength);
}
.music-card__artwork {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--mc-art-radius);
  background: var(--mc-record);
}
.music-card__image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.music-card__artwork[data-state='loading'] .music-card__image { opacity: 0; }
.music-card__artwork-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--mc-paper);
  font: 400 max(13px, 2.3cqi)/1.5 var(--mc-font-body);
  text-align: center;
}
.music-card__body { margin-inline: 1.2cqi; }
.music-card__identity { margin-block-start: 4.6cqi; }
.music-card__artist {
  margin: 0;
  margin-inline-start: -.494cqi;
  color: var(--mc-orange);
  font-family: var(--mc-font-display);
  font-size: max(22px, var(--mc-display-size));
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: .03036em;
  word-spacing: .13214em;
  text-transform: uppercase;
}
.music-card__title {
  margin: 1.6cqi 0 0;
  padding-inline-start: .185cqi;
  color: var(--mc-ink);
  font-family: var(--mc-font-display);
  font-size: max(12px, var(--mc-title-size));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .24375em;
  word-spacing: .025em;
  text-transform: uppercase;
}
.music-card__divider {
  display: block;
  inline-size: 7.9cqi;
  block-size: max(1px, .38cqi);
  margin-block-start: 3.35cqi;
  margin-inline-start: .185cqi;
  background: var(--mc-rust);
}
.music-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 3cqi;
  row-gap: 4.5cqi;
  align-items: end;
  margin-block-start: 7.3cqi;
}
.music-card button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  color: inherit;
}
.music-card button:focus-visible {
  outline: 2px solid var(--mc-focus);
  outline-offset: 5px;
}
.music-card__read {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  margin: -1.4cqi 0;
  margin-inline-start: .185cqi;
  padding: 1.65cqi 0 1.4cqi;
  min-block-size: 44px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--mc-rust) !important;
  font: 400 max(12px, 2.716cqi)/1.3 var(--mc-font-ui);
  letter-spacing: .1em;
  text-align: left;
}
.music-card__duration {
  grid-column: 1;
  grid-row: 2;
  margin-inline-start: .062cqi;
  font: 400 max(12px, 2.716cqi)/1 var(--mc-font-body);
  letter-spacing: .0682em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-block-end: .45cqi;
}
.music-card .music-card__play {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  inline-size: max(44px, 14.2cqi);
  block-size: max(44px, 14.2cqi);
  flex-shrink: 0;
  margin-inline-end: .5cqi;
  padding: 0;
  border: max(2px, .43cqi) solid var(--mc-orange);
  border-radius: 50%;
  background: var(--mc-orange);
  color: var(--mc-paper);
}
.music-card__play svg { display: block; inline-size: 61%; block-size: 61%; fill: currentColor; }
.music-card__play[aria-pressed='false'] svg { transform: translateX(-.37cqi) scale(1.03, .955); }
.music-card__play:disabled { cursor: not-allowed; }
.music-card__close {
  position: absolute;
  inset-block-start: max(0px, calc(5.96cqi - max(22px, 3.1cqi)));
  inset-inline-end: calc(7.86cqi - max(22px, 3.1cqi));
  display: grid;
  place-items: center;
  inline-size: max(44px, 6.2cqi);
  block-size: max(44px, 6.2cqi);
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
}
.music-card__close svg {
  inline-size: 5.92cqi;
  block-size: 5.92cqi;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
}
.music-card[data-expanded='true'] .music-card__paper { padding-block-start: max(52px, 11.1cqi); padding-block-end: 4.3cqi; }
.music-card[data-expanded='true'] .music-card__body { margin-inline-start: 0; }
.music-card[data-expanded='true'] .music-card__identity { margin-block-start: 4.6cqi; }
.music-card[data-expanded='true'] .music-card__footer { margin-block-start: 2.2cqi; row-gap: 0; }
.music-card[data-expanded='true'] .music-card__duration { grid-row: 1; padding-block-end: 2cqi; }
.music-card[data-expanded='true'] .music-card__play { grid-row: 1; }
.music-card__notes { margin-block-start: 3.7cqi; }
.music-card__description {
  color: var(--mc-ink);
  font: 400 max(14px, 2.789cqi)/1.455 var(--mc-font-body);
  letter-spacing: .006em;
}
.music-card__description p { margin: 0; }
.music-card__description p + p { margin-block-start: 1em; }
.music-card__metadata {
  display: grid;
  grid-template-columns: 16.3cqi minmax(0, 1fr);
  gap: 1.1cqi 0;
  margin: 4.55cqi 0 0;
  font: 400 max(12px, 2.789cqi)/1.06 var(--mc-font-meta);
  text-transform: uppercase;
  letter-spacing: .1818em;
}
.music-card__metadata dt, .music-card__metadata dd { margin: 0; }
.music-card__metadata dd { font-weight: 500; letter-spacing: .1818em; }
.music-card__status {
  margin: 16px 0 0;
  font: 400 max(13px, 2cqi)/1.5 var(--mc-font-ui);
  color: var(--mc-ink);
}
@media (hover: hover) {
  .music-card__read:hover { text-decoration: underline; text-underline-offset: .2em; }
  .music-card__play:hover { background:var(--bright, #ce3705); border-color:var(--bright, #ce3705); }
  .music-card__close:hover { color: var(--mc-rust); border-color: var(--mc-rust); }
}
@media (prefers-reduced-motion: no-preference) {
  .music-card__play, .music-card__close { transition: color 120ms ease, border-color 120ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .music-card *, .music-card::before, .music-card::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  .music-card { --mc-rust: #814a35; --mc-texture-strength: .45; }
  .music-card__paper { background-color: var(--mc-paper); }
}