/* Seafog: Squarespace websites and SEO, New Zealand.

   Built the way a small business site was built around 2003: system fonts
   only (Trebuchet MS for headings, Verdana for text, Tahoma for menus), a
   fixed-width page centred on a patterned background, a masthead with a
   logo and tagline, a toolbar, a sidebar of boxes with gradient header
   bars, and content in bordered panels. Steel blue, with orange for the
   buttons that matter. The Y2K pixel version is in the session scratchpad
   (y2k-snapshot/); the version before that is in ../v1-backup-pre-y2k/. */

:root{
  --blue:#336699;
  --blue-d:#1f4e79;
  --blue-l:#dce8f4;
  --blue-ll:#f0f5fa;
  --line:#9fb7cf;
  --orange:#ff8c1a;
  --orange-d:#d96a00;
  --text:#222222;
  --text2:#444444;
  --text3:#666666;
  --link:#003399;
  --visited:#663399;
  --head:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  --sans:Verdana,Tahoma,Geneva,sans-serif;
  --menu:Tahoma,Verdana,Geneva,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background-color:#c7d5e3;
  /* the tiled background: the name, faint and diagonal */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Ctext x='10' y='80' transform='rotate(-24 110 60)' font-family='Trebuchet MS,Tahoma,sans-serif' font-size='26' font-weight='bold' fill='%23ffffff' fill-opacity='.35'%3Eseafog.nz%3C/text%3E%3C/svg%3E")}
body{margin:0;padding:0 0 24px;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--text)}
p{margin:0 0 12px}
img{display:block;max-width:100%}
a{color:var(--link)}
a:visited{color:var(--visited)}
a:hover{color:var(--orange-d)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#page{width:980px;max-width:100%;margin:0 auto;background:#fff;border:1px solid #6b8fb3;border-top:0}

/* ---------------- masthead ---------------- */
.mast{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;
  padding:18px 20px 16px;border-top:8px solid var(--blue);background:#fff}
.logo{display:flex;flex-direction:column;text-decoration:none}
.logo:visited{color:inherit}
.logo-name{font-family:var(--head);font-weight:bold;font-size:36px;line-height:1;color:var(--blue-d);letter-spacing:-1px}
.logo-name span{color:var(--orange)}
.logo-tag{margin-top:6px;font-family:var(--head);font-size:13px;color:var(--text3)}
.topnav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.topnav li + li{border-left:1px solid #c5d3e0}
.topnav a{display:block;padding:4px 14px;font-family:var(--menu);font-size:13px;font-weight:bold;
  color:var(--blue-d);text-decoration:none}
.topnav a:visited{color:var(--blue-d)}
.topnav a:hover{color:var(--orange-d);text-decoration:underline}
.topnav a[aria-current="page"]{color:var(--orange-d)}

.toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:6px 20px;
  background:linear-gradient(#5a8cbf,#336699);border-top:1px solid #2b5a87;border-bottom:3px solid var(--orange);
  font-family:var(--menu);font-size:12px;color:#fff}

/* ---------------- columns: sidebar and content ---------------- */
.cols{display:grid;grid-template-columns:216px minmax(0,1fr)}
.side{padding:14px 0 14px 14px}
main{padding:16px 22px 28px;min-width:0}
@media(max-width:800px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .side{order:2;padding:0 14px 14px}
  main{padding:16px 14px 20px}
}

/* sidebar boxes: a gradient header bar over a pale panel */
.box{margin:0 0 14px;border:1px solid var(--line);background:var(--blue-ll)}
.box-h{margin:0;padding:5px 10px;background:linear-gradient(#6a9ad0,#336699);border-bottom:1px solid #234f7d;
  font-family:var(--head);font-weight:bold;font-size:14px;color:#fff}
.box-links{margin:0;padding:0;list-style:none}
.box-links li + li{border-top:1px solid #fff}
.box-links a{display:block;padding:6px 10px;background:var(--blue-l);font-family:var(--menu);font-size:13px;
  color:var(--blue-d);text-decoration:none}
.box-links a::before{content:"\00bb\00a0";color:var(--orange-d);font-weight:bold}
.box-links a:visited{color:var(--blue-d)}
.box-links a:hover{background:#c8daee;text-decoration:underline;color:var(--blue-d)}
.box-me img{width:100%;height:auto;background:#fff;border-bottom:1px solid var(--line)}
.box-me p{margin:0;padding:8px 10px 10px;font-size:12px;line-height:1.5}
@media(max-width:800px){.box-me img{max-width:240px;margin:0 auto}}
.box-quote p{margin:0;padding:10px 10px 0;font-size:12px;line-height:1.5}
.box-quote p:last-child{padding-bottom:12px}

/* ---------------- type ---------------- */
h1,h2,h3{font-family:var(--head);font-weight:bold;color:var(--blue-d)}
h1{margin:0 0 10px;font-size:26px;line-height:1.2;color:var(--blue)}
h2{margin:22px 0 8px;font-size:20px;line-height:1.25}
h3{margin:16px 0 6px;font-size:15px;line-height:1.35;color:var(--text)}
h4{margin:0}
.lede{font-size:15px;line-height:1.6;color:var(--text)}
.body{color:var(--text2)}
.body b,.lede b{color:var(--text)}

/* ---------------- page header (inner pages) ---------------- */
.crumb{display:block;margin:0 0 14px;padding:3px 8px;border:1px solid var(--line);
  font-family:var(--menu);font-size:12px;color:var(--text3)}
.top{padding:0 0 4px;border-bottom:1px dotted var(--line);margin-bottom:6px}

/* sections run one after another inside the content column */
section{padding:4px 0 8px}
section > .in > h2:first-child{margin-top:18px}
section > .in[style*="grid"]{margin-top:12px}

/* ---------------- cards as boxes ---------------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.card{border:1px solid var(--line);background:#fff}
.card h3{margin:0;padding:5px 10px;background:linear-gradient(#f3f8fd,var(--blue-l));border-bottom:1px solid var(--line);
  font-size:14px;color:var(--blue-d)}
.card p{margin:0;padding:8px 10px 0;font-size:13px;color:var(--text2)}
.card p:last-child{padding-bottom:10px}
.card .price{font-weight:bold;color:var(--orange-d)}
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------- price rows as a striped table ---------------- */
.rows{margin:14px 0;border:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:8px 10px;background:#fff}
.row:nth-child(even){background:var(--blue-ll)}
.row + .row{border-top:1px solid #d6e2ee}
.row .n{font-weight:bold;color:var(--blue-d)}
.row .amt{font-weight:bold;color:var(--orange-d);white-space:nowrap}
.row p{grid-column:1/-1;grid-row:2;margin:2px 0 0;font-size:13px;color:var(--text2)}

ul.ticks{margin:10px 0 14px;padding:0;list-style:none}
ul.ticks li{position:relative;padding-left:22px;color:var(--text2)}
ul.ticks li + li{margin-top:4px}
ul.ticks li::before{content:"\2714";position:absolute;left:2px;top:0;color:#2e8b57;font-weight:bold}

/* ---------------- buttons: orange for the one that matters, grey for the rest ---------------- */
.act{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0}
.btn,.ghost{display:inline-block;padding:7px 14px;border-radius:3px;font-family:var(--menu);font-size:13px;
  font-weight:bold;line-height:1.2;text-decoration:none;cursor:pointer}
.btn,.btn:visited{color:#fff;background:linear-gradient(#ffaa4d,#ff8c1a 55%,#f07c0a);border:1px solid #c86400}
.btn:hover{color:#fff;background:linear-gradient(#ff9a33,#e87500)}
.ghost,.ghost:visited{color:#000;background:linear-gradient(#ffffff,#e3e3e3);border:1px solid #8a8a8a}
.ghost:hover{color:#000;background:linear-gradient(#f4f4f4,#d4d4d4)}
button.btn{font-family:var(--menu)}

/* ---------------- form: XP-style fields ---------------- */
.form{max-width:520px}
.form label{display:block;margin-bottom:4px;font-family:var(--menu);font-size:12px;font-weight:bold}
.form input,.form select,.form textarea{width:100%;padding:5px 6px;border:1px solid #7f9db9;border-radius:0;
  background:#fff;font:inherit;font-size:14px;color:#000}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:0}
.form textarea{min-height:130px;resize:vertical}
.form .f + .f{margin-top:12px}
.hp{position:absolute;left:-9999px}

/* ---------------- footer ---------------- */
.foot{padding:14px 20px 12px;border-top:3px solid var(--blue);background:var(--blue-ll);text-align:center;
  font-family:var(--menu);font-size:12px;color:var(--text3)}
.foot p{margin:0 0 4px}
.foot-links a{color:var(--link)}
.foot-small{font-size:11px;color:#888}

#gridGuides{display:none}

/* 80x15 footer buttons, antipixel style. Each one parodies a different
   button from the era; every claim on them is true. */
.badges{margin:8px 0 4px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.badge{display:inline-flex;min-width:80px;height:15px;border:1px solid #000;font:8px/13px Verdana,Tahoma,sans-serif;
  text-transform:uppercase;overflow:hidden;white-space:nowrap;letter-spacing:.2px}
.badge b,.badge i{padding:0 3px;font-weight:normal;font-style:normal}
.badge i{flex:1;text-align:center}
/* "Valid XHTML": grey and white, blue tick */
.b-valid b{background:#5f5f5f;color:#fff}
.b-valid i{background:#fff;color:#039;font-weight:bold}
.b-valid i::before{content:"\2713 ";color:#090}
/* WAP phone: black bar, green LCD, blinking cursor */
.b-wap b{background:#000;color:#9f9}
.b-wap i{background:#9c3;color:#132;font-family:"Courier New",monospace;font-size:9px;font-weight:bold}
.b-wap i::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* no cookies: red warning, crossed-out cookie */
.b-cookie b{background:#c00;color:#fff;font-weight:bold}
.b-cookie i{background:#fff;color:#c00}
.b-cookie s{color:#999;text-decoration-color:#c00;text-decoration-thickness:1px}
/* built in NZ: navy with the flag's red stars */
.b-nz b{background:#000;color:#fff}
.b-nz i{background:#00247d;color:#fff;font-weight:bold}
.b-nz i::after{content:" \2605\2605";color:#e4002b;letter-spacing:-1px}
/* Y2K: black and lime, silver frame */
.b-y2k{border-color:#888;box-shadow:inset 0 0 0 1px #ccc}
.b-y2k b{background:linear-gradient(#333,#000);color:#cf0;font-weight:bold}
.b-y2k i{background:linear-gradient(#eee,#bbb);color:#333}
/* Flash intro: bevelled silver, a skip button with nothing to skip */
.b-flash b{background:linear-gradient(#fff,#aaa);color:#333;border-right:1px solid #666}
.b-flash i{background:#333;color:#fff}
@media(prefers-reduced-motion:reduce){.b-wap i::after{animation:none}}

/* hit counter: green digits in black boxes, the free-counter look */
.counter{margin:8px 0 2px;font-size:11px;color:#666}
.counter[hidden]{display:none}
.odo{display:inline-block;margin-left:4px;padding:1px;background:#000;border:2px inset #999;vertical-align:middle;
  font:bold 13px/1 "Courier New",monospace;color:#3f3;letter-spacing:5px;padding-left:4px;text-shadow:0 0 3px rgba(51,255,51,.7)}

/* sidebar: an original iPhone in ChatGPT voice mode */
.box-gpt p:last-child{margin:0;padding:0 10px 10px;font-size:12px}
.iphone{position:relative;width:118px;margin:12px auto 10px;padding:22px 7px 30px;border-radius:18px;background:#0d0d0d;
  box-shadow:0 0 0 3px #c9ccd1,0 0 0 4px #8a8e94,inset 0 1px 0 #444,2px 3px 6px rgba(0,0,0,.35)}
.iphone-ear{position:absolute;top:10px;left:50%;width:26px;height:4px;margin-left:-13px;border-radius:2px;background:#333}
.iphone-home{position:absolute;bottom:6px;left:50%;width:19px;height:19px;margin-left:-10px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#2a2a2a,#0a0a0a);box-shadow:inset 0 0 0 1px #444}
.iphone-home::after{content:"";position:absolute;inset:6px;border:1px solid #777;border-radius:2px}
.iphone-screen{position:relative;height:150px;overflow:hidden;background:#000;border:1px solid #222;
  display:flex;flex-direction:column;align-items:center}
.iphone-bar{display:flex;justify-content:space-between;align-self:stretch;padding:1px 3px;
  background:linear-gradient(#555,#222);font:bold 6px/8px Helvetica,Arial,sans-serif;color:#fff}
.iphone-ask{margin:9px 7px 0;font:9px/1.25 Helvetica,Arial,sans-serif;color:#9aa0a6;text-align:center}
.orb{position:relative;width:62px;height:62px;margin:auto 0 16px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 60%,#bfe6ff 0,#4fa8ff 30%,#1561e8 62%,#082a86 100%);
  box-shadow:0 0 16px rgba(70,160,255,.6);animation:orb-breathe 3.2s ease-in-out infinite}
.orb::before,.orb::after{content:"";position:absolute;inset:-25%;mix-blend-mode:screen}
.orb::before{border-radius:42% 58% 55% 45%;filter:blur(2.5px);
  background:conic-gradient(from 0deg,transparent 0 8%,#fff 14%,transparent 24% 46%,#cdeeff 54%,transparent 64% 80%,
  rgba(255,255,255,.85) 88%,transparent 96%);animation:orb-spin 4.5s linear infinite}
.orb::after{border-radius:55% 45% 40% 60%;filter:blur(4px);
  background:radial-gradient(ellipse 60% 25% at 50% 35%,rgba(255,255,255,.9),transparent 70%),
  radial-gradient(ellipse 45% 20% at 40% 70%,rgba(160,225,255,.9),transparent 70%);
  animation:orb-spin 6.5s linear infinite reverse}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes orb-breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.orb,.orb::before,.orb::after{animation:none}}