/* Protocollege v0.1 - Base Styles */

:root {
    --color-primary: #0066cc;
    --color-primary-dark: #004499;
    --color-text: #333;
    --color-text-light: hsl(0, 0%, 40%);
    --color-logo: linear-gradient(to right,#ffa60f,#333);
    --color-bg: #ffffff;
    --color-bg-alt: #fff3d9;
    --color-border: #e0e0e0;
    /* From the business cards. */
    --card-gold: #d88f13;
    --card-ink: #6f4b0f;
    --card-grey: #75706c;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: Consolas, monospace;
    --spacing-unit: 1rem;
    --max-width: 1200px;
    --border-radius: 4px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Header */
.site-header {
    background-color: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    padding: var(--spacing-unit) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    text-decoration: none;
    color: var(--color-logo);
}

.site-logo h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600; 
}

.main-nav {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
}

.main-nav a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* Main Content */
.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
    min-height: calc(100vh - 200px);
}

/* Landing Page */
.is-landing .main-content {
    padding-top: 0;
}

.landing-page {
    padding: 0 0 var(--spacing-unit);
}

/* Landing intro: the title, the rotating card questions, and the follow-up
   questions they lead on to. The rules up to "Drawing on scroll" lay out the
   finished diagram; that part then pins it to the screen and draws it as you
   scroll. */
.intro {
    --line: 2px;
    --bend: 14px;
    --header-h: 4.6rem;
    position: relative;
    font-family: "Roboto Mono", var(--font-mono);
}

.intro-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 3rem 0 2.5rem;
    text-align: center;
}

.intro-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 3.5vh, 2rem);
    width: 100%;
}

/* As on the cards, lifted off the page by a crisp shadow down and right. */
.intro-title {
    margin: 0;
    font-size: clamp(1.9375rem, 1.4375rem + 2.5vw, 3.1875rem);
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(to bottom, #e09516, #8c5f17);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(2px 3px 1.5px rgba(111, 75, 15, 0.3));
}

/* Every question sits in the same grid cell, so the block keeps the height
   of the longest and nothing below it moves when they change. */
.rotator {
    --dwell: 4s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.5vh, 1.5rem);
    width: min(100%, 36rem);
}

.rotator-text {
    display: grid;
    width: 100%;
    margin: 0;
    font-size: clamp(1.3rem, 0.95rem + 1.9vw, 2.25rem);
    font-style: italic;
    line-height: 1.35;
    color: var(--card-grey);
}

.rotator-q {
    grid-area: 1 / 1;
    align-self: center;
    white-space: pre-line;
    text-wrap: balance;
    opacity: 0;
    visibility: hidden;
    scale: 0.985;
    filter: blur(6px);
    transition: opacity 0.7s ease, scale 0.7s ease, filter 0.7s ease, visibility 0s linear 0.7s;
}

.rotator-q.is-current {
    opacity: 1;
    visibility: visible;
    scale: 1;
    filter: none;
    transition-delay: 0s;
}

/* Lies over the question, so a click anywhere on it moves on. */
.rotator-next {
    position: absolute;
    inset: -0.75rem -1rem;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
}

.rotator-next:focus-visible {
    outline: 2px solid var(--card-gold);
    outline-offset: 2px;
}

/* A small QR finder pattern: the root of the diagram, and the timer. Its
   ring fills over --dwell, and the script moves on when it is full. */
@property --tick {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

.rotator-clock {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
}

.rotator-clock::before,
.rotator-clock::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.rotator-clock::before {
    inset: 0.375rem;
    background-color: var(--card-ink);
}

.rotator-clock::after {
    inset: 0;
    background: conic-gradient(var(--card-ink) calc(var(--tick) * 1turn), rgba(111, 75, 15, 0.2) 0);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

.rotator-clock.is-ticking::after {
    animation: rotator-tick var(--dwell) linear forwards;
}

.rotator:has(:focus-visible) .rotator-clock::after {
    animation-play-state: paused;
}

@media (hover: hover) {
    .rotator:hover .rotator-clock::after {
        animation-play-state: paused;
    }
}

@keyframes rotator-tick {
    from { --tick: 0; }
    to { --tick: 1; }
}

/* The follow-up questions, taken in turn as on the logo: a line drops from
   the ring into the first box, and each box loops round into the next, the
   boxes stepping right as they go down. The lines are borders. Each box
   carries the half-loop arriving at it (::before), the half leaving it
   (::after) and the arrowhead on its edge (.tree-leaf::before), so the loops
   follow however tall the boxes are. Laid out for three boxes. */
.tree {
    --trunk: 2.25rem;
    --step: 3rem;
    --gap: 1.75rem;
    --tip: 0.6rem;
    position: relative;
    width: 100%;
    padding-top: var(--trunk);
}

/* From the ring down into the first box. */
.tree::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - var(--line) / 2);
    height: var(--trunk);
    border-left: var(--line) solid var(--card-ink);
    transition: border-color 0.2s ease;
}

.tree-branches {
    display: grid;
    gap: var(--gap);
    width: min(100%, 30rem);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.tree-branch {
    position: relative;
    width: calc(100% - 2 * var(--step));
}

.tree-branch:nth-child(2) {
    margin-left: var(--step);
}

.tree-branch:nth-child(3) {
    margin-left: calc(2 * var(--step));
}

.tree-branch::before,
.tree-branch::after {
    position: absolute;
    border: 0 solid var(--card-ink);
    transition: border-color 0.2s ease;
}

/* Out of the first box to the right, round and down... */
.tree-branch:nth-child(1)::after {
    content: "";
    top: calc(50% - var(--line) / 2);
    left: 100%;
    width: calc(2 * var(--step));
    height: calc(50% + var(--line) / 2 + var(--gap) / 2);
    border-top-width: var(--line);
    border-right-width: var(--line);
    border-top-right-radius: var(--bend);
}

/* ...and back into the second from the right. */
.tree-branch:nth-child(2)::before {
    content: "";
    top: calc(var(--gap) / -2);
    left: 100%;
    width: var(--step);
    height: calc(50% + var(--gap) / 2 + var(--line) / 2);
    border-right-width: var(--line);
    border-bottom-width: var(--line);
    border-bottom-right-radius: var(--bend);
}

/* Out of the second to the left, round and down... */
.tree-branch:nth-child(2)::after {
    content: "";
    top: calc(50% - var(--line) / 2);
    right: 100%;
    width: var(--step);
    height: calc(50% + var(--line) / 2 + var(--gap) / 2);
    border-top-width: var(--line);
    border-left-width: var(--line);
    border-top-left-radius: var(--bend);
}

/* ...and into the third from the left. */
.tree-branch:nth-child(3)::before {
    content: "";
    top: calc(var(--gap) / -2);
    right: 100%;
    width: calc(2 * var(--step));
    height: calc(50% + var(--gap) / 2 + var(--line) / 2);
    border-left-width: var(--line);
    border-bottom-width: var(--line);
    border-bottom-left-radius: var(--bend);
}

.tree-leaf {
    position: relative;
    display: block;
    height: 100%;
    padding: 1rem 1.1rem 1.25rem;
    border: var(--line) solid var(--card-ink);
    border-radius: var(--bend);
    background-color: var(--color-bg);
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Arrowheads: a corner of border, turned to point at the box. */
.tree-leaf::before {
    content: "";
    position: absolute;
    width: var(--tip);
    height: var(--tip);
    border: 0 solid var(--card-ink);
    border-width: 0 0 var(--line) var(--line);
    translate: -50% -50%;
    transition: border-color 0.2s ease;
}

.tree-branch:nth-child(1) .tree-leaf::before {
    top: calc(-1 * var(--line) - var(--tip) * 0.7071);
    left: calc(50% + var(--step));
    rotate: -45deg;
}

.tree-branch:nth-child(2) .tree-leaf::before {
    top: 50%;
    left: calc(100% + var(--line) + var(--tip) * 0.7071);
    rotate: 45deg;
}

.tree-branch:nth-child(3) .tree-leaf::before {
    top: 50%;
    left: calc(-1 * var(--line) - var(--tip) * 0.7071);
    rotate: -135deg;
}

/* Where the question leads, set into the bottom edge, clear of the lines. */
.tree-label {
    position: absolute;
    right: 0.8rem;
    bottom: 0;
    translate: 0 50%;
    padding: 0 0.4rem;
    background-color: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--card-ink);
}

.tree-arrow {
    display: inline-block;
    transition: translate 0.2s ease;
}

.tree-question {
    display: block;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.45;
    color: #5f5a56;
}

.tree-leaf:hover,
.tree-leaf:focus-visible {
    border-color: var(--card-gold);
    box-shadow: 0 10px 24px rgba(111, 75, 15, 0.14);
}

.tree-leaf:focus-visible {
    outline: 2px solid var(--card-gold);
    outline-offset: 3px;
}

.tree-leaf:hover .tree-arrow,
.tree-leaf:focus-visible .tree-arrow {
    translate: 3px 0;
}

/* Hovering a question lights up the way to it. */
.tree:has(.tree-leaf:hover)::before,
.tree-branch:has(.tree-leaf:hover)::before,
.tree-branch:has(~ .tree-branch .tree-leaf:hover)::before,
.tree-branch:has(~ .tree-branch .tree-leaf:hover)::after,
.tree-branch:has(~ .tree-branch .tree-leaf:hover) .tree-leaf::before,
.tree-leaf:hover::before,
.tree-leaf:focus-visible::before {
    border-color: var(--card-gold);
}

@media (max-width: 719.98px) {
    .tree {
        --trunk: 1.75rem;
        --step: 1.75rem;
        --gap: 1.4rem;
    }

    .tree-question {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .intro {
        --header-h: 7rem;
    }
}

/* Scroll cue at the foot of the pinned intro. Following it scrolls down to
   the finished diagram, drawing it on the way. */
.intro-hint {
    display: none;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    translate: -50% 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--card-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.intro-hint-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--line) solid currentColor;
    border-radius: 50%;
}

.intro-hint-icon::before {
    content: "";
    position: absolute;
    top: 42%;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border: 0 solid currentColor;
    border-width: 0 0 var(--line) var(--line);
    translate: -50% -50%;
    rotate: -45deg;
    animation: hint-bob 1.6s ease-in-out infinite;
}

.intro-hint:hover,
.intro-hint:focus-visible {
    color: var(--card-gold);
}

.intro-hint:focus-visible {
    outline: 2px solid var(--card-gold);
    outline-offset: 4px;
    border-radius: 8px;
}

@keyframes hint-bob {
    50% { translate: -50% calc(-50% + 0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
    .rotator-q {
        scale: 1;
        filter: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .rotator-clock.is-ticking::after {
        animation: none;
    }
}

/* The header stays out of sight until the page is scrolled. Without
   scroll-driven animations, the script reports the scroll as --scrolled. */
@supports (animation-timeline: scroll()) {
    .is-landing .site-header {
        position: fixed;
        inset: 0 0 auto;
        animation: header-in linear both;
        animation-timeline: scroll(root);
        animation-range: 0 25svh;
    }
}

@supports not (animation-timeline: scroll()) {
    @media (scripting: enabled) {
        .is-landing .site-header {
            position: fixed;
            inset: 0 0 auto;
            animation: header-in 1s linear both paused;
            animation-delay: calc(var(--scrolled, 1) * -1s);
        }
    }
}

/* Keyboard users reaching the menu get to see it. */
.is-landing .site-header:focus-within {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .is-landing .site-header {
        animation-name: header-fade;
    }
}

/* Drawing on scroll. The intro grows taller than the screen and its stage
   pins in place: scrolling through it raises the question, then draws the
   diagram one box at a time and holds it before the events come up. Each
   piece plays between its --from and --to, as fractions of that scroll,
   which --intro-scroll sets the length of. Browsers with scroll-driven
   animations play them on their own; elsewhere (Firefox, for now) the
   script reports the scroll as --progress and the same animations, paused,
   are set to it through their delay. Only where the finished diagram fits
   on one screen: narrow screens need more height, as their header wraps. */
.intro {
    --intro-scroll: 180svh;
}

.intro-hint                          { --from: 0;    --to: 0.04; }
.intro-head                          { --from: 0;    --to: 0.08; }
.tree::before                        { --from: 0.08; --to: 0.18; }
.tree-branch:nth-child(1) .tree-leaf { --from: 0.17; --to: 0.24; }
.tree-branch:nth-child(1)::after     { --from: 0.25; --to: 0.37; }
.tree-branch:nth-child(2)::before    { --from: 0.37; --to: 0.45; }
.tree-branch:nth-child(2) .tree-leaf { --from: 0.44; --to: 0.51; }
.tree-branch:nth-child(2)::after     { --from: 0.52; --to: 0.62; }
.tree-branch:nth-child(3)::before    { --from: 0.62; --to: 0.72; }
.tree-branch:nth-child(3) .tree-leaf { --from: 0.71; --to: 0.78; }

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 720px) and (min-height: 680px),
       (prefers-reduced-motion: no-preference) and (scripting: enabled) and (max-width: 719.98px) and (min-height: 700px) {
    html:has(.intro) {
        scroll-behavior: smooth;
    }

    .intro {
        --head-offset: 7.5rem;
        height: calc(100svh + var(--intro-scroll));
    }

    .intro-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 0;
        padding: var(--header-h) 0 1.25rem;
    }

    /* Where following the scroll cue lands: just after the last box is in. */
    .intro-drawn {
        position: absolute;
        top: calc(var(--intro-scroll) * 0.8);
    }

    .intro-hint {
        display: flex;
        animation-name: hint-out;
    }

    .intro-head {
        animation-name: head-rise;
    }

    .tree-leaf {
        animation-name: leaf-pop;
    }

    .tree::before {
        animation-name: draw-down;
    }

    .tree-branch:nth-child(1)::after {
        animation-name: draw-right-down;
    }

    .tree-branch:nth-child(2)::before {
        animation-name: draw-down-left;
    }

    .tree-branch:nth-child(2)::after {
        animation-name: draw-left-down;
    }

    .tree-branch:nth-child(3)::before {
        animation-name: draw-down-right;
    }

    .intro-hint,
    .intro-head,
    .tree-leaf,
    .tree::before,
    .tree-branch::before,
    .tree-branch::after {
        animation-fill-mode: both;
        animation-timing-function: linear;
    }

    @supports (animation-timeline: view()) {
        .intro {
            view-timeline: --intro block;
        }

        .intro-hint,
        .intro-head,
        .tree-leaf,
        .tree::before,
        .tree-branch::before,
        .tree-branch::after {
            animation-timeline: --intro;
            animation-range: contain calc(var(--from) * 100%) contain calc(var(--to) * 100%);
        }
    }

    @supports not (animation-timeline: view()) {
        .intro-hint,
        .intro-head,
        .tree-leaf,
        .tree::before,
        .tree-branch::before,
        .tree-branch::after {
            animation-duration: 1s;
            animation-play-state: paused;
            animation-delay: calc(clamp(0, (var(--progress, 1) - var(--from)) / (var(--to) - var(--from)), 1) * -1s);
        }
    }

    /* Tabbing into the questions skips to the finished diagram. */
    .intro:has(.tree :focus-visible) .intro-head,
    .intro:has(.tree :focus-visible) .tree-leaf,
    .intro:has(.tree :focus-visible) .tree::before,
    .intro:has(.tree :focus-visible) .tree-branch::before,
    .intro:has(.tree :focus-visible) .tree-branch::after {
        animation: none !important;
    }

    .intro:has(.tree :focus-visible) .intro-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (max-width: 719.98px) and (min-height: 700px) {
    .intro {
        --head-offset: 6rem;
    }
}

@keyframes header-in {
    from { opacity: 0; translate: 0 -100%; pointer-events: none; }
    to { opacity: 1; translate: 0 0; pointer-events: auto; }
}

@keyframes header-fade {
    from { opacity: 0; pointer-events: none; }
    to { opacity: 1; pointer-events: auto; }
}

@keyframes head-rise {
    from { translate: 0 var(--head-offset); }
}

@keyframes hint-out {
    to { opacity: 0; visibility: hidden; }
}

@keyframes leaf-pop {
    from { opacity: 0; scale: 0.9; translate: 0 0.75rem; pointer-events: none; }
    70% { opacity: 1; scale: 1.02; translate: 0 0; }
    to { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
}

/* Lines are drawn by unclipping them in the direction they run. */
@keyframes draw-down {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0); }
}

/* Along the top from the right end, then down the left edge. */
@keyframes draw-left-down {
    0% { clip-path: inset(0 0 calc(100% - var(--line)) 100%); }
    50% { clip-path: inset(0 0 calc(100% - var(--line)) 0); }
    100% { clip-path: inset(0); }
}

/* Along the top from the left end, then down the right edge. */
@keyframes draw-right-down {
    0% { clip-path: inset(0 100% calc(100% - var(--line)) 0); }
    50% { clip-path: inset(0 0 calc(100% - var(--line)) 0); }
    100% { clip-path: inset(0); }
}

/* Down the right edge, then left along the bottom. */
@keyframes draw-down-left {
    0% { clip-path: inset(0 0 100% calc(100% - var(--line))); }
    60% { clip-path: inset(0 0 0 calc(100% - var(--line))); }
    100% { clip-path: inset(0); }
}

/* Down the left edge, then right along the bottom. */
@keyframes draw-down-right {
    0% { clip-path: inset(0 calc(100% - var(--line)) 100% 0); }
    60% { clip-path: inset(0 calc(100% - var(--line)) 0 0); }
    100% { clip-path: inset(0); }
}

.hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero ul {
    list-style: none;
    padding: 0;
    margin: calc(var(--spacing-unit) * 1.5) 0;
}

.hero ul li {
    margin: calc(var(--spacing-unit) * 0.5) 0;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-unit);
    font-weight: 700;
}

.hero > p {
    font-size: 1.25rem;
    color: var(--color-text-light);
    margin-bottom: calc(var(--spacing-unit) * 2);
}


/* Section breaks: --- in markdown gives a plain rule, and --- {.rule-ring}
   one through a finder pattern, like the one under the landing questions. */
hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

.rule-ring {
    position: relative;
    overflow: visible;
    height: 1.25rem;
    margin: 3rem auto 2rem;
    border-top: 0;
    background: linear-gradient(var(--color-border), var(--color-border)) center / 100% 1px no-repeat;
}

.rule-ring::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 0.625rem);
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid var(--card-ink);
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-ink) 0 4px, var(--color-bg) 4.5px);
    box-shadow: 0 0 0 0.5rem var(--color-bg);
}


/* Base image utility */

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

 .small-img {
    max-width: 500px;
    width: 100%;
    height: auto;
  }
  
  .img-rounded {
    border-radius: 12px;
  }
 
  .img-border {
    border: 2px solid #ccc;
  }
  
  .img-shadow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .img-card {
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }

  .img-hover-zoom {
    transition: transform 0.20s ease, box-shadow 0.30s ease;
  }
  .img-hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  }


/* Blog */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
}

.post-header {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--color-border);
}

.post-header h1 {
    margin: 0 0 var(--spacing-unit) 0;
    font-size: 2.5rem;
}

.post-date {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.post-tags {
    margin-top: var(--spacing-unit);
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    flex-wrap: wrap;
}

.post-content {
    margin-top: calc(var(--spacing-unit) * 2);
}

.post-content h2 {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
}

.post-content h3 {
    margin-top: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.post-footer {
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--color-border);
}

/* Wiki Pages */
.wiki-page {
    max-width: 900px;
    margin: 0 auto;
}

.wiki-header {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--color-border);
}

.wiki-header h1 {
    margin: 0 0 var(--spacing-unit) 0;
    font-size: 2.5rem;
}

.wiki-tags {
    margin-top: var(--spacing-unit);
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    flex-wrap: wrap;
}

.wiki-content {
    margin-top: calc(var(--spacing-unit) * 2);
}

.wiki-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.wiki-content a:hover {
    color: var(--color-primary-dark);
}

.wiki-footer {
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--color-border);
}

/* Regular Pages */
.regular-page {
    max-width: 800px;
    margin: 0 auto;
}

.page-header h1 {
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    font-size: 2.5rem;
}

/* Tags */
.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-bg-alt);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    color: var(--color-text);
}

.tag-muted {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
}

/* Events (src/events/) */
.event-list {
    list-style: none;
    margin: 0 0 calc(var(--spacing-unit) * 1.5);
    padding: 0;
    display: grid;
    gap: var(--spacing-unit);
}

.event {
    padding: calc(var(--spacing-unit) * 1.25);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--card-gold);
    border-radius: var(--border-radius);
    text-align: left;
}

.event p {
    margin: 0.25rem 0;
}

.event-title {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.25rem;
}

.event-title a {
    color: inherit;
    text-decoration: none;
}

.event-title a:hover {
    color: var(--color-primary);
}

.event-when,
.event-guest,
.event-pass {
    color: var(--color-text-light);
}

.event-label {
    font-weight: 600;
}

.event-readings {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.event-actions:empty {
    display: none;
}

.event-join {
    font-weight: 600;
}

.event-cancelled .event-title,
.event-cancelled .event-when {
    text-decoration: line-through;
}

.event-back {
    margin-bottom: var(--spacing-unit);
}

/* Library */
[hidden] {
    display: none !important;
}

.library-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.library-count {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

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

.library-item {
    padding: var(--spacing-unit) 0;
    border-bottom: 1px solid var(--color-border);
}

.library-citation {
    margin-top: 0.5rem;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.library-links {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

/* Buttons */
.btn-contribute {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-contribute:hover {
    background-color: var(--color-primary-dark);
}

/* Embed Container */
.embed-container {
    position: relative;
    width: 100%;
    margin: calc(var(--spacing-unit) * 2) 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.embed-container iframe {
    display: block;
    width: 100%;
    border: none;
}

.tldraw-embed {
    min-height: 600px;
}

/* Blog Preview */
.blog-preview-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.blog-preview,
.activity-card {
    margin: 0;
    padding: calc(var(--spacing-unit) * 2);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.15) 0%, rgba(255, 250, 240, 0.1) 100%);
    border: 8px solid rgba(255, 235, 180, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    
    /* Skeuomorphic anaglyph shadow effect */
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        /* Anaglyph effect with offset shadows */
        2px 2px 0 rgba(255, 200, 100, 0.1),
        -2px -2px 0 rgba(100, 150, 255, 0.1);
}

.blog-preview-link:hover .blog-preview,
.activity-link:hover .activity-card,
.activity-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        /* Enhanced anaglyph on hover */
        3px 3px 0 rgba(255, 200, 100, 0.15),
        -3px -3px 0 rgba(100, 150, 255, 0.15);
}

.blog-preview h2,
.activity-card .activity-title {
    margin: 0 0 calc(var(--spacing-unit) * 0.75) 0;
    font-size: 1.5rem;
    color: var(--color-text);
}

.blog-preview-link:hover .blog-preview h2,
.activity-link:hover .activity-card .activity-title {
    color: var(--color-primary);
}

.blog-preview time {
    display: block;
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}

.blog-preview p {
    margin: 0;
    color: var(--color-text);
    line-height: 1.8;
}

/* Protocollage Gallery */
.protocollage-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 1.5);
    margin: calc(var(--spacing-unit) * 2) 0;
}

.protocollage-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.protocollage-item {
    margin: 0;
    padding: var(--spacing-unit);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg);
    
    /* Skeuomorphic anaglyph shadow effect */
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Protocol items - Blue/Teal tint */
.protocol-item {
    background: linear-gradient(135deg, rgba(220, 240, 255, 0.4) 0%, rgba(200, 230, 250, 0.3) 100%);
    border: 6px solid rgba(150, 200, 255, 0.4);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        /* Anaglyph effect with blue tint */
        2px 2px 0 rgba(100, 180, 255, 0.15),
        -2px -2px 0 rgba(150, 200, 255, 0.1);
}

.protocollage-item-link:hover .protocol-item {
    transform: translateY(-3px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        /* Enhanced anaglyph on hover */
        3px 3px 0 rgba(100, 180, 255, 0.2),
        -3px -3px 0 rgba(150, 200, 255, 0.15);
}

/* Case Study items - Green/Amber tint */
.case-study-item {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.4) 0%, rgba(255, 240, 200, 0.3) 100%);
    border: 6px solid rgba(255, 200, 100, 0.4);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        /* Anaglyph effect with amber/yellow tint */
        2px 2px 0 rgba(255, 200, 100, 0.15),
        -2px -2px 0 rgba(255, 220, 150, 0.1);
}

.protocollage-item-link:hover .case-study-item {
    transform: translateY(-3px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        /* Enhanced anaglyph on hover */
        3px 3px 0 rgba(255, 200, 100, 0.2),
        -3px -3px 0 rgba(255, 220, 150, 0.15);
}

.protocollage-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: var(--spacing-unit);
    background-color: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.protocollage-image-placeholder {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.protocollage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.protocollage-item-link:hover .protocollage-image img {
    transform: scale(1.05);
}

.protocollage-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.protocollage-item h3 {
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.protocollage-item-link:hover .protocollage-item h3 {
    color: var(--color-primary);
}

.protocollage-code-name {
    margin: 0;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    color: var(--color-text-light);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Footer */
.site-footer {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: calc(var(--spacing-unit) * 2) 0;
    margin-top: calc(var(--spacing-unit) * 4);
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
}

.footer-nav {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
}

.footer-nav a {
    color: var(--color-text-light);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: var(--spacing-unit);
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .wiki-header h1,
    .post-header h1,
    .page-header h1 {
        font-size: 2rem;
    }

    .protocollage-gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--spacing-unit);
    }

    .protocollage-image {
        height: 150px;
    }
}

/* Mermaid Diagrams */
.mermaid {
    margin: calc(var(--spacing-unit) * 2) 0;
    text-align: center;
}

/* Code Blocks */
pre {
    background-color: var(--color-bg-alt);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--color-bg-alt);
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

pre code {
    background-color: transparent;
    padding: 0;
}


/* Activities */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-unit);
    margin: calc(var(--spacing-unit) * 1.5) 0;
}

.activity-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.activity-card {
    margin: 0;
    height: 100%;
    cursor: default;
    /* Smaller than the blog cards they borrow their look from. */
    padding: calc(var(--spacing-unit) * 1.1);
    border-width: 5px;
    border-radius: 14px;
}

.activity-card .activity-title {
    font-size: 1.15rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.activity-card p {
    font-size: 0.9rem;
}

/* One tint per card, kept faint so the cards stay quiet together. */
.activity-accent-1 {
    background: linear-gradient(135deg, rgba(255, 193, 77, 0.16) 0%, rgba(255, 224, 168, 0.07) 100%);
    border-color: rgba(255, 193, 77, 0.22);
}

.activity-accent-2 {
    background: linear-gradient(135deg, rgba(92, 148, 255, 0.14) 0%, rgba(168, 200, 255, 0.06) 100%);
    border-color: rgba(92, 148, 255, 0.2);
}

.activity-accent-3 {
    background: linear-gradient(135deg, rgba(86, 196, 134, 0.14) 0%, rgba(170, 228, 194, 0.06) 100%);
    border-color: rgba(86, 196, 134, 0.2);
}

.activity-accent-4 {
    background: linear-gradient(135deg, rgba(167, 124, 255, 0.14) 0%, rgba(209, 186, 255, 0.06) 100%);
    border-color: rgba(167, 124, 255, 0.2);
}

.activity-accent-5 {
    background: linear-gradient(135deg, rgba(255, 122, 153, 0.14) 0%, rgba(255, 190, 206, 0.06) 100%);
    border-color: rgba(255, 122, 153, 0.2);
}

.activity-accent-6 {
    background: linear-gradient(135deg, rgba(64, 196, 196, 0.14) 0%, rgba(160, 226, 226, 0.06) 100%);
    border-color: rgba(64, 196, 196, 0.2);
}

.btn-interest,
.btn-interest-alt {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* Tinted rather than solid, a little more opaque than the cards behind them. */
.btn-interest {
    color: var(--color-primary-dark);
    background-color: rgba(92, 148, 255, 0.28);
    border: 1px solid rgba(92, 148, 255, 0.38);
}

.btn-interest:hover {
    background-color: rgba(92, 148, 255, 0.42);
}

.btn-interest-alt {
    color: #1f6b43;
    background-color: rgba(86, 196, 134, 0.28);
    border: 1px solid rgba(86, 196, 134, 0.38);
}

.btn-interest-alt:hover {
    background-color: rgba(86, 196, 134, 0.42);
}

.activity-actions {
    margin-top: var(--spacing-unit);
}

.activity-link .activity-card {
    cursor: pointer;
}

.activity-card p {
    margin: 0 0 calc(var(--spacing-unit) * 0.75) 0;
}

.activity-card p:last-child {
    margin-bottom: 0;
}

.activity-short {
    color: var(--color-text-light);
    font-size: 0.8em;
}

.activity-recordings,
.activity-artifacts,
.activity-note,
.activity-tags,
.activity-more {
    font-size: 0.875rem;
}

.activity-date {
    color: var(--color-text-light);
}

.activity-note {
    color: var(--color-text-light);
    font-style: italic;
}

.activity-more {
    color: var(--color-primary);
}

.potential-list {
    padding-left: 1.25rem;
}

.potential-list li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Conference crashing */
.crash-card {
    margin-bottom: var(--spacing-unit);
}

.crash-meta {
    margin-top: 0.35rem;
    color: var(--color-text-light);
}

.crash-event {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.crash-members {
    font-size: 0.875rem;
}

.activity-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.crash-talks {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.crash-talks li {
    margin-bottom: 0.35rem;
}

.crash-speakers {
    color: var(--color-text-light);
}