/* YVM-79 civic: the town-hall noticeboard. The board's name is spelled out on a felt letter board in an oak frame
   (white capitals on grooved black felt); the notes are pinned beside it on a crisp paper grid with coloured push
   pins, some lifting off their pin. Heavy Public Sans, a black masthead, a yellow safety bar, square everything. */

/* The board's name on a felt letter board: grooved black felt, white capitals, an oak frame with a bevel. */
.vm-t-civic .vm-title{display:inline-block;margin:0 0 var(--space-step-5);padding:.42em .6em .38em;max-width:100%;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.075) 0 1px,transparent 1px 7px),radial-gradient(120% 140% at 30% 20%,#2A2C30,#151618);
  color:#FFFFFF;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.09em;word-spacing:.18em;
  font-size:clamp(1.375rem,4.4vw,3rem);line-height:1.12;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;
  border:clamp(10px,1.6vw,16px) solid #8A5A32;border-radius:4px;
  box-shadow:inset 0 0 0 2px #5E3B1F,inset 0 0 22px rgba(0,0,0,.7),0 0 0 2px #B7834F,0 22px 30px -16px rgba(11,12,12,.6);
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
/* The eyebrow is the notice header: a black band with yellow capitals, like the strip above a council board. */
.vm-t-civic .vm-eyebrow{display:inline-block;background:var(--ink);color:#FFDD00;padding:.3em .7em;letter-spacing:.22em;font-size:.8125rem}
.vm-t-civic .vm-hero .vm-lede{font-size:1.25rem;max-width:32rem}
.vm-t-civic .vm-h2,.vm-t-civic .vm-h1-small{font-weight:800;font-size:clamp(1.75rem,4vw,2.375rem);letter-spacing:-.02em}
.vm-t-civic .vm-board-head .vm-h2{border-bottom:0;background:var(--ink);color:#FFFFFF;padding:.25em .6em;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.25rem,3vw,1.75rem)}

/* The hero: pinned notes on grid paper, scattered as people left them. */
.vm-t-civic .vm-hero{border-bottom:3px solid var(--ink)}
.vm-t-civic .vm-hero-notes{max-width:34rem;gap:2.5rem 1.75rem;padding:1.5rem .75rem 1rem}
.vm-t-civic .vm-hero-note{font-family:var(--display);font-weight:600;font-size:1.3125rem;line-height:1.25;padding:1.75rem 1.25rem 1.5rem}
.vm-t-civic .vm-hero-note-1{margin-top:.5rem}
.vm-t-civic .vm-hero-note-2{margin-top:3rem}
.vm-t-civic .vm-hero-note-3{width:min(100%,17rem);justify-self:start;margin-left:12%}
@media (min-width:960px){
  .vm-t-civic .vm-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
  .vm-t-civic .vm-hero-note-3{margin-top:-.5rem}
}

/* Push pins: a lit plastic head and a cast shadow; the pin colour turns with the note. */
.vm-t-civic .vm-notes{gap:3rem 2rem;padding-top:1.25rem}
.vm-t-civic .vm-postit,.vm-t-civic .vm-hero-note{padding-top:1.75rem;--pin:#C8102E}
.vm-t-civic .vm-postit:nth-child(4n+2),.vm-t-civic .vm-hero-note-2{--pin:#1D4F91}
.vm-t-civic .vm-postit:nth-child(4n+3),.vm-t-civic .vm-hero-note-3{--pin:#F2B705}
.vm-t-civic .vm-postit:nth-child(4n){--pin:#00703C}
.vm-t-civic .vm-postit::before,.vm-t-civic .vm-hero-note::before{content:"";position:absolute;top:-.6rem;left:calc(50% - .7rem);width:1.4rem;height:1.4rem;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85) 0 13%,transparent 24%),radial-gradient(circle at 60% 70%,rgba(0,0,0,.25),transparent 60%),var(--pin);
  box-shadow:inset -2px -3px 3px rgba(0,0,0,.3),5px 9px 6px -2px rgba(11,12,12,.45)}
/* A note that has come off one side hangs from the pin in its corner. */
.vm-t-civic .vm-unstuck::before{left:.6rem}
.vm-t-civic .vm-note-text{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.3}
.vm-t-civic .vm-note-date{font-weight:700;letter-spacing:.04em}

.vm-t-civic .vm-form-card{border-top:10px solid var(--ink)}
.vm-t-civic .vm-card,.vm-t-civic .vm-safety{border:3px solid var(--ink)}
.vm-t-civic .vm-band{border-bottom:3px solid var(--ink)}
.vm-t-civic .vm-points b{font-family:var(--display);font-size:1.125rem}
.vm-t-civic .vm-btn,.vm-t-civic a.vm-btn{text-transform:uppercase;letter-spacing:.06em;font-size:.9375rem}