/* Wall of Hope — a real cork wall of pinned notes (rebuilt 2026-09-29).
   The newest story is the featured note pinned in the middle of the board, its photo taped on
   like a snapshot; earlier stories sit on the same board underneath. Small notes around them wait
   for the next win. The story form is "write your own note": a sheet of lined notepaper pinned at
   both corners. When a story is sent, the note lifts off toward the wall. Everything is scoped to
   body.p-hope. */

.p-hope main { overflow-x: clip; }
.p-hope .hw-open h1 { font-size: clamp(40px, 5.2vw, 62px); }
@media (min-width: 900px) {
  .p-hope main > .hw-open .pack-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .p-hope main > .hw-open .page-visual seasonal-artwork { max-width: 640px; }
}
.p-hope .hw-open .lede { font-size: clamp(18.5px, 1.6vw, 21px); color: var(--navy); max-width: 24em; }
.p-hope .hw-open .btn { min-height: 52px; padding-inline: 26px; font-size: 17.5px; }

/* ---------- the cork board ---------- */
.p-hope .hw-wall-section { background: var(--cream); padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 90px); }
.p-hope .hw-board { position: relative; border-radius: var(--r-xl); padding: clamp(34px, 4vw, 56px) clamp(14px, 3vw, 44px) clamp(30px, 4vw, 52px);
  background-color: #ecd9ae;
  background-image: radial-gradient(rgba(122, 91, 19, .17) 1.2px, transparent 1.7px), radial-gradient(rgba(255, 255, 255, .4) 1px, transparent 1.5px);
  background-size: 14px 14px, 23px 23px; background-position: 0 0, 7px 9px;
  box-shadow: inset 0 0 0 12px #c99a45, inset 0 0 0 15px #a67a2c, inset 0 10px 26px 10px rgba(122, 91, 19, .24), var(--shadow);
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .p-hope .hw-board { grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 30px; align-items: start; } }

/* stories stack in the middle of the board; the newest note is .hw-feature */
.p-hope .hw-stories { display: grid; gap: clamp(26px, 3.2vw, 40px); min-width: 0; align-content: start; }
.p-hope .hw-stories > .hope-story { position: relative; margin: 0; border: 0; border-radius: 6px; background: #fffdf7; padding: 38px clamp(20px, 3vw, 40px) 30px; rotate: .55deg;
  box-shadow: 0 1px 1px rgba(60, 40, 10, .08), 0 28px 40px -24px rgba(60, 40, 10, .6); }
.p-hope .hw-stories > .hope-story.hw-feature { rotate: -.7deg; }
.p-hope .hw-stories > .hope-story::after { /* a folded-up corner */ content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; background: linear-gradient(135deg, #efe3c4 50%, #ecd9ae 50%); border-radius: 0 0 6px 0; box-shadow: -2px -2px 3px rgba(60, 40, 10, .08); }
.p-hope .hw-stories > .hope-story h2 { margin: 2px 0 0; font-size: clamp(28px, 3.2vw, 40px); }
.p-hope .hw-stories > .hope-story .hope-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 22px; align-items: start; }
@media (min-width: 700px) { .p-hope .hw-stories > .hope-story .hope-story-grid { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); } }
.p-hope .hope-story-photo { position: relative; justify-self: center; width: min(100%, 250px); padding: 10px 10px 34px; background: #fff; border-radius: 3px; overflow: visible; rotate: 2.5deg; box-shadow: 0 18px 26px -18px rgba(60, 40, 10, .6); }
.p-hope .hope-story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: 2px; }
.p-hope .hw-tape { position: absolute; top: -14px; left: 50%; width: 96px; height: 28px; margin-left: -48px; rotate: -4deg; background: rgba(228, 233, 242, .88); box-shadow: 0 2px 4px rgba(60, 40, 10, .12); z-index: 1;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 30% 0, 100% 0, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 76% 92%, 70% 100%, 0 100%); }
.p-hope .hope-story-copy p { margin: 0 0 14px; font-size: 17.5px; line-height: 1.7; color: var(--text); }
.p-hope .hope-story-copy p.hope-story-byline { margin: 18px 0 0; font-family: var(--f-hand); font-size: 26px; line-height: 1.1; color: var(--gold-ink); rotate: -2deg; transform-origin: left; }

/* less scrolling: a wider board on desktop, photo beside the words on phones */
.p-hope .hope-story-copy p { font-size: 17px; line-height: 1.6; }
@media (min-width: 1000px) {
  .p-hope .hw-wall-section .container { max-width: 1440px; }
  .p-hope .hw-board { grid-template-columns: minmax(0, 1fr) 140px; gap: 28px; }
  .p-hope .hw-board > .hw-notes--left { display: none; }
  .p-hope .hw-stories > .hope-story { padding-inline: clamp(32px, 3vw, 48px); }
  .p-hope .hw-stories > .hope-story .hope-story-grid { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
  .p-hope .hope-story-photo { width: min(100%, 270px); }
}
@media (max-width: 699px) {
  .p-hope .hw-stories > .hope-story { padding: 30px 18px 24px; }
  .p-hope .hw-stories > .hope-story h2 { font-size: 26px; }
  .p-hope .hw-stories > .hope-story .hope-story-grid { display: block; margin-top: 14px; }
  .p-hope .hw-stories > .hope-story .hope-story-grid::after { content: ""; display: table; clear: both; }
  .p-hope .hope-story-photo { float: left; width: 40%; margin: 6px 16px 10px 0; padding: 6px 6px 18px; rotate: -2deg; }
  .p-hope .hope-story-photo .hw-tape { width: 60px; height: 20px; margin-left: -30px; top: -10px; }
  .p-hope .hope-story-copy p { font-size: 16.5px; line-height: 1.55; margin-bottom: 12px; }
  .p-hope .hope-story-copy p.hope-story-byline { font-size: 23px; }
  .p-hope .hope-story-grid.is-clamped { max-height: 440px; overflow: hidden; overflow: clip; overflow-clip-margin: 14px; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .p-hope .hw-more { display: flex; margin: 12px auto 0; }
}

/* pins */
.p-hope .hw-pin { position: absolute; top: -11px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--pin, var(--brick)) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }

/* the little notes around it */
.p-hope .hw-notes { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 1000px) { .p-hope .hw-notes { flex-direction: column; align-items: center; gap: 34px; padding-top: 30px; } .p-hope .hw-notes--right { padding-top: 90px; } }
@media (max-width: 999px) { .p-hope .hw-notes--left { display: none; } }
.p-hope .hw-mini { position: relative; display: grid; place-items: center; width: 118px; min-height: 104px; padding: 22px 12px 14px; border-radius: 3px; text-align: center;
  font: 400 34px/1 var(--f-hand); color: var(--brick); box-shadow: 0 14px 20px -14px rgba(60, 40, 10, .55); transform-origin: 50% 8px; }
.p-hope .hw-mini::before { content: ""; position: absolute; top: 5px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--pin, var(--brick)) 36% 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.p-hope .hw-mini--a { background: var(--blue-soft); rotate: -5deg; --pin: var(--blue-ink); }
.p-hope .hw-mini--a::after { content: ""; position: absolute; left: 18px; right: 18px; top: 42px; height: 34px; background: repeating-linear-gradient(180deg, rgba(60, 83, 120, .28) 0 2px, transparent 2px 11px); }
.p-hope .hw-mini--b { background: var(--brick-soft); rotate: 4deg; }
.p-hope .hw-mini--c { background: var(--sage-soft); color: var(--sage-ink); rotate: -3deg; --pin: var(--gold-deep, #b8862b); }
.p-hope .hw-mini--add { width: 150px; min-height: 124px; background: #fffdf7; rotate: 3deg; font: 400 23px/1.1 var(--f-hand); color: var(--navy); text-decoration: none;
  outline: 2px dashed rgba(122, 91, 19, .45); outline-offset: -8px; --pin: var(--gold-deep, #b8862b); }
.p-hope .hw-mini--add:hover { color: var(--navy); background: #fff; }
.p-hope .hw-mini--add:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.p-hope .hw-plus { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: var(--gold); color: var(--navy); font: 600 24px/1 var(--f-display); }

/* ---------- write your own note ---------- */
.p-hope .hw-write { background: var(--cream); padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 110px); scroll-margin-top: 80px; }
.p-hope .hw-note { position: relative; isolation: isolate; width: min(100%, 780px); margin: 0 auto; border: 0; border-radius: 6px; background: none; rotate: .5deg;
  padding: 44px 20px 30px; box-shadow: 0 1px 1px rgba(60, 40, 10, .06), 0 34px 54px -30px rgba(60, 40, 10, .6); }
.p-hope .hw-note::after { /* lined notepaper */ content: ""; position: absolute; inset: 0; border-radius: 6px; z-index: -1;
  background: linear-gradient(180deg, transparent 30px, rgba(169, 84, 47, .3) 30px 32px, transparent 32px), #fbf0cf; }
.p-hope .hw-note::before { /* the sheet under it */ content: ""; position: absolute; inset: 10px -8px -10px 8px; background: #f0dfb2; border-radius: 6px; z-index: -2; rotate: -1.6deg; }
.p-hope .hw-pin--l { left: 34px; margin-left: 0; --pin: var(--blue-ink); }
.p-hope .hw-pin--r { left: auto; right: 34px; margin-left: 0; --pin: var(--sage); }
.p-hope .hw-note-head { text-align: center; margin-bottom: 22px; }
.p-hope .hw-note-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 42px); }
.p-hope .hw-note-head p { margin: 8px auto 0; max-width: 30em; font-size: 18px; color: var(--text); }
.p-hope .hw-note .form { gap: 18px; }
.p-hope .hw-note .form label { font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.p-hope .hw-note .form input:not([type="checkbox"]) { background: #fffdf7; min-height: 50px; }
.p-hope .hw-note .form textarea { min-height: 13rem; line-height: 32px; padding-top: 6px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(143, 165, 198, .4) 31px 32px) 0 5px / 100% 32px local, #fffdf7; }
.p-hope .hw-pair { display: grid; gap: 18px; }
@media (min-width: 640px) { .p-hope .hw-pair { grid-template-columns: 1fr 1fr; } .p-hope .hw-note { padding: 52px 44px 38px; } }
.p-hope .hw-sign-note { margin: -8px 0 0; font-size: 15.5px; color: var(--muted); }
.p-hope .hw-ideas { background: rgba(255, 253, 247, .7); }
.p-hope .hw-ideas ul { margin: 0; padding-left: 1.2em; }
.p-hope .hw-ideas li { margin: 4px 0; }
.p-hope .hw-permissions { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 253, 247, .75); border: 1.5px dashed rgba(122, 91, 19, .4); }
.p-hope .hw-note .form .check { font-size: 16px; color: var(--text); font-weight: 600; align-items: center; min-height: 32px; cursor: pointer; }
.p-hope .hw-note .form .check input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--navy); cursor: pointer; }
.p-hope .hw-note .form-trust-row { justify-content: flex-start; text-align: left; margin: 0; font-size: 15.5px; color: var(--text); gap: 12px 16px; }
.p-hope .hw-note .form-trust-row > span { flex: 1 1 260px; }
.p-hope .hw-note .btn[type="submit"] { min-height: 56px; padding-inline: 34px; font-size: 19px; }
.p-hope .hw-note .form-status { font-size: 16px; }
.p-hope .hw-note .form-status.ok { color: #2f6b4f; }

/* ---------- meaningful movement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* notes are pinned to the wall: the pin drops, the note swings on it, then settles */
  @keyframes hw-pinned { 0% { transform: translateY(-18px) rotate(-5deg); opacity: 0; } 55% { transform: translateY(0) rotate(2.2deg); opacity: 1; } 78% { transform: rotate(-1.2deg); } 100% { transform: none; opacity: 1; } }
  @keyframes hw-pin-drop { 0% { transform: translateY(-26px) scale(1.3); opacity: 0; } 60% { transform: translateY(2px) scale(.95); opacity: 1; } 100% { transform: none; opacity: 1; } }
  @keyframes hw-wiggle { 30% { transform: rotate(-16deg); } 60% { transform: rotate(12deg); } }
  @keyframes hw-sway { 50% { transform: rotate(2.5deg); } }
  .p-hope .hw-feature { transform-origin: 50% -10px; }
  .p-hope .hw-feature.osv-reveal.in { animation: hw-pinned 1.1s var(--ease) both; }
  .p-hope .hw-feature.osv-reveal .hw-pin { opacity: 0; }
  .p-hope .hw-feature.osv-reveal.in .hw-pin { animation: hw-pin-drop .6s .1s var(--spring) both; }
  .p-hope .hw-feature.osv-reveal .hope-story-photo { opacity: 0; }
  @keyframes hw-snap-on { from { opacity: 0; transform: translate(-20px, -30px) rotate(-10deg) scale(1.05); } to { opacity: 1; transform: none; } }
  .p-hope .hw-feature.osv-reveal.in .hope-story-photo { animation: hw-snap-on .8s .7s var(--ease) both; }
  .p-hope .hw-feature:hover .hw-pin { animation: hw-wiggle .6s var(--ease); }
  .p-hope .hw-mini { animation: hw-sway 5s ease-in-out infinite; }
  .p-hope .hw-notes > :nth-child(2) { animation-delay: -2s; }
  .p-hope .hw-notes--right > :nth-child(1) { animation-delay: -3.5s; }
  .p-hope .hw-mini--add { transition: translate .4s var(--spring), rotate .4s var(--spring); }
  .p-hope .hw-mini--add:hover { translate: 0 -5px; rotate: 0deg; animation-duration: 1.6s; }
  .p-hope .hope-story-photo { transition: rotate .5s var(--spring), scale .5s var(--spring); }
  .p-hope .hope-story-photo:hover { rotate: 0deg; scale: 1.03; }

  /* your note: pinned at both corners; it lifts while you write, and once sent it goes up on the wall */
  .p-hope .hw-note .hw-pin { animation: hw-pin-drop .6s .2s var(--spring) both; }
  .p-hope .hw-note .hw-pin--r { animation-delay: .35s; }
  .p-hope .hw-note { transition: translate .45s var(--spring), rotate .45s var(--spring), box-shadow .45s var(--ease); }
  .p-hope .hw-note:focus-within { translate: 0 -4px; rotate: 0deg; box-shadow: 0 1px 1px rgba(60, 40, 10, .06), 0 44px 64px -30px rgba(60, 40, 10, .62); }
  @keyframes hw-sent { 0% { transform: none; } 35% { transform: translateY(-22px) rotate(-1.5deg) scale(.98); } 70% { transform: translateY(0) rotate(1deg); } 100% { transform: none; } }
  .p-hope .hw-note:has(.form-status.ok) { animation: hw-sent 1s var(--ease); }
}
@media print { .p-hope .hw-board { box-shadow: none; background: none; } .p-hope .hw-notes { display: none; } }
.p-hope .hw-sign-as { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; min-width: 0; }
.p-hope .hw-sign-as legend { padding: 0; margin-bottom: 6px; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--navy); }
.p-hope .hw-note .form .hw-sign-as .check input { width: 22px; height: 22px; }
.p-hope .hw-pseudonym { margin-top: 6px; }
.p-hope .hw-sign-as:has(input[value="pseudonym"]:not(:checked)) .hw-pseudonym { display: none; }
.p-hope .hw-note .form input[type="file"] { min-height: 0; padding: 12px; background: #fffdf7; border-style: dashed; cursor: pointer; font-size: 16px; }
.p-hope .hw-note .form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }