/* App Critic Weekly — a printed weekly arts review: cream paper, oxblood spine, Baskerville.
   System fonts only, no external requests, no JavaScript. */
:root {
  color-scheme: light dark;
  --paper: #f4ecdc;
  --paper-2: #ebe0c9;
  --ink: #241a16;
  --muted: #5b4b42;
  --rule: #c9b89b;
  --ox: #6d1a24;
  --spine: #5e1620;
  --spine-ink: #f6eedf;
  --gold: #8a6420;
  --focus: #1d4f91;
  --text: "Baskerville", "Baskerville Old Face", "Hoefler Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display: "Didot", "Bodoni 72", "Bodoni MT", "Hoefler Text", "Baskerville", Georgia, serif;
  --caps: "Gill Sans", "Gill Sans MT", "Seravek", "Trebuchet MS", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #18120f;
    --paper-2: #221a16;
    --ink: #efe4d2;
    --muted: #c0ae9b;
    --rule: #4b3c34;
    --ox: #e79aa0;
    --spine: #3b0f16;
    --spine-ink: #f4e7d4;
    --gold: #d8b36c;
    --focus: #9cc2ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.65 var(--text);
  font-variant-numeric: oldstyle-nums;
}
a { color: inherit; text-decoration-color: var(--ox); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ox); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- Frame: spine + sheet ---------- */
.frame { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.spine {
  background: var(--spine);
  color: var(--spine-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
}
.spine a { color: inherit; text-decoration: none; }
.spine__mark { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.spine__app { font: italic 400 26px/1 var(--display); letter-spacing: .01em; }
.spine__weekly { font: 600 12px/1 var(--caps); text-transform: uppercase; letter-spacing: .32em; }
.spine__issue { display: flex; gap: 8px; margin: 0; font: 600 11px/1.2 var(--caps); text-transform: uppercase; letter-spacing: .16em; }
.spine__dot { color: #d9b36c; }
.spine__motto { display: none; }

@media (min-width: 960px) {
  .frame { grid-template-columns: 168px minmax(0, 1fr); }
  .spine {
    position: sticky; top: 0; height: 100vh;
    flex-direction: column; justify-content: space-between; align-items: center;
    padding: 32px 0 28px;
    box-shadow: inset -10px 0 18px -12px rgba(0, 0, 0, .55);
  }
  .spine__mark { writing-mode: vertical-rl; transform: rotate(180deg); gap: 18px; align-items: center; }
  .spine__app { font-size: 54px; }
  .spine__weekly { font-size: 14px; letter-spacing: .5em; }
  .spine__issue { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .spine__motto { display: block; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font: italic 14px/1.3 var(--text); opacity: .85; max-height: 40vh; }
}

.sheet { min-width: 0; padding: 0 clamp(16px, 5vw, 72px); }
.sections {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  padding: 16px 0 12px; margin-bottom: 8px;
  border-bottom: 3px double var(--ox);
  font: 600 13px/1.4 var(--caps); text-transform: uppercase; letter-spacing: .16em;
}
.sections a { text-decoration: none; padding: 4px 0; }
.sections a:hover { color: var(--ox); }
.sections__home { color: var(--ox); }
.page { max-width: 1000px; margin: 0 auto; padding: 24px 0 56px; }

/* ---------- Shared typographic bits ---------- */
.dept { font: 600 12px/1.4 var(--caps); text-transform: uppercase; letter-spacing: .18em; color: var(--ox); margin: 0 0 8px; }
.dept a { text-decoration: none; }
.standfirst { font: italic 400 clamp(20px, 2.6vw, 25px)/1.45 var(--text); color: var(--muted); margin: 0 0 14px; }
.credit { font: 500 13px/1.5 var(--caps); letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.stars { display: flex; align-items: center; gap: 10px; color: var(--ox); font-size: 24px; letter-spacing: .14em; margin: 4px 0 12px; font-family: var(--text); }
.stars__track { position: relative; display: inline-block; line-height: 1; white-space: nowrap; margin-right: -.14em; }
.stars__empty { display: inline-block; }
.stars__fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap; }
.stars__num { font-size: .62em; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.stars--small { display: inline-flex; vertical-align: baseline; gap: 6px; font-size: 15px; letter-spacing: .08em; margin: 0; }
.stars--small .stars__track { margin-right: -.08em; }
.stars--small .stars__num { font-size: .8em; }
.contents__head {
  display: flex; align-items: center; gap: 16px;
  font: italic 400 30px/1.2 var(--display); margin: 48px 0 20px;
}
.contents__head::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* ---------- Cover ---------- */
.cover { position: relative; padding: 24px 0 36px; border-bottom: 1px solid var(--rule); }
.cover::before {
  content: "\201C"; position: absolute; right: 0; top: 34px;
  font: 400 220px/1 var(--display); color: var(--ox); opacity: .12; pointer-events: none;
}
.cover__label {
  display: flex; justify-content: space-between; gap: 12px;
  font: 600 12px/1.4 var(--caps); text-transform: uppercase; letter-spacing: .2em; color: var(--gold);
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin: 0 0 28px;
}
.cover__title { font: italic 400 clamp(38px, 7vw, 82px)/1.02 var(--display); letter-spacing: -.01em; margin: 0 0 18px; max-width: 16ch; }
.cover__title a { text-decoration: none; }
.cover .standfirst { max-width: 40ch; font-size: clamp(21px, 2.8vw, 28px); }
.cover__plate { margin: 24px 0 8px; border: 1px solid var(--rule); padding: 8px; background: var(--paper-2); }
.cover__more { font: 600 14px/1 var(--caps); text-transform: uppercase; letter-spacing: .14em; margin: 18px 0 0; }
.cover__more a { text-decoration: none; color: var(--ox); }
.cover--empty .cover__title { max-width: 18ch; }

/* ---------- Contents ---------- */
.toc { list-style: none; margin: 0; padding: 0; }
.toc__item {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px dotted var(--rule);
}
.toc__no { font: italic 400 34px/1 var(--display); color: var(--ox); }
.toc__title { font: 400 clamp(22px, 2.6vw, 28px)/1.2 var(--text); margin: 0 0 6px; }
.toc__title a { text-decoration: none; }
.toc__title a:hover { text-decoration: underline; }
.toc__dek { font-style: italic; color: var(--muted); margin: 0; font-size: 17px; }
.toc__date { font: 500 12px/1 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---------- Departments ---------- */
.departments__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.department { border-top: 3px solid var(--ox); padding-top: 12px; }
.department__name { font: 400 25px/1.2 var(--display); margin: 0 0 6px; }
.department__name a { text-decoration: none; }
.department__desc { font-size: 16px; color: var(--muted); margin: 0 0 12px; }
.department__latest { font-size: 17px; margin: 0 0 4px; }
.department__latest .dept { display: block; margin: 0 0 2px; font-size: 11px; }
.department__latest--soon { font: italic 17px var(--text); color: var(--gold); }
.department__count { font: 500 12px var(--caps); letter-spacing: .08em; color: var(--muted); margin: 0; }
.editors-note {
  margin: 56px auto 0; max-width: 640px; text-align: center; font-size: 17px; color: var(--muted);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 8px;
}
.editors-note p:last-child { margin: 0; }

/* ---------- Department (list) pages ---------- */
.dept-head { text-align: center; padding: 20px 0 28px; border-bottom: 3px double var(--ox); margin-bottom: 32px; }
.dept-head__title { font: italic 400 clamp(38px, 6vw, 68px)/1.05 var(--display); margin: 0 0 12px; }
.dept-head .standfirst { max-width: 36em; margin: 0 auto 10px; font-size: 21px; }
.notices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 48px; }
.notice { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.notice__title { font: 400 26px/1.2 var(--text); margin: 0 0 6px; }
.notice__title a { text-decoration: none; }
.notice__title a:hover { text-decoration: underline; }
.notice__dek { font-style: italic; color: var(--muted); margin: 6px 0 0; font-size: 17px; }
.notices__empty { font: italic 20px var(--text); color: var(--muted); text-align: center; grid-column: 1 / -1; }

/* ---------- Review (article) ---------- */
.review { max-width: 700px; margin: 0 auto; }
.review__head { text-align: center; padding: 16px 0 24px; margin-bottom: 8px; }
.review__head::after { content: "\2766"; display: block; color: var(--ox); font-size: 22px; margin-top: 10px; }
.review__type { color: var(--muted); }
.review__title { font: 400 clamp(36px, 6vw, 64px)/1.06 var(--display); letter-spacing: -.01em; margin: 6px 0 18px; }
.review__head .standfirst { max-width: 32em; margin-left: auto; margin-right: auto; }
.review__plate { margin: 28px 0; }
.review__plate figcaption { font: italic 15px/1.4 var(--text); color: var(--muted); margin-top: 8px; text-align: center; }
.review__body { margin-top: 24px; }

.prose p { margin: 0 0 1.1em; hyphens: auto; }
.prose > p:first-child::first-letter {
  float: left; font: 400 5.1em/.8 var(--display); color: var(--ox); padding: .06em .1em 0 0;
}
.prose--plain > p:first-child::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.prose h2 { font: italic 400 30px/1.2 var(--display); margin: 2em 0 .5em; }
.prose h3 { font: 600 15px/1.3 var(--caps); text-transform: uppercase; letter-spacing: .14em; color: var(--ox); margin: 1.8em 0 .5em; }
.prose a { color: var(--ox); }
.prose blockquote {
  margin: 1.6em 0; padding: 18px 0; text-align: center;
  border-top: 1px solid var(--ox); border-bottom: 1px solid var(--ox);
  font: italic 400 clamp(23px, 3.2vw, 30px)/1.35 var(--display); color: var(--ox);
}
.prose blockquote p { margin: 0; }
@media (min-width: 1100px) { .prose blockquote { margin-left: -70px; margin-right: -70px; } }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose ul li::marker { color: var(--ox); content: "\2013  "; }
.prose hr { border: 0; text-align: center; margin: 2em 0; }
.prose hr::after { content: "\2042"; color: var(--ox); font-size: 22px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font: 16px/1.4 var(--caps); display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.prose th { border-bottom: 2px solid var(--ox); font-weight: 600; }
.prose img { margin: 1.4em auto; }
.prose code { font-size: .85em; background: var(--paper-2); padding: 1px 4px; }

/* The Verdict */
.verdict {
  margin: 44px 0 28px; padding: 26px 28px; text-align: center;
  border: 2px solid var(--ox); outline: 1px solid var(--ox); outline-offset: 4px;
  background: var(--paper-2);
}
.verdict__title { font: 600 14px/1 var(--caps); text-transform: uppercase; letter-spacing: .32em; color: var(--ox); margin: 0 0 14px; }
.verdict__text { font: italic 400 22px/1.45 var(--text); margin: 0 0 10px; }
.verdict__note { font: 500 12px var(--caps); color: var(--muted); letter-spacing: .06em; margin: 0; }

/* Turn the page / also */
.turn { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 36px 0; }
.turn a { display: block; padding: 14px 16px; border: 1px solid var(--rule); text-decoration: none; font-size: 18px; line-height: 1.3; }
.turn a:hover { border-color: var(--ox); }
.turn .dept { display: block; margin-bottom: 4px; }
.turn__next { text-align: right; }
.also ul { list-style: none; margin: 0; padding: 0; }
.also li { padding: 10px 0; border-bottom: 1px dotted var(--rule); font-size: 19px; }
.also .dept { display: block; font-size: 11px; margin: 0 0 2px; }
.also a { text-decoration: none; }
.also a:hover { text-decoration: underline; }

/* ---------- Shared partials ---------- */
.disclosure {
  font: 15px/1.55 var(--caps); color: var(--ink);
  background: var(--paper-2); border-left: 4px solid var(--ox);
  padding: 12px 16px; margin: 16px 0;
}
.disclosure strong { font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ox); }
.disclosure a { color: var(--ox); }
.disclosure--health { border-left-color: var(--gold); }
.disclosure--vr { border-left-color: var(--gold); border-left-style: double; border-left-width: 6px; }
.disclosure--health strong, .disclosure--vr strong { color: var(--gold); }

.project-box {
  display: grid; gap: 4px; margin: 24px 0; padding: 18px 20px;
  border-top: 3px double var(--ink); border-bottom: 3px double var(--ink);
  font: 16px/1.5 var(--caps);
}
.project-box__name { font: italic 400 26px/1.15 var(--display); margin: 0; }
.project-box__short { margin: 0; color: var(--ink); }
.project-box__platform { display: inline-block; margin-left: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.project-box__link { color: var(--ox); font-weight: 600; text-decoration: none; justify-self: start; }
.project-box__link:hover { text-decoration: underline; }
.project-box__note { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .04em; }

.pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 32px;
  margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font: italic 19px var(--text);
}
.pagination a { color: var(--ox); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination__info { font: 600 12px var(--caps); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); font-style: normal; }

/* ---------- Footer ---------- */
.endpaper { border-top: 4px double var(--ox); padding: 28px 0 44px; font: 14px/1.6 var(--caps); color: var(--muted); max-width: 1000px; margin: 0 auto; }
.endpaper__mark { font: italic 400 30px/1 var(--display); color: var(--ink); margin: 0 0 8px; }
.endpaper__note { font: italic 16px/1.5 var(--text); margin: 0 0 18px; }
.site-disclaimer { border-top: 1px solid var(--rule); padding-top: 14px; }
.site-disclaimer p { margin: 0 0 10px; }
.site-disclaimer strong { color: var(--ink); }
.site-disclaimer a { color: var(--ink); }
.site-disclaimer__publisher { font-size: 13px; }
.site-disclaimer__links { margin: 12px 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.site-disclaimer__links a { white-space: nowrap; text-decoration: none; }
.site-disclaimer__links a:hover { color: var(--ox); text-decoration: underline; }
.site-disclaimer__copy { font-size: 12px; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  body { font-size: 18px; }
  .spine__issue { font-size: 10px; letter-spacing: .1em; }
  .sections { gap: 4px 18px; font-size: 12px; letter-spacing: .12em; }
  .cover::before { font-size: 140px; }
  .cover__label { flex-direction: column; gap: 2px; }
  .toc__item { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .toc__no { font-size: 26px; }
  .toc__date { grid-column: 2; }
  .verdict { padding: 20px 16px; }
  .turn__next { text-align: left; }
}
@media (max-width: 380px) { .spine__app { font-size: 22px; } .spine__weekly { letter-spacing: .2em; } }
@media print { .spine, .sections, .turn, .pagination { display: none; } body { background: #fff; color: #000; } }