:root { --pvc-edge:#b3cddc; --thread:#b385a4; --silver:#94a6b2; }
.tactile-ornament { position:absolute; display:block; pointer-events:none; }
.silver-clip { width:26px; height:74px; filter:drop-shadow(2px 3px 2px #4f6b8033); }
.silver-clip svg { display:block; width:100%; height:100%; overflow:visible; }
.silver-clip path:first-child { stroke:#8598a5; stroke-width:3.1; }
.silver-clip path:last-child { stroke:#fbfeff; stroke-width:1.15; }

/* Clear covers sit behind the original hand-drawn pages. */
.book-scene .spellbook { isolation:isolate; }
.book-sleeve { inset:4% -2% 1% 3%; z-index:-1; border:1px solid #b9d3e1; border-radius:10px 20px 12px 8px; transform:rotate(-1.8deg); background:linear-gradient(119deg,#e1f0f570,#fff9 18%,#dbedf430 19%,#e0edf560 73%,#ffffffa0 74%,#e1edf650 77%); box-shadow:inset 0 0 0 5px #f8fdffb3,0 12px 28px #50758d12,6px 8px 0 #deebf34a; }
.sleeve-seam { position:absolute; inset:8px; border:1px dashed #b6cedd; border-radius:7px 14px 9px 6px; opacity:.75; }
.sleeve-corner { position:absolute; right:5px; bottom:5px; width:65px; height:65px; border-right:2px solid #fff; border-bottom:2px solid #fff; border-radius:0 0 10px; }
.book-fastener { top:6%; right:7%; z-index:3; transform:rotate(21deg); }
.book-fabric-tab { top:25%; right:-4%; padding:14px 11px 14px 8px; color:#9a5780; font:11px Georgia,serif; background:#f4dfeb; border:1px dashed #bc94ab; border-radius:0 4px 4px 0; transform:rotate(-2deg); z-index:-1; box-shadow:3px 3px 0 #d5e6ef80; }
.potion-visit { border:1px dashed #bd91ad; border-radius:46% 54% 50% 45%; background:#fff8fc; box-shadow:1px 2px 0 #c4dae980; }
.potion-visit svg { width:22px; height:22px; }

/* The content room is a loose-leaf journal, not another poster deck. */
.media-room-hero.tactile-journal { background:#e1edf5; padding:65px 7% 80px; border:1px solid #c0d6e3; border-radius:5px 15px 7px 5px; box-shadow:inset 0 0 0 7px #f5fbfe80,5px 7px 0 #dbe9f12e; }
.tactile-journal .media-room-backdrop>img { opacity:.1; }
.tactile-journal .media-room-backdrop>span { opacity:.65; background-color:#edf6fb; background-image:linear-gradient(#b8d3e128 1px,transparent 1px),linear-gradient(90deg,#b8d3e128 1px,transparent 1px); background-size:24px 24px; }
.media-room-hero.tactile-journal::after { inset:12px; border-radius:4px 10px 5px 4px; border-style:dashed; border-color:#8cadbf66; }
.tactile-journal .media-room-copy { padding:30px 28px 36px; background:#fcfdfe; border:1px solid #d9e4eb; box-shadow:5px 7px 0 #f8fcffb3,10px 13px 28px #52738a12; transform:rotate(-1.1deg); }
.tactile-journal .media-room-copy::after { content:""; position:absolute; inset:auto 18px 10px; height:20px; background:url('./assets/stitch-lace.svg') repeat-x center; opacity:.65; pointer-events:none; }
.tactile-journal .media-room-lead { font-size:39px; }
.notebook-binding { inset:17% auto 17% 12px; width:25px; display:flex; flex-direction:column; justify-content:space-between; z-index:5; }
.notebook-binding i { width:28px; height:13px; border:2px solid #a5b6c1; border-radius:50%; background:linear-gradient(180deg,#f7fdff,#ccdbe4 35%,#f9fdff 46%,#96aab7 100%); box-shadow:1px 2px 3px #4d718f30; transform:translateX(-10px); }
.notebook-edge { inset:28px 28px 25px auto; width:1px; border-right:1px dashed #adc8d8; opacity:.7; }
.tactile-journal .media-room-paper { border:1px solid #a8c6d8; padding:16px 13px 19px; background:#fbfdffdf; border-radius:5px 8px 4px 5px; box-shadow:inset 0 0 0 4px #f4fbff,0 15px 24px #4a6c8130,5px 6px 0 #d2e5ef75; }
.paper-fastener { right:12px; top:-20px; z-index:4; width:20px; height:60px; transform:rotate(18deg); }
.paper-1 .paper-fastener { right:auto; left:8px; transform:rotate(-14deg); }
.paper-2 .paper-fastener { display:none; }
.pvc-reflection { inset:5px; z-index:3; border:1px solid #fff9; border-radius:3px; background:linear-gradient(122deg,transparent 34%,#fff5 35%,#fff0 42%,transparent 68%,#ffffff70 69%,transparent 73%); opacity:.48; transition:opacity .35s; }
.media-room-paper:hover .pvc-reflection { opacity:.9; }
.media-room-nav>a { position:relative; border-bottom-style:dashed; }
.media-room-nav>a::after { content:""; position:absolute; inset:auto 10px -4px; height:3px; border-bottom:1px solid #fff; }
.tactile-note .media-note-tag,.tactile-note .media-archive-tab { padding:7px 14px; width:max-content; max-width:100%; border:1px dashed #b7cddb; background:#e7f1f7; border-radius:2px; box-shadow:2px 3px 0 #d8e7f14f; }
.tactile-note:nth-child(even) .media-note-tag { background:#f6e7f0; border-color:#cfadc2; }
.tactile-note .work-figure,.journey-gallery .work-figure { position:relative; }
.photo-corners { inset:0; z-index:3; border:0; }
.photo-corners::before,.photo-corners::after { content:""; position:absolute; width:23px; height:23px; background:linear-gradient(135deg,#a1b4c0,#f8fdff 43%,#b7c8d2 48%,#ebf3f8); clip-path:polygon(0 0,100% 0,0 100%); filter:drop-shadow(1px 1px 1px #365b7340); }
.photo-corners::before { left:-1px; top:-1px; }
.photo-corners::after { right:-1px; bottom:-1px; rotate:180deg; }
.media-room-chapter>header { border-top:1px dashed #b8cedb; }
.media-room-chapter-number { font-family:Georgia,serif; text-shadow:1px 1px #fff; }

/* Individual transparent sleeves preserve every artwork's original proportions. */
.graphic-gallery .gallery-filters { gap:8px; padding-top:8px; }
.graphic-gallery .gallery-filters button { position:relative; border:1px solid #c6dbe6; border-bottom:0; border-radius:5px 5px 0 0; background:#e7f1f6; box-shadow:inset 0 3px 0 #fff9; padding:13px 10px; }
.graphic-gallery .gallery-filters button[aria-pressed="true"] { background:#f5e5ef; border-color:#c995b4; }
.graphic-gallery .gallery-filters button::after { content:""; position:absolute; inset:6px 5px auto; border-top:1px dashed #a9c5d5; opacity:.65; }
.graphic-gallery .gallery-toolbar { background:transparent; border-top:0; }
.graphic-gallery.is-poster-view .poster-card .work-figure>button.tactile-card { position:relative; padding:13px 10px 18px; border:1px solid var(--pvc-edge); border-radius:6px 10px 5px 6px; background:#f4faff5c; box-shadow:4px 5px 0 #d5e5f04d,0 10px 20px #57778d12; }
.tactile-card .poster-sleeve { inset:5px; border:1px solid #ffffffd9; border-radius:3px 6px 3px 4px; z-index:2; overflow:hidden; }
.poster-sleeve::before { content:""; position:absolute; inset:auto 4px 4px; border-bottom:1px dashed #9bbdce9c; }
.poster-sleeve>i { position:absolute; width:180%; height:24%; left:-40%; top:-32%; background:linear-gradient(180deg,transparent,#ffffff5c,transparent); rotate:-28deg; transition:transform .7s cubic-bezier(.16,.7,.2,1); }
.poster-card.is-centred:hover .poster-sleeve>i { transform:translateY(390%); }
.graphic-gallery.is-poster-view .poster-card .work-figure img { box-shadow:0 3px 9px #42687c12; border-radius:2px; }
.graphic-gallery.is-poster-view .gallery-bottom { border-block-style:dashed; }
.poster-card-index button { background:#fafdff80; border-color:#c4d9e440; border-bottom:1px dashed #a8c8d9; }
.poster-card-index button[aria-pressed="true"] { box-shadow:2px 3px 0 #e4c9da80; }
.works-scene[data-project="graphic"]>.works-heading { border-bottom:0; padding:18px 0 10px; }

/* Film pockets have their own construction and stay quiet during playback. */
.screening-room[data-view="index"] .reel-window { background:#dcebf3; box-shadow:inset 0 0 0 4px #f8fcff8a,5px 6px 0 #cfdfeb66,0 16px 24px #4665801c; border-radius:5px 12px 5px 4px; }
.screening-room[data-view="index"] .screening-reel:nth-child(2n) .reel-window { background:#eedeea; }
.film-sleeve { inset:4px; border:1px solid #ffffffb0; border-radius:3px 8px 3px 2px; z-index:2; background:linear-gradient(127deg,transparent 28%,#ffffff30 29%,transparent 34%); }
.screening-room[data-view="index"] .film-sleeve::before { content:""; position:absolute; top:0; left:20px; right:20px; border-top:1px dashed #91b0c2; }
.screening-room[data-view="player"] .film-sleeve { background:none; opacity:.5; }
.screening-room.is-watching .film-sleeve { opacity:0; }
.screening-intro { border-top:1px dashed #a6c4d4; }
.reel-heading time { border:1px dashed #a9c3d2; padding:5px 8px; background:#fafdff; }
.screening-room[data-view="player"] .reel-heading time { border:0; padding:0; background:none; }

.journey-header { position:relative; padding:45px 0 30px; border-block:1px dashed #b4cad8; }
.field-record-tab { top:-11px; left:0; padding:4px 12px; border:1px dashed #bd91ae; background:#f8eaf2; color:#a25984; font:10px/1.4 Georgia,serif; }
.field-fastener { top:-10px; right:20px; width:21px; height:62px; transform:rotate(24deg); }
.roadmap-stitch { stroke:#f5fbfe; stroke-width:6px; stroke-dasharray:2 8; stroke-linecap:butt!important; }
.station-pin.stitched-pin { border-radius:44% 53% 48% 51%; background:#e6f0f7; border:1px solid #9dbacb; box-shadow:0 0 0 6px #f5fbfe,2px 4px 0 7px #c3d9e442; }
.station-pin.stitched-pin::before { inset:4px; border-color:#9bb7c9; }
.roadmap-station.is-reached .stitched-pin { background:#f7e5ef; border-color:#c08cae; color:#a43e75; }
.roadmap-station.is-reached .stitched-pin::before { border-color:#bb7f9f; }
.journey-facts { border-bottom:0; }
.journey-deliverables li { border-bottom:1px dashed #b5cddc; }

@media(max-width:1000px) {
 .tactile-journal .media-room-copy { padding:24px 22px 30px; }
 .tactile-journal .media-room-lead { font-size:32px; }
 .graphic-gallery .gallery-filters { gap:3px; }
 .graphic-gallery .gallery-filters button { padding-inline:7px; }
}
@media(max-width:820px) {
 .book-sleeve { inset:1% -1% auto 1%; height:55vw; max-height:440px; }
 .book-fastener { top:10px; height:50px; width:18px; right:9%; }
 .book-fabric-tab { top:70px; right:-1%; padding:9px 6px; font-size:9px; }
 .book-scene .book-spread { border-top:1px dashed #b6cddc; }
 .notebook-binding { left:10px; width:16px; }
 .notebook-binding i { width:22px; height:11px; }
}
@media(max-width:650px) {
 .media-room-hero.tactile-journal { padding:30px 26px 65px; min-height:0; }
 .tactile-journal .media-room-copy { width:100%; padding:24px 21px 32px; }
 .tactile-journal .media-room-lead { font-size:28px; }
 .tactile-journal .media-room-kicker { font-size:9px; margin-bottom:17px; }
 .notebook-binding { inset:8% auto 8% 7px; }
 .notebook-binding i { width:16px; height:9px; transform:translateX(-6px); }
 .notebook-edge { right:15px; }
 .tactile-journal .media-room-papers { position:relative; inset:auto; width:100%; height:320px; margin-top:32px; }
 .tactile-journal .media-room-paper { padding:12px 8px 14px; }
 .paper-fastener { width:15px; height:42px; top:-14px; right:8px; }
 .graphic-gallery .gallery-filters { gap:6px; padding:8px 0; }
 .graphic-gallery .gallery-filters button { border:1px solid #c6dbe6; border-radius:3px; padding:12px 4px; }
 .graphic-gallery .gallery-filters button::after { inset:4px 4px auto; }
 .journey-header { padding-top:35px; }
 .field-fastener { right:5px; width:17px; height:48px; }
 .photo-corners::before,.photo-corners::after { width:17px; height:17px; }
}
@media(prefers-reduced-motion:reduce) {
 .pvc-reflection,.poster-sleeve>i { transition:none; }
 .poster-card.is-centred:hover .poster-sleeve>i { transform:none; }
}
@media(forced-colors:active) { .tactile-ornament { display:none; } }