/* gallery-type.css — the gallery's typographic layer, shared by main and wings. Pagella (TeX Gyre, OFL) is the fleet's Palatino: true italics on every device. One file; pages carry no private font rules. */ @font-face{font-family:'Pagella';src:url('/assets/fonts/Pagella-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Pagella';src:url('/assets/fonts/Pagella-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Pagella';src:url('/assets/fonts/Pagella-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'PlexMono';src:url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'PlexMono';src:url('/assets/fonts/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} :root{ --serif:'Pagella','Palatino Linotype',Palatino,Georgia,serif; --mono:'PlexMono',Consolas,Menlo,monospace; } /* the italic register: designed italic, quieter and tighter than body */ .lede, .note, p.lede{ font-family:var(--serif); font-style:italic; font-size:.98rem; line-height:1.75; letter-spacing:.01em; text-wrap:balance; } /* mantles: a mantle never breaks inside itself */ .mantles{line-height:2} .mantles span{white-space:nowrap;display:inline-block} .mantles span:not(:last-child)::after{content:"·";padding:0 .75em;color:inherit;opacity:.7} .mantles > span + span{margin-left:0} @media(max-width:560px){ .mantles span{display:block} .mantles span:not(:last-child)::after{content:"";padding:0} } /* ===================== THE SHELL (added 2026-08-18) ===================== One layer for the whole building: plaque, nav, depth themes, ember, foot. Pages carry data-depth on ; the deeper you read, the closer the fire. */ body[data-depth]{margin:0} body[data-depth="1"],body[data-depth="2"]{padding-top:0 !important;padding-bottom:0 !important} .shell-nav{margin-bottom:1.8em} .shell-foot .ember{margin-bottom:0;vertical-align:bottom} body[data-depth="1"]{background:linear-gradient(#eee4c9 0%,#e2d3ae 38%,#c4ab7e 68%,#8a6f47 88%,#5e4830 100%) !important;min-height:100vh} body[data-depth="2"]{background:linear-gradient(#d8c7a2 0%,#b59a6c 40%,#7a5f3d 72%,#3a2c1c 92%,#221709 100%) !important;color:#3a2c14;min-height:100vh} .shell-plaque{ width:100vw; margin:0 0 0 calc(50% - 50vw); box-sizing:border-box; background:linear-gradient(#e5cb84,#c2a052 55%,#d6b76a); color:#2e2106; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-align:center; padding:.6em 1em; box-shadow:0 1px 4px rgba(80,55,10,.35), inset 0 1px 0 #f4e3ad; } .shell-plaque a{color:inherit;text-decoration:none} .shell-nav{ width:100vw; margin-left:calc(50% - 50vw); box-sizing:border-box; text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; padding:.55em .6em .5em; color:#5e4c2c; border-bottom:1px solid rgba(125,94,26,.35); background:rgba(244,236,217,.55); } .shell-nav a{color:#5e4c2c;text-decoration:none;padding:0 .55em;white-space:nowrap;line-height:1.9} .shell-nav a:hover{color:#8a5a10} .shell-nav a[aria-current="page"]{color:#8a5a10;border-bottom:1px solid #b08c2e} .shell-foot{position:relative;margin-top:4.5em;text-align:center; width:100vw;margin-left:calc(50% - 50vw)} .shell-foot .ember{display:block;width:100%;pointer-events:none; background:url('/assets/gallery/flames.png') center bottom / 100% auto no-repeat} body[data-depth="1"] .shell-foot .ember{height:min(26vw,220px)} body[data-depth="2"] .shell-foot .ember{height:min(32vw,300px)} .colophon-mini{ position:relative; z-index:1; font-family:var(--mono); font-weight:600; font-size:.62rem; letter-spacing:.1em; color:#f5e7c0; padding:0 1em 1em; text-shadow:0 1px 3px rgba(0,0,0,.85); } .colophon-mini a{color:#f0d98c} body[data-depth="1"] .shell-foot{background:linear-gradient(transparent, rgba(30,20,8,.55) 70%)} body[data-depth="2"] .shell-foot{background:linear-gradient(transparent, rgba(10,6,3,.8) 60%)} /* overflow discipline: no long string may remargin the building */ html{overflow-x:clip} .fleetbox a{overflow-wrap:anywhere}