/* Getting started: three routes shown as real, designed pages for one invented museum,
   each on a 1280x800 canvas scaled into a browser frame. */
.rtv{border-radius:8px;overflow:hidden;background:#e9eaee;border:1px solid #dcdee4}
.rtv-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#e9eaee;border-bottom:1px solid #dcdee4}
.rtv-bar i{width:9px;height:9px;border-radius:50%;background:#cfd1d8}
.rtv-bar span{margin:0 auto;width:70%;text-align:center;font-size:11px;color:#5e6270;background:#fff;padding:3px 10px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtv-view{position:relative;aspect-ratio:1280/800;overflow:hidden;background:#fff}
.rtv-stage{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0}
.rtv-stage img{display:block}
.rt h3{margin-top:22px}

/* 1 · components inside the museum's own site: the museum's design, a Folium search in its content column */
.r1{height:100%;background:#fff;color:#14232e;font-family:'Source Serif 4',Georgia,serif}
.r1 header{display:flex;align-items:center;gap:44px;height:84px;padding:0 56px;border-bottom:1px solid #d8dde2}
.r1 header b{font-size:26px;font-weight:600;letter-spacing:-.01em}
.r1 nav{display:flex;gap:30px;font:500 16px Inter,sans-serif;color:#40525f}
.r1 nav .on{color:#14232e;border-bottom:2px solid #0e6f74;padding-bottom:4px}
.r1 header em{margin-left:auto;font:600 15px Inter,sans-serif;font-style:normal;background:#0e6f74;color:#fff;padding:12px 20px}
.r1-body{display:grid;grid-template-columns:240px 1fr;gap:56px;padding:44px 56px}
.r1 aside{display:flex;flex-direction:column;gap:12px;font:15px Inter,sans-serif;color:#40525f}
.r1 aside h6{font:700 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7b8a95;margin:0 0 6px}
.r1 aside .on{color:#0e6f74;font-weight:600}
.r1 main h2{font-size:44px;font-weight:600;margin:0;letter-spacing:-.015em}
.r1 main>p{font-size:19px;color:#40525f;margin:10px 0 26px}
.r1-comp{position:relative;border:1.5px dashed #2742c9;padding:26px 26px 22px}
.r1-tag{position:absolute;left:-1.5px;top:-24px;font:700 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:#2742c9;color:#fff;padding:5px 10px}
.r1-q{display:flex;border:1px solid #14232e;font:20px Inter,sans-serif}
.r1-q span{flex:1;padding:14px 18px}
.r1-q b{background:#14232e;color:#fff;font-weight:600;padding:14px 24px}
.r1-f{display:flex;gap:8px;margin:16px 0 20px;font:14px Inter,sans-serif}
.r1-f i{font-style:normal;padding:7px 12px;border:1px solid #c9d1d7;color:#40525f}
.r1-f i.on{background:#14232e;border-color:#14232e;color:#fff}
.r1-res{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.r1-res img{width:100%;height:170px;object-fit:cover;object-position:top;border:1px solid #e3e7ea}
.r1-res b{display:block;font-size:17px;font-weight:600;margin-top:10px;line-height:1.2}
.r1-res span{font:13px Inter,sans-serif;color:#6a7883}

/* 2 · a library site in the museum's identity: same type and colours, its own structure */
.r2{height:100%;background:#f6f4ef;color:#14232e;font-family:'Source Serif 4',Georgia,serif}
.r2 header{display:flex;align-items:center;gap:44px;height:84px;padding:0 56px;background:#14232e;color:#fff}
.r2 header b{font-size:24px;font-weight:600}
.r2 header b s{text-decoration:none;font:500 13px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7fd3d6;margin-left:10px;vertical-align:3px}
.r2 nav{display:flex;gap:28px;font:500 16px Inter,sans-serif;color:#c6d2da}
.r2 header em{margin-left:auto;font:14px Inter,sans-serif;font-style:normal;color:#c6d2da}
.r2-hero{display:grid;grid-template-columns:1fr 560px;gap:56px;align-items:center;padding:48px 56px 36px}
.r2-copy h2{font-size:58px;line-height:1.02;font-weight:600;letter-spacing:-.02em;margin:0}
.r2-copy p{font-size:20px;line-height:1.5;color:#40525f;margin:18px 0 26px}
.r2-q{font:18px Inter,sans-serif;color:#6a7883;background:#fff;border:1px solid #14232e;padding:16px 18px}
.r2 figure{margin:0}
.r2 figure img{width:100%;height:330px;object-fit:cover;border:1px solid #ddd8cc}
.r2 figcaption{font:13px Inter,sans-serif;color:#6a7883;margin-top:8px}
.r2-row{padding:0 56px}
.r2-row h5{font:700 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7b8a95;margin:0 0 14px;padding-top:18px;border-top:1px solid #ddd8cc}
.r2-row div{display:flex;gap:18px}
.r2-row img{height:178px;width:auto;border:1px solid #ddd8cc}

/* 3 · a new website, designed around the collection */
.r3{height:100%;background:#0e2a33;color:#f3efe6;font-family:Inter,sans-serif}
.r3 header{display:flex;align-items:center;gap:48px;padding:26px 52px}
.r3 header b{font-size:18px;font-weight:800;line-height:1;letter-spacing:.04em}
.r3 nav{display:flex;gap:30px;font-size:16px;color:#bcd0d4}
.r3 header em{margin-left:auto;font-style:normal;font-size:14px;color:#7fd3d6}
.r3-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;padding:0 52px;height:650px}
.r3-lead{position:relative;overflow:hidden;background:#e9e2cf}
.r3-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.r3-lead div{position:absolute;left:0;right:0;bottom:0;padding:120px 36px 34px;background:linear-gradient(180deg,rgba(14,42,51,0),rgba(14,42,51,.92) 55%)}
.r3-lead span,.r3-card span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7fd3d6}
.r3-lead h2{font-family:'Source Serif 4',Georgia,serif;font-size:62px;line-height:1;font-weight:600;margin:10px 0 12px}
.r3-lead p{font-size:18px;line-height:1.45;color:#d7e2e4;margin:0;max-width:560px}
.r3-side{display:grid;grid-template-rows:1fr 1fr auto;gap:20px}
.r3-card{display:grid;grid-template-columns:150px 1fr;background:#163a45;overflow:hidden}
.r3-card img{width:100%;height:100%;object-fit:cover}
.r3-card div{padding:22px 22px}
.r3-card b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:26px;line-height:1.15;font-weight:600;margin-top:8px}
.r3-visit{background:#7fd3d6;color:#0e2a33;padding:22px 24px}
.r3-visit b{display:block;font-size:22px}
.r3-visit span{font-size:15px}

@media (max-width:860px){.rtv{border-radius:6px}}