/* Waragor: a quiet studio page so each app's own colours carry the show.
   Ink-blue and paper, with the amber shared with Diamond in the Rough as the one accent. */
:root {
  --paper: #F2F3F7; --surface: #FFFFFF; --ink: #141B3A; --muted: #59607A; --line: #D9DCE6;
  --brand: #1B2A6B; --accent: #FFC83D; --focus: #2F5BFF;
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E1226; --surface: #171C36; --ink: #EEF0FA; --muted: #A6ACC6; --line: #2A3150; --brand: #C9D2FF; --focus: #8EA6FF; color-scheme: dark }
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--text) }
a { color: inherit }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)) }

header.top { padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 22px/1 var(--round); color: var(--brand); letter-spacing: -.01em }
.mark img { width: 34px; height: 34px }
header.top nav a { font-weight: 600; font-size: 15px; color: var(--muted); text-decoration: none }
header.top nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px }

.intro { padding-block: 40px 44px }
.intro h1 { margin: 0; font: 900 clamp(64px, 15vw, 150px)/.9 var(--round); letter-spacing: -.035em; color: var(--brand) }
.intro h1 .dot { color: var(--accent) }
.intro p { margin: 18px 0 0; max-width: 34ch; font-size: clamp(19px, 2.6vw, 23px); color: var(--muted); text-wrap: pretty }

.label { font: 800 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px }
.apps { display: grid; grid-template-columns: 1fr; gap: 18px; padding-bottom: 56px }

/* Each app card wears its own app's colours. */
.app {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 24px; border-radius: 26px; text-decoration: none;
}
.app.ditr {
  --a-bg: #7C4626; --a-hi: #B0703F; --a-ink: #FFF3E2; --a-dim: #EBD2B6; --a-edge: #2A140A; --a-pop: #FFC83D;
  background: linear-gradient(135deg, var(--a-hi), var(--a-bg) 70%); color: var(--a-ink);
  border: 3px solid var(--a-edge); box-shadow: 0 6px 0 var(--a-edge);
}
.app .icon { width: 104px; height: 104px; border-radius: 24px; border: 3px solid var(--a-edge); box-shadow: 0 4px 0 var(--a-edge) }
.app h2 { margin: 0; font: 900 30px/1.05 var(--round) }
.app p { margin: 6px 0 12px; color: var(--a-dim); max-width: 46ch }
.pill { display: inline-block; font: 800 13px/1 var(--round); padding: 7px 11px; border-radius: 99px; background: var(--a-pop); color: var(--a-edge); border: 2px solid var(--a-edge) }
.links { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 150px }
.links a {
  text-align: center; font: 800 15px/1 var(--round); padding: 12px 16px; border-radius: 14px; text-decoration: none;
  background: rgba(255,243,226,.12); color: var(--a-ink); border: 2px solid var(--a-edge);
}
.links a.primary { background: var(--a-pop); color: var(--a-edge); box-shadow: 0 3px 0 var(--a-edge) }
.links a:hover { filter: brightness(1.06) }

.soon { border: 2px dashed var(--line); border-radius: 26px; padding: 22px 24px; color: var(--muted); margin: 0 }
.soon b { color: var(--ink); font-family: var(--round) }

.contact { border-top: 1px solid var(--line); padding-block: 36px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.contact h2 { margin: 0 0 6px; font: 800 20px/1.2 var(--round) }
.contact p { margin: 0; color: var(--muted) }
.contact a { font-weight: 700; color: var(--ink); overflow-wrap: anywhere }
footer { padding-block: 26px 44px; color: var(--muted); font-size: 14px }

@media (max-width: 720px) {
  .app { grid-template-columns: auto 1fr; gap: 16px; padding: 20px; align-items: start }
  .app .icon { width: 76px; height: 76px; border-radius: 18px }
  .app h2 { font-size: 25px }
  .links { grid-column: 1 / -1; flex-direction: row }
  .links a { flex: 1 }
  .contact { grid-template-columns: 1fr }
}