/* One Acre Fields: Talk (and the 404, which loads this file too).
   No prototype: built from 01-home's dusk section, 07-about's plank and fire
   scene, and the notebook .page cards. Shared .dusk/.stars/.fire/.glow/.mail
   come from components.css; only Talk-specific rules live here. */

/* ---- hero: paper at golden hour, running into the dusk below ---- */
/* the colour change is held to the last 2.5rem so the hand line stays on light paper (AA) */
.talk-hero{background:linear-gradient(180deg, #F6F2E8 0%, #E9DDC5 calc(100% - 2.5rem), #D9C39C 100%);padding-bottom:2.5rem}
.talk-hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.talk-hero .hand{margin-top:1rem}
.sunlow{position:absolute;right:9%;bottom:-70px;width:22vw;height:22vw;max-width:280px;max-height:280px;border-radius:50%;background:radial-gradient(closest-side, rgba(255,226,170,.95), rgba(232,154,74,.32) 62%, transparent);filter:blur(10px);pointer-events:none}
.talk-hero .rv{opacity:0;translate:0 14px;animation:up .9s cubic-bezier(.2,.7,.2,1) .15s both}
.talk-hero .rv + .rv{animation-delay:.3s} /* @keyframes up: components.css */

/* ---- dusk: same colours as the home dusk, with the light band held to
   the top 2rem (rem stops, not %) so the kicker, heading and form always sit
   on the dark part at any section height. Kicker at 5rem: #C9C6B8 on
   ~#54483D, 5.2:1 (A8); the hero-to-dusk gap is the sunset itself (D12) ---- */
.talk-dusk{background:linear-gradient(#D9C39C 0, #6E5A48 2rem, #2A2A2A 10rem, #1C201D 100%);padding-top:5rem}
.talk-dusk .k{color:#C9C6B8}
.talk-dusk .wrap{min-height:0;align-items:end}
.talk-dusk .stars i{background:#EFEAE0}

/* the enquiry: ruled notebook lines on dark */
.talk-form{margin-top:2rem;display:grid;gap:1.3rem;max-width:36rem}
.talk-form .line{margin:0;display:grid;gap:.15rem}
.talk-form label{font-family:var(--hand);color:#F0B676;font-size:.92rem;line-height:1.7}
/* one rule per writing line, 2rem apart: the textarea is four lines whose
   last rule is its bottom edge; the inputs are one line on the same rule */
.talk-form{--rule:rgba(239,234,224,.55)}
.talk-form textarea,.talk-form input{display:block;width:100%;font:inherit;font-size:1.02rem;color:#EFEAE0;background:transparent;border:0;border-radius:0;padding:0;line-height:2rem;-webkit-appearance:none;appearance:none}
.talk-form input{height:2.75rem;padding-top:.75rem;border-bottom:1px solid var(--rule)}
.talk-form textarea{height:8rem;resize:none;overflow-y:auto;background-image:repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);background-attachment:local}
.talk-form textarea:focus,.talk-form input:focus{outline:2px solid #E89A4A;outline-offset:4px}
.talk-form input:focus{border-bottom-color:#E89A4A}
.talk-form textarea[aria-invalid="true"]{--rule:#E89A4A}
.talk-form input[aria-invalid="true"]{border-bottom:2px solid #E89A4A}
.talk-form input:-webkit-autofill{-webkit-text-fill-color:#EFEAE0;box-shadow:0 0 0 100px #262626 inset;caret-color:#EFEAE0}
.talk-form .hint{margin:-.5rem 0 0;font-family:var(--hand);font-weight:300;font-size:1.1rem;line-height:1.2;color:#B9B6AA}
.talk-form .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem}
.talk-form .send{margin:.5rem 0 0}
.talk-form .oaf-notice{margin:0}
.talk-form .oaf-notice:focus-visible{outline:1px dashed rgba(232,154,74,.6);outline-offset:6px}
.talk-sent{margin-top:2rem;max-width:36rem}
.talk-sent .oaf-notice{font-size:1.3rem}
.talk-sent .again{display:inline-block;margin-top:.6rem;padding:1rem 0 .7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#B9B6AA;text-decoration:none;border-bottom:1px solid rgba(239,234,224,.35);padding-bottom:.2em}
.talk-sent .again:hover{color:#E89A4A;border-color:#E89A4A}

/* the fire and the plank beside it */
.talk-side{display:grid;align-content:end}
.talk-side .fire{width:min(100%,380px);justify-self:center;margin-bottom:-1.4rem}
.plank{position:relative;z-index:1;background:rgba(239,230,210,.96);color:var(--ink);padding:1.6rem 1.7rem 1.8rem;border-radius:3px;box-shadow:0 14px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(30,37,32,.2);transform:rotate(var(--r,.8deg))}
/* .plank::before/::after (the nails) and .plank .yr: components.css */
.plank h3{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:var(--dls);text-transform:var(--dcase);line-height:1.06;margin:.3rem 0 .7rem}
.plank p{color:var(--ink-2);font-size:.98rem}
.plank .ctas{margin-top:1.2rem}
.plank .mail{color:var(--ink);border-color:rgba(30,37,32,.3);font-size:.88rem;margin-top:1rem;max-width:100%;overflow-wrap:anywhere}
.plank .mail:hover{border-color:var(--earth-text);color:var(--earth-text)}
.plank .where{margin-top:1rem;border-top:1px dashed rgba(30,37,32,.35);padding-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-text)}
.talk-dusk .plank .hand{color:var(--earth-text);margin-top:.7rem}
.talk-dusk .plank .hand small{color:var(--ink-2)}

/* ---- questions founders ask: notebook pages by lamp light ---- */
/* the night ends: a dawn band from the dusk's last colour, through the
   ember and the gold, into lamp-lit paper */
.talk-faq{background:linear-gradient(180deg, #1C201D 0, #2E2723 2.5rem, #5A4536 5.5rem, #A9774F 8.5rem, #D9B98C 11rem, #EBDFC6 13.5rem, #EFE6D2 15rem, #E6D6B8 100%);padding-top:calc(clamp(3.5rem,9vh,6.5rem) + 12rem)}
.talk-faq .head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;margin-bottom:2.4rem}
.talk-faq .h2{max-width:20ch}
.talk-faq .pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem)}
/* tilted like the home work cards (the .rv rise animates translate, so the
   transform tilt survives it) */
.talk-faq .page:nth-child(1){transform:rotate(-1deg)}
.talk-faq .page:nth-child(2){transform:rotate(.6deg) translateY(10px)}
.talk-faq .page:nth-child(3){transform:rotate(-.5deg)}
.talk-faq .page:nth-child(4){transform:rotate(.9deg) translateY(4px)}
.talk-faq .page p{font-size:.92rem;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:.6rem}
.talk-faq .page .yield{margin-top:.1rem}

/* ---- 404: off the path ---- */
.lost .sunw{position:absolute;right:14%;top:8%;width:22vw;height:22vw;max-width:260px;max-height:260px;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}
.lost{background:linear-gradient(180deg, #F6F2E8 0%, #F1EADA 50%, #EDE3CC 100%);min-height:max(72vh, calc(100vh - 10.8rem));display:grid;align-content:center}
.lost .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.lost .p{margin-top:1rem}
.lost .ctas{margin-top:1.6rem}
.lost .gate{justify-self:center;width:min(100%,420px)}
.lost .obj .i{stroke-width:1.8}
.lost .obj .it{stroke-width:1.1}
.lost .obj text{font-family:var(--hand)}
.lost .gate .hand{margin-top:.6rem;font-size:1.05rem}

@media (max-width:1100px){.talk-faq .pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.talk-hero .wrap,.lost .wrap{grid-template-columns:1fr}.talk-faq .head{grid-template-columns:1fr}.lost .gate{justify-self:start;width:min(100%,320px)}}
@media (max-width:860px){.talk-side .fire{width:min(80%,300px)}.talk-dusk .wrap{gap:3rem}}
@media (max-width:760px){.talk-faq .pages{grid-template-columns:1fr}.talk-faq .page:nth-child(n){transform:none}}
@media (max-width:560px){.talk-form .pair{grid-template-columns:1fr;gap:1.3rem}.plank{padding:1.5rem 1.4rem 1.6rem}}

@media (prefers-reduced-motion: reduce){
  .talk-hero .rv{animation:none;opacity:1;translate:0 0}
  .talk-sent .again,.plank .mail{transition:none}
}