/*
      Simple, text-forward structure inspired by:
      - mhouge.dk (short intro → projects → thoughts/contact) citeturn1view0
      - sheldonc.ca (clear About/Skills/Projects/Contact sections) citeturn2view0
      - ellemcfarlane.com (minimal nav + lists) citeturn1view2

      Goals:
      - 4 sections: Intro → Skills → Projects → Contact
      - Muted colors, but more varied than monochrome
      - Less “modern portfolio card UI”; more “field notes / simple index”
      - Must preview reliably (no fancy blend modes)
    */

    :root {
      /* Default: light mode */
      color-scheme: light;

      --bg: #f6f7f9;
      --ink: #1c1f24;
      --muted: #5f6b7a;
      --muted-2: #7b8796;
      --border: rgba(28,31,36,0.12);

      --surface: rgba(28,31,36,0.03);
      --surface-solid: #ffffff;
      --header-bg: rgba(246,247,249,0.86);
      --hover: rgba(28,31,36,0.04);
      --rule: rgba(28,31,36,0.14);

      --input-bg: rgba(255,255,255,0.92);
      --input-bg-focus: rgba(255,255,255,1.0);
      --input-border: rgba(28,31,36,0.14);

      /* background wash for light */
      --wash-1: rgba(79,120,166,0.06);
      --wash-2: rgba(78,143,122,0.05);
      --wash-3: rgba(111,100,184,0.04);
      --wash-4: rgba(168,106,134,0.035);

      --texture-line: rgba(0,0,0,0.02);
      --texture-line-2: rgba(0,0,0,0.00);

      /* Muted but visible accents */
      --blue: #4f78a6;
      --teal: #4e8f7a;
      --violet: #6f64b8;
      --sand: #b88a45;
      --rose: #a86a86;

      --max: 860px;
      --pad: 22px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

      --r0: 0px;
      --r1: 1px;
      --r2: 2px;
    }
    /* Dark mode overrides */
    html[data-theme="dark"] {
      color-scheme: dark;

      --bg: #0f1216;
      --ink: #e7eaee;
      --muted: #aab4c0;
      --muted-2: #7f8a98;
      --border: rgba(231,234,238,0.14);

      --surface: rgba(231,234,238,0.04);
      --surface-solid: #141a21;
      --header-bg: rgba(15,18,22,0.84);
      --hover: rgba(231,234,238,0.05);
      --rule: rgba(231,234,238,0.16);

      --input-bg: rgba(15,18,22,0.62);
      --input-bg-focus: rgba(15,18,22,0.78);
      --input-border: rgba(231,234,238,0.14);

      /* accents shift lighter for dark */
      --blue: #8aa6c8;
      --teal: #84b59f;
      --violet: #9c8fd6;
      --sand: #d6b27f;
      --rose: #c98ea6;

      /* background wash for dark */
      --wash-1: rgba(138,166,200,0.14);
      --wash-2: rgba(132,181,159,0.12);
      --wash-3: rgba(156,143,214,0.08);
      --wash-4: rgba(201,142,166,0.06);

      --texture-line: rgba(231,234,238,0.018);
      --texture-line-2: rgba(0,0,0,0.020);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font);
      line-height: 1.55;
      letter-spacing: 0.2px;
    }

    /* Background wash (theme-driven) */
    body {
      background-color: var(--bg);
      background-image:
        radial-gradient(900px 520px at 18% -10%, var(--wash-1), transparent 60%),
        radial-gradient(820px 520px at 84% -8%, var(--wash-2), transparent 60%),
        radial-gradient(760px 520px at 48% 16%, var(--wash-3), transparent 62%),
        radial-gradient(700px 520px at 72% 82%, var(--wash-4), transparent 62%);
    }

    /* faint topo-ish texture, no blend modes */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        repeating-linear-gradient(0deg, var(--texture-line) 0px, var(--texture-line) 1px, transparent 2px, transparent 12px);
      opacity: 0.22;
      z-index: 0;
    }

    header, main, footer { position: relative; z-index: 1; }

    ::selection { background: rgba(79,120,166,0.20); }

    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: underline; text-underline-offset: 3px; }

    :focus-visible {
      outline: 2px solid rgba(138,166,200,0.65);
      outline-offset: 3px;
    }

    .wrap {
      width: min(var(--max), 100%);
      margin: 0 auto;
      padding: 0 var(--pad);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(8px);
      background: var(--header-bg);
      border-bottom: 1px solid var(--border);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 220px;
    }

    .mark {
      width: 34px;
      height: 34px;
      border-radius: var(--r2);
      border: 1px solid rgba(231,234,238,0.18);
      background: linear-gradient(135deg, rgba(138,166,200,0.26), rgba(132,181,159,0.16));
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .mark svg { width: 26px; height: 26px; opacity: 0.95; }

    .brand .name {
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 700;
      margin: 0;
      letter-spacing: 0.3px;
    }

    .brand .tagline {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .links {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .links a {
      font-size: 13px;
      color: var(--muted);
      padding: 7px 8px;
      border: 1px solid transparent;
      border-radius: var(--r0);
    }

    

    /* Layout sections */
    main { padding: 34px 0 22px; }

    .rule {
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--rule) 0 8px, transparent 8px 16px);
      opacity: 1;
      margin: 22px 0;
    }


    .intro h1 {
      font-family: var(--serif);
      font-size: 34px;
      margin: 0 0 10px;
      line-height: 1.1;
    }

    .intro p {
      margin: 0 0 12px;
      color: var(--muted);
      max-width: 70ch;
      font-size: 15px;
    }

    .intro-content {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    
    .intro-text {
      flex: 1 1 60%;
    }
    
    .intro-photo {
      flex: 0 0 180px;
    }
    
    .intro-photo img {
      width: 100%;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface-solid);
    }
    
    /* Mobile: stack image above text */
    @media (max-width: 720px) {
      .intro-content {
        flex-direction: column;
      }
    
      .intro-photo {
        max-width: 160px;
      }
    }
    

    .quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: var(--r0);
      border: 1px solid var(--border);
      background: rgba(28,31,36,0.02);
      color: var(--ink);
      font-size: 12px;
      font-family: var(--mono);
    }

    /* Light mode: keep text dark for contrast */
    .badge.blue   { border-color: rgba(79,120,166,0.40); background: rgba(79,120,166,0.14); color: #1f3550; }
    .badge.teal   { border-color: rgba(78,143,122,0.42); background: rgba(78,143,122,0.14); color: #1f4a3c; }
    .badge.violet { border-color: rgba(111,100,184,0.40); background: rgba(111,100,184,0.13); color: #2a245f; }
    .badge.sand   { border-color: rgba(184,138,69,0.44); background: rgba(184,138,69,0.16); color: #4a3210; }
    .badge.rose   { border-color: rgba(168,106,134,0.44); background: rgba(168,106,134,0.16); color: #4a2232; }

    /* Dark mode: flip to light text, keep muted colored washes */
    html[data-theme="dark"] .badge { background: rgba(231,234,238,0.02); color: var(--ink); border-color: var(--border); }
    html[data-theme="dark"] .badge.blue   { border-color: rgba(138,166,200,0.34); background: rgba(138,166,200,0.14); color: rgba(235,242,255,0.92); }
    html[data-theme="dark"] .badge.teal   { border-color: rgba(132,181,159,0.34); background: rgba(132,181,159,0.14); color: rgba(228,255,246,0.92); }
    html[data-theme="dark"] .badge.violet { border-color: rgba(156,143,214,0.34); background: rgba(156,143,214,0.14); color: rgba(244,240,255,0.92); }
    html[data-theme="dark"] .badge.sand   { border-color: rgba(214,178,127,0.34); background: rgba(214,178,127,0.14); color: rgba(255,244,226,0.92); }
    html[data-theme="dark"] .badge.rose   { border-color: rgba(201,142,166,0.34); background: rgba(201,142,166,0.14); color: rgba(255,236,246,0.92); }

    h2 {
      font-family: var(--serif);
      font-size: 18px;
      margin: 0 0 10px;
      letter-spacing: 0.2px;
    }

    .lede {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 13px;
      max-width: 75ch;
    }

    /* Skills: simple columns of lists */
    .cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .box {
      border: 1px solid var(--border);
      background: var(--surface-solid);
      border-radius: var(--r2);
      padding: 14px 14px 10px;
    }

    .box h3 {
      margin: 0 0 8px;
      font-size: 13px;
      font-family: var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    ul {
      margin: 0;
      padding-left: 16px;
      color: var(--muted);
      font-size: 14px;
    }

    li { margin: 6px 0; }

    /* Projects: simple list, not cards */
    .projects { display: grid; gap: 14px; }

    .project {
      border-left: 3px solid color-mix(in srgb, var(--blue) 45%, transparent);
      padding-left: 12px;
    }

    .project .title {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .project .title strong {
      font-family: var(--serif);
      font-size: 16px;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .pill {
      font-family: var(--mono);
      font-size: 12px;
      padding: 4px 6px;
      border: 1px solid var(--border);
      background: var(--surface-solid);
      color: var(--muted);
    }

    .pill.blue { border-color: rgba(138,166,200,0.26); background: rgba(138,166,200,0.08); }
    .pill.teal { border-color: rgba(132,181,159,0.26); background: rgba(132,181,159,0.08); }
    .pill.violet { border-color: rgba(156,143,214,0.26); background: rgba(156,143,214,0.08); }
    .pill.sand { border-color: rgba(214,178,127,0.28); background: rgba(214,178,127,0.08); }

    .project p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      max-width: 75ch;
    }

    .project .links-row {
      margin-top: 8px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      color: var(--blue);
      font-size: 13px;
    }

    .project .links-row a { color: var(--blue); }

    /* Contact */
    .contact {
      border: 1px solid var(--border);
      background: var(--surface-solid);
      border-radius: var(--r2);
      padding: 14px;
    }

    .contact .row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
      color: var(--muted);
      font-size: 14px;
    }

    .contact .row a { color: rgba(183,199,221,0.95); }

    .form {
      margin-top: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

    input, textarea {
      width: 100%;
      padding: 10px 11px;
      border-radius: var(--r1);
      border: 1px solid var(--input-border);
      background: var(--input-bg);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 13px;
      outline: none;
    }

    input:focus, textarea:focus {
      border-color: rgba(79,120,166,0.55);
      background: var(--input-bg-focus);
    }

    textarea { grid-column: span 2; min-height: 110px; resize: vertical; }

    .actions {
      grid-column: span 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(231,234,238,0.06);
      padding-top: 10px;
      margin-top: 4px;
    }

    .btn {
      padding: 9px 12px;
      border: 1px solid rgba(231,234,238,0.14);
      background: rgba(231,234,238,0.03);
      border-radius: var(--r1);
      color: var(--ink);
      font-size: 13px;
      font-family: var(--font);
      cursor: pointer;
    }

    .btn:hover { background: rgba(138,166,200,0.10); }

    footer {
      padding: 18px 0 26px;
      color: var(--muted-2);
      font-size: 12px;
    }

    @media (max-width: 780px) {
      .cols { grid-template-columns: 1fr; }
      .form { grid-template-columns: 1fr; }
      textarea, .actions { grid-column: span 1; }
      .brand { min-width: auto; }
    }
  
    /* Expandable project details */
    details.expand {
      margin-top: 10px;
      border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
      padding-top: 8px;
    }

    details.expand summary {
      cursor: pointer;
      user-select: none;
      color: var(--blue);
      font-size: 13px;
      list-style: none;
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    details.expand summary::-webkit-details-marker { display: none; }

    details.expand summary::before {
      content: "+";
      display: inline-block;
      width: 16px;
      text-align: center;
      color: var(--muted);
      font-family: var(--mono);
    }

    details.expand[open] summary::before { content: "–"; }

    .expand-body {
      margin-top: 8px;
      padding: 10px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
      border-radius: var(--r1);
      color: var(--muted);
      font-size: 14px;
      max-width: 78ch;
    }

    .expand-body p { margin: 0 0 10px; }
    .expand-body p:last-child { margin-bottom: 0; }
    .expand-body code { font-family: var(--mono); font-size: 12px; }