/* Shared look for the pages around the map (contact, field notes).
   The homepage keeps its own copy inline; keep the tokens here in step with it. */
:root{
  /* Shoreline palette */
  --paper:#eef1ee;--panel:#e3e9e6;--panel-2:#d8e0dc;--line:#c9d3cf;--ink:#14232a;--ink-soft:#52656c;
  --rust:#1d5c63;--rust-deep:#133f45;--red:#d2421c;--sea:#3b7f86;--orange:#f26b1d;
  --stone-d:#8a8d8c;--stone-l:#c6c6c2;
  --map-sea:#dce7e4;--map-land:#f4f0e4;--route:#d2421c;--card:#fdfcf8;--hand:#1f3d7a;
  --sea-a:#c5dbd8;--sea-b:#b2cfcb;--foam:#f1f7f5;
  /* Journal type: marker headings, pen handwriting, clean sans for reading */
  --display:"Permanent Marker",cursive;--sans:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --font-hand:"Nanum Pen Script",cursive;--hand-k:1.22;
  font-synthesis:none;
}
:root:lang(zh-Hans){
  --display:"Permanent Marker","Ma Shan Zheng",cursive;
  --sans:"Nunito Sans",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-hand:"ZCOOL KuaiLe",cursive;--hand-k:.92;
}
*{margin:0;padding:0;box-sizing:border-box}
body{position:relative;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--rust);color:var(--paper)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}

/* ---------- the sea under everything ---------- */
.tide{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--sea-a)}
.tide::before,.tide::after{content:"";position:absolute;top:0;bottom:0;left:-480px;right:-480px}
.tide::before{background:var(--sea-b);animation:tideA 34s linear infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='230'%3E%3Cpath d='M0 62 Q120 22 240 62 Q360 102 480 62 L480 172 Q360 132 240 172 Q120 212 0 172Z'/%3E%3C/svg%3E") 0 0/480px 230px repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='230'%3E%3Cpath d='M0 62 Q120 22 240 62 Q360 102 480 62 L480 172 Q360 132 240 172 Q120 212 0 172Z'/%3E%3C/svg%3E") 0 0/480px 230px repeat}
.tide::after{background:var(--foam);opacity:.85;animation:tideB 48s linear infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='230'%3E%3Cpath d='M0 72 Q120 32 240 72 Q360 112 480 72' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") 0 0/480px 230px repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='230'%3E%3Cpath d='M0 72 Q120 32 240 72 Q360 112 480 72' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") 0 0/480px 230px repeat}
@keyframes tideA{to{transform:translateX(480px)}}
@keyframes tideB{from{transform:translateX(480px)}to{transform:translateX(0)}}

/* ---------- top of the page: a label back to the map, a tag for language ---------- */
.top{position:relative;max-width:1080px;margin:0 auto;padding:26px 26px 0;display:flex;justify-content:space-between;align-items:flex-start}
.home{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:var(--card);transform:rotate(-2deg);
  box-shadow:0 10px 20px -10px rgba(30,30,40,.35),0 1px 3px rgba(30,30,40,.12);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.home:hover{transform:rotate(0deg) translateY(-2px)}
.home img{height:34px;width:auto}
.home b{display:block;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1}
.home small{display:block;font-size:12px;color:var(--rust);font-weight:600}
.langtag{position:relative;top:-26px;margin-right:2%;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;
  filter:drop-shadow(0 6px 8px rgba(30,30,40,.18));transform:rotate(3deg);animation:tagIn 1s .2s cubic-bezier(.3,1.7,.5,1) backwards}
.langtag:hover{animation:swing 1.3s ease-in-out}
@keyframes tagIn{from{opacity:0;transform:translateY(-12px) rotate(-10deg)}}
@keyframes swing{0%{transform:rotate(3deg)}25%{transform:rotate(-7deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(3deg)}}
.langtag__string{width:20px;height:40px;overflow:visible}
.langtag__string path{fill:none;stroke:var(--ink-soft);stroke-width:1.5}
.langtag__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;padding:22px 12px 11px;
  background:var(--card);clip-path:polygon(24% 0,76% 0,100% 18%,100% 100%,0 100%,0 18%);font-size:12.5px;font-weight:700;letter-spacing:.08em}
.langtag__hole{position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.langtag a{color:var(--ink-soft);padding:1px 3px}
.langtag a:hover{color:var(--rust)}
.langtag a.on{color:var(--ink);box-shadow:inset 0 -2px var(--route)}

/* ---------- paper things ---------- */
.paper{box-shadow:0 18px 34px -16px rgba(30,30,40,.32),0 2px 4px rgba(30,30,40,.1)}
.tape{position:absolute;top:-13px;left:50%;width:100px;height:24px;transform:translateX(-50%) rotate(-3deg);z-index:2;
  background:color-mix(in srgb,var(--panel-2) 75%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.drop{--r:0deg;transform:rotate(var(--r))}
.drop{animation:drop .85s cubic-bezier(.2,1.1,.35,1) backwards}
@keyframes drop{from{opacity:0;transform:translateY(-36px) rotate(calc(var(--r) * 5))}}

/* ---------- the shore, where every page ends ---------- */
.shore{position:relative;margin-top:60px;padding-top:30px;overflow:hidden}
.shore__strip{position:relative;height:118px;background:var(--map-land)}
.shore__sea{position:absolute;left:0;top:0;width:200%;height:56px;animation:tide 16s linear infinite}
.shore__sea path:first-child{fill:var(--sea-a)}
.shore__foam{fill:none;stroke:var(--foam);stroke-width:3;opacity:.8}
@keyframes tide{to{transform:translateX(-50%)}}
.pebble{position:absolute;bottom:24px;width:calc(17px * var(--s));height:calc(10px * var(--s));border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--stone-l),var(--stone-d));opacity:.75}
.shore__walk{position:absolute;bottom:16px;left:4%;width:66px;animation:shoreWalk 34s linear infinite}
@keyframes shoreWalk{0%{left:4%}46%{left:calc(96% - 66px)}50%{left:calc(96% - 66px)}96%{left:4%}100%{left:4%}}
.shore__face{animation:shoreFace 34s steps(1) infinite}
@keyframes shoreFace{0%{transform:scaleX(1)}48%{transform:scaleX(-1)}98%{transform:scaleX(1)}}
.shore__bird{display:block;width:66px;height:55px;overflow:visible;animation:bob .45s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.02)}}
.shore__bird .tb-head{transform-box:view-box;transform-origin:70px 54px;animation:shorePeck 3.4s ease infinite}
@keyframes shorePeck{0%,78%,100%{transform:none}86%{transform:rotate(24deg) translate(2px,4px)}}
.shore__imprint{margin:0;padding:4px 26px 24px;background:var(--map-land);text-align:center;font-size:12px;color:var(--ink-soft)}
.shore__imprint a:hover{color:var(--rust)}

@media(max-width:600px){
  .top{padding:18px 16px 0}
  .home{padding:8px 12px 8px 10px}
  .home img{height:28px}
  .home b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}