/* mclbrsl — mobile-first build of the InDesign layout (390 x 844 artboard).
   Coordinates below are taken directly from the PDF (1pt = 1 CSS px at 390px width). */

:root {
  /* Fonts — one variable per typeface used in the design.
     Avenir LT Std 55 Roman is commercial: drop a licensed webfont in via @font-face
     named "Avenir" (or edit --font-avenir) and it will be used automatically. */
  --font-avenir: Avenir, "Avenir LT Std", "Avenir Next", "Nunito Sans", sans-serif;
  --font-arial: Arial, "Arimo", "Liberation Sans", Helvetica, sans-serif;
  /* Arial Narrow is not on most phones: we draw Arial/Arimo condensed to 82% (= Arial Narrow's width) */
  --font-arial-narrow: Arial, "Arimo", "Liberation Sans", sans-serif;
  --narrow: 0.82;
  --font-times: "Times New Roman", "Tinos", "Liberation Serif", Times, serif;

  /* cap-height ratios of the design fonts, used to sit text on the PDF baselines */
  --cap-avenir: 0.708;
  --cap-arial: 0.716;
  --cap-times: 0.662;

  /* Colours sampled from the PDF */
  --ink: #231f20;
  --ink-soft: rgba(35, 31, 32, 0.5);   /* meta text, "times in eastern" */
  --ink-faint: rgba(35, 31, 32, 0.3);  /* side labels + brackets on book-a-call */
  --blue: #1646ab;
  --green: #167120;
  --red: #a52e30;
  --yellow: #cfba38;
  --bg: #ffffff;

  --frame-w: 390px;
  --frame-h: 844px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
h1, h2, h3, p { font-weight: 400; }
button { font: inherit; color: inherit; }

.frame {
  position: relative;
  width: var(--frame-w);
  min-height: var(--frame-h);
  margin: 0 auto;
  overflow-x: hidden;
}

/* ---------- text placed on a design baseline ----------
   --b = baseline y (px), --fs = font size (px). text-box trimming makes the box
   start at cap height, so top = baseline - cap * size. */
.t {
  position: absolute;
  margin: 0;
  font-size: calc(var(--fs) * 1px);
  line-height: var(--lh, normal);
  text-box: trim-both cap alphabetic;
  top: calc(var(--b) * 1px - var(--cap) * var(--fs) * 1px);
  white-space: pre;
}
.t.c { left: 0; width: var(--frame-w); text-align: center; }
.t.wrap { white-space: normal; }

.f-avenir { font-family: var(--font-avenir); font-weight: 400; --cap: var(--cap-avenir); }
/* Nunito Sans' stylistic set 2 gives the straight, Avenir-like "l" (ignored by Avenir itself) */
.f-avenir, .title { font-feature-settings: "ss02" 1; }
.f-arial  { font-family: var(--font-arial); --cap: var(--cap-arial); }
.f-times  { font-family: var(--font-times); font-style: italic; --cap: var(--cap-times); }

/* Spaced display titles (letter-spacing tuned so each word spans the PDF width) */
.title { --fs: 29; font-family: var(--font-avenir); --cap: var(--cap-avenir); }
.logo  { --fs: 40; color: var(--blue); }
.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* Underlined text links (About / Back / Your Pieces) */
.link {
  --fs: 11.7;
  text-decoration: underline;
  text-decoration-thickness: 0.88px;
  text-underline-offset: 1.6px;
  cursor: pointer;
}
a.link.c { left: 50%; width: auto; transform: translateX(-50%); }

/* ---------- bevelled buttons (9-slice of the button bitmap from the PDF) ---------- */
.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-width: 3.42px;            /* 4 bitmap px x 0.856 */
  border-image: url("../assets/img/btn.png") 4 fill / 3.42px stretch;
  background: transparent;
  font-family: var(--font-arial);
  font-size: 11.7px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn > span { text-box: trim-both cap alphabetic; display: block; }
.btn:active, .btn.is-selected { border-image-source: url("../assets/img/btn-pressed.png"); }
.btn.is-selected > span, .btn:active > span { transform: translate(0.5px, 0.5px); }
.btn.is-faded, .btn:disabled { opacity: 0.35; cursor: default; }
.btn.is-faded:active, .btn:disabled:active { border-image-source: url("../assets/img/btn.png"); }
.btn.is-faded:active > span, .btn:disabled:active > span { transform: none; }

.btn-home { left: 153.6px; width: 83px; height: 24.8px; }        /* home + shop */
.btn-menu { left: 138.8px; width: 112.1px; height: 24.8px; }     /* book-a-call + prints */
.btn-small { height: 24.8px; font-size: 10.72px; min-width: 59px; }
.btn-small.c { left: 50%; transform: translateX(-50%); padding: 0 7px; }

/* ---------- about ---------- */
.about-photo {
  position: absolute; left: 35px; top: 59.5px; width: 321px; height: 360.5px;
  object-fit: cover; display: block;
}
.about-copy { left: 45px; width: 304px; --fs: 12; --lh: 17px; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 17px; }

/* ---------- book a call ---------- */
.bracket {
  position: absolute; border: 0.5px solid rgba(35, 31, 32, 0.2); border-left: 0;
}

/* booking pages */
.dates {
  position: absolute; left: 0; width: var(--frame-w); height: 60px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-left: 50.4px;
  overscroll-behavior-x: contain; touch-action: pan-x pan-y; -ms-overflow-style: none;
}
.dates::-webkit-scrollbar { display: none; }
.dates-track { display: flex; gap: 10px; padding: 0 20px 0 50.4px; width: max-content; }
.date {
  position: relative; flex: 0 0 auto; width: 35px; height: 49.7px; scroll-snap-align: start;
  display: block; border-width: 3.5px;
  border-image: url("../assets/img/btn.png") 4 fill / 3.5px stretch;
}
.date .dow, .date .dnum, .date .mon {
  position: absolute; left: -3.5px; right: -3.5px; text-align: center; margin: 0;
  text-box: trim-both cap alphabetic; line-height: 1;
}
.date .dow, .date .mon { transform: scaleX(var(--narrow)); }
.date.is-selected .dow, .date.is-selected .mon { transform: translate(0.5px, 0.5px) scaleX(var(--narrow)); }
.date .dow { font-family: var(--font-arial-narrow); font-size: 9.75px; top: calc(14.9px - 3.5px - 0.716 * 9.75px); }
.date .dnum { font-family: var(--font-arial); font-weight: 700; font-size: 11.7px; top: calc(29px - 3.5px - 0.716 * 11.7px); }
.date .mon { font-family: var(--font-arial-narrow); font-size: 9.75px; top: calc(41.4px - 3.5px - 0.716 * 9.75px); }
.date.is-selected > span { transform: translate(0.5px, 0.5px); }
.time { width: 59px; height: 24.8px; font-size: 10.72px; }

/* collaboration / commission */
.proposal {
  position: absolute; left: 34.5px; top: 448.5px; width: 321px; height: 104px;
  border: 1px solid var(--ink); border-radius: 0; padding: 8px 10px;
  font-family: var(--font-times); font-style: italic; font-size: 12px; line-height: 17px;
  color: var(--ink); background: transparent; resize: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
.field {
  position: absolute; left: 34.5px; width: 321px; height: 24.8px;
  border: 1px solid var(--ink); border-radius: 0; padding: 0 10px; margin: 0;
  font-family: var(--font-times); font-style: italic; font-size: 12px; line-height: 17px;
  color: var(--ink); background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
}
.proposal::placeholder, .field::placeholder { color: var(--ink-soft); opacity: 1; }
.form-note { --fs: 11; }

/* ---------- paintings grid ---------- */
.grid-scroll {
  position: absolute; left: 0; width: var(--frame-w);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding-bottom: 12px;
}
.grid-scroll::-webkit-scrollbar { display: none; }
.grid {
  display: grid; gap: 15px 20px; padding-left: 50px; padding-right: 0;
  grid-auto-rows: 70px; width: max-content;
}
.thumb {
  display: block; width: 70px; height: 70px; position: relative;
  box-shadow: 4px 4px 7px rgba(35, 31, 32, 0.42);
  background: #030405;
}
.thumb { overflow: hidden; }
.thumb img { width: 72px; height: 72px; margin: -1px; object-fit: cover; display: block; }
.thumb::after { content: ""; position: absolute; inset: 0; border: 0.5px solid rgba(3, 4, 5, 0.6); pointer-events: none; }

/* ---------- painting detail ---------- */
.art {
  position: absolute; left: 50px; top: 150px; width: 290px; height: 362.5px;
  box-shadow: 5px 5px 9px rgba(35, 31, 32, 0.42); background: #030405;
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chev { position: absolute; left: 185px; width: 20px; height: 7px; display: block; }
.chev svg { display: block; overflow: visible; }
.t.r { right: 50px; text-align: right; }

/* ---------- cart (Your Pieces) ---------- */
.cart-list { position: absolute; left: 50px; width: 290px; margin: 0; padding: 0; list-style: none; }
.cart-item { display: flex; gap: 16px; align-items: center; margin-bottom: 15px; }
.cart-item .thumb { flex: 0 0 auto; }
.cart-item .meta { font-family: var(--font-times); font-style: italic; font-size: 12px; line-height: 16px; }
.cart-item .meta .soft { font-size: 11px; }
.cart-item .remove { font-family: var(--font-arial); font-style: normal; font-size: 10.72px; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; margin-top: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  font-family: var(--font-times); font-style: italic; font-size: 12px;
  background: #fff; border: 1px solid var(--ink); padding: 6px 12px; max-width: 340px; text-align: center;
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10;
}
.toast.show { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Title tracking (fitted to the PDF glyph positions; Avenir → Nunito Sans fallback) */
.ttl-logo      { letter-spacing: 10px;  text-indent: 10px; }
.ttl-logo-sm   { --fs: 24; color: #000; letter-spacing: 5.8px; text-indent: 5.8px; }
.ttl-book      { letter-spacing: 7.8px; word-spacing: 1px; text-indent: 7.8px; }
.ttl-paintings, .ttl-prints, .ttl-pieces { letter-spacing: 7.8px; text-indent: 7.8px; }
.ttl-shop      { letter-spacing: 7.4px; text-indent: 7.4px; }
.cart-link { letter-spacing: -0.3px; }