/* ─────────────────────────────────────────────────────────────
   The mark (2026-09-29)

   The site's one visual signature: the eye from the RKK mark,
   drawn with Vaidehi Prajapathi. Everything else stays quiet so
   this can be the thing only this site has.

   · .rk-eye     the full stop of every page title, in red. One per
                 page. The period stays in the text for copy and
                 screen readers; only the picture changes.
   · the search  the masthead glass is an eye. Search is looking.
   · veiled      a work not yet shown carries the eye with its lid
                 down. On December 10, 2026 (New York) it opens:
                 html.rk-opened, set in js/chrome.js.
   · the name    the drawn wordmark, on the home page only.

   Retired with it: the one red word in page titles. The eye is the
   only red a title carries.
   Files: images/mark/eye.svg, eye-shut.svg, wordmark.svg,
   favicon.svg (traced from images/Raghava KK Logo-01/02.png).
   ───────────────────────────────────────────────────────────── */

.rk-eye {
  display: inline-block;
  /* 2026-09-30: it sat on the baseline like a full stop and read as dropped.
     Now it sits at eye level: centred on the x-height, a touch larger, with air. */
  width: 0.42em; height: 0.26em;           /* eye.svg is 1234 × 765 */
  margin-left: 0.14em;
  vertical-align: 0.13em;
  background: var(--red, #E03A1F);
  -webkit-mask: url(../images/mark/eye.svg) center / contain no-repeat;
          mask: url(../images/mark/eye.svg) center / contain no-repeat;
  position: relative;
}
.rk-eye > .rk-eye-dot {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The red word is retired: a title's emphasis is ink, in the title's
   own posture. */
h1 em { color: inherit !important; font-style: inherit !important; }

/* Search: the glass becomes the eye. */
.masthead .mh-search svg { display: none !important; }
.masthead .mh-search::before {
  content: ""; display: block;
  width: 21px; height: 13px;
  background: currentColor;
  -webkit-mask: url(../images/mark/eye.svg) center / contain no-repeat;
          mask: url(../images/mark/eye.svg) center / contain no-repeat;
}
@media (max-width: 640px) {
  body .masthead .mh-search::before { width: 24px; height: 15px; }
}
/* 2026-09-29: the eye alone did not read as search. It now carries the word:
   a small pill, eye + SEARCH, same on every masthead (phones too). */
.masthead .mh-search {
  width: auto; height: 28px; gap: 0.45rem;
  padding: 0 0.75rem 0 0.6rem; margin: -6px 0 -6px 0.55rem;
  border: 1px solid currentColor; border-radius: 999px;
}
.masthead .mh-search::after {
  content: "Search"; display: block;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-style: normal; font-weight: 400;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
}
.masthead .mh-search:hover::before, .masthead .mh-search:focus-visible::before { animation: rkBlink .5s ease 1; }
@keyframes rkBlink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .masthead .mh-search:hover::before { animation: none; } }
@media (max-width: 640px) {
  body .masthead .mh-search { width: auto; height: 34px; margin: 0; padding: 0 0.55rem 0 0.5rem; gap: 0.35rem; flex: none; }
  body .masthead .mh-search::before { width: 18px; height: 11px; }
  body .masthead .mh-search::after { font-size: 8.5px; letter-spacing: 0.1em; }
  body .masthead { gap: 0.5rem !important; }
}
@media (max-width: 380px) {
  body .masthead .mh-search::after { content: none; }
  body .masthead .mh-search { padding: 0 0.5rem; }
}

/* Veiled works: the eye with its lid down, over the stand-in picture. Home field
   tiles, Lineage board thumbs, the Studio vitrine and its thumbs. */
.lin-node .frame:has(> img[src*="-veiled"]),
.vitrine-thumb:has(> img[src*="-veiled"]) { position: relative; }
:is(.rk-tile-frame, .lin-node .frame, .vitrine-thumb):has(> img[src*="-veiled"])::after,
.specimen.is-veiled .specimen-img-wrap::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 58%; max-width: 72px; aspect-ratio: 1234 / 765;
  transform: translate(-50%, -50%);
  background: var(--red, #E03A1F);
  -webkit-mask: url(../images/mark/eye-shut.svg) center / contain no-repeat;
          mask: url(../images/mark/eye-shut.svg) center / contain no-repeat;
  pointer-events: none; z-index: 2;
}
.specimen.is-veiled .specimen-img-wrap::after { width: 16%; max-width: 140px; transform: translate(-50%, 60%); }
html.rk-opened :is(.rk-tile-frame, .lin-node .frame, .vitrine-thumb):has(> img[src*="-veiled"])::after,
html.rk-opened .specimen.is-veiled .specimen-img-wrap::after {
  -webkit-mask-image: url(../images/mark/eye.svg);
          mask-image: url(../images/mark/eye.svg);
}

/* The name, drawn (home only). */
.wordmark .wordmark-drawn {
  display: block;
  width: clamp(260px, 48vw, 700px); height: auto;
  margin: 0.1em 0 0.16em;
}
/* The drifting tiles pass behind the name, not over it. */
.wordmark:has(.wordmark-drawn) { line-height: 0; z-index: 5; }
/* One red mark per page: on home the drawn name carries the eye, so
   the counter's full stop goes back to ink. */
.gods-counter strong em { color: inherit; }

/* The World pill (2026-10-04): a block for an icon, the word beside it, the same pill as Search. */
.masthead .mh-world {
  display: inline-flex; align-items: center; width: auto; height: 28px; gap: 0.45rem;
  padding: 0 0.75rem 0 0.65rem; margin: -6px 0 -6px 0.55rem;
  border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none;
}
.masthead .mh-world::before {
  content: ""; display: block; width: 9px; height: 9px; box-sizing: border-box;
  border: 1.5px solid currentColor; box-shadow: 3px -3px 0 -0.5px currentColor;
  margin: 2px 2px 0 0;
}
.masthead .mh-world::after {
  content: "World"; display: block;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-style: normal; font-weight: 400;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
}
.masthead .mh-world:hover, .masthead .mh-world:focus-visible { color: var(--paper); background: var(--red); outline: none; }
@media (max-width: 640px) { body .masthead .mh-world { display: none !important; } } /* phones reach it from the Index sheet */
/* The badge strip (js/critic.js) carries the World and who-is-looking, and hides these masthead copies once it is up.
   It loads a beat after the page, so until then the copies showed and the search pill wrapped: the whole page
   jumped down and back on every arrival (2026-10-09). Hidden from the first paint instead. Kids mode has no strip,
   so they show there; html.rk-no-strip (js/chrome.js, when critic.js fails to load) brings them back. */
html:not([data-rk-age="hidden"]):not(.rk-no-strip) .masthead .mh-world,
html:not([data-rk-age="hidden"]):not(.rk-no-strip) .masthead .rk-age { display: none !important; }