/* Homepage library + About refinements — 2026-07-19 */

/* Pull the new sky directly into the dark library ending. */
#about.about-restored {
  margin-top: -2px;
  background: #fbf9f5;
}

#about.about-restored .restored-sky {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,224,157,.9) 0 1px, transparent 3px),
    radial-gradient(circle at 33% 15%, rgba(239,195,111,.62) 0 2px, transparent 4px),
    radial-gradient(circle at 62% 7%, rgba(255,237,193,.78) 0 1px, transparent 3px),
    radial-gradient(circle at 86% 17%, rgba(242,205,132,.68) 0 2px, transparent 4px),
    linear-gradient(180deg, #100905 0%, #24150d 7%, #5d422f 18%, #a98c70 31%, #dfd1c1 45%, #f8f4ed 62%, #fbf9f5 100%);
}

/* The two declarations become letter-by-letter hanging ornaments. */
#about .restored-wordline {
  inset: 0;
  bottom: auto;
  width: 100%;
  height: 100%;
  transform: none;
  display: block;
  pointer-events: none;
  white-space: nowrap;
}

#about .restored-wordline > .hanging-phrase {
  position: absolute;
  top: clamp(268px, 35vh, 336px);
  width: clamp(250px, 25vw, 380px);
  display: flex;
  align-items: flex-start;
  gap: clamp(2px, .35vw, 6px);
  font-family: 'Karla', sans-serif;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(244, 224, 190, .88);
  text-shadow: 0 0 12px rgba(255, 220, 151, .22);
}

#about .restored-wordline > .hanging-phrase:first-child {
  right: calc(50% + clamp(168px, 16vw, 238px));
  justify-content: flex-end;
}

#about .restored-wordline > .hanging-phrase:last-child {
  left: calc(50% + clamp(168px, 16vw, 238px));
  justify-content: flex-start;
}

#about .restored-wordline .hanging-letter {
  position: relative;
  display: inline-block;
  transform: translateY(var(--drop));
}

#about .restored-wordline .hanging-letter::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 1px;
  height: calc(clamp(126px, 22vh, 212px) + var(--drop));
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(238,225,202,.08), rgba(238,225,202,.34));
}

#about .restored-wordline .hanging-space {
  display: inline-block;
  width: .72em;
}

@media (max-width: 900px) {
  #about .restored-wordline > .hanging-phrase {
    width: 29vw;
    font-size: 10px;
    gap: 2px;
  }

  #about .restored-wordline > .hanging-phrase:first-child {
    right: calc(50% + 145px);
  }

  #about .restored-wordline > .hanging-phrase:last-child {
    left: calc(50% + 145px);
  }
}

@media (max-width: 620px) {
  #about .restored-wordline {
    inset: auto 0 40px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  #about .restored-wordline > .hanging-phrase,
  #about .restored-wordline > .hanging-phrase:first-child,
  #about .restored-wordline > .hanging-phrase:last-child {
    position: relative;
    inset: auto;
    width: auto;
    justify-content: center;
    font-size: 10px;
    color: #30271f;
  }

  #about .restored-wordline .hanging-letter {
    transform: none;
  }

  #about .restored-wordline .hanging-letter::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about .restored-wordline .hanging-letter {
    transform: none;
  }
}

/* Star-thread refinement + integrated education — 2026-07-19 */
#about.about-restored .restored-sky {
  height: clamp(753px, calc(98vh - 22px), 783px);
  min-height: 753px;
}

#about.about-restored .restored-pendant {
  top: 260px;
  transform-origin: 50% -260px;
}

#about.about-restored .star-chain {
  height: 270px;
}

#about .restored-wordline > .hanging-phrase {
  top: clamp(286px, 36vh, 352px);
}

#about .restored-wordline .hanging-letter {
  --sway-x: 2px;
  transform-origin: 50% -120px;
  animation: hangingLetterSway 5.8s ease-in-out infinite;
}

#about .restored-wordline .hanging-letter:nth-child(3n+2) {
  --sway-x: -2.5px;
  animation-delay: -1.7s;
  animation-duration: 6.7s;
}

#about .restored-wordline .hanging-letter:nth-child(4n+1) {
  --sway-x: 3px;
  animation-delay: -3.1s;
  animation-duration: 7.3s;
}

#about .restored-wordline .hanging-letter::before {
  background: linear-gradient(180deg, rgba(255,235,195,.08), rgba(246,220,166,.4) 72%, rgba(255,235,195,.18));
  box-shadow: 0 0 7px rgba(255,221,152,.12);
}

#about .restored-wordline .hanging-letter::after {
  content: '✦';
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 56px);
  transform: translateX(-50%) scale(.55);
  color: #f6d993;
  font: 8px/1 serif;
  text-shadow: 0 0 6px #ffe9b6, 0 0 16px rgba(244,194,101,.9);
  animation: hangingStarGlow 3.4s ease-in-out infinite;
}

#about .restored-wordline .hanging-letter:nth-child(3n+2)::after {
  bottom: calc(100% + 92px);
  content: '·';
  font-size: 12px;
  animation-delay: -1.2s;
}

#about .restored-wordline .hanging-letter:nth-child(4n)::after {
  bottom: calc(100% + 132px);
  transform: translateX(-50%) scale(.42);
  animation-delay: -2.4s;
}

.about-education-inline {
  margin-top: clamp(64px, 8vw, 104px);
  padding: clamp(34px, 4vw, 52px) 0 8px;
  border-top: 1px solid rgba(31,30,26,.16);
}

.about-education-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.about-education-heading h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 300;
}

.about-education-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}

.about-education-list .resume-item {
  margin: 0;
  padding-right: clamp(12px, 2vw, 28px);
}

#about .resume-grid {
  grid-template-columns: 1.25fr 1fr .72fr;
}

@keyframes hangingLetterSway {
  0%, 100% { transform: translateY(var(--drop)) translateX(0) rotate(-.35deg); }
  50% { transform: translateY(var(--drop)) translateX(var(--sway-x)) rotate(.35deg); }
}

@keyframes hangingStarGlow {
  0%, 100% { opacity: .42; filter: brightness(.85); }
  50% { opacity: 1; filter: brightness(1.35); }
}

@media (max-width: 900px) {
  .about-education-list { grid-template-columns: 1fr; gap: 22px; }
  #about .resume-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  #about.about-restored .restored-sky { min-height: 740px; height: 96vh; }
  #about.about-restored .restored-pendant { top: 218px; transform-origin: 50% -218px; }
  #about.about-restored .star-chain { height: 230px; }
  #about .restored-wordline .hanging-letter { animation: none; }
  #about .restored-wordline .hanging-letter::after { display: none; }
  .about-education-heading { align-items: flex-start; flex-direction: column; }
  #about .resume-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #about .restored-wordline .hanging-letter,
  #about .restored-wordline .hanging-letter::after { animation: none; }
}/* Editorial single-page About — 2026-07-19 */
#about .restored-wordline > .hanging-phrase {
  font-size: clamp(14px, 1.28vw, 18px);
  font-weight: 600;
  letter-spacing: .095em;
  color: rgba(255, 241, 210, 1);
  text-shadow: 0 0 8px rgba(255, 235, 190, .58), 0 0 22px rgba(242, 190, 104, .28);
}

#about .restored-wordline .hanging-letter::before {
  background: linear-gradient(180deg, rgba(255, 239, 205, .14), rgba(255, 226, 170, .55) 72%, rgba(255, 240, 206, .3));
  box-shadow: 0 0 8px rgba(255, 226, 166, .2);
}

#about .about-editorial-page {
  width: min(1280px, calc(100% - 64px));
  max-width: none;
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(72px, 8vh, 96px) clamp(20px, 3vw, 44px) clamp(60px, 7vh, 88px);
  display: grid;
  grid-template-columns: minmax(270px, .68fr) minmax(0, 1.52fr);
  align-items: start;
  gap: clamp(58px, 7vw, 104px);
  box-sizing: border-box;
}

#about .about-profile-card {
  min-width: 0;
  padding-top: 3px;
}

#about .about-profile-kicker {
  margin: 0 0 26px;
  font: 500 10px/1.2 'Karla', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9a6738;
}

#about .about-profile-portrait {
  margin: 0;
}

#about .about-profile-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18 / 1;
  object-fit: cover;
  object-position: 54% 42%;
  filter: saturate(.78) contrast(.96);
}

#about .about-profile-portrait figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-top: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(31, 30, 26, .16);
  font: 400 9px/1.4 'Karla', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(31, 30, 26, .48);
}

#about .about-profile-portrait figcaption b {
  color: #1f1e1a;
  font-weight: 600;
  letter-spacing: .16em;
}

#about .about-profile-note {
  margin: 18px 0 24px;
  font: 300 12px/1.58 'Karla', sans-serif;
  color: rgba(31, 30, 26, .58);
}

#about .about-profile-meta {
  display: grid;
  gap: 16px;
}

#about .about-profile-meta > div {
  display: grid;
  grid-template-columns: minmax(112px, .8fr) 1.4fr;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 30, 26, .1);
}

#about .about-profile-meta p {
  margin: 0;
  font: 400 10px/1.55 'Karla', sans-serif;
  color: rgba(31, 30, 26, .62);
}

#about .about-editorial-copy {
  min-width: 0;
}

#about .about-introduction {
  display: grid;
  grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 58px);
}

#about .about-introduction > .resume-no {
  padding-top: 11px;
}

#about .about-editorial-copy h2 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: clamp(44px, 4.5vw, 65px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}

#about .about-lede {
  grid-column: 2;
  max-width: 600px;
  margin: 24px 0 0;
  font: 400 clamp(16px, 1.4vw, 20px)/1.48 'Fraunces', serif;
  color: #73563d;
}

#about .about-editorial-page .about-copy {
  grid-column: 2;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font: 300 clamp(13px, 1vw, 15px)/1.62 'Karla', sans-serif;
  color: rgba(31, 30, 26, .7);
}

#about .about-editorial-page .about-copy p {
  max-width: 690px;
  margin: 0;
}

#about .about-detail-grid {
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid rgba(31, 30, 26, .18);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(38px, 5vw, 70px);
}

#about .about-editorial-page .about-education-inline,
#about .about-experience-inline {
  margin: 0;
  padding: 0;
  border: 0;
}

#about .about-detail-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

#about .about-detail-heading h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: clamp(25px, 2.2vw, 33px);
  font-weight: 300;
}

#about .about-editorial-page .about-education-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

#about .about-experience-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

#about .about-editorial-page .resume-item {
  margin: 0 0 17px;
  gap: 5px 12px;
  font-size: 11px;
}

#about .about-editorial-page .resume-item time {
  white-space: nowrap;
  font-size: 8px;
}

#about .about-editorial-page .resume-item span {
  line-height: 1.45;
}

@media (max-width: 1080px) {
  #about .about-editorial-page {
    width: min(100% - 40px, 1080px);
    grid-template-columns: minmax(230px, .64fr) minmax(0, 1.36fr);
    gap: 44px;
  }
  #about .about-introduction { grid-template-columns: 90px 1fr; column-gap: 24px; }
  #about .about-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  #about .about-experience-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  #about .about-editorial-page {
    width: min(100% - 36px, 680px);
    min-height: auto;
    padding: 68px 0 76px;
    grid-template-columns: 1fr;
    gap: 56px;
  }
  #about .about-profile-portrait { max-width: 430px; }
  #about .about-introduction { grid-template-columns: 1fr; }
  #about .about-introduction > .resume-no { padding: 0 0 18px; }
  #about .about-lede,
  #about .about-editorial-page .about-copy { grid-column: 1; }
  #about .about-experience-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #about .restored-wordline > .hanging-phrase,
  #about .restored-wordline > .hanging-phrase:first-child,
  #about .restored-wordline > .hanging-phrase:last-child {
    font-size: 11px;
    color: #30271f;
    text-shadow: none;
  }
  #about .about-profile-meta > div { grid-template-columns: 1fr; gap: 8px; }
  #about .about-profile-portrait figcaption { align-items: flex-start; flex-direction: column; }
}
/* User-directed About polish v2 — clearer hanging letters + compact 01/02/03 page */
#about .restored-wordline > .hanging-phrase {
  color: rgba(255, 246, 224, .98);
  text-shadow: 0 1px 2px rgba(76, 43, 23, .32), 0 0 10px rgba(255, 236, 195, .62), 0 0 24px rgba(242, 190, 104, .3);
}

#about .restored-wordline .hanging-letter::before {
  background: linear-gradient(180deg, rgba(255, 242, 217, .2), rgba(255, 229, 181, .64) 72%, rgba(255, 243, 218, .34));
  box-shadow: 0 0 8px rgba(255, 228, 176, .24);
}

@media (min-width: 1081px) {
  #about .about-editorial-page {
    width: min(1120px, calc(100% - 96px));
    min-height: 100vh;
    padding: clamp(86px, 9vh, 104px) 0 clamp(58px, 7vh, 76px);
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: clamp(66px, 6.2vw, 88px);
    align-content: center;
  }

  #about .about-profile-kicker { margin-bottom: 20px; }
  #about .about-profile-portrait img {
    aspect-ratio: 1.36 / 1;
    object-position: 54% 42%;
  }
  #about .about-profile-note { margin: 15px 0 19px; line-height: 1.5; }
  #about .about-profile-meta { gap: 12px; }
  #about .about-profile-meta > div { padding-top: 11px; }

  #about .about-introduction {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 30px;
  }
  #about .about-editorial-copy h2 { font-size: clamp(41px, 3.65vw, 52px); line-height: 1; }
  #about .about-lede { margin-top: 18px; font-size: clamp(15px, 1.25vw, 18px); }
  #about .about-editorial-page .about-copy { margin-top: 17px; font-size: clamp(12px, .93vw, 13.5px); line-height: 1.55; }

  #about .about-detail-grid {
    margin-top: clamp(27px, 3.5vh, 38px);
    padding-top: clamp(22px, 3vh, 30px);
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(34px, 4vw, 54px);
  }
  #about .about-detail-heading { margin-bottom: 18px; }
  #about .about-detail-heading h3 { font-size: clamp(25px, 2vw, 29px); }
  #about .about-editorial-page .resume-item { margin-bottom: 13px; }
  #about .about-experience-list { gap: 0 22px; }
}

/* Tabbed About profile v3 — reference-led compact navigation */
#about .about-tabbed-page {
  width: min(1080px, calc(100% - 96px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(94px, 10vh, 116px) 0 clamp(72px, 8vh, 94px);
  display: grid;
  grid-template-columns: minmax(286px, 338px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(58px, 6vw, 82px);
  row-gap: clamp(46px, 5vh, 62px);
  align-content: center;
  box-sizing: border-box;
}

#about .about-mini-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 42px);
  min-height: 24px;
}

#about .about-mini-nav button {
  appearance: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 4px;
  background: transparent;
  color: rgba(31, 30, 26, .58);
  font: 500 10px/1.2 'Karla', sans-serif;
  letter-spacing: .02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

#about .about-mini-nav button:hover,
#about .about-mini-nav button:focus-visible { color: #1f1e1a; }
#about .about-mini-nav button:focus-visible { outline: 1px solid #9a6738; outline-offset: 5px; }
#about .about-mini-nav button[aria-selected="true"] { color: #a76338; border-color: #a76338; }

#about .about-tabbed-page .about-profile-card { grid-column: 1; grid-row: 2; padding: 0; }
#about .about-tabbed-page .about-profile-portrait img { aspect-ratio: 1.35 / 1; object-fit: cover; object-position: 50% 50%; }
#about .about-tabbed-page .about-profile-portrait figcaption { margin-top: 11px; padding-bottom: 13px; }

#about .about-profile-contact { margin-top: 21px; display: grid; gap: 0; }
#about .about-profile-contact > p { margin: 0 0 9px; color: rgba(31,30,26,.45); font: 500 9px/1.2 'Karla',sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#about .about-profile-contact a,
#about .about-profile-contact .about-contact-row,
#about .about-contact-panel-links a,
#about .about-contact-panel-links .about-contact-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(31,30,26,.11);
  color: #1f1e1a;
  text-decoration: none;
}
#about .about-profile-contact a span,
#about .about-profile-contact .about-contact-row span,
#about .about-contact-panel-links a span,
#about .about-contact-panel-links .about-contact-row span { color: rgba(31,30,26,.42); font: 500 8px/1.4 'Karla',sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#about .about-profile-contact a b,
#about .about-profile-contact .about-contact-row b,
#about .about-contact-panel-links a b,
#about .about-contact-panel-links .about-contact-row b { min-width: 0; overflow-wrap: anywhere; font: 400 10px/1.4 'Karla',sans-serif; }
#about .about-profile-contact a:hover b,
#about .about-contact-panel-links a:hover b { color: #9a6738; }

#about .about-tab-stage { grid-column: 2; grid-row: 2; min-width: 0; align-self: start; }
#about .about-tab-panel[hidden] { display: none !important; }
#about .about-tab-panel.is-active { animation: aboutPanelIn .34s ease both; }
#about .about-panel-kicker { margin: 0 0 24px; color: rgba(31,30,26,.42); font: 500 9px/1.2 'Karla',sans-serif; letter-spacing: .18em; text-transform: uppercase; }
#about .about-tab-panel h2 { margin: 0; font-family: 'Fraunces',serif; font-size: clamp(31px,3.2vw,44px); font-weight: 300; line-height: 1; letter-spacing: -.025em; }
#about .about-panel-lede { max-width: 610px; margin: 20px 0 0; color: #6e5138; font: 400 clamp(15px,1.25vw,18px)/1.5 'Fraunces',serif; }
#about .about-panel-copy { max-width: 650px; margin-top: 22px; display: grid; gap: 12px; color: rgba(31,30,26,.68); font: 300 13px/1.62 'Karla',sans-serif; }
#about .about-panel-copy p { margin: 0; }

#about .about-compact-resume { max-width: 650px; margin-top: 31px; padding-top: 21px; border-top: 1px solid rgba(31,30,26,.15); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
#about .about-compact-resume article > span { display: block; margin-bottom: 8px; color: rgba(31,30,26,.42); font: 500 8px/1.2 'Karla',sans-serif; letter-spacing: .15em; text-transform: uppercase; }
#about .about-compact-resume p { margin: 0; color: rgba(31,30,26,.62); font: 300 10px/1.55 'Karla',sans-serif; }
#about .about-compact-resume b { color: #1f1e1a; font-weight: 500; }

#about .about-project-list { max-width: 680px; margin-top: 31px; border-bottom: 1px solid rgba(31,30,26,.13); }
#about .about-project-list a { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 58px; border-top: 1px solid rgba(31,30,26,.13); color: #1f1e1a; text-decoration: none; }
#about .about-project-list em { color: rgba(31,30,26,.36); font: 500 8px/1 'Karla',sans-serif; font-style: normal; letter-spacing: .12em; }
#about .about-project-list span { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
#about .about-project-list b { font: 400 19px/1.2 'Fraunces',serif; }
#about .about-project-list small { color: rgba(31,30,26,.45); font: 400 9px/1.2 'Karla',sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#about .about-project-list i { color: #9a6738; font: 400 12px/1 'Karla',sans-serif; font-style: normal; transition: transform .2s ease; }
#about .about-project-list a:hover i { transform: translate(3px,-3px); }

#about .about-experience-list { display: block; max-width: 680px; margin-top: 31px; border-bottom: 1px solid rgba(31,30,26,.13); }
#about .about-experience-list article { min-height: 64px; padding: 12px 0; border-top: 1px solid rgba(31,30,26,.13); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; box-sizing: border-box; }
#about .about-experience-list article > span { min-width: 0; display: grid; gap: 5px; }
#about .about-experience-list b { color: #1f1e1a; font: 500 13px/1.45 'Karla',sans-serif; }
#about .about-experience-list small { color: rgba(31,30,26,.5); font: 400 10px/1.45 'Karla',sans-serif; letter-spacing: .02em; }
#about .about-experience-list time { color: #9a6738; font: 500 9px/1.3 'Karla',sans-serif; letter-spacing: .05em; white-space: nowrap; }

#about .about-text-link { display: inline-block; margin-top: 31px; padding-bottom: 4px; border-bottom: 1px solid rgba(154,103,56,.45); color: #7c4e2e; font: 500 10px/1.4 'Karla',sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
#about .about-contact-panel-links { max-width: 590px; margin-top: 34px; border-bottom: 1px solid rgba(31,30,26,.11); }
#about .about-contact-panel-links a,
#about .about-contact-panel-links .about-contact-row { grid-template-columns: 92px minmax(0,1fr); padding: 15px 0; }

@keyframes aboutPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  #about .about-tabbed-page { width: min(100% - 48px, 760px); grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); column-gap: 42px; }
  #about .about-mini-nav { gap: 20px; }
  #about .about-project-list span { display: block; }
  #about .about-experience-list article { grid-template-columns: 1fr; gap: 7px; }
  #about .about-project-list small { display: block; margin-top: 4px; }
}

@media (max-width: 680px) {
  #about .about-tabbed-page { width: min(100% - 36px, 560px); min-height: auto; padding: 76px 0 84px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 42px; }
  #about .about-mini-nav { grid-column: 1; grid-row: 1; gap: 25px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
  #about .about-mini-nav::-webkit-scrollbar { display: none; }
  #about .about-mini-nav button { flex: 0 0 auto; }
  #about .about-tabbed-page .about-profile-card { grid-column: 1; grid-row: 2; }
  #about .about-tab-stage { grid-column: 1; grid-row: 3; }
  #about .about-compact-resume { grid-template-columns: 1fr; gap: 18px; }
  #about .about-project-list span { display: block; }
  #about .about-experience-list article { grid-template-columns: 1fr; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) { #about .about-tab-panel.is-active { animation: none; } }