/* ============================================================
   links.css — rules from styles.css used by one page, /links.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   Linked straight after styles.css (and any family sheet).
   ============================================================ */

/* Vittore Carpaccio, The Vision of Saint Augustine (c. 1502), Scuola di San
   Giorgio degli Schiavoni, Venice — a scholar's study lined with books, which
   is what a page of recommended reading is. The source is 3:2 against a much
   wider band, so `cover` crops height only: 42% holds the niche and the saint
   at his desk behind the title. The shared veil is kept as it is. */
.links-head{
  --pagehead-image:url("/images/links-masthead.webp");
  --pagehead-position:center 42%;
  --pagehead-position-mobile:center 45%;
}

/* ───────────────── LINKS PAGE ───────────────── */
/* The card language of /heresies and /councils: paper card, a hairline, a
   3px rule down the left that wears the day's colour (--lit-accent, so it is
   gold again with the liturgical toggle off), and a two-pixel lift on hover and
   on keyboard focus alike. The small letterspaced capitals — the jump row, the
   eyebrows, the URL line and "Visit" — take --gold-deep rather than --gold:
   gold is 3.6:1 on parchment, which is too light for 11px capitals, and
   --gold-deep clears 5:1. --gold is kept for the ✦, the medallion's initial and
   the play glyph, which are ornament and large type. */
.links-page{padding:34px 0 60px;}
.links-jump{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:0 auto 6px;max-width:900px;
}
.links-jump a{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:border-color 180ms ease,color 180ms ease;
}
.links-jump a:hover,.links-jump a:focus-visible{color:var(--espresso);border-bottom-color:var(--champagne);}
.links-jump a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.links-sec{margin-top:46px;scroll-margin-top:90px;}
.links-eyebrow{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-deep);text-align:center;
  line-height:1.5;margin:0 0 26px;
}

/* min() lets the 300px floor give way on a phone narrower than 300px + gutters,
   so the grid never pushes the page sideways; above that, auto-fill makes it
   three columns across the 1120px wrap, two on a tablet and one on a phone. */
.links-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:22px;align-items:stretch;
}
/* isolation keeps the watermark's multiply inside the card: it blends with the
   parchment under it and never with the page behind. */
.link-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;height:100%;
  background:#fff;border:1px solid var(--rule);
  border-left:3px solid var(--lit-accent);border-radius:4px;
  padding:22px 24px;color:var(--ink);text-decoration:none;
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
}
/* The left rule is restated after the hover border-color so the hover hairline
   does not repaint it champagne; it keeps the day's colour throughout. */
.link-card:hover,.link-card:focus-visible{
  transform:translateY(-2px);border-color:var(--champagne);
  border-left-color:var(--lit-accent);
  box-shadow:0 10px 28px rgba(26,18,11,.10);color:var(--ink);
}
.link-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* The watermark: each card's favicon, or its channel's avatar, set faintly
   behind the text, centred both ways at about 70% of the card's height. The
   filter takes every logo to the same sepia ink before it is laid down, and
   multiply lets the parchment show through it, so whatever colours a site's
   own mark uses, none of them reaches the page. It is decoration only: the
   wrapper is aria-hidden, the image has no alt, and it takes no pointer.

   A favicon that fails to load removes itself and leaves .is-initial, which
   sets data-initial in Cinzel and the site's gold at the same strength. A
   failed avatar leaves the play glyph that follows it in the markup.

   The picture is the faint part, at a tenth of full strength and no more
   than 96px across: blown up any further, a site's logo turned to a muddy
   smudge behind the text, worst on the busy avatars of the YouTube row. The
   fallbacks are the opposite — the initial and the play glyph are drawn in
   the site's gold at full strength, crisp, because they are the site's own
   type rather than somebody's bitmap enlarged — and so they move to the
   card's corner (below). A favicon narrower than 64px
   is not used at all: its onload hands the card to the initial instead, as
   a failed one does, because a 16px or 32px icon enlarged to 96px is exactly
   the smudge this avoids. Sites whose favicon service gives nothing usable
   have their mark kept in images/links/ instead, so every card that has a
   logo shows it; only a site with no mark of its own falls to its initial. */
.link-mark{
  position:absolute;top:50%;left:50%;z-index:0;
  height:70%;max-height:96px;aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  mix-blend-mode:multiply;pointer-events:none;
  color:var(--gold);container-type:size;
}
.link-mark img{
  width:100%;height:100%;object-fit:contain;
  filter:grayscale(1) sepia(.6) contrast(.9);
  opacity:.1;transition:opacity 220ms ease,filter 220ms ease;
}
/* An avatar is a portrait cut to a circle on YouTube itself; it keeps that
   shape here so it still reads as a channel and not as a photograph. */
.link-mark-play img{border-radius:50%;}
.link-mark-play svg{width:72%;height:72%;margin-left:6%;}
.link-mark-play:has(img) svg{display:none;}
.link-mark.is-initial::before{
  content:attr(data-initial);
  font-family:var(--display);font-weight:600;line-height:1;color:var(--gold);
  font-size:120px;font-size:88cqh;
}
/* On hover or focus the mark comes up in the site's own colours. Multiply
   still drops a logo's white ground into the parchment, and the text halo
   below keeps every line of type readable over it. */
.link-card:hover .link-mark img,.link-card:focus-visible .link-mark img{filter:none;opacity:.4;}
/* A crisp gold letter at full strength cannot sit behind the text — under it,
   the description would fall to under 2:1 — so a card that falls back to its
   initial, or to the play glyph, wears it small in the top corner instead,
   clear of every line of type, and the name gives way to it. */
.link-mark.is-initial,
.link-mark-play:not(:has(img)){
  top:20px;right:20px;left:auto;transform:none;
  height:34px;mix-blend-mode:normal;
}
.link-card:has(.link-mark.is-initial)>.link-name,
.link-card:has(.link-mark-play:not(:has(img)))>.link-name{padding-right:44px;}

.link-name{
  font-family:var(--head);font-size:21px;font-weight:600;line-height:1.2;
  color:var(--espresso);margin:0 0 6px;transition:color 180ms ease;
}
.link-card:hover .link-name,.link-card:focus-visible .link-name{color:var(--gold-deep);}
.link-url{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-deep);overflow-wrap:anywhere;
}
.link-desc{
  font-family:var(--body);font-size:15px;line-height:1.55;
  color:var(--muted);margin:10px 0 0;
}
/* The bottom row is pushed to the foot of the card so every card in a row ends
   on the same line. It is a hint for a pointer and stays hidden until hover or
   focus; a touch screen has no hover to reveal it, so there it is always shown. */
.link-visit{
  margin-top:auto;padding-top:16px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
  opacity:0;transition:opacity 180ms ease;
}
.link-card:hover .link-visit,.link-card:focus-visible .link-visit{opacity:1;}
@media(hover:none){.link-visit{opacity:1;}}
@media(max-width:640px){
  .links-page{padding-top:26px;}
  .links-jump{gap:6px 18px;}
  .links-jump a{letter-spacing:.16em;}
  .link-card{padding:20px 20px;}
}
@media(prefers-reduced-motion:reduce){
  .link-card,.link-name,.link-visit,.link-mark img,.links-jump a{transition:none;}
  .link-card:hover,.link-card:focus-visible{transform:none;}
}

/* ───────────────── PRINT ───────────────── */
@media print{
  .links-grid{display:block;}
  .link-card{border-color:#ccc !important;margin-bottom:8pt;padding:10pt 12pt;transform:none !important;}
  .link-card:hover{box-shadow:none !important;}
  .link-name{font-size:12pt;}
  .link-url{font-size:8pt;}
  .link-desc{font-size:9pt;color:#555 !important;margin-top:4pt;}
  .link-card[href]::after{display:none !important;}
}