/* ============================================================================
   RoboWorld Entertainment — rebuilt from the company's published record
   ----------------------------------------------------------------------------
   No logo, screenshot, stylesheet or press kit survived: the Maskborne listing
   is gone from the app stores and the studio published no site that was kept.
   What survived is the store description, the coverage of the prototype, and
   the record of what the build became.

   So this is a rebuild. The wordmark is set in type, and every graphic on the
   site is drawn here, which the pages say where it matters.

     ink      #08090D   page, hero
     ink-2    #101219   cards
     mask     #FF3355   the accent (the mask motif)
     signal   #22D3EE   secondary accent
     type     Inter for text, JetBrains Mono for labels
   ========================================================================== */

@font-face { font-family: 'Inter'; src: url('../font/Inter.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../font/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #08090d;
  --ink-2: #101219;
  --ink-3: #171a23;
  --paper: #ffffff;
  --panel: #f5f6f8;
  --line: #e3e5ea;
  --line-d: rgba(255,255,255,.14);
  --text: #33373f;
  --soft: #616670;
  --mask: #ff3355;
  --mask-dk: #c3113a;
  --signal: #22d3ee;
  --cyan-dk: #0b6b7a;
  --wrap: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--mask-dk); text-decoration: none; }
a:hover { color: var(--mask); }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .7rem; line-height: 1.05; letter-spacing: -.03em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: .95rem; font-weight: 600; }
p { margin: 0 0 1.05rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 3.6vw, 2.4rem); }
.center { text-align: center; }
.muted { color: var(--soft); }
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 1.9rem; } .mt-4 { margin-top: 2.6rem; }
.mb-0 { margin-bottom: 0; }
.small { font-size: .9rem; }
.skip { position: absolute; left: -9999px; top: 0; background: #c81542; color: #fff; padding: .7rem 1.1rem; z-index: 999; }
.skip:focus { left: .5rem; top: .5rem; }

.label { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mask-dk); margin: 0 0 .8rem; }
.rule { width: 48px; height: 3px; background: var(--mask); margin: 0 0 1.1rem; }
.center .rule { margin-inline: auto; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--soft); max-width: 60ch; }
.center .lede { margin-inline: auto; }

/* ------------------------------------------------------------------- header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; background: rgba(8,9,13,.86); }
.header-inner { display: flex; align-items: center; gap: 1rem; padding-block: 1.15rem; }
.brand { font-family: var(--mono); font-weight: 700; font-size: .98rem; letter-spacing: .18em; color: #fff; text-transform: uppercase; }
.brand b { color: var(--mask); font-weight: 700; }
.brand:hover { color: #fff; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; color: #fff; }
.nav a { display: block; color: #c9ced6; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .55rem .75rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--mask); }
.header-cta { margin-left: .7rem; }
.nav-toggle { display: none; width: 44px; height: 40px; background: none; border: 1px solid rgba(255,255,255,.4); cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; margin: 4px auto; }
@media (max-width: 1000px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
}
.site-header.on-light { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header.on-light .brand { color: var(--ink); }
.site-header.on-light .brand b { color: var(--mask-dk); }
.site-header.on-light .nav ul { color: var(--ink); }
.site-header.on-light .nav a { color: var(--soft); }
.site-header.on-light .nav a:hover, .site-header.on-light .nav a[aria-current="page"] { color: var(--mask-dk); }
.site-header.on-light .nav-toggle { border-color: var(--line); }
.site-header.on-light .nav-toggle span { background: var(--ink); }
.drawer { position: fixed; inset: 0 0 auto; z-index: 190; background: var(--ink); color: #fff; padding: 1rem 0 1.4rem; transform: translateY(-102%); visibility: hidden; transition: transform .26s var(--ease); }
.drawer.is-open { transform: none; visibility: visible; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { border-bottom: 1px solid var(--line-d); }
.drawer a { display: block; padding: .8rem .2rem; color: #fff; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* --------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(680px 460px at 72% 18%, #000 0%, transparent 78%); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; padding: clamp(7.2rem, 13vw, 10rem) 0 clamp(2.8rem, 6vw, 4.6rem); }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--mask); }
.hero p { color: #c4c9d2; }
.hero .label { color: var(--mask); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.hero-art { background: rgba(255,255,255,.03); border: 1px solid var(--line-d); padding: .8rem; }

.page-hero { background: var(--ink); color: #fff; }
.page-hero .wrap { padding: clamp(7rem, 12vw, 9rem) 0 clamp(2.4rem, 4.6vw, 3.4rem); }
.page-hero .label { color: var(--mask); }
.page-hero .label a { color: var(--mask); }
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #c4c9d2; margin-bottom: 0; }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(2.6rem, 5.6vw, 4.4rem) 0; }
.section-panel { background: var(--panel); }
.section-ink { background: var(--ink); color: #c4c9d2; }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }
.section-ink p { color: #c4c9d2; }
.section-ink .label { color: var(--mask); }
.section-ink a { color: var(--signal); }
.section-ink a.btn-mask, .section-ink a.btn-mask:hover { color: #fff; }
.section-head { max-width: 48rem; margin-bottom: 2.2rem; }
.section-head.center { margin-inline: auto; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4.6vw, 3.4rem); align-items: center; }
.split-wide { grid-template-columns: 1.14fr .86fr; }
.split-narrow { grid-template-columns: .92fr 1.08fr; }
@media (max-width: 880px) { .split, .split-wide, .split-narrow { grid-template-columns: 1fr; } }

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--mask); padding: 1.5rem 1.5rem 1.4rem; }
.section-panel .card { background: #fff; }
.section-ink .card { background: var(--ink-2); border-color: var(--line-d); }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .95rem; margin-bottom: 0; color: var(--soft); }
.section-ink .card p { color: #b9bfc9; }

.figure { margin: 0; }
.figure img { width: 100%; border: 1px solid var(--line); background: #fff; }
.figure figcaption { font-family: var(--mono); font-size: .78rem; color: var(--soft); margin-top: .55rem; }
.diagram { margin: 0; background: var(--paper); border: 1px solid var(--line); padding: .9rem; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { font-family: var(--mono); font-size: .78rem; color: var(--soft); margin-top: .5rem; }
.section-ink .diagram { background: var(--ink-2); border-color: var(--line-d); }
.section-ink .diagram figcaption { color: #98a0ab; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .62rem; width: 8px; height: 8px; background: var(--mask); }

.specs { list-style: none; margin: 0; padding: 0; }
.specs li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.specs .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.specs .v { text-align: right; color: var(--ink); font-weight: 600; }
.section-ink .specs li { border-bottom-color: var(--line-d); }
.section-ink .specs .v { color: #fff; }
.section-ink .specs .k { color: #98a0ab; }

.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.pill { display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; border: 1px solid var(--line); color: var(--ink); padding: .32rem .7rem; }
.section-ink .pill { border-color: var(--line-d); color: #fff; }

.callout { background: #fff1f3; border-left: 3px solid var(--mask); padding: 1.1rem 1.2rem; }
.callout h4 { margin-bottom: .35rem; }
.callout p:last-child { margin-bottom: 0; }
.notice { background: #fff7e8; border: 1px solid #f0dcb4; padding: 1rem 1.1rem; font-size: .94rem; }
.section-ink .notice { background: rgba(255,255,255,.05); border-color: var(--line-d); }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1.5rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .5rem; width: 10px; height: 10px; background: var(--mask); }
.timeline .when { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mask-dk); margin-bottom: .25rem; }
.timeline h3 { font-size: 1rem; margin-bottom: .2rem; }
.timeline p { margin: 0; font-size: .94rem; color: var(--soft); }
.section-ink .timeline { border-left-color: var(--line-d); }
.section-ink .timeline p { color: #b9bfc9; }
.section-ink .timeline .when { color: var(--mask); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--mono); font-size: .76rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .95rem 1.7rem; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.btn-mask { background: #c81542; color: #fff; border-color: #c81542; }
.btn-mask:hover { background: #e01a4a; border-color: #e01a4a; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--mask); color: var(--mask-dk); }
.link-arrow { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mask-dk); }
.link-arrow::after { content: " \2192"; }

/* -------------------------------------------------------------------- forms */
.form { display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: .3rem; }
.field .req { color: var(--mask-dk); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font-family: var(--font); font-size: .95rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: .7rem .8rem; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mask); outline-offset: 1px; }
.field .err { display: block; font-size: .78rem; color: #b3261e; margin-top: .25rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.checkbox-field label { display: flex; gap: .6rem; font-size: .9rem; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--font); }
.checkbox-field input { width: auto; margin-top: .3rem; }
.form-note { font-size: .84rem; color: var(--soft); }
.form-status { font-size: .9rem; background: #eaf5ee; border: 1px solid #b9dcc6; padding: .7rem .9rem; }

/* ------------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: #b3b9c3; padding: clamp(2.4rem, 4.4vw, 3.4rem) 0 1.3rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer p, .site-footer li { font-size: .9rem; color: #b3b9c3; }
.site-footer a { color: #d6dbe2; }
.site-footer a:hover { color: var(--mask); }
.site-footer h4 { color: #fff; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .8rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .4rem; }
.footer-bottom { border-top: 1px solid var(--line-d); margin-top: 2.2rem; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between; font-size: .8rem; color: #8b929c; }

.to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 150; width: 42px; height: 42px; border: 0; background: var(--mask); color: #fff;
  cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .site-header, .drawer, .to-top, .site-footer { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* --------------------------------------------------------------- photography
   The studio's own artwork is gone, so the atmosphere on this site comes from
   licence-cleared photographs. They are scenery, not the product: every one is
   captioned, and credits.html names the photographer and licence. Where text
   sits over a photograph, the section keeps a solid ink background and the
   photograph is layered behind it, so contrast never depends on the image. */

.hero, .page-hero, .section-ink { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; }
.hero-bg.dim { opacity: .26; }
.hero::after, .page-hero::after, .section-ink.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,13,.55) 0%, rgba(8,9,13,.82) 55%, rgba(8,9,13,.95) 100%);
}
.hero .wrap, .page-hero .wrap, .section-ink.has-photo .wrap { position: relative; z-index: 2; }

/* image strips */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); }
.gallery img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .8rem .6rem; color: #fff;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(8,9,13,.82); }
.section-ink .gallery figure { border-color: var(--line-d); }

/* a single wide photo band, used as a divider */
.photo-band { margin: 0; position: relative; overflow: hidden; }
.photo-band img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.photo-band figcaption { position: absolute; right: .8rem; bottom: .6rem; color: #fff; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(8,9,13,.72); padding: .25rem .5rem; }

/* photo inside a split */
.photo { margin: 0; }
.photo img { width: 100%; height: clamp(240px, 32vw, 380px); object-fit: cover; border: 1px solid var(--line); }
.photo figcaption { font-family: var(--mono); font-size: .72rem; color: var(--soft); margin-top: .5rem; }
.section-ink .photo figcaption, .hero .photo figcaption { color: #98a0ab; }