/* Fierce Mild v2: their usual, the introduction, the cheek, the crawl, the
   card. Loaded after fm.css. */

/* ---------------------------------------------------- your usual (stand) */
.usual { margin-top: 1.6rem; max-width: 34rem; }
.usual__l { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 0.55rem; }
.usual__l u { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.usual__row { display: flex; gap: 0.5rem; }
.usual__in {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 0.9em;
  border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--paper-hi); color: var(--ink);
  font: 600 1rem/1.2 var(--sc-font-text);
}
.usual__in::placeholder { color: #8C857A; font-weight: 500; }
.is-roared .usual .btn--ink:hover { background: var(--paper-hi); color: var(--ink); }
.stand__poke { margin-top: 0.9rem; }
.order--yours { background: var(--paper-hi); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.order--yours::before { content: "Yours: "; font-weight: 800; }

/* -------------------------------------------------------------- the pour
   A pinned bar: the copy and the facts on the left, and on the right the
   bottle, the pint and him behind the counter. The JS drives the pour. */
.pour__stage { background: var(--paper); color: var(--ink); --beer: #DFA238; --beer-hi: #EFC25E; --beer-op: 0.94; }
.pour__stage[data-beer="lager"] { --beer: #EEC43F; --beer-hi: #F8DC7A; --beer-op: 0.86; }
.pour__copy { position: absolute; z-index: 3; left: clamp(1rem, 4.4vw, 4.5rem); top: calc(var(--bar-h) + 5vh); width: min(44vw, 640px); }
.pour__h { font-size: clamp(3rem, 1.4rem + 4.6vw, 7rem); }
.pour__who { margin: 0.7rem 0 0; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.pick { display: inline-flex; margin-top: 1.4rem; border: 2px solid var(--ink); border-radius: var(--r); padding: 3px; gap: 3px; background: var(--paper-hi); }
.pick__b { min-height: 42px; padding: 0 1.1em; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 800 0.98rem/1 var(--sc-font-text); cursor: pointer; transition: background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out); }
.pick__b[aria-pressed="true"] { background: var(--ink); color: var(--paper-hi); }
.pick__b[data-pick="lager"][aria-pressed="true"] { background: var(--sage-deep); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pick__b[aria-pressed="false"]:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); } }
.facts { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: f; }
.facts li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.4rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); opacity: 0.16; transition: opacity 260ms var(--sc-ease-out); counter-increment: f; }
.facts li::before { content: counter(f, decimal-leading-zero); grid-row: 1 / 3; font: 700 0.8rem/1.6 var(--sc-font-mono); color: var(--ink-soft); }
.facts li b { font: 400 clamp(1.5rem, 1rem + 1.2vw, 2.3rem)/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.facts li span { grid-column: 2; font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.2rem; }
.facts li.is-in { opacity: 1; }
.facts li.is-in::before { color: var(--red); }
.facts li.is-on b { color: var(--red); }
.pour__buy {
  position: absolute; z-index: 4; left: clamp(1rem, 4.4vw, 4.5rem);
  bottom: calc((100% - var(--bar-h) - 2vh) * 40 / 700); translate: 0 50%;
  display: flex; align-items: center; gap: 1.4rem;
}
.pour__buy [hidden] { display: none; }
.pour__more { font-weight: 800; color: var(--paper); text-underline-offset: 0.22em; text-decoration-thickness: 2px; }

.pour__scene { position: absolute; z-index: 2; right: clamp(1rem, 5vw, 5rem); bottom: 0; height: calc(100% - var(--bar-h) - 2vh); aspect-ratio: 600 / 700; }
.pour__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.pour__crt { position: absolute; z-index: 0; left: 54%; bottom: 0; height: 66%; width: auto; aspect-ratio: 380 / 640; transform-origin: 58% 100%; transition: transform 420ms cubic-bezier(.3,1.4,.5,1); }
.pour__glass { fill: rgb(251 248 242 / 0.22); stroke: var(--ink); stroke-width: 4.5; stroke-linejoin: round; }
.pour__shine { fill: none; stroke: #fff; stroke-opacity: 0.7; stroke-width: 7; stroke-linecap: round; }
.pour__mark { color: var(--paper-hi); opacity: 0.92; }
.pour__liquid { fill: var(--beer); fill-opacity: var(--beer-op); transition: fill 400ms var(--sc-ease-out); }
.pour__stream { fill: var(--beer-hi); transition: fill 400ms var(--sc-ease-out); }
.pour__head { fill: #FBF6EA; }
.pour__bubbles circle { fill: #FFF6D8; opacity: 0.75; animation: rise 2.2s linear infinite; }
.pour__bubbles circle:nth-child(2n) { animation-duration: 1.6s; animation-delay: -0.7s; }
.pour__bubbles circle:nth-child(3n) { animation-duration: 2.8s; animation-delay: -1.3s; }
.pour__stage[data-beer="lager"] .pour__bubbles circle { animation-duration: 1.3s; }
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(-300px); } }
.pour__img { transition: opacity 300ms var(--sc-ease-out); }
.pour__img--lager { opacity: 0; }
.pour__stage[data-beer="lager"] .pour__img--lager { opacity: 1; }
.pour__stage[data-beer="lager"] .pour__img--xpa { opacity: 0; }
.pour__counter { fill: var(--ink); }
.pour__rail { fill: #45423D; }
.pour__word { position: absolute; z-index: 2; left: 52%; right: -4%; bottom: 1.2%; margin: 0; text-align: center; font-size: clamp(2rem, 1rem + 2.4vw, 3.8rem); color: var(--paper); pointer-events: none; opacity: 0; transform: translateY(20%); transition: opacity 220ms var(--sc-ease-out), transform 320ms cubic-bezier(.3,1.5,.5,1); }
.pour__word.is-on { opacity: 1; transform: none; }
.pour__stage::after { /* the counter carries on across the room */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc((100% - var(--bar-h) - 2vh) * 80 / 700);
  background: var(--ink);
}
/* his moods (shared with the stand-ins elsewhere) */
/* the moods: he acts out each word of his own brief as it goes by */
.mood-quirky .crt--him { transform: rotate(-7deg); }
.mood-fun-type .crt--him { animation: hop 520ms cubic-bezier(.3,.7,.3,1) infinite alternate; }
.mood-shapeshifter-like .crt--him { animation: morph 1.4s ease-in-out infinite; }
.mood-hairy .crt--him { animation: fuzz 90ms steps(2) infinite; }
.mood-sombre .crt--him { transform: scale(0.96, 0.9); color: #6B665E; }
.mood-happy .crt--him { animation: hop 380ms cubic-bezier(.3,.7,.3,1) infinite alternate; }
.mood-fire-burping .crt__burst, .mood-ferocious .crt__burst, .mood-angry .crt__burst { opacity: 1; transform: none; }
.mood-fire-burping .crt--him { transform: scale(1.03, 0.97); }
.mood-soft .crt--him { transform: scale(1.08, 0.9); }
.mood-whimsical .crt--him { animation: float 1.8s ease-in-out infinite; }
.mood-angry .crt--him { color: var(--red); animation: fuzz 70ms steps(2) infinite; }
.mood-puppy-eyed .crt--him { transform: rotate(5deg) scale(0.97); }
.mood-ferocious .crt--him { transform: scale(1.1); }
.mood-determined .crt--him { transform: rotate(4deg) translateX(4%); }
.mood-independent .crt--him { transform: translateX(16%) rotate(-3deg); }
.mood-bohemian .crt--him { animation: sway 1.6s ease-in-out infinite; }
.mood-ear-arms .crt--him { animation: wave 420ms ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0) scale(1.03, 0.97); } to { transform: translateY(-9%) scale(0.97, 1.04); } }
@keyframes morph { 0%, 100% { transform: skewX(0) scale(1); } 25% { transform: skewX(-9deg) scale(1.08, 0.94); } 50% { transform: skewX(6deg) scale(0.92, 1.1); } 75% { transform: skewX(-3deg) scale(1.05, 0.96); } }
@keyframes fuzz { from { transform: translate(-1.5px, 0.5px) rotate(-0.6deg); } to { transform: translate(1.5px, -0.5px) rotate(0.6deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5%) rotate(3deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes wave { from { transform: rotate(-4deg) scaleX(1); } to { transform: rotate(4deg) scaleX(1.05); } }

/* ------------------------------------------------------- proof additions */
.press { grid-column: 1 / 8; margin-top: clamp(1rem, 3vh, 2rem); }
.press__l { margin: 0 0 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem; color: var(--red); }
.press ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #55524D; }
.press li { padding: 0.8rem 0; border-bottom: 1px solid #55524D; color: #CFC8BB; }
.press li b { color: var(--paper); margin-right: 0.5em; font: 400 1.5rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.verdict { grid-column: 8 / 13; margin: clamp(1rem, 3vh, 2rem) 0 0; padding: 1.6rem; background: var(--sage); color: var(--ink); border-radius: var(--r); rotate: 1.5deg; }
.verdict blockquote { margin: 0; }
.verdict p { margin: 0; font: 400 clamp(2rem, 1.3rem + 2vw, 3.4rem)/0.95 var(--sc-font-display); text-transform: uppercase; }
.verdict figcaption { margin-top: 0.8rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }

.cheek { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; margin-top: clamp(4rem, 12vh, 8rem); }
.cheek figure { margin: 0; }
.cheek img { width: 100%; height: auto; border-radius: var(--r); }
.cheek__a img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.cheek__b { align-self: end; }
.cheek__b img { aspect-ratio: 3 / 4; object-fit: cover; }
.cheek__b figcaption { margin-top: 0.8rem; color: #CFC8BB; font-size: 0.95rem; }
.cheek__copy p { color: #CFC8BB; margin: 1rem 0 0; font-size: 1.06rem; }
.cheek__copy b { color: var(--paper); }
.cheek__copy .cheek__h { margin: 0; color: var(--paper); font-size: clamp(2.6rem, 1.4rem + 3.4vw, 5.4rem); }

/* --------------------------------------------------------------- crawl */
.crawl { background: var(--paper); padding-block: clamp(6rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem); border-bottom: 2px solid var(--ink); overflow: clip; }
.crawl__h { font-size: clamp(3.4rem, 1.6rem + 7vw, 9.5rem); }
.crawl__lede { margin: 1.2rem 0 0; max-width: 30ch; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); font-weight: 700; line-height: 1.3; }
.crawl__route { position: relative; margin-top: clamp(3rem, 8vh, 5rem); display: grid; gap: clamp(2rem, 6vh, 4rem); }
.crawl__path {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(var(--route, 0) * 100%) no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 100% calc(var(--route, 0) * 100%) no-repeat;
}
.crawl__path path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.01 0.012; }
.pub { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: min(100%, 860px); }
.pub--2 { justify-self: end; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.pub--2 .pub__copy { text-align: right; }
.pub--2 .pub__copy > p:last-child { margin-left: auto; }
.pub--2 .pub__clip { order: 2; }
.pub__clip { position: relative; aspect-ratio: 9 / 14; overflow: hidden; border-radius: var(--r); background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 10px 10px 0 var(--ink); rotate: -1.5deg; }
.pub--2 .pub__clip { rotate: 1.5deg; }
.pub__clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub__n { position: absolute; left: 12px; top: 10px; font: 400 2.4rem/1 var(--sc-font-display); color: var(--paper-hi); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pub__copy { background: var(--paper); padding: 1rem 0; }
.pub__h { font-size: clamp(3rem, 1.6rem + 4.4vw, 6.6rem); }
.pub__where { margin: 0.6rem 0 0; font: 700 0.95rem/1 var(--sc-font-mono); letter-spacing: 0.04em; color: #B8341F; }
.pub__copy > p:last-child { margin: 1rem 0 0; max-width: 32ch; font-size: 1.08rem; color: var(--ink-soft); }
.crawl__more { margin-top: clamp(4rem, 10vh, 6rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.crawl__more p { margin: 0; max-width: 52ch; font-size: 1.1rem; }
.crawl__more .buy { margin: 0; }

/* -------------------------------------------------------- tribe (v2) */
.tribe__ph { position: relative; }
.tribe__ph figcaption {
  position: absolute; left: 10px; bottom: 10px;
  font: 700 0.8rem/1.3 var(--sc-font-mono); color: var(--ink);
  background: var(--paper-hi); padding: 6px 9px; border-radius: 6px; width: fit-content; max-width: calc(100% - 20px);
}
.tribe__ph--field { grid-column: 6 / 9; grid-row: 1 / 3; aspect-ratio: 482 / 900; margin-top: 2rem; }
.tribe__ph--granny { grid-column: 9 / 13; grid-row: 1; aspect-ratio: 4 / 4.4; }
.tribe__ph--granny img { object-position: 50% 30%; }
.tribe__ph--marathon { grid-column: 9 / 12; grid-row: 2; aspect-ratio: 4 / 4.6; }
.tribe__ph--yoga { grid-column: 1 / 7; grid-row: 3; aspect-ratio: 16 / 10; margin-top: 1rem; }
.tribe__ph--yoga img { object-position: 50% 62%; }
.tribe__ph--yarra { grid-column: 7 / 11; grid-row: 3; aspect-ratio: 1; margin-top: 4rem; }

/* ------------------------------------------------------ membership card */
.member { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: clamp(5rem, 12vh, 8rem); padding-block: clamp(3rem, 8vh, 5rem); border-block: 2px solid var(--ink); }
.member__h { font-size: clamp(3rem, 1.6rem + 5vw, 7rem); }
.member__form > p { margin: 1rem 0 1.4rem; font-size: 1.12rem; font-weight: 600; }
.member__f { display: grid; gap: 0.35rem; margin-top: 0.9rem; max-width: 26rem; }
.member__f > span { font: 400 1.15rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.member__f .usual__in { width: 100%; }
.member__sel {
  min-height: 48px; padding: 0 2.2em 0 0.9em; border-radius: var(--r); border: 2px solid var(--ink);
  background: var(--paper-hi) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%232B2A28' stroke-width='2' fill='none'/></svg>") no-repeat right 0.8em center;
  appearance: none; font: 600 1rem/1 var(--sc-font-text); color: var(--ink); cursor: pointer;
}
.member__out { display: grid; justify-items: center; gap: 1.4rem; }
.card {
  position: relative; width: min(100%, 460px); aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--paper-hi); color: var(--ink);
  border-radius: 18px; padding: 8% 8% 7%;
  box-shadow: 0 0 0 2px var(--ink), 0 2px 4px hsl(var(--sc-shadow-color) / 0.16), 0 34px 60px -24px hsl(var(--sc-shadow-color) / 0.55);
  rotate: -2.5deg;
  display: flex; flex-direction: column;
}
.card::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--ink); border-radius: 12px; pointer-events: none; }
.card.is-new { animation: cardin 700ms cubic-bezier(.2,1.3,.4,1); }
@keyframes cardin { from { transform: translateY(-14%) scale(0.92); opacity: 0.2; } }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.card__logo { width: 46%; color: var(--ink); }
.card__no { margin: 0; text-align: right; font: 700 0.78rem/1.35 var(--sc-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.card__name { margin-top: auto; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 0.9; max-width: 8ch; overflow-wrap: anywhere; position: relative; z-index: 1; }
.card__dl { margin: 1rem 0 0; position: relative; z-index: 1; max-width: 64%; }
.card__dl div { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.6rem; padding: 0.4rem 0; border-top: 1.5px dashed var(--ink); font-size: 0.92rem; }
.card__dl dt { font: 700 0.74rem/1.5 var(--sc-font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.card__dl dd { margin: 0; font-weight: 800; }
.card__crt { position: absolute; right: -6%; bottom: -12%; height: 62%; width: auto; aspect-ratio: 380 / 640; color: var(--ink); rotate: -8deg; }
.card__foot { margin: 1rem 0 0; font: 700 0.7rem/1 var(--sc-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #B8341F; position: relative; z-index: 1; }
.perks__h { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.6rem); margin-top: clamp(4rem, 10vh, 6rem); }
.perks__h + .merch { margin-top: 2rem; }

/* ------------------------------------------------------------ cap pop
   Each beer photo starts as a crown cap on the paper. Scroll pops it off
   (with a fizz) and the photo opens out from where it sat. */
[data-cap] { position: relative; overflow: visible !important; --cy: 46%; }
[data-cap] img { clip-path: circle(var(--rr, 0px) at 50% var(--cy)); }
.mixed__photo[data-cap] img { border-radius: var(--r); }
.cap {
  position: absolute; z-index: 3; left: 50%; top: var(--cy);
  width: clamp(120px, 30vw, 190px); aspect-ratio: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 10px 14px hsl(var(--sc-shadow-color) / 0.35));
  pointer-events: none; will-change: transform, opacity;
}
.cap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cap__crimp { fill: var(--ink); }
.cap__ring { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 3; }
.cap__flame { color: var(--ink); }
.beer--lager .cap__crimp { fill: #4C5640; }
.beer--lager .cap__ring { stroke: #4C5640; }
.beer--lager .cap__flame { color: #4C5640; }
.mixed__photo .cap__crimp { fill: var(--red); }
.mixed__photo .cap__ring { stroke: var(--red); }
.fizz { position: absolute; z-index: 2; left: 50%; top: var(--cy); width: 0; height: 0; pointer-events: none; opacity: var(--fz, 0); }
.fizz i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: clamp(26px, 7vw, 46px);
  background: var(--ink); border-radius: 3px; transform-origin: 3px 3px;
  transform: rotate(calc(var(--i) * 36deg)) translateY(calc(clamp(70px, 19vw, 120px) * var(--fs, 1)));
}
.beer--lager .fizz i { background: #4C5640; }
.fizz i:nth-child(1) { --i: 0; } .fizz i:nth-child(2) { --i: 1; } .fizz i:nth-child(3) { --i: 2; } .fizz i:nth-child(4) { --i: 3; } .fizz i:nth-child(5) { --i: 4; }
.fizz i:nth-child(6) { --i: 5; } .fizz i:nth-child(7) { --i: 6; } .fizz i:nth-child(8) { --i: 7; } .fizz i:nth-child(9) { --i: 8; } .fizz i:nth-child(10) { --i: 9; }
.rm [data-cap] img { clip-path: none; }
.rm .cap, .rm .fizz { display: none; }

@media (max-width: 900px) {
  .usual__row { flex-direction: column; }
  .usual { margin-top: 1.1rem; }
  .usual__l { font-size: 0.98rem; }
  .stand__after .stand__sub { display: none; }

  .pour__copy { top: calc(var(--bar-h) + 2.4vh); right: clamp(1rem, 4.4vw, 4.5rem); width: auto; }
  .pour__h { font-size: clamp(2.6rem, 12vw, 4rem); }
  .pour__who { font-size: 0.72rem; }
  .pick { margin-top: 0.9rem; display: flex; }
  .pick__b { flex: 1; padding: 0 0.6em; font-size: 0.9rem; }
  /* one fact at a time on a phone: the newest one */
  .facts { position: relative; border: 0; margin-top: 0.9rem; min-height: 4.4rem; }
  .facts li { position: absolute; inset: 0 0 auto 0; border: 0; padding: 0; opacity: 0; }
  .facts li.is-in { opacity: 0; }
  .facts li.is-on { opacity: 1; }
  .facts li b { font-size: 1.7rem; }
  .pour__buy { display: none; }
  .pour__scene { right: 50%; translate: 50% 0; height: 56%; bottom: 3%; }
  .pour__stage::after { height: calc(56% * 80 / 700 + 3%); }
  .beer__photo { height: 62vh; }
  .pour__word { top: -2%; bottom: auto; left: 40%; right: 0; font-size: 2.4rem; color: var(--red); }

  .press, .verdict { grid-column: 1; }
  .verdict { rotate: 0deg; }
  .cheek { grid-template-columns: 1fr 1fr; }
  .cheek__copy { grid-column: 1 / 3; order: -1; }
  .cheek__b figcaption { font-size: 0.85rem; }

  .pub, .pub--2 { grid-template-columns: 1fr; width: 100%; }
  .pub__clip { width: 74%; }
  .pub--2 .pub__clip { order: 0; justify-self: end; }
  .pub--2 .pub__copy { text-align: right; }
  .pub--2 .pub__copy > p:last-child { margin-left: auto; }

  .tribe__ph--field { grid-column: 1; grid-row: auto; margin-top: 0; }
  .tribe__ph--granny { grid-column: 2; grid-row: auto; aspect-ratio: 482 / 900; }
  .tribe__ph--marathon { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .tribe__ph--yarra { grid-column: 2; grid-row: auto; aspect-ratio: 4 / 5; margin-top: 0; }
  .tribe__ph--yoga { grid-column: 1 / 3; grid-row: auto; margin-top: 0; }
  .tribe__ph figcaption { font-size: 0.7rem; }

  .member { grid-template-columns: 1fr; }
  .card { rotate: -1.5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .crt--him { animation: none !important; transition: none; }
  .card.is-new { animation: none; }
}
.beers { overflow-x: clip; }