/* giulioali.com — Times, one column edge, no rules. */

:root {
  --ground: #fffdf8;
  --ink:    #12100c;
  --mid:    #4a443b;
  --muted:  #7d7568;
  --accent: #8b2f1e;
  --serif:  "Times New Roman", Times, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121110; --ink: #efeade; --mid: #c3bcae; --muted: #928a7c; --accent: #dd8064;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121110; --ink: #efeade; --mid: #c3bcae; --muted: #928a7c; --accent: #dd8064;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}
@media (max-width: 640px) { body { font-size: 17px; } }

img { max-width: 100%; height: auto; display: block; }
ul, ol, li { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 .75em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
hr { display: none; }

/* one container, one left edge, every page */
.wrap { max-width: 1000px; margin: 0 auto; padding: 30px 26px 100px; }
@media (max-width: 640px) { .wrap { padding: 22px 20px 70px; } }

/* ---------- menu rail, right hand side, always on ---------- */
.rail {
  position: fixed; top: 30px; z-index: 5;
  right: max(26px, calc(50% - 500px + 26px));
  width: 150px; text-align: right;
}
.rail-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.rail .name { font-size: 1.35em; font-weight: 700; letter-spacing: .005em; }
.rail .name a { text-decoration: none; }
.rail-nav { margin-top: .9em; }
.rail-nav li { margin-bottom: .42em; }
.rail-nav a {
  font-size: .72em; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mid); text-decoration: none;
}
.rail-nav a:hover { color: var(--accent); }
.rail-nav a.here { color: var(--ink); }

/* content keeps its own left edge and simply stops short of the rail */
@media (min-width: 900px) { .page { max-width: calc(100% - 186px); } }

@media (max-width: 899px) {
  .rail { position: static; width: auto; margin-bottom: 2.2em; }
  .rail-nav { margin-top: .5em; }
  .rail-nav li { display: inline-block; margin: 0 0 .25em 1.4em; }
}

.tog { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.tog:hover { color: var(--accent); }
.tog svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none;
           stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tog .fill { fill: currentColor; stroke: none; }

/* the email page: one line, set level with the last rail item (Writing) */
.mail { margin: 0; }
@media (min-width: 900px) {
  /* rail-top + rail-nav top margin + the five items above Writing, then a
     3.7px nudge so the two baselines meet rather than the two line boxes */
  .mail { margin-top: calc(36px + .9em + 5 * (1.08em + .42em) + 3.7px); }
}

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.005em; }
h1 { font-size: 2.15em; margin-bottom: .28em; }
@media (max-width: 640px) { h1 { font-size: 1.8em; } }

h2 {
  font-size: .74em; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mid);
  margin: 2.4em 0 .9em;
}
h2:first-of-type { margin-top: 1.9em; }

.standfirst { color: var(--mid); font-size: 1.02em; max-width: 56ch; margin-bottom: 2em; }
.kicker { font-size: .72em; letter-spacing: .15em; text-transform: uppercase;
          color: var(--muted); margin-bottom: .8em; }
.small { font-size: .86em; }
.muted { color: var(--muted); }
.prose { max-width: 62ch; }

a { color: inherit; text-decoration: underline;
    text-underline-offset: .16em; text-decoration-thickness: .6px;
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------- plain lists ---------- */
.list li { margin-bottom: .28em; }
.list.bullets { padding-left: 1.15em; }
.list.bullets li { list-style: disc; margin-bottom: .7em; }
.list.bullets li::marker { color: var(--muted); }
.list.tight li { margin-bottom: .06em; }
.entry { margin-bottom: 1.9em; max-width: 62ch; }
.entry h3 { font-size: 1.22em; margin-bottom: .12em; }
.entry .when { font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.entry p { color: var(--mid); margin: .3em 0 0; }

/* ---------- antilibrary: areas two-up ---------- */
#browse { columns: 1; column-gap: 64px; }
@media (min-width: 760px) { #browse { columns: 2; } }
.area { break-inside: avoid; margin-bottom: 2em; }
.area h3 {
  font-size: .74em; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mid); margin: 0 0 .55em;
}
.area h3 .n { letter-spacing: .05em; color: var(--muted); font-weight: 400; }
.area li { margin-bottom: .1em; font-size: .95em; }

#q {
  font: inherit; font-family: var(--serif); font-size: .92em;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--muted);
  padding: 2px 0; width: 16em; max-width: 100%;
  display: block; margin: 0 0 2.2em;
}
#q:focus { outline: 0; border-bottom-color: var(--accent); }
#results li { margin-bottom: .12em; }
#results .c { color: var(--muted); font-size: .85em; }
#results mark { background: none; color: var(--accent); }
.books li { margin-bottom: .1em; }
.books .n { color: var(--muted); font-size: .78em; margin-right: .5em; }

/* ---------- hypertext: three columns ---------- */
.htx { display: grid; grid-template-columns: 1fr; column-gap: 46px; align-items: start; }
@media (min-width: 700px) { .htx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.htx h2 { margin: 2.2em 0 .7em; }
.htx .col > section:first-child h2 { margin-top: 1.9em; }
.htx .list li { margin-bottom: .28em; font-size: .95em; }

/* ---------- reading ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 24px 18px;
}
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
.bk { text-align: left; width: 100%; }
.bk img, .bk .ph { width: 100%; aspect-ratio: 2/3; object-fit: contain; background: var(--sp, #ddd); }
.bk .t { display: block; font-size: .82em; line-height: 1.28; margin-top: .45em; }
.bk .a { display: block; font-size: .76em; color: var(--muted); }
.bk[aria-pressed="true"] .t { color: var(--accent); }
.note {
  grid-column: 1 / -1;
  margin: .3em 0 .5em;
  padding: 0 0 .4em;
  max-width: 62ch;
}
.note h3 { font-size: 1.15em; margin-bottom: .1em; }
.note .a { color: var(--muted); font-size: .86em; margin-bottom: .55em; }
.note .x { float: right; color: var(--muted); font-size: .78em; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- essays ---------- */
.essay { max-width: 34em; }
.essay .meta { color: var(--muted); font-size: .82em; letter-spacing: .06em;
               text-transform: uppercase; margin-bottom: 1.9em; }
.essay .body > p:first-of-type::first-letter {
  -webkit-initial-letter: 3 3;
  initial-letter: 3 3;
  font-weight: 700; color: var(--accent);
  text-transform: uppercase;
  margin-right: .07em;
}
@supports not (initial-letter: 3) {
  .essay .body > p:first-of-type::first-letter {
    float: left; font-size: 3.4em; line-height: .78;
    margin: .07em .07em 0 0; text-transform: uppercase;
  }
}
.essay .body p { margin-bottom: .95em; }
.essay .body h2 { font-size: 1.05em; text-transform: none; letter-spacing: 0;
                  color: var(--ink); margin: 1.9em 0 .5em; }
.essay .body blockquote { margin: 1.1em 0 1.1em 1.3em; color: var(--mid); font-style: italic; }
.essay .body ul li { list-style: disc; margin-left: 1.15em; }
.essay .body ol li { list-style: decimal; margin-left: 1.15em; }
.progress { position: fixed; left: 0; top: 0; height: 2px; background: var(--accent); width: 0; z-index: 9; }

.foot { margin-top: 4em; color: var(--muted); font-size: .78em;
        letter-spacing: .13em; text-transform: uppercase; }
.foot a { margin-right: 1.5em; text-decoration: none; color: var(--mid); }
.foot a:hover { color: var(--accent); }
[hidden] { display: none !important; }