.intro-wordmark-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #080713;
  animation: intro-background 2.7s cubic-bezier(.77, 0, .18, 1) forwards;
}

/* 0.12 release identity + usable cover system */
.release-identity {
  margin: 2rem 0 1rem;
  padding: 1.35rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
}
.release-identity h3 { margin: .35rem 0 .5rem; font: 600 1.7rem/1.05 var(--serif); }
.release-identity > div:first-child > p:last-child { margin: 0; max-width: 560px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.release-fields { display: grid; gap: .7rem; }
.release-fields label { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.release-fields input { width: 100%; margin-top: .4rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.28); color: #fff; font: 500 1rem var(--sans); }
.release-fields input:focus { outline: 1px solid rgba(255,255,255,.72); border-color: transparent; }
#release-message { margin: 0; color: #ffb5d8; font-size: .72rem; text-transform: none; letter-spacing: 0; }
.kit-artist { display: block; margin: 0 0 .4rem; color: var(--muted); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; }
.translation-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.03); }
.translation-strip article { min-height: 150px; padding: 1.3rem; border-right: 1px solid var(--line); }
.translation-strip article:last-child { border-right: 0; }
.translation-strip span { color: rgba(255,255,255,.55); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; }
.translation-strip p { margin: .8rem 0 0; color: rgba(255,255,255,.82); line-height: 1.48; }
.kit-cover-studio { grid-column: span 12; padding: 1.7rem; }
.kit-card-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: end; }
.kit-card-head h4 { margin: .35rem 0 0; }
.kit-card-head > p { margin: 0; }
.cover-workspace { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr); gap: 1.25rem; margin-top: 1.4rem; }
.cover-preview { position: relative; min-width: 0; overflow: hidden; border-radius: 14px; background: #090810; }
.cover-preview canvas { display: block; width: 100%; aspect-ratio: 1; }
.cover-preview span { position: absolute; left: 14px; bottom: 14px; padding: .42rem .62rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(5,4,12,.72); color: rgba(255,255,255,.78); font-size: .61rem; }
.cover-controls { display: flex; flex-direction: column; gap: .85rem; }
.cover-controls fieldset { margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; }
.cover-controls legend { padding: 0 .35rem; color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.cover-controls fieldset button { margin: .2rem .2rem .2rem 0; padding: .6rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: #fff; font: 600 .7rem var(--sans); cursor: pointer; }
.cover-controls fieldset button:hover,.cover-controls fieldset button.selected { background: #fff; color: #111; }
.cover-controls fieldset button:disabled { opacity: .25; cursor: not-allowed; }
.treatment-strength { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; color: var(--muted); font-size: .68rem; }
.treatment-strength input { grid-column: 1 / 3; width: 100%; accent-color: #fff; }
.treatment-strength output { color: #fff; }
.identity-promise { margin: 0; padding: .85rem; border-left: 2px solid #9bf6c7; color: rgba(255,255,255,.72)!important; font-size: .72rem; }
.palette-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0; list-style: none; }
.palette-legend li { display: flex; gap: .55rem; align-items: center; }
.palette-legend i { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.palette-legend span { display: flex; flex-direction: column; }
.palette-legend strong { color: rgba(255,255,255,.9); font-size: .68rem; }
.palette-legend small { color: var(--muted); font-size: .58rem; }
.kit-type .type-specimen { margin: .5rem 0 1.2rem; font-size: clamp(2.8rem,6vw,6.7rem); line-height: .86; overflow-wrap: anywhere; }

/* 0.13 controlled world mixer */
.world-mixer { margin: 1rem 0; padding: 1.5rem; border: 1px solid rgba(255,255,255,.23); border-radius: 20px; background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }
.mixer-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: end; }
.mixer-head h4 { margin: .35rem 0 0; font: 600 clamp(1.8rem,3vw,3.2rem)/.95 var(--serif); }
.mixer-head > p { margin: 0; color: var(--muted); line-height: 1.55; }
.mixer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; margin-top: 1.3rem; }
.mixer-grid fieldset { min-width: 0; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; }
.mixer-grid legend { padding: 0 .35rem; color: var(--muted); font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; }
.mixer-options { display: grid; gap: .45rem; }
.mixer-options button { min-width: 0; padding: .72rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(0,0,0,.22); color: #fff; cursor: pointer; text-align: left; transition: border-color .18s,background .18s,transform .18s; }
.mixer-options button:hover { border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
.mixer-options button.selected { border-color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 #fff; }
.mixer-options button > span { display: block; color: rgba(255,255,255,.72); font: 600 .65rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.palette-options button > i { display: flex; height: 16px; margin-top: .55rem; overflow: hidden; border-radius: 4px; }
.palette-options button > i b { flex: 1; }
.type-options button strong { display: block; margin-top: .4rem; overflow: hidden; color: #fff; font-size: 1.25rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.type-options button.type-grotesk strong { font-family: "Archivo Black",Inter,sans-serif; }
.type-options button.type-editorial strong { font-family: "Bodoni Moda",Didot,serif; font-weight: 500; }
.type-options button.type-mono strong { font-family: "IBM Plex Mono",Consolas,monospace; text-transform: uppercase; }
.type-options button.type-condensed strong { font-family: "Roboto Condensed","Arial Narrow",sans-serif; font-weight: 900; text-transform: uppercase; }
.type-options button.type-slab strong { font-family: "Roboto Slab",Rockwell,serif; font-weight: 800; }
.type-options button.type-humanist strong { font-family: "Cormorant Garamond",Georgia,serif; font-style: italic; font-weight: 500; }
.mixer-recommendation { min-height: 2.8rem; margin: 0 0 .6rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.mixer-recommendation strong { color: #fff; }
.intensity-options button { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: baseline; }
.intensity-options button small { color: var(--muted); font-size: .59rem; text-align: right; }
.mixer-result { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 2px solid #a8ffbe; background: rgba(0,0,0,.2); color: rgba(255,255,255,.82); font-size: .72rem; }
.motion-profile { margin: .4rem 0 0!important; color: rgba(255,255,255,.78)!important; font-size: .68rem; text-align: center; text-transform: lowercase; }

/* 0.14 post-ready vertical release visual */
.kit-motion { grid-column: span 5; }
.kit-social-motion { grid-column: 1 / -1; }
.social-studio-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.5rem; align-items: end; margin-bottom: 1.2rem; }
.social-studio-head h4 { max-width: 720px; margin: .35rem 0 0; font: 600 clamp(1.8rem,3.5vw,3.8rem)/.96 var(--serif); }
.social-studio-head .motion-profile { text-align: right; }
.social-studio { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(320px,1.28fr); gap: 1.25rem; align-items: start; }
.social-preview { max-width: 480px; width: 100%; margin: 0 auto; }
.social-preview .canvas-shell { aspect-ratio: 9 / 16; }
.social-preview canvas { width: 100%; height: 100%; display: block; }
.social-controls { display: grid; gap: .8rem; }
.social-controls fieldset { min-width: 0; margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; }
.social-controls legend { padding: 0 .35rem; color: var(--muted); font-size: .61rem; letter-spacing: .13em; text-transform: uppercase; }
.lead-image-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; }
.lead-image-options button { position: relative; min-height: 132px; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #0b0a10; color: #fff; cursor: pointer; }
.lead-image-options img { width: 100%; height: 132px; display: block; object-fit: cover; opacity: .72; filter: saturate(.82); transition: opacity .18s,transform .18s; }
.lead-image-options span { position: absolute; inset: auto .4rem .4rem; padding: .38rem .42rem; background: rgba(7,6,11,.78); font: 600 .57rem var(--sans); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.lead-image-options button:hover img,.lead-image-options button.selected img { opacity: 1; transform: scale(1.025); }
.lead-image-options button.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.social-choice-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.social-choice-row button { padding: .62rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: #fff; font: 600 .68rem var(--sans); cursor: pointer; }
.social-choice-row button:hover,.social-choice-row button.selected { background: #fff; color: #111; }
.social-custom-copy { display: grid; gap: .35rem; margin-top: .7rem; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.social-custom-copy[hidden] { display: none; }
.social-custom-copy input { width: 100%; padding: .75rem .82rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.25); color: #fff; font: .78rem var(--sans); text-transform: none; }
.clip-start { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: .68rem; }
.clip-start input { grid-column: 1 / 3; width: 100%; accent-color: #fff; }
.clip-start output { color: #fff; }
.social-audio-note { margin: -.2rem .2rem 0!important; color: var(--muted)!important; font-size: .64rem!important; }
.kit-social-motion > .canvas-note { max-width: 850px; margin: 1rem auto 0!important; text-align: center; }
.social-structure-summary { margin: 0; color: rgba(255,255,255,.75); font-size: .68rem; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.structure-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.structure-options button { display: grid; gap: .3rem; padding: .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(0,0,0,.22); color: #fff; cursor: pointer; text-align: left; }
.structure-options button span { font: 650 .72rem var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.structure-options button small { color: var(--muted); font-size: .62rem; }
.structure-options button:hover,.structure-options button.selected { border-color: #fff; background: rgba(255,255,255,.1); }
.control-explainer { margin: 0 0 .65rem!important; color: var(--muted)!important; font-size: .66rem!important; }
.social-order-list { display: grid; gap: .42rem; }
.social-order-item { display: grid; grid-template-columns: 22px 52px minmax(0,1fr) auto; gap: .6rem; align-items: center; padding: .48rem; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(0,0,0,.18); }
.social-order-item > span { color: var(--muted); font: 700 .63rem var(--sans); text-align: center; }
.social-order-item img { width: 52px; height: 52px; display: block; object-fit: cover; border-radius: 6px; }
.social-order-item > div:not(.social-order-actions) { display: grid; gap: .15rem; min-width: 0; }
.social-order-item strong { overflow: hidden; color: rgba(255,255,255,.9); font-size: .66rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.social-order-item small { color: var(--muted); font-size: .58rem; }
.social-order-actions { display: flex; gap: .25rem; }
.social-order-actions button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; }
.social-order-actions button:hover:not(:disabled) { background: #fff; color: #111; }
.social-order-actions button:disabled { opacity: .2; cursor: default; }

/* 0.16 guided Release Sequence */
.sequence-intro { max-width: 690px; margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.release-sequence-layout { display: grid; grid-template-columns: minmax(260px,.68fr) minmax(520px,1.32fr); gap: 1.4rem; align-items: start; }
.sequence-preview-column { position: sticky; top: 88px; display: grid; gap: .75rem; }
.sequence-preview-column > p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.45; text-align: center; }
.sequence-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sequence-director { display: grid; gap: .85rem; }
.sequence-global { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.sequence-global fieldset,.sequence-global .clip-start { min-width: 0; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; }
.sequence-global fieldset:nth-child(2) { grid-column: 1 / -1; }
.sequence-global legend { padding: 0 .35rem; color: var(--muted); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.sequence-global .structure-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sequence-global .clip-start { grid-column: 1 / -1; }
.sequence-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: .35rem; padding: .85rem 0 .2rem; border-top: 1px solid var(--line); }
.sequence-toolbar > div { display: grid; gap: .2rem; }
.sequence-toolbar strong { font: 650 .8rem var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.sequence-toolbar small { color: var(--muted); font-size: .61rem; }
.sequence-toolbar button,.sequence-add button,.sequence-actions button { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #fff; cursor: pointer; }
.sequence-toolbar button { padding: .58rem .72rem; border-radius: 999px; font: 600 .61rem var(--sans); }
.sequence-toolbar button:hover,.sequence-add button:hover,.sequence-actions button:hover:not(:disabled) { background: #fff; color: #111; }
.release-sequence { display: grid; gap: .48rem; }
.sequence-card { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(0,0,0,.18); }
.sequence-card[open] { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.045); }
.sequence-card summary { display: grid; grid-template-columns: 30px 58px minmax(0,1fr) auto; gap: .7rem; align-items: center; min-height: 72px; padding: .45rem .65rem; cursor: pointer; list-style: none; }
.sequence-card summary::-webkit-details-marker { display: none; }
.sequence-number { color: var(--muted); font: 700 .62rem var(--mono); text-align: center; }
.sequence-thumb { width: 58px; height: 58px; overflow: hidden; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.07); }
.sequence-thumb img,.sequence-thumb i { width: 100%; height: 100%; display: block; object-fit: cover; }
.sequence-thumb b { font: 650 1.05rem var(--serif); }
.sequence-card summary > div:nth-child(3) { display: grid; gap: .22rem; min-width: 0; }
.sequence-card summary strong { overflow: hidden; font: 650 .67rem var(--sans); letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sequence-card summary small { color: var(--muted); font-size: .59rem; }
.sequence-open { padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .54rem; text-transform: uppercase; }
.sequence-card[open] .sequence-open { color: #111; background: #fff; }
.sequence-editor { display: grid; gap: .7rem; padding: .8rem; border-top: 1px solid var(--line); }
.sequence-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .58rem; }
.sequence-fields label { display: grid; gap: .3rem; color: var(--muted); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.sequence-fields .sequence-wide { grid-column: 1 / -1; }
.sequence-fields select,.sequence-fields input { min-width: 0; width: 100%; padding: .66rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #131119; color: #fff; font: .68rem var(--sans); text-transform: none; }
.sequence-fields select:focus,.sequence-fields input:focus { outline: 1px solid #fff; outline-offset: 1px; }
.sequence-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.sequence-actions button { padding: .48rem .58rem; border-radius: 8px; font: 600 .58rem var(--sans); }
.sequence-actions button:disabled { opacity: .2; cursor: default; }
.sequence-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .7rem; border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; }
.sequence-add span { margin-right: auto; color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.sequence-add button { padding: .48rem .58rem; border-radius: 999px; font: 600 .58rem var(--sans); }

@media (max-width: 800px) {
  .release-identity,.translation-strip,.kit-card-head,.cover-workspace,.mixer-head,.mixer-grid,.social-studio-head,.social-studio { grid-template-columns: 1fr; }
  .translation-strip article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .translation-strip article:last-child { border-bottom: 0; }
  .cover-controls { padding-top: .35rem; }
  .palette-legend { grid-template-columns: 1fr; }
  .social-studio-head .motion-profile { text-align: left; }
  .social-structure-summary { text-align: left; }
  .social-preview { max-width: 390px; }
  .structure-options { grid-template-columns: 1fr; }
  .kit-motion,.kit-social-motion { grid-column: span 12; }
  .release-sequence-layout { grid-template-columns: 1fr; }
  .sequence-preview-column { position: static; }
  .sequence-global { grid-template-columns: 1fr; }
  .sequence-global fieldset:nth-child(2),.sequence-global .clip-start { grid-column: auto; }
  .sequence-global .structure-options { grid-template-columns: 1fr; }
  .sequence-toolbar { align-items: flex-start; }
}

@media (max-width: 520px) {
  .sequence-preview-actions,.sequence-fields { grid-template-columns: 1fr; }
  .sequence-fields .sequence-wide { grid-column: auto; }
  .sequence-card summary { grid-template-columns: 26px 48px minmax(0,1fr); gap: .55rem; }
  .sequence-thumb { width: 48px; height: 48px; }
  .sequence-open { display: none; }
  .sequence-toolbar { display: grid; }
}

.intro-wordmark {
  font: 900 clamp(3.8rem, 10vw, 9rem)/1 Inter, sans-serif;
  letter-spacing: -.12em;
  transform-origin: center;
  animation: intro-wordmark 2.7s cubic-bezier(.77, 0, .18, 1) forwards;
}

.site-header > .wordmark { opacity: 0; animation: header-wordmark-in .25s 2.3s forwards; }
.studio-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; color: var(--muted); font-size: .7rem; }
#director-status { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; }
#director-status.connected { color: #bfffd1; border-color: rgba(168,255,190,.4); }
#director-status.fallback { color: #ffd3e9; }

@keyframes intro-wordmark {
  0%, 34% { transform: translate(0, 0) scale(1); opacity: 1; }
  76% { transform: translate(calc(-50vw + 5vw + 36px), calc(-50vh + 45px)) scale(.24); opacity: 1; }
  100% { transform: translate(calc(-50vw + 5vw + 36px), calc(-50vh + 45px)) scale(.24); opacity: 0; }
}

@keyframes intro-background {
  0%, 45% { background: #080713; }
  76% { background: rgba(8, 7, 19, 0); }
  100% { background: transparent; visibility: hidden; }
}

@keyframes header-wordmark-in { to { opacity: 1; } }

.thesis-loading { min-height: 58vh; display: grid; place-items: center; align-content: center; gap: 1rem; color: var(--muted); text-align: center; }
.thesis-pulse { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff 0 4%, #ff78bd 18%, #6658cb 50%, transparent 72%); filter: blur(8px); animation: thesis-breathe 1.8s ease-in-out infinite alternate; }
@keyframes thesis-breathe { to { transform: scale(1.2); filter: blur(15px) saturate(1.4); } }
.thesis-panel { max-width: 960px; margin: 4vh auto 0; }
.thesis-panel blockquote { margin: 1.2rem 0 2.5rem; font: 500 clamp(2.7rem, 5vw, 5.3rem)/1.02 var(--serif); letter-spacing: -.035em; }
.thesis-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.thesis-facts article { min-height: 180px; padding: 1.3rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.04); }
.thesis-facts span { color: var(--pink); font-size: .63rem; text-transform: uppercase; letter-spacing: .15em; }
.thesis-facts p { margin-top: 1rem; color: var(--muted); line-height: 1.55; }
.recognition-question { margin: 2rem 0; font: 500 1.4rem var(--serif); text-align: center; }
.thesis-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.thesis-revision { max-width: 700px; margin: 2rem auto 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: 18px; }
.thesis-revision label { display: block; margin-bottom: .8rem; color: var(--muted); font-size: .8rem; }
.thesis-revision textarea { width: 100%; min-height: 120px; resize: vertical; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); color: #fff; font: 1rem var(--sans); }
.thesis-revision .button { margin-top: .8rem; }
.artist-reference { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); display: grid; grid-template-columns: 1fr .62fr; gap: 1rem; align-items: stretch; }
.artist-reference h3 { margin: .35rem 0 .5rem; font: 600 1.7rem/1.05 var(--serif); }
.artist-reference > div:first-child > p:last-child { color: var(--muted); line-height: 1.5; font-size: .86rem; margin: 0; max-width: 560px; }
.reference-picker { min-height: 132px; border: 1px dashed rgba(255,255,255,.3); border-radius: 15px; display: grid; place-items: center; align-content: center; gap: .25rem; cursor: pointer; text-align: center; }
.reference-picker:hover { background: rgba(255,255,255,.055); }
.reference-picker input { display: none; }
.reference-picker span { font-size: 1.65rem; }
.reference-picker strong { font-size: .82rem; }
.reference-picker small,.reference-message { color: var(--muted); font-size: .68rem; }
.reference-preview { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.reference-preview:empty { display: none; }
.reference-preview figure { position: relative; margin: 0; height: 150px; overflow: hidden; border-radius: 12px; background: #111; }
.reference-preview img { width: 100%; height: 100%; object-fit: cover; }
.reference-preview button { position: absolute; right: 7px; top: 7px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; }
.reference-preview span { position: absolute; left: 8px; bottom: 8px; padding: .3rem .45rem; background: rgba(0,0,0,.65); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.reference-message { grid-column: 1/-1; margin: 0; }
.world-thesis { font: 500 1.45rem/1.35 var(--serif); }
.world-evidence { color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.5; letter-spacing: .015em; }
.world-evidence strong { color: rgba(255,255,255,.92); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }
.direction-meta .world-evidence { min-height: 0; margin: .65rem 0 .55rem; }
.concept-list, .guardrail-list { padding-left: 1.2rem; }
.concept-list li, .guardrail-list li { margin-bottom: .75rem; color: var(--muted); line-height: 1.55; }
.prompt-block { padding: 1rem; border-radius: 12px; background: rgba(0,0,0,.28); color: var(--muted); line-height: 1.55; font-size: .8rem; }
.brief-action { margin-top: 1rem; width: 100%; }

.visual-status {
  min-height: 1.3rem;
  margin-top: 1rem;
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.direction-visual {
  height: 390px;
  background: #111;
}

.moodboard {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 9px;
  min-height: min(78vh, 820px);
  padding: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #d8d1c4;
  color: #111;
}

.moodboard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.72'/%3E%3C/svg%3E");
}

.moodboard.resonance { background: #21151f; color: #f0ddd9; }
.moodboard.expansion { background: #d7d0c1; color: #171817; }
.moodboard.counterpoint { background: #d8d7d1; color: #111; gap: 6px; }

.board-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.12);
  border: 0;
}

.board-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.86) contrast(1.06);
}

.board-tile > span,
.board-tile > small {
  position: absolute;
  left: 8px;
  bottom: 7px;
  z-index: 2;
  padding: .24rem .36rem;
  background: rgba(5,5,5,.72);
  color: rgba(255,255,255,.78);
  font: 600 .52rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.board-hero { grid-column: 1 / 7; grid-row: 1 / 8; }
.board-crop { grid-column: 7 / 10; grid-row: 1 / 5; }
.board-crop img { transform: scale(1.75); transform-origin: 68% 42%; filter: saturate(.6) contrast(1.2); }
.board-support-one { grid-column: 10 / 13; grid-row: 1 / 6; }
.board-support-two { grid-column: 7 / 10; grid-row: 5 / 8; }
.board-support-three { grid-column: 10 / 13; grid-row: 6 / 9; }
.board-type { grid-column: 1 / 8; grid-row: 8 / 11; padding: 1.1rem; display: flex; flex-direction: column; justify-content: space-between; background: #eee8dc; color: #111; }
.board-type span { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.board-type strong { max-width: 100%; font: 900 clamp(2.2rem,6vw,6.7rem)/.72 var(--display); letter-spacing: -.1em; white-space: nowrap; overflow: hidden; text-transform: lowercase; }
.board-type em { align-self: flex-end; font: 500 1.1rem var(--serif); }
.board-palette { grid-column: 8 / 13; grid-row: 9 / 11; display: grid; grid-template-columns: 1fr 1fr; background: #141414; color: #eee; }
.board-palette > div { display: flex; }
.board-palette i { flex: 1; display: block; }
.board-palette p { align-self: center; margin: 0; padding: .7rem; font-size: .58rem; line-height: 1.35; }
.board-note { grid-column: 10 / 13; grid-row: 8 / 9; padding: .6rem; background: #a7a29a; color: #171717; }
.board-note span { font-size: .48rem; text-transform: uppercase; letter-spacing: .14em; }
.board-note p { margin: .35rem 0 0; font: italic 500 .66rem/1.25 var(--serif); }

.moodboard.resonance .board-hero img { filter: saturate(.72) contrast(1.12) brightness(.82); }
.moodboard.resonance .board-type { background: #e6d3cf; transform: rotate(-.7deg); }
.moodboard.resonance .board-support-two { transform: translate(-10px,8px) rotate(1.1deg); z-index: 2; }
.moodboard.resonance .board-note { background: #7c656a; color: #f5e9e6; }

.moodboard.expansion .board-hero { grid-column: 1 / 13; grid-row: 1 / 6; }
.moodboard.expansion .board-hero img { object-position: center 42%; }
.moodboard.expansion .board-crop { grid-column: 10 / 13; grid-row: 6 / 9; }
.moodboard.expansion .board-support-one { grid-column: 1 / 5; grid-row: 6 / 9; }
.moodboard.expansion .board-support-two { grid-column: 5 / 10; grid-row: 6 / 9; }
.moodboard.expansion .board-support-three { grid-column: 10 / 13; grid-row: 9 / 11; }
.moodboard.expansion .board-type { grid-column: 1 / 8; grid-row: 9 / 11; background: #f1eee7; }
.moodboard.expansion .board-type strong { font-family: var(--serif); font-weight: 500; letter-spacing: -.06em; }
.moodboard.expansion .board-palette { grid-column: 8 / 10; grid-row: 9 / 11; display: block; }
.moodboard.expansion .board-palette > div { height: 100%; }
.moodboard.expansion .board-palette p { display: none; }
.moodboard.expansion .board-note { display: none; }

.moodboard.counterpoint .board-hero { grid-column: 1 / 6; grid-row: 1 / 11; transform: rotate(-.6deg); }
.moodboard.counterpoint .board-hero img { filter: grayscale(.3) contrast(1.28); }
.moodboard.counterpoint .board-crop { grid-column: 10 / 13; grid-row: 1 / 4; }
.moodboard.counterpoint .board-support-one { grid-column: 6 / 10; grid-row: 1 / 4; }
.moodboard.counterpoint .board-support-two { grid-column: 6 / 9; grid-row: 7 / 11; }
.moodboard.counterpoint .board-support-three { grid-column: 9 / 13; grid-row: 7 / 11; }
.moodboard.counterpoint .board-type { grid-column: 6 / 13; grid-row: 4 / 7; background: #dfff72; transform: rotate(1deg); }
.moodboard.counterpoint .board-type strong { text-transform: uppercase; font-size: clamp(2rem,5vw,5.5rem); }
.moodboard.counterpoint .board-palette { grid-column: 9 / 13; grid-row: 9 / 11; z-index: 3; mix-blend-mode: multiply; }
.moodboard.counterpoint .board-note { grid-column: 6 / 9; grid-row: 7 / 8; z-index: 3; background: #ff5e62; transform: translate(-8px,-7px) rotate(-2deg); }

/* Song-specific palette variables override the old fixed world colors. */
.moodboard,
.moodboard.resonance,
.moodboard.expansion,
.moodboard.counterpoint { background: var(--board-bg); color: var(--board-ink); }
.moodboard .board-type,
.moodboard.resonance .board-type,
.moodboard.expansion .board-type,
.moodboard.counterpoint .board-type { background: var(--board-paper); color: var(--board-paper-ink); }
.moodboard .board-note,
.moodboard.resonance .board-note,
.moodboard.counterpoint .board-note { background: var(--board-accent); color: var(--board-accent-ink); }
.moodboard.counterpoint .board-type { background: var(--board-signal); color: var(--board-signal-ink); }

/* Layout grammar is chosen per song instead of being tied to Resonance / Expansion / Counterpoint. */
.moodboard[class*="layout-"] .board-hero,
.moodboard[class*="layout-"] .board-crop,
.moodboard[class*="layout-"] .board-support-one,
.moodboard[class*="layout-"] .board-support-two,
.moodboard[class*="layout-"] .board-support-three,
.moodboard[class*="layout-"] .board-type,
.moodboard[class*="layout-"] .board-note { transform: none; }
.moodboard.layout-field-notes .board-hero { grid-column: 1 / 7; grid-row: 1 / 8; }
.moodboard.layout-field-notes .board-crop { grid-column: 7 / 10; grid-row: 1 / 5; }
.moodboard.layout-field-notes .board-support-one { grid-column: 10 / 13; grid-row: 1 / 6; }
.moodboard.layout-field-notes .board-support-two { grid-column: 7 / 10; grid-row: 5 / 8; }
.moodboard.layout-field-notes .board-support-three { grid-column: 10 / 13; grid-row: 6 / 9; }
.moodboard.layout-field-notes .board-type { grid-column: 1 / 8; grid-row: 8 / 11; }
.moodboard.layout-field-notes .board-palette { grid-column: 8 / 13; grid-row: 9 / 11; }
.moodboard.layout-field-notes .board-note { grid-column: 10 / 13; grid-row: 8 / 9; display: block; }

.moodboard.layout-monument .board-hero { grid-column: 1 / 9; grid-row: 1 / 11; transform: none; }
.moodboard.layout-monument .board-crop { grid-column: 9 / 13; grid-row: 1 / 4; }
.moodboard.layout-monument .board-support-one { grid-column: 9 / 13; grid-row: 4 / 7; }
.moodboard.layout-monument .board-support-two { grid-column: 9 / 11; grid-row: 7 / 9; }
.moodboard.layout-monument .board-support-three { grid-column: 11 / 13; grid-row: 7 / 9; }
.moodboard.layout-monument .board-type { grid-column: 9 / 13; grid-row: 9 / 11; transform: none; }
.moodboard.layout-monument .board-palette { grid-column: 1 / 4; grid-row: 9 / 11; z-index: 3; }
.moodboard.layout-monument .board-note { grid-column: 9 / 13; grid-row: 8 / 9; display: block; }

.moodboard.layout-fracture .board-hero { grid-column: 1 / 7; grid-row: 1 / 11; transform: rotate(-1.2deg); }
.moodboard.layout-fracture .board-crop { grid-column: 7 / 13; grid-row: 1 / 5; transform: translate(-16px,8px) rotate(1.8deg); z-index: 2; }
.moodboard.layout-fracture .board-support-one { grid-column: 7 / 10; grid-row: 5 / 8; transform: translate(8px,-4px) rotate(-2deg); }
.moodboard.layout-fracture .board-support-two { grid-column: 10 / 13; grid-row: 5 / 9; transform: translate(-5px,6px) rotate(1deg); }
.moodboard.layout-fracture .board-support-three { grid-column: 7 / 10; grid-row: 8 / 11; }
.moodboard.layout-fracture .board-type { grid-column: 5 / 13; grid-row: 7 / 10; z-index: 3; transform: translate(10px,4px) rotate(-1.4deg); }
.moodboard.layout-fracture .board-palette { grid-column: 10 / 13; grid-row: 9 / 11; z-index: 4; }
.moodboard.layout-fracture .board-note { grid-column: 7 / 10; grid-row: 10 / 11; z-index: 4; display: block; }

.moodboard.layout-contact-sheet { gap: 3px; }
.moodboard.layout-contact-sheet .board-hero { grid-column: 1 / 7; grid-row: 1 / 6; transform: none; }
.moodboard.layout-contact-sheet .board-crop { grid-column: 7 / 13; grid-row: 1 / 6; }
.moodboard.layout-contact-sheet .board-support-one { grid-column: 1 / 5; grid-row: 6 / 9; }
.moodboard.layout-contact-sheet .board-support-two { grid-column: 5 / 9; grid-row: 6 / 9; }
.moodboard.layout-contact-sheet .board-support-three { grid-column: 9 / 13; grid-row: 6 / 9; }
.moodboard.layout-contact-sheet .board-type { grid-column: 1 / 9; grid-row: 9 / 11; transform: none; }
.moodboard.layout-contact-sheet .board-palette { grid-column: 9 / 13; grid-row: 9 / 11; }
.moodboard.layout-contact-sheet .board-note { display: none; }

.moodboard.layout-negative-space .board-hero { grid-column: 4 / 10; grid-row: 2 / 8; transform: none; z-index: 2; }
.moodboard.layout-negative-space .board-crop { grid-column: 10 / 13; grid-row: 1 / 4; }
.moodboard.layout-negative-space .board-support-one { grid-column: 1 / 4; grid-row: 6 / 9; }
.moodboard.layout-negative-space .board-support-two { grid-column: 10 / 13; grid-row: 7 / 10; }
.moodboard.layout-negative-space .board-support-three { grid-column: 1 / 3; grid-row: 1 / 3; }
.moodboard.layout-negative-space .board-type { grid-column: 1 / 8; grid-row: 9 / 11; transform: none; }
.moodboard.layout-negative-space .board-palette { grid-column: 8 / 13; grid-row: 10 / 11; }
.moodboard.layout-negative-space .board-note { grid-column: 8 / 11; grid-row: 9 / 10; display: block; }

.moodboard.layout-specimen .board-hero { grid-column: 1 / 5; grid-row: 1 / 8; transform: none; }
.moodboard.layout-specimen .board-crop { grid-column: 5 / 9; grid-row: 1 / 4; }
.moodboard.layout-specimen .board-support-one { grid-column: 9 / 13; grid-row: 1 / 4; }
.moodboard.layout-specimen .board-support-two { grid-column: 5 / 9; grid-row: 4 / 8; }
.moodboard.layout-specimen .board-support-three { grid-column: 9 / 13; grid-row: 4 / 8; }
.moodboard.layout-specimen .board-type { grid-column: 1 / 9; grid-row: 8 / 11; transform: none; }
.moodboard.layout-specimen .board-palette { grid-column: 9 / 13; grid-row: 9 / 11; }
.moodboard.layout-specimen .board-note { grid-column: 9 / 13; grid-row: 8 / 9; display: block; }

.moodboard[class*="medium-"] .board-hero img { filter: none; }
.moodboard.medium-editorial-photograph .board-hero img { filter: saturate(.78) contrast(1.12); }
.moodboard.medium-environmental-cinema .board-hero img { filter: saturate(.7) contrast(1.08); }
.moodboard.medium-documentary-evidence .board-hero img { filter: saturate(.55) contrast(1.16); }
.moodboard.medium-surveillance-image .board-hero img { filter: grayscale(.82) contrast(1.3) brightness(.88); }
.moodboard.medium-scan-collage .board-hero img,
.moodboard.medium-printed-ephemera .board-hero img { filter: contrast(1.18) saturate(.9); }
.moodboard.medium-camera-less-process .board-hero img { filter: contrast(1.24) saturate(.62); }

.moodboard[class*="type-"] .board-type strong { font-style: normal; white-space: nowrap; }
.moodboard.type-grotesk .board-type strong { font-family: "Archivo Black", Inter, sans-serif; font-weight: 400; letter-spacing: -.115em; text-transform: lowercase; }
.moodboard.type-editorial .board-type strong { font-family: "Bodoni Moda", Didot, serif; font-weight: 500; letter-spacing: -.07em; text-transform: none; }
.moodboard.type-mono .board-type strong { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 700; letter-spacing: -.075em; text-transform: uppercase; }
.moodboard.type-condensed .board-type strong { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 900; letter-spacing: -.095em; text-transform: uppercase; }
.moodboard.type-slab .board-type strong { font-family: "Roboto Slab", Rockwell, serif; font-weight: 800; letter-spacing: -.075em; text-transform: none; }
.moodboard.type-humanist .board-type strong { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.045em; text-transform: none; }

.direction-card.type-grotesk .direction-meta h4 { font-family: "Archivo Black", Inter, sans-serif; font-weight: 400; letter-spacing: -.06em; }
.direction-card.type-editorial .direction-meta h4 { font-family: "Bodoni Moda", Didot, serif; font-weight: 500; letter-spacing: -.04em; }
.direction-card.type-mono .direction-meta h4 { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 700; letter-spacing: -.055em; text-transform: uppercase; }
.direction-card.type-condensed .direction-meta h4 { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 900; letter-spacing: -.055em; text-transform: uppercase; }
.direction-card.type-slab .direction-meta h4 { font-family: "Roboto Slab", Rockwell, serif; font-weight: 800; letter-spacing: -.04em; }
.direction-card.type-humanist .direction-meta h4 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.025em; }
.kit-type.type-grotesk h4 { font-family: "Archivo Black", Inter, sans-serif; font-weight: 400; }
.kit-type.type-editorial h4 { font-family: "Bodoni Moda", Didot, serif; font-weight: 500; }
.kit-type.type-mono h4 { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 700; text-transform: uppercase; }
.kit-type.type-condensed h4 { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 900; text-transform: uppercase; }
.kit-type.type-slab h4 { font-family: "Roboto Slab", Rockwell, serif; font-weight: 800; }
.kit-type.type-humanist h4 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; }
.type-system.type-grotesk h4 { font-family: "Archivo Black", Inter, sans-serif; font-weight: 400; }
.type-system.type-editorial h4 { font-family: "Bodoni Moda", Didot, serif; font-weight: 500; }
.type-system.type-mono h4 { font-family: "IBM Plex Mono", Consolas, monospace; font-weight: 700; text-transform: uppercase; }
.type-system.type-condensed h4 { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 900; text-transform: uppercase; }
.type-system.type-slab h4 { font-family: "Roboto Slab", Rockwell, serif; font-weight: 800; }
.type-system.type-humanist h4 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; }

.moodboard-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 7px;
  gap: 4px;
}

.moodboard-preview .board-type { padding: .45rem; }
.moodboard-preview .board-type strong { font-size: clamp(1rem,2.6vw,2.4rem); }
.moodboard-preview .board-type em,
.moodboard-preview .board-type span,
.moodboard-preview .board-note,
.moodboard-preview .board-tile > span,
.moodboard-preview .board-tile > small,
.moodboard-preview .board-palette p { display: none; }
.moodboard-preview .board-palette { grid-template-columns: 1fr; }

.board-loading {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  padding: 1rem;
  background: linear-gradient(135deg,rgba(255,255,255,.09),rgba(0,0,0,.18));
  color: currentColor;
  text-align: center;
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.board-loading i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; border-right-color: transparent; animation: board-spin 1.2s linear infinite; }
@keyframes board-spin { to { transform: rotate(360deg); } }

.direction-card .direction-visual::after { display: none !important; }
.direction-card.counterpoint .direction-visual { display: block; padding: 0; background: transparent; }
.direction-card.counterpoint .direction-visual img { filter: none; }

.detail-world-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: end;
  margin: 2rem 0 2.5rem;
}
.detail-world-intro h3 { margin: .3rem 0 0; font: 800 clamp(4rem,9vw,9rem)/.82 var(--display); letter-spacing: -.09em; }
.detail-world-intro .world-thesis { margin: 0; color: rgba(255,255,255,.7); }
.full-moodboard { border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: .75rem; }
.board-heading { display: flex; justify-content: space-between; gap: 2rem; padding: .35rem .35rem 1rem; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .13em; }
.board-heading p { margin: 0; text-transform: none; letter-spacing: 0; }
.kit-mood .moodboard { min-height: 680px; margin: 1rem 0; }

@media (prefers-reduced-motion: reduce) {
  .intro-wordmark-wrap { display: none; }
  .site-header > .wordmark { opacity: 1; animation: none; }
}

@media (max-width: 800px) {
  .artist-reference { grid-template-columns: 1fr; }
  .reference-preview { grid-template-columns: 1fr 1fr; }
  .thesis-facts { grid-template-columns: 1fr; }
  .thesis-facts article { min-height: auto; }
  .detail-world-intro { grid-template-columns: 1fr; gap: 1rem; }
  .moodboard { min-height: 760px; gap: 5px; padding: 8px; }
  .moodboard-preview { min-height: 0; }
  .board-type strong { font-size: 2.2rem; }
  .board-palette { display: block; }
  .board-palette > div { height: 58%; }
  .board-palette p { font-size: .5rem; padding: .4rem; }
  .board-note p { font-size: .58rem; }
  .board-heading { display: block; }
  .board-heading p { margin-top: .35rem; }
  .kit-mood .moodboard { min-height: 760px; }
  .intro-wordmark { animation-name: intro-wordmark-mobile; }
  @keyframes intro-wordmark-mobile {
    0%, 34% { transform: translate(0, 0) scale(1); opacity: 1; }
    76%, 100% { transform: translate(calc(-50vw + 7vw + 34px), calc(-50vh + 45px)) scale(.32); opacity: 0; }
  }
}