.svg-section{padding:76px 0 80px;background:#fff9e9}
.svg-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,390px);align-items:center;gap:40px;margin-bottom:34px}
.svg-heading .eyebrow{color:#8a591b;margin-bottom:18px}
.svg-heading h2 span{color:#a2651a}
.svg-intro{max-width:440px;margin-top:20px}
.svg-intro>p{font-size:15px;line-height:1.7;color:#71604c}
.svg-intro>span{display:block;margin-top:17px;font-size:11px;font-weight:750;color:#8a591b;letter-spacing:.04em}
.svg-gallery{border:1px solid #e7d6b6;border-radius:24px;background:#fffcf5;box-shadow:0 7px 0 #e9dcbf;overflow:hidden}
.svg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;border-bottom:1px solid #e7d6b6}
.svg-tabs{position:relative;display:flex;gap:5px;min-width:0;overflow-x:auto;padding:6px;scrollbar-width:thin}
.svg-tabs a{flex:none;display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:9px;font-size:12px;font-weight:750;white-space:nowrap}
.svg-tabs a:hover{background:#f6ebd4}
.svg-tabs [aria-selected=true]{background:var(--ink);color:#fff}
.svg-tabs a:focus-visible{outline-offset:2px}
.svg-paging{display:flex;align-items:center;gap:7px;flex:none}
.svg-count{font-size:11px;font-variant-numeric:tabular-nums;color:#71604c;margin-right:8px;min-width:44px}
.svg-paging button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ddcaa6;border-radius:10px;background:transparent;font-size:21px;transition:background .2s}
.svg-paging button:hover{background:#ffe6a1}
.svg-panel{padding:24px;scroll-margin-top:24px}
.svg-panel+.svg-panel{border-top:1px solid #e7d6b6}
.is-gallery-ready .svg-panel{border-top:0}
.svg-overview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}
.svg-card{display:block;min-width:0;border:1px solid #e7d6b6;border-radius:14px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.svg-card:hover{border-color:#b08430;box-shadow:0 4px 0 #ead8b2}
.svg-thumb{display:flex;align-items:center;justify-content:center;width:100%;height:205px;padding:8px;background:#f3eee7;border-bottom:1px solid #e7d6b6}
.svg-thumb img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.svg-thumb picture,.svg-art-frame picture,.perch-easel picture{display:block;width:100%;height:100%;min-width:0;min-height:0}
.svg-card--animated .svg-thumb{position:relative}
.svg-motion-label{position:absolute;right:10px;bottom:10px;padding:5px 8px;background:var(--ink);border-radius:5px;color:#fff;font-size:9px;font-weight:750;letter-spacing:.04em}
.svg-card-label{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:17px 14px;font-size:14px;font-weight:800;letter-spacing:-.3px}
.svg-card-label small{display:block;margin-bottom:6px;font-size:9px;letter-spacing:.1em;font-weight:700;color:#8a724b;text-transform:uppercase}
.svg-card-label b{color:#a2651a;font-size:18px;font-weight:500}
.svg-detail{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr);gap:30px;align-items:start}
.svg-copy{padding:20px 4px}
.svg-copy>.eyebrow{font-size:10px;color:#8a591b;margin-bottom:18px}
.svg-copy h3{font-size:35px;line-height:1.08;letter-spacing:-1.5px;font-weight:800}
.svg-copy>p{font-size:13px;line-height:1.7;color:#71604c;margin-top:17px}
.svg-prompt{margin-top:25px;border-top:1px solid #e7d6b6}
.svg-prompt summary{display:flex;justify-content:space-between;gap:15px;cursor:pointer;padding:17px 0;font-size:12px;font-weight:750;list-style:none}
.svg-prompt summary::-webkit-details-marker{display:none}
.svg-prompt summary:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
.svg-prompt summary span{font-size:17px;transition:transform .2s}
.svg-prompt[open] summary span{transform:rotate(45deg)}
.svg-prompt blockquote{margin:0 0 15px;font-size:12px;line-height:1.75;color:#615440;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.svg-prompt-label{font-size:10px;font-weight:800;margin:8px 0;text-transform:uppercase;letter-spacing:.07em;color:#8a591b}
.svg-copy-button{min-height:40px;border:1px solid #dcc7a0;background:#fff5da;border-radius:9px;font-size:11px;font-weight:750;padding:9px 13px;margin:0 0 18px}
.svg-copy-button:hover{background:#ffe6a1}
.svg-figure{margin:0;min-width:0}
.svg-art-frame{height:520px;display:flex;align-items:center;justify-content:center;min-width:0;padding:12px;border-radius:13px;background:#eee9f2}
.svg-art-frame img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.svg-figure figcaption{padding:13px 3px 0;font-size:10px;text-align:right;color:#7d6d58}
.svg-footer{display:flex;justify-content:space-between;gap:20px;padding-top:24px;color:#8a724b;font-size:11px}
.svg-footer a{font-weight:750;color:#735021}
.svg-footer a:hover{color:var(--violet-dark)}
.svg-jump{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:10px;font-size:12px;font-weight:750;color:var(--mint-dark)}
.canary-perch.perch-gallery{--perch-ground:#e9d6ab;width:100%;margin:0;justify-self:end}
.perch-gallery .perch-scene{height:245px;max-width:none}
.perch-gallery .perch-travel{left:-10px;bottom:-9px;width:242px;height:242px;transform:none}
.perch-gallery .perch-copy{top:0;right:0;width:160px;transform:none;animation:none}
.perch-gallery .perch-bubble{display:flex;align-items:center;min-height:70px;padding:10px 12px;font-size:13px}
.perch-copy .gallery-tour-button{pointer-events:auto;width:100%;min-height:48px;margin:12px 0 0;padding:8px 10px;border:1px solid #b8924b;border-radius:10px;background:#ffe5a1;color:var(--ink);text-align:left;font-size:11px;font-weight:800;line-height:1.4;box-shadow:0 3px 0 #d7b77a}
.gallery-tour-button:hover{background:#ffda7a}
.gallery-tour-button:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.perch-gallery .perch-ground{left:0;bottom:8px;width:242px;height:17px}
.perch-easel{position:absolute;z-index:3;right:10px;bottom:28px;width:104px;height:91px;border:5px solid #b7813d;border-radius:3px;background:#f5ecdb;box-shadow:3px 3px 0 #e2c694;transform:rotate(5deg);pointer-events:none}
.perch-easel::before,.perch-easel::after{content:"";position:absolute;top:100%;width:6px;height:22px;background:#b7813d;border-radius:0 0 2px 2px;transform-origin:top}
.perch-easel::before{left:11px;transform:rotate(12deg)}
.perch-easel::after{right:11px;transform:rotate(-12deg)}
.perch-easel img{width:100%;height:100%;object-fit:contain}
/* Keep the tour button and bird hit area fixed through every result and reset. */
.canary-perch.perch-gallery .perch-bird{transform:none;animation:none;transition:none}
@media(prefers-reduced-motion:no-preference){
  .perch-gallery.is-arriving .perch-bird>svg{animation:perch-waddle 1.15s ease-out both}
  .perch-gallery.is-reacting .perch-bird>svg{animation:gallery-bird-peek .65s ease-out both}
  .perch-gallery.is-reacting .perch-easel{animation:gallery-frame-settle .65s ease-out both}
  @keyframes gallery-bird-peek{0%,100%{translate:0 0}40%{translate:0 -6px}}
  @keyframes gallery-frame-settle{0%,100%{rotate:0deg}40%{rotate:-7deg}}
}
@media(max-width:1000px) and (min-width:681px){.svg-heading{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:25px}.svg-heading h2{font-size:42px}.perch-gallery .perch-travel{width:215px;height:215px}.perch-gallery .perch-copy{width:145px}.perch-easel{width:91px;height:81px;right:1px;bottom:17px}.perch-gallery .perch-ground{width:213px;bottom:6px}}
@media(max-width:1000px){.svg-toolbar{gap:10px;padding-inline:12px}.svg-tabs a{padding-inline:10px;font-size:11px}.svg-overview{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.svg-thumb{height:220px}.svg-detail{gap:22px;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}.svg-copy h3{font-size:30px}.svg-art-frame{height:450px}}
@media(max-width:680px){.svg-section{padding:48px 0 52px}.svg-heading{grid-template-columns:1fr;gap:20px;margin-bottom:27px}.svg-heading h2{font-size:42px;letter-spacing:-2px}.svg-heading .eyebrow{font-size:10px;margin-bottom:15px}.svg-intro{justify-self:start;max-width:360px}.svg-intro>p{font-size:13px}.svg-intro>span{font-size:10px;margin-top:12px}.svg-gallery{border-radius:18px}.svg-toolbar{flex-wrap:wrap;gap:8px;padding:9px 10px 12px}.svg-tabs{flex-basis:100%;padding:5px;gap:2px}.svg-tabs a{font-size:11px;padding-inline:12px}.svg-paging{width:100%;justify-content:flex-end;padding-inline:5px}.svg-count{margin-right:auto}.svg-panel{padding:14px}.svg-overview{gap:12px}.svg-thumb{height:154px;padding:5px}.svg-card-label{padding:13px 10px;font-size:12px;letter-spacing:-.2px}.svg-card-label small{font-size:8px}.svg-card-label b{font-size:15px}.svg-detail{display:flex;flex-direction:column;gap:23px}.svg-figure{width:100%;order:-1}.svg-art-frame{height:340px;padding:8px}.svg-figure figcaption{font-size:9px;padding-top:10px}.svg-copy{padding:0 3px 6px;width:100%}.svg-copy>.eyebrow{margin-bottom:13px}.svg-copy h3{font-size:31px;letter-spacing:-1.2px}.svg-copy h3 br{display:none}.svg-copy>p{font-size:12px;margin-top:13px}.svg-prompt{margin-top:20px}.svg-prompt summary{min-height:48px}.svg-footer{font-size:10px;gap:14px;line-height:1.6}.svg-jump{justify-content:flex-start;padding-top:0;font-size:11px}}
@media(max-width:380px){.svg-thumb{height:125px}.svg-card-label{font-size:11px;padding-inline:8px}.svg-card-label b{display:none}.svg-art-frame{height:285px}.svg-panel{padding:11px}.svg-overview{gap:9px}.svg-footer{flex-direction:column;gap:8px}}
@media(max-width:1000px){.svg-card--animated{grid-column:1/-1}.svg-card--animated .svg-thumb{height:250px}}
@media(max-width:680px){.svg-card--animated .svg-thumb{height:210px}}
@media(max-width:680px){.canary-perch.perch-gallery{justify-self:center;max-width:360px;margin:6px 0 0}.perch-gallery .perch-scene{height:226px}.perch-gallery .perch-travel{width:220px;height:220px;left:-9px;bottom:-11px}.perch-gallery .perch-copy{width:145px;top:0;right:0}.perch-gallery .perch-ground{width:220px;bottom:5px}.perch-easel{width:94px;height:83px;right:5px;bottom:15px}}
@media(max-width:365px){.perch-gallery .perch-travel{width:195px;height:195px}.perch-gallery .perch-copy{width:138px}.perch-gallery .perch-scene{height:232px}.perch-gallery .perch-ground{width:194px}.perch-gallery .perch-bubble{font-size:12px}.perch-easel{right:0;width:85px;height:79px}}
@media(prefers-reduced-motion:reduce){.svg-card,.svg-paging button,.svg-prompt summary span{transition:none}}
