/* ==========================================================================
   NOFONT TWENTYSIX — theme CSS for Skrivr (nofont.com)
   --------------------------------------------------------------------------
   Loaded after nds/css/foundation.css (nofont-design-system 2.0.0, see
   nds/VERSION). Structure only: what the system has no component for, and
   the mapping from the posts' own class names onto the system's. No
   colours, fonts, type scale or brand: those come later as a brand layer
   that overrides the system's tokens.

   The posts are an API. Their markup lives in .txt files in Dropbox and
   hard-codes the 2025 theme's class names (.content-section-…,
   .grid-image .two-col, .wide .fill-left, .horizontalScrollList …). This
   file and scripts/theme.js translate those names to system components;
   the posts are never edited to suit the theme.

   What the system now does (2.0.0) and this file therefore does not:
     c-contentGrid ..... the article column and its breakout lines
     c-scrollStrip ..... the pinned sideways strip (theme.js maps it)
     c-figure .......... captions, including the toggle over the image
     c-logoRow ......... the logo walls on About and What I do
     c-facts--rows ..... the Behind the Case fact list
     c-overlap ......... headline over the bottom of the featured image
     reset / base ...... plain lists, img max-width

   Breakpoints follow the old theme where they reproduce its layout: 540px
   (the system's md) and 1400px (the old desktop step).

   Contents
     1. Page ............... colour scheme, prose lists
     2. Articles ........... c-contentGrid, and how old breakouts map onto it
     3. Case grid .......... Behind the Case
     4. Image rows ......... .grid-image with .two-col .three-col …
     5. Captions ........... sizing c-figure inside image rows
     6. Video .............. old embed wrappers
   ========================================================================== */


/* ==========================================================================
   1. PAGE
   ========================================================================== */

/* --- Colour scheme -----------------------------------------------------------
   Light for now; dark comes with the brand theme. The design system names
   no colours: its ink and paper are the browser's system colours (CanvasText
   / Canvas), so switching this one declaration to `dark` turns the page,
   text, links, the menu drawer, form controls and scrollbars dark together.
   Change the <meta name="color-scheme"> in header.html with it (it avoids a
   flash before this file loads), and nofont-work's work.css and
   inc/header.php, so the two halves of the site match. The brand layer
   replaces this with real colours, and must then also set --ink/--paper on
   .c-section--inverse itself (the system ships the system colours there).
*/
:root {
  color-scheme: light;
}

/* --- Abbreviations ------------------------------------------------------------
   Skrivr's typography engine (advanced_typography) wraps words in capitals
   in <abbr> and lowercases them, expecting small caps: PADI arrives as
   <abbr>padi</abbr>. Without this rule the page reads "padi" and "Nofont ab".
   Small caps are what the markup asks for; the brand layer picks the font.
*/
abbr {
  font-variant-caps: all-small-caps;
  text-decoration: none;
}

/* --- Prose lists -------------------------------------------------------------
   The system's reset takes bullets and numbers off every list, which is
   right for navigation and wrong for writing. Lists in a post body get
   them back. Lists that carry a class (c-logoRow, c-list …) are left to
   their component.
*/
:where(.c-contentGrid, .caseGrid [class^="content-section"]) :is(ul, ol):not([class]) {
  padding-inline-start: 1.25em;

  /* Both: an item inherits its marker type from its list */
  &,
  & > li {
    list-style: revert;
  }
}


/* ==========================================================================
   2. ARTICLES — c-contentGrid
   --------------------------------------------------------------------------
   article.html, static.html and the Creative Trails article are a
   c-contentGrid: the text column in the middle, a wide line one step out
   and the full width beyond. The intro sits on c-contentGrid__lead.

   Posts widen things in two ways, and both become grid lines here rather
   than the percentage margins of 2025:
     - body classes .widescreen / .largescreen widen every image row
     - element classes .wide .fill-left / .fill-right / .superwide
   A rule here only applies to direct children of the grid: nested ones
   (inside a markdown <div>) stay in the text column.
   ========================================================================== */

.c-contentGrid {

  /* The featured image runs the full width of the grid */
  & .featuredImage img {
    width: 100%;
  }

  & .metaInfo__icon img {
    width: 1.25rem;
  }
}

/* Skrivr puts the post's headline in the body as well as in {{ headline }}.
   The intro already shows it, so a body h1 after the lead is hidden, as the
   2025 theme did (.contentItem h1). Static pages have no lead, so their h1
   (the page title) stays. */
.c-contentGrid__lead ~ h1 {
  display: none;
}

/* Image rows in widescreen and largescreen posts: out to the wide line */
:is(.widescreen, .largescreen) .c-contentGrid > p:has(.grid-image) {
  grid-column: wide;
}

/* Single elements in image-grid posts */
.image-grid .c-contentGrid {

  & > .wide.fill-left {
    grid-column: full-start / content-end;
  }

  & > .wide.fill-right {
    grid-column: content-start / full-end;
  }

  & > .superwide {
    grid-column: full;
  }
}


/* ==========================================================================
   3. CASE GRID — Behind the Case
   --------------------------------------------------------------------------
   Five columns. Sections alternate left and right, with wide sections
   spanning the middle three and the scroll strip spanning all five. The
   system has c-zigzag for new work, but these posts name nine fixed slots
   (content-section-one … -wide-three), so the slots are kept.

         10% | 40% | 5% | 35% | 10%
              left  gap  right

   Below 540px every section stacks in the middle three columns, in the
   order the old theme used (section one after the intro, the strip third).
   ========================================================================== */

.caseGrid {
  display: grid;
  grid-template-columns: 10% 40% 5% 35% 10%;
  grid-template-rows: auto;

  & > * {
    min-width: 0;
  }

  /* --- Intro: left column, featured image bleeding off the left edge,
     headline pulled up over its bottom with c-overlap --- */
  & .intro {
    grid-area: 1 / 2 / 2 / 5;
    position: relative;

    @media (min-width: 540px) { /* md */
      grid-area: 1 / 2 / 2 / 3;
    }
  }

  & .featuredImage {
    margin: 0 0 0 -12%;
    width: 100vw;
    overflow: hidden;

    @media (min-width: 540px) { /* md */
      margin: 0 0 0 -42%;
      width: auto;
      height: 100vh;

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

  /* c-overlap's pull, in rem: a percentage would resolve against the
     column's width, not the image's height */
  & .c-overlap {
    --overlap: 6rem;

    @media (min-width: 540px) { /* md */
      --overlap: 12rem;
    }
  }

  & .facts__logo img {
    max-width: 100px;
    max-height: 50px;
    width: auto;
  }

  /* --- The sections --- */
  & .content-section-one {
    grid-area: 2 / 2 / 3 / 5;
    align-self: end;
    height: fit-content;

    @media (min-width: 540px) { /* md: right column, 75vh down */
      grid-area: 1 / 4 / 2 / 5;
      margin-block-start: 75vh;
    }
  }

  & .content-section-scroll {
    grid-area: 3 / 1 / 4 / 6;

    @media (min-width: 540px) { /* md */
      grid-area: 2 / 1 / 3 / 6;
    }
  }

  & .content-section-three {
    grid-area: 4 / 2 / 5 / 5;

    @media (min-width: 540px) { /* md: right */
      grid-area: 3 / 4 / 4 / 5;
    }
  }

  & .content-section-wide {
    grid-area: 5 / 2 / 6 / 5;

    @media (min-width: 540px) { /* md: across */
      grid-area: 4 / 2 / 5 / 5;
    }
  }

  & .content-section-five {
    grid-area: 6 / 2 / 7 / 5;

    @media (min-width: 540px) { /* md: left */
      grid-area: 5 / 2 / 6 / 3;
    }
  }

  & .content-section-wide-two {
    grid-area: 7 / 2 / 8 / 5;
    align-self: end;
    height: fit-content;

    @media (min-width: 540px) { /* md: across */
      grid-area: 6 / 2 / 7 / 5;
    }
  }

  & .content-section-six {
    grid-area: 8 / 2 / 9 / 5;

    @media (min-width: 540px) { /* md: right */
      grid-area: 7 / 4 / 8 / 5;
    }
  }

  & .content-section-seven {
    grid-area: 9 / 2 / 10 / 5;

    @media (min-width: 540px) { /* md: left */
      grid-area: 8 / 2 / 9 / 3;
    }
  }

  & .content-section-wide-three {
    grid-area: 10 / 2 / 11 / 5;
    align-self: end;
    height: fit-content;

    @media (min-width: 540px) { /* md: across */
      grid-area: 9 / 2 / 10 / 5;
    }
  }

  /* Air between sections */
  & [class^="content-section"] {
    padding-block: var(--space-4);
  }
}

/* --- Breakouts inside the case grid ---
   Here the posts' breakouts are nested inside the section blocks, not
   children of a grid, so they keep the 2025 percentages of the column. */
.widescreen .caseGrid p:has(.grid-image) {
  @media (min-width: 540px) { /* md */
    margin-inline-start: -30%;
    width: 160%;
    max-width: 160%;
  }
}

.largescreen .caseGrid p:has(.grid-image) {
  @media (min-width: 540px) { /* md */
    margin-inline-start: -15%;
    width: 130%;
    max-width: 130%;
  }
}

.widescreen.image-grid .caseGrid {

  & .wide.fill-left {
    @media (min-width: 540px) { /* md: back across the left column */
      margin-inline-start: -130%;
      width: 230%;
      max-width: 230%;
    }
  }

  & .wide.fill-right {
    @media (min-width: 540px) { /* md */
      width: 200%;
      max-width: 200%;
    }
  }

  & .superwide {
    margin-inline: -50%;
    width: 200%;
    max-width: 200%;
  }
}


/* ==========================================================================
   4. IMAGE ROWS
   --------------------------------------------------------------------------
   Markdown puts consecutive images in one <p>. A <p> holding .grid-image
   images becomes a wrapping row; .two-col … .five-col set the widths from
   540px, full width below. .last is kept on the markup but no longer
   needed: the gap does what its margin used to.

   The system's c-mediaGrid wants figures in rows it names; the posts give
   bare images in a paragraph, so the row stays a theme rule.
   ========================================================================== */

p:has(.grid-image) {
  --gap: var(--space-2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-block: var(--gap);
  padding: 0;

  & .grid-image {
    width: 100%;
    margin: 0;
    flex-shrink: 0;
  }

  @media (min-width: 540px) { /* md */

    & .two-col   { width: calc(50% - var(--gap) / 2); }
    & .three-col { width: calc(100% / 3 - var(--gap) * 2 / 3); }
    & .four-col  { width: calc(25% - var(--gap) * 3 / 4); }
    & .five-col  { width: calc(20% - var(--gap) * 4 / 5); }
  }
}

/* Embeds laid out as grid images (Ryde's two Vimeo players side by side) */
div.grid-image {
  margin-block-end: var(--space-2);

  @media (min-width: 540px) { /* md */
    &.two-col {
      display: inline-block;
      width: calc(50% - var(--space-2) / 2);
    }
  }
}

/* Videos in image grids: the old "dirty fix", kept */
.video-grid p:has(.two-col) {
  align-items: flex-start;
}


/* ==========================================================================
   5. CAPTIONS
   --------------------------------------------------------------------------
   theme.js turns the posts' captioned images into c-figure: .captions gets
   the toggle over the image (c-figure__caption--toggle), .captions-trad a
   plain caption underneath. When the image was one of a row, theme.js
   moves its column class (.two-col …) onto the figure, so the row widths
   above apply to the figure. The image then fills it.
   ========================================================================== */

.c-figure.grid-image > img {
  width: 100%;
}


/* ==========================================================================
   6. VIDEO
   --------------------------------------------------------------------------
   Posts embed video four ways; all of them are kept working. New content
   uses c-embed.
   ========================================================================== */

video {
  width: 100%;
}

.sixteen-nine-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Padding-ratio wrappers from older posts */
.videoWrapper,
.videoWrapperWidescreen {
  position: relative;
  height: 0;

  & iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.videoWrapper {
  padding-bottom: 54.6%;
  margin-block: var(--space-5);

  &.vertical {
    padding-bottom: 100%;
    width: 80%;
  }
}

.videoWrapperWidescreen {
  padding-bottom: 39.25%;
  padding-top: 25px;
}

/* =======================

PAGE SPECIFIC

========================== */

#bomber.post {

  .featuredImage {
    text-align: center;
  
    img.featured {
      width: 34%;
      height: auto;
      margin: 0 auto 5% auto;
    }
  
  }
  
}