/** CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset/ **/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
   margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
    }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/** Site styling **/
@font-face {
  font-family: "Ubuntu-R";
  font-display: swap;
  src: url('/font/Ubuntu-R.woff2') format('woff');
}

:root {
  --color-dark: #252525;
  --color-light: #fff; /*#efefef;*/
  --color-primary: #1a8fe3;
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);


  --color-articles: #1a8fe3;
  --color-notes: #00b962;
  --color-photos: #e00;
  --color-reviews: #ff8f00;
}

body {
  background: var(--color-light);
  color: var(--color-dark);
  max-width: 768px;
  margin: auto;
  padding: 1.6em 2em 2em;
  font-family: "Ubuntu-R", sans-serif;
  font-size: var(--size-step-0);
  line-height: 1.5;

  > main > * + *, 
  main p, 
  > footer, 
  .home-listing .summary > * + *,
  .e-content > * + *, 
  .h-entry > * + * {
    margin-top: var(--flow-space, 1em);
  }
}

h1 { font-size: var(--size-step-4); }
h2 { font-size: var(--size-step-3); }
h3 { font-size: var(--size-step-2); }
.notes h1, .notes h2, .photos h1, .photos h2 { font-size: var(--size-step-1); }
:is(h1, h2, h3, blockquote, code, hr) { --flow-space: 1.5em; }
:is(h1, h2, h3) + * { --flow-space: 1em; }
blockquote {
  padding-left: 1em;
  border-left: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
  max-width: 50ch;
}
h1,h2,h3,h4,h5,h6 { line-height: 1.1; font-weight: 800; }
h1 { max-width: 20ch; }
h2, h3 { max-width: 28ch; }
.highlight > pre { outline: 0.2em solid; padding: 0.6em; }
.e-content, main p { max-width: 65ch; }
a {
  color: currentColor;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 0.2ex;
  text-underline-offset: 0.3ex;
}
a.u-url, .meta a, .home-listing > li > a {
  color: var(--color-primary);
  text-decoration: none;
}
pre, code {
  overflow: auto;
}
figcaption {
  font-size: 0.8em;
  margin-top: 0.5em;
  line-height: 1.1;
}

header {
  padding-bottom: 1em;
  display: flex;
  justify-content: space-between;

  a {
    text-decoration: none;
  }

  hgroup {
    h1 {
      font-size: var(--size-step-1);
      margin-bottom: 0;
      text-transform: uppercase;
    }
    p { margin: 0; }
  }

  nav ul {
    display: flex;
    /* will come later */
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 100%;
    
    li {
      list-style: none;
      margin: 0 1em 0 0;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

}

footer {
  --flow-space: 5em; 
  padding: 0.5em 0 0.5em 0;
  ul { margin: 0; padding: 0; display: flex; gap: 0.5em; }
  li { list-style: none; }
}


.home-intro {
  a {
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
  }

  svg { 
    display: inline-block;
    stroke-width: 2.2;
    margin: 0 0 -4px 4px;
  }

  .articles {
    color: var(--color-articles);
  }
  .notes {
    color: var(--color-notes);
  }
  .photos {
    color: var(--color-photos);
  }
  .reviews {
    color: var(--color-reviews);
  }
}

.home-listing {
  padding: 0;

  > li { display: flex; flex-direction: column; gap: 1em; margin-top: var(--flow-space, 2em); }
  > li > * { flex: 1; }
  > li > a:nth-of-type(2) { display: none; }
  > li > div { flex-grow: 6; }
  .photo ul, .insta ul { display: flex !important; }
  img, video { max-height: 10em !important; }
  .photo p, .insta p, .u-url { display: none; }
}

.lede {
  font-size: var(--size-step-1);
  font-style: italic;
  max-width: 50ch;
  text-wrap: balance;
}

.lede + * {
    --flow-space: 2em;
}

.h-entry {
  .p-author {
    display: none;
  }

  &.photos ul {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    padding: 0;

    img, video {
      border-radius: 0.25em;
      max-height: 80vh;
    }
  }
}

.pagination { 
  --flow-space: 4em;
  list-style: none; 
  padding: 0;
  display: flex;
  justify-content: center;

  li {
    min-width: 2em;
  }
}


/* Utility classes */
.upper { text-transform: uppercase; }
.bold { font-weight: bold; }
.meta {
  font-family: monospace;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

/* Generated using: hugo gen chromastyles --style trac */

/* Background */ .bg { background-color:#fff; }
/* PreWrapper */ .chroma { background-color:#fff; }
/* Error */ .chroma .err { color:#a61717;background-color:#e3d2d2 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { font-weight:bold }
/* KeywordConstant */ .chroma .kc { font-weight:bold }
/* KeywordDeclaration */ .chroma .kd { font-weight:bold }
/* KeywordNamespace */ .chroma .kn { font-weight:bold }
/* KeywordPseudo */ .chroma .kp { font-weight:bold }
/* KeywordReserved */ .chroma .kr { font-weight:bold }
/* KeywordType */ .chroma .kt { color:#458;font-weight:bold }
/* NameAttribute */ .chroma .na { color:#008080 }
/* NameClass */ .chroma .nc { color:#458;font-weight:bold }
/* NameConstant */ .chroma .no { color:#008080 }
/* NameEntity */ .chroma .ni { color:#800080 }
/* NameException */ .chroma .ne { color:#900;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#555 }
/* NameTag */ .chroma .nt { color:#000080 }
/* NameBuiltin */ .chroma .nb { color:#999 }
/* NameBuiltinPseudo */ .chroma .bp { color:#999 }
/* NameVariable */ .chroma .nv { color:#008080 }
/* NameVariableClass */ .chroma .vc { color:#008080 }
/* NameVariableGlobal */ .chroma .vg { color:#008080 }
/* NameVariableInstance */ .chroma .vi { color:#008080 }
/* NameVariableMagic */ .chroma .vm { color:#008080 }
/* NameFunction */ .chroma .nf { color:#900;font-weight:bold }
/* NameFunctionMagic */ .chroma .fm { color:#900;font-weight:bold }
/* LiteralString */ .chroma .s { color:#b84 }
/* LiteralStringAffix */ .chroma .sa { color:#b84 }
/* LiteralStringBacktick */ .chroma .sb { color:#b84 }
/* LiteralStringChar */ .chroma .sc { color:#b84 }
/* LiteralStringDelimiter */ .chroma .dl { color:#b84 }
/* LiteralStringDoc */ .chroma .sd { color:#b84 }
/* LiteralStringDouble */ .chroma .s2 { color:#b84 }
/* LiteralStringEscape */ .chroma .se { color:#b84 }
/* LiteralStringHeredoc */ .chroma .sh { color:#b84 }
/* LiteralStringInterpol */ .chroma .si { color:#b84 }
/* LiteralStringOther */ .chroma .sx { color:#b84 }
/* LiteralStringRegex */ .chroma .sr { color:#808000 }
/* LiteralStringSingle */ .chroma .s1 { color:#b84 }
/* LiteralStringSymbol */ .chroma .ss { color:#b84 }
/* LiteralNumber */ .chroma .m { color:#099 }
/* LiteralNumberBin */ .chroma .mb { color:#099 }
/* LiteralNumberFloat */ .chroma .mf { color:#099 }
/* LiteralNumberHex */ .chroma .mh { color:#099 }
/* LiteralNumberInteger */ .chroma .mi { color:#099 }
/* LiteralNumberIntegerLong */ .chroma .il { color:#099 }
/* LiteralNumberOct */ .chroma .mo { color:#099 }
/* Operator */ .chroma .o { font-weight:bold }
/* OperatorWord */ .chroma .ow { font-weight:bold }
/* Comment */ .chroma .c { color:#998;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#998;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#998;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#998;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#999;font-weight:bold;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#999;font-weight:bold }
/* CommentPreprocFile */ .chroma .cpf { color:#999;font-weight:bold }
/* GenericDeleted */ .chroma .gd { color:#000;background-color:#fdd }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#a00 }
/* GenericHeading */ .chroma .gh { color:#999 }
/* GenericInserted */ .chroma .gi { color:#000;background-color:#dfd }
/* GenericOutput */ .chroma .go { color:#888 }
/* GenericPrompt */ .chroma .gp { color:#555 }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#aaa }
/* GenericTraceback */ .chroma .gt { color:#a00 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#bbb }