.projects-heading{padding:64px 0 56px}
.projects-heading h1{font-size:clamp(56px,9vw,112px);overflow-wrap:anywhere}
.projects-heading .lede{margin-top:20px}
html:is(:lang(zh),:lang(ja),:lang(ko)) .projects-heading h1{line-height:1.2;letter-spacing:0}

.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;padding:40px 0 72px;border-top:1px solid var(--line)}
.project{min-width:0;--project-color:#ff683b}
.compass{--project-color:#b2c4ff}
.solver{--project-color:#b6e9a4}
.project-art{position:relative;display:block;aspect-ratio:1.4;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 1px #ffffff14;background:#10131c;color:var(--project-color)}
.compass .project-art{background:#121827}
.solver .project-art{background:#122016}
.project-art>svg{position:absolute;inset:9% 0;width:100%;height:82%}
.project h2{margin:18px 0 6px;font:400 26px/1.2 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.project h2 a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1px}
.project h2 a:hover{text-decoration-color:currentColor}
.project p{margin:0;font-size:17px;color:var(--muted);max-width:44ch}
.project-stack{display:flex;flex-wrap:wrap;margin-top:12px;font-size:15px;color:var(--muted)}
.project-stack span+span::before{content:"·";margin:0 .6em}

.solver-art{position:absolute;inset:45px 0;display:grid;place-items:center}
.bot-symbol{width:104px;height:104px;background:#b6e9a4;color:#11230c;transform:rotate(-8deg);border-radius:6px}
.bot-symbol svg{width:100%;height:100%}
.math{position:absolute;color:#b6e9a455;font:48px Georgia,serif}
.math-one{left:12%;top:8%;transform:rotate(-15deg)}
.math-two{right:12%;top:13%;font-size:30px;transform:rotate(15deg)}
.math-three{left:10%;bottom:12%;font-size:65px}
.equation{position:absolute;right:8%;bottom:0;background:#0c160f;border:1px solid #47603e;border-radius:4px;padding:10px 14px;font:12px var(--mono);transform:rotate(3deg)}
.equation span{display:block;color:#fff;margin-top:8px}
.equation b{color:#b6e9a4;margin-left:15px}

/* Logo proportions and Manrope font from ocelotiq.ru. */
@font-face{font-family:Ocelotiq Manrope;src:url(/projects/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
.ocelotiq{--project-color:#2be09d}
.ocelotiq .project-art{display:grid;place-items:center;background:#0e1d16}
.ocelotiq-logo{display:flex;align-items:center;gap:20px;color:#edf3ef;font:720 clamp(28px,2.8vw,42px)/1.2 "Ocelotiq Manrope",sans-serif;letter-spacing:-.035em}
.ocelotiq-symbol{flex:none;width:54px;height:54px;border:4px solid #2be09d;border-radius:18px 22px 16px 24px;position:relative;transform:rotate(-7deg)}
.ocelotiq-symbol::after{content:"";position:absolute;top:10px;right:8px;width:8px;height:8px;background:#2be09d;border-radius:50%}

.riffdb{--project-color:#ffb86b}
.riffdb .project-art{background:#1e1710}
.riffdb-art{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:26px;padding:0 8%}
.riffdb-logo{display:flex;align-items:center;gap:16px;color:#fff3e6;font:600 clamp(28px,3.2vw,44px)/1 var(--mono);letter-spacing:-.04em}
.riffdb-disk{flex:none;width:40px;height:48px;border:3px solid #ffb86b;border-radius:50%/9px;box-shadow:inset 0 -14px 0 -11px #ffb86b,inset 0 -28px 0 -25px #ffb86b}
.riffdb-terminal{display:grid;gap:4px;max-width:100%;padding:12px 16px;background:#140f0a;border:1px solid #5a4430;border-radius:4px;font:12px/1.5 var(--mono);color:#d9c7b3;white-space:pre;overflow:hidden;transform:rotate(-2deg)}
.riffdb-terminal i{font-style:normal;color:#ffb86b}
.riffdb-result{color:#ffb86b}

@media(max-width:1000px){
  .bot-symbol{width:80px;height:80px}
  .equation{font-size:9px;padding:8px}
  .ocelotiq-logo{gap:12px;font-size:24px}
  .ocelotiq-symbol{width:40px;height:40px;border-width:3px;border-radius:13px 16px 12px 18px}
  .ocelotiq-symbol::after{width:6px;height:6px;top:7px;right:6px}
  .riffdb-art{gap:18px}
  .riffdb-terminal{font-size:10px;padding:10px 12px}
}
@media(max-width:760px){
  .projects-heading{padding:40px 0 36px}
  .projects-grid{grid-template-columns:1fr;gap:48px}
  .project p{max-width:none}
  .bot-symbol{width:96px;height:96px}
  .equation{font-size:12px;right:14%}
  .ocelotiq-logo{gap:20px;font-size:34px}
  .ocelotiq-symbol{width:54px;height:54px;border-width:4px;border-radius:18px 22px 16px 24px}
  .ocelotiq-symbol::after{width:8px;height:8px;top:10px;right:8px}
  .riffdb-logo{font-size:34px}
  .riffdb-terminal{font-size:11px}
}