/* Monart City studio guide: one page that says what the studio does, how far each piece has got,
   and where to see it. Used by studio.html and by the opening curtain on index.html (studio-curtain.js).
   Black and white only: badges differ by fill and border style, not by colour. */
.studio-guide {
    --sg-bg: #050505; --sg-panel: #0d0d0d; --sg-line: rgba(255, 255, 255, 0.12); --sg-text: #ececec;
    --sg-muted: #a3a3a3; --sg-accent: #ffffff;
    color: var(--sg-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6; max-width: 1120px; margin: 0 auto; padding: 40px 16px 48px;
}
.studio-guide *, .studio-guide *::before, .studio-guide *::after { box-sizing: border-box; }
.studio-guide .sg-eyebrow-row { margin: 0 0 14px; }
.studio-guide .sg-eyebrow { display: inline-block; color: #fff; text-decoration: none; font-size: max(12px, 0.78rem); font-weight: 700;
    letter-spacing: 0.16em; border: 1px solid #fff; border-radius: 999px; padding: 7px 16px; }
.studio-guide .sg-eyebrow:hover { color: #000; background: #fff; }
.studio-guide .sg-eyebrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.studio-guide p, .studio-guide h1, .studio-guide h2, .studio-guide h3 { text-align: left; }
.studio-guide h1 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; color: #fff; }
.studio-guide .sg-lede { color: var(--sg-muted); font-size: 1.02rem; max-width: 760px; margin: 0; }
.studio-guide .sg-strands { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.studio-guide .sg-strands li { margin: 0; padding: 0; list-style: none; }
.studio-guide .sg-strands li::before, .studio-guide .sg-strands li::after { content: none; }
.studio-guide .sg-strands a { display: inline-block; color: var(--sg-text); text-decoration: none; font-size: max(12px, 0.85rem); font-weight: 600;
    border: 1px solid var(--sg-line); border-radius: 999px; padding: 7px 14px; }
.studio-guide .sg-strands a:hover, .studio-guide .sg-strands a:focus-visible { border-color: var(--sg-accent); color: #fff; }

/* Status legend: what each badge means, so visitors can tell checked from described. */
.studio-guide .sg-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px;
    margin: 26px 0 0; padding: 14px 16px; border: 1px solid var(--sg-line); border-radius: 14px; background: var(--sg-panel); }
.studio-guide .sg-legend p { margin: 0; font-size: max(12px, 0.85rem); color: var(--sg-muted); }
.studio-guide .sg-legend .sg-pill { margin-right: 6px; }

.studio-guide h2 { font-size: 1.15rem; color: #fff; margin: 36px 0 4px; letter-spacing: 0.01em; }
.studio-guide .sg-group-note { color: var(--sg-muted); font-size: 0.9rem; margin: 0 0 14px; }
.studio-guide .sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.studio-guide .sg-card { display: flex; flex-direction: column; gap: 10px; background: var(--sg-panel); border: 1px solid var(--sg-line);
    border-radius: 16px; padding: 18px; min-width: 0; }
.studio-guide .sg-card.sg-cela { border-color: rgba(255, 255, 255, 0.35); }
.studio-guide .sg-card h3 { font-size: 1.02rem; margin: 0; color: #fff; line-height: 1.3; }
.studio-guide .sg-card p { margin: 0; font-size: 0.9rem; color: #cfcfcf; }
.studio-guide .sg-card .sg-check { font-size: max(12px, 0.84rem); color: var(--sg-muted); }
.studio-guide .sg-card .sg-check strong { color: #e5e5e5; font-weight: 600; }
.studio-guide .sg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-guide .sg-pill { display: inline-block; font-size: max(12px, 0.72rem); font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px;
    border-radius: 999px; border: 1px solid; white-space: nowrap; }
.studio-guide .sg-live { color: #000; background: #fff; border-color: #fff; }
.studio-guide .sg-tested { color: #fff; background: transparent; border: 1.5px solid #fff; }
.studio-guide .sg-research { color: #e5e5e5; background: transparent; border: 1px dotted #bdbdbd; }
.studio-guide .sg-programme { color: #fff; background: #2a2a2a; border-color: #2a2a2a; }
.studio-guide .sg-story { color: #d4d4d4; background: transparent; border-color: #5a5a5a; font-style: italic; }
.studio-guide .sg-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.studio-guide .sg-link { display: inline-block; text-decoration: none; font-size: max(12px, 0.84rem); font-weight: 700; border-radius: 999px;
    padding: 8px 14px; color: #0a0a0a; background: #fff; }
.studio-guide .sg-link.sg-secondary { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); }
.studio-guide .sg-link:hover { background: #d9d9d9; }
.studio-guide .sg-link.sg-secondary:hover { background: transparent; border-color: #fff; }
.studio-guide .sg-link:focus-visible, .studio-guide .sg-strands a:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }

.studio-guide .sg-foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--sg-line); color: var(--sg-muted); font-size: max(12px, 0.85rem); }
.studio-guide .sg-foot a { color: #fff; }
.studio-guide .sg-foot p { margin: 0 0 6px; }

@media (max-width: 600px) {
    .studio-guide { padding: 28px 16px 40px; }
    .studio-guide .sg-grid { grid-template-columns: 1fr; }
    .studio-guide .sg-card { padding: 16px; }
    .studio-guide .sg-eyebrow { letter-spacing: 0.06em; padding: 6px 12px; max-width: 100%; }
}

/* Opening curtain on index.html. Two panels part when the visitor enters the site. */
.mc-curtain { position: fixed; inset: 0; z-index: 100000; overflow: hidden; }
.mc-curtain-panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #050505;
    transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1); }
.mc-curtain-panel.mc-left { left: 0; }
.mc-curtain-panel.mc-right { right: 0; }
/* The seam appears only while the panels part. */
.mc-curtain.mc-opening .mc-left { box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5); }
.mc-curtain.mc-opening .mc-right { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); }
.mc-curtain-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transition: opacity 0.35s ease; }
.mc-curtain-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
    background: linear-gradient(#050505 70%, rgba(5, 5, 5, 0)); }
.mc-curtain .mc-enter { font: inherit; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; font-weight: 700;
    color: #000; background: #fff; border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
    width: auto !important; margin: 0 !important; min-height: 40px; }
.mc-curtain .mc-enter:hover { background: #d9d9d9; }
.mc-curtain .mc-enter:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mc-curtain .mc-enter-bottom { display: flex; justify-content: center; padding: 0 16px 40px; }
.mc-curtain.mc-opening .mc-curtain-scroll { opacity: 0; }
.mc-curtain.mc-opening .mc-left { transform: translateX(-101%); }
.mc-curtain.mc-opening .mc-right { transform: translateX(101%); }
html.mc-curtain-lock, html.mc-curtain-lock body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
    .mc-curtain-panel, .mc-curtain-scroll { transition: opacity 0.2s ease; }
    .mc-curtain.mc-opening .mc-left, .mc-curtain.mc-opening .mc-right { transform: none; opacity: 0; }
}