/* ==========================================================================
   KUTAY OS — about.html
   The About window: a large portrait beside a scrolling profile — header,
   experience timeline, capabilities, tool stack, languages and contact
   links. Built on the shared token system; only this page loads it.
   ========================================================================== */

.app-window .body:has(> .about-page) { overflow: hidden; }
/* The portrait stays in view while the profile scrolls beside it (the
   original's composition); round 1 let the photo stretch to the full
   content height, pushing its caption far below the fold. */
.about-page { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); height: 100%; min-height: 0; padding: clamp(var(--space-4), 2vw, var(--space-6)); gap: clamp(var(--space-4), 2.2vw, var(--space-7)); }

.about-photo-large { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #111; min-height: 0; height: 100%; }
.about-photo-large img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: about-photo-in 1.2s var(--ease-out) both; transition: transform 1.2s var(--ease-out); }
@keyframes about-photo-in { from { opacity: 0; transform: scale(1.06); } }
.about-photo-large::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.about-photo-large .caption {
  position: absolute; z-index: 1; left: var(--space-5); bottom: var(--space-5); right: var(--space-5);
  font: 500 11px/1.5 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  animation: pm-rise .6s .5s var(--ease-out) both;
}

.about-info { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-2) var(--space-2) var(--space-5) 0; overscroll-behavior: contain; }

.about-header { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-2); }
.about-header h1 { font-size: clamp(32px, 3.2vw, 42px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.about-header p { font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 56ch; margin-top: var(--space-3); }
.about-logo { width: 82px; height: 82px; object-fit: contain; flex-shrink: 0; transition: transform .6s var(--ease-out); }

.about-sections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.section-card { border: 1px solid var(--line-2); background: var(--glass); border-radius: var(--r-lg); padding: var(--space-4); }
.section-card h3 { font-size: 15px; letter-spacing: -.01em; margin-bottom: var(--space-3); }
.section-card h3 + * + h3 { margin-top: var(--space-5); }

.timeline { display: grid; gap: var(--space-3); }
.timeline-item { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); font-size: 12px; line-height: 1.4; }
.timeline-item time { color: var(--text-dim); padding-top: 1px; font-variant-numeric: tabular-nums; }
.timeline-item b { display: block; font-size: 13px; font-weight: 650; }
.timeline-item span { display: block; color: var(--text-muted); margin-top: 2px; }

.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cap { font-size: 13px; line-height: 1.4; padding: 10px var(--space-3); border-radius: var(--r-sm); background: rgba(255, 255, 255, .05); color: #c8ccd2; }
:root[data-theme="light"] .cap { background: rgba(0, 0, 0, .035); }

.stack { display: flex; flex-wrap: wrap; gap: 7px; }
.stack span { width: 46px; height: 46px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: grid; place-items: center; font-weight: 700; font-size: 12px; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
:root[data-theme="light"] .stack span { background: rgba(0, 0, 0, .045); }

.about-languages { font-size: 13px; color: var(--text-muted); line-height: 1.8; }

.socials { display: flex; flex-wrap: wrap; gap: 7px; }
.socials a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.socials a:active { transform: scale(.97); }

@media (max-width: 1100px) { .about-sections { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .about-page { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .about-sections { grid-template-columns: 1fr; }
  .about-logo { width: 58px; height: 58px; }
  .about-photo-large .caption { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); font-size: 10px; }
}
@media (max-width: 600px) {
  .app-window .body:has(> .about-page) { overflow: auto; }
  .about-page { display: flex; flex-direction: column; height: auto; }
  .about-photo-large { height: auto; aspect-ratio: 4 / 3.4; flex: none; }
  .about-info { overflow: visible; padding: 0; }
  .about-header h1 { font-size: 34px; }
  .about-header p { font-size: 14.5px; }
}


/* hover affordances only where hover exists — no sticky rings after a tap */
@media (hover: hover) {
  .about-photo-large:hover img { transform: scale(1.025); }
  .about-logo:hover { transform: rotate(-8deg) scale(1.05); }
  .stack span:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
  .socials a:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); }
}.about-logo-col { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.about-card-btn { white-space: nowrap; font-size: 12px; }