/* ============================================================
   PEGGIN' WITCHES™ — THE SEALED FILE (secrets.html only)
   Page-local flourishes. Every selector is prefixed .sf- so
   nothing here can leak into site.css or any other page.
   Loaded AFTER site.css.
   ============================================================ */

/* ── ballpoint on parchment, inside a posted notice ─────────
   site.css scopes `.notice p`, which outranks a bare `.pen`.
   This is the same ink, spec'd to win inside a notice.        */
p.sf-pen,
.notice p.sf-pen{
  font-family:'Caveat',cursive;
  font-size:1.22rem; line-height:1.44;
  color:var(--ballpoint);
  margin:14px 0 0;
}
.notice p.sf-pen + p.sf-pen{ margin-top:9px }

/* ── the same hand, but written on the dark ────────────────── */
p.sf-margin{
  font-family:'Caveat',cursive;
  font-size:1.26rem; line-height:1.46;
  color:#9db8ff;
  margin:16px 0 0; max-width:72ch;
}

/* ── classification banner ─────────────────────────────────── */
.sf-class{
  display:flex; flex-wrap:wrap; gap:7px 16px;
  justify-content:center; align-items:center; text-align:center;
  margin:0 0 26px; padding:10px 14px;
  border:2px solid rgba(138,19,48,.55); border-radius:2px;
  background:rgba(138,19,48,.12);
  font-family:'Bungee',sans-serif; font-size:.54rem; letter-spacing:.20em;
  text-transform:uppercase; color:#ff9ab8;
}
.sf-class span{ white-space:nowrap }
.sf-class b{ color:#fff; font-weight:400; text-shadow:0 0 9px var(--hex-pink) }

/* ── redaction bar (applied exactly once, to a harmless word) ─ */
.sf-redact{
  background:#1b1410; color:#1b1410;
  padding:0 .3em; border-radius:1px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ── the envelope ──────────────────────────────────────────── */
.sf-envelope{ position:relative }
.sf-envelope::after{           /* the flap crease, pressed flat */
  content:''; position:absolute; top:0; left:0; right:0; height:70px;
  background:linear-gradient(180deg, rgba(27,20,16,.10), transparent);
  -webkit-clip-path:polygon(0 0, 50% 100%, 100% 0);
  clip-path:polygon(0 0, 50% 100%, 100% 0);
  pointer-events:none;
}
.sf-seal{
  position:absolute; right:16px; top:-16px;
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ff7ab5, #8a1330 72%);
  box-shadow:0 4px 11px rgba(0,0,0,.55), inset 0 0 13px rgba(0,0,0,.35);
  display:grid; place-items:center; transform:rotate(-8deg);
  font-family:'Bungee',sans-serif; font-size:.44rem; letter-spacing:.05em;
  line-height:1.15; color:#ffdcea; text-align:center;
}

/* ── inventory list inside a notice (defeats `.notice ul`) ──── */
.notice ul.sf-inv{ margin:0; padding:0; list-style:none }
.notice ul.sf-inv li{
  position:relative; margin:0; padding:10px 0 10px 27px;
  border-bottom:1px dotted #b9a98f; font-size:.86rem; color:#2a2018;
}
.notice ul.sf-inv li:last-child{ border-bottom:none }
.notice ul.sf-inv li::before{
  content:'\2612'; position:absolute; left:0; top:9px;
  color:#8a1330; font-size:.92rem; line-height:1;
}

/* ── the DO NOT OPEN heading ───────────────────────────────── */
.notice h3.sf-dno{
  font-size:1.05rem; letter-spacing:.26em; color:#8a1330;
}

/* ── side-by-side paper without a new grid system ──────────── */
.sf-cols{
  display:grid; gap:clamp(20px,3vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start;
}

/* ── rating cell in the ranking tables ─────────────────────── */
.sf-rate{
  font-family:'Bungee',sans-serif; font-size:.56rem; letter-spacing:.08em;
  color:var(--tallow); white-space:nowrap;
}
.sf-rate.sf-low{ color:var(--carbon) }
.sf-rate.sf-top{ color:#fff; text-shadow:0 0 9px var(--tallow) }

/* ── alphabetical tab on each sealed confession ────────────── */
.sf-tab{
  display:inline-block; min-width:1.6em;
  font-family:'Bungee',sans-serif; font-size:.68rem;
  color:var(--hex-pink); text-shadow:0 0 9px var(--hex-pink);
  margin-right:11px;
}

/* ── stamped index footer under the confessions ────────────── */
.sf-index{
  margin:24px 0 0; padding:14px 16px;
  border:1px dashed rgba(255,178,77,.42); border-radius:3px;
  background:rgba(30,20,4,.28);
  font-size:.74rem; color:var(--carbon); text-align:center;
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:620px){
  .sf-class span{ white-space:normal }
  .sf-seal{
    position:static; transform:none;
    margin:0 0 12px auto; width:52px; height:52px;
  }
  .sf-envelope::after{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .sf-seal,.sf-envelope::after{ animation:none; transition:none }
}