/* One Acre Fields: Journal entry (single.php).
   Page-specific rules from prototype 06-entry, values verbatim. The body
   styles also cover block-editor markup (image, quote, lists, captions),
   since block-library CSS is dequeued on the front end. */

body.oaf-entry{background:linear-gradient(180deg, #F6F2E8 0%, #F1EADA 50%, #EDE3CC 100%)}

/* hero */
.post-hero{padding-bottom:1.5rem}
.post-hero .wrap{max-width:900px}
.oaf-entry .crumbs{font-size:.72rem;margin-bottom:1.2rem}
.oaf-entry .crumbs a{display:inline-block;padding:.9rem 0;margin:-.9rem 0}
.post-hero .h1{font-size:clamp(2.2rem,5vw,4.2rem);max-width:20ch}
.post-hero .dek{color:var(--ink-2);font-size:1.15rem;max-width:44ch;margin-top:1rem}
.byline{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3-text);border-top:1px solid var(--line);padding-top:1rem}
.byline .w{font-family:var(--hand);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--earth-text)}

/* the article */
.article{padding:clamp(2rem,5vh,3.5rem) clamp(18px,4.5vw,56px) clamp(4rem,9vh,7rem)}
.article .wrap{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(2rem,6vw,5rem);align-items:start}
.body{max-width:62ch;font-size:1.08rem;line-height:1.75;color:var(--ink)}
.body p{margin:0 0 1.3rem}
.body > p:first-of-type::first-letter{font-family:var(--display);font-weight:var(--dw);font-size:3.6em;float:left;line-height:.85;margin:.06em .12em 0 0;color:var(--earth)}
.body h2{font-family:var(--display);font-weight:var(--dw);font-size:1.6rem;letter-spacing:var(--dls);text-transform:var(--dcase);margin:2.2rem 0 .8rem;line-height:1.15}
.body h3{font-family:var(--display);font-weight:var(--dw);font-size:1.25rem;letter-spacing:var(--dls);margin:1.8rem 0 .6rem;line-height:1.2}
.body a{color:var(--earth-text)}
.body blockquote{margin:2rem 0;padding:0;font-family:var(--hand);color:var(--earth);font-size:1.5rem;line-height:1.45;border:0}
.body blockquote::before{content:"";display:block;width:60px;height:2px;background:var(--earth);margin-bottom:.8rem;opacity:.6}
.body blockquote p{margin:0 0 .6rem}
.body blockquote p:last-child{margin-bottom:0}
.body blockquote cite{display:block;font-family:var(--hand);font-weight:300;font-style:normal;font-size:.7em;color:var(--ink-2);margin-top:.4rem}

/* taped-in figures: the imported figure.print and WordPress image blocks /
   captioned images alike */
.body figure.print,.body .wp-block-image,.body .wp-caption,.body figure:not([class]){position:relative;margin:2rem 0;padding:6px;background:#fff;box-shadow:0 10px 24px rgba(30,37,32,.16), 0 1px 0 rgba(30,37,32,.25);transform:rotate(-.8deg);max-width:100%}
.body div.wp-block-image{padding:0;background:none;box-shadow:none;transform:none}
.body div.wp-block-image > figure{position:relative;margin:0;padding:6px;background:#fff;box-shadow:0 10px 24px rgba(30,37,32,.16), 0 1px 0 rgba(30,37,32,.25);transform:rotate(-.8deg)}
.body figure.print .tape{position:absolute;top:-9px;width:54px;height:18px;background:rgba(214,178,120,.65)}
.body figure.print .tape.l{left:14px;transform:rotate(-6deg)}.body figure.print .tape.r{right:14px;transform:rotate(5deg)}
/* image blocks carry no tape spans: draw the two strips with pseudo-elements */
.body figure.wp-block-image::before,.body figure.wp-block-image::after,.body div.wp-block-image > figure::before,.body div.wp-block-image > figure::after,.body .wp-caption::before,.body .wp-caption::after,.body figure:not([class])::before,.body figure:not([class])::after{content:"";position:absolute;top:-9px;width:54px;height:18px;background:rgba(214,178,120,.65);z-index:1}
.body figure.wp-block-image::before,.body div.wp-block-image > figure::before,.body .wp-caption::before,.body figure:not([class])::before{left:14px;transform:rotate(-6deg)}
.body figure.wp-block-image::after,.body div.wp-block-image > figure::after,.body .wp-caption::after,.body figure:not([class])::after{right:14px;transform:rotate(5deg)}
.body figure img{display:block;width:100%;height:auto}
.body figure a{display:block}
.body figure.print .ph{aspect-ratio:16/10;background:linear-gradient(135deg,#EFE6D3,#DCE5D3);display:grid;place-items:center;color:var(--ink-3-text);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.body figure figcaption,.body .wp-element-caption,.body .wp-caption-text{font-family:var(--hand);font-weight:300;color:var(--ink-2);font-size:1.05rem;text-align:center;padding:.6rem 0 .2rem;margin:0}

.body ul,.body ol{padding-left:1.2rem;margin:0 0 1.3rem}
.body li{margin-bottom:.4rem}
.body li::marker{color:var(--earth)}

/* the margin column */
.margin{position:sticky;top:5.5rem;display:grid;gap:1.4rem}
.mnote{font-family:var(--hand);color:var(--earth-text);font-size:1.02rem;line-height:1.45;transform:rotate(-2deg);padding-left:.6rem;border-left:2px solid rgba(181,82,45,.35)}
.mnote small{display:block;font-family:var(--hand);font-weight:300;color:var(--ink-2);font-size:1em}
.mnote .spot{max-width:120px;margin-bottom:.4rem}
.today{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3-text);border-top:1px solid var(--line);padding-top:.8rem;line-height:1.8}
.today b{display:block;font-family:var(--hand);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--earth-text);font-weight:400}
.today .place,.today .wx{display:block} /* place, then weather: two short mono lines instead of one that wraps mid-phrase (D24) */
.endnote{max-width:62ch;margin-top:2rem;border-top:1px dashed rgba(30,37,32,.35);padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;font-size:.92rem;color:var(--ink-2)}
.endnote .sig{font-family:var(--hand);color:var(--earth-text);font-size:1.1rem}
.endnote .sig:only-child{margin-left:auto}

/* previous / next */
.nextprev{background:linear-gradient(#EDE3CC, #E6D6B8)}
.nextprev .wrap{max-width:1160px}
.oaf-entry .np b{font-size:1.2rem}

.post-hero .rv{opacity:0;translate:0 14px;animation:up .9s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes up{to{opacity:1;translate:0 0}}
@media (max-width:900px){.article .wrap{grid-template-columns:1fr}.margin{position:static}}
@media (prefers-reduced-motion: reduce){.post-hero .rv{animation:none;opacity:1;translate:0 0}.np,.np b{transition:none}}