/* Water — staggered editorial layout */

/*

// START -- THEME INFO //

<p>A staggered editorial layout. Blocks follow a pseudo-random cascade by default. Add any of these to a block's <code>layout</code> variable (e.g. <code>layout: full</code>, <code>layout: large center</code>). Classes can be combined.</p>

<table>
  <thead><tr><th>Class</th><th>Effect</th></tr></thead>
  <tbody>
    <tr><td><code>left</code></td><td>Align block to the left edge</td></tr>
    <tr><td><code>center</code></td><td>Align block to the horizontal center</td></tr>
    <tr><td><code>right</code></td><td>Align block to the right edge</td></tr>
    <tr><td><code>small</code></td><td>Set block width to 30%</td></tr>
    <tr><td><code>medium</code></td><td>Set block width to 50%</td></tr>
    <tr><td><code>large</code></td><td>Set block width to 70%</td></tr>
    <tr><td><code>full</code></td><td>Full-bleed edge-to-edge, ignores page padding</td></tr>
  </tbody>
</table>

<br>

<p>On mobile, all blocks become full width.</p>

// END -- THEME INFO //

*/

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
    /* START -- EDITABLE IN PANEL */
    --text-color: #1a1a1a;
    --link-color: #1a1a1a;
    --background-color: #fff;
    --muted-color: #666666;
    --faint-color: #666666;
    /* END -- EDITABLE IN PANEL */

    --font-body: 'Instrument Sans', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-meta: 'DM Mono', monospace;
    --font-size: 16px;
    --font-size-meta: 11px;
    --font-size-small: 13px;
    --font-size-xs: 10px;
    --body-pad: 36px;
    --block-width: 42%;
    --block-gap: 120px;
}

/* Base */

body {
    font-family: var(--font-body);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    padding: var(--body-pad);
    max-width: none;
    margin: 0;
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link-color); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
}

p { margin: 0.6em 0; }

/* Header */

.site-header { margin-bottom: 48px; }

.site-title {
    font-weight: 500;
    font-size: var(--font-size);
    line-height: 1.3;
    margin: 0;
}

.site-title a { color: var(--link-color); }

.site-title-sep { display: none; }
a.site-title-parent { color: var(--muted-color); font-weight: 400; }
a.site-title-parent:hover { color: var(--link-color); }
.site-title-parent::after { content: '\00a0\00a0'; }
.site-title-current { font-weight: 500; }
.site-meta-sep { display: none; }

.site-description {
    margin-top: 6px;
    color: var(--muted-color);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
}
.site-description hr { margin: 0.5em 0; border: 0; border-top: 1px solid var(--border-color); }
.site-description p { font-size: inherit; line-height: inherit; }

/* Nav — stacked */

.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.site-nav a {
    color: var(--muted-color);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
}

.site-nav a:hover,
.site-nav .active a { color: var(--link-color); text-decoration: none; font-weight: 500; }

.site-meta {
    margin-top: 6px;
    color: var(--muted-color);
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.site-collaborators a { color: var(--link-color); }
.site-meta-sep { color: var(--muted-color); }
.site-rss, .site-guestbook { color: var(--link-color); }

/* Blocks — staggered vertical layout */

.blocks {
    display: flex;
    flex-direction: column;
    gap: var(--block-gap);
    padding: 40px 0;
}

.block {
    width: var(--block-width);
    margin: 0;
    padding: 0;
}

/* Stagger pattern — 7-cycle for pseudo-random feel */
.block:nth-child(7n+1) { align-self: flex-start; margin-left: 3%; width: 50%; }
.block:nth-child(7n+2) { align-self: flex-end; margin-right: 8%; width: 48%; }
.block:nth-child(7n+3) { align-self: center; margin-left: 5%; width: 54%; }
.block:nth-child(7n+4) { align-self: flex-start; margin-left: 12%; width: 46%; }
.block:nth-child(7n+5) { align-self: flex-end; margin-right: 3%; width: 52%; }
.block:nth-child(7n+6) { align-self: center; margin-right: 10%; width: 48%; }
.block:nth-child(7n+7) { align-self: flex-start; margin-left: 8%; width: 55%; }

/* Layout overrides — pure auto margins so same-position blocks always align */
.block.left   { margin-left: 0; margin-right: auto; }
.block.center { margin-left: auto; margin-right: auto; }
.block.right  { margin-left: auto; margin-right: 0; }
.block.small  { width: 30% !important; }
.block.medium { width: 50% !important; }
.block.large  { width: 70% !important; }
.block.full   { width: auto !important; margin-left: calc(-1 * var(--body-pad)) !important; margin-right: calc(-1 * var(--body-pad)) !important; }
.block.full figcaption,
.block.full .block-title,
.block.full .block-meta,
.block.full .block-description,
.block.full .channel-title { padding-left: 12px; padding-right: 12px; }
.block.full.block-text .block-content { padding-left: 12px; padding-right: 12px; }

/* Image */

.block-image img:not(.contributor-avatar) { width: 100%; height: auto; display: block; }
.block-image figcaption {
    display: block;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-top: 10px;
    color: var(--muted-color);
}

/* Channel */

.block-channel .block-content > a {
    display: block;
    text-decoration: none;
}

.block-channel .channel-preview {
    display: block;
    width: 100%;
    height: auto;
}

.block-channel .channel-title {
    display: block;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-top: 10px;
    color: var(--muted-color);
}

/* Channel block with no preview image — show title in bottom-left corner of a square */
.block-channel .block-content > a:not(:has(.channel-preview)) {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1em;
    border: 1px solid var(--muted-color);
    text-align: left;
}
.block-channel .block-content > a:not(:has(.channel-preview)):hover {
    border-color: var(--text-color);
}
.block-channel .block-content > a:not(:has(.channel-preview)) .channel-title {
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--text-color);
    letter-spacing: 0;
    margin-top: 0;
}

/* Text */

.block-text {
    padding: 0;
}

.block-text .block-content { overflow: hidden; }
.block-text .block-content h1,
.block-text .block-content h2,
.block-text .block-content h3,
.block-text .block-content h4,
.block-text .block-content h5,
.block-text .block-content h6 { font-size: inherit; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; margin: 1.2em 0 0.4em; }
.block-text .block-content > :first-child { margin-top: 0; }
.block-text .block-content hr { border: 0; border-bottom: 1px solid var(--muted-color); margin: 1.5em 0; }
.block-text .block-title {
    margin: 0 0 1em;
    font-weight: 500;
    line-height: 1.25;
}
.block-text .block-title a { color: var(--link-color); }
.block-text .block-content a { text-decoration: underline; }
.block-text .block-content ul,
.block-text .block-content ol { padding-left: 1.6em; margin: 0 0 1em; }
.block-text .block-content li { margin-bottom: 0.25em; line-height: 1.5; }
.block-text .block-content blockquote {
    border-left: 1px solid var(--text-color);
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    color: var(--muted-color);
}
.block-text p {
    margin: 0 0 1em;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
}
.block-text p:last-child { margin-bottom: 0; }
.continue-reading { display: none; }

/* Link */

.block-link .block-content > a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.block-link .link-preview { width: 100%; height: auto; }
.block-link .link-title {
    color: var(--link-color);
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.4;
}
.block-link .link-url,
.block-link .link-provider { display: none; }

/* Embed */

.block-embed .embed-container {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.block-embed .embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.block-embed .embed-title { color: var(--muted-color); }

/* Attachment */

.block-attachment { min-height: 60px; }
.block-attachment a { color: var(--link-color); }
.block-attachment .attachment-preview { display: none; }

/* Hidden meta */


.block-meta {
    margin-top: 10px;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--muted-color);
}

.block-contributor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.block-contributor a {
    color: var(--muted-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contributor-name, .block-permalink {
    color: var(--muted-color);
}

.block-contributor a:hover { color: var(--link-color); }

.contributor-avatar {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Block detail */

.block-detail-back {
    position: fixed;
    top: 36px;
    right: 36px;
    color: var(--muted-color);
    font-size: var(--font-size);
    font-weight: 400;
}

.block-detail {
    max-width: 720px;
    margin: 0 auto;
}

.block-detail .block {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    display: block;
}

.block-detail .block-image img { width: auto; max-width: 100%; }
.block-detail .block-image figcaption { display: block; color: var(--muted-color); margin-top: 6px; }

.block-detail .block-text {
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    display: block;
}

.block-detail .block-text .block-content { display: block; }
.block-detail .block-text p {
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.65em;
}

.block-detail-title {
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 36px;
}

.block-meta {
    display: flex;
    gap: 10px;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--faint-color);
    margin-top: 10px;
}
.block-detail .block-description {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-color);
    margin-top: 10px;
}
.block-date { color: var(--faint-color); }
.block-contributor a { color: var(--link-color); }

.block-detail .continue-reading { display: inline-block; color: var(--link-color); }

.block-detail .block-text ul,
.block-detail .block-text ol { padding-left: 1.6em; margin-bottom: 0.7em; }
.block-detail .block-text li { margin-bottom: 0.25em; line-height: 1.5; }
.block-detail .block-text blockquote {
    border-left: 1px solid var(--muted-color);
    padding-left: 1.2em;
    margin: 0 0 0.7em;
    color: var(--muted-color);
    font-style: italic;
}
.block-detail .block-text pre {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    letter-spacing: 0;
    background: var(--background-color);
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 0.7em;
    line-height: 1.5;
}
.block-detail .block-text code {
    font-family: var(--font-meta);
    font-size: 0.9em;
    background: var(--background-color);
    padding: 1px 4px;
}
.block-detail .block-text pre code { background: none; padding: 0; font-size: inherit; }

/* Comments */

.block-comments {
    margin-top: 2rem;
    border-top: 1px solid var(--muted-color);
    opacity: 1;
}

.block-comments-title {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-color);
    margin: 1rem 0 0;
}

.block-comment {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--muted-color);
}

.block-comment-body {
    font-size: var(--font-size);
    line-height: 1.5;
}

.block-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    letter-spacing: 0.02em;
    color: var(--muted-color);
    opacity: 1;
}

.block-comment-author {
    font-weight: 400;
}

.comment-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.block-comments-link {
    margin-top: 0.8rem;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    letter-spacing: 0.02em;
}
.block-comments-link a { color: var(--muted-color); }

/* Pagination */

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
}
.pagination a { color: var(--link-color); }
.page-info { color: var(--muted-color); }

/* Channel layout: page — centered single column */
.page .blocks {
    max-width: 720px;
    margin: 0 auto;
    gap: 40px;
}

.page .block {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mobile */

@media (max-width: 768px) {
    :root { --body-pad: 20px; --block-gap: 50px; --font-size: 14px; --font-size-meta: 10px; }
    .block, .block.small, .block.medium, .block.large, .block.full { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; align-self: stretch !important; }
    .block-detail { max-width: 100%; }
    .block-detail .block-image img { width: 100%; }
    .site-title-parent { display: block; }
    .site-title-parent::after { content: none; }
}