/* Atlantis Forge — shared styles. Flat "paper and wooden tile" look, mobile-first, light/dark aware. */
:root{
  --bg:#fae4c3; --card:#fff4e2; --soft:#f1d6ab;
  --fg:#2b3a45; --head:#143e5a; --muted:#5c6f80; --line:#143e5a; --shadow:#143e5a;
  --teal:#2a8f80; --mint:#5cc1a3; --orange:#f6a21e; --on-orange:#0f3147; --recess:#0f3147;
  --r:20px; --bw:3px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f3147; --card:#163f5c; --soft:#1f4c6b; --fg:#e9dcc3; --head:#fae4c3; --muted:#a9bccb; --line:#fae4c3; --shadow:#061a29; --recess:#061a29; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 ui-rounded,"SF Pro Rounded","Nunito","Helvetica Neue",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--head);padding:8px 12px;border:var(--bw) solid var(--line);border-radius:10px}
.skip:focus{left:8px;z-index:10}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--head);font-weight:900;font-size:18px}
.brand .mark{width:36px;height:36px;flex:none}
.nav{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:700}
.nav a{padding:8px 12px;border-radius:999px;color:var(--head)}
.nav a:hover{background:var(--soft)}
.nav a[aria-current]{background:var(--soft)}
@media (max-width:400px){.top{gap:8px}.nav a{padding:8px 9px}} /* brand + both links stay on one line down to 360px */

/* hero */
.hero{display:grid;gap:28px;padding:16px 0 48px;align-items:center}
.hero h1{font-size:clamp(36px,6vw,58px);line-height:1.06;color:var(--head);margin:0 0 16px;letter-spacing:-.01em}
.hero .lead{font-size:18px;max-width:46ch;margin:0 0 26px}
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:760px){.hero{grid-template-columns:1.05fr .95fr;padding:40px 0 64px}}

/* buttons */
.btn{display:inline-block;background:var(--orange);color:var(--on-orange);font-weight:800;padding:13px 22px;border-radius:14px;border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.btn.teal{background:var(--teal);color:#fff}
.btn.plain{background:var(--card);color:var(--head)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;box-shadow:none}

/* sections */
section{padding:28px 0}
h2{color:var(--head);font-size:30px;margin:0 0 6px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 24px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--shadow);min-height:250px;transition:transform .12s}
a.card:hover{transform:translate(-2px,-2px)}
.card h3{margin:4px 0 0;color:var(--head);font-size:22px}
.card p{margin:0}
.card .icon{width:68px;height:68px;border-radius:18px;border:var(--bw) solid var(--line);object-fit:cover}
.card.soon{border-style:dashed;box-shadow:none;background:transparent;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tag{font-size:12px;font-weight:800;border-radius:999px;padding:5px 11px;background:var(--soft);color:var(--head)}
.tag.o{background:var(--orange);color:var(--on-orange)}
.tag.t{background:var(--teal);color:#fff}

/* values */
.values{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.value{border-top:var(--bw) solid var(--line);padding-top:14px}
.value b{display:block;color:var(--head);font-size:18px;margin-bottom:4px}
.value p{margin:0;color:var(--muted)}

/* forge board illustration (home) */
.board{--t:clamp(96px,22vw,150px);display:grid;grid-template-columns:repeat(2,var(--t));grid-auto-rows:var(--t);gap:10px;justify-self:center;position:relative;padding:18px}
.board::before{content:"";position:absolute;inset:0;border-radius:26px;background:var(--card);border:var(--bw) solid var(--line);box-shadow:8px 8px 0 var(--shadow)}
.board>*{position:relative;border-radius:18px;border:var(--bw) solid var(--line);overflow:hidden}
.board .slot{border-style:dashed;background:var(--recess);opacity:.9}
.board .sp{background:url(/assets/img/slidepiece-icon-192.png) center/cover}
.board .dna{background:var(--teal);display:grid;place-items:center}
.board .dna img{width:60%;height:60%}
.board .forge{background:var(--orange);display:grid;place-items:center}
.board .forge .mark{width:60%;height:60%}
.board .out{transform:translate(-12%,-14%);box-shadow:4px 6px 0 var(--shadow);z-index:2}

/* product page */
.hero-art{justify-self:center;width:min(100%,440px)}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}
.features{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.features li{background:var(--card);border:var(--bw) solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.features li::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;background:var(--orange);margin-top:7px}
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;-webkit-overflow-scrolling:touch}
.shots img{flex:none;width:220px;height:auto;aspect-ratio:9/16;border-radius:18px;border:var(--bw) solid var(--line);scroll-snap-align:start;box-shadow:5px 5px 0 var(--shadow)}
.note{background:var(--card);border:var(--bw) solid var(--line);border-radius:16px;padding:16px 18px}
.note a{color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.rows{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r);padding:22px;box-shadow:6px 6px 0 var(--shadow)}
.contact b{display:block;color:var(--head);font-size:18px;margin-bottom:6px}
.contact a{color:var(--teal);font-weight:800;word-break:break-all}
.prose p{max-width:62ch}
.prose a{color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* footer */
footer{margin-top:48px;border-top:var(--bw) solid var(--line);padding:26px 0 44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;font-size:14px;color:var(--muted)}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--head);text-decoration:underline}

@media (prefers-reduced-motion: reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* page additions */
footer.wrap{width:calc(100% - 40px);max-width:1040px;margin:48px auto 0;padding:26px 0 44px} /* .wrap would otherwise override footer{} margin/padding */
h2+:not(.sub){margin-top:18px}
.card .icon{background:#fff} /* fills the transparent corners of the DNA Launcher icon */
/* card with its own links: the h3 link (.cover) stretches over the whole card, tag links sit above it */
.has-cover{position:relative}
.has-cover:hover{transform:translate(-2px,-2px)}
.cover::after{content:"";position:absolute;inset:0}
.has-cover .tags a{position:relative;z-index:1}
.has-cover .tags a:hover{text-decoration:underline}
.hero-art{height:auto;border-radius:var(--r)}
.contact p{margin:10px 0 0;color:var(--muted)}
.nowrap{white-space:nowrap} /* keeps a word together in CJK headlines */
.hero .lead{text-wrap:pretty} /* avoids a lone CJK character on the last line */
@media (prefers-color-scheme: dark){
  .kicker,.note a,.contact a,.prose a{color:var(--mint)} /* teal text is too dim on ink */
  .hero-art{box-shadow:8px 8px 0 var(--shadow)}
}