/* Silent Scars Beating Hearts — house style
   near-black #111110, amber, bone. Cinzel / Cormorant Garamond / EB Garamond. */

:root{
  --ink:#111110;
  --ink-2:#191817;
  --bone:#E7E1D4;
  --bone-dim:#A49C8B;
  --amber:#C8892F;
  --amber-lit:#E0A748;
  --rule:#2C2A26;
  --measure:34rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"EB Garamond",Georgia,serif;
  font-size:19px;
  line-height:1.62;
  letter-spacing:.005em;
}
img{max-width:100%;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--amber);color:var(--ink);padding:.5rem .9rem;z-index:50}

a{color:var(--amber-lit);text-decoration:none;border-bottom:1px solid rgba(200,137,47,.35)}
a:hover{border-bottom-color:var(--amber-lit)}
:focus-visible{outline:2px solid var(--amber-lit);outline-offset:3px}

/* masthead */
.masthead{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;
  padding:1.6rem clamp(1.1rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.mark{border:0;display:block}
.mark-name{
  display:block;font-family:Cinzel,serif;font-weight:600;
  font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
}
.mark-sub{display:block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);margin-top:.3rem}
.masthead nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.masthead nav a{
  border:0;font-family:Cinzel,serif;font-size:.74rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--bone-dim);
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--amber-lit)}

/* type */
main{padding:clamp(2.4rem,6vw,4.5rem) clamp(1.1rem,5vw,4rem) 5rem;max-width:74rem;margin:0 auto}
h1{
  font-family:Cinzel,serif;font-weight:400;
  font-size:clamp(2rem,5.4vw,3.1rem);line-height:1.14;letter-spacing:.01em;
  margin:0 0 1.1rem;color:var(--bone);
}
h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.2;
  margin:2.9rem 0 .7rem;color:var(--bone);
}
p{max-width:var(--measure);margin:0 0 1.05rem}
.lede{
  font-family:"Cormorant Garamond",serif;font-size:clamp(1.2rem,2.6vw,1.5rem);
  line-height:1.42;color:var(--bone);font-style:italic;max-width:38rem;
}
.eyebrow{
  font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);margin:0 0 .7rem;
}
.fine{font-size:.86rem;color:var(--bone-dim)}
.flag{
  font-size:.86rem;color:var(--bone-dim);border-left:2px solid var(--amber);
  padding:.55rem 0 .55rem .9rem;font-style:italic;
}
.pending{color:var(--bone-dim);font-style:italic}
strong{color:var(--bone);font-weight:500}

/* hero plate */
.plate{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:4.5rem}
@media(min-width:62rem){.plate{grid-template-columns:1.05fr .95fr}}
.panel-frame{position:relative;margin:0;border:1px solid var(--rule);background:var(--ink-2)}
.panel-placeholder{
  aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.6rem;text-align:center;padding:2rem;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(200,137,47,.10),transparent 62%),
    var(--ink-2);
}
.placeholder-latin{
  font-family:Cinzel,serif;font-size:clamp(.95rem,2.4vw,1.3rem);
  letter-spacing:.15em;line-height:1.9;color:var(--amber);
}
.placeholder-note{
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
}
.hotspots{position:absolute;inset:0}
.hotspots a{
  position:absolute;border:0;display:block;
  border-radius:50%;box-shadow:0 0 0 1px rgba(200,137,47,.25) inset;
}
.hotspots a:hover,.hotspots a:focus-visible{box-shadow:0 0 0 2px var(--amber-lit) inset}
.hotspots .hs-label{
  position:absolute;left:50%;top:100%;transform:translate(-50%,.4rem);
  font-family:Cinzel,serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-lit);opacity:0;transition:opacity .2s;white-space:nowrap;
}
.hotspots a:hover .hs-label,.hotspots a:focus-visible .hs-label{opacity:1}

.cover{width:100%;height:auto}
.panel-frame figcaption{padding:.7rem .9rem;border-top:1px solid var(--rule);font-size:.78rem}
.epigraph{margin:1.6rem 0 1.8rem;padding-left:1.1rem;border-left:1px solid var(--amber);max-width:32rem}
.epigraph p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.12rem;line-height:1.45;margin:0 0 .5rem;color:var(--bone)}
.epigraph cite{font-style:normal;font-size:.8rem;letter-spacing:.1em;color:var(--bone-dim)}
.offer{border-top:1px solid var(--rule);padding:3rem 0 3.4rem}
.offer h2{margin-top:0;max-width:34rem}
.offer p{max-width:40rem}
.offer .closing{font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-style:italic;color:var(--amber-lit);margin-top:1.6rem}
.echo{margin:2.4rem 0 2rem;max-width:34rem}
.echo p{font-family:"Cormorant Garamond",serif;font-size:1.22rem;line-height:1.6;margin:0 0 1.9rem;color:var(--bone)}
.support{border:1px solid var(--rule);padding:1.6rem 1.7rem;margin-top:3rem;max-width:40rem}
.support p{margin-bottom:.8rem}
.manifesto{border-top:1px solid var(--rule);padding:3rem 0 3.4rem;margin-bottom:1rem}
.manifesto p{max-width:40rem;font-size:1.02rem}
.manifesto p:first-child,.manifesto .closing{
  font-family:"Cormorant Garamond",serif;font-size:1.3rem;font-style:italic;color:var(--amber-lit);
}
.manifesto .closing{margin-top:1.6rem}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn{
  border:1px solid var(--amber);color:var(--amber-lit);
  font-family:Cinzel,serif;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.85rem 1.5rem;
}
.btn:hover{background:var(--amber);color:var(--ink)}
.btn.ghost{border-color:var(--rule);color:var(--bone-dim)}
.btn.ghost:hover{border-color:var(--bone-dim);background:transparent;color:var(--bone)}

/* two-layer split */
.split{display:grid;gap:2.6rem;border-top:1px solid var(--rule);padding-top:2.8rem}
@media(min-width:52rem){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.split h2{margin-top:.2rem}

/* lists */
.witness-list,.record-list{list-style:none;padding:0;margin:2rem 0 0;max-width:44rem}
.witness-list li,.record-list li{border-top:1px solid var(--rule)}
.witness-list li:last-child,.record-list li:last-child{border-bottom:1px solid var(--rule)}
.witness-list a,.record-list a{
  border:0;display:grid;gap:.2rem 1.4rem;padding:1.15rem 0;align-items:baseline;color:var(--bone);
}
@media(min-width:38rem){
  .witness-list a,.record-list a{grid-template-columns:7rem 1fr auto}
}
.wsp,.rid{font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.19em;color:var(--amber)}
.wname,.rname{font-family:"Cormorant Garamond",serif;font-size:1.5rem}
.wrole,.rstatus{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.witness-list a:hover .wname,.record-list a:hover .rname{color:var(--amber-lit)}

.doc-slot{
  border:1px dashed var(--rule);padding:1.6rem;margin-top:2.4rem;max-width:var(--measure);
}
.doc-slot p{margin-bottom:.6rem}

.record-fields{margin:2rem 0 0;max-width:40rem}
.record-fields dt{
  font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--amber);margin-top:1.15rem;
}
.record-fields dd{margin:.25rem 0 0}
.contact-line{font-family:"Cormorant Garamond",serif;font-size:1.4rem;margin-top:1.6rem}

/* footer */
footer{
  border-top:1px solid var(--rule);padding:3rem clamp(1.1rem,5vw,4rem);text-align:center;
}
footer p{max-width:none;margin:0}
.latin{font-family:Cinzel,serif;letter-spacing:.17em;color:var(--amber);font-size:.9rem}
.latin-en{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--bone-dim);margin-top:.4rem}
footer .fine{margin-top:1.5rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* contact form */
.contact-form{margin:2rem 0 3rem;max-width:36rem}
.contact-form label{font-size:.86rem;color:var(--bone-dim)}
.contact-form input,.contact-form textarea{
  width:100%;box-sizing:border-box;margin-top:.35rem;padding:.7rem .8rem;
  background:var(--ink-2);color:var(--bone);border:1px solid var(--rule);font:inherit;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.contact-form button{
  font-family:Cinzel,serif;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;
  background:transparent;color:var(--amber);border:1px solid var(--amber);padding:.75rem 1.6rem;cursor:pointer;
}
.contact-form button:hover{background:var(--amber);color:#111110}