/* Poster direction: page-level styles layered on brief.css. Scale contrast, colour blocks, white space, turned type, shapes. */
:root {
  --shape-ink: var(--bc-ink, #111111);
  --shape-red: var(--bc-red, #d62f1f);
  --surface-block-red: var(--bc-red, #d62f1f);
  --surface-block-ink: var(--bc-ink, #111111);
  --angle-up: -90deg; --angle-down: 90deg; --angle-skew: -34deg;
  --radius-round: 50%;
  --font-ultra: var(--font-thin);
  --bc-blue: #1f4fd6; --surface-block-blue: var(--bc-blue); /* Blue's section only */
}

/* Blocks: full-bleed flat grounds */
.blk { position: relative; overflow: hidden; }
.blk.red { background: var(--surface-block-red); color: var(--text-inverse, #efe9dc); }
.blk.ink { background: var(--surface-block-ink); color: var(--text-inverse, #efe9dc); }
.blk.red a, .blk.ink a { color: inherit; }
.blk.ink a:hover { color: var(--bc-red); }
.blk.red a:hover { color: var(--bc-ink); }

/* Type at the ends of the scale */
.cb { font-family: var(--font-cond); font-weight: 900; line-height: .86; letter-spacing: -.005em; }
.cbold { font-family: var(--font-cond); font-weight: 700; }
.ul { font-family: var(--font-thin); font-weight: 200; line-height: .86; letter-spacing: -.02em; }
.th { font-family: var(--font-thin); font-weight: 100; line-height: .82; letter-spacing: -.03em; }
.kick { font-family: var(--font-body); font-weight: 500; font-size: 30px; line-height: 1.1; }
.tag { font-family: var(--font-cond); font-weight: 700; font-size: 17px; line-height: 1.2; text-transform: lowercase; }
.vnote { position: absolute; font-family: var(--font-thin); font-weight: 100; font-size: 30px; line-height: 1; white-space: nowrap; text-transform: lowercase; transform-origin: 0 0; transform: rotate(90deg); }
.disp { font-family: var(--font-cond); font-weight: 900; font-size: clamp(56px, 8.4vw, 112px); line-height: .88; text-wrap: balance; }
.disp-s { font-family: var(--font-cond); font-weight: 900; font-size: clamp(40px, 5.6vw, 72px); line-height: .9; text-wrap: balance; }
.abs { position: absolute; }

/* Hero: one huge thing, small things around it, lots of air */
.hero { position: relative; overflow: hidden; min-height: 760px; }
.hero .wrap { position: relative; z-index: 3; }
.hero-copy { padding-top: 120px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.hero-copy .tag { display: flex; align-items: center; gap: 10px; }
.hero-copy .lead { max-width: 40ch; }
@media (max-width: 639px) {
  .hero { min-height: 0; }
  .hero-copy { padding-top: 56px; padding-bottom: 64px; gap: 20px; }
  .vnote { display: none; }
}

/* Market strip of big words */
.mkts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.mkts a { font-size: clamp(40px, 6vw, 84px); line-height: .9; }
.mkts a:nth-child(odd) { font-family: var(--font-cond); font-weight: 900; }
.mkts a:nth-child(even) { font-family: var(--font-thin); font-weight: 100; letter-spacing: -.03em; }
.mkts a:hover { color: var(--bc-red); }

/* Poster tiles: issue covers as small posters */
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap-desktop, 24px); }
.pt { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 28px; overflow: hidden; background: var(--bc-paper-light, #f6f2e9); color: var(--text-body); transition: background-color var(--dur-hover, .2s); }
.pt.red { background: var(--surface-block-red); color: var(--text-inverse, #efe9dc); }
.pt.ink { background: var(--surface-block-ink); color: var(--text-inverse, #efe9dc); }
.pt .tag { position: relative; z-index: 3; }
.pt .hk { position: relative; z-index: 3; font-family: var(--font-cond); font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); line-height: .95; text-wrap: balance; }
.pt .ft { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; }
.pt .ar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tile-bg, #111); color: var(--tile-fg, #efe9dc); font-family: var(--font-cond); font-weight: 700; font-size: 18px; transition: background-color var(--dur-hover, .2s); }
.pt.ink .ar { background: var(--bc-paper); color: var(--bc-ink); }
.pt:hover .ar, .pt:focus-visible .ar { background: var(--tile-bg-active, #d62f1f); color: var(--bc-paper); }
.pt.red:hover .ar { background: var(--bc-ink); }
.pt .art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@media (max-width: 1099px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .posters { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pt { padding: 22px; } }

.posters.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk.red a.pt, .blk.ink a.pt { color: var(--text-body); }
.blk.red a.pt.ink, .blk.ink a.pt.ink, .blk.red a.pt.red { color: var(--text-inverse, #efe9dc); }
@media (max-width: 639px) { .posters.two { grid-template-columns: minmax(0, 1fr); } }

/* The week as a schedule of words */
.wk { list-style: none; padding: 0; margin: 0; }
.wk li { background: var(--rule-broken-a) bottom / 100% 1px no-repeat; }
.wk li:nth-child(even) { background-image: var(--rule-broken-c); }
.wk a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 96px; padding-block: 12px; }
.wk .d { font-family: var(--font-cond); font-weight: 700; font-size: 17px; }
.wk .m { font-size: clamp(40px, 5.4vw, 76px); line-height: .9; }
.wk li:nth-child(odd) .m { font-family: var(--font-cond); font-weight: 900; }
.wk li:nth-child(even) .m { font-family: var(--font-thin); font-weight: 100; letter-spacing: -.03em; }
.wk .t { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tile-bg, #111); color: var(--tile-fg, #efe9dc); font-family: var(--font-cond); font-weight: 700; font-size: 18px; transition: background-color var(--dur-hover, .2s); }
.wk a:hover .t, .wk a:focus-visible .t { background: var(--tile-bg-active, #d62f1f); }
.wk a:hover .m { color: var(--bc-red); }
@media (max-width: 639px) { .wk a { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; min-height: 72px; } .wk .t { width: 44px; height: 44px; } }

/* Issue items, poster spacing */
.it { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap-desktop, 24px); padding-block: 72px; scroll-margin-top: 120px; }
.it:target { animation: it-target-flash 2.4s ease-out; }
@keyframes it-target-flash {
	0%, 75% { box-shadow: inset 4px 0 0 var(--bc-red); }
	100% { box-shadow: inset 4px 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.it:target { animation: none; box-shadow: inset 4px 0 0 var(--bc-red); }
}
.it .no { grid-column: 1 / 4; font-family: var(--font-thin); font-weight: 100; font-size: 220px; line-height: .74; letter-spacing: -.05em; }
.it .bd { grid-column: 4 / 12; display: flex; flex-direction: column; gap: 20px; }
.it .bd .what { max-width: 60ch; }
.it .mv { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.it .why { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 24px; max-width: 70ch; padding-top: 18px; background: var(--rule-broken-c) top / 100% 1px no-repeat; }
.it .why .tag { display: flex; align-items: center; gap: 10px; color: var(--bc-red); }
.it.alt .no { color: var(--bc-red); }
@media (max-width: 1099px) { .it .no { grid-column: 1 / 4; font-size: 150px; } .it .bd { grid-column: 4 / 13; } }
@media (max-width: 639px) {
  .it { display: flex; flex-direction: column; gap: 16px; padding-block: 48px; }
  .it .no { font-size: 112px; }
  .it .why { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column split used on blocks */
.sp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap-desktop, 24px); align-items: start; }
.sp > .l { grid-column: 1 / 6; }
.sp > .r { grid-column: 7 / 13; }
@media (max-width: 1099px) { .sp > .l, .sp > .r { grid-column: 1 / 13; } .sp > .r { margin-top: 32px; } }

/* Buttons on blocks */
.bt { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 22px; font-family: var(--font-cond); font-weight: 700; font-size: 18px; text-transform: lowercase; background: var(--bc-ink); color: var(--bc-paper) !important; transition: background-color var(--dur-hover, .2s); }
.bt:hover, .bt:focus-visible { background: var(--bc-red); }
.bt.pap { background: var(--bc-paper); color: var(--bc-ink) !important; }
.bt.pap:hover { background: var(--bc-ink); color: var(--bc-paper) !important; }
.bt.out { background: transparent; color: inherit !important; box-shadow: inset 0 0 0 2px currentColor; }
.bt.out:hover { background: var(--bc-ink); color: var(--bc-paper) !important; box-shadow: none; }
.bts { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 639px) { .bts .bt { width: 100%; justify-content: space-between; } }

/* Footer block */
.fb { padding-block: 120px 48px; }
.fb .ln { font-size: clamp(48px, 7vw, 104px); line-height: .9; }
.fb .ln b { font-family: var(--font-cond); font-weight: 900; }
.fb .ln span { font-family: var(--font-thin); font-weight: 100; letter-spacing: -.03em; }
.fb .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; margin-top: 72px; padding-top: 18px; background: linear-gradient(90deg, currentColor 0 58%, transparent 58% 61%, currentColor 61% 100%) top / 100% 1px no-repeat; }
.fb .meta p { max-width: 60ch; font-size: 15px; font-weight: 300; }
@media (max-width: 639px) { .fb { padding-block: 80px 40px; } .fb .meta { margin-top: 48px; } }

/* Scorecard: one column per market the week's data has (--cols, set inline). */
.scw { display: grid; grid-template-columns: minmax(0, 3fr) repeat(var(--cols), minmax(0, 3fr)); column-gap: 24px; }
.scw .hd { font-family: var(--font-cond); font-weight: 700; font-size: 20px; text-transform: lowercase; padding-bottom: 16px; }
.scw .hd.apac { color: var(--bc-red); }
.scr { display: contents; }
.scr > * { padding-block: 28px 32px; background: var(--rule-broken-a) top / 100% 1px no-repeat; }
.scr .th2 { display: flex; flex-direction: column; gap: 10px; }
.scr .th2 b { font-family: var(--font-cond); font-weight: 900; font-size: 34px; line-height: .95; }
.scr .th2 span { font-family: var(--font-cond); font-weight: 700; font-size: 14px; color: var(--bc-red); text-transform: lowercase; }
.scr p, .scr a { margin: 0; font-size: 19px; line-height: 1.4; }
.scr a { display: block; text-decoration: none; }
.scr a:hover { color: var(--bc-red); }
.scr .mk { display: none; }
.scr.hdr > * { background: none; padding: 0 0 16px; }
.scr .nil { display: block; width: 36px; height: 2px; margin-top: 14px; background: rgba(17, 17, 17, .25); }
@media (max-width: 639px) {
	.scw { display: block; }
	.scr.hdr { display: none; }
	.scr { display: block; padding-block: 24px 8px; background: var(--rule-broken-a) top / 100% 1px no-repeat; }
	.scr > * { padding: 0; background: none; }
	.scr .th2 { margin-bottom: 16px; }
	.scr .th2 b { font-size: 30px; }
	.scr .c { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding-block: 10px; background: linear-gradient(90deg, rgba(17, 17, 17, .2) 0 100%) top / 100% 1px no-repeat; }
	.scr .c.empty { display: none; }
	.scr .c a::after { content: ""; position: absolute; inset: 0; }
	.scr .mk { display: block; font-family: var(--font-cond); font-weight: 700; font-size: 15px; text-transform: lowercase; padding-top: 2px; }
	.scr .mk.apac { color: var(--bc-red); }
	.scr p, .scr a { font-size: 17px; }
}

/* Market tiles (Docket) */
.mt { display: grid; grid-template-columns: repeat(2, 150px); gap: 14px; }
.mt span { display: flex; align-items: flex-end; justify-content: flex-start; width: 150px; height: 150px; padding: 10px 14px; background: var(--bc-paper); color: var(--bc-ink); font-family: var(--font-cond); font-weight: 900; font-size: 128px; line-height: .78; overflow: hidden; }
.mt span.r { background: var(--bc-red); color: var(--bc-paper); }
@media (max-width: 639px) { .mt { grid-template-columns: repeat(2, 84px); gap: 8px; } .mt span { width: 84px; height: 84px; font-size: 72px; padding: 6px 8px; } }

/* Archive rows */
.ar-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-block: 28px; background: var(--rule-broken-a) bottom / 100% 1px no-repeat; }
.ar-row .n { font-family: var(--font-thin); font-weight: 100; font-size: 120px; line-height: .74; letter-spacing: -.05em; }
.ar-row .h { font-family: var(--font-cond); font-weight: 900; font-size: clamp(30px, 3.6vw, 48px); line-height: .92; }
.ar-row .t { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tile-bg, #111); color: var(--tile-fg, #efe9dc); font-family: var(--font-cond); font-weight: 700; transition: background-color var(--dur-hover, .2s); }
.ar-row:hover .t, .ar-row:focus-visible .t { background: var(--tile-bg-active, #d62f1f); }
.ar-row:hover .h { color: var(--bc-red); }
@media (max-width: 639px) { .ar-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; } .ar-row .n { font-size: 64px; } }

/* Portfolio site */
.prf { display: flex; flex-wrap: wrap; gap: 10px 0; font-family: var(--font-cond); font-weight: 700; font-size: 17px; padding-block: 18px; background: var(--rule-broken-b) top / 100% 1px no-repeat; }
.prf span { padding-right: 22px; margin-right: 22px; box-shadow: inset -1px 0 0 currentColor; }
.prf span:last-child { box-shadow: none; }
.wrow { display: grid; grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-block: 22px; background: var(--rule-broken-a) bottom / 100% 1px no-repeat; }
.wrow .n { font-family: var(--font-thin); font-weight: 100; font-size: 64px; line-height: .8; letter-spacing: -.04em; }
.wrow .h { font-family: var(--font-cond); font-weight: 900; font-size: clamp(28px, 3vw, 40px); line-height: .92; }
.wrow .x { font-size: 15px; line-height: 1.4; font-weight: 300; }
.wrow .x b { font-family: var(--font-cond); font-weight: 700; font-size: 15px; display: block; margin-bottom: 2px; }
.wrow .t { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tile-bg, #111); color: var(--tile-fg, #efe9dc); font-family: var(--font-cond); font-weight: 700; transition: background-color var(--dur-hover, .2s); }
.wrow:hover .t, .wrow:focus-visible .t { background: var(--tile-bg-active, #d62f1f); }
.wrow:hover .h { color: var(--bc-red); }
.wrow.lite .h { font-family: var(--font-thin); font-weight: 100; letter-spacing: -.02em; }
@media (max-width: 1099px) { .wrow { grid-template-columns: 64px minmax(0, 1fr) auto; } .wrow .x { grid-column: 2 / 3; } .wrow .t { grid-row: 1; grid-column: 3; } }
@media (max-width: 639px) { .wrow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; } .wrow .n { font-size: 44px; } }
.divl { display: flex; align-items: center; gap: 14px; padding-block: 56px 18px; }
.divl i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--bc-red); }
.mail { display: inline-block; font-family: var(--font-cond); font-weight: 900; font-size: clamp(32px, 5vw, 64px); line-height: 1; padding-bottom: 6px; box-shadow: inset 0 -4px 0 currentColor; }
.mail:hover { color: var(--bc-red); }