/* The shop (Whitman, as printed; sketched as sketches/2026-10-31-whitman/envs/1855-shop): the press open, the type (left, reversed)
   facing the sheet it prints (right). The picker's strip holds the top 38 px (print.css).
   Metal type is not kerned, and neither is this page: both halves are set with kerning and ligatures off, so the left, built letter by
   letter in spans, lays out exactly as the right. */
:root{
  --metal-ground:#1a1815;      /* the forme: type under the platen */
  --metal:#8f897e;             /* a sort's face, set */
  --metal-live:#efe8db;        /* the line in the stick */
  --paper:#eee5d1;             /* the sheet */
  --ink:#1f1b16;
  --ink-soft:#5d554a;
  --serif:"Old Standard TT","Libre Caslon Text",Georgia,serif;
  --display:"Bodoni Moda","Old Standard TT",Georgia,serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--metal-ground)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--serif);
  font-kerning:none;font-variant-ligatures:none;font-feature-settings:"kern" 0,"liga" 0;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* ---------- the press, open ---------- */
.press{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 38px);min-height:calc(100svh - 38px)}
.half{position:relative;display:flex;align-items:center;justify-content:center;padding:64px 40px 84px}
.forme{background:var(--metal-ground);color:var(--metal)}
.sheet{background:var(--paper);color:var(--ink)}

.page{width:min(560px,100%);text-align:center}
.forme .page{transform:scaleX(-1)}

.head{font:600 14px/1 var(--display);letter-spacing:.42em;margin:0 0 44px;padding-left:.42em}
.name{font:400 clamp(56px,5.9vw,88px)/1 var(--serif);letter-spacing:-.005em;margin:0}
.self{font:400 21px/1.3 var(--serif);letter-spacing:.015em;margin:.55em 0 0}
.rule{margin:30px auto 32px;width:132px;height:10px;line-height:0}
.rule svg{display:block;fill:currentColor}

.verse{text-align:left;font:400 clamp(16px,1.27vw,19px)/1.55 var(--serif);margin:0 auto;width:max-content;max-width:100%}
.verse p{margin:0}
.verse p+p{margin-top:.8em}
.l{display:block;padding-left:2.8em;text-indent:-2.8em}   /* a turned-over line hangs deep, as the 1855 hangs it */
.sc{letter-spacing:.06em}
.l1{display:block}
.cap{float:left;font-size:3.42em;line-height:.72;margin:.13em .16em 0 -.03em}
.rooms{text-align:center;font:400 15.5px/1.8 var(--serif);margin:34px 0 0}
.rooms .lead{letter-spacing:.2em;font-size:.78em;text-transform:uppercase;margin-right:.5em}
.rooms a{white-space:nowrap}
.rooms i{font-style:normal;white-space:nowrap}
.rooms i.eol{visibility:hidden}
.rooms a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(31,27,22,.28);transition:text-decoration-color .15s}
.rooms a:hover,.rooms a:focus-visible{text-decoration-color:currentColor}
.rooms a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.forme .rooms a{text-decoration:none}

.imprint{font:700 12.5px/1 var(--serif);letter-spacing:.34em;margin:40px 0 0;padding-left:.34em}

/* the small labels at the foot of each half, as an exhibition labels its objects */
.tag{position:absolute;left:0;right:0;bottom:26px;margin:0;text-align:center;font:500 10.5px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase}
.forme .tag{color:#7d776d}
.sheet .tag{color:var(--ink-soft)}
.again{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:none;border:0;padding:0 0 0 1.4em;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(31,27,22,.35)}
.again:hover{text-decoration-color:currentColor}

/* ---------- the setting and the pull (script.js) ---------- */
.forme .page{visibility:hidden}
.js-ready .forme .page{visibility:visible}
.c{position:relative;top:0;opacity:1}
.setting .forme .c{opacity:0;top:-.22em}
.setting .forme .c.in{opacity:1;top:0;transition:opacity 70ms linear,top 110ms cubic-bezier(.2,.7,.3,1)}
.setting .forme .rule svg{opacity:0;transition:opacity 60ms linear}
.setting .forme [data-take]{color:var(--metal)}
.setting .forme [data-take].live{color:var(--metal-live)}
.forme [data-take]{transition:color .5s ease}
.setting .sheet .page{opacity:0;animation:failsafe 0s 12s forwards}   /* if the script stops, the sheet shows anyway */
@keyframes failsafe{to{opacity:1}}
.sheet .page{transition:opacity 50ms linear}
.sheet::after{content:"";position:absolute;inset:0;background:#15130f;opacity:0;pointer-events:none}
.pull .sheet::after{animation:platen .62s cubic-bezier(.4,0,.2,1) both}
@keyframes platen{0%{opacity:0}26%{opacity:.2}34%{opacity:.2}100%{opacity:0}}
.pull .forme .page{animation:give .62s ease both}
@keyframes give{0%,26%{filter:none}34%{filter:brightness(.82)}100%{filter:none}}

/* ---------- how it was made ---------- */
.colophon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.colophon .half{padding:96px 56px 104px}
.dark{background:var(--metal-ground);color:#cfc8bb}
.light{background:var(--paper)}
.plate{margin:0;width:min(340px,100%)}
.plate a{display:block}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{font:italic 400 14px/1.5 var(--serif);color:#a39c90;margin-top:16px;text-align:center}
.words{width:min(470px,100%)}
.words h2{font:700 12.5px/1 var(--serif);letter-spacing:.34em;text-transform:uppercase;margin:0 0 34px;text-align:center;padding-left:.34em}
blockquote{margin:0 0 26px}
blockquote p{font:400 19px/1.55 var(--serif);margin:0;text-indent:-.4em}
blockquote footer{font:italic 400 15px/1.4 var(--serif);color:var(--ink-soft);margin-top:8px;text-align:right}
.where{font:400 15.5px/1.6 var(--serif);color:var(--ink);margin:34px 0 0;padding-top:24px;border-top:1px solid rgba(31,27,22,.18)}
.more{margin:22px 0 0;display:flex;gap:26px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.more a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;text-decoration-color:rgba(31,27,22,.3)}
.more a:hover{text-decoration-color:currentColor}

.foot{background:var(--metal-ground);color:#8f897e;text-align:center;padding:34px 24px 40px;font:400 14px/1.5 var(--serif)}
.foot p{margin:0}
.foot .credit{font:400 12px/1.5 var(--sans);color:#6f695f;margin-top:6px}

/* ---------- a phone: the stick above the sheet ---------- */
@media (max-width:860px){
  .press,.colophon{grid-template-columns:minmax(0,1fr)}
  .press{min-height:0}
  .half{padding:40px 20px 64px}
  .forme{padding:30px 20px 46px;overflow:hidden}
  .forme .page :is(.rule,.verse,.rooms,.imprint){display:none}
  .forme .tag{bottom:14px}
  .sheet .tag{bottom:22px}
  .page{width:100%}
  .head{font-size:11px;margin-bottom:26px}
  .name{font-size:min(11.4vw,64px)}
  .self{font-size:16.5px}
  .rule{margin:22px auto 24px}
  .verse{font-size:15.5px;width:auto}
  .rooms{font-size:14.5px;text-align:left;text-align-last:left}
  .imprint{font-size:11px}
  .colophon .half{padding:56px 22px 64px}
  .plate{width:min(260px,100%)}
  blockquote p{font-size:17px}
  .more{flex-wrap:wrap;gap:16px 22px}
}

@media (prefers-reduced-motion:reduce){
  .setting .forme .c{opacity:1;top:0}
  .setting .sheet .page{opacity:1}
  .pull .sheet::after,.pull .forme .page{animation:none}
}