/* ═══════════════════════════════════════════════════════════════════
   مكتبة الفرص — نظام التصميم
   ───────────────────────────────────────────────────────────────────
   الفكرة: المستخدم مش بيتصفّح موقع، هو داخل مكتبة. كل حاجة هنا
   بتخدم الإحساس ده: رفوف عميقة، ورق، لافتات، إضاءة خافتة، وغبار
   بيلمع في النور.

   اللوحة كلها من هوية شباب بتساعد شباب — مفيش ولا لون من بره:
     #ffffff  الورق والكروت
     #fa8072  المرجاني: الأزرار واللافتات والعلامات
     #87baba  التركوازي: الرفوف والبنية
     #bbe8e8  السماوي: الحدود والخلفيات
     #ffa197  المرجاني الفاتح: اللمسات
   المكتبة فاتحة زي الموقع بالظبط — اللي يدخلها مايحسّش إنه خرج منه.
   اللي بيعمل «إحساس المكتبة» هو البنية (رفوف، كتب بكعوب، ورق، لافتات)
   مش اللون الغامق — فالهوية اتحطّت مكانه والتجربة ماخسرتش حاجة.

   الخامات كلها CSS خالص (تدرّجات متكرّرة) — مفيش ولا صورة خلفية،
   عشان الصفحة تفضل خفيفة وتفتح بسرعة على أي نت.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════════
     الهوية — نفس درجات موقع شباب بتساعد شباب (sbs.css) بالظبط:
       كورال #f08c7e · خوخي #ffa197 · تركوازي #87baba · سماوي #e0f7f7
       كحلي #0a0730 · رمادي غامق #374151 · رمادي فاتح #f8f9fa
     السلاسل تحت اتسابت بأسمائها (paper/wood/gold) لأن الصفحات
     بتناديها — اللي اتغيّر القيم بس.
     ══════════════════════════════════════════════════════════════ */
  --cream:   #ffffff;
  --cream-2: #f2f9f9;
  --cream-3: #e0f7f7;
  --ink-900: #0a0730;
  --teal:    #87baba;
  --coral:   #f08c7e;
  --yellow:  #ffd9a0;

  /* ── الرفوف والبنية: تركوازي الموقع من غامق لفاتح ── */
  --wood-950: #1a3e3d;
  --wood-900: #23514f;
  --wood-800: #2f6968;
  --wood-700: #3f7f7d;
  --wood-600: #5a9695;
  --wood-500: #77a8a8;   /* ← teal-dark بتاع الموقع */
  --wood-400: #87baba;   /* ← تركوازي الموقع */
  --wood-300: #a8cfcf;
  --wood-200: #e0f7f7;   /* ← سماوي الموقع */

  /* ── الورق: أبيض وسماوي فاتح زي الموقع ── */
  --paper-100: #ffffff;
  --paper-200: #ffffff;
  --paper-300: #f2f9f9;
  --paper-400: #e8f4f4;
  --paper-500: #cfe6e6;

  /* ── الكورال: لون الفعل ──
     #f08c7e على أبيض تباينه 2.6:1 — ينفع للأزرار والشارات بس.
     كنص صغير بنستخدم الغامق. */
  --gold-600: #b9473a;
  --gold-500: #f08c7e;   /* ← كورال الموقع */
  --gold-400: #ffa197;   /* ← الخوخي */
  --gold-300: #ffc2ba;
  --gold-100: #fff1ee;

  /* ── الملاحظات اللاصقة: خوخي هادي بدل الأصفر الصارخ ── */
  --note-500: #ffd9a0;
  --note-300: #ffe9c7;
  --note-100: #fff6e8;

  --green-400: #87baba;
  --green-600: #5a9695;
  --green-700: #3f7f7d;
  --green-800: #2f6968;
  --green-900: #1a3e3d;
  --brand-teal: #87baba;
  --brand-cyan: #e0f7f7;

  --orange-400: #ffa197;
  --orange-500: #f08c7e;

  --sbs-coral: #f08c7e;
  --sbs-coral-dark: #e07b6d;
  --sbs-teal: #87baba;
  --sbs-teal-dark: #77a8a8;
  --sbs-cyan: #e0f7f7;

  /* ── الأسطح ── */
  --surface:     #ffffff;
  --surface-2:   #f8fcfc;
  --bg:          #f2f9f9;
  --tint:        #e8f4f4;
  --line:        #d9ecec;
  --line-strong: #87baba;

  /* ── النص: كحلي الموقع للعناوين، رمادي غامق للنص ── */
  --heading:   #0a0730;   /* 19:1 */
  --ink:       #2b2f45;   /* 12:1 */
  --ink-soft:  #4b5266;   /* 7.5:1 */
  --ink-faint: #5f6678;   /* 5.6:1 */

  /* ── الفعل ── */
  --accent:        #f08c7e;
  --accent-strong: #b9473a;   /* كورال كنص — 5.6:1 */
  --accent-soft:   #ffa197;
  --accent-tint:   #fff1ee;

  /* ── البنية ── */
  --teal-800: #23514f;
  --teal-700: #2f6968;
  --teal-600: #5a9695;
  --teal-tint: #e6f4f4;

  --ok: #2f8a72;
  --warn: #a86a0c;
  --danger: #c33a2c;
  --info: #3f7f7d;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-book: cubic-bezier(.65, .05, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .22s;
  --t: .42s;
  --t-slow: .8s;

  /* ظلال كحلية خفيفة — زي كروت الموقع */
  --sh-sm: 0 1px 3px rgba(10, 7, 48, .06);
  --sh: 0 5px 15px rgba(10, 7, 48, .08);
  --sh-lg: 0 11px 25px rgba(10, 7, 48, .12);
  --sh-book: 0 4px 14px rgba(10, 7, 48, .08), 0 1px 3px rgba(10, 7, 48, .06);
  --sh-hard: 3px 4px 0 rgba(10, 7, 48, .10);

  --radius: 12px;
  --radius-lg: 18px;

  /* الخط: Tajawal زي الموقع — للعناوين والنص */
  --display: 'Tajawal', system-ui, 'Segoe UI', sans-serif;
  --body: 'Tajawal', system-ui, 'Segoe UI', sans-serif;

  --header-h: 68px;
  --filters-h: 66px;
}
:root[data-theme="dark"] {
  /* ليلي كحلي هادي — نفس عائلة كحلي الموقع (#0a0730) بس أفتح شوية
     عشان الكروت تبان، والتركوازي والكورال بيتفتّحوا كنص. */
  --cream:   #141830;
  --cream-2: #1a1f3b;
  --cream-3: #232948;
  --ink-900: #eef1f8;

  --wood-950: #e3f3f3;
  --wood-900: #cdeaea;
  --wood-800: #a9d8d8;
  --wood-700: #87baba;
  --wood-600: #6ea3a3;
  --wood-500: #5a9695;
  --wood-400: #4a8382;
  --wood-300: #35625f;
  --wood-200: #234446;

  --paper-100: #202546;
  --paper-200: #1a1f3b;
  --paper-300: #141830;
  --paper-400: #10142a;
  --paper-500: #2f365a;

  --gold-600: #ffb3a8;
  --gold-500: #f08c7e;
  --gold-400: #e07b6d;
  --gold-300: #b9473a;
  --gold-100: #3d2426;

  --note-500: #ffd9a0;
  --note-300: #6b5330;
  --note-100: #3a2f1c;

  --green-400: #5a9695;
  --green-600: #6ea3a3;
  --green-700: #4a8382;
  --green-800: #35625f;
  --green-900: #172f30;
  --brand-teal: #5a9695;
  --brand-cyan: #234446;
  --orange-400: #ffa197;
  --orange-500: #f08c7e;
  --sbs-coral: #f08c7e;
  --sbs-coral-dark: #ffb3a8;
  --sbs-teal: #5a9695;
  --sbs-teal-dark: #a9d8d8;
  --sbs-cyan: #234446;

  --surface:     #1a1f3b;
  --surface-2:   #202546;
  --bg:          #10142a;
  --tint:        #232948;
  --line:        #2f365a;
  --line-strong: #3f4874;

  --heading:   #f3f5fb;
  --ink:       #e2e6f0;
  --ink-soft:  #b4bacc;
  --ink-faint: #a3aac0;

  --accent:        #f08c7e;
  --accent-strong: #ffb3a8;
  --accent-soft:   #ffa197;
  --accent-tint:   #3d2426;

  --teal-800: #cdeaea;
  --teal-700: #a9d8d8;
  --teal-600: #6ea3a3;
  --teal-tint: #172f30;

  --ok: #6fd1ad;
  --warn: #f2c05c;
  --danger: #ff9b90;
  --info: #a9d8d8;

  --sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --sh: 0 6px 18px rgba(0, 0, 0, .45);
  --sh-lg: 0 18px 45px rgba(0, 0, 0, .55);
  --sh-book: 0 4px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --sh-hard: 3px 4px 0 rgba(0, 0, 0, .5);
}


* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* overflow-x: clip مش hidden — الـhidden بيكسر position:sticky */
html, body { max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

body {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, span, div, a, td { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }

/* ═══════════════ الخامات ═══════════════ */

/* الرف: خطوط عمودية غير منتظمة بتدّي إحساس اللوح الطويل */
.wood {
  background-color: var(--wood-700);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.16) 0 1px, transparent 1px 4px,
      rgba(255,255,255,.03) 4px 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.09) 0 2px, transparent 2px 27px),
    linear-gradient(180deg, var(--wood-600), var(--wood-800));
}
.wood-dark {
  background-color: var(--wood-900);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.24) 0 1px, transparent 1px 5px,
      rgba(255,255,255,.025) 5px 6px, transparent 6px 15px),
    linear-gradient(180deg, var(--wood-800), var(--wood-950));
}

/* ورق: نقط خفيفة جدًا بتكسر السطح المسطّح */
.paper {
  background-color: var(--paper-300);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(69,128,127,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 62% 71%, rgba(69,128,127,.04) 0 1px, transparent 1px),
    radial-gradient(circle at 87% 38%, rgba(69,128,127,.045) 0 1px, transparent 1px);
  background-size: 43px 43px, 61px 61px, 37px 37px;
}

/* ═══════════════ الخطوط ═══════════════ */
/* Amiri كان serif لاتيني — بيدّي العربي شكل نحيف ورسمي.
   Baloo Bhaijaan عربي عريض ومرسوم، وده المطلوب: حكاية مش تقرير. */
h1, h2, h3, .serif {
  font-family: var(--display);
  color: var(--heading);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -.2px;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
h4 { font-family: 'Tajawal', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--heading); }

/* لافتة ممر المكتبة — عنوان بلون الهوية وخطين على الجنب */
.aisle-sign {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--display); font-weight: 800;
  color: var(--accent-strong); letter-spacing: .1px;
}
.aisle-sign::before, .aisle-sign::after {
  content: ''; height: 1px; width: clamp(20px, 8vw, 62px);
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}

/* ═══════════════ الأزرار ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.7rem; border-radius: var(--radius);
  font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: .95rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  position: relative; overflow: hidden;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* المرجاني: زرار الفعل الأساسي */
/* المرجاني أغمق من الذهب، فالنص الأبيض هو اللي بيدّي تباين كفاية (4.5:1) */
.btn-gold {
  background: var(--accent); color: var(--heading); border-color: var(--accent);
  font-weight: 800; box-shadow: 0 2px 8px rgba(250,128,114,.36);
}
.btn-gold:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft);
  box-shadow: 0 6px 16px rgba(250,128,114,.38); }
.btn-gold:active:not(:disabled) { box-shadow: 0 1px 4px rgba(250,128,114,.3); }

/* الغامق (لون الرف) */
.btn-wood {
  background: var(--teal-700); color: #fff; border-color: var(--teal-700);
  box-shadow: 0 2px 8px rgba(47,105,104,.3);
}
.btn-wood:hover:not(:disabled) { background: var(--teal-800); border-color: var(--teal-800); }

/* التركوازي */
.btn-green {
  background: var(--teal-600); color: #fff; border-color: var(--teal-600);
  box-shadow: 0 2px 8px rgba(78,141,139,.3);
}

/* المفرّغ */
.btn-outline {
  background: var(--surface); color: var(--teal-800);
  border: 1.5px solid var(--line-strong);
}
.btn-outline:hover { background: var(--teal-tint); border-color: var(--teal-600); color: var(--teal-800); }
.btn-outline-gold { background: var(--surface); color: var(--accent-strong); border: 1.5px solid var(--accent-soft); }
.btn-outline-gold:hover { background: var(--accent); color: var(--heading); border-color: var(--accent); }
.btn-outline-light { background: transparent; color: var(--paper-200); border: 1.5px solid rgba(255,255,255,.42); }
.btn-outline-light:hover { background: var(--paper-100); color: var(--wood-900); border-color: var(--paper-100); }

.btn-ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--teal-600); color: var(--teal-800); transform: none; box-shadow: none; }
.btn-sm { padding: .5rem 1rem; font-size: .84rem; border-radius: 8px; }

/* ═══════════════ الشارات ═══════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .7rem; border-radius: 100px;
  font-size: .71rem; font-weight: 800; white-space: nowrap;
  font-family: 'Tajawal', sans-serif;
}
.badge-gold  { background: var(--accent-tint); color: var(--accent-strong); border: 1px solid var(--accent-soft); }
.badge-wood  { background: var(--teal-700); color: #fff; }
.badge-green { background: var(--teal-800); color: #fff; }
.badge-paper { background: var(--tint); color: var(--teal-800); border: 1px solid var(--line); }

/* ═══════════════ الحقول ═══════════════ */
label {
  display: block; font-family: 'Tajawal', sans-serif;
  font-weight: 700; font-size: .9rem; color: var(--heading); margin-bottom: .42rem;
}
input[type=text], input[type=email], input[type=url], input[type=date],
input[type=number], input[type=password], input[type=tel], input[type=search],
input[type=datetime-local], input:not([type]), textarea, select {
  width: 100%; padding: .78rem 1rem;
  font-family: 'Tajawal', sans-serif; font-size: .95rem; color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(250,128,114,.22);
  background: #fff;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: .75; }
textarea { min-height: 100px; resize: vertical; line-height: 1.85; }
.hint { font-size: .78rem; color: var(--ink-faint); font-weight: 500; margin-top: .3rem; line-height: 1.7; }
.req { color: var(--danger); font-weight: 900; }

/* ═══════════════ التنبيهات ═══════════════ */
.note {
  border-radius: var(--radius); padding: .9rem 1.1rem;
  font-size: .88rem; font-weight: 600; line-height: 1.85;
  border-inline-start: 4px solid;
}
.note-info  { background: var(--teal-tint); border-color: var(--teal-600); color: var(--teal-800); }
.note-warn  { background: var(--note-100); border-color: var(--warn); color: var(--warn); }
.note-error { background: var(--accent-tint); border-color: var(--danger); color: var(--gold-600); }
.note-ok    { background: var(--teal-tint); border-color: var(--ok); color: var(--ok); }

/* ═══════════════ البطاقات ═══════════════ */
.card {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh); padding: 1.5rem;
}

/* ═══════════════ الهيدر ═══════════════ */
/* أبيض زي الموقع الرئيسي — ده أول حاجة العين بتشوفها لما يدخل المكتبة،
   ولو اتغيّر هيحسّ إنه خرج من الموقع لموقع تاني خالص. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(16,16,16,.06);
}
/* خط مرجاني رفيع تحت الهيدر — زي حافة الرف */
.site-header::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-400) 50%, var(--gold-500) 82%, transparent);
}
.site-header .inner {
  max-width: 1280px; margin: 0 auto; padding: .6rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-header .logo { height: 46px; width: auto; }
.site-header nav { display: flex; gap: 1.15rem; align-items: center; }
.site-header nav a {
  font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: .9rem;
  color: var(--heading); transition: color var(--t-fast); position: relative;
}
.site-header nav a:not(.btn)::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -5px; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform var(--t-fast) var(--ease);
}
.site-header nav a:not(.btn):hover::after, .site-header nav a.active::after { transform: scaleX(1); }
.site-header nav a:hover, .site-header nav a.active { color: var(--accent-strong); }
@media (max-width: 780px) { .site-header nav a.hide-sm { display: none; } }

/* مبدّل اللغة */
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--tint); color: var(--teal-800);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .45rem .9rem; min-height: 38px;
  font-family: 'Tajawal', sans-serif; font-weight: 800; font-size: .8rem;
  cursor: pointer; transition: all var(--t-fast);
}
.lang-btn:hover { background: var(--accent); color: var(--heading); border-color: var(--accent); }

/* ═══════════════ الفوتر ═══════════════ */
.site-footer {
  background: linear-gradient(170deg, var(--teal-700), var(--teal-800));
  color: rgba(255,255,255,.82); margin-top: 4rem; padding: 3rem 1.2rem 2.4rem;
  border-top: 3px solid var(--accent); position: relative;
}
.site-footer .inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.site-footer a:not(.btn) { color: var(--accent-soft); font-weight: 700; }
.site-footer a:not(.btn):hover { color: #fff; }

/* ═══════════════ الغبار المتطاير ═══════════════ */
/* حبيبات بتطلع لفوق ببطء — بتدّي إحساس النور الداخل من الشباك */
.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.mote {
  position: absolute; border-radius: 50%;
  background: var(--accent-soft);
  animation: float-up linear infinite;
  will-change: transform, opacity;
}
@keyframes float-up {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10%  { opacity: var(--peak, .5); }
  90%  { opacity: var(--peak, .5); }
  100% { transform: translate3d(var(--dx, 20px), -110px, 0) scale(.5); opacity: 0; }
}

/* شعاع نور مائل */
.ray {
  position: absolute; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255,161,151,.22), transparent 72%);
  filter: blur(14px); transform-origin: top center;
}

/* ═══════════════ حالات ═══════════════ */
.empty { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); font-weight: 600; }
.spinner {
  width: 42px; height: 42px; border: 3px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite; margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════ حركات مشتركة ═══════════════ */
.fade-up { animation: fadeUp .55s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.pop { animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ═══════════════ تخطيط ═══════════════ */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════ لمس ═══════════════ */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.btn, .lang-btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  label.toggle { min-height: 44px; }
}

/* ═══════════════ تقليل الحركة ═══════════════ */
/* اللي بيتضايق من الحركة بياخد نفس المحتوى بدون أي أنيميشن */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .dust, .ray { display: none; }
}

/* ═══════════════ الاستجابة ═══════════════ */
@media (max-width: 640px) {
  .site-header .inner { padding: .5rem .8rem; gap: .5rem; }
  .site-header .logo { height: 38px; }
  .site-header nav { gap: .5rem; }
  .site-header nav a { font-size: .82rem; }
  .lang-btn { padding: .45rem .7rem; font-size: .75rem; }
  .lang-btn span { display: none; }
  .card { padding: 1.1rem; }
  .btn { padding: .72rem 1.2rem; font-size: .9rem; }
  .site-footer { padding: 2.2rem 1rem 1.8rem; margin-top: 2.5rem; }
  .site-footer .btn { width: 100%; }
}
@media (max-width: 380px) {
  .site-header .logo { height: 32px; }
  .site-header nav a.btn { padding: .45rem .7rem; font-size: .78rem; }
}
@media (min-width: 1600px) {
  .container, .site-header .inner, .site-footer .inner { max-width: 1440px; }
}