/* CLIXHOUSE website: style/base.css
   The fonts, the page itself, reading type, focus, and the few helpers every
   page leans on. The blocks (slabs, cards, pills) and each page's layout are
   in parts.css; the numbers are in tokens.css. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* the drawn capitals (type/); until the file ships, --font-display falls back to Inter */
@font-face {
  font-family: "CLIXHOUSE Display";
  src: url("../type/clixhouse-display.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--luz);
  color: var(--noche);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The scrollbar in the brand (Michael, 2026-09-26/27): a black pill that floats above everything
   like a phone's, shows while the page moves and fades a second after. A browser's own bar takes
   a lane beside the page (the footer could not reach the edge) and cannot fade, so with a mouse
   story/menu.js draws the pill itself (.scroll-pill) and html.own-scrollbar hides the browser's.
   Quiet (Michael, 2026-09-27, "more subtle"): thin, see-through, no edge; over the black footer
   it turns see-through cream instead. Touch screens and no-JS keep the browser's. */
html.own-scrollbar { scrollbar-width: none; }
html.own-scrollbar::-webkit-scrollbar { display: none; }
/* ...and from the very first paint: menu.js runs only after the page is parsed, so on a refresh the
   browser's bar used to show for a moment, then vanish and shift the page sideways. The same test
   menu.js makes (a mouse, and scripts on), here in the stylesheet, hides it before anything paints.
   The class above stays for browsers that do not know (scripting). */
@media (pointer: fine) and (scripting: enabled) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
.scroll-pill {
  position: fixed;
  top: 0;
  right: 3px;
  z-index: 2147483647;
  width: 4px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.38);
  opacity: 0;
  transition: opacity 0.4s ease, width 0.15s ease, background-color 0.2s ease;
  touch-action: none;
  cursor: grab;
}
.scroll-pill.on-ink { background: rgba(246, 243, 236, 0.4); }
.scroll-pill:hover, .scroll-pill.held { width: 7px; background: rgba(17, 17, 17, 0.6); }
.scroll-pill.on-ink:hover, .scroll-pill.on-ink.held { background: rgba(246, 243, 236, 0.6); }
.scroll-pill.held { cursor: grabbing; }
.scrolling .scroll-pill { opacity: 1; transition-duration: 0.12s, 0.15s; }
@media (prefers-reduced-motion: reduce) { .scroll-pill { transition: none; } }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-text);
  background: var(--luz);
  color: var(--noche);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

/* the page wrapper: the crew's layer is laid over it (crew/index.js, data-crew-root) */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }
/* Reading text wraps plainly and uses the width it has. "pretty" moved a word down to spare a short
   last line, and on a phone that left two-line paragraphs broken at half width ("In Spanish and /
   English, anywhere.": the review of 2026-09-27). Headings, and the lines set like headings, may
   still balance (h1-h3 above, and in parts.css). */
p { text-wrap: wrap; }

a {
  color: inherit;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
}

em { font-style: italic; }
strong { font-weight: 750; }

/* focus: a black ring, off the edge of what you're on; yellow on black ground */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--noche);
  outline-offset: 3px;
}
.on-ink :focus-visible,
.site-footer :focus-visible { outline-color: var(--luz); }

/* layout helpers */
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.measure { max-width: var(--measure); }

/* for screen readers only */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the skip link: out of sight until a keyboard lands on it */
.skip {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 100;
  padding: 0.75em 1.25em;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--papel);
  font-weight: 650;
  text-decoration: none;
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; outline-color: var(--noche); }

/* the page change: a clean cross-fade where the browser can (the crew carry on across it) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}