/* ==========================================================================
   About · Contact
   ========================================================================== */

.about-hero { padding-top: clamp(8rem, 14vw, 11rem); }
.about-hero-grid { display: grid; grid-template-columns: 1.5fr .82fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-hero-grid h1 { font-size: var(--step-5); line-height: 1; }
.about-portrait { position: relative; margin: 0; width: 100%; max-width: 330px; margin-left: auto; }
.about-portrait::before { content: ""; position: absolute; inset: -10px; border: 1px solid var(--line-2);
  border-radius: 16px; pointer-events: none; }
.about-portrait img { width: 100%; height: auto; display: block; border-radius: 9px; box-shadow: var(--shadow-3); }
@media (max-width: 820px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait { max-width: 260px; margin-inline: 0; }
}
.about-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-grid h1 { font-size: var(--step-5); line-height: 1; }
.about-plate .plate-inner { background: linear-gradient(160deg, var(--card), var(--card-2)); border-color: rgba(165,128,58,.4); }
.about-plate .plate-mono { color: var(--gold); }
.about-plate .plate-years { color: var(--ink-3); }
.about-plate .plate-themes { border-top-color: var(--line); }
.about-plate .plate-themes li { color: var(--ink-2); font-size: .88rem; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-plate { max-width: 300px; } }

/* Prose */
.prose { max-width: 40rem; }
.prose p { font-size: 1.14rem; line-height: 1.72; color: var(--ink-2); margin: 0 0 1.3em; }
.prose p.drop { color: var(--ink); }
.prose p.drop::first-letter { font-family: var(--f-display); font-size: 3.4em; line-height: .82; float: left;
  margin: .06em .14em -.06em 0; color: var(--pine); font-weight: 400; }
.prose em { color: var(--ink); }

/* Strands */
.strand-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.strand { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.2rem); align-items: center;
  padding: 1.7rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .6s cubic-bezier(.22,.61,.2,1); will-change: transform; }
.strand:hover { transform: translateX(10px); }
.strand-i { font-family: var(--f-ui); font-size: .8rem; font-weight: 600; color: var(--gold); letter-spacing: .08em; }
.strand h3 { font-family: var(--f-display); font-size: var(--step-2); font-weight: 500; margin: 0 0 .3rem; color: var(--ink);
  transition: color .3s var(--ease); }
.strand:hover h3 { color: var(--pine-2); }
.strand p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.strand-c { font-family: var(--f-display); font-size: 2rem; color: var(--gold); font-weight: 500; text-align: right; line-height: 1;
  display: flex; flex-direction: column; align-items: flex-end; }
.strand-c small { font-family: var(--f-ui); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-top: .3rem; }
@media (max-width: 640px) { .strand { grid-template-columns: auto 1fr; } .strand-c { display: none; } }

/* Timeline */
.timeline { display: grid; gap: 0; max-width: 46rem; }
.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line);
  position: relative; }
.tl-year { font-family: var(--f-ui); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--gold);
  padding-top: .2rem; }
.tl-body h4 { font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; margin: 0 0 .3rem; }
.tl-body p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
@media (max-width: 560px) { .tl-item { grid-template-columns: 1fr; gap: .3rem; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.contact-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.8rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.cc-label { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.cc-value { font-family: var(--f-display); font-size: var(--step-1); color: var(--ink); line-height: 1.2; }
.cc-note { font-family: var(--f-ui); font-size: .86rem; color: var(--ink-3); line-height: 1.5; }
.contact-card .arrow-link { margin-top: .3rem; }