@font-face {
    font-family: 'ClashDisplay';
    src: url('fonts/ClashDisplay-Extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'ClashDisplay';
    src: url('fonts/ClashDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'ClashDisplay';
    src: url('fonts/ClashDisplay-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'ClashDisplay';
    src: url('Fonts/ClashDisplay-Semibold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'ClashDisplay';
    src: url('fonts/ClashDisplay-Bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

:root{
    --bg: #f7f4ef;
    --accent: #ff0000;
    --text: #222;
    --muted: #666;
    --page-padding: 48px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: 'ClashDisplay', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px var(--page-padding);
    border-bottom:2px solid rgba(0,0,0,0.08);
}
.logo{
    width:48px;
    height:48px;
    background:var(--accent);
    display:inline-block;
}
.site-nav a{
    margin-left:18px;
    text-decoration:none;
    color:var(--text);
    opacity:0.9;
}

.container{
    max-width:1200px;
    margin:48px auto;
    padding:0 var(--page-padding);
}

.hero{padding:48px 0}

.h1, h2{}
h1, h2{margin:0 0 18px 0; font-weight:600; letter-spacing:-0.02em}
.lede{max-width:760px; color:var(--muted); line-height:1.5}
.card{background:transparent; padding:28px 0}

.spec{background:transparent; border-left:4px solid rgba(0,0,0,0.06); padding:12px 16px; color:var(--muted)}

.roadmap-grid{display:grid; grid-template-columns:370px 1fr; gap:24px; align-items:start}
.roadmap-list{padding-right:24px}
.roadmap-list ul{padding-left:20px;color:var(--muted)}
.roadmap-visual{display:flex; align-items:center; justify-content:center}
.big{font-size:140px; color:var(--accent); opacity:0.98}

/* per-character hover bolding */
.split{display:inline-block}
.char{display:inline-block; transition:color 220ms ease, font-weight 220ms ease, opacity 220ms ease; will-change:font-weight, opacity; opacity:0.98; font-weight:600}
.char.hovered{font-weight:900; color:var(--text); opacity:1}

/* make smaller weight by default, create 'regular' vs bold feel */
.char[data-weight="200"]{font-weight:200}
.char[data-weight="400"]{font-weight:400}
.char[data-weight="600"]{font-weight:600}
 


/* mesh diagram */
.mesh-wrap{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:28px; max-width:640px; margin-top:32px; justify-items:center}
.mesh-cell{background:transparent; border:1px solid rgba(0,0,0,0.08); border-radius:0; width:100%; display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--muted); padding:28px 12px}
.mesh-row{display:flex; gap:28px}
.mesh-connector{width:40px; height:2px; background:rgba(0,0,0,0.12); align-self:center}
.mesh-label{font-weight:600; color:var(--text)}

.mesh-bond{position:absolute; background:rgba(0,0,0,0.08); border-radius:4px; transition:opacity 300ms ease}

/* routing animation state */
.routing-panel{margin-top:18px; padding:12px; border-left:4px solid rgba(0,0,0,0.06); background:transparent; max-width:760px}
.routing-status{display:flex; gap:18px; align-items:center}
.routing-badge{background:var(--accent); color:white; padding:8px 12px; border-radius:12px; font-weight:700}
.routing-text{color:var(--muted)}

/* accessibility: focus same as hover */
.char:focus{outline:none; font-weight:900}

/* Responsive tweaks */
@media (max-width:720px){
    .big{font-size:72px}
    .roadmap-grid{grid-template-columns:1fr}
    /* ensure the mesh grid remains legible on small screens */
    .mesh-wrap{grid-template-columns:repeat(2, 1fr); grid-auto-rows:120px}
    .mesh-cell{height:120px}
}

/* Mobile hamburger and overlay menu (new) */
.menu-toggle{ display:none; position: fixed; top:14px; right:14px; width:40px; height:28px; background: transparent; border:0; padding:0; cursor:pointer; z-index:1000; }
.menu-toggle span{ display:block; height:3px; width:100%; background:#333; border-radius:2px; margin:5px 0; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-menu{ display:none; position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:999; align-items:center; justify-content:center; padding:40px; }
.mobile-menu.active{ display:flex; }
.mobile-menu .mobile-nav{ display:flex; flex-direction:column; gap:20px; font-size:28px; text-align:center; }
.mobile-menu .mobile-nav a{ color:inherit; text-decoration:none; }

/* show hamburger on small screens and hide the regular nav */
@media (max-width: 800px){
    .site-nav{ display:none; }
    .menu-toggle{ display:block; }
    .container{ padding:0; }
}