/*
 * The home page (decision 0779): version H of the homepage design, the seed library. Every tool
 * is a seed packet standing on an olive rail. The buttons, `.wall`, `.wrap` and `.display` are
 * the site's (site.css); this file is the page's own. Logical properties only (`pnpm lint:css`);
 * the design's per-packet inline custom properties are classes here (the policy refuses inline styles).
 */
.home{
--ink-soft:#3d5a54;--on-wall-soft:#d3dccf;--paper:#ffffff;
--shadow-packet:0 16px 26px -14px rgb(0 0 0 / .6);--shadow-sheet:0 26px 40px -24px rgb(0 0 0 / .7);
--headline:clamp(2.1rem,1.5rem + 2.8vw,4rem);--title:1.5rem;--body-sm:1rem;--label:1.0625rem;
--section:clamp(64px,3vw + 52px,96px);--rule:2px solid var(--everglade);
--ease-out:cubic-bezier(.23,1,.32,1);--ease-expo:cubic-bezier(.19,1,.22,1);
font-weight:500;font-size:1.125rem;line-height:1.6;letter-spacing:-.01em
}
.home h1,.home h2,.home h3,.home p,.home ol,.home ul,.home dl,.home dd,.home blockquote,.home figure,.home fieldset{margin:0}
.home p,.home li,.home dd{text-wrap:pretty}
.home ::selection{background:var(--olive-green);color:var(--everglade)}
.home .wall :focus-visible{outline-color:var(--olive-green)}
.home .wall .face :focus-visible{outline-color:var(--everglade)}

/* Hero */
.hero{padding-block:clamp(24px,3vw,40px) 32px}
.hero h1{font-size:clamp(2.5rem,1.9rem + 3.2vw,5rem);max-inline-size:18ch}
.hero .lede{margin-block-start:24px;max-inline-size:58ch}
.hero .lede mark{background:none;color:var(--olive-green);font-weight:700}
.home .actions{margin-block-start:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* The rack: packets stand on an olive rail, one rail per row */
.tools{padding-block-end:64px}
.rack{--rack-gap:clamp(16px,2vw,28px);list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--rack-gap);row-gap:74px;align-items:end}
.rack>li{position:relative;min-inline-size:0;scroll-margin-block:24px}
.rack>li::after{content:"";position:absolute;inset-inline:calc(var(--rack-gap) / -2);inset-block-end:-12px;block-size:20px;background:var(--olive-green)}
.rack>li:nth-child(3n+1)::after{inset-inline-start:-8px;border-start-start-radius:3px;border-end-start-radius:3px}
.rack>li:nth-child(3n)::after,.rack>li:last-child::after{inset-inline-end:-8px;border-start-end-radius:3px;border-end-end-radius:3px}
.rack>li>*{position:relative;z-index:1}
@media (max-width:1023px){
  .rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rack>li:nth-child(n)::after{inset-inline:calc(var(--rack-gap) / -2);border-radius:0}
  .rack>li:nth-child(2n+1)::after{inset-inline-start:-8px;border-start-start-radius:3px;border-end-start-radius:3px}
  .rack>li:nth-child(2n)::after,.rack>li:last-child::after{inset-inline-end:-8px;border-start-end-radius:3px;border-end-end-radius:3px}
}
.tilt-0{--tilt:-2deg}.tilt-1{--tilt:1.5deg}.tilt-2{--tilt:-1deg}.tilt-3{--tilt:2deg}.tilt-4{--tilt:-1.5deg}.tilt-5{--tilt:1deg}.packet-end{--tilt:-.4deg}
.panel-grey{--panel:var(--greyish-green)}.panel-olive{--panel:var(--olive-green)}.panel-rock{--panel:var(--white-rock)}.panel-ink{--panel:var(--everglade)}
.flap-grey{--flap:var(--greyish-green)}.flap-olive{--flap:var(--olive-green)}

.packet-lift{perspective:1400px;transform:rotate(var(--tilt,0deg));transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.packet:hover .packet-lift{transform:rotate(0deg) translateY(-6px)}}
.packet:focus-within .packet-lift{transform:rotate(0deg) translateY(-6px)}
.packet-inner{display:grid;transform-style:preserve-3d;transition:transform 700ms var(--ease-expo)}
.packet.is-flipped .packet-inner{transform:rotateY(180deg)}
.face{grid-area:1 / 1;min-inline-size:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);color:var(--everglade);border-radius:6px 6px 3px 3px;box-shadow:var(--shadow-packet);display:flex;flex-direction:column;position:relative}
.js .face-front,.js .face-back{cursor:pointer}
.face::before{content:"";position:absolute;inset:0 0 auto 0;block-size:20px;border-radius:6px 6px 0 0;background:var(--flap,var(--greyish-green));-webkit-mask:radial-gradient(circle at 7px 20px,transparent 4px,#000 4.5px) 0 0 / 14px 100% repeat-x;mask:radial-gradient(circle at 7px 20px,transparent 4px,#000 4.5px) 0 0 / 14px 100% repeat-x}
.face::after{content:"";position:absolute;inset-inline:0;inset-block-start:26px;border-block-start:2px dashed var(--white-rock);pointer-events:none}
.face-back{transform:rotateY(180deg);padding:44px 16px 16px;gap:8px}
.art{margin:34px 10px 0;aspect-ratio:5 / 2;border-radius:4px;background:var(--panel,var(--greyish-green));position:relative;overflow:hidden}
.art svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgb(20 55 49 / .16) 1.1px,transparent 1.4px);background-size:7px 7px}
.face-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;min-inline-size:0}
.packet-name{font-size:var(--title);line-height:1.08;overflow-wrap:anywhere;hyphens:auto}
.packet-name a{text-decoration:none;color:inherit}
@media (hover:hover) and (pointer:fine){.packet-name a:hover{text-decoration:underline}}
.packet-need{font-size:var(--body-sm);font-weight:700;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere}
.packet-proof{font-size:var(--body-sm);font-weight:700;line-height:1.35}
.packet-best{font-size:var(--body-sm);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.packet-summary{font-size:var(--body-sm);line-height:1.45}
.packet-actions{margin-block-start:auto;padding-block-start:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.packet-actions .btn{flex:1;min-inline-size:0;padding-inline:.6em}
.turn{display:inline-grid;place-items:center;flex:none;inline-size:44px;block-size:44px;border-radius:50%;border:2px solid var(--everglade);background:var(--paper);color:var(--everglade);cursor:pointer;touch-action:manipulation;transition:background-color 160ms ease,transform 120ms var(--ease-out)}
.turn[hidden]{display:none}
.turn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.turn:hover{background:var(--ecru-white)}}
.turn .icon{inline-size:20px;block-size:20px}
.back-name{font-size:var(--title);line-height:1.08;overflow-wrap:anywhere}
.face-back p{font-size:var(--body-sm);line-height:1.45}
.face-back .promise{font-weight:700;border-block-start:var(--rule);padding-block-start:8px;margin-block-start:4px}
.face-back .packet-actions{flex-wrap:wrap}
.more{font-weight:700;font-size:var(--body-sm);min-block-size:44px;display:inline-flex;align-items:center;color:var(--everglade)}
.status{align-self:flex-start;background:var(--white-rock);color:var(--everglade);font-weight:700;font-size:var(--body-sm);line-height:1.2;padding:4px 12px;border-radius:var(--radius-pill)}
.face-growing .status{margin-block-end:4px}
.tools-empty{border:2px dashed var(--on-wall-soft);border-radius:6px;padding:32px 24px;max-inline-size:720px}
.tools-empty h3{font-size:var(--title);line-height:1.1}
.tools-empty p{margin-block-start:12px;color:var(--on-wall-soft);max-inline-size:52ch}

/* The end of the rack: "Don't see your need?" as the last packet */
.art-end{background:var(--white-rock);display:grid;place-items:center}
.art-end .plus-art{position:static;inline-size:56px;block-size:56px;color:var(--everglade)}
.end-title{font-size:var(--title);line-height:1.08}
.end-actions{flex-wrap:wrap}
.end-actions .btn{flex:1 1 auto}

/* NeedPicker: "Our team needs help with …" */
.need-picker{border:0;margin:0 0 48px;padding:0;min-inline-size:0}
.need-picker[hidden]{display:none}
.need-picker legend{padding:0;font-size:var(--title);line-height:1.1;color:var(--ecru-white)}
.chips{display:flex;flex-wrap:wrap;gap:8px 12px;margin-block-start:16px}
.chip{min-block-size:44px;padding:.5em 1.1em;border:2px solid var(--on-wall-soft);border-radius:var(--radius-pill);background:transparent;color:var(--ecru-white);font:700 var(--body-sm)/1.2 var(--font-body);letter-spacing:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color 160ms ease,border-color 160ms ease,transform 120ms var(--ease-out)}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--olive-green)}}
.chip[aria-pressed=true]{background:var(--olive-green);border-color:var(--olive-green);color:var(--everglade)}
.pick-result{margin-block-start:12px;min-block-size:1.6em;color:var(--on-wall-soft)}
.packet.is-picked .packet-lift{transform:rotate(0deg) translateY(-12px)}
.packet.is-picked .face{outline:4px solid var(--olive-green);outline-offset:4px}

/* Partner names, under the rack */
.partners{margin-block-start:76px}
.partners-label{font:700 var(--label)/1.4 var(--font-body);letter-spacing:0;color:var(--olive-green)}
.partner-wall{list-style:none;padding:0;margin-block-start:12px;display:flex;flex-wrap:wrap;gap:8px 0}
.partner-wall li{font-family:var(--font-display);font-variation-settings:"opsz" 48;font-weight:500;font-size:clamp(1.125rem,.95rem + .5vw,1.4rem);line-height:1.4;color:var(--on-wall-soft);overflow-wrap:anywhere}
.partner-wall li:not(:last-child)::after{content:"\00b7";margin-inline:.45em;color:var(--olive-green)}

@media (prefers-reduced-motion:reduce){
  .packet:hover .packet-lift,.packet:focus-within .packet-lift,.packet.is-picked .packet-lift{transform:rotate(0deg)}
  .packet.is-flipped .packet-inner{transform:none}
  .packet.is-flipped .face-front{visibility:hidden}
  .packet:not(.is-flipped) .face-back{visibility:hidden}
  .face{backface-visibility:visible;-webkit-backface-visibility:visible}
  .face-back{transform:none}
  .turn:active,.chip:active{transform:none}
}

/* Phones: packets lie flat, the picture beside the name; no rail */
@media (max-width:620px){
  .rack{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .rack>li::after{display:none}
  .packet-lift{transform:rotate(calc(var(--tilt,0deg) / 3))}
  .face-front,.face-growing,.face-end{display:grid;grid-template-columns:38% minmax(0,1fr)}
  .art{margin:34px 0 12px 12px;aspect-ratio:auto;min-block-size:150px}
  .face-body{padding:34px 12px 12px}
  .packet-actions{flex-wrap:wrap}
  .hero h1{line-height:1.08}
  .partners{margin-block-start:48px}
}

/* Sections */
.home-section{padding-block:var(--section)}
.home-section h2{font-size:var(--headline);max-inline-size:20ch}
.home-section .intro{margin-block-start:24px;max-inline-size:58ch;color:var(--ink-soft)}

/* RulesSheet */
.rules-sheet{position:relative;background:var(--paper);border-radius:10px 10px 4px 4px;box-shadow:var(--shadow-sheet);padding:clamp(48px,5vw,72px) clamp(20px,4vw,64px) clamp(28px,4vw,56px);display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.rules-sheet::before{content:"";position:absolute;inset:0 0 auto 0;block-size:24px;border-radius:10px 10px 0 0;background:var(--olive-green);-webkit-mask:radial-gradient(circle at 9px 24px,transparent 5px,#000 5.5px) 0 0 / 18px 100% repeat-x;mask:radial-gradient(circle at 9px 24px,transparent 5px,#000 5.5px) 0 0 / 18px 100% repeat-x}
.funded{margin-block-start:24px;max-inline-size:34ch}
.funded strong{font-weight:700}
.rules dl{border-block-start:var(--rule)}
.rules dl div{display:grid;grid-template-columns:minmax(0,14ch) 1fr;gap:24px;padding-block:24px;border-block-end:var(--rule);align-items:baseline}
.rules dt{font-size:var(--title);line-height:1.1}
@media (max-width:860px){.rules-sheet{grid-template-columns:1fr}.rules dl div{grid-template-columns:1fr;gap:4px}}

/* Partner letters */
.letters-grid{margin-block:48px -48px;columns:2 300px;column-gap:clamp(32px,5vw,80px)}
.letter{break-inside:avoid;border-block-start:2px solid var(--greyish-green);padding-block-start:24px;margin-block-end:48px;min-inline-size:0}
.letter blockquote p+p{margin-block-start:1em}
.letter figcaption{margin-block-start:16px;font-size:var(--body-sm);line-height:1.45;color:var(--on-wall-soft)}
.letter figcaption strong{display:block;font-size:var(--label);color:var(--ecru-white);overflow-wrap:anywhere}
.qmark{inline-size:36px;block-size:36px;color:var(--olive-green);margin-block-end:12px}

/* How a tool is grown: one furrow, the sprout grows at each stage */
.growth{list-style:none;padding:0;margin-block-start:48px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;position:relative}
.growth::before{content:"";position:absolute;inset-inline:0;inset-block-start:120px;border-block-start:2px dashed var(--greyish-green)}
.growth li{display:flex;flex-direction:column;min-inline-size:0}
.stage-1{--s:40px}.stage-2{--s:56px}.stage-3{--s:72px}.stage-4{--s:88px}.stage-5{--s:104px}
.plot{block-size:120px;display:flex;align-items:flex-end}
.sprout{inline-size:var(--s);block-size:var(--s);border-radius:50%;background:var(--everglade);color:var(--olive-green);display:grid;place-items:center;position:relative;z-index:1}
.sprout .icon{inline-size:52%;block-size:52%}
.growth h3{margin-block-start:24px;font-size:var(--title)}
.growth p{margin-block-start:8px;font-size:var(--body-sm);line-height:1.45;max-inline-size:30ch;color:var(--ink-soft)}
@media (max-width:900px){
  .growth{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .growth::before{inset-inline:35px auto;inset-block:0;border-block-start:0;border-inline-start:2px dashed var(--greyish-green)}
  .growth li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:24px}
  .plot{grid-row:span 2;block-size:auto;justify-content:center;align-items:flex-start}
  .sprout{inline-size:calc(var(--s) * .68);block-size:calc(var(--s) * .68)}
  .growth h3{margin-block-start:6px}
  .growth p{grid-column:2}
}