/* =========================================================
   ROOT
========================================================= */

:root {

  /* Colors */
  --ink: #101217;
  --muted: #646871;
  --line: #e5e8e5;

  --green: #78ef20;
  --green-dark: #4dbd00;

  --paper: #fbfcfa;
  --white: #ffffff;

  --danger: #c0392b;
  --success: #218739;

  /* Fonts */
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;

  /* Fluid typography */
  --text-xs: clamp(.72rem, .15vw + .68rem, .82rem);
  --text-sm: clamp(.82rem, .18vw + .76rem, .94rem);
  --text-md: clamp(.92rem, .22vw + .84rem, 1.05rem);
  --text-lg: clamp(1rem, .3vw + .9rem, 1.18rem);

  --heading-sm: clamp(1.4rem, 2vw + .5rem, 2rem);
  --heading-md: clamp(2rem, 3.5vw, 3rem);
  --heading-lg: clamp(2.7rem, 5vw, 4.4rem);

  /* Fluid spacing */
  --space-xs: clamp(.4rem, .5vw, .6rem);
  --space-sm: clamp(.7rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2.5rem, 5vw, 4.5rem);

  --radius: .45rem;

  --shadow:
    0 .9rem 2.5rem rgba(25, 35, 20, .04);

}


/* =========================================================
   RESET
========================================================= */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #f4f6f3;
  color: var(--ink);

  font-family: var(--sans);
  font-size: var(--text-md);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

.botcheck {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.container {
  width: min(1120px, calc(100% - 3rem));

  margin-inline: auto;
}

.section {
  position: relative;

  width: min(1160px, calc(100% - 1.75rem));

  margin: 1rem auto;

  padding-block: clamp(3rem, 6vw, 4.5rem);

  background: var(--white);

  border: 1px solid var(--line);

  border-radius: .5rem;

  overflow: hidden;

  scroll-margin-top: 6rem;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.section h2 {
  margin: .4rem 0 .8rem;

  font-family: var(--serif);

  font-size: var(--heading-md);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -.04em;
}

.eyebrow {
  margin: 0;

  color: #51bd09;

  font-size: var(--text-xs);

  font-weight: 800;

  letter-spacing: .16em;

  line-height: 1.3;

  text-transform: uppercase;
}

.muted,
.section-lead {
  max-width: 38rem;

  color: var(--muted);

  font-size: var(--text-md);

  line-height: 1.7;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(255, 255, 255, .94);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--line);
}

.nav {
  min-height: clamp(4rem, 7vw, 4.5rem);

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.brand {
  flex-shrink: 0;

  font-size: clamp(1rem, 1.2vw, 1.15rem);

  font-weight: 800;

  letter-spacing: -.04em;
}

.brand span {
  color: var(--green-dark);
}

.nav-links {
  height: 100%;

  display: flex;

  align-items: center;
}

.nav-link {
  position: relative;

  min-width: clamp(5rem, 8vw, 7rem);

  min-height: 4rem;

  padding-inline: .75rem;

  display: grid;

  place-items: center;

  font-size: clamp(.68rem, .25vw + .62rem, .82rem);

  letter-spacing: clamp(.08em, .3vw, .17em);

  font-weight: 700;

  text-transform: uppercase;

  white-space: nowrap;
}

.nav-link.active {
  background: #fafcf8;
}

.nav-link.active::after {
  content: "";

  position: absolute;

  bottom: 0;

  width: 1.5rem;

  height: .12rem;

  background: var(--green);
}

.menu-toggle {
  display: none;

  width: 2.75rem;
  height: 2.75rem;

  padding: .4rem;

  border: 0;

  background: transparent;
}

.menu-toggle span {
  display: block;

  width: 1.4rem;
  height: .12rem;

  margin: .3rem auto;

  background: var(--ink);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  min-height: 2.9rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 1em;

  padding: .75rem 1.2rem;

  border: 0;

  border-radius: .35rem;

  font-size: var(--text-sm);

  font-weight: 700;

  transition:
    transform .2s ease,
    background .2s ease,
    opacity .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green);

  box-shadow:
    0 .5rem 1.25rem rgba(120, 239, 32, .18);
}

.btn-primary:hover {
  background: #67df13;
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.text-link,
.green-link {
  font-size: var(--text-sm);

  font-weight: 700;
}

.text-link {
  text-decoration: underline;

  text-decoration-color: #cfd4cf;

  text-underline-offset: .3em;
}

.green-link {
  color: #4eaf12;
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
  min-height: min(650px, 85vh);
}

.hero-rings,
.contact-rings {
  position: absolute;

  width: clamp(20rem, 40vw, 31rem);
  aspect-ratio: 1;

  top: -6rem;
  right: -8rem;

  border-radius: 50%;

  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0 3rem,
      rgba(120, 239, 32, .17) 3.05rem 3.15rem,
      transparent 3.2rem 4.4rem
    );

  pointer-events: none;
}

.hero-grid {
  min-height: 34rem;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(20rem, .95fr);

  gap: clamp(2rem, 6vw, 5rem);

  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-copy h1 {
  max-width: 12ch;

  margin: .75rem 0 1.25rem;

  font-family: var(--serif);

  font-size: var(--heading-lg);

  font-weight: 600;

  line-height: 1.02;

  letter-spacing: -.045em;
}

.hero-text {
  max-width: 36rem;

  margin: 0;

  color: #4e5258;

  font-size: var(--text-md);

  line-height: 1.75;
}

.hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: clamp(1rem, 2vw, 1.8rem);

  margin-block: 1.6rem 2.2rem;
}

.stats {
  display: grid;

  gap: clamp(1rem, 2vw, 1.5rem);
}

.stats-four {
  max-width: 34rem;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.stats strong,
.side-stats strong {
  display: block;

  font-family: var(--serif);

  font-size: clamp(1.3rem, 2vw, 1.65rem);

  font-weight: 600;

  line-height: 1.1;
}

.stats span,
.side-stats span {
  display: block;

  margin-top: .3rem;

  color: #62666c;

  font-size: var(--text-xs);

  line-height: 1.4;
}

.scroll-hint {
  display: flex;

  align-items: center;

  gap: .7rem;

  margin-top: clamp(2rem, 4vw, 3rem);

  font-size: var(--text-xs);

  letter-spacing: .14em;

  font-weight: 700;
}

.mouse {
  width: .85rem;
  height: 1.45rem;

  position: relative;

  border: .1rem solid var(--ink);

  border-radius: .6rem;
}

.mouse::before {
  content: "";

  position: absolute;

  top: .25rem;
  left: 50%;

  width: .12rem;
  height: .3rem;

  border-radius: .1rem;

  background: var(--ink);

  transform: translateX(-50%);
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-visual {
  min-height: 30rem;

  position: relative;

  display: grid;

  place-items: center;
}

.hero-visual .portrait-frame {
  width: min(20rem, 80%);

  aspect-ratio: 4 / 5;

  padding: .35rem;

  background: #fff;

  border: 1px solid #aeb5ac;

  transform: rotate(-1.3deg);

  box-shadow:
    0 .6rem 2rem rgba(0, 0, 0, .07);

  overflow: hidden;
}

.portrait-placeholder {
  width: 100%;
  height: 100%;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #d8e8ed,
      #a7c3cb 45%,
      #ece5d9
    );
}

.portrait-placeholder img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: center;

  display: block;
}

.hero-visual .portrait-placeholder::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 45%,
      rgba(255, 255, 255, .28)
    );
}

.vertical-note {
  position: absolute;

  right: 1rem;
  top: 5rem;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  font-size: var(--text-xs);

  letter-spacing: .22em;
}

.scribble {
  position: absolute;

  right: 0;
  bottom: 3rem;

  color: #4caf0a;

  font:
    italic clamp(1rem, 2vw, 1.4rem) / 1.15
    "Comic Sans MS",
    cursive;

  transform: rotate(-6deg);
}

.scribble b {
  font-size: 1.3em;
}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(12rem, .72fr)
    minmax(8rem, .25fr);

  gap: clamp(1.5rem, 3vw, 2.8rem);

  align-items: start;
}

.about-copy .muted {
  font-size: var(--text-md);
}

.about-list {
  padding: 0;

  margin: 1.4rem 0 0;

  display: grid;

  gap: .75rem;

  list-style: none;
}

.about-list li {
  display: flex;

  align-items: center;

  font-size: var(--text-sm);
}

.about-list li span {
  width: 1.5rem;

  flex-shrink: 0;

  margin-right: .5rem;

  color: #52c00c;

  font-size: 1.1em;
}

.about-photo-wrap {
  position: relative;
}

.about-photo {
  width: 100%;

  aspect-ratio: 4 / 5;

  padding: .3rem;

  border: 1px solid #7fe53e;

  transform: rotate(-1deg);
}

.about-sign {
  position: absolute;

  right: -.3rem;
  bottom: -1.5rem;

  color: #4caf0a;

  font:
    italic clamp(1rem, 1.5vw, 1.2rem) / 1.1
    "Comic Sans MS",
    cursive;

  transform: rotate(-5deg);
}

.side-stats {
  display: grid;

  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}

.side-stats strong {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}


/* =========================================================
   JOURNEY
========================================================= */

.journey {
  grid-column: 1 / -1;
}

.journey h3 {
  margin: 0 0 1.1rem;

  font-family: var(--serif);

  font-size: var(--text-lg);

  font-weight: 600;
}

.timeline {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  position: relative;

  padding-top: .25rem;
}

.timeline::before {
  content: "";

  position: absolute;

  top: .6rem;
  left: .5rem;
  right: .5rem;

  height: 1px;

  background: #dfe4df;
}

.timeline article {
  position: relative;

  padding-top: 1.45rem;

  padding-right: .75rem;
}

.timeline i {
  position: absolute;

  top: .25rem;
  left: .15rem;

  width: .55rem;
  height: .55rem;

  border-radius: 50%;

  background: #71db1d;

  border: .12rem solid white;

  box-shadow:
    0 0 0 .06rem #71db1d;
}

.timeline b {
  display: block;

  font-size: var(--text-xs);
}

.timeline span {
  display: block;

  margin-top: .25rem;

  color: #64686d;

  font-size: var(--text-xs);

  line-height: 1.45;
}


/* =========================================================
   QUOTE
========================================================= */

.quote {
  grid-column: 1 / -1;

  margin: 0;

  padding: 1rem 1.4rem;

  display: grid;

  grid-template-columns:
    auto minmax(7rem, 8rem) 1fr;

  gap: 1rem;

  align-items: center;

  border: 1px solid var(--line);

  border-radius: .4rem;
}

.quote-mark {
  color: #55c50a;

  font:
    bold clamp(2rem, 4vw, 2.7rem)
    var(--serif);
}

.quote strong {
  font-family: var(--serif);

  font-size: var(--text-md);

  line-height: 1.15;
}

.quote p {
  margin: 0;

  font-size: var(--text-sm);

  line-height: 1.6;
}

.quote p b {
  font-size: var(--text-xs);

  letter-spacing: .08em;
}


/* =========================================================
   PROJECTS
========================================================= */

#works h2 {
  max-width: 48rem;
}

.filters {
  display: flex;

  flex-wrap: wrap;

  gap: .55rem;

  margin-block: 1.5rem;
}

.filter {
  padding: .55em 1.1em;

  border: 1px solid #e2e5e2;

  border-radius: .35rem;

  background: #f7f8f7;

  font-size: var(--text-xs);

  font-weight: 600;

  white-space: nowrap;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.filter.active,
.filter:hover {
  background: var(--green);

  border-color: var(--green);
}

.project-grid,
.blog-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(.75rem, 1.5vw, 1rem);
}

.project-card,
.blog-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid var(--line);

  border-radius: .35rem;

  box-shadow: var(--shadow);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.project-card:hover,
.blog-card:hover {
  transform: translateY(-.15rem);

  box-shadow:
    0 .9rem 1.8rem rgba(25, 35, 20, .07);
}

.project-card.hidden {
  display: none;
}

.project-card img,
.blog-card > img {
  width: 100%;

  height: 10rem;

  object-fit: cover;
}

.project-body,
.blog-body {
  padding: clamp(.85rem, 1.5vw, 1.1rem);
}

.tags {
  display: flex;

  flex-wrap: wrap;

  gap: .25rem;
}

.tag {
  display: inline-block;

  padding: .3em .7em;

  background: #f0f2ef;

  border-radius: .2rem;

  font-size: var(--text-xs);

  line-height: 1.2;
}

.project-body h3,
.blog-body h3 {
  margin: .4rem 0 .5rem;

  font-size: var(--text-lg);

  line-height: 1.3;
}

.project-body p,
.blog-body p {
  margin: 0 0 .75rem;

  color: #686c70;

  font-size: var(--text-sm);

  line-height: 1.6;
}

.wide-link {
  display: flex;

  align-items: center;

  gap: .75rem;

  margin-top: .8rem;

  padding: .9rem 1.1rem;

  border: 1px solid var(--line);

  border-radius: .35rem;

  font-size: var(--text-sm);
}

.wide-link a {
  margin-left: auto;

  color: #4caf0a;

  font-weight: 700;
}

.wide-link > span:first-child {
  font-size: 1.1em;
}


/* =========================================================
   BLOG
========================================================= */

.section-lead {
  margin-top: -.15rem;
}

.blog-card > img {
  height: 8.5rem;
}

.blog-body {
  position: relative;

  padding-bottom: 1rem;
}

.blog-body small {
  color: #7a7d80;

  font-size: var(--text-xs);
}

.blog-body a {
  color: #51ad0d;

  font-size: var(--text-xs);

  font-weight: 800;
}

.blog-body > span {
  float: right;

  color: #74787b;

  font-size: var(--text-xs);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  min-height: 36rem;
}

.contact-rings {
  top: -5rem;
  right: -10rem;
}

.contact-grid {
  display: grid;

  grid-template-columns:
    minmax(14rem, .7fr)
    minmax(0, 1.3fr);

  gap: clamp(2rem, 6vw, 4.5rem);

  margin-top: 2rem;
}

.contact-info {
  display: grid;

  align-content: start;

  gap: 1.2rem;
}

.contact-info > div {
  display: flex;

  align-items: center;

  gap: .75rem;
}

.contact-info p {
  margin: 0;

  font-size: var(--text-sm);

  line-height: 1.5;
}

.contact-info a {
  position: relative;

  z-index: 2;

  font-size: var(--text-sm);

  word-break: break-word;
}

.contact-icon {
  width: 1.8rem;
  height: 1.8rem;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  background: var(--green);

  border-radius: 50%;

  font-size: .9rem;

  font-weight: 700;
}

.socials {
  display: flex !important;

  gap: .5rem !important;

  margin-top: .3rem;
}

.socials a {
  width: 2rem;
  height: 2rem;

  display: grid;

  place-items: center;

  border: 1px solid #dfe3df;

  border-radius: .3rem;

  font-size: var(--text-xs);

  font-weight: 800;
}

.contact-form {
  display: grid;

  gap: .75rem;

  padding: clamp(1rem, 2vw, 1.3rem);

  border: 1px solid var(--line);

  border-radius: .4rem;
}

.form-row {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: .75rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;

  padding: .8rem .9rem;

  border: 1px solid #e3e6e3;

  background: #fbfcfb;

  border-radius: .35rem;

  outline: none;

  color: var(--ink);

  font-size: var(--text-sm);

  line-height: 1.5;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #85898d;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #94dd6a;

  box-shadow:
    0 0 0 .15rem rgba(120, 239, 32, .1);
}

.contact-form textarea {
  min-height: 8rem;

  resize: vertical;
}

.form-status {
  min-height: 1.4em;

  margin: 0;

  font-size: var(--text-sm);
}

.form-status.success {
  color: var(--success);
}

.form-status.error {
  color: var(--danger);
}


/* =========================================================
   SKILLS
========================================================= */

.skills-section {
  margin-bottom: 1rem;
}

.skill-strip {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .4rem;

  margin-top: 1.75rem;
}

.skill-badge {
  min-height: clamp(2.15rem, 3vw, 2.5rem);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: .55em;

  padding:
    .55em
    clamp(.7rem, 1.2vw, 1rem);

  border-radius: .15rem;

  color: #fff;

  font-size:
    clamp(.67rem, .22vw + .62rem, .8rem);

  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;

  white-space: nowrap;

  transition:
    transform .2s ease,
    filter .2s ease;
}

.skill-badge i {
  font-size: 1.2em;

  line-height: 1;
}

.skill-badge:hover {
  transform: translateY(-.15rem);

  filter: brightness(1.08);
}


/* Skill colors */

.skill-c {
  color: #101217;
  background: #b8c7d7;
}

.skill-cpp {
  background: #0874b5;
}

.skill-java {
  background: #ef8b00;
}

.skill-python {
  background: #407fae;
}

.skill-html {
  background: #e44d26;
}

.skill-css {
  background: #1572b6;
}

.skill-js {
  color: #101217;
  background: #f0d900;
}

.skill-mongodb {
  background: #43a047;
}

.skill-express {
  background: #080a0c;
}

.skill-react {
  background: #18242d;
}

.skill-node {
  background: #3c994d;
}

.skill-next {
  background: #111;
}

.skill-tailwind {
  background: #0f172a;
}

.skill-postman {
  background: #ff6845;
}

.skill-vscode {
  background: #0879b9;
}

.skill-git {
  background: #ef4b35;
}

.skill-github {
  background: #16191d;
}

.skill-mysql {
  background: #4c7da4;
}

.skill-docker {
  background: #2496ed;
}

.skill-streamlit {
  background: #ff4b4b;
}

.skill-text-icon {
  font-size: 1.15em;

  font-weight: 900;
}


/* =========================================================
   SKILL HIGHLIGHTS
========================================================= */

.highlight-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(.75rem, 1.5vw, 1.2rem);

  margin-top: 1.5rem;
}

.highlight-grid article {
  padding: clamp(1.2rem, 2vw, 1.75rem);

  border: 1px solid var(--line);

  border-radius: .4rem;
}

.highlight-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;

  color: #52c70a;

  font-size: 1.5rem;

  font-style: normal;
}

.highlight-grid h3 {
  margin: .6rem 0 .4rem;

  font-size: var(--text-lg);

  line-height: 1.3;
}

.highlight-grid p {
  margin: 0;

  color: #6a6e72;

  font-size: var(--text-sm);

  line-height: 1.65;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 3rem;

  padding-top: 1.25rem;

  border-top: 1px solid var(--line);

  color: #686c70;

  font-size: var(--text-xs);

  line-height: 1.5;
}

.footer b {
  color: #ff4d69;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .container {
    width: min(100% - 2rem, 760px);
  }

  .section {
    width: calc(100% - 1rem);
  }


  /* Navigation */

  .nav {
    width: calc(100% - 2rem);
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    display: none;

    height: auto;

    padding: .5rem 1rem;

    background: #fff;

    border-bottom: 1px solid var(--line);

    flex-direction: column;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-link {
    width: 100%;

    min-height: 2.8rem;

    padding: .5rem;

    font-size: var(--text-xs);
  }


  /* Hero */

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }

  .hero-visual {
    order: -1;

    min-height: 25rem;
  }


  /* About */

  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .side-stats {
    grid-column: 1 / -1;

    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .journey,
  .quote {
    grid-column: 1 / -1;
  }


  /* Projects */

  .project-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* Contact */

  .contact-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .container {
    width: calc(100% - 1.5rem);
  }

  .section {
    width: calc(100% - .75rem);

    padding-block: 2.8rem;

    border-radius: .4rem;
  }


  /* Hero */

  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-actions {
    align-items: flex-start;
  }

  .stats-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* About */

  .about-grid {
    grid-template-columns: 1fr;

    gap: 1.7rem;
  }

  .about-photo-wrap {
    width: min(100%, 18rem);

    margin-inline: auto;
  }

  .side-stats {
    grid-column: auto;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey,
  .quote {
    grid-column: auto;
  }

  .timeline {
    grid-template-columns: 1fr;

    gap: 1.1rem;

    padding-left: 1.4rem;
  }

  .timeline::before {
    top: .5rem;
    bottom: .5rem;

    left: .35rem;

    width: 1px;

    height: auto;
  }

  .timeline article {
    padding-top: 0;

    padding-left: .5rem;
  }

  .timeline i {
    top: .2rem;

    left: -.05rem;
  }

  .quote {
    grid-template-columns: auto 1fr;
  }

  .quote p {
    grid-column: 2;
  }


  /* Projects */

  .filters {
    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: .3rem;

    scrollbar-width: thin;
  }

  .project-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .project-card img {
    height: 11rem;
  }

  .blog-card > img {
    height: 10rem;
  }


  /* Skills */

  .highlight-grid {
    grid-template-columns: 1fr;
  }


  /* Contact */

  .form-row {
    grid-template-columns: 1fr;
  }


  /* Footer */

  .footer {
    flex-direction: column;
  }


  /* Decorative rings */

  .hero-rings,
  .contact-rings {
    width: 21rem;

    top: -4rem;
    right: -10rem;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .container {
    width: calc(100% - 1.2rem);
  }

  .section {
    width: calc(100% - .5rem);

    padding-block: 2.5rem;
  }

  .hero-visual {
    min-height: 21rem;
  }

  .hero-visual .portrait-frame {
    width: min(15rem, 78vw);
  }

  .vertical-note {
    right: .25rem;
  }

  .scribble {
    right: .25rem;
    bottom: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .text-link {
    align-self: flex-start;
  }

  .skill-strip {
    gap: .3rem;
  }

  .skill-badge {
    font-size: clamp(.63rem, 2.2vw, .73rem);

    padding-inline: .65em;
  }

  .wide-link {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .wide-link a {
    width: 100%;

    margin-left: 0;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}