/* Custom Cursors - Proper syntax */
body {
  cursor: url('../assets/body-cursor.png'), default;
}

/* Clickable elements */
a, button, .card[data-has-link="true"], .btn, .chip {
  cursor: url('assets/pointer-cursor.png') 16 16, pointer;
}

/* Reset cursor for non-clickable elements */
.card[data-has-link="false"] {
  cursor: url('assets/body-cursor.png') 16 16, default;
}

/* Root variables */
:root{
  --blue:#306bff;
  --blue-hover:#2757e6;
  --ink:#1c2024;
  --paper:#fcfcfd;
  --dot-bg:#f9f9fb;
  --dot:#DEDEDE;
  --shadow-press:0px 2px 0px 0px;
  --shadow-lift:0px 6px 0px 0px;
  --section-gap:48px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:#fff;
}

.dot-grid-background{
  min-height:100vh;
  background-color:var(--dot-bg);
  background-image:radial-gradient(circle, var(--dot) 1.2px, transparent 1px);
  background-size:16px 16px;
  background-position:0 0;
}

.app-root{position:relative}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:16px 16px}
.header__brand{height:32px;width:119px;position:relative}
.brand__mark{display:block;width:100%;height:100%}
.brand__img{display:block;width:100%;height:100%;object-fit:contain}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease}
.btn__label{font-family:"Instrument Serif", serif;font-size:20px;letter-spacing:-0.6px;color:var(--paper);line-height:30px}
.btn__icon{display:inline-flex;width:24px;height:24px;transform:rotate(270deg)}
.btn__icon .icon{width:24px;height:24px;display:block}
.btn-pill{border-radius:999px}
.btn-primary{background:var(--blue);box-shadow:var(--shadow-press) #000}
.btn-primary:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift) #000;background:var(--blue-hover)}
.btn-primary--inverted{box-shadow:var(--shadow-press) var(--paper)}
.btn-primary--inverted:hover{box-shadow:var(--shadow-lift) var(--paper)}

/* Hide resume label on small screens, keep icon */
@media(max-width:640px){
  .btn--resume .btn__label{display:none}
  .btn--resume{padding:8px}
}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0}
.hero__line{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.hero__text{margin:0;font-family:"Instrument Serif", serif;font-weight:400;font-size:44px;letter-spacing:-2px;text-align:center}
.hero__text-italic{font-style:italic}
.hero__text-regular{font-style:normal}
.hero__text-blue{color:var(--blue)}
.hero__comma{display:inline-block;height:101.2px;line-height:101.2px;font-family:"Instrument Serif", serif;font-size:60px;letter-spacing:-1.76px}
.hero__desc{max-width:900px;text-align:center;font-size:14px;line-height:1.5;margin:12px 0 0}

@media (min-width:640px){
  .hero__text{font-size:60px}
  .hero__desc{font-size:16px}
}
@media (min-width:1024px){
  .hero__text{font-size:88px}
}

/* Equal vertical spacing between sections */
.header + .hero{margin-top:var(--section-gap)}
.hero + .work-heading{margin-top:var(--section-gap)}
.projects + .contact{margin-top:var(--section-gap)}

@media(min-width:640px){
  :root{--section-gap:64px}
}
@media(min-width:1024px){
  :root{--section-gap:80px}
}

/* Extra space between Work title and cards */
.work-heading + .projects{margin-top:16px}
@media(min-width:640px){.work-heading + .projects{margin-top:24px}}
@media(min-width:1024px){.work-heading + .projects{margin-top:32px}}

/* Marquee */
.hero + .marquee{margin-top:var(--section-gap)}
.marquee + .work-heading{margin-top:calc(var(--section-gap) * 1.5)}
.marquee{position:relative;overflow:hidden}
.marquee__viewport{width:105vw;margin-left:50%;transform:translateX(-50%);padding:44px 0}
.marquee__inner{display:flex;gap:0;align-items:center;white-space:nowrap;background:var(--blue);color:#fcfcfd;border-bottom:4px solid var(--ink);height:68px;transform:rotate(-3deg)}
.marquee__track{display:flex;align-items:center;gap:20px;padding:0 24px;animation:marquee-slide 6s linear infinite;will-change:transform}
.marquee__chip{font-family:"Instrument Serif", serif;font-style:italic;font-size:40px;line-height:1;text-shadow:1px 1px 0 #000}
.marquee__dot{opacity:.85;font-size:32px;line-height:1}

@keyframes marquee-slide{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

/* Responsive tweaks: marquee smaller on small screens */
@media(max-width:768px){
  .marquee__viewport{padding:24px 0}
  .marquee__inner{height:54px}
  .marquee__track{gap:12px;padding:0 16px}
  .marquee__chip{font-size:28px}
  .marquee__dot{font-size:18px}
}

/* Extra side padding for hero on small screens */
@media(max-width:640px){
  .hero.container{padding-left:12px;padding-right:12px}
}

/* About */
.about{margin-top:calc(var(--section-gap) * 2);padding:24px 0 64px}
.about + .contact{margin-top:calc(var(--section-gap) * 2)}
.section-title{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:56px}
.section-title__line{height:2px;flex:0 0 80px}
.section-title__line:first-child{background:linear-gradient(90deg, rgba(28,32,36,0), rgba(28,32,36,1))}
.section-title__line:last-child{background:linear-gradient(90deg, rgba(28,32,36,1), rgba(28,32,36,0))}
.section-title__text{font-family:"Instrument Serif", serif;font-style:italic;font-size:32px;line-height:1;color:var(--ink)}
@media(min-width:640px){
  .section-title__line{flex-basis:82px}
}

.about__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
@media(max-width:768px){.about__grid{grid-template-columns:1fr;gap:16px}}

.about__statement{margin:0 auto;text-align:center;max-width:720px;font-family:"Instrument Serif", serif;font-style:normal;font-weight:400;font-size:40px;line-height:1.4;letter-spacing:-0.02em}
@media(min-width:640px){.about__statement{font-size:48px}}
@media(min-width:1024px){.about__statement{font-size:64px}}

.about__chips{display:flex;flex-direction:column;gap:44px;align-items:center}
.chip{background:var(--paper);color:var(--ink);border-radius:147px;padding:11px 20px;font-family:Inter, ui-sans-serif, system-ui;font-weight:300;font-size:16px;letter-spacing:-0.02em;border:1px solid var(--dot);box-shadow:var(--shadow-press) #000;transform-origin:center;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer}
.chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift) #000}

/* Hide chips on small screens */
@media(max-width:768px){
  .about__chips{display:none}
}

/* Image borders */
.image-border{position:relative;overflow:hidden;border-radius:9999px;box-shadow:0.588px 0.47px 0.753px -0.607px rgba(0,0,0,0.38),1.44px 1.152px 1.844px -1.214px rgba(0,0,0,0.37),2.728px 2.182px 3.494px -1.821px rgba(0,0,0,0.35),4.763px 3.81px 6.099px -2.429px rgba(0,0,0,0.33),8.289px 6.631px 10.615px -3.036px rgba(0,0,0,0.3),15.182px 12.146px 19.443px -3.643px rgba(0,0,0,0.22),30px 24px 38.419px -4.25px rgba(0,0,0,0.07)}
.image-border--sm{width:104px;height:80px}
.image-border--lg{width:144px;height:80px}
.image-border__img{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-color:#e3e6ec;background-size:cover}
.image-border__img--sm{height:100%}
.image-border__img--lg{height:100%}
.image-border__overlay{position:absolute;left:-4.5px;right:-5.5px;top:calc(50% + 23.5px);transform:translateY(-50%);aspect-ratio:220/154;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none}
.image-border__ring{position:absolute;inset:0;border:4px solid var(--ink);border-radius:9999px;pointer-events:none}

/* Work heading */
.work-heading{display:flex;align-items:center;justify-content:center;gap:16px;;margin-bottom:56px}
.work-heading__title{font-family:"Instrument Serif", serif;font-style:italic;font-size:24px}
.work-heading__rule{height:2px;flex:0 0 80px;background:linear-gradient(90deg, rgba(28,32,36,1), rgba(28,32,36,0))}
.work-heading__rule--left{background:linear-gradient(90deg, rgba(28,32,36,0), rgba(28,32,36,1))}
@media(min-width:640px){.work-heading__title{font-size:32px}.work-heading__rule{flex-basis:82px}}

/* Projects */
.projects{padding:0 16px}
.projects__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){.projects__grid{grid-template-columns:1fr 1fr;gap:40px}}

.card{position:relative;background:var(--paper);border-radius:16px;box-shadow:var(--shadow-lift) #000;transition:all .3s ease;overflow:hidden}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-press) #000}
.card__link{display:block;text-decoration:none;color:inherit;position:relative}
.card__link:hover{color:inherit}
.card__media{position:relative;overflow:hidden;width:100%;aspect-ratio:620/371;background-color:#e3e6ec;border-top-left-radius:16px;border-top-right-radius:16px}
.card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card__img{transform:scale(1.05)}
.card__ring{position:absolute;inset:-2px;border:4px solid var(--ink);border-radius:18px;pointer-events:none;z-index:1}
.card__body{padding:0 16px 16px}
.card__meta{display:flex;align-items:center;gap:8px;margin-top:16px}
.card__tagline{margin-right:auto}
.card__meta .badge + .badge{margin-left:8px}
.card__tagline{font-family:"Geist", ui-sans-serif, system-ui;font-weight:600;font-size:14px;text-transform:uppercase}
.badge{background:var(--blue);color:var(--paper);border-radius:8px;padding:6px 8px;font:500 10.5px/13.2px Inter, system-ui}
.card__title{margin:12px 0 0;font-family:"Instrument Serif", serif;font-weight:400;font-size:28px}
@media(min-width:640px){.card__title{font-size:32px}}
@media(min-width:1024px){.card__title{font-size:40px}}

/* Contact */
.contact{background:#111113 url('../assets/bg_mask.png') center center/cover no-repeat;background-blend-mode:lighten;position:relative;z-index:1;color:var(--paper);padding:164px 0}
.contact__inner{display:flex;flex-direction:column;align-items:center;gap:24px}
.contact__copy{text-align:center}
.contact__title{margin:0;font-family:"Instrument Serif", serif;font-weight:400;font-size:88px;letter-spacing:-1.76px;color:var(--paper);text-align:center}
@media (max-width:640px){
  .contact__title{font-size:56px;}
}
.contact__title em{font-style:italic}
.contact__subtitle{margin:4px 0 0;font:400 18px/30px Inter, system-ui;color:var(--paper);text-align:center}
.contact__actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* Utilities */
.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}

/* Coming Soon Alert */
.coming-soon-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  animation: slideInRight 0.3s ease-out;
}

.coming-soon-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-lift) #000;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.coming-soon-text {
  font-size: 16px;
}

.coming-soon-close {
  background: none;
  border: none;
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.coming-soon-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}