/* iannfox.com — a dossier read by candlelight.
   One family, EB Garamond, for everything; the book's own title lives on its
   cover. The only loud thing on a page is the lit cover. */

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #130e0a;       /* the cover's shadows, not a neutral black */
  --soot: #1d1611;
  --parchment: #dccaa6;   /* the band behind the title */
  --copper: #d38c4b;      /* the title's colour */
  --ember: #b8321f;       /* the candle — light only, never a control */
  --ash: #9a8b78;
  --rule: 1px solid rgba(220, 202, 166, .16);
  --measure: 34rem;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: rgba(211, 140, 75, .55); text-underline-offset: .18em; }
a:hover { color: var(--copper); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- masthead --------------------------------------------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: 1.6rem 1.4rem;
  border-bottom: var(--rule);
}
/* The white logo, painted copper: the PNG is only a mask. */
.logo {
  display: block; width: 9.5rem; aspect-ratio: 1196 / 304;
  background: var(--copper);
  -webkit-mask: url("/assets/img/logo-iannfox.png") center / contain no-repeat;
          mask: url("/assets/img/logo-iannfox.png") center / contain no-repeat;
}
.logo:hover { background: var(--parchment); }
.nav { display: flex; gap: .4rem 1.6rem; flex-wrap: wrap; font-size: 1.05rem; }
.nav a { text-decoration: none; color: var(--ash); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--parchment); }
.nav .lang { font-style: italic; }

/* ---------- the book: the one lit thing -------------------------- */
.book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-block: clamp(3rem, 8vw, 6rem);
}
/* The glow sits where the cover's flame is, low and to the right, and
   spills onto the page behind the text. */
.book::before {
  content: "";
  position: absolute; z-index: 0;
  left: 15rem; top: calc(clamp(3rem, 8vw, 6rem) + 21rem);
  width: 44rem; height: 44rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(184, 50, 31, .42), rgba(211, 140, 75, .10) 50%, transparent);
  pointer-events: none;
  animation: kindle 2.4s ease-out both;
}
.book > * { position: relative; z-index: 1; }
.cover {
  box-shadow: 0 0 0 1px rgba(220, 202, 166, .08), 0 30px 80px -20px rgba(184, 50, 31, .45);
}
@keyframes kindle {
  0% { opacity: 0; } 55% { opacity: .75; } 70% { opacity: .55; } 100% { opacity: 1; }
}

.series { margin: 0; font-style: italic; color: var(--ash); font-size: 1.15rem; }
.title {
  margin: .5rem 0 0; font-weight: 500; font-style: italic;
  font-size: clamp(2.2rem, 4.6vw, 3.25rem); line-height: 1.1;
  color: var(--parchment);
}
.edition { margin: .9rem 0 0; color: var(--ash); max-width: var(--measure); }
.prose { max-width: var(--measure); margin-top: 2.2rem; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1em; }

/* ---------- the author's line ------------------------------------ */
.saying {
  border-top: var(--rule); border-bottom: var(--rule);
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.saying blockquote { margin: 0 auto; max-width: 22em; }
.saying p { margin: 0; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.3; }
.saying cite { display: block; margin-top: 1.2rem; font-style: normal; color: var(--ash); font-size: 1rem; }

/* ---------- in the press ----------------------------------------- */
.press { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: var(--rule); }
.press h2, .author h2 { margin: 0 0 1.6rem; font-weight: 500; font-style: italic; font-size: 1.6rem; color: var(--copper); }
.press figure { margin: 0; max-width: var(--measure); }
.press figure + figure { margin-top: 2.2rem; }
.press blockquote { margin: 0; }
.press blockquote p { margin: 0; }
.press figcaption { margin-top: .6rem; color: var(--ash); font-size: 1rem; }

/* ---------- the author, behind the work --------------------------- */
.author {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.8rem;
  align-items: start;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.author img { width: 7rem; filter: grayscale(1) contrast(1.05); opacity: .9; }
.author .prose { margin-top: 0; }
.author .more { margin-top: 1.2rem; font-style: italic; }

/* ---------- colophon --------------------------------------------- */
.colophon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: 2rem 2.6rem; border-top: var(--rule);
  color: var(--ash); font-size: 1rem;
}
.cipher { width: 13rem; height: auto; color: rgba(211, 140, 75, .55); }

/* ---------- inner pages: a heading, then the text -------------------- */
.page-head { padding-block: clamp(2.6rem, 7vw, 4.5rem) 0; max-width: 44rem; }
.page-head .title { margin-top: .3rem; }
.lede { margin: 1.2rem 0 0; font-size: 1.3rem; line-height: 1.5; color: var(--parchment); }
.lede a { color: inherit; }
.byline { margin: 1rem 0 0; color: var(--ash); font-style: italic; }
.page-head + .prose, .page-head + .article, .byline + .interview { margin-top: 2.6rem; }
main > :last-child { margin-bottom: clamp(3rem, 7vw, 5rem); }

/* The interview was given in writing: the question in the interviewer's
   hand, set apart; the answer in the author's, as plain text. */
.interview { max-width: var(--measure); }
.interview p { margin: 0; }
.interview .q { margin-top: 2.2rem; padding-left: 1rem; border-left: 1px solid rgba(211, 140, 75, .5); color: var(--copper); font-style: italic; }
.interview .q:first-child { margin-top: 0; }
.interview .a { margin-top: .8rem; }
.interview .q em { font-style: normal; }

.prose h2 { margin: 2.4rem 0 .8rem; font-weight: 500; font-style: italic; font-size: 1.45rem; color: var(--copper); line-height: 1.25; }
.prose ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.prose li + li { margin-top: .45rem; }
.prose li::marker { color: var(--copper); }
.prose ul ul { margin-top: .45rem; }
.prose strong { font-weight: 600; }
.article > p:first-child strong { font-weight: 500; font-style: italic; font-size: 1.2rem; }
.dossier a { overflow-wrap: anywhere; }

/* ---------- lists of doors: readers' pages, news ------------------------ */
.doors { list-style: none; margin: 2.6rem 0 0; padding: 0; max-width: 44rem; border-top: var(--rule); }
.doors li { border-bottom: var(--rule); }
.doors a { display: block; padding: 1.2rem 0; text-decoration: none; }
.door-title { display: block; font-size: 1.35rem; font-style: italic; }
.door-note { display: block; color: var(--ash); font-size: 1rem; margin-top: .2rem; }
.doors a:hover .door-title { color: var(--copper); }

/* ---------- the sealed file ------------------------------------------- */
.seal {
  margin-top: 2.6rem; max-width: 26rem;
  padding: 1.8rem; border: 1px solid rgba(211, 140, 75, .35);
  background: radial-gradient(120% 90% at 50% 120%, rgba(184, 50, 31, .16), transparent 70%), var(--soot);
}
.seal p { margin: 0 0 1.2rem; }
.seal .denied { color: #e08a6a; }
.seal label { display: block; color: var(--ash); font-size: 1rem; margin-bottom: .4rem; }
.seal-row { display: flex; gap: .6rem; }
.seal input {
  flex: 1; min-width: 0; font: inherit; color: var(--parchment);
  background: var(--night); border: 1px solid rgba(220, 202, 166, .25); padding: .45rem .7rem;
}
.seal button {
  font: inherit; font-style: italic; cursor: pointer;
  color: var(--night); background: var(--copper); border: 0; padding: .45rem 1.2rem;
}
.seal button:hover { background: var(--parchment); }

/* ---------- excerpts and thoughts: the cards as they were made ----------- */
.cards {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.cards li:first-child { grid-column: 1 / -1; }
.cards a { display: block; }
.cards img { width: 100%; box-shadow: 0 0 0 1px rgba(220, 202, 166, .08); }
.cards a:hover img { box-shadow: 0 0 0 1px var(--copper); }

/* ---------- the author's own page -------------------------------------- */
.author--page { grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.author--page img { width: 14rem; }
.author--page .title { margin: 0 0 1.6rem; }

@media (max-width: 44rem) {
  body { font-size: 1.125rem; }
  .book { grid-template-columns: minmax(0, 1fr); }
  .cover { max-width: 16rem; }
  .book::before { left: 50%; top: 14rem; width: 26rem; height: 26rem; }
  .author, .author--page { grid-template-columns: minmax(0, 1fr); }
  .author--page img { width: 10rem; }
  .seal-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .book::before { animation: none; }
}

/* Visually hidden, still read aloud. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }