/* Bruma, inside the standard case-study template */
.bruma .br-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
.bruma img.cover,.bruma video.cover{width:100%;height:auto;display:block;border-radius:14px}
.bruma .lr-cols img.cover{aspect-ratio:4/5;object-fit:cover}
/* Logo tiles use the logo artwork as a mask, so any colour works */
.br-logo{display:flex;align-items:center;justify-content:center;border-radius:14px;aspect-ratio:4/3;overflow:hidden}
.br-logo.wide{aspect-ratio:16/8}
.br-logo i{display:block;height:auto;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.br-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* Type */
.br-type{position:relative;background:#E9E3E0;color:#3F3A38;border-radius:14px;padding:6% 6% 7%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;gap:20px 6%;align-items:end}
.br-type .tk{grid-column:1/-1;font:500 clamp(11px,1vw,13px)/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.br-type .tk b{display:block;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:clamp(14px,1.3vw,17px);opacity:1}
.br-type i{display:block;background:currentColor;-webkit-mask:var(--m) left bottom/contain no-repeat;mask:var(--m) left bottom/contain no-repeat}
.br-type .disp{aspect-ratio:var(--ar)}
.br-type .set{aspect-ratio:var(--ar)}
/* Sticker sheet: illustrations cut as die-cut stickers */
.br-sheet{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#E79B35}
.br-stk{position:absolute;height:auto;transform:rotate(var(--r,0deg));filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 12px rgba(63,58,56,.28));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.br-sheet:hover .br-stk{transform:rotate(var(--r,0deg)) translateY(-3px)}
/* Characters */
.br-chars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:#E9E3E0;border-radius:16px;padding:6% 5% 5%}
.br-chars figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px}
.br-chars img{width:100%;max-height:220px;object-fit:contain;display:block}
.br-chars figcaption{font:400 13px/1.2 Switzer,Inter,sans-serif;color:#3F3A38}
/* Patterns */
.br-patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.br-patterns .pt{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background-color:#F6F3F1}
.br-patterns .check{background-image:linear-gradient(#3F3A3833 1px,transparent 1px),linear-gradient(90deg,#3F3A3833 1px,transparent 1px);background-size:18px 18px}
.br-patterns .tone{background-image:radial-gradient(#3F3A38 32%,transparent 34%);background-size:7px 7px;background-color:#E9E3E0;opacity:1}
.br-patterns .tone{-webkit-mask:linear-gradient(135deg,#000 10%,rgba(0,0,0,.25) 90%);mask:linear-gradient(135deg,#000 10%,rgba(0,0,0,.25) 90%)}
.br-patterns span{position:absolute;left:14px;bottom:12px;padding:6px 10px;border-radius:999px;background:#3F3A38;color:#E9E3E0;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* Explorations placeholder */
.br-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/9;border-radius:14px;border:1.5px dashed #BDB4B0;background:#F6F3F1;color:#3F3A38;font:400 18px/1.2 Switzer,Inter,sans-serif}
.br-placeholder small{font:400 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8A817D}
/* Feed: posts and reels in rows of three */
.br-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.br-feed img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:12px}
.br-feed.reels video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:12px;background:#3F3A38}
@media(max-width:860px){.br-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.br-chars{grid-template-columns:repeat(2,minmax(0,1fr))}.br-type{grid-template-columns:1fr}.br-stk{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 8px rgba(63,58,56,.25))}}
@media(max-width:560px){.br-feed{grid-template-columns:repeat(2,minmax(0,1fr))}.br-feed.reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
/* v3: captions inside logo tiles, line drawings, characters as a row */
.br-logo{position:relative}
.br-logo .cap{position:absolute;left:12px;top:10px;font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.br-lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px;align-items:center;justify-items:center;background:#F6F3F1;border-radius:16px;padding:7% 6%;box-shadow:inset 0 0 0 1px #E4DFEC}
.br-lines img{max-width:100%;max-height:150px;object-fit:contain;display:block}
.br-chars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end;background:#E9E3E0;border-radius:16px;padding:7% 5% 6%}
.br-chars img{width:100%;max-height:240px;object-fit:contain;display:block}
@media(max-width:860px){.br-lines{grid-template-columns:repeat(2,minmax(0,1fr))}.br-chars{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Typography cards and hierarchy, same frame as Sip Society and Leegality */
.br-tcard{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;padding:8%}
.br-tcard.dark{background:#3F3A38;color:#E9E3E0}.br-tcard.gold{background:#E79B35;color:#3F3A38}.br-tcard.cream{background:#E9E3E0;color:#3F3A38}
.br-tcard .nm{font:500 clamp(11px,1vw,13px)/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.75;position:relative;z-index:1}
.br-tcard .nm b{display:block;font-weight:600;opacity:1;letter-spacing:.02em;text-transform:none;font-size:clamp(14px,1.3vw,17px)}
.br-tcard>i{position:absolute;right:8%;bottom:8%;width:66%;aspect-ratio:var(--ar);background:currentColor;-webkit-mask:var(--m) right bottom/contain no-repeat;mask:var(--m) right bottom/contain no-repeat}
.br-ladder{background:#fff;border-radius:16px;overflow:hidden}
.br-ladder .tl-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;padding:26px 28px;border-top:1px solid #EEEAF3}
.br-ladder .tl-row:first-child{border-top:0}
.br-ladder .tl-k{font:500 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6A6573}
.br-ladder .tl-k i{display:block;font-style:normal;letter-spacing:.02em;text-transform:none;color:#9a95a3;margin-top:3px}
.br-ladder .tl-img{display:block;width:100%;aspect-ratio:var(--ar);background:#3F3A38;-webkit-mask:var(--m) left center/contain no-repeat;mask:var(--m) left center/contain no-repeat}
.br-ladder .tl-row:nth-child(2) .tl-img{width:45%}
.br-ladder .tl-row:nth-child(3) .tl-img{width:70%}
@media(max-width:860px){.br-ladder .tl-row{grid-template-columns:1fr;gap:8px}}
/* Sticker sheet v2: big die-cut stickers over a shoot photo, tinted border and a fine outline */
.br-sheet{background:#3F3A38}
.br-sheet .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.9)}
.br-sheet .br-stk{z-index:1;filter:drop-shadow(5px 0 0 var(--b,#fff)) drop-shadow(-5px 0 0 var(--b,#fff)) drop-shadow(0 5px 0 var(--b,#fff)) drop-shadow(0 -5px 0 var(--b,#fff)) drop-shadow(1.2px 0 0 #3F3A38) drop-shadow(-1.2px 0 0 #3F3A38) drop-shadow(0 1.2px 0 #3F3A38) drop-shadow(0 -1.2px 0 #3F3A38) drop-shadow(0 10px 14px rgba(0,0,0,.35))}
@media(max-width:860px){.br-sheet .br-stk{filter:drop-shadow(3px 0 0 var(--b,#fff)) drop-shadow(-3px 0 0 var(--b,#fff)) drop-shadow(0 3px 0 var(--b,#fff)) drop-shadow(0 -3px 0 var(--b,#fff)) drop-shadow(1px 0 0 #3F3A38) drop-shadow(-1px 0 0 #3F3A38) drop-shadow(0 1px 0 #3F3A38) drop-shadow(0 -1px 0 #3F3A38) drop-shadow(0 6px 9px rgba(0,0,0,.3))}}
/* One panel: line illustrations and characters, three across */
.br-lines{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.br-lines img{max-height:190px}
.br-sheet .bg{filter:brightness(.88) saturate(.95)}
.br-feed.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.br-feed.four img{aspect-ratio:1/1}
@media(max-width:560px){.br-feed.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sticker sheet background: the lounge, under a 50% charcoal overlay in darken mode */
.br-sheet .bg{filter:none}
.br-sheet .shade{position:absolute;inset:0;background:#3F3A38;opacity:.5;mix-blend-mode:darken;pointer-events:none}
/* Sticker sheet: an even 4 x 2 grid, equal padding on every side */
.br-sheet .grid{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:6%;gap:4%}
.br-sheet .cell{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.br-sheet .grid .br-stk{position:static;max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain}
/* Line illustrations and characters: 4 x 2, sitting on the check pattern */
.br-lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:0;padding:4%;background-color:#F6F3F1;background-image:linear-gradient(#3F3A3826 1px,transparent 1px),linear-gradient(90deg,#3F3A3826 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}
.br-lines .cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:14%}
.br-lines .cell img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:860px){.br-lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Line illustrations and characters: a 4 x 2 table, one drawing per cell (replaces the check background) */
.br-lines{background:#3F3A3833;background-image:none;padding:0;gap:1px;border:1px solid #3F3A3833;box-shadow:none}
.br-lines .cell{background:#F6F3F1;padding:16%}
.br-lines{justify-items:stretch;align-items:stretch}
.br-lines .cell{width:100%}
.br-placeholder.small{aspect-ratio:16/6}
/* Aa sized by height like the Leegality type cards, not by width */
.br-tcard>i{width:auto;height:30%;aspect-ratio:var(--ar);right:8%;bottom:8%}
/* Type hierarchy at the guideline ratio (large 400%, small 250%, body 100%), body about 15px */
.br-ladder .tl-row .tl-img{height:auto;max-width:100%}
.br-ladder .tl-row:nth-child(1) .tl-img{width:496px}
.br-ladder .tl-row:nth-child(2) .tl-img{width:254px}
.br-ladder .tl-row:nth-child(3) .tl-img{width:247px}
.br-ladder .tl-row{padding:20px 28px}
/* Body at 12px, headlines kept at the guideline ratio */
.br-ladder .tl-row:nth-child(1) .tl-img{width:397px}
.br-ladder .tl-row:nth-child(2) .tl-img{width:203px}
.br-ladder .tl-row:nth-child(3) .tl-img{width:198px}
/* Type cards: same height as the Leegality cards */
.lr-cols.three .br-tcard{aspect-ratio:auto;height:clamp(220px,27vh,300px)}
.br-tcard>i{height:38%}
@media(max-width:760px){.lr-cols.three .br-tcard{height:auto;aspect-ratio:1/1}}
/* Body at 15px, headlines at the guideline ratio */
.br-ladder .tl-row:nth-child(1) .tl-img{width:496px}
.br-ladder .tl-row:nth-child(2) .tl-img{width:254px}
.br-ladder .tl-row:nth-child(3) .tl-img{width:247px}
/* Primary logo tile: less space above and below */
.br-logo.wide{aspect-ratio:16/6}
/* Primary logo and logo family fit on one screen together */
#identity .br-logo.wide{aspect-ratio:16/5}
#identity .br-logos .br-logo{aspect-ratio:16/10}
#identity .br-logo.wide{aspect-ratio:auto;height:clamp(150px,22vh,230px)}
#identity .br-logos .br-logo{aspect-ratio:auto;height:clamp(110px,15vh,160px)}
#identity .br-logos .br-logo i{max-height:62%;width:auto!important;height:62%}
#identity .br-logo.wide i{width:auto!important;height:66%}
/* Section labels on Bruma: regular weight, 24px */
.bruma .sticky-story-copy .num,.bruma .sticky-story-copy .num small{font-weight:400;font-size:24px}
/* Logo family: BRUMA is the same width in every tile (it fills 100% of the primary file, 72.9% of the secondary) */
#identity .br-logos .br-logo{height:clamp(140px,20vh,200px)}
#identity .br-logos .br-logo i{height:auto!important;width:52%!important;max-height:none}
#identity .br-logos .br-logo i[style*="logo-secondary"]{width:71.3%!important}
/* Primary logo: taller tile, logo scaled with it; primary + family together fill one screen */
#identity .br-logo.wide{height:clamp(200px,30vh,300px)}
#identity .br-logo.wide i{height:60%!important;width:auto!important}
#identity .br-logos .br-logo{height:clamp(150px,22vh,210px)}
/* Type hierarchy rows taller, so the type cards and hierarchy fill one screen together */
.br-ladder .tl-row{min-height:clamp(120px,16.5vh,160px);padding-top:0;padding-bottom:0}
.br-ladder .tl-row{min-height:clamp(116px,15.6vh,155px)}
/* Patterns at half height */
.br-patterns .pt{aspect-ratio:8/3}
/* Primary logo tile 25% taller; the logo itself stays the same size */
#identity .br-logo.wide{height:clamp(250px,37.5vh,375px)}
#identity .br-logo.wide i{height:48%!important}
/* Sticker sheet: coffee video under a 50% black overlay in darken mode */
.br-sheet video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.br-sheet .shade{background:#000;opacity:.5;mix-blend-mode:darken}