/* Project pages in the main site's look: cream paper, the wave background, Fraunces, the site's blues.
   Loaded after each project's own styles, so it only swaps colours, fonts and the top bar. */
:root {
  --site-cream: #f3e8cf;
  --site-ink: #2a4a6b;
  --site-soft: #4a7a9b;
  --site-text: #3d5a70;
  --site-muted: #5a6b80;
  --site-deep: #2e3b4e;
  --site-accent: #5ba4c9;
  --site-pale: #e3eef4;
  --site-serif: "Fraunces", Georgia, serif;
  --site-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* shared names */
  --ink: var(--site-ink);
  --body: var(--site-text);
  --muted: var(--site-muted);
  --paper: var(--site-cream);
  --line: rgba(42, 74, 107, .2);

  /* Akbank */
  --red: var(--site-ink);
  --red-deep: var(--site-deep);
  --blush: var(--site-pale);
  --font: var(--site-serif);

  /* Poseidon */
  --navy: var(--site-ink);
  --deep: var(--site-deep);
  --display: var(--site-serif);
  --sans: var(--site-serif);
  --serif: var(--site-serif);

  /* Typography */
  --paper2: #ece0c4;
  --soft: var(--site-muted);
  --cin: var(--site-ink);
  --cin-dk: var(--site-deep);

  /* You said you didn't care */
  --bg: var(--site-cream);
  --dim: var(--site-muted);
  --violet: var(--site-accent);
  --yellow: #f0a23a;

  color-scheme: light;
}

html { background: var(--site-cream) !important; }
html body { background: transparent; color: var(--site-text); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/wave-work.webp") center / cover no-repeat;
  opacity: .55;
}

/* Top bar: the site's pill menu */
.pbar {
  position: sticky; top: 0; z-index: 50;
  padding: 12px max(16px, 4vw) !important;
  max-width: none !important; margin: 0 !important;
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--site-serif) !important; color: var(--site-ink) !important;
  border: 0 !important; box-shadow: none !important;
}
.pbar a {
  font-weight: 700 !important; font-size: 16px !important; color: var(--site-ink) !important;
  text-decoration: none !important; background: #fff !important; border: 0 !important;
  border-radius: 9999px !important; padding: 6px 18px !important;
  transition: transform .15s;
}
.pbar a:hover { transform: translateY(-2px); }
.pbar .lang { display: flex; gap: 6px; background: transparent !important; border: 0 !important; padding: 0 !important; }
.pbar .lang a { padding: 4px 12px !important; font-size: 13px !important; }
.pbar .lang a[aria-current] { background: var(--site-ink) !important; color: #fff !important; }

/* You said you didn't care: was a dark page */
.ysydc .hero h1 .q { background: linear-gradient(100deg, var(--site-accent), var(--site-ink) 60%); -webkit-background-clip: text; background-clip: text; }
html body.ysydc { color: var(--site-text); font-family: var(--site-serif); font-size: 16px; }

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

/* No dark or coloured bands: everything sits on the cream paper like the rest of the site */
.hero, .band.red, section.dark, .dark, .end, .piha { background: transparent !important; color: var(--site-ink) !important; }
.hero h1, .hero h2, .dark h2, .end h2, .end h1, .band.red h2, .band.red h3 { color: var(--site-ink) !important; }
.hero p, .hero-copy, .dark .copy, .band.red p, .end p, .hero li { color: var(--site-text) !important; }
.dark figcaption, .dark .kicker, .hero .kicker, .end .kicker { color: var(--site-soft) !important; }
.hero .pill { background: var(--site-ink) !important; color: #fff !important; }
.hero a, .end a { color: var(--site-ink); }
.quote, .insight, .msg i { background: var(--site-ink) !important; color: #fff !important; }

/* Buttons and links: the site's solid pill buttons */
.visit, .ghost { background: var(--site-ink) !important; color: #fff !important; box-shadow: none !important; border-radius: 9999px !important; border: 0 !important; transition: transform .15s; }
.ghost { background: #fff !important; color: var(--site-ink) !important; box-shadow: inset 0 0 0 1.5px var(--site-ink) !important; }
.visit:hover, .ghost:hover { transform: translateY(-2px); }
.land-link { color: var(--site-ink) !important; border-bottom-color: var(--site-accent) !important; }
.m-name, .family span { color: var(--site-ink) !important; }
.hero h1 b { color: #fff; }

/* Cards: the site's white cards with a thin ink outline */
.ai-steps > li:nth-child(n) { background: rgba(255,255,255,.7) !important; border: 1px solid var(--site-deep) !important; border-radius: 14px; color: var(--site-text) !important; }
.ai-steps h3, .st-me, .ai-steps > li:nth-child(2) .st-who { color: var(--site-ink) !important; }
.ai-steps p, .ai-steps .st-who { color: var(--site-text) !important; }
.ai-steps > li:not(:last-child)::after { background: var(--site-ink) !important; color: #fff !important; }
.tools li { background: var(--site-pale) !important; color: var(--site-ink) !important; }
.tools li.ai, .ai-steps > li:nth-child(n) .tools li.ai { background: var(--site-ink) !important; color: #fff !important; }
.st-n, .ai-steps > li:nth-child(n) .st-n { color: var(--site-soft) !important; }

/* "At a glance": the same fact box at the top of every project */
.facts { max-width: 1100px; margin: clamp(28px, 4vw, 48px) auto; padding: 0 16px; font-family: var(--site-serif); }
.facts h2 { margin: 0 0 12px; font: 700 14px var(--site-serif) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--site-soft) !important; }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; padding: 24px 28px; background: rgba(255, 255, 255, .72); border: 1px solid var(--site-deep); border-radius: 14px; }
.facts dt { font: 700 12px var(--site-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--site-ink); }


/* ---------- Time of day, picked on the main site ---------- */
html[data-time="dawn"] { background: linear-gradient(180deg, #fbd8d6, #fde6d4 55%, #f5e1ee) fixed !important; }
html[data-time="dawn"] body::before { filter: hue-rotate(16deg) saturate(.8) brightness(1.06); }
html[data-time="dusk"] { background: linear-gradient(180deg, #f8bd8c, #f5ae96 55%, #e8a5b5) fixed !important; }
html[data-time="dusk"] body::before { filter: hue-rotate(32deg) saturate(.85) brightness(.9); }

/* Night: dark sea behind, light words in front */
html[data-time="night"] {
  background: #15203a !important;
  --site-cream: #15203a;
  --site-ink: #e9eefb;
  --site-text: #c9d3ea;
  --site-muted: #9fb0d0;
  --site-soft: #a9c4e6;
  --site-deep: rgba(233, 238, 251, .3);
  --site-pale: #24365c;
  --site-accent: #7dd3fc;
  --paper2: #1e2c4b;
  --line: rgba(233, 238, 251, .2);
  color-scheme: dark;
}
html[data-time="night"] body::before { filter: brightness(.4) saturate(1.1); opacity: .45; }
html[data-time="night"] .pbar { background: rgba(14, 22, 40, .6) !important; }
html[data-time="night"] .pbar a { background: #24365c !important; }
html[data-time="night"] .pbar .lang a[aria-current] { background: var(--site-ink) !important; color: #15203a !important; }
html[data-time="night"] .facts dl { background: rgba(30, 44, 75, .8); }
/* things filled with the ink colour keep dark words on them */
html[data-time="night"] .visit, html[data-time="night"] .quote, html[data-time="night"] .insight, html[data-time="night"] .msg i,
html[data-time="night"] .hero .pill, html[data-time="night"] .tools li.ai, html[data-time="night"] .ai-steps > li:nth-child(n) .tools li.ai,
html[data-time="night"] .ai-steps > li:not(:last-child)::after { color: #15203a !important; }
html[data-time="night"] .ghost, html[data-time="night"] .ai-steps > li:nth-child(n) { background: rgba(30, 44, 75, .85) !important; color: var(--site-ink) !important; }
/* light panels turn into dark ones at night */
html[data-time="night"] .px, html[data-time="night"] .hero-strip, html[data-time="night"] .msg,
html[data-time="night"] .funnel span, html[data-time="night"] .names span,
html[data-time="night"] .glyphbox { background: #1e2c4b !important; }
html[data-time="night"] section.paper, html[data-time="night"] .take { background: transparent !important; }
html[data-time="night"] { --clip: #1e2c4b; }
html[data-time="night"] .hero h1 b { color: #15203a !important; }

/* Phones: the back link stays on one line */
@media (max-width: 480px) {
  .pbar a:first-child { white-space: nowrap; font-size: 14px !important; padding: 6px 14px !important; }
  .pbar .lang a { padding: 4px 10px !important; }
}
.pbar a, .pbar .lang a { font-family: var(--site-serif) !important; }

/* No rubber-band gap above the top bar when pulled down */
html, body { overscroll-behavior-y: none; }


/* Arriving on a project page: the top bar stays put, the page content rises in */
@keyframes pt-in { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: no-preference) {
  html body > :not(.pbar, script, dialog, svg) { animation: pt-in .55s cubic-bezier(.16, 1, .3, 1) backwards; }
}

/* Phones: two-column blocks become one column that never grows wider than the screen
   (a long Turkish word was pushing one section past the right edge), long headings wrap,
   and on very narrow phones the back link shortens instead of pushing EN / TR off screen */
@media (max-width: 640px) {
  .lead-grid, .pull, .land-head, .ty-bottom, .fix, .take-grid, .pair, .sec { grid-template-columns: minmax(0, 1fr) !important; }
  h1, h2, h3 { overflow-wrap: break-word; }
  .title { max-width: 100%; }
  .pbar { gap: 8px !important; }
  .pbar a:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pbar .lang { flex: none; }
}