/* Shared minimal layout for the landing and coursework pages. */

body { background: var(--bg-primary); }

.theme-switch.corner { position: absolute; top: 1.5rem; right: 2rem; z-index: 5; }

.home {
  max-width: 860px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

.home-head {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.home h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--sage-green);
}

.home p { font-size: 0.95rem; line-height: 1.6; margin: 0; }
.home .links { margin-top: 0.15rem; }
.home a { color: var(--sage-green); text-decoration: none; }
.home .links a { text-decoration: underline; text-underline-offset: 3px; }
.home a:hover { opacity: 0.7; }
.home .sep { opacity: 0.4; margin: 0 0.45rem; }

.home .photo {
  width: 148px; height: 148px; flex-shrink: 0; display: block;
  object-fit: cover; object-position: center; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 4px var(--sage-green);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.home .photo:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 6px var(--sage-green);
}

.home hr { border: 0; border-top: 1px solid rgba(128, 128, 128, 0.45); margin: 2.5rem 0; }

.home ul { margin: 0.5rem 0 0 1.25rem; padding: 0; list-style: disc; }
.home li { font-size: 0.93rem; line-height: 1.65; margin-bottom: 0.2rem; }

.home .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.75rem; }
.home .card { position: relative; }
.home .card[hidden] { display: none; }
.home .card-link { position: absolute; inset: 0; z-index: 3; }
.home .card-info { color: var(--text-color); }
.home .card-info { font-size: 0.9rem; line-height: 1.5; padding-top: 0.75rem; margin: 0; text-align: center; }

#footer { background: transparent; }
#footer .container { color: var(--text-color); opacity: 0.55; min-height: 100px; }

@media (max-width: 700px) {
  .home { padding: 4rem 1.25rem 3rem; }
  .home-head { gap: 1.1rem; }
  .home .photo { width: 76px; height: 76px; }
  .theme-switch.corner { right: 1.25rem; }
}

/* Course lists */
.home .courses { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.home .courses li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; margin: 0; padding: 0.15rem 0; }
.home .courses .grade { opacity: 0.55; text-align: right; }
.home .term { margin-top: 1.75rem; }
.home .term:first-of-type { margin-top: 0; }


/* Section jump tiles */
.home .jump {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 2.5rem;
  border: 1px solid rgba(52, 55, 59, 0.28); border-radius: 10px; overflow: hidden;
}
.home .jump-btn {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
  padding: 0.9rem 1.1rem 1rem; color: var(--text-color); text-decoration: none; overflow: hidden;
  border-left: 1px solid rgba(52, 55, 59, 0.28); transition: color 0.3s ease;
}
.home .jump-btn:first-child { border-left: 0; }
.home .jump-btn::before { /* green fill that rises from the bottom on hover */
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--sage-green);
  transform: translateY(101%); transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.home .jump-btn > span { position: relative; z-index: 1; }
.home .jump-btn .jn { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; opacity: 0.55; font-variant-numeric: tabular-nums; }
.home .jump-btn .jt { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.home .jump-btn .ja { position: absolute; right: 1rem; bottom: 0.9rem; font-size: 1.1rem; transition: transform 0.3s ease; }
.home .jump-btn:hover { color: var(--bg-primary); opacity: 1; }
.home .jump-btn:hover::before { transform: translateY(0); }
.home .jump-btn:hover .ja { transform: translateY(4px); }
@media (max-width: 520px) { .home .jump-btn .jt { font-size: 0.95rem; } .home .jump-btn { padding: 0.75rem 0.8rem; } }
.home .proj-sec { scroll-margin-top: 2rem; }
.home .proj-sec + .proj-sec { margin-top: 4rem; }
.home .proj-sec h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1.5rem; }

/* Photo gallery (fun projects) */
.home .grid { align-items: start; }
.home .grid figure { margin: 0; }
.home .grid figure img { width: 100%; height: auto; display: block; }
.home .grid figcaption { padding-top: 0.75rem; font-size: 0.9rem; line-height: 1.5; }

/* Card titles respond to hover, press and keyboard focus */
.home .card-info { transition: color 0.2s ease, transform 0.35s ease; transform-origin: center top; }
.home .card:hover .card-info,
.home .card:focus-within .card-info {
  transform: scale(1.06); /* zooms together with the picture */
}
.home .card:active .card-info { opacity: 0.7; transform: scale(1.02); }
.home .card:active .card-image { transform: scale(1.02); }
.home .card-link:focus-visible { outline: 2px solid var(--sage-green); outline-offset: 4px; }

.home .jump-btn, .home .jump-btn:hover, .home .jump-btn:focus, .home .jump-btn:active, .home .jump-btn:visited, .home .jump-btn * { text-decoration: none !important; }

/* In-progress placeholder cards */
.home .card.soon { cursor: default; }
.home .card.soon .card-image { display: flex; align-items: center; justify-content: center; background: rgba(52, 55, 59, 0.07); border: 1px dashed rgba(52, 55, 59, 0.3); }
.home .card.soon .card-image span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }
.home .card.soon:hover .card-image, .home .card.soon:hover .card-info { transform: none; }

/* Card titles: bold */
.home .card-info { font-weight: 700; }

/* Skills */
.home .skills h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
.home .skill-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.home .skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.5rem; }
.home .skill-group h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-color); opacity: 0.55; margin: 0 0 0.6rem; }
.home .skill-group li { margin: 0; padding: 0.28rem 0.7rem; font-size: 0.84rem; font-weight: 500; line-height: 1.3; border-radius: 999px; background: rgba(52, 55, 59, 0.06); }
@media (max-width: 620px) { .home .skill-grid { grid-template-columns: 1fr; } .home .photo { width: 112px; height: 112px; } }