/* ============================================================
   StellaWare — portfolio
   One stylesheet for the whole site. Edit colors/spacing here.
   ============================================================ */

:root {
  --bg:        #0b0b0b;   /* near-black, not pure black — easier on the eyes */
  --fg:        #e6e6e6;   /* off-white body text */
  --dim:       #7a7a7a;   /* secondary text, meta lines, captions */
  --rule:      #262626;   /* hairline dividers */
  --hover:     #ffffff;   /* link hover */

  --measure:   42rem;     /* max text column width */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;

  color-scheme: dark;     /* makes scrollbars/form controls match */
}

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

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

body {
  margin: 0 auto;
  padding: 5rem 1.5rem 8rem;
  max-width: var(--measure);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- links ---------- */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 120ms ease, border-color 120ms ease;
}

a:hover,
a:focus-visible {
  color: var(--hover);
  border-bottom-color: var(--hover);
}

a:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }

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

.site-name {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

.site-tagline {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--dim);
  margin: 0.5rem 0 0;
}

/* ---------- front page sections ---------- */

.section { margin-top: 4rem; }

.section-label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--dim);
  margin: 0 0 1.25rem;
}

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entries li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}

.entries li:last-child { border-bottom: 1px solid var(--rule); }

.entries a { border-bottom: none; }

.entries a:hover .entry-title,
.entries a:focus-visible .entry-title { color: var(--hover); }

.entry-title { display: block; }

.entry-note {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--dim);
}

/* ---------- project pages ---------- */

.back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-bottom: none;
  margin-bottom: 3rem;
}

.back:hover, .back:focus-visible { color: var(--hover); }

h1 {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--dim);
  margin: 0.5rem 0 3rem;
}

h2 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 3.5rem 0 1rem;
}

p { margin: 0 0 1.25rem; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.5rem 0;
}

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

figure { margin: 2.5rem 0; }

figure img,
figure video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
  margin-top: 0.6rem;
}

/* responsive YouTube / Vimeo wrapper */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* simple 2-up image grid — add class="grid" to a container of <figure>s */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.grid figure { margin: 0; }

/* ---------- download button ---------- */

.download {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--dim);
  color: var(--fg);
  background: transparent;
  margin: 0.5rem 0 0.75rem;
}

.download:hover,
.download:focus-visible {
  color: var(--hover);
  border-color: var(--hover);
  background: #151515;
}

.download-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
  margin: 0 0 2rem;
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
}

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  body { padding: 3rem 1.25rem 5rem; }
  .section { margin-top: 3rem; }
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}