/* ------------------------------------------------------------------------
   ozbarak.com — static rebuild
   Design tokens are lifted 1:1 from the original Cargo stylesheet.
   Cargo sized everything in rem off a 10px root; that is preserved below.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Site Sans';
  src: url('/assets/fonts/sans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Site Serif';
  src: url('/assets/fonts/serif.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Site Mono';
  src: url('/assets/fonts/mono.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
}
/* Oz's own handwriting, drawn as a typeface. Latin + digits only — anything
   outside that (Hebrew, and the characters []^`{|}~) falls back to Site Sans. */
@font-face {
  font-family: 'Oz Hand';
  src: url('/assets/fonts/hand.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Cargo's --base-size, which every rem here resolves against. Measured off
     the live site: it tracks viewport HEIGHT at exactly 1.44%, so the whole
     design scales with the window rather than sitting at a fixed size.
     Clamped at both ends so short or very tall windows stay readable. */
  font-size: clamp(9px, 1.44vh, 20px);

  --bg: #514479;
  --swatch-1: rgba(255, 255, 255, 0.85);
  --swatch-2: rgba(255, 255, 255, 0.75);
  --swatch-3: rgba(255, 255, 255, 0.6);
  --swatch-4: rgba(255, 255, 255, 0.4);
  --swatch-5: rgba(255, 255, 255, 0.25);

  --ink-body: rgba(1, 11, 105, 0.98);
  --ink-h1: rgba(255, 255, 255, 0.55);
  --ink-h2: #01ff24;
  --ink-caption: rgba(123, 127, 255, 0.85);
  --ink-links: #ffc400;
  --ink-about: rgb(255, 85, 0);

  /* Oz's handwriting first, Site Sans/Serif behind it. The browser falls back
     per glyph, so Hebrew and the characters []^`{|}~ — which the handwriting
     does not include — still render in the original face.
     Remove 'Oz Hand' from both stacks to go back to the typeset look. */
  --font-sans: 'Oz Hand', 'Site Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Oz Hand', 'Site Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Site Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --page-pad: 3rem;
  /* Fallback only — site.js measures the real header and overwrites this.
     Deliberately generous so content never sits under the header pre-JS. */
  --header-h: 9.2rem;
}

/* svh ignores mobile browser chrome, so the scale doesn't jump as the URL bar
   hides. vh above is the fallback for browsers without svh. */
@supports (height: 1svh) {
  :root { font-size: clamp(9px, 1.44svh, 20px); }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  color: var(--ink-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* The handwriting's letterforms are narrow and irregular, so words run
     together at paragraph sizes even though its space glyph is generously
     wide. Buying a little extra air between words fixes the reading, and
     costs nothing when the face falls back to Site Sans. */
  word-spacing: var(--word-space, 0.2em);
  /* Everything in caps: the handwriting's capitals are more distinct from one
     another than its lowercase, so words separate better. Presentational only —
     the markup keeps its original casing for search engines and screen readers.
     Hebrew is caseless and so is unaffected. */
  text-transform: uppercase;
}

/* Large display text already has plenty of separation; the extra gap only
   makes headings look broken up. word-spacing inherits as a computed length,
   so these have to re-declare it rather than override the variable. */
h1, h2, .site-header { word-spacing: normal; }

/* ------------------------------------------------------------- typography */

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
  font-size: 7rem;
  line-height: 1;
  color: var(--ink-h1);
  letter-spacing: 0.05em;
}
h1 a { color: var(--ink-h1); text-decoration: none; }

h2 {
  font-family: var(--font-sans);
  font-weight: 350;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--ink-h2);
}
h2 a { color: var(--ink-h2); text-decoration: none; }

a { color: inherit; }
a:active,
.linked:active,
.zoomable:active { opacity: 0.7; }

b, strong { font-weight: 600; }

.caption {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink-caption);
  font-family: var(--font-mono);
  line-height: 1.3;
  letter-spacing: 0;
  display: block;
}
.caption a { color: var(--ink-caption); text-decoration: underline; }

.links {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--ink-links);
  font-family: var(--font-sans);
  line-height: 2;
  display: block;
}
.links, a.links { color: var(--ink-links); text-decoration: none; }

.bodycopy-blog {
  font-size: 1.4rem;
  font-weight: 300;
  color: #eee;
  font-family: var(--font-sans);
  line-height: 2;
  display: block;
}
.bodycopy-blog a { color: #eee; text-decoration: none; }

hr {
  background: rgba(255, 255, 255, 0.75);
  border: 0;
  height: 1px;
  display: block;
  margin: 1em 0;
}

.no-wrap { white-space: nowrap; }

/* Cargo's <span uses="blink"> */
.blink { animation: blink var(--blink-speed, 800ms) steps(1, end) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}

/* ------------------------------------------------------------------ layout */

.page {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--header-h);
}

.page-content {
  width: 100%;
  padding: var(--page-pad);
  text-align: left;
}

body.home .page-content,
body.blog .page-content { align-items: flex-start; }

body.project .page-content { padding: 3rem 3.5rem; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bd-color, transparent);
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bd-img);
  background-size: cover;
  background-position: var(--bd-x, 50%) var(--bd-y, 50%);
  opacity: var(--bd-opacity, 1);
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 2.1rem 3.2rem 1.5rem 3.4rem;
  /* Transparent on every page, so a page's own backdrop runs behind the
     header instead of being cut off by a band of the site background. */
  background: transparent;
}

.header-cols { align-items: baseline; }

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.6rem;
}

.header-about {
  color: var(--ink-about);
  text-decoration: none;
  font-size: 1.4rem;
}

.icon-link {
  color: rgba(246, 246, 246, 0.85);
  display: inline-flex;
  align-items: center;
}
.icon-link .icon { width: 1.6rem; height: 1.6rem; display: block; }

#back-button {
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  display: inline-block;
  margin-left: 1.6rem;
}
body.home #back-button { display: none; }

/* --------------------------------------------------------------- columns */

.cols {
  display: flex;
  gap: var(--gap, 2rem);
  align-items: flex-start;
  width: 100%;
}
.cols > .col {
  flex: var(--span, 1) 1 0;
  min-width: 0;
}
/* Narrow columns in a lopsided set (see build.mjs): size to the widest line the
   author actually wrote rather than to a 1/12 share of the row, and hold the
   wide column further off so the two do not crowd each other. */
.cols > .col-tight {
  flex: 0 0 auto;
  width: max-content;
  max-width: 45%;
  margin-right: 2rem;
}

/* ---------------------------------------------------------------- media */

figure.mi {
  margin: 0;
  position: relative;
}
figure.mi img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
figure.mi .caption { margin-top: 1em; }
.mi-link { display: block; }

.zoomable img { cursor: zoom-in; }
.linked img { cursor: pointer; }

/* Keyboard focus. Photos are focusable controls (site.js) and the viewer's
   buttons take focus when it opens, so both need a ring you can actually see
   against the purple — the browser default is a thin dark outline. Shown for
   keyboard use only, never on mouse clicks. */
figure.mi img:focus-visible,
figure.mi a:focus-visible,
.lb-close:focus-visible,
.lb-nav:focus-visible,
.ss-nav:focus-visible {
  outline: 2px solid var(--ink-h2);
  outline-offset: 3px;
}

/* A media-item outside a gallery fills its container: the full content width
   for the standalone photo at the foot of the home page, or its column for the
   inline photos on the blog. Both measure exactly that on the original site.
   `display: block` is the load-bearing part — as an inline-block the figure
   shrink-to-fits the image's intrinsic size instead of the container, and
   collapses to zero width until the image loads. */
figure.mi-inline {
  display: block;
  width: 100%;
}

/* -------------------------------------------------------- justified grid */

/* Rows are measured by site.js, which writes --row-h onto each row wrapper.
   Until then the gallery is laid out as a plain flex wrap so there is no
   flash of unstyled full-width images. */
.gallery-justify {
  display: flex;
  flex-direction: column;
  row-gap: var(--gutter-y, 2rem);
  margin-bottom: 1em;
}
.gallery-justify > figure.mi { flex: 0 0 auto; }

.gj-row {
  display: flex;
  column-gap: var(--gutter-x, 2rem);
  align-items: flex-start;
}
.gj-row > figure.mi {
  height: var(--row-h);
  flex: 0 0 auto;
}
.gj-row > figure.mi img {
  height: var(--row-h);
  width: auto;
}

/* Pre-layout fallback: cap images so the page never renders one huge photo. */
.gallery-justify:not([data-laid-out]) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gutter-y, 2rem) var(--gutter-x, 2rem);
}
.gallery-justify:not([data-laid-out]) > figure.mi {
  width: calc((100% - 3 * var(--gutter-x, 2rem)) / 4);
}

/* ------------------------------------------------------------- slideshow */

.slideshow {
  position: relative;
  width: 100%;
}
.slideshow-track { position: relative; }
.slideshow .mi { display: none; }
.slideshow .mi.is-active { display: block; }

.ss-nav,
.lb-nav,
.lb-close {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(168, 168, 168, 0.6);
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.ss-nav:active,
.lb-nav:active,
.lb-close:active { opacity: 0.7; }
.ss-nav svg,
.lb-nav svg { width: 60%; height: 60%; }

.ss-nav { top: 50%; transform: translateY(-50%); }
.ss-prev { left: 15px; }
.ss-next { right: 15px; }
.slideshow[data-count='1'] .ss-nav { display: none; }

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.lightbox[hidden] { display: none; }

.lb-stage {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}
.lb-stage .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 0;
  text-align: center;
  color: #000;
}
.lb-stage .caption:not(:empty) > span {
  padding: 0.5rem 1rem;
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0.5rem;
  text-align: left;
  max-width: 50rem;
}

.lb-close { top: 20px; right: 20px; font-size: 20px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lightbox[data-single='true'] .lb-nav { display: none; }

body.lb-open { overflow: hidden; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 700px) {
  :root {
    /* Below Cargo's 700px breakpoint the base tracks viewport WIDTH instead,
       already multiplied by Cargo's --mobile-scale of 1.3.
       --page-pad is 3rem * Cargo's --mobile-padding-offset of 0.4. */
    font-size: clamp(10px, 2.85vw, 14px);
    --page-pad: 1.2rem;
    --header-h: 11rem;
  }

  body { font-size: 1.65rem; }
  h1 { font-size: 4.2rem; }
  .links, .bodycopy-blog { font-size: 1.65rem; }

  body.project .page-content { padding: var(--page-pad); }

  /* Cargo's mobile header: centred title, rule, then a Back / About row. */
  .site-header {
    padding: 1.4rem 1.2rem;
    box-shadow: none;
    text-align: center;
  }
  .header-cols {
    flex-direction: column;
    gap: 0.6rem;
  }
  .header-cols > .col { width: 100%; }
  .header-cols > .col:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header-cols > .col:first-child::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.75);
    margin: 0.5rem 0;
  }
  /* Cargo's mobile header puts Back and the About/Instagram group on one
     row, pushed to opposite edges. */
  .header-right { justify-content: flex-end; }
  #back-button {
    margin-left: 0;
    position: absolute;
    left: 1.2rem;
    bottom: 1.4rem;
  }
  body.home #back-button { display: none; }

  .cols.cols-stack {
    flex-direction: column;
    gap: 1rem;
  }
  /* Cargo centres the first column's heading on narrow screens. */
  .cols.cols-stack > .col:first-child { text-align: center; }
  body.project .cols.cols-stack > .col:first-child { text-align: left; }

  .gallery-justify:not([data-laid-out]) > figure.mi { width: 100%; }

  .lightbox { padding: 10px; }
  .ss-prev { left: 10px; }
  .ss-next { right: 10px; }
}