/* ── ABOUT PAGE ───────────────────────────────── */

 .about-hero {
     padding: 4rem 0 3rem;
     border-bottom: 1px solid var(--border);
 }

 .about-hero h1 {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-weight: 800;
     font-size: clamp(3rem, 8vw, 6rem);
     letter-spacing: -0.04em;
     line-height: 0.95;
     margin-bottom: 1.25rem;
 }

 .about-hero h1 span {
     color: var(--pop);
 }

 .about-hero-sub {
     font-size: 0.95rem;
     color: var(--dim);
     line-height: 1.8;
     max-width: 520px;
 }

 .about-hero-sub strong {
     color: var(--ink);
     font-weight: 500;
 }

 /* ── TWO COLUMN GRID ──────────────────────────── */
 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     padding: 3rem 0;
     border-bottom: 1px solid var(--border);
 }

 .about-block-label {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-weight: 600;
     font-size: 0.72rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--dim);
     margin-bottom: 1.25rem;
 }

 .about-block-text {
     font-size: 0.92rem;
     color: var(--dim);
     line-height: 1.9;
 }

 .about-block-text p+p {
     margin-top: 1rem;
 }

 .about-block-text strong {
     color: var(--ink);
     font-weight: 500;
 }

 .about-block-text a {
     color: var(--pop);
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s;
 }

 .about-block-text a:hover {
     border-color: var(--pop);
 }

 /* ── SKILLS ───────────────────────────────────── */
 .skills-section {
     padding: 3rem 0;
     border-bottom: 1px solid var(--border);
 }

 .skills-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     margin-top: 1.5rem;
 }

 .skill-cell {
     padding: 1.25rem 1.5rem;
     min-height: 72px;
     background: var(--bg);
 }

 .skill-cell-name {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-weight: 700;
     font-size: 0.88rem;
     color: var(--ink);
     margin-bottom: 0.25rem;
 }

 .skill-cell-type {
     font-size: 0.68rem;
     color: var(--faint);
     letter-spacing: 0.06em;
 }

 .skill-cell:hover {
     background: var(--bg2);
     cursor: default;
 }

 /* ── FUN STUFF ────────────────────────────────── */
 .fun-section {
     padding: 3rem 0;
     border-bottom: 1px solid var(--border);
 }

 .fun-list {
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
     margin-top: 1.5rem;
 }

 .fun-item {
     font-size: 0.92rem;
     color: var(--dim);
     display: flex;
     gap: 0.75rem;
     align-items: baseline;
     line-height: 1.6;
 }

 .fun-item::before {
     content: '→';
     color: var(--pop);
     flex-shrink: 0;
     font-family: 'Bricolage Grotesque', sans-serif;
 }

 /* ── CONTACT ──────────────────────────────────── */
 .contact-section {
     padding: 3rem 0;
 }

 .contact-row {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
     margin-top: 1.5rem;
 }

 .contact-pill {
     font-family: 'Bricolage Grotesque', sans-serif;
     font-weight: 500;
     font-size: 0.85rem;
     padding: 0.4rem 1rem;
     border: 1px solid var(--border);
     border-radius: 999px;
     color: var(--dim);
     text-decoration: none;
     display: inline-block;
     transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s, border-color 0.15s;
 }

 .contact-pill:hover {
     color: var(--pop);
     border-color: var(--pop);
     transform: scale(1.06) rotate(-1deg);
 }

 .contact-pill:active {
     transform: scale(0.97);
 }

 /* ── PHOTOS ───────────────────────────────────────── */
 .photos-section {
     padding: 3rem 0;
     border-bottom: 1px solid var(--border);
 }

 .photo-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
     margin-top: 1.5rem;
 }

 .photo-cell {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg2);
    display: flex;
    flex-direction: column;
    position: relative;
}

 .photo-cell img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
     display: block;
     transition: transform 0.3s;
 }

 .photo-cell:hover .photo-img-wrap img {
     transform: scale(1.05);
 }

 .photo-img-wrap {
     aspect-ratio: 1;
     overflow: hidden;
 }

 .photo-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.3s;
 }

 .photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.85rem 0.6rem;
    font-size: 0.76rem;
    color: #fff;
    line-height: 1.4;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.65));
}
 /* ── MOBILE ───────────────────────────────────── */
 @media (max-width: 650px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .skills-grid {
         grid-template-columns: 1fr 1fr;
     }

     .photo-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }