* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink:#35281f; --dark:#49372a; --darkest:#30231b; --paper:#ded0b4; --paper-light:#eee3cb; --paper-dark:#c6b493; --line:#514033; }
html { scroll-behavior:smooth; }
body {
  min-height: 100vh;
  padding: 0;
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, serif;
  background-color: #d5c4a2;
  background-image:
    linear-gradient(45deg, rgba(128, 92, 62, 0.38) 25%, transparent 25%, transparent 50%, rgba(128, 92, 62, 0.38) 50%, rgba(128, 92, 62, 0.38) 75%, transparent 75%, transparent),
    linear-gradient(-45deg, rgba(128, 92, 62, 0.38) 25%, transparent 25%, transparent 50%, rgba(128, 92, 62, 0.38) 50%, rgba(128, 92, 62, 0.38) 75%, transparent 75%, transparent),
    linear-gradient(90deg, rgba(246, 234, 215, 0.9) 0%, rgba(246, 234, 215, 0.9) 50%, rgba(191, 167, 137, 0.72) 50%, rgba(191, 167, 137, 0.72) 100%);
  background-size: 52px 52px, 52px 52px, 52px 52px;
  background-position: center;
}
body::before,body::after { content:"✦"; position:fixed; font-size:110px; opacity:.12; pointer-events:none; }
body::before { left:2%; bottom:2%; } body::after { right:2%; top:4%; }
a { color:inherit; }
.page { position:relative; width:min(1180px,100%); margin:auto; overflow:hidden; border:2px solid #34271e; border-radius:38px; background:var(--paper); box-shadow:0 18px 45px rgba(49,33,19,.34); }
.page::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(rgba(45,31,18,.28) .7px,transparent .8px); background-size:7px 7px; mix-blend-mode:multiply; }
.topbar,.profile,.content,.projects,.project-list-section,.certs,.navigation,footer { position:relative; z-index:1; }
.topbar { min-height:88px; display:flex; align-items:center; gap:28px; padding:20px 34px; border-bottom:2px solid var(--line); background:rgba(220,204,174,.72); }
.credit { padding:11px 18px; white-space:nowrap; border:2px solid var(--darkest); border-radius:15px; color:var(--paper-light); background:var(--dark); font-family:Georgia,serif; font-size:17px; }
.search { flex:1; height:54px; display:flex; align-items:center; justify-content:center; padding:0 20px; overflow:hidden; border:3px solid #584536; border-radius:35px; background:repeating-linear-gradient(45deg,rgba(60,40,25,.035) 0 2px,transparent 2px 7px); font-size:11px; color:#665343; text-align:center; }
.top-icons { display:flex; gap:9px; } .top-icons button { width:55px; height:55px; border:2px solid var(--darkest); border-radius:50%; color:var(--paper-light); background:var(--dark); font-size:21px; cursor:pointer; transition:transform .2s ease; } .top-icons button:hover { transform:translateY(-3px) rotate(-4deg); }
.profile { display:flex; align-items:center; min-height:218px; margin:19px; padding:19px 28px; border:3px solid #f0e4cb; border-radius:25px; outline:2px dashed #5a4838; outline-offset:-11px; color:var(--paper-light); background:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.5px),var(--dark); background-size:9px 9px; }
.profile-image {
  width:184px;
  height:184px;
  flex:0 0 184px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:8px solid #cdbd9f;
  border-radius:50%;
  background:#8b7962;
  box-shadow:inset 0 0 0 2px #3d2d22;
}
.placeholder-cat { font:100px "DM Serif Display",Georgia,serif; color:#eee2c8; transform:rotate(-8deg); text-shadow:3px 3px 0 #30231b; }
.pfp-img { width:100%; height:100%; object-fit:cover; object-position:center top; mix-blend-mode:multiply; image-rendering:pixelated; }
.profile-content { flex:1; padding-left:28px; } .cat-row { margin-bottom:12px; overflow:hidden; white-space:nowrap; font-size:27px; letter-spacing:2px; filter:grayscale(1); }
.profile-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; } .profile h1,.section-title,.artists-title,.info-card h2,.bio-card h2,.navigation a,.project h2 { font-family:"DM Serif Display",Georgia,serif; }
.profile h1 {
  font-size:clamp(32px,5vw,45px);
  color:#f1e3c7;
  display:inline-block;
}
.bubbler mark {
  background:none;
  color:#f1e3c7;
  display:inline-block;
  animation:bubble 2s infinite ease-in-out;
  transform-origin:center bottom;
}
.bubbler mark:nth-child(1) { animation-delay:0s; }
.bubbler mark:nth-child(2) { animation-delay:0.8s; }
.bubbler mark:nth-child(3) { animation-delay:1.6s; }
.bubbler mark:nth-child(4) { animation-delay:2.4s; }
.bubbler mark:nth-child(5) { animation-delay:3.2s; }
.bubbler mark:nth-child(6) { animation-delay:4s; }
.bubbler mark:nth-child(7) { animation-delay:4.8s; }
.bubbler mark:nth-child(8) { animation-delay:5.6s; }
.bubbler mark:nth-child(9) { animation-delay:6.4s; }
.bubbler mark:nth-child(10) { animation-delay:7.2s; }
.bubbler mark:nth-child(11) { animation-delay:8s; }

@keyframes bubble {
  from { color:#f1e3c7; transform:translateY(0) scale(1); }
  50% { color:#dcb98a; transform:translateY(-5px) scale(1.12); }
  to { color:#f1e3c7; transform:translateY(0) scale(1); }
}

@-webkit-keyframes bubble {
  from { color:#f1e3c7; transform:translateY(0) scale(1); }
  50% { color:#dcb98a; transform:translateY(-5px) scale(1.12); }
  to { color:#f1e3c7; transform:translateY(0) scale(1); }
}
.links { font-size:18px; }
.profile-intro { max-width:760px; margin-top:7px; font-size:13px; line-height:1.5; color:#eee2c8; }
.status-buttons { display:flex; gap:14px; margin-top:14px; } .status-buttons span,.status-buttons a { flex:1; padding:9px 15px; border:2px solid #c9b898; border-radius:28px; color:#eee2c8; background:#38291f; font:inherit; font-size:13px; text-align:center; text-decoration:none; } .status-buttons a:hover { background:#5a4332; }
.content,.projects,.project-list-section { margin:19px; padding:20px; border:2px solid #f1e4cb; border-radius:25px; outline:1px dashed #77634c; outline-offset:-9px; background:rgba(218,202,170,.9); }
.content { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:18px; }
.section-title,.artists-title { padding:15px 19px; border:2px solid #241b16; border-radius:15px; color:#f1e6cf; background:var(--darkest); font-size:24px; box-shadow:inset 0 -2px 0 rgba(255,255,255,.05); }
.bio-card { position:relative; margin-top:11px; padding:20px 18px; border:2px solid #403126; border-radius:17px; text-align:center; line-height:1.55; background:var(--paper-light); } .bio-card::before,.bio-card::after { content:"⌞"; position:absolute; font-size:42px; font-weight:bold; opacity:.65; } .bio-card::before { left:5px; top:-2px; transform:rotate(90deg); } .bio-card::after { right:5px; bottom:-2px; transform:rotate(-90deg); } .bio-card h2 { margin-bottom:9px; font-size:28px; } .bio-card p { font-size:12px; } .bio-card p+p { margin-top:5px; } .bio-card .muted { margin-top:9px; font-size:10px; color:#665343; }
.dark-card { margin-top:11px; padding:17px; border:2px solid #2a1e17; border-radius:15px; color:#eee2c8; background:#38291f; text-align:center; line-height:1.55; font-size:12px; } .dark-card strong,.dark-card span { display:block; } .dark-card strong { margin-bottom:5px; }
.artists { padding:5px 9px; line-height:1.5; font-size:13px; } .artists-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; font-size:24px; } .artist-list { margin-top:13px; font-weight:700; font-size:11px; line-height:1.65; }
.toolbox-langs { margin-top:13px; padding-top:11px; border-top:1px dashed #7a6449; }
.langs-label { display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#806a52; margin-bottom:4px; }

/* My Favs card */
.favs-card { padding:5px 9px; line-height:1.5; font-size:13px; }
.favs-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; padding:15px 19px; border:2px solid #241b16; border-radius:15px; color:#f1e6cf; background:var(--darkest); font-size:24px; font-family:"DM Serif Display",Georgia,serif; box-shadow:inset 0 -2px 0 rgba(255,255,255,.05); }
.favs-list { list-style:none; display:flex; flex-direction:column; gap:5px; }
.favs-list li { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; }
.fav-tag { flex:0 0 52px; padding:2px 5px; border:1.5px solid #7a6449; border-radius:7px; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:#806a52; background:#e4d5b5; line-height:1.4; }
.fav-tag.movie { flex:0 0 52px; }
.time-coding { margin-top:11px; padding-top:10px; border-top:1px dashed #7a6449; }
.time-label { display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#806a52; margin-bottom:6px; }
.lang-bars { display:flex; gap:5px; }
.bar-label { padding:4px 9px; border-radius:9px; font-size:9px; font-weight:700; letter-spacing:.04em; color:#f1e6cf; }
.bar-label.rust { background:#4a3728; }
.bar-label.ts { background:#3d4a6e; }
.bar-label.cpp { background:#4a3d28; }
.bar-label.cs { background:#2e4a3d; }
.bar-label.etc { background:#4a3a28; color:#c0a882; }

.small-cards { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .info-card { min-height:142px; padding:17px; border:2px solid #3d2e23; border-radius:15px; background:#eadfc8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); } .info-card h2 { margin-bottom:12px; font-size:23px; text-align:center; } .info-card p { font-size:12.5px; line-height:1.48; }
.projects { margin-top:0; } .project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:11px; } .project { padding:18px; border:2px solid #3d2e23; border-radius:15px; background:#eadfc8; text-decoration:none; transition:transform .2s,background .2s; } .project:hover { transform:translateY(-3px); background:#f0e5cf; } .project>span,.project-row span,.certs span { font-size:10px; color:#806a52; letter-spacing:.08em; text-transform:uppercase; } .project h2 { font-size:27px; margin:7px 0; } .project p { font-size:12px; line-height:1.55; }
.project-list-section { margin-top:0; } .project-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:11px; } .project-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:12px 15px; border:2px solid #3d2e23; border-radius:15px; background:#eadfc8; text-decoration:none; } .project-row:hover { background:#f0e5cf; } .project-row strong { font-family:"DM Serif Display",Georgia,serif; font-size:20px; } .project-row em { font-size:10px; font-style:normal; color:#665343; } .project-row b { font-size:16px; }
.certs { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:19px; padding:14px 18px; border-top:2px solid #49382b; border-bottom:2px solid #49382b; background:#dccdad; } .certs div { display:flex; gap:13px; align-items:center; flex-wrap:wrap; } .certs strong { font-size:11px; } .certs p { font-size:10px; }
.navigation { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 30px; border-top:2px solid #49382b; background:#6a5140; } .navigation a { padding:14px; border:2px solid #302219; border-radius:30px; color:#f0e4cc; background:#49372a; font-size:25px; text-align:center; text-decoration:none; transition:transform .2s,background .2s; } .navigation a:hover,.navigation a.active { transform:translateY(-3px); background:#5a4332; }
footer { padding:17px; color:#35281f; background:#dccdad; text-align:center; font-size:13px; }
.resources-page .topbar { border-bottom:0; }
.resource-intro { margin:19px; padding:30px 28px 25px; border:2px solid #f1e4cb; border-radius:25px; outline:1px dashed #77634c; outline-offset:-9px; background:rgba(218,202,170,.9); }
.resource-intro .eyebrow { display:block; margin-bottom:8px; color:#806a52; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.resource-intro h1 { margin-bottom:8px; font:42px "DM Serif Display",Georgia,serif; }
.resource-intro p { max-width:720px; font-size:13px; line-height:1.6; }
.resource-board { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:19px; padding:20px; border:2px solid #f1e4cb; border-radius:25px; outline:1px dashed #77634c; outline-offset:-9px; background:rgba(218,202,170,.9); }
.resource-category { padding:18px; border:2px solid #3d2e23; border-radius:15px; background:#eadfc8; }
.resource-category-heading { margin-bottom:12px; padding-bottom:10px; border-bottom:1px dashed #806a52; }
.resource-category-heading span { color:#806a52; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.resource-category-heading h2 { margin-top:5px; font:27px "DM Serif Display",Georgia,serif; }
.resource-links { display:grid; gap:7px; }
.resource-links a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid transparent; border-radius:8px; text-decoration:none; transition:background .2s, border-color .2s, transform .2s; }
.resource-links a:hover { border-color:#806a52; background:#f0e5cf; transform:translateX(3px); }
.resource-links strong { font:16px "DM Serif Display",Georgia,serif; }
.resource-links em { color:#665343; font-size:10px; font-style:normal; text-align:right; }
.resource-note { display:flex; align-items:center; gap:16px; margin:19px; padding:17px 20px; border-top:2px solid #49382b; border-bottom:2px solid #49382b; background:#dccdad; }
.resource-note strong { font:18px "DM Serif Display",Georgia,serif; white-space:nowrap; }
.resource-note p { font-size:11px; line-height:1.5; }
@media(max-width:760px) { body{padding:10px}.page{border-radius:25px}.topbar{flex-wrap:wrap;padding:18px}.search{order:3;flex-basis:100%}.profile{flex-direction:column;text-align:center}.profile-content{width:100%;padding:18px 0 0}.profile-heading{justify-content:center}.content{grid-template-columns:1fr}.small-cards{grid-template-columns:1fr}.project-grid,.project-list{grid-template-columns:1fr}.project-row{grid-template-columns:auto 1fr auto}.project-row em{display:none}.certs{flex-direction:column;align-items:flex-start}.navigation{grid-template-columns:1fr;padding:18px} }
@media(max-width:760px) { .resource-board{grid-template-columns:1fr}.resource-note{align-items:flex-start;flex-direction:column;gap:6px}.resource-links a{align-items:flex-start;flex-direction:column;gap:3px}.resource-links em{text-align:left} }
@media(max-width:430px) { .credit{font-size:14px}.top-icons button{width:45px;height:45px}.profile-image{width:175px;height:175px;flex-basis:175px}.placeholder-cat{font-size:95px}.status-buttons{flex-direction:column}.project-row{grid-template-columns:1fr auto}.project-row span{grid-column:1}.project-row strong{grid-column:1}.project-row b{grid-column:2;grid-row:1/3}.search{font-size:9px} }