@import url("./fonts.css");
@import url("./navigation.css");

* { box-sizing: border-box; }
html { min-height: 100%; background: #edc38d; }
body {
  --ink: #593c2b;
  --paper: #f9e8bb;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: "GNF", monospace;
  isolation: isolate;
}
#desert, #desert-wildlife, #desert-foreground { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; pointer-events: none; }
#desert { z-index: 0; }
#desert-wildlife { z-index: 1; }
#desert-foreground { z-index: 2; }
/* Positioned against the canvas coordinates by desert.js. A real link keeps
   the mailbox keyboard accessible and opens the user's email application. */
.mailbox { position: fixed; left: var(--mailbox-left); top: var(--mailbox-top); width: var(--mailbox-width); height: var(--mailbox-height); z-index: 3; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mailbox svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mailbox-door { transform-origin: 32px 35px; transition: transform 280ms steps(5, end); }
.mailbox-flag { transform-origin: 22px 28px; transition: transform 240ms steps(4, end); }
.mailbox:is(:hover, :focus) .mailbox-flag { transform: rotate(-90deg); }
.mailbox:is(:hover, :focus) .mailbox-door { transform: rotate(88deg); transition-delay: 80ms; }
.desert-header, .outpost, .desert-footer { position: relative; z-index: 3; }
.desert-header { min-height: 115px; padding: clamp(19px, 3.1vh, 37px) clamp(19px, 3.4vw, 53px); }
.exit { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-shadow: 2px 2px #f9e8bb; }
.desert-header h1 { position: absolute; top: clamp(19px, 3.1vh, 37px); left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(27px, 3vw, 43px); line-height: 1; font-weight: 700; white-space: nowrap; text-shadow: 2px 2px #f9e8bb; }
.outpost { width: min(860px, calc(100% - 80px)); flex: 1; margin: 0 auto; padding: 70px 0 120px; display: grid; grid-template-columns: 270px minmax(0, 440px); gap: 100px; align-content: center; align-items: center; }

/* Three real links on a single wooden post. Text can be edited in the HTML. */
.signpost { position: relative; display: grid; gap: 18px; padding: 15px 0 35px; isolation: isolate; }
.signpost::before { content: ""; position: absolute; z-index: -1; top: -20px; bottom: -93px; width: 23px; left: 46%; background: repeating-linear-gradient(0deg, transparent 0 27px, #805236 28px 30px), linear-gradient(90deg, #8f5c38 0 5px, #bd8850 5px 15px, #744b32 15px); box-shadow: 4px 0 #69462e; }
.signpost::after { content: ""; position: absolute; z-index: -2; bottom: -102px; left: 32%; width: 108px; height: 13px; background: #bd8c55; clip-path: polygon(12% 0, 83% 0, 100% 45%, 86% 100%, 0 100%, 0 45%); }
.sign { position: relative; display: flex; align-items: center; gap: 18px; min-height: 73px; padding: 12px 29px 12px 20px; color: #ffedbd; text-decoration: none; font-size: 26px; background: #865436; border-top: 4px solid #d3a16c; border-bottom: 5px solid #603e2d; box-shadow: -4px 0 #a16d43, 4px 0 #603e2d, 4px 5px 0 #b17f4f; transition: translate 130ms ease, background 130ms ease; }
.sign::before, .sign::after { content: ""; position: absolute; width: 4px; height: 4px; background: #533b2d; box-shadow: 1px 1px #d2a46c; }
.sign::before { top: 7px; left: 9px; }
.sign::after { right: 17px; bottom: 7px; }
.sign svg { width: 25px; height: 25px; fill: currentColor; flex-shrink: 0; shape-rendering: crispEdges; }
.sign-arrow { margin-left: auto; font-family: monospace; font-size: 26px; }
.sign-instagram { transform: rotate(-3deg); }
.sign-email { transform: rotate(2deg); background: #97623c; }
.sign-phone { transform: rotate(-2deg); }
.sign:hover { translate: 5px 0; background: #a46d43; }
a:focus-visible, summary:focus-visible { outline: 3px dashed #3f5541; outline-offset: 8px; }
.sign:focus-visible { outline-color: #fff4d2; }

/* A postcard pinned to a small noticeboard, with its own desert postage stamp. */
.postcard-stand { position: relative; isolation: isolate; }
.postcard-stand::before, .postcard-stand::after { content: ""; position: absolute; z-index: -1; top: 40px; bottom: -105px; width: 16px; background: linear-gradient(90deg, #94613b 0 4px, #bd8b55 4px 11px, #7b5134 11px); }
.postcard-stand::before { left: 31px; }
.postcard-stand::after { right: 31px; }
.postcard { position: relative; padding: 28px 34px 32px; background: var(--paper); border: 8px solid #ab7648; box-shadow: 0 -4px #d7a36b, -4px 0 #d7a36b, 4px 0 #714b32, 0 5px #714b32, 7px 10px 0 rgb(115 74 43 / 22%); transform: rotate(1.5deg); }
.paper-pin { position: absolute; top: 10px; width: 6px; height: 6px; background: #8b5c3e; box-shadow: 2px 2px #d2b484; }
.pin-left { left: 10px; }
.pin-right { right: 10px; }
.postcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 59px; }
.placeholder-eyebrow { padding-top: 6px; font-size: 14px; color: #7d5b3e; }
.postage-stamp { width: 40px; height: 48px; flex-shrink: 0; shape-rendering: crispEdges; transform: rotate(7deg); }
.postcard h2 { margin: 8px 0 7px; font-size: clamp(26px, 3vw, 35px); font-weight: 400; overflow-wrap: anywhere; }
.contact-role { margin: 0 0 22px; font-size: 14px; color: #7d5b3e; }
.postcard address { font: 400 16px/1.6 "GNF", monospace; overflow-wrap: anywhere; }
.address-lines { display: grid; padding-top: 16px; border-top: 2px dashed #d3b785; }
.direct-links { display: grid; gap: 2px; margin-top: 16px; }
.postcard a, .legal-content a { color: inherit; text-decoration-color: #b58c5e; text-underline-offset: 4px; }
.postcard a:hover, .legal-content a:hover { color: #925332; }

.desert-footer { width: min(640px, calc(100% - 48px)); align-self: center; margin: 0 auto; padding: 0 0 22px; }
.legal-note { background: #f3d9a5; border: 2px solid #b78452; box-shadow: 3px 4px 0 rgb(128 81 43 / 18%); }
.legal-note summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 47px; padding: 10px 18px; font-size: 17px; cursor: pointer; list-style: none; }
.legal-note summary::-webkit-details-marker { display: none; }
.legal-note summary:hover { background: #f9e5b9; }
.legal-toggle { font: 22px/1 monospace; transition: transform 150ms; }
.legal-note[open] .legal-toggle { transform: rotate(45deg); }
.legal-content { padding: 8px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 2px dashed #d0ac76; font: 500 13px/1.8 "Inter", sans-serif; overflow-wrap: anywhere; }
.legal-content h2 { font: 400 18px/1.4 "GNF", monospace; margin: 14px 0 8px; }
.legal-content p { margin: 0 0 12px; }
.copyright { margin: 16px 0 0; text-align: center; font-size: 12px; text-shadow: 1px 1px #f5d9a1; }

@media (max-width: 900px) {
  .mailbox { position: relative; left: auto; top: auto; width: 100px; height: auto; aspect-ratio: 56 / 66; flex-shrink: 0; align-self: flex-end; margin: -64px 30px 22px; }
  .outpost { width: min(730px, calc(100% - 64px)); gap: 48px; grid-template-columns: 235px minmax(0, 1fr); }
  .sign { font-size: 23px; gap: 13px; }
  .postcard { padding: 25px 25px 28px; }
}
@media (max-width: 650px) {
  .desert-header { min-height: 99px; }
  .desert-header h1 { left: auto; right: 22px; transform: none; font-size: 27px; }
  .outpost { width: min(390px, calc(100% - 48px)); grid-template-columns: minmax(0, 1fr); gap: 42px; padding: 18px 0 90px; }
  .signpost { grid-row: 2; gap: 15px; width: 235px; justify-self: center; padding-bottom: 10px; }
  .signpost::before { top: -18px; bottom: -42px; }
  .signpost::after { bottom: -50px; }
  .sign { min-height: 59px; font-size: 23px; }
  .postcard { transform: rotate(1deg); padding: 24px 26px 26px; }
  .postcard-stand::before, .postcard-stand::after { bottom: -18px; }
  .postcard-top { min-height: 52px; }
  .postcard h2 { font-size: 30px; }
  .legal-content { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }