/* osirislinks.biz - the maintenance schedule
   Built to the supplied reference: light editorial layout, one blue accent, a
   real token scale for spacing and widths, a 72ch reading column, large
   headings at weight 400 rather than bold, a handwritten face used only for
   accent subheadings, no shadows anywhere, and a caption tab on the hero.
   The reference leans on photography for depth. This site has no photographs
   and will not invent any, so the same job is done with flat colour panels and
   typography. No top navigation bar, no search field and no signup form. */

@font-face{
  font-family:"Caveat";
  src:url("/assets/fonts/caveat.ttf") format("truetype-variations"),
      url("/assets/fonts/caveat.ttf") format("truetype");
  font-weight:400 700;
  font-display:swap;
}

:root{
  /* spacing scale, 4px step */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;  --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  /* widths */
  --w-read:72ch;
  --w-base:1200px;
  --w-wide:1440px;
  /* type scale */
  --t-xs:.78rem; --t-sm:.9rem; --t-md:1rem; --t-lg:1.15rem;
  --t-xl:1.5rem; --t-2xl:1.9rem; --t-3xl:2.4rem; --t-4xl:3rem;
  /* colour */
  --paper:#ffffff;
  --wash:#f8fafc;
  --wash2:#eef3f7;
  --ink:#161314;
  --ink2:#3d4750;
  --dim:#6b7680;
  --blue:#2b7db1;
  --blue-dk:#1f5f87;
  --blue-pale:rgba(33,150,222,.10);
  --deep:#1e3e52;
  --deep2:#1a222d;
  --muted:#686c69;
  --line:#dde5eb;
  /* faces */
  --head:"Gill Sans","Gill Sans MT","Optima","Corbel","Segoe UI",sans-serif;
  --body:"Noto Serif","Charter","Georgia","Times New Roman",serif;
  --hand:"Caveat","Segoe Script",cursive;
  --mono:"Consolas","DejaVu Sans Mono","Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink2);
  font:var(--t-md)/1.75 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--blue-dk)}
.wrap{max-width:var(--w-base);margin:0 auto;padding:0 var(--s5);min-width:0}
.read{max-width:var(--w-read)}

/* slim identity rule, not a navigation bar */
.mast{background:var(--deep2);color:#fff}
.mast .wrap{padding-top:var(--s4);padding-bottom:var(--s3)}
.mast b{font:400 var(--t-xl)/1.2 var(--head);letter-spacing:.01em;color:#fff}
.mast i{font:400 var(--t-lg)/1 var(--hand);color:#8fc4e4;font-style:normal;margin-left:var(--s2)}
.mast span{display:block;margin-top:var(--s1);font-size:var(--t-sm);color:#9fb0bd}

/* hero band with the caption tab from the reference */
.hero{position:relative;background:var(--deep);color:#fff;padding:var(--s20) 0 var(--s24)}
.hero .wrap{position:relative}
.hero h1{margin:0;font:400 var(--t-4xl)/1.14 var(--head);color:#fff;max-width:20ch}
.hero .hand{display:block;margin-top:var(--s2);font:400 2.6rem/1 var(--hand);color:#8fc4e4}
.hero p{margin:var(--s6) 0 0;color:#c6d5df;max-width:62ch;font-size:var(--t-lg)}
.tab{position:absolute;left:var(--s5);bottom:0;transform:translateY(50%);
  background:var(--paper);color:var(--ink);padding:var(--s3) var(--s5);
  font:400 var(--t-sm)/1.4 var(--head);letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line)}

/* breadcrumb */
.crumb{font-size:var(--t-sm);color:var(--dim);margin:var(--s6) 0 0}
.crumb a{color:var(--dim)}

/* type */
h1{font:400 var(--t-3xl)/1.18 var(--head);color:var(--ink);margin:var(--s6) 0 var(--s3)}
.hand-sub{font:400 2rem/1.1 var(--hand);color:var(--blue);margin:0 0 var(--s5);display:block}
.lede{font-size:var(--t-lg);line-height:1.7;color:var(--ink2);margin:0 0 var(--s8);max-width:var(--w-read)}
h2{font:400 var(--t-2xl)/1.24 var(--head);color:var(--ink);margin:var(--s12) 0 var(--s4)}
h3{font:400 var(--t-xl)/1.32 var(--head);color:var(--ink);margin:var(--s8) 0 var(--s3)}
p{margin:0 0 var(--s4);max-width:var(--w-read)}
ul,ol{margin:0 0 var(--s5);padding-left:var(--s6);max-width:var(--w-read)}
li{margin-bottom:var(--s2)}
code{font:.9em var(--mono);background:var(--wash2);padding:2px 6px;color:var(--ink)}
strong,b{color:var(--ink);font-weight:700}

/* addresses */
.doors{background:var(--wash);border:1px solid var(--line);padding:var(--s6);margin:var(--s8) 0}
.doors h2{margin:0 0 var(--s1);font:400 var(--t-xl)/1.3 var(--head);color:var(--ink)}
.doors > p{margin:0 0 var(--s5);font-size:var(--t-sm);color:var(--dim);max-width:none}
.door{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;background:var(--paper);
  border:1px solid var(--line);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.door:last-of-type{margin-bottom:0}
.door code{flex:1 1 260px;min-width:0;font:.85rem/1.5 var(--mono);color:var(--ink);
  word-break:break-all;background:none;padding:0}
.door button{flex:none;background:var(--muted);color:#fff;border:0;border-radius:5px;
  padding:10px 15px;font:400 var(--t-sm)/1.2 var(--head);cursor:pointer}
.door button:hover{background:var(--blue)}
.doors .fine{margin:var(--s4) 0 0;font-size:var(--t-sm);color:var(--dim)}

/* section links, pills as in the reference */
.rail{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s10)}
.rail a{border:1px solid var(--line);border-radius:9999px;padding:9px 18px;
  font:400 var(--t-sm)/1.3 var(--head);color:var(--ink2);text-decoration:none;background:var(--paper)}
.rail a:hover,.rail a.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* two card row, the reference's main widget, on a light panel */
.pair{background:var(--wash);padding:var(--s8) var(--s6);margin:0 0 var(--s10)}
.pair .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s6);max-width:none}
.card{background:var(--paper);border:1px solid var(--line)}
.card .top{background:var(--deep);color:#fff;padding:var(--s5) var(--s5) var(--s6)}
.card .top em{display:block;font:400 1.5rem/1 var(--hand);color:#8fc4e4;font-style:normal;margin-bottom:var(--s2)}
.card .top b{font:400 var(--t-xl)/1.3 var(--head);color:#fff}
.card .body{padding:var(--s5)}
.card .body p{margin:0 0 var(--s4);font-size:var(--t-sm);color:var(--ink2);max-width:none}
.card .body a.more{display:inline-block;background:var(--muted);color:#fff;border-radius:5px;
  padding:10px 15px;font:400 var(--t-sm)/1.2 var(--head);text-decoration:none}
.card .body a.more:hover{background:var(--blue)}

/* the schedule list */
.sched{border-top:1px solid var(--line);margin:0 0 var(--s10)}
.sched a{display:flex;gap:var(--s5);align-items:baseline;padding:var(--s5) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink2)}
.sched a:hover{background:var(--wash)}
.sched .when{flex:0 0 132px;font:400 1.35rem/1.1 var(--hand);color:var(--blue)}
.sched .what{flex:1 1 auto;min-width:0}
.sched .what b{display:block;font:400 var(--t-lg)/1.35 var(--head);color:var(--ink);margin-bottom:2px}
.sched .what span{display:block;font-size:var(--t-sm);color:var(--dim);line-height:1.6}

/* cadence panel on every task page */
.cad{border:1px solid var(--line);margin:0 0 var(--s8)}
.cad > div{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.cad > div:last-child{border-bottom:0}
.cad dt{flex:0 0 190px;margin:0;padding:var(--s3) var(--s4);background:var(--wash);
  font:400 var(--t-sm)/1.5 var(--head);letter-spacing:.03em;color:var(--dim)}
.cad dd{flex:1 1 320px;min-width:0;margin:0;padding:var(--s3) var(--s4);font-size:var(--t-sm)}
.cad dd b{color:var(--ink)}

/* callouts */
.note{background:var(--blue-pale);border-left:3px solid var(--blue);
  padding:var(--s4) var(--s5);margin:var(--s6) 0;font-size:var(--t-sm);max-width:var(--w-read)}
.note.stop{background:#fdf2ee;border-left-color:#b5551f}
.note.calm{background:var(--wash);border-left-color:var(--muted)}
.note b{display:block;margin-bottom:var(--s1);color:var(--ink);
  font:400 var(--t-md)/1.4 var(--head)}

/* tables scroll rather than widening the page */
.tw{overflow-x:auto;margin:0 0 var(--s6);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-sm)}
th,td{border:1px solid var(--line);padding:var(--s3) var(--s4);text-align:left;vertical-align:top}
th{background:var(--wash);color:var(--ink);font:400 var(--t-sm)/1.4 var(--head);white-space:nowrap}
td{background:var(--paper)}
td b{color:var(--ink)}

/* numbered steps */
.steps{list-style:none;padding:0;counter-reset:s;max-width:var(--w-read)}
.steps li{position:relative;padding-left:var(--s10);margin-bottom:var(--s4);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;
  border-radius:9999px;background:var(--blue);color:#fff;
  font:400 var(--t-sm)/28px var(--head);text-align:center}

/* prev / next */
.pn{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s12) 0 0;
  border-top:1px solid var(--line);padding-top:var(--s6)}
.pn a{flex:1 1 240px;border:1px solid var(--line);padding:var(--s4) var(--s5);
  text-decoration:none;color:var(--ink2)}
.pn a:hover{border-color:var(--blue)}
.pn a em{display:block;font:400 1.2rem/1 var(--hand);color:var(--blue);font-style:normal;margin-bottom:var(--s1)}
.pn a b{color:var(--ink);font:400 var(--t-lg)/1.3 var(--head)}

/* dark footer */
.foot{background:var(--deep);color:#c6d5df;margin-top:var(--s16);padding:var(--s12) 0 var(--s16)}
.foot h2{color:#fff;font:400 var(--t-lg)/1 var(--head);margin:0 0 var(--s4)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s8)}
.foot a{display:block;color:#c6d5df;font-size:var(--t-sm);padding:3px 0;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .fine{margin:var(--s10) 0 0;padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14);
  color:#9fb0bd;font-size:var(--t-sm);max-width:none}

@media (max-width:700px){
  :root{--t-4xl:2.1rem;--t-3xl:1.8rem;--t-2xl:1.5rem}
  .hero{padding:var(--s12) 0 var(--s16)}
  .hero .hand{font-size:1.8rem}
  .door code{flex-basis:100%;font-size:.78rem}
  .cad dt{flex-basis:100%}
  .sched a{flex-direction:column;gap:var(--s1)}
  .sched .when{flex-basis:auto}
}