/* Stilyagi · page styles for home. Extracted from the source site's inline <style>. */

.home-shell {
       max-width: 1320px;
       margin: 0 auto;
       padding: calc(var(--unit) * 3) calc(var(--unit) * 4)
         calc(var(--unit) * 8);
     }

     .poster-board {
       position: relative;
       border: var(--rule-weight-2) solid var(--ink);
       background:
         linear-gradient(
           180deg,
           rgba(255, 255, 255, 0.28),
           rgba(255, 255, 255, 0)
         ),
         var(--paper);
       padding: calc(var(--unit) * 2);
       box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.12);
     }

     .poster-board::before,
     .poster-board::after {
       content: "";
       position: absolute;
       width: 110px;
       height: 18px;
       background: repeating-linear-gradient(
         135deg,
         var(--ink) 0 10px,
         var(--press-red) 10px 20px
       );
     }

     .poster-board::before {
       top: -2px;
       right: 34px;
     }
     .poster-board::after {
       bottom: -2px;
       left: 34px;
     }

     .poster-showcase {
       position: relative;
       overflow: hidden;
       border: var(--rule-weight) solid var(--ink);
       background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent),
         var(--paper);
       padding: 20px 24px 24px;
       display: grid;
       grid-template-rows: 1fr auto;
       gap: 18px;
     }


     .poster-art-frame {
       position: relative;
       isolation: isolate;
       /* Lets the annotation size itself against the rendered artwork, so the
          typed line keeps its proportions on the drawn sheet at any width. */
       container-type: inline-size;
       border: var(--rule-weight-2) solid var(--ink);
       background: var(--paper);
       padding: 0;
       overflow: hidden;
     }

     .poster-art-frame img {
       position: relative;
       z-index: 0;
       width: 100%;
       display: block;
       object-fit: cover;
       aspect-ratio: 1672 / 941;
     }

     .poster-hero-copy {
       position: absolute;
       left: clamp(18px, 3vw, 36px);
       top: clamp(16px, 2vw, 24px);
       z-index: 2;
       display: flex;
       justify-content: space-between;
       gap: 12px 20px;
       width: calc(100% - clamp(36px, 6vw, 72px));
       font-family: var(--font-sans);
       font-size: 0.72rem;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--ink-soft);
       pointer-events: none;
     }

     .poster-hero-copy .accent {
       color: var(--accent-text);
       font-weight: 700;
     }

     .poster-title {
       position: absolute;
       left: clamp(26px, 4vw, 72px);
       top: clamp(34px, 5vw, 76px);
       z-index: 2;
       margin: 0;
       font-family: var(--font-display);
       /* The floor drops well below the ceiling so the title keeps shrinking
          through tablet widths instead of colliding with the illustration. */
       font-size: clamp(2rem, 8vw, 7rem);
       line-height: 0.83;
       max-width: 4.8ch;
       pointer-events: none;
     }

     .poster-title .red {
       color: var(--accent-text);
     }

     .poster-annotation {
       position: absolute;
       /* Percentages of the art frame, so the line stays on the drawn paper
          sheet however large the 1672/941 crop renders. */
       top: 22%;
       right: 23.4%;
       z-index: 2;
       width: 8em;
       text-align: center;
       transform: rotate(3deg);
       font-family: var(--font-mono);
       /* One curve instead of tablet breakpoints: the frame caps at 1164px, so
          1.03cqw resolves to the 12px desktop size and shrinks with the
          artwork below it.  The 8px floor holds legibility from roughly 880px
          down to the 720px mobile bands, which override this outright, while
          keeping the line clear of the platen just above that handover. */
       font-size: clamp(8px, 1.03cqw, 12px);
       line-height: 1.6;
       color: var(--ink);
       pointer-events: none;
     }


     .poster-tiles {
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 16px;
     }

     .poster-tile {
       border: var(--rule-weight) solid var(--ink);
       padding: 18px 10px;
       text-align: center;
       font-family: var(--font-sans);
       font-size: 0.74rem;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       font-weight: 700;
       background: var(--paper);
     }

     .poster-tile.red {
       background: rgba(194, 39, 46, 0.14);
     }
     .poster-tile.cyan {
       background: rgba(41, 180, 196, 0.16);
     }
     .poster-tile.ochre {
       background: rgba(214, 159, 46, 0.18);
     }
     .poster-tile.magenta {
       background: rgba(216, 30, 121, 0.16);
     }

     .section-flag {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       gap: 18px;
       align-items: center;
       margin: calc(var(--unit) * 7) 0 calc(var(--unit) * 4);
     }

     .section-flag::before,
     .section-flag::after {
       content: "";
       height: 2px;
       background: var(--ink);
     }

     .section-flag h2 {
       margin: 0;
       font-size: clamp(2.4rem, 3vw, 4rem);
       text-align: center;
     }

     .section-flag h2 .red {
       color: var(--accent-text);
     }

     .explore-grid {
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: calc(var(--unit) * 3);
     }

     .tool-card {
       display: grid;
       grid-template-rows: auto auto 1fr auto;
       gap: 14px;
       min-height: 320px;
       padding: calc(var(--unit) * 2);
       background:
         linear-gradient(
           180deg,
           rgba(255, 255, 255, 0.22),
           rgba(255, 255, 255, 0)
         ),
         var(--paper);
       border: var(--rule-weight) solid var(--ink);
       position: relative;
     }

     .tool-card::before {
       content: "";
       position: absolute;
       top: -1px;
       left: -1px;
       right: -1px;
       height: 4px;
       background: var(--accent-color, var(--press-red));
     }

     .tool-card .eyebrow {
       font-family: var(--font-sans);
       font-size: 0.68rem;
       font-weight: 700;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--accent-color, var(--press-red));
     }

     .tool-art {
       min-height: 108px;
       aspect-ratio: 1672 / 941;
       border: var(--rule-weight) solid var(--ink);
       background:
         linear-gradient(
           180deg,
           rgba(255, 255, 255, 0.18),
           rgba(255, 255, 255, 0)
         ),
         var(--paper-shade);
       overflow: hidden;
       display: grid;
       place-items: center;
     }

     .tool-art img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .tool-emblem {
       width: 100%;
       height: 100%;
       display: grid;
       align-content: center;
       gap: 8px;
       padding: 14px;
       text-align: center;
     }

     .tool-emblem .big {
       font-family: var(--font-display);
       font-size: 2.05rem;
       line-height: 0.88;
     }

     .tool-emblem .small {
       font-family: var(--font-sans);
       font-size: 0.72rem;
       letter-spacing: 0.16em;
       text-transform: uppercase;
     }

     .tool-emblem .rule {
       height: 2px;
       background: var(--ink);
     }

     .tool-card h3 {
       margin: 0;
       font-family: var(--font-display);
       font-size: 2rem;
       line-height: 0.9;
     }

     .tool-card p {
       margin: 0;
       font-family: var(--font-editorial);
       line-height: 1.45;
     }

     .tool-card a {
       font-family: var(--font-sans);
       font-size: 0.76rem;
       font-weight: 700;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       text-decoration: none;
       color: var(--accent-color, var(--press-red));
     }

     .tool-card a:hover {
       color: var(--ink);
     }

     .value-band {
       margin-top: calc(var(--unit) * 7);
       background: var(--paper-shade);
       border-top: var(--rule-weight-2) solid var(--ink);
       border-bottom: var(--rule-weight-2) solid var(--ink);
     }

     .value-grid {
       max-width: 1320px;
       margin: 0 auto;
       padding: calc(var(--unit) * 4);
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }

     .value-card {
       padding: calc(var(--unit) * 4);
       border-right: var(--rule-weight) solid var(--ink);
     }

     .value-card:last-child {
       border-right: 0;
     }

     .value-card .eyebrow {
       font-family: var(--font-sans);
       font-size: 0.7rem;
       font-weight: 700;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--accent-text);
     }

     .value-card h3 {
       margin: 12px 0 10px;
       font-family: var(--font-display);
       font-size: 2rem;
       line-height: 0.9;
     }

     .value-card p {
       margin: 0;
       font-family: var(--font-editorial);
       line-height: 1.5;
     }

     .pipeline-poster {
       margin-top: calc(var(--unit) * 7);
     }

     .pipeline-frame {
       border: var(--rule-weight-2) solid var(--ink);
       background: var(--paper);
       padding: calc(var(--unit) * 2);
     }

     .pipeline-frame img {
       width: 100%;
       border: var(--rule-weight) solid var(--ink);
       display: block;
     }

     .pipeline-caption {
       margin-top: 10px;
       font-family: var(--font-sans);
       font-size: 0.72rem;
       letter-spacing: 0.16em;
       text-transform: uppercase;
       color: var(--ink-soft);
     }

     .command-rail {
       margin-top: calc(var(--unit) * 7);
       border: var(--rule-weight-2) solid var(--ink);
       background:
         linear-gradient(90deg, rgba(15, 15, 15, 0.06), transparent 28%),
         var(--paper);
       padding: calc(var(--unit) * 4);
       display: grid;
       grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
       gap: calc(var(--unit) * 4);
       align-items: center;
     }

     .command-label {
       font-family: var(--font-display);
       font-size: clamp(2.6rem, 4vw, 4.5rem);
       line-height: 0.86;
     }

     .command-label .red {
       color: var(--accent-text);
     }

     /* Sits under the rail's heading, where a reader who has just been told
        how to start looks next for where to get it. */
     .command-source {
       display: inline-block;
       margin-top: calc(var(--unit) * 2);
       font-family: var(--font-sans);
       font-size: 0.76rem;
       font-weight: 700;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       color: var(--ink);
       text-decoration: none;
       border-bottom: var(--rule-weight) solid var(--press-red);
       padding-bottom: 3px;
     }

     .command-source:hover {
       color: var(--accent-text);
     }

     .command-source .manicule {
       color: var(--accent-text);
       font-size: 1rem;
     }

     .command-steps {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: calc(var(--unit) * 2);
     }

     .command-step {
       border: var(--rule-weight) solid var(--ink);
       background: rgba(255, 255, 255, 0.36);
       padding: calc(var(--unit) * 2);
     }

     .command-step code {
       display: block;
       margin-bottom: 10px;
       font-family: var(--font-mono);
       font-size: 0.95rem;
       color: var(--accent-text);
     }

     .command-step p {
       margin: 0;
       font-family: var(--font-editorial);
       line-height: 1.45;
     }

     .reading-grid {
       margin-top: calc(var(--unit) * 7);
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: calc(var(--unit) * 3);
     }

     .reading-room {
       display: grid;
       gap: 12px;
       padding: calc(var(--unit) * 2);
       border: var(--rule-weight) solid var(--ink);
       background: var(--paper);
     }

     .reading-room .eyebrow {
       font-family: var(--font-sans);
       font-size: 0.68rem;
       font-weight: 700;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--accent-text);
     }

     .reading-room h3 {
       margin: 0;
       font-family: var(--font-display);
       font-size: 2rem;
       line-height: 0.9;
     }

     .reading-room p {
       margin: 0;
       font-family: var(--font-editorial);
       line-height: 1.45;
     }

     .reading-room a {
       font-family: var(--font-sans);
       font-size: 0.76rem;
       font-weight: 700;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       text-decoration: none;
       color: var(--ink);
     }

     .reading-room a:hover {
       color: var(--accent-text);
     }

/* =================================================================
   Load animations — the press coming up to speed.
   Each runs once, and none uses a forwards fill: every keyframe list
   omits its `to` step, so the browser synthesises the final frame from
   the element's own computed style and the resting state above is what
   remains when the animation is over.
   ================================================================= */

@media (prefers-reduced-motion: no-preference) {
  /* The hero word is struck in ink, then the red plate lands on it. */
  .poster-title .red {
    animation: prose-inking 1s var(--ease);
  }

  @keyframes prose-inking {
    from {
      color: var(--ink);
    }
  }

  /* The tiles chase left to right, each washing out, over-saturating, and
     settling.  Their type and rules are lamp-black, which saturate() cannot
     move, so only the tint travels. `backwards` holds the opening frame
     through the delay, so a tile does not show its resting tint and then jump.
     Three 200ms steps plus an 800ms tile is 1.4s end to end. */
  .poster-tile {
    animation: tile-chase 800ms ease-in-out backwards;
  }

  .poster-tiles .poster-tile:nth-child(2) {
    animation-delay: 200ms;
  }

  .poster-tiles .poster-tile:nth-child(3) {
    animation-delay: 400ms;
  }

  .poster-tiles .poster-tile:nth-child(4) {
    animation-delay: 600ms;
  }

  @keyframes tile-chase {
    0% {
      filter: saturate(0);
    }
    45% {
      filter: saturate(2.4);
    }
  }

  /* Typed onto the paper. home.js splits the annotation into indexed spans
     and sets the two custom properties; the fallbacks keep this legible if it
     is ever read without that script in mind.  The mono face makes the bold
     and regular weights the same width, so the line does not reflow as each
     character settles. */
  .poster-annotation.is-typing .typed-letter {
    animation: letter-strike var(--typed-duration, 260ms) ease-out backwards;
    animation-delay: calc(var(--typed-index, 0) * var(--typed-stagger, 12ms));
  }

  @keyframes letter-strike {
    0% {
      opacity: 0;
      font-weight: 600;
    }
    55% {
      opacity: 1;
      font-weight: 600;
    }
  }
}

     @media (max-width: 1180px) {
       .explore-grid,
       .reading-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
     }

     @media (max-width: 980px) {
       .command-rail {
         grid-template-columns: 1fr;
       }

       .value-grid {
         grid-template-columns: 1fr;
         gap: 0;
       }

       .value-card {
         border-right: 0;
         border-bottom: var(--rule-weight) solid var(--ink);
       }

       .value-card:last-child {
         border-bottom: 0;
       }
     }

     @media (max-width: 720px) {
       .home-shell {
         padding-inline: calc(var(--unit) * 2);
       }

       /* Full-bleed hero: the board sheds the shell's inline padding and its
          side borders, and the nested showcase and art frames collapse so the
          artwork runs edge to edge with a single rule top and bottom. The
          tiles keep an inset so they read as a card row under the bleed. */
       .poster-board {
         margin-inline: calc(var(--unit) * -2);
         border-inline: 0;
         padding: 0;
       }

       .poster-showcase {
         border: 0;
         padding: 0;
         gap: 14px;
       }

       .poster-art-frame {
         border-inline: 0;
         border-top: 0;
       }

       .poster-art-frame img {
         aspect-ratio: 4 / 5;
         object-position: 60% center;
       }

       .poster-title {
         left: 16px;
         top: 48px;
         max-width: 3.8ch;
         font-size: clamp(3rem, 14vw, 4.8rem);
         /* A paper-coloured halo lifts the title off the busy artwork the
            tighter mobile crop puts behind it. */
         text-shadow:
           0 0 6px var(--paper),
           0 0 18px var(--paper),
           2px 2px 0 var(--paper);
       }

       .poster-hero-copy {
         left: 18px;
         top: 12px;
         width: calc(100% - 36px);
         font-size: 0.62rem;
         gap: 10px;
         text-shadow:
           0 0 4px var(--paper),
           0 0 10px var(--paper),
           1px 1px 0 var(--paper);
       }

       .poster-tiles {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 10px;
         padding: 0 14px 14px;
       }

       .poster-tile {
         padding: 14px 8px;
         font-size: 0.68rem;
       }

       .command-steps,
       .explore-grid,
       .reading-grid {
         grid-template-columns: 1fr;
       }

       .section-flag {
         grid-template-columns: 1fr;
       }

       .section-flag::before,
       .section-flag::after {
         display: none;
       }

       /* Full-bleed pipeline board: the frame sheds the shell's inline
          padding and every side border that would hug the screen edge. */
       .pipeline-frame {
         margin-inline: calc(var(--unit) * -2);
         border-inline: 0;
         padding-inline: 0;
       }

       .pipeline-frame img {
         border-inline: 0;
       }
     }

     /* The annotation rides the drawn paper sheet through the 4/5 phone crop,
        where the frame runs full bleed so 1cqw is one viewport percent.  The
        text cannot simply scale with the artwork — it would be unreadable by
        360px — so size and box width follow linear curves fitted to the two
        hand-tuned ends, 14.4px/130px at 720px and 11.2px/90px at 460px.  The
        floors freeze the smallest phone sizes at what the old bottom band
        used, and the ceilings hand over to the desktop rule at 720px. */
     @media (width <= 720px) {
       .poster-annotation {
         top: 21%;
         right: 3.2%;
         width: clamp(83px, 18.8px + 15.4cqw, 130px);
         font-size: clamp(10.4px, 5.54px + 1.23cqw, 14.4px);
         line-height: 1.45;
       }
     }

     /* Tablet widths: the hero board runs full bleed, shedding the shell's
        inline padding and its side borders, but keeps the desktop layout
        inside — showcase framing, overlay positions, and the four-up tiles. */
     @media (720px < width <= 1080px) {
       .poster-board {
         margin-inline: calc(var(--unit) * -4);
         border-inline: 0;
       }
     }

     /* Tablet widths need no annotation bands: the cqw font size scales the
        whole box with the artwork, so the base percentage anchors hold. */

     /* Below 360px the overline wraps and the edition mark lands on top of
        it, and there is no room to place it elsewhere, so it goes. */
     @media (width <= 360px) {
       .poster-hero-copy .accent {
         display: none;
       }
     }

     /* On the narrowest phones the value band and command rail join the hero
        in running full bleed, so the page reads as stacked bands rather than
        a column of framed boxes.  Each sheds the shell's inline padding; the
        rail also drops its side rules, keeping its own padding to hold the
        content off the screen edge. */
     @media (width <= 460px) {
       .value-band {
         margin-inline: calc(var(--unit) * -2);
       }

       .command-rail {
         margin-inline: calc(var(--unit) * -2);
         border-inline: 0;
       }
     }