/* One Acre Fields: Capabilities (prototype 02-capabilities).
   Page-specific rules only; values verbatim from the prototype. The shared
   .cta layout lives in components.css; this page gives it no background, so
   the body gradient shows through, as in the prototype. */

body.oaf-capabilities{background:linear-gradient(180deg, #F6F2E8 0%, #EAF0E4 40%, #E9E2CC 100%)}

/* hero + the midday sun wash */
.cap-hero{padding-bottom:0}
.cap-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.cap-hero .hand{margin-top:1rem}
/* the inline link in the CTA line: a taller hit area without moving the text */
.oaf-capabilities .cta .p a{padding:.7em 0;color:var(--earth-text)}
.sunw{position:absolute;right:6%;top:-4%;width:18vw;height:18vw;max-width:220px;max-height:220px;border-radius:50%;background:radial-gradient(closest-side, rgba(255,246,220,.95), rgba(255,230,170,.3) 60%, transparent);filter:blur(10px);pointer-events:none}

/* the shelf */
/* The instructions slide out of the bottom of the packet, and the pack grows to hold them
   (capabilities.js measures the card into --card), so the row and the shelf board move down
   with it: nothing is covered, nothing is clipped, at any width. The gap above the packets
   is the closed-state breathing room (D28). */
.shelf{position:relative;z-index:2;padding:clamp(5rem,10vh,7rem) clamp(18px,4.5vw,56px) clamp(3rem,7vh,5rem)}
.packets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3.5vw,3rem);max-width:1160px;margin:0 auto;align-items:start}
.pack{position:relative;--ph:520px;--tuck:14px;height:var(--ph);transition:height .9s cubic-bezier(.22,1,.36,1)}
.pack.open{height:calc(var(--ph) + var(--card,0px) - var(--tuck))}
/* the open pack sits above its neighbours while it moves */
.pack.open{z-index:3}

/* the instruction card behind each packet. Its height follows its content. Closed it sits
   fully behind the packet (visibility:hidden, so a tall card never peeks out); open it slides
   down its packet's height less --tuck, so its top stays tucked under the packet. */
.insert{position:absolute;left:6%;right:6%;top:0;overflow:hidden;visibility:hidden;background:#FBF8F0;border-radius:0 0 3px 3px;box-shadow:0 10px 26px rgba(30,37,32,.12);padding:1.6rem 1.3rem 1.2rem;display:grid;gap:.55rem;align-content:start;transform:translateY(6%);transition:transform 1s cubic-bezier(.22,1.2,.36,1),visibility 0s linear 1s;z-index:0;background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(30,37,32,.08) 27px 28px)}
.insert::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(rgba(30,37,32,.14),transparent)}
.pack.open .insert{visibility:visible;transform:translateY(calc(var(--ph) - var(--tuck)));transition:transform 1s cubic-bezier(.22,1.2,.36,1),visibility 0s}
.insert .k{margin:0 0 .2rem}
.insert h4{font-family:var(--display);font-weight:var(--dw);font-size:1.2rem;letter-spacing:var(--dls);text-transform:var(--dcase);margin:0 0 .4rem}
.insert .rows{display:grid;gap:.4rem;font-size:.84rem;color:var(--ink-2);line-height:1.4}
.insert .rows div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.5rem}
.insert .rows b{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3-text);padding-top:.2rem;font-weight:500}
.insert .hand{font-size:.98rem;margin-top:.2rem}

/* the packet: a card with a transparent full-size button on top */
.packet{position:absolute;top:0;left:0;right:0;height:var(--ph);z-index:1;background:#F5EFE0;border-radius:4px 4px 6px 6px;box-shadow:0 18px 40px rgba(30,37,32,.18), 0 1px 0 rgba(30,37,32,.25), inset 0 0 0 1px rgba(30,37,32,.06);padding:1.4rem 1.4rem 1.5rem;display:grid;grid-template-rows:auto auto 1fr auto;gap:.5rem;cursor:pointer;text-align:left;color:inherit;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.packet-btn{position:absolute;inset:-1rem 0 0;z-index:3;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:4px;-webkit-tap-highlight-color:transparent}
.packet-btn:focus-visible{outline:2px solid var(--earth);outline-offset:4px}
.pack.open .packet-btn{top:0}
.packet::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:repeating-linear-gradient(90deg, rgba(30,37,32,.14) 0 9px, transparent 9px 18px);opacity:.55;border-radius:4px 4px 0 0}
.packet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:repeating-linear-gradient(90deg, rgba(30,37,32,.1) 0 6px, transparent 6px 12px);opacity:.4}
.pack:hover .packet{transform:translateY(-4px)}
.pack.open .packet{transform:translateY(-6px)}
.packet .brand-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.2rem .8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3-text);margin-top:.9rem}
.packet h3{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:var(--dls);text-transform:var(--dcase);line-height:.98}
.packet h3 small{display:block;font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-top:.35rem}
.packet .art{align-self:center;justify-self:center;width:78%}
.packet .art .i{stroke-width:1.9}
.packet .label{display:grid;grid-template-columns:1fr;gap:.35rem;align-items:end;border-top:1px solid rgba(30,37,32,.25);padding-top:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-text)}
.packet .label b{display:block;color:var(--ink);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:none;font-family:var(--sans);line-height:1.35}
.packet .label .hand{font-size:.95rem;text-align:left;text-transform:none;letter-spacing:normal}
.packet .stamp{position:absolute;right:1.2rem;top:3.7rem;width:66px;height:66px;border:2px solid var(--earth);border-radius:50%;display:grid;place-items:center;font-family:var(--hand);font-size:.78rem;color:var(--earth-text);transform:rotate(12deg);line-height:1;text-align:center}
.packet .pull{position:absolute;left:50%;top:-.9rem;transform:translateX(-50%);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3-text);background:#FBF8F0;border:1px solid rgba(30,37,32,.25);border-radius:999px;padding:.3em .7em;transition:opacity .3s;white-space:nowrap}
.pack.open .packet .pull{opacity:0}

/* the shelf board and the 30-day strip */
.shelfline{max-width:1160px;margin:1.6rem auto 0;border-top:3px solid rgba(30,37,32,.35);position:relative}
.shelfline::after{content:"";position:absolute;left:0;right:0;top:3px;height:14px;background:linear-gradient(rgba(30,37,32,.12),transparent)}
.strip{max-width:1160px;margin:2.4rem auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;font-size:.95rem;color:var(--ink-2)}
.strip .k{margin:0;white-space:nowrap;font-weight:400}
.strip .weeks{display:flex;gap:.6rem;flex-wrap:wrap}
.strip .weeks span{font-family:var(--hand);color:var(--earth-text);font-size:1rem}
.strip .weeks i{font-style:normal;color:var(--ink-3-text);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;margin-right:.3rem}

/* Below 1100px three columns make each instruction card too narrow (and too
   tall to rise into view), so the packets stack, centred at packet width. */
@media (max-width:1100px){.packets{grid-template-columns:minmax(0,1fr);gap:4rem;max-width:440px}.pack{min-width:0}.packet{min-width:0;overflow:hidden}.shelf{padding-top:6rem}}
@media (max-width:900px){.cap-hero .wrap{grid-template-columns:1fr}.shelf{padding-top:5rem}.pack{--ph:500px}.strip{grid-template-columns:1fr}.strip .k{white-space:normal}}

/* entrance: packets slide onto the shelf, the board draws, the hero rises */
.pack{opacity:0;translate:44vw 0;rotate:3deg;animation:shelfin 1.1s cubic-bezier(.22,1.2,.36,1) calc(.5s + var(--i,0)*.16s) both}
@keyframes shelfin{to{opacity:1;translate:0 0;rotate:0deg}}
.shelfline{transform:scaleX(0);transform-origin:left;animation:line .9s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes line{to{transform:scaleX(1)}}
.cap-hero .rv{opacity:0;translate:0 14px;animation:up .9s cubic-bezier(.2,.7,.2,1) .15s both} /* @keyframes up: components.css */

@media (prefers-reduced-motion: reduce){
  .pack,.shelfline,.cap-hero .rv{animation:none;opacity:1;translate:0 0;rotate:0deg;transform:none}
  .insert,.packet,.packet .pull,.pack{transition:none}
  .pack:hover .packet{transform:none}
}