/* Fonts: self-hosted copies of Google Fonts (Oswald, UnifrakturMaguntia, Grenze Gotisch, JetBrains Mono, Manrope), SIL Open Font License */
/* vietnamese */
@font-face {
  font-family: 'Grenze Gotisch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/grenze-gotisch-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: 'Grenze Gotisch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/grenze-gotisch-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Grenze Gotisch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/grenze-gotisch-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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-20C4, 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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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-20C4, 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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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(fonts/manrope-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-20C4, 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(fonts/manrope-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: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/oswald-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/oswald-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/oswald-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/oswald-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/oswald-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/oswald-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;
}
/* latin */
@font-face {
  font-family: 'UnifrakturMaguntia';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/unifrakturmaguntia-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;
}

/* Layout: a night wall of pasted posters. Condensed caps shout, blackletter signs, mono labels annotate like plan stamps. */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
body { margin: 0 }
[hidden]:not([hidden=until-found i]) { display: none !important }
:root {
  --ink: #0D0C0B;
  --slab: #1A1816;
  --rule: #302C28;
  --concrete: #8F8A82;
  --bone: #E9E6DC;
  --lichen: #C9BFAA;
  --signal: #B42318;
  --f-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-black: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --f-body: 'Manrope', system-ui, sans-serif;
  --paper: #E2D9C4;
  --wine: #4A1714;
  --oxblood: var(--signal);
  --wine-ink: #EFE6D8;
  --blush: #F2C9A8;
  --paper-ink: #1B1813;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 72px }
body { background: var(--ink); color: var(--bone); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink) }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") }
a { color: inherit }
img { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)) } }
.mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase }
.dim { color: var(--concrete) }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px }
.mark { font-family: var(--f-black); font-size: 25px; line-height: 1; text-decoration: none; white-space: nowrap }
.nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px) }
.nav a { text-decoration: none; color: var(--concrete) }
.nav a:hover { color: var(--bone) }
.fx { font-family: 'Grenze Gotisch', var(--f-black); font-weight: 500 }
.lang { display: flex; border: 1px solid var(--rule) }
.lang button { padding: 5px 9px; color: var(--concrete) }
.lang button[aria-pressed="true"] { background: var(--bone); color: var(--ink) }
@media (max-width: 720px) { .nav a { display: none } .mark { font-size: 22px } }

/* hero */

.red { font-family: inherit; font-weight: inherit; font-style: normal; color: var(--signal) }

/* light bands */
.light { background: var(--paper); color: var(--paper-ink) }
.light .dim, .light .row .mono { color: #6A6255 }

.light .sec-head .aside { color: #3E382D }
.light .sec-head { border-color: var(--paper-ink) }
.light .row { border-color: #C9BFAA }
.light .about figure img { box-shadow: 0 10px 24px -16px #0009 }
.light.band { padding-bottom: clamp(56px, 8vw, 112px) }

/* cover: photo stack under giant type */

.cover { position: relative; padding-block: clamp(36px, 6vw, 80px) 22px; display: flex; flex-direction: column }

/* cover D: concrete + red, after framenir */
.cover-d { background: #D9D6D0; color: var(--oxblood) }
.cd { position: relative; padding-block: clamp(22px, 3vw, 40px) clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); }
.cd-sig { position: absolute; top: clamp(22px, 3vw, 40px); left: max(16px, env(safe-area-inset-left, 0px)); font-family: var(--f-black); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; color: var(--oxblood) }
.cd-h { margin: clamp(10px, 2vw, 24px) 0 0; text-align: right; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(46px, 8.4vw, 136px); line-height: 1.02; letter-spacing: .025em; color: var(--oxblood) }
.cd-h .bl { font-weight: 300 }
.cd-low { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 470px); gap: 0 clamp(14px, 1.6vw, 22px); align-items: end; margin-top: clamp(-120px, -7vw, -40px) }
@media (min-width: 760px) { .cd-sig { left: max(40px, env(safe-area-inset-left, 0px)) } }
.cd-fig { margin: 0 } .cd-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.1) }
.cd-text p { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.38; color: var(--oxblood) }
.cd-link { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--oxblood) }
.cd-link::before { content: "[" } .cd-link::after { content: "]" } .cd-link:hover { text-decoration: underline }
@media (max-width: 760px) { .cd-sig { position: static } .cd-h { text-align: left; margin-top: 18px } .cd-low { grid-template-columns: 1fr; margin-top: 22px; gap: 16px } }

/* ticker */

@keyframes run { to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {  html { scroll-behavior: auto } }

/* sections */
section { padding-block: clamp(56px, 8vw, 112px) 0 }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; border-bottom: 1px solid var(--bone); padding-bottom: 14px }
.sec-head h2 { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(48px, 8vw, 120px); line-height: .85; letter-spacing: .025em; padding-bottom: .14em }
.sec-head h2 sup { font-family: var(--f-mono); font-weight: 400; font-size: 13px; color: var(--signal); vertical-align: top; margin-left: 8px; letter-spacing: 0 }
.sec-head .aside { max-width: 30em; color: #CFCBC0; margin: 0 }

/* filters + grid */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px }
.filters button { border: 1px solid var(--rule); padding: 8px 12px 7px; color: var(--concrete) }
.filters button:hover { color: var(--bone); border-color: var(--concrete) }
.filters button[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone) }
.filters b { font-weight: 600; color: var(--signal); margin-left: 6px }
.filters button[aria-pressed="true"] b { color: var(--signal) }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px) clamp(14px, 2vw, 28px) }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr } }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; min-width: 0; background: var(--slab); padding: 12px 12px 16px; border: 1px solid var(--rule) }

.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.88); transition: filter .5s, transform .8s }
.card:hover img, .card:focus-visible img { filter: none; transform: scale(1.03) }

.card h3 { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.1vw, 30px); line-height: 1; letter-spacing: .005em; text-wrap: balance }
.card .meta { display: flex; justify-content: space-between; gap: 10px; color: var(--concrete) }

/* bento project grid: two small | one big | two small */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }

}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr }

}

/* quote + facts band */
.facts-band { padding-block: clamp(48px, 7vw, 96px) 0 }

.fb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule) }
.fb-stats > div { padding: 24px 12px 10px; text-align: center; border-left: 1px solid var(--rule) }
.fb-stats > div:first-child { border-left: 0 }
.fb-stats b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--bone) }
.fb-stats span { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--concrete); line-height: 1.4 }
@media (max-width: 700px) { .fb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .fb-stats > div:nth-child(3) { border-left: 0 } .fb-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule) } }

/* podacha on paper */
.paper { background: var(--paper); color: var(--paper-ink); margin-top: clamp(56px, 8vw, 112px); position: relative }
.paper section { padding-block: clamp(48px, 7vw, 96px) }
.paper .sec-head { border-color: var(--paper-ink) }
.paper .sec-head h2 { color: var(--paper-ink) }
.paper .sec-head .aside { color: #3E382D }

/* about */
.about { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: 28px; align-items: start }
@media (max-width: 820px) { .about { grid-template-columns: 1fr } }
.about figure { margin: 0 }
.about figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.1) }
.about .bio { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; margin: 0 0 28px; max-width: 32em; text-wrap: pretty }

.row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-block: 9px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.45 }
.row .mono { color: var(--concrete); font-size: 11px; padding-top: 3px }

/* contacts */
.contact { padding-block: clamp(56px, 8vw, 112px) 40px }
.contact h2 { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 13vw, 210px); line-height: 1; letter-spacing: .025em; padding-bottom: .12em }
.contact h2 span { color: var(--signal) }
.c-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 36px }
@media (max-width: 900px) { .c-rows { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 480px) { .c-rows { grid-template-columns: 1fr } }
.c-rows div { border-top: 1px solid var(--bone); padding-block: 12px; min-width: 0 }
.c-rows .cl { display: block; text-decoration: none; text-transform: none; user-select: text } .c-rows .cl:hover { color: var(--signal) }
.c-rows .v { font-family: var(--f-display); font-weight: 500; font-size: 22px; text-transform: uppercase; overflow-wrap: anywhere }
footer .wrap { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-block: 28px 36px; border-top: 1px solid var(--rule) }
footer .mark { font-size: 30px }

/* project view */
.view { position: fixed; inset: 0; z-index: 70; background: var(--ink); overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.vbar { position: sticky; top: 0; z-index: 2; background: var(--ink); border-bottom: 1px solid var(--rule) }
.vbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px }
.vbar button:hover { color: var(--signal) }
.vbar .pn { display: flex; gap: 18px }
.v-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(24px, 4vw, 48px); align-items: start }
@media (max-width: 860px) { .v-hero { grid-template-columns: 1fr } }
.v-hero h1 { margin: 12px 0 0; font-family: var(--f-display); font-weight: 700; color: var(--signal); text-transform: uppercase; font-size: clamp(34px, 4.2vw, 68px); line-height: 1; letter-spacing: .025em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto }
.v-hero > div { min-width: 0 }
.v-hero h1 .thin { display: block; font-family: var(--f-display); letter-spacing: 0; font-weight: 300; color: var(--bone); font-size: .62em; line-height: 1.1; margin-top: .3em }
.v-hero .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; margin: 22px 0 0; max-width: 36em; text-wrap: pretty }
.v-hero img { width: 100%; max-height: 78vh; object-fit: cover }
.kv { margin-top: 26px }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; padding-block: 28px; border-block: 1px solid var(--rule); margin-block: 8px 0 }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.stat b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 64px); line-height: .9; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.stat b small { font-size: .38em; vertical-align: top; margin-left: 4px; color: var(--lichen) }
.stat span { display: block; margin-top: 8px; color: var(--concrete); font-size: 13.5px; line-height: 1.35 }
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 36px }
@media (max-width: 760px) { .chapters { grid-template-columns: 1fr } }
.ch { border-top: 1px solid var(--rule); padding-block: 16px }
.ch h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: 22px; line-height: 1.1 }
.ch p { margin: 0; color: #CFCBC0; font-size: 15px }
.gal { columns: 3 300px; column-gap: 14px; margin-block: 40px 64px }
.gal figure { break-inside: avoid; margin: 0 0 18px; cursor: zoom-in }
.gal img { width: 100%; background: #fff }
.gal figcaption { margin-top: 6px; font-size: 13px; color: var(--concrete); line-height: 1.4 }
.more-h { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 4vw, 56px); margin: 0 0 18px; line-height: 1 }

/* lightbox */
dialog.lb { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: var(--bone) }
dialog.lb::backdrop { background: #080706f2 }
.lb-in { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.lb-in img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; background: #fff }
.lb-in .cap { max-width: 60em; text-align: center; font-size: 14px; color: #CFCBC0 }
.lb-x { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)) }

/* ===== 12-column page grid: every section snaps to the same columns ===== */
:root { --g: 24px }
@media (min-width: 1001px) {
  .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g) }
  .sec-head h2 { grid-column: 1 / 9 }
  .sec-head .aside { grid-column: 9 / 13; max-width: none; align-self: end; padding-bottom: 6px }

  .cd { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g) }
  .cd-sig { position: static; grid-column: 1 / 4; grid-row: 1; align-self: start; margin-top: 4px }
  .cd-h { grid-column: 4 / 13; grid-row: 1 }
  .cd-low { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g) }
  .cd-fig { grid-column: 1 / 4 } .cd-text { grid-column: 4 / 8 }

  .facts-band .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g) }

  .fb-stats { grid-column: 1 / 13; gap: 0 var(--g); border-top: 0 }
  .fb-stats > div, .fb-stats > div:first-child { border-left: 0; border-top: 1px solid var(--rule); text-align: left; padding: 18px 0 8px }

  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g) }

  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g) }
  .about figure { grid-column: 1 / 4 } .about > div { grid-column: 4 / 13 }
  .about .bio { max-width: none; padding-right: calc((100% + var(--g)) / 9 * 4) }

  .c-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--g) }
}
.c-rows a.v.cl { text-transform: none }

/* variant B for Signature: tiles */
[hidden] { display: none !important }

.dbx { display: flex; flex-direction: column; gap: var(--g) }
.bxrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g) }

.bx-top { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.bx-top .mono { font-size: 11px; opacity: .8 }
.pill { display: inline-block; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 12px 3px; font-size: 12.5px; line-height: 1.2 }

/* Projects variant B: magazine */

.gt { text-decoration: none; color: inherit }  .gt:hover { color: var(--signal) }

/* ===== unify: one radius, two Oswald weights, one mono weight ===== */
:root { --r: 6px }

.cd-fig img, .about figure img, .v-hero img, .gal img, .lb-in img { border-radius: var(--r) }
.lang, .filters button, .pill { border-radius: var(--r) }
.lang { overflow: hidden }

.fb-stats b, .stat b, .c-rows .v, .ch h3 { font-weight: 500 }
.cd-h .bl { font-weight: 500 }
.mono, .sec-head h2 sup, .cd-link, .fb-stats span { font-weight: 400 }

/* more air around the quote + facts band */
.facts-band { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 70px) }
.fb-stats { margin-top: clamp(64px, 8vw, 120px) }
.fb-stats > div, .fb-stats > div:first-child { padding-top: 28px }
.fb-stats span { margin-top: 14px }
#projects { padding-top: clamp(80px, 10vw, 150px) }

/* featured projects + more button */
.more-wrap { display: flex; justify-content: center; margin-top: 28px }
.more-btn { border: 1px solid var(--bone); border-radius: var(--r); padding: 12px 22px 11px; color: var(--bone); transition: background .25s, color .25s }
.more-btn:hover { background: var(--signal); border-color: var(--signal) }
/* About as tiles (same language as Signature) */
.abx { display: flex; flex-direction: column; gap: var(--g); margin-top: 28px }

.dbx { margin-top: 28px }

/* name font: variant 5 (Oswald caps). To return to blackletter, delete this block. */
.mark, .cd-sig { font-family: var(--f-display) !important; text-transform: uppercase }
.mark .fx, .cd-sig .fx { font-family: inherit; font-weight: inherit }
.top .mark { font-weight: 500; font-size: 15px; letter-spacing: .14em }
footer .mark { font-weight: 500; font-size: 20px; letter-spacing: .12em }
.cd-sig { font-weight: 700; font-size: clamp(20px, 2vw, 30px); letter-spacing: .06em; line-height: 1.08 }

/* project pages in the same tile language */
.vt { background: #050505; border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px }
.vt.red { background: var(--signal); border-color: var(--signal); color: #F6EEE6 }
.kv.vt { margin-top: 28px } .kv.vt .bx-top { margin-bottom: 10px }
.kv.vt .row { border-color: var(--rule) }
.stats.vtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); padding: 0; border: 0; margin-block: 8px 0 }
.stat.vt { display: flex; flex-direction: column; min-height: 150px }
.stat.vt .vn { font-size: 11px; color: var(--signal); margin-bottom: auto; padding-bottom: 22px }
.stat.vt.red .vn { color: #F6EEE6; opacity: .85 } .stat.vt.red span, .stat.vt.red b small { color: #F6EEE6 }
.chapters { gap: var(--g); margin-top: var(--g) }
.ch.vt { border-top: 1px solid var(--rule) } .ch.vt h3 { margin-top: 20px; text-transform: uppercase }
.gal figure img { border-radius: var(--r) }
.v-hero img { border-radius: var(--r) }
@media (max-width: 640px) { .stats.vtiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .chapters { grid-template-columns: 1fr } }

/* prices */
#prices { padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(40px, 6vw, 80px) }
.prc { display: none }

.prc-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--g); align-items: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule) }
.prc-foot p { grid-column: 1 / 9; margin: 0; font-size: 12px; line-height: 1.6 }
.prc-foot .more-btn { grid-column: 9 / 13; justify-self: end; text-decoration: none; display: inline-block }

@media (max-width: 600px) {  .prc-foot p, .prc-foot .more-btn { grid-column: 1 / -1; justify-self: start } }

/* about B */
.b2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g); align-items: start; margin-top: 12px }
.b2ph { grid-column: 1 / 5; margin: 0; position: sticky; top: 90px }
.b2ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); filter: grayscale(1) contrast(1.05) }
.b2ph figcaption { margin-top: 12px; font-size: 11px; color: #6A6255; text-transform: uppercase; letter-spacing: .06em }
.b2t { grid-column: 6 / 13; color: var(--paper-ink) }
.b2h { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.1; letter-spacing: .03em }
.b2p { margin: 26px 0 0; font-size: 17px; line-height: 1.6; max-width: 36em; color: #3E382D }
.b2st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1.5px solid var(--paper-ink) }
.b2s { padding: 18px 18px 0 0 }
.b2s + .b2s { padding-left: 18px; border-left: 1px solid #C9BFAA }
.b2s b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; color: var(--signal); text-transform: uppercase }
.b2s b small { font-size: .45em; font-weight: 500; margin-left: 4px }
.b2s span { display: block; margin-top: 8px; font-size: 13px; color: #6A6255 }
.b2cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--g); margin-top: 56px }
.b2k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); padding-bottom: 10px; border-bottom: 1.5px solid var(--paper-ink) }
.b2r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #C9BFAA; font-size: 14px; line-height: 1.45 }
.b2r .mono { font-size: 11px; color: #6A6255; padding-top: 2px; text-transform: uppercase }
@media (max-width: 900px) { .b2ph { grid-column: 1 / -1; position: static; max-width: 420px } .b2t { grid-column: 1 / -1; margin-top: 32px } .b2cols { grid-template-columns: 1fr; gap: 36px } }
@media (max-width: 520px) { .b2st { grid-template-columns: 1fr } .b2s + .b2s { border-left: 0; padding-left: 0; border-top: 1px solid #C9BFAA } .b2s { padding-bottom: 16px } }

/* ===== v2 ===== */
body { margin: 0 }
.cd-fig img { filter: none }
main { counter-reset: sec }
.sec-head h2 { font-size: clamp(40px, 5.2vw, 76px) }
.sec-head h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " /"; display: block; margin-bottom: 14px; font-family: var(--f-mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; color: var(--signal) }
.bleed { margin: 0; position: relative }
.bleed img { display: block; width: 100%; height: clamp(360px, 78vh, 820px); object-fit: cover; object-position: 50% 62% }
.bleed figcaption { position: absolute; left: var(--g, 24px); bottom: 18px; padding: 6px 10px 5px; border-radius: var(--r); background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--bone); font-size: 11px; letter-spacing: .06em; text-transform: uppercase }
.facts-band { padding-block: clamp(40px, 5vw, 64px) clamp(40px, 5vw, 70px) }
.facts-band .fb-stats { margin-top: 0 }
/* projects list */
#grid { display: block !important; grid-template-columns: none !important; border-top: 1px solid var(--rule) }
.pl { display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px 220px 40px; gap: 0 20px; align-items: center; padding: 20px 0 18px; border-bottom: 1px solid var(--rule); color: var(--bone); text-decoration: none; transition: color .25s, padding .3s }
.pl-n { color: var(--signal); font-size: 13px }
.pl-t { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 48px); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em }
.pl-c, .pl-p { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--concrete) }
.pl-a { font-family: var(--f-display); font-size: 28px; color: var(--signal); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; justify-self: end }
.pl-m { display: none }
.pl:hover, .pl:focus-visible { color: var(--signal); padding-left: 10px }
.pl:hover .pl-a, .pl:focus-visible .pl-a { opacity: 1; transform: none }
.pl-hov { position: fixed; left: 0; top: 0; z-index: 70; width: 280px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: 0 20px 40px -20px #000 }
.pl-hov.on { opacity: 1 }
@media (max-width: 900px) { .pl { grid-template-columns: 40px minmax(0, 1fr) 84px; grid-template-areas: "n t m" "n c m" "n p m"; gap: 2px 14px; padding: 16px 0 }
  .pl-n { grid-area: n; align-self: start; padding-top: 6px } .pl-t { grid-area: t; font-size: 24px } .pl-c { grid-area: c } .pl-p { grid-area: p } .pl-a { display: none }
  .pl-m { grid-area: m; display: block; width: 84px; height: 100px; object-fit: cover; border-radius: var(--r) } .pl:hover { padding-left: 0 } }
/* drawings strip */

.light .filters button, .paper .filters button { border-color: #C9BFAA; color: #6A6255 }
.paper .filters button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink) }
.paper .filters b { color: var(--signal) }

/* approach */
.sty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g, 24px); margin-top: 28px; align-items: start }
.sty-ph { grid-column: 1 / 6; margin: 0; position: sticky; top: 90px }
.sty-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); display: block }
.sty-l { grid-column: 7 / 13 }
.sty-list { border-top: 1px solid var(--rule) }
.pr { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 22px 0 20px; border-bottom: 1px solid var(--rule) }
.pr > .mono { color: var(--signal); font-size: 13px; padding-top: 8px }
.pr h3 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em }
.pr p { margin: 8px 0 0; color: #CFCBC0; font-size: 15px; line-height: 1.55; max-width: 34em }
.sty-sub { margin: 56px 0 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal) }
.sty-list.two .pr h3 { font-size: clamp(20px, 1.8vw, 26px) }
@media (max-width: 900px) { .sty-ph { grid-column: 1 / -1; position: static } .sty-l { grid-column: 1 / -1; margin-top: 28px } }
/* prices */
.prc { display: block !important; margin-top: 18px; border-top: 1px solid var(--rule) }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0 16px; border-bottom: 1px solid var(--rule) }
.prow span { font-size: clamp(17px, 1.6vw, 22px) }
.prow b { font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2vw, 30px); letter-spacing: .02em; text-transform: uppercase; color: var(--bone); text-align: right; white-space: nowrap }
@media (max-width: 600px) { .prow { flex-direction: column; gap: 4px } .prow b { text-align: left; white-space: normal } }
.prc-foot { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px }
.prc-foot p { margin: 0; font-size: 11.5px; line-height: 1.6 }
.prc-foot .more-btn { text-decoration: none }

/* podacha tiles v2.1 */
.pz-tabs { margin: 22px 0 22px }

/* podacha index viewer */
.pv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g, 24px); align-items: start; margin-top: 6px }
.pv-list { grid-column: 1 / 6; border-top: 1px solid var(--paper-ink) }
.pv-sub { margin: 0; padding: 12px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6A6255; border-bottom: 1px solid #C9BFAA }
.pi { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; width: 100%; text-align: left; padding: 16px 0 15px; border-bottom: 1px solid #C9BFAA; color: var(--paper-ink); cursor: pointer; transition: color .2s, padding .25s }
.pi-n { font-size: 12px; color: #6A6255 }
.pi-t { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.12; text-transform: uppercase; letter-spacing: .01em }
.pi-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #6A6255 }
.pi:hover, .pi.on { color: var(--signal); padding-left: 8px }
.pi.on .pi-n { color: var(--signal) }
.pv-view { grid-column: 6 / 13; margin: 0; position: sticky; top: 84px }
.pv-sheet { background: #fff; border-radius: var(--r); padding: clamp(14px, 2vw, 28px); height: min(72vh, 700px); display: flex; align-items: center; justify-content: center; cursor: zoom-in; box-shadow: 0 18px 40px -28px #0007 }
.pv-sheet img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: opacity .12s }
.pv-sheet img.fade { opacity: 0 }
.pv-view figcaption { display: flex; align-items: baseline; gap: 16px; margin-top: 14px; color: var(--paper-ink); font-size: 15px }
.pv-view figcaption .mono { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); white-space: nowrap }
.pv-zoom { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-ink); border-bottom: 1px solid currentColor; white-space: nowrap; cursor: pointer }
.pv-zoom:hover { color: var(--signal) }
@media (max-width: 900px) { .pv-view { grid-column: 1 / -1; grid-row: 1; position: static; scroll-margin-top: 70px } .pv-list { grid-column: 1 / -1; margin-top: 22px } .pv-sheet { height: 62vw; min-height: 260px } .pv-view figcaption { flex-wrap: wrap; gap: 6px 12px } }
.sty-sub.first { margin-top: 0 }

.b2pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch }
.b2pair .b2r { min-height: 64px; box-sizing: border-box }
.b2pair .b2e { border-bottom-color: transparent }
@media (max-width: 900px) { .b2pair { display: flex; flex-direction: column; gap: 0 !important } .b2pair .hl { order: 0 } .b2pair .cl { order: 1 } .b2pair .hr { order: 2; margin-top: 32px } .b2pair .cr { order: 3 } .b2pair .b2e { display: none } .b2pair .b2r { min-height: 0 } }

/* no focus ring on programmatic focus */
.vbar button:focus:not(:focus-visible), #v-back:focus { outline: none }
#v-back:focus, #v-back:focus-visible { outline: none } #v-back:focus-visible { text-decoration: underline; text-underline-offset: 4px }