
:root { --editor-bg: #fbf8f2; --editor-ink: #232322; --editor-border: #cfc7bd; }
.comparison {
  position: fixed; z-index: 7; bottom: max(12px, env(safe-area-inset-bottom)); right: 12px;
  width: min(420px, calc(100% - 24px)); color: var(--editor-ink);
  font: 400 12px/1.42 'DM Sans', Helvetica, sans-serif;
}
.comparison:has(#preview-panel[hidden]) { width: auto; }
#preview-panel, #show-preview { background: var(--editor-bg); color: var(--editor-ink); border: 1px solid var(--editor-border); box-shadow: 0 4px 20px #211a1230; }
#preview-panel { padding: 9px; }
.comparison button, .comparison select, .comparison input, .comparison textarea { min-height: 31px; border: 1px solid var(--editor-border); color: var(--editor-ink); background: #fffdf8; border-radius: 0; font: inherit; }
.comparison button { padding: 4px 8px; }
.comparison button:hover { background: #eee9df; }
.comparison :is(button,select,input,textarea,a):focus-visible { outline: 2px solid #68493c; outline-offset: 2px; }
.preview-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.variant-nav { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; border: 1px solid var(--editor-border); align-items: center; text-align: center; }
.variant-nav button { display: grid; place-items: center; border: 0; }
#variant-name { font-weight: 600; }
.preview-settings { margin-block: 6px; max-height: min(48svh, 408px); overflow-y: auto; scrollbar-width: thin; }
.preview-settings details { border-block-start: 1px solid var(--editor-border); }
.preview-settings summary { display: flex; align-items: center; gap: 9px; padding: 7px 4px; list-style: none; font-weight: 600; cursor: pointer; }
.preview-settings summary::-webkit-details-marker { display: none; }
.preview-settings summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 1px solid; border-top: 1px solid; transform: rotate(45deg); }
.preview-settings details[open] > summary::before { transform: rotate(135deg); }
.editor-grid, .editor-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 8px; padding: 5px 1px 9px; }
.editor-grid label, .editor-copy label { min-width: 0; display: grid; gap: 3px; }
.editor-grid input, .editor-grid select, .editor-copy input, .editor-copy select, .editor-copy textarea { width: 100%; padding-inline: 5px; }
.editor-grid input[type=color], .editor-copy input[type=color] { padding: 2px 4px; }
.editor-copy textarea { padding-block: 5px; resize: vertical; }
.editor-copy label:first-child, .editor-content { grid-column: 1 / -1; }
#reset-field { width: max-content; grid-column: 1 / -1; }
.preview-foot { display: flex; justify-content: space-between; align-items: center; gap: 7px; }
.preview-foot a { text-decoration: underline; text-underline-offset: 3px; }
#show-preview { min-height: 37px; }

.site-header:not([data-hero="true"]) { background: var(--edit-header-bg, var(--paper)); color: var(--edit-header-ink, #11121a); }
.site-header[data-hero="true"] { background: var(--edit-header-bg, transparent); color: var(--edit-header-ink, #f9f7f3); }
.site-menu { background: var(--edit-menu-bg, var(--paper)); color: var(--edit-menu-ink, var(--ink)); }
.menu-close { color: inherit; }
.hero::before { content: ''; display: block; position: absolute; inset: 0; z-index: -1; background: var(--edit-overlay, transparent); opacity: var(--edit-opacity, .35); pointer-events: none; }
.hero-cta { background: var(--edit-button-bg,var(--paper)); color: var(--edit-button-ink,var(--ink)); border-color: var(--edit-button-bg,var(--paper)); }
.hero-cta:hover { background: var(--edit-button-ink,var(--ink)); color: var(--edit-button-bg,var(--paper)); }
.machine-stage { background: var(--edit-machine-bg, transparent); }
.motion-nav { background: var(--edit-header-bg, transparent); color: var(--edit-header-ink, var(--ink)); }
[data-custom-copy] { white-space: pre-line; overflow-wrap: anywhere; }
[data-variant="cinema"] { --paper:#f4f0e9; --ink:#2b231d; --rule:#cfc3b5; }
[data-variant="cinema"] .opening { display: grid; isolation: isolate; --crop: 61% 48%; }
[data-variant="cinema"] .opening > * { grid-area: 1 / 1; }
[data-variant="cinema"] .hero { height: 100svh; min-height: 560px; justify-items: end; }
[data-variant="cinema"] .hero::after { background: linear-gradient(88deg,#180f0ccf 4%,#190e0b75 38%,transparent 72%), linear-gradient(0deg,#170d0bac,transparent 27%); }
[data-variant="cinema"] .welcome { z-index: 1; color: #fff9f0; align-self: end; width: min(70%, 940px); pointer-events: none; padding-bottom: clamp(65px, 12svh, 160px); }
[data-variant="cinema"] .welcome-copy { text-align: left; margin-left: clamp(25px,7vw,126px); }
[data-variant="cinema"] .welcome-sub { font: 500 11px var(--sans); letter-spacing: .18em; }
[data-variant="cinema"] .opening h1 { font-size: clamp(39px, 5.5vw, 93px); letter-spacing: -.045em; margin-inline: 0; }
[data-variant="cinema"] .welcome-intro { margin: 21px 0 0; max-width: 54ch; }
[data-variant="cinema"] .studio-motif { display: none; }
[data-variant="cinema"] .hero-cta { margin: 0 clamp(24px,7vw,110px) max(12svh, 127px) 0; }


[data-variant="cinema"] .welcome { color: var(--edit-cover-ink, #fff9f0); }
@media(max-width:720px) {
  [data-variant="cinema"] .opening h1 { font-size: clamp(32px, 8.3vw, 59px); }
  [data-variant="cinema"] .welcome { width: 100%; padding-bottom: 133px; }
  [data-variant="cinema"] .welcome-copy { padding-bottom: 12px; }
  [data-variant="cinema"] .opening .hero-cta { justify-self: start; margin: 0 0 75px clamp(25px,7vw,126px); }
  .comparison { right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  #preview-panel { max-height: calc(100dvh - 28px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .comparison button, .comparison select, .preview-settings summary, #show-preview { min-height: 44px; }
  .variant-nav { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .preview-settings { max-height: min(34svh, 330px); }
  .site-footer, .motion-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .editor-grid, .editor-copy { gap: 6px; }
  .editor-grid select, .editor-copy textarea, .editor-copy input[type=number], .editor-copy select { font-size: 16px; }
}

@media (min-width: 721px) {
  [data-variant='cinema']:has(#preview-panel[hidden]) .hero-cta { margin-bottom: 12svh; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .preview-settings { max-height: 30svh; }
  #preview-panel { max-height: calc(100dvh - 28px); overflow-y: auto; }
}
.team-page { padding-top: 77px; }
.team-intro { padding-block: 6px clamp(34px, 5vw, 70px); text-align: center; }
.team-intro h1 { margin: 5px 0 0; font-size: clamp(44px, 7.3vw, 106px); }
.team-intro p { margin: 20px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.55; }
.team-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(12px,4vw,65px); width: min(980px,calc(100% - 2 * var(--frame))); margin-inline: auto; padding-bottom: clamp(54px,8vw,120px); }
.team-members img { width: 100%; height: auto; aspect-ratio: .86; object-fit: cover; object-position: center 34%; display: block; background: var(--paper); }
.team-members article > div { padding-top: 12px; }
.team-members h2 { margin: 0; font: 400 clamp(23px, 3.1vw, 43px)/1.1 var(--serif); }
.team-members article p { margin-top: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .10em; }
.team-credit { grid-column: 1 / -1; font-size: 11px; }
[data-variant="cinema"] .team-intro { text-align: left; }
[data-variant="cinema"] .team-intro p { margin-inline: 0; }
[data-variant="cinema"] .team-intro .studio-motif { justify-items: start; }
[data-variant="cinema"] .team-members { width: auto; margin-inline: var(--frame); grid-template-columns: 1.1fr .9fr; }
[data-variant="cinema"] .team-members article:nth-child(2) { margin-top: clamp(12px, 7vw, 100px); }
@media(max-width:480px) {
  .team-page { padding-top: 62px; }
  .team-members { gap: 10px; padding-bottom: 80px; }
  [data-variant="cinema"] .team-members article:nth-child(2) { margin-top: 19px; }
}

.preview-inline { margin-top: 6px; }
.preview-inline button[aria-pressed="true"] { color: var(--editor-bg); background: var(--editor-ink); }
.preview-inline p { margin-top: 5px; font-size: 11px; }
html[data-inline-mode] [data-inline-field] { pointer-events: auto; cursor: text; }
html[data-inline-mode] [data-inline-field]:hover,
html[data-inline-mode] [data-inline-field]:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; }
html[data-inline-mode] [data-inline-field][contenteditable] { outline: 1px solid currentColor; outline-offset: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }

:is([data-variant="video"], [data-variant="editoriale"]) .hero {
  background: #13201b;
}
:is([data-variant="video"], [data-variant="editoriale"]) .hero-photo { display: none; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -2; }
[data-variant="editoriale"] .opening {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 48px);
  padding: 92px var(--frame) 36px;
  background: #13201b;
}
[data-variant="editoriale"] .hero { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
[data-variant="editoriale"] .hero::after { background: linear-gradient(0deg,#10171390,transparent 38%); }
[data-variant="editoriale"] .hero-cta { margin: 0 12px 18px; min-width: 0; }
[data-variant="editoriale"] .welcome { color: var(--edit-cover-ink, #fff9f0); }
[data-variant="editoriale"] .welcome-copy { margin: 0; padding: 15px 0; text-align: left; }
[data-variant="editoriale"] .studio-motif { display: none; }
[data-variant="editoriale"] .welcome-sub { font: 500 11px/1.3 var(--sans); letter-spacing: .15em; }
[data-variant="editoriale"] .welcome h1 { font-size: clamp(32px, 4.1vw, 76px); line-height: .95; }
[data-variant="editoriale"] .welcome-intro { margin: 18px 0 0; max-width: 42ch; }
@media (max-width: 720px) {
  [data-variant="video"] .hero { height: auto; min-height: 0; padding-top: 62px; }
  [data-variant="video"] .hero-video { position: static; grid-area: 1 / 1; aspect-ratio: 16 / 9; object-fit: contain; }
  [data-variant="video"] .hero::after { display: none; }
  [data-variant="video"] .hero-cta { margin: 24px 10px; }
  [data-variant="editoriale"] .opening { grid-template-columns: 1fr; padding: 76px var(--frame) 25px; }
}

.save-review { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 8px; border-top: 1px solid var(--editor-border); padding-block: 8px; }
.save-review label { display: grid; gap: 4px; flex: 1 1 110px; min-width: 0; }
.save-review input { padding: 4px 6px; width: 100%; }
.save-review button { background: var(--editor-ink); color: var(--editor-bg); }
.save-review button:hover { background: #514840; }
.save-review button:disabled { opacity: .65; }
#save-review-status { width: 100%; margin: 0; }
#save-review-status:empty { display: none; }
.preview-foot { flex-wrap: wrap; }
@media (max-width: 720px) {
  .comparison .save-review input { min-height: 44px; font-size: 16px; }
  .preview-foot a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
}
