/* One Acre Fields: reusable pieces lifted from the page prototypes.
   Values are verbatim from the prototype named in each comment. Page CSS may
   override per page (for example the case study's field note leans right). */

/* ---- field note: taped card (01 home) ---- */
.fieldnote{position:relative;background:#FBF8F0;padding:2rem 2.2rem;border-radius:3px;box-shadow:0 12px 30px rgba(30,37,32,.12), 0 1px 0 rgba(30,37,32,.15);transform:rotate(-1.2deg)}
.fieldnote::after{content:"";position:absolute;left:14%;top:-10px;width:70px;height:20px;background:rgba(214,178,120,.6);transform:rotate(3deg);border-radius:2px}
.fieldnote .hand{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.5;color:var(--ink)}
.fieldnote .hand em{color:var(--earth-text);font-style:normal}
.fieldnote .sig{font-family:var(--hand);font-size:.9rem;color:var(--ink-2);margin-top:1rem}
/* variant leaning right, tape on the right (04 case) */
.fieldnote.lean-r{padding:1.8rem 2rem;transform:rotate(1deg)}
.fieldnote.lean-r::after{left:auto;right:14%;transform:rotate(-3deg)}
.fieldnote.lean-r .hand{font-size:1.15rem}

/* ---- big numbers (01 home .num, 04 case .yield) ---- */
.num b,.yield b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:.95;letter-spacing:var(--dls);font-variant-numeric:tabular-nums}
.num b i,.yield b i{font-style:normal;color:var(--earth)}
.num span,.yield span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:.6rem}

/* ---- module chips (04 case) ---- */
.mods{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.mods span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(30,37,32,.3);border-radius:999px;padding:.35em .7em;color:var(--ink-2)}

/* ---- the clothesline: print, peg, tag (03 portfolio, 04 case) ---- */
.hang{position:relative;display:grid;justify-items:center;text-decoration:none;color:var(--ink);transform-origin:50% -18px;transform:rotate(var(--rot,0deg));animation:sway 5.6s ease-in-out var(--d,0s) infinite alternate;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hang:hover,.hang:focus-visible{transform:rotate(0) translateY(-10px);animation-play-state:paused;z-index:5}
@keyframes sway{from{transform:rotate(calc(var(--rot,0deg) - 1.2deg))}to{transform:rotate(calc(var(--rot,0deg) + 1.2deg))}}
.peg{position:absolute;top:-26px;left:50%;width:14px;height:34px;margin-left:-7px;background:linear-gradient(90deg,#B08A5A,#D9B98A 40%,#A47F50);border-radius:3px 3px 4px 4px;box-shadow:0 2px 3px rgba(30,37,32,.25);z-index:2}
.peg::after{content:"";position:absolute;left:5px;top:12px;width:4px;height:12px;background:#6B4E2A;border-radius:2px}
.print{position:relative;margin:0;padding:6px;background:#fff;box-shadow:0 10px 24px rgba(30,37,32,.18), 0 1px 0 rgba(30,37,32,.25);width:100%}
.print.browser::before{content:"";display:block;height:14px;background:#EFEAE0;border-bottom:1px solid rgba(30,37,32,.15);background-image:radial-gradient(circle at 8px 7px, #C9C1B0 2.2px, transparent 2.6px),radial-gradient(circle at 18px 7px, #C9C1B0 2.2px, transparent 2.6px),radial-gradient(circle at 28px 7px, #C9C1B0 2.2px, transparent 2.6px)}
.print img{display:block;width:100%;height:auto;max-width:100%}
.print.phone{border-radius:20px;padding:8px}
.print.phone img{border-radius:12px}
/* the hand-written tag on a string, below the print (scoped to .hang so it
   never collides with the .page .tag pill) */
.hang .tag{margin-top:.9rem;display:grid;justify-items:center;text-align:center;background:#FBF8F0;border:1px solid rgba(30,37,32,.3);padding:.5rem .9rem .45rem;border-radius:2px;box-shadow:0 2px 0 rgba(30,37,32,.2);position:relative;max-width:100%}
.hang .tag::before{content:"";position:absolute;top:-10px;left:50%;width:1px;height:10px;background:rgba(30,37,32,.4)}
.hang .tag b{font-family:var(--display);font-weight:var(--dw);font-size:1rem;letter-spacing:var(--dls);text-transform:var(--dcase)}
.hang .tag i{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3-text);margin-top:.15rem}
/* tape strips */
.tape{position:absolute;top:-10px;width:70px;height:22px;background:rgba(214,178,120,.65);z-index:3}
.tape.l{left:8%;transform:rotate(-5deg)}.tape.r{right:8%;transform:rotate(4deg)}

/* ---- filter signs (03 portfolio; journal uses 1rem type) ---- */
.signs{display:flex;gap:.6rem;flex-wrap:wrap}
.sign{font:inherit;font-family:var(--hand);font-size:1.05rem;color:var(--ink);background:#FBF8F0;border:1px solid rgba(30,37,32,.35);padding:.35em .9em .3em;border-radius:2px;cursor:pointer;box-shadow:0 2px 0 rgba(30,37,32,.25);transform:rotate(var(--r,-1deg));transition:transform .2s}
.sign:hover{transform:rotate(0) translateY(-2px)}
.sign[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---- breadcrumbs (04 case) ---- */
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-text)}
.crumbs a{text-decoration:none;padding:.9rem .15rem} /* inline padding: 44px hit area, same layout */
.crumbs a:hover{color:var(--earth-text)}

/* ---- meta row: label over value (04 case) ---- */
.meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-3-text);border-top:1px solid var(--line);padding-top:1rem;margin-top:.6rem}
.meta b{display:block;color:var(--ink);font-weight:500;font-size:.95rem;font-family:var(--sans);margin-top:.15rem}

/* ---- previous / next (04 case; entry uses 1.2rem titles) ---- */
.nextprev .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.np{display:grid;gap:.3rem;text-decoration:none;padding:1.2rem 0;border-top:1px solid rgba(30,37,32,.3)}
.np.r{text-align:right}
.np .k{margin:0}
.np b{font-family:var(--display);font-weight:var(--dw);font-size:1.35rem;letter-spacing:var(--dls);text-transform:var(--dcase)}
.np:hover b{color:var(--earth-text)}

/* ---- the light CTA (02 capabilities, 03 portfolio): layout only, the
   page sets the background ---- */
.cta{padding-bottom:5rem}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.cta .p{margin-top:.8rem}

/* ---- dusk: the campfire section (01 home) ---- */
.dusk{background:linear-gradient(#D9C39C 0%, #6E5A48 22%, #2A2A2A 55%, #1C201D 100%);color:#EFEAE0;padding-bottom:clamp(5rem,12vh,9rem)}
.dusk .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:end;min-height:70vh}
.dusk .k{color:var(--dusk-k)}
.dusk .h2{color:#EFEAE0}
.dusk .h2 em{color:#E89A4A}
.dusk .p{color:var(--dusk-ink-2);margin-top:1rem}
.dusk .ctas{margin-top:1.4rem}
.dusk .btn{border-color:#EFEAE0;color:#EFEAE0;background:transparent}
.dusk .btn.solid{background:#E89A4A;border-color:#E89A4A;color:#1C201D}
.dusk .hand{color:#E89A4A}
.dusk .hand small{color:var(--dusk-k)}
.dusk .fire .hand{margin-top:.6rem}
/* the email line: selectable, mono, on dark */
.mail{font-family:var(--mono);font-size:.95rem;border:1px solid rgba(239,234,224,.3);padding:.9em 1.2em;user-select:all;color:#EFEAE0;display:inline-block;margin-top:.8rem;text-decoration:none}
/* fire, glow, stars */
.fire{position:relative}
.fire .spot .i,.fire .spot .it{stroke:#EFEAE0}
.fire .glow{position:absolute;left:50%;top:60%;width:70%;height:60%;transform:translate(-50%,-50%);background:radial-gradient(closest-side, rgba(232,154,74,.55), rgba(232,154,74,.18) 50%, transparent);filter:blur(12px);animation:flick 2.6s ease-in-out infinite alternate}
@keyframes flick{from{opacity:.75;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-51%,-52%) scale(1.06)}}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#EFEAE0;opacity:.7;animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:.9}}

/* ---- shared motion and the plank base (code C20) ----
   `up` (the rise-in the page prototypes share) and `fogdrift` live here so the
   page files can drop their copies; home.css keeps its own `up` (it animates
   transform, not translate). The plank base (about, talk) is the pegs and the
   year line; each page still sets its own background, shadow and rotation. */
@keyframes up{to{opacity:1;translate:0 0}}
@keyframes fogdrift{from{transform:translate(-4%,1%) scale(1)}to{transform:translate(5%,-3%) scale(1.12)}}
.plank{position:relative}
.plank::before,.plank::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#7A5A30;box-shadow:inset 0 1px 2px rgba(0,0,0,.4);transform:translateY(-50%)}
.plank::before{left:10px}.plank::after{right:10px}
.plank .yr{font-family:var(--hand);color:var(--earth-text);font-size:1.15rem}

/* ---- form notices (inc/forms.php) ---- */
.oaf-notice{font-family:var(--hand);font-size:1.05rem;line-height:1.45;color:var(--forest);margin:.8rem 0 0}
.oaf-notice small{display:block;font-family:var(--hand);font-weight:300;font-size:1.05em;color:var(--ink-2)}
.oaf-notice.is-err{color:var(--earth-text)}
.dusk .oaf-notice{color:#E89A4A}.dusk .oaf-notice small{color:var(--dusk-k)}
.oaf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){.nextprev .wrap,.cta .wrap{grid-template-columns:1fr}}
@media (max-width:860px){.dusk .wrap{grid-template-columns:1fr}}
/* a11y A2: on narrow screens the dusk section is tall, so a %-based gradient
   leaves the kicker and headline on the light tan. px stops keep the text on
   the dark part (the Talk page sets its own gradient in talk.css). */
@media (max-width:760px){.dusk{background:linear-gradient(#D9C39C 0, #6E5A48 24px, #2A2A2A 120px, #1C201D 100%)}}
@media (prefers-reduced-motion: reduce){.hang,.fire .glow,.stars i{animation:none}.hang,.sign{transition:none}}