/* ═══════════════════════════════════════════════════════════════════════
   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}
}

/* ══════════════════════════════════════════════════════════════════════
   DEUTSCH — what the article pages add on top of the instrument
   The German site is a reading site before it is a landing page: the
   searches it answers are questions, and a question answered in two lines
   ranks below one answered properly. So there is a prose column here that
   the home page never needed.
   ══════════════════════════════════════════════════════════════════════ */
.prose{ max-width:66ch; margin:0 auto }
.prose p{ font-size:15px; line-height:1.75; color:rgba(242,244,248,.72); margin-bottom:16px }
.prose h2{
  margin:44px 0 14px; font-size:clamp(18px,2.2vw,24px);
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.prose h3{ margin:28px 0 10px; font-size:15px; color:var(--ink) }
.prose ul{ margin:0 0 16px; padding-left:20px }
.prose li{ font-size:15px; line-height:1.7; color:rgba(242,244,248,.72); margin-bottom:8px }
.prose strong{ color:var(--ink); font-weight:700 }
.prose a{ color:var(--accent); border-bottom:1px solid rgba(255,46,136,.35) }
.prose a:hover{ border-bottom-color:var(--accent) }

/* the line that is hers, pulled out of the prose */
.rule{
  border-inline-start:2px solid var(--accent);
  background:rgba(255,46,136,.08);
  padding:16px 18px; margin:26px 0;
  font-size:16px; line-height:1.6; color:var(--ink); font-weight:700;
}
.lead-de{ font-size:17px; line-height:1.68; color:rgba(242,244,248,.8); margin-bottom:26px }

/* the glossary — the reason a German reader stays on the page */
.gloss{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:26px 0 }
.gloss div{ background:var(--s-1); padding:14px 16px }
.gloss dt{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700 }
.gloss dd{ margin:6px 0 0; font-size:14px; line-height:1.6; color:rgba(242,244,248,.7) }

.faq-de details{ border-top:1px solid var(--line); padding:18px 0 }
.faq-de details:last-of-type{ border-bottom:1px solid var(--line) }
.faq-de summary{ cursor:pointer; list-style:none; font-size:14.5px; font-weight:700; display:flex; justify-content:space-between; gap:14px }
.faq-de summary::-webkit-details-marker{ display:none }
.faq-de summary i{ font-style:normal; color:var(--accent) }
.faq-de details[open] summary i{ transform:rotate(45deg); display:inline-block }
.faq-de p{ margin:12px 0 0; font-size:14px; color:var(--muted) }

.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:34px }
.next a{ background:var(--s-1); padding:18px 16px; display:block }
.next a:hover{ background:var(--s-2) }
.next b{ display:block; font-size:14px; font-weight:700; margin-bottom:5px }
.next span{ display:block; font-size:13px; color:var(--muted); line-height:1.55 }

/* The stencilled code hangs on the section's top border, half above it. On
   the FIRST section that border sits directly under the sticky header, so
   the code was printed through the status rail. It needs room, not a
   different position — the code marks where a section begins, and moving it
   would break what it means. */
main > section:first-child{ margin-block-start:34px }

/* ── SIE ──────────────────────────────────────────────────────────────
   A findom site with no picture of her is a leaflet. It is also worse for
   ranking than it looks: how long a reader stays is measured, and nobody
   stays on eight hundred words of grey.

   The film is streamed from the .com and the stills are local. Where a
   video sits does almost nothing for search; an image's ALT text does, and
   a German alt line only exists on a German site. */
.de-hero{
  position:relative; margin:0 0 30px;
  border:1px solid var(--line-2); background:#000; padding:8px;
}
.de-hero video{
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.88) contrast(1.06);
}
.de-hero::before,.de-hero::after{
  content:''; position:absolute; inline-size:14px; block-size:14px;
  border:1px solid var(--accent); pointer-events:none;
}
.de-hero::before{ inset-block-start:-1px; inset-inline-start:-1px; border-width:1px 0 0 1px }
.de-hero::after { inset-block-end:-1px;  inset-inline-end:-1px;  border-width:0 1px 1px 0 }

.de-gal{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:26px 0;
}
.de-gal figure,.de-gal video{ margin:0; position:relative; background:#000 }
.de-gal img,.de-gal video{
  /* block-size:100% inside a figure of auto height resolves to ZERO, and a
     lazy image with no height never begins to load — measured: 0 of 6, with
     the files answering 200. aspect-ratio alone gives it the shape. */
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:3/4; object-fit:cover;
  filter:saturate(.86) contrast(1.06); transition:filter .3s;
}
.de-gal img:hover,.de-gal video:hover{ filter:saturate(1) contrast(1.02) }
/* the caption is for the crawler and the screen reader, not for the wall */
.de-gal figcaption{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.de-port{ margin:26px 0; border:1px solid var(--line-2); background:#000; padding:8px }
.de-port img{ display:block; inline-size:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.88) contrast(1.06) }