/* ==========================================================================
   #hero
   ========================================================================== */

#hero {
  padding-block-start: 0;
}

/* Full-bleed terminal window — the window chrome spans the viewport,
   inner content stays centred/readable at content-max-width */
.hero__terminal {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Body spans the viewport so the canvas is full-bleed;
   .hero__content keeps the text at content-max-width */
.hero__terminal .terminal__body {
  position: relative;
  padding-block: var(--space-7);
  padding-inline: 0;
}

.hero__content {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Text fills the hero on small screens, so the network sits further back */
@media (max-width: 767px) {
  .hero__canvas {
    opacity: var(--canvas-opacity-narrow);
  }
}

/* h1 carries name + role for search; the display line below is the visual hook */
.hero__terminal h1 {
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.hero__terminal p {
  color: var(--color-text-muted);
}

.hero__display {
  position: relative;
  margin-bottom: var(--space-5);
  font-size: var(--fs-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

.hero__terminal .hero__display,
.hero__terminal .hero__pitch {
  color: var(--color-text);
}

.hero__pitch {
  margin-top: var(--space-2);
  font-size: var(--fs-md);
}

.hero__stack {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

/* Kinetic headline on load (JS only, so no-JS shows it static).
   Each word rises out of its own mask with a slight tilt, staggered;
   the full stop pops in accent; one light sweep crosses "arrived".
   Whole sequence is done in about 1.4s; text is in the HTML throughout. */
.kin {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: top;
  padding-block: 0.06em 0.12em; /* room for descenders inside the mask */
  margin-block: -0.06em -0.12em;
}

.kin > span {
  display: inline-block;
  transform-origin: 0 100%;
}

.kin__dot {
  display: inline-block;
  color: var(--color-accent);
}

.js .kin > span {
  animation: kin-rise var(--duration-kin) var(--ease-kin) both;
  animation-delay: calc(var(--delay-kin) + var(--i) * var(--stagger-kin));
}

.js .kin__dot {
  animation: kin-pop var(--duration-kin) var(--ease-pop) both;
  animation-delay: calc(var(--delay-kin) + 3 * var(--stagger-kin) + var(--duration-kin) * 0.4);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .js .kin > .kin__sweep {
    background: linear-gradient(100deg, var(--color-text) 42%, var(--color-accent) 50%, var(--color-text) 58%) 100% 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
      kin-rise var(--duration-kin) var(--ease-kin) both,
      kin-sweep var(--duration-kin-sweep) var(--ease-standard) both;
    animation-delay:
      calc(var(--delay-kin) + var(--i) * var(--stagger-kin)),
      calc(var(--delay-kin) + 3 * var(--stagger-kin) + var(--duration-kin) * 0.5);
  }
}

@keyframes kin-rise {
  from { transform: translateY(110%) rotate(6deg); }
  to   { transform: none; }
}

@keyframes kin-pop {
  from { transform: scale(0); }
  to   { transform: none; }
}

@keyframes kin-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .kin > span,
  .js .kin__dot {
    animation: none;
  }
}

/* Positioned so it paints above the canvas; network lines pass behind it */
.hero__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Shown by network.js only when the animation runs */
.fun-toggle {
  position: relative;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 var(--space-2);
  margin-inline-start: calc(-1 * var(--space-2));
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.fun-toggle::before {
  content: "$ ";
}

.fun-toggle:hover {
  color: var(--color-text);
}

/* Set by network.js while the pointer is held in fun mode */
.terminal__body.is-playing {
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   #clips
   ========================================================================== */

#clips {
  padding-block: var(--space-7) 0;
}

/* Whole card is the link target via .clips__link::after */
.clips__card {
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.clips__card:hover {
  border-color: var(--color-accent);
}

.clips__body {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.clips__text p:not(.eyebrow) {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.clips__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.clips__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .clips__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding: var(--space-7);
  }
}

/* ==========================================================================
   #about
   ========================================================================== */

.about__content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
}

.about__photo {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__stats {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.about__stats > div {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.about__stats dt {
  font-family: var(--font-mono);
  color: var(--color-accent);
  min-width: 13ch;
}

.about__stats dd {
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .about__content {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   #expertise
   ========================================================================== */

#expertise > .container > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-7);
}

.expertise__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .expertise__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Text column + icon column on the right, icon centred against the text */
.expertise__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.expertise__card h3 {
  margin-bottom: var(--space-2);
}

.expertise__icon {
  box-sizing: content-box;
  padding: var(--space-2);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.expertise__card p:last-child {
  color: var(--color-text-muted);
}

/* ==========================================================================
   #work
   ========================================================================== */

.work__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
}

.work__header h2 {
  margin-bottom: 0;
}

.work__github {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.work__grid {
  display: grid;
  gap: var(--space-6);
}

/* Lifted card tone with a soft centre highlight and a faint hairline border */
.work__card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: radial-gradient(closest-side, var(--color-card-glow) 40%, var(--color-card));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.work__visual {
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.work__card h3 {
  margin-bottom: var(--space-4);
}

.work__client {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.work__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.work__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-7) auto 0;
  color: var(--color-text-muted);
}

.work__fields > div {
  padding-block: var(--space-2);
}

.work__fields dt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.work__fields > div:nth-child(1) dt {
  color: var(--color-syntax-amber);
}

.work__fields > div:nth-child(2) dt {
  color: var(--color-accent);
}

.work__fields > div:nth-child(3) dt {
  color: var(--color-syntax-green);
}

.work__fields dd {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* Staggered: odd cards hug the left with the image first,
   even cards hug the right with the image last */
@media (min-width: 768px) {
  .work__card {
    width: 90%;
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: center;
    padding: var(--space-7);
  }

  .work__card:nth-child(even) {
    margin-left: auto;
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .work__card:nth-child(even) .work__visual {
    order: 1;
  }

  .work__visual {
    max-width: none;
  }
}

/* Label column + full-width text keeps comfortable line lengths */
@media (min-width: 1024px) {
  .work__fields > div {
    display: grid;
    grid-template-columns: 10ch minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }

  .work__fields dd {
    margin-top: 0;
  }
}

/* ==========================================================================
   #other-work
   ========================================================================== */

#other-work > .container > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-7);
}

.other-work__groups {
  display: grid;
  gap: var(--space-7);
}

.other-work__group h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.other-work__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5) var(--space-6);
}

.other-work__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.other-work__thumb {
  flex: none;
  border-radius: var(--radius-md);
}

.other-work__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: calc(-1 * var(--space-2));
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
}

.other-work__name:hover {
  color: var(--color-accent);
}

.other-work__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   #references
   ========================================================================== */

.references__list {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

.testimonial p {
  font-size: var(--fs-lg);
  line-height: var(--line-height-snug);
  max-width: none;
}

.testimonial footer {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.references__note {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   #faq
   ========================================================================== */

.faq__toggle {
  display: none;
}

html.js .faq__toggle {
  display: inline-flex;
  margin-bottom: var(--space-6);
}

html.js .faq__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard);
}

html.js .faq__reveal > .faq__list {
  overflow: hidden;
  min-height: 0;
}

html.js .faq__reveal.is-open {
  grid-template-rows: 1fr;
}

.faq__list {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-4);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::before {
  content: "+";
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
}

.faq__item[open] summary::before {
  content: "−";
}

.faq__item p {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
}

/* ==========================================================================
   #contact
   ========================================================================== */

#contact > .container > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.contact__toggle {
  display: none;
}

html.js .contact__toggle {
  display: inline-flex;
  margin-bottom: var(--space-6);
}

/* Dissolved on open (nav.js); the links take its place */
html.js .contact__toggle[hidden] {
  display: none;
}

html.js .contact__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard);
}

html.js .contact__reveal > .contact__links {
  overflow: hidden;
  min-height: 0;
}

html.js .contact__reveal.is-open {
  grid-template-rows: 1fr;
}

.contact__links {
  display: grid;
  gap: var(--space-3);
}

.contact__links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.contact__links li:first-child {
  border-top: none;
}

.contact__label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  min-width: 9ch;
}

.contact__links a {
  display: inline-block;
  padding-block: var(--space-3);
  font-size: var(--fs-md);
}