/* Hayward Motivational Comedy, self-hosted rebuild: SHARED shell styles.
   Every number here was measured on the live Squarespace (Momentum) site: 2026-08-30 tokens,
   re-measured 2026-09-07 with DOM probes (reference/probes_2026-09-07/, GROUND_TRUTH_SPEC).
   Page-specific styles live in /assets/css/<page>.css, loaded after this file.
   Font: Proxima Nova via Adobe Fonts in production (George's CC kit, see README). */

:root {
  --bg: #000000;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);
  --nav: #a8a8a8;
  --nav-active: #dbd6d6;
  --pink-hover: #e382df;      /* nav hover: measured live (Momentum) 2026-09-07. George's brand pink #eb0ae4
                                 (brand_colors.md) is NOT what the live bar does; swap here if he wants it */
  --pink-soft: #f297ee;       /* p a:hover, buttons, sparkle title */
  --pink-link: #e382df;       /* body links, (map), social icons, Momentum hover underline */
  --rose-title: #e2a6a6;      /* event + gallery titles */
  --font: "proxima-nova", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bar-h: 88px;              /* desktop bar content height (+1px top border) */
  --bar-h-mobile: 44px;       /* mobile bar content height (+1px top border) */
}

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

html, body {
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.02em;   /* .32px */
  line-height: 1.7;         /* 27.2px */
}

a { color: var(--pink-link); text-decoration: none; }
p a:hover { color: var(--pink-soft) !important; }   /* George's custom CSS: colour only, no underline (live) */

/* ---------- content column (Momentum #mainContent: 1000px box, 64px padding, clears the bar) ---------- */
main {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto 86px;
  padding: 64px;
  min-height: calc(100vh - 86px);   /* live: #mainContent is 814px tall on a 900px viewport */
  background: var(--bg);
}
/* Laptop widths where the nav wraps under the logo (bar grows 88 -> 109px): live #mainContent
   gets margin-bottom 106px / min-height 794px at 1280 and 1024 (CDP-measured 2026-09-07), so
   the last row of a long page is not hidden behind the taller bar. shell.js also sets these as
   inline styles from the bar's measured height (Momentum does the same in JS), which is what
   wins on pages whose own stylesheet restates `main`'s margin; this rule is the no-JS baseline. */
@media (min-width: 737px) and (max-width: 1343px) {
  main {
    margin-bottom: 106px;
    min-height: calc(100vh - 106px);
  }
}

/* ---------- the bar (Momentum #headerWrapper, fixed at the bottom) ----------
   Live: `#headerWrapper header { padding: 30px 0 }` with the logo and the nav as INLINE-BLOCKS
   (`vertical-align: middle`), so the bar is 60px + the 28.2px link row = 88.2px (+1px #000 top
   border). Logo 20px/700/2px letter-spacing at x=35; nav ul padding-left 33px, links
   15px/300/.5px as inline-block li's with margin-right 15px (+ the inline space = 19.5px pitch);
   socials absolute right, 25px from the edge, 22px slots with 8.25px gaps.
   Momentum's JS gives #topNav a padding-right equal to the socials block (264px + 25px = 289px;
   360px on the home page, where the socials sit 72px further left), which makes the nav an atomic
   917px box: whenever logo (427px) + nav no longer fit (viewport < ~1344px; < ~1415px on the home
   page) the nav drops to a second row under the logo (links from x=33) and the bar grows to
   108.34px, socials and controls staying vertically centred. Measured 2026-09-07 at 1440, 1366,
   1280 and 1024. Do NOT go back to a fixed-height flex bar: it draws the nav under the icons. */
.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 30px 0;
  border-top: 1px solid #000;
  background: var(--bg);
  z-index: 1000;
  overflow: hidden;
  line-height: 1;
  letter-spacing: 0;
}
.bar .logo {
  display: inline-block;
  vertical-align: middle;
  padding-left: 35px;
  white-space: nowrap;
  line-height: 0;                    /* #logo h1 { line-height: 0 }: the link's 20px box IS the line */
}
.bar .logo a {
  display: inline-block;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;      /* live computed value (0.1em at 20px) */
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.bar nav {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  padding-right: 289px;              /* reserves the socials' 264px + their 25px right padding */
}
.bar.has-index nav { padding-right: 360px; }   /* home: socials are 72px further left (grid button) */
.bar nav ul {
  list-style: none;
  margin: 0;
  padding-left: 33px;
  letter-spacing: 0.32px;            /* the live ul keeps the body's .02em: the inline space between
                                        li's measures 4.47px (16px Proxima space 4.15 + .32) */
}
.bar nav li { display: inline-block; margin: 0 15px 0 0; position: relative; }
.bar nav a {
  display: block;
  color: var(--nav);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 27.2px;                                 /* live link box: 27.2px + 1px border = 28.2px */
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-bottom-color .3s;
}
.bar nav a:hover { color: var(--pink-hover); border-bottom-color: var(--pink-link); }
.bar nav a.active { color: var(--nav-active); }

.bar .socials {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -11px;
  padding-right: 25px;
  height: 22px;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
/* Momentum .sqs-svg-icon--wrapper: 22px box, overflow hidden, inner svg scaled x2 (44px)
   about the centre. The sprite symbols pad their glyphs, so this gives the live 20px glyph. */
.bar .socials a,
#mobile-menu .socials a {
  position: relative;
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 8.25px;
  overflow: hidden;
  vertical-align: middle;
}
.bar .socials a:last-child,
#mobile-menu .socials a:last-child { margin-right: 0; }
.bar .socials svg,
#mobile-menu .socials svg {
  position: absolute;
  top: -11px; left: -11px;
  width: 44px; height: 44px;
  fill: var(--pink-link);
  transition: fill 170ms ease-in-out;
}
/* Live hover (Squarespace `.sqs-svg-icon--list:hover .sqs-use--icon { fill: rgba(227,130,223,.4) }`
   + `... .sqs-svg-icon--wrapper:hover .sqs-use--icon { fill: #e382df }`): hovering the row dims
   every icon to 40% and the hovered one stays full pink. CDP-measured 2026-09-07. */
.bar .socials:hover svg,
#mobile-menu .socials:hover svg { fill: rgba(227, 130, 223, 0.4); }
.bar .socials a:hover svg,
#mobile-menu .socials a:hover svg { fill: var(--pink-link); }

/* Home page only: the socials shift 72px left to make room for the index-grid button. */
.bar.has-index .socials { padding-right: 97px; }        /* 25px + right:72px */

/* Home-page index toggle (Momentum ul.controls > li.ctrl-button: 71px box = 1px border-left
   + 8px padding + 54px glyph box + 8px, centred vertically, icon #a8a8a8, hover #e382df). */
.bar .controls {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -27px;
  height: 54px;
  line-height: 1;
}
.bar .index-toggle {
  display: block;
  width: 71px;
  height: 54px;
  padding: 0 8px 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--nav);
  transition: color .3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.bar .index-toggle:hover { color: var(--pink-link); }
.bar .index-toggle svg { display: block; margin: 0 auto; }
.bar .index-toggle .icon-grid { width: 20px; height: 20px; }
.bar .index-toggle .icon-close { display: none; width: 14px; height: 14px; }   /* live glyph inks 14x14 */
body.index-open .bar .index-toggle .icon-grid { display: none; }
body.index-open .bar .index-toggle .icon-close { display: block; }

/* While the photo index is open Momentum moves the whole bar to the TOP of the viewport
   (#headerWrapper.opened; the 1px top border slides off-screen and #header gets a 1px
   bottom border, which is why the index overlay starts at y=89). The height stays auto
   (88.2px, or 108.34px when the nav has wrapped under the logo). */
body.index-open .bar {
  top: -1px;
  bottom: auto;
  border-bottom: 1px solid #000;
}

.bar .burger { display: none; }

/* ---------- mobile menu overlay (Momentum #mobile-navigation + George's thumb-zone CSS) ---------- */
#mobile-menu { display: none; }
body.menu-open { overflow: hidden; }

@media (max-width: 736px) {
  main {
    padding: 16px;                 /* #mainContent 1em */
    margin-bottom: 43px;
    min-height: calc(100vh - 43px);
  }

  /* Mobile bar: 1px top border + 44px header + 1px bottom border (all black) = live 46px box;
     the visible black strip is 45px. */
  .bar {
    height: calc(var(--bar-h-mobile) + 2px);
    padding: 0;                    /* #headerWrapper #header { padding: 0; height: 44px } */
    border-bottom: 1px solid #000;
    display: block;
  }
  .bar .logo {
    display: block;
    padding: 0 54px;
    text-align: center;
    line-height: 44px;
    height: 44px;
  }
  .bar .logo a {
    font-size: 16px;               /* shell.js shrinks this (13px at 375/390) like TextShrink */
    letter-spacing: 2px;
    line-height: 1;
    vertical-align: middle;
  }
  .bar nav, .bar .socials { display: none; }

  /* Hamburger (.ctrl-button.menu): 54x44 box at the left, three 18px lines 2px thick,
     5px pitch, #a8a8a8; turns #333 while the menu is open. */
  .bar .burger {
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 54px; height: 44px;
    padding: 0;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  /* absolute lines: Chrome vertically centres button contents, which would ignore padding */
  .bar .burger span {
    position: absolute;
    left: 18px;
    width: 18px; height: 2px;
    background: var(--nav);
    transition: background .3s;
  }
  .bar .burger span:nth-child(1) { top: 16px; }
  .bar .burger span:nth-child(2) { top: 21px; }
  .bar .burger span:nth-child(3) { top: 26px; }
  body.menu-open .bar .burger span { background: #333; }

  /* Index toggle on mobile: 54x44 box at the right. The 30px-font grid glyph still inks 9px
     squares with a 2px gap (20x19), so the icon keeps its 20px box; the close X inks 14x14. */
  .bar .controls { top: 0; margin-top: 0; height: 44px; }
  .bar .index-toggle { width: 54px; height: 44px; padding: 0; }
  body.index-open .bar { height: calc(var(--bar-h-mobile) + 2px); }

  /* Menu open: the bar moves to the top (top:-1px hides its top border) and the menu fills
     the rest: flex column pinned to the bottom, 20px bottom padding (George's thumb zone). */
  body.menu-open .bar { top: -1px; bottom: auto; }
  body.menu-open #mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    left: 0; right: 0;
    top: 45px; bottom: 0;
    padding-bottom: 20px;
    background: var(--bg);
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #mobile-menu ul {
    list-style: none;
    text-align: right;
    padding-right: 24px;
  }
  #mobile-menu li {
    font-size: 18px;
    line-height: 44px;
    border-bottom: 1px solid #000;
  }
  #mobile-menu li a {
    display: inline-block;
    width: 100%;
    padding: 0 17px;
    color: var(--nav);              /* the active page is NOT highlighted on mobile (live) */
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.32px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .7);
  }
  #mobile-menu .socials {
    width: 100%;
    padding: 0 40px 0 17px;
    line-height: 44px;
    height: 45px;
    border-bottom: 1px solid #000;
    text-align: right;
    font-size: 0;
    white-space: nowrap;
  }
}

/* ---------- about page (mirrors the live Squarespace code block; keep in sync with
   days/2026-05-01_website_update/about-me-page-by-claude/about_page.html).
   Live measurements 2026-09-07: block padding 0 15px (first block, desktop) / 15px (mobile);
   wrap padding 40px 20px, gap 48px, margin-bottom -75px; image 42% (349px) radius 4px;
   Squarespace's own p rule wins over the block's 1.05rem: p is 16px/27.2px, margin 16px 0. */
/* Squarespace row/block geometry: .sqs-row { margin: 0 -15px } then .sqs-block { padding: 15px }
   (first block: padding-top 0 on desktop), so the content column is 872px at x=284 on 1440,
   and 358px at x=16 on a 390 phone. */
.about-block { margin: 0 -15px; padding: 0 15px; }
.about-wrap {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto -75px;
  padding: 40px 20px;
}
.about-img { flex: 0 0 42%; max-width: 42%; }
.about-img img { width: 100%; height: auto; display: block; border-radius: 4px; }
.about-text { flex: 1; color: #fff; font-size: 1.05rem; line-height: 1.75; }
.about-text p {
  font-size: 16px;
  line-height: 27.2px;
  letter-spacing: 0.02em;
  margin: 16px 0;
  color: #fff;
}
.about-text a { color: #e5a1a9; text-decoration: none; }
.about-text a:hover { text-decoration: underline; }
.about-name-wrap { position: relative; display: inline-block; }
.about-name-base { color: #e07e8b; font-weight: bold; }
.about-name-overlay {
  position: absolute; top: 0; left: 0; width: 100%;
  font-weight: bold;
  background: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(255,245,255,0.70) 50%, transparent 62%, transparent 100%);
  background-size: 300% 100%;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: name-sweep 7s ease-in-out 0.3s 1 forwards;
}
@keyframes name-sweep {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@media (max-width: 767px) {
  .about-wrap { flex-direction: column; gap: 8px; padding: 0; }
  .about-img { flex: none; max-width: 100%; width: 100%; }
  .about-img img { border-radius: 0; }
  .about-text { padding: 0 6px 24px; text-align: left; font-size: 0.95rem; margin-top: -8px; }
}
@media (max-width: 736px) {
  .about-block { margin: 0 -15px; padding: 15px; }   /* Squarespace keeps 15px block padding on all sides on mobile */
}

/* ---------- 404 page ---------- */
.notfound { padding-top: 40px; color: var(--text); }
.notfound h1 { color: var(--rose-title); font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 17px; }
.notfound p { color: var(--text-dim); margin-bottom: 16px; }

/* ---------- shows page (mirrors the Momentum event list; the events agent's shows.css may
   extend these; keep the class names stable) ---------- */
.eventlist { }
.event {
  display: flex;
  margin-bottom: 72px;
}
.event-thumb {
  flex: 0 0 305px;
  position: relative;
}
.event-thumb img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;       /* Momentum: 35% column, padding-bottom 23.333% = 305x203 */
  object-fit: cover;
}
.event-datetag {
  position: absolute;
  top: 10px; right: 10px;
  width: 70px; height: 70px;
  background: #fff;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.event-datetag .m { font-size: 14px; font-weight: 300; text-transform: uppercase; margin-bottom: 3px; }
.event-datetag .d { font-size: 26px; font-weight: 300; }
.event--past .event-datetag {
  background-image: linear-gradient(to bottom right,
    transparent calc(50% - 0.75px), #333 calc(50% - 0.75px),
    #333 calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.event-info { padding-left: 34px; flex: 1; }
.event-title {
  color: var(--rose-title);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: capitalize;
  margin-bottom: 14px;
}
.event-meta { color: var(--text-dim); }
.event-meta a { color: var(--pink-link); }
.event-desc { color: var(--text-dim); margin-top: 18px; }
.event-desc a { color: var(--pink-link); }
.event-desc a:hover { color: var(--pink-soft); }
.eventlist-divider {
  border: 0;
  border-top: 1px solid rgba(230, 230, 230, 0.8);
  margin: 68px 0;
}
@media (max-width: 736px) {
  .eventlist { padding: 0; }
  .event { flex-direction: column; }
  .event-thumb { flex: none; }
  .event-info { padding: 18px 0 0; }
  .event-title { font-size: 23px; }
}