/*
  shapes.css
  All abstract editorial geometry lives here.
  Masses, construction lines, arc, dots, ghost typography, decorative dividers.
  No layout, no content typography, no color tokens (those live in main).
  ─────────────────────────────────────────────────────────────────────────────
*/

/* ─── HERO EDITORIAL STAGE ───────────────────────────────────────────────── */

/* Container that holds all shapes — positioned inside .hero */
.shapes {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ─── SOLID MASSES ───────────────────────────────────────────────────────── */

.mass {
  position: absolute;
}

/* Primary navy block */
.mass--navy {
  width: 58%;
  height: 60%;
  right: 12%;
  top: 18%;
  background: var(--ink);
}

/* Secondary terracotta block — anchors bottom-left of composition */
.mass--terracotta {
  width: 18%;
  height: 40%;
  right: 58%;
  bottom: 0;
  background: var(--terracotta);
}

/* Thin top tab — a registration mark at the top of the navy block */
.mass--tab {
  width: 28px;
  height: 12px;
  right: 12%;
  top: calc(18% - 12px);
  background: var(--terracotta);
}

/* ─── CONSTRUCTION LINES ─────────────────────────────────────────────────── */

.cline {
  position: absolute;
  background: var(--ink);
  opacity: 0.4;
}

/* Horizontal rule extending left from the top of the navy mass */
.cline--h {
  height: 1.5px;
  width: 52%;
  top: 18%;
  right: 56%;
}

/* Vertical plumb dropping from the same point */
.cline--v {
  width: 1.5px;
  height: 42%;
  top: 18%;
  right: 70%;
}

/* ─── REGISTRATION CROSS ─────────────────────────────────────────────────── */

/* Sits at the intersection of the two construction lines */
.cross {
  position: absolute;
  width: 24px;
  height: 24px;
  right: calc(70% - 12px);
  top: calc(18% - 12px);
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  background: var(--ink);
  opacity: 0.5;
}

.cross::before {
  /* vertical arm */
  width: 1.5px;
  height: 100%;
  left: 50%;
}

.cross::after {
  /* horizontal arm */
  height: 1.5px;
  width: 100%;
  top: 50%;
}

/* ─── ARC ─────────────────────────────────────────────────────────────────── */

/* Quarter-circle clipped to bottom-right quadrant, sits behind masses */
.arc {
  position: absolute;
  width: 70%;
  height: 70%;
  border: 1.5px solid rgba(35, 57, 93, 0.2);
  border-radius: 50%;
  right: -25%;
  bottom: -10%;
  /* show only the top-left quarter */
  clip-path: inset(0 25% 25% 0);
}

/* ─── DOT CLUSTER ─────────────────────────────────────────────────────────── */

.dots {
  position: absolute;
  display: flex;
  gap: 12px;
  right: 46%;
  bottom: 16%;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* ─── GHOST QUESTION MARK ─────────────────────────────────────────────────── */

/*
  The typographic signature of the site.
  Enormous, near-invisible — encodes "questions before code."
  Uses clamp() so it never overflows or renders at a broken size.
*/
.ghost-q {
  position: absolute;
  right: -4%;
  top: -8%;
  font-family: "Manrope", sans-serif;
  font-size: clamp(12rem, 22vw, 22rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  opacity: 0.045;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* ─── SECTION DIVIDER MARKS ───────────────────────────────────────────────── */

/*
  Small terracotta registration square used as a section eyebrow marker.
  Place a <span class="mark"></span> before a section heading.
*/
.mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--terracotta);
  margin-right: 0.75rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Horizontal rule variant — a thin ink line used between major blocks */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  border: none;
}

/* Short accent rule used under section eyebrows */
.rule--accent {
  width: 32px;
  height: 2px;
  background: var(--terracotta);
  border: none;
  display: block;
  margin-bottom: 1.5rem;
}

/* ─── MOBILE SHAPES ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .shapes {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Reposition masses as a side ribbon on mobile */
  .mass--navy {
    width: 36%;
    height: 100%;
    right: 6%;
    top: 0;
  }

  .mass--terracotta {
    width: 13%;
    height: 65%;
    right: 44%;
    bottom: 0;
    top: auto;
  }

  .mass--tab {
    width: 20px;
    height: 10px;
    right: 6%;
    top: 0;
  }

  /* Ghost Q stays but scales down further on narrow screens */
  .ghost-q {
    font-size: clamp(7rem, 28vw, 12rem);
    right: 4%;
    top: -15%;
  }

  /* Hide fine construction details — too small to read on mobile */
  .cline,
  .cross,
  .arc,
  .dots {
    display: none;
  }
}