/* ==========================================================================
   Supersweet Tattoos & Coffee — Opt(1)
   Built from Figma node 39:2659 (Supersweet Comps > Opt(1), 1512 x 3693).
   Section rules carry their Figma node id so any rule traces back to the comp.
   ========================================================================== */

/* --------------------------------------------------------------- reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, p, ul, li, figure, form { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* -------------------------------------------------------------- tokens --- */
:root {
  /* palette — sampled from the comp */
  --pink-bg:      #ffe0e3;  /* every section background */
  --pink:         #db9acd;  /* display headings, accent borders */
  --grey-text:    #4b4b4b;  /* nav, body copy, footer */
  --grey-border:  #898989;  /* secondary button, placeholders */
  --hairline:     #eaeaea;  /* form input borders */
  --green:        #6b9074;  /* artist portrait discs */
  --ink:          #0b1014;  /* Instagram card text */
  --link:         #2445f5;  /* Instagram @mentions */
  --nav-cta-text: #1b1b1b;
  --white:        #fff;

  /* Type. The comp specifies Avenir and Avenir Next Condensed — macOS system
     faces that are not licensed for web delivery. Each stack tries the real
     face first (so it is exact on the designer's Mac) and falls back to the
     closest Google Font everywhere else. See README. */
  --font-display: "Avenir", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --font-cond: "Avenir Next Condensed", "Barlow Semi Condensed", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;

  /* Horizontal gutter. The comp is a fixed 1512px canvas; every absolute
     `left` below is written as var(--gut) + the comp's own x value, so the
     whole layout centres on wider screens without rewriting coordinates. */
  --gut: max(0px, calc(50% - 756px));
}

body {
  background: var(--pink-bg);
  color: var(--grey-text);
  font-family: var(--font-cond);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------- primitives --- */

/* Figma image fills carry a two-level crop: a positioned/clipping box, then a
   scaled image inside it. Both levels are percentages or comp pixels, passed
   in as custom properties from the markup. */
.crop {
  position: absolute;
  overflow: hidden;
  left: var(--l, 0);
  top: var(--t, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
}
.crop > img {
  position: absolute;
  max-width: none;
  left: var(--il, 0);
  top: var(--it, 0);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
}
.crop > img.cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Display headings — Avenir Heavy 80px, 8px tracking (40:3041, 48:3063,
   52:3131, 52:3174). */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 80px;
  line-height: normal;   /* Avenir resolves this to ~109px, matching the comp */
  letter-spacing: 8px;
  color: var(--pink);
  white-space: nowrap;
}

/* Outlined pill buttons — 290 x 59, 3px border, 4px radius (39:2695, 40:3016,
   40:3043, 52:3175). */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 59px;
  border-radius: 4px;
  border: 3px solid var(--pink);
  background: transparent;
  color: #000;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn--grey { border-color: var(--grey-border); }
.btn--pink:hover,
.btn--pink:focus-visible { background: var(--pink); color: var(--white); }
.btn--grey:hover,
.btn--grey:focus-visible { background: var(--grey-border); color: var(--white); }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* ------------------------------------------------------- 39:2660 — nav --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
  padding-inline: calc(var(--gut) + 60px);
  background: var(--pink-bg);
}
.nav__logo img { width: 112px; height: 28px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 500;
  font-size: 16px;
  color: var(--grey-text);
}
.nav__links a { white-space: nowrap; }
.nav__links a:not(.nav__cta):hover { color: var(--pink); }

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 119px;
  height: 27px;
  border: 2px solid var(--pink);
  border-radius: 4px;
  font-size: 15px;
  color: var(--nav-cta-text);
  transition: background-color .18s ease, color .18s ease;
}
.nav__cta:hover { background: var(--pink); color: var(--white); }

/* Hamburger — not in the comp, which is desktop-only. Desktop hides it. */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--pink);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.nav__bars { position: relative; }
.nav__bars,
.nav__bars::before,
.nav__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--grey-text);
  transition: transform .2s ease, background-color .2s ease;
}
.nav__bars::before,
.nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }

/* Open state morphs the bars into a close icon. */
.nav[data-open="true"] .nav__bars { background: transparent; }
.nav[data-open="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------ 39:2665 — hero --- */
.hero {
  position: relative;
  height: 635px;
  overflow: hidden;
  background: var(--pink-bg);
}
/* 39:2998 — image 26, the coffee cup in hand */
.hero__cup {
  --l: calc(var(--gut) + 991px);
  --t: 57px;
  --w: 401px;
  --h: 535px;
}
/* 40:3018 */
.hero__content {
  position: absolute;
  left: calc(var(--gut) + 118px);
  top: 174px;
  width: 784px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}
/* 40:3011 — the SUPERSWEET / Tattoos and Coffee lockup, outlined in the comp */
.hero__wordmark img { width: 784px; height: 196px; }
/* 39:2694 */
.hero__actions { display: flex; gap: 42px; }

/* ----------------------------------------------------- 40:3038 — about --- */
.about {
  position: relative;
  height: 665px;
  overflow: hidden;
  background: var(--pink-bg);
}
/* 48:3067 — two stacked image fills */
.about__art {
  position: absolute;
  left: calc(var(--gut) + 16px);
  top: 25px;
  width: 679px;
  height: 581px;
}
/* Expressed as percentages of the 679 x 581 frame rather than comp pixels, so
   the pair keeps its framing once the frame goes fluid below 1200px. */
.about__art-back {                                                /* 48:3068 */
  --l: 7.5111%;   /* 51/679  */
  --t: 0;
  --w: 84.9779%;  /* 577/679 */
  --h: 99.8279%;  /* 580/581 */
}
.about__art-front {                                               /* 48:3069 */
  --l: 0;
  --t: 17.3838%;  /* 101/581 */
  --w: 100%;      /* 679/679 */
  --h: 82.6162%;  /* 480/581 */
}

/* 40:3040 */
.about__copy {
  position: absolute;
  left: calc(var(--gut) + 725px);
  top: 149px;
  width: 653px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
/* 40:3041 — unlike the other display headings this one sits in a manually
   resized 82px box in the comp, which tightens the gap to the paragraph. */
.about__copy .display {
  height: 82px;
  line-height: 82px;
}
.about__copy p {
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: var(--grey-text);
}

/* --------------------------------------------------- 48:3061 — artists --- */
.artists {
  position: relative;
  height: 589px;
  overflow: hidden;
  background: var(--pink-bg);
}
/* 48:3063 */
.artists__title {
  position: absolute;
  left: calc(var(--gut) + 55px);
  top: 60px;
}
/* 39:2724 */
.artists__row {
  position: absolute;
  left: calc(var(--gut) + 58px);
  top: 189px;
  display: flex;
  align-items: center;
  gap: 43px;
}
.artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 245px;
}
/* 39:2726 etc — green disc, portrait cropped inside */
.artist__disc {
  position: relative;
  width: 248px;
  height: 250px;
  border-radius: 1000px;
  overflow: hidden;
  background: var(--green);
}
.artist__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: normal;
  color: var(--pink);
  text-align: center;
}
.artist__style {
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

/* ---------------------------------------------------- 52:3130 — social --- */
.social {
  position: relative;
  height: 854px;
  overflow: hidden;
  background: var(--pink-bg);
}
/* 52:3131 — centred on the canvas, not the viewport */
.social__title {
  position: absolute;
  left: calc(var(--gut) + 591px);
  top: 37px;
}
/* 39:2822 */
.social__row {
  position: absolute;
  left: calc(var(--gut) + 128px);
  top: 166px;
  display: flex;
  align-items: center;
  gap: 38px;
}

/* 39:2823 — Instagram post card. Inner rows are 362 wide inside a 393 card. */
.post {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 393px;
  height: 631px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 362px;
  height: 54px;
  flex: none;
}
.post__user { display: flex; align-items: center; gap: 8px; }
.post__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.post__handle { font-weight: 500; }
.post__options { width: 24px; height: 24px; }

/* 39:2834 — media well, aspect locked to the comp's 585:704 */
.post__media {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 585 / 704;
  flex: none;
}

.post__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 362px;
  height: 46px;
  flex: none;
}
.post__icons { display: flex; align-items: center; gap: 12px; }
.post__icons img, .post__save { width: 24px; height: 24px; }

.post__likes {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 362px;
  flex: none;
}
.post__likers { display: flex; }
.post__likers img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1.25px solid var(--white);
  object-fit: cover;
}
.post__likers img:first-child { margin-right: -10px; }
.post__likes b { font-weight: 600; }

.post__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  width: 362px;
  margin-top: 6px;
  white-space: nowrap;
}
.post__caption a { color: var(--link); }

/* ------------------------------------------------------ 39:2925 — book --- */
.book {
  position: relative;
  height: 856px;
  overflow: hidden;
  background: var(--pink-bg);
}
/* 52:3112 — storefront illustration */
.book__shop {
  --l: calc(var(--gut) + 840px);
  --t: 162px;
  --w: 573px;
  --h: 573px;
}
/* 52:3177 */
.book__panel {
  position: absolute;
  left: calc(var(--gut) + 77px);
  top: 63px;
  width: 666px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

/* 39:2953 — white form card */
.form {
  display: flex;
  flex-direction: column;
  gap: 27px;
  padding: 30px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 0 8px rgba(0, 0, 0, .12);
}
.form__grid { display: flex; flex-wrap: wrap; gap: 22px; }

.field { display: flex; flex-direction: column; gap: 14px; }
.field label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: #000;
}
.field input,
.field textarea {
  width: 290px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-cond);
  font-size: 18px;
  color: #000;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--grey-border); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--pink); }

.field--message { width: 602px; }
.field--message textarea {
  width: 100%;
  height: 139px;
  resize: vertical;
}

/* ---------------------------------------------------- 52:3178 — footer --- */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
  padding-inline: calc(var(--gut) + 60px);
  background: var(--pink-bg);
  font-size: 16px;
  font-weight: 500;
  color: var(--grey-text);
}
.foot__links { display: flex; gap: 23px; }
.foot__links a:hover { color: var(--pink); }

/* ------------------------------------------------------------- 404.html --- */
/* Not from the comp — Cloudflare Pages serves this for any unmatched URL, and
   without it unknown paths fall back to the homepage with a 200. */
.notfound {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.notfound__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 60px 24px 110px;
  text-align: center;
}
.notfound__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(90px, 18vw, 180px);
  line-height: 1;
  letter-spacing: 8px;
  color: var(--pink);
}
.notfound__title {
  font-size: clamp(26px, 5vw, 48px);
  letter-spacing: 6px;
  white-space: normal;   /* .display sets nowrap, which overflows on phones */
}
.notfound__text {
  max-width: 460px;
  font-size: 18px;
  font-weight: 500;
  color: var(--grey-text);
}

/* ---------------------------------------------------------- responsive --- */
/* The comp is desktop-only at 1512px, so everything below is an
   interpretation rather than a spec — see README. */

@media (max-width: 1511px) {
  :root { --gut: 0px; }

  .nav__links { gap: 16px; font-size: 15px; }
  .nav { padding-inline: 24px; }
  .foot { padding-inline: 24px; }
}

@media (max-width: 1200px) {
  /* Release the comp's fixed heights and let the sections stack. */
  .hero, .about, .artists, .social, .book { height: auto; overflow: visible; }

  .display { font-size: clamp(44px, 6vw, 80px); letter-spacing: .1em; }

  .hero {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 24px;
    padding: 48px 24px 64px;
  }
  .hero__cup,
  .hero__content,
  .about__art, .about__copy,
  .artists__title, .artists__row,
  .social__title, .social__row,
  .book__shop, .book__panel {
    position: static;
    inset: auto;
  }
  .hero__cup { width: min(300px, 100%); height: 400px; position: relative; }
  .hero__content { width: 100%; max-width: 784px; }
  .hero__wordmark img { width: 100%; height: auto; }

  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 56px 24px;
  }
  .about__art { position: relative; width: min(679px, 100%); height: 581px; }
  .about__copy { width: min(653px, 100%); }

  .artists { padding: 56px 24px; }
  .artists__row { flex-wrap: wrap; justify-content: center; margin-top: 32px; }

  .social { padding: 56px 24px; }
  .social__title { display: block; text-align: center; }
  .social__row { flex-wrap: wrap; justify-content: center; margin-top: 32px; }

  .book {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
    padding: 56px 24px;
  }
  .book__shop { position: relative; width: min(573px, 100%); height: 573px; }
  .book__panel { width: min(666px, 100%); }
}

@media (max-width: 760px) {
  /* No-JS baseline: the bar grows and the links wrap under it, so every
     destination stays reachable without a script. */
  .nav {
    position: relative;
    z-index: 20;
    height: auto;
    min-height: 47px;
    flex-wrap: wrap;
    padding-block: 8px;
  }
  .nav__toggle { display: flex; }
  .nav__links {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 12px 16px;
    padding-top: 10px;
  }

  /* With JS, that list becomes a panel the hamburger drives. */
  .js .nav {
    height: 47px;
    min-height: 0;
    flex-wrap: nowrap;
    padding-block: 0;
  }
  .js .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 16px;
    background: var(--pink-bg);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .10);
  }
  .js .nav[data-open="true"] .nav__links { display: flex; }
  .js .nav__links a { padding: 12px 2px; font-size: 17px; }
  .js .nav__cta {
    width: 100%;
    height: 44px;
    margin-top: 10px;
    font-size: 16px;
  }

  /* Side by side, the two CTAs force "Book a Consultation" onto two lines. */
  .hero__actions { flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .hero__cup { height: min(400px, 62vw); }

  .about__art { height: min(581px, 80vw); }
  .book__shop { height: min(573px, 90vw); }

  .post { width: min(393px, 100%); height: auto; padding-bottom: 16px; }
  .post__head, .post__actions, .post__likes, .post__caption { width: min(362px, 92%); }
  .post__caption { white-space: normal; }

  .form { padding: 20px; }
  .form__grid { flex-direction: column; }
  .field input, .field textarea, .field--message { width: 100%; }
  .field--message { max-width: 100%; }
  .btn { width: 100%; max-width: 290px; }

  .foot { flex-direction: column; height: auto; gap: 8px; padding: 16px 24px; }
}