.shell{
display:flex;
min-height:100vh;
}

/* ---------- Sidebar navigation ---------- */
.sidebar{
width:var(--sidebar-w);
flex:00var(--sidebar-w);
background: var(--ink);
color: var(--cream);
padding: var(--s-4) var(--s-3);
position: fixed;
inset: 0auto0 0;
display:flex;
flex-direction: column;
gap: var(--s-4);
overflow-y:auto;
z-index: 60;
}

.brand{
display:block;
color:var(--white);
text-decoration: none;
}

.brand:hover{
text-decoration:none;
}

.brand-mark{
font-family: var(--mono);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.04em;
color:var(--white);
}

.brand-name{
display:block;
font-size:0.94rem;
font-weight: 600;
color: var(--white);
margin-top:var(--s-1);
line-height:1.35;
}

.brand-domain{
display: block;
font-family: var(--mono);
font-size: 0.74rem;
letter-spacing: 0.1em;
color: #F0C9A8;
margin-top: 6px;
}

.side-nav ul{
display: flex;
flex-direction: column;
gap:2px;
}

.side-nav a{
display:flex;
align-items: baseline;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
color: #EADFD2;
font-size:0.95rem;
font-weight: 500;
transition:background 0.2s var(--ease), color0.2s var(--ease);
}

.side-nav a:hover,
.side-nav a:focus-visible{
background: rgba(255, 255,255, 0.1);
color: var(--white);
text-decoration: none;
}

.side-nava.is-active{
background: var(--teal);
color: var(--white);
}

.side-nav .num{
font-family:var(--mono);
font-size:0.72rem;
color: #F0C9A8;
}

.side-foot{
margin-top: auto;
font-size:0.8rem;
color: #D8CBBD;
}

.side-foota{
color: #F5D9BE;
}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle{
display: none;
position: fixed;
top: 14px;
left:14px;
z-index: 80;
align-items: center;
gap:8px;
background:var(--ink);
color:var(--white);
border: 0;
border-radius: 10px;
padding:11px 15px;
font-family:var(--mono);
font-size: 0.85rem;
cursor: pointer;
box-shadow:var(--shadow);
}

.nav-scrim{
display:none;
position:fixed;
inset: 0;
background: rgba(22, 32, 28, 0.55);
z-index:50;
}

/* ---------- Main column ----------*/
.main{
margin-left: var(--sidebar-w);
flex:11 auto;
min-width: 0;
}

.section{
padding:var(--s-6)var(--s-4);
border-bottom:1px solid var(--line);
}

.section-alt{
background:var(--cream-2);
}

.wrap{
max-width:1120px;
margin: 0 auto;
}

.section-head{
max-width: 66ch;
margin-bottom: var(--s-4);
}

/*----------Hero ---------- */
.hero{
position:relative;
padding: var(--s-6)var(--s-4);
background-color:var(--ink);
background-image: url("../assets/hero-bg.jpg");
background-size: cover;
background-position: center;
color: var(--white);
overflow:hidden;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(115deg,rgba(11, 24,20, 0.93) 0%, rgba(15,45, 40, 0.88) 45%, rgba(120, 34,12,0.78) 100%);
z-index:1;
}

.hero-inner{
position: relative;
z-index: 2;
max-width: 1120px;
margin:0 auto;
}

.hero h1{
color: var(--white);
max-width: 20ch;
}

.hero.eyebrow{
color: #FFC9A6;
}

.hero-lede{
color:#F4EBE1;
font-size: 1.16rem;
max-width: 56ch;
}

.hero-ascii{
color: #FFBE93;
margin-bottom: var(--s-3);
opacity: 0.92;
}

.hero-cta{
display:flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-top:var(--s-4);
}

.hero-stats{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap:var(--s-3);
margin-top: var(--s-5);
padding-top: var(--s-3);
border-top:1px solidrgba(255,255, 255, 0.28);
}

.hero-stats dt{
font-family:var(--mono);
font-size:1.7rem;
font-weight: 700;
color: var(--white);
}

.hero-stats dd{
margin: 4px 00;
font-size: 0.88rem;
color: #EFE3D8;
}

/* ----------Grids ---------- */
.grid{
display: grid;
gap: var(--s-3);
}

.grid-2{
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}

.grid-3{
grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.grid-4{
grid-template-columns:repeat(auto-fit,minmax(216px, 1fr));
}

.split{
display:grid;
grid-template-columns: 1.05fr0.95fr;
gap:var(--s-5);
align-items: center;
}

.media{
border-radius: var(--radius-lg);
overflow:hidden;
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, var(--teal) 0%,var(--coral) 100%);
}

.media img{
width: 100%;
object-fit: cover;
}

/*----------Footer ---------- */
.site-footer{
background:var(--ink);
color: #E6DACD;
padding: var(--s-5) var(--s-4) var(--s-3);
}

.footer-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap:var(--s-4);
max-width: 1120px;
margin:0 auto;
}

.site-footerh3{
color: var(--white);
font-size:0.82rem;
font-family: var(--mono);
letter-spacing:0.18em;
text-transform: uppercase;
margin-bottom:var(--s-2);
}

.site-footer a{
color:#FAD9B8;
}

.site-footer li{
margin-bottom:8px;
font-size: 0.92rem;
}

.legal{
max-width: 1120px;
margin:var(--s-4) auto 0;
padding-top:var(--s-3);
border-top: 1px solidrgba(255, 255,255, 0.18);
font-size:0.86rem;
color: #DCCFC1;
}