/* Trips and postcard keepsakes. Scene atlas order follows the destination list. */
#card:has(.travel-ui){background:linear-gradient(145deg,#fff0ce,#ebcea1);border:3px solid #e5b77c;border-radius:24px;box-shadow:0 0 0 5px #794b3266,0 22px 65px #140b2488;color:#593b2a;padding:22px;max-width:600px}
.travel-ui{color:#593b2a;text-align:left}.travel-ui h2{text-align:center;font:32px var(--display);color:#65402b;text-shadow:0 1px #fff6df;margin:2px 0 16px}.travel-ui p{color:#765239}
.travel-ui .tw-steps{justify-content:space-around;padding:0 0 24px;margin:0 0 12px;border-bottom:1px dashed #b78b5c;gap:14px}
.travel-ui .tw-steps i{position:relative;width:30px;height:30px;background:#e1c498;border:2px solid #c69b64;color:#795733;flex:none}
.travel-ui .tw-steps i span{position:absolute;top:36px;font:700 10px system-ui;white-space:nowrap;color:#936d45}.travel-ui .tw-steps i.on{background:#815330;color:#fff2ce;border-color:#a36e3c;box-shadow:0 0 0 4px #edc879}.travel-ui .tw-steps i.done{background:#628b59;border-color:#436c3f;color:#fff6dc}
.travel-ui .tw-who{display:flex;justify-content:flex-start;gap:14px;padding:10px 14px;background:#daba8b55;border-radius:14px;margin-bottom:12px;color:#603e28}.travel-ui .tw-who img{height:68px!important;width:46px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 2px #59361c44)}
.trip-scene{display:block;background-image:url('art/trip-destinations.webp');background-size:500% 100%;background-repeat:no-repeat;flex:none;overflow:hidden}
.trip-scene-amalfi{background-position:0% 50%}.trip-scene-forest{background-position:25% 50%}.trip-scene-venice{background-position:50% 50%}.trip-scene-clock{background-position:75% 50%}.trip-scene-duomo{background-position:100% 50%}
.travel-ui .tw-dest{position:relative;display:grid;grid-template-columns:82px 1fr 20px;grid-template-rows:auto auto;gap:3px 12px;min-height:86px;padding:7px;border:2px solid #c99c68;border-radius:15px;background:#fff3d7;box-shadow:0 3px 0 #bc916033;color:#603c28;text-align:left;overflow:hidden}
.travel-ui .tw-dest .trip-scene{grid-column:1;grid-row:1/3;width:82px;height:72px;border-radius:9px}.travel-ui .tw-dest b{grid-column:2;align-self:end;font:19px var(--display);color:#603c28}.travel-ui .tw-dest small{grid-column:2;align-self:start;color:#876447;font:12px/1.3 system-ui}.travel-ui .tw-dest .trip-arrow{grid-column:3;grid-row:1/3;font:30px system-ui;color:#ad7d40}
.travel-ui .tw-dest:hover{border-color:#a26b30;background:#fff8e8;box-shadow:0 4px 9px #93623733}.travel-ui button:focus-visible{outline:3px solid #85532e;outline-offset:3px}
.travel-ui .btn{background:linear-gradient(#a77445,#77502f);border:2px solid #bd8e54;color:#fff0cd;box-shadow:0 3px 0 #634025;font:20px var(--display);border-radius:12px}.travel-ui .btn.main{background:linear-gradient(#ffdc8c,#e7ad4c);color:#624020;border-color:#b78034}
.travel-ui .tw-card{background:#fff5db;border:2px solid #d3ac79;color:#624128;box-shadow:0 3px 0 #b48b5733}.travel-ui .tw-card small{color:#765138}.travel-ui .tw-q,.travel-ui .xsub{color:#765138}.travel-ui .tw-time{background:#fff4da;color:#67432c;border-color:#cda472}.travel-ui .tw-time small{color:#896443}.travel-ui .tw-time.on{background:#ffe0a0;border-color:#ae7635;box-shadow:0 0 0 2px #e6bb70}.travel-ui .tw-haul{background:#e2c493;color:#624329;border:1px dashed #af8251;border-radius:12px;padding:12px}
.travel-ui .tw-away{background:#fff4d7;color:#68462f}.travel-ui .tw-away small{color:#8d6946}
.travel-ui .xmail{padding:10px;gap:12px;background:#fff4d9;border:2px solid #c69d69;border-radius:5px;box-shadow:0 3px 6px #80573222;margin:10px 0;color:#68452e}.travel-ui .xmail .trip-scene{width:88px;height:66px;border:4px solid #fffaf0;transform:rotate(-3deg);box-shadow:0 2px 4px #5d3c2d33}.travel-ui .xmail.new{border-color:#c28a36;background:#fff0c4;box-shadow:inset 4px 0 #e9b756,0 3px 6px #80573222}.travel-ui .xmail small{color:#8b684a;font-size:11px;line-height:1.4;margin-top:5px}.travel-ui .xmail b{font:18px var(--display);color:#62402a}.mail-intro{font:13px/1.5 system-ui;text-align:center}
.travel-ui .postcard{border:8px solid #fff8e6!important;border-radius:5px;box-shadow:0 4px 12px #63412544;overflow:hidden;background:#fff8e6}.pc-picture{position:relative;height:200px;overflow:hidden}.pc-picture>.trip-scene{position:absolute;inset:0;width:100%;height:100%;background-size:500% 100%}.pc-picture::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#38241b99);pointer-events:none}.travel-ui .pchead{position:absolute;left:16px;bottom:13px;z-index:1;background:none!important;font:18px var(--display);color:#fff5da;line-height:1.2;padding:0;text-shadow:0 2px 3px #392119}.pchead b{font-size:30px}.pc-stamp{position:absolute;z-index:2;right:13px;top:13px;width:52px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:4px dotted #fff7d9;background:#f5dfad;transform:rotate(8deg);font-size:28px;box-shadow:0 2px 3px #40291955}.pc-stamp small{font:800 7px system-ui;letter-spacing:.1em;color:#8c5b35}
.travel-ui .pcbody{position:relative;padding:22px 20px;text-align:left;background:repeating-linear-gradient(#fff8e8 0 27px,#dfcaa155 28px,#fff8e8 29px)}.travel-ui .pcbody>img{float:left;height:98px!important;max-width:78px;object-fit:contain;margin:0 18px 8px 0;filter:drop-shadow(0 3px 3px #5d3c2d33)}.travel-ui .pctext{font:italic 17px/1.65 Georgia,serif;margin:14px 0;color:#62452d!important}.travel-ui .pcsig{clear:both;font:italic 15px Georgia,serif}.pc-postmark{display:block;text-align:right;font:800 9px system-ui;letter-spacing:.14em;color:#b58d62}.pc-gift{padding:12px;background:#f5dda7;border:1px dashed #ba8b4d;border-radius:9px;text-align:center}
@media(max-width:480px){#card:has(.travel-ui){padding:15px}.travel-ui h2{font-size:28px}.travel-ui .tw-dest{grid-template-columns:66px 1fr 16px;gap:3px 9px}.travel-ui .tw-dest .trip-scene{width:66px;height:66px}.travel-ui .tw-dest b{font-size:17px}.pc-picture{height:170px}.travel-ui .xmail .trip-scene{width:66px;height:60px}}

.travel-ui .xcard{background:#ead1a7;color:#735035;border:1px solid #c6a06c}.travel-ui .xcard.dim{opacity:1}
.travel-ui .tw-steps i{display:grid;place-items:center;border-radius:50%;font:800 12px system-ui;font-style:normal}.travel-ui .tw-who{align-items:center}