:root{
  --bg-1:#fff7fb;
  --bg-2:#fdeaf4;
  --ink:#31252d;
  --muted:#7b6b73;
  --card:#ffffff;
  --line:#ecd6e2;
  --shadow:0 18px 40px rgba(148,112,136,0.18);
  --r-lg:18px;
  --accent:#e39bb8;
  --accent-soft:#f6c7da;

  --sheet-h:35vh;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.6;
  padding:16px;
  background:radial-gradient(circle at top,var(--bg-1) 0,var(--bg-2) 45%,#f9f0ff 100%);
}

.shell{max-width:900px;margin:0 auto;}
.card{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:24px 22px 26px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.9);
  position:relative;
  overflow:hidden;
}

@media(min-width:768px){
  body{padding:40px 24px;}
  .card{padding:32px 40px 38px;}
}

.site-strip{
  text-align:center;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
  margin-bottom:.8rem;
  padding-bottom:.35rem;
  border-bottom:1px dashed rgba(236,214,226,0.9);
}

.page-head{margin-bottom:1.1rem;padding-right:56px;}
.page-eyebrow{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:.25rem;
}
h1{
  font-size:1.6rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.2rem;
}
.page-meta-line{
  font-size:.8rem;
  color:var(--muted);
  font-style:italic;
  margin-bottom:.35rem;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:1.1rem;
  margin-top:.9rem;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid rgba(209,213,219,.9);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7280;
  background:rgba(255,255,255,.9);
  white-space:nowrap;
}
.chip--tag{border-style:dashed;opacity:.95;}

.page-body{font-size:.98rem;}
.page-body h1,
.page-body h2,
.page-body h3,
.page-body h4,
.page-body h5{
  margin:1.3rem 0 .45rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.0rem;
}
.page-body h1{font-size:1.25rem;}
.page-body h2{font-size:1.12rem;}
.page-body h3{font-size:1.02rem;}
.page-body p{margin-bottom:.85rem;}
.page-body ul,
.page-body ol{margin:0 0 .85rem 1.4rem;}
.page-body li{margin-bottom:.35rem;}
.page-body a{color:#2563eb;text-decoration:underline;}

.page-body img{
  max-width:100%;
  height:auto;
  display:block;
  margin:1.2rem auto;
  border-radius:10px;
}

.page-body blockquote{
  position:relative;
  margin:1.3rem 0 1.4rem;
  padding:.95rem 1.1rem .95rem 1.25rem;
  border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;
  background:linear-gradient(135deg,rgba(246,199,218,0.32),rgba(255,255,251,0.98));
  box-shadow:0 12px 26px rgba(148,112,136,0.18);
  color:var(--muted);
  font-style:italic;
}
.page-body blockquote::before{
  content:"“";
  position:absolute;
  left:8px;
  top:-14px;
  font-size:2.4rem;
  color:rgba(227,155,184,0.6);
  font-style:normal;
}
.page-body blockquote p{margin-bottom:.6rem;}
.page-body blockquote p:last-child{margin-bottom:0;}

.page-foot{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px dashed var(--line);
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.page-foot .label{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
}

/* About note */
.hero-note-wrapper{margin-bottom:1.1rem;}
.hero-note{
  width:100%;
  border-radius:18px;
  border:1px solid #facc15;
  background:#fef9c3;
  box-shadow:0 10px 24px rgba(245,158,11,.25);
  padding:10px 14px 11px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  text-align:left;
}
.hero-note-icon{font-size:1.1rem;margin-top:2px;}
.hero-note-title{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:#92400e;margin-bottom:2px;
}
.hero-note-text{font-size:.9rem;color:#78350f;}
.hero-note-action{
  display:inline-flex;align-items:center;margin-top:4px;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:#92400e;
}
.hero-note:hover{box-shadow:0 14px 30px rgba(245,158,11,.35);}

/* ===== Slide-up sticky-note modal ===== */
.note-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:60;

  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  padding:0 12px 12px;
}
.note-modal-backdrop[hidden]{display:none;}
.note-modal-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.note-modal-dialog{
  width:min(560px, 96vw);
  height:var(--sheet-h);
  max-height:var(--sheet-h);
  min-height:240px;
  border-radius:18px;
  background:#fefce8;
  border:1px solid #facc15;
  box-shadow:0 28px 80px rgba(15,23,42,.75);
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  transform:translateY(110%);
  transition:transform 220ms cubic-bezier(.2,.9,.2,1);
  position:relative;
  overflow:hidden;
}
.note-modal-backdrop.is-open .note-modal-dialog{ transform:translateY(0); }

@media(max-width:600px){
  .note-modal-backdrop{padding:0;}
  .note-modal-dialog{
    width:100%;
    border-radius:18px 18px 0 0;
  }
}

.note-modal-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}
.note-modal-icon{font-size:1.4rem;}
.note-modal-title-group{flex:1;}
.note-modal-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#92400e;
  margin-bottom:1px;
}
.note-modal-title{font-size:1.05rem;color:#78350f;}
.note-modal-close{
  border:none;background:transparent;cursor:pointer;
  font-size:20px;line-height:1;padding:2px 6px;border-radius:999px;color:#92400e;
  position:relative;z-index:1;
}
.note-modal-close:hover{background:rgba(250,204,21,.2);}

.note-modal-body{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(250,204,21,.7);
  font-size:.9rem;
  color:#78350f;
  overflow:auto;
  max-height:calc(var(--sheet-h) - 70px);
  position:relative;
  z-index:1;
}