/* ---------------- 21 MORRO */
.mo { background: var(--paper); color: var(--ink); }
.mo-hero { position: relative; min-height: max(620px, 92svh); overflow: hidden; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 70px) 0; }
.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 11px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 26px; }
.mo-title { position: relative; z-index: 3; font: 400 clamp(64px, 12.5vw, 200px)/.82 'Anton', var(--display); letter-spacing: -.01em; margin: 0; max-width: 8em; 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; }
.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); }
.mo-fig { position: absolute; z-index: 2; right: 2%; bottom: 0; height: 90%; }
.mo-fig picture, .mo-fig img { height: 100%; width: auto; }
.mo-side { position: absolute; z-index: 4; right: 22px; top: 18%; writing-mode: vertical-rl; font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.mo-mini { position: relative; z-index: 3; display: flex; gap: 16px; margin: 40px 0 0; padding-bottom: 40px; }
.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 9px 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) clamp(20px, 5vw, 70px); }
.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 10px 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 11px 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: clamp(24px, 4vw, 60px); display: grid; align-content: center; }
.fa-brand { position: absolute; top: clamp(20px, 3vw, 40px); left: clamp(24px, 4vw, 60px); font: 600 11px 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 11px 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 10px 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 11px 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 10px 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) clamp(20px, 5vw, 70px); 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 9px 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 11px 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 9px 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 10px 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 8px 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 */
.dv-shop.dv-more { padding-top: clamp(200px, 21vh, 280px); padding-bottom: 0; }
.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 10px 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 10px 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; row-gap: 100px !important;
    padding: 40px 18px 0 !important; }
  .dv-shop.dv-more { padding-top: 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: 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: 100px !important; padding: 40px 24px 0 !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: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 80px) 0; }
.dv-shop.dv-first { padding-top: 100px; }
@media (max-width: 700px) { .dv-head { padding: 40px 20px 0; } .dv-shop.dv-first { padding-top: 40px; } }
.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; }