/* the porch at /home: warm lamp light instead of rust. only /home loads this file. */
body[data-page="home"]{
  --porch:#ffd38a;--porch-soft:rgba(255,211,138,.4);--dusk:#1a1410;
  --manila:#dcc394;--manila-edge:#b89a62;--tag-ink:#2b2216;--tag-meta:#5a4a33;--tag-sig:#6a3a1c;--string:#9b7a4c;
  background:var(--dusk)}
body[data-page="home"] .gate{background:radial-gradient(120% 80% at 50% 0%,#241b14,var(--dusk) 70%)}
body[data-page="home"] .gate .big{color:#e2d6bf}
body[data-page="home"] .gate a{color:#e6c88f}
body[data-page="home"] .stage::after{box-shadow:inset 0 0 110px 26px rgba(12,8,5,.7)}

/* things on the porch you can tap: invisible until a pointer or the keyboard comes near, then a soft lamp glow */
.hs{position:absolute;min-width:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  touch-action:manipulation;border-radius:16px;-webkit-tap-highlight-color:transparent}
.hs::after{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,211,138,.42),rgba(255,211,138,.12) 60%,rgba(255,211,138,0));
  mix-blend-mode:screen;opacity:0;transition:opacity .45s ease}
.hs:hover::after,.hs:focus-visible::after,.hs.on::after{opacity:1}
.hs:focus{outline:none}
.hs:focus-visible{outline:2px dashed rgba(255,226,170,.85);outline-offset:3px}

/* the address, laid over the painting, not painted in */
.caption .addr{display:block;margin-top:2px;font-family:var(--stamp);font-size:11.5px;letter-spacing:.05em;color:#ead7ab}
body[data-page="home"] .caption .nav a{color:#d8c49b;border-bottom-color:rgba(216,196,155,.5)}
body[data-page="home"] .caption .nav a:hover{color:var(--porch)}

/* manila tags on a string, signed */
.tag{position:fixed;left:10px;top:10px;z-index:12;width:min(290px,84vw);padding:30px 20px 14px 22px;
  background:var(--manila);color:var(--tag-ink);font-family:var(--stamp);font-size:15px;line-height:1.45;
  border-radius:4px 4px 6px 6px;box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(122,94,52,.35);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)}
.tag.open{animation:tagin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tagin{from{opacity:0;transform:translateY(10px) rotate(-1deg)}to{opacity:1;transform:none}}
.tag::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 100% 110%,rgba(120,80,30,.18),transparent 60%),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 4px)}
.tag:focus{outline:none}
.tag:focus-visible{outline:2px solid rgba(255,226,170,.9);outline-offset:3px}
.tag .hole{right:auto;left:50%;top:9px;width:12px;height:12px;margin-left:-6px;background:var(--dusk);box-shadow:0 0 0 3px var(--manila-edge),inset 0 1px 2px rgba(0,0,0,.8)}
.tag .string{position:absolute;left:50%;top:-2px;width:2px;height:13px;margin-left:-1px;background:var(--string)}
.tmeta{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tag-meta)}
.tmeta span:last-child{white-space:nowrap}
.tline{margin:0}
.tag .sig{display:block;margin-top:12px;font-size:13px;color:var(--tag-sig);opacity:1}
.tag button{font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;padding:12px 0 4px;margin-right:16px;
  color:var(--tag-meta);cursor:pointer;min-height:44px;text-decoration:underline dotted;text-underline-offset:3px}
.tag button:hover{color:var(--tag-ink)}
.tag button:focus-visible{outline:2px dashed var(--tag-ink);outline-offset:2px}

/* the same things, as a list */
.rooms{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:6;font-family:var(--stamp);font-size:12px}
.rooms details{background:rgba(22,16,11,.86);border:1px solid rgba(184,154,98,.45);border-radius:3px;padding:6px 10px}
.rooms summary{cursor:pointer;list-style:none;text-transform:uppercase;letter-spacing:.08em;color:#e6cf9f;min-height:32px;display:flex;align-items:center}
.rooms summary::-webkit-details-marker{display:none}
.rooms ul{list-style:none;margin:6px 0 2px;padding:6px 0 0;border-top:1px dashed rgba(184,154,98,.5);max-height:min(60vh,420px);overflow:auto}
.rooms .rm{display:block;width:100%;text-align:left;font:inherit;color:#e8dcc4;background:none;border:0;padding:6px 2px;min-height:36px;cursor:pointer}
.rooms .rm:hover,.rooms .rm:focus-visible{color:var(--porch)}
.rooms .rm:focus-visible{outline:1px dashed rgba(255,226,170,.8)}
@media (max-width:759px){.rooms{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 70px)}.rooms .rm{min-height:44px}.tag{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.hs::after{transition:none}.tag.open{animation:none}}


/* morning and noon are bright behind the board: give the small words under it a dark backing so they stay readable */
body[data-tod="morning"] .board>.byline,body[data-tod="morning"] .board>.count,body[data-tod="morning"] .board>.snd,body[data-tod="morning"] .board>.snd~span,
body[data-tod="noon"] .board>.byline,body[data-tod="noon"] .board>.count,body[data-tod="noon"] .board>.snd,body[data-tod="noon"] .board>.snd~span{
  width:fit-content;background:rgba(14,11,8,.74);border-radius:2px;padding:1px 6px;box-shadow:0 0 10px 4px rgba(14,11,8,.35)}
body[data-tod="morning"] .board>.byline,body[data-tod="noon"] .board>.byline{color:#c9cfc6}
body[data-tod="morning"] .board>.count,body[data-tod="noon"] .board>.count{color:#aab3aa}
/* generated by tools/build.py: the porch at /home. palette + hotspot boxes */
.hs[data-room="chair"]{left:13.889%;top:37.963%;width:17.535%;height:27.778%}
.hs[data-room="coat"]{left:17.361%;top:50.463%;width:5.903%;height:12.037%}
.hs[data-room="guest"]{left:38.542%;top:43.981%;width:7.899%;height:20.370%}
.hs[data-room="glass"]{left:30.469%;top:47.222%;width:3.993%;height:6.250%}
.hs[data-room="phone"]{left:34.462%;top:48.380%;width:4.080%;height:5.787%}
.hs[data-room="lamp"]{left:18.750%;top:31.250%;width:4.861%;height:6.250%}
.hs[data-room="mailbox"]{left:3.993%;top:60.185%;width:10.243%;height:15.046%}
.hs[data-room="garden"]{left:14.757%;top:81.019%;width:28.646%;height:17.361%}
.hs[data-room="garage"]{left:55.556%;top:38.194%;width:13.021%;height:27.199%}
.hs[data-room="platform"]{left:69.010%;top:42.824%;width:11.892%;height:31.250%}
.hs[data-room="neighbors"]{left:80.903%;top:50.926%;width:10.069%;height:10.648%}