:root{color-scheme:light;--ink:#191919;--muted:#666;--line:#ddd}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5}a{color:inherit}button,input,select{font:inherit;color:inherit}::selection{background:#ddd;color:#000}.wrap{width:100%;padding:16px 0 0}#search{display:block;width:calc(100% - 32px);margin:0 16px;border:1px solid var(--line);border-radius:0;background:#fff;padding:12px;font-size:16px;appearance:none}#search::placeholder{color:#777;opacity:1}input::-webkit-search-cancel-button{appearance:none;width:14px;height:14px;cursor:pointer;background:linear-gradient(45deg,transparent 45%,#666 45%,#666 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#666 45%,#666 55%,transparent 55%)}.controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:12px 16px 16px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip,select{padding:7px 12px;font-size:13px;border:1px solid var(--line);background:#fff;border-radius:0;cursor:pointer}.chip:hover{background:#f3f3f3}.chip[aria-pressed=true]{background:#222;color:#fff;border-color:#222}.sort-control{display:flex}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.box{display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;padding:24px;background:#fff;text-decoration:none}.box:hover{background:#f5f5f5}.box h2{margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:500;letter-spacing:-.5px}.box p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:45ch}.thumb{height:120px;background-size:cover;background-position:center}.empty{background:#fff;padding:64px 24px;text-align:center;color:#666}:focus-visible{outline:2px solid #111;outline-offset:-3px}.back{display:block;width:fit-content;font-size:13px;color:#666;text-decoration:none;margin:4px 20px 40px}.item{padding:0 20px 32px}.item h1{font-size:clamp(32px,5vw,56px);font-weight:500;letter-spacing:-1.8px;line-height:1.12;max-width:900px;margin:0 0 22px}.lead{font-size:20px;color:#666;max-width:650px;margin:0 0 36px}.detail{max-width:650px;font-size:17px;line-height:1.8;color:#444}.related{margin-top:60px}.related>h2{font-size:13px;font-weight:500;margin:0 0 16px}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.grid{grid-template-columns:1fr}.box{min-height:200px;padding:20px}.box p{max-width:none}.lead{font-size:18px}}

.box.has-image{padding:0;justify-content:flex-start}.has-image .thumb{display:block;width:100%;height:250px;object-fit:cover;background:#f5f5f5}.has-image .body{padding:20px 24px 24px}.gallery{max-width:1000px;display:grid;gap:32px;margin:32px 0 0}.gallery figure{margin:0}.gallery img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto}.gallery figcaption{font-size:13px;color:#666;margin-top:10px}@media(max-width:600px){.has-image .thumb{height:260px}.has-image .body{padding:20px}}

.box.portrait {
  position: relative;
  justify-content: center;
  padding-left: 48%;
}
.portrait .thumb {
  position: absolute;
  inset: 0 auto 0 0;
  width: 48%;
  height: 100%;
}
.portrait .body {
  min-width: 0;
  padding: clamp(12px, 2vw, 24px);
}
.box.has-image { --default-photo-edge: 250px; }
.box.has-image:not(.portrait) .thumb { height: var(--photo-edge, var(--default-photo-edge)); }
.box.portrait { padding-left: var(--photo-edge, 48%); }
.box.portrait .thumb { width: var(--photo-edge, 48%); }
@media (max-width: 600px) { .box.has-image { --default-photo-edge: 260px; } }

.box .body {
  display: grid;
  flex: 1;
  min-width: 0;
  place-items: center;
  text-align: center;
}
.box .body h2 {
  margin: 0;
  overflow-wrap: anywhere;
}


.demo-launch { margin: 12px 0; padding: 8px 14px; cursor: pointer; }
.demo-frame { display: block; width: 100%; height: min(85vh, 850px); border: 1px solid #ddd; }
.box .thumb[src="media/schulich-lion.svg"] { object-fit: contain; padding: 24px; }
.gallery img[src="media/schulich-lion.svg"] { width: 96px; }

/* The entire card uses one width-based scale, including its text. */
.box, .box.has-image, .box.has-image.portrait {
  container-type: inline-size;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-self: start;
  min-height: 0;
  min-width: 0;
  padding: 0;
  aspect-ratio: 4 / 3;
}
.box.has-image:not(.portrait) {
  grid-template-rows: var(--photo-height) minmax(0, 1fr);
}
.box.has-image.portrait {
  grid-template-columns: var(--photo-width) minmax(0, 1fr);
}
.box.has-image .thumb, .box.has-image:not(.portrait) .thumb {
  position: static;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  aspect-ratio: auto;
}
.box .body, .box.has-image .body, .box.portrait .body {
  min-height: 0;
  padding: 2.67cqw;
}
.box .body h2 {
  font-size: 4.444cqw;
  letter-spacing: -.111cqw;
}
.box .thumb[src="media/schulich-lion.svg"] {
  padding: 5.333cqw;
}

/* Opened card: photos as large as the screen allows, whole photo always visible. */
.gallery { max-width: 1400px; gap: 40px; }
.gallery img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 32px);
  object-fit: contain;
  object-position: left center;
}

/* Lines between cards are drawn by each card, so a leftover empty cell stays blank. */
.grid { background: none; border-top: 0; border-bottom: 0; }
.box { box-shadow: 0 0 0 1px var(--line); }
.box .thumb[src="media/schulich-lion.svg"] { background: #fff; }

/* Opened card photos fill the screen edge to edge. */
.gallery { max-width: none; margin: 32px -20px 0; display: grid; gap: 24px; }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { display: block; width: 100%; height: auto; max-height: none; object-fit: fill; }
.gallery figcaption { padding: 0 20px; }
.photo-row { display: flex; gap: 6px; align-items: flex-start; }
.photo-row figure { flex-basis: 0; flex-shrink: 1; }
.gallery figure.small { padding: 0 20px; }
.gallery figure.small img { width: 96px; }
@media (max-width: 600px) { .photo-row { flex-direction: column; gap: 24px; } }
.gallery video { display: block; width: 100%; height: auto; background: #000; }
.video-frame { position: relative; cursor: pointer; }
.play-badge {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.55); pointer-events: none; transition: opacity .15s;
}
.play-badge::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px;
  border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.video-frame.playing .play-badge { opacity: 0; }
.text-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }