/* ═══════════════════════════════════════════════════════════════════════
   Queen Kylie · «מסך פיקוד» — THE COMMAND SCREEN
   ────────────────────────────────────────────────────────────────────────
   The home page's own stylesheet. It REPLACES styles.css on this one page
   rather than overriding it — the nineteen blog articles and the eight
   games still load styles.css and are untouched, so if the answer to this
   is no, one <link> goes back and nothing else moved.

   Overriding was tried first and abandoned on purpose: the old skin sets
   Cormorant on eight selectors, several of them more specific than a bare
   element (.hero h1, #gate h1, .link-btn .lt b), and a stylesheet that
   spends its length winning arguments is a stylesheet nobody can edit
   later.

   The brief is the one she picked out of eleven directions: the court as a
   MEASURING INSTRUMENT — a control room, not a shop and not a ballroom.
   Monospace, hairline rules, corners that are not rounded, panels that
   carry a code and a status.

   Two rules govern every colour here:
     · Zero gold. The old site was oxblood over gold; the app is pink over
       near-black. This page is the app.
     · The accent is spent in ONE place at a time — the thing she wants
       pressed. Everything else is steel.

   Cousine is the type because it is the only monospace on Google Fonts
   that carries Hebrew as well as Latin, and a bilingual instrument cannot
   change its face halfway.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces, lifted verbatim from queen-kylie-app/app.css so the site and
     the mini app read as one object seen from two sides */
  --s-0:#0A0710;      /* the page */
  --s-1:#120D1A;      /* a panel on the page */
  --s-2:#1A1424;      /* something raised on a panel */
  --s-3:#241C31;      /* pressed / selected */

  --ink:#F2F4F8;                        /* steel, not white */
  --muted:rgba(242,244,248,.52);
  --faint:rgba(242,244,248,.28);

  --accent:#FF2E88;
  --accent-hi:#FF57A0;
  --blood:#B01E2E;                      /* second voice — alarm only */

  --line:rgba(242,244,248,.09);
  --line-2:rgba(242,244,248,.18);

  --mono:'Cousine','SF Mono',ui-monospace,Menlo,'Courier New',monospace;
  --pad:clamp(58px,8vw,104px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--s-0);
  color:var(--ink);
  font-family:var(--mono);
  font-weight:400;
  font-size:14px;
  line-height:1.72;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* language visibility — hide only the inactive language, exactly as the
   old sheet did, because .lead/.sub rely on natural block display */
body[dir="ltr"] [data-lang-he]{display:none}
body[dir="rtl"] [data-lang-en]{display:none}

/* ── 1 · the room ──────────────────────────────────────────────────────
   The old page had two red spotlights and film grain at 5%. Both are gone:
   an instrument is lit evenly, and grain over 12px monospace is just blur.
   What replaces them is a scan texture — horizontal hairlines every 3px,
   faint enough to read as material rather than as an effect — and one slow
   sweep, which is the tell that the instrument is powered. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.55;
  background:repeating-linear-gradient(
    180deg, rgba(242,244,248,.03) 0 1px, transparent 1px 3px);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%, rgba(255,46,136,.06) 50%, transparent 58%);
  background-size:280% 100%;
  animation:ct-sweep 14s linear infinite;
}
@keyframes ct-sweep{ from{background-position:180% 0} to{background-position:-80% 0} }

/* the ember canvas and the trailing crown belonged to the oxblood skin */
#embers,#qk-cursor{display:none !important}

/* reveal-on-scroll, kept — the observer in index.html adds .in */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after{animation:none;background:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── 2 · type ──────────────────────────────────────────────────────────
   One family. Size carries hierarchy; weight is used in exactly two
   places — the h1 and the number in a readout. */
h1,h2,h3,h4{font-family:var(--mono);font-weight:700}
h1{
  font-size:clamp(36px,6vw,70px);
  line-height:1.03;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
h1 em{
  font-style:normal;
  color:var(--accent);
  text-shadow:0 0 30px rgba(255,46,136,.42);   /* the only glow on the page */
}
h2{
  font-size:clamp(20px,2.5vw,29px);
  line-height:1.18;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin-bottom:8px;
}
h3{font-size:15px;font-weight:700;letter-spacing:-.005em;margin-bottom:7px;line-height:1.35}
p{color:var(--muted);font-size:13.5px}
.lead,.sub{font-size:14.5px;line-height:1.78;color:rgba(242,244,248,.62);max-width:62ch}
.sub{margin-top:26px}
.lead{margin-top:14px}

/* every label on the page is one object: 11px, caps, tracked out, with a
   hairline that runs up to the text */
.eyebrow,.kicker,.jc-cat{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:16px;
}
.kicker::before,.eyebrow::before{
  content:'';
  display:inline-block;
  width:26px; height:1px;
  background:var(--line-2);
  vertical-align:middle;
  margin-inline-end:10px;
}
body[dir="rtl"] .eyebrow,body[dir="rtl"] .kicker,body[dir="rtl"] .jc-cat{letter-spacing:.1em}

/* ── 3 · controls ──────────────────────────────────────────────────────
   A button on an instrument is a rectangle with a hairline. The solid one
   is the only filled shape on the page, which is what makes it pressed. */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  border:1px solid var(--line-2);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .15s linear,background .15s linear,color .15s linear;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#0A0710;font-weight:700}
.btn.solid:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:#0A0710}
.btn.ghost{color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
body[dir="rtl"] .btn{letter-spacing:.06em}

/* ── 4 · age gate + intro ──────────────────────────────────────────────*/
#gate{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(10,7,16,.97);
}
#gate .card{
  background:var(--s-1); border:1px solid var(--line-2);
  padding:40px 32px; max-width:460px; text-align:center;
}
#gate .crown{font-size:26px;color:var(--accent);margin-bottom:14px}
#gate h1{font-size:clamp(22px,4vw,32px);margin-bottom:16px}
#gate p{margin-bottom:26px}
.gbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

#intro{
  position:fixed; inset:0; z-index:9990;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--s-0);
  animation:ct-introOut .8s 1.5s forwards;
}
#intro .ic{font-size:26px;color:var(--accent)}
#intro .ib{font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink)}
#intro .it{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
@keyframes ct-introOut{to{opacity:0;visibility:hidden}}

/* ── 5 · the header ────────────────────────────────────────────────────*/
header.top{
  position:sticky; top:0; z-index:60;
  background:rgba(10,7,16,.93);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:52px}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.top-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:1px;background:var(--line);border:1px solid var(--line)}
.lang button{
  background:var(--s-1); color:var(--muted); border:0; border-radius:0;
  padding:6px 12px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}
.lang button.on{background:var(--accent);color:#0A0710;font-weight:700}

.mainnav{border-top:1px solid var(--line);background:var(--s-0)}
.mainnav .wrap{display:flex;gap:0;overflow-x:auto;height:40px;align-items:stretch;scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{
  display:flex; align-items:center; padding:0 15px; white-space:nowrap;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border-inline-end:1px solid var(--line);
  transition:color .15s linear,background .15s linear;
}
.mainnav a:hover{color:var(--ink);background:var(--s-1)}
.mainnav a.nav-cta{color:var(--accent);font-weight:700}
body[dir="rtl"] .mainnav a{letter-spacing:.05em}

/* ── 6 · the status rail ───────────────────────────────────────────────
   A control room states what it is measuring before it shows you anything.
   The pulsing dot is the only moving thing above the fold. */
.ct-rail{
  border-bottom:1px solid var(--line);
  background:var(--s-1);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.ct-rail .wrap{display:flex;align-items:center;gap:16px;height:32px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.ct-rail .wrap::-webkit-scrollbar{display:none}
.ct-rail b{color:var(--ink);font-weight:400}
.ct-sep{color:var(--line-2)}
.ct-dot{
  display:inline-block; width:6px; height:6px;
  background:var(--accent); border-radius:50%;
  margin-inline-end:7px;
  animation:ct-pulse 2.4s ease-in-out infinite;
}
@keyframes ct-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,46,136,.5)}
  50%    {opacity:.45;box-shadow:0 0 0 6px rgba(255,46,136,0)}
}
@media(prefers-reduced-motion:reduce){.ct-dot{animation:none}}
body[dir="rtl"] .ct-rail{letter-spacing:.06em}

/* ── 7 · sections ──────────────────────────────────────────────────────
   Sections are separated by a rule and a stencilled code, not by
   whitespace and a gradient. The codes are Latin and numeric only: they
   are drawn by a pseudo-element, which cannot follow the language toggle,
   and Latin stencilling is what a real panel carries anyway. */
section{padding:var(--pad) 0;border-top:1px solid var(--line);position:relative}
section.hero{border-top:0;padding-top:clamp(44px,6vw,80px)}
section[data-code]::before{
  content:attr(data-code);
  position:absolute; top:0; inset-inline-start:24px;
  transform:translateY(-50%);
  background:var(--s-0); padding:0 12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}

/* ── 8 · the hero ──────────────────────────────────────────────────────*/
.hero-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,58px);
  align-items:center;
}
.hero-copy{min-width:0}
.hero-media-col{min-width:0}
.hero-media{position:relative;border:1px solid var(--line-2);background:#000;padding:9px}
.hero-media video,.hero-media img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.88) contrast(1.06);
}
/* registration marks — two L-shapes, the one ornament this page keeps */
.hero-media::before,.hero-media::after{
  content:''; position:absolute; width:14px; height:14px; pointer-events:none;
  border:1px solid var(--accent);
}
.hero-media::before{top:-1px;inset-inline-start:-1px;border-width:1px 0 0 1px}
.hero-media::after {bottom:-1px;inset-inline-end:-1px;border-width:0 1px 1px 0}

/* the readout. Three facts about the court, not statistics about him —
   an instrument reports what it holds. */
.ct-read{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0;
}
.ct-read div{background:var(--s-1);padding:11px 13px}
.ct-read span{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ct-read b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:3px}
.ct-read b.hot{color:var(--accent)}

/* the 24-hour trace: twelve gridlines and a floor, drawn from gradients so
   it costs nothing and needs no script */
.ct-graph{
  height:44px;border:1px solid var(--line);border-top:0;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8.3333%),
    linear-gradient(180deg,transparent 0 56%,rgba(255,46,136,.10) 56% 100%),
    var(--s-1);
}
.ct-graph::after{
  content:'';position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,46,136,.7),transparent);
  animation:ct-scan 6s linear infinite;
}
@keyframes ct-scan{from{inset-inline-start:-4px}to{inset-inline-start:100%}}
@media(prefers-reduced-motion:reduce){.ct-graph::after{animation:none;inset-inline-start:30%}}

/* ── 9 · the app panel ─────────────────────────────────────────────────
   The one block on this page that is not here to rank. It moves a man off
   a web page and into the room where he spends, so it is the only filled
   header strip and it carries the only solid button above the fold. */
#app-panel{border-top:1px solid var(--line-2)}
.ct-app{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,46,136,.07),transparent 62%),var(--s-1);
}
.ct-app-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;height:30px;
  background:var(--s-2);border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.ct-app-head em{font-style:normal;color:var(--accent)}
.ct-app-body{padding:clamp(26px,4vw,44px) clamp(18px,3vw,38px)}
.ct-feat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:28px 0 30px;
}
.ct-feat div{background:var(--s-1);padding:16px 14px}
.ct-feat b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:5px;font-weight:700}
.ct-feat span{display:block;font-size:12.5px;color:var(--muted);line-height:1.62}

/* ── 10 · panels: services, shop, games, journal ───────────────────────
   Every card is the same object: flat surface, one hairline, no radius,
   and a header strip carrying a code and a status pinned to the far edge.
   Both are read from data attributes so the markup stays semantic and the
   SEO copy inside is untouched. */
.grid,.journal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;                          /* panels share a rule instead of floating */
  background:var(--line);
  border:1px solid var(--line);
  margin-top:30px;
}
.card2,.j-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--s-1);
  border:0;
  padding:44px 20px 22px;
  transition:background .18s linear,color .18s linear;
}
.card2::before,.j-card::before{
  content:attr(data-code);
  position:absolute; inset-inline:0; top:0;
  height:28px; line-height:28px; padding-inline:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  background:var(--s-2); border-bottom:1px solid var(--line);
}
.card2::after,.j-card::after{
  content:attr(data-state);
  position:absolute; top:0; inset-inline-end:12px;
  height:28px; line-height:28px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.card2:hover,.j-card:hover{background:var(--s-2)}
.card2 .ic{font-size:20px;line-height:1;color:var(--accent);margin-bottom:18px}
.j-card p{flex:1}
.price,.jc-more{
  display:block;margin-top:18px;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.card2 .btn{margin-top:14px;align-self:flex-start}

/* ── 11 · gallery ──────────────────────────────────────────────────────*/
.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px;
}
.tile{position:relative;background:#000;aspect-ratio:3/4;overflow:hidden}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86) contrast(1.06);transition:filter .3s}
.tile:hover img,.tile:hover video{filter:saturate(1) contrast(1.02)}
.tile.empty::after{content:'♛';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.3;font-size:26px}
.vtag{
  position:absolute;top:8px;inset-inline-start:8px;z-index:2;
  background:rgba(10,7,16,.85);border:1px solid var(--line-2);
  padding:3px 8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}

/* ── 12 · about ────────────────────────────────────────────────────────*/
.about-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(24px,3.4vw,52px);align-items:start;margin-top:30px}
.about-copy{min-width:0}
.about-copy .lead{margin-top:0}
.about-copy .lead + .lead{margin-top:14px}
.portrait{position:relative;border:1px solid var(--line-2);padding:9px;background:#000}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88) contrast(1.06)}
.portrait.empty{min-height:280px}
.portrait.empty::after{content:'♛';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.3;font-size:30px}

/* ── 13 · uplink rows ──────────────────────────────────────────────────
   Not buttons — channels on a patch bay. Icon, label, arrow, one rule
   between each. */
.links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px;
}
.link-btn{
  display:flex;align-items:center;gap:14px;
  background:var(--s-1);padding:16px 16px;
  transition:background .15s linear,color .15s linear;
}
.link-btn:hover{background:var(--s-2);color:var(--accent)}
.link-btn .li{font-size:15px;width:22px;text-align:center;color:var(--accent);flex:none}
.link-btn .lt{flex:1;min-width:0}
.link-btn .lt b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.link-btn .lt span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:0;text-transform:none}
.link-btn .arr{color:var(--faint);flex:none}
body[dir="rtl"] .link-btn .arr{transform:scaleX(-1)}

/* ── 14 · protocol (FAQ) ───────────────────────────────────────────────*/
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 2px}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--accent);font-weight:400;font-size:15px;transition:transform .2s;flex:none}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p{margin-top:12px}

/* ── 15 · footer ───────────────────────────────────────────────────────*/
footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--faint);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
.social{display:flex;gap:14px;font-size:14px}
body[dir="rtl"] footer{letter-spacing:.04em}

/* the floating chat button becomes a docked terminal tab */
.chat-fab{
  position:fixed;bottom:20px;inset-inline-end:20px;z-index:900;
  display:flex;align-items:center;gap:9px;
  border-radius:0;border:1px solid var(--accent);
  background:var(--s-1);color:var(--ink);
  padding:11px 16px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .15s linear,color .15s linear;
}
.chat-fab:hover{background:var(--accent);color:#0A0710}

/* ── 16 · narrow screens ───────────────────────────────────────────────
   The instrument does not turn into a brochure on a phone: the columns
   stack and everything else holds, because 12px monospace is the point. */
@media(max-width:900px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .hero-media-col{order:-1;max-width:420px;margin-inline:auto;width:100%}
  section{padding:clamp(46px,10vw,68px) 0}
}
@media(max-width:520px){
  body{font-size:13.5px}
  .ct-read span{font-size:8.5px;letter-spacing:.12em}
  .ct-read b{font-size:15px}
  .mainnav a{padding:0 12px}
  .card2,.j-card{padding:42px 16px 20px}
}