/* VISITING HOURS · ZİYARET SAATLERİ — the companion site.
   Generated by build/site_lib.py. Edit the builder, never this file.
   No case transform of any kind (it prints a dotless I on «Ziyaret Saatleri»), no small-caps,
   no webfont, no CDN, no tracking, no request that leaves the page.
   The banned property is named in build/site_lib.py, not here: check S2 asserts the literal string
   is absent from everything the site ships, and a comment naming it would defeat its own guard. */

:root {
  --ground:        #faf7f2;
  --ground-raised: #f3eee5;
  --ink:           #1a1a1a;
  --ink-soft:      #56514b;
  /* --ink-faint and --accent-soft were moved on 2026-08-30 by the web panel, on a MEASUREMENT and
     not a preference: at their ratified values they set small text below the WCAG AA floor.
     The values below are the NEAREST point on each color's own lightness axis that clears 4.5:1
     — hue and saturation held, so the palette's relations are unchanged. The arithmetic and the
     twenty-one text roles that depend on it are in the panel note above CSS. Check S13 re-runs
     the ratios at every build, so this can never drift back silently. */
  --ink-faint:     #726b64;   /* was #8a8279 — 3.54:1 on --ground; now 4.91:1 */
  --rule:          #ded5c8;
  --accent:        #7a3b2e;
  --accent-soft:   #9b5c4b;   /* was #a4614f — 4.46:1 on --ground; now 4.88:1 */
  --measure:       34em;
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
           "Noto Serif", "Liberation Serif", "DejaVu Serif", "Times New Roman", Times, serif;
  --mono: "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:        #14130f;
    --ground-raised: #1c1a16;
    --ink:           #e9e3d8;
    --ink-soft:      #b4ada1;
    --ink-faint:     #888176;   /* was #837c72 — 4.21:1 on --ground-raised; now 4.51:1 */
    --rule:          #38332c;
    --accent:        #cf9c85;
    --accent-soft:   #b9836c;
  }
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}

/* nothing on this site is wider than the viewport */
img, svg, table, pre { max-width: 100%; }
img, svg { height: auto; }
pre, .scroller { overflow-x: auto; }

/* ---------- the skip link: present only where a nav is ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ground-raised);
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  z-index: 20;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- the sticky top nav ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.15rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.6rem);
}
.topnav .brand {
  font-size: 1.02rem;
  letter-spacing: 0.045em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.topnav .brand:hover { color: var(--accent); }
.topnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.15rem;
  margin: 0;
  padding: 0;
}
.topnav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.topnav a:hover { color: var(--accent); }
.topnav a[aria-current] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}
.topnav .switch {
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  padding-left: 1.15rem;
  border-left: 1px solid var(--rule);
}
.topnav .switch:hover { color: var(--accent); }

/* wrapped to its own line on a narrow screen, the rule beside the switch reads as a stray mark */
@media (max-width: 30rem) {
  .topnav .switch { border-left: 0; padding-left: 0; }
}

/* A phone held sideways has about 320 CSS pixels of height. The nav wraps to two lines there and
   then STAYS, holding roughly a third of the screen against the text for the whole story. Below
   that height it stops sticking and simply sits at the top of the document, where it is still the
   first thing reached by keyboard and by screen reader. Nothing is hidden and nothing is removed;
   the bar stops following the reader down a page it no longer fits. */
@media (max-height: 26rem) {
  .topnav { position: static; }
}

/* ---------- the measure ---------- */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.4rem, 7vw, 5rem) clamp(1.15rem, 5vw, 2rem) 4rem;
  /* «Skip to the text» scrolls #content to the top of the viewport, where the sticky nav is
     already sitting. Without this the reader who used the skip link — the one reader who most
     needs it to work — arrives with the first lines under the bar.
     THE VALUE IS MEASURED, NOT ESTIMATED. The bar wraps as the screen narrows, and its height was
     read off the rendered page at six widths on 2026-08-30: 320px -> 111, 360 -> 84, 390 and
     430 -> 78, 768 and 1280 -> 51. The first guess here was 4.6rem, which cleared the bar at 768
     and left the text under it at every phone width — the widths where a skip link matters most.
     So the narrow case takes the widest measurement and the wide case relaxes below. */
  scroll-margin-top: 7rem;                                /* 112px — clears the 111px wrapped bar */
}

@media (min-width: 48rem) {
  main { scroll-margin-top: 4rem; }                       /* 64px — clears the 51px single-line bar */
}

/* On a short screen the bar above has stopped sticking, so there is nothing left for the skip link
   to clear and a reserved gap would just be 112px of nothing. This block must stand AFTER the two
   above: all three set the same property at the same specificity, so the cascade decides, and
   ordering is the whole of the rule. */
@media (max-height: 26rem) {
  main { scroll-margin-top: 0; }
}
main.wide { max-width: 52em; }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 0.6rem;
}
h1 { font-size: clamp(1.5rem, 4.4vw, 1.95rem); }
h2 { font-size: 1.22rem; margin-top: 2.6rem; }
h3 { font-size: 1.03rem; margin-top: 1.8rem; }

p { margin: 0 0 1.05rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-soft); }

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.6rem 0;
}

.quiet { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 0.9rem; }

/* A published criterion is machinery, not prose. It is set in the mono face so it reads as
   something to be re-run, and it is the one place on the site where a straight quote is correct. */
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--ground-raised);
  padding: 0.08em 0.3em;
  border-radius: 2px;
}

/* ---------- the cover ---------- */
.cover {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cover-title {
  margin: 0 0 1.6rem;
  font-size: clamp(1.75rem, 6.2vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: 0.012em;
}
.cover-title span { display: block; }
.cover-title .alt { color: var(--ink-soft); }
.cover-author {
  margin: 0 0 2.6rem;
  font-size: 1.03rem;
  color: var(--ink-soft);
}
.cover-line {
  margin: 0 0 0.35rem;
  color: var(--ink-faint);
  font-size: 0.96rem;
}
/* The year, ADDED 2026-08-30 at the author's word. Vera's cover stacks four cities and their
   years; this book is one unnamed city, so it carries the year alone. Derived from the book's own
   "First edition, YYYY", never typed. */
.cover-year {
  margin: 1.5rem 0 0;
  color: var(--ink-faint);
  font-size: 0.96rem;
  letter-spacing: 0.06em;
}
.doors {
  margin-top: 2.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.4rem;
}
.doors a {
  font-size: 1.06rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.18rem;
}
.doors a:hover { border-bottom-color: var(--accent); }

/* ---------- plain lists of facts ---------- */
dl.facts { margin: 0; }
dl.facts dt {
  color: var(--ink-faint);
  font-size: 0.86rem;
  letter-spacing: 0.055em;
  margin-top: 1.5rem;
}
dl.facts dd { margin: 0.15rem 0 0; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: 0 0 0.35rem; }

/* ---------- the footer: a rule and the copyright line, and nothing else ---------- */
.foot {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.6rem clamp(1.15rem, 5vw, 2rem) 3.2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* ---------- R-33: the returned field. Nothing is printed after it, and nothing is added to
     it here either — no generated content, no pseudo-element, no rule below. ---------- */
body.field main {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.field-line {
  font-size: 1.06rem;
  letter-spacing: 0.01em;
}

/* ---------- print ----------
   read.css and guide/guide.css both @import this file, so this block is the print stylesheet of
   all 222 pages and is the only one there is.

   THE FIRST RULE HERE IS A BUG FIX, NOT A STYLE. A reader whose system is set to dark prints a
   dark page: the browser keeps the dark palette through the print pipeline, the printer drops the
   near-black background as it always does, and the light ink lands on white paper as almost
   nothing. The light values are therefore RESTATED here, where no color scheme can reach them.
   They are the same six values as :root above; they are not a second palette.

   NOTHING IS ADDED TO THE PAGE. In particular no `a::after { content: attr(href) }`: this site
   hosts the book, and printing a URL into the middle of a printed story is the site writing on
   the page. The rules below only hide chrome, keep a figure whole, and fix the ground. */
@media print {
  :root {
    --ground:        #ffffff;
    --ground-raised: #f3eee5;
    --ink:           #1a1a1a;
    --ink-soft:      #56514b;
    --ink-faint:     #726b64;
    --rule:          #ded5c8;
    --accent:        #7a3b2e;
    --accent-soft:   #9b5c4b;
  }
  body { background: #fff; color: var(--ink); }

  .topnav, .skip { display: none; }

  /* A plate is drawn 700 units wide and is held on screen in a frame that scrolls sideways.
     Paper does not scroll: the frame must open, or the right-hand third of every figure is
     guillotined at the fold. Check S11 asserts these selectors still match the built site, so a
     rename in the guide's builder convicts here instead of silently emptying this block. */
  .plate-frame { overflow: visible !important; border: 0; background: transparent; }
  .plate-svg { min-width: 0 !important; width: 100% !important; }
  figure.plate, .plate-frame, svg { break-inside: avoid; page-break-inside: avoid; }
  figure.plate figcaption { break-before: avoid; page-break-before: avoid; }

  /* the reading measure is a screen constraint; paper sets its own.
     `main.wide` is deliberately NOT named here: no page in the built site carries that class, and
     a print rule aimed at nothing is a rule nobody can tell from a rule that works. */
  main, .foot { max-width: none; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p { orphans: 2; widows: 2; }
}