/* civilizatio.org, an academic broadsheet.
   Paper, ink, hairlines, one accent. Nothing decorative that isn't structural. */

:root {
  --paper: #fbfaf7;
  --paper-2: #f4f2ec;
  --ink: #15140f;
  --ink-2: #3d3a32;
  --muted: #6f6a5e;
  --rule: #d8d3c6;
  --rule-strong: #15140f;
  --accent: #a8480a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --measure: 52rem;  /* one column width for the whole site: articles match the stream */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110e; --paper-2: #1a1915; --ink: #ece8de; --ink-2: #cfcabd;
    --muted: #948e80; --rule: #33312a; --rule-strong: #ece8de; --accent: #e08b46;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 19px; line-height: 1.62;
  text-rendering: optimizeLegibility;
}
.wrap { width: min(72rem, calc(100% - 2.5rem)); margin-inline: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem 1rem; z-index: 9; }

/* ------------------------------- masthead -------------------------------- */
.masthead { padding-top: 1.1rem; }
.masthead-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
.masthead-top .langs a { margin-left: .9rem; text-decoration: none; }
/* No resting underline: it sat a few pixels above the masthead rule and read as a
   second, crooked one. The globe carries the affordance instead. */
.lang-switch {
  display: inline-flex; align-items: center; gap: .42em;
  color: var(--ink-2); padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.lang-switch:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lang-switch .globe { flex: none; opacity: .8; }
.lang-switch:hover .globe { opacity: 1; }
.wordmark {
  display: block; text-align: center; text-decoration: none;
  font-size: clamp(2.4rem, 9vw, 5.6rem); line-height: 1;
  letter-spacing: .06em; font-weight: 600;
  margin: 1.4rem 0 .55rem;
}
.tagline {
  text-align: center; margin: 0 0 1.1rem;
  font-style: italic; color: var(--ink-2); font-size: 1.02rem;
}
.nav {
  border-top: 3px double var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 2.4rem;
}
.nav .wrap {
  display: flex; gap: 1.9rem; flex-wrap: wrap; justify-content: center;
  padding: .6rem 0;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
}
.nav a { text-decoration: none; color: var(--ink-2); padding-bottom: 1px; }
.nav a:hover { color: var(--accent); }
.nav a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }

/* The archive's controls. They belong to the listing, so they sit in the listing's
   column and share its left edge; a band across the full page left the category at
   one margin, the cards at another, and dead air between them. */
.controls {
  max-width: var(--measure); margin: -.6rem auto 1.8rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
}

/* A disclosure, not a row of links: the category list is open-ended, and the twentieth
   category should change the panel rather than the layout. */
.picker { position: relative; }
.picker > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .55rem;
  color: var(--ink);
}
.picker > summary::-webkit-details-marker { display: none; }
/* Drawn rather than typed: the triangle glyphs render at different sizes and
   baselines depending on which serif the reader actually has. */
.picker > summary::after {
  content: ""; width: 0; height: 0; align-self: center;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
}
.picker[open] > summary::after { border-top: 0; border-bottom: 5px solid var(--accent); }
.picker > summary:hover { color: var(--accent); }
.picker > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.picker-label { color: var(--muted); }
.picker > summary b { font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.picker-menu {
  position: absolute; z-index: 20; top: calc(100% + .6rem); left: -1.1rem;
  min-width: 14rem; max-height: 60vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule-strong);
  padding: .35rem 0;
}
.picker-menu a, .picker-menu button {
  display: block; width: 100%; text-align: left; padding: .5rem 1.1rem;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; cursor: pointer;
  text-decoration: none; color: var(--ink-2);
}
.picker-menu a:hover, .picker-menu button:hover { background: var(--paper-2); color: var(--accent); }
.picker-menu .on { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }

.find { margin-left: auto; }
.find input {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: .2rem .1rem; width: 8.5rem; -webkit-appearance: none; appearance: none;
}
.find input::placeholder { color: var(--muted); }
.find input:focus { outline: 0; border-bottom-color: var(--accent); width: 12rem; }

.search-status {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); max-width: var(--measure); margin: 0 auto 1.2rem;
}
.search-status:empty { margin: 0; }

@media (max-width: 40rem) {
  .controls { gap: .6rem 1.4rem; }
  .find { margin-left: 0; width: 100%; }
  .find input, .find input:focus { width: 100%; }
}

/* --------------------------------- home ---------------------------------- */
.lead { border-bottom: 1px solid var(--rule); padding-bottom: 2.2rem; margin-bottom: 2.4rem; }
.standfirst {
  font-size: clamp(1.25rem, 2.4vw, 1.62rem); line-height: 1.42; margin: 0 auto 1.8rem;
  max-width: 44rem; text-align: center; text-wrap: balance;
}
/* The pillars sit on the same left and right edge as the doors and the section
   rules below them. Only the standfirst above is centred: it is display type,
   the one thing on the page allowed to leave the grid. */
.lead-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.6rem 2.6rem;
}
.lead-cols h3 {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .35rem;
}
.lead-cols p { margin: 0; font-size: .97rem; color: var(--ink-2); }

/* Column counts are fixed rather than auto-fit: the hairlines are the gap showing
   through, so a half-empty last row would read as a grey hole. 1 / 2 / 4 keeps
   every row full at every width. */
.doors { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 3rem; }
@media (min-width: 34rem) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .doors { grid-template-columns: repeat(4, 1fr); } }
.door { background: var(--paper); padding: 1.5rem 1.4rem; text-decoration: none; display: block; transition: background .15s; }
.door:hover { background: var(--paper-2); color: inherit; }
.door .label { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.door-title { display: block; font-size: 1.34rem; margin: .35rem 0 .3rem; }
.door-text { display: block; font-size: .93rem; color: var(--muted); line-height: 1.5; }

/* -------------------------------- streams -------------------------------- */
/* Lists share the article's axis: one centred column, and no rule wider than the
   text it belongs to. Only the full-bleed bands above (pillars, doors) and the
   masthead run the whole width. */
.section-title {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 auto 1.4rem; max-width: var(--measure); display: flex; align-items: center; gap: 1rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.stream { max-width: var(--measure); margin-inline: auto; }
.card { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.card:first-of-type { padding-top: 0; }
.card-meta {
  display: flex; gap: .9rem; align-items: baseline;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}
.card-meta .label { color: var(--accent); }
/* The reference is the piece's own path: unique, stable, quotable, and the link it
   names. Monospace so it reads as an identifier rather than as more prose. */
.card-meta .ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; letter-spacing: 0; text-transform: none;
  color: var(--muted); text-decoration: none; margin-left: auto;
}
.card-meta .ref:hover { color: var(--accent); text-decoration: underline; }
.card h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.22; margin: 0 0 .5rem; font-weight: 600; }
.card h2 a { text-decoration: none; }
.card .lede { margin: 0; color: var(--ink-2); }
.more { font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin: .8rem 0 0; }
.more a { text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.more.all { margin-top: 1.6rem; }

/* Pagination: the same hairline vocabulary, page numbers rather than an endless
   feed, so a reader can tell how much archive is left. */
.pager {
  max-width: var(--measure); margin: 2rem auto 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 1.4rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
}
.pager a { text-decoration: none; color: var(--ink-2); }
.pager a:hover { color: var(--accent); }
.pager .nums { display: flex; gap: .9rem; margin-inline: auto; }
.pager .nums .on { color: var(--ink); border-bottom: 1px solid var(--accent); }
.pager .step.off { color: var(--rule); }

/* ------------------------------- documents -------------------------------- */
.page-head { max-width: var(--measure); margin: 0 auto 2.4rem; }
/* An index intro belongs to its heading, not to the masthead: left edge, not centre.
   Balancing is for two-line display type; on a paragraph it just shortens every
   line and leaves a ragged trench down the right. */
.page-head .standfirst { text-align: left; margin-left: 0; max-width: none; font-size: 1.16rem; color: var(--ink-2); }
.page-head .standfirst, .doc .standfirst { text-wrap: pretty; }
.page-head h1, .doc h1 { font-size: clamp(1.8rem, 2.8vw, 2.45rem); line-height: 1.16; margin: 0 0 .6rem; font-weight: 600; text-wrap: balance; }
/* An article is ONE column: text, rules and display blocks share a single width,
   so the text sits on the page's optical centre. The measure carries the headline
   too, which is why the headline is sized to break inside it rather than fight it. */
.doc { max-width: var(--measure); margin-inline: auto; }
.doc .standfirst { text-align: left; margin-left: 0; max-width: none; font-size: 1.16rem; color: var(--ink-2); padding-bottom: 1.3rem; border-bottom: 1px solid var(--rule); }
.doc h2 { font-size: 1.5rem; margin: 2.4rem 0 .7rem; line-height: 1.25; }
.doc h3 { font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 2rem 0 .5rem; }
/* The column is wide, so the body carries a little more leading than the rest of
   the site: at this measure the eye needs help finding the start of the next line. */
.doc p, .doc li { line-height: 1.72; }
.doc p { margin: 0 0 1.1rem; }
.doc ul, .doc ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.doc li { margin-bottom: .55rem; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
.doc blockquote { margin: 1.6rem 0; padding-left: 1.1rem; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-2); }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 2px; }
.table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.doc thead th {
  text-align: left; font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding: 0 1rem .5rem 0; border-bottom: 1px solid var(--rule-strong);
}
.doc tbody td { padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc tbody td:last-child code { color: var(--accent); background: none; padding: 0; }

/* scenario: the opening question, set apart from the argument */
.doc .ask {
  margin: 0 0 2rem; padding: 1.3rem 0 1.4rem;
  border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
.doc .ask::before {
  content: "Is such a thing possible?"; display: block;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .7rem;
}
html[lang="tr"] .doc .ask::before { content: "Böyle bir şey mümkün mü?"; }
.doc .ask p { font-size: 1.1rem; margin-bottom: .8rem; }
.doc .ask p:last-child { margin-bottom: 0; }

/* pull quote */
.doc blockquote.pull {
  border: 0; margin: 2.2rem 0; padding: 0; max-width: none;
  font-style: normal; color: var(--ink);
}
.doc blockquote.pull p {
  font-size: clamp(1.3rem, 3vw, 1.66rem); line-height: 1.34; margin: 0;
  text-indent: -.4em; text-wrap: balance;
}
.doc blockquote.pull p::before { content: "“"; color: var(--accent); }
.doc blockquote.pull p::after { content: "”"; color: var(--accent); }

/* plate: diagram or photograph, unified into the paper palette */
.plate { margin: 2rem 0; }
.plate img {
  display: block; width: 100%; height: auto; border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.03) sepia(.12);
}
@media (prefers-color-scheme: dark) { .plate img { filter: grayscale(1) contrast(.92) brightness(.86); } }
.plate figcaption {
  font-family: var(--sans); font-size: .72rem; line-height: 1.5; color: var(--muted);
  margin-top: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule);
}
.plate .credit { letter-spacing: .1em; text-transform: uppercase; font-size: .64rem; }

/* the standing sentence under every scenario */
.doc .disclaimer {
  margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--muted); font-style: italic;
}

.doc .note {
  margin: 2rem 0; padding: 1.2rem 1.3rem; background: var(--paper-2);
  border-top: 2px solid var(--rule-strong); font-size: .96rem;
}
.doc .note p:last-child { margin-bottom: 0; }
.doc .note::before {
  content: "What this does not solve"; display: block;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .6rem;
}
html[lang="tr"] .doc .note::before { content: "Çözülmeyen ne"; }
.back { font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }

/* --------------------------------- foot ---------------------------------- */
.foot { margin-top: 4.5rem; border-top: 3px double var(--rule-strong); padding: 1.8rem 0 3rem; }
.foot .seal { font-style: italic; color: var(--ink-2); max-width: 34rem; margin: 0 0 .8rem; }
.foot .fine { font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; color: var(--muted); margin: 0; text-transform: uppercase; }
.foot .fine a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); margin-left: .6rem; }
.foot .fine a:hover { color: var(--accent); }
.foot .licence { display: block; margin-top: .5rem; text-transform: none; letter-spacing: .04em; }
.foot .licence a { margin-left: 0; }

@media (max-width: 40rem) {
  body { font-size: 18px; }
  .nav .wrap { gap: 1.1rem; }
  .doors { grid-template-columns: 1fr; }
}

/* ---------------------------------- print --------------------------------- */
/* An archive should print as a document, not as a screen: the apparatus for getting
   around goes, the reference stays, and links that would be lost on paper are spelled
   out once inside the article. */
@media print {
  :root {
    --paper: #fff; --paper-2: #fff; --ink: #000; --ink-2: #222;
    --muted: #444; --rule: #bbb; --rule-strong: #000; --accent: #000;
  }
  body { font-size: 11.5pt; line-height: 1.5; }
  .nav, .controls, .pager, .search-status, .back, .skip, .doors, .foot .fine a { display: none; }
  .masthead-top .langs { display: none; }
  .wrap { width: auto; }
  .doc, .stream, .page-head { max-width: none; }
  .wordmark { font-size: 34pt; }
  .doc a { text-decoration: none; }
  .doc p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .82em; color: #444; }
  .card, .doc h2, .doc h3, .ask, .note, .plate { break-inside: avoid; }
  .foot { border-top: 1px solid #000; }
}