/* benschwemlein.com: the content inside the faces. The world, the widgets, and the ghost theme come
 * from cyberscape (cyberscape/grid.css, cyberscape/cyberscape.js, cyberscape/ghost.css). */

scape-cube {
  --scape-open-width: min(68vw, 760px); --scape-open-height: min(calc((100svh - 240px) / 1.12), 640px);
  --scape-card-bg: rgba(0, 22, 32, 0.92); --scape-card-open-bg: rgba(0, 20, 30, 0.97);
  --scape-stack-fade: 0.15;
}
/* Text inside faces */
scape-face p { margin: 0 0 12px; max-width: 62ch; }
scape-face h3 { font-size: 15px; font-weight: 600; color: var(--scape-neon); margin: 18px 0 8px; }
scape-face h3:first-child { margin-top: 0; }
scape-face ul { margin: 0 0 12px; padding-left: 18px; }
scape-face li { margin: 0 0 6px; }
.muted { color: var(--scape-muted); }
.go { background: none; border: 1px solid var(--scape-neon-soft); color: var(--scape-neon); font: inherit;
      font-family: var(--scape-display-font); font-size: 12px; letter-spacing: 2px; padding: 10px 16px;
      cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.go:hover, .go:focus-visible { border-color: var(--scape-neon); box-shadow: 0 0 14px var(--scape-neon-faint), inset 0 0 14px var(--scape-neon-faint); }
/* The Full Resume button: ghostly white, in the resume face's header bar */
.go.flat {
  color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.55); white-space: nowrap;
  font-size: 9.5px; padding: 5px 10px; letter-spacing: 1px; margin-left: 10px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.35); animation: ghost 4.5s ease-in-out infinite;
}
.go.flat:hover, .go.flat:focus-visible { border-color: #fff; color: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, 0.28), inset 0 0 10px rgba(255, 255, 255, 0.08); animation: none; }
@keyframes ghost { 0%, 100% { opacity: .78; } 50% { opacity: 1; box-shadow: 0 0 12px rgba(255, 255, 255, 0.22); } }

/* Home */
.home { display: flex; flex-direction: column; justify-content: safe center; align-items: center; text-align: center; height: 100%; }
.home h1 { font-size: clamp(22px, 4.6vmin, 40px); font-weight: 800; text-shadow: 0 0 10px var(--scape-neon), 0 0 30px var(--scape-neon); color: var(--scape-neon); }
.home .role { font-family: var(--scape-display-font); font-size: 12px; letter-spacing: 3px; color: var(--scape-muted); margin: 10px 0 22px; }
.home .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Resume */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--scape-neon-faint); padding: 2px 9px; font-size: 15px; color: var(--scape-text); margin: 0; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0 0 8px; }
.job strong { font-weight: 700; }
.job .when { color: var(--scape-muted); font-size: 15px; white-space: nowrap; }
.job .what { grid-column: 1 / -1; color: var(--scape-text); font-size: 16px; }
.skillmap { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; }
.skillmap dt { font-family: var(--scape-display-font); font-size: 11px; letter-spacing: 1px; color: var(--scape-neon); padding-top: 4px; white-space: nowrap; }
.skillmap dd { margin: 0; font-size: 16px; }
.themes { grid-template-columns: 118px 1fr; gap: 12px 14px; }
.themes dt { white-space: normal; line-height: 1.35; }
.themed { margin: 0 0 8px; padding-left: 18px; }
.themed li { margin-bottom: 6px; }
.themed strong { color: var(--scape-neon); font-weight: 700; margin-right: 6px; }
.tech { color: var(--scape-muted); font-size: 14px; margin: 0 0 6px; }
.eng { margin: 0 0 14px 10px; padding-left: 12px; border-left: 1px solid var(--scape-neon-faint); }
.eng h4 { font-family: var(--scape-font); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.eng h4 span { font-weight: 500; color: var(--scape-muted); font-size: 15px; margin-left: 8px; }
.eng ul { margin: 0 0 6px; padding-left: 18px; }
.eng li { font-size: 16px; margin-bottom: 4px; }

/* Projects */
.proj { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; }
.proj dt { font-family: var(--scape-display-font); font-size: 12px; letter-spacing: 1px; color: var(--scape-neon); padding-top: 3px; }
.proj dt a { border-bottom: none; }
.proj dt a:hover, .proj dt a:focus-visible { border-bottom: 1px solid var(--scape-neon); }
.proj dd { margin: 0; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--scape-neon-faint); }
.contact-list .k { color: var(--scape-muted); }

/* Blog posts */
scape-stack article[open] h3 { font-size: 20px; }
scape-stack article[open] .body p { max-width: 70ch; font-size: 19px; line-height: 1.5; }
scape-stack article pre {
  background: rgba(0, 8, 12, 0.7); border: 1px solid var(--scape-neon-faint); padding: 12px 14px; margin: 0 0 14px;
  overflow: auto; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--scape-text); max-width: 70ch;
}
scape-stack article figure { margin: 6px 0 16px; max-width: 70ch; }
scape-stack article figure.portrait { max-width: 320px; }
scape-stack article figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--scape-neon-faint); background: #e6f3f5; }
scape-stack article figcaption { font-size: 14px; color: var(--scape-muted); margin-top: 6px; }

/* About me: a darker screen inside the face with the hologram and a typed readout */
scape-face[name="about"]::part(body) { padding: 18px; overflow: hidden; display: flex; }
.screen { flex: 1; min-height: 0; display: flex; background: #000c12; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7); width: 100%; }
.pane { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2% 5%; overflow: hidden; }
.crt { position: relative; height: 30%; aspect-ratio: 1; width: auto; flex: 0 0 auto; margin: 0 0 1vmin; overflow: hidden; }
.lab-img { display: block; width: 100%; height: 100%; object-fit: contain; will-change: transform, opacity, filter; }
.stats { display: grid; grid-template-columns: max-content 1fr; gap: 0.4vmin 1.6vmin; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(9px, 1.6vmin, 12px); letter-spacing: 1px; will-change: transform, opacity; }
.stats dt { color: var(--scape-muted); text-transform: uppercase; }
.stats dt::after { content: ':'; }
.stats dd { margin: 0; color: var(--scape-neon); text-shadow: 0 0 6px var(--scape-neon-faint); white-space: pre-wrap; min-height: 1em; }
.stats dd.typing::after { content: '_'; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Expanded About on a wide screen: the portrait takes the left half, the readout the right */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  scape-cube[expanded] scape-face[name="about"] .pane { flex-direction: row; align-items: center; gap: 3%; padding: 2% 3%; }
  scape-cube[expanded] scape-face[name="about"] .crt { flex: 0 0 50%; width: 50%; height: 100%; aspect-ratio: auto; margin: 0; }
  scape-cube[expanded] scape-face[name="about"] .stats { flex: 1; font-size: clamp(12px, 2.1vmin, 18px); gap: 1.4vmin 2.6vmin; letter-spacing: 1.5px; }
}

@media (max-width: 720px) {
  .home h1 { font-size: 22px; }
  .home .role { margin: 6px 0 12px; }
  .home .go { padding: 8px 12px; }
  .job .when { white-space: normal; }
  .proj { grid-template-columns: 1fr; gap: 2px 0; }
  .proj dd { margin-bottom: 10px; }
  .stats { letter-spacing: .4px; font-size: clamp(8px, 2.2vmin, 10px); gap: 2px 8px; }
  scape-face[name="about"]::part(body) { padding: 12px; }
  .crt { height: 25%; }
  /* phones: the address bar already shows the domain, so drop the brand and give its space to the panels */
  .scape-brand { display: none; }
  .scape-world scape-cube { --scape-expand-top: 24px; }
  scape-cube { --scape-open-width: 84vw; --scape-open-height: calc((100svh - 134px) / 1.12); }
  scape-stack article[open] .body p { font-size: 17px; }
}

/* Resume sign in: the only face on the resume cube until the gate hands out the real ones */
.signin { display: grid; gap: 12px; max-width: 580px; }
.signin .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.signin label { display: flex; flex-direction: column; gap: 6px; font-family: var(--scape-display-font); font-size: 10px;
                letter-spacing: 2px; text-transform: uppercase; color: var(--scape-neon); }
.signin input { font-family: var(--scape-font); font-size: 17px; letter-spacing: normal; text-transform: none; color: var(--scape-text);
                background: rgba(255, 255, 255, 0.04); border: 1px solid var(--scape-neon-faint); padding: 8px 10px; outline: none;
                transition: border-color .2s, box-shadow .2s; }
.signin input:focus { border-color: var(--scape-neon); box-shadow: 0 0 10px var(--scape-neon-faint); }
.signin input[aria-invalid="true"] { border-color: #ff3b5c; }
.signin .err { min-height: 16px; font-family: var(--scape-font); font-size: 14px; letter-spacing: normal; text-transform: none; color: #ff6b85; }
.signin .form-error { color: #ff6b85; margin: 0; }
.signin .go { justify-self: start; }
.signin .fine { font-size: 14px; margin: 0; }
@media (max-width: 720px) { .signin .row { grid-template-columns: 1fr; } }

/* Locked resume faces: blurred filler under a grey glass panel with a way back to the sign in face */
.locked-body { height: 100%; overflow: hidden; filter: blur(4px); opacity: 0.55; user-select: none; pointer-events: none; }
.locked-body p { margin: 0 0 14px; }
.locked-body strong { color: var(--scape-neon); margin-right: 8px; }
.locked-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
              background: rgba(120, 128, 140, 0.16); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.locked-cta p { margin: 0; font-family: var(--scape-display-font); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--scape-neon); }
.locked-wrap { position: relative; height: 100%; }
/* Waiting on the gate: the cube is already open, so the call to action becomes a quiet loading line */
.locked-cta .load { display: none; animation: waiting 1.4s ease-in-out infinite; }
.locked-cta .note { color: #ff6b85; letter-spacing: 1.5px; text-transform: none; font-family: var(--scape-font); font-size: 15px; }
#resume.waiting .locked-cta .lead, #resume.waiting .locked-cta .go, #resume.waiting .locked-cta .note { display: none; }
#resume.waiting .locked-cta .load { display: block; }
@keyframes waiting { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .locked-cta .load { animation: none; } }

/* Certification badge on the resume education face */
.cert { display: flex; align-items: center; gap: 18px; }
.cert-text { flex: 1 1 auto; min-width: 0; }
.cert-badge { flex: 0 0 auto; width: 96px; height: 96px; filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.28)); }
@media (max-width: 480px) { .cert-badge { width: 80px; height: 80px; } }

/* University seals beside each school on the resume education face */
.edu-row { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.edu-row .job { flex: 1 1 auto; min-width: 0; margin: 0; }
.edu-seal { flex: 0 0 auto; width: 52px; height: 52px; }