/* Generated by scripts/fetch_fonts.py — do not edit by hand. */
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-400-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-500-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/manrope-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/manrope-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/manrope-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/manrope-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/manrope-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/fonts/manrope-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(/static/fonts/vazirmatn-200-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(/static/fonts/vazirmatn-200-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(/static/fonts/vazirmatn-200-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/vazirmatn-300-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/vazirmatn-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/static/fonts/vazirmatn-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/vazirmatn-400-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/vazirmatn-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/vazirmatn-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/vazirmatn-500-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/vazirmatn-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/vazirmatn-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/vazirmatn-600-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/vazirmatn-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/vazirmatn-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/vazirmatn-700-arabic.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/vazirmatn-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Vazirmatn';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/vazirmatn-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
فونت رخ (Rokh) یک فونت تجاری/پولیه و روی هیچ CDN عمومیای در دسترس نیست.
اگه لایسنسش رو از fontiran.com خریدی، فایلهای وبفونت (woff2/woff) رو با همین اسمها
داخل پوشهی static/fonts/ کنار portfolio_app.py بذار تا خودکار فعال بشه.
این @font-face فقط وقتی رندر میشه که سرور واقعاً فایلها رو پیدا کنه (چک در Python) —
در غیر این صورت این بلوک و کلمهی Rokh از استک فونت کاملاً حذف میشن تا مرورگر هرگز
درخواست 404 برای فایلهای نبودنی نفرسته.
*/
:root{
/* ---- fonts ---- */
--font-fa:'Vazirmatn',sans-serif;
--font-en:'Manrope','Vazirmatn',sans-serif;
--font-mono:'IBM Plex Mono',monospace;
/* ---- color system (kept close to previous palette; refined for depth) ---- */
--color-bg:#0a0a0a;
--color-surface:#131313;
--color-surface-elevated:#1a1a1a;
--color-text:#f4f2ee;
--color-text-muted:#9a9894;
--color-text-faint:#666461;
--color-border:#272727;
--color-accent:#c9a468;
--color-accent-hover:#dab97e;
/* legacy aliases so existing rules keep working untouched */
--bg:var(--color-bg);
--bg-elev:var(--color-surface);
--line:var(--color-border);
--ink:var(--color-text);
--ink-dim:var(--color-text-muted);
--ink-faint:var(--color-text-faint);
--accent:var(--color-accent);
--r:1px;
/* ---- theme-dependent surfaces (dark defaults) ---- */
--nav-scrolled-bg:rgba(11,11,11,.86);
/* Nearly opaque on purpose: the panel hangs over the hero, and anything
translucent enough to read through makes the links unreadable. */
--nav-sub-bg:rgba(16,16,16,.97);
--menu-bg:rgba(10,10,10,.98);
--overlay-bg:rgba(8,8,8,.97);
--overlay-bg-soft:rgba(8,8,8,.8);
--ctrl-bg:rgba(10,10,10,.4);
--ctrl-bg-hover:rgba(10,10,10,.7);
--hero-scrim-mid:rgba(11,11,11,.22);
--hero-scrim-top:rgba(11,11,11,.4);
--progress-track:rgba(255,255,255,.22);
--logo-mono-filter:brightness(0) invert(1);
--rec-red:#e5484d;
/* tinted pill for the phone-only "start a project" shortcut in the header.
A pair of theme vars rather than color-mix(): the accent differs per theme
and color-mix has no fallback in the older Safari/Firefox builds this site
still gets traffic from. */
--cta-mobile-bg:rgba(201,164,104,.13);
--cta-mobile-border:rgba(201,164,104,.45);
/* ---- global film texture (see GLOBAL FILM TEXTURE section) ---- */
--grain-opacity:.58;
--grain-blend:overlay;
--grain-tile:150px;
--vignette:inset 0 0 220px 70px rgba(0,0,0,.5);
/* ---- layout ---- */
--container-width:1360px;
--container-pad:6vw;
--section-space-desktop:150px;
--section-space-mobile:88px;
--radius-sm:8px;
--radius-md:16px;
--shadow-soft:0 20px 50px -24px rgba(0,0,0,.6);
--transition-fast:150ms ease;
--transition-normal:300ms ease;
/* ---- central typography system ----
every size below has a floor at/above the project's readability minimums
(metadata ~12-13px, body copy 16px+, headings scale up from there).
nothing site-wide should hard-code a raw rem/px size outside this list. */
--text-2xs: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem); /* ~13-14px: metadata floor */
--text-xs: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem); /* kept as alias — see --text-2xs */
--text-sm: clamp(0.94rem, 0.9rem + 0.2vw, 1rem); /* ~15-16px: labels, nav */
--text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); /* ~16-18px: body copy */
--text-lg: clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem);
--text-xl: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
--heading-card: clamp(1.25rem, 1.1rem + 0.5vw, 1.85rem);
--heading-sm: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem);
--heading-md: clamp(2.2rem, 1.5rem + 2.5vw, 4rem);
--heading-lg: clamp(2.8rem, 1.8rem + 4vw, 6.5rem);
/* spec-named aliases for the same scale, so both naming schemes work */
--heading-section: var(--heading-md);
--heading-page: var(--heading-lg);
--heading-hero: var(--heading-lg);
--line-height-tight: 1.2;
--line-height-normal: 1.6;
--line-height-relaxed: 1.85;
}
/* ---------- LIGHT (DAY) MODE — cream / nude palette ---------- */
[data-theme="light"]{
--color-bg:#f4ede2;
--color-surface:#ede3d3;
--color-surface-elevated:#e7dbc8;
--color-text:#2b2520;
--color-text-muted:#6e6255;
--color-text-faint:#9a8b7a;
--color-border:#ddcfba;
--color-accent:#a0763a;
--color-accent-hover:#875f2c;
--nav-scrolled-bg:rgba(244,237,226,.88);
--nav-sub-bg:rgba(248,243,235,.98);
--menu-bg:rgba(244,237,226,.98);
--overlay-bg:rgba(240,232,219,.97);
--overlay-bg-soft:rgba(43,37,32,.45);
--ctrl-bg:rgba(244,237,226,.55);
--ctrl-bg-hover:rgba(244,237,226,.85);
--hero-scrim-mid:rgba(244,237,226,.18);
--hero-scrim-top:rgba(244,237,226,.3);
--progress-track:rgba(43,37,32,.22);
--logo-mono-filter:brightness(0);
--cta-mobile-bg:rgba(160,118,58,.13);
--cta-mobile-border:rgba(160,118,58,.42);
--shadow-soft:0 20px 50px -24px rgba(90,70,40,.28);
/* cream mode needs a much lighter hand: overlay blend blows out on a light
ground, so soft-light + a warm (not black) vignette. */
--grain-opacity:.3;
--grain-blend:soft-light;
--vignette:inset 0 0 240px 80px rgba(92,70,42,.16);
}
html{background:var(--color-bg);}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
background:var(--color-bg);
color:var(--color-text);
font-family:var(--font-fa), var(--font-en);
font-size:var(--text-base);
font-weight:400;
line-height:var(--line-height-relaxed);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
[dir="ltr"] body{ font-family:var(--font-en), var(--font-fa); }
/* ---------- GLOBAL FILM TEXTURE — grain + soft vignette ---------- */
/* Two fixed, non-interactive layers over the whole public site: an SVG
fractal-noise grain (::after, blended) and a soft edge vignette (::before).
z-index 900 sits above page content and the sticky nav (500) but below the
mobile menu (1200), lightbox (2000) and modals/toast (3000), so overlays
and dialogs stay clean. Intensity lives in the --grain-* / --vignette
tokens in :root (dark) and [data-theme="light"] — tune there, not here. */
body::before, body::after{
content:''; position:fixed; inset:0; pointer-events:none;
}
body::before{ z-index:900; box-shadow:var(--vignette); }
body::after{
/* 400, not 900 where the vignette sits: the grain has to stay BELOW the
video cards so their covers can opt out of it (see .card, z-index:401) —
excluding an element from a mix-blend-mode layer is only possible by
painting it above that layer. Cards can't simply go above 900 instead,
or they'd also clear the sticky nav (500) and ride over it on scroll.
The nav is the only component between 400 and 900, so the bar's own
pixels go ungrained; whatever shows through its translucent background
is still textured. */
z-index:400;
opacity:var(--grain-opacity);
mix-blend-mode:var(--grain-blend);
background-image:url("data:image/svg+xml;utf8,");
background-size:var(--grain-tile) var(--grain-tile);
}
/* the admin panel is a work surface, not a film frame — it opts out */
body:has(#adminRoot.open)::before, body:has(#adminRoot.open)::after{ display:none; }
@media print{ body::before, body::after{ display:none; } }
/* ---- typography utility classes ---- */
.eyebrow{
font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.18em; text-transform:uppercase;
color:var(--color-accent); display:block;
}
/* Persian text can't take the Latin eyebrow treatment: IBM Plex Mono has no
Persian glyphs (so it silently falls back mid-run), letter-spacing forces
apart letters that are supposed to stay joined inside a word, and
uppercase is a no-op. Same size and same colour — only the face, tracking
and weight change, so the label still reads as an eyebrow. */
[dir="rtl"] .eyebrow{
font-family:var(--font-fa), sans-serif; letter-spacing:0; text-transform:none; font-weight:300;
}
::selection{background:var(--accent); color:var(--bg);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
img{max-width:100%; display:block;}
:focus-visible{outline:1px solid var(--accent); outline-offset:4px;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:.12em;}
/* corner frame — quiet viewfinder motif, the one signature device */
.frame{position:relative;}
.frame::before, .frame::after, .frame .fc1, .frame .fc2{
content:''; position:absolute; width:18px; height:18px; border-color:var(--accent); opacity:.55; pointer-events:none;
}
.frame::before{top:18px; inset-inline-start:18px; border-top:1px solid; border-inline-start:1px solid;}
.frame::after{top:18px; inset-inline-end:18px; border-top:1px solid; border-inline-end:1px solid;}
.frame .fc1{bottom:18px; inset-inline-start:18px; border-bottom:1px solid; border-inline-start:1px solid;}
.frame .fc2{bottom:18px; inset-inline-end:18px; border-bottom:1px solid; border-inline-end:1px solid;}
/* ---------- NAV ---------- */
header.site-nav{
position:fixed; top:0; left:0; right:0; z-index:500;
display:flex; align-items:center; justify-content:space-between;
padding-block:26px;
padding-inline:max(var(--container-pad), calc((100% - var(--container-width)) / 2));
transition:padding .4s, background .4s;
}
header.site-nav.scrolled{padding-block:16px; background:var(--nav-scrolled-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:10px; font-weight:500; font-size:var(--text-base); letter-spacing:.01em; flex-shrink:0; color:var(--ink);}
.brand img{height:var(--logo-h-desktop, 34px); width:auto; display:block; transition:height var(--transition-normal);}
header.site-nav.scrolled .brand img{height:calc(var(--logo-h-desktop, 34px) * .82);}
@media(max-width:700px){
.brand img{height:var(--logo-h-mobile, 28px) !important;}
/* The bar genuinely did not fit: logo + brand name (187px) plus the right
hand controls (255px) needed 442px of a 330px row, which pushed the
control block off-screen (measured left:-89px) and slid it under the
logo. The logo already carries the identity here, and the socials are
repeated in the mobile menu and the contact section, so both step out
and the row drops to ~189px with room to spare. */
/* !important because renderBrand() writes display inline on this element
(it honours the admin's "show brand name" toggle), and an inline style
would otherwise win — same reason the logo height above needs it. */
.brand #navBrandText{display:none !important;}
.nav-right #navSocial{display:none;}
.nav-right{gap:14px;}
}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{
font-family:var(--font-fa), var(--font-en); font-size:var(--text-sm); font-weight:400;
letter-spacing:.01em; color:var(--ink-dim); position:relative; padding-bottom:4px; white-space:nowrap;
}
[dir="ltr"] nav.links a{ font-family:var(--font-en), var(--font-fa); }
nav.links a::after{content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px; background:var(--accent); transition:width .3s;}
nav.links a:hover::after, nav.links a.active::after{width:100%;}
nav.links a:hover, nav.links a.active{color:var(--ink);}
nav.links a:focus-visible{outline:1px solid var(--accent); outline-offset:5px; border-radius:2px;}
/* ---------- NAV DROPDOWN (service pages) ----------
The header is position:fixed with no clipping, so the panel can simply
hang off the trigger. It opens on hover and on :focus-within, so keyboard
users reach it by tabbing rather than only with a pointer. The gap between
the trigger and the panel is bridged by padding on the wrapper, otherwise
the panel closes while the pointer crosses the empty space. */
.nav-item{position:relative; display:flex; align-items:center;}
.nav-item.has-sub{padding-bottom:14px; margin-bottom:-14px;}
.nav-trigger{display:inline-flex; align-items:center; gap:6px;}
.nav-trigger .chev{
width:9px; height:9px; border-inline-end:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px); transition:transform .3s; flex-shrink:0; opacity:.8;
}
.nav-item.has-sub:hover .nav-trigger .chev,
.nav-item.has-sub:focus-within .nav-trigger .chev{transform:rotate(-135deg) translate(-2px,-2px);}
.nav-sub{
position:absolute; top:100%; inset-inline-start:50%; transform:translateX(50%) translateY(8px);
min-width:268px; padding:10px; border-radius:16px;
background:var(--nav-sub-bg, rgba(16,16,16,.97)); border:1px solid var(--line);
box-shadow:0 24px 50px -22px rgba(0,0,0,.9);
backdrop-filter:blur(14px);
display:flex; flex-direction:column; gap:2px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .25s, transform .25s, visibility .25s;
}
[dir="ltr"] .nav-sub{transform:translateX(-50%) translateY(8px);}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub{
opacity:1; visibility:visible; pointer-events:auto; transform:translateX(50%) translateY(0);
}
[dir="ltr"] .nav-item.has-sub:hover .nav-sub,
[dir="ltr"] .nav-item.has-sub:focus-within .nav-sub{transform:translateX(-50%) translateY(0);}
nav.links .nav-sub a{
display:flex; align-items:center; gap:11px;
padding:11px 14px; border-radius:10px; white-space:normal; line-height:1.6;
color:var(--ink-dim); transition:background .2s, color .2s; padding-bottom:11px;
}
nav.links .nav-sub a::after{display:none;}
nav.links .nav-sub a:hover{background:var(--ctrl-bg-hover, rgba(255,255,255,.05)); color:var(--accent);}
.nav-sub .ico, .mm-sub .ico{
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
color:var(--accent); transition:border-color .2s, background .2s;
}
.nav-sub .ico svg, .mm-sub .ico svg{width:17px; height:17px;}
.nav-sub a:hover .ico{border-color:var(--accent); background:rgba(201,164,104,.1);}
.nav-sub .all{
margin-top:4px; padding-top:11px; border-top:1px solid var(--line);
font-size:var(--text-2xs); color:var(--ink-faint) !important;
}
.nav-sub .all:hover{color:var(--accent) !important;}
/* Mobile menu: no hover, so the sub-links are simply listed under the
parent as an indented group.
Every rule here is qualified with `.mobile-menu nav` on purpose. Plain
`.mm-sub a` loses to `.mobile-menu nav a` on specificity, so the sub-links
were inheriting the 1.6rem/500 of a top-level item — which made them the
same weight as their own parent and ran the longest title off the edge of
the screen. */
.mobile-menu nav .mm-sub{
display:flex; flex-direction:column; gap:2px; margin:8px auto 12px;
width:min(304px, 80vw);
padding-inline-start:14px; border-inline-start:1px solid var(--line);
}
.mobile-menu nav .mm-sub a{
font-size:1rem; font-weight:300; letter-spacing:0; color:var(--ink-dim);
display:flex; align-items:center; gap:11px; padding:8px 0; min-width:0;
}
.mobile-menu nav .mm-sub a span{
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-menu nav .mm-sub a.active{color:var(--accent);}
.mm-sub .ico{width:29px; height:29px; border-radius:8px;}
.mm-sub .ico svg{width:15px; height:15px;}
.nav-right{display:flex; align-items:center; gap:20px;}
.nav-cta{
background:var(--accent); color:var(--bg); font-family:var(--font-fa), var(--font-en); font-size:var(--text-sm); letter-spacing:.01em;
padding:10px 20px; border-radius:999px; font-weight:600; white-space:nowrap; transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(201,164,104,.6);}
/* ---- phone-only header shortcut to the enquiry form ----
Most of the traffic is mobile, where the desktop .nav-cta is hidden and the
only route to the form is two taps through the burger menu. This is that
route in one tap, sitting in the header where the eye already lands.
Styled as a quiet outlined pill rather than a second solid button so it
doesn't compete with the logo, and carries the same REC dot as the hero's
camera overlay — the shortcut reads as part of the film language, not as a
bolted-on ad. Latin text in both languages by design (set from the admin). */
.nav-cta-mobile{
display:none; align-items:center; justify-content:center; gap:7px; flex:none;
/* Slightly tighter on the dot side than the text side. The dot carries less
visual weight than the cap-height letters beside it, so equal padding
reads as if the label is pushed right; 10/14 puts the *label* on the
pill's optical centre. direction:ltr makes left/right stable in RTL too. */
padding:6px 14px 6px 10px; border-radius:999px;
border:1px solid var(--cta-mobile-border); background:var(--cta-mobile-bg);
color:var(--accent); font-family:var(--font-en), sans-serif;
font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
white-space:nowrap; direction:ltr;
transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.nav-cta-mobile:focus-visible{outline:1px solid var(--accent); outline-offset:3px;}
.nav-cta-mobile .ncm-dot{
width:6px; height:6px; border-radius:50%; background:var(--rec-red); flex:none;
animation:ncmBlink 1.9s steps(1,end) infinite;
}
@keyframes ncmBlink{ 0%,55%{opacity:1;} 56%,100%{opacity:.25;} }
@media (prefers-reduced-motion:reduce){ .nav-cta-mobile .ncm-dot{animation:none;} }
/* (blanking the admin label hides the pill via an inline display:none from
renderStatic — :empty can't be used here, the REC dot is always a child) */
/* Shown exactly where the desktop CTA drops out (see the max-width:1080px
block near the end of the stylesheet, which hides .nav-right .nav-cta).
Centred on the HEADER, not inside .nav-right: as a flex item it sat wherever
the controls around it left room, which put it visibly right of centre. It
is taken out of flow and pinned to the bar's midpoint instead, so it reads
as the one deliberate thing in the middle of the header. The header is
position:fixed, which is the containing block; top:50% keeps it centred
through the .scrolled padding change without a second rule. */
@media(max-width:1080px){
.nav-cta-mobile{
display:inline-flex;
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
}
.nav-cta-mobile:active{transform:translate(-50%, -50%) scale(.96);}
}
/* Tightening the header row to make space for the pill.
These live here, AFTER the base `.nav-right{gap:20px}` declaration, on
purpose: the identical override up in the max-width:700px block sits
*before* that base rule, so at equal specificity the base won and the
narrow-screen gap was never actually applied. Measured on a 320px viewport
the row needed 355px and pushed the burger to left:-16px — off-screen. */
@media(max-width:700px){ .nav-right{gap:14px;} }
/* On a 320px phone the row is genuinely tight: trim the pill, the gaps and
the page gutter rather than let anything slide off the edge. Measured
total after this: ~315px of 320. */
@media(max-width:400px){
.nav-cta-mobile{padding:5px 10px; gap:6px; font-size:10px; letter-spacing:.1em;}
.nav-right{gap:10px;}
header.site-nav{padding-inline:14px;}
}
.social-row{display:flex; align-items:center; gap:18px;}
.social-row a{color:var(--ink-faint); display:flex; transition:color .25s, transform .25s;}
.social-row a:hover{color:var(--accent); transform:translateY(-2px);}
.social-row svg{width:16px; height:16px;}
.lang-toggle{
color:var(--ink-faint); font-family:'IBM Plex Mono'; font-size:var(--text-2xs); letter-spacing:.1em; display:flex; gap:8px;
}
/* (.theme-toggle removed with the light/dark switch — see SITE_THEME) */
.lang-toggle span{transition:color .2s;}
.lang-toggle span.active{color:var(--accent);}
.burger{display:none; flex-direction:column; gap:5px; padding:6px; z-index:1201; position:relative;}
.burger span{width:20px; height:1px; background:var(--ink); transition:transform .3s, opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* ---------- MOBILE FULLSCREEN MENU ---------- */
.mobile-menu{
position:fixed; inset:0; z-index:1200; background:var(--menu-bg); backdrop-filter:blur(14px);
display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px;
opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .4s ease, transform .4s ease;
}
.mobile-menu.open{opacity:1; pointer-events:auto; transform:translateY(0);}
.mobile-menu nav{display:flex; flex-direction:column; align-items:center; gap:22px;}
.mobile-menu nav a{font-size:1.6rem; font-weight:500; color:var(--ink); letter-spacing:.01em;}
.mobile-menu nav a.active{color:var(--accent);}
.mobile-menu .nav-cta{margin-top:10px; padding:14px 32px; font-size:var(--text-2xs);}
.mobile-menu .mm-info{margin-top:30px; text-align:center; font-family:'IBM Plex Mono'; font-size:var(--text-2xs); color:var(--ink-dim); display:flex; flex-direction:column; gap:8px;}
.mobile-menu .social-row{justify-content:center; margin-top:16px;}
@media(min-width:1081px){ .mobile-menu{display:none;} }
/* ---------- HERO ---------- */
.hero{
position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
padding:0 6vw; margin:0; overflow:hidden;
}
/* ---- slides (crossfade + optional Ken Burns) ---- */
/* NOTE: this layer intentionally uses z-index:0 (not negative). A negative
z-index here previously let some ancestor's background paint over the
slide images depending on stacking context, causing an intermittent
all-black Hero. Positive, explicit stacking below fixes it for good. */
.hero-slides{position:absolute; top:0; bottom:0; inset-inline-start:0; inset-inline-end:0; z-index:0; overflow:hidden; background:var(--bg);}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; z-index:0;}
.hero-slide.active{opacity:1; z-index:1;}
.hero-slide picture{display:block; width:100%; height:100%;}
.hero-slide img, .hero-slide video{
width:100%; height:100%; object-fit:cover;
filter:grayscale(.35) contrast(1.03) brightness(.86);
transform:scale(1.0); will-change:transform; background:var(--bg-elev);
}
/* Ken Burns zoom is driven by .kb-active (not .active) so JS can freeze it
mid-zoom via .kb-pause (animation-play-state:paused) on the outgoing
slide instead of yanking the class that runs the animation — removing
that class outright snaps transform back to scale(1) instantly, which
shows as a hard jump while the slide is still fading out. Pausing just
holds whatever zoom it had reached, which reads as seamless. */
.hero-slide.kb.kb-active img, .hero-slide.kb.kb-active video{ animation:heroKenBurns linear forwards; animation-duration:var(--slide-duration, 7000ms); }
.hero-slide.kb-pause img, .hero-slide.kb-pause video{ animation-play-state:paused; }
@media (prefers-reduced-motion:no-preference){
@keyframes heroKenBurns{ from{transform:scale(1.0);} to{transform:scale(1.09);} }
}
@media (prefers-reduced-motion:reduce){
.hero-slide{transition:opacity .01s linear;}
.hero-slide.kb.kb-active img, .hero-slide.kb.kb-active video{animation:none;}
}
.hero-slides::after{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, var(--bg) 0%, var(--hero-scrim-mid) 38%, var(--hero-scrim-top) 100%);}
/* ---- dot pattern + grain overlays (subtle cinematic texture) ---- */
.hero-dot-pattern{
position:absolute; inset:0; z-index:1; pointer-events:none;
background-image:radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.2px);
background-size:7px 7px; opacity:.22; mix-blend-mode:soft-light;
mask-image:linear-gradient(115deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
-webkit-mask-image:linear-gradient(115deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
}
.hero-grain{
position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(max-width:640px){ .hero-grain{display:none;} }
/* ---- camera viewfinder overlay (REC) ---- */
.hero-cam-overlay{position:absolute; inset:0; z-index:1; pointer-events:none;}
.cam-rec{
position:absolute; top:104px; inset-inline-start:6vw;
display:flex; align-items:center; gap:9px;
font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.22em; color:var(--ink-dim);
}
.cam-rec-dot{
width:9px; height:9px; border-radius:50%; background:var(--rec-red);
box-shadow:0 0 8px rgba(229,72,77,.5);
animation:camBlink 2.4s ease-in-out infinite;
}
.cam-meta{
position:absolute; top:104px; inset-inline-end:6vw;
font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.2em; color:var(--ink-faint);
}
@keyframes camBlink{ 0%,100%{opacity:.25;} 50%{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .cam-rec-dot{animation:none; opacity:.8;} }
@media(max-width:760px){
.cam-rec{top:86px; font-size:var(--text-2xs);}
.cam-meta{display:none;}
}
/* ---- prev/next + progress ---- */
.hero-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:46px; height:46px; min-width:44px; min-height:44px; border-radius:50%;
border:1px solid var(--line); background:var(--ctrl-bg); color:var(--ink-dim);
font-size:1.4rem; font-weight:300; display:flex; align-items:center; justify-content:center;
transition:border-color .25s, color .25s, background .25s;
}
.hero-arrow:hover{border-color:var(--accent); color:var(--accent); background:var(--ctrl-bg-hover);}
.hero-prev{inset-inline-start:4vw;}
.hero-next{inset-inline-end:4vw;}
/* Slide indicator — a timecode ruler rather than a progress bar: short thin
strokes on a shared baseline, the active one simply grows taller and turns
gold. Deliberately no fill animation; the only motion is the handover
between two strokes, which keeps the hero quiet while a slide plays.
Each stroke is a 1px centred inside a transparent
34px hit box, so the touch target stays finger-sized without the mark
itself getting any heavier. */
.hero-progress{position:absolute; bottom:46px; inset-inline-end:6vw; z-index:3; display:flex; align-items:flex-end; gap:9px;}
.hero-progress-seg{
width:14px; height:34px; background:none; cursor:pointer;
display:flex; align-items:flex-end; justify-content:center;
}
.hero-progress-seg .fill{
display:block; width:1px; height:6px; background:var(--ink-faint); opacity:.25;
transition:height .52s cubic-bezier(.16,.84,.28,1), opacity .52s ease, background-color .52s ease;
}
.hero-progress-seg.done .fill{opacity:.45;}
.hero-progress-seg.active .fill{height:14px; background:var(--accent); opacity:1;}
.hero-progress-seg:hover .fill{opacity:.7;}
.hero-progress-seg.active:hover .fill{opacity:1;}
@media (prefers-reduced-motion:reduce){ .hero-progress-seg .fill{transition:none;} }
@media(max-width:760px){ .hero-arrow{display:none !important;} .hero-progress{inset-inline-end:6vw; inset-inline-start:6vw; justify-content:center;} }
/* Vertical nudge for the whole hero copy block, set from the admin panel
(negative = higher up). A transform rather than a margin on purpose: the
hero is a centred flex column, so shifting the box would also move the
centring origin and fight itself — translateY moves only the paint. */
/* --hero-offset-y-eff is written per-element by clampHeroOffset() once layout
is measurable; the raw admin value stays as the fallback so the block is
already in the right place on the very first paint, before any JS runs. */
.hero-content{position:relative; z-index:2; max-width:640px; transform:translateY(var(--hero-offset-y-eff, var(--hero-offset-y, 0px)));}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; opacity:0; animation:rise 1s .65s forwards;}
/* ---- the hero copy block is a fixed skeleton ----
Headline and the Latin strapline under it are the same on every slide and
must not move by a pixel when the slide changes; only the per-slide caption
at the bottom swaps. Everything above that caption therefore has a RESERVED
height rather than an intrinsic one:
.hero-title-slot two lines, headline absolutely positioned inside it
.hero-ensub one line, never wraps
.hero-lede-slot one line, caption absolutely positioned inside it
That is also what fixes the "headline goes three lines and rides up under
the header" report: with the height fixed the centred flex column can't
re-centre itself around a taller block, so the copy stays put whatever the
browser does with the line breaking. */
/* Two lines' worth of height, computed from the font size and line-height
rather than measured — so it is identical before and after the webfont
lands, and identical across engines. text-wrap:balance is deliberately NOT
used any more: browsers without it were breaking the same headline into
three lines while browsers with it made two, which is exactly the reported
bug. The headline is absolutely positioned inside (same idiom as
.hero-lede-slot) rather than clipped with overflow:hidden — clipping would
cut Persian descenders, which overflow the line box at these line-heights. */
/* min-height, not height. The reserved two lines are what keep the block
from shifting as slides change — but they were a hard ceiling too, and the
headline is absolutely positioned, so a half that needs a second line
simply spilled out of the slot and landed on top of the strapline below.
Persian fits two lines exactly, which is why it was never caught; the
English copy takes three ("I don't capture moments;" wraps at this size),
and so would any longer Persian headline typed into the admin.
As a floor the guarantee still holds — the slot never gets shorter than
two lines, and the headline is identical on every slide, so nothing moves
when the carousel advances. It only grows on a language switch. */
.hero-title-slot{
position:relative;
min-height:calc(var(--hero-title-size, clamp(2.1rem, 1.5rem + 2.6vw, 4.2rem)) * var(--hero-title-lh, 1.25) * 2);
}
.hero h1{
/* Deliberately smaller than --heading-lg (the section-heading scale): the
hero reads as a quiet opening line rather than a billboard, so it gets
its own ramp — ~34px on a phone, ~60px on a wide desktop, against the
45/85px it used to run at. --hero-title-size (admin) overrides the ramp. */
/* In flow, so the slot above can grow to fit it. Kept out of `absolute`
for that reason alone; nothing else depended on it — clampHeroOffset
measures .hero-content, which now reports the true height. */
position:relative; width:100%;
font-weight:600;
font-size:var(--hero-title-size, clamp(2.1rem, 1.5rem + 2.6vw, 4.2rem));
line-height:var(--hero-title-lh, 1.25); letter-spacing:-.01em;
margin:0; opacity:0; animation:rise 1s .3s forwards;
}
[dir="ltr"] .hero h1{ font-family:var(--font-en), var(--font-fa); letter-spacing:-.02em; }
/* Each half on its own line at every width, not just on a phone. The default
headline is written as two clauses, so this is the break the copy asks for
— and pinning it here is what makes the reserved height above exact. */
.hero h1 .ht-a, .hero h1 .accent-word{display:block;}
.hero h1 .accent-word{color:var(--accent); font-weight:600;}
/* ---- Latin strapline (one line, identical on every slide) ----
Keeps its Latin face and tracking in both languages, like .section-sub:
it is an English line by intent, not a translated one. The leading rule is
a ::before so the markup stays a single text node, and the flex row inherits
the page direction — in RTL the rule sits to the right of the text, where
the line starts. */
.hero-ensub{
display:flex; align-items:center; gap:12px;
margin-top:var(--hero-ensub-gap, 16px);
font-family:var(--font-en), sans-serif;
font-size:var(--hero-ensub-size, var(--text-2xs));
font-weight:400; letter-spacing:.2em; text-transform:uppercase;
/* --ink-dim, not --ink-faint: this line sits over the slide photo, and a
bright frame (a daylight sky) wiped the faint tone out completely on a
phone. Hierarchy against the caption below is carried by the caps and the
tracking instead of by tone. */
color:var(--ink-dim); line-height:1.5;
opacity:0; animation:rise 1s .45s forwards;
}
.hero-ensub span{
/* isolate, not direction:ltr on the row — the row must keep the page's
direction so the block still starts on the correct side in RTL */
direction:ltr; unicode-bidi:isolate;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.hero-ensub::before{content:''; flex:none; width:26px; height:1px; background:var(--accent); opacity:.85;}
/* unset in the admin: the whole row (and its gap) disappears cleanly */
.hero-ensub:empty{display:none;}
/* Slide caption (location / project name, set per slide in the admin). Not a
tagline — it names what is actually on screen, so it's typeset small and quiet.
The slot holds a constant one-line height and the caption is absolutely
positioned inside it. The hero is a centred flex column, so its contents are
laid out around the block's total height — a caption that collapsed to zero
on captionless slides changed that height and visibly shifted the headline
on every slide change. With the height reserved, the headline is pinned and
only the caption itself animates in and out.
All three live inside .hero-content, so the dashboard's vertical offset moves
the headline, the strapline and the caption together as one unit. */
.hero-lede-slot{
position:relative;
margin-top:var(--hero-lede-gap, 14px);
height:calc(var(--hero-lede-size, var(--text-base)) * var(--line-height-relaxed));
}
.hero p.lede{
position:absolute; top:0; inset-inline-start:0; margin:0;
max-width:60ch; color:var(--ink-dim);
font-size:var(--hero-lede-size, var(--text-base)); font-weight:300;
line-height:var(--line-height-relaxed);
/* rise + de-blur, so the caption resolves into focus as the slide settles
rather than just appearing. Only opacity/transform/filter animate — none
of them affect layout, so the pinned block above cannot be disturbed. */
opacity:0; transform:translateY(9px); filter:blur(5px);
transition:opacity .55s ease, transform .6s cubic-bezier(.16,.84,.28,1), filter .55s ease;
}
.hero p.lede.on{opacity:1; transform:translateY(0); filter:blur(0);}
@media (prefers-reduced-motion:reduce){
.hero p.lede{transition:none; transform:none; filter:none;}
}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ .hero h1, .hero p.lede, .hero .hero-ensub, .hero .eyebrow, .hero-ctas{animation:none; opacity:1;} }
/* ---- hero on a phone ----
Both CTAs are dropped — the sticky nav already carries the same "start a
project" call (and now a one-tap shortcut to it), so repeating it here only
crowded the frame. The two-line headline pin is no longer part of this
block: it applies at every width now. */
@media(max-width:700px){
.hero-title-slot{
min-height:calc(var(--hero-title-size-mobile, clamp(1.5rem, 6vw, 2rem)) * var(--hero-title-lh-mobile, 1.35) * 2);
}
.hero h1{
font-size:var(--hero-title-size-mobile, clamp(1.5rem, 6vw, 2rem));
line-height:var(--hero-title-lh-mobile, 1.35);
}
.hero-ensub{
margin-top:var(--hero-ensub-gap-mobile, 13px);
font-size:var(--hero-ensub-size-mobile, var(--text-2xs));
letter-spacing:.15em; gap:9px;
}
.hero-ensub::before{width:18px;}
.hero-lede-slot{
margin-top:var(--hero-lede-gap-mobile, 11px);
height:calc(var(--hero-lede-size-mobile, var(--text-base)) * var(--line-height-relaxed));
}
.hero p.lede{font-size:var(--hero-lede-size-mobile, var(--text-base));}
.hero-ctas{display:none;}
.hero-content{transform:translateY(var(--hero-offset-y-eff, var(--hero-offset-y-mobile, 0px)));}
}
/* The strapline is a one-liner by contract, so it ellipsises rather than
wraps when a long string meets a narrow screen. Trimming the tracking and
the size here is what keeps the default copy inside a 320px phone instead
of landing on that fallback. */
@media(max-width:400px){
.hero-ensub{font-size:var(--hero-ensub-size-mobile, 11px); letter-spacing:.08em; gap:7px;}
.hero-ensub::before{width:14px;}
}
/* ---------- SECTION GENERIC ---------- */
section{
padding-block:var(--section-space-desktop);
padding-inline:max(var(--container-pad), calc((100% - var(--container-width)) / 2));
position:relative;
}
.section-head{margin-bottom:80px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-weight:600; font-size:var(--heading-md); line-height:var(--line-height-tight); letter-spacing:-.005em;}
[dir="ltr"] .section-head h2{ font-family:var(--font-en), var(--font-fa); }
.section-head .row{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px;}
/* optional thin line under a section heading (admin-editable). Unlike
.eyebrow / .row-label there is deliberately NO [dir="rtl"] reset of the
Latin face and tracking here: this line is meant to carry a short English
strapline underneath the Persian heading, so it keeps the Latin styling in
both languages. :empty keeps the spacing untouched when the field is unset. */
.section-head .section-sub{
display:block; margin-top:14px; font-family:var(--font-en), sans-serif;
font-size:var(--text-2xs); font-weight:400; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-faint); line-height:1.6;
}
.section-head .section-sub:empty{display:none;}
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
/* ---------- ABOUT ---------- */
/* editorial two-column: the portrait column is sticky so it stays in frame
while a long bio scrolls beside it (align-items:start is what lets the
sticky child actually travel — with `center` it can't move) */
.about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start;}
/* matches the 1080px breakpoint below, where the grid collapses to one
column and a sticky portrait would just pin awkwardly above the text */
@media(min-width:1081px){
.about-portrait-col{position:sticky; top:96px;}
}
.about-portrait{
aspect-ratio:4/5; overflow:hidden; background:var(--bg-elev); border-radius:var(--radius-md);
border:1px solid var(--line);
}
.about-portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25) contrast(1.02);}
/* scrim so the caption stays legible over any portrait */
.about-portrait::after{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.12) 38%, transparent 60%);
}
/* Physical bottom-LEFT on purpose (not inset-inline-start): the name is set
in Latin script and reads left-to-right, so it is pinned to the same
corner in both the RTL and LTR versions of the site. */
.about-cap{
position:absolute; z-index:2; bottom:0; left:0; padding:22px 24px;
direction:ltr; text-align:left;
}
.about-cap-name{
font-family:var(--font-en), sans-serif; font-size:var(--text-xl); font-weight:600;
color:var(--ink); letter-spacing:-.01em; line-height:1.2;
}
.about-cap-role{
font-family:'IBM Plex Mono', monospace; font-size:var(--text-2xs); color:var(--accent);
letter-spacing:.16em; text-transform:uppercase; margin-top:7px;
}
/* optional stat strip under the portrait — hidden entirely when unset.
No boxed grid: just a hairline that fades out at both ends, hairline
dividers between figures, and the numbers carrying a soft warm bloom, so
it reads like a title card rather than a table. */
.about-stats{
position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(74px,1fr));
margin-top:26px; padding-top:24px;
}
.about-stats:empty{display:none;}
.about-stats::before{
content:''; position:absolute; top:0; inset-inline:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb,201,164,104),.42), transparent);
}
.about-stat{position:relative; text-align:center; padding:2px 8px;}
/* divider between figures, faded at both ends so it never reads as a table rule */
.about-stat + .about-stat::before{
content:''; position:absolute; inset-block:12%; inset-inline-start:0; width:1px;
background:linear-gradient(180deg, transparent, var(--line), transparent);
}
.about-stat b{
display:block; font-family:'IBM Plex Mono', monospace; font-weight:500;
font-size:clamp(1.3rem, 2.1vw, 1.7rem); line-height:1.1; color:var(--accent);
letter-spacing:-.02em; font-variant-numeric:tabular-nums;
text-shadow:0 0 24px rgba(var(--accent-rgb,201,164,104),.3);
}
.about-stat span{
display:block; margin-top:9px; font-size:var(--text-2xs); color:var(--ink-faint);
letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
}
/* each figure lifts in on reveal, one after the next */
.about-stat{opacity:0; transform:translateY(12px);}
.about-portrait-col.in .about-stat{
animation:aboutStatIn .7s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay:calc(var(--si, 0) * 110ms + 220ms);
}
@keyframes aboutStatIn{ to{ opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){
.about-stat{opacity:1; transform:none;}
.about-portrait-col.in .about-stat{animation:none;}
}
.about-copy .eyebrow{margin-bottom:16px; display:block;}
/* one step down from --heading-md: at full width that token renders ~59px,
which made this heading louder than the site's own section headlines */
/* Every type size in this section is a var with the previous hard-coded value
as its fallback, so the admin panel can override any of them (Info tab →
«اندازه متنهای بخش درباره من») without the section falling apart when the
fields are left empty. */
.about-copy h2{font-size:var(--about-heading-size, var(--heading-sm)); font-weight:600; line-height:var(--line-height-tight); margin-bottom:24px;}
[dir="ltr"] .about-copy h2{ font-family:var(--font-en), var(--font-fa); }
.about-bio p{color:var(--ink-dim); margin-bottom:17px; font-size:var(--about-bio-size, var(--text-base)); line-height:var(--line-height-relaxed); max-width:64ch; font-weight:400;}
.about-bio p:last-child{margin-bottom:0;}
/* the opening paragraph leads by tone, not bulk: same size as the body,
just brighter and a touch heavier */
.about-bio p:first-child{color:var(--ink); font-weight:500; line-height:1.95;}
.about-bio p b, .about-bio p strong{color:var(--accent); font-weight:600;}
/* Secondary copy under the bio: its own admin field, one step smaller and
dimmer than the body so it reads as a footnote / extra detail rather than
as another bio paragraph. It sits INSIDE .about-bio-clip on purpose, so the
"ادامهی متن" expander measures and reveals it together with the bio instead
of leaving it stranded below the collapsed block. */
.about-note{margin-top:26px; padding-top:20px; border-top:1px solid var(--line);}
.about-note:empty{display:none;}
.about-note p{
color:var(--ink-faint); font-size:var(--about-note-size, var(--text-sm));
line-height:var(--line-height-normal); max-width:64ch; font-weight:400;
margin-bottom:12px;
}
.about-note p:last-child{margin-bottom:0;}
.about-note p b, .about-note p strong{color:var(--ink-dim); font-weight:600;}
/* ---- "ادامهی متن" expander ----
max-height is animated to a measured pixel value (set from JS) rather than
a guessed constant, so the reveal eases all the way open no matter how
long the bio is. The button only appears when the text actually overflows. */
.about-bio-wrap{position:relative;}
.about-bio-clip{overflow:hidden; transition:max-height .85s cubic-bezier(.22,.61,.36,1);}
.about-bio-wrap:not(.open) .about-bio-clip{max-height:var(--about-clamp, 300px);}
.about-bio-wrap.open .about-bio-clip{max-height:var(--about-full, 4000px);}
.about-bio-wrap:not(.clamped) .about-bio-clip{max-height:none;}
.about-bio-fade{
position:absolute; inset-inline:0; bottom:46px; height:120px; pointer-events:none;
background:linear-gradient(to top, var(--bg), rgba(10,10,10,.7) 48%, transparent);
opacity:0; transition:opacity .5s ease;
}
.about-bio-wrap.clamped:not(.open) .about-bio-fade{opacity:1;}
.about-more{
margin-top:18px; display:inline-flex; align-items:center; gap:11px;
background:none; border:0; cursor:pointer; padding:10px 0;
font-family:var(--font-fa); font-size:var(--text-sm); color:var(--accent);
transition:color var(--transition-normal);
}
/* an author `display` beats the UA stylesheet's [hidden]{display:none}, so
without this the button stays on screen for short bios that never clamp */
.about-more[hidden]{display:none;}
.about-more:hover{color:var(--color-accent-hover, #dab97e);}
.about-more .ln{width:34px; height:1px; background:currentColor; opacity:.5;}
.about-more .chev{font-family:'IBM Plex Mono', monospace; transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.about-bio-wrap.open .about-more .chev{transform:rotate(180deg);}
@media(prefers-reduced-motion:reduce){
.about-bio-clip{transition:none;}
.about-bio-fade{transition:none;}
.about-more .chev{transition:none;}
}
.resume-block{margin-top:44px;}
.resume-label{display:block; font-size:var(--about-resume-label-size, var(--text-2xs)); color:var(--ink-faint); letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px;}
/* Persian can't take the mono face or the tracking — same reasoning as
[dir="rtl"] .eyebrow further up. */
[dir="rtl"] .resume-label, [dir="rtl"] .resume-label.mono{
font-family:var(--font-fa), sans-serif; letter-spacing:0; text-transform:none; font-weight:300;
}
.resume-list{position:relative; padding-inline-start:26px; border-inline-start:1px solid var(--line);}
.resume-item{position:relative; padding:0 0 30px;}
.resume-item:last-child{padding-bottom:0;}
.resume-item::before{
content:''; position:absolute; top:6px; inset-inline-start:-31px; width:9px; height:9px; border-radius:50%;
background:var(--bg); border:2px solid var(--accent);
}
/* The year is always rendered in Latin digits (toLatinDigits() at render), so
the mono face actually has glyphs for it — with Persian digits it fell back
mid-run to a different font, which is what made this line look wrong. */
.resume-item .yr{
font-family:var(--font-mono); color:var(--accent);
font-size:var(--about-year-size, var(--text-2xs)); letter-spacing:.08em;
display:block; margin-bottom:6px; direction:ltr; unicode-bidi:isolate;
}
[dir="rtl"] .resume-item .yr{text-align:right;}
.resume-item .role{font-weight:500; margin-bottom:5px; font-size:var(--about-role-size, var(--text-base));}
.resume-item .desc{color:var(--ink-dim); font-size:var(--about-desc-size, var(--text-sm)); font-weight:400; line-height:var(--line-height-normal);}
/* ---------- FILTER CHIPS ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
/* These were mono + .1em tracking + uppercase because the only label that
ever appeared was the Latin More/Less one. Now that videos carry Persian
categories, those same rules applied to Persian: a face with no Persian
glyphs, tracking that breaks the joins, and an uppercase transform that
means nothing in the script. Category chips get the real Persian face;
mono is kept for the one chip that is genuinely Latin (.is-latin). */
.chip{
color:var(--ink-faint); font-family:var(--font-fa), var(--font-en);
font-size:var(--text-2xs); letter-spacing:0; line-height:1.7;
padding:7px 15px; border:1px solid var(--line); border-radius:999px;
white-space:nowrap; transition:color .2s, border-color .2s, background .2s;
}
[dir="ltr"] .chip{font-family:var(--font-en), var(--font-fa);}
.chip.is-latin{font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase;}
.chip:hover{color:var(--ink); border-color:var(--line-strong, var(--ink-faint));}
.chip.active{color:var(--accent); border-color:var(--accent); background:rgba(201,164,104,.08);}
/* The sort toggle sits in the same row as the category filters but does a
different job — it stays lit while you move between categories. The arrow
(newest first) and the hairline before it are what say "not a category",
without pulling it out into a second row of controls. */
.chip-sort{display:inline-flex; align-items:center; gap:6px; margin-inline-start:6px; position:relative;}
.chip-sort::before{
content:""; position:absolute; inset-inline-start:-9px; top:20%; bottom:20%;
width:1px; background:var(--line);
}
.chip-sort::after{content:"\2193"; font-family:var(--font-mono); font-size:.9em; opacity:.75;}
@media(max-width:700px){
/* Three chips at 16-25 Persian characters each wrap raggedly on a phone.
One scrollable row keeps them on a single line and reachable. */
.chips{
flex-wrap:nowrap; overflow-x:auto; gap:8px;
scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; padding:6px 13px;}
}
/* ---------- VIDEO GALLERY ---------- */
.video-row-block{margin-top:56px;}
.video-row-block:first-of-type{margin-top:0;}
.row-label{display:block; font-size:var(--text-2xs); color:var(--ink-faint); letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px;}
/* Same reasoning as [dir="rtl"] .eyebrow above — and this one carries .mono
too, whose own .12em tracking has to be unset as well. Colour stays
var(--ink-faint) exactly as before. */
[dir="rtl"] .row-label, [dir="rtl"] .row-label.mono{
font-family:var(--font-fa), sans-serif; letter-spacing:0; text-transform:none; font-weight:300;
}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px; margin-top:0; align-items:start;}
.video-row--portrait{grid-template-columns:repeat(auto-fill, minmax(200px,1fr));}
.card{
position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer; background:var(--bg-elev);
border-radius:16px; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
/* lifts the cover tile above the global grain layer (body::after, 400) so
thumbnails stay clean, while staying under the sticky nav (500). */
z-index:401;
}
.card.card--portrait{aspect-ratio:9/16;}
.card.card--landscape{aspect-ratio:16/9;}
.card:hover{transform:translateY(-6px) scale(1.015); box-shadow:0 22px 46px -18px rgba(0,0,0,.75);}
/* is inline by default, so the img's height:100% below would have
nothing to resolve against once a WebP source is present. Same fix as
.hero-slide picture. */
.card picture{display:block; width:100%; height:100%;}
.card img{
width:100%; height:100%; object-fit:cover; filter:grayscale(.45) contrast(1.02);
opacity:0; transition:opacity .5s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1s;
}
/* Cards are lazy-loaded, so the thumbnail often finishes fetching well after
the card itself has already slid/scaled into place (see cardRiseIn) — the
raw used to just snap into view the instant it decoded, which read
as a second, uncontrolled "jump" layered on top of the entrance motion.
This fades the image in on its own once loaded (see wireCardImageFade). */
.card img.img-loaded{opacity:1;}
/* The card already clips with overflow:hidden, but that clip is unreliable
for the portrait row: it lives in a horizontal scroll container, which
promotes the card to its own composited layer, and the filtered
inside then paints its top corners square. Giving the children the same
radius makes the rounding independent of whether the ancestor clip holds. */
.card img, .card .scrim{border-radius:inherit;}
.card:hover img{transform:scale(1.08); filter:grayscale(0) contrast(1.05);}
/* entrance: a soft rise-and-settle so the gallery feels alive on first
scroll-into-view. Uses a keyframe (not the transition above) so it doesn't
slow down hover once the card has already settled in.
Deliberately translate-ONLY, no scale: every thumbnail carries a
`filter: grayscale()`, and scaling a filtered raster forces the browser to
re-run the filter and re-rasterise the image on every single frame, which
showed up as a small hitch mid-entrance. A pure translate stays on the
compositor, so the same motion now costs almost nothing. `will-change` is
set only for the duration of the entrance and dropped again on settle
(see the animationend handler in renderVideoGrid) so we don't leave dozens
of permanently-promoted layers sitting in memory. */
.card--extra{display:none;}
.card.stagger-item{opacity:0; transform:translateY(30px);}
/* will-change is scoped to the animating window only: on `.in` (the moment
the entrance starts) and off again on settle. Putting it on .stagger-item
instead would leave a promoted layer alive for every card still waiting
below the fold. The settled rule needs the extra class to outrank this. */
.card.stagger-item.in{
animation:cardRiseIn .9s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay:var(--stagger-delay, 0ms);
will-change:transform, opacity;
}
.card.stagger-item.in.card--settled{will-change:auto;}
@keyframes cardRiseIn{ to{ opacity:1; transform:translateY(0); } }
.card .scrim{
position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
/* Reaches a little higher than the text block ever does, so a title line
is never left sitting on an unshaded, bright part of the thumbnail. */
background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%);
opacity:0; transition:opacity .4s;
}
.card:hover .scrim{opacity:1;}
/* One line, always. A portrait card is at most 240px wide (see
--portrait-card-w) and this used to be set in --heading-card, i.e. up to
29.6px — a descriptive title then wrapped onto three or four lines, grew
upward past the top of the scrim gradient, and collided with the meta row
underneath it. Titles are meant to be specific and therefore long, so the
card truncates and the full text lives where there is room for it: the
lightbox, the /projects/
, and the title attribute on hover. */
.card-title{
font-weight:400; font-size:clamp(1rem, .95rem + .25vw, 1.15rem);
line-height:1.55; margin-bottom:5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Same reason as .lb-meta: a Persian category set in a Latin monospace face
with letter-spacing renders as mismatched, disconnected glyphs. */
.card-meta{
display:flex; flex-wrap:nowrap; align-items:center; gap:4px 14px;
font-family:var(--font-fa), var(--font-en); font-size:var(--text-2xs);
color:var(--ink-dim); letter-spacing:0;
overflow:hidden;
}
/* Location is the first item and the one most likely to be long; let it be
the one that shrinks, so the year never gets pushed out of the card. */
.card-meta .lb-meta-item{min-width:0; flex-shrink:1;}
.card-meta .lb-meta-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* The date is short and is what the row exists to say — it never gets
squeezed. Keyed off .is-year rather than .num because a Persian month name
("خرداد ۱۴۰۴") deliberately does NOT carry .num: mono has no Persian
glyphs. */
.card-meta .lb-meta-item.is-year{flex-shrink:0;}
/* A portrait card is ~225px wide, which is not enough for three meta items
without all of them ending in an ellipsis. Category is the one to drop:
the portrait row is already labelled as reels/stories, and in practice
nearly every card in it repeats the same one or two categories, so it
distinguishes nothing. Location and year actually differ per video, and
the full set is still shown in the lightbox and on the project page. */
.card--portrait .card-meta .is-cat{display:none;}
[dir="ltr"] .card-meta{font-family:var(--font-en), var(--font-fa);}
.card-meta .lb-meta-item svg{width:13px; height:13px;}
.card-meta:empty{display:none;}
.play-ring{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.play-ring span{
width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.85); transition:opacity .35s, transform .35s;
background:rgba(0,0,0,.25); backdrop-filter:blur(2px);
}
.card:hover .play-ring span{opacity:1; transform:scale(1);}
.empty-state{padding:60px 20px; text-align:center; border:1px dashed var(--line); color:var(--ink-faint); font-family:'IBM Plex Mono'; font-size:var(--text-2xs); border-radius:16px;}
.videos-showall-row{display:flex; justify-content:center; margin-top:48px;}
/* ---------- MOBILE GALLERY (tidy layout) ---------- */
@media(max-width:700px){
.video-row-block{margin-top:40px;}
.grid.video-row{grid-template-columns:1fr; gap:16px;}
.card{border-radius:14px;}
.card .scrim{
opacity:1; padding:16px;
background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 58%);
}
.card-title{font-size:1.02rem;}
.play-ring span{opacity:1; transform:scale(.88); width:42px; height:42px;}
/* Portrait videos: horizontal snap carousel instead of giant stacked covers.
Cards snap to the START edge and the track keeps the normal container
padding, so the first card lines up with its row label and with every
other section on the page. (An earlier version snapped cards centred,
which forced the track to be padded by half the leftover width — that
left a ~79px blank gutter before the first card at the resting scroll
position and read as a layout bug.) scroll-padding-inline mirrors that
padding so every later card also comes to rest exactly on the container
edge rather than tucked under it.
scroll-snap-stop is deliberately NOT set: a flick should still be able to
carry across several cards. */
.grid.video-row--portrait{
--portrait-card-w:min(58vw, 240px);
display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
margin-inline:calc(-1 * var(--container-pad));
padding-inline:var(--container-pad);
scroll-padding-inline:var(--container-pad);
padding-bottom:8px; scrollbar-width:none; -ms-overflow-style:none;
overscroll-behavior-x:contain;
/* overflow-x:auto silently promotes overflow-y from `visible` to `auto`,
so anything that overflows vertically makes the track scrollable on the
cross axis too — the entrance transform below (translateY(30px), still
applied to every card that has not been scrolled into view yet) let you
nudge the whole row ~30px up and down with a trackpad. Clip that axis,
and drop the two transforms that would then be clipped instead: the
entrance becomes fade-only in the carousel and the hover lift is
meaningless on a touch-scrolled row anyway. */
overflow-y:hidden;
}
.grid.video-row--portrait::-webkit-scrollbar{display:none;}
.grid.video-row--portrait .card{flex:0 0 var(--portrait-card-w); scroll-snap-align:start;}
.grid.video-row--portrait .card.stagger-item{transform:none;}
.grid.video-row--portrait .card:hover{transform:none;}
}
/* ---------- PORTRAIT RING — the covers on a draggable cylinder ---------- */
/* Second view for the portrait row. Geometry lives in JS (the radius has to
be computed from the card width and the item count, which CSS can't do);
everything below is the look, plus the two rules that switch views. */
/* the label keeps its own 18px gap to the row — it just moves up to the line
now that the view toggle shares it */
.row-label-line{
display:flex; align-items:baseline; justify-content:space-between;
gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.row-label-line .row-label{margin-bottom:0;}
.pring-toggle{
background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer;
color:var(--ink-dim); font-family:var(--font-fa); font-size:var(--text-2xs);
padding:5px 14px; transition:color var(--transition-fast), border-color var(--transition-fast);
}
[dir="ltr"] .pring-toggle{font-family:var(--font-en), var(--font-fa);}
.pring-toggle:hover{color:var(--accent); border-color:var(--accent);}
#portraitBlock.view-ring .grid.video-row--portrait{display:none;}
#portraitBlock.view-grid .pring-wrap{display:none;}
/* The cards deliberately overhang the viewport on both sides, and absolutely
positioned boxes still count towards inline overflow — without this the
whole page picks up a horizontal scrollbar on a phone. `clip` rather than
`hidden`: hidden would make this a scroll container, which flattens the
preserve-3d chain inside it. */
.pring-wrap{overflow-x:clip;}
/* Height has to clear the tallest card the JS will build plus the ~5% the
front one is scaled up by: a 380px card is 676px of 9:16, so 780px is the
floor for the desktop cap. The vh half is what keeps a short laptop safe —
at 1440x800 it resolves to 672px and the card scales down to suit. */
.pring{
position:relative; width:100%; height:min(84vh, 780px);
display:flex; align-items:center; justify-content:center;
perspective:2000px; perspective-origin:50% 46%;
touch-action:pan-y; user-select:none; cursor:grab;
}
.pring.is-dragging{cursor:grabbing;}
.pring:focus-visible{outline:1px solid var(--accent); outline-offset:6px;}
.pring-track{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;}
.pring-card{
position:absolute; left:50%; top:50%;
width:var(--pcw); height:var(--pch);
margin-left:calc(var(--pcw) / -2); margin-top:calc(var(--pch) / -2);
transform-style:preserve-3d; cursor:pointer;
/* transform only. Listing opacity and filter here as well pinned a full
backing store per card for the life of the page, and a 1080x1920 cover
is 7.9MB decoded — sixteen of those is 126MB of bitmap that iOS starts
evicting, and an evicted layer paints black. */
will-change:transform;
}
/* Depth without a filter. A per-card filter() forces the compositor to build
an extra offscreen surface for every card on every frame, and inside a
preserve-3d chain WebKit is liable to hand back a blank one. A plain
opacity fade on a solid overlay costs nothing and cannot fail that way, so
it carries the depth cue everywhere; the richer greyscale/blur treatment is
layered on top only where there is a mouse (see .pring--rich). */
.pring-veil{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:var(--color-bg); opacity:0;
}
.pring-frame{
position:relative; width:100%; height:100%; overflow:hidden;
border:1px solid var(--line); border-radius:16px;
background:var(--bg-elev); box-shadow:0 30px 60px -28px rgba(0,0,0,.9);
transition:border-color var(--transition-normal);
/* A rounded overflow:hidden box being rotated in 3D has its corners clipped
by the un-antialiased layer edge and they come back jagged. Its own
composited layer gets the rounded mask rasterised with the layer. */
isolation:isolate; -webkit-backface-visibility:hidden;
}
.pring-card.is-front .pring-frame{border-color:rgba(201,164,104,.55);}
/* is inline by default, so the img's height:100% would have nothing
to resolve against once a WebP source is present. Same fix as .card picture
and .hero-slide picture. */
.pring-frame picture{display:block; width:100%; height:100%;}
/* radius repeated on the children rather than left to the parent's clip: mid
rotation the corner mask and the child edge rasterise separately and a 1px
hairline of unclipped image shows through the curve */
.pring-frame img{
position:absolute; inset:0; width:100%; height:100%; display:block;
object-fit:cover; border-radius:inherit;
filter:grayscale(.45) contrast(1.02); transition:filter .5s ease;
}
.pring-card.is-front .pring-frame img{filter:grayscale(0) contrast(1.05);}
.pring-scrim{
position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(to top, rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 26%, rgba(8,8,8,0) 58%);
}
/* Type scales off the card, not the viewport — the same card is ~250px wide
on a desktop and ~170px on a phone, and a fixed size wrapped to three lines
at the small end. */
.pring-cap{
position:absolute; inset-inline:0; bottom:0; text-align:start;
padding:calc(var(--pcw) * .062) calc(var(--pcw) * .058) calc(var(--pcw) * .056);
}
.pring-title{
font-family:var(--font-fa); font-weight:500; line-height:1.5; color:var(--ink);
font-size:clamp(.78rem, calc(var(--pcw) * .064), 1.05rem);
margin-bottom:4px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
[dir="ltr"] .pring-title{font-family:var(--font-en), var(--font-fa);}
/* metadata goes through the shared .lb-meta-item icon row, same as every
other card — never a dot-joined mono string (see the typography note) */
.pring-cap .card-meta{font-size:clamp(.62rem, calc(var(--pcw) * .048), .78rem);}
/* Same call as .card--portrait: a ~250px card can't hold three meta items
without all three ending in an ellipsis, and category is the one that
distinguishes nothing in a row that is already labelled. */
.pring-cap .card-meta .is-cat{display:none;}
.pring-play{
position:absolute; top:12px; inset-inline-end:12px;
width:32px; height:32px; border:1px solid rgba(244,242,238,.3); border-radius:50%;
display:grid; place-items:center; background:var(--ctrl-bg);
opacity:0; transition:opacity var(--transition-normal);
}
.pring-card.is-front .pring-play{opacity:1;}
.pring-play svg{width:12px; height:12px; fill:var(--ink);}
[dir="rtl"] .pring-play svg{transform:scaleX(-1);}
.pring-hint{
text-align:center; color:var(--ink-faint); font-size:var(--text-2xs);
margin-top:10px; font-family:var(--font-fa);
}
[dir="ltr"] .pring-hint{font-family:var(--font-en), var(--font-fa);}
@media (max-width:760px){
.pring{height:min(58vh, 430px); perspective:1100px;}
}
/* Touch devices drop every filter in the ring. This one is on the , so
it forces its own offscreen surface per card on top of the card's — and it
is the cheapest thing to lose, because the veil already carries the sense
of depth. Matches the pringRich() gate in the JS. */
@media (pointer: coarse){
.pring-frame img,
.pring-card.is-front .pring-frame img{filter:none; transition:none;}
}
/* No auto-spin for anyone who asked motion to stop — drag still works, so the
view keeps all of its content, it just never moves on its own. */
@media (prefers-reduced-motion:reduce){
.pring-frame, .pring-frame img, .pring-play{transition:none;}
}
/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; background:var(--overlay-bg); z-index:2000; display:none; align-items:center; justify-content:center; padding:6vw;}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:1100px; width:100%; transition:opacity .28s ease, transform .28s ease;}
.lightbox-inner.portrait{max-width:420px;}
.lightbox-inner.switching{opacity:0; transform:scale(.97);}
.lightbox-inner img{width:100%; max-height:76vh; object-fit:contain; border-radius:16px;}
.lightbox-inner video, .lightbox-inner iframe{width:100%; aspect-ratio:16/9; background:#000; border:none; border-radius:16px; display:block;}
.lightbox-inner.portrait video, .lightbox-inner.portrait iframe{aspect-ratio:9/16; max-height:80vh;}
/* A radius on