/* ==========================================================================
   Flourish Theme - Based on Decode theme with decode-flourish customizations
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Page-level sizes are rem so they resolve against the reader's browser font
   setting rather than compounding down the tree; em is kept for anything that
   should scale with its own parent (icons, padding, small print). */
body, button, input, select, textarea {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #4C4C4C;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  body, button, input, select, textarea {
    font-size: 1.125rem;
  }

  /* Mobile Safari zooms the viewport when a focused input is under 16px. */
  .header-search .search-field {
    font-size: 1rem;
  }
}

textarea {
  font-size: 0.8em;
}

a {
  color: #00B0CC;
  text-decoration: none;
  font-weight: 700;
}

a:hover,
a:focus {
  color: #008094;
  text-decoration: underline;
}

a:visited {
  color: #008094;
}

/* In-page links (e.g. the CV summary) jump down the page rather than off it,
   so mark them with an arrow and a quieter, contents-list style. */
.site-content a[href^="#"],
.site-content a[href^="#"]:visited {
  color: #4C4C4C;
  font-weight: 400;
  border-bottom: 1px dotted #00B0CC;
}

.site-content a[href^="#"]::after {
  content: "\2193";
  margin-left: 0.15em;
  font-size: 0.85em;
  color: #00B0CC;
}

.site-content a[href^="#"]:hover,
.site-content a[href^="#"]:focus {
  color: #008094;
  text-decoration: none;
  border-bottom-style: solid;
}

/* Mark where an in-page link landed, so the jump has a visible endpoint. */
.site-content :target {
  scroll-margin-top: 1.5rem;
  background: rgba(0, 176, 204, 0.10);
  box-shadow: -0.5rem 0 0 rgba(0, 176, 204, 0.10), 0.5rem 0 0 rgba(0, 176, 204, 0.10);
  border-left: 3px solid #00B0CC;
  padding-left: 0.5rem;
  margin-left: -0.8rem;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  clear: both;
  margin: 0;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.entry-content h1 { font-size: 2em; }
.entry-content h2 { font-size: 1.65em; }
.entry-content h3 { font-size: 1.35em; }
.entry-content h4 { font-size: 1.15em; }
.entry-content h5 { font-size: 1em; }

h1 { font-size: 2em; }
h2 { font-size: 1.65em; }
h3 { font-size: 1.376em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.125em; }

blockquote {
  border-left: 3px solid #00B0CC;
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  color: #666;
}

pre, code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.85em;
}

pre {
  background: #f5f5f5;
  padding: 1em;
  overflow-x: auto;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 2em 0;
}

/* ---------- Layout ---------- */
/* ~85 characters per line at the body size above, which keeps roughly the
   same measure the site had at the old larger type. */
.site {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-content {
  display: flex;
  gap: 2em;
  padding-bottom: 3em;
}

#primary {
  flex: 1;
  min-width: 0;
}

/* ---------- Header ---------- */
.site-header {
  padding: 3.5% 0 2.5%;
  border-bottom: 1px solid #00B0CC;
  margin-bottom: 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75em;
  font-size: 0.9em;
}

.site-title {
  font-size: 1.5em;
  line-height: 1;
  margin: 0 0 0.5%;
}

.site-title a {
  color: #4C4C4C;
  text-decoration: none;
  -webkit-font-smoothing: subpixel-antialiased;
}

.site-title a:hover {
  color: #00B0CC;
  text-decoration: none;
}

.site-title a:visited {
  color: #4C4C4C;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

/* ---------- Navigation ---------- */
.header-menu {
  margin: 0;
}

.header-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5em;
}

.header-menu a,
.header-menu a:visited {
  color: #4C4C4C;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.25s;
}

.header-menu a:hover {
  color: #00B0CC;
  text-decoration: none;
}

/* ---------- Social Comments ---------- */
.social-comments .social-comment.is-quote > .comment-body {
  border-left: 3px solid #E0E0E0;
  padding-left: 0.75em;
}
.social-comments-cta {
  color: #8C8C8C;
  font-size: 0.95em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  /* Collapses with the last comment's 0.6em, so the buttons sit the same
     distance below the final separator as comments do below theirs. */
  margin-top: 0.6em;
}
.social-comments-cta .reply-cta-lead {
  flex: 1 1 14em;
}
.social-comments-cta .reply-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.social-comments-cta .reply-button {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.5em 1em;
  border-radius: 3px;
  border: 1px solid #00B0CC;
  background: #00B0CC;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.social-comments-cta .reply-button:hover {
  background: #009ab3;
  border-color: #009ab3;
}

/* ---------- Header Search ---------- */
.header-search {
  display: flex;
}

.header-search .search-field {
  width: 8em;
  padding: 0.3em 0.6em;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: 400;
  transition: width 0.2s ease;
}

.header-search .search-field:focus {
  width: 16em;
  border-color: #00B0CC;
  outline: none;
}

.search-form {
  display: flex;
  gap: 0.5em;
}

.search-field {
  flex: 1;
  padding: 0.4em 0.6em;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.9em;
}

.entry-header {
  margin: 5% auto 3.5%;
}

.entry-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

.entry-date {
  color: #8C8C8C;
  font-size: 0.85em;
  white-space: nowrap;
}


/* ---------- Posts ---------- */
article.post {
  margin-bottom: 2.5%;
  padding-bottom: 2.5%;
  border-bottom: 1px solid silver;
}

article.post:last-child {
  border-bottom: none;
}

.entry-title {
  font-size: 1.5em;
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
}

h1.entry-title {
  font-size: 2em;
}

.entry-title a {
  color: #00B0CC;
  text-decoration: none;
  transition: color 0.25s;
}

.entry-title a:hover {
  color: #008094;
}

.entry-title a:visited {
  color: #008094;
}

.entry-content {
  margin-top: 1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.entry-content img {
  margin: 1em 0;
  height: auto;
}

/* Posts carry hard width="400" attributes on floated images. Capping them
   against the column instead keeps a readable run of text alongside, whatever
   the column happens to be. */
/* A panorama is a useless sliver when squeezed to column width, so give it a
   fixed height at its natural aspect ratio and let the reader scroll sideways
   through it. tabindex on the container makes that work by keyboard too. */
.entry-content .panorama {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 1em 0;
}

.entry-content .panorama img {
  display: block;
  margin: 0;
  max-width: none;
  width: auto;
  height: 400px;
  cursor: ew-resize;
}

@media (max-width: 767px) {
  .entry-content .panorama img {
    height: 240px;
  }
}

.entry-content img.alignleft,
.entry-content img[align=left],
.entry-content img.alignright,
.entry-content img[align=right] {
  max-width: 38%;
}

.entry-content img.alignleft,
.entry-content img[align=left] {
  float: left;
  margin-right: 1.5em;
}

.entry-content img.alignright,
.entry-content img[align=right] {
  float: right;
  margin-left: 1.5em;
}

/* Too narrow for text beside a float, so give the image its own line. */
@media (max-width: 767px) {
  .entry-content img.alignleft,
  .entry-content img[align=left],
  .entry-content img.alignright,
  .entry-content img[align=right] {
    float: none;
    display: block;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.read-more {
  font-weight: bold;
}

/* ---------- Pagination ---------- */
.posts-navigation {
  margin: 2em 0;
  padding: 1em 0;
  border-top: 1px solid #eee;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

.post-nav {
  padding: 1em 0;
}

.nav-previous, .nav-next {
  max-width: 45%;
}

.nav-next {
  text-align: right;
  margin-left: auto;
}

/* ---------- Subscribe ---------- */
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  max-width: 28em;
}

.subscribe-field {
  font-family: inherit;
  font-weight: 300;
  font-size: 1em;
  padding: 0.5em 0.75em;
  border-radius: 3px;
  border: 1px solid #ddd;
  /* The input's default intrinsic width (size=20) is wider than a narrow
     phone screen; without min-width:0 flex refuses to shrink it and the
     button is pushed off the page. */
  flex: 1 1 12em;
  min-width: 0;
  background: #fff;
  max-width: 100%;
}

.subscribe-field:focus {
  border-color: #00B0CC;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 176, 204, 0.15);
}

.subscribe-btn {
  font-family: inherit;
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 3px;
  border: 1px solid #00B0CC;
  background: #00B0CC;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.subscribe-btn:hover {
  background: #009ab3;
  border-color: #009ab3;
}

@media (max-width: 767px) {
  /* Below this the two fields no longer fit side by side, so stack them. */
  .subscribe-form {
    flex-direction: column;
    align-items: stretch;
  }

  /* flex-basis is the *height* once the form is a column, so drop back to
     auto or the field grows 12em tall. */
  .subscribe-field {
    flex: 0 0 auto;
  }
}

/* ---------- Comments ---------- */
.comments-area {
  margin-top: 3em;
  padding-top: 0;
}

.comments-title {
  font-size: 1.4em;
  margin-bottom: 1em;
  color: #8C8C8C;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  margin-bottom: 0.6em;
  padding-bottom: 0.6em;
}
.comment-list > .comment {
  border-bottom: 1px solid #f0f0f0;
}
.children .comment {
  border-bottom: none;
}
/* A comment's own padding-bottom and margin-bottom sit below its nested
   children ol, so every level of nesting adds another gap under the last
   reply. Suppress wherever there is nesting, so the space below a thread is
   the same however deep it goes. The top-level margin-bottom stays, to keep
   the gap under the separator line. */
.comment:has(> .children) {
  padding-bottom: 0;
}
.children .comment:has(> .children) {
  margin-bottom: 0;
}
/* Likewise the last reply in a thread, so a threaded comment ends the same
   distance above the separator as an unthreaded one. */
.children > .comment:last-child {
  margin-bottom: 0;
}
.children {
  margin-bottom: 0.6em;
}

.comment-author.vcard img {
  height: auto;
  vertical-align: -7px;
  margin-right: 5px;
  border-radius: 50%;
}

.comment-author .fn {
  font-weight: bold;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}
.comment-metadata {
  font-size: 0.75em;
  color: #B0B0B0;
  margin-top: 0;
  flex-shrink: 0;
}
.comment-metadata a {
  color: inherit;
  font-weight: inherit;
}

.comment-content {
  margin-top: 0.75em;
}
.comment-content p:last-child {
  margin-bottom: 0;
}

.children {
  list-style: none;
  padding-left: 2em;
  margin: 1em 0 0;
}

@media (max-width: 767px) {
  .comment-list {
    padding-left: 0;
    margin-left: 20px;
  }
}

/* ---------- Pages ---------- */
.page-title {
  font-size: 2em;
  margin-top: 0.875em;
  margin-bottom: 0.375em;
}

/* Print-only furniture: the CV's contact line (the Contact section at the
   foot of the page already says this on screen) and the source URL under the
   masthead. Both are revealed in the print block at the end of this file. */
.print-contact,
.print-source {
  display: none;
}

/* ---------- Blog Archive Page ---------- */
.archive-year {
  font-size: 1.3em;
  margin-top: 1.5em;
  margin-bottom: 0.3em;
}

.archive-list {
  list-style: none;
  padding: 0;
}

.archive-list li {
  padding: 0.2em 0;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.archive-list li a {
  font-weight: 400;
}

.archive-date {
  color: #8C8C8C;
  font-size: 0.85em;
  margin-left: 1em;
  white-space: nowrap;
}

#search {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* ---------- Front Page ---------- */
#front-page * {
  box-sizing: border-box;
}

#front-page h3 {
  padding-top: 1em;
  margin-bottom: 0.5em;
  clear: both;
}

#front-page .i {
  width: 48%;
  object-fit: contain;
  margin: auto auto;
  position: relative;
  margin-bottom: 1em;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#front-page .i:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Matches .site's max-width: below this the container is too narrow to hold
   two thumbnails side by side. */
@media screen and (max-width: 56rem) {
  #front-page .i {
    width: 98%;
  }
}

#front-page .i img {
  margin: 0;
  width: 100%;
}

#front-page .i span {
  position: absolute;
  padding: 0.4em 0.5em;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.75);
  text-shadow: none;
  font-size: 1rem;
}

#front-page .i span .ext {
  font-style: normal;
  font-size: 1.1em;
  font-weight: bold;
  opacity: 0.85;
}

#front-page .l {
  float: left;
  margin-right: 1em;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ---------- Clearing ---------- */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ---------- WordPress Caption Compat ---------- */
.wp-caption {
  max-width: 100%;
  margin: 1em 0;
}

.wp-caption img {
  display: block;
  margin: 0;
}

.wp-caption-text {
  font-size: 0.85em;
  color: #8C8C8C;
  margin-top: 0.5em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

/* ---------- Responsive ---------- */
@media (max-width: 50em) {
  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
    /* On the narrowest phones the search box drops to its own line rather
       than being squeezed down to a stub. */
    flex-wrap: wrap;
    row-gap: 0.5em;
  }

  /* On a 320px screen the nav plus a fixed-width search box overflows the
     viewport, so let the search box shrink to whatever is left over. */
  .header-search {
    min-width: 0;
  }

  .header-search .search-field {
    width: 8em;
    min-width: 0;
    max-width: 100%;
  }

  .header-search .search-field:focus {
    width: 10em;
  }

  .page-title {
    margin-top: 0.25em;
  }

  .entry-header-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5em;
  }
}

/* ---------- Print ---------- */
/* Two layers. The baseline makes any page of the site print sanely: screen
   type is far too big on paper, and navigation is dead weight in ink. The
   .cv block on top of it turns the CV into a document that can be sent to an
   employer — no site branding, tighter rhythm, contact details up top. */
@media print {
  @page {
    size: A4;
    margin: 14mm 15mm;
  }

  body, button, input, select, textarea {
    font-size: 10.5pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }

  /* Navigation, search and anything interactive is dead weight on paper. */
  .skip-link,
  .header-menu,
  .header-search,
  .comments-area,
  .post-nav,
  .posts-navigation,
  .subscribe-form {
    display: none !important;
  }

  .site {
    max-width: none;
    padding: 0;
  }

  .site-content {
    display: block;
    padding-bottom: 0;
  }

  /* A printed page has no address bar, so the masthead keeps the site name
     and gains the URL the page came from. */
  .site-header {
    padding: 0 0 0.4em;
    margin-bottom: 1.2em;
    border-bottom: 1px solid #999;
  }

  .header-row {
    display: block;
  }

  .site-title,
  .site-title a,
  .site-title a:visited {
    font-size: 11pt;
    color: #000;
  }

  .print-source {
    display: block;
    margin: 0.15em 0 0;
    font-size: 8.5pt;
    color: #555;
  }

  .entry-header {
    margin: 0 0 1em;
  }

  .page-title,
  h1.entry-title {
    font-size: 18pt;
    margin: 0 0 0.2em;
  }

  .entry-content {
    margin-top: 0.6em;
  }

  .entry-content p {
    margin: 0 0 0.5em;
  }

  /* A heading stranded at the foot of a page is the main way a printed CV
     goes wrong, so keep every heading with the text under it. */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Links stay clickable in a PDF but shouldn't shout in ink. */
  .site-content a,
  .site-content a:visited,
  .site-content a[href^="#"],
  .site-content a[href^="#"]:visited {
    color: #000;
    font-weight: 400;
    text-decoration: none;
    border-bottom: none;
  }

  /* Screen affordances for in-page links — the down arrow, the highlighted
     landing spot — mean nothing on paper. */
  .site-content a[href^="#"]::after {
    content: none;
  }

  .site-content :target {
    background: none;
    box-shadow: none;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  img {
    break-inside: avoid;
  }

  /* ----- CV only (body class set from cv.md front matter) ----- */
  /* This one is a job application, not a web page: it carries its own
     contact line, so the site branding would only be in the way. */
  body.cv .site-header {
    display: none !important;
  }

  body.cv .print-contact {
    display: block;
    margin: 0 0 1em;
    font-size: 9.5pt;
    color: #333;
  }

  body.cv .entry-content h2 {
    font-size: 13pt;
    margin: 1.1em 0 0.35em;
    padding-bottom: 0.15em;
    border-bottom: 1px solid #999;
  }

  body.cv .entry-content h3 {
    font-size: 11pt;
    font-weight: 700;
    margin: 0.9em 0 0.25em;
  }

  body.cv .entry-content ul,
  body.cv .entry-content ol {
    margin: 0.3em 0 0.6em;
    padding-left: 1.2em;
  }

  body.cv .entry-content li {
    margin-bottom: 0.2em;
  }

  /* The section rules double up with the underlined h2s. */
  body.cv .entry-content hr {
    display: none;
  }
}