/* ============================================================
   filokalist — dergi / magazine
   Shared stylesheet for the static prototype.
   Palette: warm-black background, ivory text, scribble-red accent.
   ============================================================ */

/* ---------- Typefaces ----------
   This line used to be an @import from Google Fonts. @import is the slowest
   possible way to load a font: the browser cannot even discover
   fonts.googleapis.com until styles.css has downloaded and parsed, then it
   opens a connection to that host, then another to fonts.gstatic.com. Three
   serialised waits before any text can render in its real face.

   All three families now live in the site itself, under assets/fonts/, subset
   to exactly the characters Turkish needs (ı İ ş ğ ü ö ç î â û) and no more.
   Side benefit: no visitor's address is ever sent to Google.

   Licence: all three are SIL Open Font License 1.1, free to self-host. */

@font-face { font-family: 'Jost'; src: url('assets/fonts/jost-300.woff2') format('woff2');
             font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('assets/fonts/jost-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'Lora'; src: url('assets/fonts/lora-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('assets/fonts/lora-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('assets/fonts/lora-400-italic.woff2') format('woff2');
             font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-500.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* default = moon / black theme */
  --bg:        #0b0b0b;
  --bg-soft:   #141312;
  --ink:       #f3efe6;   /* ivory text          */
  --ink-dim:   #b7b1a6;   /* secondary text      */
  --muted:     #7e786f;   /* captions / meta — 4.50:1 on --bg (WCAG AA) */
  --accent:    #ff4f2b;   /* scribble red — brand colour, for rules and the logo */
  --accent-text: #ff4f2b; /* same red, for small TEXT (6.24:1 on --bg) */
  --line:      #2a2825;   /* hairline borders    */
  --on-image:  #f3efe6;   /* text laid over images (fixed light) */
  --switch-bg: #1c1b19;
  --knob:      #f3efe6;
  --maxw:      44rem;     /* reading measure     */
}

/* sun / cream theme */
[data-theme="light"] {
  --bg:        #f3efe6;
  --bg-soft:   #e9e3d6;
  --ink:       #1a1815;
  --ink-dim:   #3d3a34;
  --muted:     #736c64;   /* 4.51:1 on --bg (WCAG AA) */
  --accent:    #e8431f;   /* brand red in the cream theme — rules and logo */
  --accent-text: #c93211; /* small text on cream: 4.59:1 (AA).
                             #e8431f managed only 3.26:1 here. */
  --line:      #d9d2c4;
  --switch-bg: #e3ddd0;
  --knob:      #1a1815;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ---------- Visually hidden, still readable ----------
   Text screen readers and search engines see but the eye does not.
   Do NOT use display:none — that removes it from the accessibility tree too. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" — appears only on keyboard focus. */
.skip-link:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 1100;
  width: auto; height: auto;
  margin: 0;
  padding: .7rem 1.1rem;
  clip: auto; clip-path: none;
  white-space: normal;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .92rem;
}

/* The skip target is focused programmatically; no visible outline. */
#content:focus { outline: none; }

/* The homepage <h1> is the logo and the author page <h1> is the author's
   name: reset the heading's default margins so nothing moves visually. */
.site-title { margin: 0; }
.author-name   { margin: 0; }

/* The logo is one SVG: the wordmark takes currentColor and the scribble takes
   --accent, so it follows the theme by itself with no JavaScript. */
svg.logo, svg.footer-logo {
  display: block;
  height: auto;
  color: var(--ink);
  transition: color .4s ease;
}

/* ---------- Site header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.4rem clamp(1.5rem, 5vw, 4rem);
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.site-nav a {
  width: max-content;
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--accent-text); }

.site-header .logo { width: clamp(120px, 13vw, 180px); height: auto; }

/* ---------- Homepage feed ---------- */
.feed {
  max-width: 1180px;
  margin: 1rem auto 0;
  padding: 0 clamp(1.5rem, 5vw, 4rem) 2rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.lead {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  text-align: center;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: .03em;
  max-width: 40rem;
  margin: 0 auto 1rem;
  line-height: 1.7;
}

.card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 8;
  background: var(--bg-soft);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.82);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.card:hover img { transform: scale(1.04); filter: saturate(1) brightness(.7); }

.card::after {        /* readability scrim */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,.55), rgba(0,0,0,.35) 70%, rgba(0,0,0,.6));
}

.card-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.card-kicker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--on-image);
  margin-bottom: .9rem;
}

/* ---------- Labels sitting on top of images ----------
   This label used to be red. Measured contrast over the actual photographs:
   1.98–3.20:1 on the homepage cards, 3.42–5.13:1 on the article covers —
   against a 4.5:1 requirement. Ivory measures 5.65–14.66:1 on the same
   images. The only way to make red legible was to paint the photo nearly
   black. So the text became ivory and the brand red survives as a short rule
   above it. A rule is decoration, and decoration carries no contrast rule. */
.card-kicker::before,
.article-hero .article-kicker::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto .7rem;
  background: var(--accent);
}

.card-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--on-image);
  text-shadow: 0 2px 30px rgba(0,0,0,.7);
}

/* ---------- Footer (motto) ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.motto {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.motto span { display: block; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.6rem;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  color: var(--ink-dim);
}
.footer-nav a { transition: color .2s ease; }
.footer-nav a:hover { color: var(--accent-text); }

.footer-logo { width: 140px; opacity: .95; }

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  letter-spacing: .02em;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-dim);
  transition: color .2s ease;
}
.footer-contact a:hover { color: var(--accent-text); }
.footer-contact svg { width: 17px; height: 17px; flex: 0 0 auto; }

.footer-meta {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ============================================================
   Article (reading) pages
   ============================================================ */
.article-hero {
  position: relative;
  height: clamp(340px, 62vh, 620px);
  overflow: hidden;
}
.article-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6) saturate(.95);
}
.article-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,11,.25) 0%, rgba(11,11,11,.55) 55%, var(--bg) 100%);
}

/* In the cream theme the scrim must NOT fade to the page background: the
   text over the cover is painted --on-image, which is that same cream, so at
   the bottom it disappeared entirely. Here the scrim stays dark all the way
   down and the cover ends with a clean edge instead of dissolving into the
   page. Measured after the fix: title 6.0:1, byline (including its .72
   opacity) 4.9:1. */
[data-theme="light"] .article-hero::after {
  background: linear-gradient(to bottom,
    rgba(11,11,11,.30) 0%,
    rgba(11,11,11,.55) 55%,
    rgba(11,11,11,.72) 100%);
}

.article-hero-inner {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(2rem, 6vh, 4.5rem);
  transform: translateX(-50%);
  width: min(var(--maxw), 88vw);
  text-align: center;
}

.article-kicker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

/* Over a cover, the same label goes ivory (see the reasoning above). On
   pages with no cover (.page-head) the ground is solid, so red stays. */
.article-hero .article-kicker { color: var(--on-image); }
.article-hero .article-kicker a { color: inherit; }

.article-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.08;
  margin: 0;
  color: var(--on-image);
  text-shadow: 0 2px 40px rgba(0,0,0,.8);
}

.article-author {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .12em;
  margin-top: .9rem;
  color: var(--on-image);
  opacity: .9;
}
.article-author a { transition: color .2s; }
.article-author a:hover { color: var(--accent-text); }
.article-author .date { opacity: .8; }

.date {
  font-family: 'Poppins', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.article-body {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto;
  padding: 0 1.5rem;
  font-size: 1.16rem;
  line-height: 1.9;
  color: var(--ink-dim);
}

.article-body p { margin: 0 0 1.5rem; }

/* drop cap on the opening paragraph */
.article-body > p:first-of-type::first-letter {
  font-family: 'Jost', sans-serif;
  float: left;
  font-size: 4.2rem;
  line-height: .8;
  padding: .35rem .6rem 0 0;
  color: var(--accent);
  font-weight: 400;
}

/* Links inside prose. The global reset above strips colour and underline
   from every link — correct for the menus, but it made links in body text
   invisible. Any <a> written in an article now looks like a link on its own,
   with no hand-written style="" needed. */
.article-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .2s ease;
}
.article-body a:hover,
.article-body a:focus-visible { color: var(--ink); }

.article-body blockquote {
  margin: 2.4rem 0;
  padding: .4rem 0 .4rem 1.6rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.7;
  color: var(--ink);
}

.byline {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  /* This used to be -1rem. Because the cover (.article-hero) is
     position:relative, it painted over this line, which comes AFTER it in the
     markup, and swallowed it whole: "EDEBÎ SOHBETLER · GOGOL" had never once
     been visible on any of the five articles. */
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
}

/* prev / next series navigation */
.series-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
}
.series-nav a { color: var(--ink-dim); transition: color .2s; }
.series-nav a:hover { color: var(--accent-text); }
.series-nav .disabled { color: var(--line); pointer-events: none; }
.series-nav small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.series-nav .next { text-align: right; }

/* back to home pill */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
}
.back-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-dim);
  transition: color .2s;
}
.back-link:hover { color: var(--accent-text); }
.topbar .logo { width: 120px; }

/* ---------- Sun / moon theme switch ---------- */
.theme-switch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  width: 74px;
  height: 34px;
  border-radius: 999px;
  background: var(--switch-bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background-color .4s ease, border-color .4s ease;
}
.theme-switch svg { width: 15px; height: 15px; flex: 0 0 auto; pointer-events: none; }
.theme-switch .ts-sun  { color: #f4b740; }
.theme-switch .ts-moon { color: #aeb6c6; }

.theme-switch .ts-knob {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--knob);
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: left .28s cubic-bezier(.4,.1,.2,1), background-color .4s ease;
}
[data-theme="dark"]  .theme-switch .ts-knob { left: calc(100% - 24px - 5px); }
[data-theme="light"] .theme-switch .ts-knob { left: 5px; }
.theme-switch.dragging .ts-knob { transition: background-color .4s ease; }

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

/* ============================================================
   Page heads — the title block for pages with no cover image
   (about, contribute, team, archive, category, author)
   ============================================================ */
.page-head {
  max-width: var(--maxw);
  margin: clamp(3rem, 8vw, 6rem) auto 2.5rem;
  padding: 0 1.5rem;
  text-align: center;
}
.page-head .article-title { color: var(--ink); text-shadow: none; }
.page-head .article-author { color: var(--muted); }
.page-head .article-kicker a { transition: color .2s ease; }
.page-head .article-kicker a:hover { color: var(--ink); }
.page-head + .article-body,
.page-head + .feed { margin-top: 0; }

.article-hero .article-kicker a { transition: opacity .2s ease; }
.article-hero .article-kicker a:hover { opacity: .7; }

/* ---------- Ekip ---------- */
.people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin: 0 auto clamp(2rem, 6vw, 4rem);
  padding: 0 1.5rem;
}
.person { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.person img {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  transition: filter .3s ease;
}
.person a:hover img { filter: brightness(1.12); }
.person-name { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.person-meta {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ---------- Author page heading ---------- */
.author-head { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.author-portrait { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; }
.author-name { font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.author-head .article-kicker { margin-bottom: 0; }

/* ---------- Archive ---------- */
.archive {
  max-width: var(--maxw);
  margin: 0 auto clamp(3rem, 8vw, 5rem);
  padding: 0 1.5rem;
}
.archive-group + .archive-group { margin-top: clamp(2.5rem, 6vw, 4rem); }

.archive-group-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--ink);
  margin: 0 0 .4rem;
}
.archive-group-title a { transition: color .2s ease; }
.archive-group-title a:hover { color: var(--accent-text); }

.archive-group-desc {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0 0 1.6rem;
}

.archive-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .2rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  transition: border-color .2s ease;
}
.archive-row:last-child { border-bottom: 1px solid var(--line); }
.archive-row:hover { border-color: var(--accent); }

.archive-kicker {
  grid-column: 1 / -1;
  font-family: 'Poppins', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .3rem;
}
.archive-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink);
  line-height: 1.25;
}
.archive-author {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .site-header { flex-direction: column-reverse; align-items: flex-start; gap: 1.4rem; }
  .card { aspect-ratio: 4 / 3; }
  .archive-row { grid-template-columns: 1fr; }
  .archive-author { white-space: normal; }

  /* On phones the switch is NOT fixed. Fixed, it permanently covered the
     bottom-right corner of the screen, swallowing the last words of whichever
     line sat there — and those words changed as you scrolled. It now sits in
     the footer, in normal flow. relative rather than static, because the knob
     (.ts-knob) is absolutely positioned and needs a positioned ancestor.
     Size raised to 44px, the minimum for a touch target. */
  .theme-switch {
    position: relative;
    right: auto; bottom: auto;
    width: 88px; height: 44px;
    padding: 0 12px;
    margin-top: .2rem;
    box-shadow: none;
  }
  .theme-switch svg { width: 17px; height: 17px; }
  .theme-switch .ts-knob { width: 30px; height: 30px; }
  [data-theme="dark"]  .theme-switch .ts-knob { left: calc(100% - 30px - 7px); }
  [data-theme="light"] .theme-switch .ts-knob { left: 7px; }
}

/* ============================================================
   Print / PDF
   The screen theme is ivory text on black; on paper that became ivory on
   white, i.e. a blank page. Printing or saving a long essay as a PDF is a
   real way to read this site. This block must stay at the END of the file —
   it overrides the tokens by source order.
   ============================================================ */
@media print {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --bg:       #ffffff;
    --bg-soft:  #ffffff;
    --ink:      #000000;
    --ink-dim:  #1a1a1a;
    --muted:    #555555;
    --line:     #bbbbbb;
    --accent:   #000000;
    --accent-text: #000000;
    /* --on-image is deliberately not overridden: text over a cover image
       still sits on a dark photograph and must stay ivory. */
  }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }

  /* Everything that belongs on screen and not on paper */
  .theme-switch,
  .skip-link,
  .site-nav,
  .footer-nav,
  .series-nav,
  .back-link { display: none !important; }

  /* Keep the cover from eating half a page */
  .article-hero { height: 220pt; }

  .article-body {
    max-width: none;
    font-size: 11pt;
    color: #000;
  }
  .article-body p { orphans: 3; widows: 3; }
  .article-body blockquote { break-inside: avoid; border-left-color: #000; }
  h1, h2, h3 { break-after: avoid; }
  .card, .person, .archive-row { break-inside: avoid; }

  /* On paper you cannot see where a link goes; print the address after it. */
  .article-body a::after {
    content: " (" attr(href) ")";
    font-size: .82em;
    color: #555;
    word-break: break-all;
  }
  .article-body a[href^="#"]::after { content: ""; }

  .site-footer { border-top: 1px solid #bbb; padding-top: 1.5rem; }
  .footer-logo { width: 90px; }
}