/* mubaruk.com */

:root {
  --bg: #0d0d0c;
  --ink: #ecebe6;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 12px/1.4 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  overflow-anchor: none;            /* the stream compensates scroll itself */
}

/* Lenis (smooth wheel scrolling, desktop only) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------ stream
 * Each image is one full-viewport panel with no gaps, as on the Tumblr
 * reference: the photo is a background sized to `contain` (never cropped or
 * stretched) and `repeat`ed, so any space it doesn't cover is filled with
 * copies of itself rather than empty margins. On mouse/trackpad devices the
 * background is `fixed` to the window, so scrolling wipes from one photo to
 * the next instead of sliding a column past. Touch devices scroll natively. */

.stream { min-height: 100vh; }

.item {
  position: relative;
  margin: 0;
  height: 100vh;
  height: 100svh;                   /* phones: fit the visible area */
  overflow: hidden;
  background: var(--bg);
}

.item .tiles {
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: repeat;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1);
}
.item.in .tiles { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .item .tiles { background-attachment: fixed; }
}

/* Portrait phones: a full-height panel would stack two or three copies of a
   landscape photo. Instead each panel is as tall as the photo at full width
   (at least 55%, at most 100% of the screen), so photos run edge to edge with
   no gaps, and tall ones still fill the screen with side tiles. */
@media (max-width: 700px) and (orientation: portrait) {
  .item {
    height: clamp(55vh, calc(100vw / var(--ar, 1)), 100vh);
    height: clamp(55svh, calc(100vw / var(--ar, 1)), 100svh);
  }
}

/* the <img> only loads the right size (srcset, lazy, priority); the panel
   paints that same downloaded file, so nothing is fetched twice */
.item .src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.sentinel { height: 1px; }

/* Photo stream only: the middle-finger cursor (mouse/trackpad devices; falls
   back to the normal cursor if the image can't load) and no selecting or
   dragging the photos. A casual deterrent, not protection - see README. */
.stream {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.item .tiles, .item .src { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  .stream { cursor: url("/assets/cursor/finger-v1.png") 16 7, auto; }
}

.empty {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: .3;
  letter-spacing: .2em;
  pointer-events: none;
}

/* ------------------------------------------------------------ menu
 * <details class="menu">: a native disclosure, so it opens with mouse,
 * keyboard and touch even without JS (menu.js adds Escape / click-outside).
 * Near-white with a soft dark shadow stays legible over any photo. */

.menu {
  position: fixed;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  color: #f4f3ef;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)) drop-shadow(0 0 7px rgba(0, 0, 0, .4));
  font-size: 11px;
  letter-spacing: .16em;
}

.menu summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  list-style: none;
  cursor: pointer;
  opacity: .62;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { opacity: .95; }
.menu summary:focus { outline: none; }
.menu summary:focus-visible { opacity: .95; outline: 1px solid currentColor; outline-offset: -4px; }

.menu-icon { display: grid; gap: 4px; width: 18px; }
.menu-icon i { display: block; height: 1.5px; background: currentColor; }

.menu-list {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0 0 0 11px;
  list-style: none;
}
.menu-list a {
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  text-decoration: none;
  opacity: .8;
  transition: opacity .25s ease;
}
.menu-list a:hover, .menu-list a:focus-visible { opacity: 1; outline: none; }
.menu-list a[aria-current="page"] { opacity: 1; text-decoration: underline 1px; text-underline-offset: 4px; }

/* touch screens: comfortable tap targets */
@media (pointer: coarse) {
  .menu { font-size: 13px; }
  .menu-list { gap: 0; }
  .menu-list a { padding: 11px 0; }
}

/* ------------------------------------------------------------ plain pages */

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 16px;
}

.field {
  -webkit-appearance: none;
  appearance: none;
  width: min(22ch, 72vw);
  margin: 0;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid rgba(236, 235, 230, .22);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;                  /* 16px: no iOS zoom on focus */
  letter-spacing: .08em;
  text-align: center;
  caret-color: currentColor;
  transition: border-color .3s ease;
}
.field:focus { border-bottom-color: rgba(236, 235, 230, .6); }

@media (prefers-reduced-motion: reduce) {
  .item .tiles, .menu summary, .menu-list a, .field { transition: none; }
  .item .tiles { opacity: 1; }
}