/*
 * Portfolio and personal websites: the portfolio sections (sections/pf). Openings (poster, statement, card),
 * about, moving pictures, work (stack, grid, highlights), services (rows, dark, accordion) and a large quote.
 * The themes (looks/atelier.css, linea.css, onyx.css) set the variables below and add their character.
 */
:root {
    --fo-bg: var(--pf-bg, #f3f3f1);
    --fo-ink: var(--pf-ink, #0e0e0e);
    --fo-text: #4b4b4b;
    --fo-mute: #6b6b6b;
    --fo-line: rgba(14, 14, 14, .14);
    --fo-card: #ffffff;
    --fo-accent: var(--primary-color, #0e0e0e);
    --fo-on-accent: #ffffff;
    --fo-dark: #0b0b0b;
    --fo-radius: 14px;
    --fo-font: inherit;
    --fo-head: inherit;
    --fo-wrap: 1320px;
}

body[data-pf-site] { counter-reset: fo-part; }
.pf-wrap { width: min(100% - 40px, var(--fo-wrap)); margin-inline: auto; }
.pf-section, .pf-hero { color: var(--fo-text); background: var(--fo-bg); }
.pf-section { padding: clamp(64px, 8vw, 120px) 0; }
.pf-section ul, .pf-section ol, .pf-hero ul { margin: 0; padding: 0; list-style: none; }
.pf-section li, .pf-hero li { list-style: none; }
.pf-section li::marker, .pf-hero li::marker { content: none; }
html body[data-pf-site] .pf-section h2, html body[data-pf-site] .pf-section h3, html body[data-pf-site] .pf-hero h1 { color: var(--fo-ink) !important; font-family: var(--fo-head) !important; letter-spacing: -.02em; }
.pf-section a, .pf-hero a { color: inherit; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1px solid var(--fo-ink); border-radius: 6px; background: var(--fo-ink); color: var(--fo-bg) !important; font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.pf-btn:hover { background: transparent; color: var(--fo-ink) !important; }
.pf-btn-accent { border-color: var(--fo-accent); background: var(--fo-accent); color: var(--fo-on-accent) !important; }
.pf-btn-light { border-color: #fff; background: #fff; color: #0e0e0e !important; }
.pf-center { margin: 48px 0 0; text-align: center; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tags li { padding: 5px 11px; border: 1px solid var(--fo-line); border-radius: 4px; color: var(--fo-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

/* Headings: a rule, the part's number, "( Label )", a link. */
.pf-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pf-head-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid var(--fo-ink); color: var(--fo-ink); font-size: 13px; }
.pf-head-rule > :last-child { justify-self: end; }
.pf-head-no::before { counter-increment: fo-part; content: "\25CF\00a0" counter(fo-part, decimal-leading-zero); font-size: 12px; }
.pf-big .pf-head-no::before { content: "(" counter(fo-part, decimal-leading-zero) ")"; font-size: 18px; font-weight: 400; letter-spacing: 0; vertical-align: super; }
.pf-head-link { color: var(--fo-ink); text-decoration: underline; text-underline-offset: 4px; }
.pf-head h2 { margin: clamp(26px, 3vw, 40px) 0 0 !important; font-size: clamp(34px, 4.6vw, 66px) !important; font-weight: 400 !important; line-height: 1.04 !important; }
.pf-lead { max-width: 640px; margin: 18px 0 0; font-size: 17px; line-height: 1.6; }

/* ---- opening: poster */
.pf-hero-poster { padding: 12px 0 0; }
.pf-hero-poster .pf-wrap { width: calc(100% - 40px); max-width: none; }
.pf-poster { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-content: center; min-height: clamp(460px, 74vh, 760px); padding: clamp(28px, 4vw, 60px); overflow: hidden; border-radius: var(--fo-radius); background: #d9d6cf; }
.pf-poster-media { position: absolute; inset: 0; }
.pf-poster-media img, .pf-poster-media .sx-art { width: 100%; height: 100%; object-fit: cover; }
.pf-poster > :not(.pf-poster-media) { position: relative; }
.pf-poster-since { grid-column: 1 / -1; margin: 0; color: #111; font-size: 13px; font-weight: 500; }
html body[data-pf-site] .pf-poster-title { display: grid; grid-column: 1 / -1; margin: 6px 0 !important; color: #111 !important; font-size: clamp(64px, 12vw, 210px) !important; font-weight: 800 !important; line-height: .86 !important; letter-spacing: -.05em; text-transform: uppercase; }
.pf-poster-title span:last-child { justify-self: end; }
.pf-poster-list { position: absolute !important; top: clamp(28px, 6vw, 90px); right: clamp(28px, 4vw, 60px); padding-left: 16px !important; border-left: 4px solid #111; }
.pf-poster-list li { color: #111; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.3; text-transform: uppercase; }
.pf-poster-contact { display: grid; gap: 4px; align-self: start; color: #111; font-size: 12.5px; text-transform: uppercase; }
.pf-poster-contact a { color: #111; text-decoration: none; }
.pf-poster-lead { grid-row: 3; max-width: 340px; margin: 0; color: #111; font-size: 13px; line-height: 1.5; text-transform: uppercase; }

/* ---- opening: statement */
.pf-hero-statement { padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 90px); }
.pf-statement-note { max-width: 260px; margin: 0 0 clamp(24px, 4vw, 48px); padding-left: 40px; border-top: 1px solid var(--fo-ink); padding-top: 10px; color: var(--fo-ink); font-size: 13px; line-height: 1.45; }
html body[data-pf-site] .pf-statement { margin: 0 !important; font-size: clamp(34px, 4.8vw, 72px) !important; font-weight: 400 !important; line-height: 1.12 !important; text-align: center; }
.pf-inline-pic { display: inline-block; width: 1.4em; height: .9em; margin: 0 .08em; overflow: hidden; vertical-align: -.06em; border-radius: 4px; background: var(--fo-line); }
.pf-inline-pic img { width: 100%; height: 100%; object-fit: cover; }
.pf-statement mark { padding: 0 .12em; border-radius: .2em; background: var(--fo-accent); color: var(--fo-on-accent); }
.pf-statement-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.pf-statement-ways span { display: block; margin-bottom: 8px; color: var(--fo-mute); font-size: 13px; }
.pf-statement-ways a, .pf-statement-ways p { margin: 0; color: var(--fo-ink); font-size: 17px; text-decoration: none; }

/* ---- opening: card (with --pf-aside: on, me.js puts it beside the page) */
.pf-hero-card { padding: 16px; background: transparent; }
.pf-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100vh - 32px); overflow: hidden; padding: 28px; border-radius: 22px; background: #111; color: #fff; }
.pf-card-media { position: absolute; inset: 0; }
.pf-card-media img, .pf-card-media .sx-art { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.pf-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .85)); }
.pf-card > :not(.pf-card-media) { position: relative; }
.pf-card-free { position: absolute !important; top: 50%; left: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: 12px; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; white-space: nowrap; }
.pf-card-free i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--fo-accent); }
.pf-card-links { position: absolute !important; top: 22px; right: 22px; display: grid; gap: 8px; }
.pf-card-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 11px; text-decoration: none; text-transform: uppercase; }
.pf-card-hello { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; }
.pf-card-hello i { margin-left: 2px; font-style: normal; animation: me-blink 1s steps(1) infinite; }
@keyframes me-blink { 50% { opacity: 0; } }
.pf-card-lead { margin: 0 0 22px; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.55; }
.pf-card-actions { display: flex; align-items: center; gap: 18px; }
.pf-card-actions .pf-btn { min-height: 40px; border-radius: 999px; }
.pf-card-cv { color: #fff; font-size: 14px; text-decoration: none; }
.pf-aside-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
.pf-aside { position: sticky; top: 0; height: 100vh; }
.pf-aside .pf-hero-card { height: 100%; }
.pf-aside .pf-card { height: 100%; min-height: 0; }
.pf-aside-main { min-width: 0; }

/* ---- about */
html body[data-pf-site] .pf-big { margin: 0 0 clamp(28px, 4vw, 56px) !important; font-size: clamp(54px, 7vw, 110px) !important; font-weight: 400 !important; line-height: .95 !important; }
.pf-about-split .pf-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); }
.pf-about-story { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-about-pic { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 1; background: var(--fo-line); }
.pf-about-pic img, .pf-about-pic .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-prose { color: var(--fo-ink); font-size: 14.5px; line-height: 1.55; }
.pf-recognition h3 { margin: 0 0 18px !important; font-size: clamp(34px, 3.6vw, 52px) !important; font-weight: 400 !important; }
.pf-recognition table { width: 100%; border-collapse: collapse; font-size: 12.5px; text-transform: uppercase; }
.pf-recognition td { padding: 7px 0; border-bottom: 1px solid var(--fo-line); color: var(--fo-ink); }
.pf-recognition td:last-child { text-align: right; }
.pf-about-numbers .pf-about-grid { display: grid; grid-template-columns: .9fr 1.1fr 1.4fr; gap: 20px; align-items: start; }
.pf-about-pic-1 { aspect-ratio: 4 / 3.2; }
.pf-about-pic-2 { aspect-ratio: 4 / 3.3; margin-top: 0; }
.pf-about-lead { margin: 0; color: var(--fo-ink); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; }
.pf-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 90px) !important; }
.pf-numbers strong { display: block; color: var(--fo-ink); font-size: clamp(48px, 5vw, 76px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.pf-numbers span { display: block; margin-top: 10px; color: var(--fo-ink); font-size: 15px; }

/* ---- moving pictures */
.pf-marquee { overflow: hidden; padding: 24px 0; background: var(--fo-bg); }
.pf-marquee-track { display: flex; width: max-content; animation: fo-slide 48s linear infinite; }
.pf-marquee:hover .pf-marquee-track { animation-play-state: paused; }
.pf-marquee ul { display: flex; gap: 14px; margin: 0 14px 0 0; padding: 0; list-style: none; }
.pf-marquee li { list-style: none; }
.pf-marquee a { display: block; width: 210px; height: 260px; overflow: hidden; border-radius: 4px; }
.pf-marquee li:nth-child(even) a { height: 210px; margin-top: 25px; }
.pf-marquee img { width: 100%; height: 100%; object-fit: cover; }
@keyframes fo-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf-marquee-track { animation: none; } .pf-marquee { overflow-x: auto; } }

/* ---- work: stacked rows */
.pf-stack-row { position: sticky; top: 70px; display: grid; grid-template-columns: 1fr minmax(260px, 380px) 1fr; gap: 32px; align-items: center; min-height: 64vh; padding: 36px 0; border-top: 1px solid var(--fo-line); background: var(--fo-bg); }
.pf-stack-no { display: block; color: var(--fo-ink); font-size: 15px; }
.pf-stack-copy h3 { margin: 4px 0 12px !important; font-size: clamp(26px, 2.6vw, 38px) !important; font-weight: 400 !important; }
.pf-stack-copy h3 a { text-decoration: none; }
.pf-stack-copy p { max-width: 320px; margin: 0; color: var(--fo-ink); font-size: 14px; line-height: 1.5; }
.pf-stack-pic { position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden; }
.pf-stack-pic img, .pf-stack-pic .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.pf-stack-row:hover .pf-stack-pic img { transform: scale(1.04); }
.pf-stack-row .pf-tags { justify-self: end; max-width: 260px; }

/* ---- work: grid of framed pictures */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) 24px; }
.pf-grid-item { display: block; text-decoration: none; }
.pf-grid-name { display: block; margin-bottom: 12px; }
.pf-grid-name strong { display: block; color: var(--fo-ink); font-size: 17px; font-weight: 500; }
.pf-grid-name em { color: var(--fo-mute); font-size: 15px; font-style: normal; }
.pf-grid-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fo-line); }
.pf-grid-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) saturate(1.1); opacity: .9; }
.pf-grid-frame { position: relative; width: 60%; aspect-ratio: 16 / 10.5; overflow: hidden; border: 3px solid #fff; transition: transform .6s ease; }
.pf-grid-frame img, .pf-grid-frame .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-grid-item:hover .pf-grid-frame { transform: scale(1.06); }

/* ---- work: large cards */
.pf-highlights { display: grid; gap: 24px; }
.pf-highlight { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: var(--fo-card); text-decoration: none; }
.pf-highlight > img, .pf-highlight > .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.pf-highlight:hover > img { transform: scale(1.03); }
.pf-highlight-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 28px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); color: #fff; }
.pf-highlight-copy strong { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; }
.pf-highlight-copy em { max-width: 460px; color: rgba(255, 255, 255, .78); font-size: 14px; font-style: normal; }
.pf-highlight-meta { display: flex; gap: 18px; font-size: 13px; }
.pf-highlight-meta b { font-weight: 500; }
.pf-highlight .pf-btn { justify-self: start; min-height: 38px; border-radius: 999px; font-size: 13px; }

/* ---- services */
.pf-service-list { counter-reset: none; }
.pf-service { display: grid; grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1fr) 260px; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--fo-line); }
.pf-service-no { color: var(--fo-ink); font-size: 15px; font-style: italic; }
.pf-service-copy h3 { margin: 0 0 6px !important; font-size: clamp(24px, 2.4vw, 34px) !important; font-weight: 400 !important; font-style: italic; }
.pf-service-copy p { max-width: 300px; margin: 0; font-size: 13.5px; line-height: 1.45; }
.pf-service-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--fo-line); }
.pf-service-pic img, .pf-service-pic .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-services-dark { background: var(--fo-dark); color: rgba(255, 255, 255, .6); }
.pf-services-dark .pf-head-rule { border-top-color: rgba(255, 255, 255, .5); color: #fff; }
.pf-services-dark .pf-head-link { color: #fff; }
html body[data-pf-site] .pf-services-dark h2, html body[data-pf-site] .pf-services-dark h3 { color: #fff !important; }
.pf-services-dark .pf-service { grid-template-columns: 70px 140px minmax(0, 1fr) minmax(0, 300px); border-bottom-color: rgba(255, 255, 255, .14); }
.pf-services-dark .pf-service-no { color: #fff; font-style: normal; }
.pf-services-dark .pf-service-copy h3 { font-style: normal; }
.pf-services-dark .pf-service-pic { aspect-ratio: 4 / 3; }
.pf-service-text { margin: 0; color: rgba(255, 255, 255, .5); font-size: 13.5px; line-height: 1.5; }
.pf-accordion details { border-bottom: 1px solid var(--fo-line); }
.pf-accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; color: var(--fo-ink); font-size: clamp(24px, 2.4vw, 34px); cursor: pointer; list-style: none; }
.pf-accordion summary::-webkit-details-marker { display: none; }
.pf-accordion summary::after { content: "+"; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--fo-line); border-radius: 50%; font-size: 18px; }
.pf-accordion details[open] summary::after { content: "\2212"; }
.pf-accordion-body { display: grid; gap: 16px; padding: 0 0 26px; }
.pf-accordion-pic { display: block; max-width: 300px; overflow: hidden; border-radius: 10px; }
.pf-accordion-pic img { width: 100%; }
.pf-accordion-body p { max-width: 640px; margin: 0; line-height: 1.6; }

/* ---- a client says */
.pf-quote figure { max-width: 640px; margin: 0 0 0 auto; }
.pf-quote blockquote { margin: 0 0 22px; padding: 0; border: 0; color: var(--fo-ink); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; }
.pf-quote figcaption { display: flex; align-items: center; gap: 12px; }
.pf-quote img { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.pf-quote strong { display: block; color: var(--fo-ink); font-size: 14px; }
.pf-quote em { color: var(--fo-mute); font-size: 12px; font-style: normal; text-transform: uppercase; }

/* ---- tablets and phones */
@media (max-width: 991.98px) {
    .pf-about-split .pf-about-grid, .pf-about-numbers .pf-about-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-stack-row { position: static; grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .pf-stack-row .pf-tags { justify-self: start; }
    .pf-service, .pf-services-dark .pf-service { grid-template-columns: 50px minmax(0, 1fr); }
    .pf-service .pf-tags, .pf-service-pic, .pf-service-text { grid-column: 2; }
    .pf-statement-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-aside-layout { grid-template-columns: minmax(0, 1fr); }
    .pf-aside { position: static; height: auto; }
    .pf-aside .pf-card { min-height: 82vh; }
}
@media (max-width: 767.98px) {
    .pf-wrap { width: calc(100% - 32px); }
    .pf-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-poster { grid-template-columns: minmax(0, 1fr); align-content: end; }
    .pf-poster-list { position: static !important; margin-bottom: 18px !important; }
    .pf-poster-title span:last-child { justify-self: start; }
    .pf-poster-lead { grid-row: auto; margin-top: 12px; }
    .pf-highlight { aspect-ratio: 3 / 4; }
    .pf-head-rule { grid-template-columns: auto 1fr auto; }
}