/* The glossary of Leaves of Grass (his words, 2026-11-01, about 1:31 am, through Verso: "we could present this right nnow simply as a
   whitman glossary of sorts, a room filled with elements writers could see all thogether and potentially use"; sketched as
   sketches/2026-10-31-whitman/tools/kit_page.py): one calm column, as a printer's specimen book, each kind under its own head, each part
   centred with its name beneath, the parts of one kind at one scale. Captions in his pattern ("yes on flowes caption", 7:20 am). */
@font-face{font-family:"WB"; src:url(/whitman/views/fonts/butterfly.woff2) format("woff2"); font-display:block}   /* the views' one-glyph face of the butterfly, at U+E912 */
:root{--ground:#f4ecda; --ink:#251d16; --soft:#62564a; --rule:color-mix(in srgb,var(--ink) 16%,transparent); --cloth:#24302c; --gilt:#d9c690;
  --pad:clamp(20px,5vw,48px)}
html{background:var(--ground)}
body{margin:0; background:var(--ground); color:var(--ink)}
.glossary{max-width:58rem; margin:0 auto; padding:0 var(--pad) clamp(48px,8vh,80px); font-family:"Libre Caslon Text",Georgia,serif}

/* the head of the page, as a specimen's title page: centred, its lines stepped in size */
.g-title{text-align:center; padding:clamp(56px,11vh,110px) 0 clamp(48px,9vh,84px); border-bottom:1px solid var(--rule)}
.g-title h1{margin:0; font:400 clamp(2.8rem,7vw,5.2rem)/1 "Libre Caslon Display","Libre Caslon Text",serif; letter-spacing:.05em}
.g-star{display:block; width:min(70%,22rem); aspect-ratio:1036 / 146; margin:22px auto 22px; background:var(--ink);
  -webkit-mask:url(img/rule-star.webp) center/contain no-repeat; mask:url(img/rule-star.webp) center/contain no-repeat}
.g-lede{max-width:36rem; margin:0 auto; font:400 1.08rem/1.6 "Libre Caslon Text",serif; text-wrap:pretty}

/* each kind */
.g-group{padding:clamp(52px,9vh,84px) 0 0}
.g-group > header{text-align:center; margin:0 0 clamp(34px,6vh,54px)}
.g-group h2{margin:0; font:400 1.7rem/1.1 "Libre Caslon Text",serif; font-variant-caps:small-caps; font-synthesis:small-caps; letter-spacing:.08em}
.g-rule{display:block; width:6.5rem; aspect-ratio:309 / 57; margin:10px auto; background:var(--ink);
  -webkit-mask:url(img/rule-proto.webp) center/contain no-repeat; mask:url(img/rule-proto.webp) center/contain no-repeat}
.g-group > header p{margin:0; font:italic 400 1rem/1.5 "Libre Caslon Text",serif; color:var(--soft)}
.g-entries{display:flex; flex-direction:column; align-items:center; gap:clamp(40px,7vh,64px)}
.g-entry{margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:100%}
.g-art{display:flex; align-items:center; justify-content:center; max-width:100%}
.g-entry figcaption{margin-top:16px; max-width:30rem; font-size:.95rem; line-height:1.5}
.g-entry b{font-weight:400; font-size:1.12rem}
.g-where{color:var(--soft)}

/* the parts themselves */
.g-ink{display:block; max-width:100%; background:var(--ink); -webkit-mask:var(--src) center/contain no-repeat; mask:var(--src) center/contain no-repeat}
.g-gilt{display:block; padding:34px 40px; background:var(--cloth) url(/whitman/views/book/img/cloth-1855-green.webp) 0 0/242px; box-sizing:border-box}
.g-gilt img{display:block; width:100%; height:auto}
.g-frame{display:block; width:300px; max-width:100%; height:190px; background:var(--cloth) url(/whitman/views/book/img/cloth-1855-green.webp) 0 0/242px; position:relative}
.g-frame::after{content:""; position:absolute; inset:14px; border:1px solid var(--gilt);
  box-shadow:inset 0 0 0 4px var(--cloth), inset 0 0 0 5px var(--gilt), inset 0 0 0 9px var(--cloth), inset 0 0 0 10.5px var(--gilt)}
.g-glyph{font:400 220px/1 "WB"; color:var(--ink)}
.g-tile{display:block; width:260px; height:180px; max-width:100%}
.g-photo{display:block; max-width:100%; height:auto}
.g-4 .g-entries, .g-5 .g-entries{flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:28px 24px}
.g-4 .g-entry{width:260px}
.g-5 .g-entry{width:228px}
.g-5 .g-photo{width:228px; height:290px; object-fit:cover; object-position:50% 30%}
.g-end{margin:clamp(60px,10vh,96px) auto 0; padding-top:22px; border-top:1px solid var(--rule); max-width:40rem; text-align:center;
  font:italic 400 .9rem/1.5 "Libre Caslon Text",serif; color:var(--soft)}
.g-more{max-width:40rem; margin:12px auto 0; text-align:center; font:italic 400 .9rem/1.5 "Libre Caslon Text",serif; color:var(--soft)}
.g-more a{color:var(--ink)}
.g-home{text-align:center; margin:18px 0 0; font:italic 400 1rem/1.4 "Libre Caslon Text",serif}
.g-home a{color:var(--ink)}
@media (max-width:700px){
  .g-glyph{font-size:170px}
  .g-4 .g-entry, .g-5 .g-entry{width:100%}
  .g-5 .g-photo{width:100%; height:auto}
}