@charset "utf-8";
body{

font-family:Georgia,serif;

margin:0;

padding:40px 20px;

background:
radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
#f6f4ee;

background-size:6px 6px;

color:#2c2c2c;

}



/* container */

.toc-container{

max-width:1200px;

margin:auto;

padding:55px;

background:#fffdf8;

border:4px double #d6c48c;

box-shadow:0 0 15px rgba(0,0,0,0.05);

}



/* header */

.toc-header{

text-align:center;

margin-bottom:50px;

}

.toc-header h1{

font-weight:500;

letter-spacing:1px;

color:#5b4a22;

}

.subtitle{

font-style:italic;

color:#777;

}

.divider{

margin-top:10px;

color:#c6a64a;

letter-spacing:6px;

}



/* GRID */

.toc-grid{

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:40px;

}



/* cards */

.toc-card{

display:block;

text-decoration:none;

color:inherit;

padding:22px 26px;

border:1px solid #e6e0cf;

background:#fffefb;

border-radius:6px;

transition:0.2s;

}

.toc-card:hover{

box-shadow:0 4px 12px rgba(0,0,0,0.06);
transform:translateY(-2px);
}



/* section title */

.toc-card h2{

font-size:18px;

margin-top:0;

margin-bottom:10px;

color:#8a6a2f;

display:flex;

align-items:center;

gap:10px;

}



/* gold number */

.num{

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(#f4e4a8,#c6a64a);

color:#5b4a22;

font-weight:bold;

font-size:14px;

}



/* links */

.toc-card a{

text-decoration:none;

color:#5b4a22;

font-size:15px;

}

.toc-card a:hover{

text-decoration:underline;

}



/* tablet */

@media (max-width:900px){

.toc-grid{

grid-template-columns:repeat(2,1fr);

}

.toc-container{

padding:40px 28px;

}

}



/* mobile */

@media (max-width:600px){

body{

padding:20px 10px;

}

.toc-grid{

grid-template-columns:1fr;

}

.toc-container{

padding:26px 18px;

}

}