/* The brand book (templates/brand.html): flat colour fields, big display
   type, body font for every label. Only the hero mark moves, on a computer. */
.bb { --bb-ease: cubic-bezier(.22, 1, .36, 1); --plaster: #fffef3; --void: #0b0b0b; --gold: #ffc60b; --pome: #e0203f; --violet: #6b2fff;
  display: grid; gap: 12px; min-width: 0; padding: 14px 0 32px; }
.bb-sec, .bb-hero { position: relative; min-width: 0; overflow: hidden; border-radius: 28px; padding: clamp(24px, 5vw, 64px); }
.bb-k, .bb-n { margin: 0 0 14px; font: 800 1rem var(--font-body); letter-spacing: 0; }
.bb-h, .bb-sh { margin: 0; font: 400 clamp(3rem, 9.4vw, 8.6rem)/.86 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.bb-sh { font-size: clamp(2.6rem, 7.6vw, 6.4rem); }
.bb-hero .bb-h { font-size: clamp(3rem, 7vw, 7rem); }
.bb-h em, .bb-sh em { font-style: normal; color: var(--gold); }
.bb-p, .bb-lead { max-width: 62ch; margin: 18px 0 0; font: 500 clamp(1rem, 1.6vw, 1.18rem)/1.6 var(--font-body); }
.bb-acts, .bb-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 16px;
  background: rgba(255, 254, 243, .1); color: inherit; font: 800 1rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform .14s var(--bb-ease), background-color .2s var(--bb-ease); }
.bb-btn:active { transform: scale(.96); }
.bb-btn.gold { background: var(--gold); color: var(--void) !important; }
.bb-btn.ink { background: var(--void); color: var(--plaster) !important; }
.bb-btn svg { flex: none; }

/* hero: the mark, big, on the night */
.bb-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 60px); min-height: min(78svh, 760px); background: var(--void); color: var(--plaster); }
.bb-hero .bb-k { color: var(--gold); }
.bb-hero-mark { display: grid; place-items: center; transition: transform .6s var(--bb-ease); will-change: transform; }
.bb-hero-mark img { width: min(100%, 520px); height: auto; }
@media (max-width: 860px) {
  .bb-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bb-hero-mark { order: -1; justify-items: start; }
  .bb-hero-mark img { width: min(46vw, 220px); }
}

/* fields */
.bb-plaster { background: var(--plaster); color: var(--void); }
.bb-void { background: #161616; color: var(--plaster); }
.bb-gold { background: var(--gold); color: var(--void); }
.bb-plaster a, .bb-gold a { color: var(--void); }
.bb-void .bb-n { color: var(--gold); }
.bb-plaster .bb-n { color: var(--pome); }

/* file tiles */
.bb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.bb-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-tile { display: grid; grid-template-rows: 1fr auto; gap: 16px; min-width: 0; margin: 0; padding: 22px; border-radius: 22px; }
.bb-tile img { width: auto; max-width: 70%; height: auto; max-height: 180px; margin: 18px auto; object-fit: contain; }
.bb-tile.wide img { max-width: 88%; max-height: 90px; margin: 34px auto; }
.bb-tile.on-void { background: var(--void); color: var(--plaster); }
.bb-tile.on-paper { background: #f1efdf; color: var(--void); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .08); }
.bb-void .bb-tile.on-paper { background: var(--plaster); }
.bb-plaster .bb-tile.on-paper { background: #ecead8; }
.bb-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bb-tile figcaption b { font: 800 1rem var(--font-body); }
.bb-tile figcaption span { display: flex; gap: 6px; }
.bb-file { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(127, 127, 127, .18); color: inherit !important;
  font: 800 .9rem var(--font-body); text-decoration: none; transition: transform .14s var(--bb-ease); }
.bb-file:active { transform: scale(.95); }
@media (max-width: 860px) { .bb-tiles, .bb-tiles.two { grid-template-columns: minmax(0, 1fr); } }

/* colours: each one its own field */
.bb-colours { padding: 0; background: #161616; color: var(--plaster); }
.bb-col-head { padding: clamp(24px, 5vw, 64px) clamp(24px, 5vw, 64px) 24px; }
.bb-col-head .bb-n { color: var(--gold); }
.bb-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb-sw { display: grid; align-content: end; gap: 4px; min-height: clamp(180px, 26vw, 320px); padding: 22px; border: 0; background: var(--c); color: var(--i); text-align: start; cursor: pointer;
  font: inherit; transition: transform .14s var(--bb-ease); }
.bb-sw:active { transform: scale(.97); }
.bb-sw b { font: 800 1.2rem var(--font-body); }
.bb-sw span { font: 500 .92rem/1.4 var(--font-body); opacity: .8; }
.bb-sw code { margin-top: 8px; font: 700 1rem var(--font-body); letter-spacing: .02em; }
.bb-sw.copied code::after { content: '  ✓'; }
@media (max-width: 860px) { .bb-swatches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bb-sw:first-child { grid-column: 1 / -1; } }

/* type */
.bb-type { display: grid; gap: 12px; margin-top: 30px; }
.bb-face { display: grid; gap: 10px; padding: 22px 24px; border-radius: 22px; background: #ecead8; min-width: 0; }
.bb-face-k { margin: 0; font: 800 .95rem var(--font-body); color: #55534a; }
.bb-face-s { margin: 0; overflow-wrap: anywhere; color: var(--void); }
.f-display { font: 400 clamp(1.5rem, 7vw, 5.4rem)/1 'Medium', var(--font-display); letter-spacing: .06em; }
.f-body { font: 500 clamp(1.4rem, 3.6vw, 2.6rem)/1.2 'Space Grotesk', var(--font-body); }
.f-fa { font: 700 clamp(1.8rem, 5vw, 3.6rem)/1.4 'Darvish', 'Fa Display', var(--font-body); }

/* how to use it */
.bb-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: bb; }
.bb-dos li { position: relative; padding: 22px 22px 24px; border-radius: 22px; background: var(--void); font: 500 1rem/1.55 var(--font-body); color: #d9d7c9; counter-increment: bb; }
.bb-dos li::before { content: counter(bb); display: block; margin-bottom: 10px; font: 400 2.4rem/1 var(--font-display); color: var(--gold); }
.bb-dos b { display: block; margin-bottom: 4px; font-size: 1.12rem; color: var(--plaster); }
.bb-not-h { margin-top: clamp(40px, 6vw, 72px); color: var(--pome); }
.bb-nots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.bb-nots li { display: grid; gap: 12px; padding: 16px 16px 18px; border-radius: 22px; background: var(--void); }
.bb-nots b { font: 800 .98rem var(--font-body); }
.bb-nots b::before { content: '✕  '; color: var(--pome); }
.bb-bad { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: #222 center / 46% no-repeat url('/static/brand/panjgoosheh-mark-white.svg'); }
.bb-bad.squash { background-size: 64% 30%; }
.bb-bad.turn::after { content: ''; position: absolute; inset: 0; background: center / 46% no-repeat url('/static/brand/panjgoosheh-mark-white.svg'); transform: rotate(-24deg); }
.bb-bad.turn { background-image: none; }
.bb-bad.glow { filter: drop-shadow(0 0 14px #ff2bd6) drop-shadow(6px 8px 0 #6b2fff); }
.bb-bad.busy { background-color: transparent; background-image: url('/static/brand/panjgoosheh-mark-white.svg'), repeating-linear-gradient(35deg, #ffc60b 0 10px, #6b2fff 10px 20px, #e0203f 20px 30px); background-size: 46%, auto; }
.bb-bad.hue { background-image: none; }
.bb-bad.hue::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #00e0ff, #a6ff00); -webkit-mask: center / 46% no-repeat url('/static/brand/panjgoosheh-mark-white.svg'); mask: center / 46% no-repeat url('/static/brand/panjgoosheh-mark-white.svg'); }
.bb-bad.font { background-image: none; }
.bb-bad.font i { font: italic 400 1.5rem 'Times New Roman', serif; color: var(--plaster); }

/* pass it on */
.bb-gold .bb-btn { background: rgba(11, 11, 11, .1); }
.bb-gold .bb-btn.ink { background: var(--void); }
.bb-press { margin: 24px 0 0; font: 600 1rem var(--font-body); }
.bb-press a { font-weight: 800; }

:root[lang="fa"] .bb-h, :root[lang="fa"] .bb-sh { line-height: 1.15; }
:root[lang="fa"] .bb-dos li::before { font-family: 'Fa Display', var(--font-display); }
@media (prefers-reduced-motion: reduce) { .bb-hero-mark { transition: none; transform: none !important; } }