/* ═══════════════════════════════════════════════════════════════════════
   FIDA — extra blocks on a project page

   A band she can add under the photographs: headings, words, pictures and
   buttons. It sits between .sec-gallery and .sec-cta.

   ── IT USES HER OWN TYPE, NOT THE SHOP'S ────────────────────────────────
   FIDA's instruction, plainly: "you must use same design as other existed
   project". So a block is built from the classes her case studies already
   use — .txt / .in for the box and the words, and her real scale for the
   face: .f-mb60 is the project-name banner, .f-h48 and .f-h32 the display
   headings, .f-p25 the large display paragraph, .f-i12l the justified
   write-up, .f-i18l the larger sans. A button is her .btn.btn-black pill
   with an .f-i18sb lilac label, the same one that says "Start a Project" on
   thirteen pages.

   Nothing here declares a font, a size or a colour of its own. If she
   changes her scale, this band changes with it, because it is her scale.

   ── why css/shop.css is not loaded here ─────────────────────────────────
   An earlier version of this note said it restyles .sec-nav, .sec-cta and
   .sec-footer. IT DOES NOT — every occurrence of those names in shop.css is
   inside a comment, and it defines none of them. That was checked and the
   claim was wrong.

   The real reasons are worse than the one I guessed:

   · shop.css:47 sets body{color:var(--white)}. project.css:9 paints
     .stage{background:var(--white)}. Every shop block defaults to white
     text — .blk-heading, .blk-text, .blk-cover-t, .sh-card-name — so an
     appended block would render white on white. Nothing existing moves,
     because every painted element here carries its own colour class; the
     damage lands entirely on the new blocks.

   · shop.css:19 adds a global img,video{max-width:100%;display:block}.
     There is not one <img> on any of the seven pages today, so it has no
     current target — but it is a global waiting for the first one.

   · The decisive one is structural, not a name clash. .blk lays out in flow
     with var(--shop-pad); these pages are a 1440-wide artboard at
     position:absolute under transform:scale(--scale), with the frame height
     hard-coded in --stage-h. The two layout models do not meet.

   The twelve :root tokens the two files share are byte-identical, and
   shop.css declares neither --scale nor --stage-h, so the artboard itself
   was never at risk.

   ── layout only ─────────────────────────────────────────────────────────
   This file positions. The artboard is 1440 wide and absolutely placed, so
   the band is too — but INSIDE it the blocks are in normal flow, because
   they are hers to reorder and there is no Figma coordinate for something
   she has not drawn yet.
   ═══════════════════════════════════════════════════════════════════════ */

.pj-extra{
  position:absolute;left:0;width:1440px;
  display:flex;flex-direction:column;
}
.pj-extra:empty{display:none}

/* Her gallery gutter is 58–60px on every page, and her write-up column is
   480px wide inside a 1440 frame. 60 keeps a block flush with the
   photographs above it. */
.pjb{position:relative;width:100%;box-sizing:border-box;padding:0 60px}
.pjb-in{margin:0 auto}

/* the boxes her .txt class expects are absolutely placed; in this band they
   are in flow, so the geometry the class assumes has to be undone */
.pj-extra .txt{
  position:static !important;width:auto !important;height:auto !important;
  display:block;
}
.pj-extra .txt .in{display:block}

.pjb-heading .in,
.pjb-text .in{white-space:pre-wrap}

/* her photographs are background-painted boxes, and so are these */
.pjb-photo .pjb-img{
  width:100%;background:#242121 center/cover no-repeat;
}

/* her pill, unchanged — the label is a flow child here rather than an
   absolutely-placed one, which is the only difference */
.pj-extra .btn{
  position:relative !important;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 34px;min-height:44.47px;
}
.pj-extra .btn .txt{position:static !important}

.pjb-btn-wrap{display:flex}
.pjb-a-left  {justify-content:flex-start}
.pjb-a-center{justify-content:center}
.pjb-a-right {justify-content:flex-end}

.pjb-spacer{width:100%}

/* ── on a phone ───────────────────────────────────────────────────────────
   The artboard collapses to a single column under 1024, and mobile.css
   forces .sec children static. The band follows the same rule rather than
   inventing a second one. */
@media (max-width:1023.98px){
  .pj-extra{
    position:static !important;width:100% !important;
  }
  .pjb{padding:0 var(--m-pad, 20px)}
  .pj-extra .btn{width:auto;align-self:center}
}