/* Notes: the index (the feature and the cards), the post, and the picture viewer.
   Written on November 5, 2026 against the parts in site.css. The post runs in one 760px column for text and
   pictures; a picture the old site floated keeps its side and its width in twelfths of that column. */

/* ---------- Index ---------- */
.notes-list{padding:0 0 var(--space-section)}
.notes-intro{margin:0 0 var(--space-block)}
.notes-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-block) clamp(2rem,5vw,5rem);align-items:center;padding-top:var(--space-block);border-top:1px solid var(--hair)}
.notes-feature-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.25rem;margin:.9rem 0 .9rem;font-family:var(--italic);font-style:italic;font-weight:400;font-size:1.0625rem;line-height:1.3;color:var(--ink-2)}
.notes-feature-meta b{font-family:var(--display);font-style:normal;font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.notes-feature h2{margin:0;font-size:clamp(1.625rem,1.1rem + 1.7vw,2.375rem);line-height:1.08}
.notes-feature h2 a:hover{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.15em}
.notes-feature .lead{margin:1rem 0 0}
.notes-feature .link--go{display:inline-block;margin-top:1.5rem}
.notes-cats{margin-top:0;padding-top:0;border-top:0;margin-bottom:var(--space-block)}
.notes-cats a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.4em}
.note-rows{list-style:none;margin:var(--space-section) 0 0;padding:0;border-top:1px solid var(--hair)}
.note-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:.35rem var(--gutter);padding:var(--space-row) 0;border-bottom:1px solid var(--hair)}
.note-row-meta{margin:0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:1.0625rem;line-height:1.3;color:var(--ink)}
.note-row-meta b{display:block;margin-bottom:.35rem;font-family:var(--display);font-style:normal;font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.note-row h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;text-transform:none}
.note-row h3 a:hover{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.18em}
.note-row-text p{margin:.4rem 0 0;font-size:var(--size-small);line-height:1.6;max-width:60ch}
.note-rows:last-child>.note-row:last-child{border-bottom:0}
@media (max-width:900px){
  .notes-feature{grid-template-columns:1fr}
}
@media (max-width:640px){
  .note-row{grid-template-columns:1fr;gap:.25rem}
  .note-row-meta b{display:inline;margin:0 .75rem 0 0}
}

/* ---------- Post ---------- */
.post-wrap{width:min(100% - 2 * var(--gutter),760px);margin-inline:auto;padding:var(--space-hero-top) 0 var(--space-section)}
.post-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.25rem;margin:1.1rem 0 0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:1.0625rem;line-height:1.3;color:var(--ink-2)}
.post-meta a{display:inline-block;padding:.5em 0;font-family:var(--display);font-style:normal;font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.post-meta a:hover{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.4em}
.post-title{margin:0;font-size:min(clamp(2rem,1.3rem + 2.6vw,3.25rem),calc((100vw - 2 * var(--gutter)) / 8.6));line-height:1.04;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none}
.post-standfirst{margin:.9rem 0 0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:var(--size-deck);line-height:1.2;letter-spacing:0;max-width:40ch}
.post-cover{margin:var(--space-block) 0 0}
.post-cover img{display:block;width:100%;height:auto}
.post-body{display:flow-root;margin-top:var(--space-block);font-size:var(--size-body);line-height:1.65}
.post-body>*{margin:0 0 1.1em}
.post-body>:last-child{margin-bottom:0}
.post-body p,.post-body li{font-size:var(--size-body);line-height:1.65}
.post-body li{margin-bottom:.45em}
.post-body h2{margin:2em 0 .6em;font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem);font-weight:700;line-height:1.15;letter-spacing:.01em;text-transform:none}
.post-body h3{margin:1.75em 0 .5em;font-size:var(--size-3);font-weight:600;line-height:1.25;text-transform:none}
.post-body>h2:first-child,.post-body>h3:first-child{margin-top:0}
.post-body a{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1px;text-underline-offset:3px}
.post-body a:hover{text-decoration-thickness:2px}
/* A quote is the italic beside a 2px Tangerine rule. */
.post-body blockquote{clear:both;margin:1.75em 0;padding-left:1.5rem;border-left:2px solid var(--tang);font-family:var(--italic);font-style:italic;font-weight:400;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);line-height:1.3;letter-spacing:0}
.post-body blockquote p{margin:0 0 .6em;font:inherit;color:inherit}
.post-body blockquote p:last-child{margin-bottom:0}
/* Pictures run the column. */
.post-body>figure{clear:both;margin:var(--space-block) 0}
.post-body>figure+figure{margin-top:calc(-1 * var(--space-block) + var(--space-row))}
.post-body>figure:last-child{margin-bottom:0}
.post-body figure img{display:block;width:100%;height:auto}
.post-body figcaption{margin:.75rem 0 0;font-size:var(--size-small);line-height:1.6;color:var(--ink-2)}
.post-pic{display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in;-webkit-appearance:none;appearance:none}
/* An animation (a video made from a GIF) plays muted on a loop while it is on screen; the small button on it stops and starts it. */
.post-video{position:relative}
.post-video-media{display:block;width:100%;height:auto;background:var(--hair);cursor:pointer}
.post-video-toggle{position:absolute;right:.5rem;bottom:.5rem;margin:0;padding:.6em .9em;border:0;border-radius:999px;background:rgba(56,73,72,.82);color:var(--white);font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.14em;line-height:1;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s ease}
.post-video-toggle:hover,.post-video-toggle:focus-visible{background:var(--pine)}
.post-video-toggle:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* A picture the old site showed through a cropped frame keeps that frame (--frame is height over width); the viewer still opens the whole picture. */
.post-figure--crop img{aspect-ratio:1 / var(--frame);height:auto;object-fit:cover;object-position:var(--focal,50% 50%)}
/* A picture the old site floated beside the text keeps its side and its width in twelfths of the column, and the text wraps around it.
   Wide floats (seven twelfths and up) sit on their side without wrapping, because the text beside them would be too narrow to read. */
.post-body>.post-figure--float{clear:none;width:calc(var(--span) / 12 * 100%);margin:.3em 0 1.25rem}
.post-body>.post-figure--left{float:left;margin-right:2rem}
.post-body>.post-figure--right{float:right;margin-left:2rem}
.post-body>.post-figure--wide{float:none;clear:both;margin:var(--space-block) 0}
.post-body>.post-figure--wide.post-figure--right{margin-left:auto}
.post-body>.post-figure--float+figure{clear:both}
@media (max-width:640px){
  .post-body>.post-figure--float{float:none;width:100%;margin:var(--space-block) 0}
}

/* The close: a Work post ends on one plain line (Bible 15.7); the others end on the text. */
.post-end{clear:both;margin:var(--space-block) 0 0;padding-top:var(--space-row);border-top:1px solid var(--hair);font-family:var(--italic);font-style:italic;font-weight:400;font-size:var(--size-deck);line-height:1.2;letter-spacing:0}

/* Tags and the way to the next Note. */
.post-tags{clear:both;margin:var(--space-block) 0 0;font-size:var(--size-small);color:var(--ink-2)}
.post-tags-label{margin-right:.35em}
.post-tag{display:inline-block;padding:.3em 0;color:var(--pine)}
.post-pagination{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem var(--gutter);margin-top:var(--space-block);padding-top:var(--space-block);border-top:1px solid var(--hair)}
.post-pag{display:block;min-width:0}
.post-pag--next{text-align:right;grid-column:2}
.post-pag-label{display:block;margin-bottom:.45rem;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.post-pag-title{display:inline;font-family:var(--display);font-weight:600;font-size:var(--size-3);line-height:1.25;letter-spacing:.005em;text-wrap:balance}
.post-pag:hover .post-pag-title{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.18em}
@media (max-width:640px){
  .post-pagination{grid-template-columns:1fr}
  .post-pag--next{grid-column:auto;text-align:left}
}

/* ---------- The picture viewer (the browser's own dialog) ---------- */
.post-lightbox{max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;padding:0;border:0;background:#000;color:#fff;overscroll-behavior:contain}
.post-lightbox::backdrop{background:rgba(0,0,0,.92)}
.post-lightbox[open]{display:flex;align-items:center;justify-content:center}
.post-lightbox-img{display:block;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);width:auto;height:auto;object-fit:contain}
.post-lightbox-close{position:fixed;top:1rem;right:1rem;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:var(--pine);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.post-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}