/* ==========================================================================
   IGGAK — base layer: tokens, reset, typography, controls.
   Loaded by every page. Page-specific rules live in site.css / mirror.css.

   The palette is taken from the mark itself: hammered bronze on a matte
   black ground, with bone and a cold arctic blue as the only accents.
   ========================================================================== */

:root{
  /* --- ground --- */
  --black:      #08090A;
  --panel:      #0E1012;
  --panel-2:    #14171A;
  --line:       rgba(200,145,89,.20);

  /* --- bronze, from the mark --- */
  --bronze:     #C89159;
  --bronze-lit: #E8C39A;
  --bronze-dim: #6E4F30;

  /* --- bone & ice --- */
  --bone:       #EDE6D9;
  --bone-dim:   #9A948A;
  --ice:        #8FB4C4;
  --ice-deep:   #2A3E4A;

  --warn:       #D2743F;

  /* --- type --- */
  --display: 'Century Gothic','Questrial','Futura','Avenir Next','Trebuchet MS',
             system-ui,sans-serif;
  --body: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --data: ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --gut: clamp(1.15rem,4vw,3.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--bone);
  font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* --- type roles ---------------------------------------------------------- */

.display{
  font-family:var(--display);font-weight:400;
  line-height:1.02;letter-spacing:.01em;margin:0;
  text-transform:uppercase;
}
.display strong{font-weight:700}
.display em{font-style:normal;color:var(--bronze)}

.stamp{
  font-family:var(--data);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze);margin:0;
}
.stamp.dim{color:var(--bone-dim)}

.lede{
  font-size:clamp(1.02rem,1rem + .45vw,1.22rem);line-height:1.62;
  color:rgba(237,230,217,.74);max-width:52ch;
}

/* --- wordmark ------------------------------------------------------------ */

.wordmark{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--bone);
}
.wordmark .mark{width:34px;height:auto;flex:0 0 auto}
.wordmark .name{
  font-family:var(--display);font-size:1.05rem;font-weight:400;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
}

/* --- controls ------------------------------------------------------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--data);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:1em 1.7em;min-height:46px;
  border:1px solid var(--bronze);border-radius:2px;
  background:transparent;color:var(--bronze);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.btn.solid{background:var(--bronze);color:var(--black)}
.btn.ghost{border-color:rgba(237,230,217,.26);color:var(--bone)}
.btn .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
@media (hover:hover){
  .btn:hover{background:var(--bronze);color:var(--black);transform:translateY(-2px)}
  .btn.solid:hover{background:var(--bronze-lit);border-color:var(--bronze-lit)}
  .btn.ghost:hover{background:var(--bone);border-color:var(--bone);color:var(--black)}
}

.chip{
  flex:0 0 auto;font-family:var(--data);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.6em 1.1em;min-height:36px;
  border-radius:999px;border:1px solid rgba(237,230,217,.18);
  background:transparent;color:var(--bone-dim);cursor:pointer;white-space:nowrap;
  transition:.25s var(--ease);
}
.chip[aria-pressed=true]{
  background:var(--bronze);border-color:var(--bronze);color:var(--black);font-weight:600;
}
@media (hover:hover){.chip:hover{color:var(--bone);border-color:rgba(237,230,217,.42)}}

/* --- misc ---------------------------------------------------------------- */

.rule{height:1px;background:var(--line);border:0;margin:0}
.syllabic{font-size:1.15em;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  /* ‎iteration-count‎ هم: انیمیشنِ ‎infinite‎ با ‎.01ms‎ هزاران بار در ثانیه
     تکرار می‌شود — چرخنده‌ای که چشمک می‌زند، درست برای کسی که حرکت نمی‌خواهد. */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* [hidden] باید همیشه برنده شود. هر کلاسی که display بدهد — مثل .btn با
   display:inline-flex — از استایل پیش‌فرض مرورگر برای [hidden] قوی‌تر است،
   پس عنصری که با hidden=true پنهان شده همچنان دیده می‌شود. */
[hidden]{display:none!important}