/* ==========================================================================
   studio. — owner workspace for housevibe / Robert Cartner
   Same brand tokens as the public site.
   ========================================================================== */

:root{
  --ink:#0b0b0b;
  --ink-2:#141311;
  --cream:#fff6e3;
  --cream-dim:#efe3cc;
  --bubble:#ff8fc7;
  --bubble-deep:#f264ae;
  --tomato:#f4482e;
  --lime:#b7e544;
  --sky:#6ec5e9;
  --sunny:#ffd23f;
  --peach:#ffc9a6;

  --display:'Archivo Black','Arial Black',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --max:1160px;
  --radius:18px;
  --radius-sm:10px;
  --ink-line:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --ease:cubic-bezier(.22,.9,.24,1);
  --gutter:clamp(16px,4vw,40px);

  --btn-bg:var(--bubble);
  --btn-fg:var(--ink);
}

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

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

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,143,199,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,210,63,.18), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:12px;top:-60px;z-index:99;
  background:var(--ink);color:var(--cream);
  padding:10px 16px;border-radius:var(--radius-sm);
  font-weight:700;text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:12px;color:var(--cream)}

:focus-visible{
  outline:3px solid var(--tomato);
  outline-offset:3px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   BUTTONS / LINKS  (public-site components)
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--btn-bg);
  --fg:var(--btn-fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding:.72rem 1.15rem;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:700;
  line-height:1.1;
  color:var(--fg);
  background:var(--bg);
  border:var(--ink-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover,
.btn:focus-visible{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow);
}
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink) }

.btn--bubble{--bg:var(--bubble);--fg:var(--ink)}
.btn--sunny{--bg:var(--sunny);--fg:var(--ink)}
.btn--sunny:hover,.btn--sunny:focus-visible{background:#ffc400}
.btn--cream{--bg:var(--cream);--fg:var(--ink)}
.btn--cream:hover,.btn--cream:focus-visible{background:var(--sunny)}
.btn--ink{--bg:var(--ink);--fg:var(--cream);box-shadow:4px 4px 0 var(--bubble)}
.btn--ink:hover,.btn--ink:focus-visible{box-shadow:6px 6px 0 var(--bubble)}
.btn--line{--bg:transparent;--fg:var(--ink);box-shadow:none}
.btn--line:hover,.btn--line:focus-visible{background:var(--ink);color:var(--cream);box-shadow:var(--shadow-sm)}
.btn--ghost{--bg:transparent;--fg:var(--cream);border-color:var(--cream);box-shadow:3px 3px 0 var(--cream)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--cream);color:var(--ink)}
.btn--sm{font-size:.82rem;padding:.55rem .85rem;min-height:40px}

.link-arrow{
  font-weight:700;
  text-decoration:none;
  border-bottom:3px solid var(--bubble);
  padding-bottom:2px;
  transition:border-color .18s var(--ease), color .18s var(--ease);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.link-arrow:hover,.link-arrow:focus-visible{border-color:var(--ink)}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#5b564c;
}

/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:.7rem var(--gutter);
  background:rgba(11,11,11,.97);
  color:var(--cream);
  border-bottom:var(--ink-line);
  backdrop-filter:blur(8px);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color:var(--cream);
  flex:0 0 auto;
}
.brand__word{
  font-family:var(--display);
  font-size:1.32rem;
  letter-spacing:-.02em;
  line-height:1;
}
.brand__mark{display:grid;place-items:center}

.topnav{
  display:none;
  gap:clamp(10px,1.6vw,26px);
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.topnav a{
  font-family:var(--mono);
  font-size:.78rem;
  text-decoration:none;
  color:rgba(255,246,227,.72);
  padding:.4rem .1rem;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.topnav a:hover,.topnav a:focus-visible{color:var(--cream);border-color:var(--bubble)}

.topbar__end{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-left:auto;
  flex:0 0 auto;
}
.topbar__link{
  display:none;
  font-family:var(--mono);
  font-size:.76rem;
  color:rgba(255,246,227,.75);
  text-decoration:none;
  padding:.5rem .2rem;
}
.topbar__link:hover{color:var(--bubble)}

/* --------------------------------------------------------------------------
   SHELL / GRID
   -------------------------------------------------------------------------- */
.shell{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,22px);
  padding:clamp(14px,2.4vw,24px) var(--gutter) clamp(28px,4vw,48px);
  max-width:1600px;
  margin:0 auto;
  align-items:start;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar{
  background:var(--ink-2);
  color:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius);
  padding:.9rem .7rem;
  box-shadow:var(--shadow-sm);
  min-width:0;
}
.sidebar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.2rem .45rem .6rem;
}
.sidebar__label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,246,227,.55);
}
.sidebar__collapse{
  display:grid;place-items:center;
  width:44px;height:44px;
  color:var(--cream);
  background:rgba(255,246,227,.08);
  border:2px solid rgba(255,246,227,.22);
  border-radius:9px;
  cursor:pointer;
  transition:background .18s var(--ease), transform .25s var(--ease), border-color .18s var(--ease);
}
.sidebar__collapse:hover,.sidebar__collapse:focus-visible{background:rgba(255,246,227,.16);border-color:rgba(255,246,227,.5)}
.sidebar__collapse[aria-expanded="false"] svg{transform:rotate(180deg)}

.sidebar__nav{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s var(--ease);
}
.sidebar__nav.is-closed{grid-template-rows:0fr}
.snav{overflow:hidden;min-width:0}

.snav li + li{margin-top:2px}
.snav__gap{height:12px;position:relative}
.snav__gap span{
  position:absolute;left:8px;right:8px;top:50%;
  height:2px;background:rgba(255,246,227,.18);border-radius:2px;
}

.snav__link{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:44px;
  padding:.55rem .6rem;
  border-radius:var(--radius-sm);
  color:rgba(255,246,227,.86);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.snav__link:hover,.snav__link:focus-visible{
  background:rgba(255,246,227,.1);
  color:var(--cream);
  transform:translateX(2px);
}
.snav__link.is-active{
  background:var(--cream);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--bubble);
  font-weight:700;
}
.snav__link.is-active .dot{box-shadow:0 0 0 2px rgba(11,11,11,.25)}
.snav__link.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.snav__t{flex:1 1 auto;min-width:0}
.snav__meta{
  font-family:var(--mono);
  font-size:.72rem;
  opacity:.7;
}
.snav__meta--new{
  background:var(--tomato);
  color:var(--cream);
  padding:.05rem .38rem;
  border-radius:6px;
  opacity:1;
}
.soon{
  font-family:var(--mono);
  font-size:.62rem;
  font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.8;
}

.dot{
  width:13px;height:13px;border-radius:50%;
  flex:0 0 auto;
  background:var(--cream);
  box-shadow:0 0 0 2px rgba(11,11,11,.35);
}
.dot--bubble{background:var(--bubble)}
.dot--bubble-deep{background:var(--bubble-deep)}
.dot--tomato{background:var(--tomato)}
.dot--lime{background:var(--lime)}
.dot--sky{background:var(--sky)}
.dot--sunny{background:var(--sunny)}
.dot--peach{background:var(--peach)}
.dot--cream{background:var(--cream)}
.dot--off{background:#4a463f}

.sidebar__foot{padding:.8rem .5rem .2rem;margin-top:.6rem;border-top:2px dashed rgba(255,246,227,.18)}
.mini-stat__row{
  display:flex;justify-content:space-between;gap:.5rem;
  font-family:var(--mono);font-size:.7rem;
  color:rgba(255,246,227,.8);
  margin-bottom:.35rem;
}
.mini-stat__row b{color:var(--cream)}
.mini-stat__row--dim{color:rgba(255,246,227,.5);margin-top:.4rem;margin-bottom:0}
.mini-stat__bar{
  height:8px;border-radius:99px;
  background:rgba(255,246,227,.16);
  overflow:hidden;
}
.mini-stat__bar i{
  display:block;height:100%;width:var(--w,50%);
  background:linear-gradient(90deg,var(--lime),var(--sky));
  border-radius:99px;
  transition:width 1s var(--ease);
}

/* --------------------------------------------------------------------------
   MAIN
   -------------------------------------------------------------------------- */
.main{min-width:0;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}

/* HERO */
.hero{
  background:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(16px,2.4vw,26px);
}
.hero__row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(12px,2vw,20px);
  align-items:start;
}
.hero__mark{grid-row:1;line-height:0}
.hero__text{min-width:0}
.hero__title{
  font-family:var(--display);
  font-size:clamp(1.55rem,4.2vw,2.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-top:.25rem;
}
.hero__title .dash{color:var(--bubble-deep)}
.hero__sub{
  margin-top:.55rem;
  font-size:clamp(.9rem,1.6vw,1.02rem);
  color:#4a463f;
  max-width:56ch;
}
.hero__actions{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.4rem;
}

.ticker{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  margin-top:1rem;
  padding-top:.85rem;
  border-top:2px dashed rgba(11,11,11,.22);
  font-family:var(--mono);
  font-size:.74rem;
  color:#57534a;
}
.ticker li{display:flex;gap:.35rem;align-items:baseline}
.ticker__k{text-transform:uppercase;letter-spacing:.09em;font-size:.66rem;opacity:.75}
.ticker b{color:var(--ink)}

/* SECTION HEAD */
.sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}
.h2{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  line-height:1.05;
  letter-spacing:-.015em;
}
.display{
  font-family:var(--display);
  font-size:clamp(1.8rem,4.6vw,2.5rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.display--cream{color:var(--cream)}
.lede{color:#4a463f;max-width:52ch;margin-top:.5rem}

/* CARDS */
.card{
  position:relative;
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  min-width:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}

.card--cream{background:var(--cream-dim);padding:clamp(16px,2.2vw,24px)}
.card--ink{background:var(--ink-2);color:var(--cream);padding:clamp(16px,2.2vw,24px)}

/* workbench = 2 cards */
.workbench{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,18px);
}

.card--photo{
  background:var(--ink-2);
  min-height:290px;
  display:flex;
  flex-direction:column;
}
.card__media{position:absolute;inset:0}
.card__media img{width:100%;height:100%;object-fit:cover;min-height:100%}
.card--photo > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.card--photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.05) 40%,rgba(11,11,11,.45));
  pointer-events:none;
}

.card__link{
  position:relative;
  z-index:3;
  margin-top:auto;
  align-self:flex-start;
  margin-left:clamp(14px,2vw,22px);
  margin-bottom:clamp(14px,2vw,20px);
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:700;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:99px;
  padding:.5rem .85rem;
  text-decoration:none;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.card__link:hover,.card__link:focus-visible{background:var(--sunny);transform:translateY(-2px)}

.badge--abs{position:absolute;z-index:3;top:14px;left:14px}
.badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.4rem .7rem;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--sunny);
  color:var(--ink);
}
.badge--sunny{background:var(--sunny)}
.badge--ink{background:var(--ink);color:var(--cream);border-color:var(--cream)}

.note{
  position:absolute;
  z-index:3;
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.35;
  color:var(--ink);
  padding:.7rem .8rem;
  border-radius:4px;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.note--paper{background:#f3e6c8}
.note--sticky{
  right:8%;
  top:12%;
  transform:rotate(-6deg);
  max-width:44%;
}

.pill{
  position:absolute;
  z-index:3;
  border-radius:999px;
  border:2px solid var(--ink);
  padding:.55rem .85rem;
  font-size:.78rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.pill--bubble{background:var(--bubble);color:var(--ink)}
.card__pill{right:12px;bottom:64px;transform:rotate(-3deg)}

/* type specimen card */
.type__row{display:flex;align-items:center;gap:.8rem}
.type__sep{width:2px;height:26px;background:rgba(11,11,11,.28)}
.type__tag{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}
.type__title{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin-top:.7rem;
}
.type__copy{margin-top:.7rem;font-size:.92rem;color:#403c34;max-width:34ch}
.type__specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin:.9rem 0 1rem;
  font-family:var(--mono);
  font-size:.72rem;
}
.type__specs dt{text-transform:uppercase;letter-spacing:.1em;opacity:.6;font-size:.66rem}
.type__specs dd{margin-top:.15rem;font-weight:700}

/* LIBRARY grid */
.library{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,18px);
}

.card__lede{color:rgba(255,246,227,.72);font-size:.9rem;margin-top:.7rem;max-width:34ch}

.songs{margin:1rem 0 0;border-top:2px dashed rgba(255,246,227,.2)}
.song{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:.6rem;
  padding:.6rem 0;
  border-bottom:2px dashed rgba(255,246,227,.14);
}
.song__n{font-family:var(--mono);font-size:.72rem;color:rgba(255,246,227,.5)}
.song__t{font-weight:700;font-size:.94rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song__m{font-family:var(--mono);font-size:.68rem;color:rgba(255,246,227,.55);white-space:nowrap}
.song__play{
  display:grid;place-items:center;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,246,227,.1);
  color:var(--cream);
  border:2px solid rgba(255,246,227,.3);
  font-size:.6rem;
  text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.song__play::before{content:"";position:absolute}
.song__play:hover,.song__play:focus-visible{background:var(--bubble);color:var(--ink);border-color:var(--ink);transform:scale(1.08)}

.card__btnrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* tile */
.card--tile{min-height:260px}
.tile__cap{
  position:relative;
  z-index:3;
  margin-top:auto;
  padding:clamp(12px,2vw,16px);
  background:linear-gradient(180deg,transparent,rgba(11,11,11,.82));
  color:var(--cream);
  display:flex;
  flex-direction:column;
  gap:.1rem;
}
.tile__t{font-weight:700;font-size:.95rem}
.tile__s{font-family:var(--mono);font-size:.7rem;color:rgba(255,246,227,.72)}

/* PLAYER */
.player{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.8vw,18px);
  background:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(16px,2.4vw,26px);
}
.player__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.player__panel{min-width:0}

.mixer{
  background:var(--ink-2);
  color:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius-sm);
  padding:.9rem 1rem 1rem;
  min-width:0;
}
.mixer__head{
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(255,246,227,.2);
}
.mixer__title{font-weight:700;font-size:.9rem}
.mixer__time{font-family:var(--mono);font-size:.74rem;color:var(--sky)}
.tracks{margin-top:.7rem;display:grid;gap:.45rem}
.track{
  display:grid;
  grid-template-columns:18px minmax(64px,86px) 1fr 30px;
  align-items:center;
  gap:.55rem;
}
.track__n{font-family:var(--mono);font-size:.66rem;color:rgba(255,246,227,.5)}
.track__label{font-size:.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track__wave{
  height:20px;
  border-radius:4px;
  background:
    repeating-linear-gradient(90deg,
      var(--wave-c,var(--bubble)) 0 3px,
      transparent 3px 6px);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px);
  opacity:.85;
  position:relative;
  overflow:hidden;
}
.track__wave::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.55) 50%,transparent 60% 100%);
  transform:translateX(-100%);
  opacity:0;
}
.is-playing .track__wave::after{opacity:.6;animation:waveSweep 2.2s linear infinite}
.track:nth-child(2) .track__wave{--wave-c:var(--sky)}
.track:nth-child(3) .track__wave{--wave-c:var(--lime)}
.track:nth-child(4) .track__wave{--wave-c:var(--sunny)}
.track:nth-child(5) .track__wave{--wave-c:var(--peach)}
.track:nth-child(6) .track__wave{--wave-c:var(--tomato)}
@keyframes waveSweep{to{transform:translateX(100%)}}

.track__mute{
  width:30px;height:26px;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  color:rgba(255,246,227,.85);
  background:rgba(255,246,227,.08);
  border:2px solid rgba(255,246,227,.28);
  border-radius:6px;
  cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.track__mute:hover{background:rgba(255,246,227,.18)}
.track__mute[aria-pressed="true"]{background:var(--tomato);color:var(--cream);border-color:var(--cream)}
.track.is-muted .track__wave{opacity:.22}

/* EVENTS */
.events{
  display:grid;
  gap:0;
  background:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.event{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.35rem .9rem;
  align-items:center;
  padding:.9rem clamp(14px,2.2vw,20px);
  border-bottom:2px dashed rgba(11,11,11,.16);
  transition:background .18s var(--ease);
}
.event:last-child{border-bottom:0}
.event:hover{background:rgba(255,143,199,.14)}
.event__date{
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:700;
  background:var(--ink);
  color:var(--cream);
  border-radius:6px;
  padding:.3rem .5rem;
  white-space:nowrap;
}
.event__body{min-width:0}
.event__body h3{font-size:.98rem;line-height:1.25}
.event__body p{font-size:.85rem;color:#56514a;margin-top:.1rem}
.event__loc{
  grid-column:2;
  font-family:var(--mono);
  font-size:.7rem;
  color:#6a6459;
}
.tag{
  grid-column:1/-1;
  justify-self:start;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  border:2px solid var(--ink);
  border-radius:99px;
  padding:.2rem .55rem;
}
.tag--lime{background:var(--lime)}
.tag--sunny{background:var(--sunny)}
.tag--bubble{background:var(--bubble)}

/* RACK */
.rack{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(10px,1.4vw,14px);
}
.gear{
  background:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  padding:1rem;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.gear:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);background:var(--cream-dim)}
.gear__dot{
  display:block;width:12px;height:12px;border-radius:50%;
  background:var(--c,var(--bubble));
  border:2px solid var(--ink);
  margin-bottom:.55rem;
}
.gear h3{font-size:.96rem;line-height:1.2}
.gear p{font-size:.82rem;color:#56514a;margin-top:.25rem}
.gear__state{
  display:inline-block;
  margin-top:.65rem;
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:2px solid var(--bubble);
}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2vw,22px);
  background:var(--ink-2);
  color:var(--cream);
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(16px,2.4vw,26px);
}
.contact .h2{color:var(--cream)}
.contact .lede{color:rgba(255,246,227,.75)}
.contact .eyebrow{color:rgba(255,246,227,.6)}
.contact__copy{min-width:0}
.contact__list{margin-top:1rem;display:grid;gap:.5rem;font-size:.9rem}
.contact__list li{display:flex;align-items:center;gap:.6rem}

.form{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  border:var(--ink-line);
  border-radius:var(--radius-sm);
  padding:clamp(14px,2vw,20px);
  display:grid;
  gap:.8rem;
  min-width:0;
}
.form__row{display:grid;grid-template-columns:1fr;gap:.8rem}
.field{display:grid;gap:.32rem;min-width:0}
.field__label{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#57534a;
}
.input{
  width:100%;
  min-height:46px;
  padding:.68rem .8rem;
  font-family:var(--body);
  font-size:.95rem;
  color:var(--ink);
  background:#fffdf7;
  border:2px solid var(--ink);
  border-radius:var(--radius-sm);
  transition:box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.input::placeholder{color:#a39a8a}
.input:hover{background:#fff}
.input:focus{
  outline:none;
  background:#fff;
  box-shadow:0 0 0 3px var(--bubble);
}
.input--area{min-height:110px;resize:vertical}
select.input{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
.form__submit{justify-self:start;margin-top:.2rem}
.form__note{font-family:var(--mono);font-size:.68rem;color:#6a6459}

/* --------------------------------------------------------------------------
   RIGHT RAIL
   -------------------------------------------------------------------------- */
.rail{
  display:grid;
  gap:clamp(12px,1.6vw,18px);
  min-width:0;
  align-content:start;
}
.panel{
  background:#f7ecd6;
  border:var(--ink-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(12px,1.8vw,18px);
  min-width:0;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(11,11,11,.2);
}
.panel__title{
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.panel__chev{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:2px solid var(--ink);
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  transition:background .18s var(--ease), transform .25s var(--ease);
}
.panel__chev:hover,.panel__chev:focus-visible{background:var(--sunny)}
.panel__chev[aria-expanded="false"] svg{transform:rotate(180deg)}

.panel__body{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s var(--ease);
}
.panel__body.is-closed{grid-template-rows:0fr}
.panel__body > *{overflow:hidden}

.note-block{padding:.75rem 0 .2rem;border-bottom:2px dashed rgba(11,11,11,.14)}
.note-block:last-child{border-bottom:0}
.note-block__t{
  display:flex;align-items:center;gap:.45rem;
  font-size:.85rem;font-weight:700;line-height:1.25;
}
.note-block__t .dot{width:10px;height:10px;box-shadow:none}
.note-block p{font-size:.78rem;color:#4e4a42;margin-top:.35rem;line-height:1.5}
.note-block__sub{
  font-family:var(--mono);
  font-size:.68rem !important;
  color:#7a7365 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.panel--meter{display:grid;gap:.9rem}
.meter__head{display:flex;justify-content:space-between;gap:.5rem;font-family:var(--mono);font-size:.72rem}
.meter__label{text-transform:uppercase;letter-spacing:.1em;color:#57534a}
.meter__val{font-weight:700}
.meter__track{
  margin-top:.45rem;
  height:22px;
  border:2px solid var(--ink);
  border-radius:6px;
  background:var(--cream);
  overflow:hidden;
}
.meter__track i{
  display:block;height:100%;width:var(--w,50%);
  background:linear-gradient(90deg,var(--sunny),var(--bubble));
  border-right:2px solid var(--ink);
  transition:width 1.1s var(--ease);
}
.meter__foot{
  display:flex;justify-content:space-between;gap:.5rem;
  margin-top:.4rem;
  font-family:var(--mono);font-size:.66rem;color:#6a6459;
}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap}
.swatch{
  width:26px;height:26px;border-radius:6px;
  background:var(--c);
  border:2px solid var(--ink);
  transition:transform .18s var(--ease);
  cursor:default;
}
.swatch:hover{transform:translateY(-3px) rotate(-6deg)}
.rail-note{
  font-size:.78rem;
  color:#4e4a42;
  border-top:2px dashed rgba(11,11,11,.16);
  padding-top:.7rem;
}
.rail-sign{
  font-family:var(--mono);
  font-size:.68rem;
  text-align:right;
  color:#6a6459;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.2rem;
  padding:1.1rem var(--gutter) 1.6rem;
  background:var(--ink);
  color:rgba(255,246,227,.7);
  font-family:var(--mono);
  font-size:.72rem;
  border-top:var(--ink-line);
}
.footer__nav{display:flex;gap:1rem;flex-wrap:wrap}
.footer__nav a{
  color:rgba(255,246,227,.8);
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.footer__nav a:hover,.footer__nav a:focus-visible{color:var(--bubble)}

/* --------------------------------------------------------------------------
   REVEAL
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width:600px){
  .form__row{grid-template-columns:1fr 1fr}
  .rack{grid-template-columns:1fr 1fr}
  .event{
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
  }
  .event__loc{grid-column:auto}
  .tag{grid-column:auto;justify-self:end}
}

@media (min-width:760px){
  .hero__row{grid-template-columns:auto 1fr;align-items:center}
  .hero__actions{grid-column:1/-1;margin-top:.2rem}
  .workbench{grid-template-columns:1.05fr .95fr}
  .library{grid-template-columns:1.15fr 1fr 1fr}
  .player{grid-template-columns:1fr 1fr;align-items:center}
  .contact{grid-template-columns:1fr 1.05fr;align-items:start}
  .topnav{display:flex}
  .topbar__link{display:inline-flex}
  .rail{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .hero__row{grid-template-columns:auto 1fr auto;align-items:center}
  .hero__actions{grid-column:auto;margin-top:0;flex-direction:column;align-items:stretch}
}

@media (min-width:1040px){
  .shell{
    grid-template-columns:212px minmax(0,1fr);
    grid-template-areas:"side main";
  }
  .sidebar{grid-area:side;position:sticky;top:74px}
  .main{grid-area:main}
  .rail{grid-area:main;grid-template-columns:1fr 1fr}
}

@media (min-width:1280px){
  .shell{
    grid-template-columns:212px minmax(0,1fr) 268px;
    grid-template-areas:"side main rail";
    gap:clamp(14px,1.6vw,20px);
  }
  .sidebar{grid-area:side}
  .main{grid-area:main}
  .rail{grid-area:rail;grid-template-columns:1fr;position:sticky;top:74px}
}

@media (max-width:759px){
  .topnav{display:none}
  .note--sticky{font-size:.68rem;right:5%;max-width:48%}
  .card--photo{min-height:340px}
  .card__pill{bottom:70px}
  .song__play{width:44px;height:44px}
  .track__mute{width:44px;height:36px}
  .track{grid-template-columns:18px minmax(56px,80px) 1fr 44px}
  .sidebar__nav.is-closed{overflow:hidden}
  .form__submit{justify-self:stretch;width:100%}
  .card__btnrow .btn{flex:1 1 auto}
}

@media (max-width:400px){
  .hero__row{grid-template-columns:1fr}
  .hero__mark svg{width:64px;height:64px}
  .type__specs{grid-template-columns:1fr}
  .snav__meta{font-size:.66rem}
}

@media (min-width:1040px) and (max-width:1279px){
  .rail{grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}
/* studio-chrome:canonical */
/* ---------- page-local additions only ---------- */
  .main-col{min-width:0;display:grid;gap:clamp(18px,2.6vw,30px);align-content:start}

  @media (min-width:1040px){
    .main-col{grid-area:main;grid-template-columns:minmax(0,1fr)}
  }
  @media (min-width:1280px){
    .main-col{grid-area:main;grid-template-columns:minmax(0,1fr)}
    .main-col > .rail{width:auto;position:static}
  }

  /* the runtime inbox region sits above our honest empty state */
  [data-studio="inbox"]{min-width:0}
  [data-studio="inbox"]:empty{display:none}
  [data-studio="inbox"]:not(:empty) + .empty-state{display:none}

  /* single error strip */
  .strip-error{
    display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
    background:var(--cream-dim);
    border:3px dashed var(--tomato);
    border-radius:var(--radius-sm);
    padding:.7rem .9rem;
    font-size:.9rem;
  }
  .strip-error[hidden]{display:none}
  .strip-error__dot{width:12px;height:12px;border-radius:50%;background:var(--tomato);flex:0 0 auto}
  .strip-error__t{flex:1 1 14ch;min-width:0;font-weight:500}

  /* loading shimmer */
  #greet-word.skelw{
    background:rgba(11,11,11,.13);
    color:transparent;
    border-radius:6px;
    animation:pulseSoft 1.4s ease-in-out infinite;
  }
  .is-ghost{opacity:.5}
  .is-ghost .song__t,.is-ghost .event__body h3{font-style:italic}
  @keyframes pulseSoft{0%,100%{opacity:.5}50%{opacity:1}}

  /* ticker: chips are links, scrollable on narrow screens */
  .ticker{
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.45rem;
  }
  .ticker > li{white-space:nowrap}
  .pulse{
    display:inline-flex;align-items:baseline;gap:.4rem;
    min-height:44px;
    padding:.5rem .6rem;
    margin:-.5rem 0;
    text-decoration:none;
    border-radius:8px;
    border:2px solid transparent;
    transition:background .18s var(--ease),border-color .18s var(--ease);
  }
  .pulse:hover,.pulse:focus-visible{background:var(--cream-dim);border-color:var(--ink)}
  .pulse--quiet{opacity:.62}
  @media (min-width:760px){
    .ticker{flex-wrap:wrap;overflow:visible;padding-bottom:0}
  }

  /* next-up photo card */
  .card--photo.card--next{min-height:300px}
  .card--next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .card--next .note--sticky{right:7%;top:11%}
  #next-chip{max-width:52%}

  /* song rows */
  .song{position:relative}
  .song a.song__t{
    text-decoration:none;color:inherit;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .song a.song__t:hover,.song a.song__t:focus-visible{text-decoration:underline;text-underline-offset:3px}
  .song__flag{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;
    background:var(--sunny);color:var(--ink);border-radius:5px;
    padding:.1rem .34rem;margin-left:.4rem;vertical-align:middle;
  }
  .song__flag + .song__flag{display:none}
  .song__play{font-size:.7rem}

  /* events */
  .event{text-decoration:none;color:inherit}
  .event .tag{display:inline-flex;text-decoration:none;align-items:center;min-height:32px}

  .rack__foot{font-size:.82rem;color:#56514a;margin-top:.7rem}
  .rack__foot a{color:var(--ink);font-weight:700}
  .note-inline{font-family:var(--mono);font-size:.7rem;color:#6a6459}

  /* empty state */
  .empty-state{
    display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
    background:var(--cream);
    border:3px dashed rgba(11,11,11,.35);
    border-radius:var(--radius);
    padding:clamp(14px,2vw,20px);
  }
  .empty-state__dot{width:14px;height:14px;border-radius:50%;background:var(--sky);flex:0 0 auto}
  .empty-state p{flex:1 1 22ch;min-width:0;font-size:.92rem;color:#4a463f}

  /* content panel */
  .panel--content{background:#f7ecd6}
  .panel--content .panel__body{grid-template-rows:1fr;display:grid;gap:.8rem}
  .panel--content .lede{font-size:.88rem}

  /* needs attention */
  .needs-item{display:block;padding:.6rem 0;border-bottom:2px dashed rgba(11,11,11,.14);text-decoration:none;color:inherit}
  .needs-item:last-child{border-bottom:0}
  .needs-item:hover .needs-item__t,.needs-item:focus-visible .needs-item__t{text-decoration:underline}
  .needs-item__t{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:700;line-height:1.25}
  .needs-item__t .dot{width:10px;height:10px;box-shadow:none}
  .needs-item p{font-size:.78rem;color:#4e4a42;margin-top:.3rem;line-height:1.45;overflow-wrap:anywhere}
  .needs-ok{font-size:.82rem;color:#4e4a42;padding:.7rem 0 .3rem;line-height:1.5}

  /* quick links */
  .quick{display:grid;gap:.1rem}
  .quick a{
    display:flex;align-items:center;gap:.55rem;
    min-height:44px;padding:.4rem .3rem;border-radius:8px;
    font-size:.86rem;font-weight:600;text-decoration:none;color:var(--ink);
    transition:background .18s var(--ease),transform .18s var(--ease);
  }
  .quick a:hover,.quick a:focus-visible{background:rgba(11,11,11,.08);transform:translateX(2px)}

  /* smaller offset shadows + tidy type on small screens */
  @media (max-width:599px){
    .card,.gear,.events,.hero,.panel{box-shadow:3px 3px 0 var(--ink)}
    .card:hover,.gear:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
    .hero__title{font-size:clamp(1.45rem,7.2vw,2rem)}
    .card--photo.card--next{min-height:340px}
    .card--next .note--sticky{right:4%;top:auto;bottom:92px;max-width:58%}
    #next-chip{bottom:76px}
    .sec-head{gap:.4rem}
  }

/*studio-kit*/
:root{--st-bg:#faf7f2;--st-surface:#fff;--st-text:#1c1917;--st-muted:#6b7280;--st-border:rgba(0,0,0,.12);--st-accent:#b45309;--st-radius:12px;--st-font:inherit;--st-mono:ui-monospace,SFMono-Regular,Menlo,monospace;}
[data-studio-app],[data-studio-gate]{font-family:var(--st-font);color:var(--st-text);}
html[data-hermes-auth-pending] body > :not(script):not(style):not(link):not(meta):not([data-hermes-auth-gate]){visibility:hidden!important}
/* Every primitive sets its OWN colour explicitly (not inherited), so a page's colour on the region
   container can never bleed in and make the module unreadable (#studio-kit contrast). */
[data-studio],[data-studio] *{color:var(--st-text);}
.st-state{padding:22px;border:1px dashed var(--st-border);border-radius:var(--st-radius);color:var(--st-muted);text-align:center;font-size:14px;}
.st-summary{display:flex;gap:14px;flex-wrap:wrap;}
.st-metric{flex:1;min-width:140px;background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:16px 18px;color:var(--st-text);}
.st-metric__n{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--st-text);}
.st-metric__l{margin-top:2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);}
.st-page{margin-top:18px;}
.st-page__h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-muted);margin:0 0 4px;}
.st-group{margin-top:16px;}
.st-group__h{display:flex;justify-content:space-between;font-weight:600;font-size:14px;padding:6px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-count{color:var(--st-muted);font-family:var(--st-mono);font-size:12px;}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-row__l{flex:0 0 38%;font-size:13px;color:var(--st-muted);}
.st-input{flex:1;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--st-border);border-radius:9px;background:var(--st-surface);color:var(--st-text);}
.st-input[data-ph]{border-style:dashed;}
.st-btn{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--st-border);background:var(--st-surface);color:var(--st-text);cursor:pointer;}
.st-btn--primary{margin-top:16px;background:var(--st-accent);border-color:var(--st-accent);color:#fff;}
.st-btn:disabled{opacity:.6;cursor:default;}
.st-list{margin-top:6px;color:var(--st-text);}
.st-msg{padding:12px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-msg.is-new{border-left:3px solid var(--st-accent);padding-left:12px;}
.st-msg__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;color:var(--st-text);}
.st-msg__h strong{color:var(--st-text);}
.st-when{font-size:12px;color:var(--st-muted);}
.st-kv{font-size:13px;margin:2px 0;color:var(--st-text);}
.st-kv span{color:var(--st-muted);}