/* ============================================================
   hero-lockup.css — the unified "Campus [hourglass] Compass"
   logo lockup, standing on the sand.

   Grid:
       ┌──────────┬──────────┬──────────┐
       │ Campus   │          │          │  row 1
       │  script  │ hourglass│          │
       ├──────────┤ (spans)  ├──────────┤
       │          │          │ Compass  │  row 2
       │          │          │  serif   │
       └──────────┴──────────┴──────────┘

   The hourglass BASE is the bottom of the grid, and landing.css
   pads .hero-content so that base lands exactly on --shore.

   Puzzle pieces are absolute children of THIS element (not a
   sibling), and the padding-bottom reserves their space — that
   is what stops following content from overlapping them.
   ============================================================ */

.hero-lockup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--space-2);
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 76px;   /* reserves room for the puzzle pieces */
}

.lockup__campus {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  padding-right: var(--space-3);
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 800;
  font-size: 96px;
  line-height: 0.9;
  color: var(--scene-word-orange);
  paint-order: stroke fill;
  -webkit-text-stroke: 7px var(--scene-word-cream);
  text-shadow:
    -1px -1px 0 var(--scene-word-stroke),
     1px -1px 0 var(--scene-word-stroke),
    -1px  1px 0 var(--scene-word-stroke),
     1px  1px 0 var(--scene-word-stroke),
     0 5px 10px rgba(30, 20, 10, 0.28);
  transform: rotate(-3deg);
  z-index: 3;
}

/* Wrapper for the glass + everything that must stay centred on it.
   It is the grid item; the hourglass sizes it, and the rose, shadow
   and mound are absolutely positioned against it. */
.lockup__glass {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  display: block;
  z-index: 2;
}

.lockup__hourglass {
  position: relative;
  display: block;
  width: 210px;
  height: auto;
  max-width: none;     /* base.css sets max-width:100% on img */
  z-index: 2;
  filter: drop-shadow(0 14px 20px rgba(30, 20, 10, 0.28));
}

.lockup__compass {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  padding-left: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 76px;
  line-height: 0.95;
  color: var(--scene-word-stroke);
  paint-order: stroke fill;
  -webkit-text-stroke: 7px var(--scene-word-cream);
  text-shadow: 0 5px 10px rgba(30, 20, 10, 0.25);
  letter-spacing: -1px;
  transform: rotate(2deg);
  z-index: 3;
}

/* --- Soft ground shadow so the hourglass sits, not floats --- */
.lockup__hourglass-shadow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 210px;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 55% at 50% 50%,
    rgba(120, 80, 30, 0.42) 0%,
    rgba(120, 80, 30, 0.16) 55%,
    transparent 72%);
  z-index: 1;
  pointer-events: none;
}

/* --- Small sand mound in front of the base (half-buried feel) --- */
.lockup__sand-mound {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 250px;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    var(--scene-sand-wet) 0%,
    var(--scene-sand-wet) 58%,
    transparent 60%);
  z-index: 3;
  pointer-events: none;
}

/* --- Compass rose — the anchor of the lockup.
   Centred on the hourglass region (inset bottom matches the
   padding-bottom that reserves the puzzle row) and sitting
   BEHIND the hourglass, so the glass reads as standing in
   front of the brand mark. compassIdle rotates it around
   --compass-rot, which compass-orientation.js points at the
   current screen — so it is a live indicator, not decoration. */
.lockup__rose {
  position: absolute;
  /* translate-centred, not `margin:auto`: the rose is WIDER than the
     glass it centres on, and auto margins refuse to go negative — they
     collapse to 0 and the element left-aligns instead. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  color: var(--scene-wood);
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
  transition: color 400ms ease;
}
.lockup__rose svg {
  width: 100%; height: 100%; display: block;
  animation: compassIdle 14s ease-in-out infinite;
}

/* At night the rose catches the hourglass's lantern light */
:root[data-theme="dark"] .lockup__rose {
  color: var(--scene-hg-sand-lt);
  opacity: 0.22;
}

/* ============================================================
   Puzzle pieces — dropped on the sand around the hourglass base.
   Absolute children of .hero-lockup; the lockup's padding-bottom
   reserves their vertical space.
   ============================================================ */
.hero-puzzle {
  position: absolute;
  width: 96px;
  height: auto;
  max-width: none;
  z-index: 4;
  filter: drop-shadow(0 7px 9px rgba(90, 60, 20, 0.42));
}
.hero-puzzle--red    { left:  6%;  bottom: 26px; transform: rotate(-24deg); }
.hero-puzzle--green  { left:  23%; bottom:  2px; transform: rotate(13deg); width: 84px; }
.hero-puzzle--yellow { right: 23%; bottom:  4px; transform: rotate(-9deg); width: 84px; }
.hero-puzzle--blue   { right: 6%;  bottom: 28px; transform: rotate(22deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-lockup { max-width: 700px; padding-bottom: 66px; }
  .lockup__campus  { font-size: 78px; -webkit-text-stroke-width: 6px; }
  .lockup__compass { font-size: 62px; -webkit-text-stroke-width: 6px; }
  .lockup__hourglass { width: 178px; }
  .lockup__rose { width: 300px; height: 300px; }
  .lockup__hourglass-shadow { width: 178px; }
  .lockup__sand-mound { width: 210px; }
  .hero-puzzle { width: 78px; }
  .hero-puzzle--green, .hero-puzzle--yellow { width: 68px; }
}
@media (max-width: 820px) {
  .hero-lockup { max-width: 480px; padding-bottom: 52px; gap: 0; }
  .lockup__campus  { font-size: 54px; padding-right: 2px; -webkit-text-stroke-width: 5px; }
  .lockup__compass { font-size: 42px; padding-left: 2px;  -webkit-text-stroke-width: 5px; }
  .lockup__hourglass { width: 124px; }
  .lockup__hourglass-shadow { width: 124px; height: 18px; bottom: -10px; }
  .lockup__sand-mound { width: 150px; height: 22px; bottom: -14px; }
  .lockup__rose { width: 210px; height: 210px; }
  .hero-puzzle { width: 56px; }
  .hero-puzzle--green, .hero-puzzle--yellow { width: 48px; }
  .hero-puzzle--red   { left: 2%;  bottom: 18px; }
  .hero-puzzle--blue  { right: 2%; bottom: 20px; }
}
@media (max-width: 480px) {
  .hero-lockup { max-width: 330px; padding-bottom: 44px; }
  .lockup__campus  { font-size: 40px; -webkit-text-stroke-width: 4px; }
  .lockup__compass { font-size: 31px; -webkit-text-stroke-width: 4px; }
  .lockup__hourglass { width: 94px; }
  .lockup__hourglass-shadow { width: 94px; height: 14px; bottom: -8px; }
  .lockup__sand-mound { width: 116px; height: 18px; bottom: -11px; }
  .lockup__rose { width: 158px; height: 158px; }
  .hero-puzzle { width: 42px; }
  .hero-puzzle--green, .hero-puzzle--yellow { width: 36px; }
}