/*
    Modern look on top of the WordPress-era theme: Inter, sticky header,
    menu underline, title accent, rounded panels, dark footer.
    Loaded last, so it only overrides; colours stay those of the theme.
*/

:root
{
    --kaos-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --kaos-red:         #9b1142;
    --kaos-red-dark:    #7a0d34;
    --kaos-text:        #3a3a3e;
    --kaos-heading:     #1f1f22;
    --kaos-muted:       #69696b;
    --kaos-line:        #e6e6e8;
    --kaos-bg:          #f7f7f7;
    --kaos-radius:      10px;
}

html
{
    scroll-behavior: smooth;
}

body
{
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
    font-feature-settings:   "cv11", "ss01";
}

::selection
{
    background-color: var(--kaos-red);
    color:            #ffffff;
}

/* Text */

.typography
{
    font-size:   0.95em;
    line-height: 1.7;
    color:       var(--kaos-text);
}

.typography strong,
.typography b
{
    font-weight: 600;
    color:       var(--kaos-heading);
}

.typography a,
.typography a:visited
{
    color:                     var(--kaos-red);
    text-decoration:           underline;
    text-decoration-thickness: 1px;
    text-underline-offset:     3px;
    text-decoration-color:     rgba(155, 17, 66, 0.35);
    transition:                color 0.15s linear, text-decoration-color 0.15s linear;
}

.typography a:hover
{
    color:                 var(--kaos-red-dark);
    text-decoration-color: currentColor;
}

/* Headings: semibold, slightly tighter */

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6
{
    font-weight:    600;
    letter-spacing: -0.015em;
    color:          var(--kaos-heading);
}

.typography h1
{
    margin:      1.2em 0 0.4em;
    font-size:   1.55em;
    line-height: 1.3;
}

.typography h2
{
    margin:      1em 0 0.35em;
    font-size:   1.25em;
    line-height: 1.35;
}

.typography h3
{
    font-size:   1.1em;
    line-height: 1.4;
}

.typography h6
{
    font-weight: 600;
}

/* Page title with a short red bar below */

.typography h1.title
{
    margin:         0.2em 0 1.1em;
    font-size:      2.1em;
    font-weight:    650;
    letter-spacing: -0.025em;
    line-height:    1.2;
    text-align:     center;
}

.typography h1.title::after
{
    content:          "";
    display:          block;
    width:            48px;
    height:           3px;
    margin:           0.45em auto 0;
    border-radius:    2px;
    background-color: var(--kaos-red);
}

/* Header: sticky, hairline below */

#header
{
    padding:          0.6em 0;
    border-bottom:    1px solid var(--kaos-line);
    background-color: rgba(255, 255, 255, 0.92);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
{
    #header
    {
        background-color:        rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter:         saturate(180%) blur(12px);
    }
}

@media only screen and (min-width: 768px)
{
    #header
    {
        position: sticky;
        top:      0;
        z-index:  100;
    }
}

/* Main menu: medium weight, red underline slides in */

#navigation-menu
{
    font-weight: 500;
}

#navigation-menu li a,
#navigation-menu li a:visited
{
    position:   relative;
    padding:    0.35em 0;
    color:      var(--kaos-text);
    font-size:  0.95em;
    transition: color 0.15s linear;
}

#navigation-menu li a::after
{
    content:          "";
    position:         absolute;
    left:             0;
    right:            0;
    bottom:           0;
    height:           2px;
    border-radius:    2px;
    background-color: var(--kaos-red);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.2s ease;
}

#navigation-menu li a:hover,
#navigation-menu li a.current
{
    color: var(--kaos-red);
}

#navigation-menu li a:hover::after,
#navigation-menu li a.current::after
{
    transform: scaleX(1);
}

/* Main area */

#main
{
    padding: 3.5em 0 4em;
}

/* Panels: rounded, hairline border, no shadows */

.kaos-card,
.kaos-split,
.kaos-profile-text,
.typography .kaos-pubs p,
.typography .kaos-figure,
.parbox
{
    border-radius: var(--kaos-radius);
}

.kaos-card,
.kaos-split,
.kaos-profile-text,
.typography .kaos-figure
{
    border:        1px solid var(--kaos-line);
    border-bottom: 3px solid var(--kaos-red);
}

.kaos-card,
.kaos-split
{
    overflow: hidden;
}

.kaos-card-faded::before
{
    border-radius: var(--kaos-radius);
}

/* Linked cards lift a little on hover */

.kaos-card
{
    transition: transform 0.2s ease, border-color 0.2s linear;
}

.kaos-card:has(.kaos-card-more):hover
{
    transform:    translateY(-3px);
    border-color: rgba(155, 17, 66, 0.35);
    border-bottom-color: var(--kaos-red);
}

.typography .kaos-card h2
{
    margin-top: 0;
    font-size:  1.2em;
}

.typography .kaos-card-meta
{
    font-weight: 500;
}

/* Publications: rounded, red bar stays on the left */

.typography .kaos-pubs p
{
    border:      1px solid var(--kaos-line);
    border-left: 3px solid var(--kaos-red);
}

.typography .kaos-pubs p strong
{
    font-weight: 600;
}

.typography .kaos-pubs a,
.typography .kaos-pubs a:visited
{
    border-radius:   999px;
    text-decoration: none;
    font-weight:     500;
}

/* Photos */

.kaos-mosaic figure,
.kaos-profile-photo img
{
    border-radius: 8px;
}

.kaos-bgsection::before
{
    border-radius: var(--kaos-radius);
}

/* Timeline years */

.typography .kaos-timeline h1
{
    margin:      0;
    font-size:   1.2em;
    font-weight: 650;
    line-height: 1.6;
    color:       var(--kaos-red);
}

/* Events */

#events article
{
    border-top-color: var(--kaos-line);
}

#events article .column:first-child p
{
    font-weight: 600;
    color:       var(--kaos-heading);
}

#events .kaos-events-label
{
    font-weight: 600;
}

/* Arrow button: larger arrow */

.kaos-card-more span,
.typography .kaos-more .kaos-card-more
{
    font-size:   1.25em;
    line-height: 1;
}

#events .all-events
{
    border-radius: 999px;
    font-weight:   500;
}

/* Footer: dark grey */

#footer
{
    padding:          2em 0;
    background-color: #26262a;
}

#footer #legal-menu,
#footer #legal-menu span,
#footer #legal-menu li a,
#footer #legal-menu li a:visited
{
    font-size:       0.9em;
    color:           #b9b9bf;
    text-decoration: none;
}

#footer #legal-menu li a:hover,
#footer #legal-menu li a:focus
{
    color: #ffffff;
}

/* Footer stays at the bottom of the window on short pages */

#container
{
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

#main
{
    flex: 1 0 auto;
}