/* ============================================================
   site.css: the look of the whole site.

   ONE file, shared by index.html, university-projects.html and
   legal.html (thesis.html has its own styles inside the file).
   Change a colour or a size here and every page follows.
   Each rule is on one line; the notes on their own lines
   explain what the block below them does.
   ============================================================ */

/* ---- The typeface (Manrope), loaded from this site's own
        fonts folder, never from another server. ---- */
@font-face{font-family:'Manrope';src:url(/fonts/manrope-latin.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

/* ---- Colours. Three blocks that must always say the same
        thing in the same order:
        1. the light colours (the default),
        2. the dark colours, used when the visitor's device is set
           to dark AND they have not clicked the switch to say light,
        3. the dark colours again, used when the visitor clicked the
           switch to say dark (theme.js sets data-theme on the page).
        ink = text, ink2/ink3 = softer text, line = thin rules,
        accent = links on hover. ---- */
:root{--bg:#f6f3ec;--ink:#16201e;--ink2:#4c5c59;--ink3:#5f6c69;--line:#e0dad0;--accent:#0c6055;--accent-soft:rgba(12,96,85,.12);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1413;--ink:#eef1ea;--ink2:#a0b0ac;--ink3:#80908b;--line:#25302e;--accent:#5fd8b8;--accent-soft:rgba(95,216,184,.16);color-scheme:dark}}
:root[data-theme=dark]{--bg:#0f1413;--ink:#eef1ea;--ink2:#a0b0ac;--ink3:#80908b;--line:#25302e;--accent:#5fd8b8;--accent-soft:rgba(95,216,184,.16);color-scheme:dark}

/* ---- Basics: page background, text size (15px) and the soft
        fade when switching between light and dark. ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}

/* ---- Links: a thin grey underline that turns green (light mode)
        or mint (dark mode) when you point at it. ---- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ---- Layout: one centred column, 560px wide at most, with
        48px between the blocks (header, Work, Projects, ...). ---- */
main{max-width:560px;margin:0 auto;padding:96px 24px 72px;display:flex;flex-direction:column;gap:48px}
header{display:flex;flex-direction:column;gap:16px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.name{display:flex;flex-direction:column;gap:2px}

/* ---- Type: headings, paragraphs and the two greys
        (.muted = lightest, .soft = in between). ---- */
h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
h2{margin:0;font-size:15px;font-weight:600}
p{margin:0;text-wrap:pretty}
.muted{color:var(--ink3)}
.soft{color:var(--ink2)}

/* ---- Sections and lists. .rows = "Role @ Company ... years"
        lines; .items = a name with a one-line description below
        it (.stack). ---- */
section{display:flex;flex-direction:column;gap:14px}
ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.rows{gap:8px}
.items{gap:16px}
/* Space between a role and its year: 2px between lines when the year wraps
   under the role (so it sits tight beneath it), 16px between the text and
   the year when they share one line. */
.row{display:flex;justify-content:space-between;gap:2px 16px;flex-wrap:wrap}
.row .year{color:var(--ink3);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:2px}
.stack>a:first-child{align-self:flex-start}
.note{color:var(--ink2);font-size:14px;text-wrap:pretty}
.more{align-self:flex-start;color:var(--ink2)}

/* ---- The light/dark button (top right): a small square with a
        half-filled circle. It has no look of its own until styled
        here; the outline shows for keyboard users only. ---- */
.theme{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--ink2)}
.theme:hover{color:var(--accent)}
.theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Footer: a thin line, the round of little icons
        (LinkedIn, and email / X once switched on), then the
        copyright line with Imprint and Privacy. ---- */
footer{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--line)}
.links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* The extra padding makes each footer icon an easier thumb target (36px
   wide and tall); the equal negative margin cancels it out, so the icons
   do not move and do not look bigger. */
.icon{display:inline-flex;color:var(--ink2);padding:8px;margin:-8px}
.icon:hover{color:var(--accent)}
.legal{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.legal a{color:var(--ink3)}

/* ---- Running text blocks, used on the legal page. ---- */
.prose{display:flex;flex-direction:column;gap:12px;color:var(--ink2)}
.prose h3{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--ink)}

/* ---- Visitors who asked their device for less motion get no fade. ---- */
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* ---- Phones (screens up to 600px wide). Text is one size larger so it
        reads comfortably, the breathing room at the top and bottom of the
        page shrinks, and every Work / Education row stacks the same way:
        the years sit in a smaller grey line directly under the role, so
        the list reads evenly instead of some rows wrapping and some not. ---- */
@media (max-width:600px){
body{font-size:16px}
h2{font-size:16px}
main{padding:56px 20px 56px;gap:40px}
.row{flex-direction:column}
.row .year{font-size:14px}
.legal{font-size:14px}
}