/* EL TORO GROUP — eltoro.ae
   Направление: изумруд и золото. Первый экран V1 — диагональный свет.
   Латиница: Playfair Display (заголовки) + Inter (текст) + IBM Plex Mono (данные).
   Арабица: El Messiri (заголовки) + IBM Plex Sans Arabic (текст). */

/* ---------- Fonts ---------- */
@font-face{font-family:'Playfair';src:url('../fonts/playfair-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair';src:url('../fonts/playfair-600-italic-latin.woff2') format('woff2');
  font-weight:600;font-style:italic;font-display:swap;}

@font-face{font-family:'Inter';src:url('../fonts/inter-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}

@font-face{font-family:'Messiri';src:url('../fonts/messiri-600-arabic.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Messiri';src:url('../fonts/messiri-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F;}

@font-face{font-family:'PlexArabic';src:url('../fonts/plexarabic-400-arabic.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'PlexArabic';src:url('../fonts/plexarabic-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'PlexArabic';src:url('../fonts/plexarabic-500-arabic.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'PlexArabic';src:url('../fonts/plexarabic-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F;}

@font-face{font-family:'PlexMono';src:url('../fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'PlexMono';src:url('../fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --bg:#0a2820;
  --bg-deep:#08211a;
  --panel:#0d3328;
  --line:#20493c;
  --ink:#eef2ea;
  --dim:#9fb2a6;
  --soft:#c3d0c7;
  --gold:#c9a86a;
  --gold-bright:#d9bd82;
  --gold-soft:#8f7a4c;

  --font-display:'Playfair','Messiri',Georgia,serif;
  --font-body:'Inter','PlexArabic',system-ui,-apple-system,sans-serif;
  --font-mono:'PlexMono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --step--1:clamp(0.8125rem,0.79rem + 0.12vw,0.875rem);
  --step-0:clamp(1rem,0.97rem + 0.18vw,1.0625rem);
  --step-1:clamp(1.0625rem,1.02rem + 0.24vw,1.1875rem);
  --step-2:clamp(1.25rem,1.13rem + 0.6vw,1.5rem);
  --step-3:clamp(1.625rem,1.35rem + 1.4vw,2.5rem);
  --step-4:clamp(2rem,1.5rem + 2.6vw,3.25rem);
  --step-5:clamp(2.5rem,1.5rem + 5vw,4.75rem);

  --space-2xs:0.375rem;
  --space-xs:0.625rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4rem;
  --space-2xl:6rem;

  --measure:62ch;
  --shell:1160px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:600;line-height:1.06;margin:0;
  text-wrap:balance;scroll-margin-block-start:96px;
}
p{margin:0;text-wrap:pretty;}
a{color:inherit;}
img,svg{display:block;max-width:100%;height:auto;}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#main{scroll-margin-block-start:96px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
::selection{background:var(--gold);color:var(--bg);}

.skip-link{
  position:absolute;inset-block-start:var(--space-sm);inset-inline-start:var(--gutter);z-index:100;
  padding:var(--space-xs) var(--space-sm);background:var(--gold);color:var(--bg);
  font-family:var(--font-mono);font-size:var(--step--1);text-decoration:none;
  transform:translateY(-250%);transition:transform .15s ease;
}
.skip-link:focus-visible{transform:translateY(0);}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Layout ---------- */
.shell{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
}
.section{padding-block:var(--space-2xl);border-block-start:1px solid var(--line);}
.section--first{border-block-start:0;}

/* ---------- Type ---------- */
.eyebrow{
  display:flex;align-items:center;gap:var(--space-xs);margin:0 0 var(--space-md);
  font-family:var(--font-mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:"";flex:none;width:26px;height:1px;background:var(--gold-soft);}

.display{font-size:var(--step-5);}
.title{font-size:var(--step-3);}
.subtitle{font-size:var(--step-2);}

.lede{max-width:44ch;font-size:var(--step-1);color:var(--soft);}
.prose{max-width:var(--measure);color:var(--dim);}
.prose>*+*{margin-block-start:var(--space-sm);}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--gold);text-underline-offset:4px;}

.arabic-name{
  font-family:'Messiri',var(--font-body);font-weight:600;
  font-size:var(--step-2);color:var(--gold);direction:rtl;unicode-bidi:isolate;
}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;inset-block-start:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-block-end:1px solid var(--line);
}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:76px;}
.brand{text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:.01em;}
.brand em{font-style:italic;color:var(--gold-bright);}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem);}
.nav a{
  font-size:var(--step--1);color:var(--dim);text-decoration:none;
  padding-block:var(--space-2xs);border-block-end:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-block-end-color:var(--gold);}

.lang-switch{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;
  color:var(--gold);text-decoration:none;padding:var(--space-2xs) var(--space-xs);
  border:1px solid var(--gold-soft);transition:background-color .15s ease,color .15s ease;
}
.lang-switch:hover{background:var(--gold);color:var(--bg);}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;
  text-transform:uppercase;padding:var(--space-2xs) var(--space-xs);cursor:pointer;
}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .nav{
    display:none;position:absolute;inset-inline:0;inset-block-start:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-sm) var(--gutter) var(--space-md);
    background:var(--bg);border-block-end:1px solid var(--line);
  }
  .nav[data-open="true"]{display:flex;}
  .nav a{padding-block:var(--space-sm);border-block-end:1px solid var(--line);font-size:var(--step-1);}
  .nav a[aria-current="page"]{border-block-end-color:var(--line);}
}

/* ---------- Diagonal light (V1) ---------- */
.lit{position:relative;overflow:hidden;background:var(--bg);}
.lit>.beam,.lit>.vignette{position:absolute;pointer-events:none;}
.lit>.beam{filter:blur(52px);}
.beam--1{width:900px;height:180px;background:rgba(201,168,106,.10);transform:rotate(-28deg);inset-block-start:2%;inset-inline-end:-14%;}
.beam--2{width:760px;height:120px;background:rgba(220,235,220,.055);transform:rotate(-28deg);inset-block-start:34%;inset-inline-end:-8%;}
.beam--3{width:600px;height:90px;background:rgba(201,168,106,.06);transform:rotate(-28deg);inset-block-end:4%;inset-inline-start:-10%;}
.vignette{inset:0;background:radial-gradient(120% 95% at 50% 42%,transparent 56%,rgba(0,0,0,.3) 100%);}
:root[dir="rtl"] .beam--1,
:root[dir="rtl"] .beam--2,
:root[dir="rtl"] .beam--3{transform:rotate(28deg);}

/* ---------- Hero ---------- */
.hero .shell{
  position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;
  align-items:center;padding-block:clamp(3.5rem,8vw,7rem);
}
.hero-art{display:flex;justify-content:center;padding-inline-end:clamp(1.5rem,4vw,3.25rem);}
.hero-art img{width:min(28vw,300px);}
.hero-text{padding-inline-start:clamp(1.75rem,4.5vw,3.6rem);border-inline-start:1px solid var(--line);}
.hero-text .arabic-name{margin-block:var(--space-2xs) var(--space-md);}
.hero-text .lede{margin-block-end:var(--space-lg);}
.hero-title{margin-block-end:var(--space-2xs);}

@media (max-width:860px){
  .hero .shell{grid-template-columns:1fr;text-align:center;}
  .hero-art{padding:0 0 var(--space-md);}
  .hero-text{padding-inline-start:0;border-inline-start:0;}
  .hero-text .lede{margin-inline:auto;}
  .hero-actions{justify-content:center;}
  .eyebrow{justify-content:center;}
}

/* ---------- Page head (inner pages) ---------- */
.page-head .shell{position:relative;z-index:2;padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem);}
.page-head .lede{margin-block-start:var(--space-md);}

/* ---------- Buttons ---------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);}
.button{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:.85rem 1.75rem;font-size:var(--step--1);font-weight:600;
  text-decoration:none;border:1px solid var(--line);color:var(--ink);background:transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.button:hover{border-color:var(--gold-soft);}
.button--solid{background:var(--gold);border-color:var(--gold);color:var(--bg);}
.button--solid:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--bg);}

/* ---------- Records ---------- */
.record-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.record{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--space-md) var(--space-lg);padding:var(--space-lg);
  background:var(--bg);transition:background-color .2s ease;
}
.record:hover{background:var(--panel);}
.record--single{grid-template-columns:1fr;}
.record-name{font-size:var(--step-2);line-height:1.2;}
.record-name--sm{font-size:var(--step-1);}
.record-arabic{
  margin-block-start:var(--space-2xs);font-family:'Messiri',var(--font-body);font-weight:600;
  font-size:var(--step-0);color:var(--gold);direction:rtl;unicode-bidi:isolate;
}
.record-role{margin-block-start:var(--space-sm);max-width:48ch;font-size:var(--step--1);color:var(--dim);}
.record-role strong{color:var(--ink);}
.record-role a{color:var(--gold);}

.record-meta{
  margin-block-start:var(--space-md);padding-block-start:var(--space-sm);
  border-block-start:1px solid var(--line);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--gold-soft);text-transform:uppercase;
}
.record-lead{margin-block-start:var(--space-sm);color:var(--soft);font-size:var(--step-0);}

.data-list{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:var(--space-2xs) var(--space-sm);margin:0;
  font-family:var(--font-mono);font-size:var(--step--1);
  font-variant-numeric:tabular-nums;align-content:start;
}
.data-list dt{color:var(--gold-soft);letter-spacing:.05em;text-transform:uppercase;font-size:.72rem;}
.data-list dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
.data-list a{color:var(--gold);}

@media (max-width:760px){.record{grid-template-columns:1fr;padding:var(--space-md);}}

/* ---------- Grid of cells ---------- */
.grid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:980px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.grid--2{grid-template-columns:1fr;}}
@media (max-width:560px){.grid--4{grid-template-columns:1fr;}}

.cell{padding:var(--space-lg);background:var(--bg);}
.cell h3{font-size:var(--step-1);margin-block-end:var(--space-xs);}
.cell p{font-size:var(--step--1);color:var(--dim);}
.cell p.stat-value{
  font-family:var(--font-display);font-size:var(--step-3);
  color:var(--ink);line-height:1;margin-block-end:var(--space-2xs);
}
.cell p.stat-label{
  font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft);
}
.cell .attribution{
  display:block;margin-block-start:var(--space-sm);
  font-family:var(--font-mono);font-size:var(--step--1);color:var(--gold);
}

/* ---------- Split & stats ---------- */
.split{display:grid;gap:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start;}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-xl);margin-block-start:var(--space-lg);}
.stat-value{font-family:var(--font-display);font-weight:600;font-size:var(--step-3);line-height:1;color:var(--ink);}
.stat-label{
  margin-block-start:var(--space-2xs);font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft);
}

/* ---------- Notice ---------- */
.notice{
  padding:var(--space-md) var(--space-lg);border-inline-start:2px solid var(--gold);
  background:var(--panel);font-size:var(--step--1);color:var(--dim);max-width:74ch;
}

/* ---------- Contact ---------- */
.contact-list{display:grid;gap:var(--space-md);margin:0;padding:0;list-style:none;}
.contact-list a{color:var(--ink);text-decoration-color:var(--gold-soft);text-underline-offset:4px;}
.contact-list a:hover{color:var(--gold);}

/* Почта: до подстановки — обычный текст, после — ссылка */
a.email{color:var(--gold);text-underline-offset:4px;}
.record-role a.email,.contact-list a.email{color:inherit;}
.footer-links a.email{color:var(--dim);text-decoration:none;}
.footer-links a.email:hover{color:var(--ink);}

/* ---------- Footer ---------- */
.site-footer{
  padding-block:var(--space-xl) var(--space-lg);border-block-start:1px solid var(--line);
  background:var(--bg-deep);font-size:var(--step--1);color:var(--dim);
}
.footer-grid{
  display:grid;gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  margin-block-end:var(--space-xl);
}
.footer-grid h4{
  font-family:var(--font-mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-block-end:var(--space-sm);
}
.footer-links{display:grid;gap:var(--space-2xs);}
.footer-links a{color:var(--dim);text-decoration:none;}
.footer-links a:hover{color:var(--ink);}
.footer-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-sm);
  padding-block-start:var(--space-md);border-block-start:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--step--1);color:var(--gold-soft);
}

/* ---------- Utilities ---------- */
.mt-md{margin-block-start:var(--space-md);}
.mt-lg{margin-block-start:var(--space-lg);}
.mt-xl{margin-block-start:var(--space-xl);}

/* ---------- Arabic / RTL ---------- */
:root[dir="rtl"] body{font-family:'PlexArabic',var(--font-body);line-height:1.85;}
:root[dir="rtl"] h1,
:root[dir="rtl"] h2,
:root[dir="rtl"] h3,
:root[dir="rtl"] h4,
:root[dir="rtl"] .brand,
:root[dir="rtl"] .stat-value{font-family:'Messiri','PlexArabic',serif;line-height:1.4;letter-spacing:normal;}
:root[dir="rtl"] .display{line-height:1.3;}
:root[dir="rtl"] .eyebrow,
:root[dir="rtl"] .data-list,
:root[dir="rtl"] .stat-label,
:root[dir="rtl"] .footer-grid h4,
:root[dir="rtl"] .cell .attribution{font-family:'PlexArabic',var(--font-body);letter-spacing:normal;text-transform:none;}
:root[dir="rtl"] .data-list dt{font-size:var(--step--1);}
:root[dir="rtl"] .lang-switch{font-family:var(--font-mono);}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal[data-shown="true"]{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
}