/* =========================================================================
   Xinyue Ma — homepage styles
   -------------------------------------------------------------------------
   TUNE HERE. Everything visual is driven by the tokens in :root below.
   Change a color or a size once and it updates everywhere.
   Content/wording lives in index.html.
   ========================================================================= */

   :root {
    /* ---- Colors ---- */
    --paper:        #f1f2ef;   /* page background            */
    --ink:          #171814;   /* primary text               */
    --muted:        #5a5d55;   /* secondary text             */
    --faint:        #8a8d84;   /* tertiary / detail text     */
    --meta:         #9a9d94;   /* eyebrows, dates, footer    */
    --accent:       #2f7d54;   /* green accent               */
    --accent-tint:  rgba(47,125,84,0.10);  /* tag background  */
    --accent-border:rgba(47,125,84,0.28);  /* tag border      */
    --accent-line:  rgba(47,125,84,0.40);  /* inline underline */
    --panel:        #ffffff;   /* sidebar card               */
    --panel-border: #e2e2db;
    --hairline:     #dcdcd6;   /* row separators             */
    --divider:      #ececE6;   /* sidebar dividers           */
    --rule:         #171814;   /* heavy section rule         */
    --bar:          #c9cabf;   /* name separator bar         */
  
    /* ---- Font families (role-based) ---- */
    --serif: 'Spectral', Georgia, serif;             /* voice: names, titles, bio  */
    --sans:  'Libre Franklin', system-ui, sans-serif;/* reading/data               */
    --mono:  'JetBrains Mono', monospace;            /* system: labels, dates, tags */
  
    /* ---- Type scale ---- */
    --fs-display: clamp(38px, 7vw, 62px);  /* the name only          */
    --fs-title:   19px;                    /* pub titles, sidebar name */
    --fs-lead:    clamp(16px, 2.1vw, 19px);/* hero bio               */
    --fs-subhead: 17px;                    /* interests, exp role    */
    --fs-section: 15px;                    /* section headers        */
    --fs-body:    14px;                    /* authors, values        */
    --fs-meta:    13px;                    /* schools, details       */
    --fs-label:   12px;                    /* venue tags, links      */
    --fs-micro:   11px;                    /* eyebrows, dates, footer */
  
    /* ---- Layout ---- */
    --maxw: 1200px;
    --gutter: clamp(28px, 5vw, 64px);
  }
  
  /* ---- Base ---- */
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    min-height: 100vh;
  }
  a { text-decoration: none; }
  img { display: block; }
  
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--gutter); }
  
  /* Two columns: sidebar is first in the DOM. row-reverse puts it on the RIGHT
     on desktop and top-aligned with the name; on a narrow screen flex-wrap sends
     it to the TOP (photo first). No media queries needed. */
  .layout {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: clamp(32px, 4vw, 52px);
    align-items: flex-start;
  }
  
  /* ===================== SIDEBAR ===================== */
  .sidebar {
    flex: 1 1 250px;
    max-width: 320px;
    min-width: 0;
    position: sticky;
    top: 24px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 26px;
    font-family: var(--sans);
  }
  .identity { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .avatar { width: 120px; height: 120px; border-radius: 100px; object-fit: cover; border: 1px solid var(--hairline); }
  .id-name { font-family: var(--serif); font-size: var(--fs-title); font-weight: 600; color: var(--ink); }
  .id-name .bar { color: var(--bar); font-weight: 400; margin: 0 3px; }
  
  .divider { height: 1px; background: var(--divider); }
  
  .eyebrow {
    font-family: var(--mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meta);
    display: block;
    margin-bottom: 16px;
  }
  
  .edu-list, .lang-list { display: flex; flex-direction: column; }
  .edu-list { gap: 18px; }
  .lang-list { gap: 14px; }
  .edu-degree { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
  .edu-school { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }
  .edu-date { font-family: var(--mono); font-size: var(--fs-micro); color: var(--meta); margin-top: 3px; }
  .lang-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
  .lang-level { font-size: var(--fs-meta); color: var(--muted); margin-top: 1px; }
  
  /* ===================== MAIN ===================== */
  .content { flex: 4 1 460px; min-width: 0; display: flex; flex-direction: column; gap: clamp(32px, 5vw, 44px); }
  
  .hero { max-width: 640px; }
  .name { margin: 0; font-size: var(--fs-display); line-height: 0.98; font-weight: 600; letter-spacing: -0.02em; }
  .bio { margin: 18px 0 0; font-size: var(--fs-lead); line-height: 1.55; color: #454842; font-weight: 400; }
  .link-accent { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
  
  .contacts { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; font-family: var(--mono); font-size: var(--fs-meta); }
  .contact-link { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
  
  .section-head { border-bottom: 2px solid var(--rule); padding-bottom: 10px; margin-bottom: 4px; }
  .section-title { margin: 0; font-size: var(--fs-section); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
  
  /* Research interests */
  .interests { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-top: 18px; }
  .interest { display: flex; align-items: center; gap: 11px; }
  .interest .dot { width: 9px; height: 9px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
  .interest .label { font-size: var(--fs-subhead); font-weight: 500; }
  
  /* Publications */
  .pub-list { display: flex; flex-direction: column; }
  .pub { display: flex; flex-direction: column; gap: 9px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
  .venue {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: var(--fs-label);
    color: var(--accent);
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: 5px;
    padding: 5px 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .pub-title { margin: 0; font-size: var(--fs-title); line-height: 1.32; font-weight: 600; }
  .authors { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); font-family: var(--sans); }
  .authors strong { color: var(--ink); }
  .eq { color: var(--faint); font-style: italic; }
  .pub-links { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: var(--fs-label); }
  .link-mono { color: var(--accent); }
  
  /* Experience */
  .exp-list { display: flex; flex-direction: column; font-family: var(--sans); }
  .exp-item { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
  .exp-date { flex: 0 0 118px; font-family: var(--mono); font-size: var(--fs-label); color: var(--faint); padding-top: 2px; }
  .exp-body { flex: 1 1 300px; min-width: 0; }
  .exp-role { font-size: var(--fs-subhead); font-weight: 600; color: var(--ink); }
  .exp-org { font-size: var(--fs-body); color: var(--muted); margin-top: 2px; }
  .exp-detail { font-size: var(--fs-meta); color: var(--faint); margin-top: 4px; }
  .exp-courses { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; font-size: var(--fs-meta); color: var(--faint); }
  .link-inline { color: var(--muted); border-bottom: 1px solid var(--accent-line); }
  
  /* Footer */
  .footer {
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    color: var(--meta);
  }
  .footer a { color: var(--meta); }
  
  /* Subtle hover */
  .contact-link:hover, .link-mono:hover, .venue:hover, .link-accent:hover, .link-inline:hover { opacity: 0.7; }
  
  /* Stacked (mobile) layout: the sidebar wraps to the top. Drop sticky so it
     scrolls away with the rest of the page instead of pinning to the viewport
     and covering the content below it. */
  @media (max-width: 720px) {
    .sidebar { position: static; top: auto; max-width: none; }
  }