/* Store On Mars - legal pages.
   The wall is the SAME board photo the front page uses (board-2775.webp,
   bottom center/cover). Each page shows ONE object, exactly as photographed -
   a long clipboard (terms) or a closed kraft envelope with a stack of papers
   resting on it (privacy). No slicing, no tiling, no hooks: the image is placed
   whole and the copy is set inside its measured paper area. The painted tray at
   the foot of the board carries the same three props as the front page. */
:root{--paper:#f2e9d7;--yellow:#ffd400;--stamp:#921a22}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#bcafa6 url("assets/board-2775.webp") bottom center/cover no-repeat scroll;
  position:relative;overflow-x:hidden;
  font-family:'Archivo',system-ui,sans-serif;line-height:1.34;color:#241d15;
  -webkit-font-smoothing:antialiased;
}
.bar{position:relative;z-index:6;background:#000;padding:12px 5vw;display:flex;
     align-items:center;gap:10px;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.bar img{height:46px;width:auto;display:block}

/* ---------- the object ---------- */
.stage{position:relative;z-index:2;padding:76px 12px 56px;display:flex;justify-content:center}
.doc{position:relative;width:min(770px,62vw);filter:drop-shadow(0 18px 26px rgba(30,15,5,.5)) drop-shadow(0 4px 8px rgba(30,15,5,.35))}
.doc > img{width:100%;display:block}
/* the writable area, measured off each photograph */
.doc-body{position:absolute;overflow:hidden}
.doc.clip .doc-body{left:9.0%;right:9.0%;top:23.0%;bottom:11.0%}
.doc.env{width:min(770px,62vw)}
.doc.env  .doc-body{left:14.5%;right:13.0%;top:23.0%;bottom:24.3%}

.doc.clip h1{max-width:72%}
/* terms: the stamp is pinned to the OBJECT, not the text box, so it can sit
   higher on the paper without being cut off by the box's overflow:hidden */
.stamp.free{position:absolute;right:8%;top:20.2%;width:21%;max-width:150px;
  transform:rotate(-9deg);opacity:.9;pointer-events:none;mix-blend-mode:multiply;z-index:2}

/* privacy: single-line title, and a roomier header than the clipboard page */
.doc.env h1{font-size:1.52em;max-width:76%}
.doc.env .head{margin-bottom:13px}
.doc.env .upd{margin-top:7px}
.doc.env .stamp{top:5px;width:23%}
.doc.env .lede{margin-bottom:6px}

/* ---------- type on the paper ---------- */
.head{position:relative;margin-bottom:9px}
h1{font-family:'Archivo Black',sans-serif;line-height:1.03;letter-spacing:.01em;
   font-size:1.72em;color:#1b1510;max-width:64%}
.upd{margin-top:5px;font-size:.62em;letter-spacing:.09em;text-transform:uppercase;color:#8a7a60}
.stamp{position:absolute;right:0;top:2px;width:26%;max-width:150px;
       transform:rotate(-9deg);opacity:.9;pointer-events:none;mix-blend-mode:multiply}
h2{font-family:'Archivo Black',sans-serif;font-size:.72em;letter-spacing:.1em;
   text-transform:uppercase;color:#8f1a20;margin:7px 0 2px;
   padding-bottom:2px;border-bottom:1px solid rgba(60,40,20,.16)}
p,li{font-size:.86em;color:#33291d}
p{margin-bottom:4px}
ul{margin:0 0 5px 17px}
li{margin-bottom:2px}
strong{color:#17120c;font-weight:700}
a{color:#8f1a20}
.lede{font-size:.92em;color:#2b2117}
.note{margin:9px 0;padding:7px 11px;border-left:3px solid var(--stamp);
      background:rgba(146,26,34,.055);font-size:.82em;color:#4a3a28}
.foot{margin-top:.9em;padding-top:.75em;border-top:.12em dashed rgba(80,55,25,.42);
      display:flex;flex-direction:column;align-items:center;gap:.7em;text-align:center}
.foot .acts{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center;align-items:center}
.sig{font-size:.82em;font-weight:700;letter-spacing:.04em;color:#6b5a3f}
.btn{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:.66em;
  letter-spacing:.12em;text-decoration:none;color:#8f1a20;
  padding:.55em .95em;margin:0;
  border:.16em solid #8f1a20;border-radius:.25em;
  background:transparent;opacity:.86;mix-blend-mode:multiply;
  transform:rotate(-1.4deg);transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{opacity:1;transform:rotate(-1.4deg) translateY(-2px)}
.btn:active{transform:rotate(-1.4deg) translateY(1px)}
.btn.wa{color:#1d6b33;border-color:#1d6b33;transform:rotate(1.1deg)}
.btn.wa:hover{transform:rotate(1.1deg) translateY(-2px)}
.btn.wa:active{transform:rotate(1.1deg) translateY(1px)}

/* ---------- tray footer: the same three props as the front page ---------- */
.tray-foot{position:absolute;left:0;right:0;height:0;z-index:3;pointer-events:none}
.tray-foot a{position:absolute;bottom:0;display:block;pointer-events:auto;
             transition:transform .2s cubic-bezier(.2,.9,.3,1)}
.tray-foot a:hover{transform:translateY(-7px)}
.tray-foot .prop{width:100%;display:block;filter:drop-shadow(0 12px 16px rgba(60,36,8,.5))}

.tray-foot .tag{position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;
  font-family:'Archivo Black',sans-serif;font-size:.58rem;letter-spacing:.13em;color:#fff;
  background:rgba(15,12,8,.75);padding:4px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .2s}
.tray-foot a:hover .tag{opacity:1}
.pagepad{height:420px}
/* ---------- SMART RESIZING ----------
   The design never changes: it is always the photographed object with the copy
   set on its paper. On a narrower screen the whole composition simply scales
   down - the object takes more of the width, and _legal.js scales the type to
   whatever still fits the paper, so the document is always complete. */
@media (max-width:1240px){
  .doc,.doc.env{width:88vw}
  .stage{padding:44px 10px 40px}
}
@media (max-width:760px){
  .doc,.doc.env{width:94vw}
  .stage{padding:26px 8px 30px}
  h1,.doc.env h1,.doc.clip h1{max-width:74%}
  .pagepad{height:150px}
}

/* phone numbers and other bold runs must never break mid-number */
.doc-body strong{white-space:nowrap}