/* Reset, design tokens, frame rules + cross markers.
   The design frame is 1680px wide; --px scales any design-pixel value
   proportionally below 1680px and caps at 1:1 above it. */

:root {
  /* 1 design px */
  --px: min(0.05952380952vw, 1px);

  /* Color (from wireframe tokens) */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-black-50: rgba(0, 0, 0, 0.5);   /* color-60 */
  --color-black-20: rgba(0, 0, 0, 0.2);   /* color-8 */
  --color-black-3: rgba(0, 0, 0, 0.03);   /* color-3 */
  --stroke-10: rgba(0, 0, 0, 0.1);
  --stroke-5: rgba(0, 0, 0, 0.05);
  --color-card: #dedede;                  /* color-9 */
  --white-10: rgba(255, 255, 255, 0.1);   /* color-69 */
  --pill-pink: #f00f89;                   /* color-79 */
  --pill-orange: #ff7135;                 /* color-76 */
  --pill-lime: #b9ff45;                   /* color-78 */
  --pill-blue: #2b6cd5;                   /* color-77 */
  --color-available: #00d335;
  --color-busy: #ff8d27;

  /* Type */
  --font-sans: "Britti Sans Trial", system-ui, -apple-system, sans-serif;

  /* Frame: vertical rules sit 30 design-px from each edge */
  --edge: calc(30 * var(--px));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Anchor scrolling + wheel smoothing are handled in js/smooth-scroll.js */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
  max-width: 1920px;
  margin-inline: auto;
}

/* Hide the native scrollbar (scrolling still works; progress ring is the cue) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html {
  scrollbar-width: none;
}

img,
video {
  display: block;
  max-width: 100%;
  /* Discourage casual saving: no drag-out, no long-press/right-click
     selection highlight. Paired with main.js blocking the context menu
     and dragstart on images. Not a hard guarantee (view-source, devtools,
     and the network tab can still reach any asset) — just removes the
     easy, accidental paths to save an image. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

/* ---------- Framed section: 30px side margins, inner vertical rules ---------- */
.frame {
  padding: 0 var(--edge);
}

.frame__inner {
  position: relative;
  border-left: 1px solid var(--stroke-10);
  border-right: 1px solid var(--stroke-10);
}

.rule-top { border-top: 1px solid var(--stroke-10); }
.rule-bottom { border-bottom: 1px solid var(--stroke-10); }

/* ---------- Cross (+) markers at rule intersections ---------- */
/* Placed inside a section: centered on the vertical rules (30px from
   page edges) at the section's top and/or bottom rule. Uses the exported
   vector (/assets/images/plus.svg) via mask so it inherits currentColor,
   rather than the live text glyph. */
.plus {
  position: absolute;
  width: calc(19 * var(--px));
  height: calc(19 * var(--px));
  font-size: 0;
  background-color: var(--color-text);
  -webkit-mask: url("/assets/images/plus.svg") center / contain no-repeat;
  mask: url("/assets/images/plus.svg") center / contain no-repeat;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.plus--tl { top: 0; left: 0; }
.plus--tr { top: 0; left: 100%; }
.plus--bl { top: 100%; left: 0; }
.plus--br { top: 100%; left: 100%; }

/* ---------- Animated grain/noise overlay ---------- */
/* Sits above the fixed nav (z-index 60) so its animated noise never lands
   in the backdrop the nav's mix-blend-mode reacts to — otherwise the nav's
   "black" over the white hero comes out faintly textured/flickering
   instead of a clean solid black. */
.grain {
  position: absolute;
  inset: -100%;
  pointer-events: none;
  z-index: 70;
  opacity: 0.22;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -8%); }
  60%  { transform: translate(-8%, -2%); }
  80%  { transform: translate(6%, 6%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}