@font-face {
	font-family: "Nunito Sans";
	src: url("assets/fonts/nunito-sans-italic.ttf") format("truetype");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: Rubik;
	src: url("assets/fonts/rubik.ttf") format("truetype");
	font-weight: 300 900;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("assets/fonts/nunito-sans.ttf") format("truetype");
	font-weight: 200 1000;
	font-display: swap;
}

:root {
	--paper: #faf7f0;
	--ink: #232020;
	--teal: #08576d;
	--aqua: #8acedf;
	--ivory: #fbf7ee;
	--night: #142f3a;
	--mint: #dcebef;
	--muted: #62635c;
	--line: #d8d7ca;
	--rust: #ad442c;
	--scale: 1;
	color-scheme: light;
	font-synthesis: none;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: auto;
	scroll-padding-top: 92px;
	scrollbar-color: var(--teal) #deddd5;
}
body {
	margin: 0;
	background: #deddd5;
	color: var(--ink);
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	line-height: 1.45;
}
::selection {
	background: var(--teal);
	color: var(--paper);
}
a {
	color: inherit;
	text-underline-offset: 4px;
}
button,
select {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
}
button:disabled {
	cursor: default;
	opacity: 0.4;
}
:focus-visible {
	outline: 3px solid var(--rust);
	outline-offset: 4px;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,
h2,
h3,
p,
figure,
blockquote {
	margin: 0;
}
h1,
h2,
h3 {
	font-family: Rubik, sans-serif;
	font-weight: 550;
	letter-spacing: -0.035em;
	line-height: 1.08;
	text-wrap: balance;
}
h1 {
	font-size: 96px;
}
h2 {
	font-size: 56px;
}
h3 {
	font-size: 27px;
	letter-spacing: -0.02em;
}
p {
	max-width: 68ch;
}
p + p {
	margin-top: 15px;
}
em {
	font-style: normal;
}
.serif {
	font-family: "Nunito Sans", sans-serif;
	font-style: italic;
	font-weight: 450;
	font-optical-sizing: auto;
	letter-spacing: -0.025em;
}
.teal-text {
	color: var(--teal);
}
.large {
	font-size: 29px;
	line-height: 1.35;
}
.intro {
	font-size: 22px;
	line-height: 1.45;
	max-width: 62ch;
}
.small,
figcaption {
	font-size: 15px;
	line-height: 1.4;
}
.muted {
	color: var(--muted);
}
.mono,
code {
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 0.85em;
	letter-spacing: 0;
}
.nowrap {
	white-space: nowrap;
}
.rule {
	border-top: 1px solid var(--line);
	padding-top: 18px;
}
.spacer {
	flex: 1;
}
.mt {
	margin-top: 24px;
}
.mt-sm {
	margin-top: 12px;
}
.mt-lg {
	margin-top: 40px;
}
.mb {
	margin-bottom: 24px;
}
.strong {
	font-weight: 800;
}
.page-label {
	font-weight: 700;
	font-size: 16px;
}
.recommendation {
	font-size: 14px;
	color: var(--muted);
}
.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
	text-align: left;
}
.table th {
	font-size: 14px;
	font-weight: 800;
	padding: 0 12px 12px 0;
	border-bottom: 1px solid currentColor;
}
.table td {
	padding: 14px 15px 14px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.table td:last-child,
.table th:last-child {
	padding-right: 0;
}
.table.compact {
	font-size: 16px;
}
.table.compact td {
	padding-top: 10px;
	padding-bottom: 10px;
}
ul {
	margin: 16px 0 0;
	padding-left: 20px;
}
li {
	padding-left: 3px;
}
li + li {
	margin-top: 8px;
}
.reader-bar {
	height: 68px;
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--paper);
	border-bottom: 1px solid #c9c9bf;
	display: flex;
	align-items: center;
	padding: 0 30px;
	gap: 24px;
}
.reader-brand {
	display: flex;
	gap: 18px;
	align-items: center;
	text-decoration: none;
}
.reader-brand img {
	width: 135px;
}
.reader-brand span {
	font-size: 15px;
	padding-left: 18px;
	border-left: 1px solid var(--line);
}
.reader-tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.reader-tools select {
	max-width: 310px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	padding: 8px 25px 8px 8px;
	font-size: 14px;
	min-height: 44px;
}
.reader-tools button,
.presentation-nav button {
	background: none;
	border: 1px solid var(--teal);
	border-radius: 5px;
	padding: 9px 16px;
	font-size: 14px;
	min-height: 44px;
}
.reader-tools button:hover {
	background: var(--mint);
}
.reader-tools .print-button {
	background: var(--teal);
	color: var(--paper);
}
.skip {
	position: fixed;
	top: -100px;
	left: 20px;
	z-index: 100;
	padding: 12px;
	background: var(--paper);
}
.skip:focus {
	top: 10px;
}
.book {
	padding: 36px 0 48px;
}
.sheet {
	width: 1280px;
	height: 720px;
	margin: 0 auto 32px;
	position: relative;
}
.page {
	position: relative;
	width: 1280px;
	height: 720px;
	overflow: hidden;
	background: var(--paper);
	padding: 55px 64px 64px;
	display: flex;
	flex-direction: column;
	transform: scale(var(--scale));
	transform-origin: top left;
}
.page > header {
	margin-bottom: 30px;
}
.page > header .intro {
	margin-top: 16px;
}
.folio {
	position: absolute;
	bottom: 24px;
	left: 64px;
	right: 64px;
	border-top: 1px solid var(--line);
	padding-top: 11px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.folio span:last-child {
	font-variant-numeric: tabular-nums;
}
.page.dark {
	background: var(--night);
	color: var(--ivory);
}
.page.teal {
	background: var(--teal);
	color: var(--ivory);
}
.dark .folio,
.teal .folio {
	border-color: #426674;
}
.dark .muted,
.dark .recommendation,
.teal .muted,
.teal .recommendation {
	color: #bfd2d8;
}
.dark .table td,
.dark .rule {
	border-color: #426674;
}
.page.blue {
	background: var(--mint);
}
.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.cols-wide {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
}
.cols-narrow {
	display: grid;
	grid-template-columns: 0.78fr 1.4fr;
	gap: 64px;
}
.stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.aside-note {
	font-size: 16px;
	line-height: 1.5;
	max-width: 40ch;
}
.row {
	display: flex;
	align-items: center;
	gap: 20px;
}
.grow {
	flex: 1;
}
.pill {
	display: inline-block;
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
}
.status-line {
	position: absolute;
	right: 64px;
	bottom: 65px;
	font-size: 13px;
	color: var(--muted);
}
.cover {
	padding: 55px 64px;
}
.cover-logo {
	width: 316px;
}
.cover-title {
	margin-top: 66px;
	line-height: 1.04;
	font-size: 96px;
	max-width: 640px;
	color: var(--teal);
}
.cover-subtitle {
	margin-top: 28px;
	font-size: 22px;
	max-width: 410px;
}
.play-mosaic {
	position: absolute;
	right: 66px;
	top: auto;
	bottom: 55px;
	width: 430px;
	height: 430px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
}
.piece {
	position: relative;
	background: var(--teal);
	overflow: hidden;
}
.piece.paper {
	background: var(--paper);
}
.piece.aqua {
	background: var(--aqua);
}
.piece.mint {
	background: var(--mint);
}
.piece.ink {
	background: var(--ink);
}
.piece.round {
	border-radius: 50%;
}
.piece.arc {
	border-radius: 100% 0 0 0;
}
.piece.arc2 {
	border-radius: 0 0 100% 0;
}
.piece.dot:after {
	content: "";
	position: absolute;
	inset: 30%;
	background: var(--paper);
	border-radius: 50%;
}
.piece.bridge:after {
	content: "";
	position: absolute;
	width: 44%;
	height: 72%;
	background: var(--paper);
	bottom: 0;
	left: 28%;
	border-radius: 100px 100px 0 0;
}
.piece img {
	width: 100%;
	height: 100%;
}
.contents-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 58px;
	row-gap: 0;
}
.contents-list a {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	font-size: 23px;
}
.contents-list a:hover {
	color: var(--teal);
}
.contents-list a span {
	font-size: 15px;
	align-self: center;
	color: var(--muted);
}
.keyline-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.keyline-grid > div {
	padding-top: 19px;
	border-top: 1px solid currentColor;
}
.keyline-grid p {
	font-size: 18px;
	margin-top: 14px;
}
.manifesto {
	font-size: 70px;
	max-width: 1010px;
	line-height: 1.13;
}
.brand-claim {
	font-size: 82px;
	line-height: 1.09;
	max-width: 1010px;
}
.brand-claim .brand-accent {
	color: var(--aqua);
}
.logo-main {
	width: 1000px;
	margin: 45px auto 56px;
}
.logo-explanation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
}
.logo-explanation p {
	font-size: 19px;
}
.logo-field {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 38px;
	background: var(--mint);
}
.logo-field.dark-field {
	background: var(--night);
}
.logo-field img {
	width: 100%;
}
.logo-variants {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.logo-variants figcaption {
	padding-top: 12px;
}
.monogram-row {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 25px;
}
.monogram-row img {
	width: 84px;
}
.clearspace {
	height: 310px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #94a6a8;
	background: var(--mint);
}
.clearspace-inner {
	position: relative;
	padding: 44px;
	border: 1px dashed var(--teal);
	width: 900px;
}
.clearspace-inner img {
	width: 810px;
	outline: 1px solid #91b9c1;
}
.dimension-top {
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	text-align: center;
	font:
		14px "Nunito Sans",
		sans-serif;
	color: var(--teal);
}
.dimension-x {
	position: absolute;
	left: 15px;
	top: calc(50% - 10px);
	font-size: 14px;
}
.measure-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	font-size: 15px;
}
.misuse-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.misuse-grid figure {
	border-top: 1px solid var(--line);
	padding-top: 16px;
}
.misuse-grid .sample {
	height: 89px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.misuse-grid img {
	width: 245px;
}
.misuse-grid figcaption {
	margin-top: 12px;
}
.misuse-grid .stretch img {
	transform: scaleY(0.5);
}
.misuse-grid .angle img {
	transform: rotate(-14deg);
	width: 220px;
}
.misuse-grid .faded img {
	opacity: 0.22;
}
.misuse-grid .coloured img {
	filter: sepia(1) saturate(3);
}
.misuse-grid .effects img {
	filter: drop-shadow(4px 5px 3px #777);
}
.bad-lettering {
	font:
		48px Rubik,
		sans-serif;
	letter-spacing: -0.04em;
}
.min-size-samples {
	display: flex;
	gap: 64px;
	align-items: center;
	margin-bottom: 30px;
}
.family-item {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 40px;
	align-items: center;
	border-top: 1px solid var(--line);
	padding: 20px 0;
}
.family-item img {
	max-width: 230px;
	max-height: 57px;
}
.family-item p {
	font-size: 18px;
}
.family-item strong {
	font-weight: 800;
}
.naming-examples {
	font-size: 43px;
	line-height: 1.7;
	font-family: Rubik, sans-serif;
	font-weight: 500;
}
.palette-poster {
	padding: 0;
	display: grid;
	grid-template-columns: 50% 25% 25%;
	grid-template-rows: 50% 50%;
}
.palette-poster .colour-block {
	position: relative;
	padding: 38px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.palette-poster .colour-block:first-child {
	grid-row: 1 / 3;
}
.colour-block h2 {
	font-size: 64px;
}
.colour-block p {
	font-size: 17px;
	margin-top: 14px;
}
.colour-block.teal-block {
	background: var(--teal);
	color: var(--ivory);
}
.colour-block.paper-block {
	background: var(--paper);
	grid-column: 2 / 4;
}
.colour-block.ink-block {
	background: var(--ink);
	color: var(--paper);
}
.colour-block.aqua-block {
	background: var(--aqua);
	color: var(--night);
}
.palette-poster .folio {
	color: var(--paper);
	border: 0;
	left: 38px;
	right: auto;
	width: 550px;
}
.swatches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.swatch {
	padding: 0;
	border: 0;
	text-align: left;
	background: transparent;
	font: inherit;
	cursor: copy;
}
.swatch-colour {
	height: 172px;
	padding: 22px;
	display: flex;
	align-items: flex-end;
	font-family: Rubik, sans-serif;
	font-size: 26px;
}
.swatch-data {
	padding-top: 15px;
	font-size: 16px;
	line-height: 1.6;
}
.swatch-data strong {
	font-size: 21px;
}
.swatch-caption {
	margin-top: 8px;
	font-size: 15px;
}
.supporting-swatches {
	display: flex;
	gap: 0;
	margin-top: 22px;
}
.supporting-swatches > div {
	flex: 1;
	padding: 16px 14px;
	font-size: 15px;
}
.contrast-specimen {
	font-size: 41px;
	font-family: Rubik, sans-serif;
	padding: 23px 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contrast-specimen small {
	font:
		700 16px "Nunito Sans",
		sans-serif;
}
.contrast-notes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
	margin-top: 25px;
}
.type-specimen {
	height: 435px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}
.type-specimen .glyph {
	font-size: 128px;
	line-height: 1.2;
	color: var(--teal);
	margin: 18px 0 8px;
	letter-spacing: -0.04em;
}
.type-specimen p {
	font-size: 17px;
	margin-top: 12px;
}
.type-specimen .alphabet {
	font-size: 22px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.type-specimen .meta {
	margin-top: auto;
	font-size: 14px;
}
.hierarchy-demo {
	background: var(--mint);
	padding: 35px 38px;
}
.hierarchy-demo .demo-title {
	font:
		550 55px / 1.08 Rubik,
		sans-serif;
	letter-spacing: -0.035em;
	margin-bottom: 22px;
}
.hierarchy-demo .demo-body {
	font-size: 20px;
	line-height: 1.55;
}
.demo-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 25px;
	background: var(--teal);
	color: var(--paper);
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 17px;
	font-weight: 800;
}
.type-steps > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 15px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	font-size: 17px;
}
.type-steps strong {
	font:
		550 25px Rubik,
		sans-serif;
}
.type-steps p {
	font-size: 17px;
}
.typesetting-demo {
	font-size: 70px;
	line-height: 1.2;
	color: var(--teal);
	font-family: Rubik, sans-serif;
	font-weight: 500;
	letter-spacing: -0.03em;
	margin: 25px 0 32px;
}
.font-sample {
	font-size: 25px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.composition-demo {
	height: 386px;
	background: var(--mint);
	position: relative;
	padding: 34px;
	border: 1px solid #8da8ae;
}
.composition-demo .margin-line {
	position: absolute;
	inset: 25px;
	border: 1px dashed #7da3ad;
	pointer-events: none;
}
.composition-demo img {
	width: 180px;
}
.composition-demo h3 {
	font-size: 48px;
	color: var(--teal);
	max-width: 330px;
	margin-top: 43px;
}
.composition-demo .layout-orb {
	position: absolute;
	width: 135px;
	height: 135px;
	background: var(--teal);
	border-radius: 50%;
	right: 35px;
	bottom: 38px;
}
.composition-demo .measure {
	position: absolute;
	top: 4px;
	right: 40px;
	font-size: 12px;
}
#layout .cols-wide > .stack {
	justify-content: space-between;
}
.voice-title {
	font-size: 108px;
	line-height: 1.1;
	letter-spacing: -0.04em;
	max-width: 980px;
}
.voice-title .voice-accent {
	color: var(--aqua);
}
.voice-principles {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 46px;
}
.voice-principles p {
	font-size: 19px;
}
.tone-table td:first-child {
	width: 140px;
	font-weight: 800;
}
.tone-table td:nth-child(2) {
	width: 260px;
}
.word-list {
	border-top: 1px solid currentColor;
	padding-top: 17px;
}
.word-list p {
	font-size: 25px;
	line-height: 1.35;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}
.word-list .small {
	font-size: 16px;
}
.copy-caption {
	font-size: 15px;
	color: var(--muted);
	margin-top: 18px;
}
.image-panel {
	position: relative;
	overflow: hidden;
}
.image-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.image-caption {
	position: absolute;
	bottom: 16px;
	left: 18px;
	right: 18px;
	font-size: 13px;
	background: var(--paper);
	padding: 7px 10px;
	width: max-content;
	max-width: calc(100% - 36px);
}
.merch-full {
	padding: 0;
}
.merch-full > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.merch-full .merch-title {
	position: absolute;
	left: 64px;
	top: 44px;
	max-width: 530px;
	padding: 25px 30px;
	background: transparent;
}
.merch-full h2 {
	font-size: 48px;
}
.merch-full .folio {
	background: transparent;
	border-top: 0;
	margin-left: -16px;
	padding: 11px 16px 0;
	bottom: 24px;
	right: 48px;
}
.flowie-layout {
	display: grid;
	grid-template-columns: 44% 1fr;
	gap: 55px;
	height: 465px;
}
.flowie-layout figure {
	position: relative;
	background: #f0e8db;
	overflow: hidden;
}
.flowie-layout img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.flowie-list > div {
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}
.flowie-list h3 {
	font-size: 24px;
}
.flowie-list p {
	font-size: 17px;
	margin-top: 8px;
}
.icon-line {
	display: flex;
	justify-content: space-between;
	padding: 35px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-top: 24px;
}
.icon-line svg {
	width: 48px;
	height: 48px;
	stroke: var(--teal);
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.motion-track {
	display: flex;
	gap: 24px;
	align-items: center;
	margin: 30px 0;
}
.motion-dot {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--teal);
	animation: breathe 4s ease-in-out infinite;
}
.motion-track p {
	font-size: 17px;
}
.spec-ui {
	background: var(--paper);
	border: 1px solid #b8c4c4;
	overflow: hidden;
}
.spec-ui .ui-bar {
	padding: 17px 24px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	align-items: center;
}
.ui-bar img {
	width: 132px;
}
.spec-ui .ui-body {
	padding: 28px;
}
.ui-body h3 {
	font-size: 46px;
	color: var(--teal);
	max-width: 330px;
}
.ui-body p {
	font-size: 17px;
	margin-top: 18px;
	max-width: 320px;
}
.ui-body .demo-button {
	margin-top: 17px;
	font-size: 15px;
}
.mini-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 144px;
	gap: 3px;
	position: absolute;
	right: 31px;
	bottom: 45px;
}
.mini-board div {
	height: 33px;
	background: var(--mint);
	border: 1px solid var(--teal);
}
.mini-board div.on {
	background: var(--teal);
}
.email-spec {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 26px;
	min-height: 350px;
}
.email-spec img {
	width: 180px;
	margin-bottom: 27px;
}
.email-spec h3 {
	font-size: 28px;
}
.email-spec p {
	font-size: 17px;
	margin-top: 16px;
}
.social-pair {
	display: grid;
	grid-template-columns: 410px 1fr;
	gap: 55px;
}
.social-tile {
	height: 400px;
	background: var(--teal);
	color: var(--paper);
	padding: 29px;
	position: relative;
	overflow: hidden;
}
.social-tile img {
	width: 200px;
}
.social-tile h3 {
	font-size: 48px;
	margin-top: 48px;
	max-width: 325px;
}
.social-tile p {
	font-size: 15px;
	margin-top: 26px;
}
.social-tile .tile-circle {
	position: absolute;
	right: -45px;
	bottom: -70px;
	width: 210px;
	height: 210px;
	border: 36px solid var(--aqua);
	border-radius: 50%;
}
.application-note {
	margin-top: 15px;
	font-size: 14px;
	color: var(--muted);
}
.garment {
	display: grid;
	grid-template-columns: 270px 1fr;
	gap: 32px;
	align-items: center;
}
.garment img {
	width: 270px;
	height: 344px;
	object-fit: cover;
}
.garment h3 {
	margin-bottom: 16px;
}
.garment p {
	font-size: 18px;
}
.print-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
}
.print-swatch {
	height: 90px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 18px 22px;
	font-size: 21px;
	font-weight: 800;
}
.print-swatch span {
	font-size: 15px;
}
.print-pair h3 {
	margin-top: 22px;
	font-size: 28px;
}
.print-pair p {
	font-size: 18px;
	margin-top: 13px;
}
.process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 32px;
}
.process-steps > div {
	border-top: 1px solid var(--line);
	padding-top: 18px;
}
.process-steps h3 {
	font-size: 25px;
}
.process-steps p {
	font-size: 17px;
	margin-top: 14px;
}
.tag-row {
	display: flex;
	gap: 38px;
	justify-content: center;
	align-items: flex-start;
}
.tag-row figure {
	text-align: center;
	flex: 1;
	max-width: 235px;
}
.tag-row img {
	height: 324px;
	width: auto;
	max-width: 100%;
	margin: auto;
}
.tag-row figcaption {
	margin-top: 16px;
	font-size: 15px;
}
.tag-row .pair-label {
	font-weight: 800;
	font-size: 18px;
}
.tag-note {
	margin-top: 28px;
	font-size: 17px;
}
.label-study {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 65px;
}
.label-stack {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 386px;
}
.label-stack figure {
	position: relative;
}
.label-stack img {
	width: 400px;
	max-height: 133px;
	object-fit: contain;
}
.label-stack .size-label {
	width: 62px;
	max-height: 88px;
}
.label-stack figcaption {
	font-size: 14px;
	margin-top: 8px;
}
.fold-overlay {
	position: absolute;
	top: 0;
	height: 100%;
	width: 8.333%;
	background: #08576d1f;
	border: 1px dashed var(--teal);
}
.label-dim {
	font-size: 20px;
	color: var(--teal);
	font-weight: 800;
}
.care-row {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}
.care-row figure {
	flex: 1;
	text-align: center;
}
.care-row img {
	height: 355px;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
}
.care-row figcaption {
	font-size: 15px;
	margin-top: 10px;
}
.dieline-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 60px;
}
.tag-diagram {
	position: relative;
	width: 244px;
	height: 384px;
	background: var(--mint);
	margin: 10px auto 0;
	border: 1px dashed var(--rust);
	padding: 12px;
}
.tag-diagram img {
	width: 220px;
	height: 360px;
	position: relative;
	outline: 1px solid var(--teal);
}
.safe-area {
	position: absolute;
	inset: 28px;
	border: 1px dashed var(--rust);
	pointer-events: none;
}
.hole {
	position: absolute;
	top: 28px;
	left: calc(50% - 8px);
	width: 16px;
	height: 16px;
	border: 1px solid var(--rust);
	border-radius: 50%;
}
.tag-dimension {
	position: absolute;
	bottom: -29px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 14px;
}
.dieline-legend > div {
	display: grid;
	grid-template-columns: 125px 1fr;
	gap: 20px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
	font-size: 17px;
}
.dieline-legend strong {
	color: var(--teal);
}
.checklist {
	list-style: none;
	padding: 0;
}
.checklist li {
	position: relative;
	padding: 14px 0 14px 30px;
	border-top: 1px solid var(--line);
	font-size: 19px;
	margin: 0;
}
.checklist li:before {
	content: "";
	width: 12px;
	height: 12px;
	position: absolute;
	left: 0;
	top: 20px;
	border: 1px solid var(--teal);
}
.source-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 46px;
}
.source-item {
	border-top: 1px solid var(--line);
	padding-top: 12px;
}
.source-item h3 {
	font-size: 20px;
	letter-spacing: -0.015em;
}
.source-item p {
	font-size: 15px;
	line-height: 1.45;
	margin-top: 8px;
}
.source-item a {
	overflow-wrap: anywhere;
}
.asset-list a {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--line);
	padding: 15px 0;
	text-decoration: none;
	font-size: 20px;
}
.asset-list a span {
	font-size: 14px;
	align-self: center;
	color: var(--muted);
}
.close-title {
	font-size: 92px;
	line-height: 1.1;
	max-width: 1040px;
	margin-top: 40px;
}
.close-logo {
	width: 320px;
	margin-top: 55px;
}
.close-note {
	font-size: 19px;
	max-width: 620px;
	margin-top: 28px;
}
.toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--night);
	color: var(--ivory);
	padding: 12px 20px;
	border-radius: 5px;
	z-index: 40;
	font-size: 15px;
}
.toast:empty {
	display: none;
}
.presentation-nav {
	display: none;
}
.print-help {
	font-size: 14px;
	color: var(--muted);
	text-align: center;
	max-width: none;
	padding: 0 20px 30px;
}
.presentation .reader-bar {
	display: none;
}
.presentation {
	background: #000;
	overflow: hidden;
}
.presentation .book {
	padding: 0;
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.presentation .sheet {
	display: none;
	margin: 0;
}
.presentation .sheet.active {
	display: block;
}
.presentation .presentation-nav {
	display: flex;
	position: fixed;
	bottom: 12px;
	right: 20px;
	gap: 9px;
	align-items: center;
	z-index: 30;
	padding: 8px;
	background: var(--paper);
	border-radius: 6px;
	font-size: 14px;
}
.presentation-nav span {
	min-width: 58px;
	text-align: center;
}
.presentation .print-help {
	display: none;
}
.presentation-nav button {
	padding: 5px 10px;
	min-height: 34px;
}
@keyframes breathe {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(34px);
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*:before,
	*:after {
		animation: none !important;
		transition: none !important;
	}
}
@media screen and (max-width: 760px) {
	html {
		scroll-padding-top: 124px;
	}
	.reader-bar {
		height: auto;
		min-height: 108px;
		flex-wrap: wrap;
		padding: 12px 18px;
		gap: 8px;
	}
	.reader-brand img {
		width: 125px;
	}
	.reader-brand span {
		font-size: 14px;
	}
	.reader-tools {
		margin: 0;
		width: 100%;
		gap: 8px;
	}
	.reader-tools select {
		flex: 1;
		min-width: 0;
		max-width: none;
		font-size: 12px;
	}
	.reader-tools button {
		font-size: 12px;
		padding: 8px;
	}
	.book {
		padding: 16px 12px;
	}
	.sheet {
		width: 100% !important;
		height: auto !important;
		margin-bottom: 16px;
	}
	.page {
		width: 100%;
		height: auto;
		min-height: 600px;
		padding: 30px 24px 70px;
		transform: none !important;
		overflow: visible;
	}
	.page > header {
		margin-bottom: 25px;
	}
	h1 {
		font-size: 54px;
	}
	h2 {
		font-size: 38px;
	}
	h3 {
		font-size: 25px;
	}
	.large {
		font-size: 24px;
	}
	.intro {
		font-size: 19px;
	}
	.folio {
		left: 24px;
		right: 24px;
		bottom: 20px;
		font-size: 10px;
		gap: 12px;
	}
	.cover {
		min-height: 700px;
	}
	.cover-logo {
		width: 235px;
	}
	.cover-title {
		font-size: 59px;
		margin-top: 40px;
	}
	.cover-subtitle {
		font-size: 19px;
		margin-top: 22px;
	}
	.play-mosaic {
		width: 260px;
		height: 260px;
		top: auto;
		bottom: 30px;
		right: calc(50% - 130px);
		gap: 7px;
	}
	.grid2,
	.grid3,
	.cols-wide,
	.cols-narrow,
	.keyline-grid,
	.logo-explanation,
	.logo-variants,
	.print-pair,
	.dieline-layout,
	.label-study,
	.source-grid,
	.social-pair,
	.flowie-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.contents-list {
		grid-template-columns: 1fr;
	}
	.contents-list a {
		font-size: 21px;
	}
	.manifesto,
	.brand-claim {
		font-size: 40px;
	}
	.keyline-grid p {
		font-size: 18px;
	}
	.logo-main {
		margin: 35px auto;
		width: 100%;
	}
	.logo-field {
		height: 145px;
		padding: 25px;
	}
	.clearspace {
		height: 155px;
	}
	.clearspace-inner {
		width: 90%;
		padding: 16px;
	}
	.clearspace-inner img {
		width: 100%;
	}
	.dimension-top {
		font-size: 10px;
		top: -25px;
	}
	.dimension-x {
		font-size: 9px;
		left: 3px;
	}
	.measure-labels {
		font-size: 12px;
		gap: 15px;
	}
	.misuse-grid {
		grid-template-columns: 1fr 1fr;
		gap: 23px 18px;
	}
	.misuse-grid .sample {
		height: 55px;
	}
	.misuse-grid .sample img {
		width: 100%;
	}
	.bad-lettering {
		font-size: 27px;
	}
	.min-size-samples {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}
	.family-item {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	.family-item img {
		max-width: 240px;
	}
	.naming-examples {
		font-size: 31px;
	}
	.palette-poster {
		padding: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 260px 240px 190px;
	}
	.palette-poster .colour-block {
		padding: 25px;
	}
	.palette-poster .colour-block:first-child {
		grid-column: 1 / 3;
		grid-row: 1;
	}
	.palette-poster .paper-block {
		grid-column: 1 / 3;
	}
	.colour-block h2 {
		font-size: 40px;
	}
	.colour-block p {
		font-size: 14px;
	}
	.palette-poster .folio {
		display: none;
	}
	.swatches {
		grid-template-columns: 1fr 1fr;
		gap: 28px 16px;
	}
	.swatch-colour {
		height: 120px;
		font-size: 23px;
		padding: 15px;
	}
	.supporting-swatches {
		flex-wrap: wrap;
	}
	.supporting-swatches > div {
		flex: 0 0 50%;
		font-size: 14px;
	}
	.contrast-specimen {
		font-size: 25px;
		padding: 19px 17px;
		gap: 20px;
	}
	.contrast-specimen small {
		font-size: 13px;
	}
	.contrast-notes {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.table {
		font-size: 15px;
	}
	.table td {
		padding: 12px 9px 12px 0;
	}
	.table th {
		font-size: 12px;
	}
	.table.compact {
		font-size: 14px;
	}
	.type-specimen {
		height: auto;
		min-height: 385px;
	}
	.type-specimen .glyph {
		font-size: 112px;
	}
	.type-specimen .meta {
		margin-top: 22px;
	}
	.type-specimen p {
		font-size: 18px;
	}
	.hierarchy-demo {
		padding: 28px;
	}
	.hierarchy-demo .demo-title {
		font-size: 43px;
	}
	.hierarchy-demo .demo-body {
		font-size: 18px;
	}
	.typesetting-demo {
		font-size: 39px;
		overflow-wrap: anywhere;
	}
	.font-sample {
		font-size: 21px;
	}
	.composition-demo {
		height: 350px;
		padding: 28px;
	}
	.composition-demo h3 {
		font-size: 40px;
		max-width: 225px;
		margin-top: 45px;
	}
	.composition-demo .layout-orb {
		width: 95px;
		height: 95px;
		right: 27px;
		bottom: 25px;
	}
	.voice-title {
		font-size: 60px;
	}
	.voice-principles {
		grid-template-columns: 1fr;
		gap: 27px;
		margin-top: 35px;
	}
	.tone-table th:nth-child(2),
	.tone-table td:nth-child(2) {
		display: none;
	}
	.tone-table td:first-child {
		width: 90px;
	}
	.word-list p {
		font-size: 22px;
	}
	.image-panel {
		height: 330px !important;
	}
	.flowie-layout {
		height: auto;
	}
	.flowie-layout figure {
		height: 360px;
	}
	.icon-line svg {
		width: 36px;
		height: 36px;
	}
	.spec-ui .ui-body {
		padding: 22px;
	}
	.ui-body h3 {
		font-size: 36px;
	}
	.mini-board {
		display: none;
	}
	.social-tile {
		height: 370px;
	}
	.social-tile h3 {
		font-size: 43px;
	}
	.merch-full {
		padding: 0;
		min-height: 710px;
		background: var(--paper);
	}
	.merch-full > img {
		height: 430px;
		object-fit: cover;
		margin-top: 200px;
	}
	.merch-full .merch-title {
		left: 24px;
		right: 24px;
		top: 28px;
		padding: 0;
	}
	.merch-full h2 {
		font-size: 38px;
	}
	.merch-full .folio {
		margin: 0;
		right: 24px;
		padding: 10px 0 0;
	}
	.garment {
		grid-template-columns: 1fr;
	}
	.garment img {
		width: 100%;
		height: 340px;
		object-fit: contain;
		background: #f0e8db;
	}
	.process-steps {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}
	.process-steps h3 {
		font-size: 24px;
	}
	.tag-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 27px 18px;
	}
	.tag-row img {
		height: auto;
		width: 100%;
	}
	.tag-row figcaption {
		font-size: 13px;
	}
	.tag-row .pair-label {
		font-size: 15px;
	}
	.label-stack {
		height: auto;
		gap: 35px;
	}
	.label-stack img {
		max-height: none;
		width: 100%;
	}
	.label-stack .size-label {
		width: 62px;
	}
	.care-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px 15px;
	}
	.care-row img {
		width: 100%;
		height: auto;
	}
	.care-row figcaption {
		font-size: 13px;
	}
	.tag-diagram {
		margin-bottom: 30px;
	}
	.dieline-legend > div {
		grid-template-columns: 90px 1fr;
		font-size: 16px;
	}
	.checklist li {
		font-size: 17px;
	}
	.source-item p {
		font-size: 16px;
	}
	.source-item h3 {
		font-size: 22px;
	}
	.close-title {
		font-size: 51px;
	}
	.close-logo {
		width: 250px;
		margin-top: 45px;
	}
	.close-note {
		font-size: 18px;
	}
	.asset-list a {
		font-size: 18px;
		gap: 15px;
	}
	.status-line {
		position: static;
		margin-top: 20px;
	}
	.presentation .page {
		width: 1280px;
		height: 720px;
		transform: scale(var(--scale)) !important;
		overflow: hidden;
	}
	.presentation .sheet {
		width: calc(1280px * var(--scale)) !important;
		height: calc(720px * var(--scale)) !important;
	}
	.reader-tools #present {
		display: none;
	}
}
@media print {
	@page {
		size: 13.333333in 7.5in;
		margin: 0;
	}
	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
		background: var(--paper);
		width: 1280px;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	html {
		scroll-behavior: auto;
	}
	.reader-bar,
	.presentation-nav,
	.toast,
	.print-help,
	.skip {
		display: none !important;
	}
	.book,
	.presentation .book {
		display: block !important;
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.sheet,
	.presentation .sheet {
		display: block !important;
		width: 1280px !important;
		height: 720px !important;
		margin: 0 !important;
		break-after: page;
		page-break-after: always;
		break-inside: avoid;
	}
	.sheet:last-child {
		break-after: auto;
		page-break-after: auto;
	}
	.page,
	.presentation .page {
		transform: none !important;
		width: 1280px !important;
		height: 720px !important;
		overflow: hidden !important;
	}
	.swatch {
		cursor: default;
	}
	a {
		text-decoration: none;
	}
	.motion-dot {
		animation: none !important;
	}
	.presentation {
		overflow: visible !important;
	}
	.page * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}
/* Page-fit refinements: preserve reading size and use the width of the spread. */
.page > header {
	margin-bottom: 24px;
}
.page > header .intro {
	max-width: none;
	font-size: 21px;
}
.page > p.small,
.page > p.recommendation,
.page > p.tag-note,
.page > .rule > p.small,
.page > .rule > p.intro {
	max-width: none;
}
.word-list p {
	margin: 0;
}
.logo-main {
	margin: 20px auto 34px;
}
.clearspace {
	height: 280px;
	flex-shrink: 0;
}
.swatch-colour {
	height: 145px;
}
.hierarchy-demo {
	padding: 30px 34px;
}
.type-steps > div {
	padding: 13px 0;
}
.tone-table td {
	padding-top: 10px;
	padding-bottom: 10px;
}
.tag-row img {
	height: 300px;
}
.tag-note {
	margin-top: 18px;
}
.care-row img {
	height: 310px;
}
.flowie-layout {
	height: 430px;
}
.flowie-list > div {
	padding: 12px 0;
}
.family-item {
	padding: 16px 0;
}
.family-item p {
	font-size: 17px;
}
#names .stack {
	gap: 12px;
}
#names .stack p {
	font-size: 17px;
}
#names .mt-lg {
	margin-top: 24px;
}
#tag-geometry > .page > p.mt-lg,
#supplier-check .mt-lg {
	margin-top: 24px;
}
#partners .logo-field > img {
	width: 520px;
	max-width: 53%;
	flex-shrink: 1;
}
#partners .logo-field > p {
	font-size: 32px !important;
}
#quick-reference .grid2 > div > div {
	max-width: 100%;
}
.page > p.recommendation {
	line-height: 1.35;
}
.page > p.small {
	line-height: 1.4;
}
@media screen and (max-width: 760px) {
	.page > header .intro {
		font-size: 19px;
	}
	.logo-main {
		margin: 35px auto;
	}
	.clearspace {
		height: 155px;
	}
	.swatch-colour {
		height: 120px;
	}
	.tag-row img,
	.care-row img {
		height: auto;
	}
	.flowie-layout {
		height: auto;
	}
	.family-item p {
		font-size: 18px;
	}
	.flowie-list p {
		font-size: 18px;
	}
	#partners .logo-field {
		height: auto !important;
		min-height: 205px;
		flex-direction: column;
		gap: 23px !important;
		padding: 25px !important;
	}
	#partners .logo-field > img {
		width: 250px;
		max-width: 100%;
	}
	#partners .logo-field > div {
		display: none;
	}
	#partners .logo-field > p {
		font-size: 24px !important;
	}
	.tone-table td {
		padding-top: 14px;
		padding-bottom: 14px;
	}
}
/* Independent finish-review corrections. */
.reader-tools .print-button:hover {
	background: var(--night);
	color: var(--paper);
}
#care-labels .care-row img {
	height: 290px;
}
#supplier-check .checklist li {
	padding-top: 11px;
	padding-bottom: 11px;
}
.tag-diagram {
	width: 229px;
	height: 360px;
	padding: 11.25px;
}
.tag-diagram img {
	width: 206.25px;
	height: 337.5px;
}
.safe-area {
	inset: 26px;
}
.hole {
	top: 26.25px;
	width: 15px;
	height: 15px;
	left: calc(50% - 7.5px);
}
.tag-dimension {
	position: static;
	display: block;
	width: 320px;
	max-width: 100%;
	margin: 12px auto 0;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}
#quick-reference .grid2 > div {
	min-width: 0;
}
#quick-reference .grid2 > div > div {
	width: 100%;
	max-width: 430px;
}
@media screen and (max-width: 760px) {
	.folio {
		font-size: 12px;
		line-height: 1.35;
	}
	.folio span:first-child {
		max-width: 85%;
	}
	#care-labels .care-row img {
		height: auto;
	}
	#tone .tone-table thead {
		display: none;
	}
	#tone .tone-table tr {
		display: grid;
		grid-template-columns: 85px minmax(0, 1fr);
		gap: 5px 14px;
		padding: 17px 0;
		border-top: 1px solid var(--line);
	}
	#tone .tone-table td {
		display: block;
		width: auto !important;
		border: 0;
		padding: 0;
		font-size: 16px;
	}
	#tone .tone-table td:first-child {
		grid-row: 1 / 3;
		font-size: 17px;
	}
	#tone .tone-table td:nth-child(2) {
		font-weight: 700;
		color: var(--teal);
		font-size: 14px;
	}
	#tone .tone-table td:last-child {
		grid-column: 2;
	}
	.tag-diagram {
		margin-bottom: 0;
	}
	.tag-dimension {
		margin-top: 14px;
		margin-bottom: 18px;
	}
	#quick-reference .grid2 > div > div {
		max-width: 100%;
	}
}

/* Founder statement: offset quotation with a genuine italic font. */
.founder-quote {
	margin: 64px 0 0;
	max-width: 520px;
}
.founder-quote blockquote {
	font-family: "Nunito Sans", sans-serif;
	font-size: 23px;
	font-weight: 400;
	font-style: italic;
	font-synthesis: none;
	line-height: 1.5;
}
.founder-quote figcaption {
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #bfd2d8;
}
@media screen and (max-width: 760px) {
	.founder-quote {
		margin-top: 16px;
	}
	.founder-quote blockquote {
		font-size: 21px;
	}
	#idea .spacer {
		min-height: 28px;
	}
}

/* Four principles, expressed through the cover's geometric language. */
#principles .principles-page {
	display: grid;
	grid-template-columns: 420px 1fr;
	padding: 0;
}
#principles .principles-intro {
	background: var(--teal);
	color: var(--paper);
	padding: 52px 45px 70px;
}
#principles .principles-intro h2 {
	font-size: 50px;
	line-height: 1.08;
	letter-spacing: -0.035em;
}
#principles .principles-intro h2 span {
	color: var(--aqua);
}
#principles .principles-intro > p {
	font-size: 20px;
	line-height: 1.4;
	margin-top: 22px;
	max-width: 30ch;
}
#principles .principles-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	width: 264px;
	margin: 39px auto 0;
}
#principles .principle-symbol {
	display: block;
	width: 100%;
	aspect-ratio: 1;
}
#principles .principles-list {
	padding: 54px 52px 84px 42px;
	display: flex;
	flex-direction: column;
	gap: 29px;
}
#principles .principle-row {
	display: grid;
	grid-template-columns: 32px 1fr;
	column-gap: 17px;
	align-items: start;
}
#principles .principle-row > .principle-symbol {
	width: 32px;
	height: 32px;
	margin-top: 1px;
	background: var(--teal);
}
#principles .principle-row h3 {
	font-size: 27px;
	line-height: 1.1;
	color: var(--teal);
}
#principles .principle-line {
	font-size: 20px;
	line-height: 1.35;
	margin-top: 7px;
	font-weight: 600;
}
#principles .principle-detail {
	font-size: 16px;
	line-height: 1.4;
	margin-top: 8px;
	color: var(--ink);
}
#principles .folio {
	border: 0;
	left: 45px;
	right: 52px;
	color: var(--teal);
}
#principles .folio span:first-child {
	color: var(--paper);
}
@media screen and (max-width: 760px) {
	#principles .principles-page {
		display: block;
	}
	#principles .principles-intro {
		padding: 32px 24px 28px;
	}
	#principles .principles-intro h2 {
		font-size: 38px;
	}
	#principles .principles-intro > p {
		font-size: 19px;
		max-width: none;
		margin-top: 18px;
	}
	#principles .principles-mosaic {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		width: 100%;
		margin-top: 28px;
	}
	#principles .principles-list {
		padding: 32px 24px 84px;
		gap: 32px;
	}
	#principles .principle-row {
		grid-template-columns: 26px 1fr;
		gap: 12px;
	}
	#principles .principle-row > .principle-symbol {
		width: 26px;
		height: 26px;
	}
	#principles .principle-row h3 {
		font-size: 23px;
	}
	#principles .principle-line {
		font-size: 19px;
	}
	#principles .principle-detail {
		font-size: 16px;
	}
	#principles .folio {
		left: 24px;
		right: 24px;
	}
	#principles .folio span:first-child {
		color: var(--teal);
	}
}

/* Caption bounds share the current master SVG's visible word geometry. */
#logo .wordmark-study {
	width: 1000px;
	max-width: 100%;
	margin: 20px auto 0;
}
#logo .wordmark-study .logo-main {
	width: 100%;
	margin: 0 0 34px;
}
#logo .logo-explanation {
	grid-template-columns: 1.098901099% 47.142857143% .659340659% 43.956043956% 1fr;
	column-gap: 0;
}
#logo .logo-explanation > .rule:first-child {
	grid-column: 2;
}
#logo .logo-explanation > .rule:last-child {
	grid-column: 4;
}
#logo .logo-explanation > .rule:first-child p {
	padding-right: 24px;
}
#logo .logo-explanation > .rule:first-child h3 {
	color: var(--teal);
}
@media screen and (max-width: 760px) {
	#logo .wordmark-study {
		margin: 24px auto 0;
	}
	#logo .wordmark-study .logo-main {
		margin-bottom: 28px;
	}
	#logo .logo-explanation {
		display: block;
	}
	#logo .logo-explanation > .rule + .rule {
		margin-top: 28px;
	}
	#logo .logo-explanation > .rule:first-child p {
		padding-right: 0;
	}
}

#logo .logo-use-note {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 65px;
	margin: 0;
}
@media screen and (max-width: 760px) {
	#logo .logo-use-note {
		position: static;
		margin-top: 36px;
	}
}

#logo-variants .identity-note {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 65px;
	margin: 0;
}
@media screen and (max-width: 760px) {
	#logo-variants .identity-note {
		position: static;
		margin-top: 36px;
	}
}

/* Exact vector construction, with clear space measured beyond the SVG canvas. */
#logo-space .construction-page > header {
	margin-bottom: 8px;
}
#logo-space .construction-diagram {
	display: block;
	width: 100%;
	height: 292px;
	flex-shrink: 0;
	overflow: visible;
}
#logo-space .construction-specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	margin-top: 18px;
}
#logo-space .construction-specs > div {
	border-top: 1px solid var(--line);
	padding-top: 15px;
}
#logo-space .construction-specs h3 {
	font-size: 21px;
	line-height: 1.15;
	color: var(--teal);
}
#logo-space .construction-specs p {
	font-size: 16px;
	line-height: 1.4;
	margin-top: 10px;
}
#logo-space .construction-specs .construction-value {
	font-size: 18px;
	font-weight: 800;
	margin-top: 9px;
	font-variant-numeric: tabular-nums;
}
#logo-space .construction-note {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 65px;
	font-size: 13px;
	line-height: 1.4;
	max-width: none;
	color: var(--muted);
}
@media screen and (max-width: 760px) {
	#logo-space .construction-page > header {
		margin-bottom: 22px;
	}
	#logo-space .construction-diagram {
		height: auto;
	}
	#logo-space .construction-specs {
		grid-template-columns: 1fr;
		gap: 25px;
		margin-top: 28px;
	}
	#logo-space .construction-specs h3 {
		font-size: 24px;
	}
	#logo-space .construction-specs p {
		font-size: 18px;
	}
	#logo-space .construction-specs .construction-value {
		font-size: 20px;
	}
	#logo-space .construction-note {
		position: static;
		margin-top: 35px;
		font-size: 14px;
	}
}

/* Icon kit: matched specimens, compact download details and bottom-aligned note. */
#logo-size .min-size-samples {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	gap: 44px;
	align-items: end;
	margin-bottom: 18px;
}
#logo-size .favicon-pair {
	display: flex;
	gap: 20px;
	align-items: center;
}
#logo-size .favicon-pair img {
	width: 48px;
	height: 48px;
}
#logo-size .min-size-samples figcaption {
	font-size: 14px;
}
#logo-size .grid2 {
	gap: 48px;
}
#logo-size .grid2 p {
	font-size: 18px;
	line-height: 1.45;
}
#logo-size .favicon-kit-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--line);
	margin-top: 28px;
	padding-top: 18px;
}
#logo-size .favicon-kit-strip h3 {
	font-size: 23px;
	color: var(--teal);
}
#logo-size .favicon-kit-strip p {
	font-size: 15px;
	line-height: 1.4;
	margin-top: 7px;
	max-width: none;
}
#logo-size .favicon-kit-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
	font-size: 16px;
	color: var(--teal);
}
#logo-size .favicon-kit-links a:first-child {
	font-weight: 800;
}
#logo-size .size-comparison-note {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 65px;
	margin: 0;
}
@media screen and (max-width: 760px) {
	#logo-size .min-size-samples {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 12px;
	}
	#logo-size .min-size-samples figcaption {
		font-size: 16px;
	}
	#logo-size .grid2 {
		gap: 28px;
	}
	#logo-size .favicon-kit-strip {
		display: block;
		margin-top: 28px;
	}
	#logo-size .favicon-kit-strip p {
		font-size: 17px;
	}
	#logo-size .favicon-kit-links {
		margin-top: 20px;
		font-size: 18px;
		gap: 14px;
	}
	#logo-size .size-comparison-note {
		position: static;
		margin-top: 36px;
	}
}

/* Page-wide closing notes share the accepted 12px clearance above the folio. */
.page > .page-note {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 65px;
	margin: 0;
	max-width: none;
}
@media screen and (max-width: 760px) {
	.page > .page-note {
		position: static;
		margin-top: 36px;
	}
}

.page > .page-note.contrast-notes > p {
	margin: 0;
}
@media screen and (max-width: 760px) {
	#sources > .page,
	#research > .page,
	#production-sources > .page {
		padding-bottom: 86px;
	}
}

/* Explicit wrong-use markers supplement each written prohibition. */
#logo-care .misuse-grid figcaption {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
}
#logo-care .misuse-cross {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #b42318;
	stroke-width: 2.6;
	stroke-linecap: round;
	margin-top: 1px;
}
@media screen and (max-width: 760px) {
	#logo-care .misuse-grid figcaption {
		grid-template-columns: 18px minmax(0, 1fr);
		column-gap: 8px;
	}
	#logo-care .misuse-cross {
		width: 18px;
		height: 18px;
		margin-top: 2px;
	}
}

/* Names in prose: distinguish typed references from supplied logo artwork. */
#names .naming-prose {
	padding-top: 10px;
}
#names .prose-example {
	font-family: "Nunito Sans", sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.4;
	max-width: none;
}
#names .prose-example strong {
	font-weight: 800;
	color: var(--teal);
	white-space: nowrap;
}
#names .prose-example + .prose-example {
	margin-top: 25px;
}
#names .naming-prose figcaption {
	margin-top: 26px;
	max-width: 49ch;
	font-size: 15px;
	line-height: 1.4;
}
#names .naming-rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#names .naming-rules li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 16px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}
#names .naming-number {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--teal);
	color: var(--ivory);
	font:
		500 20px / 1 Rubik,
		sans-serif;
}
#names .naming-rules h3 {
	font-size: 25px;
	line-height: 1.15;
	padding-top: 3px;
}
#names .naming-rules p {
	font-size: 17px;
	line-height: 1.4;
	margin-top: 8px;
}
@media screen and (max-width: 760px) {
	#names .naming-layout {
		gap: 32px;
	}
	#names .naming-prose {
		padding-top: 0;
	}
	#names .prose-example {
		font-size: 21px;
	}
	#names .prose-example + .prose-example {
		margin-top: 24px;
	}
	#names .naming-prose figcaption {
		margin-top: 24px;
	}
	#names .naming-rules li {
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 12px;
	}
	#names .naming-number {
		width: 30px;
		height: 30px;
		font-size: 17px;
	}
	#names .naming-rules h3 {
		font-size: 23px;
		padding-top: 2px;
	}
	#names .naming-rules p {
		font-size: 18px;
	}
}

/* Supporting palette phrases approved during the colour-spread review. */
#colour .ink-block h3,
#colour .aqua-block h3 {
	font-size: 40px;
	line-height: 1.08;
}
#colour .ink-block p,
#colour .aqua-block p {
	font-size: 15px;
}
@media screen and (max-width: 760px) {
	#colour .ink-block h3,
	#colour .aqua-block h3 {
		font-size: 24px;
	}
	#colour .ink-block p,
	#colour .aqua-block p {
		font-size: 14px;
	}
}

/* Full-palette print reference and publication details. */
#pantone .pantone-table {
	width: 100%;
	font-size: 18px;
	table-layout: fixed;
	border-collapse: collapse;
}
#pantone .pantone-table thead th {
	font-size: 14px;
	padding: 0 12px 12px 0;
}
#pantone .pantone-table thead th:nth-child(1) {
	width: 28%;
}
#pantone .pantone-table thead th:nth-child(2) {
	width: 19%;
}
#pantone .pantone-table thead th:nth-child(3) {
	width: 24%;
}
#pantone .pantone-table thead th:nth-child(4) {
	width: 29%;
}
#pantone .pantone-table tbody th,
#pantone .pantone-table tbody td {
	padding: 11px 12px 11px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	font-size: 18px;
	line-height: 1.25;
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
}
#pantone .pantone-table tbody th {
	font-weight: 800;
}
#pantone .pantone-table .mono {
	font-size: 16px;
}
#pantone .pantone-target {
	display: inline-block;
	width: 30px;
	height: 23px;
	vertical-align: middle;
	margin-right: 13px;
	border: 1px solid var(--line);
}
#pantone .pantone-table a {
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
@media screen and (max-width: 760px) {
	#contents > .page {
		padding-bottom: 110px;
	}
	#pantone .pantone-table,
	#pantone .pantone-table tbody {
		display: block;
	}
	#pantone .pantone-table thead {
		display: none;
	}
	#pantone .pantone-table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 12px;
		padding: 16px 0;
		border-top: 1px solid var(--line);
	}
	#pantone .pantone-table tbody th,
	#pantone .pantone-table tbody td {
		display: block;
		padding: 0;
		border: 0;
		font-size: 17px;
	}
	#pantone .pantone-table tbody th {
		grid-column: 1 / 3;
		margin-bottom: 10px;
		font-size: 20px;
	}
	#pantone .pantone-table tbody td:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
		font-size: 13px;
		align-self: center;
	}
	#pantone .pantone-table tbody td:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
	}
	#pantone .pantone-table tbody td:nth-child(4) {
		grid-column: 1 / 3;
		margin-top: 6px;
		font-size: 14px;
		color: var(--muted);
	}
	#pantone .pantone-target {
		width: 24px;
		height: 20px;
		margin-right: 10px;
	}
}

/* Voice review: give the tone table a brand-colour heading. */
#tone h2 {
	color: var(--teal);
}

/* Page22: literal ivory invitations, kept whole or torn and left behind. */
#writing .invitation-page {
	background: var(--mint);
}
#writing h2,
#writing .invitation-keep > h3 {
	color: var(--teal);
}
#writing .page > header {
	margin-bottom: 28px;
}
#writing .invitation-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}
#writing .invitation-layout h3 {
	font-size: 24px;
	letter-spacing: -0.02em;
	margin-bottom: 23px;
}
#writing .invitation-cards,
#writing .discarded-cards {
	list-style: none;
	padding: 0;
	margin: 0;
}
#writing .invitation-cards,
#writing .discarded-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 116px;
	gap: 14px;
}
#writing .invitation-card {
	margin: 0;
	padding: 12px 20px;
	text-align: center;
	background: var(--ivory);
	color: var(--teal);
	border-radius: 2px;
	box-shadow: 0 3px 9px #142f3a14;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#writing .invitation-card:nth-child(1) {
	transform: translate(-2px, 1px) rotate(-4deg);
}
#writing .invitation-card:nth-child(2) {
	transform: translate(-12px, 5px) rotate(3deg);
}
#writing .invitation-card:nth-child(3) {
	transform: translate(8px, -2px) rotate(2.5deg);
}
#writing .invitation-card:nth-child(4) {
	transform: translate(-1px, 6px) rotate(-3.5deg);
}
#writing .invitation-card:nth-child(5) {
	transform: translate(5px, -7px) rotate(-2deg);
}
#writing .invitation-phrase {
	font:
		500 22px / 1.16 Rubik,
		sans-serif;
	letter-spacing: -0.02em;
	max-width: none;
	text-wrap: balance;
}
#writing .invitation-condition {
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--muted);
	margin-top: 6px;
	max-width: none;
}
#writing .invitation-cards > li:last-child,
#writing .discarded-cards > li:last-child {
	grid-column: 1 / 3;
	justify-self: center;
	width: calc((100% - 14px) / 2);
}
#writing .discarded-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin: 0;
	padding: 0;
	height: 116px;
}
#writing .torn-piece {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 116px;
	padding: 12px 10px;
	background: var(--ivory);
	color: var(--muted);
	font-size: 18px;
	line-height: 1.2;
	font-weight: 650;
	text-align: center;
}
#writing .torn-start {
	clip-path: polygon(0 0, 100% 0, 97.5% 13%, 100% 26%, 96.7% 39%, 99% 52%, 97% 66%, 100% 82%, 98% 100%, 0 100%);
	transform: translate(-3px, var(--tear-start-y, 0px)) rotate(var(--tear-start-angle, -6deg));
}
#writing .torn-end {
	clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%, 2% 82%, 0 67%, 3% 52%, 1% 38%, 3.3% 24%, 0 12%);
	transform: translate(3px, var(--tear-end-y, 4px)) rotate(var(--tear-end-angle, 4deg));
}
#writing .discarded-card:nth-child(2) {
	--tear-start-angle: 3deg;
	--tear-end-angle: -5deg;
	--tear-start-y: -3px;
	--tear-end-y: 3px;
}
#writing .discarded-card:nth-child(3) {
	--tear-start-angle: -3.5deg;
	--tear-end-angle: 6deg;
	--tear-start-y: 3px;
	--tear-end-y: 0px;
}
#writing .discarded-card:nth-child(4) {
	--tear-start-angle: 5deg;
	--tear-end-angle: -4deg;
	--tear-start-y: -2px;
	--tear-end-y: 4px;
}
#writing .discarded-card:nth-child(5) {
	--tear-start-angle: -4.5deg;
	--tear-end-angle: 3.5deg;
	--tear-start-y: 0px;
	--tear-end-y: -2px;
}
#writing .discard-note {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--muted);
}
#writing .folio {
	border-color: #afc7cf;
}
@media screen and (max-width: 760px) {
	#writing .page > header {
		margin-bottom: 32px;
	}
	#writing .invitation-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	#writing .invitation-layout h3 {
		font-size: 25px;
		margin-bottom: 20px;
	}
	#writing .invitation-cards,
	#writing .discarded-cards {
		grid-template-columns: 1fr;
		grid-auto-rows: 116px;
		gap: 22px;
	}
	#writing .invitation-card {
		height: 116px;
		padding: 16px 22px;
	}
	#writing .invitation-phrase {
		font-size: 22px;
		text-wrap: pretty;
	}
	#writing .invitation-condition {
		font-size: 14px;
		max-width: none;
	}
	#writing .invitation-cards > li:last-child,
	#writing .discarded-cards > li:last-child {
		grid-column: auto;
		width: 100%;
	}
	#writing .discarded-card {
		gap: 8px;
	}
	#writing .torn-piece {
		font-size: 19px;
		height: 116px;
		padding: 12px 9px;
	}
	#writing .discard-note {
		font-size: 15px;
		margin-top: 22px;
	}
}

/* Page23: faithful board details from the supplied native gameplay captures. */
#imagery .game-imagery-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-self: start;
}
#imagery .game-detail {
	display: block;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--ivory);
	border: 1px solid var(--line);
}
#imagery .game-detail img {
	position: absolute;
	width: 106.884682%;
	max-width: none;
	height: auto;
	left: -3.442341%;
	top: 0;
	transform: translateY(var(--crop-y));
}
#imagery .game-detail-sudoku {
	--crop-y: -17.485119%;
}
#imagery .game-detail-orderly {
	--crop-y: -22.693452%;
}
#imagery .game-imagery-pair figcaption {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.4;
}
#imagery .game-imagery-pair figcaption strong {
	display: block;
	font-weight: 800;
}
#imagery .game-imagery-pair figcaption span {
	display: block;
	color: var(--muted);
	margin-top: 3px;
}
#imagery .cols-wide > .stack {
	justify-content: space-between;
}
@media screen and (max-width: 760px) {
	#imagery .game-imagery-pair {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	#imagery .game-imagery-pair figcaption {
		margin-top: 10px;
		font-size: 16px;
	}
}

/* Current edition withholds mascot material. */
#icons-motion h2 {
	color: var(--teal);
}
#care-labels .care-row {
	justify-content: center;
	gap: 90px;
}
#care-labels .care-row figure {
	flex: 0 1 235px;
}
@media screen and (max-width: 760px) {
	#care-labels .care-row {
		gap: 30px 15px;
	}
}

/* Print expression: a material and composition example, followed by brand guidance. */
#print-handoff h2 {
	color: var(--teal);
}
.print-character {
	display: grid;
	grid-template-columns: 550px 1fr;
	gap: 64px;
}
.print-stage {
	position: relative;
	height: 365px;
	background: var(--mint);
	overflow: hidden;
}
.print-note {
	position: absolute;
	display: flex;
	flex-direction: column;
	padding: 26px;
	box-shadow: 0 9px 20px #142f3a24;
}
.print-note img {
	width: 155px;
}
.print-note p {
	font:
		550 39px / 1.08 Rubik,
		sans-serif;
	letter-spacing: -0.03em;
	margin-top: 24px;
}
.print-note span {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
}
.print-note-teal {
	width: 226px;
	height: 304px;
	top: 26px;
	right: 32px;
	transform: rotate(6deg);
	background: var(--teal);
	color: var(--ivory);
}
.print-note-teal {
	overflow: hidden;
}
.print-ring {
	position: absolute;
	width: 144px;
	height: 144px;
	border: 24px solid var(--aqua);
	border-radius: 50%;
	right: -38px;
	bottom: -35px;
}
.print-note-paper {
	width: 320px;
	height: 232px;
	left: 27px;
	top: 103px;
	transform: rotate(-5deg);
	background: var(--paper);
	color: var(--teal);
}
.print-character-rules {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px 0 0;
}
.print-character-rules p {
	margin-top: 12px;
	font-size: 19px;
	line-height: 1.45;
}
@media screen and (max-width: 760px) {
	.print-character {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.print-stage {
		height: 410px;
	}
	.print-note-teal {
		width: 204px;
		height: 278px;
		top: 25px;
		right: 25px;
	}
	.print-note-paper {
		width: 265px;
		height: 217px;
		left: 23px;
		top: 165px;
		padding: 24px;
	}
	.print-note-paper p {
		font-size: 34px;
	}
	.print-character-rules {
		gap: 28px;
	}
	.print-character-rules p {
		font-size: 18px;
	}
}

/* A presentation shadow defines the tag edges without altering the artwork. */
#hangtags .tag-row img {
	box-shadow: 0 5px 14px #142f3a26;
}

/* Attachment orientation is a guide annotation, separate from the printable tag face. */
#hangtags .tag-clothing-end {
	font-size: 14px;
	line-height: 18px;
	color: var(--teal);
	font-weight: 700;
	margin-bottom: 20px;
}
#hangtags .hangtag-face {
	position: relative;
	width: 160.111111px;
	max-width: 100%;
	margin: 0 auto;
}
#hangtags .hangtag-face img {
	width: 100%;
	height: auto;
}
#hangtags .tag-attachment {
	position: absolute;
	left: 0;
	top: -6.666667%;
	width: 100%;
	height: 106.666667%;
	pointer-events: none;
}

@media screen and (max-width: 760px) {
	#hangtags .tag-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#hangtags .tag-row figure {
		min-width: 0;
		max-width: 100%;
	}
}

/* Sewn label boundaries and attachment annotations. */
#sewn-labels .label-stack {
	height: auto;
	justify-content: flex-start;
	gap: 32px;
}
#sewn-labels .sewn-attachment-title {
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: var(--teal);
	margin-bottom: 12px;
}
#sewn-labels .sewn-face {
	position: relative;
	max-width: 100%;
	box-shadow: 0 5px 14px #142f3a26;
}
#sewn-labels .neck-face {
	width: 400px;
}
#sewn-labels .size-face {
	width: 84px;
	flex-shrink: 0;
}
#sewn-labels .sewn-face img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}
#sewn-labels .sewn-construction {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#sewn-labels .size-attachment-example {
	display: flex;
	gap: 26px;
	align-items: flex-start;
}
#sewn-labels .size-attachment-note {
	font-size: 14px;
	line-height: 1.4;
	color: var(--teal);
	position: relative;
	padding-top: 5px;
}
#sewn-labels .size-attachment-note:before {
	content: "";
	position: absolute;
	width: 18px;
	left: -26px;
	top: 15px;
	border-top: 1px solid var(--teal);
}
#sewn-labels .size-attachment-note strong,
#sewn-labels .size-attachment-note span {
	display: block;
}
#sewn-labels .size-attachment-note span {
	font-size: 14px;
	margin-top: 4px;
}
@media screen and (max-width: 760px) {
	#sewn-labels .size-attachment-example {
		gap: 20px;
	}
	#sewn-labels .size-attachment-note:before {
		width: 12px;
		left: -20px;
	}
}

/* Care labels use the same material and seam annotation treatment. */
#sewn-labels .label-study {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
#sewn-labels .label-stack,
#sewn-labels .label-stack figure {
	min-width: 0;
}
#care-labels .care-attachment-title {
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: var(--teal);
	margin-bottom: 12px;
}
#care-labels .care-face {
	position: relative;
	width: 100px;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0 5px 14px #142f3a26;
}
#care-labels .care-face img {
	display: block;
	width: 100%;
	height: auto;
}
#care-labels .care-construction {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
@media screen and (max-width: 760px) {
	#sewn-labels .label-study {
		grid-template-columns: minmax(0, 1fr);
	}
	#care-labels .care-face {
		width: 100%;
	}
}

#close .close-accent {
	font: inherit;
	color: var(--aqua);
}

/* The quick-reference specimens demonstrate the hierarchy they describe. */
#quick-reference .quick-type {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}
#quick-reference .quick-type p {
	margin: 0;
	max-width: none;
}
#quick-reference .quick-type-headline {
	font:
		550 34px / 1.2 Rubik,
		sans-serif;
	letter-spacing: -0.025em;
}
#quick-reference .quick-type-reading {
	font:
		400 22px / 1.5 "Nunito Sans",
		sans-serif;
}
#quick-reference .quick-type-story {
	font:
		italic 450 19px / 1.4 "Nunito Sans",
		sans-serif;
	letter-spacing: -0.015em;
}
@media screen and (max-width: 760px) {
	#quick-reference .quick-type-headline {
		font-size: 28px;
	}
	#quick-reference .quick-type-reading {
		font-size: 21px;
	}
	#quick-reference .quick-type-story {
		font-size: 18px;
	}
}
/* Edition 1.1: the same visual language, with reusable applications. */
.kit-link {
	font-size: 14px;
	white-space: nowrap;
}
.story-italic {
	font-family: "Nunito Sans", sans-serif;
	font-style: italic;
	font-weight: 450;
}
#quick-reference .quick-type-story {
	font:
		italic 450 19px / 1.4 "Nunito Sans",
		sans-serif;
	letter-spacing: 0;
}
#type .type-specimen h3 {
	font-size: 22px;
	letter-spacing: -0.025em;
}
#type .type-specimen .alphabet {
	font-size: 25px;
	min-height: 94px;
}
#type-craft .grid3 {
	gap: 28px;
}
#type-craft .grid3 p {
	font-size: 18px;
}
#logo-variants .logo-field {
	height: 160px;
}
.mono-variants {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 22px;
}
.mono-variants figure > img,
.mono-light {
	width: 100%;
	height: 82px;
	padding: 18px 40px;
	object-fit: contain;
}
.mono-light {
	background: var(--night);
}
.mono-light img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.mono-variants figcaption {
	margin-top: 8px;
}
#logo-variants .monogram-row {
	margin-top: 26px;
}
#logo-variants .monogram-row > img {
	width: 56px;
	height: 56px;
}
#logo-variants .monogram-row h3 {
	font-size: 23px;
}
#logo-variants .monogram-row p {
	font-size: 17px;
	margin-top: 6px;
}
.message-grid {
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	gap: 52px;
	margin-top: 8px;
}
.message-anchor {
	background: var(--teal);
	color: var(--ivory);
	padding: 34px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 360px;
}
.message-role {
	font-weight: 700;
	font-size: 16px;
}
.message-anchor h3 {
	font-size: 39px;
	line-height: 1.15;
	color: var(--aqua);
}
.message-anchor p {
	font-size: 18px;
	max-width: 35ch;
}
.message-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
}
.message-details h3 {
	font-size: 23px;
	color: var(--teal);
}
.message-details p {
	font-size: 18px;
	margin-top: 9px;
}
.motif-layout {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 58px;
	align-items: start;
	margin-top: 10px;
}
.motif-board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	background: var(--mint);
	padding: 28px;
}
.motif-board i {
	display: block;
	aspect-ratio: 1;
	background: var(--teal);
	position: relative;
}
.motif-board .counter {
	border-radius: 50%;
}
.motif-board .quarter {
	border-radius: 100% 0 0 0;
	background: var(--aqua);
}
.motif-board .arch {
	border-radius: 50% 50% 0 0;
}
.motif-board .arch:after {
	content: "";
	position: absolute;
	width: 50%;
	height: 75%;
	bottom: 0;
	left: 25%;
	border-radius: 50% 50% 0 0;
	background: var(--mint);
}
.motif-board .rotate {
	transform: rotate(90deg);
	background: var(--teal);
}
.motif-board .ink {
	background: var(--ink);
}
.motif-board .pale {
	background: var(--paper);
}
.motif-sample figcaption {
	margin-top: 16px;
	font-size: 15px;
}
.motif-rules {
	display: grid;
	gap: 22px;
}
.motif-rules h3 {
	font-size: 25px;
}
.motif-rules p {
	font-size: 18px;
}
.campaign-board {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f4ecd9;
	flex-shrink: 0;
}
.campaign-board > img {
	position: absolute;
	width: 106.89%;
	max-width: none;
	left: -3.44%;
	top: -40.45%;
	height: auto;
}
.campaign-mark {
	width: 130px;
	max-width: 100%;
}
.game-name {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
}
.campaign-action {
	font-size: 14px;
	font-weight: 800;
	color: var(--teal);
	border-bottom: 1px solid var(--teal);
	display: inline-block;
	padding-bottom: 3px;
}
.campaign-wide {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 38px;
	align-items: start;
}
.campaign-wide figcaption,
.campaign-social figcaption,
.endorsement-grid figcaption {
	font-size: 15px;
	margin-top: 12px;
}
.campaign-web {
	padding: 26px;
	background: var(--mint);
	height: 340px;
}
.campaign-web-body {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 20px;
	align-items: center;
	margin-top: 38px;
}
.campaign-web-body > .campaign-board {
	width: 220px;
	max-width: 100%;
}
.campaign-web h3 {
	font-size: 31px;
	line-height: 1.12;
	color: var(--teal);
	margin: 12px 0 18px;
}
.campaign-web-body p:not(.game-name) {
	font-size: 15px;
	margin: 0 0 20px;
}
.campaign-email {
	padding: 24px 28px;
	background: var(--ivory);
	box-shadow: 0 5px 22px #23202012;
	display: grid;
	grid-template-columns: 1fr 108px;
	gap: 14px 18px;
	min-height: 340px;
}
.campaign-email > .campaign-mark {
	grid-column: 1 / -1;
	width: 115px;
	margin-bottom: 6px;
}
.campaign-email > .game-name {
	grid-column: 1 / -1;
}
.campaign-email h3 {
	font-size: 26px;
	color: var(--teal);
	align-self: center;
}
.campaign-email .campaign-board {
	width: 108px;
	align-self: center;
}
.campaign-email > p:not(.game-name),
.campaign-email > .campaign-action {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15px;
	justify-self: start;
}
.campaign-social {
	display: grid;
	grid-template-columns: 350px 280px 1fr;
	gap: 32px;
	align-items: start;
}
.campaign-square {
	height: 350px;
	background: var(--mint);
	position: relative;
	padding: 28px;
	overflow: hidden;
}
.campaign-square > .campaign-mark {
	width: 122px;
}
.campaign-square > .game-name {
	margin-top: 28px;
	font-size: 13px;
}
.campaign-square h3 {
	font-size: 31px;
	position: relative;
	z-index: 1;
	max-width: 280px;
	margin-top: 10px;
	color: var(--teal);
}
.campaign-square .campaign-board {
	width: 180px;
	position: absolute;
	right: 28px;
	bottom: 28px;
}
.campaign-square h3 {
	max-width: none;
	font-size: 27px;
}
.campaign-square .campaign-board {
	width: 145px;
}
.campaign-portrait {
	height: 350px;
	background: var(--mint);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.campaign-portrait h3 {
	font-size: 25px;
	margin-top: 9px;
	color: var(--teal);
}
.campaign-portrait .campaign-board {
	width: 164px;
	align-self: center;
	margin-top: 15px;
}
.campaign-portrait .campaign-mark {
	width: 105px;
	margin-top: auto;
}
.campaign-notes {
	display: grid;
	gap: 23px;
}
.campaign-notes h3 {
	font-size: 24px;
}
.campaign-notes p {
	font-size: 18px;
}
.endorsement-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 12px;
}
.game-led {
	display: flex;
	align-items: center;
	gap: 26px;
	background: #f1e9d9;
	padding: 30px;
	height: 322px;
}
.game-led .campaign-board {
	width: 204px;
}
.game-led h3 {
	font-size: 28px;
	margin-top: 14px;
	color: var(--teal);
}
.game-led .maker-line {
	font-size: 13px;
	margin-top: 26px;
	margin-bottom: 8px;
}
.game-led .campaign-mark {
	width: 140px;
}
.studio-end-card {
	background: var(--night);
	color: var(--ivory);
	height: 322px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	text-align: center;
	padding: 40px;
}
.studio-end-card > img {
	width: 325px;
}
.studio-end-card > p {
	font:
		550 25px / 1.25 Rubik,
		sans-serif;
	color: var(--aqua);
}
.studio-end-card > span {
	font-size: 15px;
}
#hangtags .tag-note {
	max-width: 800px;
}
.reader-brand span {
	white-space: nowrap;
}
@media screen and (max-width: 760px) {
	.kit-link {
		display: none;
	}
	.reader-brand span {
		display: none;
	}
	.message-grid,
	.motif-layout,
	.campaign-wide,
	.campaign-social,
	.endorsement-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.message-anchor {
		min-height: 330px;
		padding: 28px;
	}
	.message-anchor h3 {
		font-size: 34px;
	}
	.message-details {
		gap: 28px;
	}
	.motif-board {
		padding: 20px;
		gap: 10px;
	}
	.motif-rules {
		gap: 28px;
	}
	.campaign-web {
		height: auto;
		min-height: 350px;
		padding: 20px;
	}
	.campaign-web-body {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: 28px;
	}
	.campaign-web-body > .campaign-board {
		width: 180px;
		justify-self: center;
	}
	.campaign-web h3 {
		font-size: 31px;
	}
	.campaign-email {
		padding: 24px;
		grid-template-columns: minmax(0, 1fr) 95px;
	}
	.campaign-email .campaign-board {
		width: 95px;
	}
	.campaign-square {
		width: 100%;
		height: 350px;
	}
	.campaign-portrait {
		width: 280px;
		max-width: 100%;
		margin: auto;
	}
	.game-led {
		height: auto;
		flex-direction: column;
		align-items: flex-start;
	}
	.game-led .campaign-board {
		width: 100%;
		max-width: 220px;
		align-self: center;
	}
	.studio-end-card {
		height: 290px;
		padding: 24px;
	}
	.studio-end-card > p {
		font-size: 23px;
	}
	.mono-variants {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	#logo-variants .monogram-row {
		align-items: flex-start;
	}
	#logo-variants .identity-note {
		margin-top: 30px;
	}
}