@font-face {
  font-family: "MV Tape";
  src: url("../fonts/tape/mv-tape-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 650;
  font-display: swap;
}

:root {
  --tape-module: var(--u, 4px);
}

/* An inline tape clones its cut ends on every wrapped line. Put it inside
   a heading, not on the block heading itself, to preserve separate strips. */
.tape {
  --tape-surface: var(--tape-black, #191919);
  --tape-letter: var(--tape-white, #fafaf7);
  --tape-material: url("img/tape/polymer-black-strip-20260930.webp");
  --tape-ink: url("img/tape/polymer-white-letter-20260930.webp");
  --tape-bevel: -0.35px -0.45px 0 #fff, 0.5px 0.8px 0 #8a8a8a,
    0.7px 1.25px 0.8px rgb(0 0 0 / 85%);
  display: inline;
  position: relative;
  padding: calc(var(--tape-module) * 2) calc(var(--tape-module) * 3);
  border: 0;
  border-radius: 1.5px;
  background-color: var(--tape-surface);
  /* The photographed face and bevel are nine-sliced inside the existing box.
     Repeating the middle preserves grain scale on both short and long labels. */
  border-image-source: var(--tape-material);
  border-image-slice: 16 fill;
  border-image-width: 3px;
  border-image-repeat: repeat stretch;
  box-shadow: 0 1px 1.5px rgb(0 0 0 / 24%);
  color: var(--tape-letter);
  font-family: "MV Tape", "Arial Narrow", sans-serif;
  font-size: calc(var(--tape-module) * 5);
  font-style: normal;
  font-weight: 650;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  line-height: calc(var(--tape-module) * 11);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--tape-bevel);
  text-decoration: none;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tape--white {
  --tape-surface: var(--tape-white, #fafaf7);
  --tape-letter: var(--tape-black, #191919);
  --tape-material: url("img/tape/polymer-white-strip-20260930.webp");
  --tape-ink: url("img/tape/polymer-black-letter-20260930.webp");
  --tape-bevel: -0.35px -0.45px 0 #fff, 0.5px 0.8px 0 #909090,
    0.7px 1.25px 0.8px rgb(0 0 0 / 20%);
}

.tape--s {
  font-size: calc(var(--tape-module) * 4);
  line-height: calc(var(--tape-module) * 10);
}

.tape--m {
  font-size: calc(var(--tape-module) * 5);
  line-height: calc(var(--tape-module) * 11);
}

.tape--l {
  font-size: calc(var(--tape-module) * 7);
  line-height: calc(var(--tape-module) * 13);
}

.tape--xl {
  font-size: clamp(32px, 5vw, 60px);
  font-size: round(down, clamp(32px, 5vw, 60px), var(--tape-module));
  line-height: calc(1em + var(--tape-module) * 6);
}

/* Inside a display heading: sized from the heading's own font, words kept whole. */
.tape--inline {
  margin-inline: 0.06em;
  padding: 0.28em 0.42em 0.24em;
  font-size: 0.5em;
  line-height: 1;
  vertical-align: 0.2em;
  overflow-wrap: normal;
}

/* Independent rotate composes with the button's press/lift transform. */
.tape--tilt-l,
.tape--tilt-r {
  display: inline-block;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.tape--tilt-l { rotate: -1.5deg; }
.tape--tilt-r { rotate: 1.5deg; }

.tape--date {
  margin-inline-start: calc(var(--tape-module) * 2);
  padding-inline: calc(var(--tape-module) * 2);
  font-size: calc(var(--tape-module) * 3);
  line-height: calc(var(--tape-module) * 9);
  white-space: nowrap;
  vertical-align: middle;
}

.tape--button {
  display: inline-block;
  box-sizing: border-box;
  max-inline-size: 100%;
  min-block-size: calc(var(--tape-module) * 11);
  padding-block: calc(var(--tape-module) * 3);
  line-height: calc(var(--tape-module) * 5);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 160ms;
}

@media (hover: hover) {
  .tape--button:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 3px rgb(0 0 0 / 24%);
  }
}

.tape--button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgb(0 0 0 / 16%);
}

.tape--button:focus-visible {
  outline: 2px solid #191919;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff, 1px 3px 4px rgb(0 0 0 / 20%);
}

.tape--button:disabled,
.tape--button[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: 0 1px 1px rgb(0 0 0 / 12%);
  /* Loading and unavailable are not cancelled: keep unstruck, readable text. */
  background-image: none;
  border-image: none;
  text-shadow: none;
  text-decoration: none;
}

.tape::selection,
.tape ::selection {
  color: var(--tape-surface);
  background: var(--tape-letter);
  text-shadow: none;
}

/* Words stay together; ordinary text-node spaces retain native wrapping. */
.tape__word { white-space: nowrap; }
.tape__letter { display: inline-block; }

/* Real text carries the photographed polymer face, not an image of a word.
   The solid background remains legible when an image cannot load. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .tape__ink,
  .tape__letter {
    background-color: var(--tape-letter);
    background-image: var(--tape-ink);
    background-size: 96px 32px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Opaque text shadows would cover the clipped photographic ink. */
    text-shadow: 0.45px 0.75px 0.3px rgb(0 0 0 / 8%);
    -webkit-text-stroke: 0.2px var(--tape-letter);
  }
}

.tape--button:disabled .tape__ink,
.tape--button:disabled .tape__letter,
.tape--button[aria-disabled="true"] .tape__ink,
.tape--button[aria-disabled="true"] .tape__letter {
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.tape__ink::selection,
.tape__letter::selection {
  -webkit-text-fill-color: var(--tape-surface);
  -webkit-text-stroke: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tape--button { transition: none; }
  .tape--button:not(:disabled):not([aria-disabled="true"]):hover,
  .tape--button:not(:disabled):not([aria-disabled="true"]):active { transform: none; }
}

@media (forced-colors: active) {
  .tape {
    color: CanvasText;
    background-color: Canvas;
    background-image: none;
    border-image: none;
    border: 1px solid CanvasText;
    box-shadow: none;
    text-shadow: none;
  }
  .tape__ink,
  .tape__letter {
    background-image: none;
    -webkit-text-fill-color: CanvasText !important;
    text-shadow: none;
    -webkit-text-stroke: 0;
  }
  .tape--button:focus-visible { outline-color: Highlight; }
}