/* ============================================
   Aadarsha Ghatani — Portfolio
   Font: Playfair Display
   ============================================ */

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

   :root {
     --bg: #ffffff;
     --text: #111110;
     --muted: #9a9895;
     --faint: #e8e6e2;
     --border: #e2e0dc;
     --nav-h: 58px;
     --serif: 'EB Garamond', Georgia, serif;
     --max: 660px;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     background-color: var(--bg);
     color: var(--text);
     font-family: var(--serif);
     font-size: 16px;
     line-height: 1.65;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   main { flex: 1; }
   a { color: inherit; text-decoration: none; }
   img { display: block; max-width: 100%; }
   ul { list-style: none; }
   
   /* ---- NAV ---- */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: rgba(255,255,255,0.94);
     backdrop-filter: blur(8px);
     border-bottom: 1px solid var(--border);
     height: var(--nav-h);
   }
   
   .nav-inner {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 1.5rem;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .nav-logo {
     font-family: var(--serif);
     font-size: 0.8rem;
     font-weight: 700;
     font-style: normal;
     letter-spacing: 0.08em;
     color: var(--text);
     border: 1.5px solid var(--text);
     padding: 0.2rem 0.45rem 0.18rem;
     line-height: 1;
     display: inline-flex;
     align-items: center;
     transition: background 0.18s, color 0.18s;
     border-radius: 0 3px 0 3px;
   }
   .nav-logo:hover {
     background: var(--text);
     color: var(--bg);
   }
   
   .nav-links {
     display: flex;
     gap: 1.75rem;
     align-items: center;
   }
   
   .nav-links a {
     font-family: var(--serif);
     font-size: 0.82rem;
     font-weight: 400;
     font-style: normal;
     color: var(--muted);
     transition: color 0.15s;
     position: relative;
     padding-bottom: 2px;
   }
   .nav-links a:hover,
   .nav-links a.active {
     color: var(--text);
   }
   
   .nav-links a:not(.nav-resume)::after {
     content: '';
     position: absolute;
     bottom: -3px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--text);
     transition: width 0.25s ease;
   }
   .nav-links a:hover::after,
   .nav-links a.active::after {
     width: 100%;
   }
   
   .nav-resume {
     font-style: normal;
     font-size: 0.72rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     border: 1px solid var(--border);
     padding: 0.28rem 0.65rem;
     font-weight: 400;
     transition: border-color 0.2s, color 0.2s;
     border-radius: 0 2px 0 2px;
   }
   .nav-resume:hover {
     border-color: var(--text);
     color: var(--text);
   }
   .nav-resume::after { display: none !important; }
   
   .nav-toggle {
     display: none;
     background: none;
     border: none;
     font-size: 1.1rem;
     cursor: pointer;
     color: var(--text);
   }
   
   /* ---- FOOTER ---- */
   .site-footer {
     padding: 2rem 1.5rem;
     border-top: 1px solid var(--border);
     font-size: 0.78rem;
     color: var(--muted);
     text-align: center;
     font-style: normal;
   }
   
   /* ---- HERO ---- */
   .hero {
     max-width: var(--max);
     margin: 0 auto;
     padding: 5.5rem 1.5rem 1.5rem;
     animation: fade 0.6s ease both;
   }
   
   .hero-name {
     font-family: var(--serif);
     font-size: clamp(3rem, 9vw, 5.25rem);
     font-weight: 500;
     font-style: normal;
     line-height: 1.05;
     letter-spacing: -0.015em;
     margin-bottom: 1.1rem;
     letter-spacing: -0.04em;  
   }
   
   .hero-sub {
     font-size: 0.88rem;
     color: var(--muted);
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.01em;
     font-family: Georgia, 'Times New Roman', serif;
   }
   
   /* ---- LIST LABEL ---- */
   .list-label {
     max-width: var(--max);
     margin: 2.75rem auto 0;
     padding: 0 1.5rem;
     font-size: 0.65rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--muted);
     font-style: normal;
     font-family: var(--serif);
   }
   
   /* ---- HOME INDEX LIST ---- */
   .index-list {
     max-width: var(--max);
     margin: 0.6rem auto 0;
     padding: 0 1.5rem;
     border-top: 1px solid var(--border);
     animation: fade 0.6s 0.12s ease both;
   }
   
   .index-row {
     display: flex;
     align-items: baseline;
     gap: 1rem;
     padding: 0.85rem 0;
     border-bottom: 1px solid var(--border);
     transition: padding-left 0.2s ease;
   }
   .index-row:hover { padding-left: 0.55rem; }
   
   .index-row-label {
     font-size: 0.67rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     min-width: 50px;
     font-style: normal;
   }
   
   .index-row-title {
     flex: 1;
     font-family: var(--serif);
     font-size: 1.05rem;
     font-weight: 400;
     font-style: normal;
   }
   
   .index-row-arrow {
     font-size: 0.82rem;
     color: var(--faint);
     transition: color 0.15s, transform 0.15s;
     display: inline-block;
   }
   .index-row:hover .index-row-arrow {
     color: var(--muted);
     transform: translate(2px, -2px);
   }
   
   /* ---- PAGE HEADER ---- */
   .page-head {
     max-width: var(--max);
     margin: 0 auto;
     padding: 4rem 1.5rem 2rem;
     animation: fade 0.5s ease both;
   }
   
   .page-title {
     font-family: var(--serif);
     font-size: clamp(2rem, 6vw, 2.75rem);
     font-weight: 500;
     font-style: normal;
     letter-spacing: -0.04em;
   }
   
   /* ---- WORK LIST ---- */
   .work-list {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 1.5rem 5rem;
     border-top: 1px solid var(--border);
     animation: fade 0.5s 0.1s ease both;
   }
   
   .work-item {
     padding: 2.25rem 0;
     border-bottom: 1px solid var(--border);
   }
   
   .work-item-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.6rem;
   }
   
   .work-tag {
     font-size: 0.67rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     font-style: normal;
   }
   
   .work-link {
     font-size: 0.82rem;
     font-style: normal;
     color: var(--text);
     position: relative;
   }
   .work-link::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 1px;
     background: var(--text);
     transform-origin: left;
     transition: transform 0.2s ease;
   }
   .work-link:hover::after { transform: scaleX(0.35); }
   
   .work-item-title {
     font-family: var(--serif);
     font-size: 1.45rem;
     font-weight: 500;
     font-style: normal;
     margin-bottom: 0.55rem;
   }
   
   .work-item-desc {
     font-size: 0.9rem;
     color: var(--muted);
     line-height: 1.75;
     max-width: 500px;
     font-style: normal;
   }
   
   /* ---- WRITING LIST ---- */
   .writing-list {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 1.5rem 5rem;
     border-top: 1px solid var(--border);
     animation: fade 0.5s 0.1s ease both;
   }
   
   .writing-row {
     display: grid;
     grid-template-columns: 56px 1fr auto;
     align-items: baseline;
     gap: 1.25rem;
     padding: 0.95rem 0;
     border-bottom: 1px solid var(--border);
     transition: padding-left 0.2s ease;
   }
   .writing-row:hover { padding-left: 0.55rem; }
   
   .writing-row-type {
     font-size: 0.67rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     font-style: normal;
   }
   
   .writing-row-title {
     font-family: var(--serif);
     font-size: 1.05rem;
     font-weight: 400;
     font-style: normal;
     transition: opacity 0.15s;
   }
   .writing-row:hover .writing-row-title { opacity: 0.5; }
   
   .writing-row-date {
     font-size: 0.74rem;
     color: var(--muted);
     white-space: nowrap;
     font-style: normal;
   }
   
   /* ---- ABOUT ---- */
   .about-section {
     max-width: var(--max);
     margin: 0 auto;
     padding: 4rem 1.5rem 5rem;
     animation: fade 0.5s ease both;
   }
   
   .about-photo-placeholder {
     width: 108px;
     height: 138px;
     background: var(--faint);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.72rem;
     color: var(--muted);
     font-style: normal;
     margin-bottom: 2.5rem;
   }
   .about-photo {
     width: 100px;
     height: auto;
     border-radius: 4px; /* Just a tiny softening of edges */
     display: block;
     margin-bottom: 1rem; /* Space below the image */
   }
   
   .about-name {
     font-family: var(--serif);
     font-size: 1.6rem;
     font-weight: 500;
     font-style: normal;
     margin-bottom: 1.5rem; 
   }
   
   .about-text p {
     font-family: var(--serif);
     font-size: 1.05rem;
     line-height: 1.9;
     color: var(--text);
     margin-bottom: 1.1rem;
     max-width: 500px;
     font-style: normal;
     text-align: justify;
   }
   .about-text a {
     position: relative;
   }
   .about-text a::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 1px;
     background: var(--text);
     transform-origin: left;
     transition: transform 0.2s;
   }
   .about-text a:hover::after { transform: scaleX(0.3); }
   
   .about-contact {
     margin-top: 3rem;
     border-top: 1px solid var(--border);
   }
   
   .contact-row {
     display: flex;
     align-items: baseline;
     gap: 1.5rem;
     padding: 0.9rem 0;
     border-bottom: 1px solid var(--border);
     transition: padding-left 0.2s ease;
   }
   .contact-row:hover { padding-left: 0.5rem; }
   
   .contact-label {
     font-size: 0.67rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--muted);
     min-width: 76px;
     font-style: normal;
   }
   
   .contact-value {
     font-size: 0.92rem;
     font-style: normal;
     transition: opacity 0.15s;
   }
   .contact-row:hover .contact-value { opacity: 0.45; }
   
   /* ---- POST ---- */
   .post {
     max-width: var(--max);
     margin: 0 auto;
     padding: 3.5rem 1.5rem 6rem;
     animation: fade 0.5s ease both;
   }
   
   .post-head {
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
     border-bottom: 1px solid var(--border);
   }
   
   .post-back {
     display: inline-block;
     font-size: 0.82rem;
     font-style: normal;
     color: var(--muted);
     margin-bottom: 1.5rem;
     transition: color 0.15s;
   }
   .post-back:hover { color: var(--text); }
   
   .post-meta {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 0.75rem;
   }
   
   .post-date {
     font-size: 0.78rem;
     color: var(--muted);
     font-style: normal;
   }
   
   .post-title {
     font-family: var(--serif);
     font-size: clamp(1.75rem, 5vw, 2.4rem);
     font-weight: 500;
     font-style: normal;
     line-height: 1.15;
   }
   
   .post-body p {
     font-family: var(--serif);
     font-size: 1.1rem;
     line-height: 1.92;
     color: var(--text);
     margin-bottom: 1.5rem;
     font-style: normal;
   }
   
   /* ---- LIGHTBOX ---- */
   .lightbox {
     position: fixed;
     inset: 0;
     background: rgba(17,17,16,0.96);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.25s;
   }
   .lightbox.open { opacity: 1; pointer-events: all; }
   .lightbox-img-wrap { max-width: 90vw; max-height: 80vh; }
   .lightbox-img-wrap img { max-width: 90vw; max-height: 80vh; object-fit: contain; }
   .lightbox-close {
     position: fixed; top: 1.25rem; right: 1.5rem;
     background: none; border: none; color: rgba(255,255,255,0.4);
     font-size: 1.75rem; cursor: pointer; line-height: 1;
     transition: color 0.15s;
   }
   .lightbox-close:hover { color: white; }
   .lightbox-prev, .lightbox-next {
     position: fixed; top: 50%; transform: translateY(-50%);
     background: none; border: none; color: rgba(255,255,255,0.35);
     font-size: 1.2rem; cursor: pointer; padding: 1rem;
     transition: color 0.15s;
   }
   .lightbox-prev { left: 0.5rem; }
   .lightbox-next { right: 0.5rem; }
   .lightbox-prev:hover, .lightbox-next:hover { color: white; }
   .lightbox-counter {
     margin-top: 1rem;
     font-size: 0.72rem;
     letter-spacing: 0.1em;
     color: rgba(255,255,255,0.25);
   }
   
   /* ---- CURSOR TRAIL ---- */
   .cursor-dot {
     position: fixed;
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--text);
     pointer-events: none;
     z-index: 9999;
     opacity: 0;
     transform: translate(-50%, -50%);
   }
   
   /* ---- ANIMATION ---- */
   @keyframes fade {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ---- RESPONSIVE ---- */
   @media (max-width: 560px) {
     .nav-links {
       display: none;
       flex-direction: column;
       position: absolute;
       top: var(--nav-h);
       left: 0; right: 0;
       background: rgba(255,255,255,0.97);
       border-bottom: 1px solid var(--border);
       padding: 1.25rem 1.5rem;
       gap: 1.1rem;
     }
     .nav-links.open { display: flex; }
     .nav-toggle { display: block; }
   
     .writing-row {
       grid-template-columns: 50px 1fr;
       row-gap: 0.15rem;
     }
     .writing-row-date { grid-column: 2; font-size: 0.7rem; }
   }
   
   .post-body p {
     font-family: 'Playfair Display', 'Noto Serif Devanagari', 'Nirmala UI', 'Mangal', serif;
   }