/* Two themes: dark (default, gold accent) and light (Pantone 16-2124 TCX Pink Carnation accent) */
.section-title {
  color: var(--accent-text-lg);
}

:root{
  color-scheme:dark;
  --page-bg:#0a0a0a;
  --content-bg:#111111;
  --sidebar-bg:#161616;
  --card-bg:#1a1a1a;
  --card-hover-bg:#222222;
  --card-border:rgba(var(--overlay-rgb),0.05);
  --accent:#d4a24c;
  --accent-rgb:212,162,76;
  --accent-strong:#e8c86a;
  /* accent used as text; separate so light mode can darken it for contrast */
  --accent-text:var(--accent);
  --accent-text-lg:var(--accent);
  --text:#e8e4de;
  --text-strong:#ffffff;
  --muted:#8a867f;
  --overlay-rgb:255,255,255;
  --shadow-color:rgba(0,0,0,0.4);
  --logo-filter:brightness(0) invert(1) opacity(0.85);
  --maxw:1200px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --page-bg:#faf7f5;
  --content-bg:#fffdfc;
  --sidebar-bg:#f3eeec;
  --card-bg:#ffffff;
  --card-hover-bg:#fff4f7;
  --accent:#ed7a9e;
  --accent-rgb:237,122,158;
  --accent-strong:#d9587f;
  --accent-text:#ba4068;     /* >=4.5:1 on every light surface (small text) */
  --accent-text-lg:#d8608b;  /* >=3:1 on every light surface (headings, large text) */
  --text:#2b2427;
  --text-strong:#1a1416;
  --muted:#7d7478;
  --overlay-rgb:0,0,0;
  --shadow-color:rgba(60,30,40,0.08);
  --logo-filter:brightness(0) opacity(0.7);
}
*{box-sizing:border-box}
html,body{
  min-height:100%;
  margin:0;
  font-family: Lora, Georgia, serif;
  background:var(--page-bg);
  color:var(--text);
}
a{color:var(--accent-text);text-decoration:none}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar-bg);padding:32px 24px;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),0.3) transparent;border-right:1px solid rgba(var(--accent-rgb),0.08)}
.brand p{font-family:"Copperplate",serif;font-weight:700;font-size:1.8rem;color:var(--accent-text-lg);margin:0}
.brand span{display:block;color:var(--muted);font-size:0.9rem;letter-spacing:2px;margin-top:6px}
.brand-divider{height:1px;background:rgba(var(--accent-rgb),0.2);margin:14px 0 18px;border-radius:2px}
nav{margin-top:8px;display:flex;flex-direction:column;gap:12px}
nav a{padding:8px 12px;border-radius:6px;color:var(--text);font-weight:400;transition:all .2s ease;position:relative}
nav a:hover{color:var(--accent-text);padding-left:14px}
nav a.active{color:var(--accent-text);background:rgba(var(--accent-rgb),0.12);padding-left:14px;box-shadow:inset 4px 0 0 var(--accent)}
nav a:focus{outline:3px solid rgba(var(--accent-rgb),0.12)}
.profile-card{background:rgba(var(--overlay-rgb),0.03);border:1px solid rgba(var(--accent-rgb),0.08);border-radius:20px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
.profile-card-top{display:flex;align-items:center;gap:14px}
.profile-card-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);box-shadow:0 0 0 8px rgba(var(--accent-rgb),0.08)}
.profile-card-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.profile-card-info p{margin:0;font-size:1.05rem;font-weight:700;color:var(--accent-text)}
.profile-card-info span{display:block;color:var(--muted);font-size:0.92rem;margin-top:4px}
.profile-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.profile-links li a{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:0.95rem;transition:color .18s ease,transform .18s ease}
.profile-links li a svg{width:18px;height:18px;fill:var(--accent);flex-shrink:0}
.profile-links li a:hover{color:var(--accent-text);transform:translateX(2px)}
.profile-divider{height:3px;width:60px;background:var(--accent);border-radius:999px;margin:0 auto;opacity:.95}
.contact{margin-top:22px}
.contact h4{color:var(--text);margin:0 0 8px 0}
.contact-list{list-style:none;padding:0;margin:0;display:block}
.contact-list li{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--text);transition:transform .12s ease}
.contact-list li .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
.contact-list li a{color:var(--text);display:inline-block}
.contact-list li:hover{color:var(--accent-text);transform:translateX(2px)}
.contact-list li:hover a{color:var(--accent-text);text-decoration:underline}
.contact-list li .emoji{font-size:1.05rem}
.content{padding:48px;max-width:var(--maxw);margin:0 auto;background:linear-gradient(180deg,transparent,transparent)}
.hero-section{
  position:relative;
  min-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:80px 20px 120px;
}
.hero-copy{max-width:760px;margin:0 auto}
.hero-photo{width:180px;height:180px;margin:0 auto;border-radius:50%;border:4px solid var(--accent);box-shadow:0 0 0 8px rgba(var(--accent-rgb),0.12);overflow:hidden;transition:transform .3s ease}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.hero-photo:hover{transform:scale(1.05)}
.hero-name{font-size:3.6rem;color:var(--accent-text-lg);margin:24px 0 12px;transition:text-shadow .3s ease}
.hero-name:hover{text-shadow:0 0 30px rgba(var(--accent-rgb),0.35)}
.hero-subtitle{margin:0 auto;font-size:1.05rem;color:var(--text);opacity:.9;max-width:720px;line-height:1.7}
.hero-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
.hero-button{display:inline-flex;align-items:center;justify-content:center;min-width:170px;padding:14px 26px;border-radius:999px;font-weight:600;transition:transform .24s ease,box-shadow .24s ease,background .24s ease,color .24s ease}
.hero-button-solid{background:var(--accent);color:#0a0a0a;border:1px solid var(--accent)}
.hero-button-outline{background:transparent;color:var(--accent-text);border:1px solid var(--accent)}
.hero-button:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(var(--accent-rgb),0.18)}
.hero-button-outline:hover{background:rgba(var(--accent-rgb),0.08);color:var(--accent-text);border-color:var(--accent-strong)}
.hero-arrow{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
.hero-arrow span{font-size:2rem;color:var(--accent-text-lg);animation:bounce 1.8s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.panel{background:var(--content-bg);padding:28px;border-radius:12px;border:1px solid rgba(var(--overlay-rgb),0.02);box-shadow:0 8px 32px var(--shadow-color);margin-bottom:28px; position:relative; z-index: 1;}
.section-title{color:var(--accent-text-lg);font-size:2.2rem;margin:0 0 16px 0;letter-spacing:1px}
.section-underline{width:60px;height:3px;background:var(--accent);border-radius:3px;margin-bottom:18px}
.section-divider{width:80%;height:1px;margin:20px auto;background:var(--accent);opacity:.3;border:none}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.project-card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:24px 20px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.project-card h2{margin:0 0 8px 0;color:var(--text);font-size:1.3rem}
.project-card p{margin:0;color:var(--muted);font-size:0.95rem}
.project-card:hover{border-color:var(--accent);box-shadow:0 12px 48px rgba(var(--accent-rgb),0.08);transform:translateY(-6px);background:var(--card-hover-bg)}
.project-card:hover h2{color:var(--accent-text-lg)}
.project-card .card-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:0;color:var(--accent-text-lg);font-size:1.4rem;transition:opacity .22s ease,right .22s ease}
.project-card:hover .card-arrow{opacity:1;right:12px}
.project-hero{background:var(--card-bg);padding:32px;border-radius:12px;border:1px solid var(--card-border)}
.project-hero h1{color:var(--accent-text-lg);font-size:2.8rem;margin-bottom:24px}
.project-hero h2{color:var(--accent-text-lg);font-size:1.8rem;margin-top:32px}
.project-hero h3{color:var(--accent-text-lg);font-size:1.3rem}
.project-hero p{color:var(--text);font-size:1.05rem;line-height:1.7}
.project-hero img{max-width:100%;border-radius:8px;border:1px solid rgba(var(--accent-rgb),0.2)}
.back-btn{display:inline-block;margin-top:40px;padding:12px 24px;border-radius:8px;background:var(--accent);color:#0a0a0a;font-weight:600;transition:transform .12s ease,background .12s ease}
.back-btn:hover{background:var(--accent-strong);transform:scale(1.02)}
#back-to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#0a0a0a;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px var(--shadow-color);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;z-index:999}
#back-to-top.show{opacity:1;transform:translateY(0)}
.page-ornaments{position:fixed;inset:0;pointer-events:none}
.glow-ring{position:absolute;border-radius:999px;filter:blur(36px);opacity:.18}
.ring-1{width:420px;height:420px;background:radial-gradient(circle,rgba(var(--accent-rgb),0.12),transparent);left:6%;top:6%;animation:float-slow 12s ease-in-out infinite}
.ring-2{width:260px;height:260px;background:radial-gradient(circle,rgba(var(--accent-rgb),0.08),transparent);right:6%;bottom:12%;animation:float-slow 14s ease-in-out infinite}
@keyframes float-slow{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.will-reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.in-view{opacity:1;transform:none}
@media (max-width:1024px){.project-grid{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:220px 1fr}.sidebar{padding:28px 16px}}
@media (max-width:768px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto;width:100%;border-right:none;border-bottom:1px solid rgba(var(--overlay-rgb),0.03)}.project-grid{grid-template-columns:1fr}.content{padding:24px}}
a:focus{outline:3px solid rgba(var(--accent-rgb),0.12);outline-offset:3px}

#research, #education {
  min-height: 50vh;
}
.venturi-images {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.venturi-images img {
  display: block;
  width: 60%;
  max-width: 700px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb),0.2);
}

.project-page {
  padding: clamp(28px, 4vw, 42px);
}

.project-page > h1 {
  margin: 0 0 18px;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text);
}

.project-page > h2 {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--accent-text-lg);
}

.project-page p,
.project-page li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
}

.project-page .project-summary {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--text);
}

.project-page .project-image {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.project-page .project-image img,
.project-page img {
  display: block;
  width: 60%;
  max-width: 700px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb),0.2);
}

.project-page ul {
  padding-left: 1.5rem;
  margin: 12px 0 0;
}

.project-page li + li {
  margin-top: 8px;
}

.project-page .back-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--accent-text);
}

.responsive-image {
  width: 100%;
  max-width: 400px;    /* Adjust this number to control max size */
  height: auto;        /* Keeps aspect ratio correct */
  border-radius: 12px; /* Matches your theme */
  border: 1px solid rgba(var(--accent-rgb),0.2);
}
.skills-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 20px 0 28px 0;
  align-items: center;
}

/* logos show in their real brand colors */
.skills-logos img {
  height: 52px;
  width: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.skills-logos img:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* black-only wordmarks (LaTeX) take the theme's text color so they stay visible on dark */
.skills-logos img.logo-mono {
  filter: var(--logo-filter);
}

/* wide wordmarks (COMSOL) would be huge at logo height */
.skills-logos img.logo-wordmark {
  height: 20px;
}

.lab-skills {
  gap: 32px;
  align-items: flex-start;
}

.lab-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lab-icon {
  width: 60px;
  height: 60px;
  overflow: visible;
  transition: transform 0.2s ease;
}

.lab-skill:hover .lab-icon {
  transform: scale(1.08);
}

.lab-icon * {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lab-icon .hl { stroke: var(--accent); }
.lab-icon .fl { fill: rgba(var(--accent-rgb),0.35); stroke: none; }
.lab-icon .fl.hl { stroke: var(--accent); }
.lab-icon .dash { stroke-dasharray: 3 3; }
.lab-icon .faint { opacity: 0.5; }
/* =========================================
   SIDEBAR ACHIEVEMENTS SECTION
   ========================================= */
.sidebar-achievements {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--accent-rgb),0.15); /* Subtle gold divider */
}

.achievements-title {
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}

.achievement-item {
  margin-bottom: 16px;
}

.achievement-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.achievement-name {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.achievement-percent {
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
}

/* The empty track */
.achievement-bar {
  width: 100%;
  height: 4px;
  background: rgba(var(--overlay-rgb),0.06); /* Faint white track */
  border-radius: 999px;
  overflow: hidden;
}

/* The gold fill */
.achievement-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0%; /* Default width */
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth animation effect */
}
/* Force images to display inside extracurricular cards */
.extracard-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: rgba(var(--overlay-rgb),0.05);
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--accent-rgb),0.1);
  overflow: hidden;
}

.extracard-img img {
  height: 100%;
  width: auto;
  object-fit: contain;
  padding: 10px;
}

/* Text labels for skills without a stable logo (Technical Skills section) */
.skill-tag {
  color: var(--text-strong);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Education section: school heading and semester term labels */
.edu-school {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: underline;
}

.edu-term {
  list-style: none;
  font-weight: 700;
  text-decoration: underline;
  margin-top: 12px;
  margin-bottom: 4px;
}

.edu-term:first-child {
  margin-top: 0;
}

/* Contact block on project-page sidebar (previously unstyled) */
.sidebar-extras {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--accent-rgb),0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-extras p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.sidebar-extras a {
  color: var(--text);
  font-size: 0.95rem;
}

.sidebar-extras a:hover {
  color: var(--accent-text);
}

/* Logo image wrapper on extracurricular detail pages (oc/ssa/tcl) */
.extracurricular-image {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.extracurricular-image img {
  max-width: 300px;
  background: rgba(var(--overlay-rgb),0.05);
  padding: 20px;
  border-radius: 12px;
}
/* View controls (fixed, top-right on every page): story/sidebar layout + light/dark theme */
.view-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.view-toggle {
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.35);
  background: var(--sidebar-bg);
  color: var(--accent-text);
  font: 600 0.85rem/1 Lora, Georgia, serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow-color);
  transition: transform .2s ease, border-color .2s ease;
}

.view-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.view-toggle:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb),0.4);
  outline-offset: 3px;
}

.view-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(20deg);
}

/* each toggle shows the icon + label for the current state only */
.theme-toggle .icon-sun,
.theme-toggle .theme-label-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .theme-label-dark { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .theme-label-light { display: inline; }

.layout-toggle .icon-sidebar,
.layout-toggle .layout-label-sidebar { display: none; }
:root[data-layout="sidebar"] .layout-toggle .icon-story,
:root[data-layout="sidebar"] .layout-toggle .layout-label-story { display: none; }
:root[data-layout="sidebar"] .layout-toggle .icon-sidebar { display: block; }
:root[data-layout="sidebar"] .layout-toggle .layout-label-sidebar { display: inline; }

/* phones: icon-only pills; labels stay readable to screen readers */
@media (max-width: 560px) {
  .view-controls { top: 12px; right: 12px; gap: 8px; }
  .view-toggle { padding: 0 11px; }
  .view-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.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;
}

/* Resume section: action buttons + clickable page preview */
.resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0 24px;
}

.resume-preview {
  display: block;
  max-width: 480px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),0.25);
  box-shadow: 0 10px 30px var(--shadow-color);
  transition: transform .25s ease, box-shadow .25s ease;
}

.resume-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb),0.18);
}

.resume-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Experience / research entries: title + role on the left, dates + place on the right */
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.entry-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.entry-role {
  margin: 4px 0 0;
  font-style: italic;
  color: var(--muted);
}

.entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.92rem;
  color: var(--accent-text);
  white-space: nowrap;
}

.entry-meta span + span {
  color: var(--muted);
  font-style: italic;
}

.entry-points {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.65;
}

.entry-points li + li {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .entry-meta { align-items: flex-start; }
}

/* Site footer (every page) */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 40px;
  padding: 22px 4px 8px;
  border-top: 1px solid rgba(var(--accent-rgb),0.18);
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  color: var(--muted);
  transition: color .2s ease;
}

.footer-links a:hover {
  color: var(--accent-text);
}

/* Respect the OS "reduce motion" setting: stop floating shapes, bounces, and fades */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .will-reveal { opacity: 1; transform: none; }
}

/* =========================================
   STORY VIEW (default): no sidebar; every section is an open, full-screen chapter.
   Sidebar view (data-layout="sidebar") keeps the original card layout.
   ========================================= */
:root[data-layout="story"] .layout { grid-template-columns: 1fr; }
:root[data-layout="story"] .sidebar { display: none; }
:root[data-layout="story"] .section-divider { display: none; }

/* Chapter backdrop (story.js): transparent on the first page so the molecules show,
   then fades in and crossfades to each chapter's static color as you move between pages. */
.story-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-color: var(--page-bg);
  transition: opacity 0.9s ease, background-color 0.9s ease;
}
.story-backdrop.is-on { opacity: 1; }
:root[data-layout="sidebar"] .story-backdrop { display: none; }

:root[data-layout="story"] main .panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 14vh 0 10vh;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* the older #research/#education min-height rule outranks the class selector above */
:root[data-layout="story"] #research,
:root[data-layout="story"] #education { min-height: 100vh; }

/* chapter heading: big serif title over a thin rule (drawn by ::after so it can animate) */
:root[data-layout="story"] main .panel > h1 {
  position: relative;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1.1;
  padding-bottom: 14px;
  margin: 0 0 40px;
}
:root[data-layout="story"] main .panel > h1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(var(--overlay-rgb),0.28);
  transform-origin: left center;
}

/* Chapter entrance: the heading rises into place, its rule draws left to right, then the
   rest of the chapter fades up in a short cascade. Triggered by .in-view (script.js). */
:root[data-layout="story"] main .panel.will-reveal { opacity: 1; transform: none; }
:root[data-layout="story"] main .panel.will-reveal > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
:root[data-layout="story"] main .panel.will-reveal > h1 { transform: translateY(44px); }
:root[data-layout="story"] main .panel.will-reveal > h1::after {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1) 0.2s;
}
:root[data-layout="story"] main .panel.in-view > *,
:root[data-layout="story"] main .panel.in-view > h1 { opacity: 1; transform: none; }   /* > h1 matches the start rule's specificity */
:root[data-layout="story"] main .panel.in-view > h1::after { transform: scaleX(1); }
:root[data-layout="story"] main .panel.in-view > :nth-child(2) { transition-delay: 0.25s; }
:root[data-layout="story"] main .panel.in-view > :nth-child(3) { transition-delay: 0.38s; }
:root[data-layout="story"] main .panel.in-view > :nth-child(4) { transition-delay: 0.5s; }
:root[data-layout="story"] main .panel.in-view > :nth-child(n+5) { transition-delay: 0.6s; }

/* =========================================
   ABOUT: photo beside a "Hello," story (both views)
   ========================================= */
.about-story {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 1.2fr;
  gap: 40px;
  align-items: start;
}

.about-photo { margin: 0; }

.about-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 62%;
  border-radius: 6px;
}

.about-hello {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 400;
  color: var(--text-strong);
}

.about-text p {
  margin: 0 0 16px;
  line-height: 1.75;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 24px;
}

.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
  transition: color .2s ease;
}

.about-links a:hover { color: var(--accent-text); }

.about-links svg {
  width: 20px;
  height: 20px;
  fill: var(--accent);
}

@media (max-width: 768px) {
  .about-story { grid-template-columns: 1fr; gap: 28px; }
  .about-photo { max-width: 340px; }
}

/* =========================================
   ABOUT MOTION (after royleejr.com): the portrait is unveiled by a line that sweeps
   across and then drops open while the photo settles from a slight zoom; "Hello," and
   the story slide in from the left; the social links glide in one by one.
   Hovering the photo pushes in with a small tilt. Triggered by .in-view (script.js).
   ========================================= */
.about-photo {
  overflow: hidden;
  border-radius: 6px;
}
.about-photo img { transition: transform 0.6s ease; }
.about-photo:hover img { transform: scale(1.1) rotate(2deg); }

.about-panel.will-reveal .about-photo { clip-path: inset(0 100% 100% 0); }
.about-panel.in-view .about-photo { animation: aboutImageIn 1.6s cubic-bezier(.65,0,.35,1) 0.35s both; }
.about-panel.in-view .about-photo img { animation: aboutImageSettle 2.4s cubic-bezier(.2,.7,.2,1) 0.35s backwards; }

@keyframes aboutImageIn {
  0%   { clip-path: inset(0 100% 99.4% 0); }
  45%  { clip-path: inset(0 0 99.4% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes aboutImageSettle {
  from { transform: scale(1.25); }
  to   { transform: none; }
}

.about-panel.will-reveal .about-hello,
.about-panel.will-reveal .about-text p,
.about-panel.will-reveal .about-list li,
.about-panel.will-reveal .about-links a {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1.1s ease-in-out, transform 1.1s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.about-panel.in-view .about-hello,
.about-panel.in-view .about-text p,
.about-panel.in-view .about-list li,
.about-panel.in-view .about-links a { opacity: 1; transform: none; }

.about-panel.in-view .about-hello { transition-delay: 0.9s; }
.about-panel.in-view .about-text p:nth-of-type(1) { transition-delay: 1.15s; }
.about-panel.in-view .about-text p:nth-of-type(2) { transition-delay: 1.25s; }
.about-panel.in-view .about-text p:nth-of-type(3) { transition-delay: 1.35s; }
.about-panel.in-view .about-text p:nth-of-type(4) { transition-delay: 1.45s; }
.about-panel.in-view .about-text p:nth-of-type(5) { transition-delay: 1.55s; }
.about-panel.in-view .about-list li { transition-delay: calc(1.5s + var(--i, 0) * 0.06s); }
.about-panel.in-view .about-text p:nth-of-type(6) { transition-delay: 1.85s; }
/* like the reference, the icons arrive last-first, each half a beat apart */
.about-panel.in-view .about-links a:nth-child(3) { transition-delay: 1.8s, 1.8s, 0s; }
.about-panel.in-view .about-links a:nth-child(2) { transition-delay: 2.15s, 2.15s, 0s; }
.about-panel.in-view .about-links a:nth-child(1) { transition-delay: 2.5s, 2.5s, 0s; }
.about-links a:hover svg { transform: translateY(-3px); }
.about-links svg { transition: transform .25s ease; }

/* story view: the About chapter uses the motions above instead of the generic fade-up */
:root[data-layout="story"] main .panel.will-reveal > .about-story { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .about-panel .about-photo { clip-path: none; }
  .about-panel .about-hello,
  .about-panel .about-text p,
  .about-panel .about-list li,
  .about-panel .about-links a { opacity: 1; transform: none; }
}

/* =========================================
   PROJECT CHAPTERS on the homepage (one full page per project)
   ========================================= */
.chapter-kicker {
  margin: 0 0 10px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.project-page .project-image[hidden] { display: none; }

/* =========================================
   PROJECT STORY: media beside the write-up, the same way the About chapter pairs its
   photo with the story. Used on the homepage chapters and on each standalone project page.
   ========================================= */
.project-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.project-chapter.is-flipped .project-story { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.project-chapter.is-flipped .project-media { order: 2; }

.project-media {
  position: relative;
  margin: 0;
  justify-self: center;
  overflow: hidden;
  border-radius: 6px;
}
.project-page .project-media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  border: none;
  border-radius: 0;
  transition: transform 0.6s ease, opacity 0.9s ease;
}
.project-media:hover img,
.project-media:hover video { transform: scale(1.06) rotate(1deg); }

/* drawings and screenshots sit whole on a soft panel instead of being cropped */
.project-media.is-drawing { background: #fff; padding: 12px; }
.project-media.is-drawing:hover img { transform: scale(1.03); }

/* several images: stacked in one frame and crossfaded (script.js), with progress bars to pick one */
.project-media.is-gallery { width: 100%; aspect-ratio: 16 / 10; max-height: 62vh; }
.project-page .project-media.is-gallery img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  max-height: none;
  object-fit: contain;
  opacity: 0;
}
.project-page .project-media.is-gallery img.is-shown { opacity: 1; }

/* line-art frame for a project without a photo */
.project-media.is-art {
  width: min(100%, 360px);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.project-art {
  width: 72%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s ease;
}
.project-media.is-art:hover .project-art { transform: scale(1.06) rotate(-2deg); }

.project-text > :first-child { margin-top: 0; }
.project-page .project-text > h2 { margin: 22px 0 8px; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--accent-text-lg); }
.project-page .project-text .project-summary { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.project-page .project-text p,
.project-page .project-text li { font-size: 1rem; line-height: 1.65; }

/* motion, same as About: the media sweeps open and settles, the write-up slides in */
.project-page.will-reveal .project-media { clip-path: inset(0 100% 100% 0); }
.project-page.in-view .project-media { animation: aboutImageIn 1.6s cubic-bezier(.65,0,.35,1) 0.3s both; }
.project-page.in-view .project-media img,
.project-page.in-view .project-media video,
.project-page.in-view .project-art { animation: aboutImageSettle 2.4s cubic-bezier(.2,.7,.2,1) 0.3s backwards; }
.project-page.will-reveal .project-text > * {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1.1s ease-in-out, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.project-page.in-view .project-text > * { opacity: 1; transform: none; }
.project-page.in-view .project-text > :nth-child(1) { transition-delay: 0.8s; }
.project-page.in-view .project-text > :nth-child(2) { transition-delay: 0.95s; }
.project-page.in-view .project-text > :nth-child(3) { transition-delay: 1.1s; }
.project-page.in-view .project-text > :nth-child(4) { transition-delay: 1.25s; }
.project-page.in-view .project-text > :nth-child(n+5) { transition-delay: 1.4s; }
:root[data-layout="story"] main .panel.will-reveal > .project-story { opacity: 1; transform: none; }

/* story view: each project chapter is exactly one screen */
:root[data-layout="story"] main .project-chapter {
  min-height: 100vh;
  padding: 9vh 0 6vh;
  justify-content: center;
}
:root[data-layout="story"] main .project-chapter > h1 { margin-bottom: 28px; }
:root[data-layout="story"] main .project-chapter .project-media img { max-height: 58vh; }
:root[data-layout="story"] main .project-chapter .project-media.is-gallery { max-height: 58vh; }

@media (max-width: 768px) {
  .project-story,
  .project-chapter.is-flipped .project-story { grid-template-columns: 1fr; }
  .project-chapter.is-flipped .project-media { order: 0; }
}
/* touch screens don't use the wheel glide in story.js; let the chapters snap natively */
@media (hover: none) {
  :root[data-layout="story"] { scroll-snap-type: y proximity; }
  :root[data-layout="story"] main .project-chapter { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .project-page .project-media { clip-path: none; }
  .project-page .project-text > * { opacity: 1; transform: none; }
}

/* =========================================
   FULL-SCREEN PAGES (story view): every chapter fits one screen, so each scroll step in
   story.js lands on a whole page. Tighter chapter padding, a wider column, and compact
   About/Education layouts keep the taller sections inside 100vh.
   ========================================= */
:root[data-layout="story"] main .panel { padding: 10vh 0 7vh; max-width: 1100px; }
:root[data-layout="story"] main .panel > h1 { margin-bottom: 32px; }
:root[data-layout="story"] main .about-story { grid-template-columns: minmax(200px, 0.7fr) 1.3fr; align-items: center; }
:root[data-layout="story"] main .about-photo img { max-height: 66vh; }
:root[data-layout="story"] main .about-text p { line-height: 1.65; margin-bottom: 12px; }
:root[data-layout="story"] main .about-hello { margin-bottom: 12px; }
:root[data-layout="story"] main .about-links { margin-top: 16px; }

.edu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 48px;
}
.edu-col > .edu-school:first-child { margin-top: 0; }
:root[data-layout="story"] #education li { margin-bottom: 2px; }
@media (max-width: 900px) {
  .edu-grid { grid-template-columns: 1fr; }
}

/* the backdrop crossfade keeps pace with the longer page glide */
.story-backdrop { transition: opacity 1.2s ease, background-color 1.2s ease; }

@media (hover: none) {
  :root[data-layout="story"] main .panel { scroll-snap-align: start; }
}

/* short windows (small laptops, browser chrome): tighten further so pages still fit */
@media (min-width: 769px) and (max-height: 780px) {
  :root[data-layout="story"] main .panel,
  :root[data-layout="story"] main .project-chapter { padding: 6vh 0 4vh; }
  :root[data-layout="story"] main .panel > h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 20px; padding-bottom: 10px; }
  :root[data-layout="story"] main .panel p,
  :root[data-layout="story"] main .panel li { font-size: 0.93rem; line-height: 1.55; }
  :root[data-layout="story"] main .project-page .project-text > h2 { margin: 14px 0 6px; font-size: 1.25rem; }
  :root[data-layout="story"] main .project-page .project-text .project-summary { font-size: 1.02rem; }
  :root[data-layout="story"] main .project-media.is-art { width: min(100%, 300px); }
  :root[data-layout="story"] main .project-grid { gap: 14px; }
  :root[data-layout="story"] main .project-card { padding: 16px 18px; }
}

/* portrait phone video: sized from its 9:16 shape so the frame is right before it loads */
.project-media.is-video video {
  display: block;
  height: min(62vh, 640px);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  object-fit: cover;
  background: #000;
  transition: transform 0.6s ease;
}
:root[data-layout="story"] main .project-chapter .project-media.is-video video { height: min(58vh, 640px); }

/* social profile screenshot that links out (Perfumery) */
.social-card {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-width: 300px;
  color: var(--accent-text);
  font-size: 0.9rem;
}
.social-card img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.social-card:hover img { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.18); }
.project-page .social-card img { width: 100%; max-width: none; max-height: none; }

/* portrait photo/video: the media column shrinks to the image so the write-up gets the room */
.project-story:has(> .project-media.is-photo, > .project-media.is-video) { grid-template-columns: auto minmax(0, 1fr); }
.project-chapter.is-flipped .project-story:has(> .project-media.is-photo, > .project-media.is-video) { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 768px) {
  .project-story:has(> .project-media.is-photo, > .project-media.is-video),
  .project-chapter.is-flipped .project-story:has(> .project-media.is-photo, > .project-media.is-video) { grid-template-columns: 1fr; }
}

/* =========================================
   WIDER CHAPTERS, TITLES UP TOP (story view, every page): slimmer side margins, each
   chapter title sits near the top of its screen, and the chapter's main layout (About
   story, project media + write-up) fills the rest of the screen with larger media.
   ========================================= */
:root[data-layout="story"] .content { max-width: none; padding: 48px 4vw; }
:root[data-layout="story"] main .panel {
  max-width: 1700px;
  justify-content: flex-start;
  padding: 6vh 0 5vh;
}
:root[data-layout="story"] main .project-chapter { padding: 6vh 0 5vh; justify-content: flex-start; }
:root[data-layout="story"] main .panel > h1 { margin-bottom: 24px; }
:root[data-layout="story"] main .panel > .about-story,
:root[data-layout="story"] main .panel > .project-story { flex: 1; align-content: center; }

/* bigger project media: everything below the title is available to it */
:root[data-layout="story"] main .project-page .project-media img,
:root[data-layout="story"] main .project-chapter .project-media img { max-height: min(calc(100vh - 280px), 860px); }
:root[data-layout="story"] main .project-page .project-media.is-gallery,
:root[data-layout="story"] main .project-chapter .project-media.is-gallery { max-height: min(calc(100vh - 280px), 860px); }
:root[data-layout="story"] main .project-page .project-media.is-video video,
:root[data-layout="story"] main .project-chapter .project-media.is-video video { height: min(calc(100vh - 280px), 860px); }
:root[data-layout="story"] main .about-photo img { max-height: calc(100vh - 230px); }
:root[data-layout="story"] main .project-page .project-text .project-summary { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
:root[data-layout="story"] main .project-page .project-text p,
:root[data-layout="story"] main .project-page .project-text li { font-size: clamp(1rem, 1.1vw, 1.12rem); }

@media (min-width: 769px) and (max-height: 780px) {
  :root[data-layout="story"] main .panel,
  :root[data-layout="story"] main .project-chapter { padding: 4vh 0 3vh; }
  :root[data-layout="story"] main .panel > h1 { margin-bottom: 16px; }
  :root[data-layout="story"] main .project-page .project-text p,
  :root[data-layout="story"] main .project-page .project-text li { font-size: 0.93rem; }
  :root[data-layout="story"] main .project-page .project-text .project-summary { font-size: 1.02rem; }
}
@media (max-width: 768px) {
  :root[data-layout="story"] .content { padding: 24px 16px; }
}

/* =========================================
   SKILLS: grouped rows of logos / lab illustrations
   ========================================= */
.skill-group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--text);
}

/* story view: everything scales with the screen so the chapter fills it, with margin */
:root[data-layout="story"] #skills .skill-group { margin-bottom: 3.6vh; }
:root[data-layout="story"] #skills .skill-group-title { font-size: clamp(1.1rem, 2.8vh, 1.8rem); }
:root[data-layout="story"] #skills .skills-logos { gap: clamp(28px, 4vw, 72px); margin: 2vh 0 0; }
:root[data-layout="story"] #skills .skills-logos img { height: clamp(52px, 11.5vh, 140px); }
:root[data-layout="story"] #skills .skills-logos img.logo-wordmark { height: clamp(20px, 4.4vh, 54px); }
:root[data-layout="story"] #skills .lab-icon { width: clamp(60px, 11.5vh, 140px); height: clamp(60px, 11.5vh, 140px); }
:root[data-layout="story"] #skills .lab-skill { gap: 1.2vh; }
:root[data-layout="story"] #skills .skill-tag { font-size: clamp(1.1rem, 2.4vh, 1.6rem); }
:root[data-layout="story"] #skills .skill-coursework { margin: 0; font-size: clamp(1rem, 2.2vh, 1.35rem); line-height: 1.6; }

/* entrance: group titles slide in from the left, each logo pops up in turn, and the lab
   illustrations draw their lines (script.js sets --i for the order and pathLength) */
#skills.will-reveal .skill-group-title,
#skills.will-reveal .skill-coursework { opacity: 0; transform: translateX(-40px); }
#skills.in-view .skill-group-title,
#skills.in-view .skill-coursework {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(0.3s + var(--i, 0) * 70ms);
}
#skills.will-reveal:not(.in-view) .skills-logos > * { opacity: 0; }
#skills.in-view .skills-logos > * {
  animation: skillPop 0.8s cubic-bezier(.2,.8,.25,1.15) calc(0.4s + var(--i, 0) * 70ms) backwards;
}
@keyframes skillPop {
  from { opacity: 0; transform: translateY(26px) scale(0.7); }
}
#skills.in-view .lab-icon [pathLength] {
  stroke-dasharray: 1;
  animation: skillDraw 1.3s ease-in-out calc(0.5s + var(--i, 0) * 70ms) backwards;
}
@keyframes skillDraw {
  from { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: 1; }
  to   { stroke-dashoffset: 0; }
}
/* the generic chapter fade-up would double the motion, so the groups themselves stay put */
:root[data-layout="story"] main #skills.will-reveal > .skill-group,
:root[data-layout="story"] main #skills.will-reveal > .skill-coursework { opacity: 1; transform: none; }
:root[data-layout="story"] main #skills.will-reveal:not(.in-view) > .skill-coursework { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #skills .skill-group-title,
  #skills .skill-coursework,
  #skills .skills-logos > * { opacity: 1 !important; transform: none !important; }
}

/* =========================================
   EXPERIENCE: internship write-up beside two stacked photos
   ========================================= */
.exp-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
.exp-media { display: flex; flex-direction: column; gap: 16px; }
.exp-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  height: 220px;
  aspect-ratio: 4 / 3;
}
.exp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.exp-photo:hover img { transform: scale(1.06) rotate(1deg); }
.exp-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 8px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}
/* story view: the photos take the full height below the title */
:root[data-layout="story"] main #experience .exp-story { flex: 1; align-content: center; }
:root[data-layout="story"] main #experience .exp-photo { height: min(calc((100vh - 250px) / 2), 420px); }

/* motion, same as the About/project media: each photo sweeps open and settles, one after the other */
#experience.will-reveal .exp-photo { clip-path: inset(0 100% 100% 0); }
#experience.in-view .exp-photo { animation: aboutImageIn 1.6s cubic-bezier(.65,0,.35,1) 0.35s both; }
#experience.in-view .exp-photo + .exp-photo { animation-delay: 0.7s; }
#experience.in-view .exp-photo img { animation: aboutImageSettle 2.4s cubic-bezier(.2,.7,.2,1) 0.35s backwards; }
#experience.in-view .exp-photo + .exp-photo img { animation-delay: 0.7s; }
:root[data-layout="story"] main #experience.will-reveal > .exp-story { opacity: 1; transform: none; }
#experience.will-reveal .exp-text > * { opacity: 0; transform: translateX(-40px); transition: opacity 1.1s ease-in-out, transform 1.1s cubic-bezier(.2,.7,.2,1); }
#experience.in-view .exp-text > * { opacity: 1; transform: none; }
#experience.in-view .exp-text > :nth-child(1) { transition-delay: 0.5s; }
#experience.in-view .exp-text > :nth-child(2) { transition-delay: 0.7s; }

@media (max-width: 900px) {
  .exp-story { grid-template-columns: 1fr; }
  .exp-media { flex-direction: row; }
  .exp-photo,
  :root[data-layout="story"] main #experience .exp-photo { height: auto; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #experience .exp-photo { clip-path: none; }
  #experience .exp-text > * { opacity: 1; transform: none; }
}

/* =========================================
   INVERTED CHAPTERS (story view): like royleejr.com's black/white sections, every other
   chapter flips (story.js adds .tone-flip) while keeping the mode's accent: dark mode
   alternates black/gold with paper-white/deep gold, light mode alternates off-white/pink
   with ink-black/pink. While a flipped chapter is on screen, <html data-tone="flip"> flips
   the fixed view toggles too. All text tokens meet WCAG AA on their background.
   ========================================= */
:root:not([data-theme="light"])[data-layout="story"] .tone-flip,
:root:not([data-theme="light"])[data-layout="story"][data-tone="flip"] .view-controls {
  color-scheme: light;
  --page-bg: #f7f4ee;
  --content-bg: #fffdf9;
  --sidebar-bg: #efeae1;
  --card-bg: #ffffff;
  --card-hover-bg: #fbf6ec;
  --card-border: rgba(var(--overlay-rgb), 0.08);
  --accent: #b8862f;
  --accent-rgb: 184,134,47;
  --accent-strong: #9c7228;
  --accent-text: #8a6420;       /* 4.9:1 */
  --accent-text-lg: #9c7228;    /* 3.9:1, headings */
  --text: #2a2622;
  --text-strong: #141210;
  --muted: #6f6a63;             /* 4.9:1 */
  --overlay-rgb: 0,0,0;
  --shadow-color: rgba(40,30,10,0.1);
  --logo-filter: brightness(0) opacity(0.7);
}
:root[data-theme="light"][data-layout="story"] .tone-flip,
:root[data-theme="light"][data-layout="story"][data-tone="flip"] .view-controls {
  color-scheme: dark;
  --page-bg: #0e0c0d;
  --content-bg: #151314;
  --sidebar-bg: #1a1718;
  --card-bg: #1b1819;
  --card-hover-bg: #241f21;
  --card-border: rgba(var(--overlay-rgb), 0.06);
  --accent: #ed7a9e;
  --accent-rgb: 237,122,158;
  --accent-strong: #f49bb7;
  --accent-text: #f08fae;       /* 8.6:1 */
  --accent-text-lg: #ed7a9e;
  --text: #ece6e8;
  --text-strong: #ffffff;
  --muted: #9a9094;             /* 6.3:1 */
  --overlay-rgb: 255,255,255;
  --shadow-color: rgba(0,0,0,0.4);
  --logo-filter: brightness(0) invert(1) opacity(0.85);
}
/* re-inherit the text color from the flipped tokens */
:root[data-layout="story"] .tone-flip { color: var(--text); }
/* the fixed toggles crossfade along with the backdrop */
.view-toggle { transition: transform .2s ease, border-color 1.2s ease, background-color 1.2s ease, color 1.2s ease; }

/* =========================================
   MOVING LAYERS (story view, homepage): a big outlined chapter number sits behind each
   chapter (like royleejr.com's project numbers), and while a chapter scrolls its number,
   media and text drift at different speeds. story.js sets --p (0 when the page has landed)
   and data-mark. Uses the `translate` property so it stacks with the entrance transforms.
   ========================================= */
:root[data-layout="story"] main .panel { position: relative; isolation: isolate; }
:root[data-layout="story"] main .panel[data-mark]::before {
  content: attr(data-mark);
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  font-size: min(44vh, 30vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.22);
  transform: translateY(-50%);
  translate: 0 calc(var(--p, 0) * 55vh);
  pointer-events: none;
  user-select: none;
}
/* the number rises into place as the chapter enters */
:root[data-layout="story"] main .panel.will-reveal[data-mark]::before { opacity: 0; transition: opacity 1.4s ease 0.2s; }
:root[data-layout="story"] main .panel.in-view[data-mark]::before { opacity: 1; }

/* everything under the title drifts a little; the media layers drift more */
:root[data-layout="story"] main .panel > :not(h1):not(.chapter-kicker) { translate: 0 calc(var(--p, 0) * 7vh); }
:root[data-layout="story"] main .panel :is(.project-media, .about-photo, .exp-media) { translate: 0 calc(var(--p, 0) * 14vh); }
:root[data-layout="story"] main .panel .exp-photo + .exp-photo { translate: 0 calc(var(--p, 0) * 8vh); }
/* skills rows fan out: each lower row trails a little further */
:root[data-layout="story"] main #skills > .skill-group:nth-of-type(2) { translate: 0 calc(var(--p, 0) * 12vh); }
:root[data-layout="story"] main #skills > .skill-group:nth-of-type(3) { translate: 0 calc(var(--p, 0) * 17vh); }
:root[data-layout="story"] main #skills > .skill-coursework { translate: 0 calc(var(--p, 0) * 22vh); }

/* story view: the resume preview sizes to the space below the buttons so Resume stays one screen */
:root[data-layout="story"] main #resume .resume-preview { max-width: none; width: fit-content; align-self: flex-start; }
:root[data-layout="story"] main #resume .resume-preview img { width: auto; max-width: 100%; max-height: calc(88vh - 215px); }

/* =========================================
   CLUB CHAPTERS (extracurriculars): photo galleries, logo frames, a small club badge and
   the role/date facts above the write-up
   ========================================= */
.project-media.is-photos { aspect-ratio: 4 / 3; }
.project-page .project-media.is-photos img { inset: 0; width: 100%; height: 100%; }
.project-media.is-logo {
  width: min(100%, 440px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 9%;
  background: #fff;
}
.project-page .project-media.is-logo img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
:root[data-layout="story"] main .project-chapter .project-media.is-logo { width: min(100%, calc(100vh - 290px), 480px); }
:root[data-layout="story"] main .project-chapter .project-media.is-logo img { max-height: none; }
.project-page .club-badge {
  display: block;
  width: auto;
  max-width: none;
  height: clamp(44px, 7vh, 72px);
  margin-bottom: 16px;
  border: none;
  border-radius: 0;
}
/* facts: labels in the text color, the values (President, Active, ...) in the accent */
.project-page .club-facts { color: var(--accent-text); line-height: 1.7; }
.project-page .club-facts strong { color: var(--text); }

/* =========================================
   STORY VIEW TWEAKS: big chapter numbers sit on the side away from the media so no photo
   covers them (text over a number is fine), and no separator lines between segments
   ========================================= */
:root[data-layout="story"] main .panel.is-flipped[data-mark]::before,
:root[data-layout="story"] main #experience[data-mark]::before { right: auto; left: 0; }
:root[data-layout="story"] main .panel > h1::after { display: none; }
:root[data-layout="story"] main .panel > h1 { padding-bottom: 0; }
:root[data-layout="story"] .site-footer { border-top: none; }

/* Perfumery: the TikTok card grows into all the room left beside the video. The write-up
   column stretches to the video's height and the card takes whatever is left (never smaller
   than before, never wider than the column: 100cqw / 2.1 is the column width over the
   screenshot's aspect ratio). */
.project-story:has(.social-card) { align-items: stretch; }
.project-story:has(.social-card) > .project-media { align-self: center; }
.project-text:has(> .social-card) { display: flex; flex-direction: column; container-type: inline-size; }
.project-text > .social-card {
  flex: 1 1 0;
  min-height: 170px;
  max-width: 100%;
  margin-top: 16px;
}
.project-text > .social-card img {
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  max-width: 100%;
  max-height: calc(100cqw / 2.1);
  align-self: flex-start;
  object-fit: contain;
}

/* =========================================
   WELCOME PAGE ENTRANCE (homepage): after the loading curtain lifts (or right away on later
   visits) the photo opens as a circle, the name rises letter by letter, the description word
   by word, then the buttons and the arrow. hero-wait / hero-in are set on <html> by the head
   script and partials/loader.html; reduced motion skips all of it.
   ========================================= */
html.hero-wait :is(.hero-photo, .hero-name, .hero-subtitle, .hero-buttons, .hero-arrow, .hex-background) { opacity: 0; }

html.hero-in .hero-photo { animation: heroPhoto 1.3s cubic-bezier(.2,.8,.25,1.1) backwards; }
@keyframes heroPhoto {
  0%   { opacity: 0; transform: scale(0.35); clip-path: circle(0% at 50% 50%); }
  60%  { opacity: 1; transform: scale(1.06); clip-path: circle(50% at 50% 50%); }
  100% { transform: scale(1); clip-path: circle(50% at 50% 50%); }
}
html.hero-in .hero-photo img { animation: heroPhotoImg 1.8s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes heroPhotoImg { from { transform: scale(1.4); } }

.hero-name .ch { display: inline-block; }
html.hero-in .hero-name .ch {
  animation: heroLetter 0.9s cubic-bezier(.2,.8,.2,1) calc(0.45s + var(--i) * 55ms) backwards;
}
@keyframes heroLetter { from { opacity: 0; transform: translateY(0.7em) rotate(8deg); filter: blur(6px); } }

.hero-subtitle .wd { display: inline-block; }
html.hero-in .hero-subtitle .wd {
  animation: heroWord 0.8s cubic-bezier(.2,.7,.2,1) calc(1s + var(--i) * 70ms) backwards;
}
@keyframes heroWord { from { opacity: 0; transform: translateY(18px); } }

html.hero-in .hero-button { animation: heroPop 0.7s cubic-bezier(.2,.8,.25,1.2) 1.55s backwards; }
html.hero-in .hero-button + .hero-button { animation-delay: 1.7s; }
@keyframes heroPop { from { opacity: 0; transform: translateY(20px) scale(0.85); } }

html.hero-in .hero-arrow { animation: heroFade 1s ease 2.1s backwards; }
html.hero-in .hex-background { animation: heroFade 1.8s ease 0.3s backwards; }
@keyframes heroFade { from { opacity: 0; } }

/* sound toggle pill over a project video (bottom-left of the frame) */
.video-sound {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font: 600 0.8rem/1 Lora, Georgia, serif;
  letter-spacing: .03em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .2s ease, transform .2s ease;
}
.video-sound:hover { background: rgba(0,0,0,.72); transform: translateY(-2px); }
.video-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-sound svg { width: 18px; height: 18px; fill: #fff; }
.video-sound svg .stroke { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.video-sound .icon-sound,
.video-sound[aria-pressed="true"] .icon-muted { display: none; }
.video-sound[aria-pressed="true"] .icon-sound { display: block; }
.video-sound[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #111; }
.video-sound[aria-pressed="true"] svg { fill: #111; }
.video-sound[aria-pressed="true"] svg .stroke { stroke: #111; }

/* slide gallery under a write-up (Bananas): fills the room left beside the video like the
   Perfumery TikTok card, keeping the slides' 16:9 shape; click a slide to see it full size */
.project-story:has(.slide-gallery) { align-items: stretch; }
.project-story:has(.slide-gallery) > .project-media { align-self: center; }
.project-text:has(> .slide-gallery) { display: flex; flex-direction: column; container-type: inline-size; }
.project-text > .slide-gallery {
  flex: 1 1 0;
  min-height: 170px;
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  justify-self: start;
  background: none;
}
.project-text > .slide-gallery::before {
  /* sizes the frame: as tall as the space allows, as wide as 16:9 and the column allow */
  content: '';
  display: block;
  height: 100%;
  max-height: calc(100cqw * 9 / 16);
  aspect-ratio: 16 / 9;
}
.project-page .project-text > .slide-gallery img {
  inset: 0 auto auto 0;
  width: auto;
  height: 100%;
  max-height: calc(100cqw * 9 / 16);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
}

/* full-size view for gallery slides */
.lightbox {
  width: min(94vw, 1600px);
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0,0,0,.82); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.lightbox button {
  position: absolute;
  top: -44px;
  right: 0;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font: 600 .85rem/1 Lora, Georgia, serif;
  cursor: pointer;
}

/* extracurricular chapters (story view): bigger type that scales with the screen so the
   write-up fills more of the page */
:root[data-layout="story"] main .club-page .project-text .club-facts { font-size: clamp(1.05rem, 2.5vh, 1.55rem); line-height: 1.6; }
:root[data-layout="story"] main .club-page .project-text .project-summary { font-size: clamp(1.2rem, 3.1vh, 2rem); line-height: 1.5; }
:root[data-layout="story"] main .club-page .project-text p { font-size: clamp(1.02rem, 2.4vh, 1.5rem); line-height: 1.6; }
:root[data-layout="story"] main .club-page .club-badge { height: clamp(48px, 9vh, 104px); margin-bottom: 2vh; }

/* roles stand out: bold everywhere (experience/research entries and club role values) */
.entry-role { font-weight: 700; color: var(--text); }
.project-page .club-facts .fact-role { font-weight: 700; }

/* story view: the Experience write-up scales with the screen to fill the page */
:root[data-layout="story"] main #experience .entry-title { font-size: clamp(1.15rem, 3.6vh, 2.4rem); }
:root[data-layout="story"] main #experience .entry-role { font-size: clamp(1rem, 2.9vh, 1.85rem); }
:root[data-layout="story"] main #experience .entry-meta { font-size: clamp(0.92rem, 2.4vh, 1.5rem); }
:root[data-layout="story"] main #experience .entry-points li { font-size: clamp(1rem, 2.9vh, 1.85rem); line-height: 1.55; }
:root[data-layout="story"] main #experience .entry-head { margin-bottom: 2vh; }

/* About: the path to CMU (GSU + Emory -> UGA -> CMU), logos joined by lines that draw themselves in */
.transfer {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin: 4px 0 18px;
}
.transfer-school { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.transfer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(64px, 11vh, 120px);
}
.transfer-logo img { display: block; height: 100%; width: auto; border-radius: 4px; }
.transfer-school figcaption { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); }
.transfer-arrow {
  width: clamp(70px, 8vw, 130px);
  margin-bottom: 22px;   /* line up with the logos, not the captions */
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-panel.will-reveal .transfer { opacity: 0; transform: translateX(-40px); transition: opacity 1.1s ease-in-out, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.about-panel.in-view .transfer { opacity: 1; transform: none; transition-delay: 1.3s; }
/* Georgia State and Emory (dual enrollment) stack like two branches of a parallel circuit;
   their wires join and lead on into UGA. The circuit wipes in left to right, then each
   arrow draws in turn. */
.transfer-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: clamp(78px, 14vh, 152px);
}
.transfer-stack .transfer-logo { height: 46%; }
/* the caption is wider than the logos: keep the logos against the wires that leave them */
.transfer-school.is-dual { align-items: flex-end; text-align: right; }
.transfer-merge { display: flex; align-items: center; margin-bottom: 22px; }
.transfer-join {
  width: clamp(24px, 2.4vw, 42px);
  height: clamp(78px, 14vh, 152px);
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.transfer-join path { vector-effect: non-scaling-stroke; }
.transfer-merge .transfer-arrow { width: clamp(40px, 4.2vw, 70px); margin-bottom: 0; }
.about-panel.will-reveal .transfer-join { clip-path: inset(-4px 100% -4px -4px); }
.about-panel.in-view .transfer-join { clip-path: inset(-4px -4px -4px -4px); transition: clip-path 0.6s ease-in-out 1.8s; }
.about-panel.in-view .transfer-arrow path { stroke-dasharray: 1; animation: skillDraw 0.55s ease-in-out 2.35s backwards; }
.about-panel.in-view .transfer-arrow path + path { animation-delay: 2.85s; animation-duration: 0.3s; }
.about-panel.in-view .transfer-arrow.is-last path { animation-delay: 3.15s; animation-duration: 0.8s; }
.about-panel.in-view .transfer-arrow.is-last path + path { animation-delay: 3.9s; animation-duration: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .about-panel .transfer { opacity: 1; transform: none; }
  .about-panel .transfer-join { clip-path: none; }
}

/* =========================================
   ABOUT PHOTO STACK: the portraits slide past one after another every 4s (script.js);
   the progress bars along the bottom (shared with the project galleries) fill while each
   photo is up. Every photo is cropped to the
   same tall frame, which takes the full height the page leaves it in story view.
   ========================================= */
.about-stack { position: relative; aspect-ratio: 2 / 3; }
.about-track { display: flex; height: 100%; }
.about-track.is-moving { transition: transform 0.9s cubic-bezier(.65,0,.35,1); }
.about-stack .about-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
.about-stack img[src*="mascot"] { object-position: 60% 55%; }
.about-stack img[src*="gym"] { object-position: center 45%; }
.photo-bars {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  gap: 6px;
}
.photo-bars button {
  flex: 1;
  height: 14px;
  padding: 5px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.photo-bars button::before {
  content: '';
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35) linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 0% 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.photo-bars .is-done::before { background-size: 100% 100%; }
.photo-bars .is-current::before { animation: aboutBar 4s linear forwards; }
/* galleries hold still while hovered and while off screen */
.is-gallery:hover .photo-bars button::before { animation-play-state: paused; }
.is-gallery.is-away .photo-bars button::before { animation: none; }
/* drawings and slides are light, so their bars get a dark track */
:is(.is-drawing, .is-slides) .photo-bars button::before { background-color: rgba(0, 0, 0, 0.14); box-shadow: none; }
@keyframes aboutBar { to { background-size: 100% 100%; } }
:root[data-layout="story"] main .about-stack {
  height: calc(100vh - 230px);
  max-width: 100%;
  justify-self: center;
}
@media (max-width: 768px) {
  :root[data-layout="story"] main .about-stack { height: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-bars .is-current::before { animation: none; background-size: 100% 100%; }
}

/* "Outside of class" list on About; "perfume" links to the Perfumery chapter */
.about-text .about-list-intro { margin-bottom: 6px; }
.about-list { margin: 0 0 16px; padding-left: 1.3em; line-height: 1.6; }
.about-list li::marker { color: var(--accent); }
.about-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.about-link:hover { color: var(--text-strong); text-decoration-color: var(--accent); }
:root[data-layout="story"] main .about-text .about-list-intro { margin-bottom: 4px; }
:root[data-layout="story"] main .about-list { margin-bottom: 12px; line-height: 1.5; }
/* the short items share two columns under the perfume line, so About still fits one screen */
@media (min-width: 769px) {
  :root[data-layout="story"] main .about-list { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 2.5em; }
  :root[data-layout="story"] main .about-list li { white-space: nowrap; }
  :root[data-layout="story"] main .about-list li:first-child { white-space: normal; }
  :root[data-layout="story"] main .about-list li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 769px) and (max-height: 780px) {
  :root[data-layout="story"] main .about-hello { font-size: 2rem; margin-bottom: 8px; }
  :root[data-layout="story"] main .about-text p { margin-bottom: 8px; }
  :root[data-layout="story"] main .about-list { margin-bottom: 8px; }
  :root[data-layout="story"] main .about-links { margin-top: 10px; }
}

/* =========================================
   DIRECTORY PAGES: a contents page ahead of the project chapters and another ahead of the
   club chapters (build.py). Entries sit on alternating sides of a center line, each linking
   to its chapter, sized to the entry count (--n). On entry the line draws down, each entry
   slides in from its own side while a node pops onto the line, and its outlined number
   wipes up into place. Replays on each visit (script.js).
   ========================================= */
.pindex {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.4vh, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pindex::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(transparent, rgba(var(--accent-rgb), .7) 10%, rgba(var(--accent-rgb), .7) 90%, transparent);
  transform-origin: top;
}
.pindex-item { position: relative; width: 50%; }
.pindex-item:nth-child(even) { align-self: flex-end; }
.pindex-item::after {
  /* the node where the project meets the center line */
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18);
  transform: translateY(-50%);
}
.pindex-item:nth-child(even)::after { right: auto; left: -7px; }
.pindex-item a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(14px, 2vw, 36px);
  padding: 1.2vh clamp(28px, 3.4vw, 64px);
  color: var(--text);
  text-align: right;
}
.pindex-item:nth-child(even) a { flex-direction: row; text-align: left; }
.pindex-num {
  flex: none;
  font-size: clamp(2.6rem, min(40vh / var(--n, 4), 6vw), 8rem);
  font-weight: 700;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), .8);
  transition: color .35s ease;
}
.pindex-body { display: flex; flex-direction: column; gap: 0.35em; }
.pindex-label {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pindex-title {
  align-self: flex-end;
  font-size: clamp(1.5rem, min(17.6vh / var(--n, 4), 2.6vw), 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--text-strong);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 100% 100% / 0% 2px;
  padding-bottom: 4px;
  transition: background-size .45s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.pindex-item:nth-child(even) .pindex-title { align-self: flex-start; background-position: 0 100%; }
.pindex-tag { font-size: clamp(0.85rem, min(1.8vh, 1.1vw), 1.1rem); color: var(--muted); }
.pindex-item a:hover .pindex-num,
.pindex-item a:focus-visible .pindex-num { color: var(--accent); }
.pindex-item a:hover .pindex-title,
.pindex-item a:focus-visible .pindex-title { background-size: 100% 2px; }

:root[data-layout="story"] main .project-index > .pindex { flex: 1; justify-content: center; }
:root[data-layout="story"] main .project-index[data-mark]::before { display: none; }

/* entrance */
.project-index.will-reveal .pindex::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.65,0,.35,1) .3s; }
.project-index.in-view .pindex::before { transform: none; }
:root[data-layout="story"] main .project-index.will-reveal > .pindex { opacity: 1; transform: none; }
.project-index.will-reveal .pindex-item {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.project-index.will-reveal .pindex-item:nth-child(even) { transform: translateX(80px); }
.project-index.will-reveal .pindex-item::after {
  transform: translateY(-50%) scale(0);
  transition: transform .55s cubic-bezier(.3,1.7,.5,1);
}
.project-index.will-reveal .pindex-num {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .9s cubic-bezier(.65,0,.35,1), color .35s ease;
}
.project-index.in-view .pindex-item,
.project-index.in-view .pindex-item:nth-child(even) {
  opacity: 1;
  transform: none;
  transition-delay: calc(.6s + var(--i) * .22s);
}
.project-index.in-view .pindex-item::after { transform: translateY(-50%) scale(1); transition-delay: calc(.6s + var(--i) * .22s); }
.project-index.in-view .pindex-num { clip-path: inset(0); transition-delay: calc(.85s + var(--i) * .22s), 0s; }
@media (prefers-reduced-motion: reduce) {
  .project-index .pindex::before,
  .project-index .pindex-item,
  .project-index .pindex-item::after { opacity: 1; transform: none; }
  .project-index .pindex-item::after { transform: translateY(-50%); }
  .project-index .pindex-num { clip-path: none; }
}

/* phones: one column down a line at the left */
@media (max-width: 768px) {
  .pindex::before { left: 7px; }
  .pindex-item,
  .pindex-item:nth-child(even) { width: 100%; align-self: stretch; }
  .pindex-item::after,
  .pindex-item:nth-child(even)::after { right: auto; left: 0; }
  .pindex-item a,
  .pindex-item:nth-child(even) a { flex-direction: row; text-align: left; padding: 10px 0 10px 32px; }
  .pindex-title,
  .pindex-item:nth-child(even) .pindex-title { align-self: flex-start; background-position: 0 100%; }
}
.nowrap { white-space: nowrap; }
/* laptop-height screens: a little less space between the About paragraphs so the taller
   GSU + Emory stack still fits one screen */
@media (min-width: 769px) and (min-height: 781px) and (max-height: 860px) {
  :root[data-layout="story"] main .about-text p { margin-bottom: 9px; }
  :root[data-layout="story"] main .about-list { margin-bottom: 9px; }
}