/* Black and white only. Secondary text and hairlines are black at reduced strength. */
:root {
  --ink: #000;
  --paper: #fff;
  --soft: rgba(0, 0, 0, 0.6);
  --line: rgba(0, 0, 0, 0.16);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
/* masthead: one compact row, logo left, link to the main site right */
.mast { border-bottom: 3px double var(--ink); padding: 12px 0 10px; }
.mast .wrap { display: flex; align-items: center; gap: 14px; }
.mast h1 { margin: 0; line-height: 0; }
.mast h1 img { display: block; height: 46px; width: auto; }
.mast p { margin: 0; padding-left: 14px; border-left: 1px solid var(--ink); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.mast .site { margin-left: auto; }
@media (max-width: 560px) {
  .mast { padding: 9px 0 8px; }
  .mast .wrap { gap: 10px; }
  .mast h1 img { height: 34px; }
  .mast p { padding-left: 10px; font-size: 10px; letter-spacing: 0.12em; }
  .mast .site { padding: 6px 9px; }
  .mast .site span { display: none; } /* the globe and arrow are enough at this width */
}
/* date strip */
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 16px; }
.head h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; margin: 0; }
.head span { color: var(--soft); font-size: 14px; }
/* edition grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; padding-bottom: 48px; }
.card { display: flex; flex-direction: column; gap: 12px; }
.sheet {
  aspect-ratio: 3 / 4; background: var(--paper); border: 1px solid var(--ink); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sheet:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.sheet.has-img { padding: 0; }
.sheet img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sheet b { font-family: var(--serif); font-size: 15px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; display: block; }
.sheet i { display: block; height: 5px; background: var(--line); margin-top: 8px; font-size: 0; }
.sheet i:nth-child(odd) { width: 80%; }
.sheet em { font-style: normal; font-size: 12px; color: var(--soft); letter-spacing: 0.1em; }
.card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.card p { margin: 2px 0 0; font-size: 13px; color: var(--soft); }
.actions { display: flex; gap: 8px; margin-top: auto; }
.btn {
  flex: 1; display: inline-block; text-align: center; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--paper); color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.small { flex: none; padding: 6px 10px; font-size: 13px; }
.empty { border: 1px dashed var(--ink); padding: 48px 16px; text-align: center; color: var(--soft); margin-bottom: 48px; }
.empty strong { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 4px; }
footer { border-top: 1px solid var(--line); padding: 16px 0 32px; font-size: 13px; color: var(--soft); }
/* ---------- CMS ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bar .right { display: flex; gap: 8px; align-items: center; }
.bar input[type='date'] { font: inherit; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.bar label { font-weight: 600; margin-right: 8px; }
.hint { font-size: 13px; color: var(--soft); margin: 0 0 8px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.rows .thumb { flex: none; width: 54px; height: 72px; border: 1px solid var(--ink); object-fit: cover; object-position: top; background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0.08em; }
.rows .main { flex: 1; min-width: 0; }
.rows .meta { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.rows .name { font-family: var(--serif); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.rows .acts { flex: none; display: flex; gap: 6px; }
.rows .problem .meta { color: var(--ink); font-weight: 600; }
.meter { height: 4px; background: var(--line); margin-top: 8px; }
.meter div { height: 100%; width: 0; background: var(--ink); transition: width 0.15s linear; }
.login { max-width: 360px; margin: 56px auto; }
.login label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.login input { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.login .btn { width: 100%; margin-top: 14px; }
.login p { font-size: 14px; font-weight: 600; min-height: 1.5em; margin: 10px 0 0; }
@media (max-width: 560px) {
  .rows li { flex-wrap: wrap; }
  .rows .acts { width: 100%; padding-left: 68px; }
}
/* ---------- CMS edition slots ---------- */
.bar select { font: inherit; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 20px; margin: 20px 0 32px; }
.slot { display: flex; flex-direction: column; gap: 8px; }
.slot .cover {
  aspect-ratio: 3 / 4; border: 2px dashed var(--ink); display: flex; align-items: center; justify-content: center; text-align: center;
  cursor: pointer; overflow: hidden; font-size: 14px; color: var(--soft); padding: 12px; background: var(--paper);
}
.slot.done .cover { border: 1px solid var(--ink); padding: 0; }
.slot .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.slot.over .cover, .slot .cover:hover { border-style: solid; }
.slot.over .cover { background: var(--ink); color: var(--paper); }
.slot.over .cover img { opacity: 0.25; }
.slot h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.slot h3 small { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.slot p { margin: 0; font-size: 13px; color: var(--soft); }
.slot .actions { margin-top: 4px; }
.slot .btn { padding: 6px 8px; font-size: 13px; }
.rows select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
/* cleaner slots: the box is the upload control, actions are plain text links */
.slot .cover span { display: block; }
.slot .cover b { display: block; font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1; color: var(--ink); }
.slot.over .cover b { color: var(--paper); }
.slot .links { display: flex; gap: 14px; }
.slot .links a, .slot .links button { font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.slot .links a:hover, .slot .links button:hover { text-decoration-thickness: 2px; }
.slot .links:empty { display: none; }
.slot .links { gap: 4px 9px; flex-wrap: wrap; }
/* team accounts */
.adduser { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.adduser .fields { display: flex; gap: 8px; flex-wrap: wrap; }
.adduser input[type='text'], .adduser input[type='password'], .adduser select { flex: 1; min-width: 180px; font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.adduser .checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: 14px; }
.adduser .checks input { accent-color: #000; }
.adduser .btn { flex: none; margin-right: 10px; }
#me { font-weight: 600; }
.bar .right { flex-wrap: wrap; gap: 8px 12px; }
/* embedded in the main site */
.embed .mast, .embed footer { display: none; }
.embed .wrap { padding: 0 2px; max-width: none; }
.embed .head { margin-top: 8px; }
.embed .grid, .embed .empty { padding-bottom: 8px; margin-bottom: 8px; }
/* admin pages */
.tabs { display: flex; gap: 22px; }
.tabs a { font-size: 15px; font-weight: 600; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; color: var(--soft); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.daynav { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
/* the date, written day first (08/10/2026); the browser's own date box lies invisible over it and opens the calendar */
.datebox { position: relative; display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; min-width: 7.4em; justify-content: center; }
.datebox input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
#pageUpload .head { margin-top: 16px; }
/* page headers */
.pagehead { margin: 26px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pagehead h2 { font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 0; line-height: 1.15; }
.pagehead p { margin: 6px 0 0; font-size: 14px; color: var(--soft); max-width: 640px; }
#pageUpload .head h2 { font-size: 22px; }
/* text under each edition box: name + eye, one quiet line, two links */
.slot { gap: 8px; }
.slot .info { display: flex; flex-direction: column; gap: 2px; }
.slot .namerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot h3 { font-size: 19px; }
.slot .eye { flex: none; display: flex; padding: 4px; margin: -4px; color: var(--ink); opacity: 0.55; }
.slot .eye:hover { opacity: 1; }
.slot .sub { font-size: 12px; color: var(--soft); }
.slot .meter { margin-top: 4px; }
.slot .links { justify-content: flex-start; gap: 14px; padding: 0; border: 0; margin-top: 4px; }
.slot .links button { font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* ticking editions to delete */
.daynav .push { flex: 1; }
#delBar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.slot .cover { position: relative; }
.slot .tick { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border: 1.5px solid var(--ink); background: var(--paper); }
.slot.picked .tick { background: var(--ink); }
.slot.picked .tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.slot.picked .cover { outline: 3px solid var(--ink); outline-offset: 2px; }
body.selecting .slot:not(.done) { opacity: 0.3; pointer-events: none; }
body.selecting .slot .links, body.selecting .slot .eye { visibility: hidden; }
.slot h3 { font-size: 17px; overflow-wrap: normal; }
.rows .eye { display: flex; align-items: center; padding: 4px; color: var(--ink); opacity: 0.55; }
.rows .eye:hover { opacity: 1; }
.rows .acts { align-items: center; }
/* link back to the main website: a small address-bar style pill */
.site { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--paper); white-space: nowrap; }
.site:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) {
}
.embed .site { display: none; }
/* phones: two editions across, tighter masthead */
@media (max-width: 560px) {
  .head { margin: 18px 0 12px; }
  .head h2 { font-size: 22px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .card { gap: 8px; }
  .card h3 { font-size: 17px; }
  .card .actions { gap: 6px; }
  .card .btn { padding: 8px 2px; font-size: 13px; }
}
@media (max-width: 340px) {
  .card .actions { flex-direction: column; }
}
/* ---------- home page: today's papers, then the magazine beside a strip of recent ones ---------- */
.notice { margin: 0 0 28px; padding: 14px 16px; border: 1px solid var(--ink); font-size: 16px; }
#below > section > .head, .duo .head { margin-top: 0; }
#below { border-top: 1px solid var(--line); padding-top: 28px; padding-bottom: 48px; }
#below:empty { display: none; }
#below .grid { padding-bottom: 28px; }
.duo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.duo.solo { grid-template-columns: minmax(0, 1fr); }
/* the magazine: cover on the left, words and buttons beside it */
.magrow { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.magrow .sheet { flex: none; width: 120px; }
.magrow .sheet em { margin: auto; }
.magrow h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; line-height: 1.2; }
.magrow p { margin: 4px 0 12px; font-size: 13px; color: var(--soft); }
.magrow .actions { gap: 8px; }
.magrow .btn { flex: none; padding: 7px 14px; font-size: 13px; }
/* recent editions: one row of small covers, swiped left and right */
.stripwrap { position: relative; }
.strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.strip::-webkit-scrollbar { display: none; }
.mini { flex: 0 0 112px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.mini .sheet { padding: 0; transition: none; }
.mini .sheet:hover { transform: none; box-shadow: none; }
.mini:hover .sheet { outline: 2px solid var(--ink); }
.mini .sheet em { margin: auto; }
.mini b { font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mini small { font-size: 12px; color: var(--soft); margin-top: -3px; }
.nudge { position: absolute; top: 60px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.nudge:hover { background: var(--ink); color: var(--paper); }
.nudge.prev { left: -12px; }
.nudge.next { right: -12px; }
@media (hover: none) {
  .nudge { display: none; }
}
@media (max-width: 760px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .magrow .sheet { width: 96px; }
  .mini { flex-basis: 104px; }
  .strip { margin-right: -16px; padding-right: 16px; }
}
.embed #below { padding-bottom: 12px; }
/* equal columns on phones whatever the length of the edition name */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mini { flex-basis: 122px; }
.mini b { font-size: 12.5px; overflow-wrap: normal; }
@media (max-width: 760px) {
  .mini { flex-basis: 116px; }
}
.mini { min-width: 0; }
.mini b { font-size: 12px; overflow-wrap: anywhere; }
/* one to three papers: centred in the row, at the same size they would have in a full row */
.grid.few { display: flex; flex-wrap: wrap; justify-content: center; }
.grid.few .card { flex: 0 1 247px; min-width: 0; }
@media (max-width: 560px) {
  .grid.few .card { flex: 0 0 calc(50% - 6px); }
}