/* Projects index: copied rule-for-rule from the approved reference, classes prefixed pf- to avoid site.css collisions. */
html{scroll-snap-type:none}
body.pf-page{overflow:clip;padding-top:var(--nav-h)}
body.pf-page .site-header:not(.is-scrolled){background-color:var(--wine)}
body.pf-page main,body.pf-page .site-footer{position:relative;z-index:1}
.pf-accent {color: var(--gold); font: 400 clamp(2.25rem, 4vw, 3.2rem)/.94 var(--script); letter-spacing: normal; text-transform: none;}
.pf-index {padding-top: clamp(82px, 10vw, 136px); padding-bottom: clamp(84px, 10vw, 136px);}
.pf-intro {display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; gap: 40px; margin-bottom: 38px;}
.pf-title {max-width: 760px; margin: .45rem 0 1rem; font: 400 var(--heading-size)/.96 var(--serif); letter-spacing: -.025em;}
.pf-title .pf-accent {display: inline-block; margin-left: .08em; color: var(--wine); font-size: 1.12em;}
.pf-lead {max-width: 650px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.8; letter-spacing: -.018em;}
.pf-grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(18px, 4vw, 54px); row-gap: clamp(62px, 9vw, 124px); padding-top: 54px;}
.pf-card {position: relative; grid-column: span 7; min-width: 0; view-timeline-name: --pf-card; view-timeline-axis: block;}
.pf-card:nth-child(even) {grid-column: 7 / span 6; margin-top: clamp(50px, 10vw, 145px);}
.pf-card:nth-child(3n) {grid-column: 2 / span 7;}
.pf-card:nth-child(4n) {grid-column: 7 / span 6; margin-top: clamp(58px, 11vw, 156px);}
.pf-card:nth-child(5n) {grid-column: 1 / span 6;}
.pf-card:nth-child(6n) {grid-column: 7 / span 6; margin-top: clamp(48px, 9vw, 130px);}
.pf-card-link {display: block; color: inherit; text-decoration: none;}
.pf-card-visual {position: relative; overflow: hidden; aspect-ratio: 1.27 / 1; background: #ded7ca;}
.pf-card:nth-child(even) .pf-card-visual, .pf-card:nth-child(4n) .pf-card-visual {aspect-ratio: .92 / 1;}
.pf-card:nth-child(3n) .pf-card-visual {aspect-ratio: 1.07 / 1;}
.pf-card-visual img {width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .65s ease;}
.pf-card-link:hover .pf-card-visual img, .pf-card-link:focus-visible .pf-card-visual img {transform: scale(1.035); filter: saturate(.94);}
.pf-card-arrow {position: absolute; right: 16px; bottom: 16px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(43,12,9,.28); color: #fff; font-size: 1.15rem; backdrop-filter: blur(4px); transition: background .25s ease, transform .25s var(--ease);}
.pf-card-link:hover .pf-card-arrow, .pf-card-link:focus-visible .pf-card-arrow {background: var(--wine); transform: rotate(45deg);}
.pf-card-meta {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 15px; padding-top: 14px; margin-top: 13px; border-top: 1px solid var(--line);}
.pf-card-title {display:flex;flex-direction:column;gap:8px;margin:0;}
.pf-card-title-prefix {color:#c9aa7d;font:600 clamp(13px,1vw,14px)/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;}
.pf-card-title .pf-card-accent {display:block;color:#ffd7f7;font:400 clamp(2.88rem,4.8vw,4.08rem)/1.12 var(--script);letter-spacing:normal;text-transform:none;}
@keyframes pf-card-journey { 0% { transform: translate3d(0, 6vh, 0) rotate(var(--card-angle, -.35deg)); } 28% { transform: translate3d(0, 1.4vh, 0) rotate(0); } 58% { transform: translate3d(0, -.8vh, 0) rotate(0); } 100% { transform: translate3d(0, -5vh, 0) rotate(var(--card-angle, .35deg)); } }
@supports (animation-timeline: view()) {
  .pf-card {animation-name: pf-card-journey; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(block); animation-range: entry 0% exit 100%;
}
}
html.pf-motion-fallback .pf-card {--motion-offset: 22px; transform: translate3d(0, var(--motion-offset), 0); transition: transform .85s var(--ease), opacity .7s ease; opacity: .94;}
html.pf-motion-fallback .pf-card.is-in-view {transform: translate3d(0,0,0); opacity: 1;}
@media (max-width: 980px) {
  .pf-intro {grid-template-columns: 1fr minmax(235px, 350px); gap: 28px;}
  .pf-card {grid-column: span 8;}
  .pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {grid-column: 6 / span 7;
}
}
@media (max-width: 720px) {
  .pf-index {padding-top: 74px; padding-bottom: 78px;}
  .pf-intro {grid-template-columns: 1fr; gap: 13px; margin-bottom: 26px;}
  .pf-title {margin-bottom: .7rem;}
  .pf-grid {grid-template-columns: 1fr; row-gap: 55px; padding-top: 34px;}
  .pf-card, .pf-card:nth-child(even), .pf-card:nth-child(3n), .pf-card:nth-child(4n), .pf-card:nth-child(5n), .pf-card:nth-child(6n) {grid-column: 1; margin-top: 0;}
  .pf-card:nth-child(even) {width: 92%; margin-left: auto;}
  .pf-card:nth-child(3n) {width: 94%;}
  .pf-card-visual, .pf-card:nth-child(even) .pf-card-visual, .pf-card:nth-child(4n) .pf-card-visual, .pf-card:nth-child(3n) .pf-card-visual {aspect-ratio: 1.06 / 1;}
  .pf-card-title .pf-card-accent {font-size:clamp(2.82rem,14.4vw,3.6rem);}
}
@media (max-width: 380px) {
  .pf-card-meta {grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  .pf-card {animation: none !important; transform: none !important;}
  html.pf-motion-fallback .pf-card, html.pf-motion-fallback .pf-card.is-in-view {transform: none !important; opacity: 1 !important;
}
}
.pf-backdrop {position: fixed; z-index: 0; inset: 0; pointer-events: none; background-color: var(--wine); background-image: linear-gradient(180deg, rgba(35, 6, 8, .18), rgba(28, 5, 8, .48)), url("/images/site/portfolio-backdrop-plain.jpg"); background-position: center 54%; background-repeat: no-repeat; background-size: cover;}
.pf-backdrop::after {content: "Barcode Living"; position: absolute; right: max(var(--pad), calc((100% - var(--max)) / 2)); bottom: calc(100px + env(safe-area-inset-bottom)); color: #ffd7f7; font: 400 clamp(2.7rem, 4.8vw, 3.84rem)/1 var(--script); letter-spacing: normal; white-space: nowrap;}
body.pf-page {background: var(--wine);}
.pf-index {padding-top: clamp(52px, 7vw, 92px); padding-bottom: clamp(66px, 7vw, 100px); color: var(--ivory);}
.pf-intro {grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); align-items: end; gap: clamp(24px, 5vw, 64px); margin-bottom: 0;}
.pf-heading {min-width: 0;}
.pf-title {max-width: 780px; margin: 0; color: var(--ivory); font: 400 var(--heading-size)/.96 var(--serif); letter-spacing: -.025em; text-wrap: balance;}
.pf-title .pf-accent {display: inline-block; margin-left: .08em; color: #ffd7f7; font-size: 1.12em;}
.pf-lead {max-width: 520px; margin: 0; color: rgba(251, 249, 244, .84); font-size: .95rem; line-height: 1.8; letter-spacing: -.018em;}
.pf-grid {row-gap: clamp(28px, 4vw, 52px); margin-top: clamp(23px, 3vw, 38px); padding-top: 0;}
.pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {margin-top: clamp(18px, 2.8vw, 42px);}
.pf-card-meta {display: block; margin-top: 9px; padding-top: 12px; border-top: 1px solid rgba(251, 249, 244, .38);}
.pf-card-title {color: var(--ivory);}
.pf-card-title .pf-card-accent {color: #ffd7f7;}
@media (max-width: 980px) {
  .pf-intro {grid-template-columns: minmax(0, 1fr) minmax(235px, 350px); gap: 28px;}
  .pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {margin-top: clamp(16px, 2.5vw, 32px);
}
}
@media (max-width: 720px) {
  .pf-index {padding-top: 50px; padding-bottom: 62px;}
  .pf-intro {grid-template-columns: 1fr; gap: 12px;}
  .pf-title {max-width: 520px; font-size: var(--heading-size);}
  .pf-title .pf-accent {font-size: 1.08em;}
  .pf-lead {max-width: 37ch; font-size: .95rem; line-height: 1.8;}
  .pf-grid {grid-template-columns: 1fr; row-gap: 26px; margin-top: 24px;}
  .pf-card, .pf-card:nth-child(even), .pf-card:nth-child(3n), .pf-card:nth-child(4n), .pf-card:nth-child(5n), .pf-card:nth-child(6n) {grid-column: 1; margin-top: 0;}
  .pf-card:nth-child(even) {width: 92%; margin-left: auto;}
  .pf-card:nth-child(3n) {width: 94%;}
  .pf-card-visual, .pf-card:nth-child(even) .pf-card-visual, .pf-card:nth-child(4n) .pf-card-visual, .pf-card:nth-child(3n) .pf-card-visual {aspect-ratio: 1.06 / 1;}
  .pf-card-meta {margin-top: 8px; padding-top: 10px;}
  .pf-backdrop {background-position: center 52%;
}
}
.pf-intro {display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 0;}
.pf-heading {width: 100%;}
.pf-title {max-width: 950px; margin: 0;}
.pf-lead {max-width: 52ch;}
.pf-grid {row-gap: clamp(22px, 3.2vw, 40px); margin-top: clamp(42px, 4vw, 54px); padding-top: 0;}
.pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {margin-top: clamp(15px, 2vw, 30px);}
@media (max-width: 980px) {
  .pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {margin-top: clamp(14px, 2vw, 26px);
}
}
@media (max-width: 720px) {
  .pf-intro {gap: 11px;}
  .pf-title {max-width: 520px;}
  .pf-grid {row-gap: 24px; margin-top: 48px;}
  .pf-card:nth-child(even), .pf-card:nth-child(4n), .pf-card:nth-child(6n) {margin-top: 0;
}
}
@media (max-width: 720px) {
  .pf-index {--pad: 22px;}
}
.pf-title {font-size: clamp(1.75rem, 3.2vw, 2.8rem);}
.pf-title .pf-accent {font-size: 1.08em;}
.pf-card-title .pf-card-accent {font-size:clamp(2.82rem,14.4vw,3.6rem);}
@media (min-width: 721px) {
  .pf-grid {row-gap: clamp(36px, 4vw, 56px);}
  .pf-card, .pf-card:nth-child(n) {width: 72%; justify-self: start; align-self: start;}
  .pf-card:nth-child(1) {grid-column: 1 / span 7;}
  .pf-card:nth-child(1), .pf-card:nth-child(2) {grid-row: 1;}
  .pf-card:nth-child(3), .pf-card:nth-child(4) {grid-row: 2;}
  .pf-card:nth-child(5), .pf-card:nth-child(6) {grid-row: 3;}
  .pf-card:nth-child(even) {justify-self: end; margin-top: clamp(48px, 7vw, 110px);}
}
@media (max-width: 720px) {
  .pf-title .pf-accent {font-size: 1.14em;}
  .pf-card-title .pf-card-accent {font-size:clamp(2.82rem,14.4vw,3.6rem);}
  .pf-card, .pf-card:nth-child(3n) {width: 76%;}
  .pf-card:nth-child(even) {width: 76%; margin-left: auto;}
  .pf-backdrop {background-position: 80% center;}
}
@media (max-width: 760px) {.pf-backdrop::after {display: none;}}