:root{
  --bg: #f3ead6; /* warm sepia */
  --paper: #fffdf7;
  --ink: #2e2b28; /* dark gray for text */
  --muted: #8b7d72;
  --gold: #c9a34a;
  --shadow: rgba(46,43,40,0.08);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Noto Serif', serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}

.site-header{position:fixed;top:0;left:0;right:0;z-index:40;background:linear-gradient(180deg,rgba(243,234,214,0.85),rgba(243,234,214,0.6));backdrop-filter:blur(4px);border-bottom:1px solid rgba(0,0,0,0.03)}
.nav{max-width:1100px;margin:0 auto;display:flex;gap:18px;padding:12px 20px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-family:'Roboto Mono',monospace;padding:6px 10px;border-radius:6px}
.nav a:hover{color:var(--ink);background:rgba(0,0,0,0.02)}

.intro-section{min-height:90vh;display:grid;place-items:center;padding:120px 20px 60px}
.intro-inner{max-width:900px;text-align:center;padding:40px;background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.4));border-radius:12px;box-shadow:0 8px 30px var(--shadow);border:1px solid rgba(0,0,0,0.03)}
.intro-inner h1{font-size:clamp(2rem,5vw,3.8rem);margin:0;font-family:'Noto Serif',serif;color:var(--ink)}
.lead{font-size:1.05rem;color:var(--muted);margin-top:12px;font-family:'Noto Serif',serif}
.intro-cta{margin-top:18px;display:flex;gap:12px;justify-content:center}
.btn{background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;text-decoration:none;font-family:'Roboto Mono',monospace}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--ink)}

.section-title{max-width:1100px;margin:40px auto 12px;padding:0 20px;font-family:'Roboto Mono',monospace;color:var(--ink);letter-spacing:0.06em}

.timeline-section{padding:40px 0 60px}
.timeline{max-width:1100px;margin:0 auto;padding:20px 20px;position:relative}
.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),transparent);transform:translateX(-50%);opacity:0.9}
.timeline-item{width:50%;padding:18px;position:relative;min-height:90px}
.timeline-item.left{left:0;text-align:right;margin-left:0}
.timeline-item.right{left:50%;margin-left:0}
.timeline-item .timeline-date{display:block;font-weight:700;color:var(--gold);font-family:'Roboto Mono',monospace}
.timeline-card{display:inline-block;background:var(--paper);padding:14px;border-radius:8px;box-shadow:0 10px 30px var(--shadow);border:1px solid rgba(0,0,0,0.04);max-width:420px}

.gallery-section{padding:40px 0 80px}
.gallery-grid{max-width:1100px;margin:0 auto;display:flex;gap:20px;padding:12px 20px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.gallery-grid::-webkit-scrollbar{height:10px}
.gallery-grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:10px}
.polaroid{background:var(--paper);padding:14px 14px 36px;border-radius:6px;display:block;box-shadow:0 12px 40px var(--shadow);border:1px solid rgba(0,0,0,0.05);transform:rotate(-1deg);transition:transform 240ms ease,box-shadow 240ms;flex:0 0 260px;scroll-snap-align:center}
.polaroid:nth-child(3n){transform:rotate(2deg)}
.polaroid img{display:block;width:100%;height:240px;object-fit:cover;border-radius:4px;filter:contrast(0.98) saturate(0.85) sepia(0.15)}
.polaroid figcaption{font-family:'Caveat',cursive;color:var(--muted);font-size:1rem;margin-top:8px;text-align:left}
.polaroid:focus,.polaroid:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 50px rgba(0,0,0,0.12);outline:none}

.about-section{padding:40px 0 120px}
.about-content{max-width:900px;margin:0 auto;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(255,255,255,0.5));border-radius:10px;border:1px solid rgba(0,0,0,0.03);box-shadow:0 10px 40px var(--shadow)}
.about-content p{line-height:1.75;color:var(--muted);font-size:1.05rem}

/* viewer modal */
.viewer{position:fixed;inset:0;background:rgba(12,10,8,0.5);display:none;align-items:center;justify-content:center;z-index:60}
.viewer[aria-hidden="false"]{display:flex}
.viewer-inner{position:relative;max-width:90vw;max-height:90vh;background:transparent;display:flex;flex-direction:column;align-items:center}
.viewer img{max-width:100%;max-height:80vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,0.6);filter:grayscale(0.02) contrast(0.98) sepia(0.08)}
.viewer-caption{margin-top:12px;background:rgba(255,255,255,0.9);padding:10px 14px;border-radius:8px;font-family:'Caveat',cursive;color:var(--muted)}
.viewer-close{position:absolute;right:-10px;top:-10px;background:var(--paper);border-radius:50%;border:0;padding:8px 10px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.film-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0.35;background-image:radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);background-size:3px 3px}

/* small screens */
@media (max-width:800px){
  .timeline-item{width:100%;padding-left:80px;padding-right:20px}
  .timeline-line{left:40px}
  .timeline-item.right{left:0}
  .polaroid img{height:180px}
  .nav{overflow:auto}
  .site-header{position:sticky}
}

@media (max-width:420px){
  .intro-inner{padding:24px}
  .intro-inner h1{font-size:1.8rem}
}

/* subtle paper texture */
body::before{content:"";position:fixed;inset:0;z-index:-2;background-image:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);pointer-events:none}