.gallery-page { background: #fffdf8; }
.gallery-hero { padding: 95px 0 65px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 70px; align-items: end; }
.gallery-title h1 { margin: 0; font-size: clamp(64px, 7vw, 96px); line-height: .9; }
.gallery-title h1 span { color: #6aa5d5; font-family: Gaegu, cursive; }
.gallery-intro { position: relative; padding: 33px 25px 24px; background: var(--yellow); border: var(--border); border-radius: 9px; box-shadow: var(--shadow); transform: rotate(2deg); }
.gallery-intro p { margin: 0 0 15px; color: #5d5b6d; font-size: 14px; line-height: 1.55; }
.scribble { position: absolute; right: 20px; top: -24px; color: var(--pink-dark); font: 700 26px Gaegu, cursive; transform: rotate(8deg); }
.tiny-faces { word-spacing: 8px; font-family: Gaegu, cursive; }
.profile-section { padding-bottom: 105px; }
.gallery-toolbar { margin-bottom: 28px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; border-block: 1.5px dashed var(--ink); color: var(--ink-soft); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.gallery-toolbar p { margin: 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #66bc87; border: 1px solid var(--ink); border-radius: 50%; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.profile-card { position: relative; min-height: 410px; padding: 18px; display: grid; grid-template-columns: .87fr 1.13fr; gap: 24px; border: var(--border); border-radius: 22px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; cursor: pointer; }
.profile-card:hover, .profile-card:focus-visible { transform: translateY(-7px) rotate(-.5deg); box-shadow: 9px 11px 0 rgba(49,48,72,.14); outline: none; }
.student-card { background: var(--sky); }.professional-card { background: var(--mint); }.social-card { background: var(--pink); }.public-card { background: var(--yellow); }
.profile-photo { position: relative; min-height: 370px; display: grid; place-items: center; border: var(--border); border-radius: 13px 13px 5px 5px; overflow: hidden; }
.profile-photo::before, .profile-photo::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(49,48,72,.25); }
.profile-photo::before { width: 170px; height: 170px; }.profile-photo::after { width: 250px; height: 250px; }
.profile-photo > span { position: relative; z-index: 2; display: grid; place-items: center; width: 105px; height: 105px; border: 3px solid var(--ink); border-radius: 50%; background: var(--white); box-shadow: 6px 6px 0 var(--ink); font: 700 50px Gaegu; }
.profile-photo i { position: absolute; z-index: 3; left: 12px; bottom: 15px; padding: 7px; background: var(--white); border: 1.5px solid; font: 700 19px/1 Gaegu; font-style: normal; transform: rotate(-6deg); }
.profile-photo b { position: absolute; z-index: 2; right: 15px; top: 14px; font-size: 25px; }.student-photo { background: #8fc9ee; }.professional-photo { background: #9ed7bb; }.social-photo { background: #eea8c4; }.public-photo { background: #f4d56e; }
.profile-copy { padding: 10px 5px 6px 0; display: flex; flex-direction: column; align-items: flex-start; }
.profile-meta { width: 100%; display: flex; justify-content: space-between; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.profile-copy h2 { margin: 47px 0 14px; font-size: clamp(36px, 4vw, 50px); line-height: .9; }
.profile-copy p { color: #555365; font-size: 13px; line-height: 1.55; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag-row span { padding: 5px 8px; background: rgba(255,255,255,.48); border: 1px solid var(--ink); border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.profile-copy button { width: 100%; margin-top: auto; padding: 11px 0 5px; display: flex; justify-content: space-between; background: transparent; border: 0; border-top: 1.5px dashed var(--ink); font-size: 12px; font-weight: 900; }
.gallery-cta { margin-bottom: 100px; padding: 54px 60px; display: flex; justify-content: space-between; align-items: center; background: var(--lavender); border: var(--border); border-radius: 30px 10px; box-shadow: 8px 9px 0 var(--pink); }.gallery-cta span { font: 700 18px Gaegu; }.gallery-cta h2 { margin: 8px 0 0; font-size: clamp(40px,5vw,62px); line-height: .95; }
.profile-dialog { width: min(760px, calc(100% - 24px)); padding: 45px; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 30px 12px; box-shadow: 12px 13px 0 var(--pink-dark); }.profile-dialog::backdrop { background: rgba(49,48,72,.48); backdrop-filter: blur(5px); }.profile-dialog h2 { margin: 8px 0 12px; font-size: clamp(49px,7vw,72px); }.profile-dialog > p:not(.eyebrow) { max-width: 610px; color: var(--ink-soft); line-height: 1.6; }.dialog-close { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border: var(--border); border-radius: 50%; background: white; font-size: 24px; line-height: 1; }.dialog-sticker { position: absolute; right: 72px; top: 22px; width: 70px; height: 70px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: var(--yellow); font-size: 9px; font-weight: 900; text-align: center; transform: rotate(7deg); }.dialog-details { margin: 28px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.dialog-details section { padding: 18px; background: white; border: 1.5px solid var(--ink); border-radius: 12px; }.dialog-details section > span { font: 700 25px Gaegu; }.dialog-details h3 { margin: 10px 0 6px; font-size: 15px; }.dialog-details p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
@media (max-width: 850px) { .gallery-hero { grid-template-columns: 1fr; gap: 40px; }.gallery-intro { max-width: 500px; }.profile-card { grid-template-columns: 1fr; }.profile-photo { min-height: 240px; }.profile-grid { gap: 18px; }.gallery-cta { padding: 40px; } }
@media (max-width: 620px) { .gallery-hero { padding: 65px 0 45px; }.gallery-title h1 { font-size: 57px; }.gallery-toolbar p { display: none; }.profile-grid { grid-template-columns: 1fr; }.profile-card { min-height: 0; }.gallery-cta { flex-direction: column; align-items: flex-start; gap: 30px; padding: 32px 25px; }.dialog-details { grid-template-columns: 1fr; }.profile-dialog { padding: 35px 22px 25px; }.dialog-sticker { display: none; } }