/*
Theme Name: Siavash Habibi Portfolio – Astra Child
Theme URI: https://siavashhabibi.ir
Description: Editorial, image-led bilingual portfolio presentation layer.
Author: Siavash Habibi
Author URI: https://siavashhabibi.ir
Template: astra
Version: 8.1.0
Text Domain: siavash-habibi-portfolio
License: Proprietary
License URI: https://siavashhabibi.ir
Copyright: © Siavash Habibi. All rights reserved. Built exclusively for
siavashhabibi.ir; not licensed for resale, redistribution, or reuse on
another site.
*/

/* =====================================================================
   §4.5 of the pre-launch audit flagged the ~60 `!important` declarations
   in this file as a code smell. Reviewed one by one; they fall into two
   deliberate, documented groups rather than accidental leftovers — kept
   as `!important` rather than stripped, since this parent theme's actual
   generated CSS isn't available to test against outside the live site,
   and a wrong guess here would visually regress a production site with
   no way to verify it from this environment:

   1. Typography on .sh-hero-name/.sh-section-title/.sh-project-title/etc.
      overrides Astra's own Customizer typography settings, which Astra
      prints as an inline <style> block in wp_head — usually *after* this
      stylesheet. Same-specificity rules are decided by source order, not
      just specificity, so a later same-specificity Astra rule can win
      even against an equally-specific selector here; `!important` is the
      one guaranteed way to win regardless of where Astra prints its CSS.
      (Contrast this with `astra-google-fonts`, dequeued entirely in
      functions.php — that one really was dead weight, confirmed because
      `.sh *{font-family:inherit}` already outranks Astra's bare-element
      font-family rules on specificity alone, no ordering dependency.)
   2. Page/section background overrides (search "VISUAL-ONLY POLISH"
      below) override Astra's own `body`/`#content`/`.site-content`
      background rules, which on many Astra setups are themselves
      Customizer-generated and can carry their own `!important` — ours
      needs to match that to reliably win.

   If a future pass has access to the live site's rendered/computed CSS
   (e.g. via browser devtools on the actual host), each of these can be
   re-checked individually and safely dropped wherever Astra doesn't
   actually contest it.
   ===================================================================== */

/* =====================================================================
   VISUAL SYSTEM — matched to Siavash Habibi Portfolio v7 HTML reference
   Content/data are intentionally untouched.
   ===================================================================== */
:root{
  --sh-bg:#282828;
  --sh-surface:#101010;
  --sh-card:#141414;
  --sh-text:#f2efe8;
  --sh-text-soft:#ddd7cc;
  --sh-muted:#8e8a82;
  --sh-faint:#77736d;
  --sh-border:#272727;
  --sh-ivory:#e8e0d3;
  /* v7.3.5 — dedicated divider color for non-home pages and the gallery.
     The old dividers there used near-black hex values (#252525/#232323/#222)
     that were nearly invisible against the dark background — barely one
     shade off from --sh-bg (#282828) itself. This is a proper thin,
     low-opacity gray line. Kept separate from --sh-border so the home
     page's existing dividers are untouched. */
  --sh-divider-subtle:rgba(232,224,211,.14);

  /* Warm Light visual mode — layout/typography/image treatment unchanged. */
  --sh-light-bg:#fcfaf2;
  --sh-light-surface:#ece8dc;
  --sh-light-card:#e7e2d5;
  --sh-light-text:#282828;
  --sh-light-text-soft:#3f3f3c;
  --sh-light-muted:#5f5b54;
  --sh-light-faint:#777268;
  --sh-light-border:#d2cec2;
  --sh-light-strong-border:#aaa69b;
  --sh-light-ivory:#242424;
  --sh-max:1280px;
  --sh-nav-h:74px;

  --sh-display:clamp(62px,8.8vw,122px); /* LTR/EN hero title size — RTL/FA uses its own smaller clamp() further down, do not merge */
  --sh-h1:clamp(36px,4vw,52px);
  --sh-h2:clamp(30px,4vw,48px);
  --sh-h3:17px;
  --sh-body:14px;
  --sh-small:12px;
  --sh-meta:10px;
  --sh-micro:9px;

  --sh-space-1:4px; --sh-space-2:8px; --sh-space-3:12px;
  --sh-space-4:16px; --sh-space-5:24px; --sh-space-6:32px;
  --sh-space-7:48px; --sh-space-8:64px; --sh-space-9:80px;
  --sh-space-10:96px; --sh-space-11:128px;
  --sh-motion-fast:180ms;
  --sh-motion-mid:280ms;
  --sh-motion-slow:500ms;
  --sh-ease:cubic-bezier(.4,0,.2,1);
}

/* BASE / ASTRA NORMALIZATION */
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--sh-bg)}
body.sh{
  margin:0;
  background:var(--sh-bg);
  color:var(--sh-text);
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:var(--sh-body);
  line-height:1.8;
  overflow-x:hidden;
}
body.sh,
body.sh #page,
body.sh .site-content,
body.sh .ast-container,
body.sh .site-main{background:var(--sh-bg)}
.sh *{box-sizing:border-box}
.sh *{font-family:inherit}
.sh img{display:block;max-width:100%;height:auto}
.sh a{color:inherit;text-decoration:none}
.sh button{font:inherit;color:inherit}
.sh h1,.sh h2,.sh h3,.sh h4{margin:0;color:var(--sh-text);font-weight:400;line-height:1.3}
.sh p{margin:0}
.sh :focus-visible{outline:1px solid var(--sh-text);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  .sh *, .sh *::before, .sh *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[dir="rtl"] body.sh{font-family:"Vazirmatn",Tahoma,sans-serif}
html[dir="rtl"] .sh .sh-wordmark,
html[dir="rtl"] .sh .sh-project-card-cat,
html[dir="rtl"] .sh .sh-work-filters a{font-family:"Inter","Vazirmatn",sans-serif}

/* CONTAINER */
.sh-container{
  width:min(var(--sh-max),92%);
  max-width:var(--sh-max);
  margin-inline:auto;
  padding-inline:0;
}
.sh-main,
#sh-main{min-height:1px}

/* =====================================================================
   HEADER — same visual/structural language as reference HTML
   ===================================================================== */
.sh-header{
  position:fixed;
  z-index:1000;
  inset:0 0 auto;
  height:var(--sh-nav-h);
  background:rgba(9,9,9,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,224,211,.10);
}
.sh-header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.sh-wordmark{
  flex:0 0 auto;
  font-family:"Inter","Vazirmatn",sans-serif!important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.sh-nav{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:12px;
}
.sh-nav a{
  color:#c9c5be;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:color var(--sh-motion-fast) var(--sh-ease);
}
.sh-nav a:hover,
.sh-nav a.is-active{color:#fff}
html[dir="rtl"] .sh-nav a{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .sh-mobile-panel a{
  font-family:"Vazirmatn",Tahoma,sans-serif;
}
.sh-nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.sh-lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:30px;
  padding:5px 11px;
  border:1px solid #3a3a3a;
  border-radius:20px;
  background:transparent;
  color:#c9c5be;
  font-family:"Inter","Vazirmatn",sans-serif!important;
  font-size:12px;
  line-height:1;
  transition:.2s;
}
.sh-lang:hover{color:#fff;border-color:#666}
.sh-menu-btn{
  display:none;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #3a3a3a;
  border-radius:5px;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

/* =====================================================================
   HOME / HERO
   ===================================================================== */
.sh-hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--sh-nav-h) + 20px);
  padding-bottom:70px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
  grid-template-rows:auto auto auto 1fr;
  column-gap:6vw;
  align-items:center;
  background:
    radial-gradient(circle at 70% 20%,rgba(232,224,211,.055),transparent 30%),
    linear-gradient(115deg,#080808,#0d0d0d 55%,#090909);
}
.sh-hero-kicker{
  align-self:end;
  padding-top:50px;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:#8c8982;
  margin-bottom:24px;
}
.sh-hero-kicker:after{
  content:"";
  display:inline-block;
  width:38px;
  height:1px;
  background:#68645e;
  margin-inline-start:13px;
  vertical-align:middle;
}
.sh-hero-name{
  align-self:start;
  font-size:var(--sh-display)!important;
  font-weight:600!important;
  letter-spacing:-.055em!important;
  line-height:.92!important;
  margin:0 0 27px!important;
}
.sh-hero-desc{
  align-self:start;
  max-width:540px;
  font-size:14px;
  line-height:2.05;
  color:var(--sh-muted);
}
.sh-hero-media{
  position:relative;
  align-self:center;
  grid-row:1 / -1;
  aspect-ratio:4/5;
  width:100%;
  max-width:570px;
  margin-inline-start:auto;
  overflow:hidden;
  background:linear-gradient(145deg,#222,#0f0f0f);
}
.sh-hero-media:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:14px;
  border:1px solid rgba(232,224,211,.12);
  pointer-events:none;
}
.sh-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.sh-hero-actions{
  align-self:start;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}
.sh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 19px;
  border:1px solid #3c3c3c;
  border-radius:2px;
  color:var(--sh-text);
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:11px;
  letter-spacing:.05em;
  transition:transform var(--sh-motion-fast) var(--sh-ease),
             background var(--sh-motion-fast) var(--sh-ease),
             color var(--sh-motion-fast) var(--sh-ease);
}
.sh-btn:hover{transform:translateY(-2px)}
/* Both directions use the SAME grid-column assignment: CSS Grid places
   column-1 on the physical right in dir="rtl" and on the physical left
   in dir="ltr" automatically, so this single rule set already gives the
   correct "copy right / image left" (FA) and "copy left / image right"
   (EN) result without needing separate ltr/rtl column numbers. */
.sh-hero-kicker,
.sh-hero-name,
.sh-hero-desc,
.sh-hero-actions{grid-column:1}
.sh-hero-media{grid-column:2}
html[dir="rtl"] .sh-hero-kicker{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .sh-hero-name{
  font-family:"Vazirmatn",Tahoma,sans-serif!important;
  font-size:clamp(58px,8.7vw,108px)!important;
  letter-spacing:0!important;
  line-height:1.16!important;
}
html[dir="rtl"] .sh-hero-name{font-weight:700!important;}
html[dir="rtl"] .sh-hero-desc{
  font-family:"Vazirmatn",Tahoma,sans-serif;
}
html[dir="rtl"] .sh-btn{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
}

/* =====================================================================
   SECTIONS / HEADINGS
   ===================================================================== */
.sh-section{
  padding-top:125px;
  padding-bottom:125px;
  border-top:1px solid rgba(255,255,255,.065);
}
.sh-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:42px;
  padding-bottom:13px;
  border-bottom:1px solid var(--sh-border);
}
.sh-section-title{
  font-size:var(--sh-h2)!important;
  line-height:1.35!important;
  font-weight:400!important;
  letter-spacing:-.025em;
}
html[dir="rtl"] .sh-section-title{
  font-family:"Vazirmatn",Tahoma,sans-serif!important;
  letter-spacing:0;
  line-height:1.5!important;
}
.sh-section-link{
  flex:0 0 auto;
  color:#77736d;
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .2s;
}
.sh-section-link:hover{color:#eee}
html[dir="rtl"] .sh-section-link{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  letter-spacing:0;
  text-transform:none;
}

/* =====================================================================
   PORTFOLIO GRID — editorial asymmetric system from reference HTML
   ===================================================================== */
.sh-portfolio-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:35px;
  margin-bottom:35px;
  padding-bottom:5px;
  border-bottom:1px solid var(--sh-border);
}
.sh-portfolio-tab{
  position:relative;
  padding:3px 0;
  border:0;
  border-radius:0;
  background:none!important;
  color:#777;
  cursor:pointer;
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sh-portfolio-tab:hover,
.sh-portfolio-tab.is-active{color:#eee}
.sh-portfolio-tab.is-active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-14px;
  height:1px;
  background:#eee;
}
html[dir="rtl"] .sh-portfolio-tab{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  letter-spacing:0;
  text-transform:none;
}
.sh-portfolio-panel{display:none}
.sh-portfolio-panel.is-active{display:block}
.sh-portfolio-empty{padding-block:48px;color:var(--sh-faint);font-size:var(--sh-small)}

.sh-project-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
}
.sh-project-card{
  position:relative;
  min-height:420px;
  overflow:hidden;
  display:block;
  background:#101010;
}
.sh-project-card:nth-child(1){grid-column:span 7;min-height:620px}
.sh-project-card:nth-child(2){grid-column:span 5;min-height:390px}
.sh-project-card:nth-child(3){grid-column:span 5;min-height:460px}
.sh-project-card:nth-child(4){grid-column:span 7;min-height:560px}
.sh-project-card:nth-child(5){grid-column:span 4;min-height:420px}
.sh-project-card:nth-child(6){grid-column:span 8;min-height:420px}
/* Bug fix — this grid is shared with the Work archive (archive-sh_project.php),
   which can list up to 24 projects per page, but the hand-tuned bento layout
   above was only ever art-directed for the Home teaser's fixed 6-item query.
   Without this rule, card 7+ had no grid-column at all and, on desktop,
   auto-placed into a single 12ths-width track — a sliver next to the next
   11 cards, all still 420px tall. Give every card past the 6th a plain,
   uniform 2-per-row layout instead. */
.sh-project-card:nth-child(n+7){grid-column:span 6;min-height:420px}

.sh-project-card-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(145deg,#252525,#0e0e0e);
}
.sh-project-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--sh-motion-slow) var(--sh-ease);
}
.sh-project-card:hover .sh-project-card-media img{transform:scale(1.025)}
.sh-project-card-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 48%,rgba(0,0,0,.88) 100%);
  pointer-events:none;
}
.sh-project-card-meta{
  position:absolute;
  z-index:3;
  inset:auto 0 0;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding:65px 24px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
}
.sh-project-card-title{
  color:#f2efe8;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}
.sh-project-card-cat{
  color:#aaa6a0;
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.sh-project-card:before{
  content:"";
  position:absolute;
  z-index:4;
  top:17px;
  inset-inline-start:18px;
  width:22px;
  height:1px;
  background:rgba(255,255,255,.45);
}
.sh-project-card:after{
  position:absolute;
  z-index:4;
  top:11px;
  inset-inline-start:45px;
  color:#999;
  font:9px "Inter",sans-serif;
  letter-spacing:.12em;
}
.sh-project-card:nth-child(1):after{content:"01"}
.sh-project-card:nth-child(2):after{content:"02"}
.sh-project-card:nth-child(3):after{content:"03"}
.sh-project-card:nth-child(4):after{content:"04"}
.sh-project-card:nth-child(5):after{content:"05"}
.sh-project-card:nth-child(6):after{content:"06"}
html[dir="rtl"] .sh-project-card-title{
  font-family:"Vazirmatn",Tahoma,sans-serif;
}
html[dir="rtl"] .sh-project-card-cat{
  direction:ltr;
  text-align:right;
}

/* =====================================================================
   SECONDARY HOME SECTIONS
   ===================================================================== */
.sh-section-lead{
  max-width:60ch;
  color:var(--sh-muted);
  font-size:14px;
  line-height:2.15;
  margin-bottom:32px;
}
/* Small personal photo next to the About lead text (Home teaser + About
   page). PHP exposes the chosen size as CSS custom properties (--sh-about-w
   in real cm, --sh-about-ratio as a plain w/h ratio) instead of a plain
   inline width/height — that lets width:min(...) below clamp it to a share
   of the viewport on small screens using ordinary cascade, with no
   !important fight against an inline style. aspect-ratio then derives the
   height at whatever width actually renders, so a fixed cm size set for
   desktop can never dominate a small phone screen, and the photo never
   distorts while shrinking. */
.sh-about-photo-wrap{flex:none;max-width:35vw}
.sh-about-photo{width:min(var(--sh-about-w),35vw);aspect-ratio:var(--sh-about-ratio);height:auto;border-radius:2px}
html[data-sh-theme="light"] .sh-about-photo{border-color:var(--sh-border)}
@media(max-width:640px){
  .sh-about-photo-wrap{max-width:40vw}
  .sh-about-photo{width:min(var(--sh-about-w),40vw)}
  /* v1.0.19 — fix #2.4: merged in from a second, separate
     @media(max-width:640px) block that used to sit further down,
     right after .sh-contact-links. */
  .sh-contact-links{grid-template-columns:1fr}
}
.sh-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:32px;
}
.sh-fact-label{
  margin-bottom:4px;
  color:var(--sh-faint);
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sh-fact-value{font-size:14px;color:var(--sh-text-soft)}
.sh-pill-list{display:flex;flex-wrap:wrap;gap:12px}
.sh-pill{
  padding:8px 16px;
  border:1px solid var(--sh-border);
  border-radius:999px;
  color:var(--sh-text-soft);
  font-size:12px;
}
.sh-pill:hover{border-color:#777}
.sh-inline-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  margin:0;padding:0;
}
.sh-inline-list li{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:12px 0;
  border-bottom:1px solid var(--sh-border);
  color:var(--sh-text-soft);
  font-size:14px;
}
.sh-inline-list .sh-meta-side{
  color:var(--sh-faint);
  font-size:12px;
  white-space:nowrap;
}
/* Contact page — icon + label rows (email, call, instagram, and any
   additionally enabled networks from Site Settings). Two-column grid with
   a divider under each row, matching the list-row style already used on
   the About/Archive pages (border + spacing + --sh-divider-subtle). */
.sh-contact-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 var(--sh-space-6);
  margin-top:var(--sh-space-8);
}
.sh-contact-links .sh-social-link{
  display:inline-flex;
  align-items:center;
  gap:var(--sh-space-3);
  width:100%;
  padding:var(--sh-space-3) 0;
  border-bottom:1px solid var(--sh-divider-subtle);
  color:var(--sh-text);
  font-size:var(--sh-body);
  transition:color var(--sh-motion-fast) var(--sh-ease);
}
.sh-contact-links .sh-social-link:hover{color:var(--sh-text-soft)}
.sh-contact-links .sh-social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:none;
  color:var(--sh-muted);
}
.sh-contact-links .sh-social-icon svg{width:100%;height:100%;display:block}
/* Tiwall ships as a wordmark, not a square glyph — match row height instead
   of forcing it into the same square box as the other icons. */
.sh-contact-links .sh-social-tiwall .sh-social-icon{width:auto}
.sh-contact-links .sh-social-tiwall .sh-social-icon svg{width:auto;height:16px}

/* Contact page — real contact form (§4.4 of the pre-launch audit).
   v7.3.12 — the original "plain inputs on a bottom border" treatment
   relied on a transparent field background, but --sh-border (#272727)
   sits one shade off --sh-bg (#282828): on a transparent field the
   bottom line was effectively invisible and the field read as an
   unstyled, background-colored gap with no way to tell it was
   interactive. Fields now sit on --sh-surface (already used elsewhere
   for cards, clearly distinct from --sh-bg in both color modes) inside
   a full, visible border, so the boxes and their typing area are
   obvious at a glance instead of only inferable from the label above. */
.sh-contact-form-wrap{margin-top:var(--sh-space-8);max-width:560px}
.sh-contact-form-title{font-size:var(--sh-h3);font-weight:400;margin-bottom:var(--sh-space-2)}
.sh-contact-form{display:flex;flex-direction:column;gap:var(--sh-space-5)}
.sh-contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sh-space-5);
}
@media(max-width:640px){
  .sh-contact-form-grid{grid-template-columns:1fr}
}
.sh-field{display:flex;flex-direction:column;gap:var(--sh-space-2)}
.sh-field span{font-size:12px;color:var(--sh-muted);letter-spacing:.02em}
.sh-field input,
.sh-field textarea{
  font:inherit;
  color:var(--sh-text);
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:2px;
  padding:var(--sh-space-3);
  resize:vertical;
  transition:border-color var(--sh-motion-fast) var(--sh-ease);
}
.sh-field input:focus,
.sh-field textarea:focus{
  outline:none;
  border-color:var(--sh-text);
}
.sh-field input::placeholder,
.sh-field textarea::placeholder{color:var(--sh-muted)}
.sh-contact-form .sh-btn-primary{align-self:flex-start}
/* Honeypot — visually hidden from sighted users and never reachable by
   keyboard/tab, but present in the DOM so simple bots that fill every
   input still get caught (see class-sh-contact-form.php). */
.sh-contact-hp{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.sh-contact-notice{
  padding:var(--sh-space-3) var(--sh-space-4);
  margin-bottom:var(--sh-space-5);
  border:1px solid var(--sh-border);
  font-size:14px;
}
.sh-contact-notice--success{border-color:#4a7a4a;color:var(--sh-text)}
.sh-contact-notice--error{border-color:#a05050;color:var(--sh-text)}
html[dir="rtl"] .sh-contact-form-title,
html[dir="rtl"] .sh-field span,
html[dir="rtl"] .sh-field input,
html[dir="rtl"] .sh-field textarea,
html[dir="rtl"] .sh-contact-notice{
  font-family:"Vazirmatn",Tahoma,sans-serif;
}

.sh-contact-teaser{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:48px;
  border:1px solid var(--sh-border);
  border-radius:2px;
  background:var(--sh-surface);
}
.sh-contact-teaser-links{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:12px;
  color:var(--sh-muted);
  font-size:12px;
}
.sh-cta{
  padding:10px 20px;
  border:1px solid var(--sh-text-soft);
  color:var(--sh-text-soft);
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sh-cta:hover{background:var(--sh-text-soft);color:var(--sh-bg)}
html[dir="rtl"] .sh-section-lead{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:14px;
  line-height:2.15;
}
html[dir="rtl"] .sh-fact-label{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .sh-fact-value{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:14px;
}
html[dir="rtl"] .sh-pill{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px;
}
html[dir="rtl"] .sh-inline-list li{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:14px;
  line-height:1.9;
}
html[dir="rtl"] .sh-inline-list .sh-meta-side{
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:12px;
}
html[dir="rtl"] .sh-contact-teaser-links{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px;
}
html[dir="rtl"] .sh-contact-links .sh-social-link{
  font-family:"Vazirmatn",Tahoma,sans-serif;
}
html[dir="rtl"] .sh-cta{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
}

/* =====================================================================
   WORK / ARCHIVE
   ===================================================================== */
.sh-work-head{
  padding-top:calc(var(--sh-nav-h) + 70px);
  padding-bottom:42px;
}
.sh-work-title{
  font-size:clamp(40px,5vw,68px)!important;
  line-height:1.15!important;
  margin-bottom:38px!important;
}
.sh-work-filters{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding-bottom:13px;
  border-bottom:1px solid var(--sh-border);
}
.sh-work-filters a{
  position:relative;
  color:#777;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sh-work-filters a:hover,
.sh-work-filters a.is-active{color:#eee}
.sh-work-filters a.is-active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-14px;
  height:1px;background:#eee;
}
.sh-work-empty{padding-block:80px;color:var(--sh-faint)}
html[dir="rtl"] .sh-work-title{
  font-family:"Vazirmatn",Tahoma,sans-serif!important;
  font-size:clamp(36px,4.6vw,60px)!important;
  line-height:1.4!important;
}
html[dir="rtl"] .sh-work-filters a{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

/* =====================================================================
   PROJECT / SERIES
   ===================================================================== */
.sh-project-head{
  padding-top:calc(var(--sh-nav-h) + 10px);
  padding-bottom:48px;
  border-bottom:1px solid var(--sh-border);
  margin-bottom:80px;
}
.sh-project-eyebrow{
  margin-bottom:20px;
  color:var(--sh-faint);
  font-family:"Inter","Vazirmatn",sans-serif;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sh-project-title{
  font-size:clamp(40px,5vw,72px)!important;
  line-height:1.15!important;
  margin-bottom:24px!important;
}
.sh-project-statement{
  max-width:64ch;
  color:var(--sh-muted);
  font-size:14px;
  line-height:2.1;
}
/* v7.1.5 — project image sequence is a plain 3-column grid: these are
   picker thumbnails, the full-size image is only ever shown in the
   lightbox, so an asymmetric "art-directed" size here is unnecessary. */
.sh-project-sequence{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.sh-project-figure{margin:0}
.sh-project-figure a{display:block;overflow:hidden;aspect-ratio:1/1}
.sh-project-figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--sh-ease)}
.sh-project-figure a:hover img{transform:scale(1.03)}
html[dir="rtl"] .sh-project-eyebrow{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .sh-project-title{
  font-family:"Vazirmatn",Tahoma,sans-serif!important;
  font-size:clamp(36px,4.6vw,64px)!important;
  line-height:1.4!important;
}
html[dir="rtl"] .sh-project-statement{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:14px;
  line-height:2.1;
}
html[dir="rtl"] .sh-project-nav a{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px;
}
.sh-project-nav{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:96px;
  padding-top:32px;
  border-top:1px solid var(--sh-border);
}
.sh-project-nav a{font-size:12px;color:var(--sh-muted)}
.sh-project-nav a:hover{color:#fff}

/* =====================================================================
   GENERIC PAGES — same editorial section rhythm
   ===================================================================== */
.sh-page{
  width:min(var(--sh-max),92%);
  max-width:var(--sh-max);
  margin-inline:auto;
  padding-top:calc(var(--sh-nav-h) + 70px);
  padding-bottom:110px;
}
.sh-page h1{
  font-size:clamp(40px,5vw,68px);
  line-height:1.15;
  margin-bottom:42px;
}
.sh-page p{
  color:var(--sh-text-soft);
  line-height:2.1;
}
.sh-page-content{max-width:72ch}
.sh-page-content p{margin-bottom:24px}
.sh-page section{padding:0;border:0}
.sh-page .sh-section-lead{margin-bottom:38px}
html[dir="rtl"] .sh-page h1{
  font-family:"Vazirmatn",Tahoma,sans-serif!important;
  font-size:clamp(36px,4.6vw,60px)!important;
  line-height:1.4!important;
}
html[dir="rtl"] .sh-page p{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:14px;
  line-height:2.1;
}

/* v1.0.19 — fix #2.3: page-about.php, page-contact.php and front-page.php
   repeated the same ~40 style="" attributes across their markup (lead/photo
   rows, subsection headings, plain lists, the About "facts" table). Moved
   here so the design lives in one place instead of scattered inline copies. */
.sh-flex-row{
  display:flex;
  gap:var(--sh-space-6);
  align-items:flex-start;
  flex-wrap:wrap;
}
.sh-flex-col{
  flex:1 1 320px;
  min-width:0;
}
.sh-lead{
  font-size:var(--sh-h3);
  max-width:56ch;
}
.sh-lead-strong{color:var(--sh-text)}
.sh-prose{max-width:64ch}
.sh-prose-pre{
  max-width:64ch;
  white-space:pre-line;
}
.sh-muted{color:var(--sh-muted)}
.sh-subsection{margin-top:var(--sh-space-9)}
.sh-subsection-title{
  font-size:var(--sh-h3);
  margin-bottom:var(--sh-space-5);
}
.sh-list-plain{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--sh-space-3);
}
.sh-list-item{font-size:var(--sh-body)}
.sh-list-link{border-bottom:1px solid var(--sh-divider-subtle)}
.sh-facts-block{
  margin-top:var(--sh-space-8);
  border-top:1px solid var(--sh-divider-subtle);
}
.sh-facts-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:12px 0;
  border-bottom:1px solid var(--sh-divider-subtle);
  font-size:var(--sh-meta);
}
.sh-facts-table-value{font-weight:400}
.sh-muted-mb{
  color:var(--sh-muted);
  margin-bottom:var(--sh-space-5);
}
.sh-contact-teaser-title{margin-bottom:8px}
.sh-contact-teaser-lead{
  color:var(--sh-muted);
  max-width:48ch;
}
.sh-section-head--compact{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0;
  margin-top:var(--sh-space-6);
}

/* =====================================================================
   FOOTER + EDITORIAL BACK TO TOP
   ===================================================================== */
.sh-footer{
  margin-top:0;
  border-top:1px solid var(--sh-border);
}
.sh-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  padding-top:30px;
  padding-bottom:30px;
  color:#77736d;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.06em;
}
.sh-footer a:hover{color:#eee}
.sh-footer-social{
  display:inline-flex;
  align-items:center;
  gap:16px;
}
.sh-footer-social .sh-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#77736d;
  transition:color .2s;
}
.sh-footer-social .sh-social-link:hover{color:#eee}
.sh-footer-social .sh-social-icon{
  display:inline-flex;
  width:15px;
  height:15px;
}
.sh-footer-social .sh-social-icon svg{width:100%;height:100%;display:block}
.sh-footer-social .sh-social-tiwall .sh-social-icon{width:auto}
.sh-footer-social .sh-social-tiwall .sh-social-icon svg{width:auto;height:12px}
html[dir="rtl"] .sh-footer-inner{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:11px;
  letter-spacing:0;
}


/* MOBILE MENU — full-screen editorial panel, matching the reference HTML */
.sh-mobile-panel{
  position:fixed;
  z-index:999;
  inset:var(--sh-nav-h) 0 0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:40px 5%;
  background:rgba(9,9,9,.98);
  font-size:22px;
}
.sh-mobile-panel.is-open{display:flex}
.sh-mobile-panel a{
  padding:6px 25px;
  color:#eee;
  line-height:1.5;
  transition:color .2s,transform .2s;
}
.sh-mobile-panel a:hover{color:#fff;transform:translateY(-1px)}

/* =====================================================================
   RESPONSIVE — deliberately close to reference HTML behavior
   ===================================================================== */
@media(max-width:1100px){
  :root{--sh-max:1200px}
  .sh-container,.sh-page{width:92%}
  .sh-hero{column-gap:5vw}
  .sh-project-card:nth-child(1){min-height:560px}
  .sh-project-card:nth-child(4){min-height:500px}
}
@media(max-width:900px){
  :root{--sh-nav-h:68px}
  .sh-nav{gap:18px}
  .sh-hero{
    min-height:auto;
    padding-top:120px;
    padding-bottom:70px;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:0;
  }
  .sh-hero-kicker,
  .sh-hero-name,
  .sh-hero-desc,
  .sh-hero-actions{grid-column:1}
  .sh-hero-media{
    grid-column:1;
    grid-row:auto;
    width:100%;
    max-width:600px;
    margin:50px 0 0;
  }
  .sh-project-card:nth-child(n){
    grid-column:span 6;
    min-height:380px;
  }
  .sh-project-card:nth-child(1),
  .sh-project-card:nth-child(4){min-height:500px}
  .sh-facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* v1.0.19 — fix #2.4: merged in from a second, separate @media(max-width:768px)
     block that used to sit right after .sh-mobile-panel above. */
  .sh-mobile-panel{inset:68px 0 0}
  .sh-nav{display:none}
  .sh-menu-btn{display:flex}
  .sh-nav-actions{margin-inline-start:auto}
  .sh-header-inner{gap:18px}
  .sh-wordmark{font-size:12px}
  .sh-hero{
    padding-top:115px;
    padding-bottom:70px;
  }
  .sh-hero-name{
    font-size:clamp(54px,15vw,82px)!important;
    line-height:.98!important;
    margin-bottom:22px!important;
  }
  html[dir="rtl"] .sh-hero-name{
    font-size:clamp(49px,14.2vw,70px)!important;
    line-height:1.2!important;
  }
  .sh-hero-desc{font-size:14px;line-height:2.05}
  html[dir="rtl"] .sh-hero-desc{font-size:14px}
  .sh-hero-media{max-width:none;margin-top:42px!important}
  .sh-section{padding-top:90px;padding-bottom:90px}
  .sh-section-head{display:block;margin-bottom:34px}
  .sh-section-link{display:inline-block;margin-top:13px}
  .sh-portfolio-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    gap:15px;
    margin-bottom:30px;
  }
  .sh-portfolio-tabs::-webkit-scrollbar{display:none}
  .sh-portfolio-tab{white-space:nowrap}
  .sh-project-card:nth-child(n){
    grid-column:span 12!important;
    min-height:430px;
  }
  .sh-project-card:nth-child(1),
  .sh-project-card:nth-child(4){min-height:540px}
  .sh-project-card-meta{padding:60px 20px 18px}
  .sh-project-card-title{font-size:17px}
  .sh-work-head{padding-top:120px;padding-bottom:34px}
  .sh-work-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    gap:15px;
  }
  .sh-work-filters::-webkit-scrollbar{display:none}
  .sh-work-filters a{white-space:nowrap}
  .sh-project-head{padding-top:calc(var(--sh-nav-h) + 10px);margin-bottom:60px;padding-bottom:36px}
  .sh-project-title{font-size:clamp(38px,10vw,60px)!important}
  .sh-project-sequence{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-page{padding-top:120px;padding-bottom:80px}
  .sh-page h1{font-size:clamp(38px,10vw,60px);margin-bottom:34px}
  .sh-contact-teaser{padding:32px}
}
@media(max-width:480px){
  .sh-container,.sh-page{width:90%}
  .sh-header{height:68px}
  .sh-wordmark{font-size:11px;letter-spacing:.12em}
  .sh-lang{min-width:40px;height:29px}
  .sh-theme-toggle{width:36px;height:36px;font-size:16px}
  .sh-menu-btn{width:42px;height:42px}
  .sh-hero{padding-top:70px;padding-bottom:5px}
  .sh-hero-name{font-size:52px!important}
  html[dir="rtl"] .sh-hero-name{font-size:47px!important;line-height:1.22!important}
  .sh-hero-kicker{font-size:9px;margin-bottom:20px}
  .sh-hero-desc{font-size:13px;line-height:2.1}
  .sh-hero-media{margin-top:34px!important}
  .sh-section{padding-top:75px;padding-bottom:75px}
  .sh-section-title{font-size:clamp(29px,8vw,40px)!important}
  .sh-section-lead{font-size:13px}
  .sh-facts{grid-template-columns:1fr;gap:18px}
  .sh-contact-teaser{padding:25px 20px}
  .sh-contact-teaser-links{flex-direction:column;gap:10px}
  .sh-inline-list li{flex-wrap:wrap;gap:4px 24px}
  .sh-inline-list .sh-meta-side{white-space:normal}
  .sh-project-card:nth-child(n),
  .sh-project-card:nth-child(1),
  .sh-project-card:nth-child(4){min-height:430px}
  .sh-project-card-meta{padding:55px 18px 16px;display:block}
  .sh-project-card-cat{display:block;margin-top:4px}
  .sh-footer-inner{flex-direction:column;align-items:flex-start;gap:8px}
}


/* v7.1 — semantic SEO additions; inherits the existing editorial system. */
.sh-work-description{max-width:68ch;color:var(--sh-muted);margin-top:var(--sh-space-4);font-size:var(--sh-body)}
.sh-pagination{margin-top:var(--sh-space-8);padding-top:var(--sh-space-5);border-top:1px solid var(--sh-border)}
.sh-pagination .page-numbers{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.sh-pagination .page-numbers a,.sh-pagination .page-numbers span{display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--sh-border);padding:0 10px;color:var(--sh-muted)}
.sh-pagination .page-numbers .current{color:var(--sh-text);border-color:var(--sh-text)}


/* =====================================================================
   WARM LIGHT MODE — v7.2.1
   A second visual system only. No layout, spacing, typography, image crop,
   breakpoint or interaction geometry is changed. The default dark mode is
   untouched and remains the fallback when no preference is stored.
   ===================================================================== */
html[data-sh-theme="light"]{
  --sh-bg:var(--sh-light-bg);
  --sh-surface:var(--sh-light-surface);
  --sh-card:var(--sh-light-card);
  --sh-text:var(--sh-light-text);
  --sh-text-soft:var(--sh-light-text-soft);
  --sh-muted:var(--sh-light-muted);
  --sh-faint:var(--sh-light-faint);
  --sh-border:var(--sh-light-border);
  --sh-ivory:var(--sh-light-ivory);
  --sh-divider-subtle:rgba(40,40,40,.14);
  color-scheme:light;
  background:var(--sh-bg);
}
html[data-sh-theme="light"] body.sh,
html[data-sh-theme="light"] body.sh #page,
html[data-sh-theme="light"] body.sh .site-content,
html[data-sh-theme="light"] body.sh .ast-container,
html[data-sh-theme="light"] body.sh .site-main{background:var(--sh-bg);color:var(--sh-text)}
html[data-sh-theme="light"] .sh-header{background:rgba(252,250,242,.92);border-bottom-color:var(--sh-border)}
html[data-sh-theme="light"] .sh-header .sh-wordmark,
html[data-sh-theme="light"] .sh-header .sh-nav a,
html[data-sh-theme="light"] .sh-header .sh-lang,
html[data-sh-theme="light"] .sh-header .sh-menu-btn{color:var(--sh-text)}
html[data-sh-theme="light"] .sh-nav a::after{background:var(--sh-text)}
html[data-sh-theme="light"] .sh-mobile-panel{background:var(--sh-bg);color:var(--sh-text)}
html[data-sh-theme="light"] .sh-mobile-panel a{color:var(--sh-text);border-color:var(--sh-border)}
html[data-sh-theme="light"] .sh :focus-visible{outline-color:var(--sh-text)}
html[data-sh-theme="light"] .sh-cta,
html[data-sh-theme="light"] .sh-button{border-color:var(--sh-text);color:var(--sh-text)}
html[data-sh-theme="light"] .sh-cta:hover,
html[data-sh-theme="light"] .sh-button:hover{background:var(--sh-text);color:var(--sh-bg)}

/* Home hero — explicit light-mode treatment for the art-directed hero surface.
   The dark hero uses a photographic/black gradient; in Warm Light it becomes
   the same warm ivory family as the page while retaining the exact geometry. */
html[data-sh-theme="light"] .sh-hero{
  background:linear-gradient(115deg,#fcfaf2,#faf7ed 55%,#fcfaf2);
  color:var(--sh-text);
}
html[data-sh-theme="light"] .sh-hero-kicker{color:var(--sh-muted)}
html[data-sh-theme="light"] .sh-hero-kicker:after{background:var(--sh-light-strong-border)}
html[data-sh-theme="light"] .sh-hero-name,
html[data-sh-theme="light"] .sh-hero-desc{color:var(--sh-text)}
html[data-sh-theme="light"] .sh-hero-desc{color:var(--sh-muted)}
html[data-sh-theme="light"] .sh-hero-media{background:linear-gradient(145deg,#e9e4d7,#f3eee2)}
html[data-sh-theme="light"] .sh-hero-media:before{border-color:rgba(23,23,23,.14)}

/* Core Gallery archive */
html[data-sh-theme="light"] body.siavash-gallery-archive-page,
html[data-sh-theme="light"] body.siavash-gallery-archive-page #page,
html[data-sh-theme="light"] body.siavash-gallery-archive-page #content,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .site,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .site-content,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-shell{background:var(--sh-bg);color:var(--sh-text)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-sidebar,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-sidebar-inner{background:var(--sh-surface);border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-brand,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-brand strong,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-nav a,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-sidebar-bottom a,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-tile>a,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-tile-overlay h2{color:var(--sh-text)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-brand span,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-tile-overlay span,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-sidebar-bottom small,
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-no-results{color:var(--sh-muted)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-nav a.is-active:after{background:var(--sh-text)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-nav .gallery-nav-link{border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-tile-media{background:var(--sh-surface)}

/* Core Gallery single/detail */
html[data-sh-theme="light"] body.siavash-gallery-single-page{background:var(--sh-bg);color:var(--sh-text)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-fullscreen{background:var(--sh-bg)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-visual{background:linear-gradient(45deg,#ece8dc,#f1ede2)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-visual img{background:transparent}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details{background:var(--sh-surface);border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details h1,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details h2,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details strong{color:var(--sh-text)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details p,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-details span,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-back,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-cat{color:var(--sh-muted)}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-meta,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-meta>div{border-color:var(--sh-divider-subtle)}
/* v7.3.17 — hover prev/next arrows + filmstrip (Core v1.0.36) sit directly
   on top of the photo, so they keep their dark glass look in Warm Light
   mode too rather than switching to light surface colors that would wash
   out against the image. */
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow{
  background:rgba(20,18,14,.5);border-color:rgba(255,255,255,.3);color:#fff;
}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow:hover,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow:focus-visible{
  background:rgba(20,18,14,.78);border-color:rgba(255,255,255,.55);
}
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-filmstrip{
  background:linear-gradient(to top,rgba(20,18,14,.55),rgba(20,18,14,0));
}

/* Home lightbox (when used by Core) */
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox{background:rgba(23,23,23,.72)}
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox-box{background:var(--sh-surface);border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox-image{background-color:var(--sh-light-card)}
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox-details{background:var(--sh-surface);border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox-details h3{color:var(--sh-text)}
html[data-sh-theme="light"] .siavash-portfolio-page .lightbox-details p{color:var(--sh-muted)}
html[data-sh-theme="light"] .siavash-portfolio-page .gallery-meta,
html[data-sh-theme="light"] .siavash-portfolio-page .gallery-meta>div{border-color:var(--sh-divider-subtle)}
html[data-sh-theme="light"] .siavash-portfolio-page .gallery-meta span{color:var(--sh-muted)}

/* Theme switcher — now a static header control next to the language
   switch (not a floating fixed button), so its size and position stay
   identical across desktop, tablet and mobile, and it never overlaps
   footer content. */
.sh-theme-toggle{
  flex:0 0 auto;
  appearance:none;border:1px solid #3a3a3a;background:transparent;color:#c9c5be;
  width:30px;height:30px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;line-height:1;font-size:14px;transition:background var(--sh-motion-fast) var(--sh-ease),color var(--sh-motion-fast) var(--sh-ease),border-color var(--sh-motion-fast) var(--sh-ease);
}
.sh-theme-toggle:hover,.sh-theme-toggle:focus-visible{background:#c9c5be;color:#101010;border-color:#c9c5be}
html[data-sh-theme="light"] .sh-theme-toggle{border-color:var(--sh-light-strong-border);color:var(--sh-light-text)}
html[data-sh-theme="light"] .sh-theme-toggle:hover,html[data-sh-theme="light"] .sh-theme-toggle:focus-visible{background:var(--sh-light-text);color:var(--sh-light-bg);border-color:var(--sh-light-text)}


/* =====================================================================
   v7.2.3 — Warm Light contrast corrections
   Visual geometry/layout intentionally unchanged.
   ===================================================================== */

/* Primary hero CTA:
   Dark mode  = warm ivory surface + carbon text.
   Light mode = carbon surface + warm ivory text. */
.sh-btn.sh-btn-primary{
  background:var(--sh-ivory);
  color:#282828;
  border-color:var(--sh-ivory);
}
.sh-btn.sh-btn-primary:hover,
.sh-btn.sh-btn-primary:focus-visible{
  background:#ffffff;
  color:#282828;
  border-color:#ffffff;
}

html[data-sh-theme="light"] .sh-btn.sh-btn-primary{
  background:var(--sh-light-text);
  color:var(--sh-light-bg);
  border-color:var(--sh-light-text);
}
html[data-sh-theme="light"] .sh-btn.sh-btn-primary:hover,
html[data-sh-theme="light"] .sh-btn.sh-btn-primary:focus-visible{
  background:var(--sh-light-text-soft);
  color:var(--sh-light-bg);
  border-color:var(--sh-light-text-soft);
}

/* Home portfolio tabs — active state must remain visible on Warm Light. */
html[data-sh-theme="light"] .sh-portfolio-tab:hover,
html[data-sh-theme="light"] .sh-portfolio-tab.is-active{
  color:var(--sh-light-text);
}
html[data-sh-theme="light"] .sh-portfolio-tab.is-active:after{
  background:var(--sh-light-text);
}

/* Section links and active work filters follow the same light-mode contrast. */
html[data-sh-theme="light"] .sh-section-link:hover{
  color:var(--sh-light-text);
}
html[data-sh-theme="light"] .sh-work-filters a:hover,
html[data-sh-theme="light"] .sh-work-filters a.is-active{
  color:var(--sh-light-text);
}
html[data-sh-theme="light"] .sh-work-filters a.is-active:after{
  background:var(--sh-light-text);
}

/* Explicitly keep the Warm Light hero on the updated brighter ivory. */
html[data-sh-theme="light"] .sh-hero{
  background:linear-gradient(115deg,#fcfaf2,#faf7ed 55%,#fcfaf2);
}


/* =====================================================================
   v7.2.4 VISUAL-ONLY POLISH — requested appearance corrections.
   No markup, content, layout, functionality, routes or data are changed.
   ===================================================================== */

/* Shared editorial page gradient:
   Dark  = base #282828 + one/two subtle lighter carbon steps.
   Light = base #fcfaf2 + one/two subtle lighter warm-ivory steps. */
:root{
  --sh-dark-page-gradient:radial-gradient(circle at 70% 20%,rgba(255,255,255,.045),transparent 30%),linear-gradient(115deg,#282828,#303030 55%,#282828);
  --sh-light-page-gradient:radial-gradient(circle at 70% 20%,rgba(255,255,255,.42),transparent 30%),linear-gradient(115deg,#fcfaf2,#fffdf8 55%,#fcfaf2);
}

/* Home Hero — keep the existing art-directed gradient model, but build it
   from the site's actual base background instead of near-black values. */
html:not([data-sh-theme="light"]) .sh-hero,
html[data-sh-theme="light"] .sh-hero{
  background:transparent!important;
}

/* Carbon surfaces that intentionally sit one level darker than the page. */
html:not([data-sh-theme="light"]) .sh-header,
html:not([data-sh-theme="light"]) .sh-footer{
  background:#222222;
}
html:not([data-sh-theme="light"]) .sh-header{
  border-bottom-color:#2d2d2d;
}
html:not([data-sh-theme="light"]) .sh-footer{
  border-top-color:#303030;
}

/* Light mode: remove the full-width divider under Work category tabs.
   The active tab underline remains untouched. */
html[data-sh-theme="light"] .sh-portfolio-tabs{
  border-bottom:0;
}

/* ---------------------------------------------------------------------
   Requested page backgrounds — same gradient formula in both modes.
   These selectors target only the named page types.
   --------------------------------------------------------------------- */
html:not([data-sh-theme="light"]) body.post-type-archive-sh_project,
html:not([data-sh-theme="light"]) body.single-sh_project,
html:not([data-sh-theme="light"]) body.tax-sh_portfolio_category,
html:not([data-sh-theme="light"]) body.page-template-page-archive,
html:not([data-sh-theme="light"]) body.page-template-page-about,
html:not([data-sh-theme="light"]) body.page-template-page-contact,
html:not([data-sh-theme="light"]) body.siavash-gallery-archive-page,
html:not([data-sh-theme="light"]) body.siavash-gallery-single-page{
  background:var(--sh-dark-page-gradient)!important;
}

html:not([data-sh-theme="light"]) body.post-type-archive-sh_project #page,
html:not([data-sh-theme="light"]) body.post-type-archive-sh_project #content,
html:not([data-sh-theme="light"]) body.single-sh_project #page,
html:not([data-sh-theme="light"]) body.single-sh_project #content,
html:not([data-sh-theme="light"]) body.single-sh_project .site-content,
html:not([data-sh-theme="light"]) body.post-type-archive-sh_project .site-content,
html:not([data-sh-theme="light"]) body.post-type-archive-sh_project .site-main,
html:not([data-sh-theme="light"]) body.single-sh_project .site-main,
html:not([data-sh-theme="light"]) body.tax-sh_portfolio_category #page,
html:not([data-sh-theme="light"]) body.tax-sh_portfolio_category #content,
html:not([data-sh-theme="light"]) body.tax-sh_portfolio_category .site-content,
html:not([data-sh-theme="light"]) body.page-template-page-archive #page,
html:not([data-sh-theme="light"]) body.page-template-page-archive #content,
html:not([data-sh-theme="light"]) body.page-template-page-archive .site-content,
html:not([data-sh-theme="light"]) body.page-template-page-about #page,
html:not([data-sh-theme="light"]) body.page-template-page-about #content,
html:not([data-sh-theme="light"]) body.page-template-page-about .site-content,
html:not([data-sh-theme="light"]) body.page-template-page-contact #page,
html:not([data-sh-theme="light"]) body.page-template-page-contact #content,
html:not([data-sh-theme="light"]) body.page-template-page-contact .site-content,
html:not([data-sh-theme="light"]) body.page-template-page-archive .site-main,
html:not([data-sh-theme="light"]) body.page-template-page-about .site-main,
html:not([data-sh-theme="light"]) body.page-template-page-contact .site-main{
  background:transparent!important;
}

html[data-sh-theme="light"] body.post-type-archive-sh_project,
html[data-sh-theme="light"] body.single-sh_project,
html[data-sh-theme="light"] body.tax-sh_portfolio_category,
html[data-sh-theme="light"] body.page-template-page-archive,
html[data-sh-theme="light"] body.page-template-page-about,
html[data-sh-theme="light"] body.page-template-page-contact,
html[data-sh-theme="light"] body.siavash-gallery-archive-page,
html[data-sh-theme="light"] body.siavash-gallery-single-page{
  background:var(--sh-light-page-gradient)!important;
}

html[data-sh-theme="light"] body.post-type-archive-sh_project #page,
html[data-sh-theme="light"] body.post-type-archive-sh_project #content,
html[data-sh-theme="light"] body.single-sh_project #page,
html[data-sh-theme="light"] body.single-sh_project #content,
html[data-sh-theme="light"] body.single-sh_project .site-content,
html[data-sh-theme="light"] body.post-type-archive-sh_project .site-content,
html[data-sh-theme="light"] body.post-type-archive-sh_project .site-main,
html[data-sh-theme="light"] body.single-sh_project .site-main,
html[data-sh-theme="light"] body.tax-sh_portfolio_category #page,
html[data-sh-theme="light"] body.tax-sh_portfolio_category #content,
html[data-sh-theme="light"] body.tax-sh_portfolio_category .site-content,
html[data-sh-theme="light"] body.page-template-page-archive #page,
html[data-sh-theme="light"] body.page-template-page-archive #content,
html[data-sh-theme="light"] body.page-template-page-archive .site-content,
html[data-sh-theme="light"] body.page-template-page-about #page,
html[data-sh-theme="light"] body.page-template-page-about #content,
html[data-sh-theme="light"] body.page-template-page-about .site-content,
html[data-sh-theme="light"] body.page-template-page-contact #page,
html[data-sh-theme="light"] body.page-template-page-contact #content,
html[data-sh-theme="light"] body.page-template-page-contact .site-content,
html[data-sh-theme="light"] body.page-template-page-archive .site-main,
html[data-sh-theme="light"] body.page-template-page-about .site-main,
html[data-sh-theme="light"] body.page-template-page-contact .site-main{
  background:transparent!important;
}

/* Gallery archive/detail: the Core remains untouched; these presentation
   overrides make its public surfaces follow the same site-wide gradient. */
html:not([data-sh-theme="light"]) body.siavash-gallery-archive-page .gallery-shell,
html:not([data-sh-theme="light"]) body.siavash-gallery-single-page .gallery-single-fullscreen,
html:not([data-sh-theme="light"]) body.siavash-gallery-single-page .gallery-single-visual{
  background:var(--sh-dark-page-gradient)!important;
}
html[data-sh-theme="light"] body.siavash-gallery-archive-page .gallery-shell,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-fullscreen,
html[data-sh-theme="light"] body.siavash-gallery-single-page .gallery-single-visual{
  background:var(--sh-light-page-gradient)!important;
}

/* Gallery dark-mode title: neutral carbon/ivory, never blue. */
html:not([data-sh-theme="light"]) body.siavash-gallery-archive-page .gallery-archive-head h1,
html:not([data-sh-theme="light"]) body.siavash-gallery-single-page .gallery-single-details h1{
  color:var(--sh-text)!important;
}

/* Keep the Gallery detail panel as the darker secondary surface. */
html:not([data-sh-theme="light"]) body.siavash-gallery-single-page .gallery-single-details,
html:not([data-sh-theme="light"]) body.siavash-gallery-archive-page .gallery-sidebar{
  background:#222222!important;
}

/* v7.3.11 — the "redundant lightbox close button" line that used to live
   here (#lightboxxclose.lightbox-close{display:none!important}) had a typo
   in the id (an extra "x": lightboxxclose vs the real id lightboxClose) and
   never matched anything, so it never actually hid the button. The real
   fix is upstream in Core (v1.0.24): the Home lightbox markup no longer
   prints on the Gallery page at all, so no override is needed here. */