:root{--ink:#152a24;--paper:#f4efe4;--yellow:#f4c84b;--orange:#ef6842;--green:#36a77d}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Tahoma,"Segoe UI",sans-serif}
main{max-width:1050px;margin:auto;padding:90px 28px 110px}
.eyebrow{display:inline-block;background:var(--yellow);border:2px solid var(--ink);padding:9px 14px;font-size:12px;font-weight:800;transform:rotate(-2deg)}
h1{font-size:clamp(58px,10vw,118px);line-height:.92;margin:38px 0 25px;letter-spacing:-5px}
h1 em{color:var(--orange);font-style:normal}
.intro{font-size:18px;color:#52635d;margin-bottom:65px}
.projects{border-top:2px solid var(--ink)}
.project{display:grid;grid-template-columns:75px 1fr auto;gap:28px;align-items:center;padding:35px 10px;color:inherit;text-decoration:none;border-bottom:2px solid var(--ink);transition:.2s}
.project:hover{background:#fffaf0;padding-inline:25px}
.number{font:700 38px Arial;color:var(--green)}
.project small{font-weight:700;color:var(--orange)}
.project h2{font-size:32px;margin:8px 0}
.project p{margin:0;color:#52635d;line-height:1.8}
.project b{background:var(--ink);color:white;padding:14px 18px;white-space:nowrap}
.workout-project .number{color:var(--orange)}.workout-project small{color:var(--green)}
.boxing-project .number{color:#7952b3}.boxing-project small{color:#7952b3}.boxing-project:hover{background:#f5edff}.boxing-project b{background:#5a337f}
footer{background:var(--ink);color:white;padding:25px;text-align:center;font-weight:700;letter-spacing:2px}
@media(max-width:700px){main{padding-top:55px}h1{letter-spacing:-3px}.project{grid-template-columns:52px 1fr}.project>b{grid-column:1/-1;text-align:center}}

.vocabulary-project .number{color:#2563eb}.vocabulary-project small{color:#2563eb}.vocabulary-project:hover{background:#eff6ff}.vocabulary-project b{background:#1d4ed8}


@media(min-width:900px){
  main{max-width:1240px;padding-top:64px}
  h1{font-size:clamp(64px,8vw,104px);margin-block:30px 20px}
  .intro{margin-bottom:42px}
  .projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-inline:2px solid var(--ink)}
  .project{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 22px;border-bottom:2px solid var(--ink);border-left:2px solid var(--ink)}
  .project:first-child{border-left:0}
  .project:hover{padding-inline:22px;transform:translateY(-5px)}
  .project h2{font-size:27px}
  .project p{min-height:96px}
  .project b{align-self:stretch;margin-top:auto;text-align:center}
}

.chinese-project .number{color:#c0392b}.chinese-project small{color:#c0392b}.chinese-project:hover{background:#fff0ed}.chinese-project b{background:#c0392b}