/* Mansku Events' own site, set dark in the company's gold.
 * The product's tokens are restated for a dark site, beside the parts only
 * this site draws: its logotype, its header and footer round it, and its
 * front page's map. It is set in the company's gold and
 * its logotype's face, with every lifted surface a glass over the page's
 * ground. Designed with Tomi on 2026-10-13 in `prototypes/work/portal/`. A
 * rule here names a `mansku-` class, so it styles this site's own markup and
 * never the product's (`tests/sites.rs`). */

@font-face {
  font-family: "Outfit";
  src: url("/static/sites/mansku/outfit-latin-92684e4acde79ef0.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-scheme: dark;

  /* The palette, turned. Secondary words are light added to what is behind
   * them rather than a translucent grey: with plus-lighter a quiet line over
   * the warm ground comes out a lighter warm, and over a card's glass a
   * lighter version of that glass. Each level is how much light it adds. */
  --text: oklch(0.97 0 0);
  --text-prose: rgb(200 200 200);
  --text-muted: rgb(166 166 166);
  --text-disabled: rgb(124 124 124);
  --text-secondary-blend: plus-lighter;
  --text-hover: oklch(0.9 0 0);
  --ground: oklch(0.16 0 0);
  --surface: oklch(0.22 0 0);
  --fill: oklch(0.28 0 0);
  /* A hairline is the ground's own warmth lifted, not a white at low
   * opacity, which reads grey over a warm brown. */
  --line: oklch(0.86 0.04 70 / 0.2);
  --interactive-wash: oklch(1 0 0 / 0.08);
  --shadow-contact-color: oklch(0 0 0 / 0.3);
  --shadow-ambient-color: oklch(0 0 0 / 0.36);
  --attention: oklch(0.72 0.16 28);

  /* The face the logotype is set in, for every name on the page. */
  --font-display: "Outfit", var(--font-body);

  /* The product's cyan becomes the gold the logotype's body settles on (read
   * off the rendered glass wordmark, 2026-10-13): links, the selected option,
   * focus. On a dark ground the strong variant is the lighter one, because it
   * is read as text. */
  --accent: oklch(0.82 0.075 70);
  --accent-strong: oklch(0.88 0.085 76);
  --accent-text: oklch(0.22 0.03 60);
  --accent-wash: oklch(0.82 0.075 70 / 0.14);

  --control-line: oklch(1 0 0 / 0.16);
  --control-line-hover: oklch(1 0 0 / 0.28);
  --control-recess: inset 0 1px 1px oklch(0 0 0 / 0.2), inset 0 -1px 0 oklch(1 0 0 / 0.06);
  --control-disabled-fill: oklch(1 0 0 / 0.08);

  /* Availability on the dark ground: a green that glows rather than tints,
   * so an open run reads as lit and the selected day as the brightest. */
  --availability-fill: oklch(0.55 0.08 150 / 0.24);
  --availability-ink: oklch(0.9 0.07 150);
  --availability-selected: oklch(0.82 0.13 150);

  /* The booking button in the gold, with its inner light and shade taken
   * from the logotype's rim. */
  --booking-button-text: oklch(0.22 0.03 60);
  --booking-button-fill: oklch(0.8 0.115 74);
  --booking-button-inner-light: rgb(255 228 170 / 0.8);
  --booking-button-inner-dark: rgb(150 90 20 / 0.4);
  --booking-button-shadow: rgb(0 0 0 / 0.3);

  /* Every lifted surface is one glass. The product's dark glass is made to
   * hold white words over a bright photograph and read near-black over this
   * already dark ground, so this one lifts instead of dimming: a lighter,
   * thinner fill and a brightened backdrop, the lightest step of a four-step
   * ladder (Tomi 2026-10-13). A band over a scroll is clear on glass. */
  --card-fill: oklch(0.36 0 0 / 0.3);
  --card-backdrop: blur(16px) saturate(1.5) contrast(1) brightness(1.25);
  --card-picture-fill: oklch(0.36 0 0 / 0.3);
  --card-band-fill: transparent;
  --chrome-glass-fill: oklch(0.36 0 0 / 0.3);
  --chrome-glass-blur: 16px;
  --chrome-glass-saturation: 1.5;
  --chrome-glass-contrast: 1;
  --chrome-glass-brightness: 1.25;
  /* The edge light's saturation at 3.6 turned every dark backdrop red; at 2
   * it picks up the ground's colour without tinting it. */
  --edge-light-fill: oklch(1 0 0 / 0.16);
  --edge-light-saturation: 2;

  /* The map's light Voyager tiles inverted and turned back round the hue
   * wheel: a dark map with the same roads, warmed toward the ground. CARTO's
   * Dark Matter read near-black and cold against this page (Tomi
   * 2026-10-13). On glass the map fades out into the card rather than under
   * a veil: a grey wash and haze over a photographic ground read as fog. */
  --map-tile-filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) sepia(0.28);
  --veil-display: none;
  --location-map-fade-stacked: linear-gradient(to top, transparent 22%, black 72%);
  --location-map-fade-beside: linear-gradient(to right, transparent 26%, black 70%);

  /* A drawing among the photographs (a floor plan: white, without colour)
   * is turned into light lines on a dark sheet, warmed toward the ground, so
   * it sits among them instead of glaring out of them. */
  --drawing-filter: invert(0.84) sepia(0.7) saturate(1.2);

  /* A space's photograph as its page's ground, at the prototype's 0.34
   * brightness. */
  --ground-image-shade: 66%;

  /* The logotype: Outfit 600, lowercase, on two lines that interlock, the
   * font's own outlines (box 4.1745em by 1.3373em, the masks' viewBox). Its
   * colour is fixed rather than a material, because a mark has to look the
   * same wherever it stands (Tomi 2026-10-13): a tan body lighter where the
   * light falls, inside a gold rim from pale to amber, every stop a clean
   * gold at chroma 0.07 to 0.135 rather than gold with grey in it. `cargo
   * tools brand` reads the two fills to draw the icons. */
  --mansku-mark-fill: linear-gradient(
    176deg,
    oklch(0.9 0.07 86) 0%,
    oklch(0.81 0.115 76) 40%,
    oklch(0.72 0.135 66) 60%,
    oklch(0.76 0.125 70) 100%
  );
  --mansku-mark-rim: linear-gradient(180deg, rgb(255 220 150) 0%, rgb(250 160 48) 100%);

  /* The front page's map: the four spaces on CARTO Voyager tiles without
   * labels, styled as the space page's map, so the pins are the only names on
   * it (Tomi 2026-10-13). Made by a script of the prototype's that the
   * repository does not hold; the projections it was drawn in are
   * `pages::sites::mansku`'s. The page stands on it (`--mansku-map-layers`,
   * which the front page names as its ground): sharp round the logotype and
   * out of focus beyond it. Pin names a step under white and a touch warm,
   * so the logotype stays the brightest thing in the masthead. */
  --mansku-map-top: rgb(18 18 13);
  --mansku-map-bottom: rgb(19 25 24);
  --mansku-map-ground:
    url("/static/sites/mansku/map-ground-e898a0fe10569a42.webp") center top / 2400px 1400px no-repeat,
    linear-gradient(rgb(19 25 24), rgb(19 25 24)) 0 1400px / 100% 100% no-repeat;
  --mansku-map-layers:
    url("/static/sites/mansku/map-sharp-9d33bee018ba80b3.webp") calc(50% + 60px) 28px / 1280px 367px no-repeat,
    var(--mansku-map-ground);
  --mansku-pin-name: oklch(0.86 0.02 80);
  --mansku-pin-name-halo: 0 1px 2px rgb(0 0 0 / 0.8), 0 0 10px rgb(0 0 0 / 0.6);
  --mansku-pin-glow: oklch(0.8 0.12 72 / 0.55);
}

/* The logotype, drawn from its layers: its shadow, its body and the ring
 * inside its letters. Sized by its font size, so each place that shows it
 * says only how large. */
.mansku-mark {
  position: relative;
  display: inline-block;
  inline-size: 4.1745em;
  block-size: 1.3373em;
  vertical-align: middle;
}

.mansku-mark-fill,
.mansku-mark-rim {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mansku-mark-fill {
  background: var(--mansku-mark-fill);
  -webkit-mask-image: url("/static/sites/mansku/mark-fill-83c9cc2f3ce59dff.svg");
  mask-image: url("/static/sites/mansku/mark-fill-83c9cc2f3ce59dff.svg");
}

.mansku-mark-rim {
  background: var(--mansku-mark-rim);
  -webkit-mask-image: url("/static/sites/mansku/mark-edge-3bb8b1ad33b80b32.svg");
  mask-image: url("/static/sites/mansku/mark-edge-3bb8b1ad33b80b32.svg");
}

.mansku-mark-shadow {
  position: absolute;
  inset: -0.3em;
  background: url("/static/sites/mansku/mark-shadow-5d190a122d502ea3.svg") 0 0 / 100% 100% no-repeat;
}

/* The logotype as the header: small and centred, the way home, with the
 * account at the row's end. */
.mansku-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "pages mark account";
  align-items: center;
  column-gap: calc(var(--increment) * 4);
}

/* The site's own pages across from the account; on a phone, on a line of
 * their own under the logotype. */
.mansku-header-row > .portal-nav {
  grid-area: pages;
  justify-self: start;
  max-inline-size: 100%;
}

@media (max-width: 687.98px) {
  .mansku-header-row {
    grid-template-areas: ". mark account" "pages pages pages";
    row-gap: calc(var(--increment) * 3);
  }
}

.mansku-header-home {
  grid-area: mark;
  display: block;
  border-radius: calc(var(--increment) * 2);
  font-size: 34px;
  line-height: 0;
}

.mansku-header-home:focus-visible {
  outline-offset: calc(var(--increment) * 2);
}

.mansku-header-actions {
  grid-area: account;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--increment);
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* The footer: centred under a short rule, the logotype small and in its body
 * alone (a ring at this size is most of the letter), then the documents, and
 * last and smallest the language on a line of its own over the owner and the
 * platform. */
.mansku-footer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--increment) * 6);
  padding-block-end: calc(var(--increment) * 6);
  text-align: center;
}

.mansku-footer-rule {
  inline-size: calc(var(--increment) * 12);
  block-size: var(--border-width-hairline);
  margin-block-end: calc(var(--increment) * 6);
  background: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.mansku-footer-home {
  display: block;
  font-size: 30px;
  line-height: 0;
}

.mansku-footer-home :is(.mansku-mark-rim, .mansku-mark-shadow) {
  display: none;
}

.mansku-footer-links,
.mansku-footer-meta,
.mansku-footer-locales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--increment) * 1) calc(var(--increment) * 6);
}

.mansku-footer-meta {
  flex-direction: column;
  align-items: center;
  row-gap: calc(var(--increment) * 3);
}

.mansku-footer-locales {
  gap: calc(var(--increment) * 3);
}

.mansku-footer-locales .site-footer-language-separator {
  display: none;
}

.mansku-footer-links {
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
}

.mansku-footer-meta {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.mansku-footer-locales [aria-current] {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.mansku-footer-body a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .mansku-footer-body a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
}

/* The front page's head: the logotype over a map of the company's spaces,
 * with a pin where each space is. The pins are placed by
 * `pages::sites::mansku` from the spaces' coordinates, in CSS pixels from
 * the page's top centre. Ported from `prototypes/work/front-map/` (Tomi
 * 2026-10-13).
 *
 * The pins are positioned against the masthead rather than the page, so a
 * page travel, which moves the masthead with a transform of its own, moves
 * them with it. The art's anchor is the page's top, and the masthead's top
 * stands `--mark-top` below it. */
.mansku-masthead {
  --mark-top: 136px;

  position: relative;
  display: grid;
  justify-items: center;
  row-gap: calc(var(--increment) * 7);
  /* The logotype's top at 136px, where the art was drawn round it. */
  margin-block: calc(var(--increment) * 15) calc(var(--increment) * 12);
  text-align: center;
}

.mansku-masthead-mark {
  position: relative;
  z-index: 1;
  font-size: clamp(48px, 10vw, 76px);
  line-height: 0;
}

/* The line is part of the lockup: tracked capitals in the logotype's face,
 * close under it, read as the mark's own line rather than a paragraph. */
.mansku-masthead-tagline {
  position: relative;
  z-index: 1;
  max-inline-size: 22em;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-wrap: balance;
}

.mansku-masthead-map {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(-1 * var(--mark-top));
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
}

.mansku-pins {
  padding: 0;
  list-style: none;
}

.mansku-pin {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  display: block;
  inline-size: 0;
  block-size: 0;
}

.mansku-pin a {
  --dot: 12px;

  position: absolute;
  display: grid;
  justify-items: center;
  row-gap: calc(var(--increment) * 1.5);
  translate: -50% calc(-1 * var(--dot) / 2);
  color: var(--mansku-pin-name);
  text-decoration: none;
  white-space: nowrap;
}

.mansku-pin a::before {
  content: "";
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  background: var(--mansku-mark-fill);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mansku-map-top) 85%, transparent),
    0 0 14px 2px var(--mansku-pin-glow);
}

.mansku-pin-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 16px;
  letter-spacing: 0.01em;
  text-shadow: var(--mansku-pin-name-halo);
}

/* A name that would cover the logotype, its line or another name stands
 * above its dot. */
.mansku-pin[data-label="above"] a {
  translate: -50% calc(-100% + var(--dot) / 2);
}

.mansku-pin[data-label="above"] a::before {
  order: 1;
}

@media (hover: hover) {
  .mansku-pin a:hover .mansku-pin-name {
    color: var(--accent);
  }
}

.mansku-pin a:focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}

/* Narrower than the wide spread, the map moves into the masthead's flow at a
 * smaller zoom, so every space fits across a phone, and the line leaves the
 * logotype to stand under the map: logotype, the pins' band, line. The map is
 * one element running from above the logotype to below the line, behind
 * both, with a round sharp area between them, and it follows the logotype
 * wherever the logotype lands, which the page's ground cannot. The ground
 * under it is the wide map out of focus.
 *
 * The strip's art is 1024 by 532: 90 of overscan, the tallest logotype
 * (101.6 at 76px) and a 28px gap, so the pins' band starts 220 down; the
 * band, 130; the gap, the line's two 20px lines and 24 of air, 92; 90 of
 * overscan. A smaller logotype starts the band higher, so the element pads
 * by the logotype's real height and shifts the art and the pins up by what
 * it saves. The strip's art stands 3px left of the page's centre and 20px
 * down from where its anchor falls. */
@media (max-width: 1023.98px) {
  :root {
    --mansku-map-layers: var(--mansku-map-ground);
  }

  .mansku-masthead {
    --mark-height: calc(clamp(48px, 10vw, 76px) * 1.3373);
  }

  .mansku-masthead-tagline {
    order: 2;
  }

  .mansku-masthead-map {
    --pad: calc(var(--mark-height) + 28px + 90px);
    --shift: calc(var(--pad) - 220px);

    order: 1;
    position: relative;
    z-index: 0;
    inset: auto;
    inline-size: 1024px;
    block-size: calc(var(--pad) + 312px);
    margin-block: calc(-1 * var(--pad)) -182px;
    margin-inline: calc(50% - 512px);
    background: url("/static/sites/mansku/map-strip-69ee32ca65058e4a.webp") calc(50% - 3px)
      calc(var(--shift) + 20px) / 500px 500px no-repeat;
    /* The circle reaches above the page's top on a phone, and the top rows
     * must stay the one flat colour, so it is clear for the page's first
     * 28px and fades in over the next 40. */
    --page-top-here: calc(90px - var(--mark-top));
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent calc(var(--page-top-here) + 28px),
      black calc(var(--page-top-here) + 68px)
    );
    mask-image: linear-gradient(
      to bottom,
      transparent calc(var(--page-top-here) + 28px),
      black calc(var(--page-top-here) + 68px)
    );
  }

  .mansku-pins {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
  }

  .mansku-pin {
    inset-inline-start: var(--strip-x);
    inset-block-start: calc(var(--shift) + var(--strip-y));
  }

  .mansku-pin-name {
    font-size: 12px;
  }

  .mansku-pin[data-label="above"] a {
    translate: -50% calc(-1 * var(--dot) / 2);
  }

  .mansku-pin[data-label="above"] a::before {
    order: 0;
  }

  .mansku-pin[data-strip-label="above"] a {
    translate: -50% calc(-100% + var(--dot) / 2);
  }

  .mansku-pin[data-strip-label="above"] a::before {
    order: 1;
  }
}