/* The seven folios on a wooden shelf. Ported from V2 ("A Portrait You Can Read"): paper folios with botanical covers, SFF Focus tabs and stamps, a counted face, a wooden shelf lip.
   Used by portrait.html (full) and index.html (compact, every folio is a link). Everything is scoped under .pt-shelf so it never touches other v6 rules. */
.pt-shelf{--brick:#a4442f;--rule:#e2d8c6;position:relative;margin-top:26px}
.pt-shelf .drawer{position:relative;perspective:1900px;perspective-origin:50% -30%;padding:72px 0 0;height:560px}
.pt-shelf .row{display:flex;justify-content:center;gap:10px;height:100%;position:relative;transform-style:preserve-3d}
.pt-shelf .folio{--W:clamp(100px,calc((100vw - 56px - 62px) / 7),178px);--H:480px;--T:34px;position:relative;display:block;width:var(--W);height:var(--H);border:0;padding:0;background:none;cursor:pointer;font:inherit;color:inherit;flex:none;transform-style:preserve-3d;margin-top:18px;text-align:left;text-decoration:none}
.pt-shelf .f-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-13deg);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s}
html.still .pt-shelf .f-body{transition:none}
.pt-shelf .folio:nth-child(n+4) .f-body{transform:rotateY(0)}
.pt-shelf .folio:nth-child(n+5) .f-body{transform:rotateY(11deg)}
.pt-shelf .folio:nth-child(4) .f-body{transform:rotateY(-3deg)}
.pt-shelf .folio:hover .f-body,.pt-shelf .folio:focus-visible .f-body{transform:translateY(-30px) rotateY(0) translateZ(14px)}
.pt-shelf .folio[aria-pressed=true] .f-body,.pt-shelf .folio[aria-current=true] .f-body{transform:translateY(-62px) translateZ(36px) rotateY(0)}
.pt-shelf .row.has-sel .folio:not([aria-pressed=true]) .f-body{filter:brightness(.93) saturate(.9)}
.pt-shelf .folio:focus-visible{outline:3px solid #1e6fb8;outline-offset:6px;border-radius:6px}
.pt-shelf .face{position:absolute;backface-visibility:hidden}
.pt-shelf .f-cover{inset:0;transform:translateZ(calc(var(--T) / 2));background:var(--c);color:var(--ink-c);border-radius:3px 7px 7px 3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 10px 0 18px -10px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .13 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),linear-gradient(100deg,rgba(255,255,255,.1),transparent 30%,rgba(0,0,0,.08))}
.pt-shelf .f-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 80%)}
.pt-shelf .f-side{top:0;height:100%;width:var(--T);left:calc(var(--W) - var(--T) / 2);transform:rotateY(90deg);background:repeating-linear-gradient(180deg,#f7f1e3 0 2px,#d9cfb9 2px 3px);box-shadow:inset 0 0 12px rgba(0,0,0,.25)}
.pt-shelf .f-left{top:0;height:100%;width:var(--T);left:calc(var(--T) / -2);transform:rotateY(-90deg);background:var(--c);filter:brightness(.7)}
.pt-shelf .f-top{left:0;width:var(--W);height:var(--T);top:calc(var(--T) / -2);transform:rotateX(90deg);background:repeating-linear-gradient(90deg,#f7f1e3 0 2px,#d6ccb5 2px 3px);box-shadow:inset 0 0 10px rgba(0,0,0,.25)}
.pt-shelf .f-tab{position:absolute;top:-17px;height:20px;min-width:62px;padding:0 10px;border-radius:7px 7px 0 0;background:var(--c);color:var(--ink-c);font:700 9.5px/20px "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transform:translateZ(calc(var(--T) / 2));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pt-shelf .folio:nth-child(3n+1) .f-tab{left:10px}.pt-shelf .folio:nth-child(3n+2) .f-tab{left:50%;transform:translateZ(calc(var(--T) / 2)) translateX(-50%)}.pt-shelf .folio:nth-child(3n) .f-tab{right:10px}
.pt-shelf .c-in{position:absolute;inset:0;padding:30px 8px 118px 18px;display:flex;flex-direction:column}
.pt-shelf .c-no{font:600 11px "Source Sans 3",sans-serif;letter-spacing:.2em;opacity:.75}
.pt-shelf .c-name{display:block;font:600 clamp(13px,calc((var(--W) - 28px) / 7.4),26px)/1 "Newsreader",Georgia,serif;letter-spacing:-.025em;margin:7px 0 0}
.pt-shelf .c-name span{display:block}
.pt-shelf .c-art{display:block;flex:1;min-height:120px;margin:6px -6px 0 -8px;position:relative}
.pt-shelf .c-art svg{position:absolute;inset:0;width:100%;height:100%}
.pt-shelf .c-num{display:block;font:400 12.5px/1.4 "Source Sans 3",sans-serif;margin:0}
.pt-shelf .c-num b{display:block;font:600 30px/1 "Newsreader",Georgia,serif;letter-spacing:-.02em;margin-bottom:3px}
.pt-shelf .c-num+.c-num{margin-top:6px;font-size:11.5px;padding-top:6px;border-top:1px solid var(--line-c)}
.pt-shelf .sff-stamp{position:absolute;top:104px;right:6px;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--ink-c);display:grid;place-items:center;text-align:center;font:800 8.5px/1.1 "Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;transform:rotate(12deg);background:rgba(255,255,255,.06);color:var(--ink-c)}
.pt-shelf .sff-stamp::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px dashed var(--line-c)}
.pt-shelf .drawer-lip{position:absolute;left:-2vw;right:-2vw;bottom:0;height:92px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 14px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,rgba(255,255,255,.03) 3px 7px),linear-gradient(180deg,#8a6a45,#6c4e2e 60%,#58401f);
  box-shadow:0 -10px 24px -8px rgba(60,36,10,.45),0 30px 40px -20px rgba(60,36,10,.5);border-radius:6px 6px 0 0}
.pt-shelf .drawer-lip::after{content:"";position:absolute;left:50%;top:30px;width:200px;height:34px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,#f2e8cf,#e1d3ae);box-shadow:inset 0 0 0 1px rgba(90,60,20,.4),0 1px 0 rgba(255,255,255,.2)}
.pt-shelf .drawer-lip span{position:absolute;left:50%;top:38px;transform:translateX(-50%);font:700 11px "Source Sans 3",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#4b3720;z-index:2;white-space:nowrap}
.pt-shelf .drawer-hint{position:absolute;right:0;top:0;font:600 13px "Source Sans 3",sans-serif;color:#7a8590;display:flex;gap:8px;align-items:center;margin:0}
.pt-shelf .drawer-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brick);animation:ptpulse 2.2s infinite;box-shadow:0 0 0 0 rgba(164,68,47,.4)}
html.still .pt-shelf .drawer-hint::before{animation:none}
@keyframes ptpulse{50%{box-shadow:0 0 0 7px rgba(164,68,47,0)}}
@media (prefers-reduced-motion:reduce){.pt-shelf .f-body{transition:none}.pt-shelf .drawer-hint::before{animation:none}}

/* compact: the front page. Same folios, shorter, every one a link. */
.pt-shelf.compact .drawer{height:420px;padding-top:56px}
.pt-shelf.compact .folio{--H:330px}
.pt-shelf.compact .c-in{padding:26px 8px 92px 16px}
.pt-shelf.compact .c-art{min-height:70px}
.pt-shelf.compact .c-num+.c-num{display:none}
.pt-shelf.compact .c-num b{font-size:26px}
.pt-shelf.compact .drawer-lip{height:70px}
.pt-shelf.compact .drawer-lip::after{top:22px;height:28px;width:170px}
.pt-shelf.compact .drawer-lip span{top:29px;font-size:10px}
.pt-shelf.compact .sff-stamp{top:84px;width:50px;height:50px;font-size:7.5px}
.pt-shelf-cta{margin:26px 0 0;text-align:center}
.pt-shelf-cta a{display:inline-block;text-decoration:none;font:700 15px "Source Sans 3",sans-serif;background:#0b2a44;color:#fff;padding:12px 22px;border-radius:99px}
.pt-shelf-cta a:hover{background:#b8253f}

@media (max-width:1100px){.pt-shelf .c-num+.c-num{display:none}.pt-shelf .folio{--H:440px}.pt-shelf.compact .folio{--H:330px}}
@media (max-width:760px){
  /* the shelf becomes a vertical stack of folders */
  .pt-shelf .drawer,.pt-shelf.compact .drawer{height:auto;perspective:none;padding:24px 0 0}
  .pt-shelf .drawer-lip,.pt-shelf .drawer-hint{display:none}
  .pt-shelf .row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;transform-style:flat}
  .pt-shelf .folio,.pt-shelf.compact .folio{--W:100%;--H:auto;width:100%;height:auto;margin:0;transform-style:flat;display:block}
  .pt-shelf .f-body{position:relative;inset:auto;transform:none!important;transform-style:flat;filter:none!important}
  .pt-shelf .f-side,.pt-shelf .f-left,.pt-shelf .f-top,.pt-shelf .f-tab{display:none}
  .pt-shelf .f-cover{position:relative;transform:none;border-radius:4px;min-height:132px;display:block}
  .pt-shelf .c-in,.pt-shelf.compact .c-in{position:relative;padding:18px 118px 18px 18px;min-height:132px;display:block}
  .pt-shelf .c-name{font-size:26px}.pt-shelf .c-name span{display:inline}.pt-shelf .c-name span+span::before{content:" "}
  .pt-shelf .c-art,.pt-shelf.compact .c-art{position:absolute;right:0;top:0;bottom:0;width:120px;min-height:0;margin:0}
  .pt-shelf .c-num{margin-top:10px;font-size:14px}.pt-shelf .c-num b{display:inline;font-size:22px;margin-right:6px}
  .pt-shelf .sff-stamp,.pt-shelf.compact .sff-stamp{top:10px;right:92px;width:46px;height:46px;font-size:7px}
  .pt-shelf .folio[aria-pressed=true] .f-cover{box-shadow:0 0 0 3px var(--brick)}
  .pt-shelf .folio[aria-pressed=true]::after{content:"Open";position:absolute;right:10px;bottom:8px;font:800 10px "Source Sans 3",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-c);opacity:.85}
}
/* the wooden lip covers the folio bottoms (Josh 10/30): nothing hangs below the shelf */
.pt-shelf{clip-path:inset(-400px -4vw 0 -4vw)}