:root { --ink:#13294b; --muted:#5f7085; --paper:#faf9f5; --line:#d8e0ea; --lime:#e3ebf5; --orange:#fa6300; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,sans-serif; }
.container { width:min(1120px,calc(100% - 48px)); margin:0 auto; } .nav { display:flex; align-items:center; justify-content:space-between; padding:28px 0; }
.logo { color:var(--ink); font-size:1.2rem; font-weight:800; letter-spacing:-.08em; text-decoration:none; } .logo span,.wave { color:var(--orange); }.nav-links { display:flex; gap:29px; }.nav-links a { color:var(--muted); font-size:.78rem; font-weight:700; text-decoration:none; }.nav-links a:hover,.email-link:hover { color:var(--orange); }
.hero { display:grid; grid-template-columns:1.1fr .9fr; min-height:650px; align-items:center; gap:50px; padding:52px 0 90px; }.kicker { margin:0 0 22px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.78rem; }.hero h1 { margin:0 0 27px; font-size:clamp(3.5rem,7vw,6.7rem); line-height:.96; letter-spacing:-.085em; } h2,p { margin-top:0; } em { color:var(--orange); font-family:Georgia,serif; font-weight:400; }.intro { max-width:510px; margin-bottom:32px; color:var(--muted); font-size:1.04rem; line-height:1.75; }.actions { display:flex; gap:12px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--ink); border-radius:999px; font-size:.8rem; font-weight:800; text-decoration:none; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-dark { background:var(--ink); color:var(--paper); }.button-light { color:var(--ink); }
.hero-art { position:relative; display:grid; place-items:center; height:470px; }.sun { display:grid; place-items:center; width:210px; height:210px; border-radius:47% 53% 48% 52%; background:var(--lime); color:var(--ink); font-size:3.3rem; font-weight:800; letter-spacing:-.12em; transform:rotate(-9deg); box-shadow:10px 15px 0 rgba(241,126,80,.17); }.orbit { position:absolute; width:390px; height:130px; border:1px solid #bdc5ba; border-radius:50%; transform:rotate(-32deg); }.orbit-two { width:440px; height:190px; transform:rotate(51deg); border-color:#d4d9d0; }.star { position:absolute; color:var(--orange); font-size:1.9rem; }.star-one { top:57px; right:65px; }.star-two { bottom:80px; left:53px; color:var(--ink); font-size:1.25rem; }.art-note { position:absolute; right:0; bottom:42px; color:var(--muted); font-family:"DM Mono",monospace; font-size:.68rem; line-height:1.55; text-align:right; }
.section-grid { display:grid; grid-template-columns:180px 1fr; gap:50px; padding:96px 0; border-top:1px solid var(--line); }.section-label { color:var(--muted); font-family:"DM Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }.section-label span { color:var(--orange); margin-right:13px; }.about-content h2 { max-width:710px; margin-bottom:36px; font-size:clamp(2rem,4vw,3.8rem); line-height:1.03; letter-spacing:-.07em; }.about-columns { display:grid; grid-template-columns:1fr 1fr; gap:45px; max-width:740px; color:var(--muted); line-height:1.75; }.interest-row { display:flex; align-items:center; gap:24px; margin-top:44px; padding-top:20px; border-top:1px solid var(--line); font-size:.77rem; }.interest-row span { color:var(--muted); font-family:"DM Mono",monospace; }.interest-row strong { font-size:.78rem; }
.project-list { display:grid; gap:16px; }.project-card { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:34px; border-radius:4px; background:var(--ink); color:var(--paper); }.project-card-light { background:var(--lime); color:var(--ink); }.project-type { margin-bottom:18px; color:var(--lime); font-family:"DM Mono",monospace; font-size:.7rem; }.project-card-light .project-type { color:var(--orange); }.project-card h2 { margin-bottom:12px; font-size:2.6rem; letter-spacing:-.07em; }.project-card p:last-of-type { max-width:500px; margin:0; color:#b6beb5; line-height:1.65; }.project-card-light p:last-of-type { color:#58634f; }.project-arrow { color:var(--lime); font-size:2rem; text-decoration:none; }.project-card-light .project-arrow { color:var(--orange); }.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }.tags span { padding:6px 9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; font-family:"DM Mono",monospace; font-size:.62rem; }.project-card-light .tags span { border-color:rgba(32,37,33,.25); }.skills-content h2 { max-width:700px; margin-bottom:38px; font-size:clamp(2rem,4vw,3.8rem); line-height:1.03; letter-spacing:-.07em; }.skill-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; border-top:1px solid var(--line); }.skill-groups > div { padding-top:17px; }.skill-label { color:var(--orange); font-family:"DM Mono",monospace; font-size:.68rem; text-transform:uppercase; }.skill-groups p { margin:13px 0 0; color:var(--muted); font-size:.9rem; line-height:1.65; }.timeline { display:grid; gap:0; }.timeline-item { display:grid; grid-template-columns:120px 1fr; gap:25px; padding:0 0 32px; border-bottom:1px solid var(--line); }.timeline-item + .timeline-item { padding-top:32px; }.timeline-date { color:var(--orange); font-family:"DM Mono",monospace; font-size:.68rem; text-transform:uppercase; }.timeline-item h3 { margin:0 0 8px; font-size:1.35rem; letter-spacing:-.04em; }.timeline-item p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }.learning-card { display:flex; align-items:flex-start; gap:25px; padding:34px; background:#eee9df; }.learning-pulse { flex:0 0 13px; width:13px; height:13px; margin-top:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 8px rgba(241,126,80,.14); }.learning-card h2 { margin-bottom:12px; font-size:2.4rem; letter-spacing:-.07em; }.learning-card p:last-child { max-width:600px; margin:0; color:var(--muted); line-height:1.7; }.contact-section { padding:115px 0 130px; }.contact-section h2 { margin-bottom:42px; font-size:clamp(3rem,7vw,6rem); line-height:.95; letter-spacing:-.08em; }.email-link { color:var(--ink); border-bottom:2px solid var(--orange); font-family:"DM Mono",monospace; font-size:.9rem; text-decoration:none; }.email-link span { margin-left:18px; color:var(--orange); }.footer { display:flex; justify-content:space-between; padding:24px 0 32px; border-top:1px solid var(--line); color:var(--muted); font-family:"DM Mono",monospace; font-size:.65rem; }
@media (max-width:760px) { .container { width:min(100% - 32px,560px); }.nav { padding:20px 0; }.nav-links { gap:15px; }.hero { grid-template-columns:1fr; min-height:auto; padding:70px 0 80px; }.hero-art { height:330px; }.sun { width:160px; height:160px; font-size:2.5rem; }.orbit { width:310px; }.orbit-two { width:350px; }.section-grid { grid-template-columns:1fr; gap:25px; padding:68px 0; }.about-columns { grid-template-columns:1fr; gap:4px; }.interest-row { align-items:flex-start; flex-direction:column; gap:10px; }.project-card { align-items:flex-start; flex-direction:column; }.skill-groups { grid-template-columns:1fr; gap:8px; }.timeline-item { grid-template-columns:1fr; gap:10px; }.learning-card { flex-direction:column; gap:10px; }.contact-section { padding:80px 0 100px; }.footer { gap:20px; flex-direction:column; } }

/* Give the small category labels more visual weight. */
.skill-label, .timeline-date { font-size:.85rem; }

/* Emphasize the four labels called out in the design feedback. */
.skill-label { font-size:1rem; font-weight:700; }
.timeline-item:first-child .timeline-date { font-size:1rem; font-weight:700; }

/* Make the main section names easier to scan. */
.section-label { font-size:.95rem; font-weight:700; }

/* Let chess orbit the hero identity, not just the dedicated section. */
.hero-copy { position:relative; }
.hero-copy > *:not(.hero-chess-scatter) { position:relative; z-index:1; }
.hero-chess-scatter { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-piece { position:absolute; color:var(--ink); font-family:Georgia,serif; font-size:clamp(3.8rem,7vw,6.8rem); line-height:1; opacity:.16; }
.hero-piece-one { top:-70px; left:42%; color:var(--orange); transform:rotate(-12deg); }
.hero-piece-two { top:83px; left:-52px; transform:rotate(-18deg); }
.hero-piece-three { right:8%; bottom:18px; color:var(--orange); transform:rotate(14deg); }
.hero-piece-four { top:205px; left:55%; transform:rotate(10deg); }
.hero-piece-five { left:20%; bottom:-35px; color:var(--orange); transform:rotate(-14deg); }

/* Chess motif and dedicated chess section. */
.chess-pieces { position:absolute; right:37px; top:103px; display:flex; align-items:flex-end; gap:4px; color:var(--ink); font-family:Georgia,serif; font-size:2.3rem; transform:rotate(8deg); }
.chess-pieces span:nth-child(2) { color:var(--orange); font-size:2.8rem; transform:translateY(-10px); }
.chess-pieces span:nth-child(3) { font-size:2rem; transform:translateY(5px); }
.chess-pieces span:nth-child(4) { color:var(--orange); font-size:2.15rem; transform:translateY(-2px); }
.chess-content { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:end; }
.chess-content h2 { max-width:650px; margin:0; font-size:clamp(2.4rem,4.5vw,4.4rem); line-height:1; letter-spacing:-.08em; }
.chess-body { padding-top:17px; border-top:1px solid var(--line); }
.chess-icon-row { display:flex; gap:16px; margin-bottom:24px; color:var(--orange); font-family:Georgia,serif; font-size:2.5rem; line-height:1; }
.chess-icon-row span:nth-child(even) { color:var(--ink); transform:translateY(8px); }
.chess-body p { max-width:520px; margin-bottom:26px; color:var(--muted); line-height:1.75; }
@media (max-width:760px) { .chess-content { grid-template-columns:1fr; gap:30px; }.chess-pieces { right:25px; top:62px; transform:scale(.8) rotate(8deg); } }
@media (max-width:760px) { .hero-piece { font-size:4rem; opacity:.13; }.hero-piece-one { top:-42px; left:55%; }.hero-piece-two { left:-24px; top:95px; }.hero-piece-three { right:3%; bottom:12px; }.hero-piece-four { top:190px; left:63%; }.hero-piece-five { left:25%; bottom:-25px; } }

.section-label { color:var(--ink); }