/* =========================================================================
   The Portfolio of Vince Earl Mina — style.css
   A Renaissance museum aesthetic: parchment, gilding and candlelight.

   TABLE OF CONTENTS
     01. Fonts (Cinzel, Cormorant Garamond, EB Garamond — self hosted)
     02. Tokens, Reset and Base Typography
     03. Background Effects (scene layers, veil, magma, embers, spotlight)
     04. Navigation (top bar, halls drawer, scrim, progress)
     05. Hero Section and About Me
     06. The Manuscript (book, pages, folio)
     07. Halls (chronicle, education, skills, projects, certificates,
         leadership, achievements, library, quotes, hobbies, music)
     08. Favorite Cinema and Knowledge Tree
     09. Contact Hall, Footer, Modal Window and Toast
     10. Decorative Elements, Animations and Keyframes
     11. Refinements and Theme Overrides
     12. Responsive Layers
     13. Accessibility (skip link) and the Hall of Collaborative Works
   ========================================================================= */

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt7-GT7LEc.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: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt79mT7.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-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt7-GT7LEc.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: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt79mT7.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-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt7-GT7LEc.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: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt79mT7.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-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt7-GT7LEc.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: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt79mT7.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-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt7-GT7LEc.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: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(Fonts/8vIJ7ww63mVu7gt79mT7.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQspDre2.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: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQUpDg.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-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQspDre2.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: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQUpDg.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-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQspDre2.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: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQUpDg.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-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQspDre2.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: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQUpDg.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-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQspDre2.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: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(Fonts/xMQbuFFYT72XzQUpDg.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;
}

:root {
  --azure: #2f6fb0;
  --lagoon: #2f8f88;
  --gold: #9a7420;
  --gold-bright: #d4af37;
  --ivory: #f2e7d2;
  --pearl: #fbf7ee;
  --ink: #241a09;
  --ink-soft: #4a3820;
  --coral: #b4552f;
  --frame-a: #c8a24a;
  --frame-b: #8a6233;
  --paper: #efe0c0;
  --bg-veil: rgba(247, 240, 224, 0.55);
  --panel: rgba(255, 250, 238, 0.72);
  --panel-edge: rgba(154, 116, 32, 0.38);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--gold);
  --accent-2: var(--azure);
  --halo: 0 1px 0 rgba(255, 253, 245, 0.7);
  --shadow: 0 24px 60px -28px rgba(53, 35, 8, 0.65);
  --ring: rgba(154, 116, 32, 0.55);
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --bg1: url("Images/light_background_1.jpg");
  --bg2: url("Images/Light_Background_2.jpg");
  --bg3: url("Images/Light_Background_3.jpg");
  --bg4: url("Images/light_background_1.jpg");
  --bg5: url("Images/Light_Background_2.jpg");
  --frame-portrait: url("Images/frame-portrait.png");
  --frame-landscape: url("Images/frame-landscape.png");
  --frame-oval: url("Images/frame-oval.png");
}

body.dark {
  --text: #f7dda2;
  --text-soft: #e7bd88;
  --accent: #ff9e45;
  --accent-2: #ff3c38;
  --panel: rgba(22, 15, 16, 0.62);
  --panel-edge: rgba(255, 122, 48, 0.35);
  --bg-veil: rgba(9, 6, 8, 0.55);
  --halo: 0 0 10px rgba(255, 196, 96, 0.55), 0 0 30px rgba(255, 138, 40, 0.32), 0 0 62px rgba(255, 90, 26, 0.22);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  --ring: rgba(255, 138, 60, 0.5);
  --paper: #2a1a12;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sora", system-ui, sans-serif;
  color: var(--text);
  background: #0d0b10;
  overflow-x: hidden;
  line-height: 1.7;
  letter-spacing: 0.01em;
  transition: color 0.6s var(--ease);
}

body.locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) .lead,
body:not(.dark) .eyebrow {
  text-shadow: var(--halo);
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark .eyebrow {
  text-shadow: var(--halo);
}

a {
  color: inherit;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.layer {
  position: absolute;
  inset: -10% -8%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s linear;
  will-change: transform, opacity;
}

.layer-1 {
  background-image: var(--bg1);
}
.layer-2 {
  background-image: var(--bg2);
}
.layer-3 {
  background-image: var(--bg3);
}
.layer-4 {
  background-image: var(--bg4);
}
.layer-5 {
  background-image: var(--bg5);
}

/* Base plate: always painted in light mode so no seam or gap can appear
   between the cross-fading layers. */
.layer-base {
  background-image: var(--bg4);
  opacity: 1 !important;
  filter: saturate(0.9) brightness(1.02);
}

body.dark .scene {
  opacity: 0;
}

.scene {
  opacity: 1;
  transition: opacity 0.9s var(--ease);
}

.veil {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg-veil);
  transition: background 0.8s var(--ease);
}

body:not(.dark) .veil {
  background: linear-gradient(
      180deg,
      rgba(255, 247, 228, 0.62),
      rgba(246, 232, 203, 0.52) 45%,
      rgba(255, 250, 236, 0.66)
    ),
    radial-gradient(70% 50% at 50% 0%, rgba(255, 226, 158, 0.5), transparent 70%);
  backdrop-filter: saturate(1.35);
}

body.dark .veil {
  background: radial-gradient(80% 60% at 50% 110%, rgba(120, 18, 6, 0.75), transparent 70%),
    linear-gradient(180deg, rgba(8, 5, 8, 0.94), rgba(14, 7, 8, 0.9));
}

#embers {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

body.dark #embers {
  opacity: 1;
}

.magma {
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -22vh;
  height: 70vh;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease);
  background: radial-gradient(50% 60% at 20% 100%, rgba(255, 122, 26, 0.6), transparent 70%),
    radial-gradient(45% 55% at 55% 100%, rgba(255, 40, 20, 0.55), transparent 70%),
    radial-gradient(50% 60% at 85% 100%, rgba(255, 170, 40, 0.5), transparent 70%);
  filter: blur(24px);
  animation: flow 14s ease-in-out infinite alternate;
}

body.dark .magma {
  opacity: 1;
}

@keyframes flow {
  0% {
    transform: translate3d(-3%, 2%, 0) scaleY(1);
  }
  50% {
    transform: translate3d(2%, -3%, 0) scaleY(1.12);
  }
  100% {
    transform: translate3d(4%, 1%, 0) scaleY(0.96);
  }
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 90;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent);
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: 0;
  background: #0b0808;
  color: #f3e6cc;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader-inner {
  text-align: center;
  width: min(420px, 82vw);
}

.loader-name {
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  letter-spacing: 0.34em;
  color: #e9cf90;
}

.loader p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  opacity: 0.72;
  margin-top: 0.6rem;
}

.loader-bar {
  margin-top: 1.6rem;
  height: 1px;
  background: rgba(233, 207, 144, 0.25);
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #e9cf90;
  box-shadow: 0 0 12px #e9cf90;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.4rem);
  background: linear-gradient(180deg, var(--panel), transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.topbar.solid {
  border-color: var(--panel-edge);
  background: var(--panel);
}

.brand {
  font-family: "Cinzel", serif;
  font-size: 0.86rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.here {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  white-space: nowrap;
}

.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  gap: 5px;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px var(--ring);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.burger {
  flex-direction: column;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.42s var(--ease), opacity 0.3s var(--ease), width 0.42s var(--ease);
}

.burger span + span {
  margin-top: 4px;
}

.burger span:nth-child(2) {
  width: 12px;
  align-self: flex-start;
  margin-left: 12px;
}

body.nav-open .burger span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
body.nav-open .burger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .burger span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

.theme-btn span {
  font-family: "Cinzel", serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(330px, 84vw);
  z-index: 95;
  padding: 5.2rem 1.4rem 2rem;
  overflow-y: auto;
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.2);
  border-right: 1px solid var(--panel-edge);
  transform: translateX(-104%);
  transition: transform 0.62s var(--ease);
}

body.nav-open .sidebar {
  transform: none;
}

.sidebar h2 {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.8rem;
}

.sidebar ol {
  list-style: none;
  counter-reset: nav;
}

.sidebar a {
  counter-increment: nav;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.44rem 0.7rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.sidebar a::before {
  content: counter(nav, decimal-leading-zero);
  font-family: "Cinzel", serif;
  font-size: 0.6rem;
  opacity: 0.55;
}

.sidebar a:hover,
.sidebar a.active {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--panel-edge);
  transform: translateX(5px);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(10, 7, 4, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

body.nav-open .scrim {
  opacity: 1;
  visibility: visible;
}

main {
  position: relative;
  z-index: 1;
}

section {
  padding: clamp(4.5rem, 11vh, 8rem) clamp(1.1rem, 5vw, 3rem);
  max-width: 1180px;
  margin: 0 auto;
}

.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 0.64rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.section-title {
  font-size: clamp(1.7rem, 4.6vw, 3rem);
  margin-bottom: 0.6rem;
}

.section-sub {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--text-soft);
  max-width: 62ch;
  margin-bottom: 2.4rem;
}

.rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
  margin: 0 auto 2.4rem;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.slide-l {
  transform: translateX(-46px);
}
.reveal.slide-r {
  transform: translateX(46px);
}
.reveal.pop {
  transform: scale(0.9);
}
.reveal.blur {
  filter: blur(12px);
}
.reveal.seen {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 7rem;
}

.hook {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.hero h1 {
  font-size: clamp(2.4rem, 9vw, 5.6rem);
  letter-spacing: 0.08em;
  margin: 0.6rem 0 0.4rem;
}

.rotator {
  min-height: 2.6em;
  display: grid;
  place-items: center;
  font-size: clamp(0.86rem, 2.4vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.rotator span {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transform: translateY(8px);
}

.rotator span.on {
  opacity: 1;
  transform: none;
}

.motto {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.8vw, 1.4rem);
  margin: 1.1rem auto 1.8rem;
  max-width: 40ch;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: "Cinzel", serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid var(--ring);
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), letter-spacing 0.4s var(--ease),
    color 0.4s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  opacity: 0;
  transform: translateY(101%);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.btn:hover {
  transform: translateY(-3px);
  letter-spacing: 0.28em;
  box-shadow: 0 18px 40px -20px var(--accent);
}

.btn:hover::before {
  opacity: 0.92;
  transform: none;
}

body:not(.dark) .btn:hover {
  color: #fffdf6;
}

body.dark .btn:hover {
  color: #1a0c06;
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.btn.solid {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fffaf0;
}

body.dark .btn.solid {
  color: #1a0c06;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  animation: ripple 0.7s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.scroll-cue {
  margin-top: 2.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  opacity: 0.7;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 54px;
  margin: 0.7rem auto 0;
  background: linear-gradient(var(--accent), transparent);
  animation: cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  0%,
  100% {
    transform: scaleY(0.3);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

.frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.frame .art {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
}

.frame .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}

.frame:hover .art img {
  transform: scale(1.06);
}

.frame .edge {
  position: relative;
  width: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 34px rgba(40, 24, 4, 0.45));
}

.frame-portrait {
  max-width: 340px;
  aspect-ratio: 941 / 1155;
}

.frame-portrait .art {
  inset: 22.5% 21% 21.5% 21.5%;
}

.frame-landscape .art {
  inset: 22% 17.5% 21% 17%;
}

.frame-oval {
  max-width: 330px;
  aspect-ratio: 851 / 1243;
}

.frame-oval .art {
  inset: 14.5% 12.5% 13.5% 12.5%;
  border-radius: 50%;
}

.frame.empty .art {
  background: repeating-linear-gradient(
    45deg,
    rgba(154, 116, 32, 0.12),
    rgba(154, 116, 32, 0.12) 10px,
    rgba(154, 116, 32, 0.04) 10px,
    rgba(154, 116, 32, 0.04) 20px
  );
  display: grid;
  place-items: center;
}

.frame.empty .art b {
  font-family: "Cinzel", serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.62;
  text-align: center;
  padding: 0 0.6rem;
}

.duo {
  display: grid;
  gap: clamp(1.6rem, 5vw, 3.4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .duo {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .duo.flip {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.lead {
  font-size: clamp(0.98rem, 2.1vw, 1.05rem);
  color: var(--text);
  max-width: 66ch;
}

.lead + .lead {
  margin-top: 1rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 30px 60px -30px var(--accent);
}

.card h3 {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}

.card p,
.card li {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.chip {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: rgba(212, 175, 55, 0.1);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.chip:hover {
  transform: translateY(-2px);
  background: rgba(212, 175, 55, 0.22);
}

.manuscript {
  max-width: 1180px;
}

.book {
  position: relative;
  margin: 0 auto;
  width: min(920px, 100%);
  perspective: 2200px;
}

.book-cover {
  border-radius: 8px;
  padding: clamp(2.2rem, 7vw, 4rem);
  text-align: center;
  background: linear-gradient(145deg, #4a2c11, #2a1708 60%, #100901);
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), var(--shadow);
  color: #ecd9a8;
  transition: transform 0.9s var(--ease), opacity 0.7s var(--ease);
}

.book-cover h3 {
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: 0.14em;
}

.book-cover p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  opacity: 0.8;
  margin: 0.7rem 0 1.6rem;
}

.book.open .book-cover {
  transform: rotateY(-96deg) translateX(-16%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.book-body {
  display: none;
}

.book.open .book-body {
  display: block;
}

.pages {
  position: relative;
  border-radius: 6px;
  background: linear-gradient(180deg, #f3e2bd, #e3cb9c);
  border: 14px solid #33200d;
  box-shadow: var(--shadow), inset 0 0 80px rgba(120, 82, 30, 0.45);
  min-height: 60vh;
  overflow: hidden;
}

.pages::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 42px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(90, 60, 20, 0.32), transparent);
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 760px) {
  .pages::before {
    display: none;
  }
}

.page {
  display: none;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  color: #2b1b06;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  grid-template-columns: 1fr;
  animation: turn 0.85s var(--ease);
  transform-origin: left center;
}

.page.on {
  display: grid;
}

@media (min-width: 780px) {
  .page.with-art.on {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
  }
}

@keyframes turn {
  from {
    transform: rotateY(-52deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.page p {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: #34210a;
  margin-bottom: 0.9rem;
}

.page h4 {
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b4413;
  margin-bottom: 0.9rem;
  text-shadow: none;
}

.page .drop::first-letter {
  font-family: "Cinzel", serif;
  font-size: 3.1em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
  color: #7c4a10;
}

.book-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.folio {
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  opacity: 0.75;
  min-width: 9ch;
  text-align: center;
}

.timeline {
  position: relative;
  padding-left: 1.6rem;
  display: grid;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--accent), transparent);
}

.node {
  position: relative;
  padding: 0 0 1.6rem 1.2rem;
  cursor: pointer;
}

.node::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.55rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18), 0 0 16px var(--accent);
  transition: transform 0.4s var(--ease);
}

.node:hover::before {
  transform: scale(1.35);
}

.node h3 {
  font-size: 1rem;
}

.node .body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s var(--ease), opacity 0.5s var(--ease);
  opacity: 0;
}

.node.open .body {
  max-height: 320px;
  opacity: 1;
  margin-top: 0.4rem;
}

.bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(150, 120, 60, 0.24);
  overflow: hidden;
  margin-top: 0.35rem;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1.6s var(--ease);
}

.skill-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.skill + .skill {
  margin-top: 0.85rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.filter {
  font-family: "Cinzel", serif;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}

.filter:hover {
  transform: translateY(-2px);
}

.filter.on {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fffaf0;
  border-color: transparent;
}

body.dark .filter.on {
  color: #1a0c06;
}

.project.hide {
  display: none;
}

.status {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.counter {
  font-family: "Cinzel", serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--accent);
}

.books {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.book-card {
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: inherit;
  border-radius: 14px;
  padding: 0.9rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.book-card:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  box-shadow: 0 30px 60px -28px var(--accent);
}

.book-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  display: block;
}

.book-card h3 {
  font-size: 0.92rem;
  margin-top: 0.7rem;
}

.book-card span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.quotes {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
  text-align: center;
  touch-action: pan-y;
}

.quote {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
  padding: 0 0.6rem;
}

.quote.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.quote q {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.15rem, 3.4vw, 1.8rem);
  max-width: 34ch;
  margin: 0 auto;
}

.quote cite {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
}

.quote-nav {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.6rem;
}

.dots {
  display: flex;
  gap: 0.4rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ring);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.dot.on {
  background: var(--accent);
  transform: scale(1.4);
}

@media (min-width: 820px) {

}

.movie {
  text-align: left;
  font-family: "Cinzel", serif;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.movie:hover,
.movie.on {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--panel-edge);
  transform: translateX(6px);
}

.tree {
  display: grid;
  gap: 0.8rem;
}

.fact {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  min-height: 4.4em;
}

form.contact {
  display: grid;
  gap: 0.8rem;
  max-width: 560px;
}

label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

input,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.err {
  font-size: 0.72rem;
  color: var(--coral);
  min-height: 1.1em;
}

body.dark .err {
  color: #ff8a5c;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

footer {
  text-align: center;
  padding: clamp(3rem, 8vh, 5rem) 1.2rem 3rem;
  border-top: 1px solid var(--panel-edge);
  background: var(--panel);
  backdrop-filter: blur(10px);
}

footer .closing {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  max-width: 40ch;
  margin: 0 auto 1.6rem;
}

.copy {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 1.6rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(8, 5, 3, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.modal.on {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  width: min(620px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 1.8rem;
  background: linear-gradient(160deg, #f6e8c8, #e6d0a4);
  color: #2c1c07;
  border: 3px solid rgba(120, 78, 20, 0.6);
  transform: translateY(26px) scale(0.96);
  transition: transform 0.6s var(--ease);
}

.modal.on .modal-card {
  transform: none;
}

.modal-card h3 {
  text-shadow: none;
  margin-bottom: 0.2rem;
}

.modal-card h4 {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7c4a10;
  text-shadow: none;
}

.modal-card p {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
}

.top-btn {
  margin-top: 2rem;
}

.spotlight {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  background: radial-gradient(circle, rgba(255, 216, 140, 0.22), transparent 65%);
}

body.dark .spotlight {
  background: radial-gradient(circle, rgba(255, 110, 40, 0.2), transparent 65%);
}

@media (hover: hover) and (pointer: fine) {
  .spotlight {
    opacity: 1;
  }
}

.easter {
  cursor: help;
  border-bottom: 1px dashed var(--ring);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 140%);
  z-index: 130;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--panel);
  border: 1px solid var(--accent);
  backdrop-filter: blur(10px);
  transition: transform 0.6s var(--ease);
  max-width: 90vw;
  text-align: center;
}

.toast.on {
  transform: translate(-50%, 0);
}

.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.flag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  padding: 0.32rem 0.7rem 0.32rem 0.34rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
}

.flag i {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.flag.usa i {
  background: repeating-linear-gradient(180deg, #b22234 0 3px, #fff 3px 6px);
}
.flag.swiss i {
  background: #d52b1e;
}
.flag.dubai i {
  background: linear-gradient(90deg, #ce1126 0 25%, #007a3d 25% 50%, #fff 50% 75%, #000 75%);
}
.flag.hawaii i {
  background: linear-gradient(180deg, #0a3161 0 33%, #fff 33% 66%, #c8102e 66%);
}
.flag.japan i {
  background: radial-gradient(circle at 50% 50%, #bc002d 0 34%, #fff 35%);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body.calm .layer,
body.calm .magma,
body.calm #embers,
body.calm .spotlight {
  animation: none !important;
  opacity: 0.001;
}

body.calm .layer.on {
  opacity: 0.9;
}

@media (max-width: 620px) {
  .here {
    display: none;
  }
  section {
    padding-top: 4rem;
  }
}
/* ============ REFINEMENTS ============ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Loader --- */

@keyframes lmspin {
  to {
    transform: rotate(360deg);
  }
}

.loader-name {
  font-size: clamp(1rem, 3.2vw, 1.4rem);
  letter-spacing: 0.3em;
}

/* --- Brand + toggles --- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--panel-edge);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}

@media (max-width: 620px) {
  .brand-name {
    display: none;
  }
}

.theme-btn {
  position: relative;
  overflow: hidden;
}

.theme-btn .ico {
  position: absolute;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  transition: transform 0.55s var(--ease), opacity 0.45s var(--ease);
}

.theme-btn .sun circle {
  fill: currentColor;
  stroke: none;
}

.theme-btn .moon {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform: rotate(-80deg) scale(0.5);
}

body.dark .theme-btn .sun {
  opacity: 0;
  transform: rotate(80deg) scale(0.5);
}

body.dark .theme-btn .moon {
  opacity: 1;
  transform: none;
}

.theme-btn:hover .sun .rays {
  animation: spinRays 6s linear infinite;
  transform-origin: 12px 12px;
}

@keyframes spinRays {
  to {
    transform: rotate(360deg);
  }
}

/* --- Hamburger --- */
.burger {
  gap: 0;
  align-content: center;
  justify-items: center;
}

.burger span {
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}

.burger span + span {
  margin-top: 5px;
}

.burger span:nth-child(2) {
  width: 18px;
  align-self: auto;
  margin-left: 0;
  opacity: 0.62;
}

.burger:hover span:nth-child(2) {
  opacity: 1;
}

body.nav-open .burger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

body.nav-open .burger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Hero --- */
.hero-inner {
  max-width: 900px;
}

.hero-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2.2rem, 8.4vw, 5.2rem);
  letter-spacing: 0.08em;
  line-height: 1.06;
  margin: 0.7rem 0 0.4rem;
}

.hero-title .word {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.1em;
  vertical-align: bottom;
}

.hero-title .word > span {
  display: inline-block;
  transform: translateY(112%);
  animation: wordUp 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: 0.15s;
}

.hero-title .word:nth-child(2) > span {
  animation-delay: 0.32s;
}

.hero-title .word:nth-child(3) > span {
  animation-delay: 0.49s;
}

@keyframes wordUp {
  to {
    transform: none;
  }
}

/* --- Light mode typography --- */
body:not(.dark) {
  letter-spacing: 0.012em;
}

body:not(.dark) .lead,
body:not(.dark) .card p,
body:not(.dark) .page p {
  text-shadow: none;
}

body:not(.dark) .section-title {
  color: #2a1c07;
  font-weight: 700;
  letter-spacing: 0.05em;
}

body:not(.dark) .section-sub,
body:not(.dark) .hero-intro,
body:not(.dark) .motto {
  color: #4d3a1c;
}

body:not(.dark) .eyebrow {
  color: #8a6412;
}

body:not(.dark) .lead {
  color: #33260f;
  line-height: 1.78;
}

body:not(.dark) .chip,
body:not(.dark) .status,
body:not(.dark) .hero-stats small {
  color: #6d4f11;
}

body:not(.dark) .card {
  background: rgba(255, 252, 244, 0.82);
  border-color: rgba(140, 104, 26, 0.3);
}

/* --- Dark mode majestic glow --- */
body.dark h1,
body.dark h2,
body.dark .hero-title,
body.dark .section-title {
  color: #ffdf9e;
  text-shadow: 0 0 12px rgba(255, 190, 90, 0.5), 0 0 38px rgba(255, 120, 30, 0.32),
    0 0 78px rgba(255, 70, 20, 0.18);
}

body.dark .eyebrow,
body.dark .counter,
body.dark .hero-stats b,
body.dark .folio,
body.dark .status {
  color: #ffc061;
  text-shadow: 0 0 12px rgba(255, 150, 50, 0.5);
}

body.dark .brand,
body.dark .motto,
body.dark .quote q {
  text-shadow: 0 0 14px rgba(255, 160, 60, 0.28);
}

/* --- Journey spacing --- */
#journey .timeline {
  padding-left: 2rem;
}

#journey .node {
  padding: 1.1rem 1.2rem 1.1rem 1.3rem;
  margin-bottom: 1.15rem;
}

#journey .node::before {
  left: -2rem;
  top: 1.5rem;
}

#journey .node .body p {
  margin-top: 0.3rem;
}

#journey .node h3 {
  margin-bottom: 0.25rem;
}

/* --- Book: realistic flipping --- */
.book {
  perspective: 2600px;
}

.pages {
  transform-style: preserve-3d;
}

.sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 8;
  display: none;
  transform-origin: left center;
  backface-visibility: hidden;
  background: linear-gradient(90deg, #f4e4c0, #e6cf9f 60%, #d9bf8b);
  box-shadow: -14px 0 34px rgba(60, 38, 8, 0.35);
  border-radius: 0 6px 6px 0;
}

.sheet.flip-next {
  display: block;
  animation: flipNext 0.9s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
}

.sheet.flip-prev {
  display: block;
  left: 0;
  right: 50%;
  transform-origin: right center;
  border-radius: 6px 0 0 6px;
  box-shadow: 14px 0 34px rgba(60, 38, 8, 0.35);
  animation: flipPrev 0.9s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
}

@keyframes flipNext {
  from {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  to {
    transform: rotateY(-172deg);
    filter: brightness(0.72);
  }
}

@keyframes flipPrev {
  from {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  to {
    transform: rotateY(172deg);
    filter: brightness(0.72);
  }
}

@media (max-width: 760px) {
  .sheet.flip-next,
  .sheet.flip-prev {
    left: 0;
    right: 0;
    transform-origin: center left;
  }
}

.page {
  animation: pageIn 0.6s var(--ease);
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.book-cover {
  transform-origin: left center;
}

.book.closing .book-cover {
  animation: coverBack 0.9s var(--ease);
}

@keyframes coverBack {
  from {
    transform: rotateY(-96deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* theme-adaptive parchment */
body.dark .pages {
  background: linear-gradient(180deg, #2a1c0d, #1c1207);
  border-color: #120b04;
  box-shadow: var(--shadow), inset 0 0 90px rgba(255, 130, 40, 0.14);
}

body.dark .sheet {
  background: linear-gradient(90deg, #2e1e0e, #221507);
}

body.dark .page p {
  color: #f0d3a4;
}

body.dark .page h4 {
  color: #ffc061;
  text-shadow: 0 0 12px rgba(255, 150, 50, 0.4);
}

body.dark .page .drop::first-letter {
  color: #ff9e45;
}

body.dark .modal-card {
  background: linear-gradient(160deg, #2b1c0d, #1a1006);
  color: #f0d3a4;
  border-color: rgba(255, 158, 69, 0.4);
}

body.dark .modal-card h3 {
  color: #ffdf9e;
}

body.dark .modal-card h4 {
  color: #ffc061;
}

/* --- Stories that shaped me --- */
.marquee {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}

.marquee.swap {
  opacity: 0;
  transform: translateY(10px);
}

.marquee h3 {
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  margin: 0.35rem 0 0.5rem;
}

/* --- Knowledge tree --- */
.knowledge-tree {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 1rem 0 0;
}

.kt-canopy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.4rem;
  position: relative;
  padding-bottom: 2.6rem;
}

.kt-canopy::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
}

.kt-branch {
  position: relative;
  font-family: "Cinzel", serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

.kt-branch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(var(--ring), transparent);
}

.kt-branch:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.kt-branch.on {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fffaf0;
  box-shadow: 0 18px 40px -22px var(--accent);
}

body.dark .kt-branch.on {
  color: #1a0c06;
}

.kt-trunk {
  width: 100%;
  display: grid;
  place-items: center;
  height: 92px;
}

.kt-trunk i {
  display: block;
  width: 8px;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--accent), rgba(154, 116, 32, 0.15));
  box-shadow: 0 0 22px -6px var(--accent);
}

.kt-roots {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  position: relative;
  padding-top: 0.4rem;
}

.kt-roots::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  max-width: 70vw;
  height: 1px;
  background: radial-gradient(closest-side, var(--ring), transparent);
}

.kt-panels {
  position: relative;
  margin-top: 1.8rem;
}

.kt-panel {
  display: none;
  animation: pageIn 0.55s var(--ease);
}

.kt-panel.on {
  display: block;
}

body.dark .rotator {
  color: #ffb45e;
  text-shadow: 0 0 14px rgba(255, 150, 50, 0.55);
}

.pages {
  min-height: clamp(360px, 46vh, 560px);
}

/* no bare background beyond the scene layers */
body {
  background: #f3ead6;
}

body.dark {
  background: #0b0608;
}

/* ============================================================
   FINAL MASTER REVISION — The Final Art
   ============================================================ */

body:not(.dark) {
  background: #eadfc4;
}
body.dark {
  background: #0b0709;
}

/* ---------- Cartouche section headings ---------- */

body.dark .cartouche::before {
  border-color: rgba(255, 158, 69, 0.5);
  background: linear-gradient(180deg, rgba(46, 22, 6, 0.85), rgba(24, 11, 3, 0.8));
  box-shadow:
    inset 0 0 0 6px rgba(255, 158, 69, 0.14),
    0 0 26px rgba(255, 140, 50, 0.28);
}

.cartouche .eyebrow {
  margin-bottom: 0.2rem;
}
.cartouche .section-title {
  margin: 0;
  font-size: clamp(1.25rem, 4.6vw, 2.1rem);
}
body:not(.dark) .cartouche .section-title,
body:not(.dark) .cartouche .eyebrow {
  color: #3d2a0c;
}
@media (max-width: 560px) {

}

/* ---------- Section header artwork ---------- */

@media (max-width: 620px) {

}

/* ---------- Mission / Vision ---------- */
.mv {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .mv {
    grid-template-columns: 1fr 1fr;
  }
}
.mv .card h3 {
  letter-spacing: 0.12em;
}

/* ---------- Flip cards (Skills & Instruments) ---------- */
.flipgrid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.flipcard {
  perspective: 1200px;
  background: none;
  border: 0;
  padding: 0;
  min-height: 168px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 168px;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--ease);
}
.flipcard.on .flipcard-inner,
.flipcard:focus-visible .flipcard-inner {
  transform: rotateY(180deg);
}
.flipcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  backdrop-filter: blur(7px);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: var(--shadow);
}
.flipcard-face.back {
  transform: rotateY(180deg);
}
.flipcard-face h4 {
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}
.flipcard-face p {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.flipcard-face .hint {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
}

/* ---------- Cinema ---------- */
.cinema {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  justify-items: center;
}
.cine {
  perspective: 1400px;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 3;
}
.cine-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s var(--ease);
  border-radius: 14px;
}
.cine.flipped .cine-inner {
  transform: rotateY(180deg);
}
.cine-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--panel-edge);
  box-shadow: var(--shadow);
}
.cine-front {
  display: grid;
  place-items: center;
  background: var(--panel);
  cursor: pointer;
}
.cine-front .cine-name {
  position: relative;
  z-index: 2;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0 1.2rem;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.cine-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}
.cine.revealed .cine-front img {
  opacity: 1;
  transform: scale(1);
}
.cine.revealed .cine-front .cine-name {
  opacity: 0;
  transform: translateY(-10px);
}
.cine-front .cine-tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  z-index: 3;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f6e4bb;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.cine.revealed .cine-front .cine-tap {
  opacity: 0.95;
}
.cine-back {
  transform: rotateY(180deg);
  background: var(--panel);
  backdrop-filter: blur(9px);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  justify-content: center;
  overflow-y: auto;
}
.cine-back h3 {
  font-size: 1.02rem;
}
.cine-back p {
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.cine-back .btn {
  align-self: flex-start;
  font-size: 0.72rem;
}
.cine-back .cine-close {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

/* ---------- Gallery placeholders ---------- */

/* ---------- Roman numerals in the Halls ---------- */
.sidebar ol {
  counter-reset: hall;
}
.sidebar li {
  counter-increment: hall;
}
.sidebar a::before {
  content: counter(hall, upper-roman) ".";
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  min-width: 2.2em;
  display: inline-block;
  color: var(--accent);
  opacity: 0.85;
}

/* ---------- Timeline (interactive) ---------- */

.tl-item.open::before,
.tl-item:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 16px var(--accent);
}

.tl-item.open .tl-body {
  max-height: 340px;
  opacity: 1;
  margin-top: 0.5rem;
}

/* ---------- Music ---------- */
.music-list {
  display: grid;
  gap: 0.7rem;
  max-width: 720px;
  margin: 0 auto;
}
.track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background: var(--panel);
  transition: transform 0.4s var(--ease);
}
.track:hover {
  transform: translateX(6px);
}
.track .num {
  font-family: "Cinzel", Georgia, serif;
  color: var(--accent);
  font-size: 0.9rem;
}
.track b {
  display: block;
  font-size: 0.95rem;
}
.track small {
  color: var(--text-soft);
  font-size: 0.78rem;
}
.eq {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 18px;
}
.eq i {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: eqbar 1.1s ease-in-out infinite;
}
.eq i:nth-child(2) {
  animation-delay: 0.2s;
}
.eq i:nth-child(3) {
  animation-delay: 0.4s;
}
.eq i:nth-child(4) {
  animation-delay: 0.6s;
}
@keyframes eq {
  0%,
  100% {
    height: 5px;
  }
  50% {
    height: 18px;
  }
}

/* ---------- Certificates ---------- */
.cert {
  position: relative;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background: var(--panel);
  padding: 1.2rem 1.2rem 1.2rem 1.4rem;
  overflow: hidden;
}
.cert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.cert .seal {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  color: var(--accent);
  opacity: 0.85;
}

/* ---------- Responsiveness hardening ---------- */
section {
  max-width: 1180px;
}
.duo,
.grid,
.gallery,
.movies,
.books {
  width: 100%;
}
img,
svg,
canvas {
  max-width: 100%;
}
@media (max-width: 760px) {
  section {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  .book-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn-row {
    justify-content: center;
  }
  .topbar {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .brand-name {
    display: none;
  }
  .here {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The cartouche plate is drawn in CSS, so no backing plate needs blending away. */

/* Centered section structure */
section > .eyebrow,
section > .section-title,
section > .section-sub,
.about-inline > .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
section > .section-sub,
.about-inline > .section-sub {
  max-width: 760px;
}
section > .rule,
.about-inline > .rule {
  margin-left: auto;
  margin-right: auto;
}
.cinema {
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .cinema {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* No horizontal scroll on any viewport */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
.scene {
  overflow: hidden;
}

/* ---- Final refinements ---- */
.greeting {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-style: italic;
}
.lead{font-family:"EB Garamond",Georgia,serif}
.stand-title{text-align:center;margin:48px 0 6px;font-size:clamp(1.4rem,3vw,2rem)}
.stand-sub{text-align:center;opacity:.75;margin:0 0 22px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.value{text-align:center;padding:22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.value-num{font-family:"Cinzel",serif;letter-spacing:.2em;opacity:.6;font-size:.8rem}
.value h4{margin:8px 0 6px}
.book-cover{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cover-art{width:min(340px,80vw);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.cover-hint{font-size:.8rem;opacity:.7;letter-spacing:.08em}
.book.open .book-cover{display:none}
.book .book-body{display:none}
.book.open .book-body{display:block}
.frontispiece{padding:0!important;overflow:hidden}
.frontis-art{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.frontis-plate{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);color:#f6ecd8;text-align:center}

.chapter-head{height:34%;overflow:hidden;border-bottom:1px solid var(--line)}
.chapter-head img{width:100%;height:100%;object-fit:cover}
.page-text{padding:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1000px;margin:0 auto}
.stat{perspective:1000px;background:none;border:0;height:200px;cursor:pointer}
.stat-inner{position:relative;width:100%;height:100%;transition:transform .7s;transform-style:preserve-3d}
.stat.on .stat-inner{transform:rotateY(180deg)}
.stat-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px;text-align:center}
.stat-back{transform:rotateY(180deg);font-size:.9rem}
.stat .counter{font-family:"Cinzel",serif;font-size:2.6rem;margin:0}

.cert-frame{max-width:640px;margin:0 auto 28px}
.ach-grid{margin-top:8px}

/* ============================================================
   FINISHING PASS — legibility, floating book, alignment, desktop grid
   ============================================================ */

/* ---------- 1. Manuscript readability (Light Mode only) ---------- */
body:not(.dark) .page p,
body:not(.dark) .page-text p {
  color: #3a2409;
  opacity: 1;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.55);
}
body:not(.dark) .page h4,
body:not(.dark) .page-text h4 {
  color: #6a3f0b;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.6);
}
body:not(.dark) .page .drop::first-letter {
  color: #8a4f0d;
}
body:not(.dark) .folio,
body:not(.dark) .cover-hint {
  color: #4a3213;
  opacity: 0.95;
}
body:not(.dark) .frontis-plate {
  background: linear-gradient(to top, rgba(28, 16, 4, 0.86), rgba(28, 16, 4, 0.1));
}
body:not(.dark) .frontis-plate h4,
body:not(.dark) .frontis-plate .frontis-line {
  color: #fdf3dd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* ---------- 9. The book floats: no card, no container ---------- */
.manuscript .book {
  background: none;
  border: 0;
  box-shadow: none;
}
.pages {
  border: 0 !important;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(140, 100, 40, 0.045) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(140, 100, 40, 0.04) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, #f6e8c8, #e7d2a6);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    0 40px 70px -30px rgba(40, 24, 4, 0.55),
    0 90px 90px -60px rgba(40, 24, 4, 0.45);
  transition: transform 0.5s var(--ease);
}
body.dark .pages {
  border: 0 !important;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 160, 60, 0.09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 150, 60, 0.035) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #2c1d0e, #1b1107);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 0 90px -30px rgba(255, 130, 40, 0.28);
}
.book-cover {
  background: none;
  border: 0;
  box-shadow: none;
  padding: clamp(1rem, 3vw, 2rem);
}
.pages::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(60, 38, 8, 0.16), transparent 12%, transparent 88%, rgba(60, 38, 8, 0.16)),
    radial-gradient(140% 120% at 50% -20%, rgba(255, 248, 225, 0.35), transparent 55%);
  z-index: 4;
}

/* ---------- 5 & 7. Universal button + card alignment ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  padding: 0.72rem 1.25rem;
  line-height: 1.2;
}
.btn-row,
.links,
.book-nav,
.quote-nav,
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.links {
  margin-top: 1.1rem;
}
.card #factBtn,
#facts .btn {
  display: inline-flex;
  margin: 1rem auto 0;
}
#facts {
  text-align: center;
}
.top-btn {
  margin: 0 auto;
}
footer {
  text-align: center;
}

.cine-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  padding: clamp(1rem, 3vw, 1.6rem);
}
.cine-back p {
  margin: 0;
}
.cine-back .btn,
.cine-back .cine-close {
  position: static !important;
  width: min(220px, 84%);
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ---------- 3 & 4. Framed portraits fill their frames ---------- */
.frame .art img.fit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cert-frame {
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* ---------- 8. Majestic highlighted words ---------- */
.hl {
  font-style: normal;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7a5410;
  background: linear-gradient(180deg, transparent 68%, rgba(196, 158, 68, 0.28) 68%);
  padding: 0 0.06em;
}
body.dark .hl {
  color: #ffc069;
  background: linear-gradient(180deg, transparent 68%, rgba(255, 150, 60, 0.22) 68%);
  text-shadow: 0 0 12px rgba(255, 150, 50, 0.45);
}

/* ---------- 10. Desktop grid system ---------- */
@media (min-width: 1024px) {
  main section {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .grid,
  .flipgrid,
  .cinema,
  .books,
  .music-list,
  .kt-panels,
  .values,
  .stats,
  .certs {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .grid,
  .values,
  .flipgrid,
  .certs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
  }
  .grid > *,
  .values > *,
  .certs > *,
  .card {
    height: 100%;
  }
  .card {
    display: flex;
    flex-direction: column;
  }
  .card .chips,
  .card .links {
    margin-top: auto;
    padding-top: 0.9rem;
  }
  .cinema {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .duo {
    align-items: start;
    gap: 34px;
  }
  /* odd card out is centred beneath the pair */
  .grid > *:nth-child(3):nth-last-child(1),
  .values > *:nth-child(3):nth-last-child(1),
  .stats > *:nth-child(3):nth-last-child(1) {
    grid-column: auto;
  }
  .grid:has(> *:nth-child(3):nth-last-child(1)),
  .values:has(> *:nth-child(3):nth-last-child(1)),
  .stats:has(> *:nth-child(3):nth-last-child(1)) {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(1),
  .values:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(1),
  .stats:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(1) {
    grid-column: 1 / span 2;
  }
  .grid:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(2),
  .values:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(2),
  .stats:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(2) {
    grid-column: 3 / span 2;
  }
  .grid:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(3),
  .values:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(3),
  .stats:has(> *:nth-child(3):nth-last-child(1)) > *:nth-child(3) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 620px) {
  .cine-back .btn,
  .cine-back .cine-close {
    width: 90%;
  }
  .links .btn {
    flex: 1 1 44%;
  }
}

/* highlight on dark plates */
.frontis-plate .hl,
.chapter-plate .hl {
  color: #ffd79a;
  background: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
  /* four cards read best as a balanced 2 x 2 */
  .grid:has(> *:nth-child(4):nth-last-child(1)),
  .certs:has(> *:nth-child(4):nth-last-child(1)),
  .values:has(> *:nth-child(4):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 940px;
  }
}

/* =====================================================================
   THE ULTIMATUM — REFINEMENT LAYER
   Every rule below refines the existing gallery. Nothing is redesigned:
   geometry, proportion, motion and desktop balance only.
   ===================================================================== */

/* ---------- 0. Layout utilities (replaces former inline styles) ---------- */
.gap-below { margin-bottom: 1.6rem; }
.gap-above { margin-top: 1.6rem; }
.gap-above-sm { margin-top: 1.4rem; }

/* ---------- 1. Brand monogram ---------- */
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #3b2a0b;
  background: linear-gradient(155deg, #f6e3b0, #c49e44 55%, #8a6519);
  border: 1px solid var(--panel-edge);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.brand:hover .brand-mark {
  transform: rotate(-4deg) scale(1.06);
  box-shadow: 0 10px 26px -10px rgba(196, 158, 68, 0.9);
}
body.dark .brand-mark {
  color: #2a1503;
  background: linear-gradient(155deg, #ffd79a, #ff9e45 55%, #a5500d);
  box-shadow: 0 0 22px -4px rgba(255, 150, 60, 0.55);
}

/* ---------- 2. Loading screen: the Renaissance clock ---------- */
.loader-inner { display: grid; justify-items: center; gap: 0.9rem; }
.clock {
  position: relative;
  width: clamp(168px, 34vw, 232px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: clock-breathe 5.5s ease-in-out infinite;
}
.clock svg { width: 100%; height: 100%; overflow: visible; }
.clock-outer {
  fill: none;
  stroke: url(#clockGold);
  stroke-width: 9;
  filter: drop-shadow(0 14px 30px rgba(40, 24, 4, 0.55));
}
.clock-bezel { fill: none; stroke: rgba(120, 86, 20, 0.55); stroke-width: 2; }
.clock-face { fill: url(#clockFace); }
.clock-inner-ring {
  fill: none;
  stroke: rgba(120, 86, 20, 0.35);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
  animation: clock-ring 26s linear infinite reverse;
  transform-origin: 120px 120px;
}
.clock-ticks line { stroke: rgba(88, 62, 14, 0.75); stroke-width: 1.4; }
.clock-ticks line.major { stroke-width: 3; stroke: rgba(88, 62, 14, 0.95); }
.clock-numerals text {
  fill: #4a340f;
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.04em;
}
.hand {
  stroke-linecap: round;
  transform-origin: 120px 120px;
  transform-box: view-box;
}
.hand-hour { stroke: #4a340f; stroke-width: 6; }
.hand-minute { stroke: #6b4a12; stroke-width: 4; }
.hand-second { stroke: #b3411f; stroke-width: 1.8; }
.clock-pin { fill: #4a340f; }
.clock-mark {
  position: absolute;
  bottom: 26%;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: rgba(74, 52, 15, 0.72);
}
body.dark .clock-face { fill: #241203; }
body.dark .clock-numerals text { fill: #ffd79a; }
body.dark .clock-ticks line { stroke: rgba(255, 190, 120, 0.6); }
body.dark .clock-ticks line.major { stroke: rgba(255, 200, 140, 0.95); }
body.dark .hand-hour,
body.dark .hand-minute { stroke: #ffc069; }
body.dark .clock-pin { fill: #ffc069; }
body.dark .clock-mark { color: rgba(255, 215, 154, 0.7); }
@keyframes clock-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.015); }
}
@keyframes clock-ring { to { transform: rotate(360deg); } }
.loader.done { pointer-events: none; }

/* ---------- 3. The welcome introduction ---------- */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(30, 16, 4, 0.86), rgba(12, 6, 2, 0.97));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
.welcome.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease), visibility 0s;
}
.welcome-inner {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 0 1.4rem;
  text-align: center;
}
.welcome-flourish {
  color: rgba(255, 200, 130, 0.75);
  font-size: clamp(1rem, 3vw, 1.5rem);
  opacity: 0;
  transform: translateY(10px);
}
.welcome-flourish.flip { transform: translateY(-10px) rotate(180deg); }
.welcome.on .welcome-flourish {
  animation: welcome-flourish 1.2s var(--ease) 0.15s forwards;
}
.welcome-line {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.35rem, 4.6vw, 2.9rem);
  letter-spacing: 0.14em;
  color: #f7e3bb;
  text-shadow: 0 0 34px rgba(255, 160, 60, 0.35);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(6px);
}
.welcome.on .welcome-line {
  animation: welcome-rise 1.5s var(--ease) forwards;
}
@keyframes welcome-rise {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes welcome-flourish {
  to { opacity: 0.9; transform: none; }
}

/* ---------- 4. Hero portrait ---------- */
.hero-portrait { position: relative; }

/* ---------- 5. Hero typography and highlighted words ---------- */
.hero .motto {
  font-size: clamp(1.12rem, 2.6vw, 1.72rem);
  line-height: 1.6;
  max-width: 46ch;
  margin-inline: auto;
  letter-spacing: 0.012em;
}
.hero .hook { letter-spacing: 0.3em; }
.hl {
  font-weight: 700;
  font-size: 1.06em;
}
body.dark .hl {
  color: #ff9e45;
  text-shadow: 0 0 14px rgba(255, 150, 50, 0.55), 0 0 30px rgba(255, 110, 20, 0.28);
}
body:not(.dark) .hero .hl,
body:not(.dark) .hl {
  color: #a4560c;
  text-shadow: 0 0 12px rgba(255, 150, 60, 0.28);
}
.hero .hl { font-size: 1.1em; }

/* ---------- 6. Frames: transparency, proportion, integrity ---------- */
.frame .art { background: rgba(20, 10, 2, 0.18); }
.frame .edge {
  background: none;
  mix-blend-mode: normal;
  filter: drop-shadow(0 22px 30px rgba(40, 24, 4, 0.42));
}
body.dark .frame .edge {
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 18px rgba(255, 150, 60, 0.22));
}
.frame-portrait {
  aspect-ratio: 500 / 636;
  max-width: 380px;
}
.frame-portrait .art { inset: 19.6% 22.6% 18.8% 23%; }

.frame-landscape .art { inset: 22.6% 16.7% 21.1% 16.3%; }
.frame-oval {
  aspect-ratio: 623 / 918;
  max-width: 350px;
}
.frame-oval .art {
  inset: 16.8% 14.4% 13.7% 13.9%;
  border-radius: 50% / 50%;
}
.frame .art img { object-position: center top; }
.frame-oval .art img,
.frame-portrait .art img { object-position: center 22%; }
.frame {
  transition: transform 0.9s var(--ease);
  isolation: auto;
}
.frame:hover { transform: translateY(-4px); }

/* ---------- 7. Hall I — About Me balance ---------- */
@media (min-width: 1024px) {
  .about-inline .duo {
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) 1.24fr;
    align-items: stretch;
    gap: 46px;
  }
  .about-inline .duo > .frame {
    max-width: 100%;
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
    min-height: 100%;
  }
  .about-inline .duo > .frame .art { inset: 19.6% 22.6% 18.8% 23%; }
  .about-inline .duo > .frame .edge {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}
.about-inline .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.7rem;
  max-width: 780px;
  margin-inline: auto;
}
.chips { justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 0.78rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 22px -14px rgba(196, 158, 68, 0.9);
}

/* ---------- 8. Mission, Vision and the Personal creed ---------- */
@media (min-width: 900px) {
  .mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
  }
  .mv > *:nth-child(3):nth-last-child(1) {
    grid-column: 1 / -1;
    max-width: 62%;
    margin-inline: auto;
    width: 100%;
  }
}

/* ---------- 9. Chronicle of Years and Leadership portraits ---------- */
@media (min-width: 1024px) {
  #journey .duo,
  #leadership .duo {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) 1.2fr;
    align-items: stretch;
    gap: 42px;
  }
  #journey .duo .frame,
  #leadership .duo .frame,
  #achievements .frame {
    max-width: 100%;
    width: 100%;
  }
  #journey .duo .frame .edge,
  #leadership .duo .frame .edge {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  #journey .duo .frame,
  #leadership .duo .frame { aspect-ratio: auto; height: 100%; }
  .cert-frame { max-width: 600px; }
}

/* ---------- 10. Records in Numbers ---------- */
.stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  max-width: 900px;
}
.stat { height: 158px; }
.stat-face { padding: 12px; gap: 4px; border-radius: 12px; }
.stat .counter { font-size: clamp(1.7rem, 3.4vw, 2.1rem); }
.stat-face p,
.stat-back {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #a4560c;
  text-shadow: 0 0 12px rgba(255, 150, 60, 0.22);
}
body.dark .stat-face p,
body.dark .stat-back {
  color: #ff9e45;
  text-shadow: 0 0 14px rgba(255, 150, 50, 0.5);
}
.stat:hover .stat-face { border-color: var(--accent); }

/* ---------- 11. The Manuscript ---------- */
.frontis-plate {
  top: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.78));
}
.frontis-plate .frontis-eyebrow { order: -1; }
.frontis-plate h3,
.frontis-plate h2 {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.3rem, 3.4vw, 2.15rem);
  letter-spacing: 0.06em;
  text-align: center;
}
.frontis-plate p:not(.frontis-eyebrow) {
  margin: 0;
  max-width: 40ch;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.9;
}
.chapter-head {
  height: 30%;
  background: rgba(24, 12, 2, 0.35);
}
.chapter-head img {
  object-fit: cover;
  object-position: center 28%;
}
@media (min-width: 1024px) {
  .chapter-head { height: 34%; }
}

/* ---------- 12. Favorite Cinema ---------- */
.cine { cursor: pointer; }
.cine-front { display: block; background: #17100a; }
.cine-front img {
  opacity: 1;
  transform: scale(1);
  filter: grayscale(1) contrast(1.04) brightness(0.86);
  transition: filter 0.7s var(--ease), transform 0.9s var(--ease),
    opacity 0.6s var(--ease);
}
.cine:hover .cine-front img,
.cine:focus-visible .cine-front img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.07);
}
.cine-veil {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  gap: 0.35rem;
  padding: 1.5rem 0.95rem 0.95rem;
  text-align: center;
  background: linear-gradient(to top, rgba(8, 4, 1, 0.92), rgba(8, 4, 1, 0.55) 55%, transparent);
  backdrop-filter: blur(0px);
  transform: translateY(38%);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.6s var(--ease),
    backdrop-filter 0.6s var(--ease);
}
.cine:hover .cine-veil,
.cine:focus-visible .cine-veil,
.cine.touched .cine-veil {
  transform: translateY(0);
  opacity: 1;
  backdrop-filter: blur(4px);
}
.cine-front .cine-name {
  position: static;
  color: #f8e7c2;
  opacity: 1;
  transform: none;
  padding: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.cine-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: #e8d3ae;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.cine-front .cine-tap {
  position: static;
  opacity: 0.85;
  padding-top: 0.15rem;
}
.cine:hover { transform: translateY(-6px); }
.cine {
  transition: transform 0.6s var(--ease);
}
.cine:hover .cine-face,
.cine:focus-visible .cine-face {
  border-color: var(--accent);
  box-shadow: 0 26px 48px -26px rgba(196, 158, 68, 0.85);
}
body.dark .cine:hover .cine-face {
  box-shadow: 0 26px 48px -24px rgba(255, 150, 60, 0.6);
}
.cine-back { gap: 0.9rem; }
.cine-trailer { gap: 0.5rem; }
.ico-play {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.4s var(--ease);
}
.cine-trailer:hover .ico-play { transform: translateX(3px) scale(1.12); }
.cine-close {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
}
.cine-close:hover { text-decoration: underline; }
.cine:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ---------- 13. Navigation, links and micro-interactions ---------- */
.sidebar a,
.brand,
footer a {
  position: relative;
  transition: color 0.4s var(--ease), letter-spacing 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.side a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: transform 0.55s var(--ease);
}
.sidebar a:hover::after,
.sidebar a.active::after { transform: scaleX(1); }
.sidebar a:hover { letter-spacing: 0.08em; color: var(--accent); }
.btn {
  transition: transform 0.35s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.card,
.book-card,
.track,
.cert {
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
    border-color 0.55s var(--ease);
}
.card:hover,
.book-card:hover,
.cert:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 28px 50px -32px rgba(60, 38, 8, 0.9);
}
.icon-btn:hover .ico { transform: rotate(-8deg) scale(1.08); }
.icon-btn .ico { transition: transform 0.45s var(--ease); }

/* Gilded cursor companion */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(154, 116, 32, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
  transition: opacity 0.4s var(--ease), width 0.35s var(--ease),
    height 0.35s var(--ease), margin 0.35s var(--ease),
    background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cursor-ring.on { opacity: 0.85; }
.cursor-ring.hot {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: rgba(196, 158, 68, 0.12);
  border-color: var(--accent);
}
body.dark .cursor-ring { border-color: rgba(255, 158, 69, 0.75); }
@media (hover: none), (max-width: 900px) {
  .cursor-ring { display: none; }
}

/* ---------- 14. Scroll reveal choreography ---------- */
.reveal.rv-left { transform: translate3d(-46px, 12px, 0); }
.reveal.rv-right { transform: translate3d(46px, 12px, 0); }
.reveal.rv-scale { transform: scale(0.94); }
.reveal.rv-blur { filter: blur(9px); }
.reveal.rv-tilt { transform: perspective(900px) rotateX(8deg) translateY(26px); }
.reveal.rv-left.seen,
.reveal.rv-right.seen,
.reveal.rv-scale.seen,
.reveal.rv-tilt.seen { transform: none; }
.reveal.rv-blur.seen { filter: blur(0); }
.reveal {
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease),
    filter 0.95s var(--ease);
}

/* Floating decorative motes around the halls */
.section-title { position: relative; }
.rule { position: relative; overflow: visible; }
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: mote-float 6s ease-in-out infinite;
}
@keyframes mote-float {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(-7px); opacity: 1; }
}

/* ---------- 15. Desktop is the first priority ---------- */
@media (min-width: 1280px) {
  main section {
    max-width: 1220px;
    padding-block: clamp(3.6rem, 6vw, 5.4rem);
  }
  .section-sub { max-width: 68ch; margin-inline: auto; }
  .cinema { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .cine { max-width: 320px; }
  .hero-inner { max-width: 1080px; margin-inline: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cinema { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .about-inline .duo,
  #journey .duo,
  #leadership .duo { gap: 28px; }
}
@media (max-width: 620px) {
  .cine-desc { font-size: 0.72rem; }
  .stat { height: 148px; }
  .clock { width: min(64vw, 200px); }
}

/* ---------- 16. Respect for reduced motion ---------- */
body.calm .clock,
body.calm .rule::after,
body.calm .clock-inner-ring { animation: none; }
body.calm .skills-flipgrid .flipcard-face::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 0.4s; }
}

/* ---------- 17. Hall I — About Me editorial refinement ---------- */
/* The hero grid centres its items; stretch them so nothing can exceed the
   viewport on small screens (children keep their own max-width + auto margins). */
.hero > * {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hero-inner { margin-inline: auto; }
.about-inline .chips { max-width: min(780px, 100%); }

.about-inline {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.05rem, 4vw, 3rem);
}
.about-inline .duo > .frame { align-self: start; }

@media (min-width: 1024px) {
  .about-inline .duo {
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(2.4rem, 4vw, 3.6rem);
    justify-content: center;
  }
  .about-inline .duo > .frame {
    height: auto;
    min-height: 0;
    align-self: start;
    aspect-ratio: 3 / 4;
  }
  .about-inline .duo > .frame .art { inset: 19.6% 22.6% 18.8% 23%; }
  /* Biography column: aligned with the top of the frame, tightened for balance */
  .about-inline .duo > .slide-r {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 68ch;
    padding-top: 0.1rem;
  }
  .about-inline .duo .lead {
    font-size: clamp(0.92rem, 1.05vw, 1rem);
    line-height: 1.72;
    max-width: 70ch;
  }
  .about-inline .duo .lead + .lead { margin-top: 0.85rem; }
  .about-inline .duo .chips {
    margin-top: auto;
    padding-top: 1.1rem;
    justify-content: flex-start;
    max-width: 100%;
    margin-inline: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .about-inline .duo .lead { font-size: 0.93rem; line-height: 1.68; }
}

/* Breathing room beneath the portrait column and the creed cards */
.about-inline .duo { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.about-inline .mv { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* Information boxes stay within the biography rhythm */
@media (min-width: 1024px) {
  .about-inline .mv { max-width: 100%; }
}

@media (max-width: 767px) {
  .about-inline .duo .lead { line-height: 1.74; }
  .about-inline { padding-inline: 1.15rem; }
}

/* Hero action buttons: the golden accent appears only on interaction */
.hero .btn-row .btn.solid {
  border-color: var(--panel-edge);
  background: var(--panel);
  color: var(--text);
}
body.dark .hero .btn-row .btn.solid { color: var(--text); }
.hero .btn-row .btn.solid:hover,
.hero .btn-row .btn.solid:focus-visible,
.hero .btn-row .btn.solid:active {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fffaf0;
}
body.dark .hero .btn-row .btn.solid:hover,
body.dark .hero .btn-row .btn.solid:focus-visible,
body.dark .hero .btn-row .btn.solid:active { color: #1a0c06; }

/* =====================================================================
   17. "What I Stand On" — desktop balance layer
   Layout, spacing, alignment and responsiveness only. Typography,
   colour, borders, shadows, glow and animation are inherited untouched.
   ===================================================================== */

/* The hall is a centred grid; its children must fill the column instead of
   sizing to max-content, which is what pushed the last card toward the
   right edge of the viewport. */
.hero > * {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

/* Equal breathing room on the left and the right of the creed. */
.about-inline {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 0;
  align-items: stretch;
  justify-items: stretch;
  box-sizing: border-box;
}

/* Identical width, identical height, identical internal padding. */
.values > .value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 100%;
  min-width: 0;
  padding: clamp(20px, 1.6vw, 26px) clamp(16px, 1.4vw, 22px);
  box-sizing: border-box;
}

.values > .value h4 {
  margin: 10px 0 8px;
}

/* Descriptions sit centred within the plate so short and long creeds read
   equally balanced inside identically sized cards. */
.values > .value p {
  margin: 0;
}

/* Large desktop: hold the composition at a comfortable measure rather than
   letting it stretch the full monitor. */
@media (min-width: 1024px) {
  .values,
  .values:has(> *:nth-child(3):nth-last-child(1)),
  .values:has(> *:nth-child(4):nth-last-child(1)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1180px;
  }
}

@media (min-width: 1440px) {
  .values {
    max-width: 1200px;
    gap: 26px;
  }
}

/* Tablet: two columns, three rows. */
@media (min-width: 768px) and (max-width: 1023px) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    gap: 20px;
  }
}

/* Mobile: a single stacked column. */
@media (max-width: 767px) {
  .values {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    gap: 16px;
  }
}

/* No hall may ever produce a horizontal scrollbar. */
html,
body {
  overflow-x: hidden;
}

/* ---------- 18. Hall V — Skills and Instruments refinement ---------- */
/* Shared museum ornamentation for every card in this hall. */
.card-corners {
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.45s var(--ease);
  background:
    linear-gradient(var(--ring), var(--ring)) 0 0 / 15px 1px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 0 0 / 1px 15px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 100% 0 / 15px 1px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 100% 0 / 1px 15px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 0 100% / 15px 1px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 0 100% / 1px 15px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 100% 100% / 15px 1px no-repeat,
    linear-gradient(var(--ring), var(--ring)) 100% 100% / 1px 15px no-repeat;
}

.card-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  color: var(--accent);
  opacity: 0.75;
}
.card-orn i {
  display: block;
  height: 1px;
  width: clamp(26px, 4vw, 46px);
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
}
.card-orn b {
  font-weight: 400;
  font-size: 0.62rem;
  line-height: 1;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}

.skill-icon {
  display: block;
  margin: 0.85rem auto 0;
  color: var(--accent);
}
.skill-icon svg {
  width: clamp(38px, 4.4vw, 48px);
  height: clamp(38px, 4.4vw, 48px);
  display: block;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.22));
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
body.dark .skill-icon { color: var(--gold-bright); }
body.dark .skill-icon svg { filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.38)); }

/* --- First row: a balanced 3 x 2 gallery of flip cards --- */
.skills-flipgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.9vw, 1.7rem);
  max-width: 1180px;
  margin-inline: auto;
  margin-bottom: clamp(1.8rem, 3.4vw, 3rem);
  align-items: stretch;
}
.skills-flipgrid .flipcard {
  min-height: clamp(228px, 21vw, 262px);
  display: block;
}
.skills-flipgrid .flipcard-inner { min-height: 100%; }
.skills-flipgrid .flipcard-face {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.4rem;
  padding: 1.35rem 1.25rem 1.1rem;
  border-radius: 14px;
  border-color: var(--ring);
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(212, 175, 55, 0.08);
  transition: box-shadow 0.55s var(--ease), border-color 0.55s var(--ease);
}
.skills-flipgrid .flipcard-face.back { justify-content: center; }
.skills-flipgrid .flipcard-face h4 { margin-top: 0.15rem; }
.skills-flipgrid .flipcard-face p { max-width: 30ch; margin-inline: auto; }
.skills-flipgrid .flipcard-face .skill-icon { margin-top: auto; }
.skills-flipgrid .flipcard-face .card-orn { margin-top: 0.85rem; }
.skills-flipgrid .flipcard:hover .flipcard-face,
.skills-flipgrid .flipcard:focus-visible .flipcard-face {
  border-color: var(--accent);
  box-shadow: 0 30px 60px -30px var(--accent), inset 0 0 22px -12px rgba(212, 175, 55, 0.5);
}
.skills-flipgrid .flipcard:hover .card-corners { opacity: 1; }
.skills-flipgrid .flipcard:hover .skill-icon svg { transform: translateY(-2px); }

/* A slow light sweep, in place of any flashy motion. */
.skills-flipgrid .flipcard-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.16) 50%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.skills-flipgrid .flipcard:hover .flipcard-face::after {
  opacity: 1;
  animation: skillSweep 1.5s var(--ease);
}
@keyframes skillSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* --- Second row: three pillars of identical size --- */
.skills-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.9vw, 1.7rem);
  max-width: 1180px;
  margin-inline: auto;
  align-items: stretch;
  justify-content: center;
}
.skills-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.6rem 1.5rem 1.4rem;
  border-color: var(--ring);
  border-radius: 16px;
  overflow: hidden;
}
.skills-pillar > .pillar-icon { display: block; }
.skills-pillar .skill-icon { margin-top: 0.15rem; }
.skills-pillar h3 {
  margin-top: 0.75rem;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  letter-spacing: 0.08em;
}
.pillar-rule {
  display: block;
  width: clamp(58px, 8vw, 92px);
  height: 1px;
  margin: 0.7rem auto 1.05rem;
  background: linear-gradient(90deg, transparent, var(--ring), transparent);
}
.pillar-body { flex: 1 1 auto; }
.skills-pillar .card-orn { margin-top: 1.1rem; }
.skills-pillar:hover .card-corners { opacity: 1; }

/* Programming — cleaner rows, more elegant bars */
.skills-pillar .skill { text-align: left; }
.skills-pillar .skill + .skill { margin-top: 0.95rem; }
.skills-pillar .skill-row {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  align-items: baseline;
}
.skills-pillar .skill-row span:last-child {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.skills-pillar .bar {
  height: 5px;
  margin-top: 0.45rem;
  background: rgba(150, 120, 60, 0.2);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.14);
}
.skills-pillar .bar i { transition: width 1.9s var(--ease); }

/* Currently Exploring — museum-style tags */
.explore-tags {
  justify-content: center;
  gap: 0.5rem 0.55rem;
  margin-top: 0.2rem;
}
.explore-tag {
  font-size: 0.68rem;
  padding: 0.36rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: rgba(212, 175, 55, 0.07);
  letter-spacing: 0.1em;
  opacity: 0;
  animation: tagFade 0.9s var(--ease) forwards;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.explore-tag:nth-child(1) { animation-delay: 0.05s; }
.explore-tag:nth-child(2) { animation-delay: 0.14s; }
.explore-tag:nth-child(3) { animation-delay: 0.23s; }
.explore-tag:nth-child(4) { animation-delay: 0.32s; }
.explore-tag:nth-child(5) { animation-delay: 0.41s; }
.explore-tag:nth-child(6) { animation-delay: 0.5s; }
.explore-tag:hover {
  transform: translateY(-2px);
  background: rgba(212, 175, 55, 0.16);
  box-shadow: 0 0 18px -6px rgba(212, 175, 55, 0.75);
}
@keyframes tagFade {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Learning Philosophy — emphasised through composition, not size */
.pillar-philosophy .pillar-body p {
  font-size: 0.9rem;
  line-height: 1.75;
  max-width: 34ch;
  margin-inline: auto;
}
.pillar-philosophy .philosophy-lead {
  font-family: var(--serif, inherit);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.pillar-philosophy {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, 0.09), transparent 62%),
    var(--panel);
}

@media (prefers-reduced-motion: reduce) {
  .explore-tag { animation: none; opacity: 1; }
  .skills-flipgrid .flipcard:hover .flipcard-face::after { animation: none; opacity: 0; }
}

/* Tablet: keep the proportions, relax the grid gracefully */
@media (max-width: 1024px) {
  .skills-flipgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills-trio {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
    gap: 1.2rem;
  }
}

/* Mobile: stack naturally, never touch the viewport edge */
@media (max-width: 640px) {
  .skills-flipgrid,
  .skills-trio {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0.15rem;
  }
  .skills-flipgrid .flipcard { min-height: 236px; }
  .skills-pillar { padding: 1.4rem 1.15rem 1.2rem; }
}

/* Icon presentation: always centred, generously scaled like the reference plates. */
.skill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.skills-flipgrid .skill-icon svg {
  width: clamp(52px, 5.6vw, 66px);
  height: clamp(52px, 5.6vw, 66px);
}
.skills-pillar .skill-icon svg {
  width: clamp(34px, 3.4vw, 40px);
  height: clamp(34px, 3.4vw, 40px);
}
.skills-pillar .pillar-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.15rem;
}
.skills-pillar .pillar-icon .skill-icon {
  border: 1px solid var(--ring);
  border-radius: 999px;
  width: clamp(56px, 5.4vw, 64px);
  height: clamp(56px, 5.4vw, 64px);
  background: radial-gradient(circle at 50% 35%, rgba(212, 175, 55, 0.14), transparent 70%);
  box-shadow: inset 0 0 16px -10px rgba(212, 175, 55, 0.9);
}

/* ---------- 17.6 Achievements: a single row of four ---------- */
@media (min-width: 1200px) {
  .ach-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px; }
  .ach-grid > * { grid-column: auto !important; height: 100%; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px; }
  .ach-grid > * { grid-column: auto !important; }
}
@media (max-width: 699px) {
  .ach-grid { grid-template-columns: 1fr !important; }
}
.ach-grid .card h3 { font-size: clamp(0.98rem, 1.4vw, 1.1rem); }
.ach-grid .card p { font-size: 0.84rem; line-height: 1.62; }
.ach-grid .card {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.ach-grid .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -32px rgba(60, 38, 8, 0.85), 0 0 32px -16px var(--accent);
}
.cert-frame { width: min(360px, 76vw); margin-inline: auto; }

/* ---------- 17.7 The Record in Numbers ---------- */
.stats {
  max-width: 1020px;
  margin-inline: auto;
  gap: 22px;
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .stats > * { grid-column: auto !important; }
}
.stat { height: 190px; }
.stat .counter {
  font-family: "Cinzel", Georgia, serif;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(154, 116, 32, 0.35);
  transition: text-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.stat-face h4,
.stat-back h4 { color: var(--text); }
.stat-face p:not(.counter),
.stat-back p { color: var(--text-soft); }
body.dark .stat-face h4,
body.dark .stat-back h4 { color: #f7e6c6; }
body.dark .stat-face p:not(.counter),
body.dark .stat-back p { color: #efd7b0; }
body.dark .stat .counter {
  color: #ffc46a;
  text-shadow: 0 0 12px rgba(255, 176, 80, 0.55), 0 0 34px rgba(255, 130, 40, 0.32);
}
body.dark .stat { border-color: rgba(255, 158, 69, 0.34); }
.stat:hover,
.stat:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(60, 38, 8, 0.85), 0 0 34px -16px var(--accent);
}
.stat:hover .counter { transform: scale(1.04); text-shadow: 0 0 26px var(--accent); }
.stat.counted .counter { animation: stat-strike 0.9s var(--ease); }
@keyframes stat-strike {
  0% { opacity: 0.3; transform: translateY(8px) scale(0.9); }
  60% { transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
body.calm .stat.counted .counter { animation: none; }

/* ---------- 10. Statistics plates in the day hall ---------- */
body:not(.dark) .stat-face p,
body:not(.dark) .stat-back {
  color: #573c11;
  text-shadow: 0 1px 0 rgba(255, 253, 246, 0.75);
}
body:not(.dark) .counter,
body:not(.dark) .value-num {
  color: #2f1f06;
  text-shadow: 0 1px 0 rgba(255, 253, 246, 0.9);
}

/* ============================================================
   ACHIEVEMENTS — curated four-plate row with engraved emblems
   ============================================================ */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 26px);
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(8px, 2vw, 24px);
}
.ach-grid > .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: clamp(1.2rem, 1.6vw, 1.6rem) clamp(1rem, 1.4vw, 1.4rem);
}
.ach-grid > .card .status {
  margin-bottom: 0.35rem;
}
.ach-grid > .card h3 {
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem;
  margin-bottom: 0.55rem;
}
/* decorative divider under each title, matching the hall's flourishes */
.ach-grid > .card h3 + p::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 0.7rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.ach-grid > .card p {
  font-size: 0.86rem;
  line-height: 1.6;
}
.ach-emblem {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  border: 1px solid var(--panel-edge);
  background:
    radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.22), transparent 70%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25) inset,
    0 0 20px -8px rgba(212, 175, 55, 0.7);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.ach-emblem svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.dark .ach-emblem svg {
  stroke: var(--accent);
}
body.dark .ach-emblem {
  box-shadow:
    0 0 0 1px rgba(255, 158, 69, 0.28) inset,
    0 0 26px -10px rgba(255, 158, 69, 0.8);
}
.ach-grid > .card:hover .ach-emblem {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.45) inset,
    0 0 30px -8px rgba(212, 175, 55, 0.95);
}
@media (max-width: 1099px) {
  .ach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 619px) {
  .ach-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: clamp(14px, 5vw, 22px);
  }
}

/* ---------- 17.11 Favorite Cinema: the Back plate must answer ---------- */
.cine-front { z-index: 2; }
.cine-back { z-index: 1; pointer-events: none; }
.cine.flipped .cine-front { pointer-events: none; }
.cine.flipped .cine-back { z-index: 3; pointer-events: auto; }
.cine-back .cine-close {
  position: relative;
  z-index: 4;
  align-self: flex-start;
  padding: 0.4rem 0.85rem 0.4rem 0;
  min-height: 34px;
  touch-action: manipulation;
}
.cine-back .cine-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cine-back .cine-close:hover { letter-spacing: 0.26em; }

/* ---------- 17.12 Achievements: keep the recognition plate modest ---------- */
#achievements .frame.cert-frame,
#achievements .cert-frame {
  width: min(340px, 78vw);
  max-width: min(340px, 78vw);
  margin-inline: auto;
}
@media (max-width: 619px) {
  #achievements .frame.cert-frame,
  #achievements .cert-frame {
    width: min(280px, 82vw);
    max-width: min(280px, 82vw);
  }
}

/* ============================================================
   MANUSCRIPT REFINEMENT — cinematic cover, locked leaf
   dimensions, uniform artwork plates, true frontispiece
   ============================================================ */

/* ---- 1. Cinematic cover opening: 3D right-to-left swing ---- */
.book-cover .cover-art {
  transform: perspective(2200px) rotateY(0deg) translateX(0);
  transform-origin: left center;
  backface-visibility: hidden;
  transition:
    transform 1.05s cubic-bezier(0.42, 0, 0.3, 1),
    opacity 0.4s ease 0s,
    filter 1.05s cubic-bezier(0.42, 0, 0.3, 1);
}
.book-cover h3,
.book-cover p,
.book-cover .btn {
  transition: opacity 0.4s ease;
}
.book.open .book-cover {
  display: flex;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  visibility: hidden;
  transform: translateZ(90px);
  opacity: 1;
  transition: visibility 0s linear 1.15s, opacity 0s linear 1.15s;
}
.book.open .book-cover .cover-art {
  transform: perspective(2200px) rotateY(-112deg) translateX(-4%);
  opacity: 0;
  filter: drop-shadow(46px 34px 60px rgba(0, 0, 0, 0.62)) brightness(0.72);
  transition:
    transform 1.05s cubic-bezier(0.42, 0, 0.3, 1),
    opacity 0.35s ease 0.72s,
    filter 1.05s cubic-bezier(0.42, 0, 0.3, 1);
}
.book.open .book-cover h3,
.book.open .book-cover p,
.book.open .book-cover .btn {
  opacity: 0;
}
.book.closing .book-cover {
  animation: none;
  visibility: visible;
}
.book.closing .book-cover .cover-art {
  animation: coverArtBack 0.9s var(--ease);
}
@keyframes coverArtBack {
  from {
    transform: perspective(2200px) rotateY(-112deg) translateX(-4%);
    opacity: 0;
  }
  to {
    transform: perspective(2200px) rotateY(0deg) translateX(0);
    opacity: 1;
  }
}

/* ---- 2. Locked leaf dimensions: every page identical ---- */
.pages {
  height: min(84vh, 800px);
  min-height: 560px;
}
.page {
  height: 100%;
  gap: 0;
  overflow: hidden;
}
.page.on {
  grid-template-rows: minmax(0, 36%) minmax(0, 1fr);
}
@media (max-width: 760px) {
  .pages {
    height: min(74vh, 620px);
    min-height: 480px;
  }
}
@media (min-width: 761px) and (max-height: 700px) {
  .pages {
    min-height: 480px;
  }
}

/* ---- 3. Uniform artwork plates on every chapter ---- */
.chapter-head {
  height: 100%;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(107, 68, 19, 0.45);
  background: rgba(24, 12, 2, 0.35);
}
.chapter-head img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.chapter-head img.focus-face {
  object-position: center 34%;
}

/* ---- 4. True frontispiece: the whole artwork, never cropped ---- */
.frontispiece {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem) !important;
  overflow: hidden;
}
.frontispiece.on {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.frontis-frame {
  min-height: 0;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frontis-art {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 5px solid #33200d;
  border-radius: 4px;
  background: #1c1207;
  box-shadow: 0 22px 44px -18px rgba(60, 38, 8, 0.55);
}
body.dark .frontis-art {
  border-color: #120b04;
}
.frontis-plate {
  position: static;
  inset: auto;
  display: block;
  padding: 0 0.5rem;
  background: none;
  text-align: center;
  color: #4a3213;
}
.frontis-plate h4 {
  margin: 0 0 0.35rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  letter-spacing: 0.12em;
  color: #6a3f0b;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.6);
}
.frontis-plate .frontis-line {
  margin: 0 auto;
  max-width: 52ch;
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  color: #4a3213;
  opacity: 0.95;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.55);
}
.frontis-plate .hl {
  color: #8a4f0d;
  background: none;
  text-shadow: none;
}
body.dark .frontis-plate {
  color: #e8c98f;
}
body.dark .frontis-plate h4 {
  color: #ffc061;
  text-shadow: 0 0 12px rgba(255, 150, 50, 0.4);
}
body.dark .frontis-plate .frontis-line {
  color: #f0d3a4;
  text-shadow: none;
}
body.dark .frontis-plate .hl {
  color: #ffd79a;
}
/* outrank the legacy dark-gradient plate rules in light mode */
body:not(.dark) .frontis-plate {
  background: none;
}
body:not(.dark) .frontis-plate h4 {
  color: #6a3f0b;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.6);
}
body:not(.dark) .frontis-plate .frontis-line {
  color: #4a3213;
  text-shadow: none;
}

/* ---- 5. Reading comfort, contained within the leaf ---- */
.page-text {
  min-height: 0;
  padding: clamp(1rem, 2.6vw, 1.9rem) clamp(0.2rem, 1vw, 0.6rem) 0.4rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.page-text h4 {
  margin: 0 0 0.7rem;
}
.page-text p {
  margin: 0 0 0.85rem;
  line-height: 1.68;
}
.page-text p:last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .page-text {
    padding-inline: clamp(0.4rem, 2vw, 1.4rem);
  }
}

/* ---- 6. Navigation locked beneath the leaf ---- */
.book-nav {
  margin-top: 1.1rem;
  min-height: 46px;
}
.book-nav .btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.6);
}

/* ============================================================
   18. MASTER REFINEMENT — Chronicle, Record in Numbers, Words I Keep
   Scoped additions only. No existing rule above is altered.
   ============================================================ */

/* ---------- 18.1 Chronicle of the Years — desktop card rhythm ---------- */
/* The timeline is a grid; equal auto rows were stretching every entry to the
   height of the tallest one, leaving dead space under short milestones. */
.timeline {
  grid-auto-rows: max-content;
  align-content: start;
}

@media (min-width: 1024px) {
  #journey .duo {
    gap: 3.2rem;
  }
  #journey .timeline {
    padding-left: 2.6rem;
    row-gap: 1.4rem;
  }
  #journey .timeline::before {
    left: 10px;
    top: 1.7rem;
    bottom: 1.7rem;
  }
  #journey .node {
    margin-bottom: 0;
    padding: 1.25rem 1.5rem 1.25rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.5), rgba(255, 250, 236, 0)) ,
      var(--panel);
    box-shadow: 0 18px 34px -30px rgba(60, 38, 8, 0.7);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
      border-color 0.45s var(--ease);
  }
  #journey .node::before {
    left: -2.6rem;
    top: 1.75rem;
  }
  #journey .node:hover,
  #journey .node:focus-visible,
  #journey .node.open {
    transform: translateX(5px);
    border-color: var(--accent);
    box-shadow: 0 26px 48px -30px rgba(60, 38, 8, 0.85),
      0 0 26px -18px var(--accent);
  }
  #journey .node h3 {
    font-size: 1.06rem;
    margin-bottom: 0.3rem;
  }
  #journey .node .status {
    margin-bottom: 0;
  }
  #journey .node.open .body {
    margin-top: 0.7rem;
  }
}

body.dark #journey .node {
  background: linear-gradient(180deg, rgba(70, 44, 14, 0.4), rgba(30, 18, 6, 0.35));
  border-color: rgba(255, 158, 69, 0.28);
}

/* ---------- 18.2 The Record in Numbers — gilded medallions, triangular ---------- */
@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-items: center;
    align-items: start;
    row-gap: clamp(1.6rem, 3vw, 2.6rem);
    column-gap: clamp(1.4rem, 3vw, 2.4rem);
    max-width: 940px;
  }
  .stats > *:nth-child(1) { grid-column: 1 / span 2 !important; justify-self: end; }
  .stats > *:nth-child(2) { grid-column: 3 / span 2 !important; justify-self: start; }
  .stats > *:nth-child(3) { grid-column: 2 / span 2 !important; justify-self: center; }
}

.stat {
  width: clamp(200px, 20vw, 250px);
  height: clamp(200px, 20vw, 250px);
  border-radius: 50%;
  padding: 0;
  max-width: 100%;
}

.stat-face {
  border-radius: 50%;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 2px solid var(--accent);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 252, 240, 0.95), rgba(238, 226, 200, 0.9) 62%, rgba(215, 196, 158, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 26px rgba(154, 116, 32, 0.16),
    0 22px 44px -26px rgba(60, 38, 8, 0.75);
}

/* engraved inner ring */
.stat-face::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 1px dashed rgba(154, 116, 32, 0.45);
  pointer-events: none;
}

.stat-face h4 {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 82%;
}

.stat-back {
  font-size: 0.7rem;
  line-height: 1.5;
}
.stat-back h4 {
  font-size: 0.68rem;
  margin-bottom: 0.25rem;
}
.stat-back p {
  max-width: 74%;
  font-size: 0.68rem;
  line-height: 1.48;
}

.stat .counter {
  font-size: clamp(2.4rem, 4.4vw, 3.2rem);
  line-height: 1;
}

.stat:hover,
.stat:focus-visible {
  box-shadow: none;
}
.stat:hover .stat-face,
.stat:focus-visible .stat-face {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 30px rgba(154, 116, 32, 0.22),
    0 30px 54px -28px rgba(60, 38, 8, 0.9),
    0 0 34px -14px var(--accent);
}

body.dark .stat-face {
  background:
    radial-gradient(circle at 50% 32%, rgba(72, 46, 16, 0.96), rgba(38, 23, 8, 0.96) 66%, rgba(22, 13, 4, 0.98) 100%);
  border-color: rgba(255, 176, 80, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 110, 0.22),
    inset 0 0 28px rgba(255, 150, 50, 0.14),
    0 24px 46px -26px rgba(0, 0, 0, 0.9);
}
body.dark .stat-face::before {
  border-color: rgba(255, 176, 80, 0.4);
}

@media (max-width: 899px) {
  .stats {
    justify-items: center;
    row-gap: 1.5rem;
  }
}

/* ---------- 18.3 Words I Keep — Renaissance quotation frame ---------- */
.quotes {
  position: relative;
  width: min(760px, 100%);
  margin-inline: auto;
  min-height: 300px;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.6rem, 5vw, 3.4rem);
  border: 2px solid var(--accent);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.72), rgba(246, 236, 214, 0.62));
  box-shadow:
    0 0 0 1px rgba(154, 116, 32, 0.35),
    0 0 0 7px rgba(255, 252, 242, 0.5),
    0 0 0 8px rgba(154, 116, 32, 0.4),
    0 34px 60px -34px rgba(60, 38, 8, 0.8);
}

/* inner engraved rule */
.quotes::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(154, 116, 32, 0.4);
  border-radius: 3px;
  pointer-events: none;
}

/* four corner studs */
.quotes::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px);
}

.quote {
  inset: clamp(2.2rem, 5vw, 3.4rem) clamp(1.6rem, 5vw, 3.4rem);
  align-content: center;
}

.quote q {
  max-width: 30ch;
  line-height: 1.5;
}

/* engraved divider above the attribution */
.quote cite::before {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin: 0 auto 0.85rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

body.dark .quotes {
  background: linear-gradient(180deg, rgba(60, 38, 12, 0.5), rgba(26, 15, 5, 0.55));
  border-color: rgba(255, 176, 80, 0.6);
  box-shadow:
    0 0 0 1px rgba(255, 176, 80, 0.3),
    0 0 0 7px rgba(30, 18, 6, 0.6),
    0 0 0 8px rgba(255, 176, 80, 0.35),
    0 34px 60px -34px rgba(0, 0, 0, 0.9);
}
body.dark .quotes::before {
  border-color: rgba(255, 176, 80, 0.35);
}

/* 18.4 Medallions on small screens: one centred column */
@media (max-width: 699px) {
  .stats {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
  }
  .stats > * { grid-column: auto !important; }
  .stat {
    width: min(240px, 74vw);
    height: min(240px, 74vw);
  }
}


/* ======================================== */
/* Accessibility — Skip Link                */
/* ======================================== */
.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1206;
  background: linear-gradient(140deg, #f6e3ae, #d4af37 55%, #9a7420);
  border: 1px solid rgba(255, 240, 200, 0.7);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-160%);
  transition: transform 0.35s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff4d2;
  outline-offset: 3px;
}

/* ======================================== */
/* Navigation — Hall of Collaborative Works */
/* ======================================== */
.academy {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--panel-edge);
}

.academy-note {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}

.btn.academy-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  text-align: left;
  text-decoration: none;
  color: #1c1305;
  background:
    linear-gradient(150deg, #fbeec2 0%, #e3c66c 32%, #c8a13c 58%, #8d6a1d 100%);
  border: 1px solid rgba(255, 244, 210, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(88, 62, 12, 0.4) inset,
    0 14px 32px rgba(20, 12, 2, 0.42);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    filter 0.45s var(--ease);
}

.btn.academy-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.75) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}

.btn.academy-btn:hover,
.btn.academy-btn:focus-visible {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(88, 62, 12, 0.45) inset,
    0 20px 44px rgba(20, 12, 2, 0.52);
}

.btn.academy-btn:hover::before,
.btn.academy-btn:focus-visible::before {
  transform: translateX(120%);
}

.btn.academy-btn:focus-visible {
  outline: 2px solid #fff4d2;
  outline-offset: 3px;
}

.btn.academy-btn:active {
  transform: translateY(-1px) scale(0.99);
}

.academy-crest {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(28, 19, 5, 0.14);
  border: 1px solid rgba(60, 42, 8, 0.3);
}

.academy-crest svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: #35240a;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.academy-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.academy-kicker {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}

.academy-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

/* Compact crest in the top bar, from laptop widths upward */
.btn.academy-mini {
  display: none;
  width: auto;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  gap: 0.5rem;
}

.btn.academy-mini .academy-crest {
  width: 1.5rem;
  height: 1.5rem;
}

.btn.academy-mini .academy-crest svg {
  width: 0.85rem;
  height: 0.85rem;
}

.btn.academy-mini .academy-title {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .btn.academy-mini {
    display: inline-flex;
  }
}

@media (max-width: 420px) {
  .btn.academy-btn {
    padding: 0.75rem 0.85rem;
  }
  .academy-title {
    font-size: 0.82rem;
  }
}

body.calm .btn.academy-btn,
body.calm .btn.academy-btn::before,
body.calm .skip-link {
  transition: none;
}