/*
Theme Name: PI-Photo Portfolio
Theme URI: https://pi-photo.com/
Author: Peter Iancovici
Description: Photography portfolio for Peter Iancovici / PI-Photo.
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pi-photo-portfolio
*/
:root { --ink:#151515; --paper:#f2efe9; --acid:#d7ff38; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid #c7c3bb; }
.brand { display:flex; align-items:center; gap:14px; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
.brand img { display:block; width:108px; height:64px; object-fit:contain; }
.topbar nav { display:flex; gap:38px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.hero { min-height:calc(100vh - 90px); display:grid; grid-template-columns:43% 57%; }
.hero-copy { padding:8vh 4vw 4vw; display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow { margin:0 0 auto; font:700 11px/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.18em; }
h1 { margin:5vh 0 28px; font:400 clamp(62px,8.2vw,150px)/.79 Georgia,serif; letter-spacing:-.065em; }
h1 em { font-weight:400; color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.intro { max-width:460px; margin:0; font-size:clamp(16px,1.35vw,21px); line-height:1.45; }
.cta { margin-top:auto; padding:16px 20px; background:var(--ink); color:white; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.cta span { margin-left:24px; color:var(--acid); }
.hero-image { position:relative; margin:0; overflow:hidden; background:#222; }
.hero-image img { width:100%; height:100%; min-height:calc(100vh - 90px); object-fit:cover; object-position:center 33%; filter:saturate(.85) contrast(1.04); }
.hero-image figcaption { position:absolute; inset:auto 24px 24px auto; background:var(--acid); padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.hero-image figcaption span { opacity:.55; margin-right:28px; }
.work { padding:120px 4vw; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:64px; }
h2 { margin:0; font:400 clamp(48px,7vw,112px)/.88 Georgia,serif; letter-spacing:-.055em; }
h2 em { font-weight:400; color:transparent; -webkit-text-stroke:1.2px var(--ink); }
.category-row { display:flex; flex-wrap:wrap; gap:10px; padding:18px 0; margin-bottom:28px; border-top:1px solid; border-bottom:1px solid; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.category-row a { display:inline-block; white-space:nowrap; padding:11px 14px; border:1px solid currentColor; }
.category-row a:hover,.category-row a.active { background:var(--ink); color:var(--paper); text-decoration:none; }
.category-row .active { font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.category-row a:hover { text-decoration:underline; text-underline-offset:5px; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.shot { grid-column:span 4; margin:0 0 40px; }
.shot.wide { grid-column:span 8; }
.shot.tall { grid-row:span 2; }
.shot img { width:100%; height:46vw; max-height:690px; object-fit:cover; object-position:center; display:block; filter:saturate(.86); transition:filter .25s, transform .5s; }
.shot.wide img { height:34vw; }
.shot:hover img { filter:saturate(1); }
.shot figcaption { display:flex; justify-content:space-between; padding-top:10px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.shot figcaption span { color:#68645e; }
.about { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:42% 58%; }
.about-image { position:relative; min-height:850px; }
.about-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); }
.about-image span { position:absolute; left:24px; bottom:24px; background:var(--acid); color:var(--ink); padding:16px; font:700 12px/1.25 Arial; letter-spacing:.14em; }
.about-copy { padding:110px 6vw; }
.about-copy h2 { margin:70px 0 48px; }
.about-copy h2 em { -webkit-text-stroke-color:var(--paper); }
.lead { max-width:650px; font:400 clamp(22px,2.2vw,36px)/1.25 Georgia,serif; }
.bio-columns { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:760px; margin-top:70px; color:#bdb9b1; font-size:14px; line-height:1.65; }
.portfolio-notice { max-width:760px; margin:38px 0 0; padding:22px 24px; border:1px solid #555; color:var(--acid); font:700 12px/1.6 Arial,sans-serif; text-transform:uppercase; letter-spacing:.09em; }
.portfolio-notice-light { margin:55px 0 0; border-color:#aaa69f; color:var(--ink); }
.numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid #444; margin-top:75px; padding-top:28px; }
.numbers div { display:flex; gap:15px; align-items:flex-start; }
.numbers strong { color:var(--acid); font:400 38px/1 Georgia,serif; }
.numbers span { font-size:10px; text-transform:uppercase; letter-spacing:.11em; line-height:1.4; color:#aaa; }
.services { padding:120px 4vw; }
.service-list { margin-top:60px; border-top:1px solid; }
.service-list>div { display:grid; grid-template-columns:70px 1fr 38%; align-items:center; gap:20px; padding:32px 0; border-bottom:1px solid; }
.service-list span { font-size:11px; }
.service-list h3 { margin:0; font:400 clamp(34px,5vw,78px)/1 Georgia,serif; }
.service-list p { margin:0; max-width:420px; font-size:14px; line-height:1.55; }
.contact { min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:100px 4vw 0; background:#d8ff3e; }
.contact h2 { font-size:clamp(68px,12vw,190px); margin:40px 0 65px; }
.contact-link { align-self:flex-start; border-bottom:2px solid; padding:0 0 9px; font-size:14px; text-transform:uppercase; letter-spacing:.13em; }
.contact-link span { margin-left:45px; }
footer { margin-top:auto; min-height:130px; padding:28px 0; border-top:1px solid; display:grid; grid-template-columns:2fr 1fr 1fr auto; align-items:center; gap:24px; font-size:11px; text-transform:uppercase; letter-spacing:.09em; line-height:1.7; }
footer small { align-self:end; }
.gallery-page { padding:46px 4vw 100px; }
.back-link { display:inline-block; margin:0 0 76px; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.gallery-title { display:grid; grid-template-columns:1fr 2fr; gap:30px; align-items:end; margin-bottom:70px; }
.gallery-title .eyebrow { align-self:start; }
.gallery-title h1 { grid-column:2; margin:0; }
.gallery-title>p:last-child { grid-column:2; max-width:600px; margin:0; font:400 clamp(18px,1.8vw,28px)/1.35 Georgia,serif; }
.gallery-detail { margin-top:50px; }
.plain-footer { margin:0 4vw; }
.legal-page { max-width:940px; padding:80px 4vw 130px; margin:0 auto; }
.legal-page>h1 { margin:55px 0 100px; }
.legal-page section { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:34px 0; border-top:1px solid #aaa69f; }
.legal-page section h2 { font:400 clamp(25px,3vw,42px)/1 Georgia,serif; letter-spacing:-.03em; }
.legal-page section p { margin:0; font-size:15px; line-height:1.7; }
.legal-page section a { text-decoration:underline; text-underline-offset:3px; }
.legal-note { margin-top:50px; color:#68645e; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
@media (max-width:760px) { .topbar { height:72px; } .brand img { width:88px; height:56px; } .brand b { display:none; } .topbar nav { gap:18px; } .hero { grid-template-columns:1fr; } .hero-copy { min-height:72vh; padding:38px 22px; } .eyebrow { margin-bottom:70px; } h1 { font-size:20vw; } .intro { margin-bottom:55px; } .hero-image img { min-height:75vh; } }
@media (max-width:760px) { .work,.services { padding:80px 22px; } .section-head { display:block; } .section-head .eyebrow { margin-bottom:35px; } .category-row { gap:24px; } .gallery { gap:10px; } .shot,.shot.wide { grid-column:span 6; margin-bottom:22px; } .shot img,.shot.wide img { height:72vw; } .shot figcaption { display:block; line-height:1.6; } .shot figcaption span { display:block; } .about { grid-template-columns:1fr; } .about-image { min-height:72vh; } .about-copy { padding:75px 22px; } .about-copy h2 { margin:35px 0; } .bio-columns { grid-template-columns:1fr; gap:10px; margin-top:45px; } .numbers { gap:8px; } .numbers div { display:block; } .numbers span { display:block; margin-top:8px; } .service-list>div { grid-template-columns:36px 1fr; } .service-list p { grid-column:2; } .contact { padding:80px 22px 0; } footer { grid-template-columns:1fr 1fr; } footer .brand, footer small { grid-column:span 2; } }
@media (max-width:760px) { .gallery-page { padding:34px 22px 80px; } .back-link { margin-bottom:50px; } .gallery-title { display:block; margin-bottom:45px; } .gallery-title .eyebrow { margin-bottom:25px; } .gallery-title h1 { font-size:18vw; margin-bottom:30px; } .legal-page { padding:60px 22px 100px; } .legal-page>h1 { margin:40px 0 70px; } .legal-page section { grid-template-columns:1fr; gap:14px; } .plain-footer { margin:0 22px; } }

/* Native Gutenberg pages and media. Photographs keep their original aspect ratio
   and are never enlarged beyond their actual pixel dimensions. */
.native-content { min-height:70vh; }
.native-page { margin:0; }
.wp-block-image img,
.piphoto-native-gallery img,
.hero-image img,
.about-image img { width:auto !important; max-width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; }
.wp-block-image { text-align:center; }
.piphoto-native-gallery { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px 18px !important; align-items:start; margin:55px 0 0; }
.piphoto-native-gallery>.wp-block-image { width:auto !important; margin:0 !important; align-self:start; break-inside:avoid; }
.piphoto-native-gallery figcaption { position:static !important; display:block !important; width:auto !important; margin:10px 0 0 !important; padding:0 !important; background:none !important; color:#68645e !important; font:11px/1.5 Arial,sans-serif !important; text-transform:uppercase; letter-spacing:.1em; }
.gallery-intro { max-width:650px; margin:25px 0 0; font:400 clamp(18px,1.8vw,28px)/1.35 Georgia,serif; }
.hero { min-height:auto; align-items:center; padding-bottom:5vw; }
.hero-image { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3vw; background:#222; }
.hero-image img { display:block; }
.hero-image figcaption { position:static; margin-top:12px; align-self:flex-end; }
.hero-copy .wp-block-buttons { margin-top:auto; padding-top:55px; }
.wp-block-button.cta { padding:0; background:none; }
.wp-block-button.cta .wp-block-button__link { border-radius:0; padding:16px 20px; background:var(--ink); color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.about { align-items:start; }
.about-image { min-height:0; margin:0; padding:4vw 0 4vw 4vw; }
.about-image img { display:block; }
.about-image figcaption { color:#aaa; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.about-copy>p:not(.eyebrow):not(.lead):not(.portfolio-notice) { max-width:680px; color:#bdb9b1; font-size:15px; line-height:1.7; }
.site-footer { min-height:150px; margin:0; padding:30px 4vw; border-top:1px solid #aaa69f; display:grid; grid-template-columns:1.4fr 1.5fr 1fr auto; align-items:center; gap:25px; background:var(--paper); color:var(--ink); font-size:11px; text-transform:uppercase; letter-spacing:.09em; line-height:1.7; }
.site-footer p { margin:0; }
.site-footer .custom-logo-link { display:block; }
.legal-page>h2 { margin:42px 0 12px; padding-top:28px; border-top:1px solid #aaa69f; font:400 clamp(25px,3vw,42px)/1 Georgia,serif; letter-spacing:-.03em; }
.legal-page>p { font-size:15px; line-height:1.7; }
@media (max-width:900px) { .piphoto-native-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .site-footer { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .piphoto-native-gallery { grid-template-columns:1fr; } .hero-image { padding:22px; } .about-image { padding:22px; } .site-footer { grid-template-columns:1fr; padding:35px 22px; } }