.srel{max-width:1250px;margin:24px 16px;font:16px/1.7 system-ui;color:#53204a}.srel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin:20px 0}.srel-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:16px;color:inherit;text-decoration:none}.srel-card small{display:block}.srel button{font:inherit;min-height:44px;padding:8px 14px;border:1px solid #aaa;border-radius:6px;background:#fff;color:#53204a;cursor:pointer}.srel button:focus-visible,.srel a:focus-visible,#srel-stage:focus-visible{outline:3px solid #a63d92;outline-offset:3px}.srel-card img{display:block;max-width:100%;height:180px;object-fit:contain;margin:auto}.srel-open{width:100%}#srel-viewer{width:min(1300px,95vw);height:92dvh;max-width:none;max-height:none;border:0;padding:16px;background:#fef4eb;box-sizing:border-box;color:#53204a}#srel-viewer::backdrop{background:#211122dd}.srel-controls{display:flex;flex-wrap:wrap;gap:8px}#srel-stage{position:relative;overflow:hidden;height:calc(92dvh - 185px);min-height:150px;background:#eee;direction:ltr;touch-action:none;cursor:grab;margin-top:12px}#srel-image{position:absolute;max-width:none;max-height:none;transform-origin:0 0;pointer-events:none;user-select:none}.srel [hidden]{display:none!important}@media(max-width:600px){#srel-stage{height:calc(92dvh - 275px)}.srel{margin:16px 0}#srel-viewer{width:98vw;padding:10px}}
/* Phase 7.1: presentation only; Space palette from the child theme tokens. */
.srel{--brand-dark:#53204A;--brand-purple:#A63D92;--brand-soft:#F6ECF4;--brand-peach:#FFF1ED;color:var(--brand-dark)}
.srel-space-brand{font-size:18px;font-weight:800;letter-spacing:.13em;color:var(--brand-dark);margin-bottom:18px}.srel>h1{font-size:28px;line-height:1.5}.srel-project-card{display:block;overflow:hidden;border:1px solid #eadfe7;border-radius:22px;background:#fff;color:var(--brand-dark);text-decoration:none;box-shadow:0 8px 24px #53204a08;transition:box-shadow .2s,transform .2s}.srel-project-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #53204a15}.srel-project-cover{display:flex;align-items:center;justify-content:center;min-height:230px;background:linear-gradient(145deg,#F6ECF4,#fff 55%,#FFF1ED);padding:24px;box-sizing:border-box}.srel-brand-mark{display:flex;flex:none;align-items:center;justify-content:center;width:180px;height:130px;border-radius:18px;background:white;box-shadow:0 3px 16px #53204a08}.srel-brand-mark .srel-project-logo{display:block;width:auto;height:auto;max-width:148px;max-height:115px;object-fit:contain;margin:0}.srel-brand-md .srel-project-logo{max-width:180px;max-height:130px}.srel-wordmark{font-size:30px;font-weight:750;line-height:1.35;letter-spacing:-.04em;color:#53204A;text-align:center}.srel-project-info{display:grid;gap:8px;padding:24px}.srel-project-info>small{font-size:11px;letter-spacing:.16em;color:#805675}.srel-project-info>strong{font-size:24px}.srel-project-info>span{font-size:14px;color:#75566d}.srel-project-header{display:flex;align-items:center;gap:28px;padding:28px;margin:24px 0;border-radius:22px;background:linear-gradient(115deg,#FFF1ED,#fff,#F6ECF4);border:1px solid #eadfe7}.srel-project-header h2{font-size:30px;line-height:1.4;margin:6px 0}.srel-project-header p{margin:0}.srel-project-header small{font-size:12px;letter-spacing:.04em}.srel-placeholder{display:flex;align-items:center;gap:24px;padding:28px;border-radius:20px;background:#faf7fa;border:1px dashed #cfbbca;margin:24px 0}.srel-placeholder .srel-brand-mark{width:120px;height:100px;box-shadow:none}.srel-placeholder .srel-project-logo{max-width:108px;max-height:88px}.srel-placeholder .srel-wordmark{font-size:24px}.srel-placeholder h3{font-size:21px;margin:4px 0}.srel-placeholder p{margin:0;color:#725f6e;font-size:14px}.srel-state-label{font-size:12px;color:#80647b}.srel-state-quality{background:#fff8ef;border-color:#d2b792}.srel-state-review{background:#F6ECF4;border-color:#b999af}.srel-state-none{background:#f6f7f8;border-color:#cdd0d5;border-style:solid}.srel-state-none .srel-brand-mark{background:transparent}
@media(max-width:600px){.srel-project-header,.srel-placeholder{padding:20px;gap:18px;flex-direction:column;text-align:center}.srel-project-info>strong{font-size:22px}.srel-project-cover{min-height:200px}.srel-project-header h2{font-size:26px}.srel-space-brand{font-size:16px}.srel-project-card{transform:none!important}}
@media(prefers-reduced-motion:reduce){.srel-project-card{transition:none}}

/* Compact viewer chrome; the image stage receives all remaining height. */
#srel-viewer{padding:12px;overflow:hidden}#srel-viewer[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px}#srel-viewer #srel-title{font-size:22px;line-height:1.35;margin:0;font-weight:600}#srel-viewer .srel-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0}#srel-viewer .srel-controls button{font-family:inherit;font-size:13px;line-height:1.35;min-height:34px;padding:6px 10px;border:1px solid #d6cbd1;border-radius:7px;white-space:nowrap}#srel-viewer .srel-controls output{font-size:12px;line-height:1.2;padding:0 5px;font-variant-numeric:tabular-nums}#srel-viewer #srel-stage{height:auto;min-height:0;margin:0;width:100%}@media(max-width:600px){#srel-viewer{padding:10px;height:94dvh}#srel-viewer #srel-title{font-size:18px;line-height:1.35}#srel-viewer .srel-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#srel-viewer .srel-controls button{font-size:11px;min-height:36px;padding:5px 3px}#srel-viewer .srel-controls output{grid-column:1/-1;text-align:left;font-size:11px;min-height:13px;padding:0}}

/* Fullscreen contains only the active viewer surface, never the document. */
#srel-viewer[open]{display:block}#srel-viewer-surface{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;width:100%;height:100%;min-height:0;box-sizing:border-box;direction:rtl}#srel-viewer-surface:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;padding:14px;background:#19171c;color:#fef4eb;overflow:hidden}#srel-viewer-surface:fullscreen #srel-title{color:#fef4eb}#srel-viewer-surface:fullscreen #srel-stage{background:#25222a}#srel-viewer-surface:fullscreen .srel-controls button{background:#fefaf7;color:#53204a;border-color:#b9abb6}#srel-viewer-surface:fullscreen .srel-controls output{color:#fef4eb}#srel-viewer-surface::backdrop{background:#19171c}@media(max-width:600px){#srel-viewer-surface:fullscreen{padding:10px}}

/* Logos carry their own alpha; avoid a white panel behind project marks. */
.srel-brand-mark:has(.srel-project-logo){background:transparent;box-shadow:none;border-color:transparent}.srel-project-logo{background:transparent}