/* Astro Farm web: module wall (tone 2). Tokens from the game's design identity. */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-Bold.woff2) format("woff2")}
@font-face{font-family:"B612 Mono";font-weight:700;font-display:swap;src:url(fonts/B612Mono-Bold.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-weight:400 700;font-display:swap;src:url(fonts/Caveat.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Spectral-Italic.woff2) format("woff2")}

:root{
  --glass:#0b0e15; --wall:#2a3140; --wall-hi:#3a4354; --wall-lo:#1b2029; --box:#343c4c;
  --st-d:#4a5466; --rivet:#6b778a; --st-m:#9aa7b8; --st-hi:#adb8c6;
  --onw:#ece6d6; --onw2:#adb8c6; --paper:#ece6d6; --note:#e7d38c;
  --ink:#1b2029; --ink2:#3a4354; --line:#0b0e15; --amber:#e9b04a; --shadow:rgba(6,9,16,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background-color:var(--wall);color:var(--onw);
  font:600 18px/1.45 "Barlow Condensed",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  /* wall sheets: vertical seams every 25vw-ish with a lit edge, flat hard lines only */
  background-image:
    linear-gradient(90deg,transparent calc(100% - 3px),var(--wall-lo) calc(100% - 3px),var(--wall-lo) calc(100% - 1px),var(--wall-hi) calc(100% - 1px));
  background-size:max(320px,25vw) 100%;
}
a{color:inherit}
img,svg{display:block}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--paper);color:var(--ink);padding:6px 10px;z-index:9}

/* rivets along the seams */
.rivets{position:fixed;inset:0;pointer-events:none;z-index:0}

main{position:relative;z-index:1;flex:1;width:100%;max-width:1360px;margin:0 auto;padding:clamp(40px,7vh,88px) clamp(16px,5vw,72px) 48px}

.caps{font:700 13px/1.5 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--onw2);margin:0}
.caps b{color:var(--onw);font-weight:700}

.wordmark{font:700 clamp(68px,13vw,184px)/.86 "Barlow Condensed",sans-serif;letter-spacing:.012em;color:var(--paper);margin:18px 0 0;
  text-shadow:4px 5px 0 var(--shadow)}
.ruler{width:min(600px,100%);height:auto;margin:22px 0 -8px;cursor:col-resize;touch-action:pan-y;overflow:visible}
.ruler:focus-visible{outline-offset:2px}
.slogan{font:italic 400 clamp(20px,2.3vw,28px)/1.3 "Spectral",Georgia,serif;color:var(--paper);margin:0}

/* paper slips (fallback flat fill when hand.js is absent) */
[data-hand]{position:relative;isolation:isolate}
[data-hand=paper]:not(.dressed){background:var(--paper);box-shadow:4px 5px 0 var(--shadow)}
[data-hand=plate]:not(.dressed){background:var(--box);box-shadow:3px 5px 0 var(--shadow)}

.hand-note{font:700 21px/1.1 "Caveat",cursive;color:var(--note)}

/* floor strip */
footer{position:relative;z-index:1;background:var(--wall-lo);border-top:2px solid var(--line);box-shadow:inset 0 2px 0 var(--wall-hi)}
footer .in{max-width:1360px;margin:0 auto;padding:18px clamp(16px,5vw,72px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--onw);text-decoration:none;border-bottom:1px solid var(--st-d)}
footer a:hover,footer a:focus-visible{border-bottom-color:var(--amber)}
.key{display:inline-block;min-width:24px;padding:2px 6px 1px;margin-right:6px;font:700 11px/18px "B612 Mono",monospace;color:var(--ink);text-align:center;
  background:#e6dfcf;border:1.6px solid var(--ink);border-radius:3px;box-shadow:1.6px 2.4px 0 var(--shadow);transform:rotate(-2deg)}

:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .lift{transition:transform .18s cubic-bezier(.3,.7,.3,1)}
}

/* taped paper strip = the one call to action (amber highlighter behind the word) */
.strip{flex:none;white-space:nowrap;display:flex;align-items:center;gap:18px;padding:16px 26px 14px 22px;color:var(--ink);text-decoration:none;transform:rotate(-1.4deg)}
.strip .word{position:relative;font:700 clamp(30px,3.2vw,40px)/1 "Barlow Condensed",sans-serif;padding:2px 10px 0}
.strip .word svg{position:absolute;inset:-2px -4px -4px -6px;width:calc(100% + 10px);height:calc(100% + 6px);z-index:-1}
.strip .sub{font:700 13px/1.25 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border-left:1.4px solid var(--ink2);padding-left:14px}
.strip .arrow{font:700 26px/1 "B612 Mono",monospace}
.strip:hover{transform:rotate(-1.4deg) translate(-2px,-3px)}
.strip:active{transform:rotate(-1.4deg) translate(1px,1px)}
@media (max-width:520px){
  .strip{gap:12px;padding:14px 18px 12px 14px}
  .strip .sub{display:none}
}

/* status pages (404, maintenance, server fault): one drawn object over a short message */
.status{max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.status .copy{display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:860px){.status{grid-template-columns:1fr}.status .art{order:-1;justify-self:center}}
.home-mark{display:inline-block;font:700 26px/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;text-decoration:none;color:var(--paper);text-shadow:2px 3px 0 var(--shadow);margin-bottom:clamp(28px,6vh,64px)}
.status .art{width:100%;max-width:560px;height:auto;overflow:visible}
.status .retry{margin:0 0 26px}
.status h1{font:700 clamp(44px,7vw,76px)/.95 "Barlow Condensed",sans-serif;color:var(--paper);margin:10px 0 14px;text-shadow:3px 4px 0 var(--shadow)}
.status .lede{font:600 20px/1.45 "Barlow Condensed",sans-serif;color:var(--onw2);max-width:520px;margin:0 0 30px}
.status .hand-note{margin:22px 0 0;transform:rotate(-2deg)}

/* motion (only with no reduced-motion preference): every motion shows a state */
@media (prefers-reduced-motion:no-preference){
  .swing{animation:swing 3.2s ease-in-out infinite}
  @keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
  .beacon{animation:beacon 1.1s steps(1) infinite}
  @keyframes beacon{50%{fill:#8a6a2c}}
  .led{animation:beacon-red .7s steps(1) infinite}
  @keyframes beacon-red{50%{fill:#5a2630}}
  .needle{animation:tremble .18s linear infinite alternate}
  @keyframes tremble{from{transform:rotate(-1.5deg)}to{transform:rotate(2deg)}}
  .drip{animation:drip 1.8s ease-in infinite;animation-delay:calc(var(--i) * .6s);opacity:0}
  @keyframes drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(46px);opacity:0}}
  .paw{opacity:0;animation:paw .3s ease-out forwards;animation-delay:calc(.5s + var(--i) * .16s)}
  @keyframes paw{to{opacity:1}}
  .stamp{transform-box:fill-box;transform-origin:center;animation:stamp .35s cubic-bezier(.3,1.6,.5,1) 2.3s both}
  @keyframes stamp{from{opacity:0;transform:scale(1.7)}}
}

/* retry drum counter (maintenance, server fault) */
.drum{display:inline-flex;align-items:center;gap:3px;padding:6px 8px;background:#2a3140;border:2px solid #0b0e15;border-radius:3px;box-shadow:2px 3px 0 var(--shadow);margin-top:8px}
.drum b{display:inline-block;width:22px;height:30px;font:700 17px/30px "B612 Mono",monospace;text-align:center;color:var(--paper);background:#141922;border:1.4px solid #0b0e15;border-radius:2px}
.drum i{font:700 16px/1 "B612 Mono",monospace;color:var(--onw2);font-style:normal;padding:0 2px}
.retry{display:flex;flex-direction:column;align-items:flex-start;gap:4px}

/* Nebula on the sill: asleep by default; hover twitches an ear, a click makes her smile */
.nebula{cursor:pointer}
.nebula .open,.nebula .heart{opacity:0}
.nebula.awake .open{opacity:1}
.nebula.awake .shut,.nebula.awake .zz{opacity:0;animation:none}
.nebula .head{transform-box:fill-box;transform-origin:70% 95%}
.nebula.awake .head{transform:translateY(-3px) rotate(-6deg)}
.nebula.awake .heart{opacity:1}
.nebula .tail{transform-box:fill-box;transform-origin:100% 0}
.grew{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .nebula .head{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
  .nebula.twitch .ear{transform-box:fill-box;transform-origin:50% 100%;animation:twitch .45s ease-in-out 2}
  .nebula.twitch .tail{animation:tailflick .9s ease-in-out}
  @keyframes twitch{50%{transform:rotate(-22deg) scaleY(.8)}}
  @keyframes tailflick{40%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}}
  .nebula.awake .heart{animation:heart 2.4s ease-out both}
  @keyframes heart{0%{opacity:0;transform:translate(0,8px) scale(.5)}20%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(6px,-22px) scale(1.1)}}
  .zz{animation:zz 3.4s ease-in-out infinite}
  @keyframes zz{0%{opacity:.2;transform:translate(0,4px)}50%{opacity:1}100%{opacity:.2;transform:translate(-4px,-6px)}}
  .grew{animation:grew 4s ease 1s both}
  @keyframes grew{10%,80%{opacity:1}100%{opacity:0}}
  .plant{transform-box:fill-box;transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){.grew{opacity:1}}