:root {
  --ink: #17211d;
  --cream: #f4f1e8;
  --lime: #c8f55a;
  --muted: #68736d;
  --line: #cdd3c9;
}

body { background-image: radial-gradient(#c7d0c5 1.1px, transparent 1.1px); }
.section { padding-bottom: 42px; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; min-width: 0; min-height: 0; padding: 16px; }
.card span { position: absolute; top: 15px; left: 15px; width: 28px; height: 28px; font-size: .68rem; }
.card h3 { min-height: 28px; margin: 0 0 7px; padding-left: 40px; font-size: 1.1rem; line-height: 1.2; }
.card p { margin: 7px 0 11px; font-size: .75rem; line-height: 1.3; }
.card-actions { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: auto; }
.card .card-actions a { margin-top: 0; font-size: .72rem; }
.more-projects { display: table; margin: 42px auto 0; padding: 8px 14px; border: 1px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--lime); font: italic 600 .95rem/1.4 Georgia, "Times New Roman", serif; transform: rotate(-1deg); }
.projects-intro { max-width: 790px; margin: -28px 0 48px; color: var(--muted); font-size: 1.05rem; }
.hero { box-shadow: 0 14px 0 #9fca3d; }
.brand { padding: 0; background: none; box-shadow: none; transform: none; }
.side-note { box-shadow: 5px 5px 0 #76942f; }
.button { box-shadow: 6px 6px 0 #76942f; }
.button:hover, .button:focus-visible { box-shadow: 3px 3px 0 #76942f; }
.section-tag { box-shadow: 3px 3px 0 #b3df4c; }
.card, .skill-groups { box-shadow: 8px 8px 0 #b3df4c; }
.about { width: min(calc(100% - 48px), 820px); max-width: none; margin-top: 24px; padding: 20px 24px; background: rgba(244, 241, 232, .9); box-shadow: 10px 10px 0 #b3df4c; }
.about { grid-template-columns: 1fr; gap: 12px; }
.about-copy { min-width: 0; }
.about .about-intro { margin: 0 0 16px; font: italic 500 clamp(1.3rem, 2vw, 1.65rem)/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-points article { position: relative; padding: 14px 16px 14px 52px; border: 2px solid var(--ink); border-radius: 14px 22px 13px 19px; background: #fffdf7; box-shadow: 4px 4px 0 #b3df4c; font-family: Aptos, "Segoe UI", Arial, sans-serif; }
.about-points article:nth-child(2) { transform: rotate(.7deg); }
.about-points article:nth-child(3) { transform: rotate(-.5deg); }
.about-points span { position: absolute; left: 13px; top: 13px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); font-size: .66rem; font-weight: 800; }
.about .about-points h3 { margin: 0 0 5px; font: 700 .92rem/1.3 "Trebuchet MS", Aptos, "Segoe UI", sans-serif; letter-spacing: -.01em; }
.about .about-points article p { margin: 0; color: var(--muted); font: 400 .76rem/1.4 Aptos, "Segoe UI", Arial, sans-serif; letter-spacing: .01em; }
.skill-groups div:nth-child(2), .skill-groups div:nth-child(3) { background: #eef5df; }
.role { border-bottom-color: #aebeaa; }
.education { box-shadow: 10px 10px 0 #9fca3d; }
.resume-gate { max-width: 1080px; margin: 40px auto 110px; padding: clamp(28px, 5vw, 55px); display: flex; align-items: center; justify-content: space-between; gap: 35px; border: 2px solid var(--ink); border-radius: 22px 48px 18px 42px; background: var(--ink); color: var(--cream); box-shadow: 10px 10px 0 #9fca3d; transform: rotate(-.35deg); }
.resume-gate h2 { margin: 7px 0 9px; font: 500 clamp(2.2rem, 5vw, 4rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.resume-gate p:last-child { margin: 0; color: #dbe3d8; }
.resume-gate .button { flex: 0 0 auto; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .about { width: auto; padding: 32px 24px; }
  .about-points { grid-template-columns: 1fr; }
  .about-points article:nth-child(n) { transform: none; }
  .resume-gate { margin-left: 12px; margin-right: 12px; flex-direction: column; align-items: flex-start; transform: none; }
}