@font-face {
  font-family: "PressStart2P";
  src: url("../fonts/PressStart2P-Regular.woff2") format("woff2");
}

/* ===== VARIABLES ===== */

:root {
  --bg: #FDFBFB;
  --text: #070707;
  --text-inverted: #FDFBFB;
}

body.dark-mode {
  --bg: #070707;
  --text: #61F5B2;
  --text-inverted: #070707;
}

html.dark-mode {
  --bg: #070707;
  --text: #61F5B2;
  --text-inverted: #070707;
}

/* ===== RESET ===== */

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

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ===== BASE ===== */

body {
  background-color: var(--bg);
  color: var(--text);

  font-family: "PressStart2P", monospace;
  letter-spacing: 0.04em;

  min-height: 100vh;
  display: flex;
  flex-direction: column;

  transition: background-color 0.15s linear, color 0.15s linear;

  padding: 40px;
}

main {
  flex: 1;
}

/* ===== TOP BAR ===== */

.top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 80px;
}

.theme-switcher {
  display: flex;
  gap: 12px;
}

.theme-icon {
  width: 32px;
  height: 32px;

  cursor: pointer;
  image-rendering: pixelated;

  transition: transform 0.08s linear;
}

.theme-icon:hover {
  transform: translateY(-2px);
}


/* ===== HEADER ===== */

header {
  margin-top: clamp(80px, 25vh, 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-bottom: clamp(40px, 6vh, 60px);
}

h1 {
  font-size: 19.5px;
  line-height: 1.8;
  margin-bottom: 20px;
}

h2 {
  font-size: 56px;
  line-height: 1.6;
}

/* ===== LETTER ANIMATION ===== */

.letter {
  display: inline-block;  /* needed for transform to work on inline text */
  transition: transform 0.08s linear;
}

.letter:hover {
  transform: translateY(-10px);
}

/* ===== GRID ===== */

.desktop-grid {
 display: grid;
 place-items: center;
}

.desktop-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: clamp(80px, 6vw, 200px);
}

.desktop-item {
  width: 120px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  position: relative;
  cursor: pointer;
}

.desktop-item a {
  color: var(--text);
  text-decoration: none;
}

.desktop-item img {
  width: 120px;
  height: 120px;

  margin-bottom: 18px;

  display: block;
}

.desktop-item p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ===== SELECTION BOX ===== */

.desktop-item:hover::before,
.desktop-item.selected::before {
  content: "";
  position: absolute;

  top: -10px;
  left: -18px;
  right: -18px;
  bottom: -10px;

  background-color: var(--text);
  pointer-events: none;
  z-index: 0;
}

/* icon and text sit above the filled box */
.desktop-item img,
.desktop-item p {
  position: relative;
  z-index: 1;
}

/* text colour inverts on hover */
.desktop-item:hover p,
.desktop-item.selected p {
  color: var(--bg);
}

/* ===== ANIMATION ===== */

@keyframes bootFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MOBILE ===== */

@media (max-width: 1024px) {

  /* Remove desktop body padding — mobile controls its own spacing */
  body {
    padding: 0;
  }

  /* Theme switcher: scrolls with the page on mobile —
     no fixed positioning, sits at the top like normal content */
  .top-bar {
    display: flex;
    justify-content: flex-end;   /* icons stay on the right side */
    padding: 20px 24px 0;        /* matches the body's side spacing */
  }

  .theme-switcher {
    position: static;            /* scrolls with the page, not fixed */
    display: flex;
    gap: 12px;
  }

  /* top-overlay is only needed on subpages (where header is fixed/sticky).
     On the home page the header scrolls normally, so we hide the overlay. */
  .top-overlay {
    display: none;
  }

  /* ===== HEADER MOBILE =====
     Not sticky on mobile — scrolls with the page so the headline
     stays visible at its natural size without covering the icons.
     Left-aligned to match Figma. */
  header {
    position: static;          /* scrolls normally — no sticky overlap */

    margin-top: 28px;          /* smaller gap — theme icons now scroll above naturally */
    margin-left: 32px;
    margin-right: 32px;        /* symmetric margins now that icons aren't floating over text */
    margin-bottom: 0;

    align-items: flex-start;   /* left-align both text lines */
    text-align: left;
  }

  /* Subtitle (h1): "montażystka, realizatorka video, artystka wizualna"
     Rendered first in the DOM but visually sits below the big name.
     Swap order via flex so h2 appears on top. */
  header {
    flex-direction: column-reverse;  /* h2 (name) first visually, h1 (role) second */
  }

  /* Role text — small, under the name */
  h1 {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 0;
    margin-top: 18px;          /* gap between name and role */
  }

  /* Big name — PressStart2P is wide, so we use a size that fills the column
     without overflowing. 10vw ≈ 38px on a 380px screen, which gives
     ~3 chars per line and matches the 3-line Figma layout. */
  h2 {
    font-size: clamp(32px, 10vw, 56px);
    line-height: 1.5;
  }

  /* ===== GRID MOBILE =====
     Icons stack vertically, centred, with staggered fade-in. */

  .desktop-grid {
    margin-left: 0;
    margin-right: 0;
  }

  .desktop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 42px;

    margin-top: 56px;          /* space between role text and first icon */
    padding-bottom: 100px;
  }

  /* Each icon item: slightly larger than desktop for tap targets */
  .desktop-item {
    width: 140px;
    animation: bootFadeIn 0.4s ease-out both;
  }

  /* Stagger the fade-in so icons appear one by one */
  .desktop-item:nth-child(1) { animation-delay: 0.05s; }
  .desktop-item:nth-child(2) { animation-delay: 0.15s; }
  .desktop-item:nth-child(3) { animation-delay: 0.25s; }
  .desktop-item:nth-child(4) { animation-delay: 0.35s; }
  .desktop-item:nth-child(5) { animation-delay: 0.45s; }

  .desktop-item img {
    width: 140px;
    height: 140px;
  }

  .desktop-item p {
    font-size: 16px;
    margin-top: 8px;
  }
}

/* ===== PAGE HEADER (subpages) ===== */

.page-header {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;

  padding: 0 82px;
}

.page-home-link {
  display: inline-block;
  padding: 2px 6px;

  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.page-home-link:hover {
  background-color: var(--text);
  color: var(--text-inverted);
}

.page-title {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 18px;
  text-transform: uppercase;
}

/* ===== PAGE HEADER MOBILE (subpages only) ===== */

/* On subpages the header is fixed at the top so it's always visible.
   top-overlay sits behind it so scrolling content doesn't bleed through. */

@media (max-width: 1024px) {

  /* Restore the overlay for pages that have a .page-header.
     The home page has no .page-header so it stays hidden there. */
  body:has(.page-header) .top-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 80px;

    background-color: var(--bg);
    z-index: 4;

    transition: background-color 0.15s linear;
  }

  /* Fix the subpage header bar at the top */
  .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    padding: 0 20px;
    height: 80px;

    display: flex;
    align-items: center;

    z-index: 5;
  }

  .page-home-link {
    font-size: 13px;
  }

  .page-title {
    font-size: 13px;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* On subpages, fix the top-bar (theme icons) into the header bar.
     It sits at the right end of the same 80px strip as .page-header. */
  body:has(.page-header) .top-bar,
  body:has(.photo-canvas) .top-bar {
    position: fixed;
    top: 0;
    right: 20px;
    height: 80px;

    display: flex;
    align-items: center;
    padding: 0;

    z-index: 6;                  /* above .page-header so icons are always tappable */
  }
}

/* ===== SECTION TITLE ===== */

.section-title {
  text-align: center;
  margin-top: 102px;
  font-size: 18px;
}

/* ===== FOOTER ===== */

.site-footer {
  width: 100%;
  padding: 40px 0;
  text-align: center;

  margin-top: auto;

  font-size: 12px;
  letter-spacing: 0.06em;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

/* ===== VIDEO SECTION ===== */

.video-section {
  margin-top: 140px;
  padding: 0 82px;
  padding-bottom: 120px;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.video-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ===== 16:9 ASPECT RATIO WRAPPER ===== */

.video-embed-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-color: var(--text);
  opacity: 0.15;
}

.video-embed-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-embed-ratio:has(iframe) {
  opacity: 1;
}

/* ===== LAYOUT VARIANTS ===== */

.video-item--right .video-credits {
  order: 1;
}

.video-item--right .video-embed-ratio {
  order: 2;
}

/* ===== FEATURED (SHOWREEL) VIDEO ===== */

.video-item--featured {
  grid-template-columns: 1fr;
  gap: 32px;
  width: calc(75vh * 1.777);
  max-width: 90%;
  margin-top: -80px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}

.video-frame-wrapper {
  position: relative;

  border: 3px solid var(--text);
  box-shadow: 12px 12px 0 var(--text);

  margin-right: 14px;
  margin-bottom: 14px;
}

.video-embed-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background-color: var(--text);
  opacity: 0.08;
}
.video-embed-placeholder span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "PressStart2P", monospace;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;

  mix-blend-mode: difference;
}

/* ===== CREDITS TEXT ===== */

.video-credits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-credits p {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.video-credits .video-title {
  font-size: 14px;
  margin-bottom: 8px;
}

/* ===== VIDEO MOBILE ===== */

@media (max-width: 1024px) {

  .video-section {
    margin-top: 100px;
    padding: 0 32px;
    padding-bottom: 100px;
  }

  .video-list {
    gap: 72px;
  }

  .video-item {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .video-item--right .video-credits,
  .video-item--right .video-embed-ratio {
    order: unset;
  }

  .video-item--right .video-embed-ratio {
    order: 1;
  }

  .video-item--right .video-credits {
    order: 2;
  }

  .video-item--featured {
    gap: 20px;
    width: 100%;               /* override the desktop vh-based width */
    max-width: 100%;
    margin-top: 0;             /* remove the negative desktop margin */
  }

  .video-credits p {
    font-size: 12px;
  }

  .video-credits .video-title {
    font-size: 12px;
  }
}

/* ===== PHOTO CANVAS (desktop) ===== */



.photo-canvas {
  position: relative;
  width: 1440px;
  height: 4617.1px;

}

/* ===== INDIVIDUAL PHOTOS ===== */

.photo {
  position: absolute;
  object-fit: cover;
  display: block;

  outline: 0px solid var(--text);
  outline-offset: 0px;

  transition:
    outline-width 0.08s linear,
    outline-offset 0.08s linear;

  cursor: pointer;
}

.photo:hover {
  outline: 5px solid var(--text);
  outline-offset: 0px;
}

/* ===== PHOTO MOBILE ===== */

@media (max-width: 1024px) {

  .photo-canvas {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;    /* photos fill the full column width */

    gap: 6px;                /* minimal gap between photos, like a feed */
    padding: 0 8px;          /* just a sliver of breathing space on the sides */

    margin-top: 100px;       /* clear the fixed header bar */
    padding-bottom: 80px;
  }

  .photo {
    position: static;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ===== LIGHTBOX ===== */

.lightbox {
  display: none;          /* hidden until a photo is clicked */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;

  /* centres the window stack */
  justify-content: center;
  align-items: center;
}

/* when active, switch display:none to flex */
.lightbox.open {
  display: flex;
}

/* dim overlay behind everything */
.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  opacity: 0.85;
  cursor: pointer;        /* clicking overlay closes the lightbox */
}


.lightbox-window
{
  position: absolute;
  width: min(80vw, 1800px);
}

/* Main window — on top */
.lightbox-window {
  position: absolute;
  width: auto;               /* shrinks to fit content */
  max-width: min(80vw, 1800px);  /* but never too wide */
  z-index: 103;
  border: 4px solid var(--text);
  background-color: var(--bg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== TITLE BAR ===== */

.lightbox-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 6px 10px;
  border-bottom: 4px solid var(--text);
}

.lightbox-filename {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* Close button */
.lightbox-close {
  width: 26px;
  height: 26px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: none;              /* remove — the icon has its own border */
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;

  font-family: "PressStart2P", monospace;
  padding: 0;

  transition: background-color 0.08s linear, color 0.08s linear;
}

.lightbox-close-icon {
  width: 26px;
  height: 26px;
  display: block;
  image-rendering: pixelated;
}

.lightbox-close:hover {
  background-color: transparent;  /* icon handles its own hover fill */
}

/* ===== PHOTO INSIDE WINDOW ===== */

.lightbox-photo-wrap {
  width: 100%;
}

.lightbox-photo {
  display: block;
  width: auto;               /* don't stretch horizontally */
  max-width: min(80vw, 1000px);  /* match the window's max */
  height: auto;
  max-height: 80vh;          /* never taller than viewport */
  object-fit: contain;
}
/* ===== MOBILE ===== */

@media (max-width: 1024px) {

  .lightbox-window {
    width: 90vw;
    max-width: 90vw;
  }
}

  /* ===== CUSTOM CURSORS ===== */

/* Default cursor — everything unless overridden below */
body {
 cursor: url('../ui/cursor/light-mode/default.png') 0 0, auto;
}

body.dark-mode {
  cursor: url('../ui/cursor/dark-mode/default.png') 0 0, auto;
}

/* Pointer — links, buttons, clickable items */
a,
button,
.desktop-item,
.lightbox-close,
.theme-icon,
.branding-item,
.branding-list,
.branding-folder,
.branding-close-icon,
.branding-open-btn,
.branding-label,
.branding-video-row,
.kontakt-submit,
.kontakt-checkbox-custom,
.kontakt-checkbox-label,
.omnie-nav-item,
.omnie-contact-btn,
.omnie-nav-icon,
.dziękuję-home-btn,
.dziękuję-home-btn:hover

  {
  cursor: url('../ui/cursor/light-mode/pointer.png') 0 0, pointer;
}

body.dark-mode a,
body.dark-mode button,
body.dark-mode .desktop-item,
body.dark-mode .lightbox-close,
body.dark-mode .theme-icon,
body.dark-mode .branding-item,
body.dark-mode .branding-list,
body.dark-mode .branding-folder,
body.dark-mode .branding-close-icon,
body.dark-mode .branding-open-btn,
body.dark-mode .branding-label,
body.dark-mode .branding-video-row,
body.dark-mode .kontakt-submit,
body.dark-mode .kontakt-checkbox-custom,
body.dark-mode .kontakt-checkbox-label,
body.dark-mode .omnie-nav-item,
body.dark-mode .omnie-contact-btn,
body.dark-mode .omnie-nav-icon,
body.dark-mode .dziękuję-home-btn,
body.dark-mode .dziękuję-home-btn:hover   
{
  cursor: url('../ui/cursor/dark-mode/pointer.png') 0 0, pointer;
}

.photo {
  cursor: url('../ui/cursor/light-mode/pointer.png') 0 0, pointer;
}

body.dark-mode .photo {
  cursor: url('../ui/cursor/dark-mode/pointer.png') 0 0, pointer;
}

.kontakt-form-row .kontakt-input,
.kontakt-textarea,
.kontakt-form-bottom
{
  cursor: url('../ui/cursor/light-mode/text-select.png') 4 12, text;
}



body.dark-mode .kontakt-form-row .kontakt-input,
body.dark-mode .kontakt-textarea,
body.dark-mode .kontakt-form-bottom
{
  cursor: url('../ui/cursor/dark-mode/text-select.png') 4 12, text;
}



/* Hourglass — can apply this class via JS when needed */
.cursor-wait {
  cursor: url('../ui/cursor/light-mode/hourglass.png') 8 8, wait;
}

body.dark-mode .cursor-wait {
  cursor: url('../ui/cursor/dark-mode/hourglass.png') 8 8, wait;
}


/* =====================================================
   KONTAKT PAGE STYLES
   Paste this entire block at the end of style.css
   ===================================================== */

/* ===== MAIN LAYOUT ===== */

.kontakt-main {
  margin-top: 140px;
  padding: 0 82px;
  padding-bottom: 80px;
}

/* ===== SOCIAL ICONS ===== */

.kontakt-icons {
  display: flex;
  justify-content: center;
  gap: clamp(60px, 8vw, 160px);
  margin-bottom: 80px;
}

.kontakt-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.kontakt-icon-item a {
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kontakt-icon {
   width: 80px;
  height: 80px;
  display: block;
  margin-bottom: 18px;
}

.kontakt-icon-item p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  position: relative;
  z-index: 1;
}

/* Selection box — same as desktop items on home page */
.kontakt-icon-item::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -18px;
  right: -18px;
  bottom: -10px;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
  transition: background-color 0.08s linear;
}

.kontakt-icon-item:hover::before {
  background-color: var(--text);
}

.kontakt-icon-item img {
  position: relative;
  z-index: 1;
}

.kontakt-icon-item:hover p {
  color: var(--bg);
}

.kontakt-form-title {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 18px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FORM WRAPPER ===== */

.kontakt-form-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

/* WITH: */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== INPUTS ===== */

.kontakt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.kontakt-input,
.kontakt-textarea {
  width: 100%;
    box-sizing: border-box;
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text);

  background-color: transparent;
  border: 4px solid var(--text);

  padding: 16px 14px;

  outline: none;
  resize: none;             /* disable textarea resize handle */

  transition: background-color 0.08s linear;
}

.kontakt-textarea {
  height: 180px;
  width: 100%;
}


/* placeholder text */
.kontakt-input::placeholder,
.kontakt-textarea::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.kontakt-input,
.kontakt-textarea {
  caret-color: var(--text);
}

/* ===== AUTOFILL OVERRIDE =====
   Browsers force a blue/yellow background on autofilled inputs.
   You can't override background-color directly — the fix is a
   massive inset box-shadow in your own bg colour that sits on
   top and hides it. The long transition delay stops the browser
   animating its colour back before the shadow takes effect.    */
.kontakt-input:-webkit-autofill,
.kontakt-input:-webkit-autofill:hover,
.kontakt-input:-webkit-autofill:focus,
.kontakt-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 9999px var(--bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  font-family: "PressStart2P", monospace !important;
  transition: background-color 99999s linear 0s;
}

/* ===== FORM BOTTOM ROW ===== */

.kontakt-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

/* ===== TEXT SELECTION IN FORM ===== */

.kontakt-input::selection,
.kontakt-textarea::selection {
  background-color: var(--text);
  color: var(--bg);
}

/* ===== CHECKBOX GROUP ("> " + label as one flex unit) ===== */

/* Wraps the prompt and label together so space-between in
   .kontakt-form-bottom treats them as a single item,
   keeping the checkbox position stable whether or not
   the ">" is visible.                                       */
.kontakt-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The blinking ">" — invisible by default, takes up its
   space so nothing shifts when it appears.                  */
.kontakt-checkbox-prompt {
  visibility: hidden;
  animation: none;
  font-family: "PressStart2P", monospace;
  font-size: 14px;
  color: var(--text);
  flex-shrink: 0;
}

.kontakt-checkbox-prompt.visible {
  visibility: visible;
  animation: promptBlink 1.1s steps(1) infinite;
}

/* ===== CUSTOM CHECKBOX ===== */

.kontakt-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

/* hide the real checkbox */
.kontakt-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* custom checkbox box */
.kontakt-checkbox-custom {
  width: 18px;
  height: 18px;
  min-width: 18px;          /* prevents shrinking */
  border: 4px solid var(--text);
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
}

/* checkmark when ticked */
.kontakt-checkbox:checked + .kontakt-checkbox-custom::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: var(--text);
}

/* ===== SUBMIT BUTTON ===== */

.kontakt-submit {
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;

  color: var(--text);
  background-color: transparent;
  border: 4px solid var(--text);

  padding: 12px 24px;


  transition: background-color 0.08s linear, color 0.08s linear;
}

.kontakt-submit:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* ===== MOBILE ===== */

@media (max-width: 1024px) {

  /* Clear the fixed header bar, consistent with other subpages */
  .kontakt-main {
    margin-top: 100px;
    padding: 0 32px;
    padding-bottom: 80px;
  }

  /* Icons row — centred, tighter gap to fit 3 on narrow screens */
  .kontakt-icons {
    gap: 24px;
    margin-bottom: 48px;
  }

  .kontakt-icon {
    width: 64px;
    height: 64px;
  }

  .kontakt-icon-item p {
    font-size: 11px;
  }

  /* Hide the "Napisz do mnie:" heading — not in the Figma mobile design */
  .kontakt-form-title {
    display: none;
  }

  /* Stack the two side-by-side inputs into a single column */
  .kontakt-form-row {
    grid-template-columns: 1fr;
  }

  /* Bottom row: checkbox on its own line, button below it full-width */
  .kontakt-form-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .kontakt-submit {
    width: 100%;
    text-align: center;
  }
}


/* =====================================================
   PRIVACY ALERT POPUP
   ===================================================== */

.privacy-alert {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  justify-content: center;
  align-items: center;
}

.privacy-alert.open {
  display: flex;
}

.privacy-alert-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  opacity: 0.85;
  cursor: pointer;
}

.privacy-alert-window {
  position: relative;
  z-index: 1;
  width: clamp(280px, 40vw, 480px);
  border: 4px solid var(--text);
  background-color: var(--bg);
}

.privacy-alert-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 4px solid var(--text);
}

.privacy-alert-title {
  font-family: "PressStart2P", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
}

.privacy-alert-close {
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  transition: opacity 0.08s linear;
}

.privacy-alert-close:hover {
  opacity: 0.6;
}

.privacy-alert-body {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.privacy-alert-text {
  font-family: "PressStart2P", monospace;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--text);
  text-align: left;
}

.privacy-alert-btn-row {
  display: flex;
  justify-content: center;
}

.privacy-alert-ok {
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  background-color: transparent;
  border: 4px solid var(--text);
  padding: 10px 32px;
  transition: background-color 0.08s linear, color 0.08s linear;
}

.privacy-alert-ok:hover {
  background-color: var(--text);
  color: var(--bg);
}

.privacy-alert-close,
.privacy-alert-ok {
  cursor: url('../ui/cursor/light-mode/pointer.png') 0 0, pointer;
}

body.dark-mode .privacy-alert-close,
body.dark-mode .privacy-alert-ok {
  cursor: url('../ui/cursor/dark-mode/pointer.png') 0 0, pointer;
}

@media (max-width: 1024px) {
  .privacy-alert-window {
    width: 80vw;
  }

  .privacy-alert-text {
    font-size: 10px;
  }
}


/* =====================================================
   BRANDING PAGE STYLES
   ===================================================== */


/* ===== MAIN LAYOUT ===== */

h4{
  font-size: 16px;
  padding: 0 82px;
}

.branding-main {
  margin-top: 80px;
  padding: 0 82px;
  padding-bottom: 80px;
}

body:has(.branding-main) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(.branding-main) .branding-main {
  flex: 1;
}

/* ===== FOLDER LIST ===== */

.branding-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.branding-item {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ===== FOLDER ICON ===== */

.branding-folder {
  width: 120px;
  height: 120px;
  display: block;
  image-rendering: pixelated;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-left: 100px;

  outline: 0px solid transparent;
  transition: outline 0.08s linear;
}



/* ===== PROJECT LABEL ===== */

.branding-label {
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--text);

  display: inline-block;
  padding: 2px 6px;
  transition: background-color 0.08s linear, color 0.08s linear;
}

.branding-item:hover .branding-label {
  background-color: var(--text);
  color: var(--bg);
}

/* ===== BRANDING LIGHTBOX ===== */

.branding-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  justify-content: center;
  align-items: center;
}

.branding-lightbox.open {
  display: flex;
}

.branding-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  opacity: 0.85;
}

/* ===== LIGHTBOX WINDOW ===== */

.branding-lightbox-window {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 40px;
  bottom: 40px;

  border: 4px solid var(--text);
  background-color: var(--bg);
  z-index: 103;

  overflow-y: auto;
  overflow-x: hidden;

  /* hide scrollbar — content still scrolls */
  scrollbar-width: none;
}

.branding-lightbox-window::-webkit-scrollbar {
  display: none;
}

/* ===== TITLE BAR ===== */

.branding-lightbox-titlebar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap:8px;

  padding: 6px 10px;
  border-bottom: 4px solid var(--text);

  position: sticky;
  top: 0;
  background-color: var(--bg);
  z-index: 1;
}

.branding-lightbox-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  flex: 1;               /* takes up space between back btn and close btn */
  padding: 0 12px;
  order: 1;                /* appears in middle of title bar, between back and close */
}

/* Back button — shown in brand book mode */
.branding-back-btn {
  font-family: "PressStart2P", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: none;
  border: 2px solid var(--text);
  padding: 4px 8px;
  white-space: nowrap;

  order: 2;
  transition: background-color 0.08s linear, color 0.08s linear;
}

.branding-back-btn:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* Close button */
.branding-lightbox-close {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  flex-shrink: 0;
  order: 3;
}

.branding-close-icon {
  width: 26px;
  height: 26px;
  display: block;
  image-rendering: pixelated;
}

.branding-lightbox-close:hover {
  background-color: transparent;
}

/* ===== LIGHTBOX BODY ===== */

.branding-lightbox-body {
  padding: 40px 32px;
}

/* ===== PROJECT CONTENT ===== */

.branding-project-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* placeholder rectangle for projects without content yet */
.branding-placeholder-ratio {
  width: 100%;
  padding-top: 56.25%;
  background-color: var(--text);
  opacity: 0.08;
}

/* ===== HERO IMAGE ===== */

/*
  .branding-hero-wrap centres its child at 60% width.
  Used for hero image, description text, grid, and button —
  so they all share the same width and alignment.
*/
.branding-hero-wrap {
  width: 60%;
  margin: 0 auto;
}

/* WITH: */
.branding-hero-img {
  width: 100%;
  height: auto;
  display: block;
}
/* ===== DESCRIPTION TEXT ===== */

.branding-text-wrap {
  width: 60%;
  margin: 0 auto;
}

.branding-description {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* ===== SECTION WRAPPER ===== */

.branding-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== SUBHEADER ===== */

.branding-subheader {
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ===== 2x2 PREVIEW GRID ===== */

.branding-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.branding-grid-2x2 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== OPEN / EXIT BUTTON ===== */

.branding-btn-row {
  display: flex;
  justify-content: center;
}

.branding-open-btn {
  width: 180px;
  height: 50px;

  font-family: "PressStart2P", monospace;
  font-size: 16px;
  letter-spacing: 0.06em;

  color: var(--text);
  background-color: transparent;
  border: 4px solid var(--text);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background-color 0.08s linear, color 0.08s linear;
}

.branding-open-btn:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* ===== VIDEO PLACEHOLDER ROW ===== */

.branding-video-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.branding-video-placeholder {
  /* vertical 9:16 rectangle, h=345px */
  width: calc(345px * (9 / 16));
  height: 345px;
  background-color: var(--text);
  opacity: 0.08;
  flex-shrink: 0;
}

/* ===== BRAND BOOK PAGES ===== */

.branding-book-pages {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 40px;        /* space on sides, matching your spec */
}

.branding-book-pages img {
  width: 100%;
  height: auto;
  display: block;
}

/* wyjdź button row at bottom of brand book */
.branding-book-exit-row {
  display: flex;
  justify-content: center;
  padding: 48px 0 24px;
}

/* ===== MOBILE ===== */

@media (max-width: 1024px) {

  .branding-main {
    margin-top: 200px;
    padding: 0 32px;
    padding-bottom: 80px;
  }

  .branding-list {
    gap: 24px;
  }

  .branding-label {
    font-size: 13px;
  }

  .branding-lightbox-window {
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: 16px;
  }

  .branding-lightbox-body {
    padding: 20px 16px;
  }

  /* on mobile, hero and text go full width */
  .branding-hero-wrap,
  .branding-text-wrap {
    width: 100%;
  }

  .branding-grid-2x2 {
    gap: 12px;
  }

  .branding-video-row {
    flex-direction: column;
    align-items: center;
  }

  .branding-book-pages {
    padding: 0 16px;
  }
}

/* =====================================================
   O MNIE PAGE STYLES
  
   ===================================================== */

/* ===== PAGE LAYOUT ===== */

.omnie-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* 1/3 left, 2/3 right */
  gap: 40px;
  align-items: start;

  margin-top: 20px;
  padding: 0 82px;
  padding-bottom: 80px;
  min-height: calc(100vh - 200px);  /* keeps footer low */
}

/* ===== LEFT COLUMN ===== */

.omnie-left {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 8px;
}

/* ===== NAV ITEM (document icon + label) ===== */

.omnie-nav-item {
  display: flex;
  align-items: center;
  gap: 20px;

}

.omnie-nav-icon {
  width: 120px;
  height: 120px;
  display: block;
  image-rendering: pixelated;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.omnie-nav-label {
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--text);

  display: inline-block;
  padding: 2px 6px;
  position: relative;
  z-index: 1;
  transition: background-color 0.08s linear, color 0.08s linear;
}

/* hover state */
.omnie-nav-item:hover .omnie-nav-label {
  background-color: var(--text);
  color: var(--bg);
}

/* active state — stays inverted when selected */
.omnie-nav-item--active .omnie-nav-label {
  background-color: var(--text);
  color: var(--bg);
}


/* blink jak w terminalu */
@keyframes promptBlink {
  0%, 49% { visibility: visible; }
  50%, 100% { visibility: hidden; }
}

/* ===== RIGHT COLUMN — CONTENT PANEL ===== */


.omnie-panel {
  border: 4px solid var(--text);
  background-color: var(--bg);
}

/* ===== PANEL TITLE BAR ===== */

.omnie-panel-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 6px 10px;
  border-bottom: 4px solid var(--text);
}

.omnie-panel-title {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text);
}



/* ===== PANEL BODY ===== */

.omnie-panel-body {
  padding: 40px 48px;
  min-height: 400px;        /* prevents panel from collapsing */
}

/* ===== PANEL CONTENT ===== */

.omnie-content-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading — "Nad czym możemy razem pracować?" */
.omnie-panel-heading {
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ===== OFFER GRID (oferta panel) — 3 columns x 2 rows ===== */

.omnie-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}

/* Each grid cell: icon stacked above a centred label */
.omnie-offer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.omnie-offer-icon {
  width: 90px;
  height: 90px;
  display: block;
  image-rendering: pixelated;
}

.omnie-offer-label {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* Bio text paragraphs — no longer used by "poznajmy się" (replaced by the
   photo feed below) but left in place in case it's reused elsewhere. */
.omnie-bio-text {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* =====================================================
   POZNAJMY SIĘ — EDITORIAL PHOTO FEED
   A simple top-to-bottom stack of rows — no fixed
   coordinates. See the HTML comments in about.html for
   how to add a new row. New rows go at the TOP of the feed.
   ===================================================== */

.poznajmy-feed {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* Each row: two columns side by side, wrapping on narrow panels */
.poznajmy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

/* Modifier: row content pushed to the right (row 5 — board games) */
.poznajmy-row--right {
  justify-content: flex-end;
}

/* Modifier: the footer row (easter-egg "hej" photo, bottom-left). */
.poznajmy-row--footer {
  justify-content: flex-start;
}

.poznajmy-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1 1 260px;
}

/* Intro column (row 1 left side): location, tagline, button */
.poznajmy-col--intro {
  justify-content: center;
  gap: 20px;
}

/* Button sits left-aligned under the text here, not centred
   like its other use elsewhere on the page */
.poznajmy-col--intro .omnie-contact-btn {
  align-self: flex-start;
}

/* One photo + its caption, grouped so they move together */
.poznajmy-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.poznajmy-item--easter-egg {
  align-items: flex-start;
  max-width: 160px;
}

/* ===== TEXT ===== */

.poznajmy-location-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sized to roughly match the text's cap-height, not its literal
   font-size — a 13px-square icon would be nearly invisible at this
   pixel resolution. Adjust this if pinezka.png needs more/less room. */
.poznajmy-location-icon {
  width: 14px;
  height: 14px;
  display: block;
  image-rendering: pixelated;
}

.poznajmy-location {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.poznajmy-tagline {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.poznajmy-tagline-line {
  display: block;
}

/* Staggers the middle line, matching the zigzag in the design.
   4ch = 4 monospace characters, since the font is fixed-width. */
.poznajmy-tagline-line--indent {
  margin-left: 4ch;
}

.poznajmy-caption {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ===== PHOTOS ===== */

.poznajmy-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: cover;
}

/* The big "me.webp" hero photo gets more room */
.poznajmy-item--hero .poznajmy-photo {
  max-width: 440px;
}

/* Smaller side-by-side pairs (e.g. the two WSF photos) */
.poznajmy-photo--small {
  max-width: 220px;
}

/* Small photo (okragly.webp) — pulled left AND down by exactly
   .omnie-panel-body's padding (48px left, 40px bottom on desktop) so
   the photo's bottom-LEFT CORNER lands flush with the panel's border
   corner, not just its left edge. The "hej" caption above it is a
   sibling, not affected, so it stays at its normal padded position. */
.poznajmy-photo--easter-egg {
  width: 130px;
  height: 130px;
  max-width: 130px;
  margin-left: -48px;
  margin-bottom: -40px;

  object-fit: cover;
}

/* Wraps two or more photos that sit next to each other in one column */
.poznajmy-photo-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Wrapper used only when a caption sits ON TOP of the photo
   (the "cześć" tag on the hero photo) */
.poznajmy-photo-wrap {
  position: relative;
  display: inline-block;
}

.poznajmy-photo-caption {
  position: absolute;
  top: 16px;
  right: 16px;

  font-size: 14px;
  letter-spacing: 0.06em;

  color: var(--text-inverted);
  background-color: var(--text);
  padding: 4px 10px;
}



/* ===== CONTACT BUTTON ===== */

.omnie-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;     /* sits to the right */

  width: 300px;
  height: 50px;

  font-family: "PressStart2P", monospace;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-decoration: none;

  color: var(--text);
  background-color: transparent;
  border: 4px solid var(--text);

  transition: background-color 0.08s linear, color 0.08s linear;
}

.omnie-contact-btn:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* ===== MOBILE ===== */

@media (max-width: 1024px) {

  /* Stack the two columns into one */
  .omnie-layout {
    grid-template-columns: 1fr;
    margin-top: 100px;
    padding: 0 32px;
    gap: 40px;
    min-height: unset;
  }

  /* Left column: lay the nav items out as a horizontal row */
  .omnie-left {
    flex-direction: row;         /* side by side instead of stacked */
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 0;
    padding-top: 0;
  }

  /* Each nav item: icon on top, label centred below */
  .omnie-nav-item {
    flex-direction: column;      /* stack icon above label */
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .omnie-nav-icon {
    width: 80px;
    height: 80px;
  }

  .omnie-nav-label {
    font-size: 11px;
    text-align: center;
  }

  /* Panel takes full width */
  .omnie-panel-body {
    padding: 24px;
    min-height: unset;
  }

  .omnie-panel-heading {
    font-size: 14px;
    line-height: 1.8;
  }

  .omnie-offer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }

  .omnie-offer-icon {
    width: 64px;
    height: 64px;
  }

  .omnie-offer-label {
    font-size: 11px;
    line-height: 1.6;
  }

  .omnie-bio-text {
    font-size: 11px;
    line-height: 2;
  }

  /* ===== POZNAJMY SIĘ — PHOTO FEED MOBILE =====
     Rows stack into a single column; photos go full width;
     tilt is kept (looks fine small) but text shrinks. */

  .poznajmy-feed {
    gap: 56px;
  }

  .poznajmy-row,
  .poznajmy-row--right,
  .poznajmy-row--footer {
    flex-direction: column;
    justify-content: flex-start;
    gap: 28px;
  }

  /* .omnie-panel-body padding drops to a uniform 24px on mobile
     (same on every side), so both offsets below match that. */
  .poznajmy-photo--easter-egg {
    margin-left: -24px;
    margin-bottom: -24px;
  }

  .poznajmy-col {
    gap: 20px;
  }

  .poznajmy-photo,
  .poznajmy-item--hero .poznajmy-photo {
    max-width: 100%;
  }

  .poznajmy-photo--small {
    max-width: 45%;
  }

  .poznajmy-location,
  .poznajmy-tagline,
  .poznajmy-caption,
  .poznajmy-photo-caption {
    font-size: 11px;
  }

  .omnie-contact-btn {
    font-size: 11px;
    width: 100%;
    height: 44px;
  }
}

/* ===== DZIĘKUJĘ ===== */



.dziekuje-item img {
  width: 120px;
  height: auto;
  image-rendering: pixelated;
  display: block;
  margin: auto;
   transition: transform .2s; /* Animation */
}

.dziekuje-item img:hover {
  transform: scale(1.1); /* (150% zoom) */
}



h3{
  font-size: 40px;
}

.dziękuję-message {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin-top: -100px;
  margin-bottom: 100px;
}

.dziękuję-home-btn {
  display: inline-block;
  padding: 12px 18px;
  border: 4px solid var(--text);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-family: "PressStart2P", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s linear;
}

.dziękuję-home-btn:hover {
  background: var(--text);
  color: var(--bg);
}


/* =====================================================
   COOKIE CONSENT BANNER
   ===================================================== */

/* ── Shared banner shell ── */

.cookie-banner {
  position: fixed;
  z-index: 200;           /* above lightboxes (z-index 100) and top-bar (z-index 6) */

  background-color: var(--bg);
  border: 4px solid var(--text);

  font-family: "PressStart2P", monospace;
  color: var(--text);

  /* hidden until JS decides to show it */
  display: none;
}

.cookie-banner.visible {
  display: block;
}

/* ── Desktop layout — fixed bar across the very top ── */

@media (min-width: 1025px) {

  .cookie-banner {
    top: 0;
    left: 0;
    right: 0;

    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 4px solid var(--text);

    padding: 24px 82px;
  }

  .cookie-banner.declined {
    right: auto;
    width: 420px;

    border: 4px solid var(--text);
    padding: 16px 20px;
  }
}

/* ── Mobile layout — floating box at the bottom ── */

@media (max-width: 1024px) {

  .cookie-banner {
    bottom: 5vh;
    left: 5vw;
    right: 5vw;

    top: auto;

    border: 4px solid var(--text);

    padding: 20px;
  }
}

/* ── Initial state layout ── */

.cookie-initial {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cookie-text {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.cookie-link {
  color: var(--text);
  text-decoration: underline;
}

.cookie-link:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* Button row — two buttons side by side, centred */
.cookie-btn-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}

/* Shared button style */
.cookie-btn {
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;

  color: var(--text);
  background-color: transparent;
  border: 4px solid var(--text);

  padding: 12px 28px;

  transition: background-color 0.08s linear, color 0.08s linear;
}

.cookie-btn:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* Full-width variant */
.cookie-btn--full {
  width: 100%;
  padding: 12px 16px;
  text-align: left;
}

/* ── Mobile button fix ──
   Reduce padding and gap so both buttons fit inside the banner
   without overflowing on narrow screens                        */
@media (max-width: 1024px) {

  .cookie-btn-row {
    gap: 16px;             /* was 40px — too wide for mobile */
  }

  .cookie-btn {
    font-size: 11px;
    padding: 10px 16px;    /* was 12px 28px — shrink to fit */
    flex: 1;               /* each button takes equal share of available width */
  }

  .cookie-text {
    font-size: 11px;
  }
}

/* ── Declined state layout ── */

.cookie-declined {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-top: 24px;
}

.cookie-close {
  position: absolute;
  top: 0;
  right: 0;

  font-family: "PressStart2P", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;

  color: var(--text);
  background: none;
  border: none;
  padding: 0;

  line-height: 1;

  transition: opacity 0.08s linear;
}

.cookie-close:hover {
  opacity: 0.6;
}

/* ── Custom cursors for banner elements ── */

.cookie-btn,
.cookie-close,
.cookie-link {
  cursor: url('../ui/cursor/light-mode/pointer.png') 0 0, pointer;
}

body.dark-mode .cookie-btn,
body.dark-mode .cookie-close,
body.dark-mode .cookie-link {
  cursor: url('../ui/cursor/dark-mode/pointer.png') 0 0, pointer;
}

/* =====================================================
   VIDEO GATE (cookie consent placeholders)
   ===================================================== */

.video-gate {
  width: 100%;
  aspect-ratio: 16 / 9;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;

  padding: 40px;
  box-sizing: border-box;

  background-color: var(--bg);
  border: 4px solid var(--text);
}

.video-gate-text {
  font-family: "PressStart2P", monospace;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text);
  max-width: 600px;
}

.video-placeholder-link {
  display: block;
  text-decoration: none;
}

.video-placeholder {
  position: relative;
  background-color: var(--bg);
  border: 4px solid var(--text);
  cursor: pointer;

  opacity: 1;

  transition: background-color 0.08s linear;
}

.video-placeholder:hover {
  background-color: var(--text);
}

.video-placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 48px;
  height: 48px;

  image-rendering: pixelated;

  transition: filter 0.08s linear;
}

.video-placeholder:hover .video-placeholder-icon {
  filter: invert(1);
}

@media (max-width: 1024px) {

  .video-gate {
    padding: 24px 20px;
    gap: 20px;
  }

  .video-gate-text {
    font-size: 11px;
  }
}