/* Papert Lab — Single-page site with micro-animations */

:root {
  --bg: #f5f0e6;
  --text: #3D3530;
  --text-muted: #6B6358;
  --text-tertiary: #9B9488;
  --accent: #5C3A1E;
  --card-bg: #FAF8F3;
  --card-border: #E8E2D8;
  --max-width: 640px;
}

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

html {
  scroll-padding-top: 5rem;
}

html, body {
  overscroll-behavior-y: contain;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Paper texture — baked into the background, not overlaid on content */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 256px, 512px;
  background-repeat: repeat;
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg);
  background-image: inherit;
  background-size: inherit;
  background-repeat: inherit;
}


nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav-links {
  grid-column: 2;
  justify-self: center;
}

.site-name {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  height: 40px;
  pointer-events: none;
  text-decoration: none;
  vertical-align: middle;
}

.site-name img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0.2);
}

header.scrolled .site-name {
  pointer-events: auto;
}

body.project-page {
  --max-width: 1400px;
}

body.project-page .anchor-section p {
  max-width: 70ch;
}

body.project-page .anchor-section ol,
body.project-page .anchor-section ul {
  max-width: 70ch;
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
}

body.project-page .anchor-section ol li,
body.project-page .anchor-section ul li {
  margin-bottom: 0.6rem;
  padding-left: 0.4rem;
}

body.subpage .site-name {
  max-width: 73px;
  pointer-events: auto;
}

body.subpage main > section {
  padding-top: 4rem;
}

body.subpage .content-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.subpage .content-list li {
  margin: 0.4rem 0;
  padding: 0;
  border: none;
}

body.subpage .content-list li:first-child {
  border-top: none;
}

body.subpage .page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: normal;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-align: center;
  text-wrap: balance;
}

body.subpage .anchor-section p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

body.subpage .paper-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: normal;
  color: var(--text);
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

body.subpage .label-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-tertiary);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 400;
}

.nav-links a { color: var(--text-tertiary); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--accent); }

/* ── Main ── */
main { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem 2rem; }

/* ── Hero (outside <main>, full-width) ── */
.hero {
  text-align: center;
  margin-bottom: 0;
  padding-top: 16vh;
  padding-bottom: 8vh;
}

.hero-container {
  position: relative;
  display: inline-block;
  will-change: transform, opacity;
  /* Below the header but above grain overlays — but we WANT grain on the page, not on the image.
     Since the image has transparent bg, it naturally shows the page bg through it.
     Keep it below the grain so the rest of the site gets texture. */
  z-index: 5;
}

@keyframes heroEntrance {
  0% { opacity: 0; transform: scale(0.96) translateY(15px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.hero-container { animation: heroEntrance 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s both; }

.hero-image {
  width: 85vw;
  max-width: 1024px;
  height: auto;
  display: block;
}

/* Overlays positioned on top of composite */
.hero-overlay { position: absolute; pointer-events: none; }
.hero-overlay img { width: 100%; height: auto; display: block; }

/* Chalk text on the chalkboard face. Clipped to the dark board area
   so it doesn't overlap the desk/laptop baked into the base image. */
#overlay-chalk {
  top: -2%;
  left: 24%;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 55%;
  /* Clip bottom so text stays within chalkboard face only */
  clip-path: inset(0% 0% 32% 0%);
  --erase: 0%;
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--erase)), transparent calc(100% - var(--erase) + 5%), transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--erase)), transparent calc(100% - var(--erase) + 5%), transparent 100%);
}

/* ── Section headings ── */
.section-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

/* ── Manifesto image (inside manifesto section, after heading) ── */
.manifesto .manifesto-image {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  border-radius: 4px;
}

/* ── Manifesto text ── */
.manifesto { margin-bottom: 3rem; }
.manifesto p { font-size: 1rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 1.2rem; }
.manifesto p:last-child { margin-bottom: 0; }

/* ── Anchor sections ── */
.anchor-section { margin-bottom: 2.5rem; padding-top: 0.5rem; }
.anchor-section p { font-size: 1rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 1rem; }
.anchor-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.anchor-section a:hover { color: var(--text); }
.anchor-section a:visited { color: var(--accent); }

/* Content list (from md files) */
.content-list {
  list-style: none;
  margin-top: 1.5rem;
}

.content-list li {
  display: block;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.content-list li:first-child {
  border-top: 1px solid var(--card-border);
}

.content-list li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.content-list li a:hover { color: var(--text); }
.content-list li a:visited { color: var(--accent); }

.content-list li.two-col {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.li-left { flex: 1; }
.li-right {
  flex-shrink: 0;
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  max-width: 40%;
  line-height: 1.5;
}

.content-list .date {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: 1rem;
}

.content-subheading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Footer ── */
footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--card-border);
}
footer a { color: var(--text-tertiary); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--accent); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-container { animation: none !important; opacity: 1 !important; transform: none !important; }
  .site-name { opacity: 1 !important; pointer-events: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #overlay-chalk { --erase: 0% !important; }
}

/* ── Mobile ── */
@media (max-width: 500px) {
  nav { padding: 1rem; }
  .nav-links { gap: 1.2rem; font-size: 12px; letter-spacing: 2px; }
  main { padding: 0 1rem 2rem; }
  .hero { padding-top: 8vh; padding-bottom: 4vh; }
  .hero-image { width: 100%; max-width: none; }
  .manifesto-image-section .manifesto-image { width: calc(100% + 2rem); margin-left: -1rem; height: 180px; }
  footer { padding: 1.5rem 1rem 2rem; }
}