/* dailymotiondl.com — Batik Canting. Seed 01c7c2b6.
   The governing rule lives in tokens.css: WAX RESERVES. Dye and ornament stay
   in the field; every control sits on reserved cloth. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  /* The dye carries the page, not a band at the top of it. */
  background: var(--dye-cerise);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px);
}

/* Browser surfaces belong to the world too. */
::selection { background: var(--dye-gold); color: var(--ink); }
:root { accent-color: var(--dye-indigo); caret-color: var(--dye-cerise); }
:focus-visible {
  outline: var(--line-heavy) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.masthead :focus-visible, .band :focus-visible, .footer :focus-visible {
  outline-color: var(--focus-ring-on-dye);
}

img, svg { max-width: 100%; }
svg { width: 1.15em; height: 1.15em; fill: none; }

.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: absolute; inset-inline-start: var(--space-4); top: var(--space-4);
  z-index: 20; background: var(--cloth-reserved); color: var(--ink);
  padding: var(--space-2) var(--space-4); border: var(--line) solid var(--ink);
}

/* ---------- masthead ---------- */
.masthead {
  display: flex; align-items: center; gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--dye-indigo);
  color: var(--ink-on-dye);
  border-bottom: var(--line-heavy) solid var(--dye-indigo-deep);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-on-dye); text-decoration: none;
}
.brand-mark { color: var(--dye-gold); width: 1.4em; height: 1.4em; }
.nav { display: flex; gap: var(--space-4); flex: 1 1 auto; flex-wrap: wrap; }
.nav a {
  color: var(--ink-on-dye-soft); text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: var(--line) solid transparent;
}
.nav a:hover { color: var(--ink-on-dye); border-bottom-color: var(--dye-gold); }
.nav a[aria-current="page"] { color: var(--dye-gold); border-bottom-color: var(--dye-gold); }

.lang { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.lang-label { color: var(--ink-on-dye-soft); }
/* The switcher names each language in its own script, which is right — and it
   is also the only Arabic, Cyrillic and Devanagari on an otherwise Latin page.
   Left on the site font, those three words alone pull three webfont subsets on
   EVERY page, Devanagari worst at ~194 KB. Measured, not assumed. So the
   switcher renders in the system UI font: a native select is drawn by the OS
   on most platforms anyway, the labels stay in their own scripts, and no page
   downloads a script it never shows. */
.lang select {
  font: inherit; font-size: var(--text-sm);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--dye-indigo-deep); color: var(--ink-on-dye);
  border: var(--line) solid rgba(255,255,255,.25);
  border-radius: 3px; padding: var(--space-1) var(--space-2);
}

/* ---------- the field: dye floods it ---------- */
.field {
  position: relative;
  background: var(--dye-cerise);
  padding: var(--space-7) var(--space-4) var(--space-7);
  /* canting lines: the field is drawn on, never flat */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px);
}

/* ---------- reserved cloth: the task lives here ---------- */
.panel {
  max-width: 62rem; margin-inline: auto;
  background: var(--cloth-reserved);
  border: var(--line-heavy) solid var(--ink);
  border-radius: var(--radius-panel);
  box-shadow: var(--lift-panel);
  padding: var(--space-6) var(--space-5);
}
.panel h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, var(--text-4xl));
  line-height: 1.1; letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.lede { margin: 0 0 var(--space-5); color: var(--text-secondary); max-width: 46ch; }

/* ---------- link row ---------- */
.link-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.link-row input {
  flex: 1 1 22rem; min-width: 0;
  font: inherit;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  background: #fff;
  border: var(--line) solid var(--border-wax-strong);
  border-radius: 3px;
}
.link-row input::placeholder { color: var(--ink-faint); }
.link-row input:focus-visible { border-color: var(--dye-cerise); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font: inherit; font-weight: 500;
  padding: var(--space-3) var(--space-5);
  border-radius: 3px; cursor: pointer;
  border: var(--line) solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--action-primary); color: var(--action-text);
  border-color: var(--dye-indigo-deep);
}
.btn-primary:hover:not([disabled]) { background: var(--action-primary-hover); }
.btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--border-wax-strong);
}
.btn-quiet:hover:not([disabled]) { background: var(--cloth-shadowed); }
.btn-stop {
  background: var(--feedback-error); color: var(--ink-on-dye);
  border-color: var(--feedback-error);
  margin-top: var(--space-3);
}

/* ---------- status ---------- */
.status:empty { display: none; }
.status {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--cloth-raw);
  border: 1px solid var(--border-wax-strong);
  border-top: var(--line) solid var(--dye-indigo);
}
.status strong { font-weight: 700; }
.status span { color: var(--text-secondary); font-size: var(--text-sm); }
.status-error {
  border-top-color: var(--feedback-error);
  background: var(--feedback-error-cloth);
  color: var(--feedback-error);
}
.status-error span { color: var(--ink-soft); }
.status-done { border-top-color: var(--dye-gold); }

/* ---------- renditions ---------- */
.video-title { margin: var(--space-6) 0 var(--space-1); font-size: var(--text-xl); }
.video-meta { margin: 0 0 var(--space-4); color: var(--text-tertiary); font-size: var(--text-sm); }
.renditions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rendition {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: #fff;
  border: var(--line) solid var(--border-wax);
  border-radius: 3px;
}
.rendition:hover { border-color: var(--border-wax-strong); }
.rendition .q { font-weight: 700; font-size: var(--text-lg); }
.rendition .dim, .rendition .pieces { color: var(--text-tertiary); font-size: var(--text-sm); }
.rendition .size { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.btn-audio { margin-top: var(--space-4); }

/* ---------- the stamp grid: cap blocks taking dye ---------- */
.band {
  max-width: 62rem;
  margin: var(--space-6) auto 0;
  background: var(--dye-indigo);
  border: var(--line-heavy) solid var(--dye-indigo-deep);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
}
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(var(--stamp-cols, 24), 1fr);
  gap: 4px;
}
.stamp {
  aspect-ratio: 1;
  border: 1px solid var(--stamp-idle-edge);
  border-radius: 1px;
  background: var(--stamp-idle);
  /* the one authored moment: dye taking, not a generic fade */
  transition: background var(--dur-dye) var(--ease-out),
              border-color var(--dur-dye) var(--ease-out);
}
.stamp-dyed { background: var(--dye-gold); border-color: var(--dye-gold-deep); }

.band-empty {
  color: var(--ink-on-dye-soft);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---------- prose ---------- */
.prose {
  max-width: 46rem; margin: var(--space-6) auto;
  padding: var(--space-7) var(--space-6);
  background: var(--cloth-reserved);
  border: var(--line-heavy) solid var(--ink);
  border-radius: var(--radius-panel);
  box-shadow: var(--lift-panel);
}
.prose-page { padding-top: var(--space-6); }
.prose h2 { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.2; }
.prose h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.prose p { margin: 0 0 var(--space-4); }
.prose code {
  font-size: .9em; padding: .1em .35em;
  background: var(--cloth-shadowed); border-radius: 2px;
}
.steps { list-style: none; counter-reset: step; margin: 0 0 var(--space-6); padding: 0; }
.steps li {
  counter-increment: step;
  padding: var(--space-4) 0 var(--space-4) var(--space-7);
  border-top: var(--line) solid var(--border-wax);
  position: relative;
}
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: var(--space-4);
  width: var(--space-6); height: var(--space-6);
  display: grid; place-items: center;
  background: var(--dye-cerise); color: var(--ink-on-dye);
  font-weight: 700; border-radius: 2px;
}
.faq { margin: 0; }
.faq dt { font-weight: 700; margin-top: var(--space-5); }
.faq dd { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.teaser a:not(.btn) { color: var(--dye-indigo); text-underline-offset: 3px; }

.lede { }

/* ---------- guides ---------- */
.guide-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.guide-list li {
  padding: var(--space-5) 0;
  border-top: var(--line) solid var(--border-wax);
}
.guide-list h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.guide-list h2 a { color: var(--ink); text-underline-offset: 4px; }
.guide-list h2 a:hover { color: var(--dye-cerise-deep); }
.guide-list p { margin: 0 0 var(--space-1); color: var(--text-secondary); }
.guide-date { font-size: var(--text-sm); color: var(--text-tertiary); }

.guide-next {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--line-heavy) solid var(--dye-cerise);
}
.guide-next h2 { margin-top: 0; font-size: var(--text-lg); }
.guide-next ul { margin: 0 0 var(--space-5); padding-inline-start: var(--space-5); }
.guide-next li { margin-bottom: var(--space-2); }
/* :not(.btn) is load-bearing. Without it this rule also painted the CTA inside
   this block, whose background is already --dye-indigo — so the button rendered
   indigo-on-indigo at a contrast ratio of 1:1 and was invisible. Any blanket
   descendant-anchor colour rule must exclude buttons for the same reason. */
.guide-next a:not(.btn) { color: var(--dye-indigo); text-underline-offset: 3px; }

.clip {
  margin: var(--space-5) 0 var(--space-6);
}
.clip img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--line) solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--lift-panel);
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink); color: var(--cloth-raw);
  padding: var(--space-6) var(--space-4);
  font-size: var(--text-sm);
}
.footer > * { max-width: 42rem; margin-inline: auto; }
.disclaimer { color: #c9b79c; margin: 0 0 var(--space-4); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.footer-links a:not(.btn) { color: var(--dye-gold); text-underline-offset: 3px; }
.updated { color: #9a8a74; margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 40rem) {
  .masthead { gap: var(--space-3); }
  .nav { order: 3; flex-basis: 100%; }
  .field { padding-top: var(--space-5); }
  .panel { padding: var(--space-5) var(--space-4); }
  .link-row input { flex-basis: 100%; }
  .link-row .btn { flex: 1 1 auto; }
  .rendition { grid-template-columns: 3.5rem 1fr auto; }
  .rendition .dim, .rendition .pieces { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}