@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --ink:#29292d;
  --muted:#77787e;
  --line:#dddddf;
  --sans:"Montserrat",Arial,sans-serif;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

body{
  color:var(--ink);
  font-family:var(--sans);
  background-image:url("https://file.garden/aiG95gHjr0MfBA8O/a%20little%20archive%20of%20wishes(5).png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.about-page{
  position:relative;
  width:100vw;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  opacity:0;
  animation:pageFadeIn .65s ease forwards;
}

@keyframes pageFadeIn{to{opacity:1}}

.back-link{
  position:absolute;
  top:20px;
  left:24px;
  z-index:20;
  color:#929399;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.48rem;
}

.page-composition{
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  height:500px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
}

/* NAV */
.section-nav{
  position:absolute;
  z-index:20;
  left:0;
  top:0;
  width:560px;
  height:40px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.section-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  user-select:none;
  min-height:36px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#55565b;
  font-family:var(--sans);
  font-size:.55rem;
  font-weight:500;
  cursor:pointer;
  transition:.18s ease;
  backdrop-filter:blur(4px);
}

.section-link:hover{
  background:#29292d;
  border-color:#29292d;
  color:#fff;
}

/* ONE STATIC SHELL */
.views-shell{
  position:absolute;
  left:0;
  top:52px;
  width:560px;
  height:448px;
}

/* ABOUT */
.about-layout{
  position:absolute;
  left:0;
  top:0;
  width:560px;
  height:360px;
}

.about-art{
  position:absolute;
  z-index:1;
  left:-8%;
  top:52%;
  width:96%;
  height:118%;
  transform:translateY(-50%);
  object-fit:contain;
  object-position:left center;
  pointer-events:none;
  user-select:none;
}

.info-card{
  position:absolute;
  z-index:4;
  right:0;
  top:0;
  width:56%;
  height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 34px rgba(22,22,26,.055);
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.profile-block{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:8px 11px 7px;
  border-bottom:1px solid var(--line);
}

.profile-square{
  width:42px;
  height:42px;
  border-radius:5px;
  background:#29292b;
}

.profile-details{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  color:#66676c;
  font-size:.62rem;
  line-height:1.28;
}

.profile-details span{white-space:nowrap}
.profile-details b{color:#343439;font-weight:600}

.about-copy{
  min-height:0;
  overflow:hidden;
  padding:8px 11px 7px;
  display:grid;
  grid-template-rows:176px 176px;
  gap:7px;
  border-bottom:1px solid var(--line);
}

.about-tabs{
  display:flex;
  gap:5px;
  flex-wrap:nowrap;
}

.about-tab{
  border:1px solid #d9d9dc;
  border-radius:999px;
  background:#fff;
  color:#77787d;
  padding:6px 10px;
  font-family:var(--sans);
  font-size:.48rem;
  font-weight:500;
  cursor:pointer;
}

.about-tab.active{
  background:#29292d;
  border-color:#29292d;
  color:#fff;
}

.about-panels{
  position:relative;
  min-height:0;
  overflow:hidden;
}

.about-panel{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:7px;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.about-panel.active{
  opacity:1;
  visibility:visible;
}

.about-panel::-webkit-scrollbar{width:4px}
.about-panel::-webkit-scrollbar-track{background:transparent}
.about-panel::-webkit-scrollbar-thumb{background:#c7c7cb;border-radius:999px}

.about-panel p{
  margin:0 0 7px;
  color:#505157;
  font-size:.76rem;
  font-weight:300;
  line-height:1.42;
}

.about-panel strong{color:#27282d;font-weight:600}
.about-panel em{color:#34353a;font-style:italic}
.panel-title{font-weight:500!important;color:#2f3035!important}

.likes-groups{display:grid;gap:12px;padding-bottom:4px}
.likes-group{padding-top:8px;border-top:1px solid #ececef}
.likes-group:first-child{padding-top:0;border-top:0}
.likes-label{
  display:block;
  margin-bottom:5px;
  color:#96979c;
  font-size:.43rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.likes-group p{margin:0}
.artists-prose{line-height:1.55!important}

.bottom-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:7px 10px;
}

.music-widget{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:7px;
  align-items:center;
}

.record-wrap{
  position:relative;
  width:36px;
  height:36px;
  overflow:hidden;
  border-radius:50%;
  background:#29292b;
}

.record-cover{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(1) contrast(1.04);
  animation:recordSpin 9s linear infinite;
}

.record-hole{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
}

@keyframes recordSpin{to{transform:rotate(360deg)}}

.music-label{
  display:block;
  margin-bottom:2px;
  color:#9a9ba0;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.42rem;
}

.music-info strong{
  display:block;
  font-size:.64rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-info>span:last-child{
  display:block;
  margin-top:2px;
  color:#77787d;
  font-size:.46rem;
}

.lastfm-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.lastfm-cta span{color:#77787d;font-size:.44rem}
.lastfm-cta a{
  min-height:27px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d7d7da;
  border-radius:999px;
  color:#4f5055;
  text-decoration:none;
  font-size:.42rem;
  font-weight:600;
}

.social-card{
  position:absolute;
  z-index:6;
  left:0;
  bottom:0;
  width:560px;
  height:66px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 34px rgba(22,22,26,.035);
}

.social-card a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  color:#55565b;
  text-decoration:none;
  font-size:.55rem;
  font-weight:500;
}

/* RULES — WHITE BLOCK IS BACK */
.rules-card{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(221,221,223,.92);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(22,22,26,.045);
  backdrop-filter:blur(3px);

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
  justify-items:center;
  padding:32px 34px;
}

.photo-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  background:linear-gradient(135deg,#ececef,#d5d5d8);
  color:#96979b;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.46rem;
}

.rules-left{
  width:100%;
  max-width:300px;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.rules-top-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.rule-mini,
.rule-large{
  color:#505157;
  font-family:var(--sans);
}

.rule-kicker{
  display:block;
  margin-bottom:7px;
  color:#77787d;
  font-family:var(--sans);
  font-size:.60rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
}

.rule-mini{
  min-width:0;
  height:126px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 7px 2px 0;
  text-align:left;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.rule-mini p,
.rule-large p{
  margin:0;
  font-family:var(--sans);
  font-size:.70rem;
  font-weight:300;
  line-height:1.46;
}

.rules-main-photo{
  width:100%;
  height:214px;
  border-radius:26px;
  overflow:hidden;
}

.byf-block{
  width:100%;
  max-width:180px;
  min-width:0;
  height:100%;
  max-height:320px;
  align-self:center;
  justify-self:center;
  padding-left:22px;
  border-left:1px solid #ececef;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rule-scroll{
  min-height:0;
  max-height:286px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:8px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.rule-scroll p{
  margin:0 0 13px;
}

.rule-scroll p:last-child{
  margin-bottom:0;
}

.rule-mini::-webkit-scrollbar,
.rule-scroll::-webkit-scrollbar{
  width:4px;
}

.rule-mini::-webkit-scrollbar-track,
.rule-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.rule-mini::-webkit-scrollbar-thumb,
.rule-scroll::-webkit-scrollbar-thumb{
  background:#c7c7cb;
  border-radius:999px;
}


/* =========================================================
   UTTS — TAROT ARCHIVE
   ========================================================= */
.utts-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(221,221,223,.92);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(22,22,26,.045);
  backdrop-filter:blur(3px);
}

.utts-stage{
  position:relative;
  width:100%;
  height:100%;
}

/* left name archive */
.utts-list-card{
  position:absolute;
  z-index:5;
  left:116px;
  top:42px;
  width:112px;
  height:350px;
  padding:12px 9px 10px;
  border:1px solid #e1e1e3;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 24px rgba(22,22,26,.025);
  transition:left .56s cubic-bezier(.22,.78,.25,1);
}

.utts-list-title{
  display:block;
  margin:0 3px 9px;
  color:#77787d;
  font-size:.54rem;
  font-weight:600;
  text-align:center;
}

.utts-list{
  height:306px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.utts-list::-webkit-scrollbar{width:4px}
.utts-list::-webkit-scrollbar-track{background:transparent}
.utts-list::-webkit-scrollbar-thumb{background:#c7c7cb;border-radius:999px}

.utt-name{
  flex:0 0 31px;
  width:100%;
  border:1px solid #dedee1;
  border-radius:999px;
  background:#fff;
  color:#66676c;
  font-family:var(--sans);
  font-size:.53rem;
  font-weight:500;
  cursor:pointer;
  transition:.18s ease;
}

.utt-name:hover,
.utt-name.active{
  border-color:#29292d;
  background:#29292d;
  color:#fff;
}

/* tall tarot card */
.tarot-card{
  position:absolute;
  z-index:6;
  left:250px;
  top:34px;
  width:166px;
  height:374px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-family:var(--sans);
  cursor:pointer;
  transition:left .56s cubic-bezier(.22,.78,.25,1), transform .22s ease;
}

.tarot-card:hover{transform:translateY(-3px)}

.tarot-frame{
  width:166px;
  height:342px;
  padding:10px;
  border:1px solid #d9d9dc;
  border-radius:22px;
  background:#fff;
  box-shadow:0 15px 34px rgba(22,22,26,.065);
}

.tarot-topline,
.tarot-bottomline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

.tarot-topline{
  height:20px;
  color:#8d8e93;
  font-size:.39rem;
  font-weight:600;
  letter-spacing:.08em;
}

.tarot-topline span:last-child{
  max-width:105px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tarot-photo{
  position:relative;
  width:100%;
  height:262px;
  overflow:hidden;
  border-radius:14px;
  background:linear-gradient(155deg,#efeff1,#d8d8db);
  background-size:cover;
  background-position:center;
}

.tarot-photo-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#999aa0;
  font-size:.40rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tarot-photo.has-image .tarot-photo-placeholder{display:none}

.tarot-bottomline{
  height:40px;
  align-items:flex-end;
}

.tarot-bottomline strong{
  color:#2f3035;
  font-size:.68rem;
  font-weight:600;
}

.tarot-bottomline span{
  color:#96979c;
  font-size:.39rem;
  font-weight:500;
  letter-spacing:.06em;
}

.tarot-hint{
  display:block;
  margin-top:8px;
  color:#999aa0;
  font-size:.42rem;
  font-weight:400;
  text-align:center;
}

/* hidden behind the card until reveal */
.utt-details{
  position:absolute;
  z-index:3;
  left:252px;
  top:48px;
  width:230px;
  height:318px;
  overflow:hidden;
  border:1px solid #dddddf;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(22,22,26,.045);
  opacity:0;
  transform:translateX(-34px) scale(.985);
  transform-origin:left center;
  pointer-events:none;
  transition:left .56s cubic-bezier(.22,.78,.25,1), opacity .30s ease, transform .56s cubic-bezier(.22,.78,.25,1);
}

.utt-details-inner{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:17px 16px 15px 19px;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.utt-details-inner::-webkit-scrollbar{width:4px}
.utt-details-inner::-webkit-scrollbar-track{background:transparent}
.utt-details-inner::-webkit-scrollbar-thumb{background:#c7c7cb;border-radius:999px}

.utt-detail-heading{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding-bottom:11px;
  border-bottom:1px solid #ececef;
}

.utt-detail-roman{
  color:#aaaab0;
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.08em;
}

.utt-detail-heading h2{
  margin:0;
  color:#2f3035;
  font-size:.86rem;
  font-weight:600;
  line-height:1.1;
}

.utt-detail-heading div>span{
  display:block;
  margin-top:3px;
  color:#96979c;
  font-size:.40rem;
  letter-spacing:.07em;
}

.utt-counter{
  padding:13px 0 12px;
  border-bottom:1px solid #ececef;
}

.utt-mini-label,
.utt-facts span,
.utt-note>span{
  display:block;
  color:#9a9ba0;
  font-size:.39rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.utt-counter strong{
  display:block;
  margin:4px 0 2px;
  color:#303136;
  font-size:1.02rem;
  font-weight:500;
  line-height:1.1;
}

.utt-counter>span:last-child{
  color:#77787d;
  font-size:.47rem;
}

.utt-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
  padding:12px 0;
  border-bottom:1px solid #ececef;
}

.utt-facts strong{
  display:block;
  margin-top:3px;
  color:#505157;
  font-size:.51rem;
  font-weight:500;
  line-height:1.3;
}

.utt-note{padding:12px 0 8px}

.utt-note p{
  margin:6px 0 0;
  color:#56575c;
  font-size:.57rem;
  font-weight:300;
  line-height:1.45;
}

.utt-detail-footer{
  display:block;
  margin-top:10px;
  color:#a0a1a5;
  font-size:.42rem;
  font-style:italic;
  text-align:right;
}

/* reveal animation: list + tarot slide left and the panel escapes from behind the card */
.utts-stage.is-revealed .utts-list-card{left:20px}
.utts-stage.is-revealed .tarot-card{left:144px}
.utts-stage.is-revealed .utt-details{
  left:302px;
  opacity:1;
  transform:none;
  pointer-events:auto;
}




/* =========================================================
   CONCERTS — POLAROID WALL
   ========================================================= */
.polaroid-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(221,221,223,.92);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(22,22,26,.045);
  backdrop-filter:blur(3px);
}

.polaroid-header{
  position:absolute;
  left:28px;
  right:28px;
  top:22px;
  height:48px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  z-index:3;
}

.polaroid-kicker{
  display:block;
  color:#8e8f94;
  font-size:.43rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.polaroid-header h2{
  margin:4px 0 0;
  color:#3f4045;
  font-size:.70rem;
  font-weight:500;
  line-height:1.2;
}

.polaroid-count{
  margin-top:3px;
  color:#a0a1a5;
  font-size:.43rem;
  white-space:nowrap;
}

.polaroid-wall{
  position:absolute;
  left:25px;
  right:25px;
  top:78px;
  bottom:20px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:160px;
  gap:18px 14px;
  align-items:start;
  overflow-y:auto;
  overflow-x:hidden;
  padding:7px 8px 22px;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
  transition:transform .45s ease, opacity .35s ease;
}

.polaroid-wall::-webkit-scrollbar{width:4px}
.polaroid-wall::-webkit-scrollbar-track{background:transparent}
.polaroid-wall::-webkit-scrollbar-thumb{
  background:#c7c7cb;
  border-radius:999px;
}

.polaroid{
  position:relative;
  width:100%;
  max-width:145px;
  min-height:150px;
  margin:0 auto;
  padding:8px 8px 10px;
  border:1px solid #dedee1;
  border-radius:4px;
  background:#fff;
  box-shadow:0 8px 18px rgba(22,22,26,.07);
  color:#55565b;
  font-family:var(--sans);
  cursor:pointer;
  transform-origin:center center;
  transition:transform .20s ease, box-shadow .20s ease, opacity .20s ease;
}

.polaroid:hover{
  transform:translateY(-4px) rotate(0deg) !important;
  box-shadow:0 12px 26px rgba(22,22,26,.11);
  z-index:4;
}

.polaroid-photo{
  width:100%;
  aspect-ratio:1 / .86;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#efeff1,#d6d6d9);
  background-size:cover;
  background-position:center;
}

.polaroid-photo.has-image span{display:none}

.polaroid-photo span{
  color:#a0a1a5;
  font-size:.35rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.polaroid-caption{
  padding:8px 2px 0;
  text-align:left;
}

.polaroid-caption strong{
  display:block;
  color:#3c3d42;
  font-size:.53rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.polaroid-caption span{
  display:block;
  margin-top:3px;
  color:#96979c;
  font-size:.38rem;
}

.p1{transform:rotate(-2deg)}
.p2{transform:rotate(1.8deg)}
.p3{transform:rotate(-1deg)}
.p4{transform:rotate(2.3deg)}
.p5{transform:rotate(-1.7deg)}
.p6{transform:rotate(1deg)}
.p7{transform:rotate(2deg)}
.p8{transform:rotate(-2.2deg)}
.p9{transform:rotate(.8deg)}
.p10{transform:rotate(-1.4deg)}
.p11{transform:rotate(2.1deg)}
.p12{transform:rotate(-.7deg)}
.p13{transform:rotate(1.6deg)}
.p14{transform:rotate(-2deg)}
.p15{transform:rotate(1.2deg)}
.p16{transform:rotate(-1deg)}

/* memory card that opens over the wall */
.polaroid-detail{
  position:absolute;
  z-index:10;
  right:20px;
  top:70px;
  width:270px;
  height:350px;
  overflow:hidden;
  display:grid;
  grid-template-rows:130px 1fr;
  border:1px solid #dddddf;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px rgba(22,22,26,.15);
  opacity:0;
  transform:translateX(22px) scale(.98);
  pointer-events:none;
  transition:opacity .28s ease, transform .35s ease;
}

.polaroid-shell.detail-open .polaroid-detail{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.polaroid-shell.detail-open .polaroid-wall{
  transform:translateX(-92px);
  opacity:.42;
}

.polaroid-close{
  position:absolute;
  z-index:3;
  right:10px;
  top:8px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#66676c;
  font-family:var(--sans);
  font-size:.75rem;
  cursor:pointer;
}

.polaroid-detail-photo{
  width:100%;
  height:130px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#efeff1,#d7d7da);
  background-size:cover;
  background-position:center;
  color:#999aa0;
  font-size:.40rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.polaroid-detail-photo.has-image span{display:none}

.polaroid-detail-scroll{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 16px 15px;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.polaroid-detail-scroll::-webkit-scrollbar{width:4px}
.polaroid-detail-scroll::-webkit-scrollbar-track{background:transparent}
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  background:#c7c7cb;
  border-radius:999px;
}

.polaroid-detail-scroll h2{
  margin:3px 0 0;
  color:#303136;
  font-size:.86rem;
  font-weight:600;
  line-height:1.1;
}

.polaroid-detail-location{
  display:block;
  margin-top:4px;
  color:#77787d;
  font-size:.46rem;
}

.concert-detail-kicker{
  display:block;
  color:#9b9ca1;
  font-size:.37rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.concert-meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 13px;
  padding:12px 0;
  margin-top:10px;
  border-top:1px solid #ececef;
  border-bottom:1px solid #ececef;
}

.concert-meta-grid span,
.concert-note>span{
  display:block;
  color:#9a9ba0;
  font-size:.37rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.concert-meta-grid strong{
  display:block;
  margin-top:3px;
  color:#56575c;
  font-size:.49rem;
  font-weight:500;
  line-height:1.3;
}

.concert-note{
  padding:11px 0 0;
}

.concert-note p{
  margin:5px 0 0;
  color:#56575c;
  font-size:.55rem;
  font-weight:300;
  line-height:1.45;
}

.concert-footer{
  display:block;
  margin-top:12px;
  color:#a0a1a5;
  font-size:.40rem;
  font-style:italic;
  text-align:right;
}


/* FUTURE VIEWS */
.placeholder-card{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.94);
}

.placeholder-card span{
  font-size:.80rem;
  font-weight:600;
  text-transform:lowercase;
}

.placeholder-card p{
  margin:0;
  color:#85868b;
  font-size:.68rem;
}

/* RESPONSIVE: exact same composition, only scaled */
@media(max-width:600px){
  body{
    background-image:url("https://file.garden/aiG95gHjr0MfBA8O/a%20little%20archive%20of%20wishes(6).png");
  }
  .page-composition{transform:translate(-50%,-50%) scale(.90)}
}
@media(max-width:540px){.page-composition{transform:translate(-50%,-50%) scale(.82)}}
@media(max-width:480px){
  .page-composition{transform:translate(-50%,-50%) scale(.74)}
  .back-link{top:12px;left:14px}
}
@media(max-width:430px){.page-composition{transform:translate(-50%,-50%) scale(.67)}}
@media(max-width:390px){.page-composition{transform:translate(-50%,-50%) scale(.61)}}
@media(max-width:350px){.page-composition{transform:translate(-50%,-50%) scale(.55)}}
@media(max-height:560px){.page-composition{transform:translate(-50%,-50%) scale(.82)}}
@media(max-height:470px){.page-composition{transform:translate(-50%,-50%) scale(.70)}}


/* =========================================================
   MAIN VIEW SWITCHER — PURE CSS
   ========================================================= */
.view-toggle{
  position:fixed;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* All main views stay hidden until their radio is checked. */
.site-view{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

#view-about:checked ~ .page-composition .site-view[data-site-view="about"],
#view-rules:checked ~ .page-composition .site-view[data-site-view="rules"],
#view-loves:checked ~ .page-composition .site-view[data-site-view="loves"],
#view-concerts:checked ~ .page-composition .site-view[data-site-view="concerts"],
#view-gom:checked ~ .page-composition .site-view[data-site-view="gom"]{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

#view-about:checked ~ .page-composition .section-link[for="view-about"],
#view-rules:checked ~ .page-composition .section-link[for="view-rules"],
#view-loves:checked ~ .page-composition .section-link[for="view-loves"],
#view-concerts:checked ~ .page-composition .section-link[for="view-concerts"],
#view-gom:checked ~ .page-composition .section-link[for="view-gom"]{
  background:#29292d;
  border-color:#29292d;
  color:#fff;
}


/* =========================================================
   RULES — REBALANCED / CENTERED
   ========================================================= */
.rules-card{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(221,221,223,.92);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(22,22,26,.045);
  backdrop-filter:blur(3px);
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  align-items:center;
  padding:34px 38px;
}

.rules-left{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:154px 170px;
  gap:22px 18px;
  align-content:center;
}

.rule-mini,
.rule-large{
  color:#505157;
  font-family:var(--sans);
}

.rule-kicker{
  display:block;
  margin-bottom:7px;
  color:#77787d;
  font-family:var(--sans);
  font-size:.60rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
}

.rule-mini{
  min-width:0;
  height:154px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:3px 7px 3px 0;
  text-align:left;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.rule-mini p,
.rule-large p{
  margin:0;
  font-family:var(--sans);
  font-size:.70rem;
  font-weight:300;
  line-height:1.48;
}

.dnf-one{grid-column:1;grid-row:1}
.dnf-two{grid-column:2;grid-row:1}

.rules-main-photo{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  height:170px;
  align-self:center;
  justify-self:center;
  overflow:hidden;
  border-radius:22px;
}

.rules-main-photo .photo-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  background:linear-gradient(135deg,#ececef,#d5d5d8);
  color:#96979b;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.46rem;
}

.byf-block{
  min-width:0;
  height:330px;
  align-self:center;
  padding:14px 0 14px 26px;
  border-left:1px solid #ececef;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rule-scroll{
  min-height:0;
  max-height:284px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:9px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c7c7cb transparent;
}

.rule-scroll p{margin:0 0 14px}
.rule-scroll p:last-child{margin-bottom:0}

.rule-mini::-webkit-scrollbar,
.rule-scroll::-webkit-scrollbar{width:4px}

.rule-mini::-webkit-scrollbar-track,
.rule-scroll::-webkit-scrollbar-track{background:transparent}

.rule-mini::-webkit-scrollbar-thumb,
.rule-scroll::-webkit-scrollbar-thumb{
  background:#c7c7cb;
  border-radius:999px;
}


.concert-status-label{
  padding-top:10px;
}

.concert-item-main small{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =========================================================
   FULL OF WISHS — PINK DREAMY REDESIGN
   ========================================================= */
:root{
  --ink:#40373d;
  --muted:#8f7f87;
  --line:#ead8df;
  --paper:#fffafb;

  --pink-00:#fff9fb;
  --pink-01:#fdf2f6;
  --pink-02:#f7e4eb;
  --pink-03:#edcbd8;
  --pink-04:#ddb1c2;
  --pink-05:#c98fa6;
  --pink-06:#ad7289;
}

/* page */
body{
  color:var(--ink);
}

.about-page{
  background:rgba(255,249,251,.18);
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */
.section-link{
  border-color:var(--pink-03);
  background:rgba(255,250,252,.96);
  color:#78646e;
  box-shadow:0 7px 20px rgba(199,143,165,.07);
}

.section-link:hover{
  border-color:var(--pink-05);
  background:var(--pink-02);
  color:#8f5f72;
}

#view-about:checked ~ .page-composition .section-link[for="view-about"],
#view-rules:checked ~ .page-composition .section-link[for="view-rules"],
#view-loves:checked ~ .page-composition .section-link[for="view-loves"],
#view-concerts:checked ~ .page-composition .section-link[for="view-concerts"],
#view-gom:checked ~ .page-composition .section-link[for="view-gom"]{
  background:var(--pink-05);
  border-color:var(--pink-05);
  color:#fff;
  box-shadow:0 8px 22px rgba(201,143,166,.20);
}

/* =========================================================
   ABOUT
   ========================================================= */
.info-card,
.social-card,
.rules-card,
.utts-shell,
.polaroid-shell,
.placeholder-card{
  border-color:var(--pink-03);
  background:rgba(255,250,252,.96);
  box-shadow:0 14px 38px rgba(196,136,160,.08);
}

.profile-block,
.about-copy{
  border-color:var(--pink-02);
}

.profile-square{
  background:linear-gradient(145deg,var(--pink-04),var(--pink-05));
}

.profile-details{
  color:#836f79;
}

.profile-details b{
  color:#6c5360;
}

/* FIX: inner tabs must stay small */
.about-tabs{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
}

.about-tab{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  padding:5px 9px !important;
  border:1px solid var(--pink-03) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#967985 !important;
  font-family:var(--sans) !important;
  font-size:.46rem !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.about-tab:hover{
  background:var(--pink-01) !important;
  border-color:var(--pink-04) !important;
  color:#8c6374 !important;
}

.about-tab.active{
  background:var(--pink-05) !important;
  border-color:var(--pink-05) !important;
  color:#fff !important;
}

.about-panel p{
  color:#62535b;
}

.about-panel strong{
  color:#6b4757;
}

.panel-title{
  color:#b2788f !important;
}

.likes-label{
  color:#be88a0;
}

.likes-group{
  border-color:var(--pink-02);
}

.about-panel::-webkit-scrollbar-thumb,
.utts-list::-webkit-scrollbar-thumb,
.utt-details-inner::-webkit-scrollbar-thumb,
.rule-mini::-webkit-scrollbar-thumb,
.rule-scroll::-webkit-scrollbar-thumb,
.polaroid-wall::-webkit-scrollbar-thumb,
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  background:var(--pink-04);
}

.about-panel{
  scrollbar-color:var(--pink-04) transparent;
}

/* social buttons */
.social-card{
  background:rgba(255,248,251,.93);
}

.social-card a{
  border-color:var(--pink-03);
  background:#fff;
  color:#8b6f7b;
}

.social-card a:hover{
  background:var(--pink-05);
  border-color:var(--pink-05);
  color:#fff;
}

/* last.fm */
.lastfm-cta a{
  border-color:var(--pink-03);
  color:#8b6877;
  background:#fff;
}

.lastfm-cta a:hover{
  background:var(--pink-05);
  border-color:var(--pink-05);
  color:#fff;
}

.music-label,
.lastfm-cta span{
  color:#bd8ba0;
}

/* =========================================================
   RULES
   ========================================================= */
.rules-card{
  background:rgba(255,249,251,.96);
}

.rule-kicker{
  color:#b27b91;
}

.rule-mini,
.rule-large,
.rule-mini p,
.rule-large p{
  color:#67575f;
}

.byf-block{
  border-left-color:var(--pink-02);
}

.rules-main-photo .photo-placeholder{
  background:linear-gradient(145deg,#f9edf2,#efd9e2);
  color:#c19aaa;
}

/* =========================================================
   UTTS / TAROT
   ========================================================= */
.utts-shell{
  background:rgba(255,249,251,.96);
}

.utts-list-card,
.tarot-frame,
.utt-details{
  border-color:var(--pink-03);
  background:#fffafb;
  box-shadow:0 12px 30px rgba(199,143,165,.09);
}

.utts-list-title{
  color:#b57b92;
}

.utt-name{
  border-color:var(--pink-03);
  background:#fff;
  color:#8c7280;
}

.utt-name:hover,
.utt-name.active{
  border-color:var(--pink-05);
  background:var(--pink-05);
  color:#fff;
}

.tarot-frame{
  border-color:var(--pink-04);
}

.tarot-topline,
.tarot-bottomline span,
.tarot-hint{
  color:#b98a9e;
}

.tarot-photo{
  background:linear-gradient(155deg,#faedf2,#ead2dc);
}

.tarot-bottomline strong,
.utt-detail-heading h2{
  color:#754f60;
}

.utt-detail-heading,
.utt-counter,
.utt-facts{
  border-color:var(--pink-02);
}

.utt-mini-label,
.utt-facts span,
.utt-note>span{
  color:#bd8ba0;
}

.utt-counter strong{
  color:#9b657b;
}

.utt-note p,
.utt-facts strong{
  color:#67575f;
}

/* =========================================================
   CONCERTS — PINK POLAROID WALL
   ========================================================= */
.polaroid-shell{
  background:rgba(255,249,251,.96);
}

.polaroid-kicker{
  color:#bd859d;
}

.polaroid-header h2{
  color:#755b67;
}

.polaroid-count{
  color:#c49aab;
}

.polaroid{
  border-color:#efd8e1;
  background:#fffafb;
  box-shadow:
    0 8px 18px rgba(190,126,151,.10),
    0 2px 0 rgba(255,255,255,.9) inset;
}

.polaroid:hover{
  box-shadow:0 14px 30px rgba(190,126,151,.17);
}

.polaroid-photo{
  background:linear-gradient(145deg,#f8e8ee,#ead0db);
}

.polaroid-caption strong{
  color:#765665;
}

.polaroid-caption span{
  color:#bb899e;
}

.polaroid-detail{
  border-color:var(--pink-03);
  background:#fffafb;
  box-shadow:0 18px 42px rgba(189,126,151,.18);
}

.polaroid-detail-photo{
  background:linear-gradient(145deg,#f9eaf0,#e8ccd8);
}

.polaroid-close{
  border-color:var(--pink-03);
  background:rgba(255,250,252,.94);
  color:#a46d83;
}

.concert-detail-kicker,
.concert-meta-grid span,
.concert-note>span{
  color:#bd8ba0;
}

.polaroid-detail-scroll h2{
  color:#795465;
}

.polaroid-detail-location,
.concert-meta-grid strong,
.concert-note p{
  color:#67575f;
}

.concert-meta-grid{
  border-color:var(--pink-02);
}

/* =========================================================
   SOFT DETAILS
   ========================================================= */
.record-wrap{
  box-shadow:0 0 0 2px var(--pink-02);
}

.back-link{
  color:#b98a9e;
}

::selection{
  background:var(--pink-03);
  color:#6f4d5c;
}


/* =========================================================
   SOFT PINK V2 — LIGHTER / FIXED
   ========================================================= */
:root{
  --ink:#50454b;
  --muted:#95868d;
  --line:#f0dfe6;
  --paper:#fffdfd;

  --pink-00:#fffdfd;
  --pink-01:#fff8fa;
  --pink-02:#fceff4;
  --pink-03:#f5dce6;
  --pink-04:#ecc6d5;
  --pink-05:#dba9bd;
  --pink-06:#c98ea5;
}

/* Main nav: softer pink */
.section-link{
  border-color:var(--pink-04) !important;
  background:rgba(255,252,253,.96) !important;
  color:#8a747e !important;
  box-shadow:0 7px 18px rgba(219,169,189,.06) !important;
}
.section-link:hover{
  background:var(--pink-02) !important;
  border-color:var(--pink-05) !important;
  color:#9b6f82 !important;
}
#view-about:checked ~ .page-composition .section-link[for="view-about"],
#view-rules:checked ~ .page-composition .section-link[for="view-rules"],
#view-loves:checked ~ .page-composition .section-link[for="view-loves"],
#view-concerts:checked ~ .page-composition .section-link[for="view-concerts"],
#view-gom:checked ~ .page-composition .section-link[for="view-gom"]{
  background:var(--pink-05) !important;
  border-color:var(--pink-05) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(219,169,189,.16) !important;
}

/* =========================================================
   ABOUT — FIX BROKEN INTERNAL GRID
   ========================================================= */
.info-card{
  background:rgba(255,252,253,.96) !important;
  border-color:var(--pink-04) !important;
  display:grid !important;
  grid-template-rows:74px minmax(0,1fr) 66px !important;
}

.profile-block{
  min-height:0 !important;
  height:74px !important;
  padding:10px 13px !important;
}

.about-copy{
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  padding:10px 13px 9px !important;
  display:grid !important;
  grid-template-rows:30px minmax(0,1fr) !important;
  gap:7px !important;
}

.about-tabs{
  width:auto !important;
  height:30px !important;
  min-height:30px !important;
  align-self:start !important;
  justify-self:start !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 !important;
}

.about-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:24px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:1px solid var(--pink-04) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#9a7b88 !important;
  font-family:var(--sans) !important;
  font-size:.44rem !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.about-tab.active{
  background:var(--pink-05) !important;
  border-color:var(--pink-05) !important;
  color:#fff !important;
}

.about-panels{
  position:relative !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

.about-panel{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  min-height:0 !important;
  padding:2px 7px 0 0 !important;
  margin:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.about-panel p{
  margin:0 0 9px !important;
  font-size:.72rem !important;
  line-height:1.48 !important;
}

.bottom-row{
  height:66px !important;
  padding:8px 12px !important;
}

/* lighter pink everywhere */
.info-card,
.social-card,
.rules-new .rules-note,
.placeholder-card{
  background:rgba(255,252,253,.96) !important;
  border-color:var(--pink-04) !important;
}

.profile-square{
  background:var(--pink-05) !important;
}

.panel-title,
.likes-label,
.music-label,
.lastfm-cta span,
.utts-list-title,
.polaroid-kicker,
.concert-detail-kicker,
.concert-meta-grid span,
.concert-note>span{
  color:#c28ea3 !important;
}

.social-card a,
.lastfm-cta a,
.utt-name{
  border-color:var(--pink-04) !important;
  color:#987985 !important;
}

.social-card a:hover,
.lastfm-cta a:hover,
.utt-name:hover,
.utt-name.active{
  background:var(--pink-05) !important;
  border-color:var(--pink-05) !important;
  color:#fff !important;
}

/* =========================================================
   RULES — COMPLETE REDESIGN
   ========================================================= */
.rules-new{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
  padding:22px;
  overflow:hidden;
  border:1px solid var(--pink-04);
  border-radius:24px;
  background:rgba(255,252,253,.92);
  box-shadow:0 14px 38px rgba(214,167,185,.07);
  backdrop-filter:blur(3px);
}

.rules-note{
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:17px 17px 15px;
  border:1px solid var(--pink-04);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 7px 22px rgba(213,164,183,.045);
}

.rules-byf{
  grid-column:1;
  grid-row:1 / -1;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.rules-dni{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.rules-note-head{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding-bottom:12px;
  border-bottom:1px solid var(--pink-02);
}

.rules-note-head.compact{
  padding-bottom:10px;
}

.rules-index{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--pink-04);
  border-radius:50%;
  color:#c28da2;
  font-size:.48rem;
  font-weight:600;
}

.rules-eyebrow{
  display:block;
  color:#c28da2;
  font-size:.50rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:lowercase;
}

.rules-note h2{
  margin:4px 0 0;
  color:#69555f;
  font-size:.66rem;
  font-weight:500;
  line-height:1.35;
}

.rules-note-scroll{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:13px 7px 0 0;
  scrollbar-width:thin;
  scrollbar-color:var(--pink-04) transparent;
}

.rules-note-scroll::-webkit-scrollbar{width:4px}
.rules-note-scroll::-webkit-scrollbar-track{background:transparent}
.rules-note-scroll::-webkit-scrollbar-thumb{
  background:var(--pink-04);
  border-radius:999px;
}

.rules-note-scroll p{
  margin:0 0 13px;
  color:#685b61;
  font-size:.67rem;
  font-weight:300;
  line-height:1.50;
}

.rules-note-scroll p:last-child{
  margin-bottom:0;
}

.rules-photo{
  grid-column:2;
  grid-row:2;
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--pink-04);
  background:#fff;
}

.rules-photo-placeholder{
  position:absolute;
  inset:0 0 31px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#fff7fa,#f4dfe8);
  color:#c29bab;
  font-size:.42rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rules-photo-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b88399;
  background:#fffafb;
  font-size:.47rem;
  font-style:italic;
}

.rules-stamp{
  position:absolute;
  right:34px;
  bottom:28px;
  z-index:5;
  display:none;
}

/* =========================================================
   UTTS — REMOVE OUTER WHITE BOX
   ========================================================= */
.utts-shell{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible !important;
}

.utts-list-card,
.tarot-frame,
.utt-details{
  background:rgba(255,252,253,.97) !important;
  border-color:var(--pink-04) !important;
  box-shadow:0 12px 30px rgba(211,161,181,.08) !important;
}

.tarot-card{
  background:transparent !important;
}

.tarot-photo{
  background:linear-gradient(155deg,#fff5f8,#efd8e2) !important;
}

.utt-details{
  border-color:var(--pink-04) !important;
}

/* Concert polaroids: softer */
.polaroid-shell{
  background:rgba(255,252,253,.90) !important;
  border-color:var(--pink-04) !important;
}

.polaroid{
  background:#fffdfd !important;
  border-color:var(--pink-03) !important;
  box-shadow:0 8px 18px rgba(210,160,180,.08) !important;
}

.polaroid-photo,
.polaroid-detail-photo{
  background:linear-gradient(145deg,#fff6f9,#efdae2) !important;
}

/* all scroll thumbs */
.about-panel::-webkit-scrollbar-thumb,
.rules-note-scroll::-webkit-scrollbar-thumb,
.utts-list::-webkit-scrollbar-thumb,
.utt-details-inner::-webkit-scrollbar-thumb,
.polaroid-wall::-webkit-scrollbar-thumb,
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  background:var(--pink-04) !important;
}


/* =========================================================
   SOFT MONOCHROME — ORIGINAL PROJECT
   gray instead of true black
   ========================================================= */
:root{
  --ink:#555357;
  --muted:#8f8c91;
  --line:#dedcdf;
  --paper:#fdfdfd;
  --gray-00:#ffffff;
  --gray-01:#fafafa;
  --gray-02:#f4f4f4;
  --gray-03:#e8e7e9;
  --gray-04:#d6d4d7;
  --gray-05:#aaa7ac;
  --gray-06:#77747a;
  --gray-07:#555357;
}

body{ color:var(--ink) !important; }
.about-page{ background:rgba(255,255,255,.15) !important; }

.section-link{
  border-color:var(--gray-04) !important;
  background:rgba(255,255,255,.95) !important;
  color:#77747a !important;
  box-shadow:0 7px 18px rgba(70,68,72,.05) !important;
}
.section-link:hover{
  background:var(--gray-02) !important;
  border-color:var(--gray-05) !important;
  color:#666369 !important;
}
#view-about:checked ~ .page-composition .section-link[for="view-about"],
#view-rules:checked ~ .page-composition .section-link[for="view-rules"],
#view-loves:checked ~ .page-composition .section-link[for="view-loves"],
#view-concerts:checked ~ .page-composition .section-link[for="view-concerts"],
#view-gom:checked ~ .page-composition .section-link[for="view-gom"]{
  background:#868389 !important;
  border-color:#868389 !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(70,68,72,.12) !important;
}

.info-card,
.social-card,
.rules-new .rules-note,
.placeholder-card{
  background:rgba(255,255,255,.96) !important;
  border-color:var(--gray-04) !important;
  box-shadow:0 14px 34px rgba(55,53,57,.05) !important;
}

.profile-block{ border-color:var(--gray-03) !important; }
.profile-square{ background:#9c999f !important; }
.profile-details{ color:#77747a !important; }
.profile-details b{ color:#5f5c62 !important; }

.about-tab{
  border-color:var(--gray-04) !important;
  background:#fff !important;
  color:#77747a !important;
}
.about-tab:hover{
  background:var(--gray-02) !important;
  border-color:var(--gray-05) !important;
  color:#666369 !important;
}
.about-tab.active{
  background:#8d8a90 !important;
  border-color:#8d8a90 !important;
  color:#fff !important;
}

.about-panel p{ color:#666369 !important; }
.about-panel strong{ color:#555257 !important; }
.panel-title,
.likes-label,
.music-label,
.lastfm-cta span{ color:#77747a !important; }
.likes-group{ border-color:var(--gray-03) !important; }

.social-card{ background:rgba(250,250,250,.96) !important; }
.social-card a,
.lastfm-cta a{
  border-color:var(--gray-04) !important;
  background:#fff !important;
  color:#77747a !important;
}
.social-card a:hover,
.lastfm-cta a:hover{
  background:#8b888e !important;
  border-color:#8b888e !important;
  color:#fff !important;
}

.rules-new{
  border-color:var(--gray-04) !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 14px 34px rgba(60,58,62,.04) !important;
}
.rules-note{
  border-color:var(--gray-04) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 7px 20px rgba(60,58,62,.04) !important;
}
.rules-note-head{ border-bottom-color:var(--gray-03) !important; }
.rules-index,
.rules-eyebrow{
  color:#7e7a80 !important;
  border-color:var(--gray-04) !important;
}
.rules-note h2{ color:#605d63 !important; }
.rules-note-scroll p{ color:#6b686e !important; }

.rules-photo{
  border-color:var(--gray-04) !important;
  background:#fff !important;
}
.rules-photo-placeholder{
  background:linear-gradient(145deg,#f6f6f6,#e9e8ea) !important;
  color:#99969c !important;
}
.rules-photo-caption{
  background:#fbfbfb !important;
  color:#77747a !important;
}

.utts-shell{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.utts-list-card,
.tarot-frame,
.utt-details{
  background:rgba(255,255,255,.97) !important;
  border-color:var(--gray-04) !important;
  box-shadow:0 12px 28px rgba(55,53,57,.06) !important;
}
.utts-list-title{ color:#6f6c72 !important; }

.utt-name{
  border-color:var(--gray-04) !important;
  background:#fff !important;
  color:#77747a !important;
}
.utt-name:hover,
.utt-name.active{
  background:#8a878d !important;
  border-color:#8a878d !important;
  color:#fff !important;
}

.tarot-frame{ border-color:#c9c7cb !important; }
.tarot-topline,
.tarot-bottomline span,
.tarot-hint,
.utt-mini-label,
.utt-facts span,
.utt-note>span{ color:#858187 !important; }
.tarot-photo{ background:linear-gradient(155deg,#f5f5f5,#e4e3e6) !important; }
.tarot-bottomline strong,
.utt-detail-heading h2{ color:#5f5c62 !important; }
.utt-detail-heading,
.utt-counter,
.utt-facts{ border-color:var(--gray-03) !important; }
.utt-counter strong{ color:#6f6b71 !important; }
.utt-note p,
.utt-facts strong{ color:#656268 !important; }

.polaroid-shell{
  background:rgba(255,255,255,.94) !important;
  border-color:var(--gray-04) !important;
  box-shadow:0 14px 34px rgba(55,53,57,.05) !important;
}
.polaroid-kicker,
.polaroid-count,
.polaroid-caption span,
.concert-detail-kicker,
.concert-meta-grid span,
.concert-note>span{ color:#858187 !important; }
.polaroid-header h2{ color:#5f5c62 !important; }

.polaroid{
  border-color:#dedcdf !important;
  background:#fff !important;
  box-shadow:0 8px 18px rgba(60,58,62,.07) !important;
}
.polaroid:hover{ box-shadow:0 14px 30px rgba(60,58,62,.10) !important; }

.polaroid-photo,
.polaroid-detail-photo{
  background:linear-gradient(145deg,#f4f4f4,#e4e3e6) !important;
}
.polaroid-caption strong,
.polaroid-detail-scroll h2{ color:#5e5b61 !important; }

.polaroid-detail{
  border-color:var(--gray-04) !important;
  background:#fff !important;
  box-shadow:0 18px 42px rgba(50,48,52,.10) !important;
}
.polaroid-close{
  border-color:var(--gray-04) !important;
  background:rgba(255,255,255,.95) !important;
  color:#6f6b71 !important;
}
.polaroid-detail-location,
.concert-meta-grid strong,
.concert-note p{ color:#68656b !important; }
.concert-meta-grid{ border-color:var(--gray-03) !important; }

.record-wrap{ box-shadow:0 0 0 2px var(--gray-03) !important; }
.back-link{ color:#858187 !important; }
::selection{
  background:#d9d7db;
  color:#4f4c52;
}

.about-panel::-webkit-scrollbar-thumb,
.rules-note-scroll::-webkit-scrollbar-thumb,
.utts-list::-webkit-scrollbar-thumb,
.utt-details-inner::-webkit-scrollbar-thumb,
.polaroid-wall::-webkit-scrollbar-thumb,
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  background:#c4c1c6 !important;
}
.about-panel,
.rules-note-scroll,
.utts-list,
.utt-details-inner,
.polaroid-wall,
.polaroid-detail-scroll{
  scrollbar-color:#c4c1c6 transparent !important;
}


/* =========================================================
   SQUARE CORNERS — EDITORIAL VERSION
   Removes rounded UI corners while preserving circular
   Last.fm artwork / record styling.
   ========================================================= */

/* primary navigation + generic controls */
.section-link,
.about-tab,
.social-card a,
.lastfm-cta a,
.utt-name,
.polaroid-close,
button{
  border-radius:0 !important;
}

/* main cards / shells */
.info-card,
.social-card,
.rules-new,
.rules-note,
.rules-photo,
.utts-list-card,
.tarot-frame,
.utt-details,
.polaroid-shell,
.polaroid,
.polaroid-detail,
.placeholder-card{
  border-radius:0 !important;
}

/* inner rule/photo elements */
.rules-photo-placeholder,
.rules-photo-caption{
  border-radius:0 !important;
}

/* concert image / detail surfaces */
.polaroid-photo,
.polaroid-detail-photo{
  border-radius:0 !important;
}

/* tarot / utt inner surfaces */
.tarot-photo,
.utt-counter,
.utt-facts,
.utt-note{
  border-radius:0 !important;
}

/* profile blocks */
.profile-square{
  border-radius:0 !important;
}

/* scrollbar thumbs also lose pill styling */
.about-panel::-webkit-scrollbar-thumb,
.rules-note-scroll::-webkit-scrollbar-thumb,
.utts-list::-webkit-scrollbar-thumb,
.utt-details-inner::-webkit-scrollbar-thumb,
.polaroid-wall::-webkit-scrollbar-thumb,
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  border-radius:0 !important;
}

/* Preserve true circular elements intentionally */
.record-wrap,
.lastfm-cover,
.lastfm-cover img,
.record-wrap img{
  border-radius:50% !important;
}


/* =========================================================
   OPEN EDITORIAL — NO BACKGROUND IMAGE / NO CARD UI
   inspired by airy monochrome editorial references
   ========================================================= */
:root{
  --oe-ink:#5d5b60;
  --oe-mid:#858287;
  --oe-soft:#aaa7ac;
  --oe-line:#dedde0;
  --oe-faint:#f2f1f3;
  --oe-white:#fdfdfd;
}

/* clean paper background */
html,
body,
.about-page{
  background:#fdfdfd !important;
  background-image:none !important;
}

body{
  color:var(--oe-ink) !important;
}

/* remove the decorative page background entirely */
.about-page::before,
.about-page::after{
  display:none !important;
}

/* main composition becomes open space rather than a framed UI */
.page-composition{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* =========================================================
   NAVIGATION — text floating in space
   ========================================================= */
.section-nav{
  gap:28px !important;
  justify-content:center !important;
  align-items:center !important;
}

.section-link{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:4px 2px 7px !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#8c898e !important;
  font-size:.58rem !important;
  letter-spacing:.025em;
}

.section-link:hover{
  background:transparent !important;
  border-bottom-color:#bbb8bd !important;
  color:#656267 !important;
}

#view-about:checked ~ .page-composition .section-link[for="view-about"],
#view-rules:checked ~ .page-composition .section-link[for="view-rules"],
#view-loves:checked ~ .page-composition .section-link[for="view-loves"],
#view-concerts:checked ~ .page-composition .section-link[for="view-concerts"],
#view-gom:checked ~ .page-composition .section-link[for="view-gom"]{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #67646a !important;
  color:#5c595f !important;
  box-shadow:none !important;
}

/* content area itself is invisible */
.views-shell,
.site-view{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* =========================================================
   ABOUT — editorial composition with no visible cards
   ========================================================= */
.about-layout{
  overflow:visible !important;
}

.about-art{
  filter:grayscale(1) contrast(.82) brightness(1.1) !important;
  opacity:.78 !important;
}

/* kill the card visual but keep its layout/content */
.info-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* profile feels like tiny editorial metadata */
.profile-block{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--oe-line) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.profile-square{
  background:#8c898e !important;
  border:0 !important;
  box-shadow:none !important;
}

.profile-details{
  color:#77747a !important;
}

.profile-details b{
  color:#565359 !important;
}

/* about content has only a thin guide line */
.about-copy{
  background:transparent !important;
  border:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.about-tabs{
  border-bottom:1px solid var(--oe-line);
  gap:16px !important;
}

.about-tab{
  height:auto !important;
  min-height:0 !important;
  padding:3px 0 7px !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
  color:#98959a !important;
  box-shadow:none !important;
  font-size:.44rem !important;
}

.about-tab:hover{
  background:transparent !important;
  color:#69666c !important;
  border-bottom-color:#bebbc0 !important;
}

.about-tab.active{
  background:transparent !important;
  color:#59565c !important;
  border-bottom-color:#68656b !important;
}

.about-panels,
.about-panel{
  background:transparent !important;
}

.about-panel p{
  color:#67646a !important;
}

.panel-title{
  color:#5d5a60 !important;
  letter-spacing:.02em;
}

.likes-group{
  border-left:1px solid #e1dfe2 !important;
}

/* Last.fm remains a tiny utility strip, not a card */
.bottom-row{
  background:transparent !important;
  border-top:1px solid var(--oe-line) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.lastfm-widget,
.lastfm-cta{
  background:transparent !important;
  border:0 !important;
}

.lastfm-cta a{
  padding:4px 0 !important;
  border:0 !important;
  border-bottom:1px solid #bbb8bd !important;
  background:transparent !important;
  color:#77747a !important;
}

.lastfm-cta a:hover{
  background:transparent !important;
  border-bottom-color:#5f5c62 !important;
  color:#555258 !important;
}

/* socials become tiny text links floating underneath */
.social-card{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--oe-line) !important;
  border-bottom:1px solid var(--oe-line) !important;
  box-shadow:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.social-card a{
  border:0 !important;
  background:transparent !important;
  color:#88858a !important;
  box-shadow:none !important;
}

.social-card a:hover{
  background:transparent !important;
  color:#555258 !important;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* =========================================================
   RULES — no cards; just editorial columns + hairlines
   ========================================================= */
.rules-new{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  gap:28px !important;
  padding:14px 10px !important;
}

.rules-note{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:10px 0 !important;
}

.rules-byf{
  padding-right:24px !important;
  border-right:1px solid var(--oe-line) !important;
}

.rules-dni{
  padding-left:0 !important;
}

.rules-note-head{
  border-bottom:1px solid var(--oe-line) !important;
  padding-bottom:11px !important;
}

.rules-index{
  border:0 !important;
  color:#9b989d !important;
  justify-content:start !important;
}

.rules-eyebrow{
  color:#78757a !important;
}

.rules-note h2{
  color:#5f5c62 !important;
  font-weight:400 !important;
}

.rules-note-scroll{
  padding-top:15px !important;
}

.rules-note-scroll p{
  color:#6d6a70 !important;
}

/* photo sits in space: only image area has a hairline */
.rules-photo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.rules-photo-placeholder{
  background:#f3f3f3 !important;
  border:1px solid #e3e2e4 !important;
  color:#aaa7ac !important;
}

.rules-photo-caption{
  background:transparent !important;
  border:0 !important;
  color:#8f8c91 !important;
}

/* =========================================================
   UTTS — no outer blocks, just three editorial zones
   ========================================================= */
.utts-shell,
.utts-stage{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.utts-list-card{
  background:transparent !important;
  border:0 !important;
  border-right:1px solid var(--oe-line) !important;
  box-shadow:none !important;
  padding-right:18px !important;
}

.utts-list-title{
  color:#5e5b61 !important;
  letter-spacing:.03em;
}

.utt-name{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  color:#8d8a90 !important;
  box-shadow:none !important;
}

.utt-name:hover{
  background:transparent !important;
  color:#5e5b61 !important;
  border-bottom-color:#c8c5ca !important;
}

.utt-name.active{
  background:transparent !important;
  color:#555258 !important;
  border-bottom-color:#666369 !important;
}

/* tarot keeps a thin frame because it is the actual image/art object */
.tarot-frame{
  background:transparent !important;
  border:1px solid #d5d3d7 !important;
  box-shadow:none !important;
}

.tarot-photo{
  background:#f1f1f1 !important;
}

.utt-details{
  background:transparent !important;
  border:0 !important;
  border-left:1px solid var(--oe-line) !important;
  box-shadow:none !important;
  padding-left:18px !important;
}

.utt-detail-heading,
.utt-counter,
.utt-facts{
  border-color:var(--oe-line) !important;
}

.utt-counter,
.utt-facts,
.utt-note{
  background:transparent !important;
  border-radius:0 !important;
}

/* =========================================================
   CONCERTS — photos + captions, no polaroid cards
   ========================================================= */
.polaroid-shell{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.polaroid-header{
  border-bottom:1px solid var(--oe-line) !important;
  padding-bottom:11px !important;
}

.polaroid-header h2{
  color:#5d5a60 !important;
  font-weight:400 !important;
}

.polaroid-wall{
  background:transparent !important;
  gap:22px 18px !important;
  padding-top:18px !important;
}

.polaroid{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  transform:none !important;
}

.polaroid:hover{
  transform:translateY(-2px) !important;
  box-shadow:none !important;
}

.polaroid-photo{
  background:#f3f3f3 !important;
  border:1px solid #e1e0e3 !important;
}

.polaroid-caption{
  padding:8px 1px 0 !important;
  text-align:left !important;
}

.polaroid-caption strong{
  color:#5d5a60 !important;
  font-weight:500 !important;
}

.polaroid-caption span{
  color:#969398 !important;
}

/* details float with a single left rule */
.polaroid-detail{
  background:#fdfdfd !important;
  border:0 !important;
  border-left:1px solid #d4d2d6 !important;
  box-shadow:none !important;
}

.polaroid-detail-photo{
  border:1px solid #e2e1e3 !important;
  background:#f3f3f3 !important;
}

.polaroid-close{
  border:0 !important;
  background:transparent !important;
  color:#77747a !important;
}

/* GOM */
.placeholder-card{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--oe-line) !important;
  border-bottom:1px solid var(--oe-line) !important;
  box-shadow:none !important;
}

/* scrollbar = minimal line */
.about-panel::-webkit-scrollbar,
.rules-note-scroll::-webkit-scrollbar,
.utts-list::-webkit-scrollbar,
.utt-details-inner::-webkit-scrollbar,
.polaroid-wall::-webkit-scrollbar,
.polaroid-detail-scroll::-webkit-scrollbar{
  width:3px !important;
}

.about-panel::-webkit-scrollbar-thumb,
.rules-note-scroll::-webkit-scrollbar-thumb,
.utts-list::-webkit-scrollbar-thumb,
.utt-details-inner::-webkit-scrollbar-thumb,
.polaroid-wall::-webkit-scrollbar-thumb,
.polaroid-detail-scroll::-webkit-scrollbar-thumb{
  background:#c9c7cb !important;
}

/* MOBILE: preserve original scaling/composition, just remove boxes */
@media(max-width:600px){
  html,
  body,
  .about-page{
    background:#fdfdfd !important;
    background-image:none !important;
  }

  .section-nav{
    gap:18px !important;
  }

  .rules-new{
    gap:18px !important;
  }

  .rules-byf{
    padding-right:16px !important;
  }

  .utts-list-card{
    padding-right:12px !important;
  }

  .utt-details{
    padding-left:12px !important;
  }
}


/* =========================================================
   VISITOR GUESTBOOK — replaces social links
   HTML Comment Box, visually integrated into Open Editorial
   ========================================================= */
.message-wall{
  position:absolute;
  z-index:6;
  left:0;
  bottom:0;
  width:560px;
  height:78px;
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  padding:9px 0 7px;
  border-top:1px solid var(--oe-line);
  border-bottom:1px solid var(--oe-line);
  background:transparent;
}

.message-wall-head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding-right:13px;
  border-right:1px solid var(--oe-line);
}

.message-wall-head span{
  color:#5e5b61;
  font-size:.52rem;
  font-weight:500;
  line-height:1.35;
}

.message-wall-head small{
  color:#a09da2;
  font-size:.43rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.message-wall-scroll{
  min-width:0;
  height:60px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#c9c7cb transparent;
}

.message-wall-scroll::-webkit-scrollbar{
  width:3px;
}

.message-wall-scroll::-webkit-scrollbar-thumb{
  background:#c9c7cb;
}

.message-loading{
  color:#aaa7ac;
  font-size:.48rem;
}

/* HCB base */
#HCB_comment_box{
  margin:0 !important;
  padding:0 !important;
  color:#68656b !important;
  font-family:var(--sans) !important;
  font-size:.49rem !important;
  line-height:1.35 !important;
  background:transparent !important;
}

/* remove extra UI chrome */
#HCB_comment_box h1,
#HCB_comment_box h2,
#HCB_comment_box h3,
#HCB_comment_box h4,
#HCB_comment_box .home-desc,
#HCB_comment_box .hcb-icon,
#HCB_comment_box .likes,
#HCB_comment_box .hcb-comment-tb button,
#HCB_comment_box .hcb-comment-tb .btn{
  box-shadow:none !important;
}

/* compact form */
#HCB_comment_box form,
#HCB_comment_box #hcb_form{
  margin:0 0 7px !important;
  padding:0 !important;
}

#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_website,
#HCB_comment_box #hcb_form_content{
  border:0 !important;
  border-bottom:1px solid #c9c7cb !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#5f5c62 !important;
  font-family:var(--sans) !important;
  font-size:.49rem !important;
  box-shadow:none !important;
}

#HCB_comment_box #hcb_form_name{
  width:28% !important;
  height:21px !important;
  margin:0 2% 4px 0 !important;
  padding:2px 1px !important;
}

#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_website{
  width:28% !important;
  height:21px !important;
  margin:0 2% 4px 0 !important;
  padding:2px 1px !important;
}

#HCB_comment_box #hcb_form_content{
  width:68% !important;
  min-height:27px !important;
  height:27px !important;
  margin:0 2% 0 0 !important;
  padding:5px 2px !important;
  resize:none !important;
  vertical-align:bottom !important;
}

#HCB_comment_box #hcb_submit,
#HCB_comment_box .submit{
  min-width:68px !important;
  height:27px !important;
  margin:0 !important;
  padding:0 9px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#666369 !important;
  font-family:var(--sans) !important;
  font-size:.46rem !important;
  font-weight:500 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  vertical-align:bottom !important;
}

#HCB_comment_box #hcb_submit:hover,
#HCB_comment_box .submit:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

/* HCB text / labels */
#HCB_comment_box label,
#HCB_comment_box .text-blur,
#HCB_comment_box .text-focus{
  color:#99969b !important;
  font-family:var(--sans) !important;
  font-size:.46rem !important;
}

#HCB_comment_box a{
  color:#77747a !important;
  font-family:var(--sans) !important;
  font-size:.45rem !important;
  text-decoration:none !important;
}

#HCB_comment_box a:hover{
  color:#4f4c52 !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
}

/* submitted messages */
#HCB_comment_box .comment{
  margin:8px 0 0 !important;
  padding:7px 0 0 !important;
  border-top:1px solid #e5e3e6 !important;
}

#HCB_comment_box .author-name{
  color:#57545a !important;
  font-family:var(--sans) !important;
  font-size:.49rem !important;
  font-weight:500 !important;
}

#HCB_comment_box .hcb-comment-body,
#HCB_comment_box blockquote{
  margin:3px 0 !important;
  padding:0 !important;
  border:0 !important;
  color:#747177 !important;
  font-family:var(--sans) !important;
  font-size:.49rem !important;
  line-height:1.4 !important;
}

#HCB_comment_box .hcb-comment-tb,
#HCB_comment_box .hcb-comment-tb a{
  color:#a09da2 !important;
  font-size:.42rem !important;
}

/* keep service attribution, just make it unobtrusive */
#HCB_comment_box > a,
#HCB_comment_box .hcb-link{
  opacity:.55;
}

/* mobile */
@media(max-width:600px){
  .message-wall{
    width:560px;
    height:78px;
    grid-template-columns:108px minmax(0,1fr);
    gap:11px;
  }

  .message-wall-head{
    padding-right:10px;
  }

  #HCB_comment_box #hcb_form_name{
    width:30% !important;
  }

  #HCB_comment_box #hcb_form_content{
    width:64% !important;
  }
}


/* =========================================================
   COLLAPSIBLE GUESTBOOK
   closed by default, expands only on demand
   ========================================================= */
.message-wall{
  position:absolute !important;
  z-index:8 !important;
  left:0 !important;
  bottom:0 !important;
  width:560px !important;
  height:auto !important;
  display:block !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.message-wall-toggle{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 0 8px !important;
  border:0 !important;
  border-top:1px solid var(--oe-line) !important;
  border-bottom:1px solid var(--oe-line) !important;
  background:transparent !important;
  color:#666369 !important;
  text-align:left;
  cursor:pointer;
  box-shadow:none !important;
}

.message-wall-toggle-copy{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.message-wall-toggle-copy strong{
  color:#5e5b61;
  font-size:.52rem;
  font-weight:500;
}

.message-wall-toggle-copy small{
  color:#a09da2;
  font-size:.43rem;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.message-wall-toggle-icon{
  width:18px;
  flex:0 0 18px;
  color:#8f8c91;
  font-size:.84rem;
  font-weight:300;
  line-height:1;
  text-align:center;
  transition:transform .18s ease;
}

.message-wall.is-open .message-wall-toggle-icon{
  transform:rotate(45deg);
}

.message-wall-panel{
  width:100%;
  height:170px;
  padding:10px 0 0;
  background:#fdfdfd;
}

.message-wall-panel[hidden]{
  display:none !important;
}

.message-wall-scroll{
  width:100% !important;
  height:160px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:5px !important;
}

.message-wall.is-collapsed{
  height:42px !important;
}

.message-wall.is-open{
  z-index:20 !important;
}

.message-wall.is-open .message-wall-panel{
  border-bottom:1px solid var(--oe-line);
}

#HCB_comment_box #hcb_form_content{
  min-height:44px !important;
  height:44px !important;
}

#HCB_comment_box #hcb_submit,
#HCB_comment_box .submit{
  height:29px !important;
}

/* Mobile */
@media(max-width:600px){
  .message-wall{
    width:560px !important;
  }

  .message-wall-toggle{
    min-height:44px;
  }

  .message-wall-toggle-copy{
    gap:8px;
  }

  .message-wall-panel{
    height:185px;
  }

  .message-wall-scroll{
    height:175px !important;
  }
}


/* =========================================================
   ANONYMOUS GUESTBOOK
   visitor sees only message + submit
   ========================================================= */

/* Hide identity fields completely */
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_website,
#HCB_comment_box label[for="hcb_form_name"],
#HCB_comment_box label[for="hcb_form_email"],
#HCB_comment_box label[for="hcb_form_website"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Make the anonymous message field the main element */
#HCB_comment_box #hcb_form_content{
  width:78% !important;
  min-height:46px !important;
  height:46px !important;
  margin:0 2% 0 0 !important;
  padding:7px 2px !important;
  vertical-align:bottom !important;
}

#HCB_comment_box #hcb_submit,
#HCB_comment_box .submit{
  width:auto !important;
  min-width:78px !important;
  height:31px !important;
  margin:0 !important;
  vertical-align:bottom !important;
}

/* Keep author treatment understated because every visitor is anonymous */
#HCB_comment_box .author-name{
  color:#8f8c91 !important;
  font-size:.44rem !important;
  font-weight:400 !important;
  text-transform:lowercase;
}

/* Avoid any profile/avatar emphasis */
#HCB_comment_box .hcb-comment-tb img,
#HCB_comment_box img.hcb-icon,
#HCB_comment_box .hcb-icon{
  display:none !important;
}

@media(max-width:600px){
  #HCB_comment_box #hcb_form_content{
    width:72% !important;
  }

  #HCB_comment_box #hcb_submit,
  #HCB_comment_box .submit{
    min-width:72px !important;
  }
}


/* =========================================================
   CLEAN ANONYMOUS GUESTBOOK
   Only message field + submit button
   ========================================================= */

/* Hide HCB's mode tabs / image uploader */
#HCB_comment_box .hcb-comment-tb,
#HCB_comment_box .hcb-comment-tb *,
#HCB_comment_box input[type="file"],
#HCB_comment_box .hcb-file-upload,
#HCB_comment_box .hcb-image-upload,
#HCB_comment_box [class*="image-upload"],
#HCB_comment_box [class*="file-upload"]{
  display:none !important;
}

/* Hide any standalone controls that HCB styles as tabs */
#HCB_comment_box button[title*="Image" i],
#HCB_comment_box input[value*="Add Image" i],
#HCB_comment_box a[title*="Image" i]{
  display:none !important;
}

/* Strip HCB's default tab/button chrome from anything left */
#HCB_comment_box button,
#HCB_comment_box input[type="button"],
#HCB_comment_box input[type="submit"]{
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-family:var(--sans) !important;
}

/* Form is now one clean line */
#HCB_comment_box #hcb_form{
  display:flex !important;
  align-items:flex-end !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Keep all identity fields invisible even if HCB re-injects them */
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_website,
#HCB_comment_box label[for="hcb_form_name"],
#HCB_comment_box label[for="hcb_form_email"],
#HCB_comment_box label[for="hcb_form_website"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Message area: clean editorial field */
#HCB_comment_box #hcb_form_content{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:54px !important;
  height:54px !important;
  margin:0 !important;
  padding:8px 2px !important;
  border:0 !important;
  border-bottom:1px solid #bdbac0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#5f5c62 !important;
  font-family:var(--sans) !important;
  font-size:.52rem !important;
  line-height:1.45 !important;
  resize:none !important;
  box-shadow:none !important;
  outline:none !important;
}

#HCB_comment_box #hcb_form_content:focus{
  border-bottom-color:#626066 !important;
}

/* Submit: simple thin outlined button */
#HCB_comment_box #hcb_submit,
#HCB_comment_box .submit{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:72px !important;
  height:31px !important;
  margin:0 !important;
  padding:0 11px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#656268 !important;
  font-family:var(--sans) !important;
  font-size:.46rem !important;
  font-weight:500 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#HCB_comment_box #hcb_submit:hover,
#HCB_comment_box .submit:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

/* Kill stray HCB headings / helper UI above the form */
#HCB_comment_box > h1,
#HCB_comment_box > h2,
#HCB_comment_box > h3,
#HCB_comment_box .home-desc,
#HCB_comment_box .hcb-icon,
#HCB_comment_box .hcb-link{
  display:none !important;
}

/* Keep the service footer visually quiet */
#HCB_comment_box > a{
  opacity:.35 !important;
  font-size:.40rem !important;
}

/* Mobile */
@media(max-width:600px){
  #HCB_comment_box #hcb_form{
    gap:8px !important;
  }

  #HCB_comment_box #hcb_form_content{
    min-height:50px !important;
    height:50px !important;
  }

  #HCB_comment_box #hcb_submit,
  #HCB_comment_box .submit{
    min-width:68px !important;
    padding:0 9px !important;
  }
}


/* =========================================================
   GUESTBOOK — MESSAGE / DRAWING
   ========================================================= */

.message-wall-panel{
  height:250px !important;
  padding-top:10px !important;
}

.guestbook-mode-switch{
  height:29px;
  display:flex;
  align-items:flex-end;
  gap:18px;
  border-bottom:1px solid var(--oe-line);
  margin-bottom:10px;
}

.guestbook-mode{
  height:29px;
  padding:0 0 7px !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
  color:#99969b !important;
  font-size:.47rem !important;
  cursor:pointer;
}

.guestbook-mode:hover{
  color:#67646a !important;
}

.guestbook-mode.is-active{
  color:#555258 !important;
  border-bottom-color:#666369 !important;
}

.guestbook-pane[hidden]{
  display:none !important;
}

.guestbook-pane{
  height:201px;
}

.message-wall-scroll{
  height:201px !important;
}

/* ---------- drawing ---------- */
.drawing-pane{
  overflow:hidden;
}

.drawing-toolbar{
  height:30px;
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:7px;
}

.drawing-control{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8f8c91;
  font-size:.44rem;
}

.drawing-color-control input[type="color"]{
  width:27px;
  height:18px;
  padding:0;
  border:1px solid #c9c7cb;
  background:transparent;
  cursor:pointer;
}

.drawing-color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:2px;
}
.drawing-color-control input[type="color"]::-webkit-color-swatch{
  border:0;
}

.drawing-size-control{
  min-width:138px;
}

.drawing-size-control input[type="range"]{
  width:80px;
  accent-color:#77747a;
}

.drawing-size-control output{
  width:15px;
  color:#6c696f;
  text-align:right;
}

.drawing-tool-button{
  padding:3px 0 4px !important;
  border:0 !important;
  border-bottom:1px solid #c6c3c8 !important;
  background:transparent !important;
  color:#858287 !important;
  font-size:.43rem !important;
  cursor:pointer;
}

.drawing-tool-button:hover,
.drawing-tool-button.is-active{
  color:#555258 !important;
  border-bottom-color:#666369 !important;
}

.drawing-canvas-wrap{
  position:relative;
  width:100%;
  height:122px;
  border:1px solid #dedde0;
  background:
    linear-gradient(#fdfdfd,#fdfdfd),
    repeating-linear-gradient(0deg,transparent 0 19px,#f0eff1 19px 20px);
  overflow:hidden;
}

#guestbookCanvas{
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  cursor:crosshair;
  touch-action:none;
}

.drawing-actions{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:6px;
}

#drawingStatus{
  min-width:0;
  overflow:hidden;
  color:#99969b;
  font-size:.42rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drawing-send{
  flex:0 0 auto;
  height:27px;
  padding:0 10px !important;
  border:1px solid #aaa7ac !important;
  background:transparent !important;
  color:#646167 !important;
  font-size:.44rem !important;
  cursor:pointer;
}

.drawing-send:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

.drawing-send:disabled{
  opacity:.45;
  cursor:wait;
}

/* HCB remains hidden in drawing mode; its image uploader is used internally */
.guestbook-pane[data-guestbook-pane="drawing"] #HCB_comment_box{
  position:absolute !important;
  left:-99999px !important;
}

/* make message mode slightly roomier now that panel is taller */
.guestbook-pane[data-guestbook-pane="message"] .message-wall-scroll{
  height:201px !important;
}

@media(max-width:600px){
  .message-wall-panel{
    height:265px !important;
  }

  .guestbook-pane,
  .message-wall-scroll{
    height:216px !important;
  }

  .drawing-toolbar{
    gap:9px;
  }

  .drawing-size-control{
    min-width:118px;
  }

  .drawing-size-control input[type="range"]{
    width:62px;
  }

  .drawing-canvas-wrap{
    height:135px;
  }

  .drawing-actions{
    height:36px;
  }
}


/* =========================================================
   GUESTBOOK UI FIX
   HCB form is now only an invisible backend.
   ========================================================= */

.message-wall-panel{
  height:286px !important;
  padding:10px 0 0 !important;
  background:#fdfdfd !important;
}

.guestbook-mode-switch{
  height:30px !important;
  display:flex !important;
  align-items:flex-end !important;
  gap:22px !important;
  margin:0 0 13px !important;
  border-bottom:1px solid #dedde0 !important;
}

.guestbook-mode{
  width:auto !important;
  height:30px !important;
  min-width:0 !important;
  padding:0 0 8px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
  color:#aaa7ac !important;
  font-size:.47rem !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.guestbook-mode:hover{
  background:transparent !important;
  color:#77747a !important;
}

.guestbook-mode.is-active{
  background:transparent !important;
  border-bottom-color:#666369 !important;
  color:#555258 !important;
}

.guestbook-pane{
  height:235px !important;
}

.guestbook-pane[hidden]{
  display:none !important;
}

/* ---------- custom message composer ---------- */
.custom-message-composer{
  width:100%;
  margin:0;
  padding:0 0 12px;
  border-bottom:1px solid #e7e5e8;
}

#customGuestbookMessage{
  display:block;
  width:100%;
  min-height:62px;
  height:62px;
  margin:0;
  padding:8px 0;
  border:0;
  border-bottom:1px solid #bbb8bd;
  border-radius:0;
  outline:0;
  resize:none;
  background:transparent;
  color:#5f5c62;
  font-family:var(--sans);
  font-size:.53rem;
  font-weight:300;
  line-height:1.5;
  box-shadow:none;
}

#customGuestbookMessage::placeholder{
  color:#aaa7ac;
  opacity:1;
}

#customGuestbookMessage:focus{
  border-bottom-color:#5f5c62;
}

.custom-message-footer{
  min-height:35px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  padding-top:7px;
}

#customMessageStatus{
  color:#aaa7ac;
  font-size:.42rem;
}

#customMessageSend{
  width:auto !important;
  min-width:68px !important;
  height:28px !important;
  margin:0 !important;
  padding:0 11px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#656268 !important;
  font-family:var(--sans) !important;
  font-size:.45rem !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#customMessageSend:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

#customMessageSend:disabled{
  opacity:.45;
  cursor:wait !important;
}

/* ---------- HCB backend ---------- */
/* hide the service's entire native form no matter what it injects */
#HCB_comment_box #hcb_form,
#HCB_comment_box form,
#HCB_comment_box .hcb-comment-tb,
#HCB_comment_box input[type="file"],
#HCB_comment_box input[type="submit"],
#HCB_comment_box button,
#HCB_comment_box textarea,
#HCB_comment_box input[type="text"],
#HCB_comment_box input[type="email"],
#HCB_comment_box input[type="url"],
#HCB_comment_box label,
#HCB_comment_box .hcb-icon,
#HCB_comment_box .home-desc,
#HCB_comment_box > h1,
#HCB_comment_box > h2,
#HCB_comment_box > h3{
  position:absolute !important;
  left:-99999px !important;
  top:-99999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* only published comments remain visible */
.guestbook-comments{
  height:113px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 4px 0 0;
  scrollbar-width:thin;
  scrollbar-color:#c9c7cb transparent;
}

.guestbook-comments::-webkit-scrollbar{
  width:3px;
}

.guestbook-comments::-webkit-scrollbar-thumb{
  background:#c9c7cb;
}

#HCB_comment_box{
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  background:transparent !important;
  color:#6d6a70 !important;
  font-family:var(--sans) !important;
}

/* comments */
#HCB_comment_box .comment{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 0 9px !important;
  padding:0 0 9px !important;
  border:0 !important;
  border-bottom:1px solid #e7e5e8 !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

#HCB_comment_box .author-name{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  opacity:1 !important;
  color:#969398 !important;
  font-size:.42rem !important;
  font-weight:400 !important;
}

#HCB_comment_box .hcb-comment-body,
#HCB_comment_box blockquote{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  margin:3px 0 0 !important;
  padding:0 !important;
  opacity:1 !important;
  border:0 !important;
  color:#68656b !important;
  font-size:.49rem !important;
  line-height:1.45 !important;
}

#HCB_comment_box .hcb-comment-tb{
  display:none !important;
}

/* empty-state line */
#HCB_comment_box .no-comments,
#HCB_comment_box p{
  color:#99969b !important;
  font-size:.45rem !important;
}

/* service attribution kept tiny */
#HCB_comment_box > a{
  display:none !important;
}

/* ---------- drawing ---------- */
.drawing-toolbar{
  height:31px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 8px !important;
}

.drawing-control{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#8f8c91 !important;
  font-size:.43rem !important;
}

.drawing-color-control input[type="color"]{
  width:28px !important;
  height:19px !important;
  padding:2px !important;
  border:1px solid #c9c7cb !important;
  border-radius:0 !important;
  background:transparent !important;
}

.drawing-size-control{
  min-width:145px !important;
}

.drawing-size-control input[type="range"]{
  width:88px !important;
  accent-color:#77747a;
}

.drawing-size-control output{
  width:16px;
  color:#6c696f;
  text-align:right;
}

.drawing-tool-button{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:3px 0 4px !important;
  border:0 !important;
  border-bottom:1px solid #c6c3c8 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#858287 !important;
  font-size:.43rem !important;
  box-shadow:none !important;
}

.drawing-tool-button:hover,
.drawing-tool-button.is-active{
  background:transparent !important;
  border-bottom-color:#666369 !important;
  color:#555258 !important;
}

.drawing-canvas-wrap{
  width:100%;
  height:155px !important;
  overflow:hidden;
  border:1px solid #dedde0;
  background:#fff;
}

#guestbookCanvas{
  display:block;
  width:100% !important;
  height:100% !important;
  background:#fff !important;
  cursor:crosshair;
  touch-action:none;
}

.drawing-actions{
  min-height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding-top:7px !important;
}

#drawingStatus{
  min-width:0;
  overflow:hidden;
  color:#99969b;
  font-size:.42rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drawing-send{
  width:auto !important;
  min-width:86px !important;
  height:28px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#646167 !important;
  font-size:.44rem !important;
  box-shadow:none !important;
}

.drawing-send:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

/* ---------- mobile ---------- */
@media(max-width:600px){
  .message-wall-panel{
    height:300px !important;
  }

  .guestbook-pane{
    height:249px !important;
  }

  .guestbook-comments{
    height:125px !important;
  }

  .drawing-toolbar{
    gap:9px !important;
    flex-wrap:wrap;
    height:54px !important;
    align-content:center !important;
  }

  .drawing-size-control{
    min-width:120px !important;
  }

  .drawing-size-control input[type="range"]{
    width:65px !important;
  }

  .drawing-canvas-wrap{
    height:145px !important;
  }
}


/* =========================================================
   LAYOUT FIX — guestbook opens downward + image/text gap
   ========================================================= */

/* ABOUT: create a real no-overlap gutter between art and reading column */
.about-art{
  left:0 !important;
  width:292px !important;
  max-width:292px !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  clip-path:inset(0 18px 0 0) !important;
}

.info-card{
  right:0 !important;
  width:392px !important;
  margin-left:22px !important;
}

/* keep the text/card clearly above and separate from the artwork */
.info-card,
.profile-block,
.about-copy,
.bottom-row{
  position:relative !important;
  z-index:5 !important;
}

/* =========================================================
   GUESTBOOK
   closed strip stays where it is, open panel grows DOWNWARD
   ========================================================= */

/* reserve room below the main composition so opening doesn't cover About */
.about-page{
  overflow:visible !important;
}

.page-composition{
  overflow:visible !important;
}

/* anchor the guestbook by TOP, not BOTTOM */
.message-wall{
  left:53px !important;
  top:477px !important;
  bottom:auto !important;
  width:430px !important;
  height:auto !important;
  z-index:10 !important;
}

/* closed state */
.message-wall.is-collapsed{
  height:42px !important;
}

/* compact trigger */
.message-wall-toggle{
  min-height:38px !important;
  padding:8px 0 7px !important;
}

.message-wall-toggle-copy{
  gap:10px !important;
}

.message-wall-toggle-copy strong{
  font-size:.48rem !important;
}

.message-wall-toggle-copy small{
  font-size:.39rem !important;
}

/* open panel now sits AFTER the trigger in normal flow */
.message-wall-panel{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:202px !important;
  margin:0 !important;
  padding:9px 0 0 !important;
  background:#fdfdfd !important;
  border-bottom:1px solid var(--oe-line) !important;
}

/* smaller tabs */
.guestbook-mode-switch{
  height:27px !important;
  margin:0 0 9px !important;
  gap:18px !important;
}

.guestbook-mode{
  height:27px !important;
  padding-bottom:6px !important;
  font-size:.43rem !important;
}

/* smaller content area */
.guestbook-pane{
  height:157px !important;
}

.custom-message-composer{
  padding-bottom:8px !important;
}

#customGuestbookMessage{
  min-height:45px !important;
  height:45px !important;
  padding:6px 0 !important;
  font-size:.49rem !important;
}

.custom-message-footer{
  min-height:31px !important;
  padding-top:5px !important;
}

#customMessageSend{
  min-width:58px !important;
  height:25px !important;
  padding:0 9px !important;
  font-size:.41rem !important;
}

#customMessageStatus{
  font-size:.39rem !important;
}

/* comments area: enough to preview, but not a giant panel */
.guestbook-comments{
  height:64px !important;
  padding-top:8px !important;
}

#HCB_comment_box .comment{
  margin-bottom:7px !important;
  padding-bottom:7px !important;
}

#HCB_comment_box .author-name{
  font-size:.39rem !important;
}

#HCB_comment_box .hcb-comment-body,
#HCB_comment_box blockquote{
  font-size:.45rem !important;
}

/* drawing mode also compact */
.drawing-toolbar{
  height:28px !important;
  gap:10px !important;
  margin-bottom:6px !important;
}

.drawing-control,
.drawing-tool-button{
  font-size:.39rem !important;
}

.drawing-size-control{
  min-width:115px !important;
}

.drawing-size-control input[type="range"]{
  width:60px !important;
}

.drawing-canvas-wrap{
  height:92px !important;
}

.drawing-actions{
  min-height:29px !important;
  padding-top:5px !important;
}

#drawingStatus{
  font-size:.38rem !important;
}

.drawing-send{
  min-width:74px !important;
  height:25px !important;
  padding:0 8px !important;
  font-size:.40rem !important;
}

/* When open, panel visually extends below the original composition. */
.message-wall.is-open{
  z-index:30 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:600px){
  .about-art{
    width:278px !important;
    max-width:278px !important;
    clip-path:inset(0 22px 0 0) !important;
  }

  .info-card{
    width:388px !important;
  }

  .message-wall{
    left:50% !important;
    top:477px !important;
    width:410px !important;
    transform:translateX(-50%) !important;
  }

  .message-wall-panel{
    height:218px !important;
  }

  .guestbook-pane{
    height:172px !important;
  }

  .guestbook-comments{
    height:70px !important;
  }

  .drawing-toolbar{
    height:42px !important;
    flex-wrap:wrap !important;
    align-content:center !important;
  }

  .drawing-canvas-wrap{
    height:95px !important;
  }
}


/* =========================================================
   ABOUT + GUESTBOOK STRUCTURAL FIX V2
   ========================================================= */

/* Restore the fixed-page behavior: everything now fits the viewport again. */
html,
body{
  overflow:hidden !important;
}

.about-page{
  height:100dvh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

.page-composition{
  overflow:visible !important;
}

/* ---------------------------------------------------------
   ABOUT
   Real two-column separation: art can no longer sit under text.
   --------------------------------------------------------- */
.about-layout{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:560px !important;
  height:360px !important;
  overflow:visible !important;
}

.about-art{
  position:absolute !important;
  z-index:1 !important;
  left:-8px !important;
  top:0 !important;
  width:245px !important;
  max-width:245px !important;
  height:360px !important;
  transform:none !important;
  object-fit:contain !important;
  object-position:left bottom !important;
  clip-path:none !important;
  opacity:.78 !important;
}

/* text column begins only AFTER the image column */
.info-card{
  position:absolute !important;
  z-index:5 !important;
  left:255px !important;
  right:auto !important;
  top:0 !important;
  width:305px !important;
  height:360px !important;
  margin:0 !important;
  overflow:hidden !important;
}

/* make the editorial content breathe inside the narrower column */
.profile-block{
  padding-left:0 !important;
  padding-right:0 !important;
}

.about-copy{
  padding-left:0 !important;
  padding-right:0 !important;
}

.about-panel p{
  font-size:.64rem !important;
  line-height:1.48 !important;
}

.bottom-row{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------------------------------------------------------
   GUESTBOOK
   Sits directly under About and expands downward.
   --------------------------------------------------------- */
.message-wall{
  position:absolute !important;
  z-index:12 !important;
  left:65px !important;
  top:372px !important;
  bottom:auto !important;
  width:430px !important;
  height:auto !important;
  transform:none !important;
  background:#fdfdfd !important;
}

/* collapsed line */
.message-wall.is-collapsed{
  height:38px !important;
}

.message-wall-toggle{
  width:100% !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 !important;
}

.message-wall-toggle-copy{
  gap:9px !important;
}

.message-wall-toggle-copy strong{
  font-size:.46rem !important;
}

.message-wall-toggle-copy small{
  font-size:.37rem !important;
}

.message-wall-toggle-icon{
  font-size:.68rem !important;
}

/* open content: intentionally compact */
.message-wall-panel{
  position:absolute !important;
  left:0 !important;
  top:38px !important;
  width:100% !important;
  height:166px !important;
  margin:0 !important;
  padding:8px 0 0 !important;
  background:#fdfdfd !important;
  border-bottom:1px solid var(--oe-line) !important;
}

.message-wall-panel[hidden]{
  display:none !important;
}

.guestbook-mode-switch{
  height:25px !important;
  margin:0 0 7px !important;
  gap:16px !important;
}

.guestbook-mode{
  height:25px !important;
  padding:0 0 5px !important;
  font-size:.40rem !important;
}

.guestbook-pane{
  height:126px !important;
}

.custom-message-composer{
  padding-bottom:6px !important;
}

#customGuestbookMessage{
  min-height:38px !important;
  height:38px !important;
  padding:5px 0 !important;
  font-size:.46rem !important;
}

.custom-message-footer{
  min-height:27px !important;
  padding-top:4px !important;
}

#customMessageStatus{
  font-size:.36rem !important;
}

#customMessageSend{
  min-width:54px !important;
  height:23px !important;
  padding:0 8px !important;
  font-size:.38rem !important;
}

.guestbook-comments{
  height:47px !important;
  padding-top:6px !important;
}

/* Drawing mode compact enough to stay inside the same panel */
.drawing-toolbar{
  height:25px !important;
  margin:0 0 5px !important;
  gap:8px !important;
}

.drawing-control,
.drawing-tool-button{
  font-size:.36rem !important;
}

.drawing-size-control{
  min-width:102px !important;
}

.drawing-size-control input[type="range"]{
  width:52px !important;
}

.drawing-color-control input[type="color"]{
  width:24px !important;
  height:17px !important;
}

.drawing-canvas-wrap{
  height:72px !important;
}

.drawing-actions{
  min-height:25px !important;
  padding-top:4px !important;
}

#drawingStatus{
  font-size:.34rem !important;
}

.drawing-send{
  min-width:68px !important;
  height:22px !important;
  padding:0 7px !important;
  font-size:.36rem !important;
}

/* keep guestbook in front only while open, but never over the About */
.message-wall.is-open{
  z-index:30 !important;
}

/* ---------------------------------------------------------
   MOBILE
   Same composition, scaled by the site's existing media rules.
   --------------------------------------------------------- */
@media(max-width:600px){
  .about-art{
    left:-4px !important;
    width:238px !important;
    max-width:238px !important;
  }

  .info-card{
    left:250px !important;
    width:310px !important;
  }

  .message-wall{
    left:65px !important;
    top:372px !important;
    width:430px !important;
    transform:none !important;
  }

  .message-wall-panel{
    height:174px !important;
  }

  .guestbook-pane{
    height:134px !important;
  }

  .drawing-toolbar{
    height:31px !important;
    flex-wrap:nowrap !important;
  }

  .drawing-canvas-wrap{
    height:73px !important;
  }
}


/* =========================================================
   CENTER + LIFT COMPOSITION
   ========================================================= */

/* Move the entire inner site upward while keeping it centered */
.page-composition{
  top:46% !important;
  transform:translate(-50%,-50%) !important;
}

/* navigation sits a little closer to the content */
.section-nav{
  transform:translateY(-5px) !important;
}

/* ---------------------------------------------------------
   ABOUT — tighter centered composition
   --------------------------------------------------------- */
.about-layout{
  left:50% !important;
  width:520px !important;
  transform:translateX(-50%) !important;
}

/* image comes slightly inward and up */
.about-art{
  left:4px !important;
  top:-10px !important;
  width:228px !important;
  max-width:228px !important;
  height:350px !important;
}

/* text block moves inward too, reducing the visual split */
.info-card{
  left:238px !important;
  top:-6px !important;
  width:282px !important;
  height:350px !important;
}

/* slightly tighter internal rhythm */
.profile-block{
  height:58px !important;
}

.about-copy{
  padding-top:6px !important;
}

.about-tabs{
  margin-bottom:1px !important;
}

.about-panel p{
  font-size:.62rem !important;
  line-height:1.45 !important;
}

.bottom-row{
  height:54px !important;
}

/* ---------------------------------------------------------
   GUESTBOOK — centered and closer to About
   --------------------------------------------------------- */
.message-wall{
  left:50% !important;
  top:350px !important;
  width:405px !important;
  transform:translateX(-50%) !important;
}

/* collapsed line slightly shorter */
.message-wall-toggle{
  min-height:35px !important;
  height:35px !important;
}

.message-wall.is-collapsed{
  height:35px !important;
}

/* panel opens directly below the shorter trigger */
.message-wall-panel{
  top:35px !important;
  height:158px !important;
}

/* even more compact internals so drawing fits fully */
.guestbook-pane{
  height:120px !important;
}

.guestbook-mode-switch{
  margin-bottom:6px !important;
}

#customGuestbookMessage{
  min-height:34px !important;
  height:34px !important;
}

.custom-message-footer{
  min-height:25px !important;
}

.guestbook-comments{
  height:43px !important;
}

.drawing-toolbar{
  height:23px !important;
  margin-bottom:4px !important;
}

.drawing-canvas-wrap{
  height:68px !important;
}

.drawing-actions{
  min-height:23px !important;
  padding-top:3px !important;
}

/* ---------------------------------------------------------
   MOBILE / SMALL WINDOWS
   Keep centered scaling but lift it as well.
   --------------------------------------------------------- */
@media(max-width:600px){
  .page-composition{
    top:44% !important;
  }

  .about-layout{
    width:520px !important;
  }

  .about-art{
    left:4px !important;
    top:-10px !important;
    width:226px !important;
  }

  .info-card{
    left:238px !important;
    top:-6px !important;
    width:282px !important;
  }

  .message-wall{
    left:50% !important;
    top:350px !important;
    width:405px !important;
    transform:translateX(-50%) !important;
  }

  .message-wall-panel{
    height:164px !important;
  }

  .guestbook-pane{
    height:126px !important;
  }

  .drawing-canvas-wrap{
    height:70px !important;
  }
}

/* very short screens: lift a bit more */
@media(max-height:720px){
  .page-composition{
    top:43% !important;
  }
}


/* =========================================================
   COMPACT CENTERED HUB
   ========================================================= */

/* Smaller top navigation, centered over the composition */
.section-nav{
  left:50% !important;
  width:420px !important;
  transform:translate(-50%,-7px) !important;
  display:grid !important;
  grid-template-columns:repeat(5, 68px) !important;
  justify-content:space-between !important;
  gap:0 !important;
}

.section-link{
  width:68px !important;
  min-width:68px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
  font-size:.54rem !important;
}

/* Re-center and tighten the About composition */
.about-layout{
  left:50% !important;
  width:500px !important;
  transform:translateX(-50%) !important;
}

.about-art{
  left:0 !important;
  top:-12px !important;
  width:218px !important;
  max-width:218px !important;
  height:348px !important;
}

.info-card{
  left:228px !important;
  top:-7px !important;
  width:272px !important;
  height:348px !important;
}

/* Slightly tighter copy so the narrower column still breathes */
.about-panel p{
  font-size:.605rem !important;
  line-height:1.44 !important;
}

.profile-details{
  font-size:.61rem !important;
}

/* Guestbook follows the same center line */
.message-wall{
  left:50% !important;
  top:346px !important;
  width:380px !important;
  transform:translateX(-50%) !important;
}

/* Bring the complete composition a touch higher */
.page-composition{
  top:44.5% !important;
}

/* Mobile keeps identical centered geometry through the site's scaling */
@media(max-width:600px){
  .section-nav{
    left:50% !important;
    width:420px !important;
    transform:translate(-50%,-7px) !important;
    grid-template-columns:repeat(5,68px) !important;
  }

  .about-layout{
    left:50% !important;
    width:500px !important;
    transform:translateX(-50%) !important;
  }

  .about-art{
    left:0 !important;
    width:218px !important;
  }

  .info-card{
    left:228px !important;
    width:272px !important;
  }

  .message-wall{
    left:50% !important;
    width:380px !important;
    transform:translateX(-50%) !important;
  }
}


/* =========================================================
   GLOBAL CHAT DRAWER + CENTERING TRANSITION
   ========================================================= */

/* Default: composition is properly centered. */
.page-composition{
  top:50% !important;
  transform:translate(-50%,-50%) scale(1) !important;
  transform-origin:center center !important;
  transition:
    top .42s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1) !important;
}

/* Keep the compact hub centered. */
.section-nav{
  left:50% !important;
  width:390px !important;
  transform:translate(-50%,-7px) !important;
  grid-template-columns:repeat(5,62px) !important;
  justify-content:space-between !important;
}

.section-link{
  width:62px !important;
  min-width:62px !important;
  font-size:.52rem !important;
}

.about-layout{
  left:50% !important;
  width:500px !important;
  transform:translateX(-50%) !important;
}

/* Composer itself remains discreet. */
.message-wall{
  left:50% !important;
  top:346px !important;
  width:365px !important;
  transform:translateX(-50%) !important;
}

.message-wall-toggle{
  min-height:34px !important;
  height:34px !important;
}

.message-wall.is-collapsed{
  height:34px !important;
}

.message-wall-panel{
  top:34px !important;
  height:150px !important;
  padding-top:7px !important;
}

.guestbook-pane{
  height:112px !important;
}

.guestbook-mode-switch{
  height:24px !important;
  margin-bottom:6px !important;
}

.guestbook-mode{
  height:24px !important;
  font-size:.39rem !important;
}

#customGuestbookMessage{
  min-height:42px !important;
  height:42px !important;
}

.drawing-toolbar{
  height:24px !important;
  margin-bottom:4px !important;
}

.drawing-canvas-wrap{
  height:62px !important;
}

.drawing-actions{
  min-height:22px !important;
}

/* Smooth resize/recenter only while the composer is open. */
html.composer-open .page-composition{
  top:46% !important;
  transform:translate(-50%,-50%) scale(.92) !important;
}

/* HCB exists only as a backend. */
.guestbook-backend{
  position:fixed !important;
  left:-10000px !important;
  top:-10000px !important;
  width:420px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Floating chat button — outside all site views, so it stays everywhere. */
.messages-fab{
  position:fixed !important;
  z-index:1001 !important;
  right:24px !important;
  bottom:22px !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid #b9b6bb !important;
  border-radius:50% !important;
  background:rgba(253,253,253,.97) !important;
  color:#666369 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background .18s ease,color .18s ease,transform .18s ease !important;
}

.messages-fab:hover,
.messages-fab[aria-expanded="true"]{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}

.messages-fab svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.35 !important;
  stroke-linejoin:round !important;
}

/* Message archive drawer. */
.messages-drawer{
  position:fixed !important;
  z-index:1000 !important;
  right:24px !important;
  bottom:74px !important;
  width:290px !important;
  max-height:360px !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  border:1px solid #d7d5d9 !important;
  background:#fdfdfd !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(10px) scale(.985) !important;
  transform-origin:bottom right !important;
  pointer-events:none !important;
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease !important;
}

.messages-drawer.is-open{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}

.messages-drawer-head{
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:11px 12px 10px !important;
  border-bottom:1px solid #e2e0e3 !important;
}

.messages-drawer-head strong{
  display:block !important;
  color:#5e5b61 !important;
  font-size:.54rem !important;
  font-weight:500 !important;
}

.messages-drawer-head small{
  display:block !important;
  margin-top:3px !important;
  color:#9b989d !important;
  font-size:.40rem !important;
}

.messages-drawer-close{
  width:24px !important;
  height:24px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#858287 !important;
  font-size:.78rem !important;
  cursor:pointer !important;
}

.messages-drawer-list{
  min-height:80px !important;
  max-height:300px !important;
  overflow-y:auto !important;
  padding:4px 12px 11px !important;
  scrollbar-width:thin !important;
  scrollbar-color:#c9c7cb transparent !important;
}

.messages-empty{
  display:block !important;
  padding:18px 0 !important;
  color:#a09da2 !important;
  font-size:.44rem !important;
}

.drawer-message{
  padding:11px 0 !important;
  border-bottom:1px solid #eceaed !important;
}

.drawer-message:last-child{
  border-bottom:0 !important;
}

.drawer-message p,
.drawer-message blockquote,
.drawer-message .hcb-comment-body{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#666369 !important;
  font-size:.49rem !important;
  line-height:1.5 !important;
}

.drawer-message img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  margin-top:6px !important;
  border:1px solid #e1dfe2 !important;
}

@media(max-width:600px){
  html.composer-open .page-composition{
    top:46% !important;
    transform:translate(-50%,-50%) scale(.90) !important;
  }

  .messages-fab{
    right:14px !important;
    bottom:14px !important;
    width:40px !important;
    height:40px !important;
  }

  .messages-drawer{
    right:14px !important;
    bottom:66px !important;
    width:min(290px,calc(100vw - 28px)) !important;
    max-height:52vh !important;
  }
}

@media(max-height:720px){
  html.composer-open .page-composition{
    top:44% !important;
    transform:translate(-50%,-50%) scale(.86) !important;
  }
}


/* =========================================================
   CLEAN MESSAGE DRAWER HEADER
   ========================================================= */
.messages-drawer-head{
  min-height:34px !important;
  height:34px !important;
  justify-content:flex-end !important;
  padding:5px 7px !important;
}

.messages-drawer-head > div{
  display:none !important;
}

.messages-drawer-close{
  margin:0 !important;
}

/* =========================================================
   MOBILE — CENTER EVERY INTERNAL PAGE CONSISTENTLY
   ========================================================= */

/* Base centering logic for all narrow screens */
@media(max-width:760px){
  html,
  body{
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .about-page{
    position:relative !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  /*
   Keep one fixed 560px design canvas and scale it from the exact
   center of the viewport. This preserves About / Rules / Utts /
   Concerts / GOM in the same visual system instead of letting
   individual old media queries shift them differently.
  */
  .page-composition{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:560px !important;
    height:520px !important;
    margin:0 !important;
    transform-origin:center center !important;
  }

  /* Main navigation */
  .section-nav{
    left:50% !important;
    width:390px !important;
    transform:translateX(-50%) !important;
    grid-template-columns:repeat(5,62px) !important;
    justify-content:space-between !important;
    gap:0 !important;
  }

  /* Main view area */
  .views-shell{
    left:50% !important;
    width:560px !important;
    transform:translateX(-50%) !important;
  }

  .site-view{
    left:0 !important;
    right:auto !important;
    width:560px !important;
  }

  /* ABOUT */
  .about-layout{
    left:50% !important;
    width:500px !important;
    transform:translateX(-50%) !important;
  }

  .about-art{
    left:0 !important;
    width:218px !important;
    max-width:218px !important;
  }

  .info-card{
    left:228px !important;
    width:272px !important;
  }

  .message-wall{
    left:50% !important;
    width:365px !important;
    transform:translateX(-50%) !important;
  }

  /* RULES */
  .rules-new{
    left:50% !important;
    right:auto !important;
    width:540px !important;
    transform:translateX(-50%) !important;
  }

  /* UTTS */
  .utts-shell{
    left:50% !important;
    right:auto !important;
    width:540px !important;
    transform:translateX(-50%) !important;
  }

  .utts-stage{
    left:0 !important;
    width:540px !important;
    transform:none !important;
  }

  /* CONCERTS */
  .polaroid-shell{
    left:50% !important;
    right:auto !important;
    width:540px !important;
    transform:translateX(-50%) !important;
  }

  /* GOM / generic placeholder */
  .placeholder-card{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  /* Floating utility is not part of scaled composition. */
  .messages-fab{
    position:fixed !important;
    right:14px !important;
    bottom:14px !important;
    transform:none !important;
  }

  .messages-drawer{
    position:fixed !important;
    right:14px !important;
    bottom:64px !important;
    width:min(290px,calc(100vw - 28px)) !important;
    max-height:52vh !important;
    transform-origin:bottom right !important;
  }

  .messages-drawer.is-open{
    transform:translateY(0) scale(1) !important;
  }
}

/* Scale by screen width, always around the true center. */
@media(max-width:760px) and (min-width:641px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.94) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.87) !important;
  }
}

@media(max-width:640px) and (min-width:561px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.88) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.81) !important;
  }
}

@media(max-width:560px) and (min-width:501px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.80) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.74) !important;
  }
}

@media(max-width:500px) and (min-width:441px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.72) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.67) !important;
  }
}

@media(max-width:440px) and (min-width:401px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.65) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.60) !important;
  }
}

@media(max-width:400px) and (min-width:361px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.59) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.55) !important;
  }
}

@media(max-width:360px){
  .page-composition{
    transform:translate(-50%,-50%) scale(.53) !important;
  }
  html.composer-open .page-composition{
    top:47% !important;
    transform:translate(-50%,-50%) scale(.49) !important;
  }
}

/* Short mobile screens need vertical fit too. */
@media(max-width:760px) and (max-height:720px){
  .page-composition{
    top:48% !important;
  }
}

@media(max-width:760px) and (max-height:620px){
  .page-composition{
    top:47% !important;
  }
}


/* =========================================================
   MODAL MESSAGE / DRAWING COMPOSER
   ========================================================= */

/* Keep page centered at all times; opening the modal no longer resizes it. */
.page-composition,
html.composer-open .page-composition{
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}

/* Trigger remains discreet below the About composition. */
.message-wall{
  left:50% !important;
  top:346px !important;
  width:330px !important;
  height:34px !important;
  transform:translateX(-50%) !important;
}

.message-wall-toggle{
  width:100% !important;
  min-height:34px !important;
  height:34px !important;
}

/* Any old inline panel is gone. */
.message-wall-panel{
  display:none !important;
}

/* Backdrop */
.message-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(87,85,90,.22);
  backdrop-filter:blur(3px);
  opacity:0;
  animation:messageBackdropIn .22s ease forwards;
}

@keyframes messageBackdropIn{
  to{opacity:1}
}

/* Square floating box */
.message-modal{
  position:fixed;
  z-index:1200;
  left:50%;
  top:50%;
  width:330px;
  height:330px;
  padding:28px 24px 22px;
  border:1px solid #c9c7cb;
  background:#fdfdfd;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-47%) scale(.96);
  pointer-events:none;
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22,.61,.36,1),
    visibility .24s ease;
}

.message-modal.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}

.message-modal-close{
  position:absolute !important;
  right:10px !important;
  top:8px !important;
  width:24px !important;
  height:24px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#858287 !important;
  font-size:.78rem !important;
  cursor:pointer !important;
}

.message-modal-inner{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:30px minmax(0,1fr);
  gap:14px;
}

.message-modal .guestbook-mode-switch{
  height:30px !important;
  margin:0 !important;
  border-bottom:1px solid #dedde0 !important;
}

.message-modal .guestbook-mode{
  height:30px !important;
  font-size:.46rem !important;
  padding-bottom:8px !important;
}

.message-modal .guestbook-pane{
  height:235px !important;
  min-height:0 !important;
}

/* Message */
.message-modal .custom-message-composer{
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  padding:0 !important;
  border:0 !important;
}

.message-modal #customGuestbookMessage{
  width:100%;
  min-height:0 !important;
  height:100% !important;
  padding:10px 0 !important;
  border:0 !important;
  border-bottom:1px solid #bbb8bd !important;
  background:transparent !important;
  color:#5f5c62 !important;
  font-size:.55rem !important;
  line-height:1.55 !important;
  resize:none !important;
  outline:none !important;
}

.message-modal .custom-message-footer{
  min-height:31px !important;
  padding:0 !important;
  align-items:center !important;
}

.message-modal #customMessageStatus{
  font-size:.40rem !important;
}

.message-modal #customMessageSend{
  min-width:64px !important;
  height:28px !important;
}

/* Drawing */
.message-modal .drawing-pane{
  height:235px !important;
  display:grid;
  grid-template-rows:32px minmax(0,1fr) 32px;
  gap:8px;
}

.message-modal .drawing-pane[hidden]{
  display:none !important;
}

.message-modal .drawing-toolbar{
  height:32px !important;
  margin:0 !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

.message-modal .drawing-control,
.message-modal .drawing-tool-button{
  font-size:.40rem !important;
}

.message-modal .drawing-size-control{
  min-width:112px !important;
}

.message-modal .drawing-size-control input[type="range"]{
  width:58px !important;
}

.message-modal .drawing-canvas-wrap{
  width:100%;
  height:100% !important;
  min-height:0 !important;
  border:1px solid #dedde0 !important;
}

.message-modal #guestbookCanvas{
  width:100% !important;
  height:100% !important;
}

.message-modal .drawing-actions{
  min-height:32px !important;
  padding:0 !important;
}

.message-modal #drawingStatus{
  font-size:.38rem !important;
}

.message-modal .drawing-send{
  min-width:78px !important;
  height:27px !important;
}

/* Prevent accidental background interaction while modal is open. */
html.message-modal-open .page-composition,
html.message-modal-open .messages-fab{
  pointer-events:none;
}

/* Chat drawer stays usable after modal closes. */

/* Mobile */
@media(max-width:600px){
  .message-modal{
    width:min(330px,calc(100vw - 34px));
    height:min(330px,calc(100vw - 34px));
    min-height:300px;
    padding:26px 20px 19px;
  }

  .message-modal-inner{
    gap:11px;
  }

  .message-modal .guestbook-pane{
    height:auto !important;
  }

  .message-modal .drawing-toolbar{
    gap:7px !important;
  }

  .message-modal .drawing-size-control{
    min-width:96px !important;
  }

  .message-modal .drawing-size-control input[type="range"]{
    width:46px !important;
  }

  .message-wall{
    width:315px !important;
  }
}


/* =========================================================
   TRUE FULL-PAGE MODAL + GUESTBOOK FIX
   ========================================================= */

.message-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:5000 !important;
  background:rgba(76,74,79,.36) !important;
  -webkit-backdrop-filter:blur(10px) grayscale(.15) !important;
  backdrop-filter:blur(10px) grayscale(.15) !important;
  opacity:0 !important;
}

.message-modal-backdrop.is-open{
  opacity:1 !important;
  animation:fwBackdrop .24s ease forwards !important;
}

@keyframes fwBackdrop{
  from{opacity:0}
  to{opacity:1}
}

.message-modal{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  z-index:5010 !important;
  width:330px !important;
  height:330px !important;
  transform:translate(-50%,-46%) scale(.965) !important;
  box-shadow:0 24px 70px rgba(40,38,42,.18) !important;
}

.message-modal.is-open{
  transform:translate(-50%,-50%) scale(1) !important;
}

/* Full page underneath is softened while the modal is open. */
html.message-modal-open body > *,
html.message-modal-open .about-page{
  /* backdrop-filter does the visual blur; this prevents stray interactions */
}

html.message-modal-open .page-composition,
html.message-modal-open .back-link,
html.message-modal-open .messages-fab,
html.message-modal-open .messages-drawer{
  pointer-events:none !important;
  user-select:none !important;
}

/* No more resize/reposition when opening the composer. */
html.message-modal-open .page-composition,
html.composer-open .page-composition{
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}

/* HCB must render normally offscreen or its form never exists. */
.guestbook-backend{
  position:fixed !important;
  left:-1400px !important;
  top:0 !important;
  width:440px !important;
  min-height:600px !important;
  display:block !important;
  overflow:visible !important;
  opacity:.001 !important;
  pointer-events:none !important;
  z-index:-5 !important;
}

.guestbook-backend #HCB_comment_box{
  width:420px !important;
  min-height:300px !important;
  display:block !important;
}

/* Local preview drawings in the chat archive. */
.drawer-message img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  background:#fff !important;
  border:1px solid #dedde0 !important;
}

@media(max-width:600px){
  .message-modal-backdrop{
    -webkit-backdrop-filter:blur(8px) grayscale(.15) !important;
    backdrop-filter:blur(8px) grayscale(.15) !important;
  }

  .message-modal{
    width:min(330px,calc(100vw - 30px)) !important;
    height:min(330px,calc(100vw - 30px)) !important;
  }
}


/* =========================================================
   NATIVE HCB FORM INSIDE CUSTOM MODAL
   The real HTML Comment Box form is now the visible message UI.
   ========================================================= */

.hcb-live-host{
  width:100%;
  height:100%;
  overflow:hidden;
}

.hcb-live-host #HCB_comment_box{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#666369 !important;
  font-family:var(--sans) !important;
}

/* Hide every identity field. HCB accepts anonymous comments. */
.hcb-live-host #hcb_form_name,
.hcb-live-host #hcb_form_email,
.hcb-live-host #hcb_form_website,
.hcb-live-host label[for="hcb_form_name"],
.hcb-live-host label[for="hcb_form_email"],
.hcb-live-host label[for="hcb_form_website"]{
  display:none !important;
}

/* Hide HCB chrome, comments, moderation links and image control in MESSAGE mode. */
.hcb-live-host #HCB_comment_box > h1,
.hcb-live-host #HCB_comment_box > h2,
.hcb-live-host #HCB_comment_box > h3,
.hcb-live-host .home-desc,
.hcb-live-host .hcb-icon,
.hcb-live-host .hcb-comment-tb,
.hcb-live-host .comment,
.hcb-live-host .hcb-link,
.hcb-live-host .likes,
.hcb-live-host .hcb-file-upload,
.hcb-live-host input[type="file"],
.hcb-live-host a[href*="htmlcommentbox"],
.hcb-live-host a[title*="image" i],
.hcb-live-host button[title*="image" i]{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Actual HCB form */
.hcb-live-host #hcb_form{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) 32px !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* Actual native HCB textarea */
.hcb-live-host #hcb_form_content{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:10px 0 !important;
  border:0 !important;
  border-bottom:1px solid #bbb8bd !important;
  border-radius:0 !important;
  outline:0 !important;
  resize:none !important;
  background:transparent !important;
  color:#5f5c62 !important;
  font-family:var(--sans) !important;
  font-size:.55rem !important;
  font-weight:300 !important;
  line-height:1.55 !important;
  box-shadow:none !important;
}

.hcb-live-host #hcb_form_content::placeholder{
  color:#aaa7ac !important;
}

.hcb-live-host #hcb_form_content:focus{
  border-bottom-color:#5f5c62 !important;
}

/* Native HCB send button */
.hcb-live-host #hcb_submit{
  justify-self:end !important;
  align-self:center !important;
  width:auto !important;
  min-width:64px !important;
  height:28px !important;
  margin:0 !important;
  padding:0 11px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#656268 !important;
  font-family:var(--sans) !important;
  font-size:.45rem !important;
  font-weight:500 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

.hcb-live-host #hcb_submit:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

/* Hide service messages/buttons that would break the square modal layout. */
.hcb-live-host .btn,
.hcb-live-host .hcb-comment-body + .hcb-comment-tb,
.hcb-live-host input[type="checkbox"],
.hcb-live-host .subscribe{
  /* Don't globally hide #hcb_submit. */
}

.hcb-live-host .preview-hcb-form{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 32px;
  gap:12px;
}

#previewGuestbookText{
  width:100%;
  height:100%;
  padding:10px 0;
  border:0;
  border-bottom:1px solid #bbb8bd;
  border-radius:0;
  outline:0;
  resize:none;
  background:transparent;
  color:#5f5c62;
  font-family:var(--sans);
  font-size:.55rem;
  line-height:1.55;
}

.preview-hcb-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.preview-hcb-footer span{
  color:#99969b;
  font-size:.40rem;
}

#previewGuestbookSend{
  min-width:64px !important;
  height:28px !important;
  padding:0 11px !important;
  border:1px solid #aaa7ac !important;
  background:transparent !important;
  color:#656268 !important;
  font-size:.45rem !important;
}

/* Comments remain available in DOM for the floating archive, even though hidden in modal. */
.drawer-message img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* The modal message pane now uses all available vertical space. */
.message-modal .guestbook-pane[data-guestbook-pane="message"]{
  height:235px !important;
  overflow:hidden !important;
}



/* =========================================================
   HCB VISIBILITY FIX — authoritative final layer
   ========================================================= */

/* The live HCB is inside the modal now, so undo every old backend hiding rule. */
.message-modal .hcb-live-host,
.message-modal .hcb-live-host #HCB_comment_box,
.message-modal .hcb-live-host #hcb_form,
.message-modal .hcb-live-host form{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  pointer-events:auto !important;
  transform:none !important;
  z-index:auto !important;
}

/* HCB itself may wrap the form in extra divs. Keep those wrappers visible. */
.message-modal .hcb-live-host #HCB_comment_box > div,
.message-modal .hcb-live-host #HCB_comment_box .hcb-form,
.message-modal .hcb-live-host #HCB_comment_box .hcb-form-wrap,
.message-modal .hcb-live-host #HCB_comment_box .hcb-comment-tb{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

/* Keep only the identity/service chrome hidden. */
.message-modal .hcb-live-host #hcb_form_name,
.message-modal .hcb-live-host #hcb_form_email,
.message-modal .hcb-live-host #hcb_form_website,
.message-modal .hcb-live-host label[for="hcb_form_name"],
.message-modal .hcb-live-host label[for="hcb_form_email"],
.message-modal .hcb-live-host label[for="hcb_form_website"],
.message-modal .hcb-live-host .home-desc,
.message-modal .hcb-live-host .hcb-icon,
.message-modal .hcb-live-host .comment,
.message-modal .hcb-live-host .likes,
.message-modal .hcb-live-host .hcb-link,
.message-modal .hcb-live-host a[href*="htmlcommentbox"],
.message-modal .hcb-live-host input[type="file"]{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  display:block !important;
  visibility:hidden !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Make the actual native textarea unmistakably visible. */
.message-modal .hcb-live-host #hcb_form_content,
.message-modal .hcb-live-host textarea#hcb_form_content{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:100% !important;
  height:165px !important;
  min-height:165px !important;
  max-height:165px !important;
  margin:0 !important;
  padding:12px 0 !important;
  border:0 !important;
  border-bottom:1px solid #bbb8bd !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#5f5c62 !important;
  font-family:inherit !important;
  font-size:.55rem !important;
  line-height:1.55 !important;
  resize:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* Native send button. */
.message-modal .hcb-live-host #hcb_submit{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  float:right !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:auto !important;
  min-width:64px !important;
  height:28px !important;
  margin:12px 0 0 !important;
  padding:0 11px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#656268 !important;
  font-family:inherit !important;
  font-size:.45rem !important;
  line-height:26px !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

/* Hide HCB's own add-image toolbar in message mode without hiding wrappers/form. */
.message-modal .hcb-live-host .hcb-comment-tb button:not(#hcb_submit),
.message-modal .hcb-live-host .hcb-comment-tb a,
.message-modal .hcb-live-host .hcb-comment-tb input:not(#hcb_submit){
  display:none !important;
}

/* If HCB injects a captcha/verification area, do NOT hide it. */
.message-modal .hcb-live-host iframe,
.message-modal .hcb-live-host .hcb-captcha,
.message-modal .hcb-live-host [class*="captcha"]{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  max-width:100% !important;
}

/* The pane must not clip any verification UI. */
.message-modal .guestbook-pane[data-guestbook-pane="message"]{
  height:235px !important;
  min-height:235px !important;
  overflow:auto !important;
}


/* =========================================================
   ALTERSPRING-ONLY MESSAGE MODAL
   ========================================================= */

/* Old guestbook/HCB/drawing elements are no longer part of the HTML. */

.message-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:5000 !important;
  background:rgba(76,74,79,.36) !important;
  -webkit-backdrop-filter:blur(10px) grayscale(.15) !important;
  backdrop-filter:blur(10px) grayscale(.15) !important;
  opacity:0 !important;
  transition:opacity .24s ease !important;
}

.message-modal-backdrop.is-open{
  opacity:1 !important;
}

.alterspring-modal{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  z-index:5010 !important;
  width:330px !important;
  height:330px !important;
  padding:30px 26px 24px !important;
  border:1px solid #c9c7cb !important;
  border-radius:0 !important;
  background:#fdfdfd !important;
  box-shadow:0 24px 70px rgba(40,38,42,.18) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%,-46%) scale(.965) !important;
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22,.61,.36,1),
    visibility .24s ease !important;
}

.alterspring-modal.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%,-50%) scale(1) !important;
}

.alterspring-modal-inner{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.alterspring-eyebrow{
  display:block !important;
  width:100% !important;
  padding:0 0 12px !important;
  border-bottom:1px solid #dedde0 !important;
  color:#77747a !important;
  font-size:.43rem !important;
  font-weight:500 !important;
  letter-spacing:.035em !important;
}

.alterspring-copy{
  margin-top:45px !important;
  max-width:235px !important;
}

.alterspring-copy strong{
  display:block !important;
  margin:0 0 12px !important;
  color:#59565c !important;
  font-size:.78rem !important;
  font-weight:500 !important;
  line-height:1.2 !important;
}

.alterspring-copy p{
  margin:0 !important;
  color:#858287 !important;
  font-size:.48rem !important;
  font-weight:300 !important;
  line-height:1.65 !important;
}

.alterspring-ask-button{
  width:100% !important;
  height:34px !important;
  margin-top:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 10px !important;
  border:1px solid #aaa7ac !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#656268 !important;
  text-decoration:none !important;
  font-size:.47rem !important;
  font-weight:500 !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease !important;
}

.alterspring-ask-button:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
}

.alterspring-note{
  display:block !important;
  margin-top:8px !important;
  color:#a09da2 !important;
  font-size:.36rem !important;
}

/* Keep the whole page blurred/greyed behind the modal. */
html.message-modal-open .page-composition,
html.message-modal-open .back-link,
html.message-modal-open .messages-fab{
  pointer-events:none !important;
  user-select:none !important;
}

/* Global floating button remains on every internal page. */
.messages-fab{
  position:fixed !important;
  z-index:1001 !important;
  right:24px !important;
  bottom:22px !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid #b9b6bb !important;
  border-radius:50% !important;
  background:rgba(253,253,253,.97) !important;
  color:#666369 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background .18s ease,color .18s ease,transform .18s ease !important;
}

.messages-fab:hover{
  background:#747177 !important;
  border-color:#747177 !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}

.messages-fab svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.35 !important;
  stroke-linejoin:round !important;
}

/* No inline resizing: modal is its own top layer. */
html.message-modal-open .page-composition,
html.composer-open .page-composition{
  top:50% !important;
}

/* Mobile */
@media(max-width:600px){
  .alterspring-modal{
    width:min(330px,calc(100vw - 30px)) !important;
    height:min(330px,calc(100vw - 30px)) !important;
    min-height:300px !important;
    padding:28px 22px 22px !important;
  }

  .alterspring-copy{
    margin-top:38px !important;
  }

  .messages-fab{
    right:14px !important;
    bottom:14px !important;
    width:40px !important;
    height:40px !important;
  }

  .message-modal-backdrop{
    -webkit-backdrop-filter:blur(8px) grayscale(.15) !important;
    backdrop-filter:blur(8px) grayscale(.15) !important;
  }
}


/* =========================================================
   DIRECT ALTERSPRING LINKS — no modal
   ========================================================= */
.message-modal-backdrop,
.message-modal,
.alterspring-modal{
  display:none !important;
}

.message-wall-toggle{
  text-decoration:none !important;
  cursor:pointer !important;
}

.messages-fab{
  text-decoration:none !important;
}


/* =========================================================
   ABOUT TEXT BLOCKS — REMOVE DIVIDER LINES
   ========================================================= */

.info-card .likes-content > *,
.info-card .dislikes-content > *,
.info-card .favorites-content > *,
.info-card .welcome-content > *,
.info-card .about-panel > *,
.info-card [data-about-panel] > *,
.info-card .detail-block,
.info-card .text-block,
.info-card .prose-block,
.info-card .mini-section{
  border-top:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
}

/* Kill pseudo-element hairlines too, if any older style adds them. */
.info-card .likes-content > *::before,
.info-card .likes-content > *::after,
.info-card .dislikes-content > *::before,
.info-card .dislikes-content > *::after,
.info-card .favorites-content > *::before,
.info-card .favorites-content > *::after,
.info-card [data-about-panel] > *::before,
.info-card [data-about-panel] > *::after{
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Keep separation by whitespace only. */
.info-card .likes-content > * + *,
.info-card .dislikes-content > * + *,
.info-card .favorites-content > * + *,
.info-card [data-about-panel] > * + *{
  margin-top:14px !important;
}


/* =========================================================
   FAVORITES — PRIMARY / SECONDARY ARTISTS
   ========================================================= */

.favorite-highlight-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:flex-start;
  margin:2px 0 14px;
}

.favorite-highlight-list span{
  display:inline-block;
  padding:2px 5px 3px;
  border:1px solid #cbc8cd;
  border-radius:0;
  background:#f7f7f7;
  color:#5c595f;
  font-size:.47rem;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.01em;
}

.favorite-secondary-text{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#858287 !important;
  font-size:.47rem !important;
  font-weight:300 !important;
  line-height:1.65 !important;
}


/* =========================================================
   ABOUT LIKES — REMOVE ALL TEXT DIVIDER LINES
   ========================================================= */

.likes-groups{
  gap:16px !important;
}

.likes-group,
.likes-group:first-child{
  padding-top:0 !important;
  padding-left:0 !important;
  border:0 !important;
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.likes-group::before,
.likes-group::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
}

/* Remove the line underneath the final likes paragraph / above Last.fm. */
.bottom-row{
  border-top:0 !important;
}

/* Keep the text separated only with whitespace. */
.likes-label{
  margin-bottom:5px !important;
}

.likes-group p{
  margin:0 !important;
}


/* =========================================================
   RULES — THREE-COLUMN EDITORIAL LAYOUT
   ========================================================= */

.site-view[data-site-view="rules"]{
  overflow:visible !important;
}

.rules-editorial{
  position:absolute;
  left:50%;
  top:76px;
  width:520px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  align-items:start;
}

.rules-column{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

.rules-column summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:26px;
  padding:0 0 8px;
  margin:0 0 10px;
  border-bottom:1px solid #d8d6da;
  color:#565359;
  cursor:pointer;
  user-select:none;
}

.rules-column summary::-webkit-details-marker{
  display:none;
}

.rules-column summary span:first-child{
  font-size:.52rem;
  font-weight:500;
  line-height:1.2;
  text-transform:lowercase;
}

.rules-chevron{
  flex:0 0 auto;
  color:#8f8c91;
  font-size:.52rem;
  line-height:1;
  transition:transform .18s ease;
}

.rules-column:not([open]) .rules-chevron{
  transform:rotate(-90deg);
}

.rules-column-body{
  display:grid;
  gap:10px;
}

.rules-column-body p{
  position:relative;
  margin:0;
  padding-left:8px;
  color:#77747a;
  font-size:.42rem;
  font-weight:300;
  line-height:1.48;
}

.rules-column-body p::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#9b989d;
  font-size:.38rem;
}

/* Remove every legacy rules card/box treatment. */
.rules-new,
.rules-panel,
.rules-card,
.rules-list,
.rules-box,
.rules-note{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Tablet / mobile */
@media(max-width:760px){
  .rules-editorial{
    left:50% !important;
    top:64px !important;
    width:430px !important;
    transform:translateX(-50%) !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .rules-column summary{
    min-height:28px !important;
    margin-bottom:8px !important;
  }

  .rules-column summary span:first-child{
    font-size:.58rem !important;
  }

  .rules-column-body{
    gap:9px !important;
    padding-bottom:3px !important;
  }

  .rules-column-body p{
    font-size:.48rem !important;
    line-height:1.55 !important;
  }
}