/* The studio's HTML layer: the bar along the top, the tools along the
   bottom, the intro card, the tooltip, the panels that come out of the desk
   and the chat inside the CRT. The classic site's own stylesheet (in
   index.html) is untouched; everything here is scoped to .rm or to
   html.room-on. Each panel is dressed as the object it came out of. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Special+Elite&family=VT323&display=swap');

:root {
  --rm-ink: #f3ead9;
  --rm-dim: rgba(243, 234, 217, .62);
  --rm-glass: rgba(14, 12, 10, .58);
  --rm-line: rgba(243, 234, 217, .18);
  --rm-amber: #ffb547;
  --rm-paper: #f7f1e3;
  --rm-navy: #1f2a44;
  --rm-red: #b4432f;
  --rm-ease: cubic-bezier(.2, .8, .2, 1);
}

/* The classic site stays in the DOM, out of sight and out of the tab order. */
html.room-on, html.room-on body { overflow: hidden; height: 100%; background: #05070c; }
html.room-on body > :not(#rm):not(dialog):not(script) { visibility: hidden !important; }

.rm {
  position: fixed; inset: 0; z-index: 50;
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  color: var(--rm-ink);
  -webkit-font-smoothing: antialiased;
}
.rm button { font: inherit; color: inherit; cursor: pointer; }
.rm-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; opacity: 0; transition: opacity 1.2s ease; }
/* The loading still: a frame of the room itself, shown the instant the page
   opens, so there is never a blank screen; the live canvas fades in over it
   once the room is drawn (.drawn), from the same camera, so nothing jumps. */
.rm { background: #05070c url('/room/assets/still.jpg') center / cover no-repeat; }
.rm.drawn .rm-gl { opacity: 1; }

/* ---------- top bar ---------- */
.rm-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  pointer-events: none;
  opacity: 0; transition: opacity .8s .4s;
}
.rm.live .rm-top, .rm.live .rm-bar { opacity: 1; }
.rm-top > * { pointer-events: auto; }
.rm-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: none; border: 0; padding: 0; text-align: left;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.rm-brand b { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; }
.rm-role { font-size: 12px; color: var(--rm-dim); letter-spacing: .06em; }
.rm-nav { display: flex; align-items: center; gap: 4px; }
.rm-nav button {
  background: none; border: 0; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rm-ink); text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  transition: background .25s, color .25s;
}
.rm-nav button:hover { background: rgba(243, 234, 217, .14); }
.rm-nav button.on { background: var(--rm-ink); color: #15110c; text-shadow: none; }
.rm-nav .rm-lang { margin-left: 10px; border: 1px solid var(--rm-line); letter-spacing: .08em; }
.rm-lang span { opacity: .45; }
.rm-lang span.on { opacity: 1; }

/* ---------- bottom bar ---------- */
.rm-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  pointer-events: none;
  opacity: 0; transition: opacity .8s .6s;
}
.rm-bar > * { pointer-events: auto; }
.rm-hint { font-size: 12px; color: var(--rm-dim); letter-spacing: .04em; text-shadow: 0 1px 8px #000; }
.rm-hint[hidden] { display: block; visibility: hidden; }
.rm-tools { display: flex; gap: 8px; margin-left: auto; }
.rm-t {
  border: 1px solid var(--rm-line); background: var(--rm-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, border-color .2s;
}
.rm-t:hover { background: rgba(40, 33, 26, .8); border-color: rgba(243, 234, 217, .4); }
.rm-t[aria-pressed="true"] { border-color: rgba(255, 181, 71, .55); }
.rm-back { border-color: rgba(243, 234, 217, .5); }

.rm :focus-visible { outline: 2px solid var(--rm-amber); outline-offset: 2px; }

/* ---------- tooltip ---------- */
.rm-tip {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(14, 12, 10, .78); border: 1px solid var(--rm-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .15s;
  white-space: nowrap;
}
.rm-tip.on { opacity: 1; }
.rm-tip b { font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.rm-tip span { font-family: Caveat, cursive; font-size: 17px; line-height: 1; color: var(--rm-amber); }

/* ---------- intro ---------- */
.rm-intro {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(8, 9, 14, .35), rgba(5, 6, 10, .88) 70%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .9s var(--rm-ease), backdrop-filter .9s;
}
.rm-intro.out { opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.rm-intro-card { text-align: center; max-width: 560px; padding: 24px; }
.rm-intro-name {
  margin: 0; font-weight: 700; line-height: .86; letter-spacing: -.035em;
  font-size: clamp(56px, 9vw, 120px);
  text-shadow: 0 6px 50px rgba(0, 0, 0, .55);
}
.rm-intro-role { margin: 18px 0 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--rm-amber); }
.rm-intro-lede { margin: 10px 0 28px; font-family: Caveat, cursive; font-size: 26px; color: var(--rm-dim); }
.rm-load { display: grid; justify-items: center; gap: 10px; }
.rm-load-bar { width: 240px; height: 3px; border-radius: 3px; background: rgba(243, 234, 217, .15); overflow: hidden; }
.rm-load-bar i { display: block; height: 100%; width: 0; background: var(--rm-amber); transition: width .3s var(--rm-ease); }
.rm-load-txt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-dim); }
.rm-intro-go { display: grid; justify-items: center; gap: 16px; animation: rm-rise .7s var(--rm-ease) both; }
/* author display rules beat the hidden attribute, so say it again: the Enter
   button must not show before the room is ready to be entered */
.rm-intro-go[hidden], .rm-load[hidden] { display: none; }
.rm-enter {
  border: 0; border-radius: 999px; padding: 15px 30px;
  background: var(--rm-ink); color: #15110c !important;
  font-size: 15px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(255, 181, 71, .25);
  transition: transform .25s var(--rm-ease), box-shadow .25s;
}
.rm-enter:hover { transform: translateY(-2px); box-shadow: 0 14px 50px rgba(255, 181, 71, .4); }
.rm-intro-opts { display: flex; gap: 8px; }
.rm-intro-opts button {
  background: none; border: 1px solid var(--rm-line); border-radius: 999px; padding: 6px 12px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-dim);
}
.rm-intro-opts button[aria-pressed="true"] { color: var(--rm-amber); border-color: rgba(255, 181, 71, .5); }
@keyframes rm-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- panels ---------- */
.rm-panel {
  position: absolute; z-index: 3;
  right: clamp(16px, 3vw, 44px); top: 76px; bottom: 64px;
  width: min(460px, 38vw);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(40px) rotate(2.5deg);
  transition: opacity .45s var(--rm-ease), transform .6s var(--rm-ease);
}
.rm-panel.in { opacity: 1; transform: none; }
.rm-panel[hidden] { display: none; }
.rm-close {
  position: absolute; right: -10px; top: -12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: #15110c; color: var(--rm-ink) !important; font-size: 20px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.rm-panel-body {
  overflow-y: auto; overscroll-behavior: contain; max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
  scrollbar-width: thin;
}
.rm-sheet { color: var(--rm-navy); padding: 30px 32px 28px; transition: opacity .16s, transform .16s; }
.rm-sheet.swap { opacity: 0; transform: translateY(6px); }
.rm-sheet h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.1; letter-spacing: -.015em; }
.rm-sheet h3 { margin: 26px 0 8px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-red); }
.rm-sheet p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.rm-kicker { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-red); margin-bottom: 16px !important; }
.rm-sheet a { color: inherit; }

/* About: a page out of the notebook. Everything on it sits on one 30px
   baseline grid, so the handwriting lands on the ruled lines the way real
   handwriting does; binder holes down the margin, a little grain and a
   warm edge so it reads as paper under a lamp, not as a card. */
.rm-paper {
  --rule: 30px;
  position: relative;
  padding: var(--rule) 30px var(--rule) 64px;
  background:
    radial-gradient(circle at 22px 50%, #2a2016 0 7px, rgba(0,0,0,.25) 7.5px 8.5px, transparent 9px) 0 calc(var(--rule) * 1.5) / 44px calc(var(--rule) * 4) repeat-y,
    linear-gradient(90deg, transparent 46px, rgba(180, 67, 47, .5) 46px 47px, transparent 47px),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgba(60, 90, 160, .22) calc(var(--rule) - 1px) var(--rule)) 0 9px,
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(160, 120, 70, .18), transparent 55%),
    var(--rm-paper);
}
.rm-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background: repeating-radial-gradient(circle at 17% 31%, rgba(120, 95, 60, .07) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 71% 63%, rgba(120, 95, 60, .06) 0 1px, transparent 1px 4px);
}
.rm-paper > * { position: relative; z-index: 1; }
.rm-paper, .rm-paper p, .rm-paper h3, .rm-paper summary { line-height: var(--rule) !important; }
.rm-paper .rm-kicker { margin: 0 0 var(--rule) !important; }
.rm-hand { font-family: Caveat, cursive; font-size: 24px !important; margin: 0 0 var(--rule) !important; color: #18223b; }
.rm-paper h3 { margin: 0 !important; font-size: 12px; }
.rm-qna details { border: 0; padding: 0; }
.rm-qna summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px;
  font-family: Caveat, cursive; font-weight: 600; font-size: 23px; color: #18223b;
}
.rm-qna summary::-webkit-details-marker { display: none; }
.rm-qna summary::after { content: '+'; font-family: 'Familjen Grotesk', sans-serif; color: var(--rm-red); font-weight: 400; font-size: 20px; }
.rm-qna details[open] summary::after { content: '–'; }
.rm-qna details p { margin: 0 0 var(--rule) !important; font-family: Caveat, cursive; font-size: 21px !important; color: #2b4a9a; padding-left: 14px; border-left: 2px solid rgba(43, 74, 154, .25); }
.rm-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--rule); }
.rm-links a {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(31, 42, 68, .3);
  font-size: 13px; font-weight: 600; text-decoration: none; background: rgba(255, 255, 255, .5);
}
.rm-links a:hover { background: var(--rm-navy); color: var(--rm-paper); }
.rm-links svg { width: 15px; height: 15px; }

/* Projects: a manila case file — fibres in the card, a tab, the title typed,
   the status stamped in red, and the screenshots as a print paper-clipped
   to the front, shown whole: a phone screen is never cropped to a web one's
   shape. */
.rm-file {
  position: relative; margin-top: 24px; border-radius: 0 6px 4px 4px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 85, 40, .05) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .35), transparent 60%),
    #e6cf9d;
}
.rm-file-tab {
  position: absolute; left: 0; top: -24px; height: 24px; padding: 0 16px;
  display: flex; align-items: center; border-radius: 7px 7px 0 0;
  background: #e6cf9d; font: 700 11px/1 'Special Elite', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.rm-file-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.rm-status {
  font: 400 13px/1 'Special Elite', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(176, 44, 30, .88); padding: 5px 9px; border: 2.5px double currentColor; border-radius: 4px;
  transform: rotate(-4deg); mix-blend-mode: multiply;
  -webkit-mask: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0,0,0,.75) 2px 3px);
  mask: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0,0,0,.75) 2px 3px);
}
.rm-feature { font-family: Caveat, cursive; font-size: 21px; font-weight: 600; line-height: 1; color: #2b4a9a; }
.rm-shots {
  position: relative; aspect-ratio: 4 / 3; margin: 0 0 18px;
  background: #fbfaf6; padding: 10px 10px 30px; box-shadow: 0 8px 20px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .2);
  transform: rotate(-1.2deg);
}
.rm-shots::before {        /* the paper clip */
  content: ''; position: absolute; z-index: 2; left: 22px; top: -14px; width: 13px; height: 44px;
  border: 3px solid #a7adb4; border-radius: 9px; border-bottom-color: transparent;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); transform: rotate(-8deg);
}
.rm-shots img {
  position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 40px);
  object-fit: contain; background: #ece6d8; opacity: 0; transition: opacity .5s;
}
.rm-shots img.on { opacity: 1; }
.rm-shots.tall { aspect-ratio: 1 / 1; }
.rm-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.rm-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(31, 42, 68, .25); }
.rm-dots button.on { background: var(--rm-navy); }
.rm-notice { font-size: 12px !important; font-style: italic; opacity: .7; margin-top: -8px !important; }
.rm-file h2 { font: 400 23px/1.2 'Special Elite', ui-monospace, monospace; letter-spacing: -.01em; margin-bottom: 12px; }
.rm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 18px; }
.rm-tags span { font: 400 12px/1 'Special Elite', ui-monospace, monospace; padding: 5px 8px; border: 1px dashed rgba(31, 42, 68, .45); border-radius: 2px; background: rgba(255, 255, 255, .35); }
.rm-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--rm-navy);
  font-size: 14px; font-weight: 700;
}
.rm-btn:hover, .rm-btn-solid { background: var(--rm-navy); color: var(--rm-paper) !important; }
.rm-btn-solid:hover { background: var(--rm-red); border-color: var(--rm-red); }
.rm-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px dashed rgba(31, 42, 68, .35); font: 400 13px/1 'Special Elite', ui-monospace, monospace; letter-spacing: .1em; }
.rm-pager button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--rm-navy); background: none; color: var(--rm-navy) !important; font-size: 17px; }
.rm-pager button:hover { background: var(--rm-navy); color: #e6cf9d !important; }

/* the panels sit like objects laid down, not cards snapped to a grid */
.rm-panel.is-about.in { transform: rotate(-.7deg); }
.rm-panel.is-projects.in { transform: rotate(.5deg); }

/* Schedule: a ticket, with a perforated edge. */
.rm-ticket {
  background:
    radial-gradient(circle at 0 50%, transparent 14px, #fbf3c8 15px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 14px, #fbf3c8 15px) right / 51% 100% no-repeat;
  padding: 36px 40px;
}
.rm-ticket h2 { font-size: 30px; }
.rm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.rm-clock { font-family: Caveat, cursive; font-size: 24px !important; color: var(--rm-red); margin: 0 !important; }

/* Credits: an index card. */
.rm-card { background: #fdfbf6; }
.rm-card ul { padding-left: 18px; margin: 0 0 14px; }
.rm-card li { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
.rm-small { font-size: 13px !important; opacity: .8; }

/* ---------- the chat, on the CRT ---------- */
.rm-twin {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column;
  font-family: VT323, ui-monospace, monospace; color: var(--rm-amber);
  text-shadow: 0 0 6px rgba(255, 160, 50, .7), 0 0 1px rgba(255, 200, 120, .9);
  line-height: 1.12;
  animation: rm-on .5s ease-out both;
}
.rm-twin[hidden] { display: none; }
@keyframes rm-on { 0% { opacity: 0; transform: scaleY(.02); filter: brightness(3); } 60% { opacity: 1; transform: scaleY(1); } }
.rm-twin-head { display: flex; justify-content: space-between; gap: 1em; padding-bottom: .3em; margin-bottom: .4em; border-bottom: 1px solid rgba(255, 181, 71, .45); text-transform: uppercase; }
.rm-twin-status { opacity: .7; }
.rm-twin-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rm-twin .chat-log { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: .55em; padding: 0; margin: 0; max-height: none; height: auto; background: none; border: 0; }
.rm-twin .chat-log::-webkit-scrollbar { display: none; }
.rm-twin .msg { display: block; max-width: none; padding: 0; background: none; animation: none; }
.rm-twin .bubble { all: unset; display: block; white-space: pre-wrap; font: inherit; color: inherit; }
.rm-twin .msg.user .bubble::before { content: '> '; }
.rm-twin .msg.user .bubble { color: #ffe1a8; }
.rm-twin .chat-row { display: flex; gap: .5em; align-items: center; margin-top: .5em; padding: .4em 0 0; border: 0; border-top: 1px dashed rgba(255, 181, 71, .35); background: none; border-radius: 0; box-shadow: none; outline: 0; }
.rm-twin .chat-row::before { content: '>'; }
.rm-twin #chat-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0; font: inherit; color: #ffe1a8; text-shadow: inherit; caret-color: var(--rm-amber); box-shadow: none; }
.rm-twin #chat-input::placeholder { color: rgba(255, 181, 71, .45); }
.rm-twin #chat-send { all: unset; cursor: pointer; font: inherit; color: var(--rm-amber); text-transform: uppercase; padding: 0 .3em; border: 1px solid rgba(255, 181, 71, .5); }
.rm-twin #chat-send:hover { background: rgba(255, 181, 71, .2); }
.rm-twin #chat-send:disabled { opacity: .4; cursor: default; }

/* ---------- the way back in, on the classic site ---------- */
.rm-pill {
  position: fixed; left: 18px; bottom: 50px; z-index: 40;   /* clear of the footer line */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px; border-radius: 999px; border: 0; cursor: pointer;
  background: #15110c; color: #f3ead9;
  font: 600 12px/1 'Familjen Grotesk', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
  transition: transform .25s var(--rm-ease);
}
.rm-pill:hover { transform: translateY(-2px); }
.rm-pill i { width: 10px; height: 10px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 10px #ffb547; }
.rm-pill[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rm-panel, .rm-intro, .rm-sheet { transition-duration: .01s !important; }
  .rm-twin, .rm-intro-go { animation: none; }
}

/* ---------- phones: a look at the studio, not the studio ---------- */
.rm-peek {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 8, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: rm-rise .35s var(--rm-ease) both;
}
.rm-peek-card {
  width: min(520px, 100%); background: #fbf6ea; color: #1f2a44; border-radius: 10px; overflow: hidden;
  font-family: 'Familjen Grotesk', system-ui, sans-serif; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.rm-peek-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rm-peek-card h2 { margin: 18px 20px 6px; font-size: 20px; line-height: 1.2; }
.rm-peek-card p { margin: 0 20px 16px; font-size: 15px; line-height: 1.5; }
.rm-peek-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.rm-peek-row a, .rm-peek-row button {
  font: 700 14px/1 'Familjen Grotesk', system-ui, sans-serif; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #1f2a44; background: none; color: #1f2a44; text-decoration: none;
}
.rm-peek-row a { background: #1f2a44; color: #fbf6ea; }