:root { --ground: #15130f; --ink: #ebe4d8; --soft: #a79e90; --paper: #f3eee4; --rule: #2d2923; --link: #e8a86a; }
html { background: var(--ground); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 1.5rem 1rem 4rem; }
main { max-width: 72rem; margin: 0 auto; }
.top { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem 2.5rem; align-items: start; margin-bottom: 2.5rem; }
.top .print { transform: rotate(1.2deg); margin-top: .5rem; }
.pile { columns: 3 15rem; column-gap: .9rem; }
.pile > * { display: inline-block; width: 100%; box-sizing: border-box; vertical-align: top; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 1rem; }
h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; margin: 0 0 0.5rem; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.intro { padding: 1rem .5rem 1.5rem 0; }
.words { padding-right: .5rem; }
.intro p { color: var(--ink); }
.sub { color: var(--soft); margin: 0 0 1.25rem; }
.soft { color: var(--soft); }
.file { padding: .5rem .5rem 1rem 0; }
.file p { margin-bottom: 0.9rem; }

.print { position: relative; background: var(--paper); padding: 10px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); cursor: zoom-in; transition: transform .2s; }
.print img { display: block; width: 100%; height: auto; }
.print:hover, .print:focus-within { z-index: 20; transform: rotate(0) scale(1.02); }
.pile .print:nth-child(4n)   { transform: rotate(-2.2deg); }
.pile .print:nth-child(4n+1) { transform: rotate(1.7deg); }
.pile .print:nth-child(4n+2) { transform: rotate(-1.1deg); margin-left: .5rem; }
.pile .print:nth-child(4n+3) { transform: rotate(2.4deg); margin-right: .5rem; }
.pile .print:nth-child(3n)   { z-index: 2; }
.print.open { visibility: hidden; }

.print.has-like { padding-bottom: 40px; }
.like { position: absolute; right: 10px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px;
  background: #fbf8f2; border: 1px solid #b9ae9d; border-radius: 4px; padding: 4px 9px; margin: 0; color: #4a433b;
  font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; cursor: pointer; }
.like svg { fill: none; stroke: currentColor; stroke-width: 2; }
.like:hover { border-color: #c4452f; color: #c4452f; }
.like.on { color: #c4452f; border-color: #c4452f; } .like.on svg { fill: currentColor; }

#pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; background: rgba(14,12,10,0.86); color: var(--soft); border: 1px solid var(--rule); border-radius: 999px; padding: .42rem .85rem; font-size: .85rem; line-height: 1; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#pill.show.ready { opacity: 1; transform: none; }
#lb { position: fixed; inset: 0; z-index: 100; cursor: zoom-out; }
#lb[hidden] { display: none; }
#lb .bg { position: absolute; inset: 0; background: rgba(10,9,7,0); transition: background .35s; }
#lb.in .bg { background: rgba(10,9,7,0.94); }
#lb img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: var(--paper); padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }

.pile { padding-bottom: 1.5rem; }
footer { position: relative; z-index: 30; background: var(--ground); max-width: 72rem; margin: 2rem auto 0; color: var(--soft); font-size: 0.95rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
footer p { margin: 0 0 .6rem; }
footer .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
footer .dot { opacity: .6; }
footer button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
footer button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

@media (max-width: 760px) {
  .top { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
  .top .print { transform: rotate(.8deg); }
  .pile { columns: 2 8rem; column-gap: .5rem; }
  .pile > * { margin-bottom: .7rem; }
  .pile .print:nth-child(4n+2), .pile .print:nth-child(4n+3) { margin-left: 0; margin-right: 0; }
  h1 { font-size: 1.9rem; }
  html { font-size: 16px; }
  .print { padding: 8px 8px 10px; }
  .print.has-like { padding-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) { .print { transform: none !important; transition: none; } #lb img { transition: none !important; } #lb .bg { transition: none; } }