/* ── reinunculus.studio ──────────────────────────────────────────────
   Colours live up here so you can retheme the whole site in one place. */
:root {
  --bg:      #fffaf7;   /* warm cream */
  --ink:     #3b2f33;   /* soft dark brown-plum */
  --muted:   #8a7378;
  --petal:   #f5b0c0;   /* ranunculus pink */
  --petal-2: #ffd3b5;   /* peach */
  --leaf:    #8fb996;   /* sage */
  --card:    #ffffff;
  --line:    #f0dfe3;
  --radius:  14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1a1c; --ink: #f4e9ec; --muted: #b59ea5;
    --card: #2a2326; --line: #3a3034;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; text-decoration-color: var(--petal); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--leaf); }
h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h1::before { content: "✿ "; color: var(--petal); }
h1::after { content: " ✿"; color: var(--petal); }
h2 { font-size: 1.6rem; margin: 0 0 1rem;  }
h2::before { content: "✿ "; color: var(--petal); }
code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--line); padding: 0.1em 0.35em; border-radius: 5px; }

#homepage-title { color: var(--petal); }

.portfolio-project-link { text-decoration: none; }
.portfolio-project-link:visited { color: var(--petal); }
.portfolio-project-link:active { transform: scale(0.95) translateY(2px); }
.portfolio-project-link:hover { transform: scale(1.02); color: var(--leaf); }


.hero {
  padding: clamp(3rem, 10vw, 7rem) 1.25rem 3rem;
  max-width: 44rem; margin: 0 auto;
}
.eyebrow { margin: 0; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0.25rem 0 0.5rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 32rem; margin: 0 0 1.5rem; }
nav a {
  display: inline-block; margin: 0 0.75rem 0.5rem 0; padding: 0.4rem 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  background: var(--card);
}
nav a:hover { border-color: var(--petal); }

section { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--line);
}
.gallery figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.gallery-icon:hover{ transform: scale(1.02); }
.gallery-icon:active{ transform: scale(0.95) translateY(2px) }

.projects { display: grid; gap: 1rem; }
.projects article {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.projects h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.projects p { margin: 0 0 0.5rem; }
.tags span {
  display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.6rem; margin-right: 0.35rem;
  border-radius: 999px; background: var(--petal-2); color: var(--ink);
}
@media (prefers-color-scheme: dark) { .tags span { background: #4a3a3f; } }

.contact a { font-weight: 600; }

footer {
  max-width: 44rem; margin: 2rem auto 0; padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem;
}
footer p { margin: 0.25rem 0; }
.start-here { color: var(--leaf); }

/* -- coordinated-fits --- */
.project-page-photo-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    width: 100%;
    padding: 0;
}

.coordinated-fits-photo, .project-page-photo, .project-page-video {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}