/* ============================================================
   ARTURE — PORTFOLIO SUB-PAGES
   Social, 3D and Film — all in the client-chapter treatment.
   Everything is prefixed pf- so nothing collides with
   arture.css or work.css. Layout borrows .wrap, .chapter and
   .reveal from the site so these pages behave like the rest.
   ============================================================ */

/* ---------- shared ---------- */
/* padding-block only — .pf-head shares its element with .wrap, and a padding
   shorthand here would zero the side gutter .wrap provides. */
.pf-head { padding-block: 12vh 2.4rem; }
.pf-head h1 {
  margin: 1rem 0 1.2rem;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 16ch;
}
.pf-head h1 b { font-weight: 700; }
.pf-head h1 em { font-style: normal; color: var(--accent); }
.pf-head > p { max-width: 56ch; margin: 0; color: var(--muted); font-size: 1rem; }

.pf-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; margin-top: 1.6rem; }
.pf-tags span {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--faint);
  border-radius: 13px;
  padding: 0.3rem 0.65rem;
}
.pf-tags span.key { color: var(--accent); border-color: rgba(240, 137, 45, 0.38); }

.pf-note {
  margin-top: 2.4rem; padding: 1.15rem 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 6%, transparent); max-width: 72ch;
}
.pf-note b {
  display: block; font-family: var(--mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.pf-note p { margin: 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: var(--muted); }
.pf-note p + p { margin-top: 0.6rem; }

/* ============================================================
   CONCEPT B — CLIENT CHAPTERS
   ============================================================ */
.pf-b-chapter {
  --c-bg: var(--navy); --c-fg: var(--paper);
  --c-dim: rgba(243, 239, 231, 0.6); --c-line: rgba(243, 239, 231, 0.14);
  --c-key: var(--accent);
  /* Remap the site tokens inside a chapter so anything nested here — film
     players, fact tables, notes — picks up the client's palette instead of
     Arture's ink. This is what lets the 3D and film pages reuse the chapter
     treatment without restyling every component. */
  --paper: var(--c-fg);
  --muted: var(--c-dim);
  --faint: var(--c-line);
  --accent: var(--c-key);
  position: relative; z-index: 2;
  background: var(--c-bg); color: var(--c-fg);
  padding: 4.5rem 0 4rem;
  border-top: 1px solid var(--faint);
}
.pf-b-chapter.datwyler { --c-bg:#081428; --c-fg:#EAF2FB; --c-dim:rgba(234,242,251,.62); --c-line:rgba(234,242,251,.15); --c-key:#4FA6E8; }
.pf-b-chapter.innova   { --c-bg:#04131C; --c-fg:#DCEEF5; --c-dim:rgba(220,238,245,.6);  --c-line:rgba(220,238,245,.14); --c-key:#67C3DE; }
.pf-b-chapter.nahj     { --c-bg:#F7F2E6; --c-fg:#1E4A3F; --c-dim:rgba(30,74,63,.7);     --c-line:rgba(30,74,63,.18);    --c-key:#C9962B; }

/* Neutral chapter palettes for work that is not tied to one client brand —
   derived from Arture's own ink rather than guessing a client's colours. */
.pf-b-chapter.slate    { --c-bg:#0B1524; --c-fg:#E7ECF4; --c-dim:rgba(231,236,244,.6);  --c-line:rgba(231,236,244,.13); --c-key:#8FA8C8; }
.pf-b-chapter.warm     { --c-bg:#1A1410; --c-fg:#F3EADF; --c-dim:rgba(243,234,223,.62); --c-line:rgba(243,234,223,.14); --c-key:#E0A153; }
.pf-b-chapter.paper    { --c-bg:#F3EFE7; --c-fg:#13223A; --c-dim:rgba(19,34,58,.68);    --c-line:rgba(19,34,58,.16);    --c-key:#C06A18; }

/* ---------- logo wall ---------- */
.pf-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 7px; overflow: hidden; }
.pf-logos > div {
  display: grid; place-items: center; gap: 0.9rem;
  min-height: 200px; padding: 1.9rem 1.4rem;
  background: #F7F5F0;
}
.pf-logos img { display: block; width: 100%; max-width: 200px; height: 84px; object-fit: contain; }
.pf-logos span {
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(19, 34, 58, 0.55);
}

/* ---------- plain image grid (renders, events, guideline mockups) ---------- */
.pf-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.pf-shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-shots figure { margin: 0; min-width: 0; }
.pf-shots img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 3px; border: 1px solid var(--c-line); }
.pf-shots figcaption {
  margin-top: 0.5rem; font-family: var(--mono); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim);
}


.pf-b-index {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-key); margin: 0 0 1.1rem;
}
.pf-b-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2.5rem; align-items: end; margin-bottom: 2.4rem; }
.pf-b-head h2 {
  margin: 0; font-size: clamp(2rem, 5.4vw, 3.8rem); font-weight: 300;
  line-height: 1.06; letter-spacing: -0.01em; color: var(--c-fg);
  text-wrap: balance; max-width: 15ch;
}
.pf-b-head h2 b { font-weight: 700; }
.pf-b-native { display: block; direction: rtl; margin-top: 0.5rem; font-size: 1.15rem; font-weight: 400; color: var(--c-dim); }
.pf-b-meta { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; text-align: right; }
.pf-b-meta span {
  font-family: var(--mono); font-size: 0.54rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim);
  border: 1px solid var(--c-line); border-radius: 12px; padding: 0.28rem 0.62rem;
}
.pf-b-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem 3rem; align-items: start; margin-bottom: 2.2rem; }
.pf-b-body p { margin: 0; color: var(--c-dim); font-size: 1rem; line-height: 1.75; max-width: 52ch; }
.pf-b-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; margin: 0; padding-top: 0.3rem; }
.pf-b-facts dt {
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim);
}
.pf-b-facts dd { margin: 0; font-size: 0.8rem; font-weight: 500; text-align: right; color: var(--c-fg); }

.pf-b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.pf-b-grid figure { margin: 0; min-width: 0; }
.pf-b-grid img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 3px; border: 1px solid var(--c-line); }
.pf-b-grid figcaption {
  margin-top: 0.55rem; font-family: var(--mono); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim);
}


/* vertical stills (9:16 social cuts) sit four across, not three */
.pf-shots.vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .pf-shots.vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 540px) { .pf-shots.vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* document spreads — pages carry their own white, so give them a lift off the
   chapter ground rather than a border that fights the paper edge */
.pf-shots.pages img { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); border-radius: 2px; }
.pf-shots.pages { gap: 1.5rem; }


/* event recap players — two across, poster-first like the films page */
.pf-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; margin-bottom: 2rem; }
.pf-players .pf-player { aspect-ratio: 16 / 9; }
.pf-players .pf-play .disc { width: 58px; height: 58px; }
.pf-players figcaption,
.pf-players .vcap {
  display: block; margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim, var(--muted));
}
@media (max-width: 820px) { .pf-players { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   3D
   ============================================================ */
.pf-stage {
  position: relative; margin-top: 1.8rem;
  border: 1px solid var(--faint); border-radius: 7px; overflow: hidden;
  background: radial-gradient(900px 520px at 50% 0%, rgba(26,44,74,.55), transparent 70%), var(--navy);
  aspect-ratio: 16 / 10; max-width: 100%;
}
.pf-canvas { position: absolute; inset: 0; }
.pf-canvas canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.pf-gate {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 1.05rem;
  padding: 2rem 1.25rem; text-align: center;
}
.pf-gate h2 { margin: 0; font-size: 1.25rem; font-weight: 500; }
.pf-gate p { margin: 0; max-width: 44ch; color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
.pf-loadbtn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: 0.3rem; padding: 0.95rem 1.5rem;
  border: 0; border-radius: 3px; cursor: pointer;
  background: var(--accent); color: var(--ink);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pf-loadbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 38%, transparent); }
.pf-loadbtn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.pf-prog { width: min(340px, 80vw); display: none; }
.pf-prog.on { display: block; }
.pf-prog-bar { height: 2px; background: rgba(243,239,231,.14); border-radius: 2px; overflow: hidden; }
.pf-prog-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.18s linear; }
.pf-prog-txt {
  display: flex; justify-content: space-between; margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.55rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pf-err { display: none; max-width: 44ch; color: #E2574C; font-family: var(--mono); font-size: 0.76rem; line-height: 1.65; }
.pf-err.on { display: block; }
.pf-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: none; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(to top, rgba(7,13,26,.86), rgba(7,13,26,0));
}
.pf-controls.on { display: flex; }
.pf-ctl {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.48rem 0.75rem; cursor: pointer;
  border: 1px solid rgba(243,239,231,.22); border-radius: 3px;
  background: rgba(7,13,26,.55); backdrop-filter: blur(8px); color: var(--paper);
  font-family: var(--mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.pf-ctl:hover { border-color: var(--accent); color: var(--accent); }
.pf-ctl[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent); }
.pf-hint {
  margin-left: auto; font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.pf-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: 1.3rem;
  border: 1px solid var(--faint); border-radius: 7px; overflow: hidden; background: var(--faint);
}
.pf-facts > div { background: var(--ink); padding: 1rem 1.1rem; }
.pf-facts dt {
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.pf-facts dd { margin: 0.4rem 0 0; font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pf-facts dd small { display: block; margin-top: 0.15rem; font-size: 0.62rem; font-weight: 400; color: var(--muted); }

/* ============================================================
   FILM
   ============================================================ */
.pf-film { padding: 3.2rem 0; border-top: 1px solid var(--faint); }
.pf-film-index {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem;
}
.pf-film-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem 2rem; align-items: end; margin-bottom: 1.3rem; }
.pf-film-head h2 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 300; line-height: 1.15; max-width: 18ch; text-wrap: balance; }
.pf-film-head h2 b { font-weight: 700; }
.pf-film-spec { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; justify-content: flex-end; }
.pf-film-spec span {
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--faint); border-radius: 11px; padding: 0.24rem 0.58rem;
}
.pf-player {
  position: relative; overflow: hidden; border-radius: 5px;
  border: 1px solid var(--faint); background: #000; aspect-ratio: 16 / 9;
}
.pf-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pf-player .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-player .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,13,26,.72) 0%, rgba(7,13,26,.12) 45%, rgba(7,13,26,.3) 100%);
}
.pf-play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 0.85rem;
  border: 0; background: transparent; cursor: pointer; color: var(--paper);
  font: inherit; width: 100%; padding: 1.5rem;
}
.pf-play .disc {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
}
.pf-play:hover .disc { transform: scale(1.07); box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 42%, transparent); }
.pf-play .cap {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.pf-play .cap small { display: block; margin-top: 0.3rem; font-weight: 500; opacity: 0.72; letter-spacing: 0.12em; }
.pf-player.playing .pf-play,
.pf-player.playing .poster,
.pf-player.playing .veil { display: none; }
.pf-film-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem 2.5rem; margin-top: 1.25rem; align-items: start; }
.pf-film-body p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.75; max-width: 56ch; }
.pf-film-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.2rem; margin: 0; }
.pf-film-facts dt {
  font-family: var(--mono); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.pf-film-facts dd { margin: 0; font-size: 0.78rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pf-b-head { grid-template-columns: minmax(0, 1fr); }
  .pf-b-meta { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; }
  .pf-b-body { grid-template-columns: minmax(0, 1fr); }
  .pf-b-facts dd { text-align: left; }
  .pf-film-head { grid-template-columns: minmax(0, 1fr); }
  .pf-film-spec { justify-content: flex-start; }
  .pf-film-body { grid-template-columns: minmax(0, 1fr); }
  .pf-film-facts dd { text-align: left; }
  .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stage { aspect-ratio: 4 / 5; }
  .pf-hint { display: none; }
}
@media (max-width: 820px) {
  .pf-b-grid, .pf-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .pf-b-grid, .pf-shots, .pf-shots.two { grid-template-columns: minmax(0, 1fr); }
  .pf-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-play .disc { width: 60px; height: 60px; }
}