@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,300;1,400&family=Space+Grotesk:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#fff;--ink:#191919;--mid:#555;--faint:#999;--accent:#DA918A;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Space Grotesk',system-ui,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.7;overflow-x:hidden}

/* ── NAV ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--faint)}
.masthead{display:flex;align-items:center;justify-content:space-between;height:79px;padding:0 6.5%}
.site-logo{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.site-nav ul{display:flex;gap:2.6rem;list-style:none}
.site-nav a{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--mid);text-decoration:none;transition:color .2s}
.site-nav a:hover{color:var(--ink)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:1px;background:var(--ink);transition:transform .25s,opacity .25s}

/* ── RESPONSIVE NAV OVERLAY ── */
.responsive-nav{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
body.show-responsive-nav .responsive-nav{opacity:1;pointer-events:all}
.responsive-nav ul{list-style:none;text-align:center}
.responsive-nav li{margin-bottom:2.2rem}
.responsive-nav a{font-family:var(--serif);font-style:italic;font-size:clamp(2.2rem,7vw,3.4rem);color:var(--ink);text-decoration:none;transition:color .2s}
.responsive-nav a:hover{color:var(--accent)}
.close-nav{position:absolute;top:1.8rem;right:6.5%;background:none;border:none;font-size:2rem;color:var(--mid);cursor:pointer;line-height:1;transition:color .2s}
.close-nav:hover{color:var(--ink)}

/* ── HERO ── */
#home{padding:179px 6.5% 110px;scroll-margin-top:0}
.hero-name{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(3.5rem,8vw,75px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.2rem}
.hero-tagline{font-size:clamp(.85rem,1.4vw,1.05rem);color:var(--mid);letter-spacing:.03em;margin-bottom:2.2rem}
.hero-cta{font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s,border-color .2s}
.hero-cta:hover{color:var(--ink);border-color:var(--ink)}
.hero-socials{display:flex;gap:1.1rem;margin-top:2.4rem;align-items:center}
.hero-social-link{color:var(--mid);text-decoration:none;display:flex;align-items:center;transition:color .2s}
.hero-social-link:hover{color:var(--ink)}
.hero-social-link svg{display:block;stroke-width:2}

/* ── PROJECT COVERS (Bita Goli style) ── */
#work{scroll-margin-top:79px}
.project-cover{display:block;overflow:hidden;margin-bottom:80px;position:relative;min-height:520px;clear:both;text-decoration:none}
.project-cover::after{content:'';display:table;clear:both}
.project-image-wrap{float:right;width:60.1%;height:520px;overflow:hidden}
.project-cover:nth-child(even) .project-image-wrap{float:left}
.project-image{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .65s}
.project-cover:hover .project-image{transform:scale(1.025)}
.details-wrap{position:absolute;top:0;left:0;width:39.9%;height:100%;display:flex;align-items:center;background:var(--bg);transition:background .35s}
.project-cover:nth-child(even) .details-wrap{left:auto;right:0}
.project-cover:hover .details-wrap{background:var(--accent)}
.details-inner{padding:0 8% 0 9%}
.project-cat{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);display:block;margin-bottom:.9rem;transition:color .3s}
.project-title{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.15;color:var(--ink);margin-bottom:.9rem;transition:color .3s}
.project-desc{font-size:.82rem;color:var(--mid);line-height:1.78;margin-bottom:1.3rem;transition:color .3s}
.project-yr{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.5rem;transition:color .3s}
.project-link{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .3s}
.project-cover:hover .project-cat,
.project-cover:hover .project-title,
.project-cover:hover .project-desc,
.project-cover:hover .project-yr,
.project-cover:hover .project-link{color:#fff}

/* ── ABOUT ── */
#about{padding:100px 6.5%;display:grid;grid-template-columns:1fr 1.4fr;gap:8rem;align-items:start;scroll-margin-top:79px}
.about-quote blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.3;color:var(--ink);position:sticky;top:110px}
.about-quote blockquote::before{content:'\201C';display:block;font-size:4rem;color:var(--faint);line-height:.65;margin-bottom:.7rem}
.about-text p{font-size:.88rem;line-height:1.9;color:var(--mid);margin-bottom:1.1rem}
.about-text p strong{color:var(--ink);font-weight:500}
.about-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
.about-tags span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);padding:.25rem .7rem;border:1px solid var(--faint);transition:border-color .2s,color .2s;cursor:default}
.about-tags span:hover{border-color:var(--accent);color:var(--ink)}

/* ── SECTION LABEL ── */
.sec-head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:2.8rem;padding-top:.75rem;border-top:1px solid var(--faint)}
.sec-num{font-size:.6rem;letter-spacing:.22em;color:var(--accent)}
.sec-label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}

/* ── WRITING ── */
#writing{padding:80px 6.5% 100px;scroll-margin-top:79px}
.writing-row{display:grid;grid-template-columns:5.5rem 1fr 5rem 1.1rem;align-items:baseline;gap:2rem;padding:1.3rem 0;border-bottom:1px solid var(--faint);text-decoration:none;color:inherit;transition:border-color .25s}
.writing-row:hover{border-bottom-color:var(--ink)}
.writing-date{font-size:.67rem;color:var(--faint);white-space:nowrap;transition:color .25s}
.writing-row:hover .writing-date{color:var(--mid)}
.writing-title{font-size:.92rem;color:var(--ink);transition:color .25s}
.writing-row:hover .writing-title{color:var(--accent)}
.writing-tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:right}
.writing-arrow{font-size:.82rem;color:var(--faint);transition:transform .25s,color .25s}
.writing-row:hover .writing-arrow{transform:translateX(4px);color:var(--ink)}

/* ── CONTACT ── */
#contact{padding:60px 6.5% 100px;display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start;scroll-margin-top:79px}
.contact-invite{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.9rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.8rem}
.contact-email{display:inline-block;font-size:.88rem;color:var(--ink);text-decoration:none;margin-bottom:1.8rem;padding-bottom:3px;border-bottom:1px solid var(--accent);transition:color .2s}
.contact-email:hover{color:var(--accent)}
.contact-socials{display:flex;flex-direction:column;gap:.5rem}
.contact-socials a{font-size:.77rem;color:var(--mid);text-decoration:none;transition:color .2s}
.contact-socials a:hover{color:var(--ink)}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.field input,.field textarea{background:transparent;border:none;border-bottom:1px solid var(--faint);padding:.5rem 0;font-family:var(--sans);font-size:.88rem;font-weight:400;color:var(--ink);outline:none;transition:border-color .2s;resize:none;-webkit-appearance:none;border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:100px}
.btn-submit{align-self:flex-start;background:none;border:1px solid var(--ink);padding:.65rem 1.6rem;font-family:var(--sans);font-size:.77rem;letter-spacing:.08em;color:var(--ink);cursor:pointer;transition:background .2s,color .2s;margin-top:.3rem}
.btn-submit:hover{background:var(--ink);color:var(--bg)}

/* ── FOOTER ── */
footer{padding:2rem 6.5%;border-top:1px solid var(--faint);display:flex;justify-content:space-between;align-items:center}
footer span,footer a{font-size:.67rem;color:var(--faint);text-decoration:none;letter-spacing:.06em}
footer a:hover{color:var(--ink)}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s,transform .65s}
.reveal.visible{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:932px){
  .site-nav{display:none}
  .hamburger{display:flex}
}
@media(max-width:768px){
  #home{padding:130px 6% 80px}
  #about{grid-template-columns:1fr;gap:2.8rem;padding:80px 6%}
  .about-quote blockquote{position:static}
  #writing{padding:60px 6% 80px}
  #contact{grid-template-columns:1fr;gap:2.8rem;padding:60px 6% 80px}
  .project-cover{min-height:auto;margin-bottom:3rem}
  .project-image-wrap,.project-cover:nth-child(even) .project-image-wrap{float:none;width:100%;height:260px}
  .details-wrap,.project-cover:nth-child(even) .details-wrap{position:static;width:100%;height:auto;padding:2.2rem 6%}
  .details-inner{padding:0}
  footer{flex-direction:column;gap:.4rem;text-align:center}
}
@media(max-width:480px){
  .writing-row{grid-template-columns:1fr 1.1rem;gap:1rem}
  .writing-date,.writing-tag{display:none}
}