/* A quiet, ruled portfolio menu inspired by the supplied Makhno reference. */
.portfolio-page .folio-heading h1 { font-size:clamp(30px,3vw,46px); line-height:1.15; letter-spacing:-.035em; margin:20px 0 26px; font-weight:400; }
.portfolio-page .folio-heading>p:last-child { display:none; }
.portfolio-page .folio-filters { border:0; gap:18px; flex-wrap:wrap; }
.portfolio-page .folio-filters button { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0; font-size:11px; }
.portfolio-page .folio-filters button:before { content:''; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; transition:background .35s; }
.portfolio-page .folio-filters button[aria-pressed=true]:before { background:currentColor; }
.portfolio-page .folio-filters button:after { display:none; }
.portfolio-page .folio-directory { margin-top:34px; }
.portfolio-page .folio-list-scroll { padding-right:0; scrollbar-width:none; }
.portfolio-page .folio-list-scroll::-webkit-scrollbar { display:none; }
.portfolio-page .folio-list-scroll li { border:0; border-bottom:1px solid var(--brand-line); }
.portfolio-page .folio-list-scroll button { position:relative; grid-template-columns:22px minmax(0,1fr) 24px; gap:10px; min-height:60px; padding:15px 0; font-size:11px; font-weight:400; line-height:1.5; letter-spacing:.025em; text-transform:uppercase; color:var(--brand-muted); }
.portfolio-page .folio-list-scroll button>span:first-child { color:var(--brand-muted); font-size:9px; line-height:1.8; }
.portfolio-page .folio-list-scroll button>span:nth-child(2) { transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.portfolio-page .folio-list-scroll button:after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--brand-ink); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.portfolio-page .folio-menu-arrow { width:22px; height:18px; align-self:center; opacity:0; transform:translateX(-10px); transition:opacity .4s,transform .55s cubic-bezier(.22,.61,.36,1); }
.portfolio-page .folio-list-scroll button:is(:hover,:focus-visible,[aria-current=true]) { color:var(--brand-ink); padding-left:0; }
.portfolio-page .folio-list-scroll button:is(:hover,:focus-visible,[aria-current=true]):after { transform:scaleX(1); }
.portfolio-page .folio-list-scroll button:is(:hover,:focus-visible,[aria-current=true]) .folio-menu-arrow { opacity:1; transform:translateX(0); }
.portfolio-page .folio-list-scroll button:is(:hover,:focus-visible)>span:nth-child(2) { transform:translateX(4px); }
.portfolio-page .folio-list-scroll button[aria-current=true]>span { font-weight:400; }
.portfolio-page .folio-all-projects { display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px; border:0; border-bottom:1px solid var(--brand-line); background:none; padding:16px 0; min-height:48px; text-align:left; text-transform:uppercase; font-size:10px; letter-spacing:.06em; cursor:pointer; }
.portfolio-page .folio-all-projects small { color:var(--brand-muted); font-size:9px; margin-left:7px; }
.portfolio-page .folio-all-projects .arrow-icon { width:22px; height:18px; opacity:1; transform:none; transition:transform .5s ease; }
.portfolio-page .folio-all-projects:is(:hover,:focus-visible) .arrow-icon { transform:translateX(5px); }
.portfolio-page .folio-rail-bottom { border:0; margin-top:14px; padding-top:0; }
.portfolio-page .folio-instruction { font-size:9px; margin-top:12px; }
.portfolio-page .folio-picker { position:fixed; width:calc(100vw - 24px); height:calc(100svh - 48px); max-width:none; max-height:calc(100svh - 48px); top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); margin:0; padding:clamp(22px,4vw,42px); border:1px solid var(--brand-line); border-radius:0; background:var(--brand-paper-soft); color:var(--brand-ink); overflow:hidden; }
.portfolio-page .folio-picker[open] { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); gap:20px; }
.portfolio-page .folio-picker::backdrop { background:rgba(25,25,25,.42); }
.portfolio-page .folio-picker>header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.portfolio-page .folio-picker h2 { font-size:clamp(28px,4vw,42px); line-height:1.15; letter-spacing:-.04em; font-weight:400; margin:12px 0 0; }
.portfolio-page [data-picker-close] { width:44px; height:44px; display:grid; place-items:center; flex:none; border:1px solid var(--brand-line); background:none; cursor:pointer; }
.portfolio-page [data-picker-close] svg { width:18px; height:18px; }
.portfolio-page .folio-picker-search input { width:100%; min-height:48px; border:0; border-bottom:1px solid var(--brand-line); border-radius:0; font:inherit; font-size:14px; color:var(--brand-ink); background:transparent; padding:12px 0; }
.portfolio-page .folio-picker-count { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-muted); margin:0; }
.portfolio-page .folio-picker-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--brand-line) transparent; padding-right:10px; }
.portfolio-page .folio-picker-scroll ol { list-style:none; padding:0; margin:0; }
.portfolio-page .folio-picker-scroll li { border-bottom:1px solid var(--brand-line); }
.portfolio-page .folio-picker-scroll button { display:grid; grid-template-columns:28px minmax(0,1fr) 24px; align-items:center; gap:12px; min-height:54px; width:100%; text-align:left; padding:13px 0; border:0; background:none; color:var(--brand-muted); cursor:pointer; font-size:13px; }
.portfolio-page .folio-picker-scroll button>span:first-child { font-size:9px; }
.portfolio-page .folio-picker-scroll button .arrow-icon { width:20px; height:18px; opacity:0; transform:translateX(-6px); transition:opacity .35s,transform .4s; }
.portfolio-page .folio-picker-scroll button:is(:hover,:focus-visible,[aria-current=true]) { color:var(--brand-ink); }
.portfolio-page .folio-picker-scroll button:is(:hover,:focus-visible,[aria-current=true]) .arrow-icon { opacity:1; transform:none; }
@media (min-width:761px) {
  .portfolio-page .folio-rail { grid-template-rows:auto auto minmax(140px,1fr) auto auto auto; }
  .portfolio-page .folio-directory>summary { display:none; }
  .portfolio-page .folio-list-scroll { inset:0 0 auto; height:min(360px,100%); }
  .portfolio-page .folio-search { display:none; }
  .portfolio-page .folio-search:has(input:not(:placeholder-shown)) { display:block; }
  .portfolio-page .folio-picker { width:min(680px,calc(100vw - 80px)); height:min(760px,calc(100svh - 90px)); max-height:calc(100svh - 90px); top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); margin:0; }
}
@media (max-height:780px) and (min-width:761px) {
  .portfolio-page .folio-heading h1 { font-size:30px; margin:12px 0 18px; }
  .portfolio-page .folio-directory { margin-top:20px; }
  .portfolio-page .folio-list-scroll button { min-height:50px; padding-block:12px; }
}
@media (max-width:760px) {
  .portfolio-page .folio-heading h1 { font-size:40px; margin:16px 0 20px; }
  .portfolio-page .folio-directory { margin-top:18px; }
  .portfolio-page .folio-list-scroll { height:260px; }
  .portfolio-page .folio-list-scroll button { font-size:12px; }
  .portfolio-page .folio-all-projects { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-page .folio-list-scroll button:after,.portfolio-page .folio-menu-arrow,.portfolio-page .folio-list-scroll button>span:nth-child(2),.portfolio-page .folio-all-projects .arrow-icon { transition:none; transform:none; }
  .portfolio-page .folio-list-scroll button:after { opacity:0; }
  .portfolio-page .folio-list-scroll button:is(:hover,:focus-visible,[aria-current=true]):after { opacity:1; }
  .portfolio-page .folio-picker-scroll button .arrow-icon { transition:none; transform:none; }
}