/* =========================================================
   HAMID ATTARAN — SHARED SITE SHELL
   One exact frame / header / navigation system on every page.
   ========================================================= */

:root{
  --site-bg: #d8d8d8;
  --site-frame-inset: 9px;
  --site-frame-line: rgba(17,17,17,.20);
  --site-header-x: 24px;
  --site-header-top: 23px;
  --site-name-size: 12px;
  --site-nav-size: 12px;
  --site-nav-gap: 32px;

  /* Keep legacy page variables synced to the master background. */
  --bg: var(--site-bg) !important;
}

/* One exact base background across the whole site. */
html,
body,
.page,
.shell{
  background-color:var(--site-bg) !important;
}

/* Prevent old page-specific background colors from showing around the frame. */
html,
body{
  background:var(--site-bg) !important;
}

/* The border is always in precisely the same viewport position. */
.site-border{
  position:fixed !important;
  inset:var(--site-frame-inset) !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--site-frame-line) !important;
  border-radius:0 !important;
  pointer-events:none !important;
  z-index:1000 !important;
  background:transparent !important;
  view-transition-name:site-frame;
}

/* One exact grain treatment across the whole site.
   It begins INSIDE the 1px frame and is independent of page-specific CSS. */
.site-grain{
  position:fixed !important;
  top:calc(var(--site-frame-inset) + 1px) !important;
  right:calc(var(--site-frame-inset) + 1px) !important;
  bottom:calc(var(--site-frame-inset) + 1px) !important;
  left:calc(var(--site-frame-inset) + 1px) !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  z-index:900 !important;

  background-image:url("grain.png") !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
  background-size:180px 180px !important;
  background-color:transparent !important;

  opacity:.14 !important;
  mix-blend-mode:multiply !important;
  filter:none !important;
}

/* Exactly the same header geometry everywhere. */
.site-header{
  position:fixed !important;
  left:var(--site-header-x) !important;
  right:var(--site-header-x) !important;
  top:var(--site-header-top) !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  z-index:1100 !important;
  line-height:1 !important;
  view-transition-name:site-header;
}

.site-name{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  text-decoration:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:var(--site-name-size) !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.site-nav{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:var(--site-nav-gap) !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.site-nav a{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  text-decoration:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:var(--site-nav-size) !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  opacity:.88;
  transition:opacity .18s ease;
}

.site-nav a:hover{opacity:.48}
.site-nav a.is-current{opacity:1}

/* Hide old secondary identity labels that used to make headers shift. */
.site-header .mode-name,
.site-header .mode,
.site-header .section-name{
  display:none !important;
}


/* Shared UI arrows — CSS drawn so iOS never substitutes emoji glyphs. */
.ui-arrow{
  position:relative;
  display:inline-block;
  width:11px;
  height:11px;
  flex:0 0 auto;
  vertical-align:-1px;
  color:inherit;
  line-height:1;
  pointer-events:none;
}

.ui-arrow::before,
.ui-arrow::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
}

.ui-arrow-right::before,
.ui-arrow-left::before{
  left:1px;
  top:5px;
  width:9px;
  height:1px;
  background:currentColor;
}

.ui-arrow-right::after,
.ui-arrow-left::after,
.ui-arrow-up::after,
.ui-arrow-down::after{
  width:5px;
  height:5px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

.ui-arrow-right::after{
  right:1px;
  top:3px;
  transform:rotate(45deg);
}

.ui-arrow-left::after{
  left:1px;
  top:3px;
  transform:rotate(-135deg);
}

.ui-arrow-up::before,
.ui-arrow-down::before{
  left:5px;
  top:1px;
  width:1px;
  height:9px;
  background:currentColor;
}

.ui-arrow-up::after{
  left:3px;
  top:1px;
  transform:rotate(-45deg);
}

.ui-arrow-down::after{
  left:3px;
  bottom:1px;
  transform:rotate(135deg);
}

.ui-arrow-external::before{
  left:1px;
  top:6px;
  width:9px;
  height:1px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
}

.ui-arrow-external::after{
  right:1px;
  top:1px;
  width:5px;
  height:5px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}


/* Respect the user's reduced-motion preference without changing normal visuals. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}


/* =========================================================
   PRIVACY / COOKIE CONSENT
   Minimal shared controls for the public site.
   ========================================================= */
.cookie-consent{
  position:fixed;
  left:auto;
  right:24px;
  bottom:24px;
  z-index:5000;
  width:min(420px,calc(100vw - 48px));
  padding:16px 17px 15px;
  border:1px solid rgba(17,17,17,.22);
  background:rgba(216,216,216,.96);
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.cookie-consent[hidden]{display:none !important}
.cookie-consent p{
  margin:0;
  max-width:370px;
  font-size:11px;
  line-height:1.42;
}
.cookie-consent p a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-consent-actions{
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:13px;
}
.cookie-consent button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-bottom:1px solid rgba(17,17,17,.34);
  border-radius:0;
  padding:0 0 2px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:10px;
  line-height:1.2;
  text-transform:uppercase;
  cursor:pointer;
}
.cookie-consent button:hover{opacity:.55}

.privacy-controls{
  position:fixed;
  right:24px;
  bottom:21px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
}
.privacy-controls a,
.privacy-controls button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-decoration:none;
  opacity:.46;
  cursor:pointer;
  transition:opacity .18s ease;
}
.privacy-controls a:hover,
.privacy-controls button:hover{opacity:1}

@media(max-width:900px){
  .cookie-consent{
    left:auto;
    right:18px;
    bottom:18px;
    width:min(420px,calc(100vw - 36px));
    padding:14px 15px 13px;
  }
  .privacy-controls{
    right:18px;
    bottom:17px;
    gap:10px;
    font-size:8px;
  }
}