/* andreasalad.com — shared styles. Theme tokens live here; markup references them as var(--token). */

:root,
:root[data-theme="night"] {
  --page: #06071A;
  --ink: #F1F0FF;
  --muted: #C3C4EC;
  --line: rgba(241, 240, 255, 0.22);
  --chip: rgba(255, 255, 255, 0.07);
  --btn-bg: #F1F0FF;
  --btn-ink: #0A0E2C;
  --sky: radial-gradient(ellipse at 50% 125%, rgba(88, 70, 170, 0.55) 0%, rgba(88, 70, 170, 0) 60%),
         linear-gradient(180deg, #03051A 0%, #0A0E2C 48%, #19154A 100%);
  --cover: linear-gradient(180deg, #0B0F2E 0%, #1E1950 70%, #2C1F5E 100%);
  --cover-scrim: linear-gradient(180deg, rgba(6, 7, 26, 0) 35%, rgba(6, 7, 26, 0.9) 100%);
  --cursor: url("cursor-plane-night.svg") 4 4, auto;
  color-scheme: dark;
}

:root[data-theme="day"] {
  --page: #F5F2FB;
  --ink: #161B45;
  --muted: #363C6E;
  --line: rgba(22, 27, 69, 0.2);
  --chip: rgba(255, 255, 255, 0.42);
  --btn-bg: #161B45;
  --btn-ink: #FFFFFF;
  --sky: radial-gradient(ellipse at 82% 10%, rgba(255, 243, 236, 0.9) 0%, rgba(255, 243, 236, 0) 36%),
         linear-gradient(180deg, #84ACEA 0%, #A7BEF2 36%, #CBC5F3 70%, #E7D9F4 100%);
  --cover: linear-gradient(180deg, #A9C1F2 0%, #CBC5F3 60%, #E7D9F4 100%);
  --cover-scrim: linear-gradient(180deg, rgba(231, 217, 244, 0) 35%, rgba(231, 217, 244, 0.92) 100%);
  --cursor: url("cursor-plane-day.svg") 4 4, auto;
  color-scheme: light;
}

html, body { margin: 0; background: var(--page); }
.site { margin: 0 auto; }
a { color: inherit; }
a:hover { opacity: 0.85; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* Paper-airplane cursor, everywhere (incl. links and buttons) */
.site, .site * { cursor: var(--cursor) !important; }

/* Theme-dependent icons (sun / moon) */
:root[data-theme="night"] .show-day,
:root[data-theme="day"] .show-night { display: none; }
.show-day, .show-night { display: contents; }

/* Music player */
.player .when-playing { display: none; }
.player .when-paused { display: contents; }
.player.is-playing .when-playing { display: contents; }
.player.is-playing .when-paused { display: none; }

.eq .bar { transform-origin: bottom; transform: scaleY(.3); }
.player.is-playing .eq .bar { animation: eqb 1.1s ease-in-out infinite; }
.player.is-playing .eq .b2 { animation-duration: .8s; }
.player.is-playing .eq .b3 { animation-duration: 1.35s; }
.player.is-playing .eq .b4 { animation-duration: .95s; }
@keyframes eqb { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.player.is-playing .marquee { animation: marq 16s linear infinite; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* "See selected work" arrow */
.nudge { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }

/* Case studies fade in as they scroll into view */
.reveal { transition: opacity 1.4s cubic-bezier(.16,.84,.3,1), transform 1.4s cubic-bezier(.16,.84,.3,1), filter 1.4s cubic-bezier(.16,.84,.3,1); }
/* Hidden only once JS is confirmed running, so a script failure can never leave the tiles invisible. */
html.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(72px); filter: blur(8px); }

/* Spotify embed: loaded, controlled by the custom player, kept out of view.
   Check Spotify's developer terms before launch; if hiding isn't allowed, show it in a corner. */
.spotify-embed { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; bottom: 0; left: 0; }

@media (prefers-reduced-motion: reduce) {
  .player.is-playing .eq .bar { animation: none; transform: scaleY(.6); }
  .player.is-playing .marquee, .nudge { animation: none; }
  html.js-reveal .reveal:not(.is-visible), .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ------------------------------------------------------------ responsive --
   The markup below ~960px keeps its inline desktop styles (the canvas this
   was exported from is a fixed-width artboard), so overrides here target
   recurring inline-style fingerprints with !important rather than classes. */

@media (max-width: 960px) {
  /* shared header, every page */
  header[style*="justify-content: space-between"] { flex-wrap: wrap !important; row-gap: 14px !important; }
  nav[aria-label="Primary"] { gap: 18px !important; font-size: 14px !important; flex-wrap: wrap !important; row-gap: 10px !important; }
  div[aria-live="polite"][style*="width: 200px"] { width: 120px !important; }

  /* shared subpage hero: label-rail + 460px image grid */
  #top[style*="grid-template-columns: minmax(0, 1fr) 460px"] { grid-template-columns: 1fr !important; gap: 48px !important; padding-top: 12px !important; }
  #top[style*="grid-template-columns: minmax(0, 1fr) 460px"] > div:has(> img[style*="width: 460px; height: 600px"]) { order: -1; }
  #top div[style*="width: 460px; height: 600px"],
  #top img[style*="width: 460px; height: 600px"] { width: 100% !important; max-width: 380px !important; height: auto !important; aspect-ratio: 460 / 600; margin: 0 auto; }
  h1[style*="font-size: 76px"] { font-size: clamp(40px, 9vw, 60px) !important; }
  h1[style*="font-size: 96px"] { font-size: 56px !important; }

  /* shared body grids: 340px label column + content */
  [style*="grid-template-columns: 340px minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 1fr) 340px"],
  [style*="grid-template-columns: minmax(0, 1fr) 440px"],
  [style*="grid-template-columns: minmax(0, 1fr) 560px"],
  [style*="grid-template-columns: 420px minmax(0, 1fr)"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* property-card type matrix: scrolls at a slightly smaller fixed height on small screens */
  img[style*="height: 520px; width: auto"] { height: 380px !important; }

  /* shared two-up grids: stat tiles, case-study pager, press list */
  [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* shared dl/row grids */
  [style*="grid-template-columns: 96px minmax(0, 1fr)"] { grid-template-columns: 1fr !important; gap: 4px !important; }
  [style*="grid-template-columns: 220px minmax(0, 1fr)"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [style*="grid-template-columns: 56px 180px minmax(0, 1fr)"] { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* shared footer */
  footer#contact { margin-left: 0 !important; margin-right: 0 !important; padding-left: 24px !important; padding-right: 24px !important; height: auto !important; gap: 48px; }
  footer#contact a[href^="mailto:"][style*="font-size: 22px"] { font-size: clamp(16px, 5vw, 22px) !important; overflow-wrap: anywhere; }
  #top[style*="align-items: flex-end"][style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  footer#contact > div[style*="align-items: flex-end"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
  footer#contact h2[style*="font-size: 96px"] { font-size: 56px !important; }
  footer#contact > div[style*="justify-content: space-between"][style*="font-size: 14px"] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* press cards */
  main[style*="padding: 72px 0 120px"] { padding: 48px 0 80px !important; }

  section#work { padding: 56px 24px 112px !important; gap: 56px !important; }
  #intro { padding: 72px 24px 8px !important; }
  #intro > div { flex-direction: column-reverse !important; align-items: center !important; justify-content: flex-start !important; gap: 32px !important; }
  #intro > div > div { align-self: stretch; }
  #intro img { width: 168px !important; height: 168px !important; }
  section#top[data-sky-zone] { padding: max(140px, 53vh) 24px 104px !important; }
  #top h1 { white-space: normal; }
  span[style*="white-space: nowrap"] { white-space: normal !important; }
  section#work > article { height: auto !important; flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; }
  section#work a[style*="width: 540px; height: 540px"] { width: 100% !important; max-width: 400px !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 auto; order: -1; }
  section#work > article > div[style*="width: 600px"] { width: 100% !important; }
}

@media (max-width: 520px) {
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
  nav[aria-label="Primary"] { gap: 12px !important; font-size: 13px !important; }
  div[aria-live="polite"][style*="width: 200px"] { display: none !important; }
  h1[style*="font-size: 76px"] { font-size: clamp(34px, 10vw, 48px) !important; }
}

/* Process: swipeable step cards (scroll-snap carousel) */
.pcards { display: flex; flex-direction: column; gap: 28px; }
.pcards__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 4px 0; outline-offset: 6px; }
.pcards__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .pcards__track { scroll-behavior: smooth; } }
.pcard { flex: 0 0 min(86%, 600px); scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 28px; border: 1px solid var(--line); background: var(--chip); }
.pcard__head { display: flex; flex-direction: row; align-items: baseline; gap: 16px; }
.pcard__num { font-family: 'Playfair Display', Georgia, serif; font-size: 56px; line-height: 0.9; color: var(--ink); }
.pcard__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; font-size: 40px; line-height: 1.05; color: var(--ink); }
.pcard__body { display: flex; flex-direction: column; gap: 14px; }
.pcards__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pcards__dots { display: flex; gap: 10px; }
.pcards__dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 1px solid var(--muted); background: transparent; position: relative; }
.pcards__dot::after { content: ""; position: absolute; inset: -17px; }
.pcards__dot[aria-current="true"] { background: var(--ink); border-color: var(--ink); width: 28px; }
.pcards__arrows { display: flex; gap: 10px; }
.pcards__btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0; }
.pcards__btn:disabled { opacity: .35; }
@media (max-width: 960px) {
  .pcard { flex-basis: 88%; padding: 24px; gap: 16px; }
  .pcard__num { font-size: 44px; }
  .pcard__title { font-size: 32px; }
}

/* Hamburger nav (below 775px) */
.nav-links { display: contents; }
.nav-toggle { display: none; }
@media (max-width: 774px) {
  nav[aria-label="Primary"] { position: relative; flex-wrap: nowrap !important; gap: 10px !important; }
  .nav-toggle { width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); display: flex; align-items: center; justify-content: center; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; min-width: 220px; box-sizing: border-box; flex-direction: column; gap: 2px; padding: 10px; border-radius: 24px; border: 1px solid var(--line); background: var(--page); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
  .nav-links.is-right { left: auto; right: 0; }
  nav[aria-label="Primary"].is-open .nav-links { display: flex; }
  .nav-links a { display: block; padding: 14px 16px; border-radius: 16px; font-size: 17px !important; }
  .nav-links a:hover, .nav-links a:focus-visible { background: var(--chip); opacity: 1; }
}

/* ---- Sticky header (all pages) ---- */
header[style*="top: 36px"] {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  box-sizing: border-box; padding: 22px 64px; z-index: 40;
  background: color-mix(in srgb, var(--page) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---- Smooth anchor scrolling (e.g. "See selected work") ---- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section#work { scroll-margin-top: 24px; }

/* ---- Gutters: 24px minimum on every page, matching the homepage ---- */
main#main, #top[style*="max-width: 1200px"] { width: calc(100% - 48px); box-sizing: content-box; }
@media (max-width: 960px) {
  header[style*="top: 36px"] { padding: 14px 24px; }
  div[style*="position: relative; height: 116px"] { height: 92px !important; }
}

/* ---- Hamburger breakpoint: name + menu + theme toggle on one row, player below ---- */
@media (max-width: 774px) {
  div[style*="position: relative; height: 116px"] { height: 140px !important; }
  header[style*="top: 36px"] { flex-wrap: wrap !important; align-items: center !important; row-gap: 10px !important; column-gap: 12px; }
  header[style*="top: 36px"] > a:first-child { order: 1; flex: 1 1 auto; }
  header[style*="top: 36px"] > nav[aria-label="Primary"] { order: 2; margin-left: auto; }
  header[style*="top: 36px"] > .player { order: 3; flex: 0 0 100%; width: 100%; box-sizing: border-box; }
  header .player div[aria-live="polite"] { display: block !important; width: auto !important; flex: 1 1 auto; min-width: 0; }
}
.player button { flex: none; }

/* ---- Arch: touch drags steer the lights/clouds; page scrolls only outside it ---- */
.sky-canvas, div:has(> .sky-canvas) { touch-action: none; }

/* ---- Mobile: collapse the player to a single round button once the page is scrolled ---- */
@media (max-width: 774px) {
  header[style*="top: 36px"] > a:first-child { transition: font-size .25s ease; }
  header.is-collapsed > .player { order: 2; flex: 0 0 44px; width: 44px; padding: 0; gap: 0; justify-content: center; }
  header.is-collapsed .player .eq, header.is-collapsed .player div[aria-live="polite"], header.is-collapsed .player [data-action="next"] { display: none !important; }
  header.is-collapsed > nav[aria-label="Primary"] { order: 3; margin-left: 0; }
}

/* ---- Home: full-bleed sky behind the hero, fading to the solid page colour below the fold ---- */
.hero-sky {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 0; pointer-events: none; background: var(--sky);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
.hero-sky + .site { z-index: 1; }

/* Home: case-study tiles stay fluid between tablet and desktop widths */
@media (min-width: 961px) {
section#work a[style*="width: 540px; height: 540px"] { flex: 0 1 540px !important; width: auto !important; height: auto !important; aspect-ratio: 1 / 1; }
section#work > article { gap: 56px; }
section#work > article > div[style*="width: 600px"] { width: auto !important; flex: 1 1 0; max-width: 600px; min-width: 0; }
}
@media (min-width: 961px) and (max-width: 1280px) { section#work { padding-left: 48px !important; padding-right: 48px !important; } #intro { padding-left: 48px !important; padding-right: 48px !important; } }

/* Home: bouncing scroll cue at the bottom of the first screen */
.scroll-cue { position: absolute; left: 50%; bottom: 32px; margin-left: -22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cue 1.8s ease-in-out infinite; }
}
@keyframes cue { 0%, 100% { transform: translateY(-3px); opacity: .75; } 50% { transform: translateY(4px); opacity: 1; } }