/* ==========================================================================
   Alchemy Tattoo — shared stylesheet for both comps
   Built from Figma: "Alchemy Tattoo Comps" (MacBook Pro 14", 1512 x 988)
     opt1.html  <- node 3:8    "Opt(1)"  1512 x 4639
     opt2.html  <- node 29:1101 "Opt(2)" 1512 x 5306
   Comp values are noted inline. Sizes derived from the 1512px comp width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

img,
svg {
  display: block;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* brand palette, sampled from the comps */
  --cyan: #06b6d4;
  --cyan-deep: #00a7d2;
  --gold: #f9cc65;
  --gold-deep: #eec871;
  --amber: #f59e0b;
  --red: #d74151;
  --plum: #371a33;
  --cream: #f7eec2;
  --bronze: #c3883b;
  --ink: #0b1014;
  --black: #000000;
  --white: #ffffff;

  /* form + instagram card chrome */
  --placeholder: #898989;
  --field-border-light: #eaeaea;
  --field-border-dark: #323232;
  --ig-link: #2445f5;

  /* comp reference width — every vw-based size below is tuned to this */
  --comp-width: 1512px;

  /* fluid display scale. At 1512px viewport each resolves to the comp value. */
  --fs-hero: clamp(48px, 9.26vw, 140px); /* 140 */
  --fs-h2: clamp(36px, 5.29vw, 80px); /*  80 */
  --fs-lead: clamp(20px, 2.25vw, 34px); /*  34 */
  --fs-body: clamp(18px, 1.98vw, 30px); /*  30 */
  --fs-name: clamp(20px, 1.98vw, 30px); /*  30 */
  --fs-spec: clamp(16px, 1.59vw, 24px); /*  24 */
  --fs-btn: 20px;
  --fs-label: 18px;
  --fs-nav: 16px;

  /* shared instagram UI type */
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
}

/* Opt 1 — bright variant.
   The comp specifies BBH Bogle, which is a licensed typeface and not available
   from Google Fonts. Archivo is substituted: same geometric-grotesque
   proportions and it pairs with Archivo Black already used for the wordmark.
   Swap --font-body here if you license Bogle. */
body.opt1 {
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-comic: "Bangers", "Impact", sans-serif;
  background: var(--black);
}

/* Opt 2 — dark variant. All families available from Google Fonts. */
body.opt2 {
  --font-display: "Goldman", system-ui, sans-serif;
  --font-cond: "Fira Sans Condensed", system-ui, sans-serif;
  --font-xcond: "Fira Sans Extra Condensed", system-ui, sans-serif;
  background: var(--black);
}

/* --------------------------------------------------------------------------
   3. Page shell
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--comp-width);
  margin-inline: auto;
  overflow-x: clip;
  /* comp root fill: linear-gradient(182deg, #00a7d2 43.8%, #eec871 121.3%) */
  background: linear-gradient(182deg, var(--cyan-deep) 43.85%, var(--gold-deep) 121.3%);
}

.section {
  position: relative;
  width: 100%;
  overflow: clip;
}

/* --------------------------------------------------------------------------
   4. Crop primitive
   Figma image fills carry a two-level crop: an offset wrapper inside a
   clipping frame, then a scaled image inside that wrapper. Both levels are
   expressed here as percentages of the container so the whole thing scales.
     --l/--t/--w/--h      wrapper box
     --il/--it/--iw/--ih  image inside the wrapper
   -------------------------------------------------------------------------- */

.crop {
  position: relative;
  overflow: hidden;
}

.crop > .crop-box {
  position: absolute;
  left: var(--l, 0);
  top: var(--t, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  overflow: hidden;
}

.crop > .crop-box > img {
  position: absolute;
  left: var(--il, 0);
  top: var(--it, 0);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
  max-width: none;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  padding: 16px;
  border-radius: 4px;
  font-size: var(--fs-btn);
  line-height: 1.2;
  text-align: center;
}

body.opt1 .btn {
  font-family: var(--font-body);
  font-weight: 500;
}

body.opt2 .btn {
  font-family: var(--font-cond);
  font-weight: 600;
}

.btn--gold {
  background: var(--gold-deep);
  color: var(--black);
}

.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--edge-black {
  border: 2px solid var(--black);
}

.btn--edge-white {
  border: 2px solid var(--white);
}

/* compact nav button, opt 2 */
.btn--nav {
  width: 102px;
  padding: 6px;
  border-radius: 2px;
  font-size: var(--fs-nav);
  font-weight: 400;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 42px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Layered display lettering
   Opt 1's wordmark is live text in the comp: 23 copies of the word, each
   offset 1px up-and-right from the last — 6 plum, 16 red, then a cream face
   on top. Reproduced here as a stacked text-shadow so it stays selectable.
   -------------------------------------------------------------------------- */

.layered-type {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.05;
  text-align: center;
  color: var(--cream);
  text-shadow:
    -0.007em 0.007em 0 var(--red), -0.014em 0.014em 0 var(--red),
    -0.021em 0.021em 0 var(--red), -0.029em 0.029em 0 var(--red),
    -0.036em 0.036em 0 var(--red), -0.043em 0.043em 0 var(--red),
    -0.05em 0.05em 0 var(--red), -0.057em 0.057em 0 var(--red),
    -0.064em 0.064em 0 var(--red), -0.071em 0.071em 0 var(--red),
    -0.079em 0.079em 0 var(--red), -0.086em 0.086em 0 var(--red),
    -0.093em 0.093em 0 var(--red), -0.1em 0.1em 0 var(--red),
    -0.107em 0.107em 0 var(--red), -0.114em 0.114em 0 var(--red),
    -0.121em 0.121em 0 var(--plum), -0.129em 0.129em 0 var(--plum),
    -0.136em 0.136em 0 var(--plum), -0.143em 0.143em 0 var(--plum),
    -0.15em 0.15em 0 var(--plum), -0.157em 0.157em 0 var(--plum);
}

/* Headings the designer outlined and exported as vectors. Widths are the
   comp widths; they shrink on narrow screens. */
.display-svg {
  width: 100%;
  height: auto;
}

.display-svg--artists {
  max-width: 609px;
}
.display-svg--about {
  max-width: 449px;
}
.display-svg--styles-1 {
  max-width: 695px;
}
.display-svg--styles-2 {
  max-width: 680px;
}
.display-svg--social {
  max-width: 477px;
}
.display-svg--book {
  max-width: 627px;
}
.display-svg--alchemy {
  max-width: 745px;
}

/* --------------------------------------------------------------------------
   7. Instagram post card — identical component in both comps
   Card 393 x 631, rows inset to 362 wide, media 473 tall.
   -------------------------------------------------------------------------- */

.ig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  justify-content: center;
}

.ig-post {
  display: flex;
  flex-direction: column;
  width: 393px;
  max-width: 100%;
  min-height: 631px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
}

.ig-post__head,
.ig-post__actions,
.ig-post__likes,
.ig-post__caption {
  width: calc(100% - 31px); /* 362 of 393 */
  margin-inline: auto;
}

.ig-post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  flex: none;
}

.ig-post__user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.ig-avatar > img {
  position: absolute;
  left: -34.04%;
  top: -361.7%;
  width: 1244.68%;
  height: 2693.62%;
  max-width: none;
}

.ig-post__handle {
  font-weight: 500;
}

.ig-post__options {
  width: 24px;
  height: 24px;
  flex: none;
}

.ig-post__media {
  position: relative;
  width: 100%;
  height: 473px;
  flex: none;
  overflow: hidden;
}

/* wide media boxes in the comp are centred and clipped by the card */
.ig-post__media > .crop-box {
  left: 50%;
  transform: translateX(-50%);
}

.ig-post__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  flex: none;
}

.ig-post__icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
}

.ig-icon > img {
  width: 22px;
  height: auto;
}

.ig-post__likes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ig-avatar-group {
  display: flex;
  flex: none;
}

.ig-avatar-group img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.25px solid var(--white);
}

.ig-avatar-group img:first-child {
  margin-right: -10px;
  border-width: 0.625px;
}

.ig-post__likes b,
.ig-post__caption b {
  font-weight: 600;
}

.ig-post__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  padding-bottom: 13px;
}

.ig-post__caption a {
  color: var(--ig-link);
}

/* --------------------------------------------------------------------------
   8. Booking form — same structure in both comps, different colourway
   -------------------------------------------------------------------------- */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 27px;
  width: 666px;
  max-width: 100%;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}

.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 290px;
}

.field--wide {
  flex-basis: 100%;
}

.field label {
  font-size: var(--fs-label);
  color: var(--black);
}

body.opt1 .field label {
  font-family: var(--font-body);
  font-weight: 500;
}

body.opt2 .field label {
  font-family: var(--font-display);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px;
  border-radius: 0;
  font-size: var(--fs-label);
  font-family: var(--font-ui);
}

.field textarea {
  height: 139px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--placeholder);
}

/* opt 1: white card on gold */
body.opt1 .form-card {
  background: var(--white);
}

body.opt1 .field input,
body.opt1 .field textarea {
  background: var(--white);
  border: 1px solid var(--field-border-light);
}

/* opt 2: cream card on black */
body.opt2 .form-card {
  background: var(--cream);
}

body.opt2 .field input,
body.opt2 .field textarea {
  background: var(--cream);
  border: 1px solid var(--field-border-dark);
}

/* --------------------------------------------------------------------------
   9. Nav + footer bars
   -------------------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 47px;
  padding: 14px 60px;
  background: var(--black);
  font-size: var(--fs-nav);
  white-space: nowrap;
}

.bar--split {
  justify-content: space-between;
}

.bar__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* opt 1 bars: Bangers in bronze */
body.opt1 .bar {
  font-family: var(--font-comic);
  color: var(--bronze);
}

body.opt1 .bar--top {
  gap: 14px;
}

/* opt 2 bars: extra-condensed in white */
body.opt2 .bar {
  font-family: var(--font-xcond);
  color: var(--white);
}

/* ==========================================================================
   OPT 1 — bright variant
   ========================================================================== */

/* -- hero (node 6:169, h 428) ------------------------------------------- */

.o1-hero {
  display: grid;
  place-items: center;
  min-height: 428px;
  padding: 77px 40px 60px;
  background: linear-gradient(179deg, var(--cyan) 26.3%, var(--gold) 94.37%);
}

.o1-hero__ornament {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.56) 25%, rgba(102, 102, 102, 0) 61%);
  -webkit-mask: url("assets/ornament-hero-opt1.png") center / cover no-repeat;
  mask: url("assets/ornament-hero-opt1.png") center / cover no-repeat;
  pointer-events: none;
}

.o1-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

/* -- artists (node 6:171, h 626) ---------------------------------------- */

.o1-artists {
  /* comp: heading at y 29, card row at y 182, section 626 tall */
  padding: 29px 24px 121px;
  background: linear-gradient(180deg, var(--gold) 79.95%, var(--cyan) 100%);
}

.o1-artists__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 43px;
  margin-top: 24px;
}

.o1-artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 245px;
}

.o1-artist__disc {
  width: 248px;
  max-width: 100%;
  aspect-ratio: 248 / 250;
  border-radius: 1000px;
}

.o1-artist__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 1.59vw, 24px);
  color: var(--black);
  text-align: center;
}

.o1-artist__spec {
  font-family: var(--font-comic);
  font-size: 18px;
  color: var(--black);
  text-align: center;
}

/* -- about (node 29:1013, h 576) ---------------------------------------- */

.o1-about {
  display: flex;
  align-items: flex-start;
  gap: 47px;
  min-height: 576px;
  padding: 16px 61px 55px 70px;
  background: var(--cyan);
}

.o1-about__photo {
  width: 569px;
  flex: 0 1 569px;
  aspect-ratio: 569 / 505;
  border: 4px solid var(--black);
  border-radius: 14px;
}

.o1-about__copy {
  display: flex;
  flex-direction: column;
  gap: 41px;
  flex: 1 1 695px;
  padding-top: 61px;
}

.o1-about__body {
  max-width: 662px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--black);
}

/* -- styles collage (node 6:336, h 1115) -------------------------------- */

.o1-styles {
  min-height: 1115px;
  background: var(--gold);
}

.o1-styles__collage {
  position: absolute;
  inset: 0;
  display: flex;
}

/* comp columns: 720 and 792 of 1512 */
.o1-styles__col {
  display: flex;
  flex-direction: column;
}

.o1-styles__col--l {
  flex: 0 0 47.62%;
}

.o1-styles__col--r {
  flex: 0 0 52.38%;
}

/* comp row splits: left 442/673, right 555/560 of 1115 */
.o1-styles__col--l > :nth-child(1) {
  flex: 0 0 39.64%;
}
.o1-styles__col--l > :nth-child(2) {
  flex: 0 0 60.36%;
}
.o1-styles__col--r > :nth-child(1) {
  flex: 0 0 49.78%;
}
.o1-styles__col--r > :nth-child(2) {
  flex: 0 0 50.22%;
}

.o1-styles__cell {
  border: 4px solid var(--black);
  min-height: 0;
}

.o1-styles__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-height: 1115px;
  padding: 60px 40px;
  background: rgba(0, 0, 0, 0.68);
  text-align: center;
}

.o1-styles__lead {
  max-width: 700px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--white);
}

/* -- social (node 34:1671, h 944) --------------------------------------- */

.o1-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  min-height: 944px;
  padding: 70px 40px 89px;
  background: linear-gradient(178deg, var(--cyan) 60.05%, var(--gold) 97.85%);
}

/* -- book now (node 14:465, h 856) -------------------------------------- */

.o1-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  min-height: 856px;
  padding: 56px 40px 90px;
  background: var(--gold);
}

.o1-book__ornament {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.89) 4.02%, rgba(249, 204, 101, 0.89) 44.95%);
  -webkit-mask: url("assets/ornament-book-opt1.png") center bottom / cover no-repeat;
  mask: url("assets/ornament-book-opt1.png") center bottom / cover no-repeat;
  pointer-events: none;
}

.o1-book > .form-card,
.o1-book > .display-svg {
  position: relative;
}

/* ==========================================================================
   OPT 2 — dark variant
   ========================================================================== */

/* -- hero (node 29:1107, h 930) ----------------------------------------- */

.o2-hero {
  display: flex;
  flex-direction: column;
  min-height: 930px;
  background: linear-gradient(177deg, var(--cyan) 26.3%, var(--gold) 94.37%);
}

.o2-hero__photo {
  position: absolute;
  inset: 0;
}

.o2-hero__photo img {
  width: 100.05%;
  height: 108.49%;
  object-fit: cover;
}

/* comp: radial vignette at 52% opacity, centred, black at the edges */
.o2-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 62% at 50% 50%,
    rgba(102, 102, 102, 0.2) 0%,
    rgba(51, 51, 51, 0.6) 50%,
    rgba(26, 26, 26, 0.8) 75%,
    rgba(13, 13, 13, 0.9) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
  opacity: 0.52;
  pointer-events: none;
}

.o2-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 14px 60px;
  font-family: var(--font-xcond);
  font-size: var(--fs-nav);
  color: var(--white);
}

.o2-nav__logo {
  width: 120px;
  height: auto;
  flex: none;
}

.o2-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 27px;
}

.o2-hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  width: 745px;
  max-width: 100%;
  margin: auto auto 0;
  padding: 40px 20px 122px;
  text-align: center;
}

.o2-hero__place {
  font-family: var(--font-xcond);
  font-size: var(--fs-lead);
  color: var(--white);
}

/* -- artists (node 29:1198, h 1497) ------------------------------------- */

.o2-artists {
  min-height: 1497px;
  padding: 53px 40px 90px;
  background: var(--black);
  text-align: center;
}

.o2-artists__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--white);
}

.o2-artists__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
}

.o2-artists__head p {
  font-family: var(--font-xcond);
  font-size: var(--fs-lead);
}

.o2-artists__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 1315px;
  margin: 51px auto 0;
}

.o2-artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 417px;
  max-width: 100%;
}

.o2-artist__photo {
  width: 100%;
  aspect-ratio: 417 / 455;
  background: var(--white);
}

.o2-artist__meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--white);
}

.o2-artist__name {
  font-family: var(--font-display);
  font-size: var(--fs-name);
  line-height: 1.1;
}

.o2-artist__spec {
  font-family: var(--font-xcond);
  font-style: italic;
  font-size: var(--fs-spec);
  text-transform: uppercase;
}

/* -- styles (node 29:1226, h 1009) -------------------------------------- */

.o2-styles {
  display: grid;
  place-items: center;
  min-height: 1009px;
  background: var(--gold);
}

.o2-styles__photo {
  position: absolute;
  inset: 0;
}

.o2-styles__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o2-styles__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 42px;
  width: 100%;
  min-height: 1009px;
  padding: 60px 40px;
  background: rgba(0, 0, 0, 0.68);
  text-align: center;
}

.o2-styles__lead {
  max-width: 698px;
  font-family: var(--font-cond);
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--white);
}

/* -- social (node 34:2543, h 944) --------------------------------------- */

.o2-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 41px;
  min-height: 944px;
  padding: 62px 40px 84px;
  background: var(--black);
}

/* -- book now (node 32:1599, h 879) ------------------------------------- */

.o2-book {
  min-height: 879px;
  padding: 90px 40px;
  background: var(--black);
}

.o2-book__ornament {
  position: absolute;
  inset: 0;
  background: linear-gradient(91deg, rgba(0, 0, 0, 0.534) 53.49%, rgba(249, 204, 101, 0.89) 66.17%);
  -webkit-mask: url("assets/ornament-book-opt2.png") right center / cover no-repeat;
  mask: url("assets/ornament-book-opt2.png") right center / cover no-repeat;
  pointer-events: none;
}

.o2-book__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 45px;
  width: 666px;
  max-width: 100%;
  /* comp places the card at x 79 in a 1512 frame */
  margin-left: clamp(0px, 5.22vw, 79px);
}

.o2-book__inner h2 {
  /* comp centres the heading at x 289 — 210px in from the card's left edge,
     not over the card's own centre */
  width: 420px;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Responsive
   The comps are desktop-only, so these breakpoints are an interpretation:
   the fixed two-up and three-up grids collapse and the tall sections give up
   their comp heights rather than leaving dead space.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .o1-about {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 40px;
  }

  .o1-about__copy {
    padding-top: 0;
    flex-basis: auto;
  }

  .o1-styles,
  .o1-styles__overlay,
  .o2-styles,
  .o2-styles__overlay {
    min-height: 820px;
  }

  .o2-artists {
    min-height: 0;
  }

  .o2-hero__title {
    padding-bottom: 70px;
  }

  .o2-book__inner {
    margin-left: 0;
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  .bar,
  .o2-nav {
    flex-wrap: wrap;
    padding-inline: 24px;
  }

  .o1-hero,
  .o1-artists,
  .o1-social,
  .o1-book,
  .o2-artists,
  .o2-social,
  .o2-book {
    padding-inline: 24px;
  }

  .o1-styles__overlay,
  .o2-styles__overlay {
    padding-inline: 24px;
  }

  /* collage becomes a simple 2-up so the photos stay legible */
  .o1-styles__col--l,
  .o1-styles__col--r {
    flex: 1 1 0;
  }

  .o1-hero,
  .o1-social,
  .o1-book,
  .o2-hero,
  .o2-social {
    min-height: 0;
  }

  .o1-styles,
  .o1-styles__overlay,
  .o2-styles,
  .o2-styles__overlay,
  .o2-book {
    min-height: 620px;
  }

  .o2-hero__title {
    padding-block: 200px 60px;
  }

  .form-card {
    padding: 20px;
  }

  .field {
    flex-basis: 100%;
  }
}

@media (max-width: 560px) {
  .btn-row {
    flex-direction: column;
    align-items: center;
  }

  .ig-post {
    min-height: 0;
  }

  .ig-post__media {
    height: 320px;
  }

  .o1-artist,
  .o1-artist__disc {
    width: 100%;
    max-width: 248px;
  }

  .o2-hero__title {
    padding-block: 140px 40px;
  }
}