/* Kausar Studio — direction "A · Senja", dark only. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/plus-jakarta-sans-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  --bg: #0d1017;
  --bg2: #141824;
  --line: #262b3a;
  --ink: #f3ecdc;
  --muted: #a39a86;
  --primary: #38bdf8;
  --on-primary: #04121c;
  --head: "Plus Jakarta Sans", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 1200px;
  --gutter: 40px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.label, .eyebrow, .tags { font-family: var(--mono); }

/* Lucide icons (inline SVG, follow text colour) */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
.with-icon { display: flex; align-items: center; gap: 10px; }
.with-icon .icon { width: 1.05em; height: 1.05em; color: var(--primary); }
[x-cloak] { display: none !important; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(13, 16, 23, 0.94); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 800 18px var(--head); }
.nav-menu { display: flex; gap: 28px; }
.nav-menu a { color: #d8cfba; text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-menu a:hover { color: var(--ink); }
.nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font: 700 15px var(--head); text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: #7dd3fc; }
.btn-ghost { color: var(--ink); background: var(--bg2); border: 1px solid #5b6070; box-shadow: 0 4px 16px rgba(0,0,0,.35); } /* solid so it reads over busy hero art */
.btn-ghost:hover { border-color: var(--ink); background: #1b2030; }
.btn .icon { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- hero (N1) ---------- */
.hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
/* The art sits inside the content width and fades out on both sides, so on wide screens it neither
   zooms in nor runs to the window edge and pulls the hero to the right. The left fade is eased so the
   text stays readable: about a quarter of the art shows through behind the end of the lead. */
.hero-art {
  position: absolute; top: 0; height: 100%; width: min(84%, 1100px); right: max(0px, calc((100% - var(--wrap)) / 2));
  object-fit: cover; object-position: 50% 0%; /* top edge: the sea and boats */
  --fade: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.03) 20%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.47) 50%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.88) 70%, #000 80%, #000 86%, rgba(0,0,0,.6) 94%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(13,16,23,1) 0%, rgba(13,16,23,.6) 12%, rgba(13,16,23,.2) 26%, rgba(13,16,23,0) 40%),
    linear-gradient(180deg, rgba(13,16,23,.6) 0%, rgba(13,16,23,0) 22%);
}
.hero-in { position: relative; padding-top: 72px; padding-bottom: 72px; }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: clamp(40px, 6vw, 60px); max-width: 8.2em; margin-bottom: 16px; } /* two lines: "Small studio," / "made with care." */
.lead { color: #d3cab5; font-size: 17px; max-width: 30em; margin-bottom: 26px; }

/* ---------- sections ---------- */
.section { padding-top: 64px; padding-bottom: 64px; }
.sec-title { font-size: 28px; margin-bottom: 22px; }
.cards { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.game-card .shot img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.card-body { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 20px; }
.app-icon { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.card h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.tags { color: var(--muted); font-size: 12.5px; }
.card-tagline { color: #d3cab5; font-size: 14.5px; margin-top: 8px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }
.card-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 32px; border-style: dashed; color: var(--muted); min-height: 220px; }
.card-soon .logo { color: #4a5063; margin-bottom: 6px; }
.card-soon .label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.card-soon h3 { color: var(--ink); font-size: 19px; }

.about { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); }
.about h3 { color: var(--primary); font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0; }
.about p { color: var(--muted); font-size: 15px; }

.faq { border-top: 1px solid var(--line); }
.faq-list { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 700 17px/1.4 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq-chevron { width: 20px; height: 20px; color: var(--muted); transition: transform .2s ease; }
.faq details[open] .faq-chevron { transform: rotate(180deg); }
.faq details p { color: #d3cab5; padding: 0 0 18px; max-width: 46rem; }
.faq details p a { margin-left: 4px; }

.contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); }
.contact .sec-title { margin-bottom: 6px; }
.contact p { color: var(--muted); }
.mail { display: inline-flex; align-items: center; gap: 10px; font: 500 15px var(--mono); color: var(--ink); border: 1px solid #3a3f4d; border-radius: 10px; padding: 12px 18px; text-decoration: none; overflow-wrap: anywhere; }
a.mail:hover { border-color: var(--primary); }
.mail-pending { color: var(--muted); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font: 700 15px var(--head); }
.footer-brand small { font: 13px var(--body); color: var(--muted); margin-left: 4px; }
.footer-links { display: flex; gap: 20px; font-size: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ---------- game page ---------- */
.game-head { display: flex; gap: 22px; align-items: center; padding-top: 56px; }
.game-head .app-icon { width: 96px; height: 96px; border-radius: 22px; }
.game-head h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 6px; }
.game-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; padding-top: 32px; }
.tagline { font: 700 20px/1.4 var(--head); margin-bottom: 14px; }
.summary { color: #d3cab5; margin-bottom: 24px; }
.features { padding: 20px 22px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; }
.features ul { list-style: none; margin: 0; padding: 0; }
.features li { position: relative; padding-left: 22px; margin: 6px 0; color: #d3cab5; font-size: 15px; }
.features li .icon { position: absolute; left: 0; top: .3em; width: 16px; height: 16px; color: var(--primary); }
.features h2 { font-size: 18px; margin-bottom: 8px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 16 / 9; object-fit: cover; }
.gallery figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; border-top: 1px solid var(--line); }

/* game guide: how to play, tips, foes */
.guide { border-top: 1px solid var(--line); }
.guide h3 { font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
.guide p, .guide dd { color: #d3cab5; font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.steps li { counter-increment: step; padding: 20px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
/* step number and title share one row */
.steps .step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.steps .step-title::before { content: counter(step); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font: 800 15px var(--head); }
.tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 40px; }
.tips li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.guide-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 14px; }
.steps .guide-img { margin-bottom: 16px; }
.foes { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
.foes div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.foes dt { font: 700 16px var(--head); color: var(--primary); margin-bottom: 4px; }
.foes dd { margin: 0; }

/* ---------- legal pages ---------- */
.legal-page { max-width: 880px; }
.legal-head { padding-top: 56px; padding-bottom: 8px; }
.legal-head .label { color: var(--primary); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.legal-head h1 { font-size: clamp(32px, 5vw, 46px); margin: 10px 0 8px; }
.legal-head .effective { color: var(--muted); font: 13px var(--mono); }
.toc { margin: 28px 0; padding: 18px 22px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
.toc h2 { font-size: 14px; font-family: var(--mono); font-weight: 500; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 15px; }
.toc li { margin: 4px 0; break-inside: avoid; }
.prose { max-width: 72ch; padding-bottom: 32px; }
.prose > blockquote:first-child { margin: 0 0 32px; padding: 18px 22px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.prose blockquote p { color: var(--ink); }
.prose h2 { font-size: 22px; margin: 40px 0 12px; scroll-margin-top: 90px; }
.prose p, .prose li { color: #d9d1bf; margin: 0 0 12px; }
.prose ul { padding-left: 22px; margin: 0 0 12px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: 10px 10px 10px 0; }
.prose th { color: var(--muted); font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 56px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* ---------- Games / Apps / About / Contact ---------- */
.nav-menu a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.page-head { padding-top: 56px; max-width: 46rem; }
.page-head h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 14px; }
.section-tight { padding-top: 32px; padding-bottom: 40px; }
.h3 { font-size: 19px; font-weight: 700; }
.prose-line { color: #d3cab5; max-width: 46rem; }
.status { max-width: 46rem; }
.status .label { color: var(--primary); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.status p:not(.label) { color: #d3cab5; }
.plain-list { margin: 12px 0 0; padding-left: 20px; color: #d3cab5; }
.plain-list li { margin: 6px 0; }
.links-lg { font-size: 16px; gap: 10px 28px; margin-top: 0; }
.section-tight .mail { display: inline-block; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-top: 96px; padding-bottom: 120px; }
.notfound .logo { margin: 0 auto 20px; color: var(--primary); }
.notfound h1 { font-size: 40px; margin-bottom: 10px; }
.notfound p { color: var(--muted); margin-bottom: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .cards, .game-intro { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
  .nav-toggle .icon { width: 20px; height: 20px; display: block; }
  .js .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
  .js .nav-menu.is-open { display: flex; }
  .js .nav-menu a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav-menu { gap: 16px; }

  /* Mobile hero order: eyebrow, title, full uncropped art, description, buttons.
     .hero-in becomes "contents" so its children can sit around the image. */
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero-in { display: contents; }
  .hero-scrim { display: none; }
  .hero .eyebrow { order: 1; padding: 40px var(--gutter) 0; }
  .hero h1 { order: 2; font-size: 38px; max-width: calc(8.2em + 2 * var(--gutter)); padding: 0 var(--gutter); margin-bottom: 24px; }
  .hero-art { order: 3; position: static; width: 100%; height: auto; object-fit: initial; -webkit-mask-image: none; mask-image: none; }
  .hero .lead { order: 4; padding: 24px var(--gutter) 0; margin-bottom: 24px; }
  .hero .actions { order: 5; padding: 0 var(--gutter) 40px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .contact { flex-direction: column; align-items: flex-start; }
  .footer-in { flex-direction: column; align-items: flex-start; }
  .game-head { align-items: flex-start; gap: 16px; padding-top: 36px; }
  .game-head .app-icon { width: 72px; height: 72px; border-radius: 18px; }
  .gallery { grid-template-columns: 1fr; }
  /* keep real table semantics and column labels on phones; the table scrolls sideways if it must */
  .prose table { font-size: 13.5px; }
  .prose th, .prose td { min-width: 9.5em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}