/* ============================================
   GHOSTLINE — DROP 008
   Split-panel layout: right painting panel is
   static and always fills viewport; left text
   column scrolls if content overflows.
   ============================================ */

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

html, body {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #000000;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

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

::selection {
  background: #000;
  color: #fff;
}

/* ---- VIEWPORT ----
   --h is the clamped viewport height used for scaling the left column.
   On very short screens it floors at 717px (0.7× design) so text stays
   readable and the column scrolls. On very tall screens it ceilings at
   1331px (1.3× design) so text doesn't balloon on large monitors.
   --u is the per-design-px scale derived from --h. */
.gl-viewport {
  --h: clamp(717px, 100vh, 1331px);
  --u: calc(var(--h) / 1024);

  display: flex;
  width: 100vw;
  height: 100vh;
  background: #fff;
  overflow: hidden;
  font-size: calc(48 * var(--u));
  line-height: 1.15;
  color: #000;
}

/* ---- LEFT COLUMN (scrollable) ----
   Natural vertical flow. Margins mirror Figma's vertical gaps.
   Flexes to absorb any extra horizontal space beyond what the right
   panel needs — this keeps the painting panel at Figma's aspect ratio
   on wide viewports instead of stretching the painting. */
.gl-column {
  position: relative;
  flex: 1 1 auto;
  min-width: calc(487 * var(--u));
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(3 * var(--u)) 0 calc(48 * var(--u)) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gl-column::-webkit-scrollbar {
  display: none;
}

.gl-drop {
  width: calc(345 * var(--u));
  margin-left: calc(-3 * var(--u));
}

.gl-tagline {
  margin-top: calc(98 * var(--u));
  width: calc(343 * var(--u));
}

.gl-phone {
  margin-top: calc(188 * var(--u));
  width: calc(419 * var(--u));
  font-weight: 700;
}

.gl-phone a {
  display: inline-block;
  transition: opacity 0.1s ease;
}

.gl-phone a:hover {
  opacity: 0.7;
}

.gl-disclosure {
  margin-top: calc(188 * var(--u));
  width: calc(460 * var(--u));
}

.gl-pricing {
  margin-top: calc(96 * var(--u));
  width: calc(345 * var(--u));
  margin-left: calc(-1 * var(--u));
}

.gl-legal {
  margin-top: calc(109 * var(--u));
  width: calc(345 * var(--u));
}

.gl-legal a {
  transition: opacity 0.1s ease;
}

.gl-legal a:hover {
  opacity: 0.5;
}

/* ---- RIGHT PANEL (static) ----
   Fills remaining viewport width; never scrolls. Painting cover-crops.
   Internal --up tracks actual viewport height (not clamped) so the
   wordmark stays proportional to the painting at any viewport. */
/* Panel is pinned to Figma's 953×1024 aspect: width scales with
   viewport height, preserving the painting's original proportions
   and zoom at any desktop size. Left column flexes to absorb the
   remaining horizontal space on wide viewports. */
.gl-panel {
  --up: calc(100vh / 1024);

  position: relative;
  flex: 0 0 calc(953 * var(--up));
  height: 100vh;
  background: #fff;
  border: 1px solid #000;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Painting positioned as % of panel to replicate the Figma crop at any panel
   size. Figma: 1551.214 × 2018.052 image placed at (-319.309, -0.953) inside
   a 953 × 1024 panel. Converted to %: left=-319.309/953=-33.5%,
   width=1551.214/953=162.77%, height=2018.052/1024=197.08%. This keeps the
   women's faces anchored near the top-left of the visible area, same as Figma,
   whether the panel is narrow or ultrawide. */
.gl-painting {
  position: absolute;
  top: 0;
  left: -33.5%;
  width: 162.77%;
  height: 197.08%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- WORDMARK STACK ---- */
.gl-wordmark {
  position: absolute;
  left: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.gl-wordmark--ghost10 {
  top: calc(251.47 * var(--up));
  width: calc(820.88 * var(--up));
  height: calc(431.53 * var(--up));
  transform: translateX(calc(-50% + 147 * var(--up)));
}

.gl-wordmark--ghost30 {
  top: calc(214.83 * var(--up));
  width: calc(820.88 * var(--up));
  height: calc(431.53 * var(--up));
  transform: translateX(calc(-50% + 73 * var(--up)));
}

.gl-wordmark--banner {
  top: calc(178.19 * var(--up));
  width: calc(820.88 * var(--up));
  height: calc(431.53 * var(--up));
  transform: translateX(-50%);
}

.gl-wordmark--text {
  top: calc(220.49 * var(--up));
  width: calc(724.29 * var(--up));
  height: calc(334.21 * var(--up));
  transform: translateX(calc(-50% + 6 * var(--up)));
}