/* photo.cukr.club — спільна основа.
   Метафора: темний експозиційний зал. Фото — єдине джерело кольору,
   усе інше відступає в тінь. Зерно плівки лежить поверх усієї сторінки. */

:root {
  --paper:      #0d0c0b;
  --paper-2:    #161412;
  --paper-3:    #1f1c19;
  --ink:        #f3ede3;
  --dim:        #8d8478;
  --line:       rgba(243, 237, 227, 0.13);
  --line-soft:  rgba(243, 237, 227, 0.07);
  --accent:     #f0a04b;
  --accent-ink: #0d0c0b;
  --danger:     #e8624a;
  --grain:      0.045;
  --shadow:     0 24px 60px rgba(0, 0, 0, 0.55);

  --font-display: "Unbounded", "Trebuchet MS", sans-serif;
  --font-body:    "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 4px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 100px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --paper:      #f1ece2;
  --paper-2:    #fbf8f2;
  --paper-3:    #ffffff;
  --ink:        #17150f;
  --dim:        #6d6555;
  --line:       rgba(23, 21, 15, 0.14);
  --line-soft:  rgba(23, 21, 15, 0.07);
  --accent:     #b45f14;
  --accent-ink: #fffaf2;
  --danger:     #b8331c;
  --grain:      0.028;
  --shadow:     0 20px 50px rgba(60, 46, 26, 0.16);

  color-scheme: light;
}

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

/* Компонентні правила задають display: grid/flex — без !important вони
   перебивають атрибут hidden, і приховані блоки лишаються на екрані. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 400ms ease, color 400ms ease;
}

/* Зерно плівки: одна SVG-текстура поверх усього, не перехоплює вказівник. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 6s steps(6) infinite;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Метадані — моноширинним, як етикетка біля експоната. */
.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ─── тумблер теми ─────────────────────────────────────────────────────── */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}

.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

.theme-toggle__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
}

:root[data-theme="light"] .theme-toggle__dot { transform: rotate(180deg); }

/* ─── кнопки ───────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1), background 220ms ease,
              color 220ms ease, border-color 220ms ease, opacity 220ms ease;
}

.btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: progress; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

/* ─── поля ─────────────────────────────────────────────────────────────── */

.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  padding: 12px 2px;
  transition: border-color 240ms ease;
}

.field::placeholder { color: var(--dim); opacity: 0.75; }
.field:focus { outline: none; border-bottom-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}