*,
*::before,
*::after{box-sizing:border-box}

:root{
  --mono: 'Roboto Mono', monospace;
  --black: #000;
}

body {
  margin: 0;
  padding: 20px 10vw 0;
  background: #fff;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black);
}

.background-geometry {
  position: fixed;
  top: 12vh;
  right: -18vw;
  width: clamp(280px, 50vw, 720px);
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(140deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.01))
    ,repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px);
  clip-path: polygon(8% 0%, 85% 5%, 100% 78%, 62% 100%, 0% 82%, 4% 18%);
  filter: blur(0.5px);
  opacity: 0.18;
  animation: geometry-drift 40s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes geometry-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(-8%, 2%, 0) rotate(5deg) scale(1.02);
  }
  100% {
    transform: translate3d(-16%, 0, 0) rotate(0deg) scale(1);
  }
}

.heading{
  font-family:var(--mono);
  font-weight:700;
  font-size:56px;
  margin:0 0 20px 0;
}
.subheading{
  font-family:var(--mono);
  font-weight:600;
  font-size:36px;
  margin:20px 0;
}
@media(max-width:768px){
  .heading{font-size:32px}
  .subheading{font-size:24px}
}

@media (max-width:640px) {
  .background-geometry {
    top: 30vh;
    right: -35vw;
    width: clamp(220px, 70vw, 420px);
    opacity: 0.12;
  }
}

.content-wrapper{
  display:block;
  max-width:1280px;
  margin:0 auto;
  padding:0;
}

.text-section{margin-bottom:20px}

.sentence-reveal p{margin:0 0 1rem 0}
.sr-sentence{
  filter:blur(6px);
  opacity:.9;
  transition:filter .4s ease,opacity .4s ease;
}
.sr-sentence.sr-clear{filter:blur(0);opacity:1}
.sr-sentence:hover{opacity:1}

.apps-inline{
  margin:20px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.apps-inline img{
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:4px;
  border:2px solid var(--black);
}

.projects-grid-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:20px;
  margin-bottom:20px;
  width:100%;
}

.apps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:25px;
  margin-bottom:20px;
  width:100%;
}

.projects-grid-row a{width:100%}
.projects-grid-row img{
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:4px;
  border:2px solid var(--black);
}
.apps-grid a{width:100%}
.apps-grid img{
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:4px;
  border:2px solid var(--black);
}
.apps-grid figure{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.apps-grid figcaption{
  font-size:12px;
  line-height:1.4;
}
.apps-grid figcaption h3{
  font-size:inherit;
  margin:4px 0 0;
  font-weight:600;
}
.apps-grid figcaption p{
  font-size:inherit;
  margin:0;
}

.ld-custom-button{
  font-family:var(--mono);
  color:#000;
  background:#fff;
  border:2px solid #000;
  border-radius:10px;
  padding:10px 20px;
  text-decoration:none;
}

.thin-sep{
  border:0;
  border-top:1px solid rgba(0,0,0,.25);
  margin:12px 0 20px;
}

.platform-list{
  list-style:none;
  padding:0;
  margin:20px 0;
}
.platform-list li{margin:0 0 10px 0}
.platform-list a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#000;
  text-decoration:underline;
}
.platform-list .icon{
  display:inline-flex;
  width:20px;
  height:20px;
  line-height:0;
}

.certificate,
.certificate-inline{
  float:left;
  width:45%;
  height:auto;
  margin:0 15px 10px 0;
  border:1px solid var(--black);
  box-shadow:none;
  border-radius:4px;
}
.github-chart{
  width:100%;
  height:auto;
  border-radius:4px;
  border:1px solid var(--black);
  box-shadow:none;
  margin:20px 0;
  padding:10px;
  background:#fff;
}

.site-footer{
  max-width:1280px;
  margin:20px auto 40px;
  padding:0px;
}

.site-footer a{color:#000;text-decoration:underline}

.apps-inline img,
.projects-grid-row img,
.apps-grid img,
.certificate,
.certificate-inline{
  filter:grayscale(100%);
  transition:filter .01s,transform .01s;
}

.apps-inline a:hover img,
.projects-grid-row a:hover img,
.apps-grid a:hover img,
.certificate-img:hover,
.github-chart:hover{
  filter:grayscale(0%);
  transform:none;
}


.apps-inline figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apps-inline figcaption {
  font-size: 12px;
  line-height: 1.4;
}
.apps-inline figcaption h3 {
  font-size: inherit;
  margin: 4px 0 0;
  font-weight: 600;
}
.apps-inline figcaption p {
  font-size: inherit;
  margin: 0;
}
.apps-inline img {
  width: 100%;
  height: auto;
}

.projects-grid-row figure{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.projects-grid-row figcaption{
  font-size:12px;
  line-height:1.4;
}
.projects-grid-row figcaption h3{
  font-size:inherit;
  margin:4px 0 0;
  font-weight:600;
}
.projects-grid-row figcaption p{
  font-size:inherit;
  margin:0;
}

.projects-grid.apps-inline{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
}

.projects-grid.apps-inline .project{margin:0}
.projects-grid.apps-inline img{width:100%;height:auto;display:block}

@media (max-width:640px){
  .projects-grid.apps-inline{grid-template-columns:1fr}
  .apps-grid{
    grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
    gap:15px;
  }
}

@media (max-width:480px){
  .apps-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
}

.mobile-collapse > summary{
  cursor:pointer;
  font-weight:600;
  text-decoration:underline;
  margin:8px 0 12px;
  list-style:none;
}
.mobile-collapse > summary::marker{content:""}
.mobile-collapse > summary::after{content:"  +"}
.mobile-collapse[open] > summary::after{content:"  –"}

@media (max-width:640px){
  .apps-inline img,
  .projects-grid-row img,
  .apps-grid img,
  .certificate,
  .certificate-inline{
    filter:none;
  }
}

@media (hover:none) and (pointer:coarse), (max-width:640px){
  .sentence-reveal .sr-sentence{
    filter:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .sentence-reveal .sr-sentence:hover{ opacity:1 !important; }
}

.certificates-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:20px;
  margin-bottom:20px;
}

.certificate-img{
  width:100%;
  display:block;
  margin:0;
  border:1px solid var(--black);
  border-radius:4px;
}

@media (max-width: 768px) {
  body {
    padding: 20px 20px 0;
  }
}