/* agentmemorysdk.com — THE CASE FILE. Warm paper, editorial serif, a vertical
   dossier: each memory's lifecycle runs down the page as a filed record. */
:root{
  --bg:#f6f2ee; --paper:#fffdf9; --line:#e2d8cc; --line-2:#cfc2b2; --rule:#b9a68f;
  --ink:#2b2320; --ink-2:#5d5148; --ink-3:#94867a;
  --plum:#6d3b62; --plum-ink:#552c4d; --plum-soft:#f2e6ef; --plum-line:#d9bfd4;
  --stamp-ok:#3e6b4f; --stamp-no:#a04343;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Public Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16.5px/1.7 var(--sans);}
a{color:var(--plum-ink); text-decoration:underline; text-decoration-color:var(--plum-line); text-underline-offset:3px;}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* masthead */
.bar{display:flex; align-items:baseline; justify-content:space-between; padding:26px 0 18px; border-bottom:3px double var(--rule);}
.brand{font:600 1.15rem/1 var(--serif); letter-spacing:.01em;}
.brand .by{display:block; font:500 .62rem/1.6 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;}
.bar nav{display:flex; gap:20px; font:500 .8rem/1 var(--sans);}
.bar nav a{text-decoration:none; color:var(--ink-2);}
.bar nav a:hover{color:var(--plum-ink);}
@media(max-width:600px){.bar nav{display:none}}

/* dossier hero */
.hero{padding:52px 0 8px;}
.file-no{font:500 .68rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--plum); margin-bottom:16px;}
h1{font:600 clamp(2rem,5.2vw,3.1rem)/1.13 var(--serif); margin:0; letter-spacing:-.015em; text-wrap:balance;}
h1 em{font-style:italic; color:var(--plum-ink);}
.hero .sub{font-size:1.06rem; color:var(--ink-2); margin:22px 0 0; max-width:56ch;}
.cta{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.btn{display:inline-block; font:600 .88rem/1 var(--sans); padding:.85em 1.5em; border-radius:3px; border:1.5px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink); transition:all .18s ease; text-decoration:none;}
.btn-p{background:var(--ink); color:var(--paper);}
.btn-p:hover{background:var(--plum-ink); border-color:var(--plum-ink);}
.btn-s:hover{border-color:var(--plum-ink); color:var(--plum-ink);}

/* the exhibit: one memory record card */
.exhibit{background:var(--paper); border:1px solid var(--line-2); box-shadow:4px 4px 0 var(--line); padding:22px 24px; margin:44px 0 0; position:relative; max-width:540px;}
.exhibit .tag{position:absolute; top:-11px; left:20px; background:var(--plum); color:#fff; font:600 .62rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:.45em .8em;}
.exhibit dl{margin:6px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:.86rem;}
.exhibit dt{color:var(--ink-3); font:500 .72rem/1.9 var(--sans); text-transform:uppercase; letter-spacing:.08em;}
.exhibit dd{margin:0; color:var(--ink-2); font-family:var(--serif); font-style:italic;}
.exhibit .stamp{position:absolute; right:16px; bottom:14px; font:700 .8rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; border:2.5px solid var(--stamp-ok); color:var(--stamp-ok); padding:.4em .7em; transform:rotate(-7deg); opacity:0; transition:opacity .5s ease .8s, transform .5s ease .8s;}
.exhibit.seen .stamp{opacity:.9; transform:rotate(-4deg);}

/* sections */
section{padding:64px 0 0;}
.sec-k{font:500 .66rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;}
h2{font:600 1.65rem/1.25 var(--serif); margin:0; letter-spacing:-.01em; text-wrap:balance;}
.sec-l{color:var(--ink-2); margin:14px 0 0; max-width:58ch;}

/* vertical docket timeline */
.docket{margin-top:36px; position:relative; padding-left:34px;}
.docket::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line-2);}
.entry{position:relative; padding:0 0 34px;}
.entry:last-child{padding-bottom:0;}
.entry .pip{position:absolute; left:-34px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center; font:600 .62rem/1 var(--sans); color:var(--ink-3); transition:all .4s ease;}
.entry.seen .pip{border-color:var(--plum); background:var(--plum); color:#fff;}
.entry h3{font:600 1.08rem/1.3 var(--serif); margin:0;}
.entry .roman{font:500 .68rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--plum); margin-bottom:5px;}
.entry p{margin:.45em 0 0; color:var(--ink-2); font-size:.92rem; max-width:54ch;}
.entry{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.entry.seen{opacity:1; transform:none;}

/* footnote rule */
.footnote{margin-top:40px; padding-top:14px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:.82rem; max-width:64ch;}
.footnote b{color:var(--stamp-no); font-weight:600;}

footer{margin-top:88px; border-top:3px double var(--rule); padding:24px 0 56px; color:var(--ink-3); font-size:.82rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* modal — a filed form */
dialog.modal{border:1.5px solid var(--ink); border-radius:0; padding:0; max-width:470px; width:calc(100% - 40px); background:var(--paper); color:var(--ink); box-shadow:6px 6px 0 var(--line-2);}
dialog.modal::backdrop{background:rgba(43,35,32,.45);}
.m-h{display:flex; align-items:center; justify-content:space-between; padding:18px 22px 0;}
.m-h h3{font:600 1.2rem/1.2 var(--serif); margin:0;}
.m-x{background:none; border:0; font-size:1.35rem; color:var(--ink-3); cursor:pointer; padding:2px 8px;}
.m-b{padding:12px 22px 22px;}
.m-b .lede{color:var(--ink-2); font-size:.86rem; margin:0 0 14px; font-family:var(--serif); font-style:italic;}
.f-row{margin-bottom:12px;}
.f-row label{display:block; font:600 .68rem/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px;}
.f-row input,.f-row select,.f-row textarea{width:100%; font:400 .92rem/1.5 var(--sans); color:var(--ink); background:var(--bg); border:0; border-bottom:1.5px solid var(--line-2); padding:.5em .2em;}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:0; border-bottom-color:var(--plum);}
.f-hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.m-actions{display:flex; gap:12px; align-items:center; margin-top:16px;}
.m-note{font-size:.72rem; color:var(--ink-3); font-style:italic; font-family:var(--serif);}
.m-ok{display:none; text-align:center; padding:12px 0 6px;}
.m-ok h3{font:600 1.4rem/1 var(--serif); color:var(--stamp-ok); margin:0 0 10px;}
.m-ok .lede{color:var(--ink-2); font-size:.88rem;}
.m-ok .ref{font:400 .72rem/1.6 ui-monospace,monospace; color:var(--ink-3); word-break:break-all; margin-top:10px;}
.m-err{display:none; color:var(--stamp-no); font-size:.85rem; margin-top:12px; border-left:3px solid var(--stamp-no); padding-left:10px;}
.modal.done .m-form{display:none;}
.modal.done .m-ok{display:block;}

@media (prefers-reduced-motion: reduce){
  .entry,.exhibit .stamp{opacity:1 !important; transform:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* buyer blocks */
.parties{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:30px;}
.party{background:var(--paper); border:1px solid var(--line-2); box-shadow:3px 3px 0 var(--line); padding:18px 20px;}
.party .pw{font:600 .64rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--plum);}
.party h3{font:600 1.02rem/1.3 var(--serif); margin:8px 0 0;}
.party p{color:var(--ink-2); font-size:.86rem; margin:.45em 0 0;}
.bene{margin:24px 0 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:6px 0;}
.bene .b{display:flex; gap:14px; padding:12px 0; border-bottom:1px dotted var(--line-2); align-items:baseline;}
.bene .b:last-child{border-bottom:none;}
.bene .b .no{font:500 .68rem/1.9 var(--sans); letter-spacing:.14em; color:var(--plum); white-space:nowrap;}
.bene .b p{margin:0; color:var(--ink-2); font-size:.9rem;}
.bene .b p b{color:var(--ink); font-family:var(--serif);}
.faq{margin-top:22px;}
.faq details{border-bottom:1px solid var(--line-2);}
.faq summary{cursor:pointer; list-style:none; padding:14px 2px; font:600 1rem/1.4 var(--serif);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:" +"; color:var(--plum);}
.faq details[open] summary::after{content:" −";}
.faq .fa{padding:0 2px 16px; color:var(--ink-2); font-size:.9rem; max-width:64ch;}
/* letter mock */
.letter{background:var(--paper); border:1px solid var(--line-2); box-shadow:4px 4px 0 var(--line); padding:24px 26px; margin-top:30px; max-width:560px; position:relative; font-family:var(--serif);}
.letter .lh{font:500 .66rem/1.8 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-2); padding-bottom:8px;}
.letter p{font-size:.92rem; color:var(--ink-2); margin:.8em 0 0;}
.letter .stamp2{position:absolute; right:18px; top:44px; font:700 .72rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; border:2.5px solid var(--stamp-ok); color:var(--stamp-ok); padding:.45em .7em; transform:rotate(5deg); opacity:.9;}