/* ============================================================================
   hariri.ch — /links/
   The profile mini application. One stylesheet, loaded on one view, with no
   layer under it: this page does not load theme.css, seasons.css, the parent
   theme's reset or Elementor, so everything it needs is stated here once.

   Two palettes, four seasons. The site's colour is chosen in wp-admin and is a
   season; the light-or-dark of this page is chosen by the visitor. Those are
   different decisions, so every season declares both of its palettes as --l-*
   and --d-*, and the three blocks under "the switch" are the only place that
   decides which set the page reads. Adding a season is one block; changing how
   the switch works is three rules, not thirty.
   ========================================================================== */

/* ---------------------------------------------------------------- seasons */

[data-season] {
  /* Winter — polar night. The only season with no light room of its own on the
     site, so its light palette is stated here: the same signal blue, deepened
     until it holds AA against white, over cool neutrals. */
  --l-canvas:#F3F5F9; --l-canvas-rgb:243,245,249; --l-deep:#E4E9F1;
  --l-panel:#FFFFFF;  --l-panel-2:#FBFCFE;
  --l-line:#D3DBE7;   --l-line-soft:#E4E9F1;
  --l-text:#101725;   --l-text-2:#445063; --l-muted:#5A6678;
  --l-accent:#2A55C7; --l-accent-hi:#1E3F9C; --l-accent-mute:rgba(42,85,199,.11);
  --l-ok:#1F6B4A;     --l-on-accent:#FFFFFF; --l-shadow:16,23,37;

  --d-canvas:#0A0E15; --d-canvas-rgb:10,14,21; --d-deep:#05080D;
  --d-panel:#111823;  --d-panel-2:#161F2C;
  --d-line:#1E2836;   --d-line-soft:#182131;
  /* The site's dark --muted is #64748B, which is right for a date under a
     headline and not for a card description, a section label and a tile
     caption — measured against the three dark surfaces it lands between 3.5
     and 4.1 to 1. Lifted until the worst of the three clears AA at 4.85. */
  --d-text:#E9EEF6;   --d-text-2:#93A3B8; --d-muted:#7C8CA3;
  --d-accent:#5B8CFF; --d-accent-hi:#8FB0FF; --d-accent-mute:rgba(91,140,255,.16);
  --d-ok:#6FD3B4;     --d-on-accent:#06090F; --d-shadow:0,0,0;
}

/* Printemps — sous-bois clair. */
[data-season="spring"] {
  --l-canvas:#EEF3EA; --l-canvas-rgb:238,243,234; --l-deep:#DEE7DA;
  --l-panel:#F7FBF6;  --l-panel-2:#FCFFFB;
  --l-line:#BDCBBD;   --l-line-soft:#D0DBCF;
  --l-text:#13251B;   --l-text-2:#43554A; --l-muted:#58685E;
  --l-accent:#007660; --l-accent-hi:#00614E; --l-accent-mute:rgba(0,118,96,.12);
  --l-ok:#2E7434;     --l-on-accent:#FFFFFF; --l-shadow:19,37,27;

  --d-accent:#00B48F; --d-accent-hi:#4ACBAF; --d-accent-mute:rgba(0,180,143,.16);
  --d-ok:#92CF93;
}

/* Été — ciel minéral. */
[data-season="summer"] {
  --l-canvas:#F6F9FB; --l-canvas-rgb:246,249,251; --l-deep:#E4EDF2;
  --l-panel:#FCFEFF;  --l-panel-2:#FEFFFF;
  --l-line:#C5D2DA;   --l-line-soft:#D7E1E8;
  --l-text:#121F2E;   --l-text-2:#455361; --l-muted:#5A6672;
  --l-accent:#006D9E; --l-accent-hi:#00578C; --l-accent-mute:rgba(0,109,158,.12);
  --l-ok:#157748;     --l-on-accent:#FFFFFF; --l-shadow:18,31,46;

  --d-accent:#00A2EC; --d-accent-hi:#57BFF1; --d-accent-mute:rgba(0,162,236,.16);
  --d-ok:#82D1A0;
}

/* Automne — atelier d'encre clair. */
[data-season="autumn"] {
  --l-canvas:#F1E2D3; --l-canvas-rgb:241,226,211; --l-deep:#E5CFBD;
  --l-panel:#F9F0E5;  --l-panel-2:#FDF7EF;
  --l-line:#CBB2A3;   --l-line-soft:#DAC5B5;
  --l-text:#301D17;   --l-text-2:#604A42; --l-muted:#6C584F;
  --l-accent:#9A4303; --l-accent-hi:#852A00; --l-accent-mute:rgba(154,67,3,.12);
  --l-ok:#236E3A;     --l-on-accent:#FFFFFF; --l-shadow:48,29,23;

  --d-accent:#E66806; --d-accent-hi:#F09A6D; --d-accent-mute:rgba(230,104,6,.16);
  --d-ok:#8BD099;
}

/* ------------------------------------------------------------- the switch */

/* Light is the written default, so a browser that reports no preference and a
   visitor who has chosen nothing both get a palette that was designed rather
   than inverted. */
:root {
  --canvas:var(--l-canvas); --canvas-rgb:var(--l-canvas-rgb); --deep:var(--l-deep);
  --panel:var(--l-panel); --panel-2:var(--l-panel-2);
  --line:var(--l-line); --line-soft:var(--l-line-soft);
  --text:var(--l-text); --text-2:var(--l-text-2); --muted:var(--l-muted);
  --accent:var(--l-accent); --accent-hi:var(--l-accent-hi); --accent-mute:var(--l-accent-mute);
  --ok:var(--l-ok); --on-accent:var(--l-on-accent); --shadow:var(--l-shadow);
  color-scheme:light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-lk-theme="light"]) {
    --scrim:rgba(2,4,8,.66); --scrim-blur:4px;
    --canvas:var(--d-canvas); --canvas-rgb:var(--d-canvas-rgb); --deep:var(--d-deep);
    --panel:var(--d-panel); --panel-2:var(--d-panel-2);
    --line:var(--d-line); --line-soft:var(--d-line-soft);
    --text:var(--d-text); --text-2:var(--d-text-2); --muted:var(--d-muted);
    --accent:var(--d-accent); --accent-hi:var(--d-accent-hi); --accent-mute:var(--d-accent-mute);
    --ok:var(--d-ok); --on-accent:var(--d-on-accent); --shadow:var(--d-shadow);
    color-scheme:dark;
  }
}

:root[data-lk-theme="dark"] {
  --scrim:rgba(2,4,8,.66); --scrim-blur:4px;
  --canvas:var(--d-canvas); --canvas-rgb:var(--d-canvas-rgb); --deep:var(--d-deep);
  --panel:var(--d-panel); --panel-2:var(--d-panel-2);
  --line:var(--d-line); --line-soft:var(--d-line-soft);
  --text:var(--d-text); --text-2:var(--d-text-2); --muted:var(--d-muted);
  --accent:var(--d-accent); --accent-hi:var(--d-accent-hi); --accent-mute:var(--d-accent-mute);
  --ok:var(--d-ok); --on-accent:var(--d-on-accent); --shadow:var(--d-shadow);
  color-scheme:dark;
}

/* -------------------------------------------------------------- the scale */

:root {
  /* One radius family. 15 for a card, 11 for the tile inside it, 20 for a
     surface that floats above the page, 999 for anything pill-shaped. */
  --r-card:15px; --r-inner:11px; --r-float:20px; --r-pill:999px;
  /* Black at 40% over a #0A0E15 page is a scrim nobody can see, so the dark
     mode leans on the blur and a deeper wash instead of on opacity alone. */
  --scrim:rgba(16,23,37,.42); --scrim-blur:2px;
  --shell:552px;
  --gap:9px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* The label register, carried over from the site: weight rather than size is
     what separates a section marker from the text under it. */
  --label:11.5px; --label-weight:650; --label-track:.13em;

  --font:'Hariri Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------- the page */

*, *::before, *::after { box-sizing:border-box }

/* A component that declares its own display would otherwise outrank the user
   agent's rule for [hidden], and the native share button — hidden on every
   browser without navigator.share — shipped visible and inert because of it. */
[hidden] { display:none !important }

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

body.lk {
  margin:0;
  min-height:100dvh;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}

/* On a wide screen the room becomes part of the composition: two very soft
   pools of the season's colour behind a canvas that stays flat under the app
   itself. Fixed, so scrolling reads as moving through a place rather than
   dragging a gradient. */
body.lk::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(64% 46% at 84% -6%, var(--accent-mute), transparent 74%),
    radial-gradient(54% 38% at 4% 106%, var(--accent-mute), transparent 76%);
  opacity:.8;
}
/* The same two pools over a near-black canvas read as a stain rather than as
   light, and the edge of the falloff becomes visible as a band. Dimmed until
   they are only felt. */
:root[data-lk-theme="dark"] body.lk::before { opacity:.42 }
@media (prefers-color-scheme: dark) {
  :root:not([data-lk-theme="light"]) body.lk::before { opacity:.42 }
}

img, svg { display:block; max-width:100% }

.lk-sprite { position:absolute; width:0; height:0; overflow:hidden }

.lk-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.lk-skip {
  position:absolute; inset-inline-start:12px; top:-64px; z-index:60;
  background:var(--accent); color:var(--on-accent);
  padding:11px 16px; border-radius:0 0 12px 12px;
  font-size:13px; font-weight:600; text-decoration:none;
}
.lk-skip:focus { top:0 }

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

/* Scripting decides two controls: an appearance switch that can only act on
   this device, and a share sheet that has nothing to fall back to. Both are
   hidden until the inline script in the head has said it ran, so a page without
   JavaScript offers only what it can honour. */
/* Stated as "no data-lk-js" rather than as a plain class, because the controls
   this hides are buttons and a <details> that declare their own display, and a
   single-class rule of the same weight further up the sheet loses to them —
   which shipped a share button on a page with no script to open it. */
html:not([data-lk-js]) .lk-js { display:none }

/* ---------------------------------------------------------------- the app */

.lk-app {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:100dvh;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------ the app bar */

.lk-bar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  padding-block:10px;
  padding-top:calc(10px + env(safe-area-inset-top));
  margin-inline:-4px; padding-inline:4px;
}
.lk-bar__gap { flex:1 }

/* The scrim appears only once something has scrolled under the bar, so the
   first frame is a clean page and not a page with a bar drawn on it. */
.lk-bar::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(var(--canvas-rgb),.92) 62%, rgba(var(--canvas-rgb),0));
  opacity:0; transition:opacity .25s var(--ease);
}
.lk-bar.is-stuck::before { opacity:1 }

.lk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(var(--canvas-rgb),.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  color:var(--text-2); cursor:pointer;
  font:inherit; text-decoration:none; list-style:none;
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.lk-btn > svg { width:19px; height:19px }
.lk-btn:hover { color:var(--accent); border-color:var(--accent) }
.lk-btn:active { transform:scale(.94) }
.lk-btn__tag { font-size:10px; font-weight:700; letter-spacing:.04em }
.lk-pop--lang .lk-btn { width:auto; padding-inline:10px }

/* The appearance button shows the mode the page is actually in. */
.lk-ico-dark { display:none }
:root[data-lk-theme="dark"] .lk-ico-light { display:none }
:root[data-lk-theme="dark"] .lk-ico-dark { display:block }
@media (prefers-color-scheme: dark) {
  :root:not([data-lk-theme="light"]) .lk-ico-light { display:none }
  :root:not([data-lk-theme="light"]) .lk-ico-dark { display:block }
}

/* -------------------------------------------------------------- popovers */

.lk-pop { position:relative }
.lk-pop > summary { list-style:none }
.lk-pop > summary::-webkit-details-marker { display:none }
.lk-pop > summary::marker { content:"" }

/* Chrome makes the contents of a closed <details> inert on its own; saying so
   in the stylesheet is what makes that true in the older in-app browsers this
   page is opened in, where three language links were otherwise in the tab order
   of a page that shows no language menu. */
.lk-pop:not([open]) .lk-pop__panel { display:none }

.lk-pop__panel {
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:30;
  min-width:214px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-float);
  box-shadow:0 18px 40px -22px rgba(var(--shadow),.55), 0 2px 8px -4px rgba(var(--shadow),.3);
  animation:lk-pop .18s var(--ease) both;
}
@keyframes lk-pop { from { opacity:0; transform:translateY(-6px) scale(.985) } }

.lk-pop__head {
  margin:6px 8px 8px;
  font-size:var(--label); font-weight:var(--label-weight);
  letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted);
}

.lk-opt {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; min-height:44px;
  border:0; border-radius:var(--r-inner); background:transparent;
  color:var(--text); font:inherit; font-size:14px; text-align:start;
  text-decoration:none; cursor:pointer;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.lk-opt:hover { background:var(--line-soft) }
.lk-opt__code { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted); min-width:20px }
.lk-opt__ico { width:17px; height:17px; color:var(--muted) }
.lk-opt__name { flex:1 }
.lk-opt__on { width:16px; height:16px; color:var(--accent); opacity:0; transition:opacity .16s var(--ease) }
.lk-opt.is-on { color:var(--accent-hi); font-weight:600 }
.lk-opt.is-on .lk-opt__on,
.lk-opt[aria-pressed="true"] .lk-opt__on { opacity:1 }
.lk-opt[aria-pressed="true"] { color:var(--accent-hi); font-weight:600 }
.lk-opt[aria-pressed="true"] .lk-opt__ico { color:var(--accent) }

/* ------------------------------------------------------------------- hero */

.lk-main { flex:1 }

.lk-hero { text-align:center; padding:14px 0 26px }

.lk-face {
  display:inline-block; position:relative;
  width:92px; height:92px; margin-bottom:14px;
  border-radius:27px;
  background:var(--panel);
  box-shadow:0 14px 34px -18px rgba(var(--shadow),.5);
}
.lk-face img {
  width:100%; height:100%; border-radius:inherit;
  object-fit:cover; object-position:center top;
}
/* The ring is drawn over the photograph rather than under it, so it stays one
   pixel at every density and never leaves a pale seam on a dark surface. */
.lk-face::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--shadow),.14), inset 0 0 0 4px var(--canvas), inset 0 0 0 5px var(--accent-mute);
}

.lk-name {
  margin:0;
  font-size:clamp(25px, 6.2vw, 30px); font-weight:700;
  letter-spacing:-.02em; line-height:1.15;
}

.lk-role {
  margin:7px 0 0;
  font-size:14.5px; font-weight:500; color:var(--text-2); line-height:1.4;
}

.lk-place {
  display:inline-flex; align-items:center; gap:5px;
  margin:9px 0 0;
  font-size:12.5px; font-weight:500; color:var(--muted);
}
.lk-place svg { width:14px; height:14px; flex:none }

.lk-pitch {
  margin:12px auto 0; max-width:38ch;
  font-size:14px; color:var(--text-2); line-height:1.55;
}

.lk-status {
  display:inline-flex; align-items:center; gap:7px;
  margin:16px 0 0; padding:6px 12px 6px 10px;
  border-radius:var(--r-pill);
  background:var(--accent-mute); color:var(--accent-hi);
  font-size:12.5px; font-weight:600;
}
.lk-status i {
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.lk-status--slow i { background:var(--accent) }

/* --------------------------------------------------------------- sections */

.lk-sec { margin-bottom:26px }
.lk-sec--primary { margin-bottom:30px }

.lk-lab {
  margin:0 0 10px; padding-inline:3px;
  font-size:var(--label); font-weight:var(--label-weight);
  letter-spacing:var(--label-track); text-transform:uppercase; color:var(--muted);
}

.lk-stack { display:flex; flex-direction:column; gap:var(--gap) }

/* ------------------------------------------------------------------ cards */

.lk-card {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 13px; min-height:62px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--panel); color:inherit; text-decoration:none;
  transition:border-color .2s var(--ease), background-color .2s var(--ease),
             transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lk-card:hover {
  border-color:var(--accent); background:var(--panel-2);
  transform:translateY(-1px);
  box-shadow:0 10px 26px -18px rgba(var(--shadow),.55);
}
.lk-card:active { transform:translateY(0) scale(.992) }

.lk-card__icon {
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:var(--r-inner);
  background:var(--line-soft); color:var(--text-2);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.lk-card__icon svg { width:19px; height:19px }
.lk-card:hover .lk-card__icon { background:var(--accent-mute); color:var(--accent) }

.lk-card__body { min-width:0 }

.lk-card__title {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:14.5px; font-weight:600; line-height:1.3;
}

.lk-card__desc {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:2px;
  font-size:12.8px; color:var(--text-2); line-height:1.42;
}

.lk-card__go {
  display:grid; place-items:center; width:22px; height:22px;
  color:var(--muted);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.lk-card__go svg { width:18px; height:18px }
.lk-card:hover .lk-card__go { color:var(--accent) }
.lk-card:hover .lk-card__go--arrow { transform:translateX(3px) }
.lk-card:hover .lk-card__go--external { transform:translate(2px,-2px) }
.lk-card:hover .lk-card__go--download { transform:translateY(2px) }

.lk-badge {
  padding:2px 7px; border-radius:6px;
  background:var(--accent-mute); color:var(--accent-hi);
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}

/* The one dominant action. Solid rather than outlined, because on a page of
   twelve destinations the first one has to be visibly first. */
.lk-card--primary {
  padding:16px 15px; min-height:74px;
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:0 12px 26px -20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lk-card--primary:hover {
  background:var(--accent-hi); border-color:var(--accent-hi);
  box-shadow:0 14px 30px -18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.lk-card--primary .lk-card__icon {
  width:42px; height:42px;
  background:rgba(255,255,255,.16); color:inherit;
}
.lk-card--primary:hover .lk-card__icon { background:rgba(255,255,255,.22); color:inherit }
.lk-card--primary .lk-card__title { font-size:16px; font-weight:650 }
.lk-card--primary .lk-card__desc { color:inherit; opacity:.82 }
.lk-card--primary .lk-card__go,
.lk-card--primary:hover .lk-card__go { color:inherit }
:root[data-lk-theme="dark"] .lk-card--primary .lk-card__icon { background:rgba(0,0,0,.16) }
@media (prefers-color-scheme: dark) {
  :root:not([data-lk-theme="light"]) .lk-card--primary .lk-card__icon { background:rgba(0,0,0,.16) }
}

/* The featured project: the capture is the description. */
.lk-card--featured { padding:11px 13px 11px 11px }
.lk-card--featured .lk-card__shot {
  width:58px; height:58px; border-radius:12px; overflow:hidden;
  background:var(--line-soft); flex:none;
  box-shadow:inset 0 0 0 1px rgba(var(--shadow),.1);
}
.lk-card--featured .lk-card__shot img { width:100%; height:100%; object-fit:cover; object-position:center top }

/* -------------------------------------------------------------- the tiles */

.lk-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:var(--gap) }

.lk-card--compact {
  grid-template-columns:1fr; justify-items:center; text-align:center;
  gap:9px; padding:15px 8px; min-height:88px;
}
.lk-card--compact .lk-card__icon { width:36px; height:36px }
.lk-card--compact .lk-card__title { justify-content:center; font-size:12.8px; font-weight:600; line-height:1.25 }

/* -------------------------------------------------------------- the chips */

/* The seven services are named rather than linked, because the homepage
   presents them as one section and seven cards to one anchor would be seven
   ways to arrive at the same place. */
.lk-card--list { align-items:start; padding-top:13px; padding-bottom:14px }
.lk-card--list .lk-card__icon,
.lk-card--list .lk-card__go { margin-top:1px }

.lk-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px }
.lk-chip {
  padding:4px 8px; border-radius:7px;
  background:var(--line-soft); color:var(--text-2);
  font-size:11px; font-weight:500; line-height:1.4; letter-spacing:.005em;
}
.lk-card:hover .lk-chip { background:var(--accent-mute); color:var(--accent-hi) }

/* ------------------------------------------------------------- the footer */

.lk-foot { margin-top:auto; padding:22px 0 6px; text-align:center }
.lk-mark { margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--text-2) }
.lk-mark i { color:var(--accent); font-style:normal }
.lk-copy { margin:5px 0 0; font-size:11.5px; color:var(--muted) }
.lk-copy a { color:inherit; text-decoration-color:var(--line) }
.lk-copy a:hover { color:var(--accent) }

/* -------------------------------------------------------- the share sheet */

.lk-sheet { position:fixed; inset:0; z-index:50 }
.lk-sheet[hidden] { display:none }

.lk-sheet__scrim {
  position:absolute; inset:0;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(var(--scrim-blur)); backdrop-filter:blur(var(--scrim-blur));
  animation:lk-fade .2s var(--ease) both;
}
@keyframes lk-fade { from { opacity:0 } }

.lk-sheet__panel {
  position:absolute; inset-inline:0; bottom:0;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  background:var(--panel);
  border-top:1px solid var(--line);
  border-radius:26px 26px 0 0;
  text-align:center;
  animation:lk-rise .26s var(--ease) both;
}
@keyframes lk-rise { from { transform:translateY(14px); opacity:0 } }

.lk-sheet__grip {
  width:38px; height:4px; margin:0 auto 14px;
  border-radius:var(--r-pill); background:var(--line);
}
.lk-sheet__h { margin:0 0 14px; font-size:16px; font-weight:650 }

.lk-sheet__x {
  position:absolute; top:12px; inset-inline-end:14px;
  display:grid; place-items:center; width:34px; height:34px;
  border:0; border-radius:var(--r-inner); background:transparent;
  color:var(--muted); cursor:pointer;
}
.lk-sheet__x svg { width:17px; height:17px }
.lk-sheet__x:hover { background:var(--line-soft); color:var(--text) }

/* On a phone the code is behind a button: a visitor cannot scan the screen
   they are holding, and the panel's job there is to hand the address to another
   app. On anything wider it is the first thing in the panel, because that is
   exactly where someone reaches for their phone. */
.lk-qr { margin:0 0 14px }
.lk-qr__code {
  display:inline-block; padding:11px; border-radius:14px;
  background:#FFF; box-shadow:0 8px 24px -16px rgba(var(--shadow),.6);
}
.lk-qr__code img { width:132px; height:132px }
.lk-qr figcaption { margin-top:9px; font-size:11.5px; color:var(--muted) }
.lk-qr__show { width:100%; margin-bottom:14px }

/* Written as .lk-act.lk-qr__show rather than as one class: .lk-act declares its
   own display further down the sheet, and at equal weight the later rule wins —
   which put a "show the QR code" button above a QR code that was already there. */
@media (max-width: 559px) {
  .lk-qr { display:none }
  .lk-qr.is-open { display:block }
  .lk-act.lk-qr__show[aria-expanded="true"] { display:none }
  /* Nobody scans the screen they are holding: the caption is for the desktop
     visitor reaching for their phone, and on a phone it is noise. */
  .lk-qr figcaption { display:none }
}
@media (min-width: 560px) {
  .lk-act.lk-qr__show { display:none }
  .lk-qr__code img { width:150px; height:150px }
}

.lk-sheet__url {
  margin:0 0 14px; font-size:13px; font-weight:600; color:var(--text-2);
  word-break:break-all;
}

/* Two actions, side by side at every width. Stacked, the second one read as
   an afterthought; beside each other they are what the panel is for. */
.lk-sheet__acts { display:flex; gap:var(--gap) }
.lk-sheet__acts .lk-act { flex:1 1 0; min-width:0 }

/* The full label where it fits, a one-word one where it does not. Both ship;
   the stylesheet picks, so the choice survives a translation being longer. */
.lk-act__tight { display:none }
/* 384, not 400: "Copier le lien" measures 162px and a 390px phone gives each
   button 170, so the full label fits there and only the smaller phones — the
   SE at 375 and below — need the short one. */
@media (max-width: 384px) {
  .lk-act__full { display:none }
  .lk-act__tight { display:inline }
  .lk-act { padding:0 12px; font-size:14px }
}

.lk-act {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 18px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--panel-2); color:var(--text);
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.lk-act svg { width:18px; height:18px }
.lk-act:hover { border-color:var(--accent); color:var(--accent) }
.lk-act--go { background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.lk-act--go:hover { background:var(--accent-hi); border-color:var(--accent-hi); color:var(--on-accent) }
.lk-act.is-done { border-color:var(--ok); color:var(--ok) }

/* Where the operating system has no share sheet of its own, this row is what
   the share button opens: three ordinary links, no platform script behind
   them, and nothing sent anywhere until one is chosen. */
.lk-targets {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);
  margin-top:var(--gap);
  animation:lk-in .22s var(--ease) both;
}

.lk-target {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:74px; padding:12px 6px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--panel-2); color:var(--text-2); text-decoration:none;
  font-size:12px; font-weight:600; line-height:1.2; text-align:center;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.lk-target svg { width:20px; height:20px }
.lk-target:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-mute) }
.lk-target:active { transform:scale(.98) }

/* ------------------------------------------------------------- the toast */

.lk-toast {
  position:fixed; z-index:60;
  inset-inline:0; bottom:calc(22px + env(safe-area-inset-bottom));
  width:max-content; max-width:calc(100% - 40px); margin-inline:auto;
  padding:10px 16px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--panel); color:var(--text);
  box-shadow:0 16px 34px -20px rgba(var(--shadow),.6);
  font-size:13px; font-weight:600;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.lk-toast.is-on { opacity:1; transform:translateY(0) }

/* ------------------------------------------------------------------- RTL */

/* Arabic is not the Latin page mirrored. The direction flips by itself —
   everything above is written with logical properties — so what is left is the
   handful of things that carry a direction of their own: the two icons that
   mean "onward", and a line height a script with ascenders and descenders on
   both sides of the baseline needs more of. */
[dir="rtl"] .lk-card__go--arrow svg,
[dir="rtl"] .lk-card__go--external svg { transform:scaleX(-1) }
[dir="rtl"] .lk-card:hover .lk-card__go--arrow { transform:translateX(-3px) }
[dir="rtl"] .lk-card:hover .lk-card__go--external { transform:translate(-2px,-2px) }
[dir="rtl"] .lk-card__title { line-height:1.45 }
[dir="rtl"] .lk-card__desc { line-height:1.55 }
[dir="rtl"] .lk-name { letter-spacing:0 }
[dir="rtl"] .lk-lab { letter-spacing:.06em }
[dir="rtl"] .lk-mark { direction:ltr }
/* An address reads left to right in every language. Left to the paragraph's
   direction, the trailing slash of hariri.ch/links/ moved to the front. */
[dir="rtl"] .lk-sheet__url { direction:ltr }

/* The consent banner is not part of this page's language. It is served in the
   site's locale — French — whichever of the three addresses is open, so on the
   Arabic one it inherits a direction its sentences were not written for and its
   full stops land on the left. Given back its own direction; the day a
   Complianz document exists in Arabic, this one line is what to remove. */
[dir="rtl"] .cmplz-cookiebanner,
[dir="rtl"] #cmplz-manage-consent { direction:ltr; text-align:start }

/* --------------------------------------------------------- the wide room */

@media (min-width: 560px) {
  .lk-app { padding-inline:24px }
  .lk-hero { padding:26px 0 30px }
  .lk-face { width:104px; height:104px; border-radius:30px }
  .lk-tiles { gap:11px }
  :root { --gap:10px }
}

/* Below the sheet width the popovers stop being popovers: a 214px panel
   anchored to a 40px button on a 320px screen is a panel with nowhere to go,
   and the thing a phone already knows how to dismiss is a sheet. */
@media (max-width: 559px) {
  [data-lk-js] .lk-pop[open]::before {
    content:""; position:fixed; inset:0; z-index:29;
    background:var(--scrim);
    -webkit-backdrop-filter:blur(var(--scrim-blur)); backdrop-filter:blur(var(--scrim-blur));
    animation:lk-fade .2s var(--ease) both;
  }
  .lk-pop[open] .lk-pop__panel {
    position:fixed; inset:auto 0 0 0; z-index:30;
    min-width:0; padding:8px 12px calc(14px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0; border-width:1px 0 0;
    animation:lk-rise .24s var(--ease) both;
  }
  .lk-pop__head { margin:8px 6px 6px }
  .lk-opt { min-height:50px; font-size:15px }
}

@media (min-width: 560px) {
  .lk-sheet__panel {
    inset:auto 50% auto auto; top:50%; right:auto;
    transform:translate(50%, -50%);
    inset-inline-end:50%;
    width:min(380px, calc(100vw - 40px));
    padding:14px 22px 24px;
    border:1px solid var(--line); border-radius:22px;
    box-shadow:0 40px 90px -40px rgba(var(--shadow),.7);
    animation:lk-zoom .22s var(--ease) both;
  }
  @keyframes lk-zoom { from { opacity:0; transform:translate(50%, -50%) scale(.97) } }
  .lk-sheet__grip { display:none }
}

/* -------------------------------------------------------------- entrances */

.lk-hero, .lk-sec, .lk-foot { animation:lk-in .42s var(--ease) both }
.lk-hero { animation-delay:.02s }
.lk-sec:nth-of-type(1) { animation-delay:.07s }
.lk-sec:nth-of-type(2) { animation-delay:.11s }
.lk-sec:nth-of-type(3) { animation-delay:.15s }
.lk-sec:nth-of-type(4) { animation-delay:.19s }
.lk-sec:nth-of-type(5) { animation-delay:.22s }
.lk-foot { animation-delay:.26s }

@keyframes lk-in { from { opacity:0; transform:translateY(9px) } }

/* Motion is decoration here: nothing on this page needs to move to be
   understood, so when the visitor has asked for less, all of it goes rather
   than being slowed down. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Touch pointers get no hover state to be stuck in, and a target no smaller
   than the platform minimum. */
@media (pointer: coarse) {
  .lk-card:hover { transform:none; box-shadow:none; background:var(--panel) }
  .lk-card:hover .lk-card__icon { background:var(--line-soft); color:var(--text-2) }
  .lk-card:hover .lk-card__go { color:var(--muted); transform:none }
  .lk-card--primary:hover { background:var(--accent); border-color:var(--accent) }
  .lk-btn { width:44px; height:44px }
  .lk-pop--lang .lk-btn { width:auto }
}