/* ════════════════════════════════════════════════════════════════════════
   shuk-skin — Watchtower, wearing shuk.world's clothes.

   Loaded AFTER css/watchtower.css so it overrides without editing it: the
   original stays pristine and a future upstream build drops straight in.

   Watchtower's own README says the surface is token-driven — override
   --ground, --beam, --ink and --haze and the whole thing changes. That is
   exactly what this does, plus type and radii. The tower, the beam sweep,
   the release wall, the scene chips and the nomination form are untouched.
═══════════════════════════════════════════════════════════════════════════ */

:root, :root:not([data-theme="dark"]) {
  /* shuk.world's palette, in Watchtower's variable names */
  --ground:  #EDF3F8;
  --ink:     #0F2335;   /* --deep-sky  */
  --haze:    #46535E;   /* --haze, AA on this ground */
  --beam:    #E8932A;   /* --saffron, fills and rules only */
  --beam-t:  #8A5A10;   /* saffron is 2.4:1 as small text — this is the text tone */
  --flare:   #B8456B;   /* --magenta  */
  --cool:    #6E9CC3;   /* --azure    */
  --link:    #2A3E52;   /* --night-sky */
  --panel:   rgba(255,255,255,0.62);
  --edge:    #A2B5C3;   /* --mist     */

  /* sharp and dense, like the rest of the site */
  --r: 4px;

  --display: "Fraunces", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --hebrew:  "Frank Ruhl Libre", "Noto Sans Hebrew", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F2335;
    --ink:    #F2F7FA;
    --haze:   #A2B5C3;
    --beam:   #E8932A;
    --beam-t: #E8932A;
    --link:   #A0BDCF;
    --panel:  #16304a;
    --edge:   rgba(162,181,195,0.28);
  }
}

/* body copy is Inter Tight, as everywhere else on the site */
body { font-family: "Inter Tight", system-ui, -apple-system, sans-serif; }

/* The masthead keeps its name and its scale, but set in our display face
   with the italic accent the rest of the site uses inside a headline. */
.tower h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.tower h1 em { font-style: italic; font-weight: 300; color: var(--beam);
  font-variation-settings: "SOFT" 80, "WONK" 1; }

/* Our header sits above its tower, so the tower loses its top padding and
   the sticky bar does not collide with the beam. */
header.site + .tower { padding-top: 0; }
.tower { scroll-margin-top: 76px; }

/* Watchtower's own footer, then ours — its one keeps the credits, ours
   keeps the site links, so the join needs a rule rather than a gap. */
footer.wrap { border-bottom: 1px solid var(--edge); }

/* ════════════════════════════════════════════════════════════════════════
   SITE SHELL — lifted verbatim from a shuk.world page.

   shuk.world has no shared stylesheet: every page carries its own inline
   <style>, so the header markup injected here arrived with none of its
   rules. Without the base .hdr-find rule the search box had no flex row
   and no width, and the button's SVG had nothing constraining it — which
   is why it rendered as a magnifying glass the size of the viewport.

   Kept verbatim rather than rewritten so the chrome cannot drift from the
   rest of the site. The :root here supplies the shuk palette variables
   (--deep-sky, --mist, --saffron…) those rules refer to; Watchtower's own
   tokens are set above and are untouched by them.
═══════════════════════════════════════════════════════════════════════════ */

:root {
    --sky:        #C5D6E4;
    --breeze:     #D8E5EE;
    --mist:       #A2B5C3;
    --haze:       #46535E;
    --haze-dark:  #798C9C;
    --deep-sky:   #0F2335;
    --night-sky:  #2A3E52;
    --saffron:    #E8932A;
    --azure:      #6E9CC3;
    --magenta:    #B8456B;
  }

header.site {
    position: sticky;
    top: 0;
    z-index: 85;
    border-bottom: 1px solid var(--mist);
    background: rgba(245,250,253,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

header.site .row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

.wordmark {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--deep-sky);
    display: inline-flex;
    align-items: baseline;
  }

.wordmark .dot { color: var(--saffron); }

.wordmark .tld { font-style: italic; font-weight: 300; color: var(--azure); font-variation-settings: "SOFT" 80, "WONK" 1; }

/* ── search in the header ───────────────────────────────────────────────
     Search is the point of a marketplace, so it sits in the sticky header on
     every page rather than only in the hero, which scrolls away. Plain GET
     form to /browse.html?q= — works with JS off. */
  .hdr-find { display: flex; align-items: stretch; flex: 0 1 260px;
    /* A floor, not min-width:0. Pages with a heavy nav (index and the
       city pages carry 19-21 nav items vs 6-7 elsewhere) were shrinking
       this to ~2px, which reads as "search is broken". The row wraps,
       so the nav drops to a second line instead. */
    min-width: 208px;
    border: 1px solid var(--mist); border-radius: 4px; overflow: hidden;
    background: rgba(255,255,255,0.55); transition: border-color 150ms; }

.hdr-find:focus-within { border-color: var(--saffron); }

.hdr-find input { flex: 1; min-width: 0; border: 0; background: transparent;
    padding: 8px 12px; font-family: "Inter Tight", system-ui, sans-serif;
    font-size: 0.875rem; color: var(--deep-sky); outline: none; }

.hdr-find input::placeholder { color: var(--haze); }

.hdr-find input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hdr-find button { flex: none; display: grid; place-items: center; width: 36px;
    border: 0; cursor: pointer; background: var(--deep-sky); color: var(--sky);
    transition: background-color 200ms, color 200ms; }

.hdr-find button:hover { background: var(--saffron); color: var(--deep-sky); }

.hdr-find svg { width: 15px; height: 15px; display: block; }

@media (max-width: 900px) {
    /* Share the wordmark's row rather than claiming one of its own — a
       sticky header that eats a quarter of a phone screen is worse than a
       slightly narrower search box. */
    .hdr-find { flex: 1 1 150px; min-width: 150px; max-width: none; }
    header.site .row { gap: 10px 14px; }
  }

nav.primary { display: flex; align-items: center; gap: 22px; font-size: 0.875rem; flex-wrap: wrap; }

nav.primary a { color: var(--night-sky); transition: color 200ms; }

nav.primary a:hover { color: var(--saffron); }

nav.primary .post-cta { background-color: var(--deep-sky); color: var(--sky); padding: 9px 18px; border-radius: 999px; font-weight: 500; transition: background-color 200ms; }

nav.primary .post-cta:hover { background-color: var(--saffron); color: var(--deep-sky); }

footer {
    margin-top: 56px;
    padding: 28px 24px;
    border-top: 1px solid var(--mist);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--haze);
    text-transform: uppercase;
  }

footer .row {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

footer .heb {
    font-family: "Fraunces", Georgia, serif;
    text-transform: none;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--night-sky);
  }

footer .right { display: flex; gap: 22px; flex-wrap: wrap; }

@media (max-width: 600px) {
    header.site .row { padding: 14px 20px; gap: 12px; }
    nav.primary { gap: 14px; font-size: 0.825rem; }
    main { padding: 28px 20px 20px; }
  }

/* ── the wall is clickable now ──────────────────────────────────────────
   Thirty releases sit behind the masthead. They were decoration; each one
   is a real release with a real URL, so each is a link. The hover is kept
   quiet — this is a backdrop, not a grid of buttons. */
/* 16:9, like the thumbnails. When the wall became links the images were
   wrapped in this element, which has no aspect ratio of its own — so the
   grid rows stretched to fill the tower and every 480x270 thumbnail was
   blown up to fill a tall cell: blurry, and cropped to a portrait it never
   was. The tiles were not always tall; they have been since that change.
   Rows now pack from the top at their natural height, in both wall layers
   so the lit copy stays registered over the base. */
.wall, .wall--lit { align-content: start; }
/* On wide screens 150px tiles make twelve narrow columns and the 48 tiles
   reach only 435px down a 1000px tower — a band, not a wall. Wider tiles,
   same count: eight columns, six rows, most of the height. */
@media (min-width: 1600px) {
  .wall, .wall--lit { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
/* The tower is a full-viewport hero with the title at its foot. On a tall
   monitor 100svh is a lot of hero; the wall now fills it, but cap it so the
   title is never more than a screen's worth below the masthead. */
.tower { min-height: min(100svh, 1000px); }

/* -- play in place: the thumbnail box becomes the player on click */
.card .shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r); }
.card.playing .shot::after, .card.playing .play, .card.playing .scene { display: none; }
.card.playing a:hover .shot img { transform: none; }
.card .yt-out { margin-inline-start: .6rem; color: var(--beam-t); text-decoration: none; border-bottom: 1px solid currentColor; }
.card .byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.wall-item { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.wall-item img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms cubic-bezier(.2,.7,.3,1), filter 260ms; }
.wall-item:hover img,
.wall-item:focus-visible img { transform: scale(1.05); filter: none; }
.wall-item:focus-visible { outline: 2px solid var(--beam); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .wall-item:hover img, .wall-item:focus-visible img { transform: none; }
}

/* ── rollover captions ───────────────────────────────────────────────────
   The wall is untouched: the original dims the whole container to .30 and
   paints a lit copy over it inside the beam, and that look stays. A caption
   INSIDE a tile could never be legible (a child cannot be brighter than its
   parent) and INSIDE the beam it sat under the lit copy — the first attempt
   did both and restyled the backdrop to compensate. So the caption is one
   element outside both layers, filled and positioned by script from the
   hovered tile, above everything.
   The lit copy stops taking the pointer: it is decoration painted over the
   links, and without this the wall was only clickable outside the beam. */
.wall--lit { pointer-events: none; }
.wall-cap { display: none; }                 /* data for the script, not for display */
.wall-caption {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: 340px; padding: 10px 14px 12px;
  /* .62rem mono was a label for ants. Title in the display face at a
     readable size; the artist stays mono, small caps, but not tiny. */
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0; line-height: 1.3;
  color: #EDF3F8; background: color-mix(in oklab, var(--ink) 94%, transparent);
  border-radius: var(--r); box-shadow: 0 6px 18px rgba(15,35,53,.25);
  opacity: 0; transform: translateY(4px);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.7,.3,1);
}
.wall-caption b { display: block; margin-bottom: 3px; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--beam); text-transform: uppercase; letter-spacing: .12em; }
.wall-caption.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wall-caption { transition: none; transform: none; } }

/* -- the feed sits right under the masthead. The section head ("The watch"
   and its paragraph) is gone; the chips are the first thing after the
   title, so the section's 4-8rem top padding and the tower's bottom
   padding were a hole. */
.tower__body { padding-block: 8vh 1.5vh; }
#watch { padding-top: clamp(1rem, 2.5vw, 1.75rem); }

/* -- EN / עב. Both languages are in the markup; this decides which shows.
   Names and labels only — titles are the artists' own. Hebrew names take
   the Hebrew face. The page stays LTR; the names sit RTL inline. */
.lang-he { display: none; }
body.he-mode .lang-he { display: inline; }
body.he-mode .lang-en { display: none; }
body.he-mode .wall-caption b, body.he-mode .card .byline strong, body.he-mode .chip .lang-he {
  font-family: var(--hebrew), "Frank Ruhl Libre", serif; }
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: .9rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: var(--haze); }
.lang-toggle button { background: none; border: 0; padding: 4px 7px; font: inherit; color: inherit;
  cursor: pointer; border-radius: var(--r); transition: color 150ms; }
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button.active { color: var(--beam-t); font-weight: 600; }
.lang-toggle .sep { color: var(--edge); }
.lang-toggle .he-glyph { font-family: var(--hebrew), "Frank Ruhl Libre", serif; font-size: .85rem; line-height: 1; }