/* /share (src/share.py), linked after site.css by this page alone. Linktree's one column in the book's type and colours:
   the head and its line as /news sets them, then three blocks under small capital rows (the profile's graphics rows): the
   link in the form's own field with Copy link on its row (the profile's Your link), the line to send on the same tint,
   the six channels as boxed tiles in the line buttons' blue. On a desktop the join post's picture stands at size beside
   the words; on a phone it is a row under them, so the page is one screen. */
.smain { padding-top: 46px; padding-bottom: 112px; }   /* top and foot only: the sides are .wrap's gutters */
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr); }
.swords h1 { color: var(--blue); font-size: 56px; line-height: 1.05; }
.sline { margin-top: 18px; max-width: 26em; font: 500 21px/1.45 "Libre Franklin", sans-serif; }
.sblock { margin-top: 36px; }
.srow { font: 700 12px/1.4 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin: 0 0 10px; }
.sharep .lnk { display: flex; }
.sharep .lnk input { flex: 1; min-width: 0; height: 52px; border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; background: var(--tint); padding: 0 14px; font: 600 17px/1 "Libre Franklin", sans-serif; color: var(--blue); text-overflow: ellipsis; }
.sharep .lnk .btn { flex: none; height: 52px; padding: 0 20px; font-size: 17px; }
.stext { background: var(--tint); border-bottom: 2px solid var(--blue); padding: 14px 16px; font-size: 17px; line-height: 1.5; }
/* Copy the text on its label's row, at the row's right, the row's capitals and the button's words centred together */
.shd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.shd .srow { margin: 0; }
.ctext { flex: none; padding: 8px 12px; font-size: 15px; }
.schan { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.schan a { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 14px; color: var(--blue); text-decoration: none; box-shadow: inset 0 0 0 2px var(--blue); }
.schan a:hover { background: var(--tint); }
.schan svg { width: 22px; height: 22px; fill: currentColor; grid-row: 1 / 3; }
.cn2 { font: 600 16px/1.25 "Libre Franklin", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw2 { font: 500 13px/1.3 "Libre Franklin", sans-serif; color: var(--quiet); }
.spic { margin: 36px 0 0; }
.spic img { display: block; width: 100%; height: auto; }
.spic figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--quiet); }
.spic figcaption b { color: #000; font-weight: 600; }
.spic .btn { flex: none; padding: 8px 12px; font-size: 15px; }   /* Copy the text's size, so the two rows match */
@media (min-width: 761px) { .spic { max-width: 560px; } }

/* a desktop of 1280 px and up: the words at the left; at the right the picture from the head's capitals to the link's foot
   (rows 1 to 3, the picture out of the rows' sizing, so the words set them) and its caption on the line to send's row (row
   4, the same 36 px over it), Save the picture and Copy the text one size on one line. Below 1280 the right column is too
   narrow for it, and the picture follows the words. */
@media (min-width: 1280px) {
  .sgrid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 96px; align-items: start; }
  .swords, .spic { display: contents; }
  .swords h1 { grid-column: 1; grid-row: 1; }
  .sline { grid-column: 1; grid-row: 2; }
  .swords .sblock:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .swords .sblock:nth-of-type(2) { grid-column: 1; grid-row: 4; }
  .swords .sblock:nth-of-type(3) { grid-column: 1; grid-row: 5; }
  .spicbox { grid-column: 2; grid-row: 1 / 4; align-self: stretch; position: relative; }
  .spicbox img { position: absolute; left: 0; top: 10px; height: calc(100% - 10px); width: auto; max-width: 100%; object-fit: contain; object-position: 0 0; }
  .spic figcaption { grid-column: 2; grid-row: 4; align-self: start; margin-top: 36px; justify-content: flex-start; }
}

/* a phone: the head and line smaller, the blocks closer, the picture a row beside its words */
@media (max-width: 760px) {
  .smain { padding-top: 22px; padding-bottom: 56px; }
  .swords h1 { font-size: 40px; }
  .sline { margin-top: 10px; font-size: 18px; }
  .sblock { margin-top: 22px; }
  .srow { margin-bottom: 8px; }
  .stext { padding: 12px 14px; font-size: 15px; line-height: 1.45; }
  .shd { margin-bottom: 8px; }
  .ctext { padding: 6px 10px; font-size: 14px; }
  .schan { gap: 8px; }
  .schan a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 9px 10px; }
  .schan svg { grid-row: auto; width: 18px; height: 18px; margin-bottom: 2px; }
  .cn2 { font-size: 15px; }
  .spic { margin-top: 22px; display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .spic figcaption { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
}