/* LinkStack theme "lenasori" — carte de visite, dans le style de lenasori.com
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face { font-family: Satoshi; src: url(extra/custom-assets/Satoshi-Variable.ttf) format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(extra/custom-assets/jetbrains-mono-latin-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(extra/custom-assets/jetbrains-mono-latin-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --ico-f: brightness(0) opacity(.7);
  --ico-pri-f: none;
  --background: 219 28% 97%;
  --card: 218 30% 99%;
  --muted: 219 22% 93%;
  --border: 218 18% 84%;
  --foreground: 220 16% 22%;
  --muted-foreground: 220 10% 38%;
  --primary: 213 34% 41%;
  --primary-foreground: 219 28% 96%;
  --card-sh: 0 1px 2px hsl(220 33% 18% / .06), 0 6px 18px hsl(220 33% 18% / .06);
  --card-border: transparent;
  --sans: Satoshi, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
}

/* Dark: follows the system unless the visitor picked a theme with the toggle (data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ico-f: brightness(0) invert(1) opacity(.85);
    --ico-pri-f: brightness(0);
    --background: 220 16% 16%;
    --card: 219 18% 22%;
    --muted: 219 17% 26%;
    --border: 220 14% 36%;
    --foreground: 218 27% 94%;
    --muted-foreground: 219 16% 70%;
    --primary: 193 43% 67%;
    --primary-foreground: 220 16% 16%;
    --card-sh: none;
    --card-border: hsl(220 14% 36% / .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ico-f: brightness(0) invert(1) opacity(.85);
  --ico-pri-f: brightness(0);
  --background: 220 16% 16%;
  --card: 219 18% 22%;
  --muted: 219 17% 26%;
  --border: 220 14% 36%;
  --foreground: 218 27% 94%;
  --muted-foreground: 219 16% 70%;
  --primary: 193 43% 67%;
  --primary-foreground: 220 16% 16%;
  --card-sh: none;
  --card-border: hsl(220 14% 36% / .5);
}

/* Base
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.background-container, .copy-icon { display: none !important; }

:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: 6px; }

::selection { background: hsl(var(--primary) / .25); }

/* Page frame
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body > .container {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: .75rem 1rem 2.5rem;
}

.row { display: block; }

/* The card */
body > .container > .row > .column {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  margin-top: 0 !important;
  padding: 1.5rem 1.5rem 1rem;
  background: hsl(var(--card));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-sh);
}

body > .container > .row > .column > * { grid-column: 1 / -1; min-width: 0; }

/* Eyebrow, like the "~/ home · …" line of the site */
body > .container > .row > .column::before {
  content: "~/carte · cybersécurité · genève, ch";
  grid-column: 1 / -1;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

[data-lang="en"] body > .container > .row > .column::before { content: "~/card · cybersecurity · geneva, ch"; }

/* Identity
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#avatar {
  grid-column: 1 !important;
  display: block;
  width: 4.75rem !important;
  min-width: 0 !important;
  height: 4.75rem !important;
  object-fit: cover;
  border: 1px solid hsl(var(--border) / .5);
  border-radius: 50%;
  background: hsl(var(--muted));
}

h1 {
  grid-column: 2 !important;
  margin: 0;
  font-size: clamp(1.625rem, 7.2vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: hsl(var(--foreground)) !important;
}

h1::after { content: "."; color: hsl(var(--primary)); }
h1 svg { width: .6em; height: .6em; margin-left: .2em; vertical-align: baseline; }

/* Bio, with the "~/$ whoami" prompt */
center { display: block; text-align: left; }

.description-parent {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-bottom: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
}

.description-parent::before,
.ls-cmd {
  content: "~/$ whoami --short --pretty";
  font-family: var(--mono);
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}

.ls-js .description-parent::before { content: none; }

/* The bio holds both languages: <span lang="fr">…</span><span lang="en">…</span> */
[data-lang="fr"] .description-parent [lang="en"],
[data-lang="en"] .description-parent [lang="fr"] { display: none; }

/* Typing effect on the prompt (first visit of the session), the bio is the command output */
.ls-typing p { animation: none; opacity: 0; }

.ls-cur {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .2em;
  vertical-align: text-bottom;
  background: hsl(var(--primary) / .8);
  animation: ls-blink 1.1s steps(1) infinite;
}

@keyframes ls-blink { 50% { opacity: 0; } }
.ls-cmd b { font-weight: 500; color: hsl(var(--primary)); }
.ls-cmd i { font-style: normal; color: hsl(var(--foreground)); }

.description-parent p,
.description-parent * {
  margin: 0 !important;
}

.description-parent p {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.55;
  text-wrap: pretty;
}

.description-parent p strong,
.description-parent p b { font-weight: 400; color: hsl(var(--foreground)); }

/* Headings between link groups: "~/ Présence" */
.column h2 {
  margin: 1.75rem 0 .625rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
}

.column h2::before {
  content: "~/";
  margin-right: .5rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
  color: hsl(var(--primary));
}

/* Static text blocks */
.column > .fadein > span { display: block; margin: .75rem 0; color: hsl(var(--muted-foreground)); }

.button-spacer { max-height: 2rem; }

/* Link rows
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a.button {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .875rem;
  min-height: 3.75rem;
  margin: 0 -.625rem;
  padding: .625rem;
  border-top: 1px solid hsl(var(--border) / .5);
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: background-color .18s ease-out;
  -webkit-tap-highlight-color: transparent;
}

a.button > * { pointer-events: none; }

a.button::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: hsl(var(--muted-foreground));
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform .18s ease-out, background-color .18s ease-out;
}

@media (hover: hover) {
  a.button:hover { background: hsl(var(--primary) / .08); border-radius: 12px; border-top-color: transparent; }
  .button-entrance:hover + .button-entrance > a.button { border-top-color: transparent; }
  a.button:hover::after { transform: translate(3px); background: hsl(var(--primary)); }
}

a.button:active { background: hsl(var(--primary) / .12); border-radius: 12px; }

/* Icon tile */
a.button .icon,
.ls-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border-radius: 10px;
  background: hsl(var(--primary) / .1);
  color: hsl(var(--primary)) !important;
  font-size: 1rem;
}

/* Without JS the stock white SVG icon is shown, tinted with a filter */
a.button img.icon { padding: .5625rem; object-fit: contain; filter: var(--ico-f); }

.ls-ico::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.ls-txt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.ls-t { overflow-wrap: anywhere; }

.ls-s {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  overflow-wrap: anywhere;
}

/* Primary action: save the contact (vCard) */
a.button[href*="/vcard/"] {
  grid-template-columns: 1.125rem auto 1rem;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  margin: 1.5rem 0 .75rem;
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: 12px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transition: filter .18s ease-out, transform .18s ease-out;
}

a.button[href*="/vcard/"] .icon,
a.button[href*="/vcard/"] .ls-ico {
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border-radius: 0;
  background: none;
  color: hsl(var(--primary-foreground)) !important;
}

a.button[href*="/vcard/"] img.icon { filter: var(--ico-pri-f); }

a.button[href*="/vcard/"]::after {
  background: hsl(var(--primary-foreground));
  -webkit-mask-image: var(--dl);
  mask-image: var(--dl);
}

a.button[href*="/vcard/"] .ls-txt { flex-direction: row; align-items: baseline; gap: .5rem; }
a.button[href*="/vcard/"] .ls-s { color: hsl(var(--primary-foreground) / .75); }

@media (hover: hover) {
  a.button[href*="/vcard/"]:hover { background: hsl(var(--primary)); border-radius: 12px; filter: brightness(1.08); }
  a.button[href*="/vcard/"]:hover::after { transform: translateY(2px); background: hsl(var(--primary-foreground)); }
}

a.button[href*="/vcard/"]:active { background: hsl(var(--primary)); transform: scale(.985); }

/* The row right after the primary button or a heading needs no hairline */
.button-entrance:has(a[href*="/vcard/"]) + .button-entrance > a.button { border-top-color: transparent; }

/* Highlight row: a custom link whose icon is "fa-trophy" (latest achievement) */
a.button:has(.fa-trophy) {
  margin: .25rem 0 .5rem;
  padding: .875rem;
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: 12px;
  background: hsl(var(--primary) / .07);
}

a.button:has(.fa-trophy) .icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) !important; }

.button-entrance:has(.fa-trophy) + .button-entrance > a.button { border-top-color: transparent; }

@media (hover: hover) {
  a.button:has(.fa-trophy):hover { background: hsl(var(--primary) / .12); border-color: hsl(var(--primary) / .45); }
}

/* Video card: a row that links to a YouTube video (see custom-body-end) */
.ls-video { margin: .25rem 0 1rem; }

.ls-video__play,
.ls-video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid hsl(var(--border) / .5);
  border-radius: 12px;
  background: hsl(var(--muted));
}

.ls-video__play > * { pointer-events: none; }

.ls-video__play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }

.ls-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.ls-video__btn {
  position: absolute;
  left: .875rem;
  bottom: .875rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: hsl(var(--primary));
  box-shadow: 0 6px 18px hsl(220 33% 10% / .35);
  transition: transform .18s ease-out;
}

.ls-video__btn::before {
  content: "";
  margin-left: .1875rem;
  border-style: solid;
  border-width: .5625rem 0 .5625rem .9375rem;
  border-color: transparent transparent transparent hsl(var(--primary-foreground));
}

@media (hover: hover) {
  .ls-video__play:hover img { transform: scale(1.03); }
  .ls-video__play:hover .ls-video__btn { transform: scale(1.06); }
}

.ls-video__cap { display: flex; flex-direction: column; gap: .125rem; margin-top: .625rem; font-weight: 500; line-height: 1.3; }

/* Feed row: a link to an RSS/Atom feed shows the latest item (see custom-body-end) */
.ls-ico--thumb { overflow: hidden; width: 3.5rem; height: 2.25rem; padding: 0; background: hsl(var(--muted)); }
.ls-ico--thumb::before { content: none; }
.ls-ico--thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

a.button.ls-feed { grid-template-columns: 3.5rem minmax(0, 1fr) 1rem; }
.ls-feed .icon { width: 3.5rem; }

.ls-feed .ls-t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: .9375rem;
}

/* Chips: consecutive custom links whose icon is "fa-award" (certifications) */
.ls-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .25rem; }

.ls-chips a.button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  height: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: .625rem .75rem;
  border: 1px solid hsl(var(--border) / .6);
  border-radius: 10px;
  font-size: .875rem;
}

.ls-chips a.button::after,
.ls-chips a.button .icon { display: none; }

.ls-chips .ls-s { font-size: .6875rem; }

@media (hover: hover) {
  .ls-chips a.button:hover { border-color: hsl(var(--primary) / .45); border-radius: 10px; }
}

.ls-chips + .button-entrance > a.button { border-top-color: transparent; }

/* QR code dialog */
.ls-qr {
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 20px 60px hsl(220 33% 10% / .35);
  text-align: center;
}

.ls-qr::backdrop { background: hsl(220 16% 10% / .65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.ls-qr[open] { animation: ls-rise .25s cubic-bezier(.2, .7, .2, 1) both; }

/* Always dark on white, whatever the theme: scanners need the contrast */
.ls-qr__box { padding: .5rem; border-radius: 12px; background: #fff; }
.ls-qr__box img { display: block; width: 100%; height: auto; }

.ls-qr__url { margin: 1rem 0 0; font-family: var(--mono); font-size: .9375rem; font-weight: 500; }
.ls-qr__url::before { content: "~/ "; color: hsl(var(--primary)); }
.ls-qr__hint { margin: .25rem 0 1.25rem; font-size: .9375rem; font-weight: 300; color: hsl(var(--muted-foreground)); }

.ls-qr__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }

.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid hsl(var(--border) / .7);
  border-radius: 12px;
  background: transparent;
  color: hsl(var(--foreground));
  font: 500 .9375rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.ls-btn--pri { border-color: transparent; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Social icon row (LinkStack "icons") */
.social-icon-div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: hsl(var(--primary) / .1);
  text-decoration: none;
}

.social-icon { color: hsl(var(--primary)) !important; font-size: 1.125rem; }

/* Footer: LinkStack's page links are not part of the card */
.column .container { display: none; }

/* Small screens
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 26rem) {
  body > .container { padding: .5rem .75rem 2rem; }
  body > .container > .row > .column { padding: 1.25rem 1.25rem .875rem; column-gap: .875rem; }
  #avatar { width: 4.25rem !important; height: 4.25rem !important; }
}

@media print {
  .sharediv, a.button::after, .ls-video__btn, .ls-cur { display: none !important; }
  body > .container > .row > .column { box-shadow: none; border: 1px solid #ccc; }
}