@charset "UTF-8";

/* ========================================
   DESIGN TOKENS
======================================== */
:root {
  --color-bg: #f4ecdd;
  --color-paper: #f4ecdd;
  --color-surface: #faf8f4;
  --color-surface-alt: #efe4d2;
  --color-surface-muted: #f8f2e7;
  --color-surface-hover: #faf7f0;
  --color-surface-glass: rgba(250, 248, 244, 0.62);
  --color-surface-raised: rgba(250, 248, 244, 0.76);
  --color-surface-subtle: rgba(250, 248, 244, 0.54);
  --color-surface-section: rgba(250, 248, 244, 0.56);
  --color-surface-feature: rgba(250, 248, 244, 0.58);
  --color-surface-control: rgba(250, 248, 244, 0.64);
  --color-surface-highlight: rgba(250, 248, 244, 0.69);
  --color-surface-pagination: rgba(250, 248, 244, 0.72);
  --color-surface-panel: rgba(250, 248, 244, 0.86);
  --color-border: rgba(176, 138, 74, 0.33);
  --color-border-soft: rgba(138, 103, 66, 0.18);
  --color-border-section: rgba(138, 103, 66, 0.08);
  --color-border-section-strong: rgba(138, 103, 66, 0.09);
  --color-divider-subtle: rgba(138, 103, 66, 0.1);
  --color-accent-tint: rgba(138, 103, 66, 0.12);
  --color-text: #3b3128;
  --color-text-strong: #33291f;
  --color-text-secondary: #51463b;
  --color-text-muted: #6b5b4b;
  --color-heading: #3b3128;
  --color-gold: #b08a4a;
  --color-gold-hover: #a07a3e;
  --color-gold-bright: #d9ba7d;
  --color-gold-soft: rgba(176, 138, 74, 0.14);
  --color-gold-tint: rgba(176, 138, 74, 0.13);
  --color-gold-icon: rgba(176, 138, 74, 0.12);
  --color-gold-news: rgba(176, 138, 74, 0.15);
  --color-gold-border: rgba(176, 138, 74, 0.2);
  --color-gold-border-raised: rgba(176, 138, 74, 0.22);
  --color-gold-border-hover: rgba(176, 138, 74, 0.57);
  --color-gold-line: rgba(176, 138, 74, 0.18);
  --color-gold-link: rgba(176, 138, 74, 0.48);
  --color-gold-table: rgba(176, 138, 74, 0.1);
  --color-accent: #8a6742;
  --color-accent-hover: #755536;
  --color-footer: #40352b;
  --color-beige: #d8c7ae;
  --color-footer-text: #cfbfaa;
  --color-footer-surface-text: #efe5d5;
  --color-footer-brand-copy: #c8b699;
  --color-placeholder: #8d806f;
  --color-overlay: rgba(45, 35, 27, 0.38);
  --color-focus-ring: rgba(176, 138, 74, 0.13);
  --color-header-surface: rgba(250, 248, 244, 0.87);
  --color-header-scrolled: rgba(250, 248, 244, 0.96);
  --color-footer-heading: #fbf6ed;
  --color-footer-copy: #cbbba5;
  --color-footer-copy-muted: #bbaa93;
  --color-footer-link-hover: #f3e8d4;
  --color-footer-gold: #e1c895;
  --color-footer-icon: #e4d3b7;
  --color-footer-placeholder: #b5a48e;
  --color-footer-focus: #d6b77c;
  --color-footer-message: #d7bb82;
  --color-footer-border: rgba(216, 199, 174, 0.22);
  --color-footer-border-soft: rgba(216, 199, 174, 0.15);
  --color-footer-input-border: rgba(216, 199, 174, 0.21);
  --color-footer-input: rgba(250, 248, 244, 0.07);
  --color-footer-brand-surface: rgba(250, 248, 244, 0.06);
  --color-footer-brand-border: rgba(217, 186, 125, 0.24);
  --color-footer-badge-border: rgba(217, 186, 125, 0.25);
  --color-sidebar-active: rgba(250, 248, 244, 0.68);
  --color-sidebar-account: rgba(250, 248, 244, 0.56);
  --color-sidebar-panel: rgba(250, 248, 244, 0.55);
  --color-tag: #f2eadc;
  --color-overlay-strong: rgba(45, 35, 27, 0.76);
  --color-overlay-soft: rgba(45, 35, 27, 0.05);
  --color-overlay-caption: #e0c38b;
  --color-overlay-copy: #ebdfcf;

  --font-family-fa-ar: "Estedad", "IRANSansX", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-family-en: "Inter", "Cormorant Garamond", Georgia, serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 19px;
  --font-size-xl: clamp(25px, 3vw, 34px);
  --font-size-display: clamp(36px, 4.4vw, 54px);
  --line-height-tight: 1.55;
  --line-height-base: 1.8;
  --line-height-relaxed: 2;
  --line-height-editorial: 2.2;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 26px rgba(59, 49, 40, 0.045);
  --shadow-card: 0 20px 48px rgba(59, 49, 40, 0.085);
  --shadow-floating: 0 28px 72px rgba(59, 49, 40, 0.13);
  --shadow-overlay: 0 18px 62px rgba(43, 33, 25, 0.2);
  --shadow-button: 0 11px 24px rgba(86, 62, 40, 0.19);
  --shadow-button-hover: 0 16px 28px rgba(86, 62, 40, 0.23);
  --shadow-header: 0 10px 34px rgba(59, 49, 40, 0.06);

  --container-wide: 1240px;
  --container-default: 1240px;
  --container-narrow: 840px;
  --container-reading: 760px;
  --sidebar-width: min(86vw, 390px);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 220ms var(--ease-premium);
  --transition-base: 300ms var(--ease-premium);
  --transition-slow: 650ms var(--ease-premium);

  --z-header: 30;
  --z-texture: 100;
  --z-overlay: 110;
  --z-sidebar: 120;
  --z-toast: 130;
  --z-modal: 1000;

  /* Compatibility aliases keep page modules stable during component adoption. */
  --paper: var(--color-paper);
  --ivory: var(--color-surface-alt);
  --brown: var(--color-accent);
  --gold: var(--color-gold);
  --ink: var(--color-text);
  --beige: var(--color-beige);
  --white: var(--color-surface);
  --footer: var(--color-footer);
  --muted: var(--color-text-muted);
  --line: var(--color-border-soft);
  --line-gold: var(--color-border);
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-floating);
  --radius: var(--radius-lg);
  --radius-button: var(--radius-md);
  --container: var(--container-default);
  --transition: var(--ease-premium);
  --font-fa-ar: var(--font-family-fa-ar);
  --font-en: var(--font-family-en);
  --arrow-scale: 1;
  --arrow-shift: -4px;
}

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

html {
  scroll-behavior: smooth;
}

html[dir="rtl"] {
  --arrow-scale: 1;
  --arrow-shift: -4px;
}

html[dir="ltr"] {
  --arrow-scale: -1;
  --arrow-shift: 4px;
}

html[lang="fa"],
html[lang="fa-IR"],
body.lang-fa {
  font-family: var(--font-family-fa-ar);
}

html[lang="ar"],
html[lang^="ar-"],
body.lang-ar {
  font-family: var(--font-family-fa-ar);
}

html[lang="en"],
html[lang^="en-"],
body.lang-en {
  font-family: var(--font-family-en);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  letter-spacing: 0;
  line-height: var(--line-height-base);
  margin: 0;
  min-inline-size: 320px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-loading,
body.sidebar-open {
  overflow: hidden;
}

body:not(.is-loading) .page-loader {
  opacity: 0;
  visibility: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-inline-size: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.sr-only {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.container {
  inline-size: min(var(--container-default), calc(100% - 48px));
  margin-inline: auto;
  min-inline-size: 0;
}

/* ========================================
   CONTAINER SYSTEM
======================================== */
.container-wide {
  inline-size: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto;
  min-inline-size: 0;
}

.container-narrow {
  inline-size: min(var(--container-narrow), calc(100% - 48px));
  margin-inline: auto;
  min-inline-size: 0;
}

.container-reading {
  inline-size: min(var(--container-reading), calc(100% - 48px));
  margin-inline: auto;
  min-inline-size: 0;
}

.container-full {
  inline-size: 100%;
  min-inline-size: 0;
}

.paper-grain {
  background-image:
    radial-gradient(rgba(70, 50, 34, 0.09) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255, 251, 243, 0.52) 0.7px, transparent 0.7px);
  background-position: 0 0, 2px 3px;
  background-size: 5px 5px, 7px 7px;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.18;
  pointer-events: none;
  position: fixed;
  z-index: var(--z-texture);
}

.page-loader {
  align-items: center;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 18px;
  inset: 0;
  justify-content: center;
  position: fixed;
  transition: opacity 500ms var(--transition), visibility 500ms var(--transition);
  z-index: var(--z-modal);
}

.loader-mark {
  block-size: 44px;
  border: 1px solid var(--line-gold);
  display: block;
  inline-size: 44px;
  position: relative;
  transform: rotate(45deg);
}

.loader-mark::before {
  animation: loader-pulse 1.2s ease-in-out infinite;
  border: 1px solid var(--gold);
  content: "";
  inset: 8px;
  position: absolute;
}

.loader-title {
  color: var(--brown);
  font-size: 17px;
  font-weight: 500;
}

@keyframes loader-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   BUTTON SYSTEM
======================================== */
.btn,
.button {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-flex;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  gap: var(--space-3);
  justify-content: center;
  min-block-size: 48px;
  padding-block: 0;
  padding-inline: var(--space-6);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.btn:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn:hover,
.button:hover {
  transform: translateY(-2px);
}

.btn svg,
.button svg {
  block-size: 18px;
  inline-size: 18px;
}

.btn-outline,
.button-outline {
  border: 1px solid var(--line-gold);
  color: var(--ink);
  margin-inline-start: 6px;
}

.btn-outline:hover,
.button-outline:hover {
  background: var(--ivory);
  border-color: var(--gold);
}

.btn-primary,
.button-primary {
  background: var(--brown);
  box-shadow: var(--shadow-button);
  color: var(--white);
}

.btn-primary:hover,
.button-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-button-hover);
}

.btn-secondary,
.button-secondary {
  background: var(--color-surface-control);
  border: 1px solid var(--line-gold);
  color: var(--ink);
}

.btn-secondary:hover,
.button-secondary:hover {
  background: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--brown);
}

.btn-ghost:hover {
  background: var(--color-gold-soft);
}

/* ========================================
   CARD SYSTEM
======================================== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  min-inline-size: 0;
  overflow: hidden;
}

.card-outlined {
  border: 1px solid transparent;
}

.card-interactive {
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card-interactive:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.article-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-surface-subtle);
  display: block;
  flex: none;
  inline-size: 100%;
  overflow: hidden;
}

.article-card__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========================================
   BADGE SYSTEM
======================================== */
.badge {
  align-items: center;
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-border);
  border-radius: 9px;
  color: var(--color-accent);
  display: inline-flex;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  padding-block: var(--space-1);
  padding-inline: 13px;
}

.badge-category {
  background: var(--color-gold-soft);
}

.badge-featured {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

.badge-outline {
  background: transparent;
  border-color: var(--color-border);
}

/* ========================================
   FORM SYSTEM
======================================== */
.form-group {
  display: grid;
  gap: 7px;
  min-inline-size: 0;
}

.form-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.form-input,
.form-select,
.form-textarea {
  background: var(--color-paper);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  color: var(--color-text);
  inline-size: 100%;
  outline: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input,
.form-select {
  block-size: 50px;
}

.form-input {
  padding-inline: var(--space-4);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-placeholder);
}

.form-select {
  appearance: none;
  cursor: pointer;
  padding-inline: var(--space-4);
}

.form-textarea {
  min-block-size: 128px;
  padding: var(--space-4);
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-button {
  align-self: end;
}

/* ========================================
   SECTION SYSTEM
======================================== */
.section {
  padding-block: 84px;
}

.section-header {
  align-items: end;
  display: flex;
  gap: var(--space-8);
  justify-content: space-between;
  margin-block-end: 36px;
}

.section-title {
  color: var(--color-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.section-actions {
  flex: none;
}

/* ========================================
   GRID SYSTEM
======================================== */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ========================================
   MEDIA SYSTEM
======================================== */
.media-responsive {
  block-size: auto;
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
}

.media-cover {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.media-rounded {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.toast {
  background: var(--ink);
  border-radius: 12px;
  inset-block-end: 28px;
  box-shadow: var(--shadow-lg);
  color: var(--white);
  font-size: 13px;
  inset-inline-start: 50%;
  opacity: 0;
  padding: 11px 22px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 18px);
  transition: opacity 250ms var(--transition), transform 250ms var(--transition);
  z-index: var(--z-toast);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms var(--transition), transform 650ms var(--transition);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}