@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=PT+Sans:wght@400;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --desk: #e4ddcd;
  --paper: #fffef9;
  --grid: #d3e3ef;
  --margin-red: #b6504d;
  --ink: #262f40;
  --pen: #1f4c7a;
  --pencil: #6c7280;
  --highlight: #fbe083;
  --hole: #d7d0bf;
  --tab-1: #f6e7c6; /* index */
  --tab-2: #cfe3d6; /* osi */
  --tab-3: #d7e2f2; /* protocols */
  --tab-4: #f0d6d1; /* topologies */
  --tab-5: #e3d7ee; /* devices */
  --tab-6: #dfe6c9; /* about */
}

*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body{
  background: var(--desk);
  font-family: 'PT Sans', Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  padding: 36px 16px 60px;
}

.desk{
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- notebook tabs ---------- */
.tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  padding: 0 0 0 54px;
  margin: 0 0 -1px 0;
  position: relative;
  z-index: 2;
}
.tabs a{
  font-family: 'Caveat', cursive;
  font-size: 1.28rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--tab-1);
  padding: 7px 18px 10px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom: none;
  box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset;
  transform: rotate(-1.2deg) translateY(4px);
  transition: transform .15s ease, translate .15s ease;
  white-space: nowrap;
}
.tabs a:nth-child(2){ background: var(--tab-2); transform: rotate(1deg) translateY(6px); }
.tabs a:nth-child(3){ background: var(--tab-3); transform: rotate(-0.8deg) translateY(3px); }
.tabs a:nth-child(4){ background: var(--tab-4); transform: rotate(1.3deg) translateY(6px); }
.tabs a:nth-child(5){ background: var(--tab-5); transform: rotate(-1deg) translateY(4px); }
.tabs a:nth-child(6){ background: var(--tab-6); transform: rotate(0.9deg) translateY(5px); }
.tabs a:hover{ transform: translateY(-3px) rotate(0deg); }
.tabs a.active{
  background: var(--paper);
  transform: translateY(1px) rotate(0deg);
  border-bottom: 1px solid var(--paper);
  font-weight: 700;
}

/* ---------- the sheet of paper ---------- */
.page{
  position: relative;
  background:
    repeating-linear-gradient(var(--paper) 0 27px, var(--grid) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--grid) 27px 28px);
  background-color: var(--paper);
  border-radius: 2px 10px 10px 10px;
  box-shadow: 0 18px 40px rgba(30,20,10,.22), 0 2px 0 rgba(0,0,0,.05);
  padding: 34px 40px 46px 74px;
}
.page::before{ /* red margin line */
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: 52px;
  width: 2px;
  background: var(--margin-red);
  opacity:.55;
}
.holes{
  position:absolute;
  left: 20px; top: 40px;
  display:flex;
  flex-direction:column;
  gap: 46px;
}
.holes span{
  display:block;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--desk);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- headings & title block ---------- */
.titleblock{
  margin-bottom: 28px;
}
.eyebrow-note{
  font-family:'Caveat', cursive;
  color: var(--margin-red);
  font-size: 1.15rem;
  transform: rotate(-1deg);
  display:inline-block;
  margin: 0 0 2px;
}
h1{
  font-family:'Caveat', cursive;
  font-size: 3rem;
  font-weight:700;
  color: var(--pen);
  margin: 0 0 6px;
  line-height:1.05;
}
h2{
  font-family:'PT Sans', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color: var(--pen);
  border-bottom: 2px solid var(--grid);
  padding-bottom:6px;
  margin: 34px 0 14px;
}
h3{
  font-family:'PT Sans', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  color: var(--ink);
  margin: 22px 0 8px;
}
p{ margin: 0 0 14px; max-width: 68ch; }
main{ max-width: 760px; }
.wide main, main.wide{ max-width: none; }

a{ color: var(--pen); }
code, .mono{ font-family:'JetBrains Mono', monospace; font-size:.92em; }

mark{
  background: var(--highlight);
  padding: 0 4px;
  border-radius: 2px;
}

ul, ol{ padding-left: 22px; margin: 0 0 16px; }
li{ margin-bottom: 6px; }

/* ---------- tables ---------- */
table{
  width:100%;
  border-collapse: collapse;
  margin: 10px 0 24px;
  background: rgba(255,255,255,.5);
  font-size: .96rem;
}
caption{
  text-align:left;
  font-family:'Caveat', cursive;
  font-size:1.2rem;
  color:var(--margin-red);
  margin-bottom:4px;
}
th, td{
  border: 1px solid #c9c2ac;
  padding: 8px 10px;
  text-align:left;
  vertical-align: top;
}
th{
  background: #eee6cf;
  font-family:'PT Sans', sans-serif;
  color: var(--ink);
}
tr:nth-child(even) td{ background: rgba(210,225,239,.25); }

/* ---------- callout boxes ---------- */
.note, .def, .warn{
  border: 1px dashed #a99a7c;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0 22px;
  max-width: 66ch;
  position: relative;
}
.note{ background: #fff8e6; border-color:#d8b96a; }
.def{ background: #eaf3fb; border-color:#9bb9d6; }
.warn{ background: #fbeceb; border-color:#d59c98; }
.note b, .def b, .warn b{ color: var(--pen); }
.tag{
  font-family:'Caveat', cursive;
  font-size:1.05rem;
  color: var(--margin-red);
  display:block;
  margin-bottom:4px;
}

/* ---------- OSI stack diagram ---------- */
.stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width: 520px;
  margin: 18px 0 26px;
}
.stack .layer{
  border:1px solid #8fa9c2;
  border-radius:6px;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  font-size:.95rem;
  background: linear-gradient(90deg, #eaf2fa, #f7fbff);
}
.stack .layer .num{
  font-family:'JetBrains Mono', monospace;
  color: var(--pencil);
  font-size:.85rem;
  min-width: 18px;
}
.stack .layer .name{ font-weight:700; flex:1; }
.stack .layer .hint{ color: var(--pencil); font-size:.85rem; text-align:right; }
.stack .layer.app{ background: linear-gradient(90deg,#fdf0da,#fff8ec); border-color:#dcbb7f;}

/* ---------- cards (index links) ---------- */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: 16px;
  margin: 20px 0 10px;
}
.card{
  display:block;
  text-decoration:none;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  border:1px solid #c9c2ac;
  border-radius: 8px;
  padding: 14px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.12); }
.card .n{ font-family:'Caveat', cursive; color:var(--margin-red); font-size:1.2rem; }
.card h3{ margin: 2px 0 6px; }
.card p{ margin:0; font-size:.92rem; color:var(--pencil); max-width:none; }

footer{
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px dashed #b7ae95;
  font-size: .85rem;
  color: var(--pencil);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

svg text{ font-family:'PT Sans', sans-serif; }

@media (max-width: 640px){
  body{ padding: 18px 8px 40px; }
  .page{ padding: 26px 18px 34px 46px; }
  .page::before{ left: 30px; }
  .holes{ left: 10px; top: 26px; gap: 34px; }
  .holes span{ width:11px; height:11px; }
  .tabs{ padding-left: 30px; }
  h1{ font-size: 2.2rem; }
  table{ font-size: .82rem; }
}