*{box-sizing:border-box}.cp-output{background:#f1f5f1;color:#232b28;font-family:Arial,sans-serif}.cp-web{padding:24px}.cp-web-header{position:relative;padding:0 70px 20px 0}.cp-web-header h1{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;font-size:26px;line-height:1.25}.cp-web-header h1 span{font-size:20px}.cp-web-header p{font-size:13px;color:#6d7873;margin:10px 0 0}.cp-brand{position:absolute;right:0;top:0;width:48px;height:48px;object-fit:contain}.cp-campus{width:28px;height:28px;object-fit:contain}.cp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start}.cp-card{min-width:0}.cp-card summary{list-style:none;cursor:pointer}.cp-card summary::-webkit-details-marker{display:none}.cp-card summary:focus-visible{outline:3px solid #2f6fed;outline-offset:-3px!important}.cp-grid img,.cp-empty{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}.cp-empty{background:#d4ddd7}.cp-card-details{padding:12px 0;overflow-wrap:anywhere}.cp-card-details h2{font-size:16px}.cp-card-details p,.cp-card-details a{font-size:14px;line-height:1.5}.cp-tv{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;padding:3.5%;overflow:hidden}.cp-tv .cp-grid{width:100%;gap:2%;row-gap:16px}.cp-tv .cp-empty{background:#151515}.cp-tv .cp-grid img,.cp-tv .cp-empty{border-radius:12px}.cp-tv .cp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:650px){.cp-web{padding:16px}.cp-web .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cp-web-header h1{font-size:22px}.cp-web-header h1 span{font-size:17px}.cp-tv .cp-grid{row-gap:6px}.cp-tv .cp-grid img,.cp-tv .cp-empty{border-radius:5px}}body.cp-tv-page{margin:0;background:#000;min-height:100vh;display:grid;place-items:center}body.cp-tv-page .cp-tv{width:min(100vw,177.777vh)}
body.cp-tv-page>main{padding:0;max-width:none;width:100%}body:not(.cp-tv-page){background:#f1f5f1;color:#232b28}.cp-output .cp-web-header{border:0}.cp-output .cp-web-header p{color:#6d7873}

html:has(.cp-output),html body:has(.cp-output),html body .cp-output,html body .cp-empty{background:#000!important;color:#fff!important}
html body:has(.cp-output){margin:0;min-height:100vh}
html body .cp-output{min-height:100%}
html body .cp-web-header p,html body:has(.cp-output) footer{color:#bbb!important}
html body .cp-card-details a{color:#fff}
html body:has(.cp-output) footer{background:#000!important}

/* Readable campus symbols on a black publication. */
.cp-web-header .cp-brand,.cp-web-header .cp-campus{filter:brightness(0) invert(1);display:inline-block;visibility:visible;opacity:1}

/* Explicit visibility avoids Safari/embedded browser 3D backface failures. */
.cp-web{padding:clamp(12px,2vw,24px)}
.cp-web .cp-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.cp-card{min-width:0;scroll-margin-top:20px}.cp-card-turn{position:relative}
.cp-card-front{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000;color:#fff;cursor:pointer;font:inherit;text-align:left}
.cp-card-front img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;border-radius:0}
.cp-card-hint{display:block;padding:14px 16px;font-size:14px;line-height:1.4}
.cp-card-details{min-height:360px;padding:22px;background:#000;border:1px solid #fff;border-radius:14px;color:#fff;overflow-wrap:anywhere}
.cp-card [hidden]{display:none!important}
.cp-card-details h2{font-size:24px;line-height:1.2;margin:14px 0 20px}
.cp-card-details p{font-size:16px;line-height:1.6;margin:0 0 18px}
.cp-card-details .cp-kicker{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:20px 0 0}
.cp-card-close,.cp-share,.cp-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 15px;border:1px solid #fff;border-radius:9px;background:transparent;color:#fff;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.cp-card-close{margin-bottom:8px}.cp-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}
html body .cp-card-details .cp-link{background:#fff;color:#000;font-weight:bold;border-color:#fff}
.cp-share-status{font-size:13px!important;margin:12px 0 0!important}.cp-share-fallback{width:100%;min-height:160px;font:inherit}
.cp-card button:focus-visible,.cp-card a:focus-visible{outline:3px solid #fff;outline-offset:-3px!important}

@media(max-width:1000px){.cp-web .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:600px){.cp-web .cp-grid{grid-template-columns:minmax(0,1fr);gap:24px}.cp-web-header h1{font-size:21px}.cp-web-header h1 span{font-size:18px}.cp-web-header{padding-right:48px}.cp-brand{width:36px;height:36px}.cp-card-details{padding:20px}.cp-card-details h2{font-size:25px}}

.cp-card-details{cursor:pointer}.cp-back-hint{font-size:12px;color:#fff}.cp-card-details:focus-visible{outline:3px solid #fff;outline-offset:-3px!important}

@media(prefers-reduced-motion:no-preference){.cp-card-front,.cp-card-details{animation:cp-reveal .22s ease-out}@keyframes cp-reveal{from{opacity:.25;transform:scaleX(.96)}to{opacity:1;transform:scaleX(1)}}}

.cp-share-fallback{background:#fff;color:#000;border:1px solid #000}

/* Center the 16:9 TV canvas in wide desktop windows. */
body.cp-tv-page>main{display:grid;place-items:center}

/* Both faces occupy one fixed 4:5 frame; long details scroll inside it. */
.cp-card{aspect-ratio:4/5;position:relative;perspective:1200px}
.cp-card-turn{width:100%;height:100%;position:relative}
.cp-card-front,.cp-card-details{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;box-sizing:border-box}
.cp-card-front img{width:100%;height:100%;object-fit:contain}
.cp-card-details{overflow-y:auto;overscroll-behavior:contain;padding:16px}
.cp-card-details h2{font-size:clamp(18px,1.5vw,24px);margin:12px 0}
.cp-card-details p{font-size:15px;line-height:1.45;margin-bottom:12px}
.cp-actions{margin-top:16px}
@media(prefers-reduced-motion:no-preference){
 .cp-card-front{animation:cp-turn-front .35s ease-out}
 .cp-card-details{animation:cp-turn-back .35s ease-out}
 @keyframes cp-turn-front{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
 @keyframes cp-turn-back{from{transform:rotateY(-90deg)}to{transform:rotateY(0)}}
}

/* Consistent inset and rhythm on the fixed-size reverse. */
.cp-card-details{display:flex;flex-direction:column;gap:12px;padding:16px}
.cp-card-details>*{flex-shrink:0}
.cp-card-details h2{margin:0;font-size:clamp(18px,1.35vw,22px);line-height:1.2}
.cp-card-details .cp-kicker{margin:0}
.cp-card-details .cp-info p{margin:0 0 10px;font-size:14px;line-height:1.45}
.cp-card-details .cp-info p:last-child{margin-bottom:0}
.cp-card-details .cp-actions{margin-top:auto;padding-top:4px;gap:8px}
.cp-card-details .cp-link,.cp-card-details .cp-share{padding:10px 8px;font-size:13px;line-height:1.3;min-height:44px}
.cp-card-details .cp-share-status:empty{display:none}
.cp-card-details .cp-share-status{margin:0!important}

/* Keep all reverse content together at the bottom. Auto margin collapses for long scrollable content. */
.cp-card-details>:first-child{margin-top:auto}
.cp-card-details .cp-actions{margin-top:0}