/* ════════════════════════════════════════════════════════════════════
   HANSON LU — ABOUT PAGE STYLES

   THEMES: Onyx (dark, default) and Fog (light).
           Toggle in top-right of page, persisted in localStorage.
           Edit the CSS variables in :root and [data-theme="light"]
           below to retheme either palette.

   FONT: Avenir (loaded from about/fonts/). Falls back to sans-serif.
   ════════════════════════════════════════════════════════════════════ */

/* --- Font Loading --- */
@font-face { font-family: 'Avenir'; font-weight: normal; font-style: normal;
             src: url('fonts/Avenir-Book.woff'); }
@font-face { font-family: 'Avenir'; font-weight: bold; font-style: normal;
             src: url('fonts/Avenir-Medium.woff'); }

/* --- Theme: Onyx (dark) — default --- */
:root {
    --bg:     #0D0F10;
    --text:   #9A9FA3;
    --h1:     #E0E5E9;
    --h2:     #7D8183;
    --h3:     #8C9092;
    --a:      #CED1D4;
    --li:     #9A9FA3;
    --good:   #00ADBB;
    --bio:    #858A8D;
    --bio-a:  #74787B;
    --sub:    #4C5053;
    --hr:     #2A2E31;
}

/* --- Theme: Fog (light) --- */
[data-theme="light"] {
    --bg:     #F1F4F6;
    --text:   #505A5F;
    --h1:     #29353B;
    --h2:     #798286;
    --h3:     #6E767A;
    --a:      #2B373E;
    --li:     #505A5F;
    --good:   #007890;
    --bio:    #5C6569;
    --bio-a:  #6A7378;
    --sub:    #A7ACAE;
    --hr:     #DADFE1;
}

/* --- Reset & Base --- */
* { margin:0; padding:0; }
html { overflow-x:hidden; }

body { background:var(--bg); color: var(--text); font: normal 13px/1.2 "Avenir", sans-serif;
       transition: background 0.15s ease, color 0.15s ease; }
body { padding:30px; padding-bottom:0px; overflow-x:hidden; }

/* --- Theme Toggle ---
   Small lowercase text in top-right corner. Shows the theme it will
   switch TO (so dark mode shows "light", light mode shows "dark"). */
.theme-toggle { position: fixed; top: 18px; right: 24px;
                font: normal 11px "Avenir", sans-serif;
                color: var(--sub); cursor: pointer; user-select: none;
                letter-spacing: 0.5px; z-index: 200;
                transition: color 0.15s ease; }
.theme-toggle:hover { color: var(--a); text-decoration: none; }

/* --- Main Content Container ---
   Everything sits inside .everything, centered with max-width 564px. */
.everything { position:relative; margin-left: auto; margin-right: auto; max-width: 564px; }

/* --- Typography ---
   h1 = Your name
   h2 = Subtitle under your name
   h3 = Year labels in the left margin (absolutely positioned)
   p  = Body paragraphs with 12px vertical margins */
h1 { text-transform:none; color:var(--h1); margin-bottom:0px; font-weight:normal; font-size:19px; }
h2 { color:var(--h2); margin-bottom:16px; font-weight: normal; font-size:11px; }
p  { margin-top:12px; margin-bottom:12px; }

/* --- Lists --- */
ul { list-style-type:none; margin-left: 80px; margin-top:10px; margin-bottom:10px; }

/* --- Links --- */
a  { color:var(--a); font-weight:bold; text-decoration:none; }
a:hover { text-decoration:underline; }

/* --- Year Labels (h3) --- */
h3 { color:var(--h3); font-size:13px; font-weight:normal; position:absolute; left:0px; width:65px; text-align:right; }

/* --- List Items --- */
li { color:var(--li); margin-bottom: 2px; }

/* --- Featured Link Highlight --- */
.good { color:var(--good); }

/* --- Section Headers --- */
.section { margin-top:26px; }

/* --- Intro Paragraphs --- */
.intro p { margin-top:2px; margin-bottom:2px; }

/* --- Bio Sections --- */
.bio { color:var(--bio); font-size:12px; margin-left:30px; margin-bottom:22px; }
.bio p { margin-top: 4px; margin-bottom: 4px; }
.bio ul { list-style-type: disc; margin-left:23px; margin-top: 4px; margin-bottom: 4px; }
.bio li { color:var(--bio); margin-bottom:2px; line-height: 1.3; }
.bio a { color:var(--bio-a); }

/* --- Footer Quote --- */
.sub { color:var(--sub); font-size:9px; margin-top:0; }

/* --- Contact Line --- */
.contact { margin-left:53px; text-indent:-53px; }

/* --- Horizontal Rules --- */
hr { border: none; border-top: 1px solid var(--hr); margin-top: 40px; margin-bottom: 40px; }

/* --- Decorative Images --- */
.windmill { display:block; position:absolute; pointer-events:none; top:0px; right:-270px; }
.rider { display:block; position:absolute; pointer-events:none; top:404px; left:-336px; }

/* --- Hover Preview Panel ---
   left must equal .everything's max-width so the panel never overlaps
   the text column; main.js's width formula depends on this value. */
.preview  { display:none; position:absolute; pointer-events:none; z-index:100;
            top:-30px; left:564px; height:100%; padding-left:5px; box-sizing:border-box;
            background-color:rgba(0,0,0,0.2); }
.preview img { display:block; position:fixed; top:0; height:100vh; object-fit:contain; }

/* --- Tight Lists --- */
.tight li { margin-bottom:2px; }

/* --- Mobile Responsive (screens <= 500px) --- */
@media screen and (max-width: 500px) {
    .windmill { display:none; }
    .rider { display:none; }
    body { font-size:15px; }
    h3 { font-size:15px; left:0px; width:62px; margin-left:0; }
    ul { margin-left:80px; margin-bottom:12px; }
    li { margin-bottom:8px; }
    .tight li { margin-bottom:2px; }
    .bio { font-size:13px; }
    .intro p { margin-bottom:12px; }
    .contact { margin-left:61px; text-indent:-61px; white-space:pre-wrap; }
    .theme-toggle { top: 12px; right: 14px; font-size: 12px; }
}