/* POLAKID journal: reading layout on top of style.css (tokens from DESIGN.md). Home page styles untouched. */

.jr { background: var(--paper); }
.jr__main { padding: calc(var(--nav-h) + var(--s8)) var(--gut) var(--s9); }
.jr__article { max-width: 760px; margin: 0 auto; }

.jr__draft { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: #d11; color: #fff; text-align: center; padding: 8px; font: 800 12px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }

/* head */
.jr__kicker a { text-decoration: none; }
.jr__title { font: 900 clamp(40px, 6.4vw, 92px)/.9 var(--f-mono); letter-spacing: -.055em; text-transform: uppercase; margin: var(--s4) 0 var(--s5); }
.jr__dek { font: 600 clamp(18px, 1.7vw, 22px)/1.4 var(--f-mono); max-width: 46ch; }
.jr__meta { margin-top: var(--s4); color: var(--ink); opacity: .7; line-height: 2.2; }
.jr__tags span { margin-left: var(--s3); border: 1px solid currentColor; padding: 2px 6px 1px; }

/* hero and figures */
.jr__hero { margin: var(--s7) calc(var(--s7) * -1) var(--s7); }
.jr-fig { margin: var(--s7) 0; position: relative; }
.jr-fig picture, .jr-fig img { display: block; width: 100%; height: auto; }
.jr-fig img { box-shadow: 0 12px 22px -16px rgba(0,0,0,.7); }
.jr-fig .tape { top: -11px; }
.jr-fig figcaption { margin-top: var(--s3); }
.jr-fig .fine { display: block; font-size: 20px; line-height: 1.1; }
.jr-fig .credit { display: block; margin-top: 4px; font: 500 10px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; opacity: .65; }
.jr-fig--tilt-l { transform: rotate(-1.2deg); } .jr-fig--tilt-r { transform: rotate(1deg); }
.jr-missing { margin: var(--s6) 0; padding: var(--s6); border: 2px dashed #d11; color: #d11; font: 700 13px/1.4 var(--f-mono); text-transform: uppercase; text-align: center; }

/* body */
.jr__body { font: 400 17px/1.7 var(--f-mono); }
.jr__body p { margin: 0 0 1.1em; }
.jr__body h2 { font: 900 clamp(28px, 3.2vw, 42px)/.95 var(--f-mono); letter-spacing: -.05em; text-transform: uppercase; margin: var(--s8) 0 var(--s4); }
.jr__body h3 { font: 800 21px/1.15 var(--f-mono); letter-spacing: -.03em; text-transform: uppercase; margin: var(--s6) 0 var(--s3); }
.jr__body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jr__body a:hover { background: var(--acid); }
.jr__body ul, .jr__body ol { margin: 0 0 1.1em 1.3em; padding: 0; list-style: square; }
.jr__body ol { list-style: decimal; }
.jr__body li { margin-bottom: .35em; }
.jr__body blockquote { margin: var(--s7) 0; font: 400 clamp(26px, 3vw, 38px)/1.1 var(--f-fine); text-transform: uppercase; transform: rotate(-1deg); }
.jr__body hr { border: 0; border-top: 1px solid var(--ink); margin: var(--s7) 0; opacity: .3; }
.jr__body .acid-box { display: inline-block; padding: .06em .2em 0; background: var(--acid); color: var(--ink); border: 2px solid var(--ink); transform: rotate(-3deg); font-family: var(--f-hand); text-transform: uppercase; font-size: 1.35em; line-height: 1; }
.jr-note { display: block; margin: var(--s6) 0; padding: var(--s3) var(--s4) var(--s4); background: var(--cream); box-shadow: 0 10px 18px -12px rgba(0,0,0,.5); transform: rotate(-1.5deg); font: 400 22px/1.15 var(--f-fine); text-transform: uppercase; max-width: 34ch; }

/* end matter */
.jr__end { margin-top: var(--s9); border-top: 3px solid var(--ink); padding-top: var(--s5); }
.jr__end h2 { font: 900 22px/1 var(--f-mono); letter-spacing: -.04em; text-transform: uppercase; margin: var(--s5) 0 var(--s3); }
.jr__end ol { margin: 0 0 var(--s5) 1.3em; padding: 0; font-size: 13px; line-height: 1.5; }
.jr__end li { margin-bottom: 6px; word-break: break-word; }
.jr__tm { margin-top: var(--s5); opacity: .6; }
.jr__get { padding: var(--s9) var(--gut); }
.jr__get .sticker { --st: clamp(220px, 26vw, 340px); }

/* journal index */
.jr__mark { font: 400 clamp(110px, 20vw, 340px)/.8 var(--f-mark); text-transform: lowercase; letter-spacing: -.01em; margin: var(--s4) 0 var(--s4); }
.jr__intro { font: 400 clamp(26px, 3vw, 44px)/1 var(--f-hand); text-transform: uppercase; transform: rotate(-2deg); display: inline-block; margin-bottom: var(--s7); }
.jr__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.jr-card { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); text-decoration: none; color: var(--ink); min-height: 280px; }
.jr-card:hover { background: var(--acid); }
.jr-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jr-card h2 { font: 900 26px/.95 var(--f-mono); letter-spacing: -.05em; text-transform: uppercase; }
.jr-card p { font-size: 14px; line-height: 1.45; }
.jr-card .label { opacity: .7; margin-top: auto; }
.jr__empty { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); padding: var(--s7); grid-column: 1 / -1; font: 400 28px/1 var(--f-fine); text-transform: uppercase; }

@media (max-width: 860px) {
  .jr__hero { margin-left: 0; margin-right: 0; }
  .jr__list { grid-template-columns: 1fr; }
  .jr__body { font-size: 16px; }
}

/* home page teaser (section 09), written by build_journal.py */
.jr-teaser .sec__title { margin-bottom: 0; }
.jr-teaser .jr__list { margin-top: var(--s7); }
.jr-teaser__all { display: flex; justify-content: center; margin-top: var(--s6); }
.jr-teaser__all .btn { --btn-inv: var(--paper); }
.jr-card__draft { align-self: flex-start; background: #d11; color: #fff; padding: 2px 6px; font: 800 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }

/* contact form */
.ct { margin-top: var(--s7); display: grid; gap: var(--s5); max-width: 640px; }
.ct__f { display: grid; gap: var(--s2); }
.ct input, .ct textarea { font: 400 17px/1.5 var(--f-mono); color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 0; padding: 10px 12px; width: 100%; }
.ct textarea { resize: vertical; min-height: 180px; }
.ct input:focus, .ct textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--acid), 4px 4px 0 2px var(--ink); }
.ct__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct__note { font-size: 13px; line-height: 1.5; opacity: .75; }
.ct .btn { justify-self: start; background: var(--acid); }