/* racheljmarko.com — shared site styles
   Palette + fonts based on Rachel's Canva mockup:
   - Landing/blog background: #dad0c2 (warm tan)
   - Gallery background: #f1eeee (soft off-white) — applied via body.gallery-page below
   - Headline font: Papercutting — the real font from the mockup. Scott/Rachel bought the
     Desktop + Webfont license from Creative Market (Creativetacos); files are self-hosted
     under /assets/fonts/, see the @font-face below. No Google Fonts link needed for this one.
   - Body font: General Sans (free, Fontshare) — standing in for "PP Telegraf" from the
     mockup, which is also a paid commercial font (Rachel decided the free look-alike was fine
     for body text). See README.md for details. */

@font-face {
  font-family: 'Papercutting';
  src: url('/assets/fonts/papercutting-regular.woff2') format('woff2'),
       url('/assets/fonts/papercutting-regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

:root {
  --color-bg: #dad0c2;
  --color-bg-alt: #f1eeee;
  --color-text: #2a2420;
  --color-muted: #6b6560;
  --color-accent: #9c6b4f;
  --color-border: #c9bba8;
  --font-heading: 'Papercutting', cursive;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

body.gallery-page { background: var(--color-bg-alt); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 1.5rem;
}

.site-header .wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

.site-nav { display: flex; gap: 1.5rem; }
.site-nav a { color: var(--color-text); font-size: 0.95rem; }
.site-nav a.active { color: var(--color-accent); font-weight: 600; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  line-height: 1.25;
}

h1 { font-size: 2.1rem; margin-bottom: 0.5rem; letter-spacing: 0.02em; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; letter-spacing: 0.02em; }

.lede {
  color: var(--color-muted);
  font-size: 1.1rem;
  max-width: 65ch;
}

.notice {
  background: #fff8ec;
  border: 1px solid #f0e2c4;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  color: #6b5730;
  margin: 1.5rem 0 2.5rem;
}

/* Hero — landing page only. Left box is a fixed image (Rachel's block-print pattern) with
   a pre-rendered "Artist / Creator / Connector / Fabricator" graphic overlaid on top (a plain
   image, not live CSS text — this sidesteps font/size rendering differences across devices).
   Right box is a live image pulled at random from Rachel's Drive gallery on every page load,
   via hero.js. */
.hero { margin-bottom: 3rem; }

.hero-visual {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  min-height: 280px;
}

.hero-pattern {
  position: relative;
  border-radius: 6px;
  background-color: var(--color-border);
  background-image: url('/assets/images/hero-pattern.jpg');
  background-size: cover;
  background-position: center;
}

/* The "Artist / Creator / Connector / Fabricator" graphic, right-justified over the pattern
   image at reduced opacity so the pattern shows through. Sized as a percentage of the pattern
   box, so it scales naturally at every screen width with no separate mobile rules needed. */
.hero-text-img {
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 55%;
  max-width: 420px;
  opacity: 0.75;
}

.hero-tile {
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-border);
}

.hero-tile img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .hero-visual { gap: 0.6rem; min-height: 260px; }
  .hero-text-img { width: 62%; right: 3%; }
}

.bio-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 720px) {
  .bio-section { grid-template-columns: 280px 1fr; }
}

.essay {
  max-width: 68ch;
  margin: 0 0 3rem;
}

.essay p {
  margin: 0 0 1.25rem;
}

.bio-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}

.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-form {
  max-width: 520px;
}

.contact-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 1rem 0 0.35rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form button {
  margin-top: 1.5rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}

.contact-form button:hover { opacity: 0.9; }

/* Follow / social links */
.social-links { margin: 2rem 0 0; }

.social-links p {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a:hover { opacity: 0.85; }
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }

.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.gallery-tabs button {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}

.gallery-tabs button.active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.gallery-grid .tile {
  aspect-ratio: 1 / 1;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.gallery-grid .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Watermarked lightbox preview (see gallery.js) */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  z-index: 100;
}

/* The [hidden] attribute and this class both have equal CSS specificity, and this rule
   comes later in the file — without this override, "display: flex" above would win and
   the lightbox would stay visible even while hidden. */
.lightbox[hidden] {
  display: none;
}

.lightbox-inner {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.lightbox-inner canvas,
.lightbox-inner img#lightbox-fallback-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 4px;
  background: #111;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.lightbox-caption {
  color: #f1eeee;
  font-size: 0.82rem;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

/* Prev/next arrows — fixed to the left/right edges of the whole overlay (not the image
   box), so they stay put regardless of the current image's size or orientation. Hidden
   entirely when the gallery category has only one image (see gallery.js). */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 16, 12, 0.45);
  border: 0;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav:hover { background: rgba(20, 16, 12, 0.7); }

.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .lightbox-prev { left: 0.35rem; }
  .lightbox-next { right: 0.35rem; }
}

/* Blog — card grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem;
  margin: 2rem 0;
}

.blog-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.blog-card-body { padding: 1rem 1.25rem 1.25rem; }

.blog-card .post-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}

.blog-card .post-date {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}

.blog-card .post-readmore { font-size: 0.85rem; font-weight: 600; }

.blog-card .post-excerpt {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.post-date { font-size: 0.82rem; color: var(--color-muted); }

#blog-post-view img { max-width: 100%; border-radius: 6px; }

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}