:root { --paper:#ededeb; --ink:#161616; --red:#ef2020; --frame:2px solid var(--ink); --divider:var(--frame); --frame-padding:8px 10px 7px; --label-font:700 11px/1.2 monospace; --label-tracking:.05em; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); }
body { margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; }
main { display:flex; flex-direction:column; width:min(800px, calc(100% - 32px)); margin:16px auto 28px; padding-bottom:96px; }
header { display:grid; grid-template-columns:auto 1fr; gap:12px; border:var(--frame); border-bottom:0; padding:var(--frame-padding); }
header h1, .page-count { margin:0; font:var(--label-font); letter-spacing:var(--label-tracking); }
header h1 { color:var(--ink); text-align:right; }
.page-count { color:var(--red); }
.object { display:grid; grid-template-columns:minmax(280px, 43%) 1fr; border:var(--frame); min-height:590px; }
.cover { background:var(--red); display:grid; place-items:center; padding:clamp(28px, 5vw, 62px); border-right:var(--frame); }
.cover img { width:min(100%, 355px); display:block; box-shadow:9px 10px 0 var(--ink); }
.information { padding:clamp(24px, 5vw, 68px); display:flex; flex-direction:column; justify-content:center; }
.number, .subhead, .byline, .copies-title, .descriptions-title, figcaption, footer { margin:0; font:var(--label-font); letter-spacing:var(--label-tracking); }
.number { color:var(--red); margin-bottom:24px; }
.eyebrow { color:var(--red); font:700 11px/1.2 monospace; letter-spacing:.05em; margin:0 0 13px; }
h2 { font-size:clamp(2.25rem, 5.4vw, 5rem); line-height:.86; letter-spacing:-.07em; margin:0; font-weight:900; }
.subhead { margin-top:25px; color:var(--red); }.note { width:min(385px, 100%); font-size:16px; font-weight:bold; line-height:1.12; margin:24px 0 18px; }
.rule { width:100%; max-width:410px; height:2px; background:var(--ink); }.byline { margin-top:15px; line-height:1.35; }
.index { display:grid; grid-template-columns:repeat(4, 1fr); border:var(--frame); border-top:0; }
.index p { min-height:74px; margin:0; padding:12px; border-right:var(--frame); font:700 10px/1.15 monospace; display:flex; flex-direction:column; justify-content:space-between; }.index p:last-child { border:0; }.index b { color:var(--red); font-size:22px; }
.index .language { grid-column:span 2; display:flex; justify-content:center; font-size:12px; line-height:1.7; }
.copies, .descriptions { border:var(--frame); }.copies { margin-top:32px; }.copies-title, .descriptions-title { color:var(--ink); padding:var(--frame-padding); border-bottom:var(--frame); }
.stack { position:relative; height:355px; margin:0; overflow:hidden; background:#d7d7d5; }
.copy { position:absolute; margin:0; width:160px; padding:6px; border:var(--frame); background:var(--paper); box-shadow:5px 5px 0 var(--ink); }.copy img { display:block; width:100%; height:238px; object-fit:cover; object-position:top; }figcaption { padding-top:6px; font-size:9px; }
.copy-one { left:4%; top:31px; transform:rotate(-3deg); }.copy-two { left:27%; top:64px; transform:rotate(2deg); }.copy-three { left:51%; top:27px; transform:rotate(-1deg); }.copy-four { right:4%; top:61px; transform:rotate(3deg); }
.descriptions { order:1; margin-top:32px; padding:0; }.description-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.description-grid article { min-height:145px; padding:13px; border-right:var(--divider); border-bottom:var(--divider); display:flex; flex-direction:column; justify-content:center; gap:14px; }.description-grid article:nth-child(2n) { border-right:0; }.description-grid article:last-child, .description-grid article:nth-last-child(2):nth-child(odd) { border-bottom:0; }
.description-grid p { margin:0; font-size:12px; line-height:1.32; }.description-grid cite { font:700 9px/1.25 monospace; font-style:normal; letter-spacing:.03em; }
.source-box { margin-top:32px; border:var(--frame); }.source-box-title { margin:0; padding:var(--frame-padding); border-bottom:var(--frame); font:var(--label-font); letter-spacing:var(--label-tracking); }.source-box article { padding:13px; display:flex; flex-direction:column; gap:14px; }.source-box article p { margin:0; font-size:12px; line-height:1.32; }.source-box cite { font:700 9px/1.25 monospace; font-style:normal; letter-spacing:.03em; }
.development { background:#d7d7d5; }.development .source-box-title { background:var(--paper); }.development article { width:min(84%, 650px); margin:28px auto; padding:24px; border:var(--frame); background:#fff; box-shadow:5px 5px 0 var(--ink); gap:17px; }.development article p { font-size:15px; line-height:1.32; }
.development .algorithm-callout { font-size:17px; font-weight:700; font-style:italic; line-height:1.3; }
.development .algorithm-callout mark { padding:1px 3px; background:var(--red); color:#fff; }
.paper-pages { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); place-items:center; gap:22px; padding:28px; background:#d7d7d5; overflow:hidden; }.paper-pages img { display:block; width:100%; height:auto; padding:5px; border:var(--frame); background:var(--paper); box-shadow:5px 5px 0 var(--ink); transform:rotate(-1deg); }.paper-pages img + img { transform:rotate(1deg); }
.source-body { display:grid; grid-template-columns:1fr 1fr; }.source-visual { display:grid; place-items:center; margin:0; padding:28px; background:#d7d7d5; overflow:hidden; }.source-visual img { display:block; width:86%; height:auto; padding:5px; border:var(--frame); background:var(--paper); box-shadow:5px 5px 0 var(--ink); transform:rotate(-2deg); }.source-body article { justify-content:center; border-left:var(--divider); }
.curriculum-box .source-visual img { width:min(86%, 640px); }
.image-collage { margin-top:32px; border:var(--frame); background:#fff; }.image-collage img { display:block; width:100%; height:auto; }.image-collage-title { margin:0; padding:var(--frame-padding); border-bottom:var(--frame); font:var(--label-font); letter-spacing:var(--label-tracking); }
footer { order:2; margin-top:32px; padding-top:8px; border-top:var(--frame); text-align:right; font-size:9px; }
@media (max-width:680px) { main { width:calc(100% - 20px); margin-top:10px; padding-bottom:96px; } .object { grid-template-columns:1fr; } .cover { border-right:0; border-bottom:var(--frame); padding:30px; } .cover img { max-width:230px; } .information { min-height:360px; padding:30px 24px; } .index { grid-template-columns:1fr 1fr; } .index p:nth-child(2) { border-right:0; } .index p:nth-child(-n+2) { border-bottom:var(--frame); } .stack { height:282px; } .copy { width:118px; padding:5px; } .copy img { height:174px; } .copy-one { left:-14px; top:25px; } .copy-two { left:20%; top:55px; } .copy-three { left:51%; top:21px; } .copy-four { right:-15px; top:55px; } .description-grid { grid-template-columns:1fr; } .description-grid article { min-height:0; border-right:0; } .description-grid article:nth-last-child(2):nth-child(odd) { border-bottom:var(--divider); } .source-body { grid-template-columns:1fr; }.source-body article { border-left:0; border-top:var(--divider); } footer { margin-top:32px; padding-top:8px; text-align:right; } }