/* ============================================
   HHGTTG DVD Menu Theme — Portfolio
   ============================================ */

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

:root {
  --hhg-yellow:  #F5D623;
  --hhg-purple:  #7B2D8E;
  --hhg-blue:    #4A90D9;
  --hhg-green:   #4CAF50;
  --hhg-orange:  #FF9800;
  --hhg-pink:    #E91E63;
  --hhg-red:     #E53935;
  --hhg-hotpink: #f94989;
  --hhg-drive:   #f0e3bf;
  --hhg-font:    'Arial Black', 'Impact', 'Helvetica Neue', sans-serif;
  --hhg-body-font: 'Arial', 'Helvetica Neue', sans-serif;
  --transition:  0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--hhg-yellow);
}

body { font-family: var(--hhg-font); }

/* =====================
   SCREENS
   ===================== */

.hhg-screen {
  position: fixed;
  inset: 0;
  background: var(--hhg-yellow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.hhg-screen.is-active {
  display: flex;
}

/* =====================
   MAIN MENU SCREEN
   ===================== */

#screen-main {
  justify-content: space-between;
}

.hhg-main-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* no horizontal padding here — controlled per child */
}

.hhg-owner-info {
  padding: 40px 40px 30px;
}

.hhg-owner-name {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 900;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 6px;
}

.hhg-owner-title {
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  color: #666;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
}

/* --- Menu Bars --- */
.hhg-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* no padding — bars flush to left edge */
}

/*
 * Each bar is a full-width invisible row.
 * The coloured fill (.hhg-bar-fill) slides from the left edge
 * to a set width. The label is pinned at 50vw so it always
 * sits at the horizontal centre of the screen.
 */
.hhg-menu-bar {
  position: relative;
  width: 100%;
  height: 54px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
  overflow: visible;
}

/* The coloured portion — all bars end at the same right edge (dots aligned).
   On hover the bar slides 50px past that line, then springs back. */
.hhg-bar-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 72%;                          /* shared right edge = "the line" */
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
  overflow: visible;
  transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.2s;
}

.hhg-menu-bar:hover .hhg-bar-fill {
  width: calc(72% + 50px);            /* extend past the line on hover */
  filter: brightness(1.12);
}

/* Circle dot at the right end of each bar — 55px, darker shade of bar color */
.hhg-bar-fill::after {
  content: '';
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);       /* fallback — overridden per color below */
  flex-shrink: 0;
  position: relative;
  right: -8px;                        /* sit half-overlapping the rounded tip */
}

.c-purple::after { background: #4a1a56; }
.c-blue::after   { background: #2a5fa3; }
.c-green::after  { background: #2a7a2e; }
.c-orange::after { background: #c86a00; }
.c-pink::after   { background: #9c1145; }
.c-red::after    { background: #9b1515; }

/* Label lives inside the fill — slides with the bar */
.hhg-bar-label {
  flex: 1;
  text-align: center;
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* =====================
   IMPROBABILITY DRIVE — persistent fixed footer
   ===================== */

.hhg-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--hhg-hotpink);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 36px 0;
  overflow: visible;
}

/* All screens need bottom padding to clear the fixed footer */
.hhg-screen {
  padding-bottom: 126px; /* matches footer height: 54px bar + 36px*2 padding */
}

.hhg-footer > .hhg-footer-stripe {
  display: none;
}

/* Bar: rounded left end, flat right edge, starts at screen centre */
.hhg-improbability {
  background: var(--hhg-blue);
  height: 54px;
  width: 50%;
  border-radius: 30px 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 24px 0 80px;   /* left padding leaves room for the overhanging ball */
  overflow: visible;
  position: relative;
}

/* Outer cream ball — overhangs the left rounded edge */
.hhg-drive-dot {
  position: absolute;
  left: -50px;                /* pull it out to the left of the bar */
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #f0e3bf 55%, #d4b896 100%);
  flex-shrink: 0;
  box-shadow: 0 0 24px 8px rgba(255, 255, 255, 0.6),
              0 0 6px 2px rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner blue ball with dark glow */
.hhg-drive-dot::after {
  content: '';
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #90CAF9 0%, #1565C0 55%, #0D47A1 100%);
  box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.6),
              inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.hhg-drive-label {
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* =====================
   SUB-SCREENS
   ===================== */

.hhg-screen-inner {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 40px 0;
}

/* Top header bar — slides in from left, same style as main menu bars */
.hhg-screen-header {
  flex-shrink: 0;
  padding: 10px 0;
}

.hhg-header-bar {
  height: 54px;
  width: 72%;
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  gap: 12px;
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  cursor: default;
  overflow: visible;
}

.hhg-header-title {
  flex: 1;
  text-align: center;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.hhg-header-dot {
  width: 54px; height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  right: -8px;
}

/* Per-color darker dot on header bar (matches main menu dots) */
.hhg-header-bar.c-purple .hhg-header-dot { background: #4a1a56; }
.hhg-header-bar.c-blue   .hhg-header-dot { background: #2a5fa3; }
.hhg-header-bar.c-green  .hhg-header-dot { background: #2a7a2e; }
.hhg-header-bar.c-orange .hhg-header-dot { background: #c86a00; }
.hhg-header-bar.c-pink   .hhg-header-dot { background: #9c1145; }
.hhg-header-bar.c-red    .hhg-header-dot { background: #9b1515; }

.hhg-back-btn {
  background: none;
  border: none;
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.hhg-back-btn:hover { opacity: 0.75; }

/* Section content area */
.hhg-content {
  padding: 40px 50px 20px;
  max-width: 900px;
}

/* Scene-selection screens — bars fill full width */
#screen-experience .hhg-content,
#screen-education  .hhg-content,
#screen-projects   .hhg-content {
  padding: 0;
  max-width: 100%;
}

/* =====================
   ABOUT SCREEN
   ===================== */
#screen-about {
  background: var(--hhg-yellow);
  overflow: hidden;
}

/* Pink panel — animated up on enter, down on exit */
.hhg-about-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80%;
  background: var(--hhg-hotpink);
  z-index: 0;
  will-change: transform;
}

#screen-about .hhg-screen-header,
#screen-about .hhg-screen-inner {
  position: relative;
  z-index: 1;
}

#screen-about .hhg-screen-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#screen-about .hhg-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  width: 100%;
  max-width: 100%;
}

/* Skills / Contact — bars flush to left edge */
#screen-skills .hhg-content,
#screen-contact .hhg-content {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

#screen-skills .hhg-skillset-title {
  padding-left: 20px;
}

#screen-skills .hhg-skillset-title[data-skillset="Good Knowledge"] {
  text-align: right;
  padding-left: 0;
  padding-right: 20px;
}

/* =====================
   COLORS
   ===================== */
.c-purple { background: var(--hhg-purple); }
.c-blue   { background: var(--hhg-blue); }
.c-green  { background: var(--hhg-green); }
.c-orange { background: var(--hhg-orange); }
.c-pink   { background: var(--hhg-pink); }
.c-red    { background: var(--hhg-red); }

/* =====================
   PROFILE / ABOUT
   ===================== */
.hhg-profile {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: #e8dfc0;
  border-radius: 18px;
  padding: 28px 32px;
  max-width: 820px;
  width: 100%;
}

.hhg-profile-photo {
  width: 180px; height: 220px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.hhg-profile-text {
  flex: 1;
  min-width: 180px;
  font-family: var(--hhg-font);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  font-weight: 900;
  line-height: 1.8;
  color: #2a3a5e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hhg-profile-location {
  margin-top: 14px;
  font-family: var(--hhg-font);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hhg-purple);
  font-weight: 900;
}

/* =====================
   SKILLS
   ===================== */
.hhg-skillset-title {
  font-family: var(--hhg-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  color: #555;
  margin: 22px 0 8px;
}

.hhg-skill-row {
  margin-bottom: 5px;
  display: flex;
}

.hhg-skill-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 0 22px 22px 0;   /* rounded RIGHT end */
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 100px;
}

/* Good Knowledge — mirrored: rounded LEFT end, flush right */
.hhg-skill-bar[data-skillset="Good Knowledge"] {
  border-radius: 22px 0 0 22px;
  margin-left: auto;
  flex-direction: row-reverse;
}

.hhg-skill-name { flex: 1; }
.hhg-skill-pct  { font-size: 0.8rem; margin-left: 8px; opacity: 0.85; }

/* Good Knowledge — pct on the left of the reversed bar */
.hhg-skill-bar[data-skillset="Good Knowledge"] .hhg-skill-pct {
  margin-left: 0;
  margin-right: 8px;
}

/* Cycle skill colors */
.hhg-skill-row:nth-child(8n+1) .hhg-skill-bar { background: var(--hhg-purple); }
.hhg-skill-row:nth-child(8n+2) .hhg-skill-bar { background: var(--hhg-blue); }
.hhg-skill-row:nth-child(8n+3) .hhg-skill-bar { background: var(--hhg-green); }
.hhg-skill-row:nth-child(8n+4) .hhg-skill-bar { background: var(--hhg-orange); }
.hhg-skill-row:nth-child(8n+5) .hhg-skill-bar { background: var(--hhg-pink); }
.hhg-skill-row:nth-child(8n+6) .hhg-skill-bar { background: var(--hhg-red); }
.hhg-skill-row:nth-child(8n+7) .hhg-skill-bar { background: #00BCD4; }
.hhg-skill-row:nth-child(8n+8) .hhg-skill-bar { background: #8BC34A; }

/* =====================
   SCENE SELECTION — Experience, Education & Projects
   Matches the HHGTTG DVD scene selection layout: scenes come in
   PAIRS forming three grid rows, like two adjacent DVD menu rows —
     row 1: odd scene's bar (anchored left, slides in from the left)
     row 2: shared middle band holding BOTH scenes' textboxes
            (odd's hangs down off its bar, even's hangs up off its bar)
     row 3: even scene's bar (anchored right, slides in from the right)
   ===================== */

.hhg-scene-list {
  padding: 70px 0 70px;
}

.hhg-scene-pair {
  display: grid;
  /* single explicit full-width column — an implicit column would
     auto-size to content and break the items' percentage widths */
  grid-template-columns: 100%;
  grid-template-rows: 54px auto 54px;
  margin-bottom: 56px;
}

/* The scene wrapper contributes its bar + media directly as items of
   the pair grid; odd/even classes decide which rows they land in.
   (Kept in the DOM as the odd/even + colour hook for CSS and JS.) */
.hhg-scene {
  display: contents;
}

/* The coloured bar — ends at ~62% like the DVD scene bars, so the
   opposite side's textbox never covers a neighbouring bar's text */
.hhg-scene-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  width: 62%;
  overflow: visible;
}

/* Odd — bar anchored to the LEFT edge, badge capping its right tip */
.hhg-scene--odd .hhg-scene-row {
  grid-row: 1;
  grid-column: 1;
  border-radius: 0 27px 27px 0;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* Even — bar anchored to the RIGHT edge, badge capping its left tip */
.hhg-scene--even .hhg-scene-row {
  grid-row: 3;
  grid-column: 1;
  margin-left: 38%;
  border-radius: 27px 0 0 27px;
  justify-content: flex-start;
}

/* Number badge — solid darker-shade circle capping the end of the bar,
   like the dots on the main menu bars (the "pipe" end) */
.hhg-scene-num {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);        /* fallback — overridden per colour below */
  color: var(--hhg-yellow);
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hhg-scene--odd  .hhg-scene-num { margin-right: -12px; }
.hhg-scene--even .hhg-scene-num { margin-left: -12px; }

.hhg-scene-row.c-purple .hhg-scene-num { background: #4a1a56; }
.hhg-scene-row.c-blue   .hhg-scene-num { background: #2a5fa3; }
.hhg-scene-row.c-green  .hhg-scene-num { background: #2a7a2e; }
.hhg-scene-row.c-orange .hhg-scene-num { background: #c86a00; }
.hhg-scene-row.c-pink   .hhg-scene-num { background: #9c1145; }
.hhg-scene-row.c-red    .hhg-scene-num { background: #9b1515; }

/* Scene title — cream text on the bar, next to the badge */
.hhg-scene-title {
  color: var(--hhg-drive);
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.15;
  max-width: 33%;               /* keeps the title clear of the overlay boxes */
}

.hhg-scene--odd .hhg-scene-title { text-align: right; }

/* Linked scene titles (projects) keep the bar styling */
a.hhg-scene-title { text-decoration: none; }
a.hhg-scene-title:hover { text-decoration: underline; color: #fff; }

/* Image + textbox — stand in for the DVD thumbnail: both live in the
   pair's shared middle band, image nearest the screen edge, textbox
   beside it. Fixed at 33% width so neither reaches the opposite bar's
   tip (odd media: 4% + 33% < 38% where even bars start, and mirrored). */
.hhg-scene-media {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(33%, 560px);
  z-index: 3;
}

/* Odd media spans its bar's row + the band: top edge flush with the
   bar's top, hanging DOWN. The band (auto row) absorbs the overflow,
   so nothing is ever cut off. */
.hhg-scene--odd .hhg-scene-media {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: start;
  justify-self: start;
  margin-left: 4%;
}

/* Even media spans the band + its bar's row: bottom edge flush with
   the bar's bottom, hanging UP. Its image rides the bottom edge like
   the DVD thumbnails do. */
.hhg-scene--even .hhg-scene-media {
  grid-row: 2 / 4;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  align-items: flex-end;
  margin-right: 4%;
}

/* Image sits on the outer side — after the box on even rows */
.hhg-scene--even .hhg-scene-img { order: 2; }

.hhg-scene-img {
  width: 150px;
  height: 112px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fdf8e4;
  border: 5px solid #999;             /* fallback — overridden per colour below */
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.hhg-scene-box {
  flex: 1;
  min-width: 0;
  max-width: 340px;
  background: #fdf8e4;
  border: 5px solid #999;             /* fallback — overridden per colour below */
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  font-family: var(--hhg-body-font);
}

/* Border colour follows the bar colour */
.hhg-scene-row.c-purple + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-purple); }
.hhg-scene-row.c-blue   + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-blue); }
.hhg-scene-row.c-green  + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-green); }
.hhg-scene-row.c-orange + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-orange); }
.hhg-scene-row.c-pink   + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-pink); }
.hhg-scene-row.c-red    + .hhg-scene-media :is(.hhg-scene-box, .hhg-scene-img) { border-color: var(--hhg-red); }

.hhg-scene-company {
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: 0.9rem;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hhg-scene-years {
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  margin: 2px 0 6px;
}

.hhg-scene-info {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #444;
}

@media (max-width: 1200px) {
  .hhg-scene-list { padding: 20px 0 30px; }
  /* Narrow screens: no room for the shared band — the pair unrolls
     into four stacked rows (bar / its textbox / bar / its textbox) */
  .hhg-scene-pair { grid-template-rows: auto; margin-bottom: 26px; }
  .hhg-scene-row { width: 88%; }
  .hhg-scene--odd  .hhg-scene-row { grid-row: 1; }
  .hhg-scene--even .hhg-scene-row { grid-row: 3; margin-left: 12%; }
  .hhg-scene-title { max-width: none; }
  .hhg-scene-media {
    width: auto;
    justify-self: stretch;
    /* negative top margin tucks the box's matching-colour border into
       the bar above it, so bar and box read as one connected piece */
    margin: -5px 20px 16px;
  }
  .hhg-scene--odd  .hhg-scene-media { grid-row: 2; align-self: auto; margin-left: 20px; margin-right: 12%; }
  .hhg-scene--even .hhg-scene-media { grid-row: 4; align-self: auto; margin-left: 12%; margin-right: 20px; }
  .hhg-scene-img { width: 110px; height: 84px; }
  .hhg-scene-box { max-width: none; }
}

/* =====================
   CONTACTS
   ===================== */
.hhg-contact-bar {
  display: flex;
  align-items: center;
  width: 50%;
  height: 48px;
  padding: 0 18px;
  margin-bottom: 5px;
  border-radius: 0 28px 28px 0;
  color: #fff;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: filter 0.2s;
}
.hhg-contact-bar:hover { filter: brightness(1.15); color: #fff; text-decoration: none; }

.hhg-contact-label { min-width: 80px; }
.hhg-contact-value {
  flex: 1;
  text-align: right;
  font-family: var(--hhg-body-font);
  font-weight: 700;
  font-size: 0.88rem;
  padding-right: 10px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hhg-contact-cdot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.7); flex-shrink: 0; }

.hhg-contact-bar:nth-child(6n+1) { background: var(--hhg-red); }
.hhg-contact-bar:nth-child(6n+2) { background: var(--hhg-blue); }
.hhg-contact-bar:nth-child(6n+3) { background: var(--hhg-green); }
.hhg-contact-bar:nth-child(6n+4) { background: var(--hhg-orange); }
.hhg-contact-bar:nth-child(6n+5) { background: var(--hhg-purple); }
.hhg-contact-bar:nth-child(6n+6) { background: var(--hhg-pink); }

/* =====================
   MARVIN — Improbability Drive easter egg
   ===================== */
.hhg-improbability { cursor: pointer; }

/* Speech bubble hovering above the drive ball (ball sits at 50% of screen) */
.hhg-marvin {
  position: fixed;
  bottom: 145px;
  left: calc(50% - 90px);
  /* The left edge is pinned near centre so the tail meets the ball, leaving only
     (50vw + 90px) to the right. Cap the width to that, less a 20px gutter, or the
     box runs off screen between the 768px breakpoint and ~940px. */
  width: min(560px, calc(50vw + 70px));
  z-index: 120;
  background: #3c4250;
  color: #d7dbe2;
  border-radius: 14px;
  padding: 16px 20px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  font-family: var(--hhg-body-font);
}

/* Tail pointing down at the drive ball */
.hhg-marvin::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 70px;
  border: 14px solid transparent;
  border-top-color: #3c4250;
  border-bottom: none;
}

.hhg-marvin-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Marvin himself — head and shoulders peeking over the bubble's top edge */
.hhg-marvin-face {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  margin-top: -52px;                  /* pokes out above the bubble */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}

.hhg-marvin-name {
  flex: 1;
  font-family: var(--hhg-font);
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f2f4f7;
}

.hhg-marvin-close {
  background: none;
  border: none;
  color: #9aa1ad;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.hhg-marvin-close:hover { color: #fff; }

.hhg-marvin p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.hhg-marvin p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .hhg-marvin { left: 4vw; width: 92vw; bottom: 135px; }
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 768px) {
  .hhg-owner-info { padding: 20px 20px 20px; }
  .hhg-bar-fill { width: 92%; }
  .hhg-menu-bar:hover .hhg-bar-fill { width: calc(92% + 30px); }
  .hhg-content { padding: 20px; }
  .hhg-profile { flex-direction: column; align-items: center; }
  .hhg-profile-photo { width: 140px; height: 140px; }
  .hhg-drive-links { display: none; }
  .hhg-bar-label { font-size: 0.9rem; }
  .hhg-contact-bar { width: 100%; }
}