/* Section 03 · Archipelago v4 — everything scoped to .a4 so the section
   can drop into any page without colliding with its stylesheet. */
.a4{--a4paper:#F5F2EC;--a4ink:#0B0B0C;--a4ember:#D9381A;--a4glow:#FFE3A6;--a4disp:'Space Grotesk',system-ui,sans-serif;--a4text:'Instrument Sans',system-ui,sans-serif;position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100svh;min-height:680px;display:flex;flex-direction:column;padding:clamp(40px,6vh,84px) 0 clamp(20px,3vh,34px);overflow:hidden;background:var(--a4paper);color:var(--a4ink);box-sizing:border-box}
.a4 *,.a4 *::before{box-sizing:border-box}
.a4 a{text-decoration:none}
.a4defs{position:absolute;width:0;height:0;overflow:hidden}
.a4head{position:relative;z-index:2}

/* ---------- ocean: paper + drifting currents, edge to edge ---------- */
.a4ocean{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.a4ocean path{fill:none;stroke:var(--a4ink);stroke-width:1;stroke-dasharray:7 7;animation:a4drift linear infinite;vector-effect:non-scaling-stroke}
@keyframes a4drift{to{stroke-dashoffset:-140}}

/* ---------- chart ---------- */
.a4chartbox{position:relative;z-index:1;width:100%;max-width:1600px;margin:clamp(4px,2vh,22px) auto 0;flex:1 1 auto;min-height:0}
#a4chart{position:absolute;inset:0;display:block;width:100%;height:100%}
.a4 .route{fill:none;stroke:var(--a4ink);stroke-width:1;stroke-dasharray:2 7;opacity:.22;vector-effect:non-scaling-stroke}
.a4 .snd{font-family:var(--a4text);font-size:9px;fill:var(--a4ink);opacity:.28}
.a4 .wave{animation:a4wv 6s ease-out infinite}
@keyframes a4wv{0%{opacity:0}20%{opacity:.12}75%{opacity:.04}100%{opacity:0}}
.a4 .a4lab{font-family:var(--a4disp);font-size:9px;letter-spacing:1.5px;fill:var(--a4ink);opacity:.55}
.a4 .unclaimed .a4lab{letter-spacing:2px;opacity:.4}
.a4 .pennant{font-family:var(--a4disp);font-weight:700;letter-spacing:.5px}
.a4 .isl{cursor:pointer;outline:none}
.a4 .isl .body{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.a4 .isl .ember,.a4 .isl .vein{transition:opacity .25s}
.a4 .isl .focusring{opacity:0;transition:opacity .18s}
.a4 .isl:focus-visible .focusring{opacity:.9}
.a4 .isl.claimed:hover .body,.a4 .isl.claimed.on .body{transform:translateY(-4px)}
.a4 .isl.claimed:hover .ember,.a4 .isl.claimed.on .ember{opacity:1}
.a4 .isl.claimed:hover .vein,.a4 .isl.claimed.on .vein{opacity:.62}
.a4 .isl .flag{animation:a4ripple 3s ease-in-out infinite}
@keyframes a4ripple{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-1.6deg) scaleX(.965)}}
/* unclaimed: cold at idle, first eruption on hover */
.a4 .isl.unclaimed .solid{opacity:0;transition:opacity .4s}
.a4 .isl.unclaimed .dash{transition:opacity .4s}
.a4 .isl.unclaimed .cold{opacity:0;transition:opacity .4s}
.a4 .isl.unclaimed .blankflag{opacity:0;transform:scaleY(0);transition:opacity .25s .12s,transform .25s .12s}
.a4 .isl.unclaimed:hover .solid,.a4 .isl.unclaimed.on .solid{opacity:1}
.a4 .isl.unclaimed:hover .dash,.a4 .isl.unclaimed.on .dash{opacity:.16}
.a4 .isl.unclaimed:hover .cold,.a4 .isl.unclaimed.on .cold{opacity:.85}
.a4 .isl.unclaimed:hover .blankflag,.a4 .isl.unclaimed.on .blankflag{opacity:1;transform:scaleY(1)}

/* ---------- ships: one heading each, no wake ---------- */
.a4 .ship{offset-rotate:auto}
.a4 #shipA{offset-path:path("M-30,78 C160,42 300,112 500,70 C690,32 860,104 1230,58");animation:a4sail 70s linear infinite;animation-delay:-24s}
.a4 #shipB{offset-path:path("M1230,552 C1010,592 830,538 630,572 C450,602 250,540 -30,580");offset-rotate:auto 180deg;animation:a4sail 88s linear infinite;animation-delay:-38s}
@keyframes a4sail{to{offset-distance:100%}}
.a4.paused .ship,.a4.paused .wave,.a4.paused .a4ocean path,.a4.paused .flag{animation-play-state:paused}

/* ---------- marginalia ---------- */
.a4marg{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-family:var(--a4disp);font-size:9px;letter-spacing:1.5px;pointer-events:none;margin-top:6px}
.a4legend{opacity:.5}
.a4scale{opacity:.38;margin-top:6px}
.a4drac{position:absolute;z-index:4;opacity:.3;font-family:var(--a4text);font-style:italic;font-size:9.5px;letter-spacing:.5px;white-space:nowrap;pointer-events:none;transform:translate(-50%,0)}
.a4dragon{fill:none;stroke:var(--a4ink);stroke-width:1;opacity:0;vector-effect:non-scaling-stroke;pointer-events:none}
.a4dragon.trace{animation:a4drag 2.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes a4drag{0%{opacity:.42;stroke-dashoffset:var(--dl)}58%{opacity:.42;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.a4compass{position:absolute;top:clamp(40px,6vh,84px);right:clamp(20px,4vw,64px);width:50px;height:56px;z-index:2;opacity:.38;pointer-events:none}
.a4compass circle,.a4compass line,.a4compass polygon{fill:none;stroke:var(--a4ink);stroke-width:1}
.a4compass polygon{fill:var(--a4ink);stroke:none}
.a4compass text{font-family:var(--a4disp);font-size:8px;letter-spacing:2px;fill:var(--a4ink);text-anchor:middle;stroke:none}

/* ---------- plates: territory tag / survey card / claim card ---------- */
.a4plate{position:absolute;z-index:6;background:var(--a4paper);border:1px solid var(--a4ink);box-shadow:3px 3px 0 rgba(11,11,12,.15);padding:12px 13px 13px;display:none;font-family:var(--a4text)}
.a4plate::before{content:"";position:absolute;top:-1px;left:-1px;width:22px;height:2px;background:linear-gradient(90deg,var(--a4glow),var(--a4ember))}
#a4tag{width:230px}
#a4card{width:380px;padding-bottom:14px}
.a4plate.open{display:block;animation:a4reveal .35s cubic-bezier(.22,1,.36,1)}
@keyframes a4reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.a4logo{display:block;height:22px;width:auto;max-width:150px;object-fit:contain;object-position:left center;margin:0 0 9px}
.a4logo.tag{height:17px;max-width:110px;margin-bottom:7px}
.a4pname{font-family:var(--a4disp);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:1.25}
.a4pid{font-family:var(--a4disp);font-size:9px;letter-spacing:1.5px;opacity:.5}
.a4prow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.a4prole{font-family:var(--a4disp);font-size:9px;letter-spacing:1.2px;opacity:.5;margin-top:4px}
.a4plog{font-size:12px;line-height:1.45;opacity:.72;margin-top:7px}
.a4pmeta{font-size:11px;opacity:.6;margin-top:4px}
.a4phint{font-family:var(--a4disp);font-size:8.5px;letter-spacing:1.5px;opacity:.35;margin-top:8px}
.a4boxes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.a4box{border:1px solid var(--a4ink);padding:5px 7px;min-width:64px}
.a4box b{display:block;font-family:var(--a4disp);font-size:12px;letter-spacing:.3px}
.a4box span{display:block;font-size:8.5px;letter-spacing:.4px;opacity:.55;margin-top:2px}
.a4box.blank b{opacity:.35}
.a4cap{position:relative;aspect-ratio:16/10;border:1px solid var(--a4ink);background:var(--a4paper);margin-bottom:11px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.a4cap svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.a4cap span{position:relative;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px;letter-spacing:1.5px;opacity:.5;background:var(--a4paper);padding:3px 6px}
.a4cap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a4acts{display:flex;align-items:center;gap:14px;margin-top:12px}
.a4cta{display:inline-flex;align-items:center;gap:8px;background:var(--a4ink);color:var(--a4paper);font-family:var(--a4disp);font-size:10px;letter-spacing:1.6px;padding:8px 12px;overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.a4cta:hover{color:var(--a4paper);transform:translateX(2px)}
.a4cta i{font-style:normal;transition:transform .25s}
.a4cta:hover i{transform:translateX(3px)}
.a4ghost{font-family:var(--a4disp);font-size:9.5px;letter-spacing:1.3px;color:var(--a4ink);opacity:.55;border-bottom:1px solid rgba(11,11,12,.35);padding-bottom:1px}
.a4ghost:hover{opacity:1;color:var(--a4ember);border-color:var(--a4ember)}
.a4close{position:absolute;top:8px;right:9px;font-size:11px;line-height:1;opacity:.35;cursor:pointer;background:none;border:0;padding:2px;font-family:var(--a4text);color:var(--a4ink)}
.a4close:hover{opacity:.9;color:var(--a4ember)}

/* ---------- the opportunity arrow ---------- */
#a4arrow{position:absolute;z-index:5;width:181px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .6s ease-out,transform .6s ease-out}
#a4arrow.in{opacity:1;transform:none}
#a4arrow.hide{opacity:0}
#a4arrow svg{display:block;overflow:visible}
#a4arrow path{fill:none;stroke:var(--a4ember);stroke-width:1.2}
#a4arrow .shim{stroke-dasharray:52 22;animation:a4shim 4s linear infinite}
@keyframes a4shim{to{stroke-dashoffset:-74}}
#a4arrow a{font-family:var(--a4disp);font-size:8px;letter-spacing:1.8px;color:var(--a4ember);opacity:.78;margin-top:1px;padding-right:14px;text-align:right;pointer-events:auto;transition:opacity .2s}
#a4arrow a:hover{opacity:1}

/* ---------- mobile vertical route ---------- */
.a4mob{display:none}
.a4scrim{position:fixed;inset:0;background:rgba(11,11,12,.42);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.a4scrim.on{opacity:1;pointer-events:auto}
.a4sheet{position:fixed;left:5%;right:5%;bottom:0;z-index:21;background:var(--a4paper);color:var(--a4ink);border:1px solid var(--a4ink);border-bottom:0;padding:14px 16px 26px;transform:translateY(102%);transition:transform .34s cubic-bezier(.22,1,.36,1);max-height:86svh;overflow:auto;font-family:var(--a4text)}
.a4sheet.on{transform:none}
.a4grab{width:52px;height:3px;background:linear-gradient(90deg,var(--a4glow),var(--a4ember));margin:0 auto 14px}

/* ---------- no-JS / SEO fallback ---------- */
.a4fallback{margin-top:44px;font-size:13px;line-height:1.6;font-family:var(--a4text)}
.a4fallback h3{font-family:var(--a4disp);font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin:0 0 10px}
.a4fallback ul{margin:0;padding-left:18px;opacity:.75;max-width:70ch}
.a4fallback li{margin-bottom:6px}
.js .a4fallback{display:none}

@media (max-height:780px){#a4card{width:340px}#a4card .a4cap{aspect-ratio:16/8}}
@media (max-width:768px){
  .a4{height:auto;min-height:0;padding-bottom:12px}
  .a4chartbox,.a4drac,.a4compass{display:none}
  .a4mob{display:block;position:relative;margin-top:26px}
  #a4mob{display:block;width:100%;overflow:visible}
  .a4marg{flex-direction:column;align-items:flex-start;gap:4px;margin-top:18px}
  #a4card,#a4tag{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .a4ocean path,.a4 .wave,.a4 .ship,.a4 .flag,#a4arrow .shim,.a4dragon{animation:none!important}
  .a4 .wave{opacity:.07}
  .a4 .ship{offset-distance:42%}
  #a4arrow{transition:none}
  .a4 .isl .body{transition:none}
  .a4 .isl.claimed:hover .body,.a4 .isl.claimed.on .body{transform:none}
  .a4plate.open{animation:none}
  .a4sheet{transition:none}
}