/* arrol.uk — the shopfront.
   The page is a map sheet: printed, not lit. Contour brown is the only colour,
   and it is there because it is true (we do use OS terrain data), not because
   it is decorative. */

:root{
  --paper:#F5F6F2;
  --ink:#15271A;
  --ink-soft:#5A6A5C;
  --hair:#D7DCD3;
  --contour:#B4703C;         /* OS contour brown — TERRAIN ONLY */
  --contour-faint:#E3CDB8;
  --leaf:#608448;            /* sampled from the mark; the brand accent */
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,'Segoe UI',sans-serif;
  min-height:100vh;display:flex;flex-direction:column;
  position:relative;overflow-x:hidden;
}

/* Printed graticule */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:56px 56px;opacity:.45;
}

header{
  position:relative;z-index:2;display:flex;align-items:center;
  padding:26px 40px;border-bottom:1px solid var(--hair);
}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lockup img{height:30px;width:auto;display:block}
.lockup .wordmark{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:13.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
}
nav{margin-left:auto;display:flex;align-items:center;gap:26px}
nav a{font-size:12.5px;color:var(--ink-soft);text-decoration:none;transition:color .18s}
nav a:hover,nav a[aria-current]{color:var(--ink)}
nav a:focus-visible,.signin:focus-visible,a:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.signin{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);border-radius:2px;
  padding:9px 16px;color:var(--ink);text-decoration:none;transition:background .18s,color .18s;
}
.signin:hover{background:var(--ink);color:var(--paper)}

main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
     justify-content:center;padding:60px 40px}

.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.22em;
         text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
h1{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:clamp(32px,5.4vw,46px);
   line-height:1.16;max-width:15ch;letter-spacing:-0.01em}
h1 em{font-style:normal;color:var(--leaf)}
.sub{margin-top:20px;font-size:14.5px;color:var(--ink-soft);max-width:44ch;line-height:1.65}

/* Contours — the signature. Drawn once, then still. */
.terrain{position:absolute;right:-60px;bottom:-40px;width:min(620px,80vw);height:460px;
         z-index:1;pointer-events:none}
.terrain path{fill:none;stroke:var(--contour-faint);stroke-width:1}
.terrain path.major{stroke:var(--contour);stroke-width:1.1;opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .terrain path{stroke-dasharray:1400;stroke-dashoffset:1400;
                animation:draw 2.6s cubic-bezier(.2,.7,.2,1) forwards}
  .terrain path:nth-child(2){animation-delay:.10s}
  .terrain path:nth-child(3){animation-delay:.20s}
  .terrain path:nth-child(4){animation-delay:.30s}
  .terrain path:nth-child(5){animation-delay:.40s}
  .terrain path:nth-child(6){animation-delay:.50s}
  .terrain path:nth-child(7){animation-delay:.60s}
}
@keyframes draw{to{stroke-dashoffset:0}}

/* Map-sheet margin */
footer{position:relative;z-index:2;border-top:1px solid var(--hair);
  padding:14px 40px;display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;color:var(--ink-soft);
  letter-spacing:.06em;background:var(--paper)}
footer .grid{text-transform:uppercase}
.scalebar{display:flex;flex-direction:column;gap:3px}
.scalebar .bar{display:flex;height:5px;width:110px;border:1px solid var(--ink-soft)}
.scalebar .bar i{flex:1}
.scalebar .bar i:nth-child(odd){background:var(--ink-soft)}
.scalebar .lab{display:flex;justify-content:space-between;width:110px;font-size:8px}
footer .right{margin-left:auto;text-align:right;line-height:1.7}
footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--hair)}
footer a:hover{color:var(--ink)}
.sister{display:inline-flex;align-items:center;gap:4px}
.sister svg{opacity:.55}

/* Enquiries */
.enq{max-width:52ch}
.enq h2{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:clamp(26px,4vw,34px);line-height:1.2}
.enq p{margin-top:16px;font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.mail{display:inline-block;margin-top:26px;font-family:'IBM Plex Mono',ui-monospace,monospace;
      font-size:15px;color:var(--ink);text-decoration:none;
      border-bottom:1.5px solid var(--leaf);padding-bottom:3px}
/* Lone worker notice */
.doc{max-width:64ch;margin:0 auto;padding:10px 0 40px}
.doc h2{font-family:'Source Serif 4',Georgia,serif;font-weight:300;font-size:clamp(24px,4vw,30px);margin-bottom:6px}
.doc .lede{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:26px}
.doc h3{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.18em;
        text-transform:uppercase;color:var(--ink-soft);margin:24px 0 8px}
.doc p,.doc li{font-size:13.5px;line-height:1.75;color:var(--ink)}
.doc ul{padding-left:18px;margin-top:6px}
.doc li{margin-bottom:5px}
.doc a{color:var(--ink);border-bottom:1.5px solid var(--leaf);text-decoration:none}
.doc .msg{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;background:#EDEFE9;
          border-left:2px solid var(--leaf);padding:10px 12px;margin:8px 0;
          color:var(--ink);line-height:1.6;word-break:break-word}
.doc .fine{color:var(--ink-soft);font-size:12.5px;margin-top:12px}

@media (max-width:640px){
  header,main,footer{padding-left:22px;padding-right:22px}
  .terrain{opacity:.5}
  footer .right{margin-left:0;text-align:left;width:100%}
}