/* Real portfolio media: keep the shared typography and navigation unchanged. */
.portfolio-reel.portfolio-reel--film { width:100%;aspect-ratio:auto;background:#fff;border:0;border-radius:0;position:relative; }
.portfolio-reel--film video { display:block;width:100%;height:auto;aspect-ratio:1280/548;object-fit:contain;background:#111; }
/* Keep the whole vertical frame edge-to-edge; mobile browser chrome must not create side gutters. */
.portfolio-reel--film[data-reel-format="vertical"] video { width:100%;height:auto;aspect-ratio:9/16;margin-inline:0; }
.portfolio-reel-action { position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;border:1px solid #fff;border-radius:50%;background:#202822;color:#fff;font:16px/1 'Manrope',sans-serif;cursor:pointer; }
.portfolio-reel-action-icon,.portfolio-reel-action-icon svg { display:block; }
.portfolio-reel-action[hidden] { display:none; }
/* Touch always has a pause target; mouse/keyboard reveal it without covering the reel at rest. */
.portfolio-reel--film:not([data-reel-fallback="true"]) .portfolio-reel-action { left:auto;right:16px;top:16px;transform:none;background:#202822df;border-color:#ffffff80; }
@media (hover:hover) and (pointer:fine) {
  .portfolio-reel--film:not([data-reel-fallback="true"]):not(:hover):not(:focus-within) .portfolio-reel-action { opacity:0;pointer-events:none; }
}
/* Small screens and hybrid tablets keep the target visible with or without a mouse. */
@media (max-width:1050px), (any-pointer:coarse) {
  .portfolio-reel--film:not([data-reel-fallback="true"]):not(:hover):not(:focus-within) .portfolio-reel-action { opacity:1;pointer-events:auto; }
}
.portfolio-reel-action:focus-visible { outline:2px solid #fff;outline-offset:4px; }
.portfolio-reel--film figcaption { position:static;width:100%;max-width:1720px;padding:17px calc(var(--portfolio-gutter) + 24px);display:flex;justify-content:space-between;margin:0 auto;background:#fff;color:var(--portfolio-muted);font:10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.08em; }
.portfolio-section-links { display:flex;gap:28px;flex-wrap:wrap;margin-top:22px; }
.portfolio-section-links a { display:flex;gap:20px;align-items:center;min-height:44px;font-size:12px;border-bottom:1px solid var(--portfolio-line); }
.portfolio-grid { --mosaic-gap:32px;--mosaic-columns:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mosaic-gap) 24px;align-items:start; }
.portfolio-grid[data-mosaic] { grid-auto-rows:1px;grid-auto-flow:row dense;row-gap:0; }
.portfolio-grid .portfolio-poster { aspect-ratio:var(--portfolio-aspect,16/9); }
.portfolio-grid .portfolio-poster img { object-fit:contain; }
/* Keep the selected black-on-white Dharma frame faithful to its original. */
.portfolio-card[data-project-id="dharma-ai"] .portfolio-poster::after { display:none; }
.portfolio-grid .portfolio-card:hover img,.portfolio-grid .portfolio-card:focus-visible img { transform:none; }
.portfolio-poster { aspect-ratio:16/10; }
.portfolio-card--portrait .portfolio-poster { background:#171c19; }
.portfolio-card--portrait .portfolio-poster img { object-fit:contain; }
.portfolio-card-title { font-size:16px;line-height:1.45; }
.portfolio-card-meta { font-size:12px; }
.portfolio-duration { position:absolute;z-index:1;top:12px;right:12px;border-radius:20px;background:#142019a8;color:#fff;padding:5px 9px;font:10px/1.4 'IBM Plex Mono',monospace; }
.portfolio-media-dialog { width:min(1100px,calc(100vw - 48px)); }
.portfolio-player-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px; }
.portfolio-player-heading .portfolio-eyebrow { margin:0 0 8px;font-size:9px; }
.portfolio-player-heading h2 { margin:0;font-size:clamp(21px,3vw,32px);font-weight:450;line-height:1.2;letter-spacing:-.04em; }
.portfolio-player-heading .portfolio-dialog-close { position:static;flex:0 0 44px; }
.portfolio-media-dialog>video,.portfolio-media-dialog>img { display:block;width:100%;height:auto;max-height:65svh;object-fit:contain;background:#111; }
.portfolio-media-dialog>img { background:#f2f3ef; }
/* Fit the dialog itself to portrait footage; no wide black player around it. */
.portfolio-media-dialog[data-orientation="vertical"] { width:min(480px,calc(100vw - 32px),max(240px,calc((100svh - 180px) * var(--player-aspect,9 / 16)))); }
.portfolio-media-dialog[data-orientation="vertical"] .portfolio-player-heading { gap:12px;padding:18px 16px; }
.portfolio-media-dialog[data-orientation="vertical"] .portfolio-player-heading h2 { font-size:clamp(18px,2vw,24px); }
.portfolio-media-dialog[data-orientation="vertical"]>video { width:100%;height:auto;max-height:none;aspect-ratio:var(--player-aspect,9 / 16); }
.portfolio-player-description,.portfolio-player-feedback { margin:0;padding:16px 28px;color:var(--portfolio-muted);font-size:13px;line-height:1.75; }
.portfolio-player-feedback:empty { display:none; }
.portfolio-player-contact { position:sticky;bottom:0;z-index:2;padding:16px 28px;background:#fff;border-top:1px solid var(--portfolio-line); }
.portfolio-player-contact[hidden] { display:none; }
.portfolio-player-contact a { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 16px;border:1px solid var(--portfolio-ink,#202822);border-radius:4px;color:#fff;background:var(--portfolio-ink,#202822);font-size:14px;line-height:1.5; }
.portfolio-player-contact a:hover { background:#354039; }
.portfolio-player-contact a:focus-visible { outline:2px solid #202822;outline-offset:4px; }
.portfolio-sofia-cover { overflow:hidden;aspect-ratio:4/3;padding:0;background:#f5f3f7; }
.portfolio-sofia-cover img { width:100%;height:100%;object-fit:contain;display:block; }
.sofia-process { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0 0 28px;padding-left:46px;list-style:none; }
.sofia-process h3 { margin:0 0 10px;font-size:16px;font-weight:500; }
.sofia-process p { margin:0;font-size:13px;line-height:1.8;color:var(--portfolio-muted); }
.sofia-media-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:8px 0 32px;gap:28px 24px; }
.sofia-media-grid>li { min-width:0; }
.sofia-featured { grid-template-columns:minmax(0,1fr);padding:0; }
.sofia-featured .portfolio-poster { aspect-ratio:16/9; }
.sofia-featured .portfolio-poster img { object-fit:contain; }
.sofia-applications { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:32px 0 0;padding:0; }
.sofia-applications li { border-top:1px solid var(--portfolio-line);padding-top:16px; }
.sofia-applications h3 { margin:0 0 8px;font-size:16px;font-weight:500; }
.sofia-applications p { margin:0;color:var(--portfolio-muted);font-size:13px;line-height:1.7; }
#sofia-videos { grid-template-columns:repeat(2,minmax(0,1fr)); }
#sofia-images .portfolio-poster { aspect-ratio:4/3;background:#f5f3f7; }
#sofia-images .portfolio-poster img { object-fit:contain; }
@media(max-width:900px) { .sofia-process { padding-left:0;gap:20px; }.sofia-media-grid { gap:24px 16px; } }
@media(max-width:768px) {
  .portfolio-grid { --mosaic-columns:2;grid-template-columns:repeat(2,minmax(0,1fr));--mosaic-gap:24px;column-gap:14px; }
  .portfolio-reel--film figcaption { padding-inline:var(--mobile-gutter,20px);font-size:11px; }
  .portfolio-section-links a { font-size:14px; }
  .sofia-process p { font-size:15px; }
  .portfolio-player-description,.portfolio-player-feedback { font-size:14px; }
  .portfolio-sofia-intro { gap:24px; }
  .sofia-applications { gap:14px;margin-top:24px; }
  .sofia-applications h3 { font-size:14px; }
  .sofia-applications p { font-size:13px; }
}
@media(max-width:650px) {
  .portfolio-card-title { font-size:14px; }.portfolio-card-index { display:none; }.portfolio-card-meta { font-size:12px; }
  .portfolio-duration { top:8px;right:8px;font-size:10px;padding:4px 7px; }.portfolio-section-heading { align-items:start;flex-direction:column;gap:4px; }
  .portfolio-reel--film figcaption { padding:14px var(--mobile-gutter,20px); }.portfolio-section-links { gap:8px 24px; }
  .portfolio-media-dialog { width:calc(100vw - 20px);max-height:calc(100svh - 20px); }.portfolio-player-heading { padding:18px 16px;gap:12px; }
  .portfolio-player-heading .portfolio-eyebrow { font-size:8px; }.portfolio-player-description,.portfolio-player-feedback { padding:14px 16px; }
  .portfolio-player-contact { padding:12px 16px; }
  .portfolio-player-contact a { font-size:13px;padding:10px 12px; }
  .sofia-process,.sofia-media-grid { grid-template-columns:1fr; }.sofia-process { gap:24px; }.sofia-process p { font-size:15px; }
  .sofia-media-grid .portfolio-card-title { font-size:16px; }#sofia-images { grid-template-columns:repeat(2,minmax(0,1fr)); }#sofia-images .portfolio-card-title { font-size:13px; }
  #sofia-videos { grid-template-columns:1fr; }
  .sofia-applications { grid-template-columns:1fr;gap:12px; }
  .sofia-applications li { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:12px;padding-top:12px; }
  .sofia-applications h3 { margin:0; }
  .portfolio-sofia summary { gap:12px;font-size:15px;min-height:60px; }
}