/* lazybard.quest/liens : la page de liens, lue d'abord au téléphone, sa mise en page seulement.
   La marque (couleurs, polices, lettrage, la salle, les logos) : marque.css. */

body{font:600 1rem/1.4 var(--ui);
  --lamp-at:50% 0%;--lamp-shape:ellipse 70% 42%;--glow-at:50% 26%;--glow-shape:ellipse 90% 60%;--lamp-height:760px}

.col{position:relative;z-index:1;max-width:28rem;margin:0 auto;padding-block:52px 44px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.title{text-align:center;margin-bottom:32px}
.name{font-size:4.5rem}
.voice{margin:.45em 0 0;font:italic 500 1.25rem/1.35 var(--story);color:var(--text-soft)}

.links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.links a{display:grid;grid-template-columns:var(--logo-col) minmax(0,1fr);column-gap:var(--logo-gap);align-items:center;min-height:64px;padding:10px 18px;
  border-radius:var(--radius-control);background:var(--surface);border:1px solid var(--light-deep);box-shadow:var(--shadow-wood-edge);
  color:var(--text-soft);text-decoration:none}
.links a:hover{border-color:var(--light)}
.links a > .txt,.links a > .label{grid-column:2}
.links .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.links .label{font-size:1.125rem;line-height:1.25}
.links .sub{font-size:.875rem;line-height:1.3;color:var(--text-muted);overflow-wrap:anywhere}
/* La seule plaque éclairée : la chaîne. */
.links a.main{min-height:76px;background:linear-gradient(180deg,var(--action) 0%,var(--action-deep) 100%);border-color:var(--light-edge);color:var(--text-soft);
  box-shadow:inset 0 1px 0 rgba(var(--text-rgb),.22),0 8px 20px rgba(var(--shade-rgb),.55),0 0 36px rgba(var(--light-rgb),.16)}
.links a.main:hover{filter:brightness(1.1)}
.links a.main .label{font-size:1.25rem}
.links a.main .sub{color:var(--text-soft)}
.nets-title{margin:32px 0 12px;font:italic 500 1.125rem/1.3 var(--story);color:var(--text-muted)}
.nets{grid-template-columns:1fr 1fr}
.nets a{min-height:52px}

.promise{margin:40px 0 0;text-align:center;font:italic 500 1.25rem/1.4 var(--story);color:var(--light);text-wrap:balance}

@media (min-width:48em){
  .col{padding-block:88px 64px}
  .name{font-size:5.5rem}
  .voice{font-size:1.375rem}
}