/* Shared native media preview and open project composition. */
[data-editorial-preview] { display: block; overflow: hidden; }
[data-editorial-preview] img { transition: transform 700ms cubic-bezier(.2,.75,.25,1), filter 500ms; }
[data-editorial-preview]:is(:hover,:focus-visible) img { transform: scale(1.025); filter: saturate(1.12); }
.editorial-preview { width: min(1440px, calc(100vw - 3rem)); max-width: none; height: calc(100dvh - 3rem); max-height: calc(100dvh - 3rem); padding: 0; border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: contain; }
.editorial-preview[open] {display:flex;flex-direction:column;}
.editorial-preview::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(8px); }
.editorial-preview__surface { padding: clamp(1rem, 3vw, 2.5rem); display:flex;flex-direction:column;flex:1;min-height:0; }
.editorial-preview header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.25rem; }
.editorial-preview header h2 { margin: 0; max-width: 70%; font-size: clamp(1.1rem, 2.5vw, 1.8rem); }
.editorial-preview button { display: flex; align-items: center; gap: 1rem; min-height: 44px; border: 0; padding: .5rem; background: none; color: inherit; font: inherit; cursor: pointer; }
.editorial-preview button span:last-child { font-size: 2rem; line-height: 1; }
.editorial-preview button:focus-visible, [data-editorial-preview]:focus-visible { outline: 2px solid var(--gold, #c8a66b); outline-offset: 5px; }
.editorial-preview figure { margin: 0;display:flex;flex-direction:column;flex:1;min-height:0; }
.editorial-preview img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
.editorial-preview figcaption { padding-top: 1rem; color: var(--muted); font-size: .85rem; flex:none; }
.editorial-preview__stage {
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  min-height:0;flex:1;touch-action:pan-y;
}
.editorial-preview__stage > img {
  width:100%;height:100%;max-height:none;object-fit:contain;
  transform-origin:center;user-select:none;-webkit-user-drag:none;
}
.editorial-preview__stage:focus-visible {outline:1px solid var(--gold);outline-offset:-1px;}
.editorial-preview__stage.is-inspecting {cursor:grab;touch-action:none;}
.editorial-preview__stage.is-panning {cursor:grabbing;}
.editorial-preview [data-preview-transport] {pointer-events:none;z-index:1;}
.editorial-preview__tools {display:flex;flex:none;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:24px;padding-top:16px;}
.editorial-preview__tools p {max-width:62ch;margin:0;color:var(--muted);font-size:.75rem;line-height:1.7;}
.editorial-preview__tools > div {display:flex;align-items:center;gap:12px;flex:none;}
.editorial-preview__tools output {min-width:4ch;text-align:center;font:500 .75rem var(--font-mono);font-variant-numeric:tabular-nums;}
.editorial-preview__tools button {justify-content:center;min-width:44px;}
.editorial-preview__tools button:disabled {opacity:.35;cursor:default;}
.editorial-preview__tools button:is([data-preview-fit],[data-preview-width]) {padding-inline:16px;font-size:.75rem;border-left:1px solid var(--line);}
.editorial-preview[open] :is(header,.editorial-preview__tools,figcaption) { animation: editorial-media-chrome 450ms ease-out both; }
.editorial-preview.is-closing .editorial-preview__surface { opacity: 0; transition: opacity 180ms; }
body.editorial-preview-open { overflow: hidden; }
@keyframes editorial-media-chrome { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .editorial-preview { width: calc(100vw - 1rem); height:calc(100dvh - 1rem);max-height: calc(100dvh - 1rem); } }
@media (prefers-reduced-motion: reduce) { [data-editorial-preview] img, .editorial-preview.is-closing .editorial-preview__surface { transition: none; transform: none; } .editorial-preview[open] :is(header,.editorial-preview__tools,figcaption) { animation: none; } }
@media print { .editorial-preview { display: none !important; } }
@media(max-width:900px){
  .editorial-preview__tools {align-items:flex-start;flex-direction:column;gap:12px;margin-top:18px;}
  .editorial-preview__tools > div {width:100%;justify-content:center;gap:8px;}
}
@media(max-width:600px){
  .editorial-preview__tools > div {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
  .editorial-preview__tools > div > * {grid-column:span 2;justify-self:center;}
  .editorial-preview__tools button:is([data-preview-fit],[data-preview-width]) {grid-column:span 3;justify-self:stretch;min-width:0;}
  body.public-page[data-page-type] .editorial-preview__tools button:is([data-preview-fit],[data-preview-width]) {width:100%;align-self:stretch;}
}
/* Short landscape windows need real scrolling rather than a collapsed canvas. */
@media(max-height:500px){
  .editorial-preview__surface {overflow:auto;}
  .editorial-preview figure {flex:none;}
  .editorial-preview__stage {flex:none;height:55dvh;min-height:180px;}
}


/* Existing portfolio records, presented as an open editorial composition. */
body[data-editorial-project] :is(.portfolio-hero, .portfolio-panel, .portfolio-visual) { border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-editorial-project] .portfolio-hero { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center;width:100%; padding: clamp(3rem, 6vw, 6rem) 0; overflow: visible; }
body[data-editorial-project] .portfolio-visual { padding: 0; }
body[data-editorial-project] .portfolio-visual::before { display: none; }
body[data-editorial-project] .portfolio-visual img { border-radius: 0; object-fit: contain; }
body[data-editorial-project] .portfolio-body { gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 5vw, 5rem); }
body[data-editorial-project] .portfolio-panel { min-height: 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); }
body[data-editorial-project] .portfolio-panel p + p { margin-top: 1.25rem; }
body[data-editorial-project] .portfolio-stack-list { gap: .5rem 1.5rem; }
body[data-editorial-project] .portfolio-stack-list span { padding: 0; border: 0; border-radius: 0; font-weight: 500; }
/* Public media routes opt in; article reading pages retain their own transition behavior. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: editorial-route-out 180ms ease-out both; }
::view-transition-new(root) { animation: editorial-route-in 360ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes editorial-route-out { to { opacity: 0; } }
@keyframes editorial-route-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { body[data-editorial-project] .portfolio-hero { grid-template-columns:1fr;padding-block: 3rem; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Place the unchanged section marker in the gutter beside the open project hero. */
body[data-editorial-project] .portfolio-hero>.scene-rail {left:-44px;}

/* Case narratives use their own evidence rhythm, without paragraph cards. */
body[data-editorial-project] .portfolio-story {align-items:start;}
.portfolio-story__chapters {min-width:0;}
.portfolio-story__chapter {position:relative;border-top:1px solid var(--line);padding:32px 0 48px 44px;}
.portfolio-story__number {position:absolute;left:0;top:36px;font:500 .67rem/1.5 var(--font-mono);color:var(--green);}
.portfolio-story__chapter h2 {margin:0 0 20px;max-width:22ch;font-size:clamp(1.65rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.035em;}
.portfolio-story__chapter :is(p,.portfolio-story__copy) {margin:0;max-width:61ch;color:var(--muted);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.8;}
.portfolio-story__chapter .portfolio-story__copy > * + * {margin-top:1.25em;}
.portfolio-story__copy :is(ul,ol) {padding-left:1.25em;}
.portfolio-story__continue {border-top:1px solid var(--line);padding:28px 0 0 44px;}
.portfolio-story__continue a {color:var(--fg);text-underline-offset:6px;}
body[data-editorial-project] .portfolio-story__disciplines {position:sticky;top:130px;padding-top:32px;}
.portfolio-story__disciplines .portfolio-stack-list {margin-top:24px;gap:12px 24px;}
@media(max-width:860px){
  body[data-editorial-project] .portfolio-story {grid-template-columns:1fr;gap:36px;}
  body[data-editorial-project] .portfolio-story__disciplines {position:static;}
  .portfolio-story__chapter {padding:26px 0 36px 32px;}
  .portfolio-story__number {top:30px;}
  .portfolio-story__continue {padding-left:32px;}
}
@media print{body[data-editorial-project] .portfolio-story__disciplines {position:static;}}