/* ishibuilds.com. A surveyor's notebook: a contour map along the top, strict
   Swiss type and rules, faint graph paper and the odd handwritten note.
   Values come from the approved "Subtle" design. */
:root {
  --paper: #fbfbf6;
  --ink: #1c2633;
  --ink-2: #4d5866;
  --red: #c8372d;
  --sage: #eef1e4;
  --rule: #1c2633;
  --grid: rgba(215, 227, 239, 0.55);
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Caveat", "Bradley Hand", cursive;
  --col: 680px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.5 var(--f-sans);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

.in { position: relative; max-width: var(--col); margin: 0 auto; padding-inline: 20px; }

/* Map band */
.map { position: relative; height: 196px; background: var(--sage); border-bottom: 2px solid var(--rule); overflow: hidden; }
.map.thin { height: 96px; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map .river { fill: none; stroke: #7a93ad; stroke-width: 1.6; stroke-opacity: 0.7; }
.map .wide { display: none; }
@media (min-width: 700px) {
  .map .phone { display: none; }
  .map .wide { display: block; }
}
.pin {
  position: absolute; z-index: 1; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--red); color: #fff;
  font: 700 10.5px/20px var(--f-sans); text-align: center; text-decoration: none;
  box-shadow: 0 0 0 2px var(--sage);
}
a.pin:hover { transform: scale(1.12); }
/* Project names sit beside the pins on wider screens, on a sage chip so the contours don't run through them. */
.pin-name {
  display: none; position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%);
  white-space: nowrap; color: var(--ink); background: var(--sage); padding: 1px 5px;
  font: 700 11px/16px var(--f-mono); text-align: left;
}
.pin.label-left .pin-name { left: auto; right: calc(100% + 6px); }
a.pin:hover .pin-name { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) { .pin-name { display: block; } }
.map-key { margin: 0; padding-top: 10px; font: 400 11.5px var(--f-mono); color: var(--ink-2); }
.bar {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  max-width: var(--col); margin: 0 auto; padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 700 12px var(--f-mono); letter-spacing: 0.04em;
}
.bar .home { text-decoration: none; text-transform: uppercase; }
/* A sage chip behind each piece of top bar text, so the contour lines don't run through it. */
.bar .home, .bar nav a, .bar .back, .bar .count { background: var(--sage); padding: 2px 6px; margin: -2px -6px; box-shadow: 0 0 0 1px var(--sage); }
.bar nav { display: flex; gap: 26px; font-weight: 400; }
.bar nav a { text-decoration: none; }
.bar nav a:hover, .bar .home:hover { text-decoration: underline; text-underline-offset: 3px; }
.bar .count { font-weight: 400; }

/* Type */
.t { font-size: 40px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.t i { font-style: normal; color: var(--red); }
h2.t { font-size: 26px; line-height: 1; letter-spacing: -0.025em; margin: 0 0 20px; }
.lead { font-size: 19px; line-height: 1.3; font-weight: 600; margin-top: 14px; letter-spacing: -0.01em; }
.body { margin-top: 10px; }
.muted { color: var(--ink-2); }
.hand { font-family: var(--f-hand); color: var(--red); font-size: 22px; line-height: 1; font-weight: 500; }
.lab {
  font: 700 11px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
}
.lab::before { content: ""; width: 7px; height: 7px; background: var(--red); flex: none; }

/* Home top */
.hero { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: end; padding-top: 18px; }
.photo { width: 72px; height: 88px; border: 1px solid var(--rule); display: block; object-fit: cover; }
div.photo { background: #dfe3e6; display: grid; place-items: center; font: 400 10px var(--f-mono); color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font: 700 13px var(--f-mono); }
.links a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.links a.red, .links a:first-child { color: var(--red); }
.links span { text-decoration: none; }
.home-note { text-align: right; margin-top: 8px; transform: rotate(-3deg); }
section.blk { margin-top: 44px; }
section.blk > .lab { margin-bottom: 10px; }

/* Tables made of rules */
.rows { border-top: 2px solid var(--rule); }
.r {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 8px; padding: 10px 0;
  border-bottom: 1px solid var(--rule); align-items: baseline; text-decoration: none;
}
a.r:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.r .n { font: 700 12px var(--f-mono); color: var(--red); }
.r .nm { font-weight: 700; font-size: 16px; }
.r .pl { font: 400 11.5px var(--f-mono); color: var(--ink-2); text-align: right; }
.r .d { grid-column: 2 / -1; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.r .d em { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; }
.kv { display: grid; grid-template-columns: 104px 1fr; margin: 0; border-top: 2px solid var(--rule); }
.kv > * { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.kv dt { font: 400 11.5px var(--f-mono); color: var(--ink-2); padding-top: 11px; padding-right: 10px; }
.kv dd { margin: 0; font-size: 14px; }
.kv dd span { color: var(--ink-2); }
.lesson { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.lesson b { display: block; font-size: 16px; }
.lesson span { color: var(--ink-2); font-size: 14px; }

/* Project page */
.back { font: 700 12px var(--f-mono); text-decoration: underline; text-underline-offset: 3px; }
.project-title { margin-top: 22px; font-size: 44px; }
.project-title + .lead { margin-top: 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font: 700 13px var(--f-mono); }
/* Boxed so they read as buttons, not as another line above the facts table. */
.btns a, .btns span { border: 1px solid var(--ink); padding: 8px 12px; text-decoration: none; }
.btns a:hover { background: var(--ink); color: var(--paper); }
.btns span { border: 0; padding-inline: 0 4px; color: var(--ink-2); }
.facts { margin-top: 16px; }
.shotwrap { position: relative; margin: 26px 0 8px; display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: start; }
.shot { position: relative; background: #fff; border: 1px solid #c9ced6; padding: 8px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(28, 38, 51, 0.15); }
.shot img { display: block; width: 100%; height: auto; }
.tape { position: absolute; top: -9px; left: 60px; width: 64px; height: 18px; background: rgba(240, 214, 140, 0.85); transform: rotate(3deg); }
.shot-note { margin-top: 34px; max-width: 230px; transform: rotate(4deg); }
.para { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.para .lab { margin-bottom: 4px; }
.para.last { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 400 11.5px var(--f-mono); border: 1px solid var(--rule); padding: 2px 7px; }
.next {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 14px 0;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 26px;
  align-items: baseline; font-weight: 700; text-decoration: none;
}
.next:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.next .n { font: 700 12px var(--f-mono); color: var(--red); }

/* Blog */
.post { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; text-decoration: none; }
a.post:hover b { text-decoration: underline; text-underline-offset: 3px; }
.post time { font: 400 11.5px var(--f-mono); color: var(--ink-2); }
.post b { font-size: 16px; line-height: 1.25; }
.post-text { display: grid; gap: 4px; justify-items: start; }
.post-sub { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.tag { font: 700 10.5px var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.more { display: inline-block; margin-top: 12px; font: 700 13px var(--f-mono); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-title { margin-top: 18px; font-size: 32px; line-height: 1.05; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 12px 0 0; font: 400 12px var(--f-mono); color: var(--ink-2); }
.prose { margin-top: 22px; font-size: 16px; line-height: 1.6; }
.prose > * { margin: 14px 0 0; }
.prose h2, .prose h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.prose h2 { font-size: 22px; margin-top: 28px; }
.prose h3 { font-size: 18px; margin-top: 22px; }
.prose a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; border: 1px solid #c9ced6; background: #fff; padding: 8px; box-shadow: 0 2px 4px rgba(28, 38, 51, 0.12); }
.prose blockquote { margin-left: 0; padding-left: 14px; border-left: 2px solid var(--red); color: var(--ink-2); }
.prose code { font: 400 0.88em var(--f-mono); background: rgba(28, 38, 51, 0.06); padding: 1px 4px; }
.prose pre { overflow-x: auto; background: #fff; border: 1px solid var(--rule); padding: 12px; font-size: 13px; line-height: 1.5; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); }
.prose th { border-bottom-width: 2px; }

/* Footer */
.foot { margin-top: 34px; padding-block: 14px 26px; display: grid; gap: 6px; font: 400 12px var(--f-mono); }
.foot .em { font: 700 14px var(--f-mono); text-decoration: none; }
.foot nav { display: flex; gap: 16px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot.flush { margin-top: 0; }

/* On a laptop the column stays the same and the handwritten notes move into the right margin. */
@media (min-width: 1100px) {
  .margin-note { position: absolute; left: calc(100% + 8px); width: 320px; text-align: left; margin: 0; }
  .home-note { top: 130px; }
  .shotwrap { grid-template-columns: 220px 1fr; }
}

/* Small phones */
@media (max-width: 360px) {
  .t { font-size: 34px; }
  .project-title { font-size: 38px; }
  .post-title { font-size: 28px; }
  .shotwrap { grid-template-columns: 150px 1fr; }
}