/* KINMADE WORLD: the illustrated map home, emerald and ocean palette with a touch of orange,
   Crimson Text type (the same family Steeven Salvat uses). Loads after styles.css and gallery.css. */
:root{
  --cream:#FBF8F2; --paper:#F6F1E6; --mint:#EEF4F0; --sage-lt:#EEF4F0;
  --cocoa:#22302E; --cocoa-2:#55625F;
  --btn:#1F6B57; --btn-d:#154D3F; --btn-fg:#FBF8F2; --olive:#1F6B57;
  --terracotta:#E07A3F; --orange:#E07A3F; --blue:#2E6E8E; --emerald:#1F6B57;
  --display:"Crimson Text", Georgia, "Times New Roman", serif;
  --body:"Crimson Text", Georgia, "Times New Roman", serif;
  --hand:"Crimson Text", Georgia, serif;
  --mono:"Crimson Text", Georgia, serif;
  --line:color-mix(in srgb, var(--cocoa) 14%, transparent);
}
body{background:var(--cream)!important;background-image:none!important;font-size:19px;line-height:1.7;color:var(--cocoa)}
footer{background:var(--cream)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
h1 em,h2 em,h3 em{font-family:var(--display);font-style:italic;font-weight:400;font-size:1em;line-height:inherit;color:var(--orange)}
.label,.pill,.chip,.back,.go,.how,.nav-links>a,.drop-btn,.menu-btn,.want,.tag,.soon,.field label,.more,.btn,.nav-links .nav-cta{font-family:var(--body)!important;font-weight:400!important}
.label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald)}
.brand{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.nav-links>a,.drop-btn{font-size:14px!important;letter-spacing:.16em!important}
.btn{font-size:14px;letter-spacing:.16em;padding:13px 26px}
.home-coll{background:var(--mint)!important}
.banner{background:var(--btn-d)}
.hero-over h1 em{color:#F2A15F}
.hero-over h1{font-weight:400}
.g-hero .badge circle:first-of-type{fill:var(--cream)}
.g-hero .badge text{fill:var(--emerald);font-family:var(--body)}

/* the world map */
.world{padding-block:40px 28px;background:var(--cream)}
.world-head{display:grid;gap:10px;max-width:none;text-align:center;justify-items:center;margin-bottom:26px}
.world-head h2{font-size:clamp(40px,6vw,76px);line-height:1.02;margin:0}
.world-head p{max-width:60ch;margin:0;color:var(--cocoa-2)}
.map-wrap{max-width:1500px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));scrollbar-width:none}
.map-wrap::-webkit-scrollbar{display:none}
.map{display:block;width:100%;height:auto;max-width:100%}
.map .tiny{font-family:var(--display);font-style:italic;font-size:20px}
.map .t-name{font-family:var(--display);font-style:italic;font-size:30px;fill:#22302E;paint-order:stroke;stroke:#F6F1E6;stroke-width:6px;stroke-linejoin:round}
.map .t-sub{font-family:var(--display);font-size:14px;letter-spacing:.18em;fill:#1F6B57;paint-order:stroke;stroke:#F6F1E6;stroke-width:5px;stroke-linejoin:round}
.place{cursor:pointer;outline:none}
.place .art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.place .art,.place .ptag{transform-box:fill-box;transform-origin:50% 100%}
.place:hover .art,.place:focus-visible .art{transform:translateY(-8px) scale(1.06)}
.place .ptag{transition:transform .4s}
.place:hover .ptag,.place:focus-visible .ptag{transform:translateY(2px)}
.place:hover .t-name,.place:focus-visible .t-name{fill:#E07A3F}
.place:focus-visible .t-name{text-decoration:underline}
/* ambient motion */
.map .rays{animation:spin 40s linear infinite;transform-box:fill-box;transform-origin:center}
.map .waves use{animation:drift 7s ease-in-out infinite alternate}
.map .waves use:nth-child(2n){animation-duration:9s;animation-delay:-3s}
.map .waves use:nth-child(3n){animation-duration:11s;animation-delay:-5s}
.map .foam{animation:foam 6s linear infinite}
.map .boat{animation:bob 4s ease-in-out infinite}
.map .smoke{animation:smoke 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.map .steam{animation:smoke 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.map .beam{animation:beam 5s ease-in-out infinite}
.map .flag{animation:flag 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:0 50%}
.map .crows{animation:fly 26s linear infinite}
.map .crow{animation:flap 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.map .c2{animation-delay:-.4s}.map .c3{animation-delay:-.7s}
.map .forest use{animation:sway 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.map .forest use:nth-child(2n){animation-delay:-2s}.map .forest use:nth-child(3n){animation-delay:-4s}
@keyframes drift{to{transform:translateX(14px)}}
@keyframes foam{to{stroke-dashoffset:-84}}
@keyframes bob{0%,100%{transform:translate(300px,540px) rotate(-2deg)}50%{transform:translate(312px,546px) rotate(2deg)}}
@keyframes smoke{0%{opacity:0;transform:translateY(6px) scaleY(.8)}40%{opacity:.75}100%{opacity:0;transform:translateY(-14px) scaleY(1.1)}}
@keyframes beam{0%,100%{opacity:.15}50%{opacity:.6}}
@keyframes flag{0%,100%{transform:skewY(0)}50%{transform:skewY(-8deg)}}
@keyframes fly{0%{transform:translate(-200px,30px)}100%{transform:translate(900px,-20px)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes sway{to{transform:rotate(1.6deg)}}
@media (prefers-reduced-motion:reduce){.map *{animation:none!important}}
.map-hint{display:none;text-align:center;font-style:italic;color:var(--cocoa-2);font-size:16px;margin:10px auto 0}
.places{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:22px}
.places a{display:grid;text-align:center;padding:10px 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--cocoa-2);font-size:14px;letter-spacing:.06em;background:var(--cream);transition:background .3s,color .3s,border-color .3s}
.places a b{font-weight:400;font-style:italic;font-size:19px;letter-spacing:0;color:var(--cocoa)}
.places a:hover,.places a:focus-visible{background:var(--emerald);border-color:var(--emerald);color:#D7E9E1}
.places a:hover b,.places a:focus-visible b{color:var(--cream)}
@media (max-width:640px){
  .world{padding-top:28px}
  .map-wrap{overflow-x:auto;overscroll-behavior-x:contain;cursor:grab}
  .map{width:980px;max-width:none}
  .map-hint{display:block}
  .places a{padding:8px 14px}
}

/* coming soon tags on collection tiles */
.soon-tag{position:absolute;top:12px;right:12px;background:var(--cream);color:var(--cocoa);padding:3px 12px;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.soon-note{margin-top:10px;font-style:italic;color:var(--emerald)}

/* murals and journal */
.sec-head{display:grid;gap:12px;max-width:62ch;margin-bottom:40px}
.sec-head h2{font-size:clamp(36px,5vw,60px);line-height:1.05;margin:0}
.sec-head p{margin:0;color:var(--cocoa-2)}
.tabs{display:flex;gap:28px;margin-top:8px}
.tab{text-decoration:none;color:var(--cocoa-2);font-size:15px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid transparent}
.tab:hover,.tab[aria-current="true"]{color:var(--cocoa);border-color:var(--orange)}
.mural-set{padding-block:20px 48px;scroll-margin-top:96px}
.set-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;border-top:1px solid var(--line);padding-top:20px;margin-bottom:22px}
.set-head h3{font-size:34px;font-style:italic;margin:0}
.set-head p{margin:0;color:var(--cocoa-2)}
.mural-grid{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:auto;gap:20px}
.m-item{margin:0;display:grid;gap:8px}
.m-item.big{grid-row:span 2}
.m-ph{min-height:220px;height:100%;display:grid;place-items:center;color:#FBF8F2;font-style:italic;font-size:17px;background:linear-gradient(135deg,var(--c1),var(--c2));border-radius:2px}
.m-item.big .m-ph{min-height:470px}
.m-item figcaption{text-align:center;font-size:15px;color:var(--cocoa-2);letter-spacing:.04em}
#murals-outdoor .mural-grid{grid-template-columns:1fr 2fr}
#murals-outdoor .m-item.big{grid-column:2;grid-row:1 / span 2}
.more-line{margin-top:28px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-bottom:56px}
.post{display:grid;gap:8px;align-content:start}
.post .p-ph{aspect-ratio:4/3;max-width:100%;background:linear-gradient(135deg,var(--c1),var(--c2));border-radius:2px;margin-bottom:6px}
.post h3{font-size:28px;margin:0}
.post p{margin:0;color:var(--cocoa-2)}
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;align-items:center;padding:36px;background:var(--mint);border-radius:2px}
.newsletter h3{font-size:34px;margin:6px 0}
.newsletter p{margin:0;color:var(--cocoa-2)}
.n-row{display:flex;gap:10px}
.n-row input{flex:1;min-width:0;font:inherit;font-size:17px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--cocoa)}
.newsletter .err,.n-ok{grid-column:2}
.n-ok{font-style:italic;color:var(--emerald)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:860px){
  .posts{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr;padding:24px}
  .newsletter .err,.n-ok{grid-column:1}
  .mural-grid,#murals-outdoor .mural-grid{grid-template-columns:1fr}
  .m-item.big,#murals-outdoor .m-item.big{grid-row:auto;grid-column:auto}
  .m-item.big .m-ph{min-height:300px}
  .n-row{flex-direction:column}
}