/* The coastal sketchbook: common artwork, icon palette and quiet data graphics. */
.region-art{display:block;object-fit:cover;background:#ded9c8;color:#4c6258}
svg.item-art{width:32px;height:32px;flex:none;vertical-align:middle;fill:none;stroke:#526153;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
svg.skill-art{width:23px;height:23px;flex:none;vertical-align:middle;fill:none;stroke:#526153;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.skill-label{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;white-space:nowrap}
.personal-skill .skill-art,.skill .skill-art{width:32px;height:32px;padding:3px;box-sizing:content-box;background:#f4f0e2;border:1px solid #e6dfcc;border-radius:9px}
.personal-skill .split,.skill .split{gap:8px;align-items:center}
.personal-skill .split>span,.skill .split>strong{white-space:nowrap}
@media(max-width:720px){.personal-skill .skill-art,.skill .skill-art{width:27px;height:27px;padding:2px}.skill-label{gap:5px}}
.item-tree-row>.item-art{width:25px;height:25px}.item-tree-row{padding-top:9px;padding-bottom:9px}
.large-icon:has(.item-art){background:#f1eddf;border:1px solid #e2dccb;border-radius:9px}
.large-icon>.item-art{width:38px;height:38px}.commodity-title>.large-icon{width:52px!important;height:52px!important}
.inventory-card .large-icon{width:64px;height:64px}.inventory-card .large-icon>.item-art{width:49px;height:49px}
.trade-item>.item-art{width:48px;height:48px}.buff-row>.item-art{width:32px;height:32px}
.stock-rule h2 .item-art{width:30px;height:30px;margin-right:5px}
.personal-stat>span .icon{width:16px;height:16px;margin-right:3px;color:#9b8158}
.illustrated-banner{min-height:160px;padding:24px;gap:18px}
.illustrated-banner>.banner-landscape{width:210px;align-self:stretch;height:auto;min-height:160px;margin:-24px 0 -24px -24px;object-position:50% 58%;flex:none}
.illustrated-banner .profile-avatar{width:46px;height:46px;font-size:21px}.illustrated-banner .citizen-identity{min-width:0}
.illustrated-banner .profile-actions{flex-wrap:wrap;justify-content:flex-end;max-width:170px}
.illustrated-banner .profile-actions .btn{font-size:11px;min-height:35px;padding:7px 10px}
.illustrated-region{overflow:hidden}.illustrated-region>.region-art{width:calc(100% + 48px);height:160px;margin:-24px -24px 20px;max-width:none;object-position:50% 58%}
.auth-scene{background:#e8e2d2!important;color:#2d4c47!important;overflow:hidden}
.auth-scene .brand{color:#2d4c47}.auth-scene .auth-copy{position:relative;z-index:1}.auth-scene .auth-copy p{color:#53665b}
.auth-scene .auth-copy h1{color:#2d4c47}.auth-scene .auth-copy .eyebrow{color:#876e45}.auth-scene .auth-copy{margin-top:45px}
.auth-scene .auth-landscape{position:relative!important;inset:auto!important;transform:none!important;opacity:1!important;width:calc(100% + 100px)!important;max-width:none;height:auto!important;margin:24px -50px 0;object-fit:cover;aspect-ratio:3/2;flex:1;min-height:0}
.auth-foot{color:#53665b!important;position:relative!important;background:#e8e2d2;padding-top:18px!important}
.auth-scene .auth-landscape{mask-image:none;-webkit-mask-image:none}.auth-scene .auth-foot{left:auto;right:auto;bottom:auto}
.voyage-chart{display:flex;align-items:center;gap:24px;padding:18px;background:#f4f3ea;border:1px solid #e5e1d3;border-radius:8px;margin:18px 0}
.port-photo{width:110px;flex:none;text-align:center}.port-photo .region-art{width:110px;height:64px;border-radius:5px;object-position:center 60%;border:1px solid #d5d4c5}.port-photo strong{display:block;font-size:11px;margin-top:6px;color:#526b60}
.voyage-middle{flex:1;min-width:0;text-align:center}.voyage-middle p{font-size:12px!important;color:#526b60;margin:0!important}.voyage-middle small{font-size:10px;color:#708272}
.voyage-track{height:37px;position:relative;margin:6px 15px 0}.voyage-water{position:absolute;left:0;right:0;top:19px;border-top:2px dashed #8eada3}.voyage-water:before,.voyage-water:after{content:'';position:absolute;width:7px;height:7px;background:#4e7b70;border-radius:50%;top:-4px}.voyage-water:before{left:0}.voyage-water:after{right:0}
.voyage-boat{position:absolute;top:0;transform:translateX(-50%);width:34px;height:32px;display:grid;place-items:center;background:#f4f3ea;color:#365e57}.voyage-boat .icon{width:29px;height:29px;fill:#e7d6ae;stroke-width:1.3}.voyage-boat.returning .icon{transform:scaleX(-1)}
.cargo-description>.item-art{width:26px;height:26px;margin:0 7px 4px 0}
.commission-item{display:flex;gap:10px;align-items:center;margin:10px 0!important}.commission-item .item-art{width:35px;height:35px}
.commission-meter{display:flex;height:8px;overflow:hidden;border-radius:5px;background:#eaece2;margin:10px 0 6px}.meter-delivered{background:#5c8774}.meter-transit{background:repeating-linear-gradient(120deg,#bd9d61 0px,#bd9d61 4px,#ddcaa2 4px,#ddcaa2 7px)}
.meter-key{display:flex;gap:14px;font-size:10px;color:#577a66;margin-bottom:5px}.meter-key>span+span{color:#8d703e}
.guide-item-heading{display:flex;align-items:center;gap:13px;margin-bottom:16px}.guide-item-heading>.item-art{width:56px;height:56px;padding:5px;background:#f4f0e2;border-radius:10px}.guide-item-heading strong{font-size:19px}
.recipe-token{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #dedfce;background:#fffdf5;border-radius:5px}.recipe-token .item-art{width:26px;height:26px}.recipe-token .text-link{gap:5px}.recipe-guide-flow{gap:9px}.item-guide .text-link .item-art{width:24px;height:24px}
@media(max-width:1100px){.illustrated-banner>.banner-landscape{width:160px}.illustrated-banner>.profile-avatar{display:none}.illustrated-banner .profile-actions{max-width:145px}.voyage-chart{gap:16px}}
@media(max-width:720px){
 .illustrated-banner{display:flex;flex-wrap:wrap;padding:20px;gap:14px;min-height:0}
 .illustrated-banner>.banner-landscape{width:calc(100% + 40px);height:125px;min-height:0;max-width:none;margin:-20px -20px 0;flex-basis:calc(100% + 40px);object-position:50% 57%}
 .illustrated-banner .citizen-identity{flex:1}.illustrated-banner .citizen-identity h2{font-size:22px}.illustrated-banner .profile-actions{max-width:none;width:100%;margin:0;justify-content:flex-start}
 .illustrated-region>.region-art{height:160px}.voyage-chart{gap:10px;padding:12px 8px}.port-photo{width:64px}.port-photo .region-art{width:64px;height:52px}.port-photo strong{font-size:10px}.voyage-middle p{font-size:10px!important;line-height:1.6}.voyage-track{margin-left:9px;margin-right:9px}.voyage-middle small{font-size:10px}.commission-item{gap:8px}
 .auth-scene{min-height:0}.auth-scene .auth-copy{margin-top:24px}.auth-scene .auth-copy h1{font-size:24px}.auth-scene .auth-landscape{width:calc(100% + 52px)!important;margin:16px -26px 0;height:120px!important;max-height:120px;object-position:50% 62%;flex:none}.auth-foot{padding-top:12px!important}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover:not(:disabled){transform:none}}

/* Panoramic page leads: information lives in the landscape, with real text. */
.main:has(>.scene-hero)>.page-heading{margin-bottom:16px}
.main:has(>.scene-hero)>.page-heading h1{font-size:23px}
.main:has(>.scene-hero)>.page-heading .eyebrow,.main:has(>.scene-hero)>.page-heading .muted{display:none}
.scene-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:490px;border-radius:12px;background:#365b54;color:#fff9e8;margin-bottom:24px;box-shadow:0 5px 20px #223f3717}
.scene-hero>.scene-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;z-index:-2}
.scene-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#173c3735 0%,transparent 25%,#163a3622 40%,#163a36d9 74%,#163a36f5 100%);pointer-events:none}
.scene-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 28px}
.scene-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;color:#fff9e8;background:#183f39d9;border:1px solid #f9eac03b;border-radius:5px;font-size:11px;line-height:1.7;backdrop-filter:blur(8px)}
.scene-chip .icon{width:15px;height:15px;color:#e8cf98}.scene-chip[href]:hover{background:#163d35}
.scene-bottom{padding:30px 30px 24px;margin-top:126px}
.scene-identity-row{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:22px}
.scene-identity{min-width:0;max-width:72%;text-shadow:0 2px 10px #102e2980}
.scene-identity .eyebrow{color:#ead9b0;font-size:9px;letter-spacing:2.8px;margin-bottom:5px}
.scene-identity h2{font-family:'Songti SC','SimSun',serif;font-weight:500;font-size:38px;letter-spacing:3px;line-height:1.35;overflow-wrap:anywhere}
.scene-identity>p:last-child{margin-top:7px;font-size:12px;color:#f0e9d5}
.scene-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:340px}
.scene-actions .btn.light-button{background:#183f39d6;border-color:#e4d8b975;color:#fff8e7;font-size:11px;padding:8px 12px;min-height:36px;backdrop-filter:blur(6px)}
.scene-actions .btn.light-button:hover{background:#214f45}
.scene-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #f3e9c752;padding-top:18px;gap:20px}
.scene-stat{min-width:0;display:flex;flex-direction:column}.scene-stat+ .scene-stat{border-left:1px solid #f3e9c72e;padding-left:20px}
.scene-stat>span{font-size:10px;color:#ece3cd}.scene-stat>span>.icon{width:15px;height:15px;margin-right:3px;color:#e0c68f}
.scene-stat h2,.scene-stat h3{font-size:26px;font-weight:550;line-height:1.4;margin:6px 0;color:#fffaee;font-variant-numeric:tabular-nums}
.scene-stat h2 small,.scene-stat h3 small{font-size:10px;font-weight:400;color:#e4dfca}
.scene-stat>p{font-size:10px;color:#e1e4d5;margin:7px 0 9px;line-height:1.8}
.scene-stat>.progress{height:4px;background:#eaecc233;margin:1px 0 0}.scene-stat>.progress>span{background:#d9c48c}
.scene-stat>.text-link{margin-top:auto;color:#f8e4b5;font-size:11px}.scene-stat>.text-link .icon{width:14px;height:14px}
.civic-scene{min-height:460px}.civic-scene .scene-bottom{margin-top:155px}.civic-scene .scene-identity h2{font-size:40px}
@media(max-width:1000px){.scene-bottom{padding:24px}.scene-topline{padding:20px 24px}.scene-stats{gap:12px}.scene-stat+ .scene-stat{padding-left:12px}.scene-identity{max-width:65%}.scene-actions{max-width:170px}.scene-identity h2,.civic-scene .scene-identity h2{font-size:32px}.scene-stat h2,.scene-stat h3{font-size:23px}}
@media(max-width:720px){
 .scene-hero{min-height:0;border-radius:9px;margin-bottom:18px}.scene-hero>.scene-landscape{object-position:62% 40%}
 .scene-hero:before{background:linear-gradient(180deg,#173c3722,transparent 18%,#163a3680 33%,#163a36e8 56%,#163a36fa)}
 .scene-topline{padding:15px;gap:8px}.scene-chip{font-size:10px;padding:5px 8px;max-width:60%}.scene-chip>.icon{flex:none}
 .scene-bottom,.civic-scene .scene-bottom{padding:20px;margin-top:112px}.scene-identity-row{display:block;margin-bottom:18px}.scene-identity{max-width:none}.scene-identity h2,.civic-scene .scene-identity h2{font-size:30px}.scene-identity .eyebrow{font-size:8px;letter-spacing:2px}
 .scene-actions{max-width:none;justify-content:flex-start;margin-top:14px}.scene-actions .btn.light-button{font-size:10px;min-height:33px;padding:7px 9px}
 .scene-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding-top:16px}.scene-stat+ .scene-stat{border:0;padding-left:0}.scene-stat:nth-child(even){border-left:1px solid #f3e9c72e;padding-left:14px}.scene-stat h2,.scene-stat h3{font-size:25px}.scene-stat>p{font-size:10px;line-height:1.7}
 .civic-scene .scene-stats{gap:12px}.civic-scene .scene-stat h3{margin-bottom:0}.civic-scene .scene-bottom{margin-top:125px}
}