*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--cream:#f0ebe0;--gold:#c9a84c;--dark:#09080a;--muted:#6b5e4a}
html,body{width:100%;height:100%;overflow:hidden;background:#0d1a1e}
body{font-family:'Cormorant Garamond',Georgia,serif;cursor:crosshair}

/* ══════════════════════ INTRO ══════════════════════ */
#intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1.4s ease;overflow:hidden}
#intro.out{opacity:0;pointer-events:none}
#intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
#intro-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.65) 50%,rgba(0,0,0,.82) 100%)}
#intro-overlay::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.45) 100%)}
#intro>*:not(#intro-video):not(#intro-overlay){position:relative;z-index:2}
#i-eye{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.65rem;letter-spacing:.55em;color:var(--gold);text-transform:uppercase;margin-bottom:2.2rem;opacity:0}
#i-name{font-family:'Big Shoulders Display',sans-serif;font-size:clamp(5rem,15vw,13rem);font-weight:900;color:var(--cream);letter-spacing:.28em;text-transform:uppercase;line-height:.88;text-shadow:0 0 80px rgba(0,0,0,.9),0 2px 40px rgba(0,0,0,.7);opacity:0;transform-origin:center;position:relative;z-index:2;will-change:transform,opacity}
#i-sub{font-style:italic;color:rgba(240,235,224,.7);font-size:clamp(.85rem,1.4vw,1.05rem);letter-spacing:.14em;margin-top:2rem;text-shadow:0 1px 12px rgba(0,0,0,.8);opacity:0}
#scroll-hint{margin-top:3.8rem;text-align:center;opacity:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:revealFade 1s cubic-bezier(.22,1,.36,1) 1.5s forwards;}
#scroll-hint-text{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(201,168,76,.7)}
#scroll-arrow{font-size:1.1rem;color:rgba(201,168,76,.7);animation:scrollBounce 1.4s ease-in-out 2.5s infinite}
#intro.playing #scroll-hint{animation:revealFade 1s cubic-bezier(.22,1,.36,1) 1.2s forwards}
@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* Door dot staggered vertical entry */
.door-group{opacity:0;transform:translateY(20px);transition:opacity .5s ease, transform .5s ease; pointer-events:none;}
.door-group.entered{opacity:1;transform:translateY(0); pointer-events:all;}
@keyframes nameZoomIn{0%{opacity:0;transform:scale(.78)}20%{opacity:1}100%{opacity:1;transform:scale(1.15)}}
#origami-canvas{position:fixed;inset:0;z-index:65;pointer-events:none}
#intro.playing #i-eye{animation:revealFade 1.1s cubic-bezier(.22,1,.36,1) .2s forwards,floatY 5s ease-in-out 1.4s infinite}
#intro.playing #i-name{animation:nameZoomIn 5s cubic-bezier(.16,1,.3,1) 0s forwards}
#intro.playing #i-sub{animation:revealFade 1.1s cubic-bezier(.22,1,.36,1) .6s forwards,floatY 5s ease-in-out 2.1s infinite reverse}
@keyframes revealFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes btnGlow{0%,100%{border-color:rgba(201,168,76,.45);box-shadow:none;color:#f0ebe0}50%{border-color:rgba(201,168,76,.9);box-shadow:0 0 18px rgba(201,168,76,.35),0 0 40px rgba(201,168,76,.12);color:#c9a84c}}
@keyframes btnGlowHover{0%,100%{border-color:rgba(201,168,76,.7);box-shadow:0 0 12px rgba(201,168,76,.25)}50%{border-color:var(--gold);box-shadow:0 0 28px rgba(201,168,76,.5)}}

/* ══════════════════════ CURSOR ══════════════════════ */
#cur-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);position:fixed;transform:translate(-50%,-50%);left:-200px;top:-200px;pointer-events:none;z-index:99999;box-shadow:0 0 6px rgba(201,168,76,.8);}
#cur-ring{width:32px;height:32px;border-radius:50%;border:1px solid rgba(201,168,76,.6);position:fixed;transform:translate(-50%,-50%);left:-200px;top:-200px;pointer-events:none;z-index:99998;transition:width .22s,height .22s,border-color .22s}
#cur-ring.hover{width:56px;height:56px;border-color:var(--gold);box-shadow:0 0 10px rgba(201,168,76,.4)}

/* ══════════════════════ MAP SCREEN ══════════════════════ */
#map-screen{
  position:fixed;inset:0;z-index:20;
  background:#000;
  display:none;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .8s ease;
}
#map-screen.show{display:flex}
#map-screen.visible{opacity:1}

/* CRT scanlines */
#map-screen::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.13) 2px,rgba(0,0,0,.13) 4px);
}

/* Top HUD bar */
#map-title{
  position:fixed;top:0;left:0;right:0;z-index:35;
  background:rgba(0,0,0,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.6rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
}
#map-title-left{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:clamp(.75rem,1.6vw,1rem);font-weight:900;
  color:#fff;letter-spacing:.5em;text-transform:uppercase;
}
#map-title-left span{color:var(--gold)}
#map-title-center{
  font-family:'Josefin Sans',sans-serif;font-weight:100;
  font-size:.46rem;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
}
#map-title-right{
  font-family:'Josefin Sans',sans-serif;font-weight:100;
  font-size:.44rem;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(201,168,76,.55);
  animation:blinkPulse 1.4s ease-in-out infinite;
}
@keyframes blinkPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* Site plan container */
#site-plan{
  position:relative;
  width:min(98vw, calc(92vh * 1376/768));
  height:min(92vh, calc(98vw * 768/1376));
  margin-top:2.6rem;
  z-index:2;
}
#site-plan-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:fill;display:block;
}

/* SVG overlay — viewBox matches image 1376×768 */
#map-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
  z-index:5;
}

#map-instruction{
  position:absolute;
  top:0%;right:2%;
  z-index:40;
  pointer-events:none;
}
#map-instruction-text{
  font-family:'Josefin Sans',sans-serif;font-weight:200;
  font-size:clamp(.55rem,1vw,.82rem);
  letter-spacing:.35em;text-transform:uppercase;
  color:#c9a84c;
  text-shadow:0 0 14px rgba(201,168,76,.6);
  white-space:nowrap;
  opacity:0;
  animation:instrFade 1.5s ease forwards 1.2s;
}
@keyframes instrFade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.door-group{ cursor:none; pointer-events:all; }

/* Outer pulsing ring — always visible, dim */
.d-ring{
  fill:none;stroke-width:1.5;
  opacity:.5;
  animation:dotPulse 2s ease-in-out infinite;
  transition:filter .25s;
}
/* Spinning dashed ring */
.d-spin{
  fill:none;stroke-width:1;stroke-dasharray:5 4;
  opacity:.3;
  animation:ringRotate 7s linear infinite, dotPulse 2s ease-in-out infinite .4s;
  transform-box:fill-box;transform-origin:center;
}
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes dotPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* Center dot */
.d-dot{
  opacity:.8;
  animation:dotPulse 2s ease-in-out infinite .2s;
}

/* Hover — everything brightens, stop pulsing */
.door-group:hover .d-ring{
  opacity:1;animation:none;
  filter:drop-shadow(0 0 8px var(--c));
}
.door-group:hover .d-spin{ opacity:.7;animation:ringRotate 7s linear infinite; }
.door-group:hover .d-dot { opacity:1;animation:none; r:5; }

/* Leader line — hidden until hover */
.d-line{
  fill:none;stroke-width:1;
  opacity:0;
  transition:opacity .22s ease;
}
.door-group:hover .d-line{ opacity:.65; }

/* Room name — same color, hidden until hover */
.d-label{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .22s ease;
}
.door-group:hover .d-label{ opacity:1; }

/* Click-to-enter arc text */
.d-cte{
  opacity:0;
  transition:opacity .22s ease;
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
}
.door-group:hover .d-cte{ opacity:.8; }

/* Sub label */
.d-sub{
  font-family:'Josefin Sans',sans-serif;
  font-weight:100;
  letter-spacing:.35em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .22s ease;
}
.door-group:hover .d-sub{ opacity:1; }


/* Black overlay — fades in when any door is hovered */
#map-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  z-index:4;
}
#site-plan:has(.door-group:hover) #map-overlay{ opacity:1; }

/* Footstep */
.footstep{
  position:absolute;width:7px;height:12px;
  background:rgba(201,168,76,.7);border-radius:40% 40% 50% 50%;
  transform:translate(-50%,-50%);pointer-events:none;
  opacity:0;animation:stepFade 1.5s ease forwards;
}
@keyframes stepFade{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  15%{opacity:1}70%{opacity:.35}100%{opacity:0}
}





/* ══ MOONGI STUDIO logo on map ══ */
#map-logo{
  position:absolute;
  right:3%;bottom:6%;
  z-index:40;
  pointer-events:all;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
}
#map-logo-box{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:clamp(.9rem,2vw,1.6rem);
  font-weight:900;
  letter-spacing:.32em;
  text-transform:uppercase;
  border:1.5px solid #c9a84c;
  padding:.45rem 1.4rem;
  box-shadow:0 0 18px rgba(201,168,76,.3);
  white-space:nowrap;
  display:inline-block;
}
#map-logo-line{
  display:block;
  width:1px;
  height:40px;
  background:linear-gradient(to top,#c9a84c,rgba(201,168,76,.4));
  margin:0 auto;
}
#map-about-btn{
  display:block;
  font-family:'Josefin Sans',sans-serif;font-weight:700;
  font-size:clamp(.44rem,.85vw,.72rem);
  letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold);cursor:none;pointer-events:all;
  white-space:nowrap;
  text-align:center;
  margin-bottom:.3rem;
  animation:blinkPulse 2s ease-in-out infinite;
}
#map-about-btn:hover{color:#fff}

/* ══════════════════════ ROOM SCREEN ══════════════════════ */
#room-screen{
  position:fixed;inset:0;z-index:10;
  display:none;
  opacity:0;
  transition:opacity .9s ease;
}
#room-screen.show{display:block}
#room-screen.visible{opacity:1}

#room-bg{
  position:absolute;inset:0;
  overflow:hidden;
  pointer-events:none;
}
#room-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
}
#room-bg::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 42%,transparent 34%,rgba(4,12,16,.38) 100%);
}

/* Hotspot layer */
#hl{position:absolute;pointer-events:none;z-index:5}
.h{position:absolute;cursor:none;pointer-events:all}
.h-border{display:none}
.h-play{display:none}

/* Room name badge top-left */
#room-name-badge{
  position:fixed;top:1.6rem;left:1.8rem;z-index:30;
  font-family:'Josefin Sans',sans-serif;font-weight:100;
  font-size:.54rem;letter-spacing:.44em;text-transform:uppercase;
  color:rgba(240,235,224,.5);pointer-events:none;
}

/* Map button — bottom left */
#map-btn{
  position:fixed;bottom:1.8rem;left:1.8rem;z-index:30;
  font-family:'Josefin Sans',sans-serif;font-weight:300;
  font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(201,168,76,.85);
  background:rgba(0,0,0,.75);
  border:1px solid rgba(201,168,76,.5);
  padding:.75rem 1.8rem;
  cursor:none;
  transition:color .2s,border-color .2s,box-shadow .2s;
  display:none;
}
#map-btn:hover{color:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(201,168,76,.35)}

/* About Moongi */
#about-label{
  position:fixed;left:62%;top:82%;
  transform:translateX(-50%);z-index:30;
  font-family:'Big Shoulders Display',sans-serif;
  font-size:clamp(1.2rem,2.5vw,2.2rem);font-weight:900;
  color:#000;letter-spacing:.18em;text-transform:uppercase;
  background:#c9a84c;
  border:2px solid #c9a84c;
  padding:.4rem 1.2rem;cursor:none;white-space:nowrap;
  display:none;transition:background .3s,border-color .3s,color .3s;
  user-select:none;pointer-events:all;
  box-shadow:0 0 18px rgba(201,168,76,.45);
}
#about-label:hover{background:#e8c060;border-color:#e8c060;box-shadow:0 0 28px rgba(201,168,76,.7)}

/* Hover overlay */
#hover-overlay{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.92);
  z-index:40;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
  background:rgba(0,0,0,.82);border:1px solid #c9a84c;
  box-shadow:0 0 0 1px rgba(201,168,76,.2),0 8px 40px rgba(0,0,0,.7);
  padding:2rem 3rem;min-width:280px;backdrop-filter:blur(6px);
}
#hover-overlay.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#hover-overlay::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#c9a84c,transparent)}
#ho-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(.8rem,1.5vw,1.2rem);
  font-weight:300;color:var(--cream);
  letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:.6rem;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  border-right:2px solid var(--cream);
  animation:none;
}
@keyframes hoTypeAnim{
  from{width:0}
  to{width:100%}
}
@keyframes hoCaretAnim{
  0%,100%{border-color:transparent}
  50%{border-color:var(--cream)}
}
#ho-sub{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:#8ecece;font-size:.82rem;letter-spacing:.1em;margin-bottom:1.5rem;opacity:.85}
#ho-play{display:inline-block;width:0;height:0;border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:30px solid #c9a84c;filter:drop-shadow(0 0 8px rgba(201,168,76,.9));margin-left:6px}

/* Tutorial panel */
#tutorial{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%) translateY(110%);
  z-index:50;
  background:rgba(0,0,0,.88);
  border:1px solid rgba(201,168,76,.4);
  border-bottom:none;
  pointer-events:all;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  width:340px;
  /* Half-dome: round the top two corners */
  border-radius:50% 50% 0 0 / 28px 28px 0 0;
  animation:tutPulse 3s ease-in-out infinite;
  padding-top:.5rem;
}
#tutorial.on{transform:translateX(-50%) translateY(0)}
@keyframes tutPulse{
  0%,100%{box-shadow:0 0 8px rgba(201,168,76,.25)}
  50%    {box-shadow:0 0 22px rgba(201,168,76,.6),0 0 40px rgba(201,168,76,.2)}
}
#tut-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem 1.1rem 1.8rem;cursor:none;border-bottom:1px solid rgba(201,168,76,.15)}
#tut-title{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;animation:textGlow 3s ease-in-out infinite}
@keyframes textGlow{0%,100%{text-shadow:0 0 6px rgba(201,168,76,.6)}50%{text-shadow:0 0 14px rgba(201,168,76,1),0 0 28px rgba(201,168,76,.5)}}
#tut-arrow{font-size:.9rem;color:rgba(201,168,76,.7);transition:transform .35s ease;flex-shrink:0;line-height:1}
#tutorial.collapsed #tut-arrow{transform:rotate(180deg)}
#tut-body{overflow:hidden;max-height:300px;transition:max-height .45s cubic-bezier(.22,1,.36,1),padding .35s;padding:1.2rem 1.4rem 1.4rem 1.8rem}
#tutorial.collapsed #tut-body{max-height:0;padding-top:0;padding-bottom:0}
#tut-body ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
#tut-body li{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(240,235,224,.78);display:flex;align-items:flex-start;gap:.7rem;line-height:1.75}
#tut-body li .icon{color:#c9a84c;flex-shrink:0;font-size:.7rem;margin-top:.06rem}

/* ══════════════════════ VIDEO MODAL ══════════════════════ */
#modal-bg{position:fixed;inset:0;z-index:100;background:rgba(4,10,13,.9);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .4s ease}
#modal-bg.open{opacity:1;pointer-events:all}
#modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.93);z-index:101;width:min(92vw,1060px);background:#07100f;border:1px solid rgba(90,160,160,.18);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .42s cubic-bezier(.22,1,.36,1)}
#modal.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}
#modal-head{padding:1.2rem 1.7rem .85rem;border-bottom:1px solid rgba(90,160,160,.12);display:flex;align-items:center;gap:1rem;flex-shrink:0}
#modal-titles{flex:1;min-width:0}
#modal-title{font-size:clamp(.88rem,2vw,1.5rem);font-weight:300;color:var(--cream);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modal-sub{font-style:italic;color:#7ecece;font-size:.76rem;margin-top:.18rem;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modal-controls{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
#nav-counter{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.49rem;letter-spacing:.3em;color:rgba(200,220,220,.36)}
.nav-btn,#modal-close{background:none;border:1px solid rgba(90,160,160,.28);color:rgba(200,220,220,.62);cursor:none;font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.53rem;letter-spacing:.35em;text-transform:uppercase;padding:.48rem .9rem;transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.nav-btn:hover,#modal-close:hover{color:var(--cream);border-color:#7ecece;background:rgba(90,160,160,.07)}
#modal-media{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#030b0a;overflow:hidden}
#modal-media iframe,#modal-media video{width:100%;height:100%;border:none;object-fit:contain}
#modal-ph{text-align:center;color:var(--muted);padding:2.5rem;width:100%}
.ph-icon{font-size:2.8rem;opacity:.13;display:block;margin-bottom:.9rem}
.ph-msg{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.53rem;letter-spacing:.36em;text-transform:uppercase;line-height:2.4}
.ph-msg code{display:block;color:rgba(90,160,160,.38);font-family:monospace;font-size:.65rem;margin-top:.7rem}
#esc{position:fixed;top:1.6rem;right:2rem;z-index:210;font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .5s}
#esc.on{opacity:1}

/* ══════════════════════ ABOUT PANEL ══════════════════════ */
#about-panel{position:fixed;inset:0;z-index:150;background:#000;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .75s cubic-bezier(.22,1,.36,1);overflow-y:auto}
#about-panel.open{transform:translateY(0)}
#about-inner{width:min(90vw,720px);padding:4rem 0;}
#about-photo{width:260px;flex-shrink:0;aspect-ratio:3/4;object-fit:cover;border:1px solid rgba(201,168,76,.35);box-shadow:0 0 0 1px rgba(201,168,76,.12),0 8px 40px rgba(0,0,0,.6);background:linear-gradient(145deg,#1a2a2a,#0a1515);display:flex;align-items:center;justify-content:center;color:rgba(201,168,76,.3);font-family:'Josefin Sans',sans-serif;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase}
#about-text{flex:1;min-width:0}
#about-eyebrow{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.58rem;letter-spacing:.55em;text-transform:uppercase;color:#c9a84c;margin-bottom:1.4rem}
#about-name{font-family:'Big Shoulders Display',sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;color:#f0ebe0;letter-spacing:.12em;text-transform:uppercase;line-height:.9;margin-bottom:1.6rem}
#about-role{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.05rem;color:#8ecece;letter-spacing:.08em;margin-bottom:2rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(201,168,76,.18)}
#about-bio{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.05rem;font-weight:300;color:rgba(240,235,224,.78);line-height:1.85;letter-spacing:.02em}
#about-bio p+p{margin-top:1rem}
#about-tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem}
#about-tags span{font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.5rem;letter-spacing:.38em;text-transform:uppercase;color:rgba(201,168,76,.75);border:1px solid rgba(201,168,76,.28);padding:.3rem .8rem}
#about-close{position:fixed;top:1.8rem;right:2rem;background:none;border:1px solid rgba(201,168,76,.35);color:rgba(240,235,224,.6);cursor:none;font-family:'Josefin Sans',sans-serif;font-weight:100;font-size:.54rem;letter-spacing:.42em;text-transform:uppercase;padding:.6rem 1.2rem;transition:color .2s,border-color .2s;z-index:151;display:none}
#about-close.open{display:block}
#about-close:hover{color:#f0ebe0;border-color:#c9a84c}