/* =====================================================================
memories.css — styles for rendered memories.
Additive only. Each page already defines its own .weave; these rules
add what the renderer needs on top, so a memory looks native to
whichever page it lands on (cream or forest green).
===================================================================== */
/* ---- pull-quote woven into a page ---- */
.weave q{
quotes:none;display:block;font-style:italic;
font-size:15.5px;line-height:1.55;color:var(--ink-soft);
}
.weave cite{
display:block;font-family:var(--mono);font-style:normal;font-size:11px;
letter-spacing:.05em;color:var(--moss-soft);margin-top:10px;line-height:1.7;
}
.weave cite a{color:var(--madder);font-style:normal;text-decoration:none;border-bottom:1px solid rgba(168,68,46,.4)}
.weave cite a:hover{color:var(--madder-deep,#8A3423)}
.weave + .weave{margin-top:16px}
/* The way through to the full memory, where the language buttons live.
Deliberately quiet: it is a footnote on a page about his life, not a
call to action. */
.weave-more{
display:inline-block;margin-top:7px;font-family:var(--mono);font-size:11px;
letter-spacing:.05em;color:var(--madder,#A8442E);text-decoration:none;
border-bottom:1px solid rgba(168,68,46,.35);
}
.weave-more:hover{color:var(--madder-deep,#8A3423);border-bottom-color:var(--madder-deep,#8A3423)}
/* ---- the collected list ---- */
.memories{margin-top:10px;border-top:1px solid var(--rule)}
.memory{padding:30px 0;border-bottom:1px solid var(--rule);scroll-margin-top:24px}
.memory .head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.memory .who{font-family:var(--display);font-weight:600;font-size:1.16rem;color:var(--ink)}
.memory .who.anon{font-style:italic;font-weight:500;color:var(--moss-soft)}
.memory .rel{font-size:14.5px;color:var(--moss-soft);font-style:italic}
.memory .route{
margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold);padding:3px 9px;
}
.memory .text{max-width:38em;color:var(--ink-soft)}
.memory .text p{margin:0 0 .9em}
.memory .text p:last-child{margin-bottom:0}
.memory figure{margin:18px 0 0;max-width:340px}
.memory figure img{
display:block;width:100%;border:5px solid #FCF8EE;
box-shadow:0 10px 26px -16px rgba(90,60,30,.5);background:#EDE4CF;
}
.memory figcaption{font-family:var(--mono);font-size:11px;color:var(--moss-soft);margin-top:8px;letter-spacing:.04em}
.memory:target{background:linear-gradient(90deg,rgba(181,132,46,.10),transparent 60%)}
/* ---- language switcher on a memory ---- */
[data-lang]{display:none}
[data-lang].on{display:block}
.langs{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
}
.langs .sep{color:var(--rule)}
.langs button{
background:none;border:0;padding:0;cursor:pointer;font:inherit;
color:var(--madder);border-bottom:1px solid rgba(168,68,46,.45);line-height:1.7;
}
.langs button:hover{color:var(--madder-deep,#8A3423);border-bottom-color:var(--madder-deep,#8A3423)}
.langs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:transparent;cursor:default}
.langs button em{font-style:normal;color:var(--moss-soft);font-size:10.5px}
.langs button:focus-visible{outline:2px solid var(--madder);outline-offset:3px}
.tflag{
font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--moss-soft);margin:9px 0 0;
}
/* on the forest-green pages the woven quote sits on a dark ground */
.lineage .weave q,section.alt .weave q{color:var(--ink-soft)}
@media(max-width:640px){
.memory .route{margin-left:0}
}
/* =====================================================================
Added for WordPress: the submission form, and the small differences
between a memory rendered from JSON and one rendered from a post.
Everything above this line is the static site's file, unchanged, so a
memory looks the same in both builds.
===================================================================== */
/* the rendered memory's text blocks (WP uses .mtext where the static
build used .text — the static one had one language per page, this one
holds all of them and shows one) */
.memory .mtext{max-width:38em;color:var(--ink-soft)}
.memory .mtext p{margin:0 0 .9em}
.memory .mtext p:last-child{margin-bottom:0}
.memory .mtext{display:none}
.memory .mtext.on{display:block}
.memory .tlabel{
font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--moss-soft);margin:0 0 8px;
}
.memory .mphoto{margin:18px 0 0;max-width:340px}
.memory .mphoto img{
display:block;width:100%;height:auto;border:5px solid #FCF8EE;
box-shadow:0 10px 26px -16px rgba(90,60,30,.5);background:#EDE4CF;
}
.langs button.on{color:var(--ink);border-bottom-color:transparent;cursor:default}
/* ---------------------------------------------------------- the form */
.rm-form{max-width:38em}
.rm-field{margin:0 0 22px}
.rm-field label,.rm-perm legend,.rm-rel legend{
display:block;font-family:var(--display,Georgia,serif);font-weight:600;
font-size:1.02rem;color:var(--ink);margin-bottom:7px;
}
.rm-field input[type=text],.rm-field input[type=email],
.rm-field select,.rm-field textarea{
width:100%;font-family:var(--serif,Georgia,serif);font-size:16.5px;color:var(--ink);
background:var(--card,#FBF7EC);border:1px solid var(--rule,#DFD4BB);
border-left:3px solid var(--frame,#CDB27B);padding:11px 13px;
}
.rm-field textarea{line-height:1.6;resize:vertical;min-height:210px}
.rm-field input:focus,.rm-field select:focus,.rm-field textarea:focus{
outline:none;border-left-color:var(--madder,#A8442E);
box-shadow:0 0 0 3px rgba(168,68,46,.10);
}
.rm-field input[type=file]{font-family:var(--mono,monospace);font-size:13px}
.rm-help{font-size:14px;color:var(--moss-soft,#5D6E5F);font-style:italic;margin:7px 0 0;line-height:1.5}
/* A