/* Visual skin shared in spirit with the video production page.
   Layout, portrait masks, orbit geometry and motion remain in styles.css. */
:root.portfolio-minimal{
  color-scheme:light;
  --bg:#f0f1f3;--fg:#111214;--muted:#62656b;--line:#17191e29;
  --orange:#bf421d;--red:#bf421d;--surface:#fff;--surface-hover:#faf1ed;
  --solid:#111214;--on-solid:#f7f7f7;--primary-bg:#bf421d;--primary-fg:#fff;
  --service-highlight:#ffd1b8;--service-highlight-border:#df693b;--service-highlight-muted:#713c28;
  --soft-shadow:0 14px 32px #1112140d;
}
:root.portfolio-minimal[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111214;--fg:#f0f1f3;--muted:#a7a9b0;--line:#f0f1f32b;
  --orange:#ff8149;--red:#ff8149;--surface:#1b1d20;--surface-hover:#29211e;
  --solid:#f0f1f3;--on-solid:#111214;--primary-bg:#ff8149;--primary-fg:#111214;
  --service-highlight:#6d361f;--service-highlight-border:#ff9a65;--service-highlight-muted:#ffe4d6;
  --soft-shadow:0 14px 32px #00000026;
}
.portfolio-minimal body{font-family:Manrope,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.portfolio-minimal body:before{background:none;opacity:0}
.portfolio-minimal .hero-glow,.portfolio-minimal .contact-glow{background:none;box-shadow:none;filter:none}
.portfolio-minimal .header nav{color:var(--fg);font-size:14px;gap:26px;background:transparent;border-color:var(--line);box-shadow:none;backdrop-filter:none}
.portfolio-minimal .header .brand img{width:158px}
.portfolio-minimal .header nav a:hover{color:var(--orange)}
.portfolio-minimal .header nav .production-nav-link{color:var(--orange)}
.portfolio-minimal .header nav .mobile-contact-link{color:var(--orange)}
.portfolio-minimal .eyebrow,.portfolio-minimal .small-label{color:var(--muted);font-weight:500}
.portfolio-minimal .eyebrow i{background:var(--orange);box-shadow:none}
.portfolio-minimal .hero-text h1{font-weight:500;text-transform:uppercase;letter-spacing:-.055em}
.portfolio-minimal h2{font-weight:400;letter-spacing:-.045em;text-transform:uppercase}
.portfolio-minimal h1 em,.portfolio-minimal h2 em{
  color:var(--orange);background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
.portfolio-minimal .hero-text h1 em{color:var(--orange)}
.portfolio-minimal .hero-text>p{color:var(--muted)}
.portfolio-minimal .hero-text .hero-mobile-subtitle{color:var(--muted)}
.portfolio-minimal .glass{
  background:var(--surface);border:1px solid transparent;box-shadow:none;backdrop-filter:none;
}
.portfolio-minimal .button,.portfolio-minimal .nav-contact{
  border-color:var(--line);background:transparent;color:var(--fg);border-radius:100px;box-shadow:none;font-weight:500;
}
.portfolio-minimal .button.primary{
  background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg);box-shadow:none;
}
.portfolio-minimal .button:before,.portfolio-minimal .nav-contact:before,.portfolio-minimal .filters button:before{
  background:var(--primary-bg);
}
.portfolio-minimal .button:is(:hover,:focus-visible),
.portfolio-minimal .header .nav-contact:is(:hover,:focus-visible){
  border-color:var(--primary-bg);color:var(--primary-fg);box-shadow:none;
}
.portfolio-minimal .theme-toggle{
  color:var(--fg);background:transparent;border-color:var(--line);box-shadow:none;
}
.portfolio-minimal .theme-toggle:hover{color:var(--orange);border-color:var(--orange);background:var(--surface)}
.portfolio-minimal .burger{border-color:var(--line);background:transparent;color:var(--fg);box-shadow:none}
.portfolio-minimal .burger span{background:var(--fg)}

/* Flat orbit tiles. Their dimensions, stacking and transforms are unchanged. */
.portfolio-minimal .app-icon{
  background:var(--surface);color:var(--orange);border-color:var(--line);box-shadow:var(--soft-shadow);backdrop-filter:none;
}
.portfolio-minimal .app-orbit{stroke:var(--orange);stroke-opacity:.16}

.portfolio-minimal .showcase-card{background:var(--surface);box-shadow:var(--soft-shadow);filter:none}
.portfolio-minimal .showcase-card:is(:hover,:focus-visible){box-shadow:0 18px 36px #11121420}
.portfolio-minimal .showcase-controls{color:var(--muted);border-color:var(--line)}
.portfolio-minimal .showcase-label{color:var(--fg);font-weight:500}
.portfolio-minimal .showcase-controls a{color:var(--fg)}
.portfolio-minimal .showcase-controls a:hover{color:var(--orange)}

.portfolio-minimal .section-heading{margin-bottom:42px}
.portfolio-minimal .section-heading h2{font-size:clamp(32px,3.5vw,50px);font-weight:600;line-height:1.15}
.portfolio-minimal .service-grid{gap:18px}
.portfolio-minimal .service{border-radius:28px;background:var(--surface);color:var(--fg);border-color:transparent;box-shadow:none}
.portfolio-minimal .service:before{background:none}
.portfolio-minimal .service:after{background:var(--service-highlight)}
.portfolio-minimal .service h3{font-weight:500;letter-spacing:-.04em}
.portfolio-minimal .service p,.portfolio-minimal .service .small-label{color:var(--muted)}
.portfolio-minimal .service .service-symbol{background:none;color:var(--orange);text-shadow:none}
.portfolio-minimal .service>a{color:var(--fg);border-color:var(--line)}
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered){color:var(--fg);border-color:var(--service-highlight-border);box-shadow:0 0 0 1px var(--service-highlight-border);background:var(--surface)}
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered) p,
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered) .small-label,
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered) .tags span{color:var(--service-highlight-muted)}
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered)>a{color:var(--fg);border-color:var(--service-highlight-border)}
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered) .service-symbol{color:var(--orange);background:none}
.portfolio-minimal .tags span{background:transparent;color:var(--muted);border-color:var(--line);box-shadow:none}
.portfolio-minimal .service:is(:hover,:focus-within,.is-centered) .tags span{background:transparent;border-color:var(--service-highlight-border)}

.portfolio-minimal .work-section .portfolio-note{color:var(--muted)}
.portfolio-minimal .portfolio-note:before{
  background-color:#c94722;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 10v7M12 6.5h.01'/%3E%3C/svg%3E");
  background-size:19px 19px;background-position:center;background-repeat:no-repeat;box-shadow:none;
}
.portfolio-minimal .filters button{background:transparent;border-color:var(--line);color:var(--fg);box-shadow:none;font-weight:500}
.portfolio-minimal .filters button span{color:var(--muted)}
.portfolio-minimal .filters button[aria-pressed=true]{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.portfolio-minimal .filters button[aria-pressed=true] span{color:var(--on-solid)}
.portfolio-minimal .filters button:is(:hover,:focus-visible){color:var(--primary-fg);border-color:var(--primary-bg);box-shadow:none}
.portfolio-minimal .filters button:is(:hover,:focus-visible) span{color:var(--primary-fg)}
.portfolio-minimal .filters .filter-production-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--primary-bg);border-radius:30px;padding:12px 18px;color:var(--primary-fg);background:var(--primary-bg);font:500 12px Manrope,Arial,sans-serif;transition:filter .25s ease}
.portfolio-minimal .filters .filter-production-link:is(:hover,:focus-visible){filter:brightness(1.08)}
@media(min-width:1001px){.portfolio-minimal .filters .filter-production-link{font-size:16px}}
@media(max-width:700px){.portfolio-minimal .filters .filter-production-link{min-height:50px;padding:14px 17px;font-size:15px}}
.portfolio-minimal .work-section.has-design-filters>.filters{margin-bottom:12px}
.portfolio-minimal .design-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.portfolio-minimal .design-filters[hidden]{display:none}
.portfolio-minimal .design-filters button{border:1px solid var(--line);border-radius:30px;padding:10px 16px;min-height:42px;background:transparent;color:var(--muted);font-size:14px;font-weight:500;line-height:1.4;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.portfolio-minimal .design-filters button span{margin-left:8px;font-size:12px}
.portfolio-minimal .design-filters button[aria-pressed=true]{color:var(--on-solid);background:var(--solid);border-color:var(--solid)}
.portfolio-minimal .design-filters button:is(:hover,:focus-visible){border-color:var(--orange)}
.portfolio-minimal .portfolio-empty{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
@media(min-width:1001px){.portfolio-minimal .design-filters{margin-bottom:48px}}
.portfolio-minimal .project{color:var(--fg)}
.portfolio-minimal .project-meta h3{font-weight:500;color:var(--fg)}
.portfolio-minimal .project-sub{color:var(--muted)}
@media(min-width:701px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .portfolio-minimal .projects-grid .project{position:relative;transform-origin:center;transition:scale .35s cubic-bezier(.2,.65,.3,1)}
  .portfolio-minimal .projects-grid .project:is(:hover,:focus-within){scale:1.03;z-index:1}
}
.portfolio-minimal .art-real{background:var(--surface)}
.portfolio-minimal .work-carousel-controls button{color:var(--fg);background:transparent;border-color:var(--line);box-shadow:none}
.portfolio-minimal .work-carousel-controls button:not(:disabled):hover{color:var(--orange);border-color:var(--orange)}

.portfolio-minimal .about-photo{border-color:transparent;border-radius:28px;background:var(--surface);box-shadow:none}
.portfolio-minimal .about-copy h2{font-weight:600}
.portfolio-minimal .about-copy>p{color:var(--muted)}
.portfolio-minimal .about-copy>p.about-note{
  color:var(--muted);background:var(--surface);border:1px solid transparent;border-radius:24px;box-shadow:none;
}
.portfolio-minimal .process-grid{gap:20px}
.portfolio-minimal .process-grid article{padding:28px;border:1px solid var(--line);border-radius:28px;background:transparent;box-shadow:none}
.portfolio-minimal .process-grid article>span{
  color:var(--orange);background:transparent;border:1px solid var(--line);box-shadow:none;font-weight:500;
}
.portfolio-minimal .process-grid h3{color:var(--fg);font-weight:500;letter-spacing:-.035em}
.portfolio-minimal .process-grid p{color:var(--muted)}
.portfolio-minimal .contact{background:var(--surface);border-color:var(--line)}
.portfolio-minimal .contact h2{font-weight:400}
.portfolio-minimal .contact p{color:var(--muted)}
.portfolio-minimal .footer{color:var(--muted);border-color:var(--line)}
.portfolio-minimal .footer-socials .social-link{color:var(--fg);background:transparent;border-color:var(--line);box-shadow:none}
.portfolio-minimal .footer-socials .social-link:is(:hover,:focus-visible){color:var(--orange);border-color:var(--orange);box-shadow:none}

/* The existing dialog animation, carousel controls and 3:4 artwork stay intact. */
.portfolio-minimal #project-dialog{background:var(--surface);color:var(--fg);border-color:var(--line);border-radius:26px;box-shadow:0 24px 80px #00000020}
.portfolio-minimal #project-dialog::backdrop{background:#11121499;backdrop-filter:blur(6px)}
.portfolio-minimal #project-dialog .dialog-top{color:var(--muted);background:var(--surface)}
.portfolio-minimal #project-dialog .dialog-top button,
.portfolio-minimal #project-dialog .dialog-navigation button{color:var(--fg);background:transparent;border-color:var(--line);box-shadow:none}
.portfolio-minimal #project-dialog .dialog-content>p{color:var(--muted)}
.portfolio-minimal #project-dialog .dialog-info h2{font-weight:400}
.portfolio-minimal #project-dialog #dialog-extras .project-site-link{color:var(--fg);background:transparent;border-color:var(--line);box-shadow:none;border-radius:100px}
.portfolio-minimal #project-dialog #dialog-extras .project-site-link:is(:hover,:focus-visible){color:var(--primary-fg);border-color:var(--primary-bg);box-shadow:none}
.portfolio-minimal #project-dialog .tags span{color:var(--muted);background:transparent;border-color:var(--line)}

@media(min-width:1001px){
  .portfolio-minimal .section{padding-top:clamp(144px,11.2vw,184px)}
  .portfolio-minimal .section-heading{margin-bottom:64px;row-gap:24px}
  .portfolio-minimal .work-section .filters{gap:12px;margin-bottom:48px}
  .portfolio-minimal .projects-grid{gap:56px 28px}
  .portfolio-minimal .process-grid{margin-top:48px}
  .portfolio-minimal .process{padding-bottom:clamp(144px,11.2vw,184px)}
  .portfolio-minimal .contact{padding-block:112px}
  .portfolio-minimal .contact h2{font-size:clamp(64px,6vw,90px);letter-spacing:-.05em}
}
@media(min-width:701px) and (max-width:1250px){
  .portfolio-minimal .header .brand img{width:150px}
  .portfolio-minimal .header nav{font-size:14px;gap:18px}
}
@media(max-width:1000px) and (min-width:701px){
  .portfolio-minimal .process-grid article{padding:22px 18px}
  .portfolio-minimal .process-grid h3{font-size:19px}
}
@media(max-width:700px){
  .portfolio-minimal .header .brand img{width:124px}
  .portfolio-minimal .header nav{gap:0;font-size:16px;background:var(--surface);border-color:var(--line);border-radius:20px;box-shadow:0 18px 35px #1112140d}
  .portfolio-minimal .header nav a{border-color:var(--line)}
  .portfolio-minimal .header nav a:hover{color:var(--orange)}
  .portfolio-minimal .section-heading{margin-bottom:30px}
  .portfolio-minimal .section-heading h2{font-size:clamp(29px,7.5vw,38px)}
  .portfolio-minimal .service{border-radius:20px}
  .portfolio-minimal .about-photo{border-radius:20px}
  .portfolio-minimal .about-copy>p.about-note{border-radius:20px}
  .portfolio-minimal .process-grid article{padding:24px;border-radius:20px}
  .portfolio-minimal .process-grid h3{font-size:20px}
  .portfolio-minimal #project-dialog{border-radius:22px}
}