/* index.php */

/* Hero */
.hero {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: max-content;
  margin: 0 auto;
  padding: min(64px, calc(64vw / var(--resizer) * 100)) min(28px, calc(28vw / var(--resizer) * 100));
  gap: min(56px, calc(56vw / var(--resizer) * 100));
  flex-direction: column;
  flex-wrap: wrap;
  max-width: min(70%, 784px);
}
.hero__body { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: min(22px, calc(22vw / var(--resizer) * 100)); text-align: left; width: 100%; }
.hero__intro { display: flex; justify-content: flex-start; align-items: flex-start; max-width: 680px; gap: min(15px, calc(15vw / var(--resizer) * 100)); flex-direction: column; text-align: left; }
.hero__title { font-size: clamp(min(48px, var(--type-min)), calc(48vw / var(--resizer) * 100), 48px); font-weight: 700; }
.hero__title-highlight { color: var(--color-accent); }
.hero__excerpt { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(min(19px, var(--type-min)), calc(19vw / var(--resizer) * 100), 19px); font-weight: 400; line-height: clamp(min(24px, var(--type-min)), calc(24vw / var(--resizer) * 100), 24px); }
.hero__actions { display: flex; justify-content: flex-start; align-items: center; gap: min(10px, calc(10vw / var(--resizer) * 100)); flex-wrap: wrap; width: 100%; height: min(50px, calc(50vw / var(--resizer) * 100)); }
.hero__media { display: flex; justify-content: center; align-items: center; max-width: 100%; gap: min(24px, calc(24vw / var(--resizer) * 100)); flex-wrap: wrap; width: 100%; }
.hero__image { width: 100%; height: min(300px, calc(300vw / var(--resizer) * 100)); border-radius: min(16px, calc(16vw / var(--resizer) * 100)); object-fit: cover; box-shadow: 0 min(14px, calc(14vw / var(--resizer) * 100)) min(34px, calc(34vw / var(--resizer) * 100)) max(-16px, calc(-16vw / var(--resizer) * 100)) rgba(254, 254, 254, .2); }

/* Shared section shell for gallery / reading list */
.section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: max-content;
  gap: min(40px, calc(40vw / var(--resizer) * 100));
  padding: min(64px, calc(64vw / var(--resizer) * 100)) min(28px, calc(28vw / var(--resizer) * 100));
  flex-direction: column;
  scroll-margin-top: var(--anchor-offset);
  max-width: min(70%, 784px);
  margin: 0 auto;
  border-top: min(1px, calc(1vw / var(--resizer) * 100)) solid rgba(254, 254, 254, .12);
}
.section__title { font-size: clamp(min(34px, var(--type-min)), calc(34vw / var(--resizer) * 100), 34px); font-weight: 700; text-align: left; }

/* Gallery */
.gallery__row { display: flex; justify-content: flex-start; align-items: center; max-width: 100%; gap: min(28px, calc(28vw / var(--resizer) * 100)); flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; padding-bottom: min(6px, calc(6vw / var(--resizer) * 100)); }
.gallery__image {
  width: min(200px, calc(200vw / var(--resizer) * 100));
  height: min(223px, calc(223vw / var(--resizer) * 100));
  border-radius: min(16px, calc(16vw / var(--resizer) * 100));
  object-fit: cover;
  object-position: center;
  flex: 0 0 70%;
  max-width: 70%;
  scroll-snap-align: start;
  border: min(1px, calc(1vw / var(--resizer) * 100)) solid var(--color-text);
}

/* Reading list */
.reading__grid { display: grid; justify-content: center; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); width: 100%; gap: min(18px, calc(18vw / var(--resizer) * 100)); }

.card {
  display: flex;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  border-radius: min(16px, calc(16vw / var(--resizer) * 100));
  border: min(1px, calc(1vw / var(--resizer) * 100)) solid var(--color-text);
  text-align: left;
  overflow: hidden;
}
.card__media { display: flex; justify-content: center; align-items: center; width: 100%; height: min(200px, calc(200vw / var(--resizer) * 100)); overflow: hidden; }
.card__image { display: block; width: 100%; height: 100%; object-position: center; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: min(10px, calc(10vw / var(--resizer) * 100)); padding: min(19px, calc(19vw / var(--resizer) * 100)); }
.card__title { font-size: clamp(min(18px, var(--type-min)), calc(18vw / var(--resizer) * 100), 18px); font-weight: 700; line-height: clamp(min(23px, var(--type-min)), calc(23vw / var(--resizer) * 100), 23px); }
.card__excerpt { display: block; margin-top: min(8px, calc(8vw / var(--resizer) * 100)); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(min(14px, var(--type-min)), calc(14vw / var(--resizer) * 100), 14px); font-weight: 300; opacity: .68; line-height: clamp(min(21px, var(--type-min)), calc(21vw / var(--resizer) * 100), 21px); }
.card__meta {
  display: flex;
  gap: min(8px, calc(8vw / var(--resizer) * 100));
  border-top: min(1px, calc(1vw / var(--resizer) * 100)) solid rgba(254, 254, 254, .18);
  padding-top: min(10px, calc(10vw / var(--resizer) * 100));
  margin-top: min(4px, calc(4vw / var(--resizer) * 100));
  opacity: .72;
  font-size: clamp(min(20px, var(--type-min)), calc(20vw / var(--resizer) * 100), 20px);
}
.card__actions { display: flex; align-items: center; gap: min(10px, calc(10vw / var(--resizer) * 100)); margin-top: auto; flex-wrap: wrap; }

/* Contact */
.contact { display: flex; justify-content: center; align-items: center; width: 100%; padding: min(64px, calc(64vw / var(--resizer) * 100)) min(28px, calc(28vw / var(--resizer) * 100)); gap: min(48px, calc(48vw / var(--resizer) * 100)); flex-wrap: wrap; scroll-margin-top: var(--anchor-offset); max-width: min(70%, 784px); margin: 0 auto; border-top: min(1px, calc(1vw / var(--resizer) * 100)) solid rgba(254, 254, 254, .12); }
.contact__intro { display: flex; justify-content: center; align-items: center; flex: 1 1 260px; min-width: 0; max-width: min(650px, calc(650vw / var(--resizer) * 100)); margin: auto; text-align: center; }
.contact__title { font-size: clamp(min(48px, var(--type-min)), calc(48vw / var(--resizer) * 100), 48px); font-weight: 700; }
.contact__form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(14px, calc(14vw / var(--resizer) * 100));
  flex-direction: column;
  flex: 1 1 360px;
  width: 100%;
  max-width: 480px;
  background-color: var(--color-bg-alt);
  border-radius: min(20px, calc(20vw / var(--resizer) * 100));
  padding: min(28px, calc(28vw / var(--resizer) * 100));
  border: min(1px, calc(1vw / var(--resizer) * 100)) solid var(--color-text);
}
.contact__input {
  width: 100%;
  height: min(50px, calc(50vw / var(--resizer) * 100));
  padding: 0 min(10px, calc(10vw / var(--resizer) * 100));
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: clamp(min(16px, var(--type-min)), calc(16vw / var(--resizer) * 100), 16px);
  border: none;
  border-radius: min(16px, calc(16vw / var(--resizer) * 100));
}
.contact__submit {
  width: 100%;
  height: min(50px, calc(50vw / var(--resizer) * 100));
  color: var(--color-bg);
  background-color: var(--color-accent);
  font-size: clamp(min(16px, var(--type-min)), calc(16vw / var(--resizer) * 100), 16px);
  font-weight: 700;
  border: none;
  border-radius: min(16px, calc(16vw / var(--resizer) * 100));
}
.contact__success { font-size: clamp(min(16px, var(--type-min)), calc(16vw / var(--resizer) * 100), 16px); text-align: center; }