*{box-sizing:border-box}html,body{margin:0;background:#000;color:#e1dedb;font-family:Inter,Arial,sans-serif}body{overflow-x:hidden}#viewport{position:relative;width:100%;overflow:hidden}#stage{position:absolute;left:0;top:0;width:1024px;height:7570px;background:#000;transform-origin:0 0}.item{position:absolute}.media{overflow:hidden}.media img{display:block;width:100%;height:100%}.text{overflow:visible}.text p{margin:0;padding:0}.pill{display:flex;align-items:center;justify-content:center;background:#e1dedb;color:#000;text-decoration:none;font-size:13px;line-height:1;border-radius:5px;transition:transform .18s ease,opacity .18s ease}.pill:hover{transform:translateX(8px);opacity:.72}.arrow{animation:bob 1.8s ease-in-out infinite}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}.slideshow{overflow:hidden;background:#111}.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}.slide.active{opacity:1}.slide-hit{position:absolute;inset:0;border:0;background:transparent;cursor:e-resize}.counter{position:absolute;right:10px;bottom:8px;font-size:10px;color:#e1dedb;mix-blend-mode:difference;pointer-events:none}@media (prefers-reduced-motion:reduce){.arrow{animation:none}.pill{transition:none}.slide{transition:none}}

:root{--sans-font:Inter,Arial,Helvetica,sans-serif;--project-title-weight:700;--project-subtitle-weight:500}
html,body{background:#000;font-family:var(--sans-font)}
#bg-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;opacity:.05;z-index:0;pointer-events:none}
#viewport{position:relative;z-index:1}
#stage{background:transparent}
.project-label p:first-child{font-family:var(--sans-font)!important;font-weight:var(--project-title-weight)!important}
.project-label p:nth-child(2){font-family:var(--sans-font)!important;font-weight:var(--project-subtitle-weight)!important}
@media (prefers-reduced-motion:reduce){#bg-video{display:none}}


/* V4 typography + background overrides */
:root {
  --sans-font: "ABC Social", "ABC Social Greek Plus VF", Arial, Helvetica, sans-serif;
}

/* Local development: uses ABC Social when it is installed on this computer.
   For public deployment, add a properly licensed webfont via @font-face. */
.project-title,
.project-title *,
.project-subtitle,
.project-subtitle *,
.project-info,
.project-info *,
.project-meta,
.project-meta *,
.project-description,
.project-description *,
.contact-email,
.contact-email *,
.email,
.email * {
  font-family: var(--sans-font) !important;
}

.project-title,
.project-title strong,
.project-title b {
  font-weight: 700 !important;
}

.project-subtitle {
  font-weight: 500 !important;
}

/* Additional information lines beneath projects */
.project-info,
.project-meta,
.project-description {
  font-weight: 400 !important;
}

/* Email at top of site */
.contact-email,
.email {
  font-weight: 400 !important;
}

/* Background video */
.background-video,
.bg-video,
#background-video,
#bg-video,
video[data-background="true"] {
  opacity: 0.10 !important;
}


/* V5 — exact typography fixes */
@font-face {
  font-family: "ABC Social Local";
  src: local("ABC Social Greek Plus VF"), local("ABC Social"), local("ABC Social Greek Extended");
  font-style: normal;
  font-weight: 100 900;
}
:root {
  --sans-font: "ABC Social Local", "ABC Social Greek Plus VF", "ABC Social", Arial, Helvetica, sans-serif;
}

/* Readymag export uses inline typography; target descendants explicitly. */
.contact-email,
.contact-email p,
.contact-email span,
.project-info,
.project-info p,
.project-info span {
  font-family: var(--sans-font) !important;
  font-style: normal !important;
}
.contact-email,
.contact-email p,
.contact-email span { font-weight: 500 !important; }
.project-info,
.project-info p,
.project-info span { font-weight: 400 !important; }

/* Bottom statement: 48px Times New Roman with blur ≈ 40% of type size. */
.footer-statement {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible !important;
  text-align:center;
  opacity:1 !important;
}
.footer-statement p,
.footer-statement span {
  margin:0;
  padding:0;
  font-family:"Times New Roman", Times, serif !important;
  font-size:48px !important;
  line-height:58px !important;
  font-weight:400 !important;
  color:#e1dedb !important;
  text-decoration:none !important;
  text-shadow:none !important;
  filter:blur(4.8px);
  white-space:nowrap;
}

#bg-video { opacity:0.10 !important; }


/* =========================
   V6 refinements
   ========================= */

/* Double the vertical breathing room between portfolio project groups.
   The standalone rebuild uses project/section wrappers where available. */
.project,
.project-section,
.portfolio-project,
section.project {
  margin-bottom: calc(var(--project-gap, 80px) * 2) !important;
}

/* Lighter buttons */
.button,
.project-button,
a.button,
.rm-button,
[class*="button"] {
  font-weight: 400 !important;
}

/* Keep button text/outline visible normally, but make the box/background disappear on hover. */
.button:hover,
.project-button:hover,
a.button:hover,
.rm-button:hover,
[class*="button"]:hover {
  background-color: transparent !important;
  background: transparent !important;
}

/* Footer blur reduced from 40% of 48px to 10% = 4.8px */
.footer-text,
.footer-blur,
#footer-text,
.site-footer-text {
  filter: blur(4.8px) !important;
}


/* =========================
   MOBILE RESPONSIVE LAYER
   Keeps desktop composition untouched.
   ========================= */
@media (max-width: 768px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
  }

  #viewport,
  #stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  #stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 18px 4vw 42px !important;
    box-sizing: border-box !important;
  }

  #stage > .item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Contact email */
  .contact-email {
    order: -30 !important;
    margin-bottom: 10px !important;
  }
  .contact-email p {
    line-height: 1.05 !important;
  }
  .contact-email span {
    font-size: clamp(24px, 8.2vw, 34px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
  }

  /* Top social buttons */
  .pill {
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 7px 11px !important;
    margin: 0 8px 14px 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  a.pill[href*="linkedin"] { order: -29 !important; }
  a.pill[href*="instagram.com/normatonis"] { order: -28 !important; }

  /* Top arrow */
  .arrow {
    order: -27 !important;
    width: auto !important;
    margin: 0 0 34px !important;
    align-self: flex-start !important;
  }
  .arrow p,
  .arrow span {
    font-size: 34px !important;
    line-height: 1 !important;
  }

  /* Project labels */
  .project-label {
    margin-top: 34px !important;
    margin-bottom: 10px !important;
  }
  .project-label p:first-child {
    font-size: 17px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
  }
  .project-label p:nth-child(2) {
    font-size: 14px !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
  }

  .project-info {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
  .project-info p,
  .project-info span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Media */
  .media,
  .slideshow {
    margin-bottom: 12px !important;
    overflow: visible !important;
  }

  .media img,
  .slideshow img,
  .slideshow .slide {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Preserve portrait/animated works without distortion */
  .media img[style*="object-fit:cover"] {
    object-fit: cover !important;
  }

  /* Slideshow becomes full width */
  .slideshow {
    min-height: 0 !important;
  }
  .slideshow .counter {
    font-size: 11px !important;
  }

  /* External project pills among content */
  #stage > a.pill:not([href*="linkedin"]):not([href*="instagram.com/normatonis"]) {
    margin-top: 6px !important;
    margin-bottom: 20px !important;
  }

  /* Footer */
  .footer-statement {
    margin-top: 44px !important;
    padding-bottom: 12px !important;
  }
  .footer-statement p,
  .footer-statement span {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  /* Background video still covers phone screen */
  #bg-video {
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* =========================================
   MOBILE GRID V2
   Rhythm: TITLE → gap → MEDIA GROUP → 3× gap → NEXT TITLE
   ========================================= */
@media (max-width: 768px) {
  #stage {
    padding: 22px 20px 80px !important;
    gap: 0 !important;
  }

  /* Header */
  .contact-email {
    width: 100% !important;
    margin: 0 0 16px !important;
  }
  .contact-email p,
  .contact-email span {
    font-size: 22px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    letter-spacing: -0.5px !important;
  }

  /* Keep social buttons close to header, then give the portfolio a real start gap */
  a.pill[href*="linkedin"],
  a.pill[href*="instagram.com/normatonis"] {
    margin: 0 8px 56px 0 !important;
  }

  /* Every new project title begins after a large section gap */
  .project-label {
    margin: 96px 0 0 !important;
    padding: 0 !important;
  }

  /* First project doesn't need the full inter-project gap */
  #stage > .project-label:first-of-type {
    margin-top: 18px !important;
  }

  .project-label p:first-child {
    font-size: 16px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }
  .project-label p:nth-child(2) {
    font-size: 14px !important;
    line-height: 1.18 !important;
    margin: 4px 0 0 !important;
  }

  /* One clean gap between title and its first image */
  .project-label + .media,
  .project-label + .slideshow {
    margin-top: 28px !important;
  }

  /* Media belonging to the same project stays visually grouped */
  .media,
  .slideshow {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .media + .media,
  .media + .slideshow,
  .slideshow + .media {
    margin-top: 0 !important;
  }

  /* Info belongs to the project above, not the next one */
  .project-info {
    margin: 4px 0 0 !important;
  }

  /* Project-related buttons stay with the project */
  #stage > a.pill:not([href*="linkedin"]):not([href*="instagram.com/normatonis"]) {
    margin: 8px 0 0 !important;
    align-self: flex-start !important;
  }

  /* Footer gets its own large quiet zone */
  .footer-statement {
    margin: 120px 0 0 !important;
    padding-bottom: 24px !important;
  }
}


/* =========================================
   MOBILE GRID V3 — compact social buttons
   ========================================= */
@media (max-width: 768px) {

  /* More separation below email */
  .contact-email {
    margin-bottom: 28px !important;
  }

  /* LinkedIn + IG: small outlined pills, no fill */
  a.pill[href*="linkedin"],
  a.pill[href*="instagram.com/normatonis"] {
    width: max-content !important;
    min-width: 0 !important;
    height: 24px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,1) !important;
    background: transparent !important;
    color: white !important;
    font-size: 10px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
  }

  /* Explicit breathing room between the two buttons */
  a.pill[href*="linkedin"] {
    margin-bottom: 12px !important;
  }

  /* Large gap after IG before portfolio starts */
  a.pill[href*="instagram.com/normatonis"] {
    margin-bottom: 62px !important;
  }

  @media (hover: hover) and (pointer: fine) {
    a.pill[href*="linkedin"]:hover,
    a.pill[href*="instagram.com/normatonis"]:hover {
      background: rgba(255,255,255,0.10) !important;
    }
  }
}


/* =========================================
   MOBILE GRID V4 — explicit header spacing
   ========================================= */
@media (max-width: 768px) {

  .contact-email {
    margin: 0 0 30px 0 !important;
  }

  a.pill[href*="linkedin"] {
    display: flex !important;
    margin: 0 0 18px 0 !important;
  }

  a.pill[href*="instagram.com/normatonis"] {
    display: flex !important;
    margin: 0 0 0 0 !important;
  }

  /* The first project begins only after a deliberate large empty zone below IG. */
  #stage > .project-label:first-of-type {
    margin-top: 90px !important;
  }
}