/**
 * CUBE CSS - Studio Menu Block
 * Load after config.css via @import
 */

/* ── Font Faces ── */

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-latin.387c8dcba3be.woff2") format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-bold-latin.387c8dcba3be.woff2") format('woff2');
}

@font-face {
  font-family: 'Z003';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/z003-latin.f051bb04cbae.woff2") format('woff2');
}

/* ── Token Extensions (scoped to block) ── */

.studio-menu {
  --font-mono: 'Atkinson Hyperlegible Mono', 'Courier New', monospace;
  --font-calligraphic: 'Z003', 'Georgia', serif;

  --studio-heading-size: clamp(1.5rem, 4vw, 1.9rem);
  --studio-item-size: clamp(0.8rem, 2vw, 0.95rem);
  --studio-subtitle-size: clamp(0.85rem, 2.5vw, 1rem);
  --studio-footnote-size: 0.82rem;
  --studio-number-size: 0.85rem;
}

/* ── Block: studio-menu ── */

.studio-menu {
  padding-block: var(--space-lg);
}

/* Brand / Header */
.studio-menu__header {
  text-align: center;
  margin-block-end: var(--space-lg);
}

.studio-menu__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.studio-menu__logo {
  inline-size: clamp(5rem, 6vw, 6rem);
  block-size: auto;
  color: var(--color-text-gold);
}

.studio-menu__brand-label {
  display: block;
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-subtitle-size);
  color: var(--color-text-gold);
  letter-spacing: 0.08em;
  margin-block-start: var(--space-xs);
}

.studio-menu__tagline {
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-subtitle-size);
  color: var(--color-text-gold);
  opacity: var(--opacity-muted);
  margin-block-start: var(--space-xs);
  text-align: center;
}

/* Category sections */
.studio-menu__category {
  align-self: start;
}

.studio-menu__category > header {
  text-align: center;
  margin-block-end: var(--space-sm);
}

.studio-menu__category h2 {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--studio-heading-size);
  letter-spacing: 0.06em;
  color: var(--color-text-gold);
}

.studio-menu__subtitle {
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-subtitle-size);
  color: var(--color-text-gold);
  opacity: var(--opacity-high);
  letter-spacing: 0.04em;
  margin-block-start: var(--space-xs);
}

/* Ordered list / Menu items */
.studio-menu__items {
  list-style: none;
  padding: 0;
  counter-reset: menu-items calc(var(--counter-start, 10) - 1);
}

ol.studio-menu__items[start="10"] { --counter-start: 10; }
ol.studio-menu__items[start="20"] { --counter-start: 20; }
ol.studio-menu__items[start="30"] { --counter-start: 30; }
ol.studio-menu__items[start="40"] { --counter-start: 40; }

.studio-menu__items li {
  counter-increment: menu-items;
  display: flex;
  align-items: baseline;
  padding-block: 0.25em;
  font-family: var(--font-mono);
  font-size: var(--studio-item-size);
  color: var(--color-text-gold);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s;
}

.studio-menu__items li:hover {
  opacity: var(--opacity-full);
}

.studio-menu__items li::before {
  content: counter(menu-items) ".";
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-number-size);
  color: var(--color-text-gold);
  opacity: var(--opacity-muted);
  flex-shrink: 0;
  min-inline-size: 2.5em;
}

/* Flexible dotted stripe + asterisk */
.studio-menu__items li::after {
  content: '*';
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-number-size);
  color: var(--color-text-gold);
  opacity: var(--opacity-muted);
  flex: 1;
  border-block-end: 1px dotted rgba(192, 161, 96, var(--opacity-border));
  margin-inline: 0.4em;
  min-inline-size: 1.5em;
  text-align: right;
  position: relative;
  top: -0.2em;
}

/* Footnotes */
.studio-menu__footnote {
  margin-block-start: var(--space-sm);
  text-align: center;
}

.studio-menu__footnote p {
  font-family: var(--font-calligraphic);
  font-style: italic;
  font-size: var(--studio-footnote-size);
  color: var(--color-text-gold);
  opacity: var(--opacity-muted);
  line-height: 1.5;
}

.studio-menu__footnote a {
  color: var(--color-link);
  opacity: var(--opacity-high);
}