/* ===========================================================================
   The church's board — a foyer noticeboard in LWP's own materials.

   No new tokens. Paper Deep is the board field, cream slips are pinned to it
   at slight angles, and the pins are drawn in the brand's three pigments.
   Seed a1728853.
   =========================================================================== */

.chboard {
  --board: var(--paper-3);
  --slip: var(--card);
  background-color: var(--board);
  background-image: var(--board-grain);
  background-size: 180px 180px;
  min-height: 100vh;
  padding-bottom: 96px;
}

/* Authored paper: two crossed fibre passes at low opacity over Paper Deep. It
   is the board's material, not a texture effect, so it stays under 4% alpha. */
.chboard {
  --board-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- the plate ---------- */
.chplate {
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid rgba(222, 212, 184, 0.18);
}
.chplate-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
.chplate-face { min-width: 0; }

.chplate-name {
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--cream);
  text-wrap: balance;
}
.chplate-line {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--sand);
  margin: 0 0 26px;
  max-width: 46ch;
}
.chplate-line-empty {
  font-family: var(--sans);
  font-style: normal;
  font-size: 16px;
  color: rgba(222, 212, 184, 0.62);
}

.chplate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 28px;
  border-top: 1px solid rgba(222, 212, 184, 0.22);
}
.chfact {
  padding: 14px 26px 14px 0;
  margin-right: 26px;
  border-right: 1px solid rgba(222, 212, 184, 0.22);
}
.chfact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.chfact dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(222, 212, 184, 0.72);
  margin-bottom: 5px;
}
.chfact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
}
.chfact-empty dd { color: rgba(222, 212, 184, 0.6); font-weight: 400; }

.chplate-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.chplate .btn.ghost {
  border-color: rgba(222, 212, 184, 0.4);
  color: var(--cream);
  background: transparent;
}
.chplate .btn.ghost:hover {
  border-color: var(--sand);
  background: rgba(222, 212, 184, 0.1);
}

.chlisted {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sand);
  margin-left: 4px;
}
.chlisted::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.chlisted-off::before { background: rgba(222, 212, 184, 0.45); }
.chlisted-flip {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.chlisted-flip:hover { color: var(--accent); }

.chplate-room { margin: 0; position: relative; }
.chplate-room img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 14px 50px rgba(6, 10, 15, 0.36);
}
.chplate-room figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
}
.chupload {
  display: inline-block;
  background: var(--cream);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(6, 10, 15, 0.24);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chupload:hover { transform: translateY(-1px); background: #fff; }
.chupload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chupload-input:focus-visible + .chupload,
.chupload-input:focus-visible ~ .chupload { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the plate, editing ---------- */
.chfield { margin: 0 0 16px; }
.chfield label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(222, 212, 184, 0.78);
  margin-bottom: 7px;
}
.chfield input,
.chfield textarea {
  width: 100%;
  background: rgba(250, 247, 240, 0.07);
  border: 1px solid rgba(222, 212, 184, 0.34);
  border-radius: var(--r-md);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 11px 13px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chfield textarea { resize: vertical; min-height: 92px; }
.chfield input::placeholder,
.chfield textarea::placeholder { color: rgba(230, 222, 200, 0.82); }
.chfield input:focus,
.chfield textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(250, 247, 240, 0.12);
  box-shadow: 0 0 0 3px rgba(199, 86, 64, 0.28);
}
.chfield-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cherror {
  margin: 14px 0 0;
  font-size: 14px;
  color: #F6B4A6;
}

/* ---------- board body ---------- */
.chboard-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 44px;
  align-items: start;
}
.chboard-body-public { grid-template-columns: minmax(0, 1fr); }
.chboard-main { min-width: 0; }

.chband { margin-bottom: 52px; }
.chboard-main > .chband:last-child { margin-bottom: 0; }
.chband-head {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.chband-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 26px;
}

/* ---------- pins ---------- */
.chpin {
  position: absolute;
  top: -11px;
  left: 22px;
  width: 22px;
  height: 22px;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(25, 34, 46, 0.28));
}
.chpin-head { fill: var(--brand); }
.chpin-accent .chpin-head { fill: var(--accent); }
.chpin-deep .chpin-head { fill: var(--deep); }
.chpin-shine { fill: rgba(255, 255, 255, 0.45); }
.chpin-spike { stroke: rgba(25, 34, 46, 0.5); stroke-width: 2; stroke-linecap: round; }

/* ---------- song slips ---------- */
/* A board is not a table. The newest pin gets the wide slip across the top and
   everything after it sits in the pair below, so the wall has a reading order
   before it has a grid. */
.chpins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
  align-items: start;
}
.chpins > .chslip:first-child { grid-column: 1 / -1; }
.chpins > .chslip:first-child .chslip-title { font-size: 25px; }
.chpins > .chslip:first-child .chslip-meta { gap: 34px; }

.chslip {
  position: relative;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 22px 20px 18px;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 2px 4px rgba(25, 34, 46, 0.06), 0 10px 26px rgba(25, 34, 46, 0.09);
  transition: rotate var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.chslip:hover,
.chslip:focus-within {
  rotate: 0deg;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(25, 34, 46, 0.08), 0 18px 42px rgba(25, 34, 46, 0.16);
}
.chslip-open {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.chslip-title {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.chslip-open:hover .chslip-title { color: var(--brand-ink); }
.chslip-by {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 4px;
}
.chslip-meta {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chslip-meta dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chslip-meta dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.chslip-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chunpin {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chunpin:hover { color: var(--brand-ink); }

/* ---------- empty board ---------- */
.chempty {
  position: relative;
  background: var(--slip);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 40px 28px 34px;
  text-align: center;
  max-width: 480px;
  rotate: -0.6deg;
}
.chempty .chpin { left: 50%; margin-left: -11px; }
.chempty p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 20px;
}

/* ---------- writers carried ---------- */
.chwriters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.chwriter {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 24px 26px 22px;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 2px 4px rgba(25, 34, 46, 0.06), 0 12px 30px rgba(25, 34, 46, 0.1);
  transition: rotate var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.chwriter:hover,
.chwriter:focus-within { rotate: 0deg; box-shadow: 0 4px 8px rgba(25, 34, 46, 0.08), 0 20px 44px rgba(25, 34, 46, 0.16); }
.chwriter-head { display: flex; gap: 18px; align-items: center; }
.chwriter-face {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 4px 14px rgba(25, 34, 46, 0.18);
}
.chwriter-face-blank { background: var(--paper-3); display: block; }
.chwriter-name {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.chwriter-name:hover { color: var(--brand-ink); }
.chwriter-where,
.chwriter-count { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.chwriter-count { color: var(--accent-ink); font-weight: 600; }
.chwriter-voice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 20px 0 20px;
  padding-left: 18px;
  border-left: 1px solid var(--accent);
  max-width: 60ch;
}
.chwriter-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.chwriter-acts .btn.solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-light);
}
.chwriter-acts .btn.solid:hover { background: var(--accent-d); border-color: var(--accent-d); color: var(--cream); }

/* ---------- Sunday's notice ---------- */
.chsunday {
  position: relative;
  position: sticky;
  top: 92px;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 26px 24px 22px;
  rotate: 0.55deg;
  box-shadow: 0 2px 4px rgba(25, 34, 46, 0.06), 0 14px 34px rgba(25, 34, 46, 0.12);
  overflow: hidden;
}
.chsunday-head {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.chqueue { list-style: none; margin: 0 0 16px; padding: 0; }
.chqueue li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.chqueue li:first-child { padding-top: 0; }
.chqueue span { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.chqueue small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.chqueue-sum {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.chqueue-fine { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 14px 0 0; }
.chqueue-none { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* The one authored moment: the notice is stamped when the songs cross. The
   mark is drawn, and a displacement filter breaks the ink up the way pressing
   rubber onto paper actually does. */
.chstamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82%;
  max-width: 300px;
  translate: -50% -50%;
  rotate: -11deg;
  pointer-events: none;
  opacity: 0;
  color: var(--wtw);
}
.chstamp-frame { fill: none; stroke: currentColor; stroke-width: 5; }
.chstamp-word {
  fill: currentColor;
  font-family: var(--anton);
  font-size: 62px;
  letter-spacing: 0.06em;
}
/* Visibility is plain state, never the animation's job. The app forces
   animation-duration to .01ms under reduced motion, so a stamp that depended on
   keyframes to be seen would never appear for the people who most need the
   confirmation to hold still. The class shows it; JS clears it; the landing
   motion is the only part the animation owns. */
.chsunday.is-stamped .chstamp { opacity: 0.92; }
@media (prefers-reduced-motion: no-preference) {
  .chsunday.is-stamped .chstamp { animation: chstamp-land 2.6s var(--ease-out) forwards; }
  @keyframes chstamp-land {
    0%   { opacity: 0; scale: 2.15; filter: blur(7px); }
    13%  { opacity: 0.92; scale: 1; filter: blur(0); }
    74%  { opacity: 0.92; scale: 1; filter: blur(0); }
    100% { opacity: 0; scale: 1; filter: blur(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .chslip, .chwriter { transition: none; }
}

/* The public address, so a rename does not read as a lost page. */
.chaddress {
  flex-basis: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(222, 212, 184, 0.72);
  max-width: 52ch;
}
.chaddress b { color: var(--sand); font-weight: 700; }

/* The crossing describes Win the Week, so it speaks in Win the Week's face. */
.chsunday { font-family: var(--wtw-face); }
.chsunday-head { font-family: var(--wtw-face); letter-spacing: -0.01em; }
.chqueue span, .chqueue small, .chqueue-sum, .chqueue-fine, .chqueue-none {
  font-family: var(--wtw-face);
}

/* Room frame with no photograph in it yet. */
.chroom-empty {
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(222, 212, 184, 0.34);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.chroom-empty span { font-size: 14px; color: rgba(230, 222, 200, 0.82); max-width: 24ch; }

/* Song art on the slip: the demo's own per-song identity, not a placeholder. */
.chslip-head { display: flex; align-items: center; gap: 14px; }
.chslip-art {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  flex: none;
  box-shadow: 0 2px 8px rgba(25, 34, 46, 0.2);
}
.chpins > .chslip:first-child .chslip-art { width: 58px; height: 58px; }

/* The crumb is a control, so it is a button and reachable from the keyboard. */
.chcrumb {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--sand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chcrumb:hover { color: var(--cream); }

.chplate-editing-title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--cream);
}
.chplate-editing-title span { color: var(--sand); }

/* ---------- public board ---------- */
.chboard-public .chplate-inner { padding-top: 44px; }
.chstory {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sand);
  max-width: 62ch;
  margin: 22px 0 0;
}
.chboard-public .crumb { margin-bottom: 14px; }
.chboard-public .crumb a { color: var(--sand); cursor: pointer; }
.chboard-public .crumb a:hover { color: var(--cream); }

/* ---------- dark ---------- */
/* The product's dark ramp is warm. The board must not be the one cold surface. */
html.dark .chboard { --board: var(--paper-3); --slip: var(--card); }
html.dark .chplate { background: var(--night); }
html.dark .chslip,
html.dark .chwriter,
html.dark .chsunday,
html.dark .chempty { border-color: rgba(222, 212, 184, 0.16); }
html.dark .chslip-meta { border-color: rgba(222, 212, 184, 0.16); }
html.dark .chqueue li { border-color: rgba(222, 212, 184, 0.16); }
html.dark .chwriter { background: var(--paper-2); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .chboard-body { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .chsunday { position: relative; top: 0; rotate: 0deg; }
}
@media (max-width: 860px) {
  .chplate-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 40px 20px 36px;
  }
  .chpins { grid-template-columns: minmax(0, 1fr); }
  .chboard-body { padding: 32px 20px 0; }
  .chfield-pair { grid-template-columns: 1fr; gap: 0; }
  /* Vertical rules dangle the moment this row wraps, so the facts become a
     stacked list on narrow screens instead. */
  .chplate-facts { display: block; }
  .chfact {
    border-right: 0;
    border-bottom: 1px solid rgba(222, 212, 184, 0.22);
    margin-right: 0;
    padding: 12px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
  }
  .chfact:last-child { border-bottom: 0; padding-bottom: 0; }
  .chfact dt { margin-bottom: 0; }
  .chfact dd { text-align: right; }
  .chwriter-head { flex-wrap: wrap; }
}