/* Sahar Haghighi — template modelled on julianschnabel.com
   Fonts: Public Sans stands in for Founders Grotesk (Regular→400, Medium→500, Semibold→600, TextLight→300) */
:root {
  --accent: #03e9f2;   /* hero title colour */
  --font: "Public Sans", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: #fff; color: #000; font-family: var(--font); font-weight: 400; font-size: 14px; line-height: normal; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 100%; max-width: 1425px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* ======================================================= header (inner pages) */
.main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #fff; padding: 30px 0 20px; }
.main-header .container { display: flex; align-items: flex-start; justify-content: space-between; }
.logo { line-height: 1; padding-right: 57px; }
.logo span { font-family: var(--font); font-weight: 500; font-size: 33px; letter-spacing: 2px; text-transform: uppercase; color: #000; line-height: 33px; }
.main-header.custom-transparent, .main-header.home-header { background: transparent; }
.main-header.home-header .container { justify-content: flex-end; }
.main-header.home-header .custom-hamburger span { background: #fff; }
.main-header.custom-transparent .logo span { color: #fff; }
.custom-hamburger { order: 2; width: 34px; height: 24px; margin-top: 5px; position: relative; cursor: pointer; flex: none; }
.custom-hamburger span { position: absolute; left: 0; right: 0; height: 3px; background: #000; }
.custom-hamburger span:nth-child(1) { top: 0; } .custom-hamburger span:nth-child(2) { top: 10px; } .custom-hamburger span:nth-child(3) { top: 20px; }
.main-header.custom-transparent .custom-hamburger span { background: #fff; }
.custom-hamburger.is-x span { top: 10px; }
.custom-hamburger.is-x span:nth-child(1) { transform: rotate(45deg); }
.custom-hamburger.is-x span:nth-child(2) { transform: rotate(-45deg); }
@media (max-width: 720px) { .logo span { font-size: 22px; line-height: 22px; } .custom-hamburger { width: 30px; } }

/* ======================================================= full-screen menu */
.custom-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99999; overflow: auto; font-size: 17px; letter-spacing: .5px; display: none; padding: 30px 0 60px; }
.custom-menu-on { overflow: hidden; }
.custom-menu-on .custom-menu { display: block; }
.custom-menu .container { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.custom-menu .logo { order: 1; }
.custom-menu nav.main { order: 3; clear: both; width: 100%; margin-top: 50px; }
nav.main > a, nav.main .menu-group { margin-top: 100px; width: 25%; display: inline-block; vertical-align: top; }
nav.main a { font-weight: 500; font-size: 26px; text-transform: uppercase; letter-spacing: 2px; color: #000; }
nav.main a:hover { color: #808080; }
nav.main .menu-group-items { margin-top: 30px; column-count: 2; width: 70%; column-gap: 0; }
nav.main .menu-group-items > a { display: inline-block; width: 100%; margin-bottom: 10px; padding-right: 20px; font-size: 18px; letter-spacing: 2px; }
nav.main .menu-group { width: 100%; }
nav.main .menu-footer { margin-top: 90px; display: flex; flex-wrap: wrap; gap: 8px 30px; }
nav.main .menu-footer a { font-size: 14px; font-weight: 400; letter-spacing: .5px; text-transform: none; color: #808080; }
nav.main .menu-footer a:hover { color: #000; }
@media (max-width: 900px) {
  nav.main > a, nav.main .menu-group { width: 100%; display: block; margin-top: 40px; }
  nav.main .menu-group-items { column-count: 1; width: 100%; margin-top: 18px; }
  nav.main a { font-size: 22px; }
}

/* ======================================================= home slides */
.s-home main { position: relative; }
body.s-home { background: #000; }
.slide { position: relative; height: 100vh; height: 100svh; min-height: 540px; width: 100%; overflow: hidden; background: #000; }
.slide figure { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.slide figure::after, .category.c-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.38); }
.slide figcaption, .category.c-banner .titles { z-index: 2; }
/* hero: fixed background so the following sections scroll over the picture (jarallax) */
.slide.hero { background: transparent; }
.slide.hero figure.jarallax { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: -1; }
.slide .container { padding: 0 40px; }
.slide figcaption { position: absolute; left: 0; width: 100%; top: 47%; margin-top: 15px; transform: translateY(-50%); text-align: center; }
.slide.hero figcaption { top: 47%; }
.slide h1.image-title { font-weight: 600; font-size: 95px; line-height: 1.1; letter-spacing: 5px; text-transform: uppercase; color: var(--accent); text-align: center; }
.slide h1.image-title:hover { color: #fff; }
.slide:not(.hero) figcaption { top: 32.5%; transform: none; margin-top: 0; }
.slide:not(.hero) h1 { font-weight: 500; font-size: 65px; line-height: 1.1; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-align: center; }
.slide:not(.hero) h1:hover { color: var(--accent); }
.slide .image-description { width: 600px; max-width: 100%; margin: 30px auto 0; padding: 0; text-align: center; }
.slide .image-description p { font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: 2px; text-transform: uppercase; }
.slide .image-description a { color: #fff; }
.slide .image-description a:hover { color: var(--accent); }
#button-more { position: absolute; bottom: 0; left: 0; height: 30vh; width: 100%; z-index: 9999; cursor: s-resize; }
@media (max-width: 1100px) {
  .slide h1.image-title { font-size: 7vw; letter-spacing: 3px; }
  .slide:not(.hero) h1 { font-size: 5.5vw; }
}
@media (max-width: 720px) {
  .slide h1.image-title { font-size: 34px; letter-spacing: 2px; }
  .slide:not(.hero) h1 { font-size: 34px; letter-spacing: 2px; }
  .slide .image-description { padding-left: 0; text-align: center; margin-top: 22px; }
  .slide .image-description p { font-size: 14px; line-height: 24px; letter-spacing: 1.5px; }
  .slide.hero figure.jarallax { position: absolute; height: 100%; z-index: 0; }
}

/* ======================================================= category pages (banner + grid) */
.inner main { padding-top: 83px; }
.banner-page main { padding-top: 0; }
.category.c-banner { position: relative; height: 100vh; height: 100svh; min-height: 540px; background-size: cover; background-position: 50% 50%; margin: 0 0 100px; }
.category.c-banner .titles { position: absolute; left: 0; width: 100%; top: 45%; text-align: center; padding: 0 20px; }
.category.c-banner .title { font-weight: 500; font-size: 65px; line-height: 1.1; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(3, 317px); justify-content: center; column-gap: 84px; row-gap: 60px; padding: 0 40px 100px; }
.grid-item { display: block; width: 317px; }
.grid-item img { width: 317px; height: 236px; object-fit: cover; }
.grid-item .titles { display: block; color: #808080; font-size: 14px; }
.grid-item .title { font-weight: 500; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: #000; margin: 25px 0 3px; text-align: left; }
.grid-item .sub { font-size: 14px; color: #808080; letter-spacing: .5px; }
.grid-item:hover .title { color: #808080; }
@media (max-width: 1140px) { .grid { grid-template-columns: repeat(2, 317px); } }
@media (max-width: 780px) { .grid { grid-template-columns: minmax(0, 1fr); padding: 0 20px 60px; } .grid-item, .grid-item img { width: 100%; } .grid-item img { height: auto; aspect-ratio: 4/3; } .category.c-banner .title { font-size: 34px; letter-spacing: 2px; } .category.c-banner { margin-bottom: 50px; } }
.lead { max-width: 917px; margin: -30px auto 60px; font-weight: 300; font-size: 18px; line-height: 27px; letter-spacing: 1.3px; text-align: justify; }

/* ======================================================= detail pages (projects / about) */
.detail { padding: 30px 0 80px; }
.detail h1 { font-weight: 500; font-size: 26px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin-bottom: 50px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: -30px 0 50px; font-size: 14px; letter-spacing: .5px; color: #808080; }
.meta b { font-weight: 500; color: #000; margin-right: 6px; text-transform: uppercase; letter-spacing: 1.3px; font-size: 12px; }
.detail-body { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.detail-body figure { margin: 0 0 36px; }
.detail-body figure img { width: 100%; }
.detail-body figcaption { font-size: 14px; letter-spacing: .5px; color: #808080; margin-top: 10px; text-align: center; }
.detail-body .row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 36px; align-items: start; }
.detail-body .row.r-2-1 { grid-template-columns: 2fr 1fr; }
.detail-body .row.r-1-2 { grid-template-columns: 1fr 2fr; }
.detail-body .row figure { margin: 0; }
.text { max-width: 917px; margin: 0 auto 50px; font-weight: 300; font-size: 18px; line-height: 27px; letter-spacing: 1.3px; text-align: justify; }
.text p { margin-bottom: 36px; }
.text h3 { font-weight: 500; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; }
.pager { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #e6e6e6; padding-top: 24px; margin-top: 20px; font-weight: 500; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.pager a:hover { color: #808080; }
@media (max-width: 720px) { .detail-body { padding: 0 20px; } .detail-body .row, .detail-body .row.r-2-1, .detail-body .row.r-1-2 { grid-template-columns: 1fr; } }

/* art detail list */
.works { max-width: 1100px; margin: 0 auto; padding: 0 40px 60px; border-top: 1px solid #e6e6e6; }
.work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; padding-top: 60px; margin-bottom: 40px; scroll-margin-top: 100px; }
.work figure { margin: 0; }
.work h2 { font-weight: 500; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px; }
.work .cap { font-size: 14px; color: #808080; letter-spacing: .5px; margin-bottom: 20px; }
.work p { font-weight: 300; font-size: 18px; line-height: 27px; letter-spacing: 1.3px; text-align: justify; }
@media (max-width: 860px) { .work { grid-template-columns: 1fr; gap: 16px; } .works { padding: 0 20px 40px; } }

/* about: two 429px columns, 59px gap, centred (as julianschnabel.com/about) */
.about { display: grid; grid-template-columns: 429px 429px; column-gap: 59px; justify-content: center; }
.about img { width: 100%; margin: 5px 0 36px; }
.about p, .contact p { font-weight: 300; font-size: 18px; line-height: 27px; letter-spacing: 1.3px; margin: -3px 0 36px; text-align: justify; }
.about .links a { font-weight: 500; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; line-height: 27px; }
.about .links a:hover { color: #808080; }
.cv { display: grid; grid-template-columns: 429px 429px; column-gap: 59px; justify-content: center; margin-top: 40px; }
.cv h2, .contact h2 { font-weight: 500; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin: 36px 0 12px; }
.cv .col h2:first-child { margin-top: 0; }
.cv li { font-weight: 300; font-size: 15px; line-height: 22px; letter-spacing: .6px; padding: 7px 0; border-bottom: 1px solid #ececec; display: flex; justify-content: space-between; gap: 16px; }
.cv li span { color: #808080; white-space: nowrap; font-size: 13px; }
.cv li em { font-style: normal; color: #808080; }
.contact { max-width: 917px; margin: 60px auto 0; scroll-margin-top: 110px; }
.contact p { margin-bottom: 0; }
.contact a:hover, .about a:hover { color: #808080; }
@media (max-width: 1000px) { .about, .cv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .about, .cv { grid-template-columns: 1fr; } .about img { max-width: 360px; } }

/* ======================================================= footer */
.site-footer { border-top: 1px solid #e6e6e6; padding: 24px 0 30px; font-size: 13px; letter-spacing: .5px; color: #808080; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; }
.site-footer a:hover { color: #000; }