/* Paradigm 13 landing page, sketch v01. Sits on top of reader.css (same paper, ink and fonts). */
.hero{margin:0;border-bottom:2px solid var(--ink);line-height:0}
.hero img{display:block;width:100%;max-width:1280px;margin:0 auto;aspect-ratio:16/9;object-fit:cover;
  image-rendering:pixelated;image-rendering:crisp-edges}
.landing{max-width:40em}
.title{font-family:"Silkscreen",monospace;font-weight:400;font-size:64px;line-height:64px;margin:48px 0 16px}
.tag{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;margin:0 0 40px;text-transform:uppercase}
.dream p{margin:0 0 1em}
.dream .sig{font-style:italic}
.placeholder{font-family:"Silkscreen",monospace;font-size:8px;line-height:16px;text-transform:uppercase;opacity:1;
  border:1px solid var(--ink);padding:0 4px;display:inline-block;margin-bottom:8px}

section{margin-top:72px}
h2{font-family:"Silkscreen",monospace;font-weight:400;font-size:24px;line-height:32px;margin:0 0 4px;
  display:flex;align-items:center;gap:12px}
h2 .sub{font-size:16px}
/* each section's dither signifier: an 8x8 one-bit pattern, repeated (FFF docs/DITHER-LANGUAGE.md) */
.sig8{display:inline-block;width:24px;height:24px;background:var(--ink);flex:0 0 auto;
  -webkit-mask:var(--pat) 0 0/8px 8px;mask:var(--pat) 0 0/8px 8px;image-rendering:pixelated}
.pat-lines{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h8v2H0zM0 4h8v2H0z'/%3E%3C/svg%3E")}
.pat-checker{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h4v4H0zM4 4h4v4H4z'/%3E%3C/svg%3E")}
.pat-dots{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h2v2H1zM5 5h2v2H5z'/%3E%3C/svg%3E")}
.pat-diag{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 6h2v2H6z'/%3E%3C/svg%3E")}
.lede{margin:8px 0 16px}

.list{list-style:none;margin:16px 0 0;padding:0;border-top:2px solid var(--ink)}
.list a,.list .row{display:flex;gap:16px;align-items:baseline;padding:12px 4px;border-bottom:2px solid var(--ink);text-decoration:none}
.list a:hover{background:var(--ink);color:var(--paper)}
.list a:hover .tagbox{border-color:var(--paper)}
.list .what{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;flex:0 0 18.5em;white-space:nowrap;text-transform:uppercase}
.list .nm{flex:1}
.tagbox{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;border:2px solid var(--ink);padding:0 6px;white-space:nowrap}
.tagbox.locked{background:var(--ink);color:var(--paper)}
.list a:hover .tagbox.locked{background:var(--paper);color:var(--ink)}
.soon{opacity:1}
.soon .nm::after{content:" (not on the site yet)";font-style:italic}

.diary{list-style:none;margin:16px 0 0;padding:0}
.diary li{display:flex;gap:16px;padding:8px 0;border-bottom:1px dashed var(--ink)}
.diary .when{font-family:"Silkscreen",monospace;font-size:16px;line-height:32px;min-width:8em;white-space:nowrap}
.more{display:inline-block;margin-top:16px;font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;
  border:2px solid var(--ink);padding:8px 12px;text-decoration:none}
.more:hover{background:var(--ink);color:var(--paper)}

footer.family{margin:96px auto 0;max-width:40em;padding:24px;border-top:2px solid var(--ink);
  font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;display:flex;flex-wrap:wrap;gap:8px 24px}
footer.family a{text-decoration:none;padding:0 4px}
footer.family a:hover{background:var(--ink);color:var(--paper)}

@media (max-width:600px){
  .title{font-size:40px;line-height:48px}
  .list .what{min-width:0;display:none}
  .diary li{flex-direction:column;gap:0}
  footer.family{padding:20px}
}

/* v12 footer (Tom, 29 Oct: "it just looks a mess"): a label and one even row per site, like the lists above */
footer.family{display:block;margin:96px auto 0;max-width:40em;padding:0 24px 48px;border-top:0}
footer.family .flabel{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;text-transform:uppercase;margin:0 0 12px}
footer.family ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
footer.family li a{display:flex;flex-direction:column;gap:2px;padding:12px 4px;border-bottom:2px solid var(--ink);text-decoration:none}
footer.family li a:hover{background:var(--ink);color:var(--paper)}
footer.family .dom{font-family:var(--book);font-size:.8em;font-style:italic;text-transform:none}
@media (max-width:600px){ footer.family{padding:0 20px 40px} footer.family ul{grid-template-columns:1fr} }
/* v15 (Tom, 29 Oct: "no need to repeat the words twice"): each row is just the address, in Silkscreen */
footer.family li a{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;text-transform:uppercase;white-space:nowrap}
footer.family{max-width:800px}  /* lines up with the lists above */
@media (max-width:360px){ footer.family{padding:0 10px 40px} footer.family li a{padding:12px 2px} }  /* the longest address fits a small phone */
/* v17 sign-up box (Tom, 29 Oct: "sign up is the most important thing") */
.signup{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.signup input[type=email]{font:inherit;font-size:20px;height:48px;padding:0 12px;flex:1;min-width:12em;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0}
.signup input[type=email]:focus{outline:2px solid var(--ink);outline-offset:2px}
.signup button{height:48px;font-family:"Silkscreen",monospace;font-size:16px;padding:0 16px}
.signup .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.said{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;margin:16px 0 0;
  background:var(--ink);color:var(--paper);display:inline-block;padding:4px 8px}
.signup[hidden],.said[hidden]{display:none}
/* v18: SEARCH link in the bar, drawn like the PAPER button */
.bar a.tool{font:inherit;color:var(--ink);border:2px solid var(--ink);padding:0 8px;height:32px;line-height:28px;text-decoration:none;display:inline-block}
.bar a.tool:hover{background:var(--ink);color:var(--paper)}
@media (max-width:600px){ .bar a.tool{padding:0 6px} }
@media (max-width:340px){ .bar{padding:8px 8px} .bar .tools{gap:4px} }  /* SEARCH + PAPER fit one line on the smallest phones */
/* v19: the For agents link, quiet, under the footer (like tomrobinson.tv) */
.agents{max-width:800px;margin:0 auto;padding:0 24px 48px;font-family:"Silkscreen",monospace;font-size:16px;line-height:24px}
.agents a{text-decoration:none;padding:0 4px}
.agents a:hover{background:var(--ink);color:var(--paper)}
@media (max-width:600px){ .agents{padding:0 20px 40px} }
footer.family ul{grid-template-columns:1fr}  /* v20: three addresses, one column everywhere */
/* v22 (Tom, 29 Oct: "it needs to be nice and branded, in a little box in the right font"): For agents is a framed row */
.agents{max-width:800px;margin:0 auto;padding:0 24px 64px}
.agents .agentbox{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);padding:12px 12px;text-decoration:none}
.agentbox .lab{font-family:"Silkscreen",monospace;font-size:16px;line-height:24px;white-space:nowrap}
.agentbox .nm{flex:1;font-size:.85em;line-height:1.4}
.agents .agentbox:hover{background:var(--ink);color:var(--paper)}
.agentbox:hover .sig8{background:var(--paper)}
.agentbox:hover .tagbox{border-color:var(--paper)}
@media (max-width:600px){ .agents{padding:0 20px 48px} .agentbox{flex-wrap:wrap} .agentbox .nm{flex-basis:100%;order:3} .agentbox .tagbox{margin-left:auto} }
.agents .agentbox .nm{font-family:var(--book);text-transform:none;font-size:18px;line-height:1.4;letter-spacing:0}