/* ============================================================
   STYLE.CSS — generated from theme tokens in src/_data/site.js
   Edit theme colors/fonts there. Edit structural rules here.
   ============================================================ */

:root {
  --color-bg:            #f4f4f4;
  --color-bg-card:       #ffffff;
  --color-bg-input:      #c3c3c3;
  --color-border:        #e0e0e0;
  --color-text:          #111111;
  --color-text-mid:      #444444;
  --color-text-muted:    #8d8d8d;
  --color-accent:        #000000;
  --color-accent-hover:  #262626;
  --font-heading:        'DM Sans', system-ui, sans-serif;
  --font-body:           'DM Sans', system-ui, sans-serif;
  --radius:              10px;
  --radius-pill:         999px;
}

/* ── Reset & base ────────────────────────────────────────── */

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

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

body {
  font-family: var(--font-body);
  background:  var(--color-bg);
  color:       var(--color-text);
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img            { max-width: 100%; height: auto; display: block; }
button         { cursor: pointer; border: none; background: none; font-family: inherit; }
a              { text-decoration: none; color: inherit; }
input, button  { font-family: inherit; font-size: inherit; }

/* ── Visually-hidden (kept in the DOM for SEO + screen readers) ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Page wrapper ────────────────────────────────────────── */

#page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

.container {
  width:     100%;
  max-width: 440px;
  margin:    0 auto;
  padding:   0 1rem;
  flex:      1;
}

/* ── Entrance fade (whole-page, respects reduced motion) ──── */

.fade-in {
  opacity:    0;
  transform:  translateY(10px);
  animation:  fadeIn 0.6s ease forwards;
}
.profile.fade-in    { animation-delay: 0s; }
.newsletter.fade-in  { animation-delay: 0.1s; }

@keyframes fadeIn {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PROFILE HEADER — photo, name, social icons only
   ════════════════════════════════════════════════════════════ */

.profile {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        2.75rem 0 1.5rem;
  gap:            0.7rem;
}

.avatar {
  width:         80px;
  height:        80px;
  border-radius: 14px;
  object-fit:    cover;
  background:    var(--color-bg-input);
}

.name {
  font-family:    var(--font-heading);
  font-size:      1.2rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--color-text);
  line-height:    1.25;
}

.bio {
  font-size:   0.86rem;
  color:       var(--color-text-muted);
  max-width:   300px;
  line-height: 1.5;
  margin-top:  -0.15rem;
}

.social-row {
  display:         flex;
  align-items:     center;
  gap:             0.6rem;
  margin-top:      0.4rem;
  flex-wrap:       wrap;
  justify-content: center;
}

.social-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  border:          1px solid var(--color-border);
  color:           var(--color-text-mid);
  transition:      background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.social-icon:hover,
.social-icon:focus-visible {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        #fff;
  transform:    translateY(-2px);
}
.social-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.social-icon svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════════════════════ */

.newsletter-heading {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  font-family:    var(--font-heading);
  font-size:      1.15rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--color-text);
  padding:        0.75rem 0 0.25rem;
}

.newsletter-icon {
  width:       1.1em;
  height:      1.1em;
  flex-shrink: 0;
}

.newsletter {
  display:        flex;
  flex-direction: column;
  gap:            0.85rem;
  padding-bottom: 2.5rem;
}

.newsletter-copy {
  font-size:   0.92rem;
  color:       var(--color-text-mid);
  line-height: 1.6;
  text-align:  center;
}

.email-form {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  margin-top:     0.35rem;
}

.email-input {
  width:         100%;
  padding:       0.85rem 1rem;
  border:        1px solid transparent;
  border-radius: var(--radius);
  font-size:     0.9rem;
  color:         var(--color-text);
  background:    var(--color-bg-input);
  outline:       none;
  transition:    border-color 0.18s ease, box-shadow 0.18s ease;
}
.email-input::placeholder { color: #6f6f6f; }
.email-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(0, 0, 0, 0.08);
}

.email-submit {
  position:      relative;
  overflow:      hidden;
  z-index:       1;
  width:         100%;
  padding:       0.9rem 1rem;
  background-color: var(--color-accent);
  color:         #ffffff;
  border-radius: var(--radius);
  font-size:     0.95rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    background-color 0.18s ease, transform 0.18s ease;
}
.email-submit:hover         { background-color: var(--color-accent-hover); transform: translateY(-1px); }
.email-submit:active        { transform: translateY(0); }
.email-submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Keeps the button label above the shimmer sweep — wrap the label in a <span> in the template */
.email-submit span {
  position: relative;
  z-index:  2;
}

/* The shimmer itself: a soft diagonal light streak sweeping across the button */
.email-submit::before {
  content: '';
  position: absolute;
  top:    -50%;
  left:   -50%;
  width:  200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0)   28%,
    rgba(255, 255, 255, 0.1) 39%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.1) 61%,
    rgba(255, 255, 255, 0)   72%,
    rgba(255, 255, 255, 0)  100%
  );
  filter: blur(4px);
  animation: shimmer-sweep 3.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .email-submit::before { animation: none; }
}

.disclaimer {
  font-size:  0.78rem;
  color:      var(--color-text-muted);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

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

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 380px) {
  .container { padding: 0 0.75rem; }
  .avatar    { width: 68px; height: 68px; }
}