/* Portfolio Displays — Page Frame: a full-screen window with a tab bar over the desk backdrop.
   Depends on pfd-tokens.css. The chrome (backdrop, tabs) is `.pfd`-reset; the body is not,
   so the page's own content keeps the theme's and Elementor's typography. */

body.pfd-framed { margin: 0; background: var(--pfd-frame-bg, #E9E4DC); }

.pfd-frame {
  --pfd-frame-margin: 16px;
  --pfd-frame-dim: rgba(0, 0, 0, .5);
  position: relative; z-index: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
.pfd-frame *, .pfd-frame *::before, .pfd-frame *::after { box-sizing: border-box; }

/* ---------- Backdrop: the desk, dimmed ---------- */
.pfd-frame__backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background-color: var(--pfd-frame-bg, #E9E4DC);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  pointer-events: none;
}
.pfd-frame__backdrop::after { content: ""; position: absolute; inset: 0; background: var(--pfd-frame-dim); }
.pfd-frame__wordmark {
  position: absolute; left: -.02em; bottom: -.14em;
  font: 700 18vw/1 var(--pfd-font-heading); letter-spacing: -.04em;
  color: rgba(0, 0, 0, .9); opacity: .9;
  white-space: nowrap; pointer-events: none; user-select: none; -webkit-user-select: none;
}

/* ---------- Window ---------- */
.pfd-frame__win {
  position: relative; z-index: 1;
  flex: 1 1 auto; display: flex; flex-direction: column;
  margin: var(--pfd-frame-margin) var(--pfd-frame-margin) 0;
  border-radius: 12px 12px 0 0;
  background: var(--pfd-bg); color: var(--pfd-fg);
  box-shadow: var(--pfd-shadow-lift);
  overflow: hidden;
  transform-origin: 50% 40%;
  animation: pfd-frame-in var(--pfd-dur) var(--pfd-ease) both;
}
.pfd-frame__win.is-closing { animation: pfd-frame-out 160ms var(--pfd-ease) forwards; }
@keyframes pfd-frame-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pfd-frame-out { to { opacity: 0; transform: scale(.97); } }

/* ---------- Tab bar ---------- */
.pfd-frame__tabs {
  flex: none; height: 36px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px;
  background: #111; color: #fff;
  font-family: var(--pfd-font-ui);
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pfd-frame__tabs::-webkit-scrollbar { display: none; }
.pfd-tab {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  height: 28px; padding: 0 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 500 13px/1 var(--pfd-font-ui); letter-spacing: .005em;
  transition: background var(--pfd-dur) var(--pfd-ease);
}
.pfd .pfd-tab, .pfd-frame__tabs a.pfd-tab { color: #fff; }
.pfd-tab:hover { background: rgba(255, 255, 255, .22); }
.pfd-tab svg { width: 18px; height: 18px; display: block; }
.pfd-tab--close { width: 28px; padding: 0; justify-content: center; }
.pfd-tab.is-current, .pfd .pfd-tab.is-current { background: #fff; color: #000; padding-right: 5px; }
.pfd-tab.is-current:hover { background: #fff; }
.pfd-tab__label { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.pfd-tab__x, .pfd .pfd-tab__x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  color: #000; opacity: .7; transition: opacity 120ms, background 120ms;
}
.pfd-tab__x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.pfd-tab__x svg { width: 16px; height: 16px; }
.pfd-frame__tabs :focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pfd-tab.is-current :focus-visible { outline-color: #000; }

/* ---------- Body ---------- */
.pfd-frame__body { flex: 1 1 auto; padding: 40px; }
.pfd-frame__main { display: block; }

/* Project inside the frame: the editorial case study, 1100px measure, no double padding. */
.pfd-frame__body .pfd-single,
.pfd-frame__body .pfd-archive { max-width: 1100px; margin: 0 auto; padding: 0 0 24px; }
.pfd-frame__body .pfd-archive { max-width: 1240px; }
.pfd-frame__body .pfd-single-title { font-size: clamp(34px, 5.4vw, 72px); }
.pfd-frame__body .pfd-a-figure img, .pfd-frame__body .pfd-a-figure video { width: 100%; height: auto; display: block; }
.pfd-frame__body .pfd-single-intro { max-width: 68ch; }

/* Elementor-built pages fill the window; sections handle their own spacing. */
.pfd-frame__body .pfd-frame__elementor { margin: -40px; }
.pfd-frame__body .pfd-frame__elementor > .elementor { min-height: calc(100vh - 36px - var(--pfd-frame-margin)); }

/* Plain pages and posts */
.pfd-frame__page { max-width: 1100px; margin: 0 auto; }
.pfd-frame__page-head { margin-bottom: clamp(24px, 4vw, 44px); padding-bottom: clamp(18px, 2.5vw, 28px); border-bottom: 2px solid currentColor; }
.pfd-frame__kicker { margin: 0 0 12px; font: 700 11px/1.2 var(--pfd-font-ui); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.pfd-frame__title { margin: 0; font-family: var(--pfd-font-heading); font-size: clamp(34px, 5.4vw, 72px); line-height: .94; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.pfd-frame__entry { font-size: 17px; line-height: 1.62; }
/* Text keeps a reading measure; figures span the full window width. */
.pfd-frame__entry > :not(figure):not(.wp-block-image):not(.wp-block-gallery):not(.alignfull):not(.alignwide) { max-width: 68ch; }
.pfd-frame__entry > p { margin: 0 0 1.1em; }
.pfd-frame__entry :is(h2, h3, h4) { margin: 1.6em 0 .5em; line-height: 1.15; letter-spacing: -.02em; }
.pfd-frame__entry :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3em; }
.pfd-frame__entry figure, .pfd-frame__entry .wp-block-image { margin: 2em 0; }
.pfd-frame__entry img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.pfd-frame__entry figcaption { margin-top: 8px; font: 500 12px/1.4 var(--pfd-font-ui); opacity: .6; }
.pfd-frame__entry a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pfd-frame__pages { margin-top: 2em; }

/* ---------- Dock ---------- */
.pfd-frame__dock { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; padding: 0 var(--pfd-frame-margin) 12px; pointer-events: none; }
.pfd-frame__dock > * { pointer-events: auto; }

/* ---------- Mobile: edge to edge, tabs scroll ---------- */
@media (max-width: 767.98px) {
  .pfd-frame { --pfd-frame-margin: 0px; }
  .pfd-frame__win { margin: 0; border-radius: 0; box-shadow: none; }
  .pfd-frame__body { padding: 20px; }
  .pfd-frame__body .pfd-frame__elementor { margin: -20px; }
  .pfd-frame__wordmark { display: none; }
  .pfd-tab__label { max-width: 52vw; }
}
@media (max-width: 1023.98px) and (min-width: 768px) {
  .pfd-frame__body { padding: 24px; }
  .pfd-frame__body .pfd-frame__elementor { margin: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pfd-frame__win, .pfd-frame__win.is-closing { animation: none; }
}
@media print {
  .pfd-frame__backdrop, .pfd-frame__tabs, .pfd-frame__dock { display: none; }
  .pfd-frame__win { margin: 0; box-shadow: none; border-radius: 0; animation: none; }
}

/* ---------- Embedded in the Viewer overlay of the page that opened it ---------- */
/* That page shows through, dimmed by the overlay itself, and keeps its own menu on top. */
body.pfd-framed.pfd-embed { background: transparent; }
body.pfd-embed .pfd-frame__backdrop { display: none; }
/* The viewer already showed a stand-in window in this exact place: the real one takes over without an entrance. */
body.pfd-embed .pfd-frame__win { animation: none; }
body.pfd-embed .pfd-frame__body, html.pfd-has-dock .pfd-frame__body { padding-bottom: 120px; }