/* ═══════════════════════════════════════════════
   AURORA VIDAL — Base Styles (main.css)
═══════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  background:         var(--bg);
  color:              var(--text);
  font-family:        var(--font-sans);
  font-size:          var(--font-size-base);
  line-height:        var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a   { color: inherit; }
button { font-family: inherit; }

/* ── Skip link ───────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  border-radius: 0 0 4px 4px;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ── Page wrapper ────────────────────────────── */
.page-content { padding-top: var(--nav-height); }

/* ── Typography utilities ────────────────────── */
.label {
  display:        block;
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ── Divider ─────────────────────────────────── */
hr.div {
  border:     none;
  border-top: 1px solid var(--border);
}

/* ── Link arrow ──────────────────────────────── */
.link-arrow {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-size:   11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:       var(--text);
  text-decoration: none;
  background:  none;
  border:      none;
  cursor:      pointer;
  transition:  opacity var(--transition-fast);
}
.link-arrow:hover { opacity: .4; }

/* ── Placeholder (image skeleton) ───────────── */
.ph {
  position:   relative;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E5;
  width:      100%;
  height:     100%;
}
.ph::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent         28px,
    rgba(0,0,0,.018)    28px,
    rgba(0,0,0,.018)    29px
  );
}
.ph span {
  position:       relative;
  z-index:        1;
  font-size:      9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* ── Clickable / photo-cell ─────────────────── */
.clickable,
.photo-cell {
  position: relative;
  overflow: hidden;
  cursor:   pointer;
}
.photo-cell .ph,
.photo-cell img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: opacity var(--transition-mid);
}
.photo-cell:hover .ph,
.photo-cell:hover > img { opacity: .78; }

/* ── Layout grids ───────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--col-gap);
}

/* ── Section padding helpers ────────────────── */
.sec    { padding: 0 var(--page-margin); margin-bottom: var(--space-xl); }
.sec-sm { padding: 0 var(--page-margin); margin-bottom: var(--space-lg); }

/* ── Archive table ──────────────────────────── */
.archive-table {
  width: 100%;
  border-collapse: collapse;
}
.archive-table tr   { border-bottom: 1px solid var(--border); }
.archive-table td   { padding: 16px 0; }
.archive-table a:hover { opacity: .5; }

/* ── Page fade-in animation ─────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.page-content { animation: fadeIn .28s ease; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .two-col   { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
}