/* Portfolio uses the existing typography and palette; marks are text, not screenshots. */
.portfolio-section { border-block: 1px solid var(--line); background: #e8ece3; margin-bottom: 100px; }
.portfolio-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 60px; }
.portfolio-heading h2 { font-size: clamp(40px, 4.4vw, 64px); margin-top: 24px; }
.portfolio-heading > p { color: var(--muted); font-size: 15px; max-width: 370px; justify-self: end; }
.portfolio-group { margin-top: 55px; scroll-margin-top: 35px; }
.portfolio-group + .portfolio-group { margin-top: 62px; }
.portfolio-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.portfolio-group-heading h3 { font-size: 29px; letter-spacing: -.04em; }
.portfolio-group-heading > span { font-size: 10px; color: #52644c; letter-spacing: .1em; white-space: nowrap; }
.portfolio-group-note { max-width: 640px; margin: -7px 0 25px; font-size: 13px; color: var(--muted); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.portfolio-card { border: 1px solid #bbc8b2; border-radius: 7px; overflow: hidden; min-width: 0; background: #f5f7ef; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.portfolio-card:hover { border-color: #829b6f; box-shadow: 0 12px 30px #20391c0b; }
.portfolio-card-art { min-height: 167px; padding: 20px 25px; position: relative; overflow: hidden; display: flex; align-items: center; background: #d9e3cf; border-bottom: 1px solid #bbc8b2; }
.portfolio-card-art::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#46653409 1px, transparent 1px), linear-gradient(90deg, #46653409 1px, transparent 1px); background-size: 25px 25px; }
.portfolio-art-index { position: absolute; top: 17px; left: 25px; color: #52664a; font-size: 9px; letter-spacing: .11em; }
.portfolio-art-mark { font-size: clamp(33px, 3vw, 47px); letter-spacing: -.06em; font-weight: 500; position: relative; line-height: 1; }
.portfolio-art-symbol { position: absolute; right: 22px; bottom: 14px; color: #557345; font-size: 28px; }
.portfolio-card:nth-child(2) .portfolio-card-art { background-color: #e3e9dc; }
.portfolio-card:nth-child(3) .portfolio-card-art { background-color: #e7e4d4; }
.portfolio-card:nth-child(3):not(.portfolio-card-app) .portfolio-art-mark { font-family: Cormorant, Georgia, serif; font-style: italic; font-size: 53px; }
.portfolio-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 25px 20px; }
.portfolio-card-category { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: #56674e; min-height: 22px; }
.portfolio-card-body h4 { font-size: 27px; font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin: 17px 0 14px; }
.portfolio-card-body > p { color: var(--muted); font-size: 13px; line-height: 1.65; padding-bottom: 25px; }
.portfolio-card-link { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid #c7d0c0; padding: 16px 0 0; margin-top: auto; min-height: 60px; font-size: 14px; }
.portfolio-card-link small { display: block; font-size: 10px; color: #617257; margin-top: 2px; }
.portfolio-card-link > span:first-child { overflow-wrap: anywhere; }
.portfolio-card-link > span:last-child { font-size: 25px; color: #567744; transition: transform .2s; }
.portfolio-card-link:hover > span:last-child { transform: translate(3px, -3px); }
.portfolio-card-link:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.portfolio-card-app { border-color: #435341; background: var(--dark); color: #edf3e6; }
.portfolio-card-app .portfolio-card-art, .portfolio-card-app:nth-child(2) .portfolio-card-art, .portfolio-card-app:nth-child(3) .portfolio-card-art { background-color: #223024; border-color: #435341; }
.portfolio-card-app .portfolio-card-art::before { background-image: linear-gradient(#c2f46b08 1px, transparent 1px), linear-gradient(90deg, #c2f46b08 1px, transparent 1px); }
.portfolio-card-app .portfolio-art-index { color: #b7c9a7; }
.portfolio-card-app .portfolio-art-mark { color: #d6edb5; }
.portfolio-card-app .portfolio-art-symbol, .portfolio-card-app .portfolio-card-link > span:last-child { color: var(--lime); }
.portfolio-card-app .portfolio-card-category, .portfolio-card-app .portfolio-card-body > p, .portfolio-card-app .portfolio-card-link small { color: #bfcdb4; }
.portfolio-card-app .portfolio-card-link { border-color: #435341; }
.portfolio-development { border: 1px solid #65834c; border-radius: 3px; padding: 2px 6px; color: #d3e8bc; font-size: 9px; white-space: nowrap; }
.portfolio-upcoming { display: grid; grid-template-columns: auto 1fr auto; gap: 25px; align-items: center; padding: 29px; border: 1px dashed #9faf92; border-radius: 7px; margin-top: 30px; }
.portfolio-upcoming-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #b3c1a8; border-radius: 50%; font-size: 26px; color: #6a8259; }
.portfolio-upcoming .eyebrow { font-size: 9px; color: #52644b; }
.portfolio-upcoming h3 { font-size: 27px; margin-top: 8px; }
.portfolio-upcoming p { font-size: 12px; color: var(--muted); margin-top: 9px; }
.portfolio-upcoming-domain { font-size: 17px; text-align: right; white-space: nowrap; }
.portfolio-upcoming-domain small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.portfolio-detail-callout { padding-block: 30px; margin-block: 28px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.portfolio-detail-callout > div { max-width: 570px; }
.portfolio-detail-callout .eyebrow { color: #5f764e; font-size: 10px; }
.portfolio-detail-callout p { font-size: 15px; margin-top: 10px; color: var(--muted); }
.portfolio-detail-callout .text-link { min-height: 44px; flex-shrink: 0; }
@media (min-width: 681px) and (max-width: 1000px) {
  .site-header nav { gap: 14px; font-size: 11px; }
  .site-header nav a { white-space: nowrap; }
  .site-header .nav-contact span { margin-left: 12px; }
}
@media (max-width: 1000px) {
  .portfolio-card-art { padding-inline: 20px; min-height: 150px; }
  .portfolio-art-index { left: 20px; }
  .portfolio-card-body { padding-inline: 20px; }
  .portfolio-card-body h4 { font-size: 24px; }
  .portfolio-grid { gap: 16px; }
  .portfolio-card-category { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 780px) {
  .portfolio-heading { grid-template-columns: 1fr; gap: 24px; }
  .portfolio-heading > p { justify-self: start; max-width: 480px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card { display: grid; grid-template-columns: .8fr 1.2fr; }
  .portfolio-card-art { border-bottom: 0; border-right: 1px solid #bbc8b2; min-height: 220px; }
  .portfolio-art-mark { font-size: 38px; }
  .portfolio-card-category { align-items: center; flex-direction: row; }
  .portfolio-upcoming { grid-template-columns: auto 1fr; }
  .portfolio-upcoming-domain { grid-column: 2; text-align: left; }
  .portfolio-detail-callout { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 480px) {
  .portfolio-section { margin-bottom: 65px; }
  .portfolio-heading h2 { font-size: 47px; }
  .portfolio-group { margin-top: 38px; }
  .portfolio-group + .portfolio-group { margin-top: 45px; }
  .portfolio-group-heading { gap: 12px; }
  .portfolio-group-heading h3 { font-size: 25px; }
  .portfolio-group-heading > span { font-size: 8px; }
  .portfolio-card { display: flex; }
  .portfolio-card-art { min-height: 140px; border-right: 0; border-bottom: 1px solid #bbc8b2; }
  .portfolio-card-body { padding: 21px; }
  .portfolio-card-body h4 { font-size: 28px; }
  .portfolio-card-body > p { font-size: 14px; }
  .portfolio-upcoming { padding: 21px; gap: 15px; }
  .portfolio-upcoming-mark { width: 40px; height: 40px; font-size: 22px; }
  .portfolio-upcoming p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .portfolio-card-link > span:last-child { transition: none; }
}