/* Principe hybrid: official monochrome identity, cobalt light and soft surfaces. */
:root {
  --cobalt: #3159ff;
  --ice: #b7caff;
  --blue-paper: #edf2ff;
  --radius: 32px;
}
body { background: #f5f7fc; }
.button { border-radius: 17px; transition: background .35s, box-shadow .35s, translate .45s var(--ease); }
.button:hover { translate: 0 -2px; }
.button-dark { background: var(--cobalt); box-shadow: 0 7px 20px #3159ff18; }
.button-dark:hover { background: var(--blue); box-shadow: 0 12px 25px #3159ff28; }
.text-link { transition: color .3s, gap .45s var(--ease); }
.text-link:hover { color: var(--cobalt); gap: 49px; }
.header-program { border-radius: 16px; transition: background .35s, border-color .35s, box-shadow .35s; }
.inner-page .header-program, .home-page[data-tone=light] .header-program {
  background: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 6px 20px #3159ff20;
}
.inner-page .site-header { background: #f5f7fce8; border-color: #dbe2f34d; }
.home-page[data-tone=light] .site-header { background: #f5f7fce3; border-radius: 18px; }
.site-header nav a { transition: color .3s; }
.inner-page .site-header nav a:hover { color: var(--cobalt); }

.hero, .soul-stage { background: #090e20; }
.hero-frame, .soul-frame {
  border-radius: var(--scene-radius, 32px);
  transform: scale(var(--scene-scale, 1));
  transform-origin: center;
}
.hero-photo {
  top: -30px; height: calc(100% + 60px);
  filter: saturate(.72) brightness(.76) contrast(1.03);
  translate: 0 var(--scene-drift, 0px);
}
.hero-shade {
  background: linear-gradient(90deg, #070d27db, #07102b1a 93%),
    linear-gradient(0deg, #071335d9, transparent 62%, #101c4d4d);
}
.hero-frame::after {
  content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 85% 83%, #3159ff48, transparent 56%);
  animation: ambient-light 16s ease-in-out infinite alternate;
}
.hero-content, .hero-foot { z-index: 1; }
.hero h1 .text-line:last-child { color: #c6d6ff; }
.hero-cta { background: var(--cobalt); color: white; box-shadow: 0 10px 35px #07102b33; }
.hero-cta:hover { background: #466aff; }
.hero-foot { color: #d1dbf5; }
.screen-navigation a::before { transition: height .5s var(--ease), opacity .3s; }

.soul-frame { background: #0c142e; box-shadow: inset 0 0 0 1px #ffffff0d; }
.soul-column { background: #101a38; transition-duration: 1s, 1s; }
.soul-column + .soul-column { border-color: #b5c9ff40; }
.soul-background { filter: saturate(.65) brightness(.6); transition: transform 1.4s var(--ease), filter .95s; }
.soul-column::after { background: linear-gradient(#071127c9, #0711270a 47%, #08132ba8); }
.soul-accordion.is-expanded .soul-column:not(.is-active) .soul-background { filter: saturate(.32) brightness(.36); }
.soul-column.is-active .soul-background { filter: saturate(.95) brightness(.7); }
.soul-column.is-active::after {
  background: linear-gradient(90deg, #07102be0, #0b1e4655 72%, #0b184518),
    linear-gradient(#07102ba8, transparent 42%, #07133766);
}
.soul-column.is-active .soul-vertical { color: var(--ice); }
.soul-column.is-active .soul-expand-icon { background: var(--cobalt); border-color: var(--cobalt); color: white; }
.soul-detail h4 > span:last-child { color: var(--ice); }
.soul-line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.soul-line > span { display: block; transform: translateY(115%); transition: transform .35s var(--ease); }
.is-content-ready .soul-line > span { transform: none; transition: transform .24s var(--ease); }
.is-content-ready .soul-line:nth-child(2) > span { transition-delay: .04s; }
.soul-detail > p, .soul-tags, .soul-enter { opacity: 0; transform: translateY(14px); transition: opacity .2s, transform .25s; }
.is-content-ready .soul-detail > p, .is-content-ready .soul-tags, .is-content-ready .soul-enter { opacity: 1; transform: none; transition: opacity .18s, transform .24s var(--ease); }
.is-content-ready .soul-detail > p { transition-delay: .02s; }
.is-content-ready .soul-tags { transition-delay: .05s; }
.is-content-ready .soul-enter { transition-delay: .07s; }
.soul-enter:focus-visible { opacity: 1; transform: none; transition: none; }
.soul-tags > span { background: #b9ceff0f; border-color: #c2d4ff50; backdrop-filter: blur(8px); }
.soul-enter { border-radius: 16px; }
.soul-enter > span { color: var(--cobalt); }

.project-screen { isolation: isolate; background: #edf2ff; }
.project-screen::before {
  content: ''; position: absolute; inset: 12px; z-index: -1; border-radius: 32px; pointer-events: none;
  background: radial-gradient(ellipse at 100% 0%, #dce6ff, transparent 55%), #f8faff;
}
.project-copy h2 > span { color: var(--blue); }
.project-copy > .eyebrow { color: var(--cobalt); }
.project-visual { border-radius: 30px; box-shadow: 0 20px 45px #263f9114; }
.project-visual > img { filter: saturate(.7); transition: transform 1.3s var(--ease); }
.project-visual:hover > img { transform: scale(1.035); }
.project-visual figcaption { background: #15275cbd; border: 1px solid #c6d6ff40; backdrop-filter: blur(10px); border-radius: 10px; }
.project-photo-index { width: 65px; height: 70px; }
.project-visual .project-photo-index img { filter: brightness(0) invert(1); object-fit: contain; }
.project-screen .site-footer { background: transparent; }
.site-footer { background: linear-gradient(125deg, #0a0d19, #111e48); }

.listing-heading {
  padding: 34px; margin-bottom: 42px; border: 1px solid #e0e6f5; border-radius: 32px;
  background: radial-gradient(ellipse at 100% 100%, #dbe6ff, transparent 66%), #edf2ff;
}
.listing-heading > div { min-width: 0; }
.listing-heading h1 { font-size: clamp(64px, 8vw, 125px); }
body[data-category=tutti] .listing-heading h1 { font-size: clamp(56px, 6.8vw, 110px); }
.listing-heading .back-link { margin-bottom: 32px; }
.listing-visual { border-radius: 24px; box-shadow: 0 16px 35px #1c378f14; }
.listing-visual img { filter: saturate(.82); transition: transform 1.25s var(--ease); }
.listing-visual:hover img { transform: scale(1.045); }
.blue-period { color: var(--cobalt); }
.event-list { border: 0; display: grid; gap: 12px; }
.event-row {
  padding: 24px; border: 1px solid #dce3f0; border-radius: 24px; background: white;
  transition: background .35s, border-color .35s, box-shadow .45s, translate .45s var(--ease);
}
.event-row:hover { background: #edf2ff; border-color: #c0cff5; box-shadow: 0 13px 30px #243e8b0c; translate: 0 -3px; }
.event-thumbnail { border-radius: 17px; }
.event-thumbnail img { filter: saturate(.65); }
.event-row:hover img { filter: saturate(1); transform: scale(1.065); }
.event-row:hover .event-arrow { background: var(--cobalt); border-color: var(--cobalt); }
.event-arrow { border-color: #b8c5e6; color: var(--blue); }
.event-category { color: var(--cobalt); }
.event-filters button, .category-navigation a { background: white; border-color: #d6def0; transition: background .3s, color .3s, border-color .3s; }
.event-filters button.active, .category-navigation a[aria-current] { background: var(--cobalt); border-color: var(--cobalt); }
.event-filters button:hover, .category-navigation a:hover { border-color: #899ee4; }
.other-souls a { transition: color .3s, translate .4s var(--ease); }
.other-souls a:hover { color: var(--cobalt); translate: 0 -2px; }
.corporate-callout { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; background: linear-gradient(115deg, #182c74, #3159ff); color: white; }
.corporate-callout::after {
  content: ''; position: absolute; z-index: -1; right: 4%; top: 20px; width: 260px; height: 300px;
  background: url('/assets/principe-symbol.svg') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .1; pointer-events: none;
}
.corporate-callout > .eyebrow { color: #cbd9ff; }
.corporate-callout > p { color: #d5e0ff; }
.corporate-callout > .button { background: white; color: var(--blue); }
.project-wide { border-radius: 32px; }
.project-wide img, .project-story img { filter: saturate(.65); transition: transform 1.2s var(--ease); }
.project-wide:hover img, .project-story figure:hover img { transform: scale(1.025); }
.project-story figure { border-radius: 26px; }
.project-story h2 { color: #111e48; }

.motion-title > span { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.motion-title > span > span { display: block; animation: title-rise .9s .08s var(--ease) both; }
.motion-title > span:nth-child(2) > span { animation-delay: .18s; }
.is-entering .motion-title > span > span, .is-entering .text-line > span { animation-play-state: paused; }
.listing-description.reveal { transition-delay: .1s; }
.listing-visual.reveal { transition-delay: .14s; }
.js-ready .reveal { transition-duration: 1s; }
dialog { border-radius: 30px; box-shadow: 0 35px 100px #091a4c55; }
dialog::backdrop { background: #07132ab8; }
.dialog-visual img { filter: saturate(.85) brightness(.85); }
.sessions input:checked + span { background: var(--cobalt); border-color: var(--cobalt); }
.dialog-close { transition: background .3s, color .3s, rotate .45s; }
.dialog-close:hover { background: var(--cobalt); rotate: 90deg; }

/* Four monochrome panels and the original vector bands connect real pages. */
.page-curtain { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; color: white; }
.curtain-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.curtain-panel { margin-left: -1px; height: 100%; transform: translateY(105%); border-radius: 32px 32px 0 0; background: #080808; }
.curtain-panel:nth-child(even) { background: #080808; }
.brand-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); pointer-events: none; }
.brand-loader > svg { width: 100px; height: 104px; fill: currentColor; overflow: visible; }
.brand-beam { transform-box: fill-box; transform-origin: center bottom; }
.loader-name { font-size: 19px; letter-spacing: .05em; margin-top: 22px; }
.loader-caption { font-size: 6px; letter-spacing: .12em; margin-top: 9px; color: #bdbdbd; }
.is-entering .page-curtain, .is-leaving .page-curtain, .is-revealing .page-curtain { visibility: visible; }
.is-entering .page-curtain, .is-leaving .page-curtain { pointer-events: auto; }
.is-entering .curtain-panel { transform: none; border-radius: 0; }
.is-entering .brand-loader { opacity: 1; transform: none; }
.is-leaving .curtain-panel {
  transform: none; border-radius: 0;
  transition: transform .42s var(--ease), border-radius .32s var(--ease);
  transition-delay: calc(var(--panel) * 35ms);
}
.is-leaving .brand-loader { opacity: 1; transform: none; transition: opacity .25s .18s, transform .4s .16s var(--ease); }
.is-revealing .curtain-panel {
  transform: translateY(-105%); border-radius: 0 0 36px 36px;
  transition: transform .45s var(--ease), border-radius .4s var(--ease);
  transition-delay: calc(var(--panel) * 30ms);
}
.is-revealing .brand-loader { opacity: 0; transform: translateY(-15px); transition: opacity .18s, transform .3s var(--ease); }
.is-entering .brand-beam, .is-leaving .brand-beam, .is-revealing .brand-beam {
  animation: brand-band 1.9s calc(var(--beam) * 65ms - var(--brand-elapsed,0ms)) cubic-bezier(.45,0,.2,1) infinite both;
}
#main { transition: opacity .4s, filter .4s; }
.is-leaving #main { opacity: .65; filter: blur(2px); }

@view-transition { navigation: none; }
::view-transition-old(root) { animation: document-out .3s ease both; }
::view-transition-new(root) { animation: document-in .55s .04s var(--ease) both; }
@keyframes title-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes ambient-light { from { transform: translate(-3%, 2%) scale(.97); opacity: .6; } to { transform: translate(3%, -2%) scale(1.06); opacity: 1; } }
@keyframes brand-band { 0%,100% { opacity:.18; transform:translateY(8px) scaleY(.35); } 30%,72% { opacity:1; transform:none; } }
@keyframes document-out { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes document-in { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 1100px) {
  .listing-heading { padding: 28px; }
  .event-row { padding: 21px; gap: 24px; }
}
@media (max-width: 760px) {
  :root { --radius: 26px; }
  .hero-frame, .soul-frame { border-radius: 26px; }
  .header-program { border-radius: 12px; }
  .button { border-radius: 14px; }
  .project-screen::before { inset: 8px; border-radius: 26px; }
  .project-visual { border-radius: 21px; box-shadow: 0 10px 25px #243e8b14; }
  .project-photo-index { width: 45px; height: 47px; }
  .listing-heading { padding: 23px; border-radius: 27px; margin-bottom: 32px; gap: 24px; }
  .listing-heading h1 { font-size: clamp(52px, 12vw, 92px); }
  body[data-category=tutti] .listing-heading h1 { font-size: clamp(49px, 11vw, 85px); }
  .listing-heading .back-link { margin-bottom: 27px; }
  .listing-visual { border-radius: 19px; }
  .event-row { padding: 19px 16px; border-radius: 19px; gap: 13px; }
  .event-title { font-size: 23px; }
  .event-thumbnail { border-radius: 13px; }
  .corporate-callout { border-radius: 25px; }
  .project-wide { border-radius: 25px; }
  .project-story figure { border-radius: 23px; }
  .curtain-panel { border-radius: 24px 24px 0 0; }
  .brand-loader > svg { width: 80px; height: 84px; }
  .loader-name { font-size: 16px; margin-top: 18px; }
  .loader-caption { font-size: 5px; }
  .soul-enter { border-radius: 13px; }
}
@media (max-width: 360px) {
  .listing-heading { padding: 20px 17px; }
  .listing-heading h1 { font-size: 48px; }
  body[data-category=tutti] .listing-heading h1 { font-size: 45px; }
  .listing-heading .listing-description { font-size: 11px; }
  .event-row { padding: 18px 13px; gap: 11px; }
  .event-title { font-size: 21px; }
  .project-photo-index { width: 34px; height: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .page-curtain { display: none; }
  #main, .is-leaving #main { opacity: 1; filter: none; }
  .hero-frame, .soul-frame { transform: none; }
  .hero-photo { translate: none; }
  .soul-line > span { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}