/* The public pages (templates/pages/public_*.html): a person, a project, the Blue Ribbon wall, the cookie board. Sticky notes and clippings
   in the home page's language: 3 to 4px ink borders, wobbly corners, tilts under two degrees, muted yellow, pink and blue. Phone first.
   The demand notes on a project page reuse the fridge door and notes of project.css (loaded before this file). No tables of numbers. */
.pub-head { padding-block: clamp(2rem, 5vw, 3.5rem); }
.pub-head h1 { margin-bottom: 0.6rem; font-size: clamp(2.6rem, 9vw, 5rem); overflow-wrap: anywhere; }
.pub-fig { width: min(100%, 12rem); justify-self: center; }
.pub-lede { max-width: 32rem; margin: 0 0 0.8rem; font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.25; overflow-wrap: anywhere; }
.pub-count { margin: 0 0 0.8rem; font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.1; }
.pub-body h2 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 2.8rem); }
.pub-body h2 .pub-stamp { vertical-align: middle; }

/* the tags: how a project stands. Blue is good news, pink is bad, yellow is waiting */
.pub-stamp { display: inline-block; padding: 0.02em 0.65em; font-family: var(--display); font-size: 1.25rem; font-weight: 400; line-height: 1.3; background: var(--paper); border: 3px solid var(--ink); rotate: -1.2deg; }
.pub-stamp[data-status="approved"] { background: var(--note-blue); }
.pub-stamp[data-status="rejected"] { background: var(--note-pink); }
.pub-stamp[data-status="ribbon"] { color: var(--canvas); background: var(--ribbon); }
.pub-ribbon { position: absolute; top: -1rem; right: -0.7rem; z-index: 2; width: 2.7rem; height: auto; rotate: 9deg; overflow: visible; }

/* a person's projects, and the wall: cards pinned to the fridge */
.pub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 2.4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.pub-cards--wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.pub-card { position: relative; display: grid; align-content: start; gap: 0.45rem; min-width: 0; padding: 1.3rem 0.9rem 0.9rem; background: var(--paper); border: 3px solid var(--ink); }
.pub-card:nth-child(4n+1) { rotate: -1deg; }
.pub-card:nth-child(4n+2) { rotate: 0.8deg; background: var(--note-pink); }
.pub-card:nth-child(4n+3) { rotate: -0.4deg; background: var(--note-blue); }
.pub-card:nth-child(4n+4) { rotate: 1.2deg; }
.pub-card:hover, .pub-card:focus-within { box-shadow: 5px 5px 0 var(--ink); }
.pub-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--canvas); border: 3px solid var(--ink); }
.pub-card p { margin: 0; }
.pub-card-name { margin: 0.2rem 0 0; font-size: 1.7rem; line-height: 1; overflow-wrap: anywhere; }
.pub-card-name a { color: var(--ink); text-decoration: none; }
.pub-card-name a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.pub-card-where { font-size: 0.95rem; font-style: italic; overflow-wrap: anywhere; }
.pub-tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.pub-card-by { font-weight: 700; overflow-wrap: anywhere; }
.pub-card-by a { position: relative; z-index: 1; }   /* above the stretched link */

.pub-empty, .pub-nobody { margin: 0; }
.pub-empty { padding: 0.9rem 1.1rem; max-width: 36rem; font-size: 1.15rem; line-height: 1.3; background: var(--canvas); border: 3px dashed var(--ink); rotate: -0.4deg; overflow-wrap: anywhere; }
.pub-nobody { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.pub-nobody .pub-bubble { flex: 1; min-width: 0; margin: 0; padding: 1rem clamp(1rem, 3vw, 2rem); font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; }
@media (max-width: 800px) {   /* stacked: the bubble's tail points up at her */
  .pub-nobody { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .pub-nobody .pub-fig { align-self: center; width: min(45%, 8rem); }
}

.pub-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1.2rem; margin-top: 2.2rem; }
.pub-pager .btn { font-size: 1.3rem; }

/* a project's page */
.pub-where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.6rem; font-weight: 700; overflow-wrap: anywhere; }
.pub-by { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.pub-says { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 2.5rem); }
.pub-face { width: clamp(5rem, 12vw, 7.5rem); }
.pub-says .pub-bubble { flex: 1; min-width: 0; margin: 0; padding: 0.8rem 1.2rem; font-family: var(--display); font-size: 1.6rem; line-height: 1.15; }
@media (max-width: 800px) { .pub-says { flex-direction: column; align-items: stretch; } .pub-face { align-self: center; } }

.pub-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
.pub-ship { position: relative; padding: 1.2rem clamp(1rem, 3vw, 1.6rem) 1.4rem; background: var(--canvas); border: var(--line) solid var(--ink); }
.pub-ship:nth-of-type(odd) { rotate: -0.3deg; }
.pub-ship:nth-of-type(even) { rotate: 0.3deg; }
.pub-ship h2 { padding-right: 3.6rem; }   /* room for the ribbon */
.pub-ship .pub-ribbon { top: -1.3rem; right: 1rem; width: 3.2rem; }
.pub-ship-shot { display: block; width: 100%; max-width: 44rem; height: auto; margin: 0 0 1.2rem; border: 3px solid var(--ink); }
.pub-text { max-width: 44rem; margin: 0 0 1.2rem; font-size: 1.15rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.pub-ship .actions { margin: 0; }
.pub-note { margin-top: 1.6rem; padding: 0.6rem 1rem 0.8rem; max-width: 44rem; background: var(--paper); border: 3px solid var(--ink); rotate: -0.4deg; }
.pub-note-label { margin: 0 0 0.2rem; font-size: 0.9rem; font-style: italic; }
.pub-note blockquote { margin: 0; padding: 0.1rem 0 0.1rem 0.8rem; font-family: var(--display); font-size: 1.4rem; line-height: 1.15; white-space: pre-line; overflow-wrap: anywhere; border-left: 4px solid var(--ink); }

/* the cookie board: a scribbled list, not a table */
.pub-board { display: grid; gap: 1rem; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.pub-row { position: relative; display: grid; grid-template-columns: minmax(2.6rem, auto) minmax(0, 1fr); align-items: center; gap: 0 1rem; padding: 0.6rem 1rem; background: var(--paper); border: 3px solid var(--ink); }
.pub-row:nth-child(3n+2) { rotate: 0.6deg; background: var(--note-pink); }
.pub-row:nth-child(3n+3) { rotate: -0.5deg; background: var(--note-blue); }
.pub-row:nth-child(3n+1) { rotate: -0.7deg; }
.pub-row:hover, .pub-row:focus-within { box-shadow: 5px 5px 0 var(--ink); }
.pub-rank { grid-row: span 2; font-family: var(--display); font-size: 2.4rem; font-weight: 400; line-height: 1; text-align: center; }
.pub-who { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pub-who::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.pub-cookies { font-size: 1rem; }
.pub-cookies b { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }
.pub-row[data-rank] { padding-block: 0.9rem; border-width: 4px; }
.pub-row[data-rank] .pub-rank { color: var(--ribbon); font-size: 3.4rem; }
.pub-row[data-rank] .pub-who { font-size: 2.1rem; }
.pub-row[data-rank="1"] { background: var(--paper); }
.pub-row[data-rank="1"] .pub-cookies b { font-size: 2.2rem; }
@media (min-width: 560px) {
  .pub-row { grid-template-columns: minmax(2.6rem, auto) minmax(0, 1fr) auto; }
  .pub-rank { grid-row: auto; }
  .pub-cookies { text-align: right; }
}