/* ─────────────────────────────────────────────────────────────
   SPB AI & Data Science Club — dark editorial blue theme
   Schibsted Grotesk (display) + Public Sans (text) on deep navy
   ───────────────────────────────────────────────────────────── */

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

:root {
  color-scheme: dark;

  --paper:       #0c1322;   /* deep navy ground */
  --paper-deep:  #101a2e;   /* raised section panels */
  --card:        #141f36;

  --ink:         #e9eef8;   /* near-white text */
  --ink-soft:    #b4c1d8;
  --ink-faint:   #6e7f9d;

  --blue:        #3f74d4;   /* primary brand */
  --blue-deep:   #16294e;   /* dark panels */
  --blue-bright: #6494e8;   /* hover / links */
  --blue-wash:   #1a2a4a;   /* tinted fills */

  --rule:        #22304d;   /* hairlines */
  --rule-strong: #38486e;

  --ok:          #3ecb78;
  --warn:        #e3ab47;

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --font-text:    'Public Sans', 'Helvetica Neue', sans-serif;

  /* Shell width: fluid, fills ~92% of the viewport with a soft cap that only
     keeps line lengths comfortable on very large monitors. Not a fixed box. */
  --shell: min(92vw, 90rem);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blue); color: #fff; }

.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ── Masthead ── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: .85rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}
.brand img {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name em {
  font-style: normal;
  color: var(--blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}
.nav-links a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

.masthead-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.nav-github {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  transition: color .15s, border-color .15s;
}
.nav-github:hover { color: var(--ink); border-color: var(--rule-strong); }

.nav-login {
  background: var(--blue);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  padding: .5rem 1.15rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s;
}
.nav-login:hover { background: var(--blue-bright); }

/* ── GPU status pill ── */
.gpu-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .45rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: default;
  white-space: nowrap;
}
.gpu-status-pill .gd {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--rule-strong);
}
.gpu-status-pill .gd.ready { background: var(--ok); animation: gpuGlow 2s ease-in-out infinite; }
.gpu-status-pill .gd.busy  { background: var(--warn); animation: gpuGlow 1s ease-in-out infinite; }
.gpu-status-pill .gt { color: var(--ink-faint); }
.gpu-status-pill .gt.ready { color: var(--ok); }
.gpu-status-pill .gt.busy  { color: var(--warn); }
@keyframes gpuGlow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Type helpers ── */
.kicker {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.hero .container { position: relative; z-index: 1; }

.hero-blobs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 1680px);
  transform: translateX(-50%);
  pointer-events: none;
}
.blob {
  position: absolute;
  filter: blur(64px);
  will-change: transform, border-radius;
}
.blob-1 {
  width: 580px; height: 470px;
  top: -140px; left: -120px;
  opacity: .55;
  background: linear-gradient(130deg, #1e3c72, #152a51 70%);
  border-radius: 58% 42% 64% 36% / 46% 62% 38% 54%;
  animation: blobMorph 14s ease-in-out infinite alternate,
             blobDrift1 23s ease-in-out infinite alternate;
}
.blob-2 {
  width: 640px; height: 520px;
  top: -60px; right: -180px;
  opacity: .6;
  background: linear-gradient(220deg, #1a3260, #101d39 65%);
  border-radius: 38% 62% 46% 54% / 60% 38% 62% 40%;
  animation: blobMorph 18s ease-in-out infinite alternate-reverse,
             blobDrift2 29s ease-in-out infinite alternate;
}
.blob-3 {
  width: 420px; height: 360px;
  bottom: -160px; left: 38%;
  opacity: .45;
  background: linear-gradient(40deg, #2a55a0, #1b3868 75%);
  border-radius: 52% 48% 38% 62% / 44% 56% 44% 56%;
  animation: blobMorph 16s ease-in-out infinite alternate,
             blobDrift3 26s ease-in-out infinite alternate-reverse;
}

@keyframes blobMorph {
  0%   { border-radius: 58% 42% 64% 36% / 46% 62% 38% 54%; }
  35%  { border-radius: 42% 58% 48% 52% / 58% 40% 60% 42%; }
  70%  { border-radius: 64% 36% 40% 60% / 38% 58% 42% 62%; }
  100% { border-radius: 46% 54% 60% 40% / 56% 44% 58% 42%; }
}
@keyframes blobDrift1 {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(70px, 40px) rotate(9deg) scale(1.08); }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(-80px, 50px) rotate(-7deg) scale(1.12); }
}
@keyframes blobDrift3 {
  from { transform: translate(0, 0) rotate(0deg) scale(1.05); }
  to   { transform: translate(60px, -45px) rotate(6deg) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

@media (max-width: 720px) {
  .blob { filter: blur(48px); }
  .blob-1 { width: 380px; height: 320px; top: -100px; left: -110px; }
  .blob-2 { width: 420px; height: 360px; right: -160px; }
  .blob-3 { width: 300px; height: 260px; bottom: -120px; }
}

.hero .kicker { margin-bottom: 1.4rem; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 1.75rem;
}
.hero-title .amp {
  font-style: normal;
  font-weight: 400;
  color: var(--blue);
}
.hero-line { display: block; }

.hero-lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn-solid {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: .98rem;
  padding: .75rem 1.7rem;
  border-radius: 6px;
  transition: background .15s;
}
.btn-solid:hover { background: var(--blue-bright); }
.btn-solid.sm { padding: .55rem 1.3rem; font-size: .9rem; }

.btn-text {
  font-weight: 600;
  font-size: .98rem;
  color: var(--blue);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.btn-text:hover { border-bottom-color: var(--blue); }

/* ── Ticker band ── */
.ticker {
  position: relative;
  z-index: 2;
  width: 108vw;
  margin: -1.2rem -4vw 0;
  transform: rotate(-2.5deg);
  background: var(--blue-deep);
  color: #e8eefb;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 180s linear infinite;
}
.ticker-group {
  display: flex;
  align-items: center;
  padding: .72rem 0;
}
.ticker-group span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 1.4rem;
}
.ticker-group i {
  font-style: normal;
  font-size: .7rem;
  color: #7a9bd8;
}
@keyframes tickerScroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ── Page sections ── */
.section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.section + .section { border-top: 1px solid var(--rule); }

.section-head { margin-bottom: 2rem; }
.section-head .section-title { margin-top: .6rem; }

/* ── Inner pages ── */
.page-wrap { flex: 1; }

.page-header {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-header .section-title { margin-top: .6rem; }
.page-header.compact { margin-bottom: 1.75rem; }

.page-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.25rem;
}

/* ── Upcoming event hero: text left, poster tacked on the right ── */
.event-hero {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 480px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.event-hero-text .section-title { margin-top: .6rem; }
.event-hero .page-intro { margin-top: 1.5rem; }
.event-hosts {
  margin-top: 1rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .01em;
}

.poster-pin {
  position: relative;
  margin: 1rem 0 0;
  transform: rotate(1.4deg);
  transition: transform .25s ease;
}
.poster-pin:hover { transform: rotate(0deg) translateY(-2px); }
.poster-pin img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--rule);
  box-shadow: 0 16px 38px rgba(20, 31, 54, .22), 0 3px 8px rgba(20, 31, 54, .12);
}
/* Subtle pushpin holding the poster to the page */
.poster-pin::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #6ea0ff 0%, #3f74d4 45%, #29508f 100%);
  box-shadow: 0 3px 5px rgba(20, 31, 54, .4);
  z-index: 2;
}
.poster-pin::after {
  content: "";
  position: absolute;
  top: 3px; left: 50%;
  width: 2px; height: 9px;
  margin-left: -1px;
  background: rgba(20, 31, 54, .35);
  z-index: 1;
}

@media (max-width: 820px) {
  .event-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .poster-pin {
    max-width: 400px;
    margin: .5rem auto 0;
    transform: rotate(0deg);
  }
}

/* ── Map embed (Upcoming: Getting There) ── */
.map-frame {
  margin-top: 1.25rem;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 31, 54, .12);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-note {
  margin-top: 1rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.map-note .event-link { font-weight: 600; }
@media (max-width: 640px) {
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ── Placeholders (photo / gallery) ── */
.photo-placeholder {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-deep);
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-text {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Feature photo: full width of the page column */
.photo-feature {
  position: relative;
  width: 100%;
}

/* Photo band: one straight strip drifting left to right */
.photo-band {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.photo-band-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  animation: bandDrift 80s linear infinite;
}
.photo-band:hover .photo-band-track { animation-play-state: paused; }
.photo-band-track img {
  height: 390px;
  width: auto;
  border-radius: 12px;
  border: 1px solid var(--rule);
  display: block;
  flex-shrink: 0;
}
@keyframes bandDrift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-band { overflow-x: auto; }
  .photo-band-track { animation: none; }
}
@media (max-width: 720px) {
  .photo-band-track img { height: 255px; }
}


/* ── Demo banner (projects) ── */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--blue-deep);
  border-radius: 14px 64px 14px 64px;
  transform: rotate(-.5deg);
  padding: 1.9rem 2.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  transition: background .15s;
}
.demo-banner:hover { background: #1d345e; }
.demo-banner-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: .3rem;
}
.demo-banner-sub {
  font-size: .95rem;
  line-height: 1.6;
  color: #aabfe4;
  max-width: 56ch;
}
.demo-banner { border: 1px solid var(--rule-strong); }
.demo-banner-btn {
  flex-shrink: 0;
  padding: .8rem 2rem;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  transition: background .15s;
}
.demo-banner:hover .demo-banner-btn { background: var(--blue-bright); }

/* ── Upcoming event page ── */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.event-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.event-card-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-bright);
}
.event-card-value {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.event-card-note {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.event-section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.prize-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
.prize-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--rule-strong);
  background: var(--blue-deep);
}
.prize-card.prize-1 { background: var(--blue); border-color: var(--blue-bright); }
.prize-place {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aabfe4;
}
.prize-card.prize-1 .prize-place { color: #dbe6fb; }
.prize-amount {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}
.prize-note {
  margin-top: 1rem;
  font-size: .95rem;
  color: var(--ink-soft);
}

.event-steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
}
.event-step {
  display: flex;
  gap: 1.6rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.event-step-no {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #3c5179;
}
.event-step-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .35rem;
}
.event-step-desc {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 70ch;
}

.event-facts {
  list-style: none;
  margin-top: 1.25rem;
}
.event-facts li {
  position: relative;
  padding: .55rem 0 .55rem 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.event-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  background: var(--blue);
}
.event-link {
  color: var(--blue-bright);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.event-link:hover { border-bottom-color: var(--blue-bright); }

@media (max-width: 720px) {
  .prize-row { grid-template-columns: 1fr; }
  .event-step { gap: 1rem; }
}

/* ── Project catalog ── */
.project-list { border-top: 1px solid var(--rule); }

.project-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 2rem;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.project-no {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #3c5179;
}

.project-meta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .55rem;
}
.project-meta .pcat { color: var(--ink-faint); }
.project-meta .psep { color: var(--rule-strong); margin: 0 .4rem; }

.project-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .65rem;
  transition: color .15s;
}
.project-row:hover .project-title { color: var(--blue); }

.project-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: .9rem;
}

.project-stack {
  font-size: .88rem;
  color: var(--ink-faint);
  letter-spacing: .01em;
}

.project-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .9rem;
}

/* ── About: description ── */
.about-desc {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.about-desc p {
  font-size: 1.18rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.about-desc p + p { margin-top: 1.1rem; }

/* ── About: leadership roster ── */
.roster { margin-top: 1.5rem; }

.roster-group {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 2.4rem 0 .8rem;
  border-bottom: 1px solid var(--rule-strong);
}
.roster-group:first-child { padding-top: 0; }

.roster-row {
  display: grid;
  grid-template-columns: 300px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.roster-role {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.roster-person {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.roster-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.roster-email {
  font-size: .85rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
  word-break: break-word;
  transition: color .15s;
}
.roster-email:hover { color: var(--blue); text-decoration: underline; }

.contact-block { margin-top: 3rem; }
.contact-block .kicker { margin-bottom: .9rem; }
.contact-line {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}
.contact-line a { color: var(--blue); font-weight: 500; }
.contact-line a:hover { text-decoration: underline; }
.roster-name--empty {
  font-family: var(--font-text);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}
.roster-grade {
  font-size: .9rem;
  color: var(--ink-faint);
}

/* ── Footer ── */
.footer {
  border-top: 4px double var(--rule-strong);
  margin-top: auto;
  background: var(--paper-deep);
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-left {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.footer-right {
  font-size: .9rem;
  color: var(--ink-faint);
}

/* ── Responsive ── */

/* The inline nav, full GPU pill, github, and login together need about 1240px
   on a single row. Below that, drop the nav to its own row so the masthead can
   never overflow the viewport (it was clipping the login button on tablets). */
@media (max-width: 1240px) {
  .masthead-inner { flex-wrap: wrap; row-gap: .6rem; }
  .masthead-right { margin-left: auto; }
  .nav-links { order: 5; width: 100%; margin-left: 0; }
}

@media (max-width: 900px) {
  .masthead-inner { gap: 1.25rem; }
  .brand-name { display: none; }
  .nav-links { gap: 1.1rem; }
  .roster-row { grid-template-columns: 220px 1fr auto; }
}

@media (max-width: 720px) {
  .masthead-inner {
    flex-wrap: wrap;
    gap: .55rem;
    padding: .7rem clamp(.85rem, 3vw, 1.25rem);
  }
  .brand img { width: 46px; height: 46px; }
  .masthead-right { margin-left: auto; }
  .nav-github { display: none; }
  .nav-links {
    order: 5;
    width: 100%;
    margin-left: 0;
    gap: 1.5rem;
  }

  .ticker { margin-top: -1rem; }

  .project-row {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: 2rem 0;
  }
  .project-no { font-size: 1.7rem; -webkit-text-stroke: 1px var(--rule-strong); margin-bottom: .3rem; }
  .project-links {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-top: 1.1rem;
  }


  .roster-row {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding: 1rem 0;
  }

  .photo-placeholder { height: 260px; }


  .demo-banner { flex-direction: column; align-items: flex-start; padding: 1.6rem 1.75rem; border-radius: 12px 36px 12px 36px; }
}

@media (max-width: 460px) {
  .nav-links { gap: .85rem; }
  .nav-links a { font-size: .88rem; }
  .nav-login { padding: .45rem .9rem; font-size: .82rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .photo-placeholder { height: 200px; }
}

/* ── GPU pill on small screens ──
   Keep the full "fancy" pill on phones too: the status label plus the three
   per-machine usage bars (injected by gpu-status.js) and the tap-to-open popup.
   It just gets tightened so it shares the masthead row with the logo and login
   without overflowing. The injected styles use !important, so these overrides
   are scoped to .masthead and also use !important to win. */
@media (max-width: 720px) {
  .masthead-inner { flex-wrap: wrap; }
  /* Row 1: logo on the left, status + login on the right, never overflowing */
  .brand { margin-right: auto; }
  .masthead-right {
    flex-wrap: nowrap;
    gap: .5rem;
    min-width: 0;
  }
  .masthead-right .gpu-status-pill,
  .masthead-right #gpuPill { flex-shrink: 0; }
  .masthead .gpu-bar-track { width: 30px !important; }
  .masthead #gpuPill,
  .masthead .gpu-status-pill {
    gap: .4rem !important;
    padding: .3rem .6rem !important;
  }
}
@media (max-width: 400px) {
  .masthead .gpu-bar-track { width: 22px !important; }
  .masthead .gpu-bar-pct { display: none !important; }
  .masthead .nav-login { padding: .42rem .8rem; font-size: .82rem; }
}


/* Compact photo strip shown until real photos exist */
.photo-strip {
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: var(--paper-deep);
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll reveal: a quiet rise, nothing theatrical */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* Real photos */
.photo-feature .photo-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rule);
  display: block;
}
@media (max-width: 720px) {
  .photo-feature .photo-img { height: 260px; }
}

/* Ticker separators are decorative glyphs, never italic */
.ticker i { font-style: normal; }