*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F2E6D4;color:#3D1A0A;font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.78;overflow-x:hidden}

/* Paper grain base */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse at 30% 20%,rgba(196,97,58,0.04) 0%,transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");opacity:0.5}

/* Bento sections */
.bento-section{min-height:100vh;position:relative;z-index:1;padding:clamp(24px,4vw,48px) clamp(12px,3vw,32px)}

/* Bento grid */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;max-width:1200px;margin:0 auto;padding:2rem}
.bento-grid::before{content:'';position:absolute;inset:0;pointer-events:none}

/* Span utilities */
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-r2{grid-row:span 2}

/* Bento cells */
.bento-cell{position:relative;overflow:hidden;border-radius:4px}
.bento-cell::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid rgba(184,115,51,0.15);border-radius:4px;pointer-events:none}

/* Paper surface */
.paper-surface{background-color:#F2E6D4;background-image:radial-gradient(ellipse at 40% 30%,rgba(196,97,58,0.03) 0%,transparent 60%);box-shadow:inset 0 0 80px rgba(61,26,10,0.06);padding:clamp(20px,3vw,36px)}
.paper-surface h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);color:#3D1A0A;margin-bottom:8px}
.paper-surface p{color:#3D1A0A}

/* Circuit surface (flip back) */
.circuit-surface{background:#3D1A0A;padding:clamp(20px,3vw,36px);position:relative}
.circuit-surface::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,transparent 30px,rgba(184,115,51,0.08) 30px,rgba(184,115,51,0.08) 31px),repeating-linear-gradient(0deg,transparent 0px,transparent 30px,rgba(184,115,51,0.08) 30px,rgba(184,115,51,0.08) 31px);pointer-events:none}
.circuit-surface h2{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:clamp(1.2rem,2.5vw,1.8rem);color:#B87333;letter-spacing:0.05em;margin-bottom:8px}
.circuit-surface p{color:#D4D2C8;letter-spacing:0.02em}

/* Card flip */
.flip-card{perspective:1200px;cursor:pointer;min-height:clamp(180px,25vw,280px)}
.flip-inner{width:100%;height:100%;position:relative;transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:4px;overflow:hidden}
.flip-back{transform:rotateY(180deg)}

/* Hero */
.section-hero{display:flex;align-items:center;justify-content:center;min-height:100vh}
.hero-cell{grid-column:1 / -1;text-align:center;padding:clamp(32px,6vw,64px)}
.kanji-row{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px)}
.kanji{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(4rem,12vw,10rem);color:#C4613A;writing-mode:vertical-rl;line-height:1}
.copper-divider{width:2px;height:clamp(60px,10vw,120px);background:#B87333}
.hero-caption{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1.1rem,2.5vw,1.6rem);color:#3D1A0A;margin-top:clamp(16px,3vw,32px);max-width:50ch;margin-left:auto;margin-right:auto}

/* Section heading */
.section-heading{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.8rem,4vw,3rem);color:#3D1A0A;text-align:center;margin-bottom:clamp(24px,4vw,48px)}

/* Timeline */
.section-timeline{background:#E8D5B7}
.timeline-container{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,3vw,32px)}
.timeline{position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:#B87333}
.tl-item{margin-bottom:clamp(24px,4vw,48px);position:relative}
.tl-year{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);color:#C4613A;display:block;margin-bottom:4px}
.tl-marker{position:absolute;left:-32px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid #B87333;background:#F2E6D4}
.tl-item.current .tl-marker{background:#E8A653;border-color:#E8A653}
.tl-item.current .tl-year{color:#E8A653}
.tl-item p{color:#3D1A0A;max-width:55ch}

/* Material cells */
.material-cell{background:var(--mat-bg,#F2E6D4);padding:clamp(20px,3vw,36px);position:relative}
.material-cell::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");opacity:0.3;pointer-events:none}
.material-cell h3{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);margin-bottom:6px}
.material-cell p{max-width:50ch}

/* Seal section */
.section-seal{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}
.seal-container{position:relative;margin-bottom:clamp(24px,4vw,48px)}
.hanko{width:clamp(100px,20vw,160px);height:clamp(100px,20vw,160px);border:3px solid #C4613A;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:hankoPulse 4s ease-in-out infinite}
.hanko span{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(1.8rem,4vw,3rem);color:#C4613A}
@keyframes hankoPulse{0%,100%{opacity:0.8}50%{opacity:1}}
.seal-traces{position:absolute;inset:-20px;border:1px solid rgba(184,115,51,0.2);border-radius:50%;pointer-events:none}
.closing-line{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1.1rem,2.5vw,1.6rem);color:#3D1A0A;max-width:50ch}
.footer-brand{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:0.85rem;letter-spacing:0.06em;color:#B87333;margin-top:clamp(16px,3vw,32px);display:block}

/* Copper trace decorations on cells */
.bento-cell::before{content:'';position:absolute;bottom:0;right:0;width:20px;height:20px;border-right:1px solid rgba(184,115,51,0.3);border-bottom:1px solid rgba(184,115,51,0.3);pointer-events:none;z-index:5}
/* Node dots at corners */
.flip-card::before{content:'';position:absolute;bottom:-3px;right:-3px;width:6px;height:6px;border-radius:50%;background:#B87333;opacity:0.3;z-index:10}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
.bento-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 1}
.span-r2{grid-row:span 1}
.hero-cell{grid-column:1 / -1}
.kanji{font-size:clamp(3rem,15vw,6rem)}
}
@media(max-width:480px){
.bento-grid{grid-template-columns:1fr}
.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 1}
}