/* Portfolio Displays — Newsstand: the Portfolio widget (newsstand, pile, grid, index, carousel) + flipbook window. */

.pfd-portfolio {
  --pfd-wall: #E9E4DC;
  --pfd-shelf: #1C1C1C;
  --pfd-tag-bg: #ffffff;
  --pfd-tag-fg: #111111;
  --pfd-sticker-bg: #FFD200;
  --pfd-sticker-fg: #111111;
  --pfd-sign-bg: #111111;
  --pfd-sign-fg: #ffffff;
  --pfd-sign-rule: #D42B1E;
  --pfd-ratio: 3 / 4;
  --pfd-ratio-inv: 1.33333;
  --pfd-tilt: 6;
  --pfd-shade: 1;
  --pfd-gap: 28px;
  --pfd-mag-radius: 2px;
  --pfd-cols: var(--pfd-cols-d, 5);
  position: relative; isolation: isolate;
  font-family: var(--pfd-font-body); color: var(--pfd-fg);
}
.pfd-portfolio--grid { --pfd-cols: var(--pfd-cols-d, 4); }
@media (max-width: 1024px) { .pfd-portfolio { --pfd-cols: var(--pfd-cols-t, 3); } }
@media (max-width: 767.98px) { .pfd-portfolio { --pfd-cols: var(--pfd-cols-m, 2); } }
.pfd-portfolio [hidden] { display: none !important; }
.pfd-portfolio--empty { padding: 32px; text-align: center; }

/* ---------- The cover: a real image with paper edge, spine shadow, gloss ---------- */
.pfd-portfolio .pfd-mag {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--pfd-ratio);
  color: #fff; text-decoration: none; cursor: pointer;
  border-radius: var(--pfd-mag-radius);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.pfd-portfolio .pfd-mag:focus-visible { outline: 2px solid var(--pfd-fg); outline-offset: 4px; border-radius: var(--pfd-mag-radius); }
.pfd-mag__face {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: inherit; background: var(--spine, #cfc9bf);
  container-type: inline-size;
}
.pfd-portfolio .pfd-mag__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; border-radius: 0;
  -webkit-user-drag: none; pointer-events: none;
}
/* Paper edge, the shadow that falls into the spine, and the fold beside it. */
.pfd-mag__face::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 2.6%, rgba(255, 255, 255, .14) 3.4%, rgba(255, 255, 255, 0) 6%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 10px 0 14px -10px rgba(0, 0, 0, .4);
}
.pfd-mag__gloss { display: none; }
.has-gloss .pfd-mag__gloss {
  display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(118deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 34%);
  transition: background-position 500ms ease-out;
}
.has-gloss .pfd-mag:hover .pfd-mag__gloss,
.has-gloss .pfd-mag:focus-visible .pfd-mag__gloss { background-position: 0 0, 0 0; }

/* Optional printed title: quiet, top-left, like an independent magazine. */
.pfd-mag__text {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8% 8% 8.5%; text-align: left; color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, .34));
  text-shadow: 0 0 16px rgba(0, 0, 0, .3), 0 0 2px rgba(0, 0, 0, .16);
}
.pfd-mag__title {
  font: 600 17px/1.02 var(--pfd-font-heading); letter-spacing: -.02em;
  font-size: clamp(12px, 10.5cqw, 46px);
  text-wrap: balance; overflow-wrap: anywhere;
}
.pfd-mag__meta {
  display: flex; justify-content: space-between; gap: 8px;
  font: 500 9px/1.2 var(--pfd-font-ui); letter-spacing: .08em; text-transform: uppercase;
  font-size: clamp(8px, 3.5cqw, 13px); opacity: .92;
}
.pfd-mag--blank .pfd-mag__text { background: none; }
.pfd-mag--blank .pfd-mag__face { background: var(--spine, #1c1c1c); }

.pfd-mag__sticker {
  position: absolute; z-index: 5; top: -15px; right: -13px;
  width: 46px; height: 46px; padding: 4px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; text-align: center;
  background: var(--pfd-sticker-bg); color: var(--pfd-sticker-fg);
  font: 700 11px/1 var(--pfd-font-ui); letter-spacing: .04em; text-transform: uppercase;
  transform: rotate(-12deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 8px 10px -8px rgba(255, 255, 255, .7);
}

/* Captions: inherit the site's type. */
.pfd-pcap { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; color: var(--pfd-fg); }
.pfd-pcap__title { font-weight: 500; }
.pfd-pcap__meta { color: var(--pfd-muted); font-size: .92em; }

/* Pill button (the token pill is drawn for links; buttons need the same look past the reset). */
.pfd-portfolio .pfd-pbtn, .pfd-flip .pfd-pbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
  border-radius: 999px; background: var(--pfd-bg); color: var(--pfd-fg);
  font: 500 12px/1 var(--pfd-font-ui);
  box-shadow: 0 0 0 1px var(--pfd-line), 0 1px 2px rgba(0, 0, 0, .08);
  transition: transform var(--pfd-dur) var(--pfd-ease), box-shadow var(--pfd-dur) var(--pfd-ease);
}
.pfd-portfolio .pfd-pbtn:hover, .pfd-flip .pfd-pbtn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--pfd-line), 0 6px 14px -4px rgba(0, 0, 0, .2); }

/* ---------- Style: newsstand ---------- */
.pfd-ns { --pfd-ns-k: .74; --pfd-ns-rowgap: clamp(22px, 2.6vw, 40px); position: relative; }
.pfd-ns__sign {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0 16px;
  background: var(--pfd-sign-bg); color: var(--pfd-sign-fg);
  font: 600 13px/1 var(--pfd-font-ui); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 2px 0 var(--pfd-sign-rule), 0 14px 22px -10px rgba(0, 0, 0, .3);
}
.pfd-ns__sign span { overflow: hidden; text-overflow: ellipsis; }
.pfd-ns__wall {
  position: relative; overflow: hidden;
  padding: clamp(40px, 5vw, 76px) 0 clamp(10px, 2vw, 28px);
  background-color: var(--pfd-wall);
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%),
    linear-gradient(to right, rgba(30, 20, 10, .07), rgba(30, 20, 10, 0) 16%, rgba(30, 20, 10, 0) 84%, rgba(30, 20, 10, .07)),
    var(--pfd-wall-img, none);
  background-size: 100% 100%, 100% 100%, cover; background-position: 0 0, 0 0, center; background-repeat: no-repeat;
}
.pfd-no-light .pfd-ns__wall { background-image: var(--pfd-wall-img, none); background-size: cover; background-position: center; }
/* A little tooth, so a flat colour reads as plaster rather than as a web page. */
.pfd-ns__wall::before, .pfd-pile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0 0 0 -.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pfd-ns__shelves { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.pfd-ns__cell {
  flex: 0 0 calc(100% / var(--pfd-cols)); max-width: calc(100% / var(--pfd-cols)); min-width: 0;
  display: flex; flex-direction: column; margin-bottom: var(--pfd-ns-rowgap);
}
/* The shelf is drawn cell by cell so it wraps with the covers at any column count. */
.pfd-ns__stand { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; }
.pfd-ns__stand::before, .pfd-ns__fill::before {
  content: ""; background: linear-gradient(to bottom, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)), var(--pfd-shelf);
}
.pfd-ns__stand::after, .pfd-ns__fill > i {
  content: ""; background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) 0 0 / 100% 1px no-repeat, var(--pfd-shelf);
}
.pfd-ns__stand::before { position: absolute; left: 0; right: 0; bottom: 14px; height: 7px; z-index: 0; }
.pfd-ns__stand::after { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 2; }
.pfd-ns__under { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; min-height: 34px; padding: 0 10px; text-align: center; }
.pfd-ns__under::before, .pfd-ns__fill::after {
  content: ""; display: block; height: 26px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 14, 8, calc(.3 * var(--pfd-shade))), rgba(20, 14, 8, calc(.1 * var(--pfd-shade))) 38%, rgba(20, 14, 8, 0));
}
.pfd-ns__under::before { position: absolute; left: 0; right: 0; top: 0; }
/* Same geometry as a real cell, worked out from the shelf width, so the lip lines up. */
.pfd-ns__fill {
  flex: 1 1 0; min-width: 0; margin-bottom: var(--pfd-ns-rowgap);
  padding-top: calc(100% / var(--pfd-cols) * var(--pfd-ns-k) * var(--pfd-ratio-inv) - 13px);
}
.pfd-ns__fill::before { display: block; height: 7px; }
.pfd-ns__fill > i { display: block; height: 14px; }

.pfd-ns .pfd-mag {
  z-index: 1; width: calc(var(--pfd-ns-k) * 100%);
  transform-origin: 50% 100%;
  transform: perspective(1200px) translateY(0) rotateY(calc(var(--r1, 0) * var(--pfd-tilt) * 1deg)) rotateZ(calc(var(--r2, 0) * var(--pfd-tilt) * .25deg));
  box-shadow: 0 1px 1px rgba(40, 30, 20, calc(.22 * var(--pfd-shade))), 8px 14px 22px -8px rgba(40, 30, 20, calc(.45 * var(--pfd-shade)));
  transition: transform 220ms var(--pfd-ease), box-shadow 220ms var(--pfd-ease), opacity 200ms;
}
.pfd-ns .pfd-mag:hover, .pfd-ns .pfd-mag:focus-visible {
  transform: perspective(1200px) translateY(-10px) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 1px 1px rgba(40, 30, 20, calc(.2 * var(--pfd-shade))), 14px 30px 40px -14px rgba(40, 30, 20, calc(.55 * var(--pfd-shade)));
}
/* A couple more copies behind the one in front. They stay on the shelf when it is picked up. */
.pfd-ns__copies {
  position: absolute; left: 50%; bottom: 8px; z-index: 1; pointer-events: none;
  width: calc(var(--pfd-ns-k) * 100%); margin-left: calc(var(--pfd-ns-k) * -50%);
  aspect-ratio: var(--pfd-ratio); transform-origin: 50% 100%;
  transform: perspective(1200px) rotateY(calc(var(--r1, 0) * var(--pfd-tilt) * 1deg)) rotateZ(calc(var(--r2, 0) * var(--pfd-tilt) * .25deg));
}
.pfd-ns__copies i {
  position: absolute; inset: 0; border-radius: var(--pfd-mag-radius);
  background: linear-gradient(to bottom, #f6f3ee, #e6e1d8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09), 6px 12px 18px -8px rgba(40, 30, 20, calc(.38 * var(--pfd-shade)));
}
.pfd-ns__copies { transition: opacity 200ms, transform 220ms var(--pfd-ease); }
.pfd-ns__stand:hover .pfd-ns__copies, .pfd-ns__stand:focus-within .pfd-ns__copies { transform: perspective(1200px) translateY(-10px) rotateY(0deg) rotateZ(0deg); }
/* …but once the front copy is open in the reader, the place is simply empty: blank sheets would look like a mistake. */
.pfd-pitem.is-taken .pfd-ns__copies { opacity: 0; }
.pfd-ns__copies i:first-child { transform: translate(calc(5px * var(--dir, 1)), -3.5px); filter: brightness(.93); }
.pfd-ns__copies i:last-child { transform: translate(calc(2.5px * var(--dir, 1)), -1.75px); }
.pfd-ns__tag {
  position: relative; z-index: 3; margin-top: -3px;
  padding: 5px 7px 4px; border-radius: 3px;
  background: var(--pfd-tag-bg); color: var(--pfd-tag-fg);
  border: 1px solid rgba(0, 0, 0, .14);
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.pfd-ns .pfd-pcap { margin-top: 12px; max-width: 100%; }
.pfd-ns__tag + .pfd-pcap { margin-top: 10px; }
.pfd-ns__under > .pfd-pcap:first-child { margin-top: 30px; }

/* A cover that has been picked up leaves its place on the shelf (and in the pile, the grid…). */
.pfd-portfolio .is-out { opacity: 0 !important; }

/* ---------- Style: pile ---------- */
.pfd-pile {
  position: relative; overflow: hidden;
  background-color: var(--pfd-wall);
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%),
    linear-gradient(to right, rgba(30, 20, 10, .07), rgba(30, 20, 10, 0) 16%, rgba(30, 20, 10, 0) 84%, rgba(30, 20, 10, .07)),
    var(--pfd-wall-img, none);
  background-size: 100% 100%, 100% 100%, cover; background-position: 0 0, 0 0, center; background-repeat: no-repeat;
}
.pfd-no-light .pfd-pile { background-image: var(--pfd-wall-img, none); background-size: cover; background-position: center; }
.pfd-pile__items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 0; padding: 56px 24px; list-style: none; }
.pfd-pile__item { flex: none; width: var(--pfd-pile-w, clamp(124px, 15vw, 230px)); }
.pfd-pile .pfd-mag {
  transform: rotate(calc(var(--rot, 0deg) * var(--pfd-tilt) / 6));
  box-shadow: 0 1px 1px rgba(40, 30, 20, calc(.22 * var(--pfd-shade))), 0 3px 7px rgba(40, 30, 20, calc(.16 * var(--pfd-shade))), 0 14px 28px -10px rgba(40, 30, 20, calc(.5 * var(--pfd-shade)));
  transition: transform 520ms var(--pfd-ease), box-shadow 220ms var(--pfd-ease), opacity 200ms;
}
.pfd-pile.is-live .pfd-pile__items { display: block; padding: 0; transition: height 520ms var(--pfd-ease); }
.pfd-pile.is-live .pfd-pile__item { position: absolute; left: 0; top: 0; transition: transform 520ms var(--pfd-ease); }
.pfd-pile.is-live .pfd-pile__item.is-dragging { transition: none; }
.pfd-pile__item.is-dragging .pfd-mag, .pfd-pile .pfd-mag:hover {
  box-shadow: 0 1px 1px rgba(40, 30, 20, calc(.2 * var(--pfd-shade))), 0 26px 44px -14px rgba(40, 30, 20, calc(.6 * var(--pfd-shade)));
}
.pfd-pile.is-tidy .pfd-mag { transform: rotate(0deg); }
.pfd-portfolio .pfd-pile__tidy { position: absolute; right: 20px; top: 20px; z-index: 2000; }
@media (min-width: 768px) {
  .pfd-pile.is-live .pfd-pile__item { touch-action: none; cursor: grab; }
  .pfd-pile.is-live .pfd-pile__item.is-dragging, .pfd-pile.is-live .pfd-pile__item.is-dragging .pfd-mag { cursor: grabbing; }
  .pfd-pile.is-live .pfd-mag { cursor: grab; }
}

/* ---------- Style: grid ---------- */
.pfd-pgrid { display: grid; grid-template-columns: repeat(var(--pfd-cols), minmax(0, 1fr)); gap: calc(var(--pfd-gap) * 1.5) var(--pfd-gap); margin: 0; padding: 0; list-style: none; }
.pfd-pgrid__item { min-width: 0; }
.pfd-pgrid .pfd-mag { transition: transform 240ms var(--pfd-ease), box-shadow 240ms var(--pfd-ease), opacity 200ms; box-shadow: 0 1px 2px rgba(40, 30, 20, calc(.14 * var(--pfd-shade))); }
.pfd-pgrid .pfd-mag:hover, .pfd-pgrid .pfd-mag:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(40, 30, 20, calc(.14 * var(--pfd-shade))), 0 22px 34px -16px rgba(40, 30, 20, calc(.5 * var(--pfd-shade))); }
.pfd-pgrid .pfd-mag__img { transition: transform 600ms var(--pfd-ease); }
.pfd-pgrid .pfd-mag:hover .pfd-mag__img { transform: scale(1.03); }
.pfd-pgrid__item > .pfd-pcap { margin-top: 12px; }
.pfd-pgrid .pfd-mag .pfd-pcap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 14px 14px; text-align: left; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0)); opacity: 0; transition: opacity 200ms;
}
.pfd-pgrid .pfd-mag .pfd-pcap__meta { color: rgba(255, 255, 255, .75); }
.pfd-pgrid .pfd-mag:hover .pfd-pcap, .pfd-pgrid .pfd-mag:focus-visible .pfd-pcap { opacity: 1; }
@media (hover: none) { .pfd-pgrid .pfd-mag .pfd-pcap { opacity: 1; } }
.pfd-pgrid__empty { padding: 24px 0; }

/* Filter sentence: "Show [Everything] for [Everyone]" */
.pfd-sentence {
  margin: 0 0 clamp(24px, 3vw, 44px); color: var(--pfd-fg);
  font: 500 26px/1.25 var(--pfd-font-heading); font-size: clamp(22px, 2.5vw, 36px); letter-spacing: -.015em;
}
.pfd-sentence__pick {
  position: relative; display: inline-flex; align-items: baseline; gap: .28em; cursor: pointer;
  padding-bottom: .04em; box-shadow: inset 0 -1px 0 currentColor;
  transition: color 160ms;
}
.pfd-sentence__pick::after {
  content: ""; align-self: center; width: .34em; height: .34em; margin: -.16em .08em 0 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.pfd-sentence__pick:hover { color: var(--pfd-muted); }
.pfd-sentence__pick:focus-within { outline: 2px solid var(--pfd-fg); outline-offset: 4px; border-radius: 2px; }
.pfd-portfolio .pfd-sentence__pick select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; font-size: 16px; appearance: none; -webkit-appearance: none;
}

/* ---------- Style: index ---------- */
.pfd-pindex { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pfd-line); }
.pfd-portfolio .pfd-pindex__row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(48px, auto); gap: 24px; align-items: baseline;
  padding: 15px 0 14px; border-bottom: 1px solid var(--pfd-line);
  font-size: 15px; line-height: 1.3; color: var(--pfd-fg); text-decoration: none;
  transition: color 160ms, padding 240ms var(--pfd-ease);
}
.pfd-pindex__title { font-weight: 500; }
.pfd-pindex__client { color: var(--pfd-muted); transition: color 160ms; }
.pfd-pindex__year { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .pfd-portfolio .pfd-pindex:hover .pfd-pindex__row { color: var(--pfd-muted); }
  .pfd-portfolio .pfd-pindex .pfd-pindex__row:hover { color: var(--pfd-fg); padding-left: 10px; }
  .pfd-pindex__row:hover .pfd-pindex__client { color: var(--pfd-fg); }
}
.pfd-portfolio .pfd-pindex__row:focus-visible { outline-offset: -2px; }
@media (max-width: 767.98px) {
  .pfd-portfolio .pfd-pindex__row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; }
  .pfd-pindex__client { grid-column: 1; grid-row: 2; font-size: 13px; }
  .pfd-pindex__year { grid-column: 2; grid-row: 1; }
}
/* The cover that follows the cursor. Lives on <body> so nothing can clip it. */
.pfd-pindex__float {
  position: fixed; left: 0; top: 0; z-index: 90; width: 180px; aspect-ratio: var(--pfd-ratio, 3 / 4);
  pointer-events: none; opacity: 0; overflow: hidden; border-radius: 2px; background: #cfc9bf;
  box-shadow: 0 1px 1px rgba(40, 30, 20, .2), 0 22px 40px -14px rgba(40, 30, 20, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: opacity 180ms; will-change: transform;
}
.pfd-pindex__float.is-on { opacity: 1; }
.pfd-pindex__float img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (hover: none) { .pfd-pindex__float { display: none; } }

/* ---------- Style: carousel (reuses .pfd-carousel from the Desk) ---------- */
/* ---------- Stack: one magazine on top of a pile of the others ---------- */
.pfd-pdeck { width: var(--pfd-car-w, 380px); max-width: 100%; margin: 0 auto; padding: 28px 14px 4px; outline: none; }
/* Only the magazine on top wears its sticker; on the ones underneath it would poke out of the pile. */
.pfd-pdeck__card:not(.is-top) .pfd-mag__sticker { display: none; }
/* Whatever peeks out of the pile never widens the page. */
.pfd-portfolio--carousel { overflow: hidden; overflow: clip; }
.pfd-pdeck:focus-visible { outline: 2px solid var(--pfd-fg); outline-offset: 6px; border-radius: 4px; }
.pfd-pdeck__stack { position: relative; aspect-ratio: var(--pfd-ratio); margin: 0 48px 0 0; padding: 0; list-style: none; }
.pfd-pdeck__card {
  position: absolute; inset: 0; transform-origin: 50% 100%; --on: 1;
  transform: translate(calc(var(--p, 0) * 9px), calc(var(--p, 0) * -7px)) rotate(calc(var(--rot, 0deg) * var(--on)));
  transition: transform 420ms var(--pfd-ease), opacity 300ms var(--pfd-ease);
}
.pfd-pdeck__card.is-top { --on: 0; }
.pfd-pdeck__card:not(.is-top) { pointer-events: none; }
.pfd-pdeck__card:not(.is-top) .pfd-mag { filter: brightness(.94); }
.pfd-pdeck__card.is-deep { opacity: 0; }
.pfd-pdeck__card.is-leaving { transform: translate(-112%, -3%) rotate(-9deg); }
.pfd-pdeck .pfd-mag { height: 100%; box-shadow: 0 1px 1px rgba(40, 30, 20, calc(.22 * var(--pfd-shade))), 10px 18px 28px -12px rgba(40, 30, 20, calc(.5 * var(--pfd-shade))); transition: filter 300ms; }
.pfd-pdeck__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 48px 0 0; min-height: 44px; }
.pfd-pdeck__cap { flex: 1 1 auto; min-width: 0; text-align: center; }
.pfd-pdeck__title { font: 600 16px/1.2 var(--pfd-font-heading); color: var(--pfd-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfd-pdeck__meta { margin-top: 3px; font: 500 12px/1.3 var(--pfd-font-ui); color: var(--pfd-muted); }
.pfd-portfolio .pfd-pdeck__arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pfd-bg); color: var(--pfd-fg); box-shadow: 0 0 0 1px var(--pfd-line), 0 1px 2px rgba(0, 0, 0, .12); transition: transform 160ms var(--pfd-ease); }
.pfd-portfolio .pfd-pdeck__arrow:hover { transform: scale(1.06); }
.pfd-pdeck__arrow svg { width: 12px; height: 12px; }
.pfd-pdeck__actions { display: flex; justify-content: center; margin: 14px 48px 0 0; }
@media (prefers-reduced-motion: reduce) { .pfd-pdeck__card { transition: none; } }

/* Pile entrance: while stacked, nothing is clickable or draggable yet. */
.pfd-pile.is-stacked .pfd-pile__item { pointer-events: none; }

.pfd-flyer {
  position: fixed; z-index: 100000; margin: 0; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; border-radius: 2px; background: #cfc9bf;
  box-shadow: 0 30px 60px -20px rgba(20, 14, 8, .55), 0 0 0 1px rgba(0, 0, 0, .06);
  transition: transform 420ms var(--pfd-ease), opacity 180ms;
}
.pfd-flyer img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.pfd-flip-scrim { position: fixed; inset: 0; background: rgba(14, 11, 8, .82); opacity: 0; transition: opacity 260ms; cursor: default; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .pfd-flip-scrim { background: rgba(14, 11, 8, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.pfd-flip-scrim .pfd-flip__close { position: absolute; top: calc(var(--pfd-top, 0px) + 16px); right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: background 160ms; }
.pfd-flip-scrim .pfd-flip__close:hover { background: rgba(255, 255, 255, .26); }
.pfd-flip-scrim .pfd-flip__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pfd-flip__close svg { width: 14px; height: 14px; }
.pfd-flip-scrim.is-on { opacity: 1; }

/* ---------- Flipbook window ---------- */
.pfd-child.pfd-flip-win.is-waiting { visibility: hidden; }
.pfd-child.pfd-flip-win.is-waiting .pfd-win { animation: none; }
/* The reader is the magazine itself, floating over the dimmed page: no card, no title bar, nothing to drag. */
.pfd-child.pfd-flip-win, .pfd-child.pfd-flip-win .pfd-win { pointer-events: none; }
.pfd-child.pfd-flip-win .pfd-win { background: transparent; box-shadow: none !important; border-radius: 0; overflow: visible; cursor: default; animation: none; }
.pfd-child.pfd-flip-win .pfd-win__x, .pfd-child.pfd-flip-win .pfd-win__bar { display: none; }
/* Above the dock: while a magazine is open, it is the only thing on screen. */
.pfd-flip-scrim { z-index: 1000 !important; }
.pfd-child.pfd-flip-win { z-index: 1001 !important; }
.pfd-child.pfd-flip-win .pfd-win__body { overflow: visible; }
.pfd-flip__stage, .pfd-flip__nav { pointer-events: auto; }
/* Dragging turns pages; it must never select the text or pictures on them. */
.pfd-flip, .pfd-flip * { -webkit-user-select: none; user-select: none; }
.pfd-flip img { -webkit-user-drag: none; }
.pfd-flip { --pfd-flip-pad: 20px; padding: var(--pfd-flip-pad) var(--pfd-flip-pad) 0; background: transparent; color: #fff; }
.pfd-flip__stage { position: relative; margin: 0 auto; touch-action: pan-y; }
/* Closed, the book sits in the middle; it slides over as it opens into a spread. */
.pfd-flip__book { position: relative; transition: transform 640ms var(--pfd-ease); }
.pfd-flip__skeleton { position: absolute; top: 0; bottom: 0; left: 25%; width: 50%; border-radius: 2px; background: linear-gradient(100deg, #e4e0d9 30%, #f1eee9 50%, #e4e0d9 70%) 0 0 / 300% 100%; animation: pfd-flip-shimmer 1.2s linear infinite; }
.pfd-flip.is-single .pfd-flip__skeleton { left: 0; width: 100%; }
@keyframes pfd-flip-shimmer { to { background-position: -150% 0; } }
.pfd-flip__msg { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; padding: 24px; text-align: center; font-size: 14px; }
.pfd-flip__nav { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; }
.pfd-flip .pfd-flip__arrow { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .12); transition: transform 160ms var(--pfd-ease), opacity 160ms; }
.pfd-flip .pfd-flip__arrow:hover { transform: scale(1.06); }
.pfd-flip .pfd-flip__arrow[disabled] { opacity: .35; cursor: default; transform: none; }
.pfd-flip__arrow svg { width: 12px; height: 12px; }
.pfd-flip__count { min-width: 72px; text-align: center; font: 500 12px/1 var(--pfd-font-ui); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .72); }
.pfd-flip__count[hidden] { display: none; }

/* StPageFlip internals */
.pfd-flip .stf__parent { margin: 0 auto; }
.pfd-flip .stf__item { overflow: hidden; background: #fff; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .12); }
/* Thickness: the edges of the pages still to come (right) and already turned (left). */
.pfd-flip__book::before, .pfd-flip__book::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 8px; z-index: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(90deg, #f6f3ee 0 1px, #cbc5ba 1px 2px);
  box-shadow: 0 22px 30px -14px rgba(0, 0, 0, .7);
}
.pfd-flip__book::before { right: 100%; border-radius: 2px 0 0 2px; }
.pfd-flip__book::after { left: 100%; border-radius: 0 2px 2px 0; }
.pfd-flip.is-open .pfd-flip__book::before, .pfd-flip.is-open .pfd-flip__book::after,
.pfd-flip.is-front .pfd-flip__book::after, .pfd-flip.is-back .pfd-flip__book::before, .pfd-flip.is-single .pfd-flip__book::after { opacity: 1; transition: opacity 320ms var(--pfd-ease) 200ms; }
/* The fold down the middle of an open spread: every page darkens toward its bound edge. The shading is part of
   the page, so a page that is turning takes it along and passes over the fold, never under a line across the book. */
.pfd-flip .pfd-page[data-pfd-side]::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 6; pointer-events: none;
}
.pfd-flip .pfd-page[data-pfd-side="left"]::before { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .3) 8%, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, 0)); }
.pfd-flip .pfd-page[data-pfd-side="right"]::before { left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .22) 10%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, 0)); }
.pfd-flip .stf__parent { cursor: grab; }
/* The bound edge of a closed magazine: the crease where the cover bends, and the shadow that falls into it. */
.pfd-flip .pfd-flip__cover::after, .pfd-flip .pfd-flip__back::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7%; z-index: 6; pointer-events: none;
}
.pfd-flip .pfd-flip__cover::after { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 22%, rgba(255, 255, 255, .2) 34%, rgba(0, 0, 0, .14) 46%, rgba(0, 0, 0, 0)); }
.pfd-flip .pfd-flip__back::after { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 22%, rgba(255, 255, 255, .2) 34%, rgba(0, 0, 0, .14) 46%, rgba(0, 0, 0, 0)); }
/* Waiting for the pages: a quiet spinner on the cover that has just landed. */
.pfd-flyer.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; box-shadow: 0 0 0 9px rgba(0, 0, 0, .38); background: rgba(0, 0, 0, .38);
  animation: pfd-spin .8s linear infinite;
}
@keyframes pfd-spin { to { transform: rotate(360deg); } }
.pfd-flip .pfd-page { cursor: pointer; }

/* No flip library: the same pages in a scrolling column. Never blank. */
/* Plain block flow on purpose: grid or flex tracks would squeeze the sheets, whose content is all absolutely placed. */
.pfd-flip__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; }
.pfd-flip__scroll .pfd-page { width: 100%; max-width: var(--pfd-flip-pw, 520px); aspect-ratio: 3 / 4; margin: 0 auto 12px; scroll-snap-align: start; cursor: default; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.pfd-flip__scroll .pfd-page:last-child { margin-bottom: 0; }

/* Page sheets come from the shared renderer; quiet them down for this reader. */
.pfd-flip .pfd-page { font-family: var(--pfd-font-body); }
.pfd-flip .pfd-page > .pfd-texture, .pfd-flip .pfd-page > .pfd-glare { display: none; }
.pfd-flip .pfd-h { font-family: var(--pfd-font-heading); font-weight: 600; text-transform: none; letter-spacing: -.02em; line-height: 1.05; }
.pfd-flip .pfd-page-head { font-family: var(--pfd-font-ui); font-weight: 500; letter-spacing: .08em; }
.pfd-flip .pfd-bleed-cap { background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .28) 62%, transparent); }
.pfd-flip .pfd-page[data-layout="bleed"] .pfd-page-head { position: relative; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* The Desk's child-window rule sets every image to height:auto; pages need theirs to fill. */
.pfd-child .pfd-win__body .pfd-flip .pfd-media img,
.pfd-child .pfd-win__body .pfd-flip .pfd-flip__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pfd-child .pfd-win__body .pfd-flip .pfd-media--ratio img { position: absolute; inset: 0; }

.pfd-flip__art { position: absolute; inset: 0; z-index: 1; }
.pfd-flip__covertext {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 8%; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, 0) 60%);
}
.pfd-flip .pfd-flip__title { margin: 0; color: inherit; font: 600 34px/1 var(--pfd-font-heading); font-size: clamp(26px, 3.4vw, 52px); letter-spacing: -.025em; text-wrap: balance; }
.pfd-flip .pfd-flip__eyebrow { margin: 0; max-width: none; color: inherit; opacity: .85; font: 500 11px/1.2 var(--pfd-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.pfd-flip__endin { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 12%; text-align: center; color: rgba(0, 0, 0, .34); font: 500 11px/1.4 var(--pfd-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.pfd-flip__backin { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 10% 9% 9%; color: #fff; }
.pfd-flip .pfd-flip__backtitle { margin: 0 0 6%; color: inherit; font: 600 22px/1.05 var(--pfd-font-heading); font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em; }
.pfd-flip__backin dl { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.pfd-flip__backin dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); font-size: 14px; line-height: 1.3; }
.pfd-flip__backin dt { margin: 0; font-weight: 400; opacity: .7; }
.pfd-flip__backin dd { margin: 0; text-align: right; }
.pfd-flip__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pfd-flip__back .pfd-sheet::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }

@media (max-width: 767.98px) {
  .pfd-flip { --pfd-flip-pad: 12px; }
  .pfd-ns { --pfd-ns-k: .78; }
  .pfd-ns__sign { font-size: 11px; letter-spacing: .12em; }
  .pfd-mag__sticker { top: -12px; right: -10px; width: 40px; height: 40px; font-size: 10px; }
  .pfd-portfolio .pfd-pile__tidy { right: 12px; top: 12px; }
}

/* Phones: the magazine sits below the close button, nothing scrolls inside the reader. */
@media (max-width: 767.98px) {
  .pfd-child.pfd-flip-win { top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px) !important; z-index: 2147483100 !important; }
  .pfd-flip-scrim { z-index: 2147483050 !important; }
  .pfd-child.pfd-flip-win .pfd-win { max-height: none; }
}