@import url("./colours.css");
*{box-sizing:border-box}html{color:#181817;background:#eaeaea var(--page-gradient,none) fixed;font:15px/1.35 Arial,Helvetica,sans-serif;scroll-padding:16px}body{margin:0}.sheet{background:transparent;border:0;max-width:904px;margin:26px auto;padding:16px 20px 8px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;line-height:1}.brand a{text-decoration:none;color:#151515;white-space:nowrap;font-size:17px;letter-spacing:-.65px}nav{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}a{color:#184b80}a:focus-visible{outline:3px solid #2567ac;outline-offset:3px}nav a{text-align:center;padding:2px 4px;border:1px solid #4d4d4d;text-decoration:none;color:#171717;font-size:14px;font-weight:600}nav a:focus-visible,.tile:focus-visible{background:#eee}
:root { --project-blue: #00008E; }
.masthead nav a::before {
  visibility: hidden;
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--explainer-bg, #800000);
  vertical-align: middle;
}
.masthead nav [aria-current="page"]::before { visibility: visible; }
h1,h2{font-size:16px;line-height:1.3;margin:0 0 16px;padding:0 0 8px;border-bottom:1px dotted #606060}h1{border-bottom:1px solid #555}section,main>article{margin-top:30px}h3,.sub{font-weight:700;font-size:14px;margin:0 0 6px}p{margin:0 0 12px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}blockquote{margin:13px 0;border-left:2px solid #999;padding:4px 12px}.rows{list-style:none;padding:0;margin:0;border:1px solid #bbb}.rows li{padding:2px 6px;border-bottom:1px dotted #b1b1b1;font-size:13px}.rows li:last-child{border:0}.credit,.small,figcaption{font-size:12px;color:#565656}.credit{margin:4px 0 0}.credit a{color:inherit}.button{display:inline-block;background:#efbd41;border:1px solid #715d22;color:#161616;padding:3px 8px;text-decoration:none;font-weight:700;font-size:13px}.button.green{background:#245943;border-color:#193d2e;color:#fff}.button:hover{filter:brightness(.9)}.feature{display:block;border:1px solid #b6b6b6;text-decoration:none;color:inherit;background:#f8f8f5}.feature img{width:100%;aspect-ratio:1.58;display:block;object-fit:cover}.spec{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;font:11px/1.35 Menlo,monospace}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tile{display:flex;flex-direction:column;min-width:0;color:#161616;text-decoration:none;border:1px solid #b6b6b6;padding:7px}.tile img{width:100%;height:auto;aspect-ratio:1;display:block;object-fit:cover}.tile b{margin:5px 0 0;font-size:14px}.rule{border-top:1px solid #666;margin-top:28px;padding:6px 0 0;display:flex;justify-content:space-between;font:11px/1.35 Menlo,monospace}.rule a{color:inherit}.note{max-width:56ch}.figure{margin:0}.figure img{width:100%}.figure figcaption{padding:4px 0}.route{margin-top:20px}.eyebrow{font:12px Menlo,monospace;color:#555;margin:0 0 10px}.ledger{margin:0}.ledger dt{font-weight:700;padding-top:6px;border-top:1px dotted #aaa}.ledger dd{margin:4px 0 13px}.skip{position:absolute;left:-9999px}.skip:focus{position:static}strong{font-weight:700}@media(max-width:700px){html{font-size:15px}.sheet{margin:8px;padding:12px}.two{grid-template-columns:1fr;gap:16px}nav{gap:4px;grid-template-columns:repeat(3,1fr)}nav a{padding:6px 3px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.brand a{font-size:16px}section,main>article{margin-top:23px}.rows li{padding:4px 6px}}@media(max-width:375px){.tiles{grid-template-columns:1fr}.sheet{margin:4px}.rule{gap:10px}}
.board-heading{background:#FFCCAA;color:#43392d;border:1px solid #c1b5a2;padding:3px 7px;font-size:15px;line-height:1.25}

nav .route-code{font:11px/1 Menlo,monospace;color:#575e56;margin-right:5px}nav a{white-space:nowrap}@media(max-width:420px){nav .route-code{font-size:9px;margin-right:3px}nav a{font-size:12px}}

.welcome,.box{border:1px solid var(--edge,#b4a898);margin:9px 0 0;background:#fff}
.welcome{margin-top:20px}.welcome summary{display:flex;justify-content:space-between;align-items:center;min-height:29px;padding:2px 8px;background:var(--intro,#343733);color:var(--explainer-ink,white);font-weight:bold;cursor:pointer;list-style:none}.welcome summary:focus-visible{outline:3px solid #426aa7;outline-offset:2px}.welcome summary::-webkit-details-marker{display:none}.close,.show{display:inline-grid;place-content:center;width:17px;height:17px;border:1px solid currentColor;font:18px/1 Arial}.welcome details[open] .show,.welcome details:not([open]) .close{display:none}.intro-text{padding:10px 10px 9px}.intro-text p{margin:0 0 7px}.intro-text p:last-child{margin:0}.box>.board-heading{padding:4px 8px;border:0;border-bottom:1px solid var(--edge,#b4a898);margin:0;background:var(--band,var(--section-band,#FFCCAA));color:var(--head,#43392d)}.inside{padding:9px}.box .two{gap:12px}.box .feature img{height:auto}.box .credit{margin-top:5px}.box .rows{border:0}.box .rows li{padding-left:0}.box .rows li:first-child{padding-top:0}.box .tile img{height:auto}.box .tile{padding:5px}.directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.directory a,.directory b{display:block;font-size:14px}.directory b{text-decoration:underline;margin-bottom:3px}.directory a{text-decoration:none;margin-bottom:1px;color:#702d28}.directory a:hover{text-decoration:underline}.pair{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:9px;align-items:start}.pair .two{display:flex;flex-direction:column}.pair .feature{width:100%}.pair .feature img{max-height:175px}.pair .button{margin-bottom:4px}.quiet{margin:10px 0}.quiet>summary{cursor:pointer;font-weight:bold}.quiet>div{padding:8px}.hidden-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:700px){.pair{grid-template-columns:1fr;gap:0}.directory{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome summary{min-height:34px}}
.box .tile{border-color:#d0c9be}.welcome{--intro:var(--explainer-bg,var(--project-blue))}
.masthead.box{margin-top:0;padding:9px}.masthead nav{margin-top:8px}.welcome{margin-top:9px}.imprint .rule{margin-top:8px;gap:8px;align-items:baseline}.imprint p{margin:0}.imprint .rule a{white-space:nowrap}

.masthead.box {
  background: var(--masthead-bg,var(--project-blue));
  display: flex;
  align-items: center;
  gap: 14px;
}
.home-mark {
  color: var(--masthead-ink,#fff);
  font: bold 22px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  text-decoration: none;
}
.masthead nav a { background-color: #fff; }
.masthead nav a:focus-visible { background-color: #eee; }
@media (hover: hover) and (pointer: fine) {
  .masthead nav a:hover, .tile:hover { background-color: #eee; }
}
a, summary { -webkit-tap-highlight-color: transparent; }
a:active, summary:active { outline: 1px solid currentColor; outline-offset: -1px; }
.masthead a:focus-visible { outline-color: var(--masthead-ink,#fff); }
.masthead nav {
  flex: 1;
  min-width: 0;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .masthead nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 375px) {
  .masthead { flex-wrap: wrap; gap: 8px; }
  .masthead nav { flex-basis: 100%; }
}

.project-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28%);
  gap: 16px;
  align-items: start;
}
.project-panel.project-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
}
.project-image {
  display: block;
  width: 100%;
  height: auto;
}
.project-panel .project-image {
  aspect-ratio: 1;
  object-fit: contain;
  background: #ccc;
}
.development-panel .colour-proof {
  filter: hue-rotate(5deg) saturate(.94);
}
.development-panel .colour-synth {
  filter: hue-rotate(12deg) saturate(1.08);
}
.project-panel .thumbnail-frame {
  border: 1px solid #d0c9be;
}
.project-wide .project-image {
  aspect-ratio: 7 / 3;
  object-fit: cover;
}
.project-panel p:last-child { margin-bottom: 0; }
@media (max-width: 520px) {
  .project-panel, .project-panel.project-wide {
    grid-template-columns: minmax(0, 1fr) 32%;
    gap: 8px;
  }
}

.page-receipt {
  --paper: #fffef9;
  position: relative;
  margin: 14px 0 12px;
  padding: 9px 12px 12px;
  background: var(--paper);
  color: #282823;
  font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace;
}
.page-receipt h2 {
  margin: 0 0 7px; padding: 0 0 5px; border: 0; border-bottom: 1px dashed #99978e;
  font: inherit; font-size: 11px;
}
.receipt-info {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px;}
.receipt-info p {margin: 0;}

.enquiry-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
.enquiry-form label { display: grid; gap: 5px; font-size: 13px; }
.enquiry-form input, .enquiry-form textarea {
  width: 100%;
  border: 1px solid #b4a898;
  border-radius: 0;
  padding: 5px 7px;
  background: white;
  color: #181817;
  font: inherit;
}
.enquiry-form textarea { resize: vertical; }
.enquiry-form output:empty { display: none; }
.enquiry-form button { justify-self: start; font-family: inherit; cursor: pointer; }

.project-panel.development-panel {
  grid-template-columns: minmax(0, 1fr) clamp(80px, 18vw, 120px);
}
.development-panel .project-image {
  width: 100%;
  max-width: 120px;
  height: auto;
  justify-self: end;
}

.box .enquiry-columns {
  gap: 0;
  padding: 0;
  align-items: stretch;
}
.enquiry-columns > div, .contact-details { padding: 14px 16px; }
.contact-details {
  margin: 0;
  min-width: 0;
  border-left: 1px dotted #99978e;
}
.contact-details h3 {
  margin: 0 0 8px;
  font-size: 13px;
}
.contact-email {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: bold;
  overflow-wrap: anywhere;
}
.contact-details a { text-underline-offset: 3px; }
.contact-directory { margin: 0; font-size: 13px; }
.contact-directory > div {
  display: grid;
  grid-template-columns: minmax(9ch, auto) 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dotted #b4a898;
}
.contact-directory dt { color: #534e46; }
.contact-directory dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .contact-details { border-left: 0; border-top: 1px dotted #99978e; }
  .enquiry-columns > div, .contact-details { padding: 12px; }
}


@font-face{font-family:"Berkeley Mono";src:url("./assets/fonts/BerkeleyMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Berkeley Mono";src:url("./assets/fonts/BerkeleyMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Berkeley Mono";src:url("./assets/fonts/BerkeleyMono-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Berkeley Mono";src:url("./assets/fonts/BerkeleyMono-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap;}
html,body,body *,body *::before,body *::after{font-family:"Berkeley Mono",monospace !important;}

.paper-entry {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  align-items: start;
}
.paper-entry img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #d0c9be;
}
@media (max-width: 520px) {
  .paper-entry { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}