/* GRAND AVENUE STUDIOS · the studio's own pages (splash at grandavenuestudios.com, /travelball).
   Same brand as The Academy deck: gold, black, Cormorant Garamond / Big Shoulders Display / Inter. */
:root {
  --black: #050505;
  --bone: #f3efe6;
  --muted: #a39d92;
  --gold: #c8a046;
  --gold-deep: #b99137;
  --gold-hi: #f1d892;
  --gold-metal: linear-gradient(180deg, #f6e2a6 0%, #d9b45c 38%, #b99137 62%, #e7c97a 100%);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--bone); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- page backgrounds (editable in CURATE)
   Each page is one <section class="slide"> with a .slide__bg layer, like the deck's slides: CURATE swaps its
   photo and its darkness slider sets --dark (1 = as built, 0 = the bare photo). The homepage has no photo
   until one is chosen; then it shows under the same dark wash. */
.slide { position: relative; isolation: isolate; overflow: hidden; }
.slide__bg { position: absolute; z-index: -2; inset: 0; --dark: 1; background: center / cover no-repeat; }
.slide__bg::after { content: ""; position: absolute; inset: 0; background: rgba(5,5,5,calc(var(--dark) * .6)); }
.slide__bg:not([style*="url("]) { display: none; }
/* photos added in CURATE (desktop): placed by % of the page */
.cur-added { display: none; margin: 0; }
.cur-added img { display: block; width: 100%; height: auto; }
@media print, screen and (min-width: 901px) and (orientation: landscape) {
  .cur-added { display: block; position: absolute; z-index: 4; left: 35%; top: 30%; width: 30%; }
}

/* ---------------------------------------------------------------- splash */
.splash {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(36px, 6vh, 72px);
  padding: clamp(48px, 9vh, 110px) 16px clamp(32px, 5vh, 56px);
  background: radial-gradient(90% 70% at 50% 38%, #17130b 0%, #0b0a08 45%, var(--black) 100%);
}
/* the giant faint GA behind everything, as on the old homepage */
.splash::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: url(ga-monogram-gold.png) center 42% / min(118vw, 1500px) auto no-repeat;
  opacity: .045; filter: grayscale(1) brightness(2.2);
}

.studio-mark { text-align: center; animation: rise 1.4s var(--ease-out) .1s both; }
.studio-mark__h1 { margin: 0; font: inherit; }
.studio-mark__name { display: block; }
.studio-mark img {
  width: min(56vw, 440px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 10px 40px rgba(200,160,70,.22));
}
.studio-mark__name {
  margin-top: clamp(16px, 2.6vh, 28px);
  font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 48px); letter-spacing: .14em; line-height: 1;
  color: var(--gold);
}
.studio-mark__studios {
  margin: .5em 0 0; display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(14px, 1.6vw, 22px); letter-spacing: .32em; line-height: 1;
  color: var(--gold);
}
.studio-mark__studios::before, .studio-mark__studios::after {
  content: ""; width: clamp(28px, 4vw, 64px); height: 1px; background: var(--gold); opacity: .8;
}

/* the projects */
.projects {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px);
  width: min(100%, 980px);
  animation: rise 1.4s var(--ease-out) .45s both;
}
.project {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px;
  min-height: clamp(300px, 40vh, 420px);
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px) clamp(20px, 2.6vw, 30px);
  text-decoration: none; text-align: center;
  border: 1px solid rgba(200,160,70,.28); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  transition: border-color .35s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s;
}
.project:hover, .project:focus-visible {
  border-color: rgba(200,160,70,.75); transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(200,160,70,.08), rgba(255,255,255,.015));
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(200,160,70,.18);
  outline: none;
}
.project__art { flex: 1; display: grid; place-items: center; width: 100%; }
.project__kind {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
}
.project__go {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.project__go::after { content: "  →"; letter-spacing: 0; }

/* The Academy's wordmark, as on the deck's cover */
.wordmark { margin: 0; line-height: .82; display: flex; flex-direction: column; }   /* a column, so the title's margins never merge */
.wordmark__the {
  display: block; margin-bottom: .32em;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .02em; color: var(--gold);
}
.wordmark__main {
  display: block;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, 8.4vw, 116px); letter-spacing: .015em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(200,160,70,.28));
  padding: .12em 0; margin: -.12em 0;   /* room for the C's round top inside the painted box; nothing moves */
}
.wordmark__tagline {
  margin: .7em 0 0; display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 22px); color: var(--bone);
}
.wordmark__tagline::before, .wordmark__tagline::after {
  content: ""; width: clamp(18px, 2.4vw, 40px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold));
}
.wordmark__tagline::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* Travel Ball's shield */
.tb-shield { height: clamp(190px, 26vh, 290px); width: auto; filter: drop-shadow(0 14px 34px rgba(0,0,0,.55)); }

/* footer: the teaser deck, representation, copyright, address (as on the old homepage) */
.studio-foot {
  text-align: center; font-size: 12px; line-height: 1.75; color: var(--muted);
  animation: fade 1.6s ease-out .8s both;
}
.studio-foot p { margin: 0; }
.studio-foot .deck-link {
  display: inline-block; margin-bottom: 14px;
  font-size: 15px; color: var(--gold); text-underline-offset: 4px;
}
.studio-foot .deck-link:hover { color: var(--gold-hi); }

@media (max-width: 700px) {
  .projects { grid-template-columns: 1fr; }
  .project { min-height: 0; }
  .wordmark__main { font-size: clamp(64px, 21vw, 96px); }
}

/* ---------------------------------------------------------------- Travel Ball */
.tb {
  min-height: 100svh; display: grid; place-items: center;
  padding: 72px 16px 40px;
}
.tb .slide__bg { --dark: 1; filter: brightness(1.35); background-position: center 78%; animation: fade 1.8s ease-out both; }   /* the photo is graded dark for the deck; lifted here so the stadium reads */
.tb .slide__bg::after {   /* darkens the edges and the top, so the logo stands clear */
  background: radial-gradient(80% 70% at 50% 60%, transparent 40%, rgba(5,5,5,calc(var(--dark) * .5)) 100%),
              linear-gradient(180deg, rgba(5,5,5,calc(var(--dark) * .45)) 0%, transparent 22%);
}
.tb__stack { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 30px); animation: rise 1.5s var(--ease-out) .3s both; }
.tb__h1 { margin: 0; }
.tb__logo {
  height: min(68svh, 800px); width: auto; max-width: 86vw; object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.65));
}
.tb__deck {   /* the pitch deck, under the logo: a gold pill like the deck's PDF button */
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border: 1px solid rgba(200,160,70,.6); border-radius: 999px;
  background: rgba(5,5,5,.72); color: var(--gold); text-decoration: none;
  font: 600 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .25s, background .25s, color .25s;
}
.tb__deck::after { content: "↓"; letter-spacing: 0; font-size: 14px; }
.tb__deck:hover, .tb__deck:focus-visible { border-color: var(--gold); background: rgba(200,160,70,.16); color: var(--gold-hi); outline: none; }
.tb__home {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; color: var(--bone);
  opacity: .85; transition: opacity .25s;
}
.tb__home:hover { opacity: 1; }
.tb__home img { width: 44px; height: auto; }