/* Site styles. Desktop: everything scales with the window width (like Readymag).
   Phone (up to 800px): blocks stack into a column. */
:root {
  /* 1 design pixel: the layout is fitted into the window by width (1024) and by height (620), like Readymag did.
     --zoom is the browser zoom, set by a small script in the page head, so that Cmd +/- still changes the size */
  --z: var(--zoom, 1);
  --px: clamp(calc(0.78px * min(var(--z), 1)), min(calc(min(var(--z), 1.38) * 100vw / 1024), calc(var(--z) * 100vh / 620)), calc(2.4px * var(--z)));
  --fpx: max(var(--px), 0.95px);                  /* same for fonts, with a lower bound */
  --colw: calc(711 * var(--px));                  /* content column width */
  --cell: calc(var(--colw) / 47);                 /* one grid unit */
  --hdr: calc(64 * var(--px));
  --ink: #222;
  --grey: #5c5c5c;
  /* Trebuchet MS for texts, the uploaded Helvetica ("NS Meta") for small captions and lists, Inter for the menu */
  --f-main: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
  --f-nav: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-meta: "NS Meta", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--ink); font-family: var(--f-main); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* Header */
.hdr { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--hdr); background: #fff; }
.hdr-in { width: var(--colw); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  font: 400 calc(12 * var(--fpx)) / 1.5 var(--f-nav); letter-spacing: -0.2px; padding-bottom: calc(14 * var(--px)); }
.hdr a { text-decoration: none; color: #000; }
.hdr nav { display: flex; gap: calc(28 * var(--px)); }
.hdr nav a { color: #141414; }
.hdr nav a.on, .hdr nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Grid page */
.page { padding-top: var(--hdr); flex: 1; }
.grid { width: var(--colw); margin: 0 auto; display: grid; grid-template-columns: repeat(47, minmax(0, 1fr)); grid-auto-rows: minmax(var(--cell), auto); }
.blk { position: relative; min-width: 0; grid-column: var(--x) / span var(--w); grid-row: var(--y) / span var(--h); }
.blk-image img, .blk-image a, .blk-video iframe, .blk-video video, .ss, .ss-slide, .ss-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk-image img, .blk-video video, .ss-slide img { object-fit: cover; }
.pg-end { grid-column: 1; pointer-events: none; }
.crop { position: absolute; inset: 0; overflow: hidden; }
.blk-image .crop img { inset: auto; max-width: none; object-fit: fill; }
.blk-video { background: none; } /* no black box while a video loads */
.ph small { display: block; margin-top: 4px; font-size: 11px; opacity: 0.8; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: #f1f1f1; color: #999; font: 12px/1.3 var(--f-nav); text-align: center; }
p.ph { position: static; background: none; display: block; }

/* Text */
.txt { margin: 0; font-weight: 400; color: var(--ink); overflow-wrap: break-word; }
.txt p { margin: 0; }
.txt a { text-decoration: underline; text-underline-offset: 2px; }
.t-meta a, .t-small a { text-decoration: none; }
.t-meta a:hover, .t-small a:hover { text-decoration: underline; }
.t-title { font: 400 calc(18 * var(--fpx)) / 1.667 var(--f-main); text-transform: uppercase; }
.t-body { font: 400 calc(12 * var(--fpx)) / 1.25 var(--f-main); }
.t-meta { font: 400 calc(10 * var(--fpx)) / 1.4 var(--f-meta); }
.t-large { font: 400 calc(14 * var(--fpx)) / 2.143 var(--f-main); }
.t-list { font: 400 calc(10 * var(--fpx)) / 1.8 var(--f-meta); }
.t-small { font: 400 calc(10 * var(--fpx)) / 1.8 var(--f-main); color: var(--grey); }
.txt .hd { font: 400 calc(14 * var(--fpx)) / 2.143 var(--f-main); }
.t-title .hd { font: inherit; }
.txt strong { font-weight: 700; }
.a-left { text-align: left; } .a-center { text-align: center; } .a-right { text-align: right; } .a-justify { text-align: justify; }

/* Slideshow */
.ss { overflow: hidden; background: #000; }
.ss-slide { opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.ss-slide.on { opacity: 1; }
.ss-btn { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; }
.ss-prev { left: 0; cursor: w-resize; } .ss-next { right: 0; cursor: e-resize; }
.ss-btn::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 1.5px 1.5px; opacity: 0; transition: opacity 0.2s; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.ss-prev::after { left: 16px; transform: translateY(-50%) rotate(45deg); }
.ss-next::after { right: 16px; transform: translateY(-50%) rotate(-135deg); }
.ss:hover .ss-btn::after { opacity: 0.9; }

/* Full-screen gallery */
.page:not(.no-zoom) .blk-image img { cursor: zoom-in; }
.page:not(.no-zoom) .blk-image a img { cursor: pointer; }
.lb { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lb-frame { position: relative; overflow: hidden; flex: none; }
.lb-img { position: absolute; max-width: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.lb-btn { position: absolute; border: 0; background: none; padding: 0; cursor: pointer; width: 60px; height: 60px; }
.lb-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: solid #222; border-width: 0 0 1.5px 1.5px; }
.lb-prev { left: 4px; top: calc(50% - 30px); } .lb-prev::after { transform: translate(-30%, -50%) rotate(45deg); }
.lb-next { right: 4px; top: calc(50% - 30px); } .lb-next::after { transform: translate(-70%, -50%) rotate(-135deg); }
.lb-close { top: 4px; right: 4px; }
.lb-close::before, .lb-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 1.5px; background: #222; border: 0; }
.lb-close::before { transform: translate(-50%, -50%) rotate(45deg); } .lb-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lb-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font: 400 11px/1 var(--f-nav); color: var(--grey); pointer-events: none; }

/* Home */
.home { flex: 1; width: var(--colw); margin: 0 auto; padding-top: calc(var(--hdr) + 16 * var(--px)); }
.card { display: block; text-decoration: none; margin-bottom: calc(48 * var(--px)); text-align: right; }
.card-img { display: block; position: relative; overflow: hidden; }
.card-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 0.2s; }
.card-img:not([style]) img { position: static; height: auto; }
.card:hover img { opacity: 0.86; }
.card-t { display: block; font: 400 calc(14 * var(--fpx)) / 2.143 var(--f-main); color: #000; }
.card-m { display: block; font: 400 calc(10 * var(--fpx)) / 1.8 var(--f-main); color: var(--grey); }
.card .ph { position: static; aspect-ratio: 16 / 9; }
.nf { font: 400 calc(12 * var(--fpx)) / 2 var(--f-main); color: var(--grey); margin: 0 0 calc(16 * var(--px)); }

/* Footer */
.ftr { margin-top: calc(96 * var(--px)); padding-bottom: calc(40 * var(--px)); text-align: center; font: 400 calc(10 * var(--fpx)) / 1.8 var(--f-main); color: var(--grey); }

/* ---------- Phone ---------- */
@media (max-width: 800px) {
  :root { --hdr: 52px; }
  .hdr-in { width: auto; padding: 0 16px; font-size: 13px; }
  .hdr nav { gap: 18px; }
  .page { padding-top: calc(var(--hdr) + 8px); }
  .grid { width: auto; margin: 0 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; align-items: start; }
  .blk { grid-column: span 2; grid-row: auto; order: var(--mo); }
  .blk.m-half { grid-column: span 1; }
  .blk.m-hide, .pg-end { display: none; }
  .blk-image, .blk-video, .blk-slideshow { aspect-ratio: var(--ar); }
  .blk-text, .blk-title { margin: 6px 0; }
  .t-title { font-size: 15px; line-height: 1.4; }
  .t-body { font-size: 14px; line-height: 1.45; }
  .t-meta { font-size: 12px; line-height: 1.45; }
  .t-large { font-size: 14px; line-height: 1.8; }
  .t-list { font-size: 12px; line-height: 1.7; }
  .txt .hd { font-size: 15px; line-height: 2; }
  .t-small { font-size: 12px; }
  .a-justify { text-align: left; }
  .home { width: auto; margin: 0 16px; padding-top: calc(var(--hdr) + 8px); }
  .card { margin-bottom: 28px; }
  .card-t { font-size: 12.5px; line-height: 1.5; margin-top: 7px; }
  .card-m { font-size: 10.5px; line-height: 1.5; }
  .ftr { margin-top: 56px; padding-bottom: 32px; font-size: 11px; }
  .ss-btn::after { opacity: 0.9; }
  .lb-prev, .lb-next { top: auto; bottom: 0; }
}