.portfolio-content { width:min(100%,1250px); }
.portfolio-content :is(a,button,select,summary):focus-visible { outline:2px solid var(--wine); outline-offset:5px; }
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; }
.template-card { min-width:0; border:1px solid var(--line); border-radius:5px; background:#fffdf8; overflow:hidden; }
.template-cover { display:block; background:#f6f2ea; border-bottom:1px solid var(--line); }
.template-cover img { width:100%; height:auto; aspect-ratio:24/17; object-fit:cover; object-position:top; display:block; transition:opacity 180ms; }
.template-cover:hover img { opacity:.85; }
.template-caption { padding:18px; }
.template-caption h2 { font-size:1.1rem; margin-bottom:10px; }
.template-caption h2 span { margin-right:7px; color:var(--wine); font-size:.78rem; }
.template-caption p { font-size:.87rem; color:var(--muted); }
.template-caption > a { font-size:.82rem; }
.template-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.82rem; padding-bottom:15px; border-bottom:1px solid var(--line); }
.template-toolbar > a { margin-right:auto; }
.template-toolbar select { max-width:100%; padding:9px 28px 9px 10px; border:1px solid var(--line); border-radius:4px; background:#fffdf8; color:var(--ink); font:inherit; }
.pf-demo-note { font-size:.75rem; color:var(--muted); margin:13px 0 28px; }
.portfolio { padding:clamp(26px,4vw,50px); background:#fffdf8; border:1px solid var(--line); border-radius:3px; }
.portfolio h1 { font-size:clamp(2rem,3.4vw,3.4rem); margin:0 0 14px; letter-spacing:-.045em; overflow-wrap:anywhere; }
.portfolio h1::before { display:none; }
.portfolio h2 { font-size:1.2rem; margin-bottom:16px; letter-spacing:-.01em; }
.pf-identity { margin-bottom:28px; }
.pf-subtitle { font-size:1.05rem; max-width:410px; line-height:1.6; color:var(--muted); margin-bottom:0; }
.pf-richtext { font-size:.9rem; line-height:1.8; overflow-wrap:anywhere; }
.pf-richtext p:last-child { margin-bottom:0; }
.pf-richtext ul { padding-left:1.2em; }
.pf-socials { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.pf-socials a { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:.78rem; text-decoration:none; border-bottom:1px solid var(--line); transition:border-color 180ms; }
.pf-socials a:hover { border-color:var(--wine); }
.pf-socials svg { width:18px; height:18px; flex-shrink:0; }
.pf-row { display:grid; gap:clamp(25px,4vw,55px); align-items:start; }
.pf-row + .pf-row { margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
.pf-start { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.pf-start-copy { padding-top:8px; }
.pf-photos, .pf-image-text { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pf-image-text { align-items:center; }
.pf-image-right .pf-work { order:2; }
.pf-image-right .pf-row-copy { order:1; }
.pf-work { margin:0; min-width:0; }
.pf-image { display:flex; align-items:flex-start; justify-content:center; width:100%; margin:0; padding:0; border:0; background:transparent; cursor:zoom-in; }
.pf-image img { display:block; width:auto; height:auto; max-width:100%; max-height:560px; object-fit:contain; transition:opacity 180ms; }
.pf-photos .pf-image { height:360px; align-items:center; }
.pf-photos .pf-image img { max-height:100%; }
.pf-image:hover img { opacity:.93; }
.pf-work figcaption { max-width:100%; margin:11px auto 0; line-height:1.6; overflow-wrap:anywhere; text-align:left; }
.pf-work-title { display:block; font-size:.82rem; }
.pf-meta { display:block; color:var(--muted); font-size:.72rem; }
.pf-description { font-size:.83rem; color:var(--muted); margin:8px 0 0; }
.pf-rules { max-width:800px; margin-top:32px; font-size:.9rem; }
.pf-rules h2 { font-size:1.2rem; }
.pf-rules dl { display:grid; grid-template-columns:170px 1fr; gap:12px 22px; margin:20px 0; }
.pf-rules dt { font-weight:600; }
.pf-rules dd { margin:0; }
.pf-notes { border-top:1px solid var(--line); margin-top:25px; font-size:.86rem; }
.pf-notes summary { cursor:pointer; padding:16px 0; font-weight:600; }
.pf-lightbox { width:min(94vw,1150px); max-height:94dvh; border:1px solid var(--line); border-radius:4px; padding:20px; background:var(--paper-warm); color:var(--ink); }
.pf-lightbox::backdrop { background:rgba(35,29,25,.8); }
.pf-lightbox img { display:block; max-width:100%; width:auto; height:auto; max-height:70dvh; object-fit:contain; margin:12px auto; }
.pf-lightbox p { max-width:100%; text-align:left; margin:10px auto 0; font-size:.85rem; overflow-wrap:anywhere; }
.pf-close { display:block; margin-left:auto; min-height:40px; padding:8px 12px; background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; }
@media (max-width:1100px) and (min-width:861px) {
  .portfolio { padding:28px; }
  .pf-row { gap:25px; }
  .pf-photos .pf-image { height:270px; }
  .template-grid { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .template-grid { grid-template-columns:1fr; }
  .template-toolbar > a { flex-basis:100%; }
  .template-toolbar select { flex:1; min-width:0; }
  .portfolio { padding:28px 18px; }
  .portfolio h1 { font-size:2.35rem; }
  .pf-row { grid-template-columns:1fr; gap:26px; }
  .pf-image-right .pf-work, .pf-image-right .pf-row-copy { order:initial; }
  .pf-photos .pf-image { height:auto; }
  .pf-photos .pf-image img { max-height:560px; }
  .pf-richtext { font-size:.95rem; }
  .pf-work-title { font-size:.9rem; }
  .pf-meta { font-size:.78rem; }
  .pf-rules dl { grid-template-columns:1fr; gap:4px; }
  .pf-rules dd { margin-bottom:14px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(.portfolio-content) { scroll-behavior:auto; }
  .portfolio-content *, .portfolio-content *::before, .portfolio-content *::after { animation:none !important; transition:none !important; }
}