/* Eslabón Group. Premise: every link is a company.
   Ground is a real black; ink is warm titanium white, never #fff; one ember.
   Registers: Bricolage Grotesque (display), Hanken Grotesk (text), Martian Mono (labels). */
:root {
  --ground: #000000;
  --ground: oklch(0% 0 0);
  --ink: #f2f3f5;
  --ink: oklch(96.4% 0.003 265);
  --ti: #9aa0a8;
  --ti: oklch(70.3% 0.014 256);
  --ti-dim: oklch(52% 0.012 256);
  --panel: #0b0d12;
  --panel: oklch(15.9% 0.011 268);
  --line: oklch(28% 0.012 262);
  --ember: #ff5b1f;
  --ember: oklch(68.3% 0.21 38);
  --signal: #5b8cff;
  --signal: oklch(66.2% 0.179 265);
  --display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body { font: 400 16px/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--ground); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

#world, #flow, #heat { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#flow { z-index: 1; }
/* the heat layer: only the light hot metal gives off, blurred into bloom and
   added on top, so the glow follows the metal's own shape */
#heat { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; filter: blur(14px) saturate(1.15); mix-blend-mode: screen; opacity: .9; }
.no-gl #heat { display: none; }
#world { z-index: 0; }
.no-gl #flow { display: none; }
.poster { position: fixed; left: 6vw; top: 50%; translate: 0 -50%; width: min(34vh, 30vw); pointer-events: none; display: none; }
.no-gl .poster { display: block; }

/* the bar */
.bar { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(var(--ground) 55%, transparent); display: flex; align-items: center; gap: 28px; padding: 22px clamp(16px, 3vw, 40px); z-index: 20; }
.mark { display: block; width: 158px; color: var(--ink); text-decoration: none; }
.mark svg { display: block; width: 100%; height: auto; }
.doors { display: flex; gap: 26px; margin-left: auto; }
.doors button, .lang, .cta, .burger { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ti); background: none; border: 0; padding: 8px 0; cursor: pointer; white-space: nowrap; }
.doors button:hover, .lang:hover { color: var(--ink); }
.lang { text-decoration: none; }
.cta { color: var(--ground); background: var(--ink); padding: 11px 16px; border-radius: 999px; text-decoration: none; transition: background .18s var(--ease-out); }
.cta:hover { background: var(--ember); }
.burger { width: 34px; height: 34px; display: grid; place-content: center; gap: 5px; padding: 0; }
.burger i { display: block; width: 18px; height: 1.5px; background: var(--ink); }

/* one screen: the E big beside the words; its chain starts on the E's
   bottom arm, steps down in size and runs across the bottom of the page
   just above the ten disciplines */
.hero { position: fixed; z-index: 5; top: 21svh; left: 50vw; width: min(44vw, 640px); }
.kicker { font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin: 0 0 18px; }
h1 { font: 800 clamp(38px, 4.4vw, 72px)/0.94 var(--display); font-stretch: 78%; font-variation-settings: "opsz" 96; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 span { display: block; white-space: nowrap; }
h1 span + span { color: var(--ti); }
.lede { font-size: clamp(16px, 1.25vw, 19px); color: var(--ti); max-width: 34ch; margin: 22px 0 0; text-wrap: pretty; }

/* the ten disciplines ride the chain: each name sits on its own link,
   above and below in turn, tied to it by a hairline */
.links { list-style: none; margin: 0; padding: 0; }
.link { position: fixed; left: 0; top: 0; z-index: 6; opacity: 0; transition: opacity .5s var(--ease-out) .2s; }
.pinned .link { opacity: 1; }
.link button { display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0 4px; }
.link button::before, .link button::after { content: ""; width: 1px; height: var(--tick, 14px); background: var(--line); transition: background .18s var(--ease-out); }
.link.up button::before, .link.down button::after { display: none; }
.link.up button::after { margin-top: 8px; }
.link.down button::before { margin-bottom: 8px; }
.link svg { display: none; }
.link .nm { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.link .st { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); order: -1; }
.link .st.partner { background: var(--signal); }
.link button:hover::before, .link button:hover::after, .link button[aria-expanded="true"]::before, .link button[aria-expanded="true"]::after { background: var(--ember); }
.link button { flex-wrap: nowrap; }
.link .nm, .link .st { pointer-events: none; }
.foot .cr { display: none; }
.legend { position: fixed; left: clamp(16px, 6vw, 110px); bottom: 24px; display: flex; gap: 22px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ti-dim); z-index: 6; margin: 0; }
.legend .hint { color: var(--ti); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }


/* the sheet */
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: oklch(0% 0 0 / .55); backdrop-filter: blur(6px); }
.sheet { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 100vw); background: var(--panel); border-left: 1px solid var(--line); padding: 34px clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; animation: sheet .38s var(--ease-sheet); }
@keyframes sheet { from { translate: 40px 0; opacity: 0; } }
.sheet .close { align-self: flex-end; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ti); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.sheet .chip { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: 8px; }
.sheet .chip.partner { color: var(--signal); }
.sheet h2 { font: 800 clamp(36px, 4vw, 56px)/1 var(--display); font-stretch: 80%; margin: 0; letter-spacing: -0.01em; }
.sheet .line { font-size: 21px; line-height: 1.35; margin: 0; text-wrap: balance; }
.sheet p { margin: 0; color: var(--ti); text-wrap: pretty; }
.sheet .proof { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font: 400 12px/1.6 var(--mono); color: var(--ti); }
.sheet .proof b { color: var(--ink); font-weight: 500; }
.sheet ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.sheet ol b { display: block; font: 600 17px/1.3 var(--text); color: var(--ink); margin-bottom: 4px; }
.sheet .mail { font: 500 15px/1 var(--mono); color: var(--ink); }

.foot { position: fixed; right: clamp(16px, 6vw, 110px); bottom: 24px; margin: 0; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ti-dim); z-index: 6; white-space: nowrap; }

/* phones: the first screen is the words, the E and the chain; the ten
   links follow as a two column list, about a screen and a half in all */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  body { overflow-y: auto; }
  #world, #flow { position: absolute; height: 100svh; }
  #heat { position: absolute; height: 100svh; }
  .no-gl .poster { position: absolute; top: 46svh; left: 50%; translate: -50% 0; width: 46vw; }
  .bar { gap: 14px; padding: 16px; }
  .mark { width: 124px; }
  .doors, .bar .lang-wide { display: none; }
  .cta { margin-left: auto; padding: 10px 14px; }
  .hero { position: relative; top: auto; left: auto; width: auto; min-height: 100svh; padding: 96px 16px 0; z-index: 5; }
  .lede { max-width: 30ch; }
  h1 { font-size: clamp(36px, 10vw, 54px); }
  h1 span { white-space: normal; }
  .links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 0 16px; }
  .link { position: static; opacity: 1; transform: none !important; }
  .link button { flex-direction: row; justify-content: space-between; width: 100%; border-top: 1px solid var(--line); padding: 16px 0 10px; }
  .link button::before, .link button::after { display: none; }
  .link .nm { width: 100%; justify-content: space-between; }
  .link .st { order: 2; }
  .legend { position: static; padding: 28px 16px 0; gap: 18px; flex-wrap: wrap; line-height: 1.5; }
  .legend .hint { display: none; }
  .foot { position: static; padding: 20px 16px 48px; white-space: normal; line-height: 1.7; }
  .sheet { width: 100vw; border-left: 0; }
}
/* photo mode for the share card and the poster */
[data-shot] .doors, [data-shot] .lang, [data-shot] .cta, [data-shot] .links, [data-shot] .legend, [data-shot] .foot, [data-shot] .lede, [data-shot] .skip { display: none !important; }
[data-shot="card"] .bar { display: none; }
[data-shot="card"] .hero { top: 34svh; left: 52vw; }
[data-shot="card"] h1 { font-size: 60px; }
[data-shot="card"] .hero::after { content: "eslabongroup.com"; display: block; margin-top: 26px; font: 500 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ti); }
[data-shot="poster"] .bar, [data-shot="poster"] .hero { display: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }