/* luisamgonzalez.com — rebuilt as a static site.
   Design values replicated from the original Cargo stylesheet. */

@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/static/fonts/fragment-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/static/fonts/fragment-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

/* Deter photo downloading & copy/paste: no text selection (except form
   fields), no image dragging, no iOS long-press save sheet. */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

html {
  /* Original: rem scales with viewport width (16px at 1900px wide) */
  font-size: calc(16 * 100vw / 1900);
  color-scheme: dark;
}

body {
  margin: 0;
  background-color: #000000;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- star cursor + trail ---------- */

html, body {
  cursor: url('/assets/static/cursor-star.png') 16 16, auto;
}
a, button, .linked {
  cursor: url('/assets/static/cursor-star-filled.png') 16 16, pointer;
}
input[type="text"], input[type="email"], textarea { cursor: text; }

.star-trail {
  position: fixed;
  pointer-events: none;
  z-index: 300;
  color: rgba(255, 255, 255, 0.9);
  animation: star-trail-fade 0.8s ease-out forwards;
  will-change: transform, opacity;
}
.star-trail svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes star-trail-fade {
  from { opacity: 0.9; transform: translate(0, 0) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 12px)) scale(0.2) rotate(var(--rot, 45deg)); }
}
@media (prefers-reduced-motion: reduce) { .star-trail { display: none; } }

a:active, .linked:active { opacity: 0.7; }

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

ul { margin: 0; padding: 0 0 0 2em; }
ol { margin: 0; padding: 0 0 0 2.5em; }

/* Bare line boxes (e.g. between <br>s) take this strut, exactly as the
   original; visible text sits in .uniform-mini-caps blocks with their own
   line-height. */
.bodycopy {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  font-family: Neuton, serif;
  line-height: 1.15;
  display: block;
}
.bodycopy a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }

.caption {
  font-size: 1.6rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  font-family: Neuton, serif;
  line-height: 1.15;
  display: block;
}
.caption a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; }

h2 { font-weight: 400; margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 1.6rem; line-height: 1.1; }

.uniform-mini-caps {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Fragment Mono', monospace;
  line-height: 1.1;
  letter-spacing: 0em;
  display: block;
}
.uniform-mini-caps a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }

a.active { font-weight: bold; }

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

.left-nav {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 22%;
  padding: 2rem 0 2rem 2rem;
  z-index: 20;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Fragment Mono', monospace;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);
}
.left-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.left-nav a.active { font-weight: bold; }

.page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

.page-layout {
  width: 70%;
  max-width: 70%;
  padding: 2rem;
}

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

.media-item {
  padding: 0.5rem;
  border-radius: 1rem;
  overflow: hidden;
}
.media-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.media-item a { display: block; }

.text-icon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: baseline;
  fill: currentColor;
}
.left-nav .text-icon { width: 1.2em; height: 1.2em; }
.icon-link { display: inline-block; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- galleries ---------- */

.gallery { --g: var(--gutter, 0rem); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--g);
}
.gallery-grid[data-valign="center"] { align-items: center; }
.gallery-grid .media-item[data-span="2"] { grid-column: span 2; }
.gallery-grid .media-item[data-span="3"] { grid-column: span 3; }
/* Cell height = outer width / image aspect, as the original computes it */
.gallery-grid .media-item { aspect-ratio: var(--ar); }
.gallery-grid .media-item img { height: 100%; object-fit: cover; }

.gallery-columnized { position: relative; }
.gallery-columnized.cols-1 .media-item { margin-bottom: var(--g); }
.gallery-columnized.masonry-ready .media-item { position: absolute; top: 0; left: 0; margin: 0; }

.gallery-justify .jrow { display: flex; gap: var(--g); }
.gallery-justify .jcell { min-width: 0; }
.gallery-justify .jrow + .jrow { margin-top: var(--g); }

.gallery-freeform .media-item { width: 100%; }

/* The original renders column sets with no visible gap regardless of the
   declared gutter (verified against the live site). */
.column-set { display: flex; }
.column-unit { flex: 1 1 0; min-width: 0; }

.zoomable img { cursor: url('/assets/static/cursor-star-filled.png') 16 16, pointer; }

/* ---------- contact form ---------- */

.contact-form {
  max-width: 34rem;
  margin-top: 1rem;
}
.contact-form label {
  margin: 1.4rem 0 0.5rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font-family: 'Fragment Mono', monospace;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 10em;
  padding: 0.58em 0.9em;
  line-height: 1.2;
}
.contact-form textarea {
  border-radius: 1rem;
  resize: vertical;
  min-height: 8em;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}
.contact-form button {
  margin-top: 1.6rem;
  font-family: 'Fragment Mono', monospace;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 10em;
  padding: 0.5em 1.2em;
}
.contact-form button:active { opacity: 0.7; }
.contact-form button .text-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  margin-left: 0.15em;
}
.contact-form button:disabled { opacity: 0.5; cursor: default; }
.contact-form .form-status { margin-top: 1.2rem; min-height: 1.5em; }

/* ---------- lightbox (quick view) ---------- */

.quick-view {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.quick-view img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.quick-view button {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(168, 168, 168, 0.6);
  color: rgba(0, 0, 0, 0.9);
  cursor: url('/assets/static/cursor-star-filled.png') 16 16, pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-view button:active { opacity: 0.7; }
.quick-view button svg { width: 16px; height: 16px; display: block; }
.quick-view .qv-close { top: 20px; right: 20px; }
.quick-view .qv-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.quick-view .qv-next { right: 20px; top: 50%; transform: translateY(-50%); }

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

@media (max-width: 700px) {
  html { font-size: calc(16 * 100vw / 390); }

  .left-nav { max-width: none; position: static; padding: 2rem; font-size: 0.85rem; }
  .uniform-mini-caps { font-size: 0.85rem; }

  .page { min-height: 0; }
  .page-layout { width: 100%; max-width: 100%; padding: 0 0 2rem; }

  .column-set { display: block; }

  .gallery-grid { grid-template-columns: repeat(var(--mcols, 1), 1fr); gap: var(--mgutter, var(--g)); }
  .gallery-grid .media-item[data-span] { grid-column: auto; }
  .gallery-justify .jrow { display: block; margin: 0; }
  .gallery-columnized .media-item { position: static !important; width: 100% !important; transform: none !important; margin-bottom: var(--mgutter, var(--g)); }
  .gallery-columnized.masonry-ready { height: auto !important; }
  .quick-view { padding: 10px; }
}