/* One Acre Fields: Journal (home.php, category.php).
   Page-specific rules from prototype 05-journal, values verbatim.
   Grey text that carries meaning uses --ink-3-text (PLAN 1.10). */

body.oaf-journal{background:linear-gradient(180deg, #F6F2E8 0%, #EFE6D3 30%, #E9DDC3 60%, #E6D6B8 100%)}

/* hero */
.j-hero{padding-bottom:0}
.j-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.j-hero .hand{margin-top:1rem}
/* category view: crumbs instead of the kicker */
.j-hero .crumbs{margin-bottom:1rem}
.j-hero .crumbs a{display:inline-block;padding:.9rem 0;margin:-.9rem 0}
.j-hero .crumbs a:hover{color:var(--earth-text)}

/* the notebook */
.deskwrap{padding:clamp(2rem,5vh,3.5rem) clamp(18px,4.5vw,56px) clamp(3rem,7vh,5rem);perspective:1800px}
.book{position:relative;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;background:#FBF8F0;border-radius:6px;box-shadow:0 30px 70px rgba(30,37,32,.2), 0 2px 0 rgba(30,37,32,.2);min-height:520px;transform-style:preserve-3d;isolation:isolate}
.book::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(90deg, rgba(30,37,32,.18), rgba(30,37,32,.04));transform:translateX(-50%);z-index:2}
.book::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:80px;transform:translateX(-50%);background:linear-gradient(90deg, transparent, rgba(30,37,32,.08) 48%, rgba(30,37,32,.1) 52%, transparent);pointer-events:none;z-index:1}
.pageL,.pageR{padding:clamp(1.6rem,3.5vw,3rem);position:relative}
.pageL{background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(30,37,32,.07) 31px 32px);background-position:0 3.2rem}
.pageL .k{margin-bottom:1.2rem}
.toc{display:grid;gap:0}
.toc .m{font-family:var(--hand);color:var(--earth-text);font-size:1.05rem;margin:.9rem 0 .2rem}
.toc a{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;gap:.8rem;align-items:baseline;text-decoration:none;padding:.35rem 0;border-bottom:1px dotted rgba(30,37,32,.25);font-size:.95rem;color:var(--ink);transition:padding-left .25s}
.toc a:hover{padding-left:.4rem;color:var(--earth-text)}
.toc a .d{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3-text)}
.toc a .t{font-weight:500}
.toc a .n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3-text)}
.pageR .stamp{position:absolute;right:1.6rem;top:1.4rem;width:74px;height:74px;border:2px solid var(--earth);border-radius:50%;display:grid;place-items:center;font-family:var(--hand);font-size:.72rem;color:var(--earth-text);transform:rotate(9deg);opacity:.8;text-align:center;line-height:1.1}
.pageR .date{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-text)}
.pageR .weather{font-family:var(--hand);color:var(--earth-text);font-size:1.05rem;margin:.3rem 0 1rem}
.pageR h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:var(--dls);text-transform:var(--dcase);line-height:1.05;margin:0 0 .8rem;max-width:18ch}
.pageR .dek{color:var(--ink-2);font-size:1.02rem;max-width:40ch}
.pageR .spot{max-width:150px;margin:1.2rem 0 .4rem}
.pageR .read{display:inline-block;margin-top:1rem}
.cover{position:absolute;inset:0;z-index:5;background:linear-gradient(135deg,#4E7A43,#3E6A3C);border-radius:6px;transform-origin:left center;box-shadow:0 30px 70px rgba(30,37,32,.25);display:grid;place-items:center;color:#EFEAE0;backface-visibility:hidden;animation:opencover 1.6s cubic-bezier(.4,0,.2,1) 1s forwards}
.cover .lbl{background:#F6F2E8;color:var(--ink);padding:1rem 1.4rem;border-radius:2px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.cover .lbl b{font-family:var(--display);font-weight:var(--dw);font-size:1.3rem;display:block;letter-spacing:var(--dls)}
.cover .lbl span{font-family:var(--hand);color:var(--earth-text);font-size:1rem}
@keyframes opencover{to{transform:rotateY(-160deg);opacity:0;pointer-events:none}}

/* entries: torn pages */
.entries{padding:clamp(2rem,6vh,4rem) clamp(18px,4.5vw,56px) clamp(3rem,8vh,5rem)}
.entries .head{max-width:1160px;margin:0 auto 1.6rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
/* journal signs: 1rem type, tighter padding, no hover lift (shared .sign is the portfolio's).
   The visible sign stays 37px tall; ::after widens the tap target to 45px. */
.oaf-journal .sign{position:relative;font-size:1rem;padding:.3em .85em .25em;transition:none;text-decoration:none;display:inline-block}
.oaf-journal .sign::after{content:"";position:absolute;inset:-4px -3px}
.oaf-journal .sign:hover{transform:rotate(var(--r,-1deg))}
.oaf-journal .sign[aria-current="page"]{background:var(--ink);color:var(--paper)}
.grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.torn{position:relative;background:#FBF8F0;padding:1.4rem 1.4rem 1.6rem;text-decoration:none;color:var(--ink);box-shadow:0 10px 26px rgba(30,37,32,.12), 0 1px 0 rgba(30,37,32,.18);display:grid;gap:.5rem;align-content:start;transform:rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.torn::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:#FBF8F0;clip-path:polygon(0 60%,4% 20%,9% 70%,14% 30%,20% 80%,26% 25%,32% 65%,38% 30%,44% 75%,50% 20%,56% 70%,62% 35%,68% 80%,74% 25%,80% 65%,86% 30%,92% 75%,97% 30%,100% 60%,100% 100%,0 100%)}
.torn:hover{transform:rotate(0) translateY(-5px)}
.torn.hide{display:none}
.torn .d{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3-text)}
.torn .w{font-family:var(--hand);color:var(--earth-text);font-size:.98rem}
.torn h3{font-family:var(--display);font-weight:var(--dw);font-size:1.35rem;letter-spacing:var(--dls);text-transform:var(--dcase);line-height:1.1;margin:.2rem 0}
.torn p{color:var(--ink-2);font-size:.93rem}
.torn .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-text);border-top:1px dashed rgba(30,37,32,.3);padding-top:.6rem;margin-top:.3rem;display:flex;justify-content:space-between}
.torn .spot{max-width:90px;position:absolute;right:1rem;top:1.1rem;opacity:.85}
/* category view with one or two pages: same three columns (cards keep their
   width, left aligned), ending on a dashed slot back to the whole notebook */
.torn.more{background:transparent;box-shadow:none;border:1.5px dashed rgba(30,37,32,.35);align-content:center;justify-items:start;min-height:12rem}
.torn.more::before{display:none}
.torn.more h3{max-width:16ch}
.torn.more:hover{border-color:var(--earth)}
.j-none{max-width:1160px;margin:0 auto;font-family:var(--hand);color:var(--earth-text);font-size:1.05rem}

/* paging (more than twelve entries) */
.j-pager{margin-top:clamp(2rem,5vh,3rem)}
.j-pager .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}

/* subscribe */
.sub{max-width:1160px;margin:clamp(3rem,7vh,5rem) auto 0;background:#FBF8F0;padding:1.6rem 1.8rem;border-radius:3px;box-shadow:0 12px 30px rgba(30,37,32,.12);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:center;transform:rotate(-.4deg)}
.sub h3{font-family:var(--display);font-weight:var(--dw);font-size:1.3rem;letter-spacing:var(--dls);text-transform:var(--dcase);margin:0 0 .2rem}
.sub p{color:var(--ink-2);font-size:.95rem;margin:0}
.sub p.oaf-notice{color:var(--earth-text);margin-top:.6rem}

.sub form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.sub .sub-l{flex-basis:100%;font-family:var(--hand);font-weight:300;font-size:1.2rem;line-height:1.2;color:var(--ink-2);padding-left:1em}
.sub input{font:inherit;padding:.7em 1em;border:1px solid rgba(30,37,32,.3);border-radius:999px;background:#fff;min-width:16rem}
.sub button[disabled]{cursor:default;opacity:1}

@media (max-width:900px){.j-hero .wrap,.book,.entries .head,.sub{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.book::before,.book::after{display:none}.pageL{border-bottom:1px solid var(--line)}.torn{transform:none !important}.sub input{min-width:0;width:100%}.sub form{flex-direction:column}.j-pager .wrap{grid-template-columns:1fr}}
@media (max-width:760px){.pageR .weather,.pageR .date{padding-right:5.2rem}}
@media (prefers-reduced-motion: reduce){.cover{display:none}.torn,.toc a,.oaf-journal .sign{transition:none}.torn:hover{transform:rotate(var(--r,0deg))}.toc a:hover{padding-left:0}}