/* The Team Room: brand tokens and cut-paper pieces. Shared by the case study plates, the landing page and the product. */
@import url(../shared/fonts.css);

:root {
  --sky: #8CCCE5; --brick: #B84430; --paper: #F5F0E7; --marigold: #F1B23E; --ink: #21313B;
  --sky-2: #2E5568;      /* secondary text on sky (4.6:1) */
  --paper-2: #5E6A70;    /* secondary text on paper (4.8:1) */
  --paper-3: #EBE4D8;    /* raised paper, quiet fills on paper */
  --sky-3: #7DBFD9;      /* quiet fill on sky */
  --rgw: "Right Grotesk Wide", "Helvetica Neue", Arial, sans-serif;
  --dia: "Diatype", "Helvetica Neue", Arial, sans-serif;
  /* noise tile: paper tooth and fibre flecks, rendered once and repeated */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .62 0 0 0 -.25' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='8' stitchTiles='stitch' result='w'/%3E%3CfeColorMatrix in='w' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 2.6 0 0 -1.62' result='f'/%3E%3CfeMerge%3E%3CfeMergeNode in='d'/%3E%3CfeMergeNode in='f'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A composition at its true pixel size */
.rm-scene { position: relative; overflow: hidden; font-family: var(--dia); color: var(--ink); -webkit-font-smoothing: antialiased; isolation: isolate; }
.rm-scene * { box-sizing: border-box; }
.rm-grain { position: absolute; inset: 0; background-image: var(--grain); opacity: .12; pointer-events: none; z-index: 0; }
.rm-shelf { position: absolute; z-index: 1; background: var(--paper); }
.rm-shelf > .rm-grain { opacity: .18; }

/* Pieces: one per position, each its own contour, colour and name */
.rm-pc, .rm-crown { position: absolute; z-index: 2; transform-origin: 50% 100%; }
.rm-pc .rm-body, .rm-crown .rm-cut { position: absolute; inset: 0; }
.rm-cut { display: block; position: absolute; left: 0; top: 0; overflow: visible; }
.rm-sh { position: absolute; left: 0; top: 0; display: block; overflow: visible; pointer-events: none; }
.rm-sh path { fill: #0E2C39; }
.rm-sh.far { opacity: .22; }
.rm-sh.near { opacity: .34; }

.rm-txt { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: grid; gap: calc(var(--fs) * .3); font-family: var(--dia); }
.rm-txt b { font-weight: 500; font-size: max(10px, calc(var(--fs) * .46)); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.rm-txt .p { font-weight: 500; font-size: var(--fs); line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
.rm-txt .y { font-weight: 400; font-size: calc(var(--fs) * .56); line-height: 1.38; text-wrap: pretty; }
.rm-txt.dome { text-align: center; justify-items: center; }

/* Display type */
.rm-d { font-family: var(--rgw); font-weight: 500; letter-spacing: -.012em; line-height: 1.04; }
.rm-l { font-family: var(--dia); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* Lockup */
.rm-lock { display: inline-flex; align-items: flex-end; gap: .34em; font-family: var(--rgw); font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.rm-lock svg { width: 1.18em; height: auto; display: block; margin-bottom: .02em; }
.rm-pc.askew { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.rm-at { position: absolute; z-index: 4; }