/* ===== Shared secondary-page styles (portfolio.html, about.html) ===== */
.page-hero{padding:70px 0 20px}
.page-hero h1{color:var(--ink);font-size:clamp(2rem,4.5vw,3rem);margin:0 0 14px}
.page-hero p{color:var(--muted);font-size:1.05rem}

/* Portfolio list */
.portfolio-list{display:grid;gap:28px}
.portfolio-item{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 32px rgba(8,40,58,.06)}
.portfolio-shot{display:flex;align-items:center;justify-content:center;min-height:220px}
.portfolio-copy{padding:32px 34px}
.portfolio-copy h2{font-size:1.6rem;margin:6px 0 16px}
.portfolio-block{color:var(--muted);font-size:.95rem;line-height:1.6;margin-bottom:12px}
.portfolio-block b{color:var(--ink)}
.portfolio-note{color:var(--muted);font-size:.85rem;font-style:italic;margin-top:6px}

/* About page grid (full timeline version) */
.about-heading-row{margin-bottom:36px}
.about-heading-row h1{color:var(--ink);max-width:none}
.about-page-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.about-page-copy p{color:var(--muted);font-size:1.08rem;margin-bottom:16px}
.timeline-card{background:var(--navy);color:#fff;border-radius:16px;padding:32px 34px;box-shadow:0 24px 55px rgba(8,40,58,.25)}
.timeline-card h3{color:#fff;margin-bottom:18px;font-size:1.15rem}
.tl{list-style:none;padding:0;margin:0;display:grid;gap:0}
.tl li{display:flex;gap:16px;align-items:flex-start;padding:9px 0}
.tl b{font-family:"Zilla Slab",serif;color:var(--gold2);min-width:56px}
.tl span{color:rgba(255,255,255,.86);font-size:.94rem}

@media(max-width:820px){
  .portfolio-item{grid-template-columns:1fr}
  .portfolio-shot{min-height:160px}
  .about-page-grid{grid-template-columns:1fr}
}

/* ===== Real portfolio screenshots on portfolio.html ===== */
.portfolio-shot{position:relative;overflow:hidden;background:#eee}
.portfolio-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* ===== About page photo ===== */
.about-photo{width:100%;max-width:340px;border-radius:16px;box-shadow:0 24px 55px rgba(8,40,58,.22);display:block;margin-bottom:28px}
@media(max-width:820px){.about-photo{max-width:280px}}