/* A share page (/@handle, /s/did/rkey), which the query service writes for
   a link preview to read and a reader to land on: the card, who it is, what
   they said, and the way onto the board. One column at every width. The
   palette and the ground are plate.css; this sets only the page. */

.share-plate {
  display: grid;
  gap: 14px;
  width: min(760px, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 14px 48px;
}

/* The card itself, stuck down as paper: comic black edge, hard shadow. */
.share-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 3.5px solid var(--comic, #111);
  box-shadow: 6px 6px 0 var(--comic, #111);
  background: var(--bubble);
}

.share-name {
  margin: 10px 0 0;
  font: clamp(28px, 6vw, 44px)/1.05 var(--display);
  text-shadow: 2px 1.5px 0 rgba(255, 72, 176, 0.7);
  overflow-wrap: anywhere;
}
.share-handle { margin: 0; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.share-at { color: var(--pink); }

.share-lines { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.share-lines li {
  padding: 10px 12px;
  background: var(--bubble);
  border: 3px solid var(--comic, #111);
  box-shadow: 4px 4px 0 var(--comic, #111);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* The line the page is for, on the readings' pale yellow. */
.share-lines li.share-this { background: #fff6b0; }
/* The sticker beside the line, as the board's stream has it: the handle,
   the text and the time each start a line of their own, against one left
   edge. */
.share-lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.share-lines li > * { grid-column: 2; }
.share-lines .sticker { grid-column: 1; grid-row: 1 / span 3; justify-self: center; }
.share-lines a { color: var(--ink); text-decoration: none; }
.share-lines a:hover, .share-lines a:focus-visible { text-decoration: underline; }
.share-lines time { margin-top: 4px; color: var(--ink-dim); font-size: 12px; }
.share-by { color: var(--mention); font-weight: 600; }

.share-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; }
.share-links a {
  padding: 8px 16px;
  background: var(--bubble);
  border: 3px solid var(--comic, #111);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--comic, #111);
  color: var(--ink);
  font: 16px/1.2 var(--display);
  text-decoration: none;
}
.share-links a.share-go { background: var(--sun); }
.share-links a:hover, .share-links a:focus-visible { transform: rotate(-1.5deg); }
.share-blurb { margin: 0; color: var(--ink-dim); }

/* Nobody here (share.rs `missing`, and web/404.html for any path the canvas
   has no file for): the one line in the display face, centred on the riso
   ground, and the way onto the board as the sun pill. */
.share-missing { min-height: 100vh; background: url(/grain.png), var(--ground); background-blend-mode: multiply; }
.share-missing .share-plate { min-height: 100vh; align-content: center; justify-items: center; text-align: center; }
.share-missing .share-name { margin: 0; font-size: clamp(40px, 10vw, 72px); }
.share-missing .share-links { justify-content: center; margin: 0; }

/* A week's page (/@handle/w/2026-W43) and a year's: the zine page taped
   to the riso ground on the left, and beside it a sheet torn from a notebook
   with the week on a strip of tape, who it is, the week in label-maker
   strips, and the ways to share it. One column on a phone. */
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url(/fonts/reenie-beanie-latin-400.woff2) format("woff2"); font-display: swap; }

.share-issue { background: url(/grain.png), var(--ground); background-blend-mode: multiply; min-height: 100vh; }
.share-week {
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
@media (min-width: 900px) {
  .share-week { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); padding-top: 40px; }
}

/* The zine page, taped down at a lean. */
.share-zine { position: relative; justify-self: center; width: min(540px, 100%); margin: 0; rotate: -1.5deg; }
.share-zine::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  width: 150px;
  height: 32px;
  translate: -50% 0;
  rotate: 4deg;
  background: repeating-linear-gradient(-45deg, rgba(255, 72, 176, 0.75) 0 8px, rgba(255, 255, 255, 0.6) 8px 16px);
}
.share-zine img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1350;
  border: 3.5px solid var(--comic, #111);
  box-shadow: 6px 6px 0 var(--comic, #111);
  background: var(--bubble);
}

/* The notebook sheet. Ruled every 32px, and everything down to the week's
   readings a whole number of rules tall, so each reading sits on a rule. */
.share-sheet {
  display: grid;
  gap: 0;
  align-content: start;
  padding: 38px 22px 22px 46px;
  background:
    linear-gradient(90deg, transparent 30px, #e46b74 30px 32px, transparent 32px),
    repeating-linear-gradient(transparent 0 31px, #a9c8e8 31px 32px),
    #fdfcf6;
  border: 3px solid var(--comic, #111);
  box-shadow: 6px 6px 0 var(--comic, #111);
  rotate: 0.8deg;
}
.share-when {
  justify-self: start;
  margin: 0;
  padding: 4px 14px;
  background: rgba(255, 225, 77, 0.85);
  font: 700 18px/24px "Courier Prime", ui-monospace, monospace;
  rotate: -1.5deg;
}
.share-issue .share-name { margin: 0; font-size: clamp(34px, 6vw, 54px); line-height: round(nearest, 1.05em, 32px); }
.share-issue .share-handle { font: 700 17px/32px "Courier Prime", ui-monospace, monospace; }

/* The week in label-maker strips: white capitals pressed into black tape. */
.share-stats { display: grid; grid-template-columns: max-content 1fr; gap: 0 14px; align-items: baseline; margin: 32px 0 0; padding: 0; font-size: 16px; }
.share-stats dt {
  justify-self: start;
  padding: 2px 9px;
  background: #161616;
  color: #f4f4f4;
  font: 700 13px/20px "Courier Prime", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.3);
}
.share-stats dd { margin: 0; overflow-wrap: anywhere; line-height: 32px; }
/* A phone: each label on a rule of its own, its reading on the next. */
@media (max-width: 600px) {
  .share-stats { grid-template-columns: 1fr; }
  .share-stats dt { margin: 4px 0; }
}

/* Share to Bluesky, and save the picture to post as a photo: stickers. */
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.share-actions a {
  padding: 9px 18px;
  border: 3px solid var(--comic, #111);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--comic, #111);
  color: var(--ink);
  font: 17px/1.2 var(--display);
  text-decoration: none;
}
.share-actions .share-post { background: var(--sun); rotate: -2deg; }
.share-actions .share-save { background: var(--bubble); rotate: 1.5deg; }
.share-actions a:hover, .share-actions a:focus-visible { rotate: 0deg; background: var(--pink); }
.share-issue .share-links { margin: 14px 0 0; }
.share-issue .share-links a { font-size: 14px; padding: 6px 12px; box-shadow: 3px 3px 0 var(--comic, #111); }
.share-slogan { justify-self: end; margin: 14px 0 0; font: 30px/1 "Reenie Beanie", cursive; color: #1d2b9c; rotate: -2deg; }