/* =========================================================
   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;
}