@font-face {
    font-family: "Qdbettercomicsans-jEEeG[1]";
    src: url("fonts/Qdbettercomicsans-jEEeG_1_.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

  :root {
    /* Largest gallery tier fills remaining space up to the right edge of
       the page. Everything else (medium/small tiers, single image) is
       derived from it in the same ratio as before, so scaling stays
       proportional no matter the screen size.
       The 740px already accounts for everything to the left of the media
       column (body's left padding, drawer width, drawer-media's own
       left margin). It must ALSO subtract the body's right padding
       (20px) here, or the gallery's right edge lands flush on the
       viewport edge instead of stopping at that same 20px margin like
       everything else on the page does. And it must subtract the
       gallery frame's own chrome (10px padding + 1px border on each
       side — see --frame-chrome below), or that chrome gets added back
       on top and pushes the total past the intended right margin. */
    --page-right-margin: 20px;
    --frame-chrome: 22px; /* (10px padding + 1px border) × 2 sides */
    --media-lg: clamp(240px, calc(100vw - 740px - var(--page-right-margin) - var(--frame-chrome)), 900px);
    --media-md: calc(var(--media-lg) * 300 / 420);
    --media-sm: calc(var(--media-lg) * 200 / 420);
    --media-single: calc(var(--media-lg) * 96 / 420);

    /* Per-tier item width for the horizontal gallery. The gap between
       columns must be subtracted here, or N columns + (N-1) gaps add up
       to MORE than the container width and the last column silently
       overflows (gets clipped / needs a scroll it shouldn't need).
       Row height is derived from the TALLEST ratio in the set (9:16) at
       that width — i.e. the height of the biggest possible image in the
       strip. Any items shorter than that automatically stack in the same
       column via flex-wrap. */
    --gallery-gap: 8px;
    --item-w-sm: calc((var(--media-sm) - var(--gallery-gap)) / 2);
    --item-w-md: calc((var(--media-md) - var(--gallery-gap)) / 2);
    --item-w-lg: calc((var(--media-lg) - (var(--gallery-gap) * 2)) / 3);
    --row-h-sm: calc(var(--item-w-sm) * 16 / 9);
    --row-h-md: calc(var(--item-w-md) * 16 / 9);
    --row-h-lg: calc(var(--item-w-lg) * 16 / 9);
  }

  html {
    /* Page still scrolls (wheel/keyboard/touch all work) when content
       is taller/wider than the viewport — only the visible scrollbar
       chrome itself is hidden, matching the hidden scrollbars already
       used on the drawer media panels and galleries. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
  }

  html::-webkit-scrollbar {
    display: none; /* Chrome/Safari/WebKit */
    width: 0;
    height: 0;
  }

  body {
    font-family: "Qdbettercomicsans-jEEeG[1]", Arial, sans-serif;
    background: #f4f4f5;
    padding: 60px 20px 60px 60px;
    position: relative;
  }

  /* Sits behind all page content (fixed + negative z-index) and stays
     centered in the viewport regardless of scroll or page length.
     pointer-events:none so it never intercepts clicks meant for the
     real content stacked above it. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("images/web/irate.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% auto;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
  }

  /* Own stacking context, ranked above the fixed chatbox widget (see
     .chatbox-widget below) — so every entry, and any media panel that
     pokes out of it, paints over the widget rather than under it,
     regardless of where the widget happens to sit on screen. */
  .drawer-container {
    width: 100%;
    max-width: 640px;
    position: relative;
    z-index: 2;
  }

  /* Pinned to the bottom-left of the viewport, independent of page
     scroll and separate from the entries' own document flow. left:60px
     matches body's own left padding, which is what actually determines
     the drawer container's left edge — so the widget lines up flush
     with the entries above it instead of floating at an arbitrary
     offset. Sits above the fixed background image (z-index:-1) but
     below the drawer container (z-index:2), so an opened entry's
     expanding content/media visually overlaps and covers it instead of
     the other way around. */
  .chatbox-widget {
    position: fixed;
    left: 60px;
    bottom: 20px;
    width: 300px;
    background: #fff;
    border: 1px solid #e2e2e5;
    box-sizing: border-box;
    z-index: 1;
  }

  /* Matches .drawer-header's typography/color exactly, so the widget
     reads as part of the same set of boxes as the entries above it. */
  .chatbox-widget-header {
    padding: 10px 20px;
    font-weight: 700;
    font-size: 15px;
    font-family: "Qdbettercomicsans-jEEeG[1]", Arial, sans-serif;
    color: #18181b;
    letter-spacing: 0.1px;
    border-bottom: 1px solid #ededef;
  }

  .chatbox-widget-body {
    padding: 10px;
  }

  .chatbox-widget iframe {
    display: block;
    width: 100%;
    border: none;
  }

  .drawer-entry {
    position: relative;
  }

  .drawer {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e2e5;
    border-top: none;
    /* No overflow:hidden here. The slide-collapse clipping is fully
       handled by .drawer-content itself (toggled hidden/visible via JS
       below). If this element also clipped, it would independently hide
       a nested entry's media panel no matter what .drawer-content did,
       since the nested entry's .drawer + .drawer-media pair both live
       inside this box. */
  }

  /* Direct-child combinator (not a descendant selector) is required here:
     with nesting, a descendant selector would match every nested entry's
     .drawer too (they're all descendants of the first top-level entry),
     giving every nested row an unwanted top border instead of just the
     actual first one in its own stack. */
  .drawer-entry:first-child > .drawer {
    border-top: 1px solid #e2e2e5;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    font-size: 15px;
    font-family: "Qdbettercomicsans-jEEeG[1]", Arial, sans-serif;
    color: #18181b;
    letter-spacing: 0.1px;
  }

  .drawer-header:hover {
    background: #fafafa;
  }

  /* Parent entries get a faint tint on their header so it's visually
     clear they're a group/container rather than a leaf post. */
  .drawer-entry--parent > .drawer > .drawer-header {
    background: #f7f7f8;
  }

  .drawer-entry--parent > .drawer > .drawer-header:hover {
    background: #efeff1;
  }

  .drawer-icon {
    color: #9a9aa1;
    font-size: 11px;
    margin-left: 12px;
    flex-shrink: 0;
  }

  /* Leaf entry headers: title on the left, a "date + triangle" group
     pinned to the right. The title is allowed to shrink and truncate
     (min-width: 0 + ellipsis) so a long title never pushes the date/icon
     group out of the header or wraps the row onto two lines. The right
     group itself never shrinks — the date is free to be any length
     ("1 of january, 0001" today, something longer or shorter later) and
     the layout adjusts automatically since nothing here is a fixed
     width; it just reserves however much space the current text needs. */
  .drawer-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .drawer-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 16px;
  }

  .drawer-date {
    color: #9a9aa1;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .drawer-content {
    max-height: 0;
    overflow: hidden;
  }

  .drawer-content-inner {
    padding: 10px 20px 12px 20px;
    border-top: 1px solid #ededef;
    color: #45454b;
    line-height: 1.6;
    font-size: 13.5px;
    font-family: "Qdbettercomicsans-jEEeG[1]", Arial, sans-serif;
  }

  .drawer-content-inner p {
    margin: 0;
  }

  .drawer-content-inner code {
    background: #f0f0f2;
    border: 1px solid #e2e2e5;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: "Courier New", monospace;
    font-size: 12.5px;
    color: #2a2a2e;
  }

  .drawer-children-empty {
    color: #9a9aa1;
    font-style: italic;
  }

  /* A parent's own drawer-content-inner would otherwise draw its usual
     border-top right above the first nested entry's own top border
     (see .drawer-entry:first-child > .drawer above) — two lines stacked
     on top of each other. Drop this one and use plain spacing instead. */
  .drawer-entry--parent > .drawer > .drawer-content > .drawer-content-inner {
    border-top: none;
    padding-top: 6px;
  }

  /* --- Media column: positioned OUTSIDE the drawer box entirely, never affects its width --- */
  .drawer-media {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    max-height: 0;
    margin-left: 0;
    overflow: hidden;
    /* Base stacking value. Without an explicit z-index, positioned
       panels just paint in DOM order, so whichever entry happens to sit
       later in the document would always cover an earlier one it
       overlaps, regardless of which was actually opened more recently.
       JS bumps a freshly-opened leaf's own panel above this base (see
       toggleDrawer) so it renders over any other panel it overlaps. */
    z-index: 1;
  }

  .drawer.open + .drawer-media {
    overflow-y: auto;
    margin-left: 42px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
  }

  .drawer.open + .drawer-media--single {
    width: var(--media-single);
  }

  .drawer.open + .drawer-media--gallery-sm {
    width: calc(var(--media-sm) + var(--frame-chrome));
  }

  .drawer.open + .drawer-media--gallery-md {
    width: calc(var(--media-md) + var(--frame-chrome));
  }

  .drawer.open + .drawer-media--gallery-lg {
    width: calc(var(--media-lg) + var(--frame-chrome));
  }

  .drawer-media::-webkit-scrollbar {
    display: none; /* Chrome/Safari/WebKit */
    width: 0;
    height: 0;
  }

  /* --- Frame: the visible border/background around each media panel --- */
  .media-frame {
    box-sizing: border-box;
    border: 1px solid #d8d9dc;
    background: #fff;
    padding: 10px;
  }

  .media-frame--single {
    width: var(--media-single);
  }

  /* Gallery frames need to be WIDER than the gallery's own scrollable
     content (--media-sm/md/lg), by exactly the frame's own chrome
     (padding + border on both sides — --frame-chrome). Otherwise the
     frame's padding eats into the gallery's declared width instead of
     sitting outside it, and the gallery ends up flush against the
     frame's right edge — no right-side padding/margin at rest, and
     still none once you've scrolled all the way to the end of the
     sidescroll, since the last column has nowhere to land but the
     frame's bare inner edge. */
  .media-frame--gallery-sm {
    width: calc(var(--media-sm) + var(--frame-chrome));
  }

  .media-frame--gallery-md {
    width: calc(var(--media-md) + var(--frame-chrome));
  }

  .media-frame--gallery-lg {
    width: calc(var(--media-lg) + var(--frame-chrome));
  }

  .img-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: repeating-linear-gradient(
      45deg,
      #eceef0,
      #eceef0 6px,
      #e2e4e7 6px,
      #e2e4e7 12px
    );
    border: 1px solid #d8d9dc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9aa1;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* When a real image directory is given for a single-media entry: the
     <img> fills the frame and gets cropped to fit, same as gallery-item
     images. The checkerboard placeholder background stays visible for a
     moment while the image loads, then is covered once it renders. */
  .img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* --- Box 2: masonry image gallery, outside the drawer entirely --- */

  /* Aspect-ratio presets — control SHAPE. Height is derived from width automatically,
     so frames stay correct at any scale instead of relying on fixed pixel heights. */
  .ar-1-1  { aspect-ratio: 1 / 1; }
  .ar-4-3  { aspect-ratio: 4 / 3; }
  .ar-3-4  { aspect-ratio: 3 / 4; }
  .ar-16-9 { aspect-ratio: 16 / 9; }
  .ar-9-16 { aspect-ratio: 9 / 16; }
  .ar-3-2  { aspect-ratio: 3 / 2; }
  .ar-2-3  { aspect-ratio: 2 / 3; }

  /* Size tiers — control SCALE. Only the container width changes; every frame inside
     scales proportionally because its height is aspect-ratio-derived, not hardcoded. */
  .size-tier-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #9a9aa1;
    margin: 14px 0 6px 0;
  }

  .size-tier:first-child .size-tier-label {
    margin-top: 0;
  }

  /* Horizontal layout: each gallery is a fixed-size strip that scrolls
     sideways. Items flow top-to-bottom filling a column, then wrap into
     the next column to the right — so an item shorter than the tallest
     ratio in the set doesn't leave a gap, it just shares its column with
     the next item(s) stacked underneath it, up to the row height. Once
     there are more columns than fit in the tier's width, the strip
     scrolls horizontally instead of growing past its container. */
  .gallery {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: var(--gallery-gap);
    row-gap: var(--gallery-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
  }

  .gallery::-webkit-scrollbar {
    display: none; /* Chrome/Safari/WebKit */
    width: 0;
    height: 0;
  }

  .gallery--sm {
    width: var(--media-sm);
    height: var(--row-h-sm);
  }

  .gallery--sm .gallery-item {
    width: var(--item-w-sm);
  }

  .gallery--md {
    width: var(--media-md);
    height: var(--row-h-md);
  }

  .gallery--md .gallery-item {
    width: var(--item-w-md);
  }

  .gallery--lg {
    width: var(--media-lg);
    height: var(--row-h-lg);
  }

  .gallery--lg .gallery-item {
    width: var(--item-w-lg);
  }

  .gallery-item {
    box-sizing: border-box;
    flex-shrink: 0;
    background: repeating-linear-gradient(
      45deg,
      #eceef0,
      #eceef0 6px,
      #e2e4e7 6px,
      #e2e4e7 12px
    );
    border: 1px solid #d8d9dc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9aa1;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* When real photos are added: <img> fills the aspect-ratio frame and gets
     cropped to fit, regardless of the source photo's native resolution. */
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* --- Mobile: media panel drops below the leaf instead of beside it ---
     The desktop --media-lg formula (100vw - 740px - ...) assumes there's
     a drawer column plus a side gutter for the media panel to sit in.
     Below ~700px that math goes negative and just clamps to its 240px
     floor no matter how wide the actual screen is, which is why images
     look tiny on a phone even though there's plenty of width available.
     The fix isn't a bigger floor, it's a different layout: the panel
     stops sitting to the right of the leaf (position:absolute,
     left:100%) and instead flows in normal document order directly
     underneath the leaf's own content, at that leaf's own full width. */
  @media (max-width: 700px) {
    /* Establishes each leaf as its own query container so --media-lg
       below can be sized against ITS rendered width (100cqw) rather
       than the outer viewport. This matters because nested children
       are narrower than the page — every level of parent nesting eats
       into a leaf's own width via .drawer-content-inner's left/right
       padding — and cqw already reflects that automatically, whereas a
       vw-based number would only ever know about the page as a whole
       and overflow a nested leaf's actual column. */
    .drawer-entry {
      container-type: inline-size;
    }

    :root {
      --media-lg: calc(100cqw - var(--frame-chrome));
    }

    /* No more reserved side gutter for a media column, so the large
       asymmetric left padding (sized for the desktop drawer + panel
       layout) isn't needed — drop it to a plain, even inset. */
    body {
      padding: 40px 16px;
    }

    .chatbox-widget {
      left: 16px;
      right: 16px;
      width: auto;
    }

    .drawer-media {
      position: static;
      width: auto !important;
      max-width: 100%;
      margin-left: 0 !important;
    }

    .drawer.open + .drawer-media {
      margin-top: 10px;
    }
  }