/* ---------------- 21 MORRO */
.mo { background: var(--paper); color: var(--ink); }
/* the header is 625px tall, and the photograph is the same (her word, 6 Oct 2026) */
/* The stage grows with its words instead of standing at a fixed 625px. While
   it was fixed, the gap under the last line was whatever height happened to
   be left over — 26px on a wide screen — and no number she typed could reach
   it — 97px even once the stage grew, because a 625px floor still held it
   open. There is no floor now: the stage is exactly its words plus the space
   she set, so 50 means 50 on every screen. The photograph follows the stage
   rather than the old fixed number. (10 Oct 2026) */
.mo-hero { position: relative; overflow: hidden; padding: 0 var(--edge); }
.mo-blob { position: absolute; border-radius: 50% 50% 46% 54% / 55% 45% 55% 45%; filter: blur(.3px); }
.mo-blob.b1 { background: var(--blob1); width: 34vw; height: 42vw; right: 24%; top: 14%; }
.mo-blob.b2 { background: var(--blob2); width: 30vw; height: 34vw; right: -4%; top: 4%; border-radius: 46% 54% 50% 50% / 45% 55% 45% 55%; }
.mo-kicker { position: relative; z-index: 3; font: 600 var(--tiny)/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 26px; }
/* Two lines, as big as they can be without reaching her (her word, 6 Oct 2026):
   the break is hers, and neither line is allowed to wrap again. */
/* Two lines, and the second one ends as far from the photograph as the first
   begins from the edge — 70px either side (her word, 6 Oct 2026). The size is
   worked out from the room between them, so it holds as the window changes. */
.mo-title { position: relative; z-index: 3; font: 400 clamp(40px, calc(12.29vw - 26px), 200px)/.86 'Anton', var(--display);
  letter-spacing: -.01em; margin: 0; max-width: none; white-space: nowrap; text-transform: uppercase; }
.mo-sub { position: relative; z-index: 3; font: 600 12px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 28px 0 26px; }
/* her three lines stand one under the other again (her word, 6 Oct 2026) */
.mo-sub span { display: block; }
/* The hover line: on a mouse it rides with the cursor instead of standing in
   the header, so it is hidden here and carried by shirt-tip.js. A phone has no
   cursor, so there it simply reads as the last line (her word, 7 Oct 2026). */
.mo-sub .mo-tip { display: none; }
@media (hover: none), (pointer: coarse) { .mo-sub .mo-tip { display: block; } }
.mo-ctas { position: relative; z-index: 3; display: flex; gap: 12px; flex-wrap: wrap; }
.mo-btn { display: inline-flex; align-items: center; gap: 22px; background: var(--blob1); color: #fff; text-decoration: none; padding: 16px 22px; font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.mo-btn.ghost { background: none; color: var(--ink); border: 1.5px solid var(--ink); }
/* She stands into the frame and keeps breathing there, and the two shapes
   behind her drift the other way, so the header is never quite still
   (her word, 6 Oct 2026). */
/* She stands on the floor of the section and stays there: the breathing drift
   lifted her and opened a strip underneath, so the figure does not move at all
   now (her word, 6 Oct 2026). Only the change from one design to the next is
   animated, and that is a fade. */
/* Every photograph the same height as the header itself — 625px — in the right
   third (her word, 6 Oct 2026). */
.mo-fig { position: absolute; z-index: 2; right: 0; top: 0; height: 100%; width: 33.333%; }
.mo-fig picture, .mo-fig img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 25%; }
/* the background is cut away completely, and her five take turns standing there
   (her word, 6 Oct 2026) */
.mo-fig .mo-shot { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; }
.mo-fig .mo-shot.on { opacity: 1; }
@keyframes moRise { from { opacity: 0; transform: translate3d(5%, 26px, 0) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes moBreathe { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -14px, 0) scale(1.012); } }
/* the yellow and the red circle are out (her word, 6 Oct 2026) */
.mo-blob { display: none; }
.mo-blob { animation: moDrift 13s ease-in-out infinite alternate; }
.mo-blob.b2 { animation: moDrift2 17s ease-in-out infinite alternate; }
@keyframes moDrift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-2.2%, 2.6%, 0) rotate(5deg); } }
@keyframes moDrift2 { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(2.4%, -2.2%, 0) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .mo-blob, .mo-blob.b2 { animation: none; } .mo-shot { transition: none; } }
/* Read the other way up, bottom to top, with the batch number on it — and in
   white over the photograph, with a soft shadow, so it can actually be read
   (her word, 6 Oct 2026). */
/* Nineteen letters, nineteen shirts (her word, 6 Oct 2026): the design lives
   inside the letter and shows through its shape when you touch it. */
.mo-l { display: inline-block; color: inherit; text-decoration: none; background-image: var(--shot);
  background-size: cover; background-position: 50% 28%; -webkit-background-clip: text; background-clip: text;
  transition: -webkit-text-fill-color .28s ease, text-fill-color .28s ease; }
/* the letter itself never moves — only its fill changes (her word, 6 Oct 2026) */
.mo-l:hover, .mo-l:focus-visible, .mo-l.is-on { -webkit-text-fill-color: transparent; color: transparent; }
.mo-l.is-on { transition-duration: .18s; }
.mo-l.is-off { transition-duration: .55s; }
@media (hover: none) { .mo-l { -webkit-text-fill-color: currentColor; color: inherit; } }
/* Her words where the two cards were (6 Oct 2026): what the purchase pays for,
   the first line leading and the rest quiet under it. */
/* The 100px under the note is hers to set on the words themselves now, from
   the bar on the page — so the block no longer carries a gap of its own, or
   her number would land on top of it and read as 190 (10 Oct 2026). */
.mo-note { position: relative; z-index: 3; margin: 18px 0 0; padding-bottom: 0; max-width: 54ch; }
.mo-note b { display: block; font: 600 clamp(15px, 1.3vw, 19px)/1.4 var(--body); margin-bottom: 6px; }
.mo-note p { margin: 0; font-size: clamp(13px, 1vw, 15px); line-height: 1.65; opacity: .78; }
.mo-note p.gap { margin-top: 12px; }
/* the gap under the note belongs to the words now, not to the block (10 Oct 2026) */
@media (max-width: 860px) { .mo-note { padding-bottom: 0; } }
.mo-side { position: absolute; z-index: 4; right: 22px; top: 18%; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font: 600 var(--tiny) var(--mono); letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  color: var(--nav-ink); opacity: 1; text-shadow: 0 2px 10px rgba(0,18,25,.85); }
.mo-side b { font-weight: 700; }
.mo-mini { position: relative; z-index: 3; display: flex; gap: 16px; margin: 15px 0 0; padding-bottom: 100px; }
/* 100px above the kicker and below the last words, on a wide screen (her word, 18 Oct 2026).
   The bottom space used to ride on the two mini cards, so with the cards off the words sat
   flush on the band's floor. The stage carries it now, and the cards no longer add their own. */
@media (min-width: 1025px) {
  .mo-hero { padding-top: 100px; padding-bottom: 100px; }
  .mo-mini { padding-bottom: 0; }
}
.mo-card { position: relative; display: flex; gap: 14px; align-items: center; background: #fff; text-decoration: none; color: var(--ink); padding: 10px; width: 260px; }
.mo-card picture, .mo-card img { width: 86px; height: 86px; object-fit: cover;  object-position: 50% 0%;   /* never crop a head off */ }
.mo-card small { display: block; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.mo-card b { font: 400 17px 'Anton', var(--display); text-transform: uppercase; line-height: 1.1; }
.mo-card i { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--blob1); color: #fff; display: grid; place-items: center; font-style: normal; }
.mo-band { position: relative; background: var(--ink); color: var(--paper);   /* follows the combination */ display: grid; grid-template-columns: 30% 1fr 1fr auto; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(30px, 5vw, 60px) var(--edge); }
.mo-band-img { height: 230px; overflow: hidden; }
.mo-band-img picture, .mo-band-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4);  object-position: 50% 0%;   /* never crop a head off */ }
.mo-band-copy small { display: block; font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--blob2); margin-bottom: 14px; }
.mo-band-copy h3 { font: 400 clamp(24px, 3vw, 42px)/1.05 'Anton', var(--display); margin: 0; text-transform: uppercase; }
.mo-band-text p { font: 400 14px/1.7 var(--mono); margin: 0 0 18px; opacity: .85; }
.mo-band-text a { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid; padding-bottom: 4px; }
.mo-mark svg { width: 58px; fill: none; stroke: var(--cream); stroke-width: 2; }



/* ---------------- 24 Fashop */
.fa { display: grid; grid-template-columns: 1fr 1.25fr; min-height: max(540px, 82svh); background: var(--bg); color: var(--ink); }
.fa-left { position: relative; padding: var(--edge); display: grid; align-content: center; }
.fa-brand { position: absolute; top: clamp(20px, 3vw, 40px); left: clamp(24px, 4vw, 60px); font: 600 var(--tiny) var(--mono); letter-spacing: .34em; text-transform: uppercase; }
.fa-count { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.fa-count b { font: 400 clamp(56px, 7vw, 104px)/1 var(--display); }
.fa-count i { width: 54px; height: 1px; background: var(--ink); }
.fa-count span { font: 600 13px var(--mono); }
.fa-title { font: 700 clamp(34px, 5vw, 76px)/.98 var(--display); letter-spacing: -.02em; margin: 0 0 22px; text-transform: uppercase; }
.fa-menu { display: flex; gap: 20px; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.fa-menu a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; }
.fa-menu a:hover { border-color: var(--ink); }
.fa-side { position: absolute; left: clamp(24px, 4vw, 60px); bottom: clamp(24px, 4vw, 60px); writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.fa-right { position: relative; background: color-mix(in srgb, var(--cream) 55%, #fff); overflow: hidden; }
.fa-slide { margin: 0; height: 100%; animation: xfade .6s var(--ease); }
.fa-slide a, .fa-slide picture, .fa-slide img { display: block; width: 100%; height: 100%; object-fit: cover;  object-position: 50% 0%;   /* never crop a head off */ }
.fa-slide figcaption { position: absolute; left: 0; bottom: 0; background: var(--navy); color: #fff; padding: 14px 22px; display: flex; gap: 16px; align-items: baseline; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fa-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; background: #fff; padding: 12px 16px; }
.fa-nav button { border: 0; background: none; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.fa-nav i { width: 1px; height: 22px; background: color-mix(in srgb, var(--navy) 22%, var(--cream)); }
.fa-social { position: absolute; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 30px); display: flex; gap: 18px; background: var(--navy); color: #fff; padding: 10px 18px; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; }

/* ---------------- 25 Dustin Voyage */
.dv { position: relative; background: var(--bg); color: var(--cream); min-height: max(560px, 88svh); padding: clamp(40px, 6vw, 80px) var(--edge); display: grid; grid-template-columns: 1.5fr .85fr .5fr .95fr; gap: clamp(14px, 2vw, 34px); align-items: start; }
.dv-stack { position: absolute; left: clamp(14px, 3.5vw, 46px); top: 46%; transform: translateY(-50%); z-index: 1; display: grid; gap: 2px; text-shadow: 0 6px 30px rgba(0,0,0,.55); }
.dv-stack span { display: flex; gap: 6px; }
.dv-stack i { font: 400 clamp(22px, 3vw, 52px)/1 'Anton', var(--display); font-style: normal; color: var(--tint); }
.dv-a { grid-column: 1; margin: 0; position: relative; height: min(64vh, 540px); }
.dv-a picture, .dv-a img, .dv-b img, .dv-c img, .dv-b picture, .dv-c picture { width: 100%; height: 100%; object-fit: cover;  object-position: 50% 0%;   /* never crop a head off */ }
.dv-a figcaption { position: absolute; left: 0; bottom: -28px; font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.dv-mid { grid-column: 3; grid-row: 1; display: grid; justify-items: center; gap: 30px; align-self: center; padding: 0 6px; }
.dv-mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--tint); font: 400 12px/1.2 var(--display); text-align: center; padding: 8px; }
.dv-mid nav { display: grid; gap: 16px; justify-items: center; font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.dv-mid nav a { text-decoration: none; }
.dv-b { grid-column: 2; margin: 0; height: min(40vh, 330px); align-self: end; }
.dv-c { grid-column: 4; grid-row: 1; align-self: start; margin: 0; height: min(50vh, 420px); position: relative; margin-top: clamp(20px, 5vh, 60px); }
.dv-vert { position: absolute; right: -26px; top: 0; writing-mode: vertical-rl; font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }

@media (max-width: 900px) {
  .mo-fig { height: 54%; right: -8%; opacity: .9; } .mo-title { font-size: 15vw; } .mo-mini { flex-wrap: wrap; }
  .mo-band { grid-template-columns: 1fr; } .mo-band-img { height: 160px; } .mo-mark { display: none; }
  .fa { grid-template-columns: 1fr; } .fa-right { min-height: 60vh; }
  .dv { grid-template-columns: 1fr 1fr; } .dv-stack { position: static; transform: none; grid-column: 1 / -1; } .dv-a { grid-column: 1 / -1; height: 46vh; } .dv-mid { grid-column: 1 / -1; grid-auto-flow: column; }
}

/* ---- the collage carrying every design ----
   The name is written under the picture rather than on it, in the colour of
   Manifesto in the bar. The price sits in a box outside the picture, at its
   lower right: the box takes the bar's word colour and the figure takes the bar's
   own colour, so the pair is the bar inside out and moves with it (her word,
   21 Sep 2026). Space Grotesk is her price face. */
.dv-shop { min-height: 0; }
.dv-more { padding-top: clamp(20px, 3vw, 46px); }
/* The picture and its name sit in two columns of the figure: the name in its
   own gutter on the left, on its side, bottom-aligned. It used to be pinned
   outside with absolute positioning, which let two of them collapse to a 1px
   hairline and vanish — a column cannot collapse (her word, 21 Sep 2026). */
.dv-shop figure { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto; column-gap: 12px; align-items: stretch; overflow: visible; }
.dv-shop figure > a { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; height: 100%; }
.dv-shop figure > a picture, .dv-shop figure > a img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.dv-shop figcaption { grid-column: 1; grid-row: 1 / -1; align-self: end; z-index: 4;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  max-height: 100%; overflow: hidden; min-width: 12px;
  font: 600 var(--tiny) var(--mono); letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  color: var(--nav-ink); text-shadow: 0 2px 10px rgba(0,18,25,.85); }
/* Under the picture now, not on it, and still at its right edge: the box is a
   row of its own in the figure, so it can never sit over the artwork. */
.dv-tag { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 5px; z-index: 3; display: inline-block;
  padding: 7px 12px; border-radius: 4px; background: var(--nav-ink); color: var(--nav-bg);
  font-family: var(--price), var(--mono); font-weight: 700; font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: -.01em; line-height: 1; white-space: nowrap; box-shadow: 0 6px 20px -8px rgba(0,18,25,.6); }
.dv-tag .from { font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-right: 5px; }
.dv-tag .compare { display: none; }
@media (max-width: 800px) {
  .dv-shop { grid-template-columns: 1fr 1fr; }
  .dv-shop .dv-a { grid-column: 1 / -1; height: min(52vh, 420px); }
  .dv-shop .dv-b { grid-column: 1; }
  .dv-shop .dv-c { grid-column: 2; grid-row: auto; margin-top: 0; }
  .dv-shop .dv-mid { grid-column: 1 / -1; grid-row: auto; }
}

/* ---- the collage, thrown rather than laid out (her word, 21 Sep 2026) ----
   Every picture is nudged, tilted and re-sized by its own --oy/--ox/--rot/--ht,
   and each block takes one of four arrangements, so no two rows read the same
   and nothing lines up with its neighbour. */
.dv-shop { align-items: start; }
.dv-shop figure { transform: translate(var(--ox, 0), var(--oy, 0)) rotate(var(--rot, 0deg)); will-change: transform; }
.dv-shop .dv-a { height: calc(min(64vh, 540px) * var(--ht, 1)); }
.dv-shop .dv-b { height: calc(min(40vh, 330px) * var(--ht, 1)); }
.dv-shop .dv-c { height: calc(min(50vh, 420px) * var(--ht, 1)); }

/* four arrangements, cycling down the page */
.dv-v1 { grid-template-columns: .9fr 1.4fr .5fr .95fr; }
.dv-v1 .dv-a { grid-column: 2; } .dv-v1 .dv-b { grid-column: 4; align-self: start; }
.dv-v1 .dv-c { grid-column: 1; align-self: end; margin-top: 0; }
.dv-v2 { grid-template-columns: .95fr .55fr 1.35fr .8fr; }
.dv-v2 .dv-a { grid-column: 3; } .dv-v2 .dv-b { grid-column: 1; align-self: center; }
.dv-v2 .dv-c { grid-column: 4; align-self: end; }
.dv-v3 { grid-template-columns: .8fr 1fr .5fr 1.3fr; }
.dv-v3 .dv-a { grid-column: 4; } .dv-v3 .dv-b { grid-column: 2; align-self: start; }
.dv-v3 .dv-c { grid-column: 1; align-self: center; margin-top: 0; }
.dv-v1 .dv-mid, .dv-v2 .dv-mid, .dv-v3 .dv-mid { grid-column: 3; }
.dv-v2 .dv-mid { grid-column: 2; }
.dv-v3 .dv-mid { grid-column: 3; }


/* ---- air between the pictures (her word, 21 Sep 2026) ----
   Scattered, but never crowded: the columns are set wide enough that even when
   two pictures lean toward each other their own nudges cannot close the gap
   below 100px, and the blocks are spaced so a low picture in one row cannot
   come up against a high one in the next. */
/* The pictures are straight now, with no sideways lean, so the columns only
   need the 100px she asked for — the extra that used to absorb the lean was
   squeezing every picture narrow. The batch number's own gutter adds a little
   more on top, so two pictures side by side always sit over 100px apart. */
.dv-shop { column-gap: 100px; row-gap: 0; padding-left: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
/* enough room between rows that a picture dropping low in one row and a tall
   one in the next still keep 100px between them */
/* the last row's prices were sitting on the foot of the band, with the next
   band's colour starting right under them (her word, 11 Oct 2026). The band
   keeps as much room below its words as it does above them. */
.dv-shop.dv-more { padding-top: clamp(200px, 21vh, 280px); padding-bottom: clamp(40px, 6vw, 80px); }
.dv-shop:first-of-type { padding-bottom: clamp(60px, 8vh, 120px); }


/* ---- the Shop figure, final shape (her word, 21 Sep 2026) ----
     [batch]  [ picture       ]
              [    design name]
              [   ₱ price box ]
   The batch number stands on its side, its foot level with the picture's lower
   corner and 10px clear of the picture. The name and the price sit under the
   picture, set to the right, 10px below it. The pictures are straight; only
   their heights and how far they drop differ, so a row reads like brickwork. */
/* nudged with a margin, not a transform, so each row grows to hold its lowest
   picture and price — a transform left some prices hanging below the row,
   where the next row painted over them (her word: "putol", 22 Sep 2026) */
.dv-shop figure { transform: none !important; margin-top: var(--oy, 0) !important; display: grid !important;
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 10px; align-items: end; overflow: visible; height: auto !important; }
/* the batch number stands at the picture's upper left corner (her word, 21 Sep
   2026) — its head level with the top of the picture, 10px clear of it */
.dv-shop .dv-batch { grid-column: 1; grid-row: 1; align-self: start;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 var(--tiny) var(--mono); letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  color: var(--nav-ink); text-shadow: 0 2px 10px rgba(0,18,25,.85); }
.dv-shop figure > a { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; }
.dv-shop .dv-a > a { height: calc(min(64vh, 540px) * var(--ht, 1)); }
.dv-shop .dv-b > a { height: calc(min(40vh, 330px) * var(--ht, 1)); }
.dv-shop .dv-c > a { height: calc(min(50vh, 420px) * var(--ht, 1)); }
.dv-shop figure > a picture, .dv-shop figure > a img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* a column that pushes everything to its right edge, so the name and the price
   both finish flush with the right side of the picture */
.dv-shop .dv-meta { grid-column: 2; grid-row: 2; justify-self: stretch; width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.dv-shop .dv-name { font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
  color: var(--nav-ink); max-width: 100%; }
.dv-shop .dv-tag { position: static; right: auto; bottom: auto; max-width: 100%; }
.dv-shop figcaption { display: none; }

/* ---- the Shop collage on a phone (her word, 21 Sep 2026: every picture must
   show its price) ----
   The four arrangements are built for a wide screen; on a phone they pushed
   nine pictures and their prices off the right edge. Here each picture takes
   the width it can, set alternately left and right so it still reads as a
   collage, with 100px between one and the next. */
@media (max-width: 700px) {
  .dv-shop, .dv-shop.dv-v1, .dv-shop.dv-v2, .dv-shop.dv-v3 {
    grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important;
    /* 50px from one design to the next (her word, 11 Oct 2026). The collage is
       built as several blocks on one navy ground; between blocks each side
       carries half the gap, so a join reads as 50 like any other, while the
       first and last keep the band's own 100 against its borders. */
    row-gap: 50px !important;
    padding: 25px 18px 25px !important; }
  .dv-shop.dv-first { padding-top: 100px !important; }
  .dv-shop:last-of-type { padding-bottom: 100px !important; }
  .dv-shop.dv-more { padding-top: 25px !important; }   /* half of the 50 between designs — 11 Oct 2026 */
  .dv-shop figure, .dv-shop .dv-a, .dv-shop .dv-b, .dv-shop .dv-c {
    grid-column: 1 !important; grid-row: auto !important; margin: 0 !important;
    transform: none !important; width: 84%; max-width: 100%; }
  .dv-shop figure:nth-of-type(odd) { justify-self: start; }
  .dv-shop figure:nth-of-type(even) { justify-self: end; }
  .dv-shop figure > a { height: auto !important; aspect-ratio: 4 / 5; }
  .dv-shop .dv-mid { grid-column: 1 !important; grid-row: auto !important; justify-self: center; }
  .dv-shop .dv-stack { position: static; transform: none; }
  .dv-shop .dv-vert { display: none; }
}

/* the ink sits on its own line under the name */
.dv-shop .dv-ink { display: block; margin-top: 2px; opacity: .8; }

/* ---- the Shop rows, pulled together (her word, 21 Sep 2026) ----
   Three pictures to a row — left, middle, right — sitting exactly 100px apart,
   picture edge to picture edge. They still step up and down like bricks and the
   big one moves about from row to row, but the rows no longer sprawl. The mark
   and the menu get a line of their own above the first row so they stop
   pushing the pictures apart. --pd-gutter is the batch number plus its 10px,
   which sits inside each figure, so the columns themselves are 100px less that. */
@media (min-width: 901px) {
  .dv-shop, .dv-shop.dv-v1, .dv-shop.dv-v2, .dv-shop.dv-v3 {
    --pd-gutter: 20px;
    grid-template-columns: repeat(3, max-content) !important;
    column-gap: calc(100px - var(--pd-gutter)) !important;
    justify-content: center !important; align-items: start !important;
    padding-left: 24px !important; padding-right: 24px !important; }
  .dv-shop .dv-a, .dv-shop .dv-b, .dv-shop .dv-c {
    grid-column: auto !important; grid-row: 2 !important; margin: 0 !important; align-self: start !important; }
  .dv-shop .dv-a { width: calc(min(30vw, 420px) + var(--pd-gutter)); }
  .dv-shop .dv-b { width: calc(min(20vw, 280px) + var(--pd-gutter)); }
  .dv-shop .dv-c { width: calc(min(23vw, 320px) + var(--pd-gutter)); }
  /* the pictures keep their order; which spot is the big one is decided when
     the row is built, so a design's inks always stand together */
  .dv-shop .dv-mid { grid-column: 1 / -1 !important; grid-row: 1 !important;
    display: flex !important; justify-content: center; align-items: center; gap: 44px; margin: 0 0 70px; }
  .dv-shop .dv-mid nav { display: flex !important; gap: 30px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .dv-shop, .dv-shop.dv-v1, .dv-shop.dv-v2, .dv-shop.dv-v3 {
    grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 50px !important; padding: 25px 24px 25px !important; }
  .dv-shop.dv-first { padding-top: 100px !important; }
  .dv-shop:last-of-type { padding-bottom: 100px !important; }
  .dv-shop figure, .dv-shop .dv-a, .dv-shop .dv-b, .dv-shop .dv-c {
    grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; transform: none !important; width: 70%; }
  .dv-shop figure:nth-of-type(odd) { justify-self: start; } .dv-shop figure:nth-of-type(even) { justify-self: end; }
  .dv-shop figure > a { height: auto !important; aspect-ratio: 4 / 5; }
  .dv-shop .dv-mid { grid-column: 1 !important; grid-row: auto !important; justify-self: center; }
  .dv-shop .dv-stack { position: static; transform: none; }
}

/* the side label now belongs to the row, not to one picture */
.dv-shop .dv-vert-row { position: absolute; right: clamp(8px, 1.4vw, 22px); top: 60px; }

/* "All designs" at the top of the Shop's collage (22 Sep 2026): on the
   collage's own color, so the heading and the designs read as one section.
   The words take the collage's cream, the title its tint. */
.dv-head { background: var(--bg); padding: 100px var(--edge) 0; }
.dv-shop.dv-first { padding-top: 100px; }
/* 100 above the Complete Collection heading and 100 under it, like every other
   band (her word, 11 Oct 2026) */
@media (max-width: 700px) { .dv-head { padding: 100px 20px 0; } .dv-shop.dv-first { padding-top: 100px; } }
.dv-head .listing-head { margin: 0; color: var(--cream, #EAE2B7); }
.dv-head .listing-head .display { color: var(--tint); }
.dv-head .listing-copy p { color: var(--cream, #EAE2B7); opacity: .9; }
.dv-head .sort, .dv-head .sort .muted { color: var(--cream, #EAE2B7); }
.dv-head .sort select { background: transparent; color: var(--cream, #EAE2B7); border-color: color-mix(in srgb, var(--cream, #EAE2B7) 40%, transparent); }
.dv-head .sort select option { color: #001E2D; }

/* ---- the opening picture on a phone (23 Sep 2026, mobile + iPad check) ----
   The design's name sits bottom-left of the picture and the two social words
   bottom-right. On a 375px screen the two bars met in the middle: the name read
   "FREE DUTERTE SURF…" with Facebook printed over its last word. The social
   pair moves to the top of the picture, where nothing else is, and the name
   keeps the full width of the bottom. The small links get a thumb's worth of
   padding without moving a single word (the negative margin gives it back). */
@media (max-width: 700px) {
  .fa-slide figcaption { right: 0; padding: 12px 16px; gap: 10px; font-size: var(--tiny); flex-wrap: wrap; }
  .fa-social { top: 12px; right: 12px; bottom: auto; padding: 8px 12px; gap: 14px; }
}

/* An iPad in landscape is 1024px: there the name bar reached 799px and the
   social pair began at 790px, so Facebook printed over the last letters. The
   bar now stops short of the pair, and a long name wraps inside it instead of
   running under it. (23 Sep 2026) */
@media (min-width: 701px) and (max-width: 1100px) {
  .fa-slide figcaption { max-width: calc(100% - 230px); flex-wrap: wrap; }
}

/* Tablets are touched too: an iPad in portrait is 768–834px and a Pad 5 is
   800px, both just past the phone breakpoint. The targets grow there as well;
   the equal negative margin keeps every word where it is. (23 Sep 2026) */
@media (max-width: 900px) {
  .fa-menu a { display: inline-block; padding: 0.55rem 0; margin: -0.55rem 0; }
  .fa-nav button { padding: 0.55rem 0.4rem; margin: -0.55rem -0.4rem; }
}

/* the manifesto band's one link, same thumb-sized target (23 Sep 2026) */
@media (max-width: 900px) {
  .mo-band-text a { display: inline-block; padding: 0.55rem 0; margin: -0.55rem 0; }
}

/* ---- Where your money goes (her word, 6 Oct 2026) ------------------------
   Its own band, loud on purpose: the line in her display face, the last words
   in amber, and the things it pays for running along the foot. */
.fnd { position: relative; background: var(--bg); color: var(--ink); overflow: hidden;
  padding: clamp(64px, 9vw, 130px) var(--edge); }
/* when the rail is there it carries the foot of the band itself */
.fnd:has(.fnd-rail) { padding-bottom: 0; }
.fnd-glow { position: absolute; width: 70vw; height: 70vw; right: -22vw; top: -34vw; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hot) 34%, transparent), transparent 72%);
  filter: blur(2px); animation: fndBreathe 11s ease-in-out infinite alternate; }
@keyframes fndBreathe { from { transform: scale(1) translate3d(0,0,0); opacity: .75; }
  to { transform: scale(1.12) translate3d(-2%, 3%, 0); opacity: 1; } }
.fnd-in { position: relative; z-index: 2; width: min(1280px, 100%); margin: 0 auto; }
/* the label sits at the right of the band, not the left (her word, 6 Oct 2026) */
.fnd-kicker { display: block; text-align: right; font: 600 var(--tiny) var(--mono); letter-spacing: .3em;
  text-transform: uppercase; color: var(--hot); margin-bottom: 18px; }
/* The label keeps to the right on a phone too — the band reads from the right
   and the label is part of that (her word, 10 Oct 2026). The headline and the
   paragraph still turn left on a phone, where a ragged left edge is hard to
   read on a narrow screen. */
@media (max-width: 700px) { .fnd-head, .fnd-text { text-align: left; } .fnd-text { margin-right: 0; } }
/* the whole band reads from the right (her word, 6 Oct 2026) */
.fnd-head { margin: 0; font: 400 clamp(44px, 7.6vw, 122px)/.92 'Anton', var(--display);
  letter-spacing: -.01em; text-transform: uppercase; text-align: right; }
.fnd-head span, .fnd-head em { display: block; font-style: normal; }
.fnd-head em { color: var(--hot); position: relative; }
.fnd-text { margin: clamp(22px, 3vw, 34px) 0 0 auto; max-width: 62ch; text-align: right;
  font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; opacity: .88; }
.fnd-rail { position: relative; z-index: 2; margin-top: clamp(40px, 6vw, 76px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); overflow: hidden; }
.fnd-run { display: flex; align-items: center; justify-content: flex-end; gap: 22px; white-space: nowrap; padding: 18px 0 20px;
  font: 600 12px var(--mono); letter-spacing: .26em; text-transform: uppercase;
  animation: fndRun 26s linear infinite; }
.fnd-run i { font-style: normal; color: var(--hot); }
@keyframes fndRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fnd-glow, .fnd-run { animation: none; } }
/* her logo in place of the lettering (9 Oct 2026) */
.fa-logo { height: 16px; width: auto; }

/* ---------------------------------------- Morro on a pad and on a phone ----
   Her word, 9 Oct 2026. On a pad the photograph takes a third of the screen
   and the words keep the rest — until now the headline ran on underneath it,
   because the title was sized off the whole window while the picture sat on
   top of it. The right third is reserved, and the type is worked out from what
   is left.

   On a phone there is no room to stand side by side at all, so the photograph
   goes above the words rather than across them, edge to edge, and the headline
   is allowed to wrap. */

@media (min-width: 701px) and (max-width: 1024px) {
  .mo-hero { padding-left: var(--edge); padding-right: calc(33.333% + clamp(18px, 3vw, 32px)); }
  .mo-fig { width: 33.333%; right: 0; top: 0; height: 100%; opacity: 1; }
  /* as big as it goes while still stopping a clear margin short of the
     photograph — the same breathing room her desktop layout keeps */
  .mo-title { font-size: clamp(34px, 10.3vw, 92px); line-height: .9; white-space: nowrap; }
  .mo-sub { margin-top: 22px; }
  /* the batch number up the side is a detail for a wide screen; on a pad it
     only crowds the photograph (her word, 9 Oct 2026) */
  .mo-side { display: none; }
}

@media (max-width: 700px) {
  /* her word, 9 Oct 2026: 35px in from the edge on a phone */
  .mo-hero { height: auto; display: flex; flex-direction: column;
    padding: 0 var(--edge) 0; }
  /* the picture first, the full width of the screen */
  /* relative, not static: the photographs inside are laid one on another and
     need this box to measure themselves against, or they fill the whole
     section and the words end up printed over the picture */
  /* no gap of its own under the photo: the space between the photo and the
     first words is hers, set on those words from the bar (10 Oct 2026) */
  .mo-fig { position: relative; order: -1; width: calc(100% + var(--edge) * 2);
    margin: 0 calc(var(--edge) * -1) 0; height: clamp(260px, 50svh, 420px);
    right: auto; opacity: 1; }
  .mo-fig picture, .mo-fig img { object-position: 50% 18%; }
  /* and it is gone on a phone too */
  .mo-side { display: none; }
  .mo-kicker { margin: 0 0 16px; }
  /* the two lines are set tight on a wide screen; at this size they touch, so
     they are given a little air back */
  .mo-title { font-size: clamp(34px, 11.2vw, 62px); line-height: .95; white-space: normal; }
  .mo-sub { margin: 20px 0 20px; }
  .mo-mini { padding-bottom: clamp(24px, 8vw, 48px); }
}