@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Courier+Prime&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0e1b2b;
  --surface:#192a3d;
  --text:#e8dcc6;
  --text-dim:#a89a7c;
  --accent:#b08d57;
  --accent-dim:#8a6c3f;
  --rule:rgba(232,220,198,0.16);
  --paper-max:980px;
  --torn-paper:#d9cca0;
  --torn-ink:#23201c;
}

html{
  font-size:17.25px !important;
}

body{
  background: var(--bg) url('back-notebook-v3.jpg') center center / cover no-repeat fixed !important;
  color:var(--text) !important;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19.25px;
  line-height:1.7 !important;
  position:relative;
  overflow-x:hidden;
}

body::after{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:49;
  box-shadow: inset 0 0 260px rgba(0,0,0,0.69);
}

/* ── BREADCRUMB ── */
.ps-breadcrumb{
  max-width:var(--paper-max);
  margin:0 auto;
  padding:1.4rem 2rem 0.6rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.ps-breadcrumb-left{
  font-family:'Amatic SC', cursive;
  font-size:1.15rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.ps-breadcrumb-left a{color:var(--text-dim);text-decoration:none}
.ps-breadcrumb-left a:hover{color:var(--accent)}
.ps-breadcrumb-left span{margin:0 0.5rem}
.ps-breadcrumb-right{
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:0.95rem;
  color:var(--text-dim);
  opacity:0.7;
  display:flex; align-items:center; gap:0.6rem;
  white-space:nowrap;
}
.ps-breadcrumb-right::after{ content:''; width:50px; height:1px; background:var(--rule); }
@media(max-width:600px){ .ps-breadcrumb-right{display:none;} }

/* ── HERO ── */
.ps-hero{
  max-width:var(--paper-max);
  margin:0 auto;
  padding:1.5rem 2rem 2.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
  position:relative;
}
@media(max-width:760px){ .ps-hero{grid-template-columns:1fr; gap:2rem;} }

/* circular anatomical frame */
.ps-specimen-frame{ position:relative; }
.ps-circle{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid var(--accent-dim);
  background: radial-gradient(circle at 50% 45%, var(--surface) 0%, var(--bg) 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.ps-circle::before{
  content:'';
  position:absolute; inset:10px;
  border:1px solid var(--accent-dim);
  border-radius:50%;
  opacity:0.6;
}
.ps-circle svg{ width:78%; height:78%; opacity:0.9; }
.ps-circle-photo{
  width:88%;
  height:88%;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,0.15);
}
.ps-circle .ps-crosshair::before,
.ps-circle .ps-crosshair::after{
  content:'';
  position:absolute;
  background:var(--accent-dim);
  opacity:0.4;
}
.ps-circle .ps-crosshair::before{ left:50%; top:6%; bottom:6%; width:1px; transform:translateX(-50%); }
.ps-circle .ps-crosshair::after{ top:50%; left:6%; right:6%; height:1px; transform:translateY(-50%); }

.ps-specimen-tag{
  margin-top:1rem;
  text-align:center;
  font-family:'Courier Prime', monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.ps-play-btn{
  display:block;
  margin:1.1rem auto 0;
  padding:0.55rem 1.4rem;
  border:1px solid var(--accent-dim);
  background:transparent;
  color:var(--accent);
  font-family:'Amatic SC', cursive;
  font-size:1.2rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
}
.ps-play-btn:hover{ background:var(--accent-dim); color:var(--bg); }

/* ── META ── */
.ps-role{
  font-family:'Amatic SC', cursive;
  font-size:1.1rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.3rem;
}
.ps-title{
  font-family:'IM Fell English', Georgia, serif;
  font-style:italic;
  font-size:3.1rem;
  line-height:1.1;
  color:var(--text);
}
.ps-epigraph{
  margin-top:0.9rem;
  font-style:italic;
  color:var(--text-dim);
  font-size:1.2rem;
  max-width:34ch;
}

.ps-divider{
  height:1px;
  background:linear-gradient(to right, var(--rule), transparent);
  margin:1.4rem 0;
}

/* specimen data strip */
.ps-data-strip{
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:1.6rem;
  margin-bottom:1.8rem;
}
@media(max-width:500px){ .ps-data-strip{grid-template-columns:repeat(2,1fr);} }
.ps-data-item{ border-left:1px solid var(--rule); padding-left:0.6rem; }
.ps-data-label{
  font-family:'Courier Prime', monospace;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.ps-data-value{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--text);
}

/* ── TORN PAPER CTA ── */
.ps-cta-wrap{ margin-bottom:1.8rem; }
.ps-cta{
  position:relative;
  background:var(--torn-paper);
  color:var(--torn-ink);
  padding:1.3rem 1.6rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  justify-content:space-between;
  flex-wrap:wrap;
  transform:rotate(-0.6deg);
  box-shadow:0 10px 24px rgba(0,0,0,0.45);
  clip-path:polygon(
    0% 4%, 3% 0%, 8% 3%, 14% 0.5%, 21% 3%, 29% 0%, 37% 2.5%, 45% 0%, 53% 3%, 61% 0.5%, 69% 3%, 77% 0%, 85% 2%, 92% 0%, 100% 3%,
    100% 96%, 96% 100%, 90% 96.5%, 83% 100%, 75% 97%, 67% 100%, 59% 96.5%, 51% 100%, 43% 97%, 35% 100%, 27% 96.5%, 19% 100%, 11% 97%, 5% 100%, 0% 96%
  );
}
.ps-cta-text{ font-size:1rem; max-width:32ch; }
.ps-cta-text strong{ display:block; font-family:'Amatic SC',cursive; font-size:1.4rem; letter-spacing:0.04em; color:var(--accent-dim); }
.ps-cta-fig{
  position:absolute; top:0.6rem; right:5.5rem;
  font-family:'IM Fell English', serif; font-style:italic; font-size:0.75rem;
  color:var(--torn-ink); opacity:0.4;
}
.ps-cta-btn{
  white-space:nowrap;
  padding:0.65rem 1.3rem;
  background:var(--accent-dim);
  color:var(--torn-paper);
  border:none;
  text-decoration:none;
  font-family:'Amatic SC',cursive;
  font-size:1.2rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.ps-cta-btn:hover{ background:#6f5730; }

/* listen / socials pills */
.ps-pill-label{
  font-family:'Amatic SC', cursive;
  font-size:0.95rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.4rem;
}
.ps-pill-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.2rem; }
.ps-pill{
  padding:0.4rem 0.95rem;
  border:1px solid var(--rule);
  color:var(--text);
  text-decoration:none;
  font-size:0.9rem;
  letter-spacing:0.02em;
  transition:all 0.2s;
}
.ps-pill:hover{ border-color:var(--accent); color:var(--accent); }

/* ── PLAY & FOLLOW (sheet music video) ── */
.ps-video-section{ max-width:var(--paper-max); margin:0 auto; padding:0 2rem 2.5rem; position:relative; }
.ps-video-label{
  font-family:'Courier Prime', monospace;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.7rem;
}
.ps-video-frame{
  position:relative;
  width:100%;
  max-width:760px;
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  background:var(--surface);
}
.ps-video-facade{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:0.6rem;
  cursor:pointer;
  background:
    radial-gradient(circle at 50% 40%, rgba(176,141,87,0.08), transparent 60%),
    var(--surface);
}
.ps-video-facade .ps-vf-play{
  width:60px; height:60px; border-radius:50%;
  border:1px solid var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  font-size:1.4rem;
}
.ps-video-facade .ps-vf-text{
  font-family:'Amatic SC', cursive;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  font-size:1.05rem;
}
.ps-video-frame iframe{ width:100%; height:100%; border:0; display:none; }
.ps-video-frame.loaded .ps-video-facade{ display:none; }
.ps-video-frame.loaded iframe{ display:block; }
.ps-video-note{ margin-top:0.6rem; font-size:0.92rem; color:var(--text-dim); max-width:60ch; }

/* pinned torn tag */
.ps-pin-tag{
  position:absolute;
  right:2rem; bottom:-0.5rem;
  background:var(--torn-paper);
  color:var(--torn-ink);
  padding:0.7rem 1.1rem 0.6rem;
  font-family:'Courier Prime', monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.5;
  transform:rotate(2.5deg);
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
  clip-path:polygon(
    0% 6%, 6% 0%, 15% 5%, 25% 0%, 35% 4%, 45% 0%, 55% 5%, 65% 0%, 75% 4%, 85% 0%, 94% 5%, 100% 0%,
    100% 92%, 92% 100%, 82% 94%, 72% 100%, 62% 95%, 52% 100%, 42% 94%, 32% 100%, 22% 95%, 12% 100%, 4% 94%, 0% 100%
  );
}
.ps-pin-tag::before{
  content:'';
  position:absolute; top:0.3rem; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-dim);
}
.ps-pin-tag .ps-pin-big{ font-family:'IM Fell English', serif; font-style:italic; font-size:1.3rem; text-transform:none; letter-spacing:0; display:block; margin-top:0.2rem; }
@media(max-width:600px){ .ps-pin-tag{ position:static; display:inline-block; margin-top:1rem; transform:rotate(-1.5deg); } }

/* ── BODY / FIELD NOTES ── */
.ps-body{ max-width:var(--paper-max); margin:0 auto; padding:0 2rem 3rem; }
.ps-rule{ height:1px; background:var(--rule); margin-bottom:2.4rem; }

.ps-notes-label{
  font-family:'Courier Prime', monospace;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.6rem;
}
.ps-notes{
  columns:2;
  column-gap:2.5rem;
  font-size:1.08rem;
  color:var(--text);
  max-width:840px;
}
@media(max-width:700px){ .ps-notes{columns:1;} }
.ps-notes p{ margin-bottom:1rem; break-inside:avoid; }
.ps-notes p::first-letter{
  font-family:'IM Fell English', serif;
  font-size:3.4rem;
  float:left;
  line-height:0.8;
  padding-right:0.1rem;
  padding-top:0.2rem;
  color:var(--accent);
}

.ps-quote{
  margin:2.6rem auto 0;
  max-width:560px;
  text-align:center;
  font-style:italic;
  font-size:1.3rem;
  color:var(--text);
  position:relative;
}
.ps-quote-mark{
  display:block;
  font-family:'IM Fell English', serif;
  font-size:3rem;
  color:var(--accent);
  line-height:0.5;
  margin-bottom:0.4rem;
}

/* ── FOOTER NAV ── */
.ps-footnav{
  max-width:var(--paper-max);
  margin:2.8rem auto 0;
  padding:1.4rem 2rem 2.4rem;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.ps-footnav a{
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column;
}
.ps-footnav-dir{
  font-family:'Amatic SC', cursive;
  font-size:1rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.ps-footnav-name{ font-style:italic; font-size:1.05rem; }
.ps-footnav-next{ text-align:right; align-items:flex-end; }
.ps-footnav-center a{ color:var(--text-dim); font-family:'Amatic SC',cursive; letter-spacing:0.1em; text-transform:uppercase; font-size:1rem; }

/* ── SCORE MODAL ── */
.ps-modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,0.7);
  display:none;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
.ps-modal-overlay.open{ display:flex; }
.ps-modal{
  background:var(--surface);
  border:1px solid var(--rule);
  max-width:440px; width:100%;
  padding:2rem;
  position:relative;
}
.ps-modal-close{
  position:absolute; top:0.8rem; right:1rem;
  background:none; border:none; color:var(--text-dim);
  font-size:1.4rem; cursor:pointer; line-height:1;
}
.ps-modal-close:hover{ color:var(--accent); }
.ps-modal-title{
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:1.8rem;
  color:var(--text);
  margin-bottom:0.5rem;
}
.ps-modal-piece{
  font-family:'Amatic SC', cursive;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:1rem;
  margin-bottom:1rem;
}
.ps-modal-body p{ font-size:0.98rem; color:var(--text); margin-bottom:1rem; }
.ps-modal-note{
  font-size:0.85rem; color:var(--text-dim); font-style:italic;
  border-left:2px solid var(--rule); padding-left:0.7rem;
  margin-bottom:1.3rem;
}
.ps-modal-form{ display:flex; flex-direction:column; gap:0.8rem; }
.ps-modal-form input[type="email"]{
  background:var(--bg);
  border:1px solid var(--rule);
  color:var(--text);
  padding:0.7rem 0.8rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
}
.ps-modal-form input[type="email"]:focus{ outline:none; border-color:var(--accent-dim); }
.ps-modal-submit{
  background:var(--accent-dim);
  color:var(--bg);
  border:none;
  padding:0.7rem;
  font-family:'Amatic SC', cursive;
  font-size:1.2rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.ps-modal-submit:hover{ background:var(--accent); }
.ps-modal-success{ display:none; text-align:center; padding:1rem 0; }
.ps-modal-success.show{ display:block; }
.ps-modal-success p{ color:var(--text); font-size:1.1rem; }


/* ============================================================
   THE UNQUIET — Archive / Index Page Styles
   ============================================================ */

.pa-page{ background:var(--bg); }

/* ── ARCHIVE HERO ── */
.pa-hero{
  max-width:var(--paper-max);
  margin:0 auto;
  padding:3rem 2rem 2rem;
  text-align:center;
}
.pa-eyebrow{
  font-family:'Courier Prime', monospace;
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.8rem;
}
.pa-title{
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:3.6rem;
  line-height:1.05;
  color:var(--text-bright);
}
.pa-subtitle{
  font-family:'Amatic SC', cursive;
  font-size:1.2rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:0.8rem;
}
.pa-lead{
  max-width:60ch;
  margin:1.5rem auto 0;
  color:var(--text);
  font-size:1.08rem;
  line-height:1.75;
}

/* ── CORKBOARD ── */
.pa-board{
  max-width:var(--paper-max);
  margin:2rem auto 0;
  padding:2.5rem 2rem 3.5rem;
  border-top:1px solid var(--rule);
}
.pa-board-label{
  font-family:'Courier Prime', monospace;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:2rem;
}
.pa-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2.2rem 1.8rem;
}

/* ── PINNED SPECIMEN CARD ── */
.pa-card{
  position:relative;
  width:240px;
  background:var(--torn-paper);
  color:var(--torn-ink);
  text-decoration:none;
  padding:1.4rem 1.3rem 1.2rem;
  box-shadow:0 10px 22px rgba(0,0,0,0.4);
  clip-path:polygon(
    0% 3%, 5% 0%, 11% 3%, 18% 0.5%, 26% 3%, 34% 0%, 42% 2.5%, 50% 0%, 58% 3%, 66% 0.5%, 74% 3%, 82% 0%, 90% 2%, 96% 0%, 100% 3%,
    100% 97%, 94% 100%, 86% 96.5%, 78% 100%, 70% 97%, 62% 100%, 54% 96.5%, 46% 100%, 38% 97%, 30% 100%, 22% 96.5%, 14% 100%, 6% 97%, 0% 100%
  );
  transition:transform 0.2s ease;
}
.pa-card::before{
  content:'';
  position:absolute; top:0.6rem; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--accent-dim);
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.pa-card:hover{ transform:translateY(-4px) scale(1.02); }

/* repeating scatter pattern — no JS, no overlap risk */
.pa-grid .pa-card:nth-child(4n+1){ transform:rotate(-2deg); margin-top:0.4rem; }
.pa-grid .pa-card:nth-child(4n+2){ transform:rotate(1.4deg); margin-top:-0.3rem; }
.pa-grid .pa-card:nth-child(4n+3){ transform:rotate(-1deg); margin-top:0.7rem; }
.pa-grid .pa-card:nth-child(4n+4){ transform:rotate(1.8deg); margin-top:0; }
.pa-grid .pa-card:nth-child(4n+1):hover{ transform:rotate(-2deg) translateY(-4px) scale(1.03); }
.pa-grid .pa-card:nth-child(4n+2):hover{ transform:rotate(1.4deg) translateY(-4px) scale(1.03); }
.pa-grid .pa-card:nth-child(4n+3):hover{ transform:rotate(-1deg) translateY(-4px) scale(1.03); }
.pa-grid .pa-card:nth-child(4n+4):hover{ transform:rotate(1.8deg) translateY(-4px) scale(1.03); }

.pa-card-fig{
  font-family:'Courier Prime', monospace;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  opacity:0.55;
  margin-bottom:0.5rem;
}
.pa-card-title{
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:1.35rem;
  line-height:1.15;
  margin-bottom:0.6rem;
}
.pa-card-meta{
  font-size:0.85rem;
  opacity:0.75;
  line-height:1.4;
}

/* ── EMPTY STATE ── */
.pa-empty{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--text-dim);
  font-size:1.1rem;
}

@media(max-width:600px){
  .pa-title{ font-size:2.6rem; }
  .pa-card{ width:100%; }
}