/* Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}section,header,footer,nav,article,aside,figure{display:block;width:100%}mark,time,meter,progress{display:inline}

/* Variables */

:root {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-weight: normal;
  --bold-font-weight: 600;
  --semibold-font-weight: 500;

  --title-font-family: var(--font-family);
  --title-font-weight: var(--bold-font-weight);

  --code-font-family: ui-monospace, "Menlo", "Monaco", monospace;
  --code-font-weight: 500;

  --body-foreground: #111;
  --body-background: #fff;
  --link-foreground: #0881b3;
  --light-foreground: #949494;
  --light-link-foreground: #444;
  --mark-foreground: #000;
  --mark-background: #fffeca;
  --horizontal-rule: #ddd;
  --blockquote-foreground: #555;
  --blockquote-border: #ddd;
  --blockquote-link: #444;
  --brand-color: #f6291d;
  --h1-foreground: #000;
  --h2-foreground: #111;
  --h3-foreground: #666;
  --h4-foreground: #999;
  --footer-foreground: #aaa;
  --footer-code-foreground: #ddd;
  --table-border: var(--horizontal-rule);
  --table-header: #f7f7f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-foreground: #eee;
    --body-background: #111;
    --link-foreground: #64c1f8;
    --light-foreground: #949494;
    --light-link-foreground: #bbb;
    --horizontal-rule: #222;
    --blockquote-foreground: #aaa;
    --blockquote-border: #222;
    --blockquote-link: #bbb;
    --brand-color: #f6291d;
    --h1-foreground: #fff;
    --h2-foreground: #eee;
    --h3-foreground: #999;
    --h4-foreground: #666;
    --footer-foreground: #555;
    --table-header: #191919;
  }
}

/* General */

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--body-background);
  color: var(--body-foreground);
  font-size: 19px;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  line-height: 1.7em;
}

input {
  line-height: 1em;
}

a {
  color: var(--link-foreground);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  transition-property: border;
  transition-duration: 0.2s;
  border-bottom: 1px solid;
}

a.img-button:hover {
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

strong, b {
  font-weight: var(--bold-font-weight);
  font-style: normal;
}

mark {
  color: var(--mark-foreground);
  background-color: var(--mark-background);
  padding: 0.05em 0.1em;
  box-shadow: var(--mark-background) 0 0 5px;
}

mark code {
  background-color: var(--mark-background);
  border: none;
}

@media (prefers-color-scheme: dark) {
  mark {
    box-shadow: none;
  }
}

em, i {
  font-style: italic;
}

abbr {
  border-bottom: 1px dashed;
  cursor: help;
}

p {
  margin: 0 0 1em;
}

hr {
  margin: 3em auto 3.5em;
  border: 0;
  border-bottom: 1px solid var(--horizontal-rule);
  width: 66%;
}

blockquote {
  border-left: 5px solid var(--blockquote-border);
  color: var(--blockquote-foreground);
  margin: 0 0 1em;
  padding-left: 1em;
}

blockquote a {
  color: var(--blockquote-link);
}

blockquote a:hover {
  color: var(--link-foreground);
}

small {
  font-size: 0.8em;
  color: var(--light-foreground);
  margin-left: 0.2em;
}

small a {
  color: var(--light-link-foreground);
}

small a:hover {
  color: var(--link-foreground);
}

h1 {
  color: var(--h1-foreground);
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  font-size: 2.2em;
  margin-bottom: 0.5em;
  text-transform: capitalize;
  line-height: 1.2em;
}

body > header h1 a, body > header h1 a:hover {
  color: var(--brand-color);
  border: 0;
}

h2 {
  font-size: 1.3em;
  font-weight: var(--bold-font-weight);
}

h2 a {
  color: var(--h2-foreground);
  border: 0;
}

h3 {
  font-weight: var(--bold-font-weight);
  color: var(--h3-foreground);
  font-size: 1.1em;
}

h3 a {
  color: var(--h3-foreground);
  border: 0;
}

h4 {
  color: var(--h4-foreground);
  font-weight: var(--bold-font-weight);
  margin-bottom: 0.2em;
}

sup {
  vertical-align: super;
}

body > header, main > section.posts, main > section.archive, main > nav, body > footer, section.post > article, section.post > footer div, section.error {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  box-sizing: border-box;
}

body > header {
  color: var(--light-foreground);
  margin: 4em auto 2em;
}

body > header p {
  margin: 0;
}

@media all and (max-width: 660px) {
  body > header {
    margin: 2em auto 3em
  }
  body > header p:nth-child(2) {
    margin-bottom: 1em
  }
}

body > footer {
  color: var(--footer-foreground);
  font-size: 0.8em;
  text-align: center;
  margin: 3em auto;
}

body > footer a {
  color: var(--footer-foreground);
}

body > footer a:hover {
  color: var(--link-foreground);
}

body > footer li {
  margin-right: 1em;
  display: inline-block;
}

body > footer li:last-child {
  margin-right: 0;
}

article h1 {
  display: none;
}

article header {
  margin-bottom: 1em;
}

article header h2 {
  font-size: 2em;
  line-height: 1.2em;
  margin: 1em 0 0.2em;
}

article header p {
  color: var(--light-foreground);
  font-size: 0.9em;
  margin-bottom: 0.25em;
}

article header p a {
  color: var(--light-foreground);
  border: 0;
}

article > h2, article > h3, article > h4, article > h5, article > h6 {
  padding: 1.2em 0 0.2em;
}

article ul, article ol {
  margin: 0 0 2em 0.5em;
}

article ul li, article ol li {
  margin-left: 1em;
}

article ul li {
  list-style: disc;
}

article ol li {
  list-style: decimal;
}

article ol li ol li {
  list-style: lower-alpha;
}

article div.video {
  text-align: center;
  margin: 0 auto 1em;
  max-width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 45%;
  position: relative;
  max-width: 80%;
}

article div.vimeo iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

article img {
  max-width: 100%;
  height: auto;
}

article a.bordered-image {
  float: left;
  margin: 0.25em 0.5em 0.5em 0;
}

article a.image-left {
  float: left;
  margin: 0 1em 1em 0;
}

article a.image-right {
  float: right;
  margin: 0 0 1em 1em;
}

article div.draft {
  background-color: var(--mark-background);
  color: var(--mark-foreground);
  margin: 0 0 1em;
  padding: 0.5em 1em;
}

article div.thanks {
  border-top: 1px solid var(--horizontal-rule);
  color: var(--light-foreground);
  padding-top: 3em;
  margin-top: 3em;
}

article div.thanks a {
  color: var(--light-link-foreground);
}

article div.thanks a:hover {
  color: var(--link-foreground);
}

section.posts article {
  margin-bottom: 8em;
}

section.posts article:last-child {
  margin-bottom: 3em;
}

section.post > div.cover {
  width: 100%;
  overflow: hidden;
  display: flex;
  height: 60vh;
}

section.post > div.cover > img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

body.gallery section.post article, body.gallery > header {
  max-width: 1056px;
}

body.gallery section.post > div.cover {
  height: 70vh;
}

section.post > div.cover > div {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

section.post > footer {
  box-sizing: border-box;
  width: 100%;
  background: #383c40;
  margin: 4em 0 0;
  padding: 1em;
  color: #aaa;
  box-sizing: border-box;
}

section.post > footer a {
  color: #64c1f8;
}

section.post > footer article {
  font-size: 0.9em;
  margin-bottom: 2em;
}

section.post > footer article header {
  margin-bottom: 0;
}

section.post > footer article header h2 {
  font-size: 1.5em;
  color: #ccc;
  margin-bottom: 0;
}

section.post > footer article header h2 a {
  color: #ccc;
}

section.post > footer article mark {
  background: #ddd;
  box-shadow: none;
}

section.post > footer article blockquote {
  color: #eee;
  border-color: #ddd;
}

section.post > footer article pre, section.post > footer article code {
  color: var(--footer-code-foreground);
  background: transparent;
  border: 0;
  padding: 0;
}

section.post > footer p.copyright {
  text-align: center;
  font-size: 0.8em;
  color: #777;
}

section.post > footer p.copyright a {
  color: #777;
}

a.continue-reading {
  white-space: nowrap;
}

a.twitter-username:before {
  content: "@";
}

section.server-error {
  margin-bottom: 3em;
}

span.gray {
  color: #777;
}

ul.list, ol.list {
  margin: 0 0 2em 0.5em;
}

ul.list li, ol.list li {
  margin-left: 1em;
}

ul.list li {
  list-style: disc;
}

ol.list li {
  list-style: decimal;
}

ol.list li ol li {
  list-style: lower-alpha;
}

div.video {
  position: relative;
}

div.video img {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}

div.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

pre, code {
  font-family: var(--code-font-family);
  font-weight: var(--code-font-weight);
  font-size: 16px;
  border-radius: 4px;
  line-height: 1.5em;
}

pre {
  overflow-x: auto;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  background: #fcfcfc;
  color: #111;
  border: 1px solid #f0f0f0;
}

code {
  background: #f7f7f7;
  color: #111;
  padding: 0.1em 0.2em;
}

.highlight code {
  background: transparent;
}

.highlight,.highlight span{color:#4d4d4c}.highlight .hll{background-color:#d6d6d6}.highlight .c{color:#8e908c}.highlight .k{color:#8959a8}.highlight .l{color:#f5871f}.highlight .o{color:#3e999f}.highlight .p{color:#4d4d4c}.highlight .cm{color:#8e908c}.highlight .cp{color:#8e908c}.highlight .c1{color:#8e908c}.highlight .cs{color:#8e908c}.highlight .gd{color:#c82829}.highlight .ge{font-style:italic}.highlight .gh{color:#4d4d4c;font-weight:700}.highlight .gi{color:#718c00}.highlight .gp{color:#8e908c;font-weight:700}.highlight .gs{font-weight:700}.highlight .gu{color:#3e999f;font-weight:700}.highlight .kc{color:#8959a8}.highlight .kd{color:#8959a8}.highlight .kn{color:#3e999f}.highlight .kp{color:#8959a8}.highlight .kr{color:#8959a8}.highlight .kt{color:#eab700}.highlight .ld{color:#718c00}.highlight .m{color:#f5871f}.highlight .s{color:#718c00}.highlight .na{color:#4271ae}.highlight .nb{color:#4d4d4c}.highlight .nc{color:#eab700}.highlight .no{color:#c82829}.highlight .nd{color:#3e999f}.highlight .ni{color:#4d4d4c}.highlight .ne{color:#c82829}.highlight .nf{color:#4271ae}.highlight .nl{color:#4d4d4c}.highlight .nn{color:#eab700}.highlight .nx{color:#4271ae}.highlight .py{color:#4d4d4c}.highlight .nt{color:#3e999f}.highlight .nv{color:#c82829}.highlight .ow{color:#3e999f}.highlight .w{color:#4d4d4c}.highlight .mf{color:#f5871f}.highlight .mh{color:#f5871f}.highlight .mi{color:#f5871f}.highlight .mo{color:#f5871f}.highlight .sb{color:#718c00}.highlight .sc{color:#4d4d4c}.highlight .sd{color:#8e908c}.highlight .s2{color:#718c00}.highlight .se{color:#f5871f}.highlight .sh{color:#718c00}.highlight .si{color:#f5871f}.highlight .sx{color:#718c00}.highlight .sr{color:#718c00}.highlight .s1{color:#718c00}.highlight .ss{color:#718c00}.highlight .bp{color:#4d4d4c}.highlight .vc{color:#c82829}.highlight .vg{color:#c82829}.highlight .vi{color:#c82829}.highlight .il{color:#f5871f}

@media (prefers-color-scheme: dark) {
  pre {
    border: 0;
  }

  .highlight, .highlight span, .highlight pre, code, pre {
    background-color:#383c40;
    color: #f8f8f2;
  }

  .highlight .hll{background-color:#272822}.highlight .c{color:#777}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .c1{color:#777}.highlight .cs{color:#777}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .il{color:#ae81ff}.highlight .gu{color:#777}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
}

nav.pagination {
  text-align: center;
  margin-bottom: 2em;
}

nav.pagination a {
  padding: 2px 6px;
  margin-right: 0.2em;
  text-decoration: none;
  border: 0;
}

nav.pagination a:hover {
  text-decoration: underline;
}

nav.pagination a[rel=next]:hover, nav.pagination a[rel=prev]:hover {
  background: none;
  text-decoration: underline;
  color: var(--link-foreground);
}

nav.pagination span {
  padding: 2px 6px;
  margin-right: 0.2em;
}

nav.pagination span.gap {
  padding: 2px;
  color: #676767;
}

nav.pagination span.disabled {
  color: #aaa;
}

nav.pagination em {
  padding: 4px 8px;
}

@media all and (max-width: 660px) {
  nav.pagination a, nav.pagination span.gap {
    display: none;
    margin: 0
  }

  nav.pagination a.prev, nav.pagination a.next {
    display: inline
  }
}

.photo-post {
  display: inline-block;
  font-size: 0.75em;
  border: 0;
  text-decoration: none;
  padding-top: 0.125em;
}

.photo-post path {
  fill: var(--link-foreground);
}

.photo-post:hover {
  border: 0;
}

photo-row + p {
  margin-top: 1em;
}

/* ---- Table ---- */

article table {
  text-align: left;
  border: 1px solid var(--table-border);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1em;
}

article th, article td {
  padding: 0.3em 0.5em;
  border-right: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
}

article th {
  background: var(--table-header);
  font-weight: var(--semibold-font-weight);
}

/* ---- Resume ---- */

ul.apps {
  margin: 3rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

@media all and (max-width: 660px) {
  ul.apps {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-column-gap: auto;
    width: 288px;
    margin-left: auto;
    margin-right: auto;
  }
}

ul.apps a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  margin: 0 auto;
  text-decoration: none;
  border: 0;
}

ul.apps a:hover {
  border: 0;
}

ul.apps span {
  font-family: 'HelveticaNeue', Helvetica, sans-serif;
  font-size: 14px;
  display: block;
  width: 100%;
  height: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 1em;
  padding: 8px 0 0;
  color: #888;
}

@media all and (max-width: 660px) {
  ul.apps span {
    font-size: 13px;
  }
}

ul.apps img {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), inset 0 0 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media all and (max-width: 660px) {
  ul.apps img {
    border-radius: 15px;
  }
}

ul.apps li {
  list-style: none;
}

ul.apps li.mac {
  border-radius: 0;
}

ul.apps li.mac img {
  border-radius: 0;
  box-shadow: none;
}

/* ---- Plan ---- */

.plan {
  --plan-card: #f6f6f7;
  --plan-rail: #e4e4e7;
  --plan-month: #a1a1aa;
  --plan-muted: #71717a;
}

@media (prefers-color-scheme: dark) {
  .plan {
    --plan-card: #1b1b1d;
    --plan-rail: #2c2c30;
    --plan-month: #71717a;
    --plan-muted: #a1a1aa;
  }
}

/* Each activity type sets a hue. The badge and dot colors derive from it.
   The homepage colors its pills and chips the same way with `data-type`. */
.plan ol.timeline > li, .home [data-type] {
  --hue: 240;
  --saturation: 0%;
  --type: hsl(var(--hue) var(--saturation) 34%);
  --type-background: hsl(var(--hue) var(--saturation) 92%);
}

@media (prefers-color-scheme: dark) {
  .plan ol.timeline > li, .home [data-type] {
    --type: hsl(var(--hue) var(--saturation) 72%);
    --type-background: hsl(var(--hue) var(--saturation) 17%);
  }
}

.plan ol.timeline > li.scuba, .home [data-type="scuba"] { --hue: 185; --saturation: 85%; }
.plan ol.timeline > li.flight, .home [data-type="flight"] { --hue: 218; --saturation: 80%; }
.plan ol.timeline > li.hiking, .home [data-type="hiking"] { --hue: 145; --saturation: 60%; }
.plan ol.timeline > li.family, .home [data-type="family"] { --hue: 340; --saturation: 70%; }
.plan ol.timeline > li.van, .home [data-type="van"] { --hue: 25; --saturation: 85%; }
.plan ol.timeline > li.travel, .home [data-type="travel"] { --hue: 262; --saturation: 65%; }
.plan ol.timeline > li.concert, .home [data-type="concert"] { --hue: 305; --saturation: 60%; }
.plan ol.timeline > li.wedding, .home [data-type="wedding"] { --hue: 0; --saturation: 70%; }
.plan ol.timeline > li.party, .plan ol.timeline > li.holiday, .home [data-type="party"], .home [data-type="holiday"] { --hue: 42; --saturation: 90%; }

.plan > header {
  margin-bottom: 3em;
}

.plan > header p {
  color: var(--plan-muted);
  font-size: 1em;
  line-height: 1.5em;
  max-width: 34em;
}

.plan ol.timeline {
  position: relative;
  margin: 16px 0;
}


.plan ol.timeline > li {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0 0 12px 32px;
}

.plan ol.timeline > li:last-child {
  padding-bottom: 0;
}

/* Rail */
.plan ol.timeline > li:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: var(--plan-rail);
}

/* The rail fades to a dashed stub for 16px past each end. */
.plan ol.timeline:before, .plan ol.timeline:after {
  content: "";
  position: absolute;
  left: 6px;
  width: 2px;
  height: 16px;
  background: repeating-linear-gradient(to bottom, var(--plan-rail) 0 4px, transparent 4px 8px);
}

.plan ol.timeline:before {
  bottom: 100%;
}

.plan ol.timeline:after {
  top: 100%;
}

/* A single day is a dot on the rail. */
.plan ol.timeline > li:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 1px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--type);
  border-radius: 6px;
  background: var(--type);
  box-shadow: 0 0 0 3px var(--body-background);
}

/* A span is a bar running the height of its card. */
.plan ol.timeline > li.span:after {
  top: 3px;
  bottom: 15px;
  left: 3px;
  width: 8px;
  height: auto;
}

.plan ol.timeline > li.span:last-child:after {
  bottom: 3px;
}

/* Anything not locked in is hollow and dashed, like its card. */
.plan ol.timeline > li.tentative:after, .plan ol.timeline > li.loose:after {
  background: var(--body-background);
  border-style: dashed;
}

/* Month dividers sit in the event column, with the rail running past them. */
.plan ol.timeline > li.month {
  padding-top: 2em;
  padding-bottom: 1em;
}

.plan ol.timeline > li.month:first-child {
  padding-top: 0;
}

.plan ol.timeline > li.month:after {
  display: none;
}

/* A small label with a hairline in the rail's color. */
.plan li.month h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--plan-month);
  font-size: 0.8em;
  line-height: 1.5em;
}

.plan li.month h3:after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--plan-rail);
}

.plan li.month p {
  color: var(--plan-muted);
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 0;
}

/* Today, added by the script at the bottom of plan.html. */
.plan ol.timeline > li.today {
  --type: var(--brand-color);
  padding-bottom: 14px;
}

.plan ol.timeline > li.today:after {
  top: 4px;
}

.plan li.today div {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
  color: var(--brand-color);
  font-size: 0.7em;
  font-weight: var(--bold-font-weight);
  letter-spacing: 0.04em;
  line-height: 20px;
  text-transform: uppercase;
}

.plan li.today div:after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-color);
}

.plan .card {
  padding: 2px 0 8px;
}

.plan li.span .card {
  background: var(--plan-card);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px 18px 16px;
}

/* A span that isn't locked in gets a dashed outline instead of a fill. */
.plan li.span.tentative .card, .plan li.span.loose .card {
  background: transparent;
  border: 1px dashed var(--plan-rail);
}

/* Line a day's badge up with the badges inside the cards around it. */
.plan li.day .meta {
  padding-right: 19px;
}

.plan .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.4em;
}

.plan time {
  color: var(--plan-muted);
  font-size: 0.75em;
  font-weight: var(--bold-font-weight);
  font-variant-numeric: tabular-nums;
}

.plan .type {
  flex-shrink: 0;
  color: var(--type);
  background: var(--type-background);
  border-radius: 999px;
  font-size: 0.65em;
  font-weight: var(--bold-font-weight);
  line-height: 1em;
  padding: 5px 9px;
}

.plan .card h4 {
  color: var(--h1-foreground);
  font-size: 1.1em;
  line-height: 1.3em;
  margin: 0;
}

.plan .card h4 svg {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3em;
  vertical-align: -0.1em;
  fill: var(--type);
}

.plan .card p {
  color: var(--plan-muted);
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 2px 0 0;
}

.plan .card p.location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan .card p.location svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.plan .card ul {
  margin: 8px 0 0;
}

.plan .card ul li {
  list-style: none;
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 0;
}

.plan .card ul li + li {
  margin-top: 6px;
}

/* ---- Home ---- */

body.home {
  --card-background: #f6f6f7;
  --card-rail: #e4e4e7;
  --card-muted: #71717a;
}

@media (prefers-color-scheme: dark) {
  body.home {
    --card-background: #1b1b1d;
    --card-rail: #2c2c30;
    --card-muted: #a1a1aa;
  }
}

body.home main {
  max-width: 1056px;
  margin: 3em auto 0;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  box-sizing: border-box;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "about about now adventure"
    "gallery gallery gallery gallery"
    "years years years previously";
  gap: 16px;
}

@media all and (max-width: 899px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "about about"
      "now adventure"
      "gallery gallery"
      "years previously";
  }
}

@media all and (max-width: 599px) {
  body.home main {
    margin-top: 16px;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "about" "now" "adventure" "gallery" "years" "previously";
    gap: 12px;
  }
}

.bento .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--card-background);
  color: var(--body-foreground);
  font-size: 0.85em;
  line-height: 1.5em;
}

.bento [hidden] {
  display: none !important;
}

.bento a.card, .bento a.card:hover {
  border-bottom: 1px solid transparent;
}

.bento .label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.6em;
  color: var(--card-muted);
  font-size: 0.9em;
  font-weight: var(--semibold-font-weight);
  line-height: 1.3em;
}

.bento .label svg {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}

.bento h2 {
  color: var(--h1-foreground);
  font-size: 1.4em;
  line-height: 1.2em;
}

.bento p {
  margin: 0;
}

.bento ul li {
  list-style: none;
}

.bento .footnote {
  margin-top: auto;
  padding-top: 1em;
  color: var(--card-muted);
  font-size: 0.85em;
}

.bento .footnote a {
  color: var(--card-muted);
}

.bento .footnote a:hover {
  color: var(--link-foreground);
}

/* A small colored badge, like the ones on /plan */
.bento .type {
  flex-shrink: 0;
  color: var(--type);
  background: var(--type-background);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: var(--bold-font-weight);
  line-height: 1em;
  padding: 5px 9px;
}

/* About */

.bento .about {
  grid-area: about;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
  padding: 24px;
}

.bento .about .avatar {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.bento .about h1 {
  color: var(--brand-color);
  font-size: 1.8em;
  margin: 0 0 0.4em;
}

.bento .about .more {
  margin-top: 0.5em;
}

.bento .socials {
  display: flex;
  flex-wrap: wrap;
  margin: 0.75em 0 0 -6px;
}

.bento .socials a {
  display: block;
  padding: 6px;
  color: var(--light-link-foreground);
  border: 0;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.bento .socials a:hover {
  color: var(--brand, var(--link-foreground));
  border: 0;
}

.bento .socials svg {
  display: block;
  width: 24px;
  height: 24px;
}

@media all and (max-width: 599px) {
  .bento .about {
    flex-direction: column;
    gap: 16px;
  }

  .bento .about .avatar {
    width: 88px;
    height: 88px;
  }
}

/* Now / Next */

.bento .now {
  grid-area: now;
}

.bento .now dl > div + div {
  margin-top: 1.25em;
}

.bento .now dt.label {
  margin-bottom: 0.3em;
}

.bento .now dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.bento .now .place {
  color: var(--h1-foreground);
  font-size: 1.2em;
  font-weight: var(--bold-font-weight);
  line-height: 1.3em;
}

.bento .now .when {
  flex-basis: 100%;
  color: var(--card-muted);
}

/* Next adventure, tinted with its type */

.bento .adventure {
  grid-area: adventure;
  background: var(--type-background);
}

.bento .adventure.tentative {
  background: transparent;
  border: 1px dashed var(--card-rail);
}

.bento .adventure .label {
  color: var(--type);
}

.bento .adventure h2 {
  font-size: 1.25em;
  line-height: 1.3em;
}

.bento .adventure .place {
  margin-top: 0.25em;
  color: var(--card-muted);
}

.bento .adventure .when {
  margin-top: auto;
  padding-top: 1em;
  color: var(--type);
  font-weight: var(--bold-font-weight);
}

.bento .adventure .progress {
  margin-top: 1em;
}

.bento .adventure .progress div {
  height: 8px;
  border-radius: 999px;
  background: var(--card-rail);
  overflow: hidden;
}

.bento .adventure .progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--type);
}

.bento .adventure .progress p {
  margin-top: 0.4em;
  color: var(--card-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* Latest gallery */

.bento .gallery {
  grid-area: gallery;
  padding: 0;
  overflow: hidden;
}

.bento .gallery .hero {
  position: relative;
  flex: 1;
  min-height: 320px;
}

.bento .gallery .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento .gallery .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 24px 18px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
}

.bento .gallery .caption .label {
  margin-bottom: 0.2em;
  color: rgba(255, 255, 255, 0.8);
}

.bento .gallery .caption h2 {
  color: #fff;
  font-size: 2em;
}

.bento .gallery .caption p {
  margin-top: 0.3em;
  font-weight: var(--semibold-font-weight);
}

/* Edge to edge under the hero. The card's corners round off the bottom. */
.bento .gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding-top: 3px;
}

.bento .gallery .thumbs li {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.bento .gallery .thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento .gallery .thumbs li[data-more]:after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.3em;
  font-weight: var(--bold-font-weight);
}

@media all and (max-width: 599px) {
  .bento .gallery .hero {
    min-height: 240px;
  }
}

/* Interests. Not on the homepage right now, but kept for later. */

.bento .interests {
  grid-area: interests;
}

.bento .interests ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bento .interests li {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--type, var(--body-foreground));
  background: var(--type-background, var(--body-background));
  font-size: 0.9em;
  font-weight: var(--bold-font-weight);
  line-height: 1.3em;
}

/* Previously */

.bento .previously {
  grid-area: previously;
  container-type: inline-size;
}

/* The column count follows the card's width so the rows stay full. Three
   across shows three rows and four across shows two. Anything past that is
   hidden, so the order in home.yml is the priority. */
.bento .previously ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bento .previously li:nth-child(n+10) {
  display: none;
}

@container (min-width: 250px) {
  .bento .previously ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 300px;
  }

  .bento .previously li:nth-child(n+9) {
    display: none;
  }
}

.bento .previously img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--card-rail);
}

.bento .previously .summary {
  margin-top: 1em;
  color: var(--card-muted);
}

/* The whole card is the link, so its footnote lights up like a real one when
   anywhere on the card is hovered. */
.bento .previously .arrow {
  border-bottom: 1px solid transparent;
  transition: border 0.2s;
}

.bento a.previously:hover .arrow {
  color: var(--link-foreground);
  border-bottom-color: currentColor;
}

/* Years in review */

.bento .years {
  grid-area: years;
}

/* Always at least three across, with 4:3 covers. */
.bento .years > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(90px, calc((100% - 16px) / 3)), 1fr));
  gap: 8px;
}

.bento .years a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  container-type: inline-size;
}

.bento .years a:hover {
  border: 0;
}

.bento .years .hero {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bento .years img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento .years .hero img {
  position: absolute;
  inset: 0;
}

.bento .years .hero span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 6px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-weight: var(--bold-font-weight);
}

/* When the card is wide enough, the years stretch to fill the row and two
   rows of photos from each one fill the space, like the latest photos card.
   Narrow years show two across and wide ones three, with the last one saying
   how many more there are. */
.bento .years .strip {
  display: none;
}

/* Beside Previously but too narrow for photo rows, the years stack as wide
   banners that share the card's height. */
@media all and (min-width: 600px) and (max-width: 723px) {
  .bento .years > ul {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
  }

  .bento .years a {
    height: 100%;
    min-height: 64px;
    aspect-ratio: auto;
  }
}

@media all and (min-width: 724px) {
  .bento .years > ul {
    flex: 1;
  }

  .bento .years a {
    height: 100%;
  }

  .bento .years .strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .bento .years .strip li {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .bento .years .strip li:nth-child(n+5) {
    display: none;
  }

  .bento .years .strip li[data-more-narrow]:after {
    content: attr(data-more-narrow);
  }

  @container (min-width: 180px) {
    .bento .years .strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bento .years .strip li:nth-child(n+5) {
      display: block;
    }

    .bento .years .strip li[data-more-narrow]:after {
      content: none;
    }

    .bento .years .strip li[data-more-wide]:after {
      content: attr(data-more-wide);
    }
  }

  .bento .years .strip li:after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.9em;
    font-weight: var(--bold-font-weight);
  }
}

/* From the blog. Not on the homepage right now, but kept for later. */

.bento .recent {
  grid-area: recent;
}

.bento .recent li + li {
  margin-top: 0.75em;
}

.bento .recent li a {
  color: var(--h1-foreground);
  font-weight: var(--semibold-font-weight);
}

.bento .recent li a:hover {
  color: var(--link-foreground);
}

.bento .recent time {
  display: block;
  color: var(--card-muted);
  font-size: 0.85em;
}