@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
:root{
  --f-d: "Bricolage Grotesque", Helvetica, sans-serif;
  --f-b: Figtree, Helvetica, sans-serif;
  --f-m: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
:root{
  --bg: #F4F1E4;
  --bg2: #FDFBF2;
  --raise: #FFFDF6;
  --line: #DBD7C6;
  --ink: #072813;
  --ink2: #4F6854;
  --faded: #99A797;
  --tag: #B44100;
  --tag-ink: #FDFBF2;
  --live: #207B38;
  --plate: #072813;
  --plate-ink: #F4F1E4;
  --live-soft: rgba(32, 123, 56, 0.14);
  --ink2-soft: rgba(79, 104, 84, 0.13);
  --plate-accent: #FF8337;
  --plate-dim: #9DB19F;
  --m-paper: var(--bg);
  --m-accent: var(--tag);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0A130D;
    --bg2: #132017;
    --raise: #1D2F21;
    --line: #243329;
    --ink: #EDEEDF;
    --ink2: #829985;
    --faded: #566959;
    --tag: #FF8337;
    --tag-ink: #132017;
    --live: #67D283;
    --plate: #1D2F21;
    --plate-ink: #EDEEDF;
    --live-soft: rgba(103, 210, 131, 0.18);
    --ink2-soft: rgba(130, 153, 133, 0.16);
  }
}
:root{
  --t-tap:120ms; --t-in:240ms; --t-out:160ms; --t-state:200ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.4,0,1,1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-b);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 2.5px solid var(--tag);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--tag);
  color: var(--tag-ink);
  font-family: var(--f-b);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  padding: 0 20px;
  text-align: center;
  transition: opacity var(--t-tap) var(--ease);
}
.btn:active { opacity: .82; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.sm { min-height: 44px; font-size: 14.5px; width: auto; padding: 0 18px; white-space: nowrap; }
.list {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  min-height: 60px;
}
.row:first-child { border-top: none; }
.row .nm { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.row .sub { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.35; margin-top: 2px; }
.chev { color: var(--ink2); display: flex; flex: 0 0 auto; }
.dim { color: var(--ink2); font-size: 13.5px; line-height: 1.45; }
.plate {
  background: var(--plate);
  color: var(--plate-ink);
  --m-paper: var(--plate);
  
  --m-accent: var(--plate-accent);
}
.plate .dim, .plate p { color: var(--plate-dim); }
.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 calc(24px + env(safe-area-inset-right))
           0 calc(24px + env(safe-area-inset-left));
}
.band { padding-block: clamp(38px, 7vw, 76px); }
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--line);
}
.nav .lnk { font-size: 15px; color: var(--ink2); }
.nav .lnk:hover { color: var(--ink); }
.nav .sp { margin-left: auto; }
.nav .mk { line-height: 0; display: flex; flex: 0 0 auto; }
.wm {
  font-family: var(--f-d);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  font-size: 24px;
}
@media (max-width: 620px) {
  .nav { gap: 10px; padding: 14px 0 12px; }
  .nav .lnk { display: none; }
  
  .nav .lnk.lang { display: inline; }
  .nav .mk svg { width: 46px; height: auto; }
  .wm { font-size: 19px; }
  .btn.sm { font-size: 14px; padding: 0 15px; }
}
@media (max-width: 359px) {
  .wm { display: none; }
}
.hero .said { max-width: 740px; }
.hero h1 {
  font-family: var(--f-d);
  font-weight: 800;
  font-size: clamp(34px, 7.4vw, 92px);
  line-height: .94;
  letter-spacing: -.048em;
  text-wrap: balance;
  max-width: 11ch;
}
.hero p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--ink2);
  max-width: 40ch;
  margin-top: clamp(14px, 2vw, 22px);
}
.acts-row { display: flex; gap: 12px; margin-top: clamp(20px, 3vw, 28px); flex-wrap: wrap; }
.acts-row .btn { width: auto; padding: 0 28px; }
@media (max-width: 480px) {
  .acts-row { flex-direction: column; }
  .acts-row .btn { width: 100%; }
}
.plate { padding-block: clamp(34px, 5vw, 56px); }
.roles {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  margin-top: clamp(26px, 3vw, 38px);
  
  --pad: clamp(20px, 2.4vw, 30px);
}
.role {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--plate-ink) 15%, transparent);
  border-radius: 8px;
  padding: var(--pad);
  
  overflow: hidden;
}
.role > * + * { margin-top: 13px; }
.role .who {
  font-family: var(--f-m);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tag);
  display: block;
}
.role h3 {
  font-family: var(--f-d);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 26px);
  letter-spacing: -.028em;
  line-height: 1.12;
  text-wrap: balance;
}
.role p {
  font-size: 15.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--plate-ink) 86%, transparent);
}
.role p.dim { color: var(--plate-dim); }
.role .acts-row { margin-top: 19px; clear: left; }
.role .art {
  float: left;
  line-height: 0;
  width: 44%;
  margin: 0 clamp(15px, 1.6vw, 22px) 12px 0;
}
.role .art.bleed { margin-left: calc(-1 * var(--pad)); }
.role .art > span { display: block; }
.role .art svg { display: block; width: 100%; height: auto; }
.role .art + * { margin-top: 0; }
@media (max-width: 820px) {
  .roles { flex-direction: column; gap: clamp(16px, 3vw, 26px); }
  
  .role { flex: 0 0 auto; }
  .role .art { width: max(140px, 34%); }
}
@media (max-width: 620px) {
  .roles { gap: 32px; }
  .role {
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
  }
  
  .role + .role {
    border-top: 1px solid color-mix(in srgb, var(--plate-ink) 15%, transparent);
    padding-top: 28px;
  }
  
  .role .art, .role .art.bleed {
    float: none;
    width: auto;
    margin: 0 calc(-1 * (24px + env(safe-area-inset-right)))
            16px calc(-1 * (24px + env(safe-area-inset-left)));
    
    overflow: hidden;
  }
}
h2.sec-h {
  font-family: var(--f-d);
  font-weight: 800;
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 22ch;
  text-wrap: balance;
}
.lead {
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 58ch;
  margin-top: 16px;
}
.eyebrow {
  font-family: var(--f-m);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  display: block;
  margin-bottom: 14px;
}
.plate .eyebrow { color: var(--plate-dim); }
.split {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  align-items: flex-start;
}
.split .aside { flex: 0 1 400px; min-width: 0; }
.split .main { flex: 1 1 0; min-width: 0; }
@media (max-width: 820px) {
  .split { flex-direction: column; gap: 24px; }
  .split .aside, .split .main { flex: 0 0 auto; width: 100%; }
}
.facts { max-width: 520px; margin-top: 26px; }
.split .facts { margin-top: 0; }
.dim.narrow { max-width: 52ch; margin-top: 18px; }
.lead.first { margin-top: 0; }
.eyebrow.spaced { margin-top: 38px; }
#instalar { display: none; }
#instalar:target { display: flex; }
body > footer { margin-top: auto; }
.foot .mk { line-height: 0; }
.foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 calc(40px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--ink2);
  font-size: 14.5px;
}