/* =========================================================
   Imagenomic — Figma-exact reproduction
   Breakpoints map to the 4 Figma frames:
     desktop  = 1440   (base)
     <=1200px = 1000 frame
     <=900px  =  768 frame
     <=600px  =  320 frame (mobile)
   ========================================================= */

:root{
  --black:#000000;
  --ink:#0F0F0F;
  --white:#FFFFFF;
  --gray:#414042;
  --blue:#263EF7;
  --radius-card:4px;
  --radius-pill:12px;
  --gutter:120px;
  --maxw:1440px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Roboto',-apple-system,Helvetica,Arial,sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.2;
}
img{ display:block; max-width:100%; }
picture{ display:contents; }   /* AVIF<picture> wrappers must not affect layout */
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ---------- shared section title ---------- */
.section-title{
  font-family:'Roboto'; font-weight:600; font-size:44px; line-height:1.172;
  color:var(--ink); font-variant:all-small-caps; letter-spacing:0;
}
.section-title--light{ color:var(--white); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:var(--white);
  height:131px;
  border-bottom:1px solid #ECECEC;
}
.site-header__inner{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding-top:32px;
}
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand__logo{ width:173px; height:44px; object-fit:contain; }
.brand__tagline{
  font-family:'Manrope'; font-weight:300; font-size:12px; line-height:1.366;
  color:var(--gray); text-transform:lowercase;
}
.main-nav{ display:flex; align-items:center; gap:64px; margin-top:19px; }
.main-nav__links{
  display:flex; align-items:center; gap:36px;
  transform-origin:right center;                /* shrink toward the circle on the right */
  transition:opacity .42s ease, transform .42s cubic-bezier(.5,0,.2,1), visibility 0s;
}
/* toggled (desktop/tablet): links slide + shrink INTO the circle, then hide.
   On mobile .main-nav__links is display:none, so this is inert there. */
.main-nav.is-open .main-nav__links{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(78px) scale(.06);
  transition:opacity .42s ease, transform .42s cubic-bezier(.5,0,.2,1), visibility 0s linear .42s;
}
.main-nav__links a{
  font-family:'Roboto'; font-weight:400; font-size:24px; line-height:1.172;
  color:var(--black); font-variant:all-small-caps;
}
.nav-circle{ position:relative; flex:none; }
.nav-toggle{
  width:28px; height:28px; border-radius:50%; background:var(--ink);
  display:block; padding:0; border:none; flex:none;
  cursor:pointer;                               /* toggles the nav on every breakpoint */
}
/* dropdown menu anchored directly under the circle (enabled on mobile only) */
.nav-menu{
  display:none;
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--ink); border-radius:12px; padding:14px 18px;
  flex-direction:column; gap:12px; min-width:150px; z-index:1001;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.main-nav.is-open .nav-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.nav-menu a{
  color:var(--white); font-family:'Roboto'; font-weight:400; font-size:18px;
  line-height:1.2; font-variant:all-small-caps; white-space:nowrap; text-align:center;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:85px 0 62px; }
.hero__inner{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.hero__title{
  font-family:'Roboto'; font-weight:800; font-size:100px; line-height:1;
  color:var(--black); font-variant:all-small-caps;
}
.hero__title span{ display:block; }
.hero__right{ padding-top:16px; display:flex; flex-direction:column; align-items:center; }
.hero__subtitle{
  font-family:'Roboto'; font-weight:400; font-size:32px; line-height:1.172;
  color:var(--black); text-align:center; align-self:stretch;
}
.hero__subtitle strong{ font-weight:800; }

.btn-imagenomic{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:277px; height:44px; padding:10px; margin-top:32px;
  background:var(--ink); border-radius:var(--radius-pill);
}
.btn-imagenomic img{ width:24px; height:24px; }
.btn-imagenomic span{
  font-family:'Manrope'; font-weight:500; font-size:16px; line-height:1.366; color:var(--white);
}

/* =========================================================
   FEATURED (carousel)
   ========================================================= */
.featured{ background:var(--ink); padding:59px 0 47px; overflow:hidden; }
.featured__head{ display:flex; align-items:center; gap:25px; margin-bottom:24px; }
.carousel-arrows{ display:flex; align-items:center; gap:24px; }
.carousel-arrows__btn{ display:flex; line-height:0; }
.carousel-arrows__btn img{ width:40px; height:40px; }

.featured__viewport{ overflow:hidden; }
.featured__rail-pad{ padding-right:0; }            /* track bleeds to right edge */
.featured__track{
  display:flex; gap:20px; align-items:flex-start;
  transition:opacity .28s ease;
}
.fcard{ position:relative; flex:0 0 auto; width:387px; }
.fcard--lead{ width:793px; }
.fcard__img{
  width:100%; aspect-ratio:387/512; height:auto;
  object-fit:cover; border-radius:var(--radius-card);
}
.fcard--lead .fcard__img{ aspect-ratio:793/512; }

/* =========================================================
   ALL ARTISTS (masonry grid)
   ========================================================= */
.all-artists{ padding:53px 0 120px; }
.all-artists .section-title{ margin-bottom:20px; }
.artists-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 21px;
}
.card{ position:relative; }
.card__img{
  width:100%; aspect-ratio:385/578; height:auto;
  object-fit:cover; border-radius:var(--radius-card);
}
/* desktop placement: 3-up row, then big(span2)+small row */
.c-marc{    grid-column:1; grid-row:1; }
.c-radek{   grid-column:2; grid-row:1; }
.c-lampros{ grid-column:3; grid-row:1; }
.c-ashley{  grid-column:1 / span 2; grid-row:2; }
.c-kristof{ grid-column:3; grid-row:2; }
.c-ashley .card__img{ aspect-ratio:792/566; }
.c-kristof .card__img{ aspect-ratio:387/566; }   /* portrait card, 387x566 (Figma) */

/* =========================================================
   PILL (artist name tag)
   ========================================================= */
.pill{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:4px;
  height:32px; padding:0 14px;
  background:var(--ink); border-radius:var(--radius-pill);
  white-space:nowrap;
}
.pill__ico{ width:20px; height:20px; }
.pill span{
  font-family:'Roboto'; font-weight:400; font-size:16px; line-height:1.17;
  color:var(--white); font-variant:all-small-caps;
}
.pill__info{ width:28px; height:28px; margin-left:6px; }

/* =========================================================
   ARTIST PAGE
   ========================================================= */
.artist__top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-top:36px;                         /* button top -> 167 (header 131) */
}
.breadcrumb{
  font-family:'Manrope'; font-weight:500; font-size:16px; line-height:1.366;
  color:var(--black); margin-top:4px;        /* breadcrumb top -> 171 */
}
/* crumb links: real <a>, so they tap on iOS. Keep the Figma plain-text look;
   vertical padding enlarges the touch target without shifting layout (inline). */
.breadcrumb__link{ color:inherit; cursor:pointer; padding:6px 0; }
.breadcrumb__link:hover{ text-decoration:underline; }
.artist__top .btn-imagenomic{ margin-top:0; }

.artist__hero{
  display:flex; align-items:flex-start; gap:21px;
  margin-top:64px;                           /* portrait top -> 275 */
}
.artist__portrait{
  flex:1 1 0; min-width:0; aspect-ratio:589/747;
  object-fit:cover; border-radius:var(--radius-card);
}
.artist__text{ flex:1 1 0; min-width:0; }
.artist__name{
  font-family:'Roboto'; font-weight:800; font-size:80px; line-height:1;
  color:var(--black); font-variant:all-small-caps;
}
.artist__tagline{
  font-family:'Roboto'; font-weight:600; font-size:24px; line-height:1.172;
  color:var(--black); margin-top:0;
}
.artist__bio{
  font-family:'Inter'; font-weight:400; font-size:16px; line-height:1.21;
  color:var(--black); margin-top:16px;
}
.artist__bio p{ margin:0; }
.artist__bio p + p{ margin-top:19px; }        /* blank-line gap between paragraphs */
.artist__socials{ display:flex; align-items:center; gap:20px; margin-top:44px; }
.social{ display:block; line-height:0; }
.social img{ width:48px; height:48px; }

.works{ margin-top:63px; padding-bottom:120px; }
.works .section-title{ margin-bottom:32px; }
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 21px; }
.work{ margin:0; position:relative; }
.work img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-card); display:block; }
/* Grid A — 3-up row, then big(span2)+small */
.works-grid--a .wa-1{ grid-column:1; grid-row:1; aspect-ratio:385/578; }
.works-grid--a .wa-2{ grid-column:2; grid-row:1; aspect-ratio:385/578; }
.works-grid--a .wa-3{ grid-column:3; grid-row:1; aspect-ratio:384/578; }
.works-grid--a .wa-4{ grid-column:1 / span 2; grid-row:2; aspect-ratio:792/566; }
.works-grid--a .wa-5{ grid-column:3; grid-row:2; }
/* Grid B — small+big, then big+small */
.works-grid--b .wb-1{ grid-column:1; grid-row:1; aspect-ratio:384/578; }
.works-grid--b .wb-2{ grid-column:2 / span 2; grid-row:1; aspect-ratio:792/578; }
.works-grid--b .wb-3{ grid-column:1 / span 2; grid-row:2; aspect-ratio:792/566; }
.works-grid--b .wb-4{ grid-column:3; grid-row:2; }

/* =========================================================
   ABOUT PAGE
   Single full-width text block in .wrap. Roboto small-caps,
   constant 24/28 across all breakpoints — only the column
   width changes via --gutter, so the copy reflows naturally.
   ========================================================= */
.about{ padding:36px 0 120px; }            /* content top y167 = header 131 + 36 */
.about__content{
  font-family:'Roboto'; font-weight:300; font-size:24px; line-height:28px;
  color:var(--black); font-variant:all-small-caps;
}
.about__h{
  font-weight:800; font-size:24px; line-height:28px;   /* same size as body, heavier */
  font-variant:all-small-caps; margin-top:56px;        /* section gap = 2 blank lines */
}
.about__h:first-child{ margin-top:0; }
.about__p{ margin:0; }                                  /* body sits one line below its heading */
.about__link{ color:inherit; text-decoration:underline; }
.about__link--plain{ text-decoration:none; }           /* trailing imagenomic.com (plain in Figma) */

/* =========================================================
   RESPONSIVE — 1000 frame
   ========================================================= */
@media (max-width:1200px){
  :root{ --gutter:64px; }

  .hero{ padding:73px 0 56px; }
  .hero__title{ font-size:72px; line-height:1.111; }
  .hero__subtitle{ font-size:28px; }
  .hero__right{ padding-top:13px; }

  /* all-artists -> 2 columns + full-width Ashley */
  .artists-grid{ grid-template-columns:repeat(2,1fr); gap:55px 20px; }
  .c-marc{    grid-column:1; grid-row:1; }
  .c-radek{   grid-column:2; grid-row:1; }
  .c-lampros{ grid-column:1; grid-row:2; }
  .c-kristof{ grid-column:2; grid-row:2; }
  .c-ashley{  grid-column:1 / span 2; grid-row:3; }
  .card__img{ aspect-ratio:425/638; }
  .c-kristof .card__img{ aspect-ratio:425/638; }
  .c-ashley .card__img{ aspect-ratio:871/622; }

  /* --- artist page: 1000 frame --- */
  .artist__top{ padding-top:28px; }              /* button -> y159 */
  .breadcrumb{ margin-top:11px; }                /* breadcrumb -> y170 */
  .artist__hero{ margin-top:57px; }              /* portrait/name -> y260 */
  .artist__name{ font-size:64px; line-height:1; }
  .artist__tagline{ font-size:20px; }
  .works{ margin-top:50px; }
  .works .section-title{ font-size:36px; }
  .works-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .work{ aspect-ratio:auto; }
  .works-grid--a .wa-1,.works-grid--a .wa-2,.works-grid--a .wa-3,.works-grid--a .wa-5,
  .works-grid--b .wb-1,.works-grid--b .wb-4{
    grid-column:auto; grid-row:auto; order:1; aspect-ratio:426/636;
  }
  .works-grid--a .wa-4,.works-grid--b .wb-2,.works-grid--b .wb-3{
    grid-column:1 / -1; grid-row:auto; order:2; aspect-ratio:872/623;
  }
}

/* =========================================================
   RESPONSIVE — 768 frame
   ========================================================= */
@media (max-width:900px){
  :root{ --gutter:40px; }

  .hero__title{ font-size:52px; line-height:1; }
  .hero__subtitle{ font-size:20px; }
  .hero__right{ padding-top:11px; }

  /* featured: two equal cards */
  .fcard, .fcard--lead{ width:333px; }
  .fcard__img, .fcard--lead .fcard__img{ aspect-ratio:333/439; }

  .all-artists{ padding:64px 0 80px; }
  .artists-grid{ gap:48px 24px; }
  .card__img{ aspect-ratio:332/499; }
  .c-kristof .card__img{ aspect-ratio:332/499; }
  .c-ashley .card__img{ aspect-ratio:688/492; }

  /* --- artist page: 768 frame --- */
  .artist__hero{ margin-top:40px; }
  .works .section-title{ font-size:28px; }
  .works-grid{ gap:16px; }
  .works-grid--a .wa-1,.works-grid--a .wa-2,.works-grid--a .wa-3,.works-grid--a .wa-5,
  .works-grid--b .wb-1,.works-grid--b .wb-4{ aspect-ratio:336/502; }
  .works-grid--a .wa-4,.works-grid--b .wb-2,.works-grid--b .wb-3{ aspect-ratio:688/492; }

  /* --- about page: 768 frame --- */
  .about{ padding-bottom:80px; }
}

/* =========================================================
   RESPONSIVE — 320 frame (mobile)
   ========================================================= */
@media (max-width:600px){
  :root{ --gutter:20px; }

  /* header: centered circle only; tap opens a dropdown menu under the circle.
     Sticky so the circle stays reachable while scrolling the whole page. */
  .site-header{ height:56px; position:sticky; top:0; z-index:900; }
  .site-header__inner{ height:56px; align-items:center; justify-content:center; padding-top:0; }
  .brand{ display:none; }                 /* hide logo on mobile */
  .main-nav{ margin-top:0; }
  .main-nav__links{ display:none; }
  .nav-toggle{ pointer-events:auto; cursor:pointer; }   /* clickable on mobile only */
  /* full-width dropdown nav, anchored below the (sticky) header */
  .nav-circle{ position:static; }                       /* let header be the offset parent */
  .nav-menu{
    display:flex; left:0; right:0; top:100%;
    transform:translateY(-8px); transform-origin:top;
    min-width:0; border-radius:0 0 16px 16px;
    padding:24px var(--gutter); gap:20px;
  }
  .main-nav.is-open .nav-menu{ transform:translateY(0); }
  .nav-menu a{ font-size:28px; }

  .hero{ padding:24px 0 0; }
  .hero__inner{ grid-template-columns:1fr; gap:0; }
  .hero__title{ font-size:48px; line-height:1; text-align:center; }
  .hero__right{ padding-top:28px; align-items:center; }
  .hero__subtitle{ font-size:20px; text-align:center; }
  .btn-imagenomic{ width:224px; height:36px; border-radius:8px; margin-top:20px; }

  .featured{ padding:28px 0 32px; margin-top:48px; }
  .featured__head{ gap:0; justify-content:space-between; margin-bottom:14px; }
  .carousel-arrows{ gap:12px; }
  .carousel-arrows__btn img{ width:32px; height:32px; }
  .section-title{ font-size:28px; }
  .fcard, .fcard--lead{ width:280px; }
  .fcard__img, .fcard--lead .fcard__img{ aspect-ratio:280/369; }

  /* all-artists: single column stack */
  .all-artists{ padding:36px 0 48px; }
  .artists-grid{ grid-template-columns:1fr; gap:24px; }
  .c-marc,.c-radek,.c-lampros,.c-kristof,.c-ashley{ grid-column:1; grid-row:auto; }
  .card__img{ aspect-ratio:280/420; }
  .c-kristof .card__img{ aspect-ratio:280/420; }
  .c-ashley .card__img{ aspect-ratio:280/380; }

  /* --- artist page: 320 frame --- */
  .artist__top{ flex-direction:column; align-items:flex-start; gap:0; padding-top:20px; } /* breadcrumb y76 */
  .breadcrumb{ margin-top:0; font-size:14px; }
  .artist__top .btn-imagenomic{ margin-top:19px; }      /* button y115 */
  .artist__hero{ flex-direction:column; gap:0; margin-top:40px; } /* name y195 */
  .artist__text{ display:contents; }                    /* flatten so portrait can sit mid-stack */
  .artist__name{ order:1; font-size:64px; }
  .artist__tagline{ order:2; font-size:20px; margin-top:12px; }
  .artist__portrait{ order:3; flex:none; width:100%; margin-top:20px; } /* portrait y401 */
  .artist__bio{ order:4; margin-top:24px; }
  .artist__socials{ order:5; margin-top:24px; }
  .works{ margin-top:44px; padding-bottom:48px; }
  .works .section-title{ font-size:28px; }
  .works-grid{ grid-template-columns:1fr; gap:18px; }
  .works-grid--a .wa-1,.works-grid--a .wa-2,.works-grid--a .wa-3,.works-grid--a .wa-4,.works-grid--a .wa-5,
  .works-grid--b .wb-1,.works-grid--b .wb-2,.works-grid--b .wb-3,.works-grid--b .wb-4{
    grid-column:auto; order:0; aspect-ratio:280/418;
  }

  /* --- about page: 320 frame --- */
  .about{ padding-bottom:48px; }
}