/* ============================================================
   TALITH ART DEL — MAIN STYLESHEET
   Every page on the site links to this file.
   Change something here, it changes everywhere.
   ============================================================ */

/* ---------- 1. COLOR PALETTE ---------- */
:root {
  --pastel-blue:      #B8D8F0;
  --pastel-turquoise: #A8E6D8;
  --pastel-green:     #C8EAC2;
  --pastel-lilac:     #D8C8F0;
  --alive-purple:     #8B3FD9;
  --ink:              #1A1620;
  --ink-soft:         #4A4055;
  --paper:            #FDFBF7;
}

/* ---------- 2. RESET (makes browsers behave) ---------- */
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, img, ul, ol, li, nav,
header, footer, main, section, article, figure {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- 3. BODY — the base look of every page ---------- */
body {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  padding-left: 220px; /* leaves room for the fixed menu on the left */
}

/* Subtle paper texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(26, 22, 32, 0.015) 2px,
    rgba(26, 22, 32, 0.015) 4px
  );
  z-index: 9999;
}

/* ---------- 4. THE LEFT MENU (same on every page) ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1000;
}

.nav-item {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--pastel-lilac);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.2s ease;
  transform: rotate(-2deg);
}

.nav-item:hover {
  transform: rotate(0deg) scale(1.05);
  background: var(--alive-purple);
  color: white;
  box-shadow: 5px 5px 0 var(--ink);
}

/* Each menu item tilts a different way so it feels hand-placed */
.nav-item:nth-child(2) { transform: rotate(1.5deg); background: var(--pastel-turquoise); }
.nav-item:nth-child(3) { transform: rotate(-1deg);  background: var(--pastel-green); }
.nav-item:nth-child(4) { transform: rotate(2deg);   background: var(--pastel-blue); }
.nav-item:nth-child(5) { transform: rotate(-1.5deg); background: var(--pastel-lilac); }

/* The page you're currently on gets highlighted */
.nav-item.active {
  background: var(--alive-purple);
  color: white;
}

/* ---------- 5. MARQUEE — the scrolling strip at the top ---------- */
.marquee {
  background: var(--alive-purple);
  color: white;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 2rem;
}

.marquee span {
  display: inline-block;
  animation: scroll 20s linear infinite;
  padding-right: 3rem;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 6. MAIN CONTENT AREA ---------- */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}

/* ---------- 7. PAGE TITLE (the big one at the top) ---------- */
.site-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.3em;
}

.site-title .accent {
  color: var(--alive-purple);
  font-style: italic;
}

/* Smaller titles for sections within a page */
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--ink);
  margin: 3rem 0 1rem;
}

.section-title .highlight {
  display: inline-block;
  background: var(--alive-purple);
  color: white;
  padding: 0.05em 0.2em;
  transform: rotate(-1.5deg);
}

/* ---------- 8. BODY TEXT ---------- */
p {
  margin-bottom: 1.25rem;
  max-width: 65ch;
}

a {
  color: var(--alive-purple);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

a:hover {
  background: var(--pastel-lilac);
  text-decoration: none;
  padding: 0 0.15em;
}

/* ---------- 9. CARDS — the "taped-on" content boxes ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0 3rem;
}

.scrapbook-card {
  background: var(--pastel-blue);
  border: 2px solid var(--ink);
  padding: 1.75rem;
  box-shadow: 6px 6px 0 rgba(26, 22, 32, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* The "tape" strip on top of each card */
.scrapbook-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20px;
  width: 60px;
  height: 20px;
  background: rgba(168, 230, 216, 0.85);
  border: 1px solid rgba(26, 22, 32, 0.15);
  transform: rotate(-5deg);
}

.scrapbook-card:hover {
  transform: translateY(-5px) rotate(0.5deg);
  box-shadow: 10px 10px 0 rgba(26, 22, 32, 0.25);
  z-index: 10;
}

/* Vary the card colors and tilts for organic feel */
.scrapbook-card:nth-child(2n) {
  background: var(--pastel-green);
  transform: rotate(1deg);
}
.scrapbook-card:nth-child(3n) {
  background: var(--pastel-lilac);
  transform: rotate(-1.5deg);
}
.scrapbook-card:nth-child(4n) {
  background: var(--pastel-turquoise);
  transform: rotate(2deg);
}

.scrapbook-card h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.scrapbook-card p {
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- 10. PULL QUOTE ---------- */
.pull-quote {
  margin: 3rem 0 3rem 15%;
  max-width: 45ch;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.35;
  color: var(--alive-purple);
  border-left: 6px solid var(--pastel-lilac);
  padding-left: 1.5rem;
}

/* ---------- 11. FOOTER ---------- */
footer {
  background: var(--ink);
  color: white;
  padding: 3rem 2rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

footer a {
  color: var(--pastel-turquoise);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}

footer a:hover {
  color: var(--alive-purple);
  text-decoration: underline;
  background: none;
}

/* ---------- 12. MOBILE — when the screen is narrow ---------- */
@media (max-width: 800px) {
  body {
    padding-left: 0;
    padding-top: 100px;
  }

  .site-nav {
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--paper);
  }

  .nav-item {
    transform: none !important;
  }

  main {
    padding: 1.5rem 1.25rem 4rem;
  }

  .pull-quote {
    margin-left: 0;
  }
}

/* ---------- 13. ACCESSIBILITY — turn off motion if user asks ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee span,
  .nav-item,
  .scrapbook-card,
  .section-title .highlight {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ---------- 14. BILINGUAL LAYOUT ---------- */
.bilingual-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 1.75rem;
  align-items: start;
}

/* Small EN / PT label above each paragraph */
.lang-en::before {
  content: 'EN';
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--alive-purple);
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.lang-pt::before {
  content: 'PT';
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--alive-purple);
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

/* Subtle vertical divider between the two columns */
.lang-pt {
  border-left: 2px solid var(--pastel-lilac);
  padding-left: 2.5rem;
}

/* Paragraphs inside bilingual pairs sit flush */
.bilingual-pair p {
  margin-bottom: 0;
  max-width: none;
}

/* On narrow screens, stack them and show a soft divider */
@media (max-width: 900px) {
  .bilingual-pair {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--pastel-lilac);
  }
  .lang-pt {
    border-left: none;
    padding-left: 0;
  }
}

/* ---------- 16. WIDE CARDS (for video, big media, etc.) ---------- */
.scrapbook-card--wide {
  grid-column: 1 / -1; /* makes it span every column in the grid */
}

.wide-card-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: start;
}

.wide-card-media iframe,
.wide-card-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(26, 22, 32, 0.2);
  display: block;
  background: var(--ink);
}

.wide-card-text h3 {
  margin-bottom: 0.75rem;
}

.wide-card-text p:last-child {
  margin-bottom: 0;
}

/* On narrow screens, stack the video above the text */
@media (max-width: 750px) {
  .wide-card-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ---------- 17. TWO-COLUMN TEXT + VIDEO BELOW ---------- */
.scrapbook-card--wide {
  grid-column: 1 / -1;
}

.two-col-text {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid rgba(26, 22, 32, 0.15);
}

.two-col-text p {
  margin-bottom: 1.25rem;
  max-width: none;
  break-inside: avoid; /* stops a paragraph being split across the two columns */
}

.wide-card-media {
  margin-top: 1.5rem;
}

.wide-card-media iframe,
.wide-card-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(26, 22, 32, 0.2);
  display: block;
  background: var(--ink);
}

/* On narrow screens, single column text */
@media (max-width: 750px) {
  .two-col-text {
    column-count: 1;
    column-rule: none;
  }
}

/* ---------- 18. BILINGUAL PAIR INSIDE A CARD ---------- */
.scrapbook-card .bilingual-pair {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.scrapbook-card .bilingual-pair p {
  font-size: 1rem;
  line-height: 1.65;
}

.scrapbook-card .bilingual-pair .lang-en,
.scrapbook-card .bilingual-pair .lang-pt {
  padding-top: 0;
}