/* Compact skills cards and detail dialog. */
.skill-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.skill-card { min-height:164px; padding:20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font-family:inherit; text-align:left; cursor:pointer; transition:background .2s,transform .2s; }
.skill-card:hover { background:#e7ece2; transform:translateY(-3px); }
.skill-card span,.skill-card small,.skills-hint { color:var(--accent); font:11px "DM Mono",monospace; letter-spacing:.08em; }
.skill-card strong { font-size:clamp(25px,2.3vw,33px); line-height:1; letter-spacing:-.06em; white-space:nowrap; }
.skill-card small { color:#5c6a61; font-size:10px; }.skills-hint { margin:15px 0 0; color:#67746b; font-size:10px; }
.skill-dialog { width:min(560px,calc(100% - 40px)); border:1px solid var(--ink); padding:38px; background:var(--paper); color:var(--ink); box-shadow:0 18px 80px rgba(24,37,31,.22); }
.skill-dialog::backdrop { background:rgba(15,24,18,.52); backdrop-filter:blur(3px); }.skill-dialog h2 { margin:0 35px 23px 0; font-size:clamp(34px,8vw,54px); letter-spacing:-.065em; line-height:1; }
.skill-dialog ul { display:grid; gap:12px; max-width:465px; margin:0; padding:0; list-style:none; }.skill-dialog li { position:relative; padding-left:20px; color:#46554b; font-size:16px; line-height:1.6; }.skill-dialog li::before { content:"↗"; position:absolute; left:0; color:var(--accent); font:12px "DM Mono",monospace; }
.dialog-close { position:absolute; top:15px; right:17px; width:32px; height:32px; border:0; background:transparent; color:var(--ink); font-size:30px; line-height:1; cursor:pointer; }.dialog-close:hover { color:var(--accent); }
.experience-link { display:inline-block; margin-top:16px; border-bottom:1px solid var(--ink); padding-bottom:4px; color:var(--ink); font:11px "DM Mono",monospace; letter-spacing:.03em; text-decoration:none; }.experience-link span { color:var(--accent); }.experience-link:hover { color:var(--accent); }
.inline-project-link { color:inherit; font-weight:700; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }.inline-project-link:hover { color:var(--accent); }
.timeline-item div > p:not(.timeline-place) { max-width:570px; margin:0; line-height:1.75; }.timeline-item .timeline-place { margin-bottom:13px; line-height:1.55; }
.hero-layout { grid-template-columns:1fr 270px; }.profile-frame { width:270px; aspect-ratio:2316 / 3088; margin:0; overflow:hidden; background:#d9dfd3; }.profile-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-email { display:inline-block; margin:-8px 0 20px; border-bottom:1px solid var(--ink); padding-bottom:4px; color:var(--ink); font:clamp(12px,1.2vw,15px) "DM Mono",monospace; letter-spacing:.02em; text-decoration:none; }.hero-email span { color:var(--accent); }.hero-email:hover { color:var(--accent); }
.contact > .contact-email { display:block; width:fit-content; margin:0 0 32px; }
.section#projects .projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.section#projects .project { min-height:245px; }.project-four { background:#c4d7d6; }
@media (max-width:700px) { .portfolio-skills { padding-top:64px; padding-bottom:64px; }.skill-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.skill-card { min-height:132px; padding:15px; }.skill-card strong { font-size:clamp(18px,5.7vw,25px); white-space:normal; }.skill-card small { font-size:9px; line-height:1.35; }.skills-hint { margin-top:12px; }.skill-dialog { padding:30px 24px 26px; }.skill-dialog li { font-size:15px; } }
@media (max-width:700px) { .hero { min-height:0; padding-top:82px; padding-bottom:62px; }.hero-layout { grid-template-columns:minmax(0,1fr) 126px; gap:12px; align-items:start; }.profile-frame { width:126px; height:auto; align-self:start; }.hero h1 { font-size:clamp(42px,12vw,54px); }.hero .intro { font-size:15px; line-height:1.7; }.hero .button { gap:14px; padding:11px 13px; font-size:12px; } }
@media (max-width:700px) { .section#projects .projects { grid-template-columns:1fr; }.section#projects .project { min-height:185px; } }