/** Shopify CDN: Minification failed

Line 184:26 Unexpected ";"

**/
/* KOKO GALLERY CARDS
   Fonts are self hosted so the card type costs two files, not a third party request.
   Archivo is the variable family the loud headlines need; the theme does not load it.
   The card is drawn on a 1080 grid and scaled to the slide by --kc-s, set in
   koko-cards.js from the real box width, because CSS cannot divide a length by a length. */
@font-face{font-family:Archivo;src:url("//thekokosamoa.com.au/cdn/shop/t/120/assets/koko-archivo.woff2?v=157414526999113898431789660780") format("woff2");
  font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Nothing You Could Do";src:url("//thekokosamoa.com.au/cdn/shop/t/120/assets/koko-hand.woff2?v=143945422939449798141789707121") format("woff2");
  font-weight:400;font-display:swap}

/* the mono foot rail is set in the theme's own body face, so nothing extra loads */
.koko-card .card3 .foot,.koko-card .card4 .foot,.koko-card .card5 .foot,
.koko-card .card6 .foot,.koko-card .card7 .foot,.koko-card .card8 .foot{
  font-family:var(--font-body-family,"DM Sans",sans-serif)}

/* The theme hides empty divs, and every decorative layer in a card is an empty
   div: the photograph, the scrim, the gradient, the rules and the nodes. Without
   this the cards render as type on a black square. */
/* The cards were drawn with a border-box reset. The theme does not apply one
   here, so without this a 1080 card measures 1196 and spills out of its slide. */
.koko-card,.koko-card *,.koko-card *::before,.koko-card *::after{box-sizing:border-box}

.koko-card div:empty,.koko-card i:empty,.koko-card span:empty{display:block}
.koko-card i:empty{display:inline-block}

/* the slide is always square, whatever height the gallery fit gives a photograph */
/* The card frame is the SAME box a photograph gets, never its own shape.
   An earlier aspect-ratio:1 here fought the gallery's own height and inflated
   the frame to 461 inside a 343 slide, so every card was cropped 59px each
   side and its captions ran off the edge. The square card is centred in the
   frame by koko-cards.js; any spare height shows the card's own ink. */
.koko-card-slide .product__media-item-container{aspect-ratio:auto;width:100%;height:100%}

/* the slide and its thumbnail */
.koko-card-slide .product__media-item-container{background:#141210}
.koko-card-thumb .product__thumbs-inner img{opacity:.55}
.koko-card-thumb__mark{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:3px;background:#cfa75c;box-shadow:0 0 0 2px rgba(20,18,16,.55)}

/* Gallery cards. The 31 approved layouts, rendered live over the product's own
   photographs as extra gallery slides. Ported from the approved round CSS with
   one change: every rule is scoped to .koko-card so nothing can leak into the
   rest of the product page. Card geometry stays on a 1080 grid and is scaled
   to the slide with a CSS variable, so the design is pixel-identical to the
   approved comps at any box size. */
.koko-card{position:absolute;inset:0;overflow:hidden;background:#141210;
  container-type:size}
.koko-card .card{position:absolute;left:50%;top:50%;width:1080px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--kc-s,1));transform-origin:50% 50%;overflow:hidden}
.koko-card .ic{display:inline-block;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.koko-card .ic-check{-webkit-mask-image:var(--mk-check);mask-image:var(--mk-check)}
.koko-card .ic-x{-webkit-mask-image:var(--mk-x);mask-image:var(--mk-x)}

/* ===== cards3 ===== */

.koko-card /* ===== BATCH 3 =====================================================
   Justin's notes: type far too small (8 cards), .koko-card sand reads as slop (3), .koko-card letterbox looks dated, .koko-card fake button, .koko-card overclaims. Loved oversized type.
   Craft floor: no eyebrows, .koko-card no 01/02/03, .koko-card no unicode glyphs for icons, .koko-card no gradient text, .koko-card no hero-metric template, .koko-card left-align, .koko-card space not boxes.
   Type floor in card space is 34px = about 11px at real gallery size.
   ================================================================= */
.card3{--ink:#141210;--paper:#FFFFFF;--terra:#C1502E;--gold:#CFA75C;
  font-family:Archivo,sans-serif;background:var(--ink);color:#fff}
.koko-card .card3 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 28%}
.koko-card .card3 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;
  gap:22px;font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.koko-card .card3 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card .card3 .foot.dark{color:rgba(20,18,16,.62)}
.koko-card /* drawn icons, .koko-card one stroke weight, .koko-card never a unicode glyph */
.ic{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;vertical-align:-.12em}
.koko-card .ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.koko-card .ic-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.koko-card /* S. the word and the photograph occupy the same space */
.cS .bg{background-position:50% 22%}
.koko-card .cS .scrim{position:absolute;inset:0;background:linear-gradient(6deg,rgba(12,10,9,.94) 6%,rgba(12,10,9,.66) 40%,rgba(12,10,9,.14) 72%,rgba(12,10,9,0) 92%)}
.koko-card .cS .word{position:absolute;left:58px;right:58px;top:330px;margin:0;
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:66%;font-size:206px;line-height:.84;
  letter-spacing:-.045em;text-transform:uppercase;color:#fff}
.koko-card .cS .line{position:absolute;left:58px;right:200px;bottom:312px;margin:0;
  font:500 42px/1.24 Archivo,sans-serif;letter-spacing:-.018em;color:#fff}
.koko-card /* T. oversized handwriting, .koko-card his own copy */
.cT .bg{background-position:50% 30%}
.koko-card .cT .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,10,9,.94) 0%,rgba(12,10,9,.84) 34%,rgba(12,10,9,.5) 62%,rgba(12,10,9,0) 88%)}
.koko-card .cT .hand{position:absolute;left:56px;right:110px;bottom:190px;margin:0;
  font-family:Caveat,cursive;font-weight:600;font-size:132px;line-height:.98;color:#fff;
  text-wrap:balance;letter-spacing:.004em}
.koko-card .cT .hand em{font-style:normal;color:var(--gold)}
.koko-card /* U. ticks and crosses, .koko-card at a size you can actually read */
.cU{background:#141210;padding:80px 58px 0}
.koko-card .cU h3{margin:0 0 70px;font-weight:900;font-stretch:72%;font-size:114px;line-height:.86;
  letter-spacing:-.04em;text-transform:uppercase;color:#fff;max-width:11ch}
.koko-card .cU .r3{display:grid;grid-template-columns:1fr 90px 90px;align-items:center;padding:30px 0}
.koko-card .cU .r3.hd span{font:500 29px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-align:center}
.koko-card .cU .r3 .lb{font-weight:700;font-size:48px;line-height:1.1;letter-spacing:-.025em;color:#fff}
.koko-card .cU .r3 .ic{width:54px;height:54px;justify-self:center}
.koko-card .cU .r3 .yes{color:var(--terra)}
.koko-card .cU .r3 .no{color:rgba(255,255,255,.3)}
.koko-card /* V. label left, .koko-card value right — the scannable list, .koko-card no rules drawn */
.cV{background:#141210}
.koko-card .cV .bg{inset:0 0 58% 0;background-position:50% 24%}
.koko-card .cV .shade{position:absolute;left:0;right:0;top:26%;height:24%;
  background:linear-gradient(180deg,rgba(20,18,16,0) 0%,#141210 100%)}
.koko-card .cV dl{position:absolute;left:58px;right:58px;top:452px;margin:0;display:grid;
  grid-template-columns:1fr auto;row-gap:34px;column-gap:24px;align-items:baseline}
.koko-card .cV dt{font:500 32px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.52)}
.koko-card .cV dd{margin:0;text-align:right;font-weight:800;font-size:54px;line-height:1;letter-spacing:-.03em;color:#fff}
.koko-card /* W. one review, .koko-card at the size the page deserves */
.cW{background:#141210;padding:70px 58px 0}
.koko-card .cW blockquote{margin:0;font-family:"Playfair Display",serif;font-weight:500;font-size:98px;
  line-height:1.06;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.koko-card .cW .who3{position:absolute;left:58px;bottom:150px;font-weight:700;font-size:42px;letter-spacing:-.02em;color:#fff}
.koko-card .cW .stars4{position:absolute;left:58px;bottom:214px;display:flex;gap:9px}
.koko-card .cW .stars4 i{width:34px;height:34px;background:var(--gold);
  clip-path:polygon(50% 0,61.8% 35.5%,100% 35.5%,69% 57.5%,80.9% 100%,50% 73%,19.1% 100%,31% 57.5%,0 35.5%,38.2% 35.5%)}
.koko-card /* X. the figure that is true and does not look small */
.cX{background:#141210}
.koko-card .cX .bg{inset:0;background-position:50% 26%;opacity:.4;filter:grayscale(.5) contrast(1.1)}
.koko-card .cX .fig3{position:absolute;left:52px;right:52px;top:250px;margin:0;font-weight:900;font-stretch:64%;
  font-size:330px;line-height:.78;letter-spacing:-.05em;color:#fff}
.koko-card .cX .fig3 b{color:var(--terra);font-weight:900}
.koko-card .cX .say{position:absolute;left:58px;right:120px;bottom:140px;margin:0;font-weight:700;font-size:52px;
  line-height:1.12;letter-spacing:-.028em;color:#fff}
.koko-card /* Y. the print is the whole card */
.cY .bg{inset:0;background-size:210%;background-position:50% 44%}
.koko-card .cY .grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,7,.9) 0%,rgba(10,8,7,.1) 52%,rgba(10,8,7,.35) 100%)}
.koko-card .cY h3{position:absolute;left:56px;right:56px;bottom:366px;margin:0;font-weight:900;font-stretch:70%;
  font-size:130px;line-height:.86;letter-spacing:-.042em;text-transform:uppercase;color:#fff}
.koko-card .cY h3 em{font-style:normal;color:var(--terra)}
.koko-card /* Z. the checklist, .koko-card rebuilt - the garment is not washed out this time */
.cZ{background:#141210}
.koko-card .cZ .bg{inset:0 0 0 52%;background-position:56% 26%}
.koko-card .cZ .edge{position:absolute;left:46%;top:0;bottom:0;width:14%;
  background:linear-gradient(90deg,#141210 0%,rgba(20,18,16,0) 100%)}
.koko-card .cZ .btm{position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(0deg,rgba(18,16,14,.97) 0%,rgba(18,16,14,.72) 34%,rgba(18,16,14,0) 100%)}
.koko-card .cZ h3{position:absolute;left:56px;top:74px;width:10ch;margin:0;font-weight:900;font-stretch:70%;
  font-size:96px;line-height:.85;letter-spacing:-.04em;text-transform:uppercase;color:#fff}
.koko-card .cZ ul{position:absolute;left:56px;top:420px;width:490px;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:42px}
.koko-card .cZ li{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
  font-weight:700;font-size:46px;line-height:1.1;letter-spacing:-.024em;color:#fff}
.koko-card .cZ li .ic{width:48px;height:48px;color:var(--terra);margin-top:2px}
.koko-card /* AB. diptych — the garment and what is printed on it, .koko-card split hard */
.cB2{display:grid;grid-template-columns:1fr 1fr;background:#141210}
.koko-card .cB2 .half{position:relative;overflow:hidden}
.koko-card .cB2 .half .bg{inset:0}
.koko-card .cB2 .l .bg{background-position:50% 34%}
.koko-card .cB2 .r .bg{background-size:620%;background-position:50% 43%}
.koko-card .cB2 .band3{position:absolute;left:0;right:0;bottom:0;padding:44px 56px 52px;
  background:linear-gradient(0deg,#141210 0%,rgba(20,18,16,.92) 62%,rgba(20,18,16,0) 100%)}
.koko-card .cB2 h3{margin:0;font-weight:900;font-stretch:68%;font-size:112px;line-height:.86;letter-spacing:-.042em;
  text-transform:uppercase;color:#fff}
.koko-card .cB2 p{margin:18px 0 0;font:500 36px/1.24 Archivo,sans-serif;letter-spacing:-.016em;color:rgba(255,255,255,.76)}
.koko-card /* AC. callouts, .koko-card rebuilt: the node rests on the garment, .koko-card the words never do */
.cC2{background:#16130F}
.koko-card .cC2 .bg{inset:0 0 0 50%;background-size:cover;background-position:62% 26%}
.koko-card .cC2 .fade{position:absolute;left:44%;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,#16130F 0%,rgba(22,19,15,0) 100%)}
.koko-card .cC2 .ladder3{position:absolute;left:56px;right:56px;top:104px;bottom:236px;
  display:flex;flex-direction:column;justify-content:space-between;gap:34px}
.koko-card .cC2 .say3{position:relative;width:420px;font-weight:700;font-size:44px;line-height:1.12;
  letter-spacing:-.028em;color:#fff}
.koko-card .cC2 .say3 span{display:block;font:500 28px/1.32 "DM Mono",monospace;letter-spacing:.06em;
  color:rgba(255,255,255,.66);margin-top:14px;text-transform:none}
.koko-card .cC2 .say3::before{content:"";position:absolute;top:84px;left:444px;height:3px;background:var(--gold)}
.koko-card .cC2 .say3::after{content:"";position:absolute;top:73px;width:26px;height:26px;
  border-radius:50%;background:var(--gold)}
.koko-card .cC2 .say3:nth-child(1)::before{width:112px}
.koko-card .cC2 .say3:nth-child(1)::after{left:543px}
.koko-card .cC2 .say3:nth-child(2)::before{width:186px}
.koko-card .cC2 .say3:nth-child(2)::after{left:617px}
.koko-card .cC2 .say3:nth-child(3)::before{width:140px}
.koko-card .cC2 .say3:nth-child(3)::after{left:571px}
  text-transform:uppercase;color:var(--gold);margin-top:12px}
.koko-card /* AD. the size run, .koko-card as the whole statement */
.cD2{background:var(--terra);padding:74px 58px 0}
.koko-card .cD2 .run{margin:0;font-weight:900;font-stretch:62%;font-size:268px;line-height:.8;letter-spacing:-.05em;
  color:#fff;display:flex;align-items:baseline;gap:26px}
.koko-card .cD2 .run .ar{width:120px;height:52px;background:#fff;align-self:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.koko-card .cD2 .foot{right:auto}
.koko-card .cD2 .foot .nm{margin-left:0}
.koko-card .cD2 p{margin:40px 0 0;max-width:15ch;font-weight:700;font-size:54px;line-height:1.1;
  letter-spacing:-.028em;color:#fff}
.koko-card .cD2 .bg{inset:auto -60px -70px auto;width:560px;height:560px;background-size:cover;
  background-position:50% 30%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.koko-card /* AE. made to order, .koko-card said plainly and large */
.cE2{background:#141210}
.koko-card .cE2 .bg{inset:0;background-position:50% 34%;opacity:.55}
.koko-card .cE2 h3{position:absolute;left:56px;right:56px;top:120px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:112px;line-height:.98;letter-spacing:-.024em;color:#fff;text-wrap:balance}
.koko-card .cE2 p{position:absolute;left:56px;right:150px;bottom:142px;margin:0;font-weight:600;font-size:44px;
  line-height:1.18;letter-spacing:-.022em;color:rgba(255,255,255,.82)}

/* ===== cards4 ===== */

.koko-card /* ===== BATCH 4 ==================================================
   Justin's verdicts on batch 3. Four of the nine notes say one thing:
   "why is it so black? no pix?" (U, .koko-card W) / "blocks too much of the pix" (V)
   / "saturation knocked out, .koko-card doesnt sell the product" (X).
   So: the photograph is the product, .koko-card and every card shows it in its
   own colour. Ink is a scrim now, .koko-card never a ground.
   ============================================================== */
.card4{--ink:#141210;--terra:#C1502E;--gold:#CFA75C;
  font-family:Archivo,sans-serif;background:#141210;color:#fff}
.koko-card .card4 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 30%}
.koko-card .card4 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;
  gap:22px;font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.koko-card .card4 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card /* one scrim recipe, .koko-card so the product always survives underneath */
.card4 .sc{position:absolute;left:0;right:0;bottom:0;height:64%;
  background:linear-gradient(0deg,rgba(10,9,8,.93) 0%,rgba(10,9,8,.74) 26%,rgba(10,9,8,.34) 56%,rgba(10,9,8,0) 100%)}
.koko-card .card4 .sc.tall{height:82%}
.koko-card .card4 .sc.half{height:46%}
.koko-card /* T. handwriting, .koko-card one card, .koko-card four faces. Scrim lighter than batch 3. */
.cT4 .bg{background-position:50% 34%}
.koko-card .cT4 .hand{position:absolute;left:58px;right:96px;bottom:368px;margin:0;color:#fff;letter-spacing:.004em}
.koko-card .cT4 .hand em{font-style:normal;color:var(--gold)}
.koko-card .cT4a .hand{font-family:Caveat,cursive;font-weight:700;font-size:140px;line-height:.96}
.koko-card .cT4b .hand{font-family:"Dancing Script",cursive;font-weight:700;font-size:112px;line-height:1.08}
.koko-card .cT4c .hand{font-family:"Nothing You Could Do",cursive;font-weight:400;font-size:96px;line-height:1.16}
.koko-card .cT4d .hand{font-family:Sacramento,cursive;font-weight:400;font-size:132px;line-height:1.02}
.koko-card /* U. the comparison, .koko-card with the garment behind it */
.cU4 .bg{background-position:50% 20%}
.koko-card .cU4 h3{position:absolute;left:58px;right:58px;top:52px;margin:0;font-weight:900;font-stretch:72%;
  font-size:104px;line-height:.86;letter-spacing:-.04em;text-transform:uppercase;color:#fff;max-width:11ch;
  text-shadow:0 2px 40px rgba(10,9,8,.7)}
.koko-card .cU4 .rows4{position:absolute;left:58px;right:58px;bottom:330px}
.koko-card .cU4 .r4{display:grid;grid-template-columns:1fr 104px 104px;align-items:center;padding:28px 0}
.koko-card .cU4 .r4.hd span{font:500 27px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-align:center}
.koko-card .cU4 .r4 .lb{font-weight:800;font-size:46px;line-height:1.1;letter-spacing:-.026em;color:#fff}
.koko-card .cU4 .r4 .ic{width:68px;height:68px;justify-self:center}
.koko-card .cU4 .r4 .yes{color:#FF8A5B}
.koko-card .cU4 .r4 .no{color:rgba(255,255,255,.44)}
.koko-card /* V. the spec list, .koko-card taking a third of the card instead of half */
.cV4 .bg{background-position:50% 22%}
.koko-card .cV4 dl{position:absolute;left:58px;right:58px;bottom:328px;margin:0;display:grid;
  grid-template-columns:1fr auto;row-gap:30px;column-gap:24px;align-items:baseline}
.koko-card .cV4 dt{font:500 30px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.koko-card .cV4 dd{margin:0;text-align:right;font-weight:800;font-size:52px;line-height:1;letter-spacing:-.03em;color:#fff}
.koko-card /* W. the review, .koko-card over the person wearing it */
.cW4 .bg{background-position:50% 24%}
.koko-card .cW4 blockquote{position:absolute;left:58px;right:76px;bottom:392px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:92px;line-height:1.06;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.koko-card .cW4 .who4{position:absolute;left:58px;bottom:326px;font-weight:700;font-size:40px;letter-spacing:-.02em;color:#fff}
.koko-card .cW4 .stars5{position:absolute;left:58px;bottom:700px;display:flex;gap:11px}
.koko-card .cW4 .stars5 i{width:40px;height:40px;background:var(--gold);
  clip-path:polygon(50% 0,61.8% 35.5%,100% 35.5%,69% 57.5%,80.9% 100%,50% 73%,19.1% 100%,31% 57.5%,0 35.5%,38.2% 35.5%)}
.koko-card /* X. the figure, .koko-card and the photograph left alone */
.cX4 .bg{background-position:50% 24%}
.koko-card .cX4 .patch{position:absolute;left:0;bottom:0;width:78%;height:56%;
  background:radial-gradient(120% 96% at 6% 100%,rgba(10,9,8,.92) 0%,rgba(10,9,8,.62) 46%,rgba(10,9,8,0) 100%)}
.koko-card .cX4 .fig4{position:absolute;left:52px;bottom:448px;margin:0;font-weight:900;font-stretch:64%;
  font-size:300px;line-height:.78;letter-spacing:-.05em;color:#fff}
.koko-card .cX4 .say4{position:absolute;left:58px;right:300px;bottom:322px;margin:0;font-weight:700;font-size:50px;
  line-height:1.12;letter-spacing:-.028em;color:#fff}
.koko-card .cX4 .say4 b{color:var(--gold)}
.koko-card /* Z. the checklist, .koko-card with the product's own headline */
.cZ4 .bg{background-position:50% 18%}
.koko-card .cZ4 h3{position:absolute;left:58px;right:58px;top:54px;margin:0;font-weight:900;font-stretch:70%;
  font-size:122px;line-height:.84;letter-spacing:-.042em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 40px rgba(10,9,8,.66)}
.koko-card .cZ4 ul{position:absolute;left:58px;right:58px;bottom:330px;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:34px}
.koko-card .cZ4 li{display:grid;grid-template-columns:54px 1fr;gap:22px;align-items:start;
  font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-.024em;color:#fff}
.koko-card .cZ4 li .ic{width:46px;height:46px;color:#FF7A4D;margin-top:4px}
.koko-card /* B2. the diptych, .koko-card with the real print artwork as the second half */
.cB4{display:grid;grid-template-columns:1fr 1fr;background:#141210}
.koko-card .cB4 .half{position:relative;overflow:hidden}
.koko-card .cB4 .half .bg{inset:0}
.koko-card .cB4 .l .bg{background-position:50% 30%}
.koko-card .cB4 .r .bg{background-size:cover;background-position:14% 50%}
.koko-card .cB4 .band4{position:absolute;left:0;right:0;bottom:0;padding:44px 56px 230px;
  background:linear-gradient(0deg,rgba(10,9,8,.95) 0%,rgba(10,9,8,.8) 58%,rgba(10,9,8,0) 100%)}
.koko-card .cB4 h3{margin:0;font-weight:900;font-stretch:68%;font-size:108px;line-height:.86;letter-spacing:-.042em;
  text-transform:uppercase;color:#fff}
.koko-card .cB4 p{margin:20px 0 0;font:500 36px/1.24 Archivo,sans-serif;letter-spacing:-.016em;color:rgba(255,255,255,.82)}
.koko-card /* D2. the size run, .koko-card on a ground sampled from the print itself */
.cD4{background:var(--sampled,#691114);padding:74px 58px 0}
.koko-card .cD4 .run{margin:0;font-weight:900;font-stretch:62%;font-size:268px;line-height:.8;letter-spacing:-.05em;
  color:#fff;display:flex;align-items:baseline;gap:26px}
.koko-card .cD4 .run .ar{width:120px;height:52px;background:#fff;align-self:center;
  -webkit-mask-image:var(--arrow);mask-image:var(--arrow);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.koko-card .cD4 p{margin:40px 0 0;max-width:15ch;font-weight:700;font-size:54px;line-height:1.1;
  letter-spacing:-.028em;color:#fff}
.koko-card .cD4 .bg{inset:auto -60px -70px auto;width:560px;height:560px;background-size:cover;
  background-position:50% 30%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.koko-card .cD4 .foot{right:auto}
.koko-card .cD4 .foot .nm{margin-left:0}
.koko-card /* E2. made to order, .koko-card off her face and on one clean break */
.cE4 .bg{background-position:50% 26%}
.koko-card .cE4 h3{position:absolute;left:58px;right:76px;bottom:476px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:108px;line-height:1.0;letter-spacing:-.024em;color:#fff}
.koko-card .cE4 p{position:absolute;left:58px;right:150px;bottom:326px;margin:0;font-weight:600;font-size:44px;
  line-height:1.18;letter-spacing:-.022em;color:rgba(255,255,255,.88)}
.koko-card /* E3. the same argument as a struck seal */
.cE5 .bg{background-position:50% 26%}
.koko-card .cE5 .seal{position:absolute;right:62px;top:62px;width:384px;height:384px}
.koko-card .cE5 .seal svg{width:100%;height:100%;display:block}
.koko-card .cE5 .seal .ring{fill:none;stroke:var(--gold);stroke-width:3}
.koko-card .cE5 .seal .rot{fill:var(--gold);font:500 26px "DM Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.koko-card .cE5 .seal .mid{fill:#fff;font-family:"Playfair Display",serif;font-weight:600;font-size:56px;text-anchor:middle}
.koko-card .cE5 .seal .sub{fill:rgba(255,255,255,.76);font:500 25px "DM Mono",monospace;letter-spacing:.16em;text-anchor:middle;text-transform:uppercase}
.koko-card .cE5 h3{position:absolute;left:58px;right:76px;bottom:470px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:104px;line-height:1.0;letter-spacing:-.024em;color:#fff}
.koko-card .cE5 p{position:absolute;left:58px;right:150px;bottom:326px;margin:0;font-weight:600;font-size:44px;
  line-height:1.18;letter-spacing:-.022em;color:rgba(255,255,255,.88)}

/* ===== cards5 ===== */

.koko-card /* ===== BATCH 5 : HIGH-WAISTED LEGGINGS, .koko-card BLOOM ======================
   Brief: more options, .koko-card non-repetitive, .koko-card fresh reference formats.
   This product has things the tee does not: six colourways, .koko-card an
   all-over print that runs unbroken down the leg, .koko-card a high rise
   waistband, .koko-card and a near-black colourway whose print only shows in
   the light. It also has ZERO reviews, .koko-card so nothing here uses proof.
   New formats from the library: caption bar, .koko-card three reasons why, .koko-card negative marketing, .koko-card the offer.
   ================================================================ */
.card5{--ink:#141210;--terra:#C1502E;--gold:#CFA75C;--paper:#F7F5F2;
  font-family:Archivo,sans-serif;background:#141210;color:#fff}
.koko-card .card5 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%}
.koko-card .card5 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;gap:22px;
  font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.koko-card .card5 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card .card5 .foot.ink{color:rgba(20,18,16,.6)}
.koko-card .card5 .sc{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(0deg,rgba(10,9,8,.93) 0%,rgba(10,9,8,.72) 26%,rgba(10,9,8,.3) 58%,rgba(10,9,8,0) 100%)}
.koko-card .card5 .sc.tall{height:80%}
.koko-card /* L1. six colourways, .koko-card which the tee can never do */
.cL1{background:#141210;padding:46px 46px 0}
.koko-card .cL1 h3{margin:0 0 28px;font-weight:900;font-stretch:72%;font-size:78px;line-height:.88;
  letter-spacing:-.04em;text-transform:uppercase;color:#fff}
.koko-card .cL1 .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.koko-card .cL1 .sw{position:relative;aspect-ratio:5/6;overflow:hidden;background:#221f1c}
.koko-card .cL1 .sw i{position:absolute;inset:0;background-size:cover;background-position:50% 42%}
.koko-card .cL1 .sw b{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font:800 30px/1 Archivo,sans-serif;
  letter-spacing:-.02em;color:#fff;background:linear-gradient(0deg,rgba(10,9,8,.9),rgba(10,9,8,0))}
.koko-card /* L2. the quiet one, .koko-card the product's own best sentence */
.cL2 .bg{background-position:50% 46%}
.koko-card .cL2 h3{position:absolute;left:58px;right:330px;bottom:330px;margin:0;font-weight:900;font-stretch:70%;
  font-size:126px;line-height:.85;letter-spacing:-.045em;text-transform:uppercase;color:#fff}
.koko-card .cL2 h3 em{font-style:normal;color:var(--gold)}
.koko-card .cL2 p{position:absolute;left:58px;right:300px;bottom:150px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(255,255,255,.88)}
.koko-card /* L3. the caption bar, .koko-card straight off the format library */
.cL3 .bg{background-position:50% 40%}
.koko-card .cL3 .cap{position:absolute;left:54px;right:54px;top:92px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.koko-card .cL3 .cap span{background:#fff;color:#141210;padding:14px 22px;font-weight:800;font-size:54px;line-height:1.1;
  letter-spacing:-.028em;box-decoration-break:clone}
.koko-card .cL3 .sub{position:absolute;left:58px;right:200px;bottom:148px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}
.koko-card /* L4. three reasons why. numbered, .koko-card because the format declares the count */
.cL4 .bg{background-position:50% 30%}
.koko-card .cL4 h3{position:absolute;left:58px;right:58px;top:56px;margin:0;font-weight:900;font-stretch:72%;font-size:96px;
  line-height:.86;letter-spacing:-.042em;text-transform:uppercase;color:#fff;text-shadow:0 2px 40px rgba(10,9,8,.7)}
.koko-card .cL4 ol{position:absolute;left:58px;right:58px;bottom:330px;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:32px;counter-reset:r}
.koko-card .cL4 li{counter-increment:r;display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:baseline}
.koko-card .cL4 li::before{content:counter(r);font:500 46px/1 "DM Mono",monospace;color:var(--gold)}
.koko-card .cL4 li b{font-weight:800;font-size:52px;line-height:1.05;letter-spacing:-.028em;color:#fff;display:block}
.koko-card .cL4 li span{display:block;margin-top:8px;font-weight:500;font-size:34px;line-height:1.2;
  letter-spacing:-.016em;color:rgba(255,255,255,.76)}
.koko-card /* L5. negative marketing, .koko-card the headline that says the opposite */
.cL5 .bg{background-position:50% 36%}
.koko-card .cL5 h3{position:absolute;left:58px;right:120px;top:70px;margin:0;font-weight:900;font-stretch:70%;
  font-size:128px;line-height:.84;letter-spacing:-.045em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 44px rgba(10,9,8,.72)}
.koko-card .cL5 p{position:absolute;left:58px;right:260px;bottom:330px;margin:0;font-weight:600;font-size:44px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}
.koko-card /* L6. the print runs unbroken, .koko-card so the type runs with it */
.cL6{background:#EFEAE3}
.koko-card .cL6 .bg{inset:0 0 0 38%;background-position:50% 50%;background-size:cover}
.koko-card .cL6 .vert{position:absolute;left:62px;bottom:112px;writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;margin:0;font-weight:900;font-stretch:66%;font-size:112px;line-height:1;
  letter-spacing:-.04em;text-transform:uppercase;color:#141210}
.koko-card .cL6 p{position:absolute;left:206px;top:88px;width:280px;margin:0;font-weight:600;font-size:38px;
  line-height:1.2;letter-spacing:-.02em;color:rgba(20,18,16,.78)}
.koko-card /* L7. the waistband, .koko-card said as a spec over the macro */
.cL7 .bg{background-position:50% 44%}
.koko-card .cL7 .spec7{position:absolute;left:58px;right:58px;bottom:148px;display:flex;flex-direction:column;gap:26px}
.koko-card .cL7 .spec7 b{font-weight:900;font-stretch:70%;font-size:92px;line-height:.9;letter-spacing:-.04em;
  text-transform:uppercase;color:#fff}
.koko-card .cL7 .spec7 span{font:500 34px/1.3 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold)}
.koko-card /* L8. the offer, .koko-card which nothing in the set has said yet */
.cL8{background:#141210}
.koko-card .cL8 .bg{inset:0 0 0 46%;background-position:52% 38%}
.koko-card .cL8 .edge8{position:absolute;left:40%;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,#141210 0%,rgba(20,18,16,0) 100%)}
.koko-card .cL8 .was{position:absolute;left:58px;top:250px;margin:0;font:500 56px/1 "DM Mono",monospace;
  color:rgba(255,255,255,.52);text-decoration:line-through}
.koko-card .cL8 .now{position:absolute;left:52px;top:318px;margin:0;font-weight:900;font-stretch:64%;font-size:232px;
  line-height:.82;letter-spacing:-.05em;color:#fff}
.koko-card .cL8 .save{position:absolute;left:58px;top:566px;display:inline-flex;align-items:center;gap:14px;
  background:var(--gold);color:#141210;padding:14px 24px;font-weight:800;font-size:44px;letter-spacing:-.02em}
.koko-card .cL8 p{position:absolute;left:58px;width:440px;bottom:330px;margin:0;font-weight:600;font-size:40px;
  line-height:1.18;letter-spacing:-.022em;color:rgba(255,255,255,.86)}
.koko-card /* L9. the handwriting face you approved, .koko-card on the line about the gym */
.cL9 .bg{background-position:50% 36%}
.koko-card .cL9 .hand9{position:absolute;left:58px;right:96px;bottom:370px;margin:0;
  font-family:"Nothing You Could Do",cursive;font-weight:400;font-size:104px;line-height:1.14;color:#fff}
.koko-card .cL9 .hand9 em{font-style:normal;color:var(--gold)}
.koko-card /* L10. quiet or loud, .koko-card the two ends of the colour run */
.cL10{display:grid;grid-template-columns:1fr 1fr;background:#141210}
.koko-card .cL10 .half{position:relative;overflow:hidden}
.koko-card .cL10 .half .bg{inset:0;background-position:50% 40%}
.koko-card .cL10 .tag{position:absolute;left:0;right:0;top:56px;text-align:center;
  font:500 32px/1 "DM Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 26px rgba(10,9,8,.85)}
.koko-card .cL10 .mid{position:absolute;left:0;right:0;bottom:0;padding:52px 56px 46px;
  background:linear-gradient(0deg,rgba(10,9,8,.95) 0%,rgba(10,9,8,.78) 58%,rgba(10,9,8,0) 100%)}
.koko-card .cL10 h3{margin:0;font-weight:900;font-stretch:68%;font-size:116px;line-height:.86;letter-spacing:-.044em;
  text-transform:uppercase;color:#fff;text-align:center}
.koko-card .cL10 p{margin:18px 0 0;font:500 34px/1.24 Archivo,sans-serif;letter-spacing:-.016em;
  color:rgba(255,255,255,.8);text-align:center}

/* ===== cards6 ===== */

.koko-card /* ===== BATCH 6 : LEGGINGS, .koko-card ROUND TWO =============================
   Three repairs from your notes (L2 text was not true, .koko-card L3 overlapped
   a face, .koko-card L7 layout), .koko-card plus formats and facts not used yet. The specs
   here come from the maker's own blueprint, .koko-card not from the page copy.
   ============================================================== */
.card6{--ink:#141210;--terra:#C1502E;--gold:#CFA75C;--paper:#F4F1EC;
  font-family:Archivo,sans-serif;background:#141210;color:#fff}
.koko-card .card6 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%}
.koko-card .card6 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;gap:22px;
  font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.koko-card .card6 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card .card6 .foot.ink{color:rgba(20,18,16,.62)}
.koko-card .card6 .sc{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(0deg,rgba(10,9,8,.93) 0%,rgba(10,9,8,.72) 26%,rgba(10,9,8,.3) 58%,rgba(10,9,8,0) 100%)}
.koko-card .card6 .sc.tall{height:80%}
.koko-card .card6 .sctop{position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,rgba(10,9,8,.88) 0%,rgba(10,9,8,.5) 44%,rgba(10,9,8,0) 100%)}
.koko-card /* M2. Basalt, .koko-card said truthfully this time */
.cM2 .bg{background-position:50% 46%}
.koko-card .cM2 h3{position:absolute;left:58px;right:340px;bottom:506px;margin:0;font-weight:900;font-stretch:70%;
  font-size:130px;line-height:.85;letter-spacing:-.045em;text-transform:uppercase;color:#fff}
.koko-card .cM2 h3 em{font-style:normal;color:var(--gold)}
.koko-card .cM2 p{position:absolute;left:58px;right:300px;bottom:330px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(255,255,255,.9)}
.koko-card /* M3. the caption bar, .koko-card moved clear of her face */
.cM3 .bg{background-position:50% 40%}
.koko-card .cM3 .cap{position:absolute;left:54px;right:54px;bottom:470px;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px}
.koko-card .cM3 .cap span{background:#fff;color:#141210;padding:14px 22px;font-weight:800;font-size:54px;line-height:1.1;
  letter-spacing:-.028em}
.koko-card .cM3 .sub{position:absolute;left:58px;right:200px;bottom:330px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}
.koko-card /* M7. the waistband, .koko-card relaid, .koko-card and on the maker's real spec */
.cM7 .bg{inset:0 0 44% 0;background-position:50% 42%}
.koko-card .cM7 .fade7{position:absolute;left:0;right:0;top:34%;height:26%;
  background:linear-gradient(180deg,rgba(20,18,16,0) 0%,#141210 100%)}
.koko-card .cM7 h3{position:absolute;left:58px;right:58px;top:600px;margin:0;font-weight:900;font-stretch:70%;
  font-size:104px;line-height:.86;letter-spacing:-.042em;text-transform:uppercase;color:#fff}
.koko-card .cM7 dl{position:absolute;left:58px;right:58px;bottom:150px;margin:0;display:grid;
  grid-template-columns:1fr auto;row-gap:26px;column-gap:24px;align-items:baseline}
.koko-card .cM7 dt{font:500 30px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
.koko-card .cM7 dd{margin:0;text-align:right;font-weight:800;font-size:48px;line-height:1;letter-spacing:-.03em;color:#fff}
.koko-card /* M4. the maker's own sizing note, .koko-card which saves a return */
.cM4{background:var(--gold)}
.koko-card .cM4 .bg{inset:auto -30px -60px auto;width:540px;height:700px;background-size:cover;
  background-position:52% 30%;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
.koko-card .cM4 h3{position:absolute;left:58px;top:92px;right:300px;margin:0;font-weight:900;font-stretch:64%;
  font-size:250px;line-height:.8;letter-spacing:-.05em;text-transform:uppercase;color:#141210}
.koko-card .cM4 p{position:absolute;left:58px;top:576px;width:430px;margin:0;font-weight:700;font-size:46px;
  line-height:1.14;letter-spacing:-.026em;color:#141210}
.koko-card .cM4 .foot{color:rgba(20,18,16,.62)}
.koko-card /* M5. gifting */
.cM5 .bg{background-position:50% 34%}
.koko-card .cM5 .sctop{height:52%}
.koko-card .cM5 h3{position:absolute;left:58px;right:120px;top:74px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:112px;line-height:1.0;letter-spacing:-.024em;color:#fff}
.koko-card .cM5 p{position:absolute;left:58px;right:220px;bottom:330px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}
.koko-card /* M6. the ugly ad. no photograph, .koko-card no scrim, .koko-card nothing to look at but the words */
.cM6{background:#FFF8E7;padding:76px 62px 0}
.koko-card .cM6 h3{margin:0 0 30px;font-weight:900;font-stretch:66%;font-size:150px;line-height:.82;
  letter-spacing:-.05em;text-transform:uppercase;color:#141210}
.koko-card .cM6 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.koko-card .cM6 li{font-weight:700;font-size:52px;line-height:1.1;letter-spacing:-.026em;color:#141210;
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline}
.koko-card .cM6 li i{font-style:normal;color:var(--terra);font-weight:900}
.koko-card .cM6 .last{position:absolute;left:62px;right:62px;bottom:142px;margin:0;font:500 38px/1.24 "DM Mono",monospace;
  letter-spacing:-.01em;color:rgba(20,18,16,.72)}
.koko-card .cM6 .foot{color:rgba(20,18,16,.55)}
.koko-card /* M8. the print inside the letters */
.cM8{background:#EFE7DA;padding:0}
.koko-card .cM8 .fill{position:absolute;left:46px;right:46px;top:150px;margin:0;font-weight:900;font-stretch:62%;
  font-size:300px;line-height:.82;letter-spacing:-.05em;text-transform:uppercase;
  background-image:var(--lg-bloomprint);background-size:150% auto;background-position:42% 46%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.koko-card .cM8 .fallback{position:absolute;left:46px;right:46px;top:150px;margin:0;font-weight:900;font-stretch:62%;
  font-size:300px;line-height:.82;letter-spacing:-.05em;text-transform:uppercase;color:#141210;z-index:-1}
.koko-card .cM8 p{position:absolute;left:52px;right:200px;bottom:148px;margin:0;font-weight:600;font-size:44px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(20,18,16,.82)}
.koko-card .cM8 .foot{color:rgba(20,18,16,.6)}
.koko-card /* M9. the thread nobody else mentions */
.cM9 .bg{background-position:50% 48%}
.koko-card .cM9 .sc{height:56%}
.koko-card .cM9 h3{position:absolute;left:58px;right:300px;bottom:312px;margin:0;font-weight:900;font-stretch:70%;
  font-size:112px;line-height:.86;letter-spacing:-.042em;text-transform:uppercase;color:#fff}
.koko-card .cM9 p{position:absolute;left:58px;right:280px;bottom:150px;margin:0;font-weight:600;font-size:40px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(255,255,255,.88)}
.koko-card /* M10. two scenes, .koko-card one legging */
.cM10{display:grid;grid-template-rows:1fr 1fr;background:#141210}
.koko-card .cM10 .scene{position:relative;overflow:hidden}
.koko-card .cM10 .scene .bg{inset:0}
.koko-card .cM10 .scene .lab{position:absolute;left:52px;bottom:34px;font-weight:900;font-stretch:70%;font-size:92px;
  line-height:.9;letter-spacing:-.04em;text-transform:uppercase;color:#fff;text-shadow:0 2px 34px rgba(10,9,8,.8)}
.koko-card .cM10 .rule{position:absolute;left:0;right:0;top:50%;height:6px;background:#141210}
.koko-card .cM10 .foot{color:rgba(255,255,255,.86)}
.koko-card /* M11. what it is made of */
.cM11 .bg{background-position:50% 36%}
.koko-card .cM11 .sc{height:74%}
.koko-card .cM11 .mix{position:absolute;left:48px;right:52px;bottom:286px;margin:0;
  font-weight:900;font-stretch:62%;font-size:232px;line-height:.82;letter-spacing:-.05em;color:#fff}
.koko-card .cM11 .mix u{display:block;text-decoration:none;margin-top:16px;font:500 40px/1 "DM Mono",monospace;
  font-stretch:100%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.koko-card .cM11 p{position:absolute;left:58px;right:200px;bottom:150px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}

/* ===== cards7 ===== */

.koko-card /* ===== BATCH 7 : ROUND 6 REPAIRS + THE UGC REVIEW =================
   N1 loses the cream (third time sand has been called slop, .koko-card so it is
   retired from the palette). N2 puts the per cent back on its number.
   N3 unclashes. N4 stops the copy claiming more than the picture
   shows. N5 is the review over a real customer photo, .koko-card no name, .koko-card the
   label "Verified buyer", .koko-card and only ever from a genuinely verified
   review so the label stays true.
   ============================================================== */
.card7{--ink:#141210;--terra:#C1502E;--gold:#CFA75C;
  font-family:Archivo,sans-serif;background:#141210;color:#fff}
.koko-card .card7 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%}
.koko-card .card7 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;gap:22px;
  font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.koko-card .card7 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card .card7 .sc{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(0deg,rgba(10,9,8,.93) 0%,rgba(10,9,8,.72) 26%,rgba(10,9,8,.3) 58%,rgba(10,9,8,0) 100%)}
.koko-card .card7 .sc.tall{height:80%}
.koko-card /* N1. the print inside the letters, .koko-card on ink, .koko-card filling the card */
.cN1{background:#141210}
.koko-card .cN1 .fill{position:absolute;left:40px;right:40px;top:126px;margin:0;font-weight:900;font-stretch:62%;
  font-size:386px;line-height:.8;letter-spacing:-.055em;text-transform:uppercase;
  background-image:var(--lg-bloominv);background-size:135% auto;background-position:44% 44%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.koko-card .cN1 .fallback{position:absolute;left:40px;right:40px;top:126px;margin:0;font-weight:900;font-stretch:62%;
  font-size:386px;line-height:.8;letter-spacing:-.055em;text-transform:uppercase;color:#6F6558;z-index:-1}
.koko-card .cN1 p{position:absolute;left:46px;right:180px;bottom:150px;margin:0;font-weight:600;font-size:46px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(255,255,255,.9)}
.koko-card /* N2. the per cent belongs to the number */
.cN2 .bg{background-position:50% 36%}
.koko-card .cN2 .sc{height:74%}
.koko-card .cN2 .mix{position:absolute;left:48px;right:52px;bottom:472px;margin:0;font-weight:900;font-stretch:62%;
  font-size:238px;line-height:.82;letter-spacing:-.05em;color:#fff}
.koko-card .cN2 .mix u{display:block;text-decoration:none;margin-top:18px;font:500 40px/1 "DM Mono",monospace;
  font-stretch:100%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.koko-card .cN2 p{position:absolute;left:58px;right:200px;bottom:330px;margin:0;font-weight:600;font-size:42px;
  line-height:1.16;letter-spacing:-.022em;color:#fff}
.koko-card /* N3. the waistband, .koko-card with the heading given its own room */
.cN3 .bg{inset:0 0 54% 0;background-position:50% 42%}
.koko-card .cN3 .fade{position:absolute;left:0;right:0;top:22%;height:26%;
  background:linear-gradient(180deg,rgba(20,18,16,0) 0%,#141210 100%)}
.koko-card .cN3 h3{position:absolute;left:58px;right:58px;top:488px;margin:0;font-weight:900;font-stretch:70%;
  font-size:88px;line-height:.86;letter-spacing:-.042em;text-transform:uppercase;color:#fff}
.koko-card .cN3 dl{position:absolute;left:58px;right:58px;bottom:326px;margin:0;display:grid;
  grid-template-columns:1fr auto;row-gap:24px;column-gap:24px;align-items:baseline}
.koko-card .cN3 dt{font:500 29px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
.koko-card .cN3 dd{margin:0;text-align:right;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em;color:#fff}
.koko-card /* N4. two scenes, .koko-card and the copy no longer claims what the picture cannot show */
.cN4{display:grid;grid-template-rows:1fr 1fr;background:#141210}
.koko-card .cN4 .scene{position:relative;overflow:hidden}
.koko-card .cN4 .scene .bg{inset:0}
.koko-card .cN4 .rule{position:absolute;left:0;right:0;top:50%;height:6px;background:#141210}
.koko-card .cN4 .capband{position:absolute;left:0;right:0;bottom:0;padding:54px 56px 44px;
  background:linear-gradient(0deg,rgba(10,9,8,.95) 0%,rgba(10,9,8,.72) 62%,rgba(10,9,8,0) 100%)}
.koko-card .cN4 h3{margin:0;font-weight:900;font-stretch:68%;font-size:112px;line-height:.86;letter-spacing:-.044em;
  text-transform:uppercase;color:#fff}
.koko-card .cN4 .foot{color:rgba(255,255,255,.86)}
.koko-card /* N5. the review over a real customer photo. no name, .koko-card no invented person */
.cN5 .bg{background-position:50% 24%}
.koko-card .cN5 .sc{height:78%}
.koko-card .cN5 .stars7{position:absolute;left:58px;bottom:486px;display:flex;gap:11px}
.koko-card .cN5 .stars7 i{width:40px;height:40px;background:var(--gold);
  clip-path:polygon(50% 0,61.8% 35.5%,100% 35.5%,69% 57.5%,80.9% 100%,50% 73%,19.1% 100%,31% 57.5%,0 35.5%,38.2% 35.5%)}
.koko-card .cN5 blockquote{position:absolute;left:58px;right:76px;bottom:218px;margin:0;font-family:"Playfair Display",serif;
  font-weight:500;font-size:94px;line-height:1.06;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.koko-card .cN5 .vb{position:absolute;left:58px;bottom:150px;display:inline-flex;align-items:center;gap:14px;
  font:500 30px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.koko-card .cN5 .vb i{width:30px;height:30px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ===== cards8 ===== */

.koko-card /* ===== BATCH 8 : round 7 notes ==================================
   P1  the pattern continues outside the mask, .koko-card under an 85% scrim, .koko-card in register, .koko-card so the letters read as a window cut into it.
   P4  the headline splits across the two halves, .koko-card tracking opened
       up so the words stop touching.
   P5  stars, .koko-card quote and the verified line stack from the bottom, .koko-card so
       nothing can overlap anything.
   ============================================================== */
.card8{--ink:#141210;--terra:#C1502E;--gold:#CFA75C;
  font-family:Archivo,sans-serif;background:#141210;color:#fff}
.koko-card .card8 .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%}
.koko-card .card8 .foot{position:absolute;left:58px;right:58px;bottom:232px;display:flex;align-items:baseline;gap:22px;
  font:500 30px/1 "DM Mono",monospace;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.koko-card .card8 .foot .nm{margin-left:auto;letter-spacing:.22em;text-transform:uppercase;font-size:26px}
.koko-card /* P1. one pattern, .koko-card seen twice: dimmed across the card, .koko-card full strength in the word.
   Both layers use identical background geometry, .koko-card so they stay in register. */
.cP1{background:#141210}
.koko-card .cP1 .patt, .koko-card .cP1 .fill, .koko-card .cP1 .fallback{position:absolute;inset:0;
  background-image:var(--lg-bloominv);background-size:150% auto;background-position:44% 46%;
  background-repeat:no-repeat}
.koko-card .cP1 .veil{position:absolute;inset:0;background:rgba(14,12,10,.85)}
.koko-card .cP1 .fill, .koko-card .cP1 .fallback{display:flex;align-items:center;justify-content:center;margin:0;padding:0 40px 120px;
  font-weight:900;font-stretch:62%;font-size:386px;line-height:.8;letter-spacing:-.05em;text-transform:uppercase}
.koko-card .cP1 .fill{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.koko-card .cP1 .fallback{background-image:none;color:#8E8272;z-index:-1}
.koko-card .cP1 p{position:absolute;left:46px;right:180px;bottom:330px;margin:0;font-weight:600;font-size:46px;
  line-height:1.16;letter-spacing:-.022em;color:rgba(255,255,255,.92)}
.koko-card /* P4. the sentence split across the two scenes */
.cP4{display:grid;grid-template-rows:1fr 1fr;background:#141210}
.koko-card .cP4 .scene{position:relative;overflow:hidden}
.koko-card .cP4 .scene .bg{inset:0}
.koko-card .cP4 .rule{position:absolute;left:0;right:0;top:50%;height:6px;background:#141210}
.koko-card .cP4 .halfcap{position:absolute;left:0;right:0;padding:0 56px}
.koko-card .cP4 .halfcap.a{bottom:224px}
.koko-card .cP4 .halfcap.b{bottom:330px}
.koko-card .cP4 .halfcap span{display:inline-block;font-weight:900;font-stretch:70%;font-size:124px;line-height:.92;
  letter-spacing:-.022em;word-spacing:.06em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 38px rgba(10,9,8,.86)}
.koko-card .cP4 .foot{color:rgba(255,255,255,.86)}
.koko-card /* P5. bottom anchored stack, .koko-card so nothing can collide */
.cP5 .bg{background-position:50% 24%}
.koko-card .cP5 .sc{position:absolute;left:0;right:0;bottom:0;height:80%;
  background:linear-gradient(0deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.74) 28%,rgba(10,9,8,.3) 60%,rgba(10,9,8,0) 100%)}
.koko-card .cP5 .stack{position:absolute;left:58px;right:76px;bottom:326px;display:flex;flex-direction:column;
  align-items:flex-start;gap:26px}
.koko-card .cP5 .stars8{display:flex;gap:11px}
.koko-card .cP5 .stars8 i{width:40px;height:40px;background:var(--gold);
  clip-path:polygon(50% 0,61.8% 35.5%,100% 35.5%,69% 57.5%,80.9% 100%,50% 73%,19.1% 100%,31% 57.5%,0 35.5%,38.2% 35.5%)}
.koko-card .cP5 blockquote{margin:0;font-family:"Playfair Display",serif;font-weight:500;font-size:94px;
  line-height:1.06;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.koko-card .cP5 .vb{display:inline-flex;align-items:center;gap:14px;font:500 30px/1 "DM Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.koko-card .cP5 .vb i{width:30px;height:30px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ===== fixes ===== */

.koko-card /* The old safe band is GONE. Measured on the live page today: the gallery box
   is exactly 1:1 on mobile and takes each slide's own ratio on desktop, .koko-card so a
   1080 square card is shown whole on both. Only the real defects remain. */
.cU4 h3, .koko-card .cZ4 h3, .koko-card .cB4 h3, .koko-card .cD4 .run{word-spacing:.14em}
.koko-card .cX4 .fig4{word-spacing:normal}
.koko-card .cV4 .sc.half{height:60%}
.koko-card .cV4 dt{color:rgba(255,255,255,.92)}
.koko-card .cV4 dl{text-shadow:0 2px 26px rgba(10,9,8,.85)}
.koko-card .cT4c .hand.sm{font-size:82px;line-height:1.14}
.koko-card .cT4c .hand.xs{font-size:72px;line-height:1.12}
.koko-card .cW4 .wstack{position:absolute;left:58px;right:76px;bottom:330px;
  display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.koko-card .cW4 .wstack .stars5{position:static}
.koko-card .cW4 .wstack blockquote{position:static;right:auto;bottom:auto}
.koko-card .cW4 .wstack .who4{position:static;left:auto;bottom:auto}
.koko-card .cU4 h3{max-width:none;font-size:96px;line-height:.9}
.koko-card /* the print artwork is per product, .koko-card so the round-8 demo vars are repointed */
.cP1 .patt, .koko-card .cP1 .fill, .koko-card .cP1 .fallback{background-image:var(--img-print)!important}
.koko-card .cN3 .bg, .koko-card .cY .bg{background-size:cover}