/* Reset, type and the shell every page shares: header, footer, chips. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain: a still, faint tile on the page itself, under the content, so pictures and
   their print keep clean. Dark grains on paper, light grains on black (tools/make-grain.py).
   Gone where more contrast is asked for, and in print. */
body { background-image: url("/assets/img/grain-dark.png"); background-size: 128px 128px; }
:root[data-theme="dark"] body { background-image: url("/assets/img/grain-light.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: url("/assets/img/grain-light.png"); }
}
@media (prefers-contrast: more), print {
  body { background-image: none; }
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img, svg, canvas { display: block; }

:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.mono { font-family: var(--font-mono); }

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Header */

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

/* Placeholder mark until the logo lands: a single cell of the ocean grid. */
.wordmark-mark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  position: relative;
}
.wordmark-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--ink);
  border-radius: 1px;
}

.site-nav {
  display: flex;
  gap: var(--s-5);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.site-nav a { transition: color var(--dur-fast) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

.header-end {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Round icon buttons at the end of the header: search and the theme switch. */
.header-icons {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: -6px -8px -6px 0;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover, .icon-btn[aria-current="page"] { color: var(--ink); border-color: var(--line); }

/* Light/dark switch: shows the moon in light mode and the sun in dark, i.e. where a click goes. */
.theme-toggle svg { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.theme-toggle .icon-sun,
.theme-toggle[data-mode="dark"] .icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.theme-toggle[data-mode="dark"] .icon-sun { opacity: 1; transform: none; }

/* EN / TR: the other language, named in its own tongue, as small mono type in the icon ring. */
.lang-btn { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-decoration: none; }
.lang-btn[hidden] { display: none; }

.wordmark { white-space: nowrap; }

@media (max-width: 560px) {
  .site-nav { gap: var(--s-4); }
  .header-end { gap: var(--s-3); }
}

/* Phones: the nav and icons need the room, so the wordmark keeps only its mark. */
@media (max-width: 480px) {
  .wordmark span:not(.wordmark-mark) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* The Turkish names are longer and the language switch takes a place of its own. */
  .site-nav { gap: 10px; font-size: 0.8125rem; }
  .header-end { gap: 8px; }
  .header-icons { gap: 0; }
  .icon-btn { width: 28px; height: 28px; }
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-6) var(--gutter);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.site-footer a:hover { color: var(--ink); }
.site-footer nav { display: flex; gap: var(--s-4); }

/* Chips: filters and tags */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 28px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: var(--text-xs);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { font-family: var(--font-mono); opacity: 0.6; }
.chip--ghost { border-style: dashed; color: var(--ink-3); }

kbd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}