/* Developer — brand-led: the emblem, philosophy, and a project portfolio with the company's own imagery. */
.prof { display: grid; gap: 2.5rem; align-items: center; }
.prof__mark { display: grid; place-items: center; padding: 2rem; background: var(--ivory); border: 1px solid var(--line); }
.prof__mark img { width: min(15rem, 60%); height: auto; filter: drop-shadow(0 30px 30px rgba(40, 39, 34, .18)); }
.prof__text p { color: var(--ink-soft); }
.prof__text .spec { margin-top: 1.75rem; }
.prof__text .spec small { display: block; margin-top: .25rem; font-size: .85rem; color: var(--muted); }
@media (min-width: 900px) { .prof { grid-template-columns: 4fr 7fr; column-gap: clamp(2rem, 6vw, 6rem); } }

.vm { display: grid; gap: 2rem; }
.vm__col { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.vm__col h3 { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--terra-deep); margin-bottom: .6rem; }
.vm__col p { color: var(--ink-soft); max-width: 34rem; }
.vm + .credit { margin-top: 1.5rem; }
@media (min-width: 800px) { .vm { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

.port__label { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 3rem 0 1.25rem; font-size: clamp(1.7rem, 2.6vw, 2.2rem); padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.port__label:first-of-type { margin-top: 1rem; }
.port { display: grid; gap: 2rem; }
.proj__img { display: block; width: 100%; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; overflow: hidden; margin-bottom: 1rem; }
.proj__img img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.proj__img:hover img { transform: scale(1.04); }
.proj h4 { font-size: 1.6rem; margin-bottom: .3rem; }
.proj p { color: var(--ink-soft); max-width: 32rem; }
.port--tall .proj__img { aspect-ratio: 4 / 4.5; }
.port--tall .proj__img img { height: 100%; object-fit: cover; }
@media (min-width: 800px) { .port--two { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); } .port--two .proj:nth-child(2) { margin-top: 2.5rem; } }

.port__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.port__list li { display: flex; gap: 1.25rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.port__list h4 { font-size: 1.4rem; }
.port__list p { color: var(--ink-soft); font-size: .95rem; }
.port__thumb { flex: none; width: 8rem; }
.port__thumb img { width: 100%; height: auto; }
.now { margin-top: 3rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--ivory); border: 1px solid var(--line); display: grid; gap: .6rem; justify-items: start; }
.now h4 { font-size: 1.9rem; }
.now p { color: var(--ink-soft); }

.dir__quote p { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.2; max-width: 34ch; }
.dir__quote footer { margin-top: 1.25rem; color: rgba(250, 243, 229, .9); }
.dir__quote footer span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 243, 229, .75); margin-top: .2rem; }

.links { display: grid; gap: 1.5rem; }
.links ul { border-top: 1px solid var(--line); }
.links li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.links li span { color: var(--muted); font-size: .9rem; }
@media (min-width: 900px) { .links { grid-template-columns: 4fr 7fr; column-gap: 5rem; align-items: start; } }
.port .now { margin-top: 0; align-self: center; }
