/* Large editorial hero layout. The rest of the studio remains intentionally compact. */
.sidebar.topbar {
  position: absolute;
  inset: 17px 0 auto;
  z-index: 40;
  width: auto;
  height: 48px;
  padding: 0 max(28px, calc((100vw - 1480px) / 2 + 28px));
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.topbar .brand, .topbar .side-nav, .topbar-actions { pointer-events: auto; }
.topbar .brand { display: none; }
.topbar .side-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 5px;
  background: rgba(10, 17, 19, .72);
  border: 1px solid rgba(227, 242, 234, .2);
  border-radius: 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .side-nav a { height: 36px; padding: 0 20px; border-radius: 22px; font-size: 12px; }
.topbar .side-nav a span { display: none; }
.topbar .side-nav a.active { background: var(--accent); color: #09100c; }
.topbar-actions { position: absolute; right: max(28px, calc((100vw - 1480px) / 2 + 28px)); display: flex; align-items: center; gap: 12px; }
.topbar .save-state { display: none; }
.topbar .quiet-button { padding: 10px 14px; border: 1px solid rgba(227, 242, 234, .18); border-radius: 20px; color: #cdd7d1; }

.canvas { width: 100%; margin-left: 0; }
.hero.section-band {
  min-height: 850px;
  height: 100vh;
  max-height: 1030px;
  padding: clamp(84px, 8.5vh, 105px) max(30px, calc((100vw - 1360px) / 2 + 30px)) 28px;
  border: 0;
  overflow: hidden;
  background: radial-gradient(circle at 71% 11%, rgba(128, 179, 44, .24), transparent 31%), radial-gradient(circle at 4% 88%, rgba(33, 110, 136, .28), transparent 30%), #070d10;
}
.hero .section-number { display: none; }
.hero-grid { grid-template-columns: minmax(520px, .99fr) minmax(540px, .94fr); max-width: 1360px; gap: 16px; height: min(570px, 63vh); }
.hero-copy { padding-top: 0; max-width: 710px; }
.hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; margin-bottom: 11px; }
.hero-copy .field-label:has(.title-input), .hero-copy .field-label:has(.english-input) { display: block; }
.hero-copy { padding-top: clamp(82px, 12vh, 146px); }
.title-input { color: var(--accent); font-size: clamp(67px, 7.7vw, 124px); line-height: .96; letter-spacing: 0; }
.english-input { font-size: clamp(48px, 5.05vw, 80px); line-height: 1; margin: 4px 0 28px; letter-spacing: .02em; }
.role-input { font-size: clamp(25px, 2.25vw, 35px); margin-bottom: 16px; }
.intro-input { height: 76px; max-width: 630px; font-size: 15px; line-height: 1.75; color: #9daaa7; }
.hero-actions { margin: 27px 0 22px; gap: 14px; }
.hero-actions .primary-action, .hero-actions .secondary-action { min-height: 54px; border-radius: 28px; padding: 0 26px; font-size: 15px; }
.hero-actions .secondary-action { background: rgba(73, 88, 94, .32); backdrop-filter: blur(10px); }
.tag-editor { max-width: 750px; gap: 12px; }
.tag-chip { width: 188px; min-height: 76px; border-radius: 11px; }
.tag-chip input { padding: 13px 3px 13px 16px; font-size: 13px; line-height: 1.5; }
.tag-chip button { font-size: 20px; }
.hero .add-text-button { padding: 13px 20px; border-radius: 11px; margin-top: 14px; font-size: 14px; }
.hero-visual { min-height: 600px; }
.avatar-shell { width: min(32vw, 480px); right: 11%; top: 34px; border-width: 5px; background: #f7f8f5; }
.avatar-shell img { object-position: center; }
.avatar-shell>span { font-size: clamp(100px, 14vw, 215px); }
.avatar-upload { width: 46px; height: 46px; right: 8%; bottom: 10%; }
.avatar-mode { position: absolute; z-index: 5; top: 35px; right: 23%; display: flex; gap: 3px; padding: 5px; border-radius: 24px; background: rgba(7, 13, 15, .76); border: 1px solid rgba(227, 242, 234, .14); backdrop-filter: blur(14px); }.avatar-mode button { height: 29px; padding: 0 11px; color: #9da8a3; border-radius: 18px; background: transparent; font-size: 10px; }.avatar-mode button.active { color: #0c130d; background: var(--accent); }.avatar-shell.soft-avatar { border-radius: 25%; }.availability-card { right: 1%; bottom: 210px; width: 215px; padding: 22px; border-radius: 13px; }
.availability-card input { font-size: 20px; }
.availability-card textarea { height: 35px; font-size: 11px; }
.ghost-word { left: -14%; bottom: -37px; font-size: clamp(150px, 15vw, 250px); }
.showcase-rail { position: absolute; z-index: 2; left: max(30px, calc((100vw - 1360px) / 2 + 30px)); right: max(30px, calc((100vw - 1360px) / 2 + 30px)); bottom: -8px; max-width: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 17px; }
.showcase-tile { flex: 1; max-width: 174px; min-width: 100px; aspect-ratio: .72; border-radius: 20px 20px 0 0; transform: rotate(-3deg); background: linear-gradient(145deg, #1c3037, #0b1114); }
.showcase-tile:nth-child(2) { transform: rotate(-5deg); margin-bottom: 7px; }.showcase-tile:nth-child(3) { transform: rotate(-1.5deg); margin-bottom: 18px; }.showcase-tile:nth-child(4) { transform: rotate(0deg); margin-bottom: 24px; }.showcase-tile:nth-child(5) { transform: rotate(1.5deg); margin-bottom: 18px; }.showcase-tile:nth-child(6) { transform: rotate(4deg); margin-bottom: 7px; }.showcase-tile:nth-child(7) { transform: rotate(6deg); }
.showcase-tile { border: 1px solid rgba(190, 210, 207, .25); color: inherit; padding: 0; }.showcase-tile .tile-replace { position: absolute; inset: auto 0 0; padding: 8px; color: #dce7e0; opacity: 0; background: linear-gradient(transparent, rgba(4,8,9,.88)); font-size: 10px; font-style: normal; transition: opacity .18s; }.showcase-tile:hover .tile-replace { opacity: 1; }.empty-tile span { font-size: 17px; color: #81918b; }.showcase-tile:hover { z-index: 4; transform: translateY(-14px) rotate(0deg); }
.rail-controls { position: absolute; z-index: 4; bottom: 20px; left: 50%; transform: translateX(-50%); margin: 0; }
.rail-controls .add-text-button { padding: 10px 15px; background: var(--accent); color: #0b120d; border: 0; backdrop-filter: blur(10px); }.rail-clear { padding: 8px 10px; color: #9ca9a3; background: transparent; font-size: 10px; }.rail-clear:hover { color: #fff; }.rail-controls span { margin-top: 0; }

@media (max-width: 980px) {
  .hero.section-band { height: auto; min-height: 880px; }.hero-grid { grid-template-columns: 1fr 1fr; height: 610px; }.title-input { font-size: 70px; }.avatar-shell { width: min(42vw, 410px); }.tag-chip { width: 155px; min-height: 65px; }.showcase-tile { min-width: 76px; }
}
@media (max-width: 700px) {
  .sidebar.topbar { position: absolute; inset: 8px 0 auto; padding: 0 10px; height: 42px; justify-content: flex-start; }.topbar .side-nav { width: 100%; overflow: auto; justify-content: flex-start; }.topbar .side-nav a { height: 31px; padding: 0 12px; font-size: 10px; white-space: nowrap; }.topbar-actions { display: none; }
  .hero.section-band { min-height: 900px; height: auto; padding: 73px 20px 235px; }.hero-grid { display: flex; flex-direction: column; height: auto; }.hero-copy { padding-top: 0; }.hero-visual { order: -1; height: 320px; min-height: 320px; }.avatar-shell { width: 245px; top: 0; right: 9%; }.avatar-mode { top: 8px; right: 5px; transform: scale(.82); transform-origin: top right; }.availability-card { right: 0; bottom: 0; width: 146px; padding: 14px; }.availability-card input { font-size: 15px; }.availability-card textarea { font-size: 9px; }.title-input { font-size: 56px; }.english-input { font-size: 38px; margin-bottom: 20px; }.role-input { font-size: 23px; }.intro-input { font-size: 13px; height: 69px; }.hero-actions .primary-action, .hero-actions .secondary-action { min-height: 45px; padding: 0 17px; font-size: 12px; }.tag-editor { gap: 7px; }.tag-chip { width: calc(50% - 4px); min-height: 54px; }.tag-chip input { font-size: 10px; padding: 8px; }.showcase-rail { left: 20px; right: 20px; bottom: -8px; gap: 7px; }.showcase-tile { min-width: 0; border-radius: 10px 10px 0 0; }.showcase-tile:nth-child(n+6) { display: none; }.rail-controls { bottom: 148px; }
}