:root {
  --ink: #f6f5f2;
  --night: #191a28;
  --night-deep: #11121c;
  --blue: #527c99;
  --warm: #e3b27c;
  --line: rgba(246,245,242,.32);
  --serif: "Noto Serif Display", "Iowan Old Style", Baskerville, serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(45,49,68,.34), transparent 50%),
    linear-gradient(rgba(246,245,242,.018) 1px, transparent 1px) 0 0 / 100% 10vh,
    var(--night);
}

.sound-note {
  position: absolute;
  top: 28px;
  left: 34px;
  z-index: 30;
  margin: 0;
  color: rgba(246,245,242,.45);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  transition: opacity .6s ease;
}

.scene.is-lit .sound-note { opacity: 0; }

.page-identity {
  position:absolute;
  z-index:8;
  left:5.5vw;
  top:6vh;
  opacity:0;
  transform-origin:top left;
  pointer-events:none;
}

.page-identity .name {
  margin:0 0 .4375em;
  font:400 clamp(34px,4vw,64px)/.98 var(--serif);
  letter-spacing:-.045em;
}

.page-identity .title {
  margin:0;
  color:rgba(246,245,242,.4);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.scene.is-lit .page-identity { animation:identity-fade 1.15s cubic-bezier(.22,1,.36,1) forwards; }

.camera {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: scale(.92);
  transform-origin: 50% 64%;
}

.scene.is-leaning .camera {
  transform: scale(1.14);
  transition: transform 3.3s cubic-bezier(.19,.72,.25,1) .22s;
}

/* Merge the raster environment into the permanent #191A28 page field. */
html,
body,
.scene {
  background-color:#191a28;
}
.illustration-stage {
  -webkit-mask-image:none;
  mask-image:none;
}
.editorial-scene {
  mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 52%,#000 72%,rgba(0,0,0,.94) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 86% at 50% 52%,#000 72%,rgba(0,0,0,.94) 82%,transparent 100%);
}

/* The revised raster already uses the exact page field; no blending or edge mask. */
.editorial-scene {
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
  filter:none !important;
}

/* Steam dissipates through opacity and motion only, never geometric clipping. */
.coffee-steam {
  top:29.5%;
  height:18%;
  overflow:visible;
  clip-path:none;
}
@keyframes illustrated-steam-mark {
  0% {
    opacity:0;
    transform:translate(0,10%) scale(.92,.86);
    filter:blur(0);
  }
  14% {
    opacity:.68;
    transform:translate(1%,-1%) scale(.96,.94);
    filter:blur(0);
  }
  52% {
    opacity:.42;
    transform:translate(3%,-18%) scale(1,1.03);
    filter:blur(.25px);
  }
  78% {
    opacity:.17;
    transform:translate(-3%,-34%) scale(1.04,1.1);
    filter:blur(.7px);
  }
  100% {
    opacity:0;
    transform:translate(4%,-52%) scale(1.08,1.18);
    filter:blur(1.3px);
  }
}

/* Final steam treatment: no hard clipping. The artwork ends at the cup rim and
   softly dissipates at the top of its own image while it rises. */
.coffee-steam {
  left:65.9%;
  top:25.5%;
  width:7%;
  height:23%;
  overflow:visible;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:none;
  mask-image:none;
}

.coffee-steam .steam-stream {
  bottom:0;
  top:auto;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.32) 12%,#000 28%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.32) 12%,#000 28%,#000 100%);
}

@keyframes illustrated-steam-mark {
  0% {
    opacity:0;
    transform:translate(0,10%) scale(.92,.86);
  }
  14% {
    opacity:.68;
    transform:translate(1%,-1%) scale(.96,.94);
  }
  52% {
    opacity:.44;
    transform:translate(3%,-14%) scale(1,1.02);
  }
  78% {
    opacity:.18;
    transform:translate(-3%,-29%) scale(1.03,1.08);
    filter:blur(.55px);
  }
  100% {
    opacity:0;
    transform:translate(4%,-46%) scale(1.06,1.14);
    filter:blur(1.15px);
  }
}

.scene.is-leaning .page-identity {
  transform:translate(5.4vw,7vh);
  transition:transform 3.3s cubic-bezier(.19,.72,.25,1) .22s;
}

.pendant {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: 0;
  transform-origin: top center;
  animation: swing 2.2s ease-out forwards;
}

.cord {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 76px;
  background: rgba(246,245,242,.3);
}

.shade {
  position: absolute;
  top: 76px;
  left: -22px;
  width: 44px;
  height: 26px;
  border: 1px solid rgba(246,245,242,.35);
  border-top: none;
  border-radius: 0 0 22px 22px;
  background: rgba(246,245,242,.06);
}

.shade::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 0;
  border-top: 1px solid rgba(246,245,242,.18);
}

.bulb {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(227,178,124,.25);
}

.bulb.on { animation: bulb-on .5s ease forwards; }

.glow {
  position: absolute;
  z-index: -1;
  top: 90px;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%,-50%) scale(.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,178,124,.35), rgba(227,178,124,.1) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.glow.on { animation: glow-in .8s ease forwards; }

.desk-scene {
  position: absolute;
  z-index: 2;
  left: 7.5vw;
  right: 7.5vw;
  top: 70%;
  height: 30%;
  color: var(--line);
}

.desk-top {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  border: 2px solid rgba(246,245,242,.46);
  border-radius: 11px 8px 12px 9px / 8px 11px 7px 10px;
  background:var(--night);
  box-shadow:inset 0 -5px 0 rgba(227,178,124,.055), 0 4px 8px rgba(0,0,0,.18);
  transform:rotate(-.08deg);
}

.desk-top::after {
  content:"";
  position:absolute;
  left:1.2%;
  right:.8%;
  bottom:3px;
  height:1px;
  border-radius:50%;
  background:rgba(246,245,242,.14);
  transform:rotate(.16deg);
}

.desk-leg {
  position: absolute;
  z-index:1;
  top: 15px;
  width: 20px;
  height: 21vh;
  border-left:2px solid rgba(246,245,242,.42);
  border-right:1px solid rgba(246,245,242,.2);
  border-radius:2px 3px 5px 4px;
  background:rgba(246,245,242,.025);
  transform-origin:top center;
}

.desk-leg::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:34px;
  border-bottom:2px solid rgba(246,245,242,.34);
  border-radius:50%;
  transform:translateX(-50%);
}

.desk-leg-left { left: 22%; transform:rotate(.35deg); }
.desk-leg-right { right: 22%; transform:rotate(-.3deg); }

.mug-art {
  position: absolute;
  z-index: 4;
  left: 12%;
  top: -70px;
  width: 95px;
  height: 70px;
}

.mug-art img { display:block; width:100%; height:100%; transform:translateY(6px) rotate(-.45deg); filter:drop-shadow(1px 2px 0 rgba(0,0,0,.15)); }

.mug-art .steam {
  bottom: auto;
  top: -10px;
}

.mug-art .steam-one { left:44px; }
.mug-art .steam-two { left:58px; }

.paper-stack {
  display:none;
}

.sheet {
  position:absolute;
  width:94px;
  height:18px;
  border:1px solid rgba(246,245,242,.3);
  background:var(--night);
}

.sheet-back { left:5px; top:5px; }
.sheet-middle { left:2.5px; top:2.5px; }
.sheet-top { left:0; top:0; border-color:rgba(246,245,242,.42); }
.sheet-top i { position:absolute; left:9px; top:4px; width:26px; border-top:1px solid rgba(82,124,153,.5); }
.sheet-top i:last-child { left:42px; width:17px; }

.mug-rim {
  position: absolute;
  z-index: 3;
  left: -1px;
  top: -5px;
  width: 38px;
  height: 10px;
  border: 1px solid rgba(246,245,242,.4);
  border-radius: 50%;
  background: var(--night);
}

.coffee {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  height: 3px;
  border-top: 1px solid rgba(227,178,124,.48);
  border-radius: 50%;
}

.mug-handle {
  position: absolute;
  z-index: -1;
  top: 7px;
  right: -24px;
  width: 27px;
  height: 30px;
  border: 1px solid rgba(246,245,242,.3);
  border-radius: 0 16px 16px 0;
  background: var(--night);
}

.mug-handle::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 16px;
  height: 18px;
  border: 1px solid rgba(246,245,242,.22);
  border-radius: 0 11px 11px 0;
  background: var(--night);
}

.steam {
  position: absolute;
  bottom: calc(100% + 5px);
  width: 9px;
  height: 30px;
  border-left: 1.5px solid rgba(227,178,124,.58);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(227,178,124,.2));
}

.steam-one { left: 10px; transform: rotate(8deg); }
.steam-two { left: 22px; height: 25px; transform: rotate(-7deg); }
.scene.is-lit .steam { animation: steam-rise 2.8s .5s ease-in-out infinite; }
.scene.is-lit .steam-two { animation-delay: 1.2s; }

.mug-art .steam { bottom:auto; top:-8px; }
.mug-art .steam-one { left:44px; }
.mug-art .steam-two { left:58px; }

.plant-art {
  position: absolute;
  z-index: 4;
  right: 9%;
  top: -137px;
  width: 115px;
  height: 137px;
}

.pot {
  position: absolute;
  z-index: 3;
  bottom: 5px;
  left: 19px;
  width: 52px;
  height: 42px;
  border: 1px solid rgba(246,245,242,.3);
  border-top: 0;
  background: var(--night);
  border-radius: 0 0 4px 4px;
  clip-path: polygon(0 0,100% 0,82% 100%,18% 100%);
  box-shadow: 0 5px 9px rgba(0,0,0,.18);
}

.pot-rim {
  position: absolute;
  left: 19px;
  top: 79px;
  width: 52px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
}

.pot-rim-back {
  z-index: 1;
  border-top: 1px solid rgba(246,245,242,.34);
}

.pot-rim-front {
  z-index: 4;
  border-bottom: 1px solid rgba(246,245,242,.48);
}

.sprig {
  position: absolute;
  z-index: 2;
  width: 1px;
  transform-origin: bottom center;
  background: rgba(246,245,242,.34);
}

.sprig-one { left:35px; top:29px; height:58px; transform:rotate(-12deg); }
.sprig-two { left:46px; top:8px; height:80px; transform:rotate(-2deg); }
.sprig-three { left:56px; top:38px; height:50px; transform:rotate(9deg); }
.sprig-four { left:65px; top:20px; height:68px; transform:rotate(14deg); }

.sprig i {
  position: absolute;
  width: 13px;
  height: 6px;
  border: 1px solid rgba(246,245,242,.3);
  border-radius: 100% 0 100% 0;
  background: var(--night);
}

.sprig i:nth-child(1) { left:-12px; top:16%; transform:rotate(16deg); }
.sprig i:nth-child(2) { left:0; top:35%; transform:scaleX(-1) rotate(16deg); }
.sprig i:nth-child(3) { left:-12px; top:56%; transform:rotate(11deg); }
.sprig i:nth-child(4) { left:0; top:75%; transform:scaleX(-1) rotate(11deg); }
.sprig i:nth-child(5) { left:-10px; top:3%; transform:rotate(19deg); }

.saucer {
  position:absolute;
  z-index:4;
  left:22px;
  bottom:0;
  width:46px;
  height:9px;
  border:1px solid rgba(246,245,242,.25);
  border-radius:50%;
  background:var(--night);
}

.laptop {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: auto;
  bottom: calc(30% - 3px);
  width: min(29vw, 440px);
  min-width: 430px;
  transform: translateX(-50%);
}

.screen-shell {
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  padding: 11px 10px 9px 12px;
  border: 2px solid rgba(246,245,242,.43);
  border-radius: 15px 12px 7px 5px / 13px 15px 6px 8px;
  background: var(--night);
  box-shadow: 2px 2px 0 rgba(246,245,242,.08), 0 10px 30px rgba(0,0,0,.24);
  transform:rotate(.12deg);
}

.camera-dot { position:absolute; top:4px; left:50%; width:3px; height:3px; border-radius:50%; background:rgba(246,245,242,.4); }

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0e0f18;
  color: var(--ink);
  border-radius:2px 1px 3px 1px;
  box-shadow: inset 0 0 0 2px rgba(246,245,242,.035);
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(62,92,112,.4), transparent 68%);
  opacity: 0;
}

.scene.is-lit .screen::before { opacity: 1; transition: opacity 1.15s ease-out; }

.screen-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 7% 8%;
  opacity: 0;
  transform: translateY(7px);
}

.screen-nav {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(246,245,242,.14);
  color:rgba(246,245,242,.55);
  font-size:clamp(4px,.42vw,7px);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.screen-preview {
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  opacity:.38;
}

.screen-preview::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(to bottom,
    transparent 24%,
    rgba(14,15,24,.12) 42%,
    rgba(14,15,24,.72) 72%,
    #0e0f18 98%);
  pointer-events:none;
}

.screen-preview > p {
  margin:1rem 0 .7rem;
  font:400 clamp(24px,3.25vw,48px)/.94 var(--serif);
  letter-spacing:-.05em;
  opacity:.68;
}

.preview-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:7px;
  height:42%;
}

.preview-grid span {
  position:relative;
  border:1px solid rgba(246,245,242,.2);
  background:linear-gradient(145deg,rgba(82,124,153,.2),rgba(246,245,242,.025) 70%);
}

.preview-grid span::before {
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:10px;
  border-top:1px solid rgba(246,245,242,.38);
  box-shadow:0 4px 0 rgba(246,245,242,.16);
}

.preview-grid span::after {
  content:"";
  position:absolute;
  left:7px;
  top:7px;
  width:38%;
  border-top:2px solid rgba(82,124,153,.55);
}

.scene.is-lit .screen-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.05s .35s ease-out, transform 1.05s .35s ease-out;
}

label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(6px,.55vw,9px);
}

h1 { margin:0; font:400 clamp(42px,4.2vw,68px)/.76 var(--serif); letter-spacing:-.045em; }
.screen-content form {
  position:absolute;
  z-index:4;
  left:8%;
  bottom:9%;
  width:76%;
  margin:0;
  padding-top:7px;
  opacity:0;
  transform:translateY(5px);
}

.scene.is-lit .screen-content form {
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s .8s ease, transform .7s .8s ease;
}
label { display:block; margin-bottom:.55rem; color:rgba(246,245,242,.5); }
.code-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; border-bottom:0; }
input { min-width:0; height:24px; padding:0; border:0; border-bottom:1px solid rgba(246,245,242,.72); outline:0; background:transparent; color:var(--ink); font:13px/16px var(--sans); letter-spacing:.2em; }
.cursor { width:1px; height:13px; background:var(--ink); animation:blink 1s steps(1) infinite; }
button { min-height:24px; border:1px solid rgba(246,245,242,.5); border-radius:5px; padding:0 12px; background:rgba(246,245,242,.08); color:var(--ink); font:700 8px var(--sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
button:hover { border-color:rgba(246,245,242,.85); background:rgba(246,245,242,.15); transform:translateY(-1px); }
button span { color:#83aac4; }
button:focus-visible, a:focus-visible { outline:1px solid var(--warm); outline-offset:4px; }
.status { min-height:1em; margin:.45rem 0 0; color:#d3a9a2; font-size:8px; letter-spacing:.03em; }
.status.success { color:#e5c49e; }

.hinge { position:relative; z-index:5; width:79%; height:6px; margin:-2px auto 0; border:2px solid rgba(246,245,242,.4); border-radius:1px 2px 6px 4px; background:var(--night); transform:rotate(-.12deg); }
.base { position:relative; z-index:4; width:100%; height:24px; margin-top:-2px; border:2px solid rgba(246,245,242,.38); border-radius:2px 3px 7px 5px; background:rgba(246,245,242,.018); clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); transform:rotate(-.08deg); }
.base::before { content:""; position:absolute; left:11%; right:9%; top:1px; border-top:1px solid rgba(227,178,124,.2); transform:rotate(.2deg); }
.lip { position:relative; z-index:5; width:99%; height:6px; margin:-2px auto 0; border:2px solid rgba(246,245,242,.42); border-radius:2px 3px 50% 45%; background:var(--night); box-shadow:0 3px 7px rgba(0,0,0,.28); transform:translateY(1px) rotate(.06deg); }

.access-note { position:absolute; z-index:6; bottom:24px; left:50%; transform:translateX(-50%); margin:0; color:rgba(246,245,242,.38); text-transform:uppercase; letter-spacing:.14em; font-size:9px; opacity:0; transition:opacity .8s ease; }
.scene.is-lit .access-note { opacity:1; }
.access-note a { color:inherit; text-underline-offset:4px; }
.portal { position:absolute; z-index:50; inset:0; pointer-events:none; background:var(--night); opacity:0; }

.scene.is-entering .camera {
  transform: scale(6);
  transition: transform 1.5s cubic-bezier(.66,.02,.8,.42);
}
.scene.is-entering .page-identity { transform:translate(0,0); transition:transform .45s ease-in; }
.scene.is-entering .pendant { opacity:0; transition:opacity .45s ease; }
.scene.is-entering .screen { background:#3a302c; transition:background .8s ease; }
.scene.is-entering .screen-content { opacity:0; transition:opacity .4s ease; }
.scene.is-entering .portal { opacity:1; transition:opacity .65s .78s ease; }
.scene.is-entering .access-note { opacity:0; transition:opacity .2s ease; }

@keyframes swing {
  0% { transform:rotate(16deg); }
  18% { transform:rotate(-11deg); }
  36% { transform:rotate(7deg); }
  54% { transform:rotate(-4deg); }
  72% { transform:rotate(2deg); }
  88% { transform:rotate(-1deg); }
  100% { transform:rotate(0deg); }
}
@keyframes bulb-on { to { background:var(--warm); box-shadow:0 0 16px 6px rgba(227,178,124,.6); } }
@keyframes glow-in { to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes blink { 50% { opacity:0; } }
@keyframes identity-fade {
  0% { opacity:0; }
  30% { opacity:.18; }
  72% { opacity:.82; }
  100% { opacity:1; }
}
@keyframes steam-rise {
  0% { opacity:0; transform:translateY(4px) rotate(8deg); }
  35% { opacity:.85; }
  100% { opacity:0; transform:translateY(-10px) translateX(3px) rotate(-5deg); }
}

@media (max-width:700px) {
  .scene { min-height:560px; }
  .camera { transform-origin:50% 68%; }
  .laptop { width:88vw; min-width:0; top:auto; bottom:calc(25% - 3px); }
  .desk-scene { left:0; right:0; top:75%; }
  .mug-art { left:5%; transform:scale(.82); transform-origin:bottom left; }
  .paper-stack { left:25%; transform:scale(.78) rotate(-1.5deg); transform-origin:bottom left; }
  .plant-art { right:2%; transform:scale(.76); transform-origin:bottom right; }
  .screen-shell { width:88%; }
  .screen-content { padding:8% 10%; }
  .page-identity { left:6vw; top:4.5vh; }
  .scene.is-leaning .page-identity { transform:translate(4vw,5vh); }
  .scene.is-entering .page-identity { transform:translate(0,0); }
  .page-identity .name { font-size:clamp(34px,10vw,50px); }
  .page-identity .title { display:none; }
  .screen-content form { left:8%; width:84%; bottom:7%; }
  .access-note { width:100%; text-align:center; }
}

/* Definitive masthead: one static row from the first rendered frame. */
.page-identity {
  width:max-content;
  max-width:88vw;
}
.identity-name {
  position:static;
  display:flex;
  align-items:baseline;
  gap:.18em;
  width:max-content;
  height:auto;
  overflow:visible;
}
.first-name,
.last-name {
  position:static;
  display:inline-block;
  transform:none !important;
  animation:none !important;
}
.identity-title {
  transform:none !important;
  animation:none !important;
}

/* Definitive framing: lower resting composition, monitor-centered camera push. */
.illustration-stage {
  top:63%;
}
.camera {
  transform:scale(.84);
  transform-origin:50% 41%;
}
.scene.is-leaning .camera {
  transform:translateY(7.5vh) scale(1.58);
  transform-origin:50% 41%;
  transition:transform 3.9s cubic-bezier(.33,0,.2,1) 0s;
}

@media (max-width:700px) {
  .identity-name {
    gap:.14em;
    font-size:clamp(25px,7vw,38px) !important;
  }
  .illustration-stage { top:65%; }
  .scene.is-leaning .camera {
    transform:translateY(8vh) scale(1.35);
  }
}

@media (prefers-reduced-motion:reduce) {
  .pendant { animation-duration:.01ms; }
  .scene.is-lit .page-identity { animation-duration:.01ms; animation-delay:0s; }
  .scene.is-leaning .camera { transition-duration:.01ms; }
  .bulb.on,.glow.on { animation-duration:.01ms; }
}


/* Layered editorial scene: one shared camera, separate live and animated layers. */
.camera {
  transform:scale(.84);
  transform-origin:50% 58%;
}
.scene.is-leaning .camera {
  transform:scale(1);
  transition:transform 3.3s cubic-bezier(.19,.72,.25,1) .22s;
}
.scene.is-leaning .page-identity,
.scene.is-entering .page-identity { transform:none; }
.page-identity { display:block; left:5.5vw; top:6vh; }
.scene.is-lit .page-identity,
.scene.is-lit .illustration-stage {
  animation:shared-reveal 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

.illustration-stage {
  position:absolute;
  z-index:2;
  left:50%;
  top:53%;
  width:min(112vw,1900px);
  aspect-ratio:1550 / 1014;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 55%,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 55%,#000 78%,transparent 100%);
}
.editorial-scene { display:block; width:100%; height:100%; object-fit:contain; }

.monitor-ui {
  position:absolute;
  z-index:5;
  left:36%;
  top:23.1%;
  width:29.25%;
  height:26.7%;
  overflow:hidden;
  border-radius:2px;
  background:#0e0f18;
  box-shadow:inset 0 0 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(246,245,242,.035);
  pointer-events:auto;
}
.monitor-ui::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 55%,rgba(62,92,112,.4),transparent 68%);
  opacity:0;
  transition:opacity 1.15s ease-out;
}
.scene.is-lit .monitor-ui::before { opacity:1; }
.monitor-ui .screen-content { z-index:1; padding:6.5% 7.5%; }
.monitor-ui .screen-preview > p { margin:.72rem 0 .55rem; }
.monitor-ui .screen-content form { bottom:8%; }

.editorial-pendant {
  z-index:10;
  left:79%;
  top:-18vh;
  width:220px;
  height:calc(272px + 18vh);
  transform-origin:50% 0;
  animation:swing 2.2s ease-out forwards;
}
.editorial-pendant::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:50%;
  width:3px;
  height:calc(18vh + 3px);
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(227,178,124,.52),rgba(246,245,242,.3) 52%,rgba(227,178,124,.26));
  border-radius:2px;
}
.editorial-pendant img {
  position:absolute;
  top:18vh;
  left:0;
  display:block;
  width:100%;
  height:272px;
  object-fit:contain;
}
.editorial-pendant .bulb {
  top:69.5%;
  left:50%;
  width:28px;
  height:28px;
  background:rgba(227,178,124,.12);
}
.editorial-pendant .glow {
  top:calc(18vh + 210px);
  left:50%;
  width:500px;
  height:500px;
  background:radial-gradient(ellipse at 50% 8%,rgba(227,178,124,.34),rgba(227,178,124,.1) 34%,transparent 69%);
}

.coffee-steam {
  position:absolute;
  z-index:7;
  left:67.1%;
  top:43.5%;
  width:7%;
  height:23%;
  opacity:0;
}
.scene.is-lit .coffee-steam { opacity:1; transition:opacity .8s .35s ease; }
.steam-path {
  position:absolute;
  bottom:0;
  width:18%;
  height:58%;
  border-left:2px solid rgba(227,178,124,.7);
  border-radius:50% 42% 55% 35%;
  filter:drop-shadow(0 0 3px rgba(227,178,124,.2));
  opacity:0;
}
.steam-path-one { left:28%; }
.steam-path-two { left:48%; height:70%; }
.steam-path-three { left:67%; height:52%; }
.scene.is-lit .steam-path-one { animation:steam-drift 3.8s ease-in-out infinite; }
.scene.is-lit .steam-path-two { animation:steam-drift 4.4s .7s ease-in-out infinite; }
.scene.is-lit .steam-path-three { animation:steam-drift 4.1s 1.4s ease-in-out infinite; }

.access-note { display:block; }
.scene.is-entering .monitor-ui { background:#3a302c; transition:background .8s ease; }

@keyframes shared-reveal {
  0% { opacity:0; }
  34% { opacity:.22; }
  76% { opacity:.86; }
  100% { opacity:1; }
}
@keyframes steam-drift {
  0% { opacity:0; transform:translate(0,8px) scaleY(.82) rotate(5deg); }
  24% { opacity:.78; }
  72% { opacity:.46; }
  100% { opacity:0; transform:translate(5px,-28px) scaleY(1.12) rotate(-6deg); }
}

@media (max-width:700px) {
  .illustration-stage { width:112vw; top:57%; }
  .editorial-pendant { left:78%; width:145px; height:calc(180px + 18vh); }
  .editorial-pendant img { height:180px; }
  .editorial-pendant .glow { top:calc(18vh + 138px); width:330px; height:330px; }
  .monitor-ui .screen-content { padding:7% 8%; }
}

@media (prefers-reduced-motion:reduce) {
  .scene.is-lit .illustration-stage,
  .scene.is-lit .page-identity { animation-duration:.01ms; }
  .steam-path { animation:none !important; opacity:.55; }
}

/* Final transparency and single-bulb correction. */
.illustration-stage {
  -webkit-mask-image:none;
  mask-image:none;
}
.editorial-pendant .bulb { display:none; }
.editorial-pendant img {
  filter:brightness(.34) saturate(.12);
  transition:filter .55s ease;
}
.scene.is-lit .editorial-pendant img {
  filter:brightness(1.08) saturate(1) drop-shadow(0 5px 7px rgba(227,178,124,.2));
}

/* Refined cue sequence: bulb, glow, synchronized scene, and descending identity. */
.editorial-scene {
  filter:grayscale(1) brightness(1.55) contrast(1.04);
}

.page-identity {
  opacity:1;
  transform:translateY(-118vh);
  will-change:transform;
}
.scene.is-lit .page-identity {
  animation:identity-descend 1.55s linear forwards;
}
.scene.is-leaning .page-identity,
.scene.is-entering .page-identity { transform:translateY(0); }

.editorial-pendant::after {
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:calc(18vh + 188px);
  width:54px;
  height:34px;
  transform:translate(-50%,-50%) scale(.72);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,220,168,.9) 0%,rgba(227,178,124,.38) 46%,transparent 76%);
  filter:blur(1px);
  opacity:0;
  transition:opacity .16s ease-out,transform .22s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.scene.is-bulb-on .editorial-pendant::after {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.scene.is-lit .editorial-pendant img {
  filter:brightness(1.02) saturate(.78) drop-shadow(0 5px 7px rgba(227,178,124,.18));
}

@keyframes identity-descend {
  0% {
    transform:translateY(-118vh);
    animation-timing-function:cubic-bezier(.55,.04,.8,.38);
  }
  57% {
    transform:translateY(12px);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
  76% {
    transform:translateY(5px);
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  100% { transform:translateY(0); }
}

@media (max-width:700px) {
  .editorial-pendant::after { top:calc(18vh + 124px); width:40px; height:26px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-identity { transform:none; }
  .scene.is-lit .page-identity { animation:none; }
}

/* Restore the earlier identity fade and use illustrated steam paths. */
.page-identity {
  opacity:0;
  transform:none;
  will-change:opacity;
}
.scene.is-bulb-on .page-identity {
  animation:identity-fade 1.15s cubic-bezier(.22,1,.36,1) forwards;
}
.scene.is-lit .page-identity,
.scene.is-leaning .page-identity,
.scene.is-entering .page-identity {
  transform:none;
}

.coffee-steam svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.steam-ink {
  fill:none;
  stroke:#f6f5f2;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(227,178,124,.22));
}
.steam-ink-two { stroke-width:1.7; }
.steam-ink-three { stroke-width:1.4; }
.scene.is-lit .steam-ink-one { animation:illustrated-steam 4.15s ease-in-out infinite; }
.scene.is-lit .steam-ink-two { animation:illustrated-steam 4.75s .8s ease-in-out infinite; }
.scene.is-lit .steam-ink-three { animation:illustrated-steam 4.4s 1.55s ease-in-out infinite; }

/* Retire the earlier generic border-based steam marks. */
.steam-path { display:none !important; }

@keyframes illustrated-steam {
  0% { opacity:0; transform:translate(0,10px) scaleY(.9); }
  20% { opacity:.72; }
  62% { opacity:.52; transform:translate(2px,-5px) scaleY(1.03); }
  100% { opacity:0; transform:translate(-3px,-23px) scaleY(1.1); }
}

@media (prefers-reduced-motion:reduce) {
  .scene.is-bulb-on .page-identity { animation-duration:.01ms; }
  .steam-ink { animation:none !important; opacity:.48; }
}

/* Original load composition and approved illustrated steam asset. */
.illustration-stage {
  opacity:1;
  animation:none !important;
}
.page-identity {
  opacity:1;
  transform:none;
  animation:none !important;
}
.scene.is-bulb-on .page-identity,
.scene.is-lit .page-identity { animation:none !important; opacity:1; }

.coffee-steam img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform-origin:50% 100%;
  filter:grayscale(1) brightness(1.35) drop-shadow(0 0 3px rgba(227,178,124,.2));
}
.scene.is-lit .coffee-steam img {
  animation:illustrated-steam-mark 4.8s cubic-bezier(.37,0,.63,1) infinite;
}
.steam-ink { display:none !important; }

@keyframes illustrated-steam-mark {
  0% { opacity:0; transform:translate(0,10px) scale(.94,.88); clip-path:inset(72% 0 0 0); }
  22% { opacity:.72; clip-path:inset(28% 0 0 0); }
  48% { opacity:.62; transform:translate(2px,-2px) scale(1,1); clip-path:inset(0 0 0 0); }
  78% { opacity:.42; transform:translate(-2px,-12px) scale(1.02,1.05); }
  100% { opacity:0; transform:translate(3px,-28px) scale(1.03,1.1); clip-path:inset(0 0 8% 0); }
}

@media (prefers-reduced-motion:reduce) {
  .coffee-steam img { animation:none !important; opacity:.5; clip-path:none; }
}

/* Monitor-focused camera move and responsive identity reflow. */
.page-identity {
  z-index:20;
  left:5.5vw;
  top:6vh;
  width:min(58vw,760px);
  opacity:1;
  transform:none;
  pointer-events:none;
}
.identity-copy { transform-origin:top left; }
.identity-stacked {
  position:relative;
  opacity:1;
  transition:opacity .55s ease,transform .9s cubic-bezier(.22,1,.36,1);
}
.identity-inline {
  position:absolute;
  inset:0 auto auto 0;
  opacity:0;
  white-space:nowrap;
  clip-path:inset(0 100% 0 0);
  transform:translateY(5px);
  transition:opacity .5s .18s ease,clip-path .95s .12s cubic-bezier(.22,1,.36,1),transform .95s .12s cubic-bezier(.22,1,.36,1);
}
.identity-inline .name {
  font-size:clamp(30px,3.25vw,52px);
  letter-spacing:-.04em;
}
.scene.is-leaning .identity-stacked {
  opacity:0;
  transform:translateY(-6px) scale(.985);
}
.scene.is-leaning .identity-inline {
  opacity:1;
  clip-path:inset(0 0 0 0);
  transform:translateY(0);
}

.camera {
  transform:scale(.84);
  transform-origin:50% 37%;
}
.scene.is-leaning .camera {
  transform:translateY(13vh) scale(1.22);
  transform-origin:50% 37%;
  transition:transform 3.3s cubic-bezier(.19,.72,.25,1) .22s;
}
.scene.is-entering .camera {
  transform:translateY(13vh) scale(6);
  transform-origin:50% 37%;
  transition:transform 1.5s cubic-bezier(.66,.02,.8,.42);
}

@media (max-width:700px) {
  .page-identity { left:5vw; top:4vh; width:90vw; }
  .identity-stacked .name { font-size:clamp(34px,10vw,50px); }
  .identity-inline .name { font-size:clamp(26px,7vw,38px); }
  .identity-inline .title { display:block; }
  .scene.is-leaning .camera { transform:translateY(9vh) scale(1.16); }
  .scene.is-entering .camera { transform:translateY(9vh) scale(6); }
}

@media (prefers-reduced-motion:reduce) {
  .identity-stacked { display:none; }
  .identity-inline { opacity:1; clip-path:none; transform:none; }
}

/* Literal one-element identity reflow: right first, then straight up. */
.identity-stacked,
.identity-inline { display:none !important; }
.page-identity {
  --identity-right:300px;
  --identity-up:62px;
  width:min(78vw,920px);
  opacity:1;
  transform:none;
  animation:none !important;
}
.identity-name {
  position:relative;
  display:block;
  height:1.96em;
  margin:0 0 .4375em;
  overflow:visible;
}
.first-name,
.last-name {
  position:absolute;
  left:0;
  top:0;
  display:block;
  white-space:nowrap;
}
.last-name { top:.98em; will-change:transform; }
.identity-title { will-change:transform; }

.scene.is-leaning .last-name {
  animation:last-name-right-then-up 1.45s cubic-bezier(.22,1,.36,1) forwards;
}
.scene.is-leaning .identity-title {
  animation:title-rise-after-name .72s .92s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes last-name-right-then-up {
  0% { transform:translate(0,0); }
  46% { transform:translate(var(--identity-right),0); }
  58% { transform:translate(var(--identity-right),0); }
  100% { transform:translate(var(--identity-right),calc(-1 * var(--identity-up))); }
}
@keyframes title-rise-after-name {
  from { transform:translateY(0); }
  to { transform:translateY(calc(-1 * var(--identity-up))); }
}

@media (max-width:700px) {
  .page-identity { width:94vw; }
  .identity-name { font-size:clamp(28px,8vw,42px) !important; }
}

@media (prefers-reduced-motion:reduce) {
  .last-name { transform:translate(var(--identity-right),calc(-1 * var(--identity-up))); }
  .identity-title { transform:translateY(calc(-1 * var(--identity-up))); }
}

/* Smooth the L-shaped path: no hold at the corner. */
.scene.is-leaning .last-name {
  animation:last-name-smooth-l 1.45s linear forwards;
}
.scene.is-leaning .identity-title {
  animation:title-rise-after-name .72s .78s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes last-name-smooth-l {
  0% {
    transform:translate(0,0);
    animation-timing-function:cubic-bezier(.3,.02,.18,1);
  }
  52% {
    transform:translate(var(--identity-right),0);
    animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  100% {
    transform:translate(var(--identity-right),calc(-1 * var(--identity-up)));
  }
}

/* Keep the identity reflow and the illustrated camera move on one cue. */
.scene.is-leaning .camera {
  transition-delay:0s;
}
.scene.is-leaning .last-name {
  animation-duration:1.8s;
}
.scene.is-leaning .identity-title {
  animation-duration:.78s;
  animation-delay:1.02s;
}

/* Continuous two-leg movement: a clean turn, with no held frame at the corner. */
@keyframes last-name-smooth-l {
  0% { transform:translate(0,0); }
  58% { transform:translate(var(--identity-right),0); }
  100% { transform:translate(var(--identity-right),calc(-1 * var(--identity-up))); }
}

/* The illustrated steam stops at the cup rim instead of drawing over its face. */
.coffee-steam {
  clip-path:inset(0 0 34% 0);
}

/* Keep the secondary CTA attached to the viewport, not the zooming artwork. */
.access-note {
  position:fixed;
  z-index:45;
  left:50%;
  bottom:max(32px,calc(env(safe-area-inset-bottom) + 3vh));
  transform:translateX(-50%);
  width:max-content;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(25,26,40,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  color:rgba(246,245,242,.58);
  font-size:10px;
}

/* A quiet, perspective-flattened rug grounds the desk without competing with it. */
.desk-rug {
  position:absolute;
  z-index:0;
  left:50%;
  top:82%;
  width:72%;
  height:18%;
  transform:translateX(-50%) perspective(700px) rotateX(63deg);
  transform-origin:50% 50%;
  border:1.5px solid rgba(246,245,242,.24);
  border-radius:48% 52% 46% 54% / 18% 20% 24% 22%;
  background:
    repeating-linear-gradient(7deg,rgba(246,245,242,.035) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(96deg,rgba(246,245,242,.026) 0 1px,transparent 1px 18px),
    rgba(246,245,242,.018);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  opacity:.78;
}

.editorial-scene {
  position:relative;
  z-index:1;
}

/* Hand-drawn rug, lifted under the table so both legs visibly land on it. */
.rug-illustration {
  position:absolute;
  z-index:0;
  left:50%;
  top:76%;
  width:132%;
  height:31%;
  transform:translateX(-50%);
  overflow:visible;
  opacity:.9;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
}
.rug-outline,
.rug-detail {
  fill:rgba(246,245,242,.018);
  stroke:rgba(246,245,242,.34);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.rug-detail {
  fill:none;
  stroke:rgba(246,245,242,.09);
  stroke-width:1.4;
}
.rug-crosshatch {
  stroke:rgba(246,245,242,.055);
  stroke-dasharray:10 7 18 8;
}
.rug-outline-inner {
  stroke:rgba(246,245,242,.16);
  stroke-width:1.25;
}

/* Extend the illustrated legs into the rug to correct the table's proportions. */
.table-leg-extension {
  position:absolute;
  z-index:2;
  top:86.5%;
  width:5px;
  height:13.5%;
  border-left:2px solid rgba(246,245,242,.48);
  border-right:1px solid rgba(246,245,242,.18);
  filter:drop-shadow(1px 0 0 rgba(246,245,242,.12));
  opacity:.88;
}
.table-leg-extension-left { left:15.4%; transform:rotate(.25deg); }
.table-leg-extension-right { right:14.7%; transform:rotate(-.2deg); }

/* Live interface alignment for the approved four-leg illustrated scene. */
.monitor-ui {
  left:37.55%;
  top:16.95%;
  width:26.95%;
  height:23.65%;
}

/* Re-align the approved steam artwork with the revised cup and stop it at the rim. */
.coffee-steam {
  left:65.9%;
  top:35%;
  clip-path:inset(0 0 41% 0);
}
.coffee-steam .steam-stream {
  position:absolute;
  top:0;
  height:100%;
  object-fit:contain;
}
.coffee-steam .steam-stream-one {
  left:2%;
  width:92%;
}
.coffee-steam .steam-stream-two {
  left:-10%;
  top:5%;
  width:78%;
}
.coffee-steam .steam-stream-three {
  left:22%;
  top:2%;
  width:68%;
}
.scene.is-lit .coffee-steam .steam-stream-one {
  animation:illustrated-steam-mark 3.5s linear infinite;
}
.scene.is-lit .coffee-steam .steam-stream-two {
  animation:illustrated-steam-mark 3.9s .85s linear infinite;
}
.scene.is-lit .coffee-steam .steam-stream-three {
  animation:illustrated-steam-mark 3.7s 1.7s linear infinite;
}

/* Steam continuously rises and dissipates, without lingering in place. */
@keyframes illustrated-steam-mark {
  0% {
    opacity:0;
    transform:translate(0,10%) scale(.92,.86);
    clip-path:inset(58% 0 0 0);
  }
  14% {
    opacity:.68;
    clip-path:inset(24% 0 0 0);
  }
  52% {
    opacity:.44;
    transform:translate(3%,-10%) scale(1,1.02);
    clip-path:inset(0);
  }
  78% {
    opacity:.2;
    transform:translate(-3%,-21%) scale(1.03,1.08);
  }
  100% {
    opacity:0;
    transform:translate(4%,-34%) scale(1.06,1.14);
    clip-path:inset(0 0 5% 0);
  }
}

/* Tighten the bulb-to-scene sequence so the interface follows the glow promptly. */
.scene.is-lit .screen-content {
  transition-delay:.12s;
}
.scene.is-lit .screen-content form {
  transition-delay:.34s;
}

/* Final identity state is present from load and remains outside the camera move. */
.last-name {
  transform:translate(var(--identity-right),calc(-1 * var(--identity-up)));
  animation:none !important;
}
.identity-title {
  transform:translateY(calc(-1 * var(--identity-up)));
  animation:none !important;
}
.scene.is-leaning .last-name,
.scene.is-leaning .identity-title {
  animation:none !important;
}

/* Lower the resting environment, then push specifically toward the monitor. */
.illustration-stage {
  top:58%;
}
.camera {
  transform-origin:50% 39%;
}
.scene.is-leaning .camera {
  transform:translateY(6vh) scale(1.32);
  transform-origin:50% 39%;
  transition:transform 3s cubic-bezier(.19,.72,.25,1) 0s;
}

@media (max-width:700px) {
  .illustration-stage { top:61%; }
  .scene.is-leaning .camera {
    transform:translateY(7vh) scale(1.2);
  }
}

/* Atmospheric pendant light: diffuse falloff rather than a visible circle. */
.editorial-pendant .glow {
  width:680px;
  height:820px;
  border-radius:46% 54% 52% 48% / 34% 38% 62% 66%;
  background:radial-gradient(
    ellipse at 50% 4%,
    rgba(227,178,124,.30) 0%,
    rgba(227,178,124,.18) 18%,
    rgba(227,178,124,.085) 42%,
    rgba(227,178,124,.025) 67%,
    transparent 88%
  );
  filter:blur(30px);
}

.editorial-pendant .glow::after {
  content:"";
  position:absolute;
  inset:8% 17% 3%;
  border-radius:50% 44% 55% 47%;
  background:radial-gradient(ellipse at 54% 10%,rgba(227,178,124,.12),transparent 76%);
  filter:blur(24px);
  transform:translateX(-3%);
}

/* FINAL OVERRIDE: steam rises from the cup without any hard clipping edge. */
.coffee-steam {
  left:65.9%;
  top:25.5%;
  width:7%;
  height:23%;
  overflow:visible;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:none;
  mask-image:none;
}
.coffee-steam .steam-stream {
  top:auto;
  bottom:0;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.32) 12%,#000 28%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.32) 12%,#000 28%,#000 100%);
}
@keyframes illustrated-steam-mark {
  0% { opacity:0; transform:translate(0,10%) scale(.92,.86); filter:blur(0); }
  14% { opacity:.68; transform:translate(1%,-1%) scale(.96,.94); filter:blur(0); }
  52% { opacity:.44; transform:translate(3%,-14%) scale(1,1.02); filter:blur(.2px); }
  78% { opacity:.18; transform:translate(-3%,-29%) scale(1.03,1.08); filter:blur(.55px); }
  100% { opacity:0; transform:translate(4%,-46%) scale(1.06,1.14); filter:blur(1.15px); }
}

/* Position-only correction: preserve the approved steam animation and place its
   origin inside the coffee cup. No timing, masking, scale, or horizontal changes. */
.coffee-steam {
  top:40%;
}

/* Cup occlusion correction: return the steam to its approved position and let
   the cup hide only the portion below its rim. The soft top dissipation remains. */
.coffee-steam {
  top:35%;
  clip-path:inset(0 0 41% 0) !important;
  -webkit-clip-path:inset(0 0 41% 0) !important;
}

/* FINAL RIM TREATMENT: no clipping. Steam remains in its approved position,
   dissipates softly at the top, and fades behind the cup at the lower edge. */
.coffee-steam {
  top:35%;
  overflow:visible;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 47%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.25) 57%,transparent 63%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 47%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.25) 57%,transparent 63%,transparent 100%);
}

/* TRUE NO-CLIP STEAM: the PNG's visible artwork occupies ~12%–89% of its
   transparent canvas. Position that canvas so the visible base meets the cup
   rim naturally; do not clip or mask the parent at either edge. */
.coffee-steam {
  top:28%;
  overflow:visible;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Shorter steam, preserving the same cup-rim origin and all animation behavior. */
.coffee-steam {
  top:32.4%;
  height:18%;
}

/* Seat the shortened steam inside the cup's interior, rather than on its front rim. */
.coffee-steam {
  top:33.8%;
}

/* Correct cup/steam depth: a full-size, pixel-aligned foreground copy is shown
   only across the illustrated cup. This places the cup rim and front wall above
   the steam while leaving the steam itself completely unclipped. */
.cup-occluder {
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  clip-path:polygon(65.4% 47.2%,73.9% 47.2%,74.2% 49.2%,73.4% 55.8%,66.5% 55.8%,65.5% 49.2%);
  -webkit-clip-path:polygon(65.4% 47.2%,73.9% 47.2%,74.2% 49.2%,73.4% 55.8%,66.5% 55.8%,65.5% 49.2%);
}

/* Refine cup depth: preserve the open interior and liquid surface, while the
   curved front lip and cup body remain above the steam. */
.cup-occluder {
  clip-path:polygon(
    65.5% 48.4%,
    66.7% 49.1%,
    68.2% 49.7%,
    69.7% 50.0%,
    71.3% 49.7%,
    72.8% 49.1%,
    74.0% 48.4%,
    73.4% 55.8%,
    66.5% 55.8%
  );
  -webkit-clip-path:polygon(
    65.5% 48.4%,
    66.7% 49.1%,
    68.2% 49.7%,
    69.7% 50.0%,
    71.3% 49.7%,
    72.8% 49.1%,
    74.0% 48.4%,
    73.4% 55.8%,
    66.5% 55.8%
  );
}

/* Verified depth order: preserve the liquid opening above 49%, then use the
   original illustrated front lip/body as the foreground from that point down. */
.cup-occluder {
  z-index:20;
  clip-path:polygon(65.4% 49%,74.2% 49%,73.4% 55.9%,66.5% 55.9%);
  -webkit-clip-path:polygon(65.4% 49%,74.2% 49%,73.4% 55.9%,66.5% 55.9%);
}

/* Integrate the steam origin into the liquid: fade both ends of each moving
   stream. This removes the bright tail sitting on top of the cup interior. */
.coffee-steam .steam-stream {
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.28) 12%,
    #000 28%,
    #000 78%,
    rgba(0,0,0,.68) 86%,
    rgba(0,0,0,.18) 95%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.28) 12%,
    #000 28%,
    #000 78%,
    rgba(0,0,0,.68) 86%,
    rgba(0,0,0,.18) 95%,
    transparent 100%
  );
}

/* Match the lower fade to the artwork's real alpha bounds: visible pixels end
   near 89% of the PNG canvas, not at 100%. */
.coffee-steam .steam-stream {
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.28) 12%,
    #000 28%,
    #000 70%,
    rgba(0,0,0,.72) 76%,
    rgba(0,0,0,.28) 82%,
    transparent 89%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.28) 12%,
    #000 28%,
    #000 70%,
    rgba(0,0,0,.72) 76%,
    rgba(0,0,0,.28) 82%,
    transparent 89%,
    transparent 100%
  );
}

/* Refined neutral illustration trial: match the page field to the retained
   raster background while preserving its original tonal drawing structure. */
:root { --night:#303346; }

/* Preserve the approved engraved illustration while neutralizing amber accents. */
.editorial-pendant > img {
  filter: grayscale(1) saturate(0) brightness(.88) contrast(1.04);
}

/* Apply the neutralization after the animated steam layers are composited. */
.coffee-steam {
  filter: grayscale(1) saturate(0);
}
html,
body,
.scene {
  background-color:#303346;
}

/* Quality restoration: use the approved source raster without pixel rewriting. */
.editorial-scene,
.cup-occluder {
  filter: grayscale(1) saturate(0) contrast(1.025) brightness(.98);
}

/* Transparent environment layer, treated nondestructively like the pendant. */
.editorial-scene,
.cup-occluder {
  filter: grayscale(1) saturate(0) brightness(.88) contrast(1.04) !important;
}

/* Clean cartoon editorial direction. These assets were authored in the final
   cool-white palette, so preserve their native rendering without recoloring. */
.editorial-scene,
.cup-occluder,
.editorial-pendant > img,
.coffee-steam {
  filter:none !important;
}

/* Align the live interface to the blank display in the cartoon monitor. */
.monitor-ui {
  left:37.15%;
  top:17.75%;
  width:27.8%;
  height:26.75%;
  border-radius:5px;
}

/* The cartoon cup occupies the same visual region but has a slightly higher,
   narrower rim. Keep the steam origin inside it and use the duplicate scene
   only for the front wall of the cup. */
.coffee-steam {
  left:66.7%;
  top:34.2%;
  width:6.2%;
  height:17%;
}
.cup-occluder {
  clip-path:polygon(66.0% 49.0%,73.0% 49.0%,72.8% 54.9%,66.4% 54.9%);
  -webkit-clip-path:polygon(66.0% 49.0%,73.0% 49.0%,72.8% 54.9%,66.4% 54.9%);
}

/* Match the cleaner illustration language while retaining the existing swing,
   bulb-on cue, diffuse glow, camera push, and reduced-motion behavior. */
.editorial-pendant > img {
  filter:none !important;
}
.scene.is-lit .editorial-pendant > img {
  filter:drop-shadow(0 5px 9px rgba(227,178,124,.16)) !important;
}

/* Cartoon-direction polish: bridge the generated cord to the viewport cord and
   keep both sections in the same cool gray so the suspension reads as one line. */
.editorial-pendant::before {
  z-index:0;
  width:2px;
  height:calc(18vh + 78px);
  background:rgba(210,218,229,.72);
  box-shadow:0 0 1px rgba(246,248,252,.22);
}
.editorial-pendant > img {
  z-index:1;
  object-position:50% 0;
}

/* Secondary request action: a restrained rounded rectangle, not a capsule. */
.access-note {
  padding:11px 18px;
  border-radius:12px;
}

/* Make the access request read as an editorial text action rather than an
   underlined hyperlink, with restrained pointer and keyboard feedback. */
.access-note {
  border:1px solid transparent;
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}
.access-note a {
  color:rgba(246,245,242,.82);
  font-weight:700;
  text-decoration:none;
  transition:color .22s ease;
}
.access-note:has(a:hover) {
  background:rgba(46,48,67,.92);
  border-color:rgba(246,245,242,.18);
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.access-note a:hover {
  color:#fff;
}
.access-note:has(a:focus-visible) {
  border-color:rgba(246,245,242,.52);
  box-shadow:0 0 0 3px rgba(246,245,242,.12);
}
.access-note a:focus-visible {
  color:#fff;
  outline:none;
}

/* Correct the cartoon pendant's light source. The warm activation now sits
   directly over the illustrated bulb instead of forming a second orb below it. */
.editorial-pendant::after {
  top:calc(18vh + 159px);
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(
    circle at 44% 38%,
    #fff4dc 0%,
    #f2cf9e 38%,
    #e3b27c 72%,
    rgba(227,178,124,.72) 100%
  );
  filter:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.82);
  transition:opacity .18s ease-out,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.scene.is-bulb-on .editorial-pendant::after {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  box-shadow:
    0 0 8px 2px rgba(227,178,124,.38),
    0 0 19px 6px rgba(227,178,124,.13);
}

/* The broad illumination shares the bulb's origin and remains diffuse enough
   to read as light falling into the room, never as another visible object. */
.editorial-pendant .glow {
  top:calc(18vh + 167px);
  width:680px;
  height:820px;
  background:radial-gradient(
    ellipse at 50% 16%,
    rgba(227,178,124,.24) 0%,
    rgba(227,178,124,.13) 22%,
    rgba(227,178,124,.055) 48%,
    rgba(227,178,124,.018) 70%,
    transparent 88%
  );
  filter:blur(32px);
}

/* Use a true illustrated on-state for the complete glass bulb. This replaces
   the CSS circle overlay with a pixel-aligned crossfade between two otherwise
   identical pendant assets. */
.editorial-pendant::after {
  display:none !important;
}
.editorial-pendant .pendant-off,
.editorial-pendant .pendant-on {
  transition:opacity .24s ease-out,filter .35s ease;
}
.editorial-pendant .pendant-off {
  opacity:1;
}
.editorial-pendant .pendant-on {
  opacity:0;
}
.scene.is-bulb-on .editorial-pendant .pendant-off {
  opacity:0;
}
.scene.is-bulb-on .editorial-pendant .pendant-on {
  opacity:1;
}

/* Center the functional pendant over the monitor and workspace. */
.editorial-pendant {
  left:43.75%;
}

/* Keep the centered pendant functionally above the workspace rather than
   hanging in front of the monitor. The cord still reaches the viewport edge. */
.editorial-pendant > img {
  top:calc(18vh - 95px);
}
.editorial-pendant::before {
  height:calc(18vh - 17px);
}
.editorial-pendant .glow {
  top:calc(18vh + 72px);
}

/* Optical alignment for the stacked nameplate: the W's diagonal begins slightly
   left of the J's visible serif when both elements share the same CSS edge. */
.identity-name .last-name {
  left:-.015em;
}