/* ==========================================================================
   Arpan Silwal - Portfolio Stylesheet
   --------------------------------------------------------------------------
   Design system notes (so future-you can edit confidently):

   SPACING     Every spacing value is a multiple of 9. The scale lives in
               --s1 .. --s10 below. If you need a new gap, use one of those
               tokens rather than an arbitrary pixel value. This is what makes
               the layout feel tight and deliberate.

   TYPE        The type scale steps by roughly 1.618 (the golden ratio) from a
               16px base. Sizes use clamp() so they scale smoothly on mobile.

   COLOR       Three accents, used in strict hierarchy:
                 --accent      indigo, the dominant accent (most UI)
                 --accent-2    cyan, technical/secondary highlights
                 --accent-3    gold, used SPARINGLY (2-3 places max)
               Overusing gold is the fastest way to break the look.

   BREAKPOINTS 720px and 1080px (both multiples of 9). Mobile-first: base
               styles are the phone layout, media queries add the larger ones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Spacing scale: multiples of 9 */
  --s1: 9px;
  --s2: 18px;
  --s3: 27px;
  --s4: 36px;
  --s5: 45px;
  --s6: 54px;
  --s7: 72px;
  --s8: 90px;
  --s9: 108px;
  --s10: 144px;

  /* Surfaces. Background is very slightly blue-tinted, not pure black. */
  --bg: #0d0f1a;
  --bg-alt: #11142252;
  --surface: #151929;
  --surface-hi: #1b2033;
  --border: #262c42;

  /* Text */
  --text: #e8eaf6;
  --text-muted: #9aa1bd;
  --text-dim: #6b7392;

  /* Accents */
  --accent: #6366f1;
  --accent-soft: #6366f11a;
  --accent-2: #06b6d4;
  --accent-3: #f59e0b;

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Golden-ratio type scale from a 16px base */
  --t-xs: 0.75rem;    /* 12px  - mono labels */
  --t-sm: 0.875rem;   /* 14px  - fine print */
  --t-base: 1rem;     /* 16px  - body */
  --t-md: 1.125rem;   /* 18px  - lead paragraphs */
  --t-lg: 1.618rem;   /* ~26px - card headings */
  --t-xl: 2.618rem;   /* ~42px - section headings */
  --t-2xl: 4.236rem;  /* ~68px - hero name */

  /* Layout */
  --sidebar-w: 288px; /* 9 x 32 */
  --content-max: 1080px;
  --radius: 9px;
  --radius-sm: 4px;

  /* Motion. Set to 0.01ms globally under prefers-reduced-motion (see §12). */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 360ms;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Offset so anchored sections are not hidden under the mobile top bar */
  scroll-padding-top: var(--s7);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover {
  color: var(--accent-2);
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Keyboard focus ring. Visible, on-brand, and never removed. */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link, revealed on focus */
.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 999;
  padding: var(--s1) var(--s2);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Shared layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.section {
  padding-block: var(--s7);
}

.section--alt {
  background-color: var(--bg-alt);
  border-block: 1px solid var(--border);
}

/* Small monospace label above each section heading, e.g. "// about".
   This is the recurring back-end signature of the whole design. */
.section__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--accent-2);
  margin-bottom: var(--s1);
}

.section__title {
  font-size: var(--t-xl);
  margin-bottom: var(--s2);
}

.section__intro {
  color: var(--text-muted);
  max-width: 61.8%; /* golden ratio of the content width */
  margin-bottom: var(--s5);
}

@media (max-width: 720px) {
  .section__intro {
    max-width: 100%;
  }
}

/* Reusable card surface */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   4. Sidebar navigation
   Mobile: off-canvas drawer, opened by the hamburger button.
   Desktop (1080px+): permanently docked on the left.
   -------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 100;
  width: var(--sidebar-w);
  padding: var(--s5) var(--s3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar__profile {
  text-align: center;
  margin-bottom: var(--s5);
}

.sidebar__avatar {
  width: 108px; /* 9 x 12 */
  height: 108px;
  margin: 0 auto var(--s2);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.sidebar__name {
  font-size: var(--t-md);
  letter-spacing: 0.02em;
}

.sidebar__name a {
  color: var(--text);
}

.sidebar__role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

.sidebar__social {
  display: flex;
  justify-content: center;
  gap: var(--s1);
  margin-top: var(--s2);
}

.sidebar__social a {
  display: grid;
  place-items: center;
  width: var(--s4);
  height: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}

.sidebar__social a:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.sidebar__social svg {
  width: 18px;
  height: 18px;
}

/* Nav links. The active item gets an indigo left rule plus a lifted surface. */
.nav__link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  margin-bottom: 3px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-hi);
}

.nav__link.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

/* The index number next to each nav item, in mono. Six items, 01 to 06. */
.nav__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

.nav__link.is-active .nav__num {
  color: var(--accent-3); /* gold accent, appearance 1 of 3 */
}

/* Hamburger toggle, hidden once the sidebar docks at 1080px */
.nav-toggle {
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: 200;
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}

/* Dim the page behind the open drawer */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1080px) {
  .sidebar {
    transform: translateX(0);
  }

  .nav-toggle,
  .nav-overlay {
    display: none;
  }

  body {
    padding-left: var(--sidebar-w);
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   Signature element: a faint hexagonal tessellation behind the name.
   Six-sided, low opacity, masked so it fades out toward the edges.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: var(--s9) var(--s3);
  overflow: hidden;
}

/* Faint background photograph, sitting underneath the hex pattern.
   Kept very low contrast so it reads as texture rather than imagery.
   To adjust how visible it is, change the opacity below (0.10 - 0.25 is
   a sensible range). To swap the photo, change the url(). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.38;
  /* Partly desaturated so the photo does not fight the indigo/cyan palette,
     but still keeps some of its own tone */
  filter: grayscale(65%) contrast(105%) brightness(115%);
}

/* Dark scrim over the photo, so headline text keeps its contrast.
   Weighted to the left, where the hero copy sits. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(13, 15, 26, 0.94) 0%,
    rgba(13, 15, 26, 0.72) 38.2%,
    rgba(13, 15, 26, 0.28) 100%
  );
}

.hero__hex {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%236366f1' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%236366f1' stroke-width='1.5'/%3E%3C/svg%3E");
  /* Fade the pattern out radially so it never competes with the text */
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 3; /* above the photo, scrim and hex layers */
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.hero__comment {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-dim);
  margin-bottom: var(--s2);
}

.hero__name {
  font-size: clamp(2.6rem, 11vw, var(--t-2xl));
  margin-bottom: var(--s2);
}

/* The typed line reads: I'm "Back-End Developer"
   The quotes are drawn in gold so the phrase looks like a string literal. */
.hero__typed-line {
  font-size: clamp(var(--t-md), 4.5vw, var(--t-lg));
  color: var(--text-muted);
  font-family: var(--font-mono);
  min-height: 2.4em;
}

.hero__quote {
  color: var(--accent-3); /* gold accent, appearance 2 of 3 */
}

.hero__typed {
  color: var(--accent-2);
}

/* Blinking caret */
.hero__caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent-2);
  vertical-align: text-bottom;
  animation: blink 1.08s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.btn:hover {
  background: transparent;
  color: var(--accent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* --------------------------------------------------------------------------
   6. About
   61.8 / 38.2 split at desktop, the golden ratio.
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 720px) {
  .about__grid {
    grid-template-columns: 38.2fr 61.8fr;
    align-items: start;
  }
}

.about__photo {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}

.about__lead {
  font-size: var(--t-md);
  color: var(--text);
  margin-bottom: var(--s3);
}

.about__body p {
  color: var(--text-muted);
  margin-bottom: var(--s2);
}

/* Two-column key/value detail list */
.about__facts {
  display: grid;
  gap: var(--s1);
  margin-block: var(--s3);
  padding-block: var(--s3);
  border-block: 1px solid var(--border);
}

@media (min-width: 720px) {
  .about__facts {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s4);
  }
}

.about__facts li {
  display: flex;
  gap: var(--s1);
  font-size: var(--t-sm);
}

.about__facts dt,
.about__facts .key {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  min-width: 81px; /* 9 x 9 */
}

.about__facts .val {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   7. Facts counters
   -------------------------------------------------------------------------- */

.facts__grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}

.fact {
  text-align: center;
  padding: var(--s4) var(--s3);
}

.fact__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.fact__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  margin-top: var(--s1);
}

/* --------------------------------------------------------------------------
   8. Skills
   -------------------------------------------------------------------------- */

.skills__grid {
  display: grid;
  gap: var(--s3) var(--s6);
}

@media (min-width: 720px) {
  .skills__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Vertical rhythm between individual skill rows */
.skill + .skill {
  margin-top: var(--s3);
}

.skill__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-sm);
  margin-bottom: var(--s1);
}

.skill__name {
  font-weight: 500;
}

.skill__val {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

.skill__track {
  height: 5px;
  background: var(--surface-hi);
  border-radius: 99px;
  overflow: hidden;
}

/* Width is set inline in the HTML via --w, and animated in by JS on scroll */
.skill__bar {
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1080ms var(--ease);
}

.skill__track.is-visible .skill__bar {
  width: var(--w);
}

/* --------------------------------------------------------------------------
   9. Resume timeline
   The left rule plus node reads like a circuit trace rather than a bullet.
   -------------------------------------------------------------------------- */

.resume__grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 720px) {
  .resume__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.resume__heading {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--accent-2);
  margin-bottom: var(--s3);
}

.timeline {
  padding-left: var(--s3);
  border-left: 1px solid var(--border);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--s4);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* The node on the trace */
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s3) * -1 - 4px);
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.timeline__item--current::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline__role {
  font-size: var(--t-base);
  margin-bottom: 2px;
}

.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--accent-2);
  margin-bottom: var(--s1);
}

.timeline__org {
  font-size: var(--t-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--s1);
}

.timeline__list li {
  position: relative;
  padding-left: var(--s2);
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-bottom: 5px;
}

.timeline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1px;
  background: var(--text-dim);
}

/* --------------------------------------------------------------------------
   10. Portfolio
   -------------------------------------------------------------------------- */

.portfolio__grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(279px, 1fr));
}

.project {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.project__media {
  aspect-ratio: 16 / 10;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.project:hover .project__media img {
  transform: scale(1.04);
}

/* Placeholder tile for projects not yet published.
   To turn one into a real project: replace .project__placeholder with an
   <img>, and fill in the title, description, tags and link below it. */
.project__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23262c42' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23262c42' stroke-width='1.5'/%3E%3C/svg%3E");
}

.project__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s3);
}

.project__title {
  font-size: var(--t-base);
  margin-bottom: var(--s1);
}

.project__desc {
  font-size: var(--t-sm);
  color: var(--text-muted);
  flex: 1;
  margin-bottom: var(--s2);
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--s2);
}

.project__tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
}

.project__link {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--accent-2);
}

.project__link--muted {
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   11. Services, testimonials, contact, footer
   -------------------------------------------------------------------------- */

.services__grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.service__icon {
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  margin-bottom: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
}

.service__title {
  font-size: var(--t-base);
  margin-bottom: var(--s1);
}

.service__desc {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.testimonials__grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
}

.quote__mark {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
}

.quote__text {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-block: var(--s1) var(--s3);
}

.quote__person {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.quote__avatar {
  width: var(--s5);
  height: var(--s5);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.quote__name {
  font-size: var(--t-sm);
  font-weight: 600;
}

.quote__title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

.contact__grid {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 720px) {
  .contact__grid {
    grid-template-columns: 38.2fr 61.8fr;
    align-items: start;
  }
}

.contact__item {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.contact__icon {
  flex-shrink: 0;
  color: var(--accent);
}

.contact__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

.contact__value {
  font-size: var(--t-sm);
  color: var(--text);
}

.form__row {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

@media (min-width: 720px) {
  .form__row--split {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  margin-bottom: 5px;
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--s1) var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: var(--s9);
}

.form__note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
  margin-top: var(--s2);
}

.footer {
  padding-block: var(--s5);
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer p {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-dim);
}

.to-top {
  position: fixed;
  right: var(--s3);
  bottom: var(--s3);
  z-index: 80;
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  color: #fff;
  background: var(--accent-2);
}

/* --------------------------------------------------------------------------
   12. Scroll reveal and reduced motion
   Elements with [data-reveal] start faded and are revealed by JS.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Honour the OS-level reduced motion setting: no transforms, no animation,
   no smooth scrolling, and revealed content is shown immediately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .project:hover .project__media img {
    transform: none;
  }

  .hero__caret {
    animation: none;
  }
}