/* Possessions press kit. Sits on top of ../assets/site.css (tokens, nav, buttons, footer, lightbox) and walks the same tones:
   sky to open, lilac for the words, night for the trailer, rose for the rooms, mist for the brand files, cream to close. */

.press { --card: rgba(255, 255, 255, 0.72); --card-edge: rgba(255, 255, 255, 0.95); }
.press h3 { margin: 0; }
.press section { scroll-margin-top: 84px; }

/* ---------- shared: cards, copy buttons, download links ---------- */
.card { position: relative; display: grid; align-content: start; gap: 16px; padding: 20px 22px 22px; border-radius: 24px; color: var(--ink);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge), 0 24px 50px -40px rgba(30, 20, 70, 0.45); }
.card-h { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.card-h .k { font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.card-h .n { font: 400 11px var(--mono); letter-spacing: 0.04em; color: var(--ink-3); opacity: 0.8; font-variant-numeric: tabular-nums; }
.card-h .copy { margin-left: auto; }
.copy { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 7px 13px 7px 11px; border-radius: 999px; font: 500 13px var(--body);
  color: var(--ink); background: rgba(30, 27, 46, 0.06); transition: background 0.4s var(--spring), transform 0.5s var(--spring), color 0.4s var(--spring); }
.copy::before { content: ""; width: 13px; height: 13px; background: currentColor; flex: none;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8.5' height='8.5' rx='2'/%3E%3Cpath d='M11 5V3.8A1.3 1.3 0 0 0 9.7 2.5H3.8a1.3 1.3 0 0 0-1.3 1.3v5.9A1.3 1.3 0 0 0 3.8 11H5'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8.5' height='8.5' rx='2'/%3E%3Cpath d='M11 5V3.8A1.3 1.3 0 0 0 9.7 2.5H3.8a1.3 1.3 0 0 0-1.3 1.3v5.9A1.3 1.3 0 0 0 3.8 11H5'/%3E%3C/svg%3E"); }
.copy:hover { background: rgba(30, 27, 46, 0.11); }
.copy:active { transform: scale(0.95); }
.copy.done { color: #fff; background: var(--live); }
.copy.done::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
                             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
.card.flash { animation: flash 0.9s var(--spring); }
@keyframes flash { 0% { box-shadow: inset 0 0 0 2px var(--live), 0 24px 50px -40px rgba(30, 20, 70, 0.45); } 100% { box-shadow: inset 0 0 0 1px var(--card-edge), 0 24px 50px -40px rgba(30, 20, 70, 0.45); } }
.card-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 4px; }
.dl { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 14px; color: var(--ink);
  padding: 8px 14px 8px 11px; border-radius: 999px; background: rgba(30, 27, 46, 0.06); transition: background 0.4s var(--spring), transform 0.5s var(--spring); white-space: nowrap; }
.dl:hover { background: rgba(30, 27, 46, 0.12); }
.dl:active { transform: scale(0.96); }
.dl svg { width: 14px; height: 14px; flex: none; }
.dl span { font: 500 10.5px var(--mono); letter-spacing: 0.08em; color: var(--ink-3); }
.txt { display: grid; gap: 0.85em; font-size: 17px; line-height: 1.6; max-width: 62ch; }
.txt p { margin: 0; }
.say { font-family: var(--display); font-variation-settings: "opsz" 96; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-size: clamp(22px, 2.1vw, 30px); text-wrap: balance; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn.ghost .ico { background: rgba(255, 255, 255, 0.1); }
.head-r { display: grid; gap: 18px; justify-items: start; }
.head-r p { font-size: 18px; opacity: 0.7; max-width: 40ch; }
.head-r .row { gap: 8px; }

/* ---------- 1. opening ---------- */
.p-hero { position: relative; padding-top: calc(env(safe-area-inset-top, 0px) + 128px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; isolation: isolate; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 80% at 70% 30%, #EEEDF1 0%, #D7D6DF 55%, #C3C2CD 100%); }
.p-hero-in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-hero-copy { container-type: inline-size; display: grid; gap: 22px; justify-items: start; }
.p-hero-copy .eyebrow { font-size: 11px; padding: 6px 12px; }
/* the name always fits its column: about 5.4em wide, so 17cqi keeps it inside with room to spare */
.p-hero h1 { font-weight: 780; letter-spacing: -0.045em; line-height: 0.9; font-size: min(132px, 17cqi); }
.p-lead { font-family: var(--display); font-variation-settings: "opsz" 48; font-weight: 560; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.25; letter-spacing: -0.015em; max-width: 26ch; color: rgba(30, 27, 46, 0.82); }
.p-meta { font: 400 12px var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.p-hero-shot { margin: 0; position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 50px 90px -50px rgba(20, 70, 120, 0.7); transform: rotate(0.0001deg); }
.p-hero-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 2. facts and words ---------- */
.p-facts, .p-screens, .p-brand, .p-awards, .p-about { padding-block: clamp(80px, 11vw, 160px); }
.p-facts-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.fact-card { position: sticky; top: 92px; }
.facts { margin: 0; display: grid; }
.facts div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--hair); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.facts dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.facts a { text-decoration: underline; text-decoration-color: rgba(30, 27, 46, 0.25); text-underline-offset: 3px; }
.words { display: grid; gap: 16px; }
.lines { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; }

/* ---------- 3. trailer ---------- */
.p-trailer { padding-block: clamp(80px, 11vw, 160px); }
.p-trailer .head p { opacity: 0.66; }
.p-player { position: relative; max-width: 1320px; margin: 0 auto; }
.p-glow { position: absolute; inset: 4%; z-index: 0; background: url("files/Possessions_Trailer_Poster.jpg") center / cover; filter: blur(70px) saturate(1.4); opacity: 0.5; border-radius: 28px; transform: translateZ(0); }
.p-player video { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 26px; background: #0B0A14; }
.p-batch { max-width: 1320px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 10px; }
.p-trailer .btn.glass { color: var(--ink); }

/* ---------- 4. screenshots ---------- */
.shots { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.shot-card { display: grid; gap: 10px; }
.shot-open { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; aspect-ratio: 16 / 9; background: #fff;
  box-shadow: 0 0 0 1px rgba(30, 27, 46, 0.05), 0 20px 50px -40px rgba(30, 20, 60, 0.5); transition: transform 0.7s var(--spring), box-shadow 0.7s var(--spring); }
.shot-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--spring); }
.shot-open:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(30, 27, 46, 0.05), 0 36px 60px -34px rgba(30, 20, 60, 0.55); }
.shot-open:hover img { transform: scale(1.04); }
.shot-open .tag { position: absolute; left: 12px; top: 12px; font: 500 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.shot-meta { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.shot-meta p { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.shot-meta .dl { padding: 7px 12px 7px 10px; font-size: 13px; background: rgba(255, 255, 255, 0.7); }
.shot-meta .dl:hover { background: #fff; }

/* lightbox: caption row carries the full-size download */
.lightbox figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; text-align: center; }
.lightbox .lb-dl { color: #fff; text-decoration: none; font: 500 12px var(--mono); letter-spacing: 0.12em; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.lightbox .lb-dl:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- 5. brand files ---------- */
.assets { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.asset { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-radius: 24px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(30, 27, 46, 0.05), 0 20px 50px -40px rgba(30, 20, 60, 0.5); }
.a-key3 { grid-column: span 4; }
.a-mark { grid-column: span 6; }
.a-icon { grid-column: span 3; }
.asset .pv { position: relative; display: grid; place-items: center; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #F4F3F7; }
.a-key3 .pv img { width: 100%; height: 100%; object-fit: cover; }
.a-mark .pv, .a-icon .pv { aspect-ratio: auto; height: 100%; min-height: 220px; }
.pv-sky { background: radial-gradient(120% 120% at 50% 30%, #C9F3FF 0%, #6FD9F3 100%) !important; }
.pv-sky img { width: 72%; height: auto; filter: drop-shadow(0 6px 14px rgba(10, 70, 100, 0.18)); }
.pv-check { background-color: #fff !important; background-image: conic-gradient(#EEEDF2 25%, #fff 0 50%, #EEEDF2 0 75%, #fff 0) !important; background-size: 18px 18px !important; }
.pv-check img { width: 62%; height: auto; filter: drop-shadow(0 14px 22px rgba(10, 60, 90, 0.25)); }
.pv-fill img { width: 100%; height: 100%; object-fit: cover; }
.asset figcaption { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; }
.asset figcaption > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.asset figcaption b { font-weight: 600; font-size: 15px; }
.asset figcaption i { font: normal 400 11.5px var(--mono); letter-spacing: 0.03em; color: var(--ink-3); }

/* ---------- 6. awards ---------- */
.sub { max-width: 1320px; margin: clamp(48px, 6vw, 80px) auto 18px !important; font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.p-awards .laurels { margin-bottom: 0; --unit: 290px; }
.p-awards .laurels .y { font-style: normal; }
.p-awards .laurels .y::before { content: " · "; }
@media (max-width: 720px) {
  .p-awards .laurels { --unit: 164px; }
  .p-awards .laurels .y { display: block; }
  .p-awards .laurels .y::before { content: none; }
}
.press-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.press-list a { display: grid; gap: 4px; padding: 16px 28px 16px 0; border-top: 1px solid var(--hair); text-decoration: none; position: relative; transition: color 0.4s var(--spring); }
.press-list a::after { content: "↗"; position: absolute; right: 4px; top: 16px; color: var(--ink-3); transition: transform 0.5s var(--spring); }
.press-list a:hover::after { transform: translate(2px, -2px); color: var(--ink); }
.press-list .o { font: 500 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.press-list .h { font-size: 16px; line-height: 1.4; font-weight: 500; }

/* ---------- 7. studio ---------- */
.p-about { padding-top: 0; }
.about-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.about-grid .card { background: rgba(255, 255, 255, 0.78); }
.about-grid .card-f { margin-top: auto; }
.contact-card .mail { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact-card .txt { gap: 4px; }

/* ---------- toast (screen readers and a quiet visual cue) ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; transition: opacity 0.4s var(--spring), transform 0.6s var(--spring); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- narrow ---------- */
@media (max-width: 1080px) {
  .p-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .fact-card { position: static; }
}
@media (max-width: 960px) {
  .p-hero-in { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-key3 { grid-column: span 6; }
  .a-key3:first-child, .a-mark { grid-column: span 12; }
  .a-icon { grid-column: span 6; }
}
@media (max-width: 720px) {
  .press .nav .btn { padding: 5px 5px 5px 14px; }
  .p-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .lines { grid-template-columns: minmax(0, 1fr); }
  .a-key3 { grid-column: span 12; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .txt { font-size: 16px; }
  .card { padding: 16px 16px 18px; border-radius: 20px; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .press-list { grid-template-columns: minmax(0, 1fr); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .p-player video { border-radius: 18px; }
  .p-batch .btn { white-space: normal; }
}
@media (max-width: 420px) {
  .a-icon { grid-column: span 12; }
}
@media (pointer: coarse) {
  .copy, .dl { min-height: 40px; }
}